@charset "utf-8";
/* Riverside Gastro – Variante 1 „Lounge-Nacht“
   Dunkle, kinoartige Nachtwelt. Gold auf Schwarz, Clubgefühl.
   Bausteine nach ~/.claude/skills/einheitliche-gestaltung/SKILL.md
   Farben und Kontraste nach gemeinsam/gestaltung.md Abschnitt 2. */

@import "schriften.css";

/* ---------------------------------------------------------------- 1 Bausteine */
:root{
  /* Dunkel */
  --nacht:#0F0C09; --nacht-2:#1A1511; --rauch:#262019; --logo-schwarz:#111111;
  --cbd-dunkel:#1A160E;
  /* Hell */
  --creme:#F5EFE3; --creme-hell:#FCF8F1; --sand:#E6DAC6; --amber:#EFDFC0; --weiss:#FFFFFF;
  /* Gold – drei Rollen, strikt getrennt */
  --gold:#967539; --gold-hell:#D7B272; --gold-text:#705829;
  /* Bereichsfarben – drei gedeckte Töne aus der Logo-Welt:
     Bronze (Getränke), Bordeaux (Speisen), Oliv-Gold (CBD). Kein Petrol, kein Grün. */
  --getraenke:#8A5A24; --getraenke-hell:#D9A864;
  --speisen:#7B2435;   --speisen-hell:#E08C9A;
  --cbd:#5A5324;       --cbd-hell:#C9C08A;
  --familie:#7A5736;
  /* Marken: Kupfer (Ink) und Goldbeige (Beauty) – gedeckt, gleiche Tonwelt */
  --ink:#8A3A22;    --ink-hell:#CE8A6A;
  --beauty:#7A5736; --beauty-hell:#D9AE82;
  /* Event als Textknopf im Grün von riverside-event.ch (05.10.2026, Janine). */
  --event:#477000;  --event-hell:#B9F551;
  /* Die Schwesterwappen tragen je ihre eigene Farbe – genau wie auf
     riverside-lifestyle.com: Ink Elfenbein, Beauty Altrosa, Event Neongrün
     wie auf riverside-event.ch (05.10.2026). Alle drei stehen nur auf dunklem Grund (Kontrast je > 10:1).
     --*-hell ist der Hover-Ton. --mk-event-tief ist der dunkle Grund der
     Event-Fläche; für Ink und Beauty gibt es keine solche Fläche, darum auch
     keine -tief-Werte (02.10.2026: tote Variablen entfernt). */
  --mk-ink:#EFE9DF;    --mk-ink-hell:#FBF8F3;
  --mk-beauty:#E9C4CA;  --mk-beauty-hell:#F8E6E9;
  --mk-event:#B9F551;  --mk-event-hell:#DAFB9F;  --mk-event-tief:#2F4A00;

  /* 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 – diese Variante ist kantig, wie Zuma, Hakkasan und Sexy Fish */
  --r-klein:2px; --r-mittel:2px; --r-voll:999px; --r-geraet:28px;
  /* Linien und Schatten */
  --rand:rgb(215 178 114 / .26);
  --rand-stark:rgb(215 178 114 / .52);
  --linie:1px solid var(--rand);
  --schatten-1:0 1px 2px rgb(0 0 0 / .30), 0 2px 8px rgb(0 0 0 / .26);
  --schatten-2:0 24px 60px -28px rgb(0 0 0 / .72);
  /* Raster */
  --breite:1240px; --rand-seite:clamp(16px,4vw,40px);
  --gasse:max(var(--rand-seite), calc((100vw - var(--breite)) / 2 + var(--rand-seite)));
  /* Knöpfe */
  --knopf-h:48px; --knopf-h-klein:44px; --knopf-px:24px;
  --ease:cubic-bezier(.22,1,.36,1);

  /* Schriftstufe – keine Zwischengrössen */
  --t-13:13px; --t-15:15px; --t-17:17px; --t-20:20px;
  --t-28:28px; --t-40:40px; --t-64:64px; --t-96:96px; --t-128:128px;
  --abschnitt:var(--a-9);
}
@media (max-width:1024px){ :root{ --t-128:96px; --t-96:64px; --t-64:40px; --t-40:28px; --abschnitt:var(--a-8); } }
@media (max-width:600px){  :root{ --t-128:56px; --t-96:44px; --t-64:32px; --t-40:28px; --abschnitt:var(--a-7); } }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--nacht); color:var(--creme);
  font-family:Jost,"Helvetica Neue",Arial,sans-serif;
  font-size:var(--t-17); line-height:1.6; font-weight:300;
  overflow-wrap:break-word; hyphens:manual; text-wrap:pretty;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
picture{ display:contents; }
h1,h2,h3,h4{
  font-family:"Bodoni Moda","Times New Roman",serif; font-weight:400;
  margin:0; line-height:1.08; text-wrap:balance; letter-spacing:-.005em;
}
p{ margin:0; text-wrap:pretty; max-width:62ch; }
h1,h2,h3,h4,.held-unter,.knopf,.etikett,.plakette,.ort-name,.post-adresse,
.oeffner,.hinweis-beispiel strong{ hyphens:manual; }
/* Mehrzeilige grosse Überschriften: 1,08 lässt die Unterlänge des „g" an die
   Oberlängen der Folgezeile stossen (Sichtprüfung 02.10.2026). */
.held h1,.kopfzeile-abschnitt h2,.zick-text h3,.rand-reihe-text h2,
.familie-oben h2,.rechts-kopf h1,.ort-fehlt h3,.karte-kopf h3,.ort-offen-text h3{ line-height:1.16; }
ul{ margin:0; padding:0; list-style:none; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--gold-hell); outline-offset:3px; border-radius:var(--r-klein); }
.hell :focus-visible{ outline-color:var(--gold-text); }
::selection{ background:var(--gold); color:var(--creme-hell); }

.mitte{ width:100%; max-width:var(--breite); margin-inline:auto; padding-inline:var(--rand-seite); }
.sprung{
  position:absolute; left:var(--a-4); top:-200px; z-index:99;
  background:var(--gold-hell); color:var(--nacht);
  padding:var(--a-3) var(--a-5); text-decoration:none; font-size:var(--t-15);
}
.sprung:focus{ top:var(--a-4); }
.satz{ display:block; }
.nur-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* ---------------------------------------------------------------- 2 Knöpfe */
.knopf{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--a-2);
  min-height:var(--knopf-h); padding:0 var(--knopf-px);
  font-family:Jost,Arial,sans-serif; font-size:var(--t-15); font-weight:500;
  letter-spacing:.10em; text-transform:uppercase; white-space:nowrap;
  text-decoration:none; border:1px solid transparent; border-radius:var(--r-klein);
  background:none; cursor:pointer;
  transition:background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.knopf-gold{ background:var(--gold-hell); color:var(--nacht); border-color:var(--gold-hell); }
.knopf-gold:hover{ background:var(--creme); border-color:var(--creme); }
.knopf-rand{ border-color:var(--rand-stark); color:var(--gold-hell); }
.knopf-rand:hover{ border-color:var(--gold-hell); background:rgb(215 178 114 / .12); }
.hell .knopf-gold{ background:var(--gold-text); color:var(--creme-hell); border-color:var(--gold-text); }
.hell .knopf-gold:hover{ background:var(--nacht); border-color:var(--nacht); }
.hell .knopf-rand{ border-color:var(--gold-text); color:var(--gold-text); }
.hell .knopf-rand:hover{ background:var(--gold-text); color:var(--creme-hell); }

/* Haarlinien-Knopf – das Kennzeichen von Hakkasan: Linie oben, Linie unten, keine Fläche */
.knopf-linie{
  position:relative; border-color:transparent; color:var(--gold-hell);
  padding-inline:var(--a-5); letter-spacing:.18em; font-size:var(--t-13);
}
.knopf-linie::before,.knopf-linie::after{
  content:""; position:absolute; left:50%; translate:-50% 0; width:100%; height:1px;
  background:var(--gold-hell); transition:width .4s var(--ease);
}
.knopf-linie::before{ top:0; } .knopf-linie::after{ bottom:0; }
.knopf-linie:hover::before,.knopf-linie:hover::after{ width:112%; }
.hell .knopf-linie{ color:var(--gold-text); }
.hell .knopf-linie::before,.hell .knopf-linie::after{ background:var(--gold-text); }

.knopf-ink{ border-color:var(--ink-hell); color:var(--ink-hell); }
.knopf-ink:hover{ background:var(--ink); border-color:var(--ink); color:var(--creme-hell); }
.knopf-beauty{ border-color:var(--beauty-hell); color:var(--beauty-hell); }
.knopf-beauty:hover{ background:var(--beauty); border-color:var(--beauty); color:var(--creme-hell); }
.knopf-event{ border-color:var(--event-hell); color:var(--event-hell); }
.knopf-event:hover{ background:var(--event); border-color:var(--event); color:var(--creme-hell); }
/* Noch kein Ziel (heute nur „Karte als PDF“): der Knopf steht da, ist aber sichtbar ausser Betrieb.
   Darum füllt er sich auch beim Darüberfahren und im Fokus nicht – sonst
   wirkt er benutzbar, obwohl er es nicht ist (Sichtprüfung 02.10.2026). */
.knopf-aus{ border-style:dashed; cursor:not-allowed; }
.hell .knopf-aus{ border-color:rgb(112 88 41 / .52); color:var(--gold-text); }
.knopf-aus:hover,.knopf-aus:focus-visible{ background:none; border-color:var(--rand-stark); color:var(--gold-hell); }
.hell .knopf-aus:hover,.hell .knopf-aus:focus-visible{ background:none; border-color:rgb(112 88 41 / .52); color:var(--gold-text); }
/* `hidden` muss die Klasse schlagen – sonst bleibt ein versteckter Knopf sichtbar. */
.knopf[hidden]{ display:none; }
.knopf-paar{ display:flex; align-items:center; gap:var(--a-3); flex-wrap:wrap; }
.knopf-paar>.knopf{ flex:0 1 auto; min-width:0; }

/* ---------------------------------------------------------------- 3 Etiketten und Plaketten */
.etikett{
  display:inline-block; font-family:Jost,Arial,sans-serif; font-size:var(--t-13);
  font-weight:500; letter-spacing:.26em; text-transform:uppercase; color:var(--gold-hell);
  line-height:1.4;
}
.hell .etikett{ color:var(--gold-text); }
.plakette{
  display:inline-flex; align-items:center; gap:var(--a-2); min-height:28px;
  padding:0 var(--a-3); border:1px solid var(--rand-stark); border-radius:var(--r-klein);
  font-family:Jost,Arial,sans-serif; font-size:var(--t-13); font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold-hell);
}
.plakette-offen::before{ content:""; width:6px; height:6px; background:var(--gold-hell); border-radius:var(--r-voll); }
/* „entfällt“ sieht anders aus als „folgt“: keine Goldlinie (gestaltung.md 2.6) */
.plakette-absage{ border-color:rgb(245 239 227 / .22); color:rgb(245 239 227 / .72); letter-spacing:.12em; }
.hell .plakette{ border-color:rgb(112 88 41 / .42); color:var(--gold-text); }
.hell .plakette-offen::before{ background:var(--gold-text); }
.hell .plakette-absage{ border-color:rgb(38 32 25 / .26); color:var(--rauch); }

/* ---------------------------------------------------------------- 4 Kopfzeile */
/* Die Kopfzeile hat bewusst keine Linie – weder beim Wappen noch unten.
   Sie setzt sich nur über den dunkleren Grund ab (Janine, 02.10.2026). */
.kopf{
  position:fixed; inset:0 0 auto 0; z-index:40; border:0;
  transition:background-color .4s var(--ease);
}
.kopf.fest{ background:rgb(15 12 9 / .94); backdrop-filter:blur(10px); }
.kopf-innen{ display:flex; align-items:center; gap:var(--a-5); min-height:100px; }
.marke{ display:block; flex:0 0 auto; line-height:0; }
/* Volles Logo mit riverside-lifestyle-Schriftzug (Janine) */
.marke img{ width:auto; height:84px; }
.nav-gross{ margin-left:auto; }
.nav-gross ul{ display:flex; align-items:center; gap:var(--a-6); }
.nav-gross a{
  display:inline-block; padding:var(--a-3) 0; text-decoration:none;
  font-size:var(--t-15); font-weight:400; letter-spacing:.14em; text-transform:uppercase;
  color:var(--creme); position:relative;
}
.nav-gross a::after{
  content:""; position:absolute; left:0; bottom:var(--a-2); width:0; height:1px;
  background:var(--gold-hell); transition:width .3s var(--ease);
}
.nav-gross a:hover::after{ width:100%; }
/* Die drei Schwesterwappen: weisse PNG als CSS-Maske, eingefärbt je Marke –
   dasselbe Verfahren und dieselben Farben wie auf riverside-lifestyle.com. */
.wappenreihe{ display:flex; align-items:center; gap:var(--a-2); flex:0 0 auto; }
.wappen-knopf{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; min-height:44px; padding:0; border-radius:var(--r-klein);
  text-decoration:none; flex:0 0 auto;
}
.wappen-marke{
  display:block; height:36px;
  mask-repeat:no-repeat; mask-position:center; mask-size:contain;
  -webkit-mask-repeat:no-repeat; -webkit-mask-position:center; -webkit-mask-size:contain;
  transition:background-color .3s var(--ease), filter .3s var(--ease);
}
/* Breite je Wappen aus dem Seitenverhältnis der PNG – so stehen alle drei gleich hoch.
   Farbe je Marke: Ink Elfenbein, Beauty Altrosa, Event Neongrün. */
.wappen-marke[data-marke="ink"]{    width:38px; background-color:var(--mk-ink);    mask-image:url("mark-ink.png");    -webkit-mask-image:url("mark-ink.png"); }
.wappen-marke[data-marke="beauty"]{ width:26px; background-color:var(--mk-beauty); mask-image:url("mark-beauty.png"); -webkit-mask-image:url("mark-beauty.png"); }
.wappen-marke[data-marke="event"]{  width:29px; background-color:var(--mk-event);  mask-image:url("mark-event.png");  -webkit-mask-image:url("mark-event.png"); }
.wappen-knopf:hover   .wappen-marke[data-marke="ink"],
.wappen-knopf:focus-visible .wappen-marke[data-marke="ink"]{
  background-color:var(--mk-ink-hell); filter:drop-shadow(0 0 7px rgb(239 233 223 / .60));
}
.wappen-knopf:hover   .wappen-marke[data-marke="beauty"],
.wappen-knopf:focus-visible .wappen-marke[data-marke="beauty"]{
  background-color:var(--mk-beauty-hell); filter:drop-shadow(0 0 7px rgb(233 196 202 / .60));
}
.wappen-knopf:hover   .wappen-marke[data-marke="event"],
.wappen-knopf:focus-visible .wappen-marke[data-marke="event"]{
  background-color:var(--mk-event-hell); filter:drop-shadow(0 0 7px rgb(185 245 81 / .60));
}
/* Grössere Fassung in Schublade und Fusszeile */
.wappenreihe-gross{ gap:var(--a-3); }
.wappenreihe-gross .wappen-knopf{ min-width:56px; min-height:56px; }
.wappenreihe-gross .wappen-marke{ height:44px; }
.wappenreihe-gross .wappen-marke[data-marke="ink"]{ width:47px; }
.wappenreihe-gross .wappen-marke[data-marke="beauty"]{ width:31px; }
.wappenreihe-gross .wappen-marke[data-marke="event"]{ width:36px; }
.oeffner{ display:none; }

/* Auf dem Handy rücken die Wappen eng zusammen; unter 361 px wird es in der
   Kopfzeile zu eng – dort stehen sie oben in der Schublade. */
@media (max-width:1120px){ .kopf .wappenreihe{ margin-left:auto; gap:0; } .kopf .wappenreihe .wappen-marke{ height:30px; } }
/* Sehr schmale Handys: Wappen bleiben in der Kopfzeile sichtbar (Janine), dafür zeigt
   der Menüknopf nur sein Symbol; das Wort bleibt für Screenreader lesbar. */
@media (max-width:360px){
  .kopf-innen{ gap:var(--a-2); }
  .marke img{ height:58px; }
  .kopf .wappenreihe{ gap:0; }
  .kopf .oeffner{ min-width:44px; padding-inline:0; gap:0; }
  .kopf .oeffner-wort{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
}
@media (max-width:1120px){
  .nav-gross{ display:none; }
  .kopf-innen{ min-height:80px; justify-content:space-between; }
  .marke img{ height:68px; }
  .oeffner{
    display:inline-flex; align-items:center; justify-content:center; gap:var(--a-2);
    min-height:var(--knopf-h); min-width:var(--knopf-h); padding:0 var(--a-4); gap:var(--a-3);
    background:none; border:1px solid var(--rand-stark); border-radius:var(--r-klein);
    color:var(--gold-hell); font-family:Jost,Arial,sans-serif; font-size:var(--t-13);
    font-weight:500; letter-spacing:.16em; text-transform:uppercase; cursor:pointer;
  }
  .oeffner-balken{ display:block; width:18px; height:9px; border-top:1px solid currentColor; border-bottom:1px solid currentColor; }
}

/* Schublade */
.schublade{
  position:fixed; inset:0; z-index:50; background:var(--nacht);
  padding:var(--a-5) 0 var(--a-8); overflow-y:auto;
  display:flex; flex-direction:column; gap:var(--a-6);
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s;
}
.schublade[data-offen="ja"]{ opacity:1; visibility:visible; }
.schublade-kopf{ display:flex; align-items:center; justify-content:space-between; gap:var(--a-4); }
.schublade h2{ font-size:var(--t-13); font-family:Jost,Arial,sans-serif; font-weight:500;
  letter-spacing:.26em; text-transform:uppercase; color:var(--gold-hell); margin-bottom:var(--a-4); }
.schublade-liste{ display:flex; flex-direction:column; }
.schublade-liste a{
  display:block; padding:var(--a-4) 0; text-decoration:none;
  font-family:"Bodoni Moda",serif; font-size:var(--t-28); line-height:1.2;
  border-bottom:1px solid var(--rand);
}
.schublade .knopf-paar .knopf{ flex:1 1 140px; }

/* ---------------------------------------------------------------- 5 Held */
.held{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  padding-block:var(--a-10) var(--a-8); overflow:hidden; isolation:isolate;
}
.held-bild{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.held-bild img{ width:100%; height:100%; object-fit:cover; object-position:62% 50%; }
.held-schleier{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to top, var(--nacht) 0%, rgb(15 12 9 / .82) 24%, rgb(15 12 9 / .30) 58%, rgb(15 12 9 / .62) 100%),
    radial-gradient(130% 90% at 50% 55%, rgb(15 12 9 / 0) 32%, rgb(15 12 9 / .72) 100%);
}
.held-innen{ display:grid; gap:var(--a-5); }
/* Das volle Logo – Wappen, „Riverside Gastro“ und www.riverside-lifestyle.com.
   Kein Strich daneben (Janine, 02.10.2026). */
.held-logo{ max-width:none; }
.held-logo img{ width:auto; height:240px; }
.held h1{ font-size:var(--t-96); letter-spacing:-.02em; max-width:16ch; }
.held h1 .zeile{ display:block; }
/* Bodoni Moda hat kein Kerning zwischen W und e – die Lücke von Hand schliessen. */
.held h1 .unterschnitt{ margin-right:-.09em; }
.held-unter{ font-size:var(--t-20); color:rgb(245 239 227 / .90); max-width:46ch; font-weight:300; }
/* Ohne Strich davor – im ersten Bildschirm steht keine Linie mehr (Janine, 02.10.2026).
   Der frühere Flex-Satz und der Wrapper-Span waren nur für den Strich da und sind
   am 02.10.2026 mitgegangen; die Box misst unverändert 288×48 (320 px) bzw. 558×48 (1440 px). */
.held-status{ font-size:var(--t-15); color:var(--gold-hell); letter-spacing:.02em; }
.held .knopf-paar{ margin-top:var(--a-2); }
.held-roller{
  position:absolute; left:50%; bottom:var(--a-5); translate:-50% 0; z-index:1;
  width:1px; height:56px; background:linear-gradient(to bottom,rgb(215 178 114 / 0),var(--gold-hell));
}
@media (prefers-reduced-motion:no-preference){
  .held-roller{ animation:roller 2.6s var(--ease) infinite; transform-origin:top; }
  @keyframes roller{ 0%{ scale:1 .2; opacity:0; } 35%{ opacity:1; } 100%{ scale:1 1; opacity:0; } }
}
@media (max-width:1024px){ .held-logo img{ height:200px; } }
@media (max-width:600px){
  .held{ align-items:flex-end; padding-block:var(--a-9) var(--a-8); }
  .held-logo img{ height:180px; }
  .held h1{ max-width:12ch; }
}

/* ---------------------------------------------------------------- 6 Abschnitte allgemein */
section{ position:relative; }
section[id],[id]{ scroll-margin-top:var(--a-9); }
@media (max-width:1120px){ section[id],[id]{ scroll-margin-top:var(--a-8); } }
.block{ padding-block:var(--abschnitt); }
.hell{ background:var(--creme); color:var(--rauch); position:relative; isolation:isolate; }
.hell::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:url("textur-stein-1000.webp") center / cover;
  mix-blend-mode:multiply; opacity:.12;
}
.hell h1,.hell h2,.hell h3,.hell h4{ color:var(--nacht); }
.kopfzeile-abschnitt{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--a-5) var(--a-8); flex-wrap:wrap; margin-bottom:var(--a-7);
}
.kopfzeile-abschnitt>div:first-child{ min-width:0; flex:1 1 420px; display:grid; gap:var(--a-3); }
.kopfzeile-abschnitt h2{ font-size:var(--t-64); max-width:18ch; }
.kopfzeile-abschnitt p{ font-size:var(--t-17); color:rgb(245 239 227 / .80); max-width:48ch; }
.hell .kopfzeile-abschnitt p{ color:var(--rauch); }

/* Einblenden beim Scrollen */
/* Nur mit JavaScript unsichtbar starten – ohne JS steht alles sofort da (html.js wird im <head> gesetzt) */
@media (prefers-reduced-motion:no-preference){
  html.js .auf{ opacity:0; translate:0 24px; transition:opacity .7s var(--ease), translate .7s var(--ease); }
  html.js .auf.sichtbar{ opacity:1; translate:0 0; }
}

/* ---------------------------------------------------------------- 7 Zickzack (Hakkasan) */
.zick{ display:grid; gap:var(--a-7); }
.zick-reihe{
  display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:var(--a-8);
}
/* ungerade Reihe: Bild rechts bis an den Fensterrand · gerade: Bild links bis an den Fensterrand */
.zick-reihe:nth-child(odd)  .zick-bild{ margin-right:calc(0px - var(--gasse)); }
.zick-reihe:nth-child(even) .zick-bild{ order:-1; margin-left:calc(0px - var(--gasse)); }
.zick-text{ min-width:0; display:grid; gap:var(--a-4); align-content:center; }
.zick-text h3::before{ content:""; display:block; width:72px; height:1px; background:var(--gold-hell); margin-bottom:var(--a-5); }
.zick-text h3{ font-size:var(--t-64); }
.zick-text p{ color:rgb(245 239 227 / .86); font-size:var(--t-20); max-width:38ch; }
.zick-bild{ position:relative; min-width:0; }
.zick-bild img{ width:100%; aspect-ratio:16/11; object-fit:cover; border-radius:0; }
.zick-bild::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px var(--rand);
  background:linear-gradient(to bottom,rgb(15 12 9 / 0) 55%,rgb(15 12 9 / .45));
}
.zick-nr{
  position:absolute; left:var(--a-5); top:var(--a-5); z-index:1;
  font-family:"Bodoni Moda",serif; font-size:var(--t-40); color:var(--gold-hell); line-height:1;
}
@media (max-width:860px){
  .zick{ gap:var(--a-8); }
  .zick-reihe{ grid-template-columns:1fr; gap:var(--a-5); }
  .zick-reihe:nth-child(odd) .zick-bild,
  .zick-reihe:nth-child(even) .zick-bild{ order:-1; margin-inline:calc(0px - var(--gasse)); }
  .zick-bild img{ aspect-ratio:16/11; }
}

/* ---------------------------------------------------------------- 8 Standorte */
.filter{ display:flex; align-items:center; gap:var(--a-3); flex-wrap:wrap; }
.chip{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--a-2);
  min-height:var(--knopf-h-klein); padding:0 var(--a-5);
  background:none; border:1px solid var(--rand); border-radius:var(--r-voll);
  color:var(--creme); font-family:Jost,Arial,sans-serif; font-size:var(--t-15);
  font-weight:400; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; cursor:pointer;
  transition:background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.chip:hover{ border-color:var(--rand-stark); }
.chip[aria-pressed="true"],.chip[aria-selected="true"]{ background:var(--gold-hell); border-color:var(--gold-hell); color:var(--nacht); }
.hell .chip{ color:var(--rauch); border-color:rgb(112 88 41 / .34); }
.hell .chip[aria-pressed="true"],.hell .chip[aria-selected="true"]{ background:var(--gold-text); border-color:var(--gold-text); color:var(--creme-hell); }
.chip-zahl{ font-size:var(--t-13); opacity:.72; letter-spacing:.04em; }

/* offener Standort als breite Tafel */
.ort-offen{
  display:grid; grid-template-columns:1.05fr .95fr; gap:0;
  border:1px solid var(--rand); border-radius:var(--r-mittel); overflow:hidden;
  background:var(--nacht-2); margin-top:var(--a-7);
}
.ort-offen-bild{ position:relative; min-height:320px; }
/* Das echte Foto der Fassade: Ausschnitt so, dass Schriftzug und Eingang im Bild bleiben. */
.ort-offen-bild img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 42%; }
.ort-offen-text{ padding:var(--a-7); display:grid; gap:var(--a-4); align-content:center; justify-items:start; min-width:0; }
.ort-offen-text>*{ max-width:100%; }
.ort-offen-text h3{ font-size:var(--t-40); }
.ort-offen-text .daten{ display:grid; gap:var(--a-2); font-size:var(--t-15); }
.ort-offen-text .daten div{ display:flex; gap:var(--a-3); min-width:0; }
.ort-offen-text .daten dt{ flex:0 0 108px; color:var(--gold-hell); letter-spacing:.10em; text-transform:uppercase; font-size:var(--t-13); padding-top:2px; }
.ort-offen-text .daten dd{ margin:0; min-width:0; text-wrap:balance; }
.ort-dazu{ display:flex; align-items:center; gap:var(--a-3); flex-wrap:wrap; font-size:var(--t-15); color:rgb(245 239 227 / .74); }
.ort-dazu>span{ flex:0 0 100%; }
.ort-dazu .knopf{ min-width:120px; }
@media (max-width:520px){
  .ort-dazu{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--a-3); width:100%; }
  .ort-dazu>span{ grid-column:1 / -1; }
  .ort-dazu .knopf{ width:100%; }
  .knopf-paar>.knopf{ flex:1 1 140px; }
}
@media (max-width:400px){
  .ort-dazu{ grid-template-columns:1fr; }
  .knopf-paar{ display:grid; grid-template-columns:1fr; }
  .knopf-paar>.knopf{ width:100%; }
}
@media (max-width:860px){
  .ort-offen{ grid-template-columns:1fr; }
  .ort-offen-bild{ min-height:220px; }
  .ort-offen-text{ padding:var(--a-5); }
}
/* Unter 360 px ist die Wertspalte nur rund 140 px breit – dann steht die
   Beschriftung über dem Wert, damit die Adresse sauber bricht (02.10.2026). */
@media (max-width:360px){
  .ort-offen-text .daten div{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--a-1); }
}

/* Wand der gesuchten Orte – Aufbau aus Entwurf 3, Schrift und Farben aus Entwurf 1.
   Das Raster füllt sich selbst auf (auto-fill); auf Tablet und Desktop stehen
   darum immer alle Orte da. Die Linien hängen an den Kacheln, nicht am Rahmen:
   eine unvollständige letzte Zeile bleibt so leer statt angeschnitten. */
.orte-kopf{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--a-4); flex-wrap:wrap; margin:var(--a-8) 0 var(--a-5); }
.orte{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(208px,1fr)); gap:0;
  border-top:1px solid var(--rand); border-left:1px solid var(--rand);
}
.ort{
  display:flex; flex-direction:column; justify-content:flex-end; gap:var(--a-1);
  min-height:148px; padding:var(--a-5); min-width:0; text-align:left;
  background:var(--nacht-2); border-right:1px solid var(--rand); border-bottom:1px solid var(--rand);
  transition:background-color .35s var(--ease);
}
.ort:hover{ background:var(--rauch); }
.ort[hidden]{ display:none; }
.ort-name{ font-family:"Bodoni Moda",serif; font-size:var(--t-28); line-height:1.1;
  /* body setzt break-word – damit stand bei 390 px „Amsterda/m". Ortsnamen bleiben ganz. */
  overflow-wrap:normal; }
.ort-land{ font-size:var(--t-13); letter-spacing:.16em; text-transform:uppercase; color:rgb(245 239 227 / .60); }
.ort-status{ font-size:var(--t-13); letter-spacing:.14em; text-transform:uppercase; color:var(--gold-hell); margin-bottom:var(--a-2); }
.orte-mehr{ margin-top:var(--a-5); }
@media (max-width:760px){
  .orte{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ort{ min-height:120px; padding:var(--a-4); }
}
/* Schmale Handys: eine Stufe kleiner, damit „Los Angeles" und „Amsterdam" in die Kachel passen */
@media (max-width:430px){ .ort-name{ font-size:var(--t-20); } }
@media (max-width:360px){ .orte{ grid-template-columns:minmax(0,1fr); } }

.ort-fehlt{
  margin-top:var(--a-8); padding:var(--a-7); border:1px solid var(--rand); border-radius:var(--r-mittel);
  display:flex; align-items:center; justify-content:space-between; gap:var(--a-5); flex-wrap:wrap;
  background:linear-gradient(120deg,var(--nacht-2),var(--nacht));
}
.ort-fehlt div{ min-width:0; display:grid; gap:var(--a-2); }
.ort-fehlt h3{ font-size:var(--t-40); }
@media (max-width:600px){ .ort-fehlt{ padding:var(--a-5); } }

/* ---------------------------------------------------------------- 9 Karten (helle Ruhezone) */
.karten-waehler{ display:grid; gap:var(--a-4); margin-bottom:var(--a-6); }
.karten-waehler .filter{ flex-wrap:wrap; }
.ort-merkmale{ display:flex; gap:var(--a-2); flex-wrap:wrap; }

.reiter{
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
  border-top:1px solid rgb(112 88 41 / .34); border-bottom:1px solid rgb(112 88 41 / .34);
}
.reiter button{
  min-height:var(--knopf-h); padding:var(--a-3) var(--a-1); min-width:0;
  background:none; border:0; border-bottom:2px solid transparent; border-radius:var(--r-klein); cursor:pointer;
  font-family:Jost,Arial,sans-serif; font-size:var(--t-15); font-weight:500;
  letter-spacing:.20em; text-transform:uppercase; color:rgb(38 32 25 / .72); white-space:nowrap;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.reiter button:hover{ color:var(--rauch); }
@media (max-width:380px){ .reiter button{ font-size:var(--t-13); letter-spacing:.08em; } }
.reiter button[aria-selected="true"]{ color:var(--nacht); border-bottom-color:var(--gold-text); }
.reiter button[data-bereich="getraenke"][aria-selected="true"]{ border-bottom-color:var(--getraenke); color:var(--getraenke); }
.reiter button[data-bereich="speisen"][aria-selected="true"]{ border-bottom-color:var(--speisen); color:var(--speisen); }
.reiter button[data-bereich="cbd"][aria-selected="true"]{ border-bottom-color:var(--cbd); color:var(--cbd); }

.tafel{ padding-top:var(--a-6); }
.noskript{ margin-top:var(--a-5); padding:var(--a-4) var(--a-5); border-left:2px solid var(--gold-text);
  background:rgb(112 88 41 / .08); font-size:var(--t-15); max-width:62ch; }
@media (prefers-reduced-motion:no-preference){
  .tafel[data-wechsel="ja"]{ animation:tafelauf .45s var(--ease); }
  @keyframes tafelauf{ from{ opacity:0; translate:0 12px; } to{ opacity:1; translate:0 0; } }
}
.hinweis-beispiel{
  display:grid; gap:var(--a-1); padding:var(--a-4) var(--a-5);
  background:var(--rauch); color:var(--creme); border-left:2px solid var(--gold-hell);
  border-radius:var(--r-klein); margin-bottom:var(--a-6);
}
.hinweis-beispiel strong{ font-weight:500; font-size:var(--t-15); letter-spacing:.12em; text-transform:uppercase; }
.hinweis-beispiel span{ font-size:var(--t-13); line-height:1.5; opacity:.92; }

.karte-kopf{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--a-4); flex-wrap:wrap; margin-bottom:var(--a-5); }
.karte-kopf h3{ font-size:var(--t-40); }
.karte-erklaer{
  border-left:2px solid var(--gold-text); padding:var(--a-3) 0 var(--a-3) var(--a-4);
  margin-bottom:var(--a-6); font-size:var(--t-17); max-width:62ch;
}
.gruppen{ columns:2; column-gap:var(--a-8); }
@media (max-width:860px){ .gruppen{ columns:1; } }
.gruppe{ break-inside:avoid; margin-bottom:var(--a-7); }
.gruppe>h4{
  font-family:Jost,Arial,sans-serif; font-size:var(--t-13); font-weight:500;
  letter-spacing:.26em; text-transform:uppercase; color:var(--gold-text);
  padding-bottom:var(--a-2); border-bottom:1px solid rgb(112 88 41 / .34); margin-bottom:var(--a-4);
}
.posten{ display:grid; gap:var(--a-4); }
.posten li{ display:grid; gap:var(--a-1); min-width:0; }
.posten-zeile{ display:flex; align-items:baseline; gap:var(--a-3); min-width:0; }
.posten-name{ font-family:"Bodoni Moda",serif; font-size:var(--t-20); line-height:1.25; font-weight:500; min-width:0; }
.posten-fuehrung{ flex:1 1 auto; height:1px; background:rgb(112 88 41 / .34); translate:0 -4px; }
.posten-preis{ flex:0 0 auto; font-size:var(--t-15); letter-spacing:.10em; color:var(--gold-text); white-space:nowrap; }
.posten-text{ font-size:var(--t-15); color:rgb(38 32 25 / .84); max-width:50ch; }

.karte-fuss{ display:grid; gap:var(--a-3); margin-top:var(--a-6); padding-top:var(--a-5); border-top:1px solid rgb(112 88 41 / .34); }
.karte-fuss p{ font-size:var(--t-15); color:rgb(38 32 25 / .84); }
/* Grundfassung hell (dunkler Grund), dunkle Fassung nur in der hellen Kartenzone */
.karte-stand{ font-size:var(--t-13); letter-spacing:.04em; color:rgb(245 239 227 / .76); }
.hell .karte-stand{ color:rgb(38 32 25 / .82); }

/* QR-Platzhalter am Ende jeder Karte – klar als Platzhalter erkennbar:
   gestricheltes Feld, drei angedeutete QR-Ecken, kein echter Code. */
.qr{
  display:flex; align-items:center; gap:var(--a-5); flex-wrap:wrap;
  margin-top:var(--a-6); padding:var(--a-5);
  border:1px solid rgb(112 88 41 / .34); border-radius:var(--r-klein);
  background:rgb(112 88 41 / .06);
}
.qr-feld{
  position:relative; flex:0 0 auto; display:block; width:112px; height:112px;
  border:2px dashed var(--gold-text); border-radius:var(--r-klein);
  background:var(--creme-hell);
}
.qr-ecke{
  position:absolute; width:26px; height:26px;
  border:4px solid var(--gold-text); border-radius:var(--r-klein);
}
.qr-ecke:nth-of-type(1){ top:12px; left:12px; }
.qr-ecke:nth-of-type(2){ top:12px; right:12px; }
.qr-ecke:nth-of-type(3){ bottom:12px; left:12px; }
.qr-raster{
  position:absolute; right:12px; bottom:12px; width:26px; height:26px;
  background-image:radial-gradient(var(--gold-text) 1.5px, transparent 1.6px);
  background-size:7px 7px; opacity:.9;
}
.qr-text{ min-width:0; display:grid; gap:var(--a-2); justify-items:start; }
.qr-text strong{
  font-family:Jost,Arial,sans-serif; font-size:var(--t-15); font-weight:500;
  letter-spacing:.10em; text-transform:uppercase; color:var(--rauch); max-width:34ch;
}
.qr-klein{ font-size:var(--t-13); letter-spacing:.16em; text-transform:uppercase; color:var(--gold-text); margin:0; }
@media (max-width:600px){
  .qr{ padding:var(--a-4); gap:var(--a-4); }
  .qr-text .knopf{ width:100%; }
}
/* Ab 1024 px stehen Fussnotentext und QR-Kasten nebeneinander – sonst bleiben
   rechts neben beiden grosse Leerflächen stehen (02.10.2026). Der Spaltenfluss
   der Kartengruppen bleibt unberührt. */
@media (min-width:1024px){
  .tafel{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
          column-gap:var(--a-8); align-items:start; }
  .tafel>*{ grid-column:1 / -1; }
  .tafel>.gruppen{ padding-bottom:var(--a-5); border-bottom:1px solid rgb(112 88 41 / .34); }
  .tafel>.karte-fuss{ grid-column:1; margin-top:var(--a-6); padding-top:0; border-top:0; }
  .tafel>.qr{ grid-column:2; margin-top:var(--a-6); align-self:stretch; }
}

/* Zustände „Karte folgt“ / „entfällt“ */
.zustand{ display:grid; gap:var(--a-4); max-width:64ch; padding-block:var(--a-5); }
.zustand h3{ font-size:var(--t-28); }
.zustand ul{ display:grid; gap:var(--a-2); }
.zustand ul li{ display:flex; gap:var(--a-3); font-size:var(--t-17); min-width:0; }
.zustand ul li::before{ content:"·"; color:var(--gold-text); flex:0 0 auto; }
.zustand-absage{ border-left:2px solid rgb(38 32 25 / .26); padding-left:var(--a-4); }

/* Pflichtkasten nach Tabakproduktegesetz – gross, siezt wörtlich */
.warnung{
  border:2px solid currentColor; border-radius:var(--r-mittel);
  padding:var(--a-6); display:grid; gap:var(--a-4); margin-top:var(--a-6);
  color:var(--cbd);
}
.warnung p{ font-family:"Bodoni Moda",serif; font-size:var(--t-28); line-height:1.25; margin:0; max-width:40ch;
  color:inherit; hyphens:manual; overflow-wrap:anywhere; }
.warnung .etikett{ color:inherit; overflow-wrap:anywhere; }
.dunkel .warnung{ color:var(--cbd-hell); }
@media (max-width:600px){ .warnung{ padding:var(--a-5); } .warnung p{ font-size:var(--t-20); } }

/* ---------------------------------------------------------------- 10 CBD: randlose 50/50-Reihe (Sexy Fish) */
.rand-reihe{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch; }
.rand-reihe-bild{ position:relative; min-height:520px; }
.rand-reihe-bild img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.rand-reihe-text{ padding:var(--abschnitt) var(--a-8) var(--abschnitt) var(--gasse); display:grid; gap:var(--a-5); align-content:center; min-width:0; }
.rand-reihe-text>*{ max-width:56ch; }
.rand-reihe-text h2{ font-size:var(--t-64); }
.cbd{ background:var(--cbd-dunkel); }
.cbd .rand-reihe-text p{ color:rgb(245 239 227 / .84); }
.cbd-text{ display:grid; gap:var(--a-4); }
@media (max-width:900px){
  .rand-reihe{ grid-template-columns:1fr; }
  .rand-reihe-bild{ min-height:280px; order:-1; }
  .rand-reihe-text,.kontakt .rand-reihe-text{ padding:var(--abschnitt) var(--rand-seite); }
}

/* ---------------------------------------------------------------- 11 Bildband mit überlaufender Überschrift (TAO) */
.band{ position:relative; min-height:80svh; display:grid; grid-template-columns:minmax(0,1fr);
  align-items:end; overflow-x:clip; isolation:isolate; padding-block:var(--a-8); }
.band-bild{ position:absolute; inset:0; z-index:-2; }
/* Das Nachtmotiv ist von Haus aus sehr dunkel. Eine Stufe heller abgestimmt und der
   Schleier in der Mitte dünner, damit man die Spiegelungen im Wasser sieht und der
   Abschnitt nicht wie eine leere Fläche wirkt (02.10.2026). Unten bleibt der Schleier
   dicht – dort steht der Text. */
.band-bild img{ width:100%; height:100%; object-fit:cover; object-position:50% 62%;
  filter:brightness(1.26) saturate(1.06); }
.band-schleier{ position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top,rgb(15 12 9 / .92) 4%,rgb(15 12 9 / .62) 26%,rgb(15 12 9 / .14) 60%,rgb(15 12 9 / .52) 100%); }
.band h2{
  font-size:var(--t-128); line-height:.94; white-space:nowrap; letter-spacing:-.03em;
  width:max-content; max-width:none; margin-right:calc(0px - var(--gasse)); margin-bottom:var(--a-4);
}
.band p{ font-size:var(--t-20); color:rgb(245 239 227 / .88); max-width:46ch; }
.band .etikett{ margin-bottom:var(--a-4); display:block; }
@media (max-width:860px){
  /* overflow-wrap:normal statt anywhere – „Grenzstrasse“ darf nicht mitten im Wort
     brechen (02.10.2026). Damit das Wort auch auf 320 px in eine Zeile passt,
     geht die Überschrift darunter eine Schriftgrad-Stufe kleiner. */
  .band h2{ white-space:normal; width:auto; max-width:100%; margin-right:0; overflow-wrap:normal; }
}
@media (max-width:860px){ .band{ min-height:62svh; } }
@media (max-width:600px){ .band{ min-height:52svh; } }
@media (max-width:360px){ .band h2{ font-size:var(--t-96); } }

/* ---------------------------------------------------------------- 12 Familie mit Geräterahmen */
.familie{ background:var(--nacht-2); position:relative; overflow:hidden; }
.familie-bild{ position:absolute; inset:0; }
.familie-bild img{ width:100%; height:100%; object-fit:cover; opacity:.30; }
.familie-schleier{ position:absolute; inset:0;
  background:linear-gradient(to bottom,var(--nacht-2) 0%,rgb(26 21 17 / .72) 42%,var(--nacht-2) 100%); }
.familie>.mitte{ position:relative; }
.familie-oben{ display:grid; justify-items:center; text-align:center; gap:var(--a-4); margin-bottom:var(--a-8); }
.familie-oben img{ width:auto; height:152px; }
.familie-oben h2{ font-size:var(--t-64); width:100%; max-width:none; text-align:center; }
.familie-oben h2 span{ display:inline-block; max-width:20ch; }
.familie-oben p{ max-width:56ch; color:rgb(245 239 227 / .84); }
/* Vier Handwerke: zwei mal zwei. Bei vier Spalten würden die Geräterahmen
   zu schmal, um die echten Bildschirmabzüge noch lesbar zu zeigen. */
.familie-raster{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--a-5); align-items:stretch; }
.familie-karte{
  display:flex; flex-direction:column; gap:var(--a-4); min-width:0;
  padding:var(--a-5); border:1px solid var(--rand); border-radius:var(--r-mittel);
  background:rgb(15 12 9 / .72);
}
.familie-karte h3{ font-size:var(--t-28); }
.familie-karte p{ font-size:var(--t-15); color:rgb(245 239 227 / .80); }
.familie-karte .knopf,.familie-karte .plakette{ margin-top:auto; align-self:flex-start; }
.familie-karte .plakette{ min-height:var(--knopf-h); padding-inline:var(--knopf-px); letter-spacing:.10em; }
.familie-karte[data-marke="ink"]{ border-color:rgb(206 138 106 / .34); }
.familie-karte[data-marke="beauty"]{ border-color:rgb(217 174 130 / .34); }
.familie-karte[data-marke="event"]{ border-color:color-mix(in srgb,var(--mk-event) 34%,transparent); }

/* Riverside Event: statt eines Bildschirmabzugs steht hier das Wappen
   gross auf dunklem Grund. */
.event-flaeche{
  display:grid; justify-items:center; align-content:center; gap:var(--a-4);
  aspect-ratio:16/10; padding:var(--a-6); border-radius:var(--r-klein);
  border:1px solid color-mix(in srgb,var(--mk-event) 28%,transparent);
  background:radial-gradient(120% 90% at 50% 18%,color-mix(in srgb,var(--mk-event-tief) 32%,transparent) 0%,rgb(15 12 9 / .92) 70%);
}
.event-wappen{
  display:block; width:94px; height:118px; background-color:var(--mk-event);
  mask-image:url("mark-event.png"); mask-repeat:no-repeat; mask-position:center; mask-size:contain;
  -webkit-mask-image:url("mark-event.png"); -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center; -webkit-mask-size:contain;
}
.event-domain{
  font-family:Jost,Arial,sans-serif; font-size:var(--t-13); font-weight:500;
  letter-spacing:.26em; text-transform:uppercase; color:var(--mk-event);
}

/* Geräterahmen, selbst gebaut */
.geraete{ display:flex; align-items:flex-end; gap:var(--a-3); min-width:0; }
.rahmen-desktop{
  flex:1 1 auto; min-width:0; border:1px solid var(--rand-stark); border-radius:var(--r-klein);
  background:var(--nacht); padding:var(--a-1) var(--a-1) 0; box-shadow:var(--schatten-2);
  display:flex; flex-direction:column; /* Bild füllt den Rahmen, auch wenn er auf Handyhöhe gestreckt wird */
}
.rahmen-desktop .leiste{ display:flex; gap:var(--a-1); padding:var(--a-1) var(--a-1) var(--a-2); }
.rahmen-desktop .leiste i{ width:5px; height:5px; border-radius:var(--r-voll); background:var(--rand-stark); }
.rahmen-desktop img{ flex:1 1 auto; min-height:0; width:100%; aspect-ratio:16/10; object-fit:cover; object-position:50% 0; border-radius:var(--r-klein) var(--r-klein) 0 0; }
.rahmen-desktop .rahmen-fuss{ height:var(--a-2); }
.rahmen-handy{
  flex:0 0 76px; border:2px solid var(--rand-stark); border-radius:var(--r-geraet);
  background:var(--nacht); padding:var(--a-1); box-shadow:var(--schatten-2); position:relative;
}
.rahmen-handy::before{
  content:""; position:absolute; left:50%; top:7px; translate:-50% 0; z-index:1;
  width:26px; height:4px; border-radius:var(--r-voll); background:var(--rauch);
}
.rahmen-handy img{ width:100%; aspect-ratio:9/19.5; object-fit:cover; object-position:50% 0; border-radius:22px; }
@media (max-width:760px){ .familie-raster{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:1024px){ .familie-oben img{ height:120px; } }
@media (max-width:600px){ .familie-oben img{ height:96px; } }

/* ---------------------------------------------------------------- 13 Kontakt */
/* Kein Bild mehr: eine grosse typografische Kachel, auf der die Mailadresse
   selbst der Knopf ist – darunter die kleine Visitenkarte. */
.post{
  display:grid; gap:var(--a-4); text-decoration:none; min-width:0;
  padding:var(--a-7); border:1px solid var(--rand); border-radius:var(--r-mittel);
  background:linear-gradient(140deg,var(--nacht-2) 0%,var(--nacht) 72%);
  transition:border-color .4s var(--ease), background-color .4s var(--ease);
}
.post:hover,.post:focus-visible{ border-color:var(--rand-stark); }
.post-oben{ display:flex; align-items:center; justify-content:space-between; gap:var(--a-4); }
.post-pfeil{ flex:0 0 auto; width:28px; height:28px; position:relative; }
.post-pfeil::before,.post-pfeil::after{ content:""; position:absolute; background:var(--gold-hell); }
.post-pfeil::before{ left:0; top:50%; width:100%; height:1px; transition:width .4s var(--ease); }
.post-pfeil::after{ right:0; top:50%; width:11px; height:1px; transform-origin:right center; rotate:-45deg; }
.post:hover .post-pfeil::before{ width:72%; }
.post-adresse{
  display:block; font-family:"Bodoni Moda",serif; font-size:var(--t-64);
  line-height:1.05; color:var(--creme-hell); letter-spacing:-.02em; hyphens:manual;
}
.post-teil{ white-space:nowrap; }
/* Die Goldlinie läuft beim Darüberfahren und bei Tastaturfokus unter der Adresse durch. */
.post-linie{ display:block; height:1px; background:var(--rand); position:relative; overflow:hidden; }
.post-linie::after{
  content:""; position:absolute; inset:0 100% 0 0; background:var(--gold-hell);
  transition:inset .7s var(--ease);
}
.post:hover .post-linie::after,.post:focus-visible .post-linie::after{ inset:0 0 0 0; }
@media (prefers-reduced-motion:reduce){ .post-linie::after{ transition:none; } }
.post-unten{ font-size:var(--t-15); color:rgb(245 239 227 / .76); }
@media (max-width:600px){
  .post{ padding:var(--a-5); }
  .post-adresse{ font-size:var(--t-40); }
  .post-teil{ display:block; }
}

.visite{
  margin-top:var(--a-6); padding:var(--a-7);
  border:1px solid var(--rand); border-radius:var(--r-mittel); background:var(--nacht-2);
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:var(--a-5) var(--a-7);
  align-items:center;
}
.visite-marke{ display:grid; justify-items:center; gap:var(--a-2); }
.visite-marke img{ width:auto; height:72px; }
.kontakt-daten{ display:grid; gap:var(--a-3); min-width:0; }
.kontakt-daten div{ display:flex; gap:var(--a-4); align-items:baseline; min-width:0; border-bottom:1px solid var(--rand); padding-bottom:var(--a-3); }
.kontakt-daten dt{ flex:0 0 92px; font-size:var(--t-13); letter-spacing:.16em; text-transform:uppercase; color:var(--gold-hell); }
.kontakt-daten dd{ margin:0; min-width:0; font-size:var(--t-17); overflow-wrap:anywhere; }
@media (max-width:860px){
  .visite{ grid-template-columns:minmax(0,1fr); justify-items:start; padding:var(--a-5); }
  .visite .knopf{ width:100%; }
}
/* Unter 360 px bleibt für den Wert neben der Beschriftung nur rund 140 px – die
   Adresse bricht dann nach jedem Wort um. Darum Beschriftung über den Wert
   stellen, so hat der Wert die volle Breite (02.10.2026). */
@media (max-width:360px){
  .kontakt-daten div{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--a-1); }
}


/* ---------------------------------------------------------------- 14 Fusszeile */
.fuss{ background:var(--nacht); border-top:1px solid var(--rand); padding-block:var(--a-8) var(--a-6); }
.fuss-oben{ display:grid; grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,1fr)); gap:var(--a-8) var(--a-6); }
.fuss-marke{ display:grid; gap:var(--a-5); align-content:start; min-width:0; }
.fuss-marke img{ width:220px; height:auto; }
.fuss h2{ font-family:Jost,Arial,sans-serif; font-size:var(--t-13); font-weight:500;
  letter-spacing:.26em; text-transform:uppercase; color:var(--gold-hell); margin-bottom:var(--a-4); }
.fuss-liste{ display:grid; gap:0; min-width:0; }
.fuss-liste li{ min-width:0; }
.fuss-liste a,.fuss-liste span{ display:block; padding-block:var(--a-3); font-size:var(--t-15); overflow-wrap:anywhere; }
.fuss-liste a{ text-decoration:none; color:rgb(245 239 227 / .82); }
.fuss-liste a:hover{ color:var(--gold-hell); }
.fuss-liste span{ color:rgb(245 239 227 / .60); }
.fuss-unten{ margin-top:var(--a-5); display:flex; gap:var(--a-4); flex-wrap:wrap; justify-content:space-between; align-items:center; }
.fuss-unten p,.fuss-unten a{ font-size:var(--t-13); color:rgb(245 239 227 / .60); letter-spacing:.06em; }
.fuss-unten a{ text-decoration:none; display:inline-block; padding-block:var(--a-3); }
.fuss-unten a:hover{ color:var(--gold-hell); }
@media (max-width:860px){ .fuss-oben{ grid-template-columns:1fr 1fr; } .fuss-marke{ grid-column:1 / -1; } }
@media (max-width:460px){ .fuss-oben{ grid-template-columns:1fr; } .fuss-marke img{ width:180px; } }

/* ---------------------------------------------------------------- 15 Impressumseite */
.rechts-kopf{ padding-block:calc(var(--a-10) + var(--a-5)) var(--abschnitt); border-bottom:1px solid var(--rand);
  background:linear-gradient(160deg,var(--nacht-2),var(--nacht)); }
.rechts-kopf h1{ font-size:var(--t-96); }
.rechts-kopf p{ font-size:var(--t-20); color:rgb(245 239 227 / .84); margin-top:var(--a-4); }
.rechts{ display:grid; gap:var(--a-8); max-width:74ch; }
.rechts section{ display:grid; gap:var(--a-4); }
.rechts h2{ font-size:var(--t-40); }
.rechts h3{ font-size:var(--t-20); color:var(--gold-hell); font-family:Jost,Arial,sans-serif;
  font-weight:500; letter-spacing:.06em; }
.rechts p{ color:rgb(245 239 227 / .84); }
.rechts-tafel{ display:grid; gap:var(--a-4); }
.rechts-tafel div{ display:grid; grid-template-columns:240px minmax(0,1fr); gap:var(--a-4);
  padding-bottom:var(--a-4); border-bottom:1px solid var(--rand); }
.rechts-tafel dt{ font-size:var(--t-13); letter-spacing:.14em; text-transform:uppercase; color:var(--gold-hell); line-height:1.5; hyphens:manual; }
.rechts-tafel dd{ margin:0; min-width:0; overflow-wrap:anywhere; line-height:1.7; }
.rechts-tafel dt{ text-wrap:balance; }
.rechts-tafel a{ text-decoration:none; border-bottom:1px solid var(--rand-stark); }
@media (max-width:640px){ .rechts-tafel div{ grid-template-columns:1fr; gap:var(--a-2); } }

/* ---------------------------------------------------------------- 16 Ladebewegung des Helds */
/* Auch hier: der unsichtbare Startzustand hängt an html.js, damit ohne JavaScript nichts fehlt. */
@media (prefers-reduced-motion:no-preference){
  html.js .held-bild img{ scale:1.16; transition:scale 3.4s cubic-bezier(.16,.72,.26,1); }
  html.js body[data-geladen="ja"] .held-bild img{ scale:1; }
  html.js .held-logo img,
  html.js .held h1 .zeile,
  html.js .held-unter,
  html.js .held-status,
  html.js .held .knopf-paar{
    opacity:0; translate:0 22px;
    transition:opacity .85s var(--ease), translate .85s var(--ease);
  }
  html.js body[data-geladen="ja"] .held-logo img,
  html.js body[data-geladen="ja"] .held h1 .zeile,
  html.js body[data-geladen="ja"] .held-unter,
  html.js body[data-geladen="ja"] .held-status,
  html.js body[data-geladen="ja"] .held .knopf-paar{ opacity:1; translate:0 0; }
  html.js .held-logo img{ transition-delay:.15s; }
  html.js .held h1 .zeile:nth-child(1){ transition-delay:.55s; }
  html.js .held h1 .zeile:nth-child(2){ transition-delay:.72s; }
  html.js .held-unter{ transition-delay:.95s; }
  html.js .held-status{ transition-delay:1.10s; }
  html.js .held .knopf-paar{ transition-delay:1.22s; }
}

/* Standorte: Einleitung als ruhiger Absatz, ohne Silbentrennung */
.orte-einleitung{ max-width:44ch; text-wrap:balance; hyphens:manual; }