/* design-public.css — Designsystem Handoff v1, öffentlicher Auftritt (Block 3).
   ==================================================================
   Setzt voraus: design-tokens.css · design-base.css · design-components.css

   WAS HIER HINEINGEHOERT
   Muster, die es NUR auf den öffentlichen Seiten gibt: Hülle, Kopf, Fuß,
   Hero, Vertrauensleiste, Schrittkarten mit Geisternumeralen,
   Zwei-Spalten-Sektion, dunkles Panel, Rechtstexte, Kursdarstellung,
   Einwilligungsbanner.

   WAS HIER NICHT HINEINGEHOERT
   Alles Wiederverwendbare. Knöpfe, Karten, Chips, Felder, Statusanzeigen,
   Ringe, Balken, Kennzahlen und Platzhalter stehen in
   design-components.css und werden hier nur benutzt. Ein Muster wandert
   erst dorthin, wenn es die eingeloggte App auch braucht — nicht auf
   Verdacht.

   KEINE EIGENEN WERTE
   Wie in Block 2: keine Farbe, kein Radius, kein Schatten, kein Abstand
   ausserhalb der Tokenebene. Ein Test erzwingt das.

   ZUR MAXIMALEN BREITE
   Die Referenzprüfung hat gemessen: das Design-System-Board nutzt 1360,
   die Landingpage 1280, Textspalten 640/560/430/400/380. Es gibt KEINE
   einheitliche maximale Breite. Deshalb wird sie hier je Zusammenhang
   gesetzt und NICHT als globales Token geändert — .ak-page bleibt
   unangetastet. */
/* ══ HUELLE ═════════════════════════════════════════════════════════════ */
.ak-pub {
  display: flex; flex-direction: column;
  min-height: 100vh;
}

.ak-pub-main { flex: 1 1 auto;
}

/* Breiten je Zusammenhang, nicht global.
   --breit  Landingpage-Sektionen und Raster
   --text   Lesespalten, Rechtstexte, lange Absätze */
/* ZUSAMMENGEFUEHRT (M5b-2): diese Regel stand doppelt — hier und in design-referenz.css, die zuletzt lud und deshalb gewann. Beide sind jetzt EINE Regel. Aus der Referenzschicht uebernommen und damit massgeblich: margin-inline, max-width, padding-inline, width. Ersetzt wurden die frueheren Werte: width: 100% · max-width: 1200px · margin-inline: auto · padding-inline: var(--ak-gutter). */
.ak-pub-breit {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(18px, 4vw, 40px);
}

.ak-pub-text {
  width: 100%; max-width: 720px;
  margin-inline: auto; padding-inline: var(--ak-gutter);
}

/* ZUSAMMENGEFUEHRT (M5b-2): diese Regel stand doppelt — hier und in
   design-referenz.css, die zuletzt lud und deshalb gewann. Beide sind
   jetzt EINE Regel. Aus der Referenzschicht uebernommen und damit
   massgeblich: background, padding.
   Die frueheren Werte betrafen andere Eigenschaften. */
.ak-pub-sec {
  padding-block: var(--ak-sp-8);
  padding: 80px 0 0;
  background: none;
}

/* Abstand zwischen Sektionskopf und dem folgenden Raster. Eine Klasse
   statt eines style-Attributs: Inline-Styles sind im ganzen Designsystem
   ausgeschlossen, und ein Test prueft das. */
.ak-pub-nach-kopf { margin-top: var(--ak-sp-6);
}

/* ZUSAMMENGEFUEHRT (M5b-2): diese Regel stand doppelt — hier und in
   design-referenz.css, die zuletzt lud und deshalb gewann. Beide sind
   jetzt EINE Regel. Aus der Referenzschicht uebernommen und damit
   massgeblich: background.
   Ersetzt wurden die frueheren Werte: background: var(--ak-surface). */
.ak-pub-sec--soft {
  background: none;
}

.ak-pub-sec--tight { padding-block: var(--ak-sp-6);
}

/* ══ KOPFBEREICH ════════════════════════════════════════════════════════
   Der Handoff klappt die Navigation unterhalb 1100 px zu einem Menü
   zusammen. Umgesetzt mit einem echten <button> und aria-expanded — nie
   mit einem anklickbaren div.

   OHNE JAVASCRIPT: Die Navigation ist dann dauerhaft sichtbar und
   umbricht. Sie verschwindet nie unerreichbar. Das ist der sinnvolle
   Grundzustand; das Zusammenklappen ist eine Verbesserung, keine
   Voraussetzung. Deshalb hängt das Einklappen an .has-js, das app.js
   setzt. */
/* ══════════════════════════════════════════════════════════════════════
   ZUSAMMENGEFUEHRT AUS design-referenz.css (M5b-2, 01.08.2026)
   ══════════════════════════════════════════════════════════════════════
   Die Referenzschicht war eine eigene Datei, die ZULETZT lud und dadurch
   bei gleicher Spezifitaet gegen alles andere gewann. Das war eine
   Kruecke: sie hat unter anderem die Ueberschrift der dunklen Demokarte
   unsichtbar gemacht (M2) und liess sich nur schwer nachvollziehen.

   Jetzt steht alles in dieser Datei. Regeln, die es doppelt gab, sind
   oben an ihrer urspruenglichen Stelle zu EINER Regel verschmolzen; der
   Wert der Referenzschicht hat dabei gewonnen, weil er heute auch
   gewinnt. Jede solche Stelle traegt einen Hinweis, was uebernommen und
   was ersetzt wurde.

   Was hier unten folgt, gab es nur in der Referenzschicht. Reihenfolge
   und Abschnittskommentare sind unveraendert uebernommen, damit
   nachvollziehbar bleibt, woher jeder Block stammt.
   ══════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════ REFERENZSCHICHT — die Werte stammen unveraendert aus dem Handoff. WOHER design_handoff_v1/Almanca Kumbaram.dc.html traegt sein Design als style="…" an jedem Element. Diese Datei uebernimmt genau diese Deklarationen und haengt sie an unsere Klassennamen. Nichts hier ist nachempfunden; jeder Block nennt die Route, aus der er stammt. WARUM EINE EIGENE DATEI Damit auf einen Blick sichtbar ist, was Vorlage ist und was eigene Entscheidung. Sie laedt NACH design-public.css und gewinnt deshalb bei gleicher Spezifitaet. ═══════════════════════════════════════════════════════════════════════ */
/* ── Kopfzeile ── Referenz: <header> auf route=landing ───────────────── header display:flex; align-items:center; justify-content:space-between; gap:clamp(10px,1.6vw,22px); padding:20px clamp(18px,4vw,40px); max-width:1280px; margin:0 auto; flex-wrap:nowrap */
/* ZUSAMMENGEFUEHRT (M5b-2): dieser Selektor stand 2 mal in dieser Datei. Jetzt EINE Regel; der spaeter stehende Wert
   hat gewonnen, weil er auch bisher gewonnen hat. Ersetzt: border-bottom: 1px solid var(--ak-line) -> 0 */
.ak-pub-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--ak-bg);
  border-bottom: 0;
}

/* ZUSAMMENGEFUEHRT (M5b-2): diese Regel stand doppelt — hier und in
   design-referenz.css, die zuletzt lud und deshalb gewann. Beide sind
   jetzt EINE Regel. Aus der Referenzschicht uebernommen und damit
   massgeblich: align-items, display, flex-wrap, gap, justify-content, margin, max-width, min-height, padding.
   Ersetzt wurden die frueheren Werte: display: flex · align-items: center · gap: var(--ak-sp-4) · min-height: 84px · flex-wrap: wrap. */
.ak-pub-header-innen {
  padding-block: var(--ak-sp-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(10px, 1.6vw, 22px);
  padding: 20px clamp(18px, 4vw, 40px);
  max-width: 1280px;
  margin: 0 auto;
  flex-wrap: nowrap;
  min-height: 0;
}

/* ZUSAMMENGEFUEHRT (M5b-2): diese Regel stand doppelt — hier und in
   design-referenz.css, die zuletzt lud und deshalb gewann. Beide sind
   jetzt EINE Regel. Aus der Referenzschicht uebernommen und damit
   massgeblich: align-items, background, display, flex, gap, margin-right, padding.
   Ersetzt wurden die frueheren Werte: display: inline-flex · align-items: center · gap: var(--ak-sp-3) · margin-right: auto. */
.ak-pub-marke {
  color: var(--ak-ink);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  padding: 0;
  flex: 0 0 auto;
  margin-right: 0;
}

.ak-pub-marke:hover { color: var(--ak-ink);
}

.ak-pub-marke-text { display: flex; align-items: center;
}

/* Hier stand `.ak-pub-marke-name` — die Schriftregel fuer den GESETZTEN
   Markennamen („Almanca<br>Kumbaram", Display-Schrift 700). Seit dem
   08.09.2026 ist die Wortmarke das Originalasset des Eigentuemers und
   keine Schrift mehr: sie traegt ihre beiden Gewichte als Pfade. Die
   Farbe muss trotzdem hier stehen — das SVG erbt `currentColor`, und
   ohne diese Regel nimmt es die Linkfarbe des umgebenden `<a>` an
   (gemessen: violetter Akzent statt Markenfarbe). */
.ak-pub-marke .ak-marke-wort { color: var(--ak-ink); }

/* Die Beschreibung unter der Wortmarke im Fuss stand mit 11,5 px in
   normalem Schnitt — das ist Fliesstext, nicht Beschriftung. */
/* ZUSAMMENGEFUEHRT (M5b-2): dieser Selektor stand 2 mal in dieser Datei. Jetzt EINE Regel; der spaeter stehende Wert
   hat gewonnen, weil er auch bisher gewonnen hat. Ersetzt: font-size: var(--ak-fs-micro) -> var(--ak-fs-meta) */
.ak-pub-marke-sub {
  font-size: var(--ak-fs-meta);
  font-weight: 600;
  color: var(--ak-ink-2);
}

.ak-pub-nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: var(--ak-sp-1);
  flex-wrap: wrap;
}

/* ZUSAMMENGEFUEHRT (M5b-2): diese Regel stand doppelt — hier und in
   design-referenz.css, die zuletzt lud und deshalb gewann. Beide sind
   jetzt EINE Regel. Aus der Referenzschicht uebernommen und damit
   massgeblich: align-items, background, border-radius, color, display, font-size, font-weight, gap, min-height, padding, text-decoration, white-space.
   Ersetzt wurden die frueheren Werte: display: inline-flex · align-items: center · gap: 7px · min-height: 24px · display: inline-flex · align-items: center. */
.ak-pub-nav a {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  padding: 8px 10px;
  border-radius: var(--ak-r-chip);
  font-size: var(--ak-fs-sm);
  font-weight: 500;
  color: var(--ak-ink-2);
  white-space: nowrap;
  text-decoration: none;
  min-height: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* ZUSAMMENGEFUEHRT (M5b-2): diese Regel stand doppelt — hier und in
   design-referenz.css, die zuletzt lud und deshalb gewann. Beide sind
   jetzt EINE Regel. Aus der Referenzschicht uebernommen und damit
   massgeblich: background, color.
   Ersetzt wurden die frueheren Werte: background: var(--ak-surface-warm) · color: var(--ak-ink). */
.ak-pub-nav a:hover {
  background: var(--ak-surface-warm);
  color: var(--ak-ink);
}

/* Die aktuelle Seite trägt aria-current im Markup — die Farbe allein
   wäre reine Farbcodierung. */
/* ZUSAMMENGEFUEHRT (M5b-2): diese Regel stand doppelt — hier und in design-referenz.css, die zuletzt lud und deshalb gewann. Beide sind jetzt EINE Regel. Aus der Referenzschicht uebernommen und damit massgeblich: background, color. Ersetzt wurden die frueheren Werte: background: var(--ak-accent-soft) · color: var(--ak-accent-deep). */
.ak-pub-nav a[aria-current="page"] {
  background: var(--ak-accent-soft);
  color: var(--ak-accent-deep);
}

/* Sprachumschalter — im Kopf, nicht nur im Fuß (Produktabweichung 3). */
.ak-pub-lang {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px;
  background: var(--ak-surface-warm);
  border-radius: var(--ak-r-pill);
  flex: none;
}

.ak-pub-lang a {
  display: inline-block;
  padding: 6px 11px;
  border-radius: var(--ak-r-pill);
  font-size: var(--ak-fs-meta); font-weight: 700;
  color: var(--ak-ink-2); text-decoration: none;
}

.ak-pub-lang a:hover { color: var(--ak-ink);
}

.ak-pub-lang a[aria-current="true"] {
  background: var(--ak-surface); color: var(--ak-ink);
  box-shadow: var(--ak-sh-card);
}

.ak-pub-burger { display: none;
}

/* KLAPPSCHWELLE 1259/1260 px — gemessen, nicht gewaehlt.
   Erste Fassung: 1099/1100. Mit dem groesseren gestapelten Logo (64 px,
   181 px breit) ueberlappten bei genau 1100 px Navigation und
   Kopfaktionen um 8 px; ab 1150 war Luft, die Schwelle ging auf 1160.
   Zweite Verschiebung am 16.09.2026 (nachts): der Sprachumschalter im
   Kopf (Wunsch des Eigentuemers) macht die Aktionen 94 px breiter.
   Gemessen bei 1160 px: Marke 181 + Navigation 597 + Aktionen 336 =
   1114 bei 1064 verfuegbar — sie ueberlappten wieder. Mit Luecken
   braucht die volle Leiste rund 1178 px Inhalt, also etwa 1258 px
   Fenster. Die Schwelle liegt deshalb bei 1260 px.
   DIESELBE ZAHL STEHT IN VIER MEDIENABFRAGEN (Klappknopf, Logostufen,
   Klappflaeche, Beruehrungsziele). Wer eine aendert, aendert alle. */
@media (max-width: 1259px) {
/* Nur wenn JavaScript da ist, wird eingeklappt. Ohne JS bleibt alles
     sichtbar und umbricht — nie eine unerreichbare Navigation. */
  .has-js .ak-pub-burger {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--ak-sp-2);
    padding: 10px var(--ak-sp-4);
    border: 1.5px solid var(--ak-line);
    border-radius: var(--ak-r-btn);
    background: var(--ak-surface);
    font-size: var(--ak-fs-body-sm); font-weight: 600;
    color: var(--ak-ink);
    order: 3;
  }
  .has-js .ak-pub-burger:hover { border-color: var(--ak-ink); }
  .has-js .ak-pub-nav {
    display: none;
    order: 5; width: 100%;
  }
  .has-js .ak-pub-nav.is-open { display: block; }
  .has-js .ak-pub-nav ul {
    flex-direction: column; align-items: stretch;
    gap: 2px;
    padding-block: var(--ak-sp-3);
    border-top: 1px solid var(--ak-line-soft);
    margin-top: var(--ak-sp-2);
  }
  /* `li > a`, NICHT jeder Anker: seit dem Sprachumschalter im Menue
     stehen dort auch zwei Anker, die KEINE Menueeintraege sind. */
  .has-js .ak-pub-nav li > a { padding: 12px var(--ak-sp-3); }
}

@media (max-width: 560px) {
.ak-pub-marke-sub { display: none; }
}

/* ══ HERO ═══════════════════════════════════════════════════════════════
   Zweispaltig: Text links, Strichillustration rechts. Auf dem Telefon
   einspaltig, Illustration zuerst — sie trägt die Aussage schneller als
   drei Zeilen Text. */
/* ZUSAMMENGEFUEHRT (M5b-2): diese Regel stand doppelt — hier und in design-referenz.css, die zuletzt lud und deshalb gewann. Beide sind jetzt EINE Regel. Aus der Referenzschicht uebernommen und damit massgeblich: background, padding. Die frueheren Werte betrafen andere Eigenschaften. */
.ak-pub-hero {
  padding-block: var(--ak-sp-8) var(--ak-sp-7);
  padding: 0;
  background: none;
}

/* ZUSAMMENGEFUEHRT (M5b-2): diese Regel stand doppelt — hier und in
   design-referenz.css, die zuletzt lud und deshalb gewann. Beide sind
   jetzt EINE Regel. Aus der Referenzschicht uebernommen und damit
   massgeblich: align-items, display, gap, grid-template-columns, margin, max-width, padding, padding-inline.
   Ersetzt wurden die frueheren Werte: display: grid · gap: var(--ak-sp-7) · grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)) · align-items: center. */
.ak-pub-hero-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 48px;
  align-items: center;
  padding: 36px 0 8px;
  max-width: 1280px;
  margin: 0 auto;
  padding-inline: clamp(18px, 4vw, 40px);
}

.ak-pub-hero-text { display: grid; gap: var(--ak-sp-4); justify-items: start;
}

.ak-pub-hero-text > * { margin: 0;
}

.ak-pub-hero-pille {
  display: inline-flex; align-items: center; gap: var(--ak-sp-2);
  padding: 7px var(--ak-sp-4);
  border-radius: var(--ak-r-pill);
  background: var(--ak-accent-soft);
  color: var(--ak-accent-deep);
  font-size: var(--ak-fs-meta); font-weight: 700;
}

.ak-pub-hero-ctas {
  display: flex; align-items: center; gap: var(--ak-sp-4);
  flex-wrap: wrap;
}

/* ZUSAMMENGEFUEHRT (M5b-2): diese Regel stand doppelt — hier und in
   design-referenz.css, die zuletzt lud und deshalb gewann. Beide sind
   jetzt EINE Regel. Aus der Referenzschicht uebernommen und damit
   massgeblich: display, min-height, place-items, position.
   Ersetzt wurden die frueheren Werte: display: grid · place-items: center · position: relative. */
.ak-pub-hero-bild {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 380px;
}

/* Der lila Schimmer hinter der Illustration. */
.ak-pub-hero-bild::before {
  content: ""; position: absolute; inset: 8%;
  border-radius: var(--ak-r-pill);
  background: radial-gradient(circle, var(--ak-accent-soft) 0%, transparent 68%);
  z-index: 0;
}

.ak-pub-hero-bild svg { position: relative; z-index: 1; width: 100%; max-width: 460px; height: auto;
}

.ak-pub-hero-bild.ak-anim-float { animation: akFloat 7s ease-in-out infinite;
}

@media (max-width: 767px) {
.ak-pub-hero-raster { grid-template-columns: 1fr; }
  .ak-pub-hero-bild { order: -1; }
  .ak-pub-hero-bild svg { max-width: 320px; }
}

/* ══ VERTRAUENSLEISTE ═══════════════════════════════════════════════════
   Eine gerahmte Karte, Punkte nebeneinander, dazwischen senkrechte
   Haarlinien. In der Referenz sehr flach (86 px) — sie soll nicht
   konkurrieren, nur bestätigen.

   Die Haarlinien entstehen über border-inline-start am Nachbarn, nicht
   über eigene Elemente: so verschwinden sie beim Umbruch von selbst. */
@media (max-width: 767px) {

}

/* ══ SCHRITTKARTEN MIT GEISTERNUMERALEN ═════════════════════════════════
   Die Referenz setzt in jede Schrittkarte ein grosses, sehr helles
   Numeral 01–04 nach rechts oben. Es ist Dekoration — die Reihenfolge
   steht ohnehin im <ol>. Deshalb aria-hidden im Markup.

   Die Numeralen dürfen den Text NICHT stören: sie liegen hinter ihm und
   sind hell genug, dass darüber gelesen werden kann. */
.ak-pub-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--ak-sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  counter-reset: akschritt;
}

.ak-pub-step {
  position: relative; overflow: hidden;
  display: grid; gap: var(--ak-sp-3);
  align-content: start;
  padding: var(--ak-pad-card);
  background: var(--ak-surface);
  border: 1px solid var(--ak-line);
  border-radius: var(--ak-r-card);
}

.ak-pub-step > * { position: relative; z-index: 1; margin: 0;
}

/* Die grosse Schrittzahl ist ein Wasserzeichen hinter der Karte, kein
   Text: sie steht doppelt (die Reihenfolge ergibt sich aus der Liste)
   und traegt im Markup aria-hidden="true". Gemessen 1,24:1 — das ist
   Absicht und faellt unter die Ausnahme von WCAG 1.4.3 fuer rein
   dekorativen Text. Wird sie je fuer Vorleseprogramme sichtbar gemacht,
   muss die Farbe auf --ak-ink-3 (4,55:1) wechseln. Dieselbe Regelung
   wie in der SSOT fuer .ak-errorpage__code. */
.ak-pub-step-nr {
  position: absolute; top: var(--ak-sp-3); right: var(--ak-sp-4);
  z-index: 0;
  font-family: var(--ak-font-display);
  /* M5b-2: Rolle Anzeigezahl. --ak-fs-display ist die groesste Rolle der
     SSOT und passt zum Wasserzeichen hinter der Karte. */
  font-size: var(--ak-fs-display); font-weight: 700; line-height: 1;
  color: var(--ak-line);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.ak-pub-step-text { font-size: var(--ak-fs-body-sm); line-height: var(--ak-lh-body); color: var(--ak-ink-2);
}

/* ══ ZWEI-SPALTEN-SEKTION ═══════════════════════════════════════════════
   Text links, Inhalt rechts. In der Referenz mehrfach: Lektionsarten,
   FAQ, „Für Türkischsprachige". Auf dem Telefon untereinander, Text
   zuerst. */
.ak-pub-split {
  display: grid; gap: var(--ak-sp-6);
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  align-items: start;
}

.ak-pub-split-text { display: grid; gap: var(--ak-sp-3); align-content: start;
}

.ak-pub-split-text > * { margin: 0;
}

@media (min-width: 1100px) {
/* Textspalte schmaler als die Inhaltsspalte — so wie in der Referenz. */
  .ak-pub-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

/* ══ DUNKLE PANEL-SEKTION ═══════════════════════════════════════════════
   Genau EINE je Seite. In der Referenz der visuelle Schwerpunkt der
   Landingpage (645 px, die höchste Sektion).

   ZUM SCHATTEN: Die Referenz benutzt hier drei verschiedene dunkle
   Schatten (0 10px 26px .2 / 0 12px 30px .25 / 0 20px 50px .18), keiner
   davon der README-Wert. Statt daraus ein falsches globales Token zu
   machen, wird der vorhandene --ak-sh-overlay benutzt. Dokumentierte
   Entscheidung, keine stille Vereinheitlichung. */
.ak-pub-panel {
  background: var(--ak-dark-surface);
  color: var(--ak-ink-inverse);
  border-radius: var(--ak-r-panel);
  padding: clamp(24px, 4vw, 56px);
  box-shadow: var(--ak-sh-overlay);
}

.ak-pub-panel .ak-eyebrow { color: var(--ak-accent-on-dark);
}

.ak-pub-panel .ak-body, .ak-pub-panel p { color: var(--ak-ink-inverse-2);
}

.ak-pub-panel .ak-h2, .ak-pub-panel h2 { color: var(--ak-ink-inverse);
}

.ak-pub-panel-raster {
  display: grid; gap: var(--ak-sp-6);
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  align-items: center;
}

/* Knöpfe auf dunklem Grund kehren sich um. */
.ak-pub-panel .ak-btn--primary {
  background: var(--ak-surface); color: var(--ak-ink);
}

.ak-pub-panel .ak-btn--primary:hover { background: var(--ak-surface-warm); color: var(--ak-ink);
}

/* ══ SEITENKOPF DER UNTERSEITEN ═════════════════════════════════════════ */
.ak-pub-kopf { padding-block: var(--ak-sp-7) var(--ak-sp-6);
}

.ak-pub-kopf-innen { display: grid; gap: var(--ak-sp-3); justify-items: start;
}

.ak-pub-kopf-innen > * { margin: 0;
}

.ak-pub-krumen {
  display: flex; align-items: center; gap: var(--ak-sp-2);
  flex-wrap: wrap;
  font-size: var(--ak-fs-meta); font-weight: 600;
  color: var(--ak-ink-2);
}

.ak-pub-krumen a { color: var(--ak-ink-2); text-decoration: none;
}

.ak-pub-krumen a:hover { color: var(--ak-accent-deep);
}

.ak-pub-krumen [aria-current="page"] { color: var(--ak-ink);
}

/* ══ KURSE ══════════════════════════════════════════════════════════════
   ABGELEITET, NICHT ABGESCHRIEBEN. Der Prototyp kennt keine verkauften
   Kurse — seine `levels` sind CEFR-Stufen mit Lernfortschritt. Übernommen
   wird die visuelle Sprache (Farbstreifen links, Levelabzeichen,
   Faktenliste), NICHT die Fortschrittsanzeige: ein Angebot hat keinen
   Lernstand. */
/* ZUSAMMENGEFUEHRT (M5b-2): diese Regel stand doppelt — hier und in design-referenz.css, die zuletzt lud und deshalb gewann. Beide sind jetzt EINE Regel. Aus der Referenzschicht uebernommen und damit massgeblich: display, gap, grid-template-columns. Ersetzt wurden die frueheren Werte: display: grid · gap: var(--ak-sp-4) · grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)). */
.ak-pub-kurse {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

/* ZUSAMMENGEFUEHRT (M5b-2): diese Regel stand doppelt — hier und in
   design-referenz.css, die zuletzt lud und deshalb gewann. Beide sind
   jetzt EINE Regel. Aus der Referenzschicht uebernommen und damit
   massgeblich: align-content, background, border-color, border-radius, border-style, border-width, box-shadow, color, display, gap, padding, text-align, text-decoration.
   Ersetzt wurden die frueheren Werte: display: grid · gap: var(--ak-sp-4) · align-content: start · padding: var(--ak-pad-card) · background: var(--ak-surface) · border-radius: var(--ak-r-card). */
.ak-pub-kurs {
  border: 1px solid var(--ak-line);
  border-inline-start: 5px solid var(--ak-line-strong);
  text-align: left;
  background: var(--ak-surface);
  border-width: 1px 1px 1px 5px;
  border-style: solid;
  border-color: var(--ak-line) var(--ak-line) var(--ak-line) var(--ak-stufe, var(--ak-a1));
  border-radius: var(--ak-r-card);
  padding: 22px;
  box-shadow: var(--ak-sh-card);
  display: grid;
  gap: 8px;
  align-content: start;
  text-decoration: none;
  color: inherit;
}

/* ZUSAMMENGEFUEHRT (M5b-2): diese Regel stand doppelt — hier und in
   design-referenz.css, die zuletzt lud und deshalb gewann. Beide sind
   jetzt EINE Regel. Aus der Referenzschicht uebernommen und damit
   massgeblich: --ak-stufe.
   Die frueheren Werte betrafen andere Eigenschaften. */
.ak-pub-kurs--a1 {
  border-inline-start-color: var(--ak-a1);
  --ak-stufe: var(--ak-a1);
}

/* ZUSAMMENGEFUEHRT (M5b-2): diese Regel stand doppelt — hier und in
   design-referenz.css, die zuletzt lud und deshalb gewann. Beide sind
   jetzt EINE Regel. Aus der Referenzschicht uebernommen und damit
   massgeblich: --ak-stufe.
   Die frueheren Werte betrafen andere Eigenschaften. */
.ak-pub-kurs--a2 {
  border-inline-start-color: var(--ak-a2);
  --ak-stufe: var(--ak-a2);
}

/* ZUSAMMENGEFUEHRT (M5b-2): diese Regel stand doppelt — hier und in
   design-referenz.css, die zuletzt lud und deshalb gewann. Beide sind
   jetzt EINE Regel. Aus der Referenzschicht uebernommen und damit
   massgeblich: --ak-stufe.
   Die frueheren Werte betrafen andere Eigenschaften. */
.ak-pub-kurs--b1 {
  border-inline-start-color: var(--ak-b1);
  --ak-stufe: var(--ak-b1);
}

/* ZUSAMMENGEFUEHRT (M5b-2): diese Regel stand doppelt — hier und in
   design-referenz.css, die zuletzt lud und deshalb gewann. Beide sind
   jetzt EINE Regel. Aus der Referenzschicht uebernommen und damit
   massgeblich: --ak-stufe.
   Die frueheren Werte betrafen andere Eigenschaften. */
.ak-pub-kurs--b2 {
  border-inline-start-color: var(--ak-b2);
  --ak-stufe: var(--ak-b2);
}

/* ZUSAMMENGEFUEHRT (M5b-2): diese Regel stand doppelt — hier und in
   design-referenz.css, die zuletzt lud und deshalb gewann. Beide sind
   jetzt EINE Regel. Aus der Referenzschicht uebernommen und damit
   massgeblich: --ak-stufe.
   Die frueheren Werte betrafen andere Eigenschaften. */
.ak-pub-kurs--c1 {
  border-inline-start-color: var(--ak-c1);
  --ak-stufe: var(--ak-c1);
}

/* ZUSAMMENGEFUEHRT (M5b-2): diese Regel stand doppelt — hier und in
   design-referenz.css, die zuletzt lud und deshalb gewann. Beide sind
   jetzt EINE Regel. Aus der Referenzschicht uebernommen und damit
   massgeblich: --ak-stufe.
   Die frueheren Werte betrafen andere Eigenschaften. */
.ak-pub-kurs--c2 {
  border-inline-start-color: var(--ak-c2);
  --ak-stufe: var(--ak-c2);
}

.ak-pub-kurs-kopf { display: flex; align-items: center; gap: var(--ak-sp-3);
}

.ak-pub-kurs-titel { font-size: var(--ak-fs-h3); font-weight: 700; line-height: var(--ak-lh-h3); margin: 0;
}

.ak-pub-fakten { margin: 0; display: grid; gap: 0;
}

.ak-pub-fakten > div {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--ak-sp-3);
  padding-block: 9px;
  border-top: 1px solid var(--ak-line-soft);
  font-size: var(--ak-fs-body-sm);
}

.ak-pub-fakten > div:first-child { border-top: 0;
}

.ak-pub-fakten dt {
  display: inline-flex; align-items: center; gap: var(--ak-sp-2);
  color: var(--ak-ink-2); font-weight: 600;
}

.ak-pub-fakten dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
}

.ak-pub-kurs-fuss { display: grid; gap: var(--ak-sp-3);
}

.ak-pub-preis {
  justify-self: start;
  display: inline-flex; align-items: center;
  padding: 7px var(--ak-sp-4);
  border-radius: var(--ak-r-pill);
  background: var(--ak-accent-soft);
  color: var(--ak-accent-deep);
  font-family: var(--ak-font-display);
  font-size: var(--ak-fs-lg); font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Kursdetail: Kopfkarte mit Zusammenfassung rechts — abgeleitet aus der
   gemessenen levelDetail-Komposition. */
@media (min-width: 1100px) {

}

/* ══ HAKENLISTE ═════════════════════════════════════════════════════════ */
.ak-pub-haken { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ak-sp-3);
}

.ak-pub-haken li {
  display: flex; align-items: flex-start; gap: var(--ak-sp-3);
  font-size: var(--ak-fs-body); line-height: var(--ak-lh-body);
}

.ak-pub-haken .ak-ic { color: var(--ak-ok); margin-top: 4px;
}

/* ══ KONTAKTWEGE ════════════════════════════════════════════════════════
   Gemessen an der Referenzroute `contact`: eine reine Kartenkomposition.
   Das Produkt hat bewusst KEIN Formular, nur beschriftete mailto-Wege —
   der Prototyp bestätigt, dass das genügt. */
.ak-pub-wege { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ak-sp-3);
}

/* Der Weg als senkrechte Folge — die Referenz zeigt ihn als Zeitleiste.
   Die Verbindungslinie entsteht über ein Pseudoelement am Listenpunkt und
   entfällt beim letzten von selbst. */
/* ZUSAMMENGEFUEHRT (M5b-2): dieser Selektor stand 2 mal in dieser Datei. Jetzt EINE Regel; der spaeter stehende Wert
   hat gewonnen, weil er auch bisher gewonnen hat. Ersetzt: display: flex -> grid · gap: var(--ak-sp-4) -> var(--ak-sp-5) · padding: var(--ak-pad-card-sm) -> 0 */
.ak-pub-weg {
  display: grid;
  align-items: center;
  gap: var(--ak-sp-5);
  padding: 0;
  background: var(--ak-surface);
  border: 1px solid var(--ak-line);
  border-radius: var(--ak-r-card);
  list-style: none;
  margin: 0;
}

.ak-pub-weg-text { display: grid; gap: 2px; min-width: 0;
}

.ak-pub-weg-label {
  font-size: var(--ak-fs-micro); font-weight: 700;
  letter-spacing: var(--ak-ls-micro); text-transform: uppercase;
  color: var(--ak-ink-2);
}

.ak-pub-weg-wert {
  font-size: var(--ak-fs-body); font-weight: 600;
  color: var(--ak-ink); text-decoration: none;
  overflow-wrap: anywhere;
}

.ak-pub-weg-wert:hover { color: var(--ak-accent-deep);
}

/* ══ RECHTSTEXTE ════════════════════════════════════════════════════════
   Sechs getrennte Routen (genehmigte Abweichung). Die Referenz führt
   H1 „Yasal bilgiler" · H2 je Rechtstext · H3 je Abschnitt. Weil bei uns
   jede Seite für sich steht, rückt die Hierarchie eine Stufe hoch:
   H1 = der Rechtstext, H2 = seine Abschnitte.

   Lesebreite, Tabellen mit eigenem Scrollbehälter, lange URLs brechen. */
.ak-pub-legal { display: grid; gap: var(--ak-sp-6);
}

.ak-pub-legal-block { display: grid; gap: var(--ak-sp-3);
}

.ak-pub-legal-block > * { margin: 0;
}

.ak-pub-legal-block h2 {
  font-family: var(--ak-font-display);
  font-size: var(--ak-fs-3xl); font-weight: 700; line-height: 1.25;
  display: flex; align-items: center; gap: var(--ak-sp-2);
}

/* ZUSAMMENGEFUEHRT (M5b-2): diese Regel stand doppelt — hier und in
   design-referenz.css, die zuletzt lud und deshalb gewann. Beide sind
   jetzt EINE Regel. Aus der Referenzschicht uebernommen und damit
   massgeblich: color, font-size, line-height, margin.
   Ersetzt wurden die frueheren Werte: font-size: var(--ak-fs-body) · line-height: var(--ak-lh-body) · color: var(--ak-ink-2). */
.ak-pub-legal-text {
  overflow-wrap: anywhere;
  font-size: var(--ak-fs-body);
  line-height: 1.75;
  color: var(--ak-ink-2);
  margin: 0;
}

.ak-pub-legal-text a { overflow-wrap: anywhere;
}

/* Breite Inhalte scrollen in ihrem EIGENEN Behälter. Die Seite selbst
   scrollt nie seitwärts. */
.ak-pub-tabelle-wrap {
  overflow-x: auto; max-width: 100%;
  border: 1px solid var(--ak-line);
  border-radius: var(--ak-r-12);
}

.ak-pub-tabelle { width: 100%; border-collapse: collapse; font-size: var(--ak-fs-body-sm);
}

.ak-pub-tabelle th, .ak-pub-tabelle td {
  padding: 11px var(--ak-sp-4);
  text-align: start;
  border-top: 1px solid var(--ak-line-soft);
  vertical-align: top;
}

.ak-pub-tabelle thead th {
  border-top: 0;
  background: var(--ak-surface-warm);
  font-size: var(--ak-fs-micro); font-weight: 700;
  letter-spacing: var(--ak-ls-micro); text-transform: uppercase;
  color: var(--ak-ink-2);
  white-space: nowrap;
}

.ak-pub-tabelle code {
  font-size: var(--ak-fs-body-sm);
  background: var(--ak-surface-warm);
  padding: 2px 6px; border-radius: var(--ak-r-tag);
}

/* ══ FAQ ════════════════════════════════════════════════════════════════
   Natives <details>/<summary> (Owner-Entscheidung 3): ohne JavaScript
   bedienbar, native Tastaturfunktion, kein eigener Zustand.

   Der Standardmarker wird entfernt und durch ein eigenes Zeichen ersetzt,
   das sich beim Öffnen dreht. Mehrere Einträge dürfen offen sein — es
   gibt keine fachliche Anforderung dagegen, und erzwungenes Schliessen
   wäre ohne JavaScript ohnehin nicht möglich. */
/* ZUSAMMENGEFUEHRT (M5b-2): diese Regel stand doppelt — hier und in design-referenz.css, die zuletzt lud und deshalb gewann. Beide sind jetzt EINE Regel. Aus der Referenzschicht uebernommen und damit massgeblich: display, gap. Ersetzt wurden die frueheren Werte: display: grid · gap: var(--ak-sp-3). */
.ak-pub-faq {
  display: grid;
  gap: 10px;
}

/* ZUSAMMENGEFUEHRT (M5b-2): diese Regel stand doppelt — hier und in
   design-referenz.css, die zuletzt lud und deshalb gewann. Beide sind
   jetzt EINE Regel. Aus der Referenzschicht uebernommen und damit
   massgeblich: background, border, border-radius.
   Ersetzt wurden die frueheren Werte: background: var(--ak-surface) · border: 1px solid var(--ak-line) · border-radius: var(--ak-r-12). */
.ak-pub-faq-item {
  overflow: hidden;
  background: var(--ak-surface);
  border: 1px solid var(--ak-line);
  border-radius: var(--ak-r-row);
}

/* ZUSAMMENGEFUEHRT (M5b-2): diese Regel stand doppelt — hier und in
   design-referenz.css, die zuletzt lud und deshalb gewann. Beide sind
   jetzt EINE Regel. Aus der Referenzschicht uebernommen und damit
   massgeblich: color, font-size, font-weight, padding.
   Ersetzt wurden die frueheren Werte: padding: var(--ak-sp-4) var(--ak-sp-5) · font-size: var(--ak-fs-h3) · font-weight: 700. */
.ak-pub-faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ak-sp-4);
  cursor: pointer;
  line-height: var(--ak-lh-h3);
  list-style: none;
  padding: 16px 18px;
  font-size: var(--ak-fs-body);
  font-weight: 600;
  color: var(--ak-ink);
}

.ak-pub-faq-item > summary::-webkit-details-marker { display: none;
}

.ak-pub-faq-item > summary:hover { background: var(--ak-surface-warm);
}

.ak-pub-faq-marker {
  flex: none; width: 22px; height: 22px;
  display: grid; place-items: center;
  color: var(--ak-ink-2);
  transition: transform var(--ak-t-toggle) var(--ak-ease);
}

.ak-pub-faq-item[open] > summary .ak-pub-faq-marker { transform: rotate(180deg);
}

.ak-pub-faq-antwort {
  margin: 0;
  padding: 0 var(--ak-sp-5) var(--ak-sp-5);
  font-size: var(--ak-fs-body); line-height: var(--ak-lh-body);
  color: var(--ak-ink-2);
  max-width: 68ch;
}

/* Hier lagen die Regeln des Einwilligungsbanners (.ak-pub-consent*).
   Das Banner ist am 07.09.2026 entfallen: es fragte nach einer
   Zustimmung, die nichts steuerte. */

/* Hier lagen der Entwurfshinweis (.ak-pub-entwurf) und die Markierung
   offener Punkte (.ak-pub-legal-offen). Beide sind am 07.09.2026
   entfallen: die Rechtstexte sind veroeffentlichte Fassungen, und ein
   Hinweis, der sie als Zwischenstand ausweist, waere jetzt selbst die
   falsche Aussage. */


/* ══ FUSSBEREICH ════════════════════════════════════════════════════════
   Fünf Spalten nach Referenz: Marke · Produkt · Kurse · Hilfe · Rechtliches.
   Unten eine Trennzeile mit Copyright und Sprachumschalter. */
/* ZUSAMMENGEFUEHRT (M5b-2): diese Regel stand doppelt — hier und in design-referenz.css, die zuletzt lud und deshalb gewann. Beide sind jetzt EINE Regel. Aus der Referenzschicht uebernommen und damit massgeblich: background, border-top. Ersetzt wurden die frueheren Werte: background: var(--ak-surface) · border-top: 1px solid var(--ak-line). */
.ak-pub-footer {
  padding-block: var(--ak-sp-7) var(--ak-sp-5);
  margin-top: var(--ak-sp-8);
  border-top: 1px solid var(--ak-line);
  background: var(--ak-surface);
}

/* ZUSAMMENGEFUEHRT (M5b-2): diese Regel stand doppelt — hier und in
   design-referenz.css, die zuletzt lud und deshalb gewann. Beide sind
   jetzt EINE Regel. Aus der Referenzschicht uebernommen und damit
   massgeblich: display, gap, grid-template-columns, margin-bottom.
   Ersetzt wurden die frueheren Werte: display: grid · gap: var(--ak-sp-6) · grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)). */
.ak-pub-footer-raster {
  display: grid;
  gap: 32px;
  margin-bottom: 40px;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
}

/* STILLGELEGT MIT M5b-2 — kontrolliert, nicht ueberschrieben.
   Hier stand: @media (min-width:1100px) .ak-pub-footer-raster
   { grid-template-columns: minmax(0,1.6fr) repeat(4, minmax(0,1fr)) }
   Diese Regel hat NIE gewirkt: design-referenz.css lud spaeter und setzte
   das Raster ohne Medienabfrage auf auto-fit. Gemessen bei 1440 px waere
   die erste Spalte dadurch von 214 auf 306 px gesprungen — eine sichtbare
   Aenderung, die nichts mit der Zusammenfuehrung zu tun hat, sondern nur
   damit, dass eine tote Regel wieder auftaucht.
   Die Zusammenfuehrung soll den heutigen Zustand erhalten, nicht neu
   entscheiden. Deshalb ist die Regel entfernt statt reaktiviert. Wenn das
   fuenfspaltige Raster gewuenscht ist, ist das eine Designentscheidung
   und gehoert in ein eigenes Paket. */

/* ZUSAMMENGEFUEHRT (M5b-2): diese Regel stand doppelt — hier und in
   design-referenz.css, die zuletzt lud und deshalb gewann. Beide sind
   jetzt EINE Regel. Aus der Referenzschicht uebernommen und damit
   massgeblich: min-width.
   Die frueheren Werte betrafen andere Eigenschaften. */
.ak-pub-footer-marke {
  display: grid;
  gap: var(--ak-sp-3);
  align-content: start;
  min-width: 190px;
}

.ak-pub-footer-about {
  font-size: var(--ak-fs-body-sm); line-height: var(--ak-lh-sm);
  color: var(--ak-ink-2); margin: 0; max-width: 34ch;
}

.ak-pub-footer-spalte h2 {
  font-size: var(--ak-fs-micro); font-weight: 700;
  letter-spacing: var(--ak-ls-micro); text-transform: uppercase;
  color: var(--ak-ink-2);
  margin: 0 0 var(--ak-sp-3);
}

.ak-pub-footer-spalte ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ak-sp-2);
}

/* 24 px Mindestziel (WCAG 2.5.8). Gemessen waren es 22 px. Die
   Ausnahme fuer Links „im Fliesstext" greift hier NICHT: die Fusszeile
   stapelt eigenstaendige Ziele untereinander, sie stehen nicht in einem
   Satz. Dieselbe Ueberlegung wie bei der Rechtszeile der App-Shell. */
/* ZUSAMMENGEFUEHRT (M5b-2): diese Regel stand doppelt — hier und in design-referenz.css, die zuletzt lud und deshalb gewann. Beide sind jetzt EINE Regel. Aus der Referenzschicht uebernommen und damit massgeblich: align-items, display, gap. Ersetzt wurden die frueheren Werte: display: inline-flex · align-items: center · gap: var(--ak-sp-2). */
.ak-pub-footer-spalte a {
  min-height: 24px;
  font-size: var(--ak-fs-body-sm);
  font-weight: 500;
  color: var(--ak-ink-2);
  text-decoration: none;
  overflow-wrap: anywhere;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ak-pub-footer-spalte a:hover { color: var(--ak-accent-deep);
}

/* Untere Fusszeile: Copyright links, Slogan mittig, Sprachumschalter
   rechts — so fuehrt es die Referenz. Auf schmalen Geraeten untereinander
   und linksbuendig, damit nichts zusammengedrueckt wird. */
/* ZUSAMMENGEFUEHRT (M5b-2): dieser Selektor stand 2 mal in dieser Datei. Jetzt EINE Regel; der spaeter stehende Wert
   hat gewonnen, weil er auch bisher gewonnen hat. Ersetzt: gap: var(--ak-sp-4) -> var(--ak-sp-3) */
.ak-pub-footer-unten {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ak-sp-3);
  flex-wrap: wrap;
  margin-top: var(--ak-sp-6);
  padding-top: var(--ak-sp-4);
  border-top: 1px solid var(--ak-line-soft);
  font-size: var(--ak-fs-meta);
  color: var(--ak-ink-2);
}

.ak-pub-footer-unten p { margin: 0;
}

/* Hier lagen die Regeln der Fuss-Credit-Zeile (.ak-pub-credit).
   Der Eigentuemer hat den Credit samt externem Link am 07.09.2026
   gestrichen. */

/* ══ LERNWEG ════════════════════════════════════════════════════════════
   Ergänzt mit der Produktentscheidung vom 29.07.2026: aus dem
   Kursverkauf wird der Lernweg der Plattform.

   Die Kurskarten-Klassen (.ak-pub-kurs, .ak-pub-fakten, .ak-pub-preis)
   bleiben vorerst stehen — sie tragen jetzt die Stufenkarten. Entfernt
   werden sie erst, wenn nachgewiesen ist, dass sie niemand mehr liest. */
/* Stufenkarte als ganzflächiger Link auf der Startseite. */
.ak-pub-kurs--link {
  text-decoration: none; color: inherit;
  transition: border-color var(--ak-t-toggle) var(--ak-ease),
              box-shadow var(--ak-t-toggle) var(--ak-ease);
}

.ak-pub-kurs--link:hover {
  color: inherit;
  box-shadow: var(--ak-sh-card-lg);
}

.ak-pub-weg-stufe {
  position: relative;
  display: grid; gap: var(--ak-sp-4);
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: start;
}

.ak-pub-weg-stufe > .ak-level {
  width: 56px; height: 56px;
  border-radius: var(--ak-r-opt);
  font-size: var(--ak-fs-2xl);
  place-self: start;
}

/* Verbindungslinie zwischen den Stufen. Beim letzten Eintrag entfällt sie
   — der Weg endet, er läuft nicht ins Leere. */
.ak-pub-weg-stufe:not(:last-child)::before {
  content: ""; position: absolute;
  left: 27px; top: 64px; bottom: calc(var(--ak-sp-5) * -1);
  width: 2px; background: var(--ak-line);
}

.ak-pub-weg-karte {
  display: grid; gap: var(--ak-sp-3);
  justify-items: start;
  padding: var(--ak-pad-card);
  background: var(--ak-surface);
  border: 1px solid var(--ak-line);
  border-inline-start: 5px solid var(--ak-line-strong);
  border-radius: var(--ak-r-card);
  box-shadow: var(--ak-sh-card);
}

.ak-pub-weg-karte > * { margin: 0;
}

@media (max-width: 560px) {
.ak-pub-weg-stufe { grid-template-columns: 1fr; }
  .ak-pub-weg-stufe::before { display: none; }
}

/* Kopfzeile der Stufen-Detailseite: Abzeichen neben dem Eyebrow. */
.ak-pub-stufe-kopf {
  display: flex; align-items: center; gap: var(--ak-sp-3);
  margin: 0;
}

/* Themen und Übungsarten als Marken-Wolke. Eine Liste, damit die Anzahl
   für Vorleseprogramme erkennbar bleibt — die Punkte werden nur optisch
   entfernt. */
.ak-pub-marken {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--ak-sp-2);
}

/* Grammatikpunkte als schlichte Liste mit Trennlinien. */
.ak-pub-punkte {
  list-style: none; margin: 0; padding: 0;
  display: grid;
}

.ak-pub-punkte li {
  padding-block: 8px;
  border-top: 1px solid var(--ak-line-soft);
  font-size: var(--ak-fs-body-sm);
}

.ak-pub-punkte li:first-child { border-top: 0;
}

/* Hakenliste auf dunklem Grund — im „Was es nicht ist"-Panel. */
/* Abschlusskarte der Startseite: zentriert, mit Markenzeichen. */
.ak-pub-abschluss {
  display: grid; justify-items: center; text-align: center;
  gap: var(--ak-sp-4);
  max-width: 640px; margin-inline: auto;
}

.ak-pub-abschluss > * { margin: 0;
}

.ak-pub-abschluss .ak-ic--jar { color: var(--ak-accent);
}

/* ══ Kopfzeile nach der Referenz ═══════════════════════════════════════
   Gemessen im Prototyp bei 1440: Kopf 84 px hoch, Inhaltsspalte 1200 px
   breit, rechts „Giriş yap" als Textknopf (40 px, r12) und „Ücretsiz
   başla" als dunkle Pille (44 px, r12). Vorher: 68 px Kopf, 1280 px
   Spalte, ein einziger Knopf — und der zeigte auf ein mailto:. */
/* ZUSAMMENGEFUEHRT (M5b-2): diese Regel stand doppelt — hier und in design-referenz.css, die zuletzt lud und deshalb gewann. Beide sind jetzt EINE Regel. Aus der Referenzschicht uebernommen und damit massgeblich: align-items, display, flex, gap, justify-content, margin-left. Ersetzt wurden die frueheren Werte: display: inline-flex · align-items: center · gap: var(--ak-sp-2) · flex: none. */
.ak-pub-kopf-aktionen {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex: 0 0 auto;
  justify-content: flex-end;
}

/* ZUSAMMENGEFUEHRT (M5b-2): diese Regel stand doppelt — hier und in
   design-referenz.css, die zuletzt lud und deshalb gewann. Beide sind
   jetzt EINE Regel. Aus der Referenzschicht uebernommen und damit
   massgeblich: background, border-radius, color, font-size, font-weight, min-height, padding, white-space.
   Ersetzt wurden die frueheren Werte: min-height: 40px · padding: 11px 16px · border-radius: var(--ak-r-btn) · font-size: 14.5px · font-weight: 600 · color: var(--ak-ink). */
.ak-pub-anmelden {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  background: none;
  padding: 11px 16px;
  border-radius: var(--ak-r-input);
  font-size: var(--ak-fs-md);
  font-weight: 600;
  color: var(--ak-ink);
  white-space: nowrap;
  min-height: 0;
}

.ak-pub-anmelden:hover { background: var(--ak-surface-warm);
}

/* ══ Preise ════════════════════════════════════════════════════════════
   Zwei Karten nebeneinander, die Premium-Karte mit dunklem Rahmen —
   dieselbe Kartensprache wie in der App, keine zweite Bibliothek. */
/* ZUSAMMENGEFUEHRT (M5b-2): diese Regel stand doppelt — hier und in design-referenz.css, die zuletzt lud und deshalb gewann. Beide sind jetzt EINE Regel. Aus der Referenzschicht uebernommen und damit massgeblich: display, gap, grid-template-columns, margin-bottom. Ersetzt wurden die frueheren Werte: display: grid · gap: var(--ak-sp-4) · grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)). */
.ak-pub-plaene {
  align-items: start;
  display: grid;
  gap: 16px;
  margin-bottom: 36px;
  grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
}

/* ZUSAMMENGEFUEHRT (M5b-2): diese Regel stand doppelt — hier und in
   design-referenz.css, die zuletzt lud und deshalb gewann. Beide sind
   jetzt EINE Regel. Aus der Referenzschicht uebernommen und damit
   massgeblich: align-content, background, border, border-radius, display, padding, position.
   Ersetzt wurden die frueheren Werte: display: grid · align-content: start. */
.ak-pub-plan {
  gap: var(--ak-sp-3);
  background: var(--ak-surface);
  border: 1px solid var(--ak-line);
  border-radius: var(--ak-r-card-lg);
  padding: clamp(22px, 2.6vw, 30px);
  position: relative;
  display: block;
  align-content: initial;
}

/* ZUSAMMENGEFUEHRT (M5b-2): diese Regel stand doppelt — hier und in
   design-referenz.css, die zuletzt lud und deshalb gewann. Beide sind
   jetzt EINE Regel. Aus der Referenzschicht uebernommen und damit
   massgeblich: background, border.
   Die frueheren Werte betrafen andere Eigenschaften. */
.ak-pub-plan--hervor {
  border-color: var(--ak-ink);
  background: var(--ak-purple-1);
  border: 2px solid var(--ak-accent);
}

/* ZUSAMMENGEFUEHRT (M5b-2): diese Regel stand doppelt — hier und in
   design-referenz.css, die zuletzt lud und deshalb gewann. Beide sind
   jetzt EINE Regel. Aus der Referenzschicht uebernommen und damit
   massgeblich: color, font-family, font-size, font-weight, letter-spacing, margin, text-transform.
   Ersetzt wurden die frueheren Werte: margin: 0 · font-family: var(--ak-font-display) · font-size: 17px · font-weight: 700 · color: var(--ak-ink). */
.ak-pub-plan-name {
  display: flex;
  align-items: center;
  gap: var(--ak-sp-2);
  flex-wrap: wrap;
  font-family: inherit;
  font-size: var(--ak-fs-body);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ak-ink);
  margin: 0 0 8px;
}

/* ZUSAMMENGEFUEHRT (M5b-2): diese Regel stand doppelt — hier und in
   design-referenz.css, die zuletzt lud und deshalb gewann. Beide sind
   jetzt EINE Regel. Aus der Referenzschicht uebernommen und damit
   massgeblich: background, border-radius, color, font-size, font-weight, left, letter-spacing, padding, position, text-transform, top, transform, white-space.
   Ersetzt wurden die frueheren Werte: padding: 4px 10px · border-radius: var(--ak-r-tag) · background: var(--ak-accent-soft) · color: var(--ak-accent-deep) · font-size: var(--ak-fs-micro) · font-weight: 700. */
.ak-pub-plan-abzeichen {
  font-family: var(--ak-font-tr);
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ak-accent);
  color: var(--ak-on-fill);
  padding: 6px 14px;
  border-radius: var(--ak-r-pill);
  font-size: var(--ak-fs-micro);
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0;
  text-transform: none;
}

/* ZUSAMMENGEFUEHRT (M5b-2): diese Regel stand doppelt — hier und in
   design-referenz.css, die zuletzt lud und deshalb gewann. Beide sind
   jetzt EINE Regel. Aus der Referenzschicht uebernommen und damit
   massgeblich: align-items, color, display, font-family, font-size, font-weight, gap, letter-spacing, margin.
   Ersetzt wurden die frueheren Werte: margin: 0 · font-family: var(--ak-font-display) · font-size: 38px · font-weight: 700 · letter-spacing: -1px · color: var(--ak-ink). */
.ak-pub-plan-betrag {
  line-height: 1.1;
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0 0 6px;
  /* KORRIGIERT MIT M5c (01.08.2026) auf Grundlage der Browsermessung.
     Zwischenstand war --ak-fs-h1. Gemessen faellt das auf dem Telefon auf
     24px, weil h1 ein clamp(24px, 3vw, 32px) ist — fuer den zentralen
     Preisbetrag zu klein. --ak-fs-5xl haelt konstant 32px und gehoert
     ebenso zur SSOT. Kein neuer Token, kein eigener Wert. */
  font-family: var(--ak-font-display);
  font-weight: 700;
  font-size: var(--ak-fs-5xl);
  letter-spacing: -1px;
  color: var(--ak-ink);
}

/* ZUSAMMENGEFUEHRT (M5b-2): diese Regel stand doppelt — hier und in
   design-referenz.css, die zuletzt lud und deshalb gewann. Beide sind
   jetzt EINE Regel. Aus der Referenzschicht uebernommen und damit
   massgeblich: color, font-family, font-size, font-weight, letter-spacing.
   Ersetzt wurden die frueheren Werte: font-family: var(--ak-font-tr) · font-size: var(--ak-fs-body-sm) · font-weight: 600 · letter-spacing: 0 · color: var(--ak-ink-2). */
.ak-pub-plan-takt {
  margin-left: 8px;
  font-family: var(--ak-font-body);
  font-size: var(--ak-fs-sm);
  font-weight: 600;
  color: var(--ak-ink-2);
  letter-spacing: 0;
}

/* ZUSAMMENGEFUEHRT (M5b-2): diese Regel stand doppelt — hier und in
   design-referenz.css, die zuletzt lud und deshalb gewann. Beide sind
   jetzt EINE Regel. Aus der Referenzschicht uebernommen und damit
   massgeblich: color, font-size, line-height, margin.
   Ersetzt wurden die frueheren Werte: margin: 0 · font-size: var(--ak-fs-body-sm) · color: var(--ak-ink-2). */
.ak-pub-plan-zweit {
  font-size: var(--ak-fs-xs);
  line-height: 1.55;
  color: var(--ak-ink-2);
  margin: 0 0 20px;
}

/* LAUNCH-AKTION (11.09.2026) — sie steht UNTER dem regulaeren Betrag
   und ergaenzt ihn, statt ihn zu ersetzen. Wer nur den Aktionspreis
   gross saehe, hielte ihn fuer den Preis. Deshalb kleiner Satz,
   ruhige Farbe, und das Abzeichen nur als Marke davor — kein Signalrot,
   keine Verknappungsoptik. */
.ak-pub-plan-aktion {
  font-size: var(--ak-fs-xs);
  line-height: 1.5;
  color: var(--ak-ink-2);
  margin: 0 0 10px;
}

/* Dieselben Token wie das vorhandene Planabzeichen daneben — drei
   eigene erfunden zu haben (`--ak-flaeche-2`, `--ak-ink-1`,
   `--ak-fs-xxs`) war ein Fehler, den `product-design-base-tests`
   zu Recht gemeldet hat: ein var() auf ein undeklariertes Token
   faellt still auf gar nichts zurueck. */
.ak-pub-plan-aktion-marke {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 8px;
  border-radius: var(--ak-r-pill);
  background: var(--ak-bg);
  color: var(--ak-ink-2);
  font-size: var(--ak-fs-micro);
  font-weight: 700;
  white-space: nowrap;
}

/* ZUSAMMENGEFUEHRT (M5b-2): diese Regel stand doppelt — hier und in
   design-referenz.css, die zuletzt lud und deshalb gewann. Beide sind
   jetzt EINE Regel. Aus der Referenzschicht uebernommen und damit
   massgeblich: display, gap, list-style, margin, padding.
   Ersetzt wurden die frueheren Werte: list-style: none · margin: 0 · padding: 0 · display: grid · gap: 10px. */
.ak-pub-plan-liste {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  gap: 10px;
}

/* ZUSAMMENGEFUEHRT (M5b-2): diese Regel stand doppelt — hier und in
   design-referenz.css, die zuletzt lud und deshalb gewann. Beide sind
   jetzt EINE Regel. Aus der Referenzschicht uebernommen und damit
   massgeblich: align-items, color, display, font-size, gap, line-height.
   Ersetzt wurden die frueheren Werte: display: grid · gap: 10px · align-items: start · font-size: var(--ak-fs-body-sm) · line-height: 1.55 · color: var(--ak-ink-2). */
.ak-pub-plan-liste li {
  grid-template-columns: 17px 1fr;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--ak-fs-sm);
  line-height: 1.5;
  color: var(--ak-ink);
}

/* ZUSAMMENGEFUEHRT (M5b-2): diese Regel stand doppelt — hier und in
   design-referenz.css, die zuletzt lud und deshalb gewann. Beide sind
   jetzt EINE Regel. Aus der Referenzschicht uebernommen und damit
   massgeblich: color, flex, margin-top.
   Ersetzt wurden die frueheren Werte: margin-top: 3px · color: var(--ak-ok-text). */
.ak-pub-plan-liste .ak-ic-svg {
  flex: 0 0 auto;
  margin-top: 3px;
  color: var(--ak-a2);
}

/* ZUSAMMENGEFUEHRT (M5b-2): diese Regel stand doppelt — hier und in
   design-referenz.css, die zuletzt lud und deshalb gewann. Beide sind
   jetzt EINE Regel. Aus der Referenzschicht uebernommen und damit
   massgeblich: color, font-size, margin, text-align.
   Ersetzt wurden die frueheren Werte: margin: 0 · font-size: var(--ak-fs-meta) · color: var(--ak-ink-3). */
.ak-pub-plan-fuss {
  font-size: var(--ak-fs-meta);
  color: var(--ak-ink-2);
  margin: 12px 0 0;
  text-align: center;
}

/* Zwei kurze Zusagen unter den Hero-Knoepfen — Referenz: „Kredi kartı
   gerekmez · Türkçe arayüz". Sie stehen dort, wo der Zweifel entsteht. */
.ak-pub-hero-punkte {
  list-style: none; margin: var(--ak-sp-4) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--ak-sp-2) var(--ak-sp-5);
}

.ak-pub-hero-punkte li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--ak-fs-body-sm); color: var(--ak-ink-2);
}

.ak-pub-hero-punkte .ak-ic-svg { color: var(--ak-ok-text); flex: none;
}

.ak-pub-footer-unten .ak-pub-lang { margin-left: auto;
}

@media (max-width: 767px) {
.ak-pub-footer-unten { flex-direction: column; align-items: flex-start; }
  .ak-pub-footer-unten .ak-pub-lang { margin-left: 0; }
}

/* Der Login-Eintrag existiert zweimal im Markup: oben in der Kopfleiste
   (ab 768 px) und als erster Eintrag im Menue (darunter). Sichtbar ist
   immer genau einer. */
.ak-pub-nav-anmelden { display: none;
}

@media (max-width: 767px) {
.ak-pub-nav-anmelden { display: block; }
  .ak-pub-anmelden { display: none; }
  /* STILLGELEGT MIT M5b-2: `flex-wrap: nowrap`, `gap: var(--ak-sp-2)`
     und `font-size: var(--ak-fs-body)` standen hier, haben aber nie
     gewirkt — design-referenz.css setzte beides ohne Medienabfrage und
     lud spaeter. Gemessen waeren daraus bei 390 px ein Abstand von 8
     statt 10 px und eine Wortmarke in 15 statt 16 px geworden. Auch das
     ist keine Folge der Zusammenfuehrung, sondern eine tote Regel, die
     wieder auftaucht. Erhalten bleibt der heutige Zustand. */
  .ak-pub-kopf-aktionen { margin-left: auto; }
}

/* Stufenkarten: echte Mengen unter dem Anspruch. Stufen ohne
   veroeffentlichte Lektion sind KEIN Link — ein Klick, der auf eine
   leere Seite fuehrt, ist schlimmer als ein sichtbarer Hinweis. */
.ak-pub-kurs-zahlen {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  margin-top: auto; padding-top: var(--ak-sp-3);
  font-size: var(--ak-fs-meta); font-weight: 600; color: var(--ak-ink-2);
  font-variant-numeric: tabular-nums;
}

.ak-pub-kurs-frei { color: var(--ak-ok-text);
}

.ak-pub-kurs-bald { color: var(--ak-ink-3); font-weight: 600;
}

.ak-pub-kurs--bald { cursor: default;
}

.ak-pub-kurs--bald .ak-pub-kurs-titel { color: var(--ak-ink-2);
}

/* ══ Funktionsstreifen unter dem Hero ═════════════════════════════════
   Referenz: fuenf Kacheln in einer weissen Leiste, Symbol links,
   Bezeichnung fett, Zusatz darunter klein. */
/* ZUSAMMENGEFUEHRT (M5b-2): diese Regel stand doppelt — hier und in design-referenz.css, die zuletzt lud und deshalb gewann. Beide sind jetzt EINE Regel. Aus der Referenzschicht uebernommen und damit massgeblich: background, border, padding. Ersetzt wurden die frueheren Werte: background: var(--ak-surface). */
.ak-pub-streifen-sec {
  border-block: 1px solid var(--ak-line);
  background: none;
  border: 0;
  padding: 24px 0 0;
}

/* ZUSAMMENGEFUEHRT (M5b-2): diese Regel stand doppelt — hier und in
   design-referenz.css, die zuletzt lud und deshalb gewann. Beide sind
   jetzt EINE Regel. Aus der Referenzschicht uebernommen und damit
   massgeblich: background, border, border-radius, display, gap, grid-template-columns, list-style, margin, overflow, padding.
   Ersetzt wurden die frueheren Werte: list-style: none · margin: 0 · padding: var(--ak-sp-4) 0 · display: grid · gap: var(--ak-sp-4) · grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)). */
/* DIE SPALTENZAHL WIRD IN ABSCHNITT 30d GESETZT, NICHT HIER GERECHNET.
   Hier stand `repeat(auto-fit, minmax(min(190px,100%), 1fr))`. Das ergab
   bei fuenf Kacheln je nach Breite 2+2+1 oder 4+1 — in beiden Faellen
   eine Kachel allein in der letzten Reihe. Die Zeile blieb nach der
   Korrektur als tote Angabe stehen; das faellt beim naechsten Lesen auf
   die Fuesse. */
.ak-pub-streifen {
  display: grid;
  gap: 0;
  background: var(--ak-surface);
  border: 1px solid var(--ak-line);
  border-radius: var(--ak-r-card);
  padding: 0;
  margin: 0;
  list-style: none;
  overflow: hidden;
}

/* ZUSAMMENGEFUEHRT (M5b-2): diese Regel stand doppelt — hier und in
   design-referenz.css, die zuletzt lud und deshalb gewann. Beide sind
   jetzt EINE Regel. Aus der Referenzschicht uebernommen und damit
   massgeblich: align-items, border-right, display, gap, padding.
   Ersetzt wurden die frueheren Werte: display: flex · align-items: center · gap: var(--ak-sp-3). */
.ak-pub-streifen li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-right: 1px solid var(--ak-line);
}

/* ZUSAMMENGEFUEHRT (M5b-2): diese Regel stand doppelt — hier und in
   design-referenz.css, die zuletzt lud und deshalb gewann. Beide sind
   jetzt EINE Regel. Aus der Referenzschicht uebernommen und damit
   massgeblich: color, font-size, font-weight.
   Ersetzt wurden die frueheren Werte: font-size: var(--ak-fs-body-sm) · font-weight: 700 · color: var(--ak-ink). */
.ak-pub-streifen strong {
  display: block;
  font-size: var(--ak-fs-xs);
  font-weight: 700;
  color: var(--ak-ink);
}

/* ZUSAMMENGEFUEHRT (M5b-2): diese Regel stand doppelt — hier und in
   design-referenz.css, die zuletzt lud und deshalb gewann. Beide sind
   jetzt EINE Regel. Aus der Referenzschicht uebernommen und damit
   massgeblich: color, font-size.
   Ersetzt wurden die frueheren Werte: font-size: var(--ak-fs-meta) · color: var(--ak-ink-2). */
.ak-pub-streifen em {
  display: block;
  font-style: normal;
  font-size: var(--ak-fs-meta);
  color: var(--ak-ink-3);
  color: var(--ak-ink-2);
}

/* ══ Echte Aufgabe im dunklen Panel ═══════════════════════════════════
   Die Aufgabe ist NICHT nachgebaut: Frage, Optionen, richtige Antwort
   und Erklaerung kommen unveraendert aus a1-u06-l01. Ohne JavaScript
   bleibt sie lesbar und die Loesung sichtbar — kein totes Bedienelement,
   das nur so tut. */
.ak-pub-demo { display: grid; gap: var(--ak-sp-3);
}

/* M2: --ak-a1-1 gab es nie — weder im Bestand noch in der SSOT. Die
   Regel griff ins Leere, die Farbe wurde geerbt. Die SSOT faerbt einen
   Eyebrow auf dunklem Grund mit --ak-accent-on-dark (6,1:1 auf Tinte);
   genau das steht jetzt hier. Der Kontext in design-base.css setzt
   denselben Wert fuer jeden Eyebrow auf dunkler Flaeche — diese Klasse
   bleibt fuer den Fall, dass ein Eyebrow invers gewuenscht ist, ohne
   dass die Flaeche selbst als dunkel ausgezeichnet wird. */
.ak-eyebrow--invers { color: var(--ak-accent-on-dark);
}

.ak-pub-demo-titel, .ak-pub-demo-text { color: var(--ak-ink-inverse);
}

.ak-pub-demo-text { opacity: .82; max-width: 62ch;
}

.ak-pub-demo-karte {
  margin-top: var(--ak-sp-3);
  padding: var(--ak-sp-5);
  background: var(--ak-surface);
  border-radius: var(--ak-r-card);
  display: grid; gap: var(--ak-sp-3);
}

.ak-pub-demo-frage {
  margin: 0;
  font-family: var(--ak-font-display);
  font-size: var(--ak-fs-2xl); font-weight: 700; line-height: 1.35; color: var(--ak-ink);
}

.ak-pub-demo-optionen { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px;
}

/* ZUSAMMENGEFUEHRT (M5b-2): diese Regel stand doppelt — hier und in
   design-referenz.css, die zuletzt lud und deshalb gewann. Beide sind
   jetzt EINE Regel. Aus der Referenzschicht uebernommen und damit
   massgeblich: background, border, min-height, padding.
   Ersetzt wurden die frueheren Werte: min-height: 52px · padding: 14px 18px · border: 1px solid var(--ak-line) · background: var(--ak-bg). */
.ak-pub-demo-optionen li {
  display: flex;
  align-items: center;
  gap: 13px;
  border-radius: var(--ak-r-opt);
  font-size: var(--ak-fs-body);
  color: var(--ak-ink);
  padding: 0;
  border: 0;
  background: none;
  min-height: 0;
}

.ak-pub-demo-optionen li.ist-richtig {
  border-color: var(--ak-ok-text);
  background: var(--ak-ok-surface);
}

.ak-pub-demo-marke {
  display: inline-grid; place-items: center; flex: none;
  width: 26px; height: 26px; border-radius: var(--ak-r-pill);
  background: var(--ak-surface); color: var(--ak-ink-3);
  font-size: var(--ak-fs-meta); font-weight: 700;
}

.ak-pub-demo-ok { margin-left: auto; color: var(--ak-ok-text); display: inline-flex;
}

.ak-pub-demo-erklaerung {
  margin: 0; padding-top: var(--ak-sp-3);
  border-top: 1px solid var(--ak-line-soft);
  font-size: var(--ak-fs-body-sm); line-height: 1.6; color: var(--ak-ink-2);
}

.ak-pub-demo-quelle { margin: 0; font-size: var(--ak-fs-meta); color: var(--ak-ink-inverse); opacity: .7;
}

/* ══ Lektionsausschnitte ══════════════════════════════════════════════ */
.ak-pub-probe-de {
  font-family: var(--ak-font-de);
  font-size: var(--ak-fs-body); font-weight: 600; color: var(--ak-ink);
  margin: 0 0 4px;
}

.ak-pub-probe-zeile { display: grid; gap: 2px; margin: 0 0 var(--ak-sp-3);
}

.ak-pub-probe-wer {
  font-size: var(--ak-fs-micro); font-weight: 700; letter-spacing: var(--ak-ls-micro);
  text-transform: uppercase; color: var(--ak-ink-3);
}

.ak-pub-probe-hinweis { color: var(--ak-ink-3);
}
/* Block A Punkt 4: der Hinweis erst auf Klick. */
.ak-pub-probe-tipp { margin-top: var(--ak-sp-2); }
.ak-pub-probe-tipp > summary { cursor: pointer; color: var(--ak-ink-2); text-decoration: underline; text-underline-offset: 3px; }
.ak-pub-probe-tipp > summary:focus-visible { outline: 2px solid var(--ak-ink-2); outline-offset: 2px; }

/* Helle Fassung des Aussage-Panels: dieselbe Flaeche, aber ohne die
   dunkle Wucht — die bleibt der echten Aufgabe vorbehalten. */
.ak-pub-panel--hell {
  background: var(--ak-surface);
  color: var(--ak-ink);
  border: 1px solid var(--ak-line);
}

.ak-pub-panel--hell .ak-h2, .ak-pub-panel--hell .ak-body-lg { color: var(--ak-ink);
}

.ak-pub-panel--hell .ak-eyebrow { color: var(--ak-accent-deep);
}

/* ══ Kontrast- und Groessenkorrekturen aus der Abnahme (31.07.2026) ════
   Gemessen ueber alle oeffentlichen Seiten bei 360–1440. Der Hilfston
   --ak-ink-3 (#8E93A4) ergibt auf warmem Grund 3,06:1 und reicht damit
   fuer normalen Text nicht (AA verlangt 4,5:1). Er bleibt fuer
   Dekoratives; alles, was Information traegt, geht auf --ak-ink-2. */
.ak-pub-kurs-bald, .ak-pub-plan-fuss, .ak-pub-probe-wer, .ak-pub-probe-hinweis { color: var(--ak-ink-2);
}

/* Das helle Aussage-Panel hatte den Abschlusssatz noch in der Farbe der
   dunklen Fassung: 1,89:1. */
.ak-pub-panel--hell .ak-body-sm { color: var(--ak-ink-2);
}

/* ── Bedienziele der oeffentlichen Huelle — M5a (01.08.2026) ──────────
   Der gemeinsame §14c-Block in design-components.css deckt Anker mit
   ak-Klasse, Listen- und Absatzlinks und Aufklappzeilen ab. Was er nicht
   erreicht, sind die zwei Faelle, in denen ein klassenloser Anker DIREKT
   in einem eigenen Behaelter der oeffentlichen Huelle steht. Sie stehen
   hier, nicht im gemeinsamen Block: es sind unsere Bauteile, nicht die
   der SSOT.

   Gemessen vor der Aenderung ueber zwoelf oeffentliche Seiten bei 390 und
   768 px: 593 Ziele unter 44 x 44 px. Davon 543 Listen- und
   Absatzlinks, 48 Wortmarken, 2 Zuruecklinks. */
@media (pointer: coarse), (max-width: 1259px) {
/* Sprachumschalter: zwei kurze Anker in einer Pille. Die Pille selbst
     traegt den Innenabstand, die Anker bekommen die Flaeche. */
  .ak-pub-lang a {
    min-height: var(--ak-tap-min); min-width: var(--ak-tap-min);
    display: inline-flex; align-items: center; justify-content: center;
  }

  /* Die sozialen Verweise der Fusszeile sind klassenlose Anker in einer
     Reihe. */
  .ak-pub-sozial a { min-height: var(--ak-tap-min); min-width: var(--ak-tap-min);
    display: inline-flex; align-items: center; justify-content: center; }

  /* Die Reiterleiste der Rechtsseiten ist NAVIGATION zwischen sechs
     eigenstaendigen Dokumenten, kein Widget — jeder Reiter ist ein
     echter Anker und muss die Flaeche haben. Gemessen waren es 41 px. */
  .ak-pub-reiter a { min-height: var(--ak-tap-min); display: inline-flex; align-items: center; }

  /* Wortmarke und Zuruecklink werden vom gemeinsamen Block erfasst
     (a[class*="ak-"]); die Breite braucht dort niemand, hier schon:
     eine Wortmarke ist breit genug, ein Zuruecklink nicht immer. */
  .ak-pub-zurueck { min-height: var(--ak-tap-min); display: inline-flex; align-items: center; }

  /* SPEZIFITAETSFALLE IM FUSSBEREICH (nachgetragen 16.09.2026).
     `.ak-pub-footer-spalte a` (0,1,1) setzt display:flex und gap:10px.
     `.ak li > a` aus design-components.css (0,1,2) setzt darueber
     display:inline-block und line-height:44px — und gewinnt. In einem
     inline-block wirkt `gap` nicht: Symbol und Text lagen aneinander
     (gemessen Symbolkante 40, Textkante 40).

     GRID, NICHT FLEX: der Text ist ein nackter Textknoten. Als
     Flex-Element bekaeme er `min-width: auto` und koennte nicht unter
     seine Breite — `info@almancakumbaram.net` lief gemessen ueber die
     Spaltenkante. Als Gitterspur `minmax(0, 1fr)` darf er schrumpfen.

     Die Flaeche bleibt: min-height 44 px steht weiter. Nur die
     Zeilenhoehe kehrt auf einen Schriftwert zurueck — mit 44 px waere
     ein zweizeiliger Verweis 88 px hoch geworden. */
  .ak .ak-pub-footer-spalte li > a {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    align-items: center; gap: 10px;
    line-height: 1.35; min-height: var(--ak-tap-min);
  }
}

@media (max-width: 767px) {
/* Auf dem Telefon darf die Kopfzeile umbrechen duerfen, sonst schiebt
     der lange Markenname die Aktionen aus dem Bild. */
  .ak-pub-header-innen { flex-wrap: wrap; padding: 14px 18px; }
}

.ak-pub-marke .ak-marke-zeichen { width: 32px; height: auto;
}

.ak-pub-marke .ak-marke-wort { height: 15px;
}

/* Auf schmalen Telefonen eine Stufe kleiner. Die Wortmarke ist 11,4-mal
   so breit wie hoch; bei 15 px waeren das 172 px — neben der Kauf-Pille
   bliebe fuer das Menue nichts uebrig. */
@media (max-width: 430px) {
  .ak-pub-marke .ak-marke-wort { height: 12px; }
  .ak-pub-marke .ak-marke-zeichen { width: 28px; }
}

/* Navigation: mittig, schmale Ziele, 14/500 in #5C6175, Radius 9.
   NUR ab 768 px — darunter uebernimmt das Menue aus design-public.css.
   Ohne diese Grenze gewann die Referenzschicht (sie laedt spaeter) gegen
   die Regel, die die Navigation auf dem Telefon einklappt: bei 360 px
   stand die ganze Leiste nebeneinander und erzeugte eine waagerechte
   Scrollleiste auf JEDER Seite. */
@media (min-width: 768px) {
.ak-pub-nav {
    display: flex; align-items: center; justify-content: center;
    flex: 1 1 auto; min-width: 0; overflow-x: hidden;
  }
  .ak-pub-nav ul {
    display: flex; align-items: center; justify-content: center;
    gap: 2px; flex-wrap: nowrap; margin: 0; padding: 0; list-style: none;
  }
}

.ak-pub-header .ak-btn--primary {
  background: var(--ak-ink); color: var(--ak-on-fill);
  padding: 13px 22px; border-radius: var(--ak-r-input);
  font-size: var(--ak-fs-md); font-weight: 600; border: 0;
  box-shadow: var(--ak-sh-button);
}

/* H1 exakt: Outfit 700, clamp(40px,5vw,64px), 1.04, -1.5px, 20px unten */
/* 25.09.2026 (1. Berater): kein negativer Buchstabenabstand mehr. Bei
   -1.5px rueckten in Outfit 700 die tuerkischen Woerter („Türkçe",
   „öğren", „açıklamalarla") sichtbar zusammen. Staerke bleibt 700. */
.ak-pub-hero .ak-hero, .ak-hero {
  font-family: var(--ak-font-display);
  font-weight: 700; font-size: clamp(40px, 5vw, 64px);
  line-height: 1.04; letter-spacing: 0;
  margin: 0 0 20px; color: var(--ak-ink); text-wrap: balance;
}

.ak-pub-sec:last-of-type { padding-bottom: 80px;
}

.ak-pub-streifen li:last-child { border-right: 0;
}

.ak-pub-footer > .ak-pub-breit { padding: 52px clamp(18px, 4vw, 40px) 28px;
}

.ak-pub-footer-marke .ak-pub-marke { margin-bottom: 14px;
}

.ak-pub-footer-marke .ak-pub-marke .ak-marke-zeichen { width: 30px; height: auto;
}

.ak-pub-footer-marke .ak-pub-marke .ak-marke-wort { height: 14px;
}

/* BEWUSSTE ABWEICHUNG VON DER REFERENZ.
   Dort steht dieser Satz in var(--ak-ink-3). Gemessen ergibt das auf Weiss
   3,06:1 — unter der Schwelle 4,5:1 fuer normalen Text. Groesse,
   Zeilenhoehe und Abstand bleiben exakt wie in der Vorlage; nur der Ton
   geht eine Stufe dunkler. */
.ak-pub-footer-marke p {
  font-size: var(--ak-fs-xs); line-height: 1.6; color: var(--ak-ink-2); margin: 0 0 16px;
}

/* Soziale Zeichen — in der Referenz drei quadratische Felder 36x36 */
.ak-pub-sozial { display: flex; gap: 8px;
}

.ak-pub-sozial a {
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: var(--ak-r-icon-sm);
  background: var(--ak-bg); border: 1px solid var(--ak-line); color: var(--ak-ink-2);
}

.ak-pub-sozial a:hover { color: var(--ak-ink); border-color: var(--ak-ink);
}

@media (max-width: 900px) {
.ak-pub-streifen li { border-right: 0; border-bottom: 1px solid var(--ak-line); }
  .ak-pub-streifen li:last-child { border-bottom: 0; }
}

/* ── Seitenkopf ── Referenz: erste Sektion auf levels/features/pricing/
   about/contact/faq. Aufbau immer gleich: kleine versale Beschriftung,
   grosse Ueberschrift, Fliesstext — in einer schmalen Spalte.
     levels/features   max-width:640; margin-bottom:36–40
     pricing           text-align:center; max-width:620; margin:0 auto 20
     about             margin-bottom:36
     contact           margin-bottom:32
     faq               margin-bottom:30                                  */
.ak-pub-kopfblock { max-width: 640px; margin: 0 0 36px;
}

.ak-pub-kopfblock--mitte { max-width: 620px; margin: 0 auto 20px; text-align: center;
}

/* BEWUSSTE ABWEICHUNG VON DER REFERENZ (Kontrast)
   Der Prototyp faerbt diese Beschriftung var(--ak-ink-3); auf dem cremefarbenen
   Grund sind das 2,87:1 — WCAG AA verlangt 4,5:1. Groesse, Laufweite und
   Abstand bleiben unveraendert, nur der Ton wird dunkler. Dieselbe
   Entscheidung wie bei der Markenzeile in der Fusszeile. */
.ak-pub-kopfblock .ak-eyebrow {
  font-size: var(--ak-fs-micro); font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--ak-ink-2); margin: 0 0 10px;
}

.ak-pub-kopfblock p {
  font-size: var(--ak-fs-base-lg); line-height: 1.65; color: var(--ak-ink-2); margin: 0;
}

/* Ueberschriftenstufen der Referenz, je Seitentyp */
.ak-h-xl { font-family: var(--ak-font-display); font-weight: 700;
  font-size: clamp(32px, 4.4vw, 52px); line-height: 1.06;
  letter-spacing: -1.4px; margin: 0 0 14px; color: var(--ak-ink); text-wrap: balance;
}

.ak-h-lg { font-family: var(--ak-font-display); font-weight: 700;
  font-size: clamp(30px, 4.2vw, 48px); line-height: 1.08;
  letter-spacing: -1.3px; margin: 0 0 14px; color: var(--ak-ink); text-wrap: balance;
}

.ak-h-md { font-family: var(--ak-font-display); font-weight: 700;
  font-size: clamp(28px, 4vw, 44px); line-height: 1.08;
  letter-spacing: -1.2px; margin: 0 0 14px; color: var(--ak-ink); text-wrap: balance;
}

.ak-h-sm { font-family: var(--ak-font-display); font-weight: 700;
  font-size: clamp(26px, 3.6vw, 38px); line-height: 1.1;
  letter-spacing: -1px; margin: 0 0 14px; color: var(--ak-ink);
}

/* Abschnittsueberschrift innerhalb einer Seite (Referenz: features)

   FARBE STILLGELEGT (M2, 01.08.2026) — kontrolliert, nicht ueberschrieben.
   Die Regel setzte color: var(--ak-ink). Auf hellen Abschnitten war das
   wirkungslos: .ak in design-base.css vererbt bereits genau diesen Wert
   ueber --ak-ink. Auf der dunklen Demokarte der Startseite dagegen
   gewann sie gegen den on-dark-Kontext — gleiche Spezifitaet (0,2,0),
   aber design-referenz.css laedt zuletzt. Ergebnis: Tinte auf Tinte,
   gemessen 1,00:1, die Ueberschrift war unsichtbar.

   Die Deklaration ist deshalb entfernt statt ueberboten. Auf hellen
   Flaechen aendert sich nichts (derselbe geerbte Wert), auf dunklen
   greift jetzt der Kontext aus design-base.css. Groesse, Gewicht und
   Laufweite der Referenz bleiben unangetastet. */
.ak-pub-sec .ak-h2 {
  font-family: var(--ak-font-display); font-weight: 700;
  font-size: clamp(22px, 2.6vw, 28px); line-height: 1.2;
  letter-spacing: -.8px; margin: 0 0 12px;
}

/* ── Kartenraster ── Referenz: gap 16, auto-fit ───────────────────────
   levels minmax(300) · about minmax(260) · contact minmax(300)
   pricing minmax(270)                                                  */
.ak-raster-16 { display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

.ak-raster-16--breit { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

/* Weisse Karte der Referenz: r22, 1px #EDE6DC, Polster 24–26 */
.ak-ref-karte {
  background: var(--ak-surface); border: 1px solid var(--ak-line); border-radius: var(--ak-r-card-lg);
  padding: 26px;
}

.ak-ref-karte h3, .ak-ref-karte-titel {
  font-family: var(--ak-font-display); font-weight: 700; font-size: var(--ak-fs-2xl);
  margin: 0 0 10px; color: var(--ak-ink);
}

.ak-ref-karte p { font-size: var(--ak-fs-md); line-height: 1.65; color: var(--ak-ink-2); margin: 0;
}

/* Hervorgehobenes Feld (Referenz: „Neden Kumbaram?" auf about) */
.ak-ref-akzentfeld {
  background: var(--ak-purple-2); border: 1px solid var(--ak-purple-border-1); border-radius: var(--ak-r-card-lg);
  padding: clamp(24px, 3vw, 34px);
}

.ak-ref-akzentfeld h2 {
  font-family: var(--ak-font-display); font-weight: 700; font-size: var(--ak-fs-3xl);
  margin: 0 0 16px; color: var(--ak-ink);
}

/* Reiterzeile der Rechtsseiten (Referenz: legal) */
/* DISPLAY UND SPALTEN STEHEN IN ABSCHNITT 33, NICHT HIER.
   Hier stand `display: flex; flex-wrap: wrap` — und genau das erzeugte
   das ungleiche Umbrechen (gemessen 7+1 bei 1280 px). Die Zeilen wurden
   ab Abschnitt 33 ueberschrieben und blieben als tote Angabe stehen. */
.ak-pub-reiter {
  background: var(--ak-surface); border: 1px solid var(--ak-line); border-radius: var(--ak-r-row);
  padding: 6px; margin: 0 0 24px;
}

.ak-pub-reiter a {
  padding: 9px 14px; border-radius: var(--ak-r-chip);
  font-size: var(--ak-fs-sm); font-weight: 600; color: var(--ak-ink-2); text-decoration: none;
}

.ak-pub-reiter a:hover { background: var(--ak-bg); color: var(--ak-ink);
}

.ak-pub-reiter a[aria-current="page"] { background: var(--ak-ink); color: var(--ak-on-fill);
}

/* Zentrierter Weg unter einem Abschnitt (Referenz: features, margin-top 40) */
.ak-pub-mitte-cta { display: flex; justify-content: center; margin-top: 40px;
}

/* Hilfethemen: schlichte Liste in der Karte */
.ak-pub-hilfe-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px;
}

.ak-pub-hilfe-liste li {
  font-size: var(--ak-fs-md); line-height: 1.6; color: var(--ak-ink-2);
  padding-left: 16px; position: relative;
}

.ak-pub-hilfe-liste li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 5px; height: 5px; border-radius: var(--ak-r-pill); background: var(--ak-accent);
}

.ak-pub-plan--hervor .ak-pub-plan-name { color: var(--ak-accent-deep);
}

.ak-pub-plan--hervor .ak-pub-plan-betrag { color: var(--ak-accent-deep);
}

.ak-pub-plan .ak-btn--block {
  width: 100%; padding: 15px; border-radius: var(--ak-r-input);
  font-size: var(--ak-fs-body); font-weight: 600;
}

.ak-pub-plan .ak-btn--secondary {
  background: var(--ak-surface); color: var(--ak-ink); border: 1.5px solid var(--ak-line);
}

/* ── Vergleichstafel ── Referenz: dritte Sektion auf route=pricing ─────
   Aussen eine weisse Karte r22 mit overflow:hidden; innen ein Raster
   2.1fr/1fr/1fr/1fr, das ab 560 px waagerecht rollt statt die Seite zu
   sprengen. Die Premium-Spalte ist durchgehend hinterlegt.             */
.ak-pub-vergleich {
  background: var(--ak-surface); border: 1px solid var(--ak-line); border-radius: var(--ak-r-card-lg);
  overflow: hidden;
}

.ak-pub-vergleich-kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; padding: 22px clamp(18px, 2.4vw, 26px) 18px;
}

.ak-pub-vergleich-kopf strong { font-size: var(--ak-fs-base-lg); font-weight: 700; color: var(--ak-ink);
}

.ak-pub-vergleich-kopf span { font-size: var(--ak-fs-meta); color: var(--ak-ink-2); font-weight: 600;
}

.ak-pub-vergleich-rollen { overflow-x: auto;
}

.ak-pub-vergleich-tafel {
  min-width: 560px; width: 100%; border-collapse: collapse;
}

.ak-pub-vergleich-tafel th, .ak-pub-vergleich-tafel td { text-align: center;
}

.ak-pub-vergleich-tafel thead th {
  background: var(--ak-bg); border-top: 1px solid var(--ak-line);
  border-bottom: 1px solid var(--ak-line); padding: 13px 16px;
  font-size: var(--ak-fs-micro); font-weight: 700; letter-spacing: .5px; color: var(--ak-ink-2);
  text-transform: uppercase;
}

.ak-pub-vergleich-tafel thead th:first-child, .ak-pub-vergleich-tafel tbody th {
  text-align: left; padding-left: clamp(18px, 2.4vw, 26px);
}

.ak-pub-vergleich-tafel thead th:last-child { padding-right: clamp(18px, 2.4vw, 26px);
}

.ak-pub-vergleich-tafel thead .ak-pub-vergleich-prem {
  background: var(--ak-purple-2); border-top: 2px solid var(--ak-accent);
  border-bottom: 1px solid var(--ak-purple-border-1); color: var(--ak-accent-deep); padding: 12px 16px;
}

.ak-pub-vergleich-tafel tbody th {
  border-bottom: 1px solid var(--ak-line-soft); padding: 14px clamp(18px, 2.4vw, 26px);
  font-size: var(--ak-fs-md); font-weight: 500; color: var(--ak-ink);
}

.ak-pub-vergleich-tafel tbody td {
  border-bottom: 1px solid var(--ak-line-soft); padding: 14px 16px;
  font-size: var(--ak-fs-xs); color: var(--ak-ink-2); font-weight: 600;
}

.ak-pub-vergleich-tafel tbody td:last-child { padding-right: clamp(18px, 2.4vw, 26px);
}

.ak-pub-vergleich-tafel tbody .ak-pub-vergleich-prem {
  background: var(--ak-purple-3); border-bottom: 1px solid var(--ak-purple-border-3);
  color: var(--ak-accent-deep); font-weight: 700;
}

.ak-pub-vergleich-tafel tbody tr:last-child th, .ak-pub-vergleich-tafel tbody tr:last-child td { border-bottom: 0;
}

/* Kartentexte und -listen der Referenz (about) */
/* Gleiche Abweichung, gleicher Grund: das Teal der Referenz (#2FA89B) kommt auf 2,92:1. Der dunklere Ton derselben Familie besteht AA. */
.ak-ref-karte .ak-eyebrow {
  font-size: var(--ak-fs-micro); font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--ak-a2-deep-2); margin: 0 0 8px;
}

.ak-ref-karte-liste { margin: 14px 0 0;
}

.ak-ref-karte-liste li { font-size: var(--ak-fs-xs); line-height: 1.55;
}

.ak-pub-nach-karten { margin-top: 16px;
}

/* Der hervorgehobene Kasten fuehrt Fliesstext wie die Referenz: 16/1.75 */
.ak-ref-akzentfeld p {
  font-size: var(--ak-fs-base-lg); line-height: 1.75; color: var(--ak-ink-2); margin: 0 0 14px;
}

.ak-ref-akzentfeld p:last-child { margin-bottom: 0;
}

.ak-pub-nav-ic { flex: 0 0 auto;
}

.ak-pub-footer-ic { flex: 0 0 auto; opacity: .6;
}

/* Der hervorgehobene Plan traegt in der Referenz einen violetten Knopf,
   der Jahresplan den dunklen. */
.ak-pub-plan--hervor .ak-btn--primary {
  background: var(--ak-accent); border-color: var(--ak-accent); color: var(--ak-on-fill); box-shadow: none;
}

.ak-pub-plan--hervor .ak-btn--primary:hover { background: var(--ak-accent-deep); border-color: var(--ak-accent-deep);
}

/* ── Stufenseite ── Referenz: route=levelDetail ───────────────────────
   Zurueckweg, Kopfkarte, zwei Infokarten, Einheitenliste, unten eine
   Beispielaufgabe neben einer dunklen Karte fuer den naechsten Schritt.  */
.ak-pub-zurueck {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--ak-fs-sm); font-weight: 600; color: var(--ak-ink-2); text-decoration: none;
  margin: 0 0 24px;
}

.ak-pub-zurueck:hover { color: var(--ak-ink);
}

.ak-stufe-kopfkarte {
  background: var(--ak-surface); border: 1px solid var(--ak-line); border-radius: var(--ak-r-card-lg);
  padding: clamp(24px, 3vw, 38px); margin-bottom: 16px;
}

.ak-stufe-kopfzeile {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-bottom: 20px;
}

.ak-stufe-marke {
  display: grid; place-items: center; width: 70px; height: 70px;
  border-radius: var(--ak-r-card); flex: 0 0 auto;
  font-family: var(--ak-font-display); font-weight: 700; font-size: var(--ak-fs-4xl);
}

.ak-stufe-kopfkarte h1 {
  font-family: var(--ak-font-display); font-weight: 700;
  font-size: clamp(26px, 3.4vw, 38px); line-height: 1.1; letter-spacing: -1px;
  margin: 0 0 6px; color: var(--ak-ink);
}

.ak-stufe-menge { font-size: var(--ak-fs-body-lg); color: var(--ak-ink-2); margin: 0;
}

.ak-stufe-kopfkarte > p:last-child {
  font-size: var(--ak-fs-lg); line-height: 1.7; color: var(--ak-ink-2); margin: 0;
}

/* Karten der Stufenseite: r20, p24, darueber eine 12-px-Beschriftung */
.ak-stufe-karte {
  background: var(--ak-surface); border: 1px solid var(--ak-line); border-radius: var(--ak-r-card); padding: 24px;
}

.ak-stufe-label {
  font-size: var(--ak-fs-micro); font-weight: 700; letter-spacing: .7px; color: var(--ak-ink-2);
  margin: 0 0 14px; text-transform: uppercase;
}

.ak-stufe-raster {
  display: grid; gap: 16px; margin-bottom: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

.ak-stufe-haken { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px;
}

.ak-stufe-haken li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: var(--ak-fs-md); line-height: 1.55; color: var(--ak-ink);
}

.ak-stufe-haken .ak-ic-svg { flex: 0 0 auto; margin-top: 3px; color: var(--ak-a2);
}

.ak-stufe-chips { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap;
}

.ak-stufe-chips li {
  background: var(--ak-bg); border: 1px solid var(--ak-line); padding: 9px 14px;
  border-radius: var(--ak-r-pill); font-size: var(--ak-fs-xs); font-weight: 600; color: var(--ak-ink-2);
}

.ak-stufe-punkte { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px;
}

.ak-stufe-punkte li { font-size: var(--ak-fs-md); line-height: 1.55; color: var(--ak-ink);
}

.ak-stufe-karte > p { font-size: var(--ak-fs-md); line-height: 1.65; color: var(--ak-ink-2); margin: 0;
}

/* Einheitenliste */
.ak-stufe-einheiten {
  background: var(--ak-surface); border: 1px solid var(--ak-line); border-radius: var(--ak-r-card);
  padding: clamp(22px, 2.6vw, 30px); margin-bottom: 16px;
}

.ak-stufe-einheiten ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px;
}

.ak-stufe-einheit {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--ak-bg); border-radius: var(--ak-r-row); padding: 14px 16px;
}

.ak-stufe-einheit-nr {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: var(--ak-r-pill); flex: 0 0 auto;
  font-family: var(--ak-font-display); font-weight: 700; font-size: var(--ak-fs-caption);
  background: var(--ak-accent); color: var(--ak-on-fill);
}

.ak-stufe-einheit-titel {
  flex: 1 1 0; min-width: 150px; font-size: var(--ak-fs-body); font-weight: 600; color: var(--ak-ink);
}

.ak-stufe-einheit-menge { font-size: var(--ak-fs-caption); color: var(--ak-ink-2); font-weight: 600;
}

/* Beispielaufgabe */
.ak-stufe-frage { font-size: var(--ak-fs-base-lg); font-weight: 600; margin: 0 0 14px; color: var(--ak-ink);
}

.ak-stufe-optionen { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px;
}

.ak-stufe-optionen li {
  display: flex; align-items: center; gap: 11px;
  background: var(--ak-bg); border: 1.5px solid var(--ak-line); border-radius: var(--ak-r-button);
  padding: 12px 14px; font-size: var(--ak-fs-md); color: var(--ak-ink);
}

.ak-stufe-optionen li.ist-richtig {
  background: var(--ak-a2-soft); border-color: var(--ak-a2); color: var(--ak-a2-deep-2);
}

.ak-stufe-opt-buchstabe {
  display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: var(--ak-r-pill); flex: 0 0 auto; font-size: var(--ak-fs-tiny); font-weight: 700;
  background: var(--ak-surface); border: 1.5px solid var(--ak-line);
}

.ak-stufe-optionen li.ist-richtig .ak-stufe-opt-buchstabe { border-color: var(--ak-a2);
}

/* Dunkle Karte: naechster Schritt */
.ak-stufe-dunkel {
  background: var(--ak-dark); border-radius: var(--ak-r-card); padding: 24px; color: var(--ak-on-dark);
  display: flex; flex-direction: column; justify-content: space-between; gap: 20px;
}

.ak-stufe-dunkel .ak-stufe-label { color: var(--ak-accent-on-dark); margin-bottom: 12px;
}

.ak-stufe-dunkel h2 {
  font-family: var(--ak-font-display); font-weight: 700; font-size: var(--ak-fs-3xl);
  line-height: 1.25; margin: 0 0 10px; color: var(--ak-on-dark);
}

.ak-stufe-dunkel p { font-size: var(--ak-fs-md); line-height: 1.6; color: var(--ak-on-dark-2); margin: 0;
}

.ak-stufe-dunkel-knoepfe { display: grid; gap: 10px;
}

.ak-stufe-dunkel-knoepfe .ak-btn {
  width: 100%; padding: 14px; border-radius: var(--ak-r-input); font-size: var(--ak-fs-body);
  justify-content: center;
}

.ak-stufe-dunkel-knoepfe .ak-btn--hell {
  background: var(--ak-on-dark); color: var(--ak-ink); border: 0; font-weight: 700;
}

.ak-stufe-dunkel-knoepfe .ak-btn--dunkel {
  background: var(--ak-dark-3); color: var(--ak-on-dark); border: 0; font-weight: 600;
}

/* ── Stufenuebersicht ── Referenz: route=levels ───────────────────────
   Eine Reihe je Stufe: weisse Karte mit 6-px-Kante in der Stufenfarbe,
   innen zwei Spalten (auto-fit minmax 260, gap 28). Links Zeichen +
   Stufencode + Anspruch, rechts die Lernziele, ein echter Beispielsatz
   und die Wege.                                                        */
.ak-stufen-liste { display: grid; gap: 16px; list-style: none; margin: 0; padding: 0;
}

/* DER 6-PX-FARBSTREIFEN AM LINKEN RAND IST ENTFERNT (16.09.2026, B-2).
   Er stand hier, wurde ab Abschnitt 22 ueberschrieben und blieb damit
   eine tote Zeile, die beim naechsten Lesen wieder wahr ausgesehen
   haette. Die massgebliche Regel steht in Abschnitt 22. */
.ak-stufen-reihe {
  background: var(--ak-surface);
  border-radius: var(--ak-r-card); padding: clamp(22px, 2.6vw, 30px);
}

/* M5a: dritter Ton je Stufe — --ak-stufe-tief.
   Der Stufencode („A2", „B1") stand in --ak-stufe. Das ist der
   FLAECHEN-Ton: die SSOT stimmt ihn auf 3:1 fuer nichttextliche
   Elemente ab. Als 30px-Text auf Weiss ergab er gemessen 2,92:1 (A2)
   und 2,68:1 (B1) — beide unter der Schwelle, die selbst grosser Text
   braucht. Der Code ist aber Text und traegt die einzige Information
   der Kachel.
   Fuer Text gilt deshalb der Tiefton der SSOT. Flaechen-, Weich- und
   Randfarben bleiben unveraendert; nur der Text wechselt.
   Die Werte kommen aus der Tokenebene, nicht aus dieser Datei. */
.ak-stufen-reihe--a1 { --ak-stufe: var(--ak-a1); --ak-stufe-weich: var(--ak-a1-soft); --ak-stufe-tief: var(--ak-a1-deep);
}

.ak-stufen-reihe--a2 { --ak-stufe: var(--ak-a2); --ak-stufe-weich: var(--ak-a2-soft); --ak-stufe-tief: var(--ak-a2-deep);
}

.ak-stufen-reihe--b1 { --ak-stufe: var(--ak-b1); --ak-stufe-weich: var(--ak-b1-soft); --ak-stufe-tief: var(--ak-b1-deep);
}

.ak-stufen-reihe--b2 { --ak-stufe: var(--ak-b2); --ak-stufe-weich: var(--ak-b2-soft); --ak-stufe-tief: var(--ak-b2-deep);
}

.ak-stufen-reihe--c1 { --ak-stufe: var(--ak-c1); --ak-stufe-weich: var(--ak-c1-soft); --ak-stufe-tief: var(--ak-c1-deep);
}

.ak-stufen-reihe--c2 { --ak-stufe: var(--ak-c2); --ak-stufe-weich: var(--ak-c2-soft); --ak-stufe-tief: var(--ak-c2-deep);
}

.ak-stufen-innen {
  display: grid; gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

.ak-stufen-kopf { display: flex; align-items: center; gap: 14px; margin-bottom: 14px;
}

.ak-stufen-zeichen {
  display: grid; place-items: center; width: 56px; height: 56px;
  border-radius: var(--ak-r-icon-lg); flex: 0 0 auto;
  background: var(--ak-stufe-weich); color: var(--ak-stufe);
}

.ak-stufen-code {
  font-family: var(--ak-font-display); font-weight: 700; font-size: var(--ak-fs-4xl);
  line-height: 1; color: var(--ak-stufe-tief, var(--ak-ink));
}

.ak-stufen-name { font-size: var(--ak-fs-sm); font-weight: 600; color: var(--ak-ink); margin-top: 4px;
}

.ak-stufen-reihe h2 {
  font-family: var(--ak-font-display); font-weight: 700; font-size: var(--ak-fs-3xl);
  margin: 0 0 10px; color: var(--ak-ink);
}

.ak-stufen-reihe h2 a { color: inherit; text-decoration: none;
}

.ak-stufen-reihe h2 a:hover { text-decoration: underline;
}

.ak-stufen-text { font-size: var(--ak-fs-body); line-height: 1.65; color: var(--ak-ink-2); margin: 0 0 16px;
}

.ak-stufen-menge {
  display: flex; gap: 18px; flex-wrap: wrap;
  font-size: var(--ak-fs-caption); font-weight: 600; color: var(--ak-ink-2); margin: 0;
}

.ak-stufen-label {
  font-size: var(--ak-fs-micro); font-weight: 700; letter-spacing: .7px; color: var(--ak-ink-2);
  margin: 0 0 12px; text-transform: uppercase;
}

.ak-stufen-ziele { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px;
}

.ak-stufen-ziele li {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: var(--ak-fs-sm); line-height: 1.5; color: var(--ak-ink);
}

.ak-stufen-ziele .ak-ic-svg { flex: 0 0 auto; margin-top: 3px; color: var(--ak-a2);
}

.ak-stufen-satz {
  background: var(--ak-bg); border: 1px solid var(--ak-line); border-radius: var(--ak-r-row);
  padding: 14px 16px; margin: 0 0 16px;
}

.ak-stufen-satz-label {
  font-size: var(--ak-fs-tiny); font-weight: 700; color: var(--ak-ink-2); margin: 0 0 6px;
  text-transform: uppercase;
}

.ak-stufen-satz-de {
  font-family: var(--ak-font-display); font-size: var(--ak-fs-base-lg); font-weight: 600;
  color: var(--ak-ink); margin: 0;
}

.ak-stufen-satz-tr { font-size: var(--ak-fs-xs); color: var(--ak-ink-2); margin: 4px 0 0;
}

.ak-stufen-wege { display: flex; gap: 10px; flex-wrap: wrap;
}

.ak-stufen-wege .ak-btn { padding: 12px 20px; border-radius: var(--ak-r-button); font-size: var(--ak-fs-sm);
}

/* ── Schmale Spalte ── Referenz: route=faq laeuft in 740 px mittig ────  */
/* `.ak-pub-schmal` IST ENTFERNT (16.09.2026, Eigentuemer).
   Sie hatte genau einen Verwender — die Fragenseite — und machte sie zur
   einzigen oeffentlichen Seite mit 740 statt 1280 px. Der Eigentuemer
   hat das als Unstimmigkeit gemeldet. Was die Regel wirklich leisten
   sollte (lesbare Zeilenlaenge), leistet jetzt die Antwort selbst. */

/* Abschlusskarte der Referenz (faq: „Sorun devam ediyor mu?") */
.ak-pub-schlusskarte {
  background: var(--ak-surface); border: 1px solid var(--ak-line); border-radius: var(--ak-r-card);
  padding: 26px; margin-top: 26px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}

.ak-pub-schlusskarte h2 {
  font-family: var(--ak-font-display); font-weight: 700; font-size: var(--ak-fs-lg);
  margin: 0 0 4px; color: var(--ak-ink);
}

.ak-pub-schlusskarte p { font-size: var(--ak-fs-sm); color: var(--ak-ink-2); margin: 0;
}

.ak-pub-schlusskarte .ak-btn {
  padding: 14px 22px; border-radius: var(--ak-r-input); font-size: var(--ak-fs-md); font-weight: 600;
}

/* ── Kontaktseite ── Referenz: route=contact ──────────────────────────
   Linke Spalte stapelt zwei Karten (gap 16), rechte traegt die
   Schreibkarte. Die Themenzeilen sind Zeilen mit Symbolfeld links und
   Pfeil rechts, Grund var(--ak-bg) wie im Prototyp.                          */
.ak-pub-spalte { display: grid; gap: 16px; align-content: start;
}

.ak-pub-kartentitel {
  font-family: var(--ak-font-display); font-weight: 700; font-size: var(--ak-fs-lg);
  letter-spacing: 0; margin: 0 0 14px; color: var(--ak-ink);
}

.ak-pub-themenliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px;
}

.ak-pub-themenliste a {
  display: flex; align-items: center; gap: 12px;
  background: var(--ak-bg); border: 1px solid var(--ak-line); border-radius: var(--ak-r-row);
  padding: 12px 14px; text-decoration: none; color: var(--ak-ink);
}

.ak-pub-themenliste a:hover { border-color: var(--ak-ink);
}

.ak-pub-themen-zeichen {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: var(--ak-r-icon-sm); flex: 0 0 auto; background: var(--ak-accent-soft); color: var(--ak-accent);
}

.ak-pub-themen-titel { flex: 1 1 0; font-size: var(--ak-fs-md); font-weight: 600;
}

.ak-pub-themen-pfeil { color: var(--ak-ink-2); display: grid; place-items: center;
}

.ak-pub-direktliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px;
}

.ak-pub-direktliste li {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--ak-fs-sm); color: var(--ak-ink-2);
}

.ak-pub-direktliste .ak-ic-svg { flex: 0 0 auto; color: var(--ak-ink-2);
}

.ak-pub-direktliste a { color: var(--ak-ink);
}

.ak-pub-schreibkarte { align-self: start; padding: clamp(20px, 2.4vw, 28px);
}

.ak-pub-feldlabel {
  font-size: var(--ak-fs-caption); font-weight: 600; color: var(--ak-ink); margin: 0 0 8px;
}

.ak-pub-betreffe {
  list-style: none; margin: 0 0 20px; padding: 0;
  display: flex; gap: 8px; flex-wrap: wrap;
}

.ak-pub-betreffe a {
  display: inline-block; padding: 10px 16px; border-radius: var(--ak-r-pill);
  border: 1px solid var(--ak-line); background: var(--ak-surface);
  font-size: var(--ak-fs-xs); font-weight: 600; color: var(--ak-ink-2); text-decoration: none;
}

.ak-pub-betreffe a:hover { border-color: var(--ak-ink); color: var(--ak-ink);
}

.ak-pub-schreibkarte .ak-btn--block {
  width: 100%; padding: 15px; border-radius: var(--ak-r-input); font-size: var(--ak-fs-body); font-weight: 600;
}

.ak-pub-kleingedruckt {
  font-size: var(--ak-fs-meta); line-height: 1.55; color: var(--ak-ink-2); margin: 12px 0 0;
}

/* ── Rechtsseiten ── Referenz: route=legal ────────────────────────────
   Zwei Spalten: der Text in einer weissen Karte (span 2), rechts eine
   mitlaufende Inhaltsuebersicht auf hellem Grund.                       */
.ak-pub-rechtsraster { display: grid; gap: 20px; align-items: start;
}

@media (min-width: 901px) {
/* Die Referenz baut das Raster aus auto-fit-Spalten und laesst die
     Textkarte zwei davon ueberspannen. Bei 1280 px Inhaltsbreite fallen
     dabei zwei leere Spalten an; deshalb hier zwei feste Spuren mit
     demselben Ergebnis: breite Textkarte, schmale Uebersicht. */
  .ak-pub-rechtsraster { grid-template-columns: minmax(0, 1fr) 280px; }
}

.ak-pub-rechtskarte {
  background: var(--ak-surface); border: 1px solid var(--ak-line); border-radius: var(--ak-r-card);
  padding: clamp(24px, 3vw, 36px);
}

.ak-pub-rechtskarte .ak-pub-legal-block + .ak-pub-legal-block { margin-top: 26px;
}

.ak-pub-rechtskarte h2 {
  font-family: var(--ak-font-display); font-weight: 700; font-size: var(--ak-fs-2xl);
  margin: 0 0 10px; color: var(--ak-ink);
}

.ak-pub-legal-liste {
  list-style: disc; margin: 10px 0 0; padding-left: 20px;
  display: grid; gap: 6px;
}

.ak-pub-legal-liste li { font-size: var(--ak-fs-body); line-height: 1.7; color: var(--ak-ink-2);
}

/* `top` STEHT IN ABSCHNITT 32c, NICHT HIER.
   Hier stand `top: 20px`. Der Kopf klebt aber ebenfalls und ist 74 bzw.
   92 px hoch — die obersten Punkte der Uebersicht verschwanden dahinter.
   Die Zeile wurde ab Abschnitt 32c ueberschrieben und blieb als tote
   Angabe stehen; das faellt beim naechsten Lesen auf die Fuesse. */
.ak-pub-rechtsnav {
  background: var(--ak-bg); border: 1px solid var(--ak-line); border-radius: var(--ak-r-card);
  padding: 22px; position: sticky;
}

.ak-pub-rechtsnav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px;
}

.ak-pub-rechtsnav a { font-size: var(--ak-fs-sm); line-height: 1.5; color: var(--ak-ink-2); text-decoration: none;
}

.ak-pub-rechtsnav a:hover { color: var(--ak-ink); text-decoration: underline;
}

@media (max-width: 900px) {
.ak-pub-rechtskarte { grid-column: auto; }
  .ak-pub-rechtsnav { position: static; }
}

/* Lesebreite im Rechtstext. Die Karte selbst ist breit (Referenz), ein
   Absatz ueber ihre volle Breite waere aber unlesbar. */
.ak-pub-rechtskarte .ak-pub-legal { max-width: 68ch;
}

.ak-pub-demo-opt {
  display: flex; align-items: center; gap: 13px; width: 100%;
  min-height: 52px; padding: 14px 18px; text-align: left;
  border: 1px solid var(--ak-line); border-radius: var(--ak-r-row);
  background: var(--ak-bg); color: var(--ak-ink);
  font: inherit; font-size: var(--ak-fs-body); cursor: pointer;
}

.ak-pub-demo-opt:hover:not(:disabled) { border-color: var(--ak-ink);
}

.ak-pub-demo-opt:disabled { cursor: default;
}

.ak-pub-demo-optionen li.ist-gewaehlt .ak-pub-demo-opt {
  border-color: var(--ak-accent); background: var(--ak-accent-soft);
}

.ak-pub-demo-optionen li.ist-richtig .ak-pub-demo-opt {
  border-color: var(--ak-a2); background: var(--ak-a2-soft); color: var(--ak-a2-deep-2);
}

.ak-pub-demo-optionen li.ist-falsch .ak-pub-demo-opt {
  border-color: var(--ak-error); background: var(--ak-error-soft); color: var(--ak-error-fg);
}

/* Der Haken der richtigen Antwort erscheint erst nach dem Pruefen. */
.ak-pub-demo-karte.ist-uebung .ak-pub-demo-ok { display: none;
}

.ak-pub-demo-karte.ist-uebung li.ist-richtig .ak-pub-demo-ok { display: inline-flex;
}

.ak-pub-demo-pruefen { margin: 0;
}

.ak-pub-demo-pruefen .ak-btn { padding: 12px 22px; border-radius: var(--ak-r-input);
}

.ak-pub-demo-pruefen .ak-btn:disabled { opacity: .5; cursor: default;
}

/* ── Lernformen (A8) ──────────────────────────────────────────────────
   Kachelraster der Referenz („Ders türleri"): Zeichen, Titel, eine
   Zeile darunter. Jede Kachel hat eine Deckung — entweder eine Zahl aus
   dem Bestand oder eine Funktion, die es gibt.                        */
.ak-pub-formen { list-style: none; margin: 0; padding: 0;
}

.ak-pub-form { display: grid; gap: 4px; padding: 20px;
}

.ak-pub-form-zeichen {
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: var(--ak-r-icon); background: var(--ak-accent-soft); color: var(--ak-accent); margin-bottom: 8px;
}

.ak-pub-form-titel { font-size: var(--ak-fs-body); font-weight: 700; color: var(--ak-ink);
}

.ak-pub-form-sub { font-size: var(--ak-fs-xs); line-height: 1.55; color: var(--ak-ink-2);
}

/* Der leise Satz unter den Hero-Wegen (A10): was die Beispiellektion
   NICHT tut. */
.ak-pub-hero-hinweis {
  font-size: var(--ak-fs-caption); line-height: 1.5; color: var(--ak-ink-2); margin: 12px 0 0;
}


/* Handlungsaufruf innerhalb eines Rechtstextes (07.09.2026). Genau eine
   Stelle nutzt ihn: „Cayma Hakkı" fuehrt zur elektronischen
   Widerrufsfunktion. Wer dort liest, will handeln — ein Link im Fliesstext
   waere zu leise. */
.ak-pub-legal-cta { margin: var(--ak-sp-4) 0 0; }

/* ══ WIDERRUFSFORMULAR ═══════════════════════════════════════════════════
   Die elektronische Widerrufsfunktion (07.09.2026). Sie liegt in der
   Rechtstextkarte und erbt deren Breite und Typografie — sie ist Teil
   derselben Strecke, kein Formular daneben. Eigene Regeln bekommt nur,
   was ein Formular braucht: Abstand zwischen den Feldern, eine sichtbare
   Fehlerfarbe und eine Knopfzeile, die auf dem Telefon umbricht. */
.ak-widerruf-form {
  display: grid; gap: var(--ak-sp-4);
  max-width: 460px; margin-top: var(--ak-sp-4);
}

.ak-widerruf-hinweis {
  display: block; margin-top: 4px;
  font-size: var(--ak-fs-meta); line-height: 1.5; color: var(--ak-ink-3);
}

.ak-widerruf-fehler {
  margin: var(--ak-sp-3) 0 0;
  padding: var(--ak-sp-3) var(--ak-sp-4);
  border-radius: var(--ak-r-input);
  background: var(--ak-error-soft); color: var(--ak-error-fg);
  font-size: var(--ak-fs-body-sm); line-height: 1.55;
}

.ak-widerruf-form .ak-input.ist-fehler { border-color: var(--ak-error-fg); }

.ak-widerruf-aktionen {
  display: flex; flex-wrap: wrap; gap: var(--ak-sp-3);
  align-items: center;
}

/* Auf schmalen Geraeten steht jeder Knopf auf eigener Zeile — nebeneinander
   waeren „Caymayı onayla" und „Geri dön" je 140 px breit und beide schwer
   zu treffen. */
@media (max-width: 480px) {
  .ak-widerruf-aktionen .ak-btn { flex: 1 1 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════
   FIRST-LIVE-SCHICHT DER OEFFENTLICHEN WEBSITE — Fassung 3 (16.09.2026)
   ═══════════════════════════════════════════════════════════════════════

   WAS AUS DEN FASSUNGEN 1 UND 2 GELERNT WURDE

   Fassung 1 hat die alte Marke als neue GRUNDaesthetik gesetzt: Fuss,
   Panel und Probeaufgabe grossflaechig dunkelgruen. Abgelehnt.
   Fassung 2 hat das zurueckgenommen, aber EIN gruenes Abschlussband und
   gruene Hauptknoepfe behalten. Auch das ist zu viel: der Auftrag vom
   16.09.2026 verlangt ausdruecklich kein grosses Band, keine gruenen
   Panels und keine gruene Grundaesthetik.

   Und der Befund, der daneben stand: die Seite war
   „Card + Radius + farbiger linker Border + wieder Card". Das ist kein
   Designsystem, das ist ein Bauteil, sechsmal wiederholt.

   ═══ WAS FASSUNG 3 ANDERS MACHT ═══

   1. GRUEN IST WEG. Vollstaendig. Die Marke ist seit dem 16.09.2026
      Navy/Koralle — und Navy ist auf 1.25:1 genau die Tinte, die die
      Seite ohnehin traegt. Der Markenwechsel und die Ruecknahme des
      Gruens sind derselbe Schritt.

   2. DREI KOMPOSITIONEN STATT EINER KARTE.
        Stufen ....... Bild fuehrt, Text darunter, KEIN linker Farbstreifen
        Merkmale ..... ganz ohne Kasten: Zeichen, Titel, Text, Haarlinie
        Zielgruppen .. Bildreihe aus den Themenmotiven statt Hakenliste
      Die Stufenfarbe bleibt — sie steht jetzt im Abzeichen und im
      Bildrahmen, nicht als Rand um eine Box.

   3. DER ABSCHLUSS IST HELL. Kein Band, keine dunkle Flaeche. Das
      Bildzeichen gross, die Ueberschrift, zwei Wege — auf Creme, mit
      einer korallefarbenen Linie als einzigem Akzent.

   Alle Werte kommen aus der Tokenebene; diese Datei enthaelt keinen
   eigenen Farbwert (geprueft in product-design-public-tests.php).
   ═══════════════════════════════════════════════════════════════════════ */

/* ══ 1 · SEKTIONSRHYTHMUS ═══════════════════════════════════════════════
   `.ak-pub-sec` hatte `padding: 80px 0 0` — oben 80, UNTEN 0. Der
   Abstand zur naechsten Kante entstand nur zufaellig aus dem Innenleben.
   Jetzt symmetrisch, und `--soft` wechselt auf Weiss statt auf eine
   neue Farbwelt. */
.ak-pub-sec {
  padding: 80px 0;
  background: none;
}

.ak-pub-sec--soft {
  background: var(--ak-surface);
  border-block: 1px solid var(--ak-line);
}

.ak-pub-sec--soft + .ak-pub-sec--soft { border-top: 0; }
.ak-pub-sec:last-of-type { padding-bottom: 80px; }
.ak-pub-streifen-sec { padding: 24px 0 0; }

/* Ein warmes Band als dritte Flaeche — fuer die Zielgruppen. Es ist
   bewusst fast farblos: der Rhythmus soll aus der KOMPOSITION kommen,
   nicht aus Farbe. */
.ak-pub-sec--warm {
  background: var(--ak-marke-band);
  border-block: 1px solid var(--ak-marke-band-linie);
}

@media (max-width: 767px) {
  .ak-pub-sec,
  .ak-pub-sec:last-of-type { padding: 56px 0; }
  .ak-pub-streifen-sec { padding: 16px 0 0; }
}

/* ══ 2 · RASTER OHNE WAISENREIHEN ═══════════════════════════════════════
   GEMESSEN bei 1280 px: `.ak-grid-4` mit 8 Karten ergab 6+2,
   `.ak-raster-16` mit 6 ergab 4+2. `auto-fit` fuellt die Zeile, bis
   nichts mehr passt, und laesst den Rest allein stehen. Auf der
   oeffentlichen Website wird die Spaltenzahl deshalb GESETZT. */
@media (min-width: 900px) {
  .ak-pub .ak-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ak-pub .ak-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ak-pub .ak-raster-16 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ak-pub .ak-raster-16--vier,
  .ak-pub .ak-raster-16:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .ak-pub .ak-raster-16:has(> :nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 560px) and (max-width: 899px) {
  .ak-pub .ak-grid-3,
  .ak-pub .ak-grid-4,
  .ak-pub .ak-raster-16 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Karten fuellen ihre Zelle, strecken ihren INHALT aber nicht.
   `align-items` bleibt `stretch` — `flex-start` liess die Kinder auf
   Inhaltsbreite schrumpfen (gemessen: die Probeaufgabe stand danach auf
   halber Breite). */
.ak-pub .ak-ref-karte,
.ak-pub .ak-card {
  display: flex;
  flex-direction: column;
}
.ak-pub .ak-ref-karte > :last-child,
.ak-pub .ak-card > :last-child { margin-bottom: 0; }

/* ══ 3 · SPRUNGMARKEN UNTER DEM STICKY-KOPF ═════════════════════════════
   GEMESSEN: ein Klick auf „Bu sayfada" setzte das Ziel auf top: 0, also
   vollstaendig unter den Kopf. */
.ak-pub { scroll-padding-top: 104px; }
@media (max-width: 767px) { .ak-pub { scroll-padding-top: 88px; } }

/* ══ 4 · KOPFZEILE UND MARKE ════════════════════════════════════════════
   Der Sperrsatz kommt seit dem Markenwechsel als EIN Bild (feste
   Markenfarben, siehe App\Marke). Er braucht deshalb nur noch eine
   Hoehe — die Breite steht im Markup. */
/* DIE FLAECHE STEHT IN ABSCHNITT 34, NICHT HIER.
   Hier stand der Seitenton (`--ak-bg`) — derselbe wie unter dem Kopf.
   Beim Scrollen wirkte der klebende Kopf dadurch wie ein Stueck Seite,
   das haengenbleibt. Die Zeile wurde ab Abschnitt 34 ueberschrieben und
   blieb als tote Angabe stehen. Haarlinie und Weichzeichner bleiben. */
.ak-pub-header {
  border-bottom: 1px solid var(--ak-line);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}

.ak-marke-sperrsatz,
.ak-marke-gestapelt { display: block; height: auto; }

/* Der Kopf soll durch das groessere Logo nicht mitwachsen. Sein
   Innenabstand war 20 px und stammt aus der Zeit, als die Marke 32 px
   hoch war; bei 56 px ergaebe das einen 96-px-Kopf. 14 px halten ihn
   bei rund 84 px — knapp UNTER dem Stand vor der Vergroesserung.
   Die Bedienziele daneben sind davon nicht betroffen: der Kauf-Knopf
   traegt seine 44 px selbst. */
@media (min-width: 768px) {
  .ak-pub-header-innen { padding-block: 14px; }
}
.ak-pub-marke { gap: 0; }

/* Der Hauptweg ist NAVY, nicht Koralle. Weiss auf Koralle misst
   3.26:1 und faellt durch; weiss auf Navy misst 14.10:1. Das ist keine
   Geschmacksfrage. */
.ak-pub .ak-btn--primary {
  background: var(--ak-marke-navy);
  border-color: var(--ak-marke-navy);
  color: var(--ak-marke-auf-navy);
}
.ak-pub .ak-btn--primary:hover {
  background: var(--ak-marke-navy-2);
  border-color: var(--ak-marke-navy-2);
}

/* Der zweite Weg bekommt beim Ueberfahren die Koralle als RAND — als
   Flaeche, nicht als Schrift. */
.ak-pub .ak-btn--secondary:hover {
  border-color: var(--ak-marke-koralle);
  color: var(--ak-marke-koralle-tief);
}

/* ══ 5 · EINE KACHELFAMILIE ═════════════════════════════════════════════ */
.ak-pub .ak-ic-chip {
  display: inline-grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: var(--ak-r-chip);
  background: var(--ak-accent-soft);
  color: var(--ak-accent-deep);
  flex: none;
}

.ak-pub-hero-punkte .ak-ic-svg,
.ak-pub-haken .ak-ic-svg { color: var(--ak-marke-koralle-tief); }

/* ══ 6 · HERO ═══════════════════════════════════════════════════════════
   Seit dem Hero-Paket traegt hier eine redaktionelle Szene statt einer
   Strichzeichnung. Sie braucht weder Schimmer noch Rahmen noch
   Schwebebewegung — die frueheren Lichter stammten von der Zeichnung
   und wuerden die Szene nur anschmutzen.

   KEIN KASTEN UM DAS MOTIV. Das Bild steht frei auf der Cremeflaeche,
   so wie der Auftrag es verlangt. Der eigene Grund des Motivs ist ein
   leicht schwankendes Creme; `--ak-bg` liegt daneben, und weil kein
   Rahmen die Kante zieht, faellt der Unterschied nicht auf. */
.ak-pub-hero-bild::before { content: none; }

.ak-pub-hero-motiv {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  /* Vollstaendig zeigen, nie zuschneiden — die Szene erzaehlt nur als
     Ganzes etwas. */
  object-fit: contain;
}

/* Die frueheren Regeln galten der Zeichnung. */
.ak-pub-hero-bild svg { display: none; }

.ak-pub-hero-pille {
  background: var(--ak-surface);
  color: var(--ak-marke-navy);
  border: 1px solid var(--ak-line);
  box-shadow: var(--ak-marke-schatten);
}
.ak-pub-hero-pille .ak-ic-svg { color: var(--ak-marke-koralle-tief); }

/* ══ 7 · FLAECHEN DER HERO-ILLUSTRATION ═════════════════════════════════
   Jedes gefuellte Element traegt eine Klasse; die Farben stehen hier und
   kommen aus der Tokenebene. Der Strich bleibt `currentColor`. */
.ak-pub-hero-bild .ak-pub-ill-grund { fill: var(--ak-marke-navy-tint); opacity: .7; }
.ak-pub-hero-bild .ak-pub-ill-flaeche { fill: var(--ak-surface-warm); }
.ak-pub-hero-bild .ak-pub-ill-holz { fill: var(--ak-bg-2); }
.ak-pub-hero-bild .ak-pub-ill-glas { fill: var(--ak-surface); }
.ak-pub-hero-bild .ak-pub-ill-deckel { fill: var(--ak-marke-navy-tint); }
.ak-pub-hero-bild .ak-pub-ill-muenze { fill: var(--ak-marke-koralle); }
.ak-pub-hero-bild .ak-pub-ill-funke  { fill: var(--ak-marke-koralle); }
.ak-pub-hero-bild .ak-pub-ill-herz   { fill: var(--ak-marke-koralle-tint); }
.ak-pub-hero-bild .ak-pub-ill-karte {
  fill: var(--ak-surface);
  filter: drop-shadow(0 8px 18px rgba(23, 43, 77, .12));
}
.ak-pub-hero-bild .ak-pub-ill-gruss { fill: var(--ak-marke-navy); }
.ak-pub-hero-bild .ak-pub-ill-buch-a1 { fill: var(--ak-a1-soft); }
.ak-pub-hero-bild .ak-pub-ill-buch-a2 { fill: var(--ak-a2-soft); }
.ak-pub-hero-bild .ak-pub-ill-buch-b1 { fill: var(--ak-b1-soft); }
.ak-pub-hero-bild { color: var(--ak-marke-navy); }
.ak-pub-hero-bild svg { opacity: .92; }

/* ══ 8 · BILDRAHMEN ═════════════════════════════════════════════════════
   ASSETS.md und der V3-Coderhinweis geben dieselbe Einsatzart vor:
   Rasterbilder vollstaendig mit `contain`, gerahmt, nie als
   Vollflaechen-Hintergrund, nie umgefaerbt.
   KEIN LAYOUTSPRUNG: `width`/`height` im Markup, festes
   `aspect-ratio` am Rahmen. */
.ak-pub-bildrahmen {
  display: block;
  overflow: hidden;
  border-radius: var(--ak-r-card);
  background: var(--ak-bg);
}

.ak-pub-bildrahmen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ak-pub-stufenbild { aspect-ratio: 3 / 2; }

/* Der Rahmengrund ist `--ak-bg`. GEMESSEN am Pixel: die Motive tragen
   selbst #FBF8F2, `--ak-bg` ist #FBF7F1 — ein Unterschied von 1/1/1.
   `--ak-bg-2` waere vier Stufen heller und ergaebe einen sichtbaren
   Streifen neben jedem Bild. */
.ak-pub-inhaltsbild { aspect-ratio: 4 / 3; background: var(--ak-bg); }

/* ══ 9 · STUFEN — DAS BILD FUEHRT, KEIN FARBSTREIFEN AM RAND ════════════
   HIER LAG DER KERN DES BEFUNDS. Die Stufen standen als sechs gleiche
   Karten mit Radius und farbigem LINKEN Rand — genau das Muster, das
   der Auftrag als „kein ausreichendes Designsystem" benennt.

   Jetzt fuehrt das Motiv: es sitzt oben, randlos bis an die Kartenkante,
   auf der Soft-Farbe seiner Stufe. Das Abzeichen liegt darueber und
   ueberlappt die Kante — dadurch entsteht Tiefe statt einer weiteren
   Umrandung. Der linke Farbstreifen ist ERSATZLOS weg; die Stufenfarbe
   steht im Abzeichen und im Bildgrund, wo sie etwas bedeutet.

   Die Karte selbst hat keinen sichtbaren Rahmen mehr, nur einen sehr
   flachen Schatten. Damit bleibt EIN Rahmen im Bild — der des Motivs. */
.ak-pub-stufenkarte {
  position: relative;
  padding: 0;
  overflow: visible;
  background: var(--ak-surface);
  border: 0;
  border-radius: var(--ak-r-card);
  box-shadow: var(--ak-marke-schatten);
}

.ak-pub-stufenkarte .ak-pub-bildrahmen {
  border-radius: var(--ak-r-card) var(--ak-r-card) 0 0;
}

.ak-pub-stufenkarte-inhalt {
  display: grid;
  gap: 8px;
  padding: 26px 20px 20px;
  width: 100%;
}

/* Das Abzeichen sitzt auf der Kante zwischen Bild und Text. */
.ak-pub-stufenkarte .ak-pub-kurs-kopf {
  position: absolute;
  top: calc(66.6667% - 18px);
  left: 20px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
}

.ak-pub-stufenkarte .ak-level {
  box-shadow: 0 2px 10px rgba(23, 43, 77, .18);
}

.ak-pub-stufenkarte .ak-pub-kurs-titel {
  background: var(--ak-surface);
  padding: 4px 10px;
  border-radius: var(--ak-r-chip);
  box-shadow: 0 2px 10px rgba(23, 43, 77, .10);
  font-weight: 700;
}

.ak-pub-stufe--a1 .ak-pub-bildrahmen { background: var(--ak-a1-soft); }
.ak-pub-stufe--a2 .ak-pub-bildrahmen { background: var(--ak-a2-soft); }
.ak-pub-stufe--b1 .ak-pub-bildrahmen { background: var(--ak-b1-soft); }
.ak-pub-stufe--b2 .ak-pub-bildrahmen { background: var(--ak-b2-soft); }
.ak-pub-stufe--c1 .ak-pub-bildrahmen { background: var(--ak-c1-soft); }
.ak-pub-stufe--c2 .ak-pub-bildrahmen { background: var(--ak-c2-soft); }

/* Die Kursuebersicht behaelt ihre Reihe, verliert aber ebenfalls den
   linken Farbstreifen — dort traegt ihn der Kopfstreifen des Motivs. */
.ak-pub-stufenstreifen {
  aspect-ratio: 6 / 1;
  border-radius: var(--ak-r-card) var(--ak-r-card) 0 0;
  margin: calc(-1 * var(--ak-pad-card, 24px)) calc(-1 * var(--ak-pad-card, 24px)) 22px;
}
.ak-pub-stufenstreifen img { object-fit: cover; object-position: center 42%; }

@media (max-width: 767px) {
  .ak-pub-stufenstreifen { aspect-ratio: 4 / 1; }
}

/* ══ 10 · MERKMALE OHNE KASTEN ══════════════════════════════════════════
   Acht Karten in zwei Reihen waren acht weitere Boxen. Die Merkmale
   brauchen keinen Kasten: Zeichen, Titel, Text, dazwischen eine
   Haarlinie. Das ist eine andere Komposition, kein anderer Kartenstil —
   und es nimmt der Seite acht Rahmen und acht Radien. */
.ak-pub-merkmale .ak-card {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0 0 var(--ak-sp-5);
  border-bottom: 1px solid var(--ak-line);
  gap: 10px;
}

@media (min-width: 900px) {
  /* Senkrechte Linien zwischen den Spalten statt Kaesten drumherum. */
  .ak-pub-merkmale { column-gap: 0; }
  .ak-pub-merkmale .ak-card {
    padding-inline: clamp(16px, 2vw, 26px);
    border-right: 1px solid var(--ak-line);
  }
  .ak-pub-merkmale .ak-card:nth-child(4n) { border-right: 0; }
  .ak-pub-merkmale .ak-card:nth-child(1),
  .ak-pub-merkmale .ak-card:nth-child(5) { padding-left: 0; }
  .ak-pub-merkmale .ak-card:nth-last-child(-n+4) { border-bottom: 0; padding-bottom: 0; }
}

/* ══ 11 · ZIELGRUPPEN ALS BILDREIHE ═════════════════════════════════════
   Vorher eine Hakenliste in einer Spalte neben Text. Jetzt eine Reihe
   aus vier Themenmotiven des Multipakets — dieselbe Aussage, andere
   Form. Keine Kaesten: Bild, darunter der Satz. */
.ak-pub-zielgruppen {
  display: grid;
  gap: var(--ak-sp-5) var(--ak-sp-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: var(--ak-sp-6) 0 0;
  padding: 0;
}

@media (min-width: 900px) {
  .ak-pub-zielgruppen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.ak-pub-zielgruppe {
  display: grid;
  gap: 12px;
  align-content: start;
}

.ak-pub-zielgruppe .ak-pub-bildrahmen {
  aspect-ratio: 1 / 1;
  background: var(--ak-surface);
  box-shadow: var(--ak-marke-schatten);
}

.ak-pub-zielgruppe p {
  margin: 0;
  font-size: var(--ak-fs-body-sm);
  line-height: var(--ak-lh-body);
  color: var(--ak-ink-2);
}

/* ══ 12 · LERNFORMEN ════════════════════════════════════════════════════ */
.ak-pub-formkarte { padding: 0; overflow: hidden; }
.ak-pub-formkarte .ak-pub-bildrahmen { border-radius: var(--ak-r-card) var(--ak-r-card) 0 0; }
.ak-pub-formkarte-inhalt {
  display: grid;
  gap: 6px;
  padding: 16px 18px 20px;
  width: 100%;
}
.ak-pub-formkarte-kopf { display: flex; align-items: center; gap: 10px; }

/* Wo kein Motiv existiert, steht das Symbol der Familie gross auf
   derselben Flaeche — gleiche Hoehe, keine halb bebilderte Reihe. */
.ak-pub-inhaltsbild--zeichen {
  display: grid;
  place-items: center;
  background: var(--ak-accent-soft);
  color: var(--ak-accent-deep);
}
.ak-pub-inhaltsbild--zeichen .ak-ic-svg { width: 48px; height: 48px; }

/* `display` wird hier NICHT angefasst: `inline-flex` hat das
   `place-items: center` der Grundregel ausser Kraft gesetzt und die
   Glyphe 18 px nach links gerueckt. */
.ak-pub-formkarte .ak-pub-form-zeichen {
  color: var(--ak-accent-deep);
  flex: none;
  margin-bottom: 0;
}

/* ══ 13 · DER ABSCHLUSS — HELL, KEIN BAND ═══════════════════════════════
   Fassung 2 hatte hier ein grosses dunkelgruenes Band. Der Auftrag
   schliesst das aus. Der Abschluss steht jetzt auf Creme: das
   Bildzeichen gross, die Ueberschrift, zwei Wege — und als einziger
   Akzent eine korallefarbene Linie darueber. Sie ist eine FLAECHE und
   kein Buchstabe; Koralle auf Creme misst 3.06:1 und traegt keinen
   Text. */
.ak-pub-abschluss {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--ak-sp-4);
  padding-block: 8px 0;
}

.ak-pub-abschluss::before {
  content: "";
  width: 64px;
  height: 4px;
  border-radius: 999px;
  background: var(--ak-marke-koralle);
  margin-bottom: var(--ak-sp-4);
}

.ak-pub-abschluss .ak-marke-zeichen { width: 72px; height: auto; }
.ak-pub-abschluss h2 { max-width: 20ch; text-wrap: balance; }
.ak-pub-abschluss p { max-width: 54ch; margin: 0; }
.ak-pub-abschluss .ak-pub-hero-ctas { justify-content: center; }

.ak-pub-abschluss-hinweis {
  margin: 0;
  font-size: var(--ak-fs-meta);
  color: var(--ak-ink-3);
}

@media (max-width: 767px) {
  .ak-pub-abschluss .ak-marke-zeichen { width: 56px; }
  .ak-pub-abschluss .ak-pub-hero-ctas { width: 100%; }
  .ak-pub-abschluss .ak-pub-hero-ctas .ak-btn { flex: 1 1 100%; justify-content: center; }
}

/* ══ 14 · FUSSBEREICH ═══════════════════════════════════════════════════ */
.ak-pub-footer-spalte a:hover { color: var(--ak-marke-koralle-tief); }
.ak-pub-footer-marke p { color: var(--ak-ink-2); }

@media (max-width: 767px) {
  .ak-pub-footer { padding-block: var(--ak-sp-6) var(--ak-sp-4); }
  .ak-pub-footer-raster { gap: 20px 18px; margin-bottom: 20px; }
  .ak-pub-footer-marke { grid-column: 1 / -1; min-width: 0; }
  .ak-pub-footer-marke .ak-pub-marke { margin-bottom: 10px; }
  .ak-pub-footer-about { margin: 0; max-width: 46ch; }
  .ak-pub-sozial { margin-top: 10px; }
  .ak-pub-footer-spalte h2 { margin-bottom: 6px; }
  .ak-pub-footer-spalte ul { gap: 0; }
  /* KEIN `min-height` — die 44 px aus design-components.css bleiben
     (WCAG 2.5.5). Kompakter wird alles andere. */
  .ak-pub-footer-spalte a { gap: 10px; align-items: center; }
  .ak-pub-footer-spalte a .ak-ic-svg,
  .ak-pub-footer-spalte a svg { flex: 0 0 auto; }
  .ak-pub-footer-unten {
    margin-top: var(--ak-sp-4);
    padding-top: var(--ak-sp-3);
    gap: 4px 10px;
    align-items: center;
  }
  .ak-pub-footer-unten p { flex: 0 1 auto; }
  .ak-pub-sozial a { width: 36px; height: 36px; }
}


.ak-pub-footer-spalte a[href^="mailto:"] {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

/* ══ 15 · MARKENSPUREN AUF DEN UNTERSEITEN ══════════════════════════════ */
.ak-pub-reiter a[aria-current="page"] {
  background: var(--ak-marke-navy);
  border-color: var(--ak-marke-navy);
  color: var(--ak-marke-auf-navy);
}
.ak-pub-legal-toc a:hover,
.ak-pub-legal-toc a:focus-visible { color: var(--ak-marke-koralle-tief); }
.ak-pub-faq-item[open] .ak-pub-faq-marker,
.ak-pub-faq-item summary:hover .ak-pub-faq-marker { color: var(--ak-marke-koralle); }
.ak-pub-nav a[aria-current="page"] {
  background: var(--ak-marke-navy-tint);
  color: var(--ak-marke-navy);
}

/* ══ 16 · DIE PREMIUMKARTE ══════════════════════════════════════════════
   Karte, Preistabelle und Abzeichen wurden ausdruecklich als gut
   bewertet und bleiben in ihrer Form. Nur die Farbe folgt der neuen
   Marke: Navy traegt, die Koralle markiert.
   Das Abzeichen traegt NAVY-Schrift auf Koralle (4.32:1) und ist
   grossgesetzt — weisse Schrift darauf waere 3.26:1 und faellt durch. */
.ak-pub-plan--hervor {
  background: var(--ak-surface);
  border: 2px solid var(--ak-marke-navy);
  box-shadow: var(--ak-marke-schatten-tief);
}
.ak-pub-plan--hervor .ak-pub-plan-name { color: var(--ak-marke-navy); }
.ak-pub-plan--hervor .ak-pub-plan-betrag { color: var(--ak-marke-navy); }
/* GEMESSEN AM GERENDERTEN BILD und danach korrigiert: Navy auf
   Koralle misst 4.32:1. Ich hatte im Entwurf „grossgesetzt" notiert und
   damit die Ausnahme fuer grossen Text angenommen — das Abzeichen steht
   aber in 11,5 px. Fuer normalen Text gelten 4.5:1, und 4.32 reisst sie.
   Weiss auf Koralle waere mit 3.26:1 noch schlechter.
   Das Abzeichen traegt deshalb die TIEFE Koralle mit weisser Schrift:
   5.05:1. Es bleibt warm und in der Markenfamilie, und es ist lesbar. */
.ak-pub-plan-abzeichen {
  background: var(--ak-marke-koralle-tief);
  color: var(--ak-marke-auf-navy);
  font-weight: 700;
}
.ak-pub-plan--hervor .ak-pub-plan-liste .ak-ic-svg { color: var(--ak-marke-koralle-tief); }

.ak-pub-vergleich-tafel thead .ak-pub-vergleich-prem {
  background: var(--ak-marke-navy-tint);
  border-top: 2px solid var(--ak-marke-navy);
  border-bottom: 1px solid var(--ak-line);
  color: var(--ak-marke-navy);
}
.ak-pub-vergleich-tafel tbody .ak-pub-vergleich-prem {
  background: var(--ak-bg-2);
  border-bottom: 1px solid var(--ak-line-soft);
  color: var(--ak-marke-navy);
}

/* ══ 17 · BEWEGUNG — ZURUECKHALTEND ═════════════════════════════════════
   Zwei Bewegungen, mehr nicht: Karten heben sich beim Ueberfahren um
   2 px, Abschnitte blenden beim ersten Erscheinen sanft ein. Das
   Einblenden laeuft OHNE JavaScript ueber `animation-timeline`; wo der
   Browser es nicht kennt, steht der Inhalt sofort da. */
.ak-pub .ak-ref-karte,
.ak-pub .ak-pub-stufenkarte,
.ak-pub .ak-pub-formkarte,
.ak-pub .ak-pub-zielgruppe .ak-pub-bildrahmen {
  transition: transform var(--ak-t-toggle) var(--ak-ease),
              box-shadow var(--ak-t-toggle) var(--ak-ease),
              border-color var(--ak-t-toggle) var(--ak-ease);
}
.ak-pub .ak-ref-karte:hover,
.ak-pub .ak-pub-stufenkarte:hover,
.ak-pub .ak-pub-formkarte:hover,
.ak-pub .ak-pub-zielgruppe:hover .ak-pub-bildrahmen {
  transform: translateY(-2px);
  box-shadow: var(--ak-marke-schatten-tief);
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ak-pub-sec > .ak-pub-breit {
      animation: akPubAuftritt linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 24%;
    }
  }
}

@keyframes akPubAuftritt {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ak-pub .ak-ref-karte,
  .ak-pub .ak-pub-stufenkarte,
  .ak-pub .ak-pub-formkarte,
  .ak-pub .ak-pub-zielgruppe .ak-pub-bildrahmen { transition: none; }
  .ak-pub .ak-ref-karte:hover,
  .ak-pub .ak-pub-stufenkarte:hover,
  .ak-pub .ak-pub-formkarte:hover,
  .ak-pub .ak-pub-zielgruppe:hover .ak-pub-bildrahmen { transform: none; }
}

/* ══ 18 · DIE KOPFZEILE AUF DEM TELEFON ═════════════════════════════════
   GEMESSEN bei 390 px ohne diese Regeln: DREI Reihen, 127 px hoch. Mit
   dem neuen Sperrsatz ist die Marke eine Bilddatei; sie wird deshalb
   nicht mehr geclippt, sondern auf dem Telefon KLEINER gesetzt. Der
   zugaengliche Name steht im `alt` und bleibt in jedem Fall erhalten. */
/* DREI FASSUNGEN, SICHTBAR IST IMMER GENAU EINE.
   Der Schwellenwert ist nicht die Geraeteklasse, sondern was neben der
   Marke steht — deshalb liegt er bei 1100 px (dort klappt die
   Navigation ins Menue) und bei 768 px (dort wird auch daneben eng).

     ab 1100 px    gestapelt 56 px   volle Navigation daneben
     768-1099 px   horizontal 34 px  nur Knopf und „Menü" daneben
     unter 768 px  Bildzeichen 40 px

   `display: none` ist hier richtig und nicht gefaehrlich: der
   zugaengliche Name des Markenlinks haengt an KEINEM der Bilder,
   sondern an einem eigenen Text (siehe header.php). */
.ak-pub-marke-klein { display: none; }
.ak-pub-marke-breit { display: none; }
.ak-pub-marke-voll  { display: inline-flex; }

@media (min-width: 768px) and (max-width: 1259px) {
  .ak-pub-marke-breit { display: inline-flex; }
  .ak-pub-marke-voll  { display: none; }
}

@media (max-width: 767px) {
  /* NUR NOCH DAS TELEFON-ZEICHEN AUSBLENDEN.
     Hier stand bis zum 16.09.2026 (spaet) das Gegenteil: `klein` an,
     `voll` aus — das Telefon trug nur das Bildzeichen ohne Schriftzug.
     Der Eigentuemer hat den Schriftzug auch dort verlangt; die
     massgebliche Regel steht jetzt in Abschnitt 30b. Die alten
     Zeilen sind entfernt statt ueberschrieben: zwei widersprechende
     Regeln fuer dieselbe Breite sind eine Falle fuers naechste Lesen. */
  .ak-pub-marke-breit { display: none; }
  .ak-pub-header-innen { flex-wrap: nowrap; gap: 10px; }
  .ak-pub-burger { flex: 0 0 auto; }
}

/* ══ 19 · HERO AUF DEM TELEFON ══════════════════════════════════════════
   Die Illustration hatte `min-height: 380px` bei 264 px Inhalt — 116 px
   Nichts, und wegen `order: -1` war es das ERSTE, was jemand sah. */
/* AUF DEM TELEFON STEHT DAS MOTIV UNTER DEM TEXT, NICHT DARUEBER.
   Der Bestand setzte `order: -1` — die Zeichnung kam zuerst. Bei einer
   ganzseitigen Szene schoebe das die Ueberschrift und den Kaufknopf
   unter die Falz. Der Einstieg gehoert dem Text; die Szene folgt. */
@media (max-width: 767px) {
  .ak-pub-hero-bild { min-height: 0; order: 1; }
  .ak-pub-hero-raster { gap: 20px; padding-top: 18px; }
  .ak-pub-hero-motiv { max-width: 420px; margin-inline: auto; }
}

/* ══ 20 · DER GESPERRTE KNOPF BLEIBT GESPERRT ═══════════════════════════
   `.ak-pub .ak-btn--primary` hat dieselbe Spezifitaet wie
   `.ak-btn:disabled` und steht in der spaeter geladenen Datei — der
   gesperrte Knopf der Probeaufgabe sah danach nach „jetzt druecken" aus. */
.ak-pub .ak-btn:disabled,
.ak-pub .ak-btn[aria-disabled="true"] {
  background: var(--ak-line);
  color: var(--ak-ink-2);
  border-color: var(--ak-line);
  box-shadow: none;
  cursor: not-allowed;
}

/* ══ 21 · DAS MENUE ALS KLAPPFLAECHE ════════════════════════════════════
   GEMESSENER FEHLER, und zwar ein schwerer.

   Die eingeklappte Navigation war als UMBRUCH gebaut: `order: 5`,
   `width: 100%` — sie sollte in der Kopfzeile auf eine zweite Zeile
   rutschen. Das setzt voraus, dass die Zeile umbrechen DARF.
   `.ak-pub-header-innen` traegt aber `flex-wrap: nowrap` (aus der
   Zusammenfuehrung M5b-2), und meine Telefonregel hat es bestaetigt.
   Ergebnis, gemessen mit geoeffnetem Menue:

     390 px    Kopfzeile 550 px hoch, Eintraege 103 px breit,
               senkrecht rechts aus dem Bild heraus
     1024 px   Kopfzeile 480 px hoch, Eintraege bei x = 417

   Die Navigation stand also NEBEN der Marke in der Zeile statt darunter.

   DIE UMBRUCHLOESUNG WIRD NICHT REPARIERT, SIE WIRD ERSETZT.
   Ein Menue, das die Kopfzeile selbst hoeher macht, schiebt beim
   Oeffnen die ganze Seite nach unten — und haengt davon ab, dass
   niemand je `nowrap` setzt. Die Klappflaeche liegt statt dessen UNTER
   dem Kopf, nimmt die volle Breite und beruehrt die Zeile nicht.
   Damit ist der Kopf in jedem Zustand gleich hoch. */
@media (max-width: 1259px) {
  .ak-pub-header { position: sticky; }

  .has-js .ak-pub-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    /* `order` spielt keine Rolle mehr — das Element ist aus dem Fluss. */
    background: var(--ak-surface);
    border-bottom: 1px solid var(--ak-line);
    box-shadow: var(--ak-marke-schatten-tief);
    /* Sehr lange Menues auf kleinen Geraeten: scrollen statt den
       Bildschirm zu sprengen. 100vh minus Kopfhoehe. */
    max-height: calc(100vh - 100%);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .has-js .ak-pub-nav ul {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--ak-sp-3) clamp(18px, 4vw, 40px);
    border-top: 0;
    gap: 2px;
  }

  /* Die Zeile selbst bleibt EINE Zeile — in jedem Zustand. */
  .ak-pub-header-innen { position: relative; flex-wrap: nowrap; }

  /* `li > a` — siehe oben. GEMESSEN am 16.09.2026: ohne diese
     Einschraenkung bekam der Anker der AKTIVEN SPRACHE den 10-px-Radius
     dieser Regel (0,2,1 schlaegt `.ak-pub-lang a` mit 0,1,1). Die
     weisse Flaeche stand damit als Rechteck mit 10 px Radius in einer
     Kapsel mit 25,5 px und ragte sichtbar heraus — die „falsche
     Darstellung" des Umschalters im Menue. */
  .has-js .ak-pub-nav li > a {
    padding: 12px var(--ak-sp-3);
    border-radius: var(--ak-r-btn);
  }
  .has-js .ak-pub-nav li > a:hover { background: var(--ak-marke-navy-tint); }
}

/* Der Anmelde-Eintrag steht auf dem Telefon IM Menue und daneben im
   Kopf — genau einer von beiden ist je Breite sichtbar. Im Tablet-Band
   ist im Kopf Platz, dort bleibt er oben.

   ZWEI SCHWELLEN WAREN EINE ZU VIEL (gemessen 16.09.2026): der
   Menueeintrag verschwand ab 561 px, der Kopfeintrag kam erst ab
   768 px — zwischen 561 und 767 px gab es GAR KEINEN Anmeldeweg. Das
   fiel vorher nicht auf, weil eine andere Regel den Menueeintrag
   faelschlich ueberall sichtbar liess. Beide Seiten schalten jetzt bei
   561 px. */
@media (min-width: 561px) {
  .ak-pub-nav-anmelden { display: none; }
  .ak-pub-anmelden { display: inline-flex; }
}

/* ══ 22 · KURSUEBERSICHT: ZWEI SPALTEN STATT KARTE MIT KOPFBAND ═════════
   BEFUND (B-2, 16.09.2026): die Reihe trug drei Schemata gleichzeitig —
   6 px Farbstreifen links, Rahmen, Radius — und darin ein auf
   1161 x 194 px zugeschnittenes Motiv. Gemessen war das ein Ausschnitt
   aus einem 3:2-Bild: der groesste Teil fehlte.

   Die Reihe verliert deshalb den Farbstreifen UND den Rahmen. Das Motiv
   steht vollstaendig in einer eigenen Spalte, der Text daneben. Die
   Stufenfarbe bleibt — im Abzeichen, im Stufencode und als Grund des
   Motivs, also dort, wo sie etwas bedeutet, nicht als Rand um eine Box. */
.ak-stufen-reihe {
  background: var(--ak-surface);
  border: 0;
  border-radius: var(--ak-r-card);
  box-shadow: var(--ak-marke-schatten);
  padding: 0;
  overflow: hidden;
  display: grid;
  gap: 0;
}

@media (min-width: 900px) {
  .ak-stufen-reihe { grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); align-items: center; }
}

.ak-stufen-motiv {
  background: var(--ak-stufe-weich, var(--ak-a1-soft));
  display: grid;
  place-items: center;
  align-self: stretch;
  /* KEIN INNENABSTAND. Gemessen am 16.09.2026: die Motive bringen einen
     eigenen cremefarbenen Grund mit. Mit Abstand auf dem weichen
     Stufenton wurde daraus ein heller Kasten in einem hellen Kasten —
     genau das Schema, das hier verschwinden soll. Das Bild laeuft
     deshalb bis an die Spaltenkanten; der Stufenton bleibt als Band
     ueber und unter dem Motiv und wirkt als Flaeche, nicht als Rahmen. */
  padding: 0;
}

/* VOLLSTAENDIG. Das war der Kern der Beanstandung: kein `cover`. */
.ak-stufen-motiv img { display: block; width: 100%; height: auto; object-fit: contain; }

.ak-stufen-reihe .ak-stufen-innen { padding: clamp(22px, 2.6vw, 32px); }

/* Die Textspalte ist jetzt schmaler als die ganze Reihe vorher. Mit
   minmax(260px) sprangen Ziele und Beispielsatz schon bei 1024 px
   nebeneinander und wurden zu zwei Spalten a 250 px. Ab 1200 px ist
   genug Platz, vorher nicht. */
@media (max-width: 1199px) {
  .ak-stufen-innen { grid-template-columns: 1fr; gap: 22px; }
}

/* ══ 23 · KURSDETAIL: KOPF MIT MOTIV, EIN PANEL STATT VIELER KARTEN ═════
   Die Detailseite stand als Kasten-in-Kasten-in-Kasten: Kopfkarte, darin
   ein 70-px-Abzeichenkasten, der dieselbe Stufe nannte wie die H1
   daneben; darunter vier Raster mit insgesamt zehn gleich aussehenden
   weissen Karten.

   Jetzt: der Kopf traegt das Stufenmotiv und oeffnet die Seite. Jedes
   Raster ist EIN Panel mit mehreren Abschnitten darin statt mehrerer
   Panels nebeneinander — gleiche Information, sichtbar weniger Kaesten. */
.ak-stufe-kopfkarte {
  display: grid;
  background: var(--ak-surface);
  border: 0;
  border-radius: var(--ak-r-card-lg);
  box-shadow: var(--ak-marke-schatten);
  padding: 0;
  overflow: hidden;
}

@media (min-width: 900px) {
  .ak-stufe-kopfkarte { grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); align-items: center; }
}

.ak-stufe-kopfmotiv {
  background: var(--ak-stufe-weich, var(--ak-a1-soft));
  display: grid; place-items: center; align-self: stretch;
  padding: 0; /* siehe Begruendung bei .ak-stufen-motiv */
}
.ak-stufe-kopfmotiv img { display: block; width: 100%; height: auto; object-fit: contain; }

.ak-stufe-kopftext { padding: clamp(24px, 3vw, 38px); }
.ak-stufe-kopfkarte .ak-stufe-kopfzeile { margin-bottom: 14px; }
.ak-stufe-kopftext > p:last-child {
  font-size: var(--ak-fs-lg); line-height: 1.7; color: var(--ak-ink-2); margin: 0;
}

/* EIN Panel je Gruppe. Das Raster mit der dunklen Abschlusskarte bleibt
   ausgenommen — ein weisses Panel um eine dunkle Karte waere genau der
   Kasten-in-Kasten, der hier verschwinden soll. */
.ak-stufe-raster:not(:has(.ak-stufe-dunkel)) {
  background: var(--ak-surface);
  border-radius: var(--ak-r-card);
  box-shadow: var(--ak-marke-schatten);
  padding: clamp(22px, 2.6vw, 30px);
  gap: 0;
  column-gap: clamp(26px, 3.2vw, 44px);
  row-gap: 22px;
}

.ak-stufe-raster:not(:has(.ak-stufe-dunkel)) .ak-stufe-karte {
  background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none;
}

/* Einspaltig (unter 620 px kann das auto-fit-Raster mit minmax(280px)
   rechnerisch nicht zweispaltig werden) braucht es eine Trennung, sonst
   laufen die Abschnitte ineinander. */
@media (max-width: 619px) {
  .ak-stufe-raster:not(:has(.ak-stufe-dunkel)) .ak-stufe-karte + .ak-stufe-karte {
    border-top: 1px solid var(--ak-line); padding-top: 22px;
  }
}

/* Die letzte Gruppe: Beispielaufgabe neben dem dunklen Abschluss. Die
   helle Karte behaelt ihren Rahmen — sie steht dort allein. */
.ak-stufe-einheiten { border: 0; box-shadow: var(--ak-marke-schatten); }
.ak-stufe-raster:has(.ak-stufe-dunkel) .ak-stufe-karte {
  border: 0; box-shadow: var(--ak-marke-schatten);
}

/* Stufentoene als Variablen auf der allgemeinen Stufenklasse. Sie standen
   bisher nur auf `.ak-stufen-reihe--xx`, also nur auf der Uebersicht;
   der Kopf der Detailseite braucht sie ebenfalls. */
.ak-pub-stufe--a1 { --ak-stufe: var(--ak-a1); --ak-stufe-weich: var(--ak-a1-soft); --ak-stufe-tief: var(--ak-a1-deep); }
.ak-pub-stufe--a2 { --ak-stufe: var(--ak-a2); --ak-stufe-weich: var(--ak-a2-soft); --ak-stufe-tief: var(--ak-a2-deep); }
.ak-pub-stufe--b1 { --ak-stufe: var(--ak-b1); --ak-stufe-weich: var(--ak-b1-soft); --ak-stufe-tief: var(--ak-b1-deep); }
.ak-pub-stufe--b2 { --ak-stufe: var(--ak-b2); --ak-stufe-weich: var(--ak-b2-soft); --ak-stufe-tief: var(--ak-b2-deep); }
.ak-pub-stufe--c1 { --ak-stufe: var(--ak-c1); --ak-stufe-weich: var(--ak-c1-soft); --ak-stufe-tief: var(--ak-c1-deep); }
.ak-pub-stufe--c2 { --ak-stufe: var(--ak-c2); --ak-stufe-weich: var(--ak-c2-soft); --ak-stufe-tief: var(--ak-c2-deep); }

/* GEGENSTUECK ZUM DATEI-WAECHTER: `LevelContent::heroMotiv()` gibt null
   zurueck, wenn das Motiv fehlt. Dann darf die Reihe nicht mit einer
   leeren ersten Spalte stehenbleiben. */
@media (min-width: 900px) {
  .ak-stufen-reihe:not(:has(.ak-stufen-motiv)),
  .ak-stufe-kopfkarte:not(:has(.ak-stufe-kopfmotiv)) { grid-template-columns: 1fr; }
}

/* ══ 24 · MOBILER FUSSBEREICH ═══════════════════════════════════════════
   GEMESSEN 16.09.2026 vor der Aenderung: 1414 px bei 390 px Breite,
   1436 px bei 360 px. Achtzehn Verweise standen einspaltig
   untereinander, darueber eine Markenspalte mit einem zweiten
   Instagram-Ziel, das in der Spalte „Iletisim" ohnehin schon steht.

   DREI EINGRIFFE, KEINER DAVON AUF KOSTEN DER 44-PX-ZIELE:
     a) das Symbol beruehrte den Text (Abstand gemessen 0 px) — Ursache
        war eine Spezifitaetsfalle, siehe unten;
     b) die Gruppen stehen zu zweit nebeneinander, die laengste
        (Rechtliches, acht Eintraege) ueber die volle Breite mit zwei
        Spalten Verweisen;
     c) das doppelte Instagram-Quadrat der Markenspalte entfaellt auf
        dem Telefon — dasselbe Ziel steht acht Zeilen tiefer im Text. */
@media (max-width: 767px) {
  .ak-pub-footer-raster { grid-template-columns: 1fr 1fr; gap: 22px 16px; }
  .ak-pub-footer-marke { grid-column: 1 / -1; }

  /* Die Rechtsspalte ist die laengste. Volle Breite, Verweise zweispaltig.
     NICHT `:last-of-type` — die Gruppen sind teils <nav>, teils <div>,
     und `:last-of-type` matcht den letzten JE TYP: also Rechtliches UND
     Iletisim (das einzige <div>). Gemessen war die Folge, dass die
     E-Mail-Adresse in eine 161-px-Spalte lief und den Instagram-Verweis
     ueberschrieb. `:last-child` meint genau eine Gruppe. */
  .ak-pub-footer-spalte:has(li:nth-child(4)) { grid-column: 1 / -1; }
  .ak-pub-footer-spalte:has(li:nth-child(4)) ul {
    grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px;
  }

  /* DOPPELTES ZIEL. Das Quadrat der Markenspalte und der Verweis in
     „Iletisim" fuehren an dieselbe Stelle. Auf dem Telefon bleibt der
     mit Beschriftung; das Quadrat verschwindet. Ab 768 px stehen die
     Spalten nebeneinander, dort kostet es keine Hoehe und bleibt. */
  .ak-pub-sozial { display: none; }

  .ak-pub-footer > .ak-pub-breit { padding-top: 32px; }
}


/* ══ 25 · ZIELGRUPPEN UND LERNFORMEN — BILD UND TEXT ALS EINE EINHEIT ════
   BEFUND (B-5, 16.09.2026):
     · Lernformen: jedes Motiv stand in einem Bildrahmen, der Rahmen in
       einer weissen Karte mit Rand und Radius, und das Motiv bringt
       seinen eigenen cremefarbenen Grund mit. Drei Kaesten um eine
       Zeichnung.
     · Auf dem Telefon wurde daraus ein Bilderbuch: sechs quadratische
       Motive untereinander, gemessen 2235 px fuer einen Abschnitt, der
       in sechs Zeilen sagen kann, was das Produkt kann.

   DESKTOP: die Karte faellt weg. Es bleibt das Motiv mit einem Radius,
   darunter Titel und Unterzeile — eine Komposition, ein Kasten weniger.
   TELEFON: Zeilen statt Kacheln. Das Motiv schrumpft auf ein Quadrat
   neben dem Text; die Aussage fuehrt, das Bild begleitet sie. Die
   gelieferten Motive bleiben dabei ALLE in Gebrauch — sie werden klein,
   nicht weggelassen. */
.ak-pub-formen .ak-pub-formkarte {
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}
.ak-pub-formen .ak-pub-formkarte .ak-pub-bildrahmen { border-radius: var(--ak-r-card); }
.ak-pub-formen .ak-pub-formkarte-inhalt { padding: 14px 2px 0; }

/* Der Schwebeeffekt hing an der Karte. Ohne Karte hebt sich das Motiv. */
.ak-pub .ak-pub-formkarte:hover { transform: none; }
.ak-pub .ak-pub-formkarte { transition: none; }
.ak-pub .ak-pub-formkarte .ak-pub-bildrahmen { transition: transform var(--ak-t-toggle) var(--ak-ease); }
@media (prefers-reduced-motion: no-preference) {
  .ak-pub .ak-pub-formkarte:hover .ak-pub-bildrahmen { transform: translateY(-3px); }
}

@media (max-width: 767px) {
  .ak-pub-formen { grid-template-columns: 1fr; gap: 0; }

  .ak-pub-formen .ak-pub-formkarte {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--ak-line);
  }
  .ak-pub-formen .ak-pub-formkarte:last-child { border-bottom: 0; }

  .ak-pub-formen .ak-pub-inhaltsbild { aspect-ratio: 1 / 1; }
  .ak-pub-formen .ak-pub-inhaltsbild--zeichen .ak-ic-svg { width: 32px; height: 32px; }

  /* Das Familiensymbol stand neben dem Titel UND als Motiv darueber.
     Neben einem 72-px-Bild ist es das dritte Mal dasselbe Zeichen. */
  .ak-pub-formen .ak-pub-form-zeichen { display: none; }
  .ak-pub-formen .ak-pub-formkarte-inhalt { padding: 0; }
}

/* Zielgruppen: auf dem Telefon dieselbe Zeilenform. Vier Quadrate in
   zwei Reihen sind hier keine Auskunft, sondern eine Galerie. */
@media (max-width: 560px) {
  .ak-pub-zielgruppen { grid-template-columns: 1fr; gap: 0; }
  .ak-pub-zielgruppe {
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--ak-line);
  }
  .ak-pub-zielgruppen .ak-pub-zielgruppe:last-child { border-bottom: 0; }
}

/* ══ 26 · SEITENKOEPFE MIT MOTIV ════════════════════════════════════════
   Die Hero-Serie ist SEITENWEISE gezeichnet: 03 Funktionen, 04 Preise,
   05 SSS, 06 Ueber uns, 07 Hilfe, 08 Kontakt. Genau dort stehen sie.
   Der Kopf wird dafuer zweispaltig; ohne Motiv bleibt er unveraendert
   einspaltig und schmal. */
.ak-pub-kopfblock--motiv {
  max-width: none;
  display: grid;
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
  margin-bottom: clamp(32px, 4vw, 48px);
}

@media (min-width: 900px) {
  .ak-pub-kopfblock--motiv { grid-template-columns: minmax(0, 56fr) minmax(0, 44fr); }
}

/* Die Textspalte behaelt die Zeilenlaenge des einspaltigen Kopfes. */
.ak-pub-kopfblock--motiv .ak-pub-kopfblock-text { max-width: 640px; }

.ak-pub-kopfblock-motiv img { display: block; width: 100%; height: auto; }

/* Auf dem Telefon steht der Text zuerst — er verkauft, das Bild
   begleitet. Die DOM-Reihenfolge ist bereits so; hier nur die Groesse,
   damit das Motiv nicht die halbe erste Ansicht einnimmt. */
@media (max-width: 899px) {
  .ak-pub-kopfblock-motiv img { max-width: 460px; margin-inline: auto; }
}

/* Preise, SSS und Kontakt fuehren ihren Kopf mittig (`--mitte`). Neben
   einem Motiv ergibt das eine zentrierte Textsaeule neben einem
   linksbuendigen Bild — zwei Achsen in einer Zeile. Mit Motiv gilt
   deshalb linksbuendig; ohne Motiv bleibt `--mitte` unveraendert. */
.ak-pub-kopfblock--motiv.ak-pub-kopfblock--mitte { text-align: start; max-width: none; }
.ak-pub-kopfblock--motiv .ak-pub-kopfblock-text { margin-inline: 0; }

/* ══ 27 · FRAGENSEITE IN VOLLER BREITE ══════════════════════════════════
   Die Seite laeuft jetzt auf 1280 px wie jede andere. Damit die
   Antworten dabei nicht ueber die ganze Breite laufen — 1200 px
   Fliesstext liest niemand gern —, traegt der ANTWORTABSATZ die
   Zeilenlaenge. Die Frage selbst darf breit stehen: sie ist eine Zeile,
   kein Fliesstext, und ihr Pfeil gehoert an die rechte Kante. */
.ak-pub-faq-antwort { max-width: 78ch; }

/* ══ 28 · DIE ZEICHEN AUF DEN NEUEN KARTEN SIND NAVY ════════════════════
   Die Lernformkarten tragen seit dem 16.09.2026 die Motive des
   Kartenpakets — Navy, Koralle, Staubblau. Das Zeichen daneben stand
   weiter in `--ak-accent` und das ist der VIOLETTE A1-Ton. Neben einer
   navyfarbenen Zeichnung war das die einzige violette Flaeche im Bild.

   GEAENDERT WIRD NUR DIESE STELLE. `--ak-accent` zeigt projektweit auf
   `--ak-a1`; ihn umzulegen faerbte Preise, Eyebrows, Links und Chips auf
   allen Seiten um. Das ist eine Markenentscheidung und gehoert nicht in
   eine Bildrunde. */
.ak-pub-formkarte .ak-pub-form-zeichen {
  background: var(--ak-marke-navy-tint);
  color: var(--ak-marke-navy);
}

/* ══ 29 · FUENF BEFUNDE DES EIGENTUEMERS (16.09.2026, abends) ═══════════ */

/* 29a · DER HAKEN WAR ROT.
   `.ak-pub-hero-punkte .ak-ic-svg` stand auf `--ak-marke-koralle-tief`.
   Koralle ist der Akzent der Marke — aber ein Haken in Rot liest sich
   als Warnung, nicht als Zusage, und er steht neben „Kredi kartı
   gerekmez". Jetzt derselbe gruene Tiefton, den die Lernziele der
   Stufenseiten schon tragen (`--ak-a2-deep`, hier ueber den
   Bedeutungsnamen). Gemessen auf Creme 4,88:1, auf Weiss 5,21:1, auf
   dem warmen Band 4,67:1 — ueberall ueber der 3:1-Schwelle fuer
   nichttextliche Elemente (WCAG 1.4.11). */
.ak-pub-hero-punkte .ak-ic-svg,
.ak-pub-haken .ak-ic-svg { color: var(--ak-success-fg-2); }

/* 29b · DIE VERTRAUENSLEISTE KLEBTE AM RAND.
   `.ak-pub-streifen-sec` hatte `padding: 24px 0 0` — unten NULL. Die
   Leiste schloss damit hart mit dem Heroblock ab. */
.ak-pub-streifen-sec { padding: clamp(24px, 3vw, 34px) 0 clamp(36px, 4.5vw, 56px); }
@media (max-width: 767px) {
  .ak-pub-streifen-sec { padding: 16px 0 32px; }
}

/* 29c · DIE KARTENMOTIVE SIND FREIGESTELLT — ALSO KEIN GRUND MEHR.
   Die zehn Motive tragen seit `scripts/karten-freistellen.py` einen
   durchsichtigen Grund. Ein Rahmen mit eigener Flaeche darunter waere
   jetzt genau das Rechteck, das verschwinden sollte: gemessen lagen die
   Bildgruende je Karte zwischen (251,248,242) und (255,251,245), der
   Seitengrund bei (251,247,241) — sichtbar unterschiedlich getoente
   Vierecke auf einer Seite. */
.ak-pub-formen .ak-pub-bildrahmen,
.ak-pub-zielgruppe .ak-pub-bildrahmen {
  background: none;
  box-shadow: none;
  border-radius: 0;
}

/* 29d · DER SCHATTEN BEIM UEBERFAHREN SASS AUF DER BILDKANTE.
   Er lag am Rahmen: ein rechteckiger Schlagschatten um ein Bild, das
   selbst gar kein Rechteck ist — an der Kante sichtbar abgeschnitten.
   Ohne Flaeche gibt es nichts mehr zu beschatten. Die Rueckmeldung
   traegt jetzt eine kleine Bewegung und ein leichtes Anheben, und der
   Schatten liegt als Filter an der FORM des Motivs, nicht am Kasten. */
/* DER RECHTECKIGE SCHLAGSCHATTEN MUSS AUSDRUECKLICH WEG.
   Er kommt aus Abschnitt 17 (`.ak-pub .ak-pub-formkarte:hover`, 0,3,0)
   und traf jetzt eine Karte OHNE Flaeche: gerendert blieb ein graues
   Viereck um ein freigestelltes Motiv stehen. Die Regel hier ist eine
   Klasse spezifischer (0,4,0) und nimmt beides zurueck — Flaeche und
   Schatten. */
.ak-pub .ak-pub-formen .ak-pub-formkarte,
.ak-pub .ak-pub-formen .ak-pub-formkarte:hover,
.ak-pub .ak-pub-zielgruppen .ak-pub-zielgruppe:hover .ak-pub-bildrahmen {
  box-shadow: none;
  background: none;
  transform: none;
}

.ak-pub .ak-pub-formkarte .ak-pub-bildrahmen,
.ak-pub .ak-pub-zielgruppe .ak-pub-bildrahmen {
  transition: transform var(--ak-t-toggle) var(--ak-ease),
              filter var(--ak-t-toggle) var(--ak-ease);
}

/* Die Rueckmeldung liegt jetzt an der FORM des Motivs (`drop-shadow`
   folgt dem Alphakanal), nicht am Kasten darum. */
@media (prefers-reduced-motion: no-preference) {
  .ak-pub .ak-pub-formen .ak-pub-formkarte:hover .ak-pub-bildrahmen {
    transform: translateY(-4px) scale(1.02);
    filter: drop-shadow(0 10px 16px rgb(23 43 77 / .16));
  }
  .ak-pub .ak-pub-zielgruppen .ak-pub-zielgruppe:hover .ak-pub-bildrahmen {
    transform: translateY(-3px);
    filter: drop-shadow(0 8px 14px rgb(23 43 77 / .14));
  }
}
@media (prefers-reduced-motion: reduce) {
  .ak-pub .ak-pub-formen .ak-pub-formkarte:hover .ak-pub-bildrahmen,
  .ak-pub .ak-pub-zielgruppen .ak-pub-zielgruppe:hover .ak-pub-bildrahmen {
    transform: none; filter: none;
  }
}

/* 29e · DAS LOGO IM FUSS WAR ZU KLEIN, UND DER KANALKNOPF STAND ALLEIN.
   Der Schriftzug steht auf 38 statt 28 px (in der Vorlage), das Zeichen
   waechst mit. Neben Instagram steht jetzt TikTok — zwei Knoepfe in
   einer Reihe. */
.ak-pub-footer-marke .ak-pub-marke .ak-marke-zeichen { width: 40px; }
.ak-pub-footer-marke .ak-pub-marke .ak-marke-sperrsatz { height: 38px; width: auto; }
.ak-pub-sozial { display: flex; gap: 8px; flex-wrap: wrap; }

/* 29f · DIE ZEICHEN DER VERTRAUENSLEISTE STANDEN NOCH VIOLETT.
   Gleiche Begruendung wie in Abschnitt 28: `.ak-ic-chip` nimmt
   `--ak-accent`, und der zeigt projektweit auf den A1-Ton. Die Leiste
   steht unmittelbar unter dem navyfarbenen Hero — dort faellt es am
   meisten auf. Geaendert wird wieder NUR diese Flaeche, nicht das
   Bauteil: `--ak-accent` umzulegen bleibt eine Markenentscheidung. */
.ak-pub-streifen .ak-ic-chip {
  background: var(--ak-marke-navy-tint);
  color: var(--ak-marke-navy);
}

/* ══ 30 · VIER BEFUNDE DES EIGENTUEMERS (16.09.2026, spaet) ═════════════ */

/* 30a · DIE ZEILEN IM KLAPPMENUE WAREN KEINE ZEILEN.
   Gemessen bei 390 UND 834 px: jeder Eintrag war ein `inline-block`, so
   breit wie sein Text (80 bis 116 px) und 68 px hoch — die aktive Seite
   bekam eine Pille, die mitten in der Flaeche endete, und zwischen den
   Eintraegen standen Luecken, die aussahen wie Fehler.

   URSACHE: dieselbe Spezifitaetsfalle wie im Fussbereich.
   `.ak li > a` aus design-components.css (0,1,2) setzt fuer grobe Zeiger
   `display: inline-block` und `line-height: 44px`. Die Menueregel
   `.has-js .ak-pub-nav a` (0,2,0) verliert dagegen.

   `.ak.has-js` OHNE LEERZEICHEN — beide Klassen sitzen auf demselben
   Element (`<body class="ak ak-pub has-js">`; `app.js` setzt `has-js`
   auf html UND body). Der erste Versuch schrieb `.ak .has-js` mit
   Leerzeichen und verlangte damit ein `.has-js` INNERHALB von `.ak`.
   Das gibt es nicht — die Regel griff nie, gemessen am gerenderten
   Menue.

   Die Flaeche bleibt (min-height 48 px, mehr als die geforderten 44);
   nur die Zeilenhoehe kehrt auf einen Schriftwert zurueck, und die Zeile
   nimmt die ganze Breite — genau so, wie man ein Menue bedient. */
@media (max-width: 1259px) {
  .ak.has-js .ak-pub-nav ul {
    display: grid;
    /* BEIDE ZEILEN SIND NOETIG, GEMESSEN BEI 834 px.
       Die Leiste erbt ab 768 px `justify-content: center` aus der
       Navigationsregel. Im Gitter zentriert das die SPUREN — und eine
       `auto`-Spur wird dann nur so breit wie ihr Inhalt: gemessen
       135,8 px in einer 818 px breiten Liste. Mit einer `1fr`-Spur und
       `stretch` fuellt sie die Breite. */
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    gap: 2px;
    padding: var(--ak-sp-2) 0 var(--ak-sp-3);
  }

  .ak.has-js .ak-pub-nav li { display: block; }

  .ak.has-js .ak-pub-nav li > a {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 10px 14px;
    line-height: 1.3;
    border-radius: var(--ak-r-input);
    font-size: var(--ak-fs-body);
    font-weight: 600;
    color: var(--ak-ink-2);
  }

  .ak.has-js .ak-pub-nav li > a:hover { background: var(--ak-bg-2, var(--ak-bg)); color: var(--ak-ink); }

  /* Die aktive Seite fuellt die Zeile, statt als Pille im Nichts zu
     stehen. */
  .ak.has-js .ak-pub-nav li > a[aria-current="page"] {
    background: var(--ak-marke-navy-tint);
    color: var(--ak-marke-navy);
  }

  .ak.has-js .ak-pub-nav .ak-pub-nav-ic { flex: 0 0 auto; }

  /* „Giriş yap" ist der einzige Eintrag ohne Symbol — sein Text begann
     25 px weiter links als alle anderen. Der Einzug gleicht Symbol und
     Abstand aus, damit die Beschriftungen eine Kante bilden. */
  .ak.has-js .ak-pub-nav li > a:not(:has(.ak-pub-nav-ic)) { padding-left: 39px; }
}

/* 30b · AUF DEM TELEFON STEHT JETZT AUCH DER SCHRIFTZUG.
   Bisher trug das Telefon nur das Bildzeichen. Genommen wird der
   GESTAPELTE Satz — derselbe wie auf dem Schreibtisch und der schmalste
   der drei: bei 32 px Hoehe 91 px breit, waehrend der waagerechte bei
   derselben Lesbarkeit 160 px braeuchte.

   GEMESSEN bei 360 px (Inhaltsbreite 308): Schriftzug 91 + Kaufknopf 141
   + Klappknopf 44 + zwei Luecken 20 = 296. Mit beschriftetem Klappknopf
   waeren es 347 — deshalb traegt er unter 430 px nur das Zeichen und
   seinen vorgelesenen Namen. */
@media (max-width: 767px) {
  .ak-pub-marke-klein { display: none; }
  .ak-pub-marke-voll  { display: inline-flex; }
  .ak-pub-marke-voll .ak-marke-gestapelt { height: 38px; width: auto; }
}

/* Die Groessen dieser Stufe stehen jetzt in Abschnitt 31e — der
   Eigentuemer wollte den Schriftzug eine Stufe groesser. Hier stand
   32 px und ein `font-size: 0` am ganzen Klappknopf; letzteres haette
   die neuen Balken mit eingeschrumpft. */

/* 30c · DER FUSSBEREICH BRICHT NICHT MEHR SCHIEF UM.
   GEMESSEN vorher: bei 834 und 900 px standen VIER Gruppen in der ersten
   Reihe und die fuenfte allein in der zweiten — der Umbruch, den der
   Eigentuemer beanstandet hat.

   Die Spaltenzahl wird deshalb nicht mehr ausgerechnet (`auto-fit`),
   sondern gesetzt — und zwar nur auf Zahlen, die AUFGEHEN:
     · unter 620 px   EINE Spalte, alles untereinander
     · 620 bis 1023   Marke ueber die volle Breite, darunter 2 x 2
     · ab 1024 px     alle fuenf nebeneinander
   Es gibt keine Breite mehr, bei der eine Gruppe allein in einer Reihe
   steht. */
@media (max-width: 619px) {
  .ak-pub-footer-raster { grid-template-columns: 1fr; gap: 26px; }
  .ak-pub-footer-marke { grid-column: auto; }
  /* Untereinander heisst untereinander: auch die Verweise selbst. */
  .ak-pub-footer-spalte:has(li:nth-child(4)) { grid-column: auto; }
  .ak-pub-footer-spalte:has(li:nth-child(4)) ul { grid-template-columns: 1fr; }
}

@media (min-width: 620px) and (max-width: 1023px) {
  .ak-pub-footer-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
  .ak-pub-footer-marke { grid-column: 1 / -1; }
  .ak-pub-footer-spalte:has(li:nth-child(4)) { grid-column: auto; }
  .ak-pub-footer-spalte:has(li:nth-child(4)) ul { grid-template-columns: 1fr; }
}

@media (min-width: 1024px) {
  .ak-pub-footer-raster { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ak-pub-footer-marke { grid-column: auto; }
}

/* 30d · DIE VERTRAUENSLEISTE HAT KEINE WAISENREIHE MEHR.
   GEMESSEN vorher, fuenf Kacheln mit `auto-fit`:
     480-620 px  2 + 2 + 1     900-1024 px  4 + 1
   Beide enden mit einer einzelnen Kachel; bei 900 px sah man das am
   deutlichsten.

   Fuenf Kacheln gehen nur in EINER oder FUENF Spalten glatt auf. Der
   Mittelbereich loest es ueber ein Sechserraster: die ersten drei
   spannen je zwei Spuren, die letzten zwei je drei — beide Reihen sind
   damit vollstaendig gefuellt, ohne Loch am Ende.

   Fuenf nebeneinander erst ab 1160 px: darunter blieben je Kachel unter
   200 px, und die Beschriftung brach mitten im Wort um (das zweite
   Bild des Eigentuemers). */
.ak-pub-streifen { grid-template-columns: 1fr; }

@media (min-width: 620px) and (max-width: 1259px) {
  .ak-pub-streifen { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ak-pub-streifen li:nth-child(-n+3) { grid-column: span 2; }
  .ak-pub-streifen li:nth-child(n+4)  { grid-column: span 3; }
  /* Die dritte Kachel schliesst die erste Reihe ab. */
  .ak-pub-streifen li:nth-child(3) { border-right: 0; }
  .ak-pub-streifen li:nth-child(n+4) { border-top: 1px solid var(--ak-line); }
}

@media (min-width: 1260px) {
  .ak-pub-streifen { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* 30b-2 · UNTER 360 px WIRD ES WIRKLICH ENG.
   GEMESSEN bei 320 px (Inhaltsbreite 268): Schriftzug 91 + Kaufknopf 141
   + Klappknopf 44 + Luecken 20 = 296 — 28 px zu viel. Der Kopf haette
   umgebrochen. Eine Stufe kleiner, und der Kaufknopf mit knapperem
   Innenabstand: 79 + 125 + 44 + 20 = 268. Die 44-px-Flaechen bleiben. */
@media (max-width: 359px) {
  /* Groessen siehe Abschnitt 31e. */
  .ak-pub-header-innen { gap: 8px; }
}

/* 30e · ZWEI WEGE NEBENEINANDER PASSEN NICHT IMMER NEBENEINANDER.
   GEMESSEN bei 320 px auf der DEUTSCHEN Startseite: die Knopfreihe des
   Hero hatte eine Mindestbreite von 306 px („Mit der kostenlosen Lektion
   beginnen" laesst sich nicht schmaler setzen), die Inhaltsspalte aber
   nur 304 — die Seite lief 12 px ueber und liess sich waagerecht
   schieben. Auf Tuerkisch fiel das nicht auf, weil die Beschriftungen
   kuerzer sind.

   Unter 420 px stehen die beiden Wege deshalb untereinander und nehmen
   je die volle Breite. Das ist auf einem Telefon ohnehin die bessere
   Form: zwei volle Flaechen statt zwei halber. */
@media (max-width: 419px) {
  .ak-pub-hero-ctas { flex-wrap: wrap; }
  .ak-pub-hero-ctas .ak-btn {
    flex: 1 1 100%;
    justify-content: center;
    /* VOLLE BREITE ALLEIN REICHTE NICHT. Der Bestand setzt Knoepfe auf
       `white-space: nowrap` — „Mit der kostenlosen Lektion beginnen"
       blieb damit 306 px breit, auch als der Knopf die ganze Zeile
       bekam. Auf dieser Breite darf die Beschriftung umbrechen. */
    white-space: normal;
    text-align: center;
  }
}

/* ══ 31 · SECHS BEFUNDE DES EIGENTUEMERS (16.09.2026, nachts) ═══════════ */

/* 31a · DER ANMELDEWEG STAND IM TABLETMODUS ZWEIMAL.
   REGRESSION AUS ABSCHNITT 30a, und zwar meine eigene: dort steht
   `.ak.has-js .ak-pub-nav li { display: block; }` mit (0,3,1). Die
   Regel, die den Menueeintrag ab 561 px ausblendet, hat (0,1,0) und
   verlor. Im Tablet stand „Giriş yap" damit oben im Kopf UND im Menue.
   Die Absicht steht unveraendert weiter oben: genau EINER von beiden
   ist je Breite sichtbar. Hier bekommt sie nur das noetige Gewicht. */
@media (min-width: 561px) {
  .ak.has-js .ak-pub-nav .ak-pub-nav-anmelden { display: none; }
}

/* 31b · DER KLAPPKNOPF WIRD ZUM KREUZ.
   Drei eigene Balken statt eines Symbols aus dem Bestand. Offen dreht
   sich der obere um +45, der untere um -45 Grad, der mittlere
   verschwindet. Gesteuert ueber `aria-expanded` am Knopf — kein
   zusaetzliches JavaScript, und der Zustand bleibt dort, wo ihn auch
   ein Vorleseprogramm liest. */
.ak-pub-burger-striche {
  display: block;
  position: relative;
  width: 18px;
  height: 14px;
  flex: 0 0 auto;
}

.ak-pub-burger-striche span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--ak-t-toggle) var(--ak-ease),
              opacity var(--ak-t-toggle) var(--ak-ease);
}

.ak-pub-burger-striche span:nth-child(1) { top: 0; }
.ak-pub-burger-striche span:nth-child(2) { top: 6px; }
.ak-pub-burger-striche span:nth-child(3) { top: 12px; }

.ak-pub-burger[aria-expanded="true"] .ak-pub-burger-striche span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.ak-pub-burger[aria-expanded="true"] .ak-pub-burger-striche span:nth-child(2) {
  opacity: 0;
  transform: scaleX(.4);
}
.ak-pub-burger[aria-expanded="true"] .ak-pub-burger-striche span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Ohne Bewegungswunsch springt es um, statt sich zu drehen — das Kreuz
   kommt trotzdem. */
@media (prefers-reduced-motion: reduce) {
  .ak-pub-burger-striche span { transition: none; }
}

/* 31c · DIE HERVORHEBUNG IM MENUE BRAUCHT LUFT AN DEN SEITEN.
   Die Zeile lief bis an beide Kanten der Klappflaeche; die farbige
   Flaeche der aktiven Seite sass damit buendig am Bildschirmrand. */
@media (max-width: 1259px) {
  .ak.has-js .ak-pub-nav ul { padding-inline: clamp(10px, 3vw, 18px); }
  .ak.has-js .ak-pub-nav-sprache { padding: 0 clamp(10px, 3vw, 18px) var(--ak-sp-3); }
}

/* 31d · SPRACHE IM KOPF UND IM MENUE.
   Genau eine der beiden Fassungen ist je Breite sichtbar — dieselbe
   Regel wie beim Anmeldeweg, damit nichts doppelt vorgelesen wird. */
.ak-pub-nav-sprache { display: none; }
.ak-pub-kopf-sprache { display: none; }

@media (max-width: 1259px) {
  .ak.has-js .ak-pub-nav-sprache { display: block; border-top: 1px solid var(--ak-line-soft); padding-top: var(--ak-sp-3); }
}

@media (min-width: 1260px) {
  .ak-pub-kopf-sprache { display: block; }
}

/* 31e · DAS LOGO AUF DEM TELEFON — GROESSEN UND IHRE MESSUNG */
/* AUF DEM TELEFON NUR DAS ZEICHEN, AB TABLET WIEDER DAS WORT.
   Entscheidung des Eigentuemers: unter 768 px traegt der Klappknopf nur
   die drei Striche bzw. das Kreuz, darueber wieder „Menü".
   Das spart 52 px — und genau die bekommt der Schriftzug.

   GEMESSEN (Inhaltsbreite minus Schriftzug, Kaufknopf, Klappknopf und
   Luecken):
     480-767 px  Inhalt ab 444 · Knopf 44 + Kauf 141 + Luecken 20 = 205
                 -> fuer die Marke bleiben ueber 230 px; gesetzt 48 px
                    Hoehe (136 px breit)
     360-479     Inhalt ab 324 -> gesetzt 40 px Hoehe (113 px breit)
     bis 359     Inhalt 268 -> gesetzt 30 px Hoehe (85 px breit)

   Das Wort verschwindet ueber `.ak-pub-burger-wort`, nicht ueber ein
   `font-size: 0` am ganzen Knopf — das haette seit dem Kreuz auch die
   drei Balken mitgeschrumpft. */
@media (max-width: 767px) {
  .ak-pub-marke-voll .ak-marke-gestapelt { height: 48px; }
  .ak-pub-burger-wort { display: none; }
  .has-js .ak-pub-burger { padding: 10px; gap: 0; }
}

@media (max-width: 479px) {
  /* 38 statt 40: gemessen blieben mit 40 px nur 2 px Reserve bei
     360 px Fensterbreite. 38 laesst 7 px. */
  .ak-pub-marke-voll .ak-marke-gestapelt { height: 38px; }
  .ak-pub-header .ak-btn--primary { padding: 13px 16px; }
}

@media (max-width: 359px) {
  .ak-pub-marke-voll .ak-marke-gestapelt { height: 28px; }
  .ak-pub-header .ak-btn--primary { padding: 13px 12px; }
}

/* ══ 32 · RECHTSSEITEN: UEBERSICHT OBEN, ANKER UNTER DEM KOPF ═══════════ */

/* 32a · AUF DEM SCHREIBTISCH BLEIBT SIE RECHTS.
   Die Uebersicht steht jetzt VOR dem Text im Quelltext (siehe
   legal-page.php). Ohne diese Zuweisung stuende sie links. */
@media (min-width: 901px) {
  .ak-pub-rechtsraster > .ak-pub-rechtsnav { grid-column: 2; grid-row: 1; }
  .ak-pub-rechtsraster > .ak-pub-rechtskarte { grid-column: 1; grid-row: 1; }
}

/* 32b · DER ANKERSPRUNG LANDETE UNTER DEM KLEBENDEN KOPF.
   `scroll-padding-top` stand auf `.ak-pub` — und das ist eine Klasse am
   <body>. Fuer den Bildschirmausschnitt zaehlt aber das WURZELELEMENT;
   am <body> hatte die Angabe keine Wirkung. Gemessen sprang „İptal"
   deshalb genau hinter den Kopf.

   Statt die Regel an die Wurzel zu haengen — dort duerfen in dieser
   Datei keine Selektoren stehen, jede Regel beginnt mit `.ak` —
   bekommen die ZIELE einen eigenen Abstand. `scroll-margin-top` wirkt am
   Ziel und ist dafuer gemacht.

   Die Werte sind die gemessenen Kopfhoehen plus Luft:
   Telefon 72 + 16, Tablet 74 + 16, Schreibtisch 92 + 18. */
.ak-pub [id] { scroll-margin-top: 88px; }

@media (min-width: 768px) {
  .ak-pub [id] { scroll-margin-top: 90px; }
}

@media (min-width: 1260px) {
  .ak-pub [id] { scroll-margin-top: 110px; }
}

/* 32c · DIE MITLAUFENDE UEBERSICHT STAND HINTER DEM KOPF.
   `.ak-pub-rechtsnav` klebte mit `top: 20px` — der Kopf klebt aber
   auch, und er ist 74 bzw. 92 px hoch. Beim Herunterscrollen
   verschwanden deshalb die obersten Punkte dahinter (gemeldet vom
   Eigentuemer, gemessen: bei 1280 px lag der erste Eintrag 18 px UNTER
   der Kopfkante, also unsichtbar).

   DIESELBEN ZAHLEN WIE BEIM ANKERSPRUNG (Abschnitt 32b): 90 px im
   Tabletband, 110 px auf dem Schreibtisch. Beide beschreiben denselben
   Sachverhalt — „so weit reicht der klebende Kopf" —, und sie duerfen
   nicht auseinanderlaufen.

   Dazu eine Hoehenbegrenzung: ist die Uebersicht laenger als das, was
   vom Fenster uebrig bleibt, rollt sie in sich selbst. Ohne das waere
   ihr unteres Ende auf einem flachen Fenster unerreichbar. */
@media (min-width: 901px) {
  .ak-pub-rechtsnav {
    top: 90px;
    max-height: calc(100vh - 90px - 20px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

@media (min-width: 1260px) {
  .ak-pub-rechtsnav {
    top: 110px;
    max-height: calc(100vh - 110px - 20px);
  }
}

/* ══ 33 · DIE REITERLEISTE DER RECHTSSEITEN ═════════════════════════════
   BEFUND DES EIGENTUEMERS: „dieses Durcheinander". Gemessen bei 1280 px
   standen sieben Reiter in der ersten Reihe und EINER allein darunter;
   bei 560 px waren es 3 + 2 + 2 + 1. Ursache ist dieselbe wie bei der
   Vertrauensleiste und im Fussbereich: eine Flex-Zeile mit `wrap` und
   acht verschieden langen Beschriftungen bricht dort um, wo der Platz
   zufaellig endet — jede Reihe wird anders lang, die letzte bleibt halb
   leer.

   ACHT REITER TEILEN SICH GLATT durch 1, 2 und 4. Genau diese drei
   Zahlen werden gesetzt, nie eine andere:
     unter 560 px   1 Spalte  (8 Reihen)
     560 bis 899    2 Spalten (4 Reihen)
     ab 900 px      4 Spalten (2 Reihen)
   Es gibt damit keine Breite mehr, bei der eine Reihe anders lang ist
   als die andere oder ein Reiter allein steht.

   Gleiche Zellen heissen auch gleiche Flaechen: der aktive Reiter fuellt
   seine Zelle, statt sich um sein Wort zu legen. Das war der zweite Teil
   des Durcheinanders — eine dunkle Pille in Wortbreite zwischen sieben
   verschieden breiten Luecken. */
.ak-pub-reiter {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  align-items: stretch;
}

@media (min-width: 560px) {
  .ak-pub-reiter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .ak-pub-reiter { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.ak-pub-reiter a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: var(--ak-tap-min);
  padding: 10px 12px;
  line-height: 1.3;
  /* Die laengste Beschriftung („Cookies und lokale Speicherung") ist in
     einer Viertelspalte bei 900 px nicht in einer Zeile zu setzen. Sie
     darf umbrechen; die Zelle waechst, und weil alle Zellen einer Reihe
     gleich hoch sind, waechst die Reihe mit. */
  overflow-wrap: break-word;
  hyphens: auto;
}

/* ══ 34 · DER KOPF HEBT SICH AB ═════════════════════════════════════════
   BEFUND DES EIGENTUEMERS: der Kopf trug denselben Ton wie die Seite
   darunter (beides `--ak-bg`, Creme). Sichtbar war nur eine Haarlinie —
   beim Scrollen wirkte der klebende Kopf wie ein Stueck Seite, das
   haengenbleibt.

   Er steht jetzt auf WEISS, dem Ton der Karten. Das ist die HELLERE
   Richtung und dieselbe Flaeche, die Lernformkarten, Preistafel und
   Rechtskarte schon tragen — es kommt also kein neuer Ton ins Bild,
   sondern ein vorhandener an eine neue Stelle.
   Gemessen: Navy auf Weiss 14,10:1, Creme darunter 1,04:1 Unterschied
   zur Kopfflaeche — genug, um die Kante zu sehen, zu wenig, um zu
   trennen. Deshalb bleibt die Haarlinie und bekommt beim Scrollen
   zusaetzlich einen sehr flachen Schatten.

   DIE DURCHSICHT BLEIBT: 94 % Deckung plus Weichzeichner, damit Inhalt,
   der darunter durchlaeuft, zu ahnen ist und der Kopf nicht als Brett
   wirkt. */
.ak-pub-header {
  background: color-mix(in srgb, var(--ak-surface) 94%, transparent);
  box-shadow: 0 1px 0 rgb(23 43 77 / .04);
}

/* Die Sprachpille lag als weisse Spur auf cremefarbenem Grund. Auf dem
   weissen Kopf waere sie unsichtbar geworden: Spur und Grund haetten
   denselben Ton. Die Spur wechselt deshalb IM KOPF auf Creme, die
   aktive Sprache bleibt weiss — das Verhaeltnis bleibt, nur die beiden
   Toene tauschen die Rollen. */
.ak-pub-header .ak-pub-lang { background: var(--ak-bg); }

/* ══ 35 · DIE SEITE HATTE RINGSUM ACHT PIXEL LUFT ═══════════════════════
   BEFUND DES EIGENTUEMERS: „footer fuellt nicht 100% rechts und links
   und unten sehe ich Abstaende, man kann die Hintergrundfarbe der
   normalen Seite erkennen".

   GEMESSEN bei 1280 px: der Fuss lag bei x = 8 und war 1264 breit statt
   1280. Dasselbe galt fuer den Kopf und jede andere vollflaechige
   Flaeche. Ursache ist nicht der Fuss, sondern der Seitenkoerper: der
   Browser setzt am <body> von sich aus `margin: 8px`, und KEINE Regel
   im Projekt nimmt ihn zurueck. Gemessen: `getComputedStyle(body).margin`
   = 8px, und dazu passt keine einzige Regel aus den vier Stilblaettern.

   Weil der Fuss auf Weiss steht und die Seite auf Creme, war der Rand
   sichtbar — vorher, mit cremefarbenem Kopf und Fuss, fiel er nicht auf.
   Er war aber immer da: bei 320 px liefen die Rechtsseiten dadurch um
   10 px ueber den Bildschirm.

   `.ak-pub` IST die Klasse am <body> — die Regel sitzt also am richtigen
   Element und beginnt trotzdem mit `.ak`, wie es diese Datei verlangt.
   HINWEIS: dieselbe 8-px-Luft duerfte auf den App- und Adminflaechen
   stehen; die liegen nicht in diesem Auftrag. */
.ak-pub { margin: 0; }

/* 35b · LANGE DEUTSCHE WOERTER AUF SCHMALEN GERAETEN.
   GEMESSEN bei 320 px auf /de/impressum/: die Ueberschrift
   „Verbraucherstreitbeilegung" hat eine Mindestbreite von 254 px, mit
   dem Innenabstand der Karte 302 — die Inhaltsspalte hat dort 284. Die
   Seite liess sich um 2 px waagerecht schieben. Auf Tuerkisch faellt das
   nicht auf; dort gibt es diese Komposita nicht.

   Die Ueberschriften der Rechtsseiten duerfen unter 480 px trennen.
   `hyphens: auto` braucht die Sprachangabe — die steht am <html>. */
@media (max-width: 479px) {
  .ak-pub-rechtskarte h2,
  .ak-pub-rechtsnav a {
    overflow-wrap: break-word;
    hyphens: auto;
  }
}

/* Und die Rasterkinder duerfen unter ihre Inhaltsbreite: ohne
   `min-width: 0` haelt ein Gitterkind immer seinen laengsten
   unteilbaren Inhalt frei, auch wenn die Spalte schmaler ist. */
.ak-pub-rechtsraster > * { min-width: 0; }

/* ══ 36 · DER FUSS WIRD DUNKEL ══════════════════════════════════════════
   ZWEI SCHRITTE AN EINEM ABEND, beide vom Eigentuemer.
   Erst: seit Abschnitt 34 traegt der Kopf Weiss — und der Fuss trug es
   schon. Zwei weisse Baender um eine cremefarbene Seite; der Fuss
   schloss die Seite nicht mehr ab, er wiederholte den Kopf. Er ging
   deshalb auf Navy (#172B4D).
   Dann: „noch dunkler". Er steht jetzt auf `--ak-dark-surface`
   (#14182B) — dem dunkelsten Ton, den das Projekt hat, und genau dem,
   auf dem das dunkle Panel der Startseite schon steht. Es kommt also
   wieder kein neuer Ton ins Bild.

   KEINE NEUEN FARBEN. Mit der Flaeche wechselt auch die Textfamilie:
   auf `--ak-dark-surface` gehoert die `on-dark`-Reihe, die genau dafuer
   ausgemessen ist — nicht die `auf-navy`-Reihe, die fuer #172B4D gilt.
     Flaeche       --ak-dark-surface-0   #0F1220
     Ueberschrift  --ak-on-dark          #FFFFFF
     Verweise      --ak-on-dark-2        #B9BCC9
     Beschriftung  --ak-on-dark-3        #8E93A4
     Trennlinie    --ak-dark-surface-2   #252B48
     Knopfflaeche  --ak-dark-surface-4   #2A3150

   DAS ZEICHEN WECHSELT MIT: `Marke::horizontal($h, true)` liefert den
   NEGATIVEN Satz. Der farbige waere dunkelblau auf dunkelblau — sichtbar
   bliebe nur der korallefarbene Kreis ueber dem Buch. */
.ak-pub-footer {
  background: var(--ak-dark-surface-0);
  border-top: 0;
}

.ak-pub-footer-spalte h2 { color: var(--ak-on-dark-3); }
.ak-pub-footer-spalte a { color: var(--ak-on-dark-2); }
.ak-pub-footer-spalte a:hover { color: var(--ak-on-dark); }
.ak-pub-footer-ic { opacity: .75; }
.ak-pub-footer-marke p,
.ak-pub-footer-about { color: var(--ak-on-dark-2); }

.ak-pub-footer-unten {
  border-top: 1px solid var(--ak-dark-surface-2);
  color: var(--ak-on-dark-3);
}
.ak-pub-footer-unten p { color: var(--ak-on-dark-3); }
.ak-pub-footer-slogan { color: var(--ak-on-dark-3); }

/* DIE KANALZEICHEN STEHEN FREI, NICHT IM KASTEN (Eigentuemer).
   Sie sassen als 36-px-Plaettchen mit eigener Flaeche im Fuss — zwei
   kleine Kaesten neben einem Schriftzug, der keinen hat. Jetzt stehen
   sie frei und groesser: 26 statt 18 px.

   DIE FLAECHE BLEIBT, SIE IST NUR UNSICHTBAR: `min-width` und
   `min-height` halten die 44 px, die ein Finger braucht (WCAG 2.5.5).
   Ein Zeichen ohne Kasten heisst nicht ein Ziel ohne Groesse. */
.ak-pub-sozial a {
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--ak-on-dark-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  min-width: var(--ak-tap-min);
  min-height: var(--ak-tap-min);
}
.ak-pub-sozial a:hover { background: none; color: var(--ak-marke-koralle); }
.ak-pub-sozial .ak-ic-svg { width: 26px; height: 26px; }
.ak-pub-sozial { gap: var(--ak-sp-2); margin-left: -10px; }

/* Der Sprachumschalter im Fuss: Spur als erhoehtes Element, die aktive
   Sprache dunkel auf Weiss — dasselbe Verhaeltnis wie im Kopf, nur
   umgekehrt herum. */
.ak-pub-footer .ak-pub-lang { background: var(--ak-dark-surface-2); }
.ak-pub-footer .ak-pub-lang a { color: var(--ak-on-dark-2); }
.ak-pub-footer .ak-pub-lang a:hover { color: var(--ak-on-dark); }
.ak-pub-footer .ak-pub-lang a[aria-current="true"] {
  background: var(--ak-on-dark);
  color: var(--ak-dark-surface-0);
}

/* ══ 37 · AUFKLAPPER: ZEICHEN UND ABSTAND ═══════════════════════════════
   BEFUND DES EIGENTUEMERS, zwei Teile.

   1) Die Markierung zeigte nach RECHTS und im offenen Zustand nach
      LINKS — die CSS dreht sie um 180 Grad, und aus einem Rechtspfeil
      wird dabei ein Linkspfeil. Weder das eine noch das andere sagt
      etwas ueber „auf" und „zu". Die Vorlagen fuehren jetzt alle
      `chevron-down`; zu zeigt er nach unten, offen nach oben. Die
      Drehung bleibt, sie stimmt jetzt nur.

   2) „hayır, premium…" stand direkt unter der Frage. GEMESSEN: der
      Abstand zwischen Frageblock und Antwort war 0 px, der Einzug nach
      links 22 px. Der Eigentuemer nennt genau das als Mass — „derselbe
      Abstand wie nach links waere ideal". Also 22 px, derselbe Wert wie
      links und rechts. */
.ak-pub-faq-antwort { padding-top: var(--ak-sp-5); }

/* ══ 38 · DIE INHALTSUEBERSICHT WIRD DUNKEL ═════════════════════════════
   BEFUND DES EIGENTUEMERS: „diese ‚auf dieser Seite‘ soll auch einen
   dunklen Hintergrund bekommen, Texte sollen dann heller werden."

   Sie nimmt `--ak-dark-surface` (#14182B) — die Flaeche des dunklen
   Panels der Startseite. NICHT `--ak-dark-surface-0`: das ist seit
   heute die tiefste Flaeche und gehoert dem Fuss allein, damit der
   Seitenabschluss der dunkelste Punkt der Seite bleibt.

   Die Texte kommen aus derselben `on-dark`-Reihe wie im Fuss — sie ist
   fuer genau diese Flaeche ausgemessen. Keine neue Farbe. */
.ak-pub-rechtsnav {
  background: var(--ak-dark-surface);
  border-color: var(--ak-dark-surface-2);
}

.ak-pub-rechtsnav .ak-stufe-label { color: var(--ak-on-dark-3); }
.ak-pub-rechtsnav a { color: var(--ak-on-dark-2); }
.ak-pub-rechtsnav a:hover,
.ak-pub-rechtsnav a:focus-visible { color: var(--ak-on-dark); text-decoration: underline; }

/* ══ 39 · DIE UEBERSICHT BEKOMMT EIN EIGENES SCHRIFTBILD ════════════════
   BEFUND DES EIGENTUEMERS: „die Schrift auf dieser Seite soll schon was
   Besonderes sein und nicht aussehen wie die Texte darunter."

   Sie sah aus wie Fliesstext in einer dunklen Kiste: dieselbe
   Schriftgroesse, dieselbe Familie, derselbe Zeilenfall wie der
   Rechtstext daneben.

   VIER GRIFFE, alle aus dem Bestand — keine neue Schrift, keine neue
   Farbe:
     1. Die Beschriftung nimmt die AUSZEICHNUNGSSCHRIFT und die Koralle,
        den einzigen Akzent der Marke. Gemessen 5,39:1 auf dieser
        Flaeche — ueber der Schwelle auch fuer kleinen Text.
     2. Die Eintraege stehen eine Stufe kleiner und enger als der
        Fliesstext daneben. Ein Verzeichnis liest man nicht, man
        ueberfliegt es.
     3. Jeder Eintrag bekommt links eine Spur, die zunaechst leer ist und
        beim Ueberfahren korallefarben wird — der Platz dafuer steht
        immer, damit beim Ueberfahren nichts springt.
     4. Die Zahlen vorn („1.", „2.") laufen mit gleichen Ziffernbreiten,
        damit die Beschriftungen eine Kante bilden. */
.ak-pub-rechtsnav .ak-stufe-label {
  font-family: var(--ak-font-display);
  font-weight: 700;
  font-size: var(--ak-fs-micro);
  letter-spacing: 1.2px;
  color: var(--ak-marke-koralle);
  margin-bottom: var(--ak-sp-4);
}

.ak-pub-rechtsnav ul { gap: 2px; }

.ak-pub-rechtsnav a {
  display: block;
  font-size: var(--ak-fs-xs);
  font-weight: 500;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  padding: 7px 0 7px 12px;
  border-left: 2px solid transparent;
  transition: border-color var(--ak-t-toggle) var(--ak-ease),
              color var(--ak-t-toggle) var(--ak-ease);
}

.ak-pub-rechtsnav a:hover,
.ak-pub-rechtsnav a:focus-visible {
  color: var(--ak-on-dark);
  border-left-color: var(--ak-marke-koralle);
  text-decoration: none;
}

/* ══ 40 · HILFESEITE: FRAGE UND ANTWORT ═════════════════════════════════
   R-7 (16.09.2026): die Seite trug zwoelf Fragen ohne Antwort. Die
   Punktliste ist jetzt eine Beschreibungsliste — Frage als Begriff,
   Antwort darunter. Der alte Aufzaehlungspunkt vor der Frage bleibt: er
   hat die Liste gegliedert und tut es weiter. */
.ak-pub-hilfe-liste { display: grid; gap: var(--ak-sp-4); }

.ak-pub-hilfe-liste dt {
  position: relative;
  padding-left: 18px;
  font-size: var(--ak-fs-md);
  font-weight: 600;
  line-height: 1.5;
  color: var(--ak-ink);
}

.ak-pub-hilfe-liste dt::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: var(--ak-r-pill);
  background: var(--ak-marke-koralle);
}

.ak-pub-hilfe-liste dd {
  margin: 4px 0 0 18px;
  font-size: var(--ak-fs-body-sm);
  line-height: var(--ak-lh-body);
  color: var(--ak-ink-2);
}

/* ══ 41 · DIE RECHTSZEILE DER PREISSEITE ════════════════════════════════
   R-2 (16.09.2026): die Preisseite verlinkte weder Nutzungsbedingungen
   noch Widerrufsrecht noch Kuendigung/Erstattung — sie standen nur im
   Fuss. Eine Zeile unter den Plaenen, kein neuer Kartenblock: der Auftrag
   sagt ausdruecklich, die Seite soll nicht laenger werden. */
.ak-pub-sec--schmal-oben { padding-top: 0; }

.ak-pub-rechtszeile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin: 0;
  font-size: var(--ak-fs-body-sm);
  color: var(--ak-ink-2);
}

.ak-pub-rechtszeile a {
  color: var(--ak-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ak-pub-rechtszeile a:hover { color: var(--ak-marke-koralle-tief); }

@media (pointer: coarse), (max-width: 1259px) {
  /* 44-px-Ziel, ohne die Zeile auseinanderzuziehen: die Hoehe kommt aus
     dem Innenabstand, die Zeilenhoehe bleibt ein Schriftwert. */
  .ak .ak-pub-rechtszeile a { display: inline-flex; align-items: center; min-height: var(--ak-tap-min); }
}

/* ══ 42 · DIE DREI SCHRITTE NACH DER REGISTRIERUNG ══════════════════════
   L-1 (16.09.2026): die Website sagte nirgends, was nach dem Konto
   passiert. Drei Zeilen mit Nummer, Titel und einem Satz — bewusst KEIN
   Kartenblock: der Auftrag verlangt ausdruecklich, dass die Seite nicht
   durch weitere Karten waechst. */
.ak-pub-startschritte {
  list-style: none;
  margin: var(--ak-sp-5) 0 0;
  padding: 0;
  display: grid;
  gap: var(--ak-sp-4);
}

@media (min-width: 900px) {
  .ak-pub-startschritte { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
}

.ak-pub-startschritte li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 14px;
}

.ak-pub-startschritt-nr {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--ak-r-pill);
  background: var(--ak-marke-navy-tint);
  color: var(--ak-marke-navy);
  font-family: var(--ak-font-display);
  font-weight: 700;
  font-size: var(--ak-fs-sm);
  flex: none;
}

.ak-pub-startschritte strong {
  display: block;
  font-size: var(--ak-fs-body);
  font-weight: 700;
  color: var(--ak-ink);
  margin-bottom: 2px;
}

.ak-pub-startschritte li > span:last-child > span {
  font-size: var(--ak-fs-body-sm);
  line-height: var(--ak-lh-body);
  color: var(--ak-ink-2);
}