/* ==========================================================================
   veeyouX – Website-Entwurf
   Layout: Die Seite ist eine Show in vier Cues (What · We · Do · ?).
   Ein Leuchtturm ist die Lichtquelle: Er beleuchtet im Hero die Navigation
   als Wortmarke, im Team-Teil steht er für das Leuchtturm-Prinzip.
   Farben, Logo und Schrift (Poppins) sind 1:1 aus der bestehenden CI.
   ========================================================================== */

:root {
  /* CI-Farben (unverändert aus der bestehenden Seite / dem Logo) */
  --brand: #9b0b1e;          /* veeyouX-Rot */
  --brand-deep: #6e0815;     /* dunkle Hälfte des Leuchtturms */
  --brand-light: #b8142c;    /* helle Facette des Leuchtturms */
  --ink: #0a0605;            /* Schwarz aus dem Logo */
  --text: #333333;
  --muted: #50575f;          /* Grau der bestehenden Seite */
  --line: #e4e2e2;
  --mist: #f3f3f4;           /* Hellgrau aus der Leuchtturm-Grafik */
  --paper: #ffffff;
  --light: #ffffff;          /* Licht des Leuchtturms */

  --font: "Poppins", "Helvetica Neue", Arial, sans-serif;

  --radius: 22px;
  --wrap: 1240px;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --nav-h: 72px;

  color-scheme: light;
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
h1, h2, h3, h4 { margin: 0; line-height: 1.05; text-wrap: balance; color: var(--ink); }
p { margin: 0 0 1em; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 4px; }

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * 16px);
  margin-inline: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter-r);
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--brand); color: var(--light); padding: 10px 16px; border-radius: 999px;
}
.skip:focus { top: 12px; }

.eyebrow {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 0.95rem; font-weight: 400; color: var(--muted); margin: 0 0 14px;
}
.eyebrow--light { color: rgba(255, 255, 255, 0.7); }
.cue-tag {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brand); border: 1.5px solid currentColor; border-radius: 999px; padding: 2px 10px;
}
.cue-tag--light { color: var(--light); }

/* ---------- Buttons (Pillen wie bisher) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 28px; border-radius: 999px; border: 0;
  font: 500 0.95rem/1 var(--font); text-decoration: none; cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--brand { background: var(--brand); color: var(--light); box-shadow: 0 8px 24px -10px var(--brand); }
.btn--brand:hover { background: var(--brand-deep); }
.btn--ghost-light { color: var(--light); background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.5); }
.btn--ghost-light:hover { box-shadow: inset 0 0 0 1.5px var(--light); }

/* ---------- Navigation ---------- */
body::before {
  content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px);
  z-index: 60; background: var(--paper);
}
.nav {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}
.nav.is-scrolled { border-bottom-color: var(--line); }
.nav__inner {
  max-width: calc(var(--wrap) + 32px); margin-inline: auto; height: var(--nav-h);
  padding-left: var(--gutter); padding-right: var(--gutter-r);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
}
.nav__logo img { width: 158px; height: auto; }
.nav__cues { display: flex; gap: clamp(14px, 3vw, 34px); }
.nav__cues a {
  position: relative; text-decoration: none; font-weight: 500; font-size: 1.02rem;
  color: var(--ink); padding: 6px 2px;
}
.nav__cues a::after {
  content: ""; position: absolute; left: 50%; bottom: -2px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--brand);
  transform: translateX(-50%) scale(0); transition: transform 0.25s ease;
}
.nav__cues a:hover::after, .nav__cues a.is-active::after { transform: translateX(-50%) scale(1); }
.nav__cues a.is-active { color: var(--brand); }
.nav__q { font-weight: 800 !important; color: var(--brand) !important; }
.nav__cta { justify-self: end; padding: 11px 26px; }

@media (max-width: 640px) {
  .nav__inner { grid-template-columns: auto 1fr auto; }
  .nav__logo img { width: 112px; }
  .nav__cues { justify-content: center; gap: 12px; }
  .nav__cues a { font-size: 0.92rem; }
  .nav__cta { padding: 9px 14px; font-size: 0.82rem; }
}
@media (max-width: 380px) { .nav__cta { display: none; } .nav__inner { grid-template-columns: auto 1fr; } .nav__cues { justify-content: flex-end; } }

/* ==========================================================================
   HERO – der Leuchtturm beleuchtet «What We Do ?»
   ========================================================================== */
.hero {
  --a: 250deg;            /* Winkel des Strahls, wird per JS animiert */
  --lx: 82%; --ly: 30%;   /* Position der Laterne, wird per JS gemessen */
  position: relative; overflow: hidden; overflow: clip; isolation: isolate;
  background:
    radial-gradient(120% 90% at 85% 20%, #1c0d0e 0%, var(--ink) 60%);
  color: var(--light);
  padding-block: clamp(48px, 8vw, 96px) clamp(40px, 6vw, 72px);
}
.hero__poly {
  position: absolute; inset: auto -5% -10% auto; width: min(70vw, 900px); aspect-ratio: 1.4; z-index: -1;
  opacity: 0.55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 100'%3E%3Cpolygon points='140,20 90,100 140,100' fill='%239b0b1e'/%3E%3Cpolygon points='140,20 60,70 90,100' fill='%236e0815'/%3E%3Cpolygon points='60,70 30,100 90,100' fill='%23b8142c' opacity='.7'/%3E%3Cpolygon points='140,20 100,0 60,70' fill='%239b0b1e' opacity='.45'/%3E%3Cpolygon points='60,70 20,85 30,100' fill='%236e0815' opacity='.6'/%3E%3C/svg%3E") no-repeat right bottom / contain;
  -webkit-mask-image: linear-gradient(200deg, #000 30%, transparent 85%);
          mask-image: linear-gradient(200deg, #000 30%, transparent 85%);
}
/* zwei gegenüberliegende Lichtkegel wie bei einem echten Leuchtturm */
.hero__beam {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle at var(--lx) var(--ly), rgba(255, 255, 255, 0.55) 0, rgba(255, 255, 255, 0.12) 3.5%, transparent 12%),
    conic-gradient(from calc(var(--a) - 10deg) at var(--lx) var(--ly),
      transparent 0deg, rgba(255, 255, 255, 0.09) 5deg, rgba(255, 255, 255, 0.2) 10deg, rgba(255, 255, 255, 0.09) 15deg, transparent 20deg,
      transparent 180deg, rgba(255, 255, 255, 0.06) 185deg, rgba(255, 255, 255, 0.13) 190deg, rgba(255, 255, 255, 0.06) 195deg, transparent 200deg);
  mix-blend-mode: screen;
}
.hero__inner {
  position: relative; z-index: 1;
  pointer-events: none; /* leere Flächen lassen Klicks zum Leuchtturm durch */
  max-width: calc(var(--wrap) + 32px); margin-inline: auto;
  padding-left: var(--gutter); padding-right: var(--gutter-r);
}
.hero__kicker {
  font-size: 0.78rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55); margin-bottom: clamp(16px, 3vw, 28px);
}
.hero__words { pointer-events: auto; position: relative; margin: 0; color: inherit; width: fit-content; max-width: 100%; }
.hero__stack {
  display: grid; font-weight: 900; text-transform: uppercase;
  font-size: clamp(4.4rem, 15.5vw, 13.5rem); line-height: 0.86; letter-spacing: -0.035em;
}
.hw { display: block; }
.hw--q { margin-left: 0.04em; color: var(--brand); -webkit-text-stroke: 0 !important; }

/* Grundzustand: Konturschrift, lesbar auch ohne Strahl */
.hero__stack:not(.hero__stack--lit) .hw {
  color: rgba(255, 255, 255, 0.07);
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.42);
}
.hero__stack:not(.hero__stack--lit) .hw--q { color: var(--brand); text-shadow: 0 0 60px rgba(155, 11, 30, 0.8); }
/* beleuchtete Kopie: nur im Lichtkegel sichtbar */
.hero__stack--lit {
  --mx: 100%; --my: 0%;
  /* Box ringsum vergrössert: Durch die enge Laufweite ragen Buchstaben wie das T
     über die Textbox hinaus, die Maske würde sie sonst abschneiden */
  position: absolute; inset: -0.2em -0.25em -0.2em -0.1em; padding: 0.2em 0.25em 0.2em 0.1em;
  color: var(--light); pointer-events: none;
  -webkit-mask-image: conic-gradient(from calc(var(--a) - 10deg) at var(--mx) var(--my),
      transparent 0deg, rgba(0,0,0,0.6) 5deg, #000 10deg, rgba(0,0,0,0.6) 15deg, transparent 20deg,
      transparent 180deg, rgba(0,0,0,0.4) 185deg, rgba(0,0,0,0.75) 190deg, rgba(0,0,0,0.4) 195deg, transparent 200deg);
          mask-image: conic-gradient(from calc(var(--a) - 10deg) at var(--mx) var(--my),
      transparent 0deg, rgba(0,0,0,0.6) 5deg, #000 10deg, rgba(0,0,0,0.6) 15deg, transparent 20deg,
      transparent 180deg, rgba(0,0,0,0.4) 185deg, rgba(0,0,0,0.75) 190deg, rgba(0,0,0,0.4) 195deg, transparent 200deg);
}
.hero__stack--lit .hw { text-shadow: 0 0 40px rgba(255, 255, 255, 0.35); }
.hero__stack--lit .hw--q { color: #ff2a46; }

.hero__copy { pointer-events: auto; margin-top: clamp(28px, 4vw, 48px); max-width: 560px; }
.hero__lead { font-size: clamp(1.25rem, 2.2vw, 1.7rem); font-weight: 600; line-height: 1.25; color: var(--light); margin-bottom: 10px; }
.hero__sub { color: rgba(255, 255, 255, 0.7); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

.hero__tower {
  /* hinter dem Text; klickbar bleibt er dort, wo kein Text darüber liegt */
  position: absolute; z-index: 0; padding: 0; border: 0; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  right: clamp(16px, 9vw, 160px); bottom: 0;
  height: min(88%, 640px); width: auto; aspect-ratio: 100 / 260;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.6));
}
.hero__tower svg { display: block; width: 100%; height: 100%; }
.hero__tower:focus-visible { outline-color: var(--light); }
.hero__tower.is-poked { animation: poke 0.35s ease; }
@keyframes poke { 40% { transform: translateY(4px) scaleY(0.97); } }
.hero__tower.is-poked .lh-lamp { animation: flash 0.35s ease; }
@keyframes flash { 30% { fill: #ff2a46; filter: drop-shadow(0 0 16px #ff2a46); } }
.hero__egg-hint {
  position: absolute; z-index: 3; right: var(--gutter-r); top: 18px; margin: 0;
  font-size: 0.8rem; font-weight: 600; color: var(--light); background: var(--brand);
  padding: 6px 14px; border-radius: 999px; opacity: 0; transform: translateY(-6px); transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
}
.hero__egg-hint.is-on { opacity: 1; transform: none; }

/* ---------- Easter Egg: Verfolger-Challenge ---------- */
.spot { position: absolute; inset: 0; z-index: 4; }
.hero.is-game { touch-action: none; }
.hero.is-game .hero__inner { opacity: 0.12; transition: opacity 0.5s; }
.hero.is-game .hero__hint { display: none; }
.hero.is-game .hero__tower { cursor: default; }
.spot__performer {
  position: absolute; left: 0; top: 0; width: clamp(34px, 4vw, 52px); aspect-ratio: 40 / 90;
  translate: -50% -100%; will-change: transform; pointer-events: none;
  fill: #2a2224; transition: fill 0.15s, filter 0.15s;
}
.spot__performer svg { width: 100%; height: 100%; display: block; animation: dance 0.6s ease-in-out infinite alternate; transform-origin: 50% 100%; }
@keyframes dance { to { transform: rotate(4deg) translateY(-2px); } }
.spot__performer.is-lit { fill: var(--light); filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.9)); }
.spot__performer.is-lit path:nth-of-type(2) { fill: var(--brand); }
.spot__hud {
  position: absolute; left: 50%; top: 18px; translate: -50% 0; z-index: 2;
  display: flex; align-items: center; gap: 12px; white-space: nowrap;
  background: rgba(10, 6, 5, 0.75); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 999px;
  padding: 8px 16px; font-size: 0.8rem; font-weight: 600; color: var(--light);
  font-variant-numeric: tabular-nums;
}
.spot__meter { width: clamp(70px, 18vw, 180px); height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.15); overflow: hidden; }
.spot__meter span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--brand), #ff2a46); border-radius: inherit; }
.spot__time { color: rgba(255, 255, 255, 0.6); }
@media (max-width: 480px) { .spot__label { display: none; } .spot__hud { gap: 8px; padding: 7px 12px; } }
.spot__card {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 3;
  width: min(460px, calc(100% - 32px)); text-align: center;
  background: rgba(10, 6, 5, 0.88); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--radius);
  padding: clamp(24px, 4vw, 36px); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.8);
  animation: popIn 0.4s cubic-bezier(.2, .8, .2, 1);
}
.spot__kicker { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #ff2a46; margin-bottom: 8px; }
.spot__title { color: var(--light); font-size: clamp(1.6rem, 3.4vw, 2.2rem); font-weight: 800; margin-bottom: 12px; }
.spot__text { color: rgba(255, 255, 255, 0.78); font-size: 0.95rem; }
.spot__best { color: rgba(255, 255, 255, 0.5); font-size: 0.8rem; min-height: 1em; }
.spot__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 8px; }
.spot__score { display: block; font-size: clamp(3rem, 9vw, 4.6rem); font-weight: 900; color: var(--light); line-height: 1; margin: 6px 0 10px; }

.lh-r { fill: var(--brand-deep); }
.lh-b { fill: var(--brand); }
.lh-h { fill: var(--brand-light); }
.lh-lamp { fill: var(--light); }
.hero .lh-lamp { filter: drop-shadow(0 0 6px #fff); animation: lamp 3s ease-in-out infinite; }
@keyframes lamp { 50% { opacity: 0.82; } }

.hero__hint {
  position: absolute; right: var(--gutter-r); bottom: 14px; margin: 0; z-index: 1;
  font-size: 0.72rem; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.4);
}
@media (hover: none), (max-width: 760px) { .hero__hint { display: none; } }

@media (max-width: 760px) {
  .hero__tower { right: max(12px, 4vw); top: clamp(80px, 14vw, 120px); bottom: auto; height: clamp(220px, 48vw, 360px); }
}
@media (max-width: 480px) {
  .hero__ctas .btn { flex: 1 1 auto; }
}

/* ---------- Laufband Fachbereiche ---------- */
.ticker { background: var(--brand); color: var(--light); overflow: hidden; padding-block: 16px; }
.ticker__track { display: flex; width: max-content; animation: ticker 38s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__list { display: flex; margin: 0; padding: 0; list-style: none; }
.ticker__list li {
  font-weight: 700; font-size: clamp(1.1rem, 2.4vw, 1.6rem); text-transform: uppercase; letter-spacing: 0.04em;
  display: flex; align-items: center; gap: 32px; padding-right: 32px; white-space: nowrap;
}
.ticker__list li::after {
  /* Trenner: das «X» aus dem veeyouX-Logo, Farbe wie bisher */
  content: ""; flex: none; width: 0.8em; aspect-ratio: 56 / 41; background: var(--light); opacity: 0.6;
  -webkit-mask: url("../img/x.svg") center / contain no-repeat; mask: url("../img/x.svg") center / contain no-repeat;
}
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- Intro + Cue-Liste ---------- */
.intro {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px);
  padding-block: clamp(72px, 10vw, 140px);
}
.intro__title { font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 800; text-transform: uppercase; color: var(--brand); margin-bottom: 24px; }
.intro__promise { color: var(--ink); }
.intro__promise strong { color: var(--brand); font-weight: 700; }

.cuelist { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--ink); align-self: start; }
.cuelist li { border-bottom: 1px solid var(--line); }
.cue {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr) auto; align-items: center; gap: 4px 20px;
  padding: 22px 12px; text-decoration: none; color: var(--text);
  transition: color 0.3s ease;
}
.cue::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--brand);
  transform: scaleX(0); transform-origin: left; transition: transform 0.45s cubic-bezier(.7, 0, .2, 1);
}
.cue:hover::before, .cue:focus-visible::before { transform: scaleX(1); }
.cue:hover, .cue:focus-visible { color: var(--light); }
.cue__no { grid-row: span 2; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); transition: color 0.3s; }
.cue__word { grid-row: span 2; font-size: clamp(2.4rem, 3.6vw, 3.1rem); font-weight: 900; text-transform: uppercase; line-height: 0.9; color: var(--brand); transition: color 0.3s; }
.cue__label { font-weight: 600; color: var(--ink); transition: color 0.3s; }
.cue__text { grid-column: 2; font-size: 0.92rem; line-height: 1.5; }
.cue__go {
  grid-column: 3; grid-row: 1 / span 2; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.2rem; font-weight: 500;
  border: 1.5px solid currentColor; color: var(--brand); transition: color 0.3s, background 0.3s;
}
.cue:hover .cue__no, .cue:hover .cue__word, .cue:hover .cue__label, .cue:hover .cue__go,
.cue:focus-visible .cue__no, .cue:focus-visible .cue__word, .cue:focus-visible .cue__label, .cue:focus-visible .cue__go { color: var(--light); }
.cue:hover .cue__go { background: var(--light); color: var(--brand); }

@media (max-width: 900px) {
  .intro { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .cue { grid-template-columns: minmax(0, 1fr) auto; padding: 18px 6px; }
  .cue__no { grid-row: auto; }
  .cue__word { grid-row: auto; }
  .cue__text { grid-column: 1; }
  .cue__go { grid-column: 2; grid-row: 1 / span 3; width: 44px; height: 44px; }
}

/* ---------- Abschnittsköpfe mit grossem Wort ---------- */
.sec-head { padding-top: clamp(72px, 10vw, 140px); margin-bottom: clamp(40px, 6vw, 80px); max-width: 900px; }
.bigword {
  --p: 1; /* Füllgrad, per JS an den Scroll gekoppelt */
  font-size: clamp(5rem, 19vw, 15rem); font-weight: 900; text-transform: uppercase;
  line-height: 0.82; letter-spacing: -0.04em; margin: 0 0 24px -0.04em;
  color: transparent; -webkit-text-stroke: 2px var(--brand);
  background: linear-gradient(90deg, var(--brand) calc(var(--p) * 100%), transparent calc(var(--p) * 100%));
  -webkit-background-clip: text; background-clip: text;
  width: fit-content; padding-right: 0.08em;
}
.sec-head__lead { font-size: clamp(1.05rem, 1.6vw, 1.22rem); max-width: 62ch; }

/* ==========================================================================
   WHAT – Sticky-Bühne
   ========================================================================== */
.what { background: linear-gradient(180deg, var(--paper), var(--mist) 40%, var(--paper)); padding-bottom: clamp(60px, 8vw, 120px); }
.stage { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); }
.stage__media { position: sticky; top: calc(var(--nav-h) + 24px); align-self: start; }
.stage__frame {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: var(--ink);
  box-shadow: 0 40px 80px -40px rgba(10, 6, 5, 0.6);
}
.slides { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 0.7s ease; }
.slides.is-active { opacity: 1; }
.slides img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.4s ease;
  transform-origin: var(--ox, 50%) var(--oy, 50%);
}
.slides img:nth-child(4n+1) { --ox: 30%; --oy: 40%; }
.slides img:nth-child(4n+2) { --ox: 70%; --oy: 35%; }
.slides img:nth-child(4n+3) { --ox: 45%; --oy: 65%; }
.slides img:nth-child(4n+4) { --ox: 60%; --oy: 55%; }
/* langsamer Zoom: läuft durch, auch während das nächste Bild einblendet */
.slides img.is-on, .slides img.is-off { animation: kenburns 9s linear forwards; }
.slides img.is-on { opacity: 1; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.16); } }
.stage__label {
  position: absolute; left: 18px; bottom: 18px; display: flex; align-items: center; gap: 10px;
  background: rgba(10, 6, 5, 0.65); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: var(--light); font-size: 0.82rem; font-weight: 500; padding: 8px 16px 8px 12px; border-radius: 999px;
}
.stage__dot { width: 8px; height: 8px; border-radius: 50%; background: #ff2a46; box-shadow: 0 0 0 0 rgba(255, 42, 70, 0.7); animation: rec 1.6s infinite; }
@keyframes rec { 70% { box-shadow: 0 0 0 10px rgba(255, 42, 70, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 42, 70, 0); } }
.stage__index { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.stage__index li { border-top: 3px solid var(--line); transition: border-color 0.3s; }
.stage__index button {
  display: block; width: 100%; text-align: left; padding: 10px 0 0; border: 0; background: none; cursor: pointer;
  font: 500 0.78rem/1.3 var(--font); color: var(--muted); transition: color 0.3s;
}
.stage__index button:hover, .stage__index button:focus-visible { color: var(--brand); }
.stage__index li.is-active { border-top-color: var(--brand); }
.stage__index li.is-active button { color: var(--brand); }

.act { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; padding-block: 40px; opacity: 0.35; transition: opacity 0.5s ease; }
.act.is-active { opacity: 1; }
.act__media, .act__img { display: none; }
.act__kicker { color: var(--muted); margin-bottom: 8px; }
.act__title { font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 700; color: var(--brand); margin-bottom: 20px; }
.act__lead-in { font-weight: 600; color: var(--ink); margin: 4px 0 0; }
.act__points { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; }
.act__points li { display: flex; gap: 12px; align-items: baseline; font-weight: 500; color: var(--ink); }
.act__points li::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--brand); transform: rotate(45deg) translateY(-1px); }

@media (max-width: 900px) {
  .stage { grid-template-columns: 1fr; }
  .stage__media { display: none; }
  .act { min-height: 0; opacity: 1; padding-block: 0 56px; }
  /* Mobil: pro Eventart eine eigene Galerie (gleiches Verhalten wie die Bühne auf dem Desktop) */
  .act__media { display: block; position: relative; overflow: hidden; border-radius: var(--radius); margin-bottom: 22px; aspect-ratio: 3 / 2; max-width: 100%; background: var(--ink); }
  .act__media .act__img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s ease; transform-origin: var(--ox, 50%) var(--oy, 50%); }
  .act__media .act__img:nth-child(4n+1) { --ox: 30%; --oy: 40%; }
  .act__media .act__img:nth-child(4n+2) { --ox: 70%; --oy: 35%; }
  .act__media .act__img:nth-child(4n+3) { --ox: 45%; --oy: 65%; }
  .act__media .act__img:nth-child(4n+4) { --ox: 60%; --oy: 55%; }
  .act__media .act__img.is-on { opacity: 1; }
  .act__media .act__img.is-on, .act__media .act__img.is-off { animation: kenburns 9s linear forwards; }
}

/* ==========================================================================
   WE – Leuchtturm-Prinzip + Crew
   ========================================================================== */
.we { padding-bottom: clamp(72px, 10vw, 140px); }

.coast {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--ink); color: rgba(255, 255, 255, 0.82);
  min-height: clamp(560px, 62vw, 760px);
  display: flex; flex-direction: column;
}
.coast__sky { position: absolute; inset: 0; z-index: -2; background: radial-gradient(90% 70% at 50% 100%, #2a1012 0%, var(--ink) 70%); }
.coast__text {
  position: relative; z-index: 3; padding-block: clamp(56px, 8vw, 96px) 32px;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px clamp(32px, 6vw, 96px); align-items: start;
}
.coast__copy p { max-width: 62ch; }
.coast__copy p:last-child { margin-bottom: 0; }
.coast__copy strong { color: var(--light); font-weight: 600; }
.coast__title { color: var(--light); font-size: clamp(2.2rem, 4.6vw, 3.8rem); font-weight: 800; }
.coast__title span { display: block; color: #ff2a46; }
/* Text liegt über den Lichtkegeln: leichte Abdunkelung hinter dem Fliesstext */
.coast__copy { text-shadow: 0 1px 12px rgba(10, 6, 5, 0.85); }
@media (max-width: 900px) { .coast__text { grid-template-columns: 1fr; } }
.coast__line {
  position: relative; z-index: 1; margin-top: auto; height: clamp(150px, 18vw, 220px);
  display: flex; justify-content: space-around; align-items: flex-end;
  padding-inline: 2vw;
}
.coast__sea {
  position: absolute; inset: auto 0 0; height: 34px; z-index: 2;
  background: linear-gradient(180deg, #1a0a0b, #050302);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.mini {
  --phase: 0s; --speed: 9s;
  position: relative; display: flex; flex-direction: column; align-items: center;
  width: clamp(26px, 4vw, 46px); height: 100%; padding: 0; margin-bottom: 30px;
  background: none; border: 0; cursor: pointer; color: inherit;
}
.mini:nth-child(odd) .mini__tower { width: 82%; }
.mini__tower { position: relative; margin-top: auto; width: 100%; aspect-ratio: 100 / 260; transition: transform 0.3s ease; }
.mini svg { position: relative; z-index: 2; width: 100%; height: 100%; display: block; }
.mini__beam {
  position: absolute; z-index: 1; left: 50%; top: 14.4%;
  width: 160vw; height: 34vw; translate: -50% -50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0.08) 55%, transparent);
  clip-path: polygon(0 0, 50% 48.5%, 100% 0, 100% 100%, 50% 51.5%, 0 100%);
  animation: sweep var(--speed) linear infinite; animation-delay: var(--phase);
  pointer-events: none; mix-blend-mode: screen; opacity: 0.4; transition: opacity 0.4s ease;
  will-change: transform;
}
@keyframes sweep { to { transform: rotate(360deg); } }
.mini__name {
  position: absolute; bottom: calc(100% + 6px); left: 50%; translate: -50% 4px; white-space: nowrap;
  font-size: 0.75rem; font-weight: 600; color: var(--light); background: var(--brand);
  padding: 4px 10px; border-radius: 999px; opacity: 0; transition: opacity 0.25s, translate 0.25s; z-index: 3;
}
.mini:hover .mini__name, .mini:focus-visible .mini__name { opacity: 1; translate: -50% 0; }
.mini:hover .mini__tower, .mini:focus-visible .mini__tower { transform: translateY(-6px); }
.mini:hover .mini__beam, .mini:focus-visible .mini__beam, .mini.is-match .mini__beam { opacity: 1; }
.mini.is-dim .mini__beam { opacity: 0.08; }
.mini.is-dim svg { opacity: 0.4; }
.mini .lh-lamp { filter: drop-shadow(0 0 4px #fff); }

/* Crew-Kopf + Filter */
.crew-head {
  display: flex; flex-direction: column; align-items: flex-start; gap: 20px;
  padding-block: clamp(56px, 8vw, 96px) 36px;
}
.crew-head__title { font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 700; color: var(--brand); }
.filter__chips { display: flex; flex-wrap: wrap; gap: 8px; }
@media (min-width: 901px) { .filter__chips { flex-wrap: nowrap; } }
.chip {
  font: 500 0.86rem/1 var(--font); padding: 10px 16px; border-radius: 999px; cursor: pointer;
  background: var(--paper); color: var(--ink); border: 1.5px solid var(--line);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.chip:hover { border-color: var(--brand); color: var(--brand); }
.chip.is-active { background: var(--brand); border-color: var(--brand); color: var(--light); }

/* Crew-Pässe */
.crew { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
/* Pass als Karte mit Vorder- und Rückseite; beide Seiten liegen im selben
   Grid-Feld, so bestimmt die längere Seite die Höhe */
.pass {
  position: relative; perspective: 1600px;
  transition: transform 0.35s ease, opacity 0.35s ease, filter 0.35s ease;
}
.pass:hover { transform: translateY(-6px) rotate(-0.6deg); }
.pass__flip {
  display: grid; height: 100%;
  transform-style: preserve-3d; transition: transform 0.75s cubic-bezier(.2, .8, .2, 1);
}
.pass.is-flipped .pass__flip { transform: rotateY(180deg); }
.pass__face {
  grid-area: 1 / 1; display: flex; flex-direction: column; min-width: 0;
  background: var(--paper); border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 24px 50px -36px rgba(10, 6, 5, 0.45);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: box-shadow 0.35s ease;
}
.pass:hover .pass__face { box-shadow: 0 34px 60px -30px rgba(155, 11, 30, 0.45); }
.pass__back { transform: rotateY(180deg); }
.pass__back .pass__body { gap: 8px; overflow-y: auto; scrollbar-width: thin; overscroll-behavior: contain; }
.pass__back .pass__body > div:first-child { margin-bottom: 4px; }
.pass__label { font-size: 0.82rem; font-weight: 600; color: var(--ink); margin: 6px 0 2px; }
.pass__back .tags { gap: 6px; }
.pass__back .tags li { font-size: 0.74rem; padding: 4px 10px; }
.pass__back .checks { gap: 4px; font-size: 0.82rem; }
/* Alle Pässe gleich hoch: Höhe der längsten Vorderseite (per JS gemessen) */
.crew.is-sized .pass { height: var(--pass-h); }
.pass[hidden] { display: none; }
.pass__strap {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  background: var(--brand); color: var(--light); padding: 10px 18px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
}
.pass__strap > span:last-child { justify-self: end; }
.pass__strap > span { white-space: nowrap; }
/* Artist · Backstage Pass: längerer Text, deshalb etwas enger gesetzt */
.pass--artist .pass__strap { grid-template-columns: auto 1fr auto; gap: 8px; letter-spacing: 0.12em; }
.pass--artist .pass__strap .pass__slot { justify-self: center; }
.pass__slot { width: 46px; height: 8px; border-radius: 999px; background: var(--paper); opacity: 0.95; }
.pass__photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--mist); }
.pass__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 12%; transition: transform 0.6s ease; }
.pass:hover .pass__photo img { transform: scale(1.04); }
.pass__photo--empty { display: grid; place-items: center; }
.pass__photo--empty svg { width: 34%; opacity: 0.25; }
.pass__body { padding: 16px 18px 46px; display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; } /* unten Platz für das Dreh-Icon */
.pass { cursor: pointer; }
.pass__face { position: relative; }
/* Dreh-Icon: vorne unten rechts, auf der Rückseite unten links */
.pass__turn {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  width: 28px; height: 28px; display: grid; place-items: center; padding: 0;
  border-radius: 50%; border: 1px solid var(--line); background: var(--paper); color: var(--brand);
  cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.4s ease;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.pass__back .pass__turn { right: auto; left: 10px; }
/* immer nur der Knopf der sichtbaren Seite */
.pass.is-flipped .pass__front .pass__turn, .pass:not(.is-flipped) .pass__back .pass__turn { visibility: hidden; }
.pass__turn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pass:hover .pass__turn, .pass__turn:focus-visible { background: var(--brand); border-color: var(--brand); color: var(--light); }
.pass:hover .pass__turn { transform: rotate(180deg); }
.pass__name { font-size: 1.3rem; font-weight: 700; color: var(--brand); }
.pass__role { font-size: 0.8rem; color: var(--muted); margin-top: 4px; }
/* ohne Namen: Jobbezeichnung übernimmt die Rolle des Namens */
.pass__role--solo { font-size: 1.15rem; font-weight: 700; color: var(--brand); margin-top: 0; }

/* Skill-Balken, stufenlos */
.meters { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.meter { display: grid; grid-template-columns: minmax(0, 1fr) 92px; align-items: center; gap: 10px; font-size: 0.76rem; line-height: 1.2; color: var(--text); transition: opacity 0.3s; }
.meter__bar { position: relative; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.meter__bar::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: var(--v); border-radius: inherit;
  background: linear-gradient(90deg, var(--brand-deep), var(--brand) 70%, #d1162f);
}
.crew.in-view .meter__bar::after { animation: barIn 1.1s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--row) * 80ms); }
@keyframes barIn { from { width: 0; } }
.pass.is-filtering .meter:not(.is-match) { opacity: 0.35; }
.meter.is-match { font-weight: 600; color: var(--ink); }


/* Dialog: Crew-Pass im Detail */
@keyframes popIn { from { opacity: 0; transform: translateY(20px) scale(0.97); } }


/* Modal: Crew-Pass im Detail */
.pass-dialog {
  width: min(960px, calc(100vw - 32px)); max-height: calc(100dvh - 32px);
  padding: 0; border: 0; border-radius: var(--radius); background: var(--paper); color: var(--text);
  box-shadow: 0 50px 120px -30px rgba(10, 6, 5, 0.6);
}
.pass-dialog::backdrop { background: rgba(10, 6, 5, 0.72); backdrop-filter: blur(4px); }
.pass-dialog[open] { animation: popIn 0.35s cubic-bezier(.2, .8, .2, 1); }
@keyframes popIn { from { opacity: 0; transform: translateY(20px) scale(0.97); } }
.pass-dialog__inner { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.pass-dialog__photo { background: var(--mist); }
.pass-dialog__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.pass-dialog__body { padding: clamp(24px, 4vw, 44px); min-width: 0; }
.pass-dialog__strap { padding: 14px 24px; font-size: 0.74rem; }
.pass-dialog__strap .pass__slot { width: 64px; height: 10px; }
.pass-dialog__name { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
.pass-dialog .pass__role { margin: 4px 0 26px; font-size: 0.9rem; }
.pass-dialog__cols { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px; }
.pass-dialog h4 { font-size: 0.82rem; font-weight: 600; color: var(--ink); margin: 0 0 12px; }
.pass-dialog h4 + ul + h4 { margin-top: 22px; }
.pass-dialog__close {
  position: absolute; top: 56px; right: 12px; z-index: 2; width: 40px; height: 40px; border-radius: 50%;
  border: 0; background: var(--ink); color: var(--light); font-size: 1.4rem; line-height: 1; cursor: pointer;
}
@media (max-width: 760px) {
  .pass-dialog__inner { grid-template-columns: 1fr; }
  .pass-dialog__photo { max-height: 300px; overflow: hidden; }
  .pass-dialog__cols { grid-template-columns: 1fr; }
}

.pass-dialog[open] .meter__bar::after { animation: barIn 1.1s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--row) * 80ms + 150ms); }
.pass-dialog .meters { gap: 11px; }
.pass-dialog .meter { font-size: 0.84rem; grid-template-columns: minmax(0, 1fr) minmax(90px, 40%); }

.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tags li { font-size: 0.78rem; background: #f6dfe3; color: var(--ink); padding: 5px 12px; border-radius: 999px; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 0.86rem; }
.checks li { display: flex; gap: 10px; }
.checks li::before { content: "✓"; color: var(--brand); font-weight: 700; }

/* ==========================================================================
   DO – CAD to LIVE
   ========================================================================== */
.do { background: var(--mist); padding-bottom: clamp(72px, 10vw, 140px); }
.cadlive { --x: 50%; margin: clamp(56px, 8vw, 100px) 0 0; display: grid; grid-template-areas: "v" "c"; position: relative; }
.cadlive__view, .cadlive__range { grid-area: v; }
.cadlive figcaption { grid-area: c; margin-top: 16px; color: var(--muted); }
.cadlive figcaption strong { color: var(--brand); }
.cadlive__hint { white-space: nowrap; color: var(--brand); font-weight: 500; }
.cadlive__view { position: relative; aspect-ratio: 3 / 2; border-radius: var(--radius); overflow: hidden; background: var(--ink); max-width: 100%; }
.cadlive__view img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cadlive__cad { position: absolute; inset: 0; background: var(--paper); clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.cadlive__cad img { filter: url(#cad-lines); opacity: 0.9; mix-blend-mode: multiply; }
/* echter Plan deckungsgleich auf der Bühne, rundherum nur das Raster (keine Menschen, keine Gebäude) */
.cadlive--plan .cadlive__cad img:not(.cadlive__plan) { display: none; }
.cadlive--plan .cadlive__cad .cadlive__plan { filter: none; opacity: 1; mix-blend-mode: normal; z-index: 1; }

/* Text zu CAD to Live®, aufgebaut wie die Texte bei What */
.cadtext {
  margin-top: clamp(64px, 9vw, 120px);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 72px); align-items: start;
}
.cadtext__kicker { font-style: italic; }
.cadtext__title { margin-bottom: 0; }
.cadtext__body { display: grid; gap: 14px; max-width: 64ch; }
.cadtext__body p { margin: 0; }
.cadtext__body .act__points { margin: 0 0 6px; }
.cadtext + .cadlive { margin-top: clamp(32px, 5vw, 56px); }
@media (max-width: 900px) { .cadtext { grid-template-columns: 1fr; gap: 16px; } }

/* Wortmarke: kleines, unaufdringliches ® */
.reg { font-size: 0.5em; font-weight: 400; vertical-align: super; line-height: 0; margin-left: 0.08em; letter-spacing: 0; }
.cadlive__grid {
  position: absolute; inset: 0;
  background:
    linear-gradient(rgba(155, 11, 30, 0.12) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(155, 11, 30, 0.12) 1px, transparent 1px) 0 0 / 40px 40px;
}
.cadlive__dim {
  position: absolute; font-size: 0.72rem; font-weight: 600; color: var(--brand); background: var(--paper); padding: 0 6px;
}
.cadlive__dim--h { top: 8%; left: 30%; }
.cadlive__dim--h::before { content: ""; position: absolute; top: 50%; right: 100%; width: 25vw; max-width: 260px; border-top: 1px solid var(--brand); }
.cadlive__dim--v { top: 40%; left: 6%; writing-mode: vertical-rl; }
.cadlive__handle {
  position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; translate: -1px 0; background: var(--light);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4); pointer-events: none;
}
.cadlive__handle span {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; background: var(--brand); color: var(--light); font-size: 1.2rem; font-weight: 700;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.cadlive:has(.cadlive__range:focus-visible) .cadlive__handle span { outline: 3px solid var(--light); outline-offset: 3px; }
.cadlive__tag {
  position: absolute; top: 18px; font-size: clamp(1rem, 2.4vw, 1.6rem); font-weight: 900; letter-spacing: 0.04em;
  padding: 4px 14px; border-radius: 999px; pointer-events: none;
}
.cadlive__tag--cad { left: 18px; color: var(--brand); background: var(--paper); box-shadow: inset 0 0 0 2px var(--brand); }
.cadlive__tag--live { right: 18px; color: var(--light); background: var(--brand); }
.cadlive__range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 100%; margin: 0; background: transparent;
  cursor: ew-resize; opacity: 0; position: relative; z-index: 3;
}
@media (max-width: 560px) { .cadlive__view { aspect-ratio: 4 / 3; } }

/* Prozess-Schritte */
.steps {
  list-style: none; margin: 0; padding: 0; position: relative;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px;
}
.step { position: relative; display: flex; flex-direction: column; background: var(--paper); border-radius: var(--radius); overflow: hidden; }
.step img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.6s ease; }
.step:hover img { transform: scale(1.05); }
.step__body { position: relative; padding: 22px 20px 26px; }
.step__no {
  position: absolute; top: -26px; left: 20px; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; background: var(--brand); color: var(--light);
  font-weight: 700; font-size: 0.95rem; border: 4px solid var(--paper);
}
.step h3 { font-size: 1.2rem; font-weight: 700; color: var(--brand); margin: 18px 0 10px; }
.step p { font-size: 0.92rem; line-height: 1.6; margin: 0; }
@media (max-width: 1000px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* ==========================================================================
   ? – Kontakt
   ========================================================================== */
.ask { position: relative; overflow: hidden; isolation: isolate; background: var(--ink); color: rgba(255, 255, 255, 0.82); padding-block: clamp(80px, 11vw, 150px); }
.ask__q {
  position: absolute; z-index: -1; right: 2vw; top: 50%; translate: 0 -50%;
  font-size: clamp(20rem, 46vw, 40rem); font-weight: 900; line-height: 1;
  padding: 0.12em 0.08em; /* Hintergrund muss die ganze Glyphe abdecken, sonst endet das Licht vor der Aussenlinie */
  color: transparent; -webkit-text-stroke: 2px rgba(155, 11, 30, 0.9);
  background: conic-gradient(from var(--qa, 0deg) at 50% 30%, transparent 0deg, rgba(155, 11, 30, 0.85) 20deg, transparent 40deg, transparent 360deg);
  -webkit-background-clip: text; background-clip: text;
  animation: qsweep 8s linear infinite;
}
/* Mobil: Fragezeichen steht neben der Adresse statt hinter dem Formular */
.ask__contact { margin-top: 28px; }
@media (max-width: 900px) {
  .ask__contact { position: relative; }
  .ask__q {
    right: -6vw; top: 50%; translate: 0 -50%; z-index: -1;
    font-size: min(22rem, 70vw);
  }
}
@property --qa { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes qsweep { to { --qa: 360deg; } }
.ask__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); }
.ask__title { color: var(--light); font-size: clamp(2.4rem, 5.6vw, 4.4rem); font-weight: 800; margin-bottom: 22px; }
.ask__address { font-style: normal; line-height: 1.7; min-width: 0; }
.ask__address strong { color: var(--light); font-weight: 600; }
.ask__address a { color: var(--light); text-decoration-color: var(--brand); text-underline-offset: 4px; }

.form {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1);
  padding: clamp(22px, 3vw, 36px); border-radius: var(--radius); backdrop-filter: blur(6px);
}
.form__row { display: grid; gap: 6px; min-width: 0; }
.form__row--full { grid-column: 1 / -1; }
.form label { font-size: 0.8rem; font-weight: 500; color: rgba(255, 255, 255, 0.65); }
.form input, .form textarea {
  width: 100%; font: 400 1rem/1.4 var(--font); color: var(--light);
  background: transparent; border: 0; border-bottom: 1.5px solid rgba(255, 255, 255, 0.25);
  padding: 8px 0; border-radius: 0; transition: border-color 0.2s;
}
.form textarea { resize: vertical; }
.form input:focus, .form textarea:focus { outline: none; border-bottom-color: #ff2a46; }
.form__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 6px; }
.form__status { margin: 0; font-size: 0.88rem; color: var(--light); }
@media (max-width: 900px) { .ask__inner { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .form { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.foot { padding-block: 32px; border-top: 1px solid var(--line); font-size: 0.86rem; color: var(--muted); }
.foot__inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.foot__inner p { margin: 0; }
.foot nav { display: flex; gap: 20px; align-items: baseline; }
.foot__label { font-weight: 600; color: var(--ink); }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--brand); }

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .ticker__track { animation: none; flex-wrap: wrap; }
  .mini__beam { animation: none; transform: rotate(-12deg); }
}

/* ---------- Kirby: Formular-Honeypot und Textseiten ---------- */
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form { position: relative; }
.page { padding-block: clamp(56px, 8vw, 110px); }
.page__inner { max-width: calc(760px + 32px); }
.page__title { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; color: var(--brand); margin-bottom: 28px; }
.page__text h2, .page__text h3 { margin: 1.6em 0 0.6em; color: var(--ink); }
.page__text a { color: var(--brand); }
.coast__copy p:last-child, .intro__text p:last-child { margin-bottom: 0; }

/* ---------- Fachbereiche (Titel + Laufband nach dem Intro) ---------- */
.depts { padding-top: clamp(8px, 2vw, 24px); }
.depts__head { margin-bottom: 24px; }
.depts__title { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; color: var(--brand); margin-bottom: 10px; }
.depts__head p { max-width: 70ch; margin: 0; }
.ask__subtitle { color: var(--light); font-size: 1.05rem; font-weight: 600; margin: 0 0 12px; }


/* ---------- Bildnachweis im Impressum ---------- */
.page__credits { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }