:root{
  --bg:#141210;
  --bg-alt:#1b1613;
  --card:#211b17;
  --text:#f3ece2;
  --muted:#b3a595;
  --line:#332a24;
  --gold:#f5a623;
  --orange:#e2401f;
  --magenta:#8f2f78;
  --grad:linear-gradient(100deg,#f5a623,#e2401f 48%,#8f2f78);
  --display:'Oswald','Oswald Fallback',Impact,'Haettenschweiler',sans-serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --wrap:1120px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--body);line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 1.5rem}
.center{text-align:center}
.section{padding:6rem 0}
.section--alt{background:var(--bg-alt)}
.eyebrow{font-family:var(--body);text-transform:uppercase;letter-spacing:.22em;font-size:.78rem;font-weight:600;color:var(--gold);margin-bottom:.7rem}
.eyebrow.center{display:block}
.section__title{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(1.8rem,4vw,2.9rem);line-height:1.05;margin-bottom:1.2rem}
.section__title.center{margin-inline:auto}
.section__title.center::after{content:"";display:block;width:74px;height:4px;border-radius:4px;background:var(--grad);margin:1rem auto 0}
.section__lead{color:var(--muted);max-width:640px;margin:0 auto 2.4rem}
p+p{margin-top:1rem}

/* Buttons */
.btn{display:inline-block;font-family:var(--display);text-transform:uppercase;letter-spacing:.08em;font-size:.95rem;font-weight:600;padding:.85rem 1.8rem;border-radius:999px;cursor:pointer;border:0;transition:transform .15s ease,opacity .15s ease,box-shadow .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--grad);color:#fff}
.btn--primary:hover{opacity:.92}
.btn--ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 2px rgba(243,236,226,.4)}
.btn--ghost:hover{color:var(--gold);box-shadow:inset 0 0 0 2px var(--gold)}

/* Header / Nav */
header{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .3s ease,box-shadow .3s ease}
header.scrolled{background:rgba(16,13,11,.92);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line)}
.nav{max-width:1240px;margin:0 auto;padding:.7rem 1.5rem;display:flex;align-items:center;justify-content:space-between}
.nav__logo img{height:46px;width:auto}
.nav__links{list-style:none;display:flex;gap:1.9rem;align-items:center}
.nav__links a{font-size:.92rem;font-weight:500;color:var(--text);opacity:.85;transition:opacity .15s,color .15s}
.nav__links a:hover{opacity:1;color:var(--gold)}
.nav__cta{border:2px solid rgba(243,236,226,.35);border-radius:999px;padding:.4rem 1.1rem}
.nav__cta:hover{border-color:var(--gold)}
.nav__burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.nav__burger span{width:26px;height:2px;background:var(--text);border-radius:2px;transition:.25s}

/* Hero */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;
  background:#0c0a08 url("bilder/05-hintergrund/startseite-hintergrund.jpg") center/cover no-repeat;background-attachment:fixed}
.hero__overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,10,8,.72),rgba(12,10,8,.55) 40%,rgba(12,10,8,.9))}
.hero__inner{position:relative;z-index:2;padding:6rem 1.5rem 2rem;max-width:820px}
.hero__logo{width:min(420px,80vw);margin:0 auto 1.6rem;filter:drop-shadow(0 6px 30px rgba(0,0,0,.6))}
.hero__quote{font-style:italic;color:var(--muted);letter-spacing:.02em;margin-bottom:.5rem}
.hero__title{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(2.1rem,6vw,4rem);line-height:1;letter-spacing:.01em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:2rem}
.hero__actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.hero__scroll{position:absolute;bottom:1.6rem;left:50%;transform:translateX(-50%);z-index:2;font-size:1.6rem;color:var(--muted);animation:bob 1.8s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(8px)}}

/* Über mich */
/* Zwei Spalten, aber in zwei Zeilen: "Ueber mich" samt Ueberschrift steht oben
   allein in der rechten Spalte, darunter erst Foto links und Fliesstext rechts.
   Dadurch beginnt das Foto genau auf Hoehe der Zeile "Ich bin Juergen Ammann".
   Kein fester Abstand von oben: die Ueberschrift waechst mit der Fensterbreite
   (clamp) und bricht je nach Breite um, jeder feste Wert waere geraten. */
.ueber{display:grid;grid-template-columns:.85fr 1.15fr;column-gap:3rem;row-gap:0;align-items:start}
.ueber__kopf{grid-column:2;grid-row:1}
.ueber__photo{grid-column:1;grid-row:2}
.ueber__text{grid-column:2;grid-row:2}
.ueber__photo img{border-radius:14px;width:100%;box-shadow:0 20px 50px rgba(0,0,0,.45)}
/* Bildunterschrift: kleiner und zurueckgenommen, damit sie das Foto einordnet,
   ohne mit dem Fliesstext daneben zu konkurrieren.
   Mittig, nicht linksbuendig: Das Foto hat einen gerissenen Rand eingearbeitet
   (links ~1,6 %, rechts ~1,4 % der Bildbreite). Linksbuendig beginnt der Text
   am echten Dateirand, das Auge liest den Bildanfang aber weiter rechts – die
   Unterschrift wirkt dann uebergestellt. Da der Rand unregelmaessig ist, waere
   jede feste Einrueckung geraten. */
.ueber__bildtext{margin-top:.7rem;font-size:.82rem;line-height:1.5;color:var(--muted);text-align:center}
/* Links im Fliesstext erben sonst die Textfarbe und sind nicht als Link zu
   erkennen. Gleiche Behandlung wie bei .dates__info: Textfarbe bleibt, dezent
   goldene Unterstreichung, beim Ueberfahren ganz gold. */
.ueber__text a{color:inherit;text-decoration:underline;text-decoration-color:rgba(245,166,35,.45);text-underline-offset:3px;transition:color .15s ease,text-decoration-color .15s ease}
.ueber__text a:hover{color:var(--gold);text-decoration-color:var(--gold)}
.stats{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:2rem}
.stats li{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1rem 1.2rem;font-size:.9rem;color:var(--muted)}
.stats span{display:block;font-family:var(--display);font-size:1.7rem;font-weight:700;color:var(--text);line-height:1.1}

/* Auftritte */
.variants{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin:2.5rem 0}
.variant{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1.5rem;border-top:3px solid transparent;background-clip:padding-box;position:relative}
.variant::before{content:"";position:absolute;top:-1px;left:-1px;right:-1px;height:4px;border-radius:14px 14px 0 0;background:var(--grad)}
.variant h3{font-family:var(--display);text-transform:uppercase;letter-spacing:.03em;font-size:1.15rem;margin-bottom:.5rem}
.variant p{color:var(--muted);font-size:.92rem}
/* Uhrzeit und Auftrittsart stehen in ZWEI eigenen Spalten, beide linksbuendig,
   ohne Trennpunkt dazwischen.
   Der Haken dabei: Frueher war jedes <li> ein eigenes Raster. Dann richten sich
   die Spalten NICHT aneinander aus — eine breite Angabe wie "Gluecksmoment"
   schiebt die Uhrzeit derselben Zeile nach links, waehrend die "Solo Cover"-
   Zeilen weiter rechts stehen. Genau das sah unordentlich aus.
   Loesung: Die Liste selbst ist das Raster, die Zeilen uebernehmen dessen
   Spalten per subgrid. Damit teilen sich alle Zeilen dieselben Spalten und die
   Uhrzeiten stehen exakt untereinander. Das <li> bleibt dabei ein eigener
   Kasten — anders als bei display:contents, sonst waere die Trennlinie weg.
   Fuer Browser ohne subgrid stehen feste Breiten als Rueckfalloption; die
   richten sich auch aus, nur weniger sparsam. */
.dates{list-style:none;margin:2rem auto 2.5rem;max-width:820px;display:grid;grid-template-columns:96px 1fr auto auto;column-gap:1.4rem}
.dates li{display:grid;grid-column:1/-1;grid-template-columns:96px 1fr 60px 140px;column-gap:1.4rem;align-items:center;padding:1rem .4rem;border-bottom:1px solid var(--line)}
@supports(grid-template-columns:subgrid){.dates li{grid-template-columns:subgrid}}
/* nowrap, damit "Do 02.04." nie in "Do" und "02.04." zerfaellt. Die Anzeigeschrift
   hat KEINE gleich breiten Ziffern: dieselbe Angabe braucht je nach Zahl 61 bis
   69 px. Vorher war die Spalte auf dem Handy 64 px breit — damit brach etwa die
   Haelfte der Zeilen um, die andere nicht. Das sah zufaellig aus, war aber nur
   die Ziffernbreite. Wer die Spaltenbreite anfasst: unter 70 px faengt es
   wieder an. */
.dates__date{font-family:var(--display);font-weight:600;font-size:1.1rem;color:var(--gold);white-space:nowrap}
.dates__info{font-size:.95rem}
.dates__info a{color:inherit;text-decoration:underline;text-decoration-color:rgba(245,166,35,.45);text-underline-offset:3px;transition:color .15s ease,text-decoration-color .15s ease}
.dates__info a:hover{color:var(--gold);text-decoration-color:var(--gold)}
.dates__time,.dates__art{color:var(--muted);font-size:.88rem;white-space:nowrap}

/* Video */
.video{position:relative;width:100%;max-width:860px;margin:2rem auto 0;aspect-ratio:16/9;border-radius:14px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.45)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Galerie */
.galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:2.5rem}
.galerie img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;cursor:pointer;transition:transform .2s ease,filter .2s ease;filter:brightness(.92)}
.galerie img:hover{transform:scale(1.03);filter:brightness(1.05)}
.credits{color:var(--muted);font-size:.85rem;text-align:center;max-width:820px;margin:2.5rem auto 0;line-height:1.9}

/* Presse */
.presse{display:grid;grid-template-columns:.9fr 1.1fr;gap:3rem;align-items:center}
.presse__img img{border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.45);margin-inline:auto;max-height:560px;width:auto}

/* Kontakt */
.kontakt{display:grid;grid-template-columns:1fr 1.1fr;gap:3rem;align-items:start}
.kontakt__direct{margin-top:1.3rem;color:var(--muted)}
.kontakt__direct a{color:var(--gold)}
.form{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:2rem}
.form__row{margin-bottom:1rem}
.form label{display:block;font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600}
.form input,.form select,.form textarea{width:100%;margin-top:.4rem;background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:.7rem .9rem;color:var(--text);font-family:var(--body);font-size:.95rem}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--gold)}
.form .btn{width:100%;margin-top:.5rem;border:0}
/* Variante als Chips statt Auswahlliste. Eine <select>-Liste zeichnet jedes
   System selbst — auf dem Mac grauer Kasten mit blauem Pfeil — und liess sich
   deshalb nie an die uebrigen Felder angleichen.
   Kein :has() und kein appearance:none, nur der Geschwister-Wahlschalter
   (input:checked + span). Der laeuft auch in aelteren Browsern.
   Der Radioknopf selbst wird NICHT mit display:none entfernt, sonst waere das
   Feld weder mit der Tabulatortaste noch mit den Pfeiltasten erreichbar. Er
   liegt unsichtbar an Ort und Stelle, sichtbar ist das <span> daneben. */
.form__wahl{border:0;padding:0;margin:0;min-width:0}
.form__wahl legend{padding:0;font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600}
.form__chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.55rem}
.form .chip{display:inline-flex;margin:0;cursor:pointer}
.form .chip input{position:absolute;width:1px;height:1px;margin:0;opacity:0}
.form .chip span{display:inline-flex;align-items:center;gap:.5rem;background:var(--bg);
  border:1px solid var(--line);border-radius:999px;padding:.55rem 1.05rem;
  font-size:.9rem;font-weight:500;text-transform:none;letter-spacing:0;color:var(--muted);
  transition:border-color .15s ease,color .15s ease,background .15s ease}
.form .chip span::before{content:"";width:.8rem;height:.8rem;flex:none;border-radius:50%;
  border:1.5px solid var(--line);transition:border-color .15s ease,background .15s ease}
.form .chip:hover span{border-color:rgba(245,166,35,.5);color:var(--text)}
.form .chip input:checked+span{border-color:var(--gold);color:var(--text);background:rgba(245,166,35,.1)}
.form .chip input:checked+span::before{border-color:var(--gold);background:var(--gold)}
/* Sichtbarer Rahmen bei Bedienung ueber die Tastatur — ohne ihn waere nicht zu
   erkennen, auf welchem Knopf man gerade steht. */
.form .chip input:focus-visible+span{outline:2px solid var(--gold);outline-offset:2px}
/* Erklaerung zur gewaehlten Variante. Ohne sie muesste man zum Nachlesen erst
   wieder hoch zu "Auftritte 2026" scrollen.
   min-height sind GENAU zwei Zeilen (2 x line-height 1.5 = 3em). Damit springt
   das Formular beim Umschalten nicht, denn die Texte sind verschieden lang und
   brechen auf schmalen Schirmen um. Wer einen laengeren Text einsetzt, der auf
   drei Zeilen geht, muss diesen Wert mitziehen — sonst wackelt der Absenden-
   Knopf beim Umschalten. */
.form__erklaerung{margin-top:.7rem;min-height:3em;font-size:.85rem;line-height:1.5;color:var(--muted)}
/* Honigtopf: absichtlich NICHT mit display:none versteckt — danach suchen die
   besseren Spam-Programme und lassen das Feld dann leer. Aus dem Bild
   geschoben fällt es ihnen seltener auf. */
.honigtopf { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

.form__note{font-size:.78rem;color:var(--muted);margin-top:.9rem;text-align:center}

/* Footer */
.footer{background:#0f0c0a;padding:3rem 0;border-top:1px solid var(--line)}
.footer__inner{text-align:center}
.footer__love{font-family:var(--display);text-transform:uppercase;letter-spacing:.05em;font-size:1.5rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:1.2rem}
.footer__links{list-style:none;display:flex;gap:1.6rem;justify-content:center;flex-wrap:wrap;margin-bottom:1.2rem}
.footer__links a{color:var(--muted);font-size:.9rem}
.footer__links a:hover{color:var(--gold)}
.footer__copy{color:#6f6459;font-size:.82rem}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(8,6,5,.94);display:none;align-items:center;justify-content:center;padding:2rem}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw;max-height:88vh;border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.7)}
.lightbox__close{position:absolute;top:1.2rem;right:1.6rem;background:none;border:0;color:#fff;font-size:2.6rem;line-height:1;cursor:pointer;opacity:.8}
.lightbox__close:hover{opacity:1}

/* Responsive */
@media(max-width:860px){
  .section{padding:4.5rem 0}
  .nav__burger{display:flex}
  .nav__links{position:fixed;top:0;right:0;height:100vh;width:min(280px,80vw);flex-direction:column;align-items:flex-start;justify-content:center;gap:1.6rem;padding:2rem 2.4rem;background:#141210;border-left:1px solid var(--line);transform:translateX(100%);transition:transform .3s ease}
  .nav__links.open{transform:translateX(0)}
  .nav__burger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav__burger.active span:nth-child(2){opacity:0}
  .nav__burger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .hero{background-attachment:scroll}
  .ueber,.presse,.kontakt{grid-template-columns:1fr;gap:2rem}
  /* Einspaltig: die feste Platzierung aus der Zweispalten-Ansicht wieder
     aufheben, sonst entsteht hier eine zweite, leere Spalte. Reihenfolge wie
     bisher — erst das Foto, dann Ueberschrift und Text. */
  .ueber__kopf,.ueber__photo,.ueber__text{grid-column:1;grid-row:auto}
  .ueber__photo{order:-1}
  .presse__img{order:-1}
  .variants{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){
  .variants,.stats{grid-template-columns:1fr}
  /* Schmaler Schirm: Datum links, Ort daneben, darunter Uhrzeit und Art
     nebeneinander. Die Liste ist hier kein Raster mehr, also auch kein subgrid
     — jede Zeile steht wieder fuer sich. */
  .dates{display:block}
  .dates li{grid-template-columns:80px auto 1fr;column-gap:.8rem;row-gap:.35rem}
  .dates__info{grid-column:2/-1}
  .dates__time{grid-column:2;color:var(--gold)}
  .dates__art{grid-column:3;color:var(--gold)}
}