/* stil.css — das Aussehen der Vereinsseite.

   Die Gestaltung führt die bisherige Seite fort: schwarzer Grund,
   violette Trennbalken, Sora für Überschriften und Space Grotesk für
   den Fließtext. Die Farben stammen aus dem Vereinslogo (#7f12e1) und
   den Trennbalken der alten Seite (#534590).

   Die Schriften liegen lokal — beim Aufruf entsteht keine Verbindung
   zu Google, es wird keine Besucher-IP dorthin übertragen.

   Wer die Seite umfärben will, ändert nur den Block ganz unten. */

@import url("schriften/schriften.css");

:root {
  --violett:        #7f12e1;   /* aus dem Vereinslogo */
  --violett-hell:   #a34ff5;
  --violett-tief:   #5a0aa5;
  --violett-hauch:  #f5edfe;
  --indigo:         #534590;   /* die Trennbalken der bisherigen Seite */
  --indigo-hell:    #6f5fb5;
  --bühne:          #000000;   /* schwarz wie bisher */
  --bühne-weich:    #14101c;
  --bühne-karte:    #1c1626;
  --papier:         #ffffff;
  --papier-warm:    #faf8fc;
  --text:           #1c1720;
  --text-leise:     #66606f;
  --linie:          #e6e1ec;
  --gold:           #e9b949;   /* Applaus, Sterne, Hervorhebungen */
  --gruen:          #0f8a5f;
  --rot:            #c02b3c;

  --schrift: "Space Grotesk", "Segoe UI", -apple-system, BlinkMacSystemFont,
             "Helvetica Neue", Arial, sans-serif;
  --schrift-titel: "Sora", "Space Grotesk", "Segoe UI", -apple-system,
                   BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --rund: 14px;
  --schatten: 0 2px 8px rgba(20, 8, 40, .07), 0 12px 32px rgba(20, 8, 40, .07);
  --schatten-tief: 0 6px 20px rgba(20, 8, 40, .16), 0 24px 60px rgba(20, 8, 40, .14);
  --breite: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important;
                           transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--violett-tief); text-decoration-thickness: 1px;
    text-underline-offset: 2px; }
a:hover { color: var(--violett); }

h1, h2, h3, h4 { font-family: var(--schrift-titel); line-height: 1.2;
                 margin: 0 0 .5em; font-weight: 700; letter-spacing: -.02em; }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.05rem; }
p  { margin: 0 0 1.1em; }

:focus-visible {
  outline: 3px solid var(--violett);
  outline-offset: 3px;
  border-radius: 4px;
}

.nur-vorleser {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.zum-inhalt {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--violett); color: #fff; padding: .8rem 1.4rem;
  border-radius: 0 0 var(--rund) 0; font-weight: 700;
}
.zum-inhalt:focus { left: 0; }

.mitte { width: min(100% - 2.5rem, var(--breite)); margin-inline: auto; }
.schmal { width: min(100% - 2.5rem, 760px); margin-inline: auto; }

/* ------------------------------------------------------------ Kopfzeile */

.kopf {
  position: sticky; top: 0; z-index: 100;
  background: rgba(0,0,0,.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.kopf-innen {
  display: flex; align-items: center; gap: 1rem;
  padding: .7rem 0; min-height: 68px;
}
.marke { display: flex; align-items: center; gap: .8rem; text-decoration: none;
         flex: 0 0 auto; }
.marke img { height: 42px; width: auto; }
.marke-text { display: none; font-family: var(--schrift-titel);
              font-weight: 700; color: #fff;
              letter-spacing: -.02em; line-height: 1.1; font-size: .95rem; }
@media (min-width: 1400px) { .marke-text { display: block; } }

.hauptmenue { margin-left: auto; }
.hauptmenue ul { display: flex; gap: .1rem; list-style: none; margin: 0; padding: 0;
                 flex-wrap: nowrap; }
.hauptmenue a {
  display: block; padding: .5rem .6rem; border-radius: 9px;
  color: rgba(255,255,255,.86); text-decoration: none; font-weight: 500;
  font-size: .9rem; white-space: nowrap;
  transition: background .15s, color .15s;
}
.hauptmenue a:hover, .hauptmenue a:focus-visible {
  background: rgba(255,255,255,.12); color: #fff; }
.hauptmenue a[aria-current="page"] {
  color: #fff; background: rgba(127,18,225,.45);
}
.kopf .knopf { flex: 0 0 auto; }

/* Zweite Menüleiste im Mitgliederbereich — bleibt direkt unter der
   Kopfzeile hängen, statt beim Scrollen mit dem Aufmacher zu verschwinden.
   69px ist die gemessene Höhe von .kopf, auf allen Breiten gleich. */
.mitglied-untermenue {
  position: sticky; top: 69px; z-index: 90;
  background: linear-gradient(180deg, rgba(30,16,46,.96), rgba(20,12,32,.96));
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.12);
  padding: .7rem 0;
}
.mitglied-untermenue .knopfreihe { margin-top: 0; }

.menue-schalter {
  display: none; margin-left: auto; background: none; border: 0; cursor: pointer;
  padding: .5rem; color: #fff; border-radius: 8px;
}
.menue-schalter svg { display: block; }

@media (max-width: 1240px) {
  .menue-schalter { display: block; }
  .hauptmenue {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--bühne); border-bottom: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 12px 32px rgba(0,0,0,.55); padding: .8rem 1.25rem 1.2rem;
  }
  .hauptmenue.offen { display: block; }
  .hauptmenue ul { flex-direction: column; gap: 0; }
  .hauptmenue a { padding: .78rem .5rem; border-radius: 8px; font-size: 1.04rem; }
  .kopf .knopf { display: none; }
  .hauptmenue .knopf-im-menue { display: block; margin-top: .7rem; }
}
.hauptmenue .knopf-im-menue { display: none; }

/* -------------------------------------------------------------- Knöpfe */

.knopf, button.knopf, a.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .78rem 1.5rem; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--violett); color: #fff !important; font-weight: 600;
  font-size: 1rem; font-family: var(--schrift-titel); text-decoration: none;
  transition: transform .12s, box-shadow .18s, background .15s;
  box-shadow: 0 2px 10px rgba(127,18,225,.28);
}
.knopf:hover { background: var(--violett-tief); transform: translateY(-1px);
               box-shadow: 0 6px 20px rgba(127,18,225,.34); }
.knopf:active { transform: translateY(0); }
.knopf[disabled], .knopf.aus {
  background: #cfc8d8; box-shadow: none; cursor: not-allowed; transform: none;
}
.knopf.hell {
  background: #fff; color: var(--violett-tief) !important;
  box-shadow: inset 0 0 0 2px var(--violett);
}
.knopf.hell:hover { background: var(--violett-hauch); }
.knopf.leise {
  background: transparent; color: var(--text) !important;
  box-shadow: inset 0 0 0 1.5px var(--linie);
}
.knopf.leise:hover { background: var(--papier-warm); box-shadow: inset 0 0 0 1.5px var(--violett); }
.knopf.klein { padding: .48rem 1rem; font-size: .9rem; }
.knopf.gross { padding: 1rem 2rem; font-size: 1.1rem; }
.knopf.gefahr { background: var(--rot); box-shadow: none; }
.knopf.gefahr:hover { background: #97202f; }

/* ------------------------------------------------------------- Bühnenbild */

.buehne {
  position: relative; overflow: hidden;
  background: var(--bühne); color: #fff;
  padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(3rem, 7vw, 5.5rem);
}
.buehne::before {
  content: ""; position: absolute; inset: -30% -10% auto -10%; height: 130%;
  background:
    radial-gradient(60% 55% at 22% 12%, rgba(127,18,225,.55), transparent 62%),
    radial-gradient(50% 45% at 82% 0%,  rgba(233,185,73,.22), transparent 60%),
    radial-gradient(70% 60% at 50% 100%, rgba(163,79,245,.28), transparent 65%);
  pointer-events: none;
}
.buehne > * { position: relative; }

/* Unter jedem Aufmacher sitzt der violette Balken — dasselbe Element,
   das die bisherige Seite zwischen ihren Abschnitten verwendet. */
.buehne::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22px;
  background: linear-gradient(90deg,
    var(--indigo) 0%, #6b58b8 40%, var(--violett) 72%, var(--indigo) 100%);
}
.buehne h1 { color: #fff; text-wrap: balance; }
.buehne p  { color: rgba(255,255,255,.86); }
.buehne .knopf.hell { background: #fff; color: var(--bühne) !important; box-shadow: none; }
.buehne .knopf.leise { color: #fff !important; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.45); }
.buehne .knopf.leise:hover { background: rgba(255,255,255,.12); }

/* Der Willkommens-Aufmacher: Logo, Gruß, Vereinstext — mittig, wie bisher.
   Bewusst ohne Produktionsbild: Hier stellt sich der Verein vor, nicht ein
   einzelnes Stück. */
.buehne.willkommen { text-align: center; padding-bottom: clamp(3.5rem, 8vw, 6rem); }
.buehne.willkommen .mitte { max-width: 62rem; }
.willkommen-logo {
  display: block; margin: 0 auto clamp(1.5rem, 4vw, 2.6rem);
  width: min(340px, 62vw); height: auto;
}
.buehne.willkommen h1 { margin: 0 0 1rem; }
.buehne.willkommen p.gross { margin-inline: auto; max-width: 54ch; }

.knopfreihe.mittig { justify-content: center; }
.bahn-kopf.mittig {
  max-width: 62ch; margin-inline: auto; text-align: center;
}
.bahn-kopf.mittig p { margin-inline: auto; }

.buehne-bild {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  opacity: .3; filter: saturate(1.1);
}
.buehne-bild + * { position: relative; z-index: 1; }

.aufmacher { display: grid; gap: clamp(1.4rem, 3vw, 2.6rem); align-items: center; }
@media (min-width: 900px) {
  .aufmacher { grid-template-columns: 1.15fr .85fr; }
}
.aufmacher-text p.gross { font-size: clamp(1.05rem, 1.9vw, 1.28rem); max-width: 44ch; }
.aufmacher-bild img {
  border-radius: 20px; box-shadow: var(--schatten-tief);
  aspect-ratio: 1; object-fit: cover; width: 100%;
}
.knopfreihe { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }

.plakette {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.14); color: #fff;
  border: 1px solid rgba(255,255,255,.28);
  padding: .34rem .9rem; border-radius: 999px;
  font-size: .84rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; margin-bottom: 1.3rem;
}
.plakette.gold { background: rgba(233,185,73,.2); border-color: rgba(233,185,73,.5);
                 color: var(--gold); }

/* ---------------------------------------------------------------- Bahnen */

.bahn { padding: clamp(2.2rem, 4vw, 3.4rem) 0; }
.bahn.warm { background: var(--papier-warm); }
.bahn.dunkel { background: var(--bühne); color: #fff; }
.bahn.dunkel h2, .bahn.dunkel h3, .bahn.dunkel h4 { color: #fff; }
.bahn.dunkel p, .bahn.dunkel li { color: rgba(255,255,255,.82); }
.bahn.dunkel a { color: var(--violett-hell); }
.bahn.dunkel .zettel { background: rgba(255,255,255,.06);
                       border-color: var(--violett-hell); }
.bahn.dunkel .zettel p { color: rgba(255,255,255,.86); }
.bahn.dunkel table.liste th { color: rgba(255,255,255,.6); }
.bahn.dunkel table.liste td, .bahn.dunkel table.liste th {
  border-color: rgba(255,255,255,.14); color: rgba(255,255,255,.88); }

/* „Foyer": ein bewusst heller Abschnitt, unabhängig von der gewählten
   Farbwelt — für den Mitgliederbereich, der im Wechsel mit den
   dunklen Abschnitten steht (viele Formulare und Listen darin lesen
   sich auf hellem Grund leichter). Setzt dieselben Variablen neu, die
   auch die Farbwelten selbst verwenden — alles darunter (Karten,
   Tabellen, Kacheln, Eingabefelder) folgt automatisch. Nur die Regeln,
   die eine Farbe fest statt über eine Variable setzen, brauchen eigene
   Zeilen (siehe die Eingabefelder unten). */
.bahn.hell {
  --papier:      #f0e6fa;
  --papier-warm: #e7d9f4;
  --karte:       #fbf8fd;
  --text:        #1c1720;
  --text-leise:  #66606f;
  --linie:       #e6e1ec;
  background: var(--papier);
  /* Farbe muss hier selbst noch mal gesetzt werden — sonst erben h2, h3
     und einfache <p> ohne eigene Farbregel weiterhin den (schon fertig
     berechneten) hellen Text von body, statt die hier neu gesetzte
     Variable zu übernehmen. */
  color: var(--text);
}
.bahn.hell .augenmerk, .bahn.hell .marke-zeile { color: var(--violett); }
.bahn.hell a { color: var(--violett-tief); }
.bahn.hell .zettel, .bahn.hell .kachel { border-color: var(--linie); }
.bahn.hell input, .bahn.hell textarea, .bahn.hell select {
  background: #fff; color: var(--text); border-color: var(--linie);
}
.bahn.hell input::placeholder, .bahn.hell textarea::placeholder { color: #8a8296; }
.bahn.hell table.liste th { color: var(--text-leise); }
.bahn.hell table.liste td, .bahn.hell table.liste th { border-color: var(--linie); }

/* -------------------------------------------------------- Notiz-Pinnwand
   Notizen der Teams sehen wie angepinnte Zettel aus — leicht schief,
   mit einer kleinen „Pinnnadel" oben. Farbe zeigt den Status: Rot kommt
   von der Leitung, Orange/Gelb/Grün sind von der Leitung bestätigte
   Mitglieder-Notizen, Grau wartet noch auf Bestätigung. */
.pinnwand {
  display: flex; flex-wrap: wrap; gap: 1.4rem 1.2rem; margin: 1rem 0 1.6rem;
  padding: 1.6rem 1.4rem 1.2rem;
  background: #fbfbfa;
  border: 8px solid #d8d3c8;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.3), inset 0 0 24px rgba(0,0,0,.05);
}
.notiz-zettel {
  width: 200px; min-height: 150px; padding: 1.1rem 1rem .9rem;
  border-radius: 2px; box-shadow: 0 6px 14px rgba(20,8,40,.22), 0 1px 0 rgba(255,255,255,.4) inset;
  position: relative; transform: rotate(var(--dreh, -2deg));
  display: flex; flex-direction: column; transition: transform .15s;
}
.notiz-zettel:hover { transform: rotate(0deg) scale(1.03); z-index: 2; }
.notiz-zettel::before {
  content: ""; position: absolute; top: -9px; left: 50%; margin-left: -8px;
  width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #9992a3 70%, #6b6478);
  box-shadow: 0 2px 4px rgba(0,0,0,.35);
}
.notiz-zettel p { font-size: .92rem; line-height: 1.45; margin: 0 0 auto;
                  white-space: pre-line; word-break: break-word; }
.notiz-zettel .autor { font-size: .74rem; margin-top: .7rem; opacity: .75; }
.notiz-zettel form { margin-top: .5rem; }
.notiz-zettel.rot    { background: #f6c6c6; color: #5c1a1a; }
.notiz-zettel.orange { background: #f9d9ab; color: #5c3a10; }
.notiz-zettel.gelb   { background: #f5eba3; color: #55500e; }
.notiz-zettel.gruen  { background: #c3e8c3; color: #1a4d1a; }
.notiz-zettel.unbestaetigt {
  background: #e7e3ee; color: #4a4458; box-shadow: none;
  border: 2px dashed #a89fba;
}
.notiz-zettel.privat { background: #fff; color: #5c1a1a; border: 2px solid #c0392b; }
.notiz-neu {
  width: 200px; min-height: 150px; border-radius: 2px;
  border: 2px dashed #c9c3b6; display: flex; align-items: center;
  justify-content: center; padding: 1rem; background: #fff;
}
.notiz-neu form { width: 100%; }
.notiz-neu textarea {
  width: 100%; font-size: .88rem; background: #fff; color: #1c1720;
  border: 1px solid #d8d3c8;
}
.notiz-neu label { color: #4a4458; }
.notiz-neu select { background: #fff; color: #1c1720; border: 1px solid #d8d3c8; }

/* Der violette Trennbalken — das prägende Element der bisherigen Seite.
   Er sitzt zwischen zwei Bahnen und gliedert die Seite in Kapitel. */
.trennbalken {
  height: 34px; background: var(--indigo);
  background-image: linear-gradient(90deg,
    var(--indigo) 0%, #6b58b8 40%, var(--violett) 72%, var(--indigo) 100%);
}
.trennbalken.schmal { height: 16px; }

.bahn-kopf {
  max-width: 62ch; margin: 0 auto 1.6rem; text-align: center;
}
.bahn-kopf p { margin-inline: auto; }
.bahn-kopf .augenmerk {
  display: block; color: var(--violett); font-weight: 800; font-size: .84rem;
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: .6rem;
}
.bahn.dunkel .augenmerk { color: var(--violett-hell); }
.bahn-kopf p { color: var(--text-leise); font-size: 1.06rem; margin-bottom: 0; }
.bahn.dunkel .bahn-kopf p { color: rgba(255,255,255,.75); }

/* --------------------------------------------------------------- Kacheln */

/* Bleibt in der letzten Zeile Platz übrig, stehen die restlichen Kacheln
   mittig statt linksbündig — sonst kippt der Block optisch nach links.
   Dafür brauchen die Spalten eine feste Obergrenze; mit 1fr würden sie
   sich strecken und nichts wäre zu zentrieren. */
.kacheln { display: grid; gap: 1.6rem; justify-content: center;
           grid-template-columns: repeat(auto-fit, minmax(280px, 340px)); }
.kacheln.zwei { grid-template-columns: repeat(auto-fit, minmax(340px, 460px)); }
.kacheln.vier { grid-template-columns: repeat(auto-fit, minmax(215px, 270px)); }
/* Fünf Arbeitsgruppen: bewusst 3 + 2 statt 4 + 1 — eine feste Spaltenzahl
   statt auto-fit, damit die letzte Zeile nicht eine einzelne Kachel
   allein zeigt. */
.kacheln.fuenf { grid-template-columns: repeat(3, minmax(0, 300px)); }
@media (max-width: 860px) {
  .kacheln.fuenf { grid-template-columns: repeat(2, minmax(0, 300px)); }
}
@media (max-width: 480px) {
  .kacheln.fuenf { grid-template-columns: 1fr; }
}

/* Ein Bild als breites Band über einem Abschnitt, die Kacheln darunter
   hochgezogen — als stünden sie im Lichtkegel des Bildes. Reicht bewusst
   bis unter die Kacheln und blendet dort weich aus, statt hart abzuschneiden. */
.abschnitt-banner {
  max-width: 62rem; margin: 1.6rem auto 0; border-radius: var(--rund);
  height: clamp(300px, 36vw, 460px); overflow: hidden;
  -webkit-mask-image:
    linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
          mask-composite: intersect;
}
.abschnitt-banner img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%;
  display: block;
}
.kacheln.hochgezogen {
  position: relative; margin-top: clamp(-13rem, -18vw, -8rem); z-index: 1;
}

/* Ein kleiner, halbtransparenter Pfeil über jeder Kachel — aus dem
   Pitch Deck übernommen. Reines CSS, kein Bild nötig. */
.kacheln.pfeil-oben .kachel { position: relative; margin-top: 2.6rem; }
.kacheln.pfeil-oben .kachel::before {
  content: ""; position: absolute; top: -2.6rem; left: 50%;
  transform: translateX(-50%); width: 56px; height: 56px;
  background: linear-gradient(180deg, rgba(163,79,245,.95), rgba(127,18,225,0));
  clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%);
  /* Sichtbar bleiben, auch über einem hellen oder unruhigen Bild
     (z. B. dem Scheinwerfer-Banner) — der dunkle Schlagschatten folgt
     der Pfeilform selbst, nicht nur dem rechteckigen Kasten. */
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.5));
}

.kachel {
  background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.kachel:hover { transform: translateY(-3px); box-shadow: var(--schatten);
                border-color: #d9d0e6; }

/* Ein rundes Foto, das die obere Ecke der Kachel überlappt — wie
   angeheftet. Der Text beginnt daneben und läuft darunter über die
   volle Breite weiter. */
.kachel-anheftung { overflow: visible; margin-top: 1.6rem; }
.kachel-anheftung .kachel-innen { overflow: visible; }
.anheftung-bild {
  float: left; width: 74px; height: 74px; object-fit: cover; border-radius: 50%;
  margin: -2.2rem .9rem .6rem -2.2rem; position: relative; z-index: 2;
  border: 3px solid var(--karte); box-shadow: var(--schatten);
}
.kachel-bild { aspect-ratio: 16/10; overflow: hidden; background: var(--violett-hauch); }
.kachel-bild img { width: 100%; height: 100%; object-fit: cover; }
.kachel-bild.hoch { aspect-ratio: 3/4; }
.kachel-innen { padding: 1.3rem 1.4rem 1.5rem; flex: 1;
                display: flex; flex-direction: column; }
.kachel-innen h3 { margin-bottom: .35rem; }
.kachel-innen h3 a { color: inherit; text-decoration: none; }
.kachel-innen h3 a:hover { color: var(--violett); }
.kachel-innen p { color: var(--text-leise); font-size: .97rem; }
.kachel-innen .schluss { margin-top: auto; padding-top: .9rem; }
.kachel.dunkel { background: var(--bühne-weich); border-color: #2a2036; color: #fff; }
.kachel.dunkel p { color: rgba(255,255,255,.7); }

.marke-zeile {
  display: inline-block; font-size: .78rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--violett); margin-bottom: .5rem;
}

/* --------------------------------------------------------------- Termine */

.terminliste { display: flex; flex-direction: column; gap: .9rem; }
.termin {
  display: grid; gap: 1.2rem; align-items: center;
  grid-template-columns: auto 1fr auto;
  background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund);
  padding: 1.1rem 1.4rem;
  transition: border-color .15s, box-shadow .15s;
}
.termin:hover { border-color: var(--violett); box-shadow: var(--schatten); }
.termin-datum {
  text-align: center; min-width: 74px; padding: .55rem .3rem;
  background: var(--violett-hauch); border-radius: 10px; line-height: 1.15;
}
.termin-datum .tag { display: block; font-size: 1.75rem; font-weight: 800;
                     color: var(--violett-tief); }
.termin-datum .monat { display: block; font-size: .74rem; font-weight: 800;
                       letter-spacing: .1em; text-transform: uppercase;
                       color: var(--violett); }
.termin-datum .wochentag { display: block; font-size: .72rem; color: var(--text-leise); }
.termin-text h3 { margin: 0 0 .2rem; font-size: 1.08rem; }
.termin-text p { margin: 0; color: var(--text-leise); font-size: .94rem; }
.termin-tat { display: flex; flex-direction: column; gap: .4rem; align-items: flex-end; }
@media (max-width: 700px) {
  .termin { grid-template-columns: auto 1fr; }
  .termin-tat { grid-column: 1 / -1; flex-direction: row; align-items: center; }
}

/* Termine und Plaketten, wenn sie auf schwarzem Grund stehen */
.bahn.dunkel .termin {
  background: var(--bühne-karte); border-color: rgba(255,255,255,.14);
}
.bahn.dunkel .termin:hover { border-color: var(--violett-hell);
                             box-shadow: 0 6px 24px rgba(0,0,0,.5); }
.bahn.dunkel .termin h3 { color: #fff; }
.bahn.dunkel .termin p { color: rgba(255,255,255,.68); }
.bahn.dunkel .termin-datum { background: rgba(127,18,225,.22); }
.bahn.dunkel .termin-datum .tag { color: #fff; }
.bahn.dunkel .termin-datum .monat { color: var(--violett-hell); }
.bahn.dunkel .termin-datum .wochentag { color: rgba(255,255,255,.55); }
.bahn.dunkel .stand-balken { background: rgba(255,255,255,.16); }
.bahn.dunkel .stand-balken i { background: var(--violett-hell); }
.bahn.dunkel .marke-klein { background: rgba(255,255,255,.14); color: #fff; }
.bahn.dunkel .marke-zeile { color: var(--violett-hell); }
.bahn.dunkel .rechteangabe { color: rgba(255,255,255,.55);
                             border-color: rgba(255,255,255,.16); }
.bahn.dunkel .knopf.leise { color: #fff !important;
                            box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4); }
.bahn.dunkel .knopf.leise:hover { background: rgba(255,255,255,.12); }
.bahn.dunkel .knopf.hell { background: #fff; color: var(--bühne) !important;
                           box-shadow: none; }
.bahn.dunkel .person p { color: rgba(255,255,255,.7); }
.bahn.dunkel .person .platzhalter {
  background: linear-gradient(135deg, #2a2038, #1a1424); color: var(--violett-hell); }

/* Eine Plakette gibt es auch auf hellem Grund */
.bahn .plakette { background: var(--violett-hauch); color: var(--violett-tief);
                  border-color: #e0d3f6; }
.bahn .plakette.gold { background: #fdf6e4; border-color: #f0dcae; color: #8a6410; }
.bahn.dunkel .plakette { background: rgba(255,255,255,.14); color: #fff;
                         border-color: rgba(255,255,255,.28); }
.bahn.dunkel .plakette.gold { background: rgba(233,185,73,.2);
                              border-color: rgba(233,185,73,.5); color: var(--gold); }

.stand-balken { height: 6px; border-radius: 3px; background: var(--linie);
                overflow: hidden; margin-top: .5rem; max-width: 200px; }
.stand-balken i { display: block; height: 100%; background: var(--violett);
                  border-radius: 3px; }

/* ---------------------------------------------------- Spendenbarometer */
.spendenbarometer { height: 14px; border-radius: 7px; background: var(--linie);
                     overflow: hidden; margin: 1.4rem 0 .6rem; }
.spendenbarometer i {
  display: block; height: 100%; border-radius: 7px;
  background: linear-gradient(90deg, var(--violett), var(--violett-hell));
  transition: width .4s ease;
}

/* ---------------------------------------------------------------- Zettel */

.zettel {
  background: var(--violett-hauch); border-left: 4px solid var(--violett);
  border-radius: 0 10px 10px 0; padding: 1.1rem 1.3rem; margin: 1.6rem 0;
}
.zettel p:last-child { margin-bottom: 0; }
.zettel.gold { background: #fdf6e4; border-color: var(--gold); }
.zettel.warnung { background: #fdeef0; border-color: var(--rot); }
.zettel.gut { background: #e9f7f1; border-color: var(--gruen); }
.zettel h3 { font-size: 1.02rem; margin-bottom: .4rem; }

.rechteangabe {
  font-size: .84rem; color: var(--text-leise); font-style: italic;
  border-top: 1px solid var(--linie); padding-top: .9rem; margin-top: 2rem;
}

/* --------------------------------------------------------------- Personen */

/* Bei wenigen Personen zog jedes Bild sich auf die halbe Seitenbreite
   auseinander — zwei Porträts in Postergröße erschlagen alles andere.
   Deshalb eine feste Obergrenze je Kachel, der Block wird zentriert. */
.personen {
  display: grid; gap: 1.6rem; justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(150px, 205px));
}
/* Auf der Projektseite („Wir sind …“) dürfen die Kacheln breiter sein —
   bei sechs Personen ergibt das zwei Reihen zu drei statt fünf plus eins. */
#personen {
  grid-template-columns: repeat(auto-fit, minmax(280px, 320px));
}
.person { text-align: center; }
.person img {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 16px;
  margin-bottom: .8rem; box-shadow: var(--schatten);
}
.person .platzhalter {
  width: 100%; aspect-ratio: 1; border-radius: 16px; margin-bottom: .8rem;
  background: linear-gradient(135deg, var(--violett-hauch), #ede2fb);
  display: grid; place-items: center; color: var(--violett);
  font-size: 2.4rem; font-weight: 800;
}
.person h3 { font-size: 1.03rem; margin-bottom: .15rem; }
.person .rolle { color: var(--violett); font-weight: 700; font-size: .89rem; }
.person p { font-size: .74rem; line-height: 1.45; color: var(--text-leise);
            margin-top: .3rem; }

/* --------------------------------------------------------------- Formulare */

.formular { display: grid; gap: 1.1rem; max-width: 640px; }
.formular.weit { max-width: none; }
.formular label { display: block; font-weight: 700; font-size: .94rem; }
.formular .reihe { display: grid; gap: 1.1rem;
                   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
input[type=text], input[type=email], input[type=tel], input[type=number],
input[type=date], input[type=time], input[type=datetime-local], input[type=password],
input[type=search], input[type=url], textarea, select {
  width: 100%; margin-top: .35rem; padding: .68rem .85rem;
  border: 1.5px solid var(--linie); border-radius: 10px;
  font: inherit; font-size: 1rem; font-weight: 400; color: var(--text);
  background: #fff; transition: border-color .15s, box-shadow .15s;
}
textarea { resize: vertical; min-height: 7rem; line-height: 1.55; }
input:focus, textarea:focus, select:focus {
  outline: 0; border-color: var(--violett);
  box-shadow: 0 0 0 3px rgba(127,18,225,.15);
}
.hinweis-feld { font-weight: 400; font-size: .87rem; color: var(--text-leise);
                margin-top: .25rem; }

.ankreuz { display: flex; gap: .7rem; align-items: flex-start;
           font-weight: 400; font-size: .95rem; line-height: 1.5; }
.ankreuz input { margin-top: .28rem; flex: 0 0 auto; width: 18px; height: 18px;
                 accent-color: var(--violett); }

.fangfeld { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

fieldset { border: 1px solid var(--linie); border-radius: var(--rund);
           padding: 1.2rem 1.3rem; margin: 0 0 1.2rem; }
legend { font-weight: 800; padding: 0 .5rem; font-size: .95rem;
         color: var(--violett-tief); }

/* --------------------------------------------------------------- Meldungen */

.meldung {
  padding: .95rem 1.2rem; border-radius: 10px; margin-bottom: 1rem;
  border-left: 4px solid; font-weight: 600;
}
.meldung.gut     { background: #e9f7f1; border-color: var(--gruen); color: #0a5a3e; }
.meldung.warnung { background: #fdf3e4; border-color: #d98324; color: #7a4408; }
.meldung.fehler  { background: #fdeef0; border-color: var(--rot); color: #85212e; }

/* --------------------------------------------------------------- Tabellen */

.tabelle-rahmen { overflow-x: auto; margin: 1.4rem 0; }
table.liste { width: 100%; border-collapse: collapse; font-size: .95rem; }
table.liste th, table.liste td { padding: .7rem .8rem; text-align: left;
                                 border-bottom: 1px solid var(--linie);
                                 vertical-align: top; }
table.liste th { font-weight: 800; font-size: .8rem; letter-spacing: .06em;
                 text-transform: uppercase; color: var(--text-leise);
                 white-space: nowrap; }
table.liste tbody tr:hover { background: var(--violett-hauch); }
table.liste td.zahl, table.liste th.zahl { text-align: right;
                                           font-variant-numeric: tabular-nums; }

.marke-klein {
  display: inline-block; padding: .18rem .6rem; border-radius: 999px;
  font-size: .78rem; font-weight: 800; letter-spacing: .03em;
  background: var(--violett-hauch); color: var(--violett-tief);
}
.marke-klein.gut  { background: #e0f5ec; color: #0a6142; }
.marke-klein.warn { background: #fdf0dd; color: #8a5008; }
.marke-klein.aus  { background: #fbe6e9; color: #8f2434; }
.marke-klein.grau { background: #eeeaf2; color: #5a5364; }

/* ------------------------------------------------------------- Saalplan */

.saal { --platz: 30px; --luecke: 5px; }
.saal-rahmen {
  background: var(--papier-warm); border: 1px solid var(--linie);
  border-radius: var(--rund); padding: 1.6rem 1rem 1.4rem; overflow-x: auto;
}
.buehne-balken {
  background: linear-gradient(180deg, var(--bühne), var(--bühne-weich));
  color: #fff; text-align: center; padding: .55rem; border-radius: 8px 8px 24px 24px;
  font-weight: 800; letter-spacing: .3em; text-transform: uppercase;
  font-size: .78rem; margin: 0 auto 1.8rem; max-width: 62%; min-width: 220px;
}
.saal-reihen { display: flex; flex-direction: column; gap: var(--luecke);
               align-items: center; min-width: max-content; }
.saal-reihe { display: flex; align-items: center; gap: var(--luecke); }
.reihen-nummer {
  width: 30px; text-align: center; font-size: .8rem; font-weight: 800;
  color: var(--text-leise); flex: 0 0 auto;
}
.platz {
  width: var(--platz); height: var(--platz); border-radius: 6px 6px 3px 3px;
  border: 1.5px solid transparent; background: #fff; cursor: pointer;
  font-size: .72rem; font-weight: 700; color: var(--text-leise);
  display: grid; place-items: center; padding: 0; flex: 0 0 auto;
  font-family: inherit; transition: transform .1s, box-shadow .1s;
}
.platz.frei { border-color: var(--violett); color: var(--violett-tief);
              background: #fdfbff; }
.platz.frei:hover { transform: scale(1.16); box-shadow: 0 3px 10px rgba(127,18,225,.35);
                    background: var(--violett-hauch); z-index: 2; }
.platz.gewaehlt { background: var(--violett); border-color: var(--violett);
                  color: #fff; transform: scale(1.1);
                  box-shadow: 0 3px 10px rgba(127,18,225,.4); }
.platz.verkauft { background: #ddd8e4; border-color: #ddd8e4; color: #8f889b;
                  cursor: not-allowed; }
.platz.reserviert { background: #fbe9cf; border-color: #e8c184; color: #8a5f14;
                    cursor: not-allowed; }
.platz.gesperrt { background: #efecf3; border-color: #d8d2e0; color: #a49dae;
                  cursor: not-allowed; }
.platz.rollstuhl { border-radius: 6px; }
.platz.leer { visibility: hidden; }
.platz.gang { width: calc(var(--platz) * .9); visibility: hidden; }
/* Auf dem Handy bleiben die Plätze antippbar gross; der Plan wird dafür
   seitlich gewischt. Winzige Plätze wären zwar ganz sichtbar, aber mit dem
   Finger nicht sicher zu treffen. */
@media (max-width: 760px) {
  .saal { --platz: 27px; --luecke: 4px; }
  .platz { font-size: .66rem; }
  .reihen-nummer { width: 22px; font-size: .72rem; }
  .saal-rahmen { padding-inline: .6rem;
                 background-image: linear-gradient(to right, var(--papier-warm), transparent 12px),
                                   linear-gradient(to left, var(--papier-warm), transparent 12px);
                 background-attachment: local, local; }
  .wisch-hinweis { display: block; }
  .korb-innen { gap: .7rem; }
  .korb .knopf { width: 100%; }
  .korb-summe { margin-left: auto; }
}
.wisch-hinweis { display: none; text-align: center; font-size: .84rem;
                 color: var(--text-leise); margin-top: .8rem; }
.saal-legende { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem;
                margin-top: 1.6rem; justify-content: center; font-size: .87rem; }
.saal-legende span { display: inline-flex; align-items: center; gap: .45rem;
                     color: var(--text-leise); }
.saal-legende i { width: 17px; height: 17px; border-radius: 5px 5px 3px 3px;
                  border: 1.5px solid; display: inline-block; }

.korb {
  position: sticky; bottom: 0; z-index: 40;
  background: #fff; border-top: 2px solid var(--violett);
  box-shadow: 0 -6px 24px rgba(20,8,40,.13);
  padding: 1rem 0;
}
.korb-innen { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.korb-liste { flex: 1; min-width: 200px; font-size: .93rem; }
.korb-summe { font-size: 1.35rem; font-weight: 800; color: var(--violett-tief);
              font-variant-numeric: tabular-nums; }
.korb-uhr { font-size: .87rem; color: var(--text-leise); }
.korb-uhr strong { color: var(--rot); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- Fußzeile */

.fuss { background: var(--bühne); color: rgba(255,255,255,.7);
        padding: 3.5rem 0 2rem; margin-top: 4rem; font-size: .94rem; }
.fuss-gitter { display: grid; gap: 2.4rem;
               grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
               padding-bottom: 2.4rem; border-bottom: 1px solid rgba(255,255,255,.14); }
.fuss h3 { color: #fff; font-size: .84rem; letter-spacing: .12em;
           text-transform: uppercase; margin-bottom: .9rem; }
.fuss a { color: rgba(255,255,255,.8); text-decoration: none; }
.fuss a:hover { color: #fff; text-decoration: underline; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.fuss img.logo { height: 40px; margin-bottom: 1rem; }
.fuss-unten { padding-top: 1.6rem; display: flex; flex-wrap: wrap; gap: 1rem;
              justify-content: space-between; font-size: .86rem;
              color: rgba(255,255,255,.5); }
.fuss-unten a { color: rgba(255,255,255,.6); }

/* --------------------------------------------------------- Redaktionsteil */

body.redaktion { background: #f6f4f9; }
.r-kopf { background: var(--bühne); color: #fff; padding: .55rem 0; }
.r-kopf-innen { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.r-kopf a { color: rgba(255,255,255,.82); text-decoration: none; font-size: .93rem;
            padding: .34rem .62rem; border-radius: 7px; }
.r-kopf a:hover { background: rgba(255,255,255,.12); color: #fff; }
.r-kopf a.hier { background: var(--violett); color: #fff; }
.r-kopf .r-marke { font-weight: 800; color: #fff; padding-left: 0; }
.r-kopf .rechts { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.r-rolle { margin-left: auto; font-size: .76rem; background: rgba(255,255,255,.16);
           padding: .18rem .6rem; border-radius: 999px; letter-spacing: .05em; }

.r-sprung {
  background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.25);
  border-radius: 7px; padding: .34rem .5rem; font-size: .88rem; max-width: 180px;
}
.r-sprung option { color: #1c1720; }

.r-inhalt { padding: 2rem 0 4rem; }
.r-karte { background: #fff; border: 1px solid var(--linie); border-radius: var(--rund);
           padding: 1.5rem 1.6rem; margin-bottom: 1.4rem; }
.r-karte > h2:first-child, .r-karte > h3:first-child { margin-top: 0; }
.r-zahlen { display: grid; gap: 1rem; margin-bottom: 1.6rem;
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.r-zahl { background: #fff; border: 1px solid var(--linie); border-radius: var(--rund);
          padding: 1.1rem 1.2rem; }
.r-zahl .wert { font-size: 2rem; font-weight: 800; color: var(--violett-tief);
                line-height: 1.1; font-variant-numeric: tabular-nums; }
.r-zahl .wert.geld { font-size: 1.1rem; white-space: nowrap; }
.r-zahl .bez { font-size: .84rem; color: var(--text-leise); }
.r-zahl a { text-decoration: none; }
.r-titelzeile { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
                margin-bottom: 1.6rem; }
.r-titelzeile h1 { margin: 0; font-size: 1.8rem; }
.r-titelzeile .rechts { margin-left: auto; display: flex; gap: .6rem; flex-wrap: wrap; }
.r-hilfe { font-size: .9rem; color: var(--text-leise); background: var(--violett-hauch);
           border-radius: 10px; padding: .85rem 1.1rem; margin-bottom: 1.4rem; }
.r-hilfe strong { color: var(--violett-tief); }
.r-zwei-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
                  align-items: start; }
@media (max-width: 760px) { .r-zwei-spalten { grid-template-columns: 1fr; } }

.nachricht-streifen summary {
  cursor: pointer; list-style: none; display: flex; gap: .8rem;
  align-items: baseline; flex-wrap: wrap;
}
.nachricht-streifen summary::-webkit-details-marker { display: none; }
.nachricht-streifen summary::before { content: "▸"; color: var(--text-leise); }
.nachricht-streifen[open] summary::before { content: "▾"; }
.nachricht-streifen .datum { color: var(--text-leise); font-size: .85rem; white-space: nowrap; }
.nachricht-streifen .betreff { color: var(--text-leise); }
.nachricht-streifen .anriss { color: var(--text-leise); font-size: .85rem;
                               flex: 1 1 auto; min-width: 0; overflow: hidden;
                               text-overflow: ellipsis; white-space: nowrap; }
.nachricht-streifen[open] .anriss { display: none; }

.r-scan-ergebnis { border-radius: var(--rund); padding: 2rem 1.6rem; text-align: center;
                   margin-bottom: 1.4rem; }
.r-scan-ergebnis h2 { font-size: 2rem; margin-bottom: .3rem; }
.r-scan-ergebnis.gueltig { background: #e0f7ec; color: #06623f; }
.r-scan-ergebnis.schon_da { background: #fdf0dd; color: #8a5008; }
.r-scan-ergebnis.unbekannt, .r-scan-ergebnis.ungueltig,
.r-scan-ergebnis.nicht_bezahlt, .r-scan-ergebnis.falscher_termin {
  background: #fbe6e9; color: #8f2434; }

.beweglich { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* Auf dem Handy wird das Redaktionsmenü eine schmale Leiste, die man
   seitlich schiebt — sonst verdrängt es am Einlassabend den Scanner. */
@media (max-width: 860px) {
  .r-kopf-innen {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; gap: .25rem;
  }
  .r-kopf-innen::-webkit-scrollbar { display: none; }
  .r-kopf a { white-space: nowrap; font-size: .86rem; padding: .3rem .5rem; }
  .r-kopf .rechts { margin-left: .5rem; flex-wrap: nowrap; }
  .r-rolle { white-space: nowrap; font-size: .72rem; }
  .r-zahlen { grid-template-columns: repeat(3, 1fr); gap: .6rem; }
  .r-zahl { padding: .7rem .8rem; }
  .r-zahl .wert { font-size: 1.5rem; }
  .r-zahl .bez { font-size: .74rem; }
  .r-karte { padding: 1.1rem 1rem; }
  .r-titelzeile h1 { font-size: 1.4rem; }
}

@media print {
  .kopf, .fuss, .korb, .r-kopf, .knopf, .keine-druckseite { display: none !important; }
  body { font-size: 11pt; }
  a { text-decoration: none; color: #000; }
}


/* ============================================ Projektseite (Muster je Projekt)
   Aufmacher, Kennzahlen, Galerie und Team — dieselbe Anordnung für jedes
   Projekt, gefüllt aus der Datenbank. */

.kopf-tat { display: flex; gap: .6rem; align-items: center; }
.kopf .knopf.leise {
  background: transparent; color: #fff !important;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4);
}
.kopf .knopf.leise:hover { background: rgba(255,255,255,.12); }
@media (max-width: 1240px) { .kopf-tat { display: none; } }

.projekt-kopf { position: relative; background: var(--bühne); color: #fff; }
.projekt-banner {
  /* --banner-h kommt (inline, auf .projekt-kopf) aus den tatsächlichen
     Bildmaßen — ein hohes (z. B. quadratisches) Bild bekommt mehr Höhe als
     ein breites Querformat, sonst schneidet object-fit: cover viel weg.
     Bewusst eine berechnete Höhe statt aspect-ratio: Das hat die Breite
     mitschrumpfen lassen, sobald eine Ober­grenze griff. Ohne bekanntes
     Bildmaß (--banner-h nicht gesetzt) gilt die feste Höhe. */
  position: relative; height: var(--banner-h, clamp(260px, 42vw, 480px));
  overflow: hidden;
}
.projekt-banner img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%;
  display: block;
}
.projekt-banner::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 100%);
}
.projekt-titel {
  position: relative; background: var(--bühne);
  margin-top: clamp(-9rem, calc(var(--banner-h, 20rem) * -0.32), -3rem);
  padding: clamp(1.8rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3.2rem) clamp(2rem, 4vw, 3rem);
  max-width: 54rem; margin-inline: auto; border-radius: var(--rund);
}
.projekt-titel h1 { color: #fff; margin: .6rem 0 1rem; }
.projekt-titel p.gross { color: rgba(255,255,255,.9); max-width: none; }
.projekt-titel .spielzeit { font-weight: 600; color: var(--violett-hell); }
.projekt-titel .knopf.hell { background: #fff; color: var(--bühne) !important; }
.zurueck {
  display: inline-block; color: rgba(255,255,255,.7) !important;
  font-size: .92rem; text-decoration: none; margin-bottom: .4rem;
}
.zurueck:hover { color: #fff !important; }

.unterzeile {
  color: var(--violett-hell); font-family: var(--schrift-titel);
  font-weight: 700; font-size: clamp(1.05rem, 2.4vw, 1.5rem); margin-top: -.4rem;
}

/* --- Kennzahlen */
/* Über die volle Breite verteilt standen die Zahlen so weit auseinander,
   dass sie nicht mehr als eine Gruppe gelesen wurden. */
.zahlenreihe {
  display: grid; gap: clamp(1rem, 2.5vw, 2rem); justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(150px, 220px));
  max-width: 46rem; margin-inline: auto; text-align: center;
}
.zahlenfeld { display: grid; justify-items: center; gap: .35rem; }
.sinnbild { width: 46px; height: 46px; color: var(--violett-hell); margin-bottom: .5rem; }
.zahlenfeld .zahl {
  font-family: var(--schrift-titel); font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 3.2rem); line-height: 1;
}
.zahlenfeld .zahl-text { font-size: .96rem; color: var(--violett-hell); }

/* --- Galerie: ein Band, das sich seitlich schieben lässt. Kein Karussell
   mit Knöpfen — Wischen und Scrollen kann jedes Gerät von sich aus. */
.galerie {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 1fr);
  gap: 1rem; overflow-x: auto; padding-bottom: .8rem;
  scroll-snap-type: x mandatory; scrollbar-width: thin;
}
.galerie-stueck { margin: 0; scroll-snap-align: start; }
.galerie-stueck img,
.galerie-stueck video {
  width: 100%; aspect-ratio: 1/1; object-fit: cover;
  border-radius: var(--rund); display: block; background: #111;
}
.galerie-stueck figcaption {
  margin-top: .5rem; font-size: .88rem; color: var(--text-leise); text-align: center;
}
.bahn.dunkel .galerie-stueck figcaption { color: rgba(255,255,255,.7); }
.video-verweis {
  display: grid; place-content: center; gap: .6rem; justify-items: center;
  aspect-ratio: 1/1; border-radius: var(--rund);
  background: rgba(255,255,255,.07); text-decoration: none;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.2);
  padding: 1rem; text-align: center; font-size: .92rem;
}
.video-verweis:hover { background: rgba(255,255,255,.14); }
.abspielen {
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(255,255,255,.9); position: relative;
}
.abspielen::after {
  content: ""; position: absolute; left: 54%; top: 50%;
  transform: translate(-50%, -50%);
  border-left: 16px solid var(--bühne);
  border-top: 10px solid transparent; border-bottom: 10px solid transparent;
}

/* --- Bereichsfilter */
.bereichsfilter { display: grid; justify-items: center; gap: .4rem; margin-bottom: 2rem; }
.bereichsfilter label { color: var(--violett-hell); font-size: .92rem; font-weight: 600; }
.bereichsfilter select {
  width: auto; min-width: 14rem; max-width: 22rem;
  padding: .55rem 2.2rem .55rem .9rem; border-radius: var(--rund);
  border: 1.5px solid var(--violett); background: var(--violett);
  color: #fff; font: inherit; cursor: pointer;
}
.person .bereich {
  color: var(--violett-hell); font-size: .88rem; font-weight: 600; margin-top: .2rem;
}
.hinweis-mitte {
  text-align: center; font-size: .9rem; color: var(--text-leise); margin-top: 1.4rem;
}
.bahn.dunkel .hinweis-mitte { color: rgba(255,255,255,.62); }


/* ===================================================== Unterstütze-uns-Seite */
h2.farbig {
  color: var(--violett-hell); text-align: center;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
}
.kontokasten {
  max-width: 34rem; margin: 0 auto;
  background: linear-gradient(135deg, var(--indigo), var(--violett));
  border-radius: var(--rund); padding: clamp(1.4rem, 3vw, 2rem);
  box-shadow: 0 10px 30px rgba(127,18,225,.25);
}
.kontokasten dl {
  display: grid; grid-template-columns: auto 1fr;
  gap: .5rem 1.4rem; margin: 0; color: #fff;
}
.kontokasten dt { font-weight: 600; opacity: .85; }
.kontokasten dd { margin: 0; font-weight: 600; }
.kontokasten dd.iban { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
@media (max-width: 460px) {
  .kontokasten dl { grid-template-columns: 1fr; gap: .1rem 0; }
  .kontokasten dt { margin-top: .6rem; font-size: .88rem; }
}
.dankzeile {
  text-align: center; margin-top: 1.6rem;
  color: var(--violett-hell); font-weight: 600;
}

.paypal-reihe {
  display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 5vw, 3.5rem);
  align-items: center; justify-content: center;
}
.paypal-knopf { max-width: 24rem; text-align: center; }
.paypal-knopf .knopf { display: inline-flex; align-items: center; gap: .6rem; }
.paypal-qr { margin: 0; text-align: center; }
.paypal-qr img {
  width: 168px; height: 168px; border-radius: 12px;
  background: #fff; padding: 8px; display: block;
}
.paypal-qr figcaption {
  margin-top: .5rem; font-size: .86rem; color: rgba(255,255,255,.7);
}

h3.mit-zeichen {
  color: var(--violett-hell); margin-top: 2.4rem;
  font-size: clamp(1.15rem, 2.6vw, 1.45rem);
}
.sachliste { list-style: none; padding: 0; display: grid; gap: 1rem; }
.sachliste li {
  padding-left: 1.1rem; border-left: 3px solid var(--violett);
  line-height: 1.55;
}
.sachliste strong { color: var(--violett-hell); }


/* Ein Abschnitt, der nur aus einem Formular besteht, braucht nicht so viel
   Luft wie eine ganze Bahn mit Kacheln. */
.bahn.knapp { padding: clamp(1.8rem, 3vw, 2.6rem) 0; }
.bahn.knapp .bahn-kopf,
.bahn.knapp .aufmacher-text { margin-bottom: 0; }
.bahn.knapp .aufmacher-text h2 { margin-top: .2rem; }
.bahn.knapp .formular { padding: 1.2rem !important; }
.bahn.knapp .formular label { margin-bottom: .7rem; }


/* Termine über die ganze Breite zu ziehen macht sie schwer lesbar: Datum
   links, Knopf ganz rechts, dazwischen viel Nichts. */
.terminliste { max-width: 54rem; margin-inline: auto; }


/* ==========================================================================
   Farbwelten — beide aus dem Vereinslogo abgeleitet.

   „buehne“  Durchgehend Schwarz mit violetten Balken. Theaterabend,
             Vorhang auf. Führt den bisherigen Auftritt konsequent zu Ende:
             kein Wechsel mehr zwischen schwarz oben und weiß unten.

   „foyer“ (heller, warmer Grund) ist erledigt — nicht gewählt, entfernt
   (Désirée, 06.09.2026). Es bleiben „buehne“, „buehne-dunkel“, „buehne-weich“.
   ========================================================================== */

:root { --karte: #ffffff; }

/* -------------------------------------------------------------- Bühne */
html[data-farbwelt="buehne"] {
  --papier:        #0a0710;   /* fast schwarz, minimal violettstichig */
  --papier-warm:   #120c1c;
  --karte:         #191227;
  --text:          #f3f0f8;
  --text-leise:    #a89fba;
  --linie:         #2b2140;
  --violett-hauch: #241634;
  --schatten:      0 2px 8px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.45);
  --schatten-tief: 0 6px 20px rgba(0,0,0,.6), 0 24px 60px rgba(0,0,0,.5);
}
html[data-farbwelt="buehne"] .bahn.warm { background: var(--papier-warm); }
html[data-farbwelt="buehne"] .kachel:hover { border-color: var(--violett); }
html[data-farbwelt="buehne"] .kachel-innen p,
html[data-farbwelt="buehne"] .termin p { color: var(--text-leise); }
html[data-farbwelt="buehne"] .marke-zeile,
html[data-farbwelt="buehne"] .augenmerk { color: var(--violett-hell); }
html[data-farbwelt="buehne"] a { color: var(--violett-hell); }
html[data-farbwelt="buehne"] .zettel { background: var(--karte); }
/* Formulare stehen als hellere Karte auf dunklem Grund — Eingabefelder
   müssen sich abheben, sonst tippt man ins Schwarze. */
html[data-farbwelt="buehne"] .formular { background: var(--karte) !important; }
html[data-farbwelt="buehne"] input,
html[data-farbwelt="buehne"] textarea,
html[data-farbwelt="buehne"] select {
  background: #0f0b18; color: var(--text); border-color: var(--linie);
}
html[data-farbwelt="buehne"] input::placeholder,
html[data-farbwelt="buehne"] textarea::placeholder { color: #6d6480; }
html[data-farbwelt="buehne"] .termin-datum { background: var(--violett-hauch); }
html[data-farbwelt="buehne"] .termin-datum .tag { color: var(--violett-hell); }

/* --------------------------------------------------- Bühne, dunkel
   Genau zwischen dem reinen Schwarz und der weichen Fassung. Noch klar
   ein dunkler Saal, aber ohne die harte Kante von #000000. */
html[data-farbwelt="buehne-dunkel"] {
  --bühne:         #0c0912;
  --bühne-weich:   #151020;
  --bühne-karte:   #1e1730;
  --papier:        #141020;
  --papier-warm:   #1a1428;
  --karte:         #211a2f;
  --text:          #f3f0f8;
  --text-leise:    #aca3be;
  --linie:         #332849;
  --violett-hauch: #2b1d3f;
  --schatten:      0 2px 8px rgba(0,0,0,.42), 0 12px 32px rgba(0,0,0,.38);
  --schatten-tief: 0 6px 20px rgba(0,0,0,.52), 0 24px 60px rgba(0,0,0,.45);
}
html[data-farbwelt="buehne-dunkel"] .bahn.dunkel { background: var(--bühne); }
html[data-farbwelt="buehne-dunkel"] .bahn.warm { background: var(--papier-warm); }
html[data-farbwelt="buehne-dunkel"] .kachel:hover { border-color: var(--violett); }
html[data-farbwelt="buehne-dunkel"] .kachel-innen p,
html[data-farbwelt="buehne-dunkel"] .termin p { color: var(--text-leise); }
html[data-farbwelt="buehne-dunkel"] .marke-zeile,
html[data-farbwelt="buehne-dunkel"] .augenmerk { color: var(--violett-hell); }
html[data-farbwelt="buehne-dunkel"] a { color: var(--violett-hell); }
html[data-farbwelt="buehne-dunkel"] .zettel { background: var(--karte); }
html[data-farbwelt="buehne-dunkel"] .formular { background: var(--karte) !important; }
html[data-farbwelt="buehne-dunkel"] input,
html[data-farbwelt="buehne-dunkel"] textarea,
html[data-farbwelt="buehne-dunkel"] select {
  background: #17111f; color: var(--text); border-color: var(--linie);
}
html[data-farbwelt="buehne-dunkel"] input::placeholder,
html[data-farbwelt="buehne-dunkel"] textarea::placeholder { color: #776d8c; }
html[data-farbwelt="buehne-dunkel"] .termin-datum { background: var(--violett-hauch); }
html[data-farbwelt="buehne-dunkel"] .termin-datum .tag { color: var(--violett-hell); }
html[data-farbwelt="buehne-dunkel"] .projekt-titel,
html[data-farbwelt="buehne-dunkel"] .projekt-kopf,
html[data-farbwelt="buehne-dunkel"] .kopf,
html[data-farbwelt="buehne-dunkel"] .fuss { background: var(--bühne); }

/* ------------------------------------------------- Bühne, abgeschwächt
   Wie „Bühne“, aber nicht tiefschwarz: ein sehr dunkles Violettgrau.
   Das nimmt die Härte, ohne den Theatercharakter zu verlieren —
   Bildschirme mit hohem Kontrast wirken damit weniger anstrengend. */
html[data-farbwelt="buehne-weich"] {
  --bühne:         #191325;   /* statt reinem Schwarz */
  --bühne-weich:   #201830;
  --bühne-karte:   #292039;
  --papier:        #1d1629;
  --papier-warm:   #241c33;
  --karte:         #292038;
  --text:          #f4f1f9;
  --text-leise:    #b0a7c2;
  --linie:         #3a2f52;
  --violett-hauch: #33244a;
  --schatten:      0 2px 8px rgba(0,0,0,.35), 0 12px 32px rgba(0,0,0,.3);
  --schatten-tief: 0 6px 20px rgba(0,0,0,.45), 0 24px 60px rgba(0,0,0,.4);
}
html[data-farbwelt="buehne-weich"] .bahn.dunkel { background: var(--bühne); }
html[data-farbwelt="buehne-weich"] .bahn.warm { background: var(--papier-warm); }
html[data-farbwelt="buehne-weich"] .kachel:hover { border-color: var(--violett); }
html[data-farbwelt="buehne-weich"] .kachel-innen p,
html[data-farbwelt="buehne-weich"] .termin p { color: var(--text-leise); }
html[data-farbwelt="buehne-weich"] .marke-zeile,
html[data-farbwelt="buehne-weich"] .augenmerk { color: var(--violett-hell); }
html[data-farbwelt="buehne-weich"] a { color: var(--violett-hell); }
html[data-farbwelt="buehne-weich"] .zettel { background: var(--karte); }
html[data-farbwelt="buehne-weich"] .formular { background: var(--karte) !important; }
html[data-farbwelt="buehne-weich"] input,
html[data-farbwelt="buehne-weich"] textarea,
html[data-farbwelt="buehne-weich"] select {
  background: #1c1528; color: var(--text); border-color: var(--linie);
}
html[data-farbwelt="buehne-weich"] input::placeholder,
html[data-farbwelt="buehne-weich"] textarea::placeholder { color: #7d7392; }
html[data-farbwelt="buehne-weich"] .termin-datum { background: var(--violett-hauch); }
html[data-farbwelt="buehne-weich"] .termin-datum .tag { color: var(--violett-hell); }
html[data-farbwelt="buehne-weich"] .projekt-titel,
html[data-farbwelt="buehne-weich"] .projekt-kopf { background: var(--bühne); }
html[data-farbwelt="buehne-weich"] .kopf { background: var(--bühne); }
html[data-farbwelt="buehne-weich"] .fuss { background: var(--bühne); }

/* Ein Umschalter zum Vergleichen — verschwindet, sobald entschieden ist. */
.farbprobe {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  justify-content: center; padding: .55rem 1rem;
  background: linear-gradient(90deg, var(--indigo), var(--violett));
  color: #fff; font-size: .9rem; font-weight: 600;
}
.farbprobe a {
  padding: .28rem .95rem; border-radius: 999px; text-decoration: none;
  color: #fff !important; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55);
}
.farbprobe a:hover { background: rgba(255,255,255,.18); }
.farbprobe a[aria-current="true"] {
  background: #fff; color: var(--violett-tief) !important; box-shadow: none;
}
@media print { .farbprobe { display: none; } }


/* Ein Abschnitt aus Text und einem kurzen Formular braucht keine 1200 px.
   Auseinandergezogen liest er sich schlechter, nicht besser. */
.bahn.knapp .mitte { width: min(100% - 2.5rem, 900px); }
.bahn.knapp .aufmacher { gap: clamp(1.2rem, 2.5vw, 2rem); }
@media (min-width: 900px) {
  .bahn.knapp .aufmacher { grid-template-columns: 1fr 1fr; }
}
.bahn.knapp .aufmacher-text p { max-width: 40ch; }
.bahn.knapp .formular input,
.bahn.knapp .formular textarea { padding: .55rem .7rem; }
.bahn.knapp .ankreuz span { font-size: .88rem; line-height: 1.45; }


/* ============================================ Wir bedanken uns bei
   Förderer als Tafel, der Gründer gesondert und größer — er hat den
   Verein gegründet, gehört aber nicht mehr zum Vorstand. */
.danktafel {
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.dankfeld {
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--rund); padding: 1.4rem; text-align: center;
}
.dankfeld img {
  max-width: 100%; max-height: 90px; width: auto; object-fit: contain;
  margin-bottom: .9rem;
}
.dankfeld h3 { margin: 0 0 .2rem; font-size: 1.08rem; }
.dankfeld .rolle { color: var(--violett-hell); font-size: .9rem; }
.dankfeld p { font-size: .95rem; margin-top: .7rem; }

.gruenderfeld {
  display: grid; gap: clamp(1.4rem, 4vw, 2.6rem); align-items: start;
  max-width: 52rem; margin-inline: auto;
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--rund); padding: clamp(1.4rem, 3vw, 2.2rem);
}
@media (min-width: 720px) {
  .gruenderfeld { grid-template-columns: 220px 1fr; }
}
.gruenderbild img {
  width: 100%; border-radius: var(--rund); display: block;
  aspect-ratio: 3/4; object-fit: cover;
}
.gruendertext p { margin-top: 0; }
.gruendername { margin-top: .8rem; }
.gruendername .rolle { color: var(--violett-hell); font-size: .92rem; }


/* Ein Abschnitt, der oben zentriert anfängt, soll nicht in der Mitte
   nach links kippen. Nur die Aufzählung bleibt linksbündig — zentrierte
   Listen liest niemand gern. */
.mittig-text { text-align: center; }
.mittig-text .sachliste { text-align: left; max-width: 34rem; margin-inline: auto; }
.mittig-text h3 { text-align: center; }


/* --- Formulare heben sich mit einem violetten Grund ab statt mit Weiß */
.formular.violett {
  background: linear-gradient(160deg, rgba(127,18,225,.16),
                                      rgba(83,69,144,.22)) !important;
  border: 1px solid rgba(163,79,245,.35);
  padding: clamp(1.1rem, 3vw, 1.6rem) !important;
  border-radius: var(--rund);
}
/* --- Ein Formular, das quer unter dem Text sitzt statt daneben */
.formular.quer { max-width: none; }
.formular.quer .reihe { display: grid; gap: 1rem; }
@media (min-width: 720px) {
  .formular.quer .reihe { grid-template-columns: 1fr 1fr; }
  .formular.quer .abschluss {
    display: grid; grid-template-columns: 1fr auto;
    gap: 1.2rem; align-items: end;
  }
  .formular.quer .abschluss button { white-space: nowrap; }
}
.formular.quer textarea { min-height: 4.5rem; }


/* Der Browser darf selbst entscheiden, wo er umbricht — und soll dabei
   keine einzelnen Wörter auf der letzten Zeile stehen lassen. */
p, li, figcaption { text-wrap: pretty; }
h1, h2, h3, .bahn-kopf p.gross { text-wrap: balance; }


/* --------------------------------------- Spendenbescheinigung: zwei Fälle */
.bescheinigung-faelle {
  display: grid; gap: 1.2rem; max-width: 56rem; margin-inline: auto;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.fall {
  background: linear-gradient(160deg, rgba(127,18,225,.14),
                                      rgba(83,69,144,.2));
  border: 1px solid rgba(163,79,245,.32);
  border-radius: var(--rund); padding: 1.4rem 1.5rem;
}
.fall-marke {
  display: inline-block; padding: .25rem .8rem; border-radius: 999px;
  background: var(--violett); color: #fff; font-weight: 700;
  font-size: .82rem; letter-spacing: .02em; margin-bottom: .8rem;
}
.fall-marke.gold { background: var(--gold); color: #2a1e00; }
.fall h3 { margin: 0 0 .5rem; font-size: 1.15rem; }
.fall p { margin: .5rem 0 0; }
.fall p.klein { font-size: .88rem; opacity: .78; }

/* Nur Kennzeichen und Titel stehen offen da — die Erklärung klappt erst
   auf Klick auf. Ganz ohne Javascript, mit <details>/<summary>. */
.fall summary {
  list-style: none; cursor: pointer; position: relative; padding-right: 2rem;
}
.fall summary::-webkit-details-marker { display: none; }
.fall summary::after {
  content: ""; position: absolute; top: 50%; right: .1rem;
  width: 10px; height: 10px; margin-top: -7px;
  border-right: 2px solid var(--violett-hell); border-bottom: 2px solid var(--violett-hell);
  transform: rotate(45deg); transition: transform .2s ease;
}
.fall[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.fall[open] summary h3 { margin-bottom: 0; }


/* Kachelüberschriften unterschiedlicher Länge ließen die Texte darunter
   versetzt beginnen — mit fester Höhe für zwei Zeilen steht alles auf
   einer Linie, auch wenn der Titel nur ein Wort hat. */
/* Ein einzeiliger Titel rutscht auf die Höhe der zweiten Zeile — dann
   enden alle Überschriften auf derselben Linie und die Texte darunter
   beginnen gleich hoch. */
.kachel h3.zweizeilig {
  font-size: 1.06rem; line-height: 1.3;
  min-height: calc(2 * 1.3em); display: flex; align-items: flex-end;
}


/* Drei gleichwertige Teile nebeneinander — für den Ablauf einer Audition */
.dreiteiler {
  display: grid; gap: 1.2rem; max-width: 58rem; margin-inline: auto;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.teil {
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--rund); padding: 1.5rem 1.4rem; text-align: center;
}
.teil .sinnbild { width: 40px; height: 40px; margin: 0 auto .7rem; }
.teil h3 { margin: 0 0 .5rem; font-size: 1.15rem; }
.teil p { margin: 0; font-size: .95rem; }


/* ------------------------------------------------------------- Pinnwand
   Kurze Gesuche als angeheftete Zettel. Leicht gedreht, damit sie nicht
   wie eine Tabelle wirken — ein Aushang eben. */
.pinnwand {
  display: grid; gap: 1.2rem; max-width: 58rem; margin-inline: auto;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
/* Die Zettel sind unterschiedlich lang. Damit die Knöpfe trotzdem auf
   einer Linie sitzen, wächst der Zwischenraum statt der Kartenhöhe. */
.zettel-pin {
  position: relative; padding: 1.6rem 1.4rem 1.5rem;
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--rund);
  display: flex; flex-direction: column;
}
.zettel-pin::before {
  content: ""; position: absolute; top: -7px; left: 50%;
  transform: translateX(-50%);
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--violett); box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.zettel-pin.dringend { border-color: rgba(163,79,245,.5); }
.zettel-pin.dringend::before { background: var(--gold); }
.pin-marke {
  display: inline-block; font-size: .76rem; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--violett-hell); margin-bottom: .35rem;
}
.zettel-pin h3 { margin: 0 0 .5rem; font-size: 1.12rem; }
.pin-text p { margin: 0; font-size: .95rem; }
.pin-fuss { margin: .8rem 0 0; font-size: .86rem; opacity: .75; }


/* Der Vereinstrailer ist quadratisch — er soll nicht die halbe Startseite
   einnehmen, aber groß genug sein, dass man Gesichter erkennt. */
.trailer { max-width: 480px; margin-inline: auto; }
.trailer video {
  width: 100%; display: block; border-radius: var(--rund);
  background: #000; box-shadow: var(--schatten-tief);
}


/* Im knappen Abschnitt war der Text schmaler als das Formular darunter —
   dadurch wirkte er eingerückt und lief eine Zeile länger als nötig.
   Beide bekommen dieselbe Breite. */
.bahn.knapp .bahn-kopf { max-width: none; }
.bahn.knapp .bahn-kopf p { max-width: none; }


/* Der Fließtext bleibt linksbündig — zentrierte Absätze liest niemand
   gern — aber die Spalte sitzt mittig, auf derselben Achse wie die
   Überschriften darüber. */
.schmal { text-align: left; }
.schmal > h1:first-child,
.schmal > h2:first-child { margin-top: 0; }

/* Auch der Aufmacher einer Inhaltsseite steht auf der Mittelachse. */
.buehne > .mitte > h1,
.buehne > .mitte > p.gross,
.buehne > .mitte > .plakette { text-align: center; margin-inline: auto; }
.buehne > .mitte > .plakette { display: table; margin-bottom: 1rem; }
.buehne > .mitte > p.gross { max-width: 56ch; }


.pin-knopf { margin-top: auto; padding-top: 1.4rem; }
.pin-knopf .knopf { width: 100%; text-align: center; padding-block: .7rem; }
.pin-fuss + .pin-knopf { padding-top: .9rem; }


/* Ein weiterführender Hinweis unter dem Vorspann — etwas leiser als
   dieser, aber deutlich genug, dass man ihn wahrnimmt. */
.unter-aufmacher {
  text-align: center; margin-inline: auto; margin-top: 1rem;
  font-size: .98rem; color: rgba(255,255,255,.72);
}
.unter-aufmacher a { color: var(--violett-hell) !important; }


/* Ausgeblendet heißt ausgeblendet. Ohne diese Regel gewinnt jede eigene
   display-Angabe gegen das hidden-Attribut — Felder blieben sichtbar. */
[hidden] { display: none !important; }

/* Ein kleines Fragezeichen neben einem Feld, das seinen Hinweis
   ein- und ausklappt. Als Knopf, damit es auch mit Tastatur und
   Vorlesesoftware bedienbar ist. */
.info-knopf {
  display: inline-grid; place-items: center;
  width: 1.15rem; height: 1.15rem; margin-left: .35rem; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: var(--violett); color: #fff;
  font: 700 .75rem/1 var(--schrift); vertical-align: middle;
}
.info-knopf:hover { background: var(--violett-hell); }
.info-text {
  margin-top: .45rem; padding: .6rem .8rem; border-radius: 10px;
  background: rgba(127,18,225,.14); border: 1px solid rgba(163,79,245,.3);
  font-size: .88rem; font-weight: 400; line-height: 1.5;
}


/* Die Plakette über der Überschrift war so klein, dass sie eher wie eine
   Fußnote wirkte. */
.buehne > .mitte > .plakette,
.plakette {
  font-size: .92rem; padding: .5rem 1.2rem; letter-spacing: .06em;
}


/* Eine Abschnittsüberschrift am Seitenende muss nicht so laut sein wie
   die Überschrift der Seite selbst. */
h2.ruhig { font-size: clamp(1.35rem, 3vw, 1.85rem); }


/* Ein Formular, das direkt unter dem Text klebt, wirkt gedrängt. */
.bahn.knapp .bahn-kopf { margin-bottom: 2.2rem; }