@font-face { font-family: "Fraunces"; src: url("../schriften/fraunces-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../schriften/fraunces-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../schriften/fraunces-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; 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 Gemeinschaftsverein ("Programmzettel"). Warmes Papier, eine Serife mit Charakter (Fraunces), ruhige
   Grotesk für den Text (DM Sans, groß gesetzt). Die Farbe kommt aus Uniform, Wappen oder Logo des Vereins, dazu ein
   Messington als Zier. Ein Leitmotiv aus dem Verein ordnet die Seite: Notenlinie (Musik, Chor), Zeitstrahl (Heimat),
   Parzellenplan (Garten), Welle (Angeln), Faden (Initiative). Umschalten über "motiv" in der Inhaltsdatei. */
:root {
  --grund: #FAF6F1;
  --flaeche: #F3EBE0;
  --karte: #FFFDF9;
  --text: #241A1C;
  --leise: #5F5256;
  --linie: #E4D8CA;
  --marke: #4A1624;
  --marke-text: #FBF3EA;
  --akzent: #A3313F;
  --akzent-text: #FFFFFF;
  --akzent-dunkel: #7E2230;
  --dunkel: #2A171D;
  --dunkel-text: #F6EEE6;
  --dunkel-leise: #CDBDB4;
  --zier: #B8913F;           /* Messing: nur Linien und Schmuck, nie für Text auf hellem Grund */
  --zier-hell: #D9B970;      /* Messing auf dunklem Grund, auch für Text */
  --zier-text: color-mix(in srgb, var(--zier) 70%, var(--text));  /* Messing für große Ziffern auf hellem Grund */
  --schrift-titel: "Fraunces", Georgia, "Times New Roman", serif;
  --schrift-text: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --titel-gewicht: 600;
  --titel-laufweite: -0.018em;
  --titel-zeile: 1.06;
  --radius: 6px;
  --radius-bild: 4px;
  --breite: 1200px;
  --schatten: 0 1px 2px rgb(42 23 29 / 6%), 0 14px 34px rgb(42 23 29 / 10%);
}

/* ---------- Leitmotiv: Variablen je Motiv (Standard Notenlinie) ---------- */
body {
  --motiv-band: repeating-linear-gradient(to bottom, var(--zier) 0 1px, transparent 1px 6px);
  --motiv-hoehe: 25px;
  --motiv-maske: none;
  --motiv-mini: repeating-linear-gradient(to bottom, var(--zier) 0 1px, transparent 1px 3px);
  --motiv-mini-hoehe: 13px;
  --takt-strich: block;
}
body:has([data-motiv="zeit"]) {
  --motiv-band: linear-gradient(var(--zier), var(--zier)) 0 50% / 100% 2px no-repeat,
    radial-gradient(circle, var(--zier) 0 4px, transparent 4.5px) 0 50% / 96px 100% repeat-x;
  --motiv-hoehe: 12px;
  --motiv-mini: linear-gradient(var(--zier), var(--zier)) 0 50% / 100% 2px no-repeat,
    radial-gradient(circle, var(--zier) 0 3px, transparent 3.5px) 100% 50% / 8px 8px no-repeat;
  --motiv-mini-hoehe: 8px;
  --takt-strich: none;
}
body:has([data-motiv="parzelle"]) {
  --motiv-band: linear-gradient(90deg, var(--zier) 1px, transparent 1px) 0 0 / 46px 100%,
    linear-gradient(var(--zier) 1px, transparent 1px) 0 0 / 100% 12px;
  --motiv-mini: linear-gradient(90deg, var(--zier) 1px, transparent 1px) 0 0 / 7px 100%,
    linear-gradient(var(--zier) 1px, transparent 1px) 0 0 / 100% 6px;
  --takt-strich: none;
}
body:has([data-motiv="welle"]) {
  --motiv-band: var(--zier);
  --motiv-maske: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='14' viewBox='0 0 48 14'%3E%3Cpath d='M0 7c6-6 18-6 24 0s18 6 24 0' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") 0 50% / 48px 14px repeat-x;
  --motiv-hoehe: 14px;
  --motiv-mini: linear-gradient(var(--zier), var(--zier)) 0 30% / 100% 1.5px no-repeat, linear-gradient(var(--zier), var(--zier)) 0 75% / 70% 1.5px no-repeat;
  --takt-strich: none;
}
body:has([data-motiv="faden"]) {
  --motiv-band: repeating-linear-gradient(90deg, var(--zier) 0 9px, transparent 9px 15px) 0 50% / 100% 2px no-repeat,
    radial-gradient(circle, var(--zier) 0 4px, transparent 4.5px) 0 50% / 150px 100% repeat-x;
  --motiv-hoehe: 12px;
  --motiv-mini: repeating-linear-gradient(90deg, var(--zier) 0 4px, transparent 4px 7px) 0 50% / 100% 2px no-repeat;
  --motiv-mini-hoehe: 8px;
  --takt-strich: none;
}
.motiv-linie { height: var(--motiv-hoehe); background: var(--motiv-band); -webkit-mask: var(--motiv-maske); mask: var(--motiv-maske); opacity: .6; }

/* ---------- Grundlagen ---------- */
[hidden] { display: none !important; }
body { font-size: 1.125rem; line-height: 1.65; }
h1 { font-size: clamp(2.5rem, 1.35rem + 4.3vw, 4.9rem); line-height: 1.02; }
h2 { font-size: clamp(1.95rem, 1.3rem + 2.4vw, 3.15rem); }
h3 { font-size: clamp(1.25rem, 1.1rem + .55vw, 1.5rem); line-height: 1.22; }
.lead { font-size: clamp(1.15rem, 1.05rem + .4vw, 1.32rem); line-height: 1.6; }
.leise { color: var(--leise); }
.kicker { font: italic 400 1.1rem/1.3 var(--schrift-titel); letter-spacing: 0; text-transform: none; color: var(--akzent-dunkel); gap: .75rem; }
.kicker::before { width: 2rem; height: var(--motiv-mini-hoehe); background: var(--motiv-mini); }
.abschnitt--dunkel .kicker, .abschnitt--marke .kicker { color: var(--zier-hell); }
.unterzeile { font: italic 400 1.25rem/1.3 var(--schrift-titel); color: var(--akzent-dunkel); margin-bottom: 1rem; }
.knopf { font-weight: 700; letter-spacing: .005em; }
.knopf--leise { padding-inline: 0; }
.knopf--leise svg { transition: transform .2s; }
.knopf--leise:hover svg { transform: translateX(3px); }
.abschnitt--marke .knopf:not(.knopf--rand):not(.knopf--leise), .abschnitt--dunkel .knopf:not(.knopf--rand):not(.knopf--leise) {
  background: var(--zier-hell); border-color: var(--zier-hell); color: var(--dunkel); }
.abschnitt--marke .knopf:not(.knopf--rand):not(.knopf--leise):hover, .abschnitt--dunkel .knopf:not(.knopf--rand):not(.knopf--leise):hover {
  background: var(--marke-text); border-color: var(--marke-text); }
.abschnitt--marke :focus-visible, .abschnitt--dunkel :focus-visible { outline-color: var(--zier-hell); }
.symbol { background: color-mix(in srgb, var(--zier) 16%, transparent); color: var(--akzent-dunkel); border-radius: 50%; }

/* Notenlinie als Trenner zwischen zwei hellen Abschnitten */
.abschnitt { position: relative; }
.abschnitt:not(.abschnitt--flaeche, .abschnitt--dunkel, .abschnitt--marke) + .abschnitt:not(.abschnitt--flaeche, .abschnitt--dunkel, .abschnitt--marke)::before {
  content: ""; position: absolute; top: 0; left: 50%; width: min(100% - 2.5rem, 9rem); transform: translate(-50%, -50%);
  height: var(--motiv-hoehe); background: var(--motiv-band); -webkit-mask: var(--motiv-maske); mask: var(--motiv-maske); opacity: .55; }

/* ---------- Kopf ---------- */
.kopf { background: color-mix(in srgb, var(--grund) 95%, transparent); }
.marke-text b { font: 600 1.32rem/1.1 var(--schrift-titel); letter-spacing: -0.01em; }
.marke-text span { font-size: .82rem; }
.navi a { font-weight: 500; font-size: 1rem; }
.navi a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--zier); color: var(--text); }
.hinweisband { font-size: .92rem; }

/* ---------- Bühne (Startseite) ---------- */
.buehne { padding-top: clamp(2.5rem, 1.5rem + 4vw, 5.5rem); overflow: hidden; }
.buehne-raster { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 5.5rem); align-items: center; }
.buehne h1 { max-width: 12.5ch; }
.buehne .lead { margin-top: 1.5rem; max-width: 34em; }
.buehne .knoepfe { margin-top: 2.25rem; }
.buehne-bild { position: relative; padding: 0 0 3.5rem 0; }
.buehne-foto { aspect-ratio: 4 / 4.6; border-radius: var(--radius-bild); box-shadow: var(--schatten); }
.buehne-unterschrift { margin-top: .6rem; font-size: .85rem; color: var(--leise); }
.buehne-linie { margin-top: clamp(3rem, 2rem + 3vw, 5rem); }

/* Programmzettel: nächster Auftritt, wie ein Zettel aus dem Konzertprogramm, unten perforiert */
.zettel { position: absolute; left: clamp(-4.5rem, -3vw, -1rem); bottom: 0; width: min(21.5rem, 82%); display: grid; gap: 0;
  background: var(--karte); border-radius: var(--radius); box-shadow: 0 2px 4px rgb(42 23 29 / 8%), 0 22px 48px rgb(42 23 29 / 18%); overflow: hidden; }
.zettel-kopf { display: flex; justify-content: space-between; align-items: center; padding: .9rem 1.35rem .7rem; background: var(--marke); color: var(--zier-hell);
  font: italic 400 1.05rem/1.2 var(--schrift-titel); }
.zettel-linie { height: var(--motiv-hoehe); margin: 1rem 1.35rem 0; opacity: .7; }
.zettel-eintrag { display: grid; gap: .3rem; padding: 1rem 1.35rem 1.25rem; }
.zettel-eintrag + .zettel-eintrag { display: none; }
.zettel-datum { display: grid; gap: .1rem; }
.zettel-datum time { font: 600 1.85rem/1.05 var(--schrift-titel); letter-spacing: -0.02em; color: var(--akzent-dunkel); font-variant-numeric: lining-nums; }
.zettel-datum span { font-size: .95rem; font-weight: 500; }
.zettel-titel { margin-top: .45rem; font-size: 1.32rem; line-height: 1.2; }
.zettel-ort { color: var(--leise); font-size: .95rem; }
.zettel-info { display: grid; gap: .3rem; margin-top: .5rem; padding: 0; list-style: none; font-size: .92rem; }
.zettel-info li { display: flex; align-items: flex-start; gap: .5rem; }
.zettel-info svg { flex: none; width: 1.1rem; height: 1.1rem; margin-top: .2rem; color: var(--akzent); }
.zettel-leer { padding: 1.25rem 1.35rem; color: var(--leise); }
.zettel-mehr { position: relative; display: flex; justify-content: space-between; align-items: center; min-height: 48px; padding: .75rem 1.35rem;
  border-top: 2px dashed var(--linie); color: var(--text); font-weight: 700; text-decoration: none; }
.zettel-mehr::before, .zettel-mehr::after { content: ""; position: absolute; top: -9px; width: 16px; height: 16px; border-radius: 50%; background: var(--grund); }
.zettel-mehr::before { left: -8px; } .zettel-mehr::after { right: -8px; }
.zettel-mehr svg { width: 1.15rem; height: 1.15rem; color: var(--akzent); transition: transform .2s; }
.zettel-mehr:hover { color: var(--akzent-dunkel); }
.zettel-mehr:hover svg { transform: translateX(3px); }

/* Jubiläumssiegel */
.siegel-jubilaeum { position: absolute; top: 1.25rem; right: -1rem; display: grid; place-content: center; justify-items: center; width: 8.25rem; aspect-ratio: 1;
  border-radius: 50%; background: var(--marke); color: var(--zier-hell); text-align: center; line-height: 1; transform: rotate(-7deg);
  box-shadow: 0 0 0 4px var(--grund), 0 0 0 5px var(--zier), 0 14px 30px rgb(42 23 29 / 22%); }
.siegel-jubilaeum b { font: 600 2.45rem/1 var(--schrift-titel); letter-spacing: -0.03em; }
.siegel-jubilaeum span { font: italic 400 1.05rem/1.1 var(--schrift-titel); }
.siegel-jubilaeum small { margin-top: .35rem; font-size: .68rem; letter-spacing: .04em; color: color-mix(in srgb, var(--zier-hell) 80%, var(--marke)); }
.siegel-jubilaeum b, .siegel-jubilaeum span { position: relative; }
.siegel-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.siegel-ring circle { fill: none; stroke: var(--zier-hell); stroke-width: .6; opacity: .55; }
.siegel-ring text { fill: var(--zier-hell); font: 700 6.6px var(--schrift-text); letter-spacing: .08em; text-transform: uppercase; }

@media (max-width: 860px) {
  .buehne-raster { grid-template-columns: minmax(0, 1fr); }
  .buehne-bild { padding: 0; }
  .buehne-foto { aspect-ratio: 4 / 3.3; }
  .zettel { position: relative; left: auto; bottom: auto; width: auto; margin: -3.5rem 1rem 0; }
  .siegel-jubilaeum { top: .75rem; right: .75rem; width: 6.6rem; }
  .siegel-jubilaeum b { font-size: 2rem; }
  .buehne-linie { margin-top: 2.5rem; }
}

/* ---------- Signatur der Bühne: ein Blatt aus der Welt des Vereins ----------
   Musik: die Kapelle spielt an (Notenzeile füllt sich Takt für Takt, die Noten wiegen einmal im Takt).
   Garten: der Lageplan zeichnet sich (Zaun, Wege, Parzellen, dann füllen sich die Beete).
   Heimat: der Zeitstrahl läuft vom Gründungsjahr bis heute.
   Danach schiebt sich der Programmzettel herein und das Jubiläumssiegel prägt sich ein. Etwa fünf Sekunden, einmal.
   Grundzustand ist das fertige Bild; die Bewegung steht nur in prefers-reduced-motion: no-preference. */
.buehne-bild--szene { container-type: inline-size; }
.szene { position: absolute; z-index: 1; top: 7cqw; left: clamp(-4.5rem, -3vw, -1rem); width: 78cqw; padding: 3cqw 3.6cqw 2.2cqw; border-radius: 3px;
  background: linear-gradient(175deg, #FFFEFA, var(--karte) 60%, color-mix(in srgb, var(--flaeche) 55%, var(--karte)));
  box-shadow: 0 1px 2px rgb(42 23 29 / 10%), 0 18px 40px -10px rgb(42 23 29 / 30%); transform: rotate(-1.6deg); }
.szene-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1cqw; padding-bottom: 1.2cqw;
  border-bottom: 1px solid color-mix(in srgb, var(--zier) 45%, transparent); }
.szene-kopf span { font: italic 400 clamp(.85rem, 3.4cqw, 1.2rem)/1.2 var(--schrift-titel); color: var(--text); }
.szene-kopf small { font-size: clamp(.62rem, 2.1cqw, .76rem); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--zier-text); white-space: nowrap; }
.szene svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Notenblatt */
.nb-linie { fill: none; stroke: var(--text); stroke-width: 1; opacity: .55; stroke-dasharray: 1; stroke-dashoffset: 0; }
.nb-strich { fill: none; stroke: var(--text); stroke-width: 1.3; stroke-dasharray: 1; stroke-dashoffset: 0; }
.nb-schluss path { fill: none; stroke: var(--text); stroke-width: 1.3; } .nb-schluss rect { fill: var(--text); }
.nb-takt-art text { fill: var(--text); font: 600 31px var(--schrift-titel); text-anchor: middle; }
.nb-note { fill: var(--text); }
.nb-hohl { fill: none; stroke: var(--text); stroke-width: 2.1; }
.nb-loch { fill: var(--karte); }
.nb-hals { fill: none; stroke: var(--text); stroke-width: 1.5; }
.nb-dyn { fill: var(--akzent-dunkel); font: italic 400 24px var(--schrift-titel); }

/* Lageplan */
.gp-zaun { fill: none; stroke: color-mix(in srgb, var(--marke) 70%, transparent); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 0; }
.gp-weg { fill: none; stroke: color-mix(in srgb, var(--zier) 38%, var(--karte)); stroke-width: 10; stroke-dasharray: 1; stroke-dashoffset: 0; }
.gp-weg2 { stroke-width: 7; }
.gp-rasen { fill: color-mix(in srgb, var(--akzent) 9%, var(--karte)); }
.gp-rand { fill: none; stroke: color-mix(in srgb, var(--marke) 55%, transparent); stroke-width: 1.1; stroke-dasharray: 1; stroke-dashoffset: 0; }
.gp-beet { fill: color-mix(in srgb, var(--akzent) 58%, var(--karte)); }
.gp-b2 { fill: color-mix(in srgb, var(--akzent) 34%, var(--zier)); }
.gp-b3 { fill: color-mix(in srgb, var(--zier) 55%, #8A5A3C); }
.gp-beet path { fill: none; stroke: rgb(255 255 255 / 38%); stroke-width: 1.2; stroke-linecap: round; }
.gp-laube { fill: color-mix(in srgb, #A4432F 80%, var(--marke)); }
.gp-baum { fill: color-mix(in srgb, var(--akzent) 70%, var(--marke)); opacity: .82; }
.gp-nr { fill: var(--leise); font: italic 400 11px var(--schrift-titel); text-anchor: end; }

/* Zeitstrahl */
.zs-linie { fill: none; stroke: var(--zier); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 0; }
.zs-punkt path { stroke: color-mix(in srgb, var(--zier) 60%, transparent); stroke-width: 1; }
.zs-punkt circle { fill: var(--karte); stroke: var(--marke); stroke-width: 2.5; }
.zs-heute circle { fill: var(--akzent); stroke: var(--marke); }
.zs-punkt text { fill: var(--text); font: 600 25px var(--schrift-titel); text-anchor: middle; font-variant-numeric: lining-nums; }
.zs-heute text { fill: var(--akzent-dunkel); }
.szene--zeit { padding-bottom: 3cqw; }
.zs-foto { position: absolute; right: -5cqw; bottom: -9cqw; width: 23cqw; margin: 0; padding: 1.4cqw 1.4cqw 3.6cqw; background: #FFFEFB; transform: rotate(4deg);
  box-shadow: 0 2px 4px rgb(0 0 0 / 12%), 0 14px 26px -8px rgb(0 0 0 / 35%); }
.zs-foto .bild { --format: 1 / 1; border-radius: 0; filter: sepia(.35) saturate(.85); }

@media (max-width: 860px) {
  .szene { position: relative; top: auto; left: -.5rem; width: 94cqw; margin-top: -12cqw; }
  .buehne-bild--szene .zettel { margin-top: 1.25rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .buehne-bild--szene .buehne-foto img { animation: sz-foto 2.6s cubic-bezier(.2, .7, .2, 1) both; }
  .szene { animation: sz-blatt .8s cubic-bezier(.2, .8, .2, 1) .1s both; }
  .szene-kopf { animation: sz-auf .6s ease .5s both; }
  /* Musik */
  .nb-linie { animation: sz-zeichnen 1s cubic-bezier(.45, 0, .2, 1) both; }
  .nb-l1 { animation-delay: .3s; } .nb-l2 { animation-delay: .36s; } .nb-l3 { animation-delay: .42s; } .nb-l4 { animation-delay: .48s; } .nb-l5 { animation-delay: .54s; }
  .nb-strich { animation: sz-zeichnen .25s ease-out both; }
  .nb-s0 { animation-delay: .4s; } .nb-s1 { animation-delay: 1.64s; } .nb-s2 { animation-delay: 2.36s; } .nb-s3 { animation-delay: 3.08s; }
  .nb-takt-art { animation: sz-auf .5s ease .7s both; }
  .nb-n1 { --t: .95s; --w: 3.62s; } .nb-n2 { --t: 1.13s; --w: 3.67s; } .nb-n3 { --t: 1.31s; --w: 3.72s; } .nb-n4 { --t: 1.49s; --w: 3.77s; }
  .nb-n5 { --t: 1.67s; --w: 3.82s; } .nb-n6 { --t: 1.76s; --w: 3.87s; } .nb-n7 { --t: 1.85s; --w: 3.92s; } .nb-n8 { --t: 1.94s; --w: 3.97s; }
  .nb-n9 { --t: 2.03s; --w: 4.02s; } .nb-n10 { --t: 2.39s; --w: 4.07s; } .nb-n11 { --t: 2.57s; --w: 4.12s; } .nb-n12 { --t: 2.75s; --w: 4.17s; }
  .nb-n13 { --t: 3.11s; --w: 4.22s; }
  .nb-note { animation: nb-ein .42s cubic-bezier(.3, 1.5, .5, 1) var(--t) both, nb-wiegen .55s ease-in-out var(--w) none; }
  .nb-dyn { animation: sz-auf .5s ease 1s both; }
  .nb-schluss { animation: sz-auf .4s ease 3.4s both; }
  /* Garten */
  .gp-zaun { animation: sz-zeichnen 1.2s cubic-bezier(.45, 0, .2, 1) .3s both; }
  .gp-weg1 { animation: sz-zeichnen 1s cubic-bezier(.45, 0, .2, 1) .8s both; }
  .gp-weg2 { animation: sz-zeichnen .6s cubic-bezier(.45, 0, .2, 1) 1.3s both; }
  .gp-p1 { --v: 0; } .gp-p2 { --v: 1; } .gp-p3 { --v: 2; } .gp-p4 { --v: 3; } .gp-p5 { --v: 4; } .gp-p6 { --v: 5; }
  .gp-p7 { --v: 6; } .gp-p8 { --v: 7; } .gp-p9 { --v: 8; } .gp-p10 { --v: 9; } .gp-p11 { --v: 10; } .gp-p12 { --v: 11; }
  .gp-b1 { --b: 0; } .gp-b2 { --b: 1; } .gp-b3 { --b: 2; }
  .gp-rand { animation: sz-zeichnen .5s ease-out calc(1.4s + var(--v) * .07s) both; }
  .gp-rasen, .gp-nr { animation: sz-blende .5s ease calc(1.6s + var(--v) * .07s) both; }
  .gp-beet { transform-box: fill-box; transform-origin: 50% 100%; animation: gp-wachsen .5s cubic-bezier(.3, 1.3, .5, 1) calc(2.2s + var(--v) * .09s + var(--b) * .06s) both; }
  .gp-laube { transform-box: fill-box; transform-origin: center; animation: gp-ploppen .4s cubic-bezier(.3, 1.6, .5, 1) calc(2.1s + var(--v) * .06s) both; }
  .gp-baum { transform-box: fill-box; transform-origin: center; animation: gp-ploppen .5s cubic-bezier(.3, 1.6, .5, 1) calc(3s + var(--v) * .04s) both; }
  /* Heimat */
  .zs-linie { animation: sz-zeichnen 1.8s cubic-bezier(.45, 0, .2, 1) .5s both; }
  .zs-i1 { --v: 0; } .zs-i2 { --v: 1; } .zs-i3 { --v: 2; } .zs-i4 { --v: 3; } .zs-i5 { --v: 4; } .zs-i6 { --v: 5; }
  .zs-punkt { animation: sz-auf .5s cubic-bezier(.3, 1.4, .5, 1) calc(.7s + var(--v) * .32s) both; }
  .zs-heute circle { transform-box: fill-box; transform-origin: center; animation: zs-puls 1s ease 3s both; }
  .zs-foto { animation: zs-foto .7s cubic-bezier(.2, .8, .2, 1) 2.7s both; }
  /* Danach: Programmzettel und Siegel */
  .buehne-bild--szene .zettel { animation: sz-zettel .8s cubic-bezier(.2, .8, .2, 1) 3.5s both; }
  .buehne-bild--szene .siegel-jubilaeum { animation: sz-siegel .55s cubic-bezier(.3, 1.5, .5, 1) 4.25s both; }
  .buehne-bild--szene .siegel-ring text { transform-origin: 50px 50px; animation: sz-ring 1.4s cubic-bezier(.2, .8, .2, 1) 4.25s both; }
}
@keyframes sz-zeichnen { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes sz-auf { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes sz-blende { from { opacity: 0; } to { opacity: 1; } }
@keyframes sz-foto { from { transform: scale(1.06); } to { transform: none; } }
@keyframes sz-blatt { from { opacity: 0; transform: translate(-3%, 4%) rotate(-5deg); } to { opacity: 1; transform: rotate(-1.6deg); } }
@keyframes nb-ein { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes nb-wiegen { 0%, 100% { transform: none; } 45% { transform: translateY(-3.5px); } }
@keyframes gp-wachsen { from { transform: scaleY(0); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes gp-ploppen { from { transform: scale(0); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes zs-foto { from { opacity: 0; transform: translate(10%, -14%) rotate(14deg) scale(1.08); } to { opacity: 1; transform: rotate(4deg); } }
@keyframes zs-puls { 0% { transform: none; } 40% { transform: scale(1.7); } 100% { transform: none; } }
@keyframes sz-zettel { from { opacity: 0; transform: translateY(2.5rem) rotate(1.5deg); } to { opacity: 1; transform: none; } }
@keyframes sz-siegel { from { opacity: 0; transform: scale(1.45) rotate(-18deg); } to { opacity: 1; transform: rotate(-7deg); } }
@keyframes sz-ring { from { transform: rotate(-70deg); } to { transform: none; } }

/* ---------- Seitenkopf (Unterseiten) ---------- */
.seitenkopf { padding-top: clamp(2.5rem, 1.5rem + 3.5vw, 5rem); }
.seitenkopf h1 { max-width: 15ch; font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.3rem); }
.seitenkopf .lead { margin-top: 1.3rem; max-width: 36em; }
.seitenkopf .knoepfe { margin-top: 2rem; }
.seitenkopf-raster { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.seitenkopf-bild { aspect-ratio: 4 / 3; border-radius: var(--radius-bild); box-shadow: var(--schatten); }
.seitenkopf > .motiv-linie { margin-top: clamp(2.75rem, 2rem + 3vw, 4.5rem); }
.seitenkopf + .abschnitt:not(.abschnitt--flaeche, .abschnitt--dunkel, .abschnitt--marke) { padding-top: clamp(2.5rem, 1.75rem + 2.5vw, 4.5rem); }
.sprungmarken { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }
.sprungmarken a { display: inline-flex; align-items: center; min-height: 44px; padding: .5rem .95rem; border: 1px solid var(--linie); border-radius: var(--radius);
  background: var(--karte); color: var(--text); text-decoration: none; font-weight: 500; font-size: .98rem; transition: border-color .2s, background-color .2s; }
.sprungmarken a:hover { border-color: var(--zier); background: color-mix(in srgb, var(--zier) 10%, var(--karte)); }
@media (max-width: 860px) { .seitenkopf-raster { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Taktleiste: jede Angabe ein Takt, am Ende der Schlussstrich ---------- */
.takt { padding-block: 2.25rem 2.5rem; }
.takt-leiste { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 165px), 1fr)); row-gap: 2rem; margin: 0; padding: 0; list-style: none; }
.takt-leiste li { position: relative; display: grid; gap: .2rem; align-content: start; padding: calc(var(--motiv-hoehe) + 1rem) 1.25rem 0 1rem; }
.takt-leiste li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--motiv-hoehe);
  background: var(--motiv-band); -webkit-mask: var(--motiv-maske); mask: var(--motiv-maske); opacity: .75; }
.takt-leiste li::after { content: ""; display: var(--takt-strich); position: absolute; right: 0; top: 0; width: 1px; height: var(--motiv-hoehe); background: var(--text); opacity: .6; }
.takt-leiste li:last-child::after { width: 5px; opacity: .75; background: linear-gradient(90deg, var(--text) 0 1px, transparent 1px 3px, var(--text) 3px 5px); }
.takt-wert { font: 600 clamp(1.55rem, 1.2rem + 1.2vw, 2.1rem)/1.1 var(--schrift-titel); letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; }
.takt-titel { color: var(--leise); font-size: .98rem; line-height: 1.4; }
.takt-leiste small { color: var(--leise); font-size: .85rem; }

/* ---------- Gesucht ---------- */
.gesucht { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.25rem clamp(1.5rem, 1rem + 2vw, 3rem); align-items: center;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-radius: var(--radius); background: var(--karte); border: 1px solid var(--linie);
  box-shadow: inset 5px 0 0 var(--akzent); }
.gesucht-etikett { align-self: start; justify-self: start; padding: .35rem .7rem; border-radius: 4px; background: var(--akzent); color: var(--akzent-text);
  font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.gesucht h2 { font-size: clamp(1.55rem, 1.2rem + 1.4vw, 2.2rem); max-width: 22ch; }
.gesucht-text { display: grid; gap: .6rem; }
.gesucht-liste { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; list-style: none; margin-top: .35rem; }
.gesucht-liste li { padding: .3rem .75rem; border-radius: 4px; border: 1px solid color-mix(in srgb, var(--akzent) 35%, transparent);
  color: var(--akzent-dunkel); font-weight: 500; font-size: .95rem; background: color-mix(in srgb, var(--akzent) 5%, var(--karte)); }
@media (max-width: 860px) { .gesucht { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Ensembles ---------- */
.ensemble { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: var(--radius); background: var(--karte); border: 1px solid var(--linie); }
.ensemble .bild { border-radius: 0; }
.ensemble-inhalt { display: flex; flex-direction: column; gap: .6rem; padding: 1.4rem 1.5rem 1.5rem; }
.ensemble-art { font: italic 400 1rem/1.2 var(--schrift-titel); color: var(--akzent-dunkel); }
.ensemble h3 { font-size: 1.55rem; }
.ensemble .knopf--leise { margin-top: auto; align-self: flex-start; }
.angaben { display: grid; gap: 0; margin: .5rem 0 .4rem; border-top: 1px solid var(--linie); }
.angaben > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .75rem; padding: .55rem 0; border-bottom: 1px solid var(--linie); }
.angaben dt { font-size: .85rem; font-weight: 700; color: var(--leise); padding-top: .12rem; }
.angaben dd { margin: 0; font-size: 1rem; }

/* ---------- Mitmachen ohne Vorkenntnisse ---------- */
.mitmachen { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.mitmachen .kopfzeile { margin-bottom: 2rem; }
.antworten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1rem; }
.antwort-kachel { display: grid; align-content: start; gap: .7rem; padding: 1.5rem; border-radius: var(--radius); background: var(--karte); border: 1px solid var(--linie); }
.antwort-kachel h3 { font-size: 1.3rem; }
.antwort-kachel p { color: var(--leise); }
.antwort-kachel p + p { margin-top: -.2rem; }
.abschnitt--flaeche .antwort-kachel, .abschnitt--flaeche .ensemble, .abschnitt--flaeche .weg, .abschnitt--flaeche .aufgabe { border-color: color-mix(in srgb, var(--linie) 80%, var(--leise)); }
@media (max-width: 860px) { .mitmachen { grid-template-columns: minmax(0, 1fr); } }

/* Ansprechperson mit Monogramm statt leerem Fotoplatz */
.ansprech, .person-karte { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem 1.15rem; align-items: start; }
.ansprech { padding: 1.25rem; border-radius: var(--radius); background: var(--karte); border: 1px solid var(--linie); }
.monogramm { display: grid; place-items: center; width: 4.25rem; height: 4.25rem; border-radius: 50%; background: var(--marke); color: var(--zier-hell);
  font: italic 400 1.6rem/1 var(--schrift-titel); letter-spacing: .02em; box-shadow: inset 0 0 0 3px var(--marke), inset 0 0 0 4px color-mix(in srgb, var(--zier-hell) 55%, transparent); }
.ansprech-bild { width: 4.25rem; height: 4.25rem; border-radius: 50%; --format: 1 / 1; }
.ansprech-name { font: 600 1.2rem/1.25 var(--schrift-titel); }
.ansprech-rolle { color: var(--leise); font-size: .95rem; }
.ansprech-text { margin-top: .4rem; font-size: .98rem; }
.ansprech-wege { display: grid; gap: .3rem; margin-top: .6rem; }
.ansprech-wege a { display: inline-flex; align-items: flex-start; gap: .5rem; min-height: 32px; padding-block: .2rem; font-weight: 500; color: var(--akzent-dunkel); line-height: 1.4; }
.ansprech-wege svg { margin-top: .2rem; }
.ansprech-wege svg { flex: none; width: 1.05rem; height: 1.05rem; }

/* ---------- Probenzeiten ---------- */
.proben { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.proben th, .proben td { padding: 1rem 1rem 1rem 0; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; }
.proben thead th { padding-block: .5rem; font-size: .82rem; font-weight: 700; color: var(--leise); letter-spacing: .06em; text-transform: uppercase; border-bottom: 2px solid var(--text); }
.proben tbody th { font: 600 1.18rem/1.3 var(--schrift-titel); }
@media (max-width: 720px) {
  .proben thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .proben, .proben tbody, .proben tr, .proben th, .proben td { display: block; }
  .proben tr { padding: 1rem 0; border-bottom: 1px solid var(--linie); }
  .proben tbody th { padding: 0 0 .4rem; border: 0; }
  .proben td { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: .75rem; padding: .15rem 0; border: 0; }
  .proben td::before { content: attr(data-titel); font-size: .85rem; font-weight: 700; color: var(--leise); padding-top: .1rem; }
}

/* ---------- Programm (Termine für Gäste) ---------- */
.programm { display: grid; gap: clamp(2rem, 1.5rem + 1.5vw, 3rem); }
.programm-monat-titel { display: flex; align-items: center; gap: 1.25rem; margin-bottom: .5rem; font: italic 400 1.45rem/1.2 var(--schrift-titel); color: var(--akzent-dunkel); }
.programm-monat-titel::after { content: ""; flex: 1; height: var(--motiv-hoehe); background: var(--motiv-band); -webkit-mask: var(--motiv-maske); mask: var(--motiv-maske); opacity: .5; }
.programm-liste { display: grid; padding: 0; list-style: none; }
.auftritt { display: grid; grid-template-columns: 5.25rem minmax(0, 1fr) auto; gap: 1.5rem; align-items: start; padding: 1.5rem 0; border-bottom: 1px solid var(--linie); }
.auftritt-datum { display: grid; justify-items: center; padding: .65rem .3rem .7rem; border-radius: var(--radius); background: var(--karte); border: 1px solid var(--linie);
  line-height: 1.05; font-variant-numeric: lining-nums tabular-nums; }
.auftritt-datum b { font: 600 2.1rem/1 var(--schrift-titel); letter-spacing: -0.02em; }
.auftritt-datum span { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--leise); }
.auftritt-text { display: grid; gap: .35rem; }
.auftritt-art { font: italic 400 1rem/1.2 var(--schrift-titel); color: var(--akzent-dunkel); }
.auftritt-titel { font: var(--titel-gewicht) 1.38rem/1.22 var(--schrift-titel); letter-spacing: var(--titel-laufweite); }
.auftritt-wann { font-weight: 600; }
.auftritt-info { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; margin-top: .35rem; padding: 0; list-style: none; font-size: .96rem; }
.auftritt-info li { display: flex; gap: .45rem; align-items: flex-start; }
.auftritt-info b { font-weight: 700; margin-right: .2rem; }
.auftritt-info svg { flex: none; width: 1.15rem; height: 1.15rem; margin-top: .22rem; color: var(--akzent); }
.auftritt .knopf--leise { justify-self: start; min-height: 40px; }
.auftritt-kalender { display: grid; justify-items: center; gap: .2rem; min-width: 5.5rem; padding: .6rem .5rem; border-radius: var(--radius); border: 1px solid var(--linie);
  color: var(--text); text-decoration: none; font-size: .78rem; font-weight: 600; line-height: 1.2; text-align: center; transition: border-color .2s, color .2s, background-color .2s; }
.auftritt-kalender svg { width: 1.35rem; height: 1.35rem; color: var(--akzent); }
.auftritt-kalender:hover { border-color: var(--akzent); color: var(--akzent-dunkel); background: var(--karte); }
.auftritt--gross { padding: 1.75rem 1.5rem; margin-block: .5rem; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--karte); box-shadow: inset 5px 0 0 var(--marke); }
.auftritt--gross .auftritt-titel { font-size: clamp(1.5rem, 1.25rem + 1vw, 1.95rem); }
.auftritt--gross .auftritt-datum { background: var(--marke); border-color: var(--marke); color: var(--marke-text); }
.auftritt--gross .auftritt-datum span { color: var(--zier-hell); }
.programm-leer { padding: 1.5rem; border-radius: var(--radius); background: var(--flaeche); color: var(--leise); }
@media (max-width: 640px) {
  .auftritt { grid-template-columns: 4.25rem minmax(0, 1fr); gap: 1rem; }
  .auftritt-datum b { font-size: 1.75rem; }
  .auftritt-kalender { grid-column: 2; display: inline-flex; justify-self: start; gap: .5rem; min-height: 44px; padding: .5rem .8rem; font-size: .9rem; }
  .auftritt--gross { padding: 1.25rem 1rem 1.25rem 1.25rem; }
}

/* ---------- Uns buchen ---------- */
.buchen-anlaesse { margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.anlass-liste { display: flex; flex-wrap: wrap; gap: .6rem; padding: 0; list-style: none; }
.anlass-liste li { display: inline-flex; align-items: center; gap: .55rem; padding: .55rem 1rem; border-radius: var(--radius); background: var(--karte); border: 1px solid var(--linie); font-weight: 500; }
.anlass-liste li::before { content: ""; width: .5rem; height: .5rem; transform: rotate(45deg); background: var(--zier); }
.besetzungen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1rem; }
.besetzung { display: grid; align-content: start; gap: .5rem; padding: 1.5rem; border-radius: var(--radius); background: var(--karte); border: 1px solid var(--linie); border-top: 3px solid var(--marke); }
.besetzung-groesse { font: italic 400 1rem/1.3 var(--schrift-titel); color: var(--akzent-dunkel); }
.besetzung h3 { font-size: 1.45rem; }
.rahmen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 0 2rem; margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); border-top: 2px solid var(--text); }
.rahmen > div { display: grid; align-content: start; gap: .3rem; padding: 1.1rem 0; border-bottom: 1px solid var(--linie); }
.rahmen dt { font: 600 1.15rem/1.3 var(--schrift-titel); }
.rahmen dd { margin: 0; color: var(--leise); }

/* ---------- Wege zum Unterstützen ---------- */
.wege { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 1rem; }
.weg { display: flex; flex-direction: column; gap: .7rem; padding: 1.6rem 1.5rem 1.5rem; border-radius: var(--radius); background: var(--karte); border: 1px solid var(--linie); }
.weg h3 { font-size: 1.4rem; }
.weg-betrag { display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .5rem; padding-bottom: .7rem; border-bottom: 1px solid var(--linie); }
.weg-betrag b { font: 600 1.9rem/1.1 var(--schrift-titel); letter-spacing: -0.02em; font-variant-numeric: lining-nums; }
.weg-betrag span { color: var(--leise); font-size: .95rem; }
.weg-wirkung { padding-left: .9rem; border-left: 2px solid var(--zier); font: italic 400 1.02rem/1.45 var(--schrift-titel); }
.weg-fuss { margin-top: auto; padding-top: .6rem; }
.weg-fuss .knopf { width: 100%; }
.weg--hervor { background: var(--marke); color: var(--marke-text); border-color: var(--marke); }
.weg--hervor .leise, .weg--hervor .weg-betrag span { color: color-mix(in srgb, var(--marke-text) 78%, var(--marke)); }
.weg--hervor .weg-betrag { border-color: rgb(255 255 255 / 18%); }
.weg--hervor .symbol { background: rgb(255 255 255 / 10%); color: var(--zier-hell); }
.weg--hervor .weg-wirkung { border-color: var(--zier-hell); }
.weg--hervor .knopf { background: var(--zier-hell); border-color: var(--zier-hell); color: var(--dunkel); }
.weg--hervor .knopf:hover { background: var(--marke-text); border-color: var(--marke-text); }
.weg--hervor :focus-visible { outline-color: var(--zier-hell); }

/* ---------- Spenden ohne Zahlungsdienst ---------- */
.spenden { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.spendenzweck { display: grid; gap: .8rem; }
.spendenzweck .bild { margin-bottom: .5rem; }
.spendenzweck h3 { font-size: 1.6rem; }
.spendenstand { display: grid; gap: .6rem; margin-top: .6rem; }
.spendenstand progress { -webkit-appearance: none; appearance: none; width: 100%; height: 14px; border: 0; border-radius: 7px; overflow: hidden; background: var(--flaeche); color: var(--akzent); }
.spendenstand progress::-webkit-progress-bar { background: var(--flaeche); border-radius: 7px; box-shadow: inset 0 0 0 1px var(--linie); }
.spendenstand progress::-webkit-progress-value { background: linear-gradient(90deg, var(--akzent-dunkel), var(--akzent)); border-radius: 7px; }
.spendenstand progress::-moz-progress-bar { background: var(--akzent); border-radius: 7px; }
.spendenstand p { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline; }
.spendenstand b { font: 600 1.5rem/1.1 var(--schrift-titel); font-variant-numeric: lining-nums; }
.spendenstand span { color: var(--leise); font-size: .9rem; }
.konto { display: grid; gap: 1.1rem; padding: clamp(1.4rem, 1rem + 1.5vw, 2.25rem); border-radius: var(--radius); background: var(--karte); border: 1px solid var(--linie); box-shadow: inset 0 4px 0 var(--marke); }
.konto h3 { font-size: 1.5rem; }
.konto dl { display: grid; margin: 0; }
.konto-zeile { display: grid; gap: .15rem; padding: .75rem 0; border-bottom: 1px solid var(--linie); }
.konto-zeile dt { font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--leise); }
.konto-zeile dd { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin: 0; font-weight: 500; font-size: 1.08rem; }
.konto-iban .konto-wert { font-size: 1.22rem; font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums; word-spacing: .1em; }
.kopieren { display: none; align-items: center; gap: .4rem; min-height: 40px; padding: .35rem .75rem; border: 1px solid var(--linie); border-radius: var(--radius);
  background: var(--grund); color: var(--text); font: 600 .88rem/1 var(--schrift-text); cursor: pointer; transition: border-color .2s, background-color .2s, color .2s; }
.js .kopieren { display: inline-flex; }
.kopieren svg { width: 1.05rem; height: 1.05rem; color: var(--akzent); }
.kopieren:hover { border-color: var(--akzent); }
.kopieren[data-kopiert] { border-color: var(--gut); color: var(--gut); background: color-mix(in srgb, var(--gut) 8%, var(--karte)); }
.kopieren[data-kopiert] svg { color: var(--gut); }
.girocode { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1.1rem; align-items: center; padding: .9rem; border-radius: var(--radius); border: 1px dashed var(--linie); }
.girocode-bild { width: 7.5rem; height: 7.5rem; border-radius: 4px; }
.girocode figcaption { margin: 0; color: var(--leise); font-size: .95rem; line-height: 1.5; }
.girocode figcaption b { display: block; margin-bottom: .2rem; color: var(--text); font-size: 1rem; }
@media (max-width: 420px) { .girocode { grid-template-columns: minmax(0, 1fr); justify-items: start; } .girocode-bild { width: 9rem; height: 9rem; } }
.nachweis { display: grid; gap: .5rem; padding: 1.1rem 1.2rem; border-radius: var(--radius); background: var(--flaeche); font-size: .98rem; }
.nachweis h4 { font: 600 1.1rem/1.3 var(--schrift-titel); }
.nachweis a { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; }
.nachweis svg { width: 1.1rem; height: 1.1rem; }
@media (max-width: 860px) { .spenden { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Ehrenamt auf Zeit ---------- */
.aufgaben { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1rem; }
.aufgabe { display: flex; flex-direction: column; gap: .65rem; padding: 1.5rem; border-radius: var(--radius); background: var(--karte); border: 1px solid var(--linie); }
.aufgabe-kopf { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; list-style: none; }
.aufgabe-kopf li { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .6rem; border-radius: 4px; background: var(--flaeche); font-size: .88rem; font-weight: 600; }
.aufgabe-kopf svg { width: 1rem; height: 1rem; color: var(--akzent); }
.aufgabe h3 { font-size: 1.35rem; }
.aufgabe-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-top: auto; padding-top: .9rem; border-top: 1px solid var(--linie); }
.aufgabe-gesucht { font: italic 400 1rem/1.3 var(--schrift-titel); color: var(--akzent-dunkel); }
.aufgabe-fuss .knopf { min-height: 44px; padding-block: .55em; }
.aufgaben-lang { margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.aufgaben-lang ul { display: grid; padding: 0; list-style: none; border-top: 2px solid var(--text); }
.aufgaben-lang li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .5rem 1.5rem; align-items: center; padding: 1.1rem 0; border-bottom: 1px solid var(--linie); }
.aufgaben-lang h4 { font: 600 1.2rem/1.3 var(--schrift-titel); }
.aufgabe-aufwand { font-weight: 600; font-size: .95rem; white-space: nowrap; }
.anerkennung { display: flex; gap: .75rem; align-items: flex-start; margin-top: 2rem; max-width: 46rem; color: var(--leise); }
.anerkennung svg { flex: none; width: 1.5rem; height: 1.5rem; color: var(--zier); }
@media (max-width: 720px) { .aufgaben-lang li { grid-template-columns: minmax(0, 1fr); } .aufgabe-aufwand { white-space: normal; } .aufgaben-lang .knopf { justify-self: start; } }

/* ---------- Warteliste ---------- */
.platzlage { display: grid; gap: .8rem; padding: clamp(1.4rem, 1rem + 1.5vw, 2rem); border-radius: var(--radius); background: var(--karte); border: 1px solid var(--linie); }
.platzlage-status { display: inline-flex; align-items: center; gap: .65rem; font-weight: 700; font-size: 1.05rem; }
.lampe { width: .85rem; height: .85rem; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 5px color-mix(in srgb, var(--warn) 20%, transparent); }
.platzlage[data-status="offen"] .lampe { background: var(--gut); box-shadow: 0 0 0 5px color-mix(in srgb, var(--gut) 20%, transparent); }
.platzlage[data-status="geschlossen"] .lampe { background: #B4462E; box-shadow: 0 0 0 5px color-mix(in srgb, #B4462E 18%, transparent); }
.platzlage-satz { font: 600 clamp(1.3rem, 1.1rem + .8vw, 1.65rem)/1.3 var(--schrift-titel); }
.status-stand { font-size: .88rem; color: var(--leise); }
.platzlage .unterzeile { margin: .8rem 0 .2rem; }
.vergabe { counter-reset: v; display: grid; gap: .6rem; padding: 0; list-style: none; }
.vergabe li { counter-increment: v; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .5rem; }
.vergabe li::before { content: counter(v) "."; font: italic 400 1.2rem/1.4 var(--schrift-titel); color: var(--akzent-dunkel); }
.alternativen { padding: clamp(1.4rem, 1rem + 1.5vw, 2rem); border-radius: var(--radius); background: var(--flaeche); }
.alternativen h3 { margin-bottom: 1rem; }
.alternativen ul { display: grid; gap: 1.1rem; padding: 0; list-style: none; }
.alternativen li { display: grid; gap: .25rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--linie); }
.alternativen li:last-child { border-bottom: 0; padding-bottom: 0; }
.alternativen h4 { font: 600 1.15rem/1.3 var(--schrift-titel); }
.alternativen a { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; min-height: 32px; }
.alternativen a svg { width: 1rem; height: 1rem; }

/* ---------- Haben Sie alte Fotos? ---------- */
.alte-fotos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.altes-foto { position: relative; padding: clamp(.75rem, .5rem + .8vw, 1.1rem) clamp(.75rem, .5rem + .8vw, 1.1rem) 0; background: #FFFEFB; box-shadow: var(--schatten); transform: rotate(-1.6deg); }
.altes-foto .bild { border-radius: 0; filter: sepia(.25) saturate(.9); }
.altes-foto::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, #2C2422 0 24px, transparent 24px) top left / 40px 40px no-repeat,
    linear-gradient(225deg, #2C2422 0 24px, transparent 24px) top right / 40px 40px no-repeat,
    linear-gradient(45deg, #2C2422 0 24px, transparent 24px) bottom left / 40px 40px no-repeat,
    linear-gradient(315deg, #2C2422 0 24px, transparent 24px) bottom right / 40px 40px no-repeat; opacity: .88; }
.altes-foto figcaption { margin: 0; padding: .8rem .25rem 1rem; font: italic 400 1rem/1.4 var(--schrift-titel); color: #4A3F3B; }
.foto-schritte { counter-reset: f; display: grid; gap: .8rem; margin: 1.75rem 0; padding: 0; list-style: none; }
.foto-schritte li { counter-increment: f; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: .5rem; align-items: baseline; }
.foto-schritte li::before { content: counter(f); font: 600 1.6rem/1 var(--schrift-titel); color: var(--zier-text); }
.alte-fotos .ansprech { max-width: 30rem; }
@media (max-width: 860px) { .alte-fotos { grid-template-columns: minmax(0, 1fr); } .altes-foto { transform: rotate(-1deg); margin-inline: .25rem; } }

/* ---------- Jubiläum ---------- */
.jubilaeum-abschnitt { overflow: hidden; }
.jubilaeum { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.jubilaeum-zahl { position: relative; display: grid; justify-items: start; padding: 1.5rem 0; color: var(--zier-hell); line-height: .82; }
.jubilaeum-zahl::before { content: ""; position: absolute; left: -1rem; right: -1rem; top: 50%; height: 49px; transform: translateY(-62%);
  background: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--zier-hell) 45%, transparent) 0 1px, transparent 1px 12px); }
.jubilaeum-zahl b { position: relative; font: 600 clamp(6.5rem, 3rem + 11vw, 12rem)/.82 var(--schrift-titel); letter-spacing: -0.05em; font-variant-numeric: lining-nums; }
.jubilaeum-zahl span { position: relative; margin-top: .6rem; font: italic 400 clamp(1.4rem, 1.1rem + 1vw, 2rem)/1 var(--schrift-titel); }
.jubilaeum h2 { max-width: 18ch; }
.jubilaeum-linie { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); opacity: .4; }
@media (max-width: 720px) { .jubilaeum { grid-template-columns: minmax(0, 1fr); gap: 1rem; } }

/* ---------- Ansprechpartner ---------- */
.personen { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 1rem; }
.person-karte { padding: 1.4rem; border-radius: var(--radius); background: var(--karte); border: 1px solid var(--linie); }
.abschnitt--flaeche .person-karte, .abschnitt--flaeche .ansprech { border-color: color-mix(in srgb, var(--linie) 80%, var(--leise)); }

/* ---------- Gemeinsame Module im Ton der Vorlage ---------- */
.karte h3 { font-size: 1.4rem; }
.text-bild .bild { box-shadow: var(--schatten); }
.geschichte .fliess { font-size: 1.12rem; }
.zitat { border-left-color: var(--zier); }
.ablauf li::before { font-style: italic; font-weight: 400; color: var(--zier-text); font-size: 2.8rem; }
.ablauf li::after { background: none; height: 0; top: 1.4rem; border-top: 1px solid var(--linie); }
.ablauf .dauer { color: var(--akzent-dunkel); }
.zeitleiste { gap: 2.25rem; padding-left: 2.5rem; }
.zeitleiste::before { left: .55rem; width: 2px; background: color-mix(in srgb, var(--zier) 70%, transparent); }
.zeitleiste li::before { left: -2.5rem; top: .45rem; width: 1.15rem; height: 1.15rem; background: var(--grund); border: 3px solid var(--marke); }
.zeitleiste li:last-child::before { background: var(--zier); border-color: var(--marke); }
.zeitleiste .jahr { font: italic 400 1.75rem/1 var(--schrift-titel); color: var(--akzent-dunkel); }
.zeitleiste h3 { font-size: 1.35rem; }
.chronik .zeitleiste { max-width: 48rem; }
@media (min-width: 861px) {
  .chronik > .wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
  .chronik .kopfzeile { position: sticky; top: 7rem; }
}
.fragen summary { font: 600 1.15rem/1.4 var(--schrift-text); min-height: 44px; }
.fragen summary:hover { color: var(--akzent-dunkel); }
.fragen .antwort { font-size: 1.05rem; }
.formular { border-radius: var(--radius); box-shadow: inset 0 4px 0 var(--marke); }
.formular h3 { font-size: 1.5rem; }
.feld input, .feld select, .feld textarea { background: var(--karte); }
.formular .knopf { width: 100%; }
.formular-abschnitt .zwei > div > .kopfzeile { margin-bottom: 1.5rem; }
.formular-abschnitt .zwei > div > p.leise { max-width: 34em; }
.formular-abschnitt .zwei > div > p.leise + p.leise { margin-top: .75rem; }
.programm-werkzeug { display: flex; justify-content: flex-end; margin-bottom: 1.5rem; }
.karte-vorhang .symbol { justify-self: center; }
.ohne-umbruch { white-space: nowrap; }
.wahl span { background: var(--karte); }
.kontakt-liste b { letter-spacing: .06em; }
.dateien a { min-height: 56px; }
.dateien a span { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; }
.dateien svg { width: 1.1rem; height: 1.1rem; color: var(--akzent); }
.karte-klick { border-radius: var(--radius); }
.abschluss-abschnitt h2 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem); }
.abschluss-abschnitt::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--motiv-hoehe); background: var(--motiv-band);
  -webkit-mask: var(--motiv-maske); mask: var(--motiv-maske); opacity: .22; }
.abschnitt--marke .abschluss .lead { color: color-mix(in srgb, var(--marke-text) 80%, var(--marke)); }

/* ---------- Fuß ---------- */
.fuss { position: relative; }
.fuss::before { content: ""; position: absolute; left: 0; right: 0; top: 1.75rem; height: var(--motiv-hoehe); background: var(--motiv-band);
  -webkit-mask: var(--motiv-maske); mask: var(--motiv-maske); opacity: .28; }
.fuss .wrap { position: relative; padding-top: 2rem; }
.fuss h2 { font-size: 1.75rem; }
.fuss h3 { color: var(--zier-hell); }
.fuss::before, .abschnitt--marke .motiv-linie, .abschnitt--dunkel .motiv-linie, .abschluss-abschnitt::after { filter: brightness(1.55) saturate(.85); }

/* ---------- Handyleiste ---------- */
@media (max-width: 720px) {
  .handyleiste a { font-size: .8rem; }
}

/* ---------- Typografie-Momente wie im Konzertprogramm ---------- */
/* Initiale im ersten Absatz einer Geschichte (nur auf hellem Grund, nicht in kurzen Bändern) */
.text-bild:not(.abschnitt--flaeche, .abschnitt--dunkel, .abschnitt--marke) .fliess > p:first-child::first-letter {
  float: left; margin: .06em .12em -.1em 0; font: 600 3.6em/.82 var(--schrift-titel); color: var(--akzent-dunkel); }
.zitat { position: relative; padding: .4rem 0 .4rem 1.4rem; border-left-width: 2px; }
.zitat p { font: italic 400 clamp(1.25rem, 1.1rem + .6vw, 1.55rem)/1.4 var(--schrift-titel); color: var(--text); }
.zitat footer { margin-top: .5rem; font-size: .92rem; color: var(--leise); }
.jubilaeum-zahl::before { transform-origin: left center; }

/* ---------- Kleine Bewegung im Rest der Seite (ruhig, einmal, nur ohne Bewegungsverzicht) ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Unterseiten: Kopf hebt sich, die Motivlinie zieht sich auf */
  .seitenkopf-text, .seitenkopf-bild { animation: sz-auf .7s cubic-bezier(.2, .7, .2, 1) .05s both; }
  .seitenkopf-bild { animation-delay: .2s; }
  .seitenkopf > .motiv-linie, .buehne-linie { transform-origin: left center; animation: sk-linie 1.4s cubic-bezier(.45, 0, .2, 1) .3s both; }

  /* Gruppen erscheinen nacheinander statt als Block */
  .js .staffel.einblenden { opacity: 1; transform: none; }
  .js .staffel > * { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
  .js .staffel.sichtbar > * { opacity: 1; transform: none; }
  .js .staffel.sichtbar > :nth-child(2) { transition-delay: .09s; } .js .staffel.sichtbar > :nth-child(3) { transition-delay: .18s; }
  .js .staffel.sichtbar > :nth-child(4) { transition-delay: .27s; } .js .staffel.sichtbar > :nth-child(5) { transition-delay: .36s; }
  .js .staffel.sichtbar > :nth-child(n+6) { transition-delay: .42s; }

  /* Taktleiste: die Notenlinien ziehen sich Takt für Takt auf */
  .js .takt-leiste.einblenden { opacity: 1; transform: none; }
  .js .takt-leiste li::before, .js .takt-leiste li::after { transform-origin: left center; transform: scaleX(0); transition: transform .7s cubic-bezier(.45, 0, .2, 1); }
  .js .takt-leiste li::after { transform: scaleY(0); transform-origin: center bottom; transition-duration: .25s; }
  .js .takt-leiste li > * { opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; }
  .js .takt-leiste.sichtbar li::before, .js .takt-leiste.sichtbar li::after, .js .takt-leiste.sichtbar li > * { opacity: 1; transform: none; }
  .js .takt-leiste.sichtbar li:nth-child(1)::after { transition-delay: .55s; }
  .js .takt-leiste.sichtbar li:nth-child(2)::before, .js .takt-leiste.sichtbar li:nth-child(2) > * { transition-delay: .35s; } .js .takt-leiste.sichtbar li:nth-child(2)::after { transition-delay: .9s; }
  .js .takt-leiste.sichtbar li:nth-child(3)::before, .js .takt-leiste.sichtbar li:nth-child(3) > * { transition-delay: .7s; } .js .takt-leiste.sichtbar li:nth-child(3)::after { transition-delay: 1.25s; }
  .js .takt-leiste.sichtbar li:nth-child(4)::before, .js .takt-leiste.sichtbar li:nth-child(4) > * { transition-delay: 1.05s; } .js .takt-leiste.sichtbar li:nth-child(4)::after { transition-delay: 1.6s; }
  .js .takt-leiste.sichtbar li:nth-child(5)::before, .js .takt-leiste.sichtbar li:nth-child(5) > * { transition-delay: 1.4s; } .js .takt-leiste.sichtbar li:nth-child(5)::after { transition-delay: 1.95s; }

  /* Monatsköpfe im Programm: die Motivlinie läuft hinter dem Monatsnamen aus */
  .js .programm-monat-titel.einblenden { opacity: 1; transform: none; }
  .js .programm-monat-titel::after { transform-origin: left center; transform: scaleX(0); transition: transform 1.1s cubic-bezier(.45, 0, .2, 1) .1s; }
  .js .programm-monat-titel.sichtbar::after { transform: none; }

  /* Jubiläum: Linien ziehen auf, die Zahl steigt hinein */
  .js .jubilaeum.einblenden { opacity: 1; transform: none; }
  .js .jubilaeum .jubilaeum-zahl::before { transform: translateY(-62%) scaleX(0); transition: transform 1.2s cubic-bezier(.45, 0, .2, 1); }
  .js .jubilaeum .jubilaeum-zahl b, .js .jubilaeum .jubilaeum-zahl span, .js .jubilaeum .jubilaeum-text { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform 1s cubic-bezier(.2, .7, .2, 1); }
  .js .jubilaeum.sichtbar .jubilaeum-zahl::before { transform: translateY(-62%); }
  .js .jubilaeum.sichtbar .jubilaeum-zahl b { opacity: 1; transform: none; transition-delay: .35s; }
  .js .jubilaeum.sichtbar .jubilaeum-zahl span { opacity: 1; transform: none; transition-delay: .6s; }
  .js .jubilaeum.sichtbar .jubilaeum-text { opacity: 1; transform: none; transition-delay: .5s; }

  /* Hover: Karten heben sich leicht, Bilder kommen näher */
  .ensemble, .weg, .aufgabe, .besetzung, .antwort-kachel { transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease, border-color .3s ease; }
  .ensemble:hover, .weg:hover, .aufgabe:hover, .besetzung:hover { transform: translateY(-4px); box-shadow: var(--schatten); }
  .js .staffel.sichtbar > .ensemble:hover, .js .staffel.sichtbar > .weg:hover, .js .staffel.sichtbar > .aufgabe:hover, .js .staffel.sichtbar > .besetzung:hover { transform: translateY(-4px); transition-delay: 0s; }
  .ensemble .bild img { transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
  .ensemble:hover .bild img { transform: scale(1.045); }
  .besetzung:hover { border-top-color: var(--akzent); }
  .antwort-kachel .symbol svg, .weg .symbol svg { transition: transform .4s cubic-bezier(.3, 1.4, .5, 1); }
  .antwort-kachel:hover .symbol svg, .weg:hover .symbol svg { transform: rotate(-8deg) scale(1.1); }
  .auftritt-datum { transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
  .auftritt:not(.auftritt--gross):hover .auftritt-datum { background: var(--marke); border-color: var(--marke); color: var(--marke-text); }
  .auftritt:not(.auftritt--gross):hover .auftritt-datum span { color: var(--zier-hell); }
  .altes-foto { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
  .altes-foto:hover { transform: rotate(-.4deg) translateY(-3px); }
}
@keyframes sk-linie { from { transform: scaleX(0); opacity: 0; } to { transform: none; } }

/* ---------- Druck: Programm und Bankverbindung bleiben lesbar ---------- */
@media print {
  .zettel, .siegel-jubilaeum, .szene, .motiv-linie, .kopieren, .auftritt-kalender, .sprungmarken { display: none !important; }
  .buehne-raster, .spenden, .mitmachen { grid-template-columns: 1fr; }
}

/* ---------- Schmale Handys: Ansprechpersonen untereinander, lange Adressen dürfen umbrechen ---------- */
@media (max-width: 480px) {
  .ansprech, .person-karte { grid-template-columns: minmax(0, 1fr); }
  .konto-iban .konto-wert { font-size: 1.05rem; letter-spacing: .02em; white-space: nowrap; }
}
@media (max-width: 360px) { .ohne-umbruch { white-space: normal; overflow-wrap: anywhere; } }


/* Farben des Betriebs */
:root {
  --marke: #4A1624;
  --akzent: #A3313F;
  --akzent-dunkel: #7E2230;
  --zier: #B8913F;
  --zier-hell: #D9B970;
}