/* ============================================================================
   WEINFEST 2026 – Gestaltung
   ----------------------------------------------------------------------------
   Die Farben stammen direkt aus Plakat und Banner (per Pixelanalyse ermittelt).
   Aufbau:
     1. Farben & Grundwerte      5. Bänder & Abschnitte
     2. Grundgerüst              6. Ticketkauf
     3. Bausteine (Knöpfe …)     7. Logo-Laufband
     4. Kopfbereich              8. Weine, Band, Impressionen, Fuß
   ========================================================================== */

/* ============================================================================
   1. Farben & Grundwerte
   ========================================================================== */

:root {
  /* Aus dem Plakat entnommen */
  --gruen-tief:   #16261C;
  --gruen:        #22382B;
  --gruen-hell:   #35513F;
  --creme:        #EFE5CA;
  --creme-hell:   #F7F3E8;
  --creme-papier: #FBF8F1;
  --gold:         #C9A227;
  --gold-dunkel:  #9E7D18;
  --gold-hell:    #E2DCAF;
  --weinrot:      #4A1010;
  --weinrot-hell: #6B1F22;
  --wein-rose:    #8B3F50;
  --laub:         #6E8C4A;

  /* Abgeleitete Rollen */
  --text:         #1F2A22;
  --text-leise:   #5B6B5F;
  --linie:        rgba(34, 56, 43, 0.16);
  --linie-gold:   rgba(201, 162, 39, 0.45);

  /* Schriften */
  --schrift-titel:  'Cinzel', 'Trajan Pro', Georgia, 'Times New Roman', serif;
  --schrift-serif:  'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --schrift-text:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --schrift-script: 'Great Vibes', 'Brush Script MT', cursive;

  /* Maße */
  --breite:      1180px;
  --breite-eng:  760px;
  --rund:        14px;
  --rund-klein:  8px;
  --schatten:      0 2px 8px rgba(22, 38, 28, 0.08);
  --schatten-hoch: 0 18px 48px rgba(22, 38, 28, 0.22);
}

/* ============================================================================
   2. Grundgerüst
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  /* Die Navigation klebt oben und ist rund 66 px hoch. Ohne diesen Abstand
     rutscht jedes Sprungziel darunter und ist weder les- noch anklickbar. */
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--creme-papier);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* height: auto ist entscheidend: ohne diese Zeile setzt der Browser die im
   HTML angegebene Pixelhöhe fest an und staucht das Bild. */
img { max-width: 100%; height: auto; display: block; }

/* Muss nach unten stehen können: viele Bausteine hier setzen display: flex
   oder grid, was ein einfaches hidden sonst überstimmen würde. */
[hidden] { display: none !important; }

a { color: var(--gruen); text-underline-offset: 3px; }
a:hover { color: var(--gold-dunkel); }

h1, h2, h3, h4 {
  font-family: var(--schrift-titel);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 .5em;
  letter-spacing: .02em;
}

p { margin: 0 0 1em; }

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

.huelle-eng { max-width: var(--breite-eng); }

.abschnitt { padding: 88px 0; position: relative; }
.abschnitt-schmal { padding: 60px 0; }

/* Gleicher Grund wie scroll-padding oben: gilt auch für Elemente, zu denen
   das Formular springt (Fehlermeldungen, Kaufbereich). */
[id] { scroll-margin-top: 88px; }

/* Nur für Screenreader */
.nur-vorlesen {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Hinweisbalken im Testbetrieb – bewusst auffällig, damit niemand die
   Vorschau für den echten Verkauf hält. */
.testbalken {
  position: relative; z-index: 70;
  display: flex; align-items: center; justify-content: center;
  gap: 12px;
  background: repeating-linear-gradient(
    135deg, var(--weinrot), var(--weinrot) 14px,
    #5A1616 14px, #5A1616 28px);
  color: var(--gold-hell);
  padding: 11px 22px;
  font-size: .89rem; line-height: 1.4;
  text-align: center;
}
.testbalken strong { color: #fff; }
.testbalken .zeichen { font-size: 1.1rem; flex: none; }

/* Die Navigation klebt unterhalb des Balkens statt am Fensterrand */
.hat-testbalken .navi { top: 0; }

@media (max-width: 620px) {
  .testbalken { font-size: .8rem; padding: 9px 16px; }
}

/* Sprungmarke für Tastaturnutzer */
.sprung {
  position: absolute; left: 16px; top: -60px; z-index: 999;
  background: var(--gold); color: var(--gruen-tief);
  padding: 10px 18px; border-radius: var(--rund-klein);
  font-weight: 600; text-decoration: none;
  transition: top .2s;
}
.sprung:focus { top: 16px; }

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

/* --- Überschrift eines Abschnitts -------------------------------------- */

.kopfzeile { text-align: center; margin-bottom: 54px; }

.kopfzeile .ueberschrift {
  font-size: clamp(1.9rem, 4.2vw, 2.9rem);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: .35em;
  /* „Vorverkaufsstellen" ist ein einziges langes Wort. Gesperrt und in
     Versalien passt es auf einem Handy in keine Zeile und schob die ganze
     Seite seitlich hinaus. Deutsch trennt sauber (die Seite ist lang="de"),
     overflow-wrap ist nur der Notnagel für Wörter ohne Trennstelle. */
  hyphens: auto;
  overflow-wrap: break-word;
}

.kopfzeile .unterzeile {
  font-family: var(--schrift-serif);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: var(--text-leise);
  font-style: italic;
  max-width: 620px;
  margin-inline: auto;
}

/* Kleines Weinblatt-Trennzeichen */
.zierstrich {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; margin: 0 auto 22px; max-width: 260px;
}
.zierstrich::before, .zierstrich::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--linie-gold), transparent);
}
.zierstrich svg { width: 22px; height: 22px; fill: var(--gold); flex: none; }

/* ============================================================================
   3. Bausteine
   ========================================================================== */

.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  font-family: var(--schrift-text);
  font-size: 1rem; font-weight: 600; letter-spacing: .02em;
  padding: 15px 30px;
  border: 1px solid transparent;
  border-radius: var(--rund-klein);
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.knopf:hover { transform: translateY(-2px); }
.knopf:active { transform: translateY(0); }
.knopf[disabled] {
  opacity: .45; cursor: not-allowed; transform: none;
}

.knopf-gold {
  background: linear-gradient(160deg, #E0BE4A, var(--gold) 55%, var(--gold-dunkel));
  color: var(--gruen-tief);
  box-shadow: 0 6px 18px rgba(158, 125, 24, .3);
}
.knopf-gold:hover { color: var(--gruen-tief); box-shadow: 0 10px 26px rgba(158, 125, 24, .42); }

.knopf-gruen { background: var(--gruen); color: var(--creme-hell); }
.knopf-gruen:hover { background: var(--gruen-hell); color: var(--creme-hell); }

.knopf-rand {
  background: transparent;
  border-color: var(--linie-gold);
  color: var(--gruen);
}
.knopf-rand:hover { background: rgba(201, 162, 39, .1); color: var(--gruen); }

.knopf-hell-rand {
  background: transparent;
  border-color: rgba(226, 220, 175, .5);
  color: var(--gold-hell);
}
.knopf-hell-rand:hover { background: rgba(226, 220, 175, .12); color: var(--gold-hell); }

.karte {
  background: var(--creme-papier);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  box-shadow: var(--schatten);
}

.hinweis {
  display: flex; gap: 14px; align-items: flex-start;
  background: rgba(201, 162, 39, .1);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--rund-klein) var(--rund-klein) 0;
  padding: 16px 20px;
  font-size: .95rem;
  line-height: 1.55;
}
.hinweis strong { color: var(--gruen); }
.hinweis .zeichen { flex: none; font-size: 1.2rem; line-height: 1.3; }

/* ============================================================================
   4. Kopfbereich
   ========================================================================== */

/* --- Kopf des Vereins --------------------------------------------------
   Nachgebaut nach dem Kopf von wir-nkse.de: dieselbe Grafik (Silhouette
   und Wappen), darueber der Vereinsname in hellem Gruen und die Zeile
   „Leistungsstark und sympathisch..".

   Die Groessen sind in cqw angegeben – ein Prozentsatz der Breite des
   Kopfes. Dadurch waechst und schrumpft der Schriftzug im selben Takt wie
   die Grafik darunter, statt bei jeder Fensterbreite anders zu sitzen.
   Vorbild sind 46 px Name und 19,2 px Zeile auf 1250 px Bildbreite. */

.vereinskopf {
  background: #fff;
  border-bottom: 1px solid var(--linie);
  padding: 10px 22px;
}
.vereinskopf-innen {
  position: relative; display: block;
  max-width: var(--breite);
  margin-inline: auto;
  text-decoration: none;
  container-type: inline-size;
}
.vereinskopf img {
  width: 100%; height: auto;
  aspect-ratio: 1250 / 150;
}

.vereinskopf-text {
  position: absolute; left: 2cqw; top: 21%;
  display: flex; flex-direction: column;
}
.vereinsname {
  font-family: var(--schrift-text);
  font-weight: 300; font-size: 3.68cqw; line-height: 1.15;
  color: #C9DE9B;                     /* Farbwert von wir-nkse.de */
  white-space: nowrap;
}
.vereinsspruch {
  font-family: var(--schrift-text);
  font-weight: 300; font-size: 1.54cqw;
  color: #666; margin-top: .45cqw;
  white-space: nowrap;
}
.vereinskopf-innen:hover .vereinsname { color: #B6D07E; }

/* Auf dem Telefon macht die Grafik in voller Breite nur ein 47 px hohes
   Band – dafuer ist der Schriftzug zu klein. Die Vereinsseite loest das
   ebenso: Grafik auf feste Hoehe beschnitten, Wappen bleibt rechts
   stehen, Schrift in fester Groesse davor. */
@media (max-width: 620px) {
  .vereinskopf { padding: 0; }
  .vereinskopf-innen { max-width: none; }
  .vereinskopf img {
    aspect-ratio: auto;
    height: 86px;
    object-fit: cover;
    object-position: right center;
  }
  .vereinskopf-text {
    left: 16px; top: 50%; transform: translateY(-50%);
    max-width: calc(100% - 110px);
  }
  .vereinsname   { font-size: 1.16rem; white-space: normal; }
  .vereinsspruch { font-size: .72rem; margin-top: 3px; white-space: normal; }
}

/* --- Hinweis auf KI-Unterstützung -------------------------------------- */

.ki-hinweis {
  background: var(--creme);
  border-bottom: 1px solid var(--linie);
  font-size: .8rem; line-height: 1.45;
  color: var(--text-leise);
}
.ki-hinweis .huelle {
  display: flex; align-items: center; justify-content: center;
  gap: 9px; padding-block: 9px;
  text-align: center;
}
.ki-hinweis svg { width: 15px; height: 15px; flex: none; color: var(--gold-dunkel); }

/* --- Navigation -------------------------------------------------------- */

.navi {
  position: sticky; top: 0; z-index: 60;
  background: rgba(251, 248, 241, .82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, box-shadow .3s, background .3s;
}
.navi.geklebt {
  border-bottom-color: var(--linie);
  box-shadow: 0 2px 20px rgba(22, 38, 28, .07);
}

.navi-innen {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; min-height: 66px;
}

.navi-marke {
  font-family: var(--schrift-titel);
  font-size: 1.12rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--gruen); text-decoration: none;
  white-space: nowrap;
}
.navi-marke span { color: var(--gold-dunkel); }

/* Sehr schmale Geräte (iPhone SE der ersten Reihe und ähnliche): Marke,
   Menüknopf und Ticketknopf brauchen zusammen mehr Platz, als da ist –
   die Kopfleiste schob die Seite um gut 10 Pixel seitlich hinaus. Enger
   setzen statt etwas wegzulassen: Der Ticketknopf ist der Grund, warum
   die Leiste überhaupt mitscrollt. */
@media (max-width: 360px) {
  .navi-innen { gap: 10px; }
  .navi-marke { font-size: 1rem; letter-spacing: .16em; }
  .navi .knopf-gold { padding-inline: 14px; font-size: .84rem; }
}

.navi-links { display: flex; gap: 28px; align-items: center; }

.navi-links a {
  font-size: .93rem; font-weight: 500;
  color: var(--text-leise); text-decoration: none;
  position: relative; padding: 6px 0;
  transition: color .2s;
}
.navi-links a::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 0; height: 2px; background: var(--gold);
  transition: width .25s ease;
}
.navi-links a:hover { color: var(--gruen); }
.navi-links a:hover::after { width: 100%; }

.navi .knopf { padding: 10px 20px; font-size: .92rem; }

.navi-schalter {
  display: none;
  background: none; border: 1px solid var(--linie);
  border-radius: var(--rund-klein);
  padding: 9px 11px; cursor: pointer;
}
.navi-schalter span {
  display: block; width: 20px; height: 2px;
  background: var(--gruen); border-radius: 2px;
}
.navi-schalter span + span { margin-top: 5px; }

/* --- Hero -------------------------------------------------------------- */

.hero {
  position: relative;
  padding: 76px 0 92px;
  background:
    radial-gradient(ellipse 70% 55% at 12% 0%,   rgba(110, 140, 74, .20), transparent 60%),
    radial-gradient(ellipse 60% 50% at 92% 12%,  rgba(139, 63, 80, .16),  transparent 62%),
    linear-gradient(168deg, #F4F1E2 0%, var(--creme-papier) 45%, #EFEAD8 100%);
  overflow: hidden;
}

/* Weinlaub als dezente Silhouette, wie auf dem Plakat */
.hero-laub {
  position: absolute; pointer-events: none;
  opacity: .16; fill: var(--gruen);
}
.hero-laub-1 { top: -40px;  left: -50px;  width: 260px; transform: rotate(-14deg); }
.hero-laub-2 { bottom: -60px; left: 6%;   width: 190px; transform: rotate(24deg); opacity: .12; }
.hero-laub-3 { top: 18%;   right: -40px;  width: 220px; transform: rotate(38deg); opacity: .1; }

.hero-innen {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 60px; align-items: center;
}

.hero-oben {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 14px;
  font-size: .78rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-dunkel);
  margin-bottom: 22px;
}
.hero-oben::before {
  content: ''; width: 34px; height: 1px; background: var(--gold);
}

/* Logo des Hauptsponsors. Ueber die Hoehe geregelt, damit es neben der
   Zeile sitzt; das Seitenverhaeltnis 211:75 bleibt erhalten. */
.hero-sponsor { display: inline-flex; align-items: center; }
.hero-sponsor img {
  height: 55px; width: auto;
  transition: opacity .2s ease;
}
.hero-sponsor:hover img { opacity: .78; }

@media (max-width: 620px) {
  .hero-sponsor img { height: 44px; }
}

.hero-titel {
  font-family: var(--schrift-titel);
  font-size: clamp(3.4rem, 11vw, 7.4rem);
  font-weight: 700;
  line-height: .92;
  letter-spacing: .06em;
  margin: 0 0 6px;
  background: linear-gradient(178deg, #F2EEC8 6%, var(--gold-hell) 30%, var(--gold) 62%, var(--gold-dunkel) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 2px rgba(22, 38, 28, .28));
}
/* Rückfall, falls der Browser Farbverlauf-Text nicht kann */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero-titel { color: var(--gold-dunkel); -webkit-text-fill-color: currentColor; }
}

.hero-titel .zeile { display: block; }
.hero-titel .zeile + .zeile { margin-top: -.06em; }

.hero-unterzeile {
  font-family: var(--schrift-serif);
  font-size: clamp(1.25rem, 2.6vw, 1.65rem);
  font-style: italic;
  color: var(--gruen);
  margin: 18px 0 30px;
}

.hero-fakten {
  display: flex; flex-wrap: wrap; gap: 12px 26px;
  margin-bottom: 34px;
}
.hero-fakt {
  display: flex; align-items: center; gap: 11px;
  font-size: 1.02rem; font-weight: 500;
}
.hero-fakt svg { width: 21px; height: 21px; flex: none; stroke: var(--gold-dunkel); }
.hero-fakt strong { font-weight: 600; }

.hero-knoepfe { display: flex; flex-wrap: wrap; gap: 14px; }

.hero-musik {
  margin-top: 34px;
  display: inline-flex; align-items: center; gap: 16px;
  background: var(--weinrot);
  color: var(--gold-hell);
  border-radius: 999px;
  padding: 13px 30px 15px;
  box-shadow: 0 10px 30px rgba(74, 16, 16, .3);
}
.hero-musik .etikett {
  font-size: .68rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  opacity: .8; flex: none;
}
.hero-musik .namen {
  font-family: var(--schrift-script);
  font-size: 1.5rem; line-height: 1.15;
}

/* Plakat als gerahmtes Bild */
.hero-plakat { position: relative; }

/* Der Rahmen sitzt auf dem Wrapper. Läge er als border auf dem Bild, würde
   box-sizing: border-box das Bild schmaler machen und das Seitenverhältnis
   des Plakats verfälschen. */
.hero-rahmen {
  background: #fff;
  padding: 7px;
  border-radius: 6px;
  box-shadow: var(--schatten-hoch);
  transform: rotate(1.6deg);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.hero-plakat:hover .hero-rahmen { transform: rotate(0deg) scale(1.02); }

.hero-plakat img {
  width: 100%;
  height: auto;
  /* Originalmaße des Plakats – verhindert Springen beim Laden */
  aspect-ratio: 620 / 875;
  border-radius: 3px;
}

.hero-stempel {
  position: absolute; z-index: 3;
  left: -26px; bottom: 26px;
  width: 118px; height: 118px;
  display: grid; place-items: center; text-align: center;
  background: var(--gruen); color: var(--gold-hell);
  border-radius: 50%;
  border: 2px dashed rgba(226, 220, 175, .45);
  box-shadow: var(--schatten-hoch);
  transform: rotate(-9deg);
  line-height: 1.1;
}
.hero-stempel .zahl {
  font-family: var(--schrift-titel);
  font-size: 1.75rem; font-weight: 700; display: block;
}
.hero-stempel .wort {
  font-size: .6rem; letter-spacing: .16em;
  text-transform: uppercase; opacity: .85;
}

/* ============================================================================
   5. Bänder & Abschnitte
   ========================================================================== */

/* Dunkelgrünes Faktenband, wie der Infobalken auf dem Plakat */
.band {
  background: var(--gruen);
  color: var(--creme);
  position: relative;
}
.band::before, .band::after {
  content: ''; position: absolute; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: .6;
}
.band::before { top: 0; }
.band::after  { bottom: 0; }

.band a { color: var(--gold-hell); }

.band-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 30px 34px;
  padding: 44px 0;
}

.band-punkt { display: flex; gap: 15px; align-items: flex-start; }
.band-punkt svg {
  width: 27px; height: 27px; flex: none;
  stroke: var(--gold); margin-top: 2px;
}
.band-punkt .titel {
  font-size: .7rem; font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 3px;
}
.band-punkt .wert {
  font-family: var(--schrift-serif);
  font-size: 1.32rem; font-weight: 600; line-height: 1.3;
  color: var(--creme-hell);
}
.band-punkt .klein { font-size: .87rem; color: rgba(239, 229, 202, .72); font-family: var(--schrift-text); }

/* ============================================================================
   6. Ticketkauf
   ========================================================================== */

.tickets { background: var(--creme-hell); }

.preis-paar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px; margin-bottom: 44px;
}

.preis-kachel {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--creme-papier);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  padding: 26px 28px;
  text-align: center;
}
.preis-kachel.betont {
  border-color: var(--gold);
  background: linear-gradient(170deg, #FFFDF6, #F6EFDC);
  box-shadow: 0 10px 30px rgba(201, 162, 39, .16);
}
.preis-kachel .art {
  font-size: .72rem; font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--text-leise); margin-bottom: 6px;
}
.preis-kachel.betont .art { color: var(--gold-dunkel); }
.preis-kachel .betrag {
  font-family: var(--schrift-titel);
  font-size: 2.7rem; font-weight: 700; color: var(--gruen);
  line-height: 1;
}
.preis-kachel .zusatz { font-size: .85rem; color: var(--text-leise); margin-top: 8px; }
/* Die Fristzeile sitzt am Fuß der Kachel, damit die Trennlinien beider
   Kacheln auf gleicher Höhe liegen – auch wenn darüber unterschiedlich
   viel Text steht. */
.preis-kachel .frist {
  font-size: .82rem; line-height: 1.45;
  color: var(--text-leise);
  margin-top: auto; padding-top: 14px;
  border-top: 1px solid var(--linie);
}
.preis-kachel .fahne {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--gold); color: var(--gruen-tief);
  font-size: .66rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  padding: 4px 14px; border-radius: 999px;
  white-space: nowrap;
}

/* --- Drei Schritte ----------------------------------------------------- */

.schritte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 26px;
  margin-bottom: 46px;
}

.schritt { text-align: center; padding: 0 8px; }

.schritt .nummer {
  width: 52px; height: 52px; margin: 0 auto 16px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--gruen); color: var(--gold-hell);
  font-family: var(--schrift-titel);
  font-size: 1.28rem; font-weight: 700;
  box-shadow: 0 6px 16px rgba(22, 38, 28, .2);
}
.schritt h3 { font-size: 1.12rem; letter-spacing: .05em; margin-bottom: .4em; }
.schritt p { font-size: .93rem; color: var(--text-leise); margin: 0; }

/* --- Kaufbereich ------------------------------------------------------- */

.kasse {
  background: var(--creme-papier);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  box-shadow: 0 12px 40px rgba(22, 38, 28, .1);
  overflow: hidden;
}

.kasse-kopf {
  background: var(--gruen);
  color: var(--creme-hell);
  padding: 22px 32px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.kasse-kopf h3 { margin: 0; font-size: 1.2rem; letter-spacing: .09em; text-transform: uppercase; }

/* Zähler bis zum Vorverkaufsschluss, rechts in der grünen Kopfzeile */
.countdown { text-align: right; margin-left: auto; }
.countdown-titel {
  display: block;
  font-family: var(--schrift-text);
  font-size: .68rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-hell); opacity: .8;
  margin-bottom: 5px;
}
.countdown-uhr { display: flex; gap: 10px; justify-content: flex-end; }
.cd-block {
  display: flex; flex-direction: column; align-items: center;
  min-width: 42px;
  background: rgba(0, 0, 0, .18);
  border-radius: var(--rund-klein);
  padding: 5px 7px 4px;
}
.cd-block b {
  font-family: var(--schrift-titel);
  font-size: 1.24rem; font-weight: 700; line-height: 1;
  color: var(--gold-hell);
  font-variant-numeric: tabular-nums;
}
.cd-block i {
  font-style: normal;
  font-size: .6rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--creme); opacity: .72;
  margin-top: 3px;
}
.countdown-aus {
  margin-left: auto;
  font-family: var(--schrift-text);
  font-size: .84rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold-hell);
}

/* Zusammenfassung des Kaufs, zwischen E-Mail-Feld und den Bestätigungen.
   Schriftart bewusst dieselbe wie bei den Feldbeschriftungen darüber. */
.kaufuebersicht {
  background: var(--creme-hell);
  border: 1px solid var(--linie-gold);
  border-left: 4px solid var(--gold);
  border-radius: var(--rund-klein);
  padding: 16px 20px; margin-bottom: 22px;
}
.ku-zeile {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 5px 0;
}
.ku-etikett {
  font-family: var(--schrift-text);
  font-size: .95rem; font-weight: 600;
  color: var(--gruen);
}
.ku-wert {
  font-family: var(--schrift-text);
  font-size: 1.05rem; font-weight: 700;
  color: var(--gruen-tief);
  font-variant-numeric: tabular-nums;
}
.ku-betrag { font-size: 1.35rem; }

/* „inkl. 19 % USt" – gehört zum Etikett, soll ihm aber nicht die
   Aufmerksamkeit nehmen. Steht bei Platz daneben, sonst darunter. */
.ku-steuer {
  font-weight: 400;
  font-size: .82rem;
  color: var(--text-leise);
  margin-left: .5em;
  white-space: nowrap;
}
.ku-steuer:empty { display: none; }
.ku-tombola {
  font-family: var(--schrift-text);
  font-size: .92rem; font-weight: 500; line-height: 1.5;
  color: var(--gruen);
  margin: 10px 0 0; padding-top: 11px;
  border-top: 1px solid var(--linie);
}

.kasse-koerper { padding: 32px; }

/* Formular */
.feld { margin-bottom: 20px; }
.feld label {
  display: block; margin-bottom: 7px;
  font-size: .87rem; font-weight: 600; color: var(--gruen);
}
.feld .erklaerung { font-weight: 400; color: var(--text-leise); }

.feld input[type="text"],
.feld input[type="email"],
.feld select {
  width: 100%;
  font-family: var(--schrift-text); font-size: 1rem;
  padding: 13px 15px;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--rund-klein);
  transition: border-color .2s, box-shadow .2s;
}
.feld input:focus, .feld select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, .18);
}
.feld input[aria-invalid="true"] { border-color: #B3261E; }

.feld-paar {
  display: grid; grid-template-columns: 1fr 150px; gap: 18px;
}

.fehler {
  display: none;
  margin-top: 6px; font-size: .84rem; color: #B3261E;
}
.fehler.sichtbar { display: block; }

.hakenfeld {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: .89rem; line-height: 1.5; color: var(--text-leise);
  margin-bottom: 18px;
}
.hakenfeld input { margin-top: 3px; flex: none; width: 17px; height: 17px; accent-color: var(--gruen); }

/* Bühnen des Kaufvorgangs */
.buehne { display: none; }
.buehne.aktiv { display: block; animation: einblenden .4s ease both; }

@keyframes einblenden {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

#paypal-bereich { margin-top: 8px; min-height: 56px; }

.demo-fahne {
  display: flex; gap: 12px; align-items: flex-start;
  background: rgba(139, 63, 80, .1);
  border: 1px dashed var(--wein-rose);
  border-radius: var(--rund-klein);
  padding: 14px 18px; margin-bottom: 20px;
  font-size: .88rem; line-height: 1.5;
}
.demo-fahne strong { color: var(--weinrot); }

/* Zustimmung vor dem Laden von PayPal (Zwei-Klick-Lösung) */
.zustimmung {
  text-align: center;
  background: linear-gradient(168deg, #F6F1E2, var(--creme-hell));
  border: 1px dashed var(--linie-gold);
  border-radius: var(--rund);
  padding: 30px 28px 26px;
}

.zustimmung-symbol {
  width: 50px; height: 50px; margin: 0 auto 16px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(201, 162, 39, .15);
}
.zustimmung-symbol svg { width: 24px; height: 24px; stroke: var(--gold-dunkel); }

.zustimmung h4 {
  font-family: var(--schrift-titel);
  font-size: 1.2rem; letter-spacing: .05em;
  margin: 0 0 .5em;
}
.zustimmung p {
  font-size: .93rem; color: var(--text-leise);
  max-width: 480px; margin: 0 auto 1em;
}
.zustimmung .klein { font-size: .82rem; margin-bottom: 20px; }

/* Vorverkauf beendet – tritt an die Stelle des Formulars.
   Ruhiger als der Kaufbereich: hier gibt es nichts mehr zu entscheiden,
   nur noch etwas zu erfahren. */
.schluss {
  text-align: center;
  background: var(--creme-hell);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  padding: 30px 28px 28px;
}

.schluss-symbol {
  width: 50px; height: 50px; margin: 0 auto 16px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(34, 56, 43, .1);
}
.schluss-symbol svg { width: 26px; height: 26px; stroke: var(--gruen); }

.schluss h4 {
  font-family: var(--schrift-titel);
  font-size: 1.2rem; letter-spacing: .05em;
  color: var(--gruen);
  margin: 0 0 .5em;
}

.schluss-text {
  font-size: .95rem; line-height: 1.6; color: var(--text);
  max-width: 46ch; margin: 0 auto 24px;
}

.schluss-kasten {
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--rund-klein);
  padding: 4px 18px;
  text-align: left;
  max-width: 400px; margin: 0 auto;
}
.schluss-zeile {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--linie);
}
.schluss-zeile:last-child { border-bottom: none; }
.schluss-zeile .schluessel {
  font-family: var(--schrift-text);
  font-size: .8rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-leise);
  flex: none;
}
.schluss-zeile .wert {
  font-weight: 600; color: var(--gruen);
  text-align: right;
}

.schluss-klein {
  font-size: .84rem; color: var(--text-leise);
  max-width: 40ch; margin: 16px auto 22px;
}

/* Bestätigung / Beleg */
.beleg {
  border: 2px solid var(--gruen);
  border-radius: var(--rund);
  overflow: hidden;
  background: #fff;
}
.beleg-kopf {
  background: var(--gruen); color: var(--gold-hell);
  padding: 26px; text-align: center;
}
.beleg-kopf .haken {
  width: 54px; height: 54px; margin: 0 auto 12px;
  display: grid; place-items: center;
  border-radius: 50%; background: rgba(226, 220, 175, .16);
  border: 2px solid var(--gold);
}
.beleg-kopf .haken svg { width: 27px; height: 27px; stroke: var(--gold); }
.beleg-kopf h3 { margin: 0 0 4px; color: var(--creme-hell); letter-spacing: .06em; }
.beleg-kopf p { margin: 0; font-size: .93rem; opacity: .85; }

.beleg-koerper { padding: 26px; }

.beleg-zeile {
  display: flex; justify-content: space-between; gap: 18px;
  padding: 11px 0; border-bottom: 1px dashed var(--linie);
  font-size: .95rem;
}
.beleg-zeile:last-child { border-bottom: none; }
.beleg-zeile .schluessel { color: var(--text-leise); }
.beleg-zeile .wert { font-weight: 600; text-align: right; }
.beleg-zeile .wert.nummer {
  font-family: var(--schrift-titel); font-size: 1.15rem;
  letter-spacing: .1em; color: var(--gruen);
}

.los {
  margin-top: 22px;
  background: linear-gradient(150deg, var(--weinrot), var(--weinrot-hell));
  color: var(--gold-hell);
  border-radius: var(--rund-klein);
  padding: 20px 24px;
  display: flex; gap: 16px; align-items: center;
}
.los svg { width: 34px; height: 34px; flex: none; stroke: var(--gold); }
.los .titel { font-family: var(--schrift-titel); font-size: 1.06rem; letter-spacing: .05em; margin-bottom: 3px; }
.los p { margin: 0; font-size: .89rem; opacity: .9; }

/* Abholwort für Gruppenkäufe */
.gruppe {
  margin-top: 22px;
  border: 2px solid var(--gold);
  border-radius: var(--rund);
  background: linear-gradient(168deg, #FFFDF6, #F6EFDC);
  padding: 22px 24px 24px;
}

.gruppe-kopf { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.gruppe-kopf svg { width: 30px; height: 30px; flex: none; stroke: var(--gold-dunkel); margin-top: 2px; }
.gruppe-kopf .titel {
  font-family: var(--schrift-titel); font-size: 1.06rem;
  letter-spacing: .04em; margin-bottom: 2px; color: var(--gruen);
}
.gruppe-kopf p { margin: 0; font-size: .88rem; color: var(--text-leise); }

.gruppe-wort {
  text-align: center;
  background: var(--gruen);
  border-radius: var(--rund-klein);
  padding: 16px 20px 18px;
  margin-bottom: 16px;
}
.gruppe-wort .etikett {
  display: block;
  font-size: .66rem; font-weight: 700;
  letter-spacing: .19em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 6px;
}
.gruppe-wort .wort {
  display: block;
  font-family: var(--schrift-titel);
  font-size: clamp(1.8rem, 6vw, 2.4rem); font-weight: 700;
  letter-spacing: .13em;
  color: var(--gold-hell);
}

.gruppe-text { font-size: .89rem; color: var(--text-leise); margin: 0 0 16px; }

/* ============================================================================
   7. Logo-Laufband
   ========================================================================== */

.partner {
  background: var(--gruen-tief);
  color: var(--creme);
  padding: 52px 0 58px;
  overflow: hidden;
}

/* Über dem oberen Band liegt die Faktenleiste des Plakatbereichs, ebenfalls
   grün, nur eine Spur heller. Ohne Trenner sähe die Kante zwischen beiden
   nach Versehen aus; der Goldstrich macht eine Absicht daraus – denselben
   Strich benutzt die Seite auch sonst als Zierlinie. */
.partner-oben { border-top: 1px solid var(--linie-gold); }

/* „Mit tatkräftiger Unterstützung von" – der Satz soll etwa 60 Prozent der
   Seitenbreite einnehmen. Deshalb wächst die Schrift mit dem Fenster (vw)
   statt bei einer festen Größe zu bleiben.

   Die Sperrung geht dabei von .24em auf .12em zurück: Was bei Kleinschrift
   die Lesbarkeit hebt, zerfasert das Wortbild, sobald die Buchstaben groß
   sind. Der obere Deckel verhindert, dass der Satz auf sehr breiten
   Schirmen ins Plakathafte kippt; unten sorgt er dafür, dass er auf dem
   Handy lesbar bleibt – dort bricht er dann auf zwei Zeilen um, was bei
   einem Satz dieser Länge unvermeidlich ist. */
.partner-titel {
  text-align: center;
  font-size: clamp(.92rem, 2.35vw, 2.35rem);
  font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  line-height: 1.35;
  color: var(--gold);
  text-wrap: balance;
  margin-bottom: 34px;
}

.laufband {
  position: relative;
  /* Ränder weich auslaufen lassen, damit nichts hart abschneidet */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.laufband-spur {
  display: flex;
  width: max-content;
  gap: 18px;
  animation: laufen var(--laufzeit, 40s) linear infinite;
  will-change: transform;
}

.laufband:hover .laufband-spur,
.laufband:focus-within .laufband-spur { animation-play-state: paused; }

@keyframes laufen {
  from { transform: translate3d(0, 0, 0); }
  /* -50%, weil die Liste im HTML genau zweimal steht: nahtloser Übergang */
  to   { transform: translate3d(-50%, 0, 0); }
}

.laufband-feld {
  flex: none;
  width: 168px; height: 108px;
  /* Reines Weiß, weil die Logodateien einen weißen Hintergrund mitbringen –
     auf Creme zeichnete sich sonst ein sichtbares Rechteck ab. */
  background: #fff;
  border-radius: var(--rund-klein);
  padding: 14px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .22);
}

/* Das Bild füllt die Fläche vollständig aus, object-fit: contain rückt das
   Motiv darin auf beiden Achsen mittig und behält das Seitenverhältnis.
   Mit max-width/max-height allein blieb die Höhe unbegrenzt – die Logos
   ragten unten aus der Kachel heraus. */
.laufband-feld img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}

.partner-fuss {
  text-align: center; margin-top: 32px;
  font-size: .88rem; color: rgba(239, 229, 202, .6);
}
.partner-fuss a { color: var(--gold); }

/* Wer Bewegung nicht mag, bekommt keine */
@media (prefers-reduced-motion: reduce) {
  .laufband-spur { animation: none; }
  .laufband {
    overflow-x: auto;
    -webkit-mask-image: none; mask-image: none;
    padding-bottom: 10px;
  }
  html { scroll-behavior: auto; }
  .hero-rahmen { transition: none; }
}

/* ============================================================================
   8a. Weine & Abstimmung
   ========================================================================== */

.weine { background: var(--creme-papier); }

.filter-reihe {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center; margin-bottom: 38px;
}

.filter-knopf {
  font-family: var(--schrift-text); font-size: .87rem; font-weight: 500;
  padding: 9px 19px;
  background: transparent;
  border: 1px solid var(--linie);
  border-radius: 999px;
  color: var(--text-leise);
  cursor: pointer;
  transition: all .2s;
}
.filter-knopf:hover { border-color: var(--gold); color: var(--gruen); }
.filter-knopf[aria-pressed="true"] {
  background: var(--gruen); border-color: var(--gruen); color: var(--creme-hell);
}

/* --- Übersicht: wie viele Weine je Art -------------------------------- */

.wein-uebersicht {
  display: flex; flex-wrap: wrap;
  justify-content: center; gap: 12px;
  margin-bottom: 38px;
}
.wein-zahl {
  display: inline-flex; align-items: baseline; gap: 8px;
  background: var(--creme-papier);
  border: 1px solid var(--linie);
  border-radius: 999px;
  padding: 9px 18px 9px 14px;
}
.wein-zahl .punkt {
  width: 9px; height: 9px; border-radius: 50%;
  align-self: center; flex: none;
}
.wein-zahl b {
  font-family: var(--schrift-titel);
  font-size: 1.2rem; font-weight: 700; color: var(--gruen);
  line-height: 1;
}
.wein-zahl .art { font-size: .9rem; color: var(--text-leise); }

/* Dank an REWE Hermeier, wo die Weine eingekauft wurden */
.wein-rewe {
  max-width: 62ch; margin: 0 auto 38px;
  text-align: center;
  font-size: .93rem; line-height: 1.6;
  color: var(--text-leise);
}
.wein-rewe strong { color: var(--gruen); }

/* Schmalere Fassung des CTA-Kastens für den Weinbereich */
.cta-schmal {
  max-width: var(--breite-eng);
  margin-inline: auto;
  padding: 28px 30px 26px;
}

/* Aufforderung, die Vorlieben anzugeben – erst nach dem Ticketkauf */
.wahl-aufruf {
  background: var(--creme-hell);
  border: 1px solid var(--linie-gold);
  border-left: 4px solid var(--gold);
  border-radius: var(--rund-klein);
  padding: 18px 24px; margin-bottom: 32px;
}
.wahl-aufruf p {
  margin: 0; max-width: 68ch;
  font-size: .97rem; line-height: 1.6; color: var(--gruen);
}
.wahl-aufruf strong { color: var(--gruen-tief); }

/* --- Aufklappbare Weinliste ------------------------------------------- */

.wein-klapp { border-radius: var(--rund); }

.wein-klapp-kopf {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  list-style: none; cursor: pointer;
  background: var(--creme-papier);
  border: 1px solid var(--linie-gold);
  border-radius: var(--rund);
  padding: 17px 26px;
  font-family: var(--schrift-text);
  font-size: 1rem; font-weight: 600; color: var(--gruen);
  transition: background .2s, border-color .2s;
}
.wein-klapp-kopf::-webkit-details-marker { display: none; }
.wein-klapp-kopf:hover { background: var(--creme-hell); border-color: var(--gold); }
.wein-klapp-kopf b { font-family: var(--schrift-titel); font-size: 1.1rem; }
.wein-klapp-kopf svg { width: 18px; height: 18px; flex: none; transition: transform .2s ease; }

.wein-klapp[open] > .wein-klapp-kopf svg { transform: rotate(180deg); }
.wein-klapp-text .zu { display: none; }
.wein-klapp[open] > .wein-klapp-kopf .auf { display: none; }
.wein-klapp[open] > .wein-klapp-kopf .zu  { display: inline; }

.wein-klapp-inhalt { padding-top: 30px; }

/* --- Raster: fünf Weine je Reihe, auf dem Telefon drei ----------------- */

.wein-raster {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 1040px) { .wein-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width:  860px) { .wein-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }

.wein-karte {
  position: relative;
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease;
}
.wein-karte:hover { transform: translateY(-4px); box-shadow: var(--schatten-hoch); }

.wein-karte.gewaehlt {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--gold), 0 14px 34px rgba(201, 162, 39, .2);
}

/* Hochformat: Weinflaschen sind schmal und hoch. Mit dem alten Querformat
   und object-fit: cover war nur der Flaschenhals zu sehen. */
.wein-bild {
  aspect-ratio: 3 / 4;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.5), transparent 62%),
    linear-gradient(160deg, #E9E3D0, #D9D3BC);
  display: grid; place-items: center;
  position: relative;
  overflow: hidden;
}
/* Absolut gesetzt, weil `height: 100%` neben einem aspect-ratio-Elternteil
   nicht zuverlaessig greift.
   `cover` statt `contain`: Auf den Karten stehen Symbolbilder – ganze
   Aufnahmen mit Hintergrund, keine freigestellten Flaschen. Die fuellen die
   Kachel bis an den Rand. Die Dateien liegen bereits im Kartenformat 3:4
   vor, es wird also nichts weggeschnitten. */
.wein-bild img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Platzhalter, solange kein Foto vorliegt */
.wein-bild .platzhalter { text-align: center; padding: 16px; }
.wein-bild .platzhalter svg { width: 46px; height: 46px; opacity: .35; margin-bottom: 6px; }
.wein-bild .platzhalter span {
  display: block; font-size: .68rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--text-leise); opacity: .75;
}

/* Herkunft der Symbolbilder, unter der Weinliste */
.bildnachweis {
  max-width: 62ch; margin: 26px auto 0;
  text-align: center;
  font-size: .8rem; line-height: 1.6;
  color: var(--text-leise);
}
.bildnachweis a { color: inherit; text-underline-offset: 2px; }
.bildnachweis a:hover { color: var(--gruen); }

.wein-marke {
  position: absolute; top: 12px; left: 12px;
  font-size: .64rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px;
  color: #fff;
}
.marke-weiss   { background: #A8912F; }
.marke-rose    { background: var(--wein-rose); }
.marke-rot     { background: var(--weinrot); }
.marke-sekt    { background: var(--gruen-hell); }
.marke-dessert { background: #8A6A1E; }

/* Fünf Karten je Reihe lassen rund 210 px übrig – die Karte ist deshalb
   durchweg eine Nummer kleiner gesetzt als eine Textspalte. */
.wein-koerper { padding: 14px 15px 16px; flex: 1; display: flex; flex-direction: column; }
/* „Grauburgunder" und „Spätburgunder Rosé" laufen sonst aus der schmalen
   Karte heraus – Cinzel bricht lange Wörter nicht von allein. */
.wein-koerper h3 {
  font-size: 1rem; line-height: 1.25; margin-bottom: .18em; letter-spacing: .03em;
  overflow-wrap: anywhere; hyphens: auto;
}

.wein-herkunft {
  font-family: var(--schrift-serif); font-style: italic;
  font-size: .86rem; color: var(--text-leise); margin-bottom: 9px;
}
.wein-text { font-size: .82rem; line-height: 1.45; color: var(--text-leise); margin: 0 0 13px; flex: 1; }
.wein-text-fehlt { font-style: italic; opacity: .65; }

.wein-fuss {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; flex-wrap: wrap;
  padding-top: 11px; border-top: 1px solid var(--linie);
}
.wein-geschmack { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-dunkel); font-weight: 600; }

.wein-waehlen {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .8rem; font-weight: 600; color: var(--gruen);
  cursor: pointer; user-select: none;
}
.wein-waehlen input { width: 17px; height: 17px; accent-color: var(--gold-dunkel); cursor: pointer; }
.wein-waehlen.gesperrt { opacity: .4; cursor: not-allowed; }

/* Drei Karten je Reihe auf dem Telefon: rund 110 px. Da passt nur noch
   Bild, Name und das Kästchen hinein – der Rest wird ausgeblendet. */
@media (max-width: 620px) {
  .wein-raster { gap: 8px; }
  .wein-koerper { padding: 9px 9px 10px; }
  .wein-koerper h3 { font-size: .78rem; line-height: 1.2; }
  .wein-herkunft, .wein-text, .wein-geschmack { display: none; }
  .wein-marke {
    top: 6px; left: 6px;
    font-size: .5rem; letter-spacing: .06em; padding: 3px 7px;
  }
  .wein-bild .platzhalter svg { width: 26px; height: 26px; margin-bottom: 3px; }
  .wein-bild .platzhalter span { font-size: .5rem; letter-spacing: .08em; }
  .wein-fuss { padding-top: 8px; }
  /* Ohne Kästchen bliebe eine leere Zeile mit Trennstrich stehen */
  .wein-fuss:not(:has(.wein-waehlen)) { display: none; }
  /* Nur das Kästchen – dafür die ganze Zeile als Fläche zum Antippen */
  .wein-waehlen { width: 100%; justify-content: center; min-height: 34px; }
  .wein-waehlen > span { display: none; }
  .wein-stand .zahl { font-size: .66rem; }
}

/* Zwischenstand-Balken */
.wein-stand { margin-top: 12px; }
.wein-stand .schiene {
  height: 6px; border-radius: 3px;
  background: rgba(34, 56, 43, .1); overflow: hidden;
}
.wein-stand .fuellung {
  height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-dunkel));
  transition: width .6s cubic-bezier(.2, .8, .2, 1);
}
.wein-stand .zahl {
  display: block; margin-top: 5px;
  font-size: .76rem; color: var(--text-leise);
}

/* Abstimmungs-Leiste am unteren Rand */
.wahl-leiste {
  position: sticky; bottom: 0; z-index: 40;
  margin-top: 30px;
  background: var(--gruen);
  color: var(--creme-hell);
  border-radius: var(--rund);
  padding: 17px 26px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  box-shadow: 0 -6px 30px rgba(22, 38, 28, .2);
}
.wahl-leiste .zaehler { font-size: .95rem; }
.wahl-leiste .zaehler strong { color: var(--gold); font-size: 1.15rem; }

/* ============================================================================
   8b. Band & Sängerin
   ========================================================================== */

.buehne-abschnitt {
  background:
    radial-gradient(ellipse 60% 70% at 15% 20%, rgba(139, 63, 80, .3), transparent 65%),
    linear-gradient(160deg, var(--weinrot) 0%, #3A0C0C 55%, #2A0808 100%);
  color: var(--creme);
}
.buehne-abschnitt .kopfzeile .ueberschrift { color: var(--gold-hell); }
.buehne-abschnitt .kopfzeile .unterzeile { color: rgba(239, 229, 202, .72); }
.buehne-abschnitt .zierstrich::before,
.buehne-abschnitt .zierstrich::after {
  background: linear-gradient(90deg, transparent, rgba(226, 220, 175, .5), transparent);
}

.auftritt-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
}

.auftritt {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(226, 220, 175, .16);
  border-radius: var(--rund);
  padding: 34px 32px;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.auftritt .rolle {
  font-size: .68rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 12px;
}
.auftritt .name {
  font-family: var(--schrift-script);
  font-size: clamp(2.1rem, 5vw, 2.9rem);
  line-height: 1.1;
  color: var(--gold-hell);
  margin-bottom: 16px;
}
.auftritt p { color: rgba(239, 229, 202, .8); font-size: .95rem; margin-bottom: 0; }
.auftritt p + p { margin-top: .9em; }

/* Verweis auf die Seite der Künstlerin bzw. der Band. Öffnet einen neuen
   Tab, damit das Weinfest im eigenen Tab stehen bleibt. */
.auftritt-web {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 16px;
  font-size: .9rem; font-weight: 500;
  color: var(--gold-hell);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.auftritt-web:hover, .auftritt-web:focus-visible {
  color: #fff; border-bottom-color: rgba(226, 220, 175, .55);
}
.auftritt-web svg { width: 14px; height: 14px; flex: none; }

.auftritt-zeiten {
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid rgba(226, 220, 175, .16);
  display: flex; gap: 10px; align-items: center;
  font-size: .87rem; color: rgba(239, 229, 202, .7);
}
.auftritt-zeiten svg { width: 17px; height: 17px; stroke: var(--gold); flex: none; }

/* ============================================================================
   8c. Impressionen
   ========================================================================== */

.impressionen { background: var(--creme-hell); }

.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

.galerie-feld {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--rund-klein);
  overflow: hidden;
  background: #E4DECB;
  cursor: zoom-in;
}
.galerie-feld:nth-child(6n + 1) { grid-column: span 2; aspect-ratio: 8 / 3; }
.galerie-feld img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
.galerie-feld:hover img { transform: scale(1.06); }

.galerie-leer {
  text-align: center;
  border: 1px dashed var(--linie-gold);
  border-radius: var(--rund);
  padding: 56px 30px;
  background: var(--creme-papier);
}
.galerie-leer svg { width: 44px; height: 44px; stroke: var(--gold-dunkel); opacity: .6; margin-bottom: 14px; }
.galerie-leer h3 { font-size: 1.2rem; margin-bottom: .35em; }
.galerie-leer p { color: var(--text-leise); max-width: 480px; margin: 0 auto; font-size: .94rem; }
.galerie-leer code {
  background: rgba(34, 56, 43, .08); padding: 2px 7px;
  border-radius: 4px; font-size: .88em;
}

/* ----------------------------------------------------------------------------
   Teilen – vier gewöhnliche Links, keine Bausteine der Anbieter
   -------------------------------------------------------------------------- */

.teilen {
  margin-top: 30px;
  text-align: center;
  padding: 34px 26px 30px;
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  background: var(--creme-papier);
}

.teilen-spruch {
  font-family: var(--schrift-serif);
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  font-style: italic;
  color: var(--gruen);
  text-wrap: balance;
  max-width: 34ch;
  margin: 0 auto .9em;
}

.teilen-titel {
  font-family: var(--schrift-text);
  font-size: .74rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-dunkel);
  margin: 0 0 20px;
}

/* Umbricht von selbst; auf dem Handy stehen zwei Knöpfe je Zeile */
.teilen-reihe {
  display: flex; flex-wrap: wrap;
  justify-content: center; gap: 12px;
}

.teilen-knopf {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 18px;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: #fff;
  color: var(--gruen);
  font-family: var(--schrift-text);
  font-size: .9rem; font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, transform .12s ease;
}
.teilen-knopf svg { width: 19px; height: 19px; flex: none; }

.teilen-knopf:hover,
.teilen-knopf:focus-visible {
  border-color: var(--linie-gold);
  box-shadow: 0 3px 12px rgba(34, 56, 43, .12);
}
.teilen-knopf:active { transform: translateY(1px); }

/* Rückmeldung nach dem Kopieren. Der Platz bleibt auch leer stehen, damit
   der Block beim Einblenden nicht springt. */
.teilen-echo {
  min-height: 1.4em;
  margin: 16px 0 0;
  font-size: .88rem; color: var(--text-leise);
  opacity: 0;
  transition: opacity .25s ease;
}
.teilen-echo.sichtbar { opacity: 1; }
.teilen-echo b { color: var(--gruen); }

@media (max-width: 420px) {
  .teilen { padding: 28px 16px 24px; }
  .teilen-knopf { padding: 10px 14px; font-size: .85rem; }
}

/* Lupe */
.lupe {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(22, 38, 28, .93);
  display: none; place-items: center;
  padding: 30px;
  cursor: zoom-out;
}
.lupe.offen { display: grid; }
.lupe img {
  max-width: 100%; max-height: 88vh;
  border-radius: 6px; box-shadow: var(--schatten-hoch);
}
.lupe-zu {
  position: absolute; top: 22px; right: 26px;
  background: none; border: none; cursor: pointer;
  color: var(--creme); font-size: 2.2rem; line-height: 1;
  padding: 6px 12px;
}

/* ============================================================================
   8d. Anfahrt
   ========================================================================== */

.anfahrt { background: var(--creme-papier); }

.anfahrt-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 26px;
}

.anfahrt-karte { padding: 30px 30px 32px; }
.anfahrt-karte .symbol {
  width: 46px; height: 46px; margin-bottom: 16px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(201, 162, 39, .14);
}
.anfahrt-karte .symbol svg { width: 23px; height: 23px; stroke: var(--gold-dunkel); }
.anfahrt-karte h3 { font-size: 1.16rem; letter-spacing: .04em; }
.anfahrt-karte p { font-size: .94rem; color: var(--text-leise); }
.anfahrt-karte p:last-child { margin-bottom: 0; }

/* ============================================================================
   8d2. Vorverkaufsstellen
   ========================================================================== */

.vvk { background: var(--creme-hell); }

/* Eine Spalte je Ortsteil.
   min(400px, 100%) statt nur 400px: Auf einem Handy ist der Inhalt schmaler
   als 400 Pixel. Ein festes Mindestmaß zwingt die Spalte dann über den
   Bildschirmrand hinaus, und die ganze Seite lässt sich seitlich
   wegschieben. Mit min() gibt die Spalte nach. */
.vvk-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
  gap: 34px;
}

.vvk-ort { display: flex; flex-direction: column; }

.vvk-ort-titel {
  font-size: .78rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-dunkel);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--linie-gold);
}

/* Gleich hohe Zeilen: alle Karten schließen auf derselben Höhe ab, auch
   wenn zu einem Geschäft noch nicht alle Angaben vorliegen. */
.vvk-liste {
  display: grid;
  grid-auto-rows: 1fr;
  gap: 16px;
  flex: 1;
}

.vvk-karte {
  display: flex; flex-direction: column;
  background: var(--creme-papier);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  padding: 22px 24px 24px;
  box-shadow: var(--schatten);
}

.vvk-kopf {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 16px;
}

/* Anschrift und Verweise oben, Öffnungszeiten darunter über die volle
   Breite. Nebeneinander wäre schöner, aber dann bleibt für eine Zeile wie
   „09:00–13:00 und 14:00–17:00" zu wenig Platz und sie bricht um. */
.vvk-koerper { display: block; }
.vvk-spalte-links { min-width: 0; }
.vvk-logo {
  flex: none;
  width: 68px; height: 68px;
  display: grid; place-items: center;
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--rund-klein);
  padding: 6px;
}
.vvk-logo img { width: 100%; height: 100%; object-fit: contain; }
/* Platzhalter, solange kein Logo vorliegt – hält die Zeile auf Höhe */
.vvk-logo-leer { background: var(--creme-hell); }
.vvk-logo-leer svg { width: 28px; height: 28px; color: var(--linie-gold); }

.vvk-name h3 {
  font-size: 1.05rem; line-height: 1.25; letter-spacing: .03em;
  margin: 0;
}
/* Steht auch ohne Text da, damit die Anschriften bündig beginnen */
.vvk-zusatz {
  margin: 3px 0 0;
  font-size: .84rem; line-height: 1.4; color: var(--text-leise);
}

.vvk-anschrift {
  font-style: normal; line-height: 1.6;
  font-size: .94rem; color: var(--text);
  margin: 0;
}
.vvk-kontakt {
  display: block; margin-top: 8px;
  font-size: .89rem; color: var(--text-leise);
}
.vvk-kontakt a { color: var(--gold-dunkel); }

.vvk-fehlt { color: var(--text-leise); font-style: italic; opacity: .8; }

/* Verweis auf die Seite des Geschäfts. Öffnet einen neuen Tab – ob der
   nach vorn kommt, entscheidet der Browser, nicht die Seite.
   Eine Zeile, auch bei zwei Verweisen; ohne Verweis bleibt sie leer. */
.vvk-weblinks {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px 20px; margin-top: 12px;
  min-height: 22px;
}
.vvk-web {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .88rem; font-weight: 500;
  color: var(--gold-dunkel);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.vvk-web:hover, .vvk-web:focus-visible {
  color: var(--gruen);
  border-bottom-color: var(--linie-gold);
}
.vvk-web svg { width: 14px; height: 14px; flex: none; }

.vvk-zeiten {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--linie);
}
.vvk-zeiten-titel {
  display: flex; align-items: center; gap: 8px;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-dunkel);
  cursor: pointer; list-style: none;
  padding: 2px 0;
}
.vvk-zeiten-titel::-webkit-details-marker { display: none; }
.vvk-zeiten-titel:hover { color: var(--gruen); }
.vvk-zeiten-titel svg {
  width: 13px; height: 13px; flex: none;
  transition: transform .2s ease;
}
.vvk-zeiten[open] > .vvk-zeiten-titel svg { transform: rotate(180deg); }
.vvk-zeiten dl { margin: 12px 0 0; }

/* Gleiche Höhe wie die aufklappbare Zeile, nur ohne Funktion */
.vvk-zeiten-leer .vvk-zeiten-titel {
  cursor: default; opacity: .65;
  padding-left: 21px;   /* dort, wo sonst der Pfeil steht */
}
.vvk-zeiten-leer .vvk-zeiten-titel:hover { color: var(--gold-dunkel); }
.vvk-tag {
  display: grid;
  grid-template-columns: minmax(54px, max-content) 1fr;
  gap: 4px 10px;
  font-size: .87rem; line-height: 1.5;
  padding: 4px 0;
}
.vvk-tag dt { font-weight: 600; color: var(--gruen); white-space: nowrap; }
.vvk-tag dd { margin: 0; color: var(--text-leise); font-variant-numeric: tabular-nums; }
/* „14:00–17:00" darf nicht mitten in der Spanne umbrechen. Umbrochen wird
   höchstens nach dem „und" – und das erst auf sehr schmalen Telefonen. */
.vvk-tag dd .spanne { white-space: nowrap; }
.vvk-tag.zu dd { font-style: italic; opacity: .75; }

/* ============================================================================
   8d3. Aufforderung zum Ticketkauf (mehrfach verwendet)
   ========================================================================== */

.cta-kasten {
  margin-top: 40px;
  text-align: center;
  background: var(--gruen);
  color: var(--creme);
  border-radius: var(--rund);
  padding: 38px 32px 34px;
}
.cta-kasten h3 {
  color: var(--gold-hell);
  font-size: 1.35rem; letter-spacing: .06em;
  margin: 0 0 10px;
}
.cta-kasten p {
  max-width: 46ch; margin: 0 auto 22px;
  color: rgba(239, 229, 202, .82);
  font-size: .97rem;
}
/* Ohne Zwischentext säße der Knopf sonst zu dicht unter der Zeile */
.cta-kasten h3 + .knopf { margin-top: 12px; }

.cta-frist {
  margin: 18px auto 0 !important;
  font-size: .84rem;
  color: rgba(239, 229, 202, .6) !important;
}

/* ============================================================================
   8d4. WS-KI
   ========================================================================== */

.wski { background: var(--creme-hell); }

.wski-kasten {
  background: var(--creme-papier);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  padding: 28px 30px 30px;
}

/* Text links, Logo rechts daneben */
.wski-kopf {
  display: flex; align-items: center; gap: 26px;
  margin-bottom: 24px;
}
.wski-worte { flex: 1; min-width: 0; }

.wski-logo { flex: none; display: block; }
.wski-logo img {
  /* Die Datei ist viel größer als die Anzeige – die Maße hier zählen */
  width: 100px; height: auto;
  transition: opacity .2s ease;
}
.wski-logo:hover img { opacity: .75; }

.wski-text {
  font-size: 1rem; line-height: 1.6; color: var(--text);
  text-align: center;
  text-wrap: balance;
  margin: 0;
}
.wski-text strong { color: var(--gruen); }

/* Die Grafik steht vollstaendig im Rahmen – nichts wird beschnitten */
.wski-grafik { display: block; border-radius: var(--rund-klein); overflow: hidden; }
.wski-grafik img {
  width: 100%; height: auto;
  aspect-ratio: 1520 / 821;
  object-fit: contain;
  background: #fff;
}

@media (max-width: 620px) {
  .wski-kasten { padding: 22px 20px 24px; }
  .wski-kopf { flex-direction: column-reverse; align-items: center; gap: 16px; }
  .wski-logo img { width: 84px; }
}

/* ============================================================================
   8e. Fußbereich
   ========================================================================== */

.fuss {
  background: var(--gruen-tief);
  color: rgba(239, 229, 202, .74);
  padding: 60px 0 30px;
  font-size: .92rem;
}
.fuss a { color: var(--gold-hell); }
.fuss h4 {
  font-size: .72rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 14px;
  font-family: var(--schrift-text);
}

.fuss-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 38px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(226, 220, 175, .14);
}

.fuss-liste { list-style: none; margin: 0; padding: 0; }
.fuss-liste li { margin-bottom: 9px; line-height: 1.45; }
.fuss-liste .ort { display: block; font-size: .78rem; color: rgba(239, 229, 202, .45); }

.fuss-marke {
  font-family: var(--schrift-titel);
  font-size: 1.4rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-hell); margin-bottom: 10px;
}

.fuss-unten {
  padding-top: 26px;
  display: flex; justify-content: space-between; gap: 18px;
  flex-wrap: wrap;
  font-size: .84rem; color: rgba(239, 229, 202, .5);
}
.fuss-unten nav { display: flex; gap: 20px; flex-wrap: wrap; }

/* ============================================================================
   9. Rechtstexte (Impressum, Datenschutz)
   ========================================================================== */

.rechts-kopf {
  background:
    radial-gradient(ellipse 60% 60% at 15% 0%, rgba(110, 140, 74, .18), transparent 62%),
    linear-gradient(168deg, #F4F1E2, var(--creme-papier));
  padding: 58px 0 44px;
  border-bottom: 1px solid var(--linie);
}
.rechts-kopf h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: .25em;
}
.rechts-kopf p {
  font-family: var(--schrift-serif); font-style: italic;
  font-size: 1.12rem; color: var(--text-leise); margin: 0;
}

.rechtstext { padding: 54px 0 84px; }

.rechtstext h2 {
  font-size: 1.42rem; letter-spacing: .04em;
  margin: 2.2em 0 .6em; padding-top: .9em;
  border-top: 1px solid var(--linie);
}
.rechtstext h2:first-of-type { margin-top: 0; border-top: none; padding-top: 0; }

.rechtstext h3 {
  font-family: var(--schrift-text);
  font-size: 1.02rem; font-weight: 700; color: var(--gruen);
  letter-spacing: 0; margin: 1.7em 0 .5em;
}

.rechtstext p, .rechtstext li { font-size: .98rem; }
.rechtstext ul, .rechtstext ol { padding-left: 1.3em; margin: 0 0 1.1em; }
.rechtstext li { margin-bottom: .5em; }

.rechtstext .anschrift {
  font-style: normal;
  background: var(--creme-hell);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--rund-klein) var(--rund-klein) 0;
  padding: 18px 22px; margin: 0 0 1.4em;
  line-height: 1.7;
}

/* Angaben-Tabelle im Impressum */
.rechtstext dl {
  display: grid; grid-template-columns: 210px 1fr;
  gap: 0; margin: 0 0 1.6em;
}
.rechtstext dt {
  font-weight: 600; color: var(--gruen); font-size: .92rem;
  padding: 11px 16px 11px 0; border-bottom: 1px solid var(--linie);
}
.rechtstext dd {
  margin: 0; padding: 11px 0;
  border-bottom: 1px solid var(--linie); font-size: .97rem;
}

/* Inhaltsverzeichnis */
.inhalt {
  background: var(--creme-hell);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  padding: 22px 26px; margin-bottom: 40px;
}
.inhalt strong {
  display: block; font-size: .72rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-dunkel); margin-bottom: 12px;
}
.inhalt ol { margin: 0; padding-left: 1.2em; columns: 2; column-gap: 34px; }
.inhalt li { margin-bottom: .35em; font-size: .93rem; break-inside: avoid; }

/* Warnhinweis: noch nicht juristisch geprüft */
.pruefhinweis {
  display: flex; gap: 15px; align-items: flex-start;
  background: rgba(139, 63, 80, .1);
  border: 1px dashed var(--wein-rose);
  border-radius: var(--rund-klein);
  padding: 18px 22px; margin-bottom: 38px;
  font-size: .92rem; line-height: 1.55;
}
.pruefhinweis .zeichen { font-size: 1.25rem; flex: none; line-height: 1.3; }
.pruefhinweis strong { color: var(--weinrot); }

.zurueck {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 40px; font-size: .93rem; font-weight: 500;
  text-decoration: none; color: var(--gruen);
}
.zurueck:hover { color: var(--gold-dunkel); }

@media (max-width: 620px) {
  .rechtstext dl { grid-template-columns: 1fr; }
  .rechtstext dt { padding-bottom: 2px; border-bottom: none; }
  .rechtstext dd { padding-top: 0; }
  .inhalt ol { columns: 1; }
}

/* ============================================================================
   Anpassung an kleine Bildschirme
   ========================================================================== */

@media (max-width: 980px) {
  .hero-innen { grid-template-columns: 1fr; gap: 46px; }
  .hero-plakat { max-width: 400px; margin-inline: auto; }
  .hero-stempel { left: auto; right: -14px; bottom: -14px; width: 100px; height: 100px; }
  .navi-links { display: none; }
  .navi-schalter { display: block; }

  .navi-links.offen {
    display: flex; flex-direction: column;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--creme-papier);
    border-bottom: 1px solid var(--linie);
    padding: 18px 22px 24px;
    gap: 4px;
    box-shadow: 0 12px 26px rgba(22, 38, 28, .12);
  }
  .navi-links.offen a { padding: 11px 0; width: 100%; border-bottom: 1px solid var(--linie); }
  .navi-innen { position: relative; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .abschnitt { padding: 62px 0; }
  .hero { padding: 48px 0 66px; }
  .hero-musik { flex-direction: column; align-items: flex-start; gap: 4px; border-radius: var(--rund); }
  .kasse-koerper { padding: 24px 20px; }
  .kasse-kopf { padding: 18px 20px; }
  .countdown, .countdown-aus { margin-left: 0; text-align: left; width: 100%; }
  .countdown-uhr { justify-content: flex-start; gap: 8px; }
  .cd-block { min-width: 0; flex: 1 1 0; }
  .vvk-karte { padding: 20px 18px 22px; }
  .vvk-tag { font-size: .83rem; column-gap: 8px; }
  .cta-kasten { padding: 30px 22px 28px; }
  .feld-paar { grid-template-columns: 1fr; }
  .galerie-feld:nth-child(6n + 1) { grid-column: span 1; aspect-ratio: 4 / 3; }
  .laufband-feld { width: 134px; height: 90px; }
  .wahl-leiste { padding: 14px 18px; }
  .wahl-leiste .knopf { width: 100%; }
  .hero-rahmen { padding: 5px; }
}

@media print {
  .navi, .laufband, .wahl-leiste, .hero-knoepfe, .lupe { display: none !important; }
  /* Beide Bänder zeigen dieselben Firmen. Im Ausdruck bliebe davon nur
     zweimal dieselbe Überschrift ohne Logos übrig – das obere fällt
     deshalb ganz weg, das untere bleibt mit seiner Fußzeile. */
  .partner-oben { display: none !important; }
  body { background: #fff; }
}