/* =========================================================================
   Selbst-gehostete Schriften (Archivo, Inter) — kein Google-CDN mehr.
   Grund: revDSG/DSGVO (keine Besucher-IP an Google). Subsets: latin + latin-ext.
   ========================================================================= */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/archivo-700-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: 700;
  font-display: swap;
  src: url('fonts/archivo-700-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: 800;
  font-display: swap;
  src: url('fonts/archivo-800-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: 800;
  font-display: swap;
  src: url('fonts/archivo-800-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: 900;
  font-display: swap;
  src: url('fonts/archivo-900-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: 900;
  font-display: swap;
  src: url('fonts/archivo-900-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: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-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: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-600-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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-600-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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/inter-700-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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/inter-700-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;
}

/* Source Serif 4 — selbst gehostet (OFL). Serife fuer die Benchmark-Artikel
   (Ueberschriften + Fliesstext). Kein Google-Fonts-Aufruf → Datenschutz-Versprechen. */
@font-face {
  font-family: 'Source Serif 4'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/sourceserif4-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: 'Source Serif 4'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/sourceserif4-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: 'Source Serif 4'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('fonts/sourceserif4-400-italic-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: 'Source Serif 4'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('fonts/sourceserif4-400-italic-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: 'Source Serif 4'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/sourceserif4-600-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: 'Source Serif 4'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/sourceserif4-600-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: 'Source Serif 4'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/sourceserif4-700-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: 'Source Serif 4'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/sourceserif4-700-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;
}

/* =========================================================================
   ADA — applied-AI boutique
   Minimal-Stylesheet, eng am Stern-Stewart-Original:
   Weiß, Schwarz, viel Leerraum. Rot als Akzent.
   ========================================================================= */

:root {
  --white:  #FFFFFF;
  --ink:    #111111;
  --muted:  #5B5B5B;
  --red:    #ED2839;
  --red-dk: #C81829;
  --grey:   #4A4A4A;   /* Marken-Grau (Banner, ein Angebots-Panel) */
  --red-2:  #8F1420;   /* vierte Farbe: tiefes Rot / Bordeaux */

  /* Kachel-Farben (Angebote, SS-Portfolio-Look) */
  --blue:  #1B2AE0;
  --navy:  #0E2A38;
  --green: #2FA84F;

  --font-display: "Archivo", Arial, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif:   "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-tale:    "Grenze Gotisch", Georgia, serif;

  /* ===== Globales Raster-System (eine Sprache, alle Seiten) =====
     --page-pad   kanonischer Aussenabstand (linke/rechte Hauptkante) — ALLE
                  Container fluchten darauf; --pad ist nur noch ein Alias, damit
                  die ~44 bestehenden var(--pad)-Kanten automatisch mitfluchten.
     --stage-max  breite Editorial-Buehne (Home/Approach, Full-Bleed-Medien).
     --maxwidth   Standard-Inhaltsspalte (Unterseiten, Artikel-Rahmen).
     --measure    Lesespalte ~65–70 Zeichen (Fliesstext bleibt schmal lesbar).
     --col-gap    Spaltenabstand (Gutter) fuer das 12/8-Raster. */
  --stage-max: 1820px;
  --maxwidth: 1240px;
  --page-pad: clamp(24px, 4vw, 72px);
  --pad: var(--page-pad);
  --col-gap: clamp(20px, 2.2vw, 32px);
  --measure: 68ch;
}

/* ------------------------------- Base ------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
/* (Scroll-Snap auf den Pin-Tracks entfernt: scroll-snap-stop:always hat auf den 340vh-
   Tracks den Nutzer am Anfang „festgehalten" — proximity zog beim kleinsten Delta zurueck.
   Smoothness geht vor Blow-through-Schutz; ggf. spaeter sanftere Loesung.) */
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Fliessender Hell/Dunkel-Wechsel beim Scrollen (Basic-Agency-Effekt):
     Sektionen mit [data-bg="dark"] schalten body.page-dark (script.js) —
     der Seitenhintergrund blendet weich um, kein statischer schwarzer Block. */
  transition: background-color 0.9s ease;
}
body.page-dark { background: #0B0B0B; }
h1, h2, h3 { margin: 0; }
p { margin: 0 0 1.4em; }
a { color: inherit; }
::selection { background: var(--ink); color: #fff; }

.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--ink); color: #fff;
  padding: 0.6rem 1rem; z-index: 100;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ===================== Ghost-Header (Locomotive-Stil) =====================
   Transparent, nur Schrift: Brand links, Komma-Navigation mittig, DE/EN +
   "Let's talk" rechts. Farbe kippt auf Weiss, wenn die Seite dunkel wird
   (body.page-dark, Scroll-Dunkelzone). */
.gnav {
  /* Fix oben auf der Seite (scrollt mit dem Inhalt weg, folgt NICHT) —
     liegt transparent über dem Hero-Bild. */
  position: absolute; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(1.2rem, 4vw, 3rem);
  padding: 1.05rem var(--page-pad);
  background: transparent;
  font-size: 0.98rem; line-height: 1.3; color: var(--ink);
  transition: color 0.6s ease;
}
/* Schrift kippt auf Weiss, wenn der aktive Hero-Slide dunkel/satt ist */
body.hero-light .gnav { color: #fff; }
body.hero-light .gnav .menu-btn span { background: #fff; }
.gnav a { color: inherit; text-decoration: none; transition: opacity 0.2s ease; }
.gnav a:hover { opacity: 0.55; }
/* Touch-Ziele: mind. ~44px Trefferflaeche, optische Groesse bleibt (Brief #11).
   Slideshow-Punkte haben ihre 44px bereits ueber .phero-dot::before. */
.gnav-left a, .gnav-right a { display: inline-flex; align-items: center; min-height: 44px; }
.more, .cstud-link, .chk-pill { min-height: 44px; }
.chk-restart, .chk-direct-link { display: inline-flex; align-items: center; min-height: 44px; }
.gnav-left { display: flex; align-items: center; gap: 0.65rem; position: relative; z-index: 3; }
.gnav-brand { font-family: var(--font-display); font-weight: 900; font-size: 1.42rem;
  line-height: 1; letter-spacing: 0.01em; display: inline-flex; align-items: center; }
.gnav-right { display: flex; align-items: center; gap: 1.4rem; white-space: nowrap; position: relative; z-index: 3; }
/* Aufklappmenü (Hamburger) im Header: nutzt die bestehenden
   .menu-btn/.menu-Stile; das Menü klappt unter der Kopfzeile auf. */
/* (Vollbild-Menue-Stile stehen weiter unten; kein Dropdown-Offset mehr noetig.) */
body.menu-open { overflow: hidden; }
body.menu-open .gnav { color: var(--ink); }
body.menu-open .gnav .menu-btn span { background: var(--ink); }
body.menu-open .pbar { opacity: 0; pointer-events: none; } /* Hero-Leiste bei offenem Menue ausblenden */
@media (max-width: 760px) {
  .gnav { flex-wrap: wrap; row-gap: 0.4rem; font-size: 0.9rem; }
}

/* Grosser Slogan zwischen Hero und About (die alte Hero-Headline). */
.home-slogan {
  max-width: var(--stage-max); margin-inline: auto;
  padding: clamp(4.5rem, 11vw, 9rem) var(--page-pad) clamp(1.5rem, 4vw, 3rem);
}
.home-slogan h2 {
  margin: 0; font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(3rem, 9vw, 7.5rem); line-height: 0.92; letter-spacing: -0.015em; color: var(--ink);
}

/* ===================== Pentagram-Hero (Startseite, 1:1) =====================
   Weißer Start → Slideshow mit Dots + Caption; fixe Leiste in der Mitte
   (synct Begriffe zum Slide, klappt Tag-Panel auf, dockt beim Scrollen unten
   an). JS: script.js [data-phero]/#pbar. */
.phero { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: #fff; }
.phero-stage { position: absolute; inset: 0; transition: filter 0.45s ease, transform 0.45s ease; }
body.pbar-open .phero-stage { filter: blur(18px) saturate(0.92); transform: scale(1.02); }
.phero-slide { position: absolute; inset: 0; margin: 0; opacity: 0; z-index: 0; transition: opacity 0.7s ease-out; }
/* Alte Slide bleibt UNTER der neuen voll deckend, bis die neue eingeblendet ist
   (kein gleichzeitiger Opacity-Dip → kein dunkler/leerer Zwischenzustand). */
.phero-slide.is-prev { opacity: 1; z-index: 1; transition: none; }
.phero-slide.is-active { opacity: 1; z-index: 2; }
/* Foto füllt den ganzen Screen (cover); Schärfe kommt aus den hochauflösenden
   Bildern, nicht aus zu starkem Beschnitt. object-position steuerbar je Slide. */
.phero-slide--img { overflow: hidden; }
.phero-slide img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
/* Sanfter Verlauf oben: Header (ADA + Menü) liest sicher — dunkel für weisse
   Schrift, hell für dunkle Schrift; je Slide über data-tone gesteuert. */
.phero-slide--img::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22%; z-index: 2;
  pointer-events: none;
}
.phero-slide--img[data-tone="light"]::before {
  background: linear-gradient(to bottom, rgba(0,0,0,0.32), rgba(0,0,0,0));
}
.phero-slide--img[data-tone="dark"]::before {
  background: linear-gradient(to bottom, rgba(255,255,255,0.55), rgba(255,255,255,0));
}
/* Sanfter Verlauf unten: Caption + Dots lesen sicher (über dem Bild) */
.phero-slide--img::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 32%; z-index: 2;
  pointer-events: none;
}
.phero-slide--img[data-tone="light"]::after {
  background: linear-gradient(to top, rgba(0,0,0,0.5), rgba(0,0,0,0));
}
.phero-slide--img[data-tone="dark"]::after {
  background: linear-gradient(to top, rgba(255,255,255,0.65), rgba(255,255,255,0));
}
.phero-slide--ph { display: grid; place-items: center; background: #EDEDEB; }
.phero-ph {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(5rem, 16vw, 13rem); line-height: 1; letter-spacing: -0.04em;
  color: #DDDDD8;
}
.phero-ph-note {
  position: absolute; left: 50%; bottom: 5.4rem; transform: translateX(-50%);
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: #B9B9B4;
}
.phero-cap { position: absolute; left: var(--pad); bottom: 1.5rem; z-index: 2; margin: 0;
  max-width: 46ch; font-size: 0.92rem; line-height: 1.45; }
.phero-cap b { display: block; font-weight: 700; }
.phero[data-tone="light"] .phero-cap { color: #fff; text-shadow: 0 1px 16px rgba(0,0,0,0.4); }
.phero[data-tone="dark"] .phero-cap { color: #3d3d3d; text-shadow: none; }
.phero-dots { position: absolute; right: var(--pad); bottom: 1.7rem; z-index: 2; display: flex; gap: 0.5rem; }
.phero-dot { position: relative; width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: rgba(0,0,0,0.22); transition: background 0.25s ease, transform 0.25s ease;
  -webkit-tap-highlight-color: transparent; }
/* Unsichtbare 44x44-Trefferflaeche (Touch), Punkt bleibt optisch klein */
.phero-dot::before { content: ""; position: absolute; top: 50%; left: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%); }
.phero-dot:focus-visible { outline: 2px solid var(--red); outline-offset: 6px; }
.phero[data-tone="light"] .phero-dot { background: rgba(255,255,255,0.45); }
.phero-dot.is-active { transform: scale(1.28); background: #111; }
.phero[data-tone="light"] .phero-dot.is-active { background: #fff; }

/* Die Leiste: fix in der Viewport-Mitte, dockt beim Scrollen unten an */
.pbar {
  /* mittig auf dem Bild (Hero füllt jetzt den ganzen Viewport) */
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 70;
  display: flex; align-items: baseline; gap: 0.38em; white-space: nowrap;
  padding: 0.6em 1em; border-radius: 3px;
  background: rgba(240,240,238,0.9);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
  font-size: clamp(0.95rem, 1.4vw, 1.15rem); line-height: 1.3; color: var(--ink);
  transition: top 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease, visibility 0s linear 0s;
}
.pbar.is-docked { top: calc(100% - 56px); }
/* Verlaesst der Hero den Viewport, blendet die Leiste weg (JS setzt pbar-hidden)
   — sie schwebt nie ueber der uebrigen Seite; beim Zurueckscrollen wieder da. */
.pbar.pbar-hidden { opacity: 0; visibility: hidden; pointer-events: none;
  transition: top 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease, visibility 0s linear 0.4s; }
@media (prefers-reduced-motion: reduce) {
  .pbar { transition: none; }
  .pbar.pbar-hidden { transition: none; }
}
.pbar-slot { font: inherit; font-weight: 700; color: var(--ink);
  background: none; border: 0; padding: 0; cursor: pointer; position: relative;
  display: inline-flex; align-items: baseline; gap: 0.3em; }
/* Unsichtbare ~44px-hohe Trefferflaeche (Touch), Beschriftung bleibt kompakt. */
.pbar-slot::before { content: ""; position: absolute; left: -4px; right: -4px;
  top: 50%; height: 44px; transform: translateY(-50%); }
.pbar-caret { font-size: 0.7em; transition: transform 0.25s ease; }
.pbar-slot[aria-expanded="true"] .pbar-caret { transform: rotate(180deg); }
/* Interaktions-Hinweis: der Slot-Wort bekommt eine feine gepunktete Unterlinie
   und der Caret pulsiert dezent — signalisiert „hier auswaehlbar". Stoppt nach
   der ersten Nutzung (.pbar-used) und bei reduced-motion. */
.pbar-slot .hk-word { text-decoration: underline dotted; text-decoration-color: rgba(237,40,57,0.55);
  text-underline-offset: 5px; text-decoration-thickness: 2px; }
.pbar-slot:hover .hk-word, .pbar.pbar-used .pbar-slot .hk-word { text-decoration-color: transparent; }
@keyframes pbarCaret { 0%, 100% { transform: translateY(0); opacity: 0.6; } 50% { transform: translateY(2px); opacity: 1; color: var(--red); } }
.pbar:not(.pbar-used) .pbar-slot .pbar-caret { animation: pbarCaret 1.7s ease-in-out infinite; }
.pbar.pbar-used .pbar-slot .pbar-caret { animation: none; }
@media (prefers-reduced-motion: reduce) { .pbar-slot .pbar-caret { animation: none !important; } }

/* Aufklapp-Panel (Pentagram 1:1): riesiges Milchglas-Panel füllt fast den
   Viewport, die Tag-Reihen sitzen mittig am unteren Panel-Rand; die Leiste
   dockt beim Öffnen unten an (JS setzt is-docked). */
.pbar-panel {
  position: absolute; bottom: calc(100% + 14px); left: 50%; transform: translateX(-50%);
  width: min(1560px, 96vw); height: min(78vh, 900px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(1.4rem, 3vw, 2.6rem);
  /* Voll deckend: das Panel liegt auch über Seiteninhalt (Leiste unten angedockt) —
     nichts darf durchscheinen. */
  background: #F2F2F0;
  border-radius: 14px; box-shadow: 0 30px 90px rgba(0,0,0,0.22);
  opacity: 0; pointer-events: none; translate: 0 14px;
  transition: opacity 0.32s ease, translate 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}
.pbar-panel.is-open { opacity: 1; pointer-events: auto; translate: 0 0; }
.pbar-tags { display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.7rem 0.75rem; max-width: 1180px; margin: 0 auto; }
.pbar-tag { font: inherit; font-size: clamp(0.95rem, 1.4vw, 1.15rem); white-space: nowrap;
  padding: 0.5em 0.9em; border-radius: 8px; border: 0; cursor: pointer;
  background: #E2E2DF; color: var(--ink); transition: background 0.2s ease, color 0.2s ease; }
.pbar-tag:hover { background: var(--ink); color: #fff; }
.pbar-tag.is-current { background: var(--red); color: #fff; }
/* Konfigurator-Antwort im Panel: ein Satz + ein stiller Artikel-Link.
   Bewusst still — eine Schrift, zwei Größen, Rot nur im gewählten Tag / Link-Hover. */
.pbar-answer { width: min(620px, 100%); margin: 16px auto 0; padding-top: 14px;
  border-top: 1px solid rgba(20, 18, 16, 0.12); text-align: left; white-space: normal; }
.pbar-answer[hidden] { display: none; }
.pbar-ans-text { margin: 0; font-size: clamp(0.95rem, 1.4vw, 1.05rem); line-height: 1.55;
  font-weight: 400; color: var(--ink); }
.pbar-ans-text b { font-weight: 600; }
.pbar-ans-read { margin: 10px 0 0; font-size: 0.9rem; }
.pbar-ans-read a { color: var(--ink); font-weight: 600; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color 0.15s ease; }
.pbar-ans-read a:hover { color: var(--red); }

@media (max-width: 640px) {
  .pbar { white-space: normal; flex-wrap: wrap; justify-content: center;
    max-width: 92vw; text-align: center; font-size: 0.95rem; }
  .phero { height: calc(100svh - 76px); min-height: 480px; }
}
@media (prefers-reduced-motion: reduce) {
  .phero-slide, .pbar, .pbar-panel, .phero-stage { transition: none; }
}

/* ------------------------------ Header ------------------------------
   Sticky: bleibt beim Scrollen oben & immer klickbar (Logo, Contact, Menü).
   Weißer Grund + feine Linie, damit Inhalt sauber darunter durchläuft. */
.top {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(0.9rem, 2.4vw, 1.4rem) var(--pad);
  background: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.07);
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.5rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
}
/* Logo: freigestelltes ADA-Wortmark (schwarz). Höhe an die Kopfzeile gebunden. */
.wordmark-img { display: block; height: clamp(20px, 2.4vw, 28px); width: auto; }
.top-link {
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s ease;
}
.top-link:hover { border-color: currentColor; }
/* Home-Hero: Foto ist hell (S/W) — Wortmarke dunkel; Link als weißer Button,
   damit er vor dem Zebrastreifen-Foto klar als klickbar erkennbar ist. */
.top .top-link {
  color: var(--ink);
  background: #fff;
  padding: 0.55rem 1rem;
  border-bottom: none;
  box-shadow: 0 2px 10px rgba(0,0,0,0.10);
  transition: background 0.2s ease, transform 0.2s ease;
}
.top .top-link:hover { background: var(--ink); color: #fff; transform: translateY(-1px); }
/* Unterseiten: identisch sticky (Basisregel .top greift bereits). */
.top--solid .top-link { color: var(--ink); }

/* ---- Neues Routing: Hamburger-Menü links, Kontakt-Button rechts ---- */
.top-left { display: flex; align-items: center; gap: clamp(0.7rem, 2vw, 1.3rem); }
.menu-btn {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 9px 8px;
  border: 0; background: none; cursor: pointer;
}
.menu-btn span {
  display: block; height: 2px; width: 24px; background: var(--ink);
  transition: transform 0.3s ease, opacity 0.2s ease;
}
.menu-btn.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-btn.is-open span:nth-child(2) { opacity: 0; }
.menu-btn.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Kein Kasten um Burger/X (globale focus-visible-Outline hier unterdruecken). */
.menu-btn:focus, .menu-btn:focus-visible { outline: none; }


/* Sprach-Umschalter in der oberen Leiste (immer sichtbar, direkt vor dem CTA).
   margin-left:auto schiebt ihn + den CTA als Gruppe nach rechts. */
.top-lang {
  margin-left: auto;
  margin-right: clamp(0.5rem, 1.5vw, 0.9rem);
  align-self: center;
  font-family: var(--font-body);
  font-weight: 700; font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--ink);
  text-decoration: none;
  padding: 0.45rem 0.7rem;
  border: 1.5px solid var(--ink);
  transition: background 0.2s ease, color 0.2s ease;
}
.top-lang:hover { background: var(--ink); color: #fff; }

/* Home-Hero: dezenter weißer Scrim hinter der Kopfzeile, damit Logo,
   Hamburger und Kontakt-Button auf jedem Bildausschnitt lesbar bleiben —
   v. a. mobil, wo das Hero-Foto direkt unter der Kopfzeile liegt. */
.top:not(.top--solid)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.55) 55%, rgba(255,255,255,0) 100%);
}

/* Vollbild-Menü: Grau (wie Check/Kontakt) waechst als Kreis aus der Menue-Ecke,
   dann steigen die grossen Links gestaffelt ein. Liegt UNTER den Kopf-Elementen
   (gnav-left/right, z-index 3), damit X + ADA + DE oben sichtbar bleiben. */
.menu {
  position: fixed; inset: 0; z-index: 1;
  background: radial-gradient(130% 130% at 80% 8%, #ededed 0%, #d3d3d3 56%, #bfbfbf 100%);
  display: flex; flex-direction: column; justify-content: center; gap: clamp(0.05rem, 0.4vh, 0.35rem);
  padding: clamp(6rem, 16vh, 10rem) var(--pad) clamp(3rem, 8vh, 5rem);
  clip-path: circle(0px at calc(var(--pad) + 20px) 42px);
  transition: clip-path 0.6s cubic-bezier(0.76, 0, 0.24, 1);
  visibility: hidden; pointer-events: none;
}
.menu.is-open { clip-path: circle(150% at calc(var(--pad) + 20px) 42px); visibility: visible; pointer-events: auto; }
.menu a {
  width: max-content; text-decoration: none; color: var(--ink);
  font-family: var(--font-display); font-weight: 900; text-transform: none;
  font-size: clamp(2rem, 6vw, 3.8rem); line-height: 1.14; letter-spacing: -0.01em;
  opacity: 0; transform: translateY(16px);
  /* color absichtlich NICHT animiert → Hover-Rot schaltet komplett sofort (kein Delay, keine Dauer). */
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.menu a:hover, .menu a:focus-visible { color: var(--red); }
.menu a:focus-visible { outline: 2px solid var(--red); outline-offset: 6px; border-radius: 2px; }
/* Kopfzeilen-Links: sichtbarer Tastaturfokus (gleicher Kontrast wie die anderen) */
.gnav a:focus-visible, .menu-btn:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; border-radius: 2px; }
/* Keine „Hier bist du"-Einfaerbung mehr: alle Punkte gleich, alle klickbar. */
.menu.is-open a { opacity: 1; transform: none; }
/* Staffel-Delay gilt nur fuer den Einflug (opacity/transform) — color ist gar nicht in der
   Transition, also vom Delay unberuehrt und immer sofort. */
.menu.is-open a:nth-child(1) { transition-delay: 0.16s; }
.menu.is-open a:nth-child(2) { transition-delay: 0.22s; }
.menu.is-open a:nth-child(3) { transition-delay: 0.28s; }
.menu.is-open a:nth-child(4) { transition-delay: 0.34s; }
.menu.is-open a:nth-child(5) { transition-delay: 0.40s; }
.menu.is-open a:nth-child(6) { transition-delay: 0.46s; }
@media (prefers-reduced-motion: reduce) {
  .menu { transition: none; }
  .menu a, .menu.is-open a { transition: color 0.15s ease; transition-delay: 0s; opacity: 1; transform: none; }
}

/* --------- Approach-Hero: Text links + rote Treppen-Quadrate rechts --------- */
.appro-hero { position: relative; }
.appro-hero-inner {
  display: grid; grid-template-columns: 1fr auto; gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}
.appro-hero-art {
  position: relative;
  width: clamp(150px, 22vw, 300px);
  height: clamp(150px, 22vw, 300px);
  flex: none;
}
.appro-hero-art i {
  position: absolute;
  width: clamp(46px, 6vw, 84px); aspect-ratio: 1;
  background: var(--red);
  opacity: 0; transform: scale(0.6);
  animation: artpop 0.6s cubic-bezier(0.16,1,0.3,1) forwards;
}
.appro-hero-art i:nth-child(1) { bottom: 0;   right: 62%; animation-delay: 0.25s; }
.appro-hero-art i:nth-child(2) { bottom: 24%; right: 41%; animation-delay: 0.4s; }
.appro-hero-art i:nth-child(3) { bottom: 48%; right: 20%; animation-delay: 0.55s; background: var(--red-2); }
.appro-hero-art i:nth-child(4) { bottom: 72%; right: 0;   animation-delay: 0.7s; }
@keyframes artpop { to { opacity: 1; transform: none; } }
@media (max-width: 760px) { .appro-hero-inner { grid-template-columns: 1fr; } .appro-hero-art { display: none; } }

/* --------- Footer-Navigation (Absprungspunkte) --------- */
.footer-nav {
  display: flex; flex-wrap: wrap; gap: 1.4rem;
  flex-basis: 100%; order: -1;      /* eigene Zeile ganz oben im Footer */
  margin-bottom: 1.1rem;
}
.footer-nav a {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: 0.95rem; letter-spacing: 0.01em; text-decoration: none; color: var(--ink);
  border-bottom: 2px solid transparent; transition: border-color 0.2s ease;
}
.footer-nav a:hover { border-color: var(--red); }

/* ------------------------------- Hero -------------------------------
   Karo-Treppe (Poster-Stil): rote Kacheln steigen von unten links nach
   oben rechts — es geht aufwärts. Kacheln poppen gestaffelt ein, Slogan
   staffelt als Treppe, Missions-Note mit rotem Balken oben rechts. */
/* ------------------------------- Hero -------------------------------
   Kontrastreiches Würfel-Render (Higgsfield) rechts + animiertes rotes
   Pixelfeld (Canvas) über der Naht — die Marken-Designsprache. */
.hero {
  position: relative;
  height: 100vh; height: 100svh;
  min-height: 620px;
  overflow: hidden;
  clip-path: inset(0);               /* harte Kante: nichts ragt je unters Bild */
  background: var(--white);
  isolation: isolate;
}
.hero-media {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 58%;
  background: #fff;
  overflow: hidden;                  /* Zoom-Bild bleibt im Rahmen — sonst ragt die
                                        Bildkante links raus (grauer Strich) */
  z-index: 0;
}
.hero-media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 60% center;
  transform: scale(1.06);
  animation: heroZoom 22s ease-out forwards;
}
@keyframes heroZoom { to { transform: scale(1); } }
.hero-media::after {                 /* Weiß-Verlauf an der linken Kante fürs Lesen —
                                        breit & weich, damit die Bildkante nicht als
                                        vertikaler Strich durchscheint */
  content: ""; position: absolute; top: 0; left: -2px; bottom: 0; width: 58%;
  background: linear-gradient(90deg,
    #fff 0%, #fff 26%,
    rgba(255,255,255,0.86) 48%,
    rgba(255,255,255,0.45) 74%,
    rgba(255,255,255,0) 100%);
}
/* Größere, treppenartige rote Quadrate über dem Foto (rechts).
   Von script.js befüllt; auf Hover wird die Kachel transparent → Foto scheint durch. */
.hero-grid {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 60%;
  display: grid;                 /* Spalten/Zeilen setzt script.js: echte Quadrate,
                                    unten bündig mit der Bildkante (align-content:end) */
  align-content: end;
  z-index: 2;
  will-change: transform;
}
.hero-grid .rcell {
  background: var(--red);
  opacity: 0; transform: scale(0.6);
}
.hero-grid .rcell.in {
  opacity: 1; transform: none;
  transition: opacity 0.55s ease var(--d, 0s),
              transform 0.55s cubic-bezier(0.16,1,0.3,1) var(--d, 0s);
}
.hero-grid .rcell:hover {           /* Hover/Touch: Kachel wird durchscheinend,
                                       löst sich aber nicht ganz auf */
  opacity: 0.25;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.hero-grid.settled .rcell {         /* nach der Einblendung: Kacheln folgen dem
                                       Scroll direkt (kein Transition-Lag) */
  transition: opacity 0.2s linear;
}
.hero-copy {
  position: absolute; left: var(--pad); top: 50%;
  transform: translateY(-50%);
  z-index: 3; max-width: 62%;
}
.hero-brand {
  display: block;
  font-family: var(--font-display);
  font-weight: 900; text-transform: uppercase;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  letter-spacing: 0.32em;
  color: var(--red);
  margin: 0 0 clamp(0.9rem, 2vw, 1.4rem) 0.1em;
}
.hero-steps {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900; text-transform: uppercase;
  font-size: clamp(3rem, 8.5vw, 7.5rem);
  line-height: 0.92; letter-spacing: -0.015em;
  color: var(--ink);
}
.hero-steps .line {
  display: block;
  opacity: 0; transform: translateY(26px);
  animation: heroLine 0.8s cubic-bezier(0.16,1,0.3,1) forwards;
}
.hero-steps .l1 { animation-delay: 0.5s; }
.hero-steps .l2 { margin-left: 0.55em; animation-delay: 0.65s; }
.hero-steps .l3 { margin-left: 1.15em; animation-delay: 0.8s; }
@keyframes heroLine { to { opacity: 1; transform: none; } }

/* Kinetische Zeile (Pentagram-Mechanik): fester Satz, rotierender Begriff.
   Blendet als letzter Akt des Intro-Reveals ein; Begriff rollt vertikal durch
   (JS #heroTerm), Klick springt weiter. */
.hero-kinetic {
  display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 0.32em;
  margin: clamp(1.4rem, 3vw, 2.2rem) 0 0;
  padding: 0.6em 0.95em;
  background: rgba(255,255,255,0.85);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  font-size: clamp(1rem, 1.7vw, 1.3rem); line-height: 1.25; color: var(--ink);
  opacity: 0; transform: translateY(18px);
  animation: heroLine 0.8s cubic-bezier(0.16,1,0.3,1) 1.05s forwards;
}
.hk-term {
  font: inherit; font-weight: 800; color: var(--red);
  background: none; border: 0; padding: 0; cursor: pointer;
  display: inline-flex; align-items: baseline; gap: 0.28em;
}
.hk-term:hover .hk-caret { transform: translateY(2px); }
.hk-caret { font-size: 0.72em; transition: transform 0.2s ease; }
.hk-clip { display: inline-block; overflow: hidden; }
.hk-word { display: inline-block; }
.hk-word.is-out { transition: transform 0.26s ease, opacity 0.26s ease;
  transform: translateY(-0.75em); opacity: 0; }
.hk-word.is-in { animation: hkIn 0.45s cubic-bezier(0.16,1,0.3,1); }
@keyframes hkIn { from { transform: translateY(0.75em); opacity: 0; } }
/* Intro-Reveal: Foto blendet als erstes ein */
.hero-media { animation: heroFade 1s ease both; }
@keyframes heroFade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .hero-kinetic { animation: none; opacity: 1; transform: none; }
  .hero-media { animation: none; }
  .hk-word.is-out, .hk-word.is-in { transition: none; animation: none; transform: none; opacity: 1; }
}

@media (max-width: 760px) {
  /* Mobile: Bild oben in Fluss-Höhe, Headline direkt darunter (kein leeres Loch,
     kein am Seitenende klebender Text). Hero wächst mit dem Inhalt. */
  .hero { height: auto; min-height: 0; }
  .hero-media { position: relative; inset: auto; width: 100%; height: 44vh; }
  .hero-media::after { top: auto; left: 0; right: 0; bottom: 0; width: 100%; height: 48%;
                       background: linear-gradient(0deg, #fff 10%, rgba(255,255,255,0)); }
  .hero-grid { position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 44vh; bottom: auto; }
  .hero-copy { position: relative; inset: auto; transform: none; max-width: 100%;
               padding: 0 var(--pad) 2.6rem; margin-top: -2.4rem; }
  .hero-brand { color: var(--red); }
  /* Treppen-Einzüge raus, sonst läuft die letzte Zeile rechts aus dem Bild */
  .hero-steps .l2, .hero-steps .l3 { margin-left: 0; }
}

.scroll-cue {
  position: absolute;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 3;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  background: var(--white);
  color: var(--red);
  font-size: 1.6rem; font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 18px rgba(0,0,0,0.14);
  animation: nudge 2.2s ease-in-out infinite;
}
@keyframes nudge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
/* Scroll-Pfeil nur auf Desktop — auf Mobile folgt der Inhalt direkt (nach Basis-Regel,
   damit die Reihenfolge sticht). */
@media (max-width: 760px) { .scroll-cue { display: none; } }

/* --------------------------- About (Absatz) --------------------------- */
.about { position: relative; padding: clamp(7rem, 16vw, 13rem) var(--page-pad); }

/* „Staffelstab"-Landung: die Hero-Kacheln setzen sich als Logo-Treppe überm
   Missionstext zusammen, sobald der Block in den Viewport kommt (.landed). */
.about-mark {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 34px;
  margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
}
.about-mark span {
  width: 13px; height: 13px;
  background: var(--red);
  opacity: 0;
  transform: translateY(-64px) scale(0.7);
  transition: opacity 0.55s ease, transform 0.75s cubic-bezier(0.16,1,0.3,1);
}
.about-mark span:nth-child(1) { transition-delay: 0.05s; }
.about-mark span:nth-child(2) { margin-bottom: 9px;  transition-delay: 0.22s; }
.about-mark span:nth-child(3) { margin-bottom: 18px; transition-delay: 0.38s; }
.about.landed .about-mark span { opacity: 1; transform: none; }
.about-text {
  max-width: 720px;
  margin-left: 0;
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
}
.about-text strong { font-weight: 700; }
.br-wide { display: none; }
@media (min-width: 900px) { .br-wide { display: inline; } }

.more {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.6rem;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  padding: 0.7rem 1.1rem;
  transition: background 0.2s ease, transform 0.2s ease;
}
.more:hover { background: var(--red); transform: translateY(-2px); }
.more span { transition: transform 0.25s ease; }
.more:hover span { transform: translateX(4px); }

/* Banner — graues Band als Brücke zu den vier Cases (rote Pixel als Akzent) */
.banner {
  background: var(--grey);
  color: #fff;
  padding: clamp(2.4rem, 6vw, 4.2rem) var(--pad);
  overflow: hidden;
}
.banner-inner {
  max-width: var(--maxwidth);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.banner h2 {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(1.9rem, 4.6vw, 3.6rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
  margin: 0;
}
.banner-checks {
  display: flex;
  gap: 10px;
  flex: none;
}
.banner-checks span {
  width: clamp(22px, 3vw, 34px);
  height: clamp(22px, 3vw, 34px);
  background: var(--red);
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
.banner-checks span:nth-child(1) { transform: translateY(14px); }
.banner-checks span:nth-child(3) { transform: translateY(-14px); }
.banner:hover .banner-checks span:nth-child(1) { transform: translateY(-14px); }
.banner:hover .banner-checks span:nth-child(3) { transform: translateY(14px); }

/* ============ Rotes Pixel-Motiv (Designsprache, seitenweit) ============ */
/* Kleine Marke: drei rote Quadrate treppauf — vor Sektions-Überschriften */
.px-mark {
  display: inline-block;
  width: 42px; height: 27px;
  vertical-align: 0.1em; margin-right: 0.85rem; flex: none;
  background:
    linear-gradient(var(--red), var(--red)) 0 100% / 12px 12px no-repeat,
    linear-gradient(var(--red), var(--red)) 15px 50% / 12px 12px no-repeat,
    linear-gradient(var(--red), var(--red)) 30px 0 / 12px 12px no-repeat;
}
/* Auf dunklen Panels: ein Quadrat weiß, damit es auf Rot lesbar bleibt */
.px-mark--onred {
  background:
    linear-gradient(#fff,#fff) 0 100% / 12px 12px no-repeat,
    linear-gradient(#fff,#fff) 15px 50% / 12px 12px no-repeat,
    linear-gradient(#fff,#fff) 30px 0 / 12px 12px no-repeat;
}
/* Divider: schmale Reihe roter Quadrate mit Lücken, zwischen Sektionen */
.px-band {
  height: 12px;
  margin: 0 var(--pad);
  background: repeating-linear-gradient(90deg, var(--red) 0 12px, transparent 12px 30px);
}
.px-band--tight { margin: 0; }
@media (max-width: 640px) { .banner-checks { display: none; } }

/* ------------------------ Use-Case-Karussell ------------------------ */
.tales { position: relative; }
/* Galerie-Grid (Pentagram-Work-Stil): Kachel = Bild oben, fetter Titel +
   grauer Kurztext darunter. Lebt in der dunklen Scroll-Zone ([data-bg="dark"]). */
.gallery {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.1rem, 2.4vw, 2rem);
}
.gallery--2 { grid-template-columns: repeat(2, 1fr); }
.g-tile { min-width: 0; }
.g-media {
  position: relative; margin: 0; overflow: hidden;
  aspect-ratio: 3 / 4; background: #161616;
}
.gallery--2 .g-media { aspect-ratio: 4 / 3; }
.g-media img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.g-tile:hover .g-media img { transform: scale(1.04); }
.g-name {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem); line-height: 1.15;
  color: #fff; margin: 1.05rem 0 0.45rem;
}
.g-desc { font-size: 0.95rem; line-height: 1.55; color: #9a9a9a; margin: 0; max-width: 44ch; }
/* Bild-Platzhalter (Case Studies): Kennzahl gross als Interims-Visual */
.g-media--ph { display: grid; place-items: center; background: #141414; border: 1px dashed #3a3a3a; }
.g-ph-metric {
  font-family: var(--font-display); font-weight: 900; line-height: 0.9;
  font-size: clamp(3.2rem, 7vw, 5.5rem); letter-spacing: -0.03em; color: var(--red);
}
.g-ph-note {
  position: absolute; left: 0; right: 0; bottom: 0.9rem; text-align: center;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: #6b6b6b;
}
/* Titel der dunklen Sektionen in Weiss */
[data-bg="dark"] .tales-title { color: #fff; }
@media (max-width: 900px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gallery, .gallery--2 { grid-template-columns: 1fr; } }

/* ============================================================================
   SHOWCASE — gemeinsame Editorial-Zeilen (Use Cases + Angebot)
   Zeile auf dem 12-Spalten-Raster: großes Medium (Sp. 1–7) · Beschreibung (8–10)
   · großer Titel (11–12). Feine Trennlinien, keine Karten. Quellreihenfolge =
   Titel → Medium → Beschreibung (gute Lese-/Mobilreihenfolge); Desktop-Position
   über grid-column. Reveal von unten (Variante A) nur mit JS + ohne reduced-motion
   (.sc-armed). Ohne JS / reduced-motion: alles sofort sichtbar.
   JS: script.js [data-showcase]. ========================================== */
.showcase { width: 100%; max-width: var(--stage-max); margin-inline: auto;
  padding-inline: var(--page-pad); padding-block: clamp(3rem, 7vw, 5.5rem); }
.sc-head { margin: 0 0 clamp(1.6rem, 3vw, 2.8rem); }
.sc-head .tales-title { color: var(--ink); margin: 0; }
.sc-list { display: block; }

.sc-row { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--col-gap); align-items: center; border-top: 1px solid #e7e5df;
  padding-block: clamp(2rem, 3.6vw, 3.8rem); color: inherit; text-decoration: none; }
.sc-list .sc-row:last-child { border-bottom: 1px solid #e7e5df; }
.sc-row:focus-visible { outline: 2px solid var(--red); outline-offset: 6px; }

.sc-title { grid-column: 11 / 13; align-self: center; margin: 0;
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  letter-spacing: -0.02em; line-height: 0.95; font-size: clamp(1.35rem, 1.9vw, 2.3rem);
  color: var(--ink); text-wrap: balance; hyphens: auto; }
.sc-media { grid-column: 1 / 8; position: relative; overflow: hidden; border-radius: 2px;
  aspect-ratio: 16 / 10; background: #161616; }
.sc-media img, .sc-media video { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.sc-desc { grid-column: 8 / 11; max-width: var(--measure); }
.sc-eyebrow { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 0.8rem; }
.sc-desc p { font-size: clamp(1rem, 1.1vw, 1.14rem); line-height: 1.55; color: #3d3b36; margin: 0; }
.sc-result { margin: 0.9rem 0 0; font-size: 0.85rem; line-height: 1.5; color: var(--muted); }
.sc-more { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.1rem;
  min-height: 44px; font-size: 0.9rem; font-weight: 600; color: var(--ink); }
.sc-more .arw { color: var(--red); transition: transform 0.2s ease; }
.sc-row:hover .sc-more .arw, .sc-row:focus-visible .sc-more .arw { transform: translateX(4px); }
.sc-row:hover .sc-media img { transform: scale(1.03); }
.sc-media img { transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }

/* Reveal-Choreografie (nur .sc-armed): Tafel gleitet hoch, Medium steigt aus der
   Maske, Text rastet mit winzigem Versatz nach. Eine wahrgenommene Bewegung. */
.sc-armed .sc-row { transition: opacity 0.8s ease-out, transform 0.85s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform, opacity; }
.sc-armed .sc-media { transition: clip-path 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.05s; }
.sc-armed .sc-desc { transition: opacity 0.6s ease 0.08s, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.08s; }
.sc-armed .sc-title { transition: opacity 0.6s ease 0.12s, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.12s; }
/* Verborgen = :not(.in). Enthüllt = Grundzustand (keine Regel) → keine Overrides,
   nie dauerhaft unsichtbar sobald .in gesetzt ist. */
.sc-armed .sc-row:not(.in) { opacity: 0; transform: translateY(56px); }
.sc-armed .sc-row:not(.in) .sc-media { clip-path: inset(100% 0 0 0); }
.sc-armed .sc-row:not(.in) .sc-desc,
.sc-armed .sc-row:not(.in) .sc-title { opacity: 0; transform: translateY(14px); }

/* Tablet: 8 Spalten, Medium volle Breite oben, Titel + Beschreibung darunter */
@media (min-width: 681px) and (max-width: 1024px) {
  .sc-row { grid-template-columns: repeat(8, minmax(0, 1fr)); row-gap: clamp(1.2rem, 3vw, 1.8rem); align-items: start; }
  .sc-media { grid-column: 1 / 9; grid-row: 1; aspect-ratio: 16 / 9; }
  .sc-title { grid-column: 1 / 4; grid-row: 2; align-self: start; }
  .sc-desc { grid-column: 4 / 9; grid-row: 2; }
}
/* Mobil: eine Spalte, Reihenfolge Titel → Medium → Beschreibung (= Quellreihenfolge) */
@media (max-width: 680px) {
  .sc-row { grid-template-columns: 1fr; gap: clamp(0.9rem, 3vw, 1.3rem); padding-block: clamp(2rem, 7vw, 2.6rem); align-items: start; }
  .sc-title, .sc-media, .sc-desc { grid-column: 1 / -1; }
  .sc-title { font-size: clamp(1.6rem, 7.5vw, 2.2rem); }
  .sc-media { aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-armed .sc-row, .sc-armed .sc-media, .sc-armed .sc-desc, .sc-armed .sc-title {
    opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
}

/* ---------- Sticky-Stacking (basement „Featured Projects"-Muster) ----------
   Rein CSS, kein JS: auf Desktop mit Maus (und ohne reduced-motion) bleibt
   jede Zeilen-Karte unter der Nav kleben; die naechste schiebt sich beim
   Scrollen DARUEBER (spaetere DOM-Position gewinnt automatisch — kein
   z-index-Turm). Jede Karte behaelt ihr Bild, weisser Grund + Haarlinie oben
   geben das „Blatt schiebt sich drueber"-Gefuehl. Karten-Layout wie basement:
   Medium links (~58%), Beschreibung rechts oben, grosser Titel rechts unten.
   Mobil/Tablet/Touch/reduced-motion: die normale vergleichbare Liste. */
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  /* Sicherheitsnetz: falls das Reveal (sc-armed) durch ein Resize-/Boot-Race
     doch aktiv ist, hier neutralisieren — im Stacking-Modus ist die Stapelung
     der EINZIGE Effekt, Inhalte haengen nie an einem IO-Reveal. */
  .sc-armed .sc-row:not(.in),
  .sc-armed .sc-row:not(.in) .sc-media,
  .sc-armed .sc-row:not(.in) .sc-desc,
  .sc-armed .sc-row:not(.in) .sc-title {
    opacity: 1; transform: none; clip-path: none; }
  /* Die Nav ist position:absolute (scrollt weg) → Karten kleben bei top:0 und
     fuellen die VOLLE Viewport-Hoehe. So maskiert jede eintreffende Karte die
     vorige lueckenlos: nie ein 72px-Band mit Bildresten, immer nur aktuelle +
     eintretende Zeile sichtbar. z-index-Reihenfolge = DOM-Reihenfolge. */
  .sc-list { position: relative; }
  .sc-list .sc-row { position: sticky; top: 0;
    background: var(--white); overflow: hidden;
    grid-template-rows: auto 1fr;
    min-height: 100vh; min-height: 100svh;
    padding-block: clamp(4.5rem, 10vh, 7rem);
    align-content: center; align-items: center; }
  .sc-list .sc-media { grid-column: 1 / 8; grid-row: 1 / 3; align-self: center;
    max-height: calc(100vh - 9rem); }
  .sc-list .sc-desc { grid-column: 8 / 13; grid-row: 1; align-self: start; max-width: 46ch;
    /* Sticky-Falle vermeiden: waechst <details> ueber die Kartenhoehe, scrollt
       die Beschreibung intern statt die 100vh-Karte zu sprengen */
    max-height: calc(100vh - 12rem); overflow-y: auto; }
  .sc-list .sc-title { grid-column: 8 / 13; grid-row: 2; align-self: end; justify-self: start;
    font-size: clamp(2.4rem, 4.2vw, 4.4rem); }
}

/* ---------- Angebot + Use Cases: Name-oben-Layout (Variante 2) + Sticky-Stacking ----------
   Grosser Titel als Kopfzeile ueber der ganzen Karte (Unterstrich), darunter grosses
   graues Medium (Sp. 1–7) + VOLLER Text (Sp. 8–13). Kein <details>, kein Absprung,
   kein Eyebrow. Auf Desktop schieben sich die Karten beim Scrollen UEBEREINANDER
   (generische Stacking-Mechanik: sticky, 100vh, weisser Grund) — hier NUR das interne
   Variante-2-Layout (hoehere Spezifitaet). Gilt fuer Angebot (.offer-sc, Approach) UND
   Use Cases (.tales, Home) — identische Anmutung, Zeile ist KEIN Link mehr. */
:is(.offer-sc, .tales) .sc-list { display: block; }
:is(.offer-sc, .tales) .sc-list .sc-row {
  padding-block: clamp(2.6rem, 6vh, 5rem); align-content: start; align-items: start;
  grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto minmax(0, 1fr);
}
/* Trennlinie direkt unter der Sektions-Ueberschrift raus (Laurin): die erste Karte
   traegt oben keine Linie mehr — die Titel-Unterstriche bleiben als „gute Striche". */
:is(.offer-sc, .tales) .sc-list .sc-row:first-child { border-top: none; }
:is(.offer-sc, .tales) .sc-list .sc-title {
  grid-column: 1 / 13; grid-row: 1; justify-self: start; align-self: auto;
  font-size: clamp(2.6rem, 6vw, 5rem); line-height: 0.9; letter-spacing: -0.02em;
  margin: 0 0 clamp(1.4rem, 3vh, 2.2rem); padding-bottom: clamp(1rem, 2vh, 1.4rem);
  border-bottom: 1px solid #e7e5df; width: 100%; }
:is(.offer-sc, .tales) .sc-list .sc-media {
  grid-column: 1 / 8; grid-row: 2; align-self: start; aspect-ratio: 16 / 10;
  max-height: 100%; filter: grayscale(1); }
:is(.offer-sc, .tales) .sc-list .sc-desc {
  grid-column: 8 / 13; grid-row: 2; align-self: start; max-width: none;
  max-height: 100%; overflow-y: auto; }
:is(.offer-sc, .tales) .sc-lead {
  font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.15rem, 1.9vw, 1.4rem);
  line-height: 1.3; color: var(--ink); margin: 0 0 1rem; }
:is(.offer-sc, .tales) .sc-desc > p:not([class]) { font-size: 1.05rem; line-height: 1.7; color: #3d3b36;
  margin: 0 0 0.8rem; max-width: var(--measure); }
:is(.offer-sc, .tales) .sc-result { margin-top: 1.1rem !important;
  font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; color: var(--ink); }
/* ---------- Use Cases: ansprechenderer Text + fette Schluss-Frage ----------
   Nur .tales (das Angebot behaelt seine Preis/Stop-Zeile .sc-result). Fetter
   Aufhaenger, gut lesbarer Fliesstext, dann eine provokante Frage (Stern-Stewart-
   Duktus) statt der „X · Y"-Zeile. Gleiche Schrift wie der Rest der Seite
   (Inter), KEIN Kursiv, KEINE rote Schrift — Betonung nur ueber fette Schrift
   (Laurin). Hohe Spezifitaet (> .klasse), um die geteilte .sc-desc>p-Regel
   (0,2,1) sicher zu schlagen. */
.tales .sc-desc > p:not([class]) {
  font-size: clamp(1.02rem, 1.2vw, 1.18rem); line-height: 1.72; color: #2c2b27; }
.tales .sc-desc > .sc-lead {
  font-family: var(--font-body); font-weight: 700; color: var(--ink);
  font-size: clamp(1.45rem, 2.1vw, 1.9rem); line-height: 1.25; margin: 0 0 1.3rem; }
.tales .sc-desc > .sc-ask {
  margin: clamp(1.4rem, 2.8vh, 2rem) 0 0; font-family: var(--font-body);
  font-style: normal; font-weight: 700; color: var(--ink);
  font-size: clamp(1.2rem, 1.5vw, 1.45rem); line-height: 1.35; max-width: var(--measure); }
/* Story-List statt Fliesstext: gesetzte Zeilenumbrueche (<br>) bilden kurze,
   provokante Zeilen. Auf Schmalscreens Umbrueche neutralisieren (sonst Flatterrand). */
.tales .sc-desc > p:not([class]) { text-wrap: pretty; }
@media (max-width: 560px) { .tales .sc-desc > p br { display: none; } }

/* ---------- Variante 2: Sektion als vertikales Label je Slide (Laurin) ----------
   „Five stories…" laeuft hochkant an der linken Kante jeder Use-Case-Slide, mit
   schwarzem Strich — nur im Desktop-Sticky-Modus. Dort wird die grosse Sektions-
   Ueberschrift (.sc-head) visuell ausgeblendet (bleibt fuer Screenreader). Auf
   Mobil/Tablet bleibt die normale Ueberschrift sichtbar, Label aus. Label = dekorativ. */
/* Vertikale Achse je Slide: nur die grosse zweistellige Nummer (ruhiger als der
   frueher wiederholte Sektionsname). Die Abschnitts-Ueberschrift „Five stories …"
   bleibt EINMAL oben als sichtbarer Kapitelanfang (sc-head, kein sr-only mehr). */
:is(.offer-sc, .tales) .sc-vlabel { display: none; }
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :is(.offer-sc, .tales) .sc-list .sc-row { padding-left: clamp(2.4rem, 3vw, 3.6rem); }
  /* Grosser Titel buendig links zur Sektionsueberschrift (Laurin) — nur Bild/Text
     bleiben eingerueckt, die Nummer sitzt in der Luecke links vom Bild. */
  :is(.offer-sc, .tales) .sc-list .sc-title {
    margin-left: calc(-1 * clamp(2.4rem, 3vw, 3.6rem));
    width: calc(100% + clamp(2.4rem, 3vw, 3.6rem)); }
  :is(.offer-sc, .tales) .sc-vlabel {
    display: inline-flex; align-items: center; justify-content: center;
    position: absolute; left: 0; top: clamp(4.5rem, 10vh, 7rem); bottom: clamp(4.5rem, 10vh, 7rem);
    writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
  :is(.offer-sc, .tales) .sc-vlabel b { font-family: var(--font-display); font-weight: 900;
    font-size: clamp(1.5rem, 1.9vw, 2rem); letter-spacing: 0.02em; color: var(--ink); }
}
@media (max-width: 760px) {
  :is(.offer-sc, .tales) .sc-list .sc-media { grid-column: 1 / -1; }
  :is(.offer-sc, .tales) .sc-list .sc-desc { grid-column: 1 / -1; max-height: none; overflow: visible; }
  :is(.offer-sc, .tales) .sc-list .sc-title { font-size: clamp(2rem, 9vw, 3rem); }
  /* Mobil: Metadaten horizontal (kleine rote Nummer ueber dem Titel) statt vertikal. */
  :is(.offer-sc, .tales) .sc-vlabel { display: block; position: static; grid-column: 1 / -1;
    grid-row: auto; margin: 0 0 0.3rem; }
  :is(.offer-sc, .tales) .sc-vlabel b { font-family: var(--font-display); font-weight: 900;
    font-size: 1.05rem; letter-spacing: 0.02em; color: var(--red); }
}

.sc-details { margin-top: 0.6rem; }
.sc-details summary { display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 44px; font-size: 0.9rem; font-weight: 600; color: var(--ink);
  cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
.sc-details summary::-webkit-details-marker { display: none; }
.sc-details summary .arw { color: var(--red); transition: transform 0.2s ease; }
.sc-details summary:hover .arw { transform: translateX(4px); }
.sc-details[open] summary .arw { transform: rotate(90deg); }
.sc-details summary:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }
.sc-full { padding: 0.4rem 0 0.2rem; }
.sc-full p { font-size: 0.95rem; line-height: 1.65; color: #3d3b36;
  margin: 0 0 0.85rem; max-width: var(--measure); }
.sc-full a { color: var(--ink); font-weight: 600; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px; }
.sc-full a:hover { color: var(--red); }
@media (prefers-reduced-motion: reduce) { .sc-details summary .arw { transition: none; } }

/* ---------- Home: kompakte Produktleiter (Teaser, Brief P2) ----------
   Vier Produkte vertikal vergleichbar: 4er-Haarlinien-Grid auf dem Stage-Raster
   (Desktop), 2 Spalten Tablet, gestapelt Mobil. Kein Karussell, keine Karten.
   Volle Tiefe liegt auf approach#offer (CTA = .btn-dark). Ohne JS komplett sichtbar. */
.hladder { max-width: var(--stage-max); margin-inline: auto;
  padding: clamp(3rem, 7vw, 5.5rem) var(--page-pad); }
.hladder-head { margin: 0 0 clamp(1.8rem, 3.5vw, 2.8rem); }
.hladder-head .tales-title { color: var(--ink); margin: 0 0 1rem; }
.hladder-head p { margin: 0; font-size: clamp(1rem, 1.2vw, 1.16rem); line-height: 1.6;
  color: var(--muted); max-width: var(--measure); }
.hladder-list { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--col-gap); }
.hladder-item { border-top: 1px solid #e7e5df; padding-top: clamp(1.1rem, 2vw, 1.5rem);
  display: flex; flex-direction: column; }
.hl-eyebrow { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 0.7rem; }
.hl-name { font-family: var(--font-display); font-weight: 800; letter-spacing: 0.01em;
  font-size: clamp(1.15rem, 1.5vw, 1.4rem); line-height: 1; color: var(--ink); margin: 0 0 0.7rem; }
.hl-goal { font-size: 0.95rem; line-height: 1.55; color: #3d3b36; margin: 0 0 0.9rem; }
.hl-result { font-size: 0.82rem; line-height: 1.5; color: var(--muted); margin: auto 0 0; }
.hladder .btn-dark { margin-top: clamp(1.6rem, 3vw, 2.2rem); }
@media (min-width: 681px) and (max-width: 1024px) {
  .hladder-list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: clamp(1.6rem, 3vw, 2.2rem); }
}
@media (max-width: 680px) {
  .hladder-list { grid-template-columns: 1fr; row-gap: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) { .hladder .btn-dark span[aria-hidden] { transition: none; } }

/* ===================== Use-Case-Fall (Detailseite, grau, ruhig) =====================
   Zwei Textbloecke untereinander (Problem / Loesung), links eine mitlaufende
   Fortschrittsleiste (Prozessname + zwei Stationen), dunkler Text-CTA, monochrom.
   Grund: der graue Radialverlauf aus KI-Check/Kontakt. JS: script.js [data-casebar]. */
.case { background: radial-gradient(125% 120% at 80% 6%, #efeeec 0%, #dcdbd7 55%, #cbc9c4 100%);
  --c-ink:#1c1a17; --c-body:#3b3934; --c-muted:#78766e; --c-faint:#a9a79e; --c-line:rgba(28,26,23,0.14); }
.case-wrap { max-width: 1020px; margin: 0 auto;
  padding: clamp(3rem, 8vw, 5.5rem) var(--pad) clamp(3.5rem, 9vw, 6rem);
  display: grid; grid-template-columns: 1fr; gap: 30px; }
@media (min-width: 820px) { .case-wrap { grid-template-columns: 172px minmax(0, 1fr); gap: 48px; } }
.case-rail { align-self: start; }
@media (min-width: 820px) { .case-rail { position: sticky; top: clamp(5rem, 12vh, 7rem); } }
.case-rail-name { font-family: var(--font-serif); font-size: 1.2rem; line-height: 1.2; color: var(--c-ink); margin: 0; }
.case-rail-kick { font-size: 0.68rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--c-faint); margin: 7px 0 0; }
.case-track { margin-top: 28px; padding-left: 16px; border-left: 1px solid var(--c-line); position: relative;
  display: flex; flex-direction: column; gap: 30px; }
.case-fill { position: absolute; left: -1px; top: 0; width: 2px; height: 8%; background: var(--c-ink); transition: height 0.2s linear; }
.case-tk { font-size: 0.82rem; color: var(--c-muted); position: relative; transition: color 0.3s ease; }
.case-tk::before { content: ""; position: absolute; left: -21px; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--c-faint); transition: background 0.3s ease; }
.case-tk.is-on { color: var(--c-ink); }
.case-tk.is-on::before { background: var(--c-ink); }
.case-main { min-width: 0; }
.case-kick { font-size: 0.71rem; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--c-muted); }
.case-title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.55rem, 3.4vw, 2.3rem); line-height: 1.12; letter-spacing: -0.01em; color: var(--c-ink); margin: 12px 0 0; max-width: 23ch; }
.case-lede { font-family: var(--font-serif); font-size: clamp(1.05rem, 1.7vw, 1.24rem); line-height: 1.5; color: var(--c-ink); margin: 18px 0 0; max-width: 54ch; }
.case-block { margin-top: clamp(2rem, 4.5vw, 2.8rem); padding-top: clamp(1.6rem, 3.5vw, 2.2rem); border-top: 1px solid var(--c-line); }
.case-h { font-family: var(--font-serif); font-size: clamp(1.3rem, 2.2vw, 1.5rem); line-height: 1.2; color: var(--c-ink); margin: 0 0 14px; }
.case-block p { font-family: var(--font-body); font-size: 1rem; line-height: 1.75; color: var(--c-body); margin: 0; max-width: 62ch; }
.case-block p + p { margin-top: 13px; }
.case-cta-wrap { margin-top: clamp(2rem, 4.5vw, 2.8rem); padding-top: clamp(1.6rem, 3.5vw, 2.2rem); border-top: 1px solid var(--c-line); }
.case-cta { font-family: var(--font-body); font-size: 0.95rem; font-weight: 500; color: var(--c-ink);
  text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.case-cta:hover { color: var(--red); }
.case-back { display: inline-block; margin-top: clamp(1.4rem, 3vw, 2rem); font-size: 0.82rem; color: var(--c-muted); text-decoration: none; }
.case-back:hover { color: var(--c-ink); }
@media (prefers-reduced-motion: reduce) { .case-fill, .case-tk, .case-tk::before { transition: none; } }

/* ===================== Approach: Case Studies (dunkel, Kontur-Titel) =====================
   Ein Kontur-Titel „Case Studies" (weiße Umrandung, keine Füllung), darunter zwei
   Fälle (Kennzahl links, Zitat rechts), getrennt durch einen ganz feinen grauen Strich. */
.cstud { background: #eceae3; }
.cstud-inner { max-width: var(--stage-max); margin-inline: auto; padding: clamp(4.5rem, 11vw, 8rem) var(--pad); }
.cstud-title {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  letter-spacing: -0.01em; line-height: 1; font-size: clamp(2.4rem, 7vw, 5rem);
  color: transparent; -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.4px #0B0B0B; text-stroke: 1.4px #0B0B0B;
  margin: 0 0 clamp(2.4rem, 5vw, 3.6rem);
}
.cstud-row { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
.cstud-metric b { display: block; font-family: var(--font-display); font-weight: 900;
  letter-spacing: -0.03em; line-height: 0.9; font-size: clamp(3rem, 7vw, 4.5rem); color: #0B0B0B; }
.cstud-metric span { display: block; margin-top: 0.7rem; font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: 0.08em; color: #6f6f6f; }
.cstud-q { font-weight: 600; font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.3;
  letter-spacing: -0.01em; color: #0B0B0B; margin: 0; }
.cstud-cite { font-size: 0.85rem; color: #6f6f6f; margin: 0.9rem 0 0; }
.cstud-cite b { color: #0B0B0B; font-weight: 600; }
/* Leiser Fallstudien-Link unter der cite (gleiche Sprache wie uc-more/case-cta) */
.cstud-link { display: inline-block; margin-top: 1rem; font-size: 0.85rem; font-weight: 500;
  color: #6f6f6f; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px; transition: color 0.15s ease; }
.cstud-link:hover { color: var(--ink); }
.cstud-link span { display: inline-block; transition: transform 0.15s ease; }
.cstud-link:hover span { transform: translateX(3px); }
.cstud-rule { height: 1px; background: #d5d3ca; margin: clamp(2rem, 4vw, 2.8rem) 0; }
@media (max-width: 760px) { .cstud-row { grid-template-columns: 1fr; gap: 1rem; } }
/* Fallback, falls text-stroke nicht unterstützt wird: Titel schlicht schwarz füllen */
@supports not ((-webkit-text-stroke: 1px #fff) or (text-stroke: 1px #fff)) {
  .cstud-title { color: #0B0B0B; -webkit-text-fill-color: #0B0B0B; }
}


/* ------------------------------ Quote ------------------------------ */
/* Linksbündiger, breiter Duktus (statt zentriert) — dasselbe grosse
   Statement-Set wie "More impact per head", nur flush-left in der Spalte. */
.quote {
  max-width: var(--maxwidth); margin-inline: auto;
  padding: clamp(6rem, 14vw, 11rem) var(--pad) clamp(7rem, 15vw, 12rem);
  text-align: left;
}
.qmark {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(5rem, 11vw, 9rem);
  line-height: 0.55; margin-bottom: 1.2rem;
  color: var(--red);
}
.quote blockquote { margin: 0; }
.q-small {
  font-family: var(--font-display);
  font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.4rem, 3.4vw, 2.4rem);
  line-height: 1.15; margin: 0 0 0.3rem;
}
.q-big {
  font-family: var(--font-display);
  font-weight: 900; text-transform: uppercase;
  font-size: clamp(2.6rem, 7vw, 5.4rem);
  line-height: 1.02; letter-spacing: -0.01em; margin: 0;
}

/* ------------------------------ Footer ------------------------------ */
.footer {
  border-top: 1px solid #E6E6E6;
  padding: 2rem var(--page-pad);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem 2rem;
}
.footer p { margin: 0; font-size: 0.9rem; color: var(--muted); }
.footer a { color: var(--muted); text-decoration: none; }
.footer-main a { border-bottom: 1px solid #D9D9D9; }
.footer-main a:hover { color: var(--ink); border-color: var(--ink); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 1.3rem; font-size: 0.85rem; }
.footer-legal a { border-bottom: 1px solid transparent; }
.footer-legal a:hover { color: var(--ink); border-color: var(--ink); }

/* ===================================================================== */
/* ==================  APPROACH (Unterseite, SS-Style)  ================= */
/* ===================================================================== */
.appro-hero {
  max-width: var(--maxwidth); margin-inline: auto;
  padding: clamp(6rem, 12vw, 10rem) var(--pad) clamp(2rem, 5vw, 4rem);
}
.appro-hero h1 {
  font-family: var(--font-display);
  font-weight: 900; text-transform: uppercase;
  font-size: clamp(2.8rem, 8vw, 6rem);
  line-height: 0.92; letter-spacing: -0.015em;
  margin: 0 0 1.4rem; max-width: 15ch;
  color: #fff;
}
.appro-hero h1 .accent { color: #fff; }   /* Hero-Headline komplett weiß (Wunsch Laurin) */
.appro-lead { max-width: 560px; font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: rgba(255, 255, 255, 0.92); }
.appro-intro { max-width: 52ch; color: #3d3d3d; margin: 0 0 clamp(2rem, 4vw, 3rem); }

.appro-section {
  max-width: var(--stage-max); margin-inline: auto;
  padding: clamp(3rem, 6vw, 5rem) var(--pad);
}
.appro-h2 {
  font-family: var(--font-display);
  font-weight: 900; text-transform: uppercase;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1; letter-spacing: -0.01em;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
}

/* ---------- Approach: „So läuft ein erstes Projekt ab" — vertikale Timeline ----------
   Ordered list, ohne JS lesbar. Grosse Nummer sitzt auf der verbindenden Spur
   (= linke Kante des Bodys); jede Stufe spiegelt die Leiter + „ist auch ein Halt". */
.flow-inner { max-width: var(--stage-max); margin-inline: auto; padding: clamp(3rem, 6vw, 5rem) var(--pad); }
.flow-lede { font-size: clamp(1.05rem, 1.7vw, 1.28rem); line-height: 1.6; color: var(--muted);
  max-width: 60ch; margin: 0 0 clamp(2.6rem, 5vw, 3.6rem); }
.flow-steps { list-style: none; margin: 0; padding: 0; }
.flow-step { --flow-w: clamp(52px, 8vw, 88px);
  display: grid; grid-template-columns: var(--flow-w) minmax(0, 1fr); align-items: start; }
.flow-num { grid-column: 1; grid-row: 1; justify-self: end; align-self: start;
  position: relative; z-index: 1; transform: translateX(50%);
  background: var(--white); padding: 0 0 0.35rem;
  font-family: var(--font-display); font-weight: 900; letter-spacing: -0.02em; line-height: 0.85;
  font-size: clamp(1.7rem, 4vw, 2.7rem); color: #d3d1c9; }
.flow-body { grid-column: 2; grid-row: 1;
  border-left: 2px solid #e7e5df; padding: 0 0 clamp(2.4rem, 5vw, 3.6rem) clamp(1.3rem, 3vw, 2.4rem); }
.flow-step:last-child .flow-body { border-left-color: transparent; }
.flow-body .flow-when { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--red); margin: 0 0 0.5rem; }
.flow-title { font-family: var(--font-display); font-weight: 800; letter-spacing: 0.01em;
  font-size: clamp(1.15rem, 1.9vw, 1.4rem); line-height: 1.2; color: var(--ink); margin: 0 0 0.7rem; }
.flow-body > p { font-size: 0.98rem; line-height: 1.68; color: #3d3b36; margin: 0; max-width: 60ch; }
.flow-body > p.flow-out { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid #e7e5df;
  font-size: 0.92rem; color: var(--muted); }
.flow-out b { color: var(--ink); font-weight: 600; }
@media (max-width: 560px) {
  .flow-step { --flow-w: 40px; }
  .flow-num { font-size: 1.5rem; }
}

/* Drei Prinzipien — rote Linie wächst bei Hover */
.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.6rem, 3vw, 3rem); }
.principle {
  position: relative;
  border-top: 4px solid #ECECEC;
  padding-top: 1.1rem;
}
.principle::before {
  content: "";
  position: absolute; top: -4px; left: 0;
  height: 4px; width: 56px;
  background: var(--red);
  transition: width 0.45s cubic-bezier(0.16,1,0.3,1);
}
.principle:hover::before { width: 100%; }
.principle h3 {
  font-family: var(--font-display);
  font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  margin: 0 0 0.6rem; color: var(--red);
}
.principle p { margin: 0; color: var(--ink); }

/* ------------- Angebot als Ordner-Registermappe (klickbar) -------------
   Gestapelte Aktenordner mit versetzten Tabs; Klick öffnet den Ordner
   (Accordion) mit weicher Grid-Rows-Animation. */
.folders { max-width: 980px; }
.folder { position: relative; border-top: 1px solid #E6E6E6; }
.folder:last-child { border-bottom: 1px solid #E6E6E6; }
/* rote Aktiv-Leiste links */
.folder::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--red);
  transform: scaleY(0); transform-origin: top;
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.folder.open::before { transform: scaleY(1); }

.folder-tab {
  width: 100%;
  display: flex; align-items: center; gap: clamp(0.8rem, 2vw, 1.4rem);
  border: 0; background: none; cursor: pointer; text-align: left;
  padding: clamp(1.05rem, 2.4vw, 1.8rem) 0;
  font-family: var(--font-display);
  font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.35rem, 3.2vw, 2.4rem);
  letter-spacing: -0.01em; line-height: 1;
  color: var(--ink);
  transition: color 0.25s ease, padding-left 0.4s cubic-bezier(0.16,1,0.3,1);
}
.folder-num {
  font-weight: 900; font-size: 0.62em; min-width: 1.7em;
  color: #cfcfcf;
  transition: color 0.25s ease;
}
.folder-tab::after {                     /* +/- Indikator rechts */
  content: "+"; margin-left: auto;
  font-family: var(--font-body); font-weight: 400; line-height: 1;
  font-size: 0.62em; color: var(--red);
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.folder.open .folder-tab::after { transform: rotate(45deg); }
.folder-tab:hover, .folder.open .folder-tab { color: var(--red); padding-left: 0.9rem; }
.folder-tab:hover .folder-num, .folder.open .folder-num { color: var(--red); }

.folder-hint {
  font-family: var(--font-body);
  font-size: 0.42em; letter-spacing: 0.14em; font-weight: 700;
  background: var(--red); color: #fff;
  padding: 0.4em 0.7em; align-self: center;
}

.folder-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s cubic-bezier(0.16,1,0.3,1);
}
.folder-body > div { overflow: hidden; }
.folder.open .folder-body { grid-template-rows: 1fr; }
.folder-body p {
  max-width: 64ch;
  margin: 0 0 1.6rem;
  padding-left: clamp(0px, 5vw, 3.4rem);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.65;
  color: var(--muted);
}
.folder-body p strong { font-weight: 700; color: var(--ink); }

/* ---------------- Angebot: Journey-Ladder (Approach) ----------------
   Vier Schritte auf einer roten Spine-Linie. Beim Reinscrollen setzt JS
   .is-drawn: die Linie zeichnet sich segmentweise, die Nummern-Knoten
   poppen nacheinander auf, die Karten fliegen gestaffelt ein.
   --d steuert den Versatz pro Schritt; Pseudo-Elemente erben --d. */
.ladder {
  list-style: none;
  margin: clamp(1.6rem, 3vw, 2.6rem) 0 0;
  padding: 0;
  --node: 56px;
  --spine: 2px;
}
.lstep {
  position: relative;
  display: grid;
  grid-template-columns: var(--node) 1fr;
  column-gap: clamp(1.1rem, 2.2vw, 2.1rem);
  padding-bottom: clamp(1rem, 2vw, 1.6rem);
}
.lstep:last-child { padding-bottom: 0; }
.lstep:nth-child(1) { --d: 0.05s; }
.lstep:nth-child(2) { --d: 0.55s; }
.lstep:nth-child(3) { --d: 1.05s; }
.lstep:nth-child(4) { --d: 1.55s; }

/* Verbindungslinie je Schritt: Track (grau) + Fill (rot, animiert gezeichnet) */
.lstep::before, .lstep::after {
  content: "";
  position: absolute;
  top: var(--node);
  bottom: 0;
  left: calc(var(--node) / 2 - var(--spine) / 2);
  width: var(--spine);
  border-radius: 2px;
}
.lstep:last-child::before, .lstep:last-child::after { display: none; }
.lstep::before { background: #e7e5e0; }
.lstep::after {
  background: var(--red);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.55s ease calc(var(--d) + 0.22s);
}
.ladder.is-drawn .lstep::after { transform: scaleY(1); }

/* Nummern-Knoten */
.lnode {
  position: relative;
  z-index: 1;
  width: var(--node);
  height: var(--node);
  border-radius: 50%;
  background: #fff;
  border: 2px solid #d9d7d0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transform: scale(0.4);
  transition:
    opacity 0.45s ease var(--d),
    transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) var(--d),
    border-color 0.4s ease var(--d),
    background-color 0.4s ease var(--d);
}
.lnum {
  font-family: var(--font-display);
  font-weight: 800; font-size: 1.3rem;
  letter-spacing: -0.02em; color: #b6b4ad;
  transition: color 0.4s ease var(--d);
}
.ladder.is-drawn .lnode { opacity: 1; transform: scale(1); border-color: var(--red); }
.ladder.is-drawn .lnum { color: var(--ink); }
.ladder.is-drawn .lstep--start .lnode { background: var(--red); }
.ladder.is-drawn .lstep--start .lnum { color: #fff; }

/* Karten: Produkt-Kacheln (flache Fläche statt offenem White Space).
   .lbody nutzt den grid-rows-Trick (0fr -> 1fr) für sanftes Auf-/Zuklappen. */
.lcard {
  background: #F7F6F3;
  padding: clamp(1rem, 2vw, 1.35rem) clamp(1.2rem, 2.5vw, 1.8rem);
  border-left: 3px solid transparent;
  opacity: 0;
  transform: translateX(26px);
  transition:
    opacity 0.55s ease calc(var(--d) + 0.12s),
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--d) + 0.12s),
    background-color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}
.ladder.is-drawn .lcard { opacity: 1; transform: none; }
.lstep:hover .lcard { background: #F2F1ED; }
.lstep.is-open .lcard {
  background: #fff;
  border-left-color: var(--red);
  box-shadow: 0 14px 34px rgba(17, 17, 17, 0.08);
}
/* Knoten optisch auf Höhe der Kachel-Kopfzeile */
.lnode { margin-top: clamp(0.3rem, 0.8vw, 0.55rem); }
.lhead {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  column-gap: 1rem;
  width: 100%;
  padding: 0; border: 0; background: none;
  cursor: pointer; text-align: left;
  font: inherit; color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.lcard-head {
  grid-column: 1;
  display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
}
.lname {
  font-family: var(--font-display);
  font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.35rem, 2.6vw, 2.05rem);
  letter-spacing: -0.01em; line-height: 1;
  transition: color 0.25s ease;
}
.lstep:hover .lname, .lstep.is-open .lname { color: var(--red); }
.ltag {
  font-family: var(--font-body);
  font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 700; background: var(--red); color: #fff;
  padding: 0.35em 0.65em; white-space: nowrap;
}
.llead {
  grid-column: 1;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, 1.7vw, 1.3rem);
  line-height: 1.15; margin-top: 0.55rem;
  color: var(--ink);
}
/* Plus-Indikator: zwei Balken, dreht sich im offenen Zustand zum × */
.lplus {
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
  position: relative; flex: none;
  width: 30px; height: 30px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.lplus::before, .lplus::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  background: var(--ink);
  transform: translate(-50%, -50%);
  transition: background 0.25s ease;
}
.lplus::before { width: 18px; height: 2px; }
.lplus::after  { width: 2px;  height: 18px; }
.lstep:hover .lplus::before, .lstep:hover .lplus::after { background: var(--red); }
.lstep.is-open .lplus { transform: rotate(45deg); }
.lstep.is-open .lplus::before, .lstep.is-open .lplus::after { background: var(--red); }

.lbody {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.lstep.is-open .lbody { grid-template-rows: 1fr; }
.lbody-in {
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.lstep.is-open .lbody-in { opacity: 1; transition-delay: 0.12s; }
.ldesc {
  margin: 0.85rem 0 0;
  font-size: clamp(0.98rem, 1.3vw, 1.06rem);
  line-height: 1.62; color: var(--muted);
  max-width: 54ch;
}
.lprice { margin: 1rem 0 0; font-size: 0.9rem; color: var(--muted); }
.lprice strong { color: var(--red); }

/* Enable-Preisvarianten: zwei Workshop-Tarife, prominenter Preis, „was ist drin" */
.etiers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
  margin-top: 1.15rem;
}
.etier {
  position: relative;
  display: flex; flex-direction: column;
  border: 1px solid #e4e2dc;
  padding: 1.15rem 1.25rem 1.3rem;
  background: #fff;
}
.etier--rec { border: 2px solid var(--red); }
.etier-flag {
  position: absolute; top: 0; right: 1rem;
  transform: translateY(-50%);
  font-family: var(--font-body); font-weight: 700;
  font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: #fff; background: var(--red);
  padding: 0.35em 0.6em;
}
.etier-dur {
  font-family: var(--font-body); font-weight: 700;
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 0.5rem;
}
.etier-price {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(2.3rem, 5.5vw, 3rem); line-height: 1;
  letter-spacing: -0.02em; color: var(--red); margin: 0;
}
.etier-tagline {
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.05rem; color: var(--ink); margin: 0.55rem 0 0.75rem;
}
.etier-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.etier-list li {
  position: relative; padding-left: 1.35rem;
  font-size: 0.9rem; line-height: 1.4; color: #3d3d3d;
}
.etier-list li::before {
  content: "\2713"; position: absolute; left: 0; top: 0.05em;
  color: var(--red); font-weight: 800;
}
@media (max-width: 600px) { .etiers { grid-template-columns: 1fr; } }

@media (max-width: 620px) {
  .ladder { --node: 46px; }
  .lstep { column-gap: 1rem; }
  .lnum { font-size: 1.1rem; }
}

.offers-note {
  margin: clamp(2.2rem, 4vw, 3.2rem) 0 0;
  max-width: 56ch;
  font-family: var(--font-display);
  font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.1rem, 2vw, 1.5rem); line-height: 1.15;
  border-left: 4px solid var(--red); padding-left: 1.1rem;
}

/* Rotes Statement-Panel (Pilot slots) */
.redpanel { background: var(--red-dk); color: #fff; padding: clamp(4rem, 8vw, 7rem) 0; }
.redpanel .inner { max-width: var(--stage-max); margin-inline: auto; padding-inline: var(--pad); }
.redpanel .label {
  display: inline-block; background: #fff; color: var(--ink);
  font-family: var(--font-body); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.14em; font-size: 0.72rem; padding: 0.35em 0.6em; margin-bottom: 1.4rem;
}
.redpanel h2 {
  font-family: var(--font-display);
  font-weight: 900; text-transform: uppercase;
  font-size: clamp(2.2rem, 6vw, 4.5rem);
  line-height: 0.98; color: var(--ink); margin: 0 0 1.4rem;
}
.redpanel p { max-width: 56ch; color: rgba(255,255,255,0.96); margin: 0 0 1.8rem; }

/* Kontakt-CTA (Approach) */
.appro-contact {
  max-width: var(--maxwidth); margin-inline: auto;
  padding: clamp(4rem, 8vw, 7rem) var(--pad);
}
.appro-contact h2 {
  font-family: var(--font-display);
  font-weight: 900; text-transform: uppercase;
  font-size: clamp(2.4rem, 7vw, 5rem);
  line-height: 0.95; margin: 0 0 1.2rem;
}
.appro-contact h2 .accent { color: var(--red); }
.appro-contact p { max-width: 48ch; margin: 0 0 2rem; }

/* Buttons */
.btn-red, .btn-white, .btn-dark {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-family: var(--font-body); font-weight: 700; font-size: 1rem;
  text-decoration: none; padding: 0.9rem 1.4rem;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-dk); transform: translateY(-2px); }
.btn-white { background: #fff; color: var(--ink); }
.btn-white:hover { transform: translateY(-2px); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: var(--red); transform: translateY(-2px); }
.btn-red span, .btn-white span, .btn-dark span { transition: transform 0.25s ease; }
.btn-red:hover span, .btn-white:hover span, .btn-dark:hover span { transform: translateX(5px); }
.btn-dark:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
/* Kompakte Angebotsvorschau (Home, nach den Use Cases) — schlanke Leiter
   Enable→Engine, feine Linien, keine Karten/Schatten/Radien (Brief #10). */
.offer-mini { max-width: var(--stage-max); margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 3rem) var(--page-pad) clamp(3rem, 7vw, 5rem); }
.offer-mini-label { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 clamp(1.2rem, 2.5vw, 1.8rem); }
.offer-mini-list { list-style: none; margin: 0 0 clamp(1.6rem, 3vw, 2.2rem); padding: 0;
  border-top: 1px solid #e7e5df; }
.offer-mini-row { display: grid; grid-template-columns: 2.6rem minmax(6rem, 8rem) 1fr;
  gap: clamp(1rem, 2.4vw, 2.2rem); align-items: baseline;
  padding: clamp(0.85rem, 1.8vw, 1.25rem) 0; border-bottom: 1px solid #e7e5df; }
.omr-no { font-family: var(--font-display); font-weight: 900; font-size: 0.95rem; color: var(--red); }
.omr-name { font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  letter-spacing: -0.01em; font-size: clamp(1.1rem, 1.6vw, 1.4rem); color: var(--ink); }
.omr-desc { font-size: clamp(0.98rem, 1.2vw, 1.1rem); line-height: 1.4; color: #3d3b36; }
@media (max-width: 640px) {
  .offer-mini-row { grid-template-columns: 2.2rem 1fr; row-gap: 0.35rem; }
  .omr-no { grid-row: span 2; }
  .omr-name, .omr-desc { grid-column: 2; }
}

/* --------------------- Periodicals (SS-Kachel-Grid) --------------------- */
.periodicals {
  max-width: var(--maxwidth);
  margin-inline: auto;
  padding: 0 var(--pad) clamp(5rem, 10vw, 8rem);
}
.peri-title {
  font-family: var(--font-display);
  font-weight: 900; text-transform: uppercase;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
}
.peri-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.peri-card {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
}
.peri-card svg {
  display: block;
  width: 100%; height: auto;
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.peri-card:hover svg { transform: scale(1.05); }
.peri-tag {
  position: absolute; top: 1rem; left: 1rem;
  background: #fff; color: var(--ink);
  font-size: 0.65rem; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 700;
  padding: 0.35em 0.6em;
}
.peri-card h3 {
  position: absolute; top: 2.8rem; left: 1rem; right: 2rem;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.1rem, 1.9vw, 1.5rem);
  line-height: 1.45;
}
.peri-card .bx {
  display: inline;
  background: #fff; color: var(--ink);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding: 0.06em 0.32em;
}
.peri-more {
  position: absolute; bottom: 1rem; left: 1rem;
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--ink); color: #fff;
  font-weight: 700; font-size: 0.85rem;
  padding: 0.55em 0.95em;
  transition: background 0.2s ease;
}
.peri-more span { transition: transform 0.25s ease; }
.peri-card:hover .peri-more { background: var(--red); }
.peri-card:hover .peri-more span { transform: translateX(4px); }
/* Dunkle Karte: schwarzer Chip würde im Hintergrund verschwinden → weißer Button */
.peri-card--ondark .peri-more { background: #fff; color: var(--ink); }
.peri-card--ondark:hover .peri-more { background: var(--red); color: #fff; }
@media (max-width: 900px) { .peri-grid { grid-template-columns: 1fr; } }

/* ----------------------- Legal-Seiten (Platzhalter) ----------------------- */
.legal {
  max-width: 820px;
  margin-inline: auto;
  padding: clamp(3rem, 7vw, 5rem) var(--pad) clamp(5rem, 9vw, 7rem);
}
.legal h1 {
  font-family: var(--font-display);
  font-weight: 900; text-transform: uppercase;
  font-size: clamp(2.2rem, 6vw, 3.8rem);
  line-height: 0.95;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
}
.legal h2 {
  font-family: var(--font-display);
  font-weight: 800; text-transform: uppercase;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  margin: 2.4rem 0 0.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid #EDEDED;
}
.legal p { color: var(--ink); }
.legal .ph { color: var(--muted); }

/* ------------------- Who we are / Credentials ------------------- */
.appro-body { max-width: 62ch; margin: 1.4rem 0 0; font-size: clamp(1.02rem, 1.5vw, 1.18rem); line-height: 1.7; }
.appro-body strong { color: var(--ink); font-weight: 700; }
.cred-list {
  list-style: none; padding: 0;
  margin: clamp(1.8rem, 3vw, 2.6rem) 0 0;
  display: flex; flex-wrap: wrap; gap: 0.7rem 1.7rem;
}
.cred-list li {
  position: relative; padding-left: 1.15rem;
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(0.85rem, 1.3vw, 1.05rem); letter-spacing: 0.02em; color: var(--ink);
}
.cred-list li::before {
  content: ""; position: absolute; left: 0; top: 0.32em;
  width: 10px; height: 10px; background: var(--red);
}

/* ------------------- FAQ (native <details>) ------------------- */
/* ===== Q&A / FAQ — 1inch-Split als dunkles Band (Approach) =====
   Zweispaltig: Titel links, Fragenliste rechts. Marker (+/-) links vor der
   Frage, keine Trennlinien, viel Luft. „Show more" kuerzt CSS-only auf 6. */
.faq-band { background: #131311; color: #f4f2ec; padding: clamp(4rem, 9vw, 7rem) 0; }
.faq-split { max-width: var(--stage-max); margin-inline: auto; padding-inline: var(--page-pad);
  display: grid; grid-template-columns: 0.82fr 1.6fr; gap: clamp(28px, 5vw, 88px); align-items: start; }
.faq-title { font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  letter-spacing: -0.01em; line-height: 0.96; margin: 0;
  font-size: clamp(2rem, 3.4vw, 3rem); color: #f4f2ec; }
.faq-title .faq-dot { color: var(--red); }

.faq { position: relative; margin: 0; max-width: none; }
.faq details { border: 0; }
.faq summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 1.1rem 1fr; gap: clamp(16px, 2vw, 30px); align-items: baseline;
  padding: clamp(1.15rem, 2.1vw, 1.55rem) 0;
  font-family: var(--font-body); font-weight: 700; text-transform: none;
  font-size: clamp(1.06rem, 1.5vw, 1.28rem); letter-spacing: 0; line-height: 1.25;
  color: #f4f2ec; transition: color 0.2s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: "+"; grid-column: 1; justify-self: start;
  font-family: var(--font-body); font-weight: 400; font-size: 1.35rem; line-height: 1;
  color: #c9c6be; transition: color 0.2s ease;
}
.faq details[open] summary::before { content: "\2212"; color: var(--red); }
.faq summary:hover { color: #ffffff; }
.faq summary:hover::before { color: var(--red); }
.faq details p {
  margin: 0 0 clamp(1.1rem, 2vw, 1.6rem); max-width: 60ch;
  padding-left: calc(1.1rem + clamp(16px, 2vw, 30px));
  font-family: var(--font-body); font-size: clamp(1rem, 1.3vw, 1.08rem); line-height: 1.62; color: #a5a29a;
}
.faq details p strong { color: #f4f2ec; font-weight: 700; }
.faq details p a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }

.faq-more-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.faq details:nth-of-type(n+7) { display: none; }
.faq-more-toggle:checked ~ details:nth-of-type(n+7) { display: block; }
.faq-more {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-top: clamp(1.1rem, 2.2vw, 1.7rem);
  margin-left: calc(1.1rem + clamp(16px, 2vw, 30px));
  font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; color: var(--red);
  cursor: pointer; user-select: none;
}
.faq-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.faq-more-toggle:checked ~ .faq-more { display: none; }
.faq-more-toggle:focus-visible ~ .faq-more { outline: 2px solid var(--red); outline-offset: 4px; }

@media (max-width: 760px) {
  .faq-split { grid-template-columns: 1fr; gap: clamp(20px, 5vw, 32px); }
}

/* ------------------- Schluss-CTA (Conversion) ------------------- */
.cta-final { background: #fff; color: var(--ink); padding: clamp(4rem, 9vw, 7rem) 0; border-top: 1px solid #ececec; }
.cta-final .inner { max-width: var(--stage-max); margin-inline: auto; padding-inline: var(--page-pad); }
.cta-final h2 {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(2.4rem, 7vw, 5rem); line-height: 0.95; margin: 0 0 1.2rem;
}
.cta-final > .inner > p {
  max-width: 52ch; margin: 0 0 2rem;
  color: var(--muted);
  font-size: clamp(1.02rem, 1.5vw, 1.18rem); line-height: 1.6;
}
.cta-row { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.cta-mail {
  color: var(--muted); text-decoration: none; font-weight: 600;
  border-bottom: 1px solid rgba(17,17,17,0.28); padding-bottom: 2px;
}
.cta-mail:hover { color: var(--ink); border-color: var(--red); }
.cta-meta { margin: 0; font-size: 0.95rem; color: rgba(255,255,255,0.6); }
.cta-meta a { color: rgba(255,255,255,0.85); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.25); }
.cta-meta a:hover { color: #fff; }

/* --------------------- Reveal: „Wipe-up" (einheitlich) ---------------------
   Beim Scrollen werden Elemente hinter einer unsichtbaren Kante hervor-
   gewischt (clip-path) und steigen dabei sanft nach oben. Das JS staffelt
   Elemente im selben Sichtbereich (transition-delay) für einen Kaskaden-Effekt. */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.5s ease,
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Reveal-Variante: Element „setzt sich" (Scale+Fade) statt zu steigen — bricht
   den uniformen translateY-Reflex auf. Nutzt denselben .is-visible-Toggle. */
.reveal.reveal-scale {
  transform: scale(0.955);
  transition:
    opacity 0.6s ease,
    transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.reveal-scale.is-visible { transform: none; }

/* Home-About: Absätze treten gestaffelt auf (statt Ein-Block-Fade). Container
   bleibt statisch, nur die Kinder animieren nacheinander. */
.about-text.reveal { opacity: 1; transform: none; transition: none; }
.about-text.reveal > p,
.about-text.reveal > .more {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.55s ease,
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.about-text.reveal.is-visible > p,
.about-text.reveal.is-visible > .more { opacity: 1; transform: none; }
.about-text.reveal.is-visible > p:nth-of-type(1) { transition-delay: 0.05s; }
.about-text.reveal.is-visible > p:nth-of-type(2) { transition-delay: 0.15s; }
.about-text.reveal.is-visible > p:nth-of-type(3) { transition-delay: 0.25s; }
.about-text.reveal.is-visible > .more { transition-delay: 0.35s; }
@media (prefers-reduced-motion: reduce) {
  .about-text.reveal > p,
  .about-text.reveal > .more { opacity: 1; transform: none; transition: none; }
}

/* ----------------------------- Responsive ----------------------------- */
@media (max-width: 900px) {
  .principles { grid-template-columns: 1fr; gap: 1.8rem; }
  .facts { grid-template-columns: 1fr; gap: 1.8rem; }
}
@media (max-width: 860px) {
  .slide-body { grid-template-columns: 1fr; align-items: start; }
  .controls { max-width: none; gap: 3rem; }
  .about-text { margin-left: 0; }
}
@media (max-width: 560px) {
  .offers { grid-template-columns: 1fr; }
  .footer { justify-content: flex-start; }
}

/* ------------------- Reduced motion: alles ruhig ------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; clip-path: none; }
  .hero-steps .line { opacity: 1; transform: none; animation: none; }
  .hero-media img { transform: none; animation: none; }
  .scroll-cue { animation: none; }
}

/* ============================== Minds-Seite ==============================
   SS-Spiegel, bewusst schlicht: Weiß/Schwarz, Rot nur als Tupfer. */
.top-nav { display: flex; align-items: center; gap: clamp(0.8rem, 2vw, 1.4rem); }

.mhero { position: relative; height: 82vh; min-height: 560px; overflow: hidden; }
/* Dunkler Verlauf unten, damit die weiße Headline auf hellen Bildern sicher liest */
.mhero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top,
    rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.40) 34%, rgba(0, 0, 0, 0) 66%);
}
.mhero img, .mhero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.mhero-video { z-index: 1; }                  /* Video über dem Standbild (Fallback) */
/* Kein Ken-Burns-Zoom mehr: die Architektur-/Bergbilder bleiben statisch und
   zeigen so mehr vom Motiv (weniger „rangezoomt"), außerdem schärfer. */
.mhero-title {
  position: absolute; left: var(--pad); bottom: clamp(1.5rem, 5vh, 3.5rem);
  z-index: 2;                                 /* über Video + Standbild */
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900; text-transform: uppercase;
  font-size: clamp(2.4rem, 6.5vw, 5.5rem);
  line-height: 0.95; letter-spacing: -0.01em;
  color: #fff;
}

.mtext {
  max-width: 720px;
  margin-inline: 0;
  padding: clamp(4rem, 9vw, 7rem) var(--pad);
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
}
.mtext--tight { padding-top: clamp(2.5rem, 5vw, 4rem); }
/* Approach-Intro linksbündig zur Inhaltsspalte (statt zentrierter 720px-mtext-
   Spalte), damit es zum harten Links-Duktus der Approach-Seite passt. Das
   Textmass bleibt über max-width am Absatz lesbar. Nur Approach, nicht who/Minds. */
#approach-intro { max-width: var(--stage-max); padding-bottom: clamp(1.4rem, 3vw, 2.2rem); }
#approach-intro p { max-width: 65ch; }

.mstatement { text-align: left; }
.mstatement-title {
  max-width: var(--maxwidth);
  margin: 0 auto;
  padding: 0 var(--pad) clamp(2rem, 5vw, 3.5rem);
  font-family: var(--font-display);
  font-weight: 900; text-transform: uppercase;
  /* kleiner gefasst, damit „unternehmerisches Team." als eine Zeile durchgeht (3 Zeilen total) */
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 0.98;
  color: var(--ink);
}
.mstatement-img { margin: 0; }
.mstatement-img img { display: block; width: 100%; height: clamp(320px, 55vh, 560px); object-fit: cover; filter: grayscale(1); }
.mstatement-img--color img { filter: none; }   /* Farbbild (roter Sessel) bleibt farbig */

.founders { max-width: var(--stage-max); margin-inline: auto; padding: clamp(3rem, 7vw, 5.5rem) var(--pad); }
.founder-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.fphoto {
  position: relative;
  aspect-ratio: 4 / 5; max-width: 420px;
  background: #EDEDED;
  display: grid; place-items: center;
  margin-bottom: 1.4rem;
}
.fphoto span {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(3rem, 6vw, 5rem); color: #C9C9C9;
}
.fphoto em { position: absolute; bottom: 0.8rem; left: 0; right: 0; text-align: center;
  font-style: normal; font-size: 0.8rem; color: #9A9A9A; }
.fname {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem); letter-spacing: 0.02em;
}
.ftag { font-weight: 700; margin: 0.35em 0 1em; }

.takeoff {
  position: relative; color: #fff; overflow: hidden;
  min-height: clamp(440px, 64vh, 680px);
  display: flex; align-items: center;
  background: #0B0B0B url("images/approach-red.jpg?v=2") center / cover no-repeat;
}
.takeoff::before {              /* dunkler Verlauf links: rote Headline + Button lesbar */
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(90deg,
    rgba(9,9,10,0.95) 0%, rgba(9,9,10,0.87) 42%,
    rgba(9,9,10,0.62) 70%, rgba(9,9,10,0.42) 100%);
}
.takeoff-inner { position: relative; z-index: 1; }
.takeoff-inner {
  max-width: var(--maxwidth); margin-inline: auto;
  padding: clamp(4rem, 9vw, 7rem) var(--pad);
}
.takeoff h2 {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(2.6rem, 7vw, 6rem); line-height: 0.92;
  margin-bottom: 1.2rem;
}
.takeoff p { max-width: 46ch; color: rgba(255,255,255,0.88); margin-bottom: 2rem; }

.whyjoin { max-width: var(--stage-max); margin-inline: auto; padding: clamp(3rem, 7vw, 5.5rem) var(--pad) clamp(4rem, 8vw, 6rem); }
.wj-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.2rem, 3vw, 2.4rem);
  margin-top: clamp(1.6rem, 3.5vw, 2.6rem);
}
.wj-card {
  border-top: 3px solid var(--ink);
  padding-top: 1.1rem;
  transition: border-color 0.25s ease;
}
.wj-card:hover { border-color: var(--red); }
.wj-card h3 {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: 1.15rem; letter-spacing: 0.04em; margin-bottom: 0.5rem;
}
.wj-card .ask { font-weight: 700; margin: 0; }

@media (max-width: 760px) {
  .founder-grid, .wj-grid { grid-template-columns: 1fr; }
  .mhero { height: 56vh; }
}

/* ===================== Divider-Band (Bild-Trenner) =====================
   Vollbreiter Bild-Streifen zwischen Sektionen — Büro/editorial mit
   dezentem Rot, bringt Varianz in die sonst textlastigen Seiten. */
.divider-band { width: 100%; overflow: hidden; line-height: 0; }
.divider-band img {
  display: block; width: 100%;
  height: clamp(240px, 40vh, 440px);
  object-fit: cover; object-position: center;
}
@media (max-width: 760px) {
  .divider-band img { height: clamp(200px, 34vh, 320px); }
}

/* ===== Use-Case-Überschrift (links bündig mit den Bildern, statt Banner) ===== */
.tales-title {
  font-family: var(--font-display);
  font-weight: 900; text-transform: uppercase;
  font-size: clamp(2rem, 5.5vw, 4rem);
  line-height: 0.95; letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 clamp(2rem, 5vw, 3.5rem);
}

/* ===== Approach-Hero als Vollbild (Bild hinter dem Text, wie Minds/Home) ===== */
.appro-hero--img {
  position: relative;
  max-width: none; margin: 0;          /* Vollbreite statt zentriertem Container */
  padding: 0;
  min-height: clamp(560px, 86vh, 860px);
  display: flex; align-items: center;
  overflow: hidden;
}
.appro-hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  z-index: 0;
}
.appro-hero--img::after {              /* dunkler Verlauf links: weiße Headline bleibt lesbar */
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg,
    rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.55) 34%,
    rgba(0,0,0,0.12) 62%, rgba(0,0,0,0) 82%);
}
.appro-hero--img .appro-hero-inner {
  position: relative; z-index: 2;
  display: block;                       /* kein Zwei-Spalten-Grid mehr */
  width: 100%; max-width: var(--maxwidth);
  margin-inline: auto;
  padding: 0 var(--pad);
}
.appro-hero--img .appro-hero-text { max-width: 62%; }
@media (max-width: 760px) {
  .appro-hero--img { min-height: 70vh; }
  .appro-hero-bg { object-position: 72% center; }
  .appro-hero--img::after {
    background: linear-gradient(90deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.6) 55%, rgba(0,0,0,0.32) 100%);
  }
  .appro-hero--img .appro-hero-text { max-width: 100%; }
}

/* ===================== Credibility-Strip (Approach, oben) =====================
   Kompakter Trust-Block direkt unter dem Hero (ersetzt die frühere große
   „Who's behind ADA"-Sektion weiter unten). Schlicht, im Seiten-Look. */
.appro-cred {
  max-width: var(--maxwidth);
  margin: 0 auto;
  padding: clamp(0.5rem, 2vw, 1.5rem) var(--pad) clamp(2rem, 5vw, 3.5rem);
}
.appro-cred-line {
  max-width: 62ch;
  font-size: clamp(1.02rem, 1.7vw, 1.2rem);
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 1.4rem;
}
.appro-cred-line strong { color: var(--ink); font-weight: 700; }

/* ============================== Careers-Seite ==============================
   SS-Career-Spiegel: Hero (nutzt .mhero), „Join us" als Hollow-Headline,
   Stellen als aufklappbare Zeilen, schnelle Bewerbungsmaske mit CV-Dropzone. */

/* „Join us" — weiße Schrift mit schwarzer Umrandung (Hollow-Stil) */
.joinus {
  max-width: var(--stage-max); margin-inline: auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--page-pad) clamp(4rem, 8vw, 6rem);
}
.join-title {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(3.4rem, 11vw, 9rem); line-height: 0.9; letter-spacing: -0.01em;
  color: #fff;
  -webkit-text-stroke: 2.5px var(--ink);
  paint-order: stroke fill;
  margin: 0 0 clamp(2rem, 5vw, 3.5rem);
}

/* ---------- Offene Stellen: aufklappbare Zeilen ---------- */
.role { border-top: 1px solid #E4E4E4; }
.role:last-child { border-bottom: 1px solid #E4E4E4; }
.role-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: clamp(0.8rem, 3vw, 2rem);
  align-items: center;
  width: 100%; text-align: left;
  padding: clamp(1.3rem, 3vw, 2rem) 0;
  background: none; border: 0; cursor: pointer;
  font: inherit; color: inherit;
}
.role-name {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(1.5rem, 3.6vw, 2.6rem); letter-spacing: -0.01em; line-height: 1;
  transition: color 0.2s ease;
}
.role-name em { font-style: normal; font-weight: 700; font-size: 0.55em; color: var(--muted); }
.role-head:hover .role-name { color: var(--red); }
.role-meta { font-weight: 600; font-size: 0.9rem; color: var(--muted); white-space: nowrap; }
.role-x {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.9rem; line-height: 1; color: var(--red);
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
.role.open .role-x { transform: rotate(45deg); }
.role-body {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s cubic-bezier(0.16,1,0.3,1);
}
.role.open .role-body { grid-template-rows: 1fr; }
.role-inner { overflow: hidden; }
.role-lead {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.05rem, 2vw, 1.35rem); line-height: 1.3;
  max-width: 56ch; margin: 0 0 1.4rem;
}
.role-cols {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.4rem, 4vw, 3.5rem);
  margin-bottom: 1.8rem;
}
.role-cols h3 {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: 0.85rem; letter-spacing: 0.07em; margin-bottom: 0.7rem;
}
.role-cols ul { margin: 0; padding-left: 1.1rem; }
.role-cols li { margin-bottom: 0.5rem; }
.role-apply { display: inline-block; margin-bottom: clamp(1.5rem, 3vw, 2.2rem); }
@media (max-width: 760px) {
  .role-head { grid-template-columns: 1fr auto; }
  .role-meta { display: none; }
  .role-cols { grid-template-columns: 1fr; }
}

/* ---------- Bewerbungsmaske ---------- */
.apply { background: #F4F3F1; }
.apply-inner {
  max-width: 860px; margin-inline: auto;
  padding: clamp(3.5rem, 8vw, 6.5rem) var(--pad);
}
.apply-h {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(2rem, 5vw, 3.4rem); line-height: 0.95; margin-bottom: 0.8rem;
}
.apply-sub { color: var(--muted); max-width: 52ch; margin-bottom: 2.2rem; }
.apply-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1.1rem 1.4rem; margin-bottom: 1.4rem;
}
.apply-form label {
  display: block; font-weight: 700; font-size: 0.9rem;
}
.apply-form .opt { font-weight: 400; color: var(--muted); }
.apply-form input, .apply-form select {
  display: block; width: 100%; margin-top: 0.45rem;
  font: inherit; color: var(--ink);
  background: #fff; border: 1px solid #DDD; border-radius: 0;
  padding: 0.75rem 0.9rem;
}
.apply-form input:focus-visible, .apply-form select:focus-visible {
  outline: 3px solid var(--ink); outline-offset: 1px;
}
.dropzone {
  display: flex; align-items: center; gap: 1rem;
  border: 2px dashed #C9C9C9; background: #fff;
  padding: clamp(1.2rem, 3vw, 1.8rem);
  cursor: pointer; margin-bottom: 1.6rem;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.dropzone.dragover, .dropzone:hover { border-color: var(--red); background: #FFF7F8; }
.dz-icon {
  display: grid; place-items: center;
  width: 44px; height: 44px; flex: none;
  background: var(--red); color: #fff;
  font-size: 1.4rem; font-weight: 700;
}
.dz-text { line-height: 1.45; }
.dz-text small { color: var(--muted); }
.dz-file {
  margin-left: auto; font-weight: 700; font-size: 0.9rem;
  background: var(--ink); color: #fff; padding: 0.45rem 0.8rem;
  max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.apply-submit { border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.apply-note { margin-top: 1rem; font-weight: 600; }
@media (max-width: 640px) { .apply-grid { grid-template-columns: 1fr; } }

/* hidden-Attribut gewinnt immer (Author-Styles wie .apply-form input
   würden es sonst mit display:block übersteuern — z. B. der CV-Dateiinput). */
[hidden] { display: none !important; }

/* ----------------------- KI-Readiness-Check ----------------------- */
.check { max-width: 780px; margin-inline: auto;
  padding: clamp(3rem, 8vw, 5.5rem) var(--pad) clamp(5rem, 10vw, 8rem);
  min-height: 68vh; }
.check-h1 { font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(2rem, 5.5vw, 3.6rem); line-height: 1.02; letter-spacing: -0.01em;
  margin: 0 0 1.2rem; }
.check-sub { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: #3d3d3d; max-width: 46ch;
  margin: 0 0 2rem; line-height: 1.5; }
.check-go { margin-bottom: 1.1rem; }
/* Solider roter Button: die UA-Default-Umrandung von <button> weg (Bevel/dünne
   rote Kante auf rotem Grund). Ergebnis-CTA ist ein <a> und ohnehin sauber. */
.check .btn-red { border: none; }
.check-footnote { font-size: 0.85rem; color: var(--muted); margin: 1.4rem 0 0; }
.check-progress { font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.14em; font-size: 0.72rem; color: var(--red); margin: 0 0 1rem; }
.check-q { font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.55rem, 3.4vw, 2.4rem); line-height: 1.1;
  margin: 0 0 clamp(1.6rem, 3vw, 2.4rem); }
.check-cards { display: grid; gap: 0.85rem; }
/* Fortschrittsbalken über der Frage */
.check-bar { height: 4px; background: #ededed; margin: 0 0 1.1rem; }
.check-bar-fill { height: 100%; background: var(--red); width: 0;
  transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
.check-card { display: flex; align-items: center; gap: 0.95rem; width: 100%; text-align: left;
  font: inherit; font-size: clamp(1rem, 1.35vw, 1.1rem); line-height: 1.4; color: var(--ink);
  background: #fff; border: 2px solid #e6e6e6; padding: 1.05rem 1.3rem; cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; }
.check-card-key { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem;
  font-family: var(--font-display); font-weight: 800; font-size: 0.95rem;
  background: #f2f2f2; color: var(--ink); transition: background 0.15s ease, color 0.15s ease; }
.check-card-t { flex: 1; }
.check-card:hover, .check-card:focus-visible { border-color: var(--red); background: #fff5f6;
  transform: translateX(4px); box-shadow: 0 8px 22px rgba(237, 40, 57, 0.10); outline: none; }
.check-card:hover .check-card-key, .check-card:focus-visible .check-card-key { background: var(--red); color: #fff; }
.check-card.is-picked { border-color: var(--red); }
.check-card.is-picked .check-card-key { background: var(--red); color: #fff; }
.check-back { margin-top: 1.6rem; background: none; border: none; font: inherit;
  font-weight: 600; color: var(--muted); cursor: pointer; padding: 0.3rem 0; }
.check-back:hover { color: var(--ink); }
/* Ergebnis */
.check-eyebrow { font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.14em; font-size: 0.72rem; color: var(--muted); margin: 0 0 0.8rem; }
.check-rh { font-family: var(--font-display); font-weight: 900;
  font-size: clamp(1.9rem, 4.5vw, 3rem); line-height: 1.03; margin: 0 0 1.2rem; }
.check-diag { font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.5; color: var(--ink);
  margin: 0 0 1.4rem; max-width: 52ch; }
.check-ready { font-size: 1.05rem; line-height: 1.5; color: #3d3d3d; margin: 0 0 1.4rem;
  max-width: 52ch; }
.check-second { font-size: 1rem; color: var(--muted); margin: 0 0 0.5rem; }
.check-cta { background: var(--ink); color: #fff; padding: clamp(1.6rem, 3vw, 2.2rem);
  margin: 2rem 0 0; }
.check-cta-title { font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.2rem, 2vw, 1.5rem); margin: 0 0 0.6rem; }
.check-cta-body { color: rgba(255,255,255,0.85); margin: 0 0 1.4rem; max-width: 46ch;
  line-height: 1.5; }
.check-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; }
.check-cta-link { color: #fff; text-decoration: underline; text-underline-offset: 3px;
  font-weight: 600; }
.check-cta-link:hover { color: var(--red); }
.check-again { margin-top: 2rem; background: none; border: none; font: inherit;
  font-weight: 600; color: var(--muted); cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px; padding: 0.3rem 0; }
.check-again:hover { color: var(--ink); }
/* Ergebnis: Dimensionen-Report (Benchmark-Balken, kein Gesamt-Score) */
.check-report { margin: clamp(1.8rem, 3.5vw, 2.6rem) 0 0; }
.check-section-label { font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.14em; font-size: 0.72rem; color: var(--muted);
  margin: clamp(1.8rem, 3.5vw, 2.6rem) 0 1.2rem;
  padding-top: clamp(1.6rem, 3vw, 2.2rem); border-top: 1px solid #e7e5e0; }
.check-report .check-section-label:first-child { margin-top: 0; }
.check-dims { display: grid; gap: clamp(1.1rem, 2.2vw, 1.6rem); }
.check-dim { display: grid; gap: 0.55rem; }
.check-dim-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.check-dim-name { font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1rem, 1.5vw, 1.18rem); color: var(--ink); line-height: 1.1; }
.check-dim-note { font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; font-size: 0.66rem; color: var(--muted); white-space: nowrap; }
.check-dim.is-top .check-dim-name { color: var(--red); }
.check-dim.is-top .check-dim-note { color: var(--red); }
.check-dim-track { height: 10px; background: #f0efec; overflow: hidden; }
.check-dim-fill { height: 100%; width: 0; background: #cfcdc8;
  transition: width 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
.check-dim.is-top .check-dim-fill { background: var(--red); }
@media (prefers-reduced-motion: reduce) { .check-dim-fill { transition: none; } }
/* Ergebnis: Story-Bild als Hero-Band (passend zur Kategorie) */
.check-result-img { margin: 0 0 1.6rem; overflow: hidden; }
.check-result-img img { display: block; width: 100%; height: clamp(200px, 34vw, 360px);
  object-fit: cover; }
/* Jeder Screen blendet sanft ein */
.check-screen { animation: checkIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes checkIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .check-card:hover, .check-card:focus-visible { transform: none; }
  .check-screen { animation: none; }
  .check-bar-fill { transition: none; }
}


/* ===================== KI-Check (Locomotive-Stil, check.html) =====================
   Grosser tippender Text auf weichem Grau-Verlauf, darunter Frosted-Glass-Pills.
   Engine: script.js Abschnitt 7. Reduced-motion: kein Tippen/kein Pill-Delay. */
.chk {
  position: relative; display: flex; min-height: 100vh; min-height: 100svh;
  background: radial-gradient(130% 130% at 80% 8%, #ededed 0%, #d3d3d3 56%, #bfbfbf 100%);
}
.chk-stage { width: 100%; max-width: 900px; margin: auto; padding: 8rem var(--pad) 5rem; }
/* Buehne wird per JS programmatisch fokussiert (tabIndex -1, A11y-Fokuswechsel auf
   neuen Inhalt). KEIN sichtbarer Rahmen dafuer — sonst legt die globale
   :focus-visible-Regel (3px ink) einen schwarzen Kasten um die ganze Buehne. */
.chk-stage:focus, .chk-stage:focus-visible,
.check-static:focus, .check-error:focus { outline: none; }
/* Statischer KI-Check-Einstieg + Fehler-Fallback teilen die Buehne der Engine
   (gleiche Zentrierung/Polsterung). Sichtbar, bis die Engine interactive-ready
   ist; der Watchdog schaltet bei echtem Fehler auf #check-error. */
.check-static, .check-error { width: 100%; max-width: 900px; margin: auto; padding: 8rem var(--pad) 5rem; }
.check-error[hidden] { display: none; }
body.check-interactive-ready #check-static { display: none; }
.chk-prog {
  min-height: 1.1em; margin: 0 0 1.4rem; font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: #6f6f6f;
}
.chk-text {
  margin: 0; max-width: 20ch; white-space: pre-line;
  font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em; line-height: 1.12;
  font-size: clamp(1.9rem, 4.6vw, 3.1rem); color: #191919; min-height: 1.12em;
}
.chk-text--result { font-size: clamp(1.25rem, 2.4vw, 1.72rem); line-height: 1.42; max-width: 42ch; }
/* KI-Reaktion auf die gewaehlte Antwort: bleibt stehen, die naechste Frage
   wird darunter geschrieben. Gleiche Groesse wie die Frage, nur gedaempft. */
.chk-ack { color: #6f6f6f; margin: 0 0 0.5em; max-width: 24ch; }
.chk-foot-link { color: #6f6f6f; text-decoration: underline; text-underline-offset: 2px; transition: color 0.2s ease; }
.chk-foot-link:hover { color: var(--red); }
/* Zurueckhaltender direkter Kontaktweg unter den Optionen (kein 4. gleichwertiger
   Button). Kleiner, gedaempft; Links mit ~44px Touch-Flaeche. */
.chk-direct { margin: clamp(1.3rem, 3vw, 1.9rem) 0 0; font-size: 0.92rem; line-height: 1.4; color: #6f6f6f; }
.chk-direct[hidden] { display: none; }
.chk-direct-lead { color: #6f6f6f; }
.chk-direct-link { display: inline-block; padding: 11px 3px; color: #191919;
  text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s ease; }
.chk-direct-link:hover { color: var(--red); }
.chk-direct-sep { color: #c4c4c4; }
/* „Let's talk"-Gespraech (contact): Eingabefelder im Prozess-Pfad. */
.chk-fields { margin-top: clamp(1.6rem, 3vw, 2.4rem); max-width: 560px; }
.chk-field { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #999; padding-bottom: 10px; margin-bottom: 14px; }
.chk-field input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  font-family: var(--font-body); font-size: clamp(1rem, 1.5vw, 1.15rem); color: #191919; }
.chk-field input::placeholder { color: #8a8a8a; }
.chk-field--send { border: 0; padding: 0; margin: 0.4rem 0 0; }
.chk-send { flex: none; background: var(--red); color: #fff; border: 0; border-radius: 999px;
  padding: 13px 22px; font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; cursor: pointer;
  transition: background 0.2s ease; }
.chk-send:hover { background: #c81f2d; }
.chk-noscript { max-width: var(--maxwidth); margin: 8rem auto; padding: 0 var(--pad); font-size: 1.1rem; color: #333; }
.chk-cur {
  display: inline-block; width: 0.5ch; height: 1em; background: #191919;
  vertical-align: -2px; margin-left: 1px; animation: chkBlink 1.05s steps(1) infinite;
}
@keyframes chkBlink { 50% { opacity: 0; } }
/* „Denk-Pause" vor jeder KI-Antwort */
.chk-dots span { display: inline-block; width: 5px; height: 5px; margin: 0 2px; border-radius: 50%;
  background: #8a8a8a; vertical-align: middle; animation: chkBounce 1.2s infinite; }
.chk-dots span:nth-child(2) { animation-delay: 0.15s; }
.chk-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes chkBounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } }
.chk-sub {
  opacity: 0; transform: translateY(6px); transition: opacity 0.5s ease, transform 0.5s ease;
  margin: 1.4rem 0 0; max-width: 46ch; font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.55; color: #4a4a4a;
}
.chk-sub.is-in { opacity: 1; transform: none; }
/* Ergebnis progressiv: kurzer Grund + Produkt/Preis unter der Headline (vor dem
   CTA), ausfuehrliche Erklaerung erst danach. */
.chk-res-line { display: block; }
.chk-res-action { display: block; margin-top: 0.55rem; font-family: var(--font-display);
  font-weight: 700; font-size: clamp(1rem, 1.4vw, 1.12rem); color: #191919; }
.chk-detail { margin: clamp(1.3rem, 3vw, 1.9rem) 0 0; max-width: 46ch; white-space: pre-line;
  font-size: clamp(0.98rem, 1.35vw, 1.1rem); line-height: 1.55; color: #4a4a4a; }
.chk-detail:empty { margin: 0; }
.chk-pills { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(2rem, 4vw, 2.8rem); align-items: flex-start; }
.chk-pill {
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.45s ease, transform 0.45s ease, background 0.25s ease, box-shadow 0.25s ease, color 0.2s ease, border-color 0.2s ease;
  background: rgba(255,255,255,0.32); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  border: 1px solid rgba(255,255,255,0.6); border-radius: 999px; padding: 14px 24px;
  font-family: var(--font-body); font-size: 1rem; font-weight: 500; color: #191919;
  cursor: pointer; text-decoration: none; text-align: left;
}
.chk-pill.show { opacity: 1; transform: none; }
.chk-pill:hover { background: rgba(255,255,255,0.92); transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,0.14); }
.chk-pill--go { background: var(--red); border-color: var(--red); color: #fff; }
.chk-pill--go:hover { background: #c81f2d; color: #fff; }
.chk-pill--ghost {
  background: transparent; border-color: rgba(0,0,0,0.28); color: #333;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.chk-pill--ghost:hover { background: #191919; border-color: #191919; color: #fff; box-shadow: none; transform: none; }
.chk-foot { margin: 2.4rem 0 0; font-size: 0.8rem; color: #7c7c7c; }
/* „Start over" als leiser Textlink (Fussnoten-Stil, eigene Zeile unter den Pillen). */
.chk-restart { flex-basis: 100%; margin: 0.5rem 0 0; padding: 0; background: none; border: 0;
  font-family: inherit; font-size: 0.8rem; color: #7c7c7c; text-align: left; cursor: pointer;
  -webkit-appearance: none; appearance: none; opacity: 0; transition: opacity 0.35s ease, color 0.2s ease; }
.chk-restart.show { opacity: 1; }
.chk-restart:hover { color: var(--red); }

/* ---------- Kontakt: statische Sektion (static-first, P0) ----------
   Steht im HTML und ist der Default. Bootet die Talk-Engine erfolgreich,
   setzt sie body.talk-ready → Sektion wird ausgeblendet, der Gespraechsflow
   uebernimmt im selben Grau. Ohne JS / bei Datenfehler bleibt alles lesbar. */
.contact-static { display: flex; flex-direction: column; justify-content: center;
  min-height: 100vh; min-height: 100svh; padding: 8rem var(--pad) 5rem;
  background: radial-gradient(130% 130% at 80% 8%, #ededed 0%, #d3d3d3 56%, #bfbfbf 100%); }
body.talk-ready .contact-static { display: none; }
.contact-static > * { width: 100%; max-width: 640px; margin-left: auto; margin-right: auto; }
.cs-title { font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  letter-spacing: -0.01em; line-height: 0.95; font-size: clamp(2rem, 5.5vw, 3.4rem);
  color: var(--ink); margin: 0 0 1.1rem; }
.cs-lede { font-family: var(--font-serif); font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  line-height: 1.55; color: var(--ink); margin: 0 0 2rem; }
.cs-person { display: flex; align-items: center; gap: 14px; margin: 0 0 1.6rem; }
.cs-person img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.cs-person p { margin: 0; font-size: 0.95rem; line-height: 1.45; color: #3b3934; }
.cs-person b { color: var(--ink); }
.cs-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; margin: 0 0 2.2rem; }
.cs-actions a { font-size: 0.98rem; font-weight: 500; color: var(--ink);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.cs-actions a:hover { color: var(--red); }
.cs-actions .cs-book { display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--ink); color: #fff; text-decoration: none; border-radius: 8px;
  padding: 0.85rem 1.4rem; font-weight: 600; font-size: 0.95rem;
  transition: background 0.2s ease; }
.cs-actions .cs-book:hover { background: #000; color: #fff; }
.cs-form { display: flex; flex-direction: column; gap: 14px; margin: 0 0 2rem;
  padding-top: 1.8rem; border-top: 1px solid rgba(20,18,16,0.14); }
.cs-form label { display: flex; flex-direction: column; gap: 6px;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: #6d6c64; }
.cs-form input, .cs-form textarea { font-family: var(--font-body); font-size: 1rem;
  color: var(--ink); background: rgba(255,255,255,0.55); border: 1px solid rgba(20,18,16,0.18);
  border-radius: 8px; padding: 0.7rem 0.85rem; }
.cs-form input:focus-visible, .cs-form textarea:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 1px; }
.cs-form button { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-body); font-size: 0.92rem; font-weight: 600; color: var(--ink);
  background: none; border: 1px solid rgba(20,18,16,0.35); border-radius: 999px;
  padding: 0.7rem 1.3rem; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; }
.cs-form button:hover { border-color: var(--ink); background: rgba(255,255,255,0.4); }
.cs-note { font-size: 0.85rem; line-height: 1.6; color: #6d6c64; margin: 0; }
.cs-note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.cs-note a:hover { color: var(--ink); }

/* ---------- Hero-CTA-Paar (zwei gleichrangige Buttons, P1.4) ----------
   Bewusst gleichwertig: identisch gestylt (kein primär/sekundär), Umriss-Duktus,
   Fokusring + >=44px Touch-Ziel. Fuellt sich bei Hover/Fokus. */
.hero-cta-pair { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(1.6rem, 3vw, 2.2rem); }
.hero-cta { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 44px; padding: 0.9rem 1.5rem;
  font-family: var(--font-body); font-size: 0.98rem; font-weight: 700; text-decoration: none;
  color: #fff; background: var(--ink); border: none;
  transition: background 0.2s ease, transform 0.2s ease; }
.hero-cta:hover { background: var(--red); transform: translateY(-2px); }
.hero-cta:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
@media (max-width: 460px) { .hero-cta { flex: 1 1 100%; } }
@media (prefers-reduced-motion: reduce) {
  .chk-cur { display: none; }
  .chk-pill { opacity: 1; transform: none; transition: none; }
  .chk-sub { opacity: 1; transform: none; }
}
@media (max-width: 560px) {
  .chk-stage { padding-top: 6.5rem; }
  .chk-pill { padding: 12px 20px; font-size: 0.95rem; }
}

/* ===================== ADA Benchmark — Artikelreihe (Variante C, Schwarz-Weiss) =====================
   Feste Wortmarken-Leiste links (sticky) mit Impressum, rechts die Serif-Lesespalte mit
   mitlaufender schwarzer Fortschrittsspur auf der Trennlinie (JS setzt Hoehe/Position).
   Zwei Toene: #111 Tinte, #5B5B5B Grau. Kein Rot im Artikel, viel Weissraum, weisser Grund. */
.bm-article { background: #fff; color: var(--ink); }
.bm-layout { max-width: var(--maxwidth); margin-inline: auto;
  padding: clamp(3rem, 8vw, 6rem) var(--pad) clamp(4.5rem, 11vw, 8rem);
  display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }

/* Wortmarken-Leiste: bleibt beim Scrollen stehen */
.bm-rail { position: sticky; top: clamp(88px, 12vh, 128px); align-self: start; }
.bm-mark { font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: 1rem; line-height: 1.05; letter-spacing: 0.01em; color: var(--ink); margin: 0 0 1.6rem; }
.bm-mark span { display: block; }
.bm-rail-meta { margin: 0; }
.bm-rail-meta > div { margin: 0 0 0.95rem; }
.bm-rail-meta dt { font-family: var(--font-body); font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: #a6a6a6; margin: 0 0 2px; }
.bm-rail-meta dd { margin: 0; font-family: var(--font-body); font-size: 0.82rem; color: var(--muted); line-height: 1.4; }

/* Lesespalte mit Trennlinie links; darauf laeuft die Fortschrittsspur */
.bm-inner { position: relative; max-width: 660px; padding-left: clamp(1.6rem, 3vw, 2.8rem); border-left: 1px solid #e6e6e6; }
.bm-progress { position: absolute; left: 0; top: 0; bottom: 0; width: 0; pointer-events: none; }
/* GPU-getriebene Anzeige (transform statt height/top) → flüssiger, scroll-synchroner Lauf. */
.bm-progress-fill { position: absolute; left: -1px; top: 0; width: 2px; height: 100%; background: var(--ink);
  transform: scaleY(0); transform-origin: top; will-change: transform; }
.bm-progress-dot { position: absolute; left: -5px; top: 0; margin-top: -4.5px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--ink); box-shadow: 0 0 0 4px #fff; transform: translateY(0); will-change: transform; }

.bm-title { font-family: var(--font-serif); font-weight: 600; font-size: clamp(1.9rem, 4.4vw, 2.5rem);
  line-height: 1.13; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 1rem; }
.bm-lede { font-family: var(--font-serif); font-weight: 400; font-style: italic; font-size: 1.1rem; line-height: 1.5;
  color: var(--muted); margin: 0 0 2rem; }

.bm-prose { font-family: var(--font-serif); color: var(--ink); }
.bm-prose p { font-size: 1.05rem; line-height: 1.78; margin: 0 0 1.35rem; }
.bm-prose h2 { font-family: var(--font-serif); font-weight: 600; font-size: 1.35rem; line-height: 1.3;
  letter-spacing: -0.005em; color: var(--ink); margin: 2.6rem 0 1rem; }
.bm-quote { margin: 2.2rem 0; padding: 0.2rem 0 0.2rem 1.4rem; border-left: 2px solid var(--ink); }
.bm-quote p { font-style: italic; font-size: 1.25rem; line-height: 1.45; color: var(--ink); margin: 0; }
.bm-outro { font-family: var(--font-serif); font-size: 1.05rem; line-height: 1.7; color: var(--muted); margin: 2.6rem 0 0; }
.bm-sources { font-family: var(--font-body); font-size: 0.78rem; line-height: 1.6; color: var(--muted); margin: 2.8rem 0 0; }

@media (max-width: 760px) {
  .bm-layout { grid-template-columns: 1fr; gap: 1.6rem; }
  .bm-rail { position: static; padding-bottom: 1.4rem; border-bottom: 1px solid #e6e6e6; }
  .bm-mark { margin: 0 0 1rem; }
  .bm-rail-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; }
  .bm-rail-meta > div { margin: 0; }
  .bm-inner { border-left: 0; padding-left: 0; max-width: none; }
  .bm-progress { display: none; }
}

/* ---- Liste auf Home (ersetzt Periodicals) — Variante 3, kompakt ---- */
/* Benchmark-Liste auf dem Stage-Raster (Brief T7): eine Achse je Inhaltstyp —
   Bild Sp. 1–3 · Artikeltitel Sp. 4–9 · Datum/Rubrik Sp. 10–12. Volle
   Trennlinien, keine Karten. Mobil: kompakte Zeile (kleines Bild links). */
.bm-list-section { max-width: var(--stage-max); margin-inline: auto;
  padding: clamp(4rem, 9vw, 7rem) var(--page-pad) clamp(5rem, 11vw, 8rem); }
.bm-list-title { font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(1.5rem, 3vw, 2.2rem); letter-spacing: -0.01em; color: var(--ink);
  margin: 0 0 clamp(1.6rem, 3.5vw, 2.4rem); }
.bm-list { list-style: none; margin: 0; padding: 0; max-width: none; border-top: 1px solid #eaeaea; }
.bm-list-item { border-bottom: 1px solid #eaeaea; }
.bm-list-row { display: grid; grid-template-columns: clamp(92px, 10vw, 124px) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 44px); align-items: center;
  padding: clamp(1.1rem, 2vw, 1.6rem) 0; text-decoration: none; color: inherit; }
/* Thumbnail bewusst klein gehalten (feste schmale Spalte statt 3 Rasterspalten),
   damit die Liste uebersichtlicher wird. Titel + Meta bleiben im gewohnten Layout. */
.bm-list-thumb { grid-column: 1; width: 100%; max-width: none; aspect-ratio: 3 / 2;
  border-radius: 2px; overflow: hidden; background: #ececec; }
.bm-list-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bm-list-body { grid-column: 2; min-width: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px clamp(16px, 3vw, 48px); align-items: baseline; }
.bm-list-head { grid-column: 1; display: block; font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(1.15rem, 1.9vw, 1.4rem); line-height: 1.3; color: var(--ink); transition: color 0.15s ease; }
.bm-list-row:hover .bm-list-head, .bm-list-row:focus-visible .bm-list-head {
  text-decoration: underline; text-underline-offset: 3px; }
.bm-list-row:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }
.bm-list-meta { grid-column: 2; display: block; font-family: var(--font-body);
  font-size: 0.82rem; color: var(--muted); margin: 0; text-align: right; white-space: nowrap; }
@media (max-width: 680px) {
  /* Mobil (§7): Bild volle Breite als Auftakt, Titel darunter, dann Meta —
     kein gequetschtes Klein-Bild neben Serifentitel. Gleiche Achse fuer alle. */
  .bm-list-row { display: flex; flex-direction: column; align-items: stretch;
    gap: 0.85rem; padding: clamp(1.5rem, 6vw, 2rem) 0; }
  .bm-list-thumb { width: 100%; max-width: none; aspect-ratio: 16 / 9; height: auto; }
  .bm-list-body { display: block; }
  .bm-list-head { font-size: 1.2rem; }
  .bm-list-meta { margin-top: 0.5rem; text-align: left; white-space: normal; }
}