/* =========================================================
   HOWE simracing – Design-System
   1:1 nach der Wix-Seite (Stand Okt. 2026)
   ========================================================= */

@font-face {
  font-family: "F1 Display";
  src: url("/fonts/Formula1-Display-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "F1 Display";
  src: url("/fonts/Formula1-Display-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --c-bg: #1a1a1a;
  --c-bg-2: #242424;
  --c-gelb: #ffc525;
  --c-weiss: #ffffff;
  --c-hell: #f0f0f0;
  --c-grau-hell: #c2c2c2;
  --c-grau: #6e6e6e;
  --c-logo-grau: #c6c6c6;
  --c-gruen: #3ec74a;
  --c-rot: #d33a2c;

  --f-head: "F1 Display", "Arial Narrow", sans-serif;
  --f-text: "Jura", "Segoe UI", sans-serif;

  --header-h: 125px;
  --container: 1240px;
  --gutter: clamp(16px, 3vw, 40px);
  --ease: .4s ease;
}

/* Seitenwechsel: Blende über Schwarz - alte Seite 0,25 s aus, neue 0,25 s ein (View Transitions,
   reines CSS; Browser ohne Unterstützung wie Firefox wechseln einfach ohne Blende). */
@view-transition { navigation: auto; }
::view-transition { background: #000; }
::view-transition-old(root) { animation: fk-blende-aus .25s ease-in both; }
::view-transition-new(root) { animation: fk-blende-ein .25s ease-out .25s both; }
@keyframes fk-blende-aus { to { opacity: 0; } }
@keyframes fk-blende-ein { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-weiss);
  font: 400 18px/1.4 var(--f-text);
  -webkit-font-smoothing: antialiased;
}
img, video, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
img { height: auto; }
a { color: inherit; text-decoration: none; transition: color var(--ease); }
a:hover { color: var(--c-gelb); }
a.u { text-decoration: underline; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
:focus-visible { outline: 2px solid var(--c-gelb); outline-offset: 2px; }

/* ---------- Typografie (Wix font_0 … font_9) ---------- */
h1, h2, h3, h4, h5, h6 { margin: 0 0 .4em; font-family: var(--f-head); font-weight: 400; line-height: 1.3; }
.h-display { font: italic 700 clamp(56px, 8.5vw, 140px)/1 var(--f-head); }
.h2, h2 { font-size: clamp(36px, 4.1vw, 66px); font-style: italic; }
.h3, h3 { font-size: clamp(30px, 3vw, 48px); font-style: italic; color: var(--c-gelb); }
.h4, h4 { font-size: clamp(22px, 2.25vw, 36px); }
.h5, h5 { font-size: clamp(16px, 1.5vw, 24px); font-style: italic; }
.h6, h6 { font-size: clamp(18px, 1.75vw, 28px); font-style: italic; line-height: 1.4; }
.text-l { font-size: 18px; }
.text-m { font-size: 16px; }
.text-s { font-size: 15px; }
.text-xs { font-size: 12px; }
.gelb { color: var(--c-gelb); }
.dunkel { color: var(--c-bg); }
.kursiv { font-style: italic; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { position: relative; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 10px 28px;
  background: var(--c-gelb); color: var(--c-bg);
  border: 1px solid var(--c-gelb); border-radius: 0;
  font: 400 18px/1.4 var(--f-text); text-align: center;
  transition: background-color var(--ease), color var(--ease), border-color var(--ease);
}
.btn:hover { background: var(--c-bg); color: var(--c-weiss); }
.btn--dunkel { background: var(--c-bg); color: var(--c-weiss); border-color: var(--c-bg); }
.btn--dunkel:hover { background: transparent; color: var(--c-bg); border-color: var(--c-bg); }
.btn--block { display: flex; width: 100%; }

/* Wix-Skalierung: 1 spx = Viewportbreite / 1600 (wie im Original) */
:root { --spx: calc(100vw / 1600); --f-footer: "Wix Madefor Text", "Segoe UI", sans-serif; }

.icon-btn {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--c-gelb); border-radius: 10px;
  color: var(--c-gelb);
  transition: background-color var(--ease), color var(--ease);
}
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn:hover { background: var(--c-gelb); color: var(--c-bg); }

/* =========================================================
   HEADER (gemessen: 125 px hoch, Innenabstand 5vw, Logo 150 px)
   ========================================================= */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 100;
  height: var(--header-h);
  transition: background-color var(--ease), transform .4s cubic-bezier(.645,.045,.355,1);
}
/* Beim Runterscrollen fährt der Header aus dem Bild, beim Hochscrollen kommt er zurück */
.site-header.is-hidden { transform: translateY(-100%); }
.nav-open .site-header.is-hidden { transform: none; }
/* Glas-Effekt im Ausgangszustand. Bewusst auf einem ::before-Layer, damit backdrop-filter
   das fixierte Handy-Menü im Header nicht beeinflusst. */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(26,26,26,.5);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  transition: background-color var(--ease);
}
.site-header.is-scrolled::before { background-color: rgba(26,26,26,.96); }
.site-header__inner {
  position: relative;
  display: flex; align-items: center; gap: 0;
  height: 100%; padding-inline: 5vw;
}
.site-header__inner::after { /* Linie unter dem Menü: ab 23vw bis rechts, auf der Unterkante */
  content: ""; position: absolute; right: 0; bottom: 0; left: 23vw;
  height: 1px; background: var(--c-weiss);
}
.site-header__logo { flex: 0 0 auto; width: 150px; align-self: flex-start; margin-top: 20px; }
.site-header__logo svg { width: 100%; height: auto; }
.site-header__actions { display: flex; align-items: center; gap: 9px; margin-left: 13px; }

.main-nav { margin-left: auto; }
.main-nav__list { display: flex; align-items: center; gap: clamp(2px, .52vw, 10px); }
.main-nav__list > li { position: relative; display: flex; align-items: center; }
.main-nav a { font: 400 clamp(14px, 1.2vw, 18px)/1.4 var(--f-head); white-space: nowrap; }
.main-nav__list > li > a { --nav-pad: clamp(3px, calc((100vw - 1340px) / 32), 18px); position: relative; display: block; padding: 10px var(--nav-pad); }
/* Hover wie Wix (gemessen 03.10.): Schrift sofort gelb, 1 px gelber Balken direkt unter dem Text
   wächst in 0,3 s von links. Bei Untermenüs zieht er sich erst zurück, wenn das Untermenü zu ist (0,4 s). */
.main-nav a { transition: none; }
.main-nav__list > li > a::after {
  content: ""; position: absolute; left: var(--nav-pad); right: var(--nav-pad); top: calc(50% + 18px); height: 1px;
  background: var(--c-gelb); transform: scaleX(0); transform-origin: left center; transition: transform .3s ease;
  will-change: transform; /* eigene Ebene: Linie bleibt nach der Animation gleich dick (150-%-Monitore) */
}
.main-nav__list > .has-sub > a::after { transition-delay: .4s; }
.main-nav__list > li:hover > a, .main-nav__list > li:focus-within > a,
.main-nav a[aria-current="page"] { color: var(--c-gelb); }
.main-nav__list > li:hover > a::after, .main-nav__list > li:focus-within > a::after { transform: scaleX(1); transition-delay: 0s; }
.sub-toggle { display: none; }
.sub-toggle svg { width: 10px; height: auto; fill: currentColor; }
/* Submenü (gemessen): beginnt an der Header-Unterkante, links bündig mit dem Menüpunkt,
   90 % deckend, nur links eine dünne weiße Linie, Punkte 42 px hoch mit 10 px Abstand */
.sub-menu {
  position: absolute; left: -1px; top: calc((var(--header-h) + 100%) / 2);
  display: grid; row-gap: 10px; min-width: 241px;
  padding: 15px 30px;
  background: rgba(26,26,26,.9); border-left: .667px solid var(--c-weiss);
  /* klappt von oben nach unten auf (clip-path); oben -100px, damit die Brücke (::before) nicht abgeschnitten wird */
  clip-path: inset(-100px 0 100% 0); opacity: 0; visibility: hidden;
  transition: opacity .4s cubic-bezier(.645,.045,.355,1), clip-path .4s cubic-bezier(.645,.045,.355,1), visibility .4s;
}
.sub-menu::before { /* unsichtbare Brücke, damit das Menü beim Hinüberfahren offen bleibt */
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%;
  height: calc((var(--header-h) - 45px) / 2);
}
.sub-menu a { display: block; padding: 10px 0; font: 400 15px/22px var(--f-head); }
.has-sub:hover > .sub-menu,
.has-sub:focus-within > .sub-menu { clip-path: inset(-100px 0 0 0); opacity: 1; visibility: visible; }
/* Unterpunkte: eigener 1-px-Balken unter dem Text (Text 21 px hoch, Balken direkt darunter) */
.sub-menu a span { position: relative; display: inline-block; }
.sub-menu a span::after {
  content: ""; position: absolute; left: 0; right: 0; top: 21px; height: 1px;
  background: var(--c-gelb); transform: scaleX(0); transform-origin: left center; transition: transform .3s ease;
  will-change: transform; /* eigene Ebene: Linie bleibt nach der Animation gleich dick (150-%-Monitore) */
}
.sub-menu a:hover span::after, .sub-menu a:focus-visible span::after { transform: scaleX(1); }

.burger { display: none; width: 40px; height: 40px; padding: 10px 8px; }
.burger span { display: block; height: 2px; margin: 4px 0; background: var(--c-weiss); transition: transform var(--ease), opacity var(--ease); }

@media (max-width: 1000px) {
  :root { --header-h: 84px; }
  .site-header__inner::after { display: none; }
  .site-header__logo { width: 92px; margin-top: 0; align-self: center; }
  .burger { display: block; }
  /* Suche, Login und Burger am rechten Rand (das Menü selbst liegt hier außerhalb der Zeile) */
  .site-header__actions { margin-left: auto; }
  /* Menü als Leiste, die von rechts hereinfährt; dahinter wird die Seite abgedunkelt (body::after) */
  .main-nav {
    position: fixed; top: var(--header-h); right: 0; bottom: 0; left: auto; flex: none;
    width: min(420px, 86vw);
    padding: 24px 28px 60px; overflow-y: auto; overscroll-behavior: contain;
    background: var(--c-bg); border-left: 1px solid rgba(255,255,255,.12);
    transform: translateX(100%); visibility: hidden;
    transition: transform .35s cubic-bezier(.645,.045,.355,1), visibility .35s;
  }
  .nav-open .main-nav { transform: none; visibility: visible; }
  body::after {
    content: ""; position: fixed; inset: var(--header-h) 0 0; z-index: 99;
    background: rgba(0,0,0,.6); opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s;
  }
  body.nav-open::after { opacity: 1; visibility: visible; }
  .nav-open .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-open .burger span:nth-child(2) { opacity: 0; }
  .nav-open .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .main-nav__list { flex-direction: column; align-items: stretch; justify-content: flex-start; }
  .main-nav__list > li { flex-wrap: wrap; border-bottom: 1px solid rgba(255,255,255,.12); }
  .main-nav__list > li > a { flex: 1; padding: 18px 0; font-size: 20px; }
  .sub-toggle { display: grid; place-items: center; width: 48px; height: 48px; }
  .sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .sub-menu {
    position: static; flex-basis: 100%; min-width: 0; display: none;
    padding: 0 0 12px 12px; border: 0; background: none; row-gap: 0;
    opacity: 1; visibility: visible; clip-path: none; transition: none;
  }
  .main-nav__list > li > a::after, .sub-menu a span::after { display: none; }
  .sub-menu.is-open { display: block; }
  .sub-menu a { padding: 10px 0; font-size: 16px; color: var(--c-grau-hell); }
  body.nav-open { overflow: hidden; }
}

/* =========================================================
   FOOTER (gemessen: volle Breite, Innenabstand 44,5 / 5vw / 22,8 px,
   Spalten 159 / 424 / 261 / 170 / 188 px bei 1425 px, Abstand 20 px)
   ========================================================= */
.site-footer { position: relative; z-index: 1; background: var(--c-bg); padding: 3.13vw 5vw 1.6vw; font: 400 16px/1.6 var(--f-footer); }
.site-footer__inner {
  display: grid; gap: 20px;
  grid-template-columns: 159fr 424fr 261fr 170fr 188fr;
}
/* Mit Spalte „Kauf & Verträge“ (Shop-Rechtsseiten, Matthias 09.10.): sechs Spalten, „Über uns“ etwas schmaler */
.site-footer__inner:has([data-fk-shop-rechtliches]) { grid-template-columns: 159fr 360fr 230fr 200fr 160fr 188fr; }
@media (max-width: 1300px) and (min-width: 1001px) {
  /* Sechs Spalten werden zu eng: oben Logo + „Über uns“, darunter die vier Link-Spalten */
  .site-footer__inner:has([data-fk-shop-rechtliches]) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 20px; }
  .site-footer__inner:has([data-fk-shop-rechtliches]) .site-footer__about { grid-column: 2 / -1; }
}
.site-footer__logo svg { width: 100%; max-width: 159px; height: auto; }
.site-footer__title { margin: 0 0 16px; font: 700 16px/1.6 var(--f-footer); font-style: normal; color: var(--c-weiss); }
.site-footer__about p { max-width: 337px; font-size: 15px; line-height: 1.4; text-align: justify; }
.site-footer__links a { white-space: nowrap; }
.site-footer__social a { display: inline-flex; align-items: center; gap: 9px; }
.site-footer__social li + li { margin-top: 2px; }
.site-footer__social svg { width: 22px; height: 22px; fill: currentColor; }
.site-footer__social svg path { fill: currentColor; }
.site-footer__social svg [data-color="2"] { fill: var(--c-bg); }
.site-footer__copy {
  margin: max(38px, calc(4.6vw - 28px)) 0 0; padding-top: 14px;
  border-top: 1px solid var(--c-weiss);
  font-size: 14px; line-height: 1.4; text-align: center;
}
/* Vom CMS angehängte Zeilen unter dem Copyright (z. B. Gewährleistungshinweis): ohne eigene Trennlinie */
.site-footer .fk-fuss { border-top: 0; }
@media (max-width: 1000px) {
  .site-footer__inner, .site-footer__inner:has([data-fk-shop-rechtliches]) { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .site-footer__logo, .site-footer__about { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .site-footer__inner, .site-footer__inner:has([data-fk-shop-rechtliches]) { grid-template-columns: 1fr; }
}

/* ---------- Cookie-Einstellungen (Icon unten links, wie CCM19) ---------- */
.cookie-fab { position: fixed; left: 15px; bottom: 40px; z-index: 90; width: 48px; height: 48px; }
.cookie-fab img { width: 100%; height: 100%; }

/* =========================================================
   STARTSEITE – Maße 1:1 aus der Live-Seite (1440 × 900)
   ========================================================= */

/* --- Abschnitt 1: fixierter Startblock, 100vh, Raster 1.3fr / 0.7fr --- */
.home-stage {
  position: sticky; top: 0; z-index: 0;
  display: grid;
  grid-template-columns: 64.2% 35.8%;
  grid-template-rows: var(--header-h) minmax(0, 3fr) minmax(0, 2fr);
  height: 100vh; height: 100svh; overflow: hidden;
}
.home-stage { background: #000; }
.home-hero__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 43% 0%; opacity: .65; } /* wie Original: 65 % auf Schwarz */
.home-stage::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 45%);
}
.home-hero { position: relative; z-index: 2; grid-column: 1; grid-row: 1 / -1; }

/* Titelsong-Player: 502 × 64 px, 18 px unter dem Header, 18 px links vom Gelb */
.song {
  position: absolute; z-index: 3; top: calc(var(--header-h) + 1.27vw); right: 1.3vw;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 502px; max-width: calc(100% - 36px); height: 64px;
  padding: 0 12px 0 25px;
  background: rgba(149,185,255,.2); backdrop-filter: blur(4px); border-radius: 20px;
}
.song__titel { margin: 0; font: italic 400 20px/1.4 var(--f-head); white-space: nowrap; }
.song__btn {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 133px; height: 40px; background: rgba(26,26,26,.7); border-radius: 10px;
  font-size: 12px; color: var(--c-gelb); white-space: nowrap;
}
.song__btn svg { width: 16px; height: 16px; fill: var(--c-gelb); }

/* Titel unten links: Block 24 px vom Rand, 85 px über der Unterkante */
.home-hero__inhalt { position: absolute; left: 1.6vw; right: 0; bottom: 5.96vw; }
.home-hero__titel { position: relative; margin: 0; font: italic 700 9.84vw/1.3 var(--f-head); }
.home-hero__kicker { position: absolute; z-index: 1; top: 2.6vw; left: 12.6vw; margin: 0; font: italic 400 1.2vw/1.3 var(--f-head); }
.home-hero__spiele { margin: -1.75vw 0 0 10.4vw; font: italic 400 2.27vw/1.1 var(--f-head); }

/* Rechte Spalte: gelber Block (Zeile 2) + Partner (Zeile 3) */
.home-side { position: relative; z-index: 2; }
.home-side--stage { grid-column: 2; grid-row: 2 / 4; display: grid; grid-template-rows: minmax(0, 3fr) minmax(0, 2fr); }
.home-side__gelb {
  display: flex; flex-direction: column;
  padding: 2.85vw 2.4vw 1.85vw 3.15vw;
  background: var(--c-gelb); color: var(--c-bg);
}
.social-row { display: flex; gap: 8.5px; }
.social-row a { display: block; width: 50px; height: 50px; border-radius: 50%; }
.social-row svg { width: 100%; height: 100%; }
.social-row svg [data-color="1"] { fill: var(--c-bg); transition: fill var(--ease); }
.social-row a.discord:hover svg [data-color="1"] { fill: #5865f2; }
.social-row a.youtube:hover svg [data-color="1"] { fill: #e52d27; }
.social-row a.twitch:hover svg [data-color="1"] { fill: #6441a5; }
.social-row a.facebook:hover svg [data-color="1"] { fill: #3a5a99; }
.social-row a.instagram svg path { fill: var(--c-bg); }
.social-row a.instagram svg path[fill="#ffffff"], .social-row a.instagram svg path[fill="#fff"] { fill: #fff; }
.simgrid-link { display: block; width: 180px; height: 50px; margin-top: .78vw; }
.simgrid-link svg { width: 100%; height: 100%; }

.home-side__claim { margin-top: auto; }
.home-side__claim h1 { margin: 0 0 1.9vw; font: italic 700 1.767vw/1.4 var(--f-head); }
.home-side__claim .btn { min-height: 67.5px; font: 400 20px/1.2 var(--f-head); letter-spacing: 2px; }

.home-side__partner { padding: 2.25vw 2.25vw 0 2.67vw; background: var(--c-bg); }
.home-side__partner h2 { margin: 0 0 1.73vw 2px; font: normal 400 36px/1.4 var(--f-head); }
.partner-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .63vw .75vw; }
.partner-grid a {
  position: relative; display: block; aspect-ratio: 137 / 77;
  border: .667px solid var(--c-grau-hell); border-radius: 9px;
  transition: border-color var(--ease);
}
.partner-grid a:hover { border-color: var(--c-gelb); }
.partner-grid img { position: absolute; inset: 4%; width: 92%; height: 92%; object-fit: contain; }

/* --- Ab hier scrollt alles über den Startblock --- */
.home-scroll { position: relative; z-index: 1; background: var(--c-bg); }

/* --- Abschnitt 2: Trailer, 75vh, Raster 1.3fr / 0.7fr, rechts 2 × 50 % --- */
.home-row { display: grid; grid-template-columns: 64.2% 35.8%; height: 75vh; }
.home-row__trailer { position: relative; overflow: hidden; background: #000; }
.home-trailer, .home-trailer video { position: absolute; inset: 0; width: 100%; height: 100%; }
.home-trailer video { object-fit: cover; }
.home-side--trailer { display: grid; grid-template-rows: 1fr 1fr; }
.home-side__trailer {
  position: relative; padding: 3.15vw 2.4vw 0 3.15vw;
  background: var(--c-weiss); color: var(--c-bg);
}
.home-side__trailer .kicker { margin: 0 0 2px; font: 400 18px/1.4 var(--f-head); }
/* Gelb auf Weiß hat zu wenig Kontrast (1,6 : 1) → gelbe Schrift auf schwarzem Balken (11 : 1), Entscheidung 05.10. */
.home-side__trailer h2 {
  display: inline-block; margin: 0 0 0 -.25em; padding: 0 .25em;
  font: italic 400 48px/1.3 var(--f-head); color: var(--c-gelb); background: var(--c-bg);
}
.play-hinweis {
  position: absolute; left: 3.15vw; bottom: 3.1vw;
  display: flex; align-items: center; gap: .9vw;
  font: italic 400 28px/1.4 var(--f-head); color: var(--c-bg);
}
.play-hinweis svg { width: 2.95vw; height: 2.95vw; transform: rotate(-90deg); fill: var(--c-bg); }
button.play-hinweis:hover { color: var(--c-grau); }

.home-side__events { display: flex; flex-direction: column; justify-content: center; padding: 1.6vw 1.5vw 1.6vw calc(3.58vw - 26px); background: var(--c-bg); }
.home-side__events h2 { margin: 0 0 2.4vw calc(.35vw + 26px); font: normal 400 36px/1.4 var(--f-head); }
.event-liste li {
  display: grid; grid-template-columns: 14px 48px 142px minmax(0, 1fr); align-items: center; column-gap: 12px;
  margin-left: 0;
  height: 48px; margin-bottom: 9px;
}
.event-liste li > :nth-child(3) { margin-left: calc(1.2vw - 12px); }
.event-liste li > :nth-child(4) { margin-left: calc(1.05vw + 1.2vw - 24px); }
/* Status nicht nur über die Farbe: Häkchen (aktiv) bzw. Kreuz (inaktiv) im Punkt (Barrierefreiheit) */
.event-liste .status {
  width: 14px; height: 14px; border-radius: 50%;
  background: #22b441 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.6 7.2l2.2 2.2 4.6-4.8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.event-liste .status--inaktiv {
  background: var(--c-rot) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4.6 4.6l4.8 4.8M9.4 4.6l-4.8 4.8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.event-liste img { width: 48px; height: 48px; }
.event-liste .event__serie { font: 700 18px/1.6 var(--f-head); white-space: nowrap; }
.event-liste .event__saison { font: 400 18px/1.6 var(--f-text); white-space: nowrap; }

/* --- Abschnitt 3: Zahlen & Kaffeekasse | Darum, Höhe 650 spx, 50 / 50 --- */
.home-bottom { display: grid; grid-template-columns: 1fr 1fr; min-height: max(calc(650 * var(--spx)), 560px); }
.home-zahlen { position: relative; display: grid; grid-template-rows: 1fr 1fr; background: var(--c-bg); overflow: hidden; }
.zahlen-oben { display: flex; flex-direction: column; min-height: 0; }
.zahlen-oben > h2, .home-darum > h2 { margin: 0; font: normal 400 2.274vw/1.3 var(--f-head); text-align: center; }
.zahlen-oben > h2 { padding-top: 2.4vw; }
.zahlen-grid { display: grid; grid-template-columns: repeat(4, 1fr); padding: 0 18px; margin: auto 0; text-align: center; }
.zahl__wert { margin: 0; font: italic 400 3.785vw/1.3 var(--f-head); color: var(--c-gelb); }
.zahl__label { margin: 8px 0 0; font-size: 16px; line-height: 1.6; }
.zahlen-linie { height: 2px; margin: 0 2vw 1vw; background: var(--c-gelb); }

.kaffee { position: relative; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.kaffee__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 20% 50%; }
.kaffee::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to right, rgba(26,26,26,0) 25%, rgba(26,26,26,.85) 55%, var(--c-bg) 80%); }
.kaffee__inhalt { position: relative; z-index: 2; grid-column: 2; display: flex; flex-direction: column; align-items: center; padding: 0 1.26vw; text-align: center; }
.kaffee__inhalt h2 { margin: 0 0 3.6vw; font: normal 400 2.274vw/1.3 var(--f-head); }
.kaffee__inhalt p { margin: 0 0 1.18vw; font-size: 16px; line-height: 1.6; }
.kaffee .btn { width: 22.5vw; max-width: 100%; min-height: 3.17vw; padding: 0 12px; font: 400 1.136vw/1.4 var(--f-head); }

.home-darum { display: flex; flex-direction: column; padding: 2.45vw 1.54vw 1.6vw; background: var(--c-gelb); color: var(--c-bg); }
.darum-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: .59vw; row-gap: .59vw; margin: 2.04vw 0 0; }
.darum-karte { position: relative; padding-top: 2.6vw; text-align: center; color: var(--c-weiss); }
.darum-karte__icon {
  position: absolute; top: .2vw; left: 50%; z-index: 1; transform: translateX(-50%);
  display: grid; place-items: center; width: 4.7vw; height: 4.7vw;
  background: var(--c-weiss); border: 2px solid var(--c-bg); border-radius: 50%;
}
.darum-karte__icon svg { width: 51%; height: 51%; fill: var(--c-bg); }
.darum-karte__box { display: block; height: 7.58vw; padding: 3.3vw 4px 0; background: var(--c-bg); border-radius: 9px; }
.darum-karte h3 { margin: 0 0 .25vw; font: italic 400 1.01vw/1.3 var(--f-head); color: var(--c-weiss); }
.darum-karte p { margin: 0; font-size: max(13px, .757vw); line-height: 1.3; }

/* =========================================================
   Niedrige Bildschirme (z. B. 1280 × 720): Startblock kompakter
   ========================================================= */
@media (min-width: 1001px) and (max-height: 780px) {
  .home-side__gelb { padding-top: 22px; }
  .social-row a { width: 42px; height: 42px; }
  .simgrid-link { width: 150px; height: 42px; }
  .home-side__claim h1 { margin-bottom: 16px; }
  .home-side__claim .btn { min-height: 52px; }
  .home-side__partner { padding-top: 20px; }
  .home-side__partner h2 { margin-bottom: 14px; font-size: 30px; }
}

/* =========================================================
   Tablet (< 1000 px)
   ========================================================= */
@media (max-width: 1000px) {
  .home-stage { position: relative; display: block; height: auto; overflow: visible; }
  .home-stage::before { bottom: auto; height: 80vh; }
  .home-hero__bild { height: 80vh; }
  .home-hero { height: 80vh; }
  .song { right: 16px; left: 16px; width: auto; }
  .home-hero__kicker { position: static; margin: 0 0 -1.5vw 1.5vw; font-size: 2.2vw; }
  .home-hero__spiele { font-size: 3.4vw; }
  .home-side--stage { display: block; }
  .home-side__claim { margin-top: 40px; }
  .home-side__claim h1 { font-size: 3.05vw; }
  .home-side__claim .btn { font: 400 16px/1.4 var(--f-text); letter-spacing: 0; }
  .home-side__partner { padding-bottom: 36px; }
  .home-row { grid-template-columns: 1fr; height: auto; }
  .home-row__trailer { aspect-ratio: 16 / 9; }
  .home-side--trailer { grid-template-rows: auto auto; }
  .home-side__trailer { min-height: 300px; }
  .home-side__events { padding-bottom: 30px; }
  /* Song-Player: Titel darf gekürzt werden, der Play-Knopf bleibt immer sichtbar */
  .song__titel { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .song__btn { flex: none; }
  /* Trailer-Kasten kompakt: Titel und Play-Hinweis untereinander statt Leerraum dazwischen */
  .home-side__trailer { min-height: 0; padding: 36px 5vw 32px; }
  .home-side__trailer h2 { font-size: clamp(34px, 5vw, 44px); white-space: nowrap; }
  .play-hinweis { position: static; margin-top: 28px; gap: 12px; }
  .play-hinweis svg { width: 30px; height: 30px; }
  /* Laufende Events: Serie und Saison untereinander – nichts überlappt */
  .home-side__events { padding: 36px 5vw; }
  .home-side__events h2 { margin: 0 0 20px; }
  .event-liste li {
    grid-template-columns: 14px 44px minmax(0, 1fr); grid-template-rows: auto auto;
    column-gap: 12px; height: auto; margin-bottom: 14px;
  }
  .event-liste li > :nth-child(3), .event-liste li > :nth-child(4) { margin-left: 0; }
  .event-liste .status { grid-row: 1 / 3; }
  .event-liste img { grid-row: 1 / 3; width: 44px; height: 44px; }
  .event-liste .event__serie { grid-column: 3; font-size: 17px; line-height: 1.3; }
  .event-liste .event__saison { grid-column: 3; font-size: 15px; line-height: 1.3; color: var(--c-grau-hell); white-space: normal; }
  .home-bottom { grid-template-columns: 1fr; height: auto; }
  .zahlen-oben > h2, .home-darum > h2, .kaffee__inhalt h2 { font-size: 5vw; }
  .home-zahlen { grid-template-rows: auto auto; }
  .zahlen-grid { margin: 40px 0; }
  .kaffee { min-height: 300px; }
  .zahl__wert { font-size: 6vw; }
  .kaffee .btn { font-size: 16px; }
  .home-darum { padding-bottom: 40px; }
  .darum-grid { margin-top: 40px; row-gap: 2vw; }
  .darum-karte { padding-top: 5vw; }
  .darum-karte__icon { width: 9vw; height: 9vw; }
  .darum-karte__box { height: auto; min-height: 15vw; padding: 5.4vw 4px 12px; }
  .darum-karte h3 { font-size: 2vw; }
  .darum-karte p { font-size: max(13px, 1.5vw); }
  .darum-karte__box { padding-left: 12px; padding-right: 12px; }
  .kaffee .btn { width: auto; min-width: 220px; min-height: 48px; padding: 0 28px; white-space: nowrap; }
}

@media (min-width: 751px) and (max-width: 1000px) {
  .home-side--trailer { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
}

/* =========================================================
   Mobil (< 750 px)
   ========================================================= */
@media (max-width: 750px) {
  .home-hero__titel { font-size: 14.93vw; }
  .home-hero__kicker { font-size: 15px; }
  .home-hero__spiele { font-size: 5vw; margin-left: 8vw; }
  .song { padding-left: 16px; gap: 10px; }
  .song__titel { font-size: 14px; }
  .song__btn { width: auto; padding: 0 12px; }
  .home-side__trailer h2 { margin-left: 0; }
  .home-side__gelb { padding: 28px 20px; }
  .social-row a { width: 11.19vw; height: 11.19vw; }
  .home-side__claim h1 { font-size: 4.8vw; text-align: center; }
  .home-side__claim .btn { min-height: 51.5px; }
  .home-side__partner { padding: 28px 20px 36px; }
  .home-side__events h2, .home-side__partner h2 { font-size: 6.4vw; margin-left: 0; }
  .partner-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .zahlen-grid { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
  .zahl__wert { font-size: 10vw; }
  .kaffee { grid-template-columns: 1fr; }
  .kaffee::before { background: rgba(26,26,26,.7); }
  .kaffee__inhalt { grid-column: 1; padding: 30px 20px; }
  .kaffee__inhalt h2 { margin-bottom: 20px; font-size: 7vw; }
  .zahlen-oben > h2, .home-darum > h2 { font-size: 7vw; }
  .darum-grid { grid-template-columns: 1fr; row-gap: 4vw; }
  .darum-karte { padding-top: 7.5vw; }
  .darum-karte__icon { width: 15vw; height: 15vw; }
  .darum-karte__box { padding-top: 9vw; min-height: 0; border-radius: 2.67vw; }
  .darum-karte h3 { font-size: 4.27vw; }
  .darum-karte p { font-size: max(13px, 3.2vw); }
}

/* =========================================================
   UNTERSEITEN-KOPF (wiederverwendbar) – gemessen an „Be a Part“:
   35vh hoch, fixiert, Text 22vh von oben / 5 % von links,
   kleine Zeile 16px Jura, Titel 66px F1 kursiv gelb
   ========================================================= */
.sub-hero {
  position: sticky; top: 0; z-index: 0;
  height: 35vh; overflow: hidden; background: #000;
}
.sub-hero__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sub-hero__text {
  position: absolute; top: 22vh; left: 5%; width: 46.6%;
  animation: glide-in .9s cubic-bezier(.25,.46,.45,.94) both;
}
.sub-hero__kicker { margin: 0 0 0 .88vw; font: 400 16px/1.4 var(--f-text); }
.sub-hero__titel { margin: 0; font: italic 400 66px/1.3 var(--f-head); color: var(--c-gelb); }
@keyframes glide-in { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sub-hero__text { animation: none; } }
@media (max-width: 750px) {
  .sub-hero { height: 30vh; }
  .sub-hero__text { top: auto; bottom: 20px; width: 90%; }
  .sub-hero__titel { font-size: 42px; }
}

/* =========================================================
   BE A PART – Schritte als horizontale Galerie, die beim
   Runterscrollen seitlich durchfährt (Original: 161vh Scrollweg)
   ========================================================= */
.schritte { position: relative; z-index: 1; height: calc(100vh + 161vh); background: var(--c-bg); }
.schritte__buehne { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--c-bg); }
.schritte__wort {
  position: absolute; top: 50%; left: 2.2vw; transform: translateY(-50%); margin: 0;
  writing-mode: vertical-rl;
  font: italic 400 3.91167vw/1.3 var(--f-head); color: #2c2c2c;
}
.schritte__hinweis {
  position: absolute; top: 3.1066vw; left: 11.714vw; margin: 0;
  display: flex; align-items: center; gap: 1.45vw;
  font: italic 400 24px/1.3 var(--f-head);
}
.schritte__hinweis svg { width: 35px; height: 35px; transform: rotate(90deg); fill: var(--c-weiss); }
.schritte__spur {
  position: absolute; top: 50%; left: 11.354vw; width: 161vw;
  display: flex; gap: 3.0284vw;
  transform: translate3d(var(--x, 0), -50%, 0);
  will-change: transform;
}

/* Karte: alle Innenmaße relativ zur Kartenbreite (cqi), wie im Wix-Raster */
.schritt {
  container-type: inline-size; position: relative;
  flex: 0 0 calc(20% - 2.4227vw - 1px);
  aspect-ratio: 762 / 768;
  background: #2c2c2c; border-radius: 1.2618vw;
}
.schritt__bild {
  position: absolute; top: 5.54cqi; left: 5.47cqi; width: 89.07cqi; aspect-ratio: 678 / 340;
  object-fit: cover; border-radius: 2.53cqi;
}
.schritt:nth-child(3) .schritt__bild { object-position: 76% 22%; }
.schritt__titel {
  position: absolute; top: 38.9cqi; left: 8.9cqi; width: 79.57cqi; margin: 0;
  font: italic 400 7.63cqi/1.3 var(--f-head); color: var(--c-gelb);
}
.schritt__text {
  position: absolute; top: 54.9cqi; left: 6.85cqi; width: 86.3cqi;
  font-size: max(13px, 2.32cqi); line-height: 1.4;
}
.schritt__text p { margin: 0 0 1.4em; }
.schritt__text p:last-child { margin: 0; }
.schritt__btn {
  position: absolute; bottom: 5.14cqi; left: 4.87cqi; width: 90.25cqi; height: 9.6cqi;
  display: grid; place-items: center;
  background: var(--c-bg); color: var(--c-weiss); border: 1px solid var(--c-bg); border-radius: 3.18cqi;
  font: 400 2.95cqi/1.4 var(--f-text);
  transition: border-color .4s, background-color .4s, color .4s;
}
.schritt__btn:hover { background: var(--c-gelb); border-color: var(--c-gelb); color: var(--c-bg); }

/* Barrierefreiheit: Unter 560 px Kartenbreite greift die Mindestschrift 13 px. Dann fließen Text und
   Button normal, damit nichts überlappt; die Karte wird bei langem Text höher (aspect-ratio = Mindesthöhe). */
@media (min-width: 1001px) {
  .schritt { display: flex; flex-direction: column; }
  @container (max-width: 560px) {
    .schritt__text {
      position: relative; top: auto; left: auto; margin: 50.5cqi 0 3cqi 6.85cqi;
      min-height: 32.5cqi; line-height: 1.3;
    }
    .schritt__text p { margin-bottom: .8em; }
    .schritt__btn { position: relative; bottom: auto; left: auto; flex: none; margin: auto 0 5.14cqi 4.87cqi; }
  }
}

/* Tablet & Handy: keine fixierte Galerie, Karten untereinander */
@media (max-width: 1000px) {
  .schritte { height: auto; }
  .schritte__buehne { position: relative; height: auto; overflow: visible; padding: 80px 5vw 60px; }
  .schritte__wort { display: none; }
  .schritte__hinweis { position: static; margin-bottom: 30px; }
  .schritte__hinweis svg { display: none; }
  .schritte__spur { position: static; width: auto; flex-direction: column; gap: 24px; transform: none; }
  .schritt { flex: none; width: 100%; max-width: 640px; margin-inline: auto; aspect-ratio: auto; padding-bottom: 6cqi; border-radius: 20px; }
  .schritt__bild, .schritt__titel, .schritt__text, .schritt__btn { position: relative; inset: auto; }
  .schritt__bild { display: block; margin: 5.5cqi auto 0; left: auto; }
  .schritt__titel { margin: -12cqi 0 0 8.9cqi; }
  .schritt__text { margin: 4cqi auto 0; left: auto; font-size: max(2.32cqi, 15px); }
  .schritt__btn { margin: 6cqi auto 0; left: auto; bottom: auto; height: auto; min-height: 9.6cqi; padding: 12px; font-size: max(2.95cqi, 16px); }
}

/* Unterseiten-Kopf Variante „Serie“: Bild 69 % auf Verlauf (unten pink → schwarz), wie LMU Series */
/* Farbe, Verlaufslänge und Bild-Deckkraft je Serie aus dem Original (LMU pink, ACC rot, Endu blau) */
.sub-hero--verlauf { background: linear-gradient(0deg, var(--verlauf-farbe, #ff006e) 0%, #000 var(--verlauf-stopp, 37.43%)); }
.sub-hero--verlauf .sub-hero__bild { opacity: var(--bild-deckkraft, .69); }
.sub-hero--acc  { --verlauf-farbe: #ba0000; --verlauf-stopp: 54.97%; --bild-deckkraft: .75; }
.sub-hero--endu { --verlauf-farbe: #6692e7; --verlauf-stopp: 46.67%; --bild-deckkraft: .6; }

/* =========================================================
   SERIEN-SEITE (LMU / ACC / Endu) – gemessen an „LMU Series“:
   50 / 50, links Text (Innenabstand 3,155vw, vertikal zentriert),
   rechts Bild-Collage (Innenabstand 0,631vw)
   ========================================================= */
/* Seitenkopf (35vh) + Serien-Block (65vh) = genau eine Bildschirmhöhe; wächst nur, wenn der Text mehr Platz braucht */
.serie { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(65vh, auto); background: var(--c-bg); }
.serie__text { display: flex; flex-direction: column; justify-content: center; padding: min(3.155vw, 3vh) 3.155vw; }
.serie__kopf { display: flex; align-items: center; margin-bottom: 3.47vw; }
.serie__titel { width: 31.09vw; margin: 0; font: italic 400 48px/1.3 var(--f-head); color: var(--c-gelb); }
.serie__logo { width: 200px; height: 60px; object-fit: contain; }
.serie__beschreibung { font-size: 16px; line-height: 1.4; margin-bottom: 3.47vw; }
.serie__beschreibung p { margin: 0 0 1.4em; }
.serie--acc .serie__beschreibung { font-size: 18px; } /* ACC-Original nutzt 18 px statt 16 px */
.serie__beschreibung p:last-child { margin: 0; }
.serie__text .btn { min-height: 52.25px; }
.serie__bilder { display: grid; padding: .631vw; }

/* Collage: Raster nach dem Wix-Pro-Gallery-Layout (Spalten 401/402/346/271, Zeilen 328/120/226/563).
   Abstand per --collage-gap einstellbar (Original 10 px, auf Wunsch größer). */
.collage {
  --collage-gap: 12px;
  display: grid; gap: var(--collage-gap);
  grid-template-columns: minmax(0, var(--c1, 401fr)) minmax(0, var(--c2, 402fr)) minmax(0, var(--c3, 346fr)) minmax(0, var(--c4, 271fr));
  grid-template-rows: minmax(0, var(--r1, 328fr)) minmax(0, var(--r2, 120fr)) minmax(0, var(--r3, 226fr)) minmax(0, var(--r4, 563fr));
  width: 100%; height: 100%; min-height: 0;
  contain: size; /* Bildgrößen dürfen die Blockhöhe nicht aufblähen */
}
/* ACC: gleiche Anordnung, andere Proportionen (Spalten 424/252/413/331, Zeilen 186/189/239/700) */
.collage--acc { --c1: 424fr; --c2: 252fr; --c3: 413fr; --c4: 331fr; --r1: 186fr; --r2: 189fr; --r3: 239fr; --r4: 700fr; }
.collage li:nth-child(1) { grid-area: 1 / 1 / 3 / 3; }
.collage li:nth-child(2) { grid-area: 3 / 1 / 4 / 2; }
.collage li:nth-child(3) { grid-area: 3 / 2 / 4 / 3; }
.collage li:nth-child(4) { grid-area: 1 / 3 / 2 / 4; }
.collage li:nth-child(5) { grid-area: 1 / 4 / 2 / 5; }
.collage li:nth-child(6) { grid-area: 2 / 3 / 4 / 5; }
.collage li:nth-child(7) { grid-area: 4 / 1 / 5 / 5; }
.collage li { position: relative; min-height: 0; overflow: hidden; border-radius: 9px; cursor: zoom-in; }
.collage img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.collage li::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0); transition: background-color .4s ease; pointer-events: none; }
.collage li:hover img { transform: scale(1.04); }
.collage li:hover::after { background: rgba(0,0,0,.25); }

/* Vollbild-Ansicht für Galerie-Bilder */
.lightbox { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background: rgba(10,10,10,.94); }
.lightbox[hidden] { display: none; }
.lightbox__bild { max-width: 90vw; max-height: 86vh; object-fit: contain; border-radius: 6px; }
.lightbox button { position: absolute; display: grid; place-items: center; width: 52px; height: 52px; color: var(--c-weiss); font-size: 34px; line-height: 1; transition: color var(--ease); }
.lightbox button:hover { color: var(--c-gelb); }
.lightbox__zu { top: 20px; right: 24px; }
.lightbox__zurueck { left: 2vw; top: 50%; transform: translateY(-50%); }
.lightbox__weiter { right: 2vw; top: 50%; transform: translateY(-50%); }

@media (max-width: 1000px) {
  .serie { grid-template-columns: 1fr; grid-template-rows: auto; }
  .collage { height: auto; aspect-ratio: 1240 / 1266; contain: none; --collage-gap: 10px; }
  .serie__text { padding: 48px 5vw; }
  .serie__kopf { flex-wrap: wrap; gap: 16px; margin-bottom: 32px; }
  .serie__titel { width: auto; }
  .serie__beschreibung { margin-bottom: 32px; }
  .serie__bilder { padding: 0 5vw 48px; }
}
@media (max-width: 750px) {
  .serie__titel { font-size: 34px; }
}

/* =========================================================
   REGLEMENT – gemessen an „LMU Reglement“:
   Raster Zeilen 125px / 17,35vw / min. 28,39vw, Spalten 36,5 % / 63,5 %.
   Oben Bild über volle Breite, links unten Strecken-Skizze,
   rechts Akkordeon-Kasten (97,77 % der Spalte, Radius oben 10 px)
   ========================================================= */
.reglement {
  position: relative;
  display: grid;
  grid-template-columns: 36.5% 63.5%;
  grid-template-rows: var(--header-h) 17.35vw minmax(28.39vw, auto);
  background: var(--c-bg);
}
/* Kopfbild wie Original: 55 % Deckkraft auf Verlauf (LMU pink, ACC rot) → dunkel mit Farbschimmer unten */
.reglement__kopf {
  grid-area: 1 / 1 / 3 / 3; position: relative; overflow: hidden;
  background: linear-gradient(0deg, var(--verlauf-farbe, #ff006e) 0%, #000 43.27%);
}
.reglement__kopf img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.reglement--acc { --verlauf-farbe: #ba0000; }
.reglement__titel {
  grid-area: 2 / 1 / 3 / 2; align-self: end; position: relative; z-index: 1;
  margin: 0 0 3.155vw 5.047vw;
  animation: glide-in .9s cubic-bezier(.25,.46,.45,.94) both;
}
.reglement__skizze { grid-area: 3 / 1 / 4 / 2; width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; object-fit: cover; contain: size;
  mix-blend-mode: color-burn; /* wie Original: Bild „nachbelichtet“ auf #1A1A1A → fast dunkel */
}
.reglement__box {
  grid-area: 2 / 2 / 4 / 3; align-self: start; position: relative; z-index: 2;
  width: 97.77%; min-height: 840px; margin-top: 9.82vw; /* oben fest verankert, damit beim Auf-/Zuklappen nichts springt */
  padding: 20px 20px 75px;
  background: var(--c-bg); border-radius: 10px 10px 0 0;
}
.reglement__stand { position: absolute; left: 20px; bottom: max(8px, calc(75px - 2.52vw)); margin: 0; font-size: 16px; line-height: 1.4; }

/* Akkordeon (natives <details>, funktioniert auch ohne JavaScript) */
.akkordeon { display: flex; flex-direction: column; gap: 10px; }
.akkordeon details { background: #2c2c2c; }
.akkordeon summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px 40px; cursor: pointer; list-style: none;
  background: #2c2c2c; border-bottom: 1px solid var(--c-gelb);
  font: italic 400 18px/1.4 var(--f-head); color: var(--c-weiss);
  transition: background-color .3s ease, color .3s ease;
}
.akkordeon summary::-webkit-details-marker { display: none; }
.akkordeon summary > span { min-width: 0; hyphens: auto; overflow-wrap: break-word; } /* lange Wörter auf dem Handy */
.akkordeon summary svg { flex: 0 0 auto; width: 12px; height: 12px; fill: currentColor; transition: transform .3s ease; }
.akkordeon summary:hover { background: var(--c-gelb); color: var(--c-bg); }
.akkordeon details[open] summary svg { transform: rotate(180deg); }
.akkordeon__panel { overflow: hidden; }
.akkordeon__inhalt { padding: 24px 40px 32px; font-size: 16px; line-height: 1.4; }
.akkordeon__inhalt p { margin: 0; }
.akkordeon__inhalt p.leer, .akkordeon__inhalt p:empty { height: 1.4em; } /* :empty = Leerzeile aus dem CMS (ohne Klasse) */
.akkordeon__inhalt ul, .akkordeon__inhalt ol { margin: 0; padding-left: 1.4em; list-style: disc; }
.akkordeon__inhalt ol { list-style: decimal; }
.akkordeon__inhalt a { text-decoration: underline; }
/* Link allein zwischen Absätzen (direktes Kind des CMS-Texts) = Knopf wie bei Wix („Zum Strafenkatalog“,
   gemessen 10.10.: 200-430 × 60, #1A1A1A, F1 Display 14 px weiß, Hover gelb; Abstand einheitlich 24 px - Vorschlag Dennis).
   Links im Fließtext bleiben Textlinks. Ohne Klasse - das CMS entfernt Klassen im Text. */
.akkordeon__inhalt > a {
  display: flex; align-items: center; justify-content: center;
  width: fit-content; min-width: 200px; max-width: 100%; min-height: 60px; margin: 24px 0; padding: 10px 40px;
  background: var(--c-bg); color: var(--c-weiss); border: 1px solid transparent;
  font: 400 14px/19.6px var(--f-head); text-align: center; text-decoration: none;
  transition: background-color var(--ease), color var(--ease);
}
.akkordeon__inhalt > a:hover, .akkordeon__inhalt > a:focus-visible { background: var(--c-gelb); color: var(--c-bg); }
.akkordeon__inhalt > a:last-child { margin-bottom: 0; }
.akkordeon__inhalt > p:empty:has(+ a), .akkordeon__inhalt > p.leer:has(+ a) { display: none; } /* Leerzeile vor Knopf nicht doppelt */
/* Zwischenüberschriften in CMS-Texten (Editor: „Zwischenüberschrift“ = h2, „Kleine Zwischenüberschrift“ = h3).
   Sonst erben sie die großen Seiten-Überschriften. Maßstab: der Akkordeon-Titel hat 18 px (Vorschlag Dennis 10.10.). */
:is(.akkordeon__inhalt, .livery__text, .tv-detail__text, .bestaetigung__text, .pu-spenden__text) h2 { margin: 40px 0 12px; font: italic 400 24px/1.25 var(--f-head); color: var(--c-weiss); }
:is(.akkordeon__inhalt, .livery__text, .tv-detail__text, .bestaetigung__text, .pu-spenden__text) h3 { margin: 32px 0 10px; font: italic 400 19px/1.3 var(--f-head); color: var(--c-gelb); }
:is(.akkordeon__inhalt, .livery__text, .tv-detail__text, .bestaetigung__text, .pu-spenden__text) h4 { margin: 24px 0 8px; font: 700 13px/1.3 var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: var(--c-grau-hell); }
:is(.akkordeon__inhalt, .livery__text, .tv-detail__text, .bestaetigung__text, .pu-spenden__text) > :is(h2, h3, h4):first-child { margin-top: 0; }
@media (max-width: 700px) {
  :is(.akkordeon__inhalt, .livery__text, .tv-detail__text, .bestaetigung__text, .pu-spenden__text) h2 { margin-top: 32px; font-size: 21px; }
  :is(.akkordeon__inhalt, .livery__text, .tv-detail__text, .bestaetigung__text, .pu-spenden__text) h3 { margin-top: 26px; font-size: 17px; }
}
/* Tabellen im Text (z. B. Punkte im Reglement) - ohne Klasse, weil das CMS Klassen im Text entfernt */
.akkordeon:not(.akkordeon--tabellen) .akkordeon__inhalt table { border-collapse: collapse; margin: 12px 0; min-width: 260px; }
.akkordeon:not(.akkordeon--tabellen) .akkordeon__inhalt :is(th, td) { padding: 6px 18px; border-bottom: 1px solid rgba(255,255,255,.15); text-align: left; }
.akkordeon:not(.akkordeon--tabellen) .akkordeon__inhalt th { color: var(--c-gelb); font-weight: 700; }
.akkordeon:not(.akkordeon--tabellen) .akkordeon__inhalt table:has(th) td:last-child { text-align: right; } /* nur Punktetabelle (mit Kopf); Verwarnpunkte linksbündig */

@media (max-width: 1000px) {
  .reglement { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .reglement__kopf { grid-area: 1 / 1 / 2 / 2; height: 45vh; }
  .reglement__titel { grid-area: 1 / 1 / 2 / 2; margin: 0 0 24px 5vw; }
  .reglement__box { grid-area: 2 / 1 / 3 / 2; width: auto; min-height: 0; margin: 0; padding: 20px 5vw 60px; border-radius: 0; }
  .reglement__skizze { grid-area: 3 / 1 / 4 / 2; height: 50vh; contain: none; }
  .reglement__stand { left: 5vw; bottom: 20px; }
  .akkordeon summary { padding: 18px 20px; }
  .akkordeon__inhalt { padding: 20px; }
}

/* =========================================================
   BLOG / NEWS / FAHRERLAGER – gemessen an /news-howe-simracing und /post/…
   Karten: ~360 px breit (6 Spalten bei 2560 px), 25 px Abstand, Rahmen 1 px weiß 25 %
   ========================================================= */
.blog-liste { position: relative; z-index: 1; padding: 51px 5vw 100px; background: var(--c-bg); }
.karten-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 25px; }
.karten-raster [data-collection-beispiel] { display: flex; }
.beitrag-karte {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid rgba(255,255,255,.25); background: var(--c-bg);
  transition: border-color var(--ease);
}
.beitrag-karte:hover { border-color: var(--c-gelb); }
.beitrag-karte__bild { aspect-ratio: 16 / 9; overflow: hidden; }
.beitrag-karte__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.beitrag-karte:hover .beitrag-karte__bild img { transform: scale(1.04); }
.beitrag-karte__info { display: flex; flex-direction: column; padding: 28px 25px 25px; }
.beitrag-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font-size: 12px; line-height: 1.4; }
.beitrag-meta img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.beitrag-meta__name { display: block; }
.beitrag-meta__punkt::before { content: "·"; margin: 0 6px; }
.beitrag-karte__titel { margin: 0 0 11px; font: italic 400 18px/1.4 var(--f-head); color: var(--c-weiss); }
.beitrag-karte__titel a::after { content: ""; position: absolute; inset: 0; } /* ganze Karte klickbar */
.beitrag-karte:hover .beitrag-karte__titel { color: var(--c-gelb); }
.beitrag-karte__auszug {
  margin: 0; font-size: 15px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-liste__leer { margin: 0; font-size: 18px; color: var(--c-grau-hell); }
/* Der Hinweis steht immer im HTML (das CMS füllt die Karten später ein) - sichtbar nur ohne Karten. */
.karten-raster:has(> .beitrag-karte) > .blog-liste__leer { display: none; }
/* Ohne CMS: Die Vorlagen-Karte einer leeren Kategorie (fremder Beitrag) bleibt unsichtbar. Online
   entfernt das CMS data-collection-kategorie und zeigt nur passende Beiträge. */
[data-collection-kategorie="endu"] > .beitrag-karte:not([data-kategorien~="endu"]) { display: none; }
[data-collection-kategorie="endu"]:not(:has(> .beitrag-karte[data-kategorien~="endu"])) > .blog-liste__leer { display: block; }

/* Beitragsseite */
.beitrag-seite { position: relative; z-index: 1; padding: 20px 5vw 120px; background: var(--c-bg); }
.beitrag {
  max-width: 942px; margin: 0 auto; /* 940 + Rahmen → Textspalte genau 740 px wie im Original */
  border: 1px solid rgba(240,240,240,.2); background: var(--c-bg);
  padding: 60px 100px 62px;
}
.beitrag .beitrag-meta { font-size: 14px; margin-bottom: 30px; }
.beitrag__titel { margin: 0 0 18px; font: italic 400 40px/1.4 var(--f-head); color: var(--c-weiss); }
.beitrag__aktualisiert { margin: 0 0 22px; font-size: 14px; color: var(--c-grau-hell); }
.beitrag__text { font-size: 18px; line-height: 1.5; }
.beitrag__text p { margin: 0; }
/* Leerzeilen: .leer aus der Vorlage, leere Absätze aus dem CMS-Editor */
.beitrag__text p.leer, .beitrag__text p:empty { height: 1.5em; }
.beitrag__text ul, .beitrag__text ol { margin: 0; padding-left: 36px; list-style: disc; }
.beitrag__text ol { list-style: decimal; }
/* Werte gemessen am Wix-Original bei 2560 × 1271 (03.10.): Textspalte 740 px, Abstände nur über Leerzeilen */
.beitrag__text h2, .beitrag__text h3, .beitrag__text h4,
.beitrag__text h5, .beitrag__text h6 { margin: 0; font: italic 400 22px/1.4 var(--f-head); color: var(--c-weiss); }
.beitrag__text h2 { font-size: 28px; color: var(--c-hell); }
.beitrag__text h4 { font-size: 20px; }
.beitrag__text h5 { font-size: 18px; }
.beitrag__text h6 { font-size: 16px; }
/* wie Wix-Ricos: Leerzeichen zählen beim Umbruch mit (sonst brechen Zeilen anders um) */
.beitrag__text p, .beitrag__text li, .beitrag__text h2, .beitrag__text h3, .beitrag__text h4,
.beitrag__text h5, .beitrag__text h6 { white-space: break-spaces; overflow-wrap: break-word; }
.beitrag__text a { color: var(--c-gelb); text-decoration: none; }
.beitrag__text a u { text-decoration-color: var(--c-gelb); }
.beitrag__text figure { margin: 0; }
.beitrag__text figure img { display: block; width: 100%; height: auto; cursor: zoom-in; }
/* Wix „klein“: im CMS ohne Klasse - die Anzeigebreite 350 steht im width-Attribut des Bildes */
.beitrag__text figure.klein, .beitrag__text figure:has(> img[width="350"]) { width: 350px; max-width: 100%; }
.beitrag__text hr { height: 29px; margin: 0; border: 0; background: linear-gradient(var(--c-weiss), var(--c-weiss)) center / 100% 1px no-repeat; }
.beitrag__text table { width: 100%; margin: 16px 0; border-collapse: collapse; table-layout: fixed; }
.beitrag__text td { padding: 0; vertical-align: top; }
.beitrag__text .akkordeon { margin: 0; }
/* Banner oben im Text (Wix-Layout mit Hintergrundbild), randlos über die ganze Kastenbreite.
   Im CMS ohne Klasse/Style: Banner sind die 1880 px breiten Bilder, die Höhe hängt am Bildformat. */
.beitrag__text .beitrag__banner,
.beitrag__text figure:has(> img[width="1880"]) { height: var(--hoehe); margin: 0 -100px; overflow: hidden; }
.beitrag__text figure:has(> img[width="1880"][height="1058"]) { --hoehe: 257px; }
.beitrag__text figure:has(> img[width="1880"][height="1137"]) { --hoehe: 337px; }
.beitrag__text figure:has(> img[width="1880"][height="1253"]) { --hoehe: 417px; }
.beitrag__text .beitrag__banner img,
.beitrag__text figure > img[width="1880"] { height: 100%; object-fit: cover; cursor: default; }
/* Bild-Raster: Spalten nebeneinander, Bilder 16:9 mit runden Ecken, Text darunter zentriert */
.bild-raster { display: grid; grid-template-columns: repeat(var(--spalten, 2), minmax(0, 1fr)); gap: 20px; padding: 18px 0; text-align: center; }
.beitrag__text .bild-raster figure img { aspect-ratio: 16 / 9; object-fit: cover; border-radius: 20px; }
.beitrag__video video, .beitrag__text figure > video { display: block; width: 100%; height: auto; background: #000; }
/* Buttons aus dem Wix-Editor: Farben/Breite kommen je Button als Variablen mit */
.beitrag__knopf-zeile { margin: 0; }
.beitrag__knopf, .beitrag__text a[data-knopf] {
  display: block; box-sizing: border-box; width: var(--k-breite, fit-content); max-width: 100%; padding: 12px;
  background: var(--k-bg, var(--c-gelb)); color: var(--k-farbe, #000624);
  border: var(--k-rand-b, 0) solid var(--k-rand, transparent); border-radius: var(--k-radius, 0);
  font: 400 14px/1.5 var(--f-text); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background-color var(--ease), color var(--ease), border-color var(--ease);
}
.beitrag__text a.beitrag__knopf, .beitrag__text a[data-knopf] { color: var(--k-farbe, #000624); }
.beitrag__text a.beitrag__knopf:hover, .beitrag__text a[data-knopf]:hover {
  background: var(--k-bg-h, var(--k-bg, var(--c-gelb))); color: var(--k-farbe-h, var(--k-farbe, #000624));
  border-color: var(--k-rand-h, var(--k-rand, transparent));
}
/* Wix legt Leerzeilen unter einen Button: Folgen 2+ leere Absätze, nimmt die Knopfzeile keine Höhe ein. */
.beitrag__text p:has(> a[data-knopf]):has(+ p:empty + p:empty) { height: 0; }
/* Knopf-Varianten aus dem CMS (a[data-knopf="…"]) - die Stile der Wix-Buttons */
.beitrag__text a[data-knopf=""] { --k-farbe: #000624; }
.beitrag__text a[data-knopf="breit"] { --k-farbe: #000624; --k-farbe-h: #FFFFFF; --k-bg-h: #595D70; --k-breite: 740px; }
.beitrag__text a[data-knopf="dunkel"] {
  --k-farbe: #FFFFFF; --k-farbe-h: #000624; --k-bg: #414141; --k-bg-h: #FFC525;
  --k-rand: #FFFFFF; --k-rand-h: #FFFFFF; --k-radius: 10px; --k-rand-b: 1px; --k-breite: 232px;
}
/* Tabellen-Varianten aus dem CMS (table[data-variante]) - Maße der beiden Wix-Tabellen */
.beitrag__text table[data-variante="preise"] td:first-child { width: 39.7%; }
.beitrag__text table[data-variante="preise"] tr { height: 47px; }
.beitrag__text table[data-variante="preise"] tr:nth-child(3) { height: 74px; }
.beitrag__text table[data-variante="termine"] td { vertical-align: middle; }
.beitrag__text table[data-variante="termine"] td:nth-child(1) { width: 19.5%; }
.beitrag__text table[data-variante="termine"] td:nth-child(2) { width: 20.1%; }
.beitrag__text table[data-variante="termine"] tr:nth-child(1) { height: 47px; }
.beitrag__text table[data-variante="termine"] tr:nth-child(2) { height: 40px; }
/* Hervorhebungen aus dem CMS: <mark> statt span.gelb / span.rot */
.beitrag__text mark { background: none; color: var(--c-gelb); }
.beitrag__text mark[data-farbe="rot"] { color: #e62214; }
.beitrag__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 40px 0 20px; font-size: 14px; }
.beitrag__tags span { margin-right: 4px; }
.beitrag__tags a { padding: 6px 12px; border: 1px solid rgba(255,255,255,.2); transition: border-color var(--ease), color var(--ease); }
.beitrag__tags a:hover { border-color: var(--c-gelb); }
.beitrag__kategorien { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 28px; font-size: 14px; }
.beitrag__kategorien a { text-decoration: underline; }
.beitrag__teilen { display: flex; gap: 22px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.2); }
.beitrag__teilen a, .beitrag__teilen button { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; color: var(--c-weiss); transition: color var(--ease); }
.beitrag__teilen a:hover, .beitrag__teilen button:hover { color: var(--c-gelb); }
.beitrag__teilen svg { width: 20px; height: 20px; fill: currentColor; }
.beitrag__teilen .kopiert { color: var(--c-gelb); }
/* Tooltip nach „Link kopieren“ – gemessen am Wix-Original (03.10.), sichtbar ca. 2 s */
.beitrag__teilen button { position: relative; }
.beitrag__teilen button::after {
  content: "Link wurde kopiert."; position: absolute; left: 50%; bottom: calc(100% + 5px); transform: translateX(-50%);
  padding: 5px 12px 4px; border-radius: 3px; background: #212121; color: var(--c-weiss);
  box-shadow: 0 4px 8px rgba(0,0,0,.12), 0 0 4px rgba(0,0,0,.1);
  font: 400 14px/20px var(--f-footer); white-space: nowrap; pointer-events: none;
  opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s;
}
.beitrag__teilen button.kopiert::after { opacity: 1; visibility: visible; }

.aehnliche { max-width: 940px; margin: 30px auto 0; }
/* Ohne ähnliche Beiträge (füllt das CMS) fällt der ganze Bereich weg. */
.aehnliche:not(:has(.beitrag-karte)) { display: none; }
.aehnliche__kopf { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 20px; }
.aehnliche__kopf h2 { margin: 0; font: 400 18px/1.5 var(--f-text); }
.aehnliche__kopf a { font-size: 14px; }
.aehnliche .karten-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 33px; }
.aehnliche .beitrag-karte__auszug, .aehnliche .beitrag-meta { display: none; }

@media (max-width: 1000px) {
  .beitrag { padding: 40px 6vw 48px; }
  .beitrag__titel { font-size: 32px; }
  .aehnliche .karten-raster { grid-template-columns: 1fr; }
}
@media (max-width: 750px) {
  .karten-raster { grid-template-columns: 1fr; }
  .beitrag__titel { font-size: 26px; }
  .beitrag__text { font-size: 16px; }
}
@media print {
  .site-header, .site-footer, .sub-hero, .aehnliche, .beitrag__teilen { display: none !important; }
  .beitrag { border: 0; padding: 0; }
  body { background: #fff; color: #000; }
}

/* Seitenköpfe Blog/News/Fahrerlager (gemessen): News 60 % auf Schwarz, Fahrerlager 60 % (Endu 55 %) auf Serien-Verlauf */
.sub-hero--news .sub-hero__bild { opacity: .6; }
.sub-hero--fl-lmu  { --verlauf-farbe: #ff006e; --verlauf-stopp: 45.61%; --bild-deckkraft: .6; }
.sub-hero--fl-acc  { --verlauf-farbe: #ba0000; --verlauf-stopp: 54.39%; --bild-deckkraft: .6; }
.sub-hero--fl-endu { --verlauf-farbe: #6692e7; --verlauf-stopp: 48.07%; --bild-deckkraft: .55; }

/* Titelbild im Beitrag: randlos über die volle Spaltenbreite (wie Original) */
@media (max-width: 1000px) {
  .beitrag__text .beitrag__banner,
  .beitrag__text figure:has(> img[width="1880"]) { margin: 0 -6vw; }
}
/* Handy: Banner ganz zeigen (Bildformat statt fester Höhe) - nie breiter als der Beitragskasten */
@media (max-width: 750px) {
  .beitrag__text .beitrag__banner,
  .beitrag__text figure:has(> img[width="1880"]) { height: auto; }
  .beitrag__text .beitrag__banner img,
  .beitrag__text figure > img[width="1880"] { height: auto; }
}
@media (max-width: 600px) { .bild-raster { grid-template-columns: 1fr; } }
.beitrag__text .gelb { color: var(--c-gelb); }
.beitrag__text .rot { color: #e62214; }

/* =========================================================
   WALL OF CHAMPIONS (gemessen 04.10. an der ACC-Seite, 2560 × 1271 und 1440 × 900)
   Alle Abstände wachsen mit der Seitenbreite (cqw = 1 % der Breite), Schriften sind fest.
   Eine flache Liste: jeder Eintrag = eine Klasse; Season/Serie nur beim ersten Eintrag einer Gruppe.
   ========================================================= */
.sub-hero--wall-lmu, .sub-hero--wall-acc, .sub-hero--wall-endu { --bild-deckkraft: .55; }
.sub-hero--wall-lmu  { --verlauf-farbe: #ff006e; --verlauf-stopp: 37.43%; }
.sub-hero--wall-acc  { --verlauf-farbe: #ba0000; --verlauf-stopp: 53.22%; }
.sub-hero--wall-endu { --verlauf-farbe: #6692e7; --verlauf-stopp: 47.37%; --bild-deckkraft: .5; }
[class*="sub-hero--wall-"] .sub-hero__bild { object-position: 70% 8%; } /* KI-Bild: Pokal im Ausschnitt */

.wall { position: relative; z-index: 1; background: var(--c-bg); container-type: inline-size; }
.wall__liste {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 25px;
  padding: 0 5% 5cqw;
}
.wall__eintrag { display: contents; }
/* Season-Kopf: ganze Zeile, 5 % Abstand nach oben; leer = ausgeblendet */
.wall__saison { grid-column: 1 / -1; padding-top: 5cqw; }
.wall__saison:has(.wall__saison-nr:empty) { display: none; }
.wall__saison-nr { margin: 0; font: 400 18px/1.6 var(--f-text); }
.wall__saison-titel { margin: 2px 0 0; font: italic 400 36px/1.3 var(--f-head); color: var(--c-gelb); }
/* Klasse: Serie (leer = Platzhalter, damit alles auf einer Linie bleibt), Name, farbige Linie, Podium */
.wall__klasse { min-height: 320px; padding-top: 3cqw; }
.wall__serie {
  min-height: 31.2px; margin: 0; white-space: nowrap;
  font: italic 400 24px/1.3 var(--f-head); color: var(--c-gelb);
}
.wall__klassenname {
  margin: 25px 0 0; padding-bottom: 5.8px; border-bottom: 2.667px solid var(--linie, var(--c-weiss));
  font: italic 400 24px/1.3 var(--f-head); color: var(--c-weiss);
}
.wall__podium {
  display: grid; grid-template-columns: repeat(3, 30.6%); column-gap: 3.4%;
  margin: .96cqw 0 0; padding: 0; list-style: none;
}
.wall__platz { display: flex; flex-direction: column; align-items: center; }
.wall__platz img { display: block; align-self: flex-start; width: 77.5%; height: auto; aspect-ratio: 1; }
/* Pokale sitzen im Original nicht exakt mittig: links etwas nach links, rechts etwas nach rechts */
.wall__platz:nth-child(1) img { margin-left: 9.56%; }
.wall__platz:nth-child(2) img { margin-left: 11.25%; }
.wall__platz:nth-child(3) img { margin-left: 12.57%; }
.wall__name { width: 100%; margin: .91cqw 0 0; font: italic 400 16px/1.4 var(--f-head); text-align: center; overflow-wrap: break-word; }
.wall__name span, .wall__name strong { display: block; }
.wall__name strong { font-weight: 700; }
.wall--teams .wall__name strong { font-weight: 400; }  /* Endu: Teamnamen, nicht fett */
@media (max-width: 1000px) {
  .wall__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 10px; }
  .wall__serie { white-space: normal; }
  .wall__klasse { min-height: 0; }
  .wall__podium { margin-top: 12px; }
  .wall__name { margin-top: 10px; }
}
@media (max-width: 600px) {
  .wall__liste { grid-template-columns: minmax(0, 1fr); }
  .wall__saison { padding-top: 40px; }
  .wall__serie:empty { display: none; }
}

/* =========================================================
   LMU WARTELISTE (gemessen 04.10. bei 2560 × 1271 und 1440 × 900)
   Formular 35,84 % / Tabelle 51 % der Breite, Abstände wachsen mit (cqw), Felder/Zeilen fest.
   ========================================================= */
.warteliste { margin-top: var(--header-h); container-type: inline-size; }
.warteliste__raster {
  display: grid; grid-template-columns: 35.84cqw 51cqw; column-gap: 3.16cqw; align-items: start;
  padding: 5cqw 5cqw;
}
.warteliste__titel { margin: 0; font: italic 400 1.51cqw/1.3 var(--f-head); color: var(--c-weiss); }
.warteliste__text { margin: 1.517cqw 0 0; font: 400 18px/normal var(--f-text); }
.warteliste__formular {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2%; row-gap: 1.26cqw;
  margin-top: 1.515cqw;
}
.warteliste__feld { display: flex; flex-direction: column; gap: 8px; }
.warteliste__feld--breit { grid-column: 1 / -1; }
.warteliste__label { font: 400 16px/16px var(--f-text); color: var(--c-hell); }
.warteliste__label::after { content: " *"; }
.warteliste__feld input {
  height: 46px; box-sizing: border-box; padding: 3px 3px 3px 12px; border: 0; border-bottom: .667px solid var(--c-hell);
  border-radius: 0; background: #2c2c2c; color: var(--c-hell); font: 400 15px/21px var(--f-text); outline: none;
}
.warteliste__feld input:hover { background: #464646; }
.warteliste__knopf {
  grid-column: 1 / -1; height: 55.2px; margin-top: calc(1.89cqw - 1.26cqw);
  border: .667px solid #000; background: var(--c-gelb); color: var(--c-bg); font: 400 14px/1.2 var(--f-footer); cursor: pointer;
}
.warteliste__knopf:hover { background: var(--c-bg); border-color: var(--c-gelb); color: var(--c-gelb); }
.warteliste__hinweis { grid-column: 1 / -1; margin: 0; font: 400 14px/1.4 var(--f-text); color: var(--c-grau-hell); }
.warteliste__hinweis a { text-decoration: underline; }
/* Pflicht-Einwilligung (öffentliche Anzeige) – Häkchen im HOWE-Gelb, Text wie der frühere Hinweis */
.warteliste__einwilligung { grid-column: 1 / -1; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; font: 400 14px/1.4 var(--f-text); color: var(--c-grau-hell); cursor: pointer; }
.warteliste__einwilligung input { width: 20px; height: 20px; margin: 0; accent-color: var(--c-gelb); cursor: pointer; }
.warteliste__einwilligung a { text-decoration: underline; }
.warteliste__tabelle-huelle { margin-top: 1.517cqw; overflow-x: auto; }
/* Live-Liste (FOKALiS CMS): Rückmeldung nach dem Eintragen, Lade-/Leer-Zeile */
.warteliste .fk-liste-meldung { grid-column: 1 / -1; margin: 0; font: 400 16px/1.4 var(--f-text); color: var(--c-gelb); }
.warteliste .fk-liste-meldung--fehler { color: var(--c-rot); }
.tabelle td.fk-liste-leer { color: var(--c-grau-hell); }

/* Datentabelle (Wix-Tabellen-Look): Kopf 60 px, Zeilen 50 px, jede 2. Zeile heller, Hover #464646 */
.tabelle { width: 100%; border-collapse: collapse; table-layout: fixed; background: var(--c-bg); font-family: "Nunito Sans", var(--f-text); color: var(--c-hell); }
.tabelle th, .tabelle td { padding: 2px 2px 2px 20px; text-align: left; vertical-align: middle; font-size: 16px; line-height: 22.4px; overflow-wrap: break-word; }
.tabelle th { height: 60px; font-weight: 700; }
.tabelle td { height: 50px; font-weight: 400; }
/* nth-of-type: Eine <template>-Zeile (Live-Liste) zählt nicht mit - die Streifen bleiben wie bei Wix. */
.tabelle tbody tr:nth-of-type(odd) { background: #1f1f1f; }
.tabelle tbody tr:hover { background: #464646; }

@media (max-width: 1000px) {
  .warteliste__raster { grid-template-columns: minmax(0, 1fr); row-gap: 48px; padding: 40px 5vw 60px; }
  .warteliste__titel { font-size: 28px; }
  .warteliste__text, .warteliste__formular, .warteliste__tabelle-huelle { margin-top: 20px; }
  .warteliste__formular { row-gap: 16px; }
  .warteliste__knopf { margin-top: 8px; }
  .tabelle { min-width: 720px; }
}
@media (max-width: 600px) { .warteliste__formular { grid-template-columns: minmax(0, 1fr); } }

/* =========================================================
   LMU QUALIFIER STANDINGS (gemessen 04.10. bei 2560 × 1271 und 1440 × 900)
   Kopf ohne Verlauf (Bild 60 % auf Schwarz), 35vh hoch, höchstens 413 px.
   Tabellenspalte so breit wie eine Serien-Gruppe: (90 % − 24 px) / 2. Abstände 3 % der Breite.
   ========================================================= */
.sub-hero--qualifier { height: min(35vh, 413px); }
.sub-hero--qualifier .sub-hero__bild { opacity: .6; }
.qualifier { position: relative; z-index: 1; background: var(--c-bg); container-type: inline-size; }
/* Split 1 links, Split 2 (live aus dem CMS) rechts daneben - je so breit wie eine Serien-Gruppe */
.qualifier__splits { display: flex; gap: 24px; margin-left: 5cqw; }
.qualifier__inhalt { width: calc((90cqw - 24px) / 2); padding: 3cqw 0; }
.qualifier__inhalt[hidden] { display: none; }
.qualifier__titel { margin: 0; font: italic 400 36px/1.3 var(--f-head); color: var(--c-gelb); }
.qualifier__huelle { margin-top: 1.607cqw; overflow-x: auto; }
/* Variante der Datentabelle: 14 px Jura, Text 15 px vom Rand, Trennlinie #464646, 1. Zeile dunkel */
.tabelle--qualifier { font-family: var(--f-text); color: var(--c-weiss); }
.tabelle--qualifier th, .tabelle--qualifier td { padding: 0 2px 0 15px; font-size: 14px; line-height: 19.6px; overflow-wrap: normal; } /* wie Wix: „20“ nicht trennen */
.tabelle--qualifier td { height: 50.667px; border-bottom: .667px solid #464646; }
/* nth-of-type: Das <template> der Live-Zeilen zählt bei nth-child mit */
.tabelle--qualifier tbody tr:nth-of-type(odd) { background: var(--c-bg); }
.tabelle--qualifier tbody tr:nth-of-type(even) { background: #1f1f1f; }
.tabelle--qualifier tbody tr:hover { background: rgba(110, 110, 110, .75); }
@media (max-width: 1000px) {
  .qualifier__splits { display: block; margin-left: 0; }
  .qualifier__inhalt { width: auto; margin: 0; padding: 40px 5vw 60px; }
  .qualifier__inhalt + .qualifier__inhalt { padding-top: 0; }
  .qualifier__huelle { margin-top: 20px; }
  .tabelle--qualifier { min-width: 640px; }
}
/* Klassentrennung zwischen den Qualifier-Tabellen: 2 px grün, je 1,51 % der Breite Abstand */
.qualifier__trenner { height: 2px; margin: 1.51cqw 0; background: #22b441; }
.qualifier__trenner[hidden] { display: none; }
@media (max-width: 1000px) { .qualifier__trenner { min-width: 640px; margin: 20px 0; } }

/* =========================================================
   LIVERY VERWENDEN (LMU + ACC, gemessen 04.10. bei 2560 × 1271 und 1440 × 900)
   Textspalte 60 % mittig; Rand oben/unten LMU 5 %, ACC 2 %; Blockabstände je Seite in % der Breite.
   ========================================================= */
.sub-hero--livery-lmu { --verlauf-farbe: #ff006e; --verlauf-stopp: 30.41%; --bild-deckkraft: .51; }
.sub-hero--livery-acc { --verlauf-farbe: #ba0000; --verlauf-stopp: 39.77%; --bild-deckkraft: .55; }
.sub-hero--livery-acc .sub-hero__bild { object-position: 74% 0; }
.livery { position: relative; z-index: 1; background: var(--c-bg); container-type: inline-size; }
.livery__inhalt { display: flex; flex-direction: column; align-items: flex-start; padding: calc(var(--rand) * 1cqw) 20cqw; }
.livery__block { width: 100%; margin: 0 0 calc(var(--abstand, 0) * 1cqw); }
.livery__text { font: 400 16px/1.6 var(--f-text); }
.livery__text--lh14 { line-height: 1.4; }
.livery__text p { margin: 0; }
.livery__text p.leer, .livery__text p:empty { height: 1lh; } /* :empty = Leerzeile aus dem CMS (ohne Klasse) */
.livery__text a { color: var(--c-gelb); }
.livery__text ul { margin: 0; padding: 0 0 0 20.8px; list-style: disc; }
.livery__titel { font: italic 400 24px/1.3 var(--f-head); color: var(--c-gelb); }
.livery__titel--gross { font-size: 28px; line-height: 1.4; color: var(--c-weiss); }
.livery__block:has(> .livery__knopf) { width: auto; }
.livery__knopf {
  display: inline-flex; align-items: center; justify-content: center; width: 257.5px; height: 52.2px; box-sizing: border-box;
  border: .667px solid var(--c-weiss); font: 400 18px/25.2px var(--f-text); color: var(--c-weiss);
  transition: border-color .4s, background-color .4s, color .4s;
}
.livery__knopf:hover { background: var(--c-gelb); border-color: var(--c-gelb); color: var(--c-bg); }

/* ACC: Formular „Übermittle hier Deine Livery“ (Wix-Formular-Optik, Felder fest in px) */
.livery-form { position: relative; z-index: 1; background: var(--c-bg); container-type: inline-size;
  min-height: calc(175px + 22.55vw); padding-top: 2%; box-sizing: border-box; }
.livery-form__titel { margin: 0 21cqw; font: italic 400 28px/1.3 var(--f-head); color: var(--c-gelb); }
.livery-form__formular { width: calc(60cqw - 49.7px); margin: calc(24.8px + 1.9cqw) auto 0; }
.livery-form__schritt { margin: 0; padding: 0; border: 0; min-width: 0; }
.livery-form__legende { padding: 0 0 6px; font: 400 24px/36px var(--f-head); color: var(--c-weiss); }
.livery-form__raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; margin-top: 15px; }
.livery-form__feld {
  display: flex; height: 40.7px; box-sizing: border-box; padding-right: 12px; border-radius: 5px;
  background: rgba(255,255,255,.05); border-bottom: .667px solid rgba(255,255,255,.6);
}
.livery-form__feld:hover, .livery-form__feld:focus-within { border-bottom-color: var(--c-weiss); }
.livery-form__feld--breit { grid-column: 1 / -1; }
.livery-form__feld input { flex: 1; min-width: 0; padding: 8px 2px 8px 12px; /* Wix: text-indent 12px */ border: 0; background: transparent;
  font: 400 16px/24px var(--f-text); color: var(--c-weiss); outline: none; }
.livery-form__feld input::placeholder { color: var(--c-grau-hell); opacity: 1; }
.livery-form__feld--datei { height: auto; flex-direction: column; gap: 10px; }
.livery-form__datei-text { font: 400 16px/24px var(--f-text); color: var(--c-grau-hell); }
.livery-form__feld--datei { padding: 12px; }
.livery-form__feld--datei input { padding: 0; font: 400 16px/24px var(--f-text); color: var(--c-grau-hell); cursor: pointer; }
/* Datei-Knopf wie die übrigen Formular-Knöpfe statt Browser-Standard */
.livery-form__feld--datei input::file-selector-button {
  height: 40px; margin-right: 12px; padding: 0 16px; border: .667px solid var(--c-weiss); border-radius: 10px;
  background: transparent; font: 400 16px/20.8px var(--f-text); color: var(--c-weiss); cursor: pointer;
  transition: background-color .2s ease-in-out, color .2s ease-in-out, border-color .2s ease-in-out;
}
.livery-form__feld--datei input:hover::file-selector-button { background: var(--c-gelb); border-color: var(--c-gelb); color: var(--c-bg); }
.livery-form__aktionen { display: flex; justify-content: flex-end; gap: 15px; margin-top: 15px; }
.livery-form__knopf {
  min-width: 100px; height: 47.3px; padding: 0 20px; box-sizing: border-box; border: .667px solid var(--c-weiss); border-radius: 10px;
  background: transparent; font: 400 16px/20.8px var(--f-text); color: var(--c-weiss); cursor: pointer;
}
.livery-form__hinweis { margin: 15px 0 0; font: 400 14px/1.4 var(--f-text); color: var(--c-gelb); }
/* Einstieg in den Mitgliederbereich statt Formular (08.10.2026) */
.livery-form__text { margin: 0; font: 400 16px/1.5 var(--f-text); color: var(--c-grau-hell); }
/* Knopf wie „Download Logo-Package“ (.livery__knopf), linksbündig 24 px unter dem Text; ohne die Höhe des alten
   Wix-Formulars - nach unten wie die LMU-Seite ~71 px bis zum Fuß (Matthias 12.10.) */
.livery-form:has(.livery-form__einstieg) { min-height: 0; padding-bottom: 71px; }
.livery-form__einstieg .livery-form__aktionen { justify-content: flex-start; margin-top: 24px; }
@media (max-width: 1000px) {
  .livery__inhalt { padding: 40px 6vw; }
  .livery__block { margin-bottom: 24px; }
  .livery-form { min-height: 0; padding: 0 6vw 60px; }
  .livery-form__titel { margin: 0; }
  .livery-form__formular { width: auto; margin-top: 24px; }
}
@media (max-width: 600px) { .livery-form__raster { grid-template-columns: minmax(0, 1fr); } }

/* Bestätigungsseite (z. B. „Livery versendet“): Vollbild, Bild 50 % auf Schwarz, Inhalt senkrecht mittig */
.bestaetigung { position: relative; display: grid; place-items: center; min-height: 100vh; overflow: hidden; background: #000; container-type: inline-size; }
.bestaetigung__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.bestaetigung__inhalt { position: relative; width: 90cqw; text-align: center; }
.bestaetigung__titel { margin: 0; font: italic 400 4.16cqw/1.3 var(--f-head); color: var(--c-gelb); }
.bestaetigung__text { width: 634.9px; max-width: 100%; margin: 1.575cqw auto 0; font: 400 20px/normal var(--f-text); }
.bestaetigung__text p { margin: 0; }
.bestaetigung__text p.leer, .bestaetigung__text p:empty { height: 24px; } /* :empty = Leerzeile aus dem CMS (ohne Klasse) */
@media (max-width: 750px) { .bestaetigung__titel { font-size: 40px; } .bestaetigung__text { margin-top: 20px; font-size: 18px; } }

/* =========================================================
   TEILNAHMEVORAUSSETZUNGEN (gemessen 04.10. bei 2560 × 1271 und 1440 × 900)
   ========================================================= */
/* Übersicht: Vollbild, Hintergrund 64 % auf Schwarz, rechts zwei Kacheln (je halbe Höhe unter der Kopfzeile) */
.tv-uebersicht { position: relative; height: 100vh; min-height: 560px; overflow: hidden; background: #000; container-type: inline-size; }
.tv-uebersicht__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .64; }
.tv-uebersicht__text {
  position: absolute; left: 5cqw; bottom: 10.7cqw; width: 42.04cqw;
  animation: tv-gleiten 1.2s cubic-bezier(.645,.045,.355,1) both;
}
.tv-uebersicht__kicker { margin: 0 0 0 .88cqw; font: 400 16px/1.4 var(--f-text); }
.tv-uebersicht__titel { margin: 0; font: italic 400 40px/1.3 var(--f-head); color: var(--c-gelb); overflow-wrap: break-word; }
.tv-kacheln { position: absolute; top: var(--header-h); right: 0; bottom: 0; width: 50%; display: grid; grid-template-rows: 1fr 1fr; }
.tv-kachel { position: relative; display: block; overflow: hidden; color: var(--c-weiss); }
.tv-kachel:hover { color: var(--c-weiss); }
/* Ruhezustand: Glas (20 px Unschärfe + Tönung) über dem Seitenhintergrund; Hover: Bild ein (0,3 s), Schrift aus (0,4 s) */
.tv-kachel::before { content: ""; position: absolute; inset: 0; background: var(--toenung); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.tv-kachel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s ease-in-out; }
.tv-kachel:hover img, .tv-kachel:focus-visible img { opacity: 1; }
/* fill: backwards wie Wix – nach der Animation bleibt kein clip-path stehen, sonst „sieht“ das Glas nichts */
.tv-kachel--lmu { --toenung: rgba(255, 0, 110, .3); --breite: 84.07%; animation: tv-von-rechts 1.2s cubic-bezier(.645,.045,.355,1) .5s backwards, tv-einblenden 1.2s cubic-bezier(.645,.045,.355,1) .5s backwards; }
.tv-kachel--acc { --toenung: rgba(186, 0, 0, .3); --breite: 87.6%; animation: tv-von-unten 1.2s cubic-bezier(.645,.045,.355,1) 1s backwards, tv-einblenden 1.2s cubic-bezier(.645,.045,.355,1) 1s backwards; }
.tv-kachel--acc img { object-position: 39% 50%; }
.tv-kachel__titel {
  position: absolute; z-index: 1; left: 6.25%; bottom: 3.155cqw; width: var(--breite); margin: 0;
  font: italic 400 2.902cqw/1.3 var(--f-head); transition: opacity .4s ease-in-out;
}
.tv-kachel:hover .tv-kachel__titel, .tv-kachel:focus-visible .tv-kachel__titel { opacity: 0; }
/* Wix-Bewegungen: Titel gleitet von links herein, Kacheln werden gleitend aufgedeckt (rechts bzw. unten) */
@keyframes tv-gleiten { from { transform: translateX(calc(-100% - 5cqw)); } to { transform: none; } }
@keyframes tv-von-rechts {
  from { transform: translateX(100%); clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
  to { transform: none; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}
@keyframes tv-von-unten {
  from { transform: translateY(100%); clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); }
  to { transform: none; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}
@keyframes tv-einblenden { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tv-uebersicht__text, .tv-kachel { animation: none; } }
@media (max-width: 1000px) {
  .tv-uebersicht { height: auto; min-height: 0; padding-top: var(--header-h); }
  .tv-uebersicht__text { position: relative; left: auto; bottom: auto; width: auto; padding: 40px 5vw; }
  .tv-uebersicht__titel { font-size: 32px; }
  .tv-kacheln { position: relative; top: auto; width: 100%; grid-template-rows: 50vw 50vw; }
  .tv-kachel__titel { font-size: 28px; bottom: 20px; }
}

/* Detailseiten LMU/ACC: Kopf ohne Verlauf (Bild 40 %), Text über volle Breite, Abstände in % der Breite */
.sub-hero--tv .sub-hero__bild { opacity: .4; }
.tv-detail { position: relative; z-index: 1; background: var(--c-bg); container-type: inline-size; }
.tv-detail__inhalt { display: flex; flex-direction: column; align-items: flex-start; padding: 2cqw 5cqw; }
.tv-detail__block { width: 100%; margin: 0 0 calc(var(--abstand, 0) * 1cqw); }
.tv-detail__text { font: 400 16px/1.6 var(--f-text); }
.tv-detail__text p { margin: 0; }
.tv-detail__text p.leer, .tv-detail__text p:empty { height: 1lh; } /* :empty = Leerzeile aus dem CMS (ohne Klasse) */
.tv-detail__text a { color: var(--c-gelb); }
.tv-detail__text ul { margin: 0 0 0 8px; padding: 0; list-style: disc; }
.tv-detail__text li { margin-left: 20.8px; }
.tv-detail__titel { font: italic 400 36px/1.3 var(--f-head); color: var(--c-gelb); }
.tv-detail__block:has(> .tv-detail__knopf) { width: auto; }
.tv-detail__knopf {
  display: inline-flex; align-items: center; justify-content: center; width: 202.8px; height: 54.9px; box-sizing: border-box;
  border: 1px solid var(--c-weiss); font: 400 16px/22.4px var(--f-text); color: var(--c-weiss);
  transition: border-color .4s, background-color .4s;
}
.tv-detail__knopf:hover { border-color: var(--c-gelb); color: var(--c-weiss); }
@media (max-width: 1000px) { .tv-detail__inhalt { padding: 40px 5vw; } .tv-detail__block { margin-bottom: 24px; } .tv-detail__titel { font-size: 30px; } }

/* =========================================================
   STRAFENKATALOGE (gemessen 04.10.): Akkordeon-Standard, Tabellen 40 px eingerückt,
   Kopf 60 px, Zeilen 90 px, Spalten 10/35/20/35 %, Zeilen abwechselnd #1A1A1A / #2C2C2C
   ========================================================= */
.sub-hero--strafen-lmu, .sub-hero--strafen-acc { --verlauf-stopp: 48.54%; --bild-deckkraft: .55; }
.sub-hero--strafen-lmu { --verlauf-farbe: #ff006e; }
.sub-hero--strafen-acc { --verlauf-farbe: #ba0000; }
.sub-hero--strafen-lmu .sub-hero__bild, .sub-hero--strafen-acc .sub-hero__bild { object-position: 55% 0; }
.strafen { position: relative; z-index: 1; background: var(--c-bg); container-type: inline-size; padding: 5%; } /* % statt cqw: cqw am Container selbst = Fensterbreite inkl. Scrollbalken */
.akkordeon--tabellen .akkordeon__inhalt { padding: 40px; }
/* Lesbarkeit auf großen Bildschirmen: höchstens 1600 px breit, mittig (Wunsch Matthias 10.10.) */
.strafen > .akkordeon, .strafen > .strafen__fussnote { max-width: 1600px; margin-inline: auto; }
/* Inhalt der Paragraphen ist CMS-Text: Das CMS entfernt dort Klassen und <colgroup> - deshalb alles über den Ort */
/* Überschriften wie Wix (Wunsch Matthias 10.10.): Titel der Paragraphen mittig (Pfeil bleibt rechts, Platzhalter links
   gleich breit), Unterüberschriften „§ 2.1 …“ mittig in einem dunklen Kasten über die Tabellenbreite */
.akkordeon--tabellen summary::before { content: ""; flex: 0 0 12px; }
.akkordeon--tabellen summary > span { flex: 1 1 auto; text-align: center; }
.akkordeon--tabellen .akkordeon__inhalt :is(h2, h3, h4) { margin: 0 0 12px; padding: 16px 20px; background: var(--c-bg); text-align: center; font: italic 400 18px/1.3 var(--f-head); color: var(--c-weiss); }
.akkordeon--tabellen .akkordeon__inhalt table + :is(h2, h3, h4) { margin-top: 48px; }
.akkordeon--tabellen .akkordeon__inhalt table { width: 100%; border-collapse: collapse; table-layout: fixed; font: 400 16px/22.4px var(--f-text); color: var(--c-weiss); }
.akkordeon--tabellen .akkordeon__inhalt :is(th, td) { padding: 2px 16px 2px 35px; text-align: left; vertical-align: middle; overflow-wrap: break-word; }
.akkordeon--tabellen .akkordeon__inhalt td { padding-block: 14px; } /* Luft, wenn lange Texte die 90 px Zeilenhöhe sprengen */
.akkordeon--tabellen .akkordeon__inhalt th { height: 60px; font-weight: 700; }
.akkordeon--tabellen .akkordeon__inhalt td { height: 90px; }
/* Spaltenbreiten (früher <colgroup>): Paragraph 140 px, Vergehen 35 %, Strafmaß 20 %, Zusatz Rest */
.akkordeon--tabellen .akkordeon__inhalt tr > :nth-child(1) { width: 140px; } /* „Paragraph“ = 86 px + 51 px Abstand - sonst Umbruch */
.akkordeon--tabellen .akkordeon__inhalt tr > :nth-child(2) { width: 35%; }
.akkordeon--tabellen .akkordeon__inhalt tr > :nth-child(3) { width: 20%; }
/* Spalte 4 (Zusatz) nimmt den Rest */
.akkordeon--tabellen .akkordeon__inhalt tbody tr:nth-child(odd) { background: var(--c-bg); }
.akkordeon--tabellen .akkordeon__inhalt tbody tr:nth-child(even) { background: #2c2c2c; }
.strafen__fussnote { margin-top: 40px; font: 400 15px/18px var(--f-text); }
.strafen__fussnote p { margin: 0; }
.strafen__fussnote p.leer, .strafen__fussnote p:empty { height: 18px; } /* :empty = Leerzeile aus dem CMS (ohne Klasse) */
@media (max-width: 1000px) {
  .strafen { padding: 40px 5vw 60px; }
  .akkordeon--tabellen .akkordeon__inhalt { padding: 20px; overflow-x: auto; }
  .akkordeon--tabellen .akkordeon__inhalt table { min-width: 720px; }
  /* schmal: weniger Innenabstand, sonst bricht „Paragraph“ in der 10-%-Spalte in drei Zeilen */
  .akkordeon--tabellen .akkordeon__inhalt :is(th, td) { padding-left: 14px; }
}

/* =========================================================
   PARTNER & UNTERSTÜTZER (gemessen 04./05.10. bei 2560 × 1271 und 1440 × 900)
   Bühne = Kopfzeile (125,4 px) + Logo-Feld + Spendenfeld (je 44,28vh); ragt bei niedrigen Fenstern wie Wix
   über den 100vh-Abschnitt hinaus. Maße in cqw = % der Seitenbreite.
   ========================================================= */
.pu-hero { position: sticky; top: 0; z-index: 0; height: 100vh; background: var(--c-bg); container-type: inline-size; overflow-x: clip; } /* bleibt stehen, Unterstützer scrollen darüber */
.pu-buehne { position: absolute; top: 0; left: 0; width: 100%; height: calc(125.4px + 88.56vh); }
.pu-buehne__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .45; }

/* Logo-Feld: 3 × 2 Kacheln mit Rahmen (1 spx #1A1A1A, Ecken 1,26 cqw), Raster waagerecht und senkrecht mittig */
.pu-logos {
  position: absolute; top: 125.4px; left: 0; width: 50%; height: 44.28vh;
  display: grid; grid-template-columns: repeat(3, 14.53cqw); grid-auto-rows: 9.47cqw; gap: .625cqw;
  justify-content: center; align-content: center;
  background: var(--c-hell);
  animation: pu-von-links 1.2s cubic-bezier(.645,.045,.355,1) backwards;
}
.pu-logo { display: grid; place-items: center; border: max(1px, .0625cqw) solid var(--c-bg); border-radius: 1.2617cqw; background: var(--c-hell); }
.pu-logo a { display: block; width: 12.6cqw; height: 7cqw; }
.pu-logo img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .3s ease-in-out; }
.pu-logo a:hover img, .pu-logo a:focus-visible img { transform: scale(1.05); }

/* Spendenfeld: links Spendeninfos (Text unten bündig mit der Linie), rechts Kaffeekasse */
.pu-spenden {
  position: absolute; top: calc(125.4px + 44.28vh); left: 0; width: 50%; height: 44.28vh; background: var(--c-bg);
  --spalte: calc(22.5cqw - 40px); --hoehe: calc(213.3px + 9.777cqw);
  animation: pu-aufdecken 1.2s cubic-bezier(.645,.045,.355,1) .5s backwards;
}
.pu-spenden__linie { position: absolute; left: 25cqw; top: 2.5cqw; height: var(--hoehe); border-left: .667px solid var(--c-gelb); }
.pu-spenden__info {
  position: absolute; left: 2.5cqw; top: 2.5cqw; width: var(--spalte); height: var(--hoehe);
  display: flex; flex-direction: column; justify-content: space-between;
}
.pu-spenden__titel { margin: 0; font: italic 400 2.27cqw/1.3 var(--f-head); color: var(--c-gelb); }
.pu-spenden__text { font: 400 16px/22.4px var(--f-text); }
.pu-spenden__text p { margin: 0; }
.pu-spenden__text p.leer, .pu-spenden__text p:empty { height: 22.4px; } /* :empty = Leerzeile aus dem CMS (ohne Klasse) */
.pu-kasse {
  position: absolute; left: calc(25cqw + 40.3px); top: 2.5cqw; width: var(--spalte);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.pu-kasse .pu-spenden__titel { width: 100%; margin-top: .5px; translate: calc(.5px + .536cqw) 0; } /* wie Wix leicht nach rechts versetzt */
.pu-kasse__tasse { display: block; height: 191.6px; margin-top: 1.5cqw; }
.pu-kasse__tasse svg { width: auto; height: 100%; }
.pu-kasse__text { margin: 1.48cqw 0 0; font: 400 16px/25.6px var(--f-text); }
.pu-kasse__knopf {
  display: flex; align-items: center; justify-content: center; width: 100%; height: calc(3.241cqw - 4.4px); margin-top: .616cqw; translate: calc(.4px - .161cqw) 0;
  border: .667px solid transparent; background: var(--c-gelb); color: var(--c-bg); font: 400 1.136cqw/1.4 var(--f-text);
  transition: background-color .4s ease, border-color .4s ease, color .4s ease;
}
.pu-kasse__knopf:hover, .pu-kasse__knopf:focus-visible { background: var(--c-bg); border-color: var(--c-gelb); color: var(--c-weiss); }

/* Titel rechts, Unterkante 5,865 cqw über der Bühnen-Unterkante */
.pu-titel { position: absolute; left: 56.8cqw; bottom: 5.865cqw; width: 32cqw; animation: pu-von-rechts 1.2s cubic-bezier(.645,.045,.355,1) backwards; }
.pu-titel__kicker { margin: 0 0 0 .38cqw; font: 400 16px/1.4 var(--f-text); }
.pu-titel__text { margin: 0; font: italic 400 66px/1.3 var(--f-head); color: var(--c-gelb); overflow-wrap: break-word; }

/* „Scroll Down“ senkrecht + Pfeil mit Wix-Animation „poke“ */
.pu-scroll, .pu-scroll:hover { color: var(--c-weiss); }
.pu-scroll__text { position: absolute; left: 95.13cqw; bottom: 11.32cqw; writing-mode: vertical-rl; font: 400 max(12px, .82cqw)/1.6 var(--f-text); white-space: nowrap; }
.pu-scroll__pfeil { position: absolute; left: 93.57cqw; bottom: 6.34cqw; width: 4.25cqw; height: 4.25cqw; fill: var(--c-weiss); transform: rotate(180deg); animation: pu-poke 3.2s linear infinite; }
.pu-scroll__pfeil svg { width: 100%; height: 100%; }

@keyframes pu-von-links { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes pu-von-rechts { from { transform: translateX(100vw); } to { transform: none; } }
@keyframes pu-aufdecken { from { clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); } to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } }
@keyframes pu-poke {
  0%, 38%, 100% { translate: 0 0; } 6.46% { translate: 0 7px; } 12.16% { translate: 0 25px; } 18.24% { translate: 0 8px; }
  21.28% { translate: 0 11px; } 25.08% { translate: 0 25px; } 31.54% { translate: 0 4px; }
}
@media (prefers-reduced-motion: reduce) { .pu-logos, .pu-spenden, .pu-titel, .pu-scroll__pfeil { animation: none; } }

/* Unterstützer-Tabelle: Spalten 30/30/20/20 %, Kopf 60 px, Zeilen 50 px abwechselnd #1A1A1A / #2C2C2C.
   Schrift: Jura statt „Benzin“ (Entscheidung 05.10.) */
.pu-liste { position: relative; z-index: 1; background: var(--c-bg); container-type: inline-size; padding: 5%; }
.pu-liste__titel { margin: 0 0 3.7cqw; font: italic 400 2.522cqw/1.3 var(--f-head); color: var(--c-gelb); } /* cqw hier = 90 % der Seite: 2,27 / 0,9 */
.spender-tabelle { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font: 400 16px/22.4px var(--f-text); color: var(--c-weiss); }
.spender-tabelle th, .spender-tabelle td { padding: 0 2px 0 10px; text-align: left; vertical-align: middle; overflow-wrap: break-word; }
.spender-tabelle th { height: 62.667px; font-weight: 700; border-bottom: 2.667px solid transparent; } /* 60 px Kopf + 2,67 px Lücke wie Wix */
.spender-tabelle td { height: 50px; }
.spender-tabelle tbody tr:nth-child(odd) { background: var(--c-bg); }
.spender-tabelle tbody tr:nth-child(even) { background: #2c2c2c; }

@media (max-width: 1000px) {
  .pu-hero { position: relative; height: auto; padding-top: var(--header-h); }
  .pu-buehne { position: relative; height: auto; display: flex; flex-direction: column; }
  .pu-titel { position: relative; order: -1; left: auto; bottom: auto; width: auto; padding: 40px 5vw; }
  .pu-titel__text { font-size: 44px; }
  .pu-logos, .pu-spenden { position: relative; top: auto; width: 100%; height: auto; }
  .pu-logos { padding: 40px 5vw; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 20vw; gap: 2vw; justify-content: stretch; }
  .pu-logo { border-width: 1px; border-radius: 12px; }
  .pu-logo a { width: 86%; height: 74%; }
  .pu-spenden { display: flex; flex-direction: column; gap: 48px; padding: 40px 5vw; }
  .pu-spenden__linie, .pu-scroll { display: none; }
  .pu-spenden__info, .pu-kasse { position: static; width: auto; height: auto; gap: 24px; }
  .pu-spenden__titel, .pu-liste__titel { font-size: 32px; }
  .pu-kasse__knopf { height: 50px; max-width: 360px; font-size: 16px; }
  .pu-liste { padding: 40px 5vw 60px; }
  .pu-liste__huelle { overflow-x: auto; }
  .spender-tabelle { min-width: 560px; }
}

/* =========================================================
   MEDIADATEN
   Kopf (gemessen 05.10.): Bild 36 % auf Schwarz.
   ========================================================= */
.sub-hero--mediadaten .sub-hero__bild { opacity: .36; }
.sub-hero--mediadaten .sub-hero__kicker { margin-left: 1.116vw; }
/* längerer Titel „Presse & Medien“: volle Breite, sonst bricht er unter 1440 px um */
.sub-hero--mediadaten .sub-hero__text { width: 90%; }
/* Neu gestaltet 10.10. (Dennis, Entwurf handoffs/entwuerfe/mediadaten-entwurf.html): dieselbe Bildsprache wie
   „Unser Team“ (Startnummer 01–03, gelber Startstrich, abgeschrägte Ecke). Jede Datei zeigt sich so, wie sie
   benutzt wird. Das Aussehen einer Kachel hängt NUR am Feld „Art“ (main.js setzt data-md-art), nie an der
   Position – neue Kacheln ordnen sich selbst ein. */
.mediadaten {
  --md-rahmen: #464646; --md-flaeche: #242424; --md-flaeche-2: #2c2c2c;
  --md-ecke: clamp(14px, 1cqw, 26px); --md-gap: clamp(12px, 1.2cqw, 24px);
  position: relative; z-index: 1; background: var(--c-bg);
  padding: clamp(32px, 3cqw, 72px) 5% clamp(56px, 5cqw, 120px);
  container: md / inline-size;
}
.md__innen { max-width: 1760px; margin-inline: auto; }

/* Einleitung + Sprungleiste */
.md-intro { display: grid; gap: 20px 64px; margin-bottom: clamp(36px, 3.4cqw, 80px); }
@container md (min-width: 980px) { .md-intro { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; } }
.md-intro__titel { margin: 0 0 .35em; font: italic 400 clamp(30px, 2.6cqw, 56px)/1.15 var(--f-head); }
.md-intro__text { margin: 0; max-width: 60ch; font: 400 clamp(16px, .85cqw, 20px)/1.55 var(--f-text); color: var(--c-grau-hell); }
.md-sprung { display: flex; flex-wrap: wrap; gap: 8px; }
@container md (min-width: 980px) { .md-sprung { justify-content: flex-end; } }
.md-sprung__link {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--md-rahmen); background: var(--md-flaeche);
  font: 700 clamp(13px, .68cqw, 16px)/1 var(--f-text); letter-spacing: .08em; text-transform: uppercase; color: var(--c-grau-hell);
  transition: color var(--ease), border-color var(--ease);
}
.md-sprung__link:hover, .md-sprung__link:focus-visible { color: var(--c-weiss); border-color: var(--c-gelb); }
.md-sprung__zahl { font: italic 400 13px/1 var(--f-head); letter-spacing: 0; color: var(--c-gelb); }

/* Abschnitt mit Startnummer */
.md-abschnitt {
  position: relative; padding-top: clamp(20px, 1.6cqw, 36px); border-top: 1px solid var(--md-rahmen);
  margin-top: clamp(48px, 4.4cqw, 104px); scroll-margin-top: 140px;
}
.md-abschnitt::before { content: ""; position: absolute; top: -2px; left: 0; width: clamp(48px, 3.5cqw, 88px); height: 3px; background: var(--c-gelb); }
.md-abschnitt:first-of-type { margin-top: 0; }
.md-kopf { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 8px 40px; margin-bottom: clamp(20px, 1.8cqw, 40px); }
.md-kopf__nummer { margin: 0 0 6px; font: italic 700 clamp(48px, 4.2cqw, 104px)/.9 var(--f-head); color: transparent; -webkit-text-stroke: 1px var(--c-grau); }
.md-kopf__titel { margin: 0; font: italic 400 clamp(26px, 1.9cqw, 40px)/1.15 var(--f-head); color: var(--c-gelb); }
.md-kopf__text { margin: 0; max-width: 52ch; font: 400 clamp(15px, .8cqw, 19px)/1.5 var(--f-text); color: var(--c-grau-hell); }

/* Download-Raster: 12 Spalten, Breite kommt aus der Art */
.md-raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: dense; gap: var(--md-gap); }
.md-kachel { grid-column: span 12; }
@container md (min-width: 700px) { .md-kachel { grid-column: span 6; } }
@container md (min-width: 1100px) {
  .md-kachel { grid-column: span 4; }
  .md-kachel[data-md-art="logo"] { grid-column: span 6; }
  .md-kachel[data-md-art="video"] { grid-column: span 8; }
  .md-kachel[data-md-art="audio"] { grid-column: span 4; }
}

/* Kachel */
.md-kachel {
  position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--md-flaeche);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--md-ecke)), calc(100% - var(--md-ecke)) 100%, 0 100%);
}
.md-kachel__buehne { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--md-flaeche-2); }
.md-kachel__bild { display: block; width: 100%; height: 100%; object-fit: cover; }
.md-kachel__fuss { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px 20px; padding: clamp(16px, 1.2cqw, 26px); margin-top: auto; }
.md-kachel__art { margin: 0 0 4px; font: 700 clamp(11px, .58cqw, 13px)/1 var(--f-text); letter-spacing: .14em; text-transform: uppercase; color: var(--c-gelb); }
.md-kachel__titel { margin: 0 0 8px; font: italic 400 clamp(22px, 1.4cqw, 30px)/1.15 var(--f-head); }
.md-kachel__info { margin: 0; font: 400 clamp(13px, .7cqw, 16px)/1.4 var(--f-text); color: var(--c-grau-hell); }

.md-knopf {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px; white-space: nowrap;
  background: var(--c-gelb); border: 1px solid var(--c-gelb); color: #111;
  font: 700 clamp(14px, .72cqw, 16px)/1 var(--f-text); letter-spacing: .08em; text-transform: uppercase;
  transition: background var(--ease), color var(--ease);
}
.md-knopf svg { width: 18px; height: 18px; flex: none; }
.md-knopf:hover, .md-knopf:focus-visible { background: transparent; color: var(--c-weiss); }
.md-knopf--rand { background: transparent; color: var(--c-weiss); border-color: var(--md-rahmen); }
.md-knopf--rand:hover, .md-knopf--rand:focus-visible { border-color: var(--c-gelb); }

/* Art „logo“: Logo frei auf dem Grund, auf dem es benutzt wird; feines Raster = freigestellt */
.md-grund-label {
  position: absolute; top: 14px; left: 14px; z-index: 1; margin: 0; padding: 5px 8px;
  font: 700 11px/1 var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: var(--c-grau-hell); border: 1px solid #3a3a3a;
}
.md-kachel:not([data-md-art="logo"]) .md-grund-label { display: none; }
.md-kachel[data-md-art="logo"] .md-kachel__buehne { aspect-ratio: 16 / 8; background: #0f0f0f; }
.md-kachel[data-md-art="logo"][data-md-grund="hell"] .md-kachel__buehne { background: var(--c-hell); }
.md-kachel[data-md-art="logo"] .md-kachel__bild { position: absolute; top: 18%; left: 18%; width: 64%; height: 70%; object-fit: contain; }
.md-kachel[data-md-art="logo"] .md-kachel__buehne::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 24px 24px;
}
.md-kachel[data-md-grund="hell"] .md-kachel__buehne::before {
  background-image: linear-gradient(rgba(0,0,0,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.06) 1px, transparent 1px);
}
[data-md-grund="hell"] .md-grund-label { color: #555; border-color: #cfcfcf; }

/* Art „video“: Vorschaubild + Start-Knopf (main.js); das Video lädt erst beim Klick aus der Download-Datei */
.md-kachel[data-md-art="video"] .md-kachel__buehne { background: #000; }
.md-video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: #000; }
.md-play {
  position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 16px; border: 0; padding: clamp(14px, 1.2cqw, 24px); cursor: pointer; color: var(--c-weiss);
  background: linear-gradient(0deg, rgba(0,0,0,.6), rgba(0,0,0,0) 40%); font: inherit;
}
.md-play__knopf {
  display: grid; place-items: center; width: clamp(64px, 5cqw, 96px); aspect-ratio: 1; background: var(--c-gelb); color: #111;
  clip-path: polygon(0 0, 100% 0, 100% 78%, 78% 100%, 0 100%); transition: transform var(--ease);
}
.md-play__knopf svg { width: 38%; margin-left: 8%; }
.md-play:hover .md-play__knopf, .md-play:focus-visible .md-play__knopf { transform: scale(1.06); }
.md-play__text { padding-bottom: 6px; font: italic 400 clamp(16px, 1cqw, 22px)/1 var(--f-head); }

/* Art „audio“: Cover + Mini-Player (main.js) */
.md-kachel[data-md-art="audio"] .md-kachel__buehne { flex: 1; min-height: 220px; aspect-ratio: auto; }
.md-kachel[data-md-art="audio"] .md-kachel__bild { position: absolute; inset: 0; }
.md-player { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px;
  padding: 40px 16px 16px; background: linear-gradient(0deg, rgba(0,0,0,.85), rgba(0,0,0,0)); }
.md-player__knopf { display: grid; place-items: center; width: 52px; height: 52px; border: 0; background: var(--c-gelb); color: #111; cursor: pointer;
  clip-path: polygon(0 0, 100% 0, 100% 75%, 75% 100%, 0 100%); }
.md-player__knopf svg { width: 20px; height: 20px; }
.md-player__knopf .pause, .md-player.spielt .md-player__knopf .play { display: none; }
.md-player.spielt .md-player__knopf .pause { display: block; }
.md-player__spur { display: grid; gap: 8px; }
.md-player__leiste { position: relative; height: 4px; background: rgba(255,255,255,.25); cursor: pointer; }
.md-player__leiste::before { content: ""; position: absolute; inset: -10px 0; }
.md-player__leiste span { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--c-gelb); }
.md-player__zeit { display: flex; justify-content: space-between; font: 700 12px/1 var(--f-text); letter-spacing: .06em; color: var(--c-grau-hell); }

/* 02 Farben & Schrift */
.md-kit { display: grid; gap: var(--md-gap); }
@container md (min-width: 1100px) { .md-kit { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.md-unterkopf { margin: 0 0 14px; font: 700 clamp(12px, .62cqw, 15px)/1 var(--f-text); letter-spacing: .14em; text-transform: uppercase; color: var(--c-grau-hell); }
.md-unterkopf--abstand { margin-top: 28px; }

.md-farben { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--md-gap); margin: 0; padding: 0; list-style: none; }
@container md (min-width: 700px) { .md-farben { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.md-farbe { display: flex; flex-direction: column; background: var(--md-flaeche); }
.md-farbe__feld { aspect-ratio: 4 / 3; background: var(--farbe, #333); border-bottom: 1px solid var(--md-rahmen); }
.md-farbe__text { padding: 14px 14px 16px; }
.md-farbe__name { margin: 0 0 4px; font: italic 400 clamp(17px, 1cqw, 21px)/1.2 var(--f-head); }
.md-farbe__zweck { margin: 0 0 12px; font: 400 13px/1.4 var(--f-text); color: var(--c-grau-hell); min-height: 2.8em; }
.md-kopieren {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 40px; padding: 0 10px;
  background: transparent; border: 1px solid var(--md-rahmen); cursor: pointer; color: var(--c-weiss);
  font: 700 14px/1 var(--f-text); letter-spacing: .06em; text-transform: uppercase; transition: border-color var(--ease);
}
.md-kopieren:hover, .md-kopieren:focus-visible, .md-kopieren.kopiert { border-color: var(--c-gelb); }
.md-kopieren__hinweis { font-size: 11px; letter-spacing: .1em; color: var(--c-grau-hell); }
.md-kopieren.kopiert .md-kopieren__hinweis { color: var(--c-gelb); }
.md-farbe__rgb { margin: 8px 0 0; font: 400 12px/1 var(--f-text); color: var(--c-grau); letter-spacing: .04em; }

.md-schriften { display: grid; gap: var(--md-gap); margin: 0; padding: 0; list-style: none; }
.md-schrift { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: end; padding: 18px 18px 20px; background: var(--md-flaeche); }
.md-schrift__muster { grid-column: 1 / -1; margin: 0 0 6px; font-size: clamp(34px, 2.4cqw, 52px); line-height: 1.05; color: var(--c-weiss); overflow-wrap: anywhere; }
.md-schrift[data-md-stil="head"] .md-schrift__muster { font-family: var(--f-head); font-style: italic; }
.md-schrift[data-md-stil="text"] .md-schrift__muster { font-family: var(--f-text); font-weight: 700; }
.md-schrift__name { margin: 0; font: 700 15px/1.3 var(--f-text); letter-spacing: .06em; text-transform: uppercase; }
.md-schrift__zweck { margin: 2px 0 0; font: 400 13px/1.4 var(--f-text); color: var(--c-grau-hell); }
.md-schrift__hinweis { margin: 0; font: 400 13px/1.4 var(--f-text); color: var(--c-grau-hell); text-align: right; }

.md-regeln { margin: var(--md-gap) 0 0; padding: 18px 18px 20px; list-style: none; background: var(--md-flaeche); counter-reset: regel; }
.md-regeln li { position: relative; padding: 9px 0 9px 40px; border-top: 1px solid #333; font: 400 clamp(14px, .76cqw, 17px)/1.45 var(--f-text); color: var(--c-grau-hell); counter-increment: regel; }
.md-regeln li:first-child { border-top: 0; }
.md-regeln li::before { content: counter(regel, decimal-leading-zero); position: absolute; left: 0; top: 10px; font: italic 400 15px/1.3 var(--f-head); color: var(--c-gelb); }

/* 03 Presse-Kontakt */
.md-kontakt {
  display: grid; gap: 20px 48px; align-items: center; padding: clamp(24px, 2.4cqw, 56px);
  background: var(--md-flaeche); border-left: 3px solid var(--c-gelb);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--md-ecke)), calc(100% - var(--md-ecke)) 100%, 0 100%);
}
@container md (min-width: 980px) { .md-kontakt { grid-template-columns: minmax(0, 1fr) auto; } }
.md-kontakt__titel { margin: 0 0 8px; font: italic 400 clamp(26px, 2cqw, 44px)/1.15 var(--f-head); }
.md-kontakt__text { margin: 0; max-width: 62ch; font: 400 clamp(15px, .82cqw, 19px)/1.55 var(--f-text); color: var(--c-grau-hell); }
.md-kontakt__knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }

@media (prefers-reduced-motion: reduce) { .md-play__knopf { transition: none; } }
@media (max-width: 699px) { .md-kachel__fuss { grid-template-columns: 1fr; } .md-knopf { justify-content: center; } }

/* =========================================================
   FOV-RECHNER (Gestaltung: Dennis, 05.10.) – eigener Rechner statt iFrame, JS in /js/fov-rechner.js
   Abschnitt 5 % Innenabstand wie Mediadaten; Maße wachsen über cqw mit.
   Zustände (Triple, gebogen) schaltet reines CSS über :has() –
   funktioniert ohne JS; das JS muss nur Zahlen und SVG setzen.
   ========================================================= */
.fov-rechner {
  position: relative; z-index: 1; background: var(--c-bg); padding: 5%;
  container: fov / inline-size;
}
.fov-rechner__raster {
  display: grid; grid-template-columns: minmax(320px, 29cqw) minmax(0, 1fr);
  column-gap: clamp(32px, 3.6cqw, 96px); align-items: start;
}
.fov-rechner__titel {
  margin: 0 0 clamp(18px, 1.4cqw, 32px);
  font: italic 400 clamp(24px, 1.72cqw, 40px)/1.2 var(--f-head); color: var(--c-gelb);
}
.fov-rechner__titel--klein { font-size: clamp(18px, 1.1cqw, 26px); }

/* ---------- Eingaben (linke Spalte) ---------- */
.fov-eingabe { container: fov-eingabe / inline-size; }
.fov-eingabe__form { display: grid; gap: clamp(18px, 1.3cqw, 28px); margin: 0; }
.fov-feld { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.fov-feld__label { padding: 0; font: 400 16px/1.2 var(--f-text); color: var(--c-hell); }
.fov-feld__hinweis { margin: 0; font: 400 14px/1.4 var(--f-text); color: var(--c-grau-hell); }
.fov-feld__zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }

/* Zahlenfeld mit Einheit rechts im Feld (Look wie Warteliste) */
.fov-zahl { position: relative; display: block; }
.fov-zahl__input {
  width: 100%; height: 46px; padding: 3px 64px 3px 12px; border: 0; border-bottom: 1px solid var(--c-hell); border-radius: 0;
  background: #2c2c2c; color: var(--c-weiss); font: 700 18px/1 var(--f-text);
  font-variant-numeric: tabular-nums; outline: none; appearance: textfield; -moz-appearance: textfield;
  transition: background-color .3s ease, border-color .3s ease;
}
.fov-zahl__input::-webkit-outer-spin-button, .fov-zahl__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fov-zahl__input:hover { background: #464646; }
.fov-zahl__input:focus-visible { border-bottom-color: var(--c-gelb); box-shadow: inset 0 -1px 0 var(--c-gelb); outline: 2px solid var(--c-gelb); outline-offset: 2px; }
.fov-zahl__input[aria-invalid="true"] { border-bottom-color: #ff6b5e; box-shadow: inset 0 -1px 0 #ff6b5e; }
.fov-zahl__einheit {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font: 400 14px/1 var(--f-text); color: var(--c-grau-hell); pointer-events: none;
}

/* Umschalter (Radio-Gruppen): kantige Segmente, aktiv = Gelb */
.fov-wahl { display: grid; grid-template-columns: repeat(var(--fov-spalten, 2), minmax(0, 1fr)); gap: 1px; background: #464646; border: 1px solid #464646; }
.fov-wahl--format { --fov-spalten: 4; }
.fov-wahl--einheit { --fov-spalten: 2; min-width: 120px; }
@container fov-eingabe (min-width: 540px) { .fov-wahl--format { --fov-spalten: 8; } }
.fov-wahl__option { position: relative; display: block; }
.fov-wahl__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.fov-wahl__text {
  display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 10px;
  background: var(--c-bg-2); color: var(--c-hell); font: 400 16px/1 var(--f-text); text-align: center;
  font-variant-numeric: tabular-nums;
  transition: background-color .3s ease, color .3s ease;
}
.fov-wahl__option:hover .fov-wahl__text { background: #464646; color: var(--c-weiss); }
.fov-wahl__input:checked + .fov-wahl__text { background: var(--c-gelb); color: var(--c-bg); font-weight: 700; }
.fov-wahl__input:focus-visible + .fov-wahl__text { outline: 2px solid var(--c-weiss); outline-offset: -4px; }
/* kleine Bildschirm-Symbole in „Einzel / Triple“ */
.fov-wahl__symbol { width: 26px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }

/* Radius-Vorschläge */
.fov-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fov-chip {
  min-height: 32px; padding: 4px 10px; border: 1px solid #464646; border-radius: 0; background: transparent;
  color: var(--c-grau-hell); font: 400 14px/1 var(--f-text); cursor: pointer;
  transition: border-color .3s ease, color .3s ease;
}
.fov-chip:hover, .fov-chip[aria-pressed="true"] { border-color: var(--c-gelb); color: var(--c-weiss); }

/* Felder, die nur in bestimmten Zuständen erscheinen (ohne JS über :has) */
.fov-feld.fov-feld--radius, .fov-feld.fov-feld--bezel, .fov-kennzahl.fov-kennzahl--seite { display: none; }
.fov-rechner:has(#fov-form-gebogen:checked) .fov-feld.fov-feld--radius { display: grid; }
.fov-rechner:has(#fov-anzahl-triple:checked) .fov-feld.fov-feld--bezel { display: grid; }
.fov-rechner:has(#fov-anzahl-triple:checked) .fov-kennzahl.fov-kennzahl--seite { display: grid; }

/* Erklärtext unter den Eingaben */
.fov-eingabe { grid-column: 1; grid-row: 1; }
.fov-ergebnis { grid-column: 2; grid-row: 1 / span 2; }
.fov-erklaerung { grid-column: 1; grid-row: 2; margin-top: clamp(32px, 2.6cqw, 56px); padding-top: clamp(20px, 1.4cqw, 32px); border-top: 1px solid #464646; }
.fov-erklaerung p { margin: 0; font: 400 16px/1.55 var(--f-text); color: var(--c-grau-hell); }
.fov-erklaerung p + p { margin-top: .8em; }

/* ---------- Ergebnisse (rechte Spalte) ---------- */
.fov-ergebnis { container: fov-ergebnis / inline-size; min-width: 0; }
.fov-ergebnis__kopf {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 2.4cqw, 48px);
  align-items: stretch;
}

/* Große Kennzahlen */
.fov-kennzahlen { display: grid; align-content: start; gap: 0; margin: 0; }
.fov-kennzahlen dd { margin: 0; }
.fov-rechner :focus-visible { outline: 2px solid var(--c-gelb); outline-offset: 2px; }
.fov-kennzahl {
  display: grid; grid-template-columns: 1fr; padding: clamp(14px, 1.1cqw, 24px) 0;
  border-bottom: 1px solid #464646;
}
.fov-kennzahl:first-child { border-top: 1px solid #464646; }
.fov-kennzahl__label {
  margin: 0; font: 700 13px/1.3 var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: var(--c-grau-hell);
}
.fov-kennzahl__wert {
  display: flex; align-items: flex-start; margin: 4px 0 0;
  font: italic 700 clamp(48px, 7.2cqw, 112px)/1 var(--f-head); color: var(--c-weiss);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.fov-kennzahl__einheit { margin-left: .06em; font-size: .5em; line-height: 1.1; color: var(--c-gelb); }
.fov-kennzahl--seite .fov-kennzahl__wert { font-size: clamp(36px, 4.6cqw, 72px); }
.fov-kennzahl__notiz { margin: 6px 0 0; font: 400 14px/1.4 var(--f-text); color: var(--c-grau-hell); }

/* Draufsicht-Skizze */
.fov-skizze { margin: 0; display: grid; grid-template-rows: 1fr auto; background: var(--c-bg-2); border: 1px solid #464646; }
.fov-skizze__svg { display: block; width: 100%; height: auto; }
.fov-skizze__unterschrift {
  display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-top: 1px solid #464646;
  font: 400 13px/1.3 var(--f-text); color: var(--c-grau-hell);
}
.fov-skizze__unterschrift b { font-weight: 700; color: var(--c-weiss); }
/* SVG-Teile */
.fov-skizze__raster-linie { fill: none; stroke: #2c2c2c; stroke-width: 1; }
.fov-skizze__faecher { fill: rgba(255, 197, 37, .16); stroke: none; transition: d .3s ease; }
.fov-skizze__strahl { stroke: var(--c-gelb); stroke-width: 1.5; fill: none; transition: d .3s ease; }
.fov-skizze__bogen { stroke: var(--c-gelb); stroke-width: 2; fill: none; transition: d .3s ease; }
.fov-skizze__schirm { stroke: var(--c-weiss); stroke-width: 5; stroke-linecap: butt; fill: none; transition: d .3s ease; }
.fov-skizze__schirm--seite { stroke: var(--c-grau-hell); }
.fov-skizze__mass { stroke: var(--c-grau); stroke-width: 1; stroke-dasharray: 4 4; fill: none; }
.fov-skizze__mass-ende { stroke: var(--c-grau); stroke-width: 1; }
.fov-skizze__text { font: 400 13px var(--f-text); fill: var(--c-grau-hell); }
.fov-skizze__text--winkel { font: italic 700 15px var(--f-head); fill: var(--c-gelb); }
.fov-skizze__kopf { fill: #2c2c2c; stroke: var(--c-grau-hell); stroke-width: 1.5; }
.fov-skizze__auge { fill: var(--c-gelb); }
/* Einzel/Triple-Gruppe im SVG */
.fov-skizze__triple { display: none; }
.fov-rechner:has(#fov-anzahl-triple:checked) .fov-skizze__triple { display: inline; }
.fov-rechner:has(#fov-anzahl-triple:checked) .fov-skizze__einzel { display: none; }

/* Liga-Spiele (hervorgehoben) */
.fov-liga { margin-top: clamp(28px, 2.6cqw, 56px); }
.fov-liga__raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(12px, 1.2cqw, 24px); margin: 0; padding: 0; list-style: none; }
.fov-liga__karte {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 16px;
  padding: clamp(16px, 1.5cqw, 28px) clamp(18px, 1.7cqw, 32px);
  background: var(--c-bg-2); border-left: 4px solid var(--c-gelb);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%); /* abgeschrägte Ecke */
}
.fov-liga__marke {
  grid-column: 1 / -1; justify-self: start; margin: 0 0 10px; padding: 3px 8px;
  background: var(--c-gelb); color: var(--c-bg); font: 700 12px/1.2 var(--f-text); letter-spacing: .1em; text-transform: uppercase;
}
.fov-liga__text { align-self: end; min-width: 0; }
.fov-liga__name { margin: 0; font: italic 400 clamp(17px, 1.3cqw, 26px)/1.25 var(--f-head); color: var(--c-weiss); }
.fov-liga__art { margin: 4px 0 0; font: 400 14px/1.4 var(--f-text); color: var(--c-grau-hell); }
.fov-liga__wert {
  align-self: end; display: flex; align-items: flex-start; margin: 0;
  font: italic 700 clamp(40px, 4.4cqw, 80px)/1 var(--f-head); color: var(--c-gelb); font-variant-numeric: tabular-nums;
}
.fov-liga__grenze { grid-column: 1 / -1; margin: 6px 0 0; }
.fov-liga__einheit { margin-left: .05em; font-size: .5em; line-height: 1.1; }

/* Weitere Spiele: kompakte Liste in Spalten */
.fov-spiele { margin-top: clamp(28px, 2.6cqw, 56px); }
.fov-spiele__liste {
  display: grid; grid-template-columns: minmax(0, 1fr); column-gap: clamp(20px, 2.4cqw, 48px);
  margin: 0; padding: 0; list-style: none; border-top: 1px solid #464646;
}
@container fov-ergebnis (min-width: 560px) { .fov-spiele__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container fov-ergebnis (min-width: 1150px) { .fov-spiele__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fov-spiel {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px;
  min-height: 52px; padding: 8px 10px; border-bottom: 1px solid #464646;
  transition: background-color .3s ease;
}
.fov-spiel:hover { background: #242424; }
.fov-spiel__name { min-width: 0; font: 400 16px/1.25 var(--f-text); color: var(--c-weiss); overflow-wrap: anywhere; }
.fov-spiel__art { display: block; margin-top: 2px; font-size: 13px; color: var(--c-grau-hell); }
.fov-spiel__wert {
  font: 700 18px/1 var(--f-text); color: var(--c-weiss); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right;
}
.fov-spiel__einheit { margin-left: 2px; font-weight: 400; color: var(--c-grau-hell); }
/* Wert liegt an der Grenze des Spiels (Minimum/Maximum) */
.fov-spiel__grenze { display: none; margin-top: 4px; font: 400 12px/1 var(--f-text); color: var(--c-gelb); text-align: right; }
.fov-spiel--grenze .fov-spiel__grenze { display: block; }
.fov-spiele__fussnote { margin: 14px 0 0; font: 400 14px/1.45 var(--f-text); color: var(--c-grau-hell); max-width: 75ch; }

/* Mobile Ergebnis-Leiste: bleibt beim Ausfüllen unten sichtbar */
.fov-leiste { display: none; }

/* ---------- Tablet & Handy ---------- */
@media (max-width: 1000px) {
  .fov-rechner { padding: 40px 5vw 60px; }
  .fov-rechner__raster { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .fov-eingabe__form { gap: 20px; }
  .fov-wahl--format { --fov-spalten: 8; }
  .fov-leiste {
    position: sticky; bottom: 0; z-index: 5; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0 -5vw; padding: 10px 5vw calc(10px + env(safe-area-inset-bottom));
    background: rgba(26, 26, 26, .96); border-top: 1px solid var(--c-gelb);
  }
  .fov-leiste { transition: transform .3s ease, opacity .3s ease; }
  .fov-leiste.is-versteckt { transform: translateY(100%); opacity: 0; pointer-events: none; }
  .fov-leiste__wert { display: grid; gap: 2px; text-align: center; }
  .fov-leiste__wert + .fov-leiste__wert { border-left: 1px solid #464646; }
  .fov-leiste__label { font: 700 12px/1.2 var(--f-text); letter-spacing: .08em; text-transform: uppercase; color: var(--c-grau-hell); }
  .fov-leiste__zahl { font: italic 700 20px/1.1 var(--f-head); color: var(--c-weiss); font-variant-numeric: tabular-nums; }
  .fov-leiste__wert--liga .fov-leiste__zahl { color: var(--c-gelb); }
  .fov-eingabe, .fov-ergebnis, .fov-erklaerung { grid-column: 1; grid-row: auto; }
  .fov-erklaerung { margin-top: 0; }
}
@media (max-width: 600px) {
  .fov-wahl--format { --fov-spalten: 4; }
  .fov-ergebnis__kopf { grid-template-columns: minmax(0, 1fr); }
  .fov-kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
  .fov-kennzahl--seite { grid-column: 1 / -1; }
  .fov-liga__raster { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .fov-rechner *, .fov-rechner *::before { transition: none !important; }
}
.sub-hero--fov .sub-hero__bild { opacity: .3; }

/* =========================================================
   PITSTOP-RECHNER (16.10.2026) – gleicher Aufbau wie der FOV-Rechner (.fov-rechner, .fov-feld, .fov-zahl,
   .fov-wahl, .fov-kennzahl); hier nur, was neu ist: Zeitleiste, Stint-Plan, Teilen. JS: /js/pitstop-rechner.js
   ========================================================= */
/* Das Boxenstopp-Foto ist selbst schon dunkel - weniger abdunkeln als beim FOV-Kopf */
.sub-hero--ps .sub-hero__bild { opacity: .7; }
.ps-unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Klasse ohne JS umschalten: Felder nur für Virtual Energy bzw. nur für Sprit */
.ps-rechner:has(#ps-klasse-ve:checked) .ps-nur-sprit,
.ps-rechner:has(#ps-klasse-sprit:checked) .ps-nur-ve { display: none; }
/* Reifen-Kontingent: Felder nur bei „Optimal nach Reifen-Kontingent“ */
.ps-rechner:not(:has(#ps-reifen option[value="optimal"]:checked)) .ps-nur-optimal { display: none; }
.ps-warnung { margin: 12px 0 0; padding: 10px 14px; border-left: 4px solid #ff6b5e; background: var(--c-bg-2); font: 400 15px/1.45 var(--f-text); color: var(--c-weiss); }
.ps-warnung[hidden] { display: none; }

/* Zwei Felder nebeneinander (Std./Min.) und Feldgruppen im 2er-Raster */
.ps-paar, .ps-gruppe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.ps-gruppe { gap: clamp(18px, 1.3cqw, 28px) 12px; }
/* Bricht eine Beschriftung um, stehen die Felder trotzdem auf einer Linie */
.ps-gruppe > .fov-feld { align-content: end; }
.ps-gruppe__hinweis { margin-top: calc(-1 * clamp(8px, .7cqw, 16px)); }

/* Häkchen im Look der Segmente */
.ps-haken { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; cursor: pointer; font: 400 16px/1.35 var(--f-text); color: var(--c-hell); }
.ps-haken input { appearance: none; width: 22px; height: 22px; margin: 0; border: 1px solid var(--c-hell); background: #2c2c2c; cursor: pointer; display: grid; place-items: center; }
.ps-haken input::after { content: ""; width: 11px; height: 6px; border: solid var(--c-bg); border-width: 0 0 2.5px 2.5px; transform: translateY(-2px) rotate(-45deg); opacity: 0; }
.ps-haken input:checked { background: var(--c-gelb); border-color: var(--c-gelb); }
.ps-haken input:checked::after { opacity: 1; }
.ps-haken small { display: block; margin-top: 2px; font-size: 14px; color: var(--c-grau-hell); }

/* Auswahlliste wie Zahlenfeld */
.ps-auswahl {
  width: 100%; height: 46px; padding: 0 40px 0 12px; border: 0; border-bottom: 1px solid var(--c-hell); border-radius: 0;
  background: #2c2c2c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23ffc525' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 14px center / 12px 8px;
  color: var(--c-weiss); font: 700 16px/1 var(--f-text); appearance: none; cursor: pointer;
  transition: background-color .3s ease, border-color .3s ease;
}
.ps-auswahl:hover { background-color: #464646; }
.ps-auswahl:focus-visible { border-bottom-color: var(--c-gelb); box-shadow: inset 0 -1px 0 var(--c-gelb); }
.ps-auswahl option { background: var(--c-bg-2); color: var(--c-weiss); font-weight: 400; }

/* Aufklappbarer Block „Boxenstopp und Reifen“: Kopf wie ein kleiner Rechner-Titel, nur weiß */
.ps-box { border-top: 1px solid #464646; border-bottom: 1px solid #464646; }
.ps-box__kopf {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; cursor: pointer; list-style: none;
  font: italic 400 clamp(18px, 1.1cqw, 26px)/1.2 var(--f-head); color: var(--c-weiss); transition: color .3s ease;
}
.ps-box__kopf:hover { color: var(--c-gelb); }
.ps-box__kopf::-webkit-details-marker { display: none; }
.ps-box__kopf::after { content: ""; flex: 0 0 auto; width: 9px; height: 9px; margin-right: 4px; border: solid var(--c-gelb); border-width: 0 2px 2px 0; transform: translateY(-3px) rotate(45deg); transition: transform .3s ease; }
.ps-box[open] > .ps-box__kopf::after { transform: translateY(2px) rotate(-135deg); }
.ps-box__inhalt { display: grid; gap: clamp(18px, 1.3cqw, 28px); padding: 4px 0 24px; }

/* ---------- Ergebnis ---------- */
.ps-meldung { margin: 0 0 24px; padding: 14px 18px; border-left: 4px solid #ff6b5e; background: var(--c-bg-2); font: 400 16px/1.45 var(--f-text); color: var(--c-weiss); }
.ps-rechner--fehler .ps-plan { opacity: .25; pointer-events: none; }

/* Kennzahlen: 2 große weiße Zahlen, 2 kleinere gelbe – alle auf einer Grundlinie,
   Platz für die Notiz („57,6 L Sprit“) ist in jeder Spalte reserviert */
.ps-kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(20px, 2.4cqw, 48px); }
.ps-kennzahlen .fov-kennzahl:nth-child(2) { border-top: 1px solid #464646; }
.ps-kennzahlen .fov-kennzahl { grid-template-rows: auto 1fr minmax(20px, auto); }
.ps-kennzahlen .fov-kennzahl__wert { align-self: end; white-space: nowrap; }
.ps-kennzahl--klein .fov-kennzahl__wert { font-size: clamp(28px, 3cqw, 52px); color: var(--c-gelb); }
@container fov-ergebnis (min-width: 760px) {
  .ps-kennzahlen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ps-kennzahlen .fov-kennzahl { border-top: 1px solid #464646; }
}

/* Faktenzeile: wie die Unterschrift der FOV-Skizze – Label grau, Wert weiß, feine Trenner */
.ps-fakten {
  display: flex; flex-wrap: wrap; gap: 8px 0; margin: 0; padding: 14px 0; border-bottom: 1px solid #464646; list-style: none;
  font: 400 14px/1.4 var(--f-text); color: var(--c-grau-hell);
}
.ps-fakten li { padding-right: 18px; margin-right: 18px; border-right: 1px solid #464646; }
.ps-fakten li:last-child { padding-right: 0; margin-right: 0; border-right: 0; }
.ps-fakten b { font-weight: 700; color: var(--c-weiss); font-variant-numeric: tabular-nums; }

/* Zeitleiste – das „Bild“ des Rechners (wie die FOV-Draufsicht): gerahmte Fläche, Stints als Blöcke
   nach Rundenzahl mit großer Nummer, Stopps als gelbe Kerben, am Ende die Zielflagge */
.ps-zeit { margin-top: clamp(28px, 2.6cqw, 56px); }
.ps-zeitleiste {
  display: flex; align-items: stretch; gap: 0; margin: 0; padding: clamp(14px, 1.2cqw, 24px); list-style: none;
  background: var(--c-bg-2); border: 1px solid #464646;
}
/* Gemeinsamer Scrollbereich für Zeitleiste und Reifensätze (24 h: über 30 Stints). Scrollbalken wie im
   Mitgliederbereich: dünn, dezent, gelb beim Drüberfahren – nie das Standard-Weiß. */
.ps-zeit__rolle {
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: thin; scrollbar-color: #464646 transparent;
}
.ps-zeit__rolle:hover, .ps-zeit__rolle:focus-visible { scrollbar-color: var(--c-gelb) transparent; }
.ps-zeit__rolle:focus-visible { outline: 2px solid var(--c-gelb); outline-offset: 2px; }
.ps-zeit__rolle::-webkit-scrollbar { height: 8px; }
.ps-zeit__rolle::-webkit-scrollbar-track { background: transparent; }
.ps-zeit__rolle::-webkit-scrollbar-thumb { background: #464646; border-radius: 0; }
.ps-zeit__rolle:hover::-webkit-scrollbar-thumb { background: var(--c-gelb); }
.ps-zeit__innen { min-width: 100%; }
.ps-zeit__rolle--scrollt .ps-zeit__innen { padding-bottom: 8px; }
/* Zielflagge: schwarz-weißes Schachbrett */
.ps-zeitleiste::after {
  content: ""; flex: 0 0 12px; margin-left: 3px;
  background: repeating-conic-gradient(var(--c-weiss) 0 25%, var(--c-bg) 0 50%) 0 0 / 12px 12px;
}
.ps-zeitleiste__stint {
  container: ps-stint / inline-size;
  flex: 1 1 0; min-width: 34px; min-height: clamp(84px, 6.4cqw, 132px);
  display: flex; flex-direction: column; justify-content: space-between; gap: 6px; padding: 10px 12px;
  background: #2c2c2c; border-top: 3px solid var(--c-weiss); overflow: hidden;
}
.ps-zeitleiste__stint--zu-viel { border-top-color: #ff6b5e; }
/* Ab 10 Stints: zweistellige Nummern brauchen Platz – lieber scrollen als „1“ statt „10“ zeigen */
.ps-zeitleiste--viele .ps-zeitleiste__stint { min-width: 60px; }
.ps-zeitleiste__nr { font: italic 700 clamp(28px, 2.8cqw, 52px)/.9 var(--f-head); color: var(--c-weiss); font-variant-numeric: tabular-nums; }
.ps-zeitleiste__runden { font: 700 12px/1.2 var(--f-text); letter-spacing: .08em; text-transform: uppercase; color: var(--c-grau-hell); white-space: nowrap; }
@container ps-stint (max-width: 34px) { .ps-zeitleiste__runden { display: none; } }
.ps-zeitleiste__stopp { flex: 0 0 auto; width: 8px; background: var(--c-gelb); }
.ps-zeitleiste__stopp--reifen { width: 30px; display: grid; place-items: center; color: var(--c-bg); }
.ps-zeitleiste__stopp .ps-symbol { width: 18px; height: 18px; stroke-width: 2.2; }

/* Stint-Plan: Stint-Zeilen ruhig, Stopp-Zeilen als dunkle Fläche mit gelber Kante */
.ps-stints { margin-top: clamp(28px, 2.6cqw, 56px); }
.ps-stints__kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.ps-stints__kopf .fov-rechner__titel { margin-bottom: 6px; }
.ps-stints__liste { display: grid; margin: 16px 0 0; padding: 0; list-style: none; border-top: 1px solid #464646; }
.ps-stint {
  display: grid; grid-template-columns: minmax(0, 1fr) 132px; align-items: center; gap: 6px 16px;
  padding: 14px 0 14px 18px; border-bottom: 1px solid #464646;
}
.ps-stint__titel { margin: 0; font: italic 700 clamp(20px, 1.4cqw, 28px)/1.1 var(--f-head); color: var(--c-weiss); }
.ps-stint__runden-text { margin: 4px 0 0; font: 400 14px/1.4 var(--f-text); color: var(--c-grau-hell); font-variant-numeric: tabular-nums; }
.ps-stint__feld { display: block; }
.ps-stint__input { padding-right: 44px; }
.ps-stint--fest .ps-stint__input { border-bottom-color: var(--c-gelb); box-shadow: inset 0 -1px 0 var(--c-gelb); }
.ps-stint__warnung { grid-column: 1 / -1; margin: 0; font: 400 14px/1.4 var(--f-text); color: #ff6b5e; }
.ps-stopp {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; align-items: center; gap: 8px 16px;
  padding: 12px 14px; background: var(--c-bg-2); border-left: 4px solid var(--c-gelb); border-bottom: 1px solid #464646;
}
.ps-stopp__marke { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--c-grau); color: var(--c-gelb); }
.ps-stopp__text { min-width: 0; }
.ps-stopp__titel { margin: 0; font: 700 12px/1.3 var(--f-text); letter-spacing: .1em; text-transform: uppercase; color: var(--c-grau-hell); }
.ps-stopp__fuellen { margin: 4px 0 0; font: 400 15px/1.4 var(--f-text); color: var(--c-grau-hell); overflow-wrap: anywhere; }
.ps-stopp__fuellen b { font-weight: 700; color: var(--c-weiss); }
.ps-stopp__dauer { margin: 0; min-width: 6.5em; font: italic 700 18px/1 var(--f-head); color: var(--c-weiss); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
/* Reifen an/aus: aus = Rahmen, an = gelb gefüllt (wie die Segmente) */
.ps-stopp__reifen { position: relative; display: block; cursor: pointer; }
.ps-stopp__reifen input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ps-stopp__reifen span {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 12px; border: 1px solid var(--c-grau);
  font: 400 14px/1 var(--f-text); color: var(--c-grau-hell); transition: border-color .3s ease, color .3s ease, background-color .3s ease;
}
.ps-stopp__reifen:hover span { border-color: var(--c-gelb); color: var(--c-weiss); }
.ps-stopp__reifen input:checked + span { background: var(--c-gelb); border-color: var(--c-gelb); color: var(--c-bg); font-weight: 700; }
.ps-stopp__reifen input:focus-visible + span { outline: 2px solid var(--c-weiss); outline-offset: 2px; }
.ps-symbol { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; flex: 0 0 auto; }

/* Teilen */
.ps-teilen { margin-top: clamp(28px, 2.6cqw, 56px); }
.ps-teilen__zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-bottom: 8px; }
.ps-teilen__link {
  width: 100%; min-width: 0; height: 46px; padding: 0 12px; border: 0; border-bottom: 1px solid var(--c-hell); border-radius: 0;
  background: #2c2c2c; color: var(--c-grau-hell); font: 400 14px/1 var(--f-text); text-overflow: ellipsis;
}
.ps-teilen__link:focus-visible { border-bottom-color: var(--c-gelb); color: var(--c-weiss); }
.ps-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 20px; border: 0; border-radius: 0;
  background: var(--c-gelb); color: var(--c-bg); font: 700 16px/1 var(--f-text); cursor: pointer; white-space: nowrap;
  transition: background-color .3s ease;
}
.ps-knopf:hover { background: var(--c-weiss); }

.ps-leiste { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }

@media (max-width: 600px) {
  .ps-fakten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .ps-fakten li { padding: 0; margin: 0; border: 0; }
  .ps-zeitleiste { padding: 10px; }
  .ps-zeitleiste__stint { min-height: 72px; padding: 8px; }
  .ps-zeitleiste__stopp--reifen { width: 24px; }
  .ps-zeitleiste__runden { letter-spacing: .02em; }
  .ps-zeitleiste__stopp .ps-symbol { width: 16px; height: 16px; }
  .ps-stint { grid-template-columns: minmax(0, 1fr) 112px; padding-left: 0; }
  .ps-stopp { grid-template-columns: 34px minmax(0, 1fr) auto; padding: 12px; }
  .ps-stopp__titel { letter-spacing: .06em; }
  .ps-stopp__text { grid-column: 2 / -1; }
  .ps-stopp__reifen { grid-column: 2; justify-self: start; }
  .ps-stopp__dauer { grid-column: 3; grid-row: 2; min-width: 0; }
  .ps-teilen__zeile { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================
   PITSTOP-RECHNER v2 (Entwurf Dennis, freigegeben Matthias 17.10.2026)
   (ergänzt den Abschnitt „PITSTOP-RECHNER“, nutzt nur vorhandene Variablen
   und die dort schon verwendeten Grautöne #2c2c2c / #464646 sowie #ff6b5e)
   ========================================================= */

/* ---------- Eingaben: Messhinweis „3 Runden Push“ ---------- */
.ps-mess {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: start;
  padding: 14px 16px; background: var(--c-bg-2); border-left: 4px solid var(--c-gelb);
}
.ps-mess__zahl { grid-row: 1 / span 2; font: italic 700 44px/.9 var(--f-head); color: var(--c-gelb); font-variant-numeric: tabular-nums; }
.ps-mess__titel { margin: 0; font: 700 12px/1.3 var(--f-text); letter-spacing: .1em; text-transform: uppercase; color: var(--c-weiss); }
.ps-mess__text { margin: 0; font: 400 14px/1.45 var(--f-text); color: var(--c-grau-hell); }

/* Kraftstoffverhältnis: Feld mit Warnstrich, Warnung mit Knopf „0,88 übernehmen“ */
.ps-zahl--warnung .fov-zahl__input { border-bottom-color: #ff6b5e; box-shadow: inset 0 -1px 0 #ff6b5e; }
.ps-verhaeltnis-warnung { display: grid; gap: 10px; margin: 0; }
.ps-verhaeltnis-warnung b { color: var(--c-weiss); }
.ps-verhaeltnis-warnung .fov-chip { justify-self: start; border-color: var(--c-gelb); color: var(--c-weiss); }
.ps-verhaeltnis-warnung .fov-chip:hover { background: var(--c-gelb); color: var(--c-bg); }

/* Zugeklappter Block: Kurzwerte rechts im Kopf, damit man ohne Aufklappen sieht, womit gerechnet wird */
.ps-box__titel { flex: 1 1 auto; min-width: 0; }
.ps-box__kurz { margin-left: auto; white-space: nowrap; font: 400 14px/1.3 var(--f-text); font-style: normal; color: var(--c-grau-hell); font-variant-numeric: tabular-nums; }
.ps-box[open] .ps-box__kurz { display: none; }

/* Reifen „Optimal“: Pflichtfeld-Hinweis direkt unter den Reifenfeldern (Feld selbst: aria-invalid = roter Strich) */
.ps-feld-fehler { margin: calc(-1 * clamp(8px, .7cqw, 16px)) 0 0; padding-left: 10px; border-left: 3px solid #ff6b5e; font: 400 14px/1.4 var(--f-text); color: var(--c-weiss); }
.ps-feld-fehler b { font-weight: 700; }

/* Ergebnis ohne Haltbarkeit: Hinweis statt Plan (baut auf .ps-meldung auf) */
.ps-meldung--pflicht { display: grid; gap: 10px; justify-items: start; margin: 0; padding: clamp(16px, 1.5cqw, 28px) clamp(18px, 1.7cqw, 32px); }
.ps-meldung__titel { margin: 0; font: italic 400 clamp(20px, 1.4cqw, 28px)/1.2 var(--f-head); color: var(--c-weiss); }
.ps-meldung__text { margin: 0; max-width: 60ch; font: 400 16px/1.5 var(--f-text); color: var(--c-grau-hell); }
.ps-meldung__text b { color: var(--c-weiss); }
.ps-meldung--pflicht .fov-chip { border-color: var(--c-gelb); color: var(--c-weiss); }
.ps-meldung--pflicht .fov-chip:hover { background: var(--c-gelb); color: var(--c-bg); }

/* ---------- Ergebnis: Kopf mit Push / Eco ---------- */
.ps-ergebnis__kopf {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  margin-bottom: clamp(18px, 1.4cqw, 32px);
}
.ps-ergebnis__kopf .fov-rechner__titel { margin: 0; }
.ps-modus { width: min(100%, 280px); }
.ps-modus .fov-wahl__text { gap: 6px; }
.ps-modus small { font-size: 12px; font-weight: 400; opacity: .85; }

/* ---------- Strategie-Varianten (Reifen) ---------- */
.ps-varianten { margin-top: clamp(28px, 2.6cqw, 56px); border: 0; padding: 0; min-width: 0; }
.ps-varianten > legend { padding: 0; }
.ps-varianten__liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0; }
@container fov-ergebnis (min-width: 760px) { .ps-varianten__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ps-variante { position: relative; display: block; cursor: pointer; }
.ps-variante__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ps-variante__karte {
  display: grid; grid-template-rows: auto 1fr auto auto; gap: 12px; height: 100%; padding: 16px 18px 18px;
  background: var(--c-bg-2); border: 1px solid #464646; border-top: 3px solid #464646;
  transition: border-color .3s ease, background-color .3s ease;
}
.ps-variante:hover .ps-variante__karte { background: #2c2c2c; border-color: var(--c-grau); }
.ps-variante__input:checked + .ps-variante__karte { background: #2c2c2c; border-color: var(--c-gelb); }
.ps-variante__input:focus-visible + .ps-variante__karte { outline: 2px solid var(--c-weiss); outline-offset: 2px; }
.ps-variante__kopf { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
/* Radio-Punkt: leer = Rahmen, gewählt = gelber Kern */
.ps-variante__punkt { flex: 0 0 18px; margin-top: 2px; width: 18px; height: 18px; border: 1px solid var(--c-grau-hell); border-radius: 50%; display: grid; place-items: center; }
.ps-variante__punkt::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c-gelb); opacity: 0; }
.ps-variante__input:checked + .ps-variante__karte .ps-variante__punkt { border-color: var(--c-gelb); }
.ps-variante__input:checked + .ps-variante__karte .ps-variante__punkt::after { opacity: 1; }
.ps-variante__name { flex: 1 1 auto; min-width: 0; font: italic 700 clamp(18px, 1.3cqw, 24px)/1.15 var(--f-head); color: var(--c-weiss); }
.ps-variante__marke {
  flex: 0 0 auto; padding: 3px 8px; background: var(--c-gelb); color: var(--c-bg);
  font: 700 11px/1.2 var(--f-text); letter-spacing: .1em; text-transform: uppercase;
}
.ps-variante__text { margin: 0; font: 400 14px/1.4 var(--f-text); color: var(--c-grau-hell); }
.ps-variante__werte { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding-top: 10px; border-top: 1px solid #464646; }
.ps-variante__wert { display: grid; gap: 4px; min-width: 0; }
.ps-variante__wert dt { font: 700 10px/1.2 var(--f-text); letter-spacing: .08em; text-transform: uppercase; color: var(--c-grau-hell); }
.ps-variante__wert dd { margin: 0; font: italic 700 20px/1.1 var(--f-head); color: var(--c-weiss); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ps-variante__abstand { margin: 0; font: 400 14px/1.4 var(--f-text); color: var(--c-grau-hell); }
.ps-variante__abstand b { color: var(--c-weiss); }
.ps-variante__warnung { margin: 0; padding-left: 10px; border-left: 3px solid #ff6b5e; font: 400 14px/1.4 var(--f-text); color: var(--c-weiss); }

/* Reifensätze unter der Zeitleiste: je Satz ein Balken, Länge nach Runden; überzogen = rot */
.ps-saetze { display: flex; gap: 3px; margin: 0; padding: 10px clamp(14px, 1.2cqw, 24px) 0; list-style: none; }
.ps-satz { flex: 1 1 0; min-width: 0; border-top: 3px solid var(--c-grau-hell); padding-top: 6px; }
.ps-satz--zu-lang { border-top-color: #ff6b5e; }
.ps-satz__text { display: block; font: 400 12px/1.3 var(--f-text); color: var(--c-grau-hell); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.ps-satz__text b { color: var(--c-weiss); font-weight: 700; }

/* Stopp ohne Reifen in der Zeitleiste: schmale gelbe Kerbe (gibt es schon), hier nur der Hinweis in der Legende */
.ps-legende { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; padding: 0; list-style: none; font: 400 13px/1.3 var(--f-text); color: var(--c-grau-hell); }
.ps-legende li { display: inline-flex; align-items: center; gap: 8px; }
.ps-legende__kerbe { width: 6px; height: 14px; background: var(--c-gelb); }
.ps-legende__reifen { width: 14px; height: 14px; background: var(--c-gelb); }
.ps-legende__satz { width: 18px; height: 3px; background: var(--c-grau-hell); }

/* ---------- Eco ----------
   Die drei Ziele sind auswählbar wie die Reifen-Strategien (.ps-variante); das gewählte Ziel
   speist Kennzahlen, Rennverlauf und Stint-Plan darunter. „Lohnt sich Eco?“ bewertet nur das gewählte Ziel. */
.ps-eco { margin-bottom: clamp(28px, 2.6cqw, 56px); }
.ps-eco__intro { margin: 0 0 20px; max-width: 70ch; font: 400 16px/1.5 var(--f-text); color: var(--c-grau-hell); }
.ps-eco__intro b { color: var(--c-weiss); font-weight: 700; }
.ps-eco__ziele { margin: 0; border: 0; padding: 0; min-width: 0; }
.ps-variante__karte--eco { grid-template-rows: auto auto auto 1fr auto; gap: 10px; }
.ps-variante__name--satz { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
/* kleines Zahlenfeld mitten im Satz („Stint um [2] Runden verlängern“) – liegt über der Klickfläche der Karte */
.ps-eco__eingabe { position: relative; z-index: 1; display: inline-block; width: 88px; vertical-align: middle; }
.ps-eco__eingabe .fov-zahl__input { height: 38px; padding: 2px 34px 2px 10px; font-size: 17px; font-style: normal; }
.ps-eco__eingabe .fov-zahl__einheit { right: 9px; font-size: 13px; font-style: normal; }
/* 1 | 2 | 3 Stopps weniger: kleiner Segment-Schalter im Kartentitel (gleiche Höhe wie die Zahlenfelder) – liegt über der Klickfläche der Karte */
.ps-eco__stufen { --fov-spalten: 3; position: relative; z-index: 1; display: inline-grid; width: 114px; vertical-align: middle; }
.ps-eco__stufen .fov-wahl__text { height: 36px; padding: 0 6px; font-size: 17px; font-style: normal; }
.ps-eco__label { margin: 0; font: 700 11px/1.3 var(--f-text); letter-spacing: .1em; text-transform: uppercase; color: var(--c-grau-hell); }
.ps-eco__ziel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0; }
.ps-eco__wert { display: inline-flex; align-items: flex-start; font: italic 700 clamp(40px, 3.6cqw, 60px)/1 var(--f-head); color: var(--c-gelb); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ps-eco__einheit { margin-left: .06em; font-size: .5em; line-height: 1.1; }
.ps-eco__liter { font: italic 700 clamp(22px, 1.8cqw, 30px)/1 var(--f-head); color: var(--c-weiss); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ps-eco__liter small { font-size: .55em; color: var(--c-grau-hell); }
.ps-eco__delta { margin: 0; font: 400 14px/1.4 var(--f-text); color: var(--c-grau-hell); }
.ps-eco__delta b { color: var(--c-weiss); font-weight: 700; white-space: nowrap; }
.ps-eco__folge { margin: 0; padding-top: 10px; border-top: 1px solid #464646; font: 400 14px/1.4 var(--f-text); color: var(--c-grau-hell); }
.ps-eco__folge b { color: var(--c-weiss); }

/* „Lohnt sich Eco?“ – Ergebnis zum gewählten Ziel, Kante rot (lohnt nicht) oder grün (lohnt) */
.ps-eco__urteil {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 40px; margin-top: 12px;
  padding: clamp(16px, 1.5cqw, 28px) clamp(18px, 1.7cqw, 32px); background: var(--c-bg-2); border-left: 4px solid #ff6b5e;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%); /* abgeschrägte Ecke wie die Liga-Karten */
}
@container fov-ergebnis (min-width: 760px) { .ps-eco__urteil { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } }
.ps-eco__urteil--ja { border-left-color: var(--c-gruen); }
.ps-eco__urteil-kopf { display: grid; gap: 10px; min-width: 0; }
.ps-eco__urteil-titel { margin: 0; font: italic 400 clamp(20px, 1.4cqw, 28px)/1.2 var(--f-head); color: var(--c-weiss); }
.ps-eco__urteil-titel small { display: block; margin-top: 4px; font: 400 14px/1.4 var(--f-text); font-style: normal; color: var(--c-grau-hell); }
.ps-eco__frage { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; font: 400 16px/1.3 var(--f-text); color: var(--c-grau-hell); }
.ps-eco__urteil-wort { margin: 0; font: 700 12px/1.3 var(--f-text); letter-spacing: .1em; text-transform: uppercase; color: #ff6b5e; }
.ps-eco__urteil .ps-eco__wert { color: #ff6b5e; }
.ps-eco__urteil--ja .ps-eco__urteil-wort, .ps-eco__urteil--ja .ps-eco__wert { color: var(--c-gruen); }
.ps-eco__rechnung { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font: 400 14px/1.4 var(--f-text); color: var(--c-grau-hell); }
.ps-eco__rechnung li { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 6px; border-bottom: 1px solid #464646; }
.ps-eco__rechnung li:last-child { padding-bottom: 0; border-bottom: 0; }
.ps-eco__rechnung b { color: var(--c-weiss); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ps-eco__fuss { margin: 14px 0 0; max-width: 75ch; }

/* Eco-Plan: Zeile über den Kennzahlen, damit klar ist, womit gerechnet wird */
.ps-plan__quelle { margin: 0 0 clamp(14px, 1.2cqw, 24px); padding-top: clamp(20px, 1.8cqw, 36px); border-top: 1px solid #464646; font: 400 14px/1.45 var(--f-text); color: var(--c-grau-hell); }
.ps-plan__quelle b { color: var(--c-weiss); font-weight: 700; }

@media (max-width: 600px) {
  .ps-mess__zahl { font-size: 38px; }
  .ps-modus { width: 100%; }
  .ps-variante__karte { padding: 14px; }
  .ps-variante__wert dd { font-size: 18px; }
  .ps-satz__text { font-size: 11px; }
}
/* Vom Skript ein-/ausgeblendete Teile: hidden gilt immer, auch wo eine Regel display setzt */
.ps-rechner [hidden] { display: none !important; }

/* =========================================================
   IMPRESSUM & DATENSCHUTZ (gemessen 05.10. bei 2560 × 1271 und 1440 × 900)
   Inhalt kommt beim Veröffentlichen vom FOKALiS CMS: div.fk-recht > h1, section > h2 (+ h3, p, ul), p.fk-recht-stand
   ========================================================= */
.recht { background: var(--c-bg); container-type: inline-size; padding: calc(var(--header-h) + 5%) 0 5%; }
.recht__inhalt { margin: 0 auto; }
.recht--impressum .recht__inhalt { width: 50%; }
.recht--datenschutz .recht__inhalt { width: 80%; }
.recht .fk-recht { font: 400 16px/22.4px var(--f-text); color: var(--c-weiss); overflow-wrap: break-word; }
.recht .fk-recht h1 { margin: 0; font: italic 400 66px/1.3 var(--f-head); color: var(--c-gelb); }
.recht .fk-recht p, .recht .fk-recht ul { margin: 0 0 22.4px; }
.recht .fk-recht ul { padding-left: 1.3em; list-style: disc; }
.recht .fk-recht a { color: var(--c-gelb); text-decoration: underline; }
.recht .fk-recht h2, .recht .fk-recht h3 { margin: 0; font-family: var(--f-text); font-style: normal; font-weight: 700; color: var(--c-weiss); }
.recht .fk-recht-stand { font-size: 14px; color: var(--c-grau-hell); }
.recht .fk-recht > :last-child, .recht .fk-recht > section:last-child > :last-child { margin-bottom: 0; }
.recht .fk-recht-hervorgehoben { border-left-color: var(--c-gelb) !important; }

/* Impressum: Titel → Text 2,65 cqw, Hauptpunkte 18 px fett, Unterpunkte 16 px fett */
.recht--impressum .fk-recht h1 { margin-bottom: 2.65cqw; }
.recht--impressum .fk-recht h2 { margin-bottom: 22.4px; font-size: 18px; line-height: 25.2px; } /* Leerzeile wie Wix */
.recht--impressum .fk-recht h3 { font-size: 16px; line-height: 22.4px; }

/* Datenschutz: Abschnitte zweispaltig – links Überschrift F1 kursiv gelb mit weißer Linie, rechts Text */
.recht--datenschutz .fk-recht h1 { margin-bottom: 2.42cqw; font-size: 4.16cqw; }
.recht--datenschutz .fk-recht > p { margin-left: calc(34.26% - 16.5px + 48.5px); }
.recht--datenschutz .fk-recht section {
  display: grid; grid-template-columns: calc(34.26% - 16.5px) minmax(0, 1fr); column-gap: 48.5px; align-items: start;
  margin-bottom: 3.03cqw;
}
.recht--datenschutz .fk-recht section > * { grid-column: 2; }
.recht--datenschutz .fk-recht section > h2 {
  grid-column: 1; grid-row: 1 / span 999;
  padding-bottom: max(1.9px, calc(2.143cqw - 28.6px)); border-bottom: 1px solid var(--c-weiss);
  font: italic 400 22px/28.6px var(--f-head); color: var(--c-gelb);
}
.recht--datenschutz .fk-recht h3 { font-size: 20px; line-height: 28px; }
.recht--datenschutz .fk-recht section > :last-child { margin-bottom: 0; }

@media (max-width: 1000px) {
  .recht { padding: calc(var(--header-h) + 40px) 0 60px; }
  .recht--impressum .recht__inhalt, .recht--datenschutz .recht__inhalt { width: 90%; }
  .recht .fk-recht h1 { font-size: 40px; margin-bottom: 24px; }
  .recht--datenschutz .fk-recht > p { margin-left: 0; }
  .recht--datenschutz .fk-recht section { display: block; margin-bottom: 40px; }
  .recht--datenschutz .fk-recht section > h2 { margin-bottom: 20px; padding-bottom: 8px; }
}

/* =========================================================
   SHOP – (Gestaltung: Dennis, 05.10.) – JS in /js/shop.js
   Gilt für Übersicht UND Produktseite (gleicher Block in beiden Entwürfen).
   Idee „Boxengasse“: dunkle Seite, Produkte stehen auf hellen Studio-Kacheln
   (Weiß der Spreadconnect-Fotos wird per multiply zu ruhigem Hellgrau),
   kantige Ecken, Gelb nur für Aktion, Preis und aktiven Zustand.
   Maße wachsen über cqw/cqi mit (Container „shop“ bzw. „shop-karte“).
   ========================================================= */
.shop {
  --shop-rahmen: #464646; --shop-flaeche: #242424; --shop-flaeche-2: #2c2c2c; --shop-studio: #ebebeb;
  --shop-ecke: clamp(14px, 1.1cqw, 26px);
  position: relative; z-index: 1; background: var(--c-bg);
  padding: clamp(28px, 2.6cqw, 64px) 5% clamp(56px, 5cqw, 120px);
  container: shop / inline-size;
}

/* ---------- Gelber Knopf (HOWE-Standard) ---------- */
.shop-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 10px 28px;
  background: var(--c-gelb); color: var(--c-bg); border: 1px solid var(--c-gelb); border-radius: 0;
  font: 700 17px/1.2 var(--f-text); letter-spacing: .02em; text-align: center; cursor: pointer;
  transition: background-color var(--ease), color var(--ease), border-color var(--ease);
}
.shop-knopf:hover { background: transparent; color: var(--c-weiss); border-color: var(--c-gelb); }
.shop-knopf[aria-disabled="true"], .shop-knopf:disabled { background: var(--shop-flaeche-2); border-color: var(--shop-rahmen); color: var(--c-grau-hell); cursor: not-allowed; opacity: 1; }

/* ---------- Kopfzeile: Einleitung ---------- */
.shop-kopf {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px;
  margin-bottom: clamp(16px, 1.3cqw, 28px);
}
.shop-kopf__text { margin: 0; max-width: 62ch; font: 400 clamp(16px, .8cqw, 20px)/1.5 var(--f-text); color: var(--c-grau-hell); }
.shop-kopf__text b { color: var(--c-weiss); font-weight: 700; }

/* ---------- Leiste: Kategorien | Sortierung, Anmelden, Warenkorb ----------
   Klebt beim Scrollen oben. Falls der fixe Seiten-Header darüberfährt:
   top auf die Header-Höhe setzen, solange der Header sichtbar ist. */
.shop-leiste {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 12px 24px;
  margin: 0 -5.5cqw clamp(20px, 1.8cqw, 40px); padding: 0 5.5cqw;
  background: rgba(26, 26, 26, .97); border-bottom: 1px solid var(--shop-rahmen);
}
.shop-leiste__rechts { display: flex; align-items: center; gap: clamp(12px, 1.4cqw, 28px); flex: none; }

/* Kategorien: echte Radio-Knöpfe, sichtbar als Reiter mit gelbem Balken */
.shop-kategorien { display: flex; min-width: 0; margin: 0; padding: 0; border: 0; overflow-x: auto; scrollbar-width: none; }
.shop-kategorien::-webkit-scrollbar { display: none; }
.shop-kategorie { position: relative; flex: none; }
.shop-kategorie__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.shop-kategorie__text {
  display: flex; align-items: center; gap: 8px; height: 60px; padding: 0 clamp(12px, 1.1cqw, 22px);
  font: 700 clamp(14px, .72cqw, 18px)/1 var(--f-text); letter-spacing: .1em; text-transform: uppercase; color: var(--c-grau-hell); white-space: nowrap;
  box-shadow: inset 0 -3px 0 transparent;
  transition: color .3s ease, box-shadow .3s ease, background-color .3s ease;
}
.shop-kategorie:first-child .shop-kategorie__text { padding-left: 0; }
.shop-kategorie__zahl { font: italic 400 13px/1 var(--f-head); letter-spacing: 0; color: var(--c-grau-hell); }
.shop-kategorie:hover .shop-kategorie__text { color: var(--c-weiss); }
.shop-kategorie__input:checked + .shop-kategorie__text { color: var(--c-weiss); box-shadow: inset 0 -3px 0 var(--c-gelb); }
.shop-kategorie__input:checked + .shop-kategorie__text .shop-kategorie__zahl { color: var(--c-gelb); }
.shop-kategorie__input:focus-visible + .shop-kategorie__text { outline: 2px solid var(--c-gelb); outline-offset: -6px; }

/* Auswahlfelder (Sortierung + CMS-Variantenauswahl .fk-shop-auswahl) */
.shop-feld { display: flex; align-items: center; gap: 10px; }
.shop-feld__label { font: 400 14px/1 var(--f-text); color: var(--c-grau-hell); white-space: nowrap; }
.shop-auswahl, .shop .fk-shop-auswahl {
  height: 44px; padding: 0 40px 0 12px; border: 0; border-bottom: 1px solid var(--c-hell); border-radius: 0;
  background: var(--shop-flaeche-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23ffc525' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center;
  color: var(--c-weiss); font: 700 16px/1 var(--f-text); appearance: none; -webkit-appearance: none; cursor: pointer;
  transition: background-color .3s ease, border-color .3s ease;
}
.shop-auswahl:hover, .shop .fk-shop-auswahl:hover { background-color: #464646; }
.shop-auswahl:focus-visible, .shop .fk-shop-auswahl:focus-visible { border-bottom-color: var(--c-gelb); outline: 2px solid var(--c-gelb); outline-offset: 2px; }
.shop-auswahl option, .shop .fk-shop-auswahl option { background: var(--shop-flaeche-2); color: var(--c-weiss); font-weight: 400; }

/* Anmelden + Warenkorb */
.shop-konto {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font: 400 clamp(15px, .7cqw, 18px)/1 var(--f-text); color: var(--c-grau-hell); transition: color var(--ease);
}
.shop-konto:hover { color: var(--c-gelb); }
.shop-konto svg, .shop-warenkorb svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; }
.shop-warenkorb {
  position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--c-gelb); color: var(--c-gelb); font: 700 clamp(15px, .7cqw, 18px)/1 var(--f-text);
  transition: background-color var(--ease), color var(--ease);
}
.shop-warenkorb:hover { background: var(--c-gelb); color: var(--c-bg); }
/* Anzahl, die das CMS in den Knopf hängt: eckiges Gelb-Schild */
.shop-warenkorb .fk-shop-anzahl, .shop-warenkorb__anzahl {
  position: absolute; top: -9px; right: -9px; min-width: 22px; height: 22px; padding: 0 5px;
  border-radius: 0; background: var(--c-gelb); color: var(--c-bg); box-shadow: 0 0 0 2px var(--c-bg);
  font: italic 700 12px/22px var(--f-head); text-align: center;
}

/* ---------- Produktraster ---------- */
.shop-raster {
  display: grid; grid-template-columns: repeat(var(--shop-spalten, 2), minmax(0, 1fr));
  gap: clamp(28px, 2.4cqw, 56px) clamp(12px, 1.4cqw, 32px);
}
@container shop (min-width: 620px)  { .shop-raster { --shop-spalten: 3; } }
@container shop (min-width: 980px)  { .shop-raster { --shop-spalten: 4; } }
@container shop (min-width: 1700px) { .shop-raster { --shop-spalten: 5; } }
@container shop (min-width: 2100px) { .shop-raster { --shop-spalten: 6; } }

/* Kategorie-Filter ohne JS (Grundlage): Karten tragen data-kategorien="textilien" o. ä.
   Das JS kann zusätzlich hidden setzen, Anzahl zählen, URL (?kategorie=…) merken. */
.shop:has(#shop-kat-textilien:checked) .shop-raster > [data-kategorien]:not([data-kategorien~="textilien"]),
.shop:has(#shop-kat-home-living:checked) .shop-raster > [data-kategorien]:not([data-kategorien~="home-living"]) { display: none; }
.shop-leer { padding: 48px 0; font: 400 16px/1.5 var(--f-text); color: var(--c-grau-hell); text-align: center; }

/* ---------- Produktkarte ---------- */
.shop-karte { position: relative; display: flex; flex-direction: column; min-width: 0; container: shop-karte / inline-size; }
.shop-karte__bild {
  position: relative; aspect-ratio: 1; overflow: hidden; background: var(--shop-studio);
  clip-path: polygon(0 0, calc(100% - var(--shop-ecke)) 0, 100% var(--shop-ecke), 100% 100%, 0 100%);
}
.shop-karte__foto {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  mix-blend-mode: multiply; /* reines Weiß der Produktfotos → Studio-Grau */
  transition: opacity .5s ease, transform .8s cubic-bezier(.25,.46,.45,.94);
}
.shop-karte__foto--zweit { opacity: 0; }
.shop-karte__foto[src=""], .shop-karte__foto:not([src]) { display: none; }
.shop-karte:hover .shop-karte__foto { transform: scale(1.04); }
.shop-karte:hover .shop-karte__foto--zweit:not([src=""]) { opacity: 1; }
/* Erstbild gleichzeitig ausblenden – sonst verrechnet multiply beide Bilder zu einem Doppelbild */
.shop-karte:has(.shop-karte__foto--zweit[src]:not([src=""])):hover .shop-karte__foto:not(.shop-karte__foto--zweit) { opacity: 0; }
/* Ziellinie: gelber Strich wächst beim Hover unter dem Bild */
.shop-karte__bild::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 4px; background: var(--c-gelb);
  transform: scaleX(0); transform-origin: left; transition: transform .4s ease;
}
.shop-karte:hover .shop-karte__bild::after, .shop-karte:focus-within .shop-karte__bild::after { transform: scaleX(1); }
.shop-karte__marke {
  position: absolute; top: 10px; left: 10px; padding: 3px 8px; background: var(--c-bg); color: var(--c-gelb);
  font: 700 12px/1.3 var(--f-text); letter-spacing: .12em; text-transform: uppercase;
}
.shop-karte__marke:empty { display: none; }

.shop-karte__text {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "titel titel" "auszug auszug" "preis pfeil";
  grid-template-rows: auto auto 1fr; align-items: start; gap: 0 12px; padding-top: clamp(12px, 5cqi, 20px); flex: 1;
}
.shop-karte__titel { grid-area: titel; margin: 0; font: italic 400 clamp(15px, 5.6cqi, 24px)/1.25 var(--f-head); color: var(--c-weiss); transition: color var(--ease); }
.shop-karte__link::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* ganze Karte klickbar */
.shop-karte__link:focus-visible { outline: none; }
.shop-karte:has(.shop-karte__link:focus-visible) { outline: 2px solid var(--c-gelb); outline-offset: 6px; }
.shop-karte:hover .shop-karte__titel { color: var(--c-gelb); }
.shop-karte__auszug { grid-area: auszug; margin: 6px 0 0; font: 400 clamp(13px, 4.2cqi, 15px)/1.4 var(--f-text); color: var(--c-grau-hell); }
.shop-karte__auszug:empty { display: none; }
.shop-karte__preis {
  grid-area: preis; align-self: end; margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--shop-rahmen);
  font: italic 700 clamp(17px, 6.4cqi, 28px)/1 var(--f-head); color: var(--c-weiss); font-variant-numeric: tabular-nums;
}
.shop-karte__pfeil {
  grid-area: pfeil; align-self: end; display: grid; place-items: center; width: clamp(34px, 12cqi, 44px); aspect-ratio: 1;
  border: 1px solid var(--shop-rahmen); color: var(--c-grau-hell);
  transition: background-color var(--ease), border-color var(--ease), color var(--ease);
}
.shop-karte__pfeil svg { width: 45%; height: 45%; fill: none; stroke: currentColor; stroke-width: 2; }
.shop-karte:hover .shop-karte__pfeil { background: var(--c-gelb); border-color: var(--c-gelb); color: var(--c-bg); }

/* ---------- Handy & Tablet ---------- */
@media (max-width: 900px) {
  .shop-leiste { flex-wrap: wrap; row-gap: 0; }
  .shop-kategorien { order: 2; flex: 1 1 100%; border-top: 1px solid var(--shop-rahmen); }
  .shop-leiste__rechts { order: 1; flex: 1 1 100%; justify-content: space-between; padding: 10px 0; }
  .shop-kategorie__text { height: 50px; }
}
@media (max-width: 560px) {
  .shop-feld__label, .shop-warenkorb__text, .shop-konto__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .shop-auswahl { max-width: 170px; }
  .shop-kategorie__text { gap: 6px; padding: 0 9px; font-size: 13px; letter-spacing: .05em; }
  .shop-karte__pfeil { display: none; }
  .shop-karte__text { grid-template-areas: "titel" "auszug" "preis"; grid-template-columns: minmax(0, 1fr); }
  .shop-leiste { margin-inline: -5.5cqw; padding-inline: 5.5cqw; }
}
@media (prefers-reduced-motion: reduce) {
  .shop *, .shop *::before, .shop *::after { transition: none !important; }
}
/* ---------- Ende Übersicht (Produktseite: siehe zweiten Entwurf) ---------- */

/* =========================================================
   CMS-Warenkorb-Leiste (/_fokalis/shop.js) im HOWE-Look
   ========================================================= */
:root {
  --fk-schrift: "Jura", "Segoe UI", sans-serif;
  --fk-text: #ffffff;
  --fk-hintergrund: #242424;
  --fk-akzent: #ffc525;
  --fk-akzent-text: #1a1a1a;
  --fk-flaeche: #2c2c2c;
  --fk-linie: #464646;
  --fk-leise: #c2c2c2;
  --fk-radius: 0;
}

/* =========================================================
   SHOP – PRODUKTSEITE – (Gestaltung: Dennis, 05.10.) – JS in /js/shop.js
   (setzt den gemeinsamen SHOP-Block oben voraus)
   ========================================================= */
.shop--produkt { padding-top: 0; }
.shop-leiste--produkt { min-height: 60px; padding-inline: max(5.5cqw, calc(5.5cqw + (100cqw - 1800px) / 2)); } /* Inhalt bündig mit dem 1800-px-Block */

/* Brotkrumen */
.shop-pfad ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font: 400 clamp(14px, .68cqw, 17px)/1.3 var(--f-text); color: var(--c-grau-hell); }
.shop-pfad li { display: flex; align-items: center; gap: 10px; min-width: 0; }
.shop-pfad li + li::before { content: ""; width: 7px; height: 7px; border-top: 1.5px solid var(--c-gelb); border-right: 1.5px solid var(--c-gelb); transform: rotate(45deg); flex: none; }
.shop-pfad a { transition: color var(--ease); }
.shop-pfad a:hover { color: var(--c-gelb); }
.shop-pfad [aria-current="page"] { color: var(--c-weiss); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Oberer Bereich: Galerie | Kaufbox ---------- */
.shop-produkt, .shop-details, .shop-dazu { max-width: 1800px; margin-inline: auto; }
.shop-produkt {
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(340px, 34cqw, 640px);
  gap: clamp(32px, 4cqw, 96px); align-items: start;
}

/* Galerie: Daumen links, Bühne rechts. Bühne = waagerechter Scroll-Streifen mit Einrasten
   (wischen geht ohne JS; Daumen sind Sprunglinks, JS macht es weich + setzt aria-current). */
.shop-galerie { display: grid; grid-template-columns: clamp(64px, 4.6cqw, 104px) minmax(0, 1fr); gap: clamp(10px, .9cqw, 20px); min-width: 0; }
.shop-galerie__rahmen { position: relative; grid-column: 2; grid-row: 1; min-width: 0; }
.shop-galerie__buehne {
  display: flex; aspect-ratio: 1; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
  background: var(--shop-studio);
  clip-path: polygon(0 0, calc(100% - var(--shop-ecke) * 1.6) 0, 100% calc(var(--shop-ecke) * 1.6), 100% 100%, 0 100%);
}
.shop-galerie__buehne::-webkit-scrollbar { display: none; }
.shop-galerie__buehne:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--c-gelb); }
.shop-galerie__bild { position: relative; flex: 0 0 100%; margin: 0; scroll-snap-align: start; }
.shop-galerie__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
/* leere Bildfelder (bild_4 … bild_8 nicht gepflegt) verschwinden */
.shop-galerie__bild:has(img[src=""]), .shop-galerie__bild:has(img:not([src])),
.shop-galerie__daumen li:has(img[src=""]), .shop-galerie__daumen li:has(img:not([src])) { display: none; }

.shop-galerie__zaehler {
  position: absolute; left: 0; bottom: 0; margin: 0; padding: 8px 14px; background: var(--c-bg);
  font: italic 700 clamp(14px, .8cqw, 18px)/1 var(--f-head); color: var(--c-weiss); font-variant-numeric: tabular-nums;
}
.shop-galerie__zaehler span:first-child { color: var(--c-gelb); }
.shop-galerie__pfeile { position: absolute; right: 0; bottom: 0; display: flex; }
.shop-galerie__pfeil {
  display: grid; place-items: center; width: clamp(44px, 2.6cqw, 60px); aspect-ratio: 1;
  background: var(--c-bg); color: var(--c-weiss); transition: background-color var(--ease), color var(--ease);
}
.shop-galerie__pfeil + .shop-galerie__pfeil { border-left: 1px solid var(--shop-rahmen); }
.shop-galerie__pfeil svg { width: 40%; height: 40%; fill: none; stroke: currentColor; stroke-width: 2; }
.shop-galerie__pfeil:hover { background: var(--c-gelb); color: var(--c-bg); }
.shop-galerie__pfeil:disabled { color: var(--c-grau); background: var(--c-bg); cursor: default; }

.shop-galerie__daumen { grid-column: 1; grid-row: 1; display: grid; align-content: start; gap: clamp(8px, .7cqw, 14px); }
.shop-galerie__daumen a {
  position: relative; display: block; aspect-ratio: 1; background: var(--shop-studio); overflow: hidden;
  outline: 1px solid transparent; outline-offset: -1px; transition: outline-color .3s ease, opacity .3s ease; opacity: .55;
}
.shop-galerie__daumen img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.shop-galerie__daumen a:hover { opacity: 1; }
.shop-galerie__daumen a[aria-current="true"] { opacity: 1; outline: 3px solid var(--c-gelb); outline-offset: -3px; }
.shop-galerie__daumen a:focus-visible { opacity: 1; outline: 3px solid var(--c-weiss); outline-offset: -3px; }

/* Kaufbox */
.shop-produkt__info { position: sticky; top: 84px; display: grid; gap: 0; min-width: 0; }
.shop-produkt__marke { margin: 0 0 10px; font: 700 13px/1.2 var(--f-text); letter-spacing: .14em; text-transform: uppercase; color: var(--c-grau-hell); }
.shop-produkt__titel { margin: 0; font: italic 400 clamp(32px, 2.5cqw, 60px)/1.12 var(--f-head); color: var(--c-gelb); overflow-wrap: anywhere; }
.shop-produkt__auszug { margin: 14px 0 0; font: 400 clamp(16px, .8cqw, 19px)/1.5 var(--f-text); color: var(--c-grau-hell); }
.shop-produkt__auszug:empty { display: none; }
.shop-produkt__preisblock { margin-top: clamp(20px, 1.6cqw, 34px); padding-top: clamp(16px, 1.2cqw, 26px); border-top: 1px solid var(--shop-rahmen); }
.shop-produkt__preis { margin: 0; font: italic 700 clamp(34px, 2.4cqw, 56px)/1 var(--f-head); color: var(--c-weiss); font-variant-numeric: tabular-nums; }
.shop-produkt__preishinweis { margin: 8px 0 0; font: 400 clamp(14px, .62cqw, 16px)/1.45 var(--f-text); color: var(--c-grau-hell); }

/* Geschwister-Produkte in anderer Farbe (optional) */
  display: block; margin: 0 0 8px; font: 700 13px/1.2 var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: var(--c-grau-hell);
}
  display: grid; grid-template-columns: 44px auto; align-items: center; gap: 10px; padding: 4px 14px 4px 4px;
  border: 1px solid var(--shop-rahmen); font: 400 15px/1 var(--f-text); color: var(--c-grau-hell);
  transition: border-color var(--ease), color var(--ease);
}

/* Variantenauswahl: Das CMS setzt label.fk-shop-varianten > span + select.fk-shop-auswahl ein */
.shop-produkt__varianten { margin-top: clamp(20px, 1.5cqw, 30px); }
.shop .fk-shop-varianten { display: block; width: 100%; }
.shop .fk-shop-varianten > span { font-size: 13px; color: var(--c-grau-hell); }
.shop .fk-shop-auswahl { width: 100%; height: 52px; font-size: 17px; }
/* Merkmale (Farbe, Größe) untereinander: Das CMS stellt sie sonst nebeneinander und rückt das zweite um 0,75rem ein
   (shop.css) - bei voller Breite rutschte „Größe“ nach rechts über den Knopf hinaus (Matthias 13.10.2026). */
.shop .fk-shop-varianten[data-fk-merkmal-feld] + .fk-shop-varianten[data-fk-merkmal-feld] { margin: 14px 0 0; }
.shop .fk-shop-varianten > span:first-child { display: block; margin-bottom: 6px; }

/* Personalisierung (Name, Startnummer): gleiche Felder wie die Auswahl, aber ohne Pfeil - es wird getippt */
.shop .fk-shop-pers { display: grid; gap: 14px; max-width: none; margin: 14px 0 0; }
.shop .fk-shop-pers .fk-shop-varianten { margin: 0; }
.shop input.fk-shop-auswahl { padding-right: 12px; background-image: none; cursor: text; }
.shop input.fk-shop-auswahl::placeholder { color: var(--c-grau); }
.shop .fk-shop-pers-hinweis { margin: 0; font: 400 14px/1.45 var(--f-text); color: var(--c-grau-hell); }
.shop .fk-shop-varianten .fk-shop-feldfehler { margin-top: 6px; font: 400 14px/1.4 var(--f-text); color: #ff8a7a; }
.shop .fk-shop-knopf-leise {
  justify-self: start; min-height: 44px; padding: 0 18px; border: 1px solid var(--c-gelb); border-radius: 0; background: transparent;
  font: 400 15px/1 var(--f-text); color: var(--c-weiss); cursor: pointer; transition: background-color .3s ease, color .3s ease;
}
.shop .fk-shop-knopf-leise:hover, .shop .fk-shop-knopf-leise:focus-visible { background: var(--c-gelb); color: var(--c-bg); }
.shop .fk-shop-vorschau { color: var(--c-grau-hell); }
.shop .fk-shop-vorschau-bild { border-radius: 0; }

.shop-produkt__kaufen { width: 100%; min-height: 58px; margin-top: 16px; font-size: 18px; }
.shop-produkt__lieferzeit {
  display: flex; align-items: center; gap: 10px; margin: 14px 0 0; font: 400 clamp(15px, .7cqw, 17px)/1.4 var(--f-text); color: var(--c-weiss);
}
/* Symbol per ::before, weil das CMS den Text des Elements ersetzt */
.shop-produkt__lieferzeit::before {
  content: ""; flex: none; width: 22px; height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffc525' stroke-width='1.6'%3E%3Cpath d='M2 6h12v10H2zM14 9h4l3 3v4h-7'/%3E%3Ccircle cx='6' cy='17.5' r='1.8'/%3E%3Ccircle cx='17' cy='17.5' r='1.8'/%3E%3C/svg%3E") no-repeat center / contain;
}
.shop-produkt__vorteile { display: grid; gap: 8px; margin-top: clamp(18px, 1.4cqw, 28px); padding-top: clamp(16px, 1.2cqw, 24px); border-top: 1px solid var(--shop-rahmen); }
.shop-produkt__vorteil { display: flex; align-items: baseline; gap: 10px; font: 400 clamp(15px, .7cqw, 17px)/1.45 var(--f-text); color: var(--c-grau-hell); }
.shop-produkt__vorteil::before { content: ""; flex: none; width: 12px; height: 3px; background: var(--c-gelb); transform: translateY(-4px) skewX(-25deg); }

/* ---------- Beschreibung | Pflichtangaben ---------- */
.shop-details {
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(340px, 34cqw, 640px); gap: clamp(32px, 4cqw, 96px);
  margin-top: clamp(48px, 4.4cqw, 110px); padding-top: clamp(28px, 2.4cqw, 56px); border-top: 1px solid var(--shop-rahmen);
}
.shop-details__titel { margin: 0 0 clamp(14px, 1.1cqw, 24px); font: italic 400 clamp(24px, 1.7cqw, 40px)/1.2 var(--f-head); color: var(--c-gelb); }
.shop-details__titel--klein { font-size: clamp(18px, 1.1cqw, 26px); }
.shop-details__inhalt { max-width: 72ch; font: 400 clamp(16px, .8cqw, 19px)/1.6 var(--f-text); color: var(--c-hell); }
.shop-details__inhalt p { margin: 0 0 1em; }
.shop-details__inhalt h3 { margin: 1.6em 0 .6em; font: 700 14px/1.2 var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: var(--c-weiss); }
.shop-details__inhalt ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.shop-details__inhalt li { position: relative; padding-left: 22px; color: var(--c-grau-hell); }
.shop-details__inhalt li::before { content: ""; position: absolute; left: 0; top: .72em; width: 12px; height: 2px; background: var(--c-gelb); }
/* lange Beschreibungen in zwei Spalten, sobald Platz ist */
@container shop (min-width: 1500px) { .shop-details__inhalt { max-width: none; columns: 2; column-gap: 56px; } .shop-details__inhalt h3 { break-after: avoid; } .shop-details__inhalt ul { break-inside: avoid; } }

.shop-pflicht { padding: clamp(18px, 1.4cqw, 28px); background: var(--shop-flaeche); border-left: 4px solid var(--shop-rahmen); }
.shop-pflicht__zeile, .shop-pflicht__hinweis { margin: 0; font: 400 14px/1.55 var(--f-text); color: var(--c-grau-hell); overflow-wrap: anywhere; }
.shop-pflicht__hinweis { margin-top: 10px; }
.shop .fk-shop-hinweis { display: block; }
.shop-pflicht__hinweis .fk-shop-hinweis + .fk-shop-hinweis { margin-top: 4px; }

.shop-aufklapper { border-bottom: 1px solid var(--shop-rahmen); }
.shop-aufklapper:first-of-type { margin-top: clamp(20px, 1.6cqw, 32px); border-top: 1px solid var(--shop-rahmen); }
.shop-aufklapper summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; cursor: pointer; list-style: none;
  font: 700 15px/1.2 var(--f-text); letter-spacing: .08em; text-transform: uppercase; color: var(--c-weiss); transition: color var(--ease);
}
.shop-aufklapper summary::-webkit-details-marker { display: none; }
.shop-aufklapper summary::after {
  content: ""; flex: none; width: 14px; height: 14px;
  background: linear-gradient(var(--c-gelb), var(--c-gelb)) center / 14px 2px no-repeat, linear-gradient(var(--c-gelb), var(--c-gelb)) center / 2px 14px no-repeat;
  transition: transform .3s ease;
}
.shop-aufklapper[open] summary::after { transform: rotate(45deg); }
.shop-aufklapper summary:hover { color: var(--c-gelb); }
.shop-aufklapper p { margin: 0 0 18px; font: 400 15px/1.55 var(--f-text); color: var(--c-grau-hell); }
.shop-aufklapper a { color: var(--c-weiss); text-decoration: underline; text-underline-offset: 3px; }
.shop-aufklapper a:hover { color: var(--c-gelb); }

/* ---------- Passt dazu ---------- */
.shop-dazu { margin-top: clamp(48px, 4.4cqw, 110px); }
.shop-dazu .shop-raster { --shop-spalten: 4; }
@container shop (min-width: 2100px) { .shop-dazu .shop-raster { --shop-spalten: 5; } }

/* ---------- Tablet & Handy ---------- */
@media (max-width: 1000px) {
  .shop-produkt, .shop-details { grid-template-columns: minmax(0, 1fr); }
  .shop-produkt__info { position: static; }
  .shop-galerie { grid-template-columns: minmax(0, 1fr); }
  .shop-galerie__rahmen { grid-column: 1; }
  .shop-galerie__daumen { grid-column: 1; grid-row: 2; grid-auto-flow: column; grid-auto-columns: 64px; overflow-x: auto; scrollbar-width: none; }
  .shop-leiste--produkt .shop-pfad { flex: 1 1 auto; min-width: 0; }
  .shop-leiste--produkt { flex-wrap: nowrap; }
}
@media (max-width: 900px) {
  .shop-leiste--produkt .shop-leiste__rechts { order: 0; flex: none; padding: 0; }
}
@media (max-width: 620px) {
  .shop-galerie__pfeile { display: none; }
  .shop-pfad li:not(:last-child):not(:first-child) { display: none; } /* Handy: Shop › Produkt */
  /* Passt dazu: waagerecht wischen statt untereinander */
  .shop-dazu .shop-raster {
    grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 46%;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: -5vw; padding-inline: 5vw; scroll-padding-inline: 5vw;
  }
  .shop-dazu .shop-karte { scroll-snap-align: start; }
}
/* ---------- Ende Produktseite ---------- */
.sub-hero--shop .sub-hero__bild { opacity: .45; }
/* Mindestens Menüleiste + Platz für Kleine Zeile und Titel - sonst rutscht der Titel bei niedrigen Fenstern unter die Leiste (Matthias 13.10.) */
.sub-hero--produkt { height: max(22vh, calc(var(--header-h) + 150px)); }
.sub-hero--produkt .sub-hero__text { top: auto; bottom: 3vh; }
/* Shop-Leiste rückt unter den Seitenkopf, solange dieser eingeblendet ist (Header fährt ab 250 px weg/kommt zurück) */
.shop-leiste { transition: top .3s ease; }
body:has(.site-header:not(.is-hidden)) .shop-leiste { top: var(--header-h); }

/* =========================================================
   RENNKOMMISSION (gemessen 05.10. bei 2560 × 1271 und 1440 × 900) – erzeugt von tools/gen_reko.py
   Vollbild (steht, Footer scrollt darüber), Foto auf Serien-Verlauf, links Titel, rechts 5 Glas-Kacheln.
   Kachel-Klick öffnet das Formular der SIM REKO APP im ganzseitigen Overlay (JS: /js/reko.js).
   ========================================================= */
.reko {
  position: sticky; top: 0; z-index: 0; height: 100vh; min-height: 620px; overflow: hidden; container-type: inline-size;
  background: linear-gradient(0deg, var(--reko-farbe) 0%, #000 var(--reko-stopp));
}
.reko--lmu-a { --reko-farbe: #ff006e; --reko-stopp: 22.807%; --reko-deckkraft: .49; }
.reko--acc   { --reko-farbe: #ba0000; --reko-stopp: 31.93%;  --reko-deckkraft: .5; }
.reko--lmu-b { --reko-farbe: #ff006e; --reko-stopp: 19.298%; --reko-deckkraft: .5; }
.reko--endu  { --reko-farbe: #6692e7; --reko-stopp: 24.912%; --reko-deckkraft: .55; }
.reko__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: var(--reko-deckkraft); }
.reko__text {
  position: absolute; left: 5cqw; bottom: 7.52cqw; width: 40.77cqw;
  animation: tv-gleiten 1.2s cubic-bezier(.645,.045,.355,1) both;
}
.reko__kicker { margin: 0 0 0 .88cqw; font: 400 16px/1.4 var(--f-text); }
.reko__titel { margin: 0; font: italic 400 66px/1.3 var(--f-head); color: var(--c-gelb); overflow-wrap: break-word; }
.reko__keine-saison { margin: 12px 0 0 .88cqw; font: 400 16px/1.4 var(--f-text); color: var(--c-grau-hell); }
.reko__event { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Rechte Hälfte: 2 Spalten × 3 Reihen, Abstand fest 10 px, Rand 0,6 cqw unter der Kopfzeile */
.reko__kacheln {
  position: absolute; top: calc(var(--header-h) + .6cqw); right: .6cqw; bottom: .63cqw; left: calc(50cqw + .63cqw);
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr); gap: 10px;
}
/* Ruhezustand: Glas (20 px Unschärfe + Tönung je Kachel), Rahmen #F0F0F0, Ecken 20 px; Hover: Bild ein, Titel aus (0,4 s) */
.reko-kachel {
  position: relative; display: block; overflow: hidden; border: 1px solid var(--c-hell); border-radius: 20px; color: var(--c-weiss);
  /* Glas direkt auf der Kachel (nicht auf ::before): ein clip-path am Eltern-Element würde dem Glas sonst
     den Hintergrund nehmen – es „schnappt“ dann erst nach der Animation ein (Matthias, 05.10.) */
  background: var(--toenung); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  animation: reko-aufdecken 1.2s cubic-bezier(.645,.045,.355,1) var(--verzoegerung, .5s) backwards;
}
/* Aufdecken von links nach rechts über die ganze Hälfte: rechte Spalte etwas später */
.reko-kachel--stellungnahme, .reko-kachel--verwarnpunkte { --verzoegerung: .8s; }
.reko-kachel:hover, .reko-kachel:focus-visible { color: var(--c-weiss); }
.reko-kachel--strafantrag   { --toenung: rgba(30, 59, 99, .3); }
.reko-kachel--stellungnahme { --toenung: rgba(14, 88, 89, .3); }
.reko-kachel--strafen       { --toenung: rgba(95, 8, 8, .3); grid-column: 1 / -1; }
.reko-kachel--einspruch     { --toenung: rgba(31, 31, 31, .3); }
.reko-kachel--verwarnpunkte { --toenung: rgba(95, 97, 3, .3); }
.reko-kachel__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s ease-in-out; }
.reko-kachel:hover .reko-kachel__bild, .reko-kachel:focus-visible .reko-kachel__bild { opacity: 1; }
.reko-kachel__titel {
  position: absolute; z-index: 1; left: 1.58cqw; right: 1.02cqw; bottom: 1.58cqw; margin: 0;
  font: italic 400 1.514cqw/1.3 var(--f-head); transition: opacity .4s ease-in-out;
}
.reko-kachel:hover .reko-kachel__titel, .reko-kachel:focus-visible .reko-kachel__titel { opacity: 0; }
.reko-kachel:focus-visible { outline: 2px solid var(--c-gelb); outline-offset: 2px; }
/* Keine laufende Saison: Kacheln gesperrt */
.reko--ohne-saison .reko-kachel { cursor: not-allowed; opacity: .55; }
.reko--ohne-saison .reko-kachel:hover .reko-kachel__bild { opacity: 0; }
.reko--ohne-saison .reko-kachel:hover .reko-kachel__titel { opacity: 1; }
/* Wix „Shutters“: hier als gleichmäßiges Aufdecken von links; fill backwards – sonst blurrt das Glas nicht */
@keyframes reko-aufdecken { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .reko__text, .reko-kachel { animation: none; } }

/* Overlay mit dem Formular der SIM REKO APP (weiß, ganzseitig, X oben rechts) */
.reko-overlay {
  width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: #fff;
}
.reko-overlay::backdrop { background: rgba(0, 0, 0, .6); }
.reko-overlay__rahmen { display: block; width: 100%; height: 100%; border: 0; }
.reko-overlay__schliessen {
  position: fixed; top: 16px; right: 16px; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px;
  background: var(--c-bg); color: var(--c-weiss); transition: background-color .3s ease, color .3s ease;
}
.reko-overlay__schliessen:hover, .reko-overlay__schliessen:focus-visible { background: var(--c-gelb); color: var(--c-bg); }
.reko-overlay__schliessen svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; }
html:has(.reko-overlay[open]) { overflow: hidden; }

@media (max-width: 1000px) {
  .reko { position: relative; height: auto; min-height: 0; padding: calc(var(--header-h) + 32px) 5vw 48px; }
  .reko__text { position: static; width: auto; margin-bottom: 28px; }
  .reko__titel { font-size: 44px; }
  .reko__kacheln { position: static; grid-template-rows: none; grid-auto-rows: 42vw; }
  .reko-kachel__titel { font-size: 20px; left: 16px; right: 12px; bottom: 14px; }
}
@media (max-width: 560px) { .reko__kacheln { grid-template-columns: 1fr; grid-auto-rows: 52vw; } }

/* =========================================================
   ÜBER UNS (gemessen 05.10. bei 2560 × 1271 und 1440 × 900)
   Zwei Hälften als Links, Höhe 23,35 % der Breite, gelbe 1-px-Linien oben/unten/Mitte.
   Ruhezustand: dunkle Fläche + Titel; Hover: Bild ein, Titel aus (0,3 s). Einflug wie Wix (rechts 0,5 s später).
   ========================================================= */
.sub-hero--ueber-uns .sub-hero__bild { opacity: .56; }
.uu-wege {
  position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; aspect-ratio: 100 / 23.35; min-height: 260px;
  background: var(--c-bg); border-block: 1px solid var(--c-gelb); container-type: inline-size;
}
.uu-weg { position: relative; display: block; overflow: hidden; color: var(--c-gelb); animation: tv-gleiten 1.2s cubic-bezier(.645,.045,.355,1) both; }
.uu-weg:hover, .uu-weg:focus-visible { color: var(--c-gelb); }
.uu-weg--team { background: #1f1f1f; }
.uu-weg--partner { background: #000; border-left: 1px solid var(--c-gelb); animation-delay: .5s; }
.uu-weg__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s ease-in-out; }
.uu-weg:hover .uu-weg__bild, .uu-weg:focus-visible .uu-weg__bild { opacity: var(--bild-deckkraft, 1); }
.uu-weg--partner { --bild-deckkraft: .6; }
.uu-weg__titel {
  position: absolute; left: 3.12cqw; bottom: 3.155cqw; margin: 0; white-space: nowrap;
  font: italic 400 2.902cqw/1.3 var(--f-head); transition: opacity .3s ease-in-out;
}
.uu-weg--partner .uu-weg__titel { left: 3.19cqw; }
.uu-weg:hover .uu-weg__titel, .uu-weg:focus-visible .uu-weg__titel { opacity: 0; }
.uu-weg:focus-visible { outline: 2px solid var(--c-gelb); outline-offset: -4px; }
@media (prefers-reduced-motion: reduce) { .uu-weg { animation: none; } }
@media (max-width: 750px) {
  .uu-wege { grid-template-columns: 1fr; aspect-ratio: auto; }
  .uu-weg { height: 46vw; }
  .uu-weg--partner { border-left: 0; border-top: 1px solid var(--c-gelb); }
  .uu-weg__titel { font-size: 30px; left: 20px; bottom: 18px; white-space: normal; }
}

/* =========================================================
   UNSER TEAM – (Gestaltung: Dennis, 05.10.)
   (Gestaltung: Dennis, 05.10.)
   Idee „Aufstellung der Orga“: jede Gruppe ist eine Position mit
   Startnummer (01–05) und gelbem Startstrich auf der Trennlinie.
   Links der Gruppenkopf, rechts die Personen-Karten im Raster.
   Fotos einheitlich schwarz-weiß, Farbe bei Hover/Fokus.
   Ohne Foto: Initialen-Kachel. Maße wachsen über cqw (Container „team“).
   Anker fürs Mitglieder-Modul: data-team-gruppe, data-team-person,
   data-team-feld="foto|name|dmsb|funktion|kontakt", data-team-anzahl.
   ========================================================= */
.sub-hero--team .sub-hero__bild { opacity: .5; }

.team {
  --team-rahmen: #464646; --team-flaeche: #242424; --team-flaeche-2: #2c2c2c;
  --team-ecke: clamp(14px, 1cqw, 26px);
  position: relative; z-index: 1; background: var(--c-bg);
  padding: clamp(32px, 3cqw, 72px) 5% clamp(56px, 5cqw, 120px);
  container: team / inline-size;
}

.team__innen { max-width: 1760px; margin-inline: auto; }

/* ---------- Einleitung + Sprungleiste ---------- */
.team-intro {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px 48px;
  margin-bottom: clamp(32px, 3.2cqw, 72px);
}
.team-intro__titel { margin: 0 0 .35em; font: italic 400 clamp(30px, 2.6cqw, 56px)/1.15 var(--f-head); color: var(--c-weiss); }
.team-intro__text { margin: 0; max-width: 58ch; font: 400 clamp(16px, .85cqw, 20px)/1.55 var(--f-text); color: var(--c-grau-hell); }

.team-sprung { display: flex; flex-wrap: wrap; gap: 8px; }
.team-sprung__link {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--team-rahmen); background: var(--team-flaeche);
  font: 700 clamp(13px, .68cqw, 16px)/1 var(--f-text); letter-spacing: .08em; text-transform: uppercase; color: var(--c-grau-hell);
  transition: color var(--ease), border-color var(--ease);
}
.team-sprung__link:hover { color: var(--c-weiss); border-color: var(--c-gelb); }
.team-sprung__zahl { font: italic 400 13px/1 var(--f-head); letter-spacing: 0; color: var(--c-gelb); }

/* ---------- Gruppen auf einem gemeinsamen Spaltenraster ----------
   Alle Karten der Seite sind gleich breit (eine Spalte).
   Gruppen mit 1–2 Personen belegen nur so viele Spalten und stehen
   nebeneinander; ab 3 Personen bekommt die Gruppe eine eigene Zeile
   (ab 980 px mit dem Gruppenkopf links). Das passiert automatisch
   über :has() – das Modul muss nur die Karten ausgeben. */
.team-gruppen {
  --spalten: 2; --team-gap: clamp(10px, 1.1cqw, 24px);
  display: grid; grid-template-columns: repeat(var(--spalten), minmax(0, 1fr));
  column-gap: var(--team-gap); row-gap: clamp(40px, 3.6cqw, 88px);
}
@container team (min-width: 600px) { .team-gruppen { --spalten: 3; } }
@container team (min-width: 980px) { .team-gruppen { --spalten: 5; } }

.team-gruppe {
  position: relative; grid-column: 1 / -1; grid-row: span 2;
  display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; row-gap: clamp(16px, 1.4cqw, 30px);
  padding-top: clamp(20px, 1.6cqw, 36px); border-top: 1px solid var(--team-rahmen);
  scroll-margin-top: calc(var(--header-h) + 15px);
}
/* Gelber Startstrich auf der Linie */
.team-gruppe::before {
  content: ""; position: absolute; top: -2px; left: 0; width: clamp(48px, 3.5cqw, 88px); height: 3px; background: var(--c-gelb);
}
.team-gruppe__kopf { grid-column: 1 / -1; min-width: 0; }

/* Handy: jede Gruppe steht allein in ihrer Zeile – keine gemeinsamen Zeilen (subgrid) nötig. WebKit (iPhone) maß die
   Zeile einer Gruppe mit nur einer Karte sonst viel zu hoch (Armin: 515 statt 377 px → 191 px Lücke, 11.10.2026). */
@container team (max-width: 599.98px) {
  .team-gruppe { grid-row: auto; grid-template-rows: auto; }
}
@container team (min-width: 600px) {
  .team-gruppe:not(:has([data-team-person]:nth-of-type(2))) { grid-column: span 1; }
  .team-gruppe:has([data-team-person]:nth-of-type(2)):not(:has([data-team-person]:nth-of-type(3))) { grid-column: span 2; }
}
@container team (min-width: 980px) {
  .team-gruppe:has([data-team-person]:nth-of-type(3)) > .team-gruppe__kopf { grid-column: 1; grid-row: 1 / span 2; position: sticky; top: calc(var(--header-h) + 15px); transition: top .3s ease; align-self: start; padding-right: 8px; }
  .team-gruppe:has([data-team-person]:nth-of-type(3)) > .team-raster { grid-column: 2 / -1; grid-row: 1 / span 2; }
  .team-gruppe:has([data-team-person]:nth-of-type(3)) .team-gruppe__titel { font-size: clamp(22px, 1.55cqw, 30px); }
}

.team-gruppe__nummer {
  margin: 0 0 6px; font: italic 700 clamp(48px, 4.2cqw, 104px)/.9 var(--f-head);
  color: transparent; -webkit-text-stroke: 1px var(--c-grau); letter-spacing: -.01em;
}
.team-gruppe__titel { margin: 0 0 10px; font: italic 400 clamp(26px, 1.9cqw, 40px)/1.15 var(--f-head); color: var(--c-gelb); }
.team-gruppe__text { margin: 0 0 14px; max-width: 40ch; font: 400 clamp(15px, .8cqw, 19px)/1.5 var(--f-text); color: var(--c-grau-hell); }
.team-gruppe__anzahl {
  margin: 0; font: 700 clamp(12px, .62cqw, 15px)/1 var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: var(--c-grau-hell);
}
.team-gruppe__anzahl [data-team-anzahl] { color: var(--c-weiss); }
/* „Komm ins Team“ (Rennkommission): unter Text und Anzahl, Button der Seite in kompakter Größe */
.team-gruppe__knopf { margin-top: 22px; min-height: 46px; padding: 8px 24px; font-size: 16px; }

/* ---------- Raster der Karten (übernimmt die Spalten der Seite) ---------- */
.team-raster {
  grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-content: start;
  row-gap: var(--team-gap);
}

/* ---------- Personen-Karte (wiederverwendbar) ---------- */
.team-karte {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--team-flaeche);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--team-ecke)), calc(100% - var(--team-ecke)) 100%, 0 100%);
}
.team-karte__bild {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--team-flaeche-2);
}
/* Gelbe Linie unter dem Bild – fährt bei Hover/Fokus ein */
.team-karte__bild::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--c-gelb);
  transform: scaleX(0); transform-origin: left; transition: transform .35s ease;
}
.team-karte__foto {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%;
  filter: grayscale(1) contrast(1.05) brightness(.9);
  transform: scale(1); will-change: transform, filter; backface-visibility: hidden; /* eigene Ebene von Anfang an – kein Sprung beim Hover */
  transition: filter .45s ease, transform .6s ease;
}
/* Logos (Media): ganz zeigen, nicht beschneiden */
.team-karte__foto--logo,
.team-karte__foto[data-team-logo] { object-fit: contain; padding: 18%; filter: grayscale(1) contrast(1) brightness(1.5); }

/* Initialen statt Foto */
.team-karte__initialen {
  display: grid; place-items: center; width: 100%; height: 100%;
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(255,255,255,.025) 14px 15px),
    linear-gradient(180deg, #2c2c2c, #222);
  font: italic 700 clamp(40px, 3.2cqw, 80px)/1 var(--f-head); letter-spacing: .02em;
  color: var(--c-grau); user-select: none;
  transition: color .45s ease;
}

.team-karte:hover .team-karte__foto,
.team-karte:focus-within .team-karte__foto { filter: grayscale(0) contrast(1) brightness(1); transform: scale(1.03); } /* gleiche Filter-Liste wie im Ruhezustand → weicher Übergang */
.team-karte:hover .team-karte__initialen,
.team-karte:focus-within .team-karte__initialen { color: var(--c-gelb); }
.team-karte:hover .team-karte__bild::after,
.team-karte:focus-within .team-karte__bild::after { transform: scaleX(1); }

/* DMSB-Abzeichen: liegt unten links auf dem Bild - oben deckte es Gesichter ab (Matthias 09.10.) */
.team-karte__dmsb {
  position: absolute; bottom: 10px; left: 10px; z-index: 1; margin: 0;
  display: inline-flex; align-items: center; gap: 7px; max-width: calc(100% - 20px);
  padding: 6px 9px 6px 7px;
  background: rgba(26, 26, 26, .92); border: 1px solid var(--c-gelb);
  font: 400 clamp(12px, .55cqw, 13px)/1.1 var(--f-text); letter-spacing: .04em; color: var(--c-weiss);
}
.team-karte__dmsb svg { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--c-gelb); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.team-karte__dmsb b { font-weight: 700; color: var(--c-gelb); letter-spacing: .1em; }

.team-karte__text {
  display: flex; flex-direction: column; flex: 1; gap: 6px;
  padding: clamp(12px, .9cqw, 20px) clamp(12px, .9cqw, 20px) clamp(14px, 1cqw, 22px);
}
.team-karte__name {
  margin: 0; font: italic 400 clamp(17px, 1cqw, 24px)/1.2 var(--f-head); color: var(--c-weiss);
  overflow-wrap: anywhere; hyphens: auto;
}
.team-karte__funktion { margin: 0; font: 400 clamp(14px, .74cqw, 17px)/1.4 var(--f-text); color: var(--c-grau-hell); }

.team-karte__kontakt {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  margin-top: auto; padding-top: 10px; min-height: 44px;
  font: 700 clamp(13px, .7cqw, 16px)/1.25 var(--f-text); color: var(--c-weiss);
  text-decoration: underline; text-decoration-color: var(--c-gelb); text-underline-offset: 4px; text-decoration-thickness: 1px;
  transition: color var(--ease);
}
.team-karte__kontakt:hover { color: var(--c-gelb); }
.team-karte__kontakt svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--c-gelb); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.team-karte__kontakt:focus-visible { outline-offset: 0; }

/* Leere Gruppe (Modul findet niemanden) – ganz ausblenden */
.team-gruppe:not(:has([data-team-person])) { display: none; }

@media (prefers-reduced-motion: reduce) {
  .team-karte__foto, .team-karte__bild::after, .team-karte__initialen { transition: none; }
  .team-karte:hover .team-karte__foto, .team-karte:focus-within .team-karte__foto { transform: none; }
}

/* ---------- Handy ---------- */
@container team (max-width: 560px) {
  .team-intro { margin-bottom: 28px; }
  .team-sprung { flex-wrap: nowrap; overflow-x: auto; margin-inline: -5.5cqw; padding-inline: 5.5cqw; scrollbar-width: none; }
  .team-sprung::-webkit-scrollbar { display: none; }
  .team-sprung__link { flex: none; }
  .team-gruppe__kopf { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: end; }
  .team-gruppe__nummer { margin: 0; font-size: 44px; }
  .team-gruppe__titel { margin: 0; font-size: 26px; }
  .team-gruppe__text, .team-gruppe__anzahl, .team-gruppe__knopf { grid-column: 1 / -1; }
  .team-gruppe__knopf { justify-self: start; margin-top: 18px; }
  .team-gruppe__text { margin-top: 12px; }
  .team-karte { --team-ecke: 12px; }
  .team-karte__dmsb { bottom: 6px; left: 6px; padding: 4px 6px; gap: 5px; }
  .team-karte__dmsb-zusatz { display: none; }
  .team-karte__initialen { font-size: 40px; }
}
/* ====================== Ende UNSER TEAM ====================== */
/* Gruppenkopf rückt nach oben, wenn der Seitenkopf beim Runterscrollen verschwindet */
body:has(.site-header.is-hidden) .team-gruppe:has([data-team-person]:nth-of-type(3)) > .team-gruppe__kopf { top: 15px; }
/* Hinweis unter Discord-Kontakten (Kanäle nur für Mitglieder des Servers) */
.team-karte__hinweis { margin: 2px 0 0; font: 400 12px/1.4 var(--f-text); color: var(--c-grau-hell); }
.team-karte__hinweis a { color: var(--c-weiss); text-decoration: underline; text-decoration-color: var(--c-gelb); text-underline-offset: 3px; }
.team-karte__hinweis a:hover { color: var(--c-gelb); }
.sub-hero--team .sub-hero__bild { opacity: .5; }

/* =========================================================
   SUCHE (/suche) – eigene Suche ohne fremde Dienste (js/suche.js)
   ========================================================= */
.sub-hero--suche .sub-hero__bild { opacity: .45; }
.suche {
  position: relative; z-index: 1; min-height: 65vh;
  padding: 70px 5% 110px; background: var(--c-bg);
}
.suche__form, .suche__status, .suche__treffer { max-width: 980px; }
.suche__label { display: block; margin-bottom: 18px; font: italic 400 28px/1.3 var(--f-head); }
.suche__feld {
  display: flex; align-items: center; gap: 16px;
  border-bottom: 2px solid var(--c-gelb); padding-bottom: 10px;
}
.suche__feld svg { flex: none; width: 30px; height: 30px; color: var(--c-gelb); }
.suche__feld input {
  flex: 1; min-width: 0; padding: 6px 0; border: 0; border-radius: 0; background: transparent;
  font: 400 24px/1.3 var(--f-text); color: var(--c-weiss);
}
.suche__feld input::placeholder { color: #8c8c8c; opacity: 1; }
.suche__feld input:focus { outline: none; }
.suche__feld:focus-within { border-bottom-color: var(--c-weiss); }
.suche__feld input::-webkit-search-cancel-button { filter: invert(1); cursor: pointer; }
.suche__status { min-height: 1.4em; margin: 16px 0 26px; font: 400 15px/1.4 var(--f-text); color: var(--c-grau-hell); }
.suche__treffer { margin: 0; padding: 0; list-style: none; }
.suche-treffer { border-top: 1px solid rgba(255, 255, 255, .12); }
.suche-treffer:last-child { border-bottom: 1px solid rgba(255, 255, 255, .12); }
.suche-treffer__link { display: grid; gap: 6px; padding: 22px 0; color: var(--c-weiss); }
.suche-treffer__art { font: 700 12px/1.3 var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: var(--c-gelb); }
.suche-treffer__titel { font: italic 400 26px/1.25 var(--f-head); transition: color .3s; }
.suche-treffer__text { font: 400 16px/1.5 var(--f-text); color: var(--c-grau-hell); }
.suche-treffer__pfad { font: 400 13px/1.4 var(--f-text); color: #9a9a9a; }
.suche-treffer__link:hover, .suche-treffer__link:focus-visible { color: var(--c-weiss); }
.suche-treffer__link:hover .suche-treffer__titel, .suche-treffer__link:focus-visible .suche-treffer__titel { color: var(--c-gelb); }
.suche-treffer mark { padding: 0 .1em; background: var(--c-gelb); color: var(--c-bg); }
@media (max-width: 750px) {
  .suche { padding: 44px 5% 80px; }
  .suche__label { font-size: 22px; }
  .suche__feld input { font-size: 19px; }
  .suche__feld svg { width: 24px; height: 24px; }
  .suche-treffer__titel { font-size: 21px; }
  .suche-treffer__text { font-size: 15px; }
}
/* ====================== Ende SUCHE ====================== */

/* =========================================================
   DRIVERS LICENSE (/pricing-plans/drivers_licenses)
   Gemessen am Wix-Original bei 1440 px: Raster 997 px, Karten 300 px (Abstand 33 px),
   Rahmen 0,67 px weiß 20 %, Radius 20 px, Bild 300×200, Innenabstand 30 px,
   Titel 20/30, Preis 70/84 mit € 18 px hochgestellt, Text 14/20, „Gültig“ 12 px #c2c2c2,
   Knopf 49 px hoch, Rand 0,67 px gelb, Radius 100 px, Leistungen 14/21 mit Häkchen 21 px gelb.
   Hervorgehobene Karte (LMU): Kopf auf rgba(186,0,0,.1).
   ========================================================= */
.lizenzen {
  margin-top: var(--header-h);
  width: min(100% - 2 * var(--gutter), max(997px, 69.25vw), 1500px); margin-inline: auto;
  padding: clamp(48px, 7vw, 110px) 0 clamp(48px, 5vw, 80px);
  text-align: center;
}
.lizenzen__titel { margin: 0 0 22px; font: italic 400 clamp(44px, 4.6vw, 80px)/1.3 var(--f-head); color: var(--c-gelb); }
.lizenzen__intro { max-width: 1100px; margin: 0 auto clamp(48px, 5.4vw, 90px); font-size: 16px; line-height: 1.4; }
.lizenzen__raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.3vw, 48px); align-items: stretch; margin: 0; padding: 0 15px; list-style: none; }
.lizenz-karte { display: flex; flex-direction: column; overflow: hidden; border: .667px solid rgba(255,255,255,.2); border-radius: 20px; text-align: center; }
.lizenz-karte__bild { display: block; width: 100%; height: clamp(180px, 14vw, 220px); object-fit: cover; } /* Wix: Streifen ~200 px, wächst nicht mit der Kartenbreite */
.lizenz-karte__kopf { display: flex; flex-direction: column; align-items: center; padding: 30px; }
.lizenz-karte--hervor .lizenz-karte__kopf { background: rgba(186,0,0,.1); }
.lizenz-karte__titel { margin: 0 0 12px; font: 400 20px/30px var(--f-text); color: var(--c-weiss); }
.lizenz-karte__preis { display: flex; align-items: flex-start; justify-content: center; gap: 2px; margin: 0 0 12px; font: 400 70px/84px var(--f-text); }
.lizenz-karte__waehrung { font-size: 18px; line-height: 18px; }
.lizenz-karte__text { margin: 0 0 12px; font-size: 14px; line-height: 20px; }
.lizenz-karte__dauer { margin: 0 0 24px; font-size: 12px; line-height: 12px; color: #c2c2c2; }
.lizenz-karte__knopf {
  display: inline-flex; align-items: center; justify-content: center; width: min(100%, 310px); min-height: 49px; padding: 0 20px;
  border: .667px solid var(--c-gelb); border-radius: 100px;
  font: 400 14px/1.4 var(--f-text); color: var(--c-gelb); text-decoration: none;
  transition: background-color var(--ease), color var(--ease);
}
.lizenz-karte__knopf:hover, .lizenz-karte__knopf:focus-visible { background: var(--c-gelb); color: var(--c-bg); }
.lizenz-karte__merkmale { flex: 1; margin: 0; padding: 30px 30px 60px; border-top: .667px solid rgba(255,255,255,.2); list-style: none; text-align: left; }
.lizenz-karte__merkmale li { position: relative; margin: 0; padding: 10.5px 0 10.5px 31px; font-size: 14px; line-height: 21px; }
.lizenz-karte__merkmale li:first-child { padding-top: 0; }
.lizenz-karte__merkmale li:last-child { padding-bottom: 0; }
.lizenz-karte__merkmale li::before { /* Häkchen im Kreis wie im Original (Wix-Symbol), gelb */
  content: ""; position: absolute; left: 0; top: 10.5px; width: 21px; height: 21px; background: var(--c-gelb);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M11.5 3C16.187 3 20 6.813 20 11.5C20 16.187 16.187 20 11.5 20C6.813 20 3 16.187 3 11.5C3 6.813 6.813 3 11.5 3ZM11.5 4C7.364 4 4 7.364 4 11.5C4 15.636 7.364 19 11.5 19C15.636 19 19 15.636 19 11.5C19 7.364 15.636 4 11.5 4ZM14.3012 9.0425L15.0082 9.7505L10.4482 14.3105L7.9912 11.8535L8.6982 11.1465L10.4482 12.8965L14.3012 9.0425Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M11.5 3C16.187 3 20 6.813 20 11.5C20 16.187 16.187 20 11.5 20C6.813 20 3 16.187 3 11.5C3 6.813 6.813 3 11.5 3ZM11.5 4C7.364 4 4 7.364 4 11.5C4 15.636 7.364 19 11.5 19C15.636 19 19 15.636 19 11.5C19 7.364 15.636 4 11.5 4ZM14.3012 9.0425L15.0082 9.7505L10.4482 14.3105L7.9912 11.8535L8.6982 11.1465L10.4482 12.8965L14.3012 9.0425Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.lizenz-karte__merkmale li:first-child::before { top: 0; }
.lizenzen__hinweis { margin: clamp(28px, 2.5vw, 40px) auto 0; font-size: 14px; line-height: 1.4; }
@media (max-width: 1000px) {
  .lizenzen__raster { grid-template-columns: minmax(0, 1fr); max-width: 460px; margin-inline: auto; padding: 0; }
}
/* ====================== Ende DRIVERS LICENSE ====================== */

/* ====================== FEHLERSEITE 404 ======================
   Gemessen 10.10. am Wix-Original bei 1440 × 900 und 2560 × 1271: Bühne bildschirmhoch, Bild mit 60 % Schwarz
   darüber; Inhalt links bei 6,67 vw, oben bei 62,8 vh − 441 px (mind. unter der Kopfleiste); „404“ 319,75 px,
   5 vw vom Rand; Text 47 vw breit; Knopf 717 × 74 px, 1 px Gelb, #1A1A1A, Jura 18 px.
   Am Handy (Wix bricht dort die Zahl Ziffer für Ziffer um) ein eigenes, gestapeltes Layout. */
.fehler { position: relative; height: 100vh; min-height: 720px; overflow: hidden; background: #000; }
.fehler__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fehler::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .6); pointer-events: none; }
.fehler__inhalt {
  position: absolute; z-index: 1; left: 6.7vw; right: 0;
  top: max(calc(var(--header-h) - 1px), calc(62.8vh - 441px)); height: 600px;
}
.fehler__kopf { position: absolute; top: 0; left: 0; margin: 0; font: italic 400 36px/46.8px var(--f-head); color: var(--c-weiss); }
.fehler__zahl {
  position: absolute; top: 0; left: -1.67vw; margin: 0;
  font: italic 400 319.746px/415.67px var(--f-head); color: var(--c-gelb); white-space: nowrap;
}
.fehler__text {
  position: absolute; top: calc(424px + 1.16vw); left: 0; width: 47vw; margin: 0;
  font: italic 400 24px/31.2px var(--f-head); color: var(--c-weiss);
}
.fehler__knopf {
  position: absolute; top: 526px; left: 0; display: grid; place-items: center; width: 717px; height: 74px;
  border: 1px solid var(--c-gelb); background: #1a1a1a; color: var(--c-weiss);
  font: 400 18px/25.2px var(--f-text); text-decoration: none; transition: color var(--ease), background-color var(--ease);
}
.fehler__knopf:hover, .fehler__knopf:focus-visible { background: var(--c-gelb); color: #1a1a1a; }
@media (max-width: 1000px) {
  .fehler { height: auto; min-height: 100svh; }
  .fehler__inhalt {
    position: relative; left: auto; right: auto; top: auto; height: auto;
    display: flex; flex-direction: column; align-items: flex-start;
    padding: calc(var(--header-h) + 32px) var(--gutter) 48px;
  }
  .fehler__kopf, .fehler__zahl, .fehler__text, .fehler__knopf { position: static; }
  .fehler__kopf { font-size: 26px; line-height: 1.3; }
  .fehler__zahl { left: auto; margin: 4px 0 8px; font-size: min(38vw, 260px); line-height: 1.1; }
  .fehler__text { width: auto; max-width: 560px; font-size: 20px; line-height: 1.3; }
  .fehler__knopf { width: 100%; max-width: 717px; height: 64px; margin-top: 32px; }
}
/* ====================== Ende FEHLERSEITE ====================== */

/* =========================================================
   ANKÜNDIGUNGS-OVERLAY – ab hier zur Übernahme in style.css
   (Gestaltung: Dennis, 12.10.)
   Idee „Boxenfunk“: eine einzelne Karte aus derselben Familie wie
   Team- und Mediadaten-Kacheln (abgeschrägte Ecke unten rechts,
   gelber Startstrich auf der Trennlinie unter dem Bild).
   Jeder Teil ist optional – das CMS lässt leere Teile einfach weg,
   das Layout richtet sich per :has() selbst danach.
   Format des Bildes setzt das CMS: data-ov-format="quer" | "hoch"
   (quadratisch + hochkant = „hoch“). Optional --ov-verhaeltnis (z. B. 4 / 5).
   ========================================================= */
.ov {
  --ov-rahmen: #464646; --ov-flaeche: #242424; --ov-ecke: 22px; --ov-pad: clamp(20px, 3vw, 44px);
  --ov-breite: 760px;
  width: min(var(--ov-breite), calc(100vw - 24px)); max-width: none;
  max-height: min(85vh, 85dvh); /* dvh: iPhone-Leisten werden berücksichtigt */
  padding: 0; border: 0; background: transparent; color: var(--c-weiss); overflow: visible;
}
.ov:not(:has(.ov-bild)) { --ov-breite: 620px; }
.ov::backdrop { background: rgba(8, 8, 8, .82); } /* bewusst ohne Blur – ruckelt am iPhone */

/* Seite dahinter nicht mitscrollen */
html:has(.ov[open]) { overflow: hidden; }

/* Karte = Scroll-Bereich (falls am Handy zu hoch). Der X-Knopf liegt außerhalb und bleibt stehen. */
.ov-karte {
  display: flex; flex-direction: column; max-height: inherit; overflow-y: auto; overscroll-behavior: contain;
  background: var(--ov-flaeche);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--ov-ecke)), calc(100% - var(--ov-ecke)) 100%, 0 100%);
}

/* ---------- Schließen ---------- */
.ov-zu {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  display: grid; place-items: center; width: 48px; height: 48px;
  background: #111; border: 1px solid var(--ov-rahmen); color: var(--c-weiss); cursor: pointer;
  transition: border-color var(--ease), color var(--ease);
}
.ov-zu svg { width: 18px; height: 18px; }
.ov-zu:hover, .ov-zu:focus-visible { border-color: var(--c-gelb); color: var(--c-gelb); }

/* ---------- Bild ---------- */
.ov-bild { position: relative; flex: none; margin: 0; background: #000; aspect-ratio: 16 / 9; overflow: hidden; }
.ov-bild img { width: 100%; height: 100%; object-fit: cover; }
.ov[data-ov-format="hoch"] .ov-bild { aspect-ratio: var(--ov-verhaeltnis, 1); }

/* ---------- Inhalt mit Startstrich auf der Trennlinie ---------- */
.ov-inhalt { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: var(--ov-pad); }
.ov-bild + .ov-inhalt { border-top: 1px solid var(--ov-rahmen); }
.ov-inhalt::before { content: ""; position: absolute; top: -2px; left: 0; width: clamp(48px, 5vw, 80px); height: 3px; background: var(--c-gelb); }
/* ohne Bild: Platz für den X-Knopf freihalten */
.ov:not(:has(.ov-bild)) .ov-inhalt { padding-top: calc(var(--ov-pad) + 12px); padding-right: max(var(--ov-pad), 72px); }
.ov:not(:has(.ov-bild)) .ov-inhalt::before { top: 0; }

.ov-titel { margin: 0; font: italic 400 clamp(26px, 2.4vw, 40px)/1.15 var(--f-head); color: var(--c-gelb); text-wrap: balance; }
.ov-text { max-width: 58ch; font: 400 clamp(16px, 1.1vw, 18px)/1.55 var(--f-text); color: var(--c-grau-hell); }
.ov-text strong { color: var(--c-weiss); }
.ov-text a { color: var(--c-weiss); text-decoration: underline; text-underline-offset: 3px; }
.ov-text a:hover { color: var(--c-gelb); }

.ov-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 24px; margin-top: 8px;
  background: var(--c-gelb); border: 1px solid var(--c-gelb); color: #111;
  font: 700 15px/1.2 var(--f-text); letter-spacing: .08em; text-transform: uppercase; text-align: center;
  transition: background var(--ease), color var(--ease);
}
.ov-knopf svg { width: 18px; height: 18px; flex: none; transition: transform var(--ease); }
.ov-knopf:hover, .ov-knopf:focus-visible { background: transparent; color: var(--c-weiss); }
.ov-knopf:hover svg { transform: translateX(4px); }
.ov-inhalt > .ov-knopf:first-child { margin-top: 0; }

/* nur Bild + Knopf: schmale Fußleiste, Knopf rechts */
.ov-inhalt:not(:has(.ov-titel, .ov-text)) { align-items: flex-end; padding-block: 18px; }

/* ---------- Desktop: quadratisches / hochkantiges Bild links, Text rechts ---------- */
@media (min-width: 860px) {
  .ov[data-ov-format="hoch"]:has(.ov-bild) { --ov-breite: 980px; }
  .ov[data-ov-format="hoch"] .ov-karte:has(.ov-inhalt) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ov[data-ov-format="hoch"] .ov-bild { max-height: min(85vh, 85dvh); }
  .ov[data-ov-format="hoch"] .ov-bild + .ov-inhalt { justify-content: center; border-top: 0; border-left: 1px solid var(--ov-rahmen); padding-right: max(var(--ov-pad), 72px); }
  /* Startstrich wandert an die senkrechte Trennlinie */
  .ov[data-ov-format="hoch"] .ov-bild + .ov-inhalt::before { top: 0; left: -2px; width: 3px; height: clamp(48px, 5vw, 80px); }
  .ov[data-ov-format="hoch"] .ov-inhalt:not(:has(.ov-titel, .ov-text)) { align-items: flex-start; }
  /* nur Bild + Knopf im Hochformat: Bild nicht riesig */
  .ov[data-ov-format="hoch"]:not(:has(.ov-titel, .ov-text)) { --ov-breite: 560px; }
  .ov[data-ov-format="hoch"] .ov-karte:not(:has(.ov-titel, .ov-text)) { display: flex; }
  .ov[data-ov-format="hoch"]:not(:has(.ov-titel, .ov-text)) .ov-bild + .ov-inhalt { border-left: 0; border-top: 1px solid var(--ov-rahmen); align-items: flex-end; padding-right: var(--ov-pad); }
  .ov[data-ov-format="hoch"]:not(:has(.ov-titel, .ov-text)) .ov-bild + .ov-inhalt::before { top: -2px; left: 0; width: 64px; height: 3px; }
}

/* ---------- Handy ---------- */
@media (max-width: 599px) {
  .ov { --ov-ecke: 16px; }
  .ov[data-ov-format="hoch"] .ov-bild { max-height: 46dvh; } /* Knopf soll ohne Scrollen sichtbar bleiben */
  .ov-knopf { align-self: stretch; }
  .ov-inhalt:not(:has(.ov-titel, .ov-text)) { align-items: stretch; }
}

/* ---------- Einblenden (dezent, nur Deckkraft + 16 px) ---------- */
.ov[open] { animation: ov-ein .38s cubic-bezier(.2, .7, .2, 1) both; }
.ov[open]::backdrop { animation: ov-dunkel .38s ease both; }
.ov.ov--schliesst { animation: ov-aus .2s ease-in both; }
.ov.ov--schliesst::backdrop { animation: ov-dunkel .2s ease-in reverse both; }
@keyframes ov-ein { from { opacity: 0; transform: translateY(16px); } }
@keyframes ov-aus { to { opacity: 0; transform: translateY(8px); } }
@keyframes ov-dunkel { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .ov[open], .ov[open]::backdrop, .ov.ov--schliesst, .ov.ov--schliesst::backdrop { animation: none; }
}