/* ============================================================
   Riverside Event – Entwurf 1 „A — NACHTSCHICHT"
   Posterwand im Dunkeln. Farbstürze ohne Übergang.
   Werte aus gemeinsam/gestaltung.md (gemessen), nicht geschätzt.
   ============================================================ */

/* ---------- Schriften, lokal eingebunden (kein Google-Abruf) ---------- */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 900;font-stretch:62% 125%;font-display:swap;src:url(Archivo-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 900;font-stretch:62% 125%;font-display:swap;src:url(Archivo-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(InstrumentSerif-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(InstrumentSerif-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(InstrumentSerif-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(InstrumentSerif-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ---------- Bausteine ---------- */
:root{
  /* Grundwelt dunkel – Markenfarbton 82° */
  --nacht:#0E1109; --nacht-karte:#161A0F; --nacht-feld:#212617;
  --linie:#212617; --linie-bedien:#646F52;
  /* Grundwelt hell */
  --kalk:#F6F8F2; --kalk-karte:#ECF0E6; --kalk-feld:#FFFFFF;
  --linie-hell:#D4DBC7; --linie-bedien-hell:#6E7A5A;
  /* Text */
  --text:#ECF0E6; --text-leise:#B6C0A5;
  --text-dunkel:#161A0F; --text-dunkel-leise:#454D38;
  /* Marke */
  --neon:#B9F551; --oliv:#6EA017; --oliv-text:#477000;
  /* Kennfarben der drei Angebote */
  --saison:#B9F551; --saison-tief:#477000;
  /* Tattoo On The Road: Tintengruen statt Violett (Grundauftrag: Gruen gilt, keine Lavendeltoene).
     Nachgerechnet: --road auf --nacht 8,20:1 / auf --nacht-karte 7,60:1;
     --nacht auf --road-flaeche 6,77:1; --road-tief auf --kalk 8,17:1, --kalk auf --road-tief 8,17:1. */
  --road:#2FBF9A; --road-flaeche:#1FAE87; --road-tief:#0A5547;
  --diablo-grund:#000000; --diablo-blut:#60060C; --diablo-tief:#440408;
  --glut:#B62E0C;
  /* Signale */
  --fokus:#B9F551; --fokus-hell:#477000;
  --fehler:#FF7A66; --fehler-hell:#A81C12;

  /* Abstände */
  --a-1:4px; --a-2:8px; --a-3:12px; --a-4:16px; --a-5:24px;
  --a-6:32px; --a-7:48px; --a-8:64px; --a-9:96px; --a-10:128px;
  /* Rundungen */
  --r-klein:4px; --r-mittel:10px; --r-voll:999px;
  /* Raster und Knöpfe */
  --breite:1240px; --rand-seite:clamp(16px,4vw,40px);
  --knopf-h:48px; --knopf-px:24px;
  --schatten-1:0 1px 2px rgb(0 0 0 / .40), 0 2px 10px rgb(0 0 0 / .30);
  --schatten-2:0 16px 48px rgb(0 0 0 / .55);
  /* Bewegung */
  --d-fein:120ms; --d-zustand:220ms; --d-gross:420ms;
  --kurve-raus:cubic-bezier(.2,.8,.2,1);
  --kurve-weich:cubic-bezier(.4,0,.2,1);
  /* Logo */
  /* Logodatei 3000x3000, Inhalt 2138x2075 bei x475/y428 -> Datei quadratisch anzeigen,
     Breite so wählen, dass der Inhalt die Mindestbreite erreicht:
     Inhalt 240 px -> Datei 337 px · Inhalt 200 px -> Datei 281 px · Inhalt 320 px -> Datei 449 px.
     Die transparente Fassung der Datei traegt zugleich den Schutzraum (>= 43 px bei 337 px). */
  --logo-fuss:449px;   /* Fuss: Datei quadratisch 449 px = 320 px Logoinhalt */
  /* Schriftstufen – pro Fenstergrösse genau ein Wert je Stufe */
  --t-12:12px; --t-14:14px; --t-16:16px; --t-18:18px; --t-24:24px; --t-32:32px;
  --t-gross:clamp(30px,6vw,72px);
  --t-wand:clamp(34px,7.4vw,92px);
  --t-riesig:clamp(42px,12vw,132px);
  /* eigene Stufe fuer lange Riesenzeilen („Ein Weltrekord.", „Diablo Praddo anfragen") */
  --t-riesig-lang:clamp(30px,7.4vw,96px);
  /* Abschnittsluft */
  --luft:var(--a-8);
  /* Korn, über alle Flächen */
  --korn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (min-width:768px){ :root{ --luft:var(--a-9); } }
@media (min-width:1200px){ :root{ --luft:var(--a-10); } }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--nacht); color:var(--text);
  font-family:'Archivo',system-ui,sans-serif;
  font-size:var(--t-18); line-height:1.6;
  font-variation-settings:'wdth' 100;
  overflow-x:hidden;
}
img,video,canvas{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
:where(p,li,h1,h2,h3,dd,dt){overflow-wrap:break-word;hyphens:manual}
:where(.grid,.reihe)>*{min-width:0}

/* Fokus – ein Muster für die ganze Seite */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--fokus); outline-offset:2px; border-radius:var(--r-klein);
}
.hell :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{ outline-color:var(--fokus-hell) }
/* Auf der Neonflaeche waere ein neongruener Ring unsichtbar (1:1) – dort ist der Ring nachtdunkel. */
.auf-neon :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{ outline-color:var(--nacht) }

.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}
.springen{position:absolute;left:var(--a-4);top:-200px;z-index:120;background:var(--neon);color:var(--nacht);
  padding:var(--a-3) var(--a-5);border-radius:var(--r-klein);font-weight:700;font-size:var(--t-16);text-decoration:none}
.springen:focus{top:var(--a-4)}

/* ---------- Raster ---------- */
.innen{width:100%;max-width:var(--breite);margin-inline:auto;padding-inline:var(--rand-seite)}
.abschnitt{padding-block:var(--luft);position:relative}
.korn::after{content:"";position:absolute;inset:0;background-image:var(--korn);background-size:180px 180px;
  opacity:.14;mix-blend-mode:overlay;pointer-events:none;z-index:1}
.korn>*{position:relative;z-index:2}

/* ---------- Typografie ---------- */
.kicker{font-size:var(--t-14);font-weight:700;font-variation-settings:'wdth' 72;letter-spacing:.04em;
  color:var(--neon);margin-bottom:var(--a-4)}
.hell .kicker{color:var(--oliv-text)}
.auf-neon .kicker,.auf-glut .kicker{color:var(--nacht)}
.auf-glut .kicker{color:var(--kalk)}

h1,h2{font-weight:900;font-variation-settings:'wdth' 116;letter-spacing:-.02em;line-height:.92;
  text-transform:uppercase;text-wrap:pretty;hyphens:none;
  /* Anzeigeschrift bricht nie mitten im Wort – schlaegt die Grundregel oben bewusst */
  overflow-wrap:normal;word-break:normal}
h3,.wand-eintrag,.balken h3,.menue a,.kicker,.chip,.knopf{hyphens:none;overflow-wrap:normal;word-break:normal}
/* Auf sehr schmalen Bildschirmen laeuft die Anzeigeschrift ueber die Breitenachse enger,
   statt dass Woerter umbrechen oder einzeln in der letzten Zeile stehen. */
@media (max-width:400px){
  h2{font-variation-settings:'wdth' 92}
  .held h1 .z1{font-variation-settings:'wdth' 98}
  .held h1 .z2{font-variation-settings:'wdth' 94}
}
/* Kondensierte Versalien: die Breitenachse schrumpft die Wortluecke mit, aus
   „SEASON OPENING" wird optisch „SEASONOPENING". Deshalb hier mehr Wortabstand.
   :where() hat Spezifitaet 0 und ueberschreibt nichts. */
:where(.kicker,.held-kicker,.chip,.knopf,.lauf span,
  .tafel-kopf b,.tafel-kopf span,.tafel-liste b,.tafel-liste i,.tafel-liste em,.tafel-fuss,
  .menue-titel,.menue nav a,.menue-knopf,.kopf-stand,.kopf-nav a,
  .zahl-feld b,.zahl-feld span,.wand-eintrag .zusatz,.poster-text b,.poster-text span,
  .feld b,.globus-uhr,.stempel,.diablo-zahlen b,.glut-punkte b,.glut-herkunft figcaption b,
  .orte-zahlen b,.orte-zahlen span,.ort b,.ort span,.ort i,.umschalt button,
  .kontakt-themen b,.kontakt-themen span.ziel,.weg b,.balken .pfeil,
  .fuss-spalte h3,.wa,.feldblock label,.recht-rand a,.recht .recht-rand h2){word-spacing:.12em}

h2{font-size:var(--t-gross)}
h3{font-size:var(--t-32);font-weight:800;font-variation-settings:'wdth' 92;line-height:1.05;letter-spacing:-.01em}
.lead{font-size:var(--t-24);line-height:1.35;max-width:34ch;font-variation-settings:'wdth' 92;
  font-weight:500;hyphens:none;text-wrap:pretty}
p{max-width:65ch;text-wrap:pretty}
.satz{display:block}
.ohne-umbruch{white-space:nowrap}
.kursiv{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;text-transform:none;letter-spacing:0}

/* ---------- Knöpfe ---------- */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:var(--a-2);
  min-height:var(--knopf-h);padding-inline:var(--knopf-px);border-radius:var(--r-klein);
  font-size:var(--t-16);font-weight:800;font-variation-settings:'wdth' 88;letter-spacing:.01em;
  text-decoration:none;white-space:nowrap;cursor:pointer;border:1px solid transparent;
  transition:filter var(--d-fein) var(--kurve-weich),border-color var(--d-fein) var(--kurve-weich),transform var(--d-fein)}
.knopf-voll{background:var(--neon);color:var(--nacht);box-shadow:0 0 0 0 var(--nacht)}
.knopf-rand{background:transparent;color:var(--text);border-color:var(--linie-bedien)}
.knopf-dunkel{background:var(--nacht);color:var(--neon)}
.knopf-hell{background:var(--oliv-text);color:var(--kalk)}
.knopf-road{background:var(--road-tief);color:var(--kalk)}
.knopf:hover{filter:brightness(.92)}
.knopf-rand:hover{border-color:var(--neon);filter:none}
.knopf:active{transform:translateY(1px)}
.knopf:disabled{opacity:.45;cursor:not-allowed}
.knopf[hidden]{display:none}
@media (max-width:820px){ .kopf .knopf{min-height:44px} }
.knopfreihe{display:flex;align-items:center;flex-wrap:wrap;gap:var(--a-3)}
.chipreihe{display:flex;align-items:center;flex-wrap:wrap;gap:var(--a-2)}
@media (max-width:519px){ .knopfreihe{flex-direction:column;align-items:stretch} .knopfreihe>.knopf{width:100%} }

/* ---------- Chips ---------- */
.chip{display:inline-flex;align-items:center;min-height:28px;padding-inline:var(--a-3);
  border-radius:var(--r-klein);font-size:var(--t-12);font-weight:700;font-variation-settings:'wdth' 78;
  background:var(--neon);color:var(--nacht)}
.chip-rand{background:transparent;color:var(--road);border:1px solid var(--road)}
.chip-blut{background:var(--diablo-blut);color:var(--text)}
.chip-dunkel{background:var(--nacht);color:var(--neon)}
.chip-stempel{background:transparent;color:var(--road-tief);border:1px solid var(--road-tief)}

/* ============================================================
   Kopfzeile – das vollständige Logo steht IN der Leiste, oben links
   (Janine, 04.10.2026). Wappen + RIVERSIDE EVENT(R) + WWW.RIVERSIDE-LIFESTYLE.COM,
   nie zugeschnitten, nie durch eine gesetzte Wortmarke ersetzt.
   Die Leiste ist deshalb so hoch wie das Logo; Navigation, Ortszeit, „Anfragen"
   und Menüknopf stehen rechts daneben in einer eigenen Spalte.
   Dateien: logo-neongruen-voll-480/960.png|.webp – das sind die freigestellten
   3000er-Logos, auf die ALPHA-BOUNDING-BOX des Logoinhalts (2138 x 2075 bei x475/y428)
   gesetzt. Es fehlt kein Bildteil, nur die leere Fassung der Datei; den Schutzraum
   trägt jetzt der Innenabstand der Leiste.
   ============================================================ */
:root{
  /* Angezeigte Logobreite = Breite des Logoinhalts. Gemessene Schwellen aus
     gestaltung.md 2.2: 200 px = jeder Buchstabe der URL-Zeile getrennt (harte
     Untergrenze), 240 px = mühelos lesbar. Janine, 04.10.2026: auf dem Handy
     so gross wie möglich, mindestens ~150 px.
     200 px gilt auf JEDER Breite – auch auf 320 px geht das auf:
     16 + 200 + 8 + 44 (Menüknopf) + 16 = 284 von 320 px.
     Mehr als 200 px macht nur die Leiste höher, weil das Logo quadratisch ist
     (2138 : 2075) – 200 px ist deshalb zugleich die kompakteste lesbare Leiste. */
  --logo-leiste:200px;
  --kopf-pad:var(--a-2);
  /* Leistenhöhe FEST je Breite, nicht aus --logo-leiste gerechnet: beim Scrollen
     schrumpft das Logo, aber Sprungmarken- und Sticky-Abstände dürfen nicht
     mitwandern (sonst rutscht der Inhalt beim Scrollen).
     200 x 2075 / 2138 = 194,1 px Logohöhe. */
  --kopf-h:212px;          /* 194,1 + 2 x 8 px Polster + 1 px Rand */
}
@media (min-width:768px){ :root{ --kopf-pad:var(--a-3); --kopf-h:220px } }  /* 194,1 + 2 x 12 + 1 */
/* Beim Scrollen wird das Logo auf dem Handy kleiner – vollständig, nie unter die
   150 px, die Janine als Untergrenze genannt hat (160 px gesetzt). Auf dem Desktop
   bleibt es bei 200 px, dort springt die Leiste also gar nicht. */
body.gescrollt{ --logo-leiste:160px }
@media (min-width:768px){ body.gescrollt{ --logo-leiste:200px } }

.kopf{position:fixed;inset:0 0 auto 0;z-index:60;
  background:rgb(14 17 9 / .90);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linie);transition:background var(--d-zustand) var(--kurve-weich)}
/* Beim Scrollen deckt die Leiste ganz ab: bei dieser Hoehe schimmert sonst der
   Inhalt darunter durch das Logo. */
body.gescrollt .kopf{background:var(--nacht)}
.kopf-innen{display:flex;align-items:stretch;gap:var(--a-4);
  max-width:var(--breite);margin-inline:auto;
  padding:var(--kopf-pad) var(--rand-seite)}
.kopf-logo{flex:0 0 auto;align-self:center;display:block;line-height:0;text-decoration:none}
.kopf-logo img{width:var(--logo-leiste);height:auto;aspect-ratio:2138 / 2075;
  transition:width var(--d-zustand) var(--kurve-weich)}
/* Unter 1024 px (Regime Menüknopf) nutzt die rechte Seite die Höhe, die das Logo
   ohnehin vorgibt: Ortszeit oben, „Anfragen" und Menü unten – so bleibt rechts
   keine leere Fläche. Ab 1024 px steht alles in EINER Zeile NEBEN dem Logo,
   nicht darunter; die Leiste ist dann nur noch so hoch wie das Logo. */
.kopf-rechts{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;
  align-items:flex-end;justify-content:space-between;gap:var(--a-3);
  align-self:stretch;padding-block:var(--a-1)}
/* Unter 1024 px stehen „Anfragen" und der Menüknopf untereinander und gleich breit.
   Zusammen mit der Ortszeit oben füllen sie die Höhe, die das Logo ohnehin vorgibt,
   und „Anfragen" passt dadurch schon ab 360 px in die Leiste (nebeneinander bräuchte
   es 174 px, untereinander nur 118 px – bei 360 px sind 123 px frei). */
.kopf-aktion{display:flex;flex-direction:column;align-items:stretch;gap:var(--a-2);
  width:max-content;max-width:100%}

.kopf-stand{display:inline-flex;align-items:center;gap:var(--a-2);min-height:44px;min-width:0;max-width:100%;
  font-size:var(--t-12);font-weight:800;font-variation-settings:'wdth' 70;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-leise);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.kopf-stand::before{content:"";width:8px;height:8px;flex:0 0 auto;border-radius:var(--r-voll);
  background:var(--neon);box-shadow:0 0 0 4px rgb(185 245 81 / .18)}
.kopf-stand b{font-weight:800;color:var(--text);overflow:hidden;text-overflow:ellipsis}
.kopf-stand i{font-style:normal;color:var(--text-leise);opacity:.72;display:none}
.kopf-stand .uhr:not(:empty)+.ort-kurz::before{content:" · "}
/* Was neben dem Logo Platz hat, ist ausgemessen (Inhaltsbreite minus Logo, Lücke,
   Navigation und Knöpfe):
   bis 767 px eigene Zeile, aber schmal -> nur die Uhr (49 px)
   768-1023 px eigene Zeile, breit    -> Uhr + Ort + Zusatz (344 px)
   1024-1279 px eine Zeile, eng       -> nur die Uhr
   ab 1280 px eine Zeile, Platz da    -> Uhr + Ort (166 px) */
@media (max-width:767px){ .kopf-stand .ort-kurz{display:none} }
@media (min-width:768px) and (max-width:1023px){ .kopf-stand .kopf-stand-zusatz{display:inline} }
@media (min-width:1024px) and (max-width:1279px){ .kopf-stand .ort-kurz{display:none} }

.kopf-nav{display:none}
.kopf-nav ul{display:flex;align-items:center;gap:var(--a-5)}
.kopf-nav a{white-space:nowrap}
/* Das Tippziel ist 44 px hoch (iPad quer wird mit dem Finger bedient); der Unterstrich
   bleibt dicht am Text und wird deshalb als eigene Linie gezeichnet, nicht als Rahmen. */
.kopf-nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;
  font-size:var(--t-14);font-weight:700;font-variation-settings:'wdth' 80;
  text-decoration:none;color:var(--text-leise);
  transition:color var(--d-fein)}
.kopf-nav a::after{content:"";position:absolute;left:0;right:0;bottom:calc(50% - 14px);height:1px;
  background:transparent;transition:background var(--d-fein)}
.kopf-nav a:hover{color:var(--neon)}
.kopf-nav a:hover::after{background:var(--neon)}
.kopf .knopf{min-height:44px}
.menue-knopf{display:inline-flex;align-items:center;justify-content:center;gap:var(--a-2);
  min-height:44px;min-width:44px;padding-inline:var(--a-3);background:transparent;border:1px solid var(--linie-bedien);
  border-radius:var(--r-klein);color:var(--text);font-size:var(--t-14);font-weight:800;
  font-variation-settings:'wdth' 78;cursor:pointer}
.menue-knopf i{display:block;width:18px;height:1px;background:currentColor;box-shadow:0 5px 0 currentColor,0 -5px 0 currentColor}
/* Schliessknopf: Kreuz aus zwei gedrehten Strichen – unter 360 px steht der Knopf
   sonst als leerer Rahmen da, weil die Beschriftung dort zu Vorlesetext wird. */
.menue-knopf i.kreuz{position:relative;box-shadow:none;transform:rotate(45deg)}
.menue-knopf i.kreuz::before{content:"";position:absolute;inset:0;background:currentColor;transform:rotate(90deg)}
@media (max-width:479px){ .kopf-innen{gap:var(--a-2)} }
/* Unter 360 px bleiben neben dem Logo nur 80 px – dort traegt die Leiste nur Logo,
   Ortszeit und den Menueknopf als Symbol (44x44, Tippziel bleibt). „Anfragen" steht
   dann im Menue und zweimal im Held. */
@media (max-width:359px){
  .kopf-aktion>.knopf:not(.kopf-ohne-js){display:none}
  .kopf-aktion{width:auto}
  .menue-knopf{padding-inline:0;width:44px;flex:0 0 44px;gap:0}
  .menue-knopf>span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}
}
/* Sprungmarken landen unter der Leiste */
:where(section,figure)[id]{scroll-margin-top:calc(var(--kopf-h) + var(--a-5))}
#fuss-nav{scroll-margin-top:calc(var(--kopf-h) + var(--a-5))}
.kopf-ohne-js{min-height:44px}
@media (min-width:1024px){
  .kopf-nav{display:block}
  .menue-knopf{display:none}
  /* Navigation, Ortszeit und Knopf NEBEN dem Logo in einer Zeile, auf der
     optischen Mitte des Logos (gestaltung.md 2.6) – nicht darunter. */
  .kopf-rechts{flex-direction:row;align-items:center;justify-content:flex-end;
    align-self:center;gap:var(--a-5);padding-block:0}
  .kopf-aktion{flex-direction:row;align-items:center;gap:var(--a-3);width:auto}
}

/* Mobiles Menü */
.menue{position:fixed;inset:0;z-index:70;background:var(--nacht);
  display:flex;flex-direction:column;padding:var(--a-5) var(--rand-seite) var(--a-8);
  /* Seit das vollstaendige Logo im Menuekopf steht, reicht die Hoehe auf kurzen
     Fenstern (320 x 568) nicht mehr fuer alle sieben Eintraege und die beiden
     Knoepfe darunter. Das Menue scrollt deshalb in sich. */
  overflow-y:auto;overscroll-behavior:contain;
  transform:translateY(-100%);visibility:hidden;transition:transform var(--d-gross) var(--kurve-raus),visibility var(--d-gross)}
.menue[data-offen="ja"]{transform:translateY(0);visibility:visible}
.menue-kopf{display:flex;align-items:center;justify-content:space-between;gap:var(--a-4);margin-bottom:var(--a-5)}
/* Das vollstaendige Logo im Menuekopf (Sichtpruefung 04.10.2026, Hinweis 9).
   Nicht zuschneiden: das Bild wird als Ganzes kleiner, die URL-Zeile bleibt
   lesbar (150 px auf dem Handy, 180 px ab 600 px – oben in der Leiste sind es
   160 bzw. 200 px). */
.menue-logo{display:block;flex:0 0 auto;width:150px;line-height:0}
.menue-logo img{display:block;width:100%;height:auto}
@media (min-width:600px){ .menue-logo{width:180px} }
.menue-titel{display:block;font-size:var(--t-12);font-weight:800;font-variation-settings:'wdth' 70;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-leise);margin-bottom:var(--a-3)}
[inert]{pointer-events:none}
.menue ul{display:flex;flex-direction:column;gap:var(--a-1)}
.menue nav a{display:flex;align-items:center;gap:var(--a-4);min-height:56px;text-decoration:none;
  font-size:var(--t-32);font-weight:900;font-variation-settings:'wdth' 82;text-transform:uppercase;
  line-height:1.05;border-bottom:1px solid var(--linie)}
.menue nav a b{font-size:var(--t-12);font-weight:700;font-variation-settings:'wdth' 70;color:var(--neon);min-width:28px}
.menue .knopf{width:100%}
.menue-fuss{margin-top:auto;padding-top:var(--a-6);display:flex;flex-direction:column;gap:var(--a-3)}

/* ============================================================
   Held
   ============================================================ */
.held{position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:flex-end;overflow:hidden;background:var(--nacht);
  /* Die Leiste traegt jetzt das vollstaendige Logo und ist entsprechend hoch. */
  padding-top:calc(var(--kopf-h) + var(--a-5))}
.held-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.held-tonung{position:absolute;inset:0;
  background:linear-gradient(to bottom,rgb(14 17 9 / .80) 0%,rgb(14 17 9 / .20) 36%,rgb(14 17 9 / .86) 72%,var(--nacht) 100%)}
.held-tonung::before{content:"";position:absolute;inset:0;background:var(--oliv);mix-blend-mode:color;opacity:.34}
.held-korn{position:absolute;inset:0;background-image:var(--korn);background-size:180px 180px;opacity:.16;mix-blend-mode:overlay}
.held-glitch{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;opacity:0}
.held-innen{position:relative;z-index:5;width:100%;max-width:var(--breite);margin-inline:auto;
  padding:0 var(--rand-seite) var(--a-9);
  display:grid;gap:var(--a-6);align-items:end}
.held-text{min-width:0}

.held-kicker{font-size:var(--t-12);font-weight:800;font-variation-settings:'wdth' 70;
  letter-spacing:.18em;color:var(--neon);text-transform:uppercase;margin-bottom:var(--a-4)}
.held h1{font-size:var(--t-riesig);color:var(--kalk);margin-bottom:var(--a-5);
  /* Der Kasten endet am Text, nicht am Spaltenrand – sonst reicht er rechnerisch
     unter die Eventplan-Tafel (Paarvergleich der Textkaesten). */
  width:fit-content;max-width:100%}
.held h1 span{display:block;font-variation-settings:'wdth' 120;
  text-shadow:.055em .055em 0 var(--oliv)}
.held h1 .z2{font-variation-settings:'wdth' 108;color:var(--neon);text-shadow:.055em .055em 0 rgb(14 17 9 / .9)}
.held .lead{color:var(--text);margin-bottom:var(--a-6)}
.held-aktion{display:flex;flex-direction:column;gap:var(--a-5);align-items:flex-start}
@media (min-width:1024px){ .held-aktion{flex-direction:row;align-items:center;gap:var(--a-6);flex-wrap:wrap} }
@media (min-width:1024px){ .held .lead{max-width:58ch} }
.held-hud{display:flex;flex-wrap:wrap;gap:var(--a-2)}
@media (min-width:1024px){ .held-hud .chip{min-height:32px} }
@media (min-width:1200px){
  /* Gegenrechnung zur hohen Leiste: die Handlungsknoepfe bleiben im ersten Bildschirm */
  .held-innen{padding-bottom:var(--a-6)}
  .held-kicker{margin-bottom:var(--a-3)}
  .held h1{margin-bottom:var(--a-4)}
  .held .lead{margin-bottom:var(--a-4)}
}

/* Eventplan-Tafel im Held. Sie steht jetzt IM Raster des Helds (zweite Spalte
   ab 1000 px, darunter als Block unter dem Text) statt absolut unter der Leiste –
   die Leiste ist mit dem vollstaendigen Logo zu hoch fuer eine absolute Tafel.
   Inhalt: die sechs belegten Event-Arten, Zustand „Termin folgt", echte Ortszeit. */
.held-tafel{display:none;
  background:rgb(14 17 9 / .88);border:1px solid var(--linie);border-radius:var(--r-mittel);
  padding:var(--a-4);backdrop-filter:blur(6px)}
/* Tablet hoch (700-999 px): die Tafel steht unter dem Text und fuellt den Raum,
   der sonst leer bliebe (Janines Regel 4). Zwei Spalten, damit sie flach bleibt. */
@media (min-width:700px) and (max-width:999px) and (min-height:900px){
  .held-tafel{display:block}
  .tafel-liste{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--a-6)}
  .tafel-liste b{font-size:var(--t-14)}
}
@media (min-width:1000px){
  .held-innen{grid-template-columns:minmax(0,1fr) min(400px,32vw);gap:var(--a-7)}
  .held-tafel{display:block;padding:var(--a-5)}
  /* Sichtpruefung 04.10.2026, Befund 1: Ab 1000 px steht die Eventplan-Tafel in
     der zweiten Spalte, die Schlagzeile hat dann nur noch etwa 550-740 px. Die
     grosse Stufe (--t-riesig, bis 132 px) haengt aber an 12vw und damit am
     FENSTER – bei hohen Fenstern (ab ~950 px Innenhoehe) lief „STANDORTE." 264 px
     weit unter die Tafel.
     Der Schriftgrad haengt jetzt an der Spalte selbst (Container-Anfrage):
     100cqw ist die Spaltenbreite. Das laengste Wort „STANDORTE." ist bei dieser
     Breitenachse 7,40 x Schriftgrad breit, der Schattenversatz kommt mit
     0,055 em dazu -> 1/7,46 = 13,4 %. Mit 13cqw bleibt Luft. */
  .held-text{container-type:inline-size}
  .held h1{font-size:min(var(--t-riesig),13cqw)}
}
.tafel-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:var(--a-4);
  padding-bottom:var(--a-3);border-bottom:2px solid var(--neon);margin-bottom:var(--a-3)}
.tafel-kopf b{font-size:var(--t-14);font-weight:900;font-variation-settings:'wdth' 72;
  letter-spacing:.16em;text-transform:uppercase;color:var(--neon)}
.tafel-kopf span{font-size:var(--t-12);font-weight:700;font-variation-settings:'wdth' 70;
  letter-spacing:.08em;color:var(--text-leise);white-space:nowrap}
.tafel-liste{display:flex;flex-direction:column}
.tafel-liste li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:baseline;
  gap:var(--a-3);padding-block:var(--a-2);border-bottom:1px solid var(--linie)}
.tafel-liste li:last-child{border-bottom:0}
.tafel-liste em{font-style:normal;font-size:var(--t-12);font-weight:700;font-variation-settings:'wdth' 70;
  color:var(--text-leise);letter-spacing:.04em}
.tafel-liste b{font-size:var(--t-16);font-weight:900;font-variation-settings:'wdth' 80;
  text-transform:uppercase;letter-spacing:.01em;line-height:1.1;min-width:0}
.tafel-liste i{font-style:normal;font-size:var(--t-12);font-weight:700;font-variation-settings:'wdth' 74;
  color:var(--neon);white-space:nowrap}
.tafel-fuss{margin-top:var(--a-3);padding-top:var(--a-3);border-top:1px solid var(--linie);
  font-size:var(--t-12);color:var(--text-leise);letter-spacing:.06em;text-transform:uppercase;
  font-weight:700;font-variation-settings:'wdth' 72}
body.anim .held-tafel{opacity:0}
body.los .held-tafel{animation:einAuf 420ms var(--kurve-raus) 700ms both}
/* Zeilen laufen beim Laden gestaffelt ein wie eine Anzeigetafel */
body.anim .tafel-liste li{opacity:0}
body.los .tafel-liste li{animation:tafelZeile 320ms var(--kurve-raus) both}
body.los .tafel-liste li:nth-child(1){animation-delay:780ms}
body.los .tafel-liste li:nth-child(2){animation-delay:840ms}
body.los .tafel-liste li:nth-child(3){animation-delay:900ms}
body.los .tafel-liste li:nth-child(4){animation-delay:960ms}
body.los .tafel-liste li:nth-child(5){animation-delay:1020ms}
body.los .tafel-liste li:nth-child(6){animation-delay:1080ms}
@keyframes tafelZeile{from{opacity:0;transform:translate3d(12px,0,0)}to{opacity:1;transform:none}}

/* 1024 px quer: weniger Luft, damit die beiden Knoepfe im ersten Bildschirm stehen */
@media (min-width:1024px) and (max-width:1199px){
  /* 1024 x 768 ist das engste Laptopformat: hier wird oben und zwischen den Zeilen
     Luft herausgenommen, damit beide Handlungsknoepfe ganz im ersten Bildschirm stehen.
     Das Logo bleibt bei 281 px Dateibreite (= 200 px Logoinhalt, harte Untergrenze). */
  :root{--t-riesig:clamp(42px,12vw,116px)}
  .held-innen{padding-bottom:var(--a-6)}
  .held-kicker{margin-bottom:var(--a-3)}
  .held h1{margin-bottom:var(--a-4)}
  /* die WhatsApp-Blase sitzt unten rechts – die Chipreihe endet davor */
  .held-aktion{padding-right:170px}
  .held .lead{margin-bottom:var(--a-4)}
}

/* Flache Fenster (hoechstens 900 px Fensterhoehe – 1024x768, 1280x800, 1366x768,
   1440x800 …): beide Handlungsknoepfe muessen im ersten Bildschirm stehen.
   Das Logo in der Leiste bleibt unangetastet; gespart wird an der Anzeigeschrift
   und an der Luft zwischen den Zeilen. */
@media (min-width:1000px) and (max-height:900px){
  .held h1{font-size:min(var(--t-riesig),13cqw,64px);margin-bottom:var(--a-3)}
  .held-kicker{margin-bottom:var(--a-2)}
  .held .lead{margin-bottom:var(--a-3);font-size:var(--t-16)}
  .held-innen{padding-bottom:var(--a-5);gap:var(--a-5)}
  .held-aktion{gap:var(--a-4)}
  .held-tafel{padding:var(--a-4)}
  .tafel-liste li{padding-block:var(--a-1)}
}
/* Kurze Handy- und Tabletfenster (375x667 = iPhone SE/8, 360x640, 320x568 …):
   die Leiste traegt jetzt das vollstaendige Logo (211 px), deshalb wird im Held
   oben Luft herausgenommen. Gemessen bei 375 x 667: die Knopfreihe endete bei
   y 716 (49 px unter dem Falz) und endet jetzt bei y 607. */
@media (max-width:999px) and (max-height:760px){
  .held h1{font-size:min(var(--t-riesig),32px);margin-bottom:var(--a-3)}
  .held-kicker{line-height:1.25;margin-bottom:var(--a-2)}
  .held .lead{font-size:var(--t-16);margin-bottom:var(--a-4)}
  .held-innen{padding-bottom:var(--a-5);gap:var(--a-5)}
  .held-aktion{gap:var(--a-4)}
}
/* 320 x 568 (iPhone SE 1. Generation) ist das engste kurze Format: dort reicht
   auch das nicht, deshalb eine Stufe mehr. Gemessen: Knopfreihe 603 -> 565 px. */
@media (max-width:359px) and (max-height:620px){
  .held h1{font-size:28px}
  .held-kicker{line-height:1.15}
  .held .lead{font-size:var(--t-14);line-height:1.3;margin-bottom:var(--a-3)}
  /* Tippziel bleibt 44 px – nur die zusaetzlichen 4 px fallen weg */
  .held-aktion .knopf{min-height:44px}
  .held-aktion .knopfreihe{gap:var(--a-2)}
}
/* Unter 400 px passt „STANDORTE." bei 42 px nicht mehr in die Spalte (gemessen
   320 px: 288 px Spalte, Wort 244 px plus Schattenversatz) – dort wird die
   Schlagzeile mitskaliert. */
@media (max-width:399px){
  .held h1{font-size:clamp(30px,9.6vw,38px)}
}

/* Laufschrift am unteren Rand */
.lauf{position:relative;z-index:6;background:var(--neon);color:var(--nacht);overflow:hidden;
  border-top:1px solid var(--nacht)}
.lauf-spur{display:flex;width:max-content;animation:laufen 42s linear infinite}
.lauf span{display:block;white-space:nowrap;padding-block:var(--a-3);
  font-size:var(--t-14);font-weight:900;font-variation-settings:'wdth' 72;letter-spacing:.1em}
@keyframes laufen{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ============================================================
   01 · Was Riverside Event ist
   ============================================================ */
.ueber{border-bottom:1px solid var(--linie)}
.ueber h2{margin-bottom:var(--a-7)}
.ueber-grid{display:grid;gap:var(--a-6)}
.ueber p{color:var(--text-leise);margin-bottom:var(--a-4)}
.ueber p:last-of-type{margin-bottom:0}
.zahlen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--a-3);margin-top:var(--a-7)}
.zahl-feld{background:var(--nacht-karte);border:1px solid var(--linie);border-radius:var(--r-mittel);
  padding:var(--a-5);display:flex;flex-direction:column;gap:var(--a-2);justify-content:space-between}
.zahl-feld b{font-size:var(--t-gross);font-weight:900;font-variation-settings:'wdth' 86;
  line-height:.9;color:var(--neon);letter-spacing:-.02em}
.zahl-feld span{font-size:var(--t-14);color:var(--text-leise);font-variation-settings:'wdth' 88}
@media (min-width:768px){
  .ueber-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--a-8);align-items:start}
}
@media (max-width:639px){ .zahlen{grid-template-columns:1fr} }

/* ============================================================
   02 · Saison-Events – Farbsturz auf Neon-Vollfläche
   ============================================================ */
/* 05.10.2026: Die Posterwand steht jetzt in der Inhaltsbreite statt randlos. Damit sie
   im Neonfeld nicht unten anklebt, bekommt der Abschnitt seine untere Luft zurueck. */
.auf-neon{background:var(--saison);color:var(--nacht)}
.auf-neon h2,.auf-neon h3{color:var(--nacht)}
.auf-neon .lead{color:var(--nacht)}
.auf-neon .chip{background:var(--nacht);color:var(--neon)}
.auf-neon>.innen>h2{margin-bottom:var(--a-6)}
.saison-kopf{display:grid;gap:var(--a-5);margin-bottom:var(--a-8)}
@media (min-width:900px){
  .saison-kopf{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;gap:var(--a-8)}
}

/* Die Textwand */
.wand{display:block;margin-bottom:var(--a-7);line-height:.9}
.wand-eintrag{display:inline-block;margin-right:var(--a-5);color:inherit;text-decoration:none;
  letter-spacing:-.025em;text-transform:uppercase;
  transition:opacity var(--d-fein) var(--kurve-weich)}
.wand-eintrag:focus-visible{outline-offset:4px}
.wand-eintrag b{font-weight:900}
.wand-eintrag .zusatz{font-size:var(--t-12);font-weight:700;font-variation-settings:'wdth' 70;
  letter-spacing:.04em;text-transform:none;white-space:nowrap;opacity:.72;
  vertical-align:super;margin-left:var(--a-1)}
@media (max-width:639px){
  .wand{line-height:1}
  .wand-eintrag{display:flex;align-items:baseline;flex-wrap:wrap;min-height:44px;margin-right:0;padding-block:var(--a-1)}
  .wand-eintrag .zusatz{vertical-align:baseline;margin-left:var(--a-2)}
}
.wand-eintrag:hover b,.wand-eintrag:focus-visible b,.wand-eintrag[data-aktiv="ja"] b{
  text-decoration:underline;text-decoration-thickness:4px;text-underline-offset:.08em}
.wand-eintrag.gr b{font-size:var(--t-wand);font-variation-settings:'wdth' 118 }
.wand-eintrag.mi b{font-size:var(--t-32);font-variation-settings:'wdth' 96;font-weight:800 }
.wand-eintrag.kl b{font-size:var(--t-24);font-variation-settings:'wdth' 68;font-weight:700 }
/* Jeder Eintrag der Textwand bleibt ein Tippziel von mindestens 44 px Hoehe */
.wand-eintrag.mi{padding-block:var(--a-2)}
.wand-eintrag.kl{padding-block:var(--a-3)}
.wand-fuss{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--a-5);
  border-top:2px solid var(--nacht);padding-top:var(--a-5)}
.wand-fuss p{max-width:52ch;font-weight:600}

/* Bildwand der sechs Events. Aenderung Janine 05.10.2026: nicht mehr randlos ueber die
   ganze Breite, sondern in der Inhaltsbreite – sie sitzt dafuer in einem .innen und
   bekommt mit padding:1px auch aussen die duenne Neonlinie als Rahmen.
   Spalten: Handy 1, ab 600 px 2, ab 900 px 3 (sechs Poster -> 3x2 / 2x3 / 1er-Saeule). */
.posterwand{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;
  background:var(--neon);padding:1px;width:100%}
@media (min-width:600px){ .posterwand{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:900px){ .posterwand{grid-template-columns:repeat(3,minmax(0,1fr))} }
.poster{position:relative;display:block;aspect-ratio:5/4;overflow:hidden;background:var(--nacht)}
.posterwand{margin-top:var(--a-8)}
.poster img{width:100%;height:100%;object-fit:cover;object-position:50% 38%;
  filter:saturate(.68) contrast(1.06) brightness(.88);
  transition:filter var(--d-gross) var(--kurve-weich),transform var(--d-gross) var(--kurve-weich)}
.poster[data-aktiv="ja"] img,.poster:hover img{filter:saturate(1) contrast(1.02) brightness(1.06);transform:scale(1.03)}
.poster-text{position:absolute;inset:auto 0 0 0;padding:var(--a-4);
  background:linear-gradient(to top,rgb(14 17 9 / .94),rgb(14 17 9 / 0));color:var(--text)}
.poster-text b{display:block;font-size:var(--t-16);font-weight:900;font-variation-settings:'wdth' 76;
  text-transform:uppercase;letter-spacing:.01em;line-height:1.1}
.poster-text i{display:block;font-style:normal;font-size:var(--t-12);font-weight:700;
  font-variation-settings:'wdth' 70;color:var(--neon);letter-spacing:.08em;text-transform:uppercase}
.poster-text u{display:block;text-decoration:none;font-size:var(--t-12);color:var(--text-leise);
  font-variation-settings:'wdth' 82;margin-top:var(--a-1)}

/* ============================================================
   Bildband über die volle Breite
   ============================================================ */
/* Aenderung Janine 05.10.2026: das ganze Bildband ist ein Link, seit 05.10.2026 abends auf #conventions.
   Der Link traegt die Flaeche (weit ueber 44 px hoch), die Unterschrift den Hinweispfeil. */
.bildband-link{display:block;color:inherit;text-decoration:none;position:relative}
/* Das Bild traegt einen filter und damit einen eigenen Stapelkontext – es malt sich ueber
   den Fokusring des Links. Der Ring kommt deshalb zusaetzlich als eigene Flaeche darueber. */
.bildband-link:focus-visible{outline-offset:-5px}
.bildband-link:focus-visible::after{content:"";position:absolute;inset:5px;z-index:6;
  border:3px solid var(--fokus);border-radius:var(--r-klein);pointer-events:none}
.bildband{position:relative;width:100%;background:var(--nacht);margin:0}
.bildband img{width:100%;height:clamp(300px,52vh,620px);object-fit:cover;object-position:50% 50%;
  filter:saturate(.72) contrast(1.06) brightness(.82)}
.bildband figcaption{position:absolute;left:0;right:0;bottom:0;
  padding:var(--a-6) var(--rand-seite);
  background:linear-gradient(to top,rgb(14 17 9 / .92),rgb(14 17 9 / 0));
  font-size:var(--t-24);font-weight:900;font-variation-settings:'wdth' 100;
  text-transform:uppercase;letter-spacing:-.01em;color:var(--kalk);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--a-2) var(--a-5)}
.bildband-pfeil{display:inline-flex;align-items:baseline;gap:var(--a-2);
  font-size:var(--t-14);font-weight:800;font-variation-settings:'wdth' 82;
  letter-spacing:.08em;color:var(--neon)}
.bildband-pfeil b{font-weight:900;transition:transform var(--d-fein) var(--kurve-weich)}
.bildband-link:hover .bildband-pfeil b,
.bildband-link:focus-visible .bildband-pfeil b{transform:translateX(6px)}
.bildband-link:hover .bildband img{filter:saturate(.86) contrast(1.06) brightness(.94)}
@media (prefers-reduced-motion:reduce){ .bildband-pfeil b{transition:none} }

/* ============================================================
   03 · Tattoo Conventions – Farbsturz auf Kalk
   (bis 05.10.2026 hiess dieser Abschnitt „Tattoo On The Road“;
   road-grid, felder und globus werden von beiden genutzt)
   ============================================================ */
.hell{background:var(--kalk);color:var(--text-dunkel)}
.hell h2,.hell h3{color:var(--text-dunkel)}
.hell p{color:var(--text-dunkel-leise)}
.hell .lead{color:var(--text-dunkel)}
.road-grid{display:grid;gap:var(--a-8);margin-top:var(--a-7)}
@media (min-width:900px){ .road-grid{grid-template-columns:minmax(0,1fr) minmax(0,.95fr);align-items:stretch}
  /* Runde 3, Befund 4: die linke Spalte endete rund 180 px ueber dem Globus-Kasten.
     Jetzt teilen sich die drei Felder die Resthoehe, der Text steht mittig darin. */
  .road-grid>div:first-child{display:flex;flex-direction:column}
  .road-grid>div:first-child .felder{flex:1;grid-auto-rows:1fr}
  .road-grid>div:first-child .feld{justify-content:center} }
.felder{display:grid;gap:var(--a-3);margin-top:var(--a-6)}
.feld{background:var(--kalk-karte);border:1px solid var(--linie-hell);border-radius:var(--r-mittel);
  padding:var(--a-5);display:flex;flex-direction:column;gap:var(--a-2)}
.feld b{font-size:var(--t-16);font-weight:900;font-variation-settings:'wdth' 82;text-transform:uppercase;letter-spacing:.01em}
.feld span{font-size:var(--t-16);color:var(--text-dunkel-leise);line-height:1.5}
.globus-halter{position:relative;display:flex;flex-direction:column;gap:var(--a-4);align-items:center;
  border:1px solid var(--linie-hell);border-radius:var(--r-mittel);background:var(--kalk-karte);padding:var(--a-5)}
.globus-halter canvas{width:100%;max-width:420px;aspect-ratio:1/1;height:auto}
.globus-marken{display:flex;flex-wrap:wrap;gap:var(--a-2);justify-content:center}
.globus-halter p{hyphens:none;max-width:44ch}
.globus-uhr{font-size:var(--t-12);font-weight:700;font-variation-settings:'wdth' 70;letter-spacing:.1em;
  color:var(--text-dunkel-leise);text-transform:uppercase}
.stempel{display:inline-block;border:2px solid var(--road-tief);color:var(--road-tief);
  padding:var(--a-2) var(--a-4);border-radius:var(--r-klein);transform:rotate(-4deg);
  font-size:var(--t-16);font-weight:900;font-variation-settings:'wdth' 78;letter-spacing:.08em;text-transform:uppercase}

/* ---------- Conventions: Kooperation, Rangliste, Bildraster ---------- */
.kooperation{display:flex;flex-wrap:wrap;align-items:center;gap:var(--a-2);margin-bottom:var(--a-5)}
.kooperation-x{font-size:var(--t-18);font-weight:900;color:var(--road-tief)}
.conv-liste{list-style:none;margin:var(--a-6) 0 0;padding:0;border-top:1px solid var(--linie-hell)}
.conv-liste li{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--a-2) var(--a-4);
  padding-block:var(--a-3);border-bottom:1px solid var(--linie-hell)}
.conv-liste b{flex:0 0 2.2em;font-size:var(--t-14);font-weight:700;font-variation-settings:'wdth' 72;
  color:var(--oliv-text);letter-spacing:.04em}
.conv-liste span{font-size:var(--t-24);font-weight:900;font-variation-settings:'wdth' 86;
  text-transform:uppercase;line-height:1.05;color:var(--text-dunkel)}
.conv-liste i{font-style:normal;font-size:var(--t-12);font-weight:700;font-variation-settings:'wdth' 78;
  letter-spacing:.08em;text-transform:uppercase;color:var(--road-tief)}
.conv-liste .conv-eins span{font-size:var(--t-gross);line-height:.9;letter-spacing:-.02em}
.conv-liste .conv-eins i{display:inline-flex;align-items:center;min-height:28px;padding-inline:var(--a-3);
  border-radius:var(--r-klein);background:var(--road-tief);color:var(--kalk)}
.conv-liste .conv-zwei span{font-size:var(--t-32)}
@media (min-width:900px){ .road-grid>div:first-child .conv-liste{flex:1;display:flex;flex-direction:column;justify-content:space-between} }

.conv-raster{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--a-3);margin-top:var(--a-8)}
.conv-karte{position:relative;margin:0;overflow:hidden;border-radius:var(--r-mittel);background:var(--nacht);
  aspect-ratio:4/3;grid-column:span 3}
.conv-karte img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.conv-karte figcaption{position:absolute;inset:auto 0 0 0;display:flex;flex-wrap:wrap;align-items:baseline;
  gap:var(--a-1) var(--a-2);padding:var(--a-4);
  background:linear-gradient(to top,rgb(14 17 9 / .92) 0%,rgb(14 17 9 / .6) 70%,rgb(14 17 9 / 0) 100%);color:var(--text)}
.conv-karte b{flex:1 0 100%;order:2;font-size:var(--t-24);font-weight:900;font-variation-settings:'wdth' 82;
  text-transform:uppercase;line-height:1;letter-spacing:-.01em}
.conv-rang{order:1;font-size:var(--t-12);font-weight:700;font-variation-settings:'wdth' 72;letter-spacing:.08em;
  text-transform:uppercase;color:var(--road)}
.conv-karte i,.conv-karte u{order:3;font-style:normal;text-decoration:none;font-size:var(--t-12);
  font-weight:700;font-variation-settings:'wdth' 78;letter-spacing:.06em;text-transform:uppercase;color:var(--text-leise)}
.conv-karte u::before{content:"·";margin-right:var(--a-2)}
.conv-karte em{order:1;font-style:normal;display:inline-flex;align-items:center;min-height:28px;padding-inline:var(--a-3);
  border-radius:var(--r-klein);background:var(--neon);color:var(--nacht);font-size:var(--t-12);font-weight:800;
  font-variation-settings:'wdth' 78;letter-spacing:.04em;text-transform:uppercase}
.conv-gross,.conv-mittel,.conv-karte:last-child{grid-column:span 6}
.conv-gross{aspect-ratio:16/11}
.conv-gross b{font-size:var(--t-gross);line-height:.9}
.conv-mittel b{font-size:var(--t-32)}
/* Kleine Karten auf dem Handy: zwei nebeneinander, die Beschriftung knapper */
@media (max-width:599px){
  /* Hochformat, damit Bildinhalt und Unterschrift nicht aneinanderstossen (Sichtpruefung 05.10.) */
  .conv-karte:not(.conv-gross):not(.conv-mittel):not(:last-child){aspect-ratio:4/5}
  .conv-karte:not(.conv-gross):not(.conv-mittel) figcaption{padding:var(--a-3)}
  .conv-karte:not(.conv-gross):not(.conv-mittel) b{font-size:var(--t-18)}
  .conv-karte:not(.conv-gross):not(.conv-mittel) i{display:none}
  .conv-karte:not(.conv-gross):not(.conv-mittel) u::before{content:none}
}
@media (min-width:600px) and (max-width:999px){
  .conv-gross{grid-column:span 4;aspect-ratio:auto}
  .conv-mittel{grid-column:span 2;aspect-ratio:auto}
  .conv-karte:nth-child(n+3){grid-column:span 2}
  .conv-karte:nth-child(n+6){grid-column:span 3}
  .conv-gross,.conv-mittel{min-height:clamp(300px,46vw,420px)}
}
@media (min-width:1000px){
  .conv-raster{grid-template-columns:repeat(10,minmax(0,1fr))}
  .conv-gross{grid-column:span 6;aspect-ratio:auto;min-height:460px}
  .conv-mittel{grid-column:span 4;aspect-ratio:auto;min-height:460px}
  .conv-karte:nth-child(n+3){grid-column:span 2}
}

/* ============================================================
   04 · Tattoo On The Road – Farbsturz auf Tintengruen
   Eigenes Projekt: Krankenwagen als Studio, Festivals wie Wacken.
   --nacht auf --road-flaeche 6,77:1 (siehe :root).
   ============================================================ */
.auf-road{background:var(--road-flaeche);color:var(--nacht)}
.auf-road h2,.auf-road h3,.auf-road .lead,.auf-road .kicker{color:var(--nacht)}
.auf-road :where(a,button,[tabindex]):focus-visible{outline-color:var(--nacht)}
.road-kopf{display:grid;gap:var(--a-6)}
.road-kopf .lead{color:var(--nacht)}
.road-kopf .felder{margin-top:0}
.auf-road .feld{background:var(--nacht);border-color:var(--nacht)}
.auf-road .feld b{color:var(--road)}
.auf-road .feld span{color:var(--text-leise)}
@media (min-width:900px){ .road-kopf{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--a-8);align-items:start} }

.road-galerie{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--a-3);margin-top:var(--a-3)}
.road-bild{position:relative;margin:0;overflow:hidden;border-radius:var(--r-mittel);background:var(--nacht);aspect-ratio:4/3}
.road-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.road-bild figcaption{position:absolute;left:var(--a-3);bottom:var(--a-3);display:inline-flex;align-items:center;
  min-height:28px;padding-inline:var(--a-3);border-radius:var(--r-klein);background:var(--nacht);color:var(--road);
  font-size:var(--t-12);font-weight:800;font-variation-settings:'wdth' 78;letter-spacing:.06em;text-transform:uppercase}
/* Drei Platzhalter in einer Reihe, gleich gross; auf dem Handy untereinander */
@media (max-width:599px){ .road-galerie{grid-template-columns:1fr} }

/* ---------- Die Wagen (Tattoo On The Road) ----------
   Krankenwagen und Bus je als dunkle Karte, festes Totenkopf-Design. */
.wagen{display:grid;gap:var(--a-6);margin-top:var(--a-8);background:var(--nacht);color:var(--text);
  border-radius:var(--r-mittel);padding:var(--a-4)}
.wagen-buehne{position:relative;aspect-ratio:4/3;border-radius:var(--r-klein);overflow:visible}
.wagen-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:var(--r-klein)}
/* Handy: oben links im Himmel, damit der Domain-Schriftzug unten frei bleibt */
.wagen-aufkleber{position:absolute;z-index:3;left:calc(-1 * var(--a-2));top:calc(-1 * var(--a-4));width:110px;height:auto;
  background:#fff;padding:var(--a-2);border-radius:var(--r-klein);transform:rotate(-6deg);box-shadow:var(--schatten-2)}
.wagen-text{display:flex;flex-direction:column;gap:var(--a-4);padding:var(--a-5) var(--a-2) var(--a-2)}
.wagen-kicker{font-size:var(--t-14);font-weight:700;font-variation-settings:'wdth' 72;letter-spacing:.04em;
  text-transform:uppercase;color:var(--road)}
.wagen h3{color:var(--text);text-transform:uppercase;font-weight:900;font-variation-settings:'wdth' 86}
.wagen p{color:var(--text-leise)}
.wagen-hinweis{font-size:var(--t-12);font-weight:700;font-variation-settings:'wdth' 78;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-leise)}
@media (min-width:900px){
  .wagen{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);align-items:center;padding:var(--a-5);gap:var(--a-7)}
  .wagen-aufkleber{width:200px;right:auto;left:calc(-1 * var(--a-5));bottom:auto;top:calc(-1 * var(--a-6));transform:rotate(-7deg)}
  .wagen-text{padding:0}
}

/* ---------- Der Plan: Tattoo-Bus ----------
   Zweiter Wechsler, gespiegelt: Text links, Bus rechts (16:9).
   Darunter im Text die echten Fotos von heute als kleine Reihe. */
.wagen .wagen-kicker{color:var(--road)}
.wagen-knopf{align-self:flex-start;margin-top:var(--a-2)}
/* Auf der dunklen Karte gilt der helle Fokusring, nicht der dunkle des Abschnitts */
.auf-road .wagen :where(a,button):focus-visible{outline-color:var(--fokus)}
@media (max-width:519px){ .wagen-knopf{align-self:stretch} }
/* Schmale Handys: Karten-Spalten duerfen schrumpfen, Wagen-Titel eine Stufe kleiner,
   sonst ragt „der Tattoo-Bus.“ (geschuetzte Leerzeichen) bei 320 px ueber die Karte. */
.wagen>*,.bus-rechts>*{min-width:0}
@media (max-width:400px){ .wagen h3{font-size:var(--t-24)} }
.bus-rechts{display:flex;flex-direction:column;gap:var(--a-4);order:-1}
.wagen-bus .wagen-buehne{aspect-ratio:16/9}
.wagen-bus .wagen-text{padding-top:var(--a-2)}
.bus-heute{display:flex;flex-direction:column;gap:var(--a-2)}
.bus-heute ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--a-2);list-style:none;margin:0;padding:0}
.bus-heute img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-klein)}
.bus-heute li:last-child img{object-position:50% 40%}
@media (min-width:900px){
  .wagen-bus{grid-template-columns:minmax(0,1fr) minmax(0,1.7fr)}
  .bus-rechts{order:0}
  .wagen-bus .wagen-text{padding-top:0}
}
.road-fuss{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--a-4);margin-top:var(--a-6)}
.road-festivals{display:flex;flex-wrap:wrap;gap:var(--a-2);list-style:none;margin:0;padding:0}
.auf-road .chip{background:var(--nacht);color:var(--road)}
@media (max-width:519px){ .road-fuss .knopf{width:100%} }

/* ============================================================
   05 · Diablo Praddo – Schwarz und Ochsenblut
   ============================================================ */
.diablo{background:var(--diablo-grund);color:var(--text);position:relative;overflow:hidden}
.diablo::before{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 80% at 50% 0%,var(--diablo-tief) 0%,rgb(0 0 0 / 0) 68%);pointer-events:none}
.diablo-held{position:relative;min-height:70svh;display:flex;align-items:flex-end;overflow:hidden}
.diablo-held video,.diablo-held>img.hintergrund{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 40%;filter:saturate(.8) contrast(1.05) brightness(.6)}
.diablo-held .schleier{position:absolute;inset:0;
  background:linear-gradient(to bottom,rgb(0 0 0 / .72) 0%,rgb(0 0 0 / .28) 40%,rgb(0 0 0 / .95) 100%)}
.diablo-held .innen{position:relative;z-index:3;padding-block:var(--a-8)}
/* Umschalter fuer den Bildlauf – in beiden Bewegungsprofilen bedienbar */
/* Links, nicht rechts (Sichtpruefung 04.10.2026, Befund 3): Steht der Anfang
   dieses Abschnitts gerade am unteren Fensterrand, sass der Knopf genau unter
   der schwebenden WhatsApp-Blase – bei 1920 x 1080 waren 48 % verdeckt und die
   Knopfmitte nicht anklickbar. Links trifft ihn die Blase nie. */
.video-schalter{position:absolute;z-index:5;left:var(--rand-seite);top:var(--a-5);
  background:rgb(0 0 0 / .72);backdrop-filter:blur(6px)}
@media (max-width:519px){ .video-schalter{left:var(--a-4);top:var(--a-4);min-height:44px;padding-inline:var(--a-4);font-size:var(--t-14)} }
.diablo-held h2{font-size:var(--t-riesig-lang);color:var(--kalk);line-height:.9;
  font-variation-settings:'wdth' 104}
.diablo-held h2 span{display:block;white-space:nowrap;overflow-wrap:normal;word-break:keep-all}
@media (max-width:359px){ .diablo-held h2{font-variation-settings:'wdth' 82} }
.diablo-held h2 .z2{color:var(--neon)}
.diablo-grid{display:grid;gap:var(--a-8);margin-top:var(--a-8)}
@media (min-width:900px){ .diablo-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:start} }
.diablo p{color:var(--text-leise)}
.diablo p strong{color:var(--text)}
.diablo-zahlen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--a-3)}
/* „500 000+" bekommt die volle Breite, sonst bricht die Zahl um.
   Unter 360 px ist die Liste ohnehin einspaltig. */
.diablo-zahlen li:nth-child(3){grid-column:1/-1}
/* „1994" stand sonst allein in der letzten Reihe und liess rechts eine Luecke */
.diablo-zahlen li:nth-child(4){grid-column:1/-1}
@media (max-width:359px){ .diablo-zahlen{grid-template-columns:1fr} }
.diablo-zahlen li{background:var(--diablo-tief);border:1px solid var(--diablo-blut);border-radius:var(--r-mittel);
  padding:var(--a-5);display:flex;flex-direction:column;gap:var(--a-2)}
.diablo-zahlen b{font-size:var(--t-gross);font-weight:900;font-variation-settings:'wdth' 84;line-height:.9;
  color:var(--kalk);letter-spacing:-.02em}
.diablo-zahlen span{font-size:var(--t-14);color:var(--text-leise)}
.diablo-bilder{display:grid;grid-template-columns:1fr;gap:var(--a-2);margin-top:var(--a-7)}
@media (min-width:640px){ .diablo-bilder{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr);align-items:stretch} }
.diablo-bilder img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-klein);
  filter:saturate(.85) contrast(1.06) brightness(.9)}
.diablo-bilder figure{margin:0;position:relative;overflow:hidden;border-radius:var(--r-klein);background:var(--diablo-tief)}
.diablo-bilder figure:nth-child(1){aspect-ratio:16/9}
.diablo-bilder figure:nth-child(2){aspect-ratio:9/16}
.diablo-bilder figure:nth-child(3){aspect-ratio:1/1}
/* Ab 640 px gibt die Rasterzeile die Hoehe vor. Wichtig: die drei nth-child-Regeln oben
   wiegen schwerer als ".diablo-bilder figure" – ohne gleich starken Selektor bliebe
   das Hochformat stehen, zog die Zeile auf und schob Bild 3 aus dem Satzspiegel. */
@media (min-width:640px){
  .diablo-bilder{grid-auto-rows:clamp(300px,24vw,400px)}
  .diablo-bilder figure:nth-child(n){aspect-ratio:auto;min-width:0;height:100%}
}
/* Drei verschiedene Ansichten: Auftritt frontal, Profil, Nahaufnahme.
   Der Ausschnitt ist je Bild gesetzt, damit nicht dreimal derselbe Kopf steht. */
.diablo-bilder figure:nth-child(1) img{object-position:50% 42%}
.diablo-bilder figure:nth-child(2) img{object-position:56% 46%}
.diablo-bilder figure:nth-child(3) img{object-position:50% 46%}
@media (min-width:640px){
  .diablo-bilder figure:nth-child(1) img{object-position:36% 50%}
  .diablo-bilder figure:nth-child(2) img{object-position:58% 45%}
  .diablo-bilder figure:nth-child(3) img{object-position:50% 50%}
}
.diablo-bilder figcaption{position:absolute;inset:auto 0 0 0;padding:var(--a-3) var(--a-4);
  background:linear-gradient(to top,rgb(0 0 0 / .88),rgb(0 0 0 / 0));
  font-size:var(--t-12);font-weight:700;font-variation-settings:'wdth' 78;color:var(--text)}
.arten{display:grid;gap:var(--a-3);margin-top:var(--a-7)}
@media (min-width:768px){ .arten{grid-template-columns:repeat(2,minmax(0,1fr))} }
.art{background:var(--nacht-karte);border:1px solid var(--diablo-blut);border-radius:var(--r-mittel);
  padding:var(--a-5);display:flex;flex-direction:column;gap:var(--a-3);align-items:flex-start}
.art h3{color:var(--kalk)}
.art p{font-size:var(--t-16);margin-bottom:var(--a-2)}
.art .knopf{margin-top:auto}

/* Buchung auf Glut-Vollfläche */
.auf-glut{background:var(--glut);color:var(--kalk)}
.auf-glut h2{color:var(--kalk)}
.auf-glut .lead{color:var(--kalk)}
.auf-glut h2+.glut-grid{margin-top:var(--a-7)}
.auf-glut>.innen>h2{margin-bottom:var(--a-6)}
.glut-grid{display:grid;gap:var(--a-7);margin-top:var(--a-7)}
@media (min-width:900px){
  .glut-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:start;gap:var(--a-8)}
  /* Die linke Spalte ist kuerzer als das Formular – sie laeuft mit, statt unten leeres Rot zu lassen. */
  .glut-text{position:sticky;top:calc(var(--kopf-h) + var(--a-5))}
}
.glut-text p{color:var(--kalk);opacity:.94}
.glut-text .chip{background:var(--diablo-blut);color:var(--text)}
.auf-glut>.innen>h2{font-size:var(--t-riesig-lang);font-variation-settings:'wdth' 100}
@media (max-width:359px){ .auf-glut>.innen>h2{font-variation-settings:'wdth' 78} }
/* drei Zusagen – fuellen die linke Spalte auf iPad quer und Desktop */
.glut-punkte{display:flex;flex-direction:column;gap:0;margin-top:var(--a-6);
  border-top:1px solid rgb(246 248 242 / .28)}
.glut-punkte li{display:flex;flex-direction:column;gap:var(--a-1);padding-block:var(--a-4);
  border-bottom:1px solid rgb(246 248 242 / .28)}
.glut-punkte b{font-size:var(--t-16);font-weight:900;font-variation-settings:'wdth' 82;
  text-transform:uppercase;letter-spacing:.02em;color:var(--kalk)}
.glut-punkte span{font-size:var(--t-16);color:var(--kalk);opacity:.92;line-height:1.45}
.glut-herkunft{margin:var(--a-6) 0 0;display:flex;align-items:center;gap:var(--a-5)}
.glut-herkunft img{width:140px;height:140px;flex:0 0 auto;object-fit:contain;
  /* die Umrisskarte wird einfarbig hell gesetzt, damit sie auf der Glutflaeche traegt */
  filter:brightness(0) invert(1);opacity:.92}
.glut-herkunft figcaption{font-size:var(--t-14);color:var(--kalk);opacity:.92;line-height:1.45}
.glut-herkunft figcaption b{display:block;font-size:var(--t-16);font-weight:900;
  font-variation-settings:'wdth' 82;text-transform:uppercase;letter-spacing:.02em;opacity:1}
@media (max-width:519px){ .glut-herkunft{flex-direction:column;align-items:flex-start;gap:var(--a-3)} }

/* ---------- Formular auf schwarzer Platte ---------- */
.platte{background:var(--diablo-grund);border-radius:var(--r-mittel);padding:var(--a-6);
  box-shadow:var(--schatten-2)}
@media (max-width:519px){ .platte{padding:var(--a-5)} }
.platte h3{color:var(--kalk);margin-bottom:var(--a-3)}
.platte>p{color:var(--text-leise);font-size:var(--t-16);margin-bottom:var(--a-6)}
.formgrid{display:grid;gap:var(--a-4)}
@media (min-width:640px){ .formgrid{grid-template-columns:repeat(2,minmax(0,1fr))} .breit{grid-column:1/-1} }
.feldblock{display:flex;flex-direction:column;gap:var(--a-2);min-width:0}
.feldblock label{font-size:var(--t-14);color:var(--text-leise);font-weight:700;font-variation-settings:'wdth' 88}
.feldblock label em{font-style:normal;color:var(--neon);font-size:var(--t-12);font-weight:700}
.feldblock label i{font-style:normal;color:var(--text-leise);font-size:var(--t-12);font-weight:400;opacity:.8}
input,select,textarea{font-family:inherit;font-size:var(--t-16);color:var(--text);
  background:var(--nacht-feld);border:1px solid var(--linie-bedien);border-radius:var(--r-klein);
  min-height:var(--knopf-h);padding:var(--a-3) var(--a-4);width:100%;line-height:1.4}
textarea{min-height:120px;resize:vertical}
input::placeholder,textarea::placeholder{color:var(--text-leise);opacity:.6}
select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-leise) 50%),linear-gradient(135deg,var(--text-leise) 50%,transparent 50%);
  background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px;background-size:6px 6px,6px 6px;background-repeat:no-repeat;
  padding-right:var(--a-8)}
.hilfe{font-size:var(--t-12);color:var(--text-leise);opacity:.85}
.feldfehler{display:none;align-items:center;gap:var(--a-2);font-size:var(--t-12);color:var(--fehler);font-weight:700}
.feldfehler svg{width:16px;height:16px;flex:0 0 auto}
[data-fehler="ja"] input,[data-fehler="ja"] select,[data-fehler="ja"] textarea{border-color:var(--fehler)}
[data-fehler="ja"] .feldfehler{display:flex}
.sammelfehler{display:none;gap:var(--a-2);align-items:flex-start;background:var(--diablo-tief);
  border:1px solid var(--fehler);border-radius:var(--r-klein);padding:var(--a-3) var(--a-4);
  color:var(--fehler);font-size:var(--t-16);font-weight:700;margin-bottom:var(--a-5)}
.sammelfehler[data-an="ja"]{display:flex}
.einwilligung{display:flex;gap:var(--a-3);align-items:flex-start}
.einwilligung input{appearance:none;-webkit-appearance:none;width:44px;height:44px;min-height:44px;
  flex:0 0 auto;margin:-10px 0 0 -10px;padding:0;border:0;background:transparent no-repeat center;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='.5' y='.5' width='23' height='23' rx='3' fill='%23212617' stroke='%23646F52'/%3E%3C/svg%3E")}
.einwilligung input:checked{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect width='24' height='24' rx='3' fill='%23B9F551'/%3E%3Cpath d='M6 12.5l4 4 8-8' fill='none' stroke='%230E1109' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
[data-fehler="ja"] .einwilligung input{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='.5' y='.5' width='23' height='23' rx='3' fill='%23212617' stroke='%23FF7A66'/%3E%3C/svg%3E")}
.einwilligung label{padding-top:var(--a-2)}
.einwilligung label{font-size:var(--t-14);color:var(--text-leise);font-weight:400}
/* Innenabstand statt Mindesthoehe: das Tippziel waechst, die Zeilenhoehe bleibt */
.einwilligung a{color:var(--neon);display:inline;padding-block:var(--a-4)}
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.senden{display:flex;flex-direction:column;gap:var(--a-3);align-items:flex-start}
.senden .hinweis{font-size:var(--t-12);color:var(--text-leise)}
/* Ohne JavaScript ist der Absendeknopf ausgeblendet (noscript-Stil im Kopf der
   Seite) und hier steht der Weg per E-Mail und WhatsApp – Codepruefung
   04.10.2026, Befund 7. */
.ohne-js-weg{width:100%;display:flex;flex-direction:column;gap:var(--a-4);
  background:var(--nacht-karte);border:1px solid var(--linie);border-left:3px solid var(--neon);
  border-radius:var(--r-mittel);padding:var(--a-5)}
.ohne-js-weg p{color:var(--text);font-weight:600}
.entwurfshinweis{font-size:var(--t-12);color:var(--text-leise);opacity:.75;margin-top:var(--a-4)}
.danke{display:none;flex-direction:column;gap:var(--a-4);align-items:flex-start}
.danke[data-an="ja"]{display:flex}
.danke h3{color:var(--neon)}
.danke p{color:var(--text-leise);font-size:var(--t-16)}

/* ============================================================
   06 · Standorte
   ============================================================ */
.abschnitt>.innen>h2{margin-bottom:var(--a-6)}
.orte-kopf{display:grid;gap:var(--a-5);margin-bottom:var(--a-6)}
@media (min-width:900px){ .orte-kopf{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;gap:var(--a-8)} }
.umschalt{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--a-2);
  max-width:360px;margin-top:var(--a-5)}
.umschalt button{min-height:var(--knopf-h);border-radius:var(--r-klein);cursor:pointer;
  background:transparent;border:1px solid var(--linie-bedien);color:var(--text);
  font-family:inherit;font-size:var(--t-16);font-weight:800;font-variation-settings:'wdth' 84;padding-inline:var(--a-3)}
.umschalt button[aria-pressed="true"]{background:var(--neon);color:var(--nacht);border-color:var(--neon)}
.orte-zahlen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--a-3);align-content:end}
.orte-zahlen li{background:var(--nacht-karte);border:1px solid var(--linie);border-radius:var(--r-mittel);
  padding:var(--a-4) var(--a-5);display:flex;flex-direction:column;gap:var(--a-1)}
.orte-zahlen b{font-size:var(--t-32);font-weight:900;font-variation-settings:'wdth' 86;line-height:1;
  color:var(--neon);letter-spacing:-.02em}
.orte-zahlen span{font-size:var(--t-12);color:var(--text-leise);font-variation-settings:'wdth' 86}
@media (max-width:519px){ .orte-zahlen{grid-template-columns:1fr} }
.ort-info{background:var(--nacht-karte);border:1px solid var(--linie);border-left:3px solid var(--neon);
  border-radius:var(--r-mittel);padding:var(--a-5);margin-bottom:var(--a-5);
  display:flex;flex-direction:column;gap:var(--a-2)}
.ort-info b{overflow-wrap:normal;word-break:normal;hyphens:none;
  font-size:var(--t-32);font-weight:900;font-variation-settings:'wdth' 84;text-transform:uppercase;line-height:1}
@media (max-width:399px){ .ort-info b{font-size:var(--t-24);font-variation-settings:'wdth' 74} }
.ort-info span{font-size:var(--t-16);color:var(--text-leise)}
.orte{display:grid;grid-template-columns:1fr;gap:var(--a-1)}
@media (min-width:640px){ .orte{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--a-6)} }
@media (min-width:1024px){ .orte{grid-template-columns:repeat(3,minmax(0,1fr))} }
.ort{display:flex;align-items:center;gap:var(--a-3);width:100%;min-height:var(--knopf-h);
  background:transparent;border:0;border-bottom:1px solid var(--linie);border-radius:0;
  color:var(--text);font-family:inherit;font-size:var(--t-16);text-align:left;cursor:pointer;padding:var(--a-2) 0;
  transition:color var(--d-fein),border-color var(--d-fein)}
.ort:hover{color:var(--neon);border-bottom-color:var(--linie-bedien)}
.ort b{font-size:var(--t-12);font-weight:700;font-variation-settings:'wdth' 70;color:var(--text-leise);
  min-width:30px;letter-spacing:.04em}
.ort span{flex:1 1 auto;font-weight:700;font-variation-settings:'wdth' 88;min-width:0}
.ort i{font-style:normal;font-size:var(--t-12);font-weight:700;font-variation-settings:'wdth' 74;
  color:var(--text-leise);white-space:nowrap}
.ort[data-zustand="offen"] i{color:var(--neon)}
.ort[aria-pressed="true"]{color:var(--neon);border-bottom-color:var(--neon)}
.orte-fuss{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--a-5);margin-top:var(--a-6)}
.orte-fuss p{max-width:48ch;color:var(--text-leise)}

/* ============================================================
   07 · Familie – drei breite Balken
   ============================================================ */
#familie{border-top:1px solid var(--linie)}
/* Sichtpruefung 04.10.2026, Befund 7: Ab 1280 px blieben rechts neben der
   Ueberschrift rund zwei Drittel der Breite leer. Jetzt stehen Ueberschrift
   links und der Text rechts – darunter laeuft die Balkenliste wie gehabt. */
.familie-kopf{display:grid;gap:var(--a-5)}
/* Wie im Held: der Schriftgrad haengt an der Spalte, nicht am Fenster – sonst
   lief „NICHT ALLEIN." bei 72 px in die rechte Spalte hinein. */
.familie-kopf>div:first-child{container-type:inline-size}
/* „NICHT ALLEIN." ist 8,85 x Schriftgrad breit -> 1/8,85 = 11,3 %; 11cqw laesst Luft. */
#familie h2{font-size:min(var(--t-gross),11cqw)}
.familie-kopf .lead{margin-top:0}
.familie-zusatz{margin-top:var(--a-4);max-width:46ch}
@media (min-width:1000px){
  .familie-kopf{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:end;gap:var(--a-8)}
  .familie-kopf-rechts{padding-bottom:var(--a-1)}
}
.familie-liste{display:flex;flex-direction:column;gap:0;margin-top:var(--a-7);
  border-top:1px solid var(--linie)}
.balken{display:grid;gap:var(--a-4);align-items:center;padding-block:var(--a-6);
  border-bottom:1px solid var(--linie);text-decoration:none;
  transition:background var(--d-zustand) var(--kurve-weich),padding-left var(--d-zustand) var(--kurve-weich)}
.balken:hover{background:var(--nacht-karte);padding-left:var(--a-4)}
.balken h3{font-size:var(--t-gross);font-weight:900;font-variation-settings:'wdth' 104;text-transform:uppercase}
.balken:hover h3{color:var(--neon)}
.balken p{font-size:var(--t-16);color:var(--text-leise)}
.balken .pfeil{font-size:var(--t-16);font-weight:800;color:var(--neon);white-space:nowrap}
/* Die Familie steht auf Kalk – sonst laufen vom Standorte-Abschnitt bis zur Fusszeile
   vier dunkle Flaechen am Stueck und der Farbrhythmus schlaeft im letzten Drittel ein. */
.hell .familie-liste{border-top-color:var(--linie-hell)}
.hell .balken{border-bottom-color:var(--linie-hell)}
.hell .balken:hover{background:var(--kalk-karte)}
.hell .balken:hover h3{color:var(--oliv-text)}
.hell .balken p{color:var(--text-dunkel-leise)}
.hell .balken .pfeil{color:var(--oliv-text)}
@media (min-width:1100px){
  .balken{grid-template-columns:minmax(0,520px) minmax(0,1fr) auto;gap:var(--a-7)}
}

/* ============================================================
   08 · Kontakt
   ============================================================ */
.kontakt{border-top:1px solid var(--linie)}
.kontakt-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--a-7);margin-top:var(--a-6)}
@media (min-width:900px){ .kontakt-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--a-8);align-items:stretch} }
.kontakt-links{display:flex;flex-direction:column;gap:var(--a-6)}
.kontakt-themen{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--linie);margin-top:auto}
.kontakt-themen a{display:flex;align-items:center;justify-content:space-between;gap:var(--a-4);
  min-height:56px;padding-block:var(--a-3);border-bottom:1px solid var(--linie);text-decoration:none;
  transition:color var(--d-fein),border-color var(--d-fein)}
.kontakt-themen a:hover{border-bottom-color:var(--linie-bedien)}
/* Auf dem Handy steht der Zusatz unter dem Namen – nebeneinander bliebe fuer
   „SAISON-EVENTS" nur noch ein dreizeiliger Rest. */
@media (max-width:519px){
  .kontakt-themen a{flex-wrap:wrap;align-items:flex-start;gap:var(--a-1) var(--a-4)}
  .kontakt-themen b,.kontakt-themen span.ziel{flex:1 0 100%}
}
/* Als Flex-Zeile: bricht der Name um, beginnt die zweite Zeile unter der ersten
   und nicht versetzt hinter dem Farbkaestchen (320 px, „SAISON-EVENTS"). */
.kontakt-themen b{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;min-width:0;
  font-size:var(--t-16);font-weight:900;font-variation-settings:'wdth' 86;
  text-transform:uppercase;letter-spacing:.01em}
.kontakt-themen .marke{width:12px;height:12px;flex:0 0 auto;margin-right:var(--a-3);border-radius:2px}
.kontakt-themen .m-saison{background:var(--saison)}
.kontakt-themen .m-road{background:var(--road)}
.kontakt-themen .m-conv{background:transparent;border:2px solid var(--road)}
.kontakt-themen .m-diablo{background:var(--diablo-blut);border:2px solid var(--diablo-blut)}
.kontakt-themen span.ziel{font-size:var(--t-12);font-weight:700;font-variation-settings:'wdth' 74;
  color:var(--text-leise);white-space:nowrap}
.kontakt-themen a:hover b{color:var(--neon)}
.kontakt h2{font-size:var(--t-riesig);color:var(--neon);margin-bottom:var(--a-6)}
.wege{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--linie)}
.weg{display:flex;align-items:center;justify-content:space-between;gap:var(--a-4);
  padding-block:var(--a-4);border-bottom:1px solid var(--linie);min-height:56px;
  text-decoration:none;font-size:var(--t-16);transition:color var(--d-fein)}
.wege{margin-top:auto}
/* Runde 3, Befund 4: ab 900 px stand die Wege-Liste unten in der Zeile, darueber blieben
   rund 600 x 110 px leer. Jetzt beginnt sie oben und die fuenf Zeilen fuellen die Hoehe. */
@media (min-width:900px){ .wege{margin-top:0} .weg{flex:1 1 auto} }
.weg:hover{color:var(--neon)}
.weg b{font-size:var(--t-12);font-weight:700;font-variation-settings:'wdth' 70;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-leise)}
.weg span{font-weight:700;font-variation-settings:'wdth' 90;text-align:right;min-width:0}

/* ============================================================
   Fusszeile – gezeichneter Rahmen mit Eckmarken
   ============================================================ */
.fuss{background:var(--nacht);border-top:1px solid var(--linie);padding-block:var(--a-8)}
.fuss-rahmen{position:relative;border:1px solid var(--linie);border-radius:var(--r-mittel);padding:var(--a-7)}
@media (max-width:639px){ .fuss-rahmen{padding:var(--a-5)} }
/* Unter 375 px reicht die Breite sonst nicht fuer 200 px Logoinhalt (harte Untergrenze) */
@media (max-width:374px){
  .fuss-rahmen{padding:var(--a-3)}
  .fuss-rahmen .fuss-logo{width:calc(100% + 2 * var(--a-3));margin-inline:calc(-1 * var(--a-3))}
}
.fuss-rahmen::before,.fuss-rahmen::after{content:"";position:absolute;width:12px;height:12px;border:1px solid var(--neon)}
.fuss-rahmen::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.fuss-rahmen::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.fuss-grid{display:grid;gap:var(--a-7)}
@media (min-width:640px){ .fuss-grid{grid-template-columns:repeat(3,minmax(0,1fr))} .fuss-marke{grid-column:1/-1} }
/* Zwischen 640 und 699 px waeren drei Spalten nur rund 132 px breit – „UID CHE-151.888.041"
   passt dann nicht mehr in eine Zeile. Dort stehen die vier Spalten zu zweit. */
@media (min-width:640px) and (max-width:699px){ .fuss-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1024px){ .fuss-grid{grid-template-columns:repeat(4,minmax(0,1fr))} .fuss-marke{grid-column:1/-1} }
/* Die Kontaktspalte traegt die laengste Zeile (info@riverside-event.ch) und bekommt
   deshalb mehr Gewicht – sonst bricht die Adresse in zwei Zeilen. */
/* Die Schlusszeile steht als eigene, volle Zeile unter den Spalten */
.fuss-schluss{grid-column:1/-1}
@media (min-width:1200px){ .fuss-grid{grid-template-columns:minmax(0,300px) minmax(0,1fr) minmax(0,.86fr) minmax(0,1.2fr) minmax(0,1.04fr);gap:var(--a-5);align-items:start}
  /* Runde 3, Befund 4: die Logospalte ist hoeher als die vier Linkspalten – rechts
     darunter blieben rund 700 x 160 px leer. Die Logospalte greift jetzt ueber zwei
     Zeilen, die Schlusszeile (Copyright, Impressum, Vorbehalt) rueckt daneben.
     Logobreite 300 px: ueber der Fuss-Mindestbreite 280 px aus gestaltung.md 2.2. */
  .fuss-marke{grid-column:1;grid-row:1/span 2}
  .fuss-schluss{grid-column:2/-1;grid-row:2;align-self:end}
  .fuss-schluss .fuss-unten{margin-top:var(--a-5)}
  .fuss-logo{max-width:300px} }
/* 340 px Dateibreite = 242 px Logoinhalt, ueber der Untergrenze 200 px aus gestaltung.md */
.fuss-logo{width:100%;max-width:var(--logo-fuss)}
.fuss-logo img{width:100%;aspect-ratio:1/1}
.fuss-adresse{font-size:var(--t-14);color:var(--text-leise);margin-top:var(--a-4)}
.fuss-spalte h3{font-size:var(--t-12);font-weight:700;font-variation-settings:'wdth' 70;letter-spacing:.12em;
  text-transform:uppercase;color:var(--neon);margin-bottom:var(--a-4)}
.fuss-spalte ul{display:flex;flex-direction:column;gap:var(--a-1)}
.fuss-spalte a{display:flex;align-items:center;min-height:44px;
  font-size:var(--t-14);color:var(--text-leise);text-decoration:none;
  /* „Datenschutzerklaerung" sprengt die schmale Spalte bei 640 px */
  overflow-wrap:break-word;hyphens:auto}
.fuss-spalte a:hover{color:var(--neon);text-decoration:underline}
.fuss-unten{display:flex;flex-wrap:wrap;gap:var(--a-3) var(--a-6);justify-content:space-between;
  align-items:center;margin-top:var(--a-7);padding-top:var(--a-5);border-top:1px solid var(--linie);
  font-size:var(--t-12);color:var(--text-leise)}
.fuss-unten a{color:var(--text-leise);display:inline-flex;align-items:center;min-height:44px}
.fuss-vorbehalt{margin-top:var(--a-4);font-size:var(--t-12);color:var(--text-leise);opacity:.72}

/* ---------- WhatsApp-Blase ---------- */
.wa{position:fixed;right:var(--a-4);bottom:var(--a-4);z-index:80;
  display:inline-flex;align-items:center;gap:var(--a-2);min-height:56px;padding:0 var(--a-5) 0 var(--a-4);
  /* #0F7A40 gegen Weiss = 5,41 : 1 (vorher #128C4A = 4,31 : 1) */
  background:#0F7A40;color:#FFFFFF;border-radius:var(--r-voll);text-decoration:none;
  font-size:var(--t-16);font-weight:800;font-variation-settings:'wdth' 86;box-shadow:var(--schatten-2)}
.wa svg{width:22px;height:22px;flex:0 0 auto;fill:currentColor}
.wa:hover{filter:brightness(1.08)}
/* Bis 1023 px (Handy und iPad) bleibt die Blase ein Kreis. Die breite Fassung mit
   Schriftzug deckte auf dem iPad 144 px Inhalt zu; als Kreis sind es nur noch 56 px.
   Der Name steht weiter im aria-label, geht also fuers Vorlesen nicht verloren. */
@media (max-width:1023px){ .wa{padding:0;width:56px;justify-content:center} .wa .wa-text{display:none} }
/* Was am rechten Rand unten steht, laesst der Blase eine Gasse frei.
   Blase 56 px + 16 px Rand + 8 px Luft = 80 px.
   Nur Stellen, die auf der jeweiligen Breite wirklich bis an den rechten Rand laufen. */
@media (max-width:1023px){
  .weg span,.balken p,.fuss-vorbehalt,.diablo-bilder figcaption{padding-right:80px}
  .orte-fuss,.familie-liste,.fuss-unten{padding-bottom:var(--a-6)}
}
/* Ab 1024 px traegt die Blase zusaetzlich den Schriftzug „WhatsApp": Sie deckt
   dann vom rechten Fensterrand 164 px ab (144 px breit + 20 px Rand). Was auf
   dieser Breite bis an den rechten Rand laeuft, bekommt deshalb eine Gasse von
   170 px – dasselbe Mass, das .held-aktion schon benutzt.
   Sichtpruefung 04.10.2026, Befunde 2 und 4: „Termin anfragen" war bei 1280x800
   zu 58 % verdeckt und in der Mitte nicht anklickbar, „Standort vorschlagen"
   und die Zusaetze der rechten Standortspalte teilweise ebenfalls. */
@media (min-width:1024px){
  .wand-fuss,.orte-fuss,.orte{padding-right:170px}
  /* Dazu der Einwilligungstext im Formular: Bei 1024 x 768 lag der Link
     „Datenschutzerklaerung" mit seiner Mitte unter der Blase (nachgemessen,
     galt auch schon vor dieser Runde). */
  .einwilligung label{padding-right:170px}
}
/* Unter 900 px stehen auch die linken Spalten (Filter, Themenliste, Zusagen) voll in der Breite. */
@media (max-width:899px){
  .kontakt-themen span.ziel,.glut-punkte span{padding-right:80px}
  .orte-kopf .umschalt{padding-right:80px}
}
/* Befund sicht 11: auf schmalen Geraeten kleiner, die Gasse entsprechend schmaler.
   Runde 3: die kleine Blase gilt jetzt bis 519 px (vorher nur bis 399 px) – damit
   deckt sie auf allen Handybreiten nur noch 48 + 12 = 60 px ab Rand statt 72 px. */
@media (max-width:519px){
  .wa{width:48px;min-height:48px;right:var(--a-3);bottom:var(--a-3)}
  .wa svg{width:20px;height:20px}
  .ort i,.weg span,.balken p,.fuss-vorbehalt,.diablo-bilder figcaption,
  .kontakt-themen span.ziel,.glut-punkte span,
  /* Runde 3, Befund 2: die Kurzueberschriften im Glutabschnitt liefen bis unter
     die Blase („… AUF NICHTS FEST"); dazu der Bildtext zur Herkunft.
     Die grosse H2 bleibt ohne Gasse: sie traegt ein geschuetztes Leerzeichen
     („Praddo anfragen") und wuerde aus der Gasse herauslaufen statt umzubrechen. */
  .glut-punkte b,.glut-herkunft figcaption{padding-right:68px}
}
@media (max-width:399px){
  /* Die Filterreiter muessen gleich breit bleiben: knappere Gasse (die Blase deckt
     ab dem rechten Rand 44 px) und engerer Innenabstand in den Knoepfen. */
  .orte-kopf .umschalt{padding-right:52px}
  .orte-kopf .umschalt button{padding-inline:var(--a-2)}
}
/* Runde 3, Befund 2: Im Impressum laeuft der Rechtstext als einzige Spalte bis an
   den rechten Rand. Bis 699 px rutschte deshalb beim Scrollen reihum das letzte
   Wort einer Zeile unter die Blase. Die Chipreihe (.marken) bleibt ausgenommen,
   sonst passen die Knoepfe auf 320 px nicht mehr nebeneinander. */
@media (min-width:360px) and (max-width:699px){
  /* Gasse genau so breit wie noetig, damit die Textspalte nicht unnoetig schmal
     wird: Blase 56 px + 16 px Rand = 72 px ab Fensterrand, davon traegt der
     Seitenrand (--rand-seite, 21-28 px hier) schon einen Teil -> 56 px.
     text-wrap:pretty haelt Einzelwoerter aus der letzten Zeile.
     Erst ab 360 px: darunter ist die Spalte so schmal, dass die Gasse
     Einzelwoerter in die letzte Zeile schiebt (pruefen.js, nachgemessen bei
     320/340 px). Dort wird stattdessen die Blase kleiner (siehe unten). */
  .recht-text :where(p,li,dd,dt,h3):not(.marken){padding-right:56px;text-wrap:pretty}
  /* Kurze Bloecke werden ausbalanciert, damit nicht ein Wort allein unten steht */
  .recht-text :where(h2,h3,p.lead){text-wrap:balance}
}
@media (min-width:360px) and (max-width:519px){
  /* Hier ist die Blase 48 px breit bei 12 px Rand = 60 px ab Fensterrand,
     der Seitenrand traegt 16-21 px -> 44 px reichen, 48 px mit Luft. */
  .recht-text :where(p,li,dd,dt,h3):not(.marken){padding-right:48px}
}
/* Unter 360 px rueckt die Blase auf das Mindesttippziel 44 x 44 und ganz in die
   Ecke: so deckt sie 52 statt 60 px ab Fensterrand. Dazu eine schmale Gasse von
   16 px – breiter geht nicht, ohne den Rechtstext in Einzelwort-Zeilen zu zwingen
   (nachgemessen bei 320 und 340 px: ab 24 px Gasse meldet pruefen.js Einzelwoerter).
   Damit bleibt vom verdeckten Streifen noch 20 px statt 56 px uebrig. */
@media (max-width:359px){
  .wa{width:44px;min-height:44px;right:var(--a-2);bottom:var(--a-2)}
  .recht-text :where(p,li,dd,dt,h3):not(.marken){padding-right:16px;text-wrap:pretty}
}

/* ============================================================
   Impressum
   ============================================================ */
/* Kontaktlinks im Fliesstext erreichen 44 px Tippziel, ohne die Zeilen auseinanderzuziehen:
   der negative Aussenabstand holt die Zeilenhoehe wieder zurueck. */
.recht-text :where(p,dd,li) a[href^="mailto:"]:not(.knopf):not(.chip),
.recht-text :where(p,dd,li) a[href^="tel:"]:not(.knopf):not(.chip){
  display:inline-block;padding-block:14px;margin-block:-14px}

/* Der Abstand oben haengt an der Leistenhoehe, nicht an einem festen Wert:
   mit dem vollstaendigen Logo ist die Leiste 212 px (bis 767 px) bzw. 220 px hoch.
   Vorher standen die ersten Zeilen 91-99 px HINTER der Leiste (gemessen bei
   320/390/768/1024 px) und ab 1200 px blieben 201 px leer. Jetzt ist die Luft
   unter der Leiste ueberall gleich: 48 px auf dem Handy, 64 px ab 768 px. */
.recht{padding-top:calc(var(--kopf-h) + var(--a-7))}
@media (min-width:768px){ .recht{padding-top:calc(var(--kopf-h) + var(--a-8))} }
.recht-grid{display:grid;gap:var(--a-7)}
@media (min-width:1100px){
  .recht-grid{grid-template-columns:minmax(0,1fr) 300px;gap:var(--a-9);align-items:start}
  .recht-rand{position:sticky;top:calc(var(--kopf-h) + var(--a-5))}
}
.recht-rand{display:none}
@media (min-width:1100px){ .recht-rand{display:block} }
.recht .recht-rand h2{font-size:var(--t-12);font-weight:800;font-variation-settings:'wdth' 70;
  letter-spacing:.14em;text-transform:uppercase;color:var(--neon);margin:0 0 var(--a-4)}
.recht-rand ol{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--linie)}
.recht-rand a{display:flex;align-items:center;gap:var(--a-3);min-height:48px;
  border-bottom:1px solid var(--linie);text-decoration:none;color:var(--text-leise);
  font-size:var(--t-14);font-weight:700;font-variation-settings:'wdth' 86}
.recht-rand a:hover{color:var(--neon)}
.recht-rand a b{font-size:var(--t-12);font-weight:700;font-variation-settings:'wdth' 70;
  color:var(--neon);min-width:24px}
.recht-rand .karte{margin-top:var(--a-6);background:var(--nacht-karte);border:1px solid var(--linie);
  border-radius:var(--r-mittel);padding:var(--a-5)}
.recht-rand .karte p{font-size:var(--t-14);color:var(--text-leise);margin:0 0 var(--a-4)}
.recht-rand .karte .knopf{width:100%}
@media (min-width:1100px){ .recht-rand{padding-bottom:var(--a-8)} }
.recht h2[id]{scroll-margin-top:calc(var(--kopf-h) + var(--a-5))}

/* Im Rechtstext stehen lange Komposita („Datenschutzerklaerung"). Hier darf
   mit Trennstrich umbrochen werden – die Regel „nie trennen" gilt der Anzeigeschrift. */
.recht-grid>*{min-width:0}
.recht :where(h1,h2,h3){overflow-wrap:break-word;hyphens:auto}
.recht h1{font-size:var(--t-gross);color:var(--kalk);margin-bottom:var(--a-4)}

.recht h2{font-size:var(--t-32);margin-top:var(--a-8);margin-bottom:var(--a-4);color:var(--neon)}
@media (max-width:430px){ .recht h2{font-size:var(--t-24);font-variation-settings:'wdth' 84} }
.recht h3{font-size:var(--t-24);font-variation-settings:'wdth' 96;margin-top:var(--a-6);margin-bottom:var(--a-3);
  text-transform:none;letter-spacing:0;font-weight:800}
.recht p{color:var(--text-leise);margin-bottom:var(--a-4)}
.recht a{color:var(--neon)}
.recht .chip,.recht .knopf-voll{color:var(--nacht)}
.recht .chip{text-decoration:none;min-height:44px;padding-inline:var(--a-4)}
.recht .marken{display:flex;flex-wrap:wrap;gap:var(--a-2);margin-bottom:var(--a-7)}
@media (min-width:1100px){ .recht .marken{display:none} }
.recht dl{display:grid;gap:var(--a-3);margin:0 0 var(--a-5);
  background:var(--nacht-karte);border:1px solid var(--linie);border-radius:var(--r-mittel);padding:var(--a-5)}
@media (min-width:640px){ .recht dl{grid-template-columns:220px minmax(0,1fr);column-gap:var(--a-5)} }
.recht dt{font-size:var(--t-14);font-weight:700;color:var(--text-leise)}
.recht dd{margin:0;font-size:var(--t-16)}

/* ---------- Ladebewegung des Helden ---------- */
.anim .held-innen .a1,.anim .held-innen .a2,.anim .held-innen .a3,.anim .held-innen .a4{opacity:0}
.anim .held-bild{opacity:0}
body.los .held-bild{animation:bildAuf var(--d-gross) var(--kurve-raus) both}
body.los .held-innen .a1{animation:einZeileL 520ms var(--kurve-raus) 160ms both}
body.los .held-innen .a2{animation:einZeileR 520ms var(--kurve-raus) 220ms both}
body.los .held-innen .a3{animation:einAuf 320ms var(--kurve-raus) 620ms both}
body.los .held-innen .a4{animation:einAuf 280ms var(--kurve-raus) 820ms both}
@keyframes bildAuf{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:scale(1)}}
@keyframes einZeileL{from{opacity:0;transform:translate3d(-9%,0,0);font-variation-settings:'wdth' 70}
  to{opacity:1;transform:translate3d(0,0,0);font-variation-settings:'wdth' 120}}
@keyframes einZeileR{from{opacity:0;transform:translate3d(9%,0,0);font-variation-settings:'wdth' 70}
  to{opacity:1;transform:translate3d(0,0,0);font-variation-settings:'wdth' 108}}
@keyframes einAuf{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  .anim .held-innen .a1,.anim .held-innen .a2,.anim .held-innen .a3,.anim .held-innen .a4{opacity:1}
  .anim .held-bild{opacity:1}
  body.anim .held-tafel,body.anim .tafel-liste li{opacity:1}
  .lauf-spur{animation:none;width:100%}
}

/* Standortfilter */
.ort[data-aus="ja"]{display:none}

/* Janine 04.10.2026: „Nicht jedes Event findet bei uns statt.“ deutlich grösser,
   als zweiter Riesentitel der Seite nach dem Held. Ganze Wörter, nie trennen. */
#tattoo-on-the-road h2{
  font-size:clamp(44px, 8.6vw, 124px);line-height:.88;
  overflow-wrap:normal;word-break:keep-all;hyphens:none;
  max-width:17ch;margin-bottom:var(--a-7, 48px);
}
@media (max-width:359px){ #tattoo-on-the-road h2{font-size:40px;font-variation-settings:'wdth' 82} }

/* ============================================================
   404 – eigene Seite statt der Standardseite von Vercel
   (Codepruefung 04.10.2026, Befund 11)
   ============================================================ */
.fehlseite{padding-top:calc(var(--kopf-h) + var(--a-7));min-height:62svh;
  display:flex;flex-direction:column;justify-content:center}
@media (min-width:768px){ .fehlseite{padding-top:calc(var(--kopf-h) + var(--a-8))} }
.fehlseite h1{font-size:var(--t-wand);color:var(--kalk);margin-bottom:var(--a-5);
  line-height:.9;width:fit-content;max-width:100%}
.fehlseite .lead{color:var(--text)}
.fehl-kontakt{margin-top:var(--a-7);color:var(--text-leise);max-width:60ch}
/* Die Blase sitzt unten rechts – die Schlusszeile laesst ihr eine Gasse. */
@media (min-width:1024px){ .fehl-kontakt{padding-right:170px} }
@media (max-width:1023px){ .fehl-kontakt{padding-right:80px} }
@media (max-width:519px){ .fehl-kontakt{padding-right:68px} }

/* ===== Janine, 05.10.2026: „Logo links oben muss viel kleiner.“ =====
   Logo bleibt vollständig (Wappen + RIVERSIDE EVENT® + URL-Zeile), nur kleiner:
   Handy 72 px, ab 768 px 88 px. Die Leiste wird dadurch rund halb so hoch.
   Rechts stehen Uhr, „Anfragen“ und Menü jetzt in EINER Zeile statt untereinander. */
:root{ --logo-leiste:72px; --kopf-h:88px }                    /* 70 + 2x8 + 1 */
@media (min-width:768px){ :root{ --logo-leiste:88px; --kopf-h:111px } }  /* 85,4 + 2x12 + 1 */
body.gescrollt{ --logo-leiste:72px }
@media (min-width:768px){ body.gescrollt{ --logo-leiste:88px } }
.kopf-rechts{flex-direction:row;align-items:center;justify-content:flex-end;padding-block:0}
.kopf-aktion{flex-direction:row;align-items:center}
@media (max-width:479px){ .kopf-stand{display:none} }
@media (max-width:399px){
  .menue-knopf{padding-inline:0;width:44px;flex:0 0 44px;gap:0}
  .menue-knopf>span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}
}

/* ===== Janine, 05.10.2026: „grosser Leerraum auf der Startseite“ =====
   Seit die Leiste flacher ist, klebte der Held-Inhalt unten und oben blieb ein
   dunkles Loch. Inhalt jetzt mittig im ersten Bildschirm, Held nicht höher als nötig,
   Bühnenlicht wandert mit (Bild weiter oben angesetzt). */
.held{justify-content:center;min-height:min(100svh, 980px);
  padding-top:calc(var(--kopf-h) + var(--a-7));padding-bottom:var(--a-7)}
.held-innen{align-items:center;padding-bottom:0}
.held-bild{object-position:50% 45%}
.held-tonung{background:linear-gradient(to bottom,rgb(14 17 9 / .55) 0%,rgb(14 17 9 / .15) 30%,rgb(14 17 9 / .78) 75%,var(--nacht) 100%)}
@media (min-width:1200px){ .held-innen{padding-bottom:0} }
/* Flache Fenster (≤ 900 px hoch): Seit der Inhalt mittig steht und die Leiste flach ist,
   reicht der Platz für eine grössere Schlagzeile als die alten 64 px. */
@media (min-width:1000px) and (max-height:900px){
  .held h1{font-size:min(var(--t-riesig),13cqw,92px)}
}

/* Janine, 05.10.2026: Abschnittsüberschriften („01 · Riverside Event“ usw.) grösser. */
.kicker{font-size:clamp(18px, 1rem + 0.8vw, 26px);font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:var(--a-5)}