/* design-base.css — Designsystem Handoff v1, Basisschicht (Block 1).
   ==================================================================
   Setzt voraus: design-tokens.css (Block 0). Diese Datei liest nur
   --ak-*-Variablen und definiert keine eigenen Farbwerte.

   INHALT
     @font-face fuer Outfit und Plus Jakarta Sans, selbst gehostet
     Reset und Grundlagen
     Typografie-Rollen als Klassen
     Fokusdarstellung
     Bedienziele
     Responsive Grid-Grundlage
     Bewegungsreduktion

   NICHT ENTHALTEN: Bauteile (Knoepfe, Karten, Chips). Die kommen in
   Block 2, damit jeder Block fuer sich pruefbar bleibt.

   WIRD DIESE DATEI SCHON EINGEBUNDEN?
   Nein. Wie Block 0 ist auch Block 1 noch von keinem Template geladen.
   Eine halb umgestellte Seite waere Patchwork; eingebunden wird erst,
   wenn die erste Flaeche vollstaendig neu gebaut ist. Ein Test erzwingt
   das. */


/* ── Schriften ────────────────────────────────────────────────────────
   Selbst gehostet, kein CDN zur Laufzeit. Quelle, Lizenz und die
   Begruendung fuer Variable statt statisch stehen in
   public/assets/fonts/<familie>/SOURCE.md.

   WARUM ZWEI DATEIEN JE FAMILIE UND NICHT EINE:
   Tuerkisch verteilt sich ueber beide Subsets. `ı` (U+0131) und ö/ü/ç
   liegen in `latin`, aber `İ` (U+0130), `ş` (U+015F) und `ğ` (U+011F)
   liegen in `latin-ext`. Wer nur `latin` einbindet, bekommt bei jedem
   tuerkischen Text einen Schriftwechsel mitten im Wort. Die
   unicode-range-Angaben sorgen dafuer, dass der Browser latin-ext nur
   laedt, wenn er es braucht.

   font-weight: 100 900 bzw. 200 800 gibt die ECHTE Achsenspanne der
   Datei an — nicht die benutzten Gewichte. Eine zu enge Angabe liesse
   den Browser ausserhalb der Spanne synthetisch faelschen. */

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/outfit/Outfit-latinext.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: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/outfit/Outfit-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: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/assets/fonts/plus-jakarta-sans/PlusJakartaSans-var-latinext.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: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/assets/fonts/plus-jakarta-sans/PlusJakartaSans-var-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;
}


/* ── Grundlagen ─────────────────────────────────────────────────────── */

.ak {
  background: var(--ak-bg);
  color: var(--ak-ink);
  font-family: var(--ak-font-body);
  font-size: var(--ak-fs-body);
  line-height: var(--ak-lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Der Geltungsbereich ist bewusst eine Klasse und nicht `body`. Solange
   alte und neue Oberflaeche nebeneinander existieren, darf die neue
   Basisschicht keine Seite anfassen, die noch nicht umgestellt ist. */
.ak *,
.ak *::before,
.ak *::after { box-sizing: border-box; }

.ak img,
.ak svg,
.ak video { max-width: 100%; height: auto; }

/* Lange, ungetrennte Zeichenketten — E-Mail-Adressen, URLs, deutsche
   Komposita wie „Krankenversicherungskarte" — sind auf 360 px breiter
   als ihre Spalte. Ohne Umbruchregel schieben sie das ganze Layout
   seitlich weg statt selbst umzubrechen.
   Bewusst `break-word` und NICHT `anywhere`: `anywhere` zaehlt beim
   min-content-Wert mit und kann dadurch Flex- und Rasterspalten anders
   berechnen lassen — also das Bild veraendern. `break-word` greift
   ausschliesslich dann, wenn eine Zeile sonst ueberliefe; alles andere
   bleibt Zeichen fuer Zeichen wie vorher.
   `:where()` aus demselben Grund wie beim Formularreset weiter unten:
   `.ak p` haette die Spezifitaet (0,1,1) und wuerde damit die
   Bauteilklassen (0,1,0) schlagen, die an einzelnen Stellen bewusst das
   schaerfere `anywhere` setzen (.step-de, .cp-lemma, .path-sub). Diese
   Grundregel darf nur dort greifen, wo NICHTS anderes etwas sagt. */
:where(.ak) :where(p, li, dd, td, h1, h2, h3, h4) { overflow-wrap: break-word; }

/* `touch-action: manipulation` schaltet die 300-ms-Wartezeit auf den
   Doppeltipp-Zoom fuer Bedienelemente ab. Ohne sie fuehlt sich jeder
   Tipp auf iOS traege an, und ein schneller Doppeltipp auf einen Knopf
   zoomt die Seite, statt zweimal auszuloesen. Pinch-Zoom bleibt
   vollstaendig erhalten — nur der Doppeltipp auf DIESE Elemente nicht. */
:where(.ak) :where(button, [role="button"], a, label, summary,
                   input, select, textarea) { touch-action: manipulation; }

/* :where() aus demselben Grund wie beim Formularreset darunter.
   GEMESSEN IM BROWSER: `.ak a { color: var(--ak-accent) }` hat die
   Spezifität (0,1,1) und schlug damit jede Bauteilklasse (0,1,0). Jeder
   als <a> gebaute Knopf bekam lila Text statt der Farbe seiner Variante
   — auf dem dunklen Primärknopf ergab das 3.65 : 1 statt 17.57 : 1 und
   verfehlte AA deutlich. Im CSS sah alles richtig aus.

   Es ist dieselbe Ursache wie in Block 2, nur an einer anderen Stelle:
   ein Elementselektor innerhalb einer Klasse schlägt eine reine
   Klassenregel. Deshalb hier ebenfalls spezifitätsfrei. */
:where(.ak) :where(a) { color: var(--ak-accent); text-decoration: none; }
:where(.ak) :where(a):hover { color: var(--ak-accent-deep); }

/* :where() statt eines direkten Elementselektors — und das ist kein Stil,
   sondern eine Fehlerbehebung.

   GEMESSEN IM BROWSER: `.ak button { font: inherit }` hat die Spezifität
   (0,1,1) und schlug damit `.ak-btn` (0,1,0). Die Folge war, dass die
   Kurzform `font:` Groesse UND Gewicht der Bauteile ueberschrieb:
   Knoepfe wurden mit 15px/400 statt 15.5px/600 gerendert, Eingabefelder
   mit 15px statt 16px — womit auch der Schutz gegen das Hineinzoomen auf
   iOS still ausgehebelt war. Im CSS sah alles richtig aus; nur das
   Ergebnis war falsch.

   :where(.ak) :where(button, …) traegt die Spezifitaet (0,0,0). Damit
   gewinnt jede Bauteilklasse, ohne dass irgendwo !important noetig
   waere. Der Zweck der Regel — Browservorgaben abraeumen — bleibt. */
:where(.ak) :where(button, input, select, textarea) { font: inherit; color: inherit; }

:where(.ak) :where(button) { cursor: pointer; border: none; background: none; }


/* ── Typografie-Rollen ────────────────────────────────────────────────
   Eine Klasse je Rolle aus der Handoff-Tabelle. Groesse, Gewicht,
   Zeilenhoehe und Laufweite gehoeren zusammen und werden deshalb
   zusammen gesetzt — nicht als drei getrennte Hilfsklassen. */

.ak-hero {
  font-family: var(--ak-font-display);
  font-size: var(--ak-fs-hero); font-weight: 700;
  line-height: var(--ak-lh-hero); letter-spacing: var(--ak-ls-hero);
  text-wrap: balance;
}
.ak-h1 {
  font-family: var(--ak-font-display);
  font-size: var(--ak-fs-h1); font-weight: 700;
  line-height: var(--ak-lh-h1); letter-spacing: var(--ak-ls-h1);
  text-wrap: balance;
}
.ak-h2 {
  font-family: var(--ak-font-display);
  font-size: var(--ak-fs-h2); font-weight: 700;
  line-height: var(--ak-lh-h2); letter-spacing: var(--ak-ls-h2);
  text-wrap: balance;
}
.ak-h3 {
  font-family: var(--ak-font-body);
  font-size: var(--ak-fs-h3); font-weight: 700;
  line-height: var(--ak-lh-h3);
}
.ak-body-lg { font-size: var(--ak-fs-body-lg); line-height: var(--ak-lh-body); }
.ak-body    { font-size: var(--ak-fs-body);    line-height: var(--ak-lh-body); }
.ak-body-sm { font-size: var(--ak-fs-body-sm); line-height: var(--ak-lh-sm); }
.ak-meta {
  font-size: var(--ak-fs-meta); font-weight: 600;
  line-height: var(--ak-lh-meta); color: var(--ak-ink-2);
}
.ak-eyebrow {
  font-size: var(--ak-fs-eyebrow); font-weight: 700;
  letter-spacing: var(--ak-ls-eyebrow); text-transform: uppercase;
}
.ak-micro {
  font-size: var(--ak-fs-micro); font-weight: 700;
  letter-spacing: var(--ak-ls-micro); text-transform: uppercase;
}

/* Deutsches Beispiel — IMMER Outfit. Das ist der didaktische Kern der
   Schriftzweiteilung: der Lernende erkennt an der Schrift, welche Sprache
   er vor sich hat. `lang="de"` gehoert zusaetzlich ins Markup, damit
   Vorleseprogramme richtig sprechen. */
.ak-de {
  font-family: var(--ak-font-de);
  font-size: var(--ak-fs-de); font-weight: 600;
  line-height: var(--ak-lh-de);
}
/* Deutsch INNERHALB eines Bauteils — Optionsreihe, Knopf, Listenzeile.
   Familie und Gewicht wechseln, die Groesse kommt vom Bauteil. Ohne
   diesen Zusatz haette jede Option 18px statt ihrer eigenen 16px und
   das Raster spraenge.
   Der Zusatz ist NICHT optional: Ohne ihn steht deutscher Text in der
   tuerkischen Familie, und genau das soll die Zweiteilung verhindern.
   Gemessen vor der Korrektur: alle 10 mit lang="de" ausgezeichneten
   Stellen der Galerie rendelten in Plus Jakarta Sans. */
.ak-de--inline {
  font-family: var(--ak-font-de);
  font-weight: 600;
  font-size: inherit;
  line-height: inherit;
}
/* Tuerkische Erklaerung — immer Plus Jakarta Sans. */
.ak-tr { font-family: var(--ak-font-tr); }

.ak-ipa {
  font-family: var(--ak-font-tr);
  font-size: var(--ak-fs-ipa); font-style: italic;
  color: var(--ak-ink-2);
}

/* Langtext auf 62–70 Zeichen begrenzen. */
.ak-measure { max-width: var(--ak-measure); }

/* Zahlenkolonnen buendig. */
.ak-nums { font-variant-numeric: tabular-nums; }


/* ── Fokus ────────────────────────────────────────────────────────────
   Sichtbarer Fokusring auf JEDEM bedienbaren Element. Das ist eine
   Barrierefreiheitsanforderung des Handoffs, keine Verzierung.

   :focus-visible statt :focus — der Ring erscheint bei Tastatur- und
   Hilfsmittelbedienung, nicht bei jedem Mausklick. Der zusaetzliche
   :focus-Block darunter faengt Browser ab, die :focus-visible nicht
   kennen; ohne ihn haetten sie GAR KEINEN sichtbaren Fokus, und das
   waere schlechter als ein Ring zu viel. */
.ak :focus-visible {
  outline: 2px solid var(--ak-focus-border);
  outline-offset: 2px;
  box-shadow: var(--ak-focus-ring);
  border-radius: var(--ak-r-btn);
}
@supports not selector(:focus-visible) {
  .ak :focus {
    outline: 2px solid var(--ak-focus-border);
    outline-offset: 2px;
    box-shadow: var(--ak-focus-ring);
  }
}

/* AUSNAHME, und es ist die einzige: Ankuendigungsanker.
   Ein Element mit tabindex="-1" steht NICHT in der Tabulatorreihenfolge.
   Es bekommt den Fokus ausschliesslich, weil JavaScript ihn hinsetzt —
   damit ein Screenreader eine neue Ueberschrift oder einen geoeffneten
   Dialog ansagt. Es ist kein Bedienelement.

   Ohne diese Regel passiert Folgendes: ruft JS `.focus()`, bevor die
   Maus ueberhaupt im Spiel war (Seitenaufbau, Dialog), dann wertet der
   Browser das als Tastaturfokus und zeichnet den Ring. Der Lernende
   sieht einen dicken Rahmen um eine Ueberschrift, die er nie beruehrt
   hat — gemeldet am 04.08.2026 fuer den Cookie-Hinweis, und es traf
   jede Stelle mit demselben Muster.

   Die Ansage macht der Fokus, nicht der Rahmen. Barrierefreiheit
   verliert hier nichts: was man bedienen kann, behaelt seinen Ring. */
.ak [tabindex="-1"]:focus,
.ak [tabindex="-1"]:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Sprungmarke fuer Tastaturnutzer. */
.ak-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: var(--ak-sp-3) var(--ak-sp-4);
  background: var(--ak-ink); color: var(--ak-ink-inverse);
  border-radius: var(--ak-r-btn);
}
.ak-skip:focus { left: var(--ak-sp-3); top: var(--ak-sp-3); }

/* Nur fuer Vorleseprogramme. */
.ak-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}


/* ── [hidden] gewinnt ─────────────────────────────────────────────────
   DAS EINZIGE !important IM DESIGNSYSTEM, und es ist begruendet.

   Die App und die Kassenflaeche verbergen ganze Bereiche ueber das
   hidden-Attribut aus JavaScript — Wartebild, Erfolgsbild, Tarifauswahl,
   Mitgliedschaft, Zurueckwege. Das Attribut wirkt nur, solange keine
   Regel `display` setzt. Genau das tun Bauteilregeln aber
   (`.prem-pending { display: grid }`), und bei gleicher Spezifitaet
   gewinnt die spaeter geladene.

   GEMESSEN am 30.07.2026 auf /app/premium: einem NICHT eingeloggten
   Besucher standen gleichzeitig „Ödemen alındı, üyeliğin
   etkinleştiriliyor…" und „Tebrikler, artık Premium üyesin!" auf dem
   Schirm — beide Bloecke trugen hidden, beide waren sichtbar, weil das
   neue Stylesheet ihnen display: grid gab. Eine Seite, die einem Gast
   erklaert, er sei zahlender Premiumkunde.

   Jede Alternative verlaesst sich auf Ladereihenfolge oder darauf, dass
   jede kuenftige Regel `:not([hidden])` mitschreibt. Beides vergisst man.
   Diese eine Zeile kann man nicht vergessen. */
[hidden] { display: none !important; }


/* ── Bedienziele ──────────────────────────────────────────────────────
   Mindestens 44px auf Tablet und Telefon. Bewusst NUR dort: auf dem
   Desktop mit Maus waeren 44px hohe Textlinks unnoetig gross. */
@media (max-width: 1099px) {
  /* .ak-btn ist hier ausdrücklich mit aufgeführt. Der erste Entwurf
     verlangte für Links eine eigene Klasse .ak-touch — die trug in der
     Praxis kein einziger Link-Knopf. Gemessen im Browser: der
     Kopfbereichs-CTA und die Knöpfe des Einwilligungsbanners blieben auf
     allen 19 Routen bei 36 px statt 44 px. Eine Regel, die eine
     Zusatzklasse braucht, wird vergessen; deshalb greift sie jetzt am
     Bauteil selbst.

     Dass kompakte Knöpfe dadurch auf Tablet und Telefon höher werden als
     am Schreibtisch, ist Absicht: 44 px ist dort die Anforderung, nicht
     eine Empfehlung. */
  .ak .ak-btn,
  .ak button,
  .ak [role="button"],
  .ak a.ak-touch {
    min-height: var(--ak-touch-min);
    min-width: var(--ak-touch-min);
  }

  /* Kaestchen und Radios sind hier NICHT mehr dabei. Gemessen auf 390 px:
     die Regel machte aus einem 20x20-Kaestchen ein 44x44-Quadrat, das
     neben zweizeiligem Text stand und aussah wie ein leeres Eingabefeld.
     Das Bedienziel ist nicht das Kaestchen, sondern die ganze
     Beschriftungszeile — ein Klick darauf schaltet es ohnehin. Also
     bekommt die ZEILE die 44 px und das Kaestchen eine bequeme, aber
     erkennbare Groesse. */
  .ak input[type="checkbox"],
  .ak input[type="radio"] { min-height: 24px; min-width: 24px; }

  .ak label:has(> input[type="checkbox"]),
  .ak label:has(> input[type="radio"]),
  .ak .ak-check { min-height: var(--ak-touch-min); }
}


/* ── Layout-Grundlagen ────────────────────────────────────────────────
   DIE REGEL, DIE DER HANDOFF AUSDRUECKLICH BEGRUENDET:
   Jedes Raster nutzt minmax(min(Npx, 100%), 1fr). Das min(…, 100%) ist
   noetig — ein blankes minmax(300px, 1fr) laeuft auf einem 430px breiten
   Telefon ueber und schiebt Inhalt ueber den rechten Rand hinaus. */
.ak-grid   { display: grid; gap: var(--ak-sp-4); }
.ak-grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.ak-grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.ak-grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }

/* Auf dem Telefon immer eine Spalte, auf dem Tablet hoechstens zwei —
   drei echte Layouts, kein skaliertes. */
@media (max-width: 1099px) { .ak-grid-3, .ak-grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); } }
@media (max-width: 767px)  { .ak-grid-2, .ak-grid-3, .ak-grid-4 { grid-template-columns: 1fr; } }

.ak-page {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--ak-gutter);
}
.ak-section + .ak-section { margin-top: var(--ak-section-gap); }

/* Breiter Inhalt scrollt in seinem EIGENEN Behaelter. Die Seite selbst
   darf nie seitwaerts scrollen. */
.ak-scroll-x { overflow-x: auto; max-width: 100%; }

/* Segmentierte Schalter fuellen auf dem Telefon die Zeile zu gleichen
   Teilen — Vorgabe des Handoffs. */
.ak-segmented { display: flex; gap: var(--ak-sp-2); }
@media (max-width: 767px) { .ak-segmented > * { flex: 1 1 0; min-width: 0; } }


/* ── Bewegung ─────────────────────────────────────────────────────────
   Die Keyframes stehen in design-tokens.css. Hier nur die Anwendung.
   Wer Bewegung reduziert haben will, bekommt keine — vollstaendig, nicht
   nur langsamer. */
.ak-anim-pop   { animation: akPop  .45s var(--ak-ease) both; }
.ak-anim-rise  { animation: akRise .25s var(--ak-ease) both; }
.ak-anim-float { animation: akFloat 6.5s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .ak *,
  .ak *::before,
  .ak *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Dunkle Flaechen ──────────────────────────────────────────────────
   PORTIERT AUS DER SSOT (M2, 01.08.2026)
   design_handoff_v2.1.2/almanca-kumbaram.css, Abschnitt 7, Block „N2/A8".
   Uebernommen sind ausschliesslich die FARBREGELN des Kontexts. Die
   Bauteile selbst (.ak-card--dark, .ak-btn--on-dark, .ak-icon-chip …)
   kommen mit M3; sie hier vorzuziehen waere eine Bauteilmigration.

   WARUM DAS HIERHER GEHOERT UND NICHT IN EINE SEITE
   Eine Ueberschrift auf dunklem Grund ist keine Eigenschaft der
   Startseite, sondern der Flaeche, auf der sie liegt. Genau daran ist
   die SSOT selbst in v2.1 gescheitert (Blocker N2): Ueberschriften
   waren auf Tinte festgenagelt und wurden auf dunklen Karten
   unsichtbar. Unser Bestand hatte denselben Fehler — gemessen 1,00:1
   auf der Demokarte der Startseite.

   Wer eine dunkle Flaeche baut, setzt .ak-on-dark darauf (oder benutzt
   .ak-card--dark / .ak-card--on-dark / .ak-sidebar--dark, die es selbst
   mitbringen). Alles darin loest dann auf die on-dark-Tokens auf. Keine
   Inline-Farbe im Markup, keine Sonderregel je Seite. */

.ak-on-dark,
.ak-card--dark,
.ak-card--on-dark,
.ak-sidebar--dark,
.ak-toast { color: var(--ak-on-dark); }

.ak-on-dark .ak-h1, .ak-on-dark .ak-h2, .ak-on-dark .ak-h3, .ak-on-dark .ak-display,
.ak-card--dark .ak-h1, .ak-card--dark .ak-h2, .ak-card--dark .ak-h3, .ak-card--dark .ak-display,
.ak-card--on-dark .ak-h1, .ak-card--on-dark .ak-h2, .ak-card--on-dark .ak-h3,
.ak-sidebar--dark .ak-h1, .ak-sidebar--dark .ak-h2, .ak-sidebar--dark .ak-h3,
.ak-toast .ak-h3 { color: var(--ak-on-dark); }

.ak-on-dark .ak-body, .ak-on-dark .ak-lead, .ak-on-dark .ak-body-sm, .ak-on-dark .ak-tr,
.ak-card--dark .ak-body, .ak-card--dark .ak-lead, .ak-card--dark .ak-body-sm, .ak-card--dark .ak-tr,
.ak-card--on-dark .ak-body, .ak-card--on-dark .ak-body-sm,
.ak-sidebar--dark .ak-body, .ak-sidebar--dark .ak-body-sm,
.ak-toast .ak-body-sm { color: var(--ak-on-dark-2); }

.ak-on-dark .ak-meta, .ak-on-dark .ak-label, .ak-on-dark .ak-ipa,
.ak-card--dark .ak-meta, .ak-card--dark .ak-label, .ak-card--dark .ak-ipa,
.ak-card--on-dark .ak-meta, .ak-card--on-dark .ak-label,
.ak-sidebar--dark .ak-meta, .ak-sidebar--dark .ak-label,
.ak-toast .ak-meta { color: var(--ak-on-dark-3); }

.ak-on-dark .ak-eyebrow,
.ak-card--dark .ak-eyebrow,
.ak-card--on-dark .ak-eyebrow,
.ak-sidebar--dark .ak-eyebrow { color: var(--ak-accent-on-dark); }

/* N3 der SSOT: Wortmarke und jeder schlichte Link auf dunklem Grund. */
.ak-on-dark a, .ak-card--dark a, .ak-card--on-dark a, .ak-sidebar--dark a,
.ak-toast a { color: var(--ak-accent-on-dark); }
.ak-on-dark a:hover, .ak-card--dark a:hover, .ak-card--on-dark a:hover,
.ak-sidebar--dark a:hover { color: var(--ak-on-dark); }

/* NACHGETRAGEN MIT M6: die Wortmarke auf dunklem Grund.
   In M2 hatte ich die Linkregel portiert, diese hier aber uebersehen.
   Folge: die Wortmarke der Anmeldung stand im Akzentton (6,12:1) statt
   in Weiss (17,6:1). Die SSOT trennt das ausdruecklich — das war ihr
   eigener Blocker N3. Wortgetreu uebernommen. */
.ak-on-dark .ak-brand, .ak-card--dark .ak-brand,
.ak-card--on-dark .ak-brand, .ak-sidebar--dark .ak-brand,
.ak-on-dark a.ak-brand:hover, .ak-card--dark a.ak-brand:hover,
.ak-sidebar--dark a.ak-brand:hover { color: var(--ak-on-dark); }

/* Statusfarben sind fuer helle Flaechen abgestimmt. Auf dunklem Grund
   muessen sie umschalten, sonst landet der Erfolgston bei 3,37:1 —
   der praeventive Punkt 5 aus dem v2.1.1-Audit. */
.ak-on-dark .ak-status--ok, .ak-card--dark .ak-status--ok,
.ak-card--on-dark .ak-status--ok, .ak-sidebar--dark .ak-status--ok,
.ak-toast .ak-status--ok { color: var(--ak-teal-on-dark); }
.ak-on-dark .ak-status--active, .ak-card--dark .ak-status--active,
.ak-card--on-dark .ak-status--active, .ak-sidebar--dark .ak-status--active,
.ak-toast .ak-status--active { color: var(--ak-accent-on-dark); }
.ak-on-dark .ak-status--warn, .ak-card--dark .ak-status--warn,
.ak-card--on-dark .ak-status--warn, .ak-sidebar--dark .ak-status--warn,
.ak-toast .ak-status--warn { color: var(--ak-warn-on-dark); }
.ak-on-dark .ak-status--error, .ak-card--dark .ak-status--error,
.ak-card--on-dark .ak-status--error, .ak-sidebar--dark .ak-status--error,
.ak-toast .ak-status--error { color: var(--ak-error-on-dark); }
.ak-on-dark .ak-status--muted, .ak-card--dark .ak-status--muted,
.ak-card--on-dark .ak-status--muted, .ak-sidebar--dark .ak-status--muted,
.ak-toast .ak-status--muted { color: var(--ak-on-dark-3); }

/* ====================================================================
   P9c — VERSEHENTLICHES ZOOMEN AUF DEM TELEFON
   ====================================================================
   BEFUND 16.08.2026 (iPhone): Doppeltippen auf Knoepfe und Karten
   zoomte die Seite; das Fokussieren eines Eingabefelds zoomte
   ebenfalls. Es fuehlte sich nicht wie eine App an.

   ZWEI URSACHEN, ZWEI GEZIELTE ANTWORTEN — bewusst KEIN
   `user-scalable=no` und KEIN `maximum-scale=1`. Der viewport bleibt
   `width=device-width, initial-scale=1, viewport-fit=cover`, damit
   Menschen, die vergroessern MUESSEN, das weiterhin koennen.

   1) Doppeltipp-Zoom auf Bedienelementen.
      `touch-action: manipulation` schaltet laut Spezifikation nur die
      zusaetzlichen Gesten ab — vor allem den Doppeltipp-Zoom. Panning
      UND Pinch-Zoom bleiben erlaubt. Der Nutzer verliert also nichts,
      ausser dem versehentlichen Sprung.

      Ausgewaehlt wird nach dem, WAS ein Element ist (button, a, label,
      …), nicht nach Klassennamen. Eine Klassenliste veraltet beim
      naechsten neuen Knopf; die Semantik nicht. Header, Tableiste,
      Karten, Spieler, Premium, Formulare, Ayarlar/Login/Register sind
      damit ohne Aufzaehlung erfasst.

   2) Zoom beim Fokussieren eines Eingabefelds.
      iOS Safari zoomt automatisch, wenn ein Feld kleiner als 16px
      Schriftgroesse ist. Unsere Felder standen auf --ak-fs-body = 15px.
      Statt das Design ueberall zu aendern, gilt 16px NUR auf
      Zeigegeraeten mit grobem Zeiger (Finger). Am Schreibtisch bleibt
      alles, wie es war. */

@media (pointer: coarse) {
  button,
  [role="button"],
  a,
  label,
  summary,
  select,
  input[type="checkbox"],
  input[type="radio"],
  input[type="submit"],
  input[type="button"] {
    touch-action: manipulation;
  }

  /* Die 16px-Schwelle von iOS. Kleiner -> Safari zoomt beim Fokus. */
  .ak-input,
  .ak-select,
  .ak-textarea,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="number"],
  input[type="url"],
  textarea {
    font-size: 16px;
  }
}