/* =========================================================
   Leuchtturm – Stylesheet
   Maßsystem: --u = 1px eines 1920px breiten Entwurfs,
   unter 768px: 1px eines 414px breiten Entwurfs.
   ========================================================= */

:root {
  /* Farben (HSL-Kanäle) – Blaukonzept aus dem Logo: Nachtblau, Wasser, Eis; Gold nur fürs Leuchtfeuer */
  --grau: 214 65% 96%;          /* Helles Eisblau – Grundfläche */
  --signal: 211 100% 60%;       /* Signalblau – Hauptakzent */
  --signal-tief: 218 88% 42%;
  --koralle: 222 92% 82%;       /* Hellblau – Zweitakzent */
  --nacht: 216 52% 9%;          /* Nachtblau wie der Logo-Hintergrund */
  --gold: 38 88% 62%;           /* Leuchtfeuer aus dem Logo */
  --weiss: 0 0% 100%;
  --schwarz: 216 52% 6%;

  /* Semantische Tokens */
  --color-surface: hsl(var(--grau));
  --color-surface-raised: hsl(var(--weiss));
  --color-text: hsl(var(--nacht));
  --color-akzent: hsl(var(--signal));
  --color-dunkel: hsl(var(--nacht));

  /* Schriften */
  --font-display: 'Unbounded', system-ui, sans-serif;
  --font-text: 'Poppins', system-ui, sans-serif;

  /* Federn (Feder-Physik als linear()-Kurve) */
  --feder: linear(0, 0.0417, 0.1419, 0.2709, 0.4081, 0.5397, 0.6576, 0.7579, 0.8394, 0.9028, 0.95, 0.9834, 1.0056, 1.019, 1.026, 1.0283, 1.0276, 1.025, 1.0214, 1.0176, 1.0138, 1.0103, 1.0074, 1.005, 1.0031, 1.0017, 1.0006, 0.9999, 0.9995, 0.9993, 0.9992, 0.9992, 1);
  --feder-dauer: .5s;
  --feder-weich: linear(0, 0.0321, 0.1113, 0.2168, 0.3333, 0.4501, 0.5601, 0.659, 0.7446, 0.8164, 0.8747, 0.9207, 0.9557, 0.9815, 0.9996, 1.0116, 1.0187, 1.0224, 1.0234, 1.0227, 1.0209, 1.0184, 1.0157, 1.0129, 1.0104, 1.008, 1.006, 1.0043, 1.003, 1.0019, 1.0011, 1.0004, 1, 0.9997, 0.9996, 0.9995, 1);
  --feder-weich-dauer: .75s;
  --aus: cubic-bezier(.22, 1, .36, 1);

  /* Maßeinheit */
  --schirm: min(100vw, 1920px);
  --u: calc(var(--schirm) / 1920);
  --satz: calc(1800 * var(--u));
  --rand: 16px;
  --navi-h: 72px;
  --navi-platz: calc(var(--navi-h) + 16px);
}

@media (max-width: 767.98px) {
  :root { --u: min(calc(100vw / 414), 1.15px); --satz: calc(100vw - 2 * var(--rand)); }
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-text);
  font-weight: 400;
  line-height: 1.5;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
img, svg { display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid hsl(var(--nacht)); outline-offset: 2px; border-radius: 4px; }

.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sprung {
  position: fixed; left: 16px; top: 16px; z-index: 1000;
  padding: 12px 24px; border-radius: 999px;
  background: var(--color-akzent); color: var(--color-text);
  font-weight: 700; text-decoration: none;
  transform: translateY(-200%); transition: transform var(--feder-dauer) var(--feder);
}
.sprung:focus-visible { transform: none; }

/* Einblenden beim Scrollen */
[data-reveal] {
  opacity: 0;
  transform: translateY(calc(48 * var(--u)));
  transition: opacity .6s ease, transform var(--feder-weich-dauer) var(--feder-weich);
  transition-delay: calc(var(--i, 0) * 70ms);
}
[data-reveal].sichtbar { opacity: 1; transform: none; }

/* Gemeinsamer Pillen-Knopf */
.knopf {
  display: inline-block; white-space: nowrap;
  padding: calc(19 * var(--u)) calc(56 * var(--u));
  border: 0; border-radius: 999px;
  background: var(--color-akzent); color: var(--color-text);
  font-family: var(--font-display); font-weight: 800;
  font-size: max(14px, calc(27 * var(--u))); line-height: 1.45;
  letter-spacing: -0.01em; text-transform: uppercase; text-decoration: none;
  transition: transform var(--feder-dauer) var(--feder), background-color .2s ease;
}
@media (hover: hover) { .knopf:hover { transform: translateY(-3px) scale(1.03); background: hsl(var(--nacht)); color: var(--color-akzent); } }
.knopf:active { transform: scale(.97); }

/* =========================================================
   Motive – generierte Platzhalter-Bildwelten
   ========================================================= */
.motiv {
  position: absolute; inset: 0;
  --a: hsl(var(--nacht)); --b: hsl(var(--grau)); --c: hsl(var(--signal));
  background-color: var(--a);
  transition: transform .9s var(--aus);
}
.motiv--sonne {
  background:
    radial-gradient(circle at 50% 58%, var(--c) 0 21%, transparent 21.4%),
    repeating-linear-gradient(180deg, transparent 0 62%, var(--b) 62% 64.5%, transparent 64.5% 68%),
    linear-gradient(180deg, var(--a) 0 62%, var(--b) 62%);
}
.motiv--wellen {
  background:
    radial-gradient(circle at 70% 26%, var(--c) 0 9%, transparent 9.4%),
    repeating-radial-gradient(circle at 50% 135%, var(--a) 0 5%, var(--b) 5% 10%);
}
.motiv--streifen {
  background:
    radial-gradient(circle at 34% 64%, var(--c) 0 16%, transparent 16.4%),
    repeating-linear-gradient(-35deg, var(--a) 0 calc(56 * var(--u)), var(--b) 0 calc(112 * var(--u)));
}
.motiv--kreise {
  background:
    radial-gradient(circle at 50% 50%, var(--c) 0 12%, transparent 12.4%),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 9%, var(--b) 9% 12%),
    conic-gradient(from 45deg, var(--a) 0 25%, var(--b) 0 50%, var(--a) 0 75%, var(--b) 0);
}
.motiv--gitter {
  background:
    radial-gradient(circle at 62% 40%, var(--c) 0 18%, transparent 18.4%),
    linear-gradient(var(--b) 2px, transparent 2px) 0 0 / calc(48 * var(--u)) calc(48 * var(--u)),
    linear-gradient(90deg, var(--b) 2px, transparent 2px) 0 0 / calc(48 * var(--u)) calc(48 * var(--u)),
    var(--a);
}
.motiv--verlauf,
.motiv--lebt::before {
  background:
    radial-gradient(at 18% 22%, var(--b), transparent 55%),
    radial-gradient(at 82% 78%, var(--c), transparent 55%),
    var(--a);
  background-size: 160% 160%;
}
/* Bewegte Motive: Verlauf liegt auf eigener, übergroßer Ebene und wird per transform
   verschoben – läuft auf der GPU, statt jedes Frame die ganze Fläche neu zu malen */
.motiv--lebt, .motiv--brandung, .motiv--fluss { overflow: hidden; }
.motiv--lebt::before, .motiv--brandung::before, .motiv--fluss::before {
  content: ""; position: absolute; left: 0; top: 0;
  background-size: 100% 100%;
  will-change: transform;
}
.motiv--lebt::before { width: 160%; height: 160%; animation: wandern 12s ease-in-out infinite alternate; --wx: -37.5%; --wy: -37.5%; }
@keyframes wandern { to { transform: translate(var(--wx), var(--wy)); } }

/* Agenturraum: Fenster, Lampe, Tisch */
.motiv--raum {
  background:
    radial-gradient(ellipse 18% 10% at 50% 14%, hsl(48 100% 80%), transparent 70%),
    linear-gradient(hsl(196 30% 30%), hsl(196 30% 30%)) 50% 62% / 70% 3% no-repeat,
    linear-gradient(90deg, transparent 0 15%, hsl(200 60% 75% / .9) 15% 40%, transparent 40% 60%, hsl(200 60% 75% / .9) 60% 85%, transparent 85%) 0 22% / 100% 42% no-repeat,
    linear-gradient(180deg, hsl(231 40% 62%), hsl(213 35% 38%));
}
/* Brandung: bewegte Wellen auf Koralle */
.motiv--brandung::before {
  width: 100%; height: 130%;
  background: repeating-radial-gradient(circle at 50% 140%, hsl(var(--koralle)) 0 4%, hsl(211 85% 66%) 4% 8%);
  animation: wandern 6s ease-in-out infinite alternate; --wx: 0%; --wy: -23.077%;
}
/* Fluss: weicher Farbstrom */
.motiv--fluss::before {
  width: 180%; height: 180%;
  background:
    radial-gradient(at 20% 20%, hsl(223 80% 62%), transparent 50%),
    radial-gradient(at 80% 30%, hsl(var(--koralle)), transparent 50%),
    radial-gradient(at 50% 90%, hsl(var(--signal)), transparent 55%),
    hsl(var(--nacht));
  animation: wandern 9s ease-in-out infinite alternate; --wx: -44.444%; --wy: -44.444%;
}

/* =========================================================
   HERO – Botschaft links, „Neuestes Projekt“ rechts,
   dahinter kreist langsam das Leuchtfeuer
   ========================================================= */
.hero {
  --kachel: clamp(190px, 25.5vw, 520px);
  --ox: 10%; --oy: 30%;      /* Lampe – main.js misst die echte Position */
  --w: 112deg; --k: 11deg;   /* Richtung und halbe Breite des Lichtkegels */
  --weich: 3.5deg;
  position: relative; isolation: isolate; overflow: hidden;
  min-height: max(100svh, 720px);
  display: grid; grid-template-rows: minmax(44svh, 1fr) auto;
  background: hsl(var(--nacht)); color: hsl(var(--weiss));
}
.hero-bucht { position: relative; overflow: hidden; }
.hero-wand {
  position: absolute; inset: 0 0 18px; z-index: 0;
  display: grid; align-content: end; gap: 10px;
}
.hero-reihe { display: flex; gap: 10px; width: max-content; margin-left: calc(var(--kachel) * -.62); transition: translate .9s var(--feder-weich); }
.hero-reihe:nth-child(2) { margin-left: calc(var(--kachel) * -.18); }
.hero-reihe:nth-child(3) { margin-left: calc(var(--kachel) * -.86); }
.hero-kachel { flex: none; display: block; width: var(--kachel); border-radius: 6px; overflow: hidden; background: hsl(216 40% 16%); }
.hero-kachel img { display: block; width: 100%; height: auto; aspect-ratio: 21 / 10; object-fit: cover; object-position: top left; }

/* Nacht liegt über der Wand, der Kegel ist ein Loch darin */
.hero-nacht {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: hsl(var(--nacht) / .9);
  --form: conic-gradient(from calc(var(--w) - var(--k) - var(--weich)) at var(--ox) var(--oy),
    #000 0deg, transparent var(--weich), transparent calc(var(--weich) + 2 * var(--k)), #000 calc(2 * var(--weich) + 2 * var(--k)));
  -webkit-mask-image: var(--form); mask-image: var(--form);
}
.hero-kegel, .hero-kern {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(circle at var(--ox) var(--oy), #000, transparent 68%);
  mask-image: radial-gradient(circle at var(--ox) var(--oy), #000, transparent 68%);
}
/* Breiter Schein mit Dunst in der Luft, darin ein schmaler heller Kern */
.hero-kegel {
  background: conic-gradient(from calc(var(--w) - var(--k) - var(--weich)) at var(--ox) var(--oy),
    transparent 0deg, hsl(42 100% 66% / .55) calc(var(--weich) + var(--k)), transparent calc(2 * var(--weich) + 2 * var(--k)));
  -webkit-mask-image: radial-gradient(circle at var(--ox) var(--oy), #000, transparent 68%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .03' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2.2 -.55'/%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23n)'/%3E%3C/svg%3E");
  mask-image: radial-gradient(circle at var(--ox) var(--oy), #000, transparent 68%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .03' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2.2 -.55'/%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.hero-kern {
  --s: calc(var(--k) * .4);
  background: conic-gradient(from calc(var(--w) - var(--s)) at var(--ox) var(--oy),
    transparent 0deg, hsl(46 100% 84% / .5) var(--s), transparent calc(2 * var(--s)));
  filter: blur(6px);
}
.hero-kueste { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 3; width: 100%; height: clamp(36px, 7vh, 64px); fill: hsl(var(--nacht)); pointer-events: none; }
.hero-turm {
  position: absolute; z-index: 2; left: max(0px, calc(11% - clamp(220px, 47svh, 440px) * 0.239)); bottom: 0;
  height: clamp(220px, 47svh, 440px); aspect-ratio: 1100 / 1732; pointer-events: none;
}
.hero-turm img { display: block; width: 100%; height: 100%; }
/* Lichthof um das Feuer: warmer Kern, weiter Schein, schmaler Lichtstreif wie in einer Linse */
.hero-lampe {
  position: absolute; left: 37.68%; top: 18.38%; width: 100%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, hsl(48 100% 88% / .72), hsl(42 100% 70% / .3) 16%, hsl(var(--gold) / .1) 38%, transparent 66%);
  mix-blend-mode: screen;
}
.hero-lampe::after {
  content: ""; position: absolute; left: -40%; right: -40%; top: 50%; height: 3px; translate: 0 -50%; border-radius: 50%;
  background: linear-gradient(90deg, transparent, hsl(44 100% 84% / .75) 50%, transparent);
  filter: blur(1px);
}

.hero-land {
  position: relative; z-index: 4;
  padding: 0 max(var(--rand), 5vw) clamp(28px, 4.5vh, 48px);
}
.hero-kai { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px 40px; margin-top: -22px; }
.hero-beweis { display: flex; align-items: center; gap: 16px; margin-left: clamp(0px, 13vw, 240px); }
.hero-logos { display: flex; flex: none; gap: 10px; margin: 0; padding: 0; list-style: none; }
.hero-logos a {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; overflow: hidden;
  background: hsl(var(--weiss)); box-shadow: 0 0 0 3px hsl(var(--nacht));
  transition: transform var(--feder-dauer) var(--feder), box-shadow .25s ease;
}
.hero-logos a.an { box-shadow: 0 0 0 3px hsl(var(--nacht)), 0 0 0 5px hsl(var(--gold)); }
.hero-logos img { width: 78%; height: 78%; object-fit: contain; }
@media (hover: hover) { .hero-logos a:hover { transform: translateY(-4px); } }
.hero-logos a:active { transform: scale(.94); }
.hero-beweis p { margin: 22px 0 0; font-size: 14px; line-height: 1.4; color: hsl(var(--weiss) / .72); }
.hero-beweis b { color: hsl(var(--weiss)); }

.hero-schild { display: flex; align-items: center; gap: 16px; margin-top: 26px; color: inherit; text-decoration: none; text-align: right; }
.hero-schild-text { display: grid; transition: opacity .18s ease; }
.hero-schild.wechselt .hero-schild-text { opacity: 0; }
.hero-schild small { font-size: 12px; font-weight: 700; line-height: 1.3; color: hsl(var(--gold)); }
.hero-schild b { font-family: var(--font-display); font-weight: 800; font-size: 17px; line-height: 1.25; letter-spacing: -0.02em; white-space: nowrap; }
.hero-schild-text > span { font-size: 13px; line-height: 1.4; color: hsl(var(--weiss) / .72); }
.hero-schild svg { flex: none; width: 22px; height: 22px; transition: transform var(--feder-dauer) var(--feder); }
@media (hover: hover) { .hero-schild:hover svg { transform: translateX(4px); } }
.hero-schild:active { transform: scale(.97); }

.hero-headline {
  max-width: 24ch; margin: clamp(24px, 4vh, 40px) 0 0;
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(2rem, 4.6vw, 5.5rem); line-height: 1.04;
  letter-spacing: -0.04em; text-transform: uppercase;
  text-wrap: balance;
}
.hero-leuchten { color: hsl(var(--gold)); }
.hero-fuss { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 64px; margin-top: clamp(16px, 2.6vh, 28px); }
.hero-lead { max-width: 60ch; margin: 0; font-size: clamp(1rem, 1.15vw, 1.15rem); line-height: 1.55; color: hsl(var(--weiss) / .76); }
.hero-aktionen { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.hero-knopf {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 0 28px; border-radius: 999px;
  background: hsl(var(--signal)); color: hsl(var(--nacht));
  font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: .01em;
  text-transform: uppercase; text-decoration: none;
  transition: transform var(--feder-dauer) var(--feder), background-color .2s ease;
}
.hero-knopf svg, .hero-zweit svg { width: 20px; height: 20px; transition: transform var(--feder-dauer) var(--feder); }
.hero-zweit {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 0;
  font-weight: 700; color: hsl(var(--weiss)); text-decoration: underline 2px hsl(var(--weiss) / 0); text-underline-offset: 6px;
  transition: text-decoration-color .2s ease;
}
@media (hover: hover) {
  .hero-knopf:hover { transform: translateY(-2px); background: hsl(211 100% 68%); }
  .hero-knopf:hover svg, .hero-zweit:hover svg { transform: translateX(4px); }
  .hero-zweit:hover { text-decoration-color: hsl(var(--weiss) / .5); }
}
.hero-knopf:active, .hero-zweit:active { transform: scale(.97); }

/* =========================================================
   CLAIM
   ========================================================= */
.claim {
  position: relative; isolation: isolate; overflow: hidden;
  padding: calc(92 * var(--u)) var(--rand) calc(48 * var(--u)); text-align: center;
  background: radial-gradient(ellipse at 50% 0%, hsl(var(--signal) / .13), transparent 65%);
}
.claim::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: clamp(240px, 42vw, 800px); aspect-ratio: 1;
  left: -18%; top: 12%; border-radius: 50%;
  border: 1px solid hsl(var(--signal) / .2);
  box-shadow: 0 0 0 36px hsl(var(--signal) / .04), 0 0 0 72px hsl(var(--signal) / .03);
}
.claim h2 {
  color: hsl(var(--signal-tief));
  max-width: calc(1560 * var(--u)); margin: 0 auto;
  font-family: var(--font-display); font-weight: 900;
  font-size: calc(46 * var(--u)); line-height: 1.05;
  letter-spacing: -0.02em; text-transform: uppercase;
  text-wrap: balance;
}
.claim p {
  max-width: calc(1400 * var(--u)); margin: calc(22 * var(--u)) auto 0;
  font-size: calc(35 * var(--u)); line-height: 1.34; letter-spacing: -0.01em;
  text-wrap: pretty;
}
.claim p + p { margin-top: calc(47 * var(--u)); }

/* =========================================================
   KURS – 3D-Leuchtturm, scroll-gesteuert
   Ohne JS: normaler Abschnitt mit allen Kapiteln untereinander.
   Mit JS (.kurs--aktiv): Bühne bleibt stehen, Scrollen fährt die Szene ab.
   ========================================================= */
.kurs {
  --kurs-rand: calc(72 * var(--u));
  --kurs-text: hsl(var(--weiss));
  position: relative;
  margin-top: calc(120 * var(--u));
}
.kurs-buehne {
  --einfahrt: 1;
  position: relative; overflow: hidden;
  min-height: 100svh;
  color: var(--kurs-text);
  /* Platzhalter-Himmel, bis die 3D-Szene steht (und Fallback ohne WebGL) */
  background:
    radial-gradient(ellipse 60% 40% at 72% 58%, hsl(231 85% 70% / .55), transparent 70%),
    linear-gradient(180deg, hsl(214 61% 47%) 0%, hsl(207 52% 81%) 56%, hsl(203 68% 15%) 56.2%, hsl(205 75% 8%) 100%);
  clip-path: inset(calc((1 - var(--einfahrt)) * var(--rand)) round calc((1 - var(--einfahrt)) * 48 * var(--u) + 1px));
}
.kurs-szene {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0;
  transition: opacity .9s var(--aus);
}
.kurs.bereit .kurs-szene { opacity: 1; }
.kurs-schleier {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, hsl(var(--nacht) / .66) 0%, hsl(var(--nacht) / .38) 36%, transparent 62%);
}

.kurs-titel {
  position: absolute; z-index: 2; top: var(--kurs-rand); left: var(--kurs-rand);
  margin: 0; padding: 10px calc(28 * var(--u));
  border-radius: 999px;
  background: var(--color-akzent); color: hsl(var(--nacht));
  font-family: var(--font-display); font-weight: 800;
  font-size: max(12px, calc(20 * var(--u))); line-height: 1.3;
  letter-spacing: 0.01em; text-transform: uppercase;
}

.kurs-kapitel {
  position: relative; z-index: 1;
  margin: 0; list-style: none;
  display: grid; gap: 64px;
  width: min(calc(820 * var(--u)), 48%);
  padding: calc(240 * var(--u)) 0 calc(160 * var(--u)) var(--kurs-rand);
}
.kapitel-nr {
  display: block;
  font-family: var(--font-display); font-weight: 800;
  font-size: max(12px, calc(18 * var(--u))); line-height: 1.3;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-akzent);
}
.kapitel h3 {
  margin: calc(18 * var(--u)) 0 0;
  font-family: var(--font-display); font-weight: 900;
  font-size: calc(104 * var(--u)); line-height: 1.04;
  letter-spacing: -0.03em; text-transform: uppercase;
  text-wrap: balance;
}
.kapitel p {
  max-width: 34ch; margin: calc(28 * var(--u)) 0 0;
  font-size: max(15px, calc(30 * var(--u))); line-height: 1.5;
  color: hsl(var(--weiss) / .92);
  text-wrap: pretty;
}
.kapitel .knopf { margin-top: calc(40 * var(--u)); }

.kurs-leiste, .kurs-hinweis { display: none; }

/* ---------- Gepinnte Variante ---------- */
.kurs--aktiv { height: 420svh; }
.kurs--aktiv .kurs-buehne { position: sticky; top: 0; height: 100svh; min-height: 0; }
.kurs--aktiv .kurs-kapitel {
  position: absolute; left: var(--kurs-rand); top: 50%;
  display: grid; padding: 0;
  translate: 0 -50%;
}
.kurs--aktiv .kapitel { grid-area: 1 / 1; pointer-events: none; }
.kurs--aktiv .kapitel > * {
  opacity: 0;
  transform: translateY(calc(56 * var(--u)));
  transition: opacity .4s ease-out, transform .7s var(--aus);
}
.kurs--aktiv .kapitel.vorbei > * { transform: translateY(calc(-56 * var(--u))); }
.kurs--aktiv .kapitel.aktiv { pointer-events: auto; }
.kurs--aktiv .kapitel.aktiv > *,
.kurs--aktiv .kapitel:focus-within > * {
  opacity: 1; transform: none;
  transition-delay: calc(120ms + var(--i, 0) * 70ms);
}

/* Fortschritt: Füllung wächst per scaleY, Punkte markieren die Kapitel */
.kurs--aktiv .kurs-leiste {
  display: block;
  position: absolute; z-index: 2; right: var(--kurs-rand); top: 50%;
  width: 4px; height: calc(380 * var(--u));
  border-radius: 999px; background: hsl(var(--weiss) / .28);
  translate: 0 -50%;
}
.kurs-leiste-fuellung {
  position: absolute; inset: 0; border-radius: inherit;
  background: var(--color-akzent);
  transform: scaleY(0); transform-origin: 50% 0;
}
.kurs-leiste i {
  position: absolute; left: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%; background: hsl(var(--weiss));
  box-shadow: 0 0 0 4px hsl(var(--nacht) / .25);
  transition: background-color .3s ease, transform var(--feder-dauer) var(--feder);
}
.kurs-leiste i:nth-of-type(1) { top: 0; }
.kurs-leiste i:nth-of-type(2) { top: 50%; }
.kurs-leiste i:nth-of-type(3) { top: 100%; }
.kurs-leiste i.aktiv { background: var(--color-akzent); transform: scale(1.3); }

.kurs--aktiv .kurs-hinweis {
  display: block;
  position: absolute; z-index: 2; right: var(--kurs-rand); bottom: var(--kurs-rand);
  margin: 0;
  font-family: var(--font-display); font-weight: 800;
  font-size: max(12px, calc(18 * var(--u))); line-height: 1.3;
  letter-spacing: 0.08em; text-transform: uppercase;
  transition: opacity .4s ease-out;
}
.kurs.unterwegs .kurs-hinweis { opacity: 0; }

/* Ohne WebGL: gemalter Platzhalter-Himmel bleibt stehen, Kapitel funktionieren trotzdem */
.kurs--ohne-3d .kurs-szene { display: none; }

/* =========================================================
   ZONE – Kachelfächer
   ========================================================= */
.zone {
  /* Karten und Abstände skalieren mit der gesamten Bildschirmbreite. */
  --u: calc(100vw / 1920);
  position: relative;
  height: calc(1427.5 * var(--u));
  margin: calc(50 * var(--u)) 0 calc(55 * var(--u));
  overflow-x: clip;               /* gekippte Randkacheln dürfen anschneiden, aber nicht scrollen */
  --rampe: calc(80 * var(--u));
}
.zone-flaeche {
  position: absolute; inset: 0 0 calc(80 * var(--u));
  background:
    radial-gradient(ellipse at 20% 65%, hsl(var(--signal) / .4), transparent 55%),
    linear-gradient(180deg, hsl(var(--grau)) 12%, hsl(var(--koralle)) 50%, hsl(var(--signal)) 88%);
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - var(--rampe)), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - var(--rampe)), transparent);
}

/* Lichtkegel: drei Strahlen fächern vom oberen Rand Richtung Kacheln */
.lichtkegel { position: absolute; inset: 0 0 calc(80 * var(--u)); overflow: hidden; pointer-events: none; }
.kegel {
  position: absolute; left: 50%; top: calc(-140 * var(--u));
  width: calc(520 * var(--u)); height: calc(1300 * var(--u));
  translate: -50% 0; transform-origin: 50% 0;
}
.kegel i {
  display: block; width: 100%; height: 100%;
  background: linear-gradient(180deg, hsl(var(--signal)) 0%, hsl(var(--signal) / .55) 40%, hsl(var(--signal) / 0) 85%);
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  transform-origin: 50% 0;
  transform: scaleY(0); opacity: 0;
}
.k1 { rotate: 38deg; }
.k2 { rotate: 0deg; }
.k3 { rotate: -38deg; }
.zone.an .kegel i { animation: kegel 5s var(--aus) infinite; }
.zone.an .k2 i { animation-delay: .5s; }
.zone.an .k3 i { animation-delay: 1s; }
@keyframes kegel {
  0% { transform: scaleY(0); opacity: 0; }
  12% { opacity: .9; }
  55% { transform: scaleY(1); opacity: .75; }
  100% { transform: scaleY(1.05); opacity: 0; }
}

/* Fächer skaliert im 1920er-Raster über die gesamte Bildschirmbreite.
   scale hält die gekippten Randkacheln innerhalb des Bildschirms. */
.kacheln { position: absolute; top: 0; bottom: 0; left: 50%; width: calc(1920 * var(--u)); translate: calc(-50% - 9 * var(--u)) 0; scale: .88; transform-origin: 50% 75%; }
.halter {
  position: absolute; width: calc(560 * var(--u)); height: calc(696 * var(--u));
  --hx: 0px; --hy: 0px;
  transform: translate(var(--hx), var(--hy));
  transition: transform var(--feder-dauer) var(--feder);
}
.h-agentur { left: calc(-10 * var(--u)); top: calc(726 * var(--u)); --rot: -14deg; --dx: calc(594 * var(--u)); --dy: calc(-173 * var(--u)); }
.h-werbung { left: calc(446 * var(--u)); top: calc(594 * var(--u)); --rot: -5deg; --dx: calc(213 * var(--u)); --dy: calc(-41 * var(--u)); }
.h-awards { left: calc(916 * var(--u)); top: calc(594 * var(--u)); --rot: 5deg; --dx: calc(-183 * var(--u)); --dy: 0px; }
.h-kontakt { left: calc(1388 * var(--u)); top: calc(726 * var(--u)); --rot: 14deg; --dx: calc(-579 * var(--u)); --dy: calc(-30 * var(--u)); }

/* Zusammengeschoben als Stapel, aufgefächert sobald sichtbar */
.flug {
  position: absolute; inset: 0;
  transform: translate(var(--dx), var(--dy)) rotate(0deg) scale(.86);
  transition: transform 1.1s var(--feder-weich);
}
.zone.an .flug { transform: translate(0, 0) rotate(var(--rot)) scale(1); }
.zone.an .h-awards .flug { transition-delay: .15s; }
.zone.an .h-werbung .flug { transition-delay: .21s; }
.zone.an .h-kontakt .flug { transition-delay: .27s; }
.zone.an .h-agentur .flug { transition-delay: .33s; }

.kachel {
  position: absolute; inset: 0;
  display: block; padding: 0; border: 0;
  overflow: hidden; isolation: isolate;
  border-radius: calc(45 * var(--u));
  background: hsl(var(--nacht));
  box-shadow: 0 16px 45px hsl(var(--signal-tief) / .2), inset 0 0 0 1px hsl(var(--weiss) / .25);
  transform: scale(.9);
  transition: transform var(--feder-dauer) var(--feder);
  text-decoration: none;
}
.kachel:active { transform: scale(.87); }
.kachel:focus-visible { outline-offset: 6px; }
.kachel::after {
  content: "↗"; position: absolute; z-index: 3;
  top: 6%; right: 7%; width: 1.8em; aspect-ratio: 1;
  display: grid; place-items: center; border-radius: 50%;
  background: hsl(var(--weiss) / .92); color: hsl(var(--signal-tief));
  font-size: max(18px, calc(34 * var(--u))); line-height: 1;
  transition: rotate .4s var(--aus);
}
.kachel::before, .arb-kachel::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(circle at var(--licht-x, 50%) var(--licht-y, 30%), hsl(var(--weiss) / .25), transparent 55%);
  opacity: 0; transition: opacity .35s ease;
}
@media (hover: hover) and (pointer: fine) {
  .kachel:hover::before, .arb-kachel:hover::before { opacity: 1; }
  .kachel:hover::after { rotate: 45deg; }
}
@media (prefers-reduced-motion: no-preference) {
  .zone.an .kachel { animation: kachel-schweben 7s ease-in-out infinite; }
  .zone.an .h-werbung .kachel { animation-delay: -1.8s; }
  .zone.an .h-awards .kachel { animation-delay: -3.6s; }
  .zone.an .h-kontakt .kachel { animation-delay: -5.4s; }
}
@keyframes kachel-schweben {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 calc(-12 * var(--u)); }
}
.kachel-wort {
  position: absolute; left: 0; right: 0; bottom: calc(70 * var(--u));
  font-family: var(--font-display); font-weight: 900;
  font-size: calc(85 * var(--u)); line-height: .86;
  letter-spacing: -0.03em; text-align: center; text-transform: uppercase;
  color: #fff; text-shadow: 0 2px 18px hsl(var(--nacht) / .35);
}

/* ---------- Software-Kacheln (ERP, DMS): App-Fenster als schwebender 3D-Stapel ---------- */
/* Über uns: Leuchtfeuer dreht sich um den Turm – vor dem Turm hell, dahinter verdeckt */
.kachel-szene svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.kachel-szene ~ .kachel-wort { color: hsl(var(--weiss)); z-index: 2; }
.kt-stern { fill: hsl(var(--weiss)); opacity: .5; animation: kt-funkeln 4s ease-in-out var(--t) infinite; }
@keyframes kt-funkeln { 50% { opacity: .95; } }
.kt-strahl { transform-origin: 280px 126px; animation: 12s ease-in-out infinite; }
.kt-strahl--vorn { animation-name: kt-drehen-vorn; }
.kt-strahl--hinten { animation-name: kt-drehen-hinten; }
@keyframes kt-drehen-vorn {
  0% { transform: scaleX(1); opacity: 1; }
  50% { transform: scaleX(-1); opacity: 1; }
  50.01%, 100% { transform: scaleX(-1); opacity: 0; }
}
@keyframes kt-drehen-hinten {
  0%, 49.99% { transform: scaleX(1); opacity: 0; }
  50% { transform: scaleX(-1); opacity: .7; }
  100% { transform: scaleX(1); opacity: .7; }
}
/* Blick direkt ins Feuer, wenn der Strahl nach vorn zeigt */
.kt-blitz { transform-origin: 280px 126px; opacity: .3; animation: kt-blitzen 12s ease-in-out infinite; }
@keyframes kt-blitzen {
  0%, 12%, 38%, 100% { opacity: .3; transform: scale(.6); }
  25% { opacity: 1; transform: scale(1.5); }
}
.kt-welle { animation: kt-wogen 7s linear infinite; }
.kt-welle--hinten { fill: hsl(216 66% 20%); animation-duration: 11s; animation-direction: reverse; }
.kt-welle--vorn { fill: hsl(var(--nacht)); }
@keyframes kt-wogen { to { transform: translateX(280px); } }

/* Unsere Arbeit: echte Websites laufen als schräge Bänder gegeneinander */
.kachel--reel { background: hsl(var(--signal-tief)); }
.kachel-reel { background: none; overflow: hidden; }
.kachel-reel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, hsl(var(--nacht) / .1) 30%, hsl(var(--nacht) / .92) 78%);
}
.reel-spalten {
  position: absolute; left: -32%; right: -32%; top: -34%; bottom: -34%;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3%;
  rotate: -16deg;
}
.reel-spalte { display: block; overflow: visible; }
.reel-band { display: flex; flex-direction: column; gap: calc(14 * var(--u)); padding-bottom: calc(14 * var(--u)); animation: reel-laufen 42s linear infinite; }
.reel-band img { display: block; width: 100%; height: auto; aspect-ratio: 21 / 10; object-fit: cover; object-position: top left; border-radius: calc(10 * var(--u)); }
.reel-spalte:nth-child(2) .reel-band { animation-direction: reverse; animation-duration: 34s; }
.reel-spalte:nth-child(3) .reel-band { animation-duration: 50s; }
@keyframes reel-laufen { to { transform: translateY(-100%); } }
.kachel--reel .kachel-wort { bottom: calc(96 * var(--u)); z-index: 2; }
.kachel--reel .kachel-unter { z-index: 2; }

.kachel--erp {
  background:
    radial-gradient(ellipse 70% 50% at 60% 35%, hsl(var(--weiss) / .28), transparent 70%),
    linear-gradient(160deg, hsl(205 100% 64%), hsl(var(--signal)) 40%, hsl(var(--signal-tief)));
}
.kachel--dms {
  background:
    radial-gradient(ellipse 70% 50% at 60% 35%, hsl(var(--signal) / .45), transparent 70%),
    radial-gradient(ellipse 60% 40% at 100% 100%, hsl(var(--gold) / .22), transparent 70%),
    linear-gradient(160deg, hsl(218 50% 22%), hsl(var(--nacht)));
}
.app-buehne { position: absolute; inset: 0; perspective: calc(1800 * var(--u)); }
/* Leichter Verlauf unten, damit Wort und Unterzeile auf den hellen Fenstern lesbar bleiben */
.app-buehne::after {
  content: ""; position: absolute; inset: 52% 0 0; z-index: 1;
  background: linear-gradient(180deg, transparent, var(--app-boden) 72%);
}
.kachel--erp { --app-boden: hsl(var(--signal-tief)); --app-punkt: hsl(var(--signal)); }
.kachel--dms { --app-boden: hsl(var(--nacht)); --app-punkt: hsl(var(--gold)); }
.app-stapel {
  --abstand: 1;
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(14deg) rotateY(-24deg) rotateZ(4deg);
}
.app-fenster {
  position: absolute; width: 76%; aspect-ratio: 4 / 3;
  overflow: hidden; border-radius: calc(16 * var(--u));
  background: hsl(var(--weiss));
  box-shadow:
    0 0 0 1px hsl(var(--weiss) / .6),
    0 calc(30 * var(--u)) calc(60 * var(--u)) calc(-12 * var(--u)) hsl(var(--schwarz) / .45);
  transition: transform var(--feder-weich-dauer) var(--feder-weich), filter .4s ease;
}
.app-fenster img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 0 0; }
/* Glanzkante oben links wie bei Glas */
.app-fenster::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(125deg, hsl(var(--weiss) / .35), transparent 35%);
}
.af-3 { left: 6%; top: 8%; transform: translateZ(calc(-160 * var(--u) * var(--abstand))); filter: brightness(.8) saturate(.8); }
.af-2 { left: 16%; top: 19%; transform: translateZ(calc(-70 * var(--u) * var(--abstand))); filter: brightness(.92); }
.af-1 { left: 26%; top: 30%; transform: translateZ(calc(20 * var(--u) * var(--abstand))); }

/* Module als Glas-Chips, die vor dem Stapel schweben */
.app-chip {
  position: absolute; z-index: 2;
  display: inline-flex; align-items: center; gap: .55em;
  padding: .55em 1em .55em .8em; border-radius: 999px;
  background: hsl(var(--weiss) / .9); color: hsl(var(--nacht));
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 calc(10 * var(--u)) calc(24 * var(--u)) hsl(var(--schwarz) / .25);
  font-family: var(--font-text); font-weight: 700;
  font-size: max(11px, calc(19 * var(--u))); line-height: 1; letter-spacing: .01em;
  white-space: nowrap;
  transition: transform var(--feder-weich-dauer) var(--feder-weich);
}
.app-chip::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: var(--app-punkt); }
.ac-1 { left: 6%; top: 46%; rotate: -4deg; }
.ac-2 { right: 6%; top: 21%; rotate: 3deg; }
.ac-3 { right: 9%; top: 62%; rotate: -2deg; }

.kachel--app .kachel-wort { bottom: calc(96 * var(--u)); color: hsl(var(--weiss)); text-shadow: 0 2px 18px hsl(var(--schwarz) / .3); z-index: 2; }
.kachel-unter {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: calc(52 * var(--u));
  text-align: center; color: hsl(var(--weiss) / .82);
  font-weight: 700; font-size: max(11px, calc(21 * var(--u))); letter-spacing: .06em; text-transform: uppercase;
}

/* Hover: Fenster fächern weiter auf, Chips weichen nach außen */
@media (hover: hover) and (pointer: fine) {
  .kachel--app:hover .app-stapel { --abstand: 1.9; }
  .kachel--app:hover .af-1 { transform: translate(calc(14 * var(--u)), calc(10 * var(--u))) translateZ(calc(20 * var(--u) * var(--abstand))); }
  .kachel--app:hover .af-3 { transform: translate(calc(-14 * var(--u)), calc(-12 * var(--u))) translateZ(calc(-160 * var(--u) * var(--abstand))); }
  .kachel--app:hover .ac-1 { transform: translate(calc(-12 * var(--u)), calc(-6 * var(--u))); }
  .kachel--app:hover .ac-2 { transform: translate(calc(10 * var(--u)), calc(-10 * var(--u))); }
  .kachel--app:hover .ac-3 { transform: translate(0, calc(10 * var(--u))); }
}

/* Hover: Kachel hebt sich, Nachbarn weichen aus */
@media (hover: hover) {
  .halter:has(.kachel:hover) { --hy: calc(-30 * var(--u)); }
  .halter .kachel:hover { transform: scale(.93); }
  .halter .kachel:hover .motiv { transform: scale(1.06); }
  .kacheln:has(.h-agentur .kachel:hover) .h-werbung,
  .kacheln:has(.h-werbung .kachel:hover) .h-awards,
  .kacheln:has(.h-awards .kachel:hover) .h-kontakt { --hx: calc(22 * var(--u)); }
  .kacheln:has(.h-agentur .kachel:hover) .h-awards,
  .kacheln:has(.h-werbung .kachel:hover) .h-kontakt { --hx: calc(14 * var(--u)); }
  .kacheln:has(.h-werbung .kachel:hover) .h-agentur,
  .kacheln:has(.h-awards .kachel:hover) .h-werbung,
  .kacheln:has(.h-kontakt .kachel:hover) .h-awards { --hx: calc(-22 * var(--u)); }
  .kacheln:has(.h-awards .kachel:hover) .h-agentur,
  .kacheln:has(.h-kontakt .kachel:hover) .h-werbung { --hx: calc(-14 * var(--u)); }
}

/* =========================================================
   PROJEKTE
   ========================================================= */
.arbeiten { position: relative; z-index: 1; padding-bottom: calc(120 * var(--u)); }
.arb-titel {
  color: hsl(var(--schwarz));
  margin: 0 0 calc(85 * var(--u)); text-align: center;
  font-family: var(--font-display); font-weight: 900;
  font-size: calc(262 * var(--u)); line-height: 1.06;
  letter-spacing: -0.04em; text-transform: uppercase;
  white-space: nowrap;
}
.arb-gross, .arb-grid {
  width: calc(var(--satz) - 60 * var(--u)); margin: 0 auto;
  display: grid; gap: calc(50 * var(--u));
}
.arb-gross { grid-template-columns: 1fr 1fr; margin-bottom: calc(63 * var(--u)); }
.arb-gross .arb-kachel { aspect-ratio: 16 / 10; }
.arb-grid { grid-template-columns: repeat(3, 1fr); row-gap: calc(63 * var(--u)); }
.arb-kachel {
  position: relative; display: block; aspect-ratio: 4 / 3;
  overflow: hidden; isolation: isolate;
  border-radius: calc(40 * var(--u));
  background: hsl(var(--nacht)); text-decoration: none;
}
.arb-bild { width: 100%; height: 100%; object-fit: cover; object-position: var(--fokus, 50% 50%); }
.arb-kachel:has(.arb-bild) .arb-schleier { background: linear-gradient(180deg, transparent 30%, hsl(var(--nacht) / .6) 58%, hsl(var(--nacht) / .94) 100%); }
.arb-kachel.sichtbar { transition: opacity .6s ease, transform var(--feder-dauer) var(--feder); transition-delay: 0s; }
.arb-schleier {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent 40%, rgb(0 0 0 / .18) 58%, rgb(0 0 0 / .55) 82%, rgb(0 0 0 / .72) 100%);
}
.arb-text { position: absolute; z-index: 2; left: calc(39 * var(--u)); right: calc(45 * var(--u)); bottom: calc(30 * var(--u)); color: #fff; }
.arb-kunde {
  display: block; margin-bottom: calc(12 * var(--u));
  font-size: max(12px, calc(17 * var(--u))); line-height: 1.3; letter-spacing: 0.01em;
}
.arb-kopf {
  display: block;
  font-family: var(--font-display); font-weight: 800;
  font-size: max(14px, calc(27 * var(--u))); line-height: 1.2;
  text-transform: uppercase;
}
@media (hover: hover) {
  .arb-kachel.sichtbar:hover { transform: translateY(-6px); }
  .arb-kachel:hover .motiv { transform: scale(1.06); }
}
.arb-kachel.sichtbar:active { transform: scale(.97); }
.arb-mehr { margin: calc(91 * var(--u)) 0 0; text-align: center; }

/* =========================================================
   SOCIAL
   ========================================================= */
.sozial { position: relative; background: var(--color-surface); padding-bottom: calc(76 * var(--u)); }
.sozial-buehne { position: relative; }
.sozial-wort {
  position: absolute; inset: 0 0 auto; height: calc(400 * var(--u));
  display: grid; place-items: center; pointer-events: none;
}
.sozial-blob {
  position: absolute; width: calc(980 * var(--u)); height: calc(330 * var(--u));
  background: var(--color-akzent);
  border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
  animation: blob 14s ease-in-out infinite alternate;
}
@keyframes blob {
  33% { border-radius: 63% 37% 41% 59% / 58% 36% 64% 42%; rotate: 8deg; }
  66% { border-radius: 38% 62% 55% 45% / 35% 61% 39% 65%; rotate: -6deg; }
  100% { border-radius: 55% 45% 37% 63% / 62% 41% 59% 38%; rotate: 3deg; }
}
.sozial-schrift {
  position: relative;
  font-family: var(--font-display); font-weight: 900;
  font-size: calc(300 * var(--u)); line-height: 1; letter-spacing: -0.04em;
  text-transform: uppercase; color: hsl(var(--nacht));
}
.sozial-feed {
  position: relative; z-index: 1;
  display: flex; gap: calc(30 * var(--u));
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-padding-left: calc(60 * var(--u));
  padding: calc(440 * var(--u)) calc(60 * var(--u)) calc(205 * var(--u));
  scrollbar-width: none; cursor: grab;
}
.sozial-feed::-webkit-scrollbar { display: none; }
.sozial-feed.zieht { cursor: grabbing; scroll-snap-type: none; }
.sozial-feed.zieht .beitrag { pointer-events: none; }
.sozial-feed > li { flex: 0 0 calc(340 * var(--u)); scroll-snap-align: start; }
.beitrag {
  display: block; overflow: hidden;
  border-radius: calc(36 * var(--u));
  background: hsl(var(--weiss)); text-decoration: none;
  transition: transform var(--feder-dauer) var(--feder);
  user-select: none; -webkit-user-drag: none;
}
@media (hover: hover) { .beitrag:hover { transform: translateY(-8px) rotate(-1deg); } }
.beitrag:active { transform: scale(.97); }
.beitrag-bild { position: relative; display: block; aspect-ratio: 278 / 388; overflow: hidden; }
.beitrag-zeile {
  position: absolute; left: calc(20 * var(--u)); right: calc(20 * var(--u)); bottom: calc(18 * var(--u));
  padding: calc(8 * var(--u)) calc(14 * var(--u)); border-radius: 999px;
  background: hsl(var(--weiss) / .92);
  font-weight: 700; font-size: max(12px, calc(16 * var(--u))); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.beitrag-fuss {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(14 * var(--u)) calc(22 * var(--u));
  font-size: max(12px, calc(15 * var(--u)));
}
.beitrag-quelle { width: calc(24 * var(--u)); height: calc(24 * var(--u)); min-width: 16px; min-height: 16px; --icon-loch: #fff; }
.sozial-fuss {
  display: flex; align-items: center; justify-content: space-between;
  width: var(--satz); margin: calc(-120 * var(--u)) auto 0;
  position: relative; z-index: 1;
}
.sozial-tag { margin: 0; font-weight: 700; font-size: calc(52 * var(--u)); line-height: 1; letter-spacing: -0.01em; }
.sozial-kanaele { display: flex; gap: calc(22 * var(--u)); }
.sozial-kanaele a {
  display: block; padding: calc(4 * var(--u));
  --icon-loch: hsl(var(--grau));
  transition: transform var(--feder-dauer) var(--feder);
}
.sozial-kanaele svg { width: calc(46 * var(--u)); height: calc(46 * var(--u)); min-width: 24px; min-height: 24px; }
@media (hover: hover) { .sozial-kanaele a:hover { transform: translateY(-4px) rotate(-8deg); } }
.sozial-kanaele a:active { transform: scale(.9); }

/* =========================================================
   CREW
   ========================================================= */
.crew { position: relative; padding: calc(120 * var(--u)) 0 calc(210 * var(--u)); overflow: hidden; }
.welle { position: absolute; inset: calc(1000 * var(--u)) 0 0; pointer-events: none; }
.welle-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.welle-band { fill: none; stroke: hsl(var(--weiss)); stroke-linecap: round; }
.welle-text {
  font-family: var(--font-display); font-weight: 900;
  letter-spacing: .02em; text-transform: uppercase;
  fill: hsl(var(--grau)); dominant-baseline: central;
}
.crew-kopf { position: relative; z-index: 1; width: var(--satz); margin: 0 auto calc(190 * var(--u)); text-align: center; }
.crew-titel {
  margin: 0;
  font-family: var(--font-display); font-weight: 900;
  font-size: calc(300 * var(--u)); line-height: 1.02;
  letter-spacing: -0.04em; text-transform: uppercase;
  color: hsl(var(--nacht));
}
.crew-anker { position: relative; display: inline-block; }
.ki-sticker {
  position: absolute; right: calc(-230 * var(--u)); top: calc(-40 * var(--u));
  width: calc(200 * var(--u)); aspect-ratio: 1;
  rotate: -11deg;
  transition: transform var(--feder-dauer) var(--feder);
}
.ki-sticker svg { width: 100%; height: 100%; animation: sticker-drehen 18s linear infinite; }
@keyframes sticker-drehen { to { transform: rotate(360deg); } }
.ki-folie { fill: hsl(var(--signal)); stroke: hsl(var(--nacht)); stroke-width: 3; }
.ki-ring { font-family: var(--font-display); font-weight: 800; font-size: 17px; letter-spacing: .06em; text-transform: uppercase; fill: hsl(var(--nacht)); }
.ki-mitte { font-family: var(--font-display); font-weight: 900; font-size: 46px; fill: hsl(var(--nacht)); letter-spacing: -0.04em; }
@media (hover: hover) { .ki-sticker:hover { transform: scale(1.12) rotate(14deg); } }
.ki-sticker:active { transform: scale(.95); }
.crew-text {
  max-width: 62ch; margin: calc(78 * var(--u)) auto 0;
  font-weight: 700; font-size: calc(40 * var(--u)); line-height: 1.3; letter-spacing: -0.014em;
}
.crew-text a {
  text-decoration: none; background: var(--color-akzent);
  box-shadow: calc(6 * var(--u)) 0 0 var(--color-akzent), calc(-6 * var(--u)) 0 0 var(--color-akzent);
}
.crew-liste {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(2, calc(600 * var(--u)));
  justify-content: center; column-gap: calc(250 * var(--u)); row-gap: calc(142 * var(--u));
  padding-bottom: calc(170 * var(--u));
}
.person {
  position: relative; margin: 0; overflow: hidden;
  border-radius: calc(50 * var(--u));
  background: var(--p-bg);
  transition: transform var(--feder-weich-dauer) var(--feder-weich);
}
.person:nth-child(even) { transform: translateY(calc(170 * var(--u))); }
.person-bild { width: 100%; height: auto; aspect-ratio: 3 / 4; transition: transform .9s var(--aus); }
.person::after {
  content: ''; position: absolute; inset: auto 0 0; height: 58%; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgb(0 0 0 / .45) 45%, rgb(0 0 0 / .8));
}
@media (hover: hover) { .person:hover .person-bild { transform: scale(1.05) rotate(-1.5deg); } }
.person-text { position: absolute; z-index: 2; left: calc(55 * var(--u)); right: calc(55 * var(--u)); bottom: calc(37 * var(--u)); color: #fff; text-shadow: 0 1px 12px rgb(0 0 0 / .45); }
.person-name {
  display: block;
  font-family: var(--font-display); font-weight: 800;
  font-size: calc(49 * var(--u)); line-height: 1.14;
  letter-spacing: -0.02em; text-transform: uppercase;
}
.person-rolle { display: block; margin-top: calc(6 * var(--u)); font-size: max(12px, calc(20 * var(--u))); line-height: 1.2; }

/* =========================================================
   STIMMEN
   ========================================================= */
.stimmen {
  position: relative; text-align: center;
  overflow-x: clip;   /* verschobene, ausgeblendete Stimmen dürfen die Seite nicht verbreitern */
  background: hsl(var(--weiss));
  padding: calc(220 * var(--u)) var(--rand) calc(92 * var(--u));
  touch-action: pan-y;
}
.stimmen-buehne { display: grid; }
.stimme {
  grid-area: 1 / 1; margin: 0;
  opacity: 0; visibility: hidden;
  transform: translateX(calc(60 * var(--u) * var(--richtung, 1)));
  transition: opacity .4s ease, transform var(--feder-weich-dauer) var(--feder-weich), visibility 0s .4s;
}
.stimme.an { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.stimme.raus { transform: translateX(calc(-60 * var(--u) * var(--richtung, 1))); }
.stimme-text {
  margin: 0 auto; max-width: calc(1100 * var(--u));
  font-weight: 700; font-size: calc(44 * var(--u)); line-height: 1.32; letter-spacing: -0.01em;
  text-wrap: balance;
}
.stimme figcaption { margin-top: calc(40 * var(--u)); }
.stimme-wer { display: block; font-family: var(--font-display); font-weight: 800; font-size: max(14px, calc(24 * var(--u))); text-transform: uppercase; letter-spacing: 0.01em; }
.stimme-firma { display: block; margin-top: calc(6 * var(--u)); font-size: max(13px, calc(20 * var(--u))); color: hsl(0 0% 32%); }
.stimmen-pfeil {
  position: absolute; top: calc(310 * var(--u)); z-index: 2;
  width: calc(90 * var(--u)); height: calc(90 * var(--u)); min-width: 44px; min-height: 44px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: hsl(var(--grau)); color: hsl(var(--nacht));
  transition: transform var(--feder-dauer) var(--feder), background-color .2s ease;
}
.stimmen-pfeil svg { width: 45%; height: 45%; }
.stimmen-pfeil.zurueck { left: calc(160 * var(--u)); }
.stimmen-pfeil.zurueck svg { rotate: 180deg; }
.stimmen-pfeil.vor { right: calc(160 * var(--u)); }
@media (hover: hover) { .stimmen-pfeil:hover { background: var(--color-akzent); transform: scale(1.08); } }
.stimmen-pfeil:active { transform: scale(.94); }
.stimmen-punkte { display: flex; justify-content: center; margin-top: calc(36 * var(--u)); }
.stimmen-punkte button {
  position: relative; width: 28px; height: 28px; padding: 0; border: 0; background: none;
}
.stimmen-punkte button::before {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 10px; height: 10px; border-radius: 50%;
  background: hsl(0 0% 78%);
  transition: background-color .2s ease, transform var(--feder-dauer) var(--feder);
}
.stimmen-punkte button[aria-current="true"]::before { background: hsl(var(--nacht)); transform: scale(1.3); }
.stimmen-mehr { margin: calc(60 * var(--u)) 0 0; }

/* =========================================================
   KUNDENLOGOS – Laufbänder
   ========================================================= */
.kundenlogos { background: var(--color-akzent); padding: calc(138 * var(--u)) 0; overflow: hidden; display: grid; gap: calc(32 * var(--u)); }
.klogo-reihe { overflow: hidden; }
.klogo-band {
  display: flex; gap: calc(32 * var(--u)); width: max-content;
  animation: laufen var(--lauf, 60s) linear infinite;
}
.klogo-band.rueck { animation-direction: reverse; }
.kundenlogos:hover .klogo-band { animation-play-state: paused; }
@keyframes laufen { to { transform: translateX(calc(-50% - var(--lauf-gap, calc(16 * var(--u))))); } }
.klogo {
  flex: 0 0 calc(445 * var(--u)); height: calc(200 * var(--u));
  display: grid; place-items: center; padding: 8px 24px;
  border-radius: 999px; background: hsl(var(--weiss));
}
.klogo:has(img) { padding: calc(16 * var(--u)) calc(64 * var(--u)); }
.klogo img {
  width: auto; height: auto; max-width: 100%; max-height: calc(150 * var(--u));
  object-fit: contain; user-select: none; -webkit-user-drag: none;
}
.wm { font-size: calc(46 * var(--u)); line-height: 1; color: hsl(var(--nacht)); }
.wm small { display: block; font-size: max(10px, .4em); letter-spacing: .3em; text-transform: uppercase; margin-top: .3em; font-weight: 400; }
.wm-1 { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 700; }
.wm-2 { font-family: var(--font-display); font-weight: 900; letter-spacing: .08em; }
.wm-3 { font-family: var(--font-text); font-weight: 700; letter-spacing: -0.05em; }
.wm-4 { font-family: var(--font-text); font-weight: 400; text-align: center; }
.wm-5 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.06em; text-transform: lowercase; }
.wm-6 { font-family: var(--font-text); font-weight: 700; letter-spacing: .25em; font-size: calc(38 * var(--u)); }

/* =========================================================
   CTA
   ========================================================= */
.cta { text-align: center; padding: calc(94 * var(--u)) var(--rand) calc(113 * var(--u)); background: hsl(var(--weiss)); }
.cta h2 {
  margin: 0 0 calc(70 * var(--u));
  font-family: var(--font-display); font-weight: 900;
  font-size: calc(140 * var(--u)); line-height: .92;
  letter-spacing: -0.04em; text-transform: uppercase;
  color: hsl(var(--nacht));
}

.ja-form { position: relative; display: inline-block; font-size: calc(97 * var(--u)); }
.ja-knopf {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: .3em;
  padding: .12em .62em .12em .12em; border: 0; border-radius: 999px;
  background: hsl(var(--nacht)); color: hsl(var(--weiss));
  font-family: var(--font-display); font-weight: 900; font-size: 1em;
  letter-spacing: -0.02em; text-transform: uppercase;
  transition: background-color .45s var(--aus), padding .45s var(--aus), transform var(--feder-dauer) var(--feder), opacity .3s ease;
}
.ja-kreis {
  width: 1.6em; height: 1.6em; border-radius: 50%;
  background: hsl(var(--signal));
  transition: background-color .45s var(--aus), transform var(--feder-dauer) var(--feder);
}
@media (hover: hover) {
  .cta .ja-knopf:hover { background: var(--color-akzent); color: hsl(var(--nacht)); padding-left: .3em; padding-right: .5em; }
  .cta .ja-knopf:hover .ja-kreis { background: hsl(var(--nacht)); transform: scale(.85); }
}
.ja-knopf:active { transform: scale(.97); }

.ja-feld {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center;
  opacity: 0; visibility: hidden;
  transform: scaleX(.6);
  transition: opacity .3s ease, transform var(--feder-dauer) var(--feder), visibility 0s .3s;
}
.ja-form.aktiv { width: min(calc(1200 * var(--u)), 100%); }
.ja-form.aktiv .ja-knopf { opacity: 0; pointer-events: none; }
.ja-form.aktiv .ja-feld { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.ja-feld input {
  width: 100%; height: 100%;
  padding: 0 2.1em 0 .6em; border: 0; border-radius: 999px;
  background: hsl(var(--grau)); color: hsl(var(--nacht));
  font-family: var(--font-text); font-weight: 700; font-size: .5em;
  outline: none;
}
.ja-feld input:focus-visible { box-shadow: 0 0 0 4px var(--color-akzent); }
.ja-los {
  position: absolute; right: .1em; top: 50%; translate: 0 -50%;
  width: 3.2em; height: 3.2em; border: 0; border-radius: 50%;
  background: var(--color-akzent); color: hsl(var(--nacht));
  font-family: var(--font-display); font-weight: 900; font-size: .5em;
  transition: transform var(--feder-dauer) var(--feder);
}
@media (hover: hover) { .ja-los:hover { transform: scale(1.08); } }
.ja-los:active { transform: scale(.94); }
.ja-status { min-height: 1.5em; margin: calc(30 * var(--u)) 0 0; font-weight: 700; font-size: max(14px, calc(22 * var(--u))); color: hsl(var(--nacht)); }
.ja-form.aktiv { min-height: calc(97 * 1.84 * var(--u)); }

/* =========================================================
   NAVIGATION – Kaimauer: flach über die ganze Breite am oberen Rand.
   Unter 1024px öffnet der Menüknopf ein Vollbild-Blatt
   ========================================================= */
.navi {
  position: fixed; z-index: 900; top: 0; left: 0; right: 0;
  transition: transform .5s var(--aus);
}
.navi-leiste {
  position: relative;
  height: var(--navi-h);
  display: flex; align-items: stretch; gap: 24px;
  padding: 0 env(safe-area-inset-right) 0 max(var(--rand), 5vw);
  background: hsl(var(--nacht));
  border-bottom: 1px solid hsl(var(--weiss) / .12);
  color: hsl(var(--weiss));
}
.navi-logo { position: relative; flex: none; align-self: center; display: block; border-radius: 8px; transition: transform var(--feder-dauer) var(--feder); }
.navi-logo:active { transform: scale(.97); }
.navi-logo img { display: block; width: 184px; height: auto; }
.navi-links { position: relative; margin-left: auto; }
.navi-links ul { display: flex; gap: 8px; height: 100%; margin: 0; padding: 0; list-style: none; }
.navi-links a {
  display: flex; align-items: center; height: 100%; padding: 0 16px;
  font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: .01em;
  text-transform: uppercase; text-decoration: none;
  color: hsl(var(--weiss) / .72);
  transition: color .2s ease, box-shadow .2s ease;
}
.navi-links a:hover, .navi-links a:focus-visible, .navi-links a[aria-current="page"] { color: hsl(var(--weiss)); box-shadow: inset 0 -2px hsl(var(--gold)); }
.navi-links a:active { color: hsl(var(--gold)); }

/* Software-Menü: öffnet bei Hover und Tastaturfokus, auf Touch per .offen aus main.js */
.navi-mehr { position: relative; }
.navi-mehr:has(.navi-tafel [aria-current="page"]) > a { color: hsl(var(--weiss)); box-shadow: inset 0 -2px hsl(var(--gold)); }
.navi-links .navi-tafel {
  position: absolute; top: 100%; left: 50%;
  display: grid; grid-template-columns: repeat(2, 200px); gap: 8px;
  padding: 16px;
  background: hsl(var(--nacht));
  border: 1px solid hsl(var(--weiss) / .12); border-top: 0;
  border-radius: 0 0 16px 16px;
  opacity: 0; visibility: hidden; translate: -50% -8px;
  transition: opacity .2s ease, translate .2s var(--aus), visibility 0s linear .2s;
}
.navi-mehr:hover .navi-tafel, .navi-mehr:focus-within .navi-tafel, .navi-mehr.offen .navi-tafel {
  opacity: 1; visibility: visible; translate: -50% 0;
  transition: opacity .2s ease, translate .2s var(--aus), visibility 0s;
}
.navi-links .navi-tafel ul { display: block; height: auto; }
.navi-links .navi-tafel a {
  height: auto; padding: 10px 12px; border-radius: 8px;
  font-family: var(--font-text); font-weight: 500; font-size: 15px; letter-spacing: 0;
  text-transform: none;
  transition: color .2s ease, background-color .2s ease;
}
.navi-links .navi-tafel a:hover, .navi-links .navi-tafel a:focus-visible, .navi-links .navi-tafel a[aria-current="page"] { background: hsl(var(--weiss) / .08); box-shadow: none; color: hsl(var(--weiss)); }
.navi-links .navi-tafel a[aria-current="page"] { color: hsl(var(--gold)); }
.navi-links .navi-tafel .navi-haupt {
  display: grid; gap: 2px; margin-bottom: 4px;
  font-family: var(--font-display); font-weight: 800; font-size: 16px;
  color: hsl(var(--weiss));
}
.navi-haupt small { font-family: var(--font-text); font-weight: 400; font-size: 13px; color: hsl(var(--weiss) / .72); }
@media (prefers-reduced-motion: reduce) {
  .navi-links .navi-tafel, .navi-mehr:hover .navi-tafel, .navi-mehr:focus-within .navi-tafel, .navi-mehr.offen .navi-tafel { transition: none; }
}
.navi-cta {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 10px;
  padding: 0 28px;
  background: hsl(var(--signal)); color: hsl(var(--nacht));
  font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: .02em;
  text-transform: uppercase; text-decoration: none;
  transition: background-color .2s ease;
}
.navi-cta svg { width: 18px; height: 18px; transition: transform var(--feder-dauer) var(--feder); }
@media (hover: hover) {
  .navi-cta:hover { background: hsl(211 100% 68%); }
  .navi-cta:hover svg { transform: translateX(4px); }
}
.navi-cta:active { background: hsl(211 100% 52%); }
.navi-knopf, .blatt-zu {
  position: relative; flex: none; display: none; place-content: center; gap: 6px;
  width: var(--navi-h); height: var(--navi-h); padding: 0; border: 0; border-left: 1px solid hsl(var(--weiss) / .12);
  background: transparent; color: hsl(var(--weiss));
  transition: background-color .2s ease;
}
.navi-knopf i { display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor; }
.navi-knopf i:last-child { width: 13px; justify-self: end; }
.navi-knopf:active, .blatt-zu:active { background: hsl(var(--weiss) / .24); }
@media (hover: hover) { .navi-knopf:hover, .blatt-zu:hover { background: hsl(var(--weiss) / .18); } }
.navi :focus-visible, .navi-blatt :focus-visible { outline: 2px solid hsl(var(--gold)); outline-offset: 2px; }

@media (min-width: 1024px) and (max-width: 1239.98px) {
  .navi-leiste { gap: 16px; }
  .navi-links ul { gap: 0; }
  .navi-links a { padding: 0 8px; }
  .navi-cta { padding: 0 20px; }
  .navi-cta svg { display: none; }
}
@media (max-width: 1023.98px) {
  .navi-links { display: none; }
  .navi-cta { margin-left: auto; }
  .navi-knopf { display: grid; }
}
@media (max-width: 599.98px) {
  .navi-leiste { padding-left: var(--rand); }
  .navi-logo img { width: 156px; }
  .navi-leiste .navi-cta { display: none; }
  .navi-knopf { margin-left: auto; }
}

/* ---------- Vollbild-Blatt ---------- */
.navi-blatt {
  position: fixed; inset: 0; width: 100%; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0 max(var(--rand), env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(var(--rand), env(safe-area-inset-left));
  border: 0; overflow-y: auto; overscroll-behavior: contain;
  flex-direction: column;
  background: hsl(var(--nacht)); color: hsl(var(--weiss));
  opacity: 0; transition: opacity .28s ease;
}
.navi-blatt[open] { display: flex; }
.navi-blatt.offen { opacity: 1; }
.navi-blatt::backdrop { background: transparent; }
html:has(.navi-blatt[open]) { overflow: hidden; }
.blatt-kopf { display: flex; align-items: center; justify-content: space-between; height: var(--navi-h); margin-right: calc(-1 * var(--rand)); padding: 0; border-bottom: 1px solid hsl(var(--weiss) / .12); }
.blatt-kopf img { display: block; width: 128px; height: auto; }
.blatt-zu { display: grid; }
.blatt-zu svg { width: 22px; height: 22px; }
.blatt-liste { margin: 24px 0 32px; padding: 0; list-style: none; }
.blatt-liste li {
  opacity: 0; translate: 0 24px;
  transition: opacity .2s ease, translate .2s ease;
}
.navi-blatt.offen .blatt-liste li {
  opacity: 1; translate: 0 0;
  transition: opacity .35s ease, translate var(--feder-weich-dauer) var(--feder-weich);
  transition-delay: calc(var(--i) * 50ms + 60ms);
}
.blatt-liste a {
  display: block;
  padding: 8px 12px; border-radius: 16px;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.6rem, 7.4vw, 3.5rem); line-height: 1.1; letter-spacing: -0.03em;
  text-transform: uppercase; text-decoration: none; color: hsl(var(--weiss));
  transition: color .2s ease, scale .2s ease;
}
.blatt-liste a[aria-current="page"] { color: hsl(var(--signal)); }
.blatt-liste a:active { scale: .98; }
.blatt-unter { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 0 8px; }
.blatt-liste .blatt-unter a {
  padding: 10px 12px;
  font-family: var(--font-text); font-weight: 500; font-size: 16px; letter-spacing: 0;
  text-transform: none; color: hsl(var(--weiss) / .72);
}
.blatt-liste .blatt-unter a[aria-current="page"] { color: hsl(var(--signal)); }
.blatt-fuss {
  display: grid; gap: 12px; margin-top: auto;
  opacity: 0; translate: 0 16px;
  transition: opacity .2s ease, translate .2s ease;
}
.navi-blatt.offen .blatt-fuss { opacity: 1; translate: 0 0; transition: opacity .4s ease .35s, translate var(--feder-weich-dauer) var(--feder-weich) .35s; }
.blatt-neu {
  display: grid; grid-template-columns: 112px 1fr auto; gap: 4px 14px; align-items: center;
  padding: 10px; border-radius: 20px; text-decoration: none; color: hsl(var(--weiss));
  background: hsl(var(--weiss) / .06); box-shadow: inset 0 0 0 1px hsl(var(--weiss) / .1);
  transition: scale .2s ease;
}
.blatt-neu:active { scale: .98; }
.blatt-neu img { grid-row: span 2; width: 112px; height: 72px; object-fit: cover; object-position: 30% 50%; border-radius: 12px; }
.blatt-neu small { align-self: end; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: hsl(var(--gold)); }
.blatt-neu b { align-self: start; font-family: var(--font-display); font-weight: 800; font-size: 16px; line-height: 1.2; }
.blatt-neu svg { grid-column: 3; grid-row: 1 / span 2; width: 22px; height: 22px; margin-right: 8px; }
.navi-blatt .blatt-cta { justify-content: center; height: 56px; margin-left: 0; font-size: 14px; }

/* =========================================================
   FOOTER
   ========================================================= */
.fuss {
  position: relative; overflow: hidden;
  height: calc(440 * var(--u) + 30px);
  background: hsl(var(--nacht)); color: #fff;
}
.fuss-ringe { position: absolute; left: 50%; top: calc(130 * var(--u)); }
.fuss-ringe i {
  position: absolute; left: 0; top: 0;
  width: calc(1800 * var(--u)); aspect-ratio: 1;
  border: calc(2 * var(--u)) solid hsl(var(--gold) / .45);
  border-radius: 50%;
  translate: -50% -50%;
  transform: scale(0); opacity: 0;
  animation: ring 8s linear infinite;
}
.fuss-ringe i:nth-child(2) { animation-delay: 2s; }
.fuss-ringe i:nth-child(3) { animation-delay: 4s; }
.fuss-ringe i:nth-child(4) { animation-delay: 6s; }
@keyframes ring {
  0% { transform: scale(.05); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}
/* Logo sitzt im Zentrum der Leuchtfeuer-Ringe */
.fuss-logo {
  position: absolute; left: 50%; top: calc(130 * var(--u));
  width: calc(620 * var(--u)); min-width: 240px; height: auto;
  translate: -50% -50%;
}
.fuss-mitte { position: absolute; left: 0; right: 0; top: calc(230 * var(--u)); display: grid; justify-items: center; gap: calc(28 * var(--u)); }
.fuss-ort {
  font-style: normal; font-weight: 700;
  font-size: max(13px, calc(23 * var(--u))); line-height: 1.1;
}
.uhr { font-variant-numeric: tabular-nums; color: var(--color-akzent); margin-left: .4em; }
.uhr .doppelpunkt { animation: blinken 1s steps(1) infinite; }
@keyframes blinken { 50% { opacity: 0; } }
.fuss-social { display: flex; gap: calc(28 * var(--u)); }
.fuss-social a { display: block; padding: 6px; --icon-loch: hsl(var(--nacht)); transition: transform var(--feder-dauer) var(--feder), color .2s ease; }
.fuss-social svg { width: max(22px, calc(36 * var(--u))); height: max(22px, calc(36 * var(--u))); }
@media (hover: hover) { .fuss-social a:hover { transform: translateY(-4px); color: var(--color-akzent); } }
.fuss-social a:active { transform: scale(.9); }
.fuss-social a:focus-visible, .fuss-links a:focus-visible { outline-color: var(--color-akzent); }
.fuss-links {
  position: absolute; left: 0; right: 0; bottom: 24px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px calc(24 * var(--u));
  padding: 0 var(--rand);
  font-size: max(12px, calc(14 * var(--u)));
}
.fuss-links a { padding: 6px 12px; text-decoration: none; border-radius: 999px; transition: background-color .2s ease, color .2s ease; }
@media (hover: hover) { .fuss-links a:hover { background: var(--color-akzent); color: hsl(var(--nacht)); } }

/* =========================================================
   GALERIE (Dialog)
   ========================================================= */
.galerie {
  width: min(92vw, calc(1100 * var(--u) + 200px)); max-width: none; max-height: none;
  padding: 0; border: 0; background: none; overflow: visible;
}
.galerie::backdrop { background: hsl(var(--nacht) / .82); backdrop-filter: blur(6px); }
.galerie[open] { animation: galerie-auf var(--feder-dauer) var(--feder); }
.galerie[open]::backdrop { animation: einblenden .3s ease; }
.galerie.schliesst { animation: galerie-zu .22s ease forwards; }
.galerie.schliesst::backdrop { animation: einblenden .22s ease reverse forwards; }
@keyframes galerie-auf { from { opacity: 0; transform: scale(.92) translateY(20px); } }
@keyframes galerie-zu { to { opacity: 0; transform: scale(.96); } }
@keyframes einblenden { from { opacity: 0; } }
.galerie-rahmen { overflow: hidden; border-radius: calc(45 * var(--u) + 8px); aspect-ratio: 16 / 10; background: hsl(var(--nacht)); }
.galerie-spur { display: flex; height: 100%; transition: transform var(--feder-weich-dauer) var(--feder-weich); }
.galerie-motiv { position: relative; flex: 0 0 100%; }
.galerie-motiv p {
  position: absolute; left: 24px; bottom: 20px; margin: 0;
  padding: 8px 18px; border-radius: 999px;
  background: hsl(var(--weiss)); font-weight: 700; font-size: 15px;
}
.galerie-leisten { display: flex; gap: 8px; margin-top: 16px; justify-content: center; }
.galerie-leisten span { width: 40px; height: 4px; border-radius: 2px; background: hsl(var(--weiss) / .3); transition: background-color .3s ease; }
.galerie-leisten span.an { background: var(--color-akzent); }
.pop-knopf {
  position: absolute; width: 52px; height: 52px; display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: hsl(var(--weiss)); color: hsl(var(--nacht));
  transition: transform var(--feder-dauer) var(--feder), background-color .2s ease;
}
.pop-knopf svg { width: 22px; height: 22px; }
@media (hover: hover) { .pop-knopf:hover { background: var(--color-akzent); transform: scale(1.08); } }
.pop-knopf:active { transform: scale(.92); }
.pop-knopf:focus-visible { outline-color: var(--color-akzent); }
.galerie-zu { top: -18px; right: -18px; }
.galerie-zurueck { left: -26px; top: 50%; translate: 0 -50%; }
.galerie-zurueck svg { rotate: 180deg; }
.galerie-vor { right: -26px; top: 50%; translate: 0 -50%; }

/* =========================================================
   MOBIL (< 768px) – Werte im 414er-Raster
   ========================================================= */
.nur-breit { display: inline; }

@media (max-width: 767.98px) {
  .nur-breit { display: none; }

  /* Hero */
  .hero { min-height: 100svh; grid-template-rows: minmax(300px, 1fr) auto; }
  .hero-reihe, .hero-wand { gap: 6px; }
  .hero-turm { left: -14px; height: 205px; }
  .hero-kai { flex-direction: column; gap: 14px; }
  .hero-beweis { display: grid; gap: 10px; margin-left: 0; }
  .hero-beweis p { margin: 0; }
  .hero-schild { width: 100%; justify-content: space-between; margin-top: 0; text-align: left; }
  .hero-headline { margin-top: 20px; }
  .hero-fuss { display: grid; }
  .hero-knopf { width: 100%; justify-content: center; }

  /* Claim */
  .claim { padding-top: calc(48 * var(--u)); }
  .claim h2 { font-size: calc(24 * var(--u)); }
  .claim p { font-size: calc(17 * var(--u)); line-height: 1.5; }
  .claim p + p { margin-top: calc(20 * var(--u)); }

  /* Zone: 2×2-Raster statt Fächer */
  .zone { --u: calc(100vw / 414); height: auto; margin: calc(32 * var(--u)) 0 0; padding: calc(220 * var(--u)) var(--rand) calc(60 * var(--u)); }
  .zone-flaeche { inset: 0; }
  .kegel { width: calc(200 * var(--u)); height: calc(520 * var(--u)); top: calc(-40 * var(--u)); }
  .kacheln { position: relative; left: auto; width: auto; translate: none; scale: none; display: grid; grid-template-columns: 1fr 1fr; gap: calc(14 * var(--u)); }
  .halter { position: relative; left: auto; top: auto; width: auto; height: auto; aspect-ratio: 560 / 696; }
  .h-agentur, .h-kontakt { --rot: 0deg; }
  .h-agentur { --rot: -4deg; --dx: 50%; --dy: 50%; }
  .h-werbung { --rot: 3deg; --dx: -50%; --dy: 50%; }
  .h-awards { --rot: -3deg; --dx: 50%; --dy: -50%; }
  .h-kontakt { --rot: 4deg; --dx: -50%; --dy: -50%; }
  .kachel { border-radius: calc(26 * var(--u)); transform: scale(.96); }
  .kachel-wort { font-size: calc(30 * var(--u)); bottom: calc(26 * var(--u)); }
  .kachel--app .kachel-wort, .kachel--reel .kachel-wort { bottom: calc(40 * var(--u)); }
  .kachel-unter { bottom: calc(22 * var(--u)); font-size: 9px; letter-spacing: .04em; }
  .app-chip { display: none; }
  .app-fenster { width: 84%; border-radius: calc(8 * var(--u)); }
  .af-3 { left: 4%; top: 10%; }
  .af-2 { left: 12%; top: 17%; }
  .af-1 { left: 20%; top: 24%; }

  /* Projekte */
  .arb-titel { font-size: calc(60 * var(--u)); margin-bottom: calc(32 * var(--u)); }
  .arb-gross, .arb-grid { width: var(--satz); grid-template-columns: 1fr; gap: calc(16 * var(--u)); }
  .arb-gross { margin-bottom: calc(16 * var(--u)); }
  .arb-kachel { border-radius: calc(26 * var(--u)); }
  .arb-text { left: calc(22 * var(--u)); right: calc(22 * var(--u)); bottom: calc(22 * var(--u)); }
  .arb-kunde { font-size: 13px; margin-bottom: 8px; }
  .arb-kopf { font-size: calc(19 * var(--u)); }
  .arb-mehr { margin-top: calc(40 * var(--u)); }
  .knopf { padding: 14px 28px; font-size: 15px; }
  .arbeiten { padding-bottom: calc(80 * var(--u)); }

  /* Social */
  .sozial-wort { height: calc(150 * var(--u)); }
  .sozial-blob { width: calc(320 * var(--u)); height: calc(150 * var(--u)); }
  .sozial-schrift { font-size: calc(80 * var(--u)); }
  .sozial-feed { gap: calc(14 * var(--u)); padding: calc(170 * var(--u)) var(--rand) calc(40 * var(--u)); scroll-padding-left: var(--rand); }
  .sozial-feed > li { flex-basis: calc(220 * var(--u)); }
  .beitrag { border-radius: calc(22 * var(--u)); }
  .beitrag-zeile { left: 10px; right: 10px; bottom: 10px; }
  .beitrag-fuss { padding: 10px 14px; }
  .sozial-fuss { margin-top: 0; }
  .sozial-tag { font-size: calc(26 * var(--u)); }

  /* Crew */
  .crew { padding: calc(60 * var(--u)) 0 calc(80 * var(--u)); }
  .welle { top: calc(420 * var(--u)); }
  .crew-kopf { margin-bottom: calc(60 * var(--u)); }
  .crew-titel { font-size: calc(72 * var(--u)); }
  .ki-sticker { width: calc(70 * var(--u)); right: calc(-36 * var(--u)); top: calc(-34 * var(--u)); } /* bleibt im Bildschirm */
  .crew-text { font-size: calc(18 * var(--u)); margin-top: calc(28 * var(--u)); }
  .crew-liste { grid-template-columns: repeat(2, 1fr); column-gap: calc(12 * var(--u)); row-gap: calc(24 * var(--u)); padding: 0 var(--rand) calc(60 * var(--u)); }
  .person { border-radius: calc(22 * var(--u)); }
  .person:nth-child(even) { transform: translateY(calc(48 * var(--u))); }
  .person-text { left: calc(14 * var(--u)); right: calc(14 * var(--u)); bottom: calc(14 * var(--u)); }
  .person-name { font-size: calc(18 * var(--u)); }
  .person-rolle { font-size: 12px; }

  /* Stimmen */
  .stimmen { padding-top: calc(70 * var(--u)); padding-bottom: calc(60 * var(--u)); }
  .stimme-text { font-size: calc(21 * var(--u)); max-width: none; }
  .stimme figcaption { margin-top: calc(22 * var(--u)); }
  .stimmen-pfeil { top: auto; bottom: calc(150 * var(--u)); }
  .stimmen-pfeil.zurueck { left: var(--rand); }
  .stimmen-pfeil.vor { right: var(--rand); }
  .stimmen-punkte { margin-top: calc(28 * var(--u)); min-height: 44px; align-items: center; }
  .stimmen-mehr { margin-top: calc(28 * var(--u)); }

  /* Logos */
  .kundenlogos { padding: calc(56 * var(--u)) 0; gap: calc(12 * var(--u)); }
  .klogo-band { gap: calc(12 * var(--u)); --lauf-gap: calc(6 * var(--u)); }
  .klogo { flex-basis: calc(160 * var(--u)); height: calc(72 * var(--u)); }
  .klogo:has(img) { padding: 6px 22px; }
  .klogo img { max-height: calc(54 * var(--u)); }
  .wm { font-size: calc(18 * var(--u)); }
  .wm-6 { font-size: calc(15 * var(--u)); }

  /* CTA */
  .cta { padding: calc(60 * var(--u)) var(--rand) calc(70 * var(--u)); }
  .cta h2 { font-size: calc(44 * var(--u)); margin-bottom: calc(32 * var(--u)); }
  .ja-form { font-size: calc(46 * var(--u)); }
  .ja-form.aktiv { width: 100%; min-height: calc(46 * 1.84 * var(--u)); }
  .ja-feld input { font-size: 16px; }
  .ja-los { font-size: 13px; width: 3.4em; height: 3.4em; }

  /* Footer */
  .fuss { height: calc(150 * var(--u) + 250px); } /* Platz für bis zu vier Zeilen Links */
  .fuss-ringe { top: calc(70 * var(--u)); }
  .fuss-ringe i { width: calc(700 * var(--u)); }
  .fuss-logo { top: calc(70 * var(--u)); width: calc(300 * var(--u)); }
  .fuss-mitte { top: calc(140 * var(--u)); gap: 12px; }
  .fuss-links { bottom: 16px; }

  /* Kurs: auf dem Handy ausgeblendet – three.js wird dadurch gar nicht erst geladen,
     weil der IntersectionObserver in leuchtturm-3d.js bei display:none nie auslöst */
  .kurs { display: none; }
  .kurs + .arbeiten { padding-top: calc(64 * var(--u)); }

  /* Galerie */
  .galerie-rahmen { aspect-ratio: 3 / 4; }
  .galerie-zurueck { left: 8px; }
  .galerie-vor { right: 8px; }
  .galerie-zu { right: 8px; top: -64px; }
}

/* =========================================================
   Weniger Bewegung
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .reel-band { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .kt-stern, .kt-strahl, .kt-blitz, .kt-welle { animation: none; }
  .kt-strahl--hinten { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-reihe, .hero-schild-text { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .motiv--lebt::before, .motiv--brandung::before, .motiv--fluss::before,
  .sozial-blob, .ki-sticker svg, .fuss-ringe i, .uhr .doppelpunkt, .zone.an .kegel i { animation: none; }
  .blatt-liste li, .blatt-fuss { translate: none; transition: opacity .2s ease; }
  .navi { transition: none; }
  [data-reveal] { transform: none; transition: opacity .4s ease; }
  .flug, .zone.an .flug { transition: none; transform: rotate(var(--rot)); }
  .app-fenster, .app-chip { transition: none; }
  .stimme, .stimme.raus { transform: none; }
  .klogo-band { animation: none; }
  .klogo-reihe { overflow-x: auto; }
  .kurs-buehne { clip-path: none; }
  .kurs--aktiv .kapitel > *, .kurs--aktiv .kapitel.vorbei > * { transform: none; transition: opacity .3s ease; }
  .kurs-leiste i { transition: background-color .3s ease; }
  .kurs-leiste i.aktiv { transform: none; }
}

.hero :focus-visible { outline-color: hsl(var(--gold)); }

/* Teamfotos: bis die echten Bilder da sind */
.bald {
  display: grid; place-items: center; box-sizing: border-box; padding: 1em; text-align: center;
  background: var(--p-bg, hsl(var(--signal))); color: hsl(var(--navy, 218 62% 7%));
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em;
  font-size: max(18px, calc(40 * var(--u))); line-height: 1;
}
.person .bald { padding-bottom: 38%; }

/* Handy-Korrekturen */
@media (max-width: 767.98px) {
  /* "Coming soon" muss in die kleinen Porträtkarten passen */
  .bald { padding: .4em; overflow-wrap: anywhere; }
  .person .bald { font-size: calc(22 * var(--u)); padding-bottom: 38%; }
  .profil-bild.bald { font-size: calc(13 * var(--u)); letter-spacing: -0.03em; }
  .kachel-unter { font-size: 11px; }
  /* Headline bleibt lesbar, auch wenn der Screenshot hell oder textlastig ist */
  .arb-kachel:has(.arb-bild) .arb-schleier { background: linear-gradient(180deg, transparent 8%, hsl(var(--nacht) / .84) 46%, hsl(var(--nacht) / .97) 100%); }
}