/* ============================================================
   Bausteine — Kopf, Laufband, Bühne, Flyerraster, Formulare, Fuß

   Alle Eventbilder aus Clubinio sind 16:9. Bühne, Raster und
   Detailseite zeigen genau dieses Format — nichts wird auf
   Quadrat oder Hochkant beschnitten.
   ============================================================ */

/* ---------- Kopfzeile ----------

   Über dem Bild steht sie ohne eigene Fläche, damit das Motiv
   ungestört anfängt. Sobald man scrollt, wird sie deckend, rückt
   zusammen und nimmt den nächsten Termin mit. */

.kopf {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  /* Mindesthöhe statt fester Höhe: Wenn ein Browser die Zeile
     anders rechnet als gedacht, schiebt der Inhalt sie auf, statt
     oben herauszuragen. Dazu Innenabstand oben und unten, damit
     der Schriftzug nie an der Kante klebt.

     env() fängt die Notch ab und ist auf allen anderen Geräten 0. */
  min-height: calc(var(--kopf-hoehe) + env(safe-area-inset-top, 0px));
  padding-top: calc(0.6rem + env(safe-area-inset-top, 0px));
  padding-bottom: 0.6rem;
  display: flex;
  align-items: center;
  background: linear-gradient(to bottom, rgb(8 5 3 / 0.5), rgb(8 5 3 / 0) 85%);
  transition: min-height 0.25s ease, background-color 0.25s ease;
}

/* Seiten ohne Bild im Kopf: Dort steht die Zeile von Anfang an
   deckend. Über hellem Grund wäre weiße Schrift sonst unlesbar. */
.ohne-bildkopf .kopf {
  background: rgb(10 9 8 / 0.97);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linie);
}

.kopf--fest,
.kopf--menue-offen {
  min-height: calc(4.75rem + env(safe-area-inset-top, 0px));
  background: rgb(10 9 8 / 0.97);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linie);
}

.kopf__inhalt {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.25rem);
  width: min(100% - 2 * var(--rand), var(--breite));
  margin-inline: auto;
}

.marke {
  display: flex;
  align-items: center;
  margin-right: auto;
  line-height: 0;
}

/* Das Bild bestimmt die Zeilenhöhe mit — deshalb keine
   Prozentangaben, die von ihr abhängen. */
.marke img {
  display: block;
  width: auto;
  height: 4.6rem;
  transition: height 0.25s ease;
}

.kopf--fest .marke img {
  height: 3rem;
}

@media (max-width: 34rem) {
  .marke img {
    height: 3.2rem;
  }

  .kopf--fest .marke img {
    height: 2.6rem;
  }
}

/* Was als Nächstes läuft — erscheint erst, wenn die Kopfzeile
   deckend ist, sonst stünde es doppelt neben dem Aufmacher. */
.kopf__termin {
  display: none;
  align-items: baseline;
  gap: 0.7rem;
  margin-right: auto;
  padding: 0.35rem 0.85rem;
  border-left: 3px solid var(--akzent);
  font-size: 0.9375rem;
  text-decoration: none;
  color: var(--text-leise);
  min-width: 0;
}

.kopf__termin b {
  font-family: var(--schrift-display);
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--akzent-hell);
  white-space: nowrap;
}

.kopf__termin span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kopf__termin:hover {
  color: var(--weiss);
}

@media (min-width: 68rem) {
  .kopf--fest .kopf__termin:not([hidden]) {
    display: flex;
  }
}

/* ---------- Menü ---------- */

.menue {
  display: flex;
  align-items: center;
  gap: clamp(1.15rem, 2.2vw, 2rem);
}

.menue svg {
  display: none;
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
  fill: none;
  stroke: var(--akzent-hell);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.menue a:not(.knopf) {
  position: relative;
  font-family: var(--schrift-display);
  font-weight: 900;
  font-size: clamp(0.875rem, 0.85rem + 0.15vw, 0.9688rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--weiss);
  padding-block: 0.4rem;
  transition: color 0.15s ease;
}

/* Der Strich läuft von links auf, statt einfach da zu sein */
.menue a:not(.knopf)::after {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--akzent-hell);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
  content: '';
}

.menue a:not(.knopf):hover::after,
.menue a:not(.knopf):focus-visible::after,
.menue a[aria-current='page']::after {
  transform: scaleX(1);
}

.menue a[aria-current='page'] {
  color: var(--akzent-hell);
}

.menue .knopf {
  color: #fff;
}

.menue-schalter {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--weiss);
  cursor: pointer;
}

.menue-schalter span,
.menue-schalter span::before,
.menue-schalter span::after {
  display: block;
  width: 1.6rem;
  height: 3px;
  background: currentColor;
  margin-inline: auto;
  transition: transform 0.2s ease;
  content: '';
}

.menue-schalter span::before {
  transform: translateY(-9px);
}

.menue-schalter span::after {
  transform: translateY(6px);
}

.menue-schalter[aria-expanded='true'] span {
  background: transparent;
}

.menue-schalter[aria-expanded='true'] span::before {
  transform: rotate(45deg);
}

.menue-schalter[aria-expanded='true'] span::after {
  transform: rotate(-45deg) translateY(3px);
}

@media (max-width: 55.99rem) {
  .menue-schalter {
    display: block;
  }

  .menue {
    position: fixed;
    inset: calc(var(--kopf-hoehe) + env(safe-area-inset-top, 0px)) 0 auto;
    display: grid;
    gap: 0;
    padding: 2rem var(--rand) 2.5rem;
    background: rgb(10 9 8 / 0.98);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--linie);
    /* Geschlossen wird das Menü nach oben geschoben. Weil es höher
       ist als die Kopfzeile, ragte seine Unterkante dabei wieder ins
       Bild und legte sich über das Logo — es sah aus, als wäre der
       Schriftzug oben abgeschnitten. visibility schaltet es wirklich
       ab; die Verzögerung lässt die Bewegung vorher auslaufen. */
    transform: translateY(-120%);
    visibility: hidden;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0s linear 0.28s;
  }

  .kopf--fest .menue,
  .kopf--menue-offen .menue {
    inset-block-start: calc(4.75rem + env(safe-area-inset-top, 0px));
  }

  .menue[data-offen='true'] {
    transform: none;
    visibility: visible;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0s;
  }

  .menue svg {
    display: block;
  }

  .menue a:not(.knopf) {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    font-size: 1.35rem;
    letter-spacing: 0.04em;
    line-height: 1.2;
    padding-block: 0.95rem;
    border-bottom: 1px solid var(--linie);
  }

  .menue a:not(.knopf):last-of-type {
    border-bottom: 0;
  }

  .menue a[aria-current='page'] svg {
    stroke: var(--akzent-hell);
  }

  .menue a:not(.knopf)::after {
    display: none;
  }

  .menue {
    padding-block: 0.5rem 1.5rem;
  }
}

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

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 1.6rem;
  border: 2px solid transparent;
  font-family: var(--schrift-display);
  font-weight: 800;
  font-stretch: 100%;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.knopf--stark {
  background: var(--akzent);
  color: #fff;
}

.knopf--stark:hover,
.knopf--stark:focus-visible {
  background: var(--akzent-tief);
  color: #fff;
}

.knopf--leise {
  border-color: #ffffff44;
  color: var(--weiss);
}

.knopf--leise:hover,
.knopf--leise:focus-visible {
  border-color: var(--weiss);
  background: #ffffff14;
}

.kalkflaeche .knopf--leise {
  border-color: var(--kalk-linie);
  color: var(--tinte);
}

.kalkflaeche .knopf--leise:hover,
.kalkflaeche .knopf--leise:focus-visible {
  border-color: var(--tinte);
  background: #1b130914;
}

.knopf--klein {
  padding: 0.55rem 1.1rem;
  font-size: 0.875rem;
  background: var(--akzent);
  border-color: var(--akzent);
  color: #fff;
}

.knopf--klein:hover,
.knopf--klein:focus-visible {
  background: var(--tinte);
  border-color: var(--tinte);
  color: #fff;
}

button.knopf:disabled {
  opacity: 0.5;
  cursor: progress;
}

/* ---------- Laufband ----------

   Sagt in einem Durchlauf, wann offen ist und wo das Haus steht.
   Hält an, sobald jemand Bewegung abbestellt hat. */

.laufband {
  overflow: hidden;
  padding-block: 0.9rem;
  background: var(--akzent);
  color: #fff;
  border-block: 0;
}

.laufband__spur {
  display: flex;
  width: max-content;
  animation: laufen 42s linear infinite;
}

.laufband span {
  padding-inline: 1.1rem;
  font-family: var(--schrift-display);
  font-weight: 900;
  font-stretch: 100%;
  font-size: clamp(0.95rem, 0.85rem + 0.35vw, 1.15rem);
  text-transform: uppercase;
  white-space: nowrap;
}

@keyframes laufen {
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .laufband__spur {
    animation: none;
  }
}

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

   Vier Bilder aus dem Haus liegen übereinander und blenden
   ineinander — je sechs Sekunden, ohne Knöpfe und ohne Punkte
   darunter: Das ist kein Karussell zum Bedienen, sondern Hintergrund.

   Umgesetzt mit einer Animation statt mit Skript. Jedes Bild läuft
   dieselbe Blende, nur zeitversetzt gestartet. Die Versätze sind
   negativ, damit beim Aufruf sofort das erste Bild steht und die
   anderen unsichtbar warten, statt dass es kurz aufblitzt. */

.hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 34rem;
  padding: calc(var(--kopf-hoehe) + env(safe-area-inset-top, 0px) + clamp(3rem, 7vw, 5.5rem)) var(--rand) clamp(3rem, 7vw, 5rem);
  overflow: hidden;
  text-align: center;
}

@media (min-width: 56rem) {
  .hero {
    min-height: min(46rem, 84svh);
  }
}

.hero__bilder {
  position: absolute;
  inset: 0;
}

.hero__bilder img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: blenden 24s linear infinite;
}

.hero__bilder img:nth-child(1) { animation-delay: 0s; }
.hero__bilder img:nth-child(2) { animation-delay: -18s; }
.hero__bilder img:nth-child(3) { animation-delay: -12s; }
.hero__bilder img:nth-child(4) { animation-delay: -6s; }

@keyframes blenden {
  0%, 21% { opacity: 1; }
  27%, 94% { opacity: 0; }
  100% { opacity: 1; }
}

/* Wer Bewegung abbestellt hat, sieht ein Bild — und zwar dauerhaft. */
@media (prefers-reduced-motion: reduce) {
  .hero__bilder img {
    animation: none;
  }

  .hero__bilder img:nth-child(1) {
    opacity: 1;
  }
}

.hero__bilder::after {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(72% 62% at 50% 55%, rgb(16 14 13 / 0.55), rgb(16 14 13 / 0.74)),
    linear-gradient(to bottom, rgb(16 14 13 / 0.2), transparent 22%, var(--holz-tief));
  content: '';
}

.hero__inhalt {
  position: relative;
}

.hero__logo {
  line-height: 0;
  margin-bottom: clamp(1.1rem, 2.2vw, 1.75rem);
}

.hero__logo img {
  width: min(11rem, 38vw);
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(0 0.25rem 1.25rem rgb(12 8 4 / 0.9));
}

.hero__oben {
  margin-bottom: 1.1rem;
  font-family: var(--schrift-display);
  font-weight: 800;
  font-size: clamp(0.8125rem, 0.78rem + 0.2vw, 0.9375rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--akzent-hell);
}

.hero h1 {
  text-shadow: 0 0.08em 1.5rem rgb(12 8 4 / 0.85);
}

/* Derselbe grüne Strich wie auf den Unterseiten */
.hero h1::after {
  display: block;
  width: 4rem;
  height: 3px;
  margin: clamp(1rem, 1.8vw, 1.4rem) auto clamp(0.9rem, 1.6vw, 1.2rem);
  background: var(--akzent);
  content: '';
}

.hero__text {
  max-width: 34rem;
  margin-inline: auto;
  font-size: clamp(0.9688rem, 0.94rem + 0.25vw, 1.0938rem);
  color: var(--text-leise);
  text-shadow: 0 0.1em 0.9rem rgb(12 8 4 / 0.85);
}

/* ---------- Aushänge an der Wand ----------

   Kein Kasten um den Flyer: Der Flyer ist der Aushang. Er hängt
   leicht schief an der Bretterwand, wirft Schatten und richtet sich
   auf, wenn man ihn anfasst. Das Datum klebt als Aufkleber über der
   unteren Kante, der Name steht darunter auf dem Holz.

   Die Schieflage wechselt über nth-child, damit keine zwei
   Nachbarn gleich hängen. Wer Bewegung abbestellt hat, bekommt
   alles gerade und ohne Übergang. */

.raster {
  display: grid;
  gap: clamp(2.25rem, 4vw, 3.25rem) clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
  /* Bild, Name und Fußzeile jeder Karte liegen auf einer Linie,
     auch wenn ein Name zweizeilig ist und der andere einzeilig. */
  grid-template-rows: auto;
  grid-auto-rows: auto;
}

.aushang {
  grid-row: span 3;
  grid-template-rows: subgrid;
}

.aushang {
  position: relative;
  display: grid;
  gap: 0.9rem;
  align-content: start;
}

.aushang__titel {
  align-self: start;
}

.aushang__blatt {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--holz-hoch);
  box-shadow:
    0 1.25rem 2.5rem rgb(0 0 0 / 0.6),
    0 0.15rem 0.35rem rgb(0 0 0 / 0.45);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.28s ease;
}

.aushang:nth-child(3n + 1) .aushang__blatt {
  transform: rotate(-1.7deg);
}

.aushang:nth-child(3n + 2) .aushang__blatt {
  transform: rotate(1.3deg);
}

.aushang:nth-child(3n) .aushang__blatt {
  transform: rotate(-0.6deg);
}

.aushang:hover .aushang__blatt,
.aushang:focus-within .aushang__blatt {
  transform: rotate(0deg) translateY(-6px) scale(1.015);
  box-shadow:
    0 2rem 3.5rem rgb(0 0 0 / 0.7),
    0 0 0 1px var(--akzent);
}

.aushang__blatt img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Der Aufkleber sitzt auf der Kante, halb auf dem Bild, halb davor */
.aushang__datum {
  position: absolute;
  left: -0.4rem;
  bottom: -0.75rem;
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  background: var(--akzent);
  color: #fff;
  font-family: var(--schrift-display);
  font-weight: 900;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  box-shadow: 0 0.4rem 0.9rem rgb(0 0 0 / 0.45);
}

.aushang__datum b {
  font-weight: 900;
}

.aushang__titel {
  margin-top: 0.35rem;
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
  transition: color 0.15s ease;
}

.aushang__titel a {
  text-decoration: none;
}

/* Die ganze Kachel ist anklickbar; der Ticketknopf liegt darüber. */
.aushang__titel a::after {
  position: absolute;
  inset: 0;
  content: '';
}

.aushang:hover .aushang__titel,
.aushang:focus-within .aushang__titel {
  color: var(--akzent-hell);
}

.aushang__fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-top: -0.2rem;
}

.aushang__zeit {
  margin-right: auto;
  font-size: 0.9375rem;
  color: var(--text-leise);
}

.aushang__kasse {
  font-family: var(--schrift-display);
  font-weight: 800;
  font-size: 0.9375rem;
  text-transform: uppercase;
  color: var(--text-still);
}

.aushang .knopf {
  position: relative;
  z-index: 2;
}

/* Am Handy zeigt der Auszug auf der Startseite zwei Termine, alles
   Weitere führt über den Knopf auf die Eventseite — sonst scrollt
   man sich durch sechs Plakate, bevor die Seite weitergeht.

   Nur der Auszug: Auf /events/ steht dasselbe Raster, dort sollen
   alle Termine stehen. Die Begrenzung hing anfangs an .raster und
   hat deshalb auch die Eventseite nach zwei Terminen abgeschnitten —
   ohne einen Knopf, der weiterführt. */
.raster__weiter {
  display: none;
  margin-top: 2rem;
}

@media (max-width: 47.99rem) {
  .raster--auszug .aushang:nth-child(n + 3) {
    display: none;
  }

  .raster--auszug ~ .raster__weiter {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aushang__blatt,
  .aushang:nth-child(3n + 1) .aushang__blatt,
  .aushang:nth-child(3n + 2) .aushang__blatt,
  .aushang:nth-child(3n) .aushang__blatt {
    transform: none;
  }
}

/* ---------- Ein einzelner Termin ---------- */

.termin__bild {
  position: relative;
  margin-bottom: clamp(1.75rem, 4vw, 3rem);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--linie);
}

.termin__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.termin__spalten {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

@media (min-width: 56rem) {
  .termin__spalten {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  }
}

.termin__datum {
  margin-bottom: 0.7rem;
  font-family: var(--schrift-display);
  font-weight: 900;
  font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.1rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--akzent-hell);
}

.termin__titel {
  margin-bottom: 1.5rem;
}

.termin__beschreibung {
  max-width: 42rem;
  color: var(--text-leise);
  white-space: pre-line; /* Clubinio liefert Text mit Umbrüchen, kein HTML */
}

.fakten {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.45rem 1.5rem;
  margin-bottom: 2rem;
  font-size: 0.9375rem;
}

.fakten dt {
  font-family: var(--schrift-display);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--akzent);
}

.fakten dd {
  color: var(--text-leise);
}

.kleingedruckt {
  margin-top: 1.25rem;
  max-width: 34rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-still);
}

.ki-hinweis {
  margin-top: 1.5rem;
  font-size: 0.8125rem;
  color: var(--text-still);
}

/* ---------- Leere Zustände ---------- */

.leerlauf {
  padding: 2.5rem 0;
  font-size: 1.125rem;
  color: var(--text-leise);
}

.kalkflaeche .leerlauf {
  color: #4a3a27;
}

.leerlauf--gross {
  display: grid;
  justify-items: start;
  gap: 1.75rem;
  padding: clamp(3rem, 8vw, 6rem) 0;
}

.laedt {
  min-height: 8rem;
}

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

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

.frage {
  border-bottom: 1px solid var(--linie);
}

.frage summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.35rem;
  font-family: var(--schrift-display);
  font-weight: 800;
  font-stretch: 100%;
  font-size: clamp(1.0625rem, 0.98rem + 0.45vw, 1.3rem);
  text-transform: uppercase;
  color: var(--weiss);
  cursor: pointer;
  list-style: none;
}

.frage summary::-webkit-details-marker {
  display: none;
}

.frage summary::after {
  flex: none;
  color: var(--akzent-hell);
  font-size: 1.75rem;
  line-height: 1;
  content: '+';
}

.frage[open] summary::after {
  content: '–';
}

.frage p {
  max-width: 40rem;
  padding-bottom: 1.5rem;
  color: var(--text-leise);
  white-space: pre-line;
}

/* ---------- Formulare ----------

   Eingabefelder sind eine Spur heller als die Wand dahinter und
   bekommen beim Hineinklicken einen grünen Rand — so sieht man
   auch im Dunkeln, wo man gerade schreibt. */

.formular {
  display: grid;
  gap: 1.25rem;
  max-width: 40rem;
}

.feld {
  display: grid;
  gap: 0.45rem;
}

.feld > label,
.feld > .feld__name {
  font-family: var(--schrift-display);
  font-weight: 800;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-leise);
}

.feld input,
.feld select,
.feld textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  background: rgb(255 255 255 / 0.04);
  border: 1px solid var(--linie);
  color: var(--weiss);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.feld input:hover,
.feld select:hover,
.feld textarea:hover {
  border-color: var(--linie-hell);
}

.feld input:focus,
.feld select:focus,
.feld textarea:focus {
  background: rgb(255 255 255 / 0.06);
  border-color: var(--akzent-hell);
  outline-offset: 1px;
}

.feld textarea {
  min-height: 9.5rem;
  resize: vertical;
}

.feld input[type='file'] {
  padding: 0.65rem;
}

.feld input[type='file']::file-selector-button {
  margin-right: 0.9rem;
  padding: 0.5rem 1rem;
  border: 0;
  background: var(--akzent);
  color: #fff;
  font-family: var(--schrift-display);
  font-weight: 800;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.feld small {
  font-size: 0.8125rem;
  color: var(--text-still);
}

.doppelt {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 34rem) {
  .doppelt {
    grid-template-columns: 1fr 1fr;
  }
}

.kaestchen {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-leise);
  cursor: pointer;
}

.kaestchen a {
  color: var(--weiss);
}

.kaestchen input {
  width: 1.2rem;
  height: 1.2rem;
  margin: 0.15rem 0 0;
  accent-color: var(--akzent);
}

.auswahl {
  display: grid;
  gap: 0.6rem;
  padding: 1rem;
  background: rgb(255 255 255 / 0.04);
  border: 1px solid var(--linie);
}

.formular .knopf {
  justify-self: start;
  margin-top: 0.5rem;
}

.meldung {
  padding: 1rem 1.2rem;
  border-left: 4px solid var(--linie-hell);
  background: rgb(255 255 255 / 0.05);
  font-size: 0.9375rem;
  color: var(--text);
}

.meldung--gut {
  border-left-color: var(--akzent-hell);
}

.meldung--schlecht {
  border-left-color: var(--magenta);
}

/* ---------- Fußzeile ---------- */

.fuss {
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  border-top: 1px solid var(--linie);
}

.fuss__raster {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 48rem) {
  .fuss__raster {
    grid-template-columns: 1fr 1.2fr 0.8fr;
  }
}

.fuss h2 {
  font-size: 0.9375rem;
  letter-spacing: 0.1em;
  color: var(--akzent);
  margin-bottom: 1rem;
}

.fuss p,
.fuss li {
  color: var(--text-leise);
  font-size: 0.9375rem;
  line-height: 1.7;
}

.fuss p {
  margin-bottom: 0.9rem;
}

.fuss p:last-child {
  margin-bottom: 0;
}

.fuss ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.fuss li a {
  font-family: var(--schrift-display);
  font-weight: 800;
  font-stretch: 100%;
  font-size: 1.05rem;
  text-transform: uppercase;
  color: var(--weiss);
  text-decoration: none;
}

.fuss li a:hover {
  color: var(--akzent);
}

.fuss__unten {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--linie);
  font-size: 0.875rem;
  color: var(--text-still);
}

.fuss__unten nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-left: auto;
}

.fuss__unten a {
  color: var(--text-leise);
  text-decoration: none;
}

.fuss__unten a:hover {
  color: var(--weiss);
}

/* ---------- Offenes Formular ----------

   Keine Kästen: Jedes Feld ist eine Zeile mit einem Strich darunter,
   wie auf einem Anmeldebogen. Beim Hineinschreiben wird der Strich
   grün und dicker — deutlicher als ein Rahmen, der immer da ist.

   Der Platzhaltertext sagt, was gemeint ist; das Etikett darüber
   bleibt trotzdem stehen, damit auch beim Ausfüllen klar ist, in
   welchem Feld man gerade steht. */

.formular--offen {
  max-width: none;
  gap: clamp(1.5rem, 3vw, 2.25rem);
}

.formular--offen .feld > label {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  color: var(--text-still);
}

.formular--offen .feld > label span {
  font-family: var(--schrift-text);
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-still);
}

.formular--offen .feld input,
.formular--offen .feld select,
.formular--offen .feld textarea {
  padding: 0.55rem 0 0.7rem;
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--linie);
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.25rem);
  transition: border-color 0.15s ease;
}

.formular--offen .feld input::placeholder,
.formular--offen .feld textarea::placeholder {
  color: var(--text-still);
}

.formular--offen .feld input:hover,
.formular--offen .feld select:hover,
.formular--offen .feld textarea:hover {
  border-bottom-color: var(--linie-hell);
}

.formular--offen .feld input:focus,
.formular--offen .feld select:focus,
.formular--offen .feld textarea:focus {
  background: transparent;
  /* Die Kurzform, damit sie die Grundregel sicher überschreibt */
  border-bottom: 2px solid var(--akzent-hell);
}

/* Ohne sichtbaren Rahmen braucht die Tastaturbedienung ein eigenes
   Zeichen — sonst sieht man beim Durchtabben nicht, wo man ist. */
.formular--offen .feld input:focus-visible,
.formular--offen .feld select:focus-visible,
.formular--offen .feld textarea:focus-visible {
  outline: 2px solid var(--akzent-hell);
  outline-offset: 4px;
}

.formular--offen .feld textarea {
  min-height: 7.5rem;
}

.formular--offen .feld input[type='file'] {
  padding-block: 0.35rem 0.6rem;
  font-size: 0.9375rem;
}

.formular--offen .auswahl {
  padding: 0.9rem 0 0;
  background: transparent;
  border: 0;
  border-top: 2px solid var(--linie);
}

/* Der Hinweis auf das Ticketsystem, wie ihn die anderen Häuser auch
   tragen. Das Logo liegt weiß auf durchsichtig vor und passt damit
   direkt auf den dunklen Grund — und es bringt „powered by" schon
   selbst mit, deshalb steht davor kein weiterer Text. */
.fuss__clubinio {
  display: inline-block;
  margin-top: 0.35rem;
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.15s ease;
}

.fuss__clubinio:hover,
.fuss__clubinio:focus-visible {
  opacity: 1;
}

.fuss__clubinio img {
  width: auto;
  height: 1.9rem;
}

/* Der Kaufknopf sitzt direkt unter dem Namen des Abends und läuft
   über die ganze Spalte — das ist die eine Sache, die man auf dieser
   Seite tun kann. Der Pfeil sitzt rechts außen, der Text bleibt
   links beim Inhalt darüber. */
.termin__kaufen {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
  padding-inline: clamp(1.1rem, 2.5vw, 1.6rem);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
}

.termin__kaufen span {
  font-size: 1.2em;
  line-height: 1;
}