/* Vorlage „bald“ (Coming Soon; Neubau 14.10.2026: 3D-Scroll-One-Pager, Objekt und Text verschmelzen). Werte nach Brand-Manual 2026
   (00_docs/brandmanual-2026-web-referenz.md): Grund #000, Papier #F4F3F0, Grau leise #A9A8A4, Grau zart #7F7E7A, Kachel #0B0B0B,
   Haarlinie Weiß 12 %, Instrument Serif (Headlines), Schibsted Grotesk (Text), Knöpfe rund, keine Versalien, kein Glow, alles linksbündig.
   Drei Betriebsarten:
   1. Bühne (Standard mit JS + WebGL): fixierte Leinwand über die ganze Seite, ein gepinntes Kapitel, je Szene ein Textblock links
      oder rechts (mobil unten oder oben), Deckkraft aus --o (setzt szenen/bald.js je Bild).
   2. Statisch (html.bald-statisch: reduzierte Bewegung, ohne WebGL, ?ohne-gl) und ohne JS: Szenen untereinander, Poster je Szene
      neben dem Text, keine Leinwand.
   Abstand unten: --banner-h (Höhe des Einwilligungsbanners, setzt bald.js), damit kein Text unter dem Banner liegt. */
html.bald {
  --tinte: #f4f3f0; --leise: #a9a8a4; --zart: #7f7e7a; --kachel: #0b0b0b; --linie: rgba(255, 255, 255, .12);
  --serif: "Instrument Serif", Georgia, serif; --sans: "Schibsted Grotesk", system-ui, sans-serif;
  --glas-spektrum: linear-gradient(90deg, #6d5cff 0%, #3b9dff 22%, #36d6c3 42%, #c9ef6b 60%, #ffc25a 78%, #ff6a5f 100%);
  --rand: 40px; --kopf: 96px; --banner-h: 0px;
  /* Einwilligungsbanner (css/extras/einwilligung.css liest --bm-*) im Stil Schwarz */
  --bm-rand: 16px; --bm-bg-weiss: #0b0b0b; --bm-bg-alt: #161616; --bm-text: #f4f3f0; --bm-text-leise: #a9a8a4;
  --bm-linie: rgba(255, 255, 255, .14); --bm-radius-karte: 20px; --bm-radius-pille: 999px; --bm-schatten-schwebend: none;
  --bm-font: var(--sans); --bm-g-fett: 500; --bm-g-mittel: 500; --bm-knopf-hoehe: 40px; --bm-t-body: 1rem; --bm-t-klein: .8125rem;
  --bm-t-meta: .75rem; --bm-fokus: #f4f3f0; --bm-fokus-breite: 2px; --bm-fokus-versatz: 2px;
  background: #000; color-scheme: dark;
}
html.bald *, html.bald *::before, html.bald *::after { box-sizing: border-box; }
html.bald body { margin: 0; background: #000; color: var(--tinte); font: 400 16px/24px var(--sans); -webkit-font-smoothing: antialiased; }
html.bald a { color: inherit; }
html.bald :focus-visible { outline: 2px solid var(--tinte); outline-offset: 3px; border-radius: 4px; }

/* Kopf: nur das Logo */
.bald-kopf { position: fixed; z-index: 20; top: 0; left: 0; right: 0; padding: 28px var(--rand); pointer-events: none; }
.bald-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; pointer-events: auto; }
.bald-logo img { display: block; height: 24px; width: auto; }
.bald-logo span { font: 500 18px/1 var(--sans); letter-spacing: -.01em; color: var(--tinte); }

/* Leinwand: fixiert, vollflächig, hinter allem */
.bald-leinwand { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.bald-leinwand canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s ease; }
html.bald-gl .bald-leinwand canvas { opacity: 1; }
html:not(.bald-js) .bald-leinwand, html.bald-statisch .bald-leinwand { display: none; }
#inhalt { position: relative; z-index: 1; }
#bald-kapitel .glas-spur { position: fixed; top: 0; left: 0; z-index: 30; }

/* Typografie */
.bald-titel { margin: 0 0 1.25rem; font: 400 clamp(2.5rem, 4.3vw, 4rem)/1 var(--serif); letter-spacing: -.02em; color: var(--tinte); text-wrap: balance; }
.bald-titel--gross { font-size: clamp(2.875rem, 5.4vw, 5.25rem); line-height: .96; }
.bald-titel em { font-style: italic; }
.bald-satz { margin: 0; max-width: 34ch; color: var(--leise); font-size: 1.125rem; line-height: 1.55; text-wrap: pretty; }
.bald-wortmarke { font: 500 .62em/1 var(--sans); letter-spacing: -.01em; vertical-align: .12em; margin-right: .1em; }
.bald-bereiche { list-style: none; margin: 1.75rem 0 0; padding: 0; max-width: 30rem; }
.bald-bereiche li { display: grid; grid-template-columns: 6.5rem 1fr; gap: 16px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--linie); color: var(--leise); font-size: .9375rem; line-height: 1.45; }
.bald-bereiche li:last-child { border-bottom: 1px solid var(--linie); }
.bald-bereich { font: 400 1.5rem/1 var(--serif); color: var(--tinte); }

/* Hinweis: weiter scrollen (verschwindet nach dem ersten Scrollen) */
.bald-weiter { display: flex; align-items: center; gap: 12px; margin: 2.5rem 0 0; font-size: 13px; color: var(--zart); transition: opacity .5s; }
.bald-weiter span { display: block; width: 1px; height: 32px; background: var(--linie); position: relative; overflow: hidden; }
.bald-weiter span::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--tinte); animation: bald-fall 2.2s ease-in-out infinite; }
@keyframes bald-fall { to { top: 100%; } }
html.bald-gescrollt .bald-weiter { opacity: 0; }

/* Knöpfe: Primär Papier, Sekundär Kontur Papier 55 %, rund, Grotesk Medium 13 */
.bald-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin: 2rem 0 0; }
html.bald .bald-knopf { display: inline-flex; align-items: center; min-height: 44px; padding: 12px 22px; border-radius: 999px; border: 1px solid rgba(244, 243, 240, .55);
  font: 500 13px/1 var(--sans); text-decoration: none; color: var(--tinte); transition: border-color .35s, background-color .35s, color .35s; }
html.bald .bald-knopf:hover { border-color: var(--tinte); }
html.bald .bald-knopf--primaer { background: var(--tinte); border-color: var(--tinte); color: #000; }
html.bald .bald-knopf--primaer:hover { background: #fff; }

/* ---------- 1. Bühne (JS, WebGL) ---------- */
html.bald-js:not(.bald-statisch) #bald-kapitel { --kap-laenge: 1150vh; }
html.bald-js:not(.bald-statisch) #bald-kapitel .glas-kapitel__bahn { height: var(--kap-laenge); }
html.bald-js:not(.bald-statisch) #bald-kapitel .glas-kapitel__buehne { position: sticky; top: 0; display: block; height: 100vh; height: 100svh; min-height: 0; padding: 0; }
html.bald-js:not(.bald-statisch) #bald-kapitel .bald-texte { position: absolute; inset: 0; display: block; max-width: none; margin: 0; }
html.bald-js:not(.bald-statisch) #bald-kapitel .bald-szene {
  position: absolute; inset: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-content: center;
  padding: var(--kopf) var(--rand) max(48px, calc(var(--banner-h) + 32px));
  opacity: var(--o, 0); transform: none; transition: none; pointer-events: none; visibility: visible;
}
html.bald-js:not(.bald-statisch) #bald-kapitel .bald-szene .bald-bild { display: none; }
html.bald-js:not(.bald-statisch) #bald-kapitel .bald-szene[data-seite="links"] .bald-text { grid-column: 1 / span 5; }
html.bald-js:not(.bald-statisch) #bald-kapitel .bald-szene[data-seite="rechts"] .bald-text { grid-column: 8 / span 5; }
html.bald-js:not(.bald-statisch) #bald-kapitel .bald-szene.ist-sichtbar .bald-text { pointer-events: auto; }
/* Auftritt: Titel und Satz gleiten versetzt (Parallaxe), Richtung --r: von unten ein, nach oben aus */
html.bald-js:not(.bald-statisch) #bald-kapitel .bald-text > * { will-change: transform; }
html.bald-js:not(.bald-statisch) #bald-kapitel .bald-titel { transform: translate3d(0, calc((1 - var(--o, 0)) * var(--r, 1) * 40px), 0); }
html.bald-js:not(.bald-statisch) #bald-kapitel .bald-text > :not(.bald-titel) { transform: translate3d(0, calc((1 - var(--o, 0)) * var(--r, 1) * 72px), 0); }
html.bald-js:not(.bald-statisch) #bald-kapitel .bald-szene:first-child { --o: 1; }

/* ---------- 2. Statisch (reduzierte Bewegung, ohne WebGL, ohne JS): Szenen untereinander mit Poster ---------- */
html.bald-statisch #bald-kapitel .glas-kapitel__bahn, html:not(.bald-js) #bald-kapitel .glas-kapitel__bahn { height: auto !important; }
html.bald-statisch #bald-kapitel .glas-kapitel__buehne, html:not(.bald-js) #bald-kapitel .glas-kapitel__buehne { position: relative; display: block; height: auto; min-height: 0; padding: 0; }
html.bald-statisch #bald-kapitel .glas-spur, html:not(.bald-js) #bald-kapitel .glas-spur { display: none; }
html.bald-statisch #bald-kapitel .bald-texte, html:not(.bald-js) #bald-kapitel .bald-texte { display: block; max-width: none; margin: 0; }
html.bald-statisch #bald-kapitel .bald-szene, html:not(.bald-js) #bald-kapitel .bald-szene {
  position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center;
  min-height: 86vh; padding: 64px var(--rand); opacity: 1; transform: none; transition: none; pointer-events: auto;
}
html.bald-statisch #bald-kapitel .bald-szene:first-child, html:not(.bald-js) #bald-kapitel .bald-szene:first-child { min-height: 100vh; padding-top: var(--kopf); }
html.bald-statisch #bald-kapitel .bald-bild, html:not(.bald-js) #bald-kapitel .bald-bild { margin: 0; grid-row: 1; }
html.bald-statisch #bald-kapitel .bald-bild img, html:not(.bald-js) #bald-kapitel .bald-bild img { display: block; width: 100%; height: auto; max-height: 76vh; object-fit: contain; }
html.bald-statisch #bald-kapitel .bald-text, html:not(.bald-js) #bald-kapitel .bald-text { grid-row: 1; }
html.bald-statisch #bald-kapitel [data-seite="links"] .bald-text, html:not(.bald-js) #bald-kapitel [data-seite="links"] .bald-text { grid-column: 1 / span 5; }
html.bald-statisch #bald-kapitel [data-seite="links"] .bald-bild, html:not(.bald-js) #bald-kapitel [data-seite="links"] .bald-bild { grid-column: 7 / span 6; }
html.bald-statisch #bald-kapitel [data-seite="rechts"] .bald-text, html:not(.bald-js) #bald-kapitel [data-seite="rechts"] .bald-text { grid-column: 8 / span 5; }
html.bald-statisch #bald-kapitel [data-seite="rechts"] .bald-bild, html:not(.bald-js) #bald-kapitel [data-seite="rechts"] .bald-bild { grid-column: 1 / span 6; }
html.bald-statisch #bald-kapitel [data-seite="keine"] .bald-bild, html:not(.bald-js) #bald-kapitel [data-seite="keine"] .bald-bild { grid-column: 3 / span 8; }
html.bald-statisch .bald-weiter, html:not(.bald-js) .bald-weiter { display: none; }
html.bald-statisch #bald-kapitel [data-zustand="licht"], html:not(.bald-js) #bald-kapitel [data-zustand="licht"] { display: none; }

/* Fuß: Kontakt + Rechtliches (deckt die Leinwand) */
.bald-fuss { position: relative; z-index: 3; background: #000; border-top: 1px solid var(--linie); }
.bald-fuss__innen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding: 48px var(--rand) calc(56px + var(--banner-h)); font-size: 13px; line-height: 20px; color: var(--leise); }
.bald-fuss p { margin: 0; }
.bald-fuss__firma { color: var(--tinte); }
.bald-fuss a { text-decoration: none; }
.bald-fuss a:hover { text-decoration: underline; text-underline-offset: 3px; }
.bald-fuss__recht { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: flex-end; align-content: flex-start; }

/* Einwilligungsbanner kompakt unten rechts (Desktop) */
@media (min-width: 40.0625rem) {
  html.bald .bm-einwilligung { max-width: 24rem; padding: 1rem 1.125rem; }
  html.bald .bm-einwilligung__titel { font-size: .875rem; margin-bottom: .25rem; }
  html.bald .bm-einwilligung__text { font-size: .75rem; line-height: 1.45; margin-bottom: .75rem; }
  html.bald .bm-einwilligung__knoepfe button { min-height: 36px; }
}

@media (max-width: 1100px) and (min-width: 901px) {
  html.bald-js:not(.bald-statisch) #bald-kapitel .bald-szene[data-seite="links"] .bald-text { grid-column: 1 / span 6; }
  html.bald-js:not(.bald-statisch) #bald-kapitel .bald-szene[data-seite="rechts"] .bald-text { grid-column: 7 / span 6; }
}
@media (max-width: 900px) {
  html.bald { --rand: 20px; --kopf: 76px; }
  .bald-kopf { padding: 22px var(--rand); }
  .bald-logo img { height: 22px; }
  .bald-logo span { font-size: 16px; }
  .bald-titel { font-size: clamp(2.125rem, 9vw, 2.75rem); line-height: 1.02; margin-bottom: .875rem; }
  .bald-titel--gross { font-size: clamp(2.375rem, 10.4vw, 3.125rem); line-height: .98; }
  .bald-satz { font-size: 1rem; }
  .bald-weiter { margin-top: 1.5rem; }
  .bald-bereiche { margin-top: 1rem; }
  .bald-bereiche li { grid-template-columns: 5rem 1fr; padding: 10px 0; font-size: .875rem; }
  .bald-bereich { font-size: 1.25rem; }
  .bald-knoepfe { margin-top: 1.25rem; }
  /* Bühne mobil: Text unten (links) bzw. oben (rechts); das Objekt steht im freien Teil */
  html.bald-js:not(.bald-statisch) #bald-kapitel { --kap-laenge: 1050vh; }
  html.bald-js:not(.bald-statisch) #bald-kapitel .bald-szene { display: flex; flex-direction: column; padding: var(--kopf) var(--rand) max(28px, calc(var(--banner-h) + 16px + env(safe-area-inset-bottom))); }
  html.bald-js:not(.bald-statisch) #bald-kapitel .bald-szene[data-seite="links"] { justify-content: flex-end; }
  html.bald-js:not(.bald-statisch) #bald-kapitel .bald-szene[data-seite="rechts"] { justify-content: flex-start; }
  html.bald-js:not(.bald-statisch) #bald-kapitel .bald-szene .bald-text { max-width: 34rem; }
  /* Statisch mobil: Poster über dem Text */
  html.bald-statisch #bald-kapitel .bald-szene, html:not(.bald-js) #bald-kapitel .bald-szene { display: block; min-height: 0; padding: 40px var(--rand); }
  html.bald-statisch #bald-kapitel .bald-szene:first-child, html:not(.bald-js) #bald-kapitel .bald-szene:first-child { min-height: 0; padding-top: var(--kopf); }
  html.bald-statisch #bald-kapitel .bald-bild, html:not(.bald-js) #bald-kapitel .bald-bild { width: min(78vw, 22rem); margin: 0 auto 24px; }
  html.bald-statisch #bald-kapitel .bald-bild img, html:not(.bald-js) #bald-kapitel .bald-bild img { max-height: 46vh; }
  .bald-fuss__innen { grid-template-columns: 1fr; padding: 40px var(--rand) calc(48px + var(--banner-h)); }
  .bald-fuss__recht { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .bald-weiter span::after { animation: none; }
  .bald-leinwand canvas { transition: none; }
}