/* ============================================================
   MORTHSGAUDI — "NACHTPLAKAT"
   ------------------------------------------------------------
   Grundsatz: null Rundungen, Typo traegt die Seite, Blau als
   gedruckte Flaeche, Rot nur als Signal. Hintergrund #0E0E0E,
   damit die Gluehbirnen das einzig Warme im Bild bleiben.
   ============================================================ */

:root{
  --schwarz:   #0E0E0E;
  --tief:      #131313;
  --stein:     #1A1A1A;

  --ink:       #F4F1EC;
  --dim:       #A9A39A;
  --faint:     #8A847B;   /* 5,21:1 — 11px-Versalien sind kleiner Text */

  --linie:     rgba(244,241,236,.14);
  --linie-2:   rgba(244,241,236,.28);

  /* Blau als Flaeche, nie als Schrift: #0A34FF auf #0E0E0E
     ergibt nur 2,71:1 und ist damit unlesbar. */
  --blau:      #0A34FF;
  --blau-hell: #5C75FF;   /* 5,00:1 — nah am Markenblau, wirkt wie Druckfarbe */
  --rot:       #E30613;   /* 3,95:1 — nur fuer grosse Zahlen und Signale */

  --warm:      #FFC773;
  --warm-kern: #FFE9C4;

  --ease: cubic-bezier(.16,.84,.44,1);
  --med:  .3s;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--schwarz);
  color:var(--ink);
  font-family:"Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  overflow-x:clip;
}

/* Feines Filmkorn. Nimmt dem Dunkel das Digitale. */
body::after{
  content:""; position:fixed; inset:0; z-index:90; pointer-events:none;
  opacity:.055; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

.shell{ width:min(1320px, 100% - clamp(28px,6vw,96px)); margin-inline:auto; }

/* ============================================================
   TYPOGRAFIE
   ============================================================ */
.xxl{
  font-size:clamp(44px, 9.2vw, 132px);
  font-weight:900;
  /* WICHTIG: 0,96 statt 0,87.
     Deutsche Versalumlaute brauchen Kopfraum. Das Ü in "FÜLLT"
     ragt rund 0,93 em ueber die Grundlinie. Bei Zeilenhoehe 0,87
     ist der Grundlinienabstand kleiner als das Ü hoch ist, die
     Punkte stossen also zwangslaeufig in die Zeile darueber.
     Das ist keine Geschmacksfrage, das ist Geometrie. */
  line-height:.96;
  letter-spacing:-.045em; text-transform:uppercase;
  margin:0;
}
.xl{
  font-size:clamp(30px, 5.8vw, 84px);
  font-weight:900; line-height:.98;
  letter-spacing:-.04em; text-transform:uppercase;
  margin:0;
}
p.text{
  font-size:clamp(15px,1.55vw,19px);
  line-height:1.62; color:var(--dim);
  max-width:56ch; margin:0 0 1.1em;
}
p.text strong{ color:var(--ink); font-weight:700; }
a{ color:var(--blau-hell); }

/* ============================================================
   GLÜHBIRNEN-LICHTERKETTE
   ------------------------------------------------------------
   Echte Edison-Birnen: Fassung mit Gewinderillen, birnenfoermiger
   Glaskolben, Gluehdraht im Inneren, Lichtschein aus dem Draht.

   Zwei Flackerarten nebeneinander:
   - die Mehrheit flackert nur minimal, wie eine echte Kette
   - einzelne Birnen gehen wirklich aus und wieder an
   Das ist der Unterschied zu Christbaumblinken: es passiert
   nicht im Takt und nicht bei allen gleichzeitig.
   ============================================================ */
.kette{
  /* Haengt tiefer und unter der Kopfleiste, damit sie die
     oberste Zeile nicht ueberdeckt. */
  position:absolute; left:0; right:0; top:66px;
  z-index:8; pointer-events:none;
  transform-origin:50% 0;
  animation:kette-einschwingen 3s var(--ease) .2s both;
}
.kette svg{ display:block; width:100%; height:auto; overflow:visible; }

@keyframes kette-einschwingen{
  0%   { transform:translateY(-58px) rotate(-1.4deg); }
  38%  { transform:translateY(2px)   rotate(.85deg); }
  62%  { transform:translateY(-3px)  rotate(-.42deg); }
  82%  { transform:translateY(1px)   rotate(.18deg); }
  100% { transform:none; }
}

/* Grundflackern: kurzes Zucken, dann wieder ruhig */
@keyframes flackern{
  0%, 41%   { opacity:1; }
  43%       { opacity:.9; }
  45%       { opacity:.66; }
  47%       { opacity:.99; }
  50%       { opacity:.74; }
  53%, 100% { opacity:1; }
}
/* Aussetzer: die Birne geht wirklich aus, glimmt nach und kommt
   langsam zurueck. Genau so verhaelt sich eine Gluehwendel, sie
   ist traege und schaltet nicht hart. */
@keyframes aussetzer{
  0%, 26%  { opacity:1; }
  30%      { opacity:.48; }
  34%      { opacity:.05; }
  47%      { opacity:.05; }
  51%      { opacity:.26; }
  57%      { opacity:.8; }
  62%,100% { opacity:1; }
}
.faden, .schein, .halo{ animation:flackern 8s ease-in-out infinite; transform-origin:center; }
.halo{ animation:flackern 8s ease-in-out infinite, atmen 6s ease-in-out infinite; }
.aus .faden, .aus .schein{ animation:aussetzer 11s ease-in-out infinite; }
.aus .halo{ animation:aussetzer 11s ease-in-out infinite, atmen 6s ease-in-out infinite; }
@keyframes atmen{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.09); } }

.kette-innen{
  transform:translateY(calc(var(--wippe, 0) * 1px));
  transition:transform .55s var(--ease);
}

@media (prefers-reduced-motion: reduce){
  .kette{ animation:none; }
  .faden, .schein, .halo,
  .aus .faden, .aus .schein, .aus .halo{ animation:none; }
  .kette-innen{ transition:none; transform:none; }
  .auf{ opacity:1 !important; transform:none !important; }
}

/* ============================================================
   KOPFLEISTE
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:70;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:18px clamp(14px,3vw,48px);
  transition:background var(--med), border-color var(--med);
  border-bottom:1px solid transparent;
}
.nav.fest{
  background:rgba(14,14,14,.9);
  backdrop-filter:blur(18px) saturate(120%);
  border-bottom-color:var(--linie);
}
/* Der Logo-Link umschliesst nur das Bild und war dadurch genau
   so hoch wie dieses. Mit Polsterung wird die Tippflaeche 44px. */
.nav > a{ display:flex; align-items:center; padding:9px 0; }
.nav img{ height:26px; width:auto; display:block; }
.nav-links{ display:flex; gap:clamp(16px,2.4vw,36px); }
.nav-links a{
  color:var(--ink); text-decoration:none;
  font-size:10.5px; font-weight:800; letter-spacing:.26em; text-transform:uppercase;
  opacity:.7; transition:opacity var(--med);
  position:relative;
  /* Polsterung oben und unten, damit die Tippflaeche 42px hoch
     ist statt nur 16px. */
  padding:13px 0;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:10px; height:1px;
  background:var(--ink); transition:right .34s var(--ease);
}
.nav-links a:hover{ opacity:1; }
.nav-links a:hover::after{ right:0; }

/* ============================================================
   KOPFBEREICH
   ============================================================ */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(126px,15vw,158px) 0 clamp(30px,4vw,56px);
  overflow:hidden; isolation:isolate;
}
.hero-bild{
  position:absolute; inset:0; z-index:0;
  background:url("../img/hero.jpg") center 38% / cover no-repeat;
  /* Entsaettigung steckt im Bild, hier nur noch die Abdunklung.
     Ein grayscale-Filter auf vollflaechigem Element kostet auf
     dem Handy beim Scrollen spuerbar Rechenzeit. */
  filter:brightness(.5);
  transform:scale(1.04);
}
.hero-schleier{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to bottom, rgba(14,14,14,.92) 0%, rgba(14,14,14,.30) 34%, rgba(14,14,14,.86) 76%, var(--schwarz) 100%),
    linear-gradient(to right, rgba(14,14,14,.78) 0%, transparent 62%);
}
.hero .shell{ position:relative; z-index:6; }
/* Der blaue Block liegt in der Randspalte. Damit nichts an ihm
   klebt, bekommt der ganze Kopfinhalt Abstand, nicht nur die
   untere Zeile. Vorher klebte am Desktop der Satz unten und am
   Handy das Logo oben. */
.hero .shell > *{ padding-left:clamp(14px,1.8vw,26px); }

/* Blauer Druckblock, exakt so breit wie der Aussenrand des
   Rasters. So bleibt er eine randlose Flaeche, ohne je in die
   Schrift zu schneiden. */
.hero-block{
  position:absolute; z-index:2; left:0; bottom:0;
  /* Exakt der Seitenrand, ohne Mindestbreite. Eine Mindestbreite
     war am Handy breiter als der Rand und schob sich unter den Text. */
  width:calc((100% - min(1320px, 100% - clamp(28px,6vw,96px))) / 2);
  height:52%;
  background:var(--blau);
}

.hero-kopf{ display:flex; align-items:flex-end; gap:20px; margin-bottom:clamp(22px,3.4vw,44px); }
.hero-marke{ width:clamp(180px,22vw,290px); height:auto; display:block; }
.hero .xxl span{ display:block; }
.hero .xxl .b{ color:var(--blau-hell); }

.hero-unten{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:clamp(20px,4vw,60px);
  margin-top:clamp(26px,4vw,52px);
  padding-top:22px; border-top:1px solid var(--linie);
}
.hero-ort{
  display:flex; align-items:center; gap:14px; margin:0;
  font-size:clamp(12px,1.35vw,16px); font-weight:800;
  letter-spacing:.2em; text-transform:uppercase; color:var(--dim);
  white-space:nowrap;
}
.hero-ort i{ width:26px; height:2px; background:var(--blau); flex:none; }

/* Flache Bildschirme: viele Laptops haben nur 768 bis 800 Pixel
   Hoehe. Ohne diese Abfrage wird der Satz unter der Schlagzeile
   mitten im Wort abgeschnitten. Die Abfrage geht ueber die Hoehe,
   nicht ueber die Breite, weil genau die das Problem ist. */
@media (min-width:701px) and (max-height:880px){
  .hero{ padding-top:clamp(104px,12vw,128px); padding-bottom:30px; }
  .hero .xxl{ font-size:clamp(44px,7.4vw,104px); }
  .hero-marke{ width:clamp(170px,18vw,232px); }
  .hero-kopf{ margin-bottom:24px; }
  .hero-unten{ margin-top:26px; padding-top:18px; }
}

/* ============================================================
   ABSCHNITTSKOPF
   ------------------------------------------------------------
   Die Nummer stand vorher winzig neben dem Titel und sah aus wie
   ein Versehen. Jetzt eigene Zeile mit blauem Strich: lesbar und
   erkennbar gewollt.
   ============================================================ */
section{ position:relative; padding:clamp(58px,7vw,112px) 0; }

.kopf{ margin-bottom:clamp(26px,3.6vw,52px); }
.kopf .nr{
  display:flex; align-items:center; gap:14px;
  font-size:12.5px; font-weight:900; letter-spacing:.28em;
  color:var(--blau-hell); margin-bottom:16px;
  font-variant-numeric:tabular-nums;
}
.kopf .nr::after{
  content:""; height:2px; width:clamp(34px,5vw,74px); background:var(--blau);
}

.statement{ border-left:4px solid var(--blau); padding-left:clamp(20px,3vw,44px); }
.zwei{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,5vw,90px); align-items:start; }

/* ============================================================
   NÄCHSTES FEST
   ============================================================ */
.termin{ border-top:1px solid var(--linie-2); }
.termin-zeile{
  display:grid;
  /* max-content statt Prozente: die Datumsspalte ist immer genau
     so breit wie das Datum. Mit festen Prozenten lief das Datum
     in die Titelspalte und ueberdeckte den Titel. */
  grid-template-columns:max-content 1fr max-content;
  gap:clamp(18px,3vw,52px);
  align-items:start;
  padding:clamp(30px,4.6vw,64px) 0;
  border-bottom:1px solid var(--linie);
}
.termin-datum{
  font-size:clamp(30px,4.1vw,60px); font-weight:900; white-space:nowrap;
  line-height:.9; letter-spacing:-.05em;
  font-variant-numeric:tabular-nums;
}
.termin-datum small{
  display:block; font-size:clamp(13px,1.5vw,19px); font-weight:800;
  letter-spacing:.12em; color:var(--ink); margin-top:14px; text-transform:uppercase;
}
.termin-titel{ font-size:clamp(23px,3.5vw,50px); font-weight:900;
  letter-spacing:-.035em; line-height:1; text-transform:uppercase; margin:0 0 18px; }
.termin-info{ display:flex; flex-wrap:wrap; gap:10px 26px; margin:0 0 26px; }
.termin-info span{
  font-size:clamp(12.5px,1.35vw,16px); font-weight:700; letter-spacing:.04em;
  color:var(--dim);
}
.termin-info span b{ color:var(--ink); font-weight:900; }

/* Countdown: Zahlen in Rot. Ein Countdown ist genau der Moment,
   an dem Rot als Signal seine Berechtigung hat. */
.countdown{ display:flex; gap:clamp(14px,2.2vw,28px); }
.countdown div{ min-width:56px; }
.countdown b{
  display:block; font-size:clamp(26px,3.3vw,42px); font-weight:900;
  font-variant-numeric:tabular-nums; line-height:1; letter-spacing:-.03em;
  color:var(--rot);
}
.countdown span{
  display:block; margin-top:9px;
  font-size:clamp(10px,1.05vw,12px); font-weight:800; letter-spacing:.2em;
  text-transform:uppercase; color:var(--dim);
}

/* ============================================================
   TICKET-KNOPF
   ------------------------------------------------------------
   Statt eines gewoehnlichen Kastens ein abgerissener Ticket-
   abschnitt: Perforation links und rechts, gestrichelte Abriss-
   kante vor dem Pfeil. Die Aussparungen sind Kreise in Hinter-
   grundfarbe, das funktioniert in jedem Browser.
   ============================================================ */
.ticket{
  display:inline-flex; align-items:center; gap:16px;
  padding:17px 32px; position:relative;
  background:var(--blau); color:#fff; text-decoration:none;
  font-size:clamp(12px,1.2vw,14px); font-weight:900;
  letter-spacing:.2em; text-transform:uppercase;
  transition:background var(--med);
}
.ticket::before, .ticket::after{
  content:""; position:absolute; top:50%; width:20px; height:20px;
  border-radius:50%; background:var(--schwarz); transform:translateY(-50%);
}
.ticket::before{ left:-10px; }
.ticket::after{ right:-10px; }
.ticket .ab{
  border-left:2px dashed rgba(255,255,255,.55); padding-left:16px;
  transition:transform var(--med);
}
.ticket:hover{ background:#0b2ad6; }
.ticket:hover .ab{ transform:translateX(5px); }

/* Zweitknopf: scharfes Rechteck, fuellt sich von links */
.btn{
  display:inline-flex; align-items:center; gap:14px;
  padding:15px 28px; position:relative; overflow:hidden;
  border:1px solid var(--linie-2); background:transparent;
  color:var(--ink); text-decoration:none;
  font-size:11.5px; font-weight:900; letter-spacing:.22em; text-transform:uppercase;
  transition:color var(--med), border-color var(--med);
}
.btn::before{
  content:""; position:absolute; inset:0; background:var(--blau);
  transform:scaleX(0); transform-origin:left; z-index:-1;
  transition:transform .42s var(--ease);
}
.btn:hover{ color:#fff; border-color:var(--blau); }
.btn:hover::before{ transform:scaleX(1); }

/* ============================================================
   BISHER — pro Fest
   ============================================================ */
.fest-block{ margin-bottom:clamp(48px,7vw,110px); }
.fest-block:last-child{ margin-bottom:0; }

.fest-kopf{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 22px;
  padding-bottom:16px; margin-bottom:clamp(12px,1.6vw,20px);
  border-bottom:1px solid var(--linie);
}
.fest-kopf h3{
  font-size:clamp(22px,3vw,42px); font-weight:900; text-transform:uppercase;
  letter-spacing:-.035em; margin:0; line-height:1;
}
.fest-kopf .wann{
  font-size:11.5px; font-weight:800; letter-spacing:.24em;
  text-transform:uppercase; color:var(--blau-hell);
}

/* Drei grosse Bilder im Hochformat, damit keine Gesichter
   angeschnitten werden. */
.gross-drei{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(8px,1vw,16px); }
.gross-drei .rahmen{ aspect-ratio:3/4; }

.rahmen{
  position:relative; overflow:hidden; background:var(--stein);
  display:block;
  /* <figure> hat im Browser voreingestellt 1em/40px Aussenabstand.
     Ohne margin:0 sind die Bilder schmaler als der Text daneben. */
  margin:0;
}
.rahmen img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(.88) contrast(1.08) brightness(.78);
  transition:filter .8s var(--ease), transform 1.1s var(--ease);
}
.rahmen:hover img{ filter:grayscale(0) contrast(1.02) brightness(.96); transform:scale(1.04); }
.rahmen figcaption{
  position:absolute; left:0; bottom:0; z-index:2;
  padding:9px 15px; background:var(--schwarz);
  font-size:9.5px; font-weight:800; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink);
}
.rahmen::after{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:var(--blau); transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease); z-index:3;
}
.rahmen:hover::after{ transform:scaleX(1); }

/* Streifen mit weiteren Eindruecken, waagerecht scrollbar */
.streifen-zeile{ display:flex; align-items:center; gap:16px; margin-top:clamp(10px,1.4vw,18px); }
.streifen{
  display:flex; gap:8px; overflow-x:auto; flex:1;
  scrollbar-width:none; -ms-overflow-style:none;
  scroll-snap-type:x proximity; padding-bottom:2px;
}
.streifen::-webkit-scrollbar{ display:none; }
.streifen button{
  flex:none; width:clamp(84px,9vw,124px); aspect-ratio:1; padding:0;
  border:0; background:var(--stein); cursor:pointer; overflow:hidden;
  position:relative; scroll-snap-align:start;
}
.streifen button img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(1) brightness(.62);
  transition:filter .45s var(--ease), transform .6s var(--ease);
}
.streifen button:hover img, .streifen button:focus-visible img{
  filter:grayscale(0) brightness(.95); transform:scale(1.07);
}
.streifen button:focus-visible{ outline:2px solid var(--blau-hell); outline-offset:2px; }
.streifen-zaehler{
  flex:none; font-size:10.5px; font-weight:800; letter-spacing:.2em;
  text-transform:uppercase; color:var(--faint); white-space:nowrap;
}

/* ============================================================
   BILDBETRACHTER
   ============================================================ */
.viewer{
  position:fixed; inset:0; z-index:100; display:none;
  background:rgba(8,8,8,.97); backdrop-filter:blur(6px);
  align-items:center; justify-content:center;
}
.viewer.offen{ display:flex; }
.viewer img{ max-width:min(1100px, 92vw); max-height:80vh; display:block; object-fit:contain; }
.viewer-zu, .viewer-nav{
  position:absolute; background:transparent; border:1px solid var(--linie-2);
  color:var(--ink); cursor:pointer; font-size:17px; line-height:1;
  width:46px; height:46px; display:grid; place-items:center;
  transition:background var(--med), border-color var(--med);
}
.viewer-zu:hover, .viewer-nav:hover{ background:var(--blau); border-color:var(--blau); color:#fff; }
.viewer-zu{ top:20px; right:20px; }
.viewer-nav.vor{ right:20px; top:50%; transform:translateY(-50%); }
.viewer-nav.zurueck{ left:20px; top:50%; transform:translateY(-50%); }
.viewer-stand{
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
  font-size:11px; font-weight:800; letter-spacing:.22em; color:var(--faint);
  font-variant-numeric:tabular-nums;
}

/* ============================================================
   KONTAKT
   ============================================================ */
.wege{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,26px); }
.weg{
  background:var(--stein); padding:clamp(24px,3vw,40px);
  display:flex; flex-direction:column;
  border-top:3px solid var(--linie);
  transition:border-color var(--med);
}
.weg:hover{ border-top-color:var(--blau); }
.weg h3{
  font-size:clamp(19px,2.2vw,28px); font-weight:900; text-transform:uppercase;
  letter-spacing:-.03em; margin:0 0 12px; line-height:1;
}
.weg p{ font-size:14.5px; line-height:1.6; color:var(--dim); margin:0 0 auto; padding-bottom:24px; }
.weg .btn, .weg .ticket{ align-self:flex-start; }
/* Die Perforation muss die Farbe des Untergrunds haben */
.weg .ticket::before, .weg .ticket::after{ background:var(--stein); }

/* ============================================================
   FUSS
   ============================================================ */
footer{ border-top:1px solid var(--linie); padding:clamp(40px,5vw,72px) 0 clamp(34px,4vw,54px); }
.fuss{ display:grid; grid-template-columns:1fr auto; gap:28px; align-items:end; }
.fuss-marke{ width:180px; height:auto; display:block; margin-bottom:18px; }
.fuss nav{ display:flex; flex-wrap:wrap; gap:10px 24px; }
.fuss a, .fuss span{
  font-size:10.5px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:var(--faint); text-decoration:none;
}
/* Fusszeilen-Links waren 13px hoch. Mit min-height sind es 40px,
   ohne dass sich die Schriftgroesse aendert. */
.fuss a{ display:inline-flex; align-items:center; min-height:40px; }
.fuss a:hover{ color:var(--ink); }

/* ============================================================
   EINBLENDEN
   ============================================================ */
.auf{ opacity:0; transform:translateY(26px); transition:opacity .85s var(--ease), transform .85s var(--ease); }
.auf.da{ opacity:1; transform:none; }

/* ============================================================
   WHATSAPP-BAND
   ------------------------------------------------------------
   Der blaue Balken war durch einen Fehler beim Umbau der
   Medienabfragen komplett verschwunden. Wiederhergestellt und
   deutlich verstaerkt: Michael wollte den Hinweis groesser und
   auffaelliger.

   Bewusst ohne WhatsApp-Gruen. Die Marke hat drei Farben, eine
   vierte wuerde das Plakat zerreissen.
   Weiss auf #0A34FF ergibt 6,36:1, das ist sauber lesbar.
   ============================================================ */
.kanal{
  background:var(--blau); color:#fff;
  padding:clamp(48px,6.5vw,100px) 0;
  position:relative; overflow:hidden;
}
/* Schwach angedeutete Lichterkette im Hintergrund des Balkens,
   damit die Flaeche nicht leer wirkt. */
.kanal::after{
  content:""; position:absolute; right:-4%; top:-30%;
  width:52%; height:160%; opacity:.09; pointer-events:none;
  background:radial-gradient(circle at 30% 40%, #fff 0 2px, transparent 3px),
             radial-gradient(circle at 62% 22%, #fff 0 2px, transparent 3px),
             radial-gradient(circle at 84% 58%, #fff 0 2px, transparent 3px);
  background-size:100% 100%;
}
.kanal-innen{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(26px,5vw,80px); align-items:center;
  position:relative; z-index:2;
}

/* Der Hinweis als schwarzer Stempel auf der blauen Flaeche.
   Vorher graue Kleinschrift, dann ein weisser Aufkleber, beides
   zu leise. Schwarz auf Blau ist der hoechste Kontrast, den die
   Palette hergibt. */
.kanal-marke{ margin:0 0 clamp(18px,2.4vw,28px); }
.kanal-marke span{
  display:inline-block; background:var(--schwarz); color:#fff;
  padding:clamp(10px,1.1vw,14px) clamp(16px,1.8vw,24px);
  transform:rotate(-1.8deg);
  font-size:clamp(15px,1.7vw,22px); font-weight:900;
  letter-spacing:.1em; text-transform:uppercase; line-height:1;
}
.kanal .xl{ color:#fff; }
.kanal-text p{
  font-size:clamp(15px,1.5vw,18px); line-height:1.6;
  color:rgba(255,255,255,.92); margin:0 0 28px; max-width:44ch;
}
/* Heller Knopf auf blauem Grund. Die Perforation muss die Farbe
   des Untergrunds tragen, sonst sieht man Kreise statt Kerben. */
.ticket.hell{ background:#fff; color:var(--blau); }
.ticket.hell .ab{ border-left-color:rgba(10,52,255,.4); }
.kanal .ticket::before, .kanal .ticket::after{ background:var(--blau); }
.ticket.hell:hover{ background:var(--schwarz); color:#fff; }
.ticket.hell:hover .ab{ border-left-color:rgba(255,255,255,.5); }

/* ============================================================
   RESERVIERUNGS-BLATT
   ------------------------------------------------------------
   Michael: "ich will nicht das Gefuehl haben, fuer
   Reservierungen geh ich lieber auf die Desktop-Version."

   Ein nackter mailto-Link ist am Telefon unangenehm: er oeffnet
   ein leeres Mailfenster und der Gast muss selbst formulieren.
   Stattdessen zwei Tipper: Anzahl waehlen, absenden. Die Mail
   ist dann fertig vorgeschrieben, inklusive Fest und Anzahl.

   Am Telefon faehrt das Blatt von unten hoch, am Rechner sitzt
   es in der Mitte.
   ============================================================ */
.blatt{
  position:fixed; inset:0; z-index:96; display:none;
  align-items:center; justify-content:center;
  background:rgba(8,8,8,.72); backdrop-filter:blur(5px);
}
.blatt.offen{ display:flex; }
.blatt-innen{
  background:var(--stein); border:1px solid var(--linie-2);
  width:min(460px, 100% - 32px); padding:clamp(24px,3vw,36px);
  position:relative;
  animation:blatt-auf .34s var(--ease) both;
}
@keyframes blatt-auf{ from{ opacity:0; transform:translateY(18px) } to{ opacity:1; transform:none } }
.blatt-zu{
  position:absolute; top:10px; right:10px; width:42px; height:42px;
  background:transparent; border:0; color:var(--dim); font-size:17px;
  cursor:pointer; display:grid; place-items:center;
}
.blatt-zu:hover{ color:var(--ink); }
.blatt h3{
  font-size:clamp(21px,2.4vw,28px); font-weight:900; text-transform:uppercase;
  letter-spacing:-.03em; margin:0 0 6px; line-height:1;
}
.blatt .wann{
  font-size:11.5px; font-weight:800; letter-spacing:.2em;
  text-transform:uppercase; color:var(--blau-hell); margin:0 0 24px;
}
.blatt .frage{
  font-size:12px; font-weight:800; letter-spacing:.2em;
  text-transform:uppercase; color:var(--dim); margin:0 0 12px;
}
.zahlen{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:26px; }
.zahlen button{
  padding:16px 0; background:transparent; border:1px solid var(--linie-2);
  color:var(--ink); font-family:inherit; font-size:16px; font-weight:900;
  cursor:pointer; transition:background var(--med), border-color var(--med), color var(--med);
}
.zahlen button:hover{ border-color:var(--ink); }
.zahlen button[aria-pressed="true"]{
  background:var(--blau); border-color:var(--blau); color:#fff;
}
.blatt .ticket{ width:100%; justify-content:center; }
.blatt .ticket::before, .blatt .ticket::after{ background:var(--stein); }

/* ============================================================
   GALERIE-PUNKTE
   Zeigen am Telefon, wie viele Bilder es gibt und wo man ist.
   Ohne sie wischt man ins Ungewisse.
   ============================================================ */
.punkte{ display:none; gap:6px; justify-content:center; margin-top:12px; }
.punkte i{
  width:6px; height:6px; background:var(--linie-2); flex:none;
  transition:background .3s var(--ease), width .3s var(--ease);
}
.punkte i.da{ background:var(--blau-hell); width:20px; }

/* ============================================================
   BÜHNE UND LADEBILD
   ------------------------------------------------------------
   Vorlage ist Michaels eigenes Foto: waagerechte Traverse mit
   X-Verstrebung, Scheinwerfer oben drauf. Beim Laden gehen sie
   nacheinander an, wie beim Lichtcheck vor dem Einlass.

   WICHTIG: Das Ladebild verschwindet auch OHNE JavaScript, weil
   die Ausblendung eine reine CSS-Animation ist. Sonst haette
   ein Skriptfehler die ganze Seite hinter einem schwarzen Bild
   begraben.
   ============================================================ */
#ladebild{
  position:fixed; inset:0; z-index:120; background:var(--schwarz);
  display:grid; place-items:center; padding:24px;
  animation:ladebild-weg .6s var(--ease) 1.7s forwards;
}
@keyframes ladebild-weg{
  to{ opacity:0; visibility:hidden; pointer-events:none; }
}
body.laedt{ overflow:hidden; }

.ladebild-innen{ width:min(780px, 94%); text-align:center; }
.ladebild-marke{
  width:min(300px, 54%); height:auto; display:block; margin:0 auto 6px;
  animation:marke-auf .8s var(--ease) .1s both;
}
@keyframes marke-auf{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }

.buehne{ width:100%; }
.buehne-svg{ width:100%; height:auto; display:block; overflow:visible; }

/* Die Scheinwerfer gehen der Reihe nach an. Die Verzoegerung
   setzt das Skript je Lampe, hier steht nur der Ablauf. */
.buehne-svg.an .kegel{ animation:kegel-an .55s var(--ease) both; }
@keyframes kegel-an{ from{ opacity:0 } to{ opacity:1 } }

.buehne-svg.an .linse{ animation:linse-an .55s var(--ease) both; }
@keyframes linse-an{ from{ opacity:.16 } to{ opacity:1 } }

/* Der Lichthof muss durchscheinend bleiben. Vorher endete seine
   Animation bei opacity:1 und hat damit die im SVG gesetzte
   Transparenz von 0,2 ueberschrieben. Ergebnis waren grelle
   Scheiben statt eines Schimmers. */
.buehne-svg.an .glut{ animation:glut-an .55s var(--ease) both; }
@keyframes glut-an{ from{ opacity:0 } to{ opacity:.26 } }

/* Fehlerseite: alles dunkel. Nur der mittlere Scheinwerfer
   flackert noch, als haette jemand vergessen ihn auszuschalten. */
.buehne-svg.aus .kegel{ opacity:0; }
.buehne-svg.aus .linse{ opacity:.14; }
.buehne-svg.aus .glut{ opacity:0; }
.buehne-svg.aus .lampe:nth-of-type(3) .linse{ animation:zucken 4.5s ease-in-out infinite; }
.buehne-svg.aus .lampe:nth-of-type(3) .glut{ opacity:.06; animation:zucken 4.5s ease-in-out infinite; }
.buehne-svg.aus .kegel:nth-of-type(3){ opacity:.1; animation:zucken 4.5s ease-in-out infinite; }
@keyframes zucken{
  0%, 62%  { opacity:.1; }
  64%      { opacity:.55; }
  66%      { opacity:.08; }
  69%      { opacity:.4; }
  72%,100% { opacity:.1; }
}

@media (prefers-reduced-motion: reduce){
  #ladebild{ display:none; }
  .buehne-svg.an .kegel, .buehne-svg.an .linse, .buehne-svg.an .glut{ animation:none; }
  .buehne-svg.aus .lampe .linse, .buehne-svg.aus .glut, .buehne-svg.aus .kegel{ animation:none; }
}

/* ============================================================
   HANDY-MENÜ
   ------------------------------------------------------------
   Auf dem Telefon gab es bisher gar keine Navigation, die
   Menuepunkte waren schlicht ausgeblendet. Jetzt ein Vollbild-
   menue mit grossen Zielen.
   ============================================================ */
.burger{
  display:none; width:46px; height:46px; padding:0;
  background:transparent; border:0; cursor:pointer;
  flex-direction:column; justify-content:center; gap:6px; align-items:flex-end;
}
.burger span{
  display:block; height:2px; background:var(--ink);
  transition:transform .34s var(--ease), opacity .2s var(--ease), width .34s var(--ease);
}
.burger span:nth-child(1){ width:26px; }
.burger span:nth-child(2){ width:19px; }
.burger span:nth-child(3){ width:26px; }
.burger.offen span:nth-child(1){ width:26px; transform:translateY(8px) rotate(45deg); }
.burger.offen span:nth-child(2){ opacity:0; }
.burger.offen span:nth-child(3){ width:26px; transform:translateY(-8px) rotate(-45deg); }

.menue{
  position:fixed; inset:0; z-index:65; background:var(--schwarz);
  display:flex; flex-direction:column; justify-content:center;
  padding:96px clamp(24px,7vw,48px) 48px;
  opacity:0; visibility:hidden; transform:translateY(-12px);
  transition:opacity .32s var(--ease), transform .32s var(--ease), visibility .32s;
}
.menue.offen{ opacity:1; visibility:visible; transform:none; }
.menue nav{ display:flex; flex-direction:column; }
.menue nav a{
  display:flex; align-items:baseline; gap:16px;
  padding:15px 0; color:var(--ink); text-decoration:none;
  font-size:clamp(30px,9vw,46px); font-weight:900; line-height:1;
  letter-spacing:-.04em; text-transform:uppercase;
  border-bottom:1px solid var(--linie);
}
.menue nav a em{
  font-size:12px; font-style:normal; font-weight:900;
  letter-spacing:.22em; color:var(--blau-hell); flex:none;
}
.menue nav a:active{ color:var(--blau-hell); }
.menue-mail{
  margin-top:34px; font-size:12px; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; color:var(--faint);
  text-decoration:none; align-self:flex-start;
  display:inline-flex; align-items:center; min-height:44px;
}
body.starr{ overflow:hidden; }

/* ============================================================
   UNTERE LEISTE (nur Telefon)
   ------------------------------------------------------------
   Die Reservierung bleibt dauerhaft in Daumenreichweite. Das
   ist am Telefon der wertvollste Platz, und genau so machen es
   Ticketseiten. Erscheint erst, wenn der Kopfbereich vorbei ist.
   ============================================================ */
.leiste{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:64;
  align-items:center; gap:14px;
  padding:11px 14px calc(11px + env(safe-area-inset-bottom));
  background:rgba(14,14,14,.94); backdrop-filter:blur(16px);
  border-top:1px solid var(--linie-2);
  transform:translateY(105%); transition:transform .34s var(--ease);
}
.leiste.da{ transform:none; }
.leiste-info{ flex:1; min-width:0; }
.leiste-info b{
  display:block; font-size:14px; font-weight:900; text-transform:uppercase;
  letter-spacing:-.02em; line-height:1.1;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.leiste-info span{
  display:block; margin-top:3px; font-size:10.5px; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
}
.leiste .ticket{ padding:13px 20px; font-size:11px; letter-spacing:.16em; flex:none; }
.leiste .ticket::before, .leiste .ticket::after{ background:var(--schwarz); }

/* ============================================================
   HANDY UND TABLET
   ============================================================ */
@media (max-width:900px){
  .zwei{ grid-template-columns:1fr; }
  .wege{ grid-template-columns:1fr; }
  .kanal-innen{ grid-template-columns:1fr; }
}

@media (max-width:700px){
  /* ==========================================================
     HANDY IST DIE HAUPTFASSUNG
     Rund 90 Prozent der Aufrufe kommen laut Michael vom Telefon.
     Deshalb ist das hier keine verkleinerte Desktopfassung,
     sondern eine eigene Loesung fuer den Daumen.
     ========================================================== */
  .nav-links{ display:none; }
  .burger{ display:flex; }
  .nav img{ height:21px; }
  .nav > a{ padding:12px 0; }
  .nav{ padding:12px 16px; }

  /* Platz fuer die untere Leiste, sonst verdeckt sie den Fuss */
  body{ padding-bottom:74px; }
  .leiste{ display:flex; }

  .hero{ min-height:88svh; padding-top:150px; }
  .hero-kopf{ margin-bottom:20px; }
  /* Etwas mehr Abstand zur blauen Flaeche als am Desktop, weil
     der Seitenrand am Telefon schmaler ist. */
  .hero .shell > *{ padding-left:18px; }
  .hero-ort{ font-size:12px; letter-spacing:.16em; }

  /* ---------- Nächstes Fest ----------
     Michael: "Silvester wirkt kleiner als das Datum, das macht
     keinen Sinn". Stimmt: der Titel stand auf 23px, das Datum
     auf 30px. Jetzt fuehrt der Titel und das Datum ordnet sich
     darunter ein. */
  .termin-zeile{ grid-template-columns:1fr; gap:18px; }
  .termin-titel{ font-size:34px; margin-bottom:12px; order:-1; }
  .termin-datum{ font-size:26px; line-height:1; }
  .termin-datum small{ font-size:13px; margin-top:8px; }
  .termin-info{ gap:8px 18px; margin-bottom:22px; }
  .countdown div{ min-width:0; flex:1; }
  .countdown b{ font-size:30px; }

  /* ---------- Kanal ---------- */
  .kanal{ padding:44px 0; }
  .kanal-marke span{ font-size:17px; padding:11px 16px; letter-spacing:.08em; }

  /* ---------- Bisher ----------
     Vorher lagen die drei grossen Bilder untereinander, das
     kostete rund drei Bildschirme pro Fest. Bei kuenftig mehr
     Festen waere die Seite endlos geworden.
     Jetzt eine Wischgalerie: ein Bild fuellt fast die Breite,
     das naechste lugt hervor und zeigt damit, dass es weitergeht.
     Hochformat statt 4:3, dadurch wird nichts mehr beschnitten. */
  .gross-drei{
    display:flex; gap:10px;
    overflow-x:auto; scroll-snap-type:x mandatory;
    scrollbar-width:none; -ms-overflow-style:none;
    /* Aus dem Raster ausbrechen, damit die Galerie am Rand
       weiterlaeuft statt abrupt zu enden. */
    margin-inline:-18px; padding-inline:18px;
  }
  .gross-drei::-webkit-scrollbar{ display:none; }
  .gross-drei .rahmen{
    flex:0 0 82%; aspect-ratio:3/4; scroll-snap-align:center;
  }
  .rahmen img{ filter:grayscale(.5) contrast(1.05) brightness(.86); }
  .rahmen figcaption{ font-size:10px; padding:8px 13px; }

  .punkte{ display:flex; }
  .fest-block{ margin-bottom:44px; }
  .fest-kopf{ padding-bottom:12px; }
  .streifen-zeile{ margin-inline:-18px; padding-inline:18px; }
  .streifen button{ width:76px; }
  .streifen-zaehler{ display:none; }

  /* ---------- Kontakt ----------
     Michael: "vielleicht wenns geht etwas verschlanken".
     Kompaktere Kacheln, kleinere Ueberschriften, weniger Polster. */
  .weg{ padding:22px 20px; }
  .weg h3{ font-size:20px; margin-bottom:9px; }
  .weg p{ font-size:14px; padding-bottom:18px; }
  .wege{ gap:10px; }

  .statement{ border-left-width:3px; }
  .fuss{ grid-template-columns:1fr; align-items:start; }

  .viewer img{ max-height:74vh; }
  .viewer-nav.vor{ right:10px; }
  .viewer-nav.zurueck{ left:10px; }
  .viewer-zu{ top:14px; right:14px; }
}

/* Sehr schmale Geraete */
@media (max-width:360px){
  .gross-drei .rahmen{ flex:0 0 88%; }
  .termin-titel{ font-size:29px; }
  .leiste .ticket{ padding:12px 15px; font-size:10px; letter-spacing:.12em; }
}

/* ============================================================
   VERLEIH — neuer Abschnitt 02, seit 14.09.2026
   Michael: Teller, Besteck, Hussen und Deko stehen zwischen den
   Festen im Lager und sollen verliehen werden.

   Aufbau bewusst wie die Reservierung: auswaehlen, absenden,
   fertige Mail. Kein Formular, kein Konto, keine fremde Software.
   ============================================================ */
.verleih-liste{
  display:grid; gap:1px; background:var(--linie);
  border:1px solid var(--linie);
  margin-top:clamp(30px,4.5vw,60px);
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.verleih-warnung{
  grid-column:1/-1; background:var(--stein); margin:0;
  padding:18px 22px; font-size:14px; color:var(--dim);
  border-left:3px solid var(--warm);
}
.verleih-warnung strong{ color:var(--ink); }
.verleih-warnung code{
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.92em;
  background:rgba(255,255,255,.07); padding:1px 5px;
}
.verleih-sache{
  background:var(--schwarz); padding:22px;
  display:flex; flex-direction:column; gap:14px;
  transition:background var(--med);
}
.verleih-sache.an{ background:var(--stein); }
.verleih-kopf b{ display:block; font-size:19px; letter-spacing:-.01em; }
.verleih-text{ display:block; margin-top:3px; font-size:13px; color:var(--faint); }
.verleih-zahlen{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.verleih-preis{ font-size:17px; font-weight:700; }
.verleih-preis small{ font-size:12px; font-weight:400; color:var(--faint); }
.verleih-preis i,.verleih-bestand i{ font-style:normal; color:var(--faint); font-size:13px; }
.verleih-bestand{ font-size:13px; color:var(--faint); }

.verleih-waehler{ display:flex; align-items:center; gap:10px; margin-top:auto; }
.verleih-waehler button{
  width:44px; height:44px; flex:0 0 44px;
  background:transparent; color:var(--ink);
  border:1px solid var(--linie); cursor:pointer;
  font-size:20px; line-height:1;
  transition:background var(--med), border-color var(--med);
}
.verleih-waehler button:hover{ background:var(--blau); border-color:var(--blau); }
.verleih-waehler output{
  min-width:44px; text-align:center;
  font-size:19px; font-weight:700; font-variant-numeric:tabular-nums;
}

.verleih-fuss{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:20px; margin-top:26px;
}
.verleih-summe{ display:flex; align-items:baseline; gap:14px; }
.verleih-summe-text{ font-size:14px; color:var(--dim); }
.verleih-summe strong{ font-size:clamp(20px,2.4vw,28px); font-variant-numeric:tabular-nums; }
.verleih-hinweis{ margin-top:18px; font-size:13px; color:var(--faint); }

@media (max-width:700px){
  .verleih-liste{ grid-template-columns:1fr; }
  .verleih-fuss{ flex-direction:column; align-items:stretch; }
  .verleih-fuss .ticket{ justify-content:center; }
}