/* =========================================================
   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;
}

*, *::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;
}
.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 { 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 { 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 { height: 1.4em; }
.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; }
.akkordeon__inhalt table.punkte { border-collapse: collapse; margin: 12px 0; min-width: 260px; }
.akkordeon__inhalt table.punkte th, .akkordeon__inhalt table.punkte td { padding: 6px 18px; border-bottom: 1px solid rgba(255,255,255,.15); text-align: left; }
.akkordeon__inhalt table.punkte th { color: var(--c-gelb); font-weight: 700; }
.akkordeon__inhalt table.punkte td:last-child { text-align: right; }

@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 { margin: 0 -6vw; } }
@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; }
.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; }
.qualifier__inhalt { width: calc((90cqw - 24px) / 2); padding: 3cqw 0; margin-left: 5cqw; }
.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; }
.tabelle--qualifier tbody tr:nth-child(odd) { background: var(--c-bg); }
.tabelle--qualifier tbody tr:nth-child(even) { background: #1f1f1f; }
.tabelle--qualifier tbody tr:hover { background: rgba(110, 110, 110, .75); }
@media (max-width: 1000px) {
  .qualifier__inhalt { width: auto; margin: 0; padding: 40px 5vw 60px; }
  .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; }
@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 { height: 1lh; }
.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); }
.livery-form__einstieg .livery-form__knopf { display: inline-flex; align-items: center; text-decoration: none; }
.livery-form__einstieg .livery-form__knopf:hover { background: var(--c-gelb); border-color: var(--c-gelb); color: var(--c-bg); }
@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 { height: 24px; }
@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 { height: 1lh; }
.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; }
.strafen__unter { margin: 21px 0 40px; font: italic 400 18px/1.3 var(--f-head); color: var(--c-weiss); }
.strafen-tabelle + .strafen__unter { margin-top: 67px; }
.strafen-tabelle { width: 100%; border-collapse: collapse; table-layout: fixed; font: 400 16px/22.4px var(--f-text); color: var(--c-weiss); }
.strafen-tabelle th, .strafen-tabelle td { padding: 2px 2px 2px 35px; text-align: left; vertical-align: middle; overflow-wrap: break-word; }
.strafen-tabelle th { height: 60px; font-weight: 700; }
.strafen-tabelle td { height: 90px; }
.strafen-tabelle tbody tr:nth-child(odd) { background: var(--c-bg); }
.strafen-tabelle 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 { height: 18px; }
@media (max-width: 1000px) {
  .strafen { padding: 40px 5vw 60px; }
  .akkordeon--tabellen .akkordeon__inhalt { padding: 20px; overflow-x: auto; }
  .strafen-tabelle { min-width: 720px; }
}

/* =========================================================
   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; } /* 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 { height: 22.4px; }
.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 (gemessen 05.10. bei 2560 × 1271 und 1440 × 900)
   Kopf: Bild 36 % auf Schwarz. Kacheln: Breite 13,63 cqw, Abstand 1,578 cqw, Reihe mittig, Abschnitt 5 % Innenabstand.
   ========================================================= */
.sub-hero--mediadaten .sub-hero__bild { opacity: .36; }
.sub-hero--mediadaten .sub-hero__kicker { margin-left: 1.116vw; }
.mediadaten { position: relative; z-index: 1; background: var(--c-bg); padding: 5%; }
.md-kacheln {
  container-type: inline-size; display: flex; justify-content: center; gap: 1.753%;
  animation: md-aufdecken 1.2s cubic-bezier(.645,.045,.355,1) backwards;
}
/* cqw hier = 90 % der Seite → Werte durch 0,9 geteilt */
.md-kachel {
  position: relative; flex: 0 0 15.144cqw; display: flex; flex-direction: column;
  padding: .694cqw .667cqw;
}
/* Rahmen #464646: 3 px bei 2560, 1 px bei 1440 (wie Wix) */
.md-kachel::before { content: ""; position: absolute; inset: 0; border: max(1px, round(calc(.1984cqw - 1.5px), 1px)) solid #464646; pointer-events: none; }
.md-kachel__bild { display: block; width: 100%; aspect-ratio: 315.6 / 177; height: auto; object-fit: cover; }
.md-kachel__titel {
  margin: calc(.358cqw + 1px + 1.052cqw) 0 0; position: relative;
  font: italic 400 18px/23.4px var(--f-head); color: var(--c-weiss); text-align: center;
}
/* graue Linie zwischen Bild und Titel */
.md-kachel__titel::before { content: ""; position: absolute; left: 0; right: 0; top: calc(-1.052cqw - 1px); border-top: 1px solid var(--c-grau); }
.md-kachel__knopf {
  display: flex; align-items: center; justify-content: center; height: calc(3.174cqw + 1.7px); margin-top: 1.036cqw;
  border: 1px solid transparent; background: var(--c-gelb); color: var(--c-bg); font: 400 1.262cqw/1.4 var(--f-text);
  transition: border-color .4s ease, background-color .4s ease, color .4s ease;
}
.md-kachel__knopf:hover, .md-kachel__knopf:focus-visible { background: transparent; border-color: var(--c-gelb); color: var(--c-weiss); }
@keyframes md-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%); } }
@media (prefers-reduced-motion: reduce) { .md-kacheln { animation: none; } }
@media (max-width: 1000px) {
  .mediadaten { padding: 40px 5vw 60px; }
  .md-kacheln { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .md-kachel { padding: 10px; }
  .md-kachel::before { border-width: 1px; }
  .md-kachel__titel { margin-top: 26px; }
  .md-kachel__titel::before { top: -14px; }
  .md-kachel__knopf { height: 50px; margin-top: 14px; font-size: 16px; }
}
@media (max-width: 500px) { .md-kacheln { grid-template-columns: 1fr; } }

/* =========================================================
   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(2, minmax(0, 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; }

/* =========================================================
   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; }

.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; }
.sub-hero--produkt { height: 22vh; min-height: 180px; }
.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; }

@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); }

/* ---------- 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 oben links auf dem Bild */
.team-karte__dmsb {
  position: absolute; top: 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 { grid-column: 1 / -1; }
  .team-gruppe__text { margin-top: 12px; }
  .team-karte { --team-ecke: 12px; }
  .team-karte__dmsb { top: 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 ====================== */