/* =========================================================================
   Brownify – Stylesheet
   -------------------------------------------------------------------------
   Aufbau in siebzehn Abschnitten:

     1  Tokens            Farben, Typo, Mass, Kurven
     2  Grundlagen        Reset, Body, Fokus, Hilfsklassen
     3  Typografie        Display-, Überschrift- und Textstufen
     4  Raster            Breiten und Abschnittsabstände
     5  Kopfleiste        Global Nav, 48 px, durchscheinend, unscharf
     6  Menü-Blatt        Vollbild-Menü für kleine Breiten
     7  Hinweisband       schmales Band unter der Kopfleiste
     8  Bedienelemente    Pillen-Knöpfe und Chevron-Links
     9  Bühne             Hero mit scrollgebundener Bewegung
    10  Kacheln           Zweispaltiges Kachelraster
    11  Sequenz           Angehefteter Abschnitt mit Fortschritt
    12  Galerie           Horizontale Karten mit Schnappraster
    13  Studio            Vollbild-Bild mit Aussage, danach Raster
    14  Aufruf            Handlungsaufforderung
    15  Fussbereich       Spalten, auf Mobil ausklappbar
    16  Bewegung          Einblendungen, Wortmasken
    17  Rücksichten       reduzierte Bewegung, Kontrastmodus, Druck

   Farben stehen ausschliesslich als Tokens. Kein Wert ist doppelt gepflegt,
   deshalb stimmt der Dunkelmodus automatisch mit.
   ========================================================================= */

/* == 1  Tokens ========================================================== */

:root {
  /* Flächen. Die Wortmarke von Brownify ist weiss und monochrom – die
     Marke lebt von der Schrift, nicht von einer Farbe. Die Seite bleibt
     darum neutral; Farbe bringen die Produkte mit. */
  --surface:        #ffffff;
  --surface-2:      #f2f2f4;
  --surface-3:      #ffffff;
  --card-bg:        #ffffff;
  --surface-dark:   #000000;
  --surface-dark-2: #121214;

  /* Schrift auf Fläche. Werte gegen die dunklere der beiden Flächen. */
  --content:        #111113;   /* 18.86:1 auf Weiss, 16.87:1 auf #f2f2f4 */
  --content-2:      #5f6066;   /*  6.27:1 auf Weiss,  5.60:1 auf #f2f2f4 */
  --content-on-dark:   #f5f5f7;
  --content-2-on-dark: #a1a2a8;

  /* Akzent: das Blau aus der Radio-Aare-Familie, für helle Flächen
     abgedunkelt, damit es als Text und Rahmen trägt. */
  --accent:         #0b6ba8;   /* 5.70:1 auf Weiss, 5.10:1 auf #f2f2f4 */
  --accent-hover:   #0c6291;
  --accent-on-dark: #4cc2f5;
  --on-accent:      #ffffff;   /* 5.70:1 auf #0b6ba8 */
  --glow:           rgba(11, 107, 168, .16);
  --mark-filter:    invert(1);   /* weisse Wortmarke auf heller Fläche */

  /* Linien und Schleier */
  --hairline:       rgba(0, 0, 0, .14);
  --hairline-soft:  rgba(0, 0, 0, .07);
  --veil:           rgba(255, 255, 255, .72);
  --veil-solid:     #ffffff;
  --shadow-tile:    0 1px 2px rgba(0,0,0,.04), 0 10px 28px -10px rgba(0,0,0,.14);
  --shadow-lift:    0 2px 4px rgba(0,0,0,.05), 0 28px 60px -18px rgba(0,0,0,.24);

  /* Zustandsfarbe «Live». Hell: 5.6:1 auf #f2f2f4. Dunkel: 11.3:1. */
  --state-live:      #176b3c;
  --state-live-dark: #5ed48f;

  /* Schrift. Zuerst die Systemschrift des Geräts – sie ist überall
     vorhanden, lädt nicht nach und ist auf kleine Grössen optimiert.
     Danach Inter als nächstliegender Ersatz. */
  --font: -apple-system, BlinkMacSystemFont, system-ui,
          "Inter", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Mass */
  --nav-h:      62px;   /* höher, damit die Wortmarke Luft hat */

  /* Höhe des Hinweisbands. Steht hier auf null und wird vom Skript auf den
     gemessenen Wert gesetzt, sobald ein Band vorhanden ist.

     Warum gemessen und nicht eingetragen: die Höhe hängt am Inhalt. Auf dem
     Telefon bricht der Text um, dann ist das Band zweizeilig. Eine feste
     Zahl wäre dort falsch – die Kopfleiste läge über dem Band oder es
     klaffte eine Lücke. Alles, was am oberen Rand klebt, rechnet deshalb
     mit --kopf-h statt mit --nav-h. */
  --bar-h:      0px;
  --kopf-h:     calc(var(--nav-h) + var(--bar-h));
  --wrap:       980px;   /* Lesebreite  */
  --wrap-wide:  1440px;  /* Kachelbreite */
  --gutter:     22px;
  --radius:     18px;
  --radius-lg:  28px;

  /* Kurven. Die erste trägt alle Standardübergänge. */
  --ease:      cubic-bezier(.28,.11,.32,1);
  --ease-menu: cubic-bezier(.32,.08,.24,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);

  color-scheme: light dark;
}

/* Dunkle Erscheinung.
   Sie greift in zwei Fällen: wenn das Betriebssystem sie verlangt und der
   Besucher nichts anderes gewählt hat, oder wenn er sie über den Schalter
   in der Kopfleiste selbst einstellt. Beide Wege setzen dieselben Werte. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface:       #000000;
    --surface-2:     #121214;
    --surface-3:     #1a1a1d;
    --card-bg:       #121214;
    --content:       #f5f5f7;   /* 19.29:1 auf Schwarz */
    --content-2:     #a1a2a8;   /*  8.25:1 auf Schwarz, 7.35:1 auf #121214 */
    --accent:        #4cc2f5;   /* 10.34:1 auf Schwarz */
    --accent-hover:  #7ad3f8;
    --on-accent:     #08131a;   /*  9.25:1 auf #4cc2f5 */
    --glow:          rgba(76, 194, 245, .20);
    --mark-filter:   none;
    --hairline:      rgba(255,255,255,.18);
    --hairline-soft: rgba(255,255,255,.10);
    --veil:          rgba(18,18,20,.72);
    --veil-solid:    #121214;
    --shadow-tile:   0 4px 24px rgba(0,0,0,.5);
    --shadow-lift:   0 18px 48px rgba(0,0,0,.6);
    --state-live:    #5ed48f;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --surface:       #000000;
  --surface-2:     #121214;
  --surface-3:     #1a1a1d;
  --card-bg:       #121214;
  --content:       #f5f5f7;   /* 19.29:1 auf Schwarz */
  --content-2:     #a1a2a8;   /*  8.25:1 auf Schwarz, 7.35:1 auf #121214 */
  --accent:        #4cc2f5;   /* 10.34:1 auf Schwarz */
  --accent-hover:  #7ad3f8;
  --on-accent:     #08131a;   /*  9.25:1 auf #4cc2f5 */
  --glow:          rgba(76, 194, 245, .20);
  --mark-filter:   none;
  --hairline:      rgba(255,255,255,.18);
  --hairline-soft: rgba(255,255,255,.10);
  --veil:          rgba(18,18,20,.72);
  --veil-solid:    #121214;
  --shadow-tile:   0 4px 24px rgba(0,0,0,.5);
  --shadow-lift:   0 18px 48px rgba(0,0,0,.6);
  --state-live:    #5ed48f;
  color-scheme: dark;
}

:root[data-theme="light"] { color-scheme: light; }

/* Abschnitte, die immer dunkel sind, kippen die Tokens lokal.
   Dadurch funktioniert derselbe Baustein auf heller und dunkler Fläche. */
.on-dark {
  --surface:       #000000;
  --surface-2:     #161617;
  --card-bg:       #161617;
  --content:       #f5f5f7;
  --content-2:     #a1a1a6;
  --accent:        #4cc2f5;
  --accent-hover:  #f2bd88;
  --on-accent:     #1d1d1f;
  --hairline:      rgba(255,255,255,.18);
  --hairline-soft: rgba(255,255,255,.10);
  --state-live:    #5ed48f;
  background: #000000;
  color: #f5f5f7;
}

/* == 2  Grundlagen ====================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopf-h) + 12px);

  /* Der Riegel gegen seitliches Scrollen gehört hierhin und nicht auf den
     Body. Steht "overflow-x: hidden" am Body, rechnet der Browser dessen
     "overflow-y" auf "auto" hoch: der Body wird damit zu einem eigenen
     Scroll-Behälter, der nie scrollt – und jede scrollgebundene Animation
     darin steht still, weil ihre Zeitleiste keinen Weg mehr hat. */
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--content);
  font-family: var(--font);
  font-size: 17px;          /* Fliesstext, auch auf kleinen Geräten gut lesbar */
  line-height: 1.47059;
  letter-spacing: -.022em;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body[data-lock="true"] { overflow: hidden; }

img, svg, canvas, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

::selection { background: var(--accent); color: var(--on-accent); }

/* Fokus nur für Tastatur, dafür deutlich sichtbar. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden;
  white-space: nowrap;
}

.skip {
  position: fixed; top: 8px; left: 50%;
  transform: translate(-50%, -200%);
  z-index: 999;
  background: var(--accent); color: var(--on-accent);
  padding: 12px 20px; border-radius: 980px;
  font-size: 15px; font-weight: 500;
  transition: transform .2s var(--ease);
}
.skip:focus-visible { transform: translate(-50%, 0); }

/* == 3  Typografie ====================================================== */

.display {
  margin: 0;
  font-size: clamp(40px, 7.6vw, 80px);
  line-height: 1.05;
  letter-spacing: -.015em;
  font-weight: 600;
}

.headline {
  margin: 0;
  font-size: clamp(32px, 4.6vw, 56px);
  line-height: 1.07143;
  letter-spacing: -.005em;
  font-weight: 600;
}

.subhead {
  margin: 0;
  font-size: clamp(21px, 2.4vw, 28px);
  line-height: 1.14286;
  letter-spacing: .007em;
  font-weight: 600;
}

.intro {
  margin: 0;
  font-size: clamp(19px, 1.6vw, 21px);
  line-height: 1.381;
  letter-spacing: .011em;
  font-weight: 400;
  color: var(--content-2);
}

.body-copy { margin: 0; color: var(--content-2); }

.eyebrow {
  margin: 0 0 10px;
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: .012em;
  font-weight: 600;
  color: var(--accent);
}

.footnote {
  font-size: 14px;
  line-height: 1.42859;
  letter-spacing: -.016em;
  color: var(--content-2);
}

.mono {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* == 4  Raster ========================================================== */

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--wide { max-width: calc(var(--wrap-wide) + var(--gutter) * 2); }

.section { padding-block: clamp(64px, 8vw, 110px); }
.section--tight { padding-block: clamp(48px, 5vw, 72px); }
.section--grey { background: var(--surface-2); }

.section-head { max-width: 760px; margin-bottom: clamp(36px, 4vw, 56px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head .intro { margin-top: 18px; }

/* == 5  Kopfleiste ====================================================== */

/* Die einzige Schicht mit Unschärfe – über dem Inhalt, nie im Inhalt. */
.nav-bar {
  position: fixed; left: 0; right: 0;
  top: var(--bar-h);          /* das Hinweisband sitzt darüber */
  z-index: 900;
  height: var(--nav-h);
  background: var(--veil-solid);
  border-bottom: 1px solid transparent;
  transition: background .32s var(--ease), border-color .32s var(--ease),
              color .32s var(--ease);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav-bar {
    background: var(--veil);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
  }
}

.nav-bar[data-scrolled="true"] { border-bottom-color: var(--hairline-soft); }

/* Über dunklen Abschnitten kippt die Leiste mit, damit die
   Leiste den Ton des Abschnitts darunter übernimmt. */
.nav-bar[data-theme="dark"] {
  --content: #f5f5f7;
  --content-2: #a1a1a6;
  --accent: #4cc2f5;
  --hairline-soft: rgba(255,255,255,.12);
  background: rgba(0,0,0,.78);
  color: #f5f5f7;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav-bar[data-theme="dark"] { background: rgba(0,0,0,.6); }
}

.nav {
  height: var(--nav-h);
  max-width: calc(var(--wrap-wide) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex; align-items: center; gap: 8px;
}

.nav-brand {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 17px; font-weight: 600; letter-spacing: -.02em;
  height: 44px; padding-inline: 4px;
  color: var(--content);
}
.nav-mark {
  width: 18px; height: 18px; border-radius: 5px;
  background: var(--accent);
  transition: transform .4s var(--ease), background .32s var(--ease);
}
.nav-brand:hover .nav-mark { transform: rotate(45deg) scale(1.08); }

.nav-links {
  display: flex; align-items: center; gap: 4px;
  margin-inline: auto;
}
.nav-links a {
  position: relative;
  display: inline-flex; align-items: center;
  height: 44px; padding-inline: 12px;
  font-size: 12px; line-height: 1; letter-spacing: -.01em;
  white-space: nowrap;          /* Punkte stehen einzeilig, nie umgebrochen */
  color: var(--content);
  opacity: .84;
  transition: opacity .24s var(--ease);
}
.nav-links a:hover { opacity: 1; }
.nav-links a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 10px;
  height: 1.5px; border-radius: 2px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform .34s var(--ease);
}
.nav-links a:hover::after,
.nav-links a[aria-current="true"]::after,
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-links a[aria-current="true"],
.nav-links a[aria-current="page"] { opacity: 1; }

.nav-actions { display: flex; align-items: center; gap: 2px; }
.nav-icon {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  background: none; border: 0; border-radius: 10px;
  color: var(--content); opacity: .84;
  cursor: pointer;
  transition: opacity .24s var(--ease), background .24s var(--ease);
}
.nav-icon:hover { opacity: 1; background: var(--hairline-soft); }
.nav-icon svg { width: 17px; height: 17px; }

.nav-cta { margin-left: 6px; }

/* Menütaste: zwei Striche, die sich zum Kreuz drehen. */
.nav-burger { display: none; }
.burger-bars { position: relative; width: 18px; height: 12px; }
.burger-bars i {
  position: absolute; left: 0; width: 18px; height: 1.5px;
  border-radius: 2px; background: currentColor;
  transition: transform .36s var(--ease-menu), opacity .2s linear;
}
.burger-bars i:first-child { top: 2px; }
.burger-bars i:last-child  { bottom: 2px; }
.nav-burger[aria-expanded="true"] .burger-bars i:first-child { transform: translateY(4.25px) rotate(45deg); }
.nav-burger[aria-expanded="true"] .burger-bars i:last-child  { transform: translateY(-4.25px) rotate(-45deg); }

/* == 6  Menü-Blatt ====================================================== */

.nav-sheet {
  position: fixed; inset: var(--kopf-h) 0 0 0;
  z-index: 890;
  background: var(--veil-solid);
  padding: 8px var(--gutter) 48px;
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .38s var(--ease-menu), transform .38s var(--ease-menu),
              visibility 0s linear .38s;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav-sheet {
    background: var(--veil);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
  }
}
.nav-sheet[data-open="true"] {
  visibility: visible; opacity: 1; transform: translateY(0);
  transition-delay: 0s;
}

.nav-sheet a {
  display: flex; align-items: center;
  padding: 16px 4px;
  min-height: 56px;
  font-size: 24px; font-weight: 600; letter-spacing: -.02em;
  border-bottom: 1px solid var(--hairline-soft);
  opacity: 0; transform: translateY(12px);
  transition: opacity .4s var(--ease-menu), transform .4s var(--ease-menu);
}
.nav-sheet[data-open="true"] a {
  opacity: 1; transform: translateY(0);
  transition-delay: calc(60ms + var(--i, 0) * 42ms);
}
.nav-sheet .btn { margin-top: 26px; width: 100%; justify-content: center; border-bottom: 0; }

/* Suchblatt: Eingabe, Beschriftung, Trefferliste */
.search-input {
  width: 100%;
  margin-top: 12px;
  padding: 14px 18px;
  min-height: 52px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface);
  color: var(--content);
  font-family: inherit; font-size: 19px; letter-spacing: -.02em;
  -webkit-appearance: none; appearance: none;
}
.search-input::placeholder { color: var(--content-2); }
.search-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.search-label { color: var(--content-2); margin: 26px 0 6px; }

.search-results { margin: 0; padding: 0; list-style: none; }
.search-results li { display: block; }
.search-results a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  font-size: 19px; font-weight: 500; letter-spacing: -.02em;
  min-height: 52px; padding: 14px 4px;
}
.search-results a .hint {
  font-size: 12px; font-weight: 400; color: var(--content-2);
  font-family: var(--font-mono); letter-spacing: .04em;
  text-align: right; flex: none;
}
.search-empty { padding: 16px 4px; color: var(--content-2); font-size: 17px; }

/* == 7  Hinweisband ===================================================== */

/* Aussehen wie bisher. Geändert hat sich nur der Platz: statt unter der
   Kopfleiste mitzuscrollen, klebt das Band jetzt an der obersten Kante und
   bleibt dort. Es liegt eine Stufe über der Kopfleiste (z-index 950 statt
   900), damit beim Auf- und Zuklappen des Menüblatts nichts darüberrutscht.

   Seine Höhe misst das Skript und legt sie als --bar-h ab; die Kopfleiste
   und alle Seitenköpfe rechnen damit. */
.ribbon {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 950;
  margin: 0;
  background: var(--surface-2);
  color: var(--content-2);
  font-size: 14px; line-height: 1.42859; letter-spacing: -.016em;
  text-align: center;
  padding: 13px var(--gutter);
}
.ribbon strong { color: var(--content); font-weight: 600; }
.ribbon .chevron-link { font-size: 14px; min-height: 0; }
.ribbon .live-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--state-live); margin-right: 7px;
  animation: pulse 2.4s var(--ease) infinite;
}

/* Wenn der Countdown ausläuft, gleitet das Band weg statt zu verschwinden –
   ein Sprung von vierzig Pixeln mitten im Lesen ist unangenehm. */
.ribbon[data-weg="1"] {
  transform: translateY(-100%);
  opacity: 0;
  transition: transform .45s var(--ease), opacity .3s linear;
}
@keyframes pulse {
  0%, 100% { opacity: 1;  transform: scale(1); }
  50%      { opacity: .45; transform: scale(.82); }
}

/* == 8  Bedienelemente ================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px;
  padding: 11px 22px;
  border: 1px solid transparent; border-radius: 980px;
  font-size: 17px; line-height: 1.23536; letter-spacing: -.022em; font-weight: 400;
  cursor: pointer;
  transition: background .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease), transform .22s var(--ease);
}
.btn:active { transform: scale(.97); }

.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-hover); }

.btn--secondary {
  background: transparent; color: var(--accent);
  border-color: var(--accent);
}
.btn--secondary:hover { background: var(--accent); color: var(--on-accent); }

.btn--small { min-height: 36px; padding: 8px 16px; font-size: 14px; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; }

/* Chevron-Link: Text in der Akzentfarbe, Winkel rückt beim Zeigen. */
.chevron-link {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 32px;
  color: var(--accent);
  font-size: 17px; line-height: 1.23536; letter-spacing: -.022em;
}
.chevron-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.chevron-link::after {
  content: "";
  width: 6px; height: 6px;
  border-right: 1.6px solid currentColor;
  border-top: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-1px, 1px);
  transition: transform .28s var(--ease);
}
.chevron-link:hover::after { transform: rotate(45deg) translate(1px, -1px); }

.link-row { display: flex; flex-wrap: wrap; gap: 12px 30px; }

/* == 9  Bühne =========================================================== */

.hero {
  position: relative;
  min-height: min(92vh, 880px);
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  text-align: center;
  /* Der Abstand ist derselbe wie bisher – dazu kommt nur die Höhe des
     Hinweisbands, und die ist ohne Band null. Ohne Band sieht die Bühne
     also aus wie immer; mit Band rutscht sie um genau seine Höhe nach
     unten, statt darunter zu verschwinden. */
  padding-block: calc(var(--bar-h) + clamp(56px, 9vw, 96px)) clamp(40px, 6vw, 72px);
  overflow: hidden;
}

/* Weicher Schein hinter der Aussage, nicht hinter dem Text selbst. */
.hero::before {
  content: "";
  position: absolute; left: 50%; top: 36%;
  width: min(1100px, 130vw); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
              rgba(76,194,245,.16) 0%,
              rgba(76,194,245,.05) 42%,
              transparent 68%);
  pointer-events: none;
}

.hero .wrap { position: relative; }

.hero .display { max-width: 16ch; margin-inline: auto; }
.hero .intro   { max-width: 46ch; margin: 22px auto 0; color: var(--content-2); }
.hero .link-row { justify-content: center; margin-top: 26px; }

/* Signaturelement: die Signalspur eines laufenden Streams. */
.signal {
  position: relative;
  width: 100%;
  max-width: calc(var(--wrap-wide) + var(--gutter) * 2);
  margin: clamp(40px, 5vw, 64px) auto 0;
  padding-inline: var(--gutter);
  will-change: transform, opacity;
}
.signal canvas {
  width: 100%; height: clamp(140px, 20vw, 230px);
  display: block;
}
.signal-caption {
  margin-top: 14px;
  color: var(--content-2);
  text-align: center;
}

/* Kennzahlen unter der Bühne */
.facts {
  display: grid; gap: 1px;
  grid-template-columns: repeat(4, 1fr);
  margin: clamp(40px, 5vw, 64px) 0 0;
  background: var(--hairline);
  border-block: 1px solid var(--hairline);
}
.facts > div {
  background: var(--surface);
  padding: 26px 18px;
  text-align: center;
}
.facts dt {
  font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--content-2);
  font-family: var(--font-mono);
}
.facts dd {
  margin: 8px 0 0;
  font-size: clamp(24px, 3vw, 34px); font-weight: 600; letter-spacing: -.02em;
  color: var(--content);
  font-variant-numeric: tabular-nums;
}

/* == 10  Kacheln ======================================================== */

.tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.tile {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 480px;
  padding: clamp(30px, 3.4vw, 48px);
  border-radius: var(--radius);
  background: var(--card-bg);
  border: 1px solid var(--hairline-soft);
  box-shadow: var(--shadow-tile);
  overflow: hidden;
  isolation: isolate;
}
.section--grey .tile { background: var(--surface); }
.tile:not([data-tilt]):hover { box-shadow: var(--shadow-lift); }

.tile--dark {
  background: #000;
  color: #f5f5f7;
  --content: #f5f5f7;
  --content-2: #a1a1a6;
  --accent: #4cc2f5;
  --hairline: rgba(255,255,255,.22);
  --hairline-soft: rgba(255,255,255,.10);
  --state-live: #5ed48f;
}
.section--grey .tile--dark { background: #000; }
.tile--span { grid-column: 1 / -1; min-height: 420px; }

.tile-head { position: relative; z-index: 2; }
.tile h3 {
  margin: 0;
  font-size: clamp(26px, 2.6vw, 36px); line-height: 1.1;
  letter-spacing: -.015em; font-weight: 600;
}
.tile .tile-kicker {
  margin: 14px 0 8px;
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  font-family: var(--font-mono);
  color: var(--content-2);
}
.tile p.body-copy { margin-top: 12px; max-width: 44ch; }
.tile .chevron-link { margin-top: 20px; }

/* Zustand mit Punkt UND Wort – Farbe allein trägt hier nichts. */
.state {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px 5px 10px;
  border: 1px solid var(--hairline);
  border-radius: 980px;
  font-size: 12px; letter-spacing: .02em; font-weight: 500;
  color: var(--content-2);
}
.state .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; opacity: .55;
}
.state[data-state="live"] { color: var(--state-live); border-color: currentColor; }
.state[data-state="live"] .dot { opacity: 1; animation: pulse 2.4s var(--ease) infinite; }

/* Bildfläche der Kachel: eigenes Muster statt Platzhalterfoto. */
.tile-art {
  position: relative; z-index: 1;
  transform: translate3d(0, var(--art-y, 0px), 0);
  margin-top: auto; padding-top: 32px;
  min-height: 140px;
  display: grid; place-items: center;
}
.tile-art svg { width: 100%; max-width: 320px; height: auto; overflow: visible; }
.tile-art .stroke { fill: none; stroke: currentColor; stroke-width: 1.2; opacity: .45; }
.tile-art .accent { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; }
.tile-art .accent-fill { fill: var(--accent); }

/* Breite Kacheln stellen Text und Bildfläche nebeneinander. */
@media (min-width: 834px) {
  .tile--span {
    display: grid; grid-template-columns: 1fr 1fr;
    align-items: center; gap: clamp(30px, 4vw, 64px);
  }
  .tile--span .tile-art { margin-top: 0; padding-top: 0; }
  .tile--span .tile-art svg { max-width: 420px; }
}

/* == 11  Sequenz ======================================================== */

/* Grundform: eine schlichte Liste, die überall funktioniert. Das Anheften
   kommt erst dazu, wenn das Fenster gross genug dafür ist – so kann die
   Bühne nie höher werden als das Fenster, in dem sie stehen bleibt. */
.sequence { position: relative; padding-block: clamp(64px, 8vw, 110px); }
.sequence-inner { position: relative; }

.sequence-stage { display: grid; gap: 28px; }
.sequence-visual { display: none; }

@media (min-width: 1069px) and (min-height: 700px) {
  /* Die Laufstrecke: vier Bildhöhen für vier Schritte. */
  .sequence-inner { height: 400vh; }

  .sequence-stage {
    position: sticky; top: var(--kopf-h);
    height: calc(100vh - var(--kopf-h));
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(30px, 5vw, 80px);
  }

  .sequence-visual {
    position: relative;
    display: grid; place-items: center;
    width: min(100%, 420px);
    aspect-ratio: 1;
    margin-inline: auto;
  }
}
.sequence-visual svg { width: 100%; height: 100%; overflow: visible; }
.seq-ring { fill: none; stroke: var(--hairline); stroke-width: 1; }
.seq-arc {
  fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: 50% 50%;
  stroke-dasharray: var(--circ, 628);
  stroke-dashoffset: calc(var(--circ, 628) * (1 - var(--p, 0)));
}
.seq-node {
  fill: var(--surface); stroke: var(--hairline); stroke-width: 1.5;
  transition: fill .45s var(--ease), stroke .45s var(--ease);
}
.seq-node[data-on="true"] { fill: var(--accent); stroke: var(--accent); }
.seq-number {
  position: absolute;
  font-size: clamp(56px, 9vw, 116px); font-weight: 600; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--content);
  line-height: 1;
}

.sequence-steps { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }

/* Der aktive Schritt wird nicht durch Abdunkeln der anderen markiert –
   das würde deren Kontrast unter die Grenze drücken. Stattdessen tragen
   Kante, Farbe der Überschrift und ein kleiner Versatz die Markierung. */
.seq-step {
  padding: 18px 0 18px 26px;
  border-left: 2px solid var(--hairline-soft);
  transition: border-color .5s var(--ease), transform .5s var(--ease);
}
.seq-step[data-active="true"] {
  border-left-color: var(--accent);
  transform: translateX(6px);
}
.seq-step h3 {
  margin: 0;
  font-size: clamp(22px, 2.3vw, 32px); line-height: 1.12;
  letter-spacing: -.015em; font-weight: 600;
  transition: color .5s var(--ease);
}
.seq-step[data-active="true"] h3 { color: var(--accent); }
.seq-step .mono { color: var(--content-2); display: block; margin-bottom: 8px; }
.seq-step p { margin: 10px 0 0; color: var(--content-2); max-width: 46ch; }

/* == 12  Galerie ======================================================== */

.gallery-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 28px;
}
.gallery-head .section-head { margin-bottom: 0; }

.gallery-nav { display: flex; gap: 8px; flex: none; }
.gallery-nav button {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-2);
  border: 1px solid var(--hairline-soft);
  color: var(--content);
  cursor: pointer;
  transition: background .22s var(--ease), opacity .22s var(--ease),
              transform .22s var(--ease);
}
.section--grey .gallery-nav button { background: var(--surface); }
.gallery-nav button:hover:not(:disabled) { background: var(--hairline-soft); }
.gallery-nav button:active:not(:disabled) { transform: scale(.94); }
.gallery-nav button:disabled { opacity: .32; cursor: default; }
.gallery-nav svg { width: 15px; height: 15px; }

.gallery {
  display: flex; gap: 20px;
  margin: 0; list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding: 4px var(--gutter) 30px;
  margin-inline: calc(var(--gutter) * -1);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.gallery::-webkit-scrollbar { display: none; }

.card {
  flex: 0 0 min(78vw, 380px);
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  min-height: 440px;
  padding: 34px 32px;
  border-radius: var(--radius);
  background: var(--card-bg);
  border: 1px solid var(--hairline-soft);
  box-shadow: var(--shadow-tile);
}
.section--grey .card { background: var(--surface); }
.card:not([data-tilt]):hover { box-shadow: var(--shadow-lift); }
.card .card-icon {
  width: 30px; height: 30px; color: var(--accent); margin-bottom: 22px;
}
.card h3 {
  margin: 0 0 12px;
  font-size: 24px; line-height: 1.16667; letter-spacing: .009em; font-weight: 600;
}
.card p { margin: 0; color: var(--content-2); }
.card .card-list {
  margin: auto 0 0; padding: 20px 0 0; list-style: none;
  border-top: 1px solid var(--hairline-soft);
}
.card .card-list li {
  font-size: 14px; letter-spacing: -.016em; color: var(--content-2);
  padding-left: 18px; position: relative; margin-top: 8px;
}
.card .card-list li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}

.gallery-dots { display: flex; gap: 6px; justify-content: center; }
.gallery-dots button {
  width: 28px; height: 28px; padding: 0;
  background: none; border: 0; cursor: pointer;
  display: grid; place-items: center;
}
.gallery-dots span {
  display: block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--content-2); opacity: .32;
  transition: opacity .3s var(--ease), transform .3s var(--ease),
              background .3s var(--ease);
}
.gallery-dots button[aria-current="true"] span {
  opacity: 1; background: var(--accent); transform: scale(1.18);
}

/* == 13  Studio ========================================================= */

.studio-stage {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: min(80vh, 720px);
  display: flex; align-items: flex-end;
  background: #000;
  color: #f5f5f7;
}
/* Die Vorlage ist eine Ganzkörperaufnahme in einem sehr breiten Rahmen.
   Bei 50% 30% schneidet der Zuschnitt mitten durch den Kopf – der Ausschnitt
   muss oben ansetzen, damit Gesicht und Schultern ganz im Bild bleiben. */
.studio-stage img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 8%;
  opacity: .72;
  will-change: transform;
}
.studio-stage::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top,
              rgba(0,0,0,.9) 0%, rgba(0,0,0,.58) 42%, rgba(0,0,0,.18) 100%);
}
.studio-copy {
  position: relative; z-index: 2;
  padding: clamp(32px, 5vw, 64px);
  max-width: 740px;
}
.studio-copy .headline { color: #f5f5f7; }
.studio-copy .intro { color: #d2d2d7; margin-top: 18px; }
.studio-copy .eyebrow { color: #4cc2f5; }

.principles {
  display: grid; gap: 1px;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 12px;
  background: var(--hairline-soft);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius);
  overflow: hidden;
}
.principles > div { background: var(--surface); padding: 30px 26px; }
.section--grey .principles > div { background: var(--surface-2); }
.principles h3 {
  margin: 0 0 10px; font-size: 19px; letter-spacing: .012em; font-weight: 600;
}
.principles p { margin: 0; font-size: 14px; line-height: 1.42859; color: var(--content-2); }

.studio-text {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0 40px; margin-top: 56px;
}
.studio-text p { margin: 0 0 18px; color: var(--content-2); }
.studio-text .lead-line {
  grid-column: 1 / -1; margin-bottom: 28px;
  font-size: clamp(21px, 2.4vw, 28px); line-height: 1.14286;
  letter-spacing: .007em; font-weight: 600; color: var(--content);
}

/* == 14  Aufruf ========================================================= */

.cta { text-align: center; }
.cta .headline { max-width: 20ch; margin-inline: auto; }
.cta .intro { max-width: 52ch; margin: 20px auto 0; }
.cta .btn-row { justify-content: center; margin-top: 30px; }

.mailto {
  display: inline-block; margin-top: 28px;
  font-size: clamp(24px, 3.4vw, 40px); font-weight: 600; letter-spacing: -.02em;
  color: var(--accent);
  word-break: break-word;
}
.mailto:hover { text-decoration: underline; text-underline-offset: 6px; }

.contact-meta {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; margin: 48px 0 0;
  background: var(--hairline-soft);
  border-block: 1px solid var(--hairline-soft);
  text-align: left;
}
.contact-meta > div { background: var(--surface); padding: 24px 22px; }
.section--grey .contact-meta > div { background: var(--surface-2); }
.contact-meta dt {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--content-2);
}
.contact-meta dd { margin: 8px 0 0; font-size: 17px; }

.copy-state {
  display: block; min-height: 22px; margin-top: 14px;
  font-size: 14px; color: var(--content-2);
}

/* == 14b  Rechtliches =================================================== */

.legal-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(36px, 5vw, 72px);
}
@media (min-width: 834px) {
  .legal-grid { grid-template-columns: 1fr 1fr; }
}

.legal .subhead { margin-bottom: 18px; }

.legal address {
  font-style: normal;
  line-height: 1.6;
  color: var(--content-2);
}
.legal address a,
.legal-list a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.legal address a:hover,
.legal-list a:hover { color: var(--accent-hover); }

.legal .footnote { margin: 18px 0 0; }

.legal-list {
  margin: 0;
  padding-left: 1.1em;
  line-height: 1.5;
}
.legal-list li { margin-bottom: 10px; }
.legal-list li:last-child { margin-bottom: 0; }
.legal-list::marker { color: var(--content-2); }

/* == 15  Fussbereich ==================================================== */

.footer {
  background: var(--surface-2);
  color: var(--content-2);
  font-size: 12px; line-height: 1.33337; letter-spacing: -.01em;
  padding-block: 20px 36px;
}
.footer a { color: var(--content-2); }
.footer a:hover { color: var(--content); text-decoration: underline; }

.footer-notes {
  padding-block: 20px;
  border-bottom: 1px solid var(--hairline-soft);
  display: grid; gap: 10px;
  max-width: 820px;
}

.footer-cols {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  padding-block: 24px;
  border-bottom: 1px solid var(--hairline-soft);
}
.footer-col h3 { margin: 0 0 10px; font-size: 12px; font-weight: 600; color: var(--content); }
.footer-col ul { margin: 0; padding: 0; list-style: none; }
.footer-col li { margin-bottom: 8px; }
.footer-col address { font-style: normal; }
.footer-col .col-toggle { display: none; }

.footer-base {
  display: flex; flex-wrap: wrap; gap: 10px 18px;
  align-items: center;
  padding-top: 18px;
}
.footer-base ul { margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.footer-base .legal-links li { list-style: none; position: relative; padding-left: 14px; margin-left: 14px; }
.footer-base .legal-links li:first-child { padding-left: 0; margin-left: 0; }
.footer-base .legal-links li:not(:first-child)::before {
  content: ""; position: absolute; left: 0; top: 2px; bottom: 2px;
  width: 1px; background: var(--hairline);
}
.footer-base .region { margin-left: auto; }


/* == 15b  Uebernommen aus der bestehenden Website ======================= */
/*
   Drei Bausteine, die es im Einseiter nicht gab, auf der Website aber
   gebraucht werden: der Countdown im Hinweisband, der Nach-oben-Knopf und
   die Randnotiz im Band.
*/

/* --- Countdown im Hinweisband ---------------------------------------- */
/* Unveraendert gegenueber der bisherigen Fassung. */
.ribbon .flip-cd {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-inline: 8px;
  vertical-align: middle;
}
.ribbon .flip-unit { display: inline-flex; align-items: baseline; gap: 4px; }
.ribbon .flip-digits {
  display: inline-flex;
  gap: 2px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--content);
}
.ribbon .flip-d {
  display: inline-block;
  min-width: 1ch;
  text-align: center;
}
/* Der Ziffernwechsel wird kurz angetippt, statt hart umzuspringen. */
.ribbon .flip-d.tick { animation: ziffer-tick .32s var(--ease-out); }
@keyframes ziffer-tick {
  from { transform: translateY(-42%); opacity: .25; }
  to   { transform: none;             opacity: 1;   }
}
.ribbon .flip-lbl {
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--content-2);
}
.ribbon .flip-sep { color: var(--content-2); opacity: .6; }
.ribbon-note { margin-left: 6px; }

/* --- Countdown im Baukasten ------------------------------------------- */
/* NUR fuer die neuen Baukasten-Abschnitte. Die bestehenden Seiten ruehrt
   das nicht an – die benutzen weiterhin .flip-cd von oben. */
.bfb-cd {
  display: inline-flex; align-items: flex-start; gap: 10px;
  font-variant-numeric: tabular-nums;
}
.bfb-cd-teil { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.bfb-cd-teil[hidden] { display: none; }
.bfb-cd-zahl {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--content);
  line-height: 1;
}
.bfb-cd-lbl {
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--content-2);
}
.bfb-cd-zahl.tick { animation: ziffer-tick .32s var(--ease-out); }

.bfb-cd--gross { gap: clamp(8px, 2vw, 18px); }
.bfb-cd--gross .bfb-cd-teil {
  min-width: clamp(64px, 14vw, 96px);
  padding: 14px 8px 10px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: var(--card-bg);
}
.bfb-cd--gross .bfb-cd-zahl { font-size: clamp(28px, 6vw, 46px); letter-spacing: -.02em; }
.bfb-cd--gross .bfb-cd-lbl  { font-size: 11px; margin-top: 6px; }

.bfb-cd--schlicht { gap: 14px; }
.bfb-cd--schlicht .bfb-cd-zahl { font-size: clamp(20px, 3vw, 28px); }

/* --- Zurueck nach oben ------------------------------------------------ */
/* Erscheint erst, wenn es wirklich etwas zu ueberspringen gibt, und sitzt
   ausserhalb des Textflusses, damit er nichts verdeckt. */
.to-top {
  position: fixed;
  right: clamp(14px, 3vw, 28px);
  bottom: clamp(14px, 3vw, 28px);
  z-index: 70;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: var(--veil);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  color: var(--content);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .3s var(--ease), transform .35s var(--ease-out),
              visibility .3s, background-color .3s var(--ease);
}
.to-top[data-show="true"] { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--veil-solid); }
.to-top svg { width: 19px; height: 19px; }

@media (prefers-reduced-transparency: reduce) {
  .to-top { background: var(--veil-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
}


/* == 15c  Unterseiten =================================================== */
/*
   Der Einseiter kannte nur eine grosse Buehne. Die Website hat mehrere
   Seiten: sie brauchen einen kompakten Kopf, ein Formular und ein paar
   ruhige Listenformen.
*/

.page-hero {
  padding: calc(var(--kopf-h) + clamp(48px, 7vw, 96px)) 0 clamp(28px, 4vw, 56px);
  text-align: center;
}
.page-hero .display { max-width: 18ch; margin-inline: auto; }
.page-hero .intro   { max-width: 52ch; margin: 20px auto 0; }

.section-more { margin: clamp(28px, 4vw, 48px) 0 0; text-align: center; }

/* --- Formular --------------------------------------------------------- */
.form-grid { display: grid; gap: 16px; max-width: 620px; }

.field { position: relative; }
.field input,
.field textarea {
  width: 100%;
  padding: 24px 16px 10px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--card-bg);
  color: var(--content);
  font: inherit;
  font-size: 17px;          /* unter 16px zoomt iOS beim Tippen hinein */
  line-height: 1.4;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field textarea { resize: vertical; min-height: 150px; }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--glow);
}
/* Die Beschriftung wandert nach oben, sobald das Feld gefuellt oder aktiv
   ist – sie bleibt also immer lesbar, statt beim Tippen zu verschwinden. */
.field label {
  position: absolute;
  left: 17px; top: 17px;
  font-size: 15px;
  color: var(--content-2);
  pointer-events: none;
  transition: transform .2s var(--ease), font-size .2s var(--ease);
  transform-origin: 0 0;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label {
  transform: translateY(-9px) scale(.78);
}

/* Honigtopf: fuer Menschen unsichtbar, fuer Vorlesegeraete uebersprungen. */
.hp-field {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.form-note {
  margin: 0;
  font-size: 14px;
  line-height: 1.42859;
  color: var(--content-2);
}

.contact-ok,
.contact-err {
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid var(--hairline);
  font-size: 16px;
  line-height: 1.45;
}
/* Zustand steckt in Text UND Rahmen, nicht allein in der Farbe. */
.contact-ok  { border-color: var(--state-live); color: var(--content); }
.contact-err { border-color: var(--accent);     color: var(--content); }

/* --- Einfache Listen (News, Team, Werte) ------------------------------ */
.plain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--hairline-soft); border-block: 1px solid var(--hairline-soft); }
.plain-list > li { background: var(--surface); padding: clamp(20px, 3vw, 30px) 0; }
.section--grey .plain-list > li { background: var(--surface-2); }
.plain-list h3 { margin: 0 0 6px; font-size: clamp(19px, 2.2vw, 24px); letter-spacing: -.01em; font-weight: 600; }
.plain-list p  { margin: 0; color: var(--content-2); max-width: 68ch; }
.plain-list .mono { display: block; margin-bottom: 10px; }

.empty-note {
  padding: clamp(28px, 4vw, 44px);
  border: 1px dashed var(--hairline);
  border-radius: var(--radius);
  text-align: center;
  color: var(--content-2);
}


/* == 15d  Bruecke zu den Brownspace-Seiten ============================== */
/*
   Die unter p.php ausgelieferten Seiten werden im Brownspace geschrieben,
   nicht hier. Ihre Vorlage bleibt darum unangetastet – stattdessen werden
   ihre Klassen auf das neue Erscheinungsbild uebersetzt. So sehen auch
   spaeter angelegte Seiten richtig aus, ohne dass jemand Markup anfassen
   muss.
*/
.container {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.page-title {
  margin: 0;
  font-size: clamp(40px, 7.6vw, 80px);
  line-height: 1.05;
  letter-spacing: -.015em;
  font-weight: 600;
}
.page-lead {
  margin: 20px auto 0;
  max-width: 52ch;
  font-size: clamp(19px, 1.6vw, 21px);
  line-height: 1.381;
  color: var(--content-2);
}
/* Frueher ein Metall-Verlauf. Der Akzent traegt das heute allein. */
.accent-metal { color: var(--accent); }

.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
.btn-ghost {
  background: transparent;
  color: var(--content);
  border-color: var(--hairline);
}
.btn .arr { width: 16px; height: 16px; }

.news-tag,
.launch-badge {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--content-2);
}

.cta-band {
  padding: clamp(32px, 5vw, 64px);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  box-shadow: var(--shadow-tile);
  text-align: center;
}
.cta-band h2 { margin: 0 0 12px; font-size: clamp(28px, 4vw, 44px); font-weight: 600; letter-spacing: -.01em; }
.cta-band p  { margin: 0 0 24px; color: var(--content-2); }

/* Freier Text aus dem Brownspace */
.prose { max-width: 68ch; margin-inline: auto; color: var(--content-2); font-size: 17px; line-height: 1.6; }
.prose h2, .prose h3 { color: var(--content); letter-spacing: -.01em; margin: 1.8em 0 .5em; }
.prose h2 { font-size: clamp(24px, 3vw, 32px); }
.prose h3 { font-size: clamp(19px, 2.2vw, 24px); }
.prose p  { margin: 0 0 1em; }
.prose a  { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose img { border-radius: var(--radius); margin: 1.4em 0; }
.prose ul, .prose ol { padding-left: 1.2em; margin: 0 0 1em; }
.prose li { margin-bottom: .5em; }

/* Produkt-Vorstellung (Vorlage "launch") */
.launch-price { font-size: clamp(24px, 3vw, 34px); font-weight: 600; letter-spacing: -.02em; margin: 18px 0; }
.feature-grid, .svc-grid, .values-grid, .news-grid, .stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-top: clamp(28px, 4vw, 48px);
}
.feature-card, .svc, .value-card, .news-card, .stat {
  display: block;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius);
  background: var(--card-bg);
  box-shadow: var(--shadow-tile);
  color: inherit;
}
.feature-card h3, .svc h3, .value-card h3, .news-card h3 {
  margin: 0 0 10px; font-size: 19px; font-weight: 600; letter-spacing: -.01em;
}
.feature-card p, .svc p, .value-card p, .news-card p { margin: 0; color: var(--content-2); font-size: 16px; line-height: 1.5; }
.svc-icon svg { width: 26px; height: 26px; color: var(--accent); margin-bottom: 18px; }
.stat-num { font-size: clamp(28px, 4vw, 44px); font-weight: 600; letter-spacing: -.02em; }
.stat-label { font-size: 14px; color: var(--content-2); margin-top: 6px; }


/* Vorlage "launch" aus dem Brownspace */
.launch-hero { text-align: center; }
.launch-title { margin-top: 14px; }
.launch-cd { display: flex; justify-content: center; margin: 28px 0 10px; }
.launch-cd-label { display: block; text-align: center; font-size: 14px; color: var(--content-2); }
.launch-buy { margin-top: 30px; }
.launch-key {
  max-width: 460px;
  margin: 28px auto 0;
  padding: 20px 22px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--card-bg);
  text-align: center;
}
.launch-key-label { display: block; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--content-2); }
.launch-key-code {
  display: block;
  margin: 10px 0 6px;
  font-family: var(--font-mono);
  font-size: clamp(18px, 2.4vw, 24px);
  font-weight: 600;
  letter-spacing: .06em;
  overflow-wrap: anywhere;
}
.launch-key-hint { display: block; font-size: 14px; color: var(--content-2); }
.launch-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  margin-top: clamp(28px, 4vw, 48px);
  background: var(--hairline-soft);
  border-block: 1px solid var(--hairline-soft);
}
.launch-spec { background: var(--surface); padding: 22px 18px; text-align: center; }
.launch-spec strong { display: block; font-size: 18px; font-weight: 600; margin-bottom: 4px; }
.launch-spec span { font-size: 14px; color: var(--content-2); }

.section-title {
  margin: 0 0 14px;
  font-size: clamp(28px, 4.2vw, 46px);
  line-height: 1.08;
  letter-spacing: -.01em;
  font-weight: 600;
}
/* Vorlage "html" aus dem Brownspace.

   Bis hierher stand 68ch – also Lesebreite, rund 615 Pixel. Fuer Fliesstext
   ist das richtig, fuer eigenen HTML-Code war es falsch: wer eine ganze
   Seite einfuegt, bekam sie in eine schmale Spalte gequetscht. Der Code
   nutzt jetzt die volle Breite des Rahmens.

   Fuer eine Seite ueber die GANZE Bildschirmbreite gibt es den Baustein
   "Eigene HTML-Code" im Baukasten – dort ist die Breite waehlbar. */
.page-html { max-width: none; margin-inline: auto; }
/* Der alte Schraeg-Effekt beim Scrollen entfaellt – die Klasse bleibt
   wirkungslos stehen, damit bestehende Seiten nicht angefasst werden muessen. */
.skew-target { transform: none; }

/* == 15e  Baukasten =====================================================
   Die Abschnitte der im Brownspace zusammengestellten Seiten.

   Ein Grundsatz traegt den ganzen Abschnitt: ein Block setzt nie eine
   Farbe direkt, sondern hoechstens die TOKENS neu. Wer «immer dunkel»
   waehlt, kippt --surface, --content und die Linien – alles darin, vom
   Knopf bis zur Bildunterschrift, zieht dann von selbst mit. Deshalb
   stimmt jeder Block in beiden Erscheinungen, ohne dass es dafuer je
   eine zweite Fassung braucht.
   ===================================================================== */

.bfb { position: relative; padding-block: var(--bfb-pad, clamp(40px, 6vw, 72px)); }

/* Der erste Abschnitt liegt unter dem festen Kopfbereich. Sein oberer
   Abstand ist deshalb der gewaehlte PLUS die Kopfhoehe – nicht statt ihr.
   Darum steht der gewaehlte Abstand in einer eigenen Variablen und nicht
   direkt in "padding-block": sonst wuerde die eine Regel die andere
   ueberschreiben und der Hero verloere seine Luft nach oben. */
#inhalt > .bfb:first-child {
  padding-top: calc(var(--kopf-h) + var(--bfb-pad, clamp(40px, 6vw, 72px)));
}

/* Eine Landeseite hat keine Kopfleiste – dann gibt es auch nichts
   auszugleichen. */
body[data-layout="full"] { --nav-h: 0px; }

.bfb-wrap {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.bfb-wrap--schmal { max-width: calc(var(--wrap) + var(--gutter) * 2); }
.bfb-wrap--normal { max-width: calc(1180px + var(--gutter) * 2); }
.bfb-wrap--breit  { max-width: calc(var(--wrap-wide) + var(--gutter) * 2); }
.bfb-wrap--voll   { max-width: none; padding-inline: 0; }

/* Abstaende */
.bfb--pad-keini { --bfb-pad: 0px; }
.bfb--pad-s  { --bfb-pad: clamp(20px, 3vw, 34px); }
.bfb--pad-m  { --bfb-pad: clamp(40px, 6vw, 72px); }
.bfb--pad-l  { --bfb-pad: clamp(64px, 8vw, 110px); }
.bfb--pad-xl { --bfb-pad: clamp(84px, 11vw, 150px); }

.bfb--mitte { text-align: center; }
.bfb--mitte .bfb-lead,
.bfb--mitte .bfb-prose { margin-inline: auto; }
.bfb--mitte .bfb-knopf-zile { justify-content: center; }

/* Farbtoene. Nur Tokens – siehe Kopf dieses Abschnitts. */
.bfb--ton-grau { background: var(--surface-2); }
.bfb--ton-hell {
  --surface: #ffffff; --surface-2: #f2f2f4; --card-bg: #ffffff;
  --content: #111113; --content-2: #5f6066;
  --accent: #0b6ba8; --accent-hover: #0c6291; --on-accent: #ffffff;
  --hairline: rgba(0,0,0,.14); --hairline-soft: rgba(0,0,0,.07);
  --state-live: #176b3c;
  background: #ffffff; color: #111113;
}
.bfb--ton-dunkel {
  --surface: #000000; --surface-2: #121214; --card-bg: #121214;
  --content: #f5f5f7; --content-2: #a1a2a8;
  --accent: #4cc2f5; --accent-hover: #7ad3f8; --on-accent: #08131a;
  --hairline: rgba(255,255,255,.18); --hairline-soft: rgba(255,255,255,.10);
  --state-live: #5ed48f;
  background: #000000; color: #f5f5f7;
}
.bfb--ton-akzent {
  --content: var(--on-accent);
  --content-2: var(--on-accent);
  --card-bg: rgba(255,255,255,.12);
  --hairline: rgba(255,255,255,.34);
  --hairline-soft: rgba(255,255,255,.2);
  background: var(--accent);
  color: var(--on-accent);
}
.bfb--ton-akzent .btn--primary { background: var(--surface); color: var(--accent); }
.bfb--ton-akzent .btn--secondary { border-color: currentColor; color: inherit; }

/* --- Schrift innerhalb eines Abschnitts ------------------------------- */
.bfb-eyebrow {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--content-2);
}
.bfb-badge {
  display: inline-block; margin: 0 0 18px;
  padding: 5px 14px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--content-2);
}
.bfb-titel {
  margin: 0;
  font-size: clamp(28px, 4.4vw, 48px);
  line-height: 1.08; letter-spacing: -.015em; font-weight: 600;
  color: var(--content);
}
.bfb-titel--gross { font-size: clamp(38px, 7.4vw, 78px); line-height: 1.03; }
.bfb-lead {
  margin: 18px 0 0;
  max-width: 58ch;
  font-size: clamp(17px, 1.5vw, 21px); line-height: 1.45;
  color: var(--content-2);
}

/* --- Buehne ----------------------------------------------------------- */
.bfb-hero { position: relative; border-radius: var(--radius-lg); overflow: hidden; }
.bfb-hero--halb { min-height: 52svh; display: grid; align-content: center; }
.bfb-hero--voll { min-height: calc(100svh - var(--kopf-h)); display: grid; align-content: center; }
.bfb-hero--bild { background-size: cover; background-position: center; padding: clamp(40px, 6vw, 80px); }
.bfb-hero--bild,
.bfb-hero--bild .bfb-titel { color: #fff; }
.bfb-hero--bild .bfb-lead,
.bfb-hero--bild .bfb-badge { color: rgba(255,255,255,.86); border-color: rgba(255,255,255,.4); }
.bfb-hero-schleier {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.34));
}
.bfb-hero-inhalt { position: relative; }

/* --- Knoepfe ---------------------------------------------------------- */
.bfb-knopf-zile {
  display: flex; flex-wrap: wrap; gap: 12px 14px;
  margin-top: 28px;
}

/* --- Fliesstext ------------------------------------------------------- */
.bfb-prose {
  max-width: 68ch;
  color: var(--content-2);
  font-size: 17px; line-height: 1.62;
}
.bfb-prose h2, .bfb-prose h3 { color: var(--content); letter-spacing: -.01em; margin: 1.7em 0 .5em; }
.bfb-prose h2 { font-size: clamp(24px, 3vw, 32px); }
.bfb-prose h3 { font-size: clamp(19px, 2.2vw, 24px); }
.bfb-prose p { margin: 0 0 1em; }
.bfb-prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.bfb-prose ul, .bfb-prose ol { padding-left: 1.2em; margin: 0 0 1em; }
.bfb-prose li { margin-bottom: .45em; }
.bfb-prose blockquote {
  margin: 1.4em 0; padding: 4px 0 4px 20px;
  border-left: 3px solid var(--accent);
  color: var(--content); font-size: 19px;
}
.bfb-prose code {
  font-family: var(--font-mono); font-size: .9em;
  background: var(--surface-2); padding: 2px 6px; border-radius: 6px;
}
.bfb-prose pre {
  background: var(--surface-2); padding: 18px; border-radius: var(--radius);
  overflow-x: auto;
}
.bfb-prose img, .bfb-prose video { max-width: 100%; height: auto; border-radius: var(--radius); }
.bfb-prose table { width: 100%; border-collapse: collapse; margin: 1.4em 0; }
.bfb-prose th, .bfb-prose td {
  padding: 10px 12px; text-align: left;
  border-bottom: 1px solid var(--hairline-soft);
}
.bfb-prose th { color: var(--content); font-weight: 600; }
.bfb-prose hr { border: 0; border-top: 1px solid var(--hairline-soft); margin: 2em 0; }
.bfb-prose--zwei { max-width: none; columns: 2; column-gap: clamp(30px, 5vw, 64px); }
.bfb-prose--zwei > * { break-inside: avoid; }
@media (max-width: 720px) { .bfb-prose--zwei { columns: 1; } }

/* --- Bild und Galerie -------------------------------------------------- */
.bfb-bild { margin: 0; }
.bfb-bild img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius); box-shadow: var(--shadow-tile);
}
.bfb-bild figcaption,
.bfb-galerie figcaption {
  margin-top: 10px; font-size: 14px; color: var(--content-2);
}
.bfb-galerie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(180px, calc(100% / var(--sp, 3) - 16px), 420px), 1fr));
  gap: 16px;
}
.bfb-galerie figure { margin: 0; }
.bfb-galerie img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius);
}

/* --- Rahmen fuer Video und Einbettung ---------------------------------- */
.bfb-rahme {
  position: relative; width: 100%;
  border-radius: var(--radius); overflow: hidden;
  background: #000;
}
.bfb-rahme--16x9 { aspect-ratio: 16 / 9; }
.bfb-rahme--21x9 { aspect-ratio: 21 / 9; }
.bfb-rahme--4x3  { aspect-ratio: 4 / 3; }
.bfb-rahme--1x1  { aspect-ratio: 1 / 1; }
.bfb-rahme--9x16 { aspect-ratio: 9 / 16; max-width: 420px; margin-inline: auto; }
.bfb-rahme iframe,
.bfb-rahme video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0;
  object-fit: contain; background: #000;
}

/* Alte Einbettung aus bs_video_embed – gleiche Form, damit News-Beitraege
   mit Video nicht in sich zusammenfallen. Diese Klasse hatte bisher gar
   keine Regel; das Iframe stand deshalb mit 150 Pixeln Hoehe da. */
.embed {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: var(--radius); overflow: hidden; background: #000;
  margin: 1.4em 0;
}
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.bfb-video > .bfb-titel { margin-bottom: 10px; }
.bfb-video > .bfb-lead  { margin-bottom: 26px; }

/* --- Gesperrtes Video --------------------------------------------------- */
/* Was hier steht, ist die Anzeige. Die eigentliche Sperre sitzt in
   media.php: vor dem Zeitpunkt kommt dort kein einziges Byte heraus. */
.bfb-schloss {
  position: relative;
  display: grid; place-items: center;
  border-radius: var(--radius); overflow: hidden;
  background-color: var(--surface-2); background-size: cover; background-position: center;
  border: 1px solid var(--hairline-soft);
}
.bfb-schloss-schleier {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.55));
}
.bfb-schloss-inhalt {
  position: relative; z-index: 1;
  display: grid; gap: 18px; justify-items: center;
  padding: clamp(20px, 4vw, 40px); text-align: center;
}
.bfb-schloss-text {
  margin: 0; color: #fff;
  font-size: clamp(17px, 2.2vw, 24px); font-weight: 600; letter-spacing: -.01em;
}
.bfb-schloss-zeit { margin: 0; color: rgba(255,255,255,.72); font-size: 14px; }
.bfb-schloss .bfb-cd--gross .bfb-cd-teil {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.bfb-schloss .bfb-cd-zahl { color: #fff; }
.bfb-schloss .bfb-cd-lbl  { color: rgba(255,255,255,.7); }

/* --- Konferenz ---------------------------------------------------------- */
.bfb-konferenz {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: clamp(24px, 4vw, 44px);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--card-bg);
}
.bfb-live {
  width: 10px; height: 10px; border-radius: 50%;
  background: #e0243c;
  box-shadow: 0 0 0 0 rgba(224,36,60,.6);
  animation: bfb-puls 2s var(--ease) infinite;
}
@keyframes bfb-puls {
  0%   { box-shadow: 0 0 0 0 rgba(224,36,60,.55); }
  70%  { box-shadow: 0 0 0 12px rgba(224,36,60,0); }
  100% { box-shadow: 0 0 0 0 rgba(224,36,60,0); }
}

/* --- Raster und Karten --------------------------------------------------- */
.bfb-raschter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(220px, calc(100% / var(--sp, 3) - 18px), 460px), 1fr));
  gap: 16px;
}
.bfb-karte {
  display: block;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius);
  background: var(--card-bg);
  box-shadow: var(--shadow-tile);
  color: inherit;
}
.bfb-karte h3 { margin: 0 0 10px; font-size: 19px; font-weight: 600; letter-spacing: -.01em; color: var(--content); }
.bfb-karte p  { margin: 0; color: var(--content-2); font-size: 16px; line-height: 1.5; }
.bfb-karte--bild { padding: 0; overflow: hidden; }
.bfb-karte--bild img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.bfb-karte-text { padding: clamp(20px, 2.6vw, 28px); }
.bfb-karte--link { transition: transform .3s var(--ease-out), box-shadow .3s var(--ease); }
.bfb-karte--link:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }

/* --- Daten, Zahlen, Schritte ---------------------------------------------- */
.bfb-date {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px; margin: 0;
  background: var(--hairline-soft);
  border-block: 1px solid var(--hairline-soft);
}
.bfb-date > div { background: var(--surface); padding: 22px 18px; text-align: center; }
.bfb--ton-grau .bfb-date > div { background: var(--surface-2); }
.bfb-date dt { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--content-2); }
.bfb-date dd { margin: 6px 0 0; font-size: 18px; font-weight: 600; color: var(--content); }

.bfb-zahle {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(20px, 4vw, 48px);
}
.bfb-zahl { text-align: center; }
.bfb-zahl strong {
  display: block;
  font-size: clamp(32px, 5vw, 56px); font-weight: 600; letter-spacing: -.02em;
  color: var(--content);
}
.bfb-zahl span { display: block; margin-top: 6px; font-size: 14px; color: var(--content-2); }

.bfb-schritt { counter-reset: schritt; list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.bfb-schritt li {
  counter-increment: schritt;
  position: relative; padding-left: 62px;
}
.bfb-schritt li::before {
  content: counter(schritt);
  position: absolute; left: 0; top: 0;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  font-family: var(--font-mono); font-weight: 600;
  color: var(--accent);
}
.bfb-schritt h3 { margin: 8px 0 6px; font-size: 19px; font-weight: 600; color: var(--content); }
.bfb-schritt p  { margin: 0; color: var(--content-2); }

/* --- Fragen und Antworten -------------------------------------------------- */
.bfb-faq { display: grid; gap: 0; max-width: 820px; margin-inline: auto; text-align: left; }
.bfb-faq details { border-bottom: 1px solid var(--hairline-soft); }
.bfb-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 4px; min-height: 56px;
  font-size: 18px; font-weight: 600; letter-spacing: -.01em;
  color: var(--content); cursor: pointer; list-style: none;
}
.bfb-faq summary::-webkit-details-marker { display: none; }
.bfb-faq summary::after {
  content: ""; flex: none;
  width: 11px; height: 11px;
  border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .3s var(--ease);
}
.bfb-faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.bfb-faq details > div { padding: 0 4px 22px; color: var(--content-2); line-height: 1.6; }

/* --- Zitat, Logos, Band, Hinweis --------------------------------------------- */
.bfb-zitat { margin: 0 auto; max-width: 780px; text-align: center; }
.bfb-zitat blockquote {
  margin: 0; font-size: clamp(21px, 3vw, 32px); line-height: 1.35;
  letter-spacing: -.015em; color: var(--content);
}
.bfb-zitat figcaption { margin-top: 20px; font-size: 15px; color: var(--content-2); }
.bfb-zitat figcaption span::before { content: " · "; }

.bfb-logos {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: clamp(24px, 5vw, 56px);
}
.bfb-logos img { max-height: 40px; width: auto; opacity: .75; }

.bfb-band {
  padding: clamp(32px, 5vw, 64px);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  box-shadow: var(--shadow-tile);
  text-align: center;
}
.bfb-band h2 { margin: 0 0 12px; font-size: clamp(26px, 4vw, 44px); font-weight: 600; letter-spacing: -.01em; }
.bfb-band p  { margin: 0; color: var(--content-2); }
.bfb-band .bfb-knopf-zile { justify-content: center; }

.bfb-hiiwiis {
  padding: 20px 24px;
  border: 1px solid var(--hairline);
  border-left-width: 3px;
  border-radius: var(--radius);
  background: var(--card-bg);
  text-align: left;
}
.bfb-hiiwiis strong { display: block; margin-bottom: 6px; color: var(--content); }
.bfb-hiiwiis p { margin: 0; color: var(--content-2); }
.bfb-hiiwiis--info { border-left-color: var(--accent); }
.bfb-hiiwiis--ok   { border-left-color: var(--state-live); }
.bfb-hiiwiis--warn { border-left-color: #c2701a; }

.bfb-linie { border: 0; border-top: 1px solid var(--hairline-soft); margin: 0; }
.bfb-luft { width: 100%; }

/* Eigener HTML-Code.

   Hier steht absichtlich fast nichts: der Code bringt seine Gestaltung
   selbst mit, und alles, was hier gesetzt wuerde, muesste er erst wieder
   ueberschreiben. Frueher lag er in .bfb-prose – und das heisst 68ch
   Lesebreite, also rund 615 Pixel. Eine Seite, die fuer die volle Breite
   gebaut ist, wurde dadurch in eine schmale Spalte gequetscht, egal was
   bei der Breite eingestellt war.

   Geblieben ist nur die eine Zeile, die verhindert, dass ein zu grosses
   Bild die ganze Seite seitlich wegschiebt. */
.bfb-eigen { min-width: 0; }
.bfb-eigen img, .bfb-eigen video, .bfb-eigen table { max-width: 100%; }

/* Mit der Breite "Über di ganz Breiti" faellt auch der seitliche Rand weg –
   dann hat der eigene Code die Flaeche wirklich ganz fuer sich. */
.bfb-wrap--voll > .bfb-eigen { width: 100%; }

/* Knapper Fussbereich fuer Landeseiten */
.footer--knapp { padding-block: 26px; }
.footer--knapp .footer-base { border-top: 0; margin-top: 0; padding-top: 0; }

/* == 16  Bewegung ======================================================= */

/* Einblenden beim Scrollen. Ohne JS bleibt alles sichtbar: die Klasse .js
   wird erst im <head> gesetzt, die Regel greift also nur dann. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay: var(--delay, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Aussagen mit Wortmaske blenden nicht zusätzlich ein – sonst liefen zwei
   Bewegungen übereinander. Die Maske allein trägt den Auftritt. */
.js [data-reveal][data-words] { opacity: 1; transform: none; }

/* Wortweise Maske für die grossen Aussagen. */
.word { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; }
.word > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform .9s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.is-in .word > span { transform: none; }

/* Scrollgebundene Bewegung. Die Werte kommen aus dem Skript. */
[data-parallax] { will-change: transform; }

/* == 16b  Tippziele ===================================================== */
/*
   Die Richtlinien für barrierefreie Webinhalte (WCAG 2.2) nennen 24 × 24 px
   als Untergrenze und 44 × 44 px als Zielwert. Kleine Textlinks reissen
   das sonst. Die Flächen wachsen über Polster und unsichtbare Trefferzonen,
   das sichtbare Satzbild bleibt unverändert.
*/
.footer-col .col-body a,
.legal-links a {
  display: inline-block;
  padding-block: 5px;
}

@media (pointer: coarse) {
  .chevron-link { min-height: 44px; }
  .mailto { padding-block: 6px; }
  .gallery-dots button { width: 40px; height: 40px; }
  .footer-col .col-body a { padding-block: 9px; }

  /* Links, die mitten im Satz stehen, dürfen die Zeile nicht auseinander-
     drücken – ihre Trefferfläche liegt darum ausserhalb des Textflusses. */
  .ribbon .chevron-link,
  .legal-links a,
  .legal address a,
  .legal-list a { position: relative; }

  .ribbon .chevron-link::before,
  .legal-links a::before,
  .legal address a::before,
  .legal-list a::before {
    content: "";
    position: absolute;
    left: -8px; right: -8px;
    top: 50%; height: 44px;
    transform: translateY(-50%);
  }
}


/* --- Echte Marken statt nachgebauter Formen ---------------------------- */
/* Die Wortmarke liegt als weisse Datei vor. Statt eine zweite, schwarze
   Datei zu pflegen, wird sie auf heller Fläche invertiert – ein Token
   entscheidet, welche Variante gilt. */
.nav-brand img {
  height: 30px;
  width: auto;
  filter: var(--mark-filter, none);
}
.nav-sheet .nav-brand img { height: 34px; }

.tile-logo {
  width: min(230px, 62%);
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,.35));
}

/* == 16c  Schalter und Effekte ========================================== */

/* --- Erscheinungsschalter: Sonne und Mond wechseln sich ab ------------- */
.theme-toggle { position: relative; }
.theme-toggle svg {
  position: absolute; inset: 0; margin: auto;
  width: 18px; height: 18px;
  transition: opacity .3s var(--ease), transform .5s var(--ease-out);
}
.theme-toggle .icon-sun  { opacity: 0; transform: rotate(50deg) scale(.5); }
.theme-toggle .icon-moon { opacity: 1; transform: none; }
.theme-toggle[aria-pressed="true"] .icon-sun  { opacity: 1; transform: none; }
.theme-toggle[aria-pressed="true"] .icon-moon { opacity: 0; transform: rotate(-50deg) scale(.5); }

/* Beim Umschalten gleiten die grossen Flächen weich hinüber, statt hart
   umzuspringen. Nur für den Moment des Wechsels aktiv. */
html[data-switching] body,
html[data-switching] .nav-bar,
html[data-switching] .nav-sheet,
html[data-switching] .section,
html[data-switching] .tile,
html[data-switching] .card,
html[data-switching] .sequence,
html[data-switching] .footer {
  transition: background-color .45s var(--ease), color .45s var(--ease),
              border-color .45s var(--ease);
}

/* --- Lesefortschritt in der Kopfleiste --------------------------------- */
.nav-progress {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px;
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--accent), var(--accent-hover));
  opacity: .9;
  pointer-events: none;
}

/* --- Lichtkegel, der dem Zeiger folgt ---------------------------------- */
.hero-glow {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity .8s var(--ease);
  background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 40%),
              var(--glow), transparent 68%);
}
.hero[data-pointer="true"] .hero-glow { opacity: 1; }
.hero > .wrap, .hero > .signal { position: relative; z-index: 1; }

/* --- Neigung mit Lichtreflex ------------------------------------------- */
/* Die Kachel kippt dem Zeiger entgegen, ein weicher Reflex wandert mit.
   Beim Verlassen federt sie langsam zurück. */
/* Registriert, damit die Werte weich laufen können. Ohne @property sind
   Custom Properties für den Browser nur Text: sie springen, statt zu
   gleiten, und ein Übergang darauf greift gar nicht. */
@property --rx   { syntax: "<angle>";  inherits: false; initial-value: 0deg; }
@property --ry   { syntax: "<angle>";  inherits: false; initial-value: 0deg; }
@property --lift { syntax: "<length>"; inherits: false; initial-value: 0px;  }

/* Wichtig: .tile:hover und .card:hover setzen selbst ein transform und sind
   spezifischer als [data-tilt]. Neigung, Anheben und der Scroll-Eintritt
   gehören darum in eine einzige Transformation – sonst überschreibt eine
   die andere.

   Bewegt wird über die Variablen, nicht über einen Übergang auf transform:
   ein solcher Übergang würde die scrollgebundene Bewegung um seine ganze
   Dauer hinterherziehen und alles weich verschmieren. */
[data-tilt] {
  transform-style: preserve-3d;
  will-change: transform;
  transition: --rx .55s var(--ease-out), --ry .55s var(--ease-out),
              --lift .55s var(--ease-out), box-shadow .45s var(--ease);
}
[data-tilt],
.tile[data-tilt], .tile[data-tilt]:hover,
.card[data-tilt], .card[data-tilt]:hover {
  transform: perspective(1100px)
             rotateX(var(--rx, 0deg))
             rotateY(var(--ry, 0deg))
             translateY(calc(var(--lift, 0px) + var(--enter-y, 0px)))
             scale(var(--enter-s, 1));
}
[data-tilt][data-lift="true"] {
  --lift: -8px;
  /* Unter dem Zeiger folgt die Fläche unmittelbar, beim Verlassen
     schwingt sie über die Regel darüber ruhig zurück. */
  transition: --rx .1s linear, --ry .1s linear,
              --lift .3s var(--ease-out), box-shadow .45s var(--ease);
  box-shadow: var(--shadow-lift);
}
.tilt-glare {
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .45s var(--ease);
  background: radial-gradient(340px circle at var(--gx, 50%) var(--gy, 50%),
              rgba(255, 255, 255, .14), transparent 62%);
}
[data-tilt][data-lift="true"] .tilt-glare { opacity: 1; }
.tile--dark .tilt-glare {
  background: radial-gradient(340px circle at var(--gx, 50%) var(--gy, 50%),
              rgba(76, 194, 245, .18), transparent 62%);
}
.card { position: relative; overflow: hidden; isolation: isolate; }

/* --- Knöpfe, die dem Zeiger entgegenkommen ----------------------------- */
[data-magnet] {
  transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0);
  transition: transform .5s var(--ease-out);
}
[data-magnet][data-pulling="true"] { transition: transform .12s linear; }

/* --- Laufband ---------------------------------------------------------- */
.marquee {
  position: relative;
  overflow: hidden;
  padding-block: clamp(22px, 3vw, 40px);
  border-block: 1px solid var(--hairline-soft);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-row {
  display: flex;
  width: max-content;
  animation: marquee-run var(--speed, 44s) linear infinite;
}
.marquee-row + .marquee-row { margin-top: 6px; animation-direction: reverse; }
.marquee:hover .marquee-row,
.marquee:focus-within .marquee-row { animation-play-state: paused; }
.marquee i {
  display: inline-flex; align-items: center;
  font-style: normal;
  font-size: clamp(26px, 4.6vw, 58px);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.1;
  padding-inline: clamp(16px, 2vw, 30px);
  white-space: nowrap;
  color: var(--content-2);
}
.marquee i::after {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent);
  margin-left: clamp(16px, 2vw, 30px);
  flex: none;
}
@keyframes marquee-run { to { transform: translate3d(-50%, 0, 0); } }

/* --- Zeigerring -------------------------------------------------------- */
/* Ergänzt den echten Mauszeiger, ersetzt ihn nicht – der Systemzeiger
   bleibt sichtbar, damit niemand die Orientierung verliert. */
.cursor-ring {
  position: fixed; top: 0; left: 0;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  pointer-events: none;
  z-index: 300;
  opacity: 0;
  transform: translate3d(-100px, -100px, 0);
  transition: width .3s var(--ease-out), height .3s var(--ease-out),
              margin .3s var(--ease-out), opacity .3s var(--ease),
              background-color .3s var(--ease);
}
.cursor-ring[data-on="true"] { opacity: .55; }
.cursor-ring[data-hot="true"] {
  width: 60px; height: 60px; margin: -30px 0 0 -30px;
  opacity: .9;
  background: rgba(76, 194, 245, .10);
}
@media (pointer: coarse) { .cursor-ring { display: none; } }

/* == 16d  Scrollgebundene Bewegung ====================================== */
/*
   Die Bewegung hängt hier direkt am Scrollfortschritt, nicht an einem
   Schalter, der bei Sichtbarkeit umlegt. Das ergibt einen durchgehenden
   Verlauf statt eines Sprungs, läuft im Compositor und kommt ohne einen
   einzigen Scroll-Zuhörer aus.

   Alles steckt in @supports: Browser ohne Scroll-Zeitleiste behalten die
   bisherige Einblendung per JavaScript, die Seite sieht dort ruhiger aus,
   aber nie kaputt.

   Die registrierten Eigenschaften sind nötig, damit --enter-y und --enter-s
   überhaupt animierbar sind: ohne @property sind Custom Properties für den
   Browser nur Text und springen hart.
*/
@property --enter-y {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --enter-s {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}
@property --art-y {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

/* Hinweis: Die Bewegung hängt bewusst NICHT an CSS-Scroll-Zeitleisten.
   Es gibt Umgebungen, in denen CSS.supports("animation-timeline","view()")
   true meldet, die Zeitleiste aber nie aktiv wird – die Seite stünde dann
   still. Den Fortschritt rechnet darum das Skript, in einem gemeinsamen
   Takt pro Bild. Geschrieben werden nur die Variablen unten. */

/* == 17  Rücksichten ==================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .word > span { transform: none; }
  .signal, .studio-stage img { transform: none !important; }

  /* Die Effektebene wird abgeschaltet, nicht nur verlangsamt. */
  [data-tilt] { transform: none !important; }
  [data-magnet] { transform: none !important; }
  .tilt-glare, .hero-glow, .cursor-ring { display: none !important; }
  .marquee-row { animation: none !important; }
  .marquee { overflow-x: auto; }
}

/* Mehr Kontrast. Der Wert muss je Erscheinung anders ausfallen: ein dunkles
   Grau, das auf Weiss stärker wirkt, wäre auf Schwarz das Gegenteil. */
@media (prefers-contrast: more) and (prefers-color-scheme: light) {
  :root { --content-2: #4b4b50; --hairline: rgba(0,0,0,.4); --hairline-soft: rgba(0,0,0,.24); }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --content-2: #d8d8dd; --hairline: rgba(255,255,255,.46); --hairline-soft: rgba(255,255,255,.28); }
}
@media (prefers-contrast: more) {
  :root[data-theme="dark"] { --content-2: #d8d8dd; --hairline: rgba(255,255,255,.46); --hairline-soft: rgba(255,255,255,.28); }
  :root[data-theme="light"] { --content-2: #4b4b50; --hairline: rgba(0,0,0,.4); --hairline-soft: rgba(0,0,0,.24); }
}
@media (prefers-contrast: more) {
  /* Immer dunkle Abschnitte bringen ihre eigenen Tokens mit. */
  .on-dark, .tile--dark {
    --content-2: #d8d8dd;
    --hairline: rgba(255,255,255,.46);
    --hairline-soft: rgba(255,255,255,.28);
  }
  .nav-links a { opacity: 1; }
  .tile, .card, .state, .btn--secondary { border-width: 1.5px; }
}

/* Weniger Transparenz: aus der Glasebene wird eine deckende Leiste.
   Das Material darf Inhalt rahmen, aber nie Voraussetzung für Lesbarkeit sein. */
@media (prefers-reduced-transparency: reduce) {
  /* Menü und Suche teilen sich die Klasse .nav-sheet. */
  .nav-bar,
  .nav-bar[data-theme="dark"],
  .nav-sheet {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .nav-bar, .nav-sheet { background: var(--veil-solid); }
  .nav-bar[data-theme="dark"] { background: #000; }
}

@media (forced-colors: active) {
  .nav-bar, .nav-sheet { background: Canvas; }
  .tile, .card, .state { border: 1px solid CanvasText; }
  .seq-arc, .nav-mark { forced-color-adjust: none; }
}

@media print {
  .nav-bar, .nav-sheet, .ribbon, .gallery-nav, .gallery-dots, .skip { display: none; }
  body { color: #000; background: #fff; font-size: 12pt; }
  .gallery { display: block; overflow: visible; }
  .sequence-stage { position: static; height: auto; display: block; }
  .seq-step { opacity: 1; }
}

/* == Breiten ============================================================ */

/* Tablet */
/* Mittlere Breiten: erst weicht der Knopf in der Leiste, dann rücken die
   Navigationspunkte enger zusammen. Umgebrochen wird nie. */
@media (max-width: 1199px) {
  .nav-cta { display: none; }
}

@media (max-width: 1068px) {
  .nav-links a { padding-inline: 8px; }
  .nav-links a::after { left: 8px; right: 8px; }
  .principles { grid-template-columns: repeat(2, 1fr); }
  .studio-text { grid-template-columns: 1fr; gap: 0; }
}

/* Mobil */
@media (max-width: 833px) {
  :root { --gutter: 20px; }

  .nav-links, .nav-cta { display: none; }
  .nav-burger { display: grid; }

  .tiles { grid-template-columns: 1fr; }
  .tile { min-height: 400px; }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .contact-meta { grid-template-columns: 1fr; }

  .gallery-head { flex-direction: column; align-items: flex-start; }
  .gallery-nav { display: none; }

  .studio-stage { min-height: 64vh; }

  /* Fussbereich klappt auf */
  .footer-cols { grid-template-columns: 1fr; gap: 0; padding-block: 8px; }
  .footer-col { border-bottom: 1px solid var(--hairline-soft); }
  .footer-col:last-child { border-bottom: 0; }
  .footer-col h3 { display: none; }
  .footer-col .col-toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; min-height: 48px; padding: 12px 0;
    background: none; border: 0; cursor: pointer;
    font-size: 12px; font-weight: 600; color: var(--content);
    text-align: left;
  }
  .footer-col .col-toggle .caret {
    width: 7px; height: 7px; flex: none;
    border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .3s var(--ease);
  }
  .footer-col .col-toggle[aria-expanded="true"] .caret {
    transform: rotate(-135deg) translate(-2px, -2px);
  }
  .footer-col .col-body { display: none; padding-bottom: 16px; }
  .footer-col .col-toggle[aria-expanded="true"] + .col-body { display: block; }

  .footer-base { flex-direction: column; align-items: flex-start; }
  .footer-base .region { margin-left: 0; }
}

@media (max-width: 480px) {
  .btn-row .btn { width: 100%; }
  .facts { grid-template-columns: 1fr; }
}