/* ==========================================================================
   Die Stadl Böhmische, Grundlagen
   Farben und Kontraste sind gerechnet, nicht geschätzt. Werte am 21.09.2026
   geprüft, Sollwert 4.5 zu 1 für Fließtext, 3.0 zu 1 für Zierelemente:
     text auf papier        14.04
     grau auf papier         5.46
     schwarz auf papier     19.63
     gelb auf kohle         11.99
     schwarz auf gelb       13.80
     gold auf papier         3.15
   Markengelb auf hellem Grund erreicht nur 1.42 und ist deshalb nie
   Textfarbe. Gelb gehört auf dunkle Flächen oder wird selbst zur Fläche.
   ========================================================================== */

/* --- Schriften, lokal, kein externer Abruf -------------------------------- */

@font-face {
  font-family: "Nunito Sans";
  src: url("../fonts/nunito-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nunito Sans";
  src: url("../fonts/nunito-sans-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* --- Gestaltungswerte ----------------------------------------------------- */

:root {
  --gelb: #FFCA4A;
  --gold: #B88200;
  --gold-text: #8F6500;
  --schwarz: #000000;
  --kohle: #17150F;
  --text: #2A2621;
  --grau: #6B6459;
  --papier: #FAF7F0;
  --weiss: #FFFFFF;

  --schrift: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --gutter: 16px;
  --bahn: 1120px;
  --lesebahn: 680px;
  --radius: 4px;
}

/* --- Grundlagen ----------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Damit Anker nicht unter dem klebenden Kopfbereich landen. Der Wert
     ist die sichere Grundlage für den Fall ohne JavaScript, main.js
     ersetzt ihn durch die tatsächlich gemessene Kopfhöhe. */
  scroll-padding-top: 90px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.65;
}

img {
  max-width: 100%;
  height: auto;
}

/* Sichtbarer Fokus, nie ohne Ersatz entfernen */
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.dunkel :focus-visible {
  outline-color: var(--gelb);
}

/* Sprungmarke für die Tastaturbedienung */
.zum-inhalt {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--gelb);
  color: var(--schwarz);
  font-weight: 800;
  text-decoration: none;
}

.zum-inhalt:focus {
  left: 0;
}

/* --- Typografie ----------------------------------------------------------- */

h1, h2, h3 {
  font-weight: 800;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

h1 {
  margin: 0 0 16px;
  font-size: clamp(1.9rem, 6vw, 3rem);
  line-height: 1.15;
}

h2 {
  margin: 0 0 8px;
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  line-height: 1.22;
  color: var(--schwarz);
}

h3 {
  margin: 32px 0 8px;
  font-size: 1.2rem;
  line-height: 1.3;
  color: var(--schwarz);
}

p { margin: 0 0 16px; }

ul { margin: 0 0 16px; padding-left: 1.2em; }
li { margin-bottom: 6px; }

strong { font-weight: 800; }

a { color: var(--gold-text); }
a:hover { text-decoration: none; }

/* Linkfarbe je Untergrund, gerechnet am 22.09.2026, Sollwert 4.5 zu 1:
     gold-text auf papier   4.87  bestanden
     gold-text auf kohle    3.50  durchgefallen, deshalb Gelb: 11.99
     gold-text auf gelb     3.42  durchgefallen, deshalb Schwarz: 13.80
   Die Grundfarbe gilt also nur auf hellem Grund. Auf farbigen Flächen
   muss die Linkfarbe mitwandern, sonst sind Telefon und E-Mail im
   Kontaktabschnitt kaum lesbar. */
/* Das :not(.knopf) ist nicht optional. Ohne es gewinnt .dunkel a mit
   seiner höheren Spezifität gegen .knopf-voll, und der gelbe Knopf
   bekommt gelben Text auf gelbem Grund, Kontrast 1.00. */
.dunkel a:not(.knopf) { color: var(--gelb); }
.gelb a:not(.knopf) { color: var(--schwarz); }

.zierlinie {
  width: 56px;
  height: 4px;
  margin: 0 0 24px;
  border: 0;
  background: var(--gold);
}

.dunkel .zierlinie { background: var(--gelb); }

.vorlauf {
  max-width: 32em;
  font-size: 1.0625rem;
  color: var(--grau);
}

.dunkel .vorlauf { color: #D8D2C8; }

/* --- Bahnen und Abschnitte ------------------------------------------------ */

.bahn {
  width: 100%;
  max-width: var(--bahn);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.lesebahn { max-width: var(--lesebahn); }

/* Alle Abschnitte haben dieselbe Aussenkante, damit Überschriften und
   Zierlinien untereinander bündig stehen. Der Fließtext bekommt
   trotzdem eine Obergrenze, weil Zeilen über etwa 75 Zeichen schwer zu
   lesen sind: das Auge findet den Anfang der nächsten Zeile nicht mehr
   sicher. Aufzählungen genauso. Terminliste, Galerie und Musikerraster
   sind davon ausgenommen, die brauchen die volle Breite. */
.abschnitt p,
.abschnitt ul:not(.termine):not(.galerie):not(.musiker-liste) {
  max-width: 42em;
}

.abschnitt { padding: 48px 0; }

.dunkel {
  background: var(--kohle);
  color: #E6E1D8;
}

.dunkel h2, .dunkel h3 { color: var(--gelb); }

.gelb {
  background: var(--gelb);
  color: var(--schwarz);
}

.gelb h2, .gelb h3 { color: var(--schwarz); }

/* --- Knöpfe --------------------------------------------------------------- */

.knopfreihe {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 24px;
  border: 2px solid var(--gelb);
  border-radius: var(--radius);
  font-weight: 800;
  text-decoration: none;
  line-height: 1.2;
}

.knopf svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: currentColor;
}

.knopf-voll {
  background: var(--gelb);
  color: var(--schwarz);
}

.knopf-voll:hover { background: #FFD877; }

.knopf-leer {
  background: transparent;
  color: var(--gelb);
}

.knopf-leer:hover { background: rgba(255, 202, 74, 0.14); }

/* Auf hellem Grund bekommen die Knöpfe dunkle Ränder, weil Gelb dort
   zu schwach ist, siehe Kontrastwerte im Kopf dieser Datei. */
.hell .knopf { border-color: var(--schwarz); }
.hell .knopf-voll { background: var(--gelb); color: var(--schwarz); }
.hell .knopf-leer { color: var(--schwarz); }
.hell .knopf-leer:hover { background: rgba(0, 0, 0, 0.06); }

/* --- Kopfbereich ---------------------------------------------------------- */

/* Der Kopfbereich klebt oben am Fenster. main.js ergänzt das Verstecken
   beim Runterscrollen über die Klasse kopf-versteckt. Ohne Skript bleibt
   er einfach dauerhaft stehen, das Skript baut also auch hier nur auf.
   Der z-index bleibt unter der Sprungmarke (100) und unter dem
   Lichtkasten (200), damit beide weiterhin darüber liegen. */
.kopf {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--kohle);
  padding: 14px 0;
  transition: transform 0.25s ease;
}

.kopf-versteckt {
  transform: translateY(-100%);
}

.kopf .bahn {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}

.kopf-logo {
  display: block;
  flex: 0 0 auto;
  /* greift nur, wenn das Logo nicht laedt und der Alternativtext erscheint */
  color: var(--gelb);
}

.kopf-logo img {
  display: block;
  /* Wortmarke mit Claim darunter, Verhältnis 3.86 zu 1. Die 200 Pixel sind
     gemessen, nicht geschätzt: die Bahn hat am Handy 343 Pixel Innenbreite,
     der Burger braucht 103 und der Abstand 24. Alles über 216 Pixel schiebt
     den Burger in eine zweite Zeile und macht den klebenden Kopf fast
     doppelt so hoch. */
  width: 200px;
  height: auto;
}

/* Burger-Knopf. Steht im HTML auf hidden und wird erst von main.js
   eingeschaltet. Ohne Skript bleibt die Navigation also normal sichtbar
   und umbricht wie bisher, statt hinter einem toten Knopf zu
   verschwinden. */
.burger {
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin-left: auto;
  padding: 10px 14px;
  border: 2px solid rgba(255, 202, 74, 0.5);
  border-radius: var(--radius);
  background: none;
  color: var(--gelb);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 800;
  cursor: pointer;
}

.kopf.burger-bereit .burger { display: inline-flex; }

.burger-striche {
  position: relative;
  width: 22px;
  height: 2px;
  background: currentColor;
}

.burger-striche::before,
.burger-striche::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: currentColor;
}

.burger-striche::before { top: -7px; }
.burger-striche::after { top: 7px; }

/* Im offenen Zustand wird aus den drei Strichen ein Kreuz */
.menue-offen .burger-striche { background: transparent; }
.menue-offen .burger-striche::before { top: 0; transform: rotate(45deg); }
.menue-offen .burger-striche::after { top: 0; transform: rotate(-45deg); }

.hauptnavigation ul {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hauptnavigation a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 12px;
  border-radius: var(--radius);
  color: #E6E1D8;
  font-weight: 800;
  font-size: 0.9375rem;
  text-decoration: none;
}

.hauptnavigation a:hover {
  background: rgba(255, 202, 74, 0.16);
  color: var(--gelb);
}

/* Nur wenn das Skript den Burger eingeschaltet hat, darf die Navigation
   am Handy verschwinden. Sonst bleibt sie sichtbar. */
@media (max-width: 767px) {
  .kopf.burger-bereit .hauptnavigation {
    display: none;
    flex: 1 0 100%;
  }

  .kopf.burger-bereit.menue-offen .hauptnavigation {
    display: block;
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
  }

  .kopf.burger-bereit .hauptnavigation ul { flex-direction: column; }

  .kopf.burger-bereit .hauptnavigation a {
    min-height: 48px;
    padding: 6px 12px;
    font-size: 1rem;
  }
}

/* --- Aufmacher ------------------------------------------------------------ */

.aufmacher {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  /* Der Text sitzt unten, nicht mittig. So bleiben die Gesichter der
     Musiker im oberen Bildteil frei und werden nicht von der
     Überschrift verdeckt. */
  align-content: end;
  /* Am Handy bewusst niedriger. Ein 16-zu-9-Bild in einem hohen Bereich
     wird seitlich stark beschnitten, je flacher der Bereich, desto mehr
     Bildbreite bleibt sichtbar. */
  /* clamp statt vh allein, aus zwei Gründen:
     Untergrenze, weil vh von der Fensterhöhe abhängt. In einem flachen
     Fenster fällt ein reiner vh-Wert zusammen und der Aufmacher wird
     zum Streifen.
     Obergrenze, weil ein 16-zu-9-Bild in einem hohen Bereich seitlich
     beschnitten wird: je höher, desto weniger Musiker bleiben sichtbar.
     Kein max-height, das würde gegen min-height verlieren. */
  min-height: clamp(420px, 66vh, 620px);
  background: var(--kohle);
  padding: 150px 0 48px;
  text-align: center;
}

.aufmacher-bild {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.aufmacher-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
}

/* Deckschicht über dem Foto. Die 60 Prozent sind gerechnet, nicht nach
   Gefühl gesetzt: gemessen gegen die hellste Kachel des Stubenbildes,
   rgb(188, 158, 132), erreicht Gelb damit 5.46 zu 1 und heller Text
   5.53 zu 1. Bei 50 Prozent wären es 4.35 und damit unter dem Sollwert
   4.5. Das Stubenbild ist dunkler als das vorherige Bühnenfoto, deshalb
   darf die Deckschicht von 72 auf 60 Prozent zurück und das Foto tritt
   stärker hervor. Wird das Bild erneut getauscht, muss dieser Wert neu
   gerechnet werden. Das isolation auf .aufmacher ist Pflicht, sonst
   rutschen die negativen z-index-Werte hinter den Seitenhintergrund. */
.aufmacher::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Verlauf statt gleichmäßiger Fläche. Die frühere Deckschicht von
     60 Prozent lag auch über den Gesichtern und hat das ohnehin dunkle
     Stubenbild, Mittelwert 87 von 255, auf etwa 49 gedrückt.
     Oben bleibt das Foto deshalb fast unverdeckt, die Deckung steigt
     erst dort, wo ab etwa der halben Höhe der Text beginnt.
     Die Werte sind nicht geschätzt, sondern am ausgelieferten Bild
     gemessen, siehe CLAUDE.md. Wird das Bild getauscht, neu messen. */
  background: linear-gradient(
    to bottom,
    rgba(23, 21, 15, 0.04) 0%,
    rgba(23, 21, 15, 0.12) 30%,
    rgba(23, 21, 15, 0.44) 48%,
    rgba(23, 21, 15, 0.68) 62%,
    rgba(23, 21, 15, 0.72) 100%
  );
}

.aufmacher h1 { color: var(--gelb); }

.aufmacher .vorlauf { margin: 0 auto; }

/* --- Bilder im Inhalt ----------------------------------------------------- */

.inhaltsbild {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 32px;
  border-radius: var(--radius);
}

/* Bild und Text nebeneinander. Am Handy untereinander, ab Tablet links
   das Bild in 5 von 12 Spalten, rechts der Text in 7. Das minmax(0, ...)
   ist Pflicht, sonst kann ein breites Kind die Spalte aufblaehen und
   die Seite wächst über die Fensterbreite hinaus. */
.zweispalter {
  display: grid;
  gap: 28px;
}

.zweispalter .inhaltsbild { margin-bottom: 0; }

.zweispalter h2 { margin-top: 0; }

/* Der YouTube-Knopf steht mittig unter dem Kapellenbild, seit 09.10.2026 */
.knopfreihe-mittig {
  justify-content: center;
  margin-top: 20px;
}

.bildunterschrift {
  margin: -22px 0 32px;
  color: var(--grau);
  font-size: 0.875rem;
}

.gelb /* Bild und Text nebeneinander. Am Handy untereinander, ab Tablet links
   das Bild in 5 von 12 Spalten, rechts der Text in 7. Das minmax(0, ...)
   ist Pflicht, sonst kann ein breites Kind die Spalte aufblaehen und
   die Seite wächst über die Fensterbreite hinaus. */
.zweispalter {
  display: grid;
  gap: 28px;
}

.zweispalter .inhaltsbild { margin-bottom: 0; }

.zweispalter h2 { margin-top: 0; }

.bildunterschrift { color: #5C4A14; }

/* Am Handy steht das Bild vollständig über dem Text, nicht dahinter.
   Grund: ein 16-zu-9-Bild formatfüllend in einem hochformatigen Bereich
   verliert links und rechts so viel, dass von sieben Musikern nur drei
   übrig bleiben. Hier wird stattdessen das ganze Bild gezeigt, Text und
   Knöpfe stehen darunter auf dunklem Grund. Die Deckschicht entfällt,
   weil kein Text mehr über dem Foto liegt. */
@media (max-width: 1023px) {
  .aufmacher {
    display: block;
    min-height: 0;
    padding: 0 0 36px;
  }

  .aufmacher-bild {
    position: static;
    z-index: auto;
  }

  .aufmacher-bild img {
    height: auto;
    object-fit: fill;
  }

  .aufmacher::after { content: none; }

  .aufmacher .bahn { padding-top: 28px; }
}

/* --- Musiker -------------------------------------------------------------- */

.musiker-liste {
  display: grid;
  /* Am Handy zwei Spalten, damit die Liste bei sieben Musikern nicht
     endlos wird. Ab Tablet wächst sie automatisch mit, siehe unten. */
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.musiker { margin: 0; }

.musiker-bild {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  background: #E8E3D8;
}

/* Solange keine Fotos vorliegen, steht hier eine sichtbar leere Fläche,
   damit die Lücke nicht wie ein Ladefehler aussieht. */
.musiker-bild-fehlt {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 5;
  padding: 10px;
  border: 2px dashed #B3261E;
  border-radius: var(--radius);
  background: #FDECEA;
  color: #8C1D18;
  font-size: 0.8125rem;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
}

.musiker-name {
  margin: 12px 0 2px;
  font-size: 1.0625rem;
  line-height: 1.3;
}

.musiker-instrument {
  margin: 0;
  color: var(--grau);
  font-size: 0.9375rem;
}

/* --- Galerie, Hinter den Kulissen ----------------------------------------- */

/* Mosaik statt freiem Masonry. Alle Kacheln liegen auf demselben
   Raster, drei davon belegen zwei mal zwei Felder. Das gibt Rhythmus,
   ohne dass die Reihe zerfranst: freies Masonry mit Formaten von 2.0
   bis 0.67 sah am 22.09.2026 unruhig aus, weil nichts aneinander
   ausgerichtet war und die Bildunterschriften auf lauter verschiedenen
   Höhen standen.
   Alle Bilder liegen im Verhältnis 4 zu 3 vor. Eine grosse Kachel ist
   doppelt so breit und doppelt so hoch, hat also fast dasselbe
   Verhältnis, deshalb genügt ein Zuschnitt in zwei Grössen. */
/* Seit 09.10.2026: Bild 1 (5 zu 3) und Bild 7 (3 zu 2) sollen in der
   Kachel ganz zu sehen sein, ohne dass seitlich jemand fehlt. Die
   Zeilenhöhen werden deshalb aus der Breite der Galerie gerechnet, in
   cqw, nicht mehr über 1fr gleichgezogen. Alle anderen Bilder sind 4 zu 3.
   Am Handy, zwei Spalten:
     Zeile 1  Bild 1 volle Breite, 5 zu 3, also 60 Prozent der Breite
     Zeile 2  Bild 2 und 3
     Zeile 3  Bild 4 und 5
     Zeile 4  Bild 6 volle Breite, 4 zu 3, sonst bliebe neben ihm ein Loch
     Zeile 5  Bild 7 volle Breite, 3 zu 2
     Zeile 6  Bild 8 und 9
   Wer Bilder tauscht oder ergänzt, muss diese Zeilen nachrechnen. Ohne
   Unterstützung für cqw fällt das Raster auf die alte Form zurück. */
#bilder .bahn { container-type: inline-size; }

.galerie {
  --spalt: 12px;
  --klein: calc((100cqw - var(--spalt)) * 0.375);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  grid-template-rows:
    60cqw
    var(--klein)
    var(--klein)
    75cqw
    calc(100cqw * 2 / 3);
  grid-auto-rows: var(--klein);
  gap: var(--spalt);
  margin: 0;
  padding: 0;
  list-style: none;
}

.galerie li:nth-child(1),
.galerie li:nth-child(6),
.galerie li:nth-child(7) { grid-column: 1 / -1; }

.galerie li { margin: 0; }

.galerie figure {
  margin: 0;
  height: 100%;
}

.galerie-link {
  display: block;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius);
  cursor: zoom-in;
}

.galerie img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.galerie-link:hover img,
.galerie-link:focus-visible img {
  transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .galerie img { transition: none; }
  .galerie-link:hover img,
  .galerie-link:focus-visible img { transform: none; }
}

/* Die Bildunterschriften stehen nicht mehr unter den Kacheln, sie
   haben die Reihe zerfranst. Sie erscheinen in der Bildansicht. */
.galerie figcaption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Ab 640 Pixel drei Spalten:
     Zeile 1 und 2  Bild 1 gross (zwei mal zwei), daneben Bild 2 und 3
     Zeile 3        Bild 4, 5, 6
     Zeile 4 und 5  Bild 7 gross, daneben Bild 8 und 9
   Die grosse Kachel ist zwei Spalten plus Spalt breit, B = (200cqw - Spalt) / 3.
   Für 5 zu 3 ist sie 0.6 B hoch, für 3 zu 2 zwei Drittel B, jeweils
   verteilt auf zwei Zeilen und einen Spalt. Die kleinen Bilder daneben
   werden dadurch oben und unten etwas beschnitten, das ist so gewollt. */
@media (min-width: 640px) {
  .galerie {
    --spalt: 16px;
    --klein: calc((100cqw - 2 * var(--spalt)) * 0.25);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows:
      repeat(2, calc((200cqw - var(--spalt)) * 0.1 - var(--spalt) / 2))
      var(--klein)
      repeat(2, calc((200cqw - var(--spalt)) / 9 - var(--spalt) / 2));
  }

  .galerie li:nth-child(6) { grid-column: auto; }

  .galerie li.gross {
    grid-column: span 2;
    grid-row: span 2;
  }
}

@media (min-width: 1024px) {
  .galerie { --spalt: 20px; }

  /* Erst hier wächst das Logo. Darunter braucht die Navigation allein 565
     der 705 Pixel Innenbreite, das Logo rutscht also ohnehin in eine eigene
     Zeile, und ein größeres Logo macht den klebenden Kopf dort nur höher.
     Ab 1024 Pixel stehen Logo und Navigation nebeneinander. */
  .kopf-logo img { width: 280px; }

  /* Ab hier liegt der Text wieder über dem Bild. Darunter stehen Bild
     und Text getrennt untereinander, dort wäre ein großer oberer
     Innenabstand nur eine leere Fläche. */
  .aufmacher {
    min-height: clamp(520px, 86vh, 820px);
    padding: 260px 0 72px;
  }
}

/* --- Lichtkasten ----------------------------------------------------------- */

/* Liegt am Ende von body, nicht in der Sektion. Grund: z-index wirkt nur
   innerhalb desselben Stacking-Context, und transform, filter oder
   opacity kleiner 1 an einem Vorfahren erzeugen einen eigenen, aus dem
   auch position: fixed nicht entkommt. Genau das tut die Galerie mit
   ihrem Zoom, deshalb wäre ein Lichtkasten darin gefangen. */
.lichtkasten {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 16px;
}

.lichtkasten[hidden] { display: none; }

.lichtkasten-flaeche {
  position: absolute;
  inset: 0;
  background: rgba(10, 9, 6, 0.96);
}

.lichtkasten-inhalt {
  position: relative;
  z-index: 1;
  /* Platz für die seitlichen Pfeile, damit sie das Bild nicht überdecken */
  padding: 0 84px;
  display: grid;
  justify-items: center;
  gap: 10px;
  max-width: min(1100px, 100%);
}

.lichtkasten-bild {
  display: block;
  max-width: 100%;
  max-height: 76vh;
  width: auto;
  height: auto;
  border-radius: var(--radius);
}

.lichtkasten-text {
  margin: 0;
  color: #E6E1D8;
  font-size: 1rem;
  text-align: center;
}

.lichtkasten-zaehler {
  margin: 0;
  color: #9A958C;
  font-size: 0.875rem;
}

.lichtkasten-knopf {
  position: fixed;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 2px solid rgba(255, 202, 74, 0.55);
  border-radius: 50%;
  background: rgba(23, 21, 15, 0.8);
  color: var(--gelb);
  cursor: pointer;
}

.lichtkasten-knopf:hover { background: rgba(255, 202, 74, 0.2); }

.lichtkasten-knopf svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

/* Feste Plaetze am Bildschirmrand, unabhängig von der Bildgröße.
   Würden sie sich am Bild ausrichten, sprängen sie bei jedem
   Bildwechsel an eine andere Stelle, weil jedes Bild anders groß ist. */
.lichtkasten-zu { top: 16px; right: 16px; }
.lichtkasten-zurueck { left: 16px; top: 50%; transform: translateY(-50%); }
.lichtkasten-vor { right: 16px; top: 50%; transform: translateY(-50%); }

/* Am Handy ist seitlich kein Platz, dort sitzen die Pfeile unten in
   festen Abständen, ebenfalls unabhängig vom Bild. */
@media (max-width: 639px) {
  .lichtkasten-zurueck,
  .lichtkasten-vor {
    top: auto;
    bottom: 20px;
    transform: none;
  }
  .lichtkasten-zurueck { left: 20px; }
  .lichtkasten-vor { right: 20px; }
  .lichtkasten-bild { max-height: 64vh; }

  .lichtkasten-inhalt {
    padding: 0 0 76px;
  }
}

/* Solange der Lichtkasten offen ist, soll die Seite dahinter nicht
   mitscrollen. */
body.lichtkasten-offen { overflow: hidden; }

/* --- Reiter für die Termine ------------------------------------------------ */

/* Die Leiste ist zunächst versteckt. Erst main.js schaltet sie ein, indem es
   .reiter-aktiv setzt. Ohne Skript stehen beide Listen untereinander und
   sind vollständig lesbar, es geht also nichts verloren. */
.reiter-leiste { display: none; }

.reiter-aktiv .reiter-leiste {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 24px;
  border-bottom: 2px solid rgba(0, 0, 0, 0.14);
}

.reiter {
  min-height: 48px;
  padding: 10px 18px;
  margin-bottom: -2px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  color: var(--grau);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
}

.reiter:hover { color: var(--text); }

.reiter[aria-selected="true"] {
  border-bottom-color: var(--gold);
  color: var(--schwarz);
}

/* Solange die Reiter aktiv sind, trägt der Reiter selbst die Überschrift */
.reiter-aktiv .tafel-titel { display: none; }

.tafel-titel { margin-top: 0; }

.tafel:focus { outline: none; }
.tafel:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }

/* --- Termine -------------------------------------------------------------- */

.termine {
  margin: 0;
  padding: 0;
  list-style: none;
}

.termin {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.14);
}

.termin:first-child { border-top: 1px solid rgba(0, 0, 0, 0.14); }

.termin-datum {
  flex: 0 0 auto;
  min-width: 11.5em;
  font-weight: 800;
}

.termin-ort { flex: 1 1 14em; }

.termin-zeit {
  flex: 0 0 auto;
  color: var(--grau);
}

/* Privatveranstaltungen stehen in der Liste, weil sie zeigen, dass die
   Kapelle gebucht ist. Sie werden gedaempft, damit niemand vergeblich
   hinfaehrt, und tragen bewusst keinen Ort. */
.termin-privat { color: var(--grau); }
.termin-privat .termin-zeit { font-style: italic; }

/* Der Rueckblick nutzt dieselbe Termindarstellung wie die kommenden
   Termine, nur gedaempft. Zwei verschiedene Listenformen im selben
   Abschnitt wirken wie zwei verschiedene Bauteile. */
.termine-vergangen .termin { color: var(--grau); }

/* --- Fußbereich ----------------------------------------------------------- */

.fuss {
  background: var(--kohle);
  color: #B8B2A8;
  padding: 40px 0 32px;
  font-size: 0.9375rem;
}

.fuss a { color: #E6E1D8; }

.fuss-spalten {
  display: grid;
  gap: 28px;
}

.fuss h2 {
  margin: 0 0 10px;
  font-size: 1rem;
  color: var(--gelb);
}

.fuss-logo {
  display: block;
  width: 100%;
  /* zweizeilige Wortmarke mit Claim darunter, Verhältnis 1.65 zu 1.
     Schmaler als die einzeilige, dadurch passt sie in die Fußspalte,
     ohne winzig zu werden. */
  max-width: 200px;
  height: auto;
  margin: 0 0 16px;
}

.fuss ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fuss li { margin-bottom: 4px; }

.fuss-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  text-decoration: none;
}

.fuss-links svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.fuss-recht {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

/* --- Rechtstexte ---------------------------------------------------------- */

.rechtstext h1 {
  color: var(--schwarz);
  font-size: clamp(1.7rem, 5vw, 2.4rem);
}

.rechtstext h2 {
  margin: 40px 0 10px;
  font-size: clamp(1.25rem, 3.4vw, 1.5rem);
}

.rechtstext h3 {
  margin: 26px 0 6px;
  font-size: 1.0625rem;
}

.rechtstext p, .rechtstext li { max-width: 40em; }

.rechtstext .stand {
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.14);
  color: var(--grau);
  font-size: 0.9375rem;
}

.anschrift {
  margin: 0 0 16px;
  font-style: normal;
}

/* Fehlende Angaben. Vor dem Go-live muss dieser Befehl null Treffer liefern:
   grep -rn "NOCH ZU ERGÄNZEN" --include="*.html" .
   Der Stil ist absichtlich laut, damit nichts unbemerkt durchrutscht. */
.platzhalter {
  display: inline-block;
  padding: 1px 8px;
  border: 2px dashed #B3261E;
  border-radius: var(--radius);
  background: #FDECEA;
  color: #8C1D18;
  font-weight: 800;
  font-size: 0.9375em;
}

/* --- Ab Tablet ------------------------------------------------------------ */

@media (min-width: 768px) {
  :root { --gutter: 24px; }

  body { font-size: 18px; }

  .abschnitt { padding: 64px 0; }

  .kopf .bahn { justify-content: space-between; }


  .kopf.burger-bereit .burger { display: none; }



    .fuss-spalten { grid-template-columns: repeat(3, 1fr); gap: 32px; }

  .musiker-liste { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

  .zweispalter {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 40px;
    /* Text auf gleicher Mitte wie Bild und YouTube-Knopf zusammen */
    align-items: center;
  }
}