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

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

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

.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; }
.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 { margin-left: auto; display: flex; align-items: center; gap: .3rem;
                  flex-wrap: wrap; }
.r-rolle { font-size: .76rem; background: rgba(255,255,255,.16); padding: .18rem .6rem;
           border-radius: 999px; letter-spacing: .05em; }

.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 .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-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: center;
  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; }
}
.gruenderfeld img {
  width: 100%; border-radius: var(--rund); display: block;
  aspect-ratio: 3/4; object-fit: cover;
}
.gruendertext p { margin-top: 0; }
.gruendername { margin-top: 1.2rem !important; }
.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; }