/* =====================================================================
   Klivantis — Hauptwebseite klivantis.ai — Produktions-Stylesheet
   =====================================================================
   Design "Modern & Edel" (Konzept D), extrahiert aus
   design/konzept-d-modern.html (freigegeben 13.08.2026, NICHT verändert)
   und um produktionsnotwendige Bausteine ergänzt: Off-Canvas-Menü mit
   960px-Breakpoint (statt 900px in der Design-Vorschau — Kai-Vorgabe für
   die Produktivseite), Kontaktformular inkl. Custom-Dropdown (natives
   <select>-Popup ist auf macOS nicht stylbar, siehe Lektion aus der
   Sales-Webseite Team-Training-App-Fable), Cookie-Consent-Modal,
   Legal-Page-Typografie, Skip-Link, Stagger-Klassen (.d0-.d300 statt
   Inline-Styles — style-src 'self' im CSP-Header blockiert sonst jedes
   Inline-style-Attribut).

   Farbwelt: Mitternachtsblau (Night/Ice/Azur), siehe :root. Sora für
   Headlines (DE/EN), Onest für Headlines auf /bg/ (Sora deckt kein
   Kyrillisch ab — Onest ist ein geometrisch-humanistischer Hybrid mit
   explizitem Bulgarisch-Support und ähnlichem x-Höhen-Verhältnis, siehe
   Hub-Notiz für die vollständige Begründung). Inter für Text/UI,
   Space Grotesk nur in der Logo-Wortmarke.
   ===================================================================== */

/* ---------- Selbst gehostete Fonts (kein Google-Fonts-Request) ---------- */
@font-face{font-family:'Sora';font-style:normal;font-weight:100 800;font-display:swap;src:url('../fonts/sora-var-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
/* Fraunces als Headline-Schrift statt Sora (14.08.2026, Kai-Entscheidung:
   Serif statt Sans fuer mehr "Edel"-Wirkung). Variable Font mit opsz-
   Achse (9-144) UND wght-Achse (100-900) -- der browsereigene, seit
   Chrome/Firefox/Safari standardmaessig aktive `font-optical-sizing:auto`
   waehlt die optische Groesse automatisch passend zur Schriftgroesse,
   keine manuelle font-variation-settings noetig. Kein Kyrillisch-Support
   (Google Fonts liefert nur latin/latin-ext/vietnamese), /bg/ bleibt
   bewusst bei Onest (von Kai bestaetigt, keine Anpassung noetig). */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/fraunces-var-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:'Onest';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/onest-var-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:'Onest';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/onest-var-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-600.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/inter-700.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/space-grotesk-600.woff2') format('woff2')}
/* Typografie-Versuch vom 26.08.2026 (Kai): Libre Caslon Display Regular 400
   fuer Ueberschriften, Archivo fuer den Fliesstext. Beide selbstgehostet,
   Subsets Latin und Latin-Ext von Google Fonts, Lizenz SIL OFL 1.1.
   Libre Caslon Display gibt es nur in einem Schnitt, deshalb stehen die
   Ueberschriften auf 400 statt 700; ohne das synthetisiert der Browser einen
   Fettschnitt, was bei einer Antiqua sofort auffaellt.
   Kyrillisch deckt keine der beiden ab, /bg/ bleibt deshalb unveraendert bei
   Onest fuer Ueberschriften und beim bisherigen Fliesstext-Stack. Die alten
   Schriftdateien bleiben liegen, damit sich der Versuch zurueckdrehen laesst. */
@font-face{font-family:'Libre Caslon Display';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/libre-caslon-display-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Libre Caslon Display';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/libre-caslon-display-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;src:url('../fonts/archivo-var-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;src:url('../fonts/archivo-var-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --night:#0B1424;
  --night-2:#0F1B30;
  --night-3:#14233D;
  --ice:#F2F5FA;
  --muted:#8FA3C0;
  --line:rgba(143,163,192,.18);
  --azure:#5E9BFF;
  --azure-soft:#9DC1FF;
  --azure-dim:rgba(94,155,255,.12);
  --azure-hover-light:#2B5FCC;
  /* Gold/Champagner: zweite Akzentfarbe seit 14.08.2026 (Kai-Entscheidung
     nach Livetest), ersetzt Azur bei CTA-Buttons, Akkordeon-Hover und den
     Produktbeweis-Icons. Azur bleibt Akzent fuer Links/Fokusringe/Hero-
     Textakzent/Statuspunkte im dunklen Bereich -- siehe PRODUCT.md
     "Brand Commitments" fuer die vollstaendige Begruendung. */
  --gold:#D4A24E;
  --gold-hover:#DAB069;
  --gold-dim:rgba(212,162,78,.12);
  /* Footer-Navy: sehr dunkler Blauton des Footer-Hintergrunds, seit
     14.08.2026 auch fuer die Status-Punkte/Unterstriche in den weissen
     Produktbeweis-Karten verwendet (Kai-Wunsch "Footer-Blau"). */
  --footer-navy:#091120;
  --paper:#F6F6F8;
  --ink:#12121A;
  --content-text:#39414F;
  --ok:#166534;
  --ok-bg:#F0FDF4;
  --ok-border:#BBF7D0;
  --err:#991B1B;
  --err-bg:#FEF2F2;
  --err-border:#FECACA;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:'Archivo',system-ui,sans-serif;background:var(--night);color:var(--ice);line-height:1.65;font-size:16px}
body.bg-locale{--headline-font:'Onest',sans-serif}
body:not(.bg-locale){--headline-font:'Sora',sans-serif}
/* Fraunces nur fuer h1/h2/h3 (14.08.2026, die "Ueberschriften-
   Typografie", die Kai bemaengelte), --headline-font bleibt fuer die
   restlichen UI-Elemente (Off-Canvas-Menue, Akkordeon-Nummerierung)
   unveraendert bei Sora/Onest -- Fallback-Kette faengt /bg/ automatisch
   ab (kein --display-font dort gesetzt, kein Kyrillisch in Fraunces). */
body:not(.bg-locale){--display-font:'Libre Caslon Display',Georgia,serif}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
::selection{background:var(--azure);color:var(--night)}
:focus-visible{outline:2px solid var(--azure);outline-offset:3px}
h1,h2,h3{font-family:var(--display-font,var(--headline-font));letter-spacing:-.02em}
/* Libre Caslon Display hat nur den Regular-Schnitt. Die Ueberschriften der
   deutschen und englischen Fassung laufen deshalb auf 400 und bekommen etwas
   weniger negative Laufweite, weil eine Antiqua enger gesetzt schnell gedrungen
   wirkt. Die bulgarische Fassung bleibt bei Onest und behaelt ihre Gewichte. */
body:not(.bg-locale) h1,body:not(.bg-locale) h2,body:not(.bg-locale) h3{font-weight:400;letter-spacing:-.01em}

.sprite-sheet{display:none}

/* ---------- Skip-Link (Barrierefreiheit) ---------- */
.skip-link{position:absolute;left:-999px;top:auto;z-index:200;background:var(--azure);color:var(--night);padding:12px 20px;border-radius:0 0 10px 0;font-weight:600;text-decoration:none}
.skip-link:focus{left:0;top:0}

/* ---------- Sichtbar nur für Screenreader ---------- */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ============ Header ============ */
header{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:16px 30px;background:rgba(11,20,36,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.lockup{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ice)}
.lockup svg{height:34px;width:auto;color:var(--ice)}
.lockup .wm-wrap{display:flex;flex-direction:column}
.lockup .wm{font-family:'Space Grotesk',sans-serif;font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:16px;line-height:1.1}
.lockup .sub{font-size:8.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--muted);margin-top:3px}
nav.main{display:flex;gap:28px;font-size:20.25px;font-weight:400}
nav.main a{text-decoration:none;color:var(--muted)}
nav.main a:hover,nav.main a:focus-visible{color:var(--ice)}
.h-right{display:flex;align-items:center;gap:18px}
.lang{display:flex;gap:4px;font-size:14px}
.lang a{padding:4px 9px;border:1px solid var(--line);color:var(--muted);border-radius:99px;text-decoration:none;font-weight:400}
.lang a:hover,.lang a:focus-visible{color:var(--ice)}
.lang a.on{background:var(--ice);color:var(--night);border-color:var(--ice)}
/* --gold statt --azure als CTA-Akzentfarbe (14.08.2026, Kai-Entscheidung
   nach Test gegen zwei Lila-Toene). Kontrast --night-Text auf --gold
   ~8:1, ausserdem hat --gold selbst ~8:1 Kontrast zum dunklen Night-
   Hintergrund -- Button hebt sich klar ab. */
.cta-s{background:var(--gold);color:var(--night);text-decoration:none;font-size:14px;font-weight:400;padding:10px 20px;border-radius:99px;transition:background .2s ease-out}
.cta-s:hover,.cta-s:focus-visible{background:var(--gold-hover)}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:10px;padding:10px;cursor:pointer}
.burger svg{width:22px;height:22px;stroke:var(--ice);stroke-width:2;stroke-linecap:round;display:block}
@media(max-width:960px){nav.main,.cta-s,.h-right>.lang{display:none}.burger{display:block}}

/* ============ Off-Canvas-Menü (mobil) ============ */
.oc-backdrop{position:fixed;inset:0;z-index:70;background:rgba(4,9,18,.6);opacity:0;pointer-events:none;transition:opacity .3s ease-out}
.offcanvas{position:fixed;top:0;right:0;bottom:0;z-index:71;width:min(320px,86vw);background:var(--night-2);border-left:1px solid var(--line);display:flex;flex-direction:column;gap:6px;padding:24px;transform:translateX(102%);transition:transform .35s cubic-bezier(.16,1,.3,1)}
body.oc-open .offcanvas{transform:none}
body.oc-open .oc-backdrop{opacity:1;pointer-events:auto}
body.oc-open{overflow:hidden}
.oc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.oc-title{font-family:var(--headline-font);font-weight:600;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.oc-close{background:none;border:1px solid var(--line);border-radius:10px;padding:9px;cursor:pointer}
.oc-close svg{width:20px;height:20px;stroke:var(--ice);stroke-width:2;stroke-linecap:round;display:block}
.oc-nav{display:flex;flex-direction:column}
.oc-nav a{color:var(--ice);text-decoration:none;font-family:var(--headline-font);font-weight:600;font-size:20px;padding:14px 6px;border-bottom:1px solid var(--line)}
.oc-nav a:hover,.oc-nav a:focus-visible{color:var(--azure-soft)}
.oc-tools{margin-top:22px;display:flex;flex-direction:column;gap:14px}
.oc-tools .lang{display:flex;gap:8px}
.oc-tools .lang a{font-size:13px;padding:6px 12px}
.oc-cta{margin-top:auto;text-align:center}

/* ============ Buttons ============ */
.btn{display:inline-block;text-decoration:none;font-weight:600;font-size:15px;padding:15px 30px;border-radius:99px;transition:transform .25s cubic-bezier(.16,1,.3,1),background .2s ease-out;border:none;cursor:pointer;font-family:'Archivo',sans-serif}
.btn:hover{transform:translateY(-2px)}
/* Gleiche Gold/Champagner-Akzentfarbe wie .cta-s (siehe Begruendung
   oben), fuer alle .btn-p-Buttons (Hero-CTA, Formular-Absenden,
   Cookie-Consent-Buttons). */
.btn-p{background:var(--gold);color:var(--night)}
.btn-p:hover,.btn-p:focus-visible{background:var(--gold-hover)}
.btn-p:disabled{opacity:.6;pointer-events:none;transform:none}
.btn-o{border:1.5px solid rgba(242,245,250,.35);color:var(--ice);background:none}
.btn-o:hover,.btn-o:focus-visible{background:rgba(242,245,250,.07)}
/* .btn-o war bis 19.08.2026 nur im dunklen Hero im Einsatz. In der
   hellen .paper-zone braucht er dunkle Kontur und Schrift, sonst ist er
   dort praktisch unsichtbar. */
.paper-zone .btn-o{border-color:rgba(18,18,26,.28);color:var(--ink)}
.paper-zone .btn-o:hover,.paper-zone .btn-o:focus-visible{background:rgba(18,18,26,.05)}
.btn.big{width:100%;text-align:center}

/* ============ Hero ============ */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;overflow:hidden;
  background:
    radial-gradient(90% 70% at 82% 8%,rgba(94,155,255,.16) 0%,transparent 55%),
    radial-gradient(70% 60% at 10% 100%,rgba(20,35,61,.9) 0%,transparent 60%),
    linear-gradient(175deg,#0D1830 0%,var(--night) 55%,var(--footer-navy) 100%)}
#particles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero-inner{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;padding:140px 8vw 60px;max-width:1440px;margin:0 auto;width:100%}
.hero h1{font-weight:700;font-size:clamp(38px,5.6vw,84px);line-height:1.06;max-width:17ch}
.hero h1 em{font-style:normal;color:var(--azure-soft)}
.hero p.lead{margin-top:28px;max-width:50ch;color:var(--muted);font-size:clamp(16px,1.3vw,19px)}
.hero-ctas{margin-top:40px;display:flex;gap:14px;flex-wrap:wrap}

/* ============ Paper-Zone: heller Content-Bereich ============ */
.paper-zone{background:var(--paper);color:var(--ink)}
.paper-zone .sec-lead,.paper-zone p{color:var(--content-text)}
.paper-zone h2,.paper-zone h3{color:var(--ink)}

/* ============ Leistungen: Akkordeon ============
   Jede Zeile besteht aus einem <h3><button class="row-trigger">…</button>
   </h3> (WAI-ARIA-Accordion-Muster: Heading umschliesst den Trigger) und
   einem Panel darunter. Offen/geschlossen wird über die Klasse "open" auf
   dem umschliessenden .row-item gesteuert (main.js), Höhen-Animation per
   CSS-Grid-Trick (0fr/1fr) ohne feste Höhen. */
.services{padding:130px 8vw 60px;max-width:1440px;margin:0 auto}
.services h2{font-weight:700;font-size:clamp(28px,3.6vw,52px);max-width:20ch}
.services .sec-lead{margin-top:16px;color:var(--muted);max-width:56ch;font-size:17px}
.rows{margin-top:70px;border-top:1px solid var(--line)}
.row-item{border-bottom:1px solid var(--line)}
.row-item h3{font-weight:600;font-size:clamp(21px,2.4vw,34px);margin:0}
.row-trigger{all:unset;box-sizing:border-box;display:flex;width:100%;align-items:center;justify-content:space-between;gap:24px;padding:38px 10px;cursor:pointer;position:relative;transition:background .25s ease-out,padding .25s cubic-bezier(.16,1,.3,1)}
.row-trigger:hover,.row-trigger:focus-visible{background:var(--gold-dim);padding-left:26px}
.row-trigger:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
/* Linker Akzentbalken, blendet bei Hover/Fokus/offenem Panel ein
   (14.08.2026, Kai: "sieht noch etwas langweilig aus") */
.row-trigger::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;background:var(--gold);transform:scaleY(0);transform-origin:center}
.row-trigger:hover::before,.row-trigger:focus-visible::before,.row-item.open .row-trigger::before{transform:scaleY(1)}
.row-head{display:flex;align-items:baseline;gap:18px;min-width:0}
.row-num{flex:none;font-family:var(--headline-font);font-weight:600;font-size:15px;color:var(--gold);opacity:.6;letter-spacing:.02em}
.row-title{font-weight:600;font-size:clamp(21px,2.4vw,34px)}
.row-title small{display:block;font-family:'Archivo',sans-serif;font-weight:500;font-size:13px;color:var(--muted);letter-spacing:.02em;margin-top:6px}
.row-trigger .arr{flex:none;width:52px;height:52px;border:1.5px solid var(--line);border-radius:50%;display:grid;place-items:center;transition:background .25s ease-out,border-color .25s ease-out}
.row-trigger .arr svg{width:20px;height:20px;stroke:var(--ice);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.row-trigger:hover .arr,.row-trigger:focus-visible .arr{background:var(--gold);border-color:var(--gold)}
.row-trigger:hover .arr svg,.row-trigger:focus-visible .arr svg{stroke:var(--night)}
.row-item.open .row-trigger .arr svg{transform:rotate(90deg)}
.row-panel{display:grid;grid-template-rows:0fr}
.row-item.open .row-panel{grid-template-rows:1fr}
.row-panel>div{overflow:hidden}
.row-panel p{color:var(--muted);font-size:15px;padding:0 10px 34px}
.row-cta{display:block;width:fit-content;margin:0 10px 34px auto}
/* Aufzaehlung im Akkordeon-Panel (19.08.2026, Leistung 04): erbt
   Farbe/Groesse nicht von .row-panel p, deshalb eigene Regel. */
.row-panel ul{margin:0;padding:0 10px 34px 30px;color:var(--muted);font-size:15px}
.row-panel li{margin-bottom:9px}
.row-panel li:last-child{margin-bottom:0}
.paper-zone .row-panel ul{color:var(--content-text)}
/* Zwei CTA-Buttons nebeneinander (19.08.2026, Leistung 05): die Gruppe
   sitzt rechtsbuendig an derselben Stelle, an der vorher der einzelne
   .row-cta stand. */
.row-ctas{display:flex;flex-wrap:wrap;gap:14px;justify-content:flex-end;width:fit-content;margin:0 10px 34px auto}
.row-ctas .row-cta{margin:0}
@media (prefers-reduced-motion:no-preference){
  .row-panel{transition:grid-template-rows .35s cubic-bezier(.16,1,.3,1)}
  .row-trigger .arr svg{transition:transform .3s cubic-bezier(.16,1,.3,1)}
  .row-trigger::before{transition:transform .25s cubic-bezier(.16,1,.3,1)}
}
.paper-zone .rows{border-top-color:rgba(18,18,26,.16)}
.paper-zone .row-item{border-bottom-color:rgba(18,18,26,.16)}
.paper-zone .row-trigger{color:var(--ink)}
.paper-zone .row-num{opacity:1}
.paper-zone .row-title small{color:var(--content-text)}
.paper-zone .row-panel p{color:var(--content-text)}
.paper-zone .row-trigger .arr{border-color:rgba(18,18,26,.28)}
.paper-zone .row-trigger .arr svg{stroke:var(--ink)}
.paper-zone .row-trigger:hover .arr svg,.paper-zone .row-trigger:focus-visible .arr svg{stroke:var(--night)}

/* ============ Beweis ============ */
.proof{padding:110px 8vw;max-width:1440px;margin:0 auto}
.proof h2{font-weight:700;font-size:clamp(26px,3.2vw,46px);max-width:24ch}
.proof .sec-lead{margin-top:16px;color:var(--muted);max-width:56ch;font-size:17px}
.proof-grid{margin-top:60px;display:grid;grid-template-columns:1fr 1fr;gap:26px}

/* --- FAQ (19.08.2026) -------------------------------------------
   Bewusst KEIN eigenes Gestaltungselement: die Sektion nutzt die
   Zonen-Masse von .proof und das Akkordeon-Muster der Leistungen
   (.rows/.row-item/.row-trigger). Einziger Unterschied ist die
   kleinere Titelgroesse, damit die Fragenliste nicht wie eine zweite
   Leistungsliste wirkt, und der fehlende .row-num (Fragen werden
   nicht nummeriert). Oben weniger Abstand, weil direkt darueber die
   Produkte-Sektion mit 110px Innenabstand endet. */
.faq{padding:20px 8vw 110px;max-width:1440px;margin:0 auto}
/* Kursliste zwischen Produkten und FAQ. Uebernimmt Typografie und
   Innenabstaende der FAQ-Sektion, laesst unten aber Luft, weil direkt
   danach die FAQ mit eigener Ueberschrift folgt.

   Die Karten folgen dem Aufbau des Kurskatalogs der Sales-Webseite (Bild mit
   Titel darauf, Beschreibung, Tag-Reihe), sind aber in die Formensprache
   dieser Seite uebersetzt: weisse Karte auf Papier statt violetter Akzent,
   Gold als Tag- und Hover-Farbe, Radius und Schatten wie bei .paper-zone
   .card. Drei Karten stehen offen, der Rest kommt ueber den Knopf
   "Mehr anzeigen" (main.js, Abschnitt 4b). */
.courses{padding:20px 8vw 20px;max-width:1440px;margin:0 auto}
.courses h2{font-weight:700;font-size:clamp(26px,3.2vw,46px);max-width:24ch}
.courses .sec-lead{margin-top:16px;color:var(--muted);max-width:56ch;font-size:17px}
.course-grid{margin-top:52px;display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.course-card{background:#FFFFFF;border:1px solid rgba(18,18,26,.12);border-radius:18px;overflow:hidden;box-shadow:0 18px 44px rgba(18,18,26,.10);transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .3s ease-out}
.course-card:hover{transform:translateY(-4px);border-color:rgba(212,162,78,.6)}
.course-card .head{position:relative;height:158px;display:flex;align-items:flex-end;padding:16px 22px;overflow:hidden;background:var(--night-2)}
.course-card .head img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.course-card:hover .head img{transform:scale(1.04)}
.course-card .head::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(9,17,32,.9) 0%,rgba(9,17,32,.4) 54%,rgba(9,17,32,.12) 100%)}
.course-card .head h3{position:relative;z-index:2;color:#fff;font-weight:600;font-size:17px;line-height:1.3;letter-spacing:-.3px;max-width:none}
.course-card .kbadge{position:absolute;top:14px;left:22px;z-index:2;font-size:10px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:#fff;background:rgba(9,17,32,.55);border:1px solid rgba(255,255,255,.3);padding:4px 10px;border-radius:99px;backdrop-filter:blur(3px)}
.course-card .aib{position:absolute;top:14px;right:14px;z-index:2;font-size:9px;color:rgba(255,255,255,.78);background:rgba(0,0,0,.45);padding:3px 8px;border-radius:5px}
.course-card .body{padding:20px 22px 24px}
.course-card .body p{margin:0 0 16px;font-size:14px;line-height:1.55}
.course-card .tags{display:flex;flex-wrap:wrap;gap:8px}
.course-card .tags span{font-size:11.5px;font-weight:600;color:#7A5A1E;background:var(--gold-dim);border-radius:99px;padding:4px 11px}
.courses-more{text-align:center;margin-top:34px}
.courses-more .chev{margin-left:8px;vertical-align:1px;transition:transform .25s ease-out}
.courses-more .chev.open{transform:rotate(180deg)}
@media(max-width:1080px){.course-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.course-grid{grid-template-columns:1fr;gap:20px}}
.faq h2{font-weight:700;font-size:clamp(26px,3.2vw,46px);max-width:24ch}
.faq .sec-lead{margin-top:16px;color:var(--muted);max-width:56ch;font-size:17px}
.faq .rows{margin-top:48px}
.faq .row-item h3,.faq .row-title{font-size:clamp(17px,1.7vw,24px)}
.faq .row-trigger{padding:30px 10px}
.faq .row-panel p{max-width:78ch}
.faq-cta{margin-top:44px}
.card{position:relative;border:1px solid var(--line);border-radius:18px;padding:42px 38px;background:linear-gradient(165deg,var(--night-2),var(--night) 70%);overflow:hidden;transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .3s ease-out;box-shadow:0 24px 60px rgba(4,9,18,.45)}
.card:hover{transform:translateY(-4px);border-color:rgba(94,155,255,.4)}
.card .dots{position:absolute;top:26px;right:26px;opacity:.85}
.card h3{font-weight:600;font-size:24px;max-width:16ch}
.card p{margin-top:14px;color:var(--muted);font-size:15px;max-width:46ch}
.card .status{display:inline-flex;align-items:center;gap:8px;margin-top:26px;font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--azure-soft)}
.card .status i{width:7px;height:7px;border-radius:50%;background:var(--azure);display:block}
.card .golink{display:inline-block;margin-top:18px;font-size:13.5px;font-weight:600;color:var(--ice);text-decoration:none;border-bottom:1.5px solid var(--azure);padding-bottom:2px}
.card .golink:hover,.card .golink:focus-visible{color:var(--azure-soft)}
@media(max-width:880px){.proof-grid{grid-template-columns:1fr}}
.paper-zone .card{background:#FFFFFF;border-color:rgba(18,18,26,.12);box-shadow:0 18px 44px rgba(18,18,26,.10)}
.paper-zone .card:hover{border-color:rgba(94,155,255,.55)}
.paper-zone .card .status{color:var(--footer-navy)}
.paper-zone .card .status i{background:var(--footer-navy)}
.paper-zone .card .golink{color:var(--ink);border-bottom-color:var(--footer-navy)}
.paper-zone .card .golink:hover,.paper-zone .card .golink:focus-visible{color:var(--azure-hover-light)}
.paper-zone .card p{color:var(--content-text)}
.paper-zone .sec-lead{color:var(--content-text)}

/* ============ Kontakt ============ */
.contact{padding:120px 8vw 110px;position:relative;overflow:hidden;
  background:radial-gradient(80% 90% at 85% 20%,rgba(94,155,255,.13) 0%,transparent 55%),linear-gradient(180deg,var(--night) 0%,#0D1830 100%)}
.contact .wrap{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:70px;position:relative}
.contact h2{font-weight:700;font-size:clamp(28px,3.6vw,52px);max-width:15ch}
.contact .intro{margin-top:18px;color:var(--muted);font-size:17px;max-width:44ch}
.contact .langs{margin-top:30px;display:flex;gap:8px;flex-wrap:wrap}
.contact .langs span{border:1px solid var(--line);border-radius:99px;padding:6px 14px;font-size:12.5px;color:var(--muted)}
/* .about stand bis 19.08.2026 auf max-width:44ch. Bei 14px sind das rund
   310px, waehrend die linke Spalte des Kontakt-Grids etwa 570px breit ist —
   der Block wirkte dadurch deutlich zu schmal (Kai gemeldet). Jetzt nutzt er
   die Spaltenbreite; die Zeilenlaenge bleibt durch das 1fr-Grid begrenzt. */
.contact .about{margin-top:34px;padding-top:28px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.contact .about strong{color:var(--ice)}

.form{display:flex;flex-direction:column;gap:16px}
.f-field{display:flex;flex-direction:column;gap:7px}
.form label{font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.form input,.form textarea{background:var(--night-2);border:1px solid var(--line);border-radius:12px;color:var(--ice);font-family:'Archivo',sans-serif;font-size:15px;padding:15px 18px;width:100%;caret-color:var(--azure);transition:border-color .2s ease-out}
.form input::placeholder,.form textarea::placeholder{color:#5F7495}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--azure)}
.form textarea{min-height:130px;resize:vertical}
.f-field.invalid input,.f-field.invalid textarea{border-color:var(--err-border);background:rgba(224,92,92,.06)}
.hp-field{position:absolute;left:-9999px;top:-9999px;opacity:0;pointer-events:none}
.form-status{border-radius:12px;padding:13px 16px;font-size:14px;display:none}
.form-status.ok{display:block;background:rgba(91,201,143,.12);border:1px solid rgba(91,201,143,.4);color:#A8E8C6}
.form-status.err{display:block;background:rgba(224,92,92,.12);border:1px solid rgba(224,92,92,.4);color:#FFB4B4}

/* Custom-Dropdown "Ihr Anliegen" (natives <select>-Popup ist auf macOS
   nicht per CSS stylbar — Button + Listbox mit ARIA-Rollen stattdessen) */
.dd{position:relative}
.dd-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--night-2);border:1px solid var(--line);border-radius:12px;color:var(--ice);font-family:'Archivo',sans-serif;font-size:15px;padding:15px 18px;cursor:pointer;text-align:left;transition:border-color .2s ease-out}
.dd-btn:hover,.dd-btn:focus-visible{border-color:var(--azure)}
.dd-btn .chev{width:16px;height:16px;flex:none;stroke:var(--muted);stroke-width:2;fill:none;transition:transform .2s ease-out}
.dd.open .dd-btn .chev,.chev.open{transform:rotate(180deg)}
.dd-list{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:20;background:var(--night-2);border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:0 20px 44px rgba(4,9,18,.5);opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity .18s ease-out,transform .18s ease-out;max-height:280px;overflow-y:auto}
.dd.open .dd-list{opacity:1;pointer-events:auto;transform:none}
.dd-list [role="option"]{padding:11px 14px;border-radius:8px;font-size:14.5px;cursor:pointer;color:var(--ice)}
.dd-list [role="option"]:hover,.dd-list [role="option"][aria-selected="true"]{background:var(--azure-dim);color:var(--azure-soft)}

.privacy-row{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--muted)}
.privacy-row input{width:auto;flex:none;margin-top:3px;accent-color:var(--azure)}
.privacy-row a{color:var(--azure-soft);text-decoration:underline}
.form .btn{align-self:flex-start;margin-top:6px}
@media(max-width:900px){.contact .wrap{grid-template-columns:1fr}}

/* ============ Footer ============ */
footer{border-top:1px solid var(--line);padding:36px 8vw;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);background:var(--footer-navy)}
footer .f-left{display:flex;flex-direction:column;gap:6px;max-width:60ch}
footer .f-left .lockup{margin-bottom:8px}
footer a{color:var(--muted);text-decoration:none}
footer a:hover,footer a:focus-visible{color:var(--ice)}
footer .f-links{display:flex;flex-wrap:wrap;gap:8px 18px;align-self:flex-start}
footer .f-links a{white-space:nowrap}
footer .f-links a:not(:last-child)::after{content:"";display:inline-block;width:0}
.footer-updated{color:#5F7495}

/* ============ Cookie-Consent (Popup-Banner) ============ */
.cc-backdrop{position:fixed;inset:0;z-index:90;background:rgba(4,9,18,.6);opacity:0;pointer-events:none;transition:opacity .3s ease-out}
body.cc-open .cc-backdrop{opacity:1;pointer-events:auto}
.cc-modal{position:fixed;left:50%;bottom:24px;z-index:91;width:min(460px,92vw);background:var(--night-2);border:1px solid var(--line);border-radius:20px;padding:28px;box-shadow:0 30px 70px rgba(4,9,18,.55);transform:translate(-50%,24px);opacity:0;pointer-events:none;transition:opacity .3s ease-out,transform .3s cubic-bezier(.16,1,.3,1)}
body.cc-open .cc-modal{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.cc-icon{width:40px;height:40px;border-radius:12px;background:var(--azure-dim);color:var(--azure-soft);display:grid;place-items:center;margin-bottom:14px}
.cc-modal h2{font-size:19px;font-weight:700}
.cc-text{margin-top:10px;font-size:13.5px;color:var(--muted);line-height:1.6}
.cc-text a{color:var(--azure-soft);text-decoration:underline}
.cc-cats{display:none;margin-top:18px;flex-direction:column;gap:12px}
.cc-modal.show-cats .cc-cats{display:flex}
.cc-cat{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:12px 0;border-top:1px solid var(--line)}
.cc-cat b{font-size:13.5px;color:var(--ice)}
.cc-cat p{margin-top:4px;font-size:12px;color:var(--muted);max-width:32ch}
.cc-switch{flex:none;position:relative;display:inline-block;width:38px;height:22px}
.cc-switch input{opacity:0;width:100%;height:100%;position:absolute;margin:0;cursor:pointer}
.cc-switch .tr{position:absolute;inset:0;background:var(--line);border-radius:99px;transition:background .2s ease-out}
.cc-switch .tr::before{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;background:var(--ice);border-radius:50%;transition:transform .2s ease-out}
.cc-switch input:checked + .tr{background:var(--azure)}
.cc-switch input:checked + .tr::before{transform:translateX(16px)}
.cc-switch input:disabled + .tr{opacity:.6}
.cc-btns{margin-top:20px;display:flex;flex-wrap:wrap;gap:10px}
.cc-btn-ghost{background:none;border:1px solid var(--line);color:var(--muted);font-family:'Archivo',sans-serif;font-size:13px;font-weight:600;padding:11px 18px;border-radius:99px;cursor:pointer;transition:border-color .2s ease-out,color .2s ease-out}
.cc-btn-ghost:hover,.cc-btn-ghost:focus-visible{border-color:var(--azure);color:var(--ice)}
.cc-btns .btn{font-size:13px;padding:11px 18px}
@media(max-width:520px){.cc-modal{bottom:0;left:0;right:0;transform:translateY(100%);border-radius:20px 20px 0 0;width:100%}body.cc-open .cc-modal{transform:translateY(0)}}

/* ============ Legal-Pages (Impressum, Datenschutz, Barrierefreiheit) ============
   Bewusst NUR EINE Breiten-Ebene: alle Content-Elemente (Lead, Absätze,
   Listen, Tabelle, Fußnote) nutzen ohne eigenes max-width die volle
   Breite von .legal-main .container (1040px, zentriert via margin:0
   auto). Frühere Zwischenlösung mit einer engeren zweiten Spaltenbreite
   (--legal-col, zuerst 82ch, dann fix 656px) wieder verworfen: das
   Ergebnis wirkte gegenüber der von Kai bereits bestätigten
   1040px-Containerbreite zu schmal UND lag als linksbündiger Block
   sichtbar unzentriert im breiteren Container (rechts mehr Leerraum als
   links). Container selbst ist bereits zentriert — mit nur einer
   Breiten-Ebene kann nichts mehr "links hängen bleiben" oder gegenüber
   dem Container auseinanderlaufen. */
body.legal-page{background:var(--paper);color:var(--ink)}
.legal-main{padding:150px 8vw 100px;background:var(--paper)}
.legal-main .container{max-width:1040px;margin:0 auto}
.eyebrow{display:inline-block;font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--azure-hover-light);margin-bottom:14px}
.legal-main h1{font-weight:700;font-size:clamp(30px,4vw,46px);color:var(--ink)}
.legal-main .lead{margin-top:18px;font-size:17px;color:var(--content-text)}
.legal-main h2{margin-top:44px;margin-bottom:14px;font-size:22px;font-weight:700;color:var(--ink)}
.legal-main h3{margin-top:26px;margin-bottom:10px;font-size:17px;font-weight:600;color:var(--ink)}
.legal-main p{margin-bottom:14px;color:var(--content-text)}
.legal-main ul{margin:0 0 14px 22px;color:var(--content-text)}
.legal-main li{margin-bottom:8px}
.legal-main a{color:var(--azure-hover-light);text-decoration:underline}
.legal-main table{width:100%;border-collapse:collapse;margin:18px 0 22px;font-size:14px}
.legal-main th,.legal-main td{text-align:left;padding:10px 12px;border-bottom:1px solid rgba(18,18,26,.14);color:var(--content-text)}
.legal-main th{color:var(--ink);font-weight:600}
.legal-main code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;background:rgba(18,18,26,.06);padding:1px 6px;border-radius:5px}
.placeholder-mark{background:#FEF3C7;color:#92400E;padding:1px 8px;border-radius:6px;font-weight:600;font-size:.92em}
.divider-note{margin-top:36px;padding-top:20px;border-top:1px solid rgba(18,18,26,.14);font-size:13px;color:#5F6B80}
.legal-header{background:var(--night)}
.legal-header header{position:static;background:none;backdrop-filter:none;border-bottom:none}

/* ============ Reveal / Stagger (keine Inline-Styles, CSP style-src 'self') ============
   Ohne JavaScript (bzw. bevor js-init.js geladen hat) bleibt .reveal
   immer sichtbar (opacity:1) — erst die synchron im <head> geladene
   assets/js/js-init.js setzt die Klasse "js" auf <html>, die das
   Ausblenden überhaupt erst aktiviert. So gibt es weder einen Flash-of-
   Unstyled-Content noch für Nutzer ohne JS dauerhaft unsichtbaren
   Content (ein CSS-only-<noscript>-Fallback wäre wegen des strikten
   CSP-Headers style-src 'self' ohnehin nicht zuverlässig möglich — jedes
   Inline-<style> würde ebenfalls blockiert). */
@media (prefers-reduced-motion:no-preference){
  html.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
  html.js .reveal.vis{opacity:1;transform:none}
  html.js .reveal.d0{transition-delay:0ms}
  html.js .reveal.d1{transition-delay:80ms}
  html.js .reveal.d2{transition-delay:160ms}
  html.js .reveal.d3{transition-delay:240ms}
  html.js .reveal.d4{transition-delay:320ms}
}