/* Geschichte kompakt · Kit-Gesamtbündel (Kaskade laut pages.json canonicalCssOrder). Erzeugt, nicht ändern. */
/* ===========================================================================
   Schicht 1 — Tokens · Designkit „Midnight Pop“ (Präfix gk)
   Drei Ebenen: Primitive (Rohwerte) → Semantic (Zweck) → Kontext (je Fläche).
   Komponenten- und Block-CSS lesen AUSSCHLIESSLICH Semantic- und Kontext-Tokens.
   Quelle der Werte: 2-designsystem/paket/tokens/*.css, Zuordnung nach
   2-designsystem/MAPPING.md. Werte, die das Kit nur inline in seinen Komponenten
   führt, stehen als ergänzte Primitive im Block „Kit-Ergänzungen“.
   =========================================================================== */

/* --- Ebene 1: Primitive ---------------------------------------------------- */
:root {
  /* Farben — colors.css, 1:1 */
  --gk-night: #081b38;  --gk-navy: #172c48;  --gk-ink: #152a46;
  --gk-royal: #2358ed;  --gk-royal-deep: #163fbc;  --gk-royal-light: #4484ff;
  --gk-sky: #81adff;  --gk-sky-soft: #94b8ff;
  --gk-coral: #ff6344;  --gk-marker: #ffcc00;
  --gk-paper: #f8fbff;  --gk-white: #ffffff;
  --gk-ice: #dce9ff;  --gk-ice-2: #e5efff;  --gk-ice-3: #edf3fd;  --gk-ice-4: #eaf1fe;  --gk-periwinkle: #c6daff;
  --gk-muted: #54677f;  --gk-muted-2: #576b86;  --gk-slate: #4d6382;  --gk-reading: #344861;  --gk-placeholder: #62728a;
  --gk-line: #dce3ed;  --gk-line-2: #bacbe3;  --gk-line-3: #bdcce3;  --gk-line-link: #9ab4ed;
  --gk-line-dark: #526c92;  --gk-line-dark-2: #6a82a6;
  --gk-mark-coral: #ffd9d1;  --gk-mark-yellow: #fff0b3;  /* Markierungen Quellentext (T3, Kit-Literale) */
  --gk-on-dark: #dce9ff;  --gk-on-dark-muted: #bdcfee;  --gk-on-dark-footer: #bccce5;
  --gk-logo-blue: #1c4fee;  --gk-sun: #fdc001;
  --gk-focus: #6e9eff;

  /* Kit-Ergänzungen: Werte, die die Paket-Komponenten inline setzen */
  --gk-on-dark-link: #c9d6ee;     /* MegaMenu-Zeilen, ruhend */
  --gk-on-dark-list: #cad7eb;     /* SiteFooter-Links */
  --gk-on-dark-legal: #adbed8;    /* SiteFooter-Rechtszeile */
  --gk-line-ice: #b4c9ec;         /* Pill tone="ice" */
  --gk-line-ice-dark: #657e9e;    /* TextLink tone="ice" */
  --gk-line-timeline: #a7bedf;    /* TimelineGrid-Linie */
  --gk-line-tag: #ccd8ea;         /* Etikett der PolaroidStage */
  --gk-on-dark-soft: #c3d1e8;     /* TeaserBanner-Nebentext auf Mitternacht */
  --gk-art-3: #eef3fb;            /* dritte Bühnenfarbe der ProductCard */

  /* Ressourcenarten („Ebenen“): Füllung + tiefer Ton für Text auf Papier */
  --res-themen: #fdc001;          --res-themen-deep: #806000;
  --res-lexikon: #35d0a5;         --res-lexikon-deep: #0b7358;
  --res-biografien: #ff8fc0;      --res-biografien-deep: #b0306a;
  --res-quellen: #a98bff;         --res-quellen-deep: #5b3fd1;
  --res-lernspiele: #ff6344;      --res-lernspiele-deep: #c0391f;
  --res-arbeitsblaetter: #5cb8ff; --res-arbeitsblaetter-deep: #11609f;
  --res-lernmaterial: #8ee05a;    --res-lernmaterial-deep: #3b7a12;  /* Shop/Kauf: Grün, eine Familie mit der CTA (Chris 05.11.2026, Tausch mit Lernspiele) */

  /* Statusfarben: eigene Primitive, unabhängig von den Ressourcenfarben (Werte vor dem Tausch) */
  --gk-danger: #c0391f;  --gk-success: #3b7a12;

  /* Abstands-Raster des Pakets (spacing.css, px) */
  --gk-sp-1: 5px;  --gk-sp-2: 7px;  --gk-sp-3: 10px; --gk-sp-4: 13px;
  --gk-sp-5: 17px; --gk-sp-6: 22px; --gk-sp-7: 27px; --gk-sp-8: 30px;
  --gk-sp-9: 37px; --gk-sp-10: 45px; --gk-sp-11: 60px; --gk-sp-12: 70px;
}

/* --- Ebene 2: Semantic — Kit-Namen, Werte aus dem Paket -------------------- */
:root {
  /* Abstände: Kit-Stufen 0–9 (MAPPING § 4) plus die Paket-Zwischenstufen,
     die die Kit-Bausteine brauchen (7, 13, 27, 37 px) als halbe Stufen. */
  --space-0: 0;
  --space-1: var(--gk-sp-1);    /*  5 px */
  --space-1-5: var(--gk-sp-2);  /*  7 px */
  --space-2: var(--gk-sp-3);    /* 10 px */
  --space-2-5: var(--gk-sp-4);  /* 13 px */
  --space-3: var(--gk-sp-5);    /* 17 px */
  --space-4: var(--gk-sp-6);    /* 22 px */
  --space-4-5: var(--gk-sp-7);  /* 27 px */
  --space-5: var(--gk-sp-8);    /* 30 px */
  --space-5-5: var(--gk-sp-9);  /* 37 px */
  --space-6: var(--gk-sp-10);   /* 45 px */
  --space-7: var(--gk-sp-11);   /* 60 px */
  --space-8: var(--gk-sp-12);   /* 70 px */
  --space-9: 6rem;

  /* Radien (MAPPING § 4; ergänzt: --radius-panel 10 px aus Mobilmenü und Suche) */
  --radius-dot: 3px;
  --radius-xs: 4px;     /* Pill */
  --radius-sm: 5px;     /* FilterChip, Such-Button */
  --radius-md: 8px;     /* Button, Suchfeld */
  --radius-panel: 10px; /* Kacheln und Suchknopf im Mobilmenü */
  --radius-xl: 12px;    /* Dropdown, Karten-Rahmen */
  --radius-lg: 16px;    /* Karten */
  --radius-pill: 999px;
  --radius-arch: 135px 135px 15px 15px;
  --radius-mark: 50% 50% 4px 50%;

  /* Schatten (Paket shadow-*; ergänzt: polaroid, floating für Markenbausteine) */
  --elevation-1: 0 8px 24px #132b4920;         /* paper */
  --elevation-2: 0 25px 60px #081b3830;        /* menu */
  --elevation-book: 10px 17px 27px #142d5122;  /* book */
  --elevation-polaroid: 0 21px 40px #00000030;
  --elevation-floating: 0 7px 30px #081b3830;

  /* Neigungen der Markenelemente (Polaroid, Sticker) */
  --tilt-sm: -1.5deg; --tilt-md: 3deg; --tilt-lg: -9deg; --tilt-sticker: 12deg;

  /* Bewegung — eine Kurve für alles (Paket --ease-out) */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur-fast: .2s;    /* Farbe, Rahmen */
  --dur-base: .25s;   /* Chevron, Hintergrund */
  --dur-mid: .35s;    /* Burger, Akkordeon */
  --dur-header: .45s; /* Kopfzeile ein-/ausblenden */
  --dur-slow: .6s;    /* Einblendung von Zeilen */
  --dur-reveal: .7s;  /* MegaMenu-Vorhang, Bildwechsel */
  --stagger: 28ms;    /* Versatz je Zeile im MegaMenu */

  /* Maße */
  --container-max: 1440px;
  --container-pad: 4.5%;
  --container-pad-compact: 5%;
  --content-measure: 68ch;
  --tap-min: 44px;
  --header-h: 94px;
  --header-h-compact: 64px;
  --gk-header-h: var(--header-h);  /* zur Laufzeit von der Kopfzeile gesetzt (0 px, wenn ausgeblendet) */

  /* Bedienelemente (Kit-Maße aus Button, IconButton, FilterChip, SearchField) */
  --control-pad-y: 15px;    --control-pad-x: 21px;  --control-gap: 28px;
  --control-pad-y-sm: 12px; --control-pad-x-sm: 16px; --control-gap-sm: 20px;
  --control-arrow: 23px;    --control-arrow-sm: 20px;
  --iconbtn-size: 42px;
  --chip-pad-y: 11px;       --chip-pad-x: 16px;
  --pill-pad-y: 7px;        --pill-pad-x: 10px;
  --field-pad: 6px 7px 6px 14px;  --field-input-pad-y: 11px;
  --search-submit-pad: 12px 15px; --search-submit-gap: 19px;
  --dot-xs: 6px;  --dot-sm: 9px;            --dot-md: 10px;  --dot-lg: 12px;

  /* Inhaltsbausteine P1–P3 (Kit-Maße) */
  --radius-art: 7px;      /* ProductCard-Bühne */
  --radius-grid: 7px;     /* FactGrid-Zellen */
  --radius-step: 14px;    /* StepCard */
  --radius-card: 15px;    /* TopicCard */
  --measure-faq: 890px;   --measure-faq-text: 760px;  --measure-list: 850px;
  --factgrid-min: 240px;  --factgrid-min-3: 200px;  --timeline-min: 160px;
  --kette-pfeil-size: 28px;  --kette-pfeil-size-sm: 22px;
  --elevation-bar: 0 -10px 40px color-mix(in oklab, var(--gk-night) 25%, transparent);  /* Mobilleiste ShopPanel */
  /* T2–T4 und Anzeige */
  --surface-bar: color-mix(in srgb, var(--gk-paper) 94%, transparent);  /* klebende Phasenleiste, Kit #f8fbfff0 */
  --mark-1: var(--gk-ice);  --mark-2: var(--gk-mark-coral);  --mark-3: var(--gk-mark-yellow);
  --measure-reading: 760px;  /* Lesetext */
  --leitkarte-size: 24px;    /* Leitkarte Materialkopf, mobil 21 */
  --tape-w: 89px;  --tape-h: 25px;  /* Klebeband Polaroid und Blattvorschau */
  --progress-h: 6px;         /* Fortschritt Spielbühne */
  --anzeige-h: 280px;  --anzeige-h-weit: 250px;  /* reservierte Anzeigenhöhe mobil / ab 768 px */

  /* Text */
  --text-strong:     var(--gk-night);
  --text-body:       var(--gk-ink);
  --text-reading:    var(--gk-reading);
  --text-muted:      var(--gk-muted);
  --text-on-brand:   var(--gk-white);
  --text-link:       var(--gk-royal);
  --text-link-hover: var(--gk-royal-deep);
  --text-placeholder: var(--gk-placeholder);
  --text-on-dark-link: var(--gk-on-dark-link);
  --text-on-dark-list: var(--gk-on-dark-list);
  --text-on-dark-legal: var(--gk-on-dark-legal);
  --text-on-dark-footer: var(--gk-on-dark-footer);
  --text-ice:        var(--gk-ice);
  --text-accent:     var(--gk-royal);    /* Hover-Farbe von IconButton und Outline-Button */
  --text-hero:       var(--gk-navy);     /* HeroHeadline */
  --swash:           var(--gk-royal);    /* Schwung der HeroHeadline */
  --text-slate:      var(--gk-slate);
  --text-on-dark-soft: var(--gk-on-dark-soft);

  /* Flächen */
  --surface-page:   var(--gk-paper);
  --surface-card:   var(--gk-white);
  --surface-muted:  var(--gk-ice-3);
  --surface-hover:  var(--gk-ice-3);
  --surface-brand:  var(--gk-night);
  --surface-accent: var(--gk-royal);
  --surface-art:    var(--gk-ice-4);
  --surface-art-2:  var(--gk-ice);
  --surface-art-3:  var(--gk-art-3);
  --surface-ice:    var(--gk-ice-2);
  --surface-field:  var(--gk-white);     /* Suchfeld bleibt auf jeder Fläche weiß */
  --surface-overlay: var(--gk-paper);    /* Dropdown „Mehr“ */
  --surface-overlay-active: var(--gk-ice-3);
  --surface-night:  var(--gk-night);     /* MegaMenu, Mobilmenü */
  --surface-stage:  var(--gk-royal);     /* Bildbühne im MegaMenu */
  --stage-fade:     linear-gradient(180deg, #081b3800 35%, #081b38d9 78%, #081b38 100%);
  --stage-year:     color-mix(in oklab, var(--gk-white) 15%, transparent);
  --surface-glass:  color-mix(in oklab, var(--gk-white) 7%, transparent);
  --surface-glass-strong: color-mix(in oklab, var(--gk-white) 12%, transparent);

  /* Linien */
  --border-default:     var(--gk-line);
  --border-card:        var(--gk-line-2);
  --border-strong:      var(--gk-line-dark-2);
  --border-interactive: var(--gk-royal);
  --border-link:        var(--gk-line-link);
  --border-field:       var(--gk-line-3);
  --border-pill:        var(--gk-line);
  --border-pill-ice:    var(--gk-line-ice);
  --border-link-dark:   color-mix(in oklab, var(--gk-night) 33%, transparent);
  --border-link-ice:    var(--gk-line-ice-dark);
  --border-on-dark:     color-mix(in oklab, var(--gk-white) 14%, transparent);
  --border-timeline:    var(--gk-line-timeline);
  --border-tag:         var(--gk-line-tag);

  /* Interaktion (Button primary, FilterChip aktiv) */
  --interactive:          var(--gk-royal);
  --interactive-hover:    var(--gk-night);
  --interactive-press:    var(--gk-navy);
  --interactive-fg:       var(--gk-white);
  --interactive-fg-hover: var(--gk-white);
  --disabled-bg:          var(--gk-ice-3);
  --disabled-fg:          var(--gk-placeholder);

  /* Feste Rollen, unabhängig von der Fläche (Kit-Varianten) */
  --action:        var(--gk-royal);  /* Such-Button */
  --action-hover:  var(--gk-night);
  --action-fg:     var(--gk-white);
  --control-dark:        var(--gk-navy);   --control-dark-hover:  var(--gk-royal);
  --control-light:       var(--gk-white);  --control-light-hover: var(--gk-ice);
  --control-ice:         var(--gk-ice);    --control-ice-hover:   var(--gk-white);
  --control-fg-on-light: var(--gk-night);
  --control-fg-on-dark:  var(--gk-white);
  --marker:    var(--gk-marker);
  --marker-fg: var(--gk-night);
  --diamond:   var(--gk-coral);

  /* Hauptconversion (Kaufen, Lernshop) und Kaufzonen: Ressourcenfarbe Lernmaterial (Grün), abgesetzt vom
     Royal der übrigen Aktionen. Umstellen mit einer Zeile. Schrift Mitternacht (Grün 10,5 : 1). */
  --cta-bg:       var(--res-lernmaterial);
  --cta-bg-hover: color-mix(in oklab, var(--cta-bg) 90%, var(--gk-night));
  --cta-fg:       var(--gk-night);
  --cta-ring:     var(--gk-night);   /* Fokus auf hellen Flächen; auf Mitternacht die CTA-Farbe */
  --cta-edge:     4px;               /* Kaufkante oben an Kaufzonen */
  /* Kaufknopf (cb01 gk-btn--cta, Chris 05.11.2026): Verlauf aus Grün und Grün-tief, hell hinter der
     Icon-Kachel links, kräftiger hinter dem Text. Mitternacht trägt über die ganze Textfläche
     (7,7–10,6 : 1, Hover 6,9–9,3 : 1); Weiß käme auf höchstens 2,2 : 1. */
  --cta-deep:           var(--res-lernmaterial-deep);
  --cta-bg-start:       var(--cta-bg);
  --cta-bg-end:         color-mix(in oklab, var(--cta-bg) 70%, var(--cta-deep));
  --cta-bg-start-hover: color-mix(in oklab, var(--cta-bg) 88%, var(--cta-deep));
  --cta-bg-end-hover:   color-mix(in oklab, var(--cta-bg) 60%, var(--cta-deep));
  --cta-weight:         700;
  --cta-size:           15px;   --cta-size-sm: 13px;
  --cta-kachel:         36px;   --cta-kachel-sm: 30px;   /* Icon-Kachel (Einkaufswagen) */
  --cta-inset:          8px;    --cta-inset-sm: 7px;     /* Abstand Kachel zum Knopfrand */
  --cta-kachel-bg:      var(--gk-white);
  --cta-kachel-fg:      var(--gk-night);
  --cta-kachel-shadow:  0 1px 2px color-mix(in oklab, var(--gk-night) 18%, transparent);

  /* Ressourcenfarbe: Kontext .gk-res--<art> belegt sie um */
  --res:      var(--res-themen);
  --res-deep: var(--res-themen-deep);
  --res-fg:   var(--gk-night);

  /* Fokus */
  --focus-ring:        var(--gk-royal);
  --focus-ring-width:  3px;
  --focus-ring-offset: 5px;

  /* Auswahl */
  --selection:    var(--gk-royal);
  --selection-fg: var(--gk-white);

  /* Status (MAPPING § 6: abgeleitet, Freigabe durch den Kunden offen) */
  --status-danger:  var(--gk-danger);
  --status-success: var(--gk-success);
}

/* --- Ebene 3: Kontext-Tokens je Fläche ------------------------------------
   Eine Fläche belegt die vollständige Familie um, die ihre Kinder lesen.
   Komponenten brauchen keine Kontextklasse. Immer das Endtoken setzen.
   -------------------------------------------------------------------------- */
.gk-section--muted {
  --surface-page:  var(--gk-ice-3);
  --surface-card:  var(--gk-white);
  --surface-hover: var(--gk-ice);
}

/* Mitternacht: Kopf- und Fußzeile, Paket-Teaser */
.gk-section--brand {
  --surface-page:    var(--gk-night);
  --surface-card:    color-mix(in oklab, var(--gk-white) 7%, transparent);
  --surface-hover:   color-mix(in oklab, var(--gk-white) 12%, transparent);
  --text-strong:     var(--gk-white);
  --text-body:       var(--gk-white);
  --text-reading:    var(--gk-on-dark);
  --text-muted:      var(--gk-on-dark-muted);
  --text-link:       var(--gk-white);
  --text-link-hover: var(--gk-sky);
  --text-accent:     var(--gk-sky);
  --text-hero:       var(--gk-white);
  --swash:           var(--gk-royal-light);
  --border-default:     color-mix(in oklab, var(--gk-white) 14%, transparent);
  --border-card:        color-mix(in oklab, var(--gk-white) 20%, transparent);
  --border-strong:      var(--gk-line-dark-2);
  --border-interactive: var(--gk-white);
  --border-link:        color-mix(in oklab, var(--gk-white) 50%, transparent);
  --border-field:       var(--gk-line-dark);
  --border-pill:        color-mix(in oklab, var(--gk-white) 25%, transparent);
  --interactive:          var(--gk-white);
  --interactive-hover:    var(--gk-ice);
  --interactive-press:    var(--gk-ice-2);
  --interactive-fg:       var(--gk-night);
  --interactive-fg-hover: var(--gk-night);
  --disabled-bg:          color-mix(in oklab, var(--gk-white) 14%, transparent);
  --disabled-fg:          var(--gk-on-dark-muted);
  --focus-ring:           var(--gk-focus);
  --cta-ring:             var(--cta-bg);
}

/* Royalblau: Lehrer-Abo-Banner, Ribbon */
.gk-section--royal {
  --surface-page:    var(--gk-royal);
  --surface-card:    color-mix(in oklab, var(--gk-white) 10%, transparent);
  --surface-hover:   color-mix(in oklab, var(--gk-white) 16%, transparent);
  --text-strong:     var(--gk-white);
  --text-body:       var(--gk-white);
  --text-reading:    var(--gk-white);
  --text-muted:      var(--gk-ice);
  --text-link:       var(--gk-white);
  --text-link-hover: var(--gk-white);
  --text-accent:     var(--gk-night);
  --text-hero:       var(--gk-white);
  --swash:           var(--gk-white);
  --border-default:     color-mix(in oklab, var(--gk-white) 25%, transparent);
  --border-card:        color-mix(in oklab, var(--gk-white) 30%, transparent);
  --border-strong:      var(--gk-white);
  --border-interactive: var(--gk-white);
  --border-link:        color-mix(in oklab, var(--gk-white) 50%, transparent);
  --border-field:       var(--gk-royal-deep);
  --border-pill:        color-mix(in oklab, var(--gk-white) 40%, transparent);
  --interactive:          var(--gk-white);
  --interactive-hover:    var(--gk-night);
  --interactive-press:    var(--gk-navy);
  --interactive-fg:       var(--gk-night);
  --interactive-fg-hover: var(--gk-white);
  --disabled-bg:          color-mix(in oklab, var(--gk-white) 18%, transparent);
  --disabled-fg:          var(--gk-ice);
  --focus-ring:           var(--gk-white);
  --cta-ring:             var(--gk-white);
}

/* Papier innerhalb dunkler Flächen (Dropdown „Mehr“): setzt die helle Familie zurück */
.gk-section--paper {
  --surface-page:    var(--gk-paper);
  --surface-card:    var(--gk-white);
  --surface-hover:   var(--gk-ice-3);
  --text-strong:     var(--gk-night);
  --text-body:       var(--gk-ink);
  --text-reading:    var(--gk-reading);
  --text-muted:      var(--gk-muted);
  --text-link:       var(--gk-royal);
  --text-link-hover: var(--gk-royal-deep);
  --text-accent:     var(--gk-royal);
  --text-hero:       var(--gk-navy);
  --swash:           var(--gk-royal);
  --border-default:  var(--gk-line);
  --border-link:     var(--gk-line-link);
  --border-pill:     var(--gk-line);
  --border-field:    var(--gk-line-3);
  --interactive:          var(--gk-royal);
  --interactive-hover:    var(--gk-night);
  --interactive-fg:       var(--gk-white);
  --interactive-fg-hover: var(--gk-white);
  --focus-ring:      var(--gk-royal);
}

/* Ressourcenfarbe als Kontext (MAPPING § 1) */
.gk-res--themen         { --res: var(--res-themen);         --res-deep: var(--res-themen-deep); }
.gk-res--lexikon        { --res: var(--res-lexikon);        --res-deep: var(--res-lexikon-deep); }
.gk-res--biografien     { --res: var(--res-biografien);     --res-deep: var(--res-biografien-deep); }
.gk-res--quellen        { --res: var(--res-quellen);        --res-deep: var(--res-quellen-deep); }
.gk-res--lernspiele     { --res: var(--res-lernspiele);     --res-deep: var(--res-lernspiele-deep); }
.gk-res--arbeitsblaetter{ --res: var(--res-arbeitsblaetter);--res-deep: var(--res-arbeitsblaetter-deep); }
.gk-res--lernmaterial   { --res: var(--res-lernmaterial);   --res-deep: var(--res-lernmaterial-deep); }

/* ===========================================================================
   Schicht 2 — Schriften
   DM Sans (Text, Bedienung) und Space Grotesk (Überschriften, Links), beide OFL,
   self-hosted als woff2 aus den TTF des Designpakets, Teilmenge Latin.
   Sora (600/700) nur für die Wortmarke im CSS-Satz des Logos (cb40-brandmark).
   Lizenztexte: /assets/fonts/dmsans-OFL.txt, /assets/fonts/spacegrotesk-OFL.txt, /assets/fonts/sora-OFL.txt
   =========================================================================== */
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/dmsans-400-latin.woff2) format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/dmsans-500-latin.woff2) format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/dmsans-600-latin.woff2) format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/dmsans-700-latin.woff2) format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/spacegrotesk-400-latin.woff2) format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/spacegrotesk-500-latin.woff2) format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/spacegrotesk-600-latin.woff2) format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/spacegrotesk-700-latin.woff2) format('woff2'); }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/sora-600-latin.woff2) format('woff2'); }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/sora-700-latin.woff2) format('woff2'); }

/* --- Primitive: fluide Typo-Skala des Pakets (type-scale.css, 375 → 1440 px) --- */
:root {
  --fs-display: clamp(46px, 30.86px + 4.038vw, 89px);
  --fs-h1: clamp(38px, 30.25px + 2.066vw, 60px);
  --fs-h2: clamp(28px, 23.77px + 1.127vw, 40px);
  --fs-h3: clamp(20px, 17.89px + .563vw, 26px);
  --fs-h4: clamp(17px, 15.94px + .282vw, 20px);
  --fs-intro: clamp(16px, 14.94px + .282vw, 19px);
  --fs-body: clamp(15px, 14.30px + .188vw, 17px);
  --fs-small: clamp(13px, 12.65px + .094vw, 14px);
  --fs-hint: clamp(14px, 13.65px + .094vw, 15px);
  --fs-button: 13px;
  --fs-meta: clamp(11px, 10.65px + .094vw, 12px);
  --lh-body-reading: clamp(1.6em, 1.5em + .25vw, 1.8em);
}

/* --- Semantic: Kit-Namen ---------------------------------------------------- */
:root {
  --font-display: 'Space Grotesk', ui-sans-serif, sans-serif;
  --font-body:    'DM Sans', ui-sans-serif, sans-serif;
  --font-logo:    'Sora', ui-sans-serif, sans-serif;

  --display-size: var(--fs-display); --display-lh: 1;    --display-weight: 600; --display-tracking: -.05em;
  --h1-size: var(--fs-h1); --h1-lh: 1.04; --h1-weight: 500; --h1-tracking: -.045em;
  --h2-size: var(--fs-h2); --h2-lh: 1.08; --h2-weight: 500; --h2-tracking: -.035em;
  --h3-size: var(--fs-h3); --h3-lh: 1.15; --h3-weight: 500; --h3-tracking: -.025em;
  --h4-size: var(--fs-h4); --h4-lh: 1.25; --h4-weight: 500; --h4-tracking: -.015em;
  --h5-size: var(--fs-intro); --h5-lh: 1.3; --h5-weight: 500; --h5-tracking: -.01em;
  --h6-size: var(--fs-small); --h6-lh: 1.4; --h6-weight: 500; --h6-tracking: 0;
  --intro-size: var(--fs-intro); --intro-lh: 1.5; --intro-tracking: -.005em;
  --body-size: var(--fs-body); --body-lh: 1.65; --body-weight: 400;
  --reading-lh: var(--lh-body-reading);
  --small-size: var(--fs-small); --small-lh: 1.5;
  --hint-size: var(--fs-hint); --hint-lh: 1.55;
  --button-size: var(--fs-button); --button-size-sm: 12px; --button-lh: 1.35; --button-weight: 500;
  --link-size: 12px; --link-size-sm: 11px;
  --meta-size: var(--fs-meta); --meta-lh: 1.4; --meta-tracking: .01em;
  --caption-size: var(--fs-meta); --caption-lh: 1.45; --caption-weight: 400; --caption-tracking: .01em;
  --nav-size: var(--fs-small);
  --ribbon-size: clamp(16px, 1.8vw, 23px);
  --mega-row-size: clamp(15px, 1.25vw, 19px);
  --mega-title-size: clamp(28px, 2.6vw, 40px);
  --mega-stage-size: clamp(30px, 3vw, 48px);
  --mega-year-size: clamp(80px, 11vw, 180px);
}

/* ===========================================================================
   Schicht 3 — Basis
   Element-Defaults, Typo-Skala als Klassen, globaler Fokus, Container.
   Liest nur Tokens. Kein Farbwert, kein Radius, kein Schatten als Literal.
   =========================================================================== */

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  color: var(--text-body);
  background: var(--surface-page);
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
body > main { flex: 1 0 auto; }
::selection { background: var(--selection); color: var(--selection-fg); }

[hidden] { display: none !important; }
img, svg, video { max-width: 100%; }
img { height: auto; }

/* --- Typo-Skala als Klassen -----------------------------------------------
   Die HTML-Ebene (h1…h6) folgt der BEDEUTUNG, die Klasse der Größe.
   Eine Überschrift wird nie zu h3 gemacht, weil sie kleiner aussehen soll.
   -------------------------------------------------------------------------- */
.gk-h1, .gk-h2, .gk-h3, .gk-h4, .gk-h5, .gk-h6 {
  margin: 0;
  color: var(--text-strong);
  font-family: var(--font-display);
  text-wrap: balance;
}
.gk-display { margin: 0; color: var(--text-strong); font-family: var(--font-display); text-wrap: balance; font-size: var(--display-size); line-height: var(--display-lh); letter-spacing: var(--display-tracking); font-weight: var(--display-weight); }
.gk-h1 { font-size: var(--h1-size); line-height: var(--h1-lh); letter-spacing: var(--h1-tracking); font-weight: var(--h1-weight); }
.gk-h2 { font-size: var(--h2-size); line-height: var(--h2-lh); letter-spacing: var(--h2-tracking); font-weight: var(--h2-weight); }
.gk-h3 { font-size: var(--h3-size); line-height: var(--h3-lh); letter-spacing: var(--h3-tracking); font-weight: var(--h3-weight); }
.gk-h4 { font-size: var(--h4-size); line-height: var(--h4-lh); letter-spacing: var(--h4-tracking); font-weight: var(--h4-weight); }
.gk-h5 { font-size: var(--h5-size); line-height: var(--h5-lh); letter-spacing: var(--h5-tracking); font-weight: var(--h5-weight); }
.gk-h6 { font-size: var(--h6-size); line-height: var(--h6-lh); letter-spacing: var(--h6-tracking); font-weight: var(--h6-weight); }

.gk-body    { font-size: var(--body-size); line-height: var(--body-lh); font-weight: var(--body-weight); }
.gk-intro   { font-size: var(--intro-size); line-height: var(--intro-lh); letter-spacing: var(--intro-tracking); color: var(--text-reading); }
.gk-reading { font-size: var(--body-size); line-height: var(--reading-lh); color: var(--text-reading); }
.gk-small   { font-size: var(--small-size); line-height: var(--small-lh); }
.gk-meta    { font-size: var(--meta-size); line-height: var(--meta-lh); letter-spacing: var(--meta-tracking); font-weight: 500; color: var(--text-muted); }
.gk-caption { font-size: var(--caption-size); line-height: var(--caption-lh); letter-spacing: var(--caption-tracking); color: var(--text-muted); }
.gk-measure { max-width: var(--content-measure); }

/* --- Fließtext-Rhythmus ---------------------------------------------------
   Abstände entstehen NUR zwischen Geschwistern, nie als Eigenschaft des
   Elements. Sonst schleppt jedes Element seinen Abstand in jeden Kontext mit.
   -------------------------------------------------------------------------- */
/* Absätze tragen keinen eigenen Außenabstand — Rhythmus kommt aus .gk-flow oder dem Gap des Elternteils.
   Ohne diese Regel bleibt der UA-Default (1em) im Prototyp stehen und verschwindet im Zeus-Preflight
   (:where(.zeus-section) :where(p){margin:0}) — Pilot 10.09.2026: 38 px und 26 px Sektionsdrift bei 390 px. */
p { margin-block: 0; }
/* Reihenfolge ist tragend: Beide Selektoren haben dieselbe Spezifität (0,1,0) — die spätere Regel gewinnt.
   Erst den Außenabstand aller Kinder nullen, DANACH den Abstand zwischen Geschwistern setzen. Umgekehrt
   löscht der Reset den Abstand wieder und .gk-flow wirkt gar nicht (Befund myProstate 24.09.2026;
   responsive.mjs meldet das als „flow-abstand“). */
.gk-flow > * { margin-block: 0; }
.gk-flow > * + * { margin-block-start: var(--space-3); }

/* --- Links ---------------------------------------------------------------- */
.gk-link {
  color: var(--text-link);
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.gk-link:hover { color: var(--text-link-hover); text-decoration: underline; text-underline-offset: 2px; }

/* --- Globaler Tastatur-Fokus ---------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

/* --- Layout --------------------------------------------------------------- */
.gk-container {
  width: 100%;
  box-sizing: border-box;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
/* Die Section löst Farbe UND Fläche selbst auf. Ohne das eigene color hier erben
   Kinder den am <body> festgeschriebenen Wert — die Kontext-Umbelegung wirkt dann
   nur auf Elemente mit eigener color-Regel (Überschriften), nicht auf Fließtext.
   Grund: color ist eine geerbte Eigenschaft — sie wird am <body> berechnet und als
   fertiger Wert vererbt, nicht als Token weitergereicht. */
.gk-section {
  padding-block: var(--space-8);
  background: var(--surface-page);
  color: var(--text-body);
}

/* --- Icon-Sprite: liegt im DOM, nimmt keinen Platz --- */
.gk-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* --- Nur für Screenreader ------------------------------------------------- */
.gk-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* --- Bewegungsreduktion --------------------------------------------------- */
@media (max-width: 759px) {
  .gk-container { padding-inline: var(--container-pad-compact); }
  .gk-section { padding-block: var(--space-6); }
}

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

/* Hülle einer Seite, deren Blöcke noch folgen */
.gk-huelle { min-height: 40vh; }

/* ===========================================================================
   Schicht 4 — Komponenten-Grundlage
   Nur, was jede Seite unabhängig von den Bausteinen braucht. Die Kit-Bausteine
   (Button, Pill, SearchField …) liegen je als eigener Ordner unter
   components/cbNN-<name>/ und werden über pages.json geladen.
   =========================================================================== */

/* Skip-Link: erstes Fokusziel jeder Seite */
.gk-skip {
  position: absolute; left: var(--space-3); top: var(--space-3); z-index: 100;
  transform: translateY(-200%);
  padding: var(--space-2) var(--space-3);
  background: var(--control-light); color: var(--control-fg-on-light);
  border-radius: var(--radius-md);
  font: var(--button-weight) var(--button-size)/var(--button-lh) var(--font-body);
  text-decoration: none;
  transition: transform var(--dur-base) var(--ease);
}
.gk-skip:focus-visible { transform: translateY(0); }

/* Ebenen-Quadrat: Ressourcenfarbe als kleines Quadrat (Navigation, Buttons) */
.gk-dot {
  display: inline-block; flex-shrink: 0;
  width: var(--dot-sm); height: var(--dot-sm);
  border-radius: var(--radius-dot);
  background: var(--res);
}
.gk-dot--md { width: var(--dot-md); height: var(--dot-md); }
.gk-dot--lg { width: var(--dot-lg); height: var(--dot-lg); }

/* cb01 Button — Kit components/core/Button: Aktion mit Pfeil ↗, eine Hauptaktion je Bereich.
   Varianten wie im Kit: primary, dark, light, ice, secondary; Größe sm für die Kopfzeile.
   cta (Kit-Ergänzung, ENTSCHEIDE #7): Hauptconversion „Jetzt kaufen“, „Zum Lernshop“ in der CTA-Farbe,
   auf jeder Fläche gleich — hebt sich vom Royal der übrigen Aktionen ab. Kaufknopf mit Verlauf und
   heller Icon-Kachel (Einkaufswagen) vor dem Text: gk-btn__kachel > gk-btn__icon, Text in gk-btn__label.
   primary liest die Kontext-Tokens: auf Mitternacht und Royal wird er hell (wie Kit-Variante light). */
.gk-btn {
  --btn-bg: var(--interactive);       --btn-bg-h: var(--interactive-hover);
  --btn-fg: var(--interactive-fg);    --btn-fg-h: var(--interactive-fg-hover);
  --btn-line: var(--btn-bg);          --btn-line-h: var(--btn-bg-h);
  display: inline-flex; justify-content: space-between; align-items: center;
  gap: var(--control-gap);
  padding: var(--control-pad-y) var(--control-pad-x);
  border: 1px solid var(--btn-line);
  border-radius: var(--radius-md);
  background: var(--btn-bg); color: var(--btn-fg);
  font: var(--button-weight) var(--button-size)/var(--button-lh) var(--font-body);
  text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.gk-btn:hover, .gk-btn:focus-visible { background: var(--btn-bg-h); border-color: var(--btn-line-h); color: var(--btn-fg-h); }
.gk-btn__label { display: inline-flex; align-items: center; gap: var(--space-2); }
.gk-btn__pfeil { font-size: var(--control-arrow); line-height: 1; }

.gk-btn--primary { }
.gk-btn--dark  { --btn-bg: var(--control-dark);  --btn-bg-h: var(--control-dark-hover);  --btn-fg: var(--control-fg-on-dark);  --btn-fg-h: var(--control-fg-on-dark); }
.gk-btn--light { --btn-bg: var(--control-light); --btn-bg-h: var(--control-light-hover); --btn-fg: var(--control-fg-on-light); --btn-fg-h: var(--control-fg-on-light); }
.gk-btn--ice   { --btn-bg: var(--control-ice);   --btn-bg-h: var(--control-ice-hover);   --btn-fg: var(--control-fg-on-light); --btn-fg-h: var(--control-fg-on-light); }
@property --cta-a { syntax: '<color>'; inherits: false; initial-value: transparent; }
@property --cta-b { syntax: '<color>'; inherits: false; initial-value: transparent; }
.gk-btn--cta {
  --btn-bg: var(--cta-bg); --btn-bg-h: var(--cta-bg-hover);
  --btn-fg: var(--cta-fg); --btn-fg-h: var(--cta-fg);
  --btn-line: transparent; --btn-line-h: transparent;
  --focus-ring: var(--cta-ring);
  --cta-a: var(--cta-bg-start); --cta-b: var(--cta-bg-end);
  --btn-verlauf: linear-gradient(96deg, var(--cta-a) 12%, var(--cta-b) 78%);
  --kachel: var(--cta-kachel); --kachel-inset: var(--cta-inset);
  --kachel-radius: var(--radius-md); --kachel-icon: 20px;
  --label-pad: var(--control-pad-x); --kachel-gap: var(--space-2-5);
  justify-content: flex-start;
  gap: var(--kachel-gap);
  min-height: calc(var(--kachel) + 2 * var(--kachel-inset));
  padding: var(--kachel-inset) var(--label-pad) var(--kachel-inset) var(--kachel-inset);
  border-radius: var(--radius-xl);
  background: var(--cta-b) var(--btn-verlauf);
  font-size: var(--cta-size); font-weight: var(--cta-weight); letter-spacing: -.005em;
  transition: --cta-a var(--dur-base) var(--ease), --cta-b var(--dur-base) var(--ease),
              transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.gk-btn--cta:is(:hover, :focus-visible) {
  --cta-a: var(--cta-bg-start-hover); --cta-b: var(--cta-bg-end-hover);
  background: var(--cta-b) var(--btn-verlauf);
}
.gk-btn--cta:active { transform: scale(.98); }
/* Ohne Kachel (z. B. per Skript erzeugte Knöpfe): gleichmäßiger Innenabstand */
.gk-btn--cta:not(:has(> .gk-btn__kachel)) { padding-left: var(--label-pad); }
.gk-btn--cta .gk-btn__label { flex: 1 1 auto; min-width: 0; }
.gk-btn__kachel {
  display: grid; place-items: center; flex-shrink: 0;
  width: var(--kachel); height: var(--kachel);
  border-radius: var(--kachel-radius);
  background: var(--cta-kachel-bg); color: var(--cta-kachel-fg);
  box-shadow: var(--cta-kachel-shadow);
}
.gk-btn__icon { width: var(--kachel-icon); height: var(--kachel-icon); transition: transform var(--dur-base) var(--ease); }
.gk-btn--cta:is(:hover, :focus-visible) .gk-btn__icon { transform: translateX(2px); }
.gk-btn--secondary {
  --btn-bg: transparent; --btn-bg-h: transparent;
  --btn-fg: inherit;     --btn-fg-h: var(--text-accent);
  --btn-line: currentColor; --btn-line-h: currentColor;
}

.gk-btn--sm { gap: var(--control-gap-sm); padding: var(--control-pad-y-sm) var(--control-pad-x-sm); font-size: var(--button-size-sm); }
.gk-btn--sm .gk-btn__pfeil { font-size: var(--control-arrow-sm); }
.gk-btn--cta.gk-btn--sm {
  --kachel: var(--cta-kachel-sm); --kachel-inset: var(--cta-inset-sm);
  --kachel-radius: var(--radius-sm); --kachel-icon: 17px;
  --label-pad: var(--control-pad-x-sm); --kachel-gap: var(--space-2);
  gap: var(--kachel-gap);
  padding: var(--kachel-inset) var(--label-pad) var(--kachel-inset) var(--kachel-inset);
  border-radius: var(--radius-panel);
  font-size: var(--cta-size-sm);
}
.gk-btn--full { width: 100%; }
/* Volle Breite: Text optisch auf der Knopfmitte, Kachel bleibt links */
.gk-btn--cta.gk-btn--full .gk-btn__label {
  text-align: center;
  margin-right: calc(var(--kachel-inset) + var(--kachel) + var(--kachel-gap) - var(--label-pad));
}

.gk-btn:is([disabled], [aria-disabled="true"]) {
  background: var(--disabled-bg); border-color: var(--disabled-bg); color: var(--disabled-fg);
  cursor: not-allowed; pointer-events: none;
}

/* Mobil (Chris 05.11.2026): Buttons im Inhalt volle Breite; nebeneinander stehende stapeln sich.
   Kopf-, Fußzeile und Mobilleisten liegen außerhalb von main bzw. sind ausgenommen. */
@media (max-width: 759px) {
  main .gk-btn:not(.gk-kaufleiste .gk-btn) { box-sizing: border-box; width: 100%; flex-basis: 100%; }
  main .gk-btn--cta:not(.gk-kaufleiste .gk-btn) .gk-btn__label {
    text-align: center;
    margin-right: calc(var(--kachel-inset) + var(--kachel) + var(--kachel-gap) - var(--label-pad));
  }
}

@media (prefers-reduced-motion: reduce) {
  .gk-btn--cta { transition: color var(--dur-fast) var(--ease); }
  .gk-btn--cta:active, .gk-btn--cta:is(:hover, :focus-visible) .gk-btn__icon { transform: none; }
  .gk-btn__icon { transition: none; }
}

/* cb02 IconButton — Kit components/core/IconButton: rahmenloser 42-px-Knopf für Suche und Schließen. */
.gk-iconbtn {
  display: inline-grid; place-items: center; flex-shrink: 0;
  width: var(--iconbtn-size); height: var(--iconbtn-size);
  padding: 0; border: 0; background: transparent;
  color: inherit; cursor: pointer;
  font-size: 30px; line-height: 1;
  transition: color var(--dur-fast) var(--ease);
}
.gk-iconbtn:hover, .gk-iconbtn:focus-visible { color: var(--text-accent); }
.gk-iconbtn--tap { width: var(--tap-min); height: var(--tap-min); }
.gk-iconbtn:is([disabled], [aria-disabled="true"]) { color: var(--disabled-fg); cursor: not-allowed; }

/* cb03 Icon — Kit components/core/Icon: Strich-Icons (search, chevron) aus dem Sprite
   und Unicode-Glyphen ↗ → × + − in Textfarbe. */
.gk-icon {
  width: 23px; height: 23px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.gk-icon--sm { width: 20px; height: 20px; }
.gk-icon--fein { stroke-width: 1.5; }
.gk-icon--dreht { transition: transform var(--dur-base) var(--ease); }
[aria-expanded="true"] > .gk-icon--dreht { transform: rotate(180deg); }
.gk-glyph { display: inline-block; font-size: 22px; line-height: 1; }
.gk-glyph--akzent { color: var(--text-link); }

/* cb04 Pill — Kit components/core/Pill: kleines Etikett für Kategorie und Meta.
   Tonalität „dark“ entsteht über den Kontext der Fläche; marker sparsam einsetzen. */
.gk-pill {
  display: inline-flex; align-items: center;
  padding: var(--pill-pad-y) var(--pill-pad-x);
  border: 1px solid var(--border-pill);
  border-radius: var(--radius-xs);
  background: transparent; color: var(--text-body);
  font: 400 var(--meta-size)/1.5 var(--font-body);
}
.gk-pill--ice    { border-color: var(--border-pill-ice); }
.gk-pill--marker { background: var(--marker); border-color: var(--marker); color: var(--marker-fg); }
.gk-pill--res    { background: var(--res); border-color: var(--res); color: var(--res-fg); }

/* cb05 FilterChip — Kit components/core/FilterChip: Umschalter zum Filtern von Listen. */
.gk-chip {
  padding: var(--chip-pad-y) var(--chip-pad-x);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-card); color: var(--text-body);
  font: 400 var(--small-size)/1.2 var(--font-body);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.gk-chip:hover, .gk-chip:focus-visible { border-color: var(--border-interactive); }
.gk-chip[aria-pressed="true"] { background: var(--interactive); border-color: var(--interactive); color: var(--interactive-fg); }
.gk-chip:disabled { color: var(--disabled-fg); background: var(--disabled-bg); cursor: not-allowed; }

/* cb06 TextLink — Kit components/core/TextLink: unterstrichener Space-Grotesk-Link mit ↗,
   der Standard für die zweite Handlungsaufforderung. Auf Mitternacht und Royal wird er hell. */
.gk-textlink {
  --tl-fg: var(--text-link); --tl-line: var(--border-link); --tl-line-h: var(--text-link);
  display: inline-flex; align-items: center; justify-content: space-between; flex-shrink: 0;
  gap: var(--space-4);
  padding: 0 0 var(--space-1-5);
  border: 0; border-bottom: 1px solid var(--tl-line);
  background: none; color: var(--tl-fg);
  font: 500 var(--link-size)/1.2 var(--font-display);
  text-decoration: none; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease);
}
.gk-textlink:hover, .gk-textlink:focus-visible { border-bottom-color: var(--tl-line-h); }
.gk-textlink__pfeil { font-size: 19px; line-height: 1; }
.gk-textlink--sm { gap: var(--control-gap-sm); font-size: var(--link-size-sm); }
.gk-textlink--sm .gk-textlink__pfeil { font-size: 18px; }
.gk-textlink--dark { --tl-fg: var(--text-strong); --tl-line: var(--border-link-dark); --tl-line-h: var(--text-strong); }
.gk-textlink--ice  { --tl-fg: var(--text-ice); --tl-line: var(--border-link-ice); --tl-line-h: var(--text-on-brand); }

/* cb07 SearchField — Kit components/forms/SearchField: Suchleiste mit Lupe und royalem
   „Finden ↗“. Das Feld bleibt auf jeder Fläche weiß; Rahmen und Label folgen der Fläche. */
.gk-search { margin: 0; }
.gk-search__label { display: block; margin-bottom: var(--space-2); color: var(--text-muted); font-size: var(--small-size); }
.gk-search__feld {
  display: flex; align-items: center; gap: var(--space-2-5);
  padding: var(--field-pad);
  border: 1px solid var(--border-field); border-radius: var(--radius-md);
  background: var(--surface-field); color: var(--control-fg-on-light);
  transition: border-color var(--dur-fast) var(--ease);
}
.gk-search__feld:focus-within { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }
.gk-search__eingabe {
  flex: 1; min-width: 0;
  padding: var(--field-input-pad-y) 0;
  border: 0; background: transparent; color: inherit;
  font-family: var(--font-body); font-size: max(16px, var(--small-size));
}
.gk-search__eingabe:focus-visible { outline: none; }
.gk-search__eingabe::placeholder { color: var(--text-placeholder); opacity: 1; }
.gk-search__eingabe::-webkit-search-cancel-button { cursor: pointer; }
.gk-search__los {
  display: flex; align-items: center; gap: var(--search-submit-gap);
  padding: var(--search-submit-pad);
  border: 0; border-radius: var(--radius-sm);
  background: var(--action); color: var(--action-fg);
  font: 500 var(--small-size)/1.2 var(--font-display);
  cursor: pointer;
  transition: background-color var(--dur-base) var(--ease);
}
.gk-search__los:hover, .gk-search__los:focus-visible { background: var(--action-hover); }
.gk-search__pfeil { font-size: 20px; line-height: 1; }

/* cb08 Ribbon — Kit components/navigation/Ribbon: volle Breite, große Begriffe,
   getrennt von Koralle-Rauten. Fläche über Kontextklasse: gk-section--royal (Standard) oder --brand. */
.gk-ribbon {
  display: flex; justify-content: space-around; align-items: center;
  gap: var(--space-5);
  padding: clamp(14px, 2vw, 21px) var(--container-pad-compact);
  background: var(--surface-page); color: var(--text-strong);
  font: 500 var(--ribbon-size)/1.2 var(--font-display);
  overflow-x: auto; scrollbar-width: none;
}
.gk-ribbon::-webkit-scrollbar { display: none; }
.gk-ribbon__liste { display: contents; }
.gk-ribbon__eintrag { display: contents; }
.gk-ribbon__link {
  display: flex; align-items: center; gap: var(--space-5);
  color: inherit; text-decoration: none; white-space: nowrap;
}
.gk-ribbon__text { text-decoration: underline 1px transparent; text-underline-offset: 6px; transition: text-decoration-color var(--dur-fast) var(--ease); }
.gk-ribbon__link:hover .gk-ribbon__text { text-decoration-color: currentColor; }
.gk-ribbon__raute { width: 12px; height: 12px; flex-shrink: 0; background: var(--diamond); transform: rotate(45deg); }

/* cb09 Breadcrumb — Kit components/navigation/Breadcrumb: kleine, gedämpfte Spur mit
   unterstrichenen Links, Schrägstrich als Trenner.
   Mobil (Chris 05.11.2026): eine Zeile, waagerecht wischbar, Scrollbar unsichtbar. Startet ohne JS am
   Ende (aktuelle Seite sichtbar): die Spur läuft rtl, die Liste darin ltr; passt sie, steht sie links. */
.gk-breadcrumb { padding-top: var(--space-5); margin-bottom: var(--space-5); color: var(--text-muted); font-size: var(--small-size); }
.gk-breadcrumb__liste { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.gk-breadcrumb__eintrag { display: flex; align-items: center; gap: var(--space-2); }
.gk-breadcrumb__eintrag + .gk-breadcrumb__eintrag::before { content: "/"; }
.gk-breadcrumb__link { color: inherit; text-decoration: underline; text-underline-offset: 4px; transition: color var(--dur-fast) var(--ease); }
.gk-breadcrumb__link:hover { color: var(--text-link); }

@media (max-width: 759px) {
  .gk-breadcrumb {
    direction: rtl;
    overflow-x: auto; overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding-bottom: var(--space-1-5); margin-bottom: calc(var(--space-5) - var(--space-1-5));
  }
  .gk-breadcrumb::-webkit-scrollbar { display: none; }
  .gk-breadcrumb__liste { direction: ltr; flex-wrap: nowrap; width: max-content; margin-right: auto; white-space: nowrap; }
  .gk-breadcrumb__link:focus-visible { outline-offset: 1px; }
}

/* cb20 SectionHeading — Kit components/content/SectionHeading: Abschnittstitel mit kurzer
   Unterzeile und optionaler Aktion rechts (TextLink). Auf dunklen Flächen gk-sectionhead--on-dark. */
.gk-sectionhead {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  margin-bottom: var(--space-4-5);
}
.gk-sectionhead__text { min-width: 0; }
.gk-sectionhead__titel {
  margin: 0 0 var(--space-2);
  color: var(--text-strong);
  font: var(--h2-weight) var(--h2-size)/var(--h2-lh) var(--font-display);
  letter-spacing: var(--h2-tracking);
  text-wrap: balance;
}
.gk-sectionhead__unterzeile {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--intro-size); line-height: var(--intro-lh); letter-spacing: var(--intro-tracking);
}
.gk-sectionhead__unterzeile:empty { display: none; }
.gk-sectionhead--on-dark .gk-sectionhead__unterzeile { color: var(--text-ice); }

/* cb21 TopicCard — Kit components/content/TopicCard: Epochen-Karte mit Schwarzweißfoto,
   Zeitraum und Titel mit ↗ auf einem leicht gekippten Farbblock. Beim Zeigen richtet sich die
   Karte auf und hebt sich. Töne night (Standard), royal, coral, ice, paper; --featured größer.
   In der Reihe gk-topics wechseln die Neigungen wie im Kit (-1.5° / 1° / -0.7°). */
.gk-topic {
  --topic-bg: var(--surface-brand);
  --topic-fg: var(--text-on-brand);
  --topic-meta: var(--text-ice);
  --topic-tilt: 0deg;
  --topic-bild-h: 215px;
  display: block; min-width: 0; overflow: hidden;
  padding-bottom: 19px;
  border-radius: var(--radius-lg);
  background: var(--topic-bg); color: var(--topic-fg);
  text-decoration: none; cursor: pointer;
  transform: rotate(var(--topic-tilt));
  transition: transform var(--dur-base) var(--ease);
}
.gk-topic:hover, .gk-topic:focus-visible { transform: translateY(-6px); }
.gk-topic:focus-visible { outline-offset: var(--focus-ring-offset); }

.gk-topic__bild {
  display: block; width: 100%; height: var(--topic-bild-h);
  margin-bottom: var(--space-3);
  object-fit: cover; filter: grayscale(1);
}
.gk-topic__zeit {
  display: block;
  margin: 0 var(--space-4) var(--space-1-5);
  color: var(--topic-meta);
  font: 400 var(--meta-size)/var(--meta-lh) var(--font-body);
}
.gk-topic__titel {
  display: flex; justify-content: space-between; gap: var(--space-3);
  margin: 0 var(--space-4);
  color: inherit;
  font: var(--h4-weight) var(--h4-size)/var(--h3-lh) var(--font-display);
  letter-spacing: var(--h3-tracking);
}
.gk-topic__pfeil { flex-shrink: 0; color: var(--topic-meta); font-size: 22px; line-height: 1; }

.gk-topic--featured { --topic-bild-h: 265px; padding-bottom: 25px; }
.gk-topic--featured .gk-topic__titel { font-size: var(--h3-size); }

.gk-topic--royal { --topic-bg: var(--surface-accent); }
.gk-topic--coral { --topic-bg: var(--diamond);       --topic-fg: var(--control-fg-on-light); --topic-meta: var(--control-fg-on-light); }
.gk-topic--ice   { --topic-bg: var(--surface-muted); --topic-fg: var(--control-fg-on-light); --topic-meta: var(--text-muted); }
.gk-topic--paper { --topic-bg: var(--surface-card);  --topic-fg: var(--text-strong);         --topic-meta: var(--text-muted); }

/* Reihe aus drei Karten: erste breiter, unten bündig, Neigungen wie im Kit */
.gk-topics {
  display: grid; grid-template-columns: 1.3fr 1fr 1fr; align-items: end;
  gap: var(--space-3);
  margin: 0; padding: 0; list-style: none;
}
.gk-topics > li { min-width: 0; }
.gk-topics > :nth-child(3n+1) .gk-topic { --topic-tilt: var(--tilt-sm); }
.gk-topics > :nth-child(3n+2) .gk-topic { --topic-tilt: 1deg; }
.gk-topics > :nth-child(3n)   .gk-topic { --topic-tilt: -.7deg; }

@media (max-width: 899px) {
  .gk-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gk-topics > :first-child { grid-column: 1 / -1; }
}
/* Mobil wie im Kit: ohne Neigung, einheitliche Bildhöhe, featured ohne Vergrößerung */
@media (max-width: 759px) {
  .gk-topic, .gk-topics > :nth-child(n) .gk-topic { --topic-tilt: 0deg; --topic-bild-h: 200px; }
  .gk-topic--featured { padding-bottom: 19px; }
  .gk-topic--featured .gk-topic__titel { font-size: var(--h4-size); }
}
@media (max-width: 559px) {
  .gk-topics { grid-template-columns: minmax(0, 1fr); }
}

/* cb22 TeaserBanner — Kit components/content/TeaserBanner: gerundetes Band über die volle
   Inhaltsbreite mit Überschrift, Text und Links (Lehrkräfte, Forum). Fläche über Kontextklasse:
   gk-section--royal (Standard), gk-section--brand (Mitternacht) oder gk-teaser--ice. */
.gk-teaser {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-5);
  padding: clamp(24px, 3vw, 37px);
  border-radius: var(--radius-lg);
  background: var(--surface-page); color: var(--text-strong);
}
.gk-teaser__text { flex: 1 1 320px; min-width: 0; }
.gk-teaser__titel {
  margin: 0 0 var(--space-2);
  color: inherit;
  font: var(--h2-weight) var(--h2-size)/var(--h2-lh) var(--font-display);
  letter-spacing: var(--h2-tracking);
  text-wrap: balance;
}
.gk-teaser__beschreibung {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--small-size); line-height: var(--small-lh);
}
.gk-teaser__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4-5); }

.gk-teaser--ice { background: var(--surface-art); color: var(--text-strong); }

/* cb23 ProductCard — Kit components/content/ProductCard: Lernshop-Karte mit gekipptem Buchcover
   auf Eis-Bühne, Produktart, Titel, Preis und Link. Beim Zeigen auf die Bühne richtet sich das
   Buch auf. Langer Covertitel: gk-product__buchtitel--lang. */
.gk-product { min-width: 0; color: var(--text-body); }

.gk-product__buehne {
  display: grid; place-items: center;
  height: 260px;
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  text-decoration: none;
}
.gk-product__buch {
  position: relative; display: block;
  width: 148px; height: 199px; padding: var(--space-3);
  border-left: 6px solid var(--res);
  border-radius: 1px var(--radius-sm) var(--radius-sm) 1px;
  background: var(--control-light); color: var(--control-fg-on-light);
  box-shadow: var(--elevation-book);
  transform: rotate(-5deg);
  transition: transform var(--dur-base) var(--ease);
}
.gk-product__buehne:hover .gk-product__buch,
.gk-product:focus-within .gk-product__buch { transform: rotate(0); }
.gk-product__buchart { display: block; color: var(--text-muted); font-size: var(--meta-size); line-height: var(--meta-lh); }
.gk-product__buchtitel {
  display: block; margin-top: 25px;
  font: 600 23px/1.1 var(--font-display); letter-spacing: -.025em;
}
.gk-product__buchtitel--lang { font-size: 18px; }
.gk-product__band {
  position: absolute; left: 0; right: 0; bottom: 20px; height: 40px;
  background: var(--res);
}
.gk-product__marke {
  position: absolute; right: var(--space-2); bottom: 9px;
  color: var(--res-fg);
  font-size: var(--meta-size); line-height: var(--meta-lh);
}

.gk-product__art {
  display: block; margin: var(--space-3) 0 var(--space-2);
  color: var(--text-muted); font-size: var(--meta-size); line-height: var(--meta-lh);
}
.gk-product__titel {
  margin: 0 0 var(--space-2-5);
  color: var(--text-strong);
  font: var(--h4-weight) var(--h4-size)/var(--h4-lh) var(--font-display);
  letter-spacing: var(--h4-tracking);
}
.gk-product__fuss {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--small-size); line-height: var(--small-lh);
}
.gk-product__hinweis { display: block; margin-top: 3px; color: var(--text-muted); font-size: var(--meta-size); line-height: var(--meta-lh); }
.gk-product__link { flex-shrink: 0; }  /* Kaufknopf als gk-btn--cta (ENTSCHEIDE #7) */

/* cb24 ShopPanel — Kit components/content/ShopPanel: mitlaufende Mitternacht-Seitenleiste, die das
   Lernmaterial zum aktuellen Thema anbietet (rechte Spalte, rund 320 px, auf jeder Themenseite).
   Unter 760 px baut cb24-shoppanel.js daraus die feste Leiste am unteren Rand (Kit MobileBar);
   ohne JavaScript bleibt das Panel als normaler Block im Fluss.
   Kaufzone (ENTSCHEIDE #7): Kaufkante oben in der CTA-Farbe, Kaufknöpfe gk-btn--cta, jedes Angebot
   mit Mini-Cover gk-shop__cover in der Formsprache der Buchbühne (cb56) und ProductCard (cb23). */
.gk-shop {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4-5);
  border-top: var(--cta-edge) solid var(--cta-bg);
  border-radius: var(--radius-lg);
  background: var(--surface-page); color: var(--text-strong);
}
.gk-shop__etikett {
  display: inline-block; margin-bottom: var(--space-2-5);
  padding: var(--space-1) 8px;
  border-radius: var(--radius-xs);
  background: var(--res); color: var(--res-fg);
  font-size: var(--meta-size); line-height: var(--meta-lh);
}
.gk-shop__titel {
  margin: 0 0 var(--space-2);
  font: var(--h3-weight) var(--h3-size)/var(--h3-lh) var(--font-display);
  letter-spacing: var(--h3-tracking);
}
.gk-shop__text { margin: 0; color: var(--text-reading); font-size: var(--small-size); line-height: 1.7; }

.gk-shop__liste { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.gk-shop__angebot {
  padding: 16px var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--surface-card);
}
.gk-shop__zeile { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.gk-shop__art { color: var(--text-reading); font-size: var(--meta-size); line-height: var(--meta-lh); }
.gk-shop__preis { color: var(--text-strong); font: 500 var(--body-size)/1.3 var(--font-display); white-space: nowrap; }
.gk-shop__name {
  margin: 6px 0 14px;
  font: var(--h4-weight) var(--h4-size)/var(--h4-lh) var(--font-display);
  letter-spacing: var(--h4-tracking);
}
.gk-shop__aktionen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }

/* Angebot mit Mini-Cover: Cover links neben Art und Titel, Preis und Kaufknopf als gemeinsame Kaufzeile */
.gk-shop__angebot:has(> .gk-shop__cover) {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "cover art" "cover name" "preis aktion";
  column-gap: 14px; align-items: start;
}
.gk-shop__angebot:has(> .gk-shop__cover) .gk-shop__zeile { display: contents; }
.gk-shop__angebot:has(> .gk-shop__cover) .gk-shop__art { grid-area: art; }
.gk-shop__angebot:has(> .gk-shop__cover) .gk-shop__name { grid-area: name; margin: 4px 0 0; }
.gk-shop__angebot:has(> .gk-shop__cover) .gk-shop__preis { grid-area: preis; align-self: center; margin-top: 16px; }
.gk-shop__angebot:has(> .gk-shop__cover) .gk-shop__aktionen { grid-area: aktion; justify-content: flex-end; margin-top: 16px; }
.gk-shop__angebot:has(> .gk-shop__cover) .gk-shop__aktionen > .gk-btn { margin-left: auto; }

.gk-shop__cover {
  --cover-w: 64px; --cover-h: 86px;
  grid-area: cover;
  position: relative; display: block; box-sizing: border-box; overflow: hidden;
  width: var(--cover-w); height: var(--cover-h); padding: 7px 4px 0 5px;
  border-left: 4px solid var(--res);
  border-radius: 1px var(--radius-xs) var(--radius-xs) 1px;
  background: var(--control-light); color: var(--control-fg-on-light);
  box-shadow: var(--elevation-book);
  transform: rotate(-4deg);
  transition: transform var(--dur-base) var(--ease);
}
.gk-shop__cover::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 8px; height: 11px;
  background: var(--res);
}
.gk-shop__angebot:hover .gk-shop__cover,
.gk-shop__angebot:focus-within .gk-shop__cover { transform: rotate(0); }
.gk-shop__coverart { display: block; overflow: hidden; color: var(--text-slate); font-size: 7px; line-height: 1.2; white-space: nowrap; }
.gk-shop__covertitel { display: block; margin-top: 6px; font: 600 9.5px/1.08 var(--font-display); letter-spacing: -.02em; hyphens: manual; }
/* Kleinere Stufen für die Mobilleiste: klein (Angebotszeile), mini (Stapel im Schalter, ohne Schrift) */
.gk-shop__cover--klein { --cover-w: 46px; --cover-h: 62px; padding: 6px 3px 0 4px; border-left-width: 3px; flex-shrink: 0; }
.gk-shop__cover--klein::after { bottom: 7px; height: 9px; }
.gk-shop__cover--klein .gk-shop__coverart { display: none; }
.gk-shop__cover--klein .gk-shop__covertitel { margin-top: 0; font-size: 7.5px; }
.gk-shop__cover--mini { --cover-w: 24px; --cover-h: 32px; padding: 0; border-left-width: 2px; box-shadow: 0 2px 6px color-mix(in oklab, var(--surface-night) 35%, transparent); }
.gk-shop__cover--mini::after { bottom: 4px; height: 5px; }
.gk-shop__cover--mini > * { display: none; }

.gk-shop__paket {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--border-default);
  color: var(--text-strong); font-size: var(--small-size); line-height: var(--small-lh);
  text-decoration: none;
}
.gk-shop__paket:hover > span:first-child { text-decoration: underline; text-underline-offset: 3px; }
.gk-shop__paketpfeil { flex-shrink: 0; color: var(--res); font-size: 20px; line-height: 1; }

/* Seitenraster: Inhalt links, Panel rechts in der Kit-Spalte */
.gk-shoplayout {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: start;
  gap: var(--space-6);
}

@media (min-width: 760px) {
  .gk-shop {
    position: sticky; top: calc(var(--gk-header-h) + var(--space-4));
    transition: top var(--dur-header) var(--ease);
  }
}
@media (max-width: 899px) {
  .gk-shoplayout { grid-template-columns: minmax(0, 1fr); }
}

/* --- Mobile Leiste (aus dem Panel gebaut) ---------------------------------- */
.gk-shopbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 58;
  padding-bottom: env(safe-area-inset-bottom);
  border-top: var(--cta-edge) solid var(--cta-bg);
  background: var(--surface-page); color: var(--text-strong);
  box-shadow: 0 -10px 40px color-mix(in oklab, var(--surface-night) 25%, transparent);
  transition: border-radius var(--dur-mid) var(--ease);
}
.gk-shopbar--offen { border-radius: 18px 18px 0 0; }
.gk-shopbar__fach {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-header) var(--ease);
}
.gk-shopbar--offen .gk-shopbar__fach { grid-template-rows: 1fr; }
.gk-shopbar__innen { overflow: hidden; }
.gk-shopbar__inhalt {
  display: flex; flex-direction: column; gap: var(--space-2);
  max-height: 62vh; overflow-y: auto;
  padding: 20px var(--container-pad-compact) 4px;
}
.gk-shopbar__titel {
  margin: 0 0 4px;
  font: var(--h3-weight) var(--h3-size)/var(--h3-lh) var(--font-display);
  letter-spacing: var(--h3-tracking);
}
.gk-shopbar__angebot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--surface-card);
}
.gk-shopbar__angebot > div { flex: 1; min-width: 0; }
.gk-shopbar__angebot > .gk-shop__cover { transform: rotate(-3deg); }
.gk-shopbar__meta { color: var(--text-reading); font-size: var(--meta-size); line-height: var(--meta-lh); }
.gk-shopbar__name { display: block; margin-top: 3px; font: 500 var(--small-size)/1.25 var(--font-display); }
.gk-shopbar__paket {
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--tap-min);
  color: var(--text-strong); font-size: var(--small-size); text-decoration: none;
}
.gk-shopbar__paket > span:last-child { color: var(--res); font-size: var(--body-size); }

.gk-shopbar__schalter {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 60px;
  padding: 0 var(--container-pad-compact);
  border: 0; border-top: 1px solid transparent;
  background: none; color: inherit; text-align: left; cursor: pointer;
  font: inherit;
}
.gk-shopbar--offen .gk-shopbar__schalter { border-top-color: var(--border-default); }
.gk-shopbar__info { display: flex; align-items: center; gap: var(--space-2); }
.gk-shopbar__stapel { display: flex; flex-shrink: 0; padding-left: 6px; }
.gk-shopbar__stapel > .gk-shop__cover { margin-left: -9px; }
.gk-shopbar__stapel > .gk-shop__cover:nth-child(1) { transform: rotate(-8deg); }
.gk-shopbar__stapel > .gk-shop__cover:nth-child(2) { transform: rotate(-1deg) translateY(-2px); }
.gk-shopbar__stapel > .gk-shop__cover:nth-child(3) { transform: rotate(6deg); }
.gk-shopbar__dot { width: var(--dot-md); height: var(--dot-md); flex-shrink: 0; border-radius: var(--radius-dot); background: var(--res); }
.gk-shopbar__label { display: block; font: 500 var(--small-size)/1.3 var(--font-display); }
.gk-shopbar__info small { color: var(--text-reading); font-size: var(--meta-size); }
.gk-shopbar__knopf {
  padding: var(--space-2) 14px;
  border-radius: var(--radius-md);
  background: var(--cta-bg); color: var(--cta-fg);
  font: 500 var(--small-size)/1.2 var(--font-body);
}
.gk-shopbar__schalter:focus-visible { outline-offset: -4px; }

@media (max-width: 759px) {
  .gk-shop[data-gk-shop-leiste] { display: none; }
  body:has(> .gk-shopbar) { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
}
@media (min-width: 760px) {
  .gk-shopbar { display: none; }
}
@media (prefers-reduced-motion: reduce) { .gk-shop__cover { transition: none; } }

/* cb25 LessonRow — Kit components/content/LessonRow: Listenzeile mit Jahresspalte, Titel und Meta
   und ↗, für Kapitel-, Lexikon- und Artikellisten. In der Liste gk-lessons trägt die erste
   Zeile die obere Linie (Kit-Prop first); einzeln: gk-lesson--erste. */
.gk-lessons { margin: 0; padding: 0; list-style: none; }
.gk-lesson {
  display: grid; grid-template-columns: 65px minmax(0, 1fr) 25px; align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-default);
  color: var(--text-body); text-decoration: none; cursor: pointer;
}
.gk-lessons > li:first-child .gk-lesson, .gk-lesson--erste { border-top: 1px solid var(--border-default); }
.gk-lesson__jahr { color: var(--text-muted); font: 500 var(--small-size)/var(--small-lh) var(--font-display); }
.gk-lesson__text { min-width: 0; }
.gk-lesson__titel {
  margin: 0 0 4px;
  color: inherit;
  font: var(--h4-weight) var(--h4-size)/var(--h4-lh) var(--font-display);
  letter-spacing: var(--h4-tracking);
  transition: color var(--dur-fast) var(--ease);
}
.gk-lesson:hover .gk-lesson__titel, .gk-lesson:focus-visible .gk-lesson__titel { color: var(--text-link); }
.gk-lesson__meta { display: block; color: var(--text-muted); font-size: var(--small-size); line-height: var(--small-lh); }
.gk-lesson__pfeil { color: var(--text-link); font-size: 22px; line-height: 1; }

@media (max-width: 559px) {
  .gk-lesson { grid-template-columns: 52px minmax(0, 1fr) 22px; gap: var(--space-2-5); }
}

/* cb26 StepCard — Kit components/content/StepCard: nummerierter Lernschritt
   (Überblick → Zusammenhänge → Wissencheck). Töne über Kontextklasse: gk-section--brand (night,
   Kit-Standard) oder gk-section--royal jeweils mit gk-step--flaeche; ohne beides paper.
   Beim Zeigen hebt sich die Karte. Reihe aus drei Schritten: gk-steps. */
.gk-step {
  --step-text: var(--text-muted);
  display: flex; flex-direction: column; align-items: flex-start;
  height: 100%;
  padding: clamp(22px, 2.5vw, 27px);
  border: 1px solid var(--border-card);
  border-radius: 14px;
  background: var(--surface-card); color: var(--text-strong);
  text-decoration: none; cursor: pointer;
  transition: transform var(--dur-base) var(--ease);
}
.gk-step:hover, .gk-step:focus-visible { transform: translateY(-4px); }
.gk-step--flaeche { --step-text: var(--text-ice); border: 0; background: var(--surface-page); }

.gk-step__nummer {
  display: grid; place-items: center;
  width: 40px; height: 40px; margin-bottom: 20px;
  border-radius: 50%;
  background: var(--interactive); color: var(--interactive-fg);
  font-size: var(--body-size); line-height: 1;
}
.gk-step__titel {
  margin: 0 0 12px;
  color: inherit;
  font: var(--h3-weight) var(--h3-size)/var(--h3-lh) var(--font-display);
  letter-spacing: var(--h3-tracking);
}
.gk-step__text {
  max-width: 320px; margin: 0 0 20px;
  color: var(--step-text);
  font: var(--small-size)/var(--small-lh) var(--font-body);
}
.gk-step__aktion {
  display: flex; align-items: center; gap: 20px;
  margin-top: auto; padding-bottom: 6px;
  border-bottom: 1px solid var(--border-link);
  color: var(--text-link);
  font-size: var(--meta-size); line-height: var(--meta-lh);
}
.gk-step__pfeil { font-size: var(--body-size); line-height: 1; }

.gk-steps {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0; padding: 0; list-style: none;
}
.gk-steps > li { min-width: 0; }
@media (max-width: 899px) {
  .gk-steps { grid-template-columns: minmax(0, 1fr); }
}

/* cb30 Accordion — Kit components/content/Accordion: +/−-Aufklappliste für FAQs und
   Methodenschritte. Immer nur ein Eintrag offen (details[name], Rückfall per JS).
   Kit-Maße in px als Kommentar; Abstände als Summen der Raster-Tokens, exakt. */
.gk-akkordeon { max-width: var(--measure-faq, 890px); }
.gk-akkordeon__eintrag {
  padding-block: calc(var(--space-1-5) * 3);           /* 21 */
  border-bottom: 1px solid var(--border-default);
}
.gk-akkordeon__kopf {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: calc(var(--space-2) * 2);                       /* 20 */
  cursor: pointer; list-style: none;
  color: var(--text-strong);
  font-family: var(--font-display); font-weight: var(--h4-weight);
  font-size: var(--h4-size); line-height: var(--h4-lh);
}
.gk-akkordeon__kopf::-webkit-details-marker { display: none; }
.gk-akkordeon__kopf::marker { content: ''; }
.gk-akkordeon__zeichen { flex-shrink: 0; }
.gk-akkordeon__zeichen::before { content: '+'; }
.gk-akkordeon__eintrag[open] .gk-akkordeon__zeichen::before { content: '−'; }
.gk-akkordeon__text {
  max-width: var(--measure-faq-text, 760px);
  margin-top: calc(var(--space-1-5) * 2);              /* 14 */
  color: var(--text-muted);
  font-size: var(--body-size); line-height: var(--reading-lh);
}

/* cb31 Callout — Kit components/content/Callout: getönte Hinweisbox im Lesetext.
   tone="tint" (Standard, Eis) oder dunkel: gk-hinweis--dunkel zusammen mit der Kontextklasse gk-section--brand. */
.gk-hinweis {
  margin-block: var(--space-5);                        /* 30 */
  padding: var(--space-4-5);                           /* 27 */
  border-radius: var(--radius-xl);                     /* 12 */
  background: var(--surface-art);
  color: var(--text-body);
}
.gk-hinweis--dunkel { background: var(--surface-page); color: var(--text-strong); }
.gk-hinweis__titel {
  margin: 0 0 calc(var(--space-1-5) + var(--space-1)); /* 12 */
  color: inherit;
  font-family: var(--font-display); font-weight: var(--h4-weight);
  font-size: var(--h4-size); line-height: var(--h4-lh); letter-spacing: var(--h4-tracking);
}
.gk-hinweis__text { font-size: var(--hint-size); line-height: var(--hint-lh); }
.gk-hinweis__aktion { margin-top: var(--space-3); }      /* Kit-Seite Epoche: 16 */

/* cb32 CauseChain — Kit components/content/CauseChain: Ursache → Wirkung in 2–4 farbigen
   Karten (Mitternacht, Royal, Koralle im Wechsel). Unter 700 px Behälterbreite stapeln
   die Karten mit ↓; das Kit misst den Behälter, der Port nutzt eine Container-Query. */
.gk-kette { container-type: inline-size; }
.gk-kette__liste {
  --kette-pfeil: calc(var(--space-5) + var(--space-2));            /* Pfeilspalte 40 */
  --kette-luecke: calc(var(--space-2-5) + var(--space-2));          /* 23 */
  display: flex; align-items: stretch;
  gap: calc(var(--kette-luecke) * 2 + var(--kette-pfeil));
  margin: 0; padding: 0; list-style: none;
}
.gk-kette__glied {
  position: relative; flex: 1 1 0; min-width: 0;
  padding: calc(var(--space-1-5) * 4);                              /* 28 */
  border-radius: var(--radius-xl);                                  /* 12 */
  background: var(--surface-night); color: var(--text-on-brand);
  --kette-meta: var(--text-ice);
}
.gk-kette__glied:nth-child(3n+2) { background: var(--surface-accent); }
.gk-kette__glied:nth-child(3n) { background: var(--diamond); color: var(--control-fg-on-light); --kette-meta: var(--control-fg-on-light); }
.gk-kette__glied + .gk-kette__glied::before {
  content: '→'; position: absolute; top: 50%; right: 100%;
  width: calc(var(--kette-luecke) * 2 + var(--kette-pfeil));
  transform: translateY(-50%);
  color: var(--text-accent); text-align: center;
  font-size: var(--kette-pfeil-size, 28px); line-height: 1;
}
.gk-kette__datum {
  display: block; margin-bottom: var(--space-2-5);                  /* 13 */
  color: var(--kette-meta);
  font-size: var(--meta-size); line-height: 1.5;
}
.gk-kette__titel {
  margin: 0 0 calc(var(--space-1-5) + var(--space-1));              /* 12 */
  color: inherit; overflow-wrap: anywhere; hyphens: auto;
  font-family: var(--font-display); font-weight: var(--h3-weight);
  font-size: var(--h3-size); line-height: var(--h3-lh); letter-spacing: var(--h3-tracking);
}
.gk-kette__text { color: var(--kette-meta); font: var(--small-size)/var(--small-lh) var(--font-body); }

@container (max-width: 699px) {
  .gk-kette__liste {
    --kette-pfeil-h: var(--kette-pfeil-size-sm, 22px);
    flex-direction: column;
    gap: calc(var(--space-2) * 2 + var(--kette-pfeil-h));            /* 10 + Pfeil + 10 */
  }
  .gk-kette__glied { padding: var(--space-4); }                     /* 22 */
  .gk-kette__glied + .gk-kette__glied::before {
    content: '↓'; top: auto; right: auto; bottom: 100%; left: 0;
    width: auto; transform: translateY(calc(var(--space-2) * -1));
    padding-left: calc(var(--space-1-5) * 2 + var(--space-2));      /* 24 */
    font-size: var(--kette-pfeil-h); text-align: left;
  }
}

/* cb33 FactGrid — Kit components/content/FactGrid: umrandetes Raster kurzer Sachangaben
   (z. B. Verfassungsorgane). Haarlinien entstehen aus 1 px Lücke über der Linienfarbe. */
.gk-fakten {
  --fakten-min: var(--factgrid-min, 240px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--fakten-min)), 1fr));
  gap: 1px; margin: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-grid, 7px);
  background: var(--border-default);
  overflow: hidden;
}
.gk-fakten--drei { --fakten-min: var(--factgrid-min-3, 200px); }
.gk-fakten__eintrag {
  padding: calc(var(--space-2-5) + var(--space-2));                 /* 23 */
  background: var(--surface-card); color: var(--text-body);
}
.gk-fakten__titel {
  display: block; margin-bottom: var(--space-2);                    /* 10 */
  font-size: var(--small-size); font-weight: 700;
}
.gk-fakten__text { margin: 0; font-size: var(--small-size); line-height: 1.75; }

/* cb34 KeyPoints — Kit components/content/KeyPoints: Kernaussagen mit Royal-Punkten
   für Überblicks-Abschnitte. */
.gk-kernpunkte {
  display: grid; gap: calc(var(--space-2) + var(--space-1));       /* 15 */
  max-width: var(--measure-list, 850px);
  margin: 0 0 var(--space-4-5); padding: 0; list-style: none;      /* 27 */
}
.gk-kernpunkte__punkt {
  position: relative;
  padding-left: calc(var(--space-2-5) + var(--space-2));           /* 23 */
  color: var(--text-body);
  font-size: var(--body-size); line-height: var(--reading-lh);
}
.gk-kernpunkte__punkt::before {
  content: ''; position: absolute; left: 0; top: .7em;
  width: var(--dot-xs, 6px); height: var(--dot-xs, 6px);
  border-radius: 50%; background: var(--text-accent);
}

/* cb35 KnowledgeQuestion — Kit components/content/KnowledgeQuestion: Einfachauswahl im
   Wissencheck mit sofortiger Rückmeldung. Nach der Wahl sind alle Optionen gesperrt;
   die gewählte trägt 2 px Royal-Rand (zweites Pixel als Innenschatten, kein Versatz). */
.gk-frage {
  min-width: 0;
  margin: 0 0 calc(var(--space-2-5) * 2);                          /* 26 */
  padding: calc(var(--space-2-5) + var(--space-2));                /* 23 */
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);                                 /* 12 */
  background: var(--surface-card); color: var(--text-body);
}
.gk-frage__frage {
  max-width: 100%; padding: 0 var(--space-1-5);                    /* 0 8 */
  color: var(--text-strong);
  font-family: var(--font-display); font-weight: var(--h4-weight);
  font-size: var(--h4-size); line-height: var(--h4-lh);
}
.gk-frage__optionen { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }  /* 10 */
.gk-frage__option {
  width: 100%; box-sizing: border-box;
  padding: calc(var(--space-1-5) * 2) var(--space-3);              /* 14 17 */
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);                                 /* 5 */
  background: var(--surface-page); color: var(--text-body);
  font: 400 var(--small-size)/1.6 var(--font-body); text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.gk-frage__option:not(:disabled):hover,
.gk-frage__option:not(:disabled):focus-visible { border-color: var(--border-interactive); }
.gk-frage__option[aria-pressed="true"] {
  border-color: var(--border-interactive);
  box-shadow: inset 0 0 0 1px var(--border-interactive);
  background: var(--control-ice);
}
.gk-frage__option:disabled { cursor: default; }
.gk-frage__rueckmeldung { display: none; }
.gk-frage__status {
  margin: var(--space-3) 0 0;                                      /* 16 */
  color: var(--text-body);
  font-size: var(--hint-size); line-height: var(--hint-lh);
}
.gk-frage__status:empty { display: none; }
.gk-frage__urteil { font-weight: 700; color: var(--text-strong); }
.gk-frage__urteil--richtig { color: var(--text-accent); }

/* cb36 TimelineGrid — Kit components/content/TimelineGrid: getönte Fläche mit Jahr und
   einem Satz je Spalte, für eine schnelle Chronologie. */
.gk-zeitraster {
  padding: calc(var(--space-5) + var(--space-1));                  /* 35 */
  border-radius: var(--radius-xl);                                 /* 12 */
  background: var(--surface-muted); color: var(--text-body);
}
.gk-zeitraster__titel {
  margin: 0 0 var(--space-5);                                      /* 30 */
  color: var(--text-strong);
  font-family: var(--font-display); font-weight: var(--h3-weight);
  font-size: var(--h3-size); line-height: var(--h3-lh); letter-spacing: var(--h3-tracking);
}
.gk-zeitraster__liste {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--timeline-min, 160px), 1fr));
  gap: var(--space-5);                                             /* 30 */
  margin: 0; padding: 0; list-style: none;
}
.gk-zeitraster__eintrag {
  padding-top: calc(var(--space-2-5) + var(--space-1));            /* 18 */
  border-top: 1px solid var(--border-timeline, var(--border-card));
}
.gk-zeitraster__jahr {
  display: block;
  color: var(--text-accent);
  font-family: var(--font-display); font-weight: 500; font-size: var(--h3-size);
}
.gk-zeitraster__text {
  margin: var(--space-2) 0 0;                                      /* 10 */
  color: var(--text-muted);
  font-size: var(--small-size); line-height: 1.75;
}

/* cb40 BrandMark — Kit components/brand/BrandMark: Blase mit Kürzel, Ebenen-Quadrat in der
   Ressourcenfarbe, Wortmarke. Alle Maße folgen der Kit-Formel aus der Höhe --mark-h.
   Ressource über Kontext gk-res--<art> (ohne Klasse: themen), Fläche über die Kontext-Tokens:
   auf Mitternacht ist die Wortmarke weiß, auf Papier Mitternacht. */
.gk-mark {
  --mark-h: 44px;
  --mark-w: calc(var(--mark-h) * 1.045);
  --mark-sq: calc(var(--mark-w) * .39);
  --mark-r: calc(var(--mark-sq) * .24);
  --mark-blase: calc(var(--mark-w) * .87);
  display: inline-flex; align-items: center;
  gap: calc(var(--mark-h) * .26);
  color: var(--text-strong);
  text-decoration: none;
}
.gk-mark--sm { --mark-h: 34px; }
.gk-mark--lg { --mark-h: 64px; }
.gk-mark--xl { --mark-h: 96px; }

.gk-mark__zeichen { position: relative; display: block; flex-shrink: 0; width: var(--mark-w); height: var(--mark-h); }
.gk-mark__ebene,
.gk-mark__abglanz {
  position: absolute;
  width: var(--mark-sq); height: var(--mark-sq);
  border-radius: var(--mark-r);
  background: var(--res);
}
.gk-mark__ebene { right: 0; bottom: 0; }
.gk-mark__blase {
  position: absolute; left: 0; top: 0;
  width: var(--mark-blase); height: calc(var(--mark-h) * .91);
  border-radius: 50% 50% calc(var(--mark-blase) * .11) 50%;
  background: var(--gk-logo-blue);
  overflow: hidden;
}
/* Das Quadrat scheint durch die Blase hindurch */
.gk-mark__abglanz { left: calc(var(--mark-w) - var(--mark-sq)); top: calc(var(--mark-h) - var(--mark-sq)); opacity: .26; }
.gk-mark__kuerzel {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding-bottom: calc(var(--mark-h) * .06);
  color: var(--gk-white);
  font: 600 calc(var(--mark-h) * .4)/1 var(--font-logo, var(--font-display));
  letter-spacing: -.03em;
}
.gk-mark__wort {
  color: var(--text-strong);
  font: 700 calc(var(--mark-h) * .4)/.98 var(--font-logo, var(--font-display));
  letter-spacing: -.035em;
}
.gk-mark:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset); border-radius: var(--radius-md); }

/* cb41 HeroHeadline — Kit components/brand/HeroHeadline: Display-Überschrift in Space Grotesk
   mit gekipptem, handgezeichnet wirkendem Schwung darunter. Farbe folgt der Fläche;
   der Schwung ist auf Mitternacht Royal-hell, auf Papier Royal (Token --swash). */
.gk-hero-h {
  max-width: 750px;
  margin: 0 0 24px;
  color: var(--text-hero, var(--text-strong));
  font: var(--display-weight) var(--display-size)/var(--display-lh) var(--font-display);
  letter-spacing: var(--display-tracking);
}
.gk-hero-h__schwung {
  display: block;
  width: 64%; height: 9px;
  margin-top: 5px;
  border-bottom: 3px solid var(--swash, var(--gk-royal-light));
  border-radius: 50%;
  transform: rotate(-3deg);
}

/* cb42 PolaroidStage — Kit components/brand/PolaroidStage, guidelines/brand-collage:
   Bogenbühne in Royal (+2°), Polaroid in Graustufen (−9°, beim Zeigen −6°) mit Klebeband,
   Koralle-Sticker (+12°) und Papier-Etikett (−5°). Einmal je Seite, nur im Hero.
   Höhe über --polaroid-h (Kit: 445 px, mobil 380 px). */
.gk-polaroid {
  --polaroid-h: 445px;
  --polaroid-sticker: var(--gk-coral);
  position: relative;
  display: flex; align-items: center; justify-content: center;
  height: var(--polaroid-h);
  margin: 0 clamp(12px, 2vw, 20px) 0 0;
  border-radius: var(--radius-arch);
  background: var(--surface-stage);
  color: var(--gk-white);
  text-decoration: none;
  transform: rotate(2deg);
}
@media (max-width: 759px) { .gk-polaroid { --polaroid-h: 380px; } }

.gk-polaroid__notiz {
  position: absolute; left: 28px; top: 30px;
  color: var(--gk-white);
  font: 500 var(--fs-body)/1.3 var(--font-display);
  transform: rotate(-7deg);
}
.gk-polaroid__abzug {
  position: relative;
  width: 77%;
  margin-top: 28px;
  padding: 10px 10px 34px;
  background: var(--gk-white);
  box-shadow: var(--elevation-polaroid);
  transform: rotate(var(--tilt-lg));
  transition: transform var(--dur-slow) var(--ease);
}
.gk-polaroid:hover .gk-polaroid__abzug,
.gk-polaroid:focus-visible .gk-polaroid__abzug { transform: rotate(-6deg); }
.gk-polaroid__band {
  position: absolute; top: -12px; left: 35%; z-index: 1;
  width: 89px; height: 25px;
  background: color-mix(in oklab, var(--gk-white) 62%, transparent);
  transform: rotate(13deg);
}
.gk-polaroid__bild { display: block; height: calc(var(--polaroid-h) * .64); overflow: hidden; background: var(--gk-white); }
.gk-polaroid__bild img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 35%;
  filter: grayscale(1);
}
.gk-polaroid__unterschrift {
  position: absolute; left: 14px; bottom: 11px;
  color: var(--gk-navy);
  font: 400 var(--fs-meta)/1.4 var(--font-body);
}
.gk-polaroid__sticker {
  position: absolute; right: -12px; bottom: 36px;
  display: flex; align-items: center; justify-content: center;
  width: clamp(88px, 9vw, 112px); aspect-ratio: 1;
  border-radius: 50%;
  background: var(--polaroid-sticker);
  color: var(--gk-night);
  text-align: center;
  font: 500 clamp(16px, 1.6vw, 20px)/1.1 var(--font-display);
  transform: rotate(var(--tilt-sticker));
}
.gk-polaroid__etikett {
  position: absolute; left: -5px; bottom: -11px;
  padding: 12px 16px;
  border: 1px solid var(--border-tag, var(--gk-line-3));
  border-radius: var(--radius-sm);
  background: var(--gk-paper);
  color: var(--gk-night);
  font: 400 var(--fs-meta)/1.4 var(--font-body);
  transform: rotate(-5deg);
}
.gk-polaroid:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset); }
@media (prefers-reduced-motion: reduce) { .gk-polaroid__abzug { transition: none; } }

/* cb43 BleedSlider — Kit components/layout/BleedSlider: Kartenreihe. Ab 760 px Breite ein Raster,
   solange die Karten in eine Reihe passen (gk-bleed--2|3|4); sonst ein Wischstreifen, der bis an
   den Bildschirmrand läuft, mit Fortschrittsleiste und ab 760 px mit Pfeilen.
   Maße wie im Kit: Abstand 16 px (Raster +8), mobil 78 % der Breite, höchstens 360 px. */
.gk-bleed {
  --bleed-gap: 16px;
  --bleed-cols: 3;
  container-type: inline-size;
}
.gk-bleed--2 { --bleed-cols: 2; }
.gk-bleed--4 { --bleed-cols: 4; }

.gk-bleed__spur {
  --bleed-pad: max(0px, (100vw - 100cqw) / 2);
  display: flex; align-items: stretch;
  gap: var(--bleed-gap);
  margin: 0 calc(-1 * var(--bleed-pad));
  padding: 8px var(--bleed-pad) 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--bleed-pad);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  outline: none;
}
.gk-bleed__spur::-webkit-scrollbar { display: none; }
.gk-bleed__spur:focus-visible { box-shadow: inset 0 0 0 var(--focus-ring-width) var(--focus-ring); }
.gk-bleed--ohne-rand .gk-bleed__spur { --bleed-pad: 0px; }
.gk-bleed--unten .gk-bleed__spur { align-items: end; }

.gk-bleed__item {
  display: flex; flex-direction: column;
  flex: 0 0 min(360px, 78cqw);
  min-width: 0;
  scroll-snap-align: start;
}

.gk-bleed__steuerung { display: flex; align-items: center; gap: 16px; margin-top: 10px; }
.no-js .gk-bleed__steuerung { display: none; }
.gk-bleed__leiste { position: relative; flex: 1; height: 2px; overflow: hidden; border-radius: 2px; background: var(--border-default); }
.gk-bleed__daumen {
  position: absolute; top: 0; bottom: 0;
  left: calc(var(--bleed-l, 0) * 100%);
  width: calc(var(--bleed-f, 1) * 100%);
  border-radius: 2px;
  background: var(--text-strong);
  transition: left .1s linear;
}
.gk-bleed__pfeile { display: none; gap: 8px; }
.gk-bleed__pfeil {
  display: grid; place-items: center;
  width: var(--tap-min); height: var(--tap-min);
  padding: 0;
  border: 1px solid var(--border-card);
  border-radius: 50%;
  background: var(--control-light);
  color: var(--control-fg-on-light);
  font: 400 18px/1 var(--font-body);
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease);
}
.gk-bleed__pfeil:disabled { opacity: .35; cursor: default; }
.gk-bleed__pfeil:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }

@container (min-width: 760px) {
  .gk-bleed__item { flex-basis: calc((100cqw - var(--bleed-gap) * (var(--bleed-cols) - 1)) / var(--bleed-cols) - 24px); }
  .gk-bleed__pfeile { display: flex; }

  /* Raster, solange alle Karten in eine Reihe passen */
  .gk-bleed--2:not(:has(.gk-bleed__item:nth-child(3))) .gk-bleed__spur,
  .gk-bleed--3:not(:has(.gk-bleed__item:nth-child(4))) .gk-bleed__spur,
  .gk-bleed--4:not(:has(.gk-bleed__item:nth-child(5))) .gk-bleed__spur {
    display: grid;
    grid-template-columns: repeat(var(--bleed-cols), minmax(0, 1fr));
    gap: calc(var(--bleed-gap) + 8px);
    margin: 0; padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }
  .gk-bleed--2:not(:has(.gk-bleed__item:nth-child(3))) .gk-bleed__steuerung,
  .gk-bleed--3:not(:has(.gk-bleed__item:nth-child(4))) .gk-bleed__steuerung,
  .gk-bleed--4:not(:has(.gk-bleed__item:nth-child(5))) .gk-bleed__steuerung { display: none; }
}

/* Bildkachel für schlichte Bildreihen (Imagery: historische Motive, immer Graustufen) */
.gk-bleed__kachel { display: grid; gap: var(--space-2); color: var(--text-strong); text-decoration: none; }
.gk-bleed__kachel img {
  display: block; width: 100%; aspect-ratio: 4 / 3;
  object-fit: cover; filter: grayscale(1);
  border-radius: var(--radius-md);
}
.gk-bleed__zeit { color: var(--text-muted); font-size: var(--meta-size); line-height: var(--meta-lh); }
.gk-bleed__titel { font: var(--h4-weight) var(--h4-size)/var(--h4-lh) var(--font-display); letter-spacing: var(--h4-tracking); transition: color var(--dur-fast) var(--ease); }
.gk-bleed__kachel:hover .gk-bleed__titel { color: var(--text-link); }
.gk-bleed__kachel:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset); border-radius: var(--radius-md); }

@media (prefers-reduced-motion: reduce) { .gk-bleed__daumen { transition: none; } }

/* cb44 CompactLinks — Kit components/layout/CompactLinks: lange Linklisten (Epochen, Lexikon-Buchstaben).
   Ab 760 px Breite eine Spalte je Gruppe; schmaler wird daraus ein Segment-Umschalter mit
   höchstens data-limit Einträgen und „Alle … anzeigen“ (Verhalten in cb44-compactlinks.js).
   Ohne JS stehen die Gruppen schmal untereinander. */
.gk-compact { container-type: inline-size; }
.gk-compact [hidden] { display: none !important; }
.gk-compact__gruppen { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 28px; }
.gk-compact__titel { display: block; margin: 0 0 6px; color: var(--text-muted); font: 500 var(--fs-meta)/var(--meta-lh) var(--font-body); }
.gk-compact__liste { margin: 0; padding: 0; list-style: none; }
.gk-compact__link {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  min-height: 46px; box-sizing: border-box;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-default);
  color: var(--text-body);
  font-size: var(--fs-small); line-height: var(--small-lh);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.gk-compact__link:hover { color: var(--text-link); }
.gk-compact__link:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }
.gk-compact__label { display: flex; align-items: center; gap: 9px; min-width: 0; }
.gk-compact__meta { color: var(--text-muted); font-size: var(--fs-meta); white-space: nowrap; }

.gk-compact__tabs {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px;
  margin-bottom: 8px; padding: 4px;
  border-radius: var(--radius-panel);
  background: var(--surface-muted);
}
.gk-compact__tab {
  min-height: var(--tap-min);
  padding: 6px 4px;
  border: 0; border-radius: 7px;
  background: transparent;
  color: var(--text-strong);
  font: 500 var(--fs-small)/1.2 var(--font-body);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.gk-compact__tab[aria-selected="true"] { background: var(--control-light); color: var(--control-fg-on-light); box-shadow: 0 1px 4px color-mix(in oklab, var(--gk-night) 12%, transparent); }
.gk-compact__tab:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: -2px; }
.gk-compact__mehr {
  width: 100%; min-height: 46px;
  margin-top: 8px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--text-link);
  font: 500 var(--fs-small)/1.2 var(--font-body);
  cursor: pointer;
}
.gk-compact__mehr:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }

@container (max-width: 759px) {
  .gk-compact__gruppen { grid-auto-flow: row; gap: var(--space-5); }
  .gk-compact--tabs .gk-compact__titel { display: none; }
}

/* cb45 SubNav — Kit components/layout/SubNav: klebende Abschnittsnavigation für lange Themenseiten.
   Wischbare Chip-Reihe mit weichen Rändern; der aktive Chip ist gefüllt und rückt in die Mitte
   (Verhalten in cb45-subnav.js). Steht unter der Kopfzeile: top = --gk-header-h.
   Hell (Standard) auf Papier, dunkel mit der Kontextklasse gk-section--brand am Element. */
.gk-subnav {
  position: sticky; top: var(--gk-header-h); z-index: 15;
  background: color-mix(in oklab, var(--surface-page) 94%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-default);
  transition: top var(--dur-header) var(--ease);
}
.gk-subnav__spur {
  display: flex; gap: 6px;
  margin: 0; padding: 10px 0;
  list-style: none;
  overflow-x: auto; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, var(--gk-night) 16px, var(--gk-night) calc(100% - 28px), transparent);
  mask-image: linear-gradient(90deg, transparent 0, var(--gk-night) 16px, var(--gk-night) calc(100% - 28px), transparent);
}
.gk-subnav__spur::-webkit-scrollbar { display: none; }
/* Abstandhalter wie im Kit: 8 px vorn, 20 px hinten */
.gk-subnav__spur::before { content: ''; flex: 0 0 8px; }
.gk-subnav__spur::after { content: ''; flex: 0 0 20px; }
/* Volle Breite (außerhalb des Containers): die Spur hat denselben Innenabstand wie gk-container,
   der erste Chip fluchtet mit Breadcrumb und Headline, der letzte mit der rechten Inhaltskante.
   Prozentwerte im padding beziehen sich wie beim Container auf die Seitenbreite. */
.gk-subnav--voll .gk-subnav__spur {
  --subnav-rand: calc(max(0px, (100% - var(--container-max)) / 2) + var(--container-pad));
  padding-inline: var(--subnav-rand);
  scroll-padding-inline: var(--subnav-rand);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, var(--gk-night) var(--space-4), var(--gk-night) calc(100% - var(--space-5)), transparent);
  mask-image: linear-gradient(90deg, transparent 0, var(--gk-night) var(--space-4), var(--gk-night) calc(100% - var(--space-5)), transparent);
}
.gk-subnav--voll .gk-subnav__spur::before, .gk-subnav--voll .gk-subnav__spur::after { content: none; }
@media (max-width: 759px) {
  .gk-subnav--voll .gk-subnav__spur { --subnav-rand: var(--container-pad-compact); }
}
.gk-subnav__eintrag { display: flex; flex-shrink: 0; }
.gk-subnav__link {
  display: flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 14px;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-body);
  font: 500 var(--fs-small)/1.2 var(--font-body);
  white-space: nowrap;
  text-decoration: none;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.gk-subnav__link[aria-current] { background: var(--text-strong); color: var(--surface-page); }
.gk-subnav__link:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) { .gk-subnav, .gk-subnav__link { transition: none; } }

/* cb46 LearningTrack — Kit components/navigation/LearningTrack: klebende Lernstrecke unter der
   Kopfzeile (top = --gk-header-h). Schritte mit Dauer in Royal, der aktuelle Schritt
   (aria-current="step") trägt den gelben Marker-Punkt. */
.gk-track {
  position: sticky; top: var(--gk-header-h); z-index: 15;
  display: flex; gap: clamp(18px, 3vw, 34px);
  margin: 0; padding: 14px 0;
  list-style: none;
  overflow-x: auto; scrollbar-width: none;
  background: var(--surface-page);
  border-block: 1px solid var(--border-default);
  transition: top var(--dur-header) var(--ease);
}
.gk-track::-webkit-scrollbar { display: none; }
.gk-track__liste { display: contents; }
.gk-track__eintrag { display: flex; flex-shrink: 0; }
.gk-track__schritt {
  position: relative;
  padding: 5px 0 5px 12px;
  color: var(--text-body);
  font: 500 var(--fs-small)/normal var(--font-body);
  white-space: nowrap;
  text-decoration: none;
}
.gk-track__schritt[aria-current="step"]::before {
  content: '';
  position: absolute; left: 0; top: 11px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--marker);
}
.gk-track__meta { display: block; min-height: 13px; margin-top: 5px; color: var(--text-accent); font-size: var(--fs-meta); }
.gk-track__schritt:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-xs); }
@media (prefers-reduced-motion: reduce) { .gk-track { transition: none; } }

/* cb50 Seitenraster — Anordnung der Verkaufsseiten nach den Kit-Musterseiten (ui_kits/website).
   gk-bereich steuert den Abstand einer Fläche zur vorigen (Kit: Folgeabschnitt mit 10 px oben),
   gk-raster teilt den Inhalt: split (1,2 : 1, Abstand 7 %), quer (0,85 : 1,15, Abstand 8 %),
   zwei (zwei Spalten, Spaltenabstand 40 px), kopf (Text und Infokasten, Abstand 10 %). */
.gk-bereich--folge { padding-block-start: var(--space-2); }
.gk-bereich--luft { padding-block: var(--space-9); }
.gk-bereich--knapp { padding-block-end: var(--space-6); }

.gk-raster { display: grid; gap: var(--space-5); align-items: start; }
.gk-raster > * { min-width: 0; }
.gk-raster--split { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: 7%; align-items: center; }
.gk-raster--quer { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); column-gap: 8%; align-items: center; }
.gk-raster--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; row-gap: 0; }
.gk-raster--lesen { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: 8%; }
.gk-raster--oben { align-items: start; }

/* Fließtext neben einer Überschrift (Kit: 1000 px Lesebreite, Hinweisgröße) */
.gk-raster__text { max-width: var(--content-measure); color: var(--text-reading); font-size: var(--body-size); line-height: var(--reading-lh); }
.gk-raster__text > * { margin-block: 0; }
.gk-raster__text > * + * { margin-block-start: var(--space-3); }
.gk-raster__text strong { color: var(--text-strong); font-weight: 600; }
.gk-raster__titel {
  margin: 0;
  color: var(--text-strong);
  font: var(--h2-weight) var(--h2-size)/var(--h2-lh) var(--font-display);
  letter-spacing: var(--h2-tracking);
  text-wrap: balance;
}
.gk-raster__fuss { margin-top: var(--space-4-5); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4-5); }
.gk-raster__folgt { margin-top: var(--space-6); }
.gk-raster__notiz { margin: var(--space-4) 0 0; color: var(--text-muted); font-size: var(--small-size); line-height: var(--small-lh); }

@media (max-width: 759px) {
  .gk-raster--split, .gk-raster--quer, .gk-raster--lesen { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-5); }
  .gk-raster--zwei { grid-template-columns: minmax(0, 1fr); }
  /* zwei Listen untereinander: die obere Linie der zweiten Liste entfällt, sonst steht sie doppelt */
  .gk-raster--zwei > .gk-lessons + .gk-lessons > li:first-child .gk-lesson { border-top: 0; }
  .gk-bereich--luft { padding-block: var(--space-7); }
  .gk-raster__folgt { margin-top: var(--space-5-5); }
}

/* cb51 Hero — Anordnung des Kit-Einstiegs (ui_kits/website Home): Mitternacht, links
   HeroHeadline, Intro, Suche und Direktlinks, rechts PolaroidStage; Raster 1,2 : 1, Abstand 7 %,
   Mindesthöhe 600 px. Direktlinks und Prüfzeile in der Formsprache der Kit-QuickLinks. */
.gk-hero { background: var(--surface-page); color: var(--text-body); padding-block: clamp(36px, 4.3vw, 60px) clamp(40px, 4.8vw, 67px); }
.gk-hero__raster {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  column-gap: 7%; align-items: center;
  min-height: 600px;
}
.gk-hero__text { min-width: 0; }
.gk-hero__intro {
  max-width: 490px; margin: 0 0 var(--space-4);
  color: var(--text-reading);
  font-size: var(--intro-size); line-height: var(--intro-lh); letter-spacing: var(--intro-tracking);
}
.gk-hero__direkt { margin: var(--space-4) 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2-5) var(--space-4); }
.gk-hero__link {
  display: flex; align-items: center; gap: var(--space-2);
  min-height: var(--tap-min); box-sizing: border-box;
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--border-strong);
  color: var(--text-strong); text-decoration: none;
  font-size: var(--small-size); line-height: var(--small-lh);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.gk-hero__link:hover { border-bottom-color: var(--text-strong); }
.gk-hero__pfeil { font-size: var(--small-size); transition: transform var(--dur-fast) var(--ease); }
.gk-hero__link:hover .gk-hero__pfeil { transform: translate(2px, -2px); }
.gk-hero__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4-5); margin-top: var(--space-5); }
.gk-hero__haken {
  margin: var(--space-5) 0 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
  color: var(--text-muted); font-size: var(--meta-size); line-height: var(--meta-lh); letter-spacing: var(--meta-tracking);
}
.gk-hero__haken li { display: flex; align-items: center; gap: var(--space-1-5); }
.gk-hero__haken .gk-icon { color: var(--text-ice); }
.gk-hero__buehne { min-width: 0; }

@media (max-width: 759px) {
  .gk-hero__raster { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-6); min-height: 0; }
}

/* Variante lang: ganze Sätze als Headline, eine Stufe kleiner als die Display-Größe */
.gk-hero--lang .gk-hero-h { font-size: var(--h1-size); line-height: var(--h1-lh); letter-spacing: var(--h1-tracking); hyphens: auto; }

/* cb52 Zielwahl — Kit ui_kits/website Home „Womit willst du heute weiterkommen?“: FilterChips
   wählen ein Ziel, darunter Zielkarte (Mitternacht, Royal, Koralle, Papier; Radius 16, Innenabstand
   37/24) und passende LessonRows im Raster 1,2 : 1, Abstand 24. Ohne JS stehen alle Ziele untereinander. */
.gk-ziel__chips {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin: 0 0 var(--space-4);
}
.gk-ziel__chips .gk-chip { flex-shrink: 0; min-height: var(--tap-min); }
.no-js .gk-ziel__chips { display: none; }
.gk-ziel__panel { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-4); align-items: stretch; }
.gk-ziel__panel[hidden] { display: none; }
.no-js .gk-ziel__panel + .gk-ziel__panel { margin-top: var(--space-6); }
.gk-ziel__karte {
  display: flex; flex-direction: column; gap: var(--space-3);
  min-height: 260px; box-sizing: border-box;
  padding: var(--space-5-5);
  border-radius: var(--radius-lg);
  background: var(--surface-page); color: var(--text-strong);
}
.gk-ziel__karte--koralle { background: var(--diamond); color: var(--control-fg-on-light); }
.gk-ziel__karte--papier { background: var(--surface-card); border: 1px solid var(--border-card); }
.gk-ziel__meta { font-size: var(--meta-size); line-height: var(--meta-lh); letter-spacing: var(--meta-tracking); opacity: .85; }
.gk-ziel__titel {
  margin: 0; color: inherit;
  font: var(--h2-weight) var(--h2-size)/var(--h2-lh) var(--font-display);
  letter-spacing: var(--h2-tracking); text-wrap: balance;
}
.gk-ziel__text { margin: 0; max-width: 460px; font-size: var(--body-size); line-height: var(--reading-lh); opacity: .9; }
.gk-ziel__aktion { margin-top: auto; padding-top: var(--space-2); }
.gk-ziel__karte--koralle .gk-textlink { --text-link: var(--control-fg-on-light); --border-link: var(--border-link-dark); --text-link-hover: var(--control-fg-on-light); }
.gk-ziel__liste { min-width: 0; }

@media (max-width: 759px) {
  .gk-ziel__chips {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(var(--container-pad-compact) * -1); padding-inline: var(--container-pad-compact);
  }
  .gk-ziel__chips::-webkit-scrollbar { display: none; }
  .gk-ziel__panel { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .gk-ziel__karte { min-height: 0; padding: var(--space-4-5) var(--space-4); }
}

/* cb53 Angebot — Bundle- und Paketangebot in der Formsprache des Kits: Buchcover der ProductCard
   (148 × 199, Royal-Rücken, −5°) als gefächerter Stapel auf Eis-Bühne, daneben Titel, Inhalt,
   Preis und Button. Ab 720 px Kartenbreite quer, darunter gestapelt (Container-Query).
   gk-angebot--hervor setzt die Karte auf Mitternacht (mit gk-section--brand).
   Kaufzone (ENTSCHEIDE #7): Kaufkante oben in der CTA-Farbe, Kaufknopf gk-btn--cta. */
.gk-angebote { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.gk-angebote > .gk-angebot--breit { grid-column: 1 / -1; }
.gk-angebot { container-type: inline-size; min-width: 0; }
.gk-angebot__karte {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; height: 100%; box-sizing: border-box;
  border: 1px solid var(--border-card); border-top: var(--cta-edge) solid var(--cta-bg);
  border-radius: var(--radius-lg);
  background: var(--surface-card); color: var(--text-body);
  overflow: hidden;
}
.gk-angebot--hervor .gk-angebot__karte { border-color: var(--cta-bg) transparent transparent; background: var(--surface-page); box-shadow: var(--elevation-2); }

.gk-angebot__buehne {
  position: relative; display: grid; place-items: center;
  min-height: 260px;
  background: var(--surface-muted);
  overflow: hidden;
}
.gk-angebot--hervor .gk-angebot__buehne { background: var(--surface-card); }
.gk-angebot__stapel { position: relative; width: 250px; height: 210px; }
.gk-angebot__buch {
  position: absolute; top: 4px; left: 50%;
  width: 148px; height: 199px; box-sizing: border-box; padding: var(--space-3);
  margin-left: -74px;
  border-left: 6px solid var(--res);
  border-radius: 1px var(--radius-sm) var(--radius-sm) 1px;
  background: var(--control-light); color: var(--control-fg-on-light);
  box-shadow: var(--elevation-book);
  transition: transform var(--dur-slow) var(--ease);
}
.gk-angebot__buch:nth-child(1) { transform: translateX(-62px) rotate(-11deg); }
.gk-angebot__buch:nth-child(2) { transform: translateX(62px) rotate(7deg); }
.gk-angebot__buch:last-child { transform: rotate(-3deg); }
.gk-angebot__buch:only-child { transform: rotate(-5deg); }
.gk-angebot__buch:first-child:nth-last-child(2) { transform: translateX(-42px) rotate(-8deg); }
.gk-angebot__buch:nth-child(2):last-child { transform: translateX(42px) rotate(4deg); }
.gk-angebot:hover .gk-angebot__buch:first-child:nth-last-child(2) { transform: translateX(-50px) rotate(-10deg); }
.gk-angebot:hover .gk-angebot__buch:nth-child(2):last-child { transform: translate(50px, -6px) rotate(2deg); }
.gk-angebot:hover .gk-angebot__buch:nth-child(1) { transform: translateX(-74px) rotate(-13deg); }
.gk-angebot:hover .gk-angebot__buch:nth-child(2) { transform: translateX(74px) rotate(9deg); }
.gk-angebot:hover .gk-angebot__buch:last-child { transform: translateY(-6px) rotate(0); }
.gk-angebot__buchart { display: block; color: var(--text-slate); font-size: var(--meta-size); line-height: var(--meta-lh); }
.gk-angebot__buchtitel { display: block; margin-top: 25px; font: 600 21px/1.1 var(--font-display); letter-spacing: -.025em; hyphens: manual; }
.gk-angebot__band { position: absolute; left: 0; right: 0; bottom: 20px; height: 40px; background: var(--res); }
.gk-angebot__marke { position: absolute; right: var(--space-2); bottom: 9px; color: var(--res-fg); font-size: var(--meta-size); line-height: var(--meta-lh); }

.gk-angebot__inhalt { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5-5) var(--space-5); }
.gk-angebot__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.gk-angebot__titel {
  margin: 0; color: var(--text-strong);
  font: var(--h3-weight) var(--h3-size)/var(--h3-lh) var(--font-display); letter-spacing: var(--h3-tracking);
}
.gk-angebot--breit .gk-angebot__titel { font-size: var(--h2-size); line-height: var(--h2-lh); letter-spacing: var(--h2-tracking); }
.gk-angebot__text { margin: 0; color: var(--text-reading); font-size: var(--body-size); line-height: var(--reading-lh); max-width: 520px; }
.gk-angebot__punkte { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-1-5); font-size: var(--small-size); line-height: var(--small-lh); color: var(--text-body); }
.gk-angebot__punkte li, .gk-angebot__vertrauen li { display: flex; align-items: flex-start; gap: var(--space-2); }
.gk-angebot__punkte .gk-icon { flex-shrink: 0; margin-top: 2px; color: var(--text-link); }
.gk-angebot__fuss { margin-top: auto; padding-top: var(--space-3); display: grid; gap: var(--space-3); }
.gk-angebot__preis { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2-5); margin: 0; }
.gk-angebot__betrag { color: var(--text-strong); font: 500 var(--h2-size)/1 var(--font-display); letter-spacing: var(--h2-tracking); }
.gk-angebot__statt { color: var(--text-muted); font-size: var(--small-size); line-height: var(--small-lh); }
.gk-angebot__vertrauen {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: var(--space-1-5) var(--space-4);
  color: var(--text-muted); font-size: var(--meta-size); line-height: var(--meta-lh); letter-spacing: var(--meta-tracking);
}
.gk-angebot__vertrauen .gk-icon { flex-shrink: 0; color: var(--text-link); }
.gk-angebot__fuss .gk-btn { justify-self: start; }

@container (min-width: 720px) {
  .gk-angebot__karte { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-rows: auto; }
  .gk-angebot__buehne { min-height: 100%; }
  .gk-angebot__stapel { transform: scale(1.12); }
  .gk-angebot__inhalt { padding: var(--space-6) var(--space-6) var(--space-6) var(--space-5-5); }
}
@media (max-width: 899px) { .gk-angebote { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 759px) {
  .gk-angebot__inhalt { padding: var(--space-4-5) var(--space-4); }
  .gk-angebot__fuss .gk-btn { justify-self: stretch; }
}
@media (prefers-reduced-motion: reduce) { .gk-angebot__buch { transition: none; } }

/* cb54 Seitenkopf — Kit ui_kits/website Shop: Brotkrümel, H1 mit Intro links, Eis-Infokasten
   rechts (Radius 12, Innenabstand 25, Zeilenhöhe 1,8); Raster auto-fit ab 340 px, Abstand 24/10 %. */
.gk-kopf { padding-block: 0 var(--space-5-5); }
.gk-kopf__raster {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: var(--space-4) 10%; align-items: center;
}
.gk-kopf__raster > * { min-width: 0; }
.gk-kopf__titel {
  margin: 0 0 var(--space-4);
  color: var(--text-strong);
  font: var(--h1-weight) var(--h1-size)/var(--h1-lh) var(--font-display); letter-spacing: var(--h1-tracking);
  text-wrap: balance;
}
.gk-kopf__intro { margin: 0; max-width: 650px; color: var(--text-muted); font-size: var(--intro-size); line-height: var(--intro-lh); letter-spacing: var(--intro-tracking); }
.gk-kopf__kasten {
  padding: var(--space-4-5);
  border-radius: var(--radius-xl);
  background: var(--surface-art);
  color: var(--text-body); font-size: var(--small-size); line-height: 1.8;
}
.gk-kopf__kasten > * { margin: 0; }
.gk-kopf__kasten strong { color: var(--text-strong); font-weight: 600; }
.gk-kopf__haken { margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.gk-kopf__haken li { display: flex; align-items: center; gap: var(--space-2); }
.gk-kopf__haken .gk-icon { flex-shrink: 0; color: var(--text-link); }
.gk-kopf__schalter { margin-top: var(--space-5); }

/* cb55 Preistafel — Abo-Stufen in der Formsprache des Kits: weiße Karten (Radius 16, Linie
   Eis-Rand), die empfohlene Stufe auf Mitternacht mit Marker-Pill. Umschalter Monat/Jahr als
   FilterChip-Gruppe; ohne JS gilt der Jahrespreis. gk-preise--kurz für die Übersicht ohne Liste.
   Kaufzone (ENTSCHEIDE #7): Kaufkante oben an jeder Stufe, Abschlussknöpfe gk-btn--cta. */
.gk-preise__schalter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0 0 var(--space-5); }
.gk-preise__schalter .gk-chip { min-height: var(--tap-min); }
.gk-preise__ersparnis { color: var(--text-link); font-size: var(--small-size); line-height: var(--small-lh); font-weight: 500; }
.no-js .gk-preise__schalter { display: none; }
.gk-preise__liste { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); align-items: stretch; }
.gk-preise__stufe {
  display: flex; flex-direction: column; gap: var(--space-3);
  box-sizing: border-box; height: 100%;
  padding: var(--space-5-5) var(--space-5);
  border: 1px solid var(--border-card); border-top: var(--cta-edge) solid var(--cta-bg);
  border-radius: var(--radius-lg);
  background: var(--surface-card); color: var(--text-body);
}
.gk-preise__stufe--hervor { border-color: var(--cta-bg) transparent transparent; background: var(--surface-page); box-shadow: var(--elevation-2); }
.gk-preise__kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 30px; }
.gk-preise__name { margin: 0; color: var(--text-strong); font: var(--h3-weight) var(--h3-size)/var(--h3-lh) var(--font-display); letter-spacing: var(--h3-tracking); }
.gk-preise__fuer { margin: 0; color: var(--text-muted); font-size: var(--small-size); line-height: var(--small-lh); }
.gk-preise__preis { margin: var(--space-2) 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); }
.gk-preise__preis[hidden] { display: none; }
.gk-preise__betrag { color: var(--text-strong); font: 500 var(--h1-size)/1 var(--font-display); letter-spacing: var(--h1-tracking); }
.gk-preise__einheit { color: var(--text-muted); font-size: var(--small-size); line-height: var(--small-lh); }
.gk-preise__abrechnung { margin: 0; color: var(--text-muted); font-size: var(--meta-size); line-height: var(--meta-lh); letter-spacing: var(--meta-tracking); }
.gk-preise__abrechnung[hidden] { display: none; }
.gk-preise__stufe .gk-btn { justify-content: space-between; margin-top: var(--space-2); }
.gk-preise__punkte {
  margin: var(--space-3) 0 0; padding: var(--space-4) 0 0; list-style: none;
  border-top: 1px solid var(--border-default);
  display: grid; gap: var(--space-2);
  font-size: var(--small-size); line-height: var(--small-lh);
}
.gk-preise__punkte li { display: flex; align-items: flex-start; gap: var(--space-2); }
.gk-preise__punkte .gk-icon { flex-shrink: 0; margin-top: 2px; color: var(--text-link); }
.gk-preise__stufe--hervor .gk-preise__punkte .gk-icon { color: var(--text-ice); }
.gk-preise__hinweise { margin: var(--space-4) 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-1-5) var(--space-5); color: var(--text-muted); font-size: var(--small-size); line-height: var(--small-lh); }
.gk-preise--kurz .gk-preise__betrag { font-size: var(--h2-size); letter-spacing: var(--h2-tracking); }

@media (max-width: 899px) { .gk-preise__liste { grid-template-columns: minmax(0, 1fr); max-width: 560px; } }
@media (max-width: 759px) { .gk-preise__stufe { padding: var(--space-4-5) var(--space-4); } }

/* cb56 Kaufbox — Produktkopf in der Formsprache der Kit-ProductCard: großes Buchcover auf
   Eis-Bühne (Radius 12), rechts Art, Titel, Eckdaten als Pills, Preis, Button und Prüfzeile.
   Unter 760 px erscheint die Kaufleiste unten, sobald der Kaufknopf aus dem Bild ist (JS).
   ENTSCHEIDE #7: Buchbühne steht oben in ihrer Spalte (nie vertikal zentriert); Preis, Kaufknopf und
   Prüfzeile bilden die Kasse gk-kauf__kasse mit Kaufkante in der CTA-Farbe. */
.gk-kauf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 7%; row-gap: var(--space-5); align-items: start; }
.gk-kauf > * { min-width: 0; }
.gk-kauf__buehne {
  display: grid; place-items: center;
  align-self: start;
  min-height: 460px;
  border-radius: var(--radius-xl);
  background: var(--surface-muted);
}
.gk-kauf__buch {
  position: relative; display: block; box-sizing: border-box;
  width: 222px; height: 298px; padding: var(--space-4);
  border-left: 9px solid var(--res);
  border-radius: 1px var(--radius-md) var(--radius-md) 1px;
  background: var(--control-light); color: var(--control-fg-on-light);
  box-shadow: var(--elevation-book);
  transform: rotate(-5deg);
  transition: transform var(--dur-slow) var(--ease);
}
.gk-kauf__buehne:hover .gk-kauf__buch { transform: rotate(0); }
.gk-kauf__buchart { display: block; color: var(--text-slate); font-size: var(--small-size); line-height: var(--small-lh); }
.gk-kauf__buchtitel { display: block; margin-top: 36px; font: 600 32px/1.08 var(--font-display); letter-spacing: -.03em; }
.gk-kauf__band { position: absolute; left: 0; right: 0; bottom: 30px; height: 58px; background: var(--res); }
.gk-kauf__marke { position: absolute; right: var(--space-3); bottom: 13px; color: var(--res-fg); font-size: var(--small-size); line-height: var(--small-lh); }

.gk-kauf__inhalt { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.gk-kauf__titel { margin: 0; color: var(--text-strong); font: var(--h1-weight) var(--h1-size)/var(--h1-lh) var(--font-display); letter-spacing: var(--h1-tracking); text-wrap: balance; }
.gk-kauf__thema { margin: 0; color: var(--text-muted); font-size: var(--small-size); line-height: var(--small-lh); }
.gk-kauf__thema a { color: var(--text-link); }
.gk-kauf__text { margin: 0; max-width: 560px; color: var(--text-reading); font-size: var(--body-size); line-height: var(--reading-lh); }
.gk-kauf__daten { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.gk-kauf__kasse {
  align-self: stretch; box-sizing: border-box; max-width: 560px;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3);
  margin-top: var(--space-2);
  padding: var(--space-4-5) var(--space-5) var(--space-5);
  border: 1px solid var(--border-card); border-top: var(--cta-edge) solid var(--cta-bg);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
}
.gk-kauf__kasse .gk-kauf__preis, .gk-kauf__kasse .gk-kauf__vertrauen { margin: 0; }
.gk-kauf__preis { margin: var(--space-3) 0 0; display: flex; align-items: baseline; gap: var(--space-2-5); }
.gk-kauf__betrag { color: var(--text-strong); font: 500 var(--h1-size)/1 var(--font-display); letter-spacing: var(--h1-tracking); }
.gk-kauf__mwst { color: var(--text-muted); font-size: var(--small-size); line-height: var(--small-lh); }
.gk-kauf__vertrauen {
  margin: var(--space-2) 0 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: var(--space-1-5) var(--space-4);
  color: var(--text-muted); font-size: var(--meta-size); line-height: var(--meta-lh); letter-spacing: var(--meta-tracking);
}
.gk-kauf__vertrauen li { display: flex; align-items: center; gap: var(--space-1-5); }
.gk-kauf__vertrauen .gk-icon { color: var(--text-link); }

/* Kaufleiste (nur schmal) */
.gk-kaufleiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: none; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-2-5) var(--container-pad-compact) calc(var(--space-2-5) + env(safe-area-inset-bottom));
  border-top: var(--cta-edge) solid var(--cta-bg);
  background: var(--surface-page); color: var(--text-strong);
  box-shadow: var(--elevation-bar);
  transform: translateY(0);
  transition: transform var(--dur-base) var(--ease);
}
.gk-kaufleiste[hidden] { display: none; }
.gk-kaufleiste__text { min-width: 0; display: grid; font-size: var(--meta-size); line-height: var(--meta-lh); }
.gk-kaufleiste__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--small-size); font-weight: 500; }
.gk-kaufleiste__preis { color: var(--text-muted); }
.gk-kaufleiste .gk-btn { flex-shrink: 0; }

@media (max-width: 759px) {
  .gk-kauf { grid-template-columns: minmax(0, 1fr); }
  .gk-kauf__buehne { min-height: 320px; }
  .gk-kauf__buch { width: 168px; height: 226px; padding: var(--space-3); border-left-width: 7px; }
  .gk-kauf__buchtitel { margin-top: 26px; font-size: 24px; }
  .gk-kauf__band { bottom: 22px; height: 44px; }
  .gk-kauf__inhalt .gk-btn { align-self: stretch; }
  .gk-kauf__kasse { padding: var(--space-4) var(--space-4) var(--space-4-5); }
  .gk-kaufleiste:not([hidden]) { display: flex; }
  body:has(.gk-kaufleiste:not([hidden])) { padding-bottom: 76px; }
}
@media (prefers-reduced-motion: reduce) { .gk-kauf__buch { transition: none; } }

/* cb57 Bildband — Kit ui_kits/website Home „Eine Quelle. Viele Perspektiven.“: Mitternacht,
   links Überschrift (H1-Größe), Text (max. 360 px) und Links in Eis, rechts ein gekippter
   Royal-Abzug (+3°, mobil +2°; Rand 14/14/20, Bild 300/220 px, Graustufen) mit Bildunterschrift.
   gk-bildband--seiten zeigt zwei Dokumentseiten hochkant (−3°/+3°) für Produktvorschauen. */
.gk-bildband { overflow: hidden; background: var(--surface-page); color: var(--text-body); }
.gk-bildband__raster { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); column-gap: 8%; row-gap: var(--space-5); align-items: center; padding-block: clamp(31px, 3.7vw, 52px) clamp(28px, 3.3vw, 46px); }
.gk-bildband__raster > * { min-width: 0; }
.gk-bildband__raster > .gk-bildband__abzug, .gk-bildband__raster > .gk-bildband__seiten { align-self: start; }  /* ENTSCHEIDE #7: Bild allein in Spalte oben */
.gk-bildband__titel { margin: 0 0 var(--space-4); color: var(--text-strong); font: var(--h1-weight) var(--h1-size)/var(--h1-lh) var(--font-display); letter-spacing: var(--h1-tracking); text-wrap: balance; }
.gk-bildband__etikett { display: block; margin-bottom: var(--space-3); color: var(--text-ice); font-size: var(--small-size); line-height: var(--small-lh); }
.gk-bildband__text { max-width: 360px; margin: 0 0 var(--space-4); color: var(--text-on-dark-soft); font-size: var(--body-size); line-height: var(--reading-lh); }
.gk-bildband__links { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4-5); }
.gk-bildband__abzug {
  margin: 0; padding: 14px 14px 20px;
  border-radius: var(--radius-xs);
  background: var(--surface-accent);
  transform: rotate(3deg);
}
.gk-bildband__bild { height: 300px; overflow: hidden; }
.gk-bildband__bild img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; filter: grayscale(1); }
.gk-bildband__unterschrift { margin-top: var(--space-2-5); color: var(--text-on-brand); font-size: var(--meta-size); line-height: var(--meta-lh); letter-spacing: var(--meta-tracking); }

.gk-bildband__seiten { display: flex; justify-content: center; gap: var(--space-5); padding-block: var(--space-4); }
.gk-bildband--seiten .gk-bildband__abzug { flex: 0 1 280px; }
.gk-bildband--seiten .gk-bildband__abzug:first-child { transform: rotate(-3deg); }
.gk-bildband--seiten .gk-bildband__bild { height: auto; aspect-ratio: 210 / 297; background: var(--control-light); }
.gk-bildband--seiten .gk-bildband__bild img { object-fit: cover; object-position: top; filter: none; }

@media (max-width: 759px) {
  .gk-bildband__raster { grid-template-columns: minmax(0, 1fr); }
  .gk-bildband__abzug { padding: 10px 10px 16px; transform: rotate(2deg); }
  .gk-bildband__bild { height: 220px; }
  .gk-bildband__seiten { gap: var(--space-3); }
  .gk-bildband--seiten .gk-bildband__abzug:first-child { transform: rotate(-2deg); }
}

/* cb58 Kennzahlen — Kit ui_kits/website Home: Vertrauenszeile unter dem Lernmaterial (Linie oben,
   Zahl in Space Grotesk 500 Royal, Rest klein und gedämpft). gk-zahlen--gross stellt Bestandszahlen
   als Raster mit großer Zahl; gk-zahlen__presse zeigt Pressezeichen in Graustufen. */
.gk-zahlen {
  margin: var(--space-6) 0 0; padding: var(--space-4) 0 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: var(--space-2-5) var(--space-6);
  border-top: 1px solid var(--border-default);
  color: var(--text-muted); font-size: var(--small-size); line-height: var(--small-lh);
}
.gk-zahlen__wert { margin-right: var(--space-2); color: var(--text-link); font: 500 var(--h4-size)/1.2 var(--font-display); letter-spacing: var(--h4-tracking); }
.gk-zahlen--gross { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: var(--space-5) var(--space-4); padding-top: var(--space-5); }
.gk-zahlen--gross li { display: grid; gap: var(--space-1); }
.gk-zahlen--gross .gk-zahlen__wert { margin: 0; font-size: var(--h1-size); line-height: 1; letter-spacing: var(--h1-tracking); }
.gk-zahlen--ohne-linie { border-top: 0; margin-top: 0; padding-top: 0; }
.gk-zahlen__presse { margin: var(--space-4) 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); }
.gk-zahlen__presse img { display: block; height: 30px; width: auto; filter: grayscale(1); mix-blend-mode: multiply; opacity: .75; }

/* cb59 Filterraster — Kit ui_kits/website Shop: klebende FilterChip-Leiste unter der Kopfzeile
   (Linien oben/unten, 16 px, Papier 94 % mit Weichzeichner), darunter ProductCards im Raster
   auto-fill ab 340 px (drei Spalten, 21 Pakete ohne Rest), Abstand 28. Ohne JS sind alle Karten sichtbar und die Leiste fehlt.
   Steht eine klebende SubNav auf der Seite, setzt das JS --gk-filter-versatz auf deren Höhe. */
.gk-filter__leiste {
  position: sticky; top: calc(var(--gk-header-h) + var(--gk-filter-versatz, 0px)); z-index: 10;
  display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none;
  padding: var(--space-3) 0;
  border-block: 1px solid var(--border-default);
  background: color-mix(in oklab, var(--surface-page) 94%, transparent);
  backdrop-filter: blur(10px);
  transition: top var(--dur-slow) var(--ease);
}
.gk-filter__leiste::-webkit-scrollbar { display: none; }
.gk-filter__leiste .gk-chip { flex-shrink: 0; min-height: var(--tap-min); }
.no-js .gk-filter__leiste { display: none; }
.gk-filter__raster { margin: 0; padding: var(--space-5) 0 var(--space-6); list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--space-5) var(--space-4-5); }
.gk-filter__raster > [hidden] { display: none; }
.gk-filter__leer { margin: 0; color: var(--text-muted); font-size: var(--small-size); }
.gk-filter__leer[hidden] { display: none; }
@media (max-width: 759px) {
  .gk-filter__leiste { margin-inline: calc(var(--container-pad-compact) * -1); padding-inline: var(--container-pad-compact); }
}

/* cb60 Themenkopf — einheitlicher Kopf aller Fachseiten (ENTSCHEIDE #7): Themen-Hauptseite, Kapitel,
   Chronologie, Lexikon, Quelle, Biografie, Arbeitsblatt, Lernspiel, Mythologie-Hub.
   gk-themenkopf--nacht    Mitternacht-Fläche, Brotkrümel, Etikett in der Ressourcenfarbe, Titel und Lead
                           links, gekipptes Bild mit Nachweis rechts, oben ausgerichtet; Rahmen und Etikett
                           in der Farbe des Obergebiets (var(--res) über gk-res--<art>);
                           zusammen mit der Kontextklasse gk-section--brand. Meta-Zeile und Aktionen
                           optional (Hauptseite, Kapitel, Hub). Angaben des Seitentyps (Steckbrief,
                           Materialdaten) stehen unter dem Kopf, nie darin.
   Ältere Form, seit 05.11.2026 von keiner Seite genutzt (nur Baustein-Vorlage und Musterseite):
   gk-themenkopf--karte    weiße Karte, Text links, Schwarzweißfoto rechts */
.gk-themenkopf { color: var(--text-body); }
.gk-themenkopf__etikett {
  display: inline-flex; padding: 7px 10px;
  border-radius: var(--radius-xs);
  background: var(--res); color: var(--res-fg);
  font-size: var(--meta-size); line-height: var(--meta-lh);
}
.gk-themenkopf__titel {
  hyphens: manual; overflow-wrap: break-word;  /* Trennung nur schmal (unten), Namen bleiben ganz */
  margin: calc(var(--space-2-5) + var(--space-1)) 0 var(--space-4);            /* 18 / 20 */
  color: var(--text-strong);
  font: var(--h1-weight) var(--h1-size)/var(--h1-lh) var(--font-display);
  letter-spacing: var(--h1-tracking);
  text-wrap: balance;
}
.gk-themenkopf__lead {
  max-width: 540px; margin: 0 0 calc(var(--space-4) + var(--space-1-5));     /* 26 */
  color: var(--text-muted);
  font-size: var(--intro-size); line-height: var(--intro-lh); letter-spacing: var(--intro-tracking);
}
.gk-themenkopf__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-2) calc(var(--space-4) + var(--space-1));
  margin: 0 0 calc(var(--space-4) + var(--space-1-5)); padding: 0; list-style: none;
  color: var(--text-muted); font-size: var(--meta-size); line-height: var(--meta-lh);
}
.gk-themenkopf__aktionen { display: flex; flex-wrap: wrap; gap: 12px; }

/* Bild: immer schwarzweiß wie im Kit */
.gk-themenkopf__bild { margin: 0; overflow: hidden; background: var(--surface-art-2); }
.gk-themenkopf__bild img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.gk-themenkopf__nachweis {
  color: var(--text-muted); font-size: var(--meta-size); line-height: var(--meta-lh);
}

/* --- Karte: Hauptseite und Hub ------------------------------------------- */
.gk-themenkopf--karte {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  overflow: hidden;
}
.gk-themenkopf--karte .gk-themenkopf__text { padding: clamp(24px, 3vw, 40px) clamp(22px, 3vw, 42px); }
.gk-themenkopf--karte .gk-themenkopf__bild { position: relative; min-height: 340px; }
.gk-themenkopf--karte .gk-themenkopf__bild img { position: absolute; inset: 0; }
.gk-themenkopf--karte .gk-themenkopf__nachweis {
  position: absolute; left: var(--space-2-5); bottom: var(--space-2-5);
  padding: 3px 8px; border-radius: var(--radius-xs);
  background: var(--surface-card);
}

/* --- Nacht: Chronologie -------------------------------------------------- */
.gk-themenkopf--nacht {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--space-6) 7%;
  align-items: start;                       /* Bild allein in der Spalte sitzt oben, nie mittig */
  background: var(--surface-page); color: var(--text-body);
}
.gk-themenkopf--nacht .gk-themenkopf__text { padding: 0 0 var(--space-7); }
.gk-themenkopf--nacht .gk-themenkopf__titel { font-weight: 600; }
.gk-themenkopf--nacht .gk-themenkopf__lead { max-width: 500px; margin-bottom: 0; color: var(--text-reading); }
.gk-themenkopf--nacht .gk-themenkopf__meta { margin: calc(var(--space-4) + var(--space-1)) 0 0; }        /* 26 */
.gk-themenkopf--nacht .gk-themenkopf__aktionen { margin-top: calc(var(--space-4) + var(--space-1-5)); }  /* 26 */
.gk-themenkopf__rahmen {
  margin: 0 var(--space-2) var(--space-6) 0;
  padding: 14px 14px var(--space-4);
  border-radius: var(--radius-xs);
  background: var(--res);                   /* Farbe des Obergebiets aus der Navigation (gk-res--<art>) */
  transform: rotate(3deg);
}
.gk-themenkopf__rahmen .gk-themenkopf__bild { height: 280px; }
.gk-themenkopf__rahmen .gk-themenkopf__nachweis { display: block; margin-top: 12px; color: var(--res-fg); }
.gk-themenkopf__rahmen:not(:has(.gk-themenkopf__nachweis)) { padding-bottom: 14px; }  /* ohne Nachweis: Rand rundum gleich */
.gk-themenkopf__bild--hoch img { object-position: 50% 15%; }                      /* Porträt: Gesicht im Ausschnitt */
/* Porträt im Rahmen: schmaler und höher, damit das Gesicht ganz im Ausschnitt bleibt */
.gk-themenkopf__rahmen:has(.gk-themenkopf__bild--hoch) { width: min(100%, 360px); justify-self: end; }
.gk-themenkopf__rahmen .gk-themenkopf__bild--hoch { height: 380px; }

@media (max-width: 759px) {
  .gk-themenkopf__titel { hyphens: auto; }  /* lange Komposita wie „Novemberrevolution“ bei 320 px */
  .gk-themenkopf--karte .gk-themenkopf__bild { order: -1; min-height: 200px; }
  .gk-themenkopf__rahmen { transform: none; margin-right: 0; }
  .gk-themenkopf--nacht .gk-themenkopf__text { padding-bottom: 0; }
  .gk-themenkopf__rahmen .gk-themenkopf__bild { height: 220px; }
  .gk-themenkopf__rahmen:has(.gk-themenkopf__bild--hoch) { width: min(100%, 300px); justify-self: start; }
  .gk-themenkopf__rahmen .gk-themenkopf__bild--hoch { height: 320px; }
}

/* --- Bildbehandlung des Nacht-Kopfs (Chris 05.11.2026: Variante A gewählt, ENTSCHEIDE #9) ---------
   Gerades Schwarzweißbild mit Kartenradius, dahinter nach rechts unten versetzt eine Fläche in der
   Obergebietsfarbe (var(--res)); Nachweis gerade darunter, mit Ebenen-Quadrat in derselben Farbe.
   Kit: TopicCard (Foto bündig, Radius 15 px, Farbblock hinter dem Bild, gerade gestellt) und
   Ebenen-Quadrat der Marke (gk-dot). Überschreibt den gekippten Rahmen oben. */
.gk-themenkopf--nacht .gk-themenkopf__rahmen,
.gk-themenkopf--nacht .gk-themenkopf__rahmen:not(:has(.gk-themenkopf__nachweis)) {
  margin: 0 var(--space-4) 0 0;                                  /* Platz für die versetzte Fläche */
  padding: 0; border-radius: 0; background: none; transform: none;
}
.gk-themenkopf--nacht .gk-themenkopf__rahmen:has(.gk-themenkopf__bild--hoch) { width: min(100%, 340px); }
.gk-themenkopf--nacht .gk-themenkopf__rahmen .gk-themenkopf__bild {
  height: 340px;
  border-radius: var(--radius-card);
  box-shadow: var(--space-4) var(--space-4) 0 var(--res);       /* Versatzfläche in der Obergebietsfarbe */
}
.gk-themenkopf--nacht .gk-themenkopf__rahmen .gk-themenkopf__bild--hoch { height: 420px; }
.gk-themenkopf--nacht .gk-themenkopf__rahmen .gk-themenkopf__nachweis {
  display: flex; align-items: baseline; gap: var(--space-2);
  margin-top: calc(var(--space-4) + var(--space-3));
  color: var(--text-muted);
}
.gk-themenkopf--nacht .gk-themenkopf__nachweis::before {
  content: ""; flex-shrink: 0;
  width: var(--dot-sm); height: var(--dot-sm);
  border-radius: var(--radius-dot); background: var(--res);    /* Ebenen-Quadrat wie gk-dot */
}

@media (max-width: 759px) {
  .gk-themenkopf--nacht .gk-themenkopf__rahmen { margin-right: var(--space-2-5); }
  .gk-themenkopf--nacht .gk-themenkopf__rahmen .gk-themenkopf__bild {
    height: 230px;
    box-shadow: var(--space-2-5) var(--space-2-5) 0 var(--res);
  }
  .gk-themenkopf--nacht .gk-themenkopf__rahmen:has(.gk-themenkopf__bild--hoch) { width: min(100%, 290px); }
  .gk-themenkopf--nacht .gk-themenkopf__rahmen .gk-themenkopf__bild--hoch { height: 340px; }
  .gk-themenkopf--nacht .gk-themenkopf__rahmen .gk-themenkopf__nachweis { margin-top: calc(var(--space-2-5) + var(--space-2-5)); }
}

/* cb61 Zeitleiste — Kit-Vorlage templates/chronologie: senkrechte Zeitleiste mit Jahr links,
   Royal-Punkt auf der Achse und Ereigniskarte rechts. Schlüsselereignisse als Mitternacht-Karte
   (gk-zeitleiste__karte--schluessel, Kontext gk-section--brand). Klebende Phasenleiste aus
   FilterChips; cb61-zeitleiste.js blendet Ereignisse nach Phase aus (ohne JS: alle sichtbar). */
.gk-zeitleiste__leiste {
  position: sticky; top: var(--gk-header-h); z-index: 10;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  margin-bottom: 12px; padding: 12px 0;
  border-bottom: 1px solid var(--border-default);
  background: var(--surface-bar, var(--surface-page));
  backdrop-filter: blur(10px);
  transition: top var(--dur-header) var(--ease);
}
.gk-zeitleiste__phasen { display: flex; gap: var(--space-2); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.gk-zeitleiste__phasen::-webkit-scrollbar { display: none; }
.gk-zeitleiste__phasen .gk-chip { flex-shrink: 0; }
.gk-zeitleiste__zahl { color: var(--text-muted); font-size: var(--meta-size); line-height: var(--meta-lh); }

.gk-zeitleiste__liste { position: relative; margin: 0; padding: 0; list-style: none; }
.gk-zeitleiste__ereignis {
  display: grid; grid-template-columns: clamp(54px, 12vw, 96px) 22px minmax(0, 1fr);
  gap: 0 clamp(8px, 2vw, 18px); align-items: start;
}
.gk-zeitleiste__zeit { padding-top: 26px; text-align: right; }
.gk-zeitleiste__jahr {
  display: block;
  color: var(--text-accent);
  font: 500 clamp(20px, 2.4vw, 28px)/1.1 var(--font-display); letter-spacing: -.03em;
}
.gk-zeitleiste__datum {
  display: block; margin-top: 4px;
  color: var(--text-muted); font-size: var(--meta-size); line-height: var(--meta-lh);
}
.gk-zeitleiste__achse { align-self: stretch; display: flex; flex-direction: column; align-items: center; }
.gk-zeitleiste__achse::before,
.gk-zeitleiste__achse::after { content: ''; width: 1px; background: var(--border-card); }
.gk-zeitleiste__achse::before { height: 34px; }
.gk-zeitleiste__achse::after { flex: 1; }
.gk-zeitleiste__punkt {
  width: 12px; height: 12px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--surface-accent);
  box-shadow: 0 0 0 5px var(--surface-page);
}
.gk-zeitleiste__ereignis:last-child .gk-zeitleiste__achse::after { background: transparent; }
.gk-zeitleiste__inhalt { padding: 16px 0; min-width: 0; }

.gk-zeitleiste__karte {
  padding: var(--space-4) calc(var(--space-4) + 2px);                         /* 20 / 22 */
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--surface-card);
}
.gk-zeitleiste__karte--schluessel {
  padding: calc(var(--space-4) + 2px) var(--space-4-5);                        /* 22 / 24 */
  border-color: transparent;
  background: var(--surface-page); color: var(--text-body);
}
.gk-zeitleiste__art {
  display: block; margin-bottom: var(--space-2);
  color: var(--text-muted); font-size: var(--meta-size); line-height: var(--meta-lh);
}
.gk-zeitleiste__karte--schluessel .gk-zeitleiste__art {
  display: inline-block; padding: 4px 8px; margin-bottom: 10px;
  border-radius: var(--radius-xs);
  background: var(--res); color: var(--res-fg);
}
.gk-zeitleiste__titel {
  margin: 0 0 6px;
  color: var(--text-strong);
  font: var(--h4-weight) var(--h4-size)/var(--h4-lh) var(--font-display); letter-spacing: var(--h4-tracking);
}
.gk-zeitleiste__text { margin: 0; color: var(--text-muted); font-size: var(--small-size); line-height: var(--small-lh); }
.gk-zeitleiste__karte--schluessel .gk-zeitleiste__text { color: var(--text-reading); }
.gk-zeitleiste__link { color: var(--text-link); text-underline-offset: 3px; }
.gk-zeitleiste__link:hover { color: var(--text-link-hover); }

/* Abschluss: Eis-Fläche mit Aktion */
.gk-zeitleiste__abschluss {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4-5);
  margin-top: var(--space-5); padding: var(--space-4-5);
  border-radius: var(--radius-xl);
  background: var(--surface-art);
}
.gk-zeitleiste__abschlusstitel {
  margin: 0 0 6px; color: var(--text-strong);
  font: var(--h4-weight) var(--h4-size)/var(--h4-lh) var(--font-display); letter-spacing: var(--h4-tracking);
}
.gk-zeitleiste__abschlusstext { margin: 0; color: var(--text-slate); font-size: var(--small-size); line-height: var(--small-lh); }

/* cb62 Fachtext — Lesetypografie der Kit-Vorlage templates/themen-kapitel für redaktionellen
   Fließtext aus WordPress: Zwischentitel in der Display-Schrift, Lesezeilen höchstens 760 px,
   Lese-Zeilenabstand, Begriffserklärungen (abbr), Fußnoten, Bildreihe, Autorenzeile.
   Abschnitte (gk-fachtext__abschnitt) sind Sprungziele für SubNav und LearningTrack;
   cb62-fachtext.js markiert in einer Lernstrecke (data-gk-lesestrecke) den Abschnitt im Blick. */
.gk-fachtext {
  max-width: 760px;
  color: var(--text-reading);
  font-size: var(--body-size); line-height: var(--reading-lh);
}
.gk-fachtext__abschnitt { scroll-margin-top: calc(var(--gk-header-h) + 90px); }
.gk-fachtext__abschnitt + .gk-fachtext__abschnitt { margin-top: calc(var(--space-6) - 1px); }        /* 39 */
.gk-fachtext h2,
.gk-fachtext__zwischentitel {
  margin: 0 0 calc(var(--space-3) + 2px);                                                           /* 19 */
  color: var(--text-strong);
  font: var(--h3-weight) var(--h3-size)/var(--h3-lh) var(--font-display); letter-spacing: var(--h3-tracking);
  text-wrap: balance;
}
.gk-fachtext p { margin: 0 0 var(--space-4); }                                                     /* 20 */
.gk-fachtext p:last-child { margin-bottom: 0; }
.gk-fachtext__lead { color: var(--text-strong); font-size: var(--intro-size); line-height: var(--intro-lh); }
.gk-fachtext__link { color: var(--text-link); text-decoration: underline; text-decoration-color: var(--border-link); text-underline-offset: 4px; }
.gk-fachtext__link:hover { color: var(--text-link-hover); text-decoration-color: currentColor; }
.gk-fachtext abbr[title] {
  text-decoration: underline dotted var(--border-card);
  text-decoration-thickness: 1.5px; text-underline-offset: 4px;
  cursor: help;
}
.gk-fachtext abbr[title]:hover { text-decoration-color: var(--text-accent); }
.gk-fachtext sup { line-height: 0; font-size: 11px; }
.gk-fachtext sup .gk-fachtext__link { padding-inline: 2px; color: var(--text-accent); text-decoration: none; }
.gk-fachtext :where(.gk-hinweis, .gk-frage, .gk-fakten, .gk-kette) { margin-block: var(--space-5); }

/* Bildreihe aus dem Beitrag: Schwarzweiß, gleiche Höhe, Bildunterschrift klein */
.gk-fachtext__galerie {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: var(--space-3); margin: var(--space-5) 0; padding: 0; list-style: none;
}
.gk-fachtext__bild { margin: 0; }
.gk-fachtext__bild img {
  display: block; width: 100%; height: 190px; object-fit: cover;
  border-radius: var(--radius-md); background: var(--surface-art-2);
  filter: grayscale(1);
}
.gk-fachtext__bild figcaption {
  margin-top: var(--space-2);
  color: var(--text-muted); font-size: var(--meta-size); line-height: var(--meta-lh);
}

/* Fußnoten wie im Kit: kleine Liste unter Linie */
.gk-fachtext__fussnoten {
  margin: var(--space-5) 0 0; padding: var(--space-4) 0 0 18px;
  border-top: 1px solid var(--border-default);
  color: var(--text-muted); font-size: 11px; line-height: 1.8;
}
.gk-fachtext__fussnoten .gk-fachtext__link { color: inherit; word-break: break-all; text-decoration-color: var(--border-default); }

/* Autorenzeile mit Monogramm in der Kit-Tropfenform */
.gk-fachtext__autor {
  display: flex; align-items: center; gap: var(--space-3);
  margin-top: var(--space-5); padding: calc(var(--space-4) + 2px) var(--space-4-5);
  border: 1px solid var(--border-default); border-radius: var(--radius-xl);
  background: var(--surface-card);
}
.gk-fachtext__monogramm {
  display: grid; place-items: center; flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: var(--radius-mark);
  background: var(--surface-accent); color: var(--text-on-brand);
  font: 600 var(--body-size)/1 var(--font-display); letter-spacing: -.06em;
}
.gk-fachtext__autortext { margin: 0; color: var(--text-muted); font-size: var(--small-size); line-height: var(--small-lh); }
.gk-fachtext__autortext b { color: var(--text-strong); font-weight: 600; }

/* Kopfzeile eines Abschnitts: Titel links, kurze Angabe rechts (Kit „Überblick“) */
.gk-fachtext__kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.gk-fachtext__angabe { color: var(--text-muted); font-size: var(--meta-size); line-height: var(--meta-lh); white-space: nowrap; }
.gk-fachtext__unterzeile { margin: calc(var(--space-2) * -1) 0 var(--space-4); color: var(--text-muted); font-size: var(--small-size); line-height: var(--small-lh); }

@media (max-width: 759px) {
  .gk-fachtext__galerie {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 74%;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    padding-bottom: var(--space-2); scrollbar-width: thin;
  }
  .gk-fachtext__galerie > li { scroll-snap-align: start; }
  .gk-fachtext__bild img { height: 170px; }
}

/* cb63 Ressourcen — Kit-Vorlage templates/themen-hauptseite, Abschnitt „Mehr zum Thema“:
   Kacheln je Ressourcenart mit Ebenen-Quadrat, Anzahl in der tiefen Ressourcenfarbe und
   Linktitel in der Display-Schrift. gk-ressourcen__kachel--leer: gestrichelt, ohne Link. */
.gk-ressourcen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 14px; margin: 0; padding: 0; list-style: none;
}
.gk-ressourcen__eintrag { display: flex; }
.gk-ressourcen__kachel {
  display: flex; flex-direction: column; gap: 6px; flex: 1;
  padding: var(--space-4);
  border: 1px solid var(--border-default); border-radius: var(--radius-xl);
  background: var(--surface-card); color: var(--text-strong);
  text-decoration: none;
  transition: border-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
a.gk-ressourcen__kachel:hover { border-color: var(--res); transform: translateY(-2px); }
.gk-ressourcen__kachel--leer { border-style: dashed; border-color: var(--border-card); background: transparent; }
.gk-ressourcen__art {
  display: flex; align-items: center; gap: var(--space-2);
  color: var(--res-deep); font-size: var(--meta-size); line-height: var(--meta-lh); font-weight: 600;
}
.gk-ressourcen__art .gk-dot { width: 12px; height: 12px; }
.gk-ressourcen__titel { font: 500 19px/1.25 var(--font-display); letter-spacing: -.02em; text-wrap: pretty; }
.gk-ressourcen__kachel--leer .gk-ressourcen__titel { color: var(--text-muted); }
@media (prefers-reduced-motion: reduce) { a.gk-ressourcen__kachel:hover { transform: none; } }

/* cb64 Paket — Themenpaket-Angebot unter dem Fachtext (Conversion-Block aus dem Bestand) in der
   Kit-Formsprache: Mitternacht-Fläche (gk-section--brand), Etikett in der Ressourcenfarbe
   Lernmaterial, Preis in der Display-Schrift, Hefte im Buchcover-Stil der ProductCard
   (weiß, Royal-Rücken, Royal-Band mit Wortmarke), gefächert und beim Zeigen aufgerichtet.
   ENTSCHEIDE #7: Kaufkante in der CTA-Farbe über dem Block, zwei Spalten statt drei, Hefte oben in ihrer Spalte, der Kaufknopf
   der Textspalte ist die Hauptconversion (gk-btn--cta; ältere Seiten mit primary übernehmen die Farbe). */
.gk-paket {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  gap: var(--space-7) 6%; align-items: start;
  padding-top: var(--space-6);
  border-top: var(--cta-edge) solid var(--cta-bg);
}
.gk-paket__text-spalte > .gk-btn {
  --btn-bg: var(--cta-bg); --btn-bg-h: var(--cta-bg-hover);
  --btn-fg: var(--cta-fg); --btn-fg-h: var(--cta-fg);
  --focus-ring: var(--cta-ring);
}
.gk-paket__etikett {
  display: inline-flex; padding: 7px 10px;
  border-radius: var(--radius-xs);
  background: var(--res); color: var(--res-fg);
  font-size: var(--meta-size); line-height: var(--meta-lh);
}
.gk-paket__titel {
  margin: calc(var(--space-2-5) + var(--space-1)) 0 var(--space-3);
  color: var(--text-strong);
  font: var(--h2-weight) var(--h2-size)/var(--h2-lh) var(--font-display); letter-spacing: var(--h2-tracking);
  text-wrap: balance;
}
.gk-paket__text { max-width: 520px; margin: 0; color: var(--text-reading); font-size: var(--intro-size); line-height: var(--intro-lh); }
.gk-paket__preis { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); margin: var(--space-5) 0 var(--space-4); }
.gk-paket__betrag { color: var(--text-strong); font: 500 clamp(40px, 4vw, 56px)/1 var(--font-display); letter-spacing: -.04em; }
.gk-paket__hinweis { color: var(--text-muted); font-size: var(--small-size); line-height: var(--small-lh); }
.gk-paket__vertrauen {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
  margin: var(--space-4) 0 0; padding: 0; list-style: none;
  color: var(--text-reading); font-size: var(--small-size); line-height: var(--small-lh);
}
.gk-paket__punkt { display: inline-flex; align-items: center; gap: var(--space-2); }
.gk-paket__haken { width: 16px; height: 16px; color: var(--res); flex-shrink: 0; }
.gk-paket__zeile {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4);
  grid-column: 1 / -1;
  padding-top: var(--space-4); border-top: 1px solid var(--border-default);
  color: var(--text-reading); font-size: var(--small-size); line-height: var(--small-lh);
}
.gk-paket__zeile p { margin: 0; max-width: 640px; }

/* Bühne mit gefächerten Heften */
.gk-paket__buehne {
  display: flex; justify-content: center; align-items: center;
  min-height: 300px; margin: 0; padding: var(--space-5) var(--space-3);
  list-style: none;
}
.gk-paket__heft {
  position: relative; flex-shrink: 0;
  width: 140px; height: 190px; padding: var(--space-3);
  margin-left: -14px;
  border-left: 6px solid var(--res);
  border-radius: 1px var(--radius-sm) var(--radius-sm) 1px;
  background: var(--control-light); color: var(--control-fg-on-light);
  box-shadow: var(--elevation-book);
  transition: transform var(--dur-mid) var(--ease);
}
.gk-paket__heft:first-child { margin-left: 0; }
.gk-paket__heft:nth-child(1) { transform: rotate(-9deg) translateY(10px); }
.gk-paket__heft:nth-child(2) { transform: rotate(-3deg); }
.gk-paket__heft:nth-child(3) { transform: rotate(3deg); }
.gk-paket__heft:nth-child(4) { transform: rotate(9deg) translateY(10px); }
.gk-paket__buehne:hover .gk-paket__heft { transform: rotate(0) translateY(-6px); }
.gk-paket__heftart { display: block; color: var(--text-slate); font-size: var(--meta-size); line-height: var(--meta-lh); }
.gk-paket__hefttitel { display: block; margin-top: 25px; font: 600 19px/1.1 var(--font-display); hyphens: auto; letter-spacing: -.025em; }
.gk-paket__band { position: absolute; left: 0; right: 0; bottom: 20px; height: 40px; background: var(--res); }
.gk-paket__marke { position: absolute; left: var(--space-2-5); white-space: nowrap; bottom: 9px; color: var(--res-fg); font-size: var(--meta-size); line-height: var(--meta-lh); }

@media (max-width: 1199px) {
  .gk-paket__buehne { flex-wrap: wrap; gap: var(--space-4) var(--space-3); min-height: 0; padding: var(--space-3) 0; }
  .gk-paket__heft { width: 128px; height: 168px; margin-left: 0; padding: var(--space-2-5); }
  .gk-paket__heft:nth-child(odd) { transform: rotate(-3deg); }
  .gk-paket__heft:nth-child(even) { transform: rotate(3deg); }
  .gk-paket__hefttitel { margin-top: 14px; font-size: 16px; }
  .gk-paket__band { bottom: 14px; height: 30px; }
  .gk-paket__marke { bottom: 6px; }
}
@media (prefers-reduced-motion: reduce) { .gk-paket__buehne:hover .gk-paket__heft { transform: none; } }

/* cb65 Weiter — Kapitel-Navigation der Kit-Vorlage templates/themen-kapitel: zwei Kacheln,
   zurück weiß mit Linie, weiter auf Royal (Kontextklasse gk-section--royal am Link).
   Dient auch als chronologischer Schritt zwischen den 21 Themenkomplexen. */
.gk-weiter {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 14px;
}
.gk-weiter__schritt {
  display: flex; flex-direction: column; gap: 6px;
  padding: calc(var(--space-4) + 2px);                                       /* 22 */
  border: 1px solid var(--border-default); border-radius: var(--radius-xl);
  background: var(--surface-card); color: var(--text-strong);
  text-decoration: none;
  transition: transform var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.gk-weiter__schritt:hover { transform: translateY(-2px); border-color: var(--border-interactive); }
.gk-weiter__schritt--vor { border-color: transparent; background: var(--surface-page); }
.gk-weiter__schritt--vor { text-align: right; }
.gk-weiter__richtung { color: var(--text-muted); font-size: var(--meta-size); line-height: var(--meta-lh); }
.gk-weiter__titel { font: 500 19px/1.25 var(--font-display); letter-spacing: -.02em; }
.gk-weiter__zeit { color: var(--text-muted); font-size: var(--meta-size); line-height: var(--meta-lh); }
.gk-weiter__schritt:only-child { grid-column: 1 / -1; }
@media (min-width: 760px) {
  .gk-weiter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gk-weiter__schritt--vor:only-child { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) { .gk-weiter__schritt:hover { transform: none; } }

/* cb66 Randspalte — rechte Spalte der Kit-Vorlage templates/themen-kapitel: Kasten „Kapitel des
   Themas“ (aktuelles Kapitel in Royal) über dem mitlaufenden ShopPanel. Die Spalte streckt sich
   über die Höhe des Rasters, damit das ShopPanel darin kleben kann. */
.gk-randspalte { align-self: stretch; display: flex; flex-direction: column; gap: var(--space-4-5); }
.gk-randspalte__kapitel {
  padding: calc(var(--space-4) + 2px);                                       /* 22 */
  border: 1px solid var(--border-default); border-radius: var(--radius-xl);
  background: var(--surface-card);
}
.gk-randspalte__titel { display: block; margin: 0 0 12px; color: var(--text-strong); font-size: var(--small-size); line-height: var(--small-lh); font-weight: 600; }
.gk-randspalte__liste { margin: 0; padding: 0; list-style: none; counter-reset: kapitel; }
.gk-randspalte__eintrag { counter-increment: kapitel; }
.gk-randspalte__eintrag + .gk-randspalte__eintrag { border-top: 1px solid var(--border-default); }
.gk-randspalte__link {
  display: flex; gap: 10px; padding: 9px 0;
  color: var(--text-body); font-size: var(--small-size); line-height: var(--small-lh);
  text-decoration: none;
}
.gk-randspalte__link::before { content: counter(kapitel); width: 16px; flex-shrink: 0; color: var(--text-muted); }
.gk-randspalte__link:hover { color: var(--text-link); }
.gk-randspalte__link[aria-current="page"] { color: var(--text-accent); font-weight: 500; }
.gk-randspalte__link[aria-current="page"]::before { color: inherit; }
@media (max-width: 899px) { .gk-randspalte__kapitel { display: none; } }

/* cb67 Register — A-bis-Z-Verzeichnis eines Hubs (Mythologie) in der Kit-Formsprache: Buchstaben
   als FilterChips in einer Leiste, darunter Gruppen je Anfangsbuchstabe mit Royal-Buchstaben in der
   Display-Schrift und Linkzeilen mit Pfeil ↗ wie LessonRow. cb67-register.js filtert nach Buchstabe;
   ohne JS sind alle Gruppen sichtbar und die Leiste bleibt verborgen. */
.gk-register__leiste { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
.gk-register__leiste .gk-chip { min-width: 46px; justify-content: center; }
.gk-register__gruppen {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: var(--space-5) var(--space-6); align-items: start;
}
.gk-register__gruppe { border-top: 1px solid var(--border-timeline, var(--border-card)); padding-top: var(--space-2-5); }
.gk-register__buchstabe {
  display: block; margin: 0 0 var(--space-2);
  color: var(--text-accent);
  font: 500 28px/1.1 var(--font-display); letter-spacing: -.03em;
}
.gk-register__liste { margin: 0; padding: 0; list-style: none; }
.gk-register__link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 0;
  color: var(--text-strong); font-size: var(--small-size); line-height: var(--small-lh); font-weight: 500;
  text-decoration: none;
}
.gk-register__link::after { content: '↗'; color: var(--text-accent); transition: transform var(--dur-base) var(--ease); }
.gk-register__link:hover { color: var(--text-link); }
.gk-register__link:hover::after { transform: translate(2px, -2px); }
.gk-register__eintrag + .gk-register__eintrag { border-top: 1px solid var(--border-default); }

/* cb68 Themenseite — Seitenrahmen der Kit-Vorlagen templates/themen-hauptseite, themen-kapitel und
   chronologie: Kopfzone mit Brotkrumen, Inhaltsspalte neben dem mitlaufenden ShopPanel, Abschnitte
   der Inhaltsspalte mit Trennlinie (44 px Luft wie in der Vorlage) und die gestapelte Anschlusszone
   (verwandte Themen, Weiterblättern, Lehrkräfte). Nur Anordnung und Luft, keine eigene Fläche. */
.gk-themenseite__kopf { padding-block: var(--space-5) var(--space-4); }
.gk-themenseite__kopf .gk-breadcrumb { margin-bottom: var(--space-4); }
.gk-themenseite__kopf--nacht { padding-block: var(--space-6) var(--space-8); }
.gk-themenseite__inhalt { padding-block: calc(var(--space-6) - 1px) var(--space-8); }              /* 44 / 70 */
.gk-themenseite__spalte { min-width: 0; }
.gk-themenseite__spalte > .gk-track,
.gk-themenseite__spalte > .gk-subnav { margin-bottom: var(--space-4); }
.gk-themenseite__abschnitt {
  padding-block: calc(var(--space-6) - 1px);                                                     /* 44 */
  border-bottom: 1px solid var(--border-default);
  scroll-margin-top: calc(var(--gk-header-h) + 70px);
}
.gk-themenseite__abschnitt:first-of-type { padding-top: var(--space-5); }
.gk-themenseite__abschnitt:last-child,
.gk-themenseite__abschnitt--ende { border-bottom: 0; padding-bottom: 0; }
.gk-themenseite__abschnitt > .gk-sectionhead { margin-bottom: var(--space-4-5); }
.gk-themenseite__nachtext { margin-top: var(--space-5); }
.gk-themenseite__aktion { margin: var(--space-4) 0 0; }
.gk-themenseite__weiter { display: flex; flex-direction: column; gap: var(--space-6); }
.gk-themenseite__weiter > .gk-sectionhead { margin-bottom: calc(var(--space-6) * -1 + var(--space-4-5)); }
@media (max-width: 759px) {
  .gk-themenseite__kopf { padding-block: var(--space-4) var(--space-3); }
  .gk-themenseite__kopf--nacht { padding-block: var(--space-5) var(--space-6); }
  .gk-themenseite__inhalt { padding-block: var(--space-4) var(--space-6); }
  .gk-themenseite__abschnitt { padding-block: var(--space-5); }
  .gk-themenseite__weiter { gap: var(--space-5); }
  .gk-themenseite__weiter > .gk-sectionhead { margin-bottom: calc(var(--space-5) * -1 + var(--space-4)); }
}

/* cb70 Nachschlagen — Seitengerüst der Kit-Vorlagen templates/lexikon, quelle, biografie:
   Brotkrümel direkt unter der Kopfzeile, Kopf mit Etikett, H1 und Einleitung, Hauptspalte
   links und ShopPanel rechts (Raster gk-shoplayout), Rhythmus der Zwischentitel.
   Die Biografie trägt den einheitlichen Kopf cb60 (ENTSCHEIDE #7). */
.gk-nachschlagen { padding-top: 0; padding-bottom: var(--space-8); }                 /* Kit: 0 / 70 */
.gk-nachschlagen--anschluss { padding-top: calc(var(--space-6) - 1px); }            /* Kit: 44 nach dem Personen-Kopf */
.gk-nachschlagen__raster.gk-shoplayout { column-gap: 6%; row-gap: calc(var(--space-6) - var(--space-1)); } /* Kit: 6 % / 40 */
.gk-nachschlagen__haupt { min-width: 0; }
.gk-nachschlagen__haupt--schmal { max-width: 820px; }                               /* Kit Lexikon */
/* Lexikon: Panel rückt wie im Kit an die schmale Hauptspalte heran */
@media (min-width: 900px) {
  .gk-nachschlagen__raster:has(> .gk-nachschlagen__haupt--schmal) { grid-template-columns: minmax(0, 820px) 320px; }
}
/* Folgesektion auf Papier direkt nach dem Gerüst: kein doppelter Abstand */
.gk-nachschlagen__folge { padding-top: 0; }

/* Kopf: Etikett, Titel, Einleitung */
.gk-nachschlagen__kopf { max-width: 900px; padding-bottom: calc(var(--space-5) + var(--space-1)); } /* Kit Quelle: 34 */
.gk-nachschlagen__titel {
  margin: calc(var(--space-2-5) + var(--space-1)) 0 var(--space-4);                  /* 18 / 22 */
  color: var(--text-strong);
  font: var(--h1-weight) var(--h1-size)/var(--h1-lh) var(--font-display);
  letter-spacing: var(--h1-tracking);
  text-wrap: balance;
}
.gk-nachschlagen__einleitung {
  max-width: 720px; margin: 0;
  color: var(--text-muted);
  font-size: var(--intro-size); line-height: var(--intro-lh); letter-spacing: var(--intro-tracking);
}

/* Zwischentitel der Hauptspalte: h2 in voller Größe, kleinere Überschrift für Linklisten */
.gk-nachschlagen__abschnitt { margin-top: var(--space-6); }                         /* Kit: 44 */
.gk-nachschlagen__abschnitt:first-child { margin-top: 0; }
.gk-nachschlagen__h2 {
  margin: 0 0 var(--space-4);                                                          /* Kit: 22 */
  color: var(--text-strong);
  font: var(--h2-weight) var(--h2-size)/var(--h2-lh) var(--font-display);
  letter-spacing: var(--h2-tracking);
  text-wrap: balance;
}
.gk-nachschlagen__h4 {
  margin: 0 0 var(--space-3);                                                          /* Kit: 16 */
  color: var(--text-strong);
  font: var(--h4-weight) var(--h4-size)/var(--h4-lh) var(--font-display);
  letter-spacing: var(--h4-tracking);
}

/* Kurzfakten unter dem einheitlichen Fachseiten-Kopf (Biografie: vorher im Personen-Kopf) */
.gk-nachschlagen__fakten {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin: 0 0 var(--space-4); padding: 0; list-style: none;                         /* 22 bis zum Steckbrief */
}

/* Abstand vor einem Block, der nicht direkt auf einen Abschnitt folgt (Kit Quelle: Analyse 44) */
.gk-nachschlagen__abschnitt--luft { margin-top: var(--space-6); }
/* Linkgruppe in Hinweis oder Banner */
.gk-nachschlagen__links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4-5); }

/* cb71 Lesetext — Fließtext der Nachschlage-Vorlagen (Kit templates/lexikon: Zwischentitel in
   H3-Größe, Lesezeilenabstand, Absatzabstand 20). Trägt redaktionelle Inhalte aus dem CMS:
   Absätze, Zwischentitel, Links, Begriffserklärungen (abbr), Bildpaare und Fußnoten. */
.gk-lesetext { max-width: var(--measure-reading, 760px); color: var(--text-reading); font-size: var(--body-size); line-height: var(--reading-lh); }
.gk-lesetext > :first-child { margin-top: 0; }
.gk-lesetext p { margin: 0 0 calc(var(--space-4) - 2px); }                            /* Kit: 20 */
.gk-lesetext h2, .gk-lesetext h3 {
  margin: calc(var(--space-5-5) + 2px) 0 calc(var(--space-3) + 2px);                 /* Kit: 39 / 19 */
  color: var(--text-strong);
  font-family: var(--font-display); font-weight: var(--h3-weight);
  font-size: var(--h3-size); line-height: var(--h3-lh); letter-spacing: var(--h3-tracking);
  text-wrap: balance;
}
.gk-lesetext h3 { font-size: var(--h4-size); line-height: var(--h4-lh); letter-spacing: var(--h4-tracking); }
.gk-lesetext a {
  color: var(--text-link);
  text-decoration: underline; text-decoration-color: var(--border-link);
  text-underline-offset: 3px; text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease), text-decoration-color var(--dur-fast) var(--ease);
}
.gk-lesetext a:hover { color: var(--text-link-hover); text-decoration-color: currentColor; }
.gk-lesetext abbr[title] {
  text-decoration: underline dotted; text-decoration-color: var(--border-card);
  text-underline-offset: 3px; cursor: help;
}
.gk-lesetext sup { line-height: 0; font-size: .7em; }
.gk-lesetext sup a, .gk-lesetext__fn { text-decoration: none; padding-inline: 1px; }

/* Bildpaar im Text: Fotos in Rahmen, Bildunterschrift als Meta */
.gk-lesetext__bilder {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--space-4);
  margin: var(--space-5) 0 var(--space-6);
}
.gk-lesetext__bild { margin: 0; }
.gk-lesetext__bild img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-xl);
  background: var(--surface-muted);
}
.gk-lesetext__unterschrift {
  margin-top: var(--space-2);
  color: var(--text-muted);
  font-size: var(--caption-size); line-height: var(--caption-lh); letter-spacing: var(--caption-tracking);
}

/* Fußnoten */
.gk-lesetext__fussnoten {
  margin: var(--space-6) 0 0; padding: var(--space-3) 0 0 var(--space-4);
  border-top: 1px solid var(--border-default);
  color: var(--text-muted);
  font-size: var(--meta-size); line-height: var(--caption-lh);
}
.gk-lesetext__fussnoten li { padding-left: var(--space-1); overflow-wrap: anywhere; }
.gk-lesetext__fussnoten li + li { margin-top: var(--space-1); }
.gk-lesetext__fussnoten a { color: inherit; }

/* cb72 Steckbrief — Kit templates/lexikon, quelle, biografie: Raster kurzer Angaben mit
   Haarlinien (1 px Lücke über der Linienfarbe), Etikett klein und gedämpft, Wert darunter.
   Anders als FactGrid (Titel fett + Satz) trägt jede Zelle nur ein Etikett und einen Wert. */
.gk-steckbrief {
  --steckbrief-min: 170px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--steckbrief-min)), 1fr));
  gap: 1px; margin: 0 0 calc(var(--space-5-5) - 1px);                                 /* Kit: 36 */
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--border-default);
  overflow: hidden;
}
.gk-steckbrief--eng { --steckbrief-min: 150px; margin-bottom: calc(var(--space-4-5) + 1px); } /* Kit Quelle: 150 / 28 */
.gk-steckbrief__eintrag {
  padding: calc(var(--space-2-5) + var(--space-1)) calc(var(--space-4) - 2px);         /* Kit: 18 / 20 */
  background: var(--surface-card);
}
.gk-steckbrief--eng .gk-steckbrief__eintrag { padding: calc(var(--space-3) - 1px) calc(var(--space-2-5) + var(--space-1)); } /* 16 / 18 */
.gk-steckbrief__name {
  margin-bottom: calc(var(--space-1) + 1px);                                           /* Kit: 6 */
  color: var(--text-muted);
  font-size: var(--meta-size); line-height: var(--meta-lh);
}
.gk-steckbrief__wert { margin: 0; color: var(--text-body); font-size: var(--small-size); line-height: var(--small-lh); font-weight: 500; }
.gk-steckbrief__wert--akzent { color: var(--res-deep); }                 /* Farbe des Obergebiets, lesbar auf Papier */

/* cb73 Merkbox — Kit templates/lexikon: „Kurz erklärt“ als Mitternacht-Kasten mit Definition in
   der Display-Schrift (gk-merkbox--definition + gk-section--brand) und „Typischer Fehler“ als
   Eis-Fläche mit Koralle-Etikett links neben dem Text (gk-merkbox--fehler). */
.gk-merkbox { border-radius: var(--radius-xl); }
.gk-merkbox__etikett {
  display: inline-block; align-self: start; justify-self: start;
  padding: var(--space-1) 8px;                                                        /* Kit: 4 / 8 */
  border-radius: var(--radius-xs);
  font-size: var(--meta-size); line-height: var(--meta-lh); white-space: nowrap;
}
.gk-merkbox__text { margin: 0; }

.gk-merkbox--definition {
  margin-bottom: calc(var(--space-4-5) + 1px);                                        /* Kit: 28 */
  padding: clamp(22px, 3vw, 28px) clamp(20px, 3vw, 30px);
  border-radius: var(--radius-lg);
  background: var(--surface-page); color: var(--text-strong);
}
.gk-merkbox--definition .gk-merkbox__etikett { margin-bottom: calc(var(--space-2-5) + 1px); background: var(--res); color: var(--res-fg); } /* 14 */
.gk-merkbox--definition .gk-merkbox__text {
  font: 500 clamp(18px, 2vw, 22px)/1.35 var(--font-display); letter-spacing: -.015em;
  text-wrap: pretty;
}

.gk-merkbox--fehler {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start;
  gap: var(--space-3);                                                                /* Kit: 16 */
  margin-block: var(--space-5);                                                       /* Kit: 30 */
  padding: calc(var(--space-4) + 2px) var(--space-4-5);                               /* Kit: 24 / 27 */
  background: var(--surface-art); color: var(--text-body);
}
.gk-merkbox--fehler .gk-merkbox__etikett { background: var(--diamond); color: var(--control-fg-on-light); }
.gk-merkbox--fehler .gk-merkbox__text { font-size: var(--small-size); line-height: var(--small-lh); }
@media (max-width: 559px) { .gk-merkbox--fehler { grid-template-columns: minmax(0, 1fr); gap: var(--space-2-5); } }
.gk-merkbox__betont { font-weight: 700; }

/* cb74 Begriffe — Kit templates/lexikon „Verwandte Begriffe“, templates/biografie „Personen im
   Umfeld“: weiße Link-Etiketten mit Haarlinie und ↗, umbrechend. */
.gk-begriffe { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 calc(var(--space-5-5) - 1px); padding: 0; list-style: none; } /* 10 / 36 */
.gk-begriffe__link {
  display: inline-flex; align-items: center; gap: var(--space-1-5);
  min-height: var(--tap-min); box-sizing: border-box;
  padding: var(--chip-pad-y) var(--chip-pad-x);                                       /* Kit: 11 / 16 */
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-card); color: var(--text-body);
  font-size: var(--small-size); line-height: 1.2;
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.gk-begriffe__link:hover { border-color: var(--border-interactive); color: var(--text-link); }
.gk-begriffe__pfeil { color: var(--text-link); }

/* cb75 Alphabet — Kit templates/lexikon: A–Z-Leiste zwischen zwei Haarlinien, aktueller Buchstabe
   in der Ressourcenfarbe. Schmal läuft sie als Wischstreifen. */
.gk-alphabet {
  margin-bottom: var(--space-6);                                                      /* Kit: 44 */
  border-block: 1px solid var(--border-default);
}
.gk-alphabet__liste {
  display: flex; gap: 4px;
  margin: 0; padding: calc(var(--space-2-5) + 1px) 0;                                 /* Kit: 14 */
  list-style: none;
  overflow-x: auto; scrollbar-width: none;
}
.gk-alphabet__liste::-webkit-scrollbar { display: none; }
.gk-alphabet__eintrag { flex: 0 0 36px; }
.gk-alphabet__link {
  display: grid; place-items: center;
  height: 40px; border-radius: calc(var(--radius-sm) + 1px);                          /* Kit: 6 */
  color: var(--text-body);
  font: 500 13px/1 var(--font-display);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease);
}
.gk-alphabet__link:hover { background: var(--surface-hover); }
.gk-alphabet__link:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: -3px; }
.gk-alphabet__link[aria-current] { background: var(--res); color: var(--res-fg); }

/* cb76 Quellenblatt — Kit templates/quelle: Eis-Ablage mit weißem Blatt (Papierschatten), darauf
   der Quellentext mit nummerierten Absätzen und farbigen Analyse-Markierungen samt Legende.
   Der Schalter „Analysehinweise anzeigen“ blendet Markierungen und Legende ohne JavaScript aus
   (:has). Darunter der Quellennachweis. */
.gk-quellenblatt {
  margin: 0;
  padding: clamp(14px, 3vw, 32px);
  border-radius: var(--radius-lg);
  background: var(--surface-muted);
}
.gk-quellenblatt__kopf {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-3); margin-bottom: var(--space-4) ;                                 /* Kit: 16 / 20 */
}
.gk-quellenblatt__name { color: var(--text-strong); font: 500 var(--small-size)/1.4 var(--font-display); }
.gk-quellenblatt__schalter {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: var(--tap-min);
  color: var(--text-muted); font-size: var(--small-size);
  cursor: pointer;
}
.gk-quellenblatt__schalter input { width: 16px; height: 16px; margin: 0; accent-color: var(--interactive); cursor: pointer; }

.gk-quellenblatt__blatt {
  padding: clamp(20px, 3vw, 34px) clamp(18px, 3vw, 36px) clamp(20px, 3vw, 30px);
  background: var(--surface-card);
  box-shadow: var(--elevation-1);
}
.gk-quellenblatt__ort { display: block; color: var(--text-muted); font-size: var(--meta-size); line-height: var(--meta-lh); }
.gk-quellenblatt__text { margin: calc(var(--space-3) - 1px) 0 0; color: var(--text-body); }   /* Kit: 16 */
.gk-quellenblatt__absatz {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: var(--space-2);
  margin: 0 0 calc(var(--space-2-5) + 1px);                                           /* Kit: 14 */
  font-size: var(--body-size); line-height: var(--reading-lh);
}
.gk-quellenblatt__absatz:last-child { margin-bottom: 0; }
.gk-quellenblatt__nr {
  padding-top: .35em;
  color: var(--text-muted);
  font: 500 var(--meta-size)/1 var(--font-display);
  font-variant-numeric: tabular-nums;
}
.gk-quellenblatt__marke { padding: 2px 3px; color: inherit; background: var(--mark-1, var(--surface-art-2)); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.gk-quellenblatt__marke--2 { background: var(--mark-2, #ffd9d1); }
.gk-quellenblatt__marke--3 { background: var(--mark-3, #fff0b3); }
.gk-quellenblatt__legende {
  display: flex; flex-wrap: wrap; gap: calc(var(--space-2-5) + var(--space-1));        /* Kit: 18 */
  margin: calc(var(--space-4) ) 0 0; padding: var(--space-3) 0 0;                      /* Kit: 22 / 16 */
  border-top: 1px solid var(--border-default);
  color: var(--text-muted); font-size: var(--meta-size); line-height: var(--meta-lh);
  list-style: none;
}
.gk-quellenblatt__legendeneintrag { display: flex; align-items: center; gap: var(--space-1-5); }
.gk-quellenblatt__farbe { width: 12px; height: 12px; background: var(--mark-1, var(--surface-art-2)); }
.gk-quellenblatt__farbe--2 { background: var(--mark-2, #ffd9d1); }
.gk-quellenblatt__farbe--3 { background: var(--mark-3, #fff0b3); }
/* Hinweise aus: Markierungen neutral, Legende weg */
.gk-quellenblatt:has(.gk-quellenblatt__schalter input:not(:checked)) .gk-quellenblatt__marke { background: transparent; padding: 0; }
.gk-quellenblatt:has(.gk-quellenblatt__schalter input:not(:checked)) .gk-quellenblatt__legende { display: none; }
.gk-quellenblatt__nachweis {
  margin-top: calc(var(--space-2-5) + 1px);                                           /* Kit: 14 */
  color: var(--text-muted);
  font-size: var(--meta-size); line-height: var(--caption-lh);
}
@media (max-width: 559px) { .gk-quellenblatt__absatz { grid-template-columns: 18px minmax(0, 1fr); gap: var(--space-1-5); } }
.gk-quellenblatt__farbe { display: inline-block; flex-shrink: 0; }

/* cb77 Analyseschritte — Kit templates/quelle „Analyse in drei Schritten“: FilterChips als
   Reiter über einem Mitternacht-Kasten mit Schritt, Titel, Text und Leitfrage.
   Ohne JavaScript stehen alle Schritte untereinander, die Reiterleiste bleibt verborgen. */
.gk-schritte__reiter {
  display: flex; gap: 8px;
  margin-bottom: var(--space-4);                                                      /* Kit: 20 */
  overflow-x: auto; scrollbar-width: none;
}
.gk-schritte__reiter::-webkit-scrollbar { display: none; }
.gk-schritte__reiter .gk-chip { flex-shrink: 0; min-height: var(--tap-min); }
.gk-schritte__reiter .gk-chip[aria-selected="true"] { background: var(--interactive); border-color: var(--interactive); color: var(--interactive-fg); }
.gk-schritte__panels { display: grid; gap: var(--space-3); }
.gk-schritte__panel {
  padding: clamp(22px, 3vw, 30px) clamp(20px, 3vw, 32px);
  border-radius: var(--radius-lg);
  background: var(--surface-page); color: var(--text-strong);
}
.gk-schritte__panel[hidden] { display: none; }
.gk-schritte__kicker { display: block; margin-bottom: var(--space-2); color: var(--text-reading); font-size: var(--meta-size); line-height: var(--meta-lh); } /* Kit: 10 */
.gk-schritte__titel {
  margin: 0 0 calc(var(--space-2-5) + 1px);                                           /* Kit: 14 */
  color: inherit;
  font: var(--h3-weight) var(--h3-size)/var(--h3-lh) var(--font-display);
  letter-spacing: var(--h3-tracking);
}
.gk-schritte__text { max-width: 640px; margin: 0 0 calc(var(--space-2-5) + var(--space-1)); color: var(--text-reading); font-size: var(--small-size); line-height: var(--small-lh); } /* 18 */
.gk-schritte__frage {
  margin: 0; padding-top: var(--space-3);
  border-top: 1px solid var(--border-default);
  font-size: var(--small-size); line-height: var(--small-lh);
}
.gk-schritte__frageetikett { color: var(--res); font-weight: 700; }

/* cb78 Stationen — Kit templates/biografie „Lebensstationen“: Jahr in Royal (Display-Schrift)
   links, Satz rechts, Haarlinien zwischen den Zeilen. Keine Links, darum kein LessonRow. */
.gk-stationen { margin: 0; padding: 0; list-style: none; }
.gk-stationen__eintrag {
  display: grid; grid-template-columns: 70px minmax(0, 1fr); align-items: baseline;
  gap: calc(var(--space-2-5) + var(--space-1));                                       /* Kit: 18 */
  padding: calc(var(--space-2-5) + var(--space-1)) 0;                                 /* Kit: 18 */
  border-top: 1px solid var(--border-default);
}
.gk-stationen__eintrag:last-child { border-bottom: 1px solid var(--border-default); }
.gk-stationen__jahr { color: var(--text-link); font: 500 var(--h4-size)/1.2 var(--font-display); font-variant-numeric: tabular-nums; }
.gk-stationen__text { margin: 0; color: var(--text-body); font-size: var(--small-size); line-height: var(--small-lh); }
@media (max-width: 559px) { .gk-stationen__eintrag { grid-template-columns: 52px minmax(0, 1fr); gap: var(--space-2-5); } }

/* cb79 Wirkung — Kit templates/biografie „Warum ist er wichtig?“: drei Karten in Mitternacht,
   Royal und Koralle mit Bereich, Titel und Satz. Kein Ablauf, darum ohne Nummern (anders als
   StepCard). Fläche je Karte über Kontextklasse gk-section--brand / --royal oder --koralle. */
.gk-wirkung {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: calc(var(--space-2-5) + var(--space-1));                                       /* Kit: 18 */
  margin: 0; padding: 0; list-style: none;
}
.gk-wirkung__karte {
  padding: calc(var(--space-4) + var(--space-1) - 1px);                               /* Kit: 26 */
  border-radius: var(--radius-xl);
  background: var(--surface-page); color: var(--text-strong);
}
.gk-wirkung__karte--koralle { background: var(--diamond); color: var(--control-fg-on-light); }
.gk-wirkung__bereich { display: block; color: var(--text-reading); font-size: var(--meta-size); line-height: var(--meta-lh); }
.gk-wirkung__titel {
  margin: var(--space-2) 0;                                                           /* Kit: 10 */
  color: inherit;
  font: var(--h4-weight) var(--h4-size)/var(--h4-lh) var(--font-display);
  letter-spacing: var(--h4-tracking);
}
.gk-wirkung__text { margin: 0; color: var(--text-reading); font-size: var(--small-size); line-height: var(--small-lh); }
.gk-wirkung__karte--koralle .gk-wirkung__bereich,
.gk-wirkung__karte--koralle .gk-wirkung__text { color: inherit; }

/* cb80 Materialkopf — Kopf der Material- und Lernspielseiten nach den Kit-Vorlagen
   templates/analyse (Papier: Titelblock links, Leitkarte in Mitternacht rechts, unten bündig)
   und templates/wissencheck (gk-mkopf--bild: Mitternacht-Fläche, Schwarzweißbild rechts).
   Ressourcenart über gk-res--<art> am Block, Pill davor über cb04.
   Seit 05.11.2026 tragen Arbeitsblatt und Lernspiel den einheitlichen Kopf cb60 (ENTSCHEIDE #7);
   gk-mkopf und gk-mkopf--bild sind ungenutzt, die Leitkarte steht als --spalte in der Materialspalte. */
.gk-mkopf {
  position: relative; overflow: hidden;
  background: var(--surface-page); color: var(--text-body);
}
.gk-mkopf__innen { position: relative; padding-bottom: var(--space-5-5); }          /* 36 */
.gk-mkopf .gk-breadcrumb { padding-top: var(--space-5); margin-bottom: var(--space-5); } /* 32 / 32 */

.gk-mkopf__raster {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  align-items: end; gap: var(--space-5) 7%;                                         /* 30 / 7 % */
}
.gk-mkopf__titel {
  margin: var(--space-3) 0 var(--space-4);                                          /* 18 / 20 */
  color: var(--text-strong);
  font: var(--h1-weight) var(--h1-size)/var(--h1-lh) var(--font-display);
  letter-spacing: var(--h1-tracking);
  text-wrap: balance;
}
.gk-mkopf__intro {
  max-width: 620px; margin: 0;
  color: var(--text-muted);
  font-size: var(--intro-size); line-height: var(--intro-lh);
}

/* Leitkarte: Mitternacht, Radius 16, Etikett + Satz in der Display-Schrift */
.gk-mkopf__karte {
  padding: var(--space-4-5) var(--space-5);                                         /* 28 / 30 */
  border-radius: var(--radius-lg);
  background: var(--surface-page); color: var(--text-strong);
}
.gk-mkopf__etikett {
  display: block; margin-bottom: var(--space-2-5);                                  /* 12 */
  color: var(--text-reading);
  font-size: var(--meta-size); line-height: var(--meta-lh);
}
.gk-mkopf__satz {
  margin: 0;
  font: 500 24px/1.25 var(--font-display); letter-spacing: -.02em;                  /* Kit 24 px */
}
.gk-mkopf__fakten {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin: var(--space-4) 0 0; padding: var(--space-3) 0 0;
  border-top: 1px solid var(--border-default);
  list-style: none;
  color: var(--text-reading); font-size: var(--small-size); line-height: var(--small-lh);
}
.gk-mkopf__fakten li + li::before { content: "·"; margin-right: var(--space-2); }

/* Leitkarte unter dem einheitlichen Fachseiten-Kopf, oben in der Materialspalte (ENTSCHEIDE #7) */
.gk-mkopf__karte--spalte { margin-bottom: var(--space-5); }                         /* 30 bis zum Zwischentitel */

/* Variante Wissencheck: Mitternacht-Fläche, Bild rechts in Graustufen */
.gk-mkopf--bild .gk-mkopf__innen { padding-bottom: var(--space-6); }                /* 54 ≈ 45 + Luft im Raster */
.gk-mkopf--bild .gk-breadcrumb { padding-top: var(--space-4-5); margin-bottom: var(--space-5-5); } /* 28 / 36 */
.gk-mkopf--bild .gk-mkopf__titel { font-weight: 600; margin-bottom: var(--space-3); }
.gk-mkopf--bild .gk-mkopf__intro { max-width: 480px; color: var(--text-reading); }
.gk-mkopf__bild {
  position: absolute; top: 0; right: 0;
  width: 42%; height: 100%;
  object-fit: cover;
  filter: grayscale(1); opacity: .35;
}
.gk-mkopf__hinweis {
  display: flex; align-items: center; gap: var(--space-2);
  margin: var(--space-4) 0 0;
  color: var(--text-reading); font-size: var(--small-size); line-height: var(--small-lh);
}
.gk-mkopf__hinweis .gk-dot { background: var(--res); }

@media (max-width: 759px) {
  .gk-mkopf__satz { font-size: 21px; }
  .gk-mkopf__bild { width: 60%; opacity: .22; }
}

/* cb81 Blattvorschau — Vorschau einer Arbeitsblatt-Seite in der Formsprache des Kits:
   Eis-Bühne wie die ProductCard (cb23), das Blatt liegt leicht gekippt mit Buchschatten und
   Klebeband wie der Polaroid-Abzug (cb42) und richtet sich beim Zeigen auf. Unterzeile mit
   Seitenhinweis und TextLink. Kein Kit-Vorbild, Ergänzung für die Arbeitsblattseite. */
.gk-blatt { margin: 0; }
.gk-blatt__buehne {
  display: grid; place-items: center;
  padding: clamp(var(--space-5), 5vw, var(--space-8)) var(--space-4);             /* 30 – 70 */
  border-radius: var(--radius-lg);
  background: var(--surface-muted);
  text-decoration: none; cursor: zoom-in;
}
.gk-blatt__papier {
  position: relative; display: block;
  width: min(100%, 440px);
  background: var(--surface-card);
  box-shadow: var(--elevation-book);
  transform: rotate(var(--tilt-sm));
  transition: transform var(--dur-slow) var(--ease);
}
.gk-blatt__buehne:hover .gk-blatt__papier,
.gk-blatt__buehne:focus-visible .gk-blatt__papier { transform: rotate(0); }
.gk-blatt__band {
  position: absolute; top: -12px; left: 38%; z-index: 1;
  width: 89px; height: 25px;                                                        /* Kit-Klebeband */
  background: color-mix(in oklab, var(--surface-card) 70%, transparent);
  box-shadow: 0 1px 2px color-mix(in oklab, var(--surface-night) 10%, transparent);
  transform: rotate(-4deg);
}
.gk-blatt__seite { display: block; width: 100%; height: auto; }
.gk-blatt__unterzeile {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-2-5) var(--space-4);
  margin-top: var(--space-3);
}
.gk-blatt__hinweis { color: var(--text-muted); font-size: var(--small-size); line-height: var(--small-lh); }
.gk-blatt__buehne:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset); }
@media (prefers-reduced-motion: reduce) { .gk-blatt__papier { transition: none; } }

/* cb82 Spielbühne — Rahmen eines Lernspiels nach Kit-Vorlage templates/wissencheck:
   Standzeile (Frage x von y, Spielart), 6-px-Fortschrittsbalken in Royal, darunter die Bühne
   mit dem Spiel (H5P-Einbettung über data-h5p-id; als Vorlage eine KnowledgeQuestion, cb35). */
.gk-spiel { min-width: 0; }
.gk-spiel__stand {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  margin-bottom: var(--space-2-5);                                                  /* 12 */
  color: var(--text-muted); font-size: var(--small-size); line-height: var(--small-lh);
}
.gk-spiel__balken {
  display: block; width: 100%; height: 6px;                                         /* Kit 6 px */
  margin: 0 0 var(--space-5);                                                       /* 30 */
  border: 0; border-radius: 6px;
  background: var(--border-default); color: var(--interactive);
  overflow: hidden;
  appearance: none; -webkit-appearance: none;
}
.gk-spiel__balken::-webkit-progress-bar { background: var(--border-default); border-radius: 6px; }
.gk-spiel__balken::-webkit-progress-value { background: var(--interactive); border-radius: 6px; transition: width var(--dur-slow) var(--ease); }
.gk-spiel__balken::-moz-progress-bar { background: var(--interactive); border-radius: 6px; }
.gk-spiel__buehne { min-width: 0; }
.gk-spiel__buehne .gk-frage { margin-bottom: 0; padding: clamp(var(--space-3), 3vw, var(--space-5)); border-radius: var(--radius-lg); }
.gk-spiel__buehne .gk-frage__frage {
  float: left; width: 100%; box-sizing: border-box;                               /* Legende im Rahmen wie Kit-h2 */
  margin-bottom: var(--space-4); padding: 0;
  font-size: var(--h3-size); line-height: var(--h3-lh); letter-spacing: var(--h3-tracking);
}
.gk-spiel__buehne .gk-frage__optionen { clear: both; }
.gk-spiel__nach { margin-top: var(--space-6); }                                     /* 44 */

/* cb83 Materialspalte — Lesespalte der Kit-Vorlagen analyse und wissencheck: Abschnitte mit
   Linie oben und 44 px Luft, H2 mit 22 px Abstand. Steht in gk-shoplayout (cb24) links neben
   dem ShopPanel. gk-mbezug: Abschnittstitel links, Liste rechts (Editorial Split), schmal gestapelt. */
.gk-mbereich { padding-block: var(--space-6) 0; }                                  /* 44 oben; unten trägt die folgende Section */
.gk-mspalte { min-width: 0; }
.gk-mspalte--schmal { max-width: 820px; }
.gk-mspalte__abschnitt { padding-block: var(--space-6); border-top: 1px solid var(--border-default); }
.gk-mspalte__abschnitt:first-child { padding-top: 0; border-top: 0; }
.gk-mspalte__abschnitt:last-child { padding-bottom: 0; }
.gk-mspalte__titel {
  margin: 0 0 var(--space-4);                                                       /* 22 */
  color: var(--text-strong);
  font: var(--h2-weight) var(--h2-size)/var(--h2-lh) var(--font-display);
  letter-spacing: var(--h2-tracking);
}
.gk-mspalte__text { max-width: var(--content-measure); margin: 0 0 var(--space-5); color: var(--text-reading); font-size: var(--body-size); line-height: var(--reading-lh); }
.gk-mspalte__text a { color: var(--text-link); text-decoration: underline; text-decoration-color: var(--border-link); text-underline-offset: 3px; }
.gk-mspalte__text a:hover { text-decoration-color: currentColor; }
.gk-mspalte .gk-fakten { grid-template-columns: repeat(2, minmax(0, 1fr)); }          /* Kit-Standard zwei Spalten */
.gk-mspalte__mehr { margin-top: var(--space-4); }

.gk-mbezug {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start; gap: var(--space-5) var(--space-8);
}
.gk-mbezug .gk-sectionhead { margin-bottom: 0; }
@media (max-width: 899px) {
  .gk-mbezug { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 559px) {
  .gk-mspalte .gk-fakten { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 759px) {
  .gk-mbereich { padding-block: var(--space-5) 0; }
  .gk-mspalte__abschnitt { padding-block: var(--space-5); }
}

/* cb90 Anzeige — reservierter Anzeigenplatz (AdSense bleibt laut Relaunch-Konzept).
   Kein Kit-Vorbild; Formsprache aus Callout (Radius 12, Eis-Fläche) und Pill (Meta-Etikett).
   Die Mindesthöhe steht, bevor eine Anzeige lädt: kein Layoutsprung.
   Sperrzonen: nie im ersten Bildschirm über dem Hauptinhalt, nie in Kauf- oder Verkaufsblöcken
   (ShopPanel, Paket, Kaufbox, Preistafel), nie über einem Lernspiel.
   Ein Skript befüllt später gk-anzeige__platz anhand von data-ad-slot. */
.gk-anzeige { padding-block: var(--space-5); }
.gk-anzeige__rahmen {
  max-width: var(--measure-faq, 890px);
  margin-inline: auto;
}
.gk-anzeige__label {
  display: block;
  margin-bottom: var(--space-1-5);
  color: var(--text-muted);
  font: 400 var(--meta-size)/var(--meta-lh) var(--font-body);
  letter-spacing: var(--meta-tracking);
}
.gk-anzeige__platz {
  display: block;
  min-height: var(--anzeige-h, 280px);
  border: 1px dashed var(--border-card);
  border-radius: var(--radius-xl);
  background: var(--surface-muted);
  overflow: hidden;
}
/* Im Fließtext: ohne eigenen Abschnittsabstand, volle Spaltenbreite */
.gk-anzeige--im-text { padding-block: var(--space-5); }
.gk-anzeige--im-text .gk-anzeige__rahmen { max-width: none; }

@media (min-width: 768px) {
  .gk-anzeige__platz { min-height: var(--anzeige-h-weit, 250px); }
}

/* Kopfzeile — Kit components/navigation/SiteHeader + MegaMenu + Mobilmenü.
   Immer Mitternacht (Kontext gk-section--brand). Desktop 94 px, kompakt 64 px.
   Einträge weichen schrittweise ins Menü „Mehr“ (1260 / 1060 px), unter 860 px Burger.
   Blendet beim Herunterscrollen aus; Sticky-Elemente darunter lesen --gk-header-h. */

.gk-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--surface-page); color: var(--text-strong);
  box-shadow: 0 1px 0 var(--border-on-dark);
  transition: transform var(--dur-header) var(--ease), box-shadow var(--dur-header) var(--ease);
}
.gk-header[data-versteckt] { transform: translateY(-100%); box-shadow: none; }

.gk-header__leiste {
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--control-gap);
  padding: 0 var(--container-pad);
}
.gk-header__marke { display: inline-flex; flex-shrink: 0; border-radius: var(--radius-sm); }
.gk-header__logo { display: block; width: auto; height: 49px; }

/* --- Hauptnavigation ------------------------------------------------------ */
.gk-header__nav { display: flex; align-items: center; min-width: 0; }
.gk-header__liste { display: flex; align-items: center; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.gk-header__eintrag { position: relative; }
.gk-header__link {
  display: flex; align-items: center; gap: var(--space-1-5);
  padding: var(--control-pad-y-sm) 0;
  border: 0; border-bottom: 2px solid transparent;
  background: transparent; color: var(--text-strong);
  font: 500 var(--nav-size)/1.2 var(--font-body);
  white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.gk-header__link:hover, .gk-header__link:focus-visible { color: var(--text-accent); }
.gk-header__link[aria-current="page"], .gk-header__link[aria-expanded="true"] { border-bottom-color: var(--res); }
.gk-header__mehr .gk-header__link[aria-expanded="true"] { border-bottom-color: transparent; }

/* Dropdown „Mehr“ */
.gk-header__dropdown {
  position: absolute; top: 100%; right: 0; z-index: 70;
  min-width: 220px; margin: var(--space-2) 0 0; padding: var(--space-1-5);
  list-style: none;
  background: var(--surface-overlay); color: var(--text-body);
  border-radius: var(--radius-xl); box-shadow: var(--elevation-2);
}
.gk-header__menuepunkt {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 11px var(--space-2-5);
  border-radius: var(--radius-md);
  color: inherit; text-decoration: none;
  font: 500 var(--nav-size)/1.2 var(--font-body);
  transition: background-color var(--dur-fast) var(--ease);
}
.gk-header__menuepunkt:hover, .gk-header__menuepunkt:focus-visible { background: var(--surface-hover); }
.gk-header__menuepunkt[aria-current="page"] { background: var(--surface-overlay-active); }

/* Stufen: alles ab 1260, vier Einträge ab 1060, zwei ab 860 */
.gk-header__mehr { display: none; }
@media (min-width: 1360px) { .gk-header__liste { gap: 26px; } }
@media (max-width: 1259px) {
  .gk-header__liste > .gk-header__eintrag--ab5 { display: none; }
  .gk-header__mehr { display: block; }
}
@media (min-width: 1060px) { .gk-header__dropdown .gk-header__eintrag--ab3 { display: none; } }
@media (max-width: 1059px) { .gk-header__liste > .gk-header__eintrag--ab3 { display: none; } }

/* --- Aktionen ------------------------------------------------------------- */
.gk-header__aktionen { display: flex; align-items: center; gap: var(--space-2-5); flex-shrink: 0; }
.gk-header__suchknopf { color: var(--text-strong); }
.gk-header__burger {
  display: none; place-items: center;
  width: var(--tap-min); height: var(--tap-min);
  padding: 0; border: 0; background: transparent; color: var(--text-strong); cursor: pointer;
}
.gk-header__linien { position: relative; display: block; width: 20px; height: 14px; }
.gk-header__linien > span {
  position: absolute; left: 0; width: 20px; height: 2px;
  border-radius: 2px; background: currentColor;
  transition: transform var(--dur-mid) var(--ease), top var(--dur-mid) var(--ease);
}
.gk-header__linien > span:first-child { top: 2px; }
.gk-header__linien > span:last-child { top: 10px; }
.gk-header__burger[aria-expanded="true"] .gk-header__linien > span { top: 6px; }
.gk-header__burger[aria-expanded="true"] .gk-header__linien > span:first-child { transform: rotate(45deg); }
.gk-header__burger[aria-expanded="true"] .gk-header__linien > span:last-child { transform: rotate(-45deg); }

/* --- Suchleiste unter der Kopfzeile -------------------------------------- */
.gk-header__suche {
  position: absolute; left: 0; right: 0; top: 100%;
  padding: var(--space-4) var(--container-pad) var(--space-5);
  background: var(--surface-page);
  box-shadow: 0 1px 0 var(--border-on-dark) inset, var(--elevation-2);
}
.gk-header__suchform { max-width: 760px; margin-inline: auto; }

/* --- MegaMenu ------------------------------------------------------------- */
.gk-mega {
  position: absolute; left: 0; right: 0; top: 100%;
  height: calc(100dvh - var(--header-h)); min-height: 520px;
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr);
  overflow: hidden;
  background: var(--surface-night); color: var(--text-strong);
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--dur-reveal) var(--ease);
}
.gk-mega[data-offen] { clip-path: inset(0 0 0 0); }
.gk-mega__verzeichnis {
  display: flex; flex-direction: column; gap: var(--space-4-5);
  padding: clamp(28px, 4vh, 48px) var(--container-pad);
  overflow-y: auto;
}
.gk-mega__kopf { opacity: 0; transform: translateY(10px); transition: opacity var(--dur-slow) var(--ease) 60ms, transform var(--dur-slow) var(--ease) 60ms; }
.gk-mega[data-offen] .gk-mega__kopf { opacity: 1; transform: none; }
.gk-mega__label { display: block; margin: 0 0 var(--space-2); color: var(--text-muted); font-size: 11px; letter-spacing: .01em; }
.gk-mega__titel { margin: 0; font: 500 var(--mega-title-size)/1.05 var(--font-display); letter-spacing: -.04em; }
.gk-mega__epochen { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 26px 40px; }
.gk-mega__zeilen, .gk-mega__quer, .gk-mega__mehr { margin: 0; padding: 0; list-style: none; }
.gk-mega__zeile {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 6px 0;
  color: var(--text-on-dark-link); text-decoration: none;
  font: 500 var(--mega-row-size)/1.25 var(--font-display); letter-spacing: -.015em;
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s var(--ease) calc(80ms + var(--i, 0) * var(--stagger)),
              transform var(--dur-slow) var(--ease) calc(80ms + var(--i, 0) * var(--stagger)),
              color var(--dur-fast) var(--ease);
}
.gk-mega[data-offen] .gk-mega__zeile { opacity: 1; transform: none; }
.gk-mega__zeile[data-aktiv], .gk-mega__zeile:hover, .gk-mega__zeile:focus-visible { color: var(--text-strong); }
.gk-mega__quadrat {
  width: 0; height: 10px; margin-right: -10px; flex-shrink: 0;
  border-radius: var(--radius-dot); background: var(--res-themen);
  transition: width .3s var(--ease), margin-right .3s var(--ease);
}
.gk-mega__zeile[data-aktiv] .gk-mega__quadrat { width: 10px; margin-right: 0; }
.gk-mega__name { transition: transform .3s var(--ease); }
.gk-mega__zeile[data-aktiv] .gk-mega__name { transform: translateX(2px); }
.gk-mega__jahr { color: var(--text-muted); font: 400 11px/1.25 var(--font-body); letter-spacing: 0; }
.gk-mega__fuss {
  display: flex; flex-wrap: wrap; gap: 14px 40px;
  margin-top: auto; padding-top: var(--space-4);
  border-top: 1px solid var(--border-default);
}
.gk-mega__quer { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); }
.gk-mega__mehr { display: flex; flex-wrap: wrap; gap: 6px var(--space-4); padding-top: 6px; font-size: 13px; }
.gk-mega__mehrlink { color: var(--text-on-dark-link); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
.gk-mega__mehrlink:hover, .gk-mega__mehrlink:focus-visible { color: var(--text-strong); }

/* Bildbühne */
.gk-mega__buehne { position: relative; overflow: hidden; background: var(--surface-stage); }
.gk-mega__ebene { position: absolute; inset: 0; opacity: 0; transition: opacity var(--dur-reveal) var(--ease); }
.gk-mega__ebene[data-aktiv] { opacity: 1; }
.gk-mega__bild {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transform: scale(1.08); transition: transform 6s var(--ease);
}
.gk-mega__ebene[data-aktiv] .gk-mega__bild { transform: scale(1); }
.gk-mega__jahreszahl {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--stage-year);
  font: 600 var(--mega-year-size)/1 var(--font-display); letter-spacing: -.06em;
  transform: translateY(30px); transition: transform 1s var(--ease);
}
.gk-mega__ebene[data-aktiv] .gk-mega__jahreszahl { transform: none; }
.gk-mega__verlauf { position: absolute; inset: 0; background: var(--stage-fade); }
.gk-mega__text { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 clamp(24px, 3vw, 44px) clamp(28px, 4vh, 44px); }
.gk-mega__text[data-neu] { animation: gk-mega-hoch var(--dur-slow) var(--ease); }
.gk-mega__daten {
  display: inline-block; margin-bottom: 14px; padding: 5px 9px;
  border-radius: var(--radius-xs);
  background: var(--res); color: var(--res-fg); font-size: 11px;
}
.gk-mega__buehnentitel { margin: 0 0 var(--space-2-5); font: 600 var(--mega-stage-size)/1.02 var(--font-display); letter-spacing: -.045em; }
.gk-mega__teaser { max-width: 420px; margin: 0 0 var(--space-4); color: var(--text-reading); font-size: 14px; line-height: 1.65; }
.gk-mega__oeffnen { gap: 14px; padding-bottom: 6px; font-size: 13px; }
@keyframes gk-mega-hoch { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* --- Mobilmenü ------------------------------------------------------------ */
.gk-mobil {
  position: fixed; left: 0; right: 0; top: var(--header-h-compact); bottom: 0; z-index: 59;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 18px var(--container-pad-compact) calc(28px + env(safe-area-inset-bottom));
  background: var(--surface-night); color: var(--text-strong);
  opacity: 0; transform: translateY(-12px);
  transition: opacity var(--dur-mid) var(--ease), transform var(--dur-header) var(--ease);
}
.gk-mobil[data-offen] { opacity: 1; transform: none; }
.gk-mobil__suche {
  display: flex; align-items: center; gap: var(--space-2-5);
  margin: 0 0 24px; padding: 0 14px;
  border: 1px solid var(--border-card); border-radius: var(--radius-panel);
  background: var(--surface-glass); color: var(--text-reading);
}
.gk-mobil__suche:focus-within { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }
.gk-mobil__eingabe {
  flex: 1; min-width: 0; padding: 13px 0;
  border: 0; background: transparent; color: var(--text-strong);
  font: 16px var(--font-body);
}
.gk-mobil__eingabe:focus-visible { outline: none; }
.gk-mobil__eingabe::placeholder { color: var(--text-reading); opacity: 1; }
.gk-mobil__label { margin: 0 0 var(--space-2); color: var(--text-muted); font-size: var(--meta-size); }
.gk-mobil__tabs {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px;
  margin-bottom: 12px; padding: 4px;
  border-radius: var(--radius-panel); background: var(--surface-glass);
}
.gk-mobil__tab {
  padding: 9px 4px; border: 0; border-radius: var(--radius-md);
  background: transparent; color: var(--text-strong);
  font: 500 var(--meta-size)/1.25 var(--font-body);
  cursor: pointer; transition: background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.gk-mobil__tab[aria-selected="true"] { background: var(--control-light); color: var(--control-fg-on-light); }
.gk-mobil__spanne { display: block; margin-top: 2px; font-size: var(--meta-size); opacity: .7; }
.gk-mobil__epochen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.gk-mobil__epoche {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 52px; padding: 8px 0;
  border-bottom: 1px solid var(--border-default);
  color: var(--text-strong); text-decoration: none;
}
.gk-mobil__name { font: 500 var(--small-size)/1.25 var(--font-display); letter-spacing: -.01em; }
.gk-mobil__daten { margin-top: 2px; color: var(--text-muted); font-size: var(--meta-size); }
.gk-mobil__chips {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  margin: 0 calc(-1 * var(--container-pad-compact)) 24px; padding: 0 var(--container-pad-compact);
  list-style: none;
}
.gk-mobil__chips::-webkit-scrollbar { display: none; }
.gk-mobil__chips > li { flex-shrink: 0; }
.gk-mobil__chip {
  display: inline-flex; align-items: center; min-height: var(--tap-min);
  padding: 0 14px; border: 1px solid var(--border-pill); border-radius: var(--radius-pill);
  color: var(--text-strong); text-decoration: none; white-space: nowrap; font-size: 13px;
}
.gk-mobil__kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; }
.gk-mobil__kachel {
  display: flex; align-items: center; gap: var(--space-2);
  min-height: 52px; padding: 0 14px;
  border-radius: var(--radius-panel); background: var(--surface-glass);
  color: var(--text-strong); text-decoration: none;
  font: 500 var(--small-size)/1.2 var(--font-body);
  transition: background-color var(--dur-fast) var(--ease);
}
.gk-mobil__kachel:hover, .gk-mobil__kachel[aria-current="page"] { background: var(--surface-glass-strong); }
.gk-dot--lehrkraefte { background: var(--text-accent); }

/* --- Kompakt unter 860 px ------------------------------------------------- */
@media (max-width: 859px) {
  .gk-header__leiste { height: var(--header-h-compact); gap: var(--space-2-5); padding: 0 var(--container-pad-compact); }
  .gk-header__logo { height: 38px; }
  .gk-header__nav, .gk-header__cta, .gk-mega { display: none; }
  .gk-header__burger { display: grid; }
  .gk-header__aktionen { gap: 4px; }
  .gk-header__suche { padding-inline: var(--container-pad-compact); }
}
@media (min-width: 860px) { .gk-mobil { display: none; } }

/* Fußzeile — Kit components/navigation/SiteFooter: Mitternacht, große Marke, drei
   Linkspalten, Rechtszeile. Unter 700 px werden die Spalten zu Akkordeons (details). */
.gk-footer { background: var(--surface-page); color: var(--text-strong); }
.gk-footer__innen {
  display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 35px;
  max-width: var(--container-max); margin-inline: auto;
  padding: 58px var(--container-pad) 25px;
}
.gk-footer__logo-link { display: inline-flex; margin-bottom: var(--space-4); border-radius: var(--radius-sm); }
.gk-footer__logo { display: block; width: auto; height: 64px; }
.gk-footer__claim { margin: 0; color: var(--text-on-dark-footer); font-size: var(--small-size); line-height: 1.75; }
.gk-footer__beleg { margin: var(--space-2) 0 0; color: var(--text-on-dark-footer); font-size: var(--meta-size); line-height: 1.5; }
.gk-footer__beleg:first-of-type { margin-top: var(--space-4); }

.gk-footer__titel {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 20px;
  font: 500 var(--small-size)/1.3 var(--font-body);
  list-style: none; cursor: default; pointer-events: none;
}
.gk-footer__titel::-webkit-details-marker { display: none; }
.gk-footer__plus { display: none; font-size: 20px; line-height: 1; transition: transform var(--dur-mid) var(--ease); }
.gk-footer__liste, .gk-footer__rechtliste { margin: 0; padding: 0; list-style: none; }
.gk-footer__link {
  display: flex; align-items: center; margin-bottom: 14px;
  color: var(--text-on-dark-list); font-size: 12px; text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.gk-footer__link:hover, .gk-footer__link:focus-visible { color: var(--text-strong); }

.gk-footer__recht {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; gap: 25px;
  margin-top: var(--space-2); padding-top: 23px;
  border-top: 1px solid var(--border-pill);
  color: var(--text-on-dark-legal); font-size: 10px;
}
.gk-footer__copy { margin: 0 auto 0 0; }
.gk-footer__rechtliste { display: flex; flex-wrap: wrap; gap: 12px 25px; }
.gk-footer__rechtlink { color: inherit; text-decoration: none; transition: color var(--dur-fast) var(--ease); }
.gk-footer__rechtlink:hover, .gk-footer__rechtlink:focus-visible { color: var(--text-strong); }

@media (max-width: 699px) {
  .gk-footer__innen { grid-template-columns: 1fr; gap: 0; padding: 40px var(--container-pad-compact) calc(24px + env(safe-area-inset-bottom)); }
  .gk-footer__marke { margin-bottom: 24px; }
  .gk-footer__logo { height: 44px; }
  .gk-footer__logo-link { margin-bottom: 16px; }
  .gk-footer__spalte { border-bottom: 1px solid var(--border-default); }
  .gk-footer__titel { min-height: 52px; margin: 0; pointer-events: auto; cursor: pointer; }
  .gk-footer__plus { display: inline; }
  .gk-footer__spalte[open] .gk-footer__plus { transform: rotate(45deg); }
  .gk-footer__liste { padding-bottom: 10px; }
  .gk-footer__link { min-height: var(--tap-min); margin: 0; font-size: 14px; }
  .gk-footer__recht { gap: 12px 20px; border-top: 0; font-size: 12px; }
  .gk-footer__copy { width: 100%; }
  .gk-footer__rechtlink { display: inline-flex; align-items: center; min-height: var(--tap-min); }
}