/* Selbst gehostete Schriften.
   Vorher ueber fonts.googleapis.com geladen, dabei ging die IP jedes
   Besuchers vor jeder Einwilligung an Google. Nur latin und latin-ext,
   die uebrigen Subsets braucht ein deutschsprachiger Auftritt nicht. */

@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/archivo-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/archivo-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/archivo-600-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/archivo-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('/fonts/archivo-800-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('/fonts/archivo-800-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('/fonts/archivo-900-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('/fonts/archivo-900-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/jetbrains-mono-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/jetbrains-mono-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/jetbrains-mono-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/jetbrains-mono-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* =========================================================
   AIKlar, Design-System
   Umsetzung der Design-Vorlage „AI Klar Website.html".

   Merkmale, die es von den Schwestermarken trennen:
   - Archivo 900 in Versalien, extrem eng gesetzt (ls -0.05em, lh 0.82)
   - Signalrot als Markierungsfläche, nicht als Farbtupfer
   - rechteckige Flächen, kein Radius, keine weichen Schatten
   - JetBrains Mono für alle Meta- und Zahlenangaben
   - harte Rahmen (2px) statt Karten mit Schatten

   Prefix: ak-
   ========================================================= */

/* ===== 1. TOKENS ===== */

:root {
    --ak-ink:        #0A0A0A;   /* Basis: fast Schwarz */
    --ak-ink-soft:   #2A2A2A;
    --ak-paper:      #FFFFFF;
    --ak-paper-2:    #F2F2F0;   /* Off-White für abgesetzte Flächen */

    --ak-signal:     #FF4D2E;   /* Signalrot: Markierung, Payroll, Abschluss */
    --ak-blue:       #1B4EF0;   /* Blau: HR, Live-Werte */

    /* 4,5:1 auf Weiss und auf der abgesetzten Flaeche #F2F2F0.
       #8A8A8A sah ruhiger aus, kam auf Papier aber nur auf 3,08:1. */
    --ak-grey:       #6E6E6E;
    --ak-grey-light: #C4C4C4;
    --ak-warm:       #545048;

    --ak-line:       #0A0A0A;
    --ak-line-soft:  #E5E5E3;
    --ak-line-dark:  rgba(255, 255, 255, 0.18);

    --ak-sans: 'Archivo', Helvetica, Arial, sans-serif;
    --ak-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    --ak-max:  1440px;
    --ak-pad:  32px;

    /* Bewegung: drei Kurven, uebernommen von tino-werner.de.
       out   = Einblenden, schnell an, weich aus
       snap  = Hover und Wischer, knapp und ohne Nachfedern
       pop   = kleine Dinge, die mit Ueberschwinger einrasten */
    --ak-e-out:  cubic-bezier(0.16, 1, 0.3, 1);
    --ak-e-snap: cubic-bezier(0.2, 0.85, 0.2, 1);
    --ak-e-pop:  cubic-bezier(0.2, 1.5, 0.4, 1);
}

*, *::before, *::after { box-sizing: border-box; }

/* [hidden] muss jede display-Regel schlagen. Das Attribut setzt nur das
   Browser-Stylesheet auf display:none, und jede eigene display-Regel gewinnt
   dagegen. Der Knopf "Auswahl speichern" traegt .ak-btn (display:inline-flex)
   und stand deshalb trotz hidden dauerhaft im Einwilligungshinweis. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--ak-paper);
    color: var(--ak-ink);
    font-family: var(--ak-sans);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; display: block; }

::selection { background: var(--ak-signal); color: var(--ak-ink); }

a { color: inherit; }

:focus-visible {
    outline: 3px solid var(--ak-blue);
    outline-offset: 2px;
}


/* ===== 2. RASTER ===== */

.ak-wrap {
    max-width: var(--ak-max);
    margin: 0 auto;
    padding: 0 var(--ak-pad);
}

/* Nur oben. Die Kurzform padding: 96px 0 0 loeschte den Seitenrand von
   .ak-wrap, und jeder Abschnitt mit beiden Klassen lief bis an die Kante. */
.ak-sec       { padding-top: 96px; }
.ak-sec--top  { padding-top: 0; }

/* Vollflächige Bänder brechen aus dem Raster aus */
.ak-band {
    margin-top: 100px;
    padding: 88px 0;
}
.ak-band--dark   { background: var(--ak-ink); color: var(--ak-paper); }
.ak-band--signal { background: var(--ak-signal); color: var(--ak-ink); }


/* ===== 3. TYPOGRAFIE =====
   Versalien, Gewicht 900, negativer Buchstabenabstand.
   Das ist die auffälligste Eigenschaft des Entwurfs. */

.ak-display,
.ak-h1, .ak-h2 {
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.05em;
    line-height: 0.84;
    margin: 0;
    text-wrap: balance;
}

.ak-h1 { font-size: clamp(3rem, 8.2vw, 7.3rem); line-height: 0.82; }
.ak-h2 { font-size: clamp(2.2rem, 4.4vw, 3.95rem); }
.ak-h3 {
    font-size: clamp(1.35rem, 2.2vw, 1.9rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.035em;
    line-height: 0.92;
    margin: 0;
}

/* Markierte Zeile: Signalfläche hinter dem Text, wie mit dem Marker gezogen */
/* inline + box-decoration-break: die Flaeche bricht pro Zeile um,
   statt als ein Block ueber mehrere Zeilen zu laufen. */
.ak-mark,
.ak-hero h1 .ak-highlight {
    background: var(--ak-signal);
    color: var(--ak-ink);
    padding: 0.04em 0.16em 0.1em;
    display: inline;
    -webkit-box-decoration-break: clone;
            box-decoration-break: clone;
    -webkit-text-fill-color: currentColor;
}

.ak-lead {
    font-size: clamp(1.05rem, 1.35vw, 1.22rem);
    line-height: 1.5;
    max-width: 46ch;
    margin: 0;
}
.ak-text {
    font-size: 1rem;
    line-height: 1.62;
    max-width: 62ch;
    margin: 0;
}
.ak-text + .ak-text { margin-top: 0.9rem; }

/* Meta-Angaben: Monospace, Versalien, weit gesperrt */
.ak-meta {
    font-family: var(--ak-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ak-grey);
    margin: 0;
}
.ak-band--dark .ak-meta { color: var(--ak-grey-light); }

.ak-num {
    font-family: var(--ak-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}


/* ===== 4. ETIKETTEN =====
   Die drei Bereiche tragen feste Farben, sie kehren auf den
   Unterseiten wieder und dienen als Orientierung. */

.ak-tags { display: flex; flex-wrap: wrap; gap: 8px; }

.ak-tag {
    font-family: var(--ak-mono);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 6px 10px;
    white-space: nowrap;
}
.ak-tag--hr      { background: var(--ak-blue);   color: #fff; }
.ak-tag--payroll { background: var(--ak-signal); color: var(--ak-ink); }
.ak-tag--finance { background: var(--ak-ink);    color: #fff; }
.ak-tag--outline { background: transparent; color: var(--ak-ink); box-shadow: inset 0 0 0 2px var(--ak-ink); }


/* ===== 5. TRENNZEILE =====
   Linie mit Meta-Text rechts, trennt Abschnitte, ersetzt
   den zentrierten Sektionskopf. */

.ak-rule {
    display: flex;
    align-items: center;
    gap: 24px;
    margin: 0 0 40px;
}
.ak-rule::before {
    content: '';
    flex: 1;
    height: 2px;
    background: var(--ak-ink);
}
.ak-band--dark .ak-rule::before { background: rgba(255,255,255,0.28); }


/* ===== 6. BEDIENELEMENTE =====
   Rechteckig, ohne Radius, ohne weichen Schatten. Bei Hover hebt sich der
   Knopf um 3px und laesst eine harte Kante stehen, beim Klick faellt er
   zurueck. Die Farbe wechselt dabei nicht mehr: Tinte auf Signalrot als
   Kante war lesbarer als der fruehere Farbwechsel auf Rot. */

.ak-btns { display: flex; flex-wrap: wrap; gap: 12px; }

.ak-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 26px;
    border: 2px solid var(--ak-ink);
    border-radius: 0;
    background: var(--ak-ink);
    color: var(--ak-paper);
    font-family: var(--ak-sans);
    font-size: 0.875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-decoration: none;
    cursor: pointer;
    --ak-btn-edge: var(--ak-signal);
    box-shadow: 0 0 0 var(--ak-btn-edge);
    transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease,
                transform 0.22s var(--ak-e-snap), box-shadow 0.22s var(--ak-e-snap);
}
.ak-btn:hover,
.ak-btn:focus-visible { transform: translate(-3px, -3px); box-shadow: 4px 4px 0 var(--ak-btn-edge); }
.ak-btn:active { transform: none; box-shadow: 0 0 0 var(--ak-btn-edge); }

.ak-btn--ghost {
    background: transparent;
    color: var(--ak-ink);
}
.ak-btn--ghost { --ak-btn-edge: var(--ak-ink); }

.ak-band--dark .ak-btn {
    background: var(--ak-paper);
    border-color: var(--ak-paper);
    color: var(--ak-ink);
}
.ak-band--dark .ak-btn--ghost { background: transparent; color: var(--ak-paper); --ak-btn-edge: var(--ak-signal); }

/* Gleiches gilt im dunklen Kasten. Ohne diese Regel erbt der Geisterknopf
   Tinte auf Tinte und ist schlicht unsichtbar, zuletzt auf der 404-Seite. */
.ak-box--ink .ak-btn--ghost { background: transparent; color: var(--ak-paper); border-color: var(--ak-paper); --ak-btn-edge: var(--ak-signal); }

.ak-band--signal .ak-btn { background: var(--ak-ink); border-color: var(--ak-ink); color: var(--ak-paper); --ak-btn-edge: var(--ak-paper); }

/* Textlink mit Pfeil */
.ak-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    text-decoration: none;
    border-bottom: 2px solid var(--ak-signal);
    padding-bottom: 2px;
    transition: gap 0.14s ease;
}
.ak-link:hover { gap: 14px; }

/* Pfeil in Knoepfen und Zeilen, rueckt bei Hover nach */
.ak-arr { width: 20px; height: 20px; flex: 0 0 auto; transition: transform 0.26s var(--ak-e-snap); }
.ak-btn:hover .ak-arr, .ak-btn:focus-visible .ak-arr { transform: translateX(5px); }

/* Verweis mitten im Satz. Die Grundform ist inline-flex und damit ein Block,
   der nicht umbrechen kann. Im Fliesstext braucht es echtes inline, sonst
   sitzt der halbe Satz als Kasten in der Zeile. */
.ak-link--inline {
    display: inline;
    font-weight: 600;
    border-bottom: none;
    padding-bottom: 0;
    text-decoration: underline;
    text-decoration-color: var(--ak-signal);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
.ak-link--inline:hover { color: var(--ak-signal); }


/* ===== 7. KÄSTEN =====
   Harte Rahmen statt Karten mit Schatten. */

.ak-box {
    border: 2px solid var(--ak-ink);
    padding: 28px;
    background: var(--ak-paper);
}
.ak-box--ink    { background: var(--ak-ink);    color: var(--ak-paper); border-color: var(--ak-ink); }
.ak-box--blue   { background: var(--ak-blue);   color: #fff;            border-color: var(--ak-blue); }
.ak-box--signal { background: var(--ak-signal); color: var(--ak-ink);   border-color: var(--ak-signal); }
.ak-box--paper  { background: var(--ak-paper-2); border-color: var(--ak-paper-2); }

.ak-grid { display: grid; gap: 0; }
.ak-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ak-grid--2 { grid-template-columns: repeat(2, 1fr); }

/* Kästen im Verbund: gemeinsame Kanten, keine doppelten Linien */
.ak-grid--joined { border: 2px solid var(--ak-ink); }
.ak-grid--joined > * { border-right: 2px solid var(--ak-ink); border-bottom: none; padding: 28px; }
.ak-grid--joined > *:last-child { border-right: none; }


/* ===== 8. NUMMERIERTE POSITIONEN =====
   Für Leistungen und Ablauf: große Nummer, harte Trennlinie. */

.ak-items { border-top: 2px solid var(--ak-ink); }

.ak-item {
    display: grid;
    grid-template-columns: 76px 1fr auto;
    gap: 28px;
    align-items: start;
    padding: 32px 0;
    border-bottom: 2px solid var(--ak-ink);
    text-decoration: none;
    color: inherit;
    transition: padding 0.28s var(--ak-e-snap);
}
/* Verlinkte Zeile: Signalrot steigt als Flaeche von unten. Alles darin
   wird Tinte, Grau und Warmgrau kaemen auf Rot nicht auf 4,5:1. */
a.ak-item { position: relative; isolation: isolate; }
a.ak-item::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--ak-signal);
    transform: scaleY(0);
    transform-origin: 50% 100%;
    transition: transform 0.3s var(--ak-e-snap);
}
a.ak-item:hover,
a.ak-item:focus-visible { padding-left: 18px; padding-right: 12px; }
a.ak-item:hover::before,
a.ak-item:focus-visible::before { transform: scaleY(1); }
a.ak-item:hover *,
a.ak-item:focus-visible * { color: var(--ak-ink); }

.ak-item-no {
    font-family: var(--ak-mono);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--ak-grey);
    padding-top: 4px;
}
.ak-item-desc {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--ak-warm);
    margin: 10px 0 0;
    max-width: 58ch;
}
.ak-item-val {
    font-family: var(--ak-mono);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ak-grey);
    white-space: nowrap;
    padding-top: 6px;
}

.ak-band--dark .ak-items,
.ak-band--dark .ak-item { border-color: var(--ak-line-dark); }
.ak-band--dark .ak-item-desc { color: var(--ak-grey-light); }
.ak-band--dark .ak-item-val  { color: var(--ak-grey-light); }
.ak-band--dark .ak-item-no   { color: var(--ak-grey-light); }


/* ===== 9. AUFKLAPPBARE FRAGEN =====
   Nativ über <details>: ohne JavaScript bedienbar. */

.ak-faq { border-top: 2px solid var(--ak-ink); }

.ak-q {
    border-bottom: 2px solid var(--ak-ink);
}
.ak-q summary {
    display: grid;
    grid-template-columns: 76px 1fr 32px;
    gap: 28px;
    align-items: baseline;
    padding: 28px 0;
    cursor: pointer;
    list-style: none;
    font-weight: 900;
    font-size: clamp(1.02rem, 1.5vw, 1.2rem);
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 1.15;
}
.ak-q summary::-webkit-details-marker { display: none; }
.ak-q summary::after {
    content: '+';
    font-family: var(--ak-mono);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1;
    justify-self: end;
    transition: transform 0.3s var(--ak-e-pop);
}
/* Das Plus dreht bei Hover an und rastet offen als Kreuz ein.
   Signalrot als Textfarbe gab es hier vorher, das faellt auf Weiss
   mit 3,31:1 durch. */
.ak-q summary:hover::after { transform: rotate(90deg); }
.ak-q[open] summary::after { transform: rotate(135deg); }
.ak-q-a {
    grid-column: 2;
    padding: 0 0 28px 104px;
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--ak-warm);
    max-width: 72ch;
    margin: 0;
}


/* ===== 10. NAVIGATION ===== */

/* Band der Markenfamilie, klebt ueber dem Kopf.

   FESTE HOEHE MIT ABSICHT. Der Kopf klebt bei top: var(--ak-topband-h), also
   muss die Hoehe verlaesslich sein. nowrap plus overflow: hidden verhindern,
   dass ein Umbruch das Band zweizeilig macht und der Kopf darunter zu tief
   haengt. Wer die Hoehe aendert, aendert die Variable, nicht die Regel.

   Keine Pillen wie bei den Schwesterseiten: Knoepfe sind hier rechteckig. */
:root { --ak-topband-h: 40px; }

.ak-topband {
    position: sticky;
    top: 0;
    z-index: 101;          /* ueber dem Kopf (100), unter dem Skip-Link (200) */
    height: var(--ak-topband-h);
    background: var(--ak-ink);
    color: var(--ak-grey-light);
    overflow: hidden;
}
.ak-topband-inner {
    max-width: var(--ak-max);
    margin: 0 auto;
    padding: 0 var(--ak-pad);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    white-space: nowrap;
}
.ak-topband-txt {
    margin: 0;
    font-family: var(--ak-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ak-grey-light);   /* --ak-grey erreicht auf Ink nur 3,88:1 */
}
.ak-topband-kurz { display: none; }

.ak-topband-marke {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    padding: 4px 10px;
    border: 2px solid var(--ak-grey-light);
    color: var(--ak-paper);
    text-decoration: none;
    font-size: 0.78rem;
    transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.ak-topband-marke:hover,
.ak-topband-marke:focus-visible {
    /* Signalrot als Flaeche, Text in Tinte: 5,99:1. Rot als Textfarbe
       waere der Fehler, den die Marke gerade nicht macht. */
    background: var(--ak-signal);
    border-color: var(--ak-signal);
    color: var(--ak-ink);
}
.ak-topband-marke:focus-visible { outline: 3px solid var(--ak-paper); outline-offset: 2px; }
.ak-topband-name { font-weight: 800; letter-spacing: -0.01em; }
.ak-topband-tag {
    font-family: var(--ak-mono);
    font-size: 0.64rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ak-grey-light);
}
.ak-topband-marke:hover .ak-topband-tag,
.ak-topband-marke:focus-visible .ak-topband-tag { color: var(--ak-ink); }

@media (prefers-reduced-motion: reduce) {
    .ak-topband-marke { transition: none; }
}

.ak-nav {
    position: sticky;
    top: var(--ak-topband-h);
    z-index: 100;
    background: var(--ak-paper);
    border-bottom: 2px solid var(--ak-ink);
}
.ak-nav-inner {
    max-width: var(--ak-max);
    margin: 0 auto;
    padding: 0 var(--ak-pad);
    height: 72px;
    display: flex;
    align-items: center;
    gap: 32px;
}

.ak-logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 900;
    font-size: 1.15rem;
    text-transform: uppercase;
    letter-spacing: -0.03em;
    text-decoration: none;
    color: var(--ak-ink);
}
.ak-logo-dot {
    width: 12px;
    height: 12px;
    background: var(--ak-signal);
    flex-shrink: 0;
    transition: transform 0.3s var(--ak-e-pop);
}
.ak-logo:hover .ak-logo-dot { transform: rotate(45deg) scale(1.15); }

.ak-nav-menu {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 28px;
}
/* :not(.ak-btn) ist noetig, sonst faerbt diese Regel den
   Terminknopf schwarz auf schwarz und ueberschreibt seine Schrift. */
.ak-nav-menu a:not(.ak-btn) {
    font-family: var(--ak-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: none;
    color: var(--ak-ink);
    padding: 6px 0;
    /* Unterstrich wischt von links ein statt aufzublitzen */
    background: linear-gradient(var(--ak-signal), var(--ak-signal)) no-repeat 0 100% / 0% 2px;
    transition: background-size 0.28s var(--ak-e-snap);
}
.ak-nav-menu a:not(.ak-btn):hover,
.ak-nav-menu a:not(.ak-btn):focus-visible { background-size: 100% 2px; }

.ak-nav .ak-btn { min-height: 44px; padding: 0 20px; font-size: 0.8rem; }

.ak-burger {
    display: none;
    margin-left: auto;
    width: 44px;
    height: 44px;
    border: 2px solid var(--ak-ink);
    background: transparent;
    cursor: pointer;
    padding: 0;
    position: relative;
}
.ak-burger span {
    position: absolute;
    left: 11px;
    width: 18px;
    height: 2px;
    background: var(--ak-ink);
    transition: transform 0.18s ease, opacity 0.18s ease;
}
.ak-burger span:nth-child(1) { top: 14px; }
.ak-burger span:nth-child(2) { top: 20px; }
.ak-burger span:nth-child(3) { top: 26px; }
.ak-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.ak-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ak-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }


/* ===== 11. FUSSBEREICH ===== */

.ak-footer {
    background: var(--ak-ink);
    color: var(--ak-paper);
    margin-top: 0;
    padding: 72px 0 40px;
}
.ak-footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 56px;
    border-bottom: 2px solid var(--ak-line-dark);
}
.ak-footer h2 {
    font-family: var(--ak-mono);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ak-grey-light);
    margin: 0 0 18px;
}
.ak-footer ul { list-style: none; margin: 0; padding: 0; }
.ak-footer li { margin-bottom: 11px; }
.ak-footer a, .ak-footer button {
    color: var(--ak-paper);
    text-decoration: none;
    font-size: 0.94rem;
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
}
.ak-footer a:hover, .ak-footer button:hover { color: var(--ak-signal); }
.ak-footer .ak-logo { color: var(--ak-paper); font-size: 1.35rem; }

.ak-footer-claim {
    padding-top: 32px;
    font-family: var(--ak-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ak-grey-light);
    display: flex;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}


/* ===== 12. BEWEGUNG =====
   Sparsam: Inhalte blenden beim Scrollen ein, sonst nichts.
   Ohne JavaScript bleibt alles sichtbar (Klasse .ak-js). */

.ak-js .reveal {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1),
                transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.ak-js .reveal.visible { opacity: 1; transform: none; }

.ak-js .ak-stagger > * {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition: opacity 0.5s cubic-bezier(0.16,1,0.3,1),
                transform 0.5s cubic-bezier(0.16,1,0.3,1);
    transition-delay: calc(var(--ak-i, 0) * 70ms);
}
.ak-js .ak-stagger.visible > * { opacity: 1; transform: none; }
/* Verlinkte Zeilen in einer Staffel: Die Regel oben ersetzt ihre eigene
   transition, der Einzug bei Hover sprang dann hart. Hier kommt er zurueck,
   ohne die Staffelverzoegerung zu erben. */
.ak-js .ak-stagger > a.ak-item {
    transition-property: opacity, transform, padding;
    transition-duration: 0.5s, 0.5s, 0.28s;
    transition-timing-function: var(--ak-e-out), var(--ak-e-out), var(--ak-e-snap);
    transition-delay: calc(var(--ak-i, 0) * 70ms), calc(var(--ak-i, 0) * 70ms), 0s;
}

/* Markierung hinter den Text der eigenen Ueberschrift. Bei line-height 0.82
   ragt die rote Flaeche in die Zeile darueber und wurde als spaeter gemaltes
   Element ueber deren Unterkante gelegt ("SEITE" auf der 404, "IHREN" auf
   Kontakt). z-index -1 legt sie hinter den Text, isolation haelt sie in der
   Ueberschrift, sonst verschwaende sie hinter dem Hintergrund des Abschnitts.
   Auf der Startseite steht jede Zeile in einem eigenen .ak-rise, das per
   transform einen eigenen Stapel bildet. Dort liegen die oberen Zeilen
   deshalb zusaetzlich ueber der letzten. */
h1, h2, .ak-h1, .ak-h2 { isolation: isolate; }
:is(h1, h2, .ak-h1, .ak-h2) .ak-mark,
.ak-hero h1 .ak-highlight { position: relative; z-index: -1; }
.ak-h1 > .ak-rise { position: relative; z-index: 1; }
.ak-h1 > .ak-rise:last-child { z-index: 0; }

/* ----- Lesefortschritt -----
   script.js haengt das Element an und setzt scaleX beim Scrollen.
   Sitzt direkt auf der Unterkante der Kopfleiste (Band + 72px). */
.ak-progress {
    position: fixed;
    left: 0;
    right: 0;
    top: calc(var(--ak-topband-h, 0px) + 71px);
    height: 3px;
    z-index: 101;
    background: var(--ak-signal);
    transform: scaleX(0);
    transform-origin: 0 50%;
    pointer-events: none;
}

/* ----- Beim Laden -----
   Alles hier haengt an no-preference. Wer reduzierte Bewegung eingestellt
   hat, sieht sofort den Endzustand, ohne dass eine Verzoegerung stehen
   bleibt: Die globale Regel unten kuerzt nur die Dauer, nicht das delay,
   und die Markierung waere sonst eine dreiviertel Sekunde lang weiss. */
@keyframes ak-rise  { from { opacity: 0; transform: translateY(28px); } }
@keyframes ak-pop   { from { opacity: 0; transform: scale(0.6) rotate(-8deg); } }
@keyframes ak-wipe  { to   { background-size: 100% 100%; } }
@keyframes ak-grow  { from { transform: scaleX(0); } }
@keyframes ak-slide { to   { transform: translateX(-50%); } }
@keyframes ak-blink { 0%, 90%, 100% { opacity: 1; } 94% { opacity: 0.1; } }
@keyframes ak-rowin { from { opacity: 0; transform: translateX(-14px); } }
@keyframes ak-stamp {
    0%   { opacity: 0; transform: scale(1.9); }
    60%  { opacity: 1; transform: scale(0.92); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: no-preference) {
    /* Zeilen der Kopfzeile, Einleitung, Knoepfe: gestaffelt ueber --ak-d */
    .ak-rise { animation: ak-rise 0.8s var(--ak-e-out) var(--ak-d, 0s) backwards; }

    /* Etiketten springen nacheinander herein */
    .ak-tags--pop > * { animation: ak-pop 0.5s var(--ak-e-pop) backwards; }
    .ak-tags--pop > :nth-child(2) { animation-delay: 0.08s; }
    .ak-tags--pop > :nth-child(3) { animation-delay: 0.16s; }

    /* Signalflaeche wischt von links hinter den Text. Als Verlauf mit
       zwei gleichen Farben, weil sich nur background-size animieren laesst;
       box-decoration-break: clone aus .ak-mark bleibt wirksam. */
    .ak-mark--wipe {
        background: linear-gradient(var(--ak-signal), var(--ak-signal)) no-repeat 0 0 / 0% 100%;
        animation: ak-wipe 0.55s var(--ak-e-snap) 0.75s forwards;
    }

    /* Logo-Punkt blinkt selten und kurz, wie eine Aufnahmelampe */
    .ak-logo-dot { animation: ak-blink 9s ease 3s infinite; }

    /* Vergleichsbalken wachsen, sobald ihr Abschnitt einblendet */
    .ak-js .reveal.visible .ak-cbar { animation: ak-grow 1.1s var(--ak-e-out) var(--ak-d, 0.3s) backwards; }

    /* Laufband */
    .ak-ticker-in { animation: ak-slide 38s linear infinite; }
    .ak-ticker--rev .ak-ticker-in { animation-duration: 46s; animation-direction: reverse; }
    .ak-tickers:hover .ak-ticker-in,
    .ak-tickers.is-paused .ak-ticker-in,
    .ak-tickers.ak-paused .ak-ticker-in { animation-play-state: paused; }

    /* Aufgeklappte Antwort gleitet herein */
    .ak-q[open] .ak-q-a { animation: ak-rise 0.45s var(--ak-e-out) backwards; }

    /* Protokoll: script.js setzt .is-in Zeile fuer Zeile */
    .ak-js .ak-run-row.is-in { animation: ak-rowin 0.45s var(--ak-e-out) backwards; }
    .ak-js .ak-run-row.is-in .ak-run-st { animation: ak-stamp 0.4s var(--ak-e-pop) 0.25s backwards; }
}


/* ----- Ablaufprotokoll im Kopfbereich -----
   Beispiellauf, keine Kundendaten. Ohne JavaScript stehen alle Zeilen da.
   Mit JavaScript laufen sie einmal nacheinander ein, sobald das Protokoll
   im Blick ist. Einmal, nicht in Schleife: Was sich laenger als fuenf
   Sekunden von selbst bewegt, braucht nach WCAG 2.2.2 einen Halteknopf. */
.ak-run {
    background: var(--ak-ink);
    color: var(--ak-paper);
    padding: 26px 30px 24px;
    display: flex;
    flex-direction: column;
}
.ak-run-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ak-run-head .ak-meta { color: var(--ak-paper); }
.ak-run-head .ak-run-step { margin-left: auto; color: var(--ak-grey-light); }
.ak-run-dot { width: 8px; height: 8px; background: var(--ak-signal); flex-shrink: 0; }
.ak-run-track { height: 3px; background: rgba(255,255,255,0.14); margin: 18px 0 6px; }
.ak-run-bar {
    height: 3px;
    width: 100%;
    background: var(--ak-signal);
    transition: width 0.6s var(--ak-e-snap);
}
.ak-run-list { list-style: none; margin: 0; padding: 0; flex-grow: 1; }
.ak-run-row {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr) 64px 84px;
    gap: 14px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.14);
    font-size: 0.94rem;
    line-height: 1.35;
}
.ak-run-time { font-family: var(--ak-mono); font-size: 0.75rem; color: var(--ak-grey-light); }
.ak-run-n { justify-self: end; font-family: var(--ak-mono); font-size: 0.86rem; font-weight: 700; }
.ak-run-st {
    justify-self: end;
    font-family: var(--ak-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 8px;
    border: 2px solid rgba(255,255,255,0.5);
}
/* Ausnahme als Signalflaeche mit Tinte (5,99:1), Abschluss weiss */
.ak-run-st--flag { background: var(--ak-signal); border-color: var(--ak-signal); color: var(--ak-ink); }
.ak-run-st--done { background: var(--ak-paper); border-color: var(--ak-paper); color: var(--ak-ink); }
.ak-js .ak-run-row.is-wait { opacity: 0; }
.ak-run-foot {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding-top: 16px;
    border-top: 2px solid var(--ak-signal);
}
.ak-run-sum { margin: 0; font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; font-size: 1.1rem; }
.ak-run-foot .ak-meta { color: var(--ak-grey-light); }

/* Kennzahlen unter der Einleitung */
.ak-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 2px solid var(--ak-ink); }
.ak-fig { padding: 22px 24px; }
.ak-fig--blue { background: var(--ak-blue); color: #fff; }
.ak-fig--blue .ak-meta { color: #fff; }
.ak-fig-val {
    margin: 10px 0 6px;
    font-size: clamp(2.6rem, 4.4vw, 4rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}
.ak-fig-txt { margin: 0; font-size: 0.9rem; line-height: 1.45; }


/* ----- Laufband -----
   Inhalt steht zweimal im Markup, die zweite Haelfte aria-hidden.
   Verschoben wird um genau die Haelfte, dann schliesst es nahtlos. */
.ak-tickers { position: relative; border-top: 2px solid var(--ak-ink); border-bottom: 2px solid var(--ak-ink); }
.ak-ticker { overflow: hidden; white-space: nowrap; padding: 16px 0; background: var(--ak-ink); color: var(--ak-paper); }
.ak-ticker--rev { padding: 12px 0; background: var(--ak-signal); color: var(--ak-ink); }
.ak-ticker-in { display: inline-flex; }
.ak-ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 22px;
    padding-right: 22px;
    font-family: var(--ak-mono);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.ak-ticker-item::after { content: ""; width: 9px; height: 9px; background: var(--ak-signal); flex-shrink: 0; }
.ak-ticker--rev .ak-ticker-item::after { background: var(--ak-ink); }
/* Halteknopf (WCAG 2.2.2). Sitzt rechts auf dem oberen Band. */
.ak-ticker-toggle {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-left: 2px solid var(--ak-paper);
    background: var(--ak-ink);
    color: var(--ak-paper);
    cursor: pointer;
}
.ak-ticker-toggle svg { width: 16px; height: 16px; }
.ak-ticker-toggle .ak-ico-play { display: none; }
.ak-tickers.is-paused .ak-ico-pause { display: none; }
.ak-tickers.is-paused .ak-ico-play { display: block; }
/* Ohne Bewegung laeuft nichts, dann braucht es auch keinen Knopf */
@media (prefers-reduced-motion: reduce) { .ak-ticker-toggle { display: none; } }


/* ----- Vergleichsbalken (Ein Dienstag) ----- */
.ak-cbar-track { height: 14px; margin: 16px 0 10px; background: var(--ak-line-soft); }
.ak-box--ink .ak-cbar-track { background: rgba(255,255,255,0.14); }
.ak-cbar { height: 14px; background: var(--ak-ink); transform-origin: 0 50%; }
.ak-box--ink .ak-cbar { background: var(--ak-signal); }


/* ----- Phasen (Vorgehen) -----
   Kachel hebt sich mit harter Kante, die Nummer kippt mit Ueberschwinger. */
.ak-phases { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.ak-phase {
    border: 2px solid var(--ak-ink);
    background: var(--ak-paper);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    transition: transform 0.3s var(--ak-e-snap), box-shadow 0.3s var(--ak-e-snap);
}
.ak-phase:hover { transform: translate(-4px, -6px); box-shadow: 8px 10px 0 var(--ak-ink); }
.ak-phase-no {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    background: var(--ak-signal);
    color: var(--ak-ink);
    font-size: 2.1rem;
    font-weight: 900;
    letter-spacing: -0.04em;
    transition: transform 0.35s var(--ak-e-pop);
}
.ak-phase:hover .ak-phase-no { transform: rotate(-10deg); }
.ak-phase .ak-h3 { margin-top: 10px; }
.ak-phase .ak-item-desc { font-size: 0.94rem; }

@media (max-width: 1100px) {
    .ak-phases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .ak-phases { grid-template-columns: 1fr; }
    .ak-figs { grid-template-columns: 1fr; }
    .ak-run { padding: 20px 18px; }
    .ak-run-row {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "time st" "text n";
        row-gap: 4px;
    }
    .ak-run-time { grid-area: time; }
    .ak-run-txt  { grid-area: text; }
    .ak-run-n    { grid-area: n; }
    .ak-run-st   { grid-area: st; }
}


/* ===== 13. HILFSKLASSEN ===== */

.ak-mt   { margin-top: 24px; }
.ak-mt-l { margin-top: 48px; }
.ak-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Sprung zum Inhalt: liegt als erstes Element im Body und parkt ausserhalb
   des Bildes, bis er den Fokus bekommt. z-index 200, weil die Kopfleiste
   sticky auf 100 liegt und ihn sonst verdeckt. Der Cookie-Hinweis auf 9999
   bleibt bewusst darueber, solange er offen ist, gehoert er nach vorn. */
.ak-skip {
    position: fixed; top: -120px; left: 12px; z-index: 200;
    display: inline-block; padding: 14px 22px;
    background: var(--ak-ink); color: var(--ak-paper);
    font-family: var(--ak-mono); font-size: 0.78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.1em;
    text-decoration: none; border: 2px solid var(--ak-ink); border-radius: 0;
}

/* Bewusst :focus und nicht :focus-visible: Der Verweis muss auch dann
   auftauchen, wenn ein Hilfsmittel ihn programmgesteuert anspringt. */
.ak-skip:focus { top: 12px; }

/* Das Sprungziel bekommt per Skript tabindex="-1", damit die Tastatur
   mitwandert. Eine Umrandung um den kompletten Inhaltsbereich waere aber
   nur Laerm, und main steht nicht in der Tabulatorfolge. */
main:focus { outline: none; }


/* ===== 14. RESPONSIV ===== */

@media (max-width: 1024px) {
    .ak-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 860px) {
    :root { --ak-pad: 20px; }

    .ak-nav-menu {
        position: fixed;
        inset: 72px 0 auto 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--ak-paper);
        border-bottom: 2px solid var(--ak-ink);
        padding: 8px var(--ak-pad) 20px;
        display: none;
    }
    .ak-nav-menu.open { display: flex; }
    .ak-nav-menu a {
        padding: 16px 0;
        border-bottom: 1px solid var(--ak-line-soft);
        font-size: 0.85rem;
    }
    .ak-nav-menu .ak-btn { margin-top: 14px; }
    .ak-burger { display: block; }

    .ak-sec  { padding-top: 64px; }
    .ak-band { margin-top: 64px; padding: 64px 0; }

    .ak-grid--3, .ak-grid--2 { grid-template-columns: 1fr; }
    .ak-grid--joined > * { border-right: none; border-bottom: 2px solid var(--ak-ink); }
    .ak-grid--joined > *:last-child { border-bottom: none; }

    .ak-item { grid-template-columns: 56px 1fr; gap: 16px; }
    .ak-item-val { grid-column: 2; padding-top: 10px; }

    .ak-q summary { grid-template-columns: 44px 1fr 24px; gap: 14px; }
    .ak-q-a { padding-left: 58px; }

    .ak-footer-grid { grid-template-columns: 1fr; }
    .ak-btns .ak-btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
    .ak-js .reveal,
    .ak-js .ak-stagger > * { opacity: 1 !important; transform: none !important; }
    .ak-js .ak-run-row.is-wait { opacity: 1; }
}


/* ===== 15. COOKIE-BANNER ===== */

.ak-cookie-banner {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    width: calc(100% - 40px);
    max-width: 620px;
    background: var(--ak-paper);
    border: 2px solid var(--ak-ink);
    padding: 26px;
    z-index: 9999;
}
.ak-cookie-inner { display: flex; flex-direction: column; gap: 14px; }
.ak-cookie-title {
    font-size: 1.05rem; font-weight: 900; text-transform: uppercase;
    letter-spacing: -0.02em; margin: 0;
}
.ak-cookie-text { font-size: 0.9rem; line-height: 1.6; margin: 0; color: var(--ak-warm); }
.ak-cookie-text a { color: var(--ak-ink); text-decoration: underline; }

.ak-cookie-options {
    display: flex; flex-direction: column; gap: 16px;
    border-top: 2px solid var(--ak-ink); padding-top: 16px;
}
.ak-cookie-option-head {
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px; margin-bottom: 5px;
}
.ak-cookie-option-name { font-size: 0.88rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; }
.ak-cookie-option-desc { font-size: 0.82rem; line-height: 1.55; color: var(--ak-warm); margin: 0; }
.ak-cookie-badge {
    font-family: var(--ak-mono); font-size: 0.68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    background: var(--ak-ink); color: var(--ak-paper); padding: 4px 9px; white-space: nowrap;
}

/* Schalter: eckig wie alles andere */
.ak-switch { position: relative; display: inline-flex; flex-shrink: 0; cursor: pointer; }
.ak-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ak-switch-track {
    width: 48px; height: 26px; background: var(--ak-paper);
    box-shadow: inset 0 0 0 2px var(--ak-ink);
    transition: background 0.15s ease; pointer-events: none;
}
.ak-switch-track::after {
    content: ''; position: absolute; top: 4px; left: 4px;
    width: 18px; height: 18px; background: var(--ak-ink);
    transition: transform 0.15s ease;
}
.ak-switch input:checked + .ak-switch-track { background: var(--ak-signal); }
.ak-switch input:checked + .ak-switch-track::after { transform: translateX(22px); }
.ak-switch input:focus-visible + .ak-switch-track { outline: 3px solid var(--ak-blue); outline-offset: 2px; }

.ak-cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ak-cookie-actions .ak-btn { min-height: 46px; padding: 0 18px; font-size: 0.78rem; }
.ak-cookie-link {
    font-family: var(--ak-mono); font-size: 0.75rem; text-transform: uppercase;
    letter-spacing: 0.08em; background: none; border: none; cursor: pointer;
    color: var(--ak-warm); text-decoration: underline; margin-right: auto;
    min-height: 44px; padding: 0;
}
.ak-cookie-link:hover { color: var(--ak-ink); }

@media (max-width: 560px) {
    .ak-cookie-banner { bottom: 0; width: 100%; border-left: none; border-right: none; border-bottom: none; }
    .ak-cookie-actions { flex-direction: column; align-items: stretch; }
    .ak-cookie-link { margin-right: 0; text-align: left; }
}


/* =========================================================
   16. ÜBERSETZUNGSSCHICHT
   Die Unterseiten tragen noch die Klassen des alten Aufbaus.
   Statt dreizehn Dateien umzuschreiben, werden sie hier auf
   das neue System abgebildet. Neue Seiten nutzen direkt die
   Klassen aus Abschnitt 1–14.
   ========================================================= */

/* ----- Raster ----- */
.container {
    max-width: var(--ak-max);
    margin: 0 auto;
    padding: 0 var(--ak-pad);
}
.ak-section { padding: 88px 0 0; }
.ak-section--gray,
.ak-section--violet { background: var(--ak-paper-2); padding: 88px 0; margin-top: 88px; }
.ak-section--dark { background: var(--ak-ink); color: var(--ak-paper); padding: 88px 0; margin-top: 88px; }

/* ----- Kopfzeile eines Abschnitts ----- */
.ak-section-header { margin-bottom: 44px; }
.ak-eyebrow {
    display: block;
    font-family: var(--ak-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ak-grey);
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--ak-ink);
}
.ak-section--dark .ak-eyebrow { border-bottom-color: rgba(255,255,255,0.28); }
.ak-section-title {
    font-size: clamp(2rem, 4.2vw, 3.6rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.05em;
    line-height: 0.86;
    margin: 0 0 18px;
    text-wrap: balance;
}
.ak-section-sub {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--ak-warm);
    max-width: 62ch;
    margin: 0;
}
.ak-section--dark .ak-section-sub { color: var(--ak-grey-light); }

/* ----- Kopfbereich der Unterseiten ----- */
.ak-hero {
    position: relative;
    background: var(--ak-paper);
    border-bottom: 2px solid var(--ak-ink);
    padding: 56px 0 64px;
}
.ak-hero--light { background: var(--ak-paper-2); }
/* Einspaltig: die Ueberschrift braucht die volle Breite, sonst
   laeuft die Signalflaeche ueber drei Zeilen und erschlaegt die Seite.
   Das Beiwerk sitzt darunter, wie in der Vorlage. */
.ak-hero-container {
    max-width: var(--ak-max);
    margin: 0 auto;
    padding: 0 var(--ak-pad);
    display: block;
}
.ak-hero-content { max-width: 100%; }
.ak-hero-visual {
    margin-top: 40px;
    max-width: 520px;
}
.ak-hero h1 {
    font-size: clamp(2.4rem, 6vw, 4.6rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.05em;
    line-height: 0.86;
    color: var(--ak-ink);
    margin: 0 0 22px;
    text-wrap: balance;
}
.ak-hero-sub {
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    line-height: 1.55;
    color: var(--ak-warm);
    max-width: 52ch;
    margin: 0;
}
.ak-hero-eyebrow {
    display: inline-block;
    font-family: var(--ak-mono);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background: var(--ak-signal);
    color: var(--ak-ink);
    padding: 6px 10px;
    margin-bottom: 22px;
}
.ak-hero-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.ak-hero-trust {
    display: flex; flex-wrap: wrap; gap: 28px;
    margin-top: 36px; padding-top: 22px;
    border-top: 2px solid var(--ak-ink);
    font-family: var(--ak-mono); font-size: 0.75rem;
    text-transform: uppercase; letter-spacing: 0.06em; color: var(--ak-warm);
}
.ak-hero-trust strong { color: var(--ak-ink); font-weight: 700; }

/* Brotkrumen */
.ak-breadcrumb, .aka-breadcrumb { margin-bottom: 20px; }
.ak-breadcrumb-inner, .aka-breadcrumb {
    display: flex; gap: 8px; flex-wrap: wrap;
    font-family: var(--ak-mono); font-size: 0.72rem;
    text-transform: uppercase; letter-spacing: 0.08em; color: var(--ak-grey);
}
.ak-breadcrumb a, .aka-breadcrumb a { color: var(--ak-ink); text-decoration: none; }
.ak-breadcrumb a:hover, .aka-breadcrumb a:hover { color: var(--ak-signal); }

/* ----- Knöpfe des alten Aufbaus ----- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 52px; padding: 0 26px;
    border: 2px solid var(--ak-ink); border-radius: 0;
    background: var(--ak-ink); color: var(--ak-paper);
    font-family: var(--ak-sans); font-size: 0.875rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.02em; text-decoration: none; cursor: pointer;
    transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.btn:hover { background: var(--ak-signal); border-color: var(--ak-signal); color: var(--ak-ink); }
.btn-ak-outline, .btn-ak-white-outline { background: transparent; color: var(--ak-ink); }
.btn-ak-outline:hover, .btn-ak-white-outline:hover { background: var(--ak-ink); color: var(--ak-paper); }
.btn-ak-white { background: var(--ak-paper); color: var(--ak-ink); border-color: var(--ak-paper); }
.btn-large { min-height: 56px; padding: 0 30px; }

.ak-section--dark .btn, .ak-cta-band .btn { background: var(--ak-paper); border-color: var(--ak-paper); color: var(--ak-ink); }
.ak-section--dark .btn:hover, .ak-cta-band .btn:hover { background: var(--ak-signal); border-color: var(--ak-signal); }
.ak-section--dark .btn-ak-white-outline, .ak-cta-band .btn-ak-white-outline { background: transparent; color: var(--ak-paper); }
.ak-section--dark .btn-ak-white-outline:hover, .ak-cta-band .btn-ak-white-outline:hover { background: var(--ak-paper); color: var(--ak-ink); }

/* ----- Karten werden zu Kästen mit harter Kante ----- */
.ak-cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ak-cards-grid--4 { grid-template-columns: repeat(4, 1fr); }
.ak-cards-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ak-card {
    background: var(--ak-paper);
    border: 2px solid var(--ak-ink);
    border-radius: 0;
    padding: 26px;
    box-shadow: none;
    transition: background 0.14s ease;
}
.ak-card:hover { background: var(--ak-paper-2); transform: none; box-shadow: none; }
.ak-card--featured { background: var(--ak-paper); border-color: var(--ak-signal); animation: none; }
.ak-card h3 {
    font-size: 1.15rem; font-weight: 900; text-transform: uppercase;
    letter-spacing: -0.03em; line-height: 1.05; margin: 0 0 12px; color: var(--ak-ink);
}
.ak-card p { font-size: 0.94rem; line-height: 1.6; color: var(--ak-warm); margin: 0 0 16px; }
.ak-card-icon {
    width: 40px; height: 40px; border-radius: 0;
    background: var(--ak-ink); color: var(--ak-paper);
    display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.ak-card:hover .ak-card-icon { background: var(--ak-signal); color: var(--ak-ink); transform: none; }
.ak-card-icon svg { width: 20px; height: 20px; }
.ak-card-link {
    font-family: var(--ak-mono); font-size: 0.75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--ak-ink); text-decoration: none;
    border-bottom: 2px solid var(--ak-signal); padding-bottom: 2px;
}

/* ----- Kennzahlen ----- */
.ak-stats { display: grid; grid-template-columns: repeat(4, 1fr); border: 2px solid var(--ak-ink); background: none; box-shadow: none; border-radius: 0; }
.ak-stat { padding: 26px; border-right: 2px solid var(--ak-ink); background: none; text-align: left; }
.ak-stat:last-child { border-right: none; }
.ak-stat::after { display: none; }
.ak-stat-value {
    font-family: var(--ak-mono); font-size: 2.2rem; font-weight: 700;
    color: var(--ak-ink); letter-spacing: -0.03em;
    -webkit-text-fill-color: currentColor; background: none;
}
.ak-stat-label {
    font-size: 0.82rem; line-height: 1.45; color: var(--ak-warm); margin-top: 8px;
}

/* ----- Prozess-Schritte ----- */
.ak-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ak-step { border-top: 2px solid var(--ak-ink); padding-top: 20px; }
.ak-step-number {
    width: auto; height: auto; border-radius: 0; background: none; box-shadow: none;
    font-family: var(--ak-mono); font-size: 0.78rem; font-weight: 700;
    color: var(--ak-signal); letter-spacing: 0.08em; margin-bottom: 12px; display: block;
}
.ak-step h3 { font-size: 1.1rem; font-weight: 900; text-transform: uppercase; letter-spacing: -0.03em; margin: 0 0 10px; }
.ak-step p { font-size: 0.92rem; line-height: 1.6; color: var(--ak-warm); margin: 0; }

/* ----- Fragen (JS-Aufklapper der Unterseiten) ----- */
.ak-faq-list { border-top: 2px solid var(--ak-ink); }
.ak-faq-item { border-bottom: 2px solid var(--ak-ink); border-radius: 0; background: none; box-shadow: none; }
.ak-faq-q {
    width: 100%; text-align: left; background: none; border: none; cursor: pointer;
    padding: 24px 40px 24px 0; position: relative;
    font-family: var(--ak-sans); font-size: 1.05rem; font-weight: 900;
    text-transform: uppercase; letter-spacing: -0.02em; line-height: 1.2; color: var(--ak-ink);
}
.ak-faq-q::after {
    content: '+'; position: absolute; right: 0; top: 22px;
    font-family: var(--ak-mono); font-size: 1.4rem; font-weight: 400;
    transition: transform 0.18s ease, color 0.14s ease;
}
.ak-faq-item.active .ak-faq-q::after { transform: rotate(45deg); color: var(--ak-signal); }
.ak-faq-q:hover { color: var(--ak-signal); }
.ak-faq-a {
    max-height: 0; overflow: hidden; opacity: 0;
    font-size: 0.96rem; line-height: 1.65; color: var(--ak-warm);
    transition: max-height 0.28s ease, opacity 0.2s ease, padding 0.28s ease;
    padding: 0 40px 0 0; max-width: 72ch;
}
.ak-faq-item.active .ak-faq-a { max-height: 600px; opacity: 1; padding-bottom: 24px; }

/* ----- Abschlussband ----- */
.ak-cta-band {
    background: var(--ak-signal); color: var(--ak-ink);
    padding: 80px 0; margin-top: 88px; border-radius: 0;
}
.ak-cta-band::before { display: none; }
.ak-cta-band h2 {
    font-size: clamp(2rem, 4.2vw, 3.4rem); font-weight: 900; text-transform: uppercase;
    letter-spacing: -0.05em; line-height: 0.88; margin: 0 0 18px; color: var(--ak-ink);
}
.ak-cta-band p { font-size: 1.05rem; line-height: 1.6; color: var(--ak-ink); max-width: 56ch; margin: 0 auto; }
.ak-cta-btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 32px; }
.ak-text-center { text-align: center; }

/* ----- Ablaufprotokoll ----- */
.akr-run {
    background: var(--ak-ink); border: 2px solid var(--ak-ink); border-radius: 0;
    backdrop-filter: none; box-shadow: none; padding: 22px;
}
.akr-run-title { color: var(--ak-paper); font-family: var(--ak-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; }
.akr-run-time  { color: var(--ak-grey-light); font-family: var(--ak-mono); }
.akr-run-head, .akr-run-foot { border-color: rgba(255,255,255,0.18); }
.akr-step-mark { border-radius: 0; background: rgba(255,255,255,0.12); color: var(--ak-paper); }
.akr-step--flag .akr-step-mark { background: var(--ak-signal); color: var(--ak-ink); }
.akr-step-text { color: var(--ak-paper); font-size: 0.86rem; }
.akr-step-meta { color: var(--ak-grey-light); font-family: var(--ak-mono); font-size: 0.72rem; }
.akr-run-handoff { color: var(--ak-signal); font-weight: 800; text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.04em; }
.akr-run-saved   { color: var(--ak-grey-light); font-family: var(--ak-mono); font-size: 0.72rem; }

/* ----- Rechtstexte, Blog, Über uns ----- */
.akl-body, .aka-article-body { max-width: 780px; }
.akl-body h1, .aka-article-header h1 {
    font-weight: 900; text-transform: uppercase; letter-spacing: -0.04em; line-height: 0.9;
}
.akl-card, .akl-note, .aka-info-box, .aka-cta-box, .akl-toc, .aka-toc, .aun-origin, .aun-person, .aun-col {
    border-radius: 0 !important;
}
.aka-cat, .akl-status {
    border-radius: 0 !important; font-family: var(--ak-mono); font-size: 0.7rem;
    text-transform: uppercase; letter-spacing: 0.08em;
}
.aun-avatar { border-radius: 0 !important; background: var(--ak-ink) !important; }
.aka-author-avatar { border-radius: 0 !important; }
.aka-cta-btn, .akb-search { border-radius: 0 !important; }

@media (max-width: 980px) {
    .ak-cards-grid, .ak-cards-grid--4, .ak-cards-grid--2 { grid-template-columns: repeat(2, 1fr); }
    .ak-stats, .ak-steps { grid-template-columns: repeat(2, 1fr); }
    .ak-stat { border-bottom: 2px solid var(--ak-ink); }
    .ak-stat:nth-child(2n) { border-right: none; }
}
@media (max-width: 640px) {
    .ak-cards-grid, .ak-cards-grid--4, .ak-cards-grid--2,
    .ak-stats, .ak-steps { grid-template-columns: 1fr; }
    .ak-stat { border-right: none; }
    .ak-hero-btns .btn, .ak-cta-btns .btn { flex: 1 1 100%; }
}


/* Protokoll: Text in Archivo, Zahlen in Mono, saubere Spalten */
.akr-run-steps { list-style: none; margin: 0; padding: 0; }
.akr-step {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    gap: 12px;
    align-items: baseline;
    padding: 7px 0;
}
.akr-step-mark {
    width: 18px; height: 18px; display: grid; place-items: center;
    font-size: 0.7rem; font-weight: 800; align-self: center;
}
.akr-run-head {
    display: flex; align-items: center; gap: 10px;
    padding-bottom: 12px; margin-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.18);
}
.akr-run-dot { width: 7px; height: 7px; background: var(--ak-signal); border-radius: 0; flex-shrink: 0; }
.akr-run-time { margin-left: auto; font-size: 0.72rem; }
.akr-run-foot {
    display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
    margin-top: 12px; padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.18);
}
.akr-run-saved { margin-left: auto; }


/* ----- Nachzügler aus dem alten Aufbau ----- */

/* btn-ak-primary erbt bereits von .btn. Hier nur klarstellen */
.btn-ak-primary { background: var(--ak-ink); color: var(--ak-paper); border-color: var(--ak-ink); }
.ak-cta-band .btn-ak-primary,
.ak-section--dark .btn-ak-primary { background: var(--ak-ink); color: var(--ak-paper); border-color: var(--ak-ink); }
.ak-cta-band .btn-ak-primary:hover { background: var(--ak-paper); color: var(--ak-ink); border-color: var(--ak-paper); }

.ak-cta-band-btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; }

/* Quellenangaben unter Blogbeiträgen */
.ak-sources { margin-top: 48px; padding-top: 26px; border-top: 2px solid var(--ak-ink); }
.ak-sources-title {
    font-family: var(--ak-mono); font-size: 0.72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.12em; color: var(--ak-grey); margin: 0 0 14px;
}
.ak-sources-list { list-style: none; margin: 0; padding: 0; }
.ak-sources-list li { margin-bottom: 9px; font-size: 0.9rem; }
.ak-sources-list a { color: var(--ak-ink); text-decoration: underline; text-underline-offset: 3px; }
.ak-sources-list a:hover { color: var(--ak-signal); }

/* Cookie-Option: Abstand zwischen den beiden Blöcken */
.ak-cookie-option + .ak-cookie-option { padding-top: 14px; border-top: 1px solid var(--ak-line-soft); }

/* Protokollzeilen laufen gestaffelt ein */
.akr-step--1 { animation-delay: 0.05s; }
.akr-step--2 { animation-delay: 0.15s; }
.akr-step--3 { animation-delay: 0.25s; }
.akr-step--4 { animation-delay: 0.35s; }


/* =========================================================
   17. MAGAZIN
   Blog-Index und Artikel tragen eigene Inline-Stile aus dem
   alten Aufbau. Diese Regeln stehen am Dateiende und ziehen
   sie in das neue System, runde Ecken, weiche Schatten und
   Farbverläufe fallen weg.
   ========================================================= */

/* ----- Kopfbereich ----- */
.akb-hero {
    background: var(--ak-paper-2) !important;
    border-bottom: 2px solid var(--ak-ink);
    text-align: left !important;
    padding: 56px 0 !important;
}
.akb-hero h1 {
    font-size: clamp(2.4rem, 6vw, 4.6rem) !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.05em !important;
    line-height: 0.86 !important;
    text-align: left !important;
    max-width: 20ch;
}
.akb-hero p {
    text-align: left !important;
    margin-left: 0 !important;
    color: var(--ak-warm) !important;
    max-width: 56ch;
}
.akb-eyebrow {
    display: inline-block !important;
    background: var(--ak-signal) !important;
    color: var(--ak-ink) !important;
    border-radius: 0 !important;
    font-family: var(--ak-mono) !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.1em !important;
    padding: 6px 10px !important;
}

/* ----- Suche und Filter ----- */
.akb-search-input, .akb-search-wrap, .akb-search-inner {
    border-radius: 0 !important;
    box-shadow: none !important;
}
.akb-search-input {
    border: 2px solid var(--ak-ink) !important;
    font-family: var(--ak-sans) !important;
    min-height: 52px;
}
.akb-filter { justify-content: flex-start !important; }
.akb-filter-btn {
    border-radius: 0 !important;
    border: 2px solid var(--ak-ink) !important;
    background: var(--ak-paper) !important;
    color: var(--ak-ink) !important;
    font-family: var(--ak-mono) !important;
    font-size: 0.72rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    min-height: 44px;
    padding: 0 16px !important;
}
.akb-filter-btn.active,
.akb-filter-btn[aria-pressed="true"] {
    background: var(--ak-ink) !important;
    color: var(--ak-paper) !important;
}

/* ----- Beitragsliste ----- */
.akb-grid { gap: 20px !important; }
.akb-card {
    border-radius: 0 !important;
    border: 2px solid var(--ak-ink) !important;
    box-shadow: none !important;
    background: var(--ak-paper) !important;
    transition: background 0.14s ease !important;
}
.akb-card:hover { transform: none !important; box-shadow: none !important; background: var(--ak-paper-2) !important; }
.akb-card-title {
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.03em !important;
    line-height: 1.05 !important;
}
.akb-card-excerpt { color: var(--ak-warm) !important; }
.akb-card-meta, .akb-card-link {
    font-family: var(--ak-mono) !important;
    font-size: 0.72rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
}
.akb-card-link { border-bottom: 2px solid var(--ak-signal); padding-bottom: 2px; }

/* Kategorien: Farbe bleibt als Kennung, Form wird eckig */
.akb-cat, .aka-cat {
    border-radius: 0 !important;
    font-family: var(--ak-mono) !important;
    font-size: 0.68rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    padding: 5px 9px !important;
}

/* ----- Artikel ----- */
.aka-article-header {
    background: var(--ak-paper-2) !important;
    border-bottom: 2px solid var(--ak-ink);
}
.aka-article-header h1 {
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.045em !important;
    line-height: 0.9 !important;
}
.aka-meta {
    font-family: var(--ak-mono) !important;
    font-size: 0.72rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
}
.aka-lead { color: var(--ak-warm) !important; }
.aka-article-body h2 {
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.035em !important;
    line-height: 1 !important;
    margin-top: 2.4em !important;
}
.aka-article-body h3 { font-weight: 800 !important; letter-spacing: -0.02em !important; }
.aka-toc, .aka-info-box, .aka-warn-box, .aka-cta-box, .aka-author-box, .aka-related, .aka-checklist {
    border-radius: 0 !important;
    box-shadow: none !important;
}
.aka-toc { background: var(--ak-paper-2) !important; border: 2px solid var(--ak-ink) !important; }
.aka-info-box { background: var(--ak-paper-2) !important; border-left: 4px solid var(--ak-blue) !important; }
.aka-warn-box { border-left: 4px solid var(--ak-signal) !important; }
.aka-cta-box, .aka-cta-box-inner {
    background: var(--ak-ink) !important;
    color: var(--ak-paper) !important;
    border: none !important;
}
.aka-cta-btn {
    border-radius: 0 !important;
    background: var(--ak-signal) !important;
    color: var(--ak-ink) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    min-height: 52px;
    display: inline-flex; align-items: center;
}
.aka-author-box { background: var(--ak-paper-2) !important; border: 2px solid var(--ak-ink) !important; }
.aka-author-avatar { border-radius: 0 !important; background: var(--ak-ink) !important; color: var(--ak-paper) !important; }
.aka-author-name { font-weight: 900 !important; text-transform: uppercase !important; letter-spacing: -0.02em !important; }
.aka-related a { border-radius: 0 !important; }

/* Suchfeld: nur der aeussere Rahmen bleibt, links ausgerichtet */
.akb-search-wrap { max-width: 520px !important; margin-left: 0 !important; }
.akb-search-inner { border: 2px solid var(--ak-ink) !important; background: var(--ak-paper) !important; }
.akb-search-input { border: none !important; background: transparent !important; }
.akb-search-input:focus { outline: none !important; }
.akb-search-inner:focus-within { outline: 3px solid var(--ak-blue); outline-offset: 2px; }


/* ===== 18. SCHMALE BILDSCHIRME =====
   Die Versal-Typografie ist auf 375px zu breit: einzelne Wörter
   wie "AUTOMATISIEREN" sind länger als der Viewport. Deshalb hier
   kleinere Mindestgrößen und ein Umbruch innerhalb langer Wörter. */

@media (max-width: 640px) {
    .ak-h1 { font-size: clamp(1.9rem, 9.5vw, 3rem); }
    .ak-h2,
    .ak-section-title,
    .ak-cta-band h2 { font-size: clamp(1.6rem, 7.5vw, 2.4rem); }
    .ak-hero h1,
    .akb-hero h1,
    .aka-article-header h1 { font-size: clamp(1.8rem, 8.5vw, 2.8rem) !important; }

    .ak-h1, .ak-h2, .ak-h3,
    .ak-hero h1, .ak-section-title, .akb-hero h1, .aka-article-header h1 {
        overflow-wrap: break-word;
        hyphens: auto;
    }

    /* Etiketten nebeneinander, Meta-Zeile darunter */
    .ak-rule { flex-wrap: wrap; gap: 14px; }
    .ak-rule::before { flex-basis: 100%; order: 2; }
    .ak-tags { order: 1; }
    .ak-rule .ak-meta { order: 3; flex-basis: 100%; }

    .ak-grid--3, .ak-grid--2 { grid-template-columns: 1fr !important; }
}

@media (max-width: 380px) {
    .ak-h1 { font-size: 1.75rem; }
}


/* =========================================================
   19. READINESS-CHECK (Prefix: krc-)
   Die Seite bringt eigene Inline-Stile aus dem alten Aufbau mit.
   Diese Regeln stehen am Dateiende und ziehen sie ins System.
   ========================================================= */

.krc-hero {
    background: var(--ak-paper-2) !important;
    border-bottom: 2px solid var(--ak-ink);
    text-align: left !important;
    padding: 56px 0 !important;
}
.krc-hero h1 {
    font-size: clamp(2.2rem, 5.5vw, 4.2rem) !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.05em !important;
    line-height: 0.88 !important;
    text-align: left !important;
    max-width: 18ch;
    margin: 0 0 18px !important;
}
.krc-hero p { text-align: left !important; margin-left: 0 !important; max-width: 56ch; color: var(--ak-warm) !important; }

.krc-meta { justify-content: flex-start !important; gap: 20px !important; }
.krc-meta-item {
    font-family: var(--ak-mono) !important;
    font-size: 0.72rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--ak-warm) !important;
}

/* Fragenkarte: harte Kante statt Schatten */
.krc-wrap, .krc-result {
    border-radius: 0 !important;
    box-shadow: none !important;
    border: 2px solid var(--ak-ink) !important;
    background: var(--ak-paper) !important;
}
.krc-progress-wrap, .krc-progress {
    border-radius: 0 !important;
    background: var(--ak-paper-2) !important;
    height: 6px !important;
}
.krc-progress-bar { border-radius: 0 !important; background: var(--ak-signal) !important; }
.krc-progress-label {
    font-family: var(--ak-mono) !important;
    font-size: 0.72rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--ak-grey) !important;
}

.krc-q-num {
    /* Signalrot als Textfarbe kommt auf Weiss nur auf 3,31:1 und widerspricht
       der Regel, Rot als Flaeche statt als Farbtupfer zu setzen. Wie die
       uebrigen Positionsnummern im Grau des Systems. */
    font-family: var(--ak-mono) !important;
    font-size: 0.72rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: var(--ak-grey) !important;
}
.krc-q-text {
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.025em !important;
    line-height: 1.1 !important;
    font-size: clamp(1.15rem, 2vw, 1.5rem) !important;
}

/* Antwortmöglichkeiten */
.krc-option {
    border-radius: 0 !important;
    border: 2px solid var(--ak-line-soft) !important;
    background: var(--ak-paper) !important;
    transition: border-color 0.14s ease, background 0.14s ease !important;
}
.krc-option:hover { border-color: var(--ak-ink) !important; background: var(--ak-paper-2) !important; }
.krc-option.selected, .krc-option[aria-checked="true"] {
    border-color: var(--ak-ink) !important;
    background: var(--ak-ink) !important;
    color: var(--ak-paper) !important;
}
.krc-opt-letter {
    border-radius: 0 !important;
    background: var(--ak-paper-2) !important;
    color: var(--ak-ink) !important;
    font-family: var(--ak-mono) !important;
    font-weight: 700 !important;
}
.krc-option.selected .krc-opt-letter { background: var(--ak-signal) !important; color: var(--ak-ink) !important; }

/* Schaltflächen */
.krc-btn-next, .krc-btn-back, .krc-btn-print, .krc-btn-restart {
    border-radius: 0 !important;
    font-family: var(--ak-sans) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    min-height: 48px;
    border: 2px solid var(--ak-ink) !important;
}
.krc-btn-next {
    background: var(--ak-ink) !important;
    color: var(--ak-paper) !important;
}
.krc-btn-next:hover { background: var(--ak-signal) !important; border-color: var(--ak-signal) !important; color: var(--ak-ink) !important; }
.krc-btn-back, .krc-btn-print, .krc-btn-restart {
    background: transparent !important;
    color: var(--ak-ink) !important;
}
.krc-btn-back:hover, .krc-btn-print:hover, .krc-btn-restart:hover {
    background: var(--ak-ink) !important;
    color: var(--ak-paper) !important;
}

/* Ergebnis */
.krc-result-score {
    font-family: var(--ak-mono) !important;
    font-weight: 700 !important;
    color: var(--ak-ink) !important;
    letter-spacing: -0.03em !important;
}
.krc-result-max { font-family: var(--ak-mono) !important; color: var(--ak-grey) !important; }
.krc-result-level, .krc-result-title {
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.03em !important;
}
.krc-result-desc { color: var(--ak-warm) !important; }
.krc-recs-title {
    font-family: var(--ak-mono) !important;
    font-size: 0.72rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: var(--ak-grey) !important;
}
.krc-rec-item {
    border-radius: 0 !important;
    border: none !important;
    border-top: 2px solid var(--ak-ink) !important;
    background: transparent !important;
}
.krc-rec-num {
    border-radius: 0 !important;
    background: var(--ak-signal) !important;
    color: var(--ak-ink) !important;
    font-family: var(--ak-mono) !important;
    font-weight: 700 !important;
}


/* ===== 20. KOSTENRECHNER =====
   Macht den Aufwand in Euro sichtbar, bevor der Preis fällt. */

.ak-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: rgba(255,255,255,0.24);
    outline: none;
    cursor: pointer;
}
.ak-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 26px;
    height: 26px;
    background: var(--ak-signal);
    border: 2px solid var(--ak-ink);
    cursor: grab;
}
.ak-range::-moz-range-thumb {
    width: 26px;
    height: 26px;
    background: var(--ak-signal);
    border: 2px solid var(--ak-ink);
    border-radius: 0;
    cursor: grab;
}
.ak-range::-webkit-slider-thumb { transition: transform 0.2s var(--ak-e-pop); }
.ak-range:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.2) rotate(45deg); }

/* Stundenbalken im roten Kasten, Breite setzt script.js */
.ak-calc-bar { height: 10px; margin-top: 4px; background: rgba(10,10,10,0.18); }
.ak-calc-bar-fill { height: 10px; width: 11%; background: var(--ak-ink); transition: width 0.5s var(--ak-e-snap); }
.ak-range:focus-visible { outline: 3px solid var(--ak-signal); outline-offset: 4px; }


/* Autorenbild: die globale img-Regel (max-width/height:auto) und der
   Flex-Container wuerden es sonst zusammenschrumpfen. */
.aka-author-photo {
    flex: 0 0 56px;
    width: 56px !important;
    height: 56px !important;
    object-fit: cover;
    display: block;
}
.aka-author-inner picture { flex: 0 0 56px; display: block; }

/* ===== 19. SCHMALE BILDSCHIRME: LANGE WOERTER =====
   Deutsche Komposita wie "Datenschutzerklaerung" oder "Auftrags-
   verarbeitungsvertrag" passen bei 320px in keine Zeile und schieben
   die ganze Seite auf. Trennung erst dort, wo es noetig wird. */
@media (max-width: 700px) {
    h1, h2, h3, .ak-h1, .ak-h2, .ak-h3,
    .akl-body h1, .akl-body h2, .akl-body h3,
    .aka-article-body h1, .aka-article-body h2, .aka-article-body h3,
    .akb-card h2, .akb-card h3, .krc-hero h1, .ak-section-title {
        overflow-wrap: break-word;
        hyphens: auto;
    }
    /* Tabellen in Rechtstexten und Beitraegen scrollen im eigenen Rahmen */
    .akl-table, .aka-table { display: block; overflow-x: auto; white-space: normal; }
    .akl-table thead, .aka-table thead { display: table-header-group; }
}

/* Band der Markenfamilie auf schmalen Bildschirmen. Es muss einzeilig
   bleiben, sonst stimmt --ak-topband-h nicht mehr und der Kopf haengt zu tief.
   Also: kurzer Satz statt langem, und die Taglines fallen weg.

   1100px ist gemessen, nicht geschaetzt: Langer Satz plus beide Taglines
   brauchen 1085px Innenbreite. Der Umschaltpunkt lag zuerst bei 860px, und
   zwischen 861 und 1099 schnitt overflow: hidden den Inhalt stillschweigend
   ab. Wer den Text aendert, misst nach. */
@media (max-width: 1100px) {
    .ak-topband-lang { display: none; }
    .ak-topband-kurz { display: inline; }
    .ak-topband-tag  { display: none; }
    .ak-topband-inner { gap: 10px; }
}
@media (max-width: 560px) {
    :root { --ak-topband-h: 36px; }
    .ak-topband-txt { display: none; }   /* nur noch die beiden Marken */
    .ak-topband-inner { gap: 8px; padding: 0 16px; }
    .ak-topband-marke { font-size: 0.72rem; padding: 3px 8px; }
}

/* Gedruckt hat ein Verweis auf eine andere Seite keinen Nutzen. */
@media print {
    .ak-topband { display: none; }
    .ak-nav { position: static; top: auto; }
}