/* ==========================================================================
   LIFESTYLE WÜRZBURG LAUF · Gestaltung für alle Seiten
   Richtung: _design/RICHTUNG.md. Schwarz wie Asphalt, Gelb nur als Signal
   (Hauptknopf, aktuelle Phase, Strecke, Fokus). Zwei Familien: Archivo für
   Display und Text, eine Mono für alles, was Zeit, Preis, Datum oder Label ist.
   Motion: zwei Kurven, drei Dauern, nur transform/opacity/filter (plus die
   Streckenlinie per stroke-dashoffset und offset-distance).
   ========================================================================== */

/* ---------- Schriften (selbst gehostet) ----------
   Archivo variabel: wght 100-900, wdth 62-125 (latin inkl. Umlaute).
   Text läuft mit font-display swap. Die Display-Schnitte (Hero, Titel) nutzen dieselbe Datei
   unter eigenem Namen mit font-display optional: Die Datei ist vorgeladen, damit kommt sie beim
   ersten Aufruf fast immer rechtzeitig, und die großen Zeilen springen nie von Helvetica auf Archivo.
   Kursive: Eine echte Archivo-Italic-Datei liegt noch nicht vor (Download braucht Odins Freigabe,
   siehe _design/ABSCHLUSS.md). Bis dahin rechnet der Browser die Schräglage. Sobald
   fonts/archivo-italic-var-latin.woff2 da ist, den vorbereiteten Block unten einkommentieren und
   in .display-xl/.display-l/.digit/.mobile-menu a font-synthesis auf none stellen.
   Martian Mono: statischer Schnitt wght 400, wdth 87.5 (Breitenklasse 4), latin + latin-ext. */
@font-face{
  font-family:"Archivo"; font-style:normal; font-weight:100 900; font-stretch:62% 125%; font-display:swap;
  src:url(fonts/archivo-var-latin.woff2) format("woff2-variations"), url(fonts/archivo-var-latin.woff2) format("woff2");
}
@font-face{
  font-family:"Archivo Display"; font-style:normal; font-weight:100 900; font-stretch:62% 125%; font-display:optional;
  src:url(fonts/archivo-var-latin.woff2) format("woff2-variations"), url(fonts/archivo-var-latin.woff2) format("woff2");
}
/* Vorbereitet für die echte Kursive:
@font-face{
  font-family:"Archivo Display"; font-style:italic; font-weight:100 900; font-stretch:62% 125%; font-display:optional;
  src:url(fonts/archivo-italic-var-latin.woff2) format("woff2-variations"), url(fonts/archivo-italic-var-latin.woff2) format("woff2");
}
*/
@font-face{
  font-family:"Martian Mono"; font-style:normal; font-weight:400; font-stretch:87.5%; font-display:swap;
  src:url(fonts/martianmono-latin.woff2) format("woff2");
  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"; font-style:normal; font-weight:400; font-stretch:87.5%; font-display:swap;
  src:url(fonts/martianmono-latin-ext.woff2) format("woff2");
  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{
  /* Marke (exakt aus dem Inventar) */
  --ink:#030303;
  --yellow:#f5dd00;
  --yellow-dark:#efcc00;
  --mid:#818181;
  /* abgeleitet, nur Werkzeug */
  --raise:#0c0c0b;
  --line:#232321;
  --paper:#f2f2ee;
  --paper-30:rgba(242,242,238,.3);

  --sans:"Archivo", "Helvetica Neue", Arial, sans-serif;
  --display:"Archivo Display", "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono:"Martian Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --ease-out:cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out:cubic-bezier(0.77, 0, 0.175, 1);
  --t-press:160ms;
  --t-ui:240ms;
  --t-enter:800ms;

  --gutter:max(clamp(16px, 4vw, 64px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --col-gap:clamp(16px, 2vw, 32px);
  --maxw:1440px;
  --nav-h:64px;
  --bar-h:64px;
  --section-y:clamp(96px, 14vh, 176px);
  --title-gap:48px;

  --tone:grayscale(1) contrast(1.08) brightness(.78);
  color-scheme:dark;
}
@media (max-width:767px){ :root{ --title-gap:32px; } }

/* ---------- Seitenwechsel ---------- */
@view-transition{ navigation:auto; }
::view-transition-old(root){ animation:vt-out 160ms var(--ease-out) both; }
::view-transition-new(root){ animation:vt-in 240ms var(--ease-out) both; }
::view-transition-group(site-nav){ animation:none; }
::view-transition-old(site-nav), ::view-transition-new(site-nav){ animation:none; }
@keyframes vt-out{ to{ opacity:0; } }
@keyframes vt-in{ from{ opacity:0; transform:translateY(8px); } }

/* ---------- Basis ---------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{
  background:var(--ink);
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
  overflow-x:clip;
  scroll-padding-top:calc(var(--nav-h) + 24px);
}
@media (prefers-reduced-motion: no-preference){ html{ scroll-behavior:smooth; } }
body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  font-stretch:100%;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  hyphens:none; -webkit-hyphens:none;
  overflow-x:clip;
  overflow-wrap:break-word;
}
@media (max-width:767px){ body{ font-size:16px; } }
img, video, iframe, svg{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; }
button{ font:inherit; color:inherit; cursor:pointer; background:none; border:0; padding:0; }
table{ border-collapse:collapse; }
::selection{ background:var(--yellow); color:var(--ink); }
:focus-visible{ outline:2px solid var(--yellow); outline-offset:3px; }
h1, h2, h3, h4{ font-weight:inherit; font-size:inherit; text-wrap:balance; }
p, li, dd{ text-wrap:pretty; }

.skip-link{
  position:fixed; left:12px; top:12px; z-index:1000;
  background:var(--yellow); color:var(--ink); padding:14px 18px;
  font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; text-decoration:none;
  transform:translateY(-160%); transition:transform var(--t-ui) var(--ease-out);
}
.skip-link:focus{ transform:none; }
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
[hidden]{ display:none !important; }

/* ---------- Raster ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.grid{ display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:var(--col-gap); }
.grid > *{ grid-column:1 / -1; }
.section{ padding-block:var(--section-y); }
.section--tight{ padding-block:clamp(64px, 9vh, 112px); }
.section--flush-top{ padding-top:0; }
.section + .section--tight{ padding-top:0; }

/* ---------- Typo ---------- */
.display-xl, .display-l, .digit{
  font-family:var(--display); font-style:italic; text-transform:uppercase;
  font-synthesis:style;
}
.display-xl{
  font-weight:820; font-stretch:78%;
  font-size:clamp(40px, 5.6vw, 96px); line-height:.94; letter-spacing:-.012em;
}
.display-l{
  font-weight:780; font-stretch:80%;
  font-size:clamp(34px, 4.6vw, 76px); line-height:.95; letter-spacing:-.01em;
}
.display-l, .display-xl{ padding-bottom:.06em; }
/* Optischer Randausgleich: schräge Versalien wirken sonst eingerückt */
.ink-edge{ margin-left:-.04em; }
.statement{
  font-weight:500; font-stretch:92%;
  font-size:clamp(26px, 2.8vw, 42px); line-height:1.15; letter-spacing:-.006em;
  text-wrap:balance;
}
.statement a{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.16em; transition:color var(--t-press) ease; }
.h3{ font-weight:650; font-stretch:96%; font-size:clamp(20px, 1.6vw, 24px); line-height:1.2; }
.label{
  font-family:var(--mono); font-weight:400; font-stretch:87.5%;
  font-size:11px; line-height:1.3; letter-spacing:.1em; text-transform:uppercase;
  color:var(--mid);
}
@media (min-width:1024px){ .label{ font-size:12px; } }
.nums, .data-main, .data-sub, td{ font-variant-numeric:tabular-nums; }
.prose p + p{ margin-top:.75em; }
.prose p, .prose li{ max-width:64ch; }
.strong{ color:var(--paper); font-weight:650; }
.text-link{
  color:var(--paper); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;
  text-decoration-color:var(--paper-30);
  transition:color var(--t-press) ease, text-decoration-color var(--t-press) ease;
}
.ext-arr{ display:inline-block; margin-left:.4em; font-family:var(--sans); font-style:normal; text-decoration:none; }
.text-link .ext-arr{ text-decoration:none; }
@media (hover:hover) and (pointer:fine){
  .text-link:hover, .statement a:hover{ color:var(--yellow); text-decoration-color:currentColor; }
}
.text-btn{
  display:inline-flex; align-items:center; min-height:44px; padding:0 4px;
  font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--paper);
  transition:color var(--t-press) ease;
}
@media (hover:hover) and (pointer:fine){ .text-btn:hover{ color:var(--yellow); } }

/* ==========================================================================
   KNÖPFE
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:0 20px; max-width:100%;
  background:var(--yellow); color:var(--ink);
  border:1px solid var(--yellow); border-radius:0;
  font-family:var(--mono); font-weight:500; font-stretch:87.5%;
  font-size:12px; line-height:1; letter-spacing:.08em; text-transform:uppercase;
  text-decoration:none; white-space:nowrap;
  transition:transform var(--t-press) var(--ease-out), background-color var(--t-press) var(--ease-out), border-color var(--t-press) var(--ease-out), color var(--t-press) var(--ease-out);
}
.btn:active{ transform:scale(.97); }
.btn--ghost{ background:transparent; color:var(--paper); border-color:var(--paper-30); }
.btn--ink{ background:var(--ink); color:var(--yellow); border-color:var(--ink); }
@media (hover:hover) and (pointer:fine){
  .btn:hover{ background:var(--yellow-dark); border-color:var(--yellow-dark); }
  .btn--ghost:hover{ background:transparent; border-color:var(--paper); }
  .btn--ink:hover{ background:#000; border-color:#000; }
}
.btn:active{ background-color:var(--yellow-dark); }
.btn--ghost:active{ background-color:transparent; }
.btn--ink:active{ background-color:#000; }
.btn-row{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; }
.only-mobile{ display:none !important; }
@media (max-width:767px){
  .only-desktop{ display:none !important; }
  .only-mobile{ display:inline-flex !important; }
}
@media (max-width:380px){ .btn{ white-space:normal; text-align:center; line-height:1.3; padding-block:12px; } }

/* ==========================================================================
   NAV
   ========================================================================== */
.site-nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding-inline:max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
  padding-top:env(safe-area-inset-top, 0px);
  view-transition-name:site-nav;
  isolation:isolate;
}
.site-nav::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(3,3,3,.86);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
  opacity:0; transition:opacity var(--t-ui) var(--ease-out);
}
.site-nav.is-solid::before, .menu-open .site-nav::before{ opacity:1; }
/* Über Fotos: leichter Schleier nur hinter der Nav, damit die Links lesbar bleiben */
.site-nav::after{
  content:""; position:absolute; inset:0 0 -32px 0; z-index:-2; pointer-events:none;
  background:linear-gradient(180deg, rgba(3,3,3,.7), rgba(3,3,3,0));
  transition:opacity var(--t-ui) var(--ease-out);
}
.site-nav.is-solid::after, .menu-open .site-nav::after{ opacity:0; }
.menu-open .site-nav::before{ -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--ink); }
.nav-logo{ display:flex; align-items:center; min-height:44px; flex:none; }
.nav-logo img{ width:auto; height:40px; }
.nav-links{ display:flex; align-items:center; gap:clamp(14px, 1.8vw, 28px); list-style:none; padding:0; }
.nav-links a{
  position:relative; display:inline-flex; align-items:center; min-height:44px;
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
  color:var(--mid); text-decoration:none;
  transition:color var(--t-press) ease;
}
.nav-links a[aria-current="page"]{ color:var(--paper); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:6px; }
/* Über Fotos (ohne Fläche) etwas heller, damit Mono-Links auf hellen Bildstellen lesbar bleiben */
.site-nav:not(.is-solid) .nav-links a:not(.nav-cta):not([aria-current]){ color:rgba(242,242,238,.8); }
@media (hover:hover) and (pointer:fine){ .nav-links a:hover{ color:var(--paper); } }
/* Der Nav-Punkt der Hauptaktion (je Phase) ist ein kleiner gelber Knopf */
.nav-links a.nav-cta{
  min-height:36px; padding:0 14px; margin-block:4px;
  background:var(--yellow); color:var(--ink); text-decoration:none;
  transition:transform var(--t-press) var(--ease-out), background-color var(--t-press) var(--ease-out);
}
.nav-links a.nav-cta:active{ transform:scale(.97); }
@media (hover:hover) and (pointer:fine){ .nav-links a.nav-cta:hover{ background:var(--yellow-dark); color:var(--ink); } }
.nav-toggle{
  display:none; min-height:44px; min-width:44px; padding:0 4px; margin-right:-4px;
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--paper);
}
.nav-toggle-close{ display:none; }
.menu-open .nav-toggle-open{ display:none; }
.menu-open .nav-toggle-close{ display:inline; }

.mobile-menu{
  position:fixed; inset:0; z-index:95;
  background:var(--ink);
  padding:calc(var(--nav-h) + 32px + env(safe-area-inset-top, 0px)) var(--gutter) calc(32px + env(safe-area-inset-bottom, 0px));
  display:flex; flex-direction:column; justify-content:space-between; gap:32px;
  overflow-y:auto; overscroll-behavior:contain;
  opacity:0; visibility:hidden;
  transition:opacity 180ms var(--ease-in-out), visibility 0s linear 180ms;
}
.menu-open .mobile-menu{ opacity:1; visibility:visible; transition:opacity var(--t-ui) var(--ease-in-out); }
.mobile-menu ul{ list-style:none; padding:0; display:grid; gap:4px; }
.mobile-menu li{ opacity:0; transform:translateY(12px); transition:opacity 180ms var(--ease-in-out), transform 180ms var(--ease-in-out); }
.menu-open .mobile-menu li{
  opacity:1; transform:none;
  transition:opacity var(--t-ui) var(--ease-in-out), transform var(--t-ui) var(--ease-in-out);
  transition-delay:calc(var(--i, 0) * 40ms);
}
.mobile-menu a{
  display:flex; align-items:center; min-height:52px;
  font-family:var(--display); font-style:italic; font-synthesis:style; font-weight:780; font-stretch:80%;
  font-size:clamp(34px, 9vw, 52px); line-height:1; text-transform:uppercase; letter-spacing:-.01em;
  color:var(--mid); text-decoration:none;
}
.mobile-menu a[aria-current="page"]{ color:var(--paper); }
.mobile-menu .menu-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; }
.mobile-menu .menu-foot a{ font:inherit; font-size:16px; min-height:44px; display:inline-flex; color:var(--yellow); text-transform:none; }
.menu-open, .menu-open body{ overflow:hidden; }

@media (max-width:1023px){
  .nav-main{ display:none; }
  .nav-toggle{ display:inline-flex; align-items:center; }
}
@media (min-width:1024px){ .mobile-menu{ display:none; } }

/* ==========================================================================
   MOBILE AKTIONSLEISTE
   ========================================================================== */
.action-bar{ display:none; }
@media (max-width:767px){
  .has-bar{ padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom, 0px)); }
  .action-bar{
    position:fixed; inset:auto 0 0 0; z-index:80;
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    height:calc(var(--bar-h) + env(safe-area-inset-bottom, 0px));
    padding:0 var(--gutter) env(safe-area-inset-bottom, 0px);
    background:rgba(3,3,3,.92);
    -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
    border-top:1px solid var(--line);
    transform:translateY(100%);
    transition:transform 180ms var(--ease-in-out), visibility 0s linear 180ms;
    visibility:hidden;
  }
  .action-bar.is-shown{ transform:none; visibility:visible; transition:transform var(--t-ui) var(--ease-in-out); }
  .menu-open .action-bar, .cc-open .action-bar{ transform:translateY(100%); visibility:hidden; }
  .action-bar .btn{ min-height:44px; }
}

/* ==========================================================================
   AUFTRITTE (JS setzt html.js; ohne JS ist alles sofort da)
   ========================================================================== */
.js [data-reveal]{
  opacity:0; transform:translateY(8px);
  transition:opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
  transition-delay:calc(var(--d, 0) * 50ms);
}
.js [data-reveal="title"]{
  filter:blur(10px); transform:translateY(.25em);
  transition:opacity var(--t-enter) var(--ease-out), transform var(--t-enter) var(--ease-out), filter var(--t-enter) var(--ease-out);
}
.js [data-reveal="media"]{ transform:none; transition:opacity 600ms var(--ease-out); }
.js [data-reveal].is-in{ opacity:1; transform:none; filter:none; }

/* ==========================================================================
   HERO (Startseite): Hero + Faktenleiste = 100svh
   ========================================================================== */
.hero{
  position:relative; isolation:isolate;
  min-height:100vh; min-height:100svh;
  display:grid; grid-template-rows:1fr auto;
  background:#000;
}
.hero-stage{ position:relative; display:grid; align-content:end; overflow:clip; }
.hero-media{ position:absolute; inset:0; z-index:-2; }
.hero-media img, .hero-media video{ width:100%; height:100%; object-fit:cover; }
.hero-media video{ position:absolute; inset:0; opacity:0; transition:opacity 900ms var(--ease-out); }
.hero-media video.is-playing{ opacity:1; }
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(0deg, rgba(3,3,3,.92) 0%, rgba(3,3,3,0) 55%);
}
.tone{ filter:var(--tone); }
.hero-body{ padding-top:calc(var(--nav-h) + 48px); padding-bottom:clamp(32px, 5vh, 56px); }
.hero-eyebrow{ color:var(--paper); margin-bottom:clamp(16px, 2vh, 24px); }
.hero-row{ position:relative; display:grid; gap:24px; }
.hero-title{ font-size:clamp(40px, 5.8vw, 104px); }
.hero-title .line{ display:block; padding-bottom:.06em; }
.hero-actions{ gap:12px; }
/* Breiter Desktop: Knöpfe rechts auf der Grundlinie der letzten (kurzen) Headline-Zeile.
   Erst ab 1280 px, darunter stehen sie unter der h1 (zwischen 1024 und 1280 wird es sonst eng). */
@media (min-width:1280px){
  .hero-actions{ position:absolute; right:0; bottom:.2em; font-size:clamp(40px, 5.8vw, 104px); }
  .hero-actions .btn{ font-size:12px; }
}

.facts{
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  background:rgba(3,3,3,.9);
  border-top:1px solid var(--line);
  max-width:none; padding-inline:max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
}
.fact{ padding:clamp(20px, 2.6vh, 32px) var(--col-gap) clamp(20px, 2.6vh, 32px) 0; display:grid; align-content:start; gap:12px; }
.fact + .fact{ border-left:1px solid var(--line); padding-left:var(--col-gap); }
.fact-value{ font-weight:500; font-stretch:92%; font-size:clamp(20px, 1.7vw, 28px); line-height:1.15; }
.data-main{ display:block; font-family:var(--mono); font-weight:500; font-stretch:75%; font-size:clamp(22px, 2.2vw, 32px); line-height:1.1; letter-spacing:0; }
.data-sub{ display:block; margin-top:8px; font-family:var(--mono); font-size:14px; color:var(--mid); }
@media (max-width:767px){
  .hero-stage{ min-height:calc(100svh - 92px); }
  .facts{ grid-template-columns:minmax(0, 1fr); padding-inline:var(--gutter); background:var(--ink); }
  .fact{ grid-template-columns:64px minmax(0, 1fr); align-items:baseline; gap:16px; padding:20px 0; }
  .fact + .fact{ border-left:0; border-top:1px solid var(--line); padding-left:0; }
  .fact-value{ font-size:20px; }
}

/* Hero-Auftritt: einmal beim Laden */
@media (prefers-reduced-motion: no-preference){
  .hero-title .line{ animation:line-in var(--t-enter) var(--ease-out) both; animation-delay:calc(var(--i, 0) * 70ms + 120ms); }
  .hero [data-rise], .page-head [data-rise], .notfound [data-rise]{ animation:rise-in 600ms var(--ease-out) both; animation-delay:calc(120ms + 3 * 70ms + (var(--i, 0) - 4) * 60ms); }
  .page-head [data-rise], .notfound [data-rise]{ animation-delay:calc(var(--i, 0) * 70ms + 80ms); }
  .page-head .page-title, .notfound h1{ animation-name:line-in; animation-duration:var(--t-enter); }
  .hero-media{ animation:fade-in 900ms var(--ease-out) both; }
}
/* Folgeseiten in derselben Sitzung (html.seen, gesetzt im Kopf-Skript): Navigation ist häufig,
   also kein Blur-Auftritt mehr, nur ein kurzer Fade. Die View Transition trägt den Wechsel. */
@media (prefers-reduced-motion: no-preference){
  .seen .hero-title .line, .seen .hero [data-rise], .seen .page-head [data-rise], .seen .notfound [data-rise],
  .seen .page-head .page-title, .seen .notfound h1{ animation:fade-in var(--t-ui) var(--ease-out) both; animation-delay:0ms; }
  .seen .hero-media{ animation:none; }
}
/* Das Page-Head-Bild blendet nicht extra ein, es steht mit der View Transition da. */
@media (prefers-reduced-motion: reduce){
  .hero-title .line, .hero [data-rise], .page-head [data-rise], .notfound [data-rise]{ animation:fade-in 200ms ease both; }
}
@keyframes line-in{ from{ opacity:0; filter:blur(10px); transform:translateY(.25em); } }
@keyframes rise-in{ from{ opacity:0; filter:blur(4px); transform:translateY(8px); } }
@keyframes fade-in{ from{ opacity:0; } }

/* Beim Wegscrollen blendet der Hero-Inhalt ab (wie odinbayer.de) */
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference){
    .hero-fade{ animation:hero-dim linear both; animation-timeline:scroll(root); animation-range:0 80vh; }
  }
}
@keyframes hero-dim{ to{ opacity:.3; } }

/* ==========================================================================
   DANK + FOTOSTREIFEN
   ========================================================================== */
.thanks{ padding-bottom:0; }
/* Nach dem Fotostreifen braucht die nächste Sektion wieder Luft (Spende und Vor Ort starten sonst bündig) */
.thanks + .section{ padding-top:var(--section-y); }
.thanks-grid{ align-items:end; row-gap:48px; }
.thanks-copy{ display:grid; gap:32px; justify-items:start; }
/* Rückblick 2025: eine Stufe leiser als das Statement, damit er nicht mit 2026 konkurriert */
.thanks-copy .label{ margin-bottom:-16px; }
.statement--quiet{ font-size:clamp(21px, 1.9vw, 28px); line-height:1.3; font-stretch:96%; max-width:34ch; }
.thanks-figure{ aspect-ratio:4/5; overflow:hidden; background:var(--raise); }
.thanks-figure img{ width:100%; height:100%; object-fit:cover; }
@media (min-width:768px){
  .thanks-copy{ grid-column:1 / span 7; }
  .thanks-figure{ grid-column:9 / -1; }
}
.photo-strip{
  display:flex; gap:4px; margin-top:clamp(64px, 9vh, 112px);
  height:clamp(220px, 26vw, 380px);
}
.photo-strip figure{ flex:var(--r) 1 0; min-width:0; overflow:hidden; background:var(--raise); }
.photo-strip img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:767px){
  .photo-strip{
    height:auto; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
    padding-inline:var(--gutter); scroll-padding-inline:var(--gutter); scrollbar-width:none;
  }
  .photo-strip::-webkit-scrollbar{ display:none; }
  .photo-strip figure{ flex:0 0 82%; aspect-ratio:3/2; scroll-snap-align:start; }
}

/* ==========================================================================
   SIGNATURE: DIE MAINLINIE
   ========================================================================== */
.route-label{ margin-bottom:clamp(24px, 4vh, 48px); }
.route-map{ position:relative; aspect-ratio:1100 / 440; --u:2.9; }
.route-svg{ width:100%; height:100%; overflow:visible; }
.route-line{
  fill:none; stroke:var(--yellow); stroke-linecap:round; stroke-linejoin:round;
  stroke-width:calc(3px * var(--u));
}
@media (max-width:767px){ .route-line{ stroke-width:calc(2.5px * var(--u)); } }
.js .route-line{ stroke-dasharray:1; stroke-dashoffset:1; }
/* Vor dem Zeichnen ausblenden: runde Linienenden malen sonst schon einen Punkt an den Pfadanfang */
.js .route:not(.is-drawn) .route-line{ visibility:hidden; }
.js .route.is-drawn .route-line{ stroke-dashoffset:0; transition:stroke-dashoffset 1400ms var(--ease-in-out); }
.js .route.is-drawn .route-line--branch{ transition-delay:900ms; transition-duration:500ms; }
.route-dot{ fill:var(--yellow); opacity:0; offset-rotate:0deg; offset-distance:0%; }
.route-dot.is-running{ opacity:1; }
.route-tag{ position:absolute; white-space:nowrap; pointer-events:none; }
.route-tag--river{ transform:translate(-50%, -100%); }
.route-tag--club{ transform:translate(-50%, 14px); }
.js .route-tag{ opacity:0; filter:blur(4px); }
.js .route.is-labeled .route-tag{ opacity:1; filter:none; transition:opacity 400ms var(--ease-out), filter 400ms var(--ease-out); }
.js .route.is-labeled .route-tag--club{ transition-delay:80ms; }

.route-panel{
  display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:var(--col-gap); row-gap:40px;
  margin-top:clamp(40px, 6vh, 72px); padding-top:clamp(32px, 4vh, 48px); border-top:1px solid var(--line);
}
.route-pick, .route-side{ grid-column:1 / -1; }
@media (min-width:1024px){
  .route-pick{ grid-column:1 / span 5; }
  .route-side{ grid-column:6 / -1; }
}
/* Ohne JS: Liste aller drei Distanzen */
.route-list{ list-style:none; padding:0; display:grid; }
.route-list li{ display:grid; gap:6px; padding:16px 0; }
.route-list li + li{ border-top:1px solid var(--line); }
.rl-dist{ font-weight:650; font-size:20px; }
.rl-meta{ font-family:var(--mono); font-size:14px; }
.rl-meta .label{ margin-right:8px; }
.js .route-list{ display:none; }
/* Mit JS: Schalter, Ziffer, Faktenliste */
.route-seg{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)) auto; align-items:center; gap:4px; }
.route-seg button{
  min-height:48px; border:1px solid var(--line);
  font-family:var(--mono); font-weight:500; font-size:15px; font-stretch:75%; color:var(--mid);
  transition:color var(--t-press) ease, border-color var(--t-press) ease, background-color var(--t-press) ease, transform var(--t-press) var(--ease-out);
}
.route-seg button[aria-pressed="true"]{ color:var(--ink); background:var(--yellow); border-color:var(--yellow); }
.route-seg button:active{ transform:scale(.97); }
@media (hover:hover) and (pointer:fine){ .route-seg button[aria-pressed="false"]:hover{ color:var(--paper); border-color:var(--paper-30); } }
.route-seg .label{ padding-left:12px; }
.digit{
  display:block; margin-top:clamp(24px, 4vh, 40px);
  font-weight:860; font-stretch:68%;
  font-size:clamp(96px, 15vw, 232px); line-height:.82; letter-spacing:-.02em;
  margin-left:-.05em; padding-bottom:.04em;
  font-variant-numeric:tabular-nums;
}
.route-facts dl{ display:grid; }
.route-facts dl > div{ display:grid; grid-template-columns:minmax(88px, 140px) minmax(0, 1fr); gap:16px; align-items:baseline; padding:14px 0; }
.route-facts dl > div + div{ border-top:1px solid var(--line); }
.route-facts dd{ font-family:var(--mono); font-weight:500; font-stretch:75%; font-size:clamp(18px, 1.6vw, 24px); line-height:1.25; }
.route-prices{ display:flex; flex-wrap:wrap; gap:4px 24px; }
.route-prices span{ display:inline-flex; align-items:baseline; gap:8px; }
.route-prices .label{ font-size:11px; }
.route-counter{ margin-top:24px; color:var(--paper); min-height:1.3em; }
.route-docs{ list-style:none; padding:0; margin-top:40px; display:grid; gap:4px; }
.route-docs a{
  display:grid; grid-template-columns:56px minmax(0, 1fr) auto; align-items:center; gap:16px;
  padding:8px 0; text-decoration:none; color:var(--paper);
  transition:color var(--t-press) ease;
}
.route-docs img{ width:56px; height:56px; object-fit:cover; background:var(--raise); }
.route-docs a > span:first-of-type{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; text-decoration-color:var(--paper-30); }
@media (hover:hover) and (pointer:fine){ .route-docs a:hover{ color:var(--yellow); } .route-docs a:hover > span:first-of-type{ text-decoration-color:currentColor; } }
@media (max-width:767px){ .digit{ font-size:96px; } .route-tag--club{ transform:translate(-12px, 18px); } }

/* ==========================================================================
   PREISE & ZEITEN, TICKET
   ========================================================================== */
.section-title{ margin-bottom:var(--title-gap); }
.prices-grid{ row-gap:64px; }
@media (min-width:1024px){
  .prices-main{ grid-column:1 / span 7; }
  .prices-side{ grid-column:9 / -1; }
}
.rules{ margin-top:32px; color:var(--mid); font-size:15px; }
.rules p:first-child{ color:var(--paper); }

.ticket{ display:grid; gap:16px; }
.ticket-status{ color:var(--paper); }
.ticket-status::before{ content:"Status"; color:var(--mid); margin-right:16px; }
.ticket-body{
  --stub:184px; --notch:9px;
  display:grid; grid-template-columns:minmax(0, 1fr) var(--stub);
  background:var(--raise); border:1px solid var(--line);
  -webkit-mask:
    radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0, transparent 97%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 100%, transparent 97%, #000) bottom / 100% 51% no-repeat;
  mask:
    radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0, transparent 97%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 100%, transparent 97%, #000) bottom / 100% 51% no-repeat;
}
.ticket-table{ width:100%; }
.ticket-table th, .ticket-table td{ padding:16px clamp(10px, 1.4vw, 20px); text-align:right; vertical-align:baseline; }
.ticket-table th:first-child{ text-align:left; padding-left:clamp(16px, 2vw, 28px); }
.ticket-table thead th{ white-space:nowrap; font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--mid); font-weight:400; padding-top:20px; }
.ticket-table tbody tr{ border-top:1px solid var(--line); }
.ticket-table tbody th{ font-weight:500; font-size:15px; line-height:1.35; color:var(--mid); }
.ticket-table td{ font-family:var(--mono); font-weight:500; font-stretch:75%; font-size:15px; color:var(--mid); white-space:nowrap; }
.ticket-table tbody tr:last-child th, .ticket-table tbody tr:last-child td{ padding-bottom:20px; }
.ticket-table tr.late th{ font-size:14px; }
.now-tag{ display:none; }
.ticket-stub{
  display:grid; align-content:space-between; justify-items:start; gap:24px;
  padding:20px clamp(16px, 2vw, 24px); border-left:1px dashed var(--line);
}
.ticket-next{ color:var(--paper); }
/* Zustand Anmeldung: aktuelle Phase in Papier, Tag "Jetzt", Stub gelb */
[data-phase="anmeldung"] .ticket-table tr.is-current th, [data-phase="anmeldung"] .ticket-table tr.is-current td{ color:var(--paper); }
[data-phase="anmeldung"] .ticket-table tr.is-current .now-tag{
  display:inline-block; margin-right:10px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--yellow);
}
[data-phase="anmeldung"] .ticket-stub{ background:var(--yellow); border-left-color:var(--ink); }
[data-phase="anmeldung"] .ticket-stub .label{ color:var(--ink); }
/* Gelber Grund: der gelbe Fokusring wäre unsichtbar, dort Tinte */
[data-phase="anmeldung"] .ticket-stub :focus-visible{ outline-color:var(--ink); }
/* Nachmeldegebühren sind ein Aufschlag, kein vierter Preis: abgesetzt und leiser */
.ticket-table tbody tr.late{ border-top:1px dashed #3a3a37; }
.ticket-table tr.late th, .ticket-table tr.late td{ padding-top:20px; color:var(--mid); }
.ticket-table tr.late td{ font-weight:400; font-size:13px; }
@media (max-width:767px){
  .ticket-body{
    --stub:112px;
    grid-template-columns:minmax(0, 1fr);
    -webkit-mask:
      radial-gradient(circle var(--notch) at 0 calc(100% - var(--stub)), transparent 97%, #000) left / 51% 100% no-repeat,
      radial-gradient(circle var(--notch) at 100% calc(100% - var(--stub)), transparent 97%, #000) right / 51% 100% no-repeat;
    mask:
      radial-gradient(circle var(--notch) at 0 calc(100% - var(--stub)), transparent 97%, #000) left / 51% 100% no-repeat,
      radial-gradient(circle var(--notch) at 100% calc(100% - var(--stub)), transparent 97%, #000) right / 51% 100% no-repeat;
  }
  .ticket-stub{ height:var(--stub); border-left:0; border-top:1px dashed var(--line); align-content:center; }
  [data-phase="anmeldung"] .ticket-stub{ border-top-color:var(--ink); }
  .ticket-table th, .ticket-table td{ padding:14px 6px; }
  .ticket-table th:first-child{ padding-left:14px; }
  .ticket-table td:last-child, .ticket-table th:last-child{ padding-right:14px; }
  .ticket-table td{ font-size:13px; }
  .ticket-table tbody th{ font-size:13px; }
  .ticket-table tr.late th{ font-size:12px; }
  .ticket-table thead th{ font-size:11px; letter-spacing:.06em; }
}

.data-table{ width:100%; }
.data-table caption{ text-align:left; margin-bottom:16px; }
.data-table th, .data-table td{ padding:14px 0; text-align:left; }
.data-table thead th{ padding-top:0; font-weight:400; }
.data-table tbody tr{ border-top:1px solid var(--line); }
.data-table tbody th{ font-weight:500; }
.data-table td{ text-align:right; font-family:var(--mono); font-weight:500; font-stretch:75%; font-size:15px; }
.data-table thead th:last-child{ text-align:right; }
.def-list{ margin-top:40px; display:grid; gap:20px; }
.def-list > div{ display:grid; gap:6px; }
.def-list dd{ font-size:15px; }
.def-list--rows{ margin-top:24px; gap:0; }
.def-list--rows > div{ grid-template-columns:96px minmax(0, 1fr); gap:16px; padding:16px 0; align-items:baseline; }
.def-list--rows > div + div{ border-top:1px solid var(--line); }
.contact-line{ margin-top:32px; font-size:15px; color:var(--mid); }

/* Vor Ort + Inklusive */
.onsite{ padding-top:0; }
.onsite-grid{ row-gap:64px; }
@media (min-width:768px){
  .onsite-block:first-child{ grid-column:1 / span 6; }
  .onsite-block:last-child{ grid-column:7 / -1; }
}
.incl-grid{ list-style:none; padding:0; margin-top:24px; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); }
.incl-grid li{ padding:20px 20px 20px 0; font-size:15px; line-height:1.45; }
.incl-grid li:nth-child(even){ padding-left:20px; padding-right:0; border-left:1px solid var(--line); }
.incl-grid li:nth-child(n+3){ border-top:1px solid var(--line); }
@media (max-width:420px){
  .incl-grid{ grid-template-columns:minmax(0, 1fr); }
  .incl-grid li, .incl-grid li:nth-child(even){ padding:16px 0; border-left:0; }
  .incl-grid li + li{ border-top:1px solid var(--line); }
}

/* Spende */
.donate{ padding-top:0; }
.donate-grid{ row-gap:32px; align-items:end; border-top:1px solid var(--line); padding-top:clamp(64px, 9vh, 112px); }
.donate-text{ grid-column:1 / -1; }
@media (min-width:1024px){
  .donate-text{ grid-column:1 / span 8; }
  .donate-side{ grid-column:10 / -1; justify-self:end; }
}

/* Aftermovie */
.movie{ padding-top:0; }
.movie-title a{ text-decoration:none; transition:color var(--t-press) ease; }
@media (hover:hover) and (pointer:fine){ .movie-title a:hover{ color:var(--yellow); } }
.movie-title{ max-width:24ch; }

/* Sponsoren */
.sponsors{ padding-top:0; }
.sponsors-title{ margin-bottom:24px; }
.logo-row{ list-style:none; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); border-block:1px solid var(--line); }
.logo-row li + li{ border-left:1px solid var(--line); }
.logo{ display:grid; place-items:center; aspect-ratio:3/2; padding:12%; text-decoration:none; }
.logo img{
  width:100%; height:100%; object-fit:contain;
  transform:scale(var(--logo-scale, 1));
  opacity:.62; transition:opacity var(--t-press) ease;
  /* Die PNGs haben volle Hintergründe (schwarz oder nach dem Invertieren schwarz): lighten lässt sie im Grund verschwinden */
  mix-blend-mode:lighten;
}
.logo--box img{ filter:grayscale(1) invert(1) brightness(.9); }
.logo--light img{ filter:grayscale(1); }
/* Partner ohne Sponsoring (Sanitätsdienst): Logo weiß wie die Nachbarn, Rolle als Label oben in der Zelle */
.logo--mono img{ filter:brightness(0) invert(1); }
.logo--rolle{ position:relative; height:100%; aspect-ratio:auto; }
.logo-rolle{ position:absolute; top:clamp(8px, 1.4vw, 18px); left:0; right:0; text-align:center; }
a.logo:active img{ opacity:1; }
@media (hover:hover) and (pointer:fine){ a.logo:hover img{ opacity:1; } }
@media (max-width:767px){
  .logo-row{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .logo-row li:nth-child(3){ border-left:0; }
  .logo-row li:nth-child(n+3){ border-top:1px solid var(--line); }
}

/* ==========================================================================
   EINBETTUNGEN (Einwilligung)
   ========================================================================== */
.embed{ position:relative; background:var(--raise); border:1px solid var(--line); overflow:hidden; }
.embed--video{ aspect-ratio:16/9; }
.map-section .embed--map{ height:clamp(420px, 37.5vw, 640px); border-inline:0; }
@media (max-width:767px){ .map-section .embed--map{ height:auto; aspect-ratio:auto; min-height:max(75vw, 420px); } .embed--video{ aspect-ratio:auto; min-height:360px; } }
.embed--rr{ min-height:320px; }
.embed iframe{ width:100%; height:100%; border:0; }
.embed--video iframe, .embed--map iframe{ position:absolute; inset:0; }
.consent-ph{
  position:relative; z-index:1; height:100%; min-height:inherit;
  display:grid; align-content:center; justify-items:start; gap:12px;
  padding:clamp(24px, 4vw, 56px) max(clamp(24px, 4vw, 56px), var(--gutter));
}
.embed--video .consent-ph, .embed--rr .consent-ph{ padding-inline:clamp(24px, 4vw, 56px); }
.consent-ph-bg{ position:absolute; inset:0; z-index:-1; }
.consent-ph-bg img{ width:100%; height:100%; object-fit:cover; object-position:50% 30%; opacity:.2; }
/* Hinter der Textspalte dunkler, damit Nebentext auch über hellen Bildstellen AA schafft */
.consent-ph-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(12,12,11,.9) 0%, rgba(12,12,11,.78) 45%, rgba(12,12,11,.4) 100%); }
@media (max-width:767px){ .consent-ph-bg::after{ background:rgba(12,12,11,.86); } }
.consent-ph p:not(.label){ max-width:52ch; color:rgba(242,242,238,.8); font-size:15px; }
.consent-ph .coords{ color:var(--paper); }
.consent-ph .btn-row{ margin-top:12px; }
.consent-ph .text-link{ display:inline-flex; align-items:center; min-height:44px; font-size:15px; }
.embed.is-loaded .consent-ph{ display:none; }
.embed.is-loaded{ background:transparent; }
.embed-slot{ position:relative; }
.embed--video .embed-slot, .embed--map .embed-slot{ position:absolute; inset:0; }
.embed:not(.is-loaded) .embed-slot{ display:none; }
/* Race Result rendert hell: das Widget liegt wie ein eingelegtes Blatt auf Papier */
.embed--rr.is-loaded{ background:var(--paper); color:#111; border-color:var(--paper); padding:24px; }
.embed--rr .embed-slot{ min-height:280px; }
.rr-direct{ margin-top:12px; font-size:14px; }
.rr-direct .text-link{ display:inline-flex; align-items:center; min-height:44px; }
.embed--rr:not(.is-loaded) + .rr-direct{ display:none; }
.map-head{ padding-bottom:var(--title-gap); }

/* ==========================================================================
   UNTERSEITEN
   ========================================================================== */
.page-head{
  position:relative; isolation:isolate; overflow:clip;
  padding:calc(var(--nav-h) + clamp(64px, 12vh, 144px)) 0 clamp(48px, 7vh, 88px);
}
.page-head--image{ min-height:56svh; display:grid; align-content:end; background:#000; }
.page-head-media{ position:absolute; inset:0; z-index:-2; }
.page-head-media img{ width:100%; height:100%; object-fit:cover; }
.page-head--image::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg, rgba(3,3,3,.92) 0%, rgba(3,3,3,0) 70%); }
@media (max-width:767px){ .page-head--image{ min-height:48svh; } }
.page-lede{ margin-top:24px; max-width:60ch; font-size:clamp(17px, 1.3vw, 19px); }
.page-lede p{ color:var(--paper); }
.page-actions{ margin-top:32px; }
.anchor-target{ scroll-margin-top:calc(var(--nav-h) + 24px); }
.widget-title{ margin-bottom:var(--title-gap); }
.ticket-wrap{ max-width:calc(1000px + 2 * var(--gutter)); margin-inline:0; }
@media (min-width:1441px){ .ticket-wrap{ margin-inline:auto; max-width:var(--maxw); } .ticket-wrap .ticket{ max-width:1000px; } }

/* Ergebnisse: Jahresleiste */
.year-bar{ display:flex; align-items:baseline; gap:clamp(24px, 4vw, 56px); margin-bottom:var(--title-gap); padding-bottom:16px; border-bottom:1px solid var(--line); }
.year-now{
  display:inline-flex; align-items:baseline; min-height:44px;
  font-family:var(--mono); font-weight:500; font-size:clamp(22px, 2.2vw, 32px); line-height:1.1; color:var(--paper);
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:10px;
}
.year-link{
  display:inline-flex; align-items:baseline; min-height:44px;
  font-family:var(--mono); font-weight:500; font-size:clamp(22px, 2.2vw, 32px); line-height:1.1;
  color:var(--mid); text-decoration:none; transition:color var(--t-press) ease;
}
@media (hover:hover) and (pointer:fine){ .year-link:hover{ color:var(--paper); } }

/* Galerie */
.gal-intro{ row-gap:48px; align-items:start; }
@media (min-width:768px){
  .gal-intro .copy{ grid-column:1 / span 6; }
  .gal-feature{ grid-column:8 / -1; }
}
.copy p{ color:var(--mid); }
.copy p.strong{ color:var(--paper); }
.copy .btn-row{ margin-top:32px; }
.gal-feature{ aspect-ratio:4/5; overflow:hidden; background:var(--raise); }
.gal-feature img{ width:100%; height:100%; object-fit:cover; filter:brightness(.9); }
.gal-2025{ max-width:64ch; margin-bottom:clamp(48px, 7vh, 88px); }
.credit{ margin-top:24px; font-size:14px; }
.gallery{ display:flex; flex-wrap:wrap; gap:4px; }
.gallery::after{ content:""; flex-grow:999; }
.tile{ flex:var(--r) 1 calc(var(--r) * 240px); aspect-ratio:var(--r); overflow:hidden; background:var(--raise); display:block; }
.tile img{ width:100%; height:100%; object-fit:cover; filter:brightness(.9); transition:filter var(--t-ui) ease; }
.tile:active img{ filter:brightness(1); }
@media (hover:hover) and (pointer:fine){ .tile:hover img{ filter:brightness(1); } }
@media (max-width:767px){ .tile{ flex-basis:calc(var(--r) * 160px); } }

.lightbox{
  width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0;
  background:var(--ink); color:var(--paper); position:fixed; inset:0; overflow:hidden;
}
.lightbox[open]{ display:grid; grid-template-rows:auto minmax(0, 1fr) auto; animation:fade-in var(--t-ui) var(--ease-out); }
.lightbox::backdrop{ background:#000; }
.lb-top{ display:flex; justify-content:flex-end; padding:8px var(--gutter); }
.lb-stage{ display:grid; place-items:center; min-height:0; padding:0 5vw; }
.lb-stage img{ max-width:100%; max-height:calc(100dvh - 10vh - 120px); width:auto; height:auto; object-fit:contain; }
.lb-stage img.is-entering{ animation:lb-in var(--t-ui) var(--ease-out) both; }
.lb-stage img.is-swapping{ animation:fade-in 160ms var(--ease-out) both; }
@keyframes lb-in{ from{ opacity:0; transform:scale(.98); } }
.lb-bottom{ display:flex; justify-content:space-between; align-items:center; padding:8px var(--gutter) max(12px, env(safe-area-inset-bottom, 0px)); }
.lb-count{ color:var(--paper); }

/* Mehr Events */
.events{ list-style:none; padding:0; border-top:1px solid var(--line); }
.event{
  position:relative; isolation:isolate;
  display:grid; grid-template-columns:160px minmax(0, 1fr) minmax(0, 1fr); column-gap:var(--col-gap); row-gap:24px;
  align-items:start; padding-block:clamp(32px, 5vh, 56px); border-bottom:1px solid var(--line);
}
.event::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  inset:0 calc(-1 * min(24px, var(--gutter)));
  background:var(--raise); opacity:0; transition:opacity var(--t-ui) ease;
}
.event-logo{ width:160px; height:160px; background:var(--raise); display:grid; place-items:center; padding:12px; }
.event-logo img{ width:100%; height:100%; object-fit:contain; }
.event-name{ align-self:start; hyphens:manual; -webkit-hyphens:manual; }
.event-copy p{ color:var(--mid); }
.event-copy .btn{ margin-top:24px; }
@media (hover:hover) and (pointer:fine){ .event:hover::before{ opacity:1; } }
@media (min-width:1024px){ .event{ grid-template-columns:160px minmax(0, 6fr) minmax(0, 4fr); } }
@media (max-width:1023px){
  .event{ grid-template-columns:96px minmax(0, 1fr); }
  .event-logo{ width:96px; height:96px; padding:8px; }
  .event-name{ align-self:center; }
  .event-copy{ grid-column:1 / -1; }
}

/* Feedback */
.form-grid{ row-gap:64px; }
@media (min-width:1024px){
  .form-wrap{ grid-column:1 / span 7; }
  .form-aside{ grid-column:9 / -1; }
}
.form{ display:grid; gap:24px; }
.form-row{ display:grid; gap:24px; }
@media (min-width:768px){ .form-row{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.field{ display:grid; gap:8px; }
.field > .label, .field legend{ color:var(--paper); }
.field input, .field textarea{
  width:100%; min-height:48px; padding:12px 14px;
  background:var(--raise); color:var(--paper);
  border:1px solid var(--line); border-radius:0;
  font:inherit; font-size:16px;
  transition:border-color var(--t-press) ease;
}
.field input:hover, .field textarea:hover{ border-color:#3a3a37; }
.field textarea{ resize:vertical; line-height:1.5; }
.field input:focus-visible, .field textarea:focus-visible{ outline:2px solid var(--yellow); outline-offset:2px; border-color:var(--line); }
.field.has-error input{ border-color:var(--paper); }
.field-error{ display:flex; gap:10px; align-items:baseline; font-size:14px; color:var(--paper); }
.field-error .label{ color:var(--yellow); }
.hp{ position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
fieldset{ border:0; padding:0; margin:0; min-width:0; }
.rating-field legend{ margin-bottom:8px; }
.rating-row{ display:flex; align-items:center; gap:16px; }
.rating{ display:flex; flex-direction:row-reverse; justify-content:flex-end; }
.rating input{ position:absolute; opacity:0; width:1px; height:1px; }
.rating label{ display:grid; place-items:center; width:44px; height:44px; cursor:pointer; font-size:28px; line-height:1; color:var(--mid); transition:color var(--t-press) ease, transform var(--t-press) var(--ease-out); }
.rating label:active{ transform:scale(.9); }
.rating input:checked ~ label{ color:var(--yellow); }
@media (hover:hover) and (pointer:fine){ .rating label:hover, .rating label:hover ~ label{ color:var(--yellow-dark); } }
.rating input:focus-visible + label{ outline:2px solid var(--yellow); outline-offset:-2px; }
.rating-value{ color:var(--paper); }
.form .btn[disabled]{ opacity:.6; cursor:progress; }
.form-done{ padding:32px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.form-done:focus{ outline:none; }

/* Social als Textlinks (Footer + Feedback) */
.social{ list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:4px 24px; margin-top:16px; }
.social a{
  display:inline-flex; align-items:center; min-height:44px;
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; color:var(--paper);
  transition:color var(--t-press) ease;
}
@media (hover:hover) and (pointer:fine){ .social a:hover{ color:var(--yellow); } }
.social--stack{ flex-direction:column; margin-top:0; }

/* Rechtstexte: Lesemodus */
.legal{ max-width:68ch; font-size:16px; line-height:1.65; }
.legal h2{ font-weight:650; font-stretch:96%; font-size:22px; line-height:1.25; margin:64px 0 16px; }
.legal h2:first-child{ margin-top:0; }
.legal h3{ font-weight:650; font-stretch:96%; font-size:22px; line-height:1.25; margin:64px 0 16px; scroll-margin-top:calc(var(--nav-h) + 24px); }
.legal h4{ font-weight:650; font-size:17px; margin:32px 0 8px; }
.legal p, .legal li{ color:rgba(242,242,238,.86); }
.legal p + p{ margin-top:.8em; }
.legal ul{ margin:.8em 0; padding-left:1.2em; }
.legal li + li{ margin-top:.4em; }
.legal a{ color:var(--paper); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; text-decoration-color:var(--paper-30); word-break:break-word; }
@media (hover:hover) and (pointer:fine){ .legal a:hover{ color:var(--yellow); } }
.sec-num{ font-family:var(--mono); font-weight:400; font-size:.72em; color:var(--mid); margin-right:.5em; letter-spacing:0; }
.imprint{ display:grid; grid-template-columns:minmax(0, 1fr); gap:32px; margin-top:32px; }
.imprint strong{
  display:block; margin-bottom:8px;
  font-family:var(--mono); font-weight:400; font-size:12px; line-height:1.3; letter-spacing:.1em; text-transform:uppercase; color:var(--mid);
}
.legal-grid{ row-gap:32px; }
.legal--long{ grid-column:1 / -1; }
.toc{ grid-column:1 / -1; }
.toc ol{ list-style:none; padding:0; margin-top:16px; display:grid; gap:2px; }
.toc li{ padding:6px 0; }
.toc a{
  /* Hängender Einzug: Folgezeilen stehen unter dem Titel, nicht unter der Nummer */
  display:grid; grid-template-columns:4ch minmax(0, 1fr); column-gap:2px;
  font-family:var(--mono); font-size:12px; line-height:1.5; color:var(--mid); text-decoration:none;
  transition:color var(--t-press) ease;
}
.toc a .sec-num{ font-size:1em; }
.toc a.is-active{ color:var(--paper); }
@media (hover:hover) and (pointer:fine){ .toc a:hover{ color:var(--paper); } }
.toc summary{ cursor:pointer; min-height:44px; display:flex; align-items:center; list-style:none; color:var(--paper); }
.toc summary::-webkit-details-marker{ display:none; }
.toc summary::after{ content:"+"; margin-left:10px; font-family:var(--mono); }
.toc details[open] summary::after{ content:"-"; }
@media (max-width:1023px){ .toc{ border-block:1px solid var(--line); } .toc ol{ padding-bottom:16px; } }
@media (min-width:1024px){
  .toc{ grid-column:1 / span 3; position:sticky; top:calc(var(--nav-h) + 32px); align-self:start; max-height:calc(100vh - var(--nav-h) - 64px); overflow-y:auto; scrollbar-width:thin; }
  .toc summary{ pointer-events:none; }
  .toc summary::after, .toc details[open] summary::after{ content:none; }
  .legal--long{ grid-column:5 / span 7; }
  .legal--long > h2:first-child{ margin-top:0; }
}

/* 404 */
.notfound{ min-height:100svh; display:grid; align-content:center; padding-block:calc(var(--nav-h) + 48px) 64px; }
.notfound h1{ font-size:clamp(96px, 18vw, 260px); line-height:.9; }
.notfound .statement{ margin-top:24px; color:var(--paper); }
.notfound .btn-row{ margin-top:40px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ border-top:1px solid var(--line); padding:clamp(72px, 10vh, 128px) 0 24px; }
.footer-grid{ display:grid; gap:48px; align-items:end; }
@media (min-width:768px){ .footer-grid{ grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); } }
.footer-mail{ margin-top:20px; font-size:clamp(17px, 1.4vw, 20px); }
.footer-mail a{ color:var(--yellow); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }
@media (hover:hover) and (pointer:fine){ .footer-mail a:hover{ color:var(--yellow-dark); } }
.footer-bottom{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 32px;
  margin-top:clamp(56px, 8vh, 96px); padding-top:16px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--mid);
}
.footer-legal{ display:flex; flex-wrap:wrap; gap:0 24px; list-style:none; padding:0; }
.footer-legal a, .footer-legal button{
  display:inline-flex; align-items:center; min-height:44px;
  font:inherit; letter-spacing:inherit; text-transform:inherit; color:var(--mid); text-decoration:none;
  transition:color var(--t-press) ease;
}
@media (hover:hover) and (pointer:fine){ .footer-legal a:hover, .footer-legal button:hover{ color:var(--paper); } }

/* ==========================================================================
   COOKIE-BANNER + PRIVATSPHÄRE-DIALOG
   ========================================================================== */
.cc-banner{
  position:fixed; z-index:300;
  left:max(12px, env(safe-area-inset-left, 0px)); bottom:max(12px, env(safe-area-inset-bottom, 0px));
  width:min(420px, calc(100vw - 24px));
  background:var(--raise); color:var(--paper); border:1px solid var(--line);
  padding:20px;
  transition:transform var(--t-ui) var(--ease-out), opacity var(--t-ui) var(--ease-out);
}
.cc-banner.is-entering{ transform:translateY(16px); opacity:0; }
.cc-banner.is-leaving{ transform:translateY(16px); opacity:0; transition-duration:180ms; }
.cc-banner:focus{ outline:none; }
.cc-banner h2{ color:var(--paper); margin-bottom:8px; }
.cc-banner p{ font-size:14px; line-height:1.5; color:var(--mid); }
.cc-actions{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:16px; }
.cc-actions .btn{ min-height:44px; padding:10px 12px; white-space:normal; text-align:center; line-height:1.3; }
.cc-link{
  grid-column:1 / -1; justify-self:start; min-height:44px; padding:0 2px;
  font-size:14px; color:var(--paper); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--paper-30);
}
@media (prefers-reduced-motion: reduce){ .cc-banner{ transition:opacity 200ms ease; } .cc-banner.is-entering, .cc-banner.is-leaving{ transform:none; } }

.cc-dialog{
  margin:auto; width:min(600px, calc(100vw - 24px)); max-height:min(88dvh, 820px);
  padding:0; border:1px solid var(--line); background:var(--raise); color:var(--paper); overflow:auto;
}
.cc-dialog::backdrop{ background:rgba(3,3,3,.72); }
.cc-dialog[open]{ animation:dlg-in var(--t-ui) var(--ease-out); }
@keyframes dlg-in{ from{ opacity:0; transform:translateY(8px) scale(.98); } }
@media (prefers-reduced-motion: reduce){ .cc-dialog[open]{ animation:fade-in 200ms ease; } }
.cc-head{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:12px 12px 8px 24px; }
.cc-head h2{ color:var(--paper); }
.cc-body{ padding:0 24px; }
.cc-body > p{ font-size:15px; color:var(--mid); }
.cc-cats{ list-style:none; padding:0; margin:20px 0 8px; display:grid; }
.cc-cat{ padding:16px 0; border-top:1px solid var(--line); }
.cc-cat-head{ display:flex; justify-content:space-between; align-items:center; gap:16px; }
.cc-cat-head label, .cc-cat-name{ font-weight:650; font-size:17px; line-height:1.3; }
.cc-cat p{ margin-top:6px; font-size:14px; color:var(--mid); }
.switch{ position:relative; flex:none; width:48px; height:26px; }
.switch input{ position:absolute; inset:-9px -2px; width:calc(100% + 4px); height:calc(100% + 18px); margin:0; opacity:0; cursor:pointer; z-index:1; }
.switch span{ position:absolute; inset:0; border:1px solid var(--paper-30); transition:background-color var(--t-press) ease, border-color var(--t-press) ease; }
.switch span::after{ content:""; position:absolute; top:4px; left:4px; width:16px; height:16px; background:var(--mid); transition:transform var(--t-press) var(--ease-out), background-color var(--t-press) ease; }
.switch input:checked + span{ background:var(--yellow); border-color:var(--yellow); }
.switch input:checked + span::after{ transform:translateX(22px); background:var(--ink); }
.switch input:focus-visible + span{ outline:2px solid var(--yellow); outline-offset:3px; }
.cc-foot{ display:flex; flex-wrap:wrap; gap:8px; padding:16px 24px 24px; position:sticky; bottom:0; background:var(--raise); border-top:1px solid var(--line); }
.cc-foot .btn{ flex:1 1 auto; min-height:44px; padding:0 14px; }

/* ==========================================================================
   Reduced Motion: Bewegung und Blur raus, Fades bleiben (200 ms)
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  .js [data-reveal], .js [data-reveal="title"]{ transform:none; filter:none; transition:opacity 200ms ease; transition-delay:0ms; }
  .mobile-menu li, .menu-open .mobile-menu li{ transform:none; transition:opacity 200ms ease; transition-delay:0ms; }
  .action-bar, .action-bar.is-shown{ transition:opacity 200ms ease; }
  .btn:active, .route-seg button:active, .nav-links a.nav-cta:active, .rating label:active{ transform:none; }
  .js .route-line{ stroke-dasharray:none; stroke-dashoffset:0; }
  .js .route-tag{ filter:none; }
  .js .route.is-labeled .route-tag{ transition:opacity 200ms ease; }
  .lb-stage img.is-entering{ animation:fade-in 200ms ease both; }
  ::view-transition-new(root){ animation:fade-in 200ms ease both; }
}
@media (max-width:767px) and (prefers-reduced-motion: reduce){
  .action-bar{ transform:none; opacity:0; }
  .action-bar.is-shown{ opacity:1; }
  .menu-open .action-bar, .cc-open .action-bar{ transform:none; opacity:0; }
}
@media (prefers-reduced-transparency: reduce){
  .site-nav::before, .action-bar{ -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--ink); }
}

/* ---------- Credit Odin Bayer (dezent, nimmt die Textfarbe des Footers an) ---------- */
.st-credit { margin: 0; font-size: 14px; letter-spacing: 0.01em; }
.st-credit a { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; color: inherit; text-decoration: none; opacity: 0.6; transition: opacity 200ms ease; }
@media (hover: hover) and (pointer: fine) { .st-credit a:hover { opacity: 1; text-decoration: none; } }
.st-credit a:focus-visible { opacity: 1; }