/* ===================================================================
   kalender.css — der Bündniskalender. Seit Update 172 eine eigene Datei.

   WARUM EINE EIGENE DATEI. Der Kalender soll auch auf micou.org laufen,
   aus demselben Plugin. Dafür muss sein Stilblatt allein stehen können.
   Bis 171 lag er in `custom.css`, Zeile 2103 bis zum Ende, durchmischt
   mit Rückblick, Wegweiser und Kopfbild. Jetzt stehen hier GENAU die
   Regeln, die vorher dort standen, in derselben Reihenfolge — kein
   Wert verändert, keine Regel dazu.

   DIE HAUSFARBEN SIND VARIABLEN MIT ERSATZWERT:

       color: var(--kal-haus-text, #1C1B1A);

   Auf demokratiefest.org ist keine dieser Variablen gesetzt — es gilt
   also immer der Wert nach dem Komma, und das ist zeichengleich der
   Wert von 171. Auch im Dunkelmodus: Die Variablen heißen absichtlich
   NICHT `--mc-*`. Die schalten dort um, der Kalender tut es nicht; mit
   `--mc-schwarz` stünde im Dunkelmodus helle Schrift auf weißen Zellen.

   Eine andere Website setzt sie in ihrem eigenen `:root` und bekommt
   ihre Farben — ohne Rücksicht auf Lade-Reihenfolge oder Spezifität.

       --kal-haus-akzent         #F68714  Fläche, Balken, Fokusring
       --kal-haus-akzent-hover   #E07A0E  Akzentknopf unter dem Zeiger
       --kal-haus-akzent-rand    #C96F0C  Rand am Akzentknopf
       --kal-haus-akzent-text    #C2600C  Akzent als Schrift und Linie
       --kal-haus-akzent-dunkel  #A85504  Fokuslinie, „heute" im Raster
       --kal-haus-text           #1C1B1A  Schrift
       --kal-haus-grau           #5A5654  leise Schrift
       --kal-haus-linie          #DDDAD6  Linien und Rahmen
       --kal-haus-hell           #F7F6F4  helle Fläche

   BEWUSST WÖRTLICH geblieben sind:
     * die Art-Farben (`.kal-art-*`) — gleiche Farbe, gleiche Bedeutung,
       auf jeder Website; `pruefe-farben.py` liest die Tafel
     * die Kürzel-Farben der Veranstalter (`.kal-kennung-*`)
     * Bedeutungsfarben: Gold (Hinweis „geändert"), Rot (abgesagt,
       Warnung), Blau (Notiz)
     * Weiß — die Zellen bleiben auf jeder Website weiß; die Art-Farben
       sind gegen Weiß gemessen
     * eine Handvoll Nebengraus, die auf warmem wie kühlem Papier tragen
   =================================================================== */

/* ===================================================================
   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: var(--kal-haus-linie, #DDDAD6); border: 1px solid var(--kal-haus-linie, #DDDAD6);
}
.kal__wochentag {
  background: var(--kal-haus-hell, #F7F6F4); text-align: center; padding: .4rem 0;
  font-size: .75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--kal-haus-grau, #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: var(--kal-haus-hell, #F7F6F4); }
.kal__tag--heute { outline: 2px solid var(--kal-haus-akzent-dunkel, #A85504); outline-offset: -2px; }
.kal__zahl { font-weight: 700; color: var(--kal-haus-grau, #5A5654); line-height: 1; }
.kal__tag--belegt .kal__zahl { color: var(--kal-haus-text, #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: var(--kal-haus-text, #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 var(--kal-haus-akzent, #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 var(--kal-haus-linie, #DDDAD6);
}
.kal-liste__eintrag:focus-visible { outline: 3px solid var(--kal-haus-akzent, #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: var(--kal-haus-grau, #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: var(--kal-haus-grau, #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: var(--kal-haus-grau, #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.

   OHNE RAHMEN UND OHNE EIGENE FLAECHE — seit Update 175. Das Feld bleibt
   quadratisch, aber unsichtbar: Was `contain` an Rand uebrig laesst,
   zeigt den Grund darunter. So liegt nur das Sharepic da, nicht ein
   Kaestchen mit einem Bild darin. Gilt auf jeder Website, die den
   Kalender zeigt — der Grund ist dort jeweils der eigene.
   -------------------------------------------------------------------- */

.kal-liste__plakat {
  display: block;
  float: right;
  width: 5.5rem;
  height: 5.5rem;
  margin: .1rem 0 .5rem .9rem;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: transparent;
}

.kal-liste__plakat:focus-visible { outline: 3px solid var(--kal-haus-akzent, #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: var(--kal-haus-grau, #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: var(--kal-haus-grau, #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: var(--kal-haus-grau, #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 var(--kal-haus-linie, #DDDAD6);
}
.kal-reihen__eintrag label {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  cursor: pointer;
}
.kal-reihen__zahl { color: var(--kal-haus-grau, #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 var(--kal-haus-linie, #DDDAD6);
}
/* ---- Der Schalter im Druckblock — seit Update 162 ------------------

   EIN ECHTES KAESTCHEN MIT BESCHRIFTUNG, kein als Knopf verkleidetes
   Etwas. Die beiden Bloecke darunter tragen Knoepfe, weil dort etwas
   GESCHIEHT; hier wird etwas EINGESTELLT, und ein Knopf, nach dessen
   Druecken nichts passiert, ist eine Enttaeuschung. Das Kaestchen sagt,
   was es ist: eine Stellung, die beim naechsten Drucken gilt.

   Es steht trotzdem in derselben Reihe wie die Knoepfe der Nachbarn,
   damit der Block aussieht wie sie — nur eben mit dem richtigen
   Bedienelement darin.
   -------------------------------------------------------------------- */

.kal-drucken__reihe { align-items: center; }

.kal-drucken__schalter {
  width: 1.15rem; height: 1.15rem;
  margin: 0; flex: 0 0 auto;
  accent-color: var(--mc-rot);
}

.kal-drucken__aufschrift {
  font-size: .95rem; line-height: 1.3; cursor: pointer;
}

/* ---- Der Block „Als Text verschicken" — seit Update 163 ------------

   VERSTECKT, BIS DAS SKRIPT IHN AUFDECKT. Diese eine Regel ist der
   Grund, warum `hidden` hier nicht zu uebergehen ist: `hidden` wirkt
   als `display: none` aus dem Stylesheet des Browsers, und das verliert
   gegen JEDE Klassenregel, die `display` setzt. Heute setzt keine eine
   — morgen koennte eine `.kal-form__gruppe { display: flow-root }`
   dazukommen, und dann stuende der Block ploetzlich auch ohne
   JavaScript da, mit einem Knopf, der nichts kann. Zwei Klassen
   Spezifitaet mehr, und das kann nicht passieren.

   Sie gilt absichtlich fuer BEIDE versteckten Teile: den Block und das
   Ausweichfeld darin.

   KEINE DRUCKREGEL NOETIG: `.kal-form__abschluss` ist auf Papier
   ohnehin `display: none`, und dieser Block steckt darin.
   -------------------------------------------------------------------- */

.kal-teilen[hidden], .kal-teilen__feld[hidden] { display: none; }

/* ---- `<template>` zeichnet nie — und das steht HIER ----------------

   Der Klartext jedes Termins liegt in einem `<template>`. Ein Browser,
   der das Element kennt, stellt seinen Inhalt von sich aus nicht dar;
   einer, der es NICHT kennt, haelt es fuer ein unbekanntes Element und
   zeichnet seine Kinder als gewoehnlichen Text — dann stuenden die
   Terminzeilen doppelt auf der Seite.

   ABGESICHERT WAR DAS SCHON, ABER NICHT HIER: In `blades.min.css` von
   quark2 steht `[hidden],template{display:none!important}` (es kommt
   aus Pico). Die Regel haengt am TAG-NAMEN, nicht am Verstaendnis des
   Elements, und greift deshalb auch in einem Browser, der `<template>`
   nicht kennt — nachgemessen, nachdem ein erster Gegentest das Falsche
   gemessen hatte (er benannte den Tag um und pruefte damit einen Fall,
   den es nicht gibt).

   WARUM SIE TROTZDEM HIER STEHT: quark2 ist fremder Code, und Update
   159 hat gezeigt, wie ueberraschend sein Verhalten sein kann. Eine
   Zeile hier macht das Theme unabhaengig davon, und die Probe prueft
   diese Zeile — nicht die von quark2.

   `!important` IST HIER DIE ABSICHT, keine Faulheit: Ein `<template>`
   darf unter keiner Bedingung zeichnen, und `custom.css` kann vor oder
   nach dem Stilblatt des Eltern-Themes geladen werden. Wo Spezifitaet
   reicht, steht in diesem Blatt ausdruecklich eine doppelte Klasse
   statt `!important` (siehe die Listen weiter oben).
   -------------------------------------------------------------------- */

template { display: none !important; }

/* Die Rueckmeldung neben dem Knopf. Sie steht in der Knopfreihe, also
   in einem `flex`-Kasten mit `align-items: stretch` — ohne
   `align-self` stuende der kurze Satz oben am Knopfrand statt neben
   seiner Mitte. */
.kal-teilen__sagt {
  align-self: center;
  font-size: .9rem; line-height: 1.4; color: var(--kal-haus-grau, #5A5654);
}

/* Das Ausweichfeld, wenn die Zwischenablage sich verweigert. Volle
   Breite und `font-family: inherit`: Es ist Text zum Markieren, kein
   Quelltext — eine Schreibmaschinenschrift wuerde behaupten, hier sei
   die Ausrichtung in Spalten wichtig. Sie ist es gerade nicht; die
   Nachricht gliedert sich nur durch Leerzeilen. */
.kal-teilen__feld {
  box-sizing: border-box;
  width: 100%; margin: .9rem 0 0; padding: .6rem .7rem;
  border: 1px solid #BFB9B4; border-radius: 3px;
  background: #FFFFFF; color: var(--kal-haus-text, #1C1B1A);
  font-family: inherit; font-size: .9rem; line-height: 1.5;
  resize: vertical;
}

.kal-form__nachsatz { margin: .5rem 0 0; font-size: .85rem; color: var(--kal-haus-grau, #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: var(--kal-haus-hell, #F7F6F4);
  font-size: .92rem;
}

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

.kal-abo {
  margin: 2.5rem 0 0; padding: 1.2rem 1.4rem;
  background: var(--kal-haus-hell, #F7F6F4); border: 1px solid var(--kal-haus-linie, #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 var(--kal-haus-linie, #DDDAD6); border-radius: 3px;
  font-size: .88rem; overflow-wrap: anywhere;
}
.kal-abo__hinweis { margin: .5rem 0 0; font-size: .88rem; color: var(--kal-haus-grau, #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: var(--kal-haus-grau, #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: var(--kal-haus-hell, #F7F6F4);
  font-size: .9rem; color: var(--kal-haus-text, #1C1B1A);
}
.kal-notiz code {
  padding: .05rem .3rem; background: #FFFFFF;
  border: 1px solid var(--kal-haus-linie, #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: var(--kal-haus-hell, #F7F6F4); border: 1px solid var(--kal-haus-linie, #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: var(--kal-haus-hell, #F7F6F4);
  font-size: .95rem;
}
.kal-form__leer:focus-visible { outline: 3px solid var(--kal-haus-akzent, #F68714); outline-offset: 2px; }

/* ---- Die Meldung geht, sobald etwas angekreuzt ist — seit 168 ------

   SIE BLIEB STEHEN, UND DAS WAR DAS PROBLEM. Die Meldung haengt an
   `?leer=1` in der Adresse. Wer daraufhin ein Kaestchen ankreuzt, laedt
   nichts neu — also blieb sie da und widersprach dem, was der Benutzer
   gerade getan hatte. Gemeldet von Mani.

   OHNE JAVASCRIPT, mit demselben Mittel wie die Druckregel aus 160:
   `:has()` sieht den Zustand der Kaestchen live, und zwar in dem
   Augenblick, in dem er sich aendert. Keine Zeile Skript, kein
   Neuladen.

   `:root:has(…)` STATT EINES NAEHEREN VORFAHREN: Die Meldung steht
   zwischen Filterkasten und Knopfreihe, die Kaestchen stecken in der
   Liste darunter. Einen gemeinsamen Vorfahren haben beide erst weit
   oben; `:root` ist der sichere, und das `:has()` daran kostet nichts,
   weil es ohnehin nur einmal je Seite ausgewertet wird.

   SIE KEHRT ZURUECK, wenn der letzte Haken wieder faellt — und das ist
   richtig: Dann stimmt sie wieder. Genau deshalb heisst es seit 168
   auch „Es IST kein Termin ausgewaehlt" und nicht mehr „Es WAR": Der
   Satz beschreibt jetzt einen Zustand, keinen vergangenen Augenblick.
   -------------------------------------------------------------------- */

:root:has(.kal-liste__kaestchen:checked) .kal-form__leer { display: none; }

/* ---- Ü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: var(--kal-haus-hell, #F7F6F4); border: 1px solid var(--kal-haus-linie, #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: var(--kal-haus-grau, #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 var(--kal-haus-linie, #DDDAD6);
}
.kal-uebersicht__tabelle th {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--kal-haus-grau, #5A5654); white-space: nowrap;
}
.kal-uebersicht__tabelle code {
  padding: .1rem .35rem; background: #FFFFFF;
  border: 1px solid var(--kal-haus-linie, #DDDAD6); border-radius: 3px;
  font-size: .9em; white-space: nowrap;
}
.kal-uebersicht__reihen {
  display: block; margin-top: .2rem; font-size: .85em; color: var(--kal-haus-grau, #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 neunzehn Arten in elf Farben — seit Update 171 -------------

   EINE TAFEL, NICHT MEHR VIER STELLEN. Bis Update 170 stand hier die
   erste Gruppe, und 128, 134 und 145 haben ihre Farben weiter unten
   angehängt — vier Stellen, an denen eine Farbe stehen konnte. Wer die
   Farben lesen wollte, musste alle vier finden; wer eine ändern
   wollte, die richtige. Jetzt stehen sie beieinander.

   NEUNZEHN ARTEN, ELF FARBEN. Jede Art hatte ihre eigene, das ging bis
   elf und dann nicht weiter: Update 134 hat den LETZTEN freien Farbton
   verbraucht. Nachgerechnet beim Bau von 171 — in die Lücke, die das
   Zusammenlegen öffnet, passen ZWEI weitere Farben (Abstand 8,9–9,3
   gegen die Messlatte 8,3), DREI nie (bester Satz 5,2: zwei praktisch
   gleiche Sandtöne). Also teilen verwandte Arten eine Farbe.

   KEIN FARBWERT HAT SICH GEÄNDERT. Es sind zeichengleich die elf Werte
   von vorher; neu ist nur, wer auf welchen zeigt. Die engste Stelle im
   Satz bleibt damit genau die heutige (fest/mahnwache, 8,3).

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

   Kein Orange (#F68714): gegen Weiß 2,5:1.

   DIE ERSTE KLASSE JEDER ZEILE IST DIE DER GRUPPE. `ART_GRUPPE` im
   Plugin nennt sie, und die Legende nimmt sie für ihren Punkt. Wer
   hier eine Klasse ergänzt, muss sie dort eintragen — die Probe
   vergleicht beide Listen.
   ------------------------------------------------------------------- */
.kal-art-treffen,
.kal-art-info,
.kal-art-infostand   { --art-flaeche:#B7E1B7; --art-rand:#378637; }

.kal-art-planung     { --art-flaeche:#B7D0E1; --art-rand:#40759C; }

.kal-art-kundgebung,
.kal-art-demo        { --art-flaeche:#E8B9B0; --art-rand:#B24934; }

.kal-art-mahnwache,
.kal-art-gedenken    { --art-flaeche:#C9BADE; --art-rand:#7B56AE; }

.kal-art-vortrag,
.kal-art-lesung      { --art-flaeche:#B5E3D8; --art-rand:#338772; }

/* Oliv, bis 170 die Farbe von „Demo". Es steht mit 8,4 am engsten zum
   Grün — also an die kleinere der beiden neuen Gruppen. */
.kal-art-diskussion,
.kal-art-podium      { --art-flaeche:#D9E3B5; --art-rand:#708131; }

/* Workshop seit Update 185 — verwandt mit der Konferenz, dieselbe Farbe. */
.kal-art-konferenz,
.kal-art-workshop    { --art-flaeche:#E3C9B5; --art-rand:#9D663C; }

.kal-art-cafe        { --art-flaeche:#B5C1E3; --art-rand:#435CA3; }

.kal-art-fest        { --art-flaeche:#E1B7D3; --art-rand:#AA4689; }

/* Gelb, bis 170 die Farbe von „Infoveranstaltung". Es steht mit 11,2
   am freiesten — also an die größere der beiden neuen Gruppen. */
.kal-art-theater,
.kal-art-film,
.kal-art-ausstellung { --art-flaeche:#E8DAB0; --art-rand:#937725; }

/* Absichtlich unbunt, und deshalb aus dem Bauplan der anderen
   genommen: Es säte ihn zu. */
.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: var(--kal-haus-text, #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: var(--kal-haus-text, #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 var(--kal-haus-linie, #DDDAD6);
  padding: .05rem .3rem; font-size: .75rem;
}
.kal__marke--gross {
  background: #EDEAE7; border: 1px solid var(--kal-haus-linie, #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: var(--kal-haus-grau, #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: var(--kal-haus-text, #1C1B1A); font-size: .8rem; font-weight: 700;
}
.kal-liste__kennung { margin: .3rem 0 0; font-size: .8rem; color: var(--kal-haus-grau, #5A5654); }
.kal-liste__kennung code {
  padding: .05rem .3rem; background: var(--kal-haus-hell, #F7F6F4);
  border: 1px solid var(--kal-haus-linie, #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 var(--kal-haus-linie, #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: var(--kal-haus-hell, #F7F6F4); border: 1px solid var(--kal-haus-linie, #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: var(--kal-haus-grau, #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: var(--kal-haus-grau, #5A5654); font-size: .82rem; }

.kal-filter__knoepfe {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-top: .8rem; padding-top: .7rem; border-top: 1px solid var(--kal-haus-linie, #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;
}

/* SEIT UPDATE 158 STEHEN HIER ZWEI SAETZE statt einem — einer fuer den
   Weg mit Knopf, einer fuer den Weg mit Zuklappen. Diese Regel hat
   frueher „den" Satz eingeblendet; sie wuerde jetzt BEIDE einblenden.
   Welcher gilt, entscheidet sich weiter unten am Merkmal
   `data-sofort`, in zwei Regeln mit derselben Bedingung. */

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

/* Fehlendes Logo in der Redaktionsübersicht — grau, nicht rot: Es ist
   eine offene Aufgabe, keine Störung. */
.kal-uebersicht__fehlt { color: var(--kal-haus-grau, #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: var(--kal-haus-grau, #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 var(--kal-haus-linie, #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 var(--kal-haus-linie, #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: var(--kal-haus-grau, #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 var(--kal-haus-linie, #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: var(--kal-haus-grau, #5A5654);
}

.kal-abo__kopieren kbd,
.kal-drucken kbd {
  padding: .05rem .35rem;
  border: 1px solid var(--kal-haus-linie, #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 var(--kal-haus-linie, #DDDAD6);
  font-size: .88rem;
  color: var(--kal-haus-grau, #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.
   ==================================================================== */

/* Der Zusatz „— Auswahl" in der Ueberschrift gilt NUR auf Papier (seit
   Update 160). Auf dem Schirm waere er falsch: Dort steht die ganze
   Liste, angekreuzt oder nicht. Deshalb hier aus, und weiter unten im
   Druckabschnitt bedingt wieder an. */
.kal-titel__auswahl { display: none; }

@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 { display: none; }

  /* ---- ANGEKREUZTE TERMINE BESCHRAENKEN DEN AUSDRUCK — Update 160 ---

     Ist in der Liste IRGENDEIN Kaestchen angekreuzt, fallen alle
     Eintraege ohne Haken weg. Ist keines angekreuzt, faellt nichts weg
     und es wird gedruckt wie bisher. Genau zwei Zeilen, kein
     JavaScript.

     `:checked` ist der Zustand IM BROWSER, nicht der vom Server
     gelieferte. Deshalb braucht es kein Neuladen: ankreuzen, drucken.

     DIE KAESTCHEN SELBST SIND OBEN SCHON AUSGEBLENDET, und das stoert
     hier nicht: `:checked` haengt nicht daran, ob etwas zu sehen ist.

     OHNE `:has()` faellt der ganze Selektor weg, und es wird gedruckt
     wie vor diesem Update. Die harmlose Richtung. */

  .kal-liste:has(.kal-liste__kaestchen:checked)
    .kal-liste__eintrag:not(:has(.kal-liste__kaestchen:checked)) { display: none; }

  /* UND DIE UEBERSCHRIFT SAGT ES. Ein Blatt, das herumgereicht wird,
     steht ohne den Menschen da, der die Haken gesetzt hat — „Die
     naechsten Termine" mit zwei Eintraegen liest sich dann wie der
     ganze Kalender.

     ANGEHAENGT, NICHT ERSETZT. Die Ueberschrift rechnet den Zeitraum
     aus („Termine vom 01.11. bis 30.11.2026"), und auf Papier ist sie
     die EINZIGE Stelle, an der er steht — der Zeitraum-Kasten faellt
     beim Drucken weg (Update 122). Sie durch „Terminauswahl" zu
     ersetzen loeschte also genau das, was der Zettel am noetigsten
     braucht. Die Begruendung steht seit Update 123 im Kopf von
     `partials/kalender-titel.html.twig`.

     DER ANKER IST DAS GANZE DOKUMENT, nicht ein Geschwister: Zwischen
     Ueberschrift und Liste stehen der Reihenfolge-Umschalter und das
     Formular. */
  :root:has(.kal-liste__kaestchen:checked) .kal-titel__auswahl { display: inline; }

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

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

  /* ---- DIE BESCHREIBUNGEN SIND SEIT UPDATE 162 EINE WAHL -----------

     Bis hierher wurde JEDE Beschreibung mitgedruckt, auch die
     zugeklappten — ein Blatt mit zwanzig Terminen wurde dadurch zu
     vieren. Jetzt entscheidet das Kaestchen im Block „Auf Papier oder
     als PDF":

       nicht angekreuzt (Vorgabe)  es druckt, was du aufgeklappt hast
       angekreuzt                  es druckt alle Beschreibungen

     Die Vorgabe ist damit „was du siehst, bekommst du" — ein
     zugeklappter `<details>` zeigt seinen Inhalt von sich aus nicht.

     DER ANKER IST DAS GANZE DOKUMENT. Das Kaestchen steht unter der
     Liste, die Termine darueber; ein Geschwister-Griff reicht nicht.
     Ohne `:has()` bleibt es bei „nur das Aufgeklappte" — die harmlose
     Richtung, denn zu wenig gedruckt ist aergerlich, zu viel kostet
     Papier und macht den Zettel unuebersichtlich.

     `::details-content` kennt nicht jeder Browser — gemessen: Chromium
     ja, aelteres Firefox nein. Dort bleibt es ebenfalls beim
     Aufgeklappten, und das Kaestchen tut nichts. Es verspricht nichts,
     was es nicht halten kann: Die Erklaerung daneben sagt, dass im
     Zweifel hilft, vorher aufzuklappen. */

  /* ---- Ein langer Eintrag darf umbrechen — seit Update 170 -------

     `break-inside: avoid` haelt jeden Eintrag zusammen. Das ist
     richtig, solange er kurz ist: Datum, Titel und Ort gehoeren auf
     dieselbe Seite. Sobald aber eine Beschreibung mitgedruckt wird,
     kann ein Eintrag eine halbe Seite lang werden — und wandert dann
     als Ganzes auf die naechste, mit einer Luecke davor.

     ERLAUBT WIRD DAS NUR DORT, WO ES NOETIG IST: nur ein Eintrag, der
     ueberhaupt eine Beschreibung HAT, darf geteilt werden — und auch
     der nur, wenn sie mitgedruckt wird (Schalter an) oder er
     aufgeklappt ist. Ein Eintrag ohne Beschreibung bleibt unteilbar
     wie seit Update 160. Gemessen, und das war der Grund fuer diese
     Einschraenkung: Ohne `:has(.kal-liste__mehr)` wurde beim
     Schalter-An auch ein KURZER Eintrag getrennt — Ort auf der einen,
     Buendnis auf der naechsten Seite.

     DIE BRUCHSTELLE WIRD IN DEN BESCHREIBUNGSTEXT GEDRAENGT. Im
     Eintrag stehen die Teile in dieser Reihenfolge:

       Titel · Ort · Anschrift · Buendnis · BESCHREIBUNG · Plakat · ICS

     Alles davor bekommt `break-after: avoid`, alles danach
     `break-before: avoid`. Damit bleibt als erlaubte Stelle nur der
     Text in der Mitte — der Seitenfuss traegt also immer Datum,
     Titel, Ort und den Anfang der Beschreibung, und die naechste Seite
     setzt den Satz fort.

     UND DIE LAENGE MISST `orphans`/`widows`. CSS kann nicht fragen
     „ist dieser Eintrag hoeher als eine halbe Seite?". Es braucht die
     Frage auch nicht: Drei Zeilen muessen oben, drei unten stehen
     bleiben. Eine Beschreibung unter sechs Zeilen hat damit gar keine
     erlaubte Bruchstelle und wandert als Ganzes — genau wie bisher.
     Geteilt wird nur, was lang genug ist, dass Teilen sich lohnt.

     DIE KETTE HAENGT AN `--kal-bruch`, NICHT AN DEN KLASSEN. Zuerst
     stand das `break-after: avoid` unbedingt da — und VERSCHOB den
     Ausdruck auch bei AUSGESCHALTETEM Schalter um einen Eintrag.
     Gemessen, nicht vermutet: Ohne diese vier Zeilen war der Ausdruck
     Byte fuer Byte der alte, mit ihnen nicht. Ein `avoid` in einem
     unteilbaren Eintrag soll nichts bewirken, tut es aber. Also setzt
     der teilbare Eintrag die Eigenschaft, und nur wer sie geerbt hat,
     meidet den Bruch; alle anderen bekommen den Rueckfallwert `auto`
     und bleiben, wie sie waren. */
  :root:has(.kal-drucken__schalter:checked) .kal-liste__eintrag:has(.kal-liste__mehr),
  .kal-liste__eintrag:has(.kal-liste__mehr[open]) {
    break-inside: auto;
    page-break-inside: auto;
    --kal-bruch: avoid;
  }

  /* Die Datumsspalte ist eine Rasterzelle fuer sich und darf nie
     zerfallen — sonst stuende das Jahr unter der Seitengrenze. Das
     gilt unbedingt: gemessen, dass es den Ausdruck ohne Schalter
     nicht anfasst. */
  .kal-liste__wann,
  .kal-liste__titel,
  .kal-liste__wo,
  .kal-liste__anschrift,
  .kal-liste__buendnis { break-inside: avoid; }

  /* Vor der Beschreibung: nicht trennen. Seit Update 178 steht das
     Buendnis NACH der Beschreibung und gehoert deshalb zur zweiten
     Kette, nicht mehr zu dieser. */
  .kal-liste__titel,
  .kal-liste__wo,
  .kal-liste__anschrift {
    break-after: var(--kal-bruch, auto);
    page-break-after: var(--kal-bruch, auto);
  }

  /* Nach der Beschreibung: auch nicht. Der Rest des Eintrags haengt
     an ihrem Ende, statt allein auf die naechste Seite zu rutschen. */
  .kal-liste__buendnis,
  .kal-liste__plakatlink,
  .kal-liste__ics {
    break-before: var(--kal-bruch, auto);
    page-break-before: var(--kal-bruch, auto);
  }

  /* Keine einzelne Zeile allein am Seitenanfang oder -ende. */
  .kal-liste__text,
  .kal-liste__text p { orphans: 3; widows: 3; }

  :root:has(.kal-drucken__schalter:checked) .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; }
}

/* ---- 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: var(--kal-haus-text, #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 var(--kal-haus-linie, #DDDAD6);
  font-size: .88rem;
  line-height: 1.5;
  color: var(--kal-haus-grau, #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: var(--kal-haus-grau, #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: var(--kal-haus-text, #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: var(--kal-haus-akzent, #F68714);
    border-color: var(--kal-haus-akzent-rand, #C96F0C);
    color: var(--kal-haus-text, #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: var(--kal-haus-akzent-hover, #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 var(--kal-haus-linie, #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: var(--kal-haus-text, #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: var(--kal-haus-akzent-rand, #C96F0C);
    color: var(--kal-haus-text, #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: var(--kal-haus-akzent-hover, #E07A0E);
    color: var(--kal-haus-text, #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 var(--kal-haus-linie, #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: var(--kal-haus-text, #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: var(--kal-haus-akzent, #F68714);
    border-color: var(--kal-haus-akzent-rand, #C96F0C);
    color: var(--kal-haus-text, #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: var(--kal-haus-akzent-hover, #E07A0E);
    color: var(--kal-haus-text, #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: var(--kal-haus-text, #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: var(--kal-haus-akzent, #F68714);
  border-color: var(--kal-haus-akzent-rand, #C96F0C);
  color: var(--kal-haus-text, #1C1B1A);
  font-weight: 600;
  cursor: pointer;
}

.kal-filter__knoepfe a.btn.btn--linie:hover {
  background: var(--kal-haus-akzent-hover, #E07A0E);
  color: var(--kal-haus-text, #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 var(--kal-haus-linie, #DDDAD6);
  border-left: 4px solid var(--kal-haus-akzent, #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 var(--kal-haus-linie, #DDDAD6);
  align-self: stretch;
  text-align: center;
  font-weight: 600;
}
.kal-liste__bis { color: var(--kal-haus-grau, #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: var(--kal-haus-text, #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: var(--kal-haus-grau, #5A5654); }

.kal-liste__anschrift {
  margin: 0 0 .1rem;
  font-size: .85rem;
  color: var(--kal-haus-grau, #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. */

/* DIE ZWEI FARBEN STEHEN SEIT UPDATE 171 IN DER TAFEL WEITER OBEN,
   zusammen mit allen anderen. Die Begruendung darueber gilt weiter;
   was sie erklaert, ist nur umgezogen. */


/* ====================================================================
   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 var(--kal-haus-linie, #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 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 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: var(--kal-haus-akzent-text, #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 var(--kal-haus-akzent-text, #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: var(--kal-haus-hell, #F7F6F4);
  border: 1px solid var(--kal-haus-linie, #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: var(--kal-haus-grau, #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: var(--kal-haus-grau, #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 var(--kal-haus-linie, #DDDAD6);
  border-radius: 4px;
  background: #FFFFFF;
  color: var(--kal-haus-text, #1C1B1A);
}

.kal-zeit__feld:focus-visible {
  outline: 2px solid var(--kal-haus-akzent-text, #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: var(--kal-haus-linie, #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: var(--kal-haus-akzent-text, #C2600C);
}

.kal-zeit__sym:focus-visible {
  outline: 2px solid var(--kal-haus-akzent-text, #C2600C);
  outline-offset: 1px;
  color: var(--kal-haus-akzent-text, #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: var(--kal-haus-akzent-text, #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: var(--kal-haus-grau, #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;
}


/* ---- 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. */

/* DIE FARBE STEHT SEIT UPDATE 171 IN DER TAFEL WEITER OBEN. */

/* ====================================================================
   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.
   ==================================================================== */

/* DIESE FARBE TRAEGT SEIT UPDATE 171 „Diskussion / Podiumsdiskussion",
   und sie steht in der Tafel weiter oben. „Demo" teilt seitdem das
   Terrakotta mit „Kundgebung" — gewuenscht, nicht erzwungen. Der Grund
   darueber bleibt lesenswert: Oliv war der letzte freie Farbton. */

/* ====================================================================
   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 var(--kal-haus-linie, #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: var(--kal-haus-grau, #5A5654);
  padding: .15rem 0;
}

.kal-filter__gruppe > summary:hover { color: var(--kal-haus-text, #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 var(--kal-haus-akzent-dunkel, #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: var(--kal-haus-grau, #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: var(--kal-haus-grau, #5A5654);
  padding: .15rem 0;
}

.kal-einleitung__mehr > summary:hover { color: var(--kal-haus-text, #1C1B1A); }

.kal-einleitung__mehr > summary:focus-visible {
  outline: 2px solid var(--kal-haus-akzent-dunkel, #A85504);
  outline-offset: 2px;
  border-radius: 3px;
}

.kal-einleitung__mehr[open] > summary { margin-bottom: .3rem; }

/* ---- Wenn das Skript die Arbeit uebernommen hat — seit Update 158 ---

   `data-sofort` setzt das Skript ERST, nachdem es sich erfolgreich
   eingehaengt hat. Nur daran haengen diese Regeln. Faellt das Skript
   aus, laedt es nicht, blockt es jemand oder kippt es mitten im
   Einhaengen um, ist das Merkmal nicht da — und alles sieht aus und
   verhaelt sich wie ohne JavaScript.

   Das ist die umgekehrte Reihenfolge zum Ueblichen: Nicht „Knopf weg,
   sobald JavaScript laeuft", sondern „Knopf weg, sobald bewiesen ist,
   dass die Ersatzmechanik steht".

   DER KNOPF GEHT NUR WEG, SOLANGE BEIDE BEREICHE ZU SIND, und das ist
   kein Schoenheitsgriff. In einem zugeklappten `<details>` laesst sich
   kein Kaestchen anklicken und keines mit dem Tabulator erreichen —
   nachgemessen, nicht angenommen. Beide zu heisst also: Es KANN keine
   nicht uebernommene Aenderung geben, und ein Knopf, der nichts zu
   uebernehmen hat, soll nicht dastehen.

   Ist ein Bereich offen, steht er wieder da. Dann gibt es etwas zu
   uebernehmen, und man darf waehlen: zuklappen oder druecken.

   OHNE `:has()` faellt jede dieser Regeln weg — der ganze Selektor ist
   dann ungueltig und wird uebersprungen. Dann bleibt der Knopf stehen,
   immer. Das ist die richtige Richtung zum Ausfallen.
   -------------------------------------------------------------------- */

.kal-filter[data-sofort]:not(:has(details.kal-filter__gruppe[open]))
  .kal-filter__anzeigen { display: none; }

/* Der Halbsatz „, und druecke Auswahl uebernehmen" geht IMMER weg,
   sobald das Skript laeuft — nicht nur, solange der Knopf fort ist.
   Sonst aenderte sich der Satz beim Auf- und Zuklappen mit, und ein
   Text, der unter der Hand wechselt, liest sich schlechter als einer,
   der in beiden Zustaenden stimmt. Uebrig bleibt „Waehle aus, wessen
   Termine erscheinen sollen." — das gilt so oder so. */
.kal-filter[data-sofort] .kal-filter__nurknopf { display: none; }

/* DER HINWEIS ZUM ZUKLAPPEN gilt nur mit Skript und nur, solange es
   etwas zuzuklappen gibt. Er steht neben dem Knopf: Wer einen Bereich
   offen hat, sieht beide Wege nebeneinander. */
.kal-filter__sofort { display: none; margin: .6rem 0 0; font-size: .9rem; }

.kal-filter[data-sofort]:has(details.kal-filter__gruppe[open])
  .kal-filter__sofort { display: block; }

/* ---- „Du musst noch uebernehmen", zweimal ---------------------------

   Denselben Satz mit einem eingeschobenen Halbsatz zu flicken waere der
   billigere Weg und der schlechtere. Also steht jeder einmal ganz in
   der Vorlage, und hier entscheidet sich, welcher gilt. Die Bedingung
   `[checked]` gegen `:checked` ist dieselbe wie oben bei Update 102 —
   eine Regel, zwei Leser, kein zweiter Begriff von „geaendert".
   -------------------------------------------------------------------- */

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

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

/* DIE KNOPFREIHE BLEIBT STEHEN, und zwar mit Absicht. Ohne den Knopf
   „Auswahl uebernehmen" steht dort immer noch „Alle auswaehlen" oder
   „Alle abwaehlen" — in jedem der drei Faelle genau einer oder beide,
   nie keiner. Die Reihe einzuklappen gaebe es also gar nicht zu tun,
   und eine Regel, die nie zutrifft, sieht nur so aus wie Vorsorge. */

.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 var(--kal-haus-linie, #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; }

/* GROSS GENUG, UM SIE ZU ERKENNEN — seit Update 153.
   Vorher 1.15rem hoch und höchstens 4.5rem breit. Das war als „eine
   Zeile, keine zweite Liste" gedacht und ging in die falsche Richtung:
   Bei einem Logo mit Schrift darin — und das sind fast alle — blieb von
   „Für Demokratie und Vielfalt · Bassum gegen Rechts" ein grauer
   Streifen. Ein Zeichen, das man nicht erkennt, ist kein Zeichen.

   1.9rem sind zwei Drittel mehr. Die Reihe bleibt eine Reihe, weil die
   Logos ohnehin nebeneinander umbrechen; sie wird nur höher, und die
   Luft darum (`.kal-filter__gewaehlt`) ist seit 150 schon da.

   Die Breite wächst mit: Ein querformatiges Logo wäre sonst von der
   alten Schranke gestutzt und bliebe trotz mehr Höhe gleich klein —
   `object-fit: contain` macht es dann nur flacher, nicht größer. */
.kal-filter__gewaehlt-logo {
  height: 1.9rem;
  width: auto;
  max-width: 7.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: var(--kal-haus-grau, #5A5654);
}

/* ====================================================================
   Update 176 — der Wochentag
   ====================================================================

   GROSS LINKS NEBEN DEM DATUMSKASTEN, in der Grösse der Tageszahl und
   im leisen Grau: „Di  27 OKT 2026". Die Datumsspalte wird dafür
   breiter (4,6 → 7rem), der Kasten rückt nach rechts.

   AUF DEM TELEFON steht er vorn in der Datumszeile: „Di 27 OKT 2026
   19:00 bis 21:00".

   EINE FLÄCHE FÜR DEN GANZEN BLOCK — wahlweise. Wochentag und
   Datumskasten zusammen können auf einer Farbfläche stehen, hell auf
   dunkel. Hier ist keine der Variablen gesetzt, also bleibt alles, wie
   es war: kein Grund, keine Polsterung, die gewohnten Farben. Eine
   andere Website setzt sie in ihrem eigenen `:root`:

       --kal-haus-datum-grund    Fläche hinter Wochentag und Datum
       --kal-haus-datum-text     Tageszahl, Monat, Uhrzeiten
       --kal-haus-datum-leise    Wochentag und Jahr
       --kal-haus-datum-linie    Strich über der Uhrzeit
       --kal-haus-datum-polster  Innenabstand des Blocks
       --kal-haus-datum-rund     Rundung der Ecken

   Gedruckt wird der Block so, wie er auf dem Schirm steht (dieselbe
   Entscheidung wie beim Seitenkopf, Update 162). Ohne Fläche ist die
   Schrift auf Papier schwarz wie bisher.
   ------------------------------------------------------------------ */

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

.kal-liste__wann {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: .55rem;
  padding: var(--kal-haus-datum-polster, 0);
  border-radius: var(--kal-haus-datum-rund, 0);
  background: var(--kal-haus-datum-grund, transparent);
  color: var(--kal-haus-datum-text, inherit);
}

.kal-liste__wt {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.05;
  padding-top: .1rem;
  color: var(--kal-haus-datum-leise, var(--kal-haus-grau, #5A5654));
}

.kal-liste__wann .kal-liste__jahr {
  color: var(--kal-haus-datum-leise, var(--kal-haus-grau, #5A5654));
}

.kal-liste__wann .kal-liste__datum .kal-liste__von,
.kal-liste__wann .kal-liste__datum .kal-liste__bis {
  color: var(--kal-haus-datum-text, #3A3633);
}

.kal-liste__wann .kal-liste__datum .kal-liste__von {
  border-top-color: var(--kal-haus-datum-linie, var(--kal-haus-linie, #DDDAD6));
}

@media (max-width: 620px) {
  .kal-liste__wann {
    justify-content: flex-start;
    align-items: baseline;
    gap: .35rem;
    align-self: start;
    justify-self: start;
  }
  .kal-liste__wt { font-size: 1.05rem; padding-top: 0; }
}

@media print {
  .kal-liste__eintrag { grid-template-columns: 7rem 1fr; }
  .kal-liste__wann {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .kal-liste__wann .kal-liste__datum .kal-liste__von,
  .kal-liste__wann .kal-liste__datum .kal-liste__bis {
    color: var(--kal-haus-datum-text, #000);
  }
}

/* ====================================================================
   Update 177 — „In den Kalender" ist ein Knopf, Verweise bleiben Verweise
   ====================================================================

   DIE REGEL: Was woanders HINFÜHRT, sieht aus wie ein Verweis
   (unterstrichen; nach draußen mit Pfeil-Zeichen). Was etwas TUT — eine
   Datei laden, ein Kalenderprogramm öffnen —, sieht aus wie ein Knopf.

   „In den Kalender" tut etwas, also ein kleiner UMRISS-Knopf: Rahmen und
   Schrift in der dunklen Akzentfarbe, keine Fläche. Gefüllt wäre er in
   einer Liste von dreißig Terminen dreißigmal die lauteste Stelle — und
   die Akzentfarbe wirkt nur, solange sie selten ist. Unter dem Zeiger
   füllt er sich.

   Dunkle Akzentfarbe auf Weiß: 5,3:1 hier (#A85504), 7,3:1 auf
   micou.org — auch umgekehrt, weiß auf der Fläche, gleich viel.

   „Mehr dazu" bleibt ein Verweis. Das Aufklappen der Beschreibung heißt
   jetzt „Beschreibung" (siehe kalender-liste.html.twig).

   Auf Papier bleibt der Knopf ausgeblendet wie bisher (Update 111). */

.kal-liste__ics { margin-top: .5rem; }

.kal-liste__ics a {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .18rem .65rem;
  border: 1px solid var(--kal-haus-akzent-dunkel, #A85504);
  border-radius: 4px;
  background: transparent;
  color: var(--kal-haus-akzent-dunkel, #A85504);
  font-size: .85rem;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
}

.kal-liste__ics a:hover {
  background: var(--kal-haus-akzent-dunkel, #A85504);
  color: #FFFFFF;
}

.kal-liste__ics a:focus-visible {
  outline: 2px solid var(--kal-haus-akzent-dunkel, #A85504);
  outline-offset: 2px;
}

/* ---- „Als Text teilen" am einzelnen Termin — seit Update 207 ---------

   Derselbe Umrissknopf wie „In den Kalender", daneben. Ein `<button>`,
   kein Verweis: Er führt nirgends hin, er kopiert bzw. öffnet das
   Teilen-Menü. Die Regeln für Schrift und Rand stehen darum hier noch
   einmal ausdrücklich — ein Knopf erbt sie nicht, und micou.org (Pico)
   gibt jedem `button` sonst eine blaue Fläche. Doppelte Klasse für den
   nötigen Vorrang. `[hidden]` bleibt verborgen (ohne Skript). */

.kal-liste__ics .kal-liste__teilen.kal-liste__teilen {
  display: inline-flex;
  align-items: center;
  width: auto;
  margin: 0 0 0 .4rem;
  padding: .18rem .65rem;
  border: 1px solid var(--kal-haus-akzent-dunkel, #A85504);
  border-radius: 4px;
  background: transparent;
  box-shadow: none;
  color: var(--kal-haus-akzent-dunkel, #A85504);
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  line-height: 1.4;
  vertical-align: baseline;
  cursor: pointer;
}

.kal-liste__ics .kal-liste__teilen.kal-liste__teilen[hidden] { display: none; }

.kal-liste__ics .kal-liste__teilen.kal-liste__teilen:hover {
  background: var(--kal-haus-akzent-dunkel, #A85504);
  color: #FFFFFF;
}

.kal-liste__ics .kal-liste__teilen.kal-liste__teilen:focus-visible {
  outline: 2px solid var(--kal-haus-akzent-dunkel, #A85504);
  outline-offset: 2px;
}

.kal-liste__sagt:not(:empty) {
  display: inline-block;
  margin-left: .5rem;
  font-size: .82rem;
  color: var(--kal-haus-grau, #5A5654);
}

.kal-liste__feld {
  display: block;
  width: 100%;
  margin-top: .4rem;
  font-size: .85rem;
}

/* ---- Telefon: Liste ohne Kästchen — eine Spalte ---------------------

   Die Regel weiter oben (`… :not(:has(.kal-liste__kaestchen))
   { 3.6rem 1fr }`) gilt ohne Bildschirmgrenze und schlug auf dem Telefon
   die Handyfassung: Eine Liste ohne Kästchen (`mit_auswahl: false`)
   bekam links eine leere Spalte von 3,6rem. Hier nicht zu sehen — keine
   Vorlage dieser Website nutzt die Liste ohne Kästchen —, auf micou.org
   aber auf der Startseite und im Rückblick. `.kal-liste` davor gibt der
   Regel den nötigen Vorrang. */

@media (max-width: 620px) {
  .kal-liste .kal-liste__eintrag:not(:has(.kal-liste__kaestchen)) {
    grid-template-columns: 1fr;
  }
  .kal-liste .kal-liste__eintrag:not(:has(.kal-liste__kaestchen)) > .kal-liste__wann,
  .kal-liste .kal-liste__eintrag:not(:has(.kal-liste__kaestchen)) > .kal-liste__inhalt {
    grid-column: 1;
  }
}

/* ====================================================================
   Update 178 — Sharepic groß, Beschreibung an ihrem Platz
   ====================================================================

   DAS SHAREPIC wird gut doppelt so groß: 10rem statt 5,5rem, weiter
   rechts schwebend. Das Vorschaubild wird dafür mit 360px gerechnet,
   sonst wäre es auf einem scharfen Schirm unscharf. Der Textblock neben
   einem Bild darf breiter werden (42 statt 36rem), damit dem Text
   nicht die Hälfte seiner Breite verloren geht.

   AUF DEM TELEFON gibt es das Bild jetzt auch — bis 178 stand dort nur
   der Verweis „herunterladen". Es steht unter der Kopfzeile (Titel und
   Art | Ort), nicht neben dem Text, und höchstens 15rem breit. Der
   Inhalt wird dafür eine Spalte mit Reihenfolge: Titel und Art | Ort
   vorn, dann das Bild, dann alles Übrige in der Reihenfolge des
   Quelltexts.

   DIE BESCHREIBUNG steht zwischen Anschrift und Veranstaltern (siehe
   kalender-liste.html.twig) und hat oben und unten eine halbe Zeile
   Luft. */

.kal-liste .kal-liste__plakat {
  width: 10rem;
  height: 10rem;
  margin: .1rem 0 .6rem 1.1rem;
}

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

@media (min-width: 621px) {
  .kal-liste__inhalt:has(.kal-liste__plakat) { max-width: 42rem; }
}

.kal-liste .kal-liste__mehr { margin: .55rem 0; }

@media (max-width: 620px) {
  .kal-liste__inhalt { display: flex; flex-direction: column; }
  .kal-liste__inhalt > .kal-liste__titel,
  .kal-liste__inhalt > .kal-liste__wo { order: -1; }

  .kal-liste .kal-liste__plakat {
    display: block;
    float: none;
    width: auto;
    max-width: 15rem;
    height: auto;
    margin: .5rem 0 .4rem;
  }
  .kal-liste .kal-liste__plakat img { height: auto; }
  .kal-liste__inhalt:has(.kal-liste__plakat) { min-height: 0; }

  /* Mit Bild ist das Bild der Verweis zum Herunterladen — wie am
     Rechner. Ohne Bild (PDF) bleibt die Zeile. */
  .kal-liste__plakatlink--ersatz { display: none; }
}

/* ====================================================================
   Update 179 — „mit …" unter dem Titel
   ====================================================================

   Wer auftritt oder spricht, steht unter dem Titel — wie der Titel
   gesetzt, eine Stufe kleiner. Das Wort „mit" davor ist leise; es sagt,
   was die Zeile ist, und soll nicht mitlesen wie ein Name. */

.kal-liste__mit {
  margin: -.05rem 0 .2rem;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.3;
}

.kal-liste__mit-wort {
  font-weight: 400;
  color: var(--kal-haus-grau, #5A5654);
}

@media (max-width: 620px) {
  .kal-liste__inhalt > .kal-liste__mit { order: -1; }
}

/* Auf Papier gehört „mit" zum Kopf des Eintrags und bleibt beim Titel. */
@media print {
  .kal-liste__mit {
    break-inside: avoid;
    break-after: var(--kal-bruch, auto);
    page-break-after: var(--kal-bruch, auto);
  }
  .kal-liste__mit-wort { color: #000; }
}

/* ====================================================================
   Update 180 — „mit …" naeher am Titel
   ====================================================================

   Die Zeile gehoert zum Titel, nicht zu Art und Ort: kleiner, dicht
   unter dem Titel, mit Luft nach unten. Der Titel gibt seinen
   Abstand nach unten nur ab, wenn „mit" folgt. */

.kal-liste__titel:has(+ .kal-liste__mit) { margin-bottom: 0; }

.kal-liste__mit {
  margin: 0 0 .5rem;
  font-size: .87rem;
  line-height: 1.25;
}

/* ====================================================================
   Update 181 — Titel ohne Silbentrennung, enger gesetzt
   ====================================================================

   Der Titel ist ein <p>, keine Ueberschrift, und erbte deshalb vom
   Grundgeruest (Quark 2) `hyphens: auto` und den weiten Zeilenabstand
   des Fliesstexts. Beides gehoert zu Absaetzen, nicht zu einem Titel:
   Getrennt wird nur noch, wenn ein einzelnes Wort breiter ist als die
   Spalte (dann ohne Strich); `text-wrap: pretty` laesst kein einzelnes
   Wort allein in der letzten Zeile. Der engere Zeilenabstand nimmt auch
   die Luft unter dem Titel weg, die „mit …" noch abgerueckt hat. */

.kal-liste__titel {
  hyphens: none;
  -webkit-hyphens: none;
  -ms-hyphens: none;
  overflow-wrap: break-word;
  text-wrap: pretty;
  line-height: 1.25;
}

/* ====================================================================
   Update 182 — Tinte sparen
   ====================================================================

   Ein zweites Kaestchen im Block „Auf Papier oder als PDF". Angekreuzt
   druckt die Liste ohne Farbflaechen:

     Datumsfeld   keine Flaeche; Schrift und ein feiner Rahmen in der
                  Farbe, die sonst die Flaeche hat (micou.org: das
                  dunkle Rot, im Rueckblick Grau). Ohne Flaeche — wie
                  auf demokratiefest.org — bleibt es schwarz wie bisher.
     Art-Schilder keine Flaeche; Rahmen in der Farbe der Art, der
                  breite Strich links bleibt. „faellt aus" ebenso:
                  roter Rahmen, rote Schrift.
     Sharepics    fallen weg — auf einem Blatt mit zwanzig Terminen
                  die groessten Farbflaechen. Die Logos der Veranstalter
                  bleiben; sie sind klein und sagen, von wem es kommt.

   Den Seitenkopf regelt das Theme — er gehoert ihm, nicht dem Plugin.

   Auf dem Schirm aendert sich nichts: Alles hier steht unter
   `@media print`. Das Kaestchen sieht aus wie sein Nachbar. */

.kal-drucken__tinte {
  width: 1.15rem; height: 1.15rem;
  margin: 0; flex: 0 0 auto;
  accent-color: var(--mc-rot);
}

.kal-drucken__reihe + .kal-drucken__reihe { margin-top: .55rem; }

@media print {
  :root:has(.kal-drucken__tinte:checked) .kal-liste__wann {
    background: none;
    border: 1px solid var(--kal-haus-datum-grund, transparent);
    color: var(--kal-haus-datum-grund, #000);
  }
  :root:has(.kal-drucken__tinte:checked) .kal-liste__wt,
  :root:has(.kal-drucken__tinte:checked) .kal-liste__wann .kal-liste__jahr {
    color: var(--kal-haus-datum-grund, var(--kal-haus-grau, #5A5654));
  }
  :root:has(.kal-drucken__tinte:checked) .kal-liste__wann .kal-liste__datum .kal-liste__von,
  :root:has(.kal-drucken__tinte:checked) .kal-liste__wann .kal-liste__datum .kal-liste__bis {
    color: var(--kal-haus-datum-grund, #000);
  }
  :root:has(.kal-drucken__tinte:checked) .kal-liste__wann .kal-liste__datum .kal-liste__von {
    border-top-color: var(--kal-haus-datum-grund, var(--kal-haus-linie, #DDDAD6));
  }

  :root:has(.kal-drucken__tinte:checked) .kal-liste__art {
    background: none;
    border: 1px solid var(--art-rand, #76706B);
    border-left-width: 3px;
  }

  :root:has(.kal-drucken__tinte:checked) .kal-liste__aus {
    background: none;
    border: 1px solid #8F1D15;
    color: #8F1D15;
  }

  :root:has(.kal-drucken__tinte:checked) .kal-liste .kal-liste__plakat { display: none; }
}

/* ====================================================================
   Update 183 — Sharepics auf dem Telefon nur als Verweis
   ====================================================================

   Seit Update 178 stand das Sharepic auf dem Telefon als Bild unter
   der Kopfzeile, bis 15rem breit. In einer Liste von zwanzig Terminen
   ist das zu viel Bild und zu wenig Liste. Auf dem Telefon steht jetzt
   wieder nur der Verweis „Flyer/Info herunterladen" (mit Dateiart und
   Groesse) — wie bis 178. Am Rechner und auf Papier bleibt alles, wie
   es ist.

   NUR SHAREPICS ZUM HERUNTERLADEN (`[download]`). Die Bilder im
   Rueckblick von micou.org sind Fotos der Aktion und Verweise auf ihre
   Seite, keine Dateien — sie bleiben. */

@media screen and (max-width: 620px) {
  .kal-liste .kal-liste__plakat[download] { display: none; }
  .kal-liste .kal-liste__plakatlink--ersatz { display: block; }
}

/* ====================================================================
   Update 185 — Workshop; Anschrift ohne Trennung
   ====================================================================

   WORKSHOP ist die zwanzigste Art. Sie teilt die Farbe der Konferenz
   (siehe die Farbtafel oben und `Kalender::ART_GRUPPE`).

   DIE ANSCHRIFT wird nie getrennt. Ihre Teile — Name des Ortes, Straße,
   PLZ und Ort — stehen je in einem Kasten (`.kal-liste__adressteil`,
   siehe kalender-liste.html.twig). Ein Kasten bleibt ganz, solange er in
   die Zeile passt; umbrochen wird zwischen den Kästen, also hinter „·"
   und „,". Ist ein Teil allein breiter als die Spalte, bricht er in sich
   um, aber ohne Trennstrich. */

.kal-liste__anschrift {
  hyphens: none;
  -webkit-hyphens: none;
  -ms-hyphens: none;
}

.kal-liste__adressteil {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: break-word;
}

/* ====================================================================
   Update 186 — geteilte Termine
   ====================================================================

   Ein Link aus „Als Text verschicken" mit angekreuzten Terminen
   (`?nur=1&t=…`) zeigt NUR diese. Darüber ein Kopf: was man sieht, und
   der Weg zum ganzen Kalender (`partials/kalender-geteilt.html.twig`).
   Auf Papier bleibt die Überschrift, der Verweis fällt weg. */

.kal-geteilt {
  margin: 0 0 1.4rem;
  padding: .9rem 1.1rem;
  border-left: 4px solid var(--kal-haus-akzent, #F68714);
  background: var(--kal-haus-hell, #F7F6F4);
}

.kal-geteilt .kal-titel { margin: 0 0 .35rem; }
.kal-geteilt__satz { margin: 0 0 .35rem; }
.kal-geteilt__weiter { margin: 0; }

@media print {
  .kal-geteilt { padding: 0; border: 0; background: none; }
  .kal-geteilt__weiter { display: none; }
}

/* ====================================================================
   Update 198 — nur die ausgewählten Termine zeigen
   ====================================================================

   Unter der Liste (`partials/kalender-abschluss.html.twig`) ein Schalter:
   ein Kästchen ohne Namen, dessen Beschriftung wie ein Knopf aussieht.
   Ohne JavaScript — `:has()` sieht die Kästchen der Liste live.

   * Er erscheint, sobald etwas angekreuzt ist, und schwebt am unteren
     Fensterrand, solange die Liste zu sehen ist (sticky im Formular).
   * An: Termine ohne Haken verschwinden, die Überschrift bekommt
     „— Auswahl“ wie auf Papier. Ist nichts mehr angekreuzt, steht
     wieder alles da; der Schalter bleibt, bis man ihn ausschaltet.
   * Die Zahl zählt ein CSS-Zähler: Die Einträge stehen im Dokument
     VOR dem Schalter, also ist sie schon vollständig, wenn er kommt.
   * Browser ohne `:has()` zeigen den Schalter nie — die Liste bleibt
     wie bisher. Auf Papier gibt es ihn nicht. */

.kal-nurwahl { display: none; }

.kal-form:has(.kal-liste__kaestchen:checked) .kal-nurwahl,
.kal-form:has(.kal-nurwahl__schalter:checked) .kal-nurwahl {
  display: flex !important;                   /* gegen style="display: none" (199) */
  justify-content: center;
  position: sticky;
  bottom: 1rem;
  z-index: 20;
  margin: 1.2rem 0;
  pointer-events: none;                       /* nur der Knopf fängt Klicks */
}

.kal-nurwahl__knopf {
  pointer-events: auto;
  cursor: pointer;
  box-shadow: 0 .2rem .8rem rgb(0 0 0 / .28);
}

/* Das Kästchen selbst unsichtbar, aber mit Tab und Leertaste bedienbar. */
.kal-nurwahl__schalter {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}
.kal-nurwahl__schalter:focus-visible + .kal-nurwahl__knopf {
  outline: 3px solid var(--kal-haus-akzent-dunkel, #A85504);
  outline-offset: 2px;
}

.kal-nurwahl__aus { display: none; }
.kal-nurwahl__schalter:checked + .kal-nurwahl__knopf .kal-nurwahl__an { display: none; }
.kal-nurwahl__schalter:checked + .kal-nurwahl__knopf .kal-nurwahl__aus { display: inline; }

.kal-form { counter-reset: kalwahl; }
.kal-liste__eintrag:has(.kal-liste__kaestchen:checked) { counter-increment: kalwahl; }
.kal-nurwahl__zahl::before { content: "(" counter(kalwahl) ")"; }

.kal-form:has(.kal-nurwahl__schalter:checked):has(.kal-liste__kaestchen:checked)
  .kal-liste__eintrag:not(:has(.kal-liste__kaestchen:checked)) { display: none; }

:root:has(.kal-nurwahl__schalter:checked):has(.kal-liste__kaestchen:checked)
  .kal-titel__auswahl { display: inline; }

@media print {
  .kal-nurwahl,
  .kal-form:has(.kal-liste__kaestchen:checked) .kal-nurwahl,
  .kal-form:has(.kal-nurwahl__schalter:checked) .kal-nurwahl { display: none !important; }
}

/* ====================================================================
   Update 200 — Termine außerhalb des Zeitraums im Raster
   ====================================================================

   Steht ein Termin des Monats nicht in der Liste darunter (anderer
   Zeitraum, z. B. schon vorbei), ist sein Kästchen ein <a> OHNE href:
   blass, grau, ohne Zeiger und ohne Hover. Der Tooltip sagt es in
   Worten — die Farbe allein trägt die Auskunft nicht.

   Steht am Ende, damit es auch die schmalen Fassungen (Punkte) und
   „fällt aus“ übertrifft. */

.kal__chip.kal__chip--ausserhalb {
  opacity: .4;
  filter: grayscale(.85);
  cursor: default;
}
.kal__chip.kal__chip--ausserhalb:hover { filter: grayscale(.85); }

/* ====================================================================
   Update 202 — gewählte Termine im Raster, „alle abwählen“
   ====================================================================

   Ein Termin, dessen Häkchen in der Liste gesetzt ist, bekommt im
   Monatsraster einen Rahmen um sein Kästchen und — wo Platz für Text ist —
   ein Häkchen rechts. Am Telefon, wo das Kästchen ein Punkt oder eine Form
   ist, bleibt nur der Rahmen: Er sitzt am Listenpunkt um das Kästchen,
   nicht am Kästchen selbst, denn das schneidet `overflow`/`clip-path` ab.

   Die Klasse setzt der Server für die Haken aus der Adresse und
   `kal-wahl.js` bei jedem Häkchen. Das Häkchen ist Schmuck: Die
   Sprachausgabe bekommt es nicht (leerer Ersatztext); dort gilt das
   Kästchen in der Liste. */

.kal__eintraege li:has(> .kal__chip--gewaehlt) {
  outline: 2px solid var(--kal-haus-text, #1C1B1A);
  outline-offset: 1px;
  border-radius: 3px;
}
.kal__chip.kal__chip--gewaehlt::before {
  content: "✓" / "";
  float: right;
  margin-left: 2px;
  font-weight: 700;
  font-size: .72rem;
  line-height: 1.15;
}
@media (max-width: 720px) {
  .kal__chip.kal__chip--gewaehlt::before { content: none; }
}

/* „alle abwählen“ ist ein schlichter Verweis und sieht darum von selbst
   aus wie „alle … auswählen“ daneben. Es lädt nichts (kal-wahl.js). */

/* ====================================================================
   Update 203 — Filterkasten, Monatsüberblick und Erklärungen einklappbar
   ====================================================================

   Alles mit <details>, ohne JavaScript, gemerkt wird nichts: Nach einem
   Neuladen steht jeder Bereich wieder in seiner Vorgabe.

     * „Termine von“ (ganzer Kasten): offen. Zugeklappt bleiben der
       Titel mit „(gewählt/alle)“ und die Knöpfe darunter.
     * Monatsüberblick: offen. Zugeklappt eine Zeile mit dem Monat.
     * Die Erklärungen unter der Liste: zu. Überschrift, Knöpfe und
       Schalter stehen immer da; die Überschrift öffnet die Erklärung.

   „Termine von“ und der Monatsüberblick tragen den Pfeil rechts, den das
   Elternthema jedem <summary> gibt — wie die Bereiche im Filterkasten.
   Bei den Erklärungen steht er nicht rechts außen, sondern als „▸
   Erklärung“ hinter der Überschrift: Dort ist <summary> eine Flexzeile,
   der Pfeil des Elternthemas säße mitten im Text. */

.kal-filter__ganz > summary,
.kal__ueberblick > summary,
.kal-form__info > summary {
  list-style: none;
  cursor: pointer;
}
.kal-filter__ganz > summary::-webkit-details-marker,
.kal__ueberblick > summary::-webkit-details-marker,
.kal-form__info > summary::-webkit-details-marker { display: none; }

.kal-form__info > summary::after { display: none; }
.kal-form__info-zeichen::before {
  content: "▸";
  display: inline-block;
  width: 1em;
}
.kal-form__info[open] .kal-form__info-zeichen::before { content: "▾"; }

.kal-filter__ganz > summary:focus-visible,
.kal__ueberblick > summary:focus-visible,
.kal-form__info > summary:focus-visible {
  outline: 3px solid var(--kal-haus-akzent, #F68714);
  outline-offset: 2px;
}

/* Das Elternthema färbt ein angeklicktes <summary> in seiner Hausfarbe
   (auf micou.org Blau). Hier bleibt es, wie es ist. Doppelte Klasse:
   Die Regel dort ist `details summary:focus:not([role=button])`. */
.kal-filter__ganz.kal-filter__ganz > summary:is(:hover, :focus, :active),
.kal__ueberblick.kal__ueberblick > summary:is(:hover, :focus, :active) { color: var(--kal-haus-grau, #5A5654); }
.kal-form__info.kal-form__info > summary:is(:hover, :focus, :active) { color: inherit; }

/* ---- „Termine von“ ---------------------------------------------- */
.kal-filter__ganz > summary.kal-filter__titel { display: block; }
.kal-filter__anzahl {
  margin-left: .25rem;
  color: var(--kal-haus-text, #1C1B1A);
  letter-spacing: 0;
}
/* Zugeklappt: nur Titel und Knöpfe. */
.kal-filter__ganz:not([open]) ~ .kal-filter__sofort,
.kal-filter__ganz:not([open]) ~ .kal-filter__stand { display: none; }

/* ---- Monatsüberblick ---------------------------------------------- */
.kal__ueberblick > summary {
  display: block;
  margin: 0 0 .6rem;
  font-size: .8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--kal-haus-grau, #5A5654);
}
.kal__ueberblick-monat {
  margin-left: .35rem;
  font-weight: 400; text-transform: none; letter-spacing: 0;
}
/* Offen steht der Monat groß darunter. */
.kal__ueberblick[open] .kal__ueberblick-monat { display: none; }

/* ---- Erklärungen unter der Liste ---------------------------------- */
.kal-form__info > summary {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .1rem .7rem;
  margin: 0 0 .5rem;
}
.kal-form__info > summary .kal-form__titel { margin: 0; }
.kal-form__info-zeichen {
  font-size: .82rem;
  color: var(--kal-haus-akzent-dunkel, #A85504);
  white-space: nowrap;
}
.kal-form__info > summary:hover .kal-form__info-zeichen { text-decoration: underline; }
.kal-form__info[open] > summary { margin-bottom: .35rem; }

@media print {
  .kal-filter__ganz > summary,
  .kal__ueberblick > summary,
  .kal-form__info > summary { display: none; }
}

/* ====================================================================
   Update 204 — Symbole für Texte
   ====================================================================

   Die Einleitung über dem Kalender erklärt die beiden kleinen Knöpfe am
   Zeitraum. Damit sie dort genauso aussehen wie am Feld, liegen sie als
   Bilddatei im Plugin (images/symbol-heute.svg, symbol-loeschen.svg)
   und werden im Text so eingebunden:

     <img class="kal-symbol" src="/user/plugins/dfest-ics/images/symbol-heute.svg" alt="Kalender-Symbol">

   Als Bild, nicht als eingebettetes <svg>: Den Text mit <svg> nähme das
   Admin nicht an — Grav führt `svg` als gefährlichen Tag (Schutz gegen
   eingeschleustes Skript).

   Doppelte Klasse gegen Regeln, die Bilder im Text auf volle Breite
   setzen. */
img.kal-symbol.kal-symbol {
  display: inline;
  width: 1.05em; height: 1.05em;
  margin: 0 .1em;
  vertical-align: -.18em;
  border: 0; box-shadow: none; border-radius: 0;
}

/* ====================================================================
   Update 208 — Kästen mit einheitlichem Kopf, runde Klappzeichen
   ====================================================================

   „Termine von“, „Zeitraum“ und „Monatsüberblick“ sind drei Kästen mit
   demselben Kopf (`kal-box`, `kal-box__kopf`): Titel groß und fett in der
   dunklen Hausfarbe, daneben grau, was gilt („5/5 Veranstaltende
   ausgewählt“, „künftige Termine, ab heute“), rechts das Klappzeichen.
   Offen trennt eine feine Linie den Kopf vom Inhalt. Was nur zugeklappt
   gebraucht wird (`kal-box__stand--zu`), steht offen nicht da — dann
   sagt es der Kasten selbst.

   DAS KLAPPZEICHEN ist ein runder Punkt in der Hausfarbe mit einem Pfeil:
   zu nach unten, offen nach oben. Groß an den drei Kästen, klein an den
   Klappteilen darin und am Termin („Beschreibung“). Farben wie die
   Knöpfe der Website: auf demokratiefest.org Orange mit dunklem Pfeil,
   auf micou.org Rot mit weißem (`--kal-klapp-pfeil` in custom.css).
   Der Pfeil ist ein Bild in der Adresse, kein Zeichen: Er sieht in jeder
   Schrift gleich aus. */

/* ---- Der Kasten „Monatsüberblick“ — wie „Zeitraum“ ----------------- */
.kal__ueberblick.kal-box {
  margin: .3rem 0 1rem;
  padding: .55rem .75rem;
  background: var(--kal-haus-hell, #F7F6F4);
  border: 1px solid var(--kal-haus-linie, #DDDAD6);
  border-radius: 4px;
}

/* ---- Der Kopf ------------------------------------------------------ */
/* Ein Block mit fließendem Text, nicht Flex: Am Telefon bricht der graue
   Zusatz dann unter dem Titel um, statt eine schmale Spalte daneben zu
   bilden. Der Punkt steht rechts außen, außerhalb des Textflusses.
   Dreifache Klasse: Das Elternthema färbt ein offenes <summary> mit
   `details[open] > summary:not([role]):not(:focus)` grau. */
.kal-box.kal-box.kal-box > summary.kal-box__kopf {
  display: block;
  position: relative;
  margin: 0;
  padding: .1rem 2.3rem .1rem 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: 0;
  color: var(--kal-haus-akzent-dunkel, #A85504);
  list-style: none;
  cursor: pointer;
}
.kal-box > summary.kal-box__kopf::-webkit-details-marker { display: none; }
.kal-box.kal-box.kal-box > summary.kal-box__kopf:is(:hover, :focus, :active) {
  color: var(--kal-haus-akzent-dunkel, #A85504);
}
.kal-box.kal-box.kal-box[open] > summary.kal-box__kopf {
  margin-bottom: .7rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--kal-haus-linie, #DDDAD6);
}
.kal-box__titel { margin-right: .5rem; }
.kal-box .kal-box__stand {
  margin: 0;
  font-size: .86rem;
  font-weight: 400;
  color: var(--kal-haus-grau, #5A5654);
}
.kal-box[open] > summary .kal-box__stand--zu { display: none; }

/* ---- Das Klappzeichen ---------------------------------------------- */
:is(.kal-box, .kal-filter__gruppe, .kal-einleitung__mehr, .kal-liste__mehr, .kal-uebersicht) > summary::after {
  content: "";
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background-color: var(--kal-haus-akzent, #F68714);
  background-image: var(--kal-klapp-pfeil, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9.5l6 6 6-6' fill='none' stroke='%231C1B1A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"));
  background-position: center 55%;
  background-size: 62%;
  background-repeat: no-repeat;
  transform: none;
  transition: transform .2s ease, background-color .2s ease;
}
:is(.kal-box, .kal-filter__gruppe, .kal-einleitung__mehr, .kal-liste__mehr, .kal-uebersicht)[open] > summary::after {
  transform: rotate(180deg);
}
:is(.kal-box, .kal-filter__gruppe, .kal-einleitung__mehr, .kal-liste__mehr, .kal-uebersicht) > summary:hover::after {
  background-color: var(--kal-haus-akzent-hover, #E07A0E);
}
/* An den drei Kästen größer und rechts oben — neben der ersten Zeile,
   auch wenn der Zusatz am Telefon umbricht. */
.kal-box > summary.kal-box__kopf::after {
  display: block;
  position: absolute;
  top: -.05rem;
  right: 0;
  float: none;
  width: 1.6rem;
  height: 1.6rem;
  margin: 0;
}
/* In „Termine von“ die beiden Gruppen: der kleine Punkt rechts oben statt
   unten hinter dem Erklärsatz. */
.kal-filter__gruppe > summary { position: relative; padding-right: 1.8rem; }
.kal-filter__gruppe > summary::after {
  position: absolute;
  top: .5rem;
  right: 0;
  float: none;
  margin: 0;
}

/* Abstände: <details> bringt vom Elternthema einen Rand unten mit; im
   Kasten „Zeitraum“ stünde er zugeklappt als leere Fläche. Und der
   Monatsüberblick ist jetzt selbst ein Kasten — der Abschnitt darum
   braucht oben keinen eigenen Abstand mehr. */
.kal-zeit__klapp.kal-box { margin: 0; }
.kal:has(> .kal__ueberblick.kal-box) { margin-top: 0; }

/* „▸ Erklärung“ unter der Liste: derselbe Punkt, klein, vor dem Wort. */
.kal-form__info.kal-form__info .kal-form__info-zeichen::before,
.kal-form__info.kal-form__info[open] .kal-form__info-zeichen::before {
  content: "";
  width: 1.05rem;
  height: 1.05rem;
  margin-right: .3rem;
  vertical-align: -.25rem;
  border-radius: 50%;
  background-color: var(--kal-haus-akzent, #F68714);
  background-image: var(--kal-klapp-pfeil, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9.5l6 6 6-6' fill='none' stroke='%231C1B1A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"));
  background-position: center 55%;
  background-size: 62%;
  background-repeat: no-repeat;
  transition: transform .2s ease;
}
.kal-form__info.kal-form__info[open] .kal-form__info-zeichen::before { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  :is(.kal-box, .kal-filter__gruppe, .kal-einleitung__mehr, .kal-liste__mehr, .kal-uebersicht) > summary::after,
  .kal-form__info .kal-form__info-zeichen::before { transition: none; }
}

@media print {
  .kal__ueberblick.kal-box { margin: 0; padding: 0; border: 0; background: none; }
  .kal-box > summary.kal-box__kopf { display: none; }
}

/* ====================================================================
   Update 209 — ein Knopfmaß im ganzen Kalender
   ====================================================================

   Gemessen auf demokratiefest.org standen drei Größen nebeneinander:
   „Alle abwählen“ 13,4 px Schrift mit orangem Rand, „Anzeigen“ und die
   Blätterknöpfe 15 px ohne Rand, die Knöpfe unter der Liste 14,4 px mit
   dunklem Rand. Jede Größe stammte aus einer eigenen Reparatur.

   Jetzt haben alle großen Knöpfe des Kalenders dasselbe Maß: 0,9rem,
   halbfett, Innenmaß .45rem 1rem, Ecken 8px, ein Rand in der Randfarbe
   des Hauses. Farbe und Hover bleiben, wie sie sind; „Auswahl
   übernehmen“ behält seinen eigenen Rand (grau in Ruhe, orange mit
   Bernsteinring, sobald etwas verstellt ist). Die kleinen
   Umrissknöpfe am Termin („In den Kalender“, „Als Text teilen“) und die
   Symbolknöpfe im Zeitraum sind eine andere Sorte und bleiben klein.

   `:is()` mit vier Klassen davor: 0-4-0, schlägt die bisherigen Regeln
   (bis 0-3-0) und das Elternthema (`button:not([role=button]).btn`,
   0-2-1), ohne `!important`. */

:is(.kal-filter__knoepfe, .kal-zeit__knoepfe, .kal__kopf, .kal-form__knoepfe) .btn.btn.btn {
  box-sizing: border-box;
  margin: 0;
  padding: .45rem 1rem;
  border-width: 1px;
  border-style: solid;
  border-radius: 8px;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.35;
}
:is(.kal-filter__knoepfe, .kal-zeit__knoepfe, .kal__kopf, .kal-form__knoepfe) .btn.btn.btn:not(:disabled):not([aria-disabled="true"]):not(.kal-filter__anzeigen) {
  border-color: var(--kal-haus-akzent-rand, #C96F0C);
}

/* ====================================================================
   Update 210 — Nur den Monatsüberblick drucken (Kalenderblatt)
   ====================================================================

   Ein drittes Kästchen im Block „Drucken“ (`#druck-raster`). Angekreuzt
   druckt die Seite statt der Liste ein Kalenderblatt: den Monat, der im
   Monatsüberblick eingestellt ist, im Hochformat — darunter „Was
   stattfindet“ (Farben) und „Wer veranstaltet“ (Kürzel), ganz unten
   Seite und Adresse. Ohne JavaScript, wie die beiden Kästchen darüber;
   es zählt nur `:checked`.

   ALLES ANDERE FÄLLT WEG über eine einzige Regel: jedes Element, das das
   Raster weder enthält noch in ihm steht. Das ist robuster als eine
   Liste von Klassen, die beim nächsten Baustein unvollständig wäre.
   Die `#id` im `:has()` gibt den Regeln genug Vorrang vor allen anderen
   Druckregeln, ohne `!important`.

   Ist der Monatsüberblick zugeklappt, druckt er trotzdem
   (`::details-content`, wie die Beschreibungen seit Update 162). Ein
   Browser ohne `::details-content` druckt nur, was aufgeklappt ist —
   die Erklärung sagt, wo der Monat eingestellt wird; aufgeklappt ist er
   danach ohnehin. */

/* Auf dem Schirm: das Kalenderblatt-Zubehör nie; das Kästchen nur, wo
   es einen Monatsüberblick gibt. */
/* Kein `hidden`-Attribut: Pico setzt `[hidden]` mit `!important` auf
   unsichtbar, und auch der Druck käme dagegen nicht an. */
.kal__druckblatt { display: none; }

/* Das Kästchen wie seine beiden Nachbarn (Update 211): Ohne diese Regel
   bekam es den Rand eines gewöhnlichen Eingabefelds und stand weiter
   eingerückt. */
.kal-drucken__raster {
  width: 1.15rem; height: 1.15rem;
  margin: 0; flex: 0 0 auto;
  accent-color: var(--mc-rot);
}
:root:not(:has(.kal__ueberblick)) :is(.kal-drucken__reihe--raster, .kal-drucken__nur-raster) { display: none; }

@media print {
  :root:has(#druck-raster:checked) body :not(:has(.kal)):not(.kal):not(.kal *) { display: none; }
  :root:has(#druck-raster:checked) .kal { display: block; margin: 0; }
  :root:has(#druck-raster:checked),
  :root:has(#druck-raster:checked) :has(.kal) {
    background: #FFFFFF;
    box-shadow: none;
    /* Polster der Hüllen fielen sonst als leere zweite Seite an. */
    margin-block: 0;
    padding-block: 0;
    min-height: 0;
  }
  :root:has(#druck-raster:checked) .kal__ueberblick::details-content {
    content-visibility: visible;
    block-size: auto;
  }
  :root:has(#druck-raster:checked) .kal__ueberblick > summary,
  :root:has(#druck-raster:checked) .kal__blaettern { display: none; }

  /* Der Monat als Überschrift des Blatts. */
  :root:has(#druck-raster:checked) .kal__kopf { display: block; margin: 0 0 3mm; text-align: center; }
  :root:has(#druck-raster:checked) .kal__monat { margin: 0; font-size: 20pt; }

  /* Das Raster: sieben gleiche Spalten über die ganze Breite, Kästchen
     mit Uhrzeit und Titel, Farben mitdrucken. */
  /* LINIEN ALS RAND, NICHT ALS HINTERGRUND (Update 211). Auf dem Schirm
     sind die Linien der Hintergrund, der durch 2 px Lücke scheint. Den
     drucken Browser nur, wenn „Hintergrundgrafiken“ an ist — und das ist
     es meist nicht: Auf dem Papier fehlten die Linien. Ränder druckt
     jeder Browser. */
  :root:has(#druck-raster:checked) .kal__gitter {
    width: 100%;
    font-size: 7.5pt;
    gap: 0;
    background: none;
    border: 0;
    border-top: 1px solid #8B8580;
    border-left: 1px solid #8B8580;
  }
  :root:has(#druck-raster:checked) :is(.kal__tag, .kal__wochentag) {
    border-right: 1px solid #8B8580;
    border-bottom: 1px solid #8B8580;
  }
  :root:has(#druck-raster:checked) .kal__tag { min-height: 27mm; }
  :root:has(#druck-raster:checked) .kal__chip__text,
  :root:has(#druck-raster:checked) .kal__titel {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    display: block;
    -webkit-line-clamp: none;
  }
  :root:has(#druck-raster:checked) .kal__chip {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    text-decoration: none;
  }
  :root:has(#druck-raster:checked) .kal__chip::after { content: none; }
  /* Viele Termine an einem Tag: Ab vier Kästchen steht in diesem Tag nur
     noch Uhrzeit und Kürzel, ohne Titel — so bleibt der Monat in aller
     Regel auf einem Blatt. Der Titel steht in der Liste. */
  :root:has(#druck-raster:checked) .kal__tag:has(.kal__eintraege > li:nth-child(4)) .kal__titel { display: none; }
  :root:has(#druck-raster:checked) .kal__tag:has(.kal__eintraege > li:nth-child(4)) .kal__chip { padding-block: 0; }

  /* Darunter die beiden Legenden, je in drei Spalten, dann der Fuß. */
  :root:has(#druck-raster:checked) .kal__druckblatt { display: block; }
  :root:has(#druck-raster:checked) .kal__legende-block {
    display: block;
    margin: 4mm 0 0;
    font-size: 8.5pt;
    break-inside: avoid;
  }
  :root:has(#druck-raster:checked) .kal__legende-titel { margin: 0 0 1.5mm; font-size: 10pt; }
  :root:has(#druck-raster:checked) .kal__legende { columns: 3; column-gap: 6mm; }
  :root:has(#druck-raster:checked) .kal__legende li { break-inside: avoid; }
  :root:has(#druck-raster:checked) .kal__legende--wer { list-style: none; margin: 0; padding: 0; }
  :root:has(#druck-raster:checked) .kal__legende--wer li { margin: 0 0 1mm; }
  :root:has(#druck-raster:checked) .kal__legende--wer .kal__marke {
    display: inline-block;
    min-width: 9mm;
    padding: 0 1mm;
    border: 1px solid #BFB9B4;
    border-radius: 2px;
    font-size: 7.5pt;
    font-weight: 700;
    text-align: center;
  }
  :root:has(#druck-raster:checked) .kal__druckfuss {
    margin: 4mm 0 0;
    font-size: 7.5pt;
    color: #5A5654;
  }

  /* Tinte sparen gilt auch hier: Kästchen ohne Farbfläche, nur der
     schmale farbige Streifen links bleibt — er sagt mit wenig Tinte,
     welche Art. Leere Tage und Kopfzeile ohne Grau. */
  :root:has(#druck-raster:checked):has(#druck-tinte:checked) .kal__chip {
    background: #FFFFFF;
    border-top: 1px solid #8B8580;
    border-right: 1px solid #8B8580;
    border-bottom: 1px solid #8B8580;
    color: #1C1B1A;
  }
  :root:has(#druck-raster:checked):has(#druck-tinte:checked) :is(.kal__tag, .kal__tag--leer, .kal__wochentag) {
    background: #FFFFFF;
  }
}