/* =========================================================================
   Counter Culture Comedy Club — Bausteine
   Wiederverwendbare Komponenten. Jede hier genau einmal.
   ========================================================================= */

/* --- Zensurbalken ------------------------------------------------------
   Zweites tragendes Gestaltungselement.
   Ein Balken über WÖRTERN. Nie über Körpern, Bildern, Preisen oder Buttons.
   Das Wort steht im ausgelieferten HTML — der Balken deckt es nur zu.
   Aufdeckung beim Darüberfahren oder Tippen; auf Geräten ohne Zeiger
   nach zwei Sekunden von selbst.
   ----------------------------------------------------------------------- */

.zensur {
  position: relative;
  display: inline-block;
  white-space: nowrap; /* der Balken bricht nie um */
  isolation: isolate;
}

.zensur__wort {
  color: var(--knochenweiss);
}

/* Die Balkengeometrie ist verstellbar, weil sie von der Schrift abhängt:
   Fließtext in Inter hat Ober- und Unterlängen, Versalien in Anton nicht.
   Ein Kontext dreht an diesen Werten, statt die Komponente zu überschreiben. */
.zensur::after {
  content: "";
  position: absolute;
  /* Vorgabewerte als Rückfall in var(), nicht als Regel auf .zensur —
     sonst gewinnt der eigene Wert gegen den geerbten aus dem Kontext. */
  inset: var(--zensur-oben, -0.14em)
         var(--zensur-seite, -0.2em)
         var(--zensur-unten, -0.08em);
  z-index: 1;
  background: var(--messing);
  transform-origin: left center;
  transition: transform var(--tempo) var(--kurve);
  pointer-events: none;
}

.zensur:hover::after,
.zensur:active::after,
/* Mit der Tastatur genauso aufdeckbar wie mit dem Zeiger.
   Beides: :focus-visible ist das Richtige, hängt aber an einer
   Heuristik des Browsers. :focus daneben kostet nichts — mit dem
   Zeiger deckt ohnehin schon :hover auf. */
.zensur:focus::after,
.zensur:focus-visible::after {
  transform: scaleX(0);
}

/* Geräte ohne Zeiger: nach zwei Sekunden von selbst. */
@media (hover: none) {
  .zensur::after {
    animation: zensur-auf 0.34s var(--kurve) 2s forwards;
  }
}

@keyframes zensur-auf {
  to { transform: scaleX(0); }
}

/* Bleibt zu. Für Stellen, an denen die Pointe das Zudecken ist. */
.zensur--dauerhaft::after {
  animation: none;
  transform: none !important;
}

/* Heller Balken, für Flächen in Feldschwarz. */
.zensur--hell::after {
  background: var(--messing-hell);
}

/* Balken ohne Wort dahinter. Kein Zensurbalken — es gibt nichts
   aufzudecken. Platzhalter, bis das verdeckte Wort feststeht. */
.balken {
  display: inline-block;
  width: var(--balken-laenge, 6ch);
  height: var(--balken-hoehe, 1.16em);
  vertical-align: var(--balken-versatz, -0.16em);
  background: var(--messing);
  border-radius: 1px;
}

/* --- Knopf -------------------------------------------------------------
   Signalrot ist auf der ganzen Seite nur hier flächig.
   Schrift auf Signalrot ist Tiefschwarz: 5,2:1. Knochenweiss wäre 3,1:1
   und würde die Kontrastvorgabe reißen.
   ----------------------------------------------------------------------- */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  font-family: var(--schrift-text);
  font-size: var(--satz-s);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1.1;
  padding: 1.05em 1.7em;
  border: 1px solid transparent;
  border-radius: 2px;
  text-decoration: none;
  cursor: pointer;
  transition: filter var(--tempo) var(--kurve),
              background-color var(--tempo) var(--kurve),
              color var(--tempo) var(--kurve);
}

.knopf--kauf {
  background: var(--signalrot);
  color: var(--tiefschwarz);
}

.knopf--kauf:hover {
  color: var(--tiefschwarz);
  filter: brightness(1.1);
}

.knopf--zweit {
  background: transparent;
  border-color: var(--messing);
  color: var(--knochenweiss);
}

.knopf--zweit:hover {
  background: var(--messing);
  color: var(--tiefschwarz);
}

.knopf--breit {
  width: 100%;
}

.knopf[aria-disabled="true"] {
  background: transparent;
  border-color: var(--linie);
  color: var(--gedimmt);
  cursor: default;
  pointer-events: none;
}

/* --- Karte -------------------------------------------------------------- */

.karte {
  background: var(--feldschwarz);
  border: 1px solid var(--linie);
  border-radius: 3px;
  padding: var(--luft-5);
  box-shadow: inset 0 1px 0 rgb(232 198 148 / 0.16);
}

.karte > * + * {
  margin-top: var(--luft-3);
}

/* --- Preis -------------------------------------------------------------- */

.preis {
  display: flex;
  align-items: baseline;
  gap: var(--luft-3);
  font-family: var(--schrift-titel);
  font-size: var(--titel-3);
  line-height: 1;
}

.preis__alt {
  font-size: 0.5em;
  color: var(--gedimmt);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* --- Faktenblock -------------------------------------------------------
   Steht als Text im Quelltext, nie in einer Grafik. Zitierfähig für
   Suchmaschinen und Antwortmaschinen.
   ----------------------------------------------------------------------- */

.fakten {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--luft-2) var(--luft-4);
  margin-top: var(--luft-5);
  max-width: 42rem;
}

.fakten dt {
  font-size: var(--satz-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.19em;
  color: var(--messing);
  padding-top: 0.28em;
}

.fakten dd {
  margin: 0;
  font-size: var(--satz-l);
}

/* --- Statuszeile -------------------------------------------------------- */

.status {
  font-size: var(--satz-s);
  color: var(--gedimmt);
  max-width: 48ch;
}

.status--knapp { color: var(--neonblau); }
.status--weg   { color: var(--neonblau); }

/* --- Medaille -----------------------------------------------------------
   Schutzzone: rundherum ein Viertel des Durchmessers frei. Steckt hier
   fest im Baustein, damit sie niemand vergessen kann.
   ----------------------------------------------------------------------- */

.medaille {
  display: block;
  flex: none;
  /* Die Schutzzone reserviert echten Platz. Kein negativer Rand, der sie
     wieder wegnimmt — sonst kann ein Nachbar bis an den Ring heranrücken. */
  padding: calc(var(--medaille-groesse) / 4);
}

.medaille img {
  display: block;
  width: var(--medaille-groesse);
  height: var(--medaille-groesse);
}

/* --- Kanten und Materialflächen ----------------------------------------
   Behaupten keinen Raum. Ausschnitte aus dem Wandschild-Motiv.
   ----------------------------------------------------------------------- */

.kante {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(
    90deg,
    transparent,
    var(--messing) 18%,
    var(--messing-hell) 50%,
    var(--messing) 82%,
    transparent
  );
}

.materialband {
  height: clamp(58px, 8vw, 96px);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-block: 1px solid var(--linie-zart);
}

.materialband--putz { background-image: url("../textur/putz-dunkel.webp"); }
.materialband--warm { background-image: url("../textur/putz-warm.webp"); }

/* Nur für Vorleseprogramme. Nicht display:none — das würde den Text
   auch dort verschlucken. */
.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Kanäle ------------------------------------------------------------
 *
 * Verweise auf die eigenen Profile. Zwei Fassungen: klein im Fuß, größer
 * als eigener Abschnitt in Zone 2 der Startseite.
 *
 * Bewusst NICHT neben dem Kaufknopf und nicht in Zone 1. Ein Verweis
 * nach draußen direkt neben dem Kaufweg ist ein Ausgang an der Stelle,
 * an der ein Klick gebraucht wird — und Zone 1 wird von Meta mitgeprüft.
 * ----------------------------------------------------------------------- */

.kanaele {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}

.kanaele a {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  text-decoration: none;
}

.kanaele__zeichen {
  flex: none;
  display: block;
}

/* Im Fuß: eine Zeile, in der Sprache der übrigen Fußlinks. */
.kanaele--fuss {
  gap: var(--luft-2) var(--luft-4);
}

.kanaele--fuss a {
  color: var(--gedimmt);
  font-size: var(--satz-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.19em;
  padding-block: 0.2rem; /* 24 px Trefferfläche */
}

.kanaele--fuss .kanaele__zeichen {
  width: 20px;
  height: 20px;
}

.kanaele--fuss a:hover { color: var(--messing-hell); }

/* Als Abschnitt: gerahmte Felder, gleich breit, Messing statt Signalrot —
   das gehört dem Kaufknopf (CLAUDE.md 4). */
.kanaele--feld {
  gap: var(--luft-3);
  margin-top: var(--luft-4);
}

.kanaele--feld a {
  border: 1px solid var(--messing);
  border-radius: 2px;
  padding: 0.85em 1.2em;
  color: var(--knochenweiss);
  font-size: var(--satz-s);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  transition: background-color var(--tempo) var(--kurve),
              color var(--tempo) var(--kurve);
}

.kanaele--feld a:hover {
  background: var(--messing);
  color: var(--tiefschwarz);
}

/* --- Raumband ----------------------------------------------------------
 *
 * Ein Anschnitt des Saals über die volle Breite. Es soll auftauchen und
 * wieder verschwinden, nicht ausgestellt werden: oben und unten läuft es
 * in die Grundfläche aus, darüber liegt ein Schleier, der die kalten
 * Blautöne des Raums an die Messing-Palette heranzieht.
 *
 * Das Abdunkeln steckt bewusst in der CSS und nicht in der Bilddatei —
 * dieselbe Datei trägt auf /der-ort/ ungefiltert den Raum.
 * ----------------------------------------------------------------------- */

.raumband {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: clamp(150px, 26vw, 300px);
  border-block: 1px solid var(--linie-zart);
  background: var(--tiefschwarz);
}

.raumband img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Der Saal ist im Original deutlich kühler als die Marke. */
  filter: saturate(0.82) brightness(0.78) contrast(1.06);
}

/* Auslaufen nach oben und unten, damit es ein Anschnitt bleibt. */
.raumband::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom,
      var(--tiefschwarz) 0%,
      rgb(11 11 12 / 0.12) 27%,
      rgb(11 11 12 / 0.12) 73%,
      var(--tiefschwarz) 100%);
}

/* Ein Hauch Messing über allem — hält das Band in der Palette. */
.raumband::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(105deg,
    rgb(182 138 84 / 0.16) 0%,
    rgb(182 138 84 / 0) 58%);
  mix-blend-mode: overlay;
}

/* --- Terminkarte -------------------------------------------------------
   Beide Termine sind gleichrangig: gleicher Preis, gleiche Gestaltung,
   gleiche Größe. Der zweite Abend ist kein Restposten (SPEC 10, Risiko 8).
   ----------------------------------------------------------------------- */

.termin {
  display: flex;
  flex-direction: column;
  gap: var(--luft-3);
}

.termin > * { margin: 0; }

.termin__datum {
  font-size: var(--titel-3);
  line-height: 0.94;
}

.termin__datum a {
  text-decoration: none;
  color: var(--knochenweiss);
}

.termin__datum a:hover {
  color: var(--messing-hell);
}

/* Der Preis bekommt Luft nach unten — er gehört zum Knopf, nicht zur Zeit. */
.termin .preis { margin-top: var(--luft-2); }
.termin .knopf { margin-top: auto; }

/* --- Zone 1 der Show-Seite ---------------------------------------------
   Der Kaufknopf muss ohne Scrollen sichtbar sein — daran hängt Aufgabe 1.
   Deshalb steht die Überschrift hier eine Stufe kleiner als auf der
   Startseite und der obere Abstand ist knapper. Auf der Startseite ist
   die Wortmarke das Statement, hier ist es der Termin.
   ----------------------------------------------------------------------- */

.zone1--show {
  padding-top: var(--luft-5);
}

.zone1--show h1 {
  font-size: var(--titel-2);
  max-width: 20ch;
}

.zone1--show .fakten {
  margin-top: var(--luft-4);
}

.kaufbereich {
  margin-top: var(--luft-5);
  max-width: 34rem;
}

.kaufbereich > * + * {
  margin-top: var(--luft-3);
}

/* --- Zone 1 ------------------------------------------------------------
   Oberhalb des Kaufbereichs. Wortlaut nüchtern, die Marke trägt hier
   über Material, Medaille und Typografie.
   ----------------------------------------------------------------------- */

.zone1__unterzeile { margin-top: var(--luft-4); }
.zone1__termine    { margin-top: var(--luft-6); }

.ortszeile {
  margin-top: var(--luft-5);
  color: var(--messing);
}

/* --- Zitatblock --------------------------------------------------------
   Eine Zeile, täglich eine andere. Trägt den Zensurbalken.
   ----------------------------------------------------------------------- */

.zitatfeld {
  border-block: 1px solid var(--linie-zart);
  background: var(--feldschwarz);
}

.zitat {
  /* Anton-Versalien haben keine Unterlängen. Der Balken endet knapp
     unter der Grundlinie statt am Fuß der Zeilenbox. */
  --zensur-oben: -0.14em;
  --zensur-seite: -0.18em;
  --zensur-unten: 0.06em;
  --balken-hoehe: 1.2em;
  --balken-versatz: -0.1em;

  margin: 0;
  font-family: var(--schrift-titel);
  font-size: var(--titel-3);
  line-height: 1.12;
  text-transform: uppercase;
  letter-spacing: 0.012em;
  text-wrap: balance;
  max-width: 24ch;
}

/* --- Fließtext und Weiterführung ---------------------------------------- */

.fliesstext { margin-top: var(--luft-4); }

.weiter {
  margin-top: var(--luft-4);
  font-size: var(--satz-s);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.19em;
}

.weiter a {
  text-decoration: none;
  color: var(--messing-hell);

  /* 24 px Trefferfläche (WCAG 2.2). Der Verweis steht allein in seiner
     Zeile, ist also kein Ziel im Fließtext und nicht ausgenommen. */
  padding-block: 0.2rem;
}

.weiter a::after {
  content: " \203A";
  padding-left: 0.2em;
}

.weiter a:hover { text-decoration: underline; }

/* --- Fragen ------------------------------------------------------------- */

.fragen {
  margin-top: var(--luft-5);
  max-width: 62ch;
}

/* Fragen sind Sätze, keine Schlagzeilen.
   Anton ist schmal laufend — als Versalien über einen ganzen Fragesatz
   verschmelzen die Buchstaben zu einer weißen Linie. Deshalb hier Inter
   in Halbfett und gemischter Schreibung. Anton bleibt, wo es hingehört:
   auf den echten Überschriften darüber. */
.fragen dt {
  font-family: var(--schrift-text);
  font-size: var(--satz-l);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--knochenweiss);
}

.fragen dd {
  margin: var(--luft-2) 0 0;
  color: var(--gedimmt);
}

.fragen dd + dt { margin-top: var(--luft-5); }

/* --- Vergangene Termine ------------------------------------------------
   Bleiben dauerhaft erreichbar (SPEC 2), treten aber zurück: kein Preis,
   kein Knopf, keine Karte. Eine Zeile, ein Weg hin.
   ----------------------------------------------------------------------- */

.gewesen {
  list-style: none;
  padding: 0;
  margin-top: var(--luft-5);
  max-width: 42rem;
}

.gewesen li {
  border-top: 1px solid var(--linie-zart);
}

.gewesen li:last-child {
  border-bottom: 1px solid var(--linie-zart);
}

.gewesen a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--luft-4);
  padding-block: var(--luft-3);
  text-decoration: none;
  color: var(--gedimmt);
  transition: color var(--tempo) var(--kurve);
}

.gewesen a:hover {
  color: var(--messing-hell);
}

.gewesen__datum {
  font-family: var(--schrift-titel);
  font-size: var(--titel-4);
  text-transform: uppercase;
  line-height: 1.1;
}

.gewesen a::after {
  content: "\203A";
  flex: none;
  color: var(--messing);
}

/* --- Bild mit Unterschrift ---------------------------------------------
   Auch die Karte. Sie liegt als Bild auf der eigenen Domain — keine
   Einbettung, kein externer Aufruf.
   ----------------------------------------------------------------------- */

.bildkasten {
  margin: var(--luft-5) 0 0;
  max-width: 42rem;
}

/* picture ist von Haus aus inline — ohne das hier nimmt es seine Breite
   vom Inhalt und width:100% am Bild greift ins Leere. */
.bildkasten picture {
  display: block;
}

.bildkasten img {
  width: 100%;
  height: auto;
  border: 1px solid var(--linie);
  border-radius: 3px;
  background: var(--feldschwarz);
}

.bildkasten figcaption {
  margin-top: var(--luft-3);
  font-size: var(--satz-s);
  color: var(--gedimmt);
  line-height: 1.5;
}

/* Ein Verweis muss sich vom Text daneben unterscheiden. Gleiche Farbe
   plus eine Unterstreichung in 1,5:1 war beides nicht. */
.bildkasten figcaption a {
  color: var(--messing-hell);
  text-decoration-color: currentColor;
  text-underline-offset: 0.2em;
}

.bildkasten figcaption a:hover {
  color: var(--messing-hell);
}

/* --- Rechtstext --------------------------------------------------------
   Lange Fließtexte. Enge Zeilenlänge, klare Abstufung, keine Zierde.
   ----------------------------------------------------------------------- */

.rechtstext {
  max-width: 62ch;
}

.rechtstext h2 {
  font-size: var(--titel-3);
  margin-top: var(--luft-7);
}

.rechtstext h3 {
  font-size: var(--titel-4);
  margin-top: var(--luft-5);
}

.rechtstext h2:first-child,
.rechtstext h3:first-child {
  margin-top: 0;
}

.rechtstext p,
.rechtstext ul,
.rechtstext ol {
  margin-top: var(--luft-4);
}

.rechtstext ul,
.rechtstext ol {
  padding-left: 1.3em;
}

.rechtstext li + li {
  margin-top: var(--luft-2);
}

/* --- Aufklapper --------------------------------------------------------
   details/summary, kein JavaScript. Die Antwort steht im ausgelieferten
   HTML — Suchmaschinen und Antwortmaschinen lesen sie auch zugeklappt.
   ----------------------------------------------------------------------- */

.aufklapper {
  border-top: 1px solid var(--linie-zart);
}

.aufklapper:last-of-type {
  border-bottom: 1px solid var(--linie-zart);
}

.aufklapper__frage {
  display: flex;
  align-items: baseline;
  gap: var(--luft-3);
  padding-block: var(--luft-4);
  cursor: pointer;
  list-style: none;
  /* Dieselbe Regel wie bei .fragen dt: lesbarer Fragesatz schlägt
     Display-Schrift. */
  font-family: var(--schrift-text);
  font-size: var(--satz-l);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--knochenweiss);
  transition: color var(--tempo) var(--kurve);
}

.aufklapper__frage::-webkit-details-marker { display: none; }

.aufklapper__frage:hover { color: var(--messing-hell); }

/* Das Zeichen dreht sich, nicht der Text.
   Erzeugte Inhalte zählen zum vorgelesenen Namen — ohne die leere
   alt-Angabe hört ein Vorleseprogramm „Muss ich durch das Laufhaus?
   plus". Die Schreibweise content: "+" / "" trennt Zeichen und Name. */
.aufklapper__frage::after {
  content: "+" / "";
  margin-left: auto;
  flex: none;
  font-family: var(--schrift-text);
  font-weight: 400;
  font-size: 1.4em;
  line-height: 0.8;
  color: var(--messing);
  transition: transform var(--tempo) var(--kurve);
}

.aufklapper[open] > .aufklapper__frage::after {
  transform: rotate(45deg);
}

.aufklapper__antwort {
  padding-bottom: var(--luft-4);
  color: var(--gedimmt);
  max-width: 62ch;
}

/* --- Kasten mit Messingkante -------------------------------------------
   Für einen Satz, der stehen bleiben soll. Kein Störer, kein Rot.
   ----------------------------------------------------------------------- */

.merksatz {
  border-left: 2px solid var(--messing);
  padding: var(--luft-3) 0 var(--luft-3) var(--luft-4);
  font-size: var(--satz-l);
  max-width: 52ch;
}

/* --- Verteiler ---------------------------------------------------------
   Steht immer unter dem Kaufbereich. Der Knopf ist bewusst nicht rot:
   Rot gehört dem Ticket, nicht der Anmeldung.
   ----------------------------------------------------------------------- */

.verteiler {
  border-top: 1px solid var(--linie-zart);
  background: var(--feldschwarz);
}

/* Als Baustein: keine eigene Bahn, dafür der abgesetzte Rahmen, damit
   es sich trotzdem vom Fließtext abhebt. */
.verteiler--baustein {
  border: 1px solid var(--linie-zart);
  border-radius: 3px;
  padding: var(--luft-5);
}

.verteiler__form {
  margin-top: var(--luft-5);
  max-width: 42rem;
}

.verteiler__zeile {
  display: flex;
  flex-wrap: wrap;
  gap: var(--luft-3);
}

.verteiler__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.verteiler__feld {
  flex: 1 1 16rem;
  min-width: 0;
  background: var(--tiefschwarz);
  /* Nicht --linie: das sind 28 % Messing und ergibt 1,4:1 gegen die
     Grundfläche. WCAG 1.4.11 verlangt 3:1 für die Grenze eines
     Bedienelements — sonst sieht man nicht, wo das Feld anfängt.
     Volles Messing bringt 6,3:1. */
  border: 1px solid var(--messing);
  border-radius: 2px;
  color: var(--knochenweiss);
  font-size: var(--satz-m);
  padding: 0.95em 1.1em;
  transition: border-color var(--tempo) var(--kurve);
}

.verteiler__feld::placeholder {
  color: var(--gedimmt);
  opacity: 1;
}

.verteiler__feld:focus {
  border-color: var(--messing-hell);
}

.verteiler__einwilligung {
  display: flex;
  align-items: flex-start;
  gap: var(--luft-3);
  margin-top: var(--luft-4);
  font-size: var(--satz-s);
  color: var(--gedimmt);
  max-width: 54ch;
  cursor: pointer;
}

.verteiler__einwilligung input {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.18em;
  accent-color: var(--messing);
}

.verteiler__meldung {
  margin-top: var(--luft-4);
  padding: var(--luft-3) var(--luft-4);
  border-left: 2px solid var(--neonblau);
  background: rgb(31 224 255 / 0.06);
  font-size: var(--satz-s);
  max-width: 54ch;
}

/* Der Honigtopf muss für Menschen unerreichbar sein, aber im HTML stehen. */
.verteiler__topf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Baukasten „Freie Seite" -------------------------------------------
   Der Abstand zwischen den Bausteinen wird hier einmal geregelt, nicht
   in jedem Baustein. Kein Baustein bringt eigenes Layout mit — sie
   benutzen alle die Komponenten aus Etappe 1.
   ----------------------------------------------------------------------- */

.bausteine > .baustein + .baustein {
  margin-top: var(--luft-5);
}

/* Eine Überschrift braucht mehr Luft davor als danach. */
.bausteine > .baustein + .baustein--ueberschrift {
  margin-top: var(--luft-7);
}

.bausteine > .baustein--ueberschrift + .baustein {
  margin-top: var(--luft-4);
}

/* Bänder trennen — davor und danach mehr Raum. */
.bausteine > .baustein + .baustein--band,
.bausteine > .baustein--band + .baustein {
  margin-top: var(--luft-7);
}

/* Materialflächen und Zitatflächen laufen über die Bahn hinaus. */
.baustein--band.materialband,
.baustein--zitatflaeche {
  margin-inline: calc(var(--bahn-rand) * -1);
}

.baustein--zitatflaeche {
  padding: var(--luft-6) var(--bahn-rand);
  background: var(--feldschwarz);
  border-block: 1px solid var(--linie-zart);
}

.bildkasten--weit {
  max-width: none;
}

/* --- Personenkarte -----------------------------------------------------
   Für Team und Pressekontakt. Nie für Acts — Shows werden nicht mit
   Gesicht oder Namen beworben (CLAUDE.md 5).
   ----------------------------------------------------------------------- */

.person__bild {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--linie);
}

.person__name {
  font-size: var(--titel-4);
  line-height: 1.05;
}

.person p {
  max-width: none;
}

/* --- Raster für zwei gleichrangige Karten ------------------------------- */

.raster-2 {
  display: grid;
  gap: var(--luft-4);
  grid-template-columns: 1fr;
}

@media (min-width: 46rem) {
  .raster-2 { grid-template-columns: 1fr 1fr; }
}

/* --- Einwilligung ------------------------------------------------------
 *
 * Leiste am unteren Rand, kein Fenster vor der Seite. Ebene 1 der
 * Messung braucht keine Zustimmung, also gibt es keinen Grund, jemandem
 * den Weg zum Kaufknopf zu verstellen (SPEC 7).
 */

/* Platz, den die Leiste unten belegt. Wird von einwilligung.js gesetzt,
   solange sie offen ist, damit der Inhalt darunter freiläuft und der
   Kaufknopf erreichbar bleibt. */
body {
  padding-bottom: var(--einwilligung-platz, 0px);
}

.einwilligung {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 60;
  background: var(--feldschwarz);
  border-top: 1px solid var(--messing);
  box-shadow: 0 -18px 40px rgb(0 0 0 / 0.55);
  animation: einwilligung-herein var(--tempo) var(--kurve);
}

/* Muss nach der Grundregel stehen, sonst gewinnt `display` gegen
   `hidden` und die Leiste steht auch dann da, wenn sie zu ist. */
.einwilligung[hidden] {
  display: none;
}

@keyframes einwilligung-herein {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.einwilligung__innen {
  max-width: var(--bahn-breite);
  margin-inline: auto;
  padding: var(--luft-4) var(--bahn-rand);
}

.einwilligung__titel {
  font-family: var(--schrift-titel);
  font-size: var(--titel-4);
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: 0.02em;
  color: var(--knochenweiss);
  margin: 0 0 var(--luft-2);
}

.einwilligung__text {
  font-size: var(--satz-s);
  color: var(--gedimmt);
  max-width: 58ch;
  margin: 0;
}

.einwilligung__wahl {
  display: grid;
  gap: var(--luft-2);
  margin-top: var(--luft-3);
  padding-top: var(--luft-3);
  border-top: 1px solid var(--linie-zart);
}

/* Muss hinter der Grundregel stehen: `display` schlägt sonst `hidden`,
   und der Aufklappteil steht offen da, obwohl er zu sein soll. */
.einwilligung__wahl[hidden] {
  display: none;
}

.einwilligung__zeile {
  display: flex;
  align-items: flex-start;
  gap: var(--luft-2);
  font-size: var(--satz-s);
  color: var(--knochenweiss);
  cursor: pointer;
}

.einwilligung__zeile input {
  margin-top: 0.15em;
  accent-color: var(--messing);
  flex: none;
}

.einwilligung__zeile input:disabled + span {
  color: var(--gedimmt);
  cursor: default;
}

.einwilligung__speichern {
  justify-self: start;
  margin-top: var(--luft-2);
}

/* Beide Knöpfe exakt gleich breit und gleich gefärbt. Eine
   hervorgehobene Zustimmung neben einer blassen Ablehnung wäre keine
   freie Wahl. `flex: 1 1 0` statt einer Mindestbreite, damit sie auch
   auf 375 px nebeneinander bleiben statt untereinander zu rutschen —
   sonst stünde der untere allein und wäre der auffälligste. */
.einwilligung__knoepfe {
  display: flex;
  gap: var(--luft-2);
  margin-top: var(--luft-4);
}

.einwilligung__knoepfe .knopf {
  flex: 1 1 0;
  min-width: 0;
  padding: 0.85em 0.6em;
}

/* Auf breiten Fenstern nicht über die ganze Bahn ziehen — zwei
   halbmeterbreite Knöpfe sehen nach Fehler aus. */
@media (min-width: 46rem) {
  .einwilligung__knoepfe { max-width: 28rem; }
}

.einwilligung__mehr {
  margin: var(--luft-3) 0 0;
  font-size: var(--satz-xs);
}

.einwilligung__mehr[hidden] {
  display: none;
}

.einwilligung__verweis {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--gedimmt);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.einwilligung__verweis:hover {
  color: var(--messing-hell);
}

.fuss__widerruf {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--gedimmt);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.fuss__widerruf:hover {
  color: var(--messing-hell);
}

.fuss__widerruf[hidden] {
  display: none;
}