/* ============================================================================
   Nur für die Kirmesseite. Das Gemeinsame steht in stil.css.
   Bildsprache direkt vom Plakat 2026: Riesenrad auf dem Limettenstrich,
   Möwen darüber.
   ========================================================================= */


section{padding-block:clamp(3rem,9vw,5rem)}
section > .wrap{display:flex;flex-direction:column;gap:clamp(1.25rem,3.5vw,1.75rem)}
h2{font-size:clamp(1.9rem,7vw,3rem);font-weight:800;letter-spacing:-.035em}
h3{font-size:1.1rem;font-weight:700}

/* ---------- Hero: die Plakatkomposition ---------- */
.hero{position:relative;overflow:hidden;padding-block:clamp(1.75rem,6vw,3rem) 0}
.titelblock{position:relative;z-index:3;margin-top:clamp(1.25rem,4vw,2rem)}
.zahl{display:block;font-family:var(--schrift-titel);font-weight:600;
  font-size:clamp(1.2rem,4.5vw,1.75rem);letter-spacing:-.01em;color:var(--muted)}
.titel{font-family:var(--schrift-titel);font-weight:800;margin:0;
  font-size:clamp(3.6rem,19vw,8.5rem);line-height:.88;letter-spacing:-.055em}
.titel .zeile1{display:block;color:var(--ink)}
.titel .zeile2{display:block;color:var(--gruen-titel)}   /* 3,5:1 — nur hier */
.termin{
  display:inline-block;margin-top:clamp(.9rem,2.5vw,1.25rem);
  font-family:var(--schrift-titel);font-weight:700;
  font-size:clamp(1.2rem,4.5vw,1.8rem);letter-spacing:-.02em;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.termin small{display:block;margin-top:.3rem;font-family:var(--schrift);
  font-weight:600;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted)}

/* Alle Maße hängen am Raddurchmesser, damit der Anschnitt auf jeder
   Bildschirmbreite derselbe Anteil bleibt.

   Auf schmalen Schirmen steht das Rad UNTER dem Titelblock: es lief sonst
   quer durch die Datumszeile, die dadurch unlesbar wurde. Erst ab 64rem,
   wo neben dem Text Platz ist, rückt es nach rechts und darf hochrutschen —
   dann entsteht die Überlappung vom Plakat, ohne Schrift zu kreuzen. */
.rad-buehne{--rad:clamp(19rem,92vw,34rem);
  position:relative;z-index:2;pointer-events:none;
  margin-top:calc(var(--rad) * .16);height:calc(var(--rad) * .78)}
.rad{position:absolute;left:50%;bottom:0;translate:-50% 0;
  width:var(--rad);height:auto;overflow:visible}
@media (min-width:52rem){
  .rad-buehne{--rad:30rem;margin-top:calc(var(--rad) * -.12)}
  .rad{left:auto;right:0;translate:0 0}
}
@media (min-width:64rem){
  .rad-buehne{--rad:38rem;margin-top:calc(var(--rad) * -.34)}
  .rad{left:auto;right:calc(50% - min(50% , 31rem));translate:0 0}
}
.rad .rim{fill:none;stroke:var(--schiefer);stroke-width:2}
.rad .rim-fein{fill:none;stroke:var(--schiefer);stroke-width:1;opacity:.45}
/* Gondeln klein und offen wie auf dem Plakat — gefüllte Kreise wirkten
   aus der Entfernung wie fette schwarze Punkte. Farbe und Füllung werden
   auf die Gruppe gesetzt und vererbt; die geklonten <use>-Inhalte sind
   über Selektoren nicht erreichbar. */
.rad .arm{color:var(--schiefer);fill:var(--grund)}
.rad .nabe{fill:var(--schiefer)}
.rad .mast{stroke:var(--schiefer);stroke-width:3.4;stroke-linecap:round;fill:none}
.dreher{transform-origin:200px 200px;animation:dreh 72s linear infinite}
@keyframes dreh{to{transform:rotate(360deg)}}
/* width:100% ist zwingend, nicht kosmetisch: ein <svg> ist ein ersetztes
   Element, "inset:auto 0 0 0" dehnt es NICHT. Ohne die Breitenangabe ergibt
   sich die Breite aus der Höhe mal Seitenverhältnis (1200:300) und bleibt bei
   1366 px stehen — auf breiteren Schirmen endete die grüne Fläche dort mit
   einer harten Kante und rechts blieb Weiß. */
.pinsel{position:absolute;inset:auto 0 0 0;width:100%;height:72%;z-index:0;
  fill:var(--gruen);opacity:.5}
.moewe{fill:none;stroke:var(--schiefer);stroke-width:2.2;stroke-linecap:round;
  opacity:.7;animation:gleiten 22s ease-in-out infinite}
.moewe.b{animation-duration:31s;animation-delay:-8s}
@keyframes gleiten{0%,100%{transform:translate(0,0)}50%{transform:translate(14px,-10px)}}
@media (prefers-reduced-motion:reduce){
  .dreher,.moewe{animation:none}
}

/* ---------- Countdown ---------- */
.countdown{background:var(--wash);border-block:1px solid var(--linie)}
/* Auf 1280 px wurden aus vier 1fr-Spalten vier 248-px-Felder, in denen die
   Zahlen so weit auseinanderstanden, dass sie nicht mehr als eine Uhr zu
   lesen waren. Ab 44rem stehen sie deshalb linksbündig beieinander. */
.zaehler{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(.5rem,3vw,1.5rem)}
@media (min-width:44rem){
  .zaehler{grid-template-columns:repeat(4,auto);justify-content:start;
    gap:clamp(1.5rem,5vw,3.5rem)}
}
.zaehler div{min-width:0}
.zaehler .wert{display:block;font-family:var(--schrift-titel);font-weight:800;
  font-size:clamp(2rem,10.5vw,4rem);line-height:.95;letter-spacing:-.05em;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.zaehler .einheit{display:block;margin-top:.35rem;font-size:.68rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted-auf-wash)}
.laeuft{display:inline-flex;align-items:center;gap:.55rem;font-weight:700;
  font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gruen-text);font-family:var(--schrift-titel)}
.puls{width:.55rem;height:.55rem;border-radius:50%;background:var(--gruen);
  animation:puls 2s ease-in-out infinite}
@keyframes puls{50%{opacity:.25;transform:scale(.7)}}
@media (prefers-reduced-motion:reduce){.puls{animation:none}}

/* ---------- Tickets ---------- */
.ticket-liste{display:grid;gap:1rem}
@media (min-width:44rem){.ticket-liste{grid-template-columns:1fr 1fr}}
.ticket{
  display:flex;flex-direction:column;gap:.55rem;
  border:1px solid var(--linie);border-top:3px solid var(--gruen);
  border-radius:var(--r-lg);background:var(--grund);
  padding:clamp(1.25rem,4vw,1.6rem);
}
.ticket .wann{font-family:var(--schrift-titel);font-weight:700;font-size:.8rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--gruen-text)}
.ticket p{color:var(--muted);font-size:.95rem}
.ticket .knopf{margin-top:.9rem;align-self:flex-start}
/* Kein Link hinterlegt: ruhiger Hinweis statt totem Knopf.

   transition:none ist wichtig, nicht kosmetisch: links.js hängt die Klasse
   erst beim Laden an, und die Überblendung aus .knopf würde den dunklen
   Knopf 150 ms lang aufblitzen lassen, bevor er hell wird.

   Der Text steht in --body, nicht in --muted: auf --wash käme --muted nur
   auf 4,3:1 und verfehlte die 4,5:1. Eine Prüfung wacht darüber. */
.knopf.kein-link{
  background-color:var(--wash);color:var(--body);border-color:var(--linie);
  cursor:default;font-weight:600;transition:none;
}
.knopf.kein-link svg{display:none}

/* ---------- Programm: die drei Tage ---------- */
.tage{display:grid;gap:1rem}
@media (min-width:52rem){.tage{grid-template-columns:repeat(3,1fr)}}
.tag{border:1px solid var(--linie);border-radius:var(--r-lg);
  background:var(--grund);padding:clamp(1.15rem,3.5vw,1.5rem)}
.tag[data-heute]{border-color:var(--gruen);box-shadow:inset 0 0 0 1px var(--gruen)}
.tag-kopf{display:flex;align-items:baseline;flex-wrap:wrap;gap:.5rem .75rem;
  padding-bottom:.85rem;margin-bottom:.85rem;border-bottom:1px solid var(--linie)}
.wochentag{font-family:var(--schrift-titel);font-weight:800;font-size:1.3rem;
  letter-spacing:-.02em;color:var(--ink)}
.kalender{font-size:.85rem;font-weight:600;color:var(--muted)}
.marke-heute{margin-left:auto;background:var(--gruen);color:var(--ink);
  font-family:var(--schrift-titel);font-weight:700;font-size:.7rem;
  letter-spacing:.06em;text-transform:uppercase;
  padding:.15rem .45rem;border-radius:var(--r-sm)}
.plan{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.85rem}
.plan li{display:flex;gap:.85rem;align-items:baseline}
.zeit{flex:0 0 3.2rem;font-family:var(--schrift-titel);font-weight:700;
  font-size:.95rem;color:var(--ink);font-variant-numeric:tabular-nums}
.was{font-size:.97rem;color:var(--body);font-weight:600}
.wo{display:block;font-weight:400;font-size:.87rem;color:var(--muted);margin-top:.1rem}

/* NACHTBLOCK-ANFANG ------------------------------------------------------
   Alles bis zur Endmarke weiter unten steht auf --schiefer-tief.
   Nur hier darf die Limette Schriftfarbe sein: dort sind es 5,1:1, auf Weiß
   dagegen 2,0:1. Die Prüfdatei wertet genau diese beiden Marker aus — wer
   eine Regel hier einfügt, muss also wirklich im dunklen Bereich sein. */
.nacht{background:var(--schiefer-tief);color:var(--auf-dunkel);position:relative;
  overflow:hidden}
.nacht h2,.nacht h3{color:#fff}
.nacht .kicker{color:var(--gruen)}
.nacht .kicker::after{background:var(--gruen)}
.nacht .lese{color:var(--auf-dunkel-leise)}
.lichter{position:absolute;left:0;right:0;height:48px;pointer-events:none;
  stroke:rgba(244,244,241,.45)}   /* .25 ergab 1,99:1 — das Kabel war kaum zu sehen */
.lichter.oben{top:0}
.lichter.unten{bottom:0;transform:scaleY(-1)}
.lichter circle{fill:var(--gruen);animation:blinzeln 4s ease-in-out infinite}
@keyframes blinzeln{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.lichter circle{animation:none}}
/* Vier Icons standen hier in einem 2x2-Raster. Zwei davon waren nicht zu
   retten — ein Drahtgitter-Würfel für „Fahrgeschäfte" und ein Autoscooter,
   der bei 44 px in vier Anläufen zur Tischlampe wurde. Das Raster war
   ohnehin genau der Kachel-Look, den das Designsystem ausschließt.
   Jetzt eine redaktionelle Liste: Haarlinie, Versalien, Text. */
.was-da-ist{margin:.5rem 0 0;display:grid;gap:0}
@media (min-width:44rem){.was-da-ist{grid-template-columns:1fr 1fr;column-gap:2.5rem}}
.was-da-ist > div{padding-block:1.1rem;border-top:1px solid rgba(244,244,241,.18)}
.was-da-ist dt{font-family:var(--schrift-titel);font-weight:700;font-size:.8rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gruen)}
.was-da-ist dd{margin:.4rem 0 0;color:var(--auf-dunkel-leise);font-size:.97rem}

/* NACHTBLOCK-ENDE ------------------------------------------------------- */

/* ---------- Anfahrt ---------- */
.anfahrt{display:grid;gap:1.75rem}
@media (min-width:48rem){.anfahrt{grid-template-columns:1fr 1fr;gap:2.5rem}}
.karte-link{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  border:1px solid var(--linie-kraeftig);border-radius:var(--r-lg);
  padding:1.1rem 1.25rem;text-decoration:none;color:var(--ink);
  font-family:var(--schrift-titel);
}
.karte-link:hover{background:var(--wash)}
.karte-link small{display:block;margin-top:.15rem;font-family:var(--schrift);
  font-weight:600;font-size:.83rem;color:var(--gruen-text)}
.karte-link svg{flex:0 0 1.25rem;width:1.25rem;height:1.25rem;fill:none;
  stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.info-liste{margin:0;display:flex;flex-direction:column;gap:1rem}
.info-liste dt{font-family:var(--schrift-titel);font-weight:700;font-size:.9rem;
  color:var(--ink)}
.info-liste dd{margin:.2rem 0 0;font-size:.94rem;color:var(--muted)}

/* ---------- Gut zu wissen ---------- */
.fragen{border-top:1px solid var(--linie)}
.fragen details{border-bottom:1px solid var(--linie)}
.fragen summary{
  cursor:pointer;list-style:none;padding:1rem 0;
  font-family:var(--schrift-titel);font-weight:700;font-size:1rem;color:var(--ink);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{content:"";flex:0 0 .6rem;width:.6rem;height:.6rem;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  rotate:45deg;translate:0 -25%;transition:rotate .15s}
.fragen details[open] summary::after{rotate:-135deg;translate:0 25%}
.antwort{padding:0 0 1.1rem;font-size:.95rem;color:var(--muted);
  max-width:var(--lesebreite)}