/* ==========================================================================
   ROCK THE RACE · Die Zieluhr
   Schwarzer Grund, Fotos in Schwarzweiß, Daten in Mono wie auf der Zeitnahme,
   und genau ein Rot: Anmeldung, aktuelle Preisphase, Sekunden der Zieluhr.
   Farben exakt aus dem Wix-Theme. Radius 0 überall. Zwei Kurven.
   Richtung: _design/RICHTUNG.md
   ========================================================================== */

/* ---------- Schriften (selbst gehostet, OFL, latin + latin-ext) ---------- */
@font-face{font-family:"Barlow Condensed";src:url("/assets/fonts/barlowcond-800i-latin.woff2") format("woff2");font-weight:800;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Barlow Condensed";src:url("/assets/fonts/barlowcond-800i-latin-ext.woff2") format("woff2");font-weight:800;font-style:italic;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Barlow Condensed";src:url("/assets/fonts/barlowcond-700-latin.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Barlow Condensed";src:url("/assets/fonts/barlowcond-700-latin-ext.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Barlow";src:url("/assets/fonts/barlow-400-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Barlow";src:url("/assets/fonts/barlow-400-latin-ext.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Barlow";src:url("/assets/fonts/barlow-400i-latin.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Barlow";src:url("/assets/fonts/barlow-400i-latin-ext.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Barlow";src:url("/assets/fonts/barlow-600-latin.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Barlow";src:url("/assets/fonts/barlow-600-latin-ext.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Martian Mono";src:url("/assets/fonts/martianmono-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Martian Mono";src:url("/assets/fonts/martianmono-latin-ext.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ---------- Tokens ---------- */
:root{
  --ink:#000000;        /* Marke color_11: Seitengrund */
  --raise:#0E0E0E;      /* abgeleitet: nur Bildplatzhalter und Flächen ohne Kleintext.
                           Flächen mit Text (Ticket, Player, Leiste, Consent) stehen auf --ink und
                           grenzen sich über die Haarlinie ab: #777 und Rot bleiben so über 4,5:1 */
  --paper-dim:rgb(229 224 224 / .8); /* Mono-Labels auf Fotoflächen statt #777 */
  --line:#333333;       /* Marke color_38: Haarlinien */
  --mid:#777777;        /* Marke color_13: Mono-Labels, Metadaten */
  --paper:#E5E0E0;      /* Marke color_14: Fließtext, Partnerwand */
  --white:#FFFFFF;      /* Marke color_15: Display, Uhr, Preise */
  --red:#E92929;        /* Marke color_42: das Signal */
  --red-press:#BE1C1C;  /* Marke color_18: Hover/Active */

  --scrim:linear-gradient(to top, rgb(0 0 0 / .9) 0%, rgb(0 0 0 / .8) 30%, rgb(0 0 0 / .5) 52%, rgb(0 0 0 / 0) 78%);
  /* Gegenstück oben: hält Navigation und Kicker über hellem Schlamm lesbar */
  --scrim-top:linear-gradient(to bottom, rgb(0 0 0 / .6) 0%, rgb(0 0 0 / .25) 22%, rgb(0 0 0 / 0) 36%);

  --ease-out:cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out:cubic-bezier(0.77, 0, 0.175, 1);

  --f-display:"Barlow Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
  --f-text:"Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono:"Martian Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --gutter:max(clamp(16px, 4vw, 64px), env(safe-area-inset-left), env(safe-area-inset-right));
  --maxw:1400px;
  --col-gap:24px;
  --hdr:72px;
  --sec:clamp(96px, 12vw, 176px);
  --head-gap:48px;

  color-scheme:dark;
}
@media (max-width:767px){
  :root{ --hdr:64px; --col-gap:16px; --head-gap:32px; }
}

/* ---------- Grundlagen ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
  scroll-padding-top:calc(var(--hdr) + 24px);
  background:var(--ink);
}
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--f-text);
  font-size:clamp(17px, 0.4vw + 15px, 19px);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  hyphens:none;
  font-synthesis:none;
}
img,video,svg,iframe{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
dl,dd{ margin:0; }
figure{ margin:0; }
button,input,textarea,select{ font:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:0; padding:0; }
hr{ border:0; border-top:1px solid var(--line); margin:48px 0; }
::selection{ background:var(--red); color:var(--ink); }
:focus-visible{ outline:2px solid var(--white); outline-offset:3px; border-radius:0; }
[hidden]{ display:none !important; }
strong,b{ font-weight:600; color:var(--white); }
main:focus{ outline:none; }

.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
.skip-link{
  position:fixed; left:16px; top:12px; z-index:100;
  background:var(--white); color:var(--ink); padding:14px 18px;
  font:700 15px/1 var(--f-display); letter-spacing:.04em; text-transform:uppercase; text-decoration:none;
  transform:translateY(-200%);
}
.skip-link:focus{ transform:none; }

.icon{ width:1em; height:1em; flex:none; fill:currentColor; }

/* ---------- Raster ---------- */
.wrap{
  width:100%;
  max-width:calc(var(--maxw) + 2 * var(--gutter));
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.g12{ display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:var(--col-gap); }
@media (max-width:767px){ .g12{ grid-template-columns:minmax(0, 1fr); } .g12 > *{ grid-column:1 / -1 !important; } }

.sec{ padding-block:var(--sec); }
.sec + .sec{ padding-top:0; }
.sec--rule{ border-top:1px solid var(--line); }
.sec + .sec--rule{ padding-top:var(--sec); }
.sec--tight{ padding-block:clamp(64px, 8vw, 128px); }
.sec.sec--flush-top{ padding-top:0; } /* direkt unter Seitenkopf oder Datenzeile, statt Inline-Style */
.data + .sponsor{ margin-top:48px; }
.phead .lead + .lnks{ margin-top:40px; }
/* Race-Result- und Kartenzeilen: Überschrift und Zeile als eine Einheit, Blöcke enger gestapelt */
.embed-block + .embed-block{ margin-top:clamp(64px, 7vw, 112px); }
.rows ~ .gate{ margin-top:clamp(32px, 4vw, 48px); }

/* ---------- Typografie ---------- */
h1, .h1, h2, .h2, .dsp{
  hyphens:manual; overflow-wrap:break-word; /* nur weiche Trennstellen (­) im HTML, keine automatische Silbentrennung */
  font-family:var(--f-display);
  font-weight:800;
  font-style:italic;
  text-transform:uppercase;
  color:var(--white);
  margin:0;
  text-wrap:balance;
}
h1, .h1{ font-size:clamp(56px, 8.5vw, 136px); line-height:.86; letter-spacing:-.005em; max-width:12ch; padding-bottom:.04em; margin-left:-.03em; }
h2, .h2{ font-size:clamp(40px, 5.2vw, 84px); line-height:.9; max-width:16ch; padding-bottom:.04em; }
h3, .h3{
  font-family:var(--f-display); font-weight:700; font-style:normal; text-transform:uppercase;
  font-size:clamp(22px, 2.2vw, 30px); line-height:1.05; letter-spacing:.01em; color:var(--white);
  margin:0; max-width:none; text-wrap:balance; hyphens:manual; overflow-wrap:break-word;
}
.lead{
  font-size:clamp(20px, 1.5vw, 24px); line-height:1.45; letter-spacing:-.005em;
  max-width:48ch; color:var(--paper); text-wrap:pretty;
}
.prose{ max-width:64ch; }
.prose p{ text-wrap:pretty; }
.prose a, .lnk-in{
  color:var(--white);
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.22em;
  text-decoration-color:var(--mid);
  transition:text-decoration-color 200ms ease;
}
.prose em{ font-style:italic; }
.prose .lead{ margin-bottom:24px; }
.hi{ font-weight:600; color:var(--white); }

/* Mono */
.ml{
  font-family:var(--f-mono); font-weight:400;
  font-size:12px; line-height:1.3; letter-spacing:.08em; text-transform:uppercase;
  color:var(--mid);
}
.mv{
  font-family:var(--f-mono); font-weight:400;
  font-size:clamp(14px, .15vw + 13px, 16px); line-height:1.4; letter-spacing:.02em;
  font-variant-numeric:tabular-nums; color:var(--paper);
}
@media (max-width:767px){ .ml{ font-size:11px; } }

@media (hover:hover) and (pointer:fine){
  .prose a:hover, .lnk-in:hover{ text-decoration-color:var(--paper); }
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  min-height:52px; padding:0 24px;
  font:700 16px/1 var(--f-display); letter-spacing:.04em; text-transform:uppercase;
  text-decoration:none; white-space:nowrap;
  border:0; border-radius:0;
  transition:transform 140ms var(--ease-out), background-color 200ms ease, color 200ms ease;
}
.btn .icon{ width:14px; height:14px; }
.btn:active{ transform:scale(.97); }
.btn--red{ background:var(--red); color:var(--ink); }
.btn--line{ background:transparent; color:var(--white); box-shadow:inset 0 0 0 1px var(--white); }
@media (hover:hover) and (pointer:fine){
  .btn--red:hover{ background:var(--red-press); color:var(--white); }
  .btn--line:hover{ background:var(--white); color:var(--ink); }
}
.btn--red:active{ background:var(--red-press); color:var(--white); }
@media (max-width:767px){ .btn{ min-height:56px; font-size:17px; } }

/* sekundär: Mono-Link mit Unterstrich */
.lnk{
  display:inline-flex; align-items:center; gap:8px;
  min-height:48px;
  font-family:var(--f-mono); font-size:13px; line-height:1.3; letter-spacing:.08em; text-transform:uppercase;
  color:var(--paper); text-align:left;
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:6px; text-decoration-color:var(--line);
  transition:text-decoration-color 200ms ease, color 200ms ease;
}
.lnk .icon{ width:11px; height:11px; }
@media (hover:hover) and (pointer:fine){
  .lnk:hover{ text-decoration-color:var(--paper); color:var(--white); }
}
.lnks{ display:flex; flex-wrap:wrap; gap:0 32px; align-items:center; }

/* ---------- Header ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:50;
  height:calc(var(--hdr) + env(safe-area-inset-top));
  padding-top:env(safe-area-inset-top);
  background:var(--ink);
  border-bottom:1px solid var(--line);
  transition:background-color 200ms ease, border-color 200ms ease;
}
.site-header[data-overlay]:not(.is-scrolled){ background:transparent; border-bottom-color:transparent; }
.hdr{ height:var(--hdr); display:flex; align-items:center; gap:32px; }
.brand{ display:block; flex:none; margin-right:auto; }
.brand img{ height:44px; width:auto; }
.nav > ul{ display:flex; align-items:center; gap:28px; }
.nav a, .sub-toggle{
  display:inline-flex; align-items:center; gap:6px; min-height:48px;
  font:700 15px/1 var(--f-display); letter-spacing:.04em; text-transform:uppercase;
  color:var(--paper); text-decoration:none;
  text-decoration-thickness:1px; text-underline-offset:8px;
  transition:color 200ms ease;
}
.nav a[aria-current="page"]{ color:var(--white); text-decoration:underline; }
.sub-toggle .icon{ width:10px; height:10px; transition:transform 180ms var(--ease-out); }
.sub-toggle[aria-expanded="true"] .icon{ transform:rotate(180deg); }
.has-sub{ position:relative; }
.sub{
  position:absolute; top:calc(100% + 4px); left:-20px; min-width:220px;
  background:var(--raise); border:1px solid var(--line);
  padding:8px 0;
  opacity:0; visibility:hidden; transform:translateY(-4px); transform-origin:top left;
  transition:opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 0s linear 180ms;
}
.sub.is-open{ opacity:1; visibility:visible; transform:none; transition:opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 0s; }
.sub a{ display:flex; width:100%; padding:0 20px; }
@media (hover:hover) and (pointer:fine){
  .nav a:hover, .sub-toggle:hover{ color:var(--white); }
}
.hdr-cta{
  min-height:44px; padding:0 18px; font-size:15px;
  transition:transform 140ms var(--ease-out), background-color 200ms ease, color 200ms ease, opacity 200ms ease, visibility 0s;
}
.cta-hidden .hdr-cta{ opacity:0; visibility:hidden; transition:opacity 200ms ease, visibility 0s linear 200ms; }
.menu-toggle{
  display:none; width:48px; height:48px; margin-right:-12px;
  position:relative; color:var(--white);
}
.menu-toggle .bar{
  position:absolute; left:12px; width:24px; height:2px; background:currentColor;
  transition:transform 220ms var(--ease-out);
}
.menu-toggle .bar:first-child{ top:19px; }
.menu-toggle .bar:last-child{ top:27px; }
.menu-toggle[aria-expanded="true"] .bar:first-child{ transform:translateY(4px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .bar:last-child{ transform:translateY(-4px) rotate(-45deg); }

@media (max-width:1180px){
  .nav{ display:none; }
  .menu-toggle{ display:block; }
  .hdr{ gap:16px; }
}
@media (max-width:767px){
  .hdr-cta{ display:none; }
  .brand img{ height:40px; }
}

/* Mobilmenü */
.mnav{
  position:fixed; inset:0; z-index:45;
  background:var(--ink);
  padding:calc(var(--hdr) + env(safe-area-inset-top) + 24px) var(--gutter) calc(24px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:32px;
  overflow-y:auto; overscroll-behavior:contain;
  transform:translateY(-100%);
  transition:transform 220ms var(--ease-in-out);
}
.mnav.is-open{ transform:none; transition:transform 320ms var(--ease-in-out); }
.mnav-main a{
  display:block; padding:4px 0;
  font-family:var(--f-display); font-weight:800; font-style:italic; text-transform:uppercase;
  font-size:clamp(34px, 9vw, 56px); line-height:1; color:var(--paper); text-decoration:none;
  opacity:0; transform:translateY(12px);
  transition:opacity 160ms ease, transform 160ms ease;
}
.mnav.is-open .mnav-main a{
  opacity:1; transform:none;
  transition:opacity 320ms var(--ease-out), transform 320ms var(--ease-out);
  transition-delay:calc(120ms + var(--i, 0) * 40ms);
}
.mnav-main a[aria-current="page"]{ color:var(--white); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:6px; }
.mnav-foot{ margin-top:auto; display:flex; flex-wrap:wrap; gap:0 24px; border-top:1px solid var(--line); padding-top:8px; }
.menu-open, .menu-open body{ overflow:hidden; }

/* ---------- Bilder ---------- */
.ph{ filter:grayscale(1) contrast(1.1) brightness(.9); }
.frame{ position:relative; overflow:hidden; background:var(--raise); }
.frame img{ width:100%; height:100%; object-fit:cover; }
.r-32{ aspect-ratio:3 / 2; }
.r-45{ aspect-ratio:4 / 5; }
.frame--right img{ object-position:78% 50%; } /* Motiv sitzt rechts im Querformat */

/* ---------- Hero Startseite ---------- */
.hero{
  position:relative; isolation:isolate;
  min-height:100vh; min-height:100svh;
  display:flex; align-items:flex-end;
  padding-top:calc(var(--hdr) + env(safe-area-inset-top) + 32px);
  padding-bottom:calc(clamp(32px, 6vh, 72px) + env(safe-area-inset-bottom));
  overflow:hidden;
}
.hero-media{ position:absolute; inset:0; z-index:-1; background:var(--raise); overflow:hidden; }
.hero-media img{ width:100%; height:100%; object-fit:cover; object-position:50% 40%; }
.hero-media::after{ content:""; position:absolute; inset:0; background:var(--scrim), var(--scrim-top); }
.hero-grid{ align-items:end; row-gap:40px; }
.hero-main{ grid-column:1 / span 7; }
.hero-top{ container-type:inline-size; }
.hero-side{ grid-column:8 / span 5; container-type:inline-size; justify-self:end; width:100%; max-width:560px; }
.hero-kicker{ margin-bottom:20px; color:var(--paper); }
.hero-title{ font-size:clamp(60px, 20cqi, 200px); line-height:.9; margin-left:-.045em; max-width:none; }
/* Umlaut-Punkte der Zeile darunter dürfen die Grundlinie nicht berühren */
.hero-title span + span{ margin-top:.02em; }
.hero-title span{ display:block; }
.hero-data{ margin-top:40px; }
.hero-side .btn{ margin-top:24px; width:100%; }

/* Datenzeile */
.data{ display:flex; flex-wrap:wrap; border-top:1px solid var(--line); }
.data > div{ padding:16px 24px 0; border-left:1px solid var(--line); min-width:0; }
.data > div:first-child{ padding-left:0; border-left:0; }
.data dt{ margin-bottom:6px; }
.data dd{ color:var(--paper); }
.data .sub-note{ display:block; margin-top:4px; color:var(--mid); }
.hero .data, .phead--photo .data{ border-top-color:rgb(255 255 255 / .28); }
.hero .data > div, .phead--photo .data > div{ border-left-color:rgb(255 255 255 / .28); }
/* Auf Fotoflächen reicht #777 an hellen Stellen nicht: Labels in gedimmtem Papier */
.hero .ml, .phead--photo .ml, .hero .cc{ color:var(--paper-dim); }
@media (max-width:767px){
  .data{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
  .data > div{ padding:14px 0 14px 16px; border-bottom:1px solid var(--line); }
  .data > div:nth-child(odd){ padding-left:0; border-left:0; }
  .data > div:last-child:nth-child(odd){ grid-column:1 / -1; }
  .hero .data > div, .phead--photo .data > div{ border-bottom-color:rgb(255 255 255 / .28); }
}

/* Tablet: Datenzeile im Hero als 2x2 statt Umbruch mit schiefer Trennlinie */
@media (min-width:768px) and (max-width:1023px){
  .hero-data{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
  .hero-data > div{ padding:14px 0 14px 16px; border-bottom:1px solid rgb(255 255 255 / .28); }
  .hero-data > div:nth-child(odd){ padding-left:0; border-left:0; }
  .hero-data > div:last-child:nth-child(odd){ grid-column:1 / -1; }
}
@media (max-width:767px){
  .hero{ align-items:stretch; padding-top:calc(var(--hdr) + env(safe-area-inset-top) + 24px); }
  .hero > .wrap{ display:flex; flex-direction:column; }
  .hero-media img{ object-position:62% 50%; }
  .hero-media::after{ background:var(--scrim), var(--scrim-top), rgb(0 0 0 / .24); }
  .hero-grid{ display:flex; flex-direction:column; align-items:stretch; flex:1; row-gap:24px; }
  .hero-main{ display:contents; }
  .hero-top{ order:0; }
  /* Mobil: Datum, Ort und Strecken direkt unter den Titel, damit alles im ersten Bildschirm steht */
  .hero-data{ order:1; margin-top:0; }
  .hero-data > div{ padding:10px 0 10px 12px; }
  .hero-data dt{ margin-bottom:2px; }
  .hero-side{ order:2; max-width:none; margin-top:auto; }
}

/* ---------- Die Zieluhr ---------- */
.clock{ color:var(--white); }
.clock-cap{ color:var(--paper); margin-bottom:14px; }
.clock-face{
  display:flex; align-items:flex-start;
  font-family:var(--f-display); font-weight:800; font-style:italic;
  font-size:clamp(50px, 16.4cqi, 112px); line-height:1;
  font-variant-numeric:tabular-nums lining-nums;
}
.cg{ display:flex; flex-direction:column; }
.cg-digits{ display:flex; }
.cd{ position:relative; display:block; width:.54em; height:1em; overflow:hidden; }
.cd-strip{ display:block; }
.cd-strip > span{ display:block; height:1em; line-height:1; text-align:center; }
.cd.is-blank .cd-strip{ visibility:hidden; }
.cc{ width:.3em; text-align:center; color:var(--mid); line-height:.92; }
.cu{ margin-top:10px; }
.cg--s .cd{ color:var(--red); }
.clock-foot{ margin-top:20px; padding-top:14px; border-top:1px solid rgb(255 255 255 / .28); display:flex; flex-wrap:wrap; gap:4px 16px; justify-content:space-between; align-items:center; }
.clock-foot .mv{ color:var(--white); }
.clock-live, .clock-done{ display:none; }
.clock[data-state="race"] .cg--d, .clock[data-state="race"] .cc--d, .clock[data-state="race"] .clock-prices{ display:none; }
.clock[data-state="race"] .clock-live{ display:inline-flex; }
.clock[data-state="done"] .clock-face, .clock[data-state="done"] .cg--s .cd{ color:var(--mid); }
.clock[data-state="done"] .clock-prices{ display:none; }
.clock[data-state="done"] .clock-done{ display:inline-flex; }
.clock.is-tick .cd-strip{ transition:transform 240ms var(--ease-out); }
.clock.is-set .cd-strip{ transition:transform 900ms var(--ease-out); transition-delay:calc(var(--k, 0) * 50ms); }
.clock .cd-strip.no-anim{ transition:none !important; }
.clock--solo{ max-width:560px; container-type:inline-size; margin-top:48px; }
.live-clock[hidden]{ display:none !important; }

/* Tarif-Spans: nur die aktuelle Phase zeigen */
.js .tier-now > [data-from]{ display:none; }
.js .tier-now > [data-from].is-now{ display:inline; }

/* ---------- Seitenkopf ---------- */
.phead{ padding-top:calc(var(--hdr) + env(safe-area-inset-top) + clamp(64px, 9vw, 128px)); padding-bottom:clamp(48px, 6vw, 96px); }
.phead .lead{ margin-top:32px; }
.phead .data{ margin-top:40px; }
.phead .btn{ margin-top:40px; }
.phead--photo{
  position:relative; isolation:isolate;
  min-height:max(600px, min(46vw, 88svh));
  display:flex; align-items:flex-end;
  padding-bottom:clamp(40px, 5vw, 72px);
}
.phead--photo > .wrap{ position:relative; }
.phead-media{ position:absolute; inset:0; z-index:-1; background:var(--raise); overflow:hidden; }
.phead-media img{ width:100%; height:100%; object-fit:cover; }
.phead-media::after{ content:""; position:absolute; inset:0; background:var(--scrim), var(--scrim-top); }
@media (max-width:767px){
  .phead--photo{ min-height:125vw; }
  .phead-media::after{ background:var(--scrim), var(--scrim-top), rgb(0 0 0 / .25); }
  .phead .btn{ width:100%; }
}
/* Anmeldung: Ticket rückt näher an den ersten Bildschirm */
.phead--tight{ padding-top:calc(var(--hdr) + env(safe-area-inset-top) + clamp(40px, 5vw, 72px)); padding-bottom:clamp(40px, 4vw, 56px); }
.phead--tight .lead{ margin-top:24px; }
.phead--tight .data{ margin-top:32px; }
.big-num{ font-size:clamp(120px, 26vw, 360px); line-height:.8; margin:0 0 32px -.05em; }

/* ---------- Scroll-Auftritte ---------- */
.js .rv{ opacity:0; transform:translateY(12px); filter:blur(6px); }
.js .rv.in{
  opacity:1; transform:none; filter:none;
  transition:opacity 700ms var(--ease-out), transform 700ms var(--ease-out), filter 700ms var(--ease-out);
  transition-delay:calc(var(--d, 0) * 60ms);
}

/* ---------- Hero-Auftritt (einmal beim Laden) ---------- */
@keyframes in-fade{ from{ opacity:0; } }
/* Filterliste passt zur .ph-Behandlung, damit der Blur sauber interpoliert */
@keyframes in-photo{ from{ opacity:0; filter:grayscale(1) contrast(1.1) brightness(.9) blur(12px); transform:scale(1.03); } }
@keyframes in-line{ from{ opacity:0; filter:blur(8px); transform:translateY(16px); } }
@keyframes in-soft{ from{ opacity:0; filter:blur(4px); } }
.intro .site-header, .intro .hero-cta{ animation:in-fade 150ms ease both; }
.intro .hero-media img, .intro .phead-media img{ animation:in-photo 900ms var(--ease-out) both; }
.intro .hero-title span, .intro .phead h1{ animation:in-line 800ms var(--ease-out) both; animation-delay:calc(120ms + var(--l, 0) * 60ms); }
.intro .hero-kicker{ animation:in-soft 600ms var(--ease-out) both; animation-delay:120ms; }
.intro .hero-data, .intro .clock-cap, .intro .clock-foot, .intro .cu, .intro .cc{ animation:in-soft 600ms var(--ease-out) both; animation-delay:300ms; }

/* ---------- Startseite: Strecken als Startliste ---------- */
.runs{ border-top:1px solid var(--line); }
.run{ position:relative; isolation:isolate; display:block; text-decoration:none; color:inherit; border-bottom:1px solid var(--line); overflow:hidden; }
.run-in{ display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:var(--col-gap); align-items:center; padding-block:clamp(32px, 4vw, 56px); }
.run-name{
  grid-column:1 / span 5;
  font-family:var(--f-display); font-weight:800; font-style:italic; text-transform:uppercase; color:var(--white);
  font-size:clamp(56px, 7.2vw, 120px); line-height:.86; letter-spacing:0; padding-bottom:.04em; margin-left:-.04em;
}
.run-facts{ grid-column:6 / span 6; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px 24px; }
.run-facts dd{ margin-top:4px; }
.run-go{ grid-column:12; justify-self:end; width:32px; height:32px; color:var(--white); transition:transform 200ms var(--ease-out); }
.run-media{ position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity 400ms var(--ease-out); background:var(--ink); }
.run-media img{ width:100%; height:100%; object-fit:cover; transform:scale(1.04); filter:grayscale(1) brightness(.4); transition:transform 400ms var(--ease-out), filter 600ms ease; }
@media (hover:hover) and (pointer:fine){
  .run:hover .run-media{ opacity:1; }
  .run:hover .run-media img{ transform:none; filter:grayscale(0) brightness(.42); }
  .run:hover .run-go{ transform:translateX(4px); }
  .run:hover .run-facts dt{ color:var(--paper); }
}
.run-thumb{ display:none; }
@media (max-width:1023px){
  .run-name{ grid-column:1 / -1; margin-bottom:24px; }
  .run-facts{ grid-column:1 / span 11; }
  .run-go{ grid-column:12; align-self:end; }
}
@media (max-width:767px){
  .run-in{ grid-template-columns:minmax(0, 1fr) auto; padding-block:24px 32px; }
  .run-thumb{ display:block; aspect-ratio:3 / 2; margin-top:24px; }
  .run-name{ grid-column:1 / -1; margin-bottom:20px; }
  .run-facts{ grid-column:1; }
  .run-go{ grid-column:2; }
  .run-media{ display:none; }
}

/* ---------- Zweispalter ---------- */
.duo{ align-items:start; row-gap:48px; }
/* Foto bleibt stehen, während der längere Text daneben läuft (wie beim Grußwort) */
.duo-photo{ grid-column:1 / span 7; margin-left:calc(-1 * var(--gutter)); position:sticky; top:calc(var(--hdr) + 32px); align-self:start; }
.duo-text{ grid-column:9 / span 4; padding-top:clamp(0px, 4vw, 64px); }
.duo-text .lnks{ margin-top:32px; }
@media (min-width:1528px){ .duo-photo{ margin-left:calc((100vw - var(--maxw)) / -2); } }
@media (max-width:1023px) and (min-width:768px){
  .duo-photo{ grid-column:1 / span 6; }
  .duo-text{ grid-column:7 / span 6; padding-top:0; }
}
@media (max-width:767px){ .duo-photo{ margin-inline:calc(-1 * var(--gutter)); position:static; } }
.duo-text h2{ margin-bottom:32px; font-size:clamp(40px, 4.4vw, 72px); }
.duo-text .lead{ margin-bottom:24px; }

/* Text links, Foto rechts (Teams) */
.tf{ align-items:start; row-gap:48px; }
.tf-text{ grid-column:1 / span 6; }
.tf-photo{ grid-column:8 / span 5; margin-top:24px; }
.tf-text h2{ margin-bottom:24px; max-width:18ch; }
.tf-text .h3{ margin-bottom:32px; color:var(--paper); }
@media (max-width:1023px) and (min-width:768px){ .tf-text{ grid-column:1 / span 7; } .tf-photo{ grid-column:8 / span 5; } }

/* Kopf links, Text rechts */
.split{ align-items:start; }
.split-h{ grid-column:1 / span 5; }
.split-b{ grid-column:7 / span 6; }
.split-b > * + *{ margin-top:24px; }
@media (max-width:767px){ .split-b{ margin-top:var(--head-gap); } }
.note-line{ border-top:1px solid var(--line); padding-top:24px; margin-top:40px; }
.note-line p{ margin:0; }
.note-line p + p{ margin-top:8px; }
.note-line .lnks{ margin-top:8px; }

/* ---------- Song und Aftermovie ---------- */
.media-h{ margin-bottom:var(--head-gap); }
.media-h--next{ margin-top:clamp(96px, 10vw, 144px); }
.film{ position:relative; aspect-ratio:16 / 9; background:var(--raise); overflow:hidden; }
.film > img, .film > video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.film > video{ background:#000; }
.film-play{
  position:absolute; left:0; bottom:0; z-index:2;
  display:inline-flex; align-items:center; gap:16px;
  min-height:72px; padding:0 28px 0 24px;
  background:var(--white); color:var(--ink);
  font:700 16px/1 var(--f-display); letter-spacing:.04em; text-transform:uppercase;
  transition:transform 140ms var(--ease-out), background-color 200ms ease;
  transform-origin:left bottom;
}
.film-play .icon{ width:20px; height:20px; }
.film-play:active{ transform:scale(.97); }
@media (hover:hover) and (pointer:fine){ .film-play:hover{ background:var(--paper); } }
.film.is-playing > img, .film.is-playing .film-play{ display:none; }
.film-cap{ margin-top:16px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; }
@media (max-width:767px){ .film-play{ min-height:56px; padding:0 20px 0 16px; } .film{ margin-inline:calc(-1 * var(--gutter)); } }

.player{
  margin-top:24px;
  display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:20px;
  min-height:72px; padding:12px 20px 12px 12px;
  background:var(--ink); border:1px solid var(--line);
}
.player-btn{
  width:48px; height:48px; display:grid; place-items:center;
  background:var(--white); color:var(--ink);
  transition:transform 140ms var(--ease-out);
}
.player-btn .icon{ width:18px; height:18px; }
.player-btn:active{ transform:scale(.97); }
.player-mid{ display:grid; gap:8px; min-width:0; }
.player-title{ margin:0; color:var(--white); }
.player-range{
  -webkit-appearance:none; appearance:none; width:100%; height:20px; margin:0; background:transparent; cursor:pointer;
}
.player-range::-webkit-slider-runnable-track{ height:1px; background:linear-gradient(var(--white), var(--white)) 0 0 / var(--p, 0%) 100% no-repeat, var(--line); }
.player-range::-moz-range-track{ height:1px; background:var(--line); }
.player-range::-moz-range-progress{ height:1px; background:var(--white); }
.player-range::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:10px; height:10px; margin-top:-4.5px; background:var(--white); border:0; border-radius:0; }
.player-range::-moz-range-thumb{ width:10px; height:10px; background:var(--white); border:0; border-radius:0; }
.player-time{ white-space:nowrap; }
@media (max-width:480px){ .player{ grid-template-columns:auto minmax(0, 1fr); } .player-time{ grid-column:2; margin-top:-8px; } }

/* Consent-Zeile (YouTube, Maps, Race Result) */
.gate{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.gate-row{ display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:16px 48px; align-items:center; padding-block:24px; }
.gate-name{ color:var(--white); margin-bottom:8px; }
.gate-text p{ margin:0; max-width:72ch; font-size:16px; line-height:1.5; }
.gate-text p + p{ margin-top:6px; }
.gate-actions{ display:flex; flex-wrap:wrap; gap:0 28px; justify-content:flex-end; }
@media (max-width:900px){ .gate-row{ grid-template-columns:minmax(0, 1fr); } .gate-actions{ justify-content:flex-start; } }
.gate.is-loaded .gate-row{ display:none; }
.gate iframe{ width:100%; border:0; display:block; background:var(--raise); }
.gate--video{ border-top:0; }
.gate--video.is-loaded .film{ display:none; }
.gate--video iframe{ aspect-ratio:16 / 9; }
.gate--map iframe{ aspect-ratio:16 / 9; max-height:70svh; }
@media (max-width:767px){ .gate--map iframe{ aspect-ratio:4 / 5; } }

.rr-frame{ display:none; color-scheme:light; background:#FFFFFF; color:#000000; padding:clamp(12px, 2vw, 24px); min-height:240px; font-size:16px; line-height:1.45; overflow-x:auto; }
.gate.is-loaded .rr-frame{ display:block; }
.rr-frame h1, .rr-frame h2, .rr-frame h3, .rr-frame h4, .rr-frame h5{
  font-family:var(--f-text); font-style:normal; font-weight:600; text-transform:none; letter-spacing:0;
  color:#000000; font-size:1.3rem; line-height:1.3; margin:.4em 0; max-width:none; text-wrap:wrap; padding:0;
}
.rr-frame strong, .rr-frame b{ color:inherit; }
.rr-frame a{ color:var(--red-press); }
.rr-frame ::selection{ background:var(--red); color:#FFFFFF; }

.sec-h{ margin-bottom:var(--head-gap); }
.addr{ margin:-16px 0 24px; }

/* ---------- Grußwort ---------- */
.letter-text{ grid-column:1 / span 7; }
.letter-photo{ grid-column:9 / span 4; position:sticky; top:calc(var(--hdr) + 32px); align-self:start; }
.letter{ align-items:start; }
@media (max-width:767px){ .letter-photo{ position:static; margin-top:48px; } }

/* ---------- News ---------- */
.news{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:32px 64px; }
.news h2{ max-width:14ch; }
.news-side .h3{ font-size:16px; letter-spacing:.04em; color:var(--paper); }

/* ---------- Partnerwand ---------- */
.wall{ background:var(--paper); color:var(--ink); padding:clamp(32px, 5vw, 72px) clamp(20px, 4vw, 64px); }
.wall h2{ color:var(--ink); margin-bottom:clamp(32px, 4vw, 56px); }
.wall-grid{ display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); border-top:1px solid rgb(0 0 0 / .14); border-left:1px solid rgb(0 0 0 / .14); }
.wall-grid li{ border-right:1px solid rgb(0 0 0 / .14); border-bottom:1px solid rgb(0 0 0 / .14); }
.wall-grid a, .wall-grid .logo{ display:grid; place-items:center; height:clamp(112px, 11vw, 150px); padding:20px; }
/* Logos sind auf ihren Inhalt zugeschnitten (images/partner/), --h setzt je Logo
   dieselbe optische Fläche: breite Wortmarken flacher, kompakte Bildmarken höher */
.wall-grid img{
  width:auto; height:var(--h, 48px); max-width:100%; object-fit:contain;
  filter:grayscale(1) contrast(1.2) brightness(.96); mix-blend-mode:multiply;
  transition:filter 300ms ease;
}
@media (hover:hover) and (pointer:fine){ .wall-grid a:hover img{ filter:none; } }
.wall-grid a:focus-visible{ outline-color:var(--ink); outline-offset:-4px; }
@media (max-width:767px){
  .wall{ margin-inline:calc(-1 * var(--gutter)); }
  .wall-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .wall-grid a, .wall-grid .logo{ height:96px; padding:12px; }
  .wall-grid img{ height:calc(var(--h, 48px) * .66); }
}

/* ---------- Tabellen, Listen ---------- */
.tbl{ display:grid; grid-template-columns:minmax(0, 13em) minmax(0, 1fr); gap:12px 24px; margin:24px 0; align-items:baseline; }
.tbl dt{ color:var(--mid); }
.tbl dd{ color:var(--white); }
.tbl-sep{ grid-column:1 / -1; border-top:1px solid var(--line); margin-top:4px; }
@media (max-width:479px){ .tbl{ grid-template-columns:minmax(0, 1fr) minmax(0, 1.3fr); } }
.list2{ columns:2; column-gap:48px; margin:8px 0 0; }
.list2 li, .list1 li{ break-inside:avoid; padding:8px 0; color:var(--paper); }
.list2 .grp{ border-top:1px solid var(--line); }
.list1{ margin:8px 0 0; }
.list1 li + li{ border-top:1px solid var(--line); }
@media (max-width:767px){ .list2{ columns:1; } }

/* ---------- Info ---------- */
.info-grid{ align-items:start; }
.toc{ grid-column:1 / span 3; position:sticky; top:calc(var(--hdr) + 32px); max-height:calc(100svh - var(--hdr) - 64px); overflow:auto; scrollbar-width:none; }
.toc ol{ display:grid; }
.toc a{
  display:block; padding:7px 0;
  font-family:var(--f-mono); font-size:12px; line-height:1.4; letter-spacing:.06em; text-transform:uppercase;
  color:var(--mid); text-decoration:none; text-underline-offset:5px; text-decoration-thickness:1px;
  transition:color 200ms ease;
}
.toc a.is-active{ color:var(--white); text-decoration:underline; }
@media (hover:hover) and (pointer:fine){ .toc a:hover{ color:var(--paper); } }
.info-body{ grid-column:5 / span 8; }
.iblock{ padding-block:40px; border-top:1px solid var(--line); }
.iblock:first-child{ border-top:0; padding-top:0; }
.iblock h3{ margin-bottom:20px; }
.info-end{ margin-top:24px; }
@media (max-width:1023px){
  .info-grid{ display:block; }
  .toc{
    position:sticky; top:calc(var(--hdr) + env(safe-area-inset-top)); z-index:5;
    margin:0 calc(-1 * var(--gutter)) 40px; padding:0 var(--gutter);
    background:var(--ink); border-bottom:1px solid var(--line);
    overflow-x:auto; overflow-y:hidden; max-height:none;
  }
  .toc::-webkit-scrollbar{ display:none; }
  .toc ol{ display:flex; gap:24px; white-space:nowrap; }
  .toc a{ padding:16px 0; }
}

.plan{ display:block; width:100%; position:relative; cursor:zoom-in; background:var(--raise); transition:transform 140ms var(--ease-out); }
.plan img{ width:100%; }
.plan:active{ transform:scale(.995); }
.plan-cap{ margin-top:16px; }

/* ---------- Unterseiten-Bausteine ---------- */
.read{ grid-column:1 / span 7; }
.aside-photo{ grid-column:9 / span 4; margin-top:96px; }
@media (max-width:767px){ .aside-photo{ margin-top:48px; } }
.read .btn{ margin-top:32px; }

.pair{ align-items:start; row-gap:24px; }
.pair-a{ grid-column:1 / span 8; }
.pair-b{ grid-column:9 / span 4; margin-top:64px; }
.pair--rev .pair-a{ grid-column:5 / span 8; grid-row:1; }
.pair--rev .pair-b{ grid-column:1 / span 4; grid-row:1; }
.pair + .pair{ margin-top:clamp(24px, 3vw, 48px); }
@media (max-width:767px){ .pair-b, .pair--rev .pair-b{ margin-top:0; } .pair--rev .pair-a, .pair--rev .pair-b{ grid-row:auto; } }

.sponsor{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding-block:20px; }
/* Kein Logo-Kasten: das helle WVV-Logo wird invertiert, Weiß fällt ins Schwarz (lighten) */
.sponsor-logo img{ height:36px; width:auto; filter:grayscale(1) invert(1) brightness(1.15); mix-blend-mode:lighten; }
.sponsor p{ margin:0; }

.notice{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding-block:24px; margin-bottom:40px; }
.notice p{ margin:0; }

/* Teams: Argumente als Zeilen */
.args{ border-top:1px solid var(--line); }
.arg{ padding-block:clamp(32px, 4vw, 56px); border-bottom:1px solid var(--line); align-items:start; }
.arg h3{ grid-column:1 / span 4; }
.arg .prose{ grid-column:6 / span 7; }
@media (max-width:767px){ .arg h3{ margin-bottom:20px; } }
.keg{ display:flex; align-items:flex-end; flex-wrap:wrap; gap:16px 40px; padding-block:clamp(48px, 6vw, 96px); border-bottom:1px solid var(--line); }
.keg-num{ font-family:var(--f-display); font-weight:800; font-style:italic; font-size:clamp(120px, 20vw, 300px); line-height:.8; color:var(--white); margin-left:-.04em; padding-bottom:.02em; }
.keg p{ margin:0 0 .3em; font-size:clamp(22px, 2.4vw, 34px); line-height:1.25; color:var(--white); max-width:20ch; font-weight:600; }

.mosaic{ display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:var(--col-gap); align-items:start; }
.mosaic > :nth-child(1){ grid-column:1 / span 7; }
.mosaic > :nth-child(2){ grid-column:8 / span 5; margin-top:96px; }
.mosaic > :nth-child(3){ grid-column:2 / span 5; }
.mosaic > :nth-child(4){ grid-column:7 / span 6; margin-top:-48px; }
@media (max-width:767px){
  .mosaic{ grid-template-columns:1fr 1fr; }
  .mosaic > *{ grid-column:auto / span 2 !important; margin-top:0 !important; }
  .mosaic > :nth-child(2), .mosaic > :nth-child(3){ grid-column:auto / span 1 !important; }
  .mosaic > :nth-child(2) .frame, .mosaic > :nth-child(3) .frame{ aspect-ratio:4 / 5; }
}

/* Zeilen mit Haarlinien: Ergebnisarchiv, Events, Blog */
.rows{ border-top:1px solid var(--line); }
.row{ display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:var(--col-gap); align-items:center; padding-block:clamp(24px, 3vw, 40px); border-bottom:1px solid var(--line); text-decoration:none; color:inherit; }
.row-go{ width:28px; height:28px; color:var(--white); justify-self:end; transition:transform 200ms var(--ease-out); }
@media (hover:hover) and (pointer:fine){
  a.row:hover .row-go{ transform:translate(3px, -3px); }
  a.row--in:hover .row-go{ transform:translateX(4px); }
  a.row:hover .row-title{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.12em; }
}
.year-row .row-year{ grid-column:1 / span 6; font-size:clamp(72px, 11vw, 176px); line-height:.84; margin-left:-.04em; }
.year-row .ml{ grid-column:7 / span 5; }
.year-row .row-go{ grid-column:12; }
@media (max-width:767px){
  .row{ grid-template-columns:minmax(0, 1fr) auto; row-gap:12px; }
  .year-row .row-year, .year-row .ml{ grid-column:1; }
  .year-row .row-go{ grid-column:2; grid-row:1 / span 2; }
}

.ev{ align-items:start; }
.ev-head{ grid-column:1 / span 4; display:flex; align-items:center; gap:24px; }
/* Kein Logo-Kasten: die Eventlogos stehen auf Schwarz, der schwarze Grund fällt über lighten weg.
   In Grau, farbig (Gelb) erst beim Hover */
.ev-logo{ width:120px; height:72px; flex:none; display:flex; align-items:center; }
.ev-logo img{ width:auto; height:var(--h, 48px); max-width:100%; object-fit:contain; filter:grayscale(1) brightness(1.1); mix-blend-mode:lighten; transition:filter 300ms ease; }
.ev-head h2{ font-size:clamp(34px, 3.6vw, 56px); max-width:12ch; }
.ev-text{ grid-column:5 / span 4; }
.ev-link{ grid-column:9 / span 4; justify-self:end; }
@media (hover:hover) and (pointer:fine){ .ev:hover .ev-logo img{ filter:none; } }
@media (max-width:1023px){ .ev-head{ grid-column:1 / span 5; } .ev-text{ grid-column:6 / span 7; } .ev-link{ grid-column:6 / span 7; justify-self:start; } }
@media (max-width:767px){ .ev{ grid-template-columns:minmax(0, 1fr); row-gap:20px; } .ev > *{ grid-column:1 !important; } }

/* Blog */
.search{ position:relative; max-width:420px; margin-top:40px; }
.search input{
  width:100%; height:52px; padding:0 16px 0 48px;
  background:transparent; border:1px solid var(--line); border-radius:0; color:var(--white);
  font-family:var(--f-mono); font-size:14px; letter-spacing:.04em;
  -webkit-appearance:none; appearance:none;
}
.search input::placeholder{ color:var(--mid); text-transform:uppercase; letter-spacing:.08em; }
.search input:focus{ outline:2px solid var(--white); outline-offset:0; border-color:var(--white); }
.search .icon{ position:absolute; left:16px; top:50%; width:18px; height:18px; transform:translateY(-50%); color:var(--mid); pointer-events:none; }
.post-row .row{ align-items:start; }
.post-date{ grid-column:1 / span 2; padding-top:8px; }
.post-main{ grid-column:3 / span 8; }
.post-main .h3{ font-size:clamp(22px, 2vw, 30px); }
.post-meta{ display:flex; flex-wrap:wrap; gap:4px 20px; margin-top:12px; }
.post-excerpt{ margin:14px 0 0; max-width:64ch; color:var(--paper); font-size:17px; }
.post-row .row-go{ grid-column:12; align-self:start; margin-top:4px; }
@media (max-width:767px){
  .post-date, .post-main{ grid-column:1; }
  .post-row .row-go{ grid-column:2; grid-row:1 / span 2; }
}
.empty-state{ padding-block:32px; }
.posts-h{ margin-bottom:32px; }

.article{ max-width:64ch; }
/* Desktop: Lesesatz ab Spalte 3, Titel und Metazeile bleiben bündig links */
@media (min-width:1024px){
  .article, .share-row, .share-note{ margin-left:calc((100% + var(--col-gap)) / 12 * 2); }
}
.article p{ margin:0 0 1.1em; }
.article blockquote{ margin:32px 0; padding-left:24px; border-left:1px solid var(--line); }
.article img{ margin:32px 0; }
.article-meta{ margin-top:32px; display:flex; flex-wrap:wrap; gap:4px 24px; }
.article-title{ font-size:clamp(44px, 6vw, 96px); max-width:20ch; }
.share-row{ margin-top:64px; padding-top:12px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; align-items:center; gap:0 28px; max-width:64ch; }
.share-row .ml{ margin-right:8px; }
.share-note{ margin:8px 0 0; min-height:1.3em; }

/* Sponsoring: Paketvergleich */
.pkgs{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.pkg{ padding:32px 32px 40px; border-left:1px solid var(--line); }
.pkg:first-child{ border-left:0; padding-left:0; }
.pkg:last-child{ padding-right:0; }
.pkg-tag{ min-height:1.3em; margin-bottom:12px; }
.pkg-tag.is-vip{ color:var(--red); }
.pkg-price{
  font-family:var(--f-display); font-weight:800; font-style:italic; color:var(--white);
  font-size:clamp(56px, 6vw, 96px); line-height:.9; margin:20px 0 28px; font-variant-numeric:tabular-nums;
}
.pkg-list li{ padding:10px 0; border-top:1px solid var(--line); font-size:17px; line-height:1.5; }
.pkg-title{ align-items:start; padding-block:40px; border-bottom:1px solid var(--line); }
.pkg-title h2{ grid-column:1 / span 6; font-size:clamp(34px, 3.6vw, 56px); max-width:18ch; }
.pkg-title ul{ grid-column:8 / span 5; }
@media (max-width:900px){
  .pkgs{ grid-template-columns:minmax(0, 1fr); }
  .pkg, .pkg:last-child{ border-left:0; padding-inline:0; border-top:1px solid var(--line); }
  .pkg:first-child{ border-top:0; }
  .pkg-title ul{ margin-top:24px; }
}

/* ---------- Ticket (Anmeldung) ---------- */
.ticket{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(300px, 380px); background:var(--ink); border:1px solid var(--line); }
.ticket-main{ padding:clamp(24px, 3.4vw, 48px); min-width:0; }
/* Abriss: oben gebündelt wie ein Kassenzettel. Preis heute, Frist, Button, Anmeldeschluss */
.ticket-stub{ padding:clamp(24px, 3.4vw, 48px) clamp(24px, 2.4vw, 40px); border-left:1px dashed var(--line); display:flex; flex-direction:column; justify-content:flex-start; }
.stub-price{ display:block; margin-top:10px; font-family:var(--f-display); font-weight:800; font-style:italic; font-size:clamp(64px, 6vw, 96px); line-height:.9; color:var(--white); font-variant-numeric:tabular-nums; }
.stub-until{ display:block; margin-top:12px; color:var(--paper); }
.ticket-stub .btn{ width:100%; padding-inline:20px; margin-top:32px; }
.stub-end{ margin-top:12px; }
@media (max-width:359px){ .ticket-stub .btn{ white-space:normal; text-align:center; line-height:1.15; padding-block:14px; } }
.ticket-head{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px 24px; margin-bottom:32px; }
.ticket-head h3, .ticket-kids h3{ font-size:clamp(28px, 2.6vw, 40px); }
.phases{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0 24px; }
.phase{ position:relative; padding-top:28px; }
.phase::before{ content:""; position:absolute; left:0; right:-24px; top:5px; height:1px; background:var(--line); }
.phase:last-child::before{ right:0; }
.phase-mark{ position:absolute; left:0; top:0; width:11px; height:11px; background:var(--ink); border:1px solid var(--mid); }
.phase-state{ display:block; min-height:1.3em; margin-bottom:10px; }
.phase-state .now{ display:none; }
.phase-price{
  display:block; font-family:var(--f-display); font-weight:800; font-style:italic;
  font-size:clamp(48px, 5vw, 80px); line-height:.9; color:var(--paper); font-variant-numeric:tabular-nums;
}
.phase-when{ display:block; margin-top:10px; }
.phase.is-now .phase-mark{ background:var(--red); border-color:var(--red); }
.phase.is-now .phase-price{ color:var(--red); }
.phase.is-now .phase-state .now{ display:inline; color:var(--red); }
.phase.is-now .phase-when{ color:var(--paper); }
.phase.is-past .phase-price{ color:var(--mid); text-decoration:line-through; text-decoration-thickness:2px; }
.ticket-kids{ margin-top:40px; padding-top:28px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:12px 24px; }
.ticket-kids .phase-price{ color:var(--white); }
.ticket-late{ margin-top:24px; padding-top:16px; border-top:1px solid var(--line); }
.ticket-late p{ margin:0; }
.ticket-late .mv{ color:var(--white); }
.ticket-late .mv + .mv{ margin-left:24px; padding-left:24px; border-left:1px solid var(--line); }
@media (max-width:900px){
  .ticket{ grid-template-columns:minmax(0, 1fr); }
  .ticket-stub{ border-left:0; border-top:1px dashed var(--line); }
}
@media (max-width:640px){
  .phases{ grid-template-columns:minmax(0, 1fr); gap:0; }
  .phase{ padding:0 0 28px 32px; }
  .phase::before{ left:5px; right:auto; top:12px; bottom:0; width:1px; height:auto; }
  .phase:last-child::before{ display:none; }
  .phase-mark{ top:1px; }
  /* Leere Statuszeile nur bei der aktuellen Phase: Marke und Preis stehen sonst auf einer Linie */
  .phase:not(.is-now) .phase-state{ display:none; }
  .phase:not(.is-now) .phase-mark{ top:16px; }
  .ticket{ margin-inline:calc(-1 * var(--gutter)); border-left:0; border-right:0; }
}
.foot-notes{ margin-top:32px; display:grid; gap:16px; max-width:72ch; }
.foot-notes p{ margin:0; font-size:16px; }

/* ---------- Galerie ---------- */
.years{ display:flex; gap:28px; margin-top:32px; }
.years a{ font-family:var(--f-mono); font-size:13px; letter-spacing:.08em; color:var(--mid); text-decoration:none; min-height:48px; display:inline-flex; align-items:center; text-underline-offset:6px; text-decoration-thickness:1px; transition:color 200ms ease; }
.years a.is-active{ color:var(--white); text-decoration:underline; }
@media (hover:hover) and (pointer:fine){ .years a:hover{ color:var(--white); } }
.year-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px 32px; margin-bottom:32px; }
.year-head--flush{ margin-bottom:0; }
.year-head h2{ font-size:clamp(72px, 9vw, 144px); line-height:.84; margin-left:-.04em; }
.gallery{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:4px; }
.gallery-item{ position:relative; display:block; aspect-ratio:3 / 2; overflow:hidden; background:var(--raise); cursor:zoom-in; content-visibility:auto; contain-intrinsic-size:auto 300px; }
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition:transform 400ms var(--ease-out); }
/* Hochformate im 3:2-Raster: Köpfe sitzen meist im oberen Drittel */
.gallery-item--tall img{ object-position:50% 25%; }
@media (hover:hover) and (pointer:fine){ .gallery-item:hover img{ transform:scale(1.02); } }
.gallery-item:focus-visible{ outline-offset:-2px; }
@media (max-width:767px){ .gallery{ grid-template-columns:repeat(2, minmax(0, 1fr)); margin-inline:calc(-1 * var(--gutter)); } }
.gallery-more{ margin-top:24px; }

/* Lightbox */
.lightbox{
  width:100vw; height:100vh; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0;
  background:rgb(0 0 0 / .96); color:var(--white);
}
.lightbox::backdrop{ background:rgb(0 0 0 / .9); }
.lightbox[open]{ display:grid; place-items:center; animation:in-fade 240ms var(--ease-out); }
.lightbox figure{ display:grid; gap:12px; justify-items:center; padding:72px clamp(16px, 7vw, 96px) 24px; }
.lightbox img{ max-width:100%; max-height:calc(100dvh - 150px); width:auto; height:auto; }
.lightbox img.is-in{ animation:lb-in 240ms var(--ease-out); }
.lightbox img.is-next{ animation:lb-next 240ms var(--ease-in-out); }
.lightbox img.is-prev{ animation:lb-prev 240ms var(--ease-in-out); }
@keyframes lb-in{ from{ opacity:0; transform:scale(.98); } }
@keyframes lb-next{ from{ opacity:0; transform:translateX(24px); } }
@keyframes lb-prev{ from{ opacity:0; transform:translateX(-24px); } }
.lb-btn{
  position:absolute; width:48px; height:48px; display:grid; place-items:center;
  background:var(--raise); border:1px solid var(--line); color:var(--white);
  transition:transform 140ms var(--ease-out), border-color 200ms ease;
}
.lb-btn .icon{ width:18px; height:18px; }
.lb-btn:active{ transform:scale(.97); }
@media (hover:hover) and (pointer:fine){ .lb-btn:hover{ border-color:var(--white); } }
.lb-close{ top:max(12px, env(safe-area-inset-top)); right:max(12px, env(safe-area-inset-right)); }
.lb-prev{ left:max(12px, env(safe-area-inset-left)); top:50%; margin-top:-24px; }
.lb-next{ right:max(12px, env(safe-area-inset-right)); top:50%; margin-top:-24px; }

/* ---------- Formular ---------- */
.form-wrap{ grid-column:4 / span 6; }
@media (max-width:1023px){ .form-wrap{ grid-column:1 / span 8; } }
.form{ display:grid; gap:28px; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px 24px; }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } }
.field{ display:grid; gap:10px; border:0; margin:0; padding:0; min-width:0; }
.field > label, .field legend{ display:flex; gap:12px; align-items:baseline; padding:0; }
.field .req{ color:var(--paper); }
.field legend{ margin-bottom:10px; } /* Legende nimmt nicht am Grid-Abstand teil */
.field input:not([type="radio"]), .field textarea{
  width:100%; min-height:52px; padding:14px 16px;
  background:transparent; border:1px solid var(--line); border-radius:0; color:var(--white);
  font-size:17px; line-height:1.4;
  -webkit-appearance:none; appearance:none;
}
.field textarea{ resize:vertical; min-height:132px; }
.field input:focus, .field textarea:focus{ outline:2px solid var(--white); outline-offset:0; border-color:var(--white); }
.field.is-invalid input{ border-color:var(--red); }
.field-error{ color:var(--red); font-family:var(--f-mono); font-size:12px; letter-spacing:.04em; }
.field-error:empty{ display:none; }
.stars{ position:relative; }
.stars-row{ display:flex; flex-wrap:wrap; gap:8px; }
.stars input{ position:absolute; left:0; top:0; width:1px; height:1px; margin:0; opacity:0; pointer-events:none; }
.stars label{
  display:inline-flex; align-items:center; min-height:48px; padding:0 16px;
  border:1px solid var(--line); cursor:pointer;
  font-family:var(--f-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--paper);
  transition:transform 140ms var(--ease-out), background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.stars label .icon{ display:none; }
.stars label:active{ transform:scale(.97); }
.stars input:checked + label{ background:var(--white); border-color:var(--white); color:var(--ink); }
.stars input:focus-visible + label{ outline:2px solid var(--white); outline-offset:3px; }
@media (hover:hover) and (pointer:fine){ .stars label:hover{ border-color:var(--paper); } }
.hp{ position:absolute !important; left:-10000px; width:1px; height:1px; overflow:hidden; }
.form-note{ margin:0; font-size:15px; color:var(--mid); }
.form-note a{ color:var(--paper); }
.form .btn{ justify-self:start; }
.btn[aria-busy="true"]{ opacity:.7; pointer-events:none; }
.form-status{ margin-top:20px; font-size:18px; }
.form-status:empty{ display:none; }
.form-status:focus{ outline:none; }
.form-status.is-ok{ color:var(--paper); }
.form-status.is-err{ color:var(--red); }

/* ---------- Rechtstexte ---------- */
.legal{ max-width:64ch; }
.legal h2, .legal h3{
  font-family:var(--f-display); font-weight:700; font-style:normal; text-transform:uppercase;
  font-size:clamp(20px, 1.8vw, 26px); line-height:1.1; letter-spacing:.01em; color:var(--white);
  margin:48px 0 16px; max-width:none; padding:0;
}
.legal > :first-child, .legal > section:first-child > :first-child{ margin-top:0; }
.legal ul{ list-style:disc; padding-left:1.2em; margin:0 0 1em; }
.legal li + li{ margin-top:6px; }
.legal a{ color:var(--white); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.22em; text-decoration-color:var(--mid); overflow-wrap:anywhere; }
.muted{ color:var(--mid); }

/* ---------- Footer ---------- */
.site-footer{ border-top:1px solid var(--line); padding-top:clamp(64px, 8vw, 112px); padding-bottom:calc(24px + env(safe-area-inset-bottom)); }
.has-mbar .site-footer{ padding-bottom:calc(100px + env(safe-area-inset-bottom)); }
.ft{ row-gap:48px; }
.ft-brand{ grid-column:1 / span 4; }
.ft-brand img{ height:56px; width:auto; }
.ft-nav1{ grid-column:6 / span 3; }
.ft-nav2{ grid-column:9 / span 3; }
.ft-links a{ display:inline-flex; min-height:40px; align-items:center; font:700 17px/1 var(--f-display); letter-spacing:.04em; text-transform:uppercase; color:var(--paper); text-decoration:none; text-underline-offset:6px; text-decoration-thickness:1px; transition:color 200ms ease; }
.ft-links a[aria-current="page"]{ color:var(--white); text-decoration:underline; }
@media (hover:hover) and (pointer:fine){ .ft-links a:hover{ color:var(--white); } }
.ft-events{ grid-column:1 / -1; border-top:1px solid var(--line); padding-top:16px; display:flex; flex-wrap:wrap; align-items:center; gap:0 32px; }
.ft-events .ml{ margin-right:8px; }
.ft-events a{ font:700 17px/1 var(--f-display); letter-spacing:.04em; text-transform:uppercase; color:var(--paper); min-height:48px; display:inline-flex; align-items:center; gap:8px; text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:6px; text-decoration-thickness:1px; transition:text-decoration-color 200ms ease, color 200ms ease; }
.ft-events a .icon{ width:11px; height:11px; }
@media (hover:hover) and (pointer:fine){ .ft-events a:hover{ color:var(--white); text-decoration-color:var(--paper); } }
.ft-bottom{ grid-column:1 / -1; border-top:1px solid var(--line); padding-top:4px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:0 32px; }
@media (max-width:767px){
  .ft{ grid-template-columns:1fr 1fr; }
  .ft-nav1{ grid-column:1 !important; }
  .ft-nav2{ grid-column:2 !important; }
  .ft-brand, .ft-events, .ft-bottom{ grid-column:1 / -1 !important; }
  /* Weitere Events: Label als eigene Zeile, die drei Links untereinander */
  .ft-events{ flex-direction:column; align-items:flex-start; gap:0; }
  .ft-events .ml{ margin:0 0 4px; }
}

/* Nach oben (nur Desktop) */
.to-top{
  position:fixed; right:max(12px, env(safe-area-inset-right)); bottom:max(12px, env(safe-area-inset-bottom)); z-index:30;
  width:48px; height:48px; display:grid; place-items:center;
  background:var(--raise); border:1px solid var(--line); color:var(--white);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s linear 200ms, border-color 200ms ease;
}
.to-top .icon{ width:16px; height:16px; transform:rotate(-90deg); }
.to-top.is-visible{ opacity:1; visibility:visible; transform:none; transition:opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s, border-color 200ms ease; }
.to-top.is-visible:active{ transform:scale(.97); }
@media (hover:hover) and (pointer:fine){ .to-top:hover{ border-color:var(--white); } }
@media (max-width:767px){ .to-top{ display:none; } }

/* Anmeldeleiste (nur Handy) */
.mbar{ display:none; }
@media (max-width:767px){
  .mbar{
    position:fixed; left:0; right:0; bottom:0; z-index:40;
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
    background:var(--ink); border-top:1px solid var(--line);
    transform:translateY(100%); visibility:hidden;
    transition:transform 220ms var(--ease-out), visibility 0s linear 220ms;
  }
  .mbar.is-visible{ transform:none; visibility:visible; transition:transform 220ms var(--ease-out), visibility 0s; }
  .mbar-info{ margin:0; display:grid; gap:4px; min-width:0; }
  .mbar-info .mv{ color:var(--red); font-size:13px; }
  .mbar .btn{ min-height:48px; padding:0 18px; flex:none; }
  .menu-open .mbar{ visibility:hidden; }
}
@media (max-width:389px){
  .mbar{ gap:12px; }
  .mbar-info .mv{ font-size:12px; letter-spacing:0; }
  .mbar-info .ml{ letter-spacing:.04em; }
  .mbar .btn{ padding:0 14px; }
  .mbar .btn .icon{ display:none; }
}

/* ---------- Consent ----------
   Erster Besuch: flache Leiste unten über die volle Breite, nicht modal. Solange sie offen ist,
   rücken Hero, Seitenkopf, Anmeldeleiste und Seitenende um ihre Höhe (--consent-h, per JS) nach oben,
   damit Titel, Datum, Uhr, Preis und Anmelde-Button frei bleiben.
   Einstellungen (auch über den Footer): kompakte Box links unten, modal. */
.consent{
  position:fixed; inset:auto 0 0 0; width:100%; max-width:none; max-height:calc(100dvh - 32px); overflow:auto;
  margin:0; padding:0; border:0; border-top:1px solid var(--line); border-radius:0;
  background:var(--ink); color:var(--paper); z-index:60;
}
.consent[open]{ animation:in-consent 280ms var(--ease-out); }
@keyframes in-consent{ from{ opacity:0; transform:translateY(16px); } }
.consent::backdrop{ background:rgb(0 0 0 / .5); }
.consent h2:focus{ outline:none; }
.consent p{ margin:0; font-size:15px; line-height:1.55; }
.consent a{ color:var(--white); text-decoration:underline; text-underline-offset:.2em; text-decoration-color:var(--mid); }

.consent-first{
  position:relative;
  width:100%; max-width:calc(var(--maxw) + 2 * var(--gutter)); margin-inline:auto;
  padding:20px var(--gutter) calc(20px + env(safe-area-inset-bottom));
  display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:12px 48px; align-items:center;
}
.consent-first h2{
  font:400 12px/1.3 var(--f-mono); font-style:normal; letter-spacing:.08em; text-transform:uppercase;
  color:var(--mid); margin:0 0 6px; padding:0; max-width:none;
}
.consent-first p{ max-width:104ch; }
.consent-first .consent-actions{ display:flex; align-items:center; gap:8px; }
.consent-first .consent-actions .lnk{ margin-right:16px; }
.consent-first .consent-actions .btn{ min-height:48px; padding:0 20px; }

.consent.is-settings{
  inset:auto auto max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  width:min(480px, calc(100vw - 32px)); border:1px solid var(--line);
}
.consent-settings{ padding:28px; display:grid; grid-template-columns:minmax(0, 1fr); gap:18px; }
.consent-settings h2{ font-size:30px; line-height:1; max-width:none; }
.consent-settings .consent-actions{ display:grid; gap:8px; }
.consent-settings .consent-actions .btn{ min-height:48px; width:100%; }
.consent-cats{ display:grid; border-top:1px solid var(--line); }
.cat{ display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:6px 16px; align-items:center; padding:14px 0; border-bottom:1px solid var(--line); }
.cat-name{ font:700 16px/1.2 var(--f-display); letter-spacing:.04em; text-transform:uppercase; color:var(--white); }
.cat p{ grid-column:1 / -1; font-size:14px; color:var(--paper); overflow-wrap:break-word; }
.switch{ position:relative; width:48px; height:28px; flex:none; }
.switch input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; width:100%; height:100%; }
.switch span{ position:absolute; inset:0; background:transparent; border:1px solid var(--mid); transition:background-color 200ms ease, border-color 200ms ease; pointer-events:none; }
.switch span::after{ content:""; position:absolute; left:4px; top:4px; width:18px; height:18px; background:var(--paper); transition:transform 200ms var(--ease-out), background-color 200ms ease; }
.switch input:checked + span{ background:var(--white); border-color:var(--white); }
.switch input:checked + span::after{ transform:translateX(20px); background:var(--ink); }
.switch input:disabled + span{ opacity:.6; }
.switch input:focus-visible + span{ outline:2px solid var(--white); outline-offset:3px; }

/* Platz schaffen, solange die Leiste offen ist */
.consent-bar body{ padding-bottom:var(--consent-h, 0px); }
@media (min-width:768px){
  .consent-bar .hero{ padding-bottom:calc(clamp(32px, 6vh, 72px) + env(safe-area-inset-bottom) + var(--consent-h, 0px)); }
  .consent-bar .phead--photo{ padding-bottom:calc(clamp(40px, 5vw, 72px) + var(--consent-h, 0px)); }
}
.consent-bar .to-top{ bottom:calc(12px + var(--consent-h, 0px)); }

@media (max-width:1023px){
  .consent-first{ grid-template-columns:minmax(0, 1fr); gap:14px; }
}
@media (max-width:767px){
  .consent-first{ padding:14px var(--gutter) calc(14px + env(safe-area-inset-bottom)); gap:12px; }
  .consent-first h2{ font-size:11px; min-height:28px; display:flex; align-items:center; margin:0; padding-right:120px; }
  .consent-first p{ font-size:14px; line-height:1.5; }
  .consent-first .consent-actions{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:8px; }
  .consent-first .consent-actions .btn{ padding:0 10px; font-size:16px; }
  /* Einstellungen als Textlink oben rechts in der Label-Zeile: zwei gleichwertige Buttons, eine Zeile */
  .consent-first .consent-actions .lnk{ position:absolute; top:4px; right:var(--gutter); margin:0; min-height:44px; }
  .consent.is-settings{ inset:auto 0 0 0; width:100%; border-left:0; border-right:0; border-bottom:0; max-height:85dvh; }
  .consent-settings{ padding:24px var(--gutter) calc(24px + env(safe-area-inset-bottom)); }
  .consent-settings .consent-actions{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
  .consent-settings .consent-actions .btn{ padding:0 12px; font-size:16px; }
  .consent-settings .consent-actions .btn:first-child{ grid-column:1 / -1; }
  /* Mobil ist der erste Bildschirm zu knapp, um alles über die Leiste zu schieben: solange sie offen ist,
     steht die Anmeldeleiste (Datum, Preis, Button) direkt darüber. Die Anmeldung bleibt immer greifbar. */
  html.consent-bar .mbar{ bottom:var(--consent-h, 0px); transform:none; visibility:visible; opacity:1; }
  html.consent-bar.menu-open .mbar{ visibility:hidden; }
}

/* ---------- Reduced Motion: Bewegung raus, Fades bleiben ---------- */
@media (prefers-reduced-motion: reduce){
  .js .rv{ transform:none; filter:none; }
  .js .rv.in{ transition:opacity 200ms ease; transition-delay:0ms; }
  .intro .site-header, .intro .hero-cta, .intro .hero-media img, .intro .phead-media img, .intro .hero-title span, .intro .phead h1,
  .intro .hero-kicker, .intro .hero-data, .intro .clock-cap, .intro .clock-foot, .intro .cu, .intro .cc{ animation:in-fade 200ms ease both; animation-delay:0ms; }
  .clock .cd-strip, .clock.is-tick .cd-strip, .clock.is-set .cd-strip{ transition:none !important; }
  .mnav, .mnav.is-open{ transform:none; transition:opacity 200ms ease, visibility 0s; }
  .mnav:not(.is-open){ opacity:0; }
  .mnav-main a, .mnav.is-open .mnav-main a{ transform:none; transition:opacity 200ms ease; transition-delay:0ms; }
  .sub, .sub.is-open{ transform:none; }
  .run-media img, .gallery-item img, .run:hover .run-media img, .gallery-item:hover img{ transform:none; }
  .run-go, .row-go{ transition:none; }
  .consent[open], .lightbox img.is-in, .lightbox img.is-next, .lightbox img.is-prev{ animation:in-fade 200ms ease; }
  .mbar, .mbar.is-visible{ transform:none; transition:opacity 200ms ease, visibility 0s; }
  .mbar:not(.is-visible){ opacity:0; }
  .btn:active, .player-btn:active, .film-play:active, .to-top.is-visible:active, .lb-btn:active, .stars label:active, .plan:active{ transform:none; }
  .to-top, .to-top.is-visible{ transform:none; }
  .menu-toggle .bar{ transition:none; }
}

/* ---------- Druck ---------- */
@media print{
  .site-header, .mnav, .mbar, .to-top, .consent, .share-row, .ft-events{ display:none !important; }
  body{ background:#fff; color:#000; }
  h1, h2, h3, .dsp, strong, b{ color:#000; }
  .phead{ padding-top:0; }
  .js .rv{ opacity:1; transform:none; filter:none; }
}