/* ==========================================================================
   in flagranti – Stylesheet
   Statische Seite, keine externen Abhängigkeiten (keine Web-Fonts, kein CDN).
   Aufbau: 1 Grundlagen · 2 Layout · 3 Kopf/Navigation · 4 Bausteine
           5 Seitenspezifisches · 6 Fuss · 7 Druck
   ========================================================================== */

/* 1 Grundlagen ============================================================ */

:root {
  /* Helle Palette. Dunkle Variante weiter unten, nur als Token-Austausch. */
  --grund:        #fbfaf7;   /* Seitenhintergrund, warmes Off-White */
  --flaeche:      #ffffff;   /* Karten, abgesetzte Blöcke */
  --flaeche-warm: #f4efe7;   /* sanfte Sandfläche */
  --linie:        #e4ded3;
  --linie-stark:  #cfc6b7;
  --text:         #1f1d1a;
  --text-leise:   #6a645b;
  --akzent:       #a04f22;   /* warmes Rostbraun */
  --akzent-hell:  #f6ece4;
  --akzent-tief:  #7d3c19;

  --schrift-text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
                  Arial, sans-serif;
  --schrift-titel: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype",
                   "Book Antiqua", serif;

  --breite-seite:  72rem;
  --breite-text:   38rem;
  --rand:          clamp(1.25rem, 5vw, 3rem);
  --radius:        14px;
  --schatten:      0 1px 2px rgb(31 29 26 / 5%), 0 8px 28px -12px rgb(31 29 26 / 18%);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund:        #171614;
    --flaeche:      #201e1b;
    --flaeche-warm: #262320;
    --linie:        #34302b;
    --linie-stark:  #4b453d;
    --text:         #f0ebe2;
    --text-leise:   #a9a196;
    --akzent:       #e08a52;
    --akzent-hell:  #2c231d;
    --akzent-tief:  #f0a878;
    --schatten:     0 1px 2px rgb(0 0 0 / 30%), 0 8px 28px -12px rgb(0 0 0 / 60%);
  }
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

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

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: clamp(1.02rem, .98rem + .25vw, 1.14rem);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Überschriften in derselben Schrift wie der Fliesstext. Die Serifenschrift
   bleibt der Wortmarke vorbehalten – so ist sie ein Erkennungszeichen und
   nicht bloss eine zweite Schrift. Da die Textschrift bei gleicher Punktzahl
   grösser wirkt (höhere Mittellänge), sind die Grade knapper gesetzt als bei
   einer Serifenschrift üblich; für die Rangfolge sorgen Gewicht und Laufweite. */
h1, h2, h3 {
  font-family: var(--schrift-text);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.95rem); }
h2 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); }
h3 { font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); }

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--akzent); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--akzent-tief); }

img, video, iframe { max-width: 100%; height: auto; display: block; }

:focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 3px;
  border-radius: 4px;
}

.sprungmarke {
  position: absolute;
  left: -9999px;
  top: .5rem;
  z-index: 100;
  background: var(--flaeche);
  color: var(--text);
  padding: .7rem 1.1rem;
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}
.sprungmarke:focus { left: .75rem; }

/* 2 Layout ================================================================ */

.huelle {
  width: 100%;
  max-width: var(--breite-seite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.textspalte { max-width: var(--breite-text); }

main { display: block; }

section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
section + section { border-top: 1px solid var(--linie); }

/* Schliesst direkt an den Seitenkopf an, ohne zweiten Abstand und Trennlinie. */
.ohne-oberkante { padding-top: 0; border-top: 0; }

.abstand-oben { margin-top: clamp(2rem, 5vw, 3.5rem); }

/* 3 Kopf und Navigation =================================================== */

.kopf {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--grund) 88%, transparent);
  border-bottom: 1px solid var(--linie);
}

@supports (backdrop-filter: blur(1px)) {
  .kopf { backdrop-filter: saturate(160%) blur(12px); }
}

.kopf__innen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  padding-block: .9rem;
}

.wortmarke {
  font-family: var(--schrift-titel);
  font-size: clamp(1.3rem, 1.15rem + .7vw, 1.7rem);
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
.wortmarke:hover { color: var(--akzent); }
.wortmarke em { font-style: italic; }

.navigation ul {
  display: flex;
  flex-wrap: wrap;
  gap: .15rem .35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.navigation a {
  /* --nav-x hält die seitliche Polsterung und die Balkenbreite zusammen:
     der Balken soll genau so breit sein wie der Text. */
  --nav-x: .75rem;
  position: relative;   /* Bezug für den Balken der aktiven Seite */
  display: block;
  padding: .45rem var(--nav-x) .6rem;
  border-radius: 999px;
  color: var(--text-leise);
  text-decoration: none;
  font-size: .95rem;
  transition: background-color .18s, color .18s;
}

.navigation a:hover { background: var(--flaeche-warm); color: var(--text); }

/* Die gerade besuchte Seite: ein Balken unter dem Menüpunkt, in der Breite
   des Textes. Farbe und Halbfett verstärken ihn – wer Farben schlecht
   unterscheidet, erkennt die Seite am Balken allein. Er liegt frei unter der
   Schrift, berührt also keine Unterlängen. */
.navigation a[aria-current="page"] {
  color: var(--akzent);
  font-weight: 600;
}

.navigation a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: var(--nav-x);
  right: var(--nav-x);
  bottom: .1rem;
  height: 3px;
  border-radius: 2px;
  background: var(--akzent);
}

.navigation a[aria-current="page"]:hover { background: var(--akzent-hell); }

/* Auf schmalen Geräten passen die vier Menüpunkte nicht in eine Zeile.
   Ein 2x2-Raster wirkt geordneter als ein Umbruch nach dem dritten Punkt. */
@media (max-width: 30rem) {
  .kopf__innen { justify-content: center; padding-block: .75rem; }
  .navigation { width: 100%; }
  .navigation ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .2rem;
  }
  /* Der Menüpunkt schrumpft auf seine Textbreite und wird in der Rasterzelle
     zentriert – sonst zöge sich der Balken über die ganze Zellenbreite.
     Die grössere Polsterung hält die Antippfläche bei rund 44 px Höhe. */
  .navigation li { display: grid; justify-items: center; }
  .navigation a { --nav-x: .9rem; padding: .65rem var(--nav-x) .8rem; text-align: center; }
}

/* 4 Bausteine ============================================================= */

/* Einleitung oben auf jeder Unterseite */
.seitenkopf { padding-block: clamp(2.5rem, 7vw, 5rem) clamp(1.5rem, 4vw, 2.5rem); }
.seitenkopf p.lead { color: var(--text-leise); font-size: 1.1em; }

.lead {
  font-size: clamp(1.1rem, 1.02rem + .45vw, 1.35rem);
  line-height: 1.55;
}

.aug {
  display: inline-block;
  margin-bottom: .9rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--akzent);
}

/* Bild mit Bildlegende */
figure { margin: 0; }

.bild {
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--flaeche-warm);
  box-shadow: var(--schatten);
}

.bild img { width: 100%; }

/* Zwei getrennte Auskünfte, darum auch räumlich getrennt: wer zu sehen ist,
   links – wer fotografiert hat, rechts am Bildrand. Reicht die Breite nicht,
   rutscht der Nachweis auf eine eigene Zeile unter die Namen. Die min-width
   bestimmt, wann das geschieht.

   Der seitliche Einzug ist ein optischer Ausgleich: Weil die Bildecken
   gerundet sind, liegt die sichtbare Bildkante auf Eckenhöhe bereits weiter
   innen. Schrift, die am mathematischen Rand beginnt, wirkt darum
   vorgerückt. Die halbe Eckenrundung nimmt das zurück, ohne dass der Einzug
   als solcher auffällt. */
figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .15rem 2rem;
  margin-top: .8rem;
  padding-inline: calc(var(--radius) / 2);
  font-size: .88rem;
  line-height: 1.5;
  color: var(--text-leise);
}

.foto-personen { flex: 0 1 auto; min-width: min(100%, 24rem); }
.foto-nachweis { opacity: .85; white-space: nowrap; }

/* Knöpfe */
.knopf {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.3rem;
  border: 1px solid var(--akzent);
  border-radius: 999px;
  background: var(--akzent);
  color: #fff;
  font: inherit;
  font-size: .98rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s, border-color .18s, transform .18s;
}
.knopf:hover { background: var(--akzent-tief); border-color: var(--akzent-tief); color: #fff; }
.knopf:active { transform: translateY(1px); }

.knopf--leise {
  background: transparent;
  color: var(--akzent);
  border-color: var(--linie-stark);
}
.knopf--leise:hover { background: var(--akzent-hell); color: var(--akzent); border-color: var(--akzent); }

/* Im Dunkelmodus ist der Akzent hell – gefüllte Knöpfe brauchen dann dunkle
   Schrift. Der leise Knopf bleibt umrandet und behält die Akzentfarbe. */
@media (prefers-color-scheme: dark) {
  .knopf:not(.knopf--leise),
  .knopf:not(.knopf--leise):hover { color: #171614; }
}

/* Karten – verwendet auf der Kontaktseite */
.karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 3vw, 1.9rem);
}

/* Hinweisblock */
.hinweis {
  border-left: 3px solid var(--akzent);
  background: var(--akzent-hell);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1rem 1.25rem;
  color: var(--text);
}
.hinweis p { margin-bottom: .5em; }

/* Fehlende Mediendatei sichtbar machen (siehe seite.js) */
.medium-fehlt {
  display: grid;
  place-content: center;
  gap: .35rem;
  min-height: 12rem;
  padding: 1.5rem;
  border: 2px dashed var(--linie-stark);
  border-radius: var(--radius);
  background: var(--flaeche-warm);
  color: var(--text-leise);
  text-align: center;
  font-size: .87rem;
}
.medium-fehlt strong { color: var(--text); font-size: .95rem; }
.medium-fehlt code {
  font-size: .82rem;
  word-break: break-all;
  background: var(--grund);
  padding: .15rem .4rem;
  border-radius: 5px;
}

/* 5 Seitenspezifisches ==================================================== */

/* --- Startseite: Bühne ------------------------------------------------- */
/* Einziger Abschnitt der Startseite – braucht darum unten dieselbe Polsterung
   wie oben, sonst stösst der Engagement-Block an die Fusszeile. */
.buehne { padding-block: clamp(2.5rem, 7vw, 5rem); }

.buehne__titel { margin-bottom: .35em; }

.buehne__lead { color: var(--text-leise); max-width: 44rem; }

/* Woher die Stücke stammen – eine Aufzählung, keine Prosa. Eine Stufe kleiner
   als der Einleitungssatz, damit sie das Auge nicht aufhält. */
.herkunft {
  margin-top: .9rem;
  max-width: 44rem;
  font-size: .95rem;
  color: var(--text-leise);
}

.buehne__bild { margin-top: clamp(2rem, 5vw, 3rem); }

/* Schlusssatz der Startseite – schlicht wie Fliesstext, ohne Kasten.
   Kein Knopf daneben: er führte nur auf die Kontaktseite, die im Menü ohnehin
   einen Klick entfernt ist, und seine Beschriftung hätte eine Handlung
   versprochen, die gar nicht stattfindet. Übrig bleibt der Satz, mit genug
   Abstand nach oben, damit er nicht an der Bildlegende klebt. */
.engagement {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

/* --- Auftritte ---------------------------------------------------------- */
.termine { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }

.termin {
  display: grid;
  gap: .35rem .5rem;
  padding: 1.25rem clamp(1.25rem, 3vw, 1.75rem);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-left: 3px solid var(--akzent);
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* Führt die Terminkarte an wie eine Überschrift – darum dieselbe Behandlung
   wie h1 bis h3: Textschrift, halbfett, leicht enger gestellt. */
.termin__datum {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -.02em;
  margin: 0;
}
.termin__ort { margin: 0; }
/* Was gespielt wird – volle Textgrösse, aber ruhiger als der Ort. */
.termin__beschrieb { margin: 0; color: var(--text-leise); }
/* Praktische Angaben wie Eintritt, eine Stufe kleiner. */
.termin__zusatz { margin: 0; color: var(--text-leise); font-size: .93rem; }

/* --- Audio/Video -------------------------------------------------------- */
.videos {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.video { display: flex; flex-direction: column; gap: .75rem; }

.video__titel { margin: 0; font-size: 1.05rem; }
.video__titel .video__herkunft {
  display: block;
  font-family: var(--schrift-text);
  font-size: .87rem;
  font-weight: 400;
  color: var(--text-leise);
  letter-spacing: .01em;
}

/* Selbst gehostete Filme, 720p. preload="none" im HTML sorgt dafür, dass
   beim Seitenaufruf nur das Vorschaubild geladen wird – der Film erst auf
   Klick. Die Bedienelemente stellt der Browser. */
.video__spieler {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  border: 1px solid var(--linie);
  background: var(--flaeche-warm);
}

/* --- Kontakt ------------------------------------------------------------ */
.kontakte {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  list-style: none;
  margin: 0 0 clamp(2rem, 5vw, 3rem);
  padding: 0;
}

.person__name { margin: 0 0 .1em; font-size: 1.25rem; }
.person__ort { margin: 0 0 .9rem; color: var(--text-leise); font-size: .95rem; }

.person__telefon {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
}
.person__telefon:hover { color: var(--akzent); }
.person__telefon svg { width: 1.05rem; height: 1.05rem; fill: var(--akzent); flex: none; }

.person__mail { margin-top: 1rem; }

.datenschutz { color: var(--text-leise); font-size: .95rem; }

/* 6 Fuss ================================================================== */

/* Die Fusszeile trägt nur noch Wortmarke und Gattung, untereinander. Auf ein
   Fussmenü ist bewusst verzichtet: die Kopfzeile klebt oben und ist immer
   erreichbar.

   Zwei Zeilen sollen etwa so hoch bauen wie die eine Zeile der Kopfzeile.
   Darum sitzt der Zeilenabstand hier enger als im Fliesstext (1.35 statt
   1.65) – das schafft den Platz für eine Polsterung, die nicht gequetscht
   wirkt.

   Unten mehr Polsterung als oben: die untere Kante ist das Ende der ganzen
   Seite, und ein Wort, das knapp darüber sitzt, wirkt abgeschnitten. Oben
   grenzt die Fusszeile dagegen an den Inhalt, dort genügt weniger. */
.fuss {
  margin-top: clamp(3rem, 8vw, 5rem);
  border-top: 1px solid var(--linie);
  background: var(--flaeche-warm);
  padding-block: .8rem 1.2rem;
  font-size: .92rem;
  line-height: 1.35;
  color: var(--text-leise);
}

.fuss__marke {
  font-family: var(--schrift-titel);
  font-size: 1.15rem;
  color: var(--text);
  margin: 0 0 .1rem;
}

/* 7 Druck ================================================================= */

@media print {
  .kopf, .fuss, .sprungmarke, .video__spieler, .knopf { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}