/* ------------------------------------------------------------------
   Veranstaltungskalender Lindern - Basis-Stile
   Betreiber: Projektunterstuetzungsverein Lindern e.V.
   Eine Datei, keine Praeprozessoren, mobile-first.

   Farbrollen statt Farbsammlung: --farbe-akzent gehoert der primaeren
   Aktion (Hauptknopf, Link, aktiver Reiter). Es fuellt keine grossen
   Flaechen - die Seltenheit gibt dem Vereinsrot seine Kraft.
   Weil Marke und Fehler beide rot sind, traegt kein Zustand seine
   Bedeutung allein ueber den Farbton (immer zusaetzlich Text/Kante).
   ------------------------------------------------------------------ */

/* --- Schrift: Lato, lokal ausgeliefert (CSP: font-src 'self') ------ */

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/lato-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/lato-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
                 U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/lato-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/lato-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
                 U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Metrisch angeglichener Rueckfall: daempft den Sprung, solange Lato
   noch laedt (font-display: swap). */
@font-face {
  font-family: 'Lato Fallback';
  src: local('Segoe UI'), local('Helvetica Neue'), local('Arial');
  size-adjust: 97%;
  ascent-override: 101%;
  descent-override: 22%;
  line-gap-override: 0%;
}

:root {
  /* Farben - Corporate Identity Projektunterstuetzungsverein Lindern e.V. */
  --farbe-text:          #2b2b2d;
  --farbe-text-leise:    #666666;
  --farbe-hintergrund:   #f5f5f5;
  --farbe-flaeche:       #ffffff;
  --farbe-flaeche-leise: #fafafa;   /* Tabellenkopf, Tage aus Nachbarmonaten */
  --farbe-flaeche-hover: #f0f0f1;
  --farbe-rand:          #e0e0e0;
  --farbe-rand-stark:    #c7c7c9;
  --farbe-akzent:        #a9233e;   /* PUV-Primaer - gehoert der Aktion */
  --farbe-akzent-hell:   #fbeef1;
  --farbe-akzent-dunkel: #8a1c32;
  --farbe-sekundaer:     #414042;   /* PUV-Sekundaer - Fusszeile */
  --farbe-sekundaer-text:#d5d5d6;
  --farbe-warnung:       #8a4b0b;
  --farbe-fehler:        #9b1c1c;
  --farbe-fehler-hell:   #fdecec;
  --farbe-fehler-rand:   #e3b7b7;
  --farbe-erfolg:        #1d6b46;   /* bewusst eigenstaendig - frueher = Akzent */
  --farbe-erfolg-hell:   #eaf4ee;
  --farbe-erfolg-rand:   #b7d3c5;
  --farbe-heute:         #fdf3e3;
  --farbe-heute-rand:    #e6c98a;

  /* Abstaende */
  --abstand-xs: 0.25rem;
  --abstand-s:  0.5rem;
  --abstand-m:  1rem;
  --abstand-l:  1.5rem;
  --abstand-xl: 2.5rem;

  /* Form */
  --radius:       12px;
  --radius-s:     8px;
  --radius-gross: 16px;
  --radius-pille: 999px;
  --schatten:       0 1px 2px rgba(20,20,22,.04), 0 8px 24px rgba(20,20,22,.06);
  --schatten-hover: 0 4px 12px rgba(20,20,22,.08), 0 16px 40px rgba(20,20,22,.10);
  --uebergang:      .18s ease;

  --breite-max: 1180px;
  --schrift: 'Lato', 'Lato Fallback', system-ui, -apple-system, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
}

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

/* Muss nach den Klassen greifen: .knopf und .meldung setzen display und
   wuerden die Voreinstellung des Browsers sonst ueberstimmen. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 16px;
  line-height: 1.55;
  color: var(--farbe-text);
  background: var(--farbe-hintergrund);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Rollenskala: Ueberschriften tragen ueber Groesse UND Gewicht, damit
   benachbarte Rollen auf einen Blick unterscheidbar bleiben. */
h1, h2, h3 { line-height: 1.25; margin: 0 0 var(--abstand-m); font-weight: 700; }
h1 { font-size: 1.55rem; letter-spacing: -.01em; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.05rem; letter-spacing: .01em; }
p  { margin: 0 0 var(--abstand-m); }

/* Zusammengehoeriges eng, Abschnitte grosszuegig trennen. */
p + h3, ul + h3, dl + h3 { margin-top: var(--abstand-l); }

a { color: var(--farbe-akzent); }
a:hover { color: var(--farbe-akzent-dunkel); }

/* Sichtbarer Fokus - nie wegoptimieren (Barrierefreiheit) */
:focus-visible {
  outline: 3px solid var(--farbe-akzent);
  outline-offset: 2px;
  border-radius: var(--radius-s);
}
/* Auf rotem Grund braucht der Ring einen hellen Innenrand, sonst
   verschwindet er im Knopf. */
.knopf--haupt:focus-visible {
  outline-offset: 3px;
  box-shadow: inset 0 0 0 2px #ffffff;
}

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

/* --- Grundgeruest ------------------------------------------------- */

.inhalt {
  width: 100%;
  max-width: var(--breite-max);
  margin: 0 auto;
  padding: 0 var(--abstand-m);
}

.seiten-kopf {
  background: var(--farbe-flaeche);
  border-bottom: 1px solid var(--farbe-rand);
}

.seiten-kopf .inhalt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-m);
  padding-top: var(--abstand-s);
  padding-bottom: var(--abstand-s);
}

.seiten-titel { margin: 0; font-size: 1.15rem; font-weight: 700; }

.seiten-marke {
  display: flex;
  align-items: center;
  gap: var(--abstand-s);
  color: inherit;
  text-decoration: none;
}
.seiten-logo { display: block; width: 42px; height: 42px; flex: none; }
.seiten-ort {
  display: block;
  font-size: .8rem;
  font-weight: 400;
  color: var(--farbe-text-leise);
}

.seiten-navigation {
  margin-left: auto;
  /* Ohne min-width: 0 schrumpft die Navigation nicht unter die Breite ihrer
     Knoepfe - auf schmalen Geraeten stand der letzte dann ausserhalb des
     Bildschirms, statt in die naechste Zeile zu rutschen. */
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--abstand-s);
  align-items: center;
}

main { flex: 1; padding: var(--abstand-l) 0 var(--abstand-xl); }

.seiten-fuss {
  background: var(--farbe-sekundaer);
  color: var(--farbe-sekundaer-text);
  padding: var(--abstand-l) 0;
  font-size: .875rem;
}
.seiten-fuss .inhalt {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-s) var(--abstand-l);
  align-items: center;
}
.seiten-fuss a { color: #ffffff; text-decoration: underline; text-underline-offset: 3px; }
.seiten-fuss a:hover { color: #ffffff; text-decoration-thickness: 2px; }
.seiten-fuss-betreiber { margin-right: auto; }

/* --- Bausteine ---------------------------------------------------- */

.karte {
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten);
  padding: var(--abstand-l);
}

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-xs);
  min-height: 44px;            /* Antippflaeche */
  padding: 0 var(--abstand-m);
  font: inherit;
  font-weight: 700;
  color: var(--farbe-text);
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-rand-stark);
  border-radius: var(--radius-pille);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--uebergang), border-color var(--uebergang),
              box-shadow var(--uebergang), transform var(--uebergang), color var(--uebergang);
}
.knopf:hover {
  background: var(--farbe-flaeche-hover);
  color: var(--farbe-text);
  transform: translateY(-1px);
  box-shadow: var(--schatten);
}
.knopf:active { transform: translateY(0); box-shadow: none; }
.knopf[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

.knopf--haupt {
  color: #ffffff;
  background: var(--farbe-akzent);
  border-color: var(--farbe-akzent);
}
.knopf--haupt:hover {
  background: var(--farbe-akzent-dunkel);
  border-color: var(--farbe-akzent-dunkel);
  color: #ffffff;
  box-shadow: var(--schatten-hover);
}

.knopf--gefahr { color: var(--farbe-fehler); border-color: var(--farbe-fehler-rand); }
.knopf--gefahr:hover { background: var(--farbe-fehler-hell); color: var(--farbe-fehler); }

.knopf--klein { min-height: 34px; font-size: .875rem; padding: 0 var(--abstand-m); }

.meldung {
  display: flex;
  align-items: flex-start;
  gap: var(--abstand-s);
  padding: var(--abstand-s) var(--abstand-m);
  border-radius: var(--radius-s);
  border: 1px solid;
  margin-bottom: var(--abstand-m);
}

/* Das Zeichen ist der zweite, nicht farbige Traeger der Bedeutung: Marke und
   Fehler sind beide rot, der Farbton allein darf nichts entscheiden. */
.meldung::before {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  border-radius: 50%;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--farbe-flaeche);
}
.meldung--fehler::before  { content: "!"; background: var(--farbe-fehler); }
.meldung--erfolg::before  { content: "\2713"; background: var(--farbe-erfolg); }
.meldung--hinweis::before { content: "i"; background: var(--farbe-text-leise); }
.meldung--warnung::before { content: "!"; background: var(--farbe-warnung); }

.meldung--fehler  { color: var(--farbe-fehler); border-color: var(--farbe-fehler-rand); background: var(--farbe-fehler-hell); }
.meldung--erfolg  { color: var(--farbe-erfolg); border-color: var(--farbe-erfolg-rand); background: var(--farbe-erfolg-hell); }
.meldung--hinweis { color: var(--farbe-text-leise); border-color: var(--farbe-rand); background: var(--farbe-flaeche); }
/* Warnung statt Fehler: nichts ist schiefgegangen, aber es hat Folgen -
   etwa Angaben, die oeffentlich sichtbar werden. */
.meldung--warnung { color: var(--farbe-warnung); border-color: var(--farbe-heute-rand); background: var(--farbe-heute); }

.leise { color: var(--farbe-text-leise); font-size: .875rem; }

/* Nur fuer Screenreader */
.nur-vorlesen {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ==================================================================
   Kalender
   ================================================================== */

.kalender-leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-m);
  margin-bottom: var(--abstand-m);
  padding: var(--abstand-s) var(--abstand-m);
  background: var(--farbe-akzent-hell);
  border-radius: var(--radius-pille);
}

.kalender-navigation {
  display: flex;
  align-items: center;
  gap: var(--abstand-s);
}

.kalender-monat {
  margin: 0;
  min-width: 11ch;
  text-align: center;
  font-size: 1.25rem;
}

.knopf--rund {
  width: 44px;
  padding: 0;
  font-size: 1.4rem;
  line-height: 1;
  border-radius: 50%;
}

/* --- Umschalter Monat / Liste --- */

.ansicht-umschalter {
  display: flex;
  gap: var(--abstand-xs);
  padding: 3px;
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-rand-stark);
  border-radius: var(--radius-pille);
}
/* Die gewaehlte Ansicht traegt Flaeche und Fettung - die Farbe allein
   koennte sonst uebersehen werden. */
.ansicht-umschalter .knopf {
  border-color: transparent;
  background: transparent;
  font-weight: 400;
}
.ansicht-umschalter .knopf:hover { background: var(--farbe-flaeche-hover); box-shadow: none; }
.ansicht-umschalter .knopf[aria-pressed="true"] {
  background: var(--farbe-akzent);
  border-color: var(--farbe-akzent);
  color: #ffffff;
  font-weight: 700;
}

/* --- Vereinsfilter mit Mehrfachauswahl --- */

.kalender-filter {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--abstand-s);
  min-width: 0;
}

.vereinsfilter { position: relative; }

.vereinsfilter > summary {
  /* Der Browser-Marker wuerde neben dem eigenen Pfeil doppelt stehen. */
  list-style: none;
  cursor: pointer;
  max-width: 20rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  line-height: 42px;
  min-height: 44px;
}
.vereinsfilter > summary::-webkit-details-marker { display: none; }
.vereinsfilter > summary::after { content: ' ▾'; }
.vereinsfilter[open] > summary::after { content: ' ▴'; }

.vereinsfilter-liste {
  position: absolute;
  z-index: 20;
  top: calc(100% + var(--abstand-xs));
  right: 0;
  width: min(24rem, calc(100vw - 2rem));
  max-height: min(70vh, 30rem);
  /* Suchfeld und Zuruecksetzen stehen fest, nur die Vereine scrollen. */
  display: flex;
  flex-direction: column;
  padding: var(--abstand-m);
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-rand-stark);
  border-radius: var(--radius);
  box-shadow: var(--schatten-hover);
}

.vereinsfilter-kopf { margin: 0 0 var(--abstand-s); font-size: .875rem; }

.vereinsfilter-suche-beschriftung {
  display: block;
  margin-bottom: var(--abstand-xs);
  font-weight: 700;
  font-size: .9rem;
}

.vereinsfilter-suche {
  width: 100%;
  font: inherit;
  min-height: 44px;
  margin-bottom: var(--abstand-s);
  padding: var(--abstand-s) var(--abstand-m);
  color: inherit;
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-rand-stark);
  border-radius: var(--radius);
  transition: border-color var(--uebergang), box-shadow var(--uebergang);
}
.vereinsfilter-suche:hover { border-color: var(--farbe-text-leise); }

.vereinsfilter-zuruecksetzen { align-self: flex-start; margin-bottom: var(--abstand-s); }
.vereinsfilter-leer { margin: 0 0 var(--abstand-s); }

.vereinsfilter-optionen {
  /* Nur dieser Teil scrollt; das Suchfeld darueber darf nicht schrumpfen. */
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 3rem;
}
.vereinsfilter-kopf,
.vereinsfilter-suche-beschriftung,
.vereinsfilter-suche,
.vereinsfilter-zuruecksetzen,
.vereinsfilter-leer { flex: 0 0 auto; }

.vereinsfilter-zeile {
  display: flex;
  align-items: center;
  gap: var(--abstand-s);
  min-height: 44px;         /* Antippflaeche wie bei den Knoepfen */
  border-top: 1px solid var(--farbe-rand);
}
.vereinsfilter-zeile input { width: 20px; height: 20px; flex: 0 0 auto; }
.vereinsfilter-zeile label { flex: 1; cursor: pointer; padding: var(--abstand-s) 0; }

/* --- Monatsraster --- */

.kalender-raster {
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten);
  overflow: hidden;
}

.kalender-wochentage,
.kalender-tage {
  display: grid;
  /* minmax(0, 1fr) statt 1fr: sonst zieht ein langer Termintitel seine
     Spalte breit und das Raster wird ungleichmaessig. */
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.kalender-wochentage {
  background: var(--farbe-flaeche-leise);
  border-bottom: 1px solid var(--farbe-rand);
}
.kalender-wochentage span {
  padding: var(--abstand-s);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--farbe-text-leise);
  text-align: center;
}

.tag {
  min-height: 118px;
  min-width: 0;
  padding: 5px;
  border-right: 1px solid var(--farbe-rand);
  border-bottom: 1px solid var(--farbe-rand);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.tag:nth-child(7n) { border-right: 0; }
.tag:nth-last-child(-n+7) { border-bottom: 0; }

.tag--fremd { background: var(--farbe-flaeche-leise); }
.tag--fremd .tag-kopf { color: var(--farbe-rand-stark); }
.tag--heute { background: var(--farbe-heute); }

.tag-kopf {
  font-size: .8rem;
  font-weight: 700;
  color: var(--farbe-text-leise);
  padding: 2px 5px;
}
/* "Heute" traegt zusaetzlich zur Flaeche eine eigene Form, damit die
   Markierung nicht allein ueber Farbe funktioniert. */
.tag--heute .tag-kopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: var(--radius-pille);
  background: var(--farbe-warnung);
  color: #ffffff;
}

/* --- Ein Termin --- */

.termin {
  --verein-farbe: var(--farbe-akzent);
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: .78rem;
  line-height: 1.3;
  padding: 5px 8px;
  cursor: pointer;
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-rand);
  /* Bewusste Ausnahme: der Farbstreifen ordnet den Termin im dichten Raster
     seinem Verein zu (Kalender-Konvention). Der Vereinsname steht daneben,
     die Farbe traegt also nichts allein. */
  border-left: 3px solid var(--verein-farbe);
  border-radius: var(--radius-s);
  transition: background var(--uebergang), box-shadow var(--uebergang), transform var(--uebergang);
}
.termin:hover {
  background: var(--farbe-flaeche-hover);
  transform: translateY(-1px);
  box-shadow: var(--schatten);
}

.termin-zeit {
  display: block;
  font-weight: 700;
  color: var(--verein-farbe);
}
.termin-titel {
  display: block;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.termin-verein {
  display: block;
  color: var(--farbe-text-leise);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tag-mehr {
  font: inherit;
  font-size: .75rem;
  color: var(--farbe-text-leise);
  background: none;
  border: 0;
  padding: 2px 6px;
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  border-radius: var(--radius-s);
}
.tag-mehr:hover { color: var(--farbe-text); }

/* --- Listen (schmale Bildschirme und Terminliste) --- */

.kalender-liste { display: flex; flex-direction: column; gap: var(--abstand-m); }

/* Monatstrenner der Terminliste - ordnet die Tagesbloecke ein. */
.listen-monat {
  margin: var(--abstand-m) 0 0;
  padding-bottom: var(--abstand-xs);
  border-bottom: 2px solid var(--farbe-akzent);
  font-size: 1.1rem;
}
.listen-monat:first-child { margin-top: 0; }

.listen-tag {
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten);
  padding: var(--abstand-m);
  display: flex;
  flex-direction: column;
  gap: var(--abstand-s);
}
.listen-tag--heute { border-color: var(--farbe-heute-rand); background: var(--farbe-heute); }
.listen-tag h3 { margin: 0; font-size: .95rem; color: var(--farbe-text-leise); }

.kalender-liste .termin { font-size: .95rem; padding: var(--abstand-s) var(--abstand-m); }
.kalender-liste .termin-titel { white-space: normal; }
.kalender-liste .termin-verein { white-space: normal; }

/* ==================================================================
   Detailansicht
   ================================================================== */

.detail {
  width: min(640px, calc(100vw - 2rem));
  max-height: calc(100vh - 3rem);
  padding: 0;
  border: 0;
  border-radius: var(--radius-gross);
  background: var(--farbe-flaeche);
  color: var(--farbe-text);
  box-shadow: var(--schatten-hover);
  overflow: visible;
}
.detail::backdrop { background: rgba(20, 20, 22, .55); }

.detail-inhalt {
  padding: var(--abstand-l);
  overflow-y: auto;
  max-height: calc(100vh - 3rem);
  border-radius: var(--radius-gross);
}

.detail-schliessen {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--farbe-text-leise);
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-rand);
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--uebergang), color var(--uebergang);
}
.detail-schliessen:hover { background: var(--farbe-flaeche-hover); color: var(--farbe-text); }

.detail-bild {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: var(--abstand-m);
  background: var(--farbe-flaeche-leise);
}

.detail-verein {
  margin: 0 0 var(--abstand-xs);
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--farbe-akzent);
}
.detail-titel { margin: 0 0 var(--abstand-xs); padding-right: 2.5rem; font-size: 1.4rem; }
.detail-zeit { margin: 0 0 var(--abstand-m); color: var(--farbe-text-leise); }

.detail-beschreibung { margin-bottom: var(--abstand-m); max-width: 62ch; }
.detail-beschreibung p:last-child { margin-bottom: 0; }

.detail-angaben {
  margin: 0 0 var(--abstand-l);
  border-top: 1px solid var(--farbe-rand);
}
.detail-angabe {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: var(--abstand-s);
  padding: var(--abstand-s) 0;
  border-bottom: 1px solid var(--farbe-rand);
}
.detail-angabe dt { color: var(--farbe-text-leise); font-size: .9rem; }
.detail-angabe dd { margin: 0; overflow-wrap: anywhere; }

.detail-knoepfe { display: flex; flex-wrap: wrap; gap: var(--abstand-s); }

/* ==================================================================
   Abo / QR-Code
   ================================================================== */

.abo {
  margin-top: var(--abstand-xl);
  padding: var(--abstand-l);
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten);
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-l);
  align-items: flex-start;
}
.abo-text { flex: 1 1 22rem; }
.abo-text h2 { margin-bottom: var(--abstand-s); }
.abo-text p { margin-bottom: var(--abstand-s); max-width: 62ch; }
.abo-knoepfe { display: flex; flex-wrap: wrap; gap: var(--abstand-s); margin-top: var(--abstand-m); }

.abo-qr { margin: 0; text-align: center; flex: 0 0 auto; }
.abo-qr svg { width: 148px; height: 148px; display: block; }
.abo-qr figcaption { margin-top: var(--abstand-xs); }

/* ==================================================================
   Umschaltpunkt Raster <-> Liste
   ================================================================== */

@media (max-width: 699px) {
  /* Die Kopfzeile traegt jetzt mehrere Links. Auf schmalen Geraeten bekommt
     die Navigation eine eigene volle Zeile, sonst draengen sich die Knoepfe
     neben dem Titel und der letzte rutscht aus dem Bild. */
  .seiten-navigation { margin-left: 0; width: 100%; justify-content: flex-start; }

  .kalender-leiste { border-radius: var(--radius-gross); }
  .kalender-filter { margin-left: 0; width: 100%; }
  .vereinsfilter { width: 100%; }
  .vereinsfilter > summary { max-width: none; text-align: center; }
  .vereinsfilter-liste { left: 0; right: 0; width: auto; }
  .ansicht-umschalter { width: 100%; }
  .ansicht-umschalter .knopf { flex: 1; }
  .kalender-navigation { width: 100%; }
  .kalender-monat { flex: 1; }
  .abo { flex-direction: column; align-items: center; text-align: center; }
  .abo-knoepfe { justify-content: center; }
  .detail-angabe { grid-template-columns: 1fr; gap: 0; }
  .detail-inhalt { padding: var(--abstand-m); }
  .seiten-fuss-betreiber { margin-right: 0; flex: 1 0 100%; }
}

/* ==================================================================
   Formulare
   ================================================================== */

.inhalt--schmal { max-width: 560px; }
.inhalt--mittel { max-width: 860px; }

/* Fliesstext bleibt im gut lesbaren Bereich, auch wenn die Karte breiter ist. */
.inhalt--mittel .karte p,
.inhalt--mittel .karte li { max-width: 68ch; }

.feld { margin-bottom: var(--abstand-m); }
.feld label {
  display: block;
  margin-bottom: var(--abstand-xs);
  font-weight: 700;
  font-size: .9rem;
}

.feld input[type="text"],
.feld input[type="email"],
.feld input[type="password"],
.feld input[type="date"],
.feld input[type="time"],
.feld input[type="url"],
.feld input[type="number"],
.feld input[type="tel"],
.feld select,
.feld textarea {
  width: 100%;
  font: inherit;
  min-height: 44px;
  padding: var(--abstand-s) var(--abstand-m);
  color: inherit;
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-rand-stark);
  border-radius: var(--radius);
  transition: border-color var(--uebergang), box-shadow var(--uebergang);
}
.feld input:hover, .feld select:hover, .feld textarea:hover { border-color: var(--farbe-text-leise); }
.feld textarea { min-height: 8rem; resize: vertical; line-height: 1.5; }
.feld select[multiple] { min-height: 12rem; }

.feld-hinweis {
  display: block;
  margin-top: var(--abstand-xs);
  font-size: .82rem;
  color: var(--farbe-text-leise);
}
.feld-hinweis--warnung { color: var(--farbe-warnung); }

.feld-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-m);
}
.feld-reihe > .feld { flex: 1 1 12rem; margin-bottom: var(--abstand-m); }

.feld-kontrollkaestchen {
  display: flex;
  align-items: center;
  gap: var(--abstand-s);
  margin-bottom: var(--abstand-m);
}
.feld-kontrollkaestchen input { width: 20px; height: 20px; accent-color: var(--farbe-akzent); }
.feld-kontrollkaestchen label { margin: 0; font-weight: 400; }

fieldset.feld-gruppe {
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
  padding: var(--abstand-m);
  margin: 0 0 var(--abstand-m);
}
fieldset.feld-gruppe legend { font-weight: 700; font-size: .9rem; padding: 0 var(--abstand-xs); }

.formular-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-s);
  margin-top: var(--abstand-l);
  padding-top: var(--abstand-m);
  border-top: 1px solid var(--farbe-rand);
}
.formular-knoepfe .abstand { margin-left: auto; }

/* Bildvorschau */
.bild-vorschau {
  display: block;
  max-width: 100%;
  max-height: 200px;
  margin-top: var(--abstand-s);
  border-radius: var(--radius);
  border: 1px solid var(--farbe-rand);
}

/* ==================================================================
   Verwaltungslisten
   ================================================================== */

.bereichs-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-m);
  margin-bottom: var(--abstand-m);
}
.bereichs-kopf h2 { margin: 0; }
.bereichs-kopf .abstand { margin-left: auto; }

/* Auswahllisten in Bereichskoepfen folgen derselben Form wie im Formular. */
.bereichs-kopf select {
  font: inherit;
  min-width: 0;
  max-width: 22rem;
  min-height: 40px;
  padding: 0 var(--abstand-m);
  color: inherit;
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-rand-stark);
  border-radius: var(--radius-pille);
}

/* Lange, ununterbrochene Adressen duerfen die Aktionsspalte nicht aus dem
   Bild schieben - sie brechen um statt die Tabelle breit zu ziehen. */
.quelle-adresse {
  display: block;
  max-width: 36ch;
  overflow-wrap: anywhere;
}

.tabelle-huelle {
  overflow-x: auto;
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius-gross);
  background: var(--farbe-flaeche);
  box-shadow: var(--schatten);
}

table.liste {
  width: 100%;
  border-collapse: collapse;
  background: var(--farbe-flaeche);
}
table.liste th,
table.liste td {
  text-align: left;
  padding: var(--abstand-s) var(--abstand-m);
  border-bottom: 1px solid var(--farbe-rand);
  vertical-align: top;
}
table.liste th {
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--farbe-text-leise);
  background: var(--farbe-flaeche-leise);
  white-space: nowrap;
}
table.liste tr:last-child td { border-bottom: 0; }
table.liste td.aktionen { white-space: nowrap; text-align: right; }
table.liste td.aktionen .knopf { margin-left: var(--abstand-xs); }

.merkmal {
  display: inline-block;
  padding: 2px 10px;
  font-size: .78rem;
  font-weight: 700;
  border-radius: var(--radius-pille);
  background: var(--farbe-akzent-hell);
  color: var(--farbe-akzent-dunkel);
}
.merkmal--ruhend { background: var(--farbe-flaeche-hover); color: var(--farbe-text-leise); }
.merkmal--extern { background: #eef1f6; color: #3c4a60; }
.merkmal--fehler { background: var(--farbe-fehler-hell); color: var(--farbe-fehler); }
.merkmal--erfolg { background: var(--farbe-erfolg-hell); color: var(--farbe-erfolg); }

/* Reiter im Administrationsbereich */
.reiter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-xs);
  margin-bottom: var(--abstand-l);
  padding: var(--abstand-xs);
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius-pille);
}
.reiter button {
  font: inherit;
  font-weight: 700;
  min-height: 40px;
  padding: 0 var(--abstand-m);
  background: none;
  border: 0;
  border-radius: var(--radius-pille);
  color: var(--farbe-text-leise);
  cursor: pointer;
  transition: background var(--uebergang), color var(--uebergang);
}
.reiter button:hover { background: var(--farbe-flaeche-hover); color: var(--farbe-text); }
.reiter button[aria-selected="true"] {
  color: #ffffff;
  background: var(--farbe-akzent);
}

@media (max-width: 699px) {
  table.liste th, table.liste td { padding: var(--abstand-s); }
  table.liste td.aktionen { text-align: left; white-space: normal; }
  table.liste td.aktionen .knopf { margin: var(--abstand-xs) var(--abstand-xs) 0 0; }
  .reiter { border-radius: var(--radius-gross); }
}

/* ==================================================================
   Einbetten: Konfigurator (/einbetten) und Rahmenansicht (/einbindung)
   ================================================================== */

.einbetten-raster {
  display: grid;
  grid-template-columns: minmax(16rem, 22rem) 1fr;
  gap: var(--abstand-l);
  align-items: start;
}

.einbetten-vorschau {
  width: 100%;
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius-gross);
  background: var(--farbe-flaeche);
  box-shadow: var(--schatten);
}

.einbetten-code {
  width: 100%;
  min-height: 7rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .82rem;
  line-height: 1.5;
  padding: var(--abstand-m);
  color: inherit;
  background: var(--farbe-flaeche-leise);
  border: 1px solid var(--farbe-rand-stark);
  border-radius: var(--radius);
  resize: vertical;
}

@media (max-width: 899px) {
  .einbetten-raster { grid-template-columns: 1fr; }
}

/* Die eingebettete Ansicht selbst: kein Kopf, kein Fuss, kein Rand. */
body.einbindung {
  background: var(--farbe-flaeche);
  min-height: 0;
}
body.einbindung main { padding: var(--abstand-m) 0; }
body.einbindung .inhalt { padding: 0 var(--abstand-s); }

.einbindung-fuss {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--abstand-m);
  font-size: .8rem;
}

/* ==================================================================
   Anleitungen und haeufige Fragen
   ================================================================== */

/* Sprungliste am Kopf der Hilfeseite. */
.sprungliste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-s);
}
.sprungliste a {
  display: inline-block;
  padding: var(--abstand-xs) var(--abstand-m);
  background: var(--farbe-akzent-hell);
  border-radius: var(--radius-pille);
  text-decoration: none;
  font-weight: 700;
}
.sprungliste a:hover { text-decoration: underline; }

/* Schritt-fuer-Schritt-Listen: grosse Ziffern, viel Luft zwischen den
   Schritten - die Anleitungen richten sich auch an Ungeuebte. */
.schritte {
  margin: 0 0 var(--abstand-m);
  padding-left: 1.6em;
  max-width: 68ch;
}
.schritte > li { margin-bottom: var(--abstand-s); padding-left: var(--abstand-xs); }
.schritte > li::marker { font-weight: 700; color: var(--farbe-akzent); }
.schritte ul { margin: var(--abstand-xs) 0; }

/* Ein Geraeteblock innerhalb einer Anleitung (iPhone, Android, ...).
   Getrennt wird wie sonst auch im Blatt: Haarlinie zwischen Geschwistern,
   nicht mit einer Kante an der Seite. */
.anleitung-block { margin-bottom: var(--abstand-l); }
.anleitung-block + .anleitung-block {
  padding-top: var(--abstand-l);
  border-top: 1px solid var(--farbe-rand);
}
.anleitung-block:last-child { margin-bottom: 0; }
.anleitung-block > h4 { margin: 0 0 var(--abstand-s); font-size: 1rem; }

/* Aufklappbare Fragen. */
.frage {
  border-top: 1px solid var(--farbe-rand);
  padding: var(--abstand-xs) 0;
}
.frage:last-child { border-bottom: 1px solid var(--farbe-rand); }

.frage > summary {
  list-style: none;
  cursor: pointer;
  font-weight: 700;
  padding: var(--abstand-s) 2rem var(--abstand-s) 0;
  position: relative;
  border-radius: var(--radius-s);
}
.frage > summary::-webkit-details-marker { display: none; }
.frage > summary::after {
  content: '+';
  position: absolute;
  right: var(--abstand-s);
  font-size: 1.3rem;
  line-height: 1;
  color: var(--farbe-akzent);
}
.frage[open] > summary::after { content: '–'; }
.frage > summary:hover { color: var(--farbe-akzent); }
.frage > p, .frage > ul, .frage > ol { max-width: 68ch; }
.frage > :last-child { margin-bottom: var(--abstand-m); }

/* Abstands-Hilfsklassen - ersetzen Inline-Styles, die die CSP verbietet. */
.abstand-oben-s  { margin-top: var(--abstand-s); }
.abstand-oben-l  { margin-top: var(--abstand-l); }
.abstand-unten-m { margin-bottom: var(--abstand-m); }
.abstand-unten-xl { margin-bottom: var(--abstand-xl); }