/* Mike Müller · mike-mueller.ch · Gestaltung nach dem bestehenden Konzept von Samo Stahler */

/* Leichter Schnitt nur für den Namen im Kopf, wie «Univers Light» auf der bisherigen Website */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-latin-300-normal.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-latin-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Werte der Variante «ruhig»: Seline und Mike haben sich fuer diese Schrift
     und diese Ruhe entschieden, sie gilt jetzt fuer die ganze Website. */
  --bg: #f2f1ee;
  --box: #ffffff;
  /* Eine einzige Schriftfarbe fuer die ganze Website: dunkelgrau, wie Seline
     und Mike es wuenschen. Keine hellere Stufe fuer Daten, Untertitel oder
     Hinweise. Alle frueheren Abstufungen zeigen auf denselben Wert. */
  --ink: #3c4044;
  --muted: #3c4044;
  --line: #e7e4df;
  /* Keine Farbe mehr auf der Website. Was frueher blau war, ist jetzt
     dasselbe Dunkelgrau wie der Text, nur etwas zurueckgenommen. */
  --accent: #3c4044;
  --accent-hell: #3c4044;
  --font: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  /* Eine einzige Abstandsskala fuer die ganze Seite */
  --s1: 6px; --s2: 10px; --s3: 16px; --s4: 24px; --s5: 34px; --s6: 48px;
  --feld: #ffffff;      /* Eingabefelder weiss, wie die Flaechen ringsum */
  --feld-rand: #dcd8d2;
  --feld-rand-hover: #b6b1aa;
  --auf-ink: #ffffff;   /* Schrift auf dunklem Grund */
  --ink-stark: #3c4044;
  --ink-soft: #3c4044;
  --zart: #faf9f7;      /* ganz leichte Flaeche, z.B. aufgeklappte Info */
  --zart-text: #3c4044;
  /* Feine Linien fuer Knoepfe und Felder: sichtbar, aber nie schwarz */
  --rahmen: #c4bfb8;
  --rahmen-aktiv: #8f8a84;
  --titel-font: var(--font);
  --radius: 3px;
  --tempo: 140ms;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  /* Originalwerte der alten Seite: li,p { font-size:18px; line-height:24px } */
  font-size: 18px;
  line-height: 27px;
  color: var(--ink);
  background: var(--bg);
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
/* Im Original sind Textlinks dauerhaft unterstrichen (a { border-bottom:1px solid #000 }).
   Navigation, Buttons und Bildlinks heben das gezielt wieder auf. */
.body-text a, .lead a { text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.body-text a:hover, .lead a:hover { color: var(--ink); border-bottom-width: 2px; }
p { margin: 0 0 20px; }
p:last-child { margin-bottom: 0; }
h1, h2, h3 { font-family: var(--titel-font); font-weight: 400; line-height: 24px; margin: 0 0 .5em; }
/* Lange deutsche Woerter (Datenschutzerklaerung, Gemeindeversammlung) duerfen auf
   schmalen Bildschirmen umbrechen, statt die Seite breiter zu machen. */
h1, h2, h3, p, li, dd, dt, figcaption, .ev-ort, .ev-stueck { overflow-wrap: break-word; }
h1, h2, h3 { hyphens: auto; }
/* Eine Titelschrift fuer die ganze Website, wie auf Mikes bisheriger Seite:
   Stueck, Kacheln, Kaesten, Spielzeiten, Medienecho und Archiv, alle 24px. */
h1, h2 { font-size: 24px; line-height: 30px; letter-spacing: -.01em; }
h1 { margin-bottom: .6em; }
h3 { font-size: 20px; line-height: 27px; }
strong { font-weight: 700; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}
.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--box); color: var(--ink); border: 1px solid var(--rahmen); padding: 10px 16px; z-index: 200;
}
.skip:focus { left: 12px; top: 12px; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Hintergrundbild (Startseite) */
.hero-bg { position: fixed; inset: 0; z-index: -1; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
/* Startseite: Das Skript legt Grösse und Lage fest, damit ein Auge durch eine Lücke
   zwischen den Kästen schaut. Bis dahin unsichtbar, ohne Skript nach 1,5 Sekunden sichtbar. */
.hero-bg { overflow: hidden; }
.hero-bg img { transition: opacity .35s ease; }
.hero-bg.auge-wartet img { opacity: 0; animation: hero-zeigen 0s linear 1.5s forwards; }
@keyframes hero-zeigen { to { opacity: 1; } }
.hero-bg.augen-platziert img { position: absolute; max-width: none; object-fit: cover; }

/* Grundlayout */
.page {
  max-width: 1140px;
  margin: 0 auto;
  padding: 26px 20px 60px;
}
/* Die Spalte steht mittig, damit links und rechts gleich viel Luft bleibt.
   So bettet sich die Seite ruhiger ein, wie auf Mikes bisheriger Website.
   Breite genau wie dort: 768px (nachgemessen am 24.09.2026 bei 1280, 1440
   und 1920px Fensterbreite, Kopf, Kacheln, Textkasten und Stueckseiten). */
.page > main, .page > header, .page > .box, main > * { max-width: 768px; margin-left: auto; margin-right: auto; }
.cards { max-width: 768px; }
.box {
  background: var(--box);
  padding: 42px 48px;
  margin: 0 0 20px;
}
main > section.cards, .cards { background: none; padding: 0; }

/* Kopfbereich */
.header-box {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 28px;
}
.brand { margin: 0; }
.brand a { text-decoration: none; }
.brand-name, .brand-role {
  font-size: 56px;
  line-height: 62px;
  font-weight: 300;
  letter-spacing: -.025em;
}
.header-box { padding: 38px 48px 26px; }
nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 26px; }
nav a {
  display: inline-block;
  padding: 10px 0 4px;
  font-size: 24px;
  line-height: 24px;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
/* Wie im Original: die aktive Seite ist unterstrichen, sonst passiert nichts.
   Kein Einfaerben, weder beim Hover noch auf der aktiven Seite. */
nav a:hover, nav a[aria-current="page"], nav a.on { border-bottom-color: var(--ink); padding-bottom: 3px; }
nav a[aria-current="page"], nav a.on { color: inherit; }

/* Handymenue: auf dem Desktop gibt es weder Leiste noch Burger. */
.handyleiste, .handymenue, .burger { display: none; }
.handyleiste[hidden], .handymenue[hidden] { display: none !important; }

/* Kacheln */
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; }
/* In der Kachel sitzen die Angaben enger beieinander als im Fliesstext,
   so wie auf Mikes bisheriger Website. */
.card { padding: 26px 30px; }
.card h2 { font-size: 24px; line-height: 30px; }
.card-angaben, .card-naechste { font-size: 17px; line-height: 25px; }
/* «Archiv» ueber den frueheren Stuecken: in der Titelschrift, nicht mehr in Grossbuchstaben. */
.cards .section-label { grid-column: 1 / -1; margin: 0; padding: 24px 30px; font-size: 24px; line-height: 30px; letter-spacing: -.01em; }
.card { text-decoration: none; display: block; }
/* Abstaende auf dem Desktop wie auf Mikes Website (nachgemessen): Kopf 30px
   vom oberen Rand und 30px ueber dem Inhalt, Kaesten 25px untereinander,
   Kacheln je 367px breit, 25px Abstand in der Hoehe. Vorher addierte sich
   der Kastenabstand zum Rasterabstand, die Kachelreihen lagen 44px auseinander.
   Auf dem Handy bleibt alles, wie es ist. */
@media (min-width: 741px) {
  .page { padding-top: 30px; }
  .box { margin-bottom: 25px; }
  .header-box { margin-bottom: 30px; }
  .cards { gap: 25px 34px; margin-bottom: 25px; }
  .cards > .box { margin: 0; }
}
/* Kurzer Hinweis ueber dem Kacheltitel: sagt auf einen Blick, was die Kachel ist.
   .box-label ist dasselbe ueber einem Textkasten. */
.box-label { margin: 0 0 14px; }
.card-label, .box-label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  letter-spacing: .13em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent);
}
.card h2 { margin-bottom: .25em; }

.card-angaben { margin: 0; color: var(--ink-soft); }
.card-naechste { margin: .25em 0 0; }
.card-naechste:has(.card-naechste-titel) { margin-top: .9em; }
.card-naechste-titel, .card-datum, .card-ort { display: block; }
.card-naechste-titel { color: var(--muted); }
.card-ort { color: var(--ink-soft); }
.spielplan-link { border-bottom: 1px solid currentColor; text-decoration: none; padding-bottom: 1px; }
.card:hover h2 { text-decoration: underline; text-underline-offset: 4px; }
/* Jahreszahl in derselben Groesse wie der Titel, wie auf Mikes bisheriger Seite */
.card .year { font-size: inherit; }
.card-next { margin-top: .8em; font-size: 14px; color: var(--muted); }
.archive { margin-top: 8px; }

/* Termine: Aufbau wie auf der Tourseite von OROPAX, in Mikes Gestaltung */
.month-label {
  position: sticky; top: 0; z-index: 3;
  font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 var(--s2); padding: 10px 0 8px;
  background: var(--box); border-bottom: 1px solid var(--line);
}
.month-box { padding-top: var(--s2); }
.event-list { list-style: none; margin: 0; padding: 0; }
.event-row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 24px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.event-row:first-child { border-top: 0; padding-top: 2px; }
.event-row { font-variant-numeric: tabular-nums; }
/* Die Terminzeile ist bewusst nicht anklickbar, wie bei OROPAX. */
.ev-block { display: block; min-width: 0; flex: 1 1 340px; }
.ev-datum { display: block; font-size: 18px; line-height: 27px; }
.ev-ort { display: block; color: var(--ink-soft); font-size: 18px; line-height: 27px; }
.ev-stueck { display: block; color: var(--muted); font-size: 15.5px; line-height: 23px; margin-top: 1px; }
.ev-canceled { display: inline-block; margin-top: 2px; font-size: 14px; color: var(--muted); }
.canceled .ev-datum, .canceled .ev-ort { text-decoration: line-through; }

.ev-actions { position: relative; z-index: 1; display: flex; gap: var(--s1); flex-wrap: wrap; align-items: center; }
.ev-actions .btn { text-align: center; }

/* Aufklapper «Info» */
.ev-pfeil { display: inline-block; width: 7px; height: 7px; margin-left: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--tempo) ease; }
.ev-info[aria-expanded="true"] .ev-pfeil { transform: translateY(1px) rotate(225deg); }
.ev-infobox { flex: 1 0 100%; position: relative; z-index: 1; margin: var(--s2) 0 2px; padding: var(--s3) var(--s3) var(--s3) var(--s4); background: var(--zart); border-left: 1px solid var(--line); }
/* Im aufgeklappten «Info» steht nur der Beschrieb aus OpTune, wie bei OROPAX. */
.ev-beschrieb { margin: 0; font-size: 15.5px; line-height: 23px; }

/* Ortsfilter: schlank und zentriert, nicht über die ganze Breite */
.tour-filter { margin-top: var(--s4); display: flex; align-items: center; justify-content: center; gap: var(--s2); flex-wrap: wrap; }
.filter-wahl { position: relative; }
.filter-wahl::after {
  content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px;
  border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor;
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.tour-filter select {
  appearance: none; -webkit-appearance: none;
  font: inherit; font-size: 14.5px; padding: 11px 40px 11px 18px; min-height: 44px;
  background: var(--box); border: 1px solid var(--rahmen); border-radius: var(--radius);
  color: var(--ink); width: auto; min-width: 210px; cursor: pointer;
  transition: background var(--tempo) ease;
}
.tour-filter select:hover { background: var(--zart); }
.tour-filter select:focus { outline: none; border-color: var(--rahmen-aktiv); box-shadow: 0 0 0 3px rgba(60, 64, 68, .08); }
.filter-zuruecksetzen {
  font: inherit; font-size: 13.5px; background: none; border: 0; color: var(--muted);
  cursor: pointer; padding: 8px 4px; text-decoration: underline; text-underline-offset: 3px;
}
.filter-zuruecksetzen:hover { color: var(--ink); }
.filter-empty { color: var(--muted); }
.month-box.filtered-empty { display: none; }
.event-row.filtered-out { display: none; }

/* Event-Detail als Overlay */
.event-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 18px; }
.event-modal .modal-backdrop { position: absolute; inset: 0; background: rgba(17, 17, 17, .58); }
.event-modal .modal-inner { position: relative; background: var(--box); width: min(560px, 100%); max-height: 90vh; overflow: auto; padding: 34px 36px 30px; }
.ev-city-big { font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px; }
.ev-detail-title { font-size: 30px; margin-bottom: 8px; }
.ev-type { color: var(--muted); font-size: 17px; text-transform: none; }
.event-when { font-size: 17px; margin-bottom: 2px; }
.event-where { color: var(--muted); margin-bottom: 14px; }
.event-piece { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 14px; }
.event-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

.btn {
  display: inline-block;
  background: var(--box);
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--rahmen);
  font: inherit;
  font-size: 14.5px;
  padding: 12px 20px;
  min-height: 44px;
  line-height: 20px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--tempo) ease, color var(--tempo) ease, border-color var(--tempo) ease, transform var(--tempo) ease;
}
.btn:hover { background: var(--zart); border-color: var(--rahmen-aktiv); }
.btn:active { transform: translateY(0); }
.btn-big { font-size: 17px; padding: 15px 26px; min-height: 54px; }

/* Rahmen-Knopf: nur Kontur, keine Fuellung. Doppelte Klasse, damit die Regel
   die spaetere .btn-Fuellung sicher schlaegt. */
.btn.ghost, .btn.btn-rahmen {
  background: var(--box);
  color: var(--ink);
  border: 1px solid var(--rahmen);
  padding: 11px 19px;
}
.btn.ghost:hover, .btn.btn-rahmen:hover { background: var(--zart); color: var(--ink); border-color: var(--rahmen-aktiv); }
.ev-actions .btn.btn-rahmen {
  font-size: 14px;
  padding: 7px 14px;
  min-height: 34px;
  line-height: 18px;
  border-color: var(--feld-rand);
}
.ev-actions .btn.btn-rahmen:hover { border-color: var(--rahmen-aktiv); }
.ev-actions .btn.btn-leise { border-color: var(--line); color: var(--muted); background: var(--box); }
.ev-actions .btn.btn-leise:hover { border-color: var(--rahmen-aktiv); background: var(--zart); color: var(--ink); }

.next-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.all-link { font-size: 14.5px; }

.past-box .ev-title { font-weight: 400; color: var(--ink-soft); }

/* Verweis zwischen Tourliste und Archiv */
.archiv-hinweis { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }
.archiv-hinweis h2 { margin: 0 0 4px; }
.archiv-hinweis p { margin: 0; color: var(--muted); font-size: 15px; line-height: 22px; }
.archiv-hinweis .btn { flex: 0 0 auto; }
@media (max-width: 560px) {
  .archiv-hinweis { flex-direction: column; align-items: stretch; }
  .archiv-hinweis .btn { text-align: center; }
}

/* Projektseite */
.breadcrumb { font-size: 14px; color: var(--muted); margin-bottom: 6px; }
.breadcrumb a { color: inherit; }
.subtitle { color: var(--muted); font-size: 18px; margin-top: -6px; }

.media-box { padding: 0; }
.media-box img { width: 100%; }
.event-detail .event-date-big { font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.event-detail h1 { font-size: 34px; }
.event-venue { font-size: 18px; }
.event-time { color: var(--muted); }
.event-project { border-top: 1px solid var(--line); margin-top: 26px; padding-top: 20px; }
.muted { color: var(--muted); }
.small { font-size: 14px; line-height: 21px; }

/* Portraits Biografie */
.portrait-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.wisch-punkte { display: none; }
.portrait-grid figure { margin: 0; }
.portrait-grid figcaption { font-size: 12.5px; line-height: 17px; color: var(--muted); margin-top: 6px; }
/* Desktop: Fotonachweis «(Foto: …)» geschlossen auf der Zeile unter dem Text */
@media (min-width: 741px) {
  .portrait-grid .bu-nachweis { display: block; }
}
/* Zuschnitt wie im Original: Desktop 365x222, Mobil 365x395 (siehe Media Query).
   Der Bildfokus kommt pro Bild als object-position aus der Datenbank. */
.portrait-link { display: block; cursor: zoom-in; }
.portrait-link picture { display: block; }
.portrait-link img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 365 / 222;
  object-fit: cover;
}
.portrait-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Lightbox (ersetzt Fancybox der alten Seite) */
.lightbox[hidden] { display: none; }
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(17, 17, 17, .92);
  display: flex; align-items: center; justify-content: center;
}
.lightbox-figure { margin: 0; max-width: min(1400px, 94vw); max-height: 92vh; text-align: center; }
.lightbox-figure img {
  display: block; margin: 0 auto;
  max-width: 100%; max-height: 84vh;
  width: auto; height: auto;
  background: #222;
}
.lightbox-figure figcaption { color: #f2f2f2; font-size: 13.5px; margin-top: 10px; }
.lightbox-btn {
  position: absolute; background: none; border: 0; color: #fff;
  font-size: 34px; line-height: 1; cursor: pointer; padding: 14px 18px;
}
.lightbox-btn:hover { color: var(--accent); }
.lightbox-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lightbox-close { top: 6px; right: 10px; font-size: 40px; }
.lightbox-prev { left: 4px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 4px; top: 50%; transform: translateY(-50%); }
body.lightbox-open { overflow: hidden; }

/* Formulare */
.field { margin-bottom: var(--s4); }
.field label { display: block; margin-bottom: var(--s1); }
.req { color: var(--accent); }
input[type="text"], input[type="email"], input[type="tel"], textarea, select {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--feld);
  border: 1px solid var(--feld-rand);
  border-radius: var(--radius);
  padding: 13px 14px;
  min-height: 48px;
  transition: border-color var(--tempo) ease, background var(--tempo) ease;
}
input:hover, textarea:hover, select:hover { border-color: var(--feld-rand-hover); }
input:focus, textarea:focus, select:focus { border-color: var(--rahmen-aktiv); outline: none; background: var(--box); box-shadow: 0 0 0 3px rgba(60, 64, 68, .08); }
textarea { resize: vertical; }
.field-error { color: var(--accent); font-size: 14px; margin-top: 5px; }
.success { background: var(--zart); border: 1px solid var(--line); padding: 12px 16px; }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--rahmen-aktiv); }

.booking-cta { margin-top: var(--s3); }
.booking-hint { margin: 0; font-size: 15px; line-height: 22px; color: var(--muted); max-width: 46em; }
.booking-box h2 { margin-bottom: var(--s2); }
/* Eigenes Formular für Buchungsanfragen (seit 13.10.2026): Felder wie im Kontaktformular,
   auf breiten Bildschirmen paarweise nebeneinander, die Anfrage über die ganze Breite. */
.booking-form { margin-top: var(--s4); }
.booking-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s3); }
.booking-felder .field { min-width: 0; }
.booking-felder .booking-voll { grid-column: 1 / -1; }
.booking-danke { margin: var(--s4) 0 0; }
/* Sprungziele (z.B. nach dem Absenden der Buchungsanfrage) nicht ganz an den oberen Rand.
   Auf dem Handy liegt dort beim Scrollen die feste Leiste mit dem Namenszug (71px hoch),
   der Kasten steht darunter mit demselben Abstand wie oben auf der Seite (14px). */
#buchung, #newsletter { scroll-margin-top: 20px; }
@media (max-width: 740px) {
  .booking-felder { grid-template-columns: minmax(0, 1fr); }
  #buchung, #newsletter { scroll-margin-top: 85px; }
}

/* Overlay-Modal Buchungsanfrage */
.modal[hidden] { display: none; }
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 14px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(17, 17, 17, .58); }
.booking-modal-inner {
  position: relative; background: var(--box);
  width: min(840px, 100%); height: min(93vh, 1040px);
  display: flex; flex-direction: column; padding: 0;
  box-shadow: 0 24px 64px rgba(0,0,0,.28);
}
.booking-kopf {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3);
  padding: var(--s4) var(--s5) var(--s3); border-bottom: 1px solid var(--line);
}
.booking-kicker { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.booking-kopf h2 { margin: 0; font-size: 24px; line-height: 30px; }
.booking-unter { margin: 0; font-size: 14.5px; line-height: 20px; color: var(--ink-soft); }
.booking-rahmen { position: relative; flex: 1; min-height: 0; background: var(--box); }
.booking-rahmen iframe { width: 100%; height: 100%; border: 0; display: block; }
.modal-close {
  position: static; flex: 0 0 auto; background: none; border: 1px solid var(--line);
  font-size: 26px; line-height: 1; cursor: pointer; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; color: var(--ink); border-radius: var(--radius);
  transition: border-color var(--tempo) ease, background var(--tempo) ease;
}
.modal-close:hover { border-color: var(--rahmen-aktiv); background: var(--zart); }
.event-modal .modal-close { position: absolute; top: 10px; right: 12px; border: 0; }
.modal-fallback { font-size: 13px; line-height: 19px; color: var(--muted); margin: 0; padding: var(--s2) var(--s5) var(--s3); border-top: 1px solid var(--line); }
.modal-fallback a { color: inherit; }
.modal-fallback-only { padding: 26px 18px; }
body.modal-offen { overflow: hidden; }
@media (max-width: 740px) {
  .modal { padding: 0; }
  .booking-modal-inner { width: 100%; height: 100dvh; max-height: 100dvh; }
  .booking-kopf { padding: var(--s3) var(--s3) var(--s2); }
  .booking-kopf h2 { font-size: 20px; line-height: 26px; }
  .booking-unter { font-size: 13.5px; line-height: 19px; }
  .modal-fallback { padding: var(--s2) var(--s3); }
  .event-modal { padding: 0; align-items: stretch; }
  .event-modal .modal-inner { width: 100%; max-height: none; padding: 54px 20px 30px; }
}

/* Fusszeile: klein und ruhig, in derselben Spalte wie der Inhalt. Ohne Kasten,
   nur Icons und Text auf dem Seitengrund. Einen weissen Kasten bekommt sie nur
   auf Seiten mit Hintergrundbild (Startseite, Stueckseiten), weil sie dort auf
   dem Foto liegt und sonst je nach Bild kaum lesbar ist. Text und Icons stehen
   in beiden Faellen an derselben Stelle. */
.footer-box { margin-top: 8px; }
.footer-schlicht {
  max-width: 768px; margin: 20px auto 0;
  background: none;
  padding: 12px 48px 16px;
  border: 0;
}
.hero-bg ~ .page .footer-schlicht { background: var(--box); }
.footer-schlicht .footer-row { gap: 6px 18px; }
.footer-schlicht .social { margin-left: -12px; }
.footer-schlicht .footer-links { font-size: 14px; gap: 18px; }
/* Fusszeile leicht zurückgenommen: ein helleres Grau als der Text (Kontrast 4,6:1 auf dem
   Seitengrund, 5,2:1 auf Weiss, beides über der Mindestanforderung für Lesetext).
   Beim Überfahren werden Links und Icons so dunkel wie der Text. */
.footer-schlicht { --fuss: #686d72; }
.footer-schlicht .social a, .footer-schlicht .footer-links a { color: var(--fuss); transition: color .15s; }
.footer-schlicht .social a:hover, .footer-schlicht .footer-links a:hover { color: var(--ink); }
.footer-schlicht .credit { font-size: 13px; line-height: 18px; color: var(--fuss); margin-top: 2px; }
/* Icons und © stehen auf der Textkante dessen, was direkt darüber steht: unter
   Textkästen 48px vom Rand, unter Kacheln (Projektübersicht) und unter den halben
   Kästen «Spielzeiten»/«Medienecho» 30px wie deren Text. Auf dem Handy ist beides 20px. */
@media (min-width: 741px) {
  .footer-schlicht.fuss-kachelkante { padding-left: 30px; padding-right: 30px; }
}
.newsletter-status:empty { display: none; }
.newsletter-status { margin: var(--s3) 0 0; padding: 12px 16px; background: var(--zart); border: 1px solid var(--line); font-size: 16px; line-height: 23px; }
.newsletter-status.nl-status-fehler { border-color: var(--rahmen-aktiv); }
.footer-row { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; }
.social { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; }
.social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
.footer-links { list-style: none; display: flex; gap: 20px; margin: 0; padding: 0; font-size: 14.5px; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.credit { font-size: 13px; color: var(--muted); margin-top: 14px; }
.credit a { color: inherit; }

.body-text h2 { margin-top: 1.4em; }
.body-text ul { padding-left: 20px; }
.lead, .teaser { font-size: 20px; line-height: 29px; color: var(--ink-soft); }
/* Auf der Stueckseite steht unter dem Titel gleich der Text, in derselben
   Groesse, ohne abgesetzten Vorspann. So wie auf Mikes bisheriger Website. */
.projekt-inhalt .subtitle, .projekt-inhalt .teaser { font-size: inherit; line-height: inherit; margin: 0 0 20px; }

/* Responsive */
@media (max-width: 740px) {
  .page { padding: 14px 12px 40px; }
  .box { padding: 24px 20px; }
  .header-box { padding: 22px 20px 16px; }
  .footer-schlicht { padding: 8px 20px 14px; }
  /* Kacheln auf dem Handy im selben Abstand wie alle Kaesten: 20px */
  .cards { grid-template-columns: 1fr; gap: 20px; margin-bottom: 20px; }
  .cards > .box { margin: 0; }
  .cards .section-label { padding: 24px 20px; }
  /* Auf dem Handy steht oben nur der Namenszug, das Menue liegt im Burger.
     Fuenf Punkte nebeneinander brauchten sonst zwei bis drei Zeilen. */
  .header-box { align-items: center; flex-direction: row; justify-content: space-between; gap: 12px; }
  .header-box > nav { display: none; }
  /* Originalwert mobil: Logo 52px/57px; hier etwas zurückhaltender */
  .brand-name, .brand-role { font-size: 40px; line-height: 45px; }

  .burger {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto; width: 46px; height: 46px; margin: 0;
    background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink);
  }
  .burger-striche { display: block; width: 26px; }
  .burger-striche span {
    display: block; height: 2px; background: currentColor;
    transition: transform var(--tempo) ease;
  }
  .burger-striche span + span { margin-top: 7px; }

  .handyleiste {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    position: fixed; top: 0; left: 0; right: 0; z-index: 60;
    padding: 8px var(--s3); background: var(--box);
    border-bottom: 1px solid var(--line);
    transform: translateY(-100%);
    transition: transform var(--tempo) ease;
  }
  .handyleiste.zeigen { transform: translateY(0); }
  /* Schmale Leiste beim Scrollen: Namenszug im Stil des Logos, zwei gleich grosse Zeilen */
  .handyleiste-name { text-decoration: none; }
  .handyleiste-name .brand-name, .handyleiste-name .brand-role { font-size: 21px; line-height: 23px; }

  /* Das Menü liegt als Blatt über der Seite. Sein Kopf steht genau wie der Kopf der
     Seite: gleiche Abstände (Seite 14px 12px, Kasten 22px 20px 16px), gleicher Namenszug. */
  .handymenue {
    display: flex; flex-direction: column;
    position: fixed; inset: 0; z-index: 90; background: var(--box);
    padding: 14px 12px var(--s4);
    overflow-y: auto;
  }
  .handymenue-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 20px 16px; }
  .handymenue .handymenue-name { display: inline; padding: 0; font-size: inherit; line-height: inherit; text-decoration: none; }
  .menue-zu {
    flex: 0 0 auto; width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 0; padding: 0; font-size: 34px; line-height: 1; color: var(--ink); cursor: pointer;
  }
  .handymenue nav { margin: var(--s3) 20px 0; }
  .handymenue ul { list-style: none; margin: 0; padding: 0; display: block; }
  .handymenue li { border-top: 1px solid var(--line); }
  .handymenue li:last-child { border-bottom: 1px solid var(--line); }
  .handymenue a {
    display: block; padding: 18px 2px; font-size: 27px; line-height: 32px;
    text-decoration: none; border: 0;
  }
  .handymenue a[aria-current="page"] { color: inherit; border: 0; padding: 18px 2px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
  body.menue-offen { overflow: hidden; }
  .event-row { gap: 6px 14px; padding: 14px 0; align-items: center; }
  .ev-block { flex: 1 1 60%; }
  .ev-datum { font-size: 16.5px; line-height: 23px; }
  .ev-ort { font-size: 16.5px; line-height: 23px; }
  .ev-stueck { font-size: 14px; line-height: 20px; }
  /* Knoepfe immer unter dem Termin, auch wenn nur «Info» da ist */
  .ev-actions { flex: 0 0 100%; gap: 6px; }
  .ev-actions .btn.btn-rahmen { font-size: 13px; padding: 6px 10px; min-height: 32px; line-height: 17px; }
  .ev-pfeil { width: 5px; height: 5px; margin-left: 5px; }
  .ev-infobox { padding: var(--s3); margin-left: 0; }
  .tour-filter { flex-direction: column; align-items: stretch; }
  .tour-filter select { width: 100%; min-width: 0; }
  .portraits { overflow: hidden; }
  .portrait-grid {
    display: flex;
    grid-template-columns: none;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 calc(var(--s3) * -1);
    padding: 0 var(--s3) 2px;
  }
  .portrait-grid::-webkit-scrollbar { display: none; }
  .portrait-grid figure { flex: 0 0 86%; scroll-snap-align: center; }
  .portrait-link img { aspect-ratio: 365 / 395; }
  /* Punkte zum Antippen: sichtbar 7px, die Tippfläche ist grösser (21px) */
  .wisch-punkte { display: flex; justify-content: center; gap: 0; margin-top: 10px; }
  .wisch-punkt {
    width: 21px; height: 21px; padding: 7px; border: 0; border-radius: 50%; cursor: pointer;
    background: var(--line); background-clip: content-box;
    transition: background-color var(--tempo) ease;
  }
  .wisch-punkt[aria-current="true"] { background-color: var(--accent); }
  .wisch-punkt:focus-visible { outline: 2px solid var(--ink); outline-offset: 0; }
  .lightbox-btn { font-size: 30px; padding: 10px 12px; }
  .lightbox-close { font-size: 34px; }
  .hero-bg img { object-position: 50% 0%; }
  .event-detail h1 { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}



/* ---------- Stueckseiten: ein Aufbau fuer alle Projekte ----------
   Titel, erster Absatz, Bilder zum Wischen, Text, Regie und Mitwirkende, Videos.
   Darunter Spielzeiten und Medienecho nebeneinander, wie auf Mikes bisheriger Seite. */
.projekt-einstieg { margin-bottom: 0; }
.projekt-text { margin-top: var(--s4); }
.projekt-credits { margin: var(--s4) 0 0; }

/* Bilder zum Wischen: auf dem Desktop drei nebeneinander, Zuschnitt wie die Bildreihe
   der bisherigen Website. Blaettern mit Finger, Trackpad, Pfeilen oder Punkten. */
.swiper { margin: var(--s4) 0 0; }
.swiper-spur {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 24px) / 3); gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.swiper-spur::-webkit-scrollbar { display: none; }
.swiper-spur:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.swiper-bild { margin: 0; min-width: 0; scroll-snap-align: start; }
.gallery-link { display: block; position: relative; cursor: zoom-in; }
.swiper-bild img { display: block; width: 100%; height: auto; aspect-ratio: 365 / 222; object-fit: cover; background: var(--zart); }
/* Ein oder zwei Bilder: ruhig nebeneinander, je halbe Breite, ohne Blaettern */
.swiper.ist-kurz .swiper-spur { grid-auto-columns: calc((100% - 12px) / 2); overflow: visible; }
.swiper-steuerung { display: flex; align-items: center; justify-content: center; gap: var(--s3); margin-top: var(--s2); }
.swiper-steuerung[hidden] { display: none; }
.swiper-punkte { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }
.swiper-zahl { font-size: 14px; line-height: 22px; min-width: 56px; text-align: center; font-variant-numeric: tabular-nums; }
.swiper-punkt { width: 22px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.swiper-punkt::after { content: ""; position: absolute; left: 7px; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--rahmen); transition: background var(--tempo) ease; }
.swiper-punkt:hover::after { background: var(--rahmen-aktiv); }
.swiper-punkt[aria-current="true"]::after { background: var(--ink); }
.swiper-pfeil {
  width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-size: 22px; line-height: 1; color: var(--ink); background: var(--box);
  border: 1px solid var(--rahmen); border-radius: var(--radius); cursor: pointer;
  transition: border-color var(--tempo) ease, background var(--tempo) ease;
}
.swiper-pfeil span { margin-top: -3px; }
.swiper-pfeil:hover { border-color: var(--rahmen-aktiv); background: var(--zart); }
.swiper-pfeil:disabled { opacity: .35; cursor: default; }
.swiper-pfeil:disabled:hover { border-color: var(--rahmen); background: var(--box); }

/* Spielzeiten und Medienecho: zwei halbe Kaesten nebeneinander, wie die Kacheln */
.projekt-unten { display: grid; grid-template-columns: 1fr 1fr; gap: 25px 34px; margin: 0 0 25px; }
.projekt-unten > .box { margin: 0; padding: 26px 30px 30px; min-width: 0; }
.projekt-unten .kasten-titel { margin-bottom: .7em; }
/* Im halben Kasten: Datum und Knöpfe auf einer Zeile, der Ort darunter in voller
   Breite. So bricht der Ort kaum um. */
.projekt-unten .event-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 0; align-items: center; }
.projekt-unten .ev-block { display: contents; }
.projekt-unten .ev-datum { grid-column: 1; grid-row: 1; display: flex; align-items: center; min-height: 32px; }
.projekt-unten .ev-actions { grid-column: 2; grid-row: 1; flex: none; }
.projekt-unten .ev-ort, .projekt-unten .ev-stueck, .projekt-unten .ev-canceled,
.projekt-unten .ev-infobox { grid-column: 1 / -1; display: block; }
.presse-liste { list-style: none; margin: 0; padding: 0; }
.presse-liste li { margin: 0 0 var(--s3); }
.presse-liste li:last-child { margin-bottom: 0; }
.presse-liste a { text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.presse-liste a:hover { border-bottom-width: 2px; }
.presse-info { display: block; font-size: 14px; line-height: 21px; margin-top: 2px; }
@media (max-width: 740px) {
  .swiper-spur { grid-auto-columns: 86%; gap: 10px; }
  .swiper.ist-kurz .swiper-spur { grid-auto-columns: calc((100% - 10px) / 2); }
  .projekt-unten { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-bottom: 20px; }
  .projekt-unten > .box { padding: 24px 20px; }
}


/* Newsletter-Seite: dieselben Bausteine wie die Kontaktseite. Titel in der
   Groesse der Kastentitel, Text in Lesegroesse, Felder und Beschriftungen wie
   im Kontaktformular. Keine Grossbuchstaben-Beschriftungen, keine Spalten. */
.kasten-titel { font-size: 24px; line-height: 30px; letter-spacing: -.01em; margin: 0 0 .6em; }
.nl-text ul { list-style: none; margin: 0; padding: 0; }
.nl-text li { margin: 0; }
.nl-felder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--s3); }
.nl-felder .field { grid-column: span 2; min-width: 0; }
.nl-felder .nl-plz { grid-column: span 1; }
.nl-felder .nl-email { grid-column: span 3; }
@media (max-width: 740px) {
  .nl-felder { grid-template-columns: minmax(0, 1fr); }
  .nl-felder .field, .nl-felder .nl-plz, .nl-felder .nl-email { grid-column: 1 / -1; }
}


/* Videos stehen nach dem Text, in voller Breite, geladen erst nach dem Klick */
.video-baustein { margin: var(--s5) 0 0; }
.video-rahmen { position: relative; background: #111; aspect-ratio: 16 / 9; overflow: hidden; }
.video-rahmen img { width: 100%; height: 100%; object-fit: cover; }
.video-rahmen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-start {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s2);
  background: rgba(17,17,17,.28); border: 0; cursor: pointer; color: #fff; font: inherit;
  transition: background var(--tempo) ease;
}
.video-start:hover { background: rgba(17,17,17,.44); }
.video-play {
  width: 68px; height: 68px; border-radius: 50%; background: rgba(255,255,255,.94);
  display: block; position: relative; transition: transform var(--tempo) ease;
}
.video-play::after {
  content: ""; position: absolute; left: 52%; top: 50%; transform: translate(-50%, -50%);
  border-left: 20px solid var(--ink); border-top: 12px solid transparent; border-bottom: 12px solid transparent;
}
.video-start:hover .video-play { transform: scale(1.06); }
.video-quelle { font-size: 13px; letter-spacing: .02em; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.video-baustein figcaption { font-size: 13.5px; line-height: 19px; color: var(--muted); margin-top: var(--s2); }
.video-hinweis { font-size: 12.5px; line-height: 18px; color: var(--muted); margin: var(--s1) 0 0; }
.video-hinweis a { color: inherit; }

/* Sanftes Einblenden beim Scrollen */
@media (prefers-reduced-motion: no-preference) {
  .einblenden { opacity: 0; transform: translateY(14px); }
  .einblenden.sichtbar { opacity: 1; transform: none; transition: opacity 480ms ease, transform 480ms ease; }
}
@media print {
  .einblenden { opacity: 1 !important; transform: none !important; }
}