/* Verbund-nahe Gestaltung (E14, 23.09.2026).
 *
 * Liegt NACH seiten.css und ueberstimmt gezielt: Band ueber dem Kopf,
 * kompakter Kopf, Aufmacher mit Foto, Kacheltrio, Flaechen ueber die
 * volle Breite, rotes Band vor dem Fuss.
 *
 * ROT ALS BAND, NICHT ALS WAND: design/UEBERGABE.md, Punkt 2, warnt vor
 * grossflaechigem Rot. Die Entscheidung des Nutzers (E14) geht zum
 * Verbund-Muster - Rot als schmale, wiederkehrende Baender. Dazwischen
 * bleibt die Flaeche weiss oder sanft.
 *
 * Auf den Baendern steht --kt-logo, NICHT --kt-rot: --kt-rot wird in der
 * dunklen Sicht ein helles Rosa (fuer Text auf dunklem Grund), und weisse
 * Schrift darauf waere unlesbar. Die Logofarbe bleibt in beiden Sichten
 * #e3001b, weiss darauf erreicht 4,90:1.
 */

/* --- Das Band ueber dem Kopf --------------------------------------------- */
.band-oben {
  background: var(--kt-logo);
  color: #fff;
  font-family: var(--kt-schrift-text);
  font-size: var(--kt-groesse-2);
  font-weight: 600;
}
.band-oben .bahn {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kt-luft-1) var(--kt-luft-5);
  padding-block: var(--kt-luft-2);
}
.band-oben a { color: #fff; text-decoration: none; }
.band-oben a:hover { text-decoration: underline; }
.band-oben a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.band-oben .zeiten { margin-left: auto; font-weight: 400; }

/* --- Der Kopf: das Zeichen gross, der Name daneben ------------------------ */
.seitenkopf .bahn { padding-block: var(--kt-luft-3); }
.marke { gap: var(--kt-luft-4); }
/* DAS QUADRAT, 128 px hoch. Das offizielle Logo bleibt unveraendert -
 * auch der rote Rand gehoert dazu. Damit der Schriftzug im Oval trotzdem
 * lesbar ist, muss das Ganze gross sein: bei 128 px ist "Kuechen" rund
 * 70 px breit. Der Kopf wird 153 px hoch; Vollbild und Journal rechnen
 * mit dieser Hoehe. Radius wie im Original, kein weiterer Rahmen. */
.marke img { height: 128px; width: auto; border-radius: 0; }
.markenname {
  font-family: var(--kt-schrift-text);
  font-weight: 700;
  font-size: var(--kt-groesse-6);
  letter-spacing: -.01em;
  color: var(--kt-text);
  line-height: 1;
}
@media (max-width: 1060px) { .marke img { height: 104px; } .markenname { font-size: var(--kt-groesse-5); } }
@media (max-width: 800px) { .markenname { display: none; } }
@media (max-width: 560px) { .marke img { height: 88px; } }

/* --- Der Kopf haftet (E18) ------------------------------------------------
 * Das rote Band darueber scrollt weg, der weisse Kopf bleibt oben stehen
 * und wird dabei schmaler: Das Zeichen schrumpft von 128 auf 64 px, die
 * Polster ziehen sich zusammen, ein Schatten setzt ihn vom Inhalt ab.
 * "kompakt" setzt menue.js ab 80 px Scrollweg und nimmt es unter 20 px
 * wieder weg - der Abstand dazwischen verhindert Flackern an der Grenze.
 * Ohne Skript haftet der Kopf in voller Hoehe; das ist kein Fehler, nur
 * mehr Kopf.
 *
 * --kt-kopf-kompakt ist die Hoehe des schmalen Kopfs; Seitenleiste und
 * Sprungziele rechnen damit, damit nichts darunter verschwindet. */
:root { --kt-kopf-kompakt: 89px; }
.seitenkopf {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--kt-grund);
  transition: box-shadow .25s ease;
}
.seitenkopf.kompakt { box-shadow: 0 6px 18px rgba(0, 0, 0, .10); }
.seitenkopf .bahn { transition: padding .25s ease; }
.seitenkopf.kompakt .bahn { padding-block: var(--kt-luft-2); }
.marke img { transition: height .25s ease; }
.seitenkopf.kompakt .marke img { height: 64px; }
.markenname { transition: font-size .25s ease; }
.seitenkopf.kompakt .markenname { font-size: var(--kt-groesse-5); }
@media (max-width: 1060px) { .seitenkopf.kompakt .marke img { height: 56px; } }
@media (max-width: 560px)  { .seitenkopf.kompakt .marke img { height: 48px; } }

/* Sprungziele (Meldungen, Kuechen, Abschnitte) landen unter dem
 * haftenden Kopf, nicht dahinter. */
main [id] { scroll-margin-top: calc(var(--kt-kopf-kompakt) + var(--kt-luft-4)); }

/* Der Termin-Knopf im Kopf hebt sich beim Zeigen leicht. */
.knopf.termin { transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.knopf.termin:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(227, 0, 27, .25); }
.knopf.termin:active { transform: translateY(1px); box-shadow: none; }

/* --- Der Aufmacher: Worte links, Foto rechts ------------------------------ */
.aufmacher { padding-block: clamp(32px, 5vw, 64px) clamp(28px, 4vw, 48px); }
.aufmacher .bahn {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--kt-luft-7);
  align-items: center;
}
.aufmacher h1 { font-size: clamp(32px, 4.4vw, 52px); max-width: none; }
.aufmacher .unterzeile { margin-top: var(--kt-luft-4); }
.aufmacher .erreichbar { margin-top: var(--kt-luft-5); }
.aufmacher-foto { margin: 0; }
.aufmacher-foto img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--kt-radius-1);
  /* Die rote Kante unter dem Foto: das Zeichen des Verbunds, ohne Flaeche. */
  border-bottom: var(--kt-rahmen-kante) solid var(--kt-logo);
  box-shadow: var(--kt-schatten-tief);
}
.aufmacher-foto figcaption {
  font-size: var(--kt-groesse-1);
  color: var(--kt-neben);
  margin-top: var(--kt-luft-2);
}

/* --- Flaechen ueber die volle Breite -------------------------------------- */
main:not(.bahn) { padding-block: 0; }
.flaeche { padding-block: clamp(36px, 5vw, 64px); }
.flaeche.sanft { background: var(--kt-sanft); border-block: var(--kt-rahmen-1) solid var(--kt-linie); }
.flaeche .abschnittkopf h2.abschnitt { margin-top: 0; }
main:not(.bahn) > .bahn > .startabschnitt:first-child { margin-top: clamp(36px, 5vw, 64px); }

/* --- Das Kacheltrio: Rahmen, Foto oben, ein Verweis je Kachel ------------- */
.kacheltrio {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--kt-luft-5);
}
.kacheltrio a {
  display: block;
  height: 100%;
  border: var(--kt-rahmen-1) solid var(--kt-linie);
  border-radius: var(--kt-radius-1);
  background: var(--kt-grund);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
}
.kacheltrio a:hover { border-color: var(--kt-logo); }
.kacheltrio a:focus-visible { outline: 3px solid var(--kt-rot); outline-offset: 3px; }
.kacheltrio img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.kacheltrio .kacheltext { display: block; padding: var(--kt-luft-4) var(--kt-luft-5) var(--kt-luft-5); }
.kacheltrio .kacheltitel {
  display: block;
  font-family: var(--kt-schrift-kopf);
  font-weight: 700;
  font-size: var(--kt-groesse-5);
  letter-spacing: -.02em;
  margin: 0 0 var(--kt-luft-2);
}
.kacheltrio .kachelsatz { display: block; color: var(--kt-neben); margin-bottom: var(--kt-luft-3); }
.kacheltrio .weiter { color: var(--kt-rot); }

/* --- Verweise "Alle ansehen": ohne angehaengten Pfeil --------------------- */
.weiter::after { content: none; }
.weiter { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1.5px; }
.weiter:hover { text-decoration-thickness: 2.5px; }

/* --- Impressionen aus der Ausstellung ------------------------------------ */
.impressionen {
  list-style: none;
  margin: var(--kt-luft-5) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: var(--kt-luft-4);
  max-width: none;
}
.impressionen img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  border-radius: var(--kt-radius-1);
  border: var(--kt-rahmen-1) solid var(--kt-linie);
}

/* --- Das rote Band vor dem Fuss ------------------------------------------- */
.band-rot { background: var(--kt-logo); color: #fff; margin-top: clamp(40px, 6vw, 72px); }
.band-rot .bahn {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--kt-luft-5);
  padding-block: clamp(32px, 4vw, 48px);
}
.band-rot h2 { color: #fff; font-size: clamp(24px, 3vw, 34px); }
.band-rot p { margin: var(--kt-luft-2) 0 0; max-width: 56ch; color: #fff; }
.band-rot .knopf { background: #fff; color: var(--kt-logo); border-color: #fff; flex: 0 0 auto; }
.band-rot .knopf:hover { background: #fde3e6; border-color: #fde3e6; color: var(--kt-logo); }
.band-rot .knopf:focus-visible { outline-color: #fff; }

/* Ueberschrift nur fuer Vorleseprogramme */
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 800px) {
  .aufmacher .bahn { grid-template-columns: 1fr; gap: var(--kt-luft-5); }
}
@media (max-width: 560px) {
  .band-oben .anschrift, .band-oben .zeiten { display: none; }
  .band-oben .bahn { justify-content: center; }
  .impressionen { grid-template-columns: repeat(2, 1fr); gap: var(--kt-luft-2); }
  .band-rot .knopf { flex-basis: 100%; }
}

/* --- Innenseiten: Inhalt links, Seitenleiste rechts (E17) ---------------- */
main.bahn:has(> .seitenleiste) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--kt-luft-8);
  align-items: start;
}
.seiteninhalt { min-width: 0; }
.seitenaufmacher { margin-bottom: clamp(28px, 4vw, 40px); }
.seitenaufmacher h1.seitentitel { margin-bottom: var(--kt-luft-4); }
.seitenaufmacher .einleitung { margin: 0; font-size: var(--kt-groesse-4); color: var(--kt-neben); max-width: 40ch; }

.seitenleiste { position: sticky; top: calc(var(--kt-kopf-kompakt) + var(--kt-luft-4)); display: grid; gap: var(--kt-luft-5); }
.leistenfoto {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--kt-radius-1);
  border-bottom: var(--kt-rahmen-kante) solid var(--kt-logo);
  box-shadow: var(--kt-schatten-weich);
}
.leistenkasten {
  border: var(--kt-rahmen-1) solid var(--kt-linie);
  border-top: var(--kt-rahmen-kante) solid var(--kt-logo);
  border-radius: var(--kt-radius-1);
  background: var(--kt-sanft);
  padding: var(--kt-luft-5);
}
.leistenkasten h2 {
  font-family: var(--kt-schrift-text);
  font-size: var(--kt-groesse-4);
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 0 0 var(--kt-luft-3);
}
.leistenanschrift { margin: 0 0 var(--kt-luft-3); font-weight: 600; }
.leistenzeiten { margin: 0 0 var(--kt-luft-3); display: grid; gap: var(--kt-luft-1); }
.leistenzeiten div { display: flex; justify-content: space-between; gap: var(--kt-luft-3); font-size: var(--kt-groesse-2); }
.leistenzeiten dt { color: var(--kt-neben); }
.leistenzeiten dd { margin: 0; font-weight: 600; text-align: right; }
.leistentelefon { margin: 0 0 var(--kt-luft-4); font-size: var(--kt-groesse-4); font-weight: 700; }
.leistentelefon a { text-decoration: none; }
.leistenkasten .knopf { width: 100%; }

/* Das Heft steht mittig in einem Kasten seiner eigenen Groesse - nicht
 * in einem Kasten ueber die ganze Breite mit grauem Rand links und rechts. */
.blaetterer.mit-skript .blattbild { width: fit-content; max-width: 100%; margin-inline: auto; padding-inline: var(--kt-luft-4); }

/* Der Leerbestand auf Aktionen und Aktuelles (E18): vier Aufnahmen in
 * zwei Reihen, danach der Journal-Anriss wie auf der Startseite. */
.leerbestand { margin-top: var(--kt-luft-7); }
.leerbestand .impressionen { grid-template-columns: repeat(2, 1fr); margin-block: var(--kt-luft-4); }
.leerbestand + .startabschnitt { margin-top: var(--kt-luft-7); }

@media (max-width: 900px) {
  main.bahn:has(> .seitenleiste) { grid-template-columns: 1fr; gap: var(--kt-luft-7); }
  .seitenleiste { position: static; }
  .leistenfoto { max-width: 480px; }
}

/* --- Kacheln mit Rahmen: Musterkuechen, Startseiten-Kacheln ---------------- */
.rasterstueck {
  border: var(--kt-rahmen-1) solid var(--kt-linie);
  border-radius: var(--kt-radius-1);
  background: var(--kt-grund);
  overflow: hidden;
  padding-bottom: var(--kt-luft-4);
}
.rasterstueck:hover { border-color: var(--kt-logo); }
.rasterstueck img { border-radius: 0; }
.rasterstueck .bildplatz { border-radius: 0; border-width: 0 0 var(--kt-rahmen-1); }
.rasterstueck h2,
.rasterstueck .kacheltitel,
.rasterstueck .vorschau,
.rasterstueck .ansichtzahl { margin-inline: var(--kt-luft-4); }
.rasterstueck .kachel { border-radius: 0; }
.galerie .ansicht:target,
.galerie .standard { display: block; }
.galerie .ansicht:target ~ .standard { display: none; }

/* --- Meldungen als Kacheln ------------------------------------------------- */
.meldung {
  border: var(--kt-rahmen-1) solid var(--kt-linie);
  border-top-width: var(--kt-rahmen-1);
  border-radius: var(--kt-radius-1);
  padding: var(--kt-luft-5);
  margin-bottom: var(--kt-luft-4);
  max-width: none;
}
.meldung > p { max-width: 68ch; }
.meldung:target { border-color: var(--kt-logo); }

/* --- Bild ueber alles: das Vollbild der Startseite (E15) ------------------- */
.vollbild {
  position: relative;
  /* Fuellt den Schirm unterhalb von Band und Kopf, hat aber Grenzen: nicht
   * unter 520 px (sonst sitzt der Text auf dem Rand), nicht ueber 860 px
   * (ein 4K-Schirm bekaeme sonst eine Leinwand ohne Inhalt). svh, damit
   * die Adressleiste des Telefons nichts abschneidet. */
  min-height: clamp(520px, calc(100svh - 206px), 860px);
  display: grid;
  align-items: end;
  background: var(--kt-text);
  color: #fff;
  overflow: hidden;
}
.vollbild-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Der Verlauf traegt die Lesbarkeit: unten 82 % Schwarz, nach oben
 * auslaufend. Weiss darauf bleibt ueber jedem Motiv lesbar. */
.vollbild-worte {
  position: relative;
  width: 100%;
  padding-block: clamp(40px, 8vw, 96px) clamp(40px, 6vw, 72px);
  background: linear-gradient(to top, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .55) 45%, rgba(0, 0, 0, 0) 100%);
  text-align: center;
}
.vollbild h1 {
  color: #fff;
  font-size: clamp(36px, 6vw, 68px);
  max-width: 16ch;
  margin-inline: auto;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}
.vollbild .unterzeile {
  color: #fff;
  font-size: clamp(17px, 1.8vw, 21px);
  max-width: 46ch;
  margin: var(--kt-luft-4) auto 0;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .45);
}
.vollbild .erreichbar { justify-content: center; margin-top: var(--kt-luft-6); }
.vollbild .knopf { background: var(--kt-logo); color: #fff; border-color: var(--kt-logo); }
.vollbild .knopf:hover { background: #c00017; border-color: #c00017; }
.vollbild .knopf.leise { background: rgba(255, 255, 255, .92); color: var(--kt-logo); border-color: #fff; }
.vollbild .knopf.leise:hover { background: #fff; }
.vollbild .knopf:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
/* Unter dem Vollbild beginnt der Inhalt ohne den sonst ueblichen Abstand. */
.vollbild + main .flaeche:first-child { padding-top: clamp(36px, 5vw, 64px); }

@media (max-width: 560px) {
  .vollbild { min-height: clamp(480px, calc(100svh - 224px), 720px); }
  .vollbild .erreichbar .knopf { flex-basis: 100%; }
  .vollbild-worte { text-align: left; }
  .vollbild h1, .vollbild .unterzeile { margin-inline: 0; }
}

/* --- Die Ausstellung nach Stil (E27) --------------------------------------
 * Wie auf der alten Seite: "Kuechenstile:", darunter je Stil eine Reihe
 * Fotos mit ihrem Programmnamen als Bildunterschrift. */
.stiltitel { font-family: var(--kt-schrift-text); font-size: var(--kt-groesse-4); margin: var(--kt-luft-6) 0 var(--kt-luft-2); }
.stilname { font-family: var(--kt-schrift-text); font-size: var(--kt-groesse-3); font-weight: 700; margin: var(--kt-luft-5) 0 var(--kt-luft-3); color: var(--kt-rot); }
.impressionen.mit-titel figure { margin: 0; }
.impressionen.mit-titel figcaption {
  font-family: var(--kt-schrift-text);
  font-size: var(--kt-groesse-1);
  font-weight: 600;
  margin-top: var(--kt-luft-2);
  color: var(--kt-text);
}
.rasterstueck .kuechentext { padding: 0 var(--kt-luft-4) var(--kt-luft-4); }
.rasterstueck .kuechentext p { margin: 0 0 var(--kt-luft-2); font-size: var(--kt-groesse-2); color: var(--kt-neben); max-width: none; }
.rasterstueck .kuechentext p:first-child { color: var(--kt-text); font-weight: 600; }