/* DAS hidden-ATTRIBUT MUSS WIRKEN.
 *
 * Der Browser setzt dafuer "display: none" - aber jede Klasse mit einem
 * eigenen display schlaegt das, weil sie die hoehere Spezifitaet hat. Das
 * Skript versteckte den Sprung-Knopf, und er blieb stehen, weil ".knopf"
 * auf inline-block steht.
 *
 * Steht ganz oben, damit es fuer alles Folgende gilt.
 */
[hidden] { display: none !important; }

/* Die oeffentlichen Seiten: Raster, Listen, Leerflaechen, das Team.
 *
 * KEIN style-ATTRIBUT UND KEIN style-BLOCK - die Richtlinie steht auf
 * style-src 'self'.
 *
 * WARUM HIER "main.bahn >" VOR DEN KLASSEN STEHT:
 *
 * stil.css enthaelt "main.bahn > * { max-width: 68ch }" - richtig fuer
 * Fliesstext, denn eine Zeile ueber die volle Breite liest sich schlecht.
 * Dieser Selektor hat die Spezifitaet 0-1-1 und schlaegt eine blosse
 * Klasse (0-1-0). Ein "max-width: none" an ".teamliste" waere also
 * wirkungslos - und zwar lautlos: Das Raster stuende auf Textbreite und
 * brauchte zwei Zeilen statt einer.
 *
 * Genau das ist beim ersten Bau passiert. Die vier Namen standen als
 * 2x2-Feld da, und die Zuordnung zum Bild war nicht mehr unmittelbar.
 */

/* --- Leere Zustaende -----------------------------------------------------
 * Eine Seite ohne Eintraege darf nicht kaputt aussehen, sondern muss etwas
 * Sinnvolles zeigen (A5.1f, A5.6). Die Flaeche macht sichtbar, dass hier
 * ABSICHTLICH nichts steht - ein leerer Bereich saehe nach einem Fehler
 * aus.
 */
main.bahn > .leerhinweis,
.leerhinweis {
  background: var(--kt-sanft);
  border: var(--kt-rahmen-1) solid var(--kt-linie);
  border-left: var(--kt-rahmen-kante) solid var(--kt-rot);
  border-radius: 0 var(--kt-radius-2) var(--kt-radius-2) 0;
  padding: var(--kt-luft-5);
  color: var(--kt-neben);
  margin-block: var(--kt-luft-4);
}

.hinweisband {
  background: var(--kt-warnung-grund);
  color: var(--kt-warnung);
  border-left: var(--kt-rahmen-kante) solid var(--kt-warnung);
  border-radius: 0 var(--kt-radius-1) var(--kt-radius-1) 0;
  padding: var(--kt-luft-3) var(--kt-luft-4);
  margin-block: var(--kt-luft-4);
  max-width: none;
}

/* --- Das Raster der Musterkuechen ----------------------------------------
 * auto-fill statt fester Spaltenzahl: Das Raster sieht mit 1, 2, 5 und 20
 * Eintraegen gleich gut aus, ohne dass irgendwo eine Zahl steht, die bei
 * der naechsten Kueche nicht mehr stimmt.
 */
main.bahn > .raster,
.raster {
  list-style: none;
  margin: var(--kt-luft-5) 0;
  padding: 0;
  max-width: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--kt-luft-5);
}

.rasterstueck h2 {
  font-family: var(--kt-schrift-text);
  font-weight: 700;
  font-size: var(--kt-groesse-3);
  margin: var(--kt-luft-3) 0 0;
}

.rasterstueck img {
  width: 100%;
  height: auto;
  border-radius: var(--kt-radius-2);
  display: block;
  /* Ein Gemisch aus Hoch- und Querformaten kommt aus jedem Betrieb. Das
   * Raster gibt das Verhaeltnis vor, statt sich von der groessten
   * Aufnahme auseinanderziehen zu lassen. */
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* EINE BEWUSST GESTALTETE FLAECHE, kein kaputtes Bild.
 *
 * Solange keine Aufnahmen vorliegen, traegt die Kachel den Markennamen in
 * gedaempftem Rot auf sanftem Grund. Das sieht absichtlich aus; ein
 * gebrochenes Bildsymbol sieht nach Fehler aus, und ein Platzhalterfoto
 * aus einer freien Sammlung ist verboten.
 */
/* --- Die Galerie einer Musterkueche (ohne JavaScript) --------------------- */
/* Die Standardansicht steht als LETZTES Kind. Trifft ein Anker eine
 * Ansicht davor, blendet ":target ~ .standard" die Standardansicht aus.
 * Kein :has() noetig - das hier versteht jeder Browser. */
.galerie { position: relative; }
.galerie figure { margin: 0; }
.galerie .ansicht { display: none; }
.galerie .ansicht:target { display: block; }
.galerie .ansicht:target ~ .standard { display: none; }
.ansichtzahl {
  font-family: var(--kt-schrift-text);
  font-size: var(--kt-groesse-1);
  color: var(--kt-neben);
  margin-top: var(--kt-luft-2);
}

.vorschau {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kt-luft-2);
  margin-top: var(--kt-luft-2);
}
.vorschau a {
  display: block;
  width: 64px;
  border-radius: var(--kt-radius-1);
  border: var(--kt-rahmen-2) solid transparent;
}
.vorschau a:hover { border-color: var(--kt-linie); }
.vorschau a:focus-visible { outline: 3px solid var(--kt-rot); outline-offset: 2px; }
.rasterstueck .vorschau img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--kt-radius-1);
  box-shadow: none;
  display: block;
}
/* Beim Sprung auf eine Ansicht soll nicht die Kopfzeile darueber liegen. */
.ansicht, .rasterstueck { scroll-margin-top: var(--kt-luft-6); }

.bildplatz {
  aspect-ratio: 4 / 3;
  border-radius: var(--kt-radius-2);
  background: var(--kt-sanft);
  border: var(--kt-rahmen-1) solid var(--kt-linie);
  display: grid;
  place-items: center;
}

.bildplatz span {
  font-family: var(--kt-schrift-kopf);
  font-size: var(--kt-groesse-4);
  /* NICHT --kt-linie, so zurueckhaltend das aussieht.
   *
   * Gemessen ergab das 1,20:1 gegen den sanften Grund - der Schriftzug
   * war nicht dezent, sondern unlesbar. Ein Wort, das ein Mensch sieht
   * und nicht entziffern kann, ist kein Gestaltungsmittel.
   *
   * --kt-neben erreicht 6,39:1 hell und 6,96:1 dunkel und bleibt
   * trotzdem deutlich hinter dem Fliesstext zurueck. */
  color: var(--kt-neben);
  letter-spacing: .02em;
}

/* --- Meldungen ----------------------------------------------------------- */
main.bahn > .meldungsliste,
.meldungsliste {
  list-style: none;
  margin: var(--kt-luft-5) 0;
  padding: 0;
  max-width: none;
}

.meldung {
  border-top: var(--kt-rahmen-1) solid var(--kt-linie);
  padding-block: var(--kt-luft-5);
  max-width: 68ch;
}

.meldung h2 {
  font-family: var(--kt-schrift-text);
  font-weight: 700;
  font-size: var(--kt-groesse-4);
  margin: 0 0 var(--kt-luft-2);
}

.meldungsdatum {
  font-family: var(--kt-schrift-text);
  font-size: var(--kt-groesse-1);
  color: var(--kt-neben);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 var(--kt-luft-1);
}

.meldungsdatum a { color: inherit; text-decoration: none; }
.meldungsdatum a:hover { text-decoration: underline; }
/* Wer ueber den Anker kommt, sieht, welche Meldung gemeint war. */
.meldung:target { border-top-color: var(--kt-rot); }

/* --- Downloads ----------------------------------------------------------- */
main.bahn > .dateiliste,
.dateiliste {
  list-style: none;
  margin: var(--kt-luft-4) 0;
  padding: 0;
  max-width: none;
}

.dateiliste li {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--kt-luft-2) var(--kt-luft-3);
  padding: var(--kt-luft-3) 0;
  border-bottom: var(--kt-rahmen-1) solid var(--kt-linie);
}

.dateiliste a {
  font-family: var(--kt-schrift-text);
  font-weight: 600;
  font-size: var(--kt-groesse-3);
}

.dateiart,
.dateigroesse {
  font-family: var(--kt-schrift-text);
  font-size: var(--kt-groesse-1);
  color: var(--kt-neben);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* --- Das Team ------------------------------------------------------------ */
main.bahn > .teambild,
.teambild {
  margin: var(--kt-luft-5) 0 var(--kt-luft-4);
  max-width: none;
}

.teambild img {
  width: 100%;
  height: auto;
  border-radius: var(--kt-radius-2);
  display: block;
}

.teambild figcaption {
  font-family: var(--kt-schrift-text);
  font-size: var(--kt-groesse-1);
  color: var(--kt-neben);
  margin-top: var(--kt-luft-2);
}

.teamhinweis {
  font-family: var(--kt-schrift-text);
  font-size: var(--kt-groesse-2);
  color: var(--kt-neben);
  margin-bottom: var(--kt-luft-3);
}

/* Die Zuordnung muss OHNE ABZAEHLEN erkennbar sein (A5.1e-2). Bei 1400 px
 * stehen die vier nebeneinander wie auf dem Bild; bei 390 px untereinander,
 * weil vier Namen nebeneinander dort zu Silben zerfielen. Die Nummer bleibt
 * in beiden Faellen - sie ist die Bruecke zum Bild.
 */
main.bahn > .teamliste,
.teamliste {
  list-style: none;
  margin: 0 0 var(--kt-luft-6);
  padding: 0;
  max-width: none;
  display: grid;
  /* VIER SPALTEN, SOLANGE SIE PASSEN - wie die vier auf dem Bild.
   * Ein 2x2-Feld zwaenge den Betrachter zu ueberlegen, ob zeilen- oder
   * spaltenweise gezaehlt wird; nebeneinander ist die Zuordnung
   * unmittelbar. Unter 760px bricht es auf eine Spalte, weil vier Namen
   * nebeneinander dort zu Silben zerfielen. */
  grid-template-columns: repeat(4, 1fr);
  gap: var(--kt-luft-3);
}

@media (max-width: 760px) {
  /* DIESELBE SPEZIFITAET WIE DIE HAUPTREGEL. Stuende hier nur
   * ".teamliste", verloere es gegen "main.bahn > .teamliste" weiter
   * oben - vier Spalten blieben bei 390px stehen und die Seite
   * scrollte waagerecht. Genau das ist passiert.
   *
   * Merksatz: Wer Spezifitaet anhebt, muss JEDE Stelle anheben, die
   * dieselbe Eigenschaft setzt. */
  main.bahn > .teamliste,
  .teamliste { grid-template-columns: 1fr; }
}

.teamliste li {
  display: flex;
  align-items: flex-start;
  gap: var(--kt-luft-3);
  padding: var(--kt-luft-3);
  background: var(--kt-sanft);
  border-radius: var(--kt-radius-2);
}

.teamzahl {
  flex: 0 0 auto;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--kt-rot);
  color: var(--kt-grund);
  font-family: var(--kt-schrift-text);
  font-weight: 700;
  font-size: var(--kt-groesse-1);
  display: grid;
  place-items: center;
}

.teamwer { display: flex; flex-direction: column; gap: 2px; }

.teamwer strong {
  font-family: var(--kt-schrift-text);
  font-size: var(--kt-groesse-3);
}

.teamrolle {
  font-family: var(--kt-schrift-text);
  font-size: var(--kt-groesse-1);
  color: var(--kt-neben);
}

/* --- Knopfreihen ---------------------------------------------------------- */
main .knopf { margin-right: var(--kt-luft-3); margin-bottom: var(--kt-luft-2); }

@media (max-width: 560px) {
  main .knopf { display: block; margin-right: 0; text-align: center; }
  .dateiliste li { flex-direction: column; gap: var(--kt-luft-1); }
}

/* --- Startseite: Wege in die Inhalte ------------------------------------- */
main.bahn > .startabschnitt,
.startabschnitt { max-width: none; margin-block: 0 var(--kt-luft-8); }
.startabschnitt > p,
.anriss > p,
.anriss > h3 { max-width: 68ch; }
.startabschnitt:last-child { margin-block-end: 0; }

/* Ueberschrift links, "Alle ..." rechts auf derselben Grundlinie. */
.abschnittkopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--kt-luft-2) var(--kt-luft-4);
}
.abschnittkopf h2.abschnitt { margin-bottom: 0; }

.weiter {
  display: inline-block;
  font-family: var(--kt-schrift-text);
  font-weight: 700;
  text-decoration: none;
}
.weiter::after { content: " \2192"; }
.weiter:hover { text-decoration: underline; }
.startabschnitt > .weiter { margin-top: var(--kt-luft-2); }

/* Die Kachel ist EIN Verweis - Bild und Titel zusammen. */
.kachel { display: block; color: inherit; text-decoration: none; border-radius: var(--kt-radius-2); }
.kachel:hover .kacheltitel { text-decoration: underline; }
.kachel:focus-visible { outline: 3px solid var(--kt-rot); outline-offset: 4px; }
.kacheltitel {
  display: block;
  font-family: var(--kt-schrift-text);
  font-weight: 700;
  font-size: var(--kt-groesse-3);
  margin-top: var(--kt-luft-3);
}

.anriss { border-top: var(--kt-rahmen-1) solid var(--kt-linie); padding-top: var(--kt-luft-5); }
.anriss h3,
.journalworte h3 {
  font-family: var(--kt-schrift-text);
  font-weight: 700;
  font-size: var(--kt-groesse-4);
  margin: 0 0 var(--kt-luft-2);
}
.anriss .knopf { margin-top: var(--kt-luft-2); }

.journalanriss {
  display: grid;
  grid-template-columns: minmax(140px, 220px) minmax(0, 1fr);
  gap: var(--kt-luft-6);
  align-items: start;
}
.journalworte { max-width: 60ch; }
.journalblatt { display: block; border-radius: var(--kt-radius-1); }
.journalblatt:focus-visible { outline: 3px solid var(--kt-rot); outline-offset: 4px; }
.journalblatt img {
  width: 100%;
  height: auto;
  display: block;
  border: var(--kt-rahmen-1) solid var(--kt-linie);
  border-radius: var(--kt-radius-1);
  box-shadow: var(--kt-schatten-weich);
}

/* Das Teamfoto neben dem Satz - wie das Journal, nur breiter, weil das
 * Bild quer ist und vier Menschen zeigt, die man erkennen soll. */
.teamanriss {
  display: grid;
  grid-template-columns: minmax(240px, 480px) minmax(0, 1fr);
  gap: var(--kt-luft-6);
  align-items: center;
}
.teamanriss-bild { display: block; border-radius: var(--kt-radius-2); }
.teamanriss-bild:focus-visible { outline: 3px solid var(--kt-rot); outline-offset: 4px; }
.teamanriss-bild img { width: 100%; height: auto; display: block; border-radius: var(--kt-radius-2); box-shadow: var(--kt-schatten-weich); }
.teamanriss-worte { max-width: 48ch; }
.teamanriss-worte p { max-width: none; }

@media (max-width: 560px) {
  .teamanriss { grid-template-columns: 1fr; }
  .journalanriss { grid-template-columns: 1fr; }
  .journalblatt { max-width: 60vw; }
}

/* --- Der Journal-Blaetterer ---------------------------------------------- */
main.bahn > .blaetterer,
.blaetterer {
  max-width: none;
  margin-block: var(--kt-luft-5);
}

/* Der Katalogtitel steht ueber dem Bild, aber die Seite handelt vom
 * Bild. Kleiner als ein gewoehnlicher Seitentitel, damit dem Blatt
 * mehr Hoehe bleibt. */
h1.seitentitel.blatttitel {
  font-size: clamp(22px, 2.6vw, 28px);
  margin-bottom: var(--kt-luft-4);
}
/* Die Journal-Seite beginnt dichter unter dem Kopf: Jeder Pixel Luft oben
 * fehlt dem Heft unten. */
main.bahn:has(> .blaetterer) { padding-block-start: var(--kt-luft-5); }
.blaetterer { margin-block-start: var(--kt-luft-3); }

.blattbild {
  background: var(--kt-sanft);
  border: var(--kt-rahmen-1) solid var(--kt-linie);
  border-radius: var(--kt-radius-2);
  padding: var(--kt-luft-3);
  display: grid;
  place-items: center;
}

/* EINE SEITE, EIN BILDSCHIRM. Die Seite muss GANZ zu sehen sein, mit der
 * Blaetter-Leiste darunter. Darum begrenzt hier die HOEHE, nicht die
 * Breite: Eine A4-Seite auf 800 px Breite waere 1129 px hoch - hoeher als
 * der ganze sichtbare Bereich eines 1080er-Schirms (rund 900 px). Genau
 * das zeigte der Bildschirmabzug des Nutzers, sogar bei 50 % Zoom.
 *
 * svh, NICHT dvh: dvh aendert sich, sobald die Adressleiste des Telefons
 * ein- oder ausfaehrt - das Bild wuechse und schrumpfte beim Scrollen
 * unter dem Finger. svh ist die kleinste Hoehe, also die mit sichtbarer
 * Leiste. Wer daran bemisst, passt in jedem Zustand. Die vh-Zeile davor
 * ist die Rueckfallebene fuer Browser ohne svh.
 *
 * Die Untergrenze verhindert, dass ein sehr flacher Schirm (Telefon quer)
 * das Blatt auf eine Briefmarke drueckt - dann darf gescrollt werden. */
/* DAS BLATT (24.09.2026, zweimal nachgestellt): Zuerst begrenzte die
 * Fensterhoehe abzueglich 27 rem - in einem 700 px hohen Fenster blieben
 * rund 250 px, dazu als Doppelseite halbiert. Dann nach der Breite (bis
 * 1000 px): Seit die Doppelseiten geteilt werden, sind alle Seiten hoch,
 * und das Deckblatt stand 1400 px hoch - "viel zu gross".
 *
 * Jetzt (Wunsch: "immer auf den Monitor passen"): journal.js rueckt die
 * Blaetter-Leiste unter den Kopf und MISST, was an Hoehe bleibt - echte
 * Kopfhoehe, echte Leiste -, und setzt --kt-blatt-hoehe. Bei jeder
 * Fenstergroesse neu. Gemessen statt geschaetzt: Die hinterlegte Kopfhoehe
 * (89 px) stimmte schon nicht mehr, der schmale Kopf ist 153 px hoch.
 * Ohne Skript gilt die vorsichtige Schaetzung dahinter. Am Telefon
 * begrenzt die Breite. Ein Klick holt die Seite bildschirmgross. Kein
 * Schatten (Wunsch des Nutzers). */
.blattbild img {
  inline-size: auto;
  max-inline-size: 100%;
  block-size: auto;
  max-block-size: var(--kt-blatt-hoehe, calc(100vh - 16rem));
  max-block-size: var(--kt-blatt-hoehe, calc(100svh - 16rem));
  display: block;
  margin-inline: auto;
  border-radius: var(--kt-radius-1);
}
main.bahn > .journalspalte { max-width: 860px; margin-inline: auto; }
.journalspalte .blattpdf { text-align: center; }
.blattbild img.vergroesserbar { cursor: zoom-in; }
.blaetterer { display: flex; flex-direction: column; }
/* Der Rahmen nimmt die volle Breite - sonst schrumpft er auf das Bild,
 * und das Bild nimmt 100 % des geschrumpften Rahmens (im Browser gemessen:
 * 800 statt 1000 px). */
.blaetterer > .blattbild { inline-size: 100%; }
.blaetterer > .blaettern { order: -1; margin-top: 0; margin-bottom: var(--kt-luft-4); }

.blaettern {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--kt-luft-3);
  margin-top: var(--kt-luft-4);
}

.blaettern .aus { opacity: .35; }

.sprung {
  display: flex;
  align-items: center;
  gap: var(--kt-luft-2);
  font-family: var(--kt-schrift-text);
  font-size: var(--kt-groesse-2);
}

.sprung select {
  font-family: var(--kt-schrift-text);
  font-size: var(--kt-groesse-2);
  color: var(--kt-text);
  background: var(--kt-grund);
  border: var(--kt-rahmen-2) solid var(--kt-feldlinie);
  border-radius: var(--kt-radius-1);
  padding: var(--kt-luft-1) var(--kt-luft-2);
}

.sprung select:focus-visible {
  outline: var(--kt-rahmen-2) solid var(--kt-rot);
  outline-offset: 2px;
}

.vongesamt { color: var(--kt-neben); }

/* Der Sprungknopf: .knopfklein liegt in verwaltung.css, und das laden die
 * oeffentlichen Seiten nicht - der Knopf stand deshalb in voller Groesse
 * neben einem kleinen Auswahlfeld. 44 px bleiben als Tippflaeche. */
.sprung .knopf {
  min-height: 44px;
  padding-inline: var(--kt-luft-3);
  font-size: var(--kt-groesse-2);
}

/* E11: DER TEXT IST DIE LESEFASSUNG, nicht ein Anhaengsel.
 * Deshalb normale Schriftgroesse und Textbreite - eine A4-Seite auf
 * 390 px zeigt Fliesstext in etwa 4 pt und ist unlesbar. */
main.bahn > .blatttext,
.blatttext {
  max-width: none;
  margin-block: var(--kt-luft-5);
  border: var(--kt-rahmen-1) solid var(--kt-linie);
  border-radius: var(--kt-radius-2);
  padding: 0 var(--kt-luft-4);
}
.blatttext summary {
  cursor: pointer;
  font-family: var(--kt-schrift-text);
  font-weight: 700;
  padding-block: var(--kt-luft-3);
}
.blatttext summary:focus-visible { outline: 3px solid var(--kt-rot); outline-offset: 3px; }
.blatttext[open] { padding-bottom: var(--kt-luft-3); }
.blatttext p { color: var(--kt-neben); }

main.bahn > .frueher,
.frueher { max-width: none; }

.ausgabenliste {
  list-style: none;
  margin: var(--kt-luft-3) 0;
  padding: 0;
}

.ausgabenliste li {
  display: flex;
  align-items: baseline;
  gap: var(--kt-luft-3);
  padding: var(--kt-luft-3) 0;
  border-bottom: var(--kt-rahmen-1) solid var(--kt-linie);
}

.ausgabenliste a {
  font-family: var(--kt-schrift-text);
  font-weight: 600;
  font-size: var(--kt-groesse-3);
}

@media (max-width: 560px) {
  /* Am Telefon bilden Blatt und Leiste eine Einheit, die ganz auf den
   * Schirm muss. Dafuer wird die Leiste EINE Zeile: Zurueck und Weiter
   * schrumpfen auf den Pfeil (der Text bleibt fuer Vorleseprogramme da),
   * das Wort "Seite" vor dem Auswahlfeld ebenso. Vorher brach der Sprung
   * auf eine zweite Zeile um - rund 110 px, die dem Blatt fehlten. */
  .blaettern { flex-wrap: nowrap; gap: var(--kt-luft-2); }
  .blaettern .knopf { flex: 0 0 auto; padding-inline: var(--kt-luft-3); }
  .blaettern .knopftext,
  .sprung label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .sprung { flex: 1 1 auto; justify-content: center; gap: var(--kt-luft-1); }
  .blattbild { padding: var(--kt-luft-2); }
}

/* --- Formulare auf den oeffentlichen Seiten ------------------------------ */
main.bahn > .felder,
.felder {
  display: flex;
  flex-direction: column;
  gap: var(--kt-luft-2);
  max-width: 34rem;
  margin-block: var(--kt-luft-5);
}

.felder label {
  font-family: var(--kt-schrift-text);
  font-weight: 600;
  font-size: var(--kt-groesse-2);
  margin-top: var(--kt-luft-3);
}

/* JEDES Feld einzeln benennen, dazu der nackte Selektor input.
 *
 * Ein input OHNE type wird von input[type=text] nicht erfasst - im
 * Vorbild hat genau das eine ganze Seite ungestaltet gelassen.
 */
.felder input,
.felder input[type="text"],
.felder input[type="email"],
.felder input[type="tel"],
.felder input[type="password"],
.felder select,
.felder textarea {
  font-family: var(--kt-schrift-text);
  font-size: var(--kt-groesse-3);
  color: var(--kt-text);
  background: var(--kt-grund);
  border: var(--kt-rahmen-2) solid var(--kt-feldlinie);
  border-radius: var(--kt-radius-1);
  padding: var(--kt-luft-3);
  max-width: 100%;
  /* 16px oder mehr: Darunter zoomt iOS beim Antippen in das Feld hinein,
   * und der Besucher findet aus der Vergroesserung nicht zurueck. */
  min-height: 2.6rem;
}

.felder textarea { min-height: 8rem; resize: vertical; }

.felder input:focus-visible,
.felder select:focus-visible,
.felder textarea:focus-visible {
  outline: var(--kt-rahmen-2) solid var(--kt-rot);
  outline-offset: 2px;
  border-color: var(--kt-rot);
}

.felder [aria-invalid="true"] { border-color: var(--kt-fehler); }

.felder button { margin-top: var(--kt-luft-4); align-self: flex-start; }

/* DAS HONIGFELD. Nicht display:none - manche Automaten prüfen darauf und
 * lassen versteckte Felder dann in Ruhe. Es steht ausserhalb des Bildes,
 * ist aber im Baum vorhanden. aria-hidden und tabindex halten es von
 * Vorleseprogrammen und der Tastaturfuehrung fern; sonst waere es eine
 * Falle fuer genau die Falschen. */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.pflicht { color: var(--kt-rot); }

/* Die Uebersicht ueber dem Formular: dieselbe Farbe wie die Meldung am
 * Feld, damit beides als eines gelesen wird. Die Eintraege sind Verweise
 * auf das Feld - ein Tipp, und man steht davor. */
.fehlerband {
  color: var(--kt-fehler);
  background: var(--kt-fehler-grund);
  border-left: var(--kt-rahmen-kante) solid var(--kt-fehler);
  border-radius: 0 var(--kt-radius-1) var(--kt-radius-1) 0;
  padding: var(--kt-luft-4) var(--kt-luft-5);
  margin-block: var(--kt-luft-4);
  max-width: 34rem;
}
.fehlerband:focus-visible { outline: 3px solid var(--kt-fehler); outline-offset: 3px; }
.fehlerband p { margin: 0 0 var(--kt-luft-2); }
.fehlerband ul { margin: 0; padding-left: 1.2em; }
.fehlerband li { margin-bottom: var(--kt-luft-1); }
.fehlerband a { color: inherit; font-weight: 600; }

.feldfehler {
  color: var(--kt-fehler);
  background: var(--kt-fehler-grund);
  border-left: var(--kt-rahmen-kante) solid var(--kt-fehler);
  padding: var(--kt-luft-2) var(--kt-luft-3);
  border-radius: 0 var(--kt-radius-1) var(--kt-radius-1) 0;
  font-family: var(--kt-schrift-text);
  font-size: var(--kt-groesse-1);
  margin: 0;
  max-width: none;
}

/* Der Hinweis "E-Mail oder Telefon" gehoert zu den zwei Feldern darunter,
 * nicht zum Namen darueber - ohne den Abstand las er sich als Anhang des
 * Namensfeldes. */
#hinweis-erreichbar { margin-block-start: var(--kt-luft-5); }

.feldhinweis {
  color: var(--kt-neben);
  font-family: var(--kt-schrift-text);
  font-size: var(--kt-groesse-1);
  margin: 0;
  max-width: none;
}

.einwilligung {
  display: flex;
  align-items: flex-start;
  gap: var(--kt-luft-3);
  margin-top: var(--kt-luft-4);
}

.einwilligung input[type="checkbox"] {
  /* Gross genug fuer den Daumen - die Vorgabegroesse ist etwa 13 Pixel
   * und damit am Telefon kaum zu treffen. */
  width: 1.4rem;
  height: 1.4rem;
  min-height: 0;
  flex: 0 0 auto;
  margin-top: 2px;
  accent-color: var(--kt-rot);
}

.einwilligung label {
  margin-top: 0;
  font-weight: 400;
  font-size: var(--kt-groesse-2);
  line-height: 1.5;
}

.erfolgsband {
  background: var(--kt-erfolg-grund);
  color: var(--kt-erfolg);
  border-left: var(--kt-rahmen-kante) solid var(--kt-erfolg);
  border-radius: 0 var(--kt-radius-2) var(--kt-radius-2) 0;
  padding: var(--kt-luft-4) var(--kt-luft-5);
  margin-block: var(--kt-luft-4);
  max-width: none;
}

/* --- Anfragen im Redaktionsbereich --------------------------------------- */
.anfragefelder {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--kt-luft-2) var(--kt-luft-4);
  margin-block: var(--kt-luft-3);
}

.anfragefelder dt {
  font-family: var(--kt-schrift-text);
  font-weight: 700;
  font-size: var(--kt-groesse-1);
  color: var(--kt-neben);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.anfragefelder dd { margin: 0; overflow-wrap: anywhere; }

@media (max-width: 560px) {
  .anfragefelder { grid-template-columns: 1fr; gap: 2px var(--kt-luft-2); }
  .anfragefelder dd { margin-bottom: var(--kt-luft-2); }
  .felder button { align-self: stretch; }
}

/* --- Die Schrittliste auf der Kuechenseite ------------------------------- */
main.bahn > .schrittliste,
.schrittliste {
  list-style: none;
  margin: var(--kt-luft-4) 0;
  padding: 0;
  max-width: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--kt-luft-4);
}

.schrittliste li {
  display: flex;
  flex-direction: column;
  gap: var(--kt-luft-2);
  padding: var(--kt-luft-4);
  background: var(--kt-sanft);
  border-radius: var(--kt-radius-2);
  border-left: var(--kt-rahmen-kante) solid var(--kt-rot);
}

.schrittliste strong {
  font-family: var(--kt-schrift-text);
  font-size: var(--kt-groesse-3);
}

.schrittliste span { color: var(--kt-neben); }

/* --- Aeltere Meldungen, Fehlerseite, Fuss ------------------------------ */
.aeltere { margin-block: var(--kt-luft-5); max-width: none; }
.aeltere summary {
  cursor: pointer;
  font-family: var(--kt-schrift-text);
  font-weight: 700;
  padding: var(--kt-luft-3) 0;
}
.aeltere summary:focus-visible { outline: 3px solid var(--kt-rot); outline-offset: 3px; }
.meldungsschluss { margin-top: var(--kt-luft-6); }

.hauptseiten { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--kt-luft-2) var(--kt-luft-5); }
.hauptseiten a { font-family: var(--kt-schrift-text); font-weight: 700; }

/* --- Das Heft: Doppelseiten mit Umblaetter-Animation (E16) ---------------- */
/* Zwei Haelften je --bb breit, --bh hoch (setzt das Skript aus dem
 * Hoehenbudget). Alle Blaetter liegen in der rechten Haelfte und klappen
 * um deren linke Kante - den Falz - nach links. Ein umgeklapptes Blatt
 * zeigt seine Rueckseite in der linken Haelfte. */
.heft {
  position: relative;
  display: grid;
  grid-template-columns: var(--bb) var(--bb);
  height: var(--bh);
  margin: 0 auto;
  perspective: 2600px;
  transform: translateX(calc(var(--versatz, 0) * var(--bb)));
  transition: transform .6s ease-in-out;
}
.heft-haelfte { position: relative; }
.heft-haelfte.links { box-shadow: inset -1px 0 0 var(--kt-linie); }

.blatt {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
.blatt.um { transform: rotateY(-180deg); }
.heft.ohne-animation .blatt,
.heft.ohne-animation { transition: none; }

.seite {
  position: absolute;
  inset: 0;
  background: #fff;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  cursor: pointer;
}
.seite.hinten { transform: rotateY(180deg); }
.seite.leer { background: transparent; box-shadow: none; cursor: default; }
.seite img { width: 100%; height: 100%; object-fit: contain; display: block; }
.blaetterer.mit-skript .blattbild { padding-block: var(--kt-luft-4); overflow: hidden; }
.blaettern .aus { opacity: .35; pointer-events: none; }

/* Einzelblatt am Telefon: kurze Blende beim Wechsel. */
#blattseite { transition: opacity .25s; }
#blattseite.blende { opacity: .25; }

/* Der Fokus: eine Seite gross, ueber allem. */
.heftfokus {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  place-items: center;
  background: rgba(20, 16, 17, .88);
  padding: var(--kt-luft-5);
  cursor: zoom-out;
}
.heftfokus.offen { display: grid; }
.heftfokus img { max-width: 96vw; max-height: 92vh; width: auto; height: auto; background: #fff; }
.heftfokus-zu {
  position: absolute;
  top: var(--kt-luft-4);
  right: var(--kt-luft-4);
  font: 600 var(--kt-groesse-2) var(--kt-schrift-text);
  color: #fff;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: var(--kt-radius-1);
  padding: var(--kt-luft-2) var(--kt-luft-4);
  cursor: pointer;
}
.heftfokus-zu:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
body.heftfokus-offen { overflow: hidden; }
.blatttext-seite {
  font-family: var(--kt-schrift-text);
  font-size: var(--kt-groesse-2);
  font-weight: 700;
  color: var(--kt-neben);
  margin: var(--kt-luft-4) 0 var(--kt-luft-1);
}

@media (prefers-reduced-motion: reduce) {
  .heft, .blatt, #blattseite { transition: none; }
}

/* --- Vorschau aus dem Redaktionsbereich (E22) ----------------------------
 * Die Stelle, die gerade bearbeitet wird, bekommt einen gestrichelten
 * Rahmen - nur im eingebetteten Vorschaufenster, gesetzt vom Skript der
 * Maske. Besucher sehen das nie. */
.vorschau-markiert {
  outline: 3px dashed var(--kt-rot);
  outline-offset: 6px;
  border-radius: 2px;
  transition: outline-color .3s ease;
}

/* --- Grossbild der Galerien (24.09.2026) ----------------------------------
 * Ein Klick auf das Bild einer Musterkueche (auch Ausstellung, Reduzierte
 * Kuechen) zeigt es bildschirmgross; mehrere Bilder blaettern mit den
 * Pfeilen. galerie.js baut den Dialog. Ohne Schatten (Wunsch des Nutzers). */
.galerie img.vergroesserbar { cursor: zoom-in; }
.grossbild {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  place-items: center;
  background: rgba(20, 16, 17, .92);
  padding: clamp(12px, 3vw, 40px) clamp(56px, 7vw, 96px);
}
.grossbild.offen { display: grid; }
body.grossbild-offen { overflow: hidden; }
.grossbild-rahmen { margin: 0; display: grid; justify-items: center; gap: var(--kt-luft-3); }
.grossbild-rahmen img {
  max-width: 100%;
  max-height: calc(100vh - 7rem);
  max-height: calc(100svh - 7rem);
  width: auto;
  height: auto;
  border-radius: var(--kt-radius-1);
  background: #fff;
}
.grossbild-rahmen figcaption {
  color: #fff;
  font-family: var(--kt-schrift-text);
  font-size: var(--kt-groesse-3);
  text-align: center;
}
.grossbild-titel { font-weight: 700; }
.grossbild-zaehler { opacity: .8; }
.grossbild-knopf {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .5);
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font: 700 32px/1 var(--kt-schrift-text);
  cursor: pointer;
}
.grossbild-zurueck { left: clamp(6px, 2vw, 24px); }
.grossbild-weiter { right: clamp(6px, 2vw, 24px); }
.grossbild-knopf:hover { background: rgba(255, 255, 255, .26); }
.grossbild-zu {
  position: absolute;
  top: var(--kt-luft-4);
  right: var(--kt-luft-4);
  font: 600 var(--kt-groesse-2) var(--kt-schrift-text);
  color: #fff;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: var(--kt-radius-1);
  padding: var(--kt-luft-2) var(--kt-luft-4);
  cursor: pointer;
}
.grossbild-knopf:focus-visible,
.grossbild-zu:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }