/* ===========================================================================
   Die Gestaltung der dbbjb Event-App.

   Bewusst ohne fremde Schriftarten, ohne Bibliotheken und ohne JavaScript -
   es wird nichts von externen Servern nachgeladen, und die Seiten
   funktionieren auf jedem Geraet.

   DIE FARBEN STEHEN IN farben.css und werden VOR dieser Datei geladen.
   Sie sind dort herausgeloest, weil die Verwaltung dieselben braucht - und
   zwei Listen zwei Wahrheiten waeren, die auseinanderlaufen. Wer eine Farbe
   aendert, aendert sie dort; die Kontrastwerte stehen daneben.
   =========================================================================== */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background: var(--hintergrund);
}

/* Alle Sinnbilder im selben Mass. Sie nehmen die Farbe des Textes an, in dem
   sie stehen - deshalb muss kein Symbol je Zustand neu gezeichnet werden. */
.sinnbild {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  vertical-align: -0.2em;
}

/* Nur fuer Vorleseprogramme - sichtbar ist es nicht, gelesen wird es schon.
   Gebraucht bei der Glocke: "3" allein sagt einem blinden Menschen nichts. */
.nur-vorlesen {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

h1 {
  font-size: 1.6rem;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 0.9rem;
  color: var(--blau-dunkel);
}
h2 {
  font-size: 1.15rem;
  line-height: 1.3;
  margin: 0 0 0.9rem;
  color: var(--blau-dunkel);
}
h3 {
  font-size: 1.02rem;
  font-weight: 600;
  margin: 1.6rem 0 0.6rem;
  color: var(--text);
}

a { color: var(--blau); }

.klein { font-size: 0.875rem; color: var(--grau); }
.leer { color: var(--grau); font-style: italic; }


/* ===========================================================================
   DER RAHMEN
   Seitenleiste links, Kopfleiste oben, auf dem Handy eine Leiste unten.
   =========================================================================== */

.mit-rahmen {
  display: grid;
  grid-template-columns: 16.5rem minmax(0, 1fr);
  min-height: 100vh;
}

.inhaltsspalte {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
  width: 100%;
  max-width: 76rem;
  margin: 0 auto;
  padding: 1.5rem;
}

/* --- Seitenleiste --------------------------------------------------------- */

.seitenleiste {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1.25rem 0.9rem;
  background: var(--flaeche);
  border-right: 1px solid var(--linie);
}

.seitenleiste .marke {
  display: block;
  padding: 0.25rem 0.6rem 1.4rem;
  text-decoration: none;
  color: var(--text);
}
.seitenleiste .marke img {
  display: block;
  width: 8.5rem;
  height: auto;
}
/* Grossbuchstaben wie an den drei anderen Stellen (15.08.2026) - hier
   kleiner, weil die Seitenleiste schmal ist. */
.seitenleiste .marke span {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--grau);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.seitenleiste nav { display: flex; flex-direction: column; gap: 0.15rem; }

/* Die Zwischenueberschriften ordnen die Eintraege nach Aufgaben statt sie
   in einer langen Reihe zu stapeln. */
.seitenleiste .gruppe {
  margin: 1.1rem 0 0.35rem;
  padding: 0 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grau-hell);
}

.seitenleiste .eintrag {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.6rem;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.95rem;
}
.seitenleiste .eintrag:hover { background: var(--hintergrund); }
.seitenleiste .eintrag .sinnbild { color: var(--grau); }

/* Wo man steht: blasse Flaeche, kraeftige Schrift, und links die Akzentfarbe
   des Logos. Die Farbe ist nicht die einzige Auskunft - der Eintrag ist
   zusaetzlich fett gesetzt. */
.seitenleiste .eintrag.aktiv {
  background: var(--blau-blass);
  color: var(--blau-dunkel);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--magenta);
}
.seitenleiste .eintrag.aktiv .sinnbild { color: var(--blau); }

/* Nur auf dem Handy sichtbar, wo die Leiste als Schublade herausfaehrt. */
.schliessen { display: none; }

/* DAS PROFIL STEHT UNTEN IN DER LEISTE (13.08.2026) - dieselbe Stelle wie in
   der Verwaltung, auf Ansage des Auftraggebers: "Gut finde ich das Profil in
   der Sidbar unten". Es stand zuvor oben rechts in der Kopfleiste.

   "margin-top: auto" IST DER GANZE TRICK und keine Feinheit: Die Leiste ist
   eine Spalten-Flexbox; ein automatischer Abstand oben schiebt alles
   Folgende an den unteren Rand. Genau diese Zeile trug bis heute der
   Verweis "Fragen? Schreib uns" - er ist in den Fuss der Seite gezogen
   (Ansage: "das Fragen schreib uns bitte zu Datenschutz und Co"), und ohne
   Ersatz RUTSCHTE DAS PROFIL NACH OBEN unter die Menuepunkte. Vom
   Auftraggeber sofort bemerkt: "und das Profil darf nicht hochrutschen".

   Die Trennlinie ist hell, nicht wie in der Verwaltung durchscheinend
   weiss: Diese Leiste hat einen hellen Grund. */
.seitenleiste .konto {
  flex: none;
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px solid var(--linie);
}

/* Nach OBEN aufklappen - nach unten laege das Menue unter dem Bildrand.
   Wortgleich zur Regel in der Verwaltung, weil es dasselbe Bauteil an
   derselben Stelle ist. */
.menue.nach-oben > .menueinhalt { top: auto; bottom: calc(100% + 0.35rem); }

/* Der Zaehler an "Nachrichten". */
.zaehler {
  margin-left: auto;
  min-width: 1.35rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--magenta);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.35rem;
  text-align: center;
}

/* --- Kopfleiste ----------------------------------------------------------- */

.kopfleiste {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.65rem 1.5rem;
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
}

.kopfleiste .marke-klein { display: none; }
.kopfleiste .marke-klein img { width: 5.5rem; height: auto; display: block; }

.kopfleiste-rechts {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.wechsler-fest {
  margin: 0;
  font-weight: 600;
  color: var(--blau-dunkel);
}

/* LANGER NAME - AUF DEN SCHMALSTEN GERAETEN DAS KUERZEL (Festlegung 568,
   15.08.2026).

   In der App steht ueberall der volle Name der Veranstaltung. Der Zusatz des
   Auftraggebers zur Festlegung lautet: "aber nur wenn nichts umbricht oder
   so, dann lieber kurz".

   NACHGEMESSEN, WO DIE GRENZE LIEGT - an der Kopfleiste, der einzigen engen
   Stelle der App:

     375 Pixel  -> "Landesjugendtag 2026" auf zwei Zeilen, Leiste 67 hoch
     414 Pixel  -> eine Zeile, Leiste 59 hoch

   Die Grenze steht deshalb bei 25rem (400 Pixel) und nicht bei den 60rem,
   an denen die Seitenleiste zur Schublade wird: Es geht hier nicht um den
   Aufbau der Seite, sondern um genau diesen einen Namen. Eine Grenze, die
   mehr abdeckt als noetig, nimmt das Kuerzel auch dort, wo Platz waere.

   BEIDE FASSUNGEN STEHEN IM QUELLTEXT, eine davon ist "display: none" -
   und damit auch fuer ein Vorlesegeraet weg. Es liest keine doppelt. */
.nur-schmal { display: none; }

@media (max-width: 25rem) {
  .nur-breit { display: none; }
  .nur-schmal { display: inline; }
}

/* Die Glocke. Der Punkt daneben ist die Zahl der ungelesenen Nachrichten -
   sie steht zusaetzlich als Text fuer Vorleseprogramme dabei. */
.glocke {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 8px;
  color: var(--grau);
}
.glocke:hover { background: var(--hintergrund); color: var(--blau); }
.glocke .zaehler {
  position: absolute;
  top: 0.15rem;
  right: 0.1rem;
  margin: 0;
  line-height: 1.1rem;
  min-width: 1.1rem;
  font-size: 0.68rem;
}

/* --- Aufklappmenues: gewoehnliches HTML, kein JavaScript ------------------ */

.menue { position: relative; }
.menue > summary {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.menue > summary::-webkit-details-marker { display: none; }
.menue > summary:hover { background: var(--hintergrund); }
.menue[open] > summary { background: var(--hintergrund); }

/* EIN KLICK DANEBEN SCHLIESST DAS MENUE - ohne eine Zeile JavaScript.

   Bis zum 15.08.2026 blieb ein offenes Menue stehen, bis man es erneut
   antippte oder ein anderes oeffnete (dafuer sorgt das gemeinsame
   name="menue"). Wer daneben klickte, hatte es weiter vor sich - gemeldet
   als "schliessen nicht korrekt".

   Der Kniff: Solange das Menue offen ist, legt sein Kopf einen
   unsichtbaren Schirm ueber die ganze Seite. Ein Klick darauf trifft das
   summary - und ein Klick auf das summary klappt zu. Der Menueinhalt liegt
   mit z-index 30 DARUEBER und bleibt bedienbar.

   ES IST "::before" UND NICHT "::after": "::after" traegt in der Verwaltung
   bereits das Pfeilchen der Werkzeugmenues und der Filter
   (verwaltung.css, ".werkzeugmenue > summary::after"). Ein Schirm dort
   haette es verschluckt - dieselbe Falle wie schon viermal am 15.08.

   ES SCHIEBT NICHTS: Der Schirm ist "position: fixed" und durchsichtig, er
   nimmt keinen Platz und verrueckt keine Kante. Das ist der Unterschied zu
   dem schwebenden Hilfe-Kasten, der am 15.08. vier Fehler auf einmal
   erzeugt hat. */
.menue[open] > summary::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 25;
  background: transparent;
  cursor: default;
}

.wechsler > summary { color: var(--blau-dunkel); font-weight: 600; }
.wechsler .sinnbild { color: var(--grau); }

/* DER WEG IN DIE VERWALTUNG - oben rechts, an derselben Stelle, an der dort
   "Zur App" steht (Festlegung des Auftraggebers vom 13.08.2026).

   ER SAH ZUNAECHST NACH NICHTS AUS: "und in der App das Verwaltung ist noch
   nicht in so einem schoenen kasten". Gemessen war es genau das - kein
   Rahmen, kein Polster, kein Radius: ein nackter Verweis. Der Grund ist die
   Trennung der beiden Stylesheets. Die Gestaltung stand in "verwaltung.css",
   und die wird in der App nicht geladen; nur die Farben teilen sich beide
   Oberflaechen ueber "farben.css".

   DIESE REGELN SIND DESHALB WORTGLEICH zu denen dort - dasselbe Bauteil an
   derselben Stelle soll auch gleich aussehen, das ist der ganze Sinn der
   Angleichung. Wer eine davon aendert, aendert bitte beide. */
.kopfleiste .zur-app {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--linie);
  border-radius: 9px;
  font-size: 0.9rem;
  color: var(--grau);
  text-decoration: none;
  background: var(--flaeche);
}
.kopfleiste .zur-app:hover {
  background: var(--hintergrund);
  color: var(--blau);
  border-color: var(--blau);
}
.kopfleiste .zur-app .sinnbild { color: var(--grau-hell); }

.konto .kuerzel {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 999px;
  background: var(--blau);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.konto .wer { display: flex; flex-direction: column; line-height: 1.2; }
.konto .wer strong { font-size: 0.9rem; }
.konto .wer .klein { font-size: 0.78rem; }

.menueinhalt {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  z-index: 30;
  min-width: 15rem;
  padding: 0.4rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(28, 36, 41, 0.12);
}
.menueinhalt.rechtsbuendig { left: auto; right: 0; }
.menuekopf {
  margin: 0.2rem 0.6rem 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grau-hell);
}
/* DIE ZUSAETZE ":link"/":visited" SIND NICHT SCHMUECKEND (15.08.2026).

   In der Verwaltung stehen Aufklappmenues auch in der Knopfreihe oben
   rechts. Django beschreibt die Verweise dort mit ".object-tools a:link" -
   das ist GENAUER als ".menueinhalt a" und gewinnt, egal welche Datei
   spaeter geladen wird. Die Menueeintraege bekamen dadurch Djangos Polster
   von 3 auf 12 Pixeln: 26 Pixel hohe Zeilen, waehrend dieselben Eintraege
   im Kontomenue der Seitenleiste 40,8 hoch sind.

   Mit den beiden Zusaetzen ist diese Regel gleich genau und steht in der
   spaeteren Datei - damit gilt sie. Beim Nachmessen gefunden; dieselbe
   Falle wie bei ".object-tools a.addlink" (Festlegung 316). */
.menueinhalt a,
.menueinhalt a:link,
.menueinhalt a:visited,
.menueinhalt button {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: none;
  border-radius: 7px;
  background: none;
  color: var(--text);
  font: inherit;
  /* Die beiden gehoeren zum selben Fund wie die Zusaetze oben: Djangos
     Regel setzt Verweise in der Knopfreihe in VERSALIEN und sperrt sie -
     im Menue las sich das als "VERPFLEGUNG UND ALLERGIEN". Das Fett kommt
     eine Ebene hoeher her (verwaltung.css, ".object-tools"). */
  text-transform: none;
  letter-spacing: normal;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.menueinhalt a:hover,
.menueinhalt button:hover { background: var(--hintergrund); }
.menueinhalt a.aktiv,
.menueinhalt button.aktiv { background: var(--blau-blass); color: var(--blau-dunkel); }

/* --- Tableiste am unteren Rand (nur auf dem Handy) ------------------------ */

.tableiste { display: none; }

/* --- Seiten ohne Rahmen: Anmelden, Anmeldelink, Passwort ------------------ */

.ohne-rahmen main {
  max-width: 30rem;
  margin: 0 auto;
  padding: 3rem 1.25rem;
}
.ohne-rahmen .fuss { border: none; }

/* Der Absender auf den abgemeldeten Seiten. Dieselbe Anordnung wie in der
   Seitenleiste - Logo, Wortmarke darunter - und dieselbe Breite wie der
   Inhalt darunter, damit beide auf einer Kante stehen. */
.anmelde-marke {
  /* "width: 100%" ist hier Pflicht und keine Zierde: Die Inhaltsspalte ist
     eine Flex-Spalte, und ein Kind mit "margin: auto" schrumpft darin auf
     seinen Inhalt - der Kasten waere nur so breit wie das Logo und stuende
     dann mittig statt auf der Kante des Formulars. Nachgemessen: 176 statt
     480 Pixel. */
  width: 100%;
  max-width: 30rem;
  margin: 0 auto;
  padding: 3rem 1.25rem 0;
  box-sizing: border-box;
  text-align: center;
}
/* Groesser als in der Seitenleiste (dort 8.5rem): Hier ist es das Erste, was
   jemand von der Anwendung sieht. "margin: auto" stellt es mittig - ein
   Block-Element folgt keiner Textausrichtung. */
.anmelde-marke img {
  display: block;
  width: 13rem;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
/* IN GROSSBUCHSTABEN, UEBERALL GLEICH (Entscheidung vom 15.08.2026). Es gibt
   vier Stellen mit dieser Unterschrift: die beiden Anmeldekoepfe und die
   beiden Seitenleisten - App und Verwaltung.

   ETWAS KLEINER ALS DIE GEMISCHTE FASSUNG (1.05 statt 1.25rem) und weiter
   gesperrt: Versalien haben keine Ober- und Unterlaengen, sie wirken bei
   gleicher Punktzahl groesser und lauter. Die Sperrung gibt ihnen Luft. */
.anmelde-marke span {
  display: block;
  margin-top: 0.5rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--grau);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Traegt die Seite den Kopf, kommt der Abstand nach oben von IHM - sonst
   stuenden zwei Mal 3rem uebereinander. Die Ruecknahme steht direkt hinter
   der Regel, die sie zuruecknimmt. */
.ohne-rahmen .anmelde-marke + main { padding-top: 1.5rem; }

/* Die schlichten Seiten sind MITTIG aufgebaut - wie der Logo-Kopf darueber.
   Ansage des Auftraggebers vom 15.08.2026: "den Anmelden button in die Mitte,
   schaue dass alle diese seiten gleich sind". Es sind sechs: Anmelden,
   Passwort vergessen, "Anmeldelink ist unterwegs", Anmeldelink bestaetigen,
   Anmeldelink ungueltig und die Startseite fuer Abgemeldete.

   IMPRESSUM UND DATENSCHUTZ SIND AUSGENOMMEN (".breit"): Zentrierter
   Fliesstext ueber mehrere Bildschirme liest sich schlecht. */
.ohne-rahmen:not(.breit) main { text-align: center; }

/* Die Eingabefelder behalten ihre linke Kante. Beschriftungen, die mal hier
   und mal dort anfangen, sind schwerer zu lesen als eine Spalte - und ein
   zentriertes "E-Mail" ueber einem Feld sieht aus wie ein Versehen. */
.ohne-rahmen:not(.breit) .formular { text-align: left; margin: 0 auto; }

/* Der Knopf steht mittig. "display: block" ist noetig, weil er sonst der
   Textausrichtung seines Formulars folgt - und die ist links (Zeile darueber). */
.ohne-rahmen:not(.breit) .formular .knopf {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
/* Die Knopfreihe ist ein Flex-Kasten; bei ihr richtet nicht "margin" aus,
   sondern "justify-content". */
.ohne-rahmen:not(.breit) .knopfreihe { justify-content: center; }

/* Impressum und Datenschutz stehen breiter als eine Anmeldemaske. 30rem sind
   fuer ein Formular richtig und fuer mehrere Bildschirme Fliesstext zu eng -
   die Zeile wuerde alle vier Woerter umbrechen. */
.ohne-rahmen.breit main { max-width: 46rem; }

/* --- Fusszeile ------------------------------------------------------------ */

.fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem 1.25rem;
  border-top: 1px solid var(--linie);
  padding: 1.25rem 1.5rem;
  font-size: 0.85rem;
  color: var(--grau);
  text-align: center;
}
/* Die Pflichtverweise treten zurueck - sie sollen auffindbar sein, nicht
   auffallen. Beim Ueberfahren werden sie zur Hausfarbe. */
.fuss a { color: var(--grau); }
.fuss a:hover { color: var(--blau); }


/* ===========================================================================
   DIE STARTSEITE EINER VERANSTALTUNG
   =========================================================================== */

.hero {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: space-between;
  padding: 1.75rem;
  margin: 0 0 1.25rem;
  border-radius: var(--rundung);
  /* Der Verlauf laeuft diagonal von der dunklen Ecke links oben in die
     Hausfarbe rechts unten. Darueber liegt ein Schein in Magenta, der
     zweiten Farbe des Logos - er sitzt oben rechts und ist bei 60 % seines
     Radius vollstaendig verschwunden, erreicht also nur die rechte Haelfte.
     Die vorherige Fassung hatte einen dritten, helleren Blauton am Ende;
     der lag so nah an der Hausfarbe, dass das letzte Drittel flau wirkte.

     GERECHNET, nicht geschaetzt: Der hellste Punkt der ganzen Flaeche kommt
     auf 4,92:1 gegen Weiss - ueber der Grenze von 4,5:1 fuer Fliesstext.
     Wer die Farben aendert, muss das nachrechnen. */
  background:
    radial-gradient(90% 130% at 92% 6%,
                    rgba(208, 30, 119, 0.45) 0%, rgba(208, 30, 119, 0) 60%),
    linear-gradient(135deg, var(--blau-tief) 0%, var(--blau) 100%);
  color: #fff;
}
/* Text links, die eigenen Termine rechts - solange Platz ist. Ohne die
   Grundbreite nimmt sich der Text die ganze Zeile (der vollstaendige Name
   einer Veranstaltung ist lang) und schiebt die Termine darunter. */
.hero-text { flex: 1 1 20rem; min-width: 0; }
.hero h1 { color: #fff; margin: 0.15rem 0 0; font-size: 1.85rem; }
.hero-gruss { margin: 0; opacity: 0.85; font-size: 0.9rem; }
.hero-name { margin: 0 0 1.25rem; font-size: 1.35rem; font-weight: 700; }
.hero-zeitraum { margin: 0; font-size: 0.9rem; opacity: 0.9; }
/* HIER STAND ".hero-langname" (bis 15.08.2026). Unter der Ueberschrift mit
   dem Kurznamen stand eine kleinere Zeile mit dem vollen Namen. Seit die
   App durchgehend den vollen Namen zeigt (Festlegung 568), gibt es diese
   Zeile nicht mehr - und damit auch ihr Aussehen nicht. Ein Stylesheet, das
   Klassen kleidet, die es nicht mehr gibt, ist der Ort, an dem beim
   naechsten Umbau jemand raet. */

.hero-angaben {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  margin: 0.9rem 0 0;
  font-size: 0.9rem;
}
.hero-rolle {
  padding: 0.05rem 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  font-size: 0.82rem;
}

/* Die eigenen Termine des Wochenendes, als Strahl mit Punkten. */
.hero-termine {
  flex: 0 1 17rem;
  padding: 1rem 1.1rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
}
.hero-termine .klein { color: rgba(255, 255, 255, 0.8); margin: 0 0 0.6rem; }

.zeitstrahl { list-style: none; margin: 0; padding: 0 0 0 0.9rem; }
.zeitstrahl li {
  position: relative;
  display: flex;
  gap: 0.75rem;
  padding: 0 0 0.85rem 0.9rem;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}
.zeitstrahl li:last-child { border-left-color: transparent; padding-bottom: 0; }
.zeitstrahl li::before {
  content: "";
  position: absolute;
  left: -0.3rem;
  top: 0.45rem;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
}
.zeitstrahl li.jetzt::before { background: var(--magenta); box-shadow: 0 0 0 3px rgba(208, 30, 119, 0.25); }
.zeitstrahl .datum { font-size: 0.82rem; opacity: 0.85; flex: none; }
.zeitstrahl .was { display: flex; flex-direction: column; line-height: 1.3; }
.zeitstrahl .was strong { font-size: 0.9rem; font-weight: 600; }
.zeitstrahl .was .klein { font-size: 0.78rem; color: rgba(255, 255, 255, 0.75); }

/* Das Band, wenn die Veranstaltung gerade laeuft. */
.laufband {
  margin: 0 0 1.25rem;
  padding: 0.7rem 1rem;
  border-radius: 10px;
  background: var(--magenta-blass);
  border-left: 4px solid var(--magenta);
  color: var(--text);
}

/* --- Zwei Spalten --------------------------------------------------------- */

.spalten {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}
.spalte-breit, .spalte-schmal { display: flex; flex-direction: column; gap: 1.25rem; }

/* --- Karten --------------------------------------------------------------- */

.karte {
  padding: 1.25rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  box-shadow: var(--schatten);
}
.karte > :last-child { margin-bottom: 0; }
.karte h2 .sinnbild { color: var(--blau); }
.karte h2.mit-verweis {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
/* Der Verweis in der Ueberschrift ist magenta, nicht grau: Er ist das
   einzige Anklickbare in der Karte und muss danach aussehen. Die Regel
   steht hier fuer ALLE solchen Karten - „Nachrichten" und „Als Naechstes"
   stehen uebereinander, und einer grau und einer magenta saehe aus wie ein
   Fehler. Sie ist genauer als ".klein" und gewinnt deshalb dessen Grau. */
.karte h2.mit-verweis a { font-weight: 400; color: var(--magenta); }

/* --- Rechtstexte (Impressum, Datenschutz) --------------------------------- */
/* Laengerer Fliesstext liest sich anders als eine Liste von Angaben: Die
   Zeile darf nicht zu lang werden, die Zwischenueberschriften brauchen Luft,
   und lange Adressen duerfen die Karte nicht sprengen. */

.rechtstext { max-width: 44rem; }
.rechtstext p { margin: 0 0 0.9rem; }
.rechtstext h3 { margin: 1.6rem 0 0.5rem; }
.rechtstext h3:first-of-type { margin-top: 0.4rem; }
.rechtstext ul { margin: 0 0 0.9rem; padding-left: 1.2rem; }
.rechtstext li { margin-bottom: 0.4rem; }
.rechtstext a { overflow-wrap: anywhere; }

/* --- Schnellzugriff ------------------------------------------------------- */

.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.75rem;
}
.kacheln a {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.9rem;
  border: 1px solid var(--linie);
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
}
.kacheln a:hover { border-color: var(--blau); background: var(--blau-blass); }
.kacheln strong { font-size: 0.95rem; }
.kacheln .klein { line-height: 1.35; }
/* Das Sinnbild auf farbiger Flaeche. Steht hier allgemein, weil es an drei
   Stellen vorkommt: in den Schnellzugriff-Kacheln, in den Eintragslisten
   (Unterlagen, Antraege) und bei "Meine Teilnahme". Die Kacheln machen es
   nur groesser. */
.bild {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 9px;
}
.bild .sinnbild { width: 1.2rem; height: 1.2rem; }
.bild.blau { background: var(--blau-blass); color: var(--blau); }
.bild.magenta { background: var(--magenta-blass); color: var(--magenta); }
.bild.gruen { background: var(--gruen-flaeche); color: var(--gruen); }
/* Grau lag bis zum 14.08.2026 auf dem Seitenhintergrund und war auf einer
   weissen Karte kaum zu sehen. Jetzt auf einer eigenen Flaeche, so hell wie
   die anderen - sonst faellt die graue Kachel aus der Reihe. */
.bild.grau { background: var(--grau-flaeche); color: var(--grau); }
/* Zwei weitere Toene, damit die sechs Kacheln des Schnellzugriffs sechs
   verschiedene Farben haben (14.08.2026). Sie stehen hier allgemein, benutzt
   werden sie bisher nur dort. */
.bild.gelb { background: var(--gelb-flaeche); color: var(--gelb); }
.bild.violett { background: var(--violett-blass); color: var(--violett); }

.kacheln .bild { width: 2.4rem; height: 2.4rem; margin-bottom: 0.5rem; }
.kacheln .bild .sinnbild { width: 1.35rem; height: 1.35rem; }

/* --- Meine Teilnahme ------------------------------------------------------ */

.teilnahme-stand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  margin: 0 0 1rem;
  border-radius: 10px;
  background: var(--hintergrund);
}
.teilnahme-stand > span:last-child { display: flex; flex-direction: column; line-height: 1.35; }
.teilnahme-stand .zeichen {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  flex: none;
  border-radius: 999px;
}
.teilnahme-stand .zeichen.zugesagt { background: var(--gruen-flaeche); color: var(--gruen); }
.teilnahme-stand .zeichen.abgesagt { background: var(--rot-flaeche); color: var(--rot); }
.teilnahme-stand .zeichen.offen { background: var(--gelb-flaeche); color: var(--gelb); }

/* --- Die Rueckmeldefrist (14.08.2026) -------------------------------------
   Steht direkt unter dem Stand der Teilnahme, damit Frist und Knopf in einem
   Blick liegen. Ein eigener Kasten waere zu viel Gewicht - es ist ein Satz,
   keine Warnung.

   ZWEI FARBEN, UND DER UNTERSCHIED IST DIE AUFFORDERUNG: Vor der Frist eine
   ruhige Bitte. Danach ein sichtbarer Hinweis - aber in Gelb und nicht in
   Rot: Es ist nichts kaputt, und gesperrt ist auch nichts. Rot waere die
   Farbe fuer "das geht jetzt nicht mehr", und genau das stimmt hier nicht. */
.fristhinweis {
  margin: -0.5rem 0 1rem;
  padding: 0 0.15rem;
  font-size: 0.94rem;
  color: var(--grau);
}
.fristhinweis.abgelaufen {
  margin: -0.5rem 0 1rem;
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  background: var(--gelb-flaeche);
  border: 1px solid var(--gelb-linie);
  color: var(--gelb);
}

.knopfreihe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 1rem 0 0.5rem;
}
.knopfreihe .knopf { margin: 0; }
.knopfreihe form { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0; }

/* --- Kurze Vorschaulisten -------------------------------------------------
   Sinnbild, Titel, eine Zeile Kleingedrucktes. Benutzt von den beiden Karten
   der Verwaltungs-Uebersicht ("Zuletzt hochgeladen", "Letzte Nachrichten").

   Bis zum 14.08.2026 hing hier auch die Tagesordnungs-Vorschau der App - sie
   hat seither einen eigenen Zeitstrahl und einen eigenen Namen
   (".ablaufvorschau", weiter oben). Ihre beiden Regeln fuer Uhrzeit und
   laufenden Punkt sind mit ausgezogen. */

.vorschau { list-style: none; margin: 0; padding: 0; }
.vorschau li {
  display: flex;
  gap: 0.9rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--linie);
}
.vorschau li:first-child { border-top: none; padding-top: 0; }
.vorschau .was { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.vorschau .was strong { font-size: 0.92rem; font-weight: 600; }

/* --- Die naechsten Punkte auf der Startseite ------------------------------
   Die kleine Schwester des Ablaufplans (weiter unten): dieselbe Uhrzeit
   aussen, dieselbe Linie, derselbe Ring - nur schmaler, denn sie steht in
   der rechten Spalte und hat dort rund 320 Pixel.

   Ein eigener Name, KEIN Zusatz zu ".vorschau": Die Verwaltung laedt dieselbe
   Datei und benutzt ".vorschau" fuer zwei ganz andere Karten. */

.ablaufvorschau { list-style: none; margin: 0; padding: 0; }
.ablaufvorschau li {
  position: relative;
  display: grid;
  grid-template-columns: 2.9rem 1fr;
  gap: 0 0.7rem;
  padding: 0.65rem 0;
}
.ablaufvorschau li + li { border-top: 1px solid var(--linie); }

/* Linie und Ring sind reine Zierde - deshalb Pseudo-Elemente: Ein
   Vorleseprogramm liest sie nicht mit. Die Linie laeuft im Abstand zwischen
   Uhrzeit und Text, der Ring sitzt mittig darauf. */
.ablaufvorschau li::before {
  content: "";
  position: absolute;
  left: 3.25rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--linie);
}
.ablaufvorschau li:first-child::before { top: 0.85rem; }
.ablaufvorschau li:last-child::before { bottom: auto; height: 0.85rem; }
.ablaufvorschau li::after {
  content: "";
  position: absolute;
  left: calc(3.25rem - 4px);
  top: 0.7rem;
  width: 10px;
  height: 10px;
  border: 2px solid var(--grau-hell);
  border-radius: 50%;
  background: var(--flaeche);
}

.ablaufvorschau .zeit {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--grau);
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding-top: 0.05rem;
}
.ablaufvorschau .punkt {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  padding-left: 0.9rem;
}
.ablaufvorschau .nummer {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--blau);
}
.ablaufvorschau .titel { font-size: 0.92rem; font-weight: 600; line-height: 1.35; }
.ablaufvorschau .klein { display: block; }

/* Der laufende Punkt - wie im Ablaufplan, nur ohne die blasse Flaeche:
   In einer Karte von 320 Pixeln waere ein Kasten im Kasten zu viel. */
.ablaufvorschau li.laeuft .zeit,
.ablaufvorschau li.laeuft .nummer,
.ablaufvorschau li.laeuft .titel,
.ablaufvorschau li.laeuft .jetzt { color: var(--magenta); }
.ablaufvorschau li.laeuft::after {
  background: var(--magenta);
  border-color: var(--magenta);
  box-shadow: 0 0 0 3px rgba(208, 30, 119, 0.2);
}

/* Ein Programmpunkt traegt keine Nummer - er wird ueber den Ring
   unterschieden, in derselben Farbe wie im Ablaufplan. */
.ablaufvorschau li.programmpunkt .titel { font-weight: 500; }
.ablaufvorschau li.programmpunkt::after { border-color: #d8c9a8; }

.ablaufvorschau .noch-nicht { color: var(--gelb); }
.ablaufvorschau .noch-nicht .sinnbild { width: 0.9rem; height: 0.9rem; }

/* Steht nichts an, gibt es auch nichts, woran ein Ring haengen koennte. */
.ablaufvorschau li.leerzeile { display: block; padding: 0.2rem 0; }
.ablaufvorschau li.leerzeile::before,
.ablaufvorschau li.leerzeile::after { content: none; }

/* --- Die eigenen Veranstaltungen ------------------------------------------
   Der Einstieg: eine Kachel je Veranstaltung, links das Datum wie auf einem
   Abreisskalender. So ist auf einen Blick zu sehen, was wann ist. */

.veranstaltungsliste { list-style: none; margin: 0; padding: 0; }
.veranstaltungsliste li { margin-bottom: 0.75rem; }
.veranstaltungsliste li:last-child { margin-bottom: 0; }
/* In einer Karte traegt schon die Karte den Rahmen - sonst stuende ein
   Kasten im Kasten. */
.karte .veranstaltungsliste a { box-shadow: none; }

/* Mehrere Gruppen von Angaben untereinander (im Profil). In der Regel gibt
   es nur eine; der Abstand greift erst ab der zweiten. */
.angabengruppe + .angabengruppe {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--linie);
}
.veranstaltungsliste a {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.15rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  box-shadow: var(--schatten);
  color: var(--text);
  text-decoration: none;
}
.veranstaltungsliste a:hover { border-color: var(--blau); }
.veranstaltungsliste .datum {
  display: grid;
  place-items: center;
  flex: none;
  width: 3.4rem;
  padding: 0.4rem 0;
  border-radius: 9px;
  background: var(--blau-blass);
  color: var(--blau-dunkel);
  line-height: 1.1;
}
.veranstaltungsliste .datum strong { font-size: 1.25rem; }
.veranstaltungsliste .datum span { font-size: 0.75rem; text-transform: uppercase; }
.veranstaltungsliste .was {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.veranstaltungsliste .was > strong { font-size: 1.02rem; color: var(--blau-dunkel); }
.veranstaltungsliste .marke-stand { align-self: flex-start; }
.veranstaltungsliste .weiter { margin-left: auto; color: var(--grau-hell); }

.nachricht-kurz { padding: 0.65rem 0; border-top: 1px solid var(--linie); }
.nachricht-kurz:first-of-type { border-top: none; padding-top: 0; }
.nachricht-kurz p { margin: 0; }
.nachricht-kurz .kopf { margin-bottom: 0.15rem; }


/* ===========================================================================
   BAUSTEINE, DIE ALLE SEITEN BENUTZEN
   =========================================================================== */

/* --- Statusmarke: zugesagt, abgesagt, noch offen -------------------------- */

.marke-stand {
  display: inline-block;
  padding: 0.05rem 0.6rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}
.marke-zugesagt { color: var(--gruen); background: var(--gruen-flaeche); border-color: var(--gruen-linie); }
.marke-abgesagt { color: var(--rot); background: var(--rot-flaeche); border-color: var(--rot-linie); }
.marke-offen { color: var(--gelb); background: var(--gelb-flaeche); border-color: var(--gelb-linie); }

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

.hinweis {
  background: var(--blau-blass);
  border-left: 4px solid var(--blau);
  padding: 0.7rem 1rem;
  border-radius: 0 8px 8px 0;
  margin: 0 0 1rem;
}
.erledigt {
  background: var(--gruen-flaeche);
  border-left: 4px solid var(--gruen);
  padding: 0.7rem 1rem;
  border-radius: 0 8px 8px 0;
  margin: 0 0 1rem;
}
.fehler {
  background: var(--rot-flaeche);
  border-left: 4px solid var(--rot);
  padding: 0.7rem 1rem;
  border-radius: 0 8px 8px 0;
  color: var(--rot);
  margin: 0 0 1rem;
}

/* --- Abgeschlossene Veranstaltung (15.08.2026, Festlegung 553) ------------
   Dieselbe Form wie die Meldungen darueber - aber in GRAU, und das ist der
   Punkt: Es ist weder ein Erfolg (gruen) noch ein Fehler (rot), sondern ein
   Zustand. Rot hiesse "da ist etwas kaputt"; kaputt ist hier nichts, es ist
   nur vorbei. */
.abgeschlossen-hinweis {
  background: var(--grau-flaeche);
  border-left: 4px solid var(--grau);
  padding: 0.7rem 1rem;
  border-radius: 0 8px 8px 0;
  color: var(--grau);
  margin: 0 0 1rem;
}

/* --- Listen --------------------------------------------------------------- */

.liste { list-style: none; margin: 0; padding: 0; }
.liste li {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  margin-bottom: 0.6rem;
}
.liste .klein { display: block; }

/* --- Beschriftung und Wert ------------------------------------------------ */
/* Sie waren vertauscht: Die Beschriftung stand schwarz und fett, der WERT
   daneben grau - damit trat zurueck, weswegen man hinsieht. */

.angaben {
  display: grid;
  grid-template-columns: minmax(9rem, max-content) 1fr;
  margin: 0.4rem 0 0;
  border: 1px solid var(--linie);
  border-radius: 10px;
  overflow: hidden;
}
.angaben dt,
.angaben dd { margin: 0; padding: 0.5rem 0.9rem; border-top: 1px solid var(--linie); }
.angaben dt {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--grau);
  overflow-wrap: anywhere;
}
.angaben dd { color: var(--text); }
.angaben dt:first-of-type,
.angaben dt:first-of-type + dd { border-top: none; }

/* --- Knoepfe -------------------------------------------------------------- */

/* Mass und Form kommen aus farben.css - dort steht auch, warum (15.08.2026).
   Hier bleibt, was diesen Knopf ausmacht: seine Farbe. */
.knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  /* MINDESTENS 44 PIXEL HOCH (QA-Bericht vom 15.08.2026). Aus Polster,
     Schrift und Zeilenhoehe ergaben sich 42 - zwei zu wenig fuer den
     ueblichen Richtwert eines Tippziels. Am Empfang wird die Check-in-Liste
     mit dem Daumen bedient, oft im Stehen.

     "min-height" UND NICHT MEHR POLSTER: Die Polsterung steckt in einer
     Variablen, die auch die ganze Verwaltung benutzt - sie zu erhoehen
     haette dort jeden Knopf mitgezogen. So waechst nur, was zu klein war;
     breitere Knoepfe bleiben, wie sie sind. Zentriert bleibt der Text von
     selbst, das erledigt "align-items" darueber.

     In Pixeln und nicht in rem: Ein Daumen wird nicht groesser, wenn jemand
     die Schrift hochstellt. */
  min-height: 44px;
  padding: var(--knopf-polster);
  font-size: var(--knopf-schrift);
  line-height: var(--knopf-zeile);
  font-weight: 600;
  color: #fff;
  background: var(--blau);
  border: 1px solid var(--blau);
  border-radius: var(--knopf-rundung);
  cursor: pointer;
  text-decoration: none;
}
.knopf:hover { background: var(--blau-dunkel); border-color: var(--blau-dunkel); }

.knopf-still,
.knopf.knopf-still {
  background: var(--flaeche);
  color: var(--blau-dunkel);
  border-color: #c3ccd4;
}
.knopf-still:hover { background: var(--hintergrund); color: var(--blau-dunkel); }

.knopf-hell {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}
.knopf-hell:hover { background: rgba(255, 255, 255, 0.25); border-color: #fff; }

/* Der schlichte Knopf, der aussieht wie ein Verweis - fuer Nebensaechliches
   wie "Abmelden" oder "Zuruecknehmen". */
.abmelden {
  background: none;
  border: none;
  padding: 0;
  color: var(--blau);
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.95rem;
  font-family: inherit;
}

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

.formular {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  padding: 1.25rem;
  max-width: 26rem;
  box-shadow: var(--schatten);
}
.formular.breit { max-width: 36rem; }

/* Ein Formular, das in Karten gegliedert ist, braucht keinen eigenen Rahmen -
   sonst stuende ein Kasten im Kasten. Die Karten tragen ihn. */
.formular.randlos {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  max-width: none;
}
.formular.randlos .karte { max-width: 36rem; }
.formular.randlos > .knopfreihe { max-width: 36rem; }
.formular label { display: block; font-weight: 600; margin: 0.85rem 0 0.25rem; }
.formular input[type="text"],
.formular input[type="email"],
.formular input[type="password"],
.formular select,
.formular textarea {
  width: 100%;
  padding: 0.6rem 0.7rem;
  font-size: 1rem;
  font-family: inherit;
  border: 1px solid #c3ccd4;
  border-radius: 8px;
  background: var(--flaeche);
  color: var(--text);
}
/* EINE HOEHE FUER ALLE EINZEILIGEN FELDER.

   Nachgemessen am 15.08.2026: Auswahlfeld 44,2 Pixel, Textfeld 42,2 - und
   das, obwohl beide dieselbe Regel darueber tragen. Der Grund steckt nicht
   im Stylesheet, sondern im Browser: Ein <select> bringt eine eigene
   Mindesthoehe fuer seinen Inhalt mit (23 statt 21 Pixel).

   Ueber "line-height" ist dagegen nichts auszurichten - durchprobiert von
   1,25 bis 1,35 und mit festen 21 Pixeln, das Auswahlfeld blieb bei 44,19.
   Es braucht eine ausdrueckliche Hoehe.

   2,6rem sind 41,6 Pixel - dasselbe Mass wie die Knoepfe (41,7). Damit
   stehen Feld und Knopf nebeneinander auf einer Linie. Nachgemessen, dass
   nichts abgeschnitten wird (scrollHeight = clientHeight).

   MEHRZEILIGE FELDER BLEIBEN AUSSEN VOR: Ihre Hoehe kommt aus der Zahl der
   Zeilen und muss sich ziehen lassen. */
.formular input[type="text"],
.formular input[type="email"],
.formular input[type="password"],
.formular select {
  height: 2.6rem;
}
.formular textarea { resize: vertical; }
.formular :disabled { background: var(--hintergrund); color: var(--grau); }
.formular h2 { margin-top: 1.5rem; }
.formular :focus-visible,
.knopf:focus-visible,
.eintrag:focus-visible {
  outline: 2px solid var(--magenta);
  outline-offset: 2px;
}

/* Ankreuzfelder: Kaestchen links, Text daneben - nicht darunter */
.ankreuz {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-weight: 400;
  margin-top: 1rem;
}
.ankreuz input { margin-top: 0.35rem; flex: none; }

/* Postleitzahl und Ort nebeneinander, wie auf jedem Adressformular. */
.feldpaar { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.feldpaar .schmal { flex: 0 0 8rem; }
.feldpaar .weit { flex: 1 1 12rem; }
.feldpaar input { width: 100%; }

.loeschen { margin-top: 1rem; }

.kopfzeile { margin: -0.4rem 0 1.25rem; color: var(--grau); }

/* Der Weg zurueck ueber der Ueberschrift - bei Seiten, die man aus einer
   Liste heraus aufmacht. Er stand vorher UNTER der Ueberschrift und sah dort
   aus wie ein Teil des Inhalts. */
.zurueck { margin: 0 0 0.4rem; font-size: 0.9rem; }
.zurueck a { color: var(--grau); text-decoration: none; }
.zurueck a:hover { color: var(--blau); text-decoration: underline; }

/* HIER STAND ".ortshinweis" (bis 15.08.2026). Der Kasten mit dem Hinweis zum
   Veranstaltungsort ist beim Bau der Seite "Vor Ort" durch die dortigen
   Karten ersetzt worden; die Klasse stand seither in keiner Vorlage mehr. */

/* Antragstext und Begruendung. Bewusst schmaler als die Seite: Lange Zeilen
   liest niemand gern, und ein Antragstext kann lang werden. */
.antragstext { max-width: 42rem; line-height: 1.65; margin: 0 0 1.25rem; }

/* --- Tagesordnung --------------------------------------------------------- */
/* Die Regeln stehen weiter unten bei ".ablaufplan". Bis zum 12.08.2026 gab
   es hier einen zweiten Satz nur fuer die Saalseite - zwei Listen fuer
   dieselbe Sache, jede Aenderung zweimal. Die Saalseite benutzt jetzt
   dieselbe Liste und ergaenzt nur die Knoepfe. */

/* --- Die Tagesordnungsseite ----------------------------------------------- */
/* Nach dem Entwurf des Auftraggebers vom 11.08.2026: Tages-Chips oben,
   darunter je Tag eine Karte mit einem Zeitstrahl.

   Die Regeln stehen bewusst getrennt von ".ablauf" darueber - das ist die
   Liste der Saalseite, und die bleibt, wie sie ist. */

.tagechips {
  display: flex;
  gap: 0.4rem;
  margin: 0 0 1.1rem;
  padding-bottom: 0.25rem;
  /* Bei sieben Bezirksjugendtagen koennen es mehr Tage werden, als nebeneinander
     passen. Dann laesst sich die Reihe schieben, statt umzubrechen. */
  overflow-x: auto;
}
.tagechips a {
  flex: none;
  white-space: nowrap;
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: var(--flaeche);
  color: var(--blau-dunkel);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
}
.tagechips a:hover { border-color: var(--blau); background: var(--blau-blass); }
.tagechips a.heute {
  color: var(--magenta);
  background: var(--magenta-blass);
  border-color: #f2c3da;
}

/* Ein Sprungziel darf nicht unter der Kopfleiste landen. */
.tagesplan { scroll-margin-top: 1rem; }
.tagestitel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem; }
.tagesnummer { font-size: 0.85rem; font-weight: 600; color: var(--magenta); }

/* Der Zeitstrahl. Die Zeile traegt weder Rand noch eigene Flaeche - das
   uebernimmt die Karte drumherum, sonst stuenden Kaesten in einem Kasten. */
.ablaufplan li {
  position: relative;
  display: grid;
  grid-template-columns: 3.4rem 1fr;
  gap: 0 0.9rem;
  background: none;
  border: none;
  border-radius: 10px;
  padding: 0.8rem 0;
  margin: 0;
}
.ablaufplan li + li { border-top: 1px solid var(--linie); }

/* Die durchgehende Linie und der Punkt darauf. Beide sind reine Zierde -
   deshalb Pseudo-Elemente: Ein Vorleseprogramm liest sie nicht mit. */
.ablaufplan li::before {
  content: "";
  position: absolute;
  left: 4.3rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--linie);
}
.ablaufplan li:first-child::before { top: 1.2rem; }
.ablaufplan li:last-child::before { bottom: auto; height: 1.2rem; }
.ablaufplan li::after {
  content: "";
  position: absolute;
  left: calc(4.3rem - 6px);
  top: 1rem;
  width: 10px;
  height: 10px;
  border: 2px solid var(--grau-hell);
  border-radius: 50%;
  background: var(--flaeche);
}

.ablaufplan .zeit {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--grau);
  text-align: right;
  padding-top: 0.05rem;
}
.ablaufplan .punkt {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  padding-left: 1.1rem;
}
.ablaufplan .kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; }
.ablaufplan .nummer {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--blau);
}
.ablaufplan .titel { font-size: 1rem; font-weight: 600; line-height: 1.35; }
.ablaufplan .klein { display: block; }

/* Die Marken stehen jetzt allgemein weiter unten bei ".chip" - sie kommen
   auf der Tagesordnung, bei den Antraegen und bei den Unterlagen vor. */

/* Der laufende Punkt. Im Saal muss man ihn im Vorbeigehen finden. */
.ablaufplan li.laeuft { background: var(--blau-blass); }
.ablaufplan li.laeuft::after {
  background: var(--magenta);
  border-color: var(--magenta);
  box-shadow: 0 0 0 3px rgba(208, 30, 119, 0.2);
}
.ablaufplan li.laeuft .titel { color: var(--blau-dunkel); }
.ablaufplan li.laeuft .zeit { color: var(--magenta); }

/* Erledigtes tritt zurueck - aber nur der Text. Blasste die ganze Zeile ab,
   saehen die Verweise darunter gesperrt aus. */
.ablaufplan li.erledigt::after { background: var(--grau-hell); border-color: var(--grau-hell); }
.ablaufplan li.erledigt .punkt,
.ablaufplan li.erledigt .zeit { opacity: 0.58; }
.ablaufplan li.erledigt .titel { font-weight: 500; }

.ablaufplan li.programmpunkt .titel { font-weight: 500; }
.ablaufplan li.programmpunkt::after { border-color: #d8c9a8; }

/* Auf dem Handy schrumpft die Zeitspalte - 375 Pixel sind schnell voll. */
@media (max-width: 30rem) {
  .ablaufplan li { grid-template-columns: 2.9rem 1fr; gap: 0 0.7rem; }
  .ablaufplan li::before { left: 3.6rem; }
  .ablaufplan li::after { left: calc(3.6rem - 6px); }
  .ablaufplan .punkt { padding-left: 0.9rem; }
  .ablaufplan .zeit { font-size: 0.8rem; }
}

/* --- Marken -------------------------------------------------------------- */
/* Kleine Schildchen an einer Zeile: "Programm", "läuft gerade", "noch nicht
   freigegeben", "angenommen". Sie stehen an einer Stelle, weil sie auf der
   Tagesordnung, bei den Antraegen und bei den Unterlagen vorkommen.

   JEDE MARKE TRAEGT IHR WORT. Die Farbe ist nie die einzige Auskunft - wer
   Farben nicht unterscheidet, liest dasselbe (siehe die Statusfarben ganz
   oben). */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.1rem 0.55rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.chip .sinnbild { width: 0.85rem; height: 0.85rem; }

.chip-programm { color: #8a7550; background: #f6efe2; border-color: #e4d7bd; }
.chip-jetzt { color: var(--magenta); background: var(--magenta-blass); border-color: #f2c3da; }
.chip-gut { color: var(--gruen); background: var(--gruen-flaeche); border-color: var(--gruen-linie); }
.chip-schlecht { color: var(--rot); background: var(--rot-flaeche); border-color: var(--rot-linie); }
.chip-still { color: var(--grau); background: var(--hintergrund); border-color: var(--linie); }
/* "entwurf" heisst: gibt es, aber noch nicht fuer alle. Traegt das Schloss. */
.chip.entwurf { color: var(--gelb); background: var(--gelb-flaeche); border-color: var(--gelb-linie); }

/* --- Eintragslisten (Unterlagen, Antraege) -------------------------------- */
/* Eine Zeile je Eintrag, durch Haarlinien getrennt, die GANZE Zeile ist der
   Verweis - auf dem Handy trifft man so mit dem Daumen. Vorher war nur der
   Titel anklickbar. */
.eintraege { list-style: none; margin: 0; padding: 0; }
.eintraege li { border-top: 1px solid var(--linie); }
.eintraege li:first-child { border-top: none; }
.eintraege > li > a,
.eintraege > li > .zeile {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  padding: 0.75rem 0.5rem;
  margin: 0 -0.5rem;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
}
.eintraege > li > a:hover { background: var(--blau-blass); }
.eintraege .was {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  /* E-Mail-Adressen und Dateinamen haben keine Leerzeichen zum Umbrechen.
     Ohne diese Zeile ragen sie auf dem Handy aus der Zeile heraus - am
     12.08.2026 gemessen: 8 Pixel bei "stefan.bauer@example.org". */
  overflow-wrap: anywhere;
}
.eintraege .was strong { font-size: 0.97rem; font-weight: 600; line-height: 1.35; }
.eintraege .was .klein { display: block; }
.eintraege .marken { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.2rem; }
/* Was rechts am Rand der Zeile steht: der Pfeil bei anklickbaren Zeilen,
   sonst eine Marke (etwa die Rueckmeldung in der Teilnehmerliste). */
.eintraege .pfeil,
.eintraege .rechts { margin-left: auto; flex: none; align-self: center; }
.eintraege .pfeil { color: var(--grau-hell); }
.eintraege .pfeil .sinnbild { width: 1rem; height: 1rem; }

/* Auf dem Handy rutscht die Marke unter den Text und richtet sich an ihm
   aus. Daneben blieben ihr sonst 165 Pixel fuer Name, Rolle und E-Mail -
   am 12.08.2026 gemessen, die Adresse ragte heraus.

   DIESER BLOCK MUSS NACH DEN REGELN OBEN STEHEN: Er ist gleich genau, und
   bei gleicher Genauigkeit gewinnt die spaetere Regel. Weiter oben
   platziert hatte er keine Wirkung. */
@media (max-width: 30rem) {
  .eintraege > li > a,
  .eintraege > li > .zeile { flex-wrap: wrap; }
  .eintraege .was { flex: 1 1 60%; }
  .eintraege .rechts { margin-left: 3rem; margin-top: 0.4rem; }
}

/* --- Das Zahlenfenster im Saal -------------------------------------------- */

/* Die beiden Check-in-Zahlen stehen in einem eigenen kleinen Fenster - es
   erneuert sich fuer sich allein, waehrend die Saalseite stehen bleibt. Wer
   dort gerade eine Nachricht tippt, verloere sie sonst mitten im Satz.

   ES SIEHT NICHT AUS WIE EIN FENSTER, und das ist Absicht: kein Rahmen,
   durchsichtiger Grund, dieselbe Schrift. Fuer die Versammlungsleitung sind
   es einfach zwei Zahlen in ihrer Karte.

   DIE HOEHE MUSS FEST STEHEN, weil ein Fenster sich nicht nach seinem
   Inhalt richtet - es kennt ihn nicht.

   Am 14.08.2026 nachgemessen statt geschaetzt: Der Inhalt ist bei 1440
   Pixeln **88** hoch und bei 375 Pixeln **110** - dort bricht die Zeile mit
   der Uhrzeit um. Die Zahlen bleiben auch auf dem Handy NEBENEINANDER; die
   erste Schaetzung ging von untereinander aus und war 102 Pixel zu gross.
   Gesetzt sind 100 und 124: gut zehn Pixel Luft, damit eine andere
   Schriftgroesse nicht sofort einen Rollbalken erzeugt. */
.zahlenfenster {
  display: block;
  width: 100%;
  height: 100px;
  border: 0;
  margin: 0 0 0.2rem;
  background: transparent;
  overflow: hidden;
}
@media (max-width: 30rem) {
  .zahlenfenster { height: 124px; }
}

/* Der Inhalt des Fensters. Es ist eine eigene Seite und erbt deshalb nichts
   vom Rand der Karte, in der es steht - beides muss hier gesetzt werden. */
body.nur-zahlen {
  margin: 0;
  padding: 0;
  background: transparent;
}
body.nur-zahlen .zahlen { margin: 0 0 0.4rem; }
/* NICHT ".stand": So heisst im Stylesheet schon die Stand-Zeile der
   Teilnehmerseiten. Zwei Bedeutungen fuer einen Namen sind der Fehler, der
   in diesem Projekt schon fuenfmal zugeschlagen hat. */
.zahlenstand { margin: 0; color: var(--grau); }

/* --- Was gerade laeuft ---------------------------------------------------- */

/* Die Karte zum laufenden Punkt. Sie steht oben auf der Saalseite und traegt,
   was dazugehoert: Antrag samt Votum, Wahlgang, Unterlage.

   Der magentafarbene Streifen links ist dieselbe Sprache wie beim laufenden
   Punkt in der Liste darunter - und wie dort ist die Farbe nie die einzige
   Auskunft: Die Marke „laeuft gerade" steht als Wort daneben. */
.laeuft-jetzt { border-left: 3px solid var(--magenta); }
.laeuft-jetzt h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

/* Wie weit sind wir noch? Eine Zeile ueber der Bedienung. */
.antragszaehler { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; }
.antragszaehler a { margin-left: auto; }

/* --- Der Stern: ein privates Merkzeichen ---------------------------------- */

/* Er steht NEBEN dem Verweis der Zeile, nicht darin: Ein Knopf innerhalb
   eines Verweises ist ungueltiges HTML, und manche Handy-Browser machen
   daraus Unfug - der Daumen traefe dann mal das eine, mal das andere.

   Die Zeile wird dadurch ein Kasten mit zwei Feldern. Der Verweis nimmt den
   Platz, der uebrig bleibt; "min-width: 0" ist noetig, damit ein langer
   Titel ihn nicht aufblaeht statt umzubrechen. */
.eintraege > li.mit-stern { display: flex; align-items: stretch; }
/* Der negative Rand rechts muss weg. Eine gewoehnliche Zeile hat ihn auf
   beiden Seiten, damit die Hover-Flaeche bis in den Rand der Karte laeuft.
   Neben dem Stern ragte der Verweis dadurch 8 Pixel UNTER ihn - am
   14.08.2026 auf 375 Pixeln gemessen. Getroffen haette man dort trotzdem
   den Stern (er liegt spaeter im Text und damit obenauf), aber zwei
   Bedienelemente, die sich ueberlappen, sind ein Fehler und keine
   Feinheit. */
.eintraege > li.mit-stern > a { flex: 1 1 auto; min-width: 0; margin-right: 0; }

.stern { flex: none; display: flex; align-items: center; margin: 0; }
.stern button {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 44 Pixel im Quadrat - die Flaeche, die ein Daumen auf dem Handy sicher
     trifft. Das Sinnbild darin ist kleiner; der Rest ist Trefferflaeche. */
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--grau-hell);
  cursor: pointer;
}
.stern button:hover { background: var(--blau-blass); color: var(--magenta); }
.stern .sinnbild { width: 1.15rem; height: 1.15rem; }

/* Gesetzt: gefuellt und in Magenta.

   DIE FARBE IST NIE DIE EINZIGE AUSKUNFT (Festlegung 185) - deshalb ist der
   Stern zugleich GEFUELLT statt nur umrandet, und der Vorlesetext des
   Knopfes sagt, was ein Druck darauf bewirkt ("... merken" oder "... nicht
   mehr merken").

   Das Fuellen geht ueber CSS und nicht ueber eine zweite Datei: Das
   "fill=none" im Sinnbild ist ein Praesentationsattribut, und eine
   CSS-Regel gewinnt dagegen. Ein Sinnbild statt zwei. */
.stern button.gemerkt { color: var(--magenta); }
.stern button.gemerkt .sinnbild { fill: currentColor; }

/* Die Ueberschrift einer Seite mit dem Stern daneben (die Antragsseite).
   Hier darf er es auch technisch: Eine Ueberschrift ist kein Verweis. */
.titelzeile { display: flex; align-items: flex-start; gap: 0.5rem; }
.titelzeile h1 { flex: 1 1 auto; min-width: 0; }
.titelzeile .stern { align-items: flex-start; }
/* Der Knopf bleibt 44 Pixel gross - die Trefferflaeche fuer einen Daumen
   gilt hier wie in der Liste. Seine Mitte laege damit aber 6 Pixel unter
   der Mitte der Ueberschrift: Deren Zeile ist 32 Pixel hoch (1,6rem mal
   Zeilenabstand 1,25), der Knopf 44. (32 - 44) / 2 = -6. Nach unten stoert
   der Ueberhang nicht, dort stehen ohnehin 0,9rem Abstand. */
.titelzeile .stern button { margin-top: -6px; }

/* --- Die Saalseite -------------------------------------------------------- */

.saalknoepfe { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
.saalknoepfe .knopf { margin-top: 0; }

/* Im Saal sind die Zeilen hoeher als auf der Tagesordnung - unter jedem
   Punkt stehen die Knoepfe. Der Strahl bleibt trotzdem durchgehend. */
.saalliste li { padding-bottom: 1rem; }

/* Zwei Zahlen, gross: stimmberechtigt und davon eingecheckt. Sie werden am
   9. November im Saal vorgelesen - dafuer muessen sie aus zwei Metern
   Entfernung lesbar sein. */
.zahlen { display: flex; flex-wrap: wrap; gap: 2.5rem; margin: 0.5rem 0 1rem; }
.zahl { display: flex; flex-direction: column; margin: 0; line-height: 1.15; }
.zahl strong { font-size: 2.4rem; font-weight: 700; color: var(--blau-dunkel); }
.zahl span { font-size: 0.85rem; color: var(--grau); }

/* Wie viele da sind - ueber der Suche beim Check-in.

   NICHT ".zaehler" nennen: So heisst bereits der kleine magentafarbene
   Zaehler an der Glocke und am Eintrag "Nachrichten". Am 12.08.2026 einmal
   verwechselt - dann stand "6 von 17 sind da" als magentafarbener Balken
   quer ueber die Seite. */
.anwesenheit { margin: 0 0 0.9rem; font-size: 1.05rem; }
.anwesenheit strong { font-size: 1.4rem; color: var(--blau-dunkel); }

/* „Nur zeigen, wer noch fehlt“ - unter der Suche, mit Abstand nach oben:
   Die Suche ist der Handgriff fuer die Schlange, der Filter die Frage
   zwischendurch. */
.checkin-filter { margin: 0.9rem 0 0; font-size: 0.92rem; }
.checkin-filter strong { color: var(--blau-dunkel); }
.checkin-filter a { margin-left: 0.5rem; }

/* Das Erfassen des Wahlergebnisses steht unter den Bewerbungen und ist
   davon abgesetzt - es ist Arbeit, nicht Inhalt. */
.erfassen {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--linie);
}
.erfassen h3 { margin: 0 0 0.25rem; }
.knopf.zweitrangig {
  background: var(--flaeche);
  color: var(--blau-dunkel);
  border-color: var(--blau);
}

/* --- Nachrichten, Zusagen, Check-in --------------------------------------- */

/* HIER STANDEN ".nachrichtenkasten" und ".nachrichtenkasten p"
   (bis 15.08.2026). Die neueste Nachricht steht auf der Veranstaltungsseite
   seit dem Umbau auf Kacheln in einer gewoehnlichen Karte; der abgesetzte
   Kasten kam in keiner Vorlage mehr vor. */
/* Die Nachrichten in ihrer Karte: eine je Block, durch Haarlinien getrennt.
   Die neueste steht oben. */
.nachrichten { list-style: none; margin: 0; padding: 0; }
.nachrichten li {
  padding: 0.85rem 0;
  border-top: 1px solid var(--linie);
}
.nachrichten li:first-child { border-top: none; padding-top: 0; }
.nachrichten li:last-child { padding-bottom: 0; }
.nachrichten p { margin: 0; }
.nachrichten .kopf { margin-bottom: 0.2rem; }
.nachrichten .text { line-height: 1.5; }
.nachrichten .loeschen { margin-top: 0.35rem; }
/* Zurueckgezogenes tritt zurueck - aber nur der Text, nicht der Knopf. */
.nachrichten li.zurueckgezogen .kopf,
.nachrichten li.zurueckgezogen .text { opacity: 0.6; }

.stand { margin-top: 1.4rem; }

.zusage { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; }
.zusage .knopf { margin-top: 0; }

.zusage-klein { display: flex; gap: 0.5rem; margin-top: 0.35rem; }
/* Der kleine Knopf der App - dasselbe Mass wie die Sammelaktionen in der
   Verwaltung (15.08.2026). Vorher war er 28 Pixel hoch bei 6 Pixeln Rundung
   und damit die fuenfte Groesse im Haus. */
.zusage-klein button {
  font-size: var(--knopf-schrift-klein);
  line-height: var(--knopf-zeile);
  font-weight: 600;
  padding: var(--knopf-polster-klein);
  color: var(--blau-dunkel);
  background: var(--flaeche);
  border: 1px solid #c3ccd4;
  border-radius: var(--knopf-rundung);
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
}
.zusage-klein button:hover { background: var(--hintergrund); }

.suche {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 0.5rem 0 1.25rem;
}
.suche label { font-weight: 600; }
.suche input[type="search"] {
  flex: 1 1 14rem;
  padding: 0.6rem 0.7rem;
  font-size: 1rem;
  border: 1px solid #c3ccd4;
  border-radius: 8px;
}
.suche .knopf { margin-top: 0; }

/* HIER STANDEN ".checkin-zeile" und ".checkin-zeile .knopf"
   (bis 15.08.2026). Die Check-in-Liste benutzt seit ihrem Umbau die
   allgemeine Bauform ".eintraege"; beide Klassen standen in keiner
   Vorlage mehr. */

/* --- Ausklappbare Erlaeuterung ------------------------------------------- */

.erklaerung { margin: 0.5rem 0 1.25rem; }
.erklaerung > summary {
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--grau);
  padding: 0.25rem 0;
}
.erklaerung > summary:hover { color: var(--text); }
.erklaerung[open] > summary { margin-bottom: 0.35rem; }
.erklaerung p:last-child { margin-bottom: 0; }

/* --- Zweiter Faktor ------------------------------------------------------- */

.qr {
  display: inline-block;
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: 10px;
  padding: 0.9rem;
  max-width: 100%;
}
.qr svg { display: block; width: 220px; height: 220px; }

.schluessel {
  display: inline-block;
  margin-top: 0.35rem;
  padding: 0.35rem 0.6rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 6px;
  font-family: ui-monospace, Consolas, monospace;
  letter-spacing: 0.08em;
}

.codes {
  list-style: none;
  margin: 0.75rem 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  gap: 0.5rem;
}
.codes li {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 6px;
  padding: 0.55rem 0.5rem;
  text-align: center;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 1.1rem;
  letter-spacing: 0.1em;
}

/* --- Sponsoren ------------------------------------------------------------ */

/* Je Sponsor eine Karte - Rahmen und Flaeche kommen von ".karte", hier steht
   nur die Aufteilung: Logo links, Text rechts. */
.sponsoren { list-style: none; margin: 0; padding: 0; }
.sponsoren li {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}
.sponsoren img {
  flex: 0 0 140px;
  width: 140px;
  max-height: 90px;
  object-fit: contain;
  object-position: left center;
}
.sponsoren .sponsor-text { flex: 1 1 auto; min-width: 0; }
/* Die Ueberschrift eines Sponsors ist eine gewoehnliche h2 und traegt seit
   dem 15.08.2026 auch deren Groesse. Vorher stand sie als einzige der App
   auf 1,05rem (16,8 statt 18,4 Pixel) - auf einer Seite gemessen, auf allen
   anderen nicht. Nur der Abstand ist hier enger, weil die Zeile darunter
   dazugehoert. */
.sponsoren h2 { margin: 0 0 0.35rem; }
.sponsoren p { margin: 0 0 0.35rem; }
.sponsoren p:last-child { margin-bottom: 0; }

/* --- Die Redner ------------------------------------------------------------
   Je Anlass eine Karte, darin je Gast eine Zeile: Bild links, Name rechts.
   Anders als beim Partnerlogo ist das Bild ein PORTRAET - deshalb quadratisch
   beschnitten und rund, nicht frei stehend. */

.rednerliste { list-style: none; margin: 0; padding: 0; }
.rednerliste li {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  padding: 0.9rem 0;
  border-top: 1px solid var(--linie);
}
.rednerliste li:first-child { border-top: none; padding-top: 0; }
.rednerliste li:last-child { padding-bottom: 0; }

.rednerbild { flex: 0 0 96px; margin: 0; }
.rednerbild img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}
/* Der Bildnachweis. Klein, aber IMMER da, wenn es ein Bild gibt - er ist
   keine Zierde, sondern die Bedingung, unter der das Foto benutzt werden
   darf. Er darf umbrechen; abschneiden waere das Gegenteil seines Zwecks. */
.rednerbild figcaption {
  margin-top: 0.3rem;
  font-size: 0.72rem;
  line-height: 1.3;
  color: var(--grau);
  overflow-wrap: anywhere;
}

.rednerliste .bild { flex: 0 0 auto; width: 3rem; height: 3rem; }
.redner-text { flex: 1 1 auto; min-width: 0; }
.redner-text strong { display: block; font-size: 1.02rem; }
.redner-text .klein { display: block; margin-top: 0.1rem; }
.redner-text p { margin: 0.5rem 0 0; }

/* Auf dem Handy steht das Bild ueber dem Namen - 96 Pixel plus Text passen
   bei 375 Pixeln nicht nebeneinander, wenn der Name lang ist. */
@media (max-width: 30rem) {
  .rednerliste li { flex-direction: column; gap: 0.6rem; }
  .rednerbild { flex: none; }
}


/* Zwei Spalten lohnen sich erst ab einem breiten Fenster. Auf einem
   gewoehnlichen Laptop blieben rechts 20 Zeichen je Zeile uebrig - dann
   steht lieber alles untereinander. */
@media (max-width: 68rem) {
  .spalten { grid-template-columns: minmax(0, 1fr); }
}

/* ===========================================================================
   SCHMALE BILDSCHIRME
   Unter 60rem verschwindet die Seitenleiste und die Leiste am unteren Rand
   uebernimmt. Der erste Bildschirm gehoert dann dem Inhalt.
   =========================================================================== */

@media (max-width: 60rem) {
  .mit-rahmen { grid-template-columns: minmax(0, 1fr); }

  /* Die Seitenleiste liegt weg und faehrt ueber "Mehr" hervor - mit einem
     Anker, nicht mit JavaScript. Bewusst als Schublade und nicht ueber die
     ganze Breite: Der Streifen der Seite daneben zeigt, dass man sich nur
     etwas darübergelegt hat und mit einem Tipper zurueckkommt. */
  .seitenleiste {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(20rem, 86vw);
    z-index: 60;
    transform: translateX(-102%);
    transition: transform 0.15s ease-out;
    box-shadow: 0 0 40px rgba(28, 36, 41, 0.25);
  }
  .seitenleiste:target { transform: none; }

  .schliessen {
    display: block;
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--linie);
    border-radius: 999px;
    font-size: 0.8rem;
    color: var(--grau);
    text-decoration: none;
  }

  .kopfleiste { padding: 0.5rem 1rem; }
  .kopfleiste .marke-klein { display: block; }
  /* DER WECHSLER IST AUF DEM HANDY WIEDER DA (13.08.2026).

     Er war ausgeblendet, und der Grund war gut: "Der Wechsler und der volle
     Name passen auf 375 Pixeln nicht neben Logo, Glocke und Konto - sie
     wurden aus dem Bild geschoben."

     DIESER GRUND IST ENTFALLEN. Das Konto steht seit heute unten in der
     Seitenleiste, nicht mehr hier oben. Nachgemessen: Zwischen Logo (endet
     bei 104) und dem Knopf rechts (beginnt bei 233) lagen 129 Pixel
     ungenutzt - der Wechsler braucht 113.

     UND ER MUSS DA SEIN, sonst waere die Angleichung halb: In der Verwaltung
     steht er auf dem Handy, in der App nicht - genau die Ungleichheit, die
     der Auftrag beseitigen soll.

     "wechsler-fest" (der Name ohne Auswahl, bei nur einer Teilnahme) bleibt
     aus demselben Grund ebenfalls stehen. */

  /* Nur das Sinnbild, kein Wort - wortgleich zur Regel in der Verwaltung.
     Der Knopf schrumpft damit von 126 auf 36 Pixel, und genau die
     neunzig sind es, die den Wechsler moeglich machen. */
  .kopfleiste .zur-app { padding: 0.45rem; }
  .kopfleiste .zur-app span { display: none; }

  /* DAS AUFGEKLAPPTE MENUE SPANNT SICH UEBER DIE GANZE KOPFLEISTE.

     Zwei Messungen bis dahin: Nach rechts geoeffnet endete es bei 421 von
     375 Pixeln, nach links geoeffnet begann es bei -8. Ein 240 Pixel breites
     Menue passt neben einem Bedienelement in der Mitte eines
     Handybildschirms schlicht nirgendwo hin.

     Die Loesung nimmt ihm den Bezugspunkt: "position: static" am Wechsler
     laesst das Menue sich an der KOPFLEISTE ausrichten statt an ihm, und
     zwei Anker (links wie rechts 1rem) spannen es ueber deren Breite. Damit
     ist es unabhaengig davon, wie lang ein Veranstaltungsname ist und wo der
     Wechsler gerade steht. */
  .kopfleiste { position: relative; }
  .kopfleiste .menue.wechsler { position: static; }
  .kopfleiste .menue.wechsler > .menueinhalt {
    left: 1rem;
    right: 1rem;
    min-width: 0;
  }

  main { padding: 1rem; padding-bottom: 5.5rem; }
  .fuss { padding-bottom: 5rem; }
  /* Auf 375 Pixeln passt der Verbandsname nicht neben die beiden Verweise.
     Ohne diese Zeile bricht die Reihe mitten zwischen ihnen um, und
     "Datenschutz" steht allein in der naechsten Zeile. So bekommt der Name
     eine eigene Zeile und die beiden Verweise stehen nebeneinander. */
  .fuss span { flex-basis: 100%; }

  .tableiste {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 50;
    display: flex;
    justify-content: space-around;
    padding: 0.35rem 0.25rem calc(0.35rem + env(safe-area-inset-bottom));
    background: var(--flaeche);
    border-top: 1px solid var(--linie);
  }
  .tableiste a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    flex: 1 1 0;
    padding: 0.35rem 0.1rem;
    border-radius: 8px;
    color: var(--grau);
    text-decoration: none;
    font-size: 0.68rem;
    text-align: center;
  }
  .tableiste a.aktiv { color: var(--magenta); font-weight: 600; }
  .tableiste .sinnbild { width: 1.35rem; height: 1.35rem; }

  .hero { padding: 1.25rem; }
  .hero h1 { font-size: 1.5rem; }
  .hero-termine { flex: 1 1 100%; }

  .spalten { grid-template-columns: minmax(0, 1fr); }

  .angaben { grid-template-columns: 1fr; }
  .angaben dt { padding-bottom: 0; }
  .angaben dd { padding-top: 0.1rem; border-top: none; }

  .sponsoren li { flex-direction: column; gap: 0.75rem; }
  .sponsoren img { flex: 0 0 auto; width: auto; max-width: 100%; }

  .karten { gap: 0.15rem; }
  .karten a { padding: 0.45rem 0.6rem; font-size: 0.92rem; }
}