/* Bar La Gioia — gemeinsames Stilblatt aller Seiten.
   Erzeugt aus der freigegebenen Startseite (Entwurf E) am 01.09.2026.
   Farben kommen aus heros/_tokens.css, Schriften aus assets/schrift/.
   Geaendert wird HIER, nicht in den einzelnen Seiten. */

/* ═══════════════════════════════════════════════════════════════════
   Bar La Gioia · Startseite
   Aufgebaut auf Entwurf E. Der Kopf ist die Bar um 22 Uhr, darunter
   wechseln sich Tag und Nacht ab: hell, wo etwas gelesen wird
   (Feiern, Karte, Tisch), dunkel, wo die Bar sich zeigt.
   Der Name steht genau einmal groß — im h1. Die Kopfzeile trägt
   stattdessen das G, dasselbe wie an der Wand.
   Farben aus heros/_tokens.css, aus den eigenen Fotos quantisiert.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --dis:  "Instrument Serif", Didot, "Bodoni MT", Georgia, serif;
  --txt:  "Space Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif;

  /* Nacht */
  --n-grund:  #011600;
  --n-tief:   #0D1B15;
  --n-schrift:#E7D29E;
  --n-hell:   #EDE7BC;
  --n-still:  #BCAF8B;        /* 8,6:1 auf --n-grund */
  --n-linie:  rgba(231,210,158,.18);
  --n-linie-s:rgba(231,210,158,.32);

  /* Tag — Papier, nicht Beige: warm gebrochenes Weiß */
  --t-grund:  #F7F4EC;
  --t-zweit:  #EFEADC;
  --t-schrift:#1B0501;
  --t-still:  #5E4F42;        /* 7,2:1 auf --t-grund */
  --t-linie:  rgba(27,5,1,.14);
  --t-linie-s:rgba(27,5,1,.32);

  --rand: clamp(1.15rem, 4.5vw, 4.25rem);
  --bahn: 82rem;

  /* Eine Leiter statt zwanzig Einzelwerte. Gerundet bei 1440 px:
     11 · 14 · 16 · 20 · 22 · 35 · 52 · 68 · 80 */
  --f-mikro: clamp(.66rem,  .63rem + .12vw, .70rem);   /* Etiketten in Versalien */
  --f-nav:   clamp(.76rem,  .72rem + .20vw, .875rem);  /* Navigation, Ortzeile   */
  --f-klein: clamp(.80rem,  .77rem + .14vw, .86rem);   /* Kleingedrucktes        */
  --f-text:  clamp(.94rem,  .91rem + .16vw, 1rem);     /* Fließtext              */
  --f-lead:  clamp(1.05rem, .98rem + .38vw, 1.25rem);  /* Vorlauf, Hero-Absatz   */
  --f-h3:    clamp(1.10rem, 1rem   + .45vw, 1.40rem);  /* kleine Überschrift     */
  --f-zahl:  clamp(1.50rem, 1.10rem + 1.4vw, 2.20rem); /* Eckdaten               */
  --f-h2:    clamp(2rem,    1.15rem + 2.9vw, 3.25rem);
  --f-gross: clamp(2.8rem,  1.80rem + 3.6vw, 4.25rem); /* die zwei Wegzahlen     */
  --f-h1:    clamp(2.6rem,  1.50rem + 4.9vw, 5rem);

  /* Zwei Sperrungen statt sechs */
  --sp-etikett: .15em;
  --sp-nav: .1em;
}

html{ color-scheme: dark; }

body{
  font-family: var(--txt);
  font-size: 100%;
  line-height: 1.55;
  color: var(--n-hell);
  background: var(--n-grund);
  overflow-x: clip;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.kopf-innen > *, .buehne > *,
.band-innen > *, .bahn > *{ min-width: 0; }

.sprung{
  position: absolute; left: -9999px; top: 0; z-index: 99;
  display: inline-flex; align-items: center;
  min-height: 2.85rem; padding: .8rem 1.2rem;
  background: var(--n-hell); color: var(--t-schrift);
  font-size: var(--f-klein); font-weight: 600; text-decoration: none;
}
.sprung:focus{ left: 1rem; top: 1rem; }

:where(a, button, input, select, textarea):focus-visible{
  outline: 2px solid var(--lg-goldsand);
  outline-offset: 3px;
}
.teil--tag :where(a, button, input, select, textarea):focus-visible{
  outline-color: var(--lg-rot);
}

/* ══════════════════════════ Kopfzeile ══════════════════════════ */

.kopf{
  border-bottom: 1px solid var(--n-linie);
  background: var(--n-grund);
}
.kopf-innen{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .3rem var(--lg-4);
  padding: .7rem var(--rand);
  max-width: var(--bahn);
  margin-inline: auto;
}

/* Das G statt des Namens: derselbe Buchstabe, der an der Wand hängt.
   Der volle Name steht auf dieser Seite genau einmal, im h1. */
.marke{
  grid-column: 1; grid-row: 1; justify-self: start;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem;
  margin-block: -.4rem;
  font-family: var(--dis);
  font-size: 1.7rem; line-height: 1;
  color: var(--lg-neon);
  text-decoration: none;
  transition: color 200ms var(--lg-aus);
}
.marke:hover{ color: var(--n-hell); }
.marke span{ transform: translateY(-.06em); }

.wege-kopf{
  grid-column: 1 / -1; grid-row: 2;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0 1.05rem; margin: 0; padding: 0; list-style: none;
}
.wege-kopf a{
  display: inline-flex; align-items: center;
  padding-block: .85rem; margin-block: -.6rem;
  font-size: var(--f-nav);
  font-weight: 500; letter-spacing: var(--sp-nav); text-transform: uppercase;
  color: var(--n-hell); text-decoration: none;
}
.wege-kopf a:hover{
  text-decoration: underline;
  text-decoration-color: var(--lg-goldsand);
  text-underline-offset: .3em;
}

.sprache{
  grid-column: 2; grid-row: 1; justify-self: end;
  display: flex; align-items: center; gap: .45rem;
  font-size: var(--f-nav); font-weight: 600; letter-spacing: var(--sp-nav);
}
.sprache a{
  color: var(--n-still); text-decoration: none;
  display: inline-flex; align-items: center;
  padding: .82rem .4rem; margin: -.52rem -.3rem;
}
.sprache a[aria-current]{ color: var(--n-hell); }
.sprache a:hover{ color: var(--n-hell); }
.sprache span{ color: var(--n-linie-s); }

.kopf-tun{ display: none; }

/* ══════════════════════════ Bühne ══════════════════════════ */

.buehne{
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-content: end;
  min-height: 28rem;
  min-height: calc(100svh - 10.5rem);
}

.foto{
  position: absolute; inset: 0; z-index: 0; margin: 0;
  overflow: hidden; background: var(--n-grund);
  animation: auftauchen 800ms var(--lg-aus) both;
}

/* Foto und Film liegen deckungsgleich und tragen denselben Ausschnitt.
   Der Ursprung 52 % / 47 % ist das Neon-G: um diesen Punkt wird
   vergrößert, damit der Buchstabe der Anker des Bildes ist statt ein
   roter Fleck in der Ferne. */
.foto img,
.foto .film{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.45) translateY(-12%);
  transform-origin: 52% 47%;
}
/* Der Film liegt oben. Sein Standbild ist dasselbe Foto — beim
   Übergang springt nichts, bis dahin sieht man das Foto darunter. */
.foto .film{
  z-index: 1; opacity: 0;
  animation: filmauf 1100ms var(--lg-aus) 260ms both;
}

.schleier{
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom,
      rgba(1,22,0,.55) 0%, rgba(1,22,0,.2) 6%, rgba(1,22,0,0) 14%);
}

/* Hinweis auf den Film. Bewusst eine Zeile, kein Chip — ein Chip liest
   sich wie „das Bild ist KI". Das Foto ist echt, bewegt wird nur das
   Licht. Verschwindet zusammen mit dem Film, wenn keine Bewegung
   gewuenscht ist: dann gibt es nichts zu kennzeichnen. */
.ki-hinweis{
  position: absolute; z-index: 3;
  top: .55rem; right: var(--rand);
  margin: 0;
  font-size: var(--f-mikro); font-weight: 500;
  letter-spacing: var(--sp-etikett); text-transform: uppercase;
  color: rgba(231,210,158,.72);
  text-shadow: 0 1px 4px rgba(0,0,0,.75);
}

.satz{
  position: relative; z-index: 2;
  padding: 3.6rem var(--rand) clamp(1.1rem, 3vw, 3rem);
  max-width: 44rem;
  background: linear-gradient(to top,
      rgba(1,22,0,.97) 0%, rgba(1,22,0,.96) 72%, rgba(1,22,0,.88) 85%,
      rgba(1,22,0,.5) 93%, rgba(1,22,0,.15) 98%, rgba(1,22,0,0) 100%);
}
.satz > *{ animation: heben 620ms var(--lg-aus) both; }
.satz > *:nth-child(1){ animation-delay:  60ms; }
.satz > *:nth-child(2){ animation-delay: 140ms; }
.satz > *:nth-child(3){ animation-delay: 220ms; }
.satz > *:nth-child(4){ animation-delay: 300ms; }
.satz > *:nth-child(5){ animation-delay: 380ms; }

h1{ margin: 0 0 .8rem; font-weight: 400; }
h1 .name{
  display: block;
  font-family: var(--dis);
  font-size: var(--f-h1);
  line-height: .94; letter-spacing: -.005em;
  color: var(--n-hell);
}
h1 .ort{
  display: block; margin-top: .5rem; max-width: 46ch;
  font-family: var(--txt);
  font-size: var(--f-nav);
  font-weight: 500; line-height: 1.45;
  letter-spacing: var(--sp-nav); text-transform: uppercase;
  color: var(--lg-goldsand);
}

.unter{
  margin: 0 0 1.1rem; max-width: 42ch;
  font-size: var(--f-lead);
  line-height: 1.5; color: var(--n-hell);
}

.tun{ display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 .7rem; }

.knopf{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.85rem; padding: .7rem 1.15rem;
  border: 1px solid transparent; border-radius: 2px;
  font-family: var(--txt);
  font-size: var(--f-text);
  font-weight: 600; letter-spacing: .02em;
  text-decoration: none; white-space: nowrap;
}
.knopf--rot{
  background: var(--lg-rot); border-color: var(--lg-rot); color: var(--n-hell);
  transition: background-color 200ms var(--lg-aus), transform 160ms var(--lg-aus);
}
.knopf--rot:hover{ background: var(--lg-rot-hell); border-color: var(--lg-rot-hell); }
.knopf--linie{
  background: transparent; border-color: var(--n-linie-s); color: var(--n-hell);
  transition: border-color 200ms var(--lg-aus), color 200ms var(--lg-aus), transform 160ms var(--lg-aus);
}
.knopf--linie:hover{ border-color: var(--n-hell); color: var(--n-hell); }
.teil--tag .knopf--linie,
.teil--tag-zweit .knopf--linie{ border-color: var(--t-linie-s); color: var(--t-schrift); }
.teil--tag .knopf--linie:hover,
.teil--tag-zweit .knopf--linie:hover{ border-color: var(--t-schrift); }

.dazu{ margin: 0; font-size: var(--f-klein); color: var(--n-still); }
/* Auf hellem Grund war das Sandton-Grau bei 1,6:1 praktisch unsichtbar. */
.teil--tag .dazu, .teil--tag-zweit .dazu{ color: var(--t-still); }



/* ══════════════════════ Band unter der Bühne ══════════════════════ */

.band{
  background: var(--n-tief);
  border-top: 1px solid var(--n-linie);
  border-bottom: 1px solid var(--n-linie);
  font-size: var(--f-klein);
}
.band-innen{
  max-width: var(--bahn); margin-inline: auto;
  padding: .9rem var(--rand);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1.4rem;
  color: var(--n-still);
}
.band-innen b{ color: var(--lg-goldsand); font-weight: 600; letter-spacing: var(--sp-etikett);
  text-transform: uppercase; font-size: var(--f-mikro); }
.band-innen .woche{ display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; margin: 0; }
.band-innen p{ margin: 0; }

/* ══════════════════════════ Abschnitte ══════════════════════════ */

.teil{ padding: clamp(3.2rem, 8vw, 7rem) 0; }
.teil--nacht{ background: var(--n-grund); color: var(--n-hell); }
.teil--tag{ background: var(--t-grund); color: var(--t-schrift); }
.teil--tag-zweit{ background: var(--t-zweit); color: var(--t-schrift); }

.bahn{ max-width: var(--bahn); margin-inline: auto; padding-inline: var(--rand); }

.eyebrow{
  margin: 0 0 1rem; display: flex; align-items: center; gap: .8rem;
  font-size: var(--f-mikro); font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--lg-goldsand);
}
.teil--tag .eyebrow, .teil--tag-zweit .eyebrow{ color: var(--lg-gebrannt); }
.eyebrow::after{ content: ""; flex: 1 1 auto; height: 1px; background: currentColor; opacity: .3; }

.titel{
  margin: 0 0 1.1rem; max-width: 20ch; text-wrap: balance;
  font-family: var(--dis); font-weight: 400;
  font-size: var(--f-h2);
  line-height: 1.02; letter-spacing: -.01em;
}
.vorlauf{
  margin: 0 0 clamp(2rem, 4vw, 3.2rem); max-width: 54ch; text-wrap: pretty;
  font-size: var(--f-lead); line-height: 1.55;
}
.teil--nacht .vorlauf{ color: var(--n-still); }
.teil--tag .vorlauf, .teil--tag-zweit .vorlauf{ color: var(--t-still); }

/* ── Feiern ─────────────────────────────────────────────────────── */

.feier{ display: grid; gap: clamp(2rem, 4vw, 3.5rem); }

.eck{ margin: 0 0 2rem; display: grid; gap: 0; border-top: 1px solid var(--t-linie); }
.eck > div{
  display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: baseline;
  gap: .4rem 1rem; padding: .85rem 0; border-bottom: 1px solid var(--t-linie);
}
.eck dt{
  font-size: var(--f-mikro); font-weight: 600; letter-spacing: var(--sp-etikett);
  text-transform: uppercase; color: var(--t-still);
}
.eck dd{
  margin: 0; text-align: right;
  font-family: var(--dis); font-size: var(--f-zahl);
  line-height: 1;
}
.eck dd small{
  display: block; margin-top: .35rem;
  font-family: var(--txt); font-size: var(--f-klein); line-height: 1.5;
  letter-spacing: 0; color: var(--t-still); max-width: 38ch; margin-left: auto;
  text-wrap: pretty;
}

.kondition{ list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.kondition li{ display: grid; grid-template-columns: 8.5rem minmax(0,1fr); gap: .1rem .9rem; }
.kondition span:first-child{
  font-size: var(--f-mikro); font-weight: 600; letter-spacing: var(--sp-etikett);
  text-transform: uppercase; color: var(--t-still); padding-top: .18rem;
}
.kondition span:last-child{ font-size: var(--f-text); line-height: 1.5; }

.formular{
  display: grid; gap: .8rem; align-content: start;
  padding: clamp(1.3rem, 3vw, 2rem);
  background: var(--t-zweit); border: 1px solid var(--t-linie);
}
.teil--tag-zweit .formular{ background: var(--t-grund); }
.formular h3{
  margin: 0; font-family: var(--dis); font-weight: 400;
  font-size: var(--f-h3); line-height: 1.15;
}
.formular .hinweis{ margin: 0 0 .3rem; font-size: var(--f-klein); line-height: 1.5; color: var(--t-still); }

/* Honigtopf gegen selbsttätige Absender. Nicht display:none — das erkennen viele
   Skripte; stattdessen aus dem sichtbaren Bereich geschoben. Menschen sehen und
   erreichen das Feld nicht (aria-hidden, tabindex="-1"), Maschinen füllen es aus. */
.honig{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.paar{ display: grid; gap: .8rem; }
.feld{ display: grid; gap: .28rem; }
.feld > span{
  font-size: var(--f-mikro); font-weight: 600; letter-spacing: var(--sp-etikett);
  text-transform: uppercase; color: var(--t-still);
}
.feld input, .feld select, .feld textarea{
  font: inherit; font-size: var(--f-text); color: var(--t-schrift);
  background: var(--t-grund); border: 1px solid var(--t-linie-s); border-radius: 2px;
  padding: .7rem .75rem; min-height: 2.85rem; width: 100%;
}
.teil--tag-zweit .feld input, .teil--tag-zweit .feld select, .teil--tag-zweit .feld textarea{
  background: var(--t-zweit);
}
.feld textarea{ min-height: 6rem; resize: vertical; }
.formular button{ justify-self: start; cursor: pointer; }
.direkt{ margin: 0; font-size: var(--f-klein); color: var(--t-still); }
/* Mailadresse mitten im Satz — bewusste Ausnahme von den 44 px, sonst
   zerreisst der Kasten den Satzspiegel. Dafuer sichtbar unterstrichen. */
.direkt a{
  display: inline-flex; align-items: center; min-height: 1.6rem;
  color: var(--t-schrift); text-decoration: underline;
  text-decoration-color: var(--t-linie-s); text-underline-offset: .25em;
}
.direkt a:hover{ text-decoration-color: var(--t-schrift); }

.beleg{ display: grid; gap: 1rem; margin-top: clamp(2rem, 4vw, 3rem); }
.beleg figure{ margin: 0; }
.beleg img{ width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.beleg figcaption{
  margin-top: .55rem; font-size: var(--f-mikro); font-weight: 500;
  letter-spacing: var(--sp-etikett); text-transform: uppercase; color: var(--t-still);
}

/* ── Termine ────────────────────────────────────────────────────── */

.termine{ list-style: none; margin: 0 0 clamp(2rem,4vw,3rem); padding: 0;
  border-top: 1px solid var(--n-linie); }
.termin{
  display: grid; gap: .5rem 1.5rem; align-items: start;
  padding: 1.4rem 0; border-bottom: 1px solid var(--n-linie);
}
.termin .wann{
  margin: 0; font-family: var(--dis); font-size: var(--f-h3); line-height: 1.1;
  color: var(--lg-goldsand);
}
.termin .wann small{ display: block; margin-top: .25rem; font-family: var(--txt);
  font-size: var(--f-klein); color: var(--n-still); }
.termin h3{ margin: 0 0 .35rem; font-size: var(--f-text); font-weight: 600; letter-spacing: .01em; }
.termin p{ margin: 0; font-size: var(--f-text); line-height: 1.55; color: var(--n-still); max-width: 46ch; }
.termin .marker{
  justify-self: start; align-self: center;
  padding: .3rem .6rem; border: 1px dashed var(--n-linie-s); border-radius: 2px;
  font-size: var(--f-mikro); letter-spacing: .06em; text-transform: uppercase; color: var(--n-hell);
  white-space: nowrap;
}

.verteiler{ display: grid; gap: .6rem; max-width: 34rem; }
.verteiler label{ font-size: var(--f-mikro); font-weight: 600; letter-spacing: var(--sp-etikett);
  text-transform: uppercase; color: var(--lg-goldsand); }
.verteiler .zeile{ display: grid; gap: .6rem; }
.verteiler input{
  font: inherit; font-size: var(--f-text); color: var(--n-hell);
  background: var(--n-tief); border: 1px solid var(--n-linie-s); border-radius: 2px;
  padding: .7rem .75rem; min-height: 2.85rem; width: 100%;
}
.verteiler input::placeholder{ color: var(--n-still); opacity: .7; }
.verteiler button{ justify-self: start; cursor: pointer; }
.verteiler p{ margin: 0; font-size: var(--f-klein); color: var(--n-still); }

/* ── Drei Gerichte ──────────────────────────────────────────────── */

.drei{ display: grid; gap: clamp(1.4rem, 3vw, 2.4rem); margin-bottom: clamp(2.5rem,5vw,4rem); }
.drei figure{ margin: 0; }
.drei img{ width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.drei figcaption{
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .2rem .8rem;
  margin-top: .8rem; padding-top: .6rem; border-top: 1px solid var(--t-linie);
}
.drei h3{ margin: 0; font-family: var(--dis); font-weight: 400; font-size: var(--f-h3); line-height: 1.15; }
.drei .preis{ margin: 0; font-size: var(--f-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.drei figcaption p:last-child{
  grid-column: 1 / -1; margin: .3rem 0 0; font-size: var(--f-klein);
  line-height: 1.55; color: var(--t-still); max-width: 40ch;
}

/* ── Karte ──────────────────────────────────────────────────────── */

.karte-netz{ columns: 1; column-gap: clamp(2rem, 5vw, 4rem); }
/* Eine einzelne Gruppe auf einer Unterseite bleibt einspaltig und schmal —
   sonst reißt eine Liste aus acht Zeilen über die ganze Bahn auseinander. */
.karte-netz--eine{ columns: 1 !important; max-width: 34rem; }
.karte-netz > div{ break-inside: avoid; margin-bottom: clamp(1.8rem, 4vw, 3rem); }
.karte-netz h3{
  margin: 0 0 .9rem; padding-bottom: .5rem; border-bottom: 1px solid var(--t-linie-s);
  font-size: var(--f-mikro); font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--lg-gebrannt);
}
.karte-netz ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: .62rem; }
.karte-netz li{ display: flex; align-items: baseline; gap: .4rem; font-size: var(--f-text); }
.karte-netz li > span:first-child{ flex: 0 1 auto; }
.karte-netz li em{
  display: block; font-style: normal; font-size: var(--f-klein); line-height: 1.4;
  color: var(--t-still); margin-top: .1rem;
}
/* Die Fuehrungspunkte gehoeren auf die ERSTE Zeile, auf Hoehe des Preises —
   nicht an den Fuss des Kastens, sonst laufen sie bei zweizeiligen Namen
   unter dem Preis durch. Ein leeres Flexkind nimmt seine Unterkante als
   Grundlinie, damit sitzt die Linie genau dort. */
.fuell{ flex: 1 1 auto; align-self: baseline;
  position: relative; top: .16em;
  border-bottom: 1px dotted var(--t-linie-s); min-width: 1.2rem; }
.eur{ flex: none; font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
.karte-fuss{
  margin: clamp(2rem,4vw,3rem) 0 0; max-width: 62ch;
  font-size: var(--f-klein); line-height: 1.6; color: var(--t-still);
  padding-top: 1.1rem; border-top: 1px solid var(--t-linie);
}

/* ── Der Name ───────────────────────────────────────────────────── */

.name-teil{ position: relative; overflow: hidden; }
.name-teil .bahn{ position: relative; z-index: 1; }
.signet{ width: 3.6rem; height: auto; margin-bottom: 1.6rem; border-radius: 50%; }
.name-teil blockquote{
  margin: 0 0 1rem; max-width: 24ch;
  font-family: var(--dis); font-weight: 400;
  font-size: var(--f-h2); line-height: 1.08;
  color: var(--n-hell);
}
.name-teil blockquote em{ font-style: italic; color: var(--lg-goldsand); }
.name-teil .quelle{ margin: 0; font-size: var(--f-klein); letter-spacing: var(--sp-nav);
  text-transform: uppercase; color: var(--n-still); }

/* ── Tisch und Ort ──────────────────────────────────────────────── */

.wege{ display: grid; gap: 1px; background: var(--t-linie);
  border: 1px solid var(--t-linie); margin-bottom: clamp(2.5rem,5vw,4rem); }
.weg{ background: var(--t-grund); padding: clamp(1.3rem,3vw,2rem); display: grid;
  align-content: start; gap: .7rem; }
.teil--tag-zweit .weg{ background: var(--t-zweit); }
.weg .zahl{
  margin: 0; font-family: var(--dis); font-size: var(--f-gross);
  line-height: .9; display: flex; align-items: baseline; gap: .4rem;
}
.weg .zahl small{ font-family: var(--txt); font-size: var(--f-mikro); font-weight: 600;
  letter-spacing: var(--sp-etikett); text-transform: uppercase; color: var(--t-still); }
.weg p:not(.zahl){ margin: 0; font-size: var(--f-text); line-height: 1.55; color: var(--t-still); max-width: 38ch; }
.weg .knopf{ justify-self: start; margin-top: .3rem; }

.ort-netz{ display: grid; gap: clamp(1.5rem,4vw,3rem); }
.ort-netz img{ width: 100%; height: auto; }
.fakten{ list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--t-linie); }
.fakten li{
  display: grid; grid-template-columns: 7.5rem minmax(0,1fr); gap: .2rem 1rem;
  padding: .8rem 0; border-bottom: 1px solid var(--t-linie);
}
.fakten b{
  font-size: var(--f-mikro); font-weight: 600; letter-spacing: var(--sp-etikett);
  text-transform: uppercase; color: var(--t-still); padding-top: .2rem;
}
.fakten span{ font-size: var(--f-text); line-height: 1.5; }
.fakten a{
  /* eigenstaendiger Link, kein Wort im Satz: volle 44 px Trefferhoehe,
     der negative Aussenabstand haelt die Zeile bei ihren 22 px. */
  display: inline-flex; align-items: center; min-height: 2.85rem; margin-block: -.65rem;
  color: var(--t-schrift); text-decoration: underline;
  text-decoration-color: var(--t-linie-s); text-underline-offset: .25em;
}
.fakten a:hover{ text-decoration-color: var(--t-schrift); }

/* ── Fuß ────────────────────────────────────────────────────────── */

.fuss{ background: var(--n-tief); border-top: 1px solid var(--n-linie);
  padding: clamp(2.5rem,5vw,4rem) 0 clamp(1.6rem,3vw,2.4rem); }
.fuss-netz{ display: grid; gap: 1.8rem clamp(1.5rem,4vw,3rem); }
.fuss h2{
  margin: 0 0 .9rem; font-size: var(--f-mikro); font-weight: 600;
  letter-spacing: var(--sp-etikett); text-transform: uppercase; color: var(--lg-goldsand);
}
.fuss ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem;
  font-size: var(--f-klein); color: var(--n-still); }
.fuss a{
  display: inline-flex; align-items: center; min-height: 2.85rem; margin-block: -.55rem;
  color: var(--n-hell); text-decoration: underline;
  text-decoration-color: var(--n-linie-s); text-underline-offset: .25em;
}
.fuss a:hover{ text-decoration-color: var(--n-hell); }
.fuss-zeile{
  margin-top: clamp(2rem,4vw,3rem); padding-top: 1.1rem;
  border-top: 1px solid var(--n-linie);
  display: flex; flex-wrap: wrap; gap: .4rem 1.4rem;
  font-size: var(--f-klein); color: var(--n-still);
}
.fuss-zeile p{ margin: 0; }
.fuss-zeile a{ margin-block: -.75rem; }

/* ══════════════════════════ Bewegung ══════════════════════════ */

@keyframes auftauchen{ from{ opacity: 0 } to{ opacity: 1 } }
@keyframes filmauf{ from{ opacity: 0 } to{ opacity: 1 } }
@keyframes heben{
  from{ opacity: 0; transform: translateY(14px) scale(.985) }
  to  { opacity: 1; transform: none }
}

/* ══════════════════════════ Breiten ══════════════════════════ */

@media (min-width: 34em){
  .beleg{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .drei{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .paar{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .termin{ grid-template-columns: 9rem minmax(0,1fr) auto; }
  .verteiler .zeile{ grid-template-columns: minmax(0,1fr) auto; }
  .wege{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (min-width: 48em){
  .buehne{ min-height: calc(100svh - 12rem); }
  .karte-netz{ columns: 2; }
  .ort-netz{ grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); align-items: start; }
  .fuss-netz{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (min-width: 64em){
  .kopf-innen{
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: var(--lg-6); padding-top: .95rem; padding-bottom: .95rem;
  }
  .wege-kopf{ grid-column: 2; grid-row: 1; gap: 1.75rem; }
  .sprache{ grid-column: 3; grid-row: 1; }
  .kopf-tun{ grid-column: 4; grid-row: 1; display: flex; gap: .55rem; }
  .kopf-tun a{
    display: inline-flex; align-items: center; min-height: 2.75rem;
    padding: .45rem .95rem; border: 1px solid var(--n-linie-s); border-radius: 2px;
    font-size: var(--f-klein); font-weight: 600; letter-spacing: .03em;
    color: var(--n-hell); text-decoration: none; white-space: nowrap;
    transition: border-color 200ms var(--lg-aus), transform 160ms var(--lg-aus);
  }
  .kopf-tun a:hover{ border-color: var(--n-hell); }

  .buehne{
    align-content: stretch;
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 38vw);
    min-height: calc(100svh - 9.5rem);
  }
  .foto{
    position: relative; inset: auto; grid-column: 2; grid-row: 1;
    height: 100%; border-left: 1px solid var(--n-linie);
  }
  .foto img, .foto .film{ transform: scale(1.42); }

  /* Kein Schleier über dem Foto — nur das Neon fällt als Licht
     in die dunkle Spalte hinein. */
  .schleier{
    background:
      radial-gradient(32% 36% at 100% 40%, rgba(226,58,46,.13), rgba(226,58,46,0) 72%),
      linear-gradient(to right, rgba(1,22,0,.5) 0%, rgba(1,22,0,0) 46%);
  }

  /* In der Saeule steht der Hinweis unten an der Kante des Bildes. */
  .ki-hinweis{ top: auto; bottom: .6rem; right: .9rem; }

  .satz{
    grid-column: 1; grid-row: 1; align-self: end;
    max-width: 41rem; padding-right: var(--lg-8);
    /* Der Satz sitzt im unteren Drittel, nicht auf der Kante: seit die
       dreispaltige Leiste weg ist, wuerde er sonst unten kleben und oben
       ein Loch lassen. */
    padding-bottom: clamp(3rem, 14vh, 9rem);
    background: none;
  }
  h1{ margin-bottom: 1.1rem; }
  .unter{ margin-bottom: 1.5rem; }
  .tun{ gap: .7rem; margin-bottom: .9rem; }
  .knopf{ min-height: 3rem; padding: .8rem 1.5rem; }

  .feier{ grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: start; }
  .karte-netz{ columns: 3; }
}

@media (min-width: 90em){
  .buehne{ grid-template-columns: minmax(0, 1fr) minmax(17rem, 36vw); }
}

@media (max-height: 34rem){
  .buehne{ min-height: 0; }
  h1 .name{ font-size: clamp(2.1rem, 1.2rem + 3.4vw, 3rem); }
  .satz{ padding-top: 2.4rem; }
}

@media (prefers-reduced-motion: reduce){
  /* Kein flackerndes Neon für Menschen, die keine Bewegung wollen. */
  .foto .film,
  .ki-hinweis{ display: none; }
  .foto, .satz > *{ animation: none; opacity: 1; transform: none; }
  .knopf, .kopf-tun a, .wege-kopf a, .marke{ transition: none; }
  .knopf:hover, .knopf:active, .kopf-tun a:hover, .kopf-tun a:active{ transform: none; }
}


/* ═══════════════════════════════════════════════════════════════════
   Ab hier: was die Unterseiten zusätzlich brauchen.
   Die Startseite trägt eine Bühne mit Bild. Jede Unterseite trägt
   stattdessen ein Kopfstück aus Schrift — dieselbe Leiter, kein Foto,
   damit die erste Zeile sofort steht und nichts nachladen muss.
   ═══════════════════════════════════════════════════════════════════ */

.kopfstueck{
  background: var(--n-grund); color: var(--n-hell);
  padding: clamp(2.6rem, 7vw, 5.25rem) 0 clamp(2rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--n-linie);
}
.kopfstueck h1{
  margin: 0 0 1rem; max-width: 17ch; text-wrap: balance;
  font-family: var(--dis); font-size: var(--f-h2);
  line-height: 1.02; letter-spacing: -.01em; color: var(--n-hell);
}
.kopfstueck .unter{ margin: 0; color: var(--n-schrift); }
.kopfstueck .tun{ margin: 1.5rem 0 0; }
.kopfstueck .dazu{ margin-top: .8rem; }
.kopfstueck :where(a, button):focus-visible{ outline: 2px solid var(--n-hell); outline-offset: 3px; }
.kopfstueck-text > *:last-child{ margin-bottom: 0; }

/* Rechts neben dem Kopfstück stand eine leere Fläche. Dort steht jetzt ein
   Foto — auf jeder Unterseite ein anderes. Auf dem Telefon liegt es unter
   dem Text, quer, damit die Seite nicht zur Rolltreppe wird. */
.kopfstueck-bild{ margin: clamp(1.6rem, 4vw, 2.4rem) 0 0; }
.kopfstueck-bild img{ width: 100%; height: auto; aspect-ratio: 16 / 9;
  object-fit: cover; display: block; }
@media (min-width: 64em){
  .kopfstueck .bahn{ display: grid; align-items: center;
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 34vw);
    gap: clamp(2rem, 5vw, 4.5rem); }
  .kopfstueck-text{ grid-column: 1; }
  /* Das Bild darf die Hoehe des Kopfstuecks NICHT bestimmen. Sonst zieht ein
     Hochformat den Kopf auf einen ganzen Bildschirm und die Ueberschrift
     rutscht unter die Falz. Deshalb: der Kasten wird von der Textspalte
     gestreckt, das Bild liegt absolut darin und fuellt ihn. */
  .kopfstueck-bild{ grid-column: 2; grid-row: 1 / -1; align-self: stretch;
    margin: 0; position: relative; min-height: 15rem; }
  .kopfstueck-bild img{ position: absolute; inset: 0;
    width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
  .kopfstueck-bild .leuchtet{ position: absolute; inset: 0; }
}

/* ── Vier Türen auf der Startseite ───────────────────────────────────
   Jede Kachel ist EIN Link. Damit ist die Trefferfläche das ganze Bild
   und nicht nur die Zeile darunter — das löst die 44-px-Regel von selbst. */

.tueren{ list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(1.4rem, 3vw, 2.2rem); }
.tuer{ display: grid; align-content: start; gap: .7rem;
  color: inherit; text-decoration: none; }
.tuer img{ width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  transition: opacity 200ms var(--lg-aus); }
.tuer h3{ margin: 0; padding-top: .55rem; border-top: 1px solid var(--t-linie);
  font-family: var(--dis); font-weight: 400; font-size: var(--f-h3); line-height: 1.15; }
.tuer p{ margin: 0; font-size: var(--f-klein); line-height: 1.55;
  color: var(--t-still); max-width: 34ch; }
.tuer .weiter{ font-size: var(--f-mikro); font-weight: 600;
  letter-spacing: var(--sp-etikett); text-transform: uppercase; color: var(--lg-gebrannt); }
.tuer:hover img{ opacity: .88; }
.tuer:hover h3{ text-decoration: underline; text-underline-offset: .18em;
  text-decoration-color: var(--t-linie-s); }

/* ── Fließtext: Impressum, Datenschutz, Erklärendes ─────────────── */

.text{ max-width: 64ch; }
.text h2{ margin: 2.3rem 0 .7rem; font-family: var(--dis); font-weight: 400;
  font-size: var(--f-h3); line-height: 1.2; }
.text > h2:first-child{ margin-top: 0; }
.text p, .text li, .text dd{ font-size: var(--f-text); line-height: 1.65; color: var(--t-still); }
.text p{ margin: 0 0 .9rem; }
.text ul{ margin: 0 0 1rem; padding-left: 1.1rem; }
.text li{ margin-bottom: .3rem; }
.text dl{ margin: 0 0 1rem; }
.text dt{ font-size: var(--f-text); font-weight: 600; color: var(--t-schrift); }
.text dd{ margin: 0 0 .6rem; }
/* Links mitten im Satz bekommen keinen 44-px-Kasten — der zerrisse den
   Satzspiegel. Stattdessen sichtbare Unterstreichung und ueber den
   Innenabstand eine Trefferhoehe von rund 27 px. Bewusstes Risiko,
   so in doku/pruefung/FERTIGSTELLEN.md §1.1 ausdruecklich erlaubt. */
/* :not(.knopf) ist Pflicht und keine Feinheit. Ein Selektor wie
   ".karte-fuss a" ist spezifischer als ".knopf--rot" und faerbte die Schrift
   auf dem roten Knopf dunkel: gemessen 2,49:1 statt der geforderten 4,5:1,
   dazu eine Unterstreichung quer durch den Knopf. Aufgefallen ist es erst
   am 02.09.2026 auf den neuen Quittungsseiten — vorher stand nirgends ein
   roter Knopf in einem dieser Absaetze. */
.text a:not(.knopf), .karte-fuss a:not(.knopf), .direkt a:not(.knopf),
.quelle a:not(.knopf), .vorlauf a:not(.knopf), .kondition a:not(.knopf),
.unter a:not(.knopf), .anfahrt a:not(.knopf){
  color: var(--t-schrift); text-decoration: underline;
  text-decoration-color: var(--t-linie-s); text-underline-offset: .25em;
  padding-block: .3rem;
}
.text a:not(.knopf):hover, .karte-fuss a:not(.knopf):hover,
.direkt a:not(.knopf):hover, .vorlauf a:not(.knopf):hover,
.kondition a:not(.knopf):hover,
.anfahrt a:not(.knopf):hover{ text-decoration-color: var(--t-schrift); }
.teil--nacht .karte-fuss a:not(.knopf),
.teil--nacht .vorlauf a:not(.knopf), .kopfstueck .unter a:not(.knopf),
.verteiler p a:not(.knopf){ color: var(--n-hell); text-decoration: underline;
  text-decoration-color: var(--n-linie-s); text-underline-offset: .25em;
  padding-block: .35rem; }
.teil--nacht .karte-fuss a:not(.knopf):hover,
.teil--nacht .vorlauf a:not(.knopf):hover, .kopfstueck .unter a:not(.knopf):hover,
.verteiler p a:not(.knopf):hover{ text-decoration-color: var(--n-hell); }

/* Sichtbare Lücke: was vor der Veröffentlichung noch eingetragen wird.
   Rot gestrichelt, damit es niemand überliest und niemand live schaltet. */
.offen{ margin: 1rem 0 1.5rem; padding: .95rem 1.1rem;
  border: 1px dashed var(--lg-rot); background: rgba(158, 31, 24, .05); }
.offen b{ display: block; margin-bottom: .3rem;
  font-size: var(--f-mikro); font-weight: 700; letter-spacing: var(--sp-etikett);
  text-transform: uppercase; color: var(--lg-rot); }
.offen p{ margin: 0; font-size: var(--f-klein); line-height: 1.6; color: var(--t-schrift); }
.offen p + p{ margin-top: .4rem; }

/* Derselbe Kasten in ruhig: fuer Absaetze, die dauerhaft auf der Seite
   stehen und nur hervorgehoben gehoeren — nicht fuer offene Punkte. */
.hinweis{ margin: 1rem 0 1.5rem; padding: .95rem 1.1rem;
  border: 1px solid var(--t-linie-s); background: var(--t-zweit); }
.hinweis b{ display: block; margin-bottom: .3rem;
  font-size: var(--f-mikro); font-weight: 700; letter-spacing: var(--sp-etikett);
  text-transform: uppercase; color: var(--t-schrift); }
.hinweis p{ margin: 0; font-size: var(--f-klein); line-height: 1.6; color: var(--t-schrift); }
.hinweis p + p{ margin-top: .4rem; }

/* Häufige Fragen benutzen dasselbe Gerüst wie die Faktenliste — nur ist
   die linke Spalte hier eine ganze Frage und kein Etikett. */
.fragen li{ grid-template-columns: minmax(0,1fr); gap: .35rem; }
.fragen b{ font-size: var(--f-text); font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--t-schrift); padding-top: 0; }
.fragen span{ color: var(--t-still); max-width: 62ch; }

/* ── Anfahrt: drei Wege nebeneinander ───────────────────────────── */

.anfahrt{ list-style: none; margin: 0 0 clamp(2rem,4vw,3rem); padding: 0;
  display: grid; gap: 1px; background: var(--t-linie); border: 1px solid var(--t-linie); }
.anfahrt li{ background: var(--t-zweit); padding: clamp(1.1rem, 2.5vw, 1.6rem);
  display: grid; gap: .35rem; align-content: start; }
.teil--tag-zweit .anfahrt li{ background: var(--t-grund); }
.anfahrt b{ font-size: var(--f-mikro); font-weight: 600; letter-spacing: var(--sp-etikett);
  text-transform: uppercase; color: var(--t-still); }
.anfahrt span{ font-size: var(--f-text); line-height: 1.5; }

/* ── Rückblick auf vergangene Formate ────────────────────────────
   Die Plakate tragen alte Datumsangaben im Bild. Sie sind nur zulässig,
   wenn sichtbar als Rückblick beschriftet — genau dafür ist .war da. */

.war figcaption{ grid-template-columns: minmax(0,1fr); }
.war img{ aspect-ratio: 4 / 5; object-fit: contain; background: var(--t-zweit);
  padding: clamp(.7rem, 2vw, 1.2rem); }
.war .marke-alt{ margin: 0; font-size: var(--f-mikro); font-weight: 600;
  letter-spacing: var(--sp-etikett); text-transform: uppercase; color: var(--lg-gebrannt); }

@media (min-width: 34em){
  .tueren{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .tuer img{ aspect-ratio: 4 / 5; }
  .anfahrt{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .war{ grid-template-columns: repeat(2, minmax(0,1fr)); max-width: 48rem; }
}
/* ── Bilderband: eine Reihe Fotos, die den Raum zeigt statt ihn zu beschreiben.
   Hochformate nebeneinander, auf dem Telefon zwei, sonst drei oder vier. ── */

.bilderband{ list-style: none; margin: 0 0 clamp(2rem,4vw,3rem); padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(.5rem, 1.4vw, 1rem); }
.bilderband li{ margin: 0; }
.bilderband figure{ margin: 0; }
.bilderband img{ width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.bilderband figcaption{ margin-top: .5rem; font-size: var(--f-mikro); font-weight: 500;
  letter-spacing: var(--sp-etikett); text-transform: uppercase; color: var(--t-still); }
.teil--nacht .bilderband figcaption{ color: var(--n-still); }

/* ── Wege in die Karte: sechs eigene Seiten, als Liste mit einem Satz je Weg ── */

.kartenwege{ list-style: none; margin: 0 0 clamp(2rem,4vw,3rem); padding: 0;
  display: grid; gap: 1px; background: var(--t-linie);
  border: 1px solid var(--t-linie); }
.kartenwege li{ margin: 0; }
.kartenwege a{
  display: grid; gap: .3rem; align-content: start;
  background: var(--t-grund); padding: clamp(1rem,2.4vw,1.5rem);
  color: inherit; text-decoration: none; min-height: 100%;
  transition: background-color 200ms var(--lg-aus);
}
.teil--tag-zweit .kartenwege a{ background: var(--t-zweit); }
.kartenwege a:hover{ background: var(--t-zweit); }
.teil--tag-zweit .kartenwege a:hover{ background: var(--t-grund); }
.kartenwege b{ font-family: var(--dis); font-weight: 400; font-size: var(--f-h3);
  line-height: 1.15; }
.kartenwege span{ font-size: var(--f-klein); line-height: 1.55; color: var(--t-still);
  max-width: 40ch; }
.kartenwege em{ font-style: normal; font-size: var(--f-mikro); font-weight: 600;
  letter-spacing: var(--sp-etikett); text-transform: uppercase; color: var(--lg-gebrannt); }

@media (min-width: 34em){
  .kartenwege{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 48em){
  .fragen li{ grid-template-columns: minmax(0, 22rem) minmax(0,1fr); gap: .35rem 2.5rem; }
  .bilderband{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .bilderband--vier{ grid-template-columns: repeat(4, minmax(0,1fr)); }
  /* Zwei Bilder in einem Dreierraster lassen eine Spalte leer stehen. */
  .bilderband--zwei{ grid-template-columns: repeat(2, minmax(0,1fr)); max-width: 58rem; }
  .kartenwege{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .fuss-netz{ grid-template-columns: repeat(5, minmax(0,1fr)); }
}
@media (min-width: 64em){
  .tueren{ grid-template-columns: repeat(4, minmax(0,1fr)); }
  .kopfstueck h1{ max-width: 20ch; }
}
@media (prefers-reduced-motion: reduce){
  .tuer img{ transition: none; }
}


/* ═══════════════════════════════════════════════════════════════════
   Neon, Hintergrund-G und Abschlussband
   ═══════════════════════════════════════════════════════════════════ */

/* ── Das Neon atmet ──────────────────────────────────────────────
   Auf mehreren Fotos steht echtes Neon: das G über der Bank, der
   AMORE-Schriftzug, der Kopf über dem Tresen. Das Foto bleibt, wie es
   ist; darüber liegt ein weicher Lichtkegel an der Stelle, an der das
   Neon wirklich sitzt, und der wird langsam heller und dunkler.
   Position und Radius kommen je Bild aus --nx / --ny / --nr, gemessen
   am 3:4-Ausschnitt. Nur opacity wird bewegt — das kostet nichts. */

.leuchtet{ position: relative; display: block; overflow: hidden; }
.leuchtet img{ display: block; }
.leuchtet .glut{
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(circle var(--nr, 22%) at var(--nx, 50%) var(--ny, 45%),
    rgba(226, 58, 46, .60), rgba(226, 58, 46, .26) 42%, rgba(226, 58, 46, 0) 72%);
  animation: neonatmen 4.6s ease-in-out infinite;
}
.leuchtet--warm .glut{
  background: radial-gradient(circle var(--nr, 22%) at var(--nx, 50%) var(--ny, 45%),
    rgba(237, 231, 188, .55), rgba(205, 162, 91, .24) 42%, rgba(205, 162, 91, 0) 72%);
}
@keyframes neonatmen{
  0%, 100%{ opacity: .40; }
  50%     { opacity: .95; }
}

/* ── Das G im Hintergrund ────────────────────────────────────────
   Füllt die Flächen, die sonst leer blieben — im Kopf der Bühne, im
   Namensteil, im Abschlussband. Rein dekorativ, deshalb per ::before
   und ohne eigenen Text im Dokument. */

.mit-g{ position: relative; overflow: hidden; isolation: isolate; }
.mit-g::before{
  content: "G";
  position: absolute; z-index: -1; pointer-events: none;
  font-family: var(--dis); font-weight: 400; line-height: 1;
  /* Der Buchstabe steht GANZ im Bild — keine negativen Abstaende, keine
     angeschnittene Kante. Ein halbes G liest sich als roter Klecks, und
     drei davon uebereinander sind Tapete. Im Kopf der Seite steht ohnehin
     schon zweimal ein G: das echte Neon im Foto und die Marke in der
     Kopfzeile. Deshalb gibt es das Hintergrund-G nur noch an EINER Stelle,
     im Band ueber dem Fuss — dort, wo vorher gar nichts war. */
  font-size: clamp(6rem, 16vw, 15rem);
  left: 6%; bottom: 8%;
  color: var(--n-hell); opacity: .05;
}
.mit-g--rechts::before{ left: auto; right: 7%; }
/* Der Namensteil hat rechts eine ganze leere Haelfte. Dort darf das G
   groesser stehen — es ist die Seite, auf der es um den Namen geht. */
.name-teil.mit-g::before{ font-size: clamp(8rem, 26vw, 26rem); bottom: 12%; right: 8%; }
@media (max-width: 47.99em){
  .name-teil.mit-g::before{ font-size: clamp(7rem, 34vw, 12rem); bottom: 6%; right: 6%; }
}
.mit-g--oben::before{ bottom: auto; top: 7%; }


/* Auf den grünen Flächen ist das G kein Wasserzeichen, sondern Neon:
   nur die Kontur leuchtet, und sie atmet im selben Takt wie das echte
   Neon auf den Fotos. Gezeichnet wird nichts nach — Kontur und Schein
   kosten keine einzige Berechnung pro Bild. */
.mit-g--neon::before{
  color: transparent;
  -webkit-text-stroke: .016em rgba(226, 58, 46, .75);
  text-stroke: .016em rgba(226, 58, 46, .75);
  text-shadow: 0 0 .07em rgba(226, 58, 46, .35), 0 0 .22em rgba(226, 58, 46, .18);
  opacity: 1;
  animation: neonatmen 5.4s ease-in-out infinite;
}
.teil--tag.mit-g::before, .teil--tag-zweit.mit-g::before{ color: var(--t-schrift); opacity: .035; }
/* NICHT `.mit-g > * { position: relative }` — das nimmt dem Buehnenfoto sein
   `position: absolute`, und auf dem Telefon war das Foto damit ganz weg.
   `isolation: isolate` am Vater plus z-index -1 am ::before tut dasselbe,
   ohne ein einziges Kind anzufassen. */

/* ── Abschlussband über dem Fuß ──────────────────────────────────
   Statt einer toten Fläche am Seitenende steht dort ein Satz und ein Weg. */

.abschluss{ background: var(--n-tief); color: var(--n-hell);
  padding: clamp(2.8rem, 7vw, 5rem) 0; border-top: 1px solid var(--n-linie); }
.abschluss .bahn{ display: grid; gap: 1.2rem; align-items: end; }
.abschluss p{ margin: 0; max-width: 30ch; text-wrap: balance;
  font-family: var(--dis); font-size: var(--f-h2); line-height: 1.04; }
.abschluss .tun{ margin: 0; }
@media (min-width: 48em){
  .abschluss .bahn{ grid-template-columns: minmax(0,1fr) auto; gap: 2rem; }
}

/* ── Einwilligung im Formular ────────────────────────────────────
   Kein Kasten mit Rand, sondern eine Zeile, die man liest. Die
   Trefferfläche des Hakens bleibt bei vollen 44 px. */

.feld--haken{ display: grid; grid-template-columns: auto minmax(0,1fr);
  gap: .1rem .7rem; align-items: start; margin-top: .2rem; }
.feld--haken input{ inline-size: 1.15rem; block-size: 1.15rem; margin: .55rem 0 0;
  accent-color: var(--lg-rot); }
.feld--haken > span{ font-size: var(--f-klein); line-height: 1.55; color: var(--t-still);
  letter-spacing: 0; text-transform: none; font-weight: 400; padding-block: .35rem; }
.feld--haken a{ color: var(--t-schrift); text-decoration: underline;
  text-decoration-color: var(--t-linie-s); text-underline-offset: .25em;
  padding-block: .35rem; }
.verteiler .feld--haken > span{ color: var(--n-still); }
.verteiler .feld--haken a{ color: var(--n-hell); text-decoration-color: var(--n-linie-s); }

/* ── Sozialer Beleg: ein Satz gross, ein Weg daneben ────────────── */

.beleg-band{ display: grid; gap: 1.2rem; align-items: end; }
.beleg-band p.gross{ margin: 0; max-width: 26ch; text-wrap: balance;
  font-family: var(--dis); font-size: var(--f-h2); line-height: 1.04; }
.beleg-band p.klein{ margin: 0; max-width: 44ch; font-size: var(--f-text);
  line-height: 1.6; color: var(--n-still); }
@media (min-width: 48em){
  .beleg-band{ grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: 2.5rem; }
}

.beleg-bild{ margin: clamp(1.8rem,4vw,2.6rem) 0 0; }
.beleg-bild img{ width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover;
  display: block; }
.beleg-bild figcaption{ margin-top: .7rem; font-size: var(--f-mikro); font-weight: 500;
  letter-spacing: var(--sp-etikett); text-transform: uppercase; color: var(--n-still); }

/* ── Instagram-Raster: unsere eigenen Bilder, kein fremdes Skript ──
   Ein echter Instagram-Einbettungscode laedt Skripte von Meta, setzt Cookies
   und braucht damit ein Einwilligungsbanner. Das Versprechen „keine
   Verbindung nach aussen" waere weg. Deshalb: eigene Bilder, ein Link. */

.insta{ list-style: none; margin: 0 0 clamp(1.6rem,3vw,2.4rem); padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(.4rem,1vw,.7rem); }
.insta a{ display: block; position: relative; }
.insta img{ width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  transition: opacity 200ms var(--lg-aus); }
.insta a:hover img{ opacity: .85; }
@media (min-width: 48em){ .insta{ grid-template-columns: repeat(6, minmax(0,1fr)); } }

/* ── Der Roester, genannt wie ein Lieferant und nicht wie Werbung ── */

.roester{ display: grid; gap: 1rem; align-items: center; margin: clamp(1.6rem,4vw,2.4rem) 0 0; }
.roester img{ width: 9.5rem; height: auto; }
.roester p{ margin: 0; font-size: var(--f-text); line-height: 1.6; color: var(--t-still);
  max-width: 46ch; }
.roester a{ color: var(--t-schrift); text-decoration: underline;
  text-decoration-color: var(--t-linie-s); text-underline-offset: .25em;
  padding-block: .3rem; }
@media (min-width: 48em){
  .roester{ grid-template-columns: auto minmax(0,1fr); gap: 2rem; }
}

/* Im Fuss nur eine Zeile mit dem hellen Logo. */
.fuss .roester-fuss{ display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  margin: 1.6rem 0 0; padding-top: 1.4rem; border-top: 1px solid var(--n-linie); }
.fuss .roester-fuss span{ font-size: var(--f-mikro); letter-spacing: var(--sp-etikett);
  text-transform: uppercase; color: var(--n-still); }
.fuss .roester-fuss img{ width: 7rem; height: auto; opacity: .85; }
.fuss .roester-fuss a{ display: inline-flex; align-items: center; min-height: 2.85rem; }

/* ── WhatsApp-Weg im Verteiler ───────────────────────────────────── */
.verteiler .oder{ margin: 1.1rem 0 0; padding-top: 1.1rem;
  border-top: 1px solid var(--n-linie); }

@media (prefers-reduced-motion: reduce){
  .leuchtet .glut{ animation: none; opacity: .55; }
  .mit-g--neon::before{ animation: none; opacity: .8; }
}


/* ═══════════════ Speisekarte zum Mitlesen (QR-Code am Tisch) ═══════════════
   Kein Kopf, kein Fuss, keine Wege — nur die Karte. Gedruckt soll sie wie
   eine Karte aussehen und nicht wie eine ausgedruckte Website. */

.speisekarte{ background: var(--t-grund); color: var(--t-schrift);
  padding: clamp(2rem, 6vw, 4rem) 0 clamp(3rem, 8vw, 5rem); min-height: 100vh; }
.speisekarte .karte-signet{ width: 3.4rem; height: auto; border-radius: 50%;
  display: block; margin: 0 auto 1.4rem; }
.speisekarte h1{ margin: 0 0 .4rem; text-align: center;
  font-family: var(--dis); font-size: var(--f-h2); line-height: 1.05; }
.speisekarte .karte-ort{ margin: 0 0 clamp(2rem,5vw,3rem); text-align: center;
  font-size: var(--f-mikro); letter-spacing: var(--sp-etikett);
  text-transform: uppercase; color: var(--t-still); }
.speisekarte .karte-netz{ margin-bottom: 1.5rem; }

@media print{
  .kopf, .fuss, .abschluss, .sprung{ display: none !important; }
  .speisekarte{ min-height: 0; padding: 0; }
  .karte-netz{ columns: 2; }
  .karte-netz > div{ break-inside: avoid; }
  a{ text-decoration: none; color: inherit; }
}