/* ALUR Landingpage · Designsystem 5.0 (Brand Guide). Werte aus marke/alur_tokens.css (gleiche Werte wie in Paper), Maße aus
   Paper „ALUR · Marke 5.0“, Seite „11 · Webseite“. Schrift Schibsted Grotesk, selbst gehostet (Brand Guide „Schrift“). Kapitel oben und unten
   128 px Luft (Brand Guide, „Hell und Dunkel, Raster, Form“). Bewegung nach Brand Guide „Bewegung“: nur Deckkraft und Lage bis 16 px,
   Auftauchen über Sichtbarkeit, eine Szene je Bildschirm (Einstieg), bei reduzierter Bewegung sofort der Endzustand. */
@font-face { font-family: "Schibsted Grotesk"; src: url("../marke/fonts/SchibstedGrotesk-latin.woff2") format("woff2"); font-weight: 400 900; font-display: swap; 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+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Schibsted Grotesk"; src: url("../marke/fonts/SchibstedGrotesk-latin-ext.woff2") format("woff2"); font-weight: 400 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --schrift: "Schibsted Grotesk", Arial, sans-serif;
  --t950: var(--alur-tanne-950); --t700: var(--alur-tanne-700); --t500: var(--alur-tanne-500); --t300: var(--alur-tanne-300); --t100: var(--alur-tanne-100);
  --amber: var(--alur-amber); --weiss: #FFFFFF; --papier: var(--alur-papier); --sand: var(--alur-sand); --stein: var(--alur-stein);
  --linie-dunkel: rgba(255, 255, 255, .12);
  --rand: 80px; --inhalt: 1280px;
  --luft: 128px;
  --kurz: 160ms; --mittel: 280ms; --lang: 480ms;
  --ankommen: cubic-bezier(0.16, 1, 0.3, 1); --wechseln: cubic-bezier(0.65, 0, 0.35, 1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 0; }
body { margin: 0; background: var(--weiss); color: var(--t700); font: 400 18px/1.5 var(--schrift); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; text-underline-offset: 4px; }
h1, h2, h3, p, dl, dd, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--alur-amber-700); outline-offset: 3px; border-radius: 2px; }
.dunkel :focus-visible, .hero :focus-visible { outline-color: var(--amber); }
[hidden] { display: none !important; }
.zum-inhalt { position: absolute; left: 16px; top: -60px; z-index: 50; background: var(--weiss); color: var(--t950); padding: 10px 16px; border-radius: 4px; }
.zum-inhalt:focus { top: 16px; }

/* Rahmen und Kapitel */
.rahmen { max-width: calc(var(--inhalt) + 2 * var(--rand)); margin-inline: auto; padding-inline: var(--rand); }
.kapitel { padding-block: var(--luft); }
.papier { background: var(--papier); }
.dunkel { background: var(--t950); color: var(--t100); }
h2 { font: 600 36px/42px var(--schrift); letter-spacing: -0.02em; color: var(--t950); text-wrap: balance; }
p, li, figcaption, dd { text-wrap: pretty; }
main p { text-wrap: balance; }
.satz { display: block; }
h1, h3, .einleitung, .einleitung-schmal, .beispiele-schluss p, .hero-lead, .aufruf-text, .reiter-titel { text-wrap: balance; }
.dunkel h2 { color: var(--weiss); }
.kapitelkopf { display: flex; align-items: flex-end; gap: 20px; padding-bottom: 24px; }
.kapitelzahl { font: 500 88px/76px var(--schrift); letter-spacing: -0.04em; color: var(--t100); }
.etikett { font: 500 12px/16px var(--schrift); letter-spacing: .1em; text-transform: uppercase; color: var(--t500); padding-bottom: 8px; }
.kapitelkopf-dunkel .kapitelzahl { color: var(--t700); }
.kapitelkopf-dunkel .etikett { color: var(--t300); }
.text-gross { font-size: 18px; line-height: 28px; }
.text-mittel { font-size: 17px; line-height: 26px; }
.text-kompakt { font-size: 16px; line-height: 24px; }
.einleitung { max-width: 640px; padding-top: 18px; padding-bottom: 40px; }
.einleitung-schmal { max-width: 640px; padding-top: 18px; }
.breit-760 { max-width: 760px; }
.kennung { font: 400 12px/16px var(--schrift); letter-spacing: .1em; text-transform: uppercase; color: var(--t500); }
.kennung-dunkel { color: var(--t300); text-align: right; padding-top: 14px; font-weight: 500; }

/* Knöpfe (Klickfläche ab 44 px) */
.knopf-amber, .knopf-weiss, .knopf-rand, .knopf-rand-dunkel { display: inline-flex; align-items: center; gap: 10px; border: 0; white-space: nowrap; transition: transform var(--kurz) var(--ankommen), background-color var(--kurz) linear, box-shadow var(--mittel) var(--ankommen); }
.knopf-amber { background: var(--amber); color: var(--t950); font: 500 15px/18px var(--schrift); padding: 13px 22px; border-radius: 4px; min-height: 44px; }
.knopf-amber:hover { background: var(--alur-amber-300); }
.knopf-amber:disabled { opacity: .45; cursor: default; }
.knopf-weiss { background: var(--weiss); color: var(--t950); font: 500 17px/22px var(--schrift); height: 72px; padding-inline: 30px; border-radius: 6px; box-shadow: 0 16px 32px -14px rgba(29, 41, 32, .45); }
.knopf-weiss:hover { box-shadow: 0 20px 36px -14px rgba(29, 41, 32, .55); }
.knopf-rand { background: transparent; color: var(--weiss); border: 1px solid rgba(255, 255, 255, .6); border-radius: 4px; font: 400 15px/18px var(--schrift); padding: 12px 16px; min-height: 44px; }
.knopf-rand:hover { background: rgba(255, 255, 255, .08); }
.knopf-rand-dunkel { background: transparent; color: var(--t950); border: 1px solid var(--t100); border-radius: 4px; font: 500 15px/20px var(--schrift); padding: 12px 18px; min-height: 48px; }
.knopf-amber:active, .knopf-weiss:active, .knopf-rand:active { transform: translateY(1px); }
.aufruf-zeile { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.aufruf-zusatz { font-size: 14px; line-height: 20px; }

/* Kopfzeile */
.kopfzeile { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; height: 84px; max-width: var(--inhalt); margin-inline: auto; border-bottom: 1px solid rgba(255, 255, 255, .18); }
.kopf-logo { display: block; }
.kopf-logo img { width: 150px; height: 24px; }
.navigation { display: flex; align-items: center; gap: 28px; }
.navigation > a { color: var(--weiss); font-size: 15px; line-height: 18px; text-decoration: none; padding-block: 13px; }
.navigation > a:hover { text-decoration: underline; }
.sprache { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; padding: 4px 10px; font-size: 13px; line-height: 16px; letter-spacing: .06em; color: rgba(255, 255, 255, .4); }
.sprache [aria-current] { color: var(--weiss); font-weight: 600; }
.sprache a { color: rgba(255, 255, 255, .7); text-decoration: none; padding: 6px 2px; margin: -6px 0; }
.sprache a:hover { color: var(--weiss); }
.menue-knopf { display: none; }
.kopfzeile-hell { border-bottom-color: var(--t100); padding-inline: 0; }
.navigation-schlicht a { color: var(--t950); font-size: 15px; text-decoration: none; padding: 12px 0; display: inline-block; }
.navigation-schlicht a:hover { text-decoration: underline; }

/* 01 Einstieg */
.hero { position: relative; overflow: hidden; background: var(--t950); color: var(--t100); padding-inline: var(--rand); min-height: max(720px, min(100svh, 900px)); display: flex; flex-direction: column; }
.lichtstrom { position: absolute; inset: 0 auto 0 0; width: max(100%, 1458px); height: 100%; pointer-events: none; }
.hero-einlauf { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, #1D2920 42%, rgba(29, 41, 32, .97) 46%, rgba(29, 41, 32, .88) 50%, rgba(29, 41, 32, .7) 55%, rgba(29, 41, 32, .42) 61%, rgba(29, 41, 32, .15) 68%, rgba(29, 41, 32, 0) 75%); }
.hero .kopfzeile { width: 100%; }
.hero-buehne { position: relative; z-index: 2; flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 440px; align-items: center; column-gap: 64px; max-width: var(--inhalt); width: 100%; margin-inline: auto; padding-block: 48px 64px; }
.hero-text { max-width: 780px; container-type: inline-size; }
.hero-etikett { display: flex; align-items: baseline; gap: 14px; padding-bottom: 20px; font: 500 12px/16px var(--schrift); letter-spacing: .1em; text-transform: uppercase; color: var(--t300); }
.hero-nr { color: var(--amber); font-size: 13px; letter-spacing: 0; }
/* Titel wächst bis 56 px und passt immer in seine Spalte (Faktor = Breite der längeren Zeile je px Schrift), mit 64 px Luft zur Ansicht */
.hero h1 { font: 600 clamp(40px, 100cqi / 13.9, 56px)/1.07 var(--schrift); letter-spacing: -0.03em; color: var(--weiss); }
.hero h1:lang(en) { font-size: clamp(40px, 100cqi / 12.95, 56px); }
.hero-lead { max-width: 520px; padding-top: 26px; font-size: 18px; line-height: 27px; color: var(--t100); }
.hero .aufruf-zeile { padding-top: 36px; }
.hero .aufruf-zusatz { color: var(--t300); }

/* Ansicht im Einstieg: Eingänge, Weg, KI, Wissensdatenbank */
.hero-ansicht { display: flex; flex-direction: column; align-items: center; width: 440px; font-size: 12px; line-height: 16px; }
.eingaenge { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.eingang { display: flex; align-items: center; justify-content: center; height: 32px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .12); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); color: var(--weiss); font: 600 11px/14px var(--schrift); letter-spacing: .1em; text-transform: uppercase; }
.wege { width: 100%; height: 56px; display: block; overflow: visible; }
.wege path, .weg-ergebnis path { fill: none; stroke: var(--amber); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.weg-ergebnis { width: 2px; height: 32px; display: block; overflow: visible; }
.ki-knoten { display: flex; align-items: center; gap: 10px; height: 44px; padding-inline: 20px; border-radius: 999px; background: rgba(220, 154, 60, .16); border: 1px solid var(--amber); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); font-size: 14px; line-height: 18px; color: var(--t100); white-space: nowrap; }
.ki-knoten strong { color: var(--weiss); font-weight: 600; }
.ki-punkt { width: 8px; height: 8px; border-radius: 999px; background: var(--amber); flex: none; }

.glas-hell, .glas-dunkel { display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; }
.glas-hell { width: 100%; background: rgba(255, 255, 255, .7); border: 1px solid rgba(255, 255, 255, .6); backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); box-shadow: 0 32px 64px -28px rgba(0, 0, 0, .55); color: var(--t950); }
.glas-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 18px; }
.glas-hell .glas-kopf { border-bottom: 1px solid rgba(29, 41, 32, .1); }
.glas-zeile { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 18px; }
.glas-hell .glas-zeile { border-bottom: 1px solid rgba(29, 41, 32, .1); }
.glas-spalte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.glas-titel { font-size: 14px; line-height: 18px; }
.glas-titel.stark { font-weight: 600; }
.glas-neben { font-size: 12px; line-height: 15px; color: var(--t700); }
.glas-neben.klein { font-size: 11px; line-height: 14px; }
.glas-wert { font-size: 14px; line-height: 18px; font-weight: 600; white-space: nowrap; }
.glas-wert-leise { font-size: 12px; line-height: 18px; color: var(--t700); white-space: nowrap; }
.glas-hell .markiert { background: rgba(255, 255, 255, .55); border-left: 3px solid var(--amber); padding-left: 15px; }
.mit-punkt { display: inline-flex; align-items: center; gap: 6px; }
.mit-punkt::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--amber); flex: none; }
.punkt-leise { display: inline-flex; align-items: center; gap: 8px; }
.punkt-leise::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .4); flex: none; }
.glas-fuss { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px 13px; }

.glas-dunkel { position: absolute; width: 430px; background: rgba(29, 41, 32, .64); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(24px) saturate(130%); -webkit-backdrop-filter: blur(24px) saturate(130%); box-shadow: 0 32px 64px -28px rgba(10, 16, 12, .6); color: var(--weiss); }
.glas-dunkel .glas-kopf { padding: 14px 18px 12px; }
.glas-dunkel .glas-zeile, .glas-dunkel .glas-fuss, .glas-stimme { border-top: 1px solid rgba(255, 255, 255, .12); }
.glas-dunkel .glas-neben { color: rgba(255, 255, 255, .62); }
.glas-dunkel .glas-fuss .glas-neben { color: rgba(255, 255, 255, .72); }
.glas-dunkel .glas-wert { font-size: 13px; line-height: 16px; }
.glas-dunkel .glas-fuss .glas-wert { font-size: 12px; line-height: 14px; }
.glas-dunkel .markiert { background: rgba(220, 154, 60, .1); border-left: 3px solid var(--amber); padding-left: 15px; }
.glas-wert.amber { color: var(--amber); font-weight: 400; }
.glas-etikett { font: 600 11px/14px var(--schrift); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.glas-stimme { display: flex; gap: 12px; padding: 12px 18px; }
.kuerzel { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 999px; background: rgba(255, 255, 255, .14); font: 600 11px/14px var(--schrift); flex: none; }
.glas-satz { font-size: 14px; line-height: 20px; }

/* Fotos im Archivton der Seite: schwarzweiß wie in Paper */
.foto { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%) contrast(106%); }

/* 02 Warum jetzt */
.lage-raster { display: grid; grid-template-columns: 640px minmax(0, 1fr); gap: 80px; align-items: start; padding-bottom: 56px; }
.lage-text h2 { max-width: 640px; }
.lage-text .text-gross { padding-top: 24px; }
.lage-foto { height: 400px; border-radius: 6px; overflow: hidden; }
.filtersatz { border-top: 1px solid var(--t100); padding-top: 40px; padding-left: calc(100% - 820px); text-align: right; text-wrap: balance; font: 500 36px/44px var(--schrift); letter-spacing: -0.02em; color: var(--t950); }


/* 03 Beispiele mit Reitern */
.reiterfeld { padding-top: 16px; }
.reiterleiste { display: flex; align-items: flex-end; justify-content: space-between; gap: 64px; border-bottom: 1px solid var(--t100); }
.reiter-liste { display: flex; flex: 1; justify-content: space-between; gap: 40px; } /* die vier Reiter nutzen die ganze Breite bis zu den Pfeilen */
.reiter { display: flex; flex-direction: column; gap: 6px; width: auto; flex: 0 0 auto; padding: 0 0 16px; margin-bottom: -1px; background: none; border: 0; border-bottom: 2px solid transparent; text-align: left; color: var(--t500); transition: color var(--kurz) linear, border-color var(--mittel) var(--wechseln); }
.reiter:hover { color: var(--t700); }
.reiter-etikett { font: 600 11px/14px var(--schrift); letter-spacing: .12em; text-transform: uppercase; }
.reiter-titel { font-size: 17px; line-height: 22px; white-space: nowrap; } /* Zeilen sind fest gesetzt; der aktive Titel wird fett und darf dabei nicht anders umbrechen */
.reiter[aria-selected="true"] { border-bottom-color: var(--t950); color: var(--t950); }
.reiter[aria-selected="true"] .reiter-etikett { color: var(--t700); }
.reiter[aria-selected="true"] .reiter-titel { font-weight: 600; }
.reiter-pfeile { display: flex; gap: 8px; padding-bottom: 16px; }
.pfeilknopf { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--t100); background: var(--weiss); color: var(--t950); transition: border-color var(--kurz) linear; }
.pfeilknopf:hover { border-color: var(--t950); }
.fall { display: grid; grid-template-columns: 388px minmax(0, 820px); gap: 72px; align-items: start; padding-top: 44px; }
.fall:focus-visible { outline-offset: 8px; }
.fall-text { display: flex; flex-direction: column; gap: 22px; padding-top: 12px; }
.fall-text h3 { font: 600 24px/30px var(--schrift); letter-spacing: -0.01em; color: var(--t950); }
.fall-liste { border-top: 1px solid var(--t100); }
.fall-liste > div { display: flex; gap: 16px; padding-block: 12px; border-bottom: 1px solid var(--t100); }
.fall-liste dt { flex: none; width: 96px; font: 600 11px/20px var(--schrift); letter-spacing: .1em; text-transform: uppercase; color: var(--t500); }
.fall-liste dd { font-size: 15px; line-height: 20px; color: var(--t950); }
.fall-bild { position: relative; height: 560px; }
.fall-foto { height: 100%; border-radius: 6px; overflow: hidden; }
.fall-bild .glas-dunkel { left: -36px; top: 268px; }
.beispiele-schluss { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding-top: 40px; }
.beispiele-schluss .text-mittel { max-width: 640px; }
.stark-dunkel { color: var(--t950); }

/* 04 Vorgehen */
.schritte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--alur-tanne); }
.schritt { display: flex; flex-direction: column; padding: 18px 20px 20px; border-radius: 6px; color: var(--t500); }
.schritt-nr { font: 500 13px/16px var(--schrift); text-transform: uppercase; }
.schritt-name { padding-top: 16px; font: 500 22px/28px var(--schrift); }
.schritt-text { padding-top: 6px; font-size: 15px; line-height: 22px; }
.schritt-aktiv { background: var(--t950); }
.schritt-aktiv .schritt-nr { color: rgba(255, 255, 255, .64); }
.schritt-aktiv .schritt-name { color: var(--weiss); }
.schritt-aktiv .schritt-text { color: rgba(255, 255, 255, .78); }
.vorgehen-bild { position: relative; margin-top: 48px; }
.vorgehen-foto { height: 440px; border-radius: 6px; overflow: hidden; }
.glas-workshop { left: 32px; bottom: 60px; width: 420px; }
.bildzeile { display: flex; justify-content: space-between; gap: 24px; padding-top: 12px; font-size: 13px; line-height: 16px; color: var(--t700); }
.bildzeile span:last-child { white-space: nowrap; }

/* 05 Grundsätze */
.grundsatz-liste { border-top: 1px solid var(--linie-dunkel); }
.grundsatz { display: grid; grid-template-columns: 80px minmax(0, 600px) minmax(0, 520px); gap: 40px; padding-block: 24px; border-bottom: 1px solid var(--linie-dunkel); align-items: start; }
.grundsatz-nr { font: 500 13px/36px var(--schrift); color: var(--t300); }
.grundsatz-satz { font: 500 30px/36px var(--schrift); letter-spacing: -0.02em; color: var(--weiss); text-wrap: balance; }
.grundsatz-text { padding-top: 5px; font-size: 16px; line-height: 25px; color: var(--t100); }

/* 06 Gründer */
.gruender-raster { display: grid; grid-template-columns: 733px minmax(0, 515px); gap: 32px; align-items: start; }
.personen { display: grid; grid-template-columns: repeat(2, 354px); gap: 24px; }
.person { display: flex; flex-direction: column; }
.portraet { aspect-ratio: 354 / 400; border-radius: 6px; overflow: hidden; background: var(--sand); margin-bottom: 18px; }
.person-name { font: 600 18px/22px var(--schrift); color: var(--t950); }
.person-rolle { padding-top: 6px; padding-bottom: 12px; font: 600 11px/14px var(--schrift); letter-spacing: .1em; text-transform: uppercase; color: var(--t500); }
.person-text { font-size: 14px; line-height: 21px; }
.person-bei { padding-top: 8px; font-size: 14px; line-height: 21px; color: var(--t950); }
.gruender-text .text-mittel, .gruender-text .text-kompakt { padding-top: 18px; }
.team { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--t100); }
.team-hinweis { padding-top: 6px; font-size: 14px; line-height: 21px; color: var(--t500); }
.rollen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding-top: 20px; list-style: none; }
.rolle { display: flex; flex-direction: column; background: var(--papier); border-radius: 6px; padding: 20px; }
.rolle-icon { color: var(--alur-tanne); margin-bottom: 14px; }
.rolle h3 { font: 600 18px/22px var(--schrift); color: var(--t950); }
.rolle p { padding-top: 6px; font-size: 14px; line-height: 21px; }

/* 07 Zusagen */
.zusagen-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 80px; }
.zusage { display: flex; flex-direction: column; gap: 12px; padding: 28px 0 32px; border-top: 1px solid var(--linie-dunkel); }
.zusage-nr { font: 500 13px/16px var(--schrift); color: var(--t300); }
.zusage h3 { font: 600 24px/30px var(--schrift); letter-spacing: -0.02em; color: var(--weiss); }
.zusage p { color: var(--t100); }
.grenzen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 80px; padding-top: 32px; }
.grenze ul { display: flex; flex-direction: column; gap: 14px; padding-top: 6px; }
.grenze li { font-size: 17px; line-height: 26px; color: var(--weiss); }
.grenze .etikett { display: block; padding-bottom: 14px; color: var(--t300); }
.grenze .etikett-amber { color: var(--amber); }

/* 08 Was Sie mitbringen */
.mitbringen-raster { display: grid; grid-template-columns: 560px minmax(0, 1fr); gap: 80px; align-items: center; }
.mitbringen-foto { height: 400px; border-radius: 6px; overflow: hidden; }
.mitbringen-text h2 { max-width: 640px; }
.mitbringen-text .text-gross { padding-top: 18px; max-width: 640px; }

/* 09 Aufruf */
.aufruf { background: var(--amber); color: var(--t950); display: flex; flex-direction: column; align-items: center; gap: 36px; padding: 104px var(--rand) 112px; text-align: center; }
.aufruf-kopf { display: flex; align-items: flex-end; gap: 20px; }
.aufruf-kopf .kapitelzahl { color: rgba(29, 41, 32, .18); }
.aufruf-kopf .etikett { color: var(--t950); }
.aufruf h2 { font: 600 56px/60px var(--schrift); letter-spacing: -0.03em; max-width: 900px; }
.aufruf-text { max-width: 620px; font-size: 19px; line-height: 29px; }
.aufruf .aufruf-zeile { gap: 28px; justify-content: center; padding-top: 8px; }

/* Fuß */
.fuss { display: flex; justify-content: space-between; align-items: center; gap: 24px; max-width: calc(var(--inhalt) + 2 * var(--rand)); margin-inline: auto; padding: 28px var(--rand) 40px; font-size: 13px; line-height: 16px; color: var(--t700); }
.fuss-links { display: flex; align-items: center; gap: 20px; }
.fuss-links img { width: 123px; height: 20px; flex: none; }
.fuss a { text-decoration: none; padding-block: 14px; }
.fuss a:hover { text-decoration: underline; }

/* Rechtliche Seiten */
.rechtliches { color: var(--t700); }
.rechtliches .kopfzeile { padding-inline: 0; margin-inline: var(--rand); }
@media (min-width: 1440px) { .rechtliches .kopfzeile { margin-inline: auto; } }
.rechtlich { max-width: calc(var(--inhalt) + 2 * var(--rand)); margin-inline: auto; padding: 96px var(--rand) var(--luft); }
.rechtlich .wrap { max-width: 760px; padding: 0; }
.rechtlich .eyebrow { font: 500 12px/16px var(--schrift); letter-spacing: .1em; text-transform: uppercase; color: var(--t500); padding-bottom: 12px; }
.rechtlich h1 { font: 600 56px/60px var(--schrift); letter-spacing: -0.03em; color: var(--t950); }
.rechtlich h2 { font-size: 24px; line-height: 30px; padding-top: 40px; padding-bottom: 8px; }
.rechtlich p { font-size: 17px; line-height: 27px; padding-top: 12px; }
.rechtlich .lead { font-size: 19px; line-height: 29px; padding-top: 24px; }
.ph { background: var(--papier); padding-inline: 4px; border-radius: 2px; }

/* Termindialog */
.termin { width: min(920px, calc(100vw - 32px)); max-height: calc(100svh - 32px); padding: 0; border: 0; border-radius: 16px; background: var(--weiss); color: var(--t700); box-shadow: 0 48px 96px -32px rgba(0, 0, 0, .6); overflow: auto; }
.termin[open] { display: grid; grid-template-columns: 340px minmax(0, 1fr); }
.termin::backdrop { background: rgba(29, 41, 32, .6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.termin-links { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; background: var(--sand); padding: 36px 32px 32px; min-height: 480px; }
.termin-oben { display: flex; flex-direction: column; gap: 10px; }
.termin-oben img { width: 110px; height: 18px; margin-bottom: 12px; }
.etikett-mikro { font: 600 11px/14px var(--schrift); letter-spacing: .12em; text-transform: uppercase; color: var(--t500); }
.termin h2 { font: 500 28px/32px var(--schrift); letter-spacing: -0.02em; color: var(--t950); }
.termin-text { font-size: 15px; line-height: 22px; }
.termin-punkte { display: flex; flex-direction: column; gap: 12px; padding-top: 18px; }
.termin-punkte li { display: flex; align-items: center; gap: 12px; font-size: 15px; line-height: 20px; color: var(--t950); }
.termin-punkte svg { flex: none; fill: none; stroke: var(--alur-tanne); stroke-width: 1.5; }
.termin-rechts { display: flex; flex-direction: column; gap: 22px; padding: 36px 36px 32px; min-width: 0; }
.termin-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.termin-kopf h3 { font: 600 20px/26px var(--schrift); color: var(--t950); }
.termin-kopf p { font-size: 13px; line-height: 18px; color: var(--t500); padding-top: 6px; }
.schliessen { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; border: 0; background: rgba(38, 57, 43, .06); color: var(--t950); flex: none; }
.schliessen:hover { background: rgba(38, 57, 43, .12); }
.termin-ablauf { display: flex; flex-direction: column; flex: 1; }
.termin-ablauf li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding-block: 18px; border-top: 1px solid var(--t100); }
.termin-nr { font: 500 13px/22px var(--schrift); color: var(--t500); }
.termin-ablauf p { font-size: 16px; line-height: 24px; color: var(--t950); }
.termin-fuss { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 20px; border-top: 1px solid var(--t100); margin-top: auto; }
.termin-fuss > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.klein-leise { font-size: 12px; line-height: 16px; color: var(--t500); }
.termin-mail { font: 600 17px/24px var(--schrift); color: var(--t950); text-decoration: none; overflow-wrap: anywhere; }
.termin-mail:hover { text-decoration: underline; }
.termin-fuss .knopf-amber { height: 48px; border-radius: 6px; text-decoration: none; flex: none; }

/* Bewegung (nur mit Skript und ohne reduzierte Bewegung; ohne beides steht sofort der Endzustand) */
@media (prefers-reduced-motion: no-preference) {
  .mit-js .auftauchen { opacity: 0; transform: translateY(16px); transition: opacity var(--lang) var(--ankommen), transform var(--lang) var(--ankommen); transition-delay: calc(var(--i, 0) * 80ms); }
  .mit-js .auftauchen.sichtbar { opacity: 1; transform: none; }
  .mit-js .fall:not([hidden]) { animation: fall-wechsel var(--mittel) var(--wechseln); }
  .mit-js .fall:not([hidden]) .glas-dunkel { animation: glas-ankommen var(--lang) var(--ankommen); }
  .termin[open] { animation: dialog-auf var(--mittel) var(--ankommen); }
  .termin[open]::backdrop { animation: nur-deckkraft var(--mittel) linear; }

  /* Szene im Einstieg, einmal beim Laden (etwa 3 s): Eingänge, Weg der Anfrage, KI-Kontur, Einträge, zuletzt der Widerspruch */
  .mit-js .hero-text > * { animation: auftauchen var(--lang) var(--ankommen) both; }
  .mit-js .hero-text > :nth-child(2) { animation-delay: 80ms; }
  .mit-js .hero-text > :nth-child(3) { animation-delay: 160ms; }
  .mit-js .hero-text > :nth-child(4) { animation-delay: 240ms; }
  .mit-js .eingang { animation: auftauchen var(--lang) var(--ankommen) both; animation-delay: calc(400ms + var(--i) * 120ms); }
  .mit-js .wege path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: weg 700ms linear 900ms forwards; }
  .mit-js .ki-knoten { animation: auftauchen var(--lang) var(--ankommen) 1500ms both, ki-kontur 1600ms ease-out 1800ms 1; }
  .mit-js .weg-ergebnis path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: weg 320ms linear 2000ms forwards; }
  .mit-js .wissen { animation: auftauchen var(--lang) var(--ankommen) 2250ms both; }
  .mit-js .wissen .glas-zeile, .mit-js .wissen .glas-fuss { animation: nur-deckkraft var(--lang) var(--ankommen) both; animation-delay: calc(2450ms + var(--i) * 180ms); }
  .mit-js .wissen .markiert { animation: auftauchen-seite var(--lang) var(--ankommen) both; animation-delay: 2900ms; }
  .mit-js .hero .kennung { animation: nur-deckkraft var(--lang) linear 3300ms both; }
}
@keyframes auftauchen { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes auftauchen-seite { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@keyframes nur-deckkraft { from { opacity: 0; } to { opacity: 1; } }
@keyframes weg { to { stroke-dashoffset: 0; } }
@keyframes ki-kontur { 0% { box-shadow: 0 0 0 0 rgba(220, 154, 60, .45); } 100% { box-shadow: 0 0 0 14px rgba(220, 154, 60, 0); } }
@keyframes fall-wechsel { from { opacity: 0; } to { opacity: 1; } }
@keyframes glas-ankommen { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes dialog-auf { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-transparency: reduce) {
  .glas-hell { background: #F1EFEA; backdrop-filter: none; }
  .glas-dunkel { background: #2A372D; backdrop-filter: none; }
  .eingang, .ki-knoten { backdrop-filter: none; }
}

/* Laptop bis 1360: Spalten schmaler, gleiche Ordnung */
@media (max-width: 1360px) {
  :root { --rand: 56px; }
  .lage-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
  .fall { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 56px; }
  .gruender-raster { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .personen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grundsatz { grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
  .mitbringen-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
}

/* Reiter wischbar bis 1280 px: darunter passen die vier Titel nicht mehr mit Luft in eine Zeile */
@media (max-width: 1280px) {
  .reiterleiste { flex-direction: column; align-items: stretch; gap: 0; }
  .reiter-liste { min-width: 0; max-width: calc(100% + 2 * var(--rand)); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--rand); margin-inline: calc(-1 * var(--rand)); padding-inline: var(--rand); scrollbar-width: none; }
  .reiterleiste { border-bottom: 0; }
  .reiter-liste { border-bottom: 1px solid var(--t100); }
  .reiter-liste::-webkit-scrollbar { display: none; }
  .reiter { flex: 0 0 auto; width: auto; scroll-snap-align: start; }
  .reiter-liste { justify-content: space-between; gap: 32px; } /* passt die Zeile, verteilt sie sich; sonst wischen */
  .reiter-pfeile { display: none; }
}

/* Tablet bis 1100: Einstieg und zweispaltige Teile untereinander */
@media (max-width: 1100px) {
  :root { --rand: 40px; --luft: 96px; }
  .hero { min-height: 0; }
  .hero-buehne { grid-template-columns: 1fr; gap: 56px; padding-block: 56px 72px; }
  .hero h1, .hero h1:lang(en) { font-size: 48px; line-height: 54px; }
  .hero-ansicht { width: min(524px, 100%); justify-self: start; }
  .lage-raster, .mitbringen-raster { grid-template-columns: 1fr; gap: 40px; }
  .lage-foto, .mitbringen-foto { height: auto; aspect-ratio: 3 / 2; }
  .mitbringen-foto { order: 2; }
  .fall { grid-template-columns: 1fr; gap: 32px; }
  .fall-bild { height: auto; }
  .fall-foto { aspect-ratio: 3 / 2; height: auto; }
  .fall-bild .glas-dunkel { position: relative; left: auto; top: auto; margin: -120px 0 0 24px; width: min(430px, calc(100% - 48px)); }
  .gruender-raster { grid-template-columns: 1fr; gap: 48px; }
  .gruender-text { order: -1; max-width: 640px; }
  .schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grundsatz { grid-template-columns: 1fr; gap: 10px; }
  .grundsatz-nr { line-height: 16px; }
  .zusagen-liste, .grenzen { grid-template-columns: 1fr; column-gap: 0; gap: 0; }
  .grenzen { gap: 40px; }
  .aufruf h2 { font-size: 44px; line-height: 50px; }
}

/* Telefon bis 760: eine Spalte, Menü als Knopf, Reiter wischen */
@media (max-width: 760px) {
  :root { --rand: 20px; --luft: 80px; }
  body { font-size: 16px; }
  h2 { font-size: 28px; line-height: 34px; }
  .kapitelzahl { font-size: 64px; line-height: 56px; }
  .text-gross { font-size: 17px; line-height: 26px; }
  .kopfzeile { height: 68px; flex-wrap: wrap; }
  .kopf-logo { padding-block: 12px; }
  .kopf-logo img { width: 124px; height: 20px; }
  .menue-knopf { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .4); border-radius: 4px; background: none; color: var(--weiss); font-size: 15px; }
  .navigation { display: none; position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 0 20px; background: var(--t950); border-bottom: 1px solid rgba(255, 255, 255, .18); }
  .navigation.offen { display: flex; }
  .navigation > a { padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); font-size: 17px; }
  .navigation .sprache { align-self: flex-start; margin: 16px 0; }
  .navigation .knopf-rand { justify-content: center; }
  .hero h1, .hero h1:lang(en) { font-size: 36px; line-height: 42px; }
  .hero-lead { font-size: 17px; line-height: 26px; }
  .hero-buehne { padding-block: 40px 56px; gap: 40px; }
  .ki-knoten { padding-inline: 14px; font-size: 13px; gap: 8px; }
  .glas-hell .glas-zeile { flex-wrap: wrap; gap: 4px 16px; }
  .glas-dunkel .glas-kopf { flex-wrap: wrap; gap: 2px 12px; }
  .eingang { font-size: 11px; letter-spacing: .06em; }
  .filtersatz { font-size: 24px; line-height: 31px; padding-top: 28px; padding-left: 0; text-align: left; }
  .fall-liste > div { flex-direction: column; gap: 4px; }
  .fall-liste dt { width: auto; }
  .fall-bild .glas-dunkel { margin: -64px 12px 0; width: auto; }
  .beispiele-schluss { flex-direction: column; gap: 16px; }
  .schritte { grid-template-columns: 1fr; gap: 8px; }
  .vorgehen-foto { height: auto; aspect-ratio: 4 / 3; }
  .glas-workshop { position: relative; left: auto; bottom: auto; margin: -64px 12px 0; width: auto; }
  .bildzeile { flex-direction: column; gap: 6px; }
  .grundsatz-satz { font-size: 24px; line-height: 30px; }
  .personen { grid-template-columns: 1fr; gap: 40px; }
  .rollen { grid-template-columns: 1fr; gap: 12px; }
  .rolle { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 16px; }
  .rolle-icon { grid-row: span 2; margin-bottom: 0; }
  .zusage h3 { font-size: 22px; }
  .aufruf { padding: 80px var(--rand); gap: 28px; }
  .aufruf h2 { font-size: 32px; line-height: 38px; }
  .aufruf h2 br { display: none; }
  .aufruf-text { font-size: 17px; line-height: 26px; }
  .aufruf .aufruf-zeile { flex-direction: column; gap: 14px; }
  .knopf-weiss { height: 60px; padding-inline: 24px; }
  .fuss { flex-direction: column; align-items: flex-start; gap: 12px; }
  .fuss-links { flex-direction: column; align-items: flex-start; gap: 12px; }
  .rechtlich { padding-top: 56px; }
  .rechtlich h1 { font-size: 36px; line-height: 42px; }
  .termin[open] { grid-template-columns: 1fr; }
  .termin-links { min-height: 0; padding: 28px 20px 24px; gap: 24px; }
  .termin-links { padding-top: 30px; }
  .termin .schliessen { position: absolute; top: 16px; right: 16px; }
  .termin-rechts { padding: 24px 20px; }
  .termin-fuss { flex-direction: column; align-items: stretch; }
  .termin-fuss .knopf-amber { justify-content: center; }
}