/* Fallstudie smart dynamic und predata dynamic als eigene Seite (27.10.2026). Die Welt der beiden Marken:
   Berner Blau #0054A0 und Thuner Rot #BA0C2F, die kursive, fette Schrift ihrer Titel, und die Nacht auf den
   1. Januar 2023 als grosser Moment. Grund ist ein tiefes Nachtblau, keine Keynote in Schwarz.
   Ohne JavaScript oder mit «weniger Bewegung» steht alles still und vollständig da; die Bühne
   «Mitternacht» schaltet smart-dynamic-fall.js über .sd-an ein. */

.sd {
  --sd-nacht: #020d1c;
  --sd-tief: #041a33;
  --sd-text: #f4f7fb;
  --sd-grau: #9aabc0;
  --sd-linie: rgba(160, 196, 235, .16);
  --sd-karte: rgba(255, 255, 255, .045);
  --sd-pad: var(--container-pad, 2.5rem);
  --sd-hell-blau: #4f9ae6;
  --sd-hell-rot: #ff5470;
  background: var(--sd-nacht);
  color: var(--sd-text);
  font-family: var(--font-body);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
.sd *, .sd *::before, .sd *::after { box-sizing: border-box; }
.sd ::selection { background: var(--sd-blau); color: #fff; }
.sd-wrap { max-width: var(--container-max, 84rem); margin: 0 auto; padding: 0 var(--sd-pad); }
.sd a { color: inherit; }
.sd a:focus-visible, .sd button:focus-visible { outline: none; box-shadow: inset 0 0 0 2px #fff; border-radius: 8px; }
.sd h1, .sd h2, .sd h3 { font-family: var(--font-display); color: var(--sd-text); margin: 0; letter-spacing: -.03em; }
/* Die Titel wie bei smart dynamic: fett und schräg */
.sd h2 { font-size: clamp(2.1rem, 5.6vw, 5rem); line-height: 1.04; font-weight: 800; font-style: italic; max-width: 18ch; text-wrap: balance; }
.sd h2 em, .sd h1 em { font-style: italic; color: var(--sd-grau); }
.sd p { margin: 0; }
.sd-kapitel { display: inline-block; margin-bottom: 1.3rem; font: 700 .78rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--sd-hell-blau); }
.sd-lead { max-width: 46rem; margin-top: 1.5rem !important; font-size: clamp(1.05rem, 1.5vw, 1.28rem); line-height: 1.6; color: var(--sd-grau); text-wrap: pretty; }
.sd-quelle { margin-top: 1.4rem !important; max-width: 62rem; font-size: .84rem; line-height: 1.5; color: #93a5bb; }
.sd-nur-leser { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Knöpfe */
.sd-knopf { display: inline-flex; align-items: center; gap: .55rem; min-height: 48px; padding: .85rem 1.5rem; border-radius: 8px;
  font: 700 1rem/1 var(--font-display); text-decoration: none !important; transition: transform .25s ease, background .25s ease, box-shadow .25s ease; }
.sd-knopf svg { width: 16px; height: 16px; }
.sd-knopf--hell { background: #fff; color: var(--sd-blau) !important; }
.sd-knopf--hell:hover { transform: translateY(-1px); box-shadow: 0 12px 30px -10px rgba(79, 154, 230, .7); }
.sd .sd-knopf--hell:focus-visible { box-shadow: inset 0 0 0 3px var(--sd-blau); }
.sd-knopf--rand { color: var(--sd-text) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.sd-knopf--rand:hover { box-shadow: inset 0 0 0 1px #fff; }

/* 1 Hero ---------------------------------------------------------------- */
.sd-held { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; isolation: isolate;
  margin-top: calc(-1 * var(--nav-h, 74px)); padding: calc(6rem + var(--nav-h, 74px)) 0 8rem; }
.sd-held__licht { position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(42% 52% at 22% 38%, rgba(0, 84, 160, .75), transparent 70%),
    radial-gradient(38% 48% at 80% 46%, rgba(186, 12, 47, .55), transparent 70%),
    radial-gradient(70% 50% at 50% 110%, rgba(0, 84, 160, .35), transparent 70%); }
.sd-held__licht::after { content: ""; position: absolute; inset: 0; opacity: .5;
  background-image: radial-gradient(1px 1px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 33% 9%, #cfe3ff, transparent), radial-gradient(1.5px 1.5px at 58% 22%, #fff, transparent),
    radial-gradient(1px 1px at 76% 12%, #ffd6de, transparent), radial-gradient(1px 1px at 88% 30%, #fff, transparent), radial-gradient(1px 1px at 6% 52%, #cfe3ff, transparent), radial-gradient(1.5px 1.5px at 94% 64%, #fff, transparent); }
.sd-held__innen { position: static; width: 100%; text-align: center; }
.sd-pfad { position: absolute; top: calc(1.6rem + var(--nav-h, 74px)); left: var(--sd-pad); display: flex; gap: .5rem; font-size: .85rem; color: var(--sd-grau); }
.sd-pfad a { text-decoration: none; }
.sd-pfad a:hover { color: var(--sd-text); }
.sd-held__marken { display: flex; align-items: center; justify-content: center; gap: clamp(.6rem, 2vw, 1.4rem); margin-bottom: clamp(1.4rem, 3vw, 2.4rem); }
.sd-marke { display: inline-flex; align-items: center; height: clamp(52px, 6vw, 68px); padding: 0 clamp(.9rem, 2vw, 1.4rem); border-radius: 12px; background: #fff; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .6); }
.sd-marke img { display: block; height: 58%; width: auto; }
.sd-marke:last-child img { height: 66%; }
.sd-held__und { font: 700 1.6rem/1 var(--font-display); color: var(--sd-grau); }
.sd-held__datum { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 .2em; font: 800 italic clamp(3.4rem, 15vw, 13rem)/.92 var(--font-display); letter-spacing: -.055em; font-variant-numeric: tabular-nums; margin: 0 0 1.6rem !important; }
.sd-held__datum span { padding: .04em .16em .1em .02em; margin: -.04em -.16em -.1em -.02em; -webkit-background-clip: text; background-clip: text; color: transparent; }
.sd-held__datum span:first-child { background-image: linear-gradient(180deg, #fff 20%, var(--sd-hell-blau) 130%); }
.sd-held__datum span:last-child { background-image: linear-gradient(180deg, #fff 20%, var(--sd-hell-rot) 130%); }
.sd-held__titel { font-size: clamp(1.5rem, 3.2vw, 2.8rem); line-height: 1.14; font-weight: 700; max-width: 30ch; margin: 0 auto !important; text-wrap: balance; }
.sd-held__titel em { display: block; }
.sd-held__lead { max-width: 46rem; margin: 1.5rem auto 0 !important; font-size: clamp(1.02rem, 1.4vw, 1.2rem); line-height: 1.6; color: var(--sd-grau); text-wrap: pretty; }
.sd-held__aktionen { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: 2.2rem; }
.sd-zahlen { list-style: none; margin: 4rem auto 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; max-width: 66rem; text-align: left; }
.sd-zahlen li { min-width: 0; padding-top: 1.1rem; border-top: 1px solid var(--sd-linie); }
.sd-zahlen b { display: block; font: 800 italic clamp(2.3rem, 4.4vw, 3.6rem)/1 var(--font-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; padding-right: .12em; }
.sd-zahlen li:last-child b { color: var(--sd-hell-rot); }
.sd-zahlen span { display: block; margin-top: .5rem; font-size: .92rem; line-height: 1.4; color: var(--sd-grau); }
.sd-weiter { position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%); display: inline-flex; flex-direction: column; align-items: center; gap: .3rem;
  font-size: .78rem; color: var(--sd-grau); text-decoration: none; letter-spacing: .08em; text-transform: uppercase; }
.sd-weiter svg { width: 18px; height: 18px; animation: sd-schweben 2.4s ease-in-out infinite; }
@keyframes sd-schweben { 50% { transform: translateY(5px); } }

/* 2 Wie es anfing ---------------------------------------------------------- */
.sd-anfang { padding: clamp(7rem, 15vw, 13rem) 0; }
.sd-datum { font: 700 .9rem/1 var(--font-display); color: var(--sd-hell-blau); letter-spacing: .06em; margin-bottom: 1.8rem !important; }
.sd-woerter { font: 700 clamp(1.7rem, 4.2vw, 3.8rem)/1.14 var(--font-display); letter-spacing: -.03em; max-width: 26ch; }
.sd-an .sd-woerter .sd-w { color: #23384f; transition: color .25s linear; }
.sd-an .sd-woerter .sd-w.is-hell { color: var(--sd-text); }

/* 3 Übersicht -------------------------------------------------------------- */
.sd-ueber { padding: clamp(3rem, 8vw, 7rem) 0 clamp(5rem, 10vw, 9rem); }
.sd-ueber__liste { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.sd-ueber__liste li { min-width: 0; }
.sd-ueber__liste a { position: relative; display: flex; flex-direction: column; gap: .8rem; height: 100%; padding: 1.7rem 1.5rem 1.4rem; border-radius: 18px; background: var(--sd-karte);
  box-shadow: inset 0 0 0 1px var(--sd-linie); text-decoration: none; transition: background .3s ease, transform .3s ease, box-shadow .3s ease; overflow: hidden; }
.sd-ueber__liste a::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: var(--sd-blau); }
.sd-ueber__liste li:nth-child(2) a::before { background: var(--sd-rot); }
.sd-ueber__liste li:nth-child(3) a::before { background: linear-gradient(90deg, var(--sd-blau), var(--sd-rot)); }
.sd-ueber__liste a:hover { background: rgba(255, 255, 255, .07); transform: translateY(-3px); }
.sd-ueber__nr { font: 700 .85rem/1 var(--font-display); color: var(--sd-hell-blau); }
.sd-ueber__liste b { font: 800 italic clamp(1.4rem, 2.2vw, 2rem)/1.05 var(--font-display); letter-spacing: -.03em; overflow-wrap: anywhere; }
.sd-ueber__liste span:not(.sd-ueber__nr) { color: var(--sd-grau); line-height: 1.5; font-size: .98rem; flex: 1; }
.sd-ueber__liste i { font: 700 .85rem/1 var(--font-display); color: var(--sd-text); opacity: .75; font-style: normal; }

/* Titelkarten ---------------------------------------------------------------- */
.sd-titelkarte { padding: clamp(7rem, 15vw, 12rem) 0 clamp(1rem, 3vw, 2rem); border-top: 1px solid var(--sd-linie); scroll-margin-top: calc(var(--nav-h, 74px) + 3.5rem); }
.sd-titelkarte__nr { display: block; font: 700 1rem/1 var(--font-display); color: var(--sd-hell-blau); margin-bottom: 1rem; }
.sd-titelkarte--rot .sd-titelkarte__nr { color: var(--sd-hell-rot); }
.sd-titelkarte__wort { font: 800 italic clamp(3.6rem, 15vw, 13rem)/.9 var(--font-display) !important; letter-spacing: -.06em;
  background: linear-gradient(180deg, #fff 30%, var(--sd-hell-blau) 140%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  padding: .04em .2em .12em 0; margin-right: -.2em !important; }
.sd-titelkarte--rot .sd-titelkarte__wort { background-image: linear-gradient(180deg, #fff 30%, var(--sd-hell-rot) 140%); }
.sd-titelkarte__zeile { margin-top: 1.4rem !important; max-width: 32ch; font: 700 clamp(1.25rem, 2.3vw, 1.9rem)/1.2 var(--font-display); letter-spacing: -.02em; color: var(--sd-grau); }
.sd-titelkarte__link { display: inline-flex; align-items: center; gap: .45rem; margin: 1.8rem 1.6rem 0 0; color: var(--sd-text) !important; text-decoration: none; font-weight: 700; border-bottom: 1px solid rgba(255, 255, 255, .3); padding-bottom: 3px; }
.sd-titelkarte__link svg { width: 15px; height: 15px; }
.sd-titelkarte__link:hover { border-color: var(--sd-hell-blau); }
.sd-titelkarte + section { padding-top: clamp(3rem, 6vw, 5rem); }

/* 4 Sechs Richtungen ---------------------------------------------------------- */
.sd-start { padding-bottom: clamp(4rem, 8vw, 7rem); }
.sd-faecher { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); max-width: 96rem; margin: 3.2rem auto 0; padding: 0 var(--sd-pad); }
.sd-tafel { margin: 0; min-width: 0; }
.sd-tafel img, .sd-raster img, .sd-paar img, .sd-ganz img { display: block; width: 100%; height: auto; border-radius: clamp(10px, 1.2vw, 18px); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8), 0 0 0 1px var(--sd-linie); background: #e8f3fb; }
.sd-tafel figcaption, .sd-raster figcaption, .sd-paar figcaption, .sd-bild figcaption, .sd-ganz figcaption { margin-top: .85rem; font-size: .92rem; line-height: 1.45; color: var(--sd-grau); }
.sd-an .sd-faecher .sd-tafel { transition: transform 1.1s cubic-bezier(.2, .7, .1, 1), opacity .9s ease; }
.sd-an .sd-faecher:not(.is-da) .sd-tafel:nth-child(1) { transform: translate(30%, 8%) rotate(-5deg); opacity: .4; }
.sd-an .sd-faecher:not(.is-da) .sd-tafel:nth-child(3) { transform: translate(-30%, 8%) rotate(5deg); opacity: .4; }
.sd-an .sd-faecher:not(.is-da) .sd-tafel:nth-child(2) { transform: translateY(6%); opacity: .6; }

/* 5 Prototyp ------------------------------------------------------------------ */
.sd-proto { padding: clamp(5rem, 10vw, 9rem) 0; border-top: 1px solid var(--sd-linie); }
.sd-raster { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.2rem, 2.4vw, 2rem); }
.sd-raster--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(3rem, 6vw, 5rem); }
.sd-raster li, .sd-raster figure { margin: 0; min-width: 0; }

/* 6 Bausteine und Live-Seite ----------------------------------------------------- */
.sd-bau { padding: clamp(5rem, 10vw, 9rem) 0; border-top: 1px solid var(--sd-linie); }
.sd-bau__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.sd-bausteine { list-style: none; margin: 2.2rem 0 0; padding: 0; }
.sd-bausteine li { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--sd-linie); }
.sd-bausteine b { font: 800 italic 1.05rem/1.4 var(--font-display); color: var(--sd-text); }
.sd-bausteine span { color: var(--sd-grau); line-height: 1.5; }
.sd-bild { margin: 0; min-width: 0; }
.sd-bild--weiss img { display: block; width: 100%; height: auto; border-radius: 16px; background: #fff; padding: clamp(.5rem, 1.4vw, 1.2rem); box-shadow: 0 50px 100px -50px rgba(0, 84, 160, .9); }
.sd-geraete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 15rem); gap: clamp(1rem, 3vw, 2.5rem); align-items: center; margin-top: clamp(4rem, 8vw, 7rem); }
.sd-browser, .sd-telefon { position: relative; margin: 0; min-width: 0; }
.sd-browser { border-radius: 14px; overflow: hidden; background: #0b1f38; box-shadow: 0 60px 120px -50px rgba(0, 84, 160, .8), 0 0 0 1px var(--sd-linie); }
.sd-browser__leiste { display: flex; align-items: center; gap: .4rem; padding: .7rem .9rem; background: #08192e; }
.sd-browser__leiste i { width: 11px; height: 11px; border-radius: 50%; background: #2a3f58; }
.sd-browser__leiste span { margin: 0 auto; padding: .25rem 1rem; border-radius: 6px; background: #0f2744; font-size: .78rem; color: var(--sd-grau); }
.sd-browser video { display: block; width: 100%; height: auto; aspect-ratio: 960 / 600; background: #fff; }
.sd-telefon { padding: .55rem; border-radius: 2.6rem; background: #0b1f38; box-shadow: 0 0 0 1px #24405f, 0 50px 100px -40px rgba(0, 0, 0, .9); }
.sd-telefon video { display: block; width: 100%; height: auto; aspect-ratio: 390 / 844; border-radius: 2.1rem; background: #fff; }
.sd-film__knopf { position: absolute; right: .9rem; bottom: .9rem; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(0, 20, 40, .65); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.sd-film__knopf::before { content: ""; position: absolute; inset: 0; margin: auto; width: 12px; height: 14px; border-left: 4px solid #fff; border-right: 4px solid #fff; }
.sd-film__knopf.is-pause::before { width: 0; height: 0; border-left: 13px solid #fff; border-right: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 17px; }

/* 7 Zweite Marke ------------------------------------------------------------------- */
.sd-zweite { padding-bottom: clamp(5rem, 10vw, 9rem); background: radial-gradient(60% 40% at 80% 30%, rgba(186, 12, 47, .22), transparent 70%); }
.sd-zweite .sd-kapitel { color: var(--sd-hell-rot); }
.sd-ganz { margin: clamp(3rem, 6vw, 5rem) auto 0; max-width: 84rem; padding: 0 var(--sd-pad); }
.sd-ganz figcaption { padding: 0; }
.sd-paar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 14rem); gap: clamp(1rem, 3vw, 2.5rem); align-items: end; margin-top: clamp(4rem, 8vw, 6rem); }
.sd-paar figure { margin: 0; min-width: 0; }
.sd-paar__gross img { box-shadow: 0 60px 120px -50px rgba(186, 12, 47, .7), 0 0 0 1px var(--sd-linie); }
.sd-paar__klein img { border-radius: 1.6rem; }
.sd-farbe { list-style: none; margin: clamp(3rem, 6vw, 4.5rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.sd-farbe li { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 1.2rem; align-items: center; padding: 1.2rem; border-radius: 16px; background: var(--f); }
.sd-farbe img { grid-row: 1 / 3; display: block; height: 52px; width: auto; max-width: 9rem; padding: .55rem .7rem; border-radius: 10px; background: #fff; box-sizing: content-box; }
.sd-farbe b { font: 800 italic 1.2rem/1.2 var(--font-display); color: #fff; }
.sd-farbe span { color: rgba(255, 255, 255, .88); font-size: .92rem; }
.sd-farbe code { font: .85rem/1 var(--font-mono); }

/* 8 Mitternacht, der grosse Moment ---------------------------------------------------- */
.sd-nacht { position: relative; padding: clamp(5rem, 10vw, 8rem) 0; border-top: 1px solid var(--sd-linie); scroll-margin-top: var(--nav-h, 74px); background: #01060f; }
.sd-nacht__klebt { position: relative; display: grid; gap: 3rem; justify-items: center; text-align: center; padding: 0 var(--sd-pad); isolation: isolate; }
.sd-nacht__licht { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 45% at 30% 60%, rgba(0, 84, 160, .5), transparent 70%), radial-gradient(40% 45% at 70% 60%, rgba(186, 12, 47, .4), transparent 70%); }
.sd-nacht__texte { display: grid; gap: 2.4rem; max-width: 60rem; }
.sd-akt { margin: 0; }
.sd-akt__klein { display: block; font: 700 clamp(.9rem, 1.4vw, 1.15rem)/1.2 var(--font-display); color: var(--sd-grau); letter-spacing: .04em; margin-bottom: .6rem; }
.sd-akt__gross { display: block; font: 800 italic clamp(1.8rem, 4.6vw, 4.2rem)/1.05 var(--font-display); letter-spacing: -.04em; text-wrap: balance; }
.sd-akt--3 .sd-akt__gross { color: #fff; }
.sd-akt__fakt { display: block; max-width: 36rem; margin: 1rem auto 0; font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.55; color: var(--sd-grau); }
.sd-uhr { display: grid; justify-items: center; gap: .4rem; }
.sd-uhr p { margin: 0; }
.sd-uhr__jahr { display: flex; font: 800 italic clamp(1.4rem, 2.6vw, 2.2rem)/1 var(--font-display); letter-spacing: .02em; color: var(--sd-grau); font-variant-numeric: tabular-nums; }
.sd-uhr__rolle { display: inline-block; height: 1em; overflow: hidden; padding-right: .1em; }
.sd-uhr__rolle span { display: block; height: 1em; transform: translateY(-100%); }
.sd-uhr__zeit { font: 800 clamp(3rem, min(12vw, 15svh), 10rem)/1 var(--font-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff 35%, #8fb7e2 130%); -webkit-background-clip: text; background-clip: text; color: transparent; padding: .04em .1em .08em; margin: -.04em -.1em -.08em; }
.sd-uhr__orte { display: flex; gap: 1.6rem; font: 700 .95rem/1 var(--font-display); color: var(--sd-grau); letter-spacing: .04em; }
.sd-uhr__orte b { color: var(--sd-text); font-variant-numeric: tabular-nums; }
.sd-nacht__seiten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.8rem, 2.4vw, 2rem); width: min(100%, 78rem); }
.sd-schirm { position: relative; margin: 0; min-width: 0; border-radius: 12px; overflow: hidden; background: #0b1f38; }
.sd-schirm img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }
.sd-schirm--blau { box-shadow: 0 0 0 1px rgba(79, 154, 230, .5), 0 40px 100px -30px rgba(0, 84, 160, .9); }
.sd-schirm--rot { box-shadow: 0 0 0 1px rgba(255, 84, 112, .5), 0 40px 100px -30px rgba(186, 12, 47, .9); }
.sd-schirm figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem .8rem; padding: .7rem .9rem; text-align: left; font-size: .85rem; color: var(--sd-grau); background: #06142a; }
.sd-schirm figcaption b { color: var(--sd-text); font-family: var(--font-display); }

/* Bühne an: klebt, die Werte kommen aus smart-dynamic-fall.js */
.sd-an .sd-nacht { height: 560svh; padding: 0; }
.sd-an .sd-nacht__klebt { position: sticky; top: var(--nav-h, 74px); height: calc(100svh - var(--nav-h, 74px)); display: grid; grid-template-rows: minmax(0, .8fr) auto minmax(0, 1.55fr); align-items: center; gap: clamp(.5rem, 1.6svh, 1.4rem); padding: calc(3.4rem + 1svh) var(--sd-pad) clamp(1rem, 3svh, 2rem); overflow: hidden; }
.sd-an .sd-nacht__texte { position: relative; display: block; width: 100%; height: 100%; }
.sd-an .sd-akt { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(calc(-50% + (1 - var(--o, 0)) * 1.4rem)); opacity: var(--o, 0); }
.sd-an .sd-akt--1 { --o: var(--a1); } .sd-an .sd-akt--2 { --o: var(--a2); } .sd-an .sd-akt--3 { --o: var(--a3); }
.sd-an .sd-akt__gross { font-size: clamp(1.6rem, min(4.2vw, 6.4svh), 3.8rem); }
.sd-an .sd-akt__fakt { margin-top: .6rem; font-size: clamp(.92rem, min(1.3vw, 2.2svh), 1.1rem); }
.sd-an .sd-uhr { opacity: var(--u, 0); transform: scale(calc(.94 + var(--u, 0) * .06)); }
.sd-an .sd-uhr__rolle span { transform: translateY(calc(var(--j, 0) * -100%)); transition: transform .5s cubic-bezier(.2, .7, .1, 1); }
.sd-an .sd-nacht__licht { opacity: calc(.45 + var(--b, 0) * .9);
  background: radial-gradient(calc(30% + var(--b, 0) * 40%) calc(35% + var(--b, 0) * 40%) at 50% 45%, rgba(255, 255, 255, calc(var(--b, 0) * .32)), transparent 70%),
    radial-gradient(40% 45% at 28% 72%, rgba(0, 84, 160, .55), transparent 70%), radial-gradient(40% 45% at 72% 72%, rgba(186, 12, 47, calc(.2 + var(--r, 0) * .35)), transparent 70%); }
.sd-an .sd-nacht__seiten { align-self: stretch; height: 100%; min-height: 0; align-items: center; }
.sd-an .sd-schirm { max-height: 100%; display: flex; flex-direction: column; }
.sd-an .sd-schirm picture { display: block; min-height: 0; flex: 1 1 auto; overflow: hidden; }
.sd-an .sd-schirm img { height: 100%; aspect-ratio: auto; max-height: calc(100svh - var(--nav-h, 74px)); }
.sd-an .sd-schirm--blau { opacity: calc(.25 + var(--s1, 0) * .75); transform: translateY(calc((1 - var(--s1, 0)) * 2rem)); filter: saturate(calc(.3 + var(--s1, 0) * .7)); }
.sd-an .sd-schirm--rot { opacity: calc(.22 + var(--r, 0) * .78); filter: grayscale(calc(1 - var(--r, 0))) brightness(calc(.45 + var(--r, 0) * .55)); transform: scale(calc(.97 + var(--r, 0) * .03)); }
.sd-an .sd-schirm--rot figcaption span { visibility: hidden; }
.sd-an .sd-schirm--rot.is-an figcaption span { visibility: visible; }
.sd-an .sd-schirm--rot::after { content: "wartet auf 2023"; position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); padding: .5rem .9rem; border-radius: 999px; background: rgba(0, 0, 0, .65);
  font: 700 .85rem/1 var(--font-display); color: #fff; white-space: nowrap; opacity: calc(1 - var(--r, 0)); }

/* 9 Betreuung ------------------------------------------------------------------ */
.sd-pflege { padding-bottom: clamp(5rem, 10vw, 9rem); }
.sd-pflege__liste { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.sd-pflege__liste li { min-width: 0; padding: 1.5rem 1.4rem; border-radius: 18px; background: var(--sd-karte); box-shadow: inset 0 0 0 1px var(--sd-linie); }
.sd-pflege__jahr { display: block; font: 700 .82rem/1 var(--font-display); color: var(--sd-hell-blau); margin-bottom: .9rem; }
.sd-pflege__liste b { display: block; font: 800 italic 1.35rem/1.15 var(--font-display); margin-bottom: .6rem; }
.sd-pflege__liste p { color: var(--sd-grau); line-height: 1.55; }

/* 10 Zeitleiste ------------------------------------------------------------------ */
.sd-zeit { padding: clamp(6rem, 12vw, 10rem) 0; border-top: 1px solid var(--sd-linie); scroll-margin-top: calc(var(--nav-h, 74px) + 3.5rem); }
.sd-zeit__liste { position: relative; list-style: none; margin: 3.5rem 0 0; padding: 0 0 0 2.2rem; }
.sd-zeit__liste::before, .sd-zeit__liste::after { content: ""; position: absolute; left: 5px; top: .4rem; bottom: .4rem; width: 2px; background: #1b3150; }
.sd-zeit__liste::after { background: linear-gradient(180deg, var(--sd-hell-blau), var(--sd-hell-rot)); transform-origin: top; transform: scaleY(var(--z, 1)); }
.sd-zeit__liste li { position: relative; display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 1rem; padding: 0 0 1.9rem; }
.sd-zeit__liste li::before { content: ""; position: absolute; left: calc(-2.2rem + 1px); top: .35rem; width: 10px; height: 10px; border-radius: 50%; background: var(--sd-nacht); box-shadow: inset 0 0 0 2px var(--sd-hell-blau); }
.sd-zeit__liste li.sd-zeit__rot::before { box-shadow: inset 0 0 0 2px var(--sd-hell-rot); background: var(--sd-hell-rot); }
.sd-zeit__liste time { font: 700 1rem/1.4 var(--font-display); color: var(--sd-text); }
.sd-zeit__liste p { font-size: 1.08rem; line-height: 1.5; color: var(--sd-grau); }
.sd-zeit__rot time, .sd-zeit__rot p { color: #fff; }
.sd-an .sd-zeit__liste::after { transform: scaleY(var(--z, 0)); }

/* 11 Stimme ------------------------------------------------------------------------ */
.sd-stimme { padding: clamp(6rem, 12vw, 10rem) 0; background: radial-gradient(55% 70% at 22% 50%, rgba(0, 84, 160, .45), transparent 70%); }
.sd-stimme__raster { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.sd-stimme__bild { display: block; width: 100%; max-width: 22rem; height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; background: #0f2744;
  box-shadow: 0 0 0 1px var(--sd-linie), 0 50px 120px -40px rgba(0, 84, 160, .9); justify-self: center; }
.sd-stimme__zitat { margin: 0; }
.sd-stimme__zitat blockquote { margin: 0; }
.sd-stimme__satz { font: 800 italic clamp(1.6rem, 3.4vw, 3rem)/1.12 var(--font-display); letter-spacing: -.03em; max-width: 24ch; }
.sd-stimme__rest { margin-top: 1.4rem !important; max-width: 44rem; font-size: 1.05rem; line-height: 1.65; color: var(--sd-grau); }
.sd-stimme figcaption { margin-top: 1.8rem; }
.sd-stimme figcaption b { display: block; font: 700 1.15rem/1.3 var(--font-display); }
.sd-stimme figcaption span { display: block; color: var(--sd-grau); }
.sd-stimme__google { display: inline-flex; gap: .5rem; align-items: center; margin-top: 1.5rem; padding: .6rem 1rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--sd-linie); font-size: .9rem; color: var(--sd-text) !important; text-decoration: none; }
.sd-stimme__google span { color: #ffca2b; letter-spacing: .1em; }
.sd-stimme__google:hover { box-shadow: inset 0 0 0 1px #fff; }

/* 12 Schluss ------------------------------------------------------------------------ */
.sd-schluss { padding: clamp(6rem, 12vw, 10rem) 0 clamp(4rem, 8vw, 6rem); text-align: center; border-top: 1px solid var(--sd-linie); }
.sd-schluss h2 { margin: 0 auto; max-width: 20ch; }
.sd-schluss > .sd-wrap > p { max-width: 40rem; margin: 1.6rem auto 0 !important; font-size: 1.15rem; line-height: 1.6; color: var(--sd-grau); }
.sd-faelle { margin-top: clamp(4rem, 8vw, 6rem); text-align: left; }
.sd-faelle h3 { font-size: 1.1rem; color: var(--sd-grau); font-weight: 700; letter-spacing: 0; margin-bottom: 1.2rem; text-align: center; }
.sd-faelle ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
@media (min-width: 1100px) { .sd-faelle ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px) { .sd-faelle ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .sd-faelle ul { grid-template-columns: minmax(0, 1fr); } }
.sd-faelle li { min-width: 0; }
.sd-faelle li a { display: flex; flex-direction: column; gap: .9rem; height: 100%; padding: 1.4rem; border-radius: 18px; background: var(--sd-karte); box-shadow: inset 0 0 0 1px var(--sd-linie); text-decoration: none; transition: transform .3s ease, box-shadow .3s ease; }
.sd-faelle li a:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); }
.sd-fall__logo { display: flex; align-items: center; height: 44px; padding: 0 .8rem; border-radius: 10px; background: #fff; align-self: flex-start; }
.sd-fall__logo img { display: block; height: 22px; width: auto; max-width: 9rem; }
.sd-fall__text { color: var(--sd-text); line-height: 1.45; flex: 1; }
.sd-fall__mehr { display: inline-flex; align-items: center; gap: .4rem; font: 700 .9rem/1 var(--font-display); color: var(--sd-grau); }
.sd-fall__mehr svg, .sd-faelle__alle svg { width: 14px; height: 14px; }
.sd-faelle li a:hover .sd-fall__mehr { color: #fff; }
.sd-faelle__alle { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.6rem; font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .3); padding-bottom: 3px; }

/* Kapitelleiste: schwebt unter der Kopfzeile, sobald der Hero vorbei ist */
.sd-leiste { position: fixed; left: 50%; top: calc(var(--nav-h, 74px) + .7rem); z-index: 40; display: flex; gap: .2rem; padding: .3rem; border-radius: 999px;
  background: rgba(4, 22, 44, .82); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); box-shadow: inset 0 0 0 1px rgba(160, 196, 235, .2), 0 10px 30px rgba(0, 0, 0, .4);
  transform: translate(-50%, -140%); opacity: 0; pointer-events: none; transition: transform .45s cubic-bezier(.2, .7, .1, 1), opacity .3s ease; max-width: calc(100vw - 1.5rem); overflow-x: auto; scrollbar-width: none; }
.sd-leiste::-webkit-scrollbar { display: none; }
.sd-leiste.is-an { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.sd-leiste a { flex: 0 0 auto; padding: .55rem 1rem; border-radius: 999px; font: 700 .88rem/1 var(--font-display); color: #b4c3d6 !important; text-decoration: none; transition: color .25s ease, background .25s ease; }
.sd-leiste a:hover { color: #fff !important; }
.sd-leiste a.is-hier { background: #fff; color: var(--sd-blau, #0054a0) !important; }
.sd-leiste a[href="#kap-zweite"].is-hier, .sd-leiste a[href="#kap-mitternacht"].is-hier { color: var(--sd-rot, #ba0c2f) !important; }

/* Auftritt beim Hereinscrollen */
.sd-an .sd-auf { opacity: 0; transform: translateY(2rem); transition: opacity 1s ease, transform 1.2s cubic-bezier(.2, .7, .1, 1); }
.sd-an .sd-auf.is-da { opacity: 1; transform: none; }

/* Kopfzeile auf dieser Seite dunkel (nur hier geladen): oben durchsichtig, nach dem Scrollen nachtblaues Glas */
html, body { background: #020d1c !important; }
header[data-dartera-header] > div:first-child { display: none !important; }
header[data-dartera-header] div[style*="nav-h) + 14px"] { display: none !important; }
header[data-dartera-header] { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; transition: background .35s ease, box-shadow .35s ease; }
html.sd-kopf-zu header[data-dartera-header] { background: rgba(2, 13, 28, .8); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 1px 0 rgba(160, 196, 235, .14); }
header[data-dartera-header] .dt-navitem > a, header[data-dartera-header] .dt-navitem > button, header[data-dartera-header] nav a { color: rgba(255, 255, 255, .88) !important; }
header[data-dartera-header] .dt-navitem svg { color: rgba(255, 255, 255, .6); }
header[data-dartera-header] a[href*="start=1"] { background: #fff !important; color: #0054a0 !important; box-shadow: none !important; }
header[data-dartera-header] a.dt-nav-secondary { background: rgba(255, 255, 255, .1) !important; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2) !important; }

/* Tablet und Telefon */
@media (max-width: 900px) {
  .sd { --sd-pad: 1.25rem; }
  .sd-held { padding-top: calc(5.5rem + var(--nav-h, 64px)); padding-bottom: 7rem; }
  .sd-pfad { top: calc(1rem + var(--nav-h, 64px)); }
  .sd-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 1rem; margin-top: 3rem; }
  .sd-ueber__liste, .sd-pflege__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sd-faecher { grid-template-columns: minmax(0, 1fr); max-width: 40rem; }
  .sd-an .sd-faecher:not(.is-da) .sd-tafel:nth-child(n) { transform: translateY(8%); opacity: .4; }
  .sd-bau__raster, .sd-stimme__raster { grid-template-columns: minmax(0, 1fr); }
  .sd-raster--drei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sd-geraete { grid-template-columns: minmax(0, 1fr) minmax(0, 8.5rem); }
  .sd-paar { grid-template-columns: minmax(0, 1fr) minmax(0, 9rem); }
  .sd-stimme__bild { max-width: 14rem; }
  .sd-zeit__liste li { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
  .sd-leiste { top: calc(var(--nav-h, 64px) + .5rem); }
  .sd-leiste a { padding: .5rem .8rem; font-size: .82rem; }
  .sd-an .sd-nacht { height: 520svh; }
}
@media (max-width: 700px) {
  .sd-schirm img { aspect-ratio: 390 / 600; }
  .sd-an .sd-nacht__klebt { grid-template-rows: minmax(0, .8fr) auto minmax(0, 1.5fr); }
  .sd-uhr__orte { gap: 1rem; font-size: .82rem; }
  .sd-schirm figcaption { padding: .5rem .6rem; font-size: .74rem; }
  .sd-an .sd-schirm--rot::after { font-size: .75rem; top: 38%; }
}
@media (max-width: 560px) {
  .sd-ueber__liste, .sd-pflege__liste, .sd-raster, .sd-raster--drei, .sd-farbe { grid-template-columns: minmax(0, 1fr); }
  .sd-bausteine li { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
  .sd-geraete, .sd-paar { grid-template-columns: minmax(0, 1fr); }
  .sd-telefon, .sd-paar__klein { width: 62%; margin: 0 auto !important; }
  .sd-held__datum { font-size: clamp(3rem, 17vw, 5rem); }
  .sd-marke { height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .sd *, .sd *::before, .sd *::after { animation: none !important; transition: none !important; }
}

/* Befunde der Fotos 320 und 390 (27.10.2026): grosse Wörter nie mit Trennstrich brechen,
   und auf kleinen Höhen bekommt der Text der Bühne weniger Platz als die Uhr */
.sd h1, .sd h2, .sd-titelkarte__wort, .sd-akt__gross, .sd-held__datum, .sd-ueber__liste b, .sd-woerter { -webkit-hyphens: manual; hyphens: manual; }
.sd-titelkarte__wort { font-size: clamp(2.7rem, 14.5vw, 13rem) !important; }
.sd-an .sd-akt__gross { font-size: clamp(1.25rem, min(4.2vw, 4.6svh), 3.8rem); }
.sd-an .sd-akt__klein { font-size: clamp(.8rem, min(1.4vw, 2.2svh), 1.15rem); margin-bottom: .35rem; }
@media (max-height: 640px) {
  .sd-an .sd-akt__fakt { font-size: .8rem; line-height: 1.4; }
  .sd-an .sd-nacht__klebt { padding-top: calc(3rem + 1svh); }
}
/* :lang(de) p in global.css trennt automatisch (Spezifität 0,1,1): hier stärker überschreiben */
.sd p.sd-titelkarte__wort, .sd p.sd-titelkarte__zeile, .sd p.sd-held__datum, .sd p.sd-woerter, .sd p .sd-akt__gross, .sd p.sd-stimme__satz, .sd-ueber__liste b { -webkit-hyphens: manual; hyphens: manual; }
/* Gegenprobe OpenAI (27.10.2026): wartende Seite etwas heller, Text im Hero heller */
.sd-an .sd-schirm--rot { opacity: calc(.38 + var(--r, 0) * .62); filter: grayscale(calc(1 - var(--r, 0))) brightness(calc(.6 + var(--r, 0) * .4)); }
.sd-held__lead { color: #b8c6d8; }

/* Zwei Mails zum Jahreswechsel (Freigabe Daniel 27.10.2026) */
.sd-pauli { padding: clamp(5rem, 10vw, 8rem) 0 clamp(2rem, 5vw, 4rem); }
.sd-pauli__mails { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); }
.sd-pauli__mails li { min-width: 0; }
.sd-pauli__mails figure { margin: 0; height: 100%; padding: clamp(1.4rem, 3vw, 2.4rem); border-radius: 22px; background: var(--sd-karte); box-shadow: inset 0 0 0 1px var(--sd-linie), inset 4px 0 0 var(--sd-hell-blau); }
.sd-pauli__rot figure { box-shadow: inset 0 0 0 1px var(--sd-linie), inset 4px 0 0 var(--sd-hell-rot); }
.sd-pauli__mails time { display: block; font: 700 .85rem/1.3 var(--font-display); color: var(--sd-hell-blau); margin-bottom: 1rem; }
.sd-pauli__rot time { color: var(--sd-hell-rot); }
.sd-pauli__mails blockquote { margin: 0; }
.sd .sd-pauli__mails blockquote p { font: 800 italic clamp(1.4rem, 2.8vw, 2.4rem)/1.15 var(--font-display); letter-spacing: -.02em; -webkit-hyphens: manual; hyphens: manual; }
.sd-pauli__wer { margin-top: 1.6rem !important; }
.sd-pauli__wer b { display: block; font: 700 1.15rem/1.3 var(--font-display); }
.sd-pauli__wer span { color: var(--sd-grau); }
/* Recruiting-Film */
.sd-film { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; margin-top: clamp(3rem, 6vw, 5rem); }
.sd-film__telefon video { aspect-ratio: 540 / 960; background: #0b1f38; }
.sd-film__text h3 { font: 800 italic clamp(1.8rem, 3.6vw, 3rem)/1.05 var(--font-display); letter-spacing: -.03em; }
.sd-film__text p { margin-top: 1rem !important; max-width: 38rem; color: var(--sd-grau); line-height: 1.6; }
.sd-film__text p.sd-film__quelle { font-size: .85rem; }
@media (max-width: 700px) {
  .sd-pauli__mails, .sd-film { grid-template-columns: minmax(0, 1fr); }
  .sd-film__telefon { width: 62%; margin: 0 auto; }
}
/* Kapitelleiste auf dem Telefon: weiche Kanten zeigen, dass sie seitlich weitergeht (27.10.2026) */
@media (max-width: 700px) {
  .sd-leiste { -webkit-mask-image: linear-gradient(90deg, transparent, #000 1rem, #000 calc(100% - 1.6rem), transparent); mask-image: linear-gradient(90deg, transparent, #000 1rem, #000 calc(100% - 1.6rem), transparent); }
}

/* Mitternacht als ein einziger grosser Moment (28.10.2026, Daniel): Uhr und Jahreszahl füllen den Bildschirm.
   Das Jahr steht riesig hinter der Uhr, die letzte Ziffer rollt um Mitternacht von 2 auf 3.
   Die zwei Bildschirme stehen nur in der ruhigen Fassung (ohne JavaScript, «weniger Bewegung»). */
.sd-an .sd-nacht__klebt { grid-template-rows: clamp(6.5rem, 22svh, 12rem) minmax(0, 1fr); gap: 0; padding-bottom: clamp(1rem, 4svh, 3rem); }
.sd-an .sd-nacht__seiten { display: none; }
.sd-an .sd-uhr { position: relative; align-self: stretch; width: 100%; display: grid; place-content: center; justify-items: center; gap: clamp(.4rem, 1.6svh, 1rem); }
.sd-an .sd-uhr__jahr { position: absolute; left: 50%; top: 50%; z-index: -1; transform: translate(-50%, -52%); font-style: normal; font-size: min(38vw, 58svh); line-height: 1; letter-spacing: -.05em;
  color: rgba(143, 183, 226, .14); transition: color 1.2s ease; white-space: nowrap; }
.sd-an .sd-nacht.is-neu .sd-uhr__jahr { color: rgba(255, 92, 120, .2); }
.sd-an .sd-uhr__rolle { padding-right: .02em; }
.sd-an .sd-uhr__zeit { font-size: clamp(3.2rem, min(17vw, 21svh), 15rem); }
.sd-an .sd-uhr__orte { font-size: clamp(.85rem, 1.3vw, 1.1rem); gap: clamp(1rem, 3vw, 2.4rem); }
.sd-an .sd-nacht__licht { opacity: calc(.55 + var(--b, 0) * .8); }
@media (max-width: 700px) {
  .sd-an .sd-nacht__klebt { grid-template-rows: clamp(7.5rem, 26svh, 11rem) minmax(0, 1fr); }
  .sd-an .sd-uhr__jahr { display: grid; grid-template-columns: auto auto; font-size: min(62vw, 32svh); line-height: .92; }
}

/* Je Kapitel eine Zeile, was es Firmen wie dieser bringt (28.10.2026, Daniel) */
.sd-titelkarte__nutzen { margin-top: 1.5rem !important; max-width: 42rem; font-size: clamp(1.02rem, 1.35vw, 1.2rem); line-height: 1.55; color: var(--sd-text); text-wrap: pretty; }
.sd-titelkarte__nutzen b { display: inline-block; margin-right: .65rem; padding: .38rem .62rem .34rem; border-radius: 999px; background: var(--sd-blau); color: #fff; font: 700 .7rem/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; vertical-align: .18em; }
.sd-titelkarte--rot .sd-titelkarte__nutzen b { background: var(--sd-rot); }