@charset "UTF-8";
/* ============================================================
   2AM EVENTS — Designsystem "Nachtachse"
   Ein Abend von 20:00 bis 04:00.
   Kein Framework, keine externe Anfrage, keine Bibliothek.
   ============================================================ */

/* ---------- 1. Marken-Token ---------- */
:root{
  /* Farbe. Genau drei. Mehr gibt es nicht. */
  --ink:#414856;            /* Soft Graphite Blue: die tragende Fläche */
  --ink-2:#343C4A;          /* dunklere Struktur, Bild- und Abschlussflächen */
  --ink-3:#4C5564;          /* helle Schieferfläche für Inhalt und Eingaben */
  --bone:#F4F0E8;           /* warmes Elfenbein – ausschließlich für Inhalt */
  --beam:#5E7FD1;           /* gedämpftes Kobalt. Nur Aktion, Fokus, Status. */

  --bone-70:rgba(244,240,232,.76);
  --bone-54:rgba(244,240,232,.56);
  --bone-38:rgba(244,240,232,.40);
  --muted:var(--bone-54);
  --rule:rgba(244,240,232,.18);
  --rule-soft:rgba(244,240,232,.10);
  --surface-deep:rgba(32,39,51,.76);

  /* Glas. Nach Apples Materiallogik: eine schwebende Schicht,
     Inhalt scrollt darunter durch. Nie Glas auf Glas stapeln. */
  --glass-bg:rgba(43,51,64,.72);
  --glass-bg-strong:rgba(37,45,58,.90);
  --glass-blur:blur(22px) saturate(165%);
  --glass-blur-soft:blur(14px) saturate(150%);
  --glass-edge:rgba(244,240,232,.18);
  --glass-lip:inset 0 1px 0 rgba(244,240,232,.24);   /* Lichtkante oben */
  --glass-floor:inset 0 -1px 0 rgba(0,0,0,.35);      /* Schattenkante unten */
  --glass-cast:0 18px 48px rgba(0,0,0,.42), 0 2px 8px rgba(0,0,0,.24);

  /* Maß */
  --gut:clamp(1.25rem,4vw,4rem);
  --wrap:76rem;
  --wrap-text:44rem;
  --hdr-h:4.75rem;
  --subnav-h:2.75rem;
  --chrome:calc(var(--hdr-h) + var(--subnav-h));

  /* Bewegung. Kurven aus der Motion-Disziplin, nicht die schwachen CSS-Vorgaben. */
  --e-out:cubic-bezier(.23,1,.32,1);
  --e-inout:cubic-bezier(.77,0,.175,1);
  --t-tap:120ms;
  --t-ui:200ms;
  --t-panel:320ms;

  /* Laufende Scrollwerte, von JavaScript gesetzt */
  --p:0;
  --hour:0;

  color-scheme:dark;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",
    "Segoe UI",Roboto,Arial,sans-serif;
  font-synthesis:none;
}

/* ---------- 2. Grundlagen ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{background:var(--ink);scroll-behavior:smooth;
  scroll-padding-block-start:calc(var(--hdr-h) + 1rem)}
body{
  margin:0;background:var(--ink);color:var(--bone);
  font-size:clamp(1rem,.97rem + .15vw,1.06rem);line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img,video,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
h1,h2,h3,h4{margin:0;font-weight:660;letter-spacing:-.035em;line-height:1.06;
  /* Die enge Laufweite bleibt markant, ohne Leerzeichen zu verschlucken. */
  word-spacing:.14em;text-wrap:balance}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:var(--beam);color:#fff}

/* Fokus. Zweifarbig, damit er auf Foto wie auf Fläche sichtbar bleibt. */
:focus-visible{
  outline:2px solid #fff;outline-offset:3px;
  box-shadow:0 0 0 5px rgba(35,91,255,.85);border-radius:3px;
}
@media (forced-colors:active){
  :focus-visible{outline:3px solid Highlight;box-shadow:none}
}

/* Sprungmarke */
.skip{
  position:fixed;z-index:2000;inset-block-start:.6rem;inset-inline-start:.6rem;
  padding:.8rem 1.1rem;background:var(--bone);color:var(--ink);font-weight:600;
  transform:translateY(-180%);
}
.skip:focus{transform:none}

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

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wrap-text{max-width:var(--wrap-text)}

/* ---------- 3. Typografie-Skala ---------- */
/* Große Schrift bekommt negativen Buchstabenabstand, kleine positiven.
   Ein fester Wert wäre irgendwo immer falsch. */
.t-display{
  font-size:clamp(2.9rem,10.5vw,8.5rem);font-weight:680;
  letter-spacing:-.075em;line-height:.87;text-transform:uppercase;
}
.t-h1{font-size:clamp(2.1rem,5.6vw,4.3rem);letter-spacing:-.045em;line-height:1.02}
.t-h2{font-size:clamp(1.7rem,4vw,3rem);letter-spacing:-.04em;line-height:1.06}
.t-h3{font-size:clamp(1.1rem,1.8vw,1.4rem);letter-spacing:-.02em;line-height:1.2}
.t-lead{font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.5;color:var(--bone-70)}
.t-body{color:var(--bone-70)}
.t-small{font-size:.88rem;color:var(--bone-54)}
.t-label{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bone-54)}
.t-num{font-variant-numeric:tabular-nums;letter-spacing:.02em}

/* ---------- 4. Glas-Ebenen ---------- */
/* Eine Glasfläche liegt immer über Inhalt, nie über einer anderen Glasfläche. */
.glass{
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-edge);
  box-shadow:var(--glass-lip),var(--glass-floor),var(--glass-cast);
}
.glass-soft{
  background:rgba(10,16,32,.42);
  -webkit-backdrop-filter:var(--glass-blur-soft);
  backdrop-filter:var(--glass-blur-soft);
  border:1px solid var(--rule);
  box-shadow:var(--glass-lip);
}

/* Ohne Glas-Unterstützung oder bei reduzierter Transparenz: feste Fläche.
   Der Text bleibt in jedem Fall lesbar. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass,.glass-soft{background:var(--glass-bg-strong)}
}
@media (prefers-reduced-transparency:reduce){
  .glass,.glass-soft{
    background:var(--ink-2);
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
}
@media (prefers-contrast:more){
  .glass,.glass-soft{background:var(--ink);border-color:var(--bone)}
}

/* ---------- 5. Kopfzeile mit zwei Spuren ---------- */
.hdr{
  position:sticky;z-index:900;inset-block-start:0;
  min-height:var(--hdr-h);display:flex;align-items:center;gap:1rem;
  padding:.7rem var(--gut);
  background:transparent;border-bottom:1px solid transparent;
  transition:background-color var(--t-panel) ease,
             backdrop-filter var(--t-panel) ease,
             border-color var(--t-panel) ease;
}
.hdr.is-stuck{
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border-bottom-color:var(--rule);
  box-shadow:var(--glass-lip);
}
@media (prefers-reduced-transparency:reduce){
  .hdr.is-stuck{background:var(--ink-2);backdrop-filter:none;-webkit-backdrop-filter:none}
}
.brand{font-size:1.2rem;font-weight:700;letter-spacing:-.07em;line-height:1;
  padding:.5rem .25rem;margin-inline-end:auto}

/* Der Menueschalter ist auf breiten Schirmen verborgen und wird mobil
   als klarer, mindestens 44px grosser Hamburger sichtbar. */
.nav-toggle{
  display:none;position:relative;z-index:1;flex:none;
  width:2.75rem;height:2.75rem;padding:0;
  align-items:center;justify-content:center;border-radius:999px;
  color:var(--bone);background:rgba(10,16,32,.5);
  border:1px solid var(--glass-edge);box-shadow:var(--glass-lip);
}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
  display:block;width:1.1rem;height:1.5px;background:currentColor;
  transition:transform var(--t-ui) var(--e-out),opacity var(--t-ui) ease-out;
}
.nav-toggle span{position:relative}
.nav-toggle span::before,.nav-toggle span::after{
  content:"";position:absolute;inset-inline-start:0}
.nav-toggle span::before{transform:translateY(-.32rem)}
.nav-toggle span::after{transform:translateY(.32rem)}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{transform:rotate(-45deg)}

/* Der Spurenschalter. Die eine Stelle, an der beide Publika sichtbar sind. */
.tracks{
  position:relative;display:flex;padding:3px;border-radius:999px;
  background:rgba(10,16,32,.5);
  -webkit-backdrop-filter:var(--glass-blur-soft);
  backdrop-filter:var(--glass-blur-soft);
  border:1px solid var(--glass-edge);
  box-shadow:var(--glass-lip);
}
.tracks a{
  position:relative;z-index:1;display:flex;align-items:center;
  min-height:2.75rem;padding:0 1rem;border-radius:999px;
  font-size:.82rem;color:var(--bone-70);
  transition:color var(--t-ui) ease-out;
  white-space:nowrap;
}
.tracks a:hover{color:var(--bone)}
.tracks a[aria-current]{color:var(--ink);font-weight:600}
.tracks-pill{
  position:absolute;z-index:0;inset-block:3px;inset-inline-start:0;border-radius:999px;
  background:var(--bone);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 2px 10px rgba(0,0,0,.18);
  transition:transform 360ms cubic-bezier(.22,1,.36,1),
             width 360ms cubic-bezier(.22,1,.36,1),
             box-shadow 180ms ease-out;
  will-change:transform,width;
}
.tracks:not([data-ready]) .tracks-pill{transition:none}
.tracks:not(:has(a[aria-current])) .tracks-pill{opacity:0}
.tracks[data-switching] .tracks-pill{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.78),0 6px 18px rgba(0,0,0,.24)}
.tracks.is-switching a[aria-current]{color:var(--bone-70)}
.tracks.is-switching a[data-switch-target]{color:var(--ink)}

@media (prefers-reduced-motion:reduce){
  .tracks-pill{transition:none}
}

/* ---------- Bereichsmenue ----------
   Zwei aufklappbare Kategorien statt einer flachen Linkliste.
   Umgesetzt als Disclosure-Muster mit Schaltflaeche und aria-expanded,
   nicht als ARIA-Menue: Website-Navigation ist kein Anwendungsmenue. */
.subnav{
  position:sticky;z-index:880;inset-block-start:var(--hdr-h);
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur-soft);
  backdrop-filter:var(--glass-blur-soft);
  border-bottom:1px solid var(--rule-soft);
}
.menu-in{display:flex;align-items:center;gap:.5rem;
  max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.menu-group{position:relative}

.menu-trigger{
  display:flex;align-items:center;gap:.45rem;
  min-height:2.75rem;padding-inline:.75rem;border-radius:.5rem;
  font-size:.88rem;color:var(--bone-54);white-space:nowrap;
  transition:color var(--t-ui) ease-out,background-color var(--t-ui) ease-out;
}
.menu-trigger:hover{color:var(--bone);background:rgba(246,240,231,.06)}
.menu-trigger[aria-expanded="true"]{color:var(--bone)}
.menu-trigger .chev{transition:transform var(--t-ui) var(--e-out)}
.menu-trigger[aria-expanded="true"] .chev{transform:rotate(180deg)}
/* Kennzeichnet die Kategorie, in der man sich gerade befindet */
.menu-group[data-here] .menu-trigger{color:var(--bone)}
.menu-group[data-here] .menu-trigger::after{
  content:"";position:absolute;inset-inline:.75rem;inset-block-end:0;height:2px;
  background:var(--beam)}

.menu-panel{
  position:absolute;z-index:10;inset-block-start:calc(100% + .35rem);
  inset-inline-start:0;min-width:13rem;
  display:flex;flex-direction:column;padding:.4rem;border-radius:.75rem;
  background:var(--glass-bg-strong);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-edge);
  box-shadow:var(--glass-lip),var(--glass-cast);
}
.menu-panel a{
  display:flex;align-items:center;min-height:2.75rem;padding-inline:.75rem;
  border-radius:.45rem;font-size:.92rem;color:var(--bone-70);white-space:nowrap;
  transition:color var(--t-ui) ease-out,background-color var(--t-ui) ease-out;
}
.menu-panel a:hover{color:var(--bone);background:rgba(246,240,231,.08)}
.menu-panel a[aria-current]{color:var(--bone);background:rgba(35,91,255,.18)}
.menu-foot{display:none}

@media (prefers-reduced-transparency:reduce){
  .menu-panel{background:var(--ink-2);backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* ---------- Mobil: Vollbildmenue ---------- */
@media (max-width:46rem){
  .subnav{
    position:fixed;z-index:850;inset:0;
    background:var(--ink);backdrop-filter:none;-webkit-backdrop-filter:none;
    border:0;display:flex;overflow-y:auto;overscroll-behavior:contain;
  }
  .menu-in{flex:1;flex-direction:column;align-items:stretch;gap:.5rem;
    min-height:0;padding-block:calc(var(--hdr-h) + 1rem) 1.25rem}
  .menu-group{position:static}

  .menu-trigger{width:100%;justify-content:space-between;
    min-height:3.6rem;padding-inline:0;border-radius:0;
    font-size:clamp(1.7rem,7.5vw,2.4rem);letter-spacing:-.035em;
    color:var(--bone);border-bottom:1px solid var(--rule-soft)}
  .menu-trigger:hover{background:none}
  .menu-trigger .chev{width:20px;height:20px}
  .menu-group[data-here] .menu-trigger{color:var(--beam)}
  .menu-group[data-here] .menu-trigger::after{display:none}

  .menu-panel{position:static;min-width:0;padding:.25rem 0 .75rem;
    background:none;backdrop-filter:none;-webkit-backdrop-filter:none;
    border:0;box-shadow:none}
  .menu-panel a{min-height:3rem;padding-inline:0;font-size:1.15rem;
    color:var(--bone-70)}
  .menu-panel a[aria-current]{color:var(--beam);background:none}

  .menu-foot{display:block;margin-block-start:1rem;padding-block-start:1.25rem;
    border-top:1px solid var(--rule-soft)}
  .menu-foot .btn{min-height:3.4rem;font-size:1rem}
}

/* ---------- 6. Knöpfe ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:2.9rem;padding:0 1.35rem;border-radius:999px;
  font-size:.92rem;font-weight:560;letter-spacing:-.005em;white-space:nowrap;
  border:1px solid transparent;
  transition:background-color var(--t-ui) ease-out,color var(--t-ui) ease-out,
             border-color var(--t-ui) ease-out,transform var(--t-tap) ease-out;
}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--beam);color:#fff;border-color:var(--beam);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 22px rgba(35,91,255,.28)}
.btn-primary:hover{background:#3D6DFF;border-color:#3D6DFF}
.btn-light{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.btn-light:hover{background:#fff;border-color:#fff}
.btn-glass{
  background:rgba(10,16,32,.45);color:var(--bone);border-color:var(--glass-edge);
  -webkit-backdrop-filter:var(--glass-blur-soft);
  backdrop-filter:var(--glass-blur-soft);
  box-shadow:var(--glass-lip);
}
.btn-glass:hover{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.btn-quiet{color:var(--bone-70);border-color:var(--rule)}
.btn-quiet:hover{color:var(--bone);border-color:var(--bone)}
.btn-full{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}

/* Textlink mit Unterstrich, der aus der Richtung der Bewegung wächst */
.tlink{position:relative;display:inline-flex;align-items:center;gap:.45rem;
  padding-block:.2rem}
.tlink::after{content:"";position:absolute;inset-inline:0;inset-block-end:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform 260ms var(--e-out)}
.tlink:hover::after{transform:scaleX(1);transform-origin:left}

/* ---------- 7. Abschnitte ---------- */
.sec{padding-block:clamp(3.75rem,8vh,6.5rem)}
.sec-alt{background:var(--ink-2)}
.sec-line{border-top:1px solid var(--rule-soft)}
.sec-head{display:grid;gap:1.1rem;margin-block-end:clamp(2.5rem,6vh,4.5rem);
  max-width:34ch}

/* ---------- 8. Formulare ---------- */
.field{display:grid;gap:.45rem;margin-block-end:1.15rem}
.field label{font-size:.85rem;color:var(--bone-70)}
.field .req{color:var(--bone-38)}
.field input,.field textarea,.field select{
  width:100%;min-height:3rem;padding:.7rem .9rem;
  background:rgba(10,16,32,.55);color:var(--bone);
  border:1px solid var(--rule);border-radius:.6rem;
  transition:border-color var(--t-ui) ease-out,background-color var(--t-ui) ease-out;
}
.field textarea{min-height:6rem;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--bone-38)}
.field input:hover,.field textarea:hover{border-color:var(--bone-38)}
.field input:focus,.field textarea:focus{border-color:var(--beam);background:rgba(10,16,32,.8)}
.field[data-state="error"] input,.field[data-state="error"] textarea{border-color:#FF6B6B}
.field-err{display:flex;align-items:flex-start;gap:.4rem;font-size:.84rem;color:#FF9B9B}
.field-err svg{flex:none;margin-block-start:.15rem}
.field-row{display:grid;gap:1.15rem}
@media (min-width:40rem){.field-row-2{grid-template-columns:1fr 1fr}}
.form-note{font-size:.82rem;color:var(--bone-54)}
.hp{position:absolute;left:-9999px}

/* Fehlerübersicht nach fehlgeschlagenem Absenden */
.err-summary{padding:1.1rem 1.25rem;border:1px solid #FF6B6B;border-radius:.7rem;
  background:rgba(255,107,107,.08);margin-block-end:1.5rem}
.err-summary h2{font-size:1rem;margin-block-end:.5rem}
.err-summary a{text-decoration:underline;text-underline-offset:.2em}

/* ---------- 10. Fußzeile ---------- */
.foot{padding-block:3.5rem 2.5rem;border-top:1px solid var(--rule-soft);
  background:var(--ink)}
.foot-grid{display:grid;gap:2.5rem}
@media (min-width:52rem){.foot-grid{grid-template-columns:1.2fr 1fr 1fr}}
.foot h3{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--bone-38);margin-block-end:.9rem}
.foot li{margin-block-end:.5rem}
.foot a{color:var(--bone-70)}
.foot a:hover{color:var(--bone)}
.foot-legal{display:flex;flex-wrap:wrap;gap:1.25rem;margin-block-start:2.5rem;
  padding-block-start:1.5rem;border-top:1px solid var(--rule-soft);
  font-size:.82rem;color:var(--bone-38)}
/* Links im Fließtext bleiben ohne Farbe erkennbar */
.foot-legal a,.prose a{text-decoration:underline;
  text-decoration-thickness:max(1px,.06em);text-underline-offset:.22em}

/* ---------- 11. Fließtext für Rechtsseiten ---------- */
.prose{max-width:var(--wrap-text)}
.prose h2{font-size:1.15rem;letter-spacing:-.02em;margin-block:2.2rem .6rem}
.prose h2:first-of-type{margin-block-start:0}
.prose p,.prose li{color:var(--bone-70);margin-block-end:.85rem}
.prose ul{list-style:disc;padding-inline-start:1.2rem}
.prose li{margin-block-end:.4rem}

/* ---------- 12. Mobil ---------- */
@media (max-width:60rem){
  .subnav{gap:1.1rem}
}
@media (max-width:46rem){
  .nav-toggle{display:flex}
  .tracks{order:3;width:100%;margin-block-start:.6rem}
  .tracks a{flex:1;justify-content:center}
  .hdr{flex-wrap:wrap}
  .hdr .btn-hdr{display:none}
  .subnav{inset-block-start:calc(var(--hdr-h) + 3rem)}
}

/* ---------- 13. Bewegung reduzieren ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ============================================================
   14. Konfigurator
   Eine Frage pro Ansicht. Große, ruhige Zeilen statt Kacheln.
   Die Hauptaktion sitzt fest am unteren Rand der Karte.
   ============================================================ */
.cfg{
  position:relative;display:grid;
  border:1px solid var(--rule);border-radius:1.1rem;overflow:clip;
  background:rgba(10,16,32,.42);
  -webkit-backdrop-filter:var(--glass-blur-soft);
  backdrop-filter:var(--glass-blur-soft);
  box-shadow:var(--glass-lip),0 24px 60px rgba(0,0,0,.35);
  min-height:min(78svh,44rem);
  grid-template-rows:auto auto 1fr auto;
}
@media (prefers-reduced-transparency:reduce){
  .cfg{background:var(--ink-2);backdrop-filter:none;-webkit-backdrop-filter:none}
}

.cfg-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.1rem clamp(1.1rem,3vw,2.2rem) .9rem}
.cfg-step{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bone-38);font-variant-numeric:tabular-nums}
.cfg-name{font-size:.82rem;color:var(--bone-70)}
.cfg-bar{height:2px;background:var(--rule-soft)}
.cfg-bar span{display:block;height:100%;background:var(--beam);
  transform-origin:left;transform:scaleX(0);
  transition:transform 420ms var(--e-out)}

.cfg-body{padding:clamp(1.4rem,4vw,2.6rem) clamp(1.1rem,3vw,2.2rem) 1rem;
  align-self:start}
.cfg-q{font-size:clamp(1.5rem,3.6vw,2.5rem);letter-spacing:-.035em;
  line-height:1.1;margin-block-end:.4rem;max-width:22ch}
.cfg-hint{margin-block-end:1.4rem}

/* Die Optionszeilen. Kein Karton, nur Haarlinien und Raum. */
.cfg-grid{display:grid;margin-block-start:1.6rem;
  border-top:1px solid var(--rule-soft)}
.cfg-opt{
  display:flex;align-items:center;gap:1rem;width:100%;
  min-height:4.15rem;padding:.9rem .25rem;text-align:left;
  border-bottom:1px solid var(--rule-soft);
  color:var(--bone);
  transition:color var(--t-ui) ease-out,transform var(--t-ui) var(--e-out);
}
.cfg-opt-label{font-size:clamp(1.15rem,2.4vw,1.6rem);letter-spacing:-.02em;
  line-height:1.15;flex:1}
.cfg-opt-note{flex:none;color:var(--bone-38);text-align:right}
/* Der Haken ist immer da, nur unsichtbar. Nichts springt beim Auswählen. */
.cfg-opt::after{
  content:"";flex:none;width:1.4rem;height:1.4rem;border-radius:999px;
  border:1px solid var(--rule);
  background:no-repeat center/.8rem .8rem;
  transition:background-color var(--t-ui) ease-out,border-color var(--t-ui) ease-out;
}
@media (hover:hover) and (pointer:fine){
  .cfg-opt:hover{transform:translateX(.5rem)}
  .cfg-opt:hover::after{border-color:var(--bone-70)}
}
.cfg-opt:active{transform:scale(.995)}
.cfg-opt[aria-pressed="true"]{color:#fff}
.cfg-opt[aria-pressed="true"]::after{
  background-color:var(--beam);border-color:var(--beam);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.cfg-opt[aria-pressed="true"] .cfg-opt-note{color:var(--bone-54)}

/* Fußleiste der Karte. Klebt unten, damit die Aktion immer erreichbar ist. */
/* Die Fußleiste ist die letzte Zeile der Karte, nicht ein schwebender
   Balken darueber. Sonst verdeckt sie die letzten Optionen. */
.cfg-nav{
  display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;
  padding:1rem clamp(1.1rem,3vw,2.2rem) 1.15rem;
  background:rgba(7,11,24,.5);
  border-top:1px solid var(--rule-soft);
}
.cfg-nav .btn-primary{flex:1}
@media (min-width:40rem){.cfg-nav .btn-primary{flex:0 0 auto;min-width:13rem}}

/* Ergebnis */
.cfg-result{grid-row:1 / -1;padding:clamp(1.4rem,4vw,2.6rem) clamp(1.1rem,3vw,2.2rem) 2rem}
.res-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1rem;
  padding-block-end:1.2rem;border-bottom:1px solid var(--rule)}
.res-name{font-size:clamp(1.6rem,4vw,2.6rem);letter-spacing:-.04em}
.res-sub{color:var(--bone-54)}
.res-price{margin-inline-start:auto;font-size:clamp(1.8rem,4.4vw,2.8rem);
  font-weight:660;letter-spacing:-.04em}
.res-cols{display:grid;gap:2rem;margin-block:1.6rem}
@media (min-width:44rem){.res-cols{grid-template-columns:1fr 1fr;gap:3rem}}
.res-cols h3{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--bone-38);margin-block-end:.8rem}
.res-list li{padding-block:.5rem;border-top:1px solid var(--rule-soft);
  color:var(--bone-70)}
.res-list li:first-child{border-top:0}
.res-sum li{display:flex;justify-content:space-between;gap:1.5rem;
  padding-block:.5rem;border-top:1px solid var(--rule-soft);font-size:.9rem}
.res-sum li span:first-child{color:var(--bone-38);flex:none}
.res-sum li span:last-child{text-align:right;color:var(--bone-70)}
.res-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-block-start:1.8rem}

/* ============================================================
   15. Pakete
   ============================================================ */
/* Vertraegt jede Anzahl Pakete. Die Trennlinien setzen sich nur dort,
   wo tatsaechlich eine Nachbarspalte steht. */
.pk-grid{display:grid;gap:0;border-top:1px solid var(--rule);
  grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr))}
.pk{display:flex;flex-direction:column;
  padding:2rem clamp(1.1rem,2.5vw,1.9rem) 2.2rem;
  border-bottom:1px solid var(--rule);border-left:1px solid var(--rule)}
.pk:first-child{border-left:0}
@media (max-width:52rem){.pk{border-left:0}}
.pk-list{margin-block-start:1.5rem}
.pk-foot{margin-block-start:auto;padding-block-start:1.5rem}
.pk-sub{color:var(--bone-70);margin-block-start:.2rem}
.pk-scope{margin-block:.9rem 1.6rem}
.pk-price{font-size:clamp(2rem,3.6vw,2.8rem);font-weight:660;letter-spacing:-.045em}
.pk-note{margin-block-start:.15rem}
.pk-list{margin-block-start:1.5rem}
.pk-list li{padding-block:.55rem;border-top:1px solid var(--rule-soft);
  color:var(--bone-70);font-size:.92rem}

/* ============================================================
   16. Bühne, Bildband und Choreografie
   ============================================================ */
.stage{height:300vh}
@media (max-width:60rem){.stage{height:230vh}}
/* Die Buehne zieht die Hoehe der klebenden Leisten ab, sonst rutscht
   der Claim unter die Falz. */
.pin{position:sticky;inset-block-start:var(--chrome);
  height:calc(100svh - var(--chrome));overflow:hidden;
  isolation:isolate;display:grid;place-items:center}

.band{position:absolute;z-index:2;inset-inline:0;inset-block-start:50%;
  height:min(86svh,calc(100svh - var(--chrome)));translate:0 -50%;
  /* Das Bild wird leicht vergroessert. Ohne eigene Beschneidung ragt es
     seitlich heraus und erzeugt horizontales Scrollen. clip-path allein
     genuegt dafuer nicht, es beeinflusst den Scrollbereich nicht. */
  overflow:clip;
  clip-path:inset(calc((1 - var(--p)) * 34%) 0 calc((1 - var(--p)) * 34%) 0);
  will-change:clip-path}
.band img{width:100%;height:100%;object-fit:cover;object-position:50% 46%;
  filter:saturate(.88) contrast(1.07) brightness(calc(.62 + var(--p) * .3));
  transform:scale(calc(1.14 - var(--p) * .12));
  will-change:transform}
.band::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,11,24,.72) 0%,transparent 26%,
    transparent 70%,rgba(7,11,24,.8) 100%)}

/* Kein z-index auf .claim, sonst entsteht ein eigener Stapelkontext
   und die Wörter können das Bildband nicht mehr überlagern. */
.claim{position:absolute;inset:0;margin:0;display:grid;align-content:center;
  justify-items:center;text-align:center;pointer-events:none}
.claim span{display:block;position:relative;will-change:transform}
.claim .w1{z-index:1;transform:translateY(calc(var(--p) * -13vh))}
.claim .w2{z-index:4;color:#fff;text-shadow:0 .04em .35em rgba(7,11,24,.55)}
.claim .w3{z-index:1;transform:translateY(calc(var(--p) * 13vh))}
/* Der Textblock unter der Buehne. Auf dem Desktop schwebt er am
   unteren Rand der Buehne, mobil steht er im normalen Fluss darunter. */
.stage-foot{position:absolute;z-index:5;inset-inline:var(--gut);inset-block-end:2rem;
  display:flex;flex-wrap:wrap;gap:1.25rem;align-items:flex-end;
  justify-content:space-between;
  opacity:calc(.55 + var(--p) * .45)}
.stage-foot p{max-width:34ch;color:var(--bone-70)}
.stage-foot strong{color:var(--bone);font-weight:600}

/* Mobil linear statt ueberlagert.
   Der Text-vor-und-hinter-Bild-Moment ist eine Desktop-Geste. Auf 390px
   Breite kollidieren die Ebenen zwangslaeufig, deshalb stapelt die Buehne
   dort sauber: Claim, Bild, Text. Das Bild oeffnet sich beim Scrollen
   weiterhin. Dieser Block MUSS nach den Grundregeln stehen. */
@media (max-width:60rem){
  .stage{height:190vh}
  .pin{display:block;height:auto;min-height:0;
    padding-block:2rem 1.5rem;overflow:visible}
  .claim{position:static;padding-inline:var(--gut);text-align:left;
    font-size:clamp(3rem,14.5vw,5rem);letter-spacing:-.06em}
  .claim .w1,.claim .w2,.claim .w3{transform:none}
  .claim .w2{color:var(--bone);text-shadow:none}
  .band{position:static;translate:0;height:34svh;margin-block-start:1.6rem;
    clip-path:inset(calc((1 - var(--p)) * 22%) 0 calc((1 - var(--p)) * 22%) 0)}
  .stage-foot{position:static;inset:auto;opacity:1;margin-block-start:1.8rem;
    padding-inline:var(--gut);gap:1rem;
    flex-direction:column;align-items:flex-start}
  .stage-foot p{font-size:.94rem;max-width:none}
}

/* ============================================================
   17. Scroll-Sweep
   Inhalte werden beim ersten Erreichen nicht nur eingeblendet, sondern
   schneiden sich wie ein Lichtzug diagonal in die Bühne. Die Bewegung ist
   eine einmalige Orientierung im Lesefluss, keine Dauerdekoration.
   ============================================================ */
.js [data-reveal]{opacity:0;transform:translate3d(-.9rem,.8rem,0) rotate(-.35deg);
  transition:opacity 240ms ease-out,transform 620ms var(--e-out);will-change:transform,opacity}
.js [data-reveal]:not(img){
  clip-path:polygon(0 0,0 0,0 100%,0 100%);
  transition:clip-path 660ms var(--e-out),opacity 240ms ease-out,transform 620ms var(--e-out);
  will-change:clip-path,transform,opacity;
}
.js [data-reveal].is-in{opacity:1;transform:none}
.js [data-reveal]:not(img).is-in{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
[data-reveal][data-d="1"]{transition-delay:60ms}
[data-reveal][data-d="2"]{transition-delay:120ms}
[data-reveal][data-d="3"]{transition-delay:180ms}
@media (prefers-reduced-motion:reduce){
  .js [data-reveal],.js [data-reveal]:not(img){opacity:1;transform:none;clip-path:none;transition:none}
}

/* ============================================================
   18. Stundenliste, Atmosphären, Countdown
   ============================================================ */
.hours li{display:grid;grid-template-columns:5.5rem 1fr;gap:1.5rem;
  align-items:baseline;padding-block:1.15rem;border-top:1px solid var(--rule-soft)}
.hours time{font-variant-numeric:tabular-nums;font-size:.82rem;letter-spacing:.12em;
  color:var(--bone-38)}
.hours p{margin-block-start:.25rem;color:var(--bone-70);max-width:46ch}
@media (max-width:40rem){.hours li{grid-template-columns:4.2rem 1fr;gap:1rem}}

.atm-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.atm{margin:0;position:relative;overflow:hidden;border-radius:.5rem;
  aspect-ratio:4/5;background:var(--ink-2)}
.atm-lead{grid-column:span 2;aspect-ratio:16/10}
@media (max-width:40rem){.atm-lead{grid-column:span 1;aspect-ratio:4/5}}
.atm img{width:100%;height:100%;object-fit:cover;
  transition:transform 700ms var(--e-out)}
@media (hover:hover) and (pointer:fine){.atm:hover img{transform:scale(1.03)}}

.cd{display:flex;gap:clamp(1rem,4vw,2.75rem)}
.cd div{display:grid;gap:.3rem}
.cd strong{font-size:clamp(2.2rem,6vw,4.2rem);font-weight:660;letter-spacing:-.05em;
  line-height:1;font-variant-numeric:tabular-nums}
.cd span{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--bone-38)}
.cd[data-done] {opacity:.6}

.facts li{display:grid;gap:.15rem;padding-block:.9rem;
  border-top:1px solid var(--rule-soft)}
.facts dt,.facts .k{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bone-38)}
.facts dd,.facts .v{margin:0;font-size:1.05rem}
.soon{display:inline-block;margin-block-start:.4rem;padding:.3rem .6rem;
  border:1px solid var(--rule);border-radius:.35rem;
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-70)}

/* Überspringen sitzt rechts in der Fußleiste, sichtbar aber untergeordnet. */
.cfg-skip{margin-inline-start:auto;color:var(--bone-54);padding-inline:.25rem}
.cfg-skip:hover{color:var(--bone)}

/* ============================================================
   19. Opening Night
   ============================================================ */
.ev-hero{position:relative;isolation:isolate;overflow:hidden;
  padding-block:clamp(4rem,10vh,7rem) clamp(3.5rem,9vh,6rem);
  min-height:min(84svh,50rem);display:grid;align-items:end}
.ev-hero-media{position:absolute;inset:0;z-index:-1}
.ev-hero-media img{width:100%;height:100%;object-fit:cover;object-position:58% 34%;
  filter:saturate(.9) contrast(1.05) brightness(.72)}
.ev-hero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,11,24,.82) 0%,rgba(7,11,24,.25) 34%,
    rgba(7,11,24,.72) 74%,var(--ink) 100%)}
.ev-hero-body{position:relative;display:grid;gap:1.4rem;justify-items:start}
.ev-title{font-size:clamp(2.8rem,11vw,8rem)}
.ev-title span{display:block}
.ev-title span:last-child{padding-inline-start:.1em}
.ev-lead{max-width:34ch}
.ev-cta{margin-block-start:.6rem}
.ev-facts li{display:grid;gap:.2rem}
@media (min-width:44rem){
  .ev-facts li{grid-template-columns:9rem 1fr auto;align-items:baseline;gap:1.5rem}
  .ev-facts .soon{justify-self:start}
}

/* Gästeliste */
.gl-grid{display:grid;gap:2.5rem}
@media (min-width:56rem){.gl-grid{grid-template-columns:1fr 1.05fr;gap:4rem;align-items:start}}
.gl-form{padding:clamp(1.3rem,3vw,2.1rem);border-radius:1rem}

/* ============================================================
   20. Bestätigungsseiten
   ============================================================ */
.done{min-height:72svh;display:grid;place-items:center;text-align:center;
  padding-block:clamp(6rem,14vh,9rem)}
.done-in{display:grid;gap:1.2rem;justify-items:center;max-width:44ch}
.done-mark{display:grid;place-items:center;width:3.5rem;height:3.5rem;
  border-radius:999px;background:var(--beam);color:#fff;font-size:1.4rem}
.done-actions{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;
  margin-block-start:1rem}

/* Fusszeilen-Links sind Navigation, kein Fliesstext. Damit gilt die
   Ausnahme fuer Links im Satz nicht und sie brauchen eine echte
   Trefferflaeche von 44px. */
.foot li{margin-block-end:0}
.foot li a,.foot-legal a{display:inline-flex;align-items:center;min-height:2.75rem}
.foot-legal{align-items:center;gap:1.25rem 1.5rem}

/* ============================================================
   21. Opening Night: Bewegung und Glas
   ============================================================ */

/* Scrollgebundene Tiefe im Hero. Das Motiv zieht langsam nach, der
   Inhalt schneller. Eine Bewegung, zwei Geschwindigkeiten, danach ist
   sie zu Ende. Kein Dauerlauf. */
.ev-hero{--hp:0}
.ev-hero-media img{
  transform:scale(calc(1.05 + var(--hp) * .12)) translateY(calc(var(--hp) * -3vh));
  will-change:transform;
}
.ev-hero-body{
  transform:translateY(calc(var(--hp) * 7vh));
  opacity:calc(1 - var(--hp) * .8);
  will-change:transform,opacity;
}

/* Zeilenmaske fuer den Titel. Jede Zeile faehrt einmal aus ihrer
   eigenen Blende herauf. */
.ev-title .ln{display:block;overflow:hidden;padding-block-end:.04em}
.ev-title .ln i{display:block;font-style:normal;
  transform:translateY(110%);
  animation:lineUp 900ms var(--e-out) forwards}
.ev-title .ln:nth-child(2) i{animation-delay:110ms}
@keyframes lineUp{to{transform:translateY(0)}}

/* Countdown als schwebende Glasflaeche */
.cd.glass{padding:1.15rem 1.4rem;border-radius:1rem;
  width:max-content;max-width:100%;flex-wrap:wrap}

/* Faktenliste als Glasflaeche */
.ev-facts.glass-soft{padding:.4rem 1.4rem 1rem;border-radius:1rem;max-width:44rem}
.ev-facts.glass-soft li:first-child{border-top:0}

.soon{background:rgba(246,240,231,.06);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

.gl-form{border-radius:1.1rem;box-shadow:var(--glass-lip),var(--glass-cast)}

@media (prefers-reduced-motion:reduce){
  .ev-hero-media img{transform:none}
  .ev-hero-body{transform:none;opacity:1}
  .ev-title .ln i{transform:none;animation:none}
}

/* ============================================================
   22. Getraenkekarte
   ============================================================ */
.karte{display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.karte-gruppe{padding:1.4rem 1.5rem 1.5rem;border-radius:1rem;
  display:flex;flex-direction:column}
.karte-titel{display:flex;align-items:baseline;gap:.6rem;
  font-size:1.05rem;font-weight:600;letter-spacing:-.015em;
  padding-block-end:.8rem;border-bottom:1px solid var(--rule)}
.karte-mass{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bone-38);font-weight:400}
.karte-liste{margin-block-start:.9rem}
.karte-liste li{padding-block:.5rem;color:var(--bone);
  border-top:1px solid var(--rule-soft)}
.karte-liste li:first-child{border-top:0}
.karte-note{margin-block-start:auto;padding-block-start:1rem;color:var(--bone-38)}

/* ============================================================
   23. Startseite 2026 — räumlicher Hero, Pixelmoment, Editorial
   Die Seite wechselt bewusst zwischen Nacht und hellem Elfenbein.
   ============================================================ */

/* Hero: Bild und Typografie tragen die Bühne – keine künstlichen Lichtwolken. */
.home-hero{height:165vh}
.home-hero .pin{background:var(--ink)}
.home-hero .band{
  inset-inline:28% -4%;height:min(80svh,calc(100svh - var(--chrome) - 1rem));
  border:1px solid rgba(246,240,231,.12);
  clip-path:polygon(
    calc((1 - var(--p)) * 48%) 8%,
    100% 0,
    100% 100%,
    calc((1 - var(--p)) * 48%) 90%
  );
}
.home-hero .band img{
  object-position:52% 48%;
  filter:saturate(calc(.72 + var(--p) * .28))
    contrast(1.08) brightness(calc(.52 + var(--p) * .36));
  transform:scale(calc(1.18 - var(--p) * .12));
}
.home-hero .band::after{background:rgba(7,11,24,.36)}
/* Kein z-index auf .claim: die Wortebenen müssen weiter mit dem Bild
   verschränkt bleiben. */
.home-hero .claim{
  justify-items:start;text-align:left;padding-inline:var(--gut);
  font-size:clamp(4.2rem,11.5vw,10.5rem);line-height:.78;
}
.home-hero .claim span{width:max-content}
.home-hero .claim .w1{
  transform:translate3d(calc(var(--p) * -1.2vw),calc(var(--p) * -4vh),0)}
.home-hero .claim .w2{
  transform:translate3d(clamp(0rem,8vw,8rem),0,0);
  color:#fff;text-shadow:0 .06em .45em rgba(7,11,24,.75)}
.home-hero .claim .w3{
  transform:translate3d(calc(var(--p) * 1.2vw),calc(var(--p) * 4vh),0)}
.home-hero .stage-foot{align-items:end}
.home-hero .stage-foot>div{display:grid;gap:1.25rem}
.home-hero .stage-foot .btn{justify-self:start}
.hero-event{
  display:grid;gap:.2rem;min-width:min(100%,22rem);
  padding:1rem 3rem 1rem 1.1rem;border-top:1px solid var(--bone-38);
  position:relative;color:var(--bone-70);
  transition:border-color var(--t-ui) ease-out,color var(--t-ui) ease-out,
    transform var(--t-ui) var(--e-out);
}
.hero-event::after{
  content:"→";position:absolute;inset-inline-end:.4rem;inset-block-start:50%;
  translate:0 -50%;font-size:1.25rem;color:var(--bone);
}
.hero-event strong{font-size:1.02rem;color:var(--bone)}
.hero-event:hover{border-color:var(--beam);color:var(--bone);
  transform:translateX(.3rem)}

/* Heller Editorial-Block als visueller Atemzug. */
.sec-ivory{background:var(--bone);color:var(--ink)}
.sec-ivory .t-label{color:rgba(7,11,24,.48)}
.editorial-head{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(16rem,.65fr);
  gap:clamp(2rem,7vw,7rem);align-items:end;
}
.editorial-title{
  margin-block-start:1.2rem;font-size:clamp(3.8rem,10vw,8.5rem);
  font-weight:680;letter-spacing:-.075em;line-height:.82;text-transform:uppercase;
}
.editorial-intro{max-width:33ch;font-size:clamp(1.05rem,1.6vw,1.35rem);
  color:rgba(7,11,24,.68)}
.service-photo{
  margin:clamp(3rem,7vw,6rem) 0 0 clamp(0rem,10vw,9rem);
  height:clamp(13rem,26vw,23rem);overflow:hidden;
  clip-path:polygon(4% 0,100% 0,96% 100%,0 100%);
}
.service-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  filter:saturate(.88) contrast(1.06)}
.service-layout{
  display:grid;grid-template-columns:minmax(10rem,15rem) 1fr;
  gap:clamp(2rem,8vw,8rem);margin-block-start:clamp(2.5rem,6vw,5rem);
}
.service-aside{display:grid;align-content:start;gap:1.5rem}
.service-aside p{font-size:1.05rem;line-height:1.4}
.btn-ink{background:var(--ink);color:var(--bone);border-color:var(--ink);
  box-shadow:none}
.btn-ink:hover{background:var(--beam);border-color:var(--beam);color:#fff}
.service-list{border-bottom:1px solid rgba(7,11,24,.25)}
.service-list details{border-top:1px solid rgba(7,11,24,.25)}
.service-list summary{
  display:grid;grid-template-columns:4.5rem 1fr 2.75rem;gap:1rem;
  align-items:center;min-height:clamp(6rem,10vw,9rem);
  list-style:none;cursor:pointer;color:var(--ink);
}
.service-list summary::-webkit-details-marker{display:none}
.service-list summary>span{font-size:.82rem;letter-spacing:.14em}
.service-list summary strong{
  font-size:clamp(2.4rem,6.2vw,5.8rem);font-weight:560;
  letter-spacing:-.06em;line-height:.9;text-transform:uppercase;
  transition:color var(--t-ui) ease-out,transform var(--t-panel) var(--e-out);
}
.service-list summary:hover strong{transform:translateX(.35rem)}
.service-list details[open] summary strong{color:var(--beam)}
.service-list summary i{position:relative;width:2.75rem;height:2.75rem}
.service-list summary i::before,.service-list summary i::after{
  content:"";position:absolute;inset:50% .65rem auto;height:1px;
  background:currentColor;transition:transform var(--t-ui) var(--e-out)}
.service-list summary i::after{transform:rotate(90deg)}
.service-list details[open] summary i::after{transform:rotate(0)}
.service-list details>p{
  max-width:48ch;padding:0 3.75rem 2rem 5.5rem;
  color:rgba(7,11,24,.68);font-size:1rem;
}

/* Opening Night als bildfüllendes Finale. */
.home-event{
  --hp:0;position:relative;isolation:isolate;overflow:hidden;
  min-height:100svh;padding-block:clamp(4.5rem,11vh,7.5rem);
  display:grid;align-items:center;background:var(--ink);
}
.home-event-media{position:absolute;z-index:-2;inset:0}
.home-event-media img{
  width:100%;height:100%;object-fit:cover;object-position:64% 42%;
  filter:saturate(.94) contrast(1.08) brightness(.68);
  transform:scale(calc(1.04 + var(--hp) * .1)) translateY(calc(var(--hp) * -2vh));
  will-change:transform;
}
.home-event::after{
  content:"";position:absolute;z-index:-1;inset:0;
  background:rgba(7,11,24,.48);
}
.home-event-body{display:grid;justify-items:start;position:relative}
.home-event-title{
  margin-block:1.4rem 2rem;font-size:clamp(4.5rem,12vw,10.5rem);
  font-weight:720;letter-spacing:-.085em;line-height:.72;text-transform:uppercase;
}
.home-event-title span{display:block}
.home-event-card{
  display:grid;gap:1.4rem;width:min(100%,34rem);padding:1.35rem 1.5rem;
  border-radius:1.1rem;
}
.home-event-date{display:grid;gap:.2rem}
.home-event-date strong{font-size:1rem}
.home-event-date span{color:var(--bone-54);font-size:.88rem}
.home-countdown{gap:clamp(.9rem,3vw,2rem);justify-content:space-between}
.home-countdown strong{font-size:clamp(1.9rem,4vw,3.2rem)}
.home-event-cta{margin-block-start:1.4rem}

/* Die letzte Fläche nimmt der Seite die Schwere und führt direkt zur Anfrage. */
.home-close{background:var(--bone);color:var(--ink);
  padding-block:clamp(4.5rem,10vh,8rem)}
.home-close .t-label{color:rgba(7,11,24,.48)}
.home-close h2{
  max-width:13ch;margin-block:1.2rem 1.5rem;
  font-size:clamp(3.2rem,9vw,8rem);font-weight:680;
  letter-spacing:-.075em;line-height:.85;text-transform:uppercase;
}
.home-close p:not(.t-label){max-width:39ch;margin-block-end:2rem;
  color:rgba(7,11,24,.66);font-size:clamp(1.05rem,1.7vw,1.3rem)}

@media (max-width:60rem){
  .home-hero{height:145vh}
  .home-hero .claim{justify-items:start;font-size:clamp(3.7rem,16vw,6.5rem);
    line-height:.8}
  .home-hero .claim .w2{transform:none}
  .home-hero .band{
    inset:auto;translate:0;height:42svh;margin-block-start:1.8rem;
    clip-path:polygon(0 8%,100% 0,100% 100%,4% 92%);
  }
  .home-hero .band img{
    transform:translate3d(calc(var(--p) * -3vw),calc(var(--p) * -7svh),0)
      scale(calc(1.16 - var(--p) * .12));
  }
  .home-hero .stage-foot{gap:1.8rem}
  .hero-event{width:100%}

  .editorial-head{grid-template-columns:1fr;gap:1.5rem}
  .editorial-title{font-size:clamp(3.3rem,15vw,6rem)}
  .service-photo{margin-inline:0;height:auto;aspect-ratio:4/3}
  .service-layout{grid-template-columns:1fr;gap:2rem}
  .service-aside{grid-template-columns:1fr auto;align-items:end}
  .service-list summary{grid-template-columns:2.8rem 1fr 2.75rem;min-height:6rem}
  .service-list summary strong{font-size:clamp(2.3rem,12vw,4.5rem)}
  .service-list details>p{padding-inline:3.8rem 1rem}

  .home-event{min-height:100svh;align-items:end}
  .home-event-title{font-size:clamp(4.2rem,19vw,7rem)}
}

@media (max-width:40rem){
  .service-aside{grid-template-columns:1fr}
  .service-list summary{gap:.5rem}
  .service-list summary>span{font-size:.7rem}
  .service-list details>p{padding-inline:3.3rem .25rem}
  .agency-hero .pixel-static{font-size:35vw}
  .agency-hero .pixel-object{height:38svh}
  .home-event-card{padding:1.1rem}
}

@media (prefers-reduced-motion:reduce){
  .home-event-media img{transform:none}
  .agency-hero .pixel-object{transform:none !important;cursor:default;touch-action:auto}
  .agency-hero .pixel-static{opacity:.9}
  .service-list summary strong{transform:none}
}

/* ============================================================
   23. Agentur 2026 + schwebender Mobilkopf
   Die Agentur-Seite nutzt denselben Pixelmoment wie die Startseite,
   wechselt danach aber bewusst zwischen Editorial-, Prozess- und
   Angebotsbuehne. Mobil werden lange Reihen horizontal statt endlos.
   ============================================================ */

/* Pixel-Opener der Agentur */
.agency-hero{height:auto;min-height:0;background:var(--ink)}
.agency-hero .agency-hero-in{
  position:relative;inset:auto;height:auto;
  min-height:calc(100svh - var(--chrome));
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(20rem,.85fr);
  gap:clamp(2rem,6vw,6rem);align-items:center;
  padding:clamp(4rem,8vh,7rem) var(--gut) clamp(4.5rem,9vh,7rem);
}
.agency-hero .agency-hero-in::before{opacity:.28}
.agency-pixel-field{
  position:relative;isolation:isolate;min-width:0;display:grid;place-items:center;
  perspective:clamp(44rem,80vw,72rem);perspective-origin:50% 50%;
}
.agency-pixel-field::before{
  content:"";position:absolute;z-index:0;inline-size:min(96%,46rem);aspect-ratio:1.72;
  border:1px solid rgba(244,240,232,.18);border-radius:47% 53% 52% 48% / 45% 52% 48% 55%;
  background:rgba(37,45,58,.30);-webkit-backdrop-filter:blur(18px) saturate(150%);
  backdrop-filter:blur(18px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(244,240,232,.22),0 26px 54px rgba(15,20,31,.32);
  pointer-events:none;
}
.agency-hero .pixel-object{
  position:relative;z-index:1;width:min(56vw,48rem);height:min(34vw,26rem);
  display:grid;place-items:center;transform-style:preserve-3d;
  transform-origin:center;cursor:grab;
  touch-action:none;user-select:none;-webkit-user-select:none;
}
.agency-hero .pixel-object[data-dragging]{cursor:grabbing;will-change:transform}
.agency-hero .pixel-object:focus-visible{
  outline:2px solid var(--bone);outline-offset:.75rem;border-radius:1rem;
}
.agency-hero .pixel-canvas{
  position:absolute;inset:0;width:100%;height:100%;z-index:2;
  transform:translateZ(1.25rem);backface-visibility:visible;
  filter:drop-shadow(0 1rem 1.65rem rgba(8,12,21,.36));
}
.agency-hero .pixel-static{
  position:relative;z-index:1;font-size:clamp(8rem,31vw,27rem);
  font-weight:760;letter-spacing:-.095em;line-height:.75;color:var(--bone);
  opacity:.9;transform:translateZ(-1.25rem) scale(.96);
  transition:opacity 180ms ease-out;pointer-events:none;
}
.js .agency-hero .pixel-static{opacity:.14}
.agency-hero[data-active] .pixel-static{opacity:.1}
.agency-hero-copy{position:relative;z-index:3;max-width:33rem}
.agency-hero-copy .t-label{color:var(--bone-54)}
.agency-hero-copy h1{
  margin-block:1.1rem 1.35rem;
  font-size:clamp(3.4rem,6.8vw,7rem);font-weight:680;
  letter-spacing:-.055em;line-height:.86;text-transform:uppercase;
}
.agency-hero-copy>p:not(.t-label){
  max-width:35ch;color:var(--bone-70);
  font-size:clamp(1.02rem,1.45vw,1.25rem)
}
.agency-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.35rem;
  margin-block-start:2rem}

/* Helle Leistungsbuehne */
.agency-services,.agency-packages{background:var(--bone);color:var(--ink)}
.agency-services{padding-block:clamp(3.75rem,8vh,6rem)}
.agency-services .t-label,.agency-packages .t-label{color:rgba(7,11,24,.48)}
.agency-section-head{
  display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.5rem,3vw,2.5rem)
}
.agency-section-head h2{
  max-width:13ch;margin-block-start:1.2rem;font-size:clamp(3.5rem,6.2vw,6.2rem);
  font-weight:690;letter-spacing:-.072em;line-height:.86;text-transform:uppercase;
}
.agency-section-head>p{
  max-width:42ch;margin-inline-start:auto;color:rgba(7,11,24,.66);
  font-size:clamp(1.02rem,1.35vw,1.2rem);line-height:1.55
}
.agency-photo{
  margin:clamp(3rem,7vw,6rem) 0 0 clamp(0rem,9vw,8rem);
  height:clamp(17rem,38vw,34rem);overflow:hidden;
  clip-path:polygon(5% 0,100% 4%,96% 100%,0 95%);
  background:var(--ink)
}
.agency-photo img{
  width:100%;height:100%;object-fit:cover;object-position:50% 48%;
  filter:saturate(.9) contrast(1.08) brightness(.86);
  transition:transform 900ms var(--e-out)
}
@media (hover:hover) and (pointer:fine){.agency-photo:hover img{transform:scale(1.025)}}
.agency-service-layout{
  display:grid;grid-template-columns:minmax(11rem,15rem) 1fr;
  gap:clamp(2rem,8vw,8rem);margin-block-start:clamp(3rem,7vw,6rem)
}
.agency-service-aside{display:grid;align-content:start;gap:1.5rem}
.agency-service-aside p{color:rgba(7,11,24,.62);font-size:.96rem}
.agency-service-list{border-bottom:1px solid rgba(7,11,24,.22)}
.agency-service-list details{border-top:1px solid rgba(7,11,24,.22)}
.agency-service-list summary{
  display:grid;grid-template-columns:4rem 1fr 2.75rem;gap:1rem;
  align-items:center;min-height:clamp(5.5rem,7vw,7rem);
  list-style:none;cursor:pointer;color:var(--ink)
}
.agency-service-list summary::-webkit-details-marker{display:none}
.agency-service-list summary>span{
  color:var(--beam);font-size:.82rem;font-weight:650;letter-spacing:.14em
}
.agency-service-list summary strong{
  min-width:0;font-size:clamp(1.9rem,3.35vw,3.55rem);font-weight:590;
  letter-spacing:-.055em;line-height:.95;text-transform:uppercase;
  transition:color var(--t-ui) ease-out,transform var(--t-panel) var(--e-out)
}
.agency-service-list summary:hover strong{transform:translateX(.35rem)}
.agency-service-list details[open] summary strong{color:var(--beam)}
.agency-service-list summary i{position:relative;width:2.75rem;height:2.75rem}
.agency-service-list summary i::before,.agency-service-list summary i::after{
  content:"";position:absolute;inset:50% .65rem auto;height:1px;
  background:currentColor;transition:transform var(--t-ui) var(--e-out)
}
.agency-service-list summary i::after{transform:rotate(90deg)}
.agency-service-list details[open] summary i::after{transform:rotate(0)}
.agency-service-list details>p{
  max-width:50ch;padding:0 3.75rem 2rem 5rem;
  color:rgba(7,11,24,.66);font-size:1rem
}

/* Ablauf als redaktionelles Produktionsdossier statt als Infografik. */
.agency-process{
  position:relative;overflow:hidden;padding-block:clamp(4rem,9vh,7rem);
  background:var(--ink)
}
.agency-process .wrap{
  display:grid;grid-template-columns:minmax(17rem,.72fr) minmax(0,1.28fr);
  gap:clamp(3rem,7vw,7rem);align-items:start
}
.agency-process-head{
  position:sticky;inset-block-start:calc(var(--chrome) + 2rem);align-self:start
}
.agency-process-head .t-label{color:var(--beam);font-weight:680}
.agency-process-head h2{
  max-width:7.4ch;margin-block:1.5rem 0;
  font-family:Baskerville,"Iowan Old Style","Palatino Linotype",Georgia,serif;
  font-size:clamp(3.5rem,4.7vw,5.6rem);font-weight:400;
  letter-spacing:-.055em;line-height:1.02;text-transform:uppercase
}
.agency-timeline{
  display:block;border-top:1px solid var(--rule);border-bottom:1px solid var(--beam)
}
.agency-timeline li{
  position:relative;display:grid;
  grid-template-columns:minmax(10rem,.78fr) minmax(14rem,1fr);
  gap:clamp(1rem,2vw,2rem);align-items:center;min-width:0;
  padding:clamp(1.4rem,2.5vw,2rem) 0;border-top:1px solid var(--rule-soft)
}
.agency-timeline li:first-child{padding-inline-start:0;border-inline-start:0;border-top:0}
.agency-timeline li::before{display:none}
.agency-timeline h3{
  margin:0;color:var(--bone);
  font-family:Baskerville,"Iowan Old Style","Palatino Linotype",Georgia,serif;
  font-size:clamp(1.8rem,2.4vw,2.65rem);font-weight:400;
  letter-spacing:-.035em;line-height:1.05;text-transform:none
}
.agency-timeline p{
  max-width:34ch;color:var(--bone-70);font-size:.94rem;line-height:1.55
}

/* Pakete als typografische Spalten statt dunkler Kartenwand. */
.agency-packages{padding-block:clamp(3.75rem,8vh,6rem)}
.agency-package-head{margin-block-end:clamp(3rem,7vw,6rem)}
.agency-packages .pk-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-color:rgba(7,11,24,.24)
}
.agency-packages .pk{
  padding:2rem clamp(1rem,2vw,1.65rem) 2.4rem;
  border-color:rgba(7,11,24,.2)
}
.agency-packages .pk:first-child{padding-inline-start:0}
.agency-packages .pk h3{color:var(--beam);font-size:.82rem;
  letter-spacing:.08em;text-transform:uppercase}
.agency-packages .pk-sub{color:rgba(7,11,24,.72);font-weight:620}
.agency-packages .t-small{color:rgba(7,11,24,.52)}
.agency-packages .pk-price{
  font-size:clamp(2.5rem,4.2vw,4.4rem);font-weight:520;
  letter-spacing:-.06em;line-height:.92;color:var(--ink)
}
.agency-packages .pk-list li{
  border-color:rgba(7,11,24,.14);color:rgba(7,11,24,.68)
}
.agency-package-actions{display:flex;flex-wrap:wrap;gap:.8rem;
  margin-block-start:2.5rem}
.agency-btn-outline{color:var(--ink);border-color:rgba(7,11,24,.3)}
.agency-btn-outline:hover{color:#fff;background:var(--ink);border-color:var(--ink)}

/* Kompakter Abschluss statt einer weiteren dunklen Textsektion. */
.agency-close{padding-block:clamp(4rem,10vh,7.5rem);background:var(--beam);color:#fff}
.agency-close .t-label{color:rgba(255,255,255,.65)}
.agency-close h2{
  max-width:13ch;margin-block:1.15rem 1.4rem;
  font-size:clamp(3.4rem,8.5vw,8rem);font-weight:690;
  letter-spacing:-.075em;line-height:.84;text-transform:uppercase
}
.agency-close>div>p:not(.t-label){max-width:38ch;margin-block-end:2rem;
  color:rgba(255,255,255,.78);font-size:clamp(1.02rem,1.5vw,1.25rem)}

@media (max-width:60rem) and (min-width:46.01rem){
  .agency-section-head{grid-template-columns:minmax(0,1fr);gap:1.5rem}
  .agency-section-head>*{min-width:0}
  .agency-process .wrap{grid-template-columns:1fr;gap:3.5rem}
  .agency-process-head{position:static}
  .agency-process-head h2{max-width:10ch}
}

/* Der mobile Kopf ist ein eigenstaendiges Materialobjekt. */
@media (max-width:46rem){
  .hdr{
    inset-block-start:.65rem;margin:.65rem var(--gut) 0;width:auto;min-height:0;
    display:grid;grid-template-columns:1fr auto;gap:.65rem 1rem;
    padding:.78rem;border:1px solid rgba(246,240,231,.14);border-radius:1.1rem;
    background:rgba(7,11,24,.88);
    -webkit-backdrop-filter:blur(16px) saturate(110%);
    backdrop-filter:blur(16px) saturate(110%);
    box-shadow:0 10px 28px rgba(0,0,0,.22)
  }
  .hdr.is-stuck{
    background:rgba(7,11,24,.94);border-color:rgba(246,240,231,.18);
    border-bottom-color:rgba(246,240,231,.18);border-radius:1.1rem;
    box-shadow:0 12px 30px rgba(0,0,0,.28)
  }
  .hdr .brand{
    grid-column:1;grid-row:1;display:flex;align-items:center;min-height:2.75rem;
    margin:0;padding-inline:.35rem
  }
  .hdr .nav-toggle{grid-column:2;grid-row:1}
  .hdr .tracks{
    grid-column:1/-1;grid-row:2;order:initial;width:100%;margin:0;padding:3px;
    background:rgba(2,4,11,.62);-webkit-backdrop-filter:none;backdrop-filter:none;
    box-shadow:none;isolation:isolate
  }
  .hdr .tracks a{z-index:2;min-height:2.75rem;padding-inline:.55rem}
  .subnav{inset-block-start:9rem}
  .subnav .menu-in{padding-block:1rem 1.5rem}

  .agency-hero .agency-hero-in{
    min-height:auto;grid-template-columns:1fr;
    gap:0;padding:1.25rem var(--gut) 3rem
  }
  .agency-pixel-field{min-height:clamp(13.5rem,29svh,17rem)}
  .agency-hero .pixel-object{width:min(88vw,28rem);height:clamp(13rem,28svh,16.5rem)}
  .agency-hero-copy{align-self:end}
  .agency-hero-copy h1{font-size:clamp(2.75rem,12.8vw,4rem);line-height:.88}
  .agency-hero-copy>p:not(.t-label){font-size:1rem}
  .agency-actions{margin-block-start:1.5rem}

  .agency-services,.agency-packages{padding-block:4.5rem}
  .agency-section-head{grid-template-columns:minmax(0,1fr);gap:1.5rem;min-width:0}
  .agency-section-head>*{min-width:0}
  .agency-section-head h2{
    max-width:100%;font-size:clamp(2.12rem,9.2vw,2.8rem);line-height:.94;
    letter-spacing:-.06em;overflow-wrap:normal;word-break:normal
  }
  .agency-section-head>p{margin-inline-start:0;font-size:1rem;line-height:1.55}
  .agency-photo{
    margin:3rem 0 0;height:auto;aspect-ratio:4/3;
    clip-path:polygon(3% 0,100% 3%,97% 100%,0 96%)
  }
  .agency-service-layout{grid-template-columns:1fr;gap:2.5rem;margin-block-start:3rem}
  .agency-service-aside{grid-template-columns:1fr;justify-items:start}
  .agency-service-list summary{
    grid-template-columns:2.5rem minmax(0,1fr) 2.75rem;gap:.55rem;
    min-height:0;padding-block:1.35rem
  }
  .agency-service-list summary strong{
    font-size:clamp(1.42rem,6.6vw,2rem);line-height:.98;
    overflow-wrap:normal;word-break:normal
  }
  .agency-service-list details>p{padding:0 .25rem 1.5rem 3.05rem;font-size:.94rem}

  .agency-process{padding-block:4.5rem}
  .agency-process .wrap{display:block}
  .agency-process-head{position:static;margin-block-end:3rem}
  .agency-process-head h2{
    max-width:9ch;margin-block:1rem 0;
    font-size:clamp(2.65rem,11.5vw,3.55rem);line-height:1
  }
  .agency-timeline{
    display:block;overflow:visible;margin:0;padding:0;
    border-top:1px solid var(--rule);border-bottom:1px solid var(--beam)
  }
  .agency-timeline li{
    display:grid;grid-template-columns:minmax(0,1fr);
    gap:.65rem;align-items:start;min-width:0;
    padding:1.4rem 0 1.55rem;border-inline-start:0;
    border-top:1px solid var(--rule-soft);border-bottom:0
  }
  .agency-timeline li:first-child{padding-inline-start:0;border-inline-start:0;border-top:0}
  .agency-timeline h3{grid-column:1;grid-row:1;font-size:clamp(1.55rem,7vw,2rem)}
  .agency-timeline p{grid-column:1;grid-row:2;max-width:none;font-size:.92rem}

  .agency-package-head{margin-block-end:3.25rem}
  .agency-packages .pk-grid{
    display:block;overflow:visible;margin:0;padding:0;
    border-top:1px solid rgba(7,11,24,.24)
  }
  .agency-packages .pk{
    width:100%;padding:1.8rem 0 2rem;border-left:0;
    border-bottom:1px solid rgba(7,11,24,.18)
  }
  .agency-packages .pk:first-child{padding-inline-start:0;border-left:0}
  .agency-package-actions{display:grid;grid-template-columns:1fr}
  .agency-package-actions .btn{width:100%}
  .agency-close h2{font-size:clamp(3rem,13.5vw,4.5rem)}
}

/* ---------- 17. Desktop-Kopf: freie Marke, eine Bubble fuer die Bereiche ----------
   Die Wortmarke und das Menue stehen frei. Nur der Wechsel zwischen den
   beiden Bereichen ist als bewusstes Materialobjekt ausgefuehrt. */
@media (min-width:46.0625rem){
  :root{
    --hdr-h:clamp(18rem,23vw,21.5rem);
    --subnav-h:0rem;
    --chrome:0rem;
  }
  html{scroll-padding-block-start:1rem}
  .hdr{
    position:relative;inset-block-start:auto;
    width:auto;min-height:var(--hdr-h);margin:0 var(--gut);
    display:grid;grid-template-columns:1fr auto;grid-template-rows:1fr auto;
    gap:clamp(1.5rem,2.5vw,3rem);
    padding:clamp(1.15rem,2vw,2rem) 0 0;
    border:0;border-radius:0;background:transparent;
    -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;
  }
  .hdr.is-stuck{
    min-height:var(--hdr-h);grid-template-rows:1fr auto;gap:clamp(1.5rem,2.5vw,3rem);
    padding:clamp(1.15rem,2vw,2rem) 0 0;border:0;border-radius:0;background:transparent;
    -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;
  }
  .hdr .brand{
    grid-column:1;grid-row:1;align-self:start;display:flex;align-items:center;
    min-height:clamp(4.75rem,7vw,6.8rem);margin:0;padding:.4rem .65rem;
    font-size:clamp(2.2rem,3.1vw,3.2rem);
  }
  .hdr .btn-hdr{display:none}
  .hdr .nav-toggle{
    grid-column:2;grid-row:1;align-self:start;display:flex;
    width:clamp(3.25rem,4.5vw,4.5rem);height:clamp(3.25rem,4.5vw,4.5rem);
    color:var(--bone);background:transparent;border:0;box-shadow:none;
  }
  .hdr .nav-toggle span,.hdr .nav-toggle span::before,.hdr .nav-toggle span::after{
    width:clamp(1.8rem,2.6vw,2.9rem);height:3px;
  }
  .hdr .nav-toggle span::before{transform:translateY(-.7rem)}
  .hdr .nav-toggle span::after{transform:translateY(.7rem)}
  .hdr .tracks{
    grid-column:1/-1;grid-row:2;display:flex;width:100%;min-height:clamp(6.5rem,9vw,8.3rem);
    max-height:clamp(6.5rem,9vw,8.3rem);
    margin:0;padding:3px;border-color:rgba(246,240,231,.2);
    background:rgba(2,4,11,.54);-webkit-backdrop-filter:none;backdrop-filter:none;
    box-shadow:var(--glass-lip),var(--glass-floor);isolation:isolate;
  }
  .hdr .tracks a{
    flex:1;justify-content:center;min-height:clamp(6rem,8.5vw,7.8rem);
    padding-inline:1.25rem;font-size:clamp(1.3rem,2.1vw,2rem);letter-spacing:-.035em;
  }
  .subnav{
    position:fixed;z-index:880;inset-block-start:calc(var(--hdr-h) + clamp(1.5rem,3vw,3rem));
    inset-inline:auto var(--gut);width:min(28rem,calc(100vw - (2 * var(--gut))));
    border:1px solid var(--glass-edge);border-radius:1.5rem;
    background:var(--glass-bg-strong);-webkit-backdrop-filter:var(--glass-blur);
    backdrop-filter:var(--glass-blur);box-shadow:var(--glass-cast);
  }
  .subnav .menu-in{display:flex;flex-direction:column;align-items:stretch;gap:.25rem;padding:.55rem}
  .subnav .menu-group{width:100%}
  .subnav .menu-trigger{
    width:100%;justify-content:space-between;min-height:3.4rem;padding-inline:.8rem;
    border-radius:.85rem;color:var(--bone-70);
  }
  .subnav .menu-group[data-here] .menu-trigger::after{display:none}
  .subnav .menu-panel{
    position:static;min-width:0;margin-block:.1rem .4rem;padding:.15rem 0 .35rem;
    background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border:0;box-shadow:none;
  }
  .subnav .menu-panel a{min-height:2.8rem;padding-inline:.8rem;border-radius:.75rem}
}

/* Mobil folgt derselben Hierarchie: oben frei, unten genau eine Bubble. */
@media (max-width:46rem){
  .hdr,.hdr.is-stuck{
    position:relative;inset-block-start:auto;padding:0;border:0;border-radius:0;background:transparent;
    -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;
  }
  .hdr .nav-toggle{background:transparent;border:0;box-shadow:none}
}

@media (prefers-reduced-motion:reduce){
  .agency-photo img,.agency-service-list summary strong{transform:none}
  .agency-hero .agency-hero-in{min-height:auto}
}

/* ============================================================
   24. Agentur-Unterseiten — ein gemeinsames Editorial-System
   Elfenbein ist Arbeitsflaeche, Nachtblau ist Haltung, Kobalt markiert
   nur Handlung oder einen bewussten Szenenwechsel. Keine Kartenwand.
   ============================================================ */
.page-agentur,.page-anfrage,.page-about,.page-atmospheres{
  --gut:clamp(1.5rem,4.5vw,4rem)
}

/* Projektanfrage: kompakter Auftakt, danach eine flache Arbeitsflaeche. */
.request-hero{
  padding-block:clamp(3.5rem,8vh,6rem) clamp(3rem,7vh,5.5rem);
  background:var(--ink)
}
.request-hero-copy{display:grid;gap:1.25rem;max-width:59rem}
.request-hero-copy h1{
  max-width:13ch;font-size:clamp(3.3rem,8.2vw,7.8rem);font-weight:690;
  letter-spacing:-.055em;line-height:.86;text-transform:uppercase
}
.request-hero-copy h1 .title-gap{margin-inline-start:.14em}
.request-hero-copy .t-lead{max-width:43ch}
.request-config{padding-block:clamp(3.75rem,8vh,6rem);background:var(--bone);color:var(--ink)}
.page-anfrage .cfg{
  display:grid;min-height:0;overflow:visible;border:0;border-radius:0;
  border-top:1px solid rgba(7,11,24,.28);
  background:transparent;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  grid-template-rows:auto auto auto auto
}
.page-anfrage .cfg-top{padding:1rem 0 .85rem}
.page-anfrage .cfg-step{color:rgba(7,11,24,.48);font-weight:650}
.page-anfrage .cfg-name{color:rgba(7,11,24,.66)}
.page-anfrage .cfg-bar{background:rgba(7,11,24,.12)}
.page-anfrage .cfg-body{width:min(100%,52rem);padding:clamp(2.75rem,6vw,5rem) 0 2.5rem}
.page-anfrage .cfg-q{
  max-width:18ch;font-size:clamp(2.25rem,5.5vw,4.9rem);font-weight:660;
  letter-spacing:-.065em;word-spacing:.14em;line-height:.92;text-transform:uppercase
}
.page-anfrage .cfg-hint{max-width:44ch;margin-block:.85rem 0;color:rgba(7,11,24,.58)}
.page-anfrage .cfg-grid{margin-block-start:2.4rem;border-color:rgba(7,11,24,.24)}
.page-anfrage .cfg-opt{
  min-height:4.65rem;padding:1rem .25rem;color:var(--ink);
  border-color:rgba(7,11,24,.18)
}
.page-anfrage .cfg-opt-label{font-size:clamp(1.2rem,2.4vw,1.75rem);font-weight:560}
.page-anfrage .cfg-opt-note{color:rgba(7,11,24,.48)}
.page-anfrage .cfg-opt::after{border-color:rgba(7,11,24,.34)}
.page-anfrage .cfg-opt[aria-pressed="true"]{color:var(--beam)}
.page-anfrage .cfg-opt[aria-pressed="true"] .cfg-opt-note{color:rgba(7,11,24,.58)}
@media (hover:hover) and (pointer:fine){
  .page-anfrage .cfg-opt:hover{transform:translateX(.4rem)}
  .page-anfrage .cfg-opt:hover::after{border-color:var(--ink)}
}
.page-anfrage .cfg-body .field{max-width:32rem;margin-block-start:2.4rem}
.page-anfrage .cfg-body .field label{color:rgba(7,11,24,.58)}
.page-anfrage .cfg-body .field input{
  background:transparent;color:var(--ink);border:0;border-bottom:1px solid rgba(7,11,24,.35);
  border-radius:0;padding-inline:.1rem;color-scheme:light
}
.page-anfrage .cfg-nav{
  justify-content:flex-end;gap:.75rem;padding:1.25rem 0 0;
  background:transparent;border-top:1px solid rgba(7,11,24,.28)
}
.page-anfrage .cfg-nav .btn-quiet,.page-anfrage .res-actions .btn-quiet{
  color:var(--ink);border-color:rgba(7,11,24,.3)
}
.page-anfrage .cfg-skip{color:rgba(7,11,24,.58)}
.page-anfrage .cfg-result{grid-row:1/-1;padding:3rem 0 1rem;color:var(--ink)}
.page-anfrage .res-head,.page-anfrage .res-list li,.page-anfrage .res-sum li{
  border-color:rgba(7,11,24,.18)
}
.page-anfrage .res-sub,.page-anfrage .res-list li,.page-anfrage .res-sum li span:last-child{
  color:rgba(7,11,24,.68)
}
.page-anfrage .res-cols h3,.page-anfrage .res-sum li span:first-child{
  color:rgba(7,11,24,.48)
}
.request-contact{padding-block:clamp(4rem,9vh,7rem);background:var(--ink);color:var(--bone)}

/* Über 2AM: grosse Haltung, danach Fakten wie in einem gedruckten Dossier. */
.about-hero{
  padding-block:clamp(4rem,9vh,7rem);
  background:var(--ink)
}
.about-hero .sec-head{max-width:64rem;margin-block-end:clamp(2rem,5vh,4rem)}
.about-hero h1{
  max-width:11em;font-size:clamp(3.4rem,6.6vw,7rem);font-weight:670;
  letter-spacing:-.055em;line-height:.84;text-transform:uppercase;text-wrap:wrap
}
.about-hero .t-lead{max-width:42ch}
.about-principles{padding-block:clamp(4rem,10vh,7.5rem);background:var(--bone);color:var(--ink)}
.about-principles .sec-head{max-width:64rem}
.about-principles .t-label{color:rgba(7,11,24,.48)}
.about-principles h2{
  max-width:13ch;font-size:clamp(3rem,7.4vw,7.2rem);font-weight:680;
  letter-spacing:-.075em;line-height:.86;text-transform:uppercase
}
.about-principles .hours{border-bottom:1px solid rgba(7,11,24,.22)}
.about-principles .hours li{
  grid-template-columns:5rem minmax(0,1fr);gap:clamp(1.25rem,4vw,4rem);
  align-items:start;padding-block:clamp(1.5rem,3vw,2.6rem);
  border-color:rgba(7,11,24,.22)
}
.about-principles .hours time{padding-block-start:.25rem;color:var(--beam);font-weight:700}
.about-principles .hours li>div{display:grid;grid-template-columns:minmax(12rem,.7fr) minmax(18rem,1fr);gap:2rem}
.about-principles .hours h3{font-size:clamp(1.5rem,2.7vw,2.7rem);line-height:.96}
.about-principles .hours p{margin:0;color:rgba(7,11,24,.64);font-size:1rem}
.about-company{padding-block:clamp(4rem,9vh,7rem);background:var(--ink);color:var(--bone)}
.about-company h2{font-size:clamp(2.8rem,7vw,6.5rem);letter-spacing:-.07em;line-height:.88;text-transform:uppercase}
.about-contact{padding-block:clamp(4rem,9vh,7rem);background:var(--bone);color:var(--ink)}
.about-contact .t-label,.about-contact .t-body{color:rgba(7,11,24,.52)}
.about-contact h2{max-width:13ch;font-size:clamp(2.8rem,7vw,6.5rem);letter-spacing:-.07em;line-height:.88;text-transform:uppercase}
.about-contact .facts li{border-color:rgba(7,11,24,.2)}
.about-contact .facts .k{color:rgba(7,11,24,.46)}
.about-contact .btn-quiet{color:var(--ink);border-color:rgba(7,11,24,.3)}

/* Atmospheres: eine helle Magazinseite, Bilder bleiben der einzige Effekt. */
.atmos-hero{padding-block:clamp(4rem,9vh,7rem);background:var(--bone);color:var(--ink)}
.atmos-hero .sec-head{max-width:64rem;margin-block-end:2rem}
.atmos-hero .t-label{color:rgba(7,11,24,.48)}
.atmos-hero h1{
  font-size:clamp(4rem,12vw,11rem);font-weight:690;letter-spacing:-.085em;
  line-height:.78;text-transform:uppercase
}
.atmos-hero .t-lead{max-width:44ch;color:rgba(7,11,24,.64)}
.atmos-gallery{padding-block:0 clamp(4.5rem,10vh,8rem);background:var(--bone);color:var(--ink)}
.page-atmospheres .atm-grid{grid-template-columns:minmax(0,1.45fr) minmax(15rem,.55fr);gap:clamp(1.25rem,4vw,4rem);align-items:start}
.page-atmospheres .atm{border-radius:0;background:var(--ink);clip-path:polygon(2% 0,100% 2%,98% 100%,0 97%)}
.page-atmospheres .atm-lead{grid-column:auto;aspect-ratio:16/10;transform:rotate(-.75deg)}
.page-atmospheres .atm:not(.atm-lead){margin-block-start:clamp(5rem,13vw,11rem);transform:rotate(1.1deg)}
.atmos-statement{padding-block:clamp(4rem,10vh,7.5rem);background:var(--beam);color:#fff}
.atmos-statement .t-label,.atmos-statement .t-body{color:rgba(255,255,255,.72)}
.atmos-statement h2{
  max-width:14ch;font-size:clamp(3rem,7.5vw,7rem);font-weight:680;
  letter-spacing:-.075em;line-height:.86;text-transform:uppercase
}
.atmos-statement .btn-primary{background:var(--ink);border-color:var(--ink);box-shadow:none}
.atmos-statement .btn-quiet{color:#fff;border-color:rgba(255,255,255,.42)}
.atmos-credits{padding-block:3.5rem;background:var(--ink);color:var(--bone)}

@media (max-width:46rem){
  /* Lesbarkeit und Rhythmus schlagen auf kleinen Displays die große Geste. */
  .sec{padding-block:3.5rem}
  .home-close{padding-block:4rem}
  .request-hero{padding-block:3.25rem 3.75rem}
  .request-hero-copy h1{font-size:clamp(2.9rem,13.4vw,4.25rem);line-height:.87}
  .request-config{padding-block:3.5rem 4rem}
  .page-anfrage .cfg-body{padding-block:2.75rem 2rem}
  .page-anfrage .cfg-q{font-size:clamp(2.15rem,10.8vw,3.15rem)}
  .page-anfrage .cfg-opt{gap:.7rem;min-height:4.35rem}
  .page-anfrage .cfg-opt-label{font-size:1.18rem}
  .page-anfrage .cfg-opt-note{max-width:8rem;font-size:.75rem;line-height:1.3}
  .page-anfrage .cfg-nav{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)}
  .page-anfrage .cfg-nav .btn{width:100%;padding-inline:.75rem}
  .page-anfrage .cfg-skip{grid-column:1/-1;justify-self:end;min-height:2.75rem;margin:0}
  .page-anfrage .res-head{display:grid;align-items:start}
  .page-anfrage .res-price{margin-inline-start:0}
  .request-contact{padding-block:4rem}

  .about-hero{padding-block:3.5rem 4rem}
  .about-hero h1{font-size:clamp(3rem,13.7vw,4.4rem);line-height:.86}
  .about-principles,.about-company,.about-contact{padding-block:4rem}
  .about-principles h2{font-size:clamp(2.65rem,12.5vw,4rem)}
  .about-principles .hours li{grid-template-columns:2.5rem minmax(0,1fr);gap:1rem}
  .about-principles .hours li>div{grid-template-columns:1fr;gap:.6rem}
  .about-principles .hours h3{font-size:1.45rem}
  .about-company h2,.about-contact h2{font-size:clamp(2.65rem,12.2vw,4rem)}

  .atmos-hero{padding-block:3.5rem}
  .atmos-hero h1{font-size:clamp(3.8rem,18vw,5.6rem)}
  .atmos-gallery{padding-block-end:4rem}
  .page-atmospheres .atm-grid{grid-template-columns:1fr;gap:2rem}
  .page-atmospheres .atm-lead{aspect-ratio:4/3;transform:rotate(-.45deg)}
  .page-atmospheres .atm:not(.atm-lead){margin-block-start:0;aspect-ratio:4/5;transform:rotate(.65deg)}
  .atmos-statement{padding-block:4rem}
  .atmos-statement h2{font-size:clamp(2.7rem,12.8vw,4.15rem)}
}

@media (prefers-reduced-motion:reduce){
  .page-atmospheres .atm{transform:none}
}

/* 25. Final UX pass — one calm navigation system, clearer first actions. */
@media (min-width:46.0625rem){
  :root{--hdr-h:clamp(12rem,15vw,14rem)}

  .hdr,.hdr.is-stuck{
    gap:clamp(.85rem,1.4vw,1.3rem);
    padding:clamp(1rem,1.5vw,1.35rem) 0 0;
  }
  .hdr .brand{
    min-height:3.5rem;
    font-size:clamp(1.9rem,2.4vw,2.6rem);
  }
  .hdr .nav-toggle{
    inline-size:3.65rem;
    block-size:3.65rem;
    border:1px solid var(--glass-edge);
    border-radius:50%;
    background:rgba(7,11,24,.34);
    box-shadow:0 0 1.8rem rgba(0,0,0,.13);
  }
  .hdr .tracks{
    min-height:5.25rem;
    max-height:5.25rem;
  }
  .hdr .tracks a{
    min-height:4.85rem;
    font-size:clamp(1.15rem,1.6vw,1.55rem);
  }
  .subnav{inset-block-start:calc(var(--hdr-h) + 1.25rem)}
}

@media (max-width:46rem){
  .hdr,.hdr.is-stuck{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"brand toggle" "tracks tracks";
    align-items:center;
    gap:.55rem .75rem;
    min-height:0;
    margin-inline:var(--gut);
    padding:.7rem 0 .55rem;
  }
  .hdr .brand{
    grid-area:brand;
    min-height:2.75rem;
    margin:0;
    padding-inline:.2rem;
    font-size:1.35rem;
  }
  .hdr .nav-toggle{
    grid-area:toggle;
    inline-size:2.75rem;
    block-size:2.75rem;
    border:1px solid var(--glass-edge);
    border-radius:50%;
    background:rgba(7,11,24,.34);
  }
  .hdr .tracks{
    grid-area:tracks;
    inline-size:100%;
    min-height:3.15rem;
    margin:0;
  }
  .hdr .tracks a{
    min-height:2.75rem;
    font-size:1rem;
  }
}

/* The opening event should explain itself before the visitor has to scroll. */
.ev-hero{
  min-height:clamp(38rem,70svh,44rem);
  padding-block:clamp(2.75rem,6vh,4.5rem);
  align-items:center;
}
.ev-hero-body{
  max-width:42rem;
  gap:clamp(.85rem,1.7vw,1.2rem);
  transform:translateY(calc(var(--hp) * 2vh));
  opacity:calc(1 - var(--hp) * .28);
}
.ev-title .ln i{animation-duration:560ms}
.cd.glass{padding:.9rem 1.15rem}
.ev-cta{margin-block-start:.2rem}

@media (max-width:46rem){
  .ev-hero{
    min-height:calc(100svh - 7rem);
    padding-block:2.4rem 2rem;
    align-items:center;
  }
  .ev-hero-body{max-width:none}
  .ev-cta .btn{inline-size:100%}
}

/* A single clear next step keeps the enquiry from becoming a dead-end hero. */
.request-hero-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.8rem 1rem;
  margin-block-start:clamp(1.5rem,3vw,2.25rem);
}
.request-hero-actions .t-small{color:var(--muted)}
@media (max-width:46rem){
  .request-hero-actions{align-items:stretch}
  .request-hero-actions .btn{inline-size:100%}
}

/* Text links that trigger a task remain comfortably tappable on touch screens. */
.facts .tlink,.pk-foot .tlink,.agency-actions .tlink,.t-body .tlink,
.done-in .t-small .tlink,.form-note a{
  display:inline-flex;
  align-items:center;
  min-block-size:2.75rem;
}
.prose a{display:inline-flex;align-items:center;min-block-size:2.75rem}

/* A confirmation is one of the few moments that deserves a small, semantic flourish. */
@media (prefers-reduced-motion:no-preference){
  .done[data-confirm] .done-mark{animation:confirm-mark 480ms var(--e-out) both}
  .done[data-confirm] .done-in > h1,
  .done[data-confirm] .done-in > .t-lead{animation:confirm-copy 520ms var(--e-out) 80ms both}
  .done[data-confirm] .done-actions{animation:confirm-copy 520ms var(--e-out) 150ms both}
  @keyframes confirm-mark{
    from{opacity:0;transform:scale(.72) rotate(-9deg)}
    to{opacity:1;transform:scale(1) rotate(0)}
  }
  @keyframes confirm-copy{
    from{opacity:0;transform:translateY(.75rem)}
    to{opacity:1;transform:translateY(0)}
  }
}

/* 28. Projektanfrage — Open Canvas
   Der Konfigurator ist eine helle Arbeitsfläche: klare Gruppen, keine
   Paketgrenzen nach Gästezahl, die Zusammenfassung erst am Schluss. */
.open-canvas-hero{padding-block:clamp(3.4rem,8vh,6.5rem) clamp(2.9rem,6vh,5rem)}
.open-canvas-hero .request-hero-copy{gap:1.1rem;max-width:65rem}
.open-canvas-hero .request-hero-copy h1{
  max-width:13ch;font-size:clamp(3.25rem,7.7vw,7.5rem);font-weight:690;
  letter-spacing:-.06em;line-height:.88;text-transform:none;word-spacing:normal
}
.request-open-canvas{padding-block:clamp(2.4rem,5vw,4.5rem)}
.page-anfrage .open-canvas{max-width:68rem;color:var(--ink);color-scheme:light}
.canvas-builder{display:grid;gap:0}
.canvas-section{padding-block:clamp(2.4rem,4.5vw,4.25rem);border-top:1px solid rgba(7,11,24,.18)}
.canvas-intro{border-top:0;padding-block-start:.25rem}
.canvas-heading{display:grid;gap:.7rem;max-width:49rem}
.canvas-heading h2{
  font-size:clamp(2.15rem,4.6vw,4.4rem);font-weight:670;letter-spacing:-.055em;
  line-height:.92;word-spacing:normal;text-transform:none
}
.canvas-heading p{max-width:49ch;color:rgba(7,11,24,.66);font-size:clamp(1rem,1.4vw,1.14rem);line-height:1.5}
.canvas-occasion{display:flex;gap:.25rem clamp(.7rem,2vw,1.5rem);flex-wrap:wrap;margin-block-start:clamp(1.75rem,3vw,2.35rem)}
.canvas-occasion button{
  position:relative;min-block-size:2.75rem;padding:0 .08rem;color:rgba(7,11,24,.67);
  font-weight:560;line-height:1.15;white-space:nowrap
}
.canvas-occasion button::after{content:"";position:absolute;inset-inline:0;inset-block-end:0;block-size:3px;background:transparent}
.canvas-occasion button[aria-pressed="true"]{color:var(--ink);font-weight:700}
.canvas-occasion button[aria-pressed="true"]::after{background:var(--beam)}

.canvas-facts{display:grid;grid-template-columns:minmax(14rem,19rem) minmax(0,1fr);gap:clamp(2.5rem,7vw,7rem);align-items:start;max-width:64rem}
.canvas-guests{display:grid;gap:1rem}
.canvas-guests>label,.canvas-duration legend{color:rgba(7,11,24,.58);font-size:.94rem;font-weight:560}
.canvas-dial{
  --canvas-progress:18;position:relative;display:grid;place-items:center;width:clamp(13.5rem,22vw,18rem);
  aspect-ratio:1;border-radius:50%;background:conic-gradient(from 0deg,var(--beam) calc(var(--canvas-progress) * 1%),rgba(7,11,24,.10) 0)
}
.canvas-dial::before{content:"";position:absolute;inset:.65rem;border-radius:inherit;background:var(--bone)}
.canvas-dial>div{position:relative;z-index:1;display:grid;place-items:center;width:72%;aspect-ratio:1;border:1.5px solid rgba(7,11,24,.82);border-radius:50%}
.canvas-dial strong{font-size:clamp(3.65rem,7vw,5.4rem);font-weight:680;letter-spacing:-.08em;line-height:.8;font-variant-numeric:tabular-nums}
.canvas-dial span{margin-block-start:.8rem;font-size:.95rem;font-weight:560}
.canvas-guests input[type="range"]{width:100%;accent-color:var(--beam);cursor:ew-resize}
.canvas-guests input[type="range"]::-webkit-slider-runnable-track{height:.35rem;border:1px solid rgba(7,11,24,.24);border-radius:999px;background:rgba(255,255,255,.5)}
.canvas-guests input[type="range"]::-webkit-slider-thumb{width:1.45rem;height:1.45rem;margin-top:-.61rem;border:0;border-radius:50%;background:var(--beam);-webkit-appearance:none}
.canvas-guests input[type="range"]::-moz-range-track{height:.35rem;border:1px solid rgba(7,11,24,.24);border-radius:999px;background:rgba(255,255,255,.5)}
.canvas-guests input[type="range"]::-moz-range-thumb{width:1.45rem;height:1.45rem;border:0;border-radius:50%;background:var(--beam)}
.canvas-range-labels{display:flex;justify-content:space-between;margin-block-start:-.25rem;color:rgba(7,11,24,.48);font-size:.76rem;font-variant-numeric:tabular-nums}
.canvas-duration{display:grid;align-content:start;margin:0;padding:0;border:0}
.canvas-duration legend{padding:0 0 1rem}
.canvas-duration button{
  display:grid;grid-template-columns:minmax(0,1fr) 1.5rem;align-items:center;gap:1rem;min-height:3.55rem;
  padding:.55rem 0;border-top:1px solid rgba(7,11,24,.2);color:rgba(7,11,24,.67);font-weight:560;text-align:start
}
.canvas-duration button:last-child{border-bottom:1px solid rgba(7,11,24,.2)}
.canvas-duration button::after{content:"";inline-size:1rem;block-size:1rem;justify-self:end;border:1px solid rgba(7,11,24,.7);border-radius:50%}
.canvas-duration button[aria-pressed="true"]{color:var(--ink);font-weight:700}
.canvas-duration button[aria-pressed="true"]::after{border:4px solid var(--beam);background:var(--bone)}
.canvas-match{margin:0;padding-block:1.05rem;border-top:1px solid rgba(7,11,24,.18);border-bottom:1px solid rgba(7,11,24,.18);color:rgba(7,11,24,.68);font-weight:600}
.canvas-match>span:first-child{color:var(--beam);font-weight:700}

.canvas-scope{padding-block-end:2.65rem}
.canvas-packages{margin-block-start:clamp(1.75rem,3vw,2.5rem);border-top:2px solid var(--ink)}
.canvas-package{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.5rem;align-items:center;width:100%;min-height:6.25rem;
  padding:1.1rem 1.15rem;border-bottom:1px solid rgba(7,11,24,.18);color:var(--ink);text-align:start
}
.canvas-package>span{display:grid;gap:.3rem;max-width:48rem}
.canvas-package strong{font-size:clamp(1.35rem,2.4vw,2rem);font-weight:670;letter-spacing:-.05em;line-height:1}
.canvas-package small{max-width:54ch;color:rgba(7,11,24,.67);font-size:1rem;line-height:1.42}
.canvas-package em{color:rgba(7,11,24,.48);font-size:.78rem;font-style:normal;font-weight:650;white-space:nowrap}
.canvas-package[aria-pressed="true"]{background:#DEE7FF}
.canvas-package[aria-pressed="true"] em{color:var(--beam);font-weight:750}
.canvas-production{margin-block-start:1rem;padding:1.1rem 1.15rem 1.2rem;background:#EEF3FF;border:1px solid rgba(35,91,255,.18)}
.canvas-production>p{margin-block-end:.8rem;color:rgba(7,11,24,.67);font-weight:600}
.canvas-production>div{display:flex;gap:.6rem;flex-wrap:wrap}
.canvas-production button{min-height:2.75rem;padding:.55rem .9rem;border:1px solid rgba(7,11,24,.26);border-radius:999px;color:rgba(7,11,24,.7);font-size:.88rem;font-weight:620}
.canvas-production button[aria-pressed="true"]{border-color:var(--beam);background:var(--beam);color:#fff}

.canvas-extras{padding-block-start:2.65rem}
.canvas-extras-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(1.5rem,4vw,4rem);margin-block-start:clamp(1.75rem,3vw,2.5rem);border-top:1px solid rgba(7,11,24,.22)}
.canvas-extra{
  display:grid;grid-template-columns:minmax(0,1fr) 2.75rem;gap:1rem;align-items:center;min-height:8.7rem;padding:1rem 0;
  border-bottom:1px solid rgba(7,11,24,.18);color:var(--ink);text-align:start
}
.canvas-extra>span{display:grid;gap:.35rem}
.canvas-extra strong{font-size:1.35rem;font-weight:680;letter-spacing:-.04em;line-height:1}
.canvas-extra small{max-width:34ch;color:rgba(7,11,24,.65);font-size:.91rem;line-height:1.4}
.canvas-extra b{display:grid;place-items:center;inline-size:2.75rem;block-size:2.75rem;border:1px solid rgba(7,11,24,.36);border-radius:50%;font-size:1.45rem;font-weight:450;line-height:1}
.canvas-extra[aria-pressed="true"]{background:#EEF3FF;padding-inline:.9rem;margin-inline:-.9rem}
.canvas-extra[aria-pressed="true"] b{border-color:var(--beam);background:var(--beam);color:#fff}
.canvas-actions{display:flex;justify-content:flex-end;padding-block-start:2rem;border-top:1px solid rgba(7,11,24,.18)}
.canvas-actions .btn{min-width:min(100%,15rem)}

.canvas-review{padding-block:clamp(2.5rem,6vw,5.75rem) clamp(3rem,7vw,6.5rem);background:transparent;color:var(--ink)}
.canvas-review-top{padding-block-end:1.25rem;border-bottom:1px solid rgba(7,11,24,.2)}
.canvas-back{min-height:2.75rem;padding:0;color:rgba(7,11,24,.62);font-weight:620}
.canvas-review-grid{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(16rem,.58fr);gap:clamp(2.75rem,7vw,7rem);padding-block-start:clamp(2.75rem,6vw,5.75rem)}
.canvas-review h2{max-width:13ch;font-size:clamp(2.8rem,4.8vw,4.65rem);font-weight:670;letter-spacing:-.065em;line-height:.9;word-spacing:normal}
.canvas-review-meta{margin-block-start:1rem;color:rgba(7,11,24,.58)}
.canvas-review-block{margin-block-start:clamp(2.15rem,4.5vw,4rem)}
.canvas-review-block>p{color:rgba(7,11,24,.52);font-size:.83rem;font-weight:680}
.canvas-review-block h3{margin-block-start:.55rem;font-size:clamp(1.65rem,3vw,2.65rem);font-weight:650;letter-spacing:-.055em;line-height:.98}
.canvas-review-block ul{display:grid;gap:0;margin-block-start:1.35rem;color:rgba(7,11,24,.7)}
.canvas-review-block li{padding:.65rem 0;border-bottom:1px solid rgba(7,11,24,.15)}
.canvas-review-price{align-self:start;padding-inline-start:clamp(1.5rem,4vw,3.5rem);border-inline-start:1px solid rgba(7,11,24,.2)}
.canvas-review-price>p{color:var(--beam);font-size:.82rem;font-weight:730;letter-spacing:.08em;text-transform:uppercase}
.canvas-review-costs{display:grid;gap:.75rem;margin-block:1.4rem 1.55rem;padding:0 0 1.35rem;border-bottom:1px solid rgba(35,91,255,.55)}
.canvas-review-costs div{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;color:rgba(7,11,24,.68)}
.canvas-review-costs dt{font-size:.92rem}
.canvas-review-costs dd{margin:0;color:var(--ink);font-size:.94rem;font-weight:650;white-space:nowrap}
.canvas-review-price>strong{display:block;color:var(--beam);font-size:clamp(3.35rem,4.9vw,5rem);font-weight:680;letter-spacing:-.078em;line-height:.82}
.canvas-review-price>span{display:block;max-width:28ch;margin-block-start:1rem;color:rgba(7,11,24,.64);font-size:.94rem;line-height:1.42}
.canvas-review-actions{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;margin-block-start:clamp(2.5rem,6vw,5.5rem);padding-block-start:1.45rem;border-top:1px solid rgba(7,11,24,.2)}
.canvas-review-actions p{max-width:35ch;color:rgba(7,11,24,.62);font-size:.98rem;line-height:1.42}
.canvas-review-actions .btn{min-width:min(100%,16rem);background:var(--ink);border-color:var(--ink);color:var(--bone)}
@media (hover:hover) and (pointer:fine){
  .canvas-occasion button:hover,.canvas-package:hover,.canvas-duration button:hover{color:var(--ink)}
  .canvas-package:hover{background:rgba(35,91,255,.07)}
  .canvas-extra:hover b{border-color:var(--beam);color:var(--beam)}
}
@media (max-width:40rem){
  .open-canvas-hero{padding-block:2.9rem 3.35rem}
  .open-canvas-hero .request-hero-copy h1{font-size:clamp(3rem,13vw,4.25rem);line-height:.9}
  .request-open-canvas{padding-block:2.1rem 3.5rem}
  .canvas-section{padding-block:2.5rem}
  .canvas-facts{grid-template-columns:1fr;gap:2.75rem}
  .canvas-dial{width:min(100%,17.5rem)}
  .canvas-duration{max-width:100%}
  .canvas-package{grid-template-columns:1fr;gap:.65rem;min-height:0;padding:1.15rem .85rem}
  .canvas-package em{justify-self:start}
  .canvas-extras-list{grid-template-columns:1fr}
  .canvas-extra{min-height:0;padding-block:1.15rem}
  .canvas-review{padding-block:3.5rem}
  .canvas-review-grid{grid-template-columns:1fr;gap:2.5rem;padding-block-start:2.5rem}
  .canvas-review-price{padding:2rem 0 0;border-inline-start:0;border-top:1px solid rgba(7,11,24,.2)}
  .canvas-review-actions{align-items:stretch;flex-direction:column}
  .canvas-review-actions .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .canvas-occasion button,.canvas-package,.canvas-extra,.canvas-duration button{transition:none}
}

/* ============================================================
   29. Soft Graphite Blue — gemeinsames UI/CI
   Die Seiten bleiben editorial und räumlich. Die frühere Elfenbein-
   Arbeitsfläche wird nicht weiss, sondern zu einer ruhigeren Schieferfläche.
   Das Bild bleibt die dunkelste, atmosphärische Ebene; Blau zeigt nur Aktion.
   ============================================================ */

/* Material: eine dunkle Glasschicht über dem helleren Graphit, nie Creme. */
.glass-soft{background:var(--surface-deep)}
.nav-toggle,.tracks,.btn-glass{background:var(--surface-deep)}
.field input,.field textarea,.field select{background:rgba(37,45,58,.72)}
.field input:focus,.field textarea:focus{background:rgba(32,39,51,.92)}
.btn-primary{box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 8px 22px rgba(54,79,142,.26)}
.btn-primary:hover{background:#7392DC;border-color:#7392DC}

/* Alle vormals hellen Editorialflächen gehören nun sichtbar zusammen. */
.sec-ivory,.home-close,
.agency-services,.agency-packages,
.request-config,
.about-principles,.about-contact,
.atmos-hero,.atmos-gallery{
  background:var(--ink-3);color:var(--bone)
}
.sec-ivory .t-label,.home-close .t-label,
.agency-services .t-label,.agency-packages .t-label,
.about-principles .t-label,.about-contact .t-label,
.atmos-hero .t-label{color:var(--bone-54)}

/* Startseite: die bestehenden Versätze bleiben, nur die Zwischenflächen werden Graphit. */
.editorial-intro,.service-list details>p,.home-close p:not(.t-label){color:var(--bone-70)}
.service-list,.service-list details{border-color:var(--rule)}
.service-list summary{color:var(--bone)}
.btn-ink{background:var(--ink-2);color:var(--bone);border-color:var(--glass-edge)}
.btn-ink:hover{background:var(--beam);border-color:var(--beam);color:#fff}

/* Agentur: Typografie und Linien tragen die Abschnitte – keine neue Kartenwand. */
.agency-section-head>p,.agency-service-aside p,
.agency-service-list details>p,.agency-packages .pk-sub,
.agency-packages .pk-list li{color:var(--bone-70)}
.agency-services .agency-service-list,.agency-services .agency-service-list details,
.agency-packages .pk-grid,.agency-packages .pk{border-color:var(--rule)}
.agency-service-list summary,.agency-packages .pk-price{color:var(--bone)}
.agency-packages .t-small{color:var(--bone-54)}
.agency-btn-outline{color:var(--bone);border-color:var(--rule)}
.agency-btn-outline:hover{color:var(--ink-2);background:var(--bone);border-color:var(--bone)}
.agency-close,.atmos-statement{background:var(--ink-2);color:var(--bone)}
.agency-close .t-label,.atmos-statement .t-label,.atmos-statement .t-body{color:var(--bone-54)}
.atmos-statement .btn-primary{background:var(--beam);border-color:var(--beam)}
.atmos-statement .btn-quiet{color:var(--bone);border-color:var(--rule)}

/* Das Dossier und die Bildwelt behalten ihren Kontrast auch auf Schiefer. */
.about-principles .hours,.about-principles .hours li,
.about-contact .facts li{border-color:var(--rule)}
.about-principles .hours p,.about-contact .t-body{color:var(--bone-70)}
.about-contact .facts .k{color:var(--bone-54)}
.about-contact .btn-quiet{color:var(--bone);border-color:var(--rule)}
.atmos-hero .t-lead{color:var(--bone-70)}

/* Anfrage: der Konfigurator bleibt offen und zeilenbasiert, jetzt im selben Material. */
.page-anfrage .cfg{color:var(--bone);border-color:var(--rule)}
.page-anfrage .cfg-step,.page-anfrage .cfg-opt-note,
.page-anfrage .res-cols h3,.page-anfrage .res-sum li span:first-child,
.page-anfrage .cfg-body .field label,.page-anfrage .cfg-skip{color:var(--bone-54)}
.page-anfrage .cfg-name,.page-anfrage .cfg-hint,
.page-anfrage .res-sub,.page-anfrage .res-list li,
.page-anfrage .res-sum li span:last-child{color:var(--bone-70)}
.page-anfrage .cfg-bar{background:var(--rule-soft)}
.page-anfrage .cfg-grid,.page-anfrage .cfg-opt,
.page-anfrage .cfg-nav,.page-anfrage .res-head,
.page-anfrage .res-list li,.page-anfrage .res-sum li{border-color:var(--rule)}
.page-anfrage .cfg-opt,.page-anfrage .cfg-opt[aria-pressed="true"],
.page-anfrage .cfg-result{color:var(--bone)}
.page-anfrage .cfg-opt::after{border-color:var(--bone-38)}
.page-anfrage .cfg-opt[aria-pressed="true"]{color:var(--beam)}
.page-anfrage .cfg-opt[aria-pressed="true"] .cfg-opt-note{color:var(--bone-70)}
.page-anfrage .cfg-body .field input{
  color:var(--bone);border-bottom-color:var(--rule);color-scheme:dark
}
.page-anfrage .cfg-nav .btn-quiet,.page-anfrage .res-actions .btn-quiet{
  color:var(--bone);border-color:var(--rule)
}

/* Open Canvas: alle Auswahlzustände bleiben Zeilen und Signale statt Kacheln. */
.page-anfrage .open-canvas{color:var(--bone);color-scheme:dark}
.canvas-section,.canvas-match,.canvas-actions,.canvas-review-top,
.canvas-review-block li,.canvas-review-price,.canvas-review-actions,
.canvas-duration button,.canvas-duration button:last-child,
.canvas-packages,.canvas-package,.canvas-extras-list,.canvas-extra{
  border-color:var(--rule)
}
.canvas-heading p,.canvas-occasion button,.canvas-duration button,
.canvas-match,.canvas-package small,.canvas-production>p,
.canvas-production button,.canvas-extra small,.canvas-back,
.canvas-review-meta,.canvas-review-block>p,.canvas-review-block ul,
.canvas-review-costs div,.canvas-review-price>span,.canvas-review-actions p{
  color:var(--bone-70)
}
.canvas-guests>label,.canvas-duration legend,.canvas-range-labels,
.canvas-package em{color:var(--bone-54)}
.canvas-occasion button[aria-pressed="true"],.canvas-duration button[aria-pressed="true"],
.canvas-package,.canvas-extra,.canvas-review,.canvas-review-costs dd{color:var(--bone)}
.canvas-dial{background:conic-gradient(from 0deg,var(--beam) calc(var(--canvas-progress) * 1%),rgba(244,240,232,.12) 0)}
.canvas-dial::before{background:var(--ink-2)}
.canvas-dial>div{border-color:var(--bone-70)}
.canvas-guests input[type="range"]::-webkit-slider-runnable-track,
.canvas-guests input[type="range"]::-moz-range-track{border-color:var(--rule);background:rgba(244,240,232,.18)}
.canvas-duration button::after{border-color:var(--bone-70)}
.canvas-duration button[aria-pressed="true"]::after{background:var(--ink-3)}
.canvas-match>span:first-child{color:var(--beam)}
.canvas-packages{border-top-color:var(--bone)}
.canvas-package[aria-pressed="true"],.canvas-extra[aria-pressed="true"]{background:rgba(94,127,209,.16)}
.canvas-production{background:rgba(32,39,51,.28);border-color:rgba(94,127,209,.46)}
.canvas-production button{border-color:var(--rule)}
.canvas-extra b{border-color:var(--bone-54)}
.canvas-review-costs{border-bottom-color:rgba(94,127,209,.72)}
.canvas-review-price>strong,.canvas-review-price>p{color:var(--beam)}
.canvas-review-actions .btn{background:var(--ink-2);border-color:var(--glass-edge);color:var(--bone)}
@media (hover:hover) and (pointer:fine){
  .canvas-occasion button:hover,.canvas-package:hover,.canvas-duration button:hover{color:var(--bone)}
  .canvas-package:hover{background:rgba(244,240,232,.06)}
}

/* Die freistehende Navigation behält ihre Form, bekommt aber dieselbe Schiefertemperatur. */
@media (min-width:46.0625rem){
  .hdr .tracks{border-color:var(--glass-edge);background:rgba(32,39,51,.68)}
  .hdr .nav-toggle{background:rgba(32,39,51,.26)}
}
@media (max-width:46rem){
  .hdr{border-color:var(--glass-edge);background:var(--glass-bg-strong)}
  .hdr.is-stuck{background:var(--glass-bg-strong);border-color:var(--glass-edge);border-bottom-color:var(--glass-edge)}
  .hdr .tracks{background:rgba(32,39,51,.72)}
  .hdr .nav-toggle{background:transparent}
}

/* ============================================================
   30. Navigation — eine weiche Spur statt Kapsel auf Kapsel
   Der Bereichswechsel ist eine einzige, leicht organische Schiene. Das
   Menü klappt nicht als Karte aus, sondern zieht eine ruhige Kurve nach.
   ============================================================ */
.tracks{
  padding:.32rem;
  border-radius:2.25rem 2.65rem 2.35rem 2.05rem / 54% 48% 52% 46%;
  border-color:rgba(244,240,232,.14);
  background:rgba(32,39,51,.78);
  box-shadow:inset 0 1px 0 rgba(244,240,232,.12),0 12px 28px rgba(19,24,34,.16);
  isolation:isolate;
}
.tracks::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  inset:.22rem;border:1px solid rgba(244,240,232,.10);
  border-radius:2rem 2.42rem 2.16rem 2.25rem / 50% 48% 52% 50%;
}
.tracks a{z-index:2}
.tracks-pill{
  inset-block:.32rem;
  border:1px solid rgba(244,240,232,.18);
  border-radius:1.85rem 2.32rem 2.12rem 2.04rem / 52% 46% 54% 48%;
  background:rgba(244,240,232,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 8px 18px rgba(18,24,35,.18);
}
.tracks-pill::after{
  content:"";position:absolute;pointer-events:none;
  inset:.35rem .7rem auto;height:48%;
  border-top:1px solid rgba(244,240,232,.34);
  border-radius:50%;transform:rotate(-2deg);opacity:.72;
}
.tracks a[aria-current]{color:var(--bone)}
.tracks.is-switching a[data-switch-target]{color:var(--bone)}
.tracks a:focus-visible{
  outline:1px solid rgba(244,240,232,.82);outline-offset:2px;
  box-shadow:none;border-radius:inherit;
}

@media (min-width:46.0625rem){
  .hdr .tracks{
    min-height:4.8rem;max-height:4.8rem;padding:.35rem;
    border-radius:2.4rem 2.9rem 2.58rem 2.22rem / 52% 46% 54% 48%;
    background:rgba(32,39,51,.72);
  }
  .hdr .tracks a{min-height:4.1rem;font-size:clamp(1.08rem,1.5vw,1.42rem)}
  .hdr .tracks-pill{inset-block:.35rem}

  .subnav{
    overflow:clip;border:0;
    border-radius:1.45rem 2rem 1.8rem 1.65rem / 22% 28% 24% 28%;
    background:rgba(32,39,51,.92);
    box-shadow:0 20px 44px rgba(19,24,34,.22),inset 0 1px 0 rgba(244,240,232,.14);
  }
  .subnav::before{
    content:"";position:absolute;inset:-1.5rem -18% auto auto;width:68%;height:4.4rem;
    border-bottom:1px solid rgba(244,240,232,.16);border-radius:0 0 50% 50%;
    transform:rotate(-4deg);opacity:.72;pointer-events:none;
  }
  .subnav .menu-in{position:relative;z-index:1;padding:.7rem .85rem .85rem}
  .subnav .menu-trigger{
    min-height:3.25rem;padding-inline:.45rem;border-radius:1rem 1.25rem 1rem 1.12rem;
    color:var(--bone-70);
  }
  .subnav .menu-trigger:hover{background:rgba(244,240,232,.055);color:var(--bone)}
  .subnav .menu-group{border-bottom:1px solid rgba(244,240,232,.09)}
  .subnav .menu-group:last-child{border-bottom:0}
  .subnav .menu-panel a{border-radius:.85rem 1rem .9rem .8rem}
}

@media (max-width:46rem){
  .hdr,.hdr.is-stuck{
    margin:.65rem var(--gut) 0;padding:.7rem 0 .35rem;
    border:0;background:transparent;box-shadow:none;
  }
  .hdr .nav-toggle{
    border:1px solid rgba(244,240,232,.18);background:rgba(32,39,51,.34);
    box-shadow:inset 0 1px 0 rgba(244,240,232,.10),0 8px 20px rgba(19,24,34,.12);
  }
  .hdr .tracks{
    min-height:3.05rem;padding:.24rem;
    border-radius:1.58rem 1.9rem 1.74rem 1.48rem / 54% 48% 52% 46%;
    background:rgba(32,39,51,.84);
  }
  .hdr .tracks::before{inset:.16rem}
  .hdr .tracks a{min-height:2.75rem;font-size:.96rem}
  .hdr .tracks-pill{inset-block:.24rem}
  .tracks-pill::after{inset:.28rem .55rem auto}

  .subnav{
    position:fixed;z-index:850;inset:0;display:flex;overflow:hidden;
    background:var(--ink);border:0;opacity:0;pointer-events:none;
    transform:translateY(-.75rem);transition:opacity 180ms ease-out,transform 360ms var(--e-out);
  }
  .subnav[data-open]{opacity:1;pointer-events:auto;transform:none}
  .subnav::before{
    content:"";position:absolute;z-index:0;pointer-events:none;
    inset:-8rem -24% auto;height:15rem;background:var(--ink-2);
    border-bottom:1px solid rgba(244,240,232,.16);
    border-radius:0 0 50% 48% / 0 0 58% 46%;
    transform:translate3d(22%,-1rem,0) rotate(-3deg);
    transition:transform 620ms var(--e-out);
  }
  .subnav::after{
    content:"";position:absolute;z-index:0;pointer-events:none;
    inset:5.1rem -14% auto 20%;height:3.5rem;
    border-top:1px solid rgba(244,240,232,.14);border-radius:50%;
    transform:translateX(18%) rotate(-2deg);opacity:0;
    transition:transform 540ms var(--e-out),opacity 220ms ease-out 80ms;
  }
  .subnav[data-open]::before{transform:translate3d(0,0,0) rotate(-1deg)}
  .subnav[data-open]::after{transform:translateX(0) rotate(-1deg);opacity:1}
  .subnav .menu-in{
    position:relative;z-index:1;gap:0;overflow-y:auto;
    padding-block:calc(6.1rem + env(safe-area-inset-top)) max(2rem,env(safe-area-inset-bottom));
  }
  .subnav .menu-group{position:relative}
  .subnav .menu-trigger{
    position:relative;min-height:4.25rem;padding-inline:.15rem;
    font-size:clamp(1.78rem,8.2vw,2.25rem);font-weight:520;letter-spacing:-.045em;
    border-bottom-color:rgba(244,240,232,.16);
  }
  .subnav .menu-trigger:focus-visible{
    outline:1px solid rgba(244,240,232,.82);outline-offset:4px;
    box-shadow:none;border-radius:1.25rem 1.65rem 1.38rem 1.16rem / 42% 48% 46% 40%;
  }
  .subnav .menu-trigger::after{
    content:"";display:block;position:absolute;pointer-events:none;
    inset:auto 18% -.1rem -8%;height:1.8rem;
    border-top:1px solid rgba(244,240,232,.22);border-radius:50%;
    transform:translateX(-28%) scaleX(.48) rotate(-2deg);opacity:0;
    transition:transform 440ms var(--e-out),opacity 180ms ease-out;
  }
  .subnav .menu-trigger[aria-expanded="true"]::after{
    transform:translateX(0) scaleX(1) rotate(-1deg);opacity:1;
  }
  .subnav .menu-panel{
    position:relative;inset:auto;display:grid;grid-template-rows:0fr;min-width:0;margin:0;padding:0 .15rem;
    overflow:visible;opacity:0;transform:translateY(-.55rem);
    transition:grid-template-rows 360ms var(--e-out),opacity 160ms ease-out,transform 360ms var(--e-out);
  }
  .subnav .menu-panel[data-open]{
    grid-template-rows:1fr;opacity:1;transform:none;
  }
  .subnav .menu-panel-in{
    display:flex;flex-direction:column;min-height:0;overflow:clip;
  }
  .subnav .menu-panel::before{
    content:"";position:absolute;pointer-events:none;
    inset:.18rem 32% auto -8%;height:1.55rem;
    border-top:1px solid rgba(244,240,232,.13);border-radius:50%;
    transform:translateX(-30%) rotate(-2deg);transition:transform 440ms var(--e-out);
  }
  .subnav .menu-panel[data-open]::before{transform:translateX(0) rotate(-1deg)}
  .subnav .menu-panel a{
    min-height:2.75rem;padding-inline:.15rem;color:var(--bone-70);
    opacity:0;transform:translateY(-.45rem);transition:opacity 200ms ease-out,transform 360ms var(--e-out);
  }
  .subnav .menu-panel a:first-child{margin-block-start:.7rem}
  .subnav .menu-panel a:last-child{margin-block-end:.9rem}
  .subnav .menu-panel[data-open] a{opacity:1;transform:none}
  .subnav .menu-panel[data-open] a:nth-child(2){transition-delay:45ms}
  .subnav .menu-panel[data-open] a:nth-child(3){transition-delay:90ms}
  .subnav .menu-panel[data-open] a:nth-child(4){transition-delay:135ms}
  .subnav .menu-foot{margin-block-start:1.35rem;padding-block-start:1.35rem;border-top-color:rgba(244,240,232,.14)}
}

@media (prefers-reduced-motion:reduce){
  .subnav,.subnav::before,.subnav::after,.subnav .menu-trigger::after,
  .subnav .menu-panel,.subnav .menu-panel::before,.subnav .menu-panel a{transition:none}
}

/* ============================================================
   31. Navigation — Swoosh nur beim Öffnen
   Keine gezeichneten Linien: Der Übergang ist eine einmalige, dunkle
   Flächenbewegung und verschwindet danach vollständig.
   ============================================================ */
.tracks::before,.tracks-pill::after{content:none}

@media (min-width:46.0625rem){
  .subnav::before{content:none}
  .subnav .menu-group{border-bottom:0}
}

@media (max-width:46rem){
  .subnav::before{
    content:"";position:absolute;z-index:0;pointer-events:none;
    inset:-10rem -32% auto;height:20rem;border:0;
    background:rgba(52,60,74,.92);
    clip-path:ellipse(47% 18% at 114% 16%);
    opacity:0;transform:translate3d(44%,0,0) rotate(-3deg);
  }
  .subnav[data-open]::before{animation:menu-swoosh 520ms var(--e-out) both}
  .subnav::after,.subnav .menu-trigger::after,.subnav .menu-panel::before{content:none}
  .subnav .menu-group,.subnav .menu-trigger,.subnav .menu-foot{border:0}
  .subnav .menu-foot{margin-block-start:1.6rem;padding-block-start:0}
}

@keyframes menu-swoosh{
  0%{clip-path:ellipse(38% 12% at 112% 14%);opacity:.78;transform:translate3d(52%,0,0) rotate(-4deg)}
  68%{clip-path:ellipse(62% 22% at 56% 20%);opacity:.34;transform:translate3d(4%,-.25rem,0) rotate(-2deg)}
  100%{clip-path:ellipse(74% 28% at -6% 25%);opacity:0;transform:translate3d(-34%,-.45rem,0) rotate(-1deg)}
}

@media (prefers-reduced-motion:reduce){
  .subnav[data-open]::before{animation:none}
}

/* ============================================================
   32. Mobile-Menü — eine Navigation, kein zweites Tab-Menü
   Beim Öffnen verschwindet die Bereichsschiene im Kopf. So bleiben
   Marke, Schließen und die eigentlichen Kategorien klar getrennt.
   ============================================================ */
@media (max-width:46rem){
  .hdr .tracks{
    transition:opacity 160ms ease-out,transform 300ms var(--e-out);
  }
  body:has(.subnav[data-open]) .hdr .tracks{
    opacity:0;pointer-events:none;transform:translateY(-.7rem);
  }
  .subnav .menu-in{
    padding-block-start:calc(7.45rem + env(safe-area-inset-top));
    padding-block-end:max(2.5rem,env(safe-area-inset-bottom));
  }
  .subnav .menu-group + .menu-group{margin-block-start:.85rem}
  .subnav .menu-trigger{min-height:4.5rem}
  .subnav .menu-foot{margin-block-start:2.35rem}
}

@media (prefers-reduced-motion:reduce){
  .hdr .tracks{transition:none}
}

/* ============================================================
   33. Momentum B-Side — Eventfokus und neue Startbühne
   Das Foto und der Ablauf tragen die Seite; der Chrome-Button ist ein
   greifbares Zeichen der Kollaboration, keine zusätzliche UI-Kachel.
   ============================================================ */
.ev-chrome-mark{
  display:block;width:clamp(5.25rem,8vw,8.25rem);aspect-ratio:1;
  object-fit:cover;clip-path:circle(47% at 50% 50%);
  filter:drop-shadow(0 .75rem 1.25rem rgba(0,0,0,.3));
}
.ev-concept{
  margin:0;color:var(--bone);font-family:Baskerville,"Iowan Old Style","Palatino Linotype",Georgia,serif;
  font-size:clamp(1.7rem,3vw,2.7rem);letter-spacing:-.045em;line-height:1;
}
.ev-flow{
  display:grid;gap:0;margin-block-start:clamp(2.5rem,6vw,5rem);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.ev-flow li{padding:1.5rem 0 1.7rem;border-top:1px solid var(--rule-soft)}
.ev-flow li:first-child{border-top:0}
.ev-flow .t-label{margin:0 0 .8rem;color:var(--beam)}
.ev-flow h3{margin:0;color:var(--bone);font-size:clamp(1.8rem,3vw,2.7rem);letter-spacing:-.045em}
.ev-flow li>p:last-child{margin:.55rem 0 0;max-width:26ch;color:var(--bone-70)}
.ev-ticket{background:var(--ink-2)}
.ev-ticket-in{
  display:grid;gap:1.4rem;align-items:end;
  padding-block:clamp(1rem,3vw,2.75rem);
}
.ev-ticket-in .t-h2{margin:.7rem 0 0}
.ev-ticket-in .t-body{max-width:34ch;margin:0;color:var(--bone-70)}
.ev-menu-in{
  display:grid;gap:1.4rem;align-items:end;padding:clamp(1.4rem,3vw,2.4rem);
  border-radius:1.3rem;
}
.ev-menu-in .t-h2{margin:0}
.ev-menu-in .t-body{max-width:38ch;margin-block-start:.7rem}
.ev-menu-in .btn{justify-self:start}

/* MAKE, MUNICH und MOVE lösen sich jetzt beim Öffnen des Fotos aus
   einer Richtung. Das Bild zieht diagonal hinein; die Wörter weichen
   mit dem Scrollen auseinander und bleiben als eine Bühne lesbar. */
.home-hero{height:158vh}
.home-hero .band{
  inset-inline:30% -6%;
  clip-path:polygon(
    calc(76% - var(--p) * 76%) 7%,
    100% 0,
    100% 100%,
    calc(54% - var(--p) * 54%) 93%
  );
}
.home-hero .band img{
  object-position:50% 19%;
  transform:translate3d(calc(var(--p) * -5vw),calc(var(--p) * -4vh),0)
    scale(calc(1.34 - var(--p) * .18));
}
.home-hero .claim .w1{
  transform:translate3d(calc(var(--p) * -4vw),calc(var(--p) * -8vh),0);
}
.home-hero .claim .w2{
  transform:translate3d(calc(7vw - var(--p) * 2vw),calc(var(--p) * -1.2vh),0);
}
.home-hero .claim .w3{
  transform:translate3d(calc(var(--p) * 3vw),calc(var(--p) * 8vh),0);
}

@media (min-width:56rem){
  .ev-flow{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,4vw,4rem)}
  .ev-flow li{border-top:0;padding-block:1.75rem 2rem}
  .ev-ticket-in{grid-template-columns:1.25fr .8fr auto;gap:clamp(2rem,5vw,6rem)}
  .ev-menu-in{grid-template-columns:minmax(0,1fr) auto;gap:clamp(2rem,6vw,7rem)}
}

@media (max-width:60rem){
  .home-hero{height:150vh}
  .home-hero .band img{
    object-position:50% 16%;
    transform:translate3d(calc(var(--p) * -6vw),calc(var(--p) * -10svh),0)
      scale(calc(1.26 - var(--p) * .14));
  }
  .home-hero .claim .w1,.home-hero .claim .w2,.home-hero .claim .w3{transform:none}
}

@media (max-width:46rem){
  .ev-chrome-mark{width:5.35rem}
  .ev-flow li{padding-block:1.35rem 1.5rem}
  .ev-ticket-in .btn{inline-size:100%}
  .ev-menu-in .btn{inline-size:100%}
}

@media (prefers-reduced-motion:reduce){
  .home-hero .band img{transform:scale(1.16)}
  .home-hero .claim .w1,.home-hero .claim .w3{transform:none}
  .home-hero .claim .w2{transform:translate3d(7vw,0,0)}
  .ev-chrome-mark{filter:none}
  .agency-pixel-field::before{background:rgba(37,45,58,.68);-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* ============================================================
   34. Mobile-Reparatur — eine Touch-Navigation, ein sichtbares Bild
   Querformat auf Telefonen fiel bisher in den Desktop-Breakpoint. Dadurch
   blieb die Bereichsschiene beim Öffnen stehen. Die Bildmaske der Bühne
   wurde außerdem von der Desktop-Variante überschrieben und schrumpfte zu
   einem Schlitz. Diese Regeln gelten bewusst bis Tabletbreite.
   ============================================================ */
@media (max-width:60rem){
  :root{--hdr-h:0rem;--subnav-h:0rem;--chrome:0rem}
  html{scroll-padding-block-start:1rem}

  .hdr,.hdr.is-stuck{
    position:relative;inset-block-start:auto;
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"brand toggle" "tracks tracks";
    align-items:center;gap:.55rem .75rem;
    min-height:0;margin:.65rem var(--gut) 0;padding:.7rem 0 .35rem;
    border:0;border-radius:0;background:transparent;box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
  .hdr .brand{
    grid-area:brand;min-height:2.75rem;margin:0;padding-inline:.2rem;
    font-size:1.35rem;
  }
  .hdr .btn-hdr{display:none}
  .hdr .nav-toggle{
    grid-area:toggle;display:flex;inline-size:2.75rem;block-size:2.75rem;
    border:1px solid var(--glass-edge);border-radius:50%;
    background:rgba(32,39,51,.34);
    box-shadow:inset 0 1px 0 rgba(244,240,232,.10),0 8px 20px rgba(19,24,34,.12);
  }
  .hdr .nav-toggle span,.hdr .nav-toggle span::before,.hdr .nav-toggle span::after{
    width:1.1rem;height:1.5px;
  }
  .hdr .nav-toggle span::before{transform:translateY(-.32rem)}
  .hdr .nav-toggle span::after{transform:translateY(.32rem)}
  .hdr .nav-toggle[aria-expanded="true"] span::before{transform:rotate(45deg)}
  .hdr .nav-toggle[aria-expanded="true"] span::after{transform:rotate(-45deg)}
  .hdr .tracks{
    grid-area:tracks;inline-size:100%;min-height:3.05rem;max-height:none;
    margin:0;padding:.24rem;
    border-radius:1.58rem 1.9rem 1.74rem 1.48rem / 54% 48% 52% 46%;
    background:rgba(32,39,51,.84);
    transition:opacity 160ms ease-out,transform 300ms var(--e-out);
  }
  .hdr .tracks a{flex:1;justify-content:center;min-height:2.75rem;padding-inline:.55rem;font-size:.96rem}
  .hdr .tracks-pill{inset-block:.24rem}
  .nav-open .hdr .tracks{opacity:0;pointer-events:none;transform:translateY(-.7rem)}

  .subnav{
    position:fixed;z-index:850;inset:0;display:flex;overflow:hidden;
    border:0;border-radius:0;background:var(--ink);box-shadow:none;
    opacity:0;pointer-events:none;transform:translateY(-.75rem);
    transition:opacity 180ms ease-out,transform 360ms var(--e-out);
  }
  .subnav[data-open]{opacity:1;pointer-events:auto;transform:none}
  .subnav::before,.subnav::after,.subnav .menu-trigger::after,.subnav .menu-panel::before{content:none}
  .subnav[data-open]::before{
    content:"";position:absolute;z-index:0;pointer-events:none;
    inset:-10rem -32% auto;height:20rem;border:0;
    background:rgba(52,60,74,.92);
    clip-path:ellipse(47% 18% at 114% 16%);
    animation:menu-swoosh 520ms var(--e-out) both;
  }
  .subnav .menu-in{
    position:relative;z-index:1;display:flex;flex:1;flex-direction:column;
    align-items:stretch;gap:0;min-height:0;overflow-y:auto;
    padding:calc(6.3rem + env(safe-area-inset-top)) var(--gut) max(2rem,env(safe-area-inset-bottom));
  }
  .subnav .menu-group{position:relative;width:100%;border:0}
  .subnav .menu-group + .menu-group{margin-block-start:.85rem}
  .subnav .menu-trigger{
    width:100%;min-height:4.25rem;padding-inline:.15rem;justify-content:space-between;
    border:0;border-radius:0;font-size:clamp(1.6rem,5.8vw,2.25rem);
    font-weight:520;letter-spacing:-.045em;color:var(--bone);
  }
  .subnav .menu-panel{
    position:relative;inset:auto;display:grid;grid-template-rows:0fr;min-width:0;
    margin:0;padding:0 .15rem;overflow:hidden;opacity:0;transform:translateY(-.55rem);
    border:0;border-radius:0;background:none;box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;
    transition:grid-template-rows 360ms var(--e-out),opacity 160ms ease-out,transform 360ms var(--e-out);
  }
  .subnav .menu-panel[data-open]{grid-template-rows:1fr;opacity:1;transform:none}
  .subnav .menu-panel-in{display:flex;flex-direction:column;min-height:0;overflow:clip}
  .subnav .menu-panel a{
    min-height:2.75rem;padding-inline:.15rem;border-radius:0;
    color:var(--bone-70);opacity:0;transform:translateY(-.45rem);
    transition:opacity 200ms ease-out,transform 360ms var(--e-out);
  }
  .subnav .menu-panel a:first-child{margin-block-start:.55rem}
  .subnav .menu-panel a:last-child{margin-block-end:.75rem}
  .subnav .menu-panel[data-open] a{opacity:1;transform:none}
  .subnav .menu-panel[data-open] a:nth-child(2){transition-delay:45ms}
  .subnav .menu-panel[data-open] a:nth-child(3){transition-delay:90ms}
  .subnav .menu-foot{display:block;margin-block-start:2rem;padding:0;border:0}

  .home-hero .band{
    position:static;inset:auto;translate:0;
    height:42svh;margin-block-start:1.8rem;
    clip-path:polygon(0 8%,100% 0,100% 100%,4% 92%);
  }
  .home-hero .band img{
    object-position:50% 16%;
    transform:translate3d(calc(var(--p) * -6vw),calc(var(--p) * -10svh),0)
      scale(calc(1.26 - var(--p) * .14));
  }
  .home-hero .claim .w1,.home-hero .claim .w2,.home-hero .claim .w3{transform:none}
}

@media (max-width:60rem) and (prefers-reduced-motion:reduce){
  .subnav,.subnav .menu-panel,.subnav .menu-panel a,.hdr .tracks{transition:none}
  .subnav[data-open]::before{animation:none}
  .home-hero .band img{transform:scale(1.1)}
}

/* Die Aussage bleibt zweizeilig: „Ein Ablauf.“ wird nie mehr in zwei
   zufällige Zeilen zerlegt. */
.editorial-title span{display:block;white-space:nowrap}
@media (max-width:46rem){
  .editorial-title{font-size:clamp(3rem,13.5vw,4.7rem)}
}

/* ============================================================
   35. Startseite — konzentrierte Informationshierarchie
   Die Startseite spricht durch die großen Aussagen, das Event und die
   vier Gewerke. Nummern, wiederholte Vorspänne und ein Zahlenband nehmen
   dem Inhalt sonst nur Gewicht, ohne eine Entscheidung leichter zu machen.
   ============================================================ */
.page-home .claim,
.page-home .editorial-title,
.page-home .home-event-title,
.page-home .home-close h2,
.page-home .brand{
  letter-spacing:-.02em;
  text-transform:none;
  font-optical-sizing:auto;
}

.page-home .service-list{display:grid;border-bottom:1px solid var(--rule)}
.page-home .service-list article{
  display:grid;grid-template-columns:minmax(9rem,.62fr) minmax(0,1.38fr);
  gap:clamp(1.25rem,4vw,4rem);align-items:baseline;
  padding-block:clamp(1.45rem,2.7vw,2.25rem);border-top:1px solid var(--rule);
}
.page-home .service-list h3{
  margin:0;color:var(--bone);font-size:clamp(2rem,4.4vw,4.3rem);
  font-weight:590;letter-spacing:-.02em;line-height:.94;text-transform:none;
}
.page-home .service-list p{
  max-width:45ch;margin:0;color:var(--bone-70);font-size:clamp(1rem,1.25vw,1.12rem);
}

.page-home .home-event-card{gap:.85rem}
.page-home .home-event-countdown{
  display:flex;align-items:baseline;gap:.55rem;padding-block-start:1rem;
  border-top:1px solid var(--rule);
}
.page-home .home-event-countdown strong{
  color:var(--bone);font-size:clamp(2rem,4vw,3.15rem);font-weight:650;
  letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums;
}
.page-home .home-event-countdown span{color:var(--bone-70);font-size:.95rem}

.page-home .foot h3{letter-spacing:0;text-transform:none}

@media (max-width:60rem){
  .page-home .home-hero .claim{letter-spacing:-.02em}
  .page-home .service-list article{grid-template-columns:1fr;gap:.65rem;padding-block:1.4rem}
  .page-home .service-list h3{font-size:clamp(2.05rem,10vw,3.65rem)}
  .page-home .home-event-countdown{align-items:center}
}

/* ============================================================
   36. Navigation — eine Ebene statt einer Menü-Kachel
   Das Menü ist eine eigene, ruhige Fläche. Die Bereichsschiene gehört
   zur Seite darunter und verschwindet beim Öffnen komplett. Der Swoosh
   ist nur der kurze Auftakt aus dem Menüknopf, keine gezeichnete Linie.
   ============================================================ */
.subnav{
  position:fixed;z-index:850;inset:0;display:flex;overflow:hidden;
  background:var(--ink);border:0;border-radius:0;box-shadow:none;
  opacity:0;pointer-events:none;transform:translate3d(0,-.6rem,0);
  transition:opacity 160ms ease-out,transform 320ms var(--e-out);
}
.subnav[data-open]{opacity:1;pointer-events:auto;transform:none}
.subnav::after,.subnav .menu-trigger::after,.subnav .menu-panel::before{content:none}
.subnav::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  inset:-9rem -38% auto;height:19rem;border:0;border-radius:0;
  background:rgba(52,60,74,.9);clip-path:ellipse(44% 16% at 110% 14%);
  opacity:0;transform:translate3d(42%,0,0) rotate(-3deg);
}
.subnav[data-open]::before{animation:menu-swoosh 500ms var(--e-out) both}
.menu-in{
  position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  align-content:start;gap:clamp(1.75rem,5vw,5rem);width:100%;max-width:var(--wrap);
  margin-inline:auto;padding:calc(var(--hdr-h) + clamp(3rem,8vh,7rem)) var(--gut) 3rem;
  overflow-y:auto;
}
.menu-group{position:relative;min-width:0}
.menu-trigger{
  width:100%;min-height:3.2rem;padding:0;justify-content:space-between;
  border:0;border-radius:0;background:none;color:var(--bone);
  font-size:clamp(2rem,3.2vw,3.75rem);font-weight:580;letter-spacing:-.05em;
  line-height:.98;
  transition:color var(--t-tap) ease-out,transform var(--t-ui) var(--e-out);
}
.menu-trigger:hover{background:none;color:var(--bone)}
.menu-trigger:active{transform:scale(.985)}
.menu-trigger .chev{width:1.25rem;height:1.25rem;flex:none;transition:transform 240ms var(--e-out)}
.menu-trigger[aria-expanded="true"] .chev{transform:rotate(180deg)}
.menu-group[data-here] .menu-trigger{color:var(--bone)}
.menu-group[data-here] .menu-trigger::after{display:none}
.menu-panel{
  position:relative;inset:auto;display:grid;grid-template-rows:0fr;min-width:0;
  margin:0;padding:0;overflow:hidden;opacity:0;transform:translate3d(0,-.5rem,0);
  border:0;border-radius:0;background:none;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  transition:grid-template-rows 300ms var(--e-out),opacity 140ms ease-out,transform 300ms var(--e-out);
}
.menu-panel[data-open]{grid-template-rows:1fr;opacity:1;transform:none}
.menu-panel-in{display:flex;flex-direction:column;min-height:0;overflow:clip;padding-block:.85rem .25rem}
.menu-panel a{
  min-height:2.6rem;padding:0;border-radius:0;background:none;color:var(--bone-70);
  font-size:clamp(1rem,1.3vw,1.15rem);opacity:0;transform:translate3d(0,-.35rem,0);
  transition:color var(--t-tap) ease-out,opacity 160ms ease-out,transform 300ms var(--e-out);
}
.menu-panel a:hover{background:none;color:var(--bone)}
.menu-panel a[aria-current]{background:none;color:var(--bone)}
.menu-panel[data-open] a{opacity:1;transform:none}
.menu-panel[data-open] a:nth-child(2){transition-delay:40ms}
.menu-panel[data-open] a:nth-child(3){transition-delay:80ms}
.menu-panel[data-open] a:nth-child(4){transition-delay:120ms}
.menu-foot{grid-column:1/-1;display:block;margin:clamp(1rem,3vh,2.5rem) 0 0;padding:0;border:0}
.menu-foot .btn{min-height:3.2rem}

body.nav-open .hdr .tracks{opacity:0;pointer-events:none;transform:translate3d(0,-.55rem,0)}

@media (max-width:60rem){
  .menu-in{
    grid-template-columns:1fr;gap:1.1rem;
    padding:calc(5.4rem + env(safe-area-inset-top)) var(--gut) max(2.25rem,env(safe-area-inset-bottom));
  }
  .menu-trigger{min-height:4.4rem;font-size:clamp(2rem,9.4vw,3rem)}
  .menu-trigger .chev{width:1.35rem;height:1.35rem}
  .menu-panel-in{padding-block:.25rem .55rem}
  .menu-panel a{min-height:2.75rem;font-size:1.08rem}
  .menu-foot{margin-block-start:1.25rem}
}

@media (prefers-reduced-motion:reduce){
  .subnav,.menu-trigger,.menu-trigger .chev,.menu-panel,.menu-panel a,.hdr .tracks{transition:none}
  .subnav[data-open]::before{animation:none}
}

@media (prefers-reduced-transparency:reduce){
  .subnav{background:var(--ink-2)}
}

/* ============================================================
   37. Rhythmus, Schrift und Material — ruhiger, nicht leer
   Große Abstände bleiben dort, wo Bild oder Aussage eine Bühne brauchen.
   Dazwischen führt ein engerer Leserythmus. Bewegungen zeigen einen neuen
   Inhalt an und enden sofort; Glas bleibt den tatsächlich schwebenden
   Bedienebenen vorbehalten.
   ============================================================ */
h1,h2,h3,h4{word-spacing:normal}
.t-label{font-size:.7rem;letter-spacing:.15em}
.t-small{line-height:1.45}

/* Ein kurzer, gerader Swipe statt einer langen dekorativen Schnittmaske. */
.js [data-reveal]{
  transform:translate3d(0,.7rem,0);rotate:0deg;
  transition:opacity 180ms ease-out,transform 420ms var(--e-out);
}
.js [data-reveal]:not(img){
  clip-path:none;
  transition:opacity 180ms ease-out,transform 420ms var(--e-out);
}
.js [data-reveal].is-in{transform:none}

/* Kopf und Eventdaten sind die wenigen Ebenen, die bewusst über Inhalt schweben. */
.hdr .tracks,.hdr .nav-toggle{
  -webkit-backdrop-filter:var(--glass-blur-soft);
  backdrop-filter:var(--glass-blur-soft);
}
.home-event-card,.ev-menu-in,.ev-facts.glass-soft,.cd.glass{
  border-color:rgba(244,240,232,.2);
  box-shadow:var(--glass-lip),var(--glass-floor),0 16px 34px rgba(17,22,32,.18);
}

/* Der Bildmoment auf dem Handy bleibt präsent und wird beim Scrollen sichtbar geöffnet. */
@media (max-width:60rem){
  .page-home .home-hero{height:142vh}
  .page-home .home-hero .band{height:44svh;margin-block-start:1.5rem}
  .page-home .home-hero .band img{
    transform:translate3d(calc(var(--p) * -7vw),calc(var(--p) * -7svh),0)
      scale(calc(1.28 - var(--p) * .16));
  }
  .page-home .home-services{padding-block:3.25rem}
  .page-home .service-photo{margin-block-start:2.5rem}
  .page-home .service-layout{margin-block-start:2.25rem}
  .page-home .home-event{min-height:92svh;padding-block:3.5rem}
  .ev-hero{min-height:82svh;padding-block:2.2rem 1.8rem}
}

@media (hover:hover) and (pointer:fine){
  .home-event-card,.ev-menu-in{transition:transform 220ms var(--e-out),box-shadow 220ms ease-out}
  .home-event-card:hover,.ev-menu-in:hover{transform:translateY(-.16rem);box-shadow:var(--glass-lip),var(--glass-floor),0 22px 42px rgba(17,22,32,.25)}
}

@media (prefers-reduced-motion:reduce){
  .js [data-reveal],.js [data-reveal]:not(img){transform:none;clip-path:none;transition:none}
  .home-event-card,.ev-menu-in{transition:none}
  .home-event-card:hover,.ev-menu-in:hover{transform:none}
}

@media (prefers-reduced-transparency:reduce){
  .hdr .tracks,.hdr .nav-toggle{-webkit-backdrop-filter:none;backdrop-filter:none}
  .home-event-card,.ev-menu-in,.ev-facts.glass-soft,.cd.glass{box-shadow:none}
}

/* Auch der Ticket-Hinweis unter den Eventfakten bleibt auf dem Handy gut treffbar. */
.ev-facts + .t-small .tlink{display:inline-flex;align-items:center;min-block-size:2.75rem}

/* ============================================================
   38. Bereichsschiene — aktiver Sitz
   Die zwei Bereiche bleiben derselbe vertraute Schalter. Der aktive Bereich
   sitzt mit Luft in der dunklen Schiene und gleitet beim Wechsel als ein
   zusammenhängendes Material zum anderen Ziel. Die Kopfzone endet bewusst
   vor dem Bild, damit die Schiene nie an dessen Kante klebt.
   ============================================================ */
@media (min-width:46.0625rem){
  :root{--hdr-h:clamp(13.25rem,16vw,15.5rem)}
  .hdr,.hdr.is-stuck{
    gap:clamp(.95rem,1.6vw,1.45rem);
    padding:clamp(1rem,1.5vw,1.35rem) 0 clamp(1.35rem,2vw,1.85rem);
  }
  .hdr .tracks{
    min-height:5.25rem;max-height:5.25rem;padding:.32rem;
    border-radius:999px;
    background:rgba(32,39,51,.7);
    border-color:rgba(244,240,232,.18);
    box-shadow:inset 0 1px 0 rgba(244,240,232,.12),0 10px 24px rgba(19,24,34,.16);
  }
  .hdr .tracks a{
    min-height:4.61rem;font-size:clamp(1.12rem,1.55vw,1.48rem);
    color:var(--bone-70);font-weight:520;
  }
}

.tracks-pill{
  inset-block:.42rem;
  border:1px solid rgba(244,240,232,.14);
  border-radius:999px;
  background:rgba(244,240,232,.11);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 7px 16px rgba(19,24,34,.16);
  transition:
    transform 360ms cubic-bezier(.16,1,.3,1),
    width 360ms cubic-bezier(.16,1,.3,1),
    box-shadow 180ms ease-out;
  will-change:transform,width;
}
.tracks a[aria-current],.tracks.is-switching a[data-switch-target]{color:var(--bone);font-weight:600}
.tracks.is-switching a[aria-current]{color:var(--bone-70)}
.tracks[data-switching] .tracks-pill{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 10px 22px rgba(19,24,34,.22);
}
.tracks a:active{transform:scale(.985)}

@media (max-width:60rem){
  .hdr,.hdr.is-stuck{padding-block-end:1rem}
  .hdr .tracks{
    padding:.32rem;border-radius:999px;
    background:rgba(32,39,51,.82);border-color:rgba(244,240,232,.18);
  }
  .hdr .tracks a{min-height:2.75rem;color:var(--bone-70)}
  .hdr .tracks-pill{inset-block:.42rem}
}

@media (prefers-reduced-motion:reduce){
  .tracks-pill{transition:none}
  .tracks a:active{transform:none}
}