/* ===================================================================
   DEMOKRATIEfest Brettorf — Aufsatz auf Quark 2
   Farben und Schrift aus der Folienvorlage Variante B (Editorial).
   =================================================================== */

/* ---------- Schriften, lokal (kein CDN) ----------
   Source Sans 3 als variable Schrift: eine Datei fuer alle Staerken von
   200 bis 900. Ersetzt fuenf Einzelschnitte und ist zusammen kleiner als
   zwei davon. Dieselbe Schrift, mit der die Plakate und Kacheln gesetzt
   sind — Ueberschriften unterscheiden sich ueber das Gewicht, nicht ueber
   eine zweite Familie.
   Bezogen ueber: npm pack @fontsource-variable/source-sans-3
   ---------- */
@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/source-sans-3/source-sans-3-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/source-sans-3/source-sans-3-latin-wght-italic.woff2') format('woff2-variations');
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

/* Nur fuer die hervorgehobene Zeile auf dem Zettel — der Duktus des
   Stempels "Das Original". */
@font-face { font-family:'Comic Neue'; src:url('../fonts/comic-neue/comic-neue-latin-700-normal.woff2') format('woff2');
             font-weight:700; font-style:normal; font-display:swap; }

/* ---------- Palette ---------- */
:root {
  --mc-rot:        #F68714;   /* Orange aus Logo und Plakaten */
  --mc-rot-dunkel: #A85504;   /* Links: 5,3:1 auf Weiss */
  --mc-schwarz:    #1C1B1A;
  --mc-grau:       #5A5654;
  --mc-papier:     #FFFFFF;   /* die Plakate sind weiss */
  --mc-beige:      #DDDAD6;
  --mc-beige-hell: #F7F6F4;
  --mc-weiss:      #FFFFFF;

  /* ---- Stellschrauben Startseiten-Logo ----
     Angaben relativ zur Bannerhöhe. Zwei getrennte Sätze, damit sich beide
     unabhängig im Inspektor drehen lassen — eine zweite :root-Regel in einer
     Medienabfrage würde die erste überstimmen und das Ändern blockieren. */
  --logo-groesse:  48%;    /* Durchmesser, bezogen auf die Bannerhöhe */
  --logo-drehung:  10deg;  /* im Uhrzeigersinn */
  --logo-links:    86%;    /* Abstand vom linken Bannerrand */
  --logo-unten:    66%;    /* Abstand vom unteren Bannerrand */

  /* Schmale Schirme (unter 700 px) */
  --logo-groesse-handy: 56%;
  --logo-links-handy:   84%;
  --logo-unten-handy:   52%;

  --q2-accent:          var(--mc-rot);
  --q2-accent-contrast: var(--mc-schwarz);  /* Weiss auf Orange waere 2,5:1 */
  --q2-link:            var(--mc-rot-dunkel);
  --q2-focus-ring:      color-mix(in oklab, var(--mc-rot) 45%, transparent);

  --mc-rand: 1px solid var(--mc-beige);
}

:root[data-theme='dark'] {
  --mc-papier: #1E1B1C;
  --mc-beige:  #3A3435;
  --mc-beige-hell: #2A2526;
  --mc-schwarz: #EDE7DC;
  --mc-grau:   #B3A99F;
  --q2-accent: color-mix(in oklab, var(--mc-rot) 78%, white 22%);
  --q2-link:   color-mix(in oklab, var(--mc-rot) 60%, white 40%);
}

body {
  font-family:'Source Sans 3', system-ui, -apple-system, sans-serif;
  background: var(--mc-papier);
  color: var(--mc-schwarz);
}

h1, h2, h3, h4, h5, h6 {
  font-family:'Source Sans 3', system-ui, sans-serif;
  font-weight:900; letter-spacing:-.015em; line-height:1.06;

  /* Keine Silbentrennung in Überschriften. Nur wenn ein einzelnes Wort
     breiter ist als die Spalte, bricht der Browser es notgedrungen um —
     dann ohne Trennstrich. */
  hyphens:none; -webkit-hyphens:none; -ms-hyphens:none;
  overflow-wrap:break-word;

  /* Verteilt mehrzeilige Überschriften gleichmäßig, statt ein einzelnes
     Wort auf der letzten Zeile stehen zu lassen. */
  text-wrap:balance;
}

a { color: var(--q2-link); }

.container--eng { max-width: 70ch; margin-inline:auto; }

/* Sichtbarer Fokus — Tastaturbedienung */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--mc-rot);
  outline-offset: 2px;
}

.nur-screenreader {
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

/* ===================================================================
   Startseite
   =================================================================== */

.start-kopf { text-align:center; padding:2.5rem 0 1rem; }

@media (max-width:700px) {
  .start-kopf { padding:.5rem 0 .5rem; }
}

/* ---------- Banner mit überlappendem Logo ---------- */
.start-banner {
  position:relative;
  max-width:1000px;
  margin-inline:auto;
}

.start-kopf .start-banner__bild { width:100%; height:auto; display:block; }

.start-kopf .start-banner__logo {
  position:absolute;
  left:var(--logo-links);
  bottom:var(--logo-unten);
  height:var(--logo-groesse);
  width:auto; max-width:none;
  aspect-ratio:1 / 1;
  margin:0;
  transform:rotate(var(--logo-drehung));
  transform-origin:center;
  filter:drop-shadow(0 4px 14px rgb(43 39 40 / .3));
  pointer-events:none;
}

/* Schmale Schirme: greift auf die eigenen Handy-Variablen zu, überschreibt
   also keine der :root-Werte und blockiert damit nichts. */
@media (max-width:700px) {
  .start-kopf .start-banner__logo {
    height: var(--logo-groesse-handy);
    left:   var(--logo-links-handy);
    bottom: var(--logo-unten-handy);
  }
}

.start-kopf p.start-kopf__claim {
  position:relative;
  max-width:640px; margin:4.8rem auto 1.5rem;   /* Luft zum Banner */
  padding:2.5rem clamp(1.5rem, 4vw, 2.7rem) 2.2rem;

  /* Papierstruktur aus dem DEMOKRATIEfest Brettorf-Bildmaterial, auf helles Papier gezogen */
  background:#F8F1E4 url('../images/papier-hell.jpg') center / cover;

  transform:rotate(-1.4deg);
  border:1px solid rgb(120 96 60 / .18);
  box-shadow:
    0 1px 1px rgb(43 39 40 / .10),
    0 8px 18px rgb(43 39 40 / .16),
    0 22px 40px rgb(43 39 40 / .10),
    inset 0 0 22px rgb(120 96 60 / .12);

  font-size:clamp(1.1rem, 2.3vw, 1.32rem);
  font-weight:600;
  line-height:1.5;
  color:var(--mc-schwarz);
  hyphens:none; -webkit-hyphens:none;
  text-wrap:pretty;
}

/* Durchscheinende Klebestreifen über zwei Ecken */
.start-kopf p.start-kopf__claim::before,
.start-kopf p.start-kopf__claim::after {
  content:''; position:absolute; width:118px; height:32px;
  background:rgba(222,205,170,.72);
  box-shadow:0 1px 3px rgb(43 39 40 / .18);
  border-left:1px dashed rgba(255,255,255,.5);
  border-right:1px dashed rgba(255,255,255,.5);
}
.start-kopf p.start-kopf__claim::before { top:-15px; left:-26px; transform:rotate(-27deg); }
.start-kopf p.start-kopf__claim::after  { bottom:-15px; right:-26px; transform:rotate(-27deg); }

/* Letzte Zeile als Bekenntnis */
.start-kopf__bekenntnis {
  display:block;
  font-family:'Comic Neue', 'Source Sans 3', cursive;
  font-weight:400;
  font-size:1.4em;
  line-height:1.28;
  color:var(--mc-rot-dunkel);
  margin-top:1rem;
}

/* Hinweise und aktuelle Nachrichten unter dem Bekenntnis, noch auf dem
   Papier. Kleiner und in Normalschrift — sonst laese es sich wie eine
   vierte Bekenntniszeile, die jemand rot zu faerben vergessen hat.
   Die Trennlinie nimmt die Papierfarbe des Rahmens auf. */
.start-kopf__hinweise {
  display:block;
  margin-top:1.4rem;
  padding-top:1rem;
  border-top:1px solid rgb(120 96 60 / .22);
  font-size:.82em;
  font-weight:400;
  line-height:1.45;
  color:#1C1B1A;
}
.start-kopf__hinweis { display:block; }
.start-kopf__hinweis + .start-kopf__hinweis { margin-top:.55rem; }

/* Vier Stufen. Staerke und Groesse sind getrennte Werkzeuge: hervorgehoben
   aendert nur die Staerke, gross nur die Groesse, alarm beides in Rot.

   Feste Farbwerte statt Variablen — der Zettel ist in jedem Fall helles
   Papier, waehrend --mc-schwarz im dunklen Satz zu hell umschlagen wuerde.

   Orange (--mc-rot) scheidet aus: auf dem Papier rund 2,5:1. Das
   Dunkelrot der Bekenntniszeile liegt bei rund 5:1, das Alarmrot #8F1D15
   bei rund 8:1.

   1.28em bezieht sich auf die .82em des Hinweisblocks, ergibt also rund
   1.05em des Zettels — knapp unter der Groesse des Haupttextes. */
.start-kopf__hinweis--normal        { color:#1C1B1A; }
.start-kopf__hinweis--hervorgehoben { color:#1C1B1A; font-weight:700; }
.start-kopf__hinweis--gross         { color:#1C1B1A; font-size:1.28em; line-height:1.35; }
.start-kopf__hinweis--alarm         { color:#8F1D15; font-size:1.65em; font-weight:700; line-height:1.25; }

/* Die beiden grossen Stufen brauchen etwas mehr Luft nach oben, sonst
   kleben sie am vorigen Hinweis. */
.start-kopf__hinweis--gross,
.start-kopf__hinweis--alarm { margin-top:.75rem; }

/* Breite Schirme: die im Frontmatter vorgegebene Zeilenaufteilung gilt. */
.start-kopf__zeile { display:block; }

/* Schmale Schirme: linksbündig, freier Umbruch — sonst entstehen
   Zeilen, die aus dem Bild laufen. */
@media (max-width:700px) {
  .start-kopf p.start-kopf__claim {
    text-align:left;
    max-width:none;
    margin:2.6rem .4rem 1.2rem;
    padding:1.8rem 1.4rem 1.6rem;
    font-size:1.06rem;
    transform:rotate(-1deg);
  }
  .start-kopf p.start-kopf__claim::before { left:-14px; width:96px; }
  .start-kopf p.start-kopf__claim::after  { right:-14px; width:96px; }
  .start-kopf__zeile { display:inline; }
  .start-kopf__bekenntnis { margin-top:.8rem; font-size:1.3em; }
  .start-kopf__hinweise { margin-top:1rem; padding-top:.8rem; font-size:.85em; }

  .seiten-kopf__innen { gap:1rem; }
}

/* ---------- Zweizeilige Navigation ----------
   Quark 2 formatiert die Liste über `.dropmenu ul`. Dieser Selektor ist
   spezifischer als eine einzelne Klasse — deshalb hier durchgehend mit
   zwei Klassen bzw. Klasse + Element arbeiten, sonst gewinnt Quark 2. */

.dropmenu .mc-nav,
nav.mc-nav {
  display:flex; flex-direction:column;
  gap:.1rem; align-items:flex-end; width:100%;
}

.mc-nav ul.mc-nav__zeile {
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:row; flex-wrap:wrap;
  gap:.1rem .3rem; justify-content:flex-end; align-items:baseline;
}

.mc-nav ul.mc-nav__zeile li {
  display:inline-block; margin:0; padding:0; float:none;
}

.mc-nav ul.mc-nav__zeile li a {
  display:block; text-decoration:none; color:var(--mc-schwarz);
  border-bottom:2px solid transparent; white-space:nowrap;
}
.mc-nav ul.mc-nav__zeile li a:hover { color:var(--mc-rot); }
.mc-nav ul.mc-nav__zeile li a.aktiv { color:var(--mc-rot); border-bottom-color:var(--mc-rot); }

.mc-nav ul.mc-nav__zeile--haupt li a {
  font-size:1rem; font-weight:600; padding:.3rem .55rem;
}

.mc-nav ul.mc-nav__zeile--klein li a {
  font-size:.76rem; font-weight:400; padding:.05rem .55rem;
  color:var(--mc-grau); letter-spacing:.02em;
}
.mc-nav ul.mc-nav__zeile--klein li a:hover,
.mc-nav ul.mc-nav__zeile--klein li a.aktiv { color:var(--mc-rot); }

@media (max-width:720px) {
  .dropmenu .mc-nav, nav.mc-nav { align-items:center; }
  .mc-nav ul.mc-nav__zeile { justify-content:center; }
}

/* ---------- Vier Rubrikkacheln ---------- */
.rubriken {
  display:grid; gap:1.1rem; margin:2.5rem 0 3.5rem;
  grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
}

/* Acht Kacheln, gedacht als zwei Reihen zu vier. Unterhalb von 1150 px
   wird daraus 2 x 4 hochkant, unter 560 px eine Spalte — vier Kacheln
   nebeneinander waeren dort je 80 px breit und die Beschriftung unlesbar. */
@media (max-width:700px)  { .rubriken { margin:1.5rem 0 2.5rem; gap:.8rem; } }
@media (min-width:560px)  { .rubriken { grid-template-columns:repeat(2, 1fr); } }
@media (min-width:1150px) { .rubriken { grid-template-columns:repeat(4, 1fr); } }

.rubrik {
  position:relative; display:flex; flex-direction:column; justify-content:flex-end;
  aspect-ratio:1 / 1; text-decoration:none;
  background:var(--mc-beige-hell); border:var(--mc-rand);
  overflow:hidden; transition:transform 180ms ease, box-shadow 180ms ease;
}
/* Nur Platzhalterkacheln brauchen Innenabstand für ihren Text */
.rubrik--ohne-bild { padding:1.25rem; }
.rubrik:hover, .rubrik:focus-visible {
  transform:translateY(-3px); box-shadow:0 10px 26px rgb(43 39 40 / .18);
}

.rubrik__bild {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0;
}
.rubrik__schleier {
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgb(43 39 40 / .12) 0%, rgb(43 39 40 / .78) 100%);
}
.rubrik__text { position:relative; z-index:2; color:#fff; }
.rubrik__titel { margin:0; font-size:1.35rem; line-height:1.2; }
.rubrik__unter { margin:.3rem 0 0; font-size:.92rem; opacity:.9; }

/* Platzhalter, solange keine Kachelbilder da sind: helle Fläche, dunkle Schrift */
.rubrik--ohne-bild {
  background:var(--mc-beige-hell);
  justify-content:center; text-align:center;
}
.rubrik--ohne-bild .rubrik__text { color:var(--mc-schwarz); }
.rubrik--ohne-bild .rubrik__titel { color:var(--mc-rot-dunkel); }
.rubrik--ohne-bild .rubrik__unter { color:var(--mc-grau); opacity:1; }
.rubrik--ohne-bild:hover { background:var(--mc-weiss); }

/* Eckwinkel nur bei Platzhalterkacheln — die gestalteten Kacheln
   bringen ihren eigenen roten Rahmen bereits mit. */
.rubrik--ohne-bild::before, .rubrik--ohne-bild::after {
  content:''; position:absolute; z-index:2; width:18px; height:18px;
  border-color:var(--mc-rot); border-style:solid; border-width:0;
}
.rubrik--ohne-bild::before { top:10px; left:10px;  border-top-width:4px; border-left-width:4px; }
.rubrik--ohne-bild::after  { bottom:10px; right:10px; border-bottom-width:4px; border-right-width:4px; }

/* ===================================================================
   Seitenkopf allgemein
   =================================================================== */

.seiten-kopf {
  background:var(--mc-rot); color:#fff;
  padding:1.9rem 0; margin-bottom:2.5rem;
}

.seiten-kopf__innen {
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  /* Ohne Untertitel — Impressum, Datenschutz — war der Balken so niedrig,
     dass das Logo unten heraushing. Eine Mindesthoehe haelt ihn stabil. */
  min-height:5.4rem;
}

.seiten-kopf__text { min-width:0; }

.seiten-kopf h1 { margin:0; color:#fff; font-size:clamp(1.7rem, 4vw, 2.4rem); }

/* Farbe muss ausdrücklich gesetzt werden — sonst greift die dunkle
   Textfarbe von Quark 2 und der Kontrast auf Rot reicht nicht. */
.seiten-kopf p.seiten-kopf__unter {
  margin:.5rem 0 0;
  color:var(--mc-beige-hell);
  font-style:italic;
  font-size:clamp(1.15rem, 1rem + .7vw, 1.5rem);
  font-weight:300;
  line-height:1.25;
  opacity:1;
}

.seiten-kopf__logo {
  flex:0 0 auto; width:clamp(74px, 12vw, 128px); height:auto;
  filter:drop-shadow(0 3px 10px rgb(43 39 40 / .35));
  /* Das Logo sitzt etwas ueber der Mitte des Balkens — es soll aufliegen,
     nicht heraushaengen. Der eine Wert steuert das. */
  transform:translateY(-12%);
  position:relative; z-index:2;
}

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

.kalender {
  background:var(--mc-weiss); border:var(--mc-rand);
  padding:1.25rem; margin-bottom:2.5rem;
}
:root[data-theme='dark'] .kalender { background:var(--mc-beige-hell); }

.kalender__kopf {
  display:flex; align-items:center; justify-content:space-between;
  gap:.6rem; margin-bottom:1rem;
}
.kalender__monat {
  margin:0; font-size:1.15rem; text-align:center;
  flex:1 1 auto; hyphens:none; white-space:nowrap;
}
.kalender__blaettern {
  flex:0 0 auto; display:inline-flex; align-items:center; gap:.3rem;
  white-space:nowrap;
}

/* Schmale Schirme: Monat in eigener Zeile, darunter die beiden Pfeile
   nebeneinander mit Luft dazwischen. */
@media (max-width:620px) {
  .kalender__kopf { flex-wrap:wrap; row-gap:.8rem; }
  .kalender__monat { flex:1 0 100%; order:-1; font-size:1.1rem; }
  .kalender__blaettern { flex:1 1 0; justify-content:center; }
  .kalender__monatsname { display:inline; }
}

.kalender__gitter {
  display:grid; grid-template-columns:repeat(7, 1fr);
  gap:2px; background:var(--mc-beige);
  border:1px solid var(--mc-beige);
}
.kalender__wochentag {
  background:var(--mc-beige-hell); text-align:center;
  padding:.4rem 0; font-size:.75rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; color:var(--mc-grau);
}
.kalender__tag {
  background:var(--mc-weiss); min-height:4.4rem; padding:.3rem;
  font-size:.85rem; position:relative;
}
:root[data-theme='dark'] .kalender__tag { background:var(--mc-papier); }
.kalender__tag--leer { background:var(--mc-beige-hell); }
.kalender__tag--heute { outline:2px solid var(--mc-grau); outline-offset:-2px; }

.kalender__tag--termin { background:var(--mc-rot); }
.kalender__tag--termin a { color:#fff; font-weight:700; text-decoration:none;
  display:block; width:100%; height:100%; }
.kalender__tag--termin:hover { background:var(--mc-rot-dunkel); }

.kalender__punkt {
  display:none; width:6px; height:6px; border-radius:50%;
  background:#fff; margin-top:.2rem;
}

.kalender__zahl { font-weight:700; }

/* Kurztext in der Tageszelle: höchstens zwei Zeilen, dann abgeschnitten.
   Der vollständige Titel steht im title-Attribut des Links. */
.kalender__label {
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; margin-top:.12rem;
  font-size:.68rem; font-weight:400; line-height:1.2;
  overflow-wrap:anywhere; hyphens:none;
}

.kalender__zeit { font-weight:700; margin-right:.25rem; }
.kalender__mehr { opacity:.85; }

/* Schmale Schirme: kein Platz für Text — zurück zum Punkt */
@media (max-width:700px) {
  .termin__bild { width:72px; height:72px; margin-left:0; }
  .kalender__tag { min-height:2.9rem; }
  .kalender__label { display:none; }
  .kalender__punkt { display:block; }
}

/* ===================================================================
   Veranstaltungen
   =================================================================== */

.termin-liste { display:flex; flex-direction:column; gap:1rem; }

.termin {
  display:flex; gap:1.1rem; align-items:flex-start; flex-wrap:wrap;
  background:var(--mc-weiss); border:var(--mc-rand);
  border-left:5px solid var(--mc-rot); padding:1rem 1.15rem;
}
:root[data-theme='dark'] .termin { background:var(--mc-beige-hell); }
.termin--vergangen { border-left-color:var(--mc-grau); opacity:.94; }

.termin__datum {
  flex:0 0 auto; width:66px; text-align:center;
  background:var(--mc-rot); color:#fff; padding:.45rem 0;
}
.termin--vergangen .termin__datum { background:var(--mc-grau); }
.termin__tag   { font-size:1.55rem; font-weight:700; line-height:1; }
.termin__monat { font-size:.72rem; text-transform:uppercase; letter-spacing:.07em; }
.termin__jahr  { font-size:.7rem; opacity:.8; }

/* Vorschaubild am rechten Ende der Karte */
.termin__bild {
  flex:0 0 auto; display:block; width:104px; height:104px;
  margin-left:auto;
  overflow:hidden;
}
.termin__bild img { width:100%; height:100%; object-fit:contain; display:block;
  transition:transform 220ms ease; }
.termin:hover .termin__bild img { transform:scale(1.06); }

.termin__inhalt { flex:1 1 240px; min-width:0; }

/* ---------- Auswahl mehrerer Termine ---------- */
.termin__wahl {
  flex:0 0 auto; display:flex; align-items:center;
  align-self:stretch; padding-right:.2rem; cursor:pointer;
}
.termin__haken { width:20px; height:20px; accent-color:var(--mc-rot); cursor:pointer; }

.wahlleiste {
  display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
  padding:.75rem 1rem; margin-bottom:1rem;
  background:var(--mc-beige-hell); border:var(--mc-rand);
}
:root[data-theme='dark'] .wahlleiste { background:color-mix(in oklab, var(--mc-schwarz) 20%, transparent); }

.wahlleiste__alle { display:flex; align-items:center; gap:.45rem; cursor:pointer; font-size:.92rem; }
.wahlleiste__alle input { width:18px; height:18px; accent-color:var(--mc-rot); cursor:pointer; }

.wahlleiste__zaehler { font-size:.88rem; color:var(--mc-grau); margin-right:auto; }

.wahlleiste .btn:disabled { background:var(--mc-beige); color:var(--mc-grau); cursor:default; }

.termin__titel { margin:0 0 .35rem; font-size:1.15rem; }
.termin__titel a { text-decoration:none; color:inherit; }
.termin__titel a:hover { color:var(--mc-rot); }

.termin__meta {
  display:flex; flex-wrap:wrap; gap:.3rem 1rem;
  font-size:.88rem; color:var(--mc-grau); margin-bottom:.45rem;
}
.termin__meta span { display:inline-flex; align-items:center; gap:.35rem; }

.termin__aktionen { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.6rem; }

/* Zeile aus mehreren Schaltflächen — bricht mit Abstand um */
.knopfzeile {
  display:flex; flex-wrap:wrap; gap:.6rem;
  margin:0 0 2rem;
}

/* ---------- Schaltflächen ---------- */
.btn {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem 1rem; font-size:.9rem; text-decoration:none;
  border:1px solid transparent; cursor:pointer; font-family:inherit;
}
.btn--rot { background:var(--mc-rot); color:var(--mc-schwarz); font-weight:600; }
.btn--rot:hover { background:var(--mc-schwarz); color:#fff; }
.btn--linie { background:transparent; color:var(--mc-schwarz); border-color:var(--mc-beige); }
.btn--linie:hover { background:var(--mc-beige-hell); }
.btn--klein { padding:.35rem .8rem; font-size:.84rem; }

/* ===================================================================
   Galerie
   =================================================================== */

.galerie { columns:3 240px; column-gap:.85rem; margin:1.5rem 0; }
.galerie figure {
  margin:0 0 .85rem; break-inside:avoid;
  border:var(--mc-rand); background:var(--mc-weiss);
}
.galerie img { width:100%; height:auto; display:block; cursor:zoom-in; }
.galerie figcaption {
  font-size:.82rem; color:var(--mc-grau);
  padding:.45rem .6rem; border-top:var(--mc-rand);
}

/* ===================================================================
   Geschichte — Tafelpaare
   =================================================================== */

.tafel-navi {
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; margin-bottom:1.5rem;
  padding-bottom:1rem; border-bottom:2px solid var(--mc-beige);
}
.tafel-punkte { display:flex; gap:.4rem; flex-wrap:wrap; }
.tafel-punkte button {
  width:11px; height:11px; border-radius:50%; padding:0;
  border:0; background:var(--mc-beige); cursor:pointer;
}


.tafelpaar {
  display:grid; gap:1.5rem; background:var(--mc-weiss);
  border:var(--mc-rand); padding:1.5rem;
}
:root[data-theme='dark'] .tafelpaar { background:var(--mc-beige-hell); }

/* Ab Tablet die beiden Originaltafeln nebeneinander, der Text darunter
   über die volle Breite. */
@media (min-width:820px) {
  .tafelpaar {
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:1.75rem 2rem;
  }
  .tafelpaar .tafel-text { grid-column:1 / -1; }
}

.tafelpaar[hidden] { display:none; }

.tafel-bild { position:relative; }
.tafel-bild img {
  width:100%; height:auto; display:block;
  border:var(--mc-rand); cursor:zoom-in;
}
.tafel-bild__lupe {
  position:absolute; right:.6rem; bottom:.6rem;
  display:inline-flex; align-items:center; gap:.35rem;
  background:rgb(43 39 40 / .78); color:#fff;
  font-size:.8rem; padding:.35rem .65rem; pointer-events:none;
}

.tafel-jahr {
  display:inline-block; background:var(--mc-rot); color:#fff;
  font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:.28rem .75rem; font-size:.8rem; margin-bottom:.85rem;
}
.tafel-titel { margin:0 0 .25rem; font-size:1.5rem; line-height:1.25; }
.tafel-unter { margin:0 0 1.1rem; color:var(--mc-rot-dunkel); font-style:italic; font-size:1.05rem; }
:root[data-theme='dark'] .tafel-unter { color:var(--q2-accent); }
.tafel-text p { margin:0 0 .9rem; }

/* ===================================================================
   Lupe / Vollbild
   =================================================================== */

.lupe {
  position:fixed; inset:0; z-index:9999;
  background:rgb(20 18 19 / .96);
  display:none; touch-action:none; overscroll-behavior:contain;
}
.lupe[open], .lupe.auf { display:block; }

.lupe__buehne {
  position:absolute; inset:0; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.lupe__bild {
  max-width:100%; max-height:100%;
  transform-origin:0 0; will-change:transform;
  user-select:none; -webkit-user-drag:none;
}
.lupe__video {
  display:none; max-width:min(96vw, 1100px); max-height:88vh;
  width:auto; height:auto; background:#000;
}
.lupe--video .lupe__buehne { padding:1rem; }

.lupe__zu {
  position:absolute; top:.75rem; right:.75rem; z-index:2;
  background:var(--mc-rot); color:#fff; border:0;
  width:44px; height:44px; font-size:1.5rem; line-height:1; cursor:pointer;
}
.lupe__hinweis {
  position:absolute; bottom:1rem; left:50%; transform:translateX(-50%);
  background:rgb(43 39 40 / .8); color:#fff;
  font-size:.82rem; padding:.4rem .9rem; pointer-events:none;
  transition:opacity 400ms ease;
}
.lupe__hinweis.weg { opacity:0; }

/* ===================================================================
   Soziale Netzwerke — einfache Links, keine Widgets
   =================================================================== */

.sozial { display:flex; gap:.75rem; align-items:center; flex-wrap:wrap; }
.sozial a {
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.45rem .85rem; text-decoration:none;
  border:var(--mc-rand); color:var(--mc-schwarz); font-size:.9rem;
}
.sozial a:hover { background:var(--mc-beige-hell); color:var(--mc-rot); }
.sozial svg { width:18px; height:18px; fill:currentColor; }

/* ===================================================================
   Fußzeile
   =================================================================== */

/* Die Fusszeile haengt bewusst NICHT an --mc-schwarz/--mc-papier.
   Im dunklen Modus tauschen die beiden ihre Werte, der Hintergrund wird aber
   per Sonderregel dunkel gehalten — Ergebnis waren dunkle Schrift auf dunklem
   Grund, 1,01:1. Deshalb hier feste Werte, unabhaengig vom Modus. */
.mc-fuss {
  background:#1C1B1A; color:#F3F1EE;
  margin-top:4rem; padding:2.5rem 0 1.5rem;
}
:root[data-theme='dark'] .mc-fuss { background:#151314; color:#F3F1EE; }
.mc-fuss p { color:#F3F1EE; }                    /* 15,3:1 */
.mc-fuss a { color:#DDDAD6; }                    /* 12,3:1 */
.mc-fuss a:hover { color:#fff; }
.mc-fuss__gitter {
  display:grid; gap:1.75rem;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
}
.mc-fuss h3 {
  font-size:.82rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--mc-rot); margin:0 0 .6rem;
}
.mc-fuss ul { list-style:none; margin:0; padding:0; }
.mc-fuss li { margin-bottom:.35rem; }
.mc-fuss .sozial a { border-color:rgb(243 241 238 / .3); color:#F3F1EE; }
.mc-fuss .sozial a:hover { background:rgb(246 241 230 / .1); color:#fff; }
.mc-fuss__zurueck {
  margin-top:.6rem; padding-top:.6rem;
  border-top:1px solid rgb(246 241 230 / .18);
}
.mc-fuss__zurueck a { font-weight:600; }

.mc-fuss__unten {
  margin-top:2rem; padding-top:1rem; font-size:.84rem;
  border-top:1px solid rgb(243 241 238 / .22);
  color:#B9B4B0;                                 /* 8,4:1 statt opacity */
}

@media print {
  .tafel-navi, .lupe, .mc-fuss, .rubriken { display:none; }
  .tafelpaar[hidden] { display:grid; }
}

/* ===================================================================
   Schlanker Seitenkopf für Kontakt, Impressum, Datenschutz
   =================================================================== */

.seiten-kopf--schlank {
  padding:.85rem 0;
  margin-bottom:2.6rem;
}

.seiten-kopf--schlank h1 {
  font-size:clamp(1.3rem, 3vw, 1.75rem);
}

.seiten-kopf--schlank .seiten-kopf__innen {
  align-items:center;
  min-height:2.6rem;
}

/* Logo höher als der Balken — steht oben und unten über */
.seiten-kopf--schlank .seiten-kopf__logo {
  width:clamp(74px, 11vw, 118px);
  margin:-1.5rem -0.2rem -2.4rem 0;
  position:relative; z-index:2;
}

/* Fließtext auf diesen Seiten etwas größer */
.seiten-kopf--schlank + .container .prose {
  font-size:1.06rem;
  line-height:1.7;
}

/* ===================================================================
   Überschriften im Fließtext: Linien von Quark 2 abschalten
   =================================================================== */

/* Quark 2 setzt über jedes h2 einen kurzen Akzentbalken (h2::before,
   28x3 px). Der wirkt hier wie ein versehentlicher Strich — global weg. */
h2::before, h2::after,
h3::before, h3::after {
  content:none !important;
  display:none !important;
}

h1, h2, h3, h4 {
  border-top:0; border-bottom:0;
  background-image:none;
}

/* Überschriften einheitlich dunkel */
h2, h3, h4,
.prose h2, .prose h3, .prose h4 {
  color:var(--mc-schwarz);
}

.prose h2 { margin-top:2rem; }

/* Ausnahme: der weiße Titel im roten Balken bleibt weiß */
.seiten-kopf h1 { color:#fff; }

@media (max-width:700px) {
  .seiten-kopf--schlank .seiten-kopf__logo {
    width:66px; margin:-1rem 0 -1.6rem 0;
  }
}

.quelle-hinweis {
  margin:1.5rem 0 0; padding:.6rem .9rem;
  background:var(--mc-beige-hell); border-left:4px solid var(--mc-beige);
  font-size:.9rem;
}

/* ---------- Medienkacheln über dem Text ---------- */
.medien-kacheln {
  display:grid; gap:.9rem; margin:0 0 2rem;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
}
@media (min-width:820px) {
  .medien-kacheln { grid-template-columns:repeat(3, 1fr); }
}

.medien-kachel {
  margin:0; position:relative;
  aspect-ratio:var(--kachel-verhaeltnis, 1 / 1);
  overflow:hidden; border:1px solid var(--mc-beige);
  background:var(--mc-beige-hell);
}
.medien-kachel img {
  width:100%; height:100%; object-fit:contain; display:block;
  background:var(--mc-weiss); cursor:zoom-in; transition:transform 260ms ease;
}
:root[data-theme='dark'] .medien-kachel img { background:var(--mc-papier); }
.medien-kachel:hover img { transform:scale(1.04); }

.medien-kachel--video a { display:block; width:100%; height:100%; position:relative; }
.medien-kachel--video img { cursor:pointer; }

.medien-kachel__spielen {
  position:absolute; inset:0; margin:auto;
  width:62px; height:62px; border-radius:50%;
  background:rgb(191 58 63 / .92); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgb(43 39 40 / .35);
}
.medien-kachel__spielen svg { width:30px; height:30px; margin-left:3px; }
.medien-kachel--video:hover .medien-kachel__spielen { background:var(--mc-rot-dunkel); }

/* ===================================================================
   Mitteilungen
   =================================================================== */

.mitteilungs-liste { display:flex; flex-direction:column; gap:1.1rem; }

.mitteilung {
  background:var(--mc-weiss); border:var(--mc-rand);
  border-left:5px solid var(--mc-rot);
  transition:box-shadow 180ms ease, transform 180ms ease;
}
:root[data-theme='dark'] .mitteilung { background:var(--mc-beige-hell); }
.mitteilung:hover { box-shadow:0 6px 18px rgb(43 39 40 / .12); transform:translateY(-2px); }

.mitteilung__link {
  display:flex; gap:1.2rem; align-items:stretch;
  text-decoration:none; color:inherit; padding:1rem 1.15rem;
}

.mitteilung__bild {
  flex:0 0 auto; width:130px; height:130px; overflow:hidden;
  border:1px solid var(--mc-beige); background:var(--mc-beige-hell);
}
.mitteilung__bild img { width:100%; height:100%; object-fit:contain; display:block;
  background:var(--mc-weiss); }

.mitteilung__text { flex:1 1 auto; min-width:0; }

.mitteilung__datum {
  display:block; font-size:.82rem; letter-spacing:.05em;
  text-transform:uppercase; color:var(--mc-grau); margin-bottom:.25rem;
}

.mitteilung__titel { margin:0 0 .45rem; font-size:1.2rem; line-height:1.3; }
.mitteilung:hover .mitteilung__titel { color:var(--mc-rot-dunkel); }

.mitteilung__anriss { margin:0 0 .6rem; }

.mitteilung__mehr { font-size:.9rem; color:var(--mc-rot-dunkel); font-weight:600; }

@media (max-width:640px) {
  .mitteilung__link { flex-direction:column; gap:.85rem; }
  .mitteilung__bild { width:100%; height:170px; }
}

/* ===================================================================
   Downloads
   =================================================================== */

.download-gruppen { display:flex; flex-direction:column; gap:2.5rem; }

.download-gruppe__titel {
  display:flex; align-items:center; gap:.6rem;
  padding-bottom:.5rem; margin-bottom:1rem;
  border-bottom:2px solid var(--mc-beige);
}
.download-gruppe__zahl {
  font-size:.78rem; font-weight:400; color:#fff;
  background:var(--mc-rot); border-radius:999px;
  padding:.1rem .55rem;
}

/* Bilder als Raster */
.download-bilder {
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
}
.download-bild {
  margin:0; border:var(--mc-rand); background:var(--mc-weiss);
  display:flex; flex-direction:column;
}
:root[data-theme='dark'] .download-bild { background:var(--mc-beige-hell); }
.download-bild img {
  width:100%; aspect-ratio:4 / 3; object-fit:contain;
  background:var(--mc-weiss); display:block; cursor:zoom-in;
}
.download-bild figcaption {
  padding:.6rem .7rem; border-top:var(--mc-rand);
  display:flex; flex-direction:column; gap:.5rem; align-items:flex-start;
}
.download-bild__name {
  font-size:.8rem; color:var(--mc-grau);
  overflow-wrap:anywhere; line-height:1.35;
}

/* Videos, Audio, Dokumente als Liste */
.download-liste { list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:.6rem; }

.download-eintrag {
  display:flex; align-items:center; gap:.9rem; flex-wrap:wrap;
  background:var(--mc-weiss); border:var(--mc-rand);
  border-left:4px solid var(--mc-sage, var(--mc-beige));
  padding:.7rem .9rem;
}
:root[data-theme='dark'] .download-eintrag { background:var(--mc-beige-hell); }

.download-eintrag__art {
  flex:0 0 auto; min-width:52px; text-align:center;
  background:var(--mc-schwarz); color:var(--mc-papier);
  font-size:.7rem; letter-spacing:.06em; font-weight:700;
  padding:.28rem .45rem;
}
.download-eintrag__name { flex:1 1 220px; min-width:0; overflow-wrap:anywhere; }
.download-eintrag__groesse { font-size:.85rem; color:var(--mc-grau); }

/* ---------- Text zum Mitlesen ---------- */
.tafel-mitlesen {
  margin-top:1.25rem;
  border:1px solid var(--mc-beige);
  background:var(--mc-beige-hell);
  padding:0 1rem;
}
.tafel-mitlesen summary {
  cursor:pointer; padding:.75rem 0; font-weight:600;
  color:var(--mc-rot-dunkel); list-style:none;
  display:flex; align-items:center; gap:.5rem;
}
.tafel-mitlesen summary::-webkit-details-marker { display:none; }
.tafel-mitlesen summary::after {
  content:''; width:8px; height:8px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg); transition:transform 180ms ease;
}
.tafel-mitlesen[open] summary::after { transform:rotate(-135deg); }
.tafel-mitlesen__inhalt { padding-bottom:1.25rem; max-width:70ch; }
.tafel-mitlesen__inhalt p { margin:0 0 .9rem; }

.download-gruppe__text { margin:-.4rem 0 1.2rem; max-width:70ch; }
.download-gruppe__text p { margin:0 0 .7rem; }

.download-bild__meta {
  font-size:.75rem; color:var(--mc-grau); letter-spacing:.03em;
}

/* ---------- Download-Karten für Video, Audio, Dokumente ---------- */
.download-karten {
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
}

.download-karte {
  display:flex; flex-direction:column;
  border:var(--mc-rand); background:var(--mc-weiss);
}
:root[data-theme='dark'] .download-karte { background:var(--mc-beige-hell); }

.download-karte__bild {
  position:relative; display:block; aspect-ratio:16 / 10;
  background:var(--mc-beige-hell); overflow:hidden;
}
.download-karte__bild img { width:100%; height:100%; object-fit:cover; display:block; }

.download-karte__symbol {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--mc-rot); opacity:.55;
}
.download-karte__symbol svg { width:52px; height:52px; }

.download-karte__endung {
  position:absolute; left:.5rem; bottom:.5rem;
  background:var(--mc-schwarz); color:var(--mc-papier);
  font-size:.68rem; font-weight:700; letter-spacing:.06em;
  padding:.2rem .45rem;
}

.download-karte__text {
  padding:.75rem .85rem 1rem;
  display:flex; flex-direction:column; gap:.45rem; align-items:flex-start;
}
.download-karte__name {
  margin:0; font-size:1rem; line-height:1.3; overflow-wrap:anywhere;
}
.download-karte__meta { margin:0; font-size:.8rem; color:var(--mc-grau); }

/* ===================================================================
   Barrierefreiheit
   =================================================================== */

/* Sprunglink: unsichtbar, bis er den Fokus bekommt */
.sprunglink {
  position:absolute; left:-9999px; top:0; z-index:10000;
  background:var(--mc-rot); color:#fff;
  padding:.75rem 1.25rem; font-weight:600; text-decoration:none;
}
.sprunglink:focus {
  left:.75rem; top:.75rem;
  outline:3px solid var(--mc-schwarz); outline-offset:2px;
}

/* Bilder, die sich vergrößern lassen, sind Schaltflächen — sie müssen
   mit der Tastatur erreichbar sein und dürfen dabei nicht anders aussehen. */
.lupe-knopf {
  display:block; width:100%; height:100%;
  padding:0; margin:0; border:0; background:none;
  cursor:zoom-in; font:inherit; color:inherit;
}
.lupe-knopf img { display:block; }
.lupe-knopf:focus-visible {
  outline:3px solid var(--mc-rot); outline-offset:3px;
}

/* In quadratischen Kacheln muss die Schaltfläche die Fläche füllen */
.medien-kachel .lupe-knopf,
.download-bild .lupe-knopf,
.galerie .lupe-knopf { height:100%; }
.medien-kachel .lupe-knopf img,
.download-bild .lupe-knopf img { width:100%; height:100%; object-fit:contain; }

/* Fokus im Überlagerer sichtbar machen */
.lupe__zu:focus-visible {
  outline:3px solid #fff; outline-offset:2px;
}

/* Punkte der Tafelnavigation: gedrückter Zustand erkennbar */
.tafel-punkte button[aria-pressed='true'] { background:var(--mc-rot); }
.tafel-punkte button:focus-visible {
  outline:3px solid var(--mc-schwarz); outline-offset:2px;
}

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


/* ===================================================================
   Schraegband — das Leitmotiv der Plakate
   Laeuft an beiden Seiten ueber den Rand hinaus, wie im Druck.
   =================================================================== */

.df-band {
  position:relative;
  overflow:hidden;
  padding-block:3.2rem;
}
.df-band::before {
  content:'';
  position:absolute; left:-12%; right:-12%; top:50%;
  height:5.5rem; margin-top:-2.75rem;
  background:var(--mc-rot);
  transform:rotate(-11deg);
  z-index:0;
}
.df-band > * { position:relative; z-index:1; }

/* Auf orangem Grund steht Text schwarz — nicht weiss. */
.df-band, .df-band a { color:var(--mc-schwarz); }

/* Verantwortlich im Sinne des Presserechts — steht im Fuss, klein und ruhig. */
.mc-fuss__viisdp {
  margin:1.2rem 0 0;
  font-size:.78rem;
  line-height:1.5;
  color:#B9B4B0;        /* --mc-grau waeren hier nur 2,4:1 gewesen */
}

/* ===================================================================
   Bilderwand — Mauerwerk und Pinnwand
   Umgesetzt mit CSS-Spalten statt Gitter: beliebige Bildhoehen ohne
   eine Zeile JavaScript. Lesereihenfolge laeuft spaltenweise, was bei
   einer Fotowand niemanden stoert.
   =================================================================== */

/* Mehrspaltensatz: Die Bilder fliessen SPALTENWEISE — erst Spalte eins von
   oben nach unten, dann Spalte zwei. Das sieht lueckenlos aus, aber die
   Reihenfolge liest sich nicht von links nach rechts. Wer eine Abfolge
   erzaehlen will, nimmt die Anordnung „Raster" (siehe unten). */
.bw { columns: 3 260px; column-gap: 1rem; }

/* Raster: gleich grosse Felder, Reihenfolge zeilenweise von links nach
   rechts. Der Preis: Die Bilder werden auf ein einheitliches Format
   zugeschnitten. Dafuer stimmt die Abfolge mit der im Admin ueberein. */
.bw--raster {
  columns: unset;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}
.bw--raster .bw__stueck { margin: 0; break-inside: auto; }
.bw--raster .bw__stueck img,
.bw--raster .bw__ohnebild {
  width: 100%; height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.bw__stueck {
  break-inside: avoid;
  margin: 0 0 1rem;
  position: relative;
  background: var(--mc-weiss);
  border: 1px solid var(--mc-beige);
}

.bw__knopf {
  display: block; width: 100%; padding: 0; border: 0;
  background: none; cursor: zoom-in;
}

.bw__stueck img { display: block; width: 100%; height: auto; }

.bw__text {
  padding: .55rem .7rem;
  font-size: .84rem;
  line-height: 1.4;
  color: var(--mc-grau);
}

.bw__leer { color: var(--mc-grau); font-style: italic; }

/* Zeigergeraete: Text liegt als Streifen ueber dem Bild und erscheint beim
   Ueberfahren. Beruehrungsgeraete koennen nicht ueberfahren — dort bleibt der
   Text dauerhaft unter dem Bild stehen (Regel weiter unten). */
@media (hover: hover) and (pointer: fine) {
  .bw__text {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: color-mix(in oklab, var(--mc-schwarz) 88%, transparent);
    color: #fff;
    opacity: 0; transform: translateY(.4rem);
    transition: opacity .16s ease, transform .16s ease;
    pointer-events: none;
  }
  .bw__stueck:hover .bw__text,
  .bw__stueck:focus-within .bw__text { opacity: 1; transform: none; }
}

/* Pinnwand: leicht verdreht, mit Reisszwecke */
.bw--pinnwand .bw__stueck {
  box-shadow: 0 2px 10px rgba(0, 0, 0, .16);
  padding: .5rem .5rem 0;
  transform: rotate(var(--dreh, -1.2deg));
}
.bw--pinnwand .bw__stueck:nth-child(2n)  { --dreh:  1.6deg; }
.bw--pinnwand .bw__stueck:nth-child(3n)  { --dreh: -2.1deg; }
.bw--pinnwand .bw__stueck:nth-child(5n)  { --dreh:  .8deg; }
.bw--pinnwand .bw__stueck::before {
  content: ''; position: absolute; top: -7px; left: 50%; margin-left: -7px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--mc-rot);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
  z-index: 2;
}
.bw--pinnwand .bw__text { text-align: center; }

@media (max-width: 700px) {
  .bw { columns: 2 150px; column-gap: .6rem; }
  .bw__stueck { margin-bottom: .6rem; }
  .bw--pinnwand .bw__stueck { transform: none; }
}

/* Beschriftung in der Lupe — auf dem Telefon der einzige Weg zum Text */
.lupe__text {
  margin: .8rem auto 0; max-width: 60ch; padding: 0 1rem;
  text-align: center; color: #fff; font-size: .92rem; line-height: 1.5;
}
.lupe__text[hidden] { display: none; }

/* ===================================================================
   Zeitplan auf einem Zehn-Minuten-Raster

   Die Zeilen sind minmax(…, auto): Sie halten das Zehn-Minuten-Mass ein,
   duerfen aber wachsen, wenn ein Eintrag mehr Platz braucht. Vorher waren
   sie starr, und ein Dreissig-Minuten-Auftritt hatte 4,3 rem fuer drei
   Zeilen Text — der Rest wurde abgeschnitten.

   Weil die Zeilen nun ungleich hoch sein koennen, sind die Stundenlinien
   keine Hintergrundstreifen mehr, sondern eigene Gitterelemente. Sie
   sitzen dadurch immer auf der Hoehe ihrer Uhrzeit.
   =================================================================== */

.zplan__hinweis { color: var(--mc-grau); margin-top: -.4rem; }

.zplan {
  display: grid;
  /* Erste Spalte die Zeitachse, danach eine Spalte je Buehne. Bei einer
     Buehne ist das genau die bisherige Aufteilung. */
  grid-template-columns: 4.6rem repeat(var(--spalten, 1), minmax(0, 1fr));
  grid-template-rows: repeat(var(--zeilen), minmax(0.7rem, 1fr));
  column-gap: 1rem;
  margin-top: 1.2rem;
}

/* Buehnennamen: eigene Zeile ueber dem Raster, mit derselben
   Spaltenaufteilung, damit die Namen ueber ihren Spalten sitzen. */
.zplan-kopf {
  display: grid;
  grid-template-columns: 4.6rem repeat(var(--spalten, 1), minmax(0, 1fr));
  column-gap: 1rem;
  margin-top: 1.2rem;
}
.zplan__buehne {
  margin: 0;
  font-weight: 700; font-size: 1rem;
  padding-bottom: .3rem;
  border-bottom: 3px solid var(--mc-rot);
}
.zplan-kopf + .zplan { margin-top: .5rem; }

.zplan__marke {
  grid-column: 1; grid-row: var(--r);
  align-self: start;
  font-size: .85rem; font-weight: 700;
  color: var(--mc-grau);
  text-align: right;
  transform: translateY(-.3rem);
}

.zplan__linie {
  grid-column: 2 / -1; grid-row: var(--r);
  align-self: start;
  height: 1px; width: 100%;
  background: var(--mc-beige);
}

.zplan__punkt {
  grid-column: var(--s, 2);
  grid-row: var(--start) / span var(--span);
  z-index: 1;
  background: var(--mc-rot);
  color: var(--mc-schwarz);
  border-left: 4px solid var(--mc-schwarz);
  padding: .45rem .8rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.zplan__punkt--kleinkunst {
  background: var(--mc-beige); border-left-color: var(--mc-schwarz);
}
.zplan__punkt--wort  { background: var(--mc-beige-hell); border-left-color: var(--mc-rot); }
.zplan__punkt--pause { background: transparent; border: 1px dashed var(--mc-beige); border-left-width: 4px; }

/* Kurze Punkte einzeilig: Uhrzeit und Titel nebeneinander */
.zplan__punkt--kurz {
  flex-direction: row; align-items: baseline; gap: .7rem;
  padding-block: .25rem;
}
.zplan__punkt--kurz .zplan__bis { display: none; }
.zplan__punkt--kurz .zplan__titel { font-size: .98rem; }

.zplan__zeit {
  margin: 0; font-size: .74rem; font-weight: 700; letter-spacing: .04em;
  white-space: nowrap; opacity: .75;
}
.zplan__titel {
  margin: 0; font-size: 1.05rem; line-height: 1.15;
}
.zplan__titel a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.zplan__zusatz { margin: .1rem 0 0; font-size: .82rem; line-height: 1.3; }

/* Schmale Schirme: das Raster traegt nicht mehr, es wird eine Liste */
/* Zwei Spalten brauchen mehr Platz als eine. Unter 900 px wird auch der
   mehrspurige Plan zur Liste — die Buehnennamen bleiben als Zwischen-
   ueberschriften stehen, damit die Zuordnung erhalten bleibt. */
@media (max-width: 900px) {
  .zplan-kopf { display: none; }
  .zplan--mehrspurig { display: block; }
  .zplan--mehrspurig .zplan__marke,
  .zplan--mehrspurig .zplan__linie { display: none; }
  .zplan--mehrspurig .zplan__buehne {
    margin: 1.8rem 0 .6rem; font-size: 1.1rem;
  }
  .zplan--mehrspurig .zplan__buehne:first-of-type { margin-top: .4rem; }
  .zplan--mehrspurig .zplan__punkt {
    margin-bottom: .5rem; padding: .6rem .8rem;
    flex-direction: column; align-items: stretch;
  }
  .zplan--mehrspurig .zplan__punkt--kurz .zplan__bis { display: inline; }
}

@media (max-width: 640px) {
  .zplan { display: block; }
  .zplan__marke, .zplan__linie { display: none; }
  .zplan__punkt {
    margin-bottom: .5rem; padding: .6rem .8rem;
    flex-direction: column; align-items: stretch;
  }
  .zplan__punkt--kurz .zplan__bis { display: inline; }
}

/* ===================================================================
   Wer auftritt
   =================================================================== */

.kliste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1.2rem;
  margin-top: 1rem;
}

.kkarte { display: block; text-decoration: none; color: inherit; }
.kkarte__bild {
  display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border: 1px solid var(--mc-beige);
}
.kkarte__bild--leer { background: var(--mc-beige-hell); }
.kkarte__text { display: block; margin-top: .5rem; }
.kkarte__name {
  display: block;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-weight: 900; font-size: 1.15rem; line-height: 1.05;
}
.kkarte__rolle, .kkarte__ort {
  display: block; font-size: .82rem; color: var(--mc-grau);
}
.kkarte:hover .kkarte__name { color: var(--mc-rot-dunkel); }

.kprofil { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 2rem; }
.kprofil__bild { margin: 0; }
.kprofil__bild img { display: block; width: 100%; height: auto; border: 1px solid var(--mc-beige); }
.kprofil__kurz { font-size: 1.1rem; line-height: 1.55; }

@media (max-width: 760px) {
  .kprofil { grid-template-columns: 1fr; gap: 1.2rem; }
}

/* Anspieler: laedt erst auf Klick (preload="none"), Datei vom eigenen Server */
.kton { margin: 1.5rem 0; padding: .9rem 1rem; background: var(--mc-beige-hell); }
.kton__titel { margin: 0 0 .5rem; font-weight: 700; }
.kton audio { width: 100%; }
.kton__hinweis { margin: .5rem 0 0; font-size: .8rem; color: var(--mc-grau); }

/* Verweise — nur ausgefuellte Felder erzeugen hier ueberhaupt ein Element */
.kkanaele { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }

.kkanal {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .38rem .8rem;
  border: 2px solid var(--mc-schwarz);
  color: var(--mc-schwarz);
  text-decoration: none;
  font-size: .9rem; font-weight: 600;
}
.kkanal:hover { background: var(--mc-rot); }
.kkanal__symbol { display: inline-flex; width: 1.1rem; height: 1.1rem; }
.kkanal__symbol svg { width: 100%; height: 100%; }

/* Bandlogo auf der Künstlerseite — nur so groß, dass es die Überschrift
   im Seitenkopf nicht verdrängt. */
.kprofil__logo {
  display: block;
  max-width: 210px; height: auto;
  margin: 0 0 1.1rem;
}
@media (max-width: 760px) {
  .kprofil__logo { max-width: 160px; }
}

/* ===================================================================
   Abschnitte mit Bild — Kinderaktionen
   =================================================================== */

.aktion {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.8rem;
  align-items: center;
  margin: 2.5rem 0;
}

/* Jeder zweite Abschnitt spiegelverkehrt — sonst entsteht eine Rinne */
.aktion:nth-child(even) .aktion__bild { order: 2; }

.aktion--ohne-bild { grid-template-columns: 1fr; }

.aktion__bild { margin: 0; }
.aktion__bild img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--mc-beige);
}

.aktion__text h2 { margin-top: 0; }

.bildhinweis {
  margin: 2.5rem 0 0;
  font-size: .82rem;
  color: var(--mc-grau);
  border-top: 1px solid var(--mc-beige);
  padding-top: .8rem;
}

@media (max-width: 760px) {
  .aktion { grid-template-columns: 1fr; gap: .9rem; margin: 2rem 0; }
  .aktion:nth-child(even) .aktion__bild { order: 0; }
}


/* ===================================================================
   Ankündigungstext auf der Startseite

   Größer und leichter als der übrige Fließtext: Das ist der eine Absatz,
   den fast alle lesen. Gewicht 300 statt 400 hält ihn trotz der Größe
   ruhig — die variable Schrift macht das ohne zusätzliche Datei.
   =================================================================== */

.ankuendigung { margin-bottom: 4.5rem; }

.prose--gross {
  font-size: clamp(1.06rem, .95rem + .55vw, 1.32rem);
  font-weight: 300;
  line-height: 1.62;
  letter-spacing: .003em;
}
.prose--gross p { margin-bottom: 1.15em; }
.prose--gross::after { content: ''; display: block; clear: both; }

/* ---- Zettel mit Zitaten -------------------------------------------
   Angeheftet wirkende Notizen, vom Text umflossen. Die Drehung ist je
   Seite unterschiedlich, damit keine zwei gleich aussehen.
   ------------------------------------------------------------------- */

.zettel {
  margin: .2rem 0 .8rem;
  width: clamp(150px, 30%, 232px);
  filter: drop-shadow(0 4px 10px rgb(0 0 0 / .18));
}
.zettel img { display: block; width: 100%; height: auto; }
.zettel .bw__knopf { cursor: zoom-in; }

.zettel--rechts { float: right; margin-left: 1.6rem; transform: rotate(2.2deg); }
.zettel--links  { float: left;  margin-right: 1.6rem; transform: rotate(-2.6deg); }

/* Unter 620 px trägt der Umfluss nicht mehr — bei 150 px Bildbreite bleiben
   sonst vier Wörter je Zeile. Dann stehen die Zettel mittig für sich. */
@media (max-width: 620px) {
  .zettel {
    float: none; width: min(78%, 260px);
    margin: 1.6rem auto; transform: rotate(-1.5deg);
  }
  .zettel--links { transform: rotate(1.8deg); }
}


/* ===================================================================
   Anfahrt
   =================================================================== */

.wege {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.2rem;
  margin-top: 1rem;
}

.weg {
  border: 1px solid var(--mc-beige);
  border-top: 5px solid var(--mc-rot);
  padding: 1rem 1.1rem 1.2rem;
}
.weg--rad  { border-top-color: var(--mc-rot); }
.weg--bahn { border-top-color: var(--mc-schwarz); }
.weg--bus  { border-top-color: var(--mc-grau); }
.weg--auto { border-top-color: var(--mc-beige); }

.weg__art {
  margin: 0; font-size: .74rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--mc-grau);
}
.weg__von { margin: .15rem 0 .6rem; font-size: 1.15rem; line-height: 1.1; }
.weg__dauer {
  margin: .6rem 0 0; font-size: .84rem; font-weight: 600; color: var(--mc-grau);
}

.prose--klein { font-size: .93rem; line-height: 1.55; }
.prose--klein p:last-child { margin-bottom: 0; }

.karte { margin: 0; }
.karte img { display: block; width: 100%; height: auto; border: 1px solid var(--mc-beige); }
.karte__text { margin-top: .5rem; font-size: .84rem; color: var(--mc-grau); }

/* ===================================================================
   Bündnisse
   =================================================================== */

.bliste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.4rem;
  margin-top: 1rem;
}

.bkarte {
  border: 1px solid var(--mc-beige);
  padding: 1.2rem 1.3rem 1.4rem;
  display: flex; flex-direction: column;
}

.bkarte__kopf {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: .8rem;
}
/* Die Logos sind unterschiedlich geschnitten: quadratische Kreise neben
   breiten Schriftzügen. Ein festes Quadrat haette die breiten auf Briefmarken-
   groesse gestaucht. Deshalb begrenzte Breite UND Hoehe, das Bild nimmt sich,
   was es braucht. */
.bkarte__logo {
  width: auto; max-width: 132px;
  height: auto; max-height: 76px;
  object-fit: contain;
  flex: 0 0 auto;
}
.bkarte__name { margin: 0; font-size: 1.3rem; line-height: 1.1; }
.bkarte__ort  { margin: .15rem 0 0; font-size: .86rem; color: var(--mc-grau); }

.bkarte .kkanaele { margin-top: auto; padding-top: 1rem; }
.bkarte .kkanal { font-size: .84rem; padding: .3rem .65rem; border-width: 1px; }

/* ===================================================================
   Chronik und Quellen
   =================================================================== */

.chronik { list-style: none; margin: 1.2rem 0 0; padding: 0; }

/* Linie und Punkt haengen am Inhalt selbst — als Rahmen und als
   Pseudo-Element darauf. Vorher waren beide absolut neben der Datumsspalte
   gesetzt und rutschten auf die Jahreszahl. So kann das nicht passieren:
   Der Rahmen gehoert zu dem Element, an dem er entlanglaeuft. */
.chronik__punkt {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  column-gap: 1.5rem;
}

.chronik__datum {
  margin: 0; text-align: right;
  font-weight: 700; font-size: .92rem; line-height: 1.5;
  color: var(--mc-grau);
}

.chronik__inhalt {
  position: relative;
  border-left: 2px solid var(--mc-beige);
  padding: 0 0 1.6rem 1.4rem;
}
.chronik__punkt:last-child .chronik__inhalt {
  border-left-color: transparent;
  padding-bottom: 0;
}

.chronik__inhalt::before {
  content: '';
  position: absolute;
  left: -6.5px; top: .32rem;
  width: 11px; height: 11px;
  background: var(--mc-rot);
  border-radius: 50%;
}

.chronik__titel { margin: 0 0 .3rem; font-size: 1.12rem; line-height: 1.25; }

/* Schmal: Datum ueber den Text, Linie bleibt am Inhalt */
@media (max-width: 620px) {
  .chronik__punkt { grid-template-columns: 1fr; }
  .chronik__datum {
    text-align: left;
    padding-left: 1.4rem;
    margin-bottom: .1rem;
  }
  .chronik__inhalt { padding-bottom: 1.4rem; }
}

.quellen { margin: 1rem 0 0; padding-left: 1.1rem; font-size: .9rem; line-height: 1.6; }
.quellen li { margin-bottom: .45rem; }
.quellen__medium, .quellen__datum { color: var(--mc-grau); }
.quellen__medium::before { content: ' · '; }
.quellen__datum::before  { content: ' · '; }
.quellen__hinweis {
  margin-top: 1.2rem; font-size: .84rem; color: var(--mc-grau);
  border-top: 1px solid var(--mc-beige); padding-top: .8rem;
}


/* ===================================================================
   Listenpunkte abschalten

   Quark 2 zeichnet Aufzaehlungspunkte nicht ueber list-style, sondern
   ueber ein Pseudo-Element am li. `list-style: none` allein greift
   deshalb nicht — in den Verweisleisten und im Fuss standen dadurch
   kleine schwarze Quadrate zwischen den Elementen.
   =================================================================== */

.kkanaele, .kkanaele li,
.mc-fuss ul, .mc-fuss li,
.chronik, .chronik__punkt,
.download-liste, .download-liste li,
.rubriken, .sozial {
  list-style: none;
}

.kkanaele li::before, .kkanaele li::marker,
.mc-fuss li::before,  .mc-fuss li::marker,
.chronik__punkt::marker,
.download-liste li::before, .download-liste li::marker {
  content: none;
  display: none;
}


/* ===================================================================
   Beiträge
   =================================================================== */

.beitragsliste { list-style: none; margin: 0; padding: 0; }
.beitragsliste li::before, .beitragsliste li::marker { content: none; display: none; }
.beitragsliste__punkt { margin-bottom: 1rem; }

.beitragskarte {
  display: block;
  border: 1px solid var(--mc-beige);
  border-left: 5px solid var(--mc-rot);
  padding: 1.1rem 1.3rem;
  text-decoration: none; color: inherit;
}
.beitragskarte:hover { border-color: var(--mc-schwarz); border-left-color: var(--mc-rot); }

.beitragskarte__art {
  display: block; font-size: .74rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--mc-grau);
}
.beitragskarte__titel {
  display: block; margin-top: .15rem;
  font-size: 1.35rem; font-weight: 900; line-height: 1.15;
  letter-spacing: -.015em;
}
.beitragskarte__unter {
  display: block; font-size: 1rem; color: var(--mc-grau); font-style: italic;
}
.beitragskarte__text { display: block; margin-top: .5rem; line-height: 1.55; }
.beitragskarte__mehr {
  display: block; margin-top: .7rem;
  font-weight: 600; color: var(--mc-rot-dunkel);
}

.beitrag__kurz { font-size: 1.15rem; line-height: 1.6; font-weight: 300; }
.beitrag__pdf { margin: 2rem 0 0; }

/* Hinweiskasten — steht über dem Text, nicht darunter */
.hinweis {
  border: 1px solid var(--mc-beige);
  border-top: 4px solid var(--mc-rot);
  background: var(--mc-beige-hell);
  padding: 1rem 1.2rem .6rem;
  margin: 0 0 1.8rem;
}
.hinweis__titel {
  margin: 0 0 .4rem; font-weight: 700;
  font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
}

.quellen-block { margin-top: 3rem; }
.quellen-block h2 { padding-top: .8rem; border-top: 3px solid var(--mc-rot); }

/* ===================================================================
   Belegzeilen im Fließtext

   Sie stehen direkt unter der Aussage, auf die sie sich beziehen.
   Kleiner und eingerückt, damit sie den Lesefluss nicht zerhacken —
   aber nicht grau bis zur Unsichtbarkeit: Wer sie sucht, soll sie
   finden, und ein Link muss anklickbar aussehen.
   =================================================================== */

.prose p.belege {
  margin: -.4rem 0 1.5rem;
  padding: .35rem 0 .35rem .9rem;
  border-left: 3px solid var(--mc-rot);
  font-size: .84rem;
  line-height: 1.55;
  color: var(--mc-grau);
}
.prose p.belege span {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .74rem;
  margin-right: .25rem;
}
.prose p.belege a {
  color: var(--mc-rot-dunkel);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.prose p.belege a:hover { color: var(--mc-schwarz); }

/* Tabelle im Beitrag — auf schmalen Schirmen waagerecht schiebbar */
.prose table {
  width: 100%; border-collapse: collapse; margin: 1.5rem 0;
  font-size: .92rem;
}
.prose thead th {
  text-align: left; vertical-align: bottom;
  border-bottom: 3px solid var(--mc-rot);
  padding: .5rem .7rem; font-weight: 700;
}
.prose tbody td {
  vertical-align: top;
  border-bottom: 1px solid var(--mc-beige);
  padding: .7rem;
}
@media (max-width: 700px) {
  .prose table { display: block; overflow-x: auto; white-space: normal; }
}

/* Ohne Social-Kanäle hat der Fuß nur drei Spalten — dann nicht auf vier
   Bahnen auseinanderziehen. */
.mc-fuss__gitter--drei {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  max-width: 60rem;
}

/* Sprungmarke „Direkt zu den Bildern" ------------------------------- */

.sprungmarke { margin: 1.6rem 0 0; }

/* Damit die Überschrift beim Springen nicht unter der Kopfleiste
   verschwindet — und damit der Sprung nicht ruckt. */
#bilder { scroll-margin-top: 5rem; }
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Bühnenname im Plan — nur auf schmalen Schirmen sichtbar, dort ersetzt
   er die weggefallene Kopfzeile. */
.zplan__spurname { display: none; }

@media (max-width: 900px) {
  .zplan--mehrspurig .zplan__spurname {
    display: block;
    margin: 1.8rem 0 .6rem;
    font-weight: 700; font-size: 1.1rem;
    padding-bottom: .3rem;
    border-bottom: 3px solid var(--mc-rot);
  }
  .zplan--mehrspurig .zplan__spurname:first-child { margin-top: .4rem; }
}

/* ===================================================================
   Tastaturbedienung

   Sichtbarer Fokus auch auf Elementen, die keine Schaltflächen sind —
   die Lupenknöpfe in den Bilderwänden etwa liegen um ein Bild herum
   und hätten sonst nur den Standardrahmen des Browsers.
   =================================================================== */

.bw__knopf:focus-visible,
.beitragskarte:focus-visible,
.kkarte:focus-visible,
.rubrik:focus-visible,
.zplan__titel a:focus-visible {
  outline: 3px solid var(--mc-rot);
  outline-offset: 3px;
}

/* Ein Programmpunkt mit Verweis soll beim Anspringen als Ganzes
   hervortreten, nicht nur die Textzeile darin. */
.zplan__punkt:focus-within {
  outline: 3px solid var(--mc-schwarz);
  outline-offset: 2px;
}

/* ===================================================================
   Verweise auf andere Seiten (Rubrik „Politisches")
   =================================================================== */

.verweise { list-style: none; margin: 1.4rem 0 0; padding: 0; }
.verweise li::before, .verweise li::marker { content: none; display: none; }
.verweise__punkt { margin-bottom: 1rem; }

/* Die ganze Karte ist der Verweis — wie bei den Beitragskarten darueber.
   Deshalb ist sie ein <a>, und alles darin sind <span>-Elemente, die per
   CSS zu Bloecken werden. */
.verweiskarte {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 1.2rem;
  align-items: start;
  border: 1px solid var(--mc-beige);
  border-left: 5px solid var(--mc-rot);
  padding: 1rem 1.2rem;
  text-decoration: none;
  color: inherit;
  transition: border-color .12s;
}
.verweiskarte:hover { border-color: var(--mc-schwarz); border-left-color: var(--mc-rot); }
.verweiskarte:focus-visible {
  outline: 3px solid var(--mc-rot);
  outline-offset: 3px;
}
.verweiskarte--ohne-bild { grid-template-columns: 1fr; }

/* Freigestelltes Logo ohne Grund und Rahmen, passt sich ein statt
   beschnitten zu werden. */
.verweiskarte__bild {
  width: 110px; height: 110px;
  object-fit: contain;
  background: none;
}

.verweiskarte__text { display: block; }

.verweiskarte__titel {
  display: block;
  font-size: 1.2rem; font-weight: 900; line-height: 1.2;
  letter-spacing: -.01em;
}
.verweiskarte:hover .verweiskarte__titel { color: var(--mc-rot-dunkel); }

/* Die Adresse sichtbar: Wer auf eine fremde Seite geschickt wird,
   soll vorher sehen, wohin. */
.verweiskarte__adresse {
  display: block;
  margin: .2rem 0 .55rem;
  font-size: .82rem; color: var(--mc-grau);
}

.verweiskarte__warum { display: block; line-height: 1.55; }

/* Sagt, wohin die Karte fuehrt — dasselbe Muster wie „Lesen →" bei den
   Beitragskarten, damit beides gleich zu bedienen ist. */
.verweiskarte__mehr {
  display: block;
  margin-top: .7rem;
  font-weight: 600;
  color: var(--mc-rot-dunkel);
}
.verweiskarte:hover .verweiskarte__mehr { color: var(--mc-schwarz); }

.verweise__hinweis {
  margin-top: 1.2rem; font-size: .84rem; color: var(--mc-grau);
  border-top: 1px solid var(--mc-beige); padding-top: .8rem;
}

@media (max-width: 560px) {
  .verweiskarte { grid-template-columns: 1fr; }
  .verweiskarte__bild { width: 90px; height: 90px; }
}

/* Die Verweise stehen unter dem eigenen Material — der Strich macht den
   Wechsel sichtbar: Was darunter folgt, stammt nicht von uns. */
.verweise__titel {
  padding-top: 1rem;
  border-top: 3px solid var(--mc-rot);
}

/* Schaltfläche unter dem Zettel auf der Startseite */
.start-kopf__knopf { margin: 2rem 0 0; }

.btn--gross {
  font-size: 1.15rem;
  padding: .8rem 1.8rem;
}

/* ===================================================================
   Spenden — Kontoverbindung mit Übernahme
   =================================================================== */

.konto {
  margin-top: 2rem;
  border: 1px solid var(--mc-beige);
  border-left: 5px solid var(--mc-rot);
  padding: 1.4rem 1.6rem;
}
.konto h2 { margin-top: 0; }

.konto__liste { margin: 1.2rem 0 0; }

.konto__zeile {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: .4rem 1rem;
  align-items: baseline;
  padding: .6rem 0;
  border-bottom: 1px solid var(--mc-beige);
}
.konto__zeile:last-child { border-bottom: none; }

.konto__name {
  margin: 0;
  font-weight: 700; font-size: .9rem;
  color: var(--mc-grau);
}

/* Wert links, Schaltflaeche rechts — in einem Gitter statt in einem
   Flex-Fluss. Sonst sprang die Schaltflaeche je nach Laenge des Wertes
   mal daneben, mal darunter, und die Zeilen liefen nicht mehr auf. */
.konto__wert {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .8rem;
  align-items: start;
}

/* Feste Zeichenbreite: In einer IBAN muss man Ziffern vergleichen können,
   und bei Proportionalschrift verrutscht das Auge.

   `overflow-wrap: anywhere` statt `word-break: break-all`: bricht nur,
   wenn es sein muss, und bevorzugt Wortgrenzen. Sonst wird aus
   „Kirchhatten e.V." ein „Kirchhatte / n e.V." */
.konto__text {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: .98rem;
  overflow-wrap: anywhere;
  line-height: 1.45;
}
.konto__text--gross { font-size: 1.08rem; letter-spacing: .02em; }

.konto__kopieren {
  justify-self: end;
  white-space: nowrap;
  border: 2px solid var(--mc-schwarz);
  background: none;
  color: var(--mc-schwarz);
  font: inherit; font-size: .82rem; font-weight: 600;
  padding: .2rem .7rem;
  cursor: pointer;
}
.konto__kopieren:hover { background: var(--mc-schwarz); color: var(--mc-papier); }
.konto__kopieren:focus-visible {
  outline: 3px solid var(--mc-rot); outline-offset: 2px;
}
.konto__kopieren--fertig {
  background: var(--mc-rot); border-color: var(--mc-rot);
  color: var(--mc-schwarz);
}

.konto__meldung {
  margin: 1rem 0 0;
  font-weight: 600;
  color: var(--mc-rot-dunkel);
}

.konto__hinweis { margin-top: 1.2rem; }

.wofuer { margin: 1rem 0 0; padding-left: 1.2rem; line-height: 1.7; }
.wofuer li { margin-bottom: .4rem; }

@media (max-width: 560px) {
  .konto { padding: 1.1rem 1.2rem; }
  .konto__zeile { grid-template-columns: 1fr; gap: .2rem; }
  .konto__text { font-size: .92rem; }
}

/* Video in der Bilderwand ------------------------------------------ */

.bw__stueck--video .bw__knopf { position: relative; display: block; }

.bw__abspielen {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 62px; height: 62px;
  display: flex; align-items: center; justify-content: center;
  background: rgb(28 27 26 / .72);
  border-radius: 50%;
  pointer-events: none;
}
.bw__abspielen svg { fill: #fff; margin-left: 3px; }

.bw__stueck--video .bw__knopf:hover .bw__abspielen,
.bw__stueck--video .bw__knopf:focus-visible .bw__abspielen {
  background: var(--mc-rot);
}
.bw__stueck--video .bw__knopf:hover .bw__abspielen svg,
.bw__stueck--video .bw__knopf:focus-visible .bw__abspielen svg {
  fill: var(--mc-schwarz);
}

/* Video ohne Vorschaubild: schlichtes Feld statt kaputtem Bildsymbol */
.bw__ohnebild {
  display: block;
  width: 100%; aspect-ratio: 16 / 9;
  background: var(--mc-beige);
}

/* Neue Verweisarten auf Künstlerseiten */
.kkanal--linktree:hover   { border-color: #43e660; }
.kkanal--soundcloud:hover { border-color: #ff5500; }

/* ===================================================================
   Politisches: Beiträge und Verweise dreispaltig

   Dasselbe Raster wie bei den Bündnissen — auto-fit mit 300 px
   Mindestbreite. Auf breiten Schirmen drei Spalten, darunter zwei,
   auf dem Telefon eine. Keine feste Spaltenzahl: Sie würde auf
   mittleren Breiten Karten zusammenquetschen.
   =================================================================== */

.beitragsliste,
.verweise {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.4rem;
  margin-top: 1rem;
  align-items: start;
}

.beitragsliste__punkt,
.verweise__punkt { margin-bottom: 0; }

/* Karten füllen die Zellenhöhe, damit die Reihen bündig abschließen */
.beitragsliste__punkt { display: flex; }
.beitragskarte { display: flex; flex-direction: column; width: 100%; }
.beitragskarte__mehr { margin-top: auto; padding-top: .7rem; }

.verweise__punkt { display: flex; }
.verweiskarte { width: 100%; margin-bottom: 0; }
.verweiskarte__mehr { margin-top: auto; padding-top: .7rem; }

/* Im Dreispaltigen ist neben dem Bild wenig Platz — dort untereinander */
@media (min-width: 900px) {
  .verweiskarte { grid-template-columns: 1fr; }
  .verweiskarte__bild { width: 92px; height: 92px; margin-bottom: .6rem; }
}


/* ===================================================================
   Bündniskalender
   Herkunft: hebamme-schiwa.de, 13. September 2026. Übernommen wurden der
   Rasteraufbau und der Gedanke, Farbe UND Form zu benutzen. Ersetzt sind
   die Farben und die Zahl der Kennungen: zehn statt sechs, weil die
   Kennung hier am Bündnis hängt und es acht davon gibt.

   Die Symbole sind auf schmalen Schirmen Wiedererkennung, nicht Schlüssel.
   Was ein Termin ist, steht in der Liste darunter — dort mit Namen, Logo
   und Uhrzeit. Deshalb ist es vertretbar, über sechs Formen hinauszugehen.
   =================================================================== */

.kal { margin: 2rem 0; }

.kal__kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; margin-bottom: .75rem;
}
.kal__monat { margin: 0; font-size: 1.3rem; }
.kal__blaettern {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .35rem;
  white-space: nowrap;
}
@media (max-width: 620px) {
  .kal__kopf { flex-wrap: wrap; row-gap: .8rem; }
  .kal__monat { flex: 1 0 100%; order: -1; font-size: 1.15rem; }
  .kal__blaettern { flex: 1 1 0; justify-content: center; }
  .kal__monatsname { display: none; }
}

/* minmax(0, 1fr) statt 1fr: '1fr' heißt 'minmax(auto, 1fr)', und das 'auto'
   verbietet der Spalte, schmaler zu werden als ihr breitester Inhalt. Ein
   Kästchen mit 'white-space: nowrap' erzwingt damit die Spaltenbreite —
   sieben davon liefen aus dem Kasten heraus, und das Abschneiden mit
   Auslassungspunkten kam nie zum Zug. */
.kal__gitter {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px; background: #DDDAD6; border: 1px solid #DDDAD6;
}
.kal__wochentag {
  background: #F7F6F4; text-align: center; padding: .4rem 0;
  font-size: .75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: #5A5654;
}
.kal__wochentag abbr { text-decoration: none; border: 0; }

.kal__tag {
  background: #FFFFFF; min-height: 5.6rem; padding: .25rem;
  font-size: .85rem; display: flex; flex-direction: column; gap: .15rem;
  min-width: 0;   /* sonst wirkt minmax(0,1fr) auf der Spalte, nicht hier */
}
.kal__tag--leer  { background: #F7F6F4; }
.kal__tag--heute { outline: 2px solid #A85504; outline-offset: -2px; }
.kal__zahl { font-weight: 700; color: #5A5654; line-height: 1; }
.kal__tag--belegt .kal__zahl { color: #1C1B1A; }

/* Doppelte Klasse statt !important: Quark 2 gestaltet Listen selbst und
   ist spezifischer. 0-2-0 gewinnt. */
.kal__eintraege.kal__eintraege {
  display: flex; flex-direction: column; gap: 2px;
  margin: 0; padding: 0; list-style: none; min-width: 0;
}
.kal__eintraege li { margin: 0; padding: 0; }
.kal__eintraege li::before, .kal__eintraege li::marker { content: none; display: none; }

.kal__chip {
  display: block; max-width: 100%;
  padding: 1px 3px; border-radius: 3px;
  border-left: 3px solid var(--kal-rand);
  background: var(--kal-flaeche);
  color: #1C1B1A;
  font-size: .62rem; line-height: 1.25;
  text-decoration: none;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.kal__chip:hover { filter: brightness(.95); text-decoration: none; }
.kal__chip:focus-visible { outline: 3px solid #F68714; outline-offset: 1px; }

/* Zwei Zeilen je Eintrag: Uhrzeit oben, Titel darunter. Nebeneinander
   blieben bei sieben Spalten rund 65 Pixel für den Titel — etwa acht
   Zeichen. Untereinander steht ihm die volle Kästchenbreite zur Verfügung.
   Beide Zeilen bleiben einzeilig, damit die Zeilenhöhe nicht springt; der
   vollständige Titel steht im title-Attribut und in der Liste darunter. */
.kal__chip__text { display: block; min-width: 0; }
.kal__zeit { display: block; font-weight: 700; line-height: 1.2; }
.kal__titel {
  display: block; margin: 0; font-size: .92em; line-height: 1.15;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.kal__chip--aus { text-decoration: line-through; opacity: .65; }

/* ---- Die zehn Kennungen ------------------------------------------
   Jede trägt vier Angaben:
     --kal-flaeche  helle Tönung für die Kästchen am Schirm
     --kal-rand     der Balken links am Kästchen
     --kal-voll     Füllung der kleinen Symbole
     --kal-rund / --kal-form   die FORM des Symbols

   Gerechnet, nicht geschätzt. Gegen Zellgrund Weiß und Text #1C1B1A:
     flaeche zu Text  9,3:1 bis 13,2:1   (verlangt: 4,5)
     voll zu Weiß     3,0:1 bis  5,8:1   (verlangt: 3,0)
     rand zu flaeche  3,0:1 bis  3,2:1   (verlangt: 3,0)

   Orange (#F68714) fehlt mit Absicht: gegen Weiß 2,5:1, als Symbol also
   nicht erkennbar. Die Reihenfolge der Formen ist so gelegt, dass benachbarte
   Farbtöne nie benachbarte Formen tragen — Grün ist ein Kreis, das ähnliche
   Oliv ein Kreuz.

   Feste Werte statt Variablen: Der Kalender steht auf weißem Grund, während
   --mc-schwarz im dunklen Satz zu hell umschlagen würde. */

.kal-kennung-1  { --kal-flaeche:#C8E3B5; --kal-rand:#578934; --kal-voll:#68A33E;
                  --kal-rund:50%;  --kal-form:none; }                              /* Kreis, grün */
.kal-kennung-2  { --kal-flaeche:#B5CCE3; --kal-rand:#3F73A6; --kal-voll:#4E85BC;
                  --kal-rund:1px;  --kal-form:none; }                              /* Quadrat, blau */
.kal-kennung-3  { --kal-flaeche:#E8D3B0; --kal-rand:#996E24; --kal-voll:#BE892D;
                  --kal-rund:0; --kal-form:polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }      /* Raute */
.kal-kennung-4  { --kal-flaeche:#CCBADE; --kal-rand:#7F53AC; --kal-voll:#855AAF;
                  --kal-rund:0; --kal-form:polygon(50% 0, 100% 100%, 0 100%); }              /* Dreieck auf */
.kal-kennung-5  { --kal-flaeche:#E8BEB0; --kal-rand:#AE5132; --kal-voll:#C86341;
                  --kal-rund:0; --kal-form:polygon(0 0, 100% 0, 50% 100%); }                 /* Dreieck ab */
.kal-kennung-6  { --kal-flaeche:#B9DFDA; --kal-rand:#3A8279; --kal-voll:#49A296;
                  --kal-rund:0; --kal-form:polygon(0 0, 100% 50%, 0 100%); }                 /* Dreieck rechts */
.kal-kennung-7  { --kal-flaeche:#E0B8CF; --kal-rand:#A84880; --kal-voll:#B6548D;
                  --kal-rund:0; --kal-form:polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }  /* Sechseck */
.kal-kennung-8  { --kal-flaeche:#DACABE; --kal-rand:#8C694F; --kal-voll:#A77F62;
                  --kal-rund:0; --kal-form:polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }  /* Stern */
.kal-kennung-9  { --kal-flaeche:#BCBCDC; --kal-rand:#5D5DAC; --kal-voll:#5D5DAC;
                  --kal-rund:100% 100% 0 0; --kal-form:none; }                     /* Halbkreis */
.kal-kennung-10 { --kal-flaeche:#E1E6B3; --kal-rand:#7E862D; --kal-voll:#909933;
                  --kal-rund:0; --kal-form:polygon(35% 0, 65% 0, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0 65%, 0 35%, 35% 35%); }  /* Kreuz */

/* ---- Legende ------------------------------------------------------ */

.kal__legende.kal__legende {
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem;
  margin: .9rem 0 0; padding: 0 0 0 .9rem;
  list-style: none; font-size: .88rem;
}
.kal__legende li { display: flex; align-items: center; gap: .45rem; margin: 0; }
.kal__legende li::before, .kal__legende li::marker { content: none; display: none; }

/* Dasselbe Zeichen wie im Raster auf schmalen Schirmen — sonst taugt die
   Legende nicht als Schlüssel. */
.kal__punkt {
  flex: 0 0 auto;
  width: .9rem; height: .9rem; border: 0;
  background: var(--kal-voll);
  border-radius: var(--kal-rund, 0);
  clip-path: var(--kal-form, none);
}

/* Feste Höhe, freie Breite: Logos haben sehr verschiedene Seitenverhältnisse.
   contain statt cover — ein beschnittenes Logo ist schlimmer als ein kleines. */
.kal__logo, .kal-liste__logo {
  height: 1.4rem; width: auto; max-width: 6rem;
  object-fit: contain; vertical-align: middle;
}

/* ---- Terminliste -------------------------------------------------- */

.kal-liste.kal-liste { list-style: none; margin: 1rem 0 0; padding: 0; }
.kal-liste > li::before, .kal-liste > li::marker { content: none; display: none; }

.kal-liste__eintrag {
  display: grid;
  grid-template-columns: auto 3.6rem 1fr;
  gap: .3rem .9rem;
  align-items: start;
  padding: .9rem 0;
  border-top: 1px solid #DDDAD6;
}
.kal-liste__eintrag:focus-visible { outline: 3px solid #F68714; outline-offset: 2px; }
.kal-liste__eintrag--vorbei { opacity: .62; }
.kal-liste__eintrag--aus .kal-liste__titel { text-decoration: line-through; }

.kal-liste__kaestchen { width: 1.15rem; height: 1.15rem; margin: .35rem 0 0; }

.kal-liste__datum {
  display: flex; flex-direction: column; align-items: center;
  line-height: 1.05; padding-top: .1rem;
}
.kal-liste__tag   { font-size: 1.5rem; font-weight: 700; }
.kal-liste__monat { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.kal-liste__jahr  { font-size: .7rem; color: #5A5654; }

.kal-liste__inhalt { min-width: 0; }
.kal-liste__titel { margin: 0 0 .15rem; font-size: 1.05rem; font-weight: 700; }
.kal-liste__titel label { cursor: pointer; }
.kal-liste__aus {
  display: inline-block; margin-left: .5rem; padding: .05rem .45rem;
  border-radius: 3px; background: #8F1D15; color: #FFFFFF;
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; text-decoration: none;
}
.kal-liste__zeit {
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  margin: 0 0 .2rem; font-size: .9rem; color: #5A5654;
}
.kal-liste__buendnis {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin: .25rem 0 0; font-size: .9rem;
}
.kal-liste__traeger { color: #5A5654; }
.kal-liste__hinweis { margin: .25rem 0 0; font-size: .9rem; }
.kal-liste__verweis, .kal-liste__ics { margin: .25rem 0 0; font-size: .88rem; }

/* ---- Plakat oder Sharepic am Termin — seit Update 151 ---------------

   EIN SCHWEBENDES ELEMENT, KEINE VIERTE RASTERSPALTE. Der Eintrag ist
   ein Raster aus Kaestchen, Datum und Inhalt; eine Spalte mehr haette
   an VIER Stellen nachgezogen werden muessen (mit und ohne Kaestchen,
   Schirm und Papier) — und bei jedem Termin OHNE Plakat eine leere
   Spalte samt Spaltenabstand hinterlassen. `float` kostet eine Regel
   und laesst den Text umfliessen. Der Inhalt ist ein Rasterelement und
   damit ein eigener Formatierungszusammenhang: Das Schwebende kann
   nicht in den naechsten Termin ragen.

   EIN QUADRATISCHES FELD, egal welches Bild. Sharepics sind meist
   quadratisch, Plakate hochkant, Veranstaltungsbilder quer — drei
   Hoehen in einer Liste saehen unruhig aus, und ein hochkantes Plakat
   waere hoeher als der Termin selbst. `object-fit: contain` legt jedes
   Bild vollstaendig ins Feld, ohne etwas abzuschneiden. Beschnitt waere
   die Alternative gewesen; bei einem PLAKAT schneidet man damit die
   Ueberschrift ab.

   UND DER TERMIN IST MINDESTENS SO HOCH WIE DAS FELD. Ohne das ragte
   das Schwebende bei einem kurzen Eintrag unten heraus.
   -------------------------------------------------------------------- */

.kal-liste__plakat {
  display: block;
  float: right;
  width: 5.5rem;
  height: 5.5rem;
  margin: .1rem 0 .5rem .9rem;
  border: 1px solid #DDDAD6;
  border-radius: 4px;
  overflow: hidden;
  background: #F4F2F0;
}

.kal-liste__plakat:focus-visible { outline: 3px solid #F68714; outline-offset: 2px; }

.kal-liste__plakat img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.kal-liste__inhalt:has(.kal-liste__plakat) { min-height: 5.7rem; }

/* WIE WEIT RECHTS DAS BILD STEHT, ENTSCHEIDET DIE TEXTBREITE — seit
   Update 152.

   Ein schwebendes Element geht an den rechten Rand seines Kastens,
   immer. „Etwas weiter links" gibt es nicht; was es gibt, ist ein
   schmalerer Kasten. Bis 151 war der Kasten die ganze Seitenbreite,
   und auf einem breiten Schirm stand das Bild einen halben Meter vom
   Termin entfernt — zugehoerig sah das nicht mehr aus.

   36rem sind rund 65 Zeichen je Zeile. Das ist die Breite, bei der
   sich Fliesstext gut liest; dass das Bild dadurch an die richtige
   Stelle rueckt, ist kein Zufall, sondern dieselbe Ueberlegung von der
   anderen Seite.

   NUR WO EIN BILD IST. Ein Termin ohne Plakat behaelt die volle
   Breite — er hat ja nichts, wovon er sich abgrenzen muesste, und eine
   Kuerzung ohne sichtbaren Grund waere eine Verschlechterung. Unter
   621px greift die Regel nicht: Dort ist der Kasten ohnehin schmaler,
   und das Bild ist ausgeblendet. */
@media (min-width: 621px) {
  .kal-liste__inhalt:has(.kal-liste__plakat) { max-width: 36rem; }
}

.kal-liste__plakatlink { margin: .25rem 0 0; font-size: .88rem; }

.kal-liste__plakatzeichen {
  width: .85em;
  height: .85em;
  vertical-align: -.08em;
  margin-right: .15rem;
}

.kal-liste__plakatart { color: #5A5654; }

/* ZWEI DARSTELLUNGEN, EINE DATEI — und immer genau eine davon zu sehen.
   `display: none` nimmt die andere auch aus der Sprachausgabe; der
   Verweis wird also nie doppelt vorgelesen.

   Am Telefon ist fuer ein Bild neben dem Text kein Platz, am PC braucht
   es die Zeile nicht. Bei einem PDF gibt es gar kein Vorschaubild —
   dann fehlt `--ersatz`, und die Zeile steht ueberall. */
@media (max-width: 620px) {
  .kal-liste__plakat { display: none; }
  .kal-liste__inhalt:has(.kal-liste__plakat) { min-height: 0; }
}

@media (min-width: 621px) {
  .kal-liste__plakatlink--ersatz { display: none; }
}
.kal-liste__leer { margin: 1rem 0; color: #5A5654; }

@media (max-width: 620px) {
  .kal-liste__eintrag { grid-template-columns: auto 1fr; }
  .kal-liste__datum {
    grid-column: 2; flex-direction: row; gap: .4rem; align-items: baseline;
    justify-content: flex-start;
  }
  .kal-liste__inhalt { grid-column: 2; }
  .kal-liste__tag { font-size: 1.05rem; }
}

/* ---- Auswahlformular ---------------------------------------------- */

.kal-form__block { border: 0; padding: 0; margin: 1.5rem 0 0; }
.kal-form__block > legend {
  padding: 0; font-size: 1.15rem; font-weight: 700;
}
.kal-form__erklaerung { margin: .2rem 0 .6rem; font-size: .9rem; color: #5A5654; }

.kal-reihen.kal-reihen { list-style: none; margin: .5rem 0 0; padding: 0; }
.kal-reihen > li::before, .kal-reihen > li::marker { content: none; display: none; }
.kal-reihen__eintrag {
  display: flex; align-items: center; gap: .7rem;
  padding: .5rem 0; border-top: 1px solid #DDDAD6;
}
.kal-reihen__eintrag label {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  cursor: pointer;
}
.kal-reihen__zahl { color: #5A5654; font-size: .85rem; }

.kal-form__knoepfe {
  display: flex; flex-wrap: wrap; gap: .7rem;
  margin: 1.5rem 0 0; padding-top: 1.1rem; border-top: 1px solid #DDDAD6;
}
.kal-form__nachsatz { margin: .5rem 0 0; font-size: .85rem; color: #5A5654; }
.kal-umschalten { margin: .2rem 0 0; font-size: .9rem; }

.kal-warnung {
  margin: 1rem 0 0; padding: .8rem 1rem;
  border-left: 4px solid #8F1D15; background: #F7F6F4;
  font-size: .92rem;
}

/* ---- Abonnement ---------------------------------------------------- */

.kal-abo {
  margin: 2.5rem 0 0; padding: 1.2rem 1.4rem;
  background: #F7F6F4; border: 1px solid #DDDAD6; border-radius: 4px;
}
.kal-abo h2 { margin: 0 0 .5rem; font-size: 1.15rem; }
.kal-abo p { margin: 0 0 .5rem; font-size: .95rem; }
.kal-abo__adresse code {
  display: block; padding: .5rem .7rem; background: #FFFFFF;
  border: 1px solid #DDDAD6; border-radius: 3px;
  font-size: .88rem; overflow-wrap: anywhere;
}
.kal-abo__hinweis { margin: .5rem 0 0; font-size: .88rem; color: #5A5654; }

/* ---- Reihenseite --------------------------------------------------- */

.kal-reihe__traeger {
  display: flex; align-items: center; gap: .8rem;
  margin: 0 0 1.2rem;
}
.kal-reihe__logo { height: 2.6rem; width: auto; max-width: 9rem; object-fit: contain; }
.kal-reihe__label { display: block; font-size: .8rem; color: #5A5654; }
.kal-reihe__zurueck { margin: 2.5rem 0 0; }

/* ---- Schmale Schirme: aus den Kästchen werden Symbole ---------------
   Sieben Spalten auf 340 Pixeln lassen keine Schrift zu, die noch lesbar
   wäre. Die Namen stehen in der Legende und in der Liste darunter.

   0,8 statt 0,72 rem wie bei den Hebammen: Bei zehn Kennungen sind Stern
   und Kreuz dabei, und die brauchen ein paar Pixel mehr, um Stern und
   Kreuz zu bleiben. */
@media (max-width: 720px) {
  .kal__tag { min-height: 3.6rem; padding: .2rem .15rem; align-items: center; }
  .kal__zahl { align-self: flex-start; font-size: .75rem; }
  .kal__eintraege.kal__eintraege {
    flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 3px;
  }
  .kal__chip {
    width: .8rem; height: .8rem; padding: 0; border: 0;
    background: var(--kal-voll);
    border-radius: var(--kal-rund, 0);
    clip-path: var(--kal-form, none);
  }
  /* Abgesagt: Durchstreichen wirkt an einer Form nicht. Stattdessen
     deutlich blasser — zusammen mit dem title-Attribut und der Liste
     darunter reicht das. */
  .kal__chip--aus { opacity: .35; text-decoration: none; }
  .kal__chip__text { display: none; }
  .kal__legende { font-size: .82rem; gap: .4rem 1rem; }
}

/* ---- Neutrale Kennung 0 ---------------------------------------------
   Für Termine ohne Veranstalterangabe. Die gibt es — Termine von
   allgemeinem Interesse, zu denen niemand ausdrücklich einlädt — und sie
   sind kein Versäumnis. Deshalb ein eigener, ruhiger Ton statt einer
   Ersatzfarbe aus der Reihe der Bündnisse.

   Gerechnet gegen Weiß und Text #1C1B1A:
     Fläche zu Text  10,8:1
     Symbol zu Weiß   3,7:1
     Balken zu Fläche 3,1:1

   Die Form ist ein liegender Balken: neutral und mit keiner der zehn
   Bündnisformen zu verwechseln.
   ------------------------------------------------------------------- */
.kal-kennung-0 { --kal-flaeche:#CFCCC9; --kal-rand:#76706B; --kal-voll:#8B857E;
                 --kal-rund:0; --kal-form:polygon(0 35%, 100% 35%, 100% 65%, 0 65%); }

/* Hinweis an die Redaktion, sichtbar nur für Angemeldete. Bewusst kein
   Warnrot: Ein Veranstalter außerhalb der Bündnisliste ist der Normalfall,
   kein Fehler. */
.kal-notiz {
  margin: 1rem 0 0; padding: .8rem 1rem;
  border-left: 4px solid #6E93B8; background: #F7F6F4;
  font-size: .9rem; color: #1C1B1A;
}
.kal-notiz code {
  padding: .05rem .3rem; background: #FFFFFF;
  border: 1px solid #DDDAD6; border-radius: 3px; font-size: .92em;
}

/* ---- Gemeinsame Termine ---------------------------------------------
   Ein Termin kann von mehreren Bündnissen getragen werden. Im Raster
   trägt der Randbalken beziehungsweise das Zeichen den ERSTEN; die
   übrigen stehen daneben.

   Zwei Elemente, weil zwei Ansichten: Am Schirm zeigt das Kästchen
   Uhrzeit und Titel, dort passt eine Punktreihe darunter. Am Telefon IST
   das Kästchen das Zeichen — dort können die übrigen nur daneben stehen.
   Jedes ist in der anderen Ansicht verborgen.
   ------------------------------------------------------------------- */

/* Am Schirm: Punktreihe unter dem Titel im Kästchen. */
.kal__chip__mehr {
  display: flex; flex-wrap: wrap; gap: 2px;
  margin-top: 2px;
}
.kal__chip__mehr__punkt {
  width: .42rem; height: .42rem; flex: 0 0 auto;
  background: var(--kal-voll);
  border-radius: var(--kal-rund, 0);
  clip-path: var(--kal-form, none);
}

/* Am Schirm nicht gebraucht — dort steht die Punktreihe im Kästchen. */
.kal__zusatz { display: none; }

@media (max-width: 720px) {
  /* Der Eintrag wird zur Zeile: Zeichen des Hauptveranstalters, dann die
     der übrigen. So bleiben die Zeichen EINES Termins beieinander, statt
     quer über das Tagesfeld zu wandern. */
  .kal__eintraege li { display: flex; align-items: center; gap: 2px; }

  .kal__zusatz { display: flex; align-items: center; gap: 2px; }
  .kal__zusatz__zeichen {
    width: .8rem; height: .8rem; flex: 0 0 auto;
    background: var(--kal-voll);
    border-radius: var(--kal-rund, 0);
    clip-path: var(--kal-form, none);
  }
}

/* Veranstalter in der Terminliste: Logo oder Zeichen, dann der Name.
   Mehrere stehen nebeneinander und brechen zusammen um. */
.kal-liste__wer {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-right: .6rem;
}

/* ---- Veranstaltersicht ----------------------------------------------
   Ein Termin gehört seinen VERANSTALTERN, nicht der Seite, auf der jemand
   ihn eingetragen hat. ?wer=<name> zeigt alles, was einen Veranstalter
   betrifft — quer durch alle Reihen.
   ------------------------------------------------------------------- */

.kal-wer {
  display: flex; align-items: center; flex-wrap: wrap; gap: .6rem;
  margin: 0 0 1.2rem; padding: .7rem 1rem;
  background: #F7F6F4; border: 1px solid #DDDAD6; border-radius: 4px;
  font-size: .95rem;
}
.kal-wer > span:last-of-type { flex: 1 1 14rem; }

/* Der Name in der Legende führt zur Veranstaltersicht. Der gerade
   gefilterte steht ohne Verweis da — ein Verweis auf die Seite, auf der
   man schon ist, führt in die Irre. */
.kal__legende__name { text-decoration: none; }
.kal__legende__name:hover { text-decoration: underline; }
.kal__legende--aktiv { font-weight: 700; }

.kal-reihe__name { margin-right: .2rem; }

/* Warnung bei möglicherweise doppelt eingetragenen Terminen. Etwas
   dringlicher als die blaue Notiz, aber immer noch kein Warnrot: Es KANN
   ein Doppeleintrag sein, es kann auch einfach ein voller Abend sein. */
.kal-notiz--warnung { border-left-color: #C39A4A; }
.kal-notiz p { margin: 0 0 .5rem; }
.kal-notiz p:last-child { margin-bottom: 0; }
.kal-notiz ul { margin: .4rem 0 .6rem; padding-left: 1.2rem; }
.kal-notiz li { margin: .2rem 0; }

/* Hinweis, wenn das Auswahlformular leer abgeschickt wurde. Kein Warnrot:
   Nichts anzukreuzen ist ein Versehen, kein Fehler. */
.kal-form__leer {
  margin: 1.2rem 0 0; padding: .7rem 1rem;
  border-left: 4px solid #C39A4A; background: #F7F6F4;
  font-size: .95rem;
}
.kal-form__leer:focus-visible { outline: 3px solid #F68714; outline-offset: 2px; }

/* ---- Übersicht der Veranstalter -------------------------------------
   Nur für angemeldete Redaktion. Ein Veranstalter wird nirgends angelegt,
   er entsteht aus seinem Namen — deshalb braucht es eine Stelle, an der
   die Schreibweisen zum Kopieren stehen.

   <details> ist reines HTML: aufklappbar ohne eine Zeile JavaScript.
   ------------------------------------------------------------------- */

.kal-uebersicht {
  margin: 1rem 0 0; padding: .3rem 1rem .8rem;
  background: #F7F6F4; border: 1px solid #DDDAD6; border-radius: 4px;
  font-size: .9rem;
}
.kal-uebersicht > summary {
  padding: .5rem 0; cursor: pointer; font-weight: 700;
}
.kal-uebersicht__hinweis { margin: .6rem 0; color: #5A5654; }

/* Auf schmalen Schirmen läuft eine fünfspaltige Tabelle aus dem Kasten.
   Scrollen ist hier das kleinere Übel als Umbrechen: Die Adressen sollen
   in einer Zeile stehen, damit man sie am Stück kopieren kann. */
.kal-uebersicht__tabelle {
  width: 100%; border-collapse: collapse; margin: .5rem 0;
  display: block; overflow-x: auto;
}
.kal-uebersicht__tabelle th,
.kal-uebersicht__tabelle td {
  padding: .4rem .6rem; text-align: left; vertical-align: top;
  border-bottom: 1px solid #DDDAD6;
}
.kal-uebersicht__tabelle th {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .04em;
  color: #5A5654; white-space: nowrap;
}
.kal-uebersicht__tabelle code {
  padding: .1rem .35rem; background: #FFFFFF;
  border: 1px solid #DDDAD6; border-radius: 3px;
  font-size: .9em; white-space: nowrap;
}
.kal-uebersicht__reihen {
  display: block; margin-top: .2rem; font-size: .85em; color: #5A5654;
}


/* ===================================================================
   Bündniskalender — zwei Kanäle statt einem

   Buchstaben sagen WER, Farbe sagt WAS. Vorher trugen Farbe und Form
   gemeinsam nur „wer", und bei mehr als zehn Veranstaltern war damit
   Schluss: Es gibt keine zwanzig unterscheidbaren Formen bei dreizehn
   Pixeln. Buchstaben skalieren beliebig — und weil sie die Identität
   tragen, wird die Farbe frei für die Art des Termins.

   Die Regeln stehen NACH dem alten Abschnitt und überstimmen ihn. Die
   Klassen kal-kennung-0 bis -10 werden nicht mehr benutzt; sie stehen
   noch oben und können bei Gelegenheit weg.
   =================================================================== */

/* ---- Die sieben Arten -----------------------------------------------
   Gerechnet gegen Text #1C1B1A und weißen Zellgrund. Die Fläche trägt
   jetzt Text statt nur Farbe, deshalb mindestens 7:1 statt 4,5:1 —
   erreicht werden 9,5 bis 12,4:1. Der Balken liegt über 3:1 gegen die
   Fläche.

   Kein Orange (#F68714): gegen Weiß 2,5:1.
   ------------------------------------------------------------------- */
.kal-art-treffen    { --art-flaeche:#B7E1B7; --art-rand:#378637; }
.kal-art-planung    { --art-flaeche:#B7D0E1; --art-rand:#40759C; }
.kal-art-kundgebung { --art-flaeche:#E8B9B0; --art-rand:#B24934; }
.kal-art-info       { --art-flaeche:#E8DAB0; --art-rand:#937725; }
.kal-art-fest       { --art-flaeche:#E1B7D3; --art-rand:#AA4689; }
.kal-art-mahnwache  { --art-flaeche:#C9BADE; --art-rand:#7B56AE; }
.kal-art-sonstiges  { --art-flaeche:#CFCCC9; --art-rand:#76706B; }

/* ---- Das Kästchen im Raster ----------------------------------------- */

.kal__chip.kal__chip {
  display: block; max-width: 100%;
  padding: 2px 3px; border-radius: 3px;
  border-left: 3px solid var(--art-rand, #76706B);
  background: var(--art-flaeche, #CFCCC9);
  color: #1C1B1A;
  font-size: .62rem; line-height: 1.25;
  text-decoration: none;
  clip-path: none;
  width: auto; height: auto;
  overflow: hidden;
}

/* ---- Die Plaketten mit den Kürzeln ---------------------------------- */

.kal__marken {
  display: flex; flex-wrap: wrap; gap: 2px;
  margin-bottom: 1px;
}
.kal__marke {
  display: inline-block;
  padding: 0 2px;
  border-radius: 2px;
  background: rgb(255 255 255 / .62);
  color: #1C1B1A;
  font-size: .56rem; font-weight: 700;
  letter-spacing: .02em; line-height: 1.5;
  white-space: nowrap;
}
/* Wer einlädt, steht vorn und kräftiger — im Raster ist das die einzige
   Stelle, an der sich Gastgeber und Mitwirkende unterscheiden lassen. */
.kal__marke--gastgeber { background: rgb(255 255 255 / .95); }
.kal__marke--mehr { background: none; font-weight: 400; }

/* In Legende und Liste steht die Plakette ohne farbigen Grund dahinter,
   also braucht sie einen eigenen. */
.kal__marke--legende {
  background: #EDEAE7; border: 1px solid #DDDAD6;
  padding: .05rem .3rem; font-size: .75rem;
}
.kal__marke--gross {
  background: #EDEAE7; border: 1px solid #DDDAD6;
  padding: .3rem .6rem; font-size: 1.2rem; border-radius: 4px;
}

/* ---- Legenden ------------------------------------------------------- */

.kal__legende-block { margin: .9rem 0 0; }
.kal__legende-titel {
  margin: 0 0 .3rem; font-size: .8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: #5A5654;
}

/* Der Punkt zeigt jetzt eine ART, nicht mehr einen Veranstalter — also
   ein schlichtes Rechteck in der Farbe der Art, ohne clip-path. */
.kal__punkt.kal__punkt {
  flex: 0 0 auto;
  width: 1rem; height: 1rem;
  border: 1px solid var(--art-rand, #76706B);
  background: var(--art-flaeche, #CFCCC9);
  border-radius: 2px;
  clip-path: none;
}

/* ---- Terminliste ---------------------------------------------------- */

.kal-liste__art {
  display: inline-block;
  padding: .05rem .4rem; border-radius: 3px;
  border-left: 3px solid var(--art-rand, #76706B);
  background: var(--art-flaeche, #CFCCC9);
  color: #1C1B1A; font-size: .8rem; font-weight: 700;
}
.kal-liste__kennung { margin: .3rem 0 0; font-size: .8rem; color: #5A5654; }
.kal-liste__kennung code {
  padding: .05rem .3rem; background: #F7F6F4;
  border: 1px solid #DDDAD6; border-radius: 3px;
}
.kal-wer__verweise { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; }

/* ---- Schmale Schirme ------------------------------------------------
   Vom Kästchen bleiben die Plaketten übrig. Anders als bei den Symbolen
   vorher ist das kein Informationsverlust: Das Kürzel sagt weiterhin,
   wer einlädt, und die Farbe, was stattfindet.

   Die Zellhöhe wächst dadurch etwas. Wenn es zu eng wird, ist die
   Schriftgröße der Plakette die Stellschraube.
   ------------------------------------------------------------------- */
@media (max-width: 720px) {
  .kal__tag { min-height: 4rem; align-items: stretch; }

  .kal__eintraege.kal__eintraege {
    flex-direction: column; gap: 2px;
  }
  .kal__eintraege li { display: block; }

  .kal__chip.kal__chip {
    padding: 1px 2px; border-left-width: 3px;
  }
  .kal__marken { gap: 1px; margin: 0; }
  .kal__marke { font-size: .58rem; padding: 0 1px; }

  .kal__chip--aus { opacity: .45; text-decoration: none; }
  .kal__chip__text { display: none; }
}

/* Kasten „hier bist du als Mitveranstalter genannt". Kein Warnton: Genannt
   zu werden ist der Normalfall, nicht der Ausnahmefall. Er steht nur da,
   damit niemand die Kennung aus der langen Liste heraussuchen muss. */
.kal-einladung { border-left-color: #40759C; }
.kal-einladung code {
  display: inline-block; margin-top: .15rem;
  padding: .05rem .35rem; background: #FFFFFF;
  border: 1px solid #DDDAD6; border-radius: 3px;
  font-size: .9em; overflow-wrap: anywhere;
}

/* ---- Filterkasten ---------------------------------------------------
   Über dem Raster, nicht darunter. Die Legende unter dem Kalender ist ein
   Schlüssel — sie erklärt, was man sieht. Womit man bestimmt, was man
   sieht, gehört davor, und das Zurücksetzen dorthin, wo auch ausgewählt
   wird. Vorher lag beides an verschiedenen Enden der Seite.
   ------------------------------------------------------------------- */

.kal-filter {
  margin: 0 0 1.2rem;
  padding: .9rem 1.1rem;
  background: #F7F6F4; border: 1px solid #DDDAD6; border-radius: 4px;
}
.kal-filter fieldset { border: 0; padding: 0; margin: 0; }
.kal-filter__titel {
  padding: 0; margin: 0 0 .5rem;
  font-size: .8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: #5A5654;
}

/* Mehrspaltig, damit zwanzig Veranstalter nicht zwanzig Zeilen brauchen.
   Bei 15rem Mindestbreite passen auf dem Schirm drei bis vier Spalten,
   am Telefon bleibt eine. */
.kal-filter__liste.kal-filter__liste {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: .2rem .9rem;
  list-style: none; margin: 0; padding: 0;
}
.kal-filter__liste > li::before,
.kal-filter__liste > li::marker { content: none; display: none; }
.kal-filter__liste li { display: flex; align-items: center; gap: .45rem; margin: 0; }
.kal-filter__liste label {
  display: flex; align-items: center; gap: .4rem;
  cursor: pointer; font-size: .92rem;
}
.kal-filter__liste input { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; }
.kal-filter__zahl { color: #5A5654; font-size: .82rem; }

.kal-filter__knoepfe {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-top: .8rem; padding-top: .7rem; border-top: 1px solid #DDDAD6;
}
.kal-filter__stand { margin: .6rem 0 0; font-size: .92rem; }

/* ---- „Du musst noch drücken" ----------------------------------------
   Wer ein Kästchen umstellt, sieht sonst nichts: Der Kalender zeigt
   weiterhin die alte Auswahl, und der Knopf steht unauffällig daneben.

   Erkannt wird das ohne JavaScript. `[checked]` ist das ATTRIBUT, wie der
   Server es geliefert hat — es ändert sich beim Klicken nicht. `:checked`
   ist der JETZIGE Zustand. Weichen beide ab, hat jemand etwas verstellt:

     input[checked]:not(:checked)      war an, ist jetzt aus
     input:not([checked]):checked      war aus, ist jetzt an

   `:has()` trägt das nach oben an das Formular. Browser ohne `:has()`
   zeigen nichts zusätzlich — der Knopf sieht aus wie immer und tut
   dasselbe. Nichts geht verloren, es fehlt nur der Wink.

   Keine Bewegung, kein Blinken: Der Kasten steht ohnehin im Blickfeld,
   und eine Animation wäre hier Lärm.
   ------------------------------------------------------------------- */

.kal-filter__geaendert {
  display: none;
  margin: .8rem 0 0; padding: .55rem .8rem;
  border-left: 4px solid #C39A4A; background: #FFFFFF;
  font-size: .9rem;
}

.kal-filter:has(input[type="checkbox"][checked]:not(:checked)) .kal-filter__geaendert,
.kal-filter:has(input[type="checkbox"]:not([checked]):checked) .kal-filter__geaendert {
  display: block;
}

/* Der Ring ist bernsteinfarben, nicht orange: Orange ist in diesem Theme
   der Fokusrahmen, und zwei Bedeutungen auf einer Farbe verwirren. */
.kal-filter:has(input[type="checkbox"][checked]:not(:checked)) .kal-filter__anzeigen,
.kal-filter:has(input[type="checkbox"]:not([checked]):checked) .kal-filter__anzeigen {
  box-shadow: 0 0 0 3px #C39A4A;
}

/* ---- Zustand „niemand ausgewählt" -------------------------------------
   Ein leerer Kalender ohne Erklärung sieht aus wie ein kaputter. Beide
   Sätze sagen deshalb, warum nichts da ist und was zu tun ist.

   Bewusst grau und nicht rot: Es ist kein Fehler, sondern ein Zustand,
   den jemand absichtlich hergestellt hat. Rot ist auf dieser Seite den
   Warnungen für die Redaktion vorbehalten.
   ------------------------------------------------------------------- */

.kal-filter__stand--leer {
  padding: .5rem .7rem;
  border-left: 4px solid #76706B;
  background: #F3F1EF;
}

.kal-nichts {
  margin: 2rem 0;
  padding: 1rem 1.1rem;
  border-left: 4px solid #76706B;
  background: #F3F1EF;
  font-size: 1rem;
}

/* ---- Zwei Umschalter in einer Zeile ---------------------------------
   Welche Termine, und in welcher Reihenfolge — zwei verschiedene Fragen,
   deshalb ein sichtbarer Abstand dazwischen statt nur einem Leerzeichen.

   Der Punkt ist `aria-hidden`; für die Sprachausgabe trennt die Pause
   nach dem Verweis ausreichend, vorgelesen wäre er nur Geräusch.
   ------------------------------------------------------------------- */

.kal-umschalten__trenner {
  display: inline-block;
  margin: 0 .5rem;
  color: #8B8580;
}

/* Die geltende Reihenfolge steht fett und ohne Verweis da — dieselbe
   Regel wie in der Legende unter dem Kalender. */
.kal-umschalten strong { font-weight: 700; }

/* ---- Ankersprung: Luft über dem Ziel --------------------------------
   Beim Blättern durch die Monate springt der Browser auf `#kalender`.
   Er setzt dabei die Oberkante des Kalenders exakt an den oberen
   Bildrand — die Blätterknöpfe liegen also auf der allerersten Zeile.

   Das geht so lange gut, wie sich über dem Kalender nichts mehr ändert.
   Tut es aber: Schriften werden nachgeladen und ersetzen die
   Ersatzschrift, dabei kann eine Überschrift von zwei Zeilen auf eine
   zusammenfallen. Alles darunter rutscht hoch — und die Knöpfe sind
   weg, obwohl der Sprung selbst richtig war.

   `scroll-margin-top` hält einen Abstand frei, der so etwas auffängt.
   6rem sind rund zwei Textzeilen; man sieht nach dem Sprung das Ende
   des Filterkastens und darunter die Knöpfe. Reicht es nicht, ist es
   diese eine Zahl.
   ------------------------------------------------------------------- */

.kal,
#termine,
.kal-filter { scroll-margin-top: 6rem; }

/* ---- Logo des Veranstalters im Titelbalken --------------------------
   Das Bild steht IN der Überschrift, nicht daneben: So erbt es deren
   Zeile und deren Größe, und der Seitenkopf braucht keine eigene
   Anordnung, die alle anderen Seiten mit betreffen würde.

   Die weiße Fläche darunter ist kein Zierrat. Der Balken ist kräftig
   orange; Logos sind fast immer für weißen Grund gezeichnet und stehen
   darauf entweder falsch oder gar nicht. Die Fläche macht die Sache für
   jedes Logo gleich — außer für weiße, und die wären auf Orange ohnehin
   ein Sonderfall.
   ------------------------------------------------------------------- */

.seiten-kopf__marke {
  height: 1.25em;
  width: auto;
  max-width: 8em;
  margin-right: .45em;
  vertical-align: -.22em;
  object-fit: contain;
}

@media (max-width: 620px) {
  .seiten-kopf__marke { height: 1.1em; max-width: 5em; }
}

/* Fehlendes Logo in der Redaktionsübersicht — grau, nicht rot: Es ist
   eine offene Aufgabe, keine Störung. */
.kal-uebersicht__fehlt { color: #5A5654; font-style: italic; }

/* ---- Infotext je Termin ---------------------------------------------
   `<details>` ist reines HTML, aufklappbar ohne eine Zeile JavaScript —
   dieselbe Lösung wie bei der Redaktionsübersicht weiter oben.

   Zu ist die Vorgabe: Die Liste soll überfliegbar bleiben. Wer mehr
   will, macht auf.
   ------------------------------------------------------------------- */

.kal-liste__mehr { margin: .4rem 0 0; }

.kal-liste__mehr > summary {
  cursor: pointer;
  font-size: .88rem;
  color: #5A5654;
  width: fit-content;
}
.kal-liste__mehr > summary:hover { color: var(--mc-rot); }

.kal-liste__text {
  margin: .5rem 0 0;
  padding: .1rem 0 .1rem .8rem;
  border-left: 2px solid #DDDAD6;
  font-size: .92rem;
}
.kal-liste__text > :first-child { margin-top: 0; }
.kal-liste__text > :last-child { margin-bottom: 0; }

/* ---- „Führt nach draußen" -------------------------------------------
   Dass ein Verweis die Seite verlässt, muss man sehen können, BEVOR man
   klickt. Das Symbol trägt die Auskunft für Sehende, der versteckte Satz
   daneben für die Sprachausgabe — keines von beiden allein genügt.

   `currentColor`: Das Symbol folgt der Linkfarbe, auch beim Überfahren
   und im Fokus, ohne eine zweite Regel.
   ------------------------------------------------------------------- */

.kal-liste__extern {
  width: .85em;
  height: .85em;
  margin-left: .25em;
  vertical-align: -.08em;
}

/* ---- Abo einer Terminauswahl ----------------------------------------
   Die aufgezählten Termine stehen über der Adresse, damit man vor dem
   Kopieren sieht, wofür sie gilt. Bei einer Adresse mit fünf Kennungen
   ist das sonst nicht zu erkennen.
   ------------------------------------------------------------------- */

.kal-abo__liste {
  margin: .6rem 0;
  padding-left: 1.1rem;
  font-size: .92rem;
}
.kal-abo__liste li { margin: .15rem 0; }

/* Der Sprung auf #abo braucht denselben Abstand wie die anderen Anker,
   sonst klebt die Überschrift am oberen Bildrand (siehe Update 081). */
#abo { scroll-margin-top: 6rem; }

/* ---- Herunterladen und Abonnieren sind zwei Dinge -------------------
   Vorher standen drei Knöpfe in einer Reihe, die zwei grundverschiedene
   Sachen taten. Jetzt trennt eine Linie die beiden Blöcke, und über
   jedem steht, was er tut.

   Die Erklärung ist auf rund 46 Zeichen Zeilenlänge begrenzt. Über die
   volle Breite eines Bildschirms gelesen, findet das Auge den
   Zeilenanfang nicht mehr — und ungelesen nützt die beste Erklärung
   nichts.
   ------------------------------------------------------------------- */

.kal-form__abschluss { margin: 1.5rem 0 0; }

.kal-form__gruppe {
  padding-top: 1.1rem;
  border-top: 1px solid #DDDAD6;
}
.kal-form__gruppe + .kal-form__gruppe { margin-top: 1.8rem; }

.kal-form__titel { margin: 0 0 .35rem; font-size: 1rem; }

.kal-form__erklaerung {
  margin: 0 0 .9rem;
  max-width: 46rem;
  font-size: .9rem;
  color: #5A5654;
}
.kal-form__erklaerung code { font-size: .95em; }

/* Die alte Regel trug Abstand und Linie selbst — die sitzen jetzt an der
   Gruppe. Hier bleibt nur die Reihe. */
.kal-form__knoepfe {
  display: flex; flex-wrap: wrap; gap: .7rem;
  margin: 0; padding-top: 0; border-top: 0;
}

/* Quark gestaltet <button> innerhalb eines Formulars und zieht es auf
   die volle Breite — deshalb standen die beiden Knöpfe als Balken
   untereinander, während der <a> daneben normal breit blieb.

   Die Klasse wird verdoppelt statt `!important` gesetzt: Das ergibt
   Spezifität 0-2-0 und gewinnt, ohne eine Tür zuzuschlagen. Steht im
   Grav-2-Leitfaden als Stolperstein, und es ist derselbe Griff wie an
   fünf anderen Stellen dieses Themes.

   Liegt es bei dir nicht an Quark, ändert die Regel nichts: `auto` ist
   ohnehin die Vorgabe. */
.kal-form__knoepfe .btn.btn {
  width: auto;
  flex: 0 0 auto;
}

/* ---- Die Knöpfe gleich hoch ------------------------------------------
   Ein `<button>` und ein `<a>` nebeneinander waren verschieden hoch.
   Warum genau, lässt sich ohne Gravs eigenes CSS vor Augen nicht sagen —
   Browser und Theme geben einem `<button>` eigene Schrift, eigenes
   Innenmaß und eine eigene Zeilenhöhe.

   Statt die Ursache zu raten, wird hier das Ergebnis festgeschrieben:
   Beide bekommen dieselben Maße ausdrücklich zugewiesen. Was vorher
   galt, spielt dann keine Rolle mehr.

   Verdoppelte Klasse statt `!important` — 0-2-0 schlägt Quark, ohne eine
   Tür zuzuschlagen. Steht als Stolperstein im Grav-2-Leitfaden.
   ------------------------------------------------------------------- */

.kal-form__knoepfe { align-items: stretch; }

.kal-form__knoepfe .btn.btn {
  width: auto;
  flex: 0 0 auto;
  box-sizing: border-box;
  padding: .5rem 1rem;
  border-width: 1px;
  border-style: solid;
  font-family: inherit;
  font-size: .9rem;
  line-height: 1.4;
  text-align: center;
}

/* ---- „So bekommst du eine andere Adresse" ---------------------------
   Drei Wege zum Abo, und bisher stand nur einer davon da. Vor allem
   fehlte der mittlere: dass der Filter OBEN die Adresse HIER UNTEN
   verändert. Darauf kommt von selbst niemand.

   Abgesetzt durch Linie und helleren Grund, damit es als Wegweiser
   lesbar ist und nicht als Fortsetzung des Fließtextes.
   ------------------------------------------------------------------- */

.kal-abo__wege {
  margin: 1.1rem 0 0;
  padding: .9rem 1rem;
  border-top: 1px solid #DDDAD6;
  background: #FFFFFF;
}

.kal-abo__wege h3 {
  margin: 0 0 .5rem;
  font-size: .95rem;
}

.kal-abo__wege ul {
  margin: 0;
  padding-left: 1.2rem;
  font-size: .9rem;
}

.kal-abo__wege li { margin: .35rem 0; }
.kal-abo__wege li::marker { color: #8B8580; }

/* ---- Zwei Knöpfe, einer davon mit langer Beschriftung ----------------
   Der zweite Knopf nennt die ausgewählten Veranstalter beim Namen. Das
   kann lang werden, und `flex: 0 0 auto` aus Update 093 verbietet dem
   Knopf zu schrumpfen — ohne Obergrenze schiebt er sich auf einem Handy
   aus dem Bild heraus.

   `max-width: 100%` lässt die Beschriftung umbrechen statt überlaufen.
   Dass der Knopf dadurch zweizeilig wird, macht die Reihe nicht wieder
   ungleich: `align-items: stretch` aus 093 zieht den kürzeren mit.
   ------------------------------------------------------------------- */

.kal-form__knoepfe .btn.btn {
  max-width: 100%;
  min-width: 0;
}

/* ---- „Andere Veranstalter wählen" -----------------------------------
   Der Sprung zurück zum Filterkasten, direkt bei der Aufzählung, auf die
   er sich bezieht. Stimmt die Liste der Veranstalter über der Adresse
   nicht, will man sie ändern — und nicht erst suchen, wo das ginge.

   Der Pfeil steht als Pseudo-Element davor, damit er nicht mitkopiert
   wird, wenn jemand den Absatz markiert.
   ------------------------------------------------------------------- */

.kal-abo__wechseln {
  margin: .4rem 0 .9rem;
  font-size: .9rem;
}

.kal-abo__wechseln a::before {
  content: "↑";
  margin-right: .35rem;
  display: inline-block;
}

/* ---- Die Adresse steht jetzt UNTER der Erklärung --------------------
   Wer etwas kopiert, soll vorher wissen, was er kopiert. Damit rückt der
   Adresskasten vom Absatz darüber ab statt von der Überschrift.
   ------------------------------------------------------------------- */

.kal-abo__adresse { margin-top: .9rem; }

/* ---- Zweiter Anlauf: die ungleich hohen Knöpfe ----------------------
   Update 093 hat das NICHT behoben. Im Bildschirmfoto vom 1. Oktober
   gemessen:

     <button class="btn">   39–40 px hoch
     <a class="btn">        57 px hoch

   Beide beginnen bei derselben Oberkante — `align-items: stretch` greift
   also an der einen Kante und an der anderen nicht. Das passiert, wenn
   der kürzere eine FESTE Höhe hat: eine feste Höhe schlägt `stretch`,
   und der Knopf kann nicht mitwachsen.

   Welche Regel sie setzt, kann ich ohne Quarks eigenes CSS nicht sagen.
   Statt sie zu suchen, wird sie hier unschädlich gemacht: Höhe wieder
   auf „ergibt sich", Unter- und Obergrenze aufgehoben, Dehnen
   ausdrücklich an jedem Element. Danach entscheidet die Reihe, und
   beide sind gleich hoch — unabhängig davon, was vorher galt.
   ------------------------------------------------------------------- */

.kal-form__knoepfe { align-items: stretch; }

.kal-form__knoepfe .btn.btn {
  height: auto;
  min-height: 0;
  max-height: none;
  align-self: stretch;
}

/* ---- Die Adresse mit einem Klick markieren ---------------------------
   Ein Knopf „kopieren" braucht `navigator.clipboard`, also JavaScript —
   und der Kalender kommt bewusst ohne aus. `user-select: all` ist das,
   was ohne auskommt: Ein Klick markiert die ganze Adresse, Strg+C holt
   sie. Zwei Tasten statt einer, dafuer keine Zeile Skript.
   ------------------------------------------------------------------- */

.kal-abo__adresse code { -webkit-user-select: all; user-select: all; }

.kal-abo__kopieren {
  margin: .35rem 0 0;
  font-size: .85rem;
  color: #5A5654;
}

.kal-abo__kopieren kbd,
.kal-drucken kbd {
  padding: .05rem .35rem;
  border: 1px solid #DDDAD6;
  border-radius: 3px;
  background: #FFFFFF;
  font-family: inherit;
  font-size: .95em;
}

.kal-drucken {
  margin: 1.1rem 0 0;
  padding-top: .9rem;
  border-top: 1px solid #DDDAD6;
  font-size: .88rem;
  color: #5A5654;
}

/* ====================================================================
   DRUCKFASSUNG — „als PDF herunterladen" ohne PDF-Bibliothek

   Ein echter PDF-Knopf braeuchte auf dem Server eine PDF-Bibliothek,
   Composer und eine zweite Stelle, an der das Layout gepflegt wird.
   Jeder Browser kann es laengst; es kam bisher nur nichts Brauchbares
   dabei heraus, weil die Bedienoberflaeche mitgedruckt wurde.

   Was bleibt: Titel, Monatsuebersicht, Terminliste.
   Was geht: Filter, Umschalter, Blaetterknoepfe, Kaestchen, die beiden
   Knopfbloecke, der Abo-Kasten und der Druckhinweis selbst.

   Nur Klassen aus diesem Theme. Quarks eigenes CSS liegt mir nicht vor,
   und was ich nicht sehen kann, benenne ich nicht.
   ==================================================================== */

@media print {

  /* Alles, was nur zum Bedienen da ist */
  .kal-filter,
  .kal-umschalten,
  .kal__blaettern,
  .kal-liste__kaestchen,
  .kal-liste__ics,
  .kal-liste__kennung,
  .kal-form__abschluss,
  .kal-form__leer,
  .kal-abo,
  .kal-drucken,
  .seiten-kopf__logo { display: none; }

  /* Der Kopf bleibt, aber ohne Farbflaeche — das spart eine halbe
     Patrone und liest sich auf Papier besser. */
  .seiten-kopf {
    padding: 0 0 .5rem;
    border-bottom: 2px solid #000;
    background: none;
    color: #000;
  }
  .seiten-kopf h1 { color: #000; }
  .seiten-kopf__marke { max-height: 1.4em; }

  /* DAS RASTER DER EINTRAEGE NEU SETZEN — sonst bleibt vom Termin
     nichts uebrig.

     `.kal-liste__eintrag` ist ein Raster aus drei Spalten:
     `auto 3.6rem 1fr` fuer Kaestchen, Datum, Inhalt. `display: none` am
     Kaestchen nimmt dem Raster ein ELEMENT — Datum und Inhalt rutschen
     je eine Spalte nach links, und der Inhalt landet in der
     3.6rem-Spalte. Gemessen: 58 statt 1079 Pixel, der Text bricht auf
     einen Buchstaben je Zeile um.

     Und ein Eintrag bleibt beim Seitenwechsel zusammen. */
  .kal-liste__eintrag {
    grid-template-columns: 3.6rem 1fr;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .kal-liste__inhalt a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: .8em;
    word-break: break-all;
  }

  /* Die Monatsuebersicht nicht mitten durchreissen. Ist sie hoeher als
     eine Seite, ignoriert der Browser das von selbst. */
  .kal { break-inside: avoid; page-break-inside: avoid; }

  h2 { break-after: avoid; page-break-after: avoid; }

  /* Die Farben der Terminarten mitdrucken, wo der Browser es zulaesst.
     Tut er es nicht, bleiben die BUCHSTABEN — und die tragen seit
     Update 068 die Identitaet, nicht die Farbe. Die Uebersicht ist
     also auch in Schwarzweiss vollstaendig lesbar. */
  .kal__chip,
  .kal__punkt,
  .kal-liste__art {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Aufgeklappte Infotexte drucken ueberall mit. Zugeklappte nur dort,
     wo der Browser `::details-content` kennt — gemessen: Chromium ja,
     aelteres Firefox nein. Wer sichergehen will, klappt vor dem Drucken
     auf, was er braucht. */
  .kal-liste__mehr::details-content {
    content-visibility: visible;
    block-size: auto;
  }
  /* „Mehr dazu" ist auf Papier sinnlos — der Text steht ja da. Zeigt
     der Browser den Text nicht, faellt der Block ganz weg, und das
     ist sauberer als eine Aufforderung, die ins Leere geht. */
  .kal-liste__mehr > summary { display: none; }

  a { text-decoration: none; color: #000; }
}

/* ---- Sicherungsnetz fuers Listenraster -------------------------------
   Dasselbe Raster bricht auch ohne Druck zusammen, sobald die Liste
   einmal OHNE Kaestchen eingebunden wird — der Baustein kann das
   (`mit_auswahl: false`), heute nutzt es nur keine der drei Vorlagen.
   Eine Zeile nimmt die Falle heraus, bevor jemand hineintritt.
   ------------------------------------------------------------------- */

.kal-liste__eintrag:not(:has(.kal-liste__kaestchen)) {
  grid-template-columns: 3.6rem 1fr;
}

/* ---- Die Tastenkappen waren leer ------------------------------------
   Im Bildschirmfoto standen vier leere Rahmen statt „Strg", „C", „P".
   Die Ursache ist eine, die ich in 097 selbst gebaut habe: Ich habe
   Hintergrund, Rahmen und Schrift gesetzt — aber keine FARBE. `kbd`
   wird in diesem Theme nirgends gestaltet, die Farbe kam also von
   Quark, und das ist offenbar Weiss. Weiss auf Weiss.

   Die Lehre ist dieselbe wie bei den Knopfhoehen: Wer eine Eigenschaft
   eines fremden Bausteins umschreibt, schreibt den ganzen Satz neu,
   nicht die halbe Zeile. Hier also auch `color`.

   Verdoppelte Klasse, damit es nicht wieder an der Spezifitaet haengt.
   ------------------------------------------------------------------- */

.kal-abo__kopieren.kal-abo__kopieren kbd,
.kal-drucken.kal-drucken kbd {
  display: inline-block;
  padding: .05rem .35rem;
  border: 1px solid #BFB9B4;
  border-radius: 3px;
  background: #FFFFFF;
  color: #1C1B1A;
  font-family: inherit;
  font-size: .95em;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

/* ---- Die Monatsuebersicht gehoert nicht aufs Papier ------------------
   Dein Einwand stimmt: Das Raster zeigt EINEN Monat, die Liste reicht
   darueber hinaus. Auf dem Schirm ist das Raster zur Orientierung da und
   blaetterbar — auf Papier ist es ein willkuerlicher Ausschnitt neben
   einer vollstaendigen Liste.

   Mit dem Raster geht auch die Farblegende. Das kostet nichts: Die
   Terminart steht in der Liste als WORT in jedem Eintrag
   (`.kal-liste__art` mit `t.art_name`), nicht nur als Farbe.
   ------------------------------------------------------------------- */

@media print {
  .kal { display: none; }
}

/* ---- Der Druckhinweis steht jetzt oben ------------------------------
   Vorher stand er HINTER den beiden Bloecken und damit zwischen dem
   Knopf „Abo-Link erstellen" und dem Kasten, in dem die Adresse
   erscheint — also quer durch das Paar, das zusammengehoert. Mit der
   Datei hat er ebensowenig zu tun wie mit dem Abo; er gehoert ueber
   beide.

   Damit wird er zum ersten von drei Abschnitten und bekommt dieselben
   Masse wie `.kal-form__gruppe`: 1.5rem Abstand, 1.1rem Innenabstand
   oben, dieselbe Linie. Drei gleich gesetzte Abschnitte lesen sich als
   eine Reihe; zwei verschiedene Masse lesen sich als Versehen.

   Der ganze Satz wird neu geschrieben, nicht die halbe Zeile — die
   Lehre aus den leeren Tastenkappen in 098.
   ------------------------------------------------------------------- */

.kal-drucken {
  margin: 1.5rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid #DDDAD6;
  font-size: .88rem;
  line-height: 1.5;
  color: #5A5654;
}

/* Die Gruppe darunter bringt ihre eigene Linie mit. Ohne das hier
   staenden zwei Striche mit nur 1.5rem Luft dazwischen. */
.kal-drucken + .kal-form__gruppe {
  margin-top: 1.5rem;
}

/* ---- Tastenkuerzel nur, wo es eine Tastatur gibt --------------------
   Auf einem Telefon gibt es kein Strg+P und kein Strg+C. Die einzige
   Weiche, die ohne JavaScript auskommt, ist
   `(hover: hover) and (pointer: fine)` — und die ist eine VERMUTUNG,
   keine Tatsache. Gemessen in der Geraeteemulation:

     Schreibtisch mit Maus           hover=ja   fine=ja    → Kuerzel an
     iPhone, Pixel, iPad             hover=nein fine=nein  → Kuerzel aus
     Laptop mit Touchscreen          hover=nein fine=nein  → Kuerzel aus

   Der letzte Fall ist die Fehlzuendung: ein Geraet MIT Tastatur, das
   auf der Tippseite landet.

   Deshalb ist die Vorgabe `display: none`. Der Satz ohne Kuerzel ist
   vollstaendig und ueberall richtig — ueber das Menue des Browsers
   drucken geht auf jedem Geraet, langes Tippen markiert ueberall.
   Das Kuerzel kommt nur dort DAZU, wo eine Tastatur wahrscheinlich ist.

   Geht die Vermutung daneben, fehlt eine Abkuerzung. Sie fuehrt nie in
   die Irre, und bei einem Browser, der die Abfrage gar nicht kennt,
   ebensowenig. Das ist die Richtung, in die ein Irrtum fallen darf.
   ------------------------------------------------------------------- */

.nur-tastatur { display: none; }

@media (hover: hover) and (pointer: fine) {
  .nur-tastatur { display: inline; }
}

/* Im Druck steht sowieso nichts davon — beide Absaetze sind dort
   ausgeblendet. Die Regel hier ist nur fuer den Fall, dass einer von
   ihnen spaeter doch gedruckt werden soll: Auf Papier ist ein
   Tastenkuerzel Unsinn. */
@media print {
  .nur-tastatur { display: none; }
}

/* ---- Der Knopf „Auswahl übernehmen" wird laut, wenn es ihn braucht ---

   WARUM ER NICHT ABGESCHALTET WIRD

   Gewünscht war: ausgegraut, solange nichts verstellt ist. Abschalten
   kann CSS aber nicht — `disabled` ist ein Attribut, kein Stil, und das
   steht beim Ausliefern fest.

   Die beiden Wege dorthin sind beide schlechter als keiner:

   `pointer-events: none` sperrt die Maus, nicht die Tastatur. Der Knopf
   wäre für den einen tot und für den anderen lebendig, und ein
   Vorleseprogramm nennt ihn weiter einen ganz normalen Knopf. Ein Knopf,
   der tot AUSSIEHT und es nicht ist, ist schlimmer als einer, der immer
   lebt.

   `disabled` beim Ausliefern setzen wäre die Falle: Frisch geladen ist
   nichts verstellt, der Knopf käme also abgeschaltet an — und ohne
   JavaScript könnte ihn das erste Häkchen nicht wieder einschalten. Die
   Seite wäre kaputt.

   Also wird nicht der Zustand geändert, sondern der RANG: ruhig, solange
   nichts zu tun ist; kräftig, sobald doch. Das liest sich wie
   „ausgegraut und aktiv" und lügt dabei niemanden an — der Knopf tut in
   beiden Fassungen dasselbe.

   KONTRASTE GERECHNET, NICHT GESCHÄTZT
     Rand #8B8580 gegen den Kastengrund #F7F6F4   3,4:1  (Form, ≥3 nötig)
     Schrift #5A5654 auf der Füllung #EDEBE8      6,1:1  (Text, ≥4,5 nötig)
     laut: Schrift #1C1B1A auf Orange #F68714     6,9:1

   @SUPPORTS ALS REISSLEINE
   Die ganze Dämpfung steht in `@supports selector(:has(*))`. Ein
   Browser, der `:has()` nicht kennt, könnte den Knopf sonst nie laut
   werden lassen und zeigte ihn für immer gedämpft. So bekommt er den
   bisherigen, kräftigen Knopf — dieselbe Richtung wie bei den
   Tastenkürzeln in Update 100: Ein Irrtum darf etwas weglassen, nie in
   die Irre führen.
   ------------------------------------------------------------------- */

@supports selector(:has(*)) {

  /* Ruhezustand — nichts verstellt, nichts zu tun */
  .kal-filter__anzeigen.kal-filter__anzeigen {
    background: #EDEBE8;
    border: 1px solid #8B8580;
    color: #5A5654;
    font-weight: 600;
    box-shadow: none;
    transition: background .12s, color .12s, box-shadow .12s;
  }

  .kal-filter__anzeigen.kal-filter__anzeigen:hover {
    background: #E3E0DC;
    color: #1C1B1A;
  }

  /* Sobald ein Kästchen von dem abweicht, was der Server geliefert hat:
     `[checked]` ist das Attribut von damals, `:checked` der Zustand von
     jetzt. Weichen sie voneinander ab, ist etwas verstellt. */
  .kal-filter:has(input[type="checkbox"][checked]:not(:checked)) .kal-filter__anzeigen.kal-filter__anzeigen,
  .kal-filter:has(input[type="checkbox"]:not([checked]):checked) .kal-filter__anzeigen.kal-filter__anzeigen {
    background: #F68714;
    border-color: #C96F0C;
    color: #1C1B1A;
    /* Bernstein, nicht Orange: Orange ist in diesem Theme der
       Fokusrahmen, und zwei Bedeutungen auf einer Farbe verwirren. */
    box-shadow: 0 0 0 3px #C39A4A;
  }

  .kal-filter:has(input[type="checkbox"][checked]:not(:checked)) .kal-filter__anzeigen.kal-filter__anzeigen:hover,
  .kal-filter:has(input[type="checkbox"]:not([checked]):checked) .kal-filter__anzeigen.kal-filter__anzeigen:hover {
    background: #E07A0E;
  }
}

/* Wer Bewegung abbestellt hat, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  .kal-filter__anzeigen.kal-filter__anzeigen { transition: none; }
}

/* ---- Der Ruhezustand sieht jetzt wirklich abgeschaltet aus ----------

   Update 102 hat den Knopf nur GEDAEMPFT: Schrift #5A5654 auf #EDEBE8,
   das sind 6,1:1 — die Staerke von normalem Fliesstext. Ein Knopf mit
   voll lesbarer Schrift und sichtbarem Rand liest sich als benutzbar,
   auch wenn er blasser ist als sein Nachbar. Gewuenscht war aber das
   uebliche Bild eines abgeschalteten Knopfes, und das ist ein anderes.

   JETZT: Schrift #9B9590 auf #EDEBE8 = 2,5:1, Rand fast weg, kein
   Zeigefinger, keine Reaktion beim Darueberfahren. So sieht ein
   abgeschalteter Knopf aus, und so wird er gelesen.

   WAS DAS KOSTET, und warum es vertretbar ist

   Der Knopf ist NICHT abgeschaltet — er kann es nicht sein, siehe die
   Begruendung im Block von Update 102. Er sieht also schwaecher aus,
   als er ist, und 2,5:1 ist unter der Grenze von 4,5:1 fuer Text.

   Vertretbar ist das, weil im Ruhezustand nichts zu tun ist: Die
   Beschriftung traegt dort keine Auskunft, die jemand braeuchte. Sobald
   es etwas zu tun gibt, erscheint ueber dem Knopf der Hinweis „Die
   Auswahl wurde geaendert …" in voller Staerke und nennt den Knopf beim
   Namen — die Auskunft steht dann im Text, nicht in der Knopffarbe. Und
   der Knopf selbst springt im selben Moment auf 6,9:1.

   WCAG nimmt abgeschaltete Bedienelemente ausdruecklich vom
   Kontrastkriterium aus. Dieser hier ist es nicht, sieht aber so aus —
   deshalb steht der Preis hier aufgeschrieben und nicht im Kleingedruckten.

   Der Uebergang bleibt: Er macht den Sprung von grau auf orange
   sichtbar, statt ihn zu einem Austausch zu machen, den man uebersieht.
   ------------------------------------------------------------------- */

@supports selector(:has(*)) {

  .kal-filter__anzeigen.kal-filter__anzeigen {
    background: #EDEBE8;
    border: 1px solid #DDDAD6;
    color: #9B9590;
    font-weight: 600;
    box-shadow: none;
    cursor: default;
  }

  /* Kein Wechsel beim Darueberfahren: Jede Reaktion auf den Zeiger sagt
     „hier kann man draufdruecken" — genau das soll der Ruhezustand
     nicht sagen. Die Regel aus 102 wird damit zurueckgenommen. */
  .kal-filter__anzeigen.kal-filter__anzeigen:hover {
    background: #EDEBE8;
    color: #9B9590;
  }

  /* Erreichbar bleibt er trotzdem: Wer mit der Tastatur hierherkommt,
     sieht den Fokusrahmen wie ueberall. Ein Bedienelement, das man
     anwaehlen kann, muss man auch sehen koennen. */
  .kal-filter__anzeigen.kal-filter__anzeigen:focus-visible {
    color: #1C1B1A;
    border-color: #8B8580;
  }

  /* Sobald etwas verstellt ist, gilt wieder alles aus Update 102:
     kraeftiges Orange, schwarze Schrift, Bernsteinring. Hier nur das,
     was oben zurueckgenommen werden muss. */
  .kal-filter:has(input[type="checkbox"][checked]:not(:checked)) .kal-filter__anzeigen.kal-filter__anzeigen,
  .kal-filter:has(input[type="checkbox"]:not([checked]):checked) .kal-filter__anzeigen.kal-filter__anzeigen {
    border-color: #C96F0C;
    color: #1C1B1A;
    cursor: pointer;
  }

  .kal-filter:has(input[type="checkbox"][checked]:not(:checked)) .kal-filter__anzeigen.kal-filter__anzeigen:hover,
  .kal-filter:has(input[type="checkbox"]:not([checked]):checked) .kal-filter__anzeigen.kal-filter__anzeigen:hover {
    background: #E07A0E;
    color: #1C1B1A;
  }
}

/* ---- Warum 102 und 103 wirkungslos waren ----------------------------

   GEMESSEN, nicht vermutet. Die Seite laedt sieben Stylesheets; drei
   Plugin-Dateien kommen sogar nach custom.css. Keine davon faerbt
   Knoepfe — das war es also nicht. Es war die Spezifitaet, und zwar
   gegen zwei Regeln aus `quark2/css/theme.css`:

     button:not([role="button"]).btn      0-2-1
     .kal-filter__anzeigen.kal-filter__…  0-2-0   (meine, verliert)

   Das `:not([role="button"])` zaehlt mit — sein Argument geht in die
   Spezifitaet ein. Mein eigenes Auswertungsskript hatte `:not(...)`
   samt Inhalt weggeworfen und deshalb 0-1-1 gemeldet; der Fehler lag
   also auch in meinem Messgeraet.

   Nachgebaut und gemessen: ohne die Regel hier ist der Knopf
   rgb(246,135,20) und 1264 Pixel breit — genau das Bild aus der
   Rueckmeldung. Mit ihr gedaempft und normal breit.

   DIE VOLLE BREITE kommt aus `blades.min.css` (Pico): `button { width:
   100% }`. Dieselbe Falle, die `.kal-form__knoepfe` in Update 092
   bekommen hat und der Filterkasten nie.

   `width: auto` steht ABSICHTLICH ausserhalb von `@supports`: Eine
   richtige Breite ist in jedem Browser richtig, auch in einem ohne
   `:has()`. Nur das Umschalten der Farbe haengt an `:has()`.
   ------------------------------------------------------------------- */

.kal-filter__knoepfe .kal-filter__anzeigen.kal-filter__anzeigen {
  width: auto;
  flex: 0 0 auto;
}

@supports selector(:has(*)) {

  /* Ruhezustand — nichts verstellt, nichts zu tun.
     0-3-0 schlaegt die 0-2-1 aus dem Elternthema. */
  .kal-filter__knoepfe .kal-filter__anzeigen.kal-filter__anzeigen {
    background: #EDEBE8;
    border: 1px solid #DDDAD6;
    color: #9B9590;
    font-weight: 600;
    box-shadow: none;
    cursor: default;
  }

  /* Keine Reaktion auf den Zeiger: Jede waere die Zusage, dass hier
     etwas passiert. */
  .kal-filter__knoepfe .kal-filter__anzeigen.kal-filter__anzeigen:hover {
    background: #EDEBE8;
    color: #9B9590;
  }

  /* Mit der Tastatur bleibt er sichtbar. Was man anwaehlen kann, muss
     man sehen koennen. */
  .kal-filter__knoepfe .kal-filter__anzeigen.kal-filter__anzeigen:focus-visible {
    color: #1C1B1A;
    border-color: #8B8580;
  }

  /* Sobald ein Kaestchen von dem abweicht, was der Server geliefert hat. */
  .kal-filter:has(input[type="checkbox"][checked]:not(:checked)) .kal-filter__knoepfe .kal-filter__anzeigen.kal-filter__anzeigen,
  .kal-filter:has(input[type="checkbox"]:not([checked]):checked) .kal-filter__knoepfe .kal-filter__anzeigen.kal-filter__anzeigen {
    background: #F68714;
    border-color: #C96F0C;
    color: #1C1B1A;
    cursor: pointer;
    /* Bernstein, nicht Orange: Orange ist hier der Fokusrahmen. */
    box-shadow: 0 0 0 3px #C39A4A;
  }

  .kal-filter:has(input[type="checkbox"][checked]:not(:checked)) .kal-filter__knoepfe .kal-filter__anzeigen.kal-filter__anzeigen:hover,
  .kal-filter:has(input[type="checkbox"]:not([checked]):checked) .kal-filter__knoepfe .kal-filter__anzeigen.kal-filter__anzeigen:hover {
    background: #E07A0E;
    color: #1C1B1A;
  }
}

/* ---- Die beiden Verweise daneben --------------------------------------
   `Alle auswaehlen` und `Alle abwaehlen` tragen `.btn--linie`, das
   `background: transparent` setzt — und verlieren seit jeher gegen
   `a.btn` aus theme.css (0-1-1 gegen 0-1-0). Deshalb standen im
   Filterkasten drei gleich laute orange Knoepfe nebeneinander, und ein
   gedaempfter Hauptknopf daneben waere sinnlos: Der Rang entsteht aus
   dem Unterschied, nicht aus der Farbe allein.

   Hier NUR im Filterkasten berichtigt. `.btn--linie` theme-weit
   geradezuziehen aendert das Aussehen jeder Seite und ist eine
   Gestaltungsentscheidung — die gehoert nicht in ein Update, das einen
   Knopf ausgraut.

   Der Rand ist #8B8580 statt der blassen Themefarbe: 3,4:1 gegen den
   Kastengrund #F7F6F4. Ein Bedienelement braucht eine sichtbare Grenze.
   ------------------------------------------------------------------- */

.kal-filter__knoepfe a.btn.btn--linie {
  background: transparent;
  border: 1px solid #8B8580;
  color: #1C1B1A;
}

.kal-filter__knoepfe a.btn.btn--linie:hover {
  background: #EDEBE8;
}

/* ---- Gleiche Masse fuer alle drei Knoepfe im Filterkasten -----------

   GEMESSEN im Bildschirmfoto: Hauptknopf 56 px hoch, die beiden
   Verweise 83 px. Dieselbe Ursache wie bei der Farbe — `a.btn` aus
   theme.css hat 0-1-1 und schlaegt `.btn--klein` mit 0-1-0. Das
   kleinere Innenmass aus `.btn--klein` greift auf einem `<a>` also
   ueberhaupt nicht, waehrend es auf dem `<button>` greift.

   Deshalb wird hier nicht die Ursache gesucht, sondern das ERGEBNIS
   festgeschrieben, und zwar vollstaendig: Innenmass, Rahmenstaerke,
   Schrift, Schriftgroesse, Zeilenhoehe, Kastenmodell. Der halbe Satz
   war schon zweimal zu wenig — bei den Knopfhoehen in 093 und bei den
   leeren Tastenkappen in 098.

   `.kal-filter__knoepfe .btn.btn` ist 0-3-0 und schlaegt damit sowohl
   `a.btn` (0-1-1) als auch `button:not([role="button"]).btn` (0-2-1).
   ------------------------------------------------------------------- */

.kal-filter__knoepfe { align-items: stretch; }

.kal-filter__knoepfe .btn.btn {
  box-sizing: border-box;
  padding: .35rem .8rem;
  border-width: 1px;
  border-style: solid;
  font-family: inherit;
  font-size: .84rem;
  line-height: 1.4;
  width: auto;
  max-width: 100%;
  min-width: 0;
  flex: 0 0 auto;
  text-align: center;
}

/* ---- Orange heisst: kann man jetzt benutzen -------------------------

   `Alle auswaehlen` steht nur da, wenn gerade gefiltert ist; `Alle
   abwaehlen` nur, wenn nicht ohnehin alles abgewaehlt ist. Beide sind
   also immer dann sichtbar, wenn ein Druck etwas bewirkt — und damit
   nach derselben Regel orange, nach der der Hauptknopf grau ist,
   solange er nichts bewirkt.

   Update 104 hatte sie zu Umrissknoepfen gemacht. Das war der Versuch,
   Rang ueber die Form zu bauen; die einfachere und hier richtige Regel
   lautet: Farbe sagt, ob es etwas tut.

   FOLGE, die man wissen muss: Sobald jemand ein Kaestchen umstellt,
   sind alle drei orange. Den Hauptknopf unterscheidet dann der
   Bernsteinring — und der Hinweis darueber, der ihn beim Namen nennt.
   ------------------------------------------------------------------- */

.kal-filter__knoepfe a.btn.btn--linie {
  background: #F68714;
  border-color: #C96F0C;
  color: #1C1B1A;
  font-weight: 600;
  cursor: pointer;
}

.kal-filter__knoepfe a.btn.btn--linie:hover {
  background: #E07A0E;
  color: #1C1B1A;
}

/* ---- Die 16 Pixel: ein Aussenabstand -------------------------------

   GEFUNDEN, nach drei Fehlversuchen. Pico setzt in `blades.min.css`

       button { margin-bottom: 1rem; }

   Das sind die 16 Pixel. In einer Flex-Zeile bestimmt nicht die
   Rahmenbox die Zeilenhoehe, sondern die RANDBOX: Der <button> misst
   32 px und belegt mit seinem Abstand 48. Die Zeile wird also 48 hoch,
   und die <a> daneben — die keinen Abstand haben — werden von
   `align-items: stretch` auf diese 48 gestreckt.

   WARUM ES SO LANGE GEDAUERT HAT

   `getBoundingClientRect().height` misst Aussenabstaende NICHT. Die
   Messtabellen zeigten deshalb bei Innenmass, Rahmen, Schriftgroesse,
   Zeilenhoehe, Kastenmodell und Anzeigeart ueberall dieselben Werte —
   und trotzdem 32 gegen 48. Die einzige Boxeigenschaft, die nie
   gemessen wurde, war die, auf die es ankam.

   Nachgewiesen: Mit Picos Abstand ergeben sich 32/48/48, mit
   `margin: 0` ergeben sich 32/32/32. Dieselben Zahlen wie im Browser
   der Rueckmeldung.

   DASSELBE GILT FUER DIE ZWEITE KNOPFREIHE. Die ungleichen Hoehen
   unter der Terminliste, die seit Update 093 dreimal „behoben" wurden,
   haben genau diese Ursache: dort 38,16 gegen 54,16 — wieder 16 px.
   Beide Reihen werden hier zusammen in Ordnung gebracht.

   `gap` traegt in beiden Reihen den Abstand zwischen den Knoepfen; ein
   Aussenabstand am Knopf selbst wird nirgends gebraucht.
   ------------------------------------------------------------------- */

.kal-filter__knoepfe .btn.btn,
.kal-form__knoepfe .btn.btn {
  margin: 0;
}


/* ---- Der Einstiegskasten über dem Filter ----------------------------

   Was der Kalender ist und wofür man ihn brauchen kann. Steht über
   „Termine von", weil es vor der Bedienung kommt — und auf JEDER
   Ansicht, auch bei gefiltertem Link: Wer so einen Link geöffnet
   bekommt, ist der Einzige, der nicht weiss, was er vor sich hat.

   Kein Kasten wie der Filter, sondern Fliesstext mit einer Kante: Der
   Filterkasten ist ein Bedienelement und soll als solches erkennbar
   bleiben. Zwei gleich aussehende Kästen übereinander würden den
   Unterschied einebnen.

   Orange als Kante, nicht Bernstein: Bernstein ist in diesem Theme der
   Hinweis „du musst noch drücken". Zwei Bedeutungen auf einer Farbe
   verwirren.
   ------------------------------------------------------------------- */

.kal-einstieg {
  margin: 0 0 1.4rem;
  padding: 1rem 1.2rem;
  border: 1px solid #DDDAD6;
  border-left: 4px solid #F68714;
  border-radius: 4px;
  background: #FFFFFF;
}

.kal-einstieg > :first-child { margin-top: 0; }
.kal-einstieg > :last-child  { margin-bottom: 0; }

.kal-einstieg p { margin: .6rem 0; }

.kal-einstieg ul {
  margin: .6rem 0;
  padding-left: 1.2rem;
}

.kal-einstieg li { margin: .4rem 0; }
.kal-einstieg li::marker { color: #8B8580; }

/* Auf Papier zählt die Terminliste. Der Druckhinweis verspricht genau
   das — also darf hier nichts stehenbleiben, was ihn zur Lüge macht. */
@media print {
  .kal-einstieg { display: none; }
}


/* ====================================================================
   Update 108 — Wann links, Wo rechts
   ====================================================================

   Vorher stand das Datum zweimal in derselben Zeilenhoehe: links als
   Block, rechts noch einmal als Satz („30.10.2026, 14:00 bis 20:00 Uhr
   · im EWE Forum Alte Fleiwa Oldenburg"). Der Satz nahm genau den
   Platz weg, auf dem jetzt der Ortsname steht.

   Jetzt: WANN vollstaendig links, WAS und WO rechts. Der Ortsname
   gross, weil in einem Kalender ueber einen ganzen Landkreis die erste
   Frage „ist das bei mir in der Naehe?" lautet.
   ------------------------------------------------------------------ */

/* ---- Die linke Spalte ----------------------------------------------

   Sie wird breiter, weil „bis 21:00" hineinmuss. 3.6rem reichten fuer
   „OKT", nicht fuer eine Uhrzeit.

   DREI STELLEN, nicht eine. `.kal-liste__eintrag` ist ein Raster, und
   seine Spalten stehen im Stylesheet dreimal: hier, im Druck und im
   Sicherungsnetz fuer die Liste ohne Kaestchen. Wer nur eine davon
   aendert, bekommt beim Drucken wieder einen Buchstaben je Zeile — das
   ist in diesem Projekt schon einmal passiert und steht als Kerbe in
   der Dokumentation.

   Die Regel steht ausdruecklich in `min-width: 621px`. Ohne diese
   Schranke uebersteuerte sie die Handyfassung weiter unten im
   Stylesheet, die auf zwei Spalten geht — gleiche Spezifitaet,
   spaeter im Quelltext, also gewinnt die hier. */

@media (min-width: 621px) {
  .kal-liste__eintrag { grid-template-columns: auto 4.6rem 1fr; }
  .kal-liste__eintrag:not(:has(.kal-liste__kaestchen)) {
    grid-template-columns: 4.6rem 1fr;
  }
}

/* Der Absatz ist jetzt das Rasterelement, der innere Kasten nur noch
   die Stapelung. Ohne das Zuruecksetzen setzte Pico seinen
   Absatzabstand unter das Datum. */
.kal-liste__wann { margin: 0; }

.kal-liste__von,
.kal-liste__bis {
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Die Uhrzeit gehoert zum Datum, ist aber nicht dasselbe. Eine Linie
   statt eines Abstands: Sie trennt, ohne die Spalte hoeher zu machen. */
.kal-liste__von {
  margin-top: .35rem;
  padding-top: .3rem;
  border-top: 1px solid #DDDAD6;
  align-self: stretch;
  text-align: center;
  font-weight: 600;
}
.kal-liste__bis { color: #5A5654; }

/* ---- Die rechte Spalte ---------------------------------------------

   Plakette und Ortsname auf EINER Zeile, auf gemeinsamer Schriftlinie.
   Zwei Zeilen daraus zu machen waere ehrlicher gesetzt, kostete aber
   je Termin eine Zeile — bei dreissig Terminen eine halbe Bildschirm-
   seite. `baseline` haelt die kleine Plakette und den grossen Ortsnamen
   trotz verschiedener Groessen auf einer Linie. */

.kal-liste__wo {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  margin: 0 0 .1rem;
}

.kal-liste__stadt {
  font-size: 1.05rem;
  font-weight: 700;
  color: #1C1B1A;
}

/* Die alte Schreibweise aus einem Feld bleibt so stehen, wie sie war:
   normale Groesse, gedaempft. Sie fett zu setzen hiesse zu behaupten,
   das sei der Ortsname — und meistens steht da ein ganzer Satz. */
.kal-liste__ort-alt { font-size: .9rem; color: #5A5654; }

.kal-liste__anschrift {
  margin: 0 0 .1rem;
  font-size: .85rem;
  color: #5A5654;
}
.kal-liste__anschrift a { color: inherit; }

/* ---- Handyfassung ---------------------------------------------------

   Bis 620px faellt die Spalte weg und das Wann legt sich als Zeile
   ueber den Inhalt. Das Rasterelement heisst jetzt `__wann`, nicht
   mehr `__datum` — `grid-column` an einem Element, das kein Kind des
   Rasters mehr ist, tut nichts. Genau so verschwinden Angaben
   stillschweigend. */

@media (max-width: 620px) {
  .kal-liste__wann { grid-column: 2; }
  .kal-liste__datum {
    flex-direction: row; flex-wrap: wrap; gap: .4rem;
    align-items: baseline; justify-content: flex-start;
  }
  .kal-liste__von {
    margin-top: 0; padding-top: 0; border-top: 0;
    align-self: baseline;
  }
  .kal-liste__stadt { font-size: 1rem; }
}

/* ---- Papier ---------------------------------------------------------
   Dieselbe Spaltenbreite wie am Schirm, abzueglich des Kaestchens, das
   im Druck ausgeblendet ist. */
@media print {
  .kal-liste__eintrag { grid-template-columns: 4.6rem 1fr; }
  .kal-liste__anschrift,
  .kal-liste__ort-alt { color: #000; }
  /* Der Zugang zum Online-Raum ist auf Papier die ganze Auskunft —
     die allgemeine Regel haengt die Adresse ohnehin an jeden Verweis. */
}

/* ---- Zwei neue Terminarten ------------------------------------------

   Konferenz und Vortrag. Die Farben sind GERECHNET, nicht gewaehlt:

   - Schrift `#1C1B1A` auf der Flaeche: 10.9:1 und 12.2:1. Der
     schwaechste vorhandene Wert ist 9.5:1 (Mahnwache).
   - Rand gegen Papier: 4.8:1 und 4.3:1, gegen die eigene Flaeche
     3.0:1 und 3.1:1 — beides im Band der sieben vorhandenen.
   - Abstand zur naechsten vorhandenen Farbe: Delta E 2000 = 10.0 und
     10.1. Die engste Stelle unter den sieben alten ist 8.3
     (Fest/Mahnwache); der Satz aus neun wird also nirgends enger, als
     er heute schon ist.

   Gesucht wurden sie ueber ALLE 360 Farbtoene im Bauplan der
   vorhandenen (gleiche Helligkeit, gleiche Saettigung) — und zwar als
   PAAR: „die zwei Farben mit dem groessten Abstand zum Alten" ergibt
   zweimal denselben Farbton, weil beide in dieselbe groesste Luecke
   fallen. Gesucht ist der groesste KLEINSTE Abstand im fertigen Satz.

   Die Legende unter dem Raster zeigt ohnehin nur die Arten, die im
   angezeigten Monat vorkommen — neun Farben stehen also selten alle
   gleichzeitig nebeneinander. */

.kal-art-konferenz  { --art-flaeche:#E3C9B5; --art-rand:#9D663C; }
.kal-art-vortrag    { --art-flaeche:#B5E3D8; --art-rand:#338772; }


/* ====================================================================
   Update 109 — die beiden Uhrzeiten sind EIN Block
   ====================================================================

   Gemeldet: „Die Endzeit ist groesser dargestellt als die Startuhrzeit."

   Nachgemessen in Chromium gegen dieses Stylesheet: beide 14.82px,
   gleich. Der ELTERNKASTEN hat 19px — und das ist genau der Sprung, den
   das Bildschirmfoto zeigt. Wo eine der beiden Regeln nicht ankommt,
   erbt die Spanne 19px und sieht um ein Viertel groesser aus.

   Da die Ursache hier nicht zu reproduzieren ist (dort laeuft Firefox
   mit quark2, hier Chromium ohne), wird nicht geraten, sondern der
   Zustand hergestellt, in dem die Frage nicht mehr auftreten KANN:

   1. Beide Zeiten bekommen denselben vollstaendigen Satz Eigenschaften
      — Groesse, Gewicht, Farbe, Zeilenhoehe, Laufweite, Schriftfamilie.
      Nicht nur das, was anders sein soll. „Eine fremde Eigenschaft halb
      zu ueberschreiben ist schlimmer als gar nicht" steht schon zweimal
      in der Dokumentation; dies ist das dritte Mal, dass es zaehlt.

   2. Die Regel haengt an `.kal-liste__datum .kal-liste__…` (0-2-0)
      statt an einer Klasse allein (0-1-0). Das Elternthema quark2
      erreicht fuer Knoepfe 0-2-1; fuer diese Spannen gibt es dort
      nichts, aber 0-2-0 kostet nichts und nimmt die Frage heraus.

   3. Gleiches GEWICHT, nicht nur gleiche Groesse. Vorher stand die
      Startzeit auf 600 und die Endzeit auf 400. Wo eine Schrift kein
      600 mitbringt, waehlt der Browser eine andere Schnitt-Datei — und
      die kann anders gross wirken, obwohl die Zahl dieselbe ist.

   Was bleibt, ist der einzige Unterschied, der etwas bedeutet: das
   Wort „bis".
   ------------------------------------------------------------------ */

.kal-liste__datum .kal-liste__von,
.kal-liste__datum .kal-liste__bis {
  font-family: inherit;
  font-size: .74rem;
  font-weight: 600;
  font-style: normal;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: #3A3633;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Die Linie bleibt, der Rest des Kastens auch. Nur die Schrift ist
   jetzt an einer Stelle beschrieben statt an zweien. */
.kal-liste__datum .kal-liste__von {
  margin-top: .35rem;
  padding-top: .3rem;
  border-top: 1px solid #DDDAD6;
  align-self: stretch;
  text-align: center;
}

@media (max-width: 620px) {
  .kal-liste__datum .kal-liste__von {
    margin-top: 0; padding-top: 0; border-top: 0;
    align-self: baseline;
  }
}

@media print {
  .kal-liste__datum .kal-liste__von,
  .kal-liste__datum .kal-liste__bis { color: #000; }
}


/* ====================================================================
   Update 111 — auf Papier bleibt nur der Inhalt
   ====================================================================

   Auf dem Ausdruck einer Veranstalterseite standen noch drei Dinge, die
   man nicht anklicken kann:

     - der Hamburger-Knopf oben rechts
     - die Verweisknoepfe (Website, E-Mail, Instagram …)
     - „Zurueck zu Kalender"

   WARUM AUSGERECHNET DER HAMBURGER DRUCKT: quark2 setzt
   `.mobile-menu { display: block }` innerhalb `@media (max-width: 860px)`.
   Eine A4-Seite ist bei 96 dpi rund 794 Pixel breit — der Browser
   wertet Breiten-Abfragen beim Drucken gegen die SEITE aus, nicht gegen
   das Fenster. Auf Papier ist die Seite also immer „schmal", und die
   Mobilfassung gilt. Das Gegenstueck sieht man auch: `.desktop-menu`
   ist dort auf `display: none`, deshalb fehlt die normale Navigation
   im Ausdruck.

   SPEZIFITAET: Die Regeln in quark2 sind alle 0-1-0 beziehungsweise
   `#header` 1-0-0 — nachgesehen, nicht angenommen. `custom.css` wird
   NACH `theme.css` geladen, gleiche Spezifitaet gewinnt also hier.
   Kein `!important` noetig; wo es noetig waere, stimmte etwas anderes
   nicht.

   DIE GANZE LEISTE, nicht nur der Knopf: `#header` traegt
   `border-bottom: 1px solid` und `min-height: 64px`. Nur den Knopf zu
   verstecken hinterliesse einen leeren Balken mit einem Strich darunter
   — sichtbar genau an der Stelle, wo vorher der Knopf war. Eine
   Navigationsleiste sagt auf Papier ohnehin nichts; der Seitenname
   steht darunter im Titelbalken und noch einmal in der Kopfzeile, die
   der Browser selbst druckt.

   `.overlay` liegt ausserhalb von `#header` (position: fixed am
   Seitenrand) und braucht deshalb einen eigenen Eintrag. Die uebrigen
   stehen zwar innerhalb und waeren mit `#header` schon weg — sie sind
   trotzdem genannt, damit die Regel einen Umbau der Kopfzeile
   ueberlebt.
   ------------------------------------------------------------------ */

@media print {

  /* Die Navigationsleiste samt Hamburger und Overlay */
  #header,
  .mobile-menu,
  .mobile-container,
  .button_container,
  .overlay,
  .desktop-menu { display: none; }

  /* Die Verweisknoepfe auf der Veranstalterseite.

     Damit verschwinden auch die Adressen dahinter. Das ist Absicht und
     kostet etwas: Wer den Ausdruck in der Hand haelt, kommt nicht mehr
     auf die Website des Buendnisses. Die Alternative waere, die
     Adressen als Text auszuschreiben — so wie es die Terminliste mit
     ihren Verweisen tut. Fuer eine Knopfreihe mit sechs Kanaelen waeren
     das sechs lange Zeilen ueber der Terminliste, und die Terminliste
     ist der Grund, warum jemand die Seite ausdruckt. */
  .kal-wer__verweise { display: none; }

  /* Der Rueckweg nach oben — auf Papier gibt es kein Zurueck. */
  .kal-reihe__zurueck { display: none; }
}


/* ====================================================================
   Update 113 — Rueckblick
   ====================================================================

   Wenig Neues mit Absicht. Der Kasten oben benutzt `ankuendigung` und
   `prose prose--gross` von der Startseite, die Kacheln `kliste`/
   `kkarte` von der Musikseite, die Bilder die Bilderwand. Hier steht
   nur, was es vorher nicht gab: der Wegweiser und der Abstand zwischen
   den Rubriken.
   ------------------------------------------------------------------ */

/* ---- Wegweiser ------------------------------------------------------
   Eine Liste dessen, was gleich kommt — kein Menue. Deshalb schlicht
   und waagerecht, nicht als Kachelreihe: Kacheln sahen aus wie die
   Rubrikkacheln der Startseite, und die fuehren woandershin. */

.rueck-wegweiser {
  margin: 2.5rem auto 0;
  padding: 1rem 1.2rem;
  border-left: 4px solid #F68714;
  border-top: 1px solid #DDDAD6;
  border-right: 1px solid #DDDAD6;
  border-bottom: 1px solid #DDDAD6;
  border-radius: 4px;
  background: #FFFFFF;
}

.rueck-wegweiser__titel {
  margin: 0 0 .5rem;
  font-size: 1.05rem;
}

.rueck-wegweiser__liste.rueck-wegweiser__liste {
  display: flex; flex-wrap: wrap; gap: .4rem 1.4rem;
  list-style: none; margin: 0; padding: 0;
}

/* Quark 2 zeichnet Listenpunkte ueber ein Pseudo-Element am `li`, gegen
   das `list-style: none` nicht greift. Dieselbe Stelle wie in Fuss und
   Verweisleisten — steht so in der Dokumentation. */
.rueck-wegweiser__liste > li::before,
.rueck-wegweiser__liste > li::marker { content: none; display: none; }

.rueck-wegweiser__liste > li { margin: 0; }
.rueck-wegweiser__liste a { font-weight: 600; }

/* ---- Die Rubriken ---------------------------------------------------
   Eine waagerechte Linie trennt sie, kein Kasten: Kaesten um lange
   Abschnitte lesen sich wie Beiwerk, und hier ist der Abschnitt der
   Inhalt. Die erste bekommt keine Linie — darueber steht schon der
   Wegweiser. */

.rueck-rubrik {
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid #DDDAD6;
  /* Eine Rubrik bleibt beim Seitenwechsel moeglichst zusammen. */
  break-inside: auto;
}

.rueck-rubrik:first-of-type { border-top: 0; padding-top: 0; }

.rueck-rubrik__titel { margin: 0 0 .2rem; }

/* Die Ueberschrift ist der Weg zur eigenen Seite. Sie soll aber nicht
   wie ein Verweis schreien — die Farbe bleibt die der Ueberschrift, der
   Hinweis kommt beim Darueberfahren und beim Anwaehlen. */
.rueck-rubrik__titel a {
  color: inherit;
  text-decoration: none;
}
.rueck-rubrik__titel a:hover,
.rueck-rubrik__titel a:focus-visible { text-decoration: underline; }

.rueck-rubrik__unter {
  margin: 0 0 .8rem;
  color: #5A5654;
  font-size: 1.05rem;
}

.rueck-rubrik__text { margin: 0 0 1.5rem; max-width: 46rem; }

.rueck-rubrik__zwischen { margin: 1.8rem 0 .8rem; font-size: 1.15rem; }

.rueck-rubrik__quellen { margin: 2rem 0 0; }

.rueck-leer {
  margin: 2rem 0;
  padding: 1rem 1.2rem;
  border-left: 4px solid #C39A4A;
  background: #FFF8E6;
}

/* ---- Papier ---------------------------------------------------------
   Der Wegweiser ist eine Bedienhilfe: Sprungmarken auf einem Ausdruck
   sind Zeilen, die nichts tun. Die Rubriken selbst bleiben. */
@media print {
  .rueck-wegweiser,
  .rueck-leer { display: none; }

  .rueck-rubrik { break-before: auto; }
  .rueck-rubrik__titel a { text-decoration: none; }
}

/* ---- Der Zettel auf der Rueckblickseite -----------------------------
   Dasselbe Bauteil wie auf der Startseite, dieselben Klassen. Dort
   steht es ganz oben und braucht Luft nach oben; hier sitzt darueber
   schon der orange Titelbalken, und zweimal Luft hintereinander sieht
   aus wie ein Fehler. */

.start-kopf--rueckblick { padding-top: 1.5rem; }

@media print {
  /* Auf Papier zaehlt der Rueckblick selbst. Der Zettel ist Dekor mit
     Klebestreifen, die kein Drucker schoen hinbekommt — der Text darin
     ist aber Inhalt und bleibt deshalb stehen. Nur die Papieroptik
     faellt weg; die Regeln dafuer stehen beim Startseiten-Zettel. */
  .start-kopf--rueckblick { padding-top: .5rem; }
}


/* ====================================================================
   Update 114 — der Wegweiser wird eine Kachelreihe
   ====================================================================

   Vorher: ein umrandeter Kasten mit Ueberschrift links und einer
   umbrechenden Linkliste daneben. Bei vier Rubriken riss der Umbruch
   ein Loch in die Zeile, und der Kasten gab einer Sprungliste ein
   Gewicht, das sie nicht hat.

   Jetzt: `.rubriken` — dasselbe quadratische Kachelraster wie auf der
   Startseite, mit Bild, Farbschleier und weisser Schrift, und mit dem
   vorhandenen Platzhalterzustand, solange kein Foto da ist. Dafuer ist
   hier nichts zu gestalten; es wird nur der alte Kasten
   zurueckgenommen.
   ------------------------------------------------------------------ */

.rueck-wegweiser {
  margin: 2.5rem auto 0;
  padding: 0;
  border: 0;
  background: none;
}

.rueck-wegweiser__titel { margin: 0; }

/* Das Raster bringt eigenen Abstand nach unten mit (3.5rem). Zwischen
   Ueberschrift und Kacheln reicht weniger. */
.rueck-wegweiser .rubriken { margin-top: 1rem; }

@media print {
  /* Bleibt ausgeblendet — Sprungmarken auf Papier sind Zeilen, die
     nichts tun. Die Regel von Update 113 greift weiter. */
}

/* ---- Titel und Unterzeile untereinander ------------------------------

   `.rubrik__titel` und `.rubrik__unter` sind <span> ohne `display`, also
   inline — das Unterzeilchen klebt hinter dem Titel in derselben Zeile,
   und `margin-top` an einem Inline-Element tut nichts.

   ABSICHTLICH NUR HIER, nicht am gemeinsamen Bauteil: Dieselben Klassen
   benutzt die Startseite, und dort sieht es vermutlich genauso aus.
   Das zu aendern waere eine Aenderung an einer Seite, ueber die niemand
   gesprochen hat — und sichtbar auf der wichtigsten Seite ueberhaupt.
   Siehe LIESMICH: Wenn es dort auch stoert, ist es eine Zeile, aber
   eine, die DU entscheidest. */

.rueck-wegweiser .rubrik__titel,
.rueck-wegweiser .rubrik__unter { display: block; }

/* ---- Luft und Worttrennung ------------------------------------------

   Zwei Kleinigkeiten, die in der Vorschau auffielen:

   1. `.rubrik` hat nur im Platzhalterzustand Innenabstand — bei einer
      Kachel MIT Bild klebt die Schrift an der unteren und linken Kante.
   2. „Kinderaktionen" passt bei vier Kacheln nebeneinander nicht in
      eine Zeile und bricht mitten im Wort.

   WIEDER NUR IM RUECKBLICK, aus demselben Grund wie oben: Beides
   betrifft dieselben Klassen wie die Startseitenkacheln. Sehr
   wahrscheinlich sieht es dort genauso aus — aber das ist ein Befund
   zum Ansehen und Entscheiden, keine Aenderung, die ich nebenbei
   mitnehme. */

.rueck-wegweiser .rubrik:not(.rubrik--ohne-bild) { padding: 1.25rem; }

/* Erst versucht: `hyphens: auto`. Hat nicht gereicht — ein Browser
   trennt nur, wenn er ein Woerterbuch fuer die Dokumentsprache hat, und
   im Test war keines da; gebrochen wurde dann doch mitten im Wort.

   Also an der Ursache: Bei vier Kacheln nebeneinander bleiben rund
   180 px Innenbreite, und 1.35rem sind dafuer zu gross. 1.15rem passt
   fuer „Kinderaktionen" und liest sich auf einer Kachel von 220 px
   immer noch als Ueberschrift.

   `hyphens` bleibt stehen, weil es dort, wo ein Woerterbuch da ist,
   sauberer trennt. `overflow-wrap` ist das letzte Netz fuer einen
   Rubriknamen, der auch so nicht passt — es greift nur dann. */
.rueck-wegweiser .rubrik__titel {
  font-size: 1.15rem;
  hyphens: auto;
  overflow-wrap: break-word;
}

/* ====================================================================
   Update 116 — die Stecknadel neben der Anschrift
   ====================================================================

   Ein VERWEIS auf OpenStreetMap, keine eingebettete Karte. Es wird
   nichts von fremden Servern nachgeladen — kein Kachelbild, kein
   Vorschaubild, kein iframe. Das Symbol ist im HTML gezeichnet.
   ------------------------------------------------------------------ */

.kal-liste__karte {
  /* Kein Unterstrich: Es gibt keinen Text, der unterstrichen werden
     koennte, und eine Linie unter einem Symbol sieht aus wie ein
     Fehler. */
  text-decoration: none;
  margin-left: .35em;
  /* Die Nadel ist 1em hoch, die Zeile klein — ohne eigenen Halt
     schoebe sie die Zeile auseinander. */
  line-height: 1;
  white-space: nowrap;
}

.kal-liste__nadel {
  width: 1.05em;
  height: 1.05em;
  vertical-align: -.22em;
  /* Gedaempft, solange niemand hinsieht: Die Anschrift ist die
     Auskunft, die Nadel nur der Weg dorthin.

     GEMESSEN, nicht geschaetzt, wie die neun Terminartenfarben: Ein
     Symbol, das Auskunft gibt, braucht 3:1 gegen seinen Untergrund
     (WCAG 1.4.11).  #7A736E hat 4.66:1 auf Weiss und 4.15:1 auf dem
     dunkelsten Kartenton der Seite.

     Das Hausorange #F68714 kommt hier NICHT vor — es hat 2.5:1 auf
     Weiss und taugt weder fuer Schrift noch fuer Symbole. Das
     abgedunkelte #C2600C erreicht 4.22:1 und bleibt erkennbar
     dasselbe Orange. */
  color: #7A736E;
}

.kal-liste__karte:hover .kal-liste__nadel,
.kal-liste__karte:focus-visible .kal-liste__nadel { color: #C2600C; }

/* Die Tastatur muss sehen, wo sie steht — bei einem Symbol ohne Text
   ist der Rahmen das Einzige, was den Fokus anzeigt. */
.kal-liste__karte:focus-visible {
  outline: 2px solid #C2600C;
  outline-offset: 2px;
  border-radius: 3px;
}

@media print {
  /* Auf Papier tut ein Verweis nichts. Die Anschrift daneben bleibt
     stehen — sie ist die eigentliche Auskunft. */
  .kal-liste__karte { display: none; }
}

/* ====================================================================
   Update 120 — drei Kleinigkeiten am Kalender
   ==================================================================== */

/* ---- 1. Der Sprung aus dem Monatsraster landet zu hoch --------------

   Ein Klick auf einen Termin im Raster springt auf `#t-<kennung>` in
   der Liste. Dort fehlte `scroll-margin-top` — die Zeile landete bündig
   an der Fensterkante und verschwand damit zur Hälfte unter der
   Menüleiste.

   DASSELBE PROBLEM WAR LÄNGST GELÖST, nur an anderer Stelle: `.kal`,
   `#termine` und `.kal-filter` haben den Abstand seit Update 081. Die
   Terminzeile hat ihn nie bekommen, weil damals noch niemand dorthin
   sprang — der Sprung aus dem Raster kam später dazu.

   Deshalb hier derselbe Wert und keine neue Zahl: Sechs Zeilenhöhen,
   gut zwei Textzeilen. Reicht es nicht, ist es diese eine Zahl — und
   dann an BEIDEN Stellen, damit sie nicht auseinanderlaufen.

   `#leer` ist aus demselben Grund mit dabei: Die Meldung „Es war kein
   Termin ausgewählt" ist ebenfalls ein Sprungziel und stand ebenfalls
   zu weit oben. Aufgefallen ist sie nur niemandem, weil man sie selten
   zu sehen bekommt. */

.kal-liste__eintrag,
#leer { scroll-margin-top: 6rem; }


/* ---- 2. Auf Papier fängt der Zettel mit den Terminen an -------------

   Der Einleitungstext der Kalenderseite erklärt dem Besucher, was er
   hier findet. Auf einem Ausdruck, den jemand ans schwarze Brett hängt
   oder im Bündnis herumreicht, ist das eine halbe Seite, die niemand
   liest — gebraucht wird die Terminliste.

   NUR AUF DER KALENDERSEITE. Auf einer Veranstalterseite ist der
   Fließtext die Vorstellung des Bündnisses und gehört auf einen
   Ausdruck dazu; sie behält ihn. Die Klasse sitzt deshalb allein in
   `kalender.html.twig`. */

@media print {
  .kal-einleitung { display: none; }
}


/* ---- 3. Keine Silbentrennung in den Filterbeschriftungen ------------

   Im Kasten „Termine von" stand „Ganderkesee für Demokra-tie" und
   „Partnerschaften für De-mokratie Oldenburg". Ein Trennstrich mitten
   im Eigennamen einer Gruppe sieht nach Fehler aus, und bei einem Namen
   liest man ihn auch so.

   Die Trennung kommt nicht von hier, sondern von weiter oben aus dem
   übernommenen Stylesheet; an zwei anderen Stellen des Themes ist sie
   schon einmal abgeschaltet worden (Überschriften, Zettel). Hier also
   dasselbe noch einmal — mit verdoppelter Klasse, weil nicht
   nachzusehen ist, mit welcher Schärfe die Regel kommt, die hier
   überstimmt werden muss.

   `text-wrap: pretty` ist der zweite Teil der Antwort: Es verhindert,
   dass ein einzelnes kurzes Wort allein auf der letzten Zeile landet.
   Browser, die es nicht kennen, brechen wie bisher um — es ist ein
   Zusatz, keine Voraussetzung.

   Die Spaltenbreite des Rasters bleibt, wie sie ist. Breiter hiesse
   weniger Gruppen nebeneinander, und ein zweizeiliger Name ohne
   Trennstrich liest sich besser als eine Liste, die doppelt so hoch
   ist. */

.kal-filter__liste.kal-filter__liste label,
.kal-filter__liste.kal-filter__liste label * {
  hyphens: none;
  -webkit-hyphens: none;
  -ms-hyphens: none;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

/* ====================================================================
   Update 122 — der Zeitraum der Terminliste
   ====================================================================

   Bis hierher stand ueber der Liste ein Umschalter mit zwei Zustaenden.
   Jetzt sind es zwei Datumsfelder mit einem kleinen Knopf daneben.

   DIESELBE BAUFORM WIE DER FILTERKASTEN — heller Grund, duenner Rahmen,
   Ueberschrift in Kapitaelchen. Die beiden stellen dieselbe Art Frage
   („welcher Ausschnitt?"), nur die eine nach WEM und die andere nach
   WANN. Zwei verschiedene Gestalten fuer dieselbe Art Bedienung waeren
   zwei Dinge zum Lernen statt einem.
   ------------------------------------------------------------------ */

/* Das Formular ist sein eigenes Sprungziel: Nach dem Druecken landet
   man wieder bei ihm und nicht am Seitenanfang. Derselbe Abstand wie
   bei allen anderen Zielen im Kalender (Update 120) — eine zweite Zahl
   waere eine zweite, die man beim Aendern vergisst. */
.kal-zeit { scroll-margin-top: 6rem; }

.kal-zeit {
  margin: .4rem 0 1.2rem;
  padding: .9rem 1.1rem;
  background: #F7F6F4;
  border: 1px solid #DDDAD6;
  border-radius: 4px;
}

.kal-zeit fieldset { border: 0; padding: 0; margin: 0; }

.kal-zeit__titel {
  padding: 0;
  margin: 0 0 .5rem;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #5A5654;
}

/* Eine Zeile, die am Telefon umbricht. `align-items: center` haelt
   Beschriftung, Feld und Knopf auf einer Grundlinie — ohne das steht
   der kleine Knopf tiefer als das Feld, an dem er haengt. */
.kal-zeit__felder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* Zwischen den Gruppen deutlich mehr Luft als innerhalb: Sonst steht
     der Knopf „heute" optisch genauso nah an „bis" wie an dem Feld, zu
     dem er gehoert. */
  gap: .6rem 1.5rem;
}

/* Beschriftung, Feld und — beim Anfang — der Knopf gehoeren zusammen
   und duerfen nicht voneinander getrennt umbrechen. */
.kal-zeit__paar {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

.kal-zeit__marke {
  font-size: .9rem;
  color: #5A5654;
}

.kal-zeit__feld {
  /* `width: auto` statt der Pico-Vorgabe 100 %: Ein Datumsfeld, das
     die ganze Zeile einnimmt, sprengt die Reihe. */
  width: auto;
  margin: 0;
  padding: .3rem .5rem;
  font-size: .92rem;
  line-height: 1.3;
  border: 1px solid #DDDAD6;
  border-radius: 4px;
  background: #FFFFFF;
  color: #1C1B1A;
}

.kal-zeit__feld:focus-visible {
  outline: 2px solid #C2600C;
  outline-offset: 1px;
}

/* Die beiden Schalter gehoeren zusammen und sitzen dicht beieinander —
   enger als die Luft zwischen den Feldgruppen. */
.kal-zeit__schalter {
  display: inline-flex;
  gap: .3rem;
}

/* „ab heute" ist zwei Woerter, und ein winziger Knopf ist schmal genug,
   dass der Browser sie uebereinanderstellt — dann ist der Knopf doppelt
   so hoch wie das Feld daneben. */
.kal-zeit__schalter .btn { white-space: nowrap; }

/* Am Telefon passen Beschriftung, Datumsfeld und zwei Schalter nicht
   mehr nebeneinander — zusammen rund 380 px bei 400 px Schirmbreite.
   Dann ruecken die Schalter unter das Feld, zu dem sie gehoeren, statt
   die Seite seitlich hinauszuschieben. Beschriftung und Feld bleiben
   beieinander. */
@media (max-width: 30rem) {
  .kal-zeit__paar { flex-wrap: wrap; }
  .kal-zeit__schalter { width: 100%; }
}

/* DER GELTENDE SCHALTER IST GEDRUECKT. Dieselbe Aussage wie die fette
   Schrift bei der Reihenfolge: Hervorgehoben heisst „gilt", nicht „tut
   etwas". Gemessen, nicht geschaetzt: Schrift #3B3734 auf #DDDAD6
   ergibt 8,46:1 (noetig sind 4,5:1), der Rand #8B8580 auf dem hellen
   Kastengrund 3,37:1 (noetig sind 3:1). */
.kal-zeit__schalter--an.kal-zeit__schalter--an {
  background: #DDDAD6;
  border-color: #8B8580;
  color: #3B3734;
  font-weight: 600;
}

.kal-zeit__knoepfe {
  display: inline-flex;
  gap: .5rem;
}

/* Noch kleiner als `btn--klein`: Der Knopf „heute" gehoert zum Feld
   daneben und darf es nicht ueberwiegen.

   VOLLSTAENDIG festgeschrieben, nicht nur das Innenmass. In diesem
   Theme hat `theme.css` fuer `a.btn` die schaerfere Angabe (0-1-1
   gegen 0-1-0), und ein halber Satz Eigenschaften greift dort dann
   nicht — dieselbe Kerbe, die bei `.btn--klein` schon einmal
   aufgefallen ist. Hier ist es zwar ein `<button>`, aber die Regel
   soll auch dann stimmen, wenn jemand spaeter einen Verweis daraus
   macht. */
.btn--winzig.btn--winzig {
  padding: .2rem .55rem;
  font-size: .78rem;
  line-height: 1.3;
  border-width: 1px;
  box-sizing: border-box;
}

/* Der Satz, der sagt, was gerade gilt — wie beim Filterkasten. */
.kal-zeit__stand {
  margin: .6rem 0 0;
  font-size: .92rem;
}

.kal-zeit__stand--leer { color: #8F1D15; }

@media print {
  /* Auf Papier ist ein Eingabefeld ein leeres Kaestchen. Welcher
     Zeitraum gedruckt wurde, steht in der Liste selbst — das erste und
     das letzte Datum. */
  .kal-zeit { display: none; }
}

/* ====================================================================
   Update 123 — schlankerer Zeitraum, ein Auswahlkasten statt zweier
   ====================================================================

   TEIL 1: Die beschrifteten Knoepfe am Zeitraum sind kleine Symbole
   geworden. Ein Knopf mit Text neben einem Datumsfeld ist so breit wie
   das Feld selbst; die Zeile wurde dadurch schwer und brach am Telefon
   dreimal um.

   TEIL 2: „Termine von" stand zweimal auf der Seite — als Kaestchen
   ueber dem Raster und als Legende darunter. Jetzt einmal, mit Kuerzel,
   Logo, Verweis und einer Umrahmung fuer alle, die im angezeigten
   Monat etwas haben.
   ------------------------------------------------------------------ */


/* ---- 1. Der Zeitraum wird schmaler ----------------------------------

   Weniger Polster, kleinere Ueberschrift, engere Zeile. Die Zahlen
   loesen die aus Update 122 ab; sie stehen hier ein zweites Mal, weil
   `custom.css` angehaengt wird und die spaetere Regel gewinnt. */

.kal-zeit {
  margin: .3rem 0 1rem;
  padding: .55rem .75rem;
}

.kal-zeit__titel {
  margin: 0 0 .35rem;
  font-size: .72rem;
}

.kal-zeit__felder { gap: .45rem .9rem; }

.kal-zeit__feld {
  padding: .22rem .4rem;
  font-size: .88rem;
}

.kal-zeit__stand {
  margin: .45rem 0 0;
  font-size: .88rem;
}


/* ---- Die Symbole am Feldrand ----------------------------------------

   Kein `.btn`: Ein Knopf, der nur aus einem Zeichen besteht, braucht
   weder Innenmass noch Rahmen noch Hintergrund — er braucht eine
   Flaeche, die man trifft, und einen sichtbaren Fokus.

   32 x 32 Pixel sind die Flaeche, die als Mindestmass fuer ein
   Bedienelement gilt; das Symbol darin ist 17 Pixel gross. Der Rest ist
   Luft und faellt nicht auf. */

.kal-zeit__sym {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  /* Gedaempft, solange niemand hinsieht — gemessen gegen den Grund,
     auf dem es wirklich steht (#F7F6F4, der Kastenton): 4,32:1. Fuer
     ein Symbol, das Auskunft gibt, sind 3:1 noetig (WCAG 1.4.11). */
  color: #7A736E;
  cursor: pointer;
  line-height: 1;
}

.kal-zeit__sym:hover {
  background: #EDEAE6;
  color: #C2600C;
}

.kal-zeit__sym:focus-visible {
  outline: 2px solid #C2600C;
  outline-offset: 1px;
  color: #C2600C;
}

/* AM FELDRAND, NICHT DANEBEN. Der negative Aussenabstand hebt den
   Zwischenraum auf, den `.kal-zeit__paar` zwischen seinen Teilen laesst
   — sonst schweben die Symbole zwischen den beiden Feldern und gehoeren
   optisch zu keinem von beiden. */
.kal-zeit__schalter {
  display: inline-flex;
  gap: 0;
  margin-left: -.3rem;
}


/* ---- 2. Ein Auswahlkasten statt zweier ------------------------------

   Eine Zeile je Gruppe: Kaestchen, dann Kuerzel und Logo als
   Beschriftung, dann der Name als Verweis, dann die Zahl.

   `align-items: center` haelt alles auf einer Linie, auch wenn der Name
   zweizeilig wird. */

.kal-filter__wer {
  display: flex;
  align-items: center;
  gap: .4rem;
}

/* Kuerzel und Logo sind die Flaeche zum Anhaken — sie gehoeren zum
   Kaestchen, nicht zum Namen. Deshalb sitzen sie im `<label>` und der
   Name daneben als eigener Verweis: Zwei Dinge, die verschiedenes tun,
   bekommen zwei Flaechen. */
.kal-filter__marke {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .12rem .22rem;
  border: 2px solid transparent;
  border-radius: 5px;
  cursor: pointer;
  flex: 0 0 auto;
}

/* UMRAHMT HEISST: hat im angezeigten Monat Termine.

   Die Farbe ist das Hausorange, hier aber nur als RAHMEN — fuer
   Schrift taugt es nicht (2,5:1 auf Weiss), und als Rand reicht es
   ebenfalls nicht: #F68714 auf dem Kastengrund #F7F6F4 ergibt 2,32:1,
   noetig sind 3:1. Deshalb das abgedunkelte #C2600C — gemessen 3,91:1
   auf demselben Grund. Beim ersten Schreiben stand hier eine Zahl
   gegen den falschen Hintergrund; gemessen heisst gegen DEN Grund,
   auf dem es steht.

   ZUSAETZLICH ZUR FARBE ein Unterschied in der Staerke: Wer Farben
   nicht unterscheidet, sieht trotzdem einen Rahmen gegen keinen. */
.kal-filter__marke--monat {
  border-color: #C2600C;
}

.kal-filter__name {
  /* Der Verweis traegt den Namen und darf umbrechen. Seit Update 147
     steht er in der ZWEITEN Zeile und hat die ganze Spalte fuer sich;
     die Zahl ist nach oben rechts gerueckt. */
  font-size: .92rem;
  text-decoration: none;
}
.kal-filter__name:hover { text-decoration: underline; }

/* Der erklaerende Satz unter der Ueberschrift. Die Probe-Umrahmung
   darin ist reine Anschauung und fuer die Sprachausgabe stumm. */
.kal-filter__hinweis {
  margin: 0 0 .6rem;
  font-size: .86rem;
  color: #5A5654;
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
}

.kal-filter__marke--probe {
  cursor: default;
  opacity: .9;
}

@media print {
  /* Beide Kaesten sind Bedienung und gehoeren nicht auf Papier. Die
     Artenlegende unter dem Raster bleibt — sie erklaert die Farben. */
  .kal-zeit { display: none; }
}

/* ====================================================================
   Update 125 — die Symbole stehen am Feld, untereinander
   ====================================================================

   Bisher standen die beiden Symbole NEBEN dem Anfangsfeld, in einer
   Reihe — und am Telefon gar nicht mehr daneben, sondern in einer
   eigenen Zeile darunter. Das Kreuz fuer das Ende stand dann noch eine
   Zeile tiefer und gehoerte optisch zu nichts mehr.

   Jetzt stehen sie UNTEREINANDER, unmittelbar rechts am Feld, auf
   jeder Breite dieselbe Anordnung. Zwei Symbole uebereinander sind
   genau so hoch wie das Feld, an dem sie haengen — das ist kein
   Zufall, sondern unten festgelegt.

   UNTERWEGS SIND DREI ALTE FEHLER AUFGEFALLEN, alle derselbe:
   Deklarationen aus Update 122 fuer das Datumsfeld haben nie gewirkt,
   weil der Selektor zu schwach war. Dazu unten mehr — es ist der
   eigentliche Grund, warum der Kasten so sperrig aussah.
   ------------------------------------------------------------------ */


/* ---- 1. Das Datumsfeld war nie so breit wie sein Inhalt ------------

   In Update 122 steht:

       .kal-zeit__feld { width: auto; margin: 0; }

   mit dem Kommentar „`width: auto` statt der Pico-Vorgabe 100 %".
   Nur hat es das nie getan. Pico schreibt

       input:not([type=checkbox], [type=radio]), select, textarea
         { width: 100%; margin-bottom: var(--spacing); }

   und dieser Selektor ist STAERKER: eine Klasse (das `[type=…]` im
   `:not`) plus ein Element (`input`) schlaegt eine Klasse allein.
   Gemessen im Browser: Das Feld war 275 Pixel breit, obwohl sein
   Inhalt 177 braucht — es nahm die ganze Zeile ein und schob die
   Symbole hinaus. Genau das war am Telefon zu sehen.

   Dasselbe gilt fuer `margin: 0`: Unter jedem Feld stand ein
   Aussenabstand, den 122 wegnehmen wollte und nicht wegnahm.

   DREI KLASSEN statt zwei. Die doppelte Klasse (`.kal-zeit__feld
   .kal-zeit__feld`, wie bei `.btn--winzig` in Update 122) reicht hier
   NICHT sicher: Sie ergibt 0-2-0 und verliert gegen 0-2-1, falls das
   Theme die aeltere Pico-Schreibweise mit zwei `:not` mitbringt. Was
   in `blades.min.css` wirklich steht, kann ich von hier nicht lesen —
   also wird so geschrieben, dass beide Faelle sicher sind. Das
   Update-Skript rechnet nach und bricht ab, wenn doch etwas
   Staerkeres im Theme steht. */

.kal-zeit .kal-zeit__feld.kal-zeit__feld {
  width: auto;
  /* Es darf schrumpfen, aber nicht beliebig: Unter rund 136 Pixeln
     schneidet der Browser die Jahreszahl ab. Gemessen: Bis 320 Pixel
     Fensterbreite — das schmalste gaengige Telefon — bleibt das Feld
     bei seinen 183 Pixeln und nichts wird abgeschnitten. */
  min-width: 8.5rem;
  flex: 0 1 auto;
  margin: 0;
}

/* Ein `fieldset` schrumpft nicht unter seinen Inhalt, solange ihm das
   nicht ausdruecklich erlaubt wird — eine alte Eigenheit, die aelter
   ist als Flexbox. Ohne diese Zeile half das Schrumpfen des Feldes
   nichts: Der Kasten schob stattdessen die ganze Seite seitlich
   hinaus. Gemessen bei 280 Pixeln Fensterbreite. */
.kal-zeit fieldset { min-width: 0; }

/* Gleich breite Beschriftungen, damit „von" und „bis" ihre Felder an
   derselben Stelle beginnen lassen — und damit auch die
   Symbolspalten uebereinander stehen. Am Telefon, wo die beiden
   Gruppen untereinander stehen, faellt jeder Versatz sofort auf. */
.kal-zeit__marke { min-width: 1.9rem; }


/* ---- 2. Beschriftung, Feld und Symbole bleiben zusammen ------------

   `nowrap` ersetzt die Regel aus Update 122, die am Telefon das
   Gegenteil tat: Dort brach die Gruppe um, und die Symbole landeten
   unter dem Feld. Das war fuer die ALTEN, beschrifteten Knoepfe
   gedacht — „ab heute" und „ab Anfang" brauchten zusammen fast die
   ganze Zeile. Zwei Symbole brauchen 30 Pixel. Die Regel ist mit den
   Knoepfen ueberfluessig geworden und stand nur noch im Weg.

   `min-width: 0` hebt die eingebaute Mindestbreite eines Flex-Teils
   auf — ohne sie schrumpft das Feld oben nie, egal was dort steht. */
.kal-zeit__paar {
  flex-wrap: nowrap;
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 30rem) {
  /* Dieselbe Anordnung wie auf dem grossen Schirm. Beide Zeilen
     heben die Regeln aus Update 122 auf, die hier umbrachen. */
  .kal-zeit__paar { flex-wrap: nowrap; }
  .kal-zeit__schalter { width: auto; }
}


/* ---- 3. Die Symbole stehen untereinander --------------------------

   `align-self: stretch` macht die Spalte so hoch wie das Feld daneben,
   `flex: 1 1 0` teilt diese Hoehe unter den Symbolen auf. Deshalb
   passen zwei Symbole GENAU auf die Hoehe des Feldes, ohne dass
   irgendwo eine Pixelzahl steht, die zum Feld passen muesste — eine
   solche Zahl waere beim naechsten Eingriff am Feld falsch, ohne dass
   es jemand merkt.

   `min-height: 1.5rem` ist das Mindestmass fuer ein Bedienelement
   (24 Pixel, WCAG 2.5.8). `max-height` deckelt den Einzelfall: Beim
   Ende-Feld steht nur EIN Kreuz, und ohne Deckel waere es so hoch wie
   das ganze Feld. */
.kal-zeit__schalter {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  width: auto;
  flex: 0 0 auto;
  align-self: stretch;
  /* Dicht ans Feld, aber nicht daran geklebt. */
  margin-left: -.15rem;
}

.kal-zeit__sym {
  width: 1.9rem;
  /* Hebt die feste Hoehe aus Update 123 auf — jetzt rechnet sie sich
     aus der Hoehe des Feldes. */
  height: auto;
  min-height: 1.5rem;
  max-height: 2rem;
  flex: 1 1 0;
}

/* ====================================================================
   Update 126 — breitere Textspalte, Banner auf den Veranstalterseiten
   ====================================================================

   TEIL 1: Die Textspalte auf der Startseite und auf den
   Veranstalterseiten wird breiter. Nur dort — `.container--eng` traegt
   vierzehn andere Vorlagen, von der Anfahrt bis zu den Downloads, und
   die sollen bleiben, wie sie sind.

   TEIL 2: Das Banner, das die Vorlage seit diesem Update einsetzt,
   wenn eine Veranstalterseite ein eigenes Teilbild hat.
   ------------------------------------------------------------------ */


/* ---- 1. Zwei Breiten, nicht eine -----------------------------------

   GEMESSEN, NICHT GESCHAETZT — und zwar in ZEICHEN je Zeile, nicht in
   Pixeln. Pixel sagen hier nichts: Auf der Startseite steht der
   Ankuendigungstext in `prose--gross` (bis 1,32 rem), auf der
   Veranstalterseite in der normalen Textgroesse. Dieselbe Pixelbreite
   ergibt deshalb voellig verschiedene Zeilen.

   Gemessen im Browser, bei 16 px Grundschrift:

     Spaltenbreite        Startseite       Veranstalterseite
     70ch (bisher)        53 Zeichen       70 Zeichen
     48rem                57               75
     52rem                62               82
     56rem                66               88

   Als lesbar gilt eine Zeile von etwa 45 bis 75 Zeichen. Die
   Startseite lag mit 53 deutlich unter dem, was ihre grosse Schrift
   vertraegt — dort sind 56rem richtig. Die Veranstalterseite lag mit
   70 schon am oberen Rand; mehr als 48rem wuerde die Zeile ueber die
   Grenze schieben, ohne dass es breiter aussieht.

   WER ES ANDERS WILL, AENDERT HIER EINE ZAHL. Die beiden Werte stehen
   als Variablen, damit sie nicht an drei Stellen gepflegt werden
   muessen.

   Die Zeichenzahl bleibt dabei ueber alle Bildschirmbreiten gleich:
   `rem` waechst mit der Grundschrift, und die Zeichen wachsen mit. */

:root {
  --mc-text-breit: 56rem;   /* Startseite: 66 Zeichen bei grosser Schrift */
  --mc-text-wer:   48rem;   /* Veranstalterseite: 75 Zeichen */
}

/* DOPPELTE KLASSE, damit die Angabe sicher gegen `.container--eng`
   (70ch) und gegen ein moegliches `max-width` von `.container` im
   Elternthema gewinnt. Beide haengen an EINER Klasse; eine zweite
   genuegt also und kostet nichts. Dieselbe Kerbe wie bei
   `.btn--winzig` (Update 122) und dem Datumsfeld (Update 125) — dort
   hat eine zu schwache Angabe drei Updates lang nicht gewirkt, ohne
   dass man es gesehen haette. */
.ankuendigung.ankuendigung { max-width: var(--mc-text-breit); }
.wer-seite.wer-seite       { max-width: var(--mc-text-wer); }


/* ---- 2. Das Banner der Veranstalterseite ---------------------------

   UNBESCHNITTEN. Ein Teilbild ist 1200 x 630 und traegt in aller Regel
   Namen, Logo und manchmal einen Satz. Ein festes Seitenverhaeltnis
   mit `object-fit: cover` wuerde davon oben und unten etwas abschneiden
   — und was abgeschnitten wird, entscheidet dann der Zufall des
   jeweiligen Bildes. Deshalb volle Breite, Hoehe nach Bild.

   Keine feste Hoehe und kein `aspect-ratio`: Beides waere eine
   Behauptung ueber ein Bild, das die Redaktion hochlaedt und dessen
   Mass hier niemand kennt. */

.wer-banner {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 0 0 1.4rem;
}

@media print {
  /* Auf Papier nicht. Die Druckfassung der Veranstalterseiten soll
     bleiben, wie sie war (Update 120) — und ein Banner ueber einer
     Terminliste kostet eine halbe Seite und eine Menge Farbe. */
  .wer-banner { display: none; }
}

/* ====================================================================
   Update 127 — das Teilbild IST der Kopf, nicht ein Bild darunter
   ====================================================================

   In Update 126 stand das Teilbild unter dem roten Balken. Beides
   zusammen hiess: derselbe Name zweimal, das Logo zweimal, und eine
   Seite, die erst nach zwei Bildschirmhoehen anfaengt. Jetzt tritt das
   Bild an die Stelle des Balkens — die Vorlage entscheidet das, hier
   steht nur, wie der Kopf aussieht.
   ------------------------------------------------------------------ */

/* DER ABSTAND IST DER DES BALKENS, den das Bild ersetzt: `.seiten-kopf`
   hat `margin-bottom: 2.5rem`. Eine andere Zahl hiesse, dass die Seite
   je nach Vorhandensein eines Bildes anders atmet — und das sieht man
   nicht nebeneinander, man merkt es nur als Unruhe. */
.wer-kopfbild {
  margin-bottom: 2.5rem;
}

/* Die 1,4 rem aus Update 126 loesen sich damit ab: Der Abstand gehoert
   jetzt an den Kasten, nicht an das Bild. */
.wer-banner {
  margin: 0;
}

/* SO BREIT WIE DER TEXT DARUNTER, nicht so breit wie der rote Balken.
   Ein Teilbild ist 1200 x 630; ueber die volle Breite des Balkens
   gezogen waere es knapp 600 Pixel hoch und schoebe alles andere unter
   den Falz. In der Textbreite sind es rund 400.

   WER ES DOCH ueber die ganze Breite will, nimmt die beiden Zeilen
   darunter in Gebrauch — dann steht das Bild wie der Balken von Rand
   zu Rand:

     .wer-kopfbild.wer-kopfbild { max-width: none; }

   Mehr ist dafuer nicht noetig; `.wer-seite` setzt nur eine
   Hoechstbreite. */

/* ====================================================================
   Update 128 — Demokratie Café, und das Kopfbild bleibt auf Papier
   ====================================================================

   TEIL 1: Das Banner der Veranstalterseiten wird gedruckt. In Update
   126 war es ausgeblendet — gedacht als Schonung von Papier und Farbe,
   gewollt war es nicht.

   TEIL 2: Eine zehnte Terminart. Schluessel `cafe`, Beschriftung
   „Demokratie Café"; der Eintrag in `Kalender::ARTEN` und die beiden
   Auswahllisten der Blaupause kommen mit diesem Update.
   ------------------------------------------------------------------ */


/* ---- 1. Das Kopfbild auf Papier ------------------------------------

   Hebt die Regel aus Update 126 auf. Beide stehen in `custom.css`,
   die spaetere gewinnt — deshalb genuegt `display: block`.

   DREI ZUSAETZE, die nur auf Papier gelten:

   `max-height` deckelt die Hoehe. Ein Teilbild ist 1200 x 630; ueber
   die volle Satzbreite gedruckt waere es gut ein Drittel der Seite,
   und auf einem Zettel mit zwanzig Terminen ist das zu viel. 6 cm
   lassen das Bild erkennbar und die erste Terminzeile auf Seite eins.
   Zusammen mit `width: auto` bleibt das Seitenverhaeltnis erhalten —
   der Browser verkleinert, er schneidet nicht.

   `break-inside: avoid` haelt das Bild zusammen. Ohne das kann es
   zwischen zwei Blaetter geraten, und dann steht auf Seite eins der
   obere Rand und auf Seite zwei der Rest.

   `print-color-adjust: exact` bittet den Browser, die Farben nicht
   wegzusparen. Ein `<img>` wird zwar ohnehin gedruckt, aber manche
   Browser graut Farbflaechen im Sparmodus aus. */

@media print {
  .wer-banner {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 6cm;
    margin: 0 0 .6cm;
    break-inside: avoid;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}


/* ---- 2. Die zehnte Art ---------------------------------------------

   GERECHNET, NICHT GEWAEHLT. Dasselbe Verfahren wie bei den beiden
   Arten aus Update 108: Die neun vorhandenen geben die Messlatte vor,
   gesucht wird unter allen 360 Farbtoenen einer, der sie einhaelt.

   Von 360 Farbtoenen halten genau SECHS alle Bedingungen ein — die
   Palette ist damit fast voll. In der Dokumentation stand als
   Schaetzung „zwischen neun und zwoelf ist Schluss"; gemessen sind es
   jetzt zehn mit sechs tauglichen Luecken.

   Gemessen gegen Text #1C1B1A und weissen Zellgrund:

     Text auf der Flaeche    9,58:1   (noetig 7; schwaechste heute 9,47)
     Rand auf Papier         6,37:1   (schwaechste heute 4,28)
     Rand auf der Flaeche    3,55:1   (noetig 3; schwaechste heute 3,02)

   Abstand zu den vorhandenen Flaechen (CIEDE2000): am naechsten sind
   `planung` und `mahnwache` mit je 10,0 — das engste Paar heute ist
   `fest`/`mahnwache` mit 8,3. Die neue Farbe liegt also WEITER
   auseinander als das engste vorhandene Paar.

   Und sie haelt den Bauplan ein: Helligkeit 0,80 wie alle anderen,
   Saettigung 0,45 im Band 0,35–0,55. Der Rand sitzt bei Helligkeit
   0,45 und Saettigung 0,42, mitten in dem, was die anderen Raender
   tun (0,43–0,51 und 0,35–0,55). Eine Farbe, die jede Zahl einhaelt
   und trotzdem aus der Reihe faellt, waere auch falsch.

   Das Skript, das die Farbe gesucht hat, liegt im Paket; die Pruefung
   rechnet beim Einspielen gegen DEINE `custom.css` nach. */

.kal-art-cafe { --art-flaeche:#B5C1E3; --art-rand:#435CA3; }

/* ====================================================================
   Update 134 — die Farbe fuer „Demo"

   DER LETZTE FREIE FARBTON. Von 360 halten noch genau EINER die
   Bedingungen ein, die die zehn vorhandenen Arten heute erfuellen:

     Text #1C1B1A auf der Flaeche   mindestens  9,47:1  (hier 12,78:1)
     Rand auf Papier                mindestens  4,28:1  (hier  4,31:1)
     Rand auf der Flaeche           mindestens  3,02:1  (hier  3,20:1)
     Abstand zur naechsten Art      mindestens     8,3  (hier     8,4)

   Die Messlatte ist nicht gesetzt, sondern aus dem Bestand gelesen:
   Sie ist jeweils der schwaechste Wert, den heute schon eine Art hat
   (das engste Flaechenpaar sind „Fest" und „Mahnwache" mit 8,3).

   DAMIT IST DIE PALETTE VOLL. Die naechste Art hat keinen Platz mehr,
   ohne dass eine dieser Grenzen fallen muss. Das ist keine Panne,
   sondern die Rechnung: Elf unterscheidbare Flaechen bei gleicher
   Helligkeit und enger Saettigung sind das, was ein Farbkreis hergibt.
   Wer eine zwoelfte will, braucht einen zweiten Kanal — ein Symbol,
   ein Muster, eine zweite Helligkeitsstufe.

   NAEHE, DIE MAN SEHEN WIRD: „Demo" (73°, Gelbgruen) liegt zwischen
   „Offenes Buendnistreffen" (120°, Gruen, Abstand 8,4) und
   „Infoveranstaltung" (45°, Gelb, Abstand 8,5). Im Raster
   nebeneinander sind die drei auseinanderzuhalten, einzeln aus der
   Erinnerung eher nicht. Die Buchstaben daneben sagen weiterhin, WER
   einlaedt; die Legende sagt, WAS die Farbe bedeutet.
   ==================================================================== */

.kal-art-demo { --art-flaeche:#D9E3B5; --art-rand:#708131; }

/* ====================================================================
   Update 140 — fremde Veranstalter und fünfstellige Kürzel

   Zwei Dinge, die zusammengehören: Gruppen ohne eigene Seite bekommen
   eine Zeile im Filterkasten wie alle anderen, stehen dort aber in
   einer zugeklappten Gruppe — sonst wäre die Liste nach einem Jahr
   dreißig Zeilen lang. Und Kürzel dürfen fünf Zeichen haben, wofür die
   Plakette im Raster eine zweite Stufe braucht.
   ==================================================================== */

/* ---- Lange Kürzel im Raster -----------------------------------------
   NUR IM RASTER, deshalb über `.kal__marken` angebunden: In Legende und
   Filterkasten ist Platz, dort bleibt die Plakette groß. Ohne diese
   Einschränkung würde `--lang` auch `--legende` überstimmen, weil es
   später in der Datei steht — und die Namensliste wäre plötzlich
   winzig.

   DIE ZAHLEN SIND GEMESSEN, nicht gewählt. Aus der Schriftdatei
   (Source Sans 3 Bold) gelesen und gegen den Platz gerechnet, der in
   einer Tageszelle bleibt: bei 320 px Schirmbreite 27,3 px. Bei .58rem
   mit Laufweite und Polster brauchen fünf mittlere Großbuchstaben
   31 px — zu viel. Bei .52rem ohne beides sind es 25,2 px.

   Was nicht passt, bricht nicht um, sondern wird abgeschnitten
   (`overflow: hidden` am Kästchen). Welche Kürzel das trifft, meldet
   die Übersicht für Angemeldete; hier wird nur Platz geschaffen.
   ------------------------------------------------------------------- */

.kal__marken .kal__marke--lang {
  font-size: .52rem;
  letter-spacing: 0;
}

@media (max-width: 720px) {
  .kal__marken .kal__marke--lang {
    font-size: .52rem;
    letter-spacing: 0;
    padding: 0;
  }
}

/* ---- Die aufklappbaren Gruppen im Filterkasten ----------------------
   `<details>` statt eines Sammelhakens: Ein Haken für „alle" und die
   Einzelhaken müssten einander kennen, und „drei von sieben" lässt sich
   ohne JavaScript nicht anzeigen. Ein Zuklappen behauptet nichts, es
   zeigt nur weniger.

   Die Kästchen darin werden auch zugeklappt mitgeschickt — der Inhalt
   steht im Dokument, er ist bloß nicht zu sehen.

   Seit Update 147 sind es ZWEI solche Blöcke (Bündnisse und Gruppen,
   Sonstige Veranstalter), und beide bauen sich aus demselben Baustein.
   Die Trennlinie gehört deshalb ZWISCHEN sie, nicht vor jeden: `+`
   trifft nur den zweiten.
   ------------------------------------------------------------------- */

.kal-filter__gruppe + .kal-filter__gruppe {
  margin: .7rem 0 0;
  padding-top: .6rem;
  border-top: 1px solid #DDDAD6;
}

/* Die Zusammenfassung bleibt ein gewöhnlicher Kasten. `display: flex`
   darauf würde in manchen Browsern das aufklappende Dreieck
   verschlucken — es ist dort ein `::marker` der `list-item`-Anzeige,
   und die fällt mit dem Flex-Kasten weg. Umbrechen soll ohnehin nur die
   Logoreihe, und die ist selbst ein Flex-Kasten (weiter unten). */
.kal-filter__gruppe > summary {
  cursor: pointer;
  font-size: .88rem;
  font-weight: 700;
  color: #5A5654;
  padding: .15rem 0;
}

.kal-filter__gruppe > summary:hover { color: #1C1B1A; }

/* Der Fokusring gehört an die Zusammenfassung, nicht an den Kasten:
   Angesprochen wird beim Tabben sie. */
.kal-filter__gruppe > summary:focus-visible {
  outline: 2px solid #A85504;
  outline-offset: 2px;
  border-radius: 3px;
}

.kal-filter__gruppe[open] > summary { margin-bottom: .5rem; }

.kal-filter__gruppe-titel { margin-right: .5rem; }

/* ---- Der Erklärsatz steht IN der Zusammenfassung --------------------
   Seit Update 148 sind beide Blöcke zugeklappt. Stünde der Satz wie
   vorher darunter, wäre er genau dann weg, wenn er am meisten gebraucht
   wird: bei jemandem, der den Kasten zum ersten Mal sieht und nicht
   weiß, was ein Kürzel ist.

   `<summary>` nimmt nur Fließinhalt auf, kein `<p>` — deshalb ein
   `<span>`, das hier zur Zeile wird. Die Überschrift darüber ist fett
   und grau; der Satz erbt das nicht, er ist Fließtext.
   ------------------------------------------------------------------- */

.kal-filter__gruppe > summary .kal-filter__hinweis {
  display: block;
  margin: .45rem 0 0;
  font-weight: 400;
  color: #5A5654;
  cursor: default;
}

/* „Zum Auswählen bitte aufklappen." — nur solange zu. Aufgeklappt steht
   die Liste da, und der Satz wäre eine Aufforderung zu etwas, das schon
   geschehen ist. */
.kal-filter__gruppe[open] > summary .kal-filter__aufklappen { display: none; }

/* ---- Die Erklärung zur Umrahmung — nur bei offenem Block -----------
   Sie erklärt etwas, das man nur IN der Liste sieht. Bei zugeklapptem
   Kasten erklärte sie eine Umrahmung, die gar nicht da ist, und nähme
   drei Zeilen für nichts.

   OHNE JAVASCRIPT, mit dem Geschwister-Zeichen: `~` trifft, was NACH
   einem offenen Block steht — gleichgültig welcher der beiden es ist.
   Darum steht der Satz im Markup hinter beiden und auf derselben Ebene.
   Eine Verschachtelung mehr, und die Regel greift nicht.
   ------------------------------------------------------------------- */

/* ---- Das aufklappbare „Mehr dazu" im Einleitungstext ---------------
   Seit Update 150. Wo gefaltet wird, sagt der INHALT (ein
   `<!-- mehr -->` im Markdown) — die Vorlage erkennt im Fließtext
   keinen Abschnitt, ohne über ihn eine Annahme zu machen.

   Dieselben Maße wie die Blöcke im Filterkasten: Es ist dieselbe Geste,
   und sie soll sich auch so anfühlen.
   ------------------------------------------------------------------- */

.kal-einleitung__mehr > summary {
  cursor: pointer;
  font-size: .92rem;
  font-weight: 700;
  color: #5A5654;
  padding: .15rem 0;
}

.kal-einleitung__mehr > summary:hover { color: #1C1B1A; }

.kal-einleitung__mehr > summary:focus-visible {
  outline: 2px solid #A85504;
  outline-offset: 2px;
  border-radius: 3px;
}

.kal-einleitung__mehr[open] > summary { margin-bottom: .3rem; }

.kal-filter__umrahmung { display: none; }

.kal-filter__gruppe[open] ~ .kal-filter__umrahmung {
  display: block;
  margin: .7rem 0 0;
  padding-top: .6rem;
  border-top: 1px solid #DDDAD6;
}

/* ---- Zugeklappt: wer gerade dabei ist -------------------------------
   Was in einem `<summary>` steht, bleibt auch geschlossen sichtbar —
   das ist der ganze Trick, und er braucht kein JavaScript. Aufgeklappt
   stehen die Gruppen ohnehin da, also weg damit.

   Die Reihe zeigt die ÜBERNOMMENE Auswahl, nicht die gerade
   angekreuzte: Ohne JavaScript kann sie sich beim Klicken nicht
   mitändern. Das ist kein Mangel — sie sagt, was der Kalender gerade
   zeigt, genau wie der Satz unter den Knöpfen.
   ------------------------------------------------------------------- */

.kal-filter__gewaehlt {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .4rem;
  vertical-align: middle;
  /* Luft ÜBER und UNTER der Reihe — rund eine halbe Zeile. Am Telefon
     rutscht sie unter die Überschrift und braucht beides; am PC steht
     sie daneben, und derselbe Abstand macht die Kopfzeile höher, was
     den Satz darunter freistellt. Bei einem `inline-flex` wirken
     senkrechte Abstände auf die Zeilenhöhe — bei einem schlichten
     `inline` täten sie das nicht. */
  margin: .35rem .4rem .35rem 0;
}

.kal-filter__gruppe[open] .kal-filter__gewaehlt { display: none; }

/* Kleiner als in der Liste: Hier stehen sie zu acht nebeneinander und
   sollen eine Zeile ergeben, keine zweite Liste. */
.kal-filter__gewaehlt-logo {
  height: 1.15rem;
  width: auto;
  max-width: 4.5rem;
  object-fit: contain;
  vertical-align: middle;
}

/* ---- Eine Zeile im Filterkasten: zwei Zeilen ------------------------
   Vorher stand alles nebeneinander. Bei „Für Demokratie und Vielfalt -
   Bassum gegen Rechts" blieb für den Namen eine Spalte von wenigen
   Zentimetern, und er brach auf sechs Zeilen um, während daneben Kürzel
   und Zahl einsam oben standen.

       [x] [BBB] [Logo]              7
       Bündnis Buntes Brettorf

   Oben, was klein und gleich breit ist; unten der Name über die ganze
   Spalte. Auf jedem Schirm dieselbe Anordnung: Am Telefon ist es eine
   Spalte, und dort hilft die zweite Zeile genauso.
   ------------------------------------------------------------------- */

/* Die Zeile war ein Flex-Kasten — jetzt trägt sie zwei. */
.kal-filter__liste li {
  display: block;
  margin: 0;
}

/* Mehr Luft zwischen den Einträgen, weil jeder jetzt zwei Zeilen hoch
   ist: Ohne das stünden Name und nächstes Kästchen dichter beieinander
   als Kästchen und zugehöriger Name. Und mehr Luft ZWISCHEN den
   Spalten, damit die Spaltengrenze zu sehen ist — sie ist das Einzige,
   was einen Eintrag vom nächsten trennt. */
.kal-filter__liste.kal-filter__liste { gap: .55rem 1.6rem; }

.kal-filter__zeile1 {
  display: flex;
  align-items: center;
  gap: .45rem;
}

/* DIE ZAHL BLEIBT BEIM KÜRZEL, nicht am Spaltenrand. Mit
   `margin-left: auto` standen die Zahlen aller Spalten zwar sauber
   untereinander — aber jede direkt neben dem Kästchen der NÄCHSTEN
   Spalte, und dort las sie sich wie deren Zahl. Am Telefon, wo es nur
   eine Spalte gibt, wäre beides richtig gewesen; eine Regel, die nur
   auf einer Breite stimmt, ist keine. */
.kal-filter__zeile1 .kal-filter__zahl { margin-left: .15rem; }

/* Eingerückt auf die Breite des Kästchens samt Abstand (1.05 + .45),
   damit der Name unter dem Kürzel beginnt und nicht unter dem Haken. */
.kal-filter__zeile2 {
  padding-left: 1.5rem;
  font-size: .92rem;
  line-height: 1.3;
}

.kal-filter__nurdiese {
  margin: .5rem 0 0;
  font-size: .86rem;
}

/* ---- „Führt nach draußen" im Filterkasten ---------------------------
   Dieselben Maße wie in der Terminliste. Zwei Klassen statt einer, weil
   zwei Blöcke — das Zeichen selbst steht seit 140 nur noch einmal da,
   in `partials/extern-zeichen.html.twig`.
   ------------------------------------------------------------------- */

.kal-filter__extern {
  width: .85em;
  height: .85em;
  margin-left: .25em;
  vertical-align: -.08em;
}

/* Ein fremder Veranstalter ohne Link: Der Name steht als Text da. Ein
   Verweis ins Nichts wäre schlechter als keiner. */
.kal-filter__name--ohne {
  font-size: .92rem;
  color: #5A5654;
}