@font-face { font-family: "Big Shoulders Display"; src: url("../schriften/big-shoulders-display-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Big Shoulders Display"; src: url("../schriften/big-shoulders-display-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../schriften/dm-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../schriften/dm-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../schriften/dm-sans-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* Seite bereit, Kern der Kundenseiten-Vorlagen (vorlagen/README.md).
   Jede Vorlage setzt in ihrer stil.css die Marken-Variablen unten. Der Kern regelt Raster, Typografie,
   Abstände, Zustände und die gemeinsamen Module. Keine Inline-Styles (CSP), keine fremden Server. */

/* ---------- Vertrag: diese Variablen setzt jede Vorlage (hier neutrale Werte als Rückfall) ---------- */
:root {
  --grund: #FBFAF7;          /* Seitenhintergrund */
  --flaeche: #F3F0EA;        /* ruhige zweite Fläche */
  --karte: #FFFFFF;          /* Karten, Formulare */
  --text: #1D1B18;
  --leise: #5F5A53;          /* Nebentext, mindestens 4,5:1 auf --grund */
  --linie: #E3DED5;
  --marke: #2B2E33;          /* Hauptfarbe des Betriebs */
  --marke-text: #FFFFFF;     /* Text auf --marke */
  --akzent: #B5652B;         /* Knöpfe, Hervorhebung */
  --akzent-text: #FFFFFF;
  --akzent-dunkel: #8F4E20;  /* Hover, Links auf hellem Grund */
  --dunkel: #1F1D1A;         /* dunkle Abschnitte */
  --dunkel-text: #F4F1EC;
  --dunkel-leise: #B9B2A7;
  --gut: #2E7A4C;            /* "Jetzt geöffnet" */
  --warn: #A85A12;
  --schrift-titel: Georgia, "Times New Roman", serif;
  --schrift-text: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --schrift-hand: var(--schrift-titel);  /* optionale Akzentschrift (Kreide, Handschrift) */
  --titel-gewicht: 600;
  --titel-laufweite: -0.01em;
  --titel-zeile: 1.08;
  --radius: 8px;
  --radius-bild: 6px;
  --breite: 1180px;
  --schatten: 0 1px 2px rgb(20 18 15 / 6%), 0 8px 24px rgb(20 18 15 / 6%);
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0; background: var(--grund); color: var(--text);
  font: 400 1.0625rem/1.62 var(--schrift-text);
  font-kerning: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--akzent-dunkel); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--fokus, var(--akzent)); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--akzent); color: var(--akzent-text); }
p, ul, ol, dl, figure, blockquote { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
h1, h2, h3, h4 {
  margin: 0; font-family: var(--schrift-titel); font-weight: var(--titel-gewicht);
  letter-spacing: var(--titel-laufweite); line-height: var(--titel-zeile); text-wrap: balance; color: inherit;
}
h1 { font-size: clamp(2.35rem, 1.2rem + 4.6vw, 4.6rem); }
h2 { font-size: clamp(1.85rem, 1.25rem + 2.3vw, 3rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + .55vw, 1.45rem); line-height: 1.25; }
h4 { font-size: 1.05rem; line-height: 1.3; font-family: var(--schrift-text); font-weight: 700; letter-spacing: 0; }
.lead { font-size: clamp(1.12rem, 1.02rem + .4vw, 1.3rem); line-height: 1.55; color: var(--leise); max-width: 40em; text-wrap: pretty; }
.fliess > * + * { margin-top: 1em; }
.fliess { max-width: 38em; text-wrap: pretty; }
.leise { color: var(--leise); }
.klein { font-size: .9rem; }
.zahl { font-variant-numeric: tabular-nums; }
.kicker {
  display: inline-flex; align-items: center; gap: .6em; margin-bottom: 1.1rem;
  font: 600 .8rem/1.3 var(--schrift-text); letter-spacing: .12em; text-transform: uppercase; color: var(--akzent-dunkel);
}
.kicker::before { content: ""; width: 1.6em; height: 2px; background: currentColor; }
.hand { font-family: var(--schrift-hand); }
.nur-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Raster ---------- */
.wrap { width: min(100% - 2.5rem, var(--breite)); margin-inline: auto; }
.wrap--schmal { width: min(100% - 2.5rem, 760px); }
.abschnitt { padding-block: clamp(4rem, 2.5rem + 6vw, 7.5rem); }
.abschnitt--eng { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.abschnitt--flaeche { background: var(--flaeche); }
.abschnitt--dunkel { background: var(--dunkel); color: var(--dunkel-text); }
.abschnitt--dunkel .lead, .abschnitt--dunkel .leise { color: var(--dunkel-leise); }
.abschnitt--dunkel .kicker { color: var(--kicker-dunkel, var(--akzent)); }
.abschnitt--dunkel a:not(.knopf) { color: var(--dunkel-text); }
.abschnitt--marke { background: var(--marke); color: var(--marke-text); }
.abschnitt--marke .lead, .abschnitt--marke .leise { color: color-mix(in srgb, var(--marke-text) 78%, var(--marke)); }
.abschnitt--marke .kicker { color: inherit; }
.kopfzeile { display: grid; gap: 1rem; margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.5rem); max-width: 46rem; }
.kopfzeile--mitte { margin-inline: auto; text-align: center; justify-items: center; }
.kopfzeile--zeile { max-width: none; grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
/* Überschrift links, kurzer Text rechts daneben */
.kopfzeile--seite { max-width: none; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; column-gap: 3rem; }
.kopfzeile--seite .kicker, .kopfzeile--seite h2 { grid-column: 1; }
.kopfzeile--seite .lead { grid-column: 2; grid-row: 1 / span 2; align-self: end; justify-self: end; max-width: 42ch; margin: 0; font-size: 1rem; }
@media (max-width: 760px) { .kopfzeile--seite { grid-template-columns: 1fr; } .kopfzeile--seite .lead { grid-column: 1; grid-row: auto; justify-self: start; } }
/* Kursiv-Akzent in Überschriften: *Wort* */
h1 em.akzent, h2 em.akzent { font-style: italic; color: var(--akzent); }   /* gezielt: die Rücksetzung für em in Überschriften bleibt für alles andere */
.abschnitt--dunkel h2 em.akzent, .abschnitt--marke h2 em.akzent { color: color-mix(in srgb, var(--akzent) 55%, #FFE6A0); }
.raster { display: grid; gap: clamp(1rem, .6rem + 1.4vw, 1.75rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--spalte, 280px)), 1fr)); }
.raster--2 { --spalte: 420px; }
.raster--3 { --spalte: 300px; }
.raster--4 { --spalte: 230px; }
.zwei { display: grid; gap: clamp(2rem, 1rem + 4vw, 5rem); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.zwei--oben { align-items: start; }
.zwei--breit-links { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.zwei--breit-rechts { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
@media (max-width: 860px) {
  .zwei, .zwei--breit-links, .zwei--breit-rechts { grid-template-columns: minmax(0, 1fr); }
  .kopfzeile--zeile { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 48px; padding: .8em 1.35em;
  border: 2px solid var(--akzent); border-radius: var(--radius); background: var(--akzent); color: var(--akzent-text);
  font: 650 1rem/1.2 var(--schrift-text); text-decoration: none; cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s, transform .2s;
}
.knopf:hover { background: var(--akzent-hover, var(--akzent-dunkel)); border-color: var(--akzent-hover, var(--akzent-dunkel)); text-decoration: none; }
.knopf:active { transform: translateY(1px); }
.knopf svg { width: 1.15em; height: 1.15em; flex: none; }
.knopf--rand { background: transparent; color: var(--text); border-color: color-mix(in srgb, var(--text) 30%, transparent); }
.knopf--rand:hover { background: var(--text); color: var(--grund); border-color: var(--text); }
.abschnitt--dunkel .knopf--rand, .abschnitt--marke .knopf--rand, .held--voll .knopf--rand { color: inherit; border-color: color-mix(in srgb, currentColor 45%, transparent); }
.abschnitt--dunkel .knopf--rand:hover, .abschnitt--marke .knopf--rand:hover, .held--voll .knopf--rand:hover { background: var(--dunkel-text); color: var(--dunkel); border-color: var(--dunkel-text); }
.knopf--leise { background: transparent; border-color: transparent; color: inherit; padding-inline: .2em; text-decoration: underline; text-underline-offset: .25em; }
.knopf--leise:hover { background: transparent; border-color: transparent; }
.knoepfe { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; }

/* ---------- Kopf ---------- */
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: .7rem 1rem; background: var(--text); color: var(--grund); border-radius: var(--radius); }
.skip:focus { top: 1rem; }
.hinweisband { background: var(--marke); color: var(--marke-text); font-size: .95rem; }
.hinweisband .wrap { display: flex; gap: .5rem 1rem; flex-wrap: wrap; align-items: center; justify-content: center; padding-block: .6rem; text-align: center; }
.hinweisband a { color: inherit; font-weight: 600; }
.hinweisband--live .wrap { gap: .3rem 1.2rem; }
.hinweisband--sanft { animation: hinweis-rein .5s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes hinweis-rein { from { opacity: 0; transform: translateY(-.6rem); } }
@media (prefers-reduced-motion: reduce) { .hinweisband--sanft { animation: none; } }
.kopf { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--grund) 94%, transparent); border-bottom: 1px solid var(--linie); }
@supports (backdrop-filter: blur(8px)) { .kopf { backdrop-filter: saturate(1.4) blur(10px); } }
.kopf .wrap { display: flex; align-items: center; gap: 1.5rem; min-height: 76px; }
.marke { display: flex; align-items: center; gap: .8rem; color: var(--text); text-decoration: none; min-width: 0; margin-right: auto; }
.marke img { width: auto; height: 44px; }
.marke-text { display: grid; line-height: 1.15; min-width: 0; }
.marke-text b { font: var(--titel-gewicht) 1.2rem/1.1 var(--schrift-titel); letter-spacing: var(--titel-laufweite); }
.marke-text span { font-size: .8rem; color: var(--leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.navi { display: flex; align-items: center; gap: .25rem; }
.navi a { padding: .55rem .75rem; border-radius: var(--radius); color: var(--text); text-decoration: none; font-weight: 550; font-size: .97rem; }
.navi a:hover { background: var(--flaeche); }
.navi a[aria-current="page"] { color: var(--akzent-dunkel); box-shadow: inset 0 -2px 0 var(--akzent); border-radius: 0; }
.kopf-anruf { white-space: nowrap; }
.kopf-anruf .zahl { font-weight: 650; }
.menue { display: none; }
@media (max-width: 1000px) {
  .navi, .kopf-anruf { display: none; }
  .menue { display: block; position: static; }
  .menue > summary { list-style: none; display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .5rem .9rem;
    border: 1px solid var(--linie); border-radius: var(--radius); font-weight: 600; cursor: pointer; background: var(--karte); }
  .menue > summary::-webkit-details-marker { display: none; }
  .menue > summary svg { width: 1.2em; height: 1.2em; }
  .menue[open] > summary { background: var(--text); color: var(--grund); border-color: var(--text); }
  .menue-feld { position: absolute; left: 0; right: 0; top: 100%; background: var(--grund); border-bottom: 1px solid var(--linie);
    box-shadow: 0 24px 40px rgb(0 0 0 / 12%); padding: .75rem 1.25rem 1.5rem; display: grid; gap: .25rem; max-height: calc(100dvh - 80px); overflow: auto; }
  .menue-feld a { padding: .9rem .25rem; border-bottom: 1px solid var(--linie); color: var(--text); text-decoration: none; font-size: 1.1rem; font-weight: 600; }
  .menue-feld .knopf { margin-top: 1rem; border-bottom: 0; color: var(--akzent-text); }
}

/* ---------- Held (Start jeder Seite) ---------- */
.held { padding-block: clamp(3rem, 2rem + 5vw, 6.5rem) clamp(3.5rem, 2rem + 5vw, 6rem); }
.held h1 { max-width: 15ch; }
.held .lead { margin-top: 1.4rem; }
.held .knoepfe { margin-top: 2rem; }
.held-fakten { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: 2.25rem; padding: 0; list-style: none; color: var(--leise); font-size: .95rem; }
.held-fakten li { display: inline-flex; align-items: center; gap: .5rem; }
.held-fakten svg { width: 1.1em; height: 1.1em; color: var(--akzent); }
.held--bild .zwei { align-items: center; }
.held-bild { position: relative; }
.held-bild .bild { aspect-ratio: 4 / 5; }
.held-stempel { position: absolute; left: -1.25rem; bottom: 1.5rem; max-width: 15rem; padding: 1rem 1.15rem; border-radius: var(--radius);
  background: var(--karte); box-shadow: var(--schatten); font-size: .92rem; line-height: 1.4; }
.held-stempel b { display: block; font: var(--titel-gewicht) 1.6rem/1 var(--schrift-titel); color: var(--akzent-dunkel); margin-bottom: .3rem; }
@media (max-width: 860px) { .held-stempel { left: .75rem; bottom: .75rem; } .held-bild .bild { aspect-ratio: 4 / 3.4; } }
.held--voll { position: relative; display: grid; align-items: end; min-height: min(86dvh, 820px); padding: 0; color: #fff; isolation: isolate; overflow: hidden; }   /* Schatten endet an der Bildkante */
.held--voll .held-hintergrund { position: absolute; inset: 0; z-index: -2; }
.held--voll .held-hintergrund img, .held--voll .held-hintergrund .bild { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; border-radius: 0; }
/* Bühne: Titel direkt auf dem Foto. Weicher Schatten hinter dem Text, ohne Kasten und ohne Kante, das Foto bleibt rechts hell */
.held--voll::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgb(10 9 8 / 8%) 0%, rgb(10 9 8 / 0%) 35%, rgb(10 9 8 / 40%) 100%); }
/* Der weiche Schatten hängt am Textblock, nicht an der Fotobreite: wirkt bei 1440 und 1920 px gleich, läuft ohne Kante aus */
.held--voll .held-text { position: relative; max-width: 46rem; }   /* Textblock so breit wie der Text, damit der Schatten genau dahinter sitzt */
.held--voll .held-text::before { content: ""; position: absolute; z-index: -1; inset: -35% -20% -35% -45%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(12 14 12 / 84%) 0%, rgb(12 14 12 / 72%) 45%, rgb(12 14 12 / 38%) 75%, rgb(12 14 12 / 0%) 100%); }
.held--voll h1 { font-size: clamp(2.8rem, 1rem + 6vw, 6rem); line-height: 1.02; letter-spacing: -.02em; max-width: 12ch; color: #fff; text-wrap: balance; }
.held--voll h1, .held--voll .lead, .held--voll .kicker { text-shadow: 0 1px 2px rgb(0 0 0 / 35%), 0 4px 24px rgb(0 0 0 / 30%); }
.held--voll .lead { max-width: 46ch; }
.held--voll h1 em.akzent { color: color-mix(in srgb, var(--akzent) 55%, #FFE6A0); }
@media (max-width: 760px) { .held--voll .held-text::before { inset: -25% -30% -20% -30%; } }
.held--voll .wrap { padding-block: clamp(3rem, 2rem + 6vw, 6rem); }
.held--voll .lead, .held--voll .held-fakten { color: rgb(255 255 255 / 86%); }
.held--voll .kicker { color: #fff; }
.held--typo h1 { max-width: 18ch; font-size: clamp(2.6rem, 1.2rem + 5.6vw, 5.6rem); }

/* ---------- Bilder und Platzhalter ---------- */
.bild { position: relative; overflow: hidden; border-radius: var(--radius-bild); background: var(--flaeche); aspect-ratio: var(--format, 4 / 3); }
.bild img { width: 100%; height: 100%; object-fit: cover; }
.bild--quer { --format: 16 / 10; } .bild--hoch { --format: 4 / 5; } .bild--quadrat { --format: 1 / 1; } .bild--breit { --format: 21 / 9; }
figure figcaption { margin-top: .6rem; font-size: .88rem; color: var(--leise); }
.bild--platz { display: grid; place-items: center; border: 1.5px dashed color-mix(in srgb, var(--leise) 45%, transparent);
  background: repeating-linear-gradient(135deg, var(--flaeche) 0 14px, color-mix(in srgb, var(--flaeche) 70%, var(--linie)) 14px 15px); }
.bild--platz span { max-width: 22ch; padding: 1rem; text-align: center; font-size: .9rem; color: var(--leise); }
.bild--platz svg { width: 2.2rem; height: 2.2rem; margin: 0 auto .5rem; color: var(--leise); opacity: .7; }
.offen { padding: .05em .35em; border-radius: 4px; background: color-mix(in srgb, var(--warn) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 40%, transparent); color: inherit; }
.bildnachweis { font-size: .78rem; color: var(--leise); }

/* ---------- Eckdaten-Leiste ---------- */
.eckdaten { border-block: 1px solid var(--linie); background: var(--karte); }
.eckdaten ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); margin: 0; padding: 0; list-style: none; }
.eckdaten li { display: flex; gap: .85rem; align-items: flex-start; padding: 1.35rem 1.25rem; border-left: 1px solid var(--linie); }
.eckdaten li:first-child { border-left: 0; }
.eckdaten svg { flex: none; width: 1.4rem; height: 1.4rem; margin-top: .15rem; color: var(--akzent); }
.eckdaten b { display: block; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--leise); font-weight: 600; }
/* Faktenleiste: Titel in der Titelschrift, Zeile darunter, Symbol im Kreis */
.eckdaten--fakten { background: var(--grund); border-top: 0; }
.eckdaten--fakten ul { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.eckdaten--fakten li { align-items: center; padding: 1.6rem 1.5rem; }
.eckdaten--fakten li:first-child { padding-left: 0; }
.eckdaten.eckdaten--fakten svg { width: 2.6rem; height: 2.6rem; margin: 0; padding: .62rem; border-radius: 50%; background: color-mix(in srgb, var(--akzent) 13%, transparent); color: var(--akzent-dunkel, var(--akzent)); }
.eckdaten.eckdaten--fakten b { font-family: var(--schrift-titel); font-weight: var(--titel-gewicht); font-size: 1.12rem; letter-spacing: 0; text-transform: none; color: var(--text); line-height: 1.25; }
.eckdaten.eckdaten--fakten span { display: block; margin-top: .15rem; font-size: .85rem; color: var(--leise); }
@media (max-width: 760px) {
  .eckdaten--fakten ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eckdaten--fakten li { flex-direction: column; align-items: flex-start; gap: .6rem; padding: 1.1rem .9rem; }
  .eckdaten--fakten li:nth-child(odd) { border-left: 0; padding-left: 0; }
  .eckdaten--fakten li:nth-child(n+3) { border-top: 1px solid var(--linie); }
}
.eckdaten span, .eckdaten a { font-weight: 600; color: var(--text); text-decoration: none; }
@media (max-width: 720px) { .eckdaten li { border-left: 0; border-top: 1px solid var(--linie); } .eckdaten li:first-child { border-top: 0; } }

/* ---------- Status "Jetzt geöffnet" ---------- */
.status { display: inline-flex; align-items: center; gap: .45rem; font-weight: 650; }
.status::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--leise); }
.status[data-zustand="offen"]::before { background: var(--gut); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gut) 20%, transparent); }
.status[data-zustand="bald"]::before { background: var(--warn); }
.status[data-zustand="zu"]::before { background: #B4462E; }

/* ---------- Karten ---------- */
.karte { display: grid; align-content: start; gap: .75rem; padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); border-radius: var(--radius);
  background: var(--karte); border: 1px solid var(--linie); }
.karte--bild { padding: 0; overflow: hidden; gap: 0; }
.karte--bild .karte-inhalt { display: grid; gap: .6rem; padding: 1.25rem 1.35rem 1.5rem; }
.karte--bild .bild { border-radius: 0; }
.karte h3 { font-size: 1.3rem; }
.karte .liste-haken { margin-top: .25rem; }
.symbol { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--radius); background: color-mix(in srgb, var(--akzent) 13%, transparent); color: var(--akzent-dunkel); }
.symbol svg { width: 1.6rem; height: 1.6rem; }
.liste-haken { display: grid; gap: .45rem; padding: 0; list-style: none; }
.liste-haken li { position: relative; padding-left: 1.6rem; }
.liste-haken li::before { content: ""; position: absolute; left: 0; top: .5em; width: .85rem; height: .5rem; border-left: 2px solid var(--haken, var(--akzent)); border-bottom: 2px solid var(--haken, var(--akzent)); transform: rotate(-45deg); }
a.karte { color: inherit; text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .2s; }
a.karte:hover { border-color: color-mix(in srgb, var(--akzent) 45%, var(--linie)); box-shadow: var(--schatten); transform: translateY(-2px); }

/* ---------- Text mit Bild ---------- */
.geschichte .fliess { font-size: 1.08rem; }
.zitat { position: relative; margin-top: 2rem; padding: 1.25rem 0 0 1.5rem; border-left: 3px solid var(--akzent); }
.zitat p { font: italic var(--titel-gewicht) clamp(1.25rem, 1.05rem + .8vw, 1.6rem)/1.35 var(--schrift-titel); letter-spacing: var(--titel-laufweite); }
.zitat footer { margin-top: .7rem; font-size: .92rem; color: var(--leise); }

/* ---------- Ablauf ---------- */
.ablauf { counter-reset: schritt; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); padding: 0; list-style: none; }
.ablauf li { counter-increment: schritt; position: relative; padding-top: 3.6rem; }
.ablauf li::before { content: counter(schritt, decimal-leading-zero); position: absolute; top: 0; left: 0;
  font: var(--titel-gewicht) 2.4rem/1 var(--schrift-titel); color: var(--akzent); }
.ablauf li::after { content: ""; position: absolute; top: 1.2rem; left: 3.8rem; right: 0; height: 1px; background: var(--linie); }
.ablauf li:last-child::after { display: none; }
.ablauf h3 { margin-bottom: .4rem; }
.ablauf p { color: var(--leise); }
.ablauf .dauer { display: inline-block; margin-top: .6rem; font-size: .85rem; font-weight: 600; color: var(--akzent-dunkel); }
.abschnitt--dunkel .ablauf p { color: var(--dunkel-leise); }
.abschnitt--dunkel .ablauf li::after { background: rgb(255 255 255 / 15%); }

/* ---------- Kennzahlen ---------- */
.zahlen { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); padding: 0; list-style: none; }
.zahlen li { display: grid; gap: .35rem; padding-top: 1rem; border-top: 2px solid currentColor; }
.zahlen b { font: var(--titel-gewicht) clamp(2.2rem, 1.6rem + 2vw, 3.2rem)/1 var(--schrift-titel); font-variant-numeric: tabular-nums; letter-spacing: var(--titel-laufweite); }
.zahlen span { color: var(--leise); font-size: .95rem; }
.abschnitt--dunkel .zahlen span, .abschnitt--marke .zahlen span { color: inherit; opacity: .8; }

/* ---------- Vertrauen ---------- */
.siegel { display: flex; flex-wrap: wrap; gap: .75rem; padding: 0; list-style: none; }
.siegel li { display: inline-flex; align-items: center; gap: .6rem; padding: .6rem .95rem .6rem .7rem; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--karte); font-weight: 600; font-size: .95rem; }
.siegel svg { width: 1.4rem; height: 1.4rem; color: var(--akzent); }
.siegel small { display: block; font-weight: 400; color: var(--leise); font-size: .8rem; }

/* ---------- Projekte und Galerie ---------- */
.projekte { display: grid; gap: clamp(1rem, .6rem + 1.5vw, 2rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.projekt { display: grid; gap: .8rem; }
.projekt .bild { --format: 4 / 3; }
.projekt-zeile { display: flex; flex-wrap: wrap; gap: .25rem .9rem; font-size: .88rem; color: var(--leise); padding: 0; list-style: none; }
.projekt-zeile li + li::before { content: "·"; margin-right: .9rem; }
.projekt--gross { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; gap: clamp(1.5rem, 1rem + 3vw, 4rem); }
@media (max-width: 860px) { .projekt--gross { grid-template-columns: minmax(0, 1fr); } }
.galerie { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.galerie .bild { --format: 1 / 1; }

/* ---------- Stimmen ---------- */
.stimmen { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.stimme { display: grid; gap: 1rem; align-content: space-between; padding: 1.6rem; border-radius: var(--radius); background: var(--karte); border: 1px solid var(--linie); }
.stimme p { font: var(--titel-gewicht) 1.18rem/1.45 var(--schrift-titel); letter-spacing: var(--titel-laufweite); }
.stimme footer { font-size: .9rem; color: var(--leise); }
.stimme footer a { color: inherit; }

/* ---------- Fragen ---------- */
.fragen { display: grid; border-top: 1px solid var(--linie); }
.fragen details { border-bottom: 1px solid var(--linie); }
.fragen summary { display: flex; justify-content: space-between; gap: 1.5rem; align-items: center; padding: 1.25rem 0; cursor: pointer; list-style: none;
  font: 600 1.12rem/1.4 var(--schrift-text); }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: ""; flex: none; width: .7rem; height: .7rem; margin-right: .3rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-25%); transition: transform .25s; }
.fragen details[open] summary::after { transform: rotate(-135deg) translateY(-25%); }
.fragen .antwort { padding: 0 0 1.4rem; max-width: 46em; color: var(--leise); }
.abschnitt--dunkel .fragen, .abschnitt--dunkel .fragen details { border-color: rgb(255 255 255 / 16%); }

/* ---------- Team ---------- */
.team { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.person { display: grid; gap: .5rem; }
.person .bild { --format: 4 / 5; margin-bottom: .4rem; }
.person h3 { font-size: 1.2rem; }
.person span { color: var(--leise); font-size: .95rem; }

/* ---------- Zeitleiste (Chronik) ---------- */
.zeitleiste { position: relative; display: grid; gap: 2rem; padding: 0 0 0 2rem; list-style: none; }
.zeitleiste::before { content: ""; position: absolute; left: .4rem; top: .4rem; bottom: .4rem; width: 2px; background: var(--linie); }
.zeitleiste li { position: relative; display: grid; gap: .3rem; }
.zeitleiste li::before { content: ""; position: absolute; left: -2rem; top: .35rem; width: .85rem; height: .85rem; border-radius: 50%;
  background: var(--grund); border: 3px solid var(--akzent); }
.zeitleiste .jahr { font: var(--titel-gewicht) 1.5rem/1 var(--schrift-titel); color: var(--akzent-dunkel); font-variant-numeric: tabular-nums; }
.zeitleiste p { color: var(--leise); max-width: 40em; }
@media (min-width: 861px) {
  .zeitleiste--quer { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: 2.2rem 0 0; gap: 1.5rem; }
  .zeitleiste--quer::before { left: 0; right: 0; top: .4rem; bottom: auto; width: auto; height: 2px; }
  .zeitleiste--quer li::before { left: 0; top: -2.2rem; }
}

/* ---------- Öffnungszeiten ---------- */
.zeiten { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.zeiten th, .zeiten td { padding: .7rem 0; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; }
.zeiten th { font-weight: 600; padding-right: 1.5rem; white-space: nowrap; }
.zeiten tr[data-heute] th, .zeiten tr[data-heute] td { color: var(--akzent-dunkel); }
.zeiten tr[data-heute] th::after { content: " · Heute"; font-weight: 500; font-size: .85em; }
.ausnahmen { margin-top: 1.25rem; padding: 1rem 1.15rem; border-radius: var(--radius); background: color-mix(in srgb, var(--warn) 9%, var(--karte)); border: 1px solid color-mix(in srgb, var(--warn) 28%, transparent); }
.ausnahmen b { display: block; margin-bottom: .25rem; }

/* ---------- Termine ---------- */
.termine { display: grid; gap: 0; padding: 0; list-style: none; border-top: 1px solid var(--linie); }
.termin { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; gap: 1.25rem; align-items: center; padding: 1.25rem 0; border-bottom: 1px solid var(--linie); }
.termin-datum { display: grid; justify-items: center; padding: .6rem .3rem; border-radius: var(--radius); background: var(--flaeche); line-height: 1.05; font-variant-numeric: tabular-nums; }
.termin-datum b { font: var(--titel-gewicht) 1.9rem/1 var(--schrift-titel); }
.termin-datum span { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--leise); }
.termin h3 { font-size: 1.2rem; }
.termin p { color: var(--leise); font-size: .95rem; }
@media (max-width: 640px) { .termin { grid-template-columns: 4.5rem minmax(0, 1fr); } .termin .knopf { grid-column: 2; justify-self: start; } }

/* ---------- Kontakt, Formular ---------- */
.kontakt-liste { display: grid; gap: 1.1rem; padding: 0; list-style: none; }
.kontakt-liste li { display: flex; gap: .9rem; align-items: flex-start; }
.kontakt-liste svg { flex: none; width: 1.35rem; height: 1.35rem; margin-top: .2rem; color: var(--akzent); }
.kontakt-liste b { display: block; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--leise); font-weight: 600; }
.kontakt-liste a { font-weight: 600; color: inherit; }
.formular { display: grid; gap: 1.1rem; padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); border-radius: var(--radius); background: var(--karte); border: 1px solid var(--linie); color: var(--text); }
.formular h3 { margin-bottom: .2rem; }
.feld { display: grid; gap: .4rem; }
.feld > span { font-weight: 600; font-size: .95rem; }
.feld > span small { font-weight: 400; color: var(--leise); }
.feld input, .feld select, .feld textarea {
  width: 100%; min-height: 50px; padding: .75rem .9rem; border: 1.5px solid color-mix(in srgb, var(--text) 22%, transparent); border-radius: var(--radius);
  background: var(--grund); color: var(--text); font: inherit; font-size: 1rem; transition: border-color .2s, box-shadow .2s; }
.feld textarea { min-height: 140px; resize: vertical; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--akzent) 22%, transparent); }
.feld[data-fehler] input, .feld[data-fehler] textarea, .feld[data-fehler] select { border-color: #B4462E; }
.feld-fehler { color: #B4462E; font-size: .88rem; }
.felder-2 { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.haken { display: flex; gap: .7rem; align-items: flex-start; font-size: .95rem; }
.haken input { width: 1.25rem; height: 1.25rem; margin-top: .2rem; accent-color: var(--akzent); flex: none; }
.wahl { display: flex; flex-wrap: wrap; gap: .5rem; border: 0; padding: 0; margin: 0; }
.wahl legend { width: 100%; margin-bottom: .45rem; font-weight: 600; font-size: .95rem; }
.wahl label { position: relative; }
.wahl input { position: absolute; opacity: 0; }
.wahl span { display: inline-flex; min-height: 44px; align-items: center; padding: .55rem .95rem; border: 1.5px solid var(--linie); border-radius: var(--radius); background: var(--grund); cursor: pointer; font-size: .95rem; }
.wahl input:checked + span { border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 12%, var(--grund)); font-weight: 600; }
.wahl input:focus-visible + span { outline: 3px solid var(--akzent); outline-offset: 2px; }
.fang { position: absolute; left: -9999px; }
.formular-meldung { padding: 1rem 1.15rem; border-radius: var(--radius); background: color-mix(in srgb, var(--gut) 12%, var(--karte)); border: 1px solid color-mix(in srgb, var(--gut) 35%, transparent); }
.formular-meldung[data-art="fehler"] { background: color-mix(in srgb, #B4462E 10%, var(--karte)); border-color: color-mix(in srgb, #B4462E 35%, transparent); }
.datenschutz-satz { font-size: .85rem; color: var(--leise); }

/* ---------- Karte nach Klick ---------- */
.karte-klick { position: relative; overflow: hidden; border-radius: var(--radius); aspect-ratio: 4 / 3; background: var(--flaeche); border: 1px solid var(--linie); }
.karte-klick .karte-vorhang { position: absolute; inset: 0; display: grid; place-content: center; gap: .9rem; padding: 1.5rem; text-align: center;
  background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--akzent) 10%, transparent), transparent 60%), var(--flaeche); }
.karte-klick .karte-vorhang p { max-width: 30ch; margin-inline: auto; font-size: .88rem; color: var(--leise); }
.karte-klick iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.karte-muster { position: absolute; inset: 0; opacity: .5; color: var(--linie); }
/* Stadtplan als Bild: sofort da, Nadel auf der Adresse, „Karte bewegen“ lädt OpenStreetMap nach */
.karte--plan { background: var(--grund); }
.karte-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.karte-nadel { position: absolute; left: 50%; top: 50%; width: 34px; transform: translate(-50%, -100%); filter: drop-shadow(0 6px 8px rgb(0 0 0 / 28%)); }
.karte-nadel svg { display: block; width: 100%; height: auto; }
.karte-nadel path { fill: var(--akzent); stroke: #fff; stroke-width: 2; }
.karte-nadel circle { fill: #fff; }
.karte-nadel::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 14px; height: 6px; margin-left: -7px; border-radius: 50%;
  background: color-mix(in srgb, var(--akzent) 45%, transparent); animation: nadel-puls 2.4s ease-out infinite; }
@keyframes nadel-puls { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(3.2); opacity: 0; } }
.karte-bewegen { position: absolute; left: .75rem; bottom: .75rem; display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .8rem; min-height: 40px;
  border: 1px solid var(--linie); border-radius: var(--radius); background: color-mix(in srgb, var(--grund) 92%, transparent); color: var(--text);
  font: 600 .82rem/1 var(--schrift-text); cursor: pointer; box-shadow: 0 4px 14px rgb(0 0 0 / 10%); }
.karte-bewegen:hover { border-color: var(--akzent); color: var(--akzent-dunkel); }
.karte-bewegen svg { width: 1rem; height: 1rem; }
.karte-quelle { position: absolute; right: 0; bottom: 0; padding: .2rem .5rem; font-size: .68rem; color: var(--leise);
  background: color-mix(in srgb, var(--grund) 85%, transparent); border-top-left-radius: 6px; }
.karte-quelle a { color: inherit; }
@media (prefers-reduced-motion: reduce) { .karte-nadel::after { animation: none; } }

/* ---------- Einzugsgebiet ---------- */
.orte { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; list-style: none; }
.orte li { padding: .45rem .85rem; border-radius: 999px; background: var(--karte); border: 1px solid var(--linie); font-size: .95rem; }
.orte li[data-haupt] { background: var(--marke); color: var(--marke-text); border-color: var(--marke); font-weight: 600; }

/* ---------- Abschluss-Band ---------- */
.abschluss { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.abschluss h2 { max-width: 20ch; }
@media (max-width: 860px) { .abschluss { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Downloads, Stellen ---------- */
.dateien { display: grid; padding: 0; list-style: none; border-top: 1px solid var(--linie); }
.dateien a { display: flex; gap: 1rem; align-items: center; justify-content: space-between; padding: 1rem 0; border-bottom: 1px solid var(--linie); color: inherit; text-decoration: none; font-weight: 600; }
.dateien a span { font-weight: 400; font-size: .88rem; color: var(--leise); }
.dateien a:hover { color: var(--akzent-dunkel); }
.stelle { display: grid; gap: .8rem; }
.stelle-kopf { display: flex; flex-wrap: wrap; gap: .5rem; }
.etikett { display: inline-flex; align-items: center; padding: .2rem .6rem; border-radius: 999px; background: var(--flaeche); font-size: .82rem; font-weight: 600; color: var(--leise); }
.etikett--akzent { background: color-mix(in srgb, var(--akzent) 15%, transparent); color: var(--akzent-dunkel); }

/* ---------- Fuß ---------- */
.fuss { padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) 2rem; background: var(--dunkel); color: var(--dunkel-text); font-size: .95rem; }
.fuss a { color: var(--dunkel-text); text-decoration: none; }
.fuss a:hover { text-decoration: underline; }
.fuss-raster { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(160px, 1fr)); }
.fuss h2 { font-size: 1.5rem; margin-bottom: .8rem; }
.fuss h3 { font: 600 .78rem/1.3 var(--schrift-text); letter-spacing: .1em; text-transform: uppercase; color: var(--dunkel-leise); margin-bottom: .9rem; }
.fuss ul { display: grid; gap: .5rem; padding: 0; list-style: none; }
.fuss p { color: var(--dunkel-leise); }
.fuss-unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgb(255 255 255 / 14%); color: var(--dunkel-leise); font-size: .85rem; }
.fuss-unten nav { display: flex; gap: 1.25rem; }
@media (max-width: 720px) { .fuss-raster { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Leiste unten am Handy: Anrufen, Route, Anfrage ---------- */
.handyleiste { display: none; }
@media (max-width: 720px) {
  .handyleiste { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    padding: .5rem .5rem calc(.5rem + env(safe-area-inset-bottom, 0px)); gap: .5rem; background: var(--grund); border-top: 1px solid var(--linie);
    box-shadow: 0 -10px 30px rgb(0 0 0 / 8%); }
  .handyleiste a { display: grid; justify-items: center; gap: .15rem; padding: .45rem .25rem; border-radius: var(--radius); color: var(--text); text-decoration: none; font-size: .78rem; font-weight: 650; }
  .handyleiste a:first-child { background: var(--akzent); color: var(--akzent-text); }
  .handyleiste svg { width: 1.35rem; height: 1.35rem; }
  body:has(.handyleiste) { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Rechtliches ---------- */
.recht { max-width: 46rem; }
.recht h1 { font-size: clamp(2rem, 1.4rem + 2.5vw, 3rem); margin-bottom: 2rem; }
.recht h2 { font-size: 1.4rem; margin: 2.5rem 0 .8rem; }
.recht h3 { font-size: 1.1rem; margin: 1.6rem 0 .5rem; }
.recht p, .recht ul { margin-bottom: .9rem; }
.recht address { font-style: normal; }

/* ---------- Bewegung ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .einblenden { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
  .js .einblenden.sichtbar { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }

/* ---------- Druck ---------- */
@media print {
  .kopf, .handyleiste, .menue, .karte-klick, .formular, .hinweisband { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .abschnitt { padding-block: 1.2rem; }
  .abschnitt--dunkel, .abschnitt--marke, .fuss { background: #fff; color: #000; }
  a { color: #000; }
}

/* ---------- Abstände (Hilfsklassen für Module) ---------- */
.abstand-oben-k { margin-top: 1rem; }
.abstand-oben { margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.abstand-oben-g { margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.abstand-unten { margin-bottom: 1rem; }
.stapel { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.projekte-gross { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3.5rem); margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.status { align-items: flex-start; }
.status::before { flex: none; margin-top: .5em; }
/* Seiten mit reinem Schrift-Start: der erste Abschnitt rückt näher heran */
.held--typo { padding-bottom: clamp(1.5rem, 1rem + 2vw, 3rem); }
.held--typo + .abschnitt:not([class*="abschnitt--"]) { padding-top: clamp(1.5rem, 1rem + 2vw, 3rem); }
.kopf-status { font-size: .8rem; font-weight: 600; color: var(--leise); white-space: nowrap; }
.kopf-status::before { width: .5rem; height: .5rem; margin-top: .35em; }
.karte-klick .karte-vorhang .symbol { margin-inline: auto; }
.kopfzeile--nur-knopf { display: flex; justify-content: flex-end; }
.monogramm { display: grid; place-items: center; background: color-mix(in srgb, var(--marke) 10%, var(--flaeche)); }
.monogramm span { font: var(--titel-gewicht) clamp(2.4rem, 1.8rem + 2vw, 3.4rem)/1 var(--schrift-titel); color: var(--marke); letter-spacing: .02em; }

/* Überschriften in einer Farbe und einem Schnitt: kein farbiges oder kursives Einzelwort (Erkennungszeichen von KI-Seiten) */
:is(h1, h2, h3) :is(em, strong, i, b) { font: inherit; color: inherit; }

/* Akzent auf dunklem Grund einstellbar (marke.farben.akzent_auf_dunkel), z. B. wenn das Logo-Blau dort zu dunkel ist */
.abschnitt--dunkel .ablauf li::before, .abschnitt--dunkel .zahlen b { color: var(--akzent-auf-dunkel, var(--akzent)); }
.abschnitt--dunkel .ablauf .dauer { color: var(--akzent-auf-dunkel, var(--akzent)); }
/* Offene Fragen auch auf dunklen und farbigen Flächen lesbar */
:is(.abschnitt--dunkel, .abschnitt--marke, .held--voll) .offen { background: color-mix(in srgb, #F6C77A 26%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, #F6C77A 60%, transparent); color: inherit; }
/* Bildausschnitt aus der Inhaltsdatei: bild.position = oben, unten, links, rechts */
.bild img.pos-oben { object-position: center top; } .bild img.pos-unten { object-position: center bottom; }
.bild img.pos-links { object-position: left center; } .bild img.pos-rechts { object-position: right center; }

/* Musterbild im Entwurf: sichtbares Schild, bis ein echtes Foto da ist */
.bild--muster { position: relative; }
.bild-muster { position: absolute; right: 12px; top: 12px; z-index: 2; max-width: calc(100% - 24px); padding: 6px 10px; border-radius: 4px;
  background: rgba(20, 18, 14, .78); color: #FFFFFF; font-size: 13px; line-height: 1.3; letter-spacing: .01em; }

/* Vorrat aus dem Kunden-Portal (Nur noch wenig da, Ausverkauft) */
.vorrat-hinweis { margin: 0 0 18px; padding: 14px 16px; border-left: 3px solid var(--akzent); background: var(--grund, #FFFFFF); color: var(--tinte, inherit); line-height: 1.5; }
.vorrat-hinweis--aus { font-weight: 600; }
form[data-vorrat-pause] { display: none !important; }

/* Menge je Sorte: Minus und Plus */
.feld--anzahl { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--linie); }
.anzahl { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--karte); width: max-content; }
.anzahl input { width: 4.5em; text-align: center; border: 0; background: transparent; font: inherit; font-size: 18px; padding: 10px 0; color: var(--text); -moz-appearance: textfield; }
.anzahl input::-webkit-outer-spin-button, .anzahl input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.anzahl input:focus { outline: none; }
.anzahl:focus-within { border-color: var(--akzent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--akzent) 18%, transparent); }
.anzahl-knopf { width: 44px; height: 44px; border: 0; background: transparent; color: var(--akzent-dunkel); font-size: 22px; line-height: 1; cursor: pointer; border-radius: var(--radius); }
.anzahl-knopf:hover { background: var(--flaeche); }
.anzahl-einheit { padding: 0 14px 0 2px; color: var(--leise); font-size: 14px; }

/* Kalender im Stil der Seite */
.datum-feld { cursor: pointer; caret-color: transparent; }
.kalender { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: 308px; padding: 14px; border: 1px solid var(--linie); border-radius: var(--radius);
  background: var(--karte); box-shadow: 0 14px 40px rgba(20, 18, 14, .14); }
.kalender[hidden] { display: none; }
.kalender-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.kalender-kopf b { font-family: var(--schrift-titel); font-weight: var(--titel-gewicht); font-size: 17px; color: var(--text); }
.kalender-kopf button { width: 36px; height: 36px; border: 1px solid var(--linie); border-radius: var(--radius); background: transparent; color: var(--text); font-size: 20px; cursor: pointer; }
.kalender-kopf button:disabled { opacity: .35; cursor: default; }
.kalender-tage, .kalender-raster { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.kalender-tage span { font-size: 12px; color: var(--leise); padding: 4px 0; }
.kalender-raster button { height: 36px; border: 0; border-radius: var(--radius); background: transparent; color: var(--text); font: inherit; font-size: 14.5px; cursor: pointer; }
.kalender-raster button:hover:not([disabled]) { background: var(--flaeche); }
.kalender-raster button.kalender-heute { box-shadow: inset 0 0 0 1px var(--linie); }
.kalender-raster button[aria-pressed="true"] { background: var(--akzent); color: var(--akzent-text); }
.kalender-raster button:disabled { color: var(--linie); cursor: default; }
.kalender-raster button:focus-visible, .kalender-kopf button:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
.kalender-fuss { margin-top: 8px; text-align: right; }
.kalender-fuss button { border: 0; background: none; color: var(--akzent-dunkel); font: inherit; font-size: 14px; cursor: pointer; text-decoration: underline; }
/* Sorte gerade aus (Vorrat je Sorte aus dem Portal): Menge gesperrt, Hinweis am Feld */
.feld--anzahl > label { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 2px; min-width: 0; }
.feld--anzahl .feld-name { flex-basis: 100%; }
.feld--anzahl .feld-zusatz { font-size: 14px; color: var(--leise); }
.feld--anzahl:has(input:disabled) > label::after { content: "Gerade aus"; font-size: 14px; color: #8A2E1E; font-weight: 600; }
.feld--anzahl:has(input:disabled) .feld-zusatz::after { content: " ·"; }
@media (max-width: 480px) {
  .feld--anzahl .anzahl input { width: 2.6em; }
  .feld--anzahl .anzahl-einheit { display: none; }
}
.feld--anzahl:has(input:disabled) { opacity: .75; }
/* Kalendertage gegen Klassen aus Vorlagen absichern (genuss hat einen Baustein „.heute“) */
.kalender-raster { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.kalender-raster button { min-width: 0; padding: 0; margin: 0; display: block; width: 100%; }

/* ---------- Bestätigung nach dem Absenden (formulare.<name>.erfolg) ---------- */
.formular-erfolg { display: grid; gap: 1.25rem; outline: none; animation: erfolg-rein .4s ease-out; }
.erfolg-kopf { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: start; }
.erfolg-haken { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: #E3F1E8; }   /* Erfolg in Grün, unabhängig von der Markenfarbe */
.erfolg-haken svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: #2E7A4C; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 24; stroke-dashoffset: 24; animation: erfolg-haken .5s .15s ease-out forwards; }
.erfolg-kopf h3 { margin: 0; font-family: var(--schrift-titel); font-weight: var(--titel-gewicht); font-size: clamp(1.45rem, 1.2rem + 1vw, 1.85rem); line-height: 1.2; }
.erfolg-kopf p { margin: .35rem 0 0; color: var(--leise); }
.erfolg-liste { margin: 0; display: grid; border-top: 1px solid var(--linie); }
.erfolg-liste div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; padding: .65rem 0; border-bottom: 1px solid var(--linie); }
.erfolg-liste dt { color: var(--leise); }
.erfolg-liste dd { margin: 0; font-weight: 600; text-align: right; }
.erfolg-zwischen { margin: .25rem 0 0; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--leise); font-weight: 600; }
.erfolg-schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: schritt; }
.erfolg-schritte li { position: relative; display: grid; gap: .15rem; padding: 0 0 1.1rem 2.6rem; counter-increment: schritt; }
.erfolg-schritte li::before { content: counter(schritt); position: absolute; left: 0; top: -.1rem; display: grid; place-items: center; width: 1.8rem; height: 1.8rem;
  border-radius: 50%; border: 1px solid var(--linie); background: var(--karte); font-size: .85rem; font-weight: 600; color: var(--leise); }
.erfolg-schritte li::after { content: ""; position: absolute; left: .87rem; top: 1.8rem; bottom: .2rem; width: 1px; background: var(--linie); }
.erfolg-schritte li:last-child { padding-bottom: 0; }
.erfolg-schritte li:last-child::after { display: none; }
.erfolg-schritte li.erledigt::before { content: "✓"; background: #2E7A4C; border-color: #2E7A4C; color: #fff; }
.erfolg-schritte b { font-weight: 600; color: var(--text); }
.erfolg-schritte span { color: var(--leise); font-size: .95rem; }
.erfolg-fuss { margin: .25rem 0 0; }
@keyframes erfolg-rein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes erfolg-haken { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .formular-erfolg { animation: none; } .erfolg-haken svg { animation: none; stroke-dashoffset: 0; } }

/* Bestätigung als eigene Ansicht: der ganze Abschnitt zeigt nur noch sie */
.abschnitt--erfolg { scroll-margin-top: 5.5rem; }
.abschnitt--erfolg > .wrap > :not(.formular-erfolg), .formular--erfolg > :not(.formular-erfolg) { display: none !important; }
.abschnitt--erfolg .formular-erfolg { max-width: 42rem; margin-inline: auto; padding: clamp(1.75rem, 1rem + 3vw, 3rem); background: var(--karte);
  border: 1px solid var(--linie); border-radius: calc(var(--radius) + 4px); box-shadow: 0 24px 60px -30px rgb(40 30 15 / 30%); }
.abschnitt--erfolg .erfolg-kopf h3 { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem); }
.erfolg-aus { display: none !important; }   /* nach dem Absenden: nur Kopf, Bestätigung und Fuß */

/* Eigene Erfolgsseite (danke.html, reserviert.html) */
.erfolg-seite { min-height: 70dvh; display: grid; align-items: center; }
.erfolg-seite .formular-erfolg { max-width: 42rem; margin-inline: auto; padding: clamp(1.75rem, 1rem + 3vw, 3rem); background: var(--karte);
  border: 1px solid var(--linie); border-radius: calc(var(--radius) + 4px); box-shadow: 0 24px 60px -30px rgb(40 30 15 / 30%); }
.erfolg-seite .erfolg-kopf h1 { margin: 0; font-family: var(--schrift-titel); font-weight: var(--titel-gewicht); font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.6rem); line-height: 1.15; }
.erfolg-seite .erfolg-fuss { display: flex; flex-wrap: wrap; gap: .75rem; }


/* Vorlage Sportverein ("Anzeigetafel"). Die Vereinsfarbe trägt als Fläche Kopfbereich, Seitenköpfe und Abschluss,
   die zweite Vereinsfarbe hebt hervor (Doppelstreifen wie auf dem Trikot, Hauptknopf, Kennzahlen).
   Schmale Anzeigetafel-Schrift für Überschriften und Zahlen, DM Sans für alles Lesbare (ruhige Ziffern ohne Schrägstrich in der Null).
   Farbpaare je Verein: vorlage.json (farbvarianten), überschreibbar über marke.farben. */
:root {
  --grund: #F7F6F1;
  --flaeche: #ECEADF;
  --karte: #FFFFFF;
  --text: #16211B;
  --leise: #4E5A53;
  --linie: #D9D7CB;
  --marke: #1E4D36;
  --marke-text: #FFFFFF;
  --hervor: #F2C230;         /* Hervorhebung auf der Vereinsfläche */
  --hervor-text: #16211B;
  --akzent: #F2C230;
  --akzent-text: #16211B;
  --akzent-hover: #E0AC12;
  --akzent-dunkel: #1E6B45;  /* Links und Etiketten auf hellem Grund, immer dunkel */
  --dunkel: #13241B;
  --dunkel-text: #EEF1EA;
  --dunkel-leise: #A9B8AE;
  --gut: #2E7A4C;
  --warn: #B26A0C;
  --stopp: #B4462E;
  --streifen: currentColor;
  --schrift-titel: "Big Shoulders Display", "Arial Narrow", "Roboto Condensed", sans-serif;
  --schrift-text: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --titel-gewicht: 800;
  --titel-laufweite: .004em;
  --titel-zeile: .96;
  --radius: 6px;
  --radius-bild: 4px;
  --breite: 1240px;
  --schatten: 0 1px 2px rgb(16 28 21 / 7%), 0 10px 28px rgb(16 28 21 / 8%);
}

body { font-size: 1.075rem; line-height: 1.6; }
h1 { font-size: clamp(2.9rem, 1.5rem + 5.4vw, 6.2rem); line-height: .9; }
h2 { font-size: clamp(2.3rem, 1.5rem + 3.2vw, 4rem); line-height: .94; }
h3 { font-family: var(--schrift-titel); font-weight: 700; font-size: clamp(1.45rem, 1.3rem + .6vw, 1.75rem); line-height: 1.05; letter-spacing: .01em; }
.lead { color: var(--leise); }
:focus-visible { outline-color: var(--text); }

/* Doppelstreifen als Erkennungszeichen vor jedem Kicker */
.kicker { letter-spacing: .13em; }
.kicker::before { width: 1.15em; height: .95em; background: linear-gradient(112deg, transparent 0 16%, var(--streifen) 16% 40%, transparent 40% 58%, var(--streifen) 58% 82%, transparent 82%); }

/* Auf der Vereinsfläche wird die zweite Vereinsfarbe zum Akzent */
.held--verein, .held--spieltag, .seitenkopf, .abschnitt--marke {
  --akzent: var(--hervor); --akzent-text: var(--hervor-text);
  --akzent-hover: color-mix(in srgb, var(--hervor) 84%, #000); --streifen: var(--hervor);
}
.held--verein .kicker, .held--spieltag .kicker, .seitenkopf .kicker { color: var(--marke-text); }
.held--verein :focus-visible, .held--spieltag :focus-visible, .seitenkopf :focus-visible, .abschnitt--marke :focus-visible { outline-color: var(--hervor); }

/* ---------- Knöpfe ---------- */
.knopf { font-weight: 700; letter-spacing: .005em; }
.knopf:not(.knopf--rand):not(.knopf--leise):hover { background: var(--akzent-hover); border-color: var(--akzent-hover); color: var(--akzent-text); }
.knopf--rand { border-color: color-mix(in srgb, var(--text) 38%, transparent); }

/* ---------- Kopf ---------- */
.hinweisband { background: var(--dunkel); color: var(--dunkel-text); }
.kopf { background: var(--karte); border-bottom: 1px solid var(--linie); }
@supports (backdrop-filter: blur(8px)) { .kopf { backdrop-filter: none; } }
.kopf .wrap { min-height: 80px; }
.marke img { height: 52px; }
.marke-text b { font-size: 1.75rem; line-height: .95; letter-spacing: .01em; }
.marke-text span { font-size: .82rem; }
.navi a { font-weight: 700; font-size: .98rem; }
.navi a[aria-current="page"] { color: var(--text); box-shadow: inset 0 -3px 0 var(--marke); }
.kopf-anruf svg { width: 1.2em; height: 1.2em; }
@media (max-width: 520px) { .marke img { height: 44px; } .marke-text b { font-size: 1.45rem; } .marke-text span { font-size: .78rem; } }

/* ---------- Held: Vereinsfläche, großes Bild, nächster Termin als Anzeigetafel ---------- */
.held--verein { position: relative; isolation: isolate; overflow: hidden; padding: clamp(2.5rem, 1.5rem + 4vw, 5rem) 0 0;
  background: var(--marke); color: var(--marke-text); }
.held--verein::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 30rem; pointer-events: none;
  background: linear-gradient(104deg, transparent 0 34%, var(--hervor) 34% 41%, transparent 41% 48%, color-mix(in srgb, var(--hervor) 50%, transparent) 48% 51%, transparent 51%); opacity: .95; }
.held-verein-raster { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: end; }
.held--verein .held-text { padding-bottom: clamp(3rem, 2rem + 4vw, 6rem); align-self: center; }
.held--verein h1 { max-width: none; font-size: clamp(2.9rem, 1.5rem + 4.6vw, 5.7rem); }
/* Überschriften durchgehend in einer Farbe und einem Schnitt (keine hervorgehobenen Einzelwörter) */
.held--verein h1 strong, .held--spieltag h1 strong, h1 strong, h2 strong, h3 strong { color: inherit; font-weight: inherit; }
.held--verein .lead, .held--spieltag .lead { max-width: 34em; color: color-mix(in srgb, var(--marke-text) 86%, var(--marke)); }
.held--verein .held-fakten, .held--spieltag .held-fakten { color: color-mix(in srgb, var(--marke-text) 90%, var(--marke)); font-weight: 700; }
.held--verein .held-fakten svg, .held--spieltag .held-fakten svg { color: var(--hervor); }
.held--verein .knopf--rand, .held--spieltag .knopf--rand { color: var(--marke-text); border-color: color-mix(in srgb, var(--marke-text) 50%, transparent); }
.held--verein .knopf--rand:hover, .held--spieltag .knopf--rand:hover { background: var(--marke-text); color: var(--marke); border-color: var(--marke-text); }
.held-verein-bild { position: relative; }
.held-verein-bild .bild { aspect-ratio: 4 / 4.6; border-radius: var(--radius-bild) var(--radius-bild) 0 0; box-shadow: 0 -2px 0 rgb(255 255 255 / 6%); }

.tafel { position: absolute; left: clamp(-3.5rem, -3vw, -1rem); bottom: clamp(1.25rem, 3vw, 2.5rem); width: min(24rem, calc(100% - 1rem));
  overflow: hidden; border-radius: var(--radius); background: var(--karte); color: var(--text); box-shadow: 0 22px 50px rgb(8 20 13 / 32%); }
.tafel-kopf { display: flex; align-items: center; gap: .6rem; padding: .6rem 1.15rem; background: var(--hervor); color: var(--hervor-text);
  font-weight: 700; font-size: .92rem; letter-spacing: .02em; }
.tafel-kopf::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; }
.tafel-zeile { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: 1rem; align-items: center; padding: 1.1rem 1.15rem 1rem; }
.tafel-datum { display: grid; justify-items: center; padding: .55rem .2rem .5rem; border-radius: var(--radius); background: var(--marke); color: var(--marke-text);
  line-height: 1; font-variant-numeric: tabular-nums; }
.tafel-datum b { font: 800 2.5rem/1 var(--schrift-titel); }
.tafel-datum span { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.tafel-titel { font: 700 1.55rem/1.02 var(--schrift-titel); letter-spacing: .01em; }
.tafel-info { display: grid; gap: .2rem; margin-top: .45rem; color: var(--leise); font-size: .92rem; }
.tafel-info span { display: flex; align-items: center; gap: .4rem; }
.tafel-info svg { width: 1em; height: 1em; flex: none; color: var(--marke); }
.tafel-fuss { display: flex; justify-content: space-between; gap: 1rem; padding: .2rem 1.15rem .9rem; font-size: .92rem; font-weight: 700; }
.tafel-fuss a { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; color: var(--akzent-dunkel); }
.tafel-fuss svg { width: 1.1em; height: 1.1em; }

@media (max-width: 900px) {
  .held-verein-raster { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .held--verein::before { display: none; }
  .held--verein .held-text { padding-bottom: 2.25rem; }
  .held-verein-bild { margin-inline: -1.25rem; }
  .held-verein-bild .bild { aspect-ratio: 4 / 3; border-radius: 0; }
  .tafel { position: relative; left: auto; bottom: auto; width: auto; margin: -3.5rem 1.25rem 0; }
  .held--verein { padding-bottom: 1.5rem; }
}

/* ---------- Startbereich "Spieltag": Taktiktafel, Trikotstreifen, Vereinsfoto, Anzeigetafel mit Fallblatt ----------
   Ablauf rund 5 s, einmal: Streifen ziehen durch, Foto wird angeheftet, Kreide zeichnet Feld und Leute, dann den Spielzug,
   die Anzeigetafel fährt hoch und blättert auf den nächsten Termin, zuletzt der Satz auf der Tafel. Ohne Bewegung: Endzustand. */
.held--spieltag { position: relative; isolation: isolate; overflow: hidden; padding: clamp(2.5rem, 1.5rem + 4vw, 5rem) 0 clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  background: var(--marke); color: var(--marke-text);
  --tafel: color-mix(in srgb, var(--marke) 58%, #0B110D); --kreide: rgb(255 255 255 / 82%); --anzeige: #121614; --anzeige-text: #F4F0E3; }
.spieltag-raster { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.held--spieltag .held-text { position: relative; z-index: 2; }
.held--spieltag h1 { max-width: none; font-size: clamp(2.9rem, 1.5rem + 4.6vw, 5.7rem); }

.sp-buehne { position: relative; container-type: inline-size; width: 100%; max-width: 560px; aspect-ratio: 1 / 1.18; justify-self: end; }
.sp-streifen { position: absolute; z-index: 0; top: -45%; bottom: -45%; left: 10cqw; width: 22cqw; transform: skewX(-13deg); pointer-events: none; }
.sp-streifen i { position: absolute; top: 0; bottom: 0; left: 0; width: 9cqw; background: var(--hervor); }
.sp-streifen i + i { left: 12.5cqw; width: 3.5cqw; background: color-mix(in srgb, var(--hervor) 55%, transparent); }

.sp-tafel { position: absolute; z-index: 1; top: 0; right: 0; width: 80%; aspect-ratio: 300 / 420; border: 1.1cqw solid #CDD0CA; border-radius: 6px;
  background: radial-gradient(120% 80% at 28% 18%, color-mix(in srgb, var(--tafel) 86%, #fff), var(--tafel) 70%);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 25%), inset 0 0 4cqw rgb(0 0 0 / 30%), 0 2px 0 #9EA29B, 0 26px 50px -12px rgb(0 0 0 / 50%); }
.sp-svg { position: absolute; left: 5%; right: 5%; bottom: 3%; width: 90%; height: auto; overflow: visible; }
.sp-l { fill: none; stroke: var(--kreide); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.sp-fein { stroke: rgb(255 255 255 / 26%); stroke-width: 1.4; }
.sp-netz { stroke: #fff; stroke-width: 3.6; }
.sp-punkt { fill: var(--kreide); }
.sp-zug { stroke: #fff; stroke-width: 2.4; }
.sp-schuss, .sp-strecke { stroke: var(--hervor); stroke-width: 3.6; }
.sp-strecke { stroke-width: 4.4; }
.sp-maske { stroke: #fff; stroke-width: 8; }
.sp-flug { stroke: rgb(255 255 255 / 42%); stroke-width: 1.6; }
.sp-pfeil.sp-flug { stroke: rgb(255 255 255 / 42%); stroke-width: 1.6; }
.sp-lauf { fill: none; stroke: #fff; stroke-width: 2.2; stroke-dasharray: 5 6; stroke-linecap: round; }
.sp-pfeil { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sp-pfeil.sp-schuss, .sp-pfeil.sp-strecke { stroke: var(--hervor); stroke-width: 3.2; }
.sp-eigen { fill: var(--hervor); stroke: var(--tafel); stroke-width: 2.5; }
.sp-gegner { fill: none; stroke: rgb(255 255 255 / 70%); stroke-width: 2.6; stroke-linecap: round; }
.sp-ball { fill: #fff; }
.sp-welle { fill: none; stroke: var(--hervor); stroke-width: 2; opacity: 0; }
.sp-kreide { position: absolute; top: 2.2%; left: 7%; right: 6%; margin: 0; color: var(--kreide); text-align: right;
  font: 700 clamp(.95rem, 4.6cqw, 1.7rem)/1.1 var(--schrift-titel); letter-spacing: .03em; transform: rotate(-1.5deg); }

/* Vereinsfoto, an die Tafel geheftet */
.sp-foto { position: absolute; z-index: 2; left: 0; top: 21cqw; width: 31cqw; margin: 0; padding: 1.3cqw 1.3cqw 0; background: #FBFAF6; transform: rotate(-3deg);
  box-shadow: 0 2px 4px rgb(0 0 0 / 12%), 0 20px 36px -12px rgb(0 0 0 / 45%); }
.sp-foto::before { content: ""; position: absolute; z-index: 1; top: -1.6cqw; left: 50%; width: 12cqw; height: 3.4cqw; translate: -50% 0; rotate: 4deg;
  background: color-mix(in srgb, var(--hervor) 70%, #fff); opacity: .85; }
.sp-foto .bild { aspect-ratio: 4 / 4.8; border-radius: 0; }
.sp-foto figcaption { margin: 0; padding: 1.4cqw .2em 1.7cqw; color: #33392F; text-align: center; font-size: clamp(.66rem, 2.3cqw, .86rem); line-height: 1.25; }

/* Anzeigetafel */
.az { position: absolute; z-index: 3; left: 0; bottom: 0; width: 74%; padding: 3cqw 3.6cqw .4cqw; border-radius: 6px; background: var(--anzeige); color: var(--anzeige-text);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 6%), 0 28px 60px -14px rgb(0 0 0 / 60%); }
.az-kopf { display: flex; align-items: center; gap: .55rem; margin-bottom: 2.4cqw; font-size: .88rem; font-weight: 700; color: var(--anzeige-text); }
.az-lampe { flex: none; width: .55rem; height: .55rem; border-radius: 50%; background: var(--hervor); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hervor) 25%, transparent); }
.az-seit { margin-left: auto; color: rgb(244 240 227 / 62%); }
.az-zeile { margin: 0; }
.az-text { margin-top: 2.6cqw; }
.az-titel { font: 700 clamp(1.3rem, 4.5cqw, 1.9rem)/1.05 var(--schrift-titel); letter-spacing: .01em; color: #fff; text-wrap: balance; }
.az-ort { display: flex; align-items: center; gap: .4rem; margin-top: .35rem; font-size: .92rem; color: rgb(244 240 227 / 72%); }
.az-ort svg { flex: none; width: 1em; height: 1em; color: var(--hervor); }
.az-fuss { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 1rem; margin-top: 2cqw; border-top: 1px solid rgb(255 255 255 / 12%); font-size: .92rem; font-weight: 700; }
.az-fuss a { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; color: var(--anzeige-text); text-decoration: none; }
.az-fuss a:hover { color: var(--hervor); }
.az-fuss svg { width: 1.05em; height: 1.05em; color: var(--hervor); transition: transform .2s; }
.az-fuss a:hover svg { transform: translateX(2px); }

/* Fallblatt: zwei Hälften je Feld, die Blätter klappen per CSS (rotateX) */
.ff-reihe { display: flex; flex-wrap: wrap; gap: .3em; font: 800 5.6cqw/1 var(--schrift-titel); font-variant-numeric: tabular-nums; }
.ff-gruppe { display: flex; gap: .07em; }
.ff { position: relative; display: block; width: .74em; height: 1.22em; perspective: 3em; color: var(--anzeige-text); }
.ff-o, .ff-u { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; backface-visibility: hidden; }
.ff-o { top: 0; border-radius: .07em .07em 0 0; background: linear-gradient(#323833, #2A2F2B); transform-origin: 50% 100%; }
.ff-u { bottom: 0; border-radius: 0 0 .07em .07em; background: linear-gradient(#262A27, #1F2320); transform-origin: 50% 0; }
.ff-o > span, .ff-u > span { display: block; box-sizing: border-box; height: 200%; padding-top: .09em; line-height: 1.22em; text-align: center; }
.ff-u > span { transform: translateY(-50%); }
.ff::after { content: ""; position: absolute; z-index: 5; left: 0; right: 0; top: calc(50% - .5px); height: 1px; background: rgb(0 0 0 / 70%); }
.ff-b, .ff-a, .ff-start { display: none; }
.ff-trenner { align-self: center; width: .22em; text-align: center; color: rgb(244 240 227 / 70%); }

@media (max-width: 900px) {
  .spieltag-raster { grid-template-columns: minmax(0, 1fr); }
  .sp-buehne { justify-self: center; max-width: 560px; aspect-ratio: 1 / 1.3; }
  .sp-streifen { top: -6%; bottom: -14%; }
  .sp-tafel { width: 84%; }
  .sp-foto { top: 30cqw; width: 30cqw; }
  .az { width: 100%; padding: 3.6cqw 4.4cqw .4cqw; }
  .ff-reihe { font-size: 7.4cqw; }
  .az-titel { font-size: clamp(1.35rem, 6.4cqw, 1.9rem); }
}

@media (prefers-reduced-motion: no-preference) {
  .sp-streifen i { animation: sp-streifen 1s cubic-bezier(.2, .8, .2, 1) both; }
  .sp-streifen i + i { animation-delay: .14s; }
  .sp-tafel { animation: sp-auf .7s cubic-bezier(.2, .8, .2, 1) .15s both; }
  .sp-foto { animation: sp-foto .8s cubic-bezier(.2, .8, .2, 1) .7s both; }
  .sp-l { stroke-dashoffset: 1; animation: sp-zeichnen .7s cubic-bezier(.45, 0, .2, 1) forwards; }
  .sp-f1 { animation-duration: 1s; animation-delay: .55s; } .sp-f2 { animation-delay: .8s; } .sp-f3 { animation-delay: .95s; } .sp-f4 { animation-delay: 1.05s; }
  .sp-f5 { animation-delay: 1.15s; } .sp-f6 { animation-delay: 1.25s; } .sp-f7 { animation-delay: 1.3s; } .sp-f8 { animation-delay: 1.35s; }
  .sp-netz { animation-delay: 1.2s; }
  .sp-punkt { opacity: 0; animation: sp-da .3s ease 1.45s forwards; }
  .sp-eigen, .sp-gegner, .sp-ball { transform-box: fill-box; transform-origin: center; animation: sp-setzen .4s cubic-bezier(.3, 1.5, .5, 1) both; }
  .sp-s1 { animation-delay: 1.55s; } .sp-s2 { animation-delay: 1.63s; } .sp-s3 { animation-delay: 1.71s; }
  .sp-s4 { animation-delay: 1.79s; } .sp-s5 { animation-delay: 1.87s; } .sp-s6 { animation-delay: 1.95s; }
  .sp-gegner { animation-name: sp-da; animation-duration: .3s; }
  .sp-z1 { animation-duration: .55s; animation-delay: 2.1s; } .sp-z2 { animation-delay: 2.5s; } .sp-z3 { animation-delay: 2.62s; }
  .sp-z4 { animation-duration: .5s; animation-delay: 3s; } .sp-z5 { animation-duration: .35s; animation-delay: 3.4s; animation-timing-function: cubic-bezier(.5, 0, .9, .6); }
  .sp-pfeil { opacity: 0; animation: sp-da .2s ease forwards; }
  .sp-p1 { animation-delay: 2.62s; } .sp-p2 { animation-delay: 3.15s; } .sp-p3 { animation-delay: 3.3s; } .sp-p4 { animation-delay: 3.48s; } .sp-p5 { animation-delay: 3.74s; }
  .sp-ball { animation-delay: 3.74s; }
  .sp-welle { transform-box: fill-box; transform-origin: center; animation: sp-welle 1s ease-out 3.78s both; }
  .sp-tafel--laufen .sp-z1 { animation-duration: 1.6s; animation-timing-function: cubic-bezier(.4, 0, .3, 1); }
  .sp-tafel--laufen .sp-p1 { animation-delay: 3.7s; }
  .sp-kreide { clip-path: inset(0 100% 0 0); animation: sp-schreiben .9s steps(18, end) 4.3s forwards; }

  .az { animation: sp-auf .6s cubic-bezier(.2, .8, .2, 1) 2.35s both; }
  .az-text { animation: sp-da .5s ease 4.25s both; }
  .az-lampe { animation: az-lampe 1.4s ease 4.3s both; }
  .ff { --f: .16s; --d: 2.8s; --k: 0; }
  .ff-b, .ff-a, .ff-start { display: block; }
  .ff-b { animation: ff-ab calc(var(--f) / 2) ease-in both; animation-delay: calc(var(--d) + var(--k) * var(--f)); }
  .ff-a { animation: ff-auf calc(var(--f) / 2) ease-out both; animation-delay: calc(var(--d) + var(--k) * var(--f) + var(--f) / 2); }
  .ff-k1 { --k: 1; } .ff-k2 { --k: 2; }
  .ff-2 { --d: 2.88s; } .ff-3 { --d: 2.96s; } .ff-4 { --d: 3.04s; } .ff-5 { --d: 3.12s; } .ff-6 { --d: 3.2s; }
  .ff-7 { --d: 3.28s; } .ff-8 { --d: 3.36s; } .ff-9 { --d: 3.44s; } .ff-10 { --d: 3.52s; } .ff-11 { --d: 3.6s; } .ff-12 { --d: 3.68s; }
}
@keyframes sp-streifen { from { transform: translateY(-100%); } to { transform: none; } }
@keyframes sp-auf { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes sp-foto { from { opacity: 0; transform: translate(-10%, 6%) rotate(-10deg); } to { opacity: 1; transform: rotate(-3deg); } }
@keyframes sp-zeichnen { to { stroke-dashoffset: 0; } }
@keyframes sp-da { from { opacity: 0; } to { opacity: 1; } }
@keyframes sp-setzen { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }
@keyframes sp-welle { 0% { opacity: .95; transform: scale(.4); } 100% { opacity: 0; transform: scale(2.4); } }
@keyframes sp-schreiben { to { clip-path: inset(0 0 0 0); } }
@keyframes az-lampe { 0%, 30%, 60% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--hervor) 25%, transparent); } 15%, 45% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--hervor) 35%, transparent), 0 0 14px var(--hervor); } 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--hervor) 25%, transparent); } }
@keyframes ff-ab { from { transform: rotateX(0); } to { transform: rotateX(-90deg); visibility: hidden; } }
@keyframes ff-auf { from { transform: rotateX(90deg); } to { transform: rotateX(0); } }

/* ---------- Seitenkopf der Unterseiten ---------- */
.seitenkopf { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(2.75rem, 1.75rem + 4vw, 5.5rem) clamp(2.25rem, 1.5rem + 3vw, 4rem);
  background: var(--marke); color: var(--marke-text); }
.seitenkopf::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; right: -6rem; width: 28rem; pointer-events: none;
  background: linear-gradient(104deg, transparent 0 40%, var(--hervor) 40% 47%, transparent 47% 54%, color-mix(in srgb, var(--hervor) 50%, transparent) 54% 57%, transparent 57%); }
.seitenkopf h1 { max-width: 15ch; font-size: clamp(2.7rem, 1.4rem + 4.6vw, 5.4rem); }
.seitenkopf .lead { margin-top: 1.25rem; max-width: 40em; color: color-mix(in srgb, var(--marke-text) 86%, var(--marke)); }
.seitenkopf .knoepfe { margin-top: 1.75rem; }
.seitenkopf-text { max-width: 54rem; }
.sprung { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem); }
.sprung a { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .5rem .9rem; border: 1.5px solid color-mix(in srgb, var(--marke-text) 34%, transparent);
  border-radius: var(--radius); color: var(--marke-text); text-decoration: none; font-weight: 700; font-size: .95rem; transition: background-color .2s, color .2s, border-color .2s; }
.sprung a:hover { background: var(--hervor); border-color: var(--hervor); color: var(--hervor-text); }
.sprung svg { width: 1em; height: 1em; }
/* Gründungsjahr als Kontur hinter den Streifen */
.sk-jahr { position: absolute; z-index: -1; right: clamp(4rem, 9vw, 9rem); bottom: -.16em; pointer-events: none; user-select: none;
  font: 800 clamp(9rem, 4rem + 14vw, 19rem)/1 var(--schrift-titel); letter-spacing: -.01em; color: transparent;
  -webkit-text-stroke: 2px color-mix(in srgb, var(--marke-text) 16%, transparent); }
@media (max-width: 720px) { .seitenkopf::before { display: none; } .sk-jahr { right: -.1em; font-size: 9rem; -webkit-text-stroke-width: 1.5px; } }
@media (prefers-reduced-motion: no-preference) { .sk-jahr { animation: sp-auf 1.2s cubic-bezier(.2, .8, .2, 1) .2s both; } }

/* ---------- Kennzahlen als Anzeigetafel ---------- */
.zahlen-abschnitt { border-bottom: 1px solid var(--linie); }
.zahlen { gap: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.zahlen li { gap: .5rem; padding: .25rem clamp(1rem, .5rem + 1.5vw, 2rem); border-top: 0; border-left: 1px solid var(--linie); }
.zahlen li:first-child { border-left: 0; padding-left: 0; }
.zahlen b { font-size: clamp(3.2rem, 2.2rem + 3vw, 5rem); line-height: .85; color: var(--marke); }
.zahlen span { font-size: 1rem; max-width: 16em; }
@media (max-width: 720px) {
  .zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 0; }
  .zahlen li { border-left: 0; padding: 0 1rem 0 0; }
  .zahlen li:nth-child(even) { border-left: 1px solid var(--linie); padding-left: 1rem; }
}

/* ---------- Platzlage (immer Punkt plus Wort, nie nur Farbe) ---------- */
.platz { display: inline-flex; align-items: center; gap: .4rem; padding: .22rem .6rem .22rem .5rem; border-radius: 999px; white-space: nowrap;
  font-size: .82rem; font-weight: 700; line-height: 1.3; background: color-mix(in srgb, var(--gut) 13%, var(--karte)); color: #1D5634; }
.platz::before { content: ""; flex: none; width: .55rem; height: .55rem; border-radius: 50%; background: var(--gut); }
.platz--warte { background: color-mix(in srgb, var(--warn) 15%, var(--karte)); color: #723C05; }
.platz--warte::before { background: var(--warn); }
.platz--stopp { background: color-mix(in srgb, var(--stopp) 13%, var(--karte)); color: #87301F; }
.platz--stopp::before { background: var(--stopp); }

/* ---------- Sport finden ---------- */
.sportkarten { --spalte: 330px; }
.sportkarte { position: relative; display: flex; flex-direction: column; }
.sportkarte .bild { --format: 16 / 10; }
.sportkarte .bild img { transition: transform .4s ease; }
.sportkarte:hover .bild img { transform: scale(1.03); }
.sportkarte .karte-inhalt { flex: 1; display: flex; flex-direction: column; gap: .7rem; padding: 0 1.4rem 1.25rem; }
.sportkarte-symbol { position: relative; z-index: 1; display: grid; place-items: center; width: 3.4rem; height: 3.4rem; margin-top: -1.7rem;
  border-radius: 50%; background: var(--marke); color: var(--hervor); box-shadow: 0 0 0 4px var(--karte); }
.sportkarte-symbol svg { width: 1.6rem; height: 1.6rem; }
.sportkarte h3 { font-size: 2.1rem; line-height: .95; }
.fuer { display: flex; flex-wrap: wrap; gap: .35rem; padding: 0; list-style: none; }
.fuer li { padding: .15rem .55rem; border-radius: 999px; background: var(--flaeche); font-size: .82rem; font-weight: 700; color: var(--text); }
.sportkarte .leise { font-size: .98rem; }
.sf-daten { display: grid; gap: .45rem; padding: .75rem 0 0; margin-top: .1rem; list-style: none; border-top: 1px solid var(--linie); font-size: .95rem; }
.sf-daten li { display: flex; align-items: flex-start; gap: .55rem; }
.sf-daten svg { flex: none; width: 1.1rem; height: 1.1rem; margin-top: .2rem; color: var(--marke); }
.sf-platz { flex-wrap: wrap; align-items: center !important; }
.platz-text { color: var(--leise); font-size: .9rem; }
.sf-fuss { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: auto; padding-top: .9rem; border-top: 1px solid var(--linie); font-weight: 700; }
.sf-pfeil { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: var(--radius); background: var(--akzent); color: var(--akzent-text); transition: transform .2s; }
.sf-pfeil svg { width: 1.2rem; height: 1.2rem; }
.sportkarte:hover .sf-pfeil { transform: translateX(3px); }
@media (max-width: 640px) { .sportkarte .bild { --format: 2 / 1; } }
.bild--symbol { display: grid; place-items: center; background: var(--marke); color: var(--hervor); }
.bild--symbol svg { width: 4rem; height: 4rem; }

/* ---------- Abteilungen im Detail ---------- */
.abt-raster { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr); gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: start; }
.abteilung--rechts .abt-raster { grid-template-columns: minmax(0, 1.3fr) minmax(0, .85fr); }
.abteilung--rechts .abt-bild { order: 2; }
/* Abteilungen trennt Weißraum und eine dünne Linie, keine farbigen Bänder */
.abteilung + .abteilung { border-top: 1px solid var(--linie); }
.abt-bild { display: grid; gap: 1rem; }
@media (min-width: 901px) { .abt-bild { position: sticky; top: 104px; } }
.abt-bild .bild { --format: 4 / 3.4; }
.abt-text .kicker::before { display: none; }
.abt-text .kicker svg { width: 1.35em; height: 1.35em; color: var(--marke); }
.abt-text h2 { margin-bottom: 1rem; }
.abt-text .lead + .lead { margin-top: .8rem; }
.ansprech-kurz { display: flex; gap: .9rem; align-items: center; padding: 1rem 1.1rem; border-radius: var(--radius); background: var(--karte); border: 1px solid var(--linie); }
.ansprech-kurz b { display: block; font-size: .98rem; line-height: 1.35; }
.ansprech-kurz a { font-size: .92rem; word-break: break-word; }
.gruppen-rahmen { margin-top: 1.75rem; border-top: 3px solid var(--marke); }
.gruppen { width: 100%; border-collapse: collapse; font-size: .97rem; }
.gruppen thead th { padding: .7rem .75rem .6rem 0; text-align: left; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--leise); }
.gruppen th[scope="row"], .gruppen td { padding: .85rem .75rem .85rem 0; border-top: 1px solid var(--linie); text-align: left; vertical-align: top; }
.gruppen th[scope="row"] b { display: block; font-weight: 700; }
.gruppen th[scope="row"] span { display: block; color: var(--leise); font-weight: 400; font-size: .9rem; }
.gruppen td.zahl { white-space: nowrap; font-variant-numeric: tabular-nums; }
.gr-ort { display: block; color: var(--leise); font-size: .88rem; }
.gruppen .gr-status { text-align: right; padding-right: 0; }
.abt-fuss { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; justify-content: space-between; margin-top: 1.75rem; }
.probe-zeile { display: inline-flex; align-items: center; gap: .55rem; font-weight: 700; }
.probe-zeile svg { width: 1.3rem; height: 1.3rem; color: var(--marke); }
@media (max-width: 900px) {
  .abt-raster, .abteilung--rechts .abt-raster { grid-template-columns: minmax(0, 1fr); }
  .abt-bild, .abteilung--rechts .abt-bild { display: contents; }
  .abt-bild .bild { order: 0; }
  .abt-text { order: 1; }
  .ansprech-kurz { order: 2; }
}
@media (max-width: 640px) {
  .gruppen thead { display: none; }
  .gruppen tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem 1rem; padding: .9rem 0; border-top: 1px solid var(--linie); }
  .gruppen th[scope="row"], .gruppen td { padding: 0; border: 0; }
  .gruppen .gr-status { grid-column: 2; grid-row: 1; }
  .gruppen td:nth-child(2), .gruppen td:nth-child(3) { grid-column: 1 / -1; }
  .gruppen td:nth-child(3)::before { content: "Übungsleitung: "; color: var(--leise); }
  .gruppen td.zahl { white-space: normal; }
}

/* ---------- Trainingszeiten-Matrix ---------- */
.matrix-werkzeuge { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.matrix-werkzeuge:not(:has(:not([hidden]))) { display: none; }
.filter { display: flex; flex-wrap: wrap; gap: .45rem; }
.filter button { min-height: 44px; padding: .45rem .9rem; border: 1.5px solid var(--linie); border-radius: var(--radius); background: var(--karte); color: var(--text);
  font: 700 .95rem/1.2 var(--schrift-text); cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
.filter button:hover { border-color: var(--marke); }
.filter button[aria-pressed="true"] { background: var(--marke); border-color: var(--marke); color: var(--marke-text); }
.matrix-rahmen { overflow-x: auto; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--karte); }
.matrix { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.matrix thead th { padding: .85rem .7rem; background: var(--marke); color: var(--marke-text); text-align: left; font-size: .9rem; font-weight: 700; letter-spacing: .04em; }
.matrix thead th:first-child { padding-left: 1.1rem; }
.matrix thead abbr { text-decoration: none; }
.matrix thead th[data-heute] { background: var(--hervor); color: var(--hervor-text); }
.matrix thead th[data-heute]::after { content: " · Heute"; font-weight: 400; }
.matrix tbody th[scope="row"] { width: 15.5rem; padding: .85rem 1rem .85rem 1.1rem; text-align: left; vertical-align: top; font-weight: 400; }
.matrix tbody th[scope="row"] b { display: block; font-weight: 700; line-height: 1.3; }
.matrix tbody th[scope="row"] span { display: block; font-size: .88rem; color: var(--leise); line-height: 1.35; }
.matrix tbody th[scope="row"] small { display: block; margin-top: .3rem; font-size: .82rem; color: var(--leise); }
.matrix tbody tr + tr > * { border-top: 1px solid var(--linie); }
.matrix td { min-width: 6.75rem; padding: .6rem .45rem; border-left: 1px solid var(--linie); vertical-align: top; }
.matrix td[data-heute] { background: color-mix(in srgb, var(--hervor) 12%, var(--karte)); }
.matrix-abteilung th { padding: .7rem 1.1rem .6rem !important; border-top: 1px solid var(--linie); background: var(--flaeche); text-align: left;
  font: 800 1.35rem/1 var(--schrift-titel) !important; letter-spacing: .01em; }
.matrix-abteilung th svg { display: inline-block; width: 1.05em; height: 1.05em; margin: 0 .45rem -.12em 0; color: var(--marke); }
.slot { display: grid; gap: .2rem; padding: .45rem .5rem .45rem .6rem; border-left: 3px solid var(--marke); border-radius: 3px;
  background: color-mix(in srgb, var(--marke) 8%, var(--karte)); font-size: .86rem; line-height: 1.3; }
.slot + .slot { margin-top: .35rem; }
.slot .zeit b { font-weight: 700; font-size: .95rem; }
.ort-kurz { display: inline-flex; align-items: center; justify-self: start; padding: .05rem .4rem; border-radius: 3px; background: var(--karte);
  border: 1px solid var(--linie); font-size: .74rem; font-weight: 700; color: var(--leise); letter-spacing: .02em; }
.matrix .matrix-status { width: 9.5rem; padding-right: 1.1rem; text-align: right; }
.matrix tbody .matrix-status { vertical-align: top; padding-top: .85rem; }
.matrix-unten { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; justify-content: space-between; margin-top: 1.5rem; }
.legende, .ort-legende { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; padding: 0; list-style: none; font-size: .92rem; color: var(--leise); }
.legende li, .ort-legende li { display: inline-flex; align-items: center; gap: .5rem; }

/* Heute im Training (füllt vorlage.js) */
.heute-leiste { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem 1.5rem; align-items: start; margin-bottom: 1.75rem; padding: 1.1rem 1.25rem;
  border-radius: var(--radius); background: var(--karte); border: 1px solid var(--linie); border-left: 6px solid var(--hervor); }
.heute-titel { font: 800 1.6rem/1 var(--schrift-titel); }
.heute-leiste ul { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; padding: 0; list-style: none; }
.heute-leiste li { display: inline-flex; align-items: baseline; gap: .5rem; font-size: .95rem; }
.heute-leiste li b { font-variant-numeric: tabular-nums; }
.heute-leiste li span { color: var(--leise); }
@media (max-width: 640px) { .heute-leiste { grid-template-columns: minmax(0, 1fr); } .heute-leiste ul { display: grid; gap: .4rem; } }

/* Handy: Liste nach Tagen statt Tabelle */
.tagesliste { display: none; }
@media (max-width: 860px) {
  .matrix-rahmen { display: none; }
  .tagesliste { display: grid; gap: 2rem; }
  .matrix-werkzeuge [data-drucken] { display: none; }
}
.tl-tag h3 { padding-bottom: .5rem; border-bottom: 3px solid var(--marke); font-size: 1.8rem; }
.tl-tag[data-heute] h3::after { content: "Heute"; margin-left: .6rem; padding: .1rem .5rem; border-radius: 3px; background: var(--hervor); color: var(--hervor-text);
  font: 700 .8rem/1.4 var(--schrift-text); vertical-align: middle; letter-spacing: .04em; }
.tl-tag ul { padding: 0; list-style: none; }
.tl-tag li { display: grid; grid-template-columns: 4.1rem minmax(0, 1fr) auto; gap: .8rem; align-items: start; padding: .9rem 0; border-bottom: 1px solid var(--linie); }
.tl-tag .zeit { display: grid; font-variant-numeric: tabular-nums; }
.tl-tag .zeit b { font: 800 1.45rem/1 var(--schrift-titel); }
.tl-tag .zeit span { font-size: .8rem; color: var(--leise); }
.tl-text { display: grid; gap: .1rem; min-width: 0; }
.tl-text b { font-weight: 700; line-height: 1.3; }
.tl-text span { font-size: .88rem; color: var(--leise); line-height: 1.4; }
.tl-text svg { display: inline-block; width: .95em; height: .95em; margin: 0 .3rem -.1em 0; color: var(--marke); }

/* ---------- Sportstätten ---------- */
.staetten { --spalte: 240px; }
.staette { display: flex; flex-direction: column; gap: .55rem; }
.staette-kopf .ort-kurz { padding: .2rem .55rem; background: var(--marke); border-color: var(--marke); color: var(--marke-text); font-size: .8rem; }
.staette h3 { font-size: 1.6rem; }
.staette .leise { font-size: .93rem; }
.staette-wer { font-size: .88rem; font-weight: 700; color: var(--akzent-dunkel); }
.staette .knopf--leise { justify-self: start; margin-top: auto; padding-left: 0; }

/* ---------- Probetraining ---------- */
.probe-zahl { display: flex; align-items: center; gap: 1.1rem; margin: .25rem 0 1.75rem; }
.probe-zahl b { font: 800 clamp(5rem, 3.5rem + 5vw, 7.5rem)/.8 var(--schrift-titel); color: var(--marke); letter-spacing: -.01em; }
.probe-zahl > span { display: grid; gap: .2rem; max-width: 15em; font-size: 1.05rem; line-height: 1.4; }
.probe-zahl strong { justify-self: start; margin-top: .3rem; padding: .15rem .5rem; border-radius: 3px; background: var(--hervor); color: var(--hervor-text); font-size: .9rem; line-height: 1.35; }
.probe-h { margin: 1.75rem 0 .8rem; font-size: 1.55rem; }
.probe-schritte { counter-reset: probe; display: grid; gap: 1rem; padding: 0; list-style: none; }
.probe-schritte li { counter-increment: probe; position: relative; padding-left: 3.1rem; }
.probe-schritte li::before { content: counter(probe); position: absolute; left: 0; top: -.1rem; display: grid; place-items: center; width: 2.2rem; height: 2.2rem;
  border-radius: 50%; background: var(--marke); color: var(--hervor); font: 800 1.2rem/1 var(--schrift-titel); }
.probe-schritte b { display: block; font-weight: 700; }
.probe-schritte p { font-size: .97rem; }
.probe-kurz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.probe-kurz .kopfzeile { margin-bottom: 1.5rem; }
.probe-kurz .knoepfe { margin-top: .5rem; }
.probe-schritte--quer { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.probe-schritte--quer li { padding: 3.2rem 0 0; }
.probe-schritte--quer li::before { top: 0; }
.probe-mitbringen { margin-top: 2rem; padding: 1.25rem 1.4rem; border-radius: var(--radius); background: var(--karte); border: 1px solid var(--linie); }
.probe-mitbringen .probe-h { margin-top: 0; }
@media (max-width: 900px) { .probe-kurz { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .probe-schritte--quer { grid-template-columns: minmax(0, 1fr); } .probe-schritte--quer li { padding: 0 0 0 3.1rem; } }

/* ---------- Beiträge und Familien-Rechner ---------- */
@media (min-width: 861px) { .beitrag-raster { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
.beitrag-rahmen { border-radius: var(--radius); background: var(--karte); border: 1px solid var(--linie); overflow: hidden; }
.beitragstabelle { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.beitragstabelle th, .beitragstabelle td { padding: .9rem 1.1rem; text-align: left; vertical-align: top; }
.beitragstabelle thead th { background: var(--marke); color: var(--marke-text); font-size: .85rem; font-weight: 700; letter-spacing: .04em; }
.beitragstabelle td, .beitragstabelle thead th + th { text-align: right; white-space: nowrap; }
.beitragstabelle tbody tr + tr > * { border-top: 1px solid var(--linie); }
.beitragstabelle tbody th { font-weight: 700; }
.beitragstabelle tbody th small { display: block; font-weight: 400; font-size: .88rem; color: var(--leise); }
.beitragstabelle td { font-weight: 700; font-size: 1.05rem; }
.beitrag-familie > * { background: color-mix(in srgb, var(--hervor) 20%, var(--karte)); }
.beitrag-familie th { box-shadow: inset 5px 0 0 var(--hervor); }
.beitrag-extra { display: grid; gap: 0; margin-top: 1.25rem; padding: 0; list-style: none; }
.beitrag-extra li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; padding: .7rem 0; border-bottom: 1px solid var(--linie); font-size: .97rem; }
.beitrag-extra span { color: var(--leise); }
.beitrag-hinweise { display: grid; gap: .6rem; margin-top: 1.25rem; }
@media (max-width: 520px) {
  .beitragstabelle th, .beitragstabelle td { padding: .75rem .65rem; }
  .beitragstabelle thead th { font-size: .78rem; letter-spacing: .02em; }
  .beitragstabelle td { font-size: 1rem; }
}
.rechner { display: grid; gap: 1.1rem; padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); border-radius: var(--radius); background: var(--karte); border: 1px solid var(--linie);
  border-top: 6px solid var(--marke); box-shadow: var(--schatten); }
@media (min-width: 861px) { .rechner { position: sticky; top: 104px; } }
.rechner h3 { font-size: 2rem; }
.zaehler-liste { display: grid; }
.zaehler { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .7rem 0; border-top: 1px solid var(--linie); }
.zaehler--zuschlag .zaehler-text b { font-weight: 400; }
.zaehler-text { display: grid; line-height: 1.3; }
.zaehler-text small { color: var(--leise); font-size: .85rem; }
.zaehler-knoepfe { display: inline-flex; align-items: center; gap: .25rem; flex: none; }
.zaehler-knoepfe button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1.5px solid var(--linie); border-radius: var(--radius);
  background: var(--grund); color: var(--text); cursor: pointer; transition: background-color .2s, border-color .2s; }
.zaehler-knoepfe button:hover { border-color: var(--marke); background: var(--karte); }
.zaehler-knoepfe button:disabled { opacity: .4; cursor: default; }
.zaehler-knoepfe button svg { width: 1.1rem; height: 1.1rem; }
.zaehler-knoepfe output { min-width: 2.2rem; text-align: center; font: 800 1.7rem/1 var(--schrift-titel); font-variant-numeric: tabular-nums; }
.rechner-ergebnis { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem 1rem; padding: 1.1rem 1.25rem; border-radius: var(--radius); background: var(--marke); color: var(--marke-text); }
.rechner-ergebnis p { display: grid; }
.rechner-ergebnis span { font-size: .85rem; font-weight: 700; letter-spacing: .04em; opacity: .85; }
.rechner-ergebnis b { font: 800 clamp(2.6rem, 2rem + 2vw, 3.4rem)/1 var(--schrift-titel); color: var(--hervor); font-variant-numeric: tabular-nums; }
.rechner-ergebnis .rechner-zeile { grid-column: 1 / -1; display: block; margin-top: .5rem; padding-top: .6rem; border-top: 1px solid rgb(255 255 255 / 18%); font-size: .95rem; }
.rechner-ergebnis .rechner-zeile + .rechner-zeile { margin-top: 0; border-top: 0; padding-top: .1rem; }
.rechner .knoepfe .knopf { width: 100%; }

/* ---------- Hilf mit ---------- */
.aufgaben { --spalte: 300px; }
.aufgabe { display: flex; flex-direction: column; gap: .7rem; }
.aufgabe h3 { font-size: 1.7rem; }
.aufgabe-kopf { display: flex; }
.aufgabe .etikett { color: var(--text); }
.aufgabe .etikett--akzent { background: color-mix(in srgb, var(--hervor) 32%, var(--karte)); }
.aufgabe-meta { display: grid; gap: .4rem; padding: 0; list-style: none; font-size: .95rem; }
.aufgabe-meta li { display: flex; gap: .55rem; align-items: flex-start; }
.aufgabe-meta svg { flex: none; width: 1.1rem; height: 1.1rem; margin-top: .2rem; color: var(--marke); }
.aufgabe-fuss { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--linie); }
.aufgabe-fuss span { font-size: .88rem; color: var(--leise); }
.aufgabe-fuss .knopf { min-height: 44px; padding: .55em 1em; font-size: .95rem; }
.helfen-titel { font: 800 clamp(2rem, 1.5rem + 1.8vw, 2.8rem)/.98 var(--schrift-titel); margin-bottom: 1rem; text-wrap: balance; }
.helfen-text .leise + .leise { margin-top: .8rem; }

/* ---------- Kinderschutz ---------- */
.kinderschutz { background: color-mix(in srgb, var(--marke) 6%, var(--grund)); border-block: 1px solid color-mix(in srgb, var(--marke) 14%, var(--linie)); }
.ks-raster { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.ks-symbol { display: grid; place-items: center; width: 3.75rem; height: 3.75rem; margin-bottom: 1.25rem; border-radius: 50%; background: var(--marke); color: var(--marke-text); }
.ks-symbol svg { width: 1.8rem; height: 1.8rem; }
.ks-text .kopfzeile { margin-bottom: 1.5rem; }
.ks-text .lead + .lead { margin-top: .6rem; }
.ks-seite { display: grid; gap: 1rem; }
.ks-person, .ks-hilfe { padding: 1.4rem 1.5rem; border-radius: var(--radius); background: var(--karte); border: 1px solid var(--linie); }
.ks-person { border-left: 5px solid var(--marke); }
.ks-label { margin-bottom: .9rem; font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--leise); }
.ks-name { display: flex; gap: .9rem; align-items: center; margin-bottom: .75rem; }
.ks-name b { display: block; font: 700 1.6rem/1.05 var(--schrift-titel); }
.ks-name div span { display: block; font-size: .92rem; color: var(--leise); }
.ks-wege { display: grid; gap: .3rem; margin-top: .8rem; }
.ks-wege a, .wege a { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; font-weight: 700; word-break: break-word; }
.ks-wege svg, .wege svg { flex: none; width: 1.1rem; height: 1.1rem; }
.ks-hilfe ul { display: grid; padding: 0; list-style: none; }
.ks-hilfe li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 1rem; padding: .7rem 0; border-top: 1px solid var(--linie); }
.ks-hilfe li b { font-weight: 700; }
.ks-hilfe li a { grid-row: span 2; align-self: center; font: 800 1.45rem/1 var(--schrift-titel); color: var(--marke); text-decoration: none; white-space: nowrap; }
.ks-hilfe li span { font-size: .88rem; color: var(--leise); }
@media (max-width: 900px) { .ks-raster { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .ks-hilfe li { grid-template-columns: minmax(0, 1fr); } .ks-hilfe li a { grid-row: auto; margin-top: .3rem; } }

/* ---------- Ansprechpartner ---------- */
.monogramm { display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; border-radius: 50%; background: var(--marke); color: var(--hervor);
  font: 800 1.25rem/1 var(--schrift-titel); letter-spacing: .03em; }
.monogramm--gross { width: 4.25rem; height: 4.25rem; font-size: 1.7rem; }
.personen { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); }
.person-karte { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.25rem; align-items: start; padding: 1.5rem;
  border-radius: var(--radius); background: var(--karte); border: 1px solid var(--linie); }
.person-karte > .bild { width: 4.25rem; }
.zustaendig { font-weight: 700; font-size: 1.05rem; line-height: 1.35; }
.person-karte h3 { margin-top: .45rem; font-size: 1.6rem; }
.rolle { font-size: .92rem; color: var(--leise); }
.wege { margin-top: .35rem; }
.wege a { font-size: .95rem; }

/* ---------- Sponsoren ---------- */
.stufe + .stufe { margin-top: 1.5rem; }
.stufe h3 { margin-bottom: .75rem; font: 700 .82rem/1.3 var(--schrift-text); letter-spacing: .1em; text-transform: uppercase; color: var(--leise); }
.stufe ul { display: grid; gap: .75rem; padding: 0; list-style: none; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
.stufe--haupt ul { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.stufe li { display: grid; place-content: center; justify-items: center; gap: .3rem; min-height: 6rem; padding: 1rem; border-radius: var(--radius);
  background: var(--karte); border: 1px solid var(--linie); text-align: center; }
.stufe--haupt li { min-height: 7.5rem; }
.stufe li b { font: 700 1.45rem/1.05 var(--schrift-titel); color: color-mix(in srgb, var(--text) 78%, var(--karte)); letter-spacing: .01em; }
.stufe--haupt li b { font-size: 1.9rem; color: var(--text); }
.stufe li span { font-size: .82rem; color: var(--leise); }
.partner-logo { max-width: 180px; filter: grayscale(1); opacity: .8; transition: filter .25s, opacity .25s; }
.stufe li:hover .partner-logo { filter: none; opacity: 1; }
.partner-aufruf { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--linie); }
.partner-aufruf p { max-width: 44em; color: var(--leise); }

/* ---------- Gemeinsame Module im Vereinston ---------- */
.termin-datum { background: var(--marke); color: var(--marke-text); }
.termin-datum b { font-size: 2.3rem; }
.termin-datum span { color: inherit; opacity: .85; }
.termin h3 { font-size: 1.6rem; }
.stimme { position: relative; padding-top: 3.2rem; }
.stimme::before { content: ""; position: absolute; left: 1.6rem; top: 1.5rem; width: 1.7rem; height: 1.25rem;
  background: linear-gradient(112deg, transparent 0 16%, var(--hervor) 16% 40%, transparent 40% 58%, var(--hervor) 58% 82%, transparent 82%); }
.stimme p { font: 400 1.08rem/1.6 var(--schrift-text); letter-spacing: 0; }
.stimme footer { font-weight: 700; color: var(--text); }
.ablauf li::before { color: var(--marke); font-size: 3rem; }
.zeitleiste li::before { border-color: var(--marke); }
.zeitleiste .jahr { font-size: 2.2rem; color: var(--marke); }
.liste-haken li::before { border-color: var(--marke); }
.kontakt-liste svg { color: var(--marke); }
.fragen summary { font-weight: 700; }
.symbol { background: color-mix(in srgb, var(--marke) 10%, transparent); color: var(--marke); }
.wahl input:checked + span { border-color: var(--marke); background: color-mix(in srgb, var(--marke) 10%, var(--karte)); }
.feld input:focus, .feld select:focus, .feld textarea:focus { border-color: var(--marke); box-shadow: 0 0 0 4px color-mix(in srgb, var(--marke) 18%, transparent); }
.haken input { accent-color: var(--marke); }
.formular h3 { font-size: 2rem; }
.felder-2 { align-items: end; }
.formular-abschnitt .zwei > div > .leise + .leise { margin-top: .8rem; }
.abschnitt--flaeche .formular, .abschnitt--flaeche .karte { border-color: color-mix(in srgb, var(--linie) 70%, var(--leise)); }
.geschichte .fliess { font-size: 1.1rem; }
.text-bild figcaption { font-size: .9rem; }

/* Abschluss auf Vereinsfläche mit Doppelstreifen */
.abschluss-abschnitt { position: relative; isolation: isolate; overflow: hidden; }
.abschluss-abschnitt::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -8rem; width: 24rem; pointer-events: none;
  background: linear-gradient(104deg, transparent 0 40%, var(--hervor) 40% 47%, transparent 47% 54%, color-mix(in srgb, var(--hervor) 50%, transparent) 54% 57%, transparent 57%); opacity: .9; }
.abschluss-abschnitt .wrap { position: relative; }
.abschluss h2 { font-size: clamp(2.4rem, 1.5rem + 3.4vw, 4.2rem); }
@media (max-width: 860px) { .abschluss-abschnitt::before { left: auto; right: -14rem; } }

/* Fuß */
.fuss { border-top: 6px solid var(--hervor); }
.fuss h2 { font-size: 2.1rem; }

/* ---------- Kleine Bewegung im Rest der Seite (ruhig, nur transform und opacity) ---------- */
/* Probetraining: die Zahl als Fallblatt in Vereinsfarbe */
.probe-zahl .ff-reihe { font-size: 1em; gap: .06em; align-items: center; }
.probe-zahl .ff { width: .66em; height: 1.08em; color: var(--hervor); }
.probe-zahl .ff-o { background: color-mix(in srgb, var(--marke) 88%, #fff); }
.probe-zahl .ff-u { background: var(--marke); }
.probe-zahl .ff-o > span, .probe-zahl .ff-u > span { line-height: 1.08em; padding-top: .06em; }
.probe-zahl .ff::after { background: color-mix(in srgb, var(--marke) 50%, #000); }
.ff-rest { margin-left: .04em; color: var(--marke); }

/* Trainingszeiten: Zeile beim Überfahren, Training, das gerade läuft */
.matrix tbody tr:not(.matrix-abteilung) > * { transition: background-color .2s; }
.matrix tbody tr:not(.matrix-abteilung):hover > * { background: color-mix(in srgb, var(--marke) 4%, var(--karte)); }
.matrix tbody tr:not(.matrix-abteilung):hover .slot { background: color-mix(in srgb, var(--marke) 14%, var(--karte)); }
.slot.laeuft { border-left-color: var(--hervor); background: color-mix(in srgb, var(--hervor) 22%, var(--karte)); }
.laeuft-marke { display: inline-flex; align-items: center; gap: .35rem; justify-self: start; font-size: .74rem; font-weight: 700; letter-spacing: .03em; color: var(--text); }
.laeuft-marke::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--gut); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gut) 25%, transparent); }

/* Sport finden: Trikotstreifen fahren beim Überfahren ins Bild */
.sportkarte .bild::after { content: ""; position: absolute; top: 0; bottom: 0; right: 1.1rem; width: 2.8rem; pointer-events: none;
  background: linear-gradient(104deg, transparent 0 22%, var(--hervor) 22% 50%, transparent 50% 62%, color-mix(in srgb, var(--hervor) 60%, transparent) 62% 74%, transparent 74%);
  transform: translateY(-101%); }
.termin-datum { transition: background-color .25s, color .25s; }
.termin:hover .termin-datum { background: var(--hervor); color: var(--hervor-text); }
.aufgabe, .staette, .person-karte { transition: border-color .2s, box-shadow .2s; }
.aufgabe:hover, .staette:hover, .person-karte:hover { border-color: color-mix(in srgb, var(--marke) 30%, var(--linie)); box-shadow: var(--schatten); }

@media (prefers-reduced-motion: no-preference) {
  .sportkarte .bild::after { transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
  .sportkarte:hover .bild::after, .sportkarte:focus-visible .bild::after { transform: none; }
  .sportkarte-symbol svg { transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); }
  .sportkarte:hover .sportkarte-symbol svg { transform: rotate(-12deg) scale(1.1); }
  .laeuft-marke::before { animation: laeuft 2s ease-in-out infinite; }

  /* Unterseiten: die Streifen ziehen beim Laden einmal durch */
  .seitenkopf::before { animation: sp-streifen 1s cubic-bezier(.2, .8, .2, 1) both; }
  .seitenkopf-text > * { animation: sp-auf .6s cubic-bezier(.2, .8, .2, 1) both; }
  .seitenkopf-text > :nth-child(2) { animation-delay: .08s; } .seitenkopf-text > :nth-child(3) { animation-delay: .16s; } .seitenkopf-text > :nth-child(n+4) { animation-delay: .24s; }

  /* Reihen ziehen nacheinander auf (vorlage.js setzt sp-reihe und sp-an); "backwards", damit Hover-Bewegung frei bleibt */
  .sp-reihe:not(.sp-an) > * { opacity: 0; }
  .sp-reihe.sp-an > * { animation: sp-auf .6s cubic-bezier(.2, .8, .2, 1) backwards; }
  .sp-reihe.sp-an > :nth-child(2) { animation-delay: .08s; } .sp-reihe.sp-an > :nth-child(3) { animation-delay: .16s; }
  .sp-reihe.sp-an > :nth-child(4) { animation-delay: .24s; } .sp-reihe.sp-an > :nth-child(5) { animation-delay: .32s; }
  .sp-reihe.sp-an > :nth-child(6) { animation-delay: .4s; } .sp-reihe.sp-an > :nth-child(n+7) { animation-delay: .48s; }

  /* Matrix: die Trainings leuchten Tag für Tag auf, wie eine Anzeigetafel */
  .sp-matrix:not(.sp-an) .slot { opacity: 0; }
  .sp-matrix.sp-an .slot { transform-origin: left center; animation: slot-an .45s cubic-bezier(.2, .8, .2, 1) backwards; }
  .sp-matrix.sp-an td[data-tag="2"] .slot { animation-delay: .09s; } .sp-matrix.sp-an td[data-tag="3"] .slot { animation-delay: .18s; }
  .sp-matrix.sp-an td[data-tag="4"] .slot { animation-delay: .27s; } .sp-matrix.sp-an td[data-tag="5"] .slot { animation-delay: .36s; }
  .sp-matrix.sp-an td[data-tag="6"] .slot { animation-delay: .45s; } .sp-matrix.sp-an td[data-tag="7"] .slot { animation-delay: .54s; }

  /* Probetraining: die Zahl blättert, wenn sie ins Bild kommt */
  .probe-zahl .ff { --d: .25s; --f: .24s; }
  .sp-warte:not(.sp-an) .ff-b, .sp-warte:not(.sp-an) .ff-a { animation-play-state: paused; }

  /* Abschluss: die Streifen ziehen ein, wenn das Band ins Bild kommt */
  .sp-wisch::before { transition: transform 1s cubic-bezier(.2, .8, .2, 1); }
  .sp-wisch:not(.sp-an)::before { transform: translateY(-100%); }
}
@keyframes slot-an { from { opacity: 0; transform: scaleX(.6); } to { opacity: 1; transform: none; } }
@keyframes laeuft { 0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--gut) 25%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--gut) 10%, transparent); } }

/* Druck: der Trainingsplan auf einer Seite */
@media print {
  .seitenkopf, .matrix-werkzeuge, .heute-leiste, .tagesliste, .fuss, .sportstaetten, .fragen-abschnitt { display: none !important; }
  .matrix-rahmen { display: block !important; border: 0; overflow: visible; }
  .matrix { font-size: 9pt; }
  .matrix thead th { background: #eee !important; color: #000 !important; }
  .slot { background: none; border-left-width: 2px; }
  .platz { background: none; padding: 0; }
}


/* Farben des Betriebs */
:root {
  --marke: #1E4D36;
  --marke-text: #FFFFFF;
  --hervor: #F2C230;
  --hervor-text: #16211B;
  --akzent: #F2C230;
  --akzent-text: #16211B;
  --akzent-hover: #E0AC12;
  --akzent-dunkel: #1E6B45;
}