/* --- Schriften, selbst ausgeliefert -------------------------------------
   Kein Aufruf an fonts.googleapis.com: Sonst ginge bei jedem Seitenaufruf
   die IP-Adresse des Besuchers an Google. Geholt mit bin/schriften-holen,
   siehe Studio-grok.md "Kein fremder Server im Seitenaufruf".
   ---------------------------------------------------------------------- */

@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 100 900;   /* Variable Font: eine Datei, alle Schnitte */
  font-display: swap;
  src: url('fonts/BodoniModa-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: 'Bodoni Moda';
  font-style: normal;
  font-weight: 100 900;   /* Variable Font: eine Datei, alle Schnitte */
  font-display: swap;
  src: url('fonts/BodoniModa-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 100 900;   /* Variable Font: eine Datei, alle Schnitte */
  font-display: swap;
  src: url('fonts/Manrope-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: 'Manrope';
  font-style: normal;
  font-weight: 100 900;   /* Variable Font: eine Datei, alle Schnitte */
  font-display: swap;
  src: url('fonts/Manrope-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Cafe Vision, Fassung 3 — die Materialien aus dem Lokal: Holzlamellen im
   Gegenlicht, Spachtelwand in Bronze und Taupe, die blaue Deckenbucht.
   Tokens zuerst, eine Stelle. Kontraste nachgerechnet (WCAG), siehe Brief. */
:root {
  --nacht: #0A0C11;        /* Grund: Schwarz mit Blaustich */
  --graphit: #1C1A18;      /* warmes Dunkelgrau: Bildrahmen */
  --linie: #302C28;        /* Trennlinien, nur Zier */
  --linie-ui: #6E665C;     /* Ränder von Knöpfen, ab 3:1 */
  --text: #F0E8DB;
  --grau: #ADA59A;         /* Nebentext, warm wie der Spachtel */
  --licht: #DDAE68;        /* Honiggold: Holz im Gegenlicht, Akzent, Knöpfe */
  --licht-hell: #F5DDB2;
  --wand-linie: #4A4239;   /* Linien auf der Spachtelwand */

  --f-display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --f-text: "Manrope", system-ui, sans-serif;

  --s1: .5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2.5rem; --s5: 4rem; --s6: 7rem;
  --pad: clamp(1.25rem, 5vw, 3rem);
  --wrap: 74rem;
  --header-h: 4.25rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); color-scheme: dark; }
body {
  margin: 0; background: var(--nacht); color: var(--text);
  font-family: var(--f-text); font-size: 1.0625rem; line-height: 1.6;
  text-wrap: pretty; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--licht); text-underline-offset: .22em; }
a:hover { color: var(--text); }
:focus-visible { outline: 2px solid var(--licht); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 400; line-height: 1.08; margin: 0 0 var(--s2); text-wrap: balance; font-optical-sizing: auto; }
h2 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); }
h3 { font-size: 1.5rem; }
p { margin: 0 0 var(--s2); }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--text); color: var(--nacht); padding: .6rem 1rem; z-index: 100; }
.skip-link:focus { left: var(--s2); top: var(--s2); }

/* --- Kopf --------------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--nacht) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linie); }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); gap: var(--s3); }
.brand { font-family: var(--f-display); font-size: 1.5rem; color: var(--text); text-decoration: none; letter-spacing: .01em; white-space: nowrap; }
.brand:hover { color: var(--licht-hell); }
.brand img { height: 2.75rem; width: auto; }
.header-tools { display: flex; align-items: center; gap: var(--s3); }
.nav-desk { display: none; gap: var(--s3); }
.nav-desk a { color: var(--grau); text-decoration: none; font-size: .95rem; padding: .4rem 0; border-bottom: 1px solid transparent; }
.nav-desk a:hover, .nav-desk a.is-current { color: var(--text); border-bottom-color: var(--licht); }
.lang-switch { display: flex; gap: .1rem; }
.lang-switch button {
  background: none; border: 1px solid transparent; color: var(--grau); font: inherit; font-size: .8rem; letter-spacing: .06em;
  padding: .4rem .45rem; min-width: 2.75rem; min-height: 2.75rem; cursor: pointer;
}
.lang-switch button:hover { color: var(--text); }
.lang-switch button.is-active { color: var(--text); border-color: var(--licht); }
.lang-desk { display: none; }

.btn-head { padding: .55rem .9rem; font-size: .88rem; white-space: nowrap; }
.btn-head .kurz { display: none; }
@media (max-width: 560px) {
  .btn-head .kurz { display: inline; }
  .btn-head .lang { display: none; }
  .header-tools { gap: var(--s1); }
}

.nav-toggle { background: none; border: 0; width: 2.75rem; height: 2.75rem; display: grid; place-content: center; gap: 6px; cursor: pointer; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--text); transition: transform .2s, opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.nav-overlay { position: fixed; inset: var(--header-h) 0 0 0; z-index: 40; background: var(--nacht); padding: var(--s4) var(--pad); display: flex; flex-direction: column; justify-content: space-between; gap: var(--s4); overflow-y: auto; }
.nav-overlay[hidden] { display: none; }
.nav-overlay nav { display: grid; gap: var(--s1); }
.nav-overlay nav a { font-family: var(--f-display); font-size: 2rem; color: var(--text); text-decoration: none; padding: .35rem 0; border-bottom: 1px solid var(--linie); }
.nav-overlay nav a.is-current { color: var(--licht); }
.nav-overlay nav a.klein { font-family: var(--f-text); font-size: 1rem; color: var(--grau); border-bottom: 0; padding: .25rem 0; }

/* Unter 1080 px passen Navigation, Knopf und vier Sprachen nicht in eine Zeile. */
@media (min-width: 1080px) {
  .nav-desk, .lang-desk { display: flex; }
  .nav-toggle { display: none; }
}
@media (max-width: 420px) {
  .brand img { height: 2.3rem; }
  .btn-head { padding: .5rem .7rem; }
}

/* --- Knöpfe -------------------------------------------------------------- */
.btn { display: inline-block; background: var(--licht); color: var(--nacht); text-decoration: none; font-weight: 600; font-size: .95rem; padding: .85rem 1.4rem; border: 1px solid var(--licht); }
.btn:hover { background: var(--licht-hell); border-color: var(--licht-hell); color: var(--nacht); }
.btn-quiet { background: transparent; color: var(--text); border-color: var(--linie-ui); }
.btn-quiet:hover { border-color: var(--licht); background: transparent; color: var(--text); }
.textlink { font-weight: 600; }

/* --- Hero: die Hängelampe, ihr Kegel fällt auf die Spachtelwand ---------
   Alles auf der Bühne rechnet in em ihrer Schriftgröße: Lampe, Spitze des
   Kegels, Maske des goldenen Schriftzugs. So liegt das Licht bei jeder Breite
   auf denselben Buchstaben. Gold erscheint sonst nur als Akzent. */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: center;
  min-height: min(calc(100svh - var(--header-h)), 60rem); padding-bottom: var(--s4);
  /* Raumton: Dunkelblau vom Boden her, oben bleibt es Nacht. */
  background:
    linear-gradient(to bottom, rgba(10,12,17,0) 70%, var(--nacht)),
    radial-gradient(90% 60% at 50% 100%, rgba(16,26,48,.95), rgba(16,26,48,0) 72%), var(--nacht);
}
.buehne {
  --lampe-b: .56em;                                   /* Breite des Schirms */
  --lampe-y: .3em;                                    /* Oberkante des Schirms */
  --rand: calc(var(--lampe-y) + var(--lampe-b) * .4667); /* Unterkante: y 56 von 120 */
  --halb: 32deg; --tan: .6249;                        /* halber Öffnungswinkel und sein Tangens */
  /* Gedachte Lichtquelle im Schirm: dort, wo der Kegel genau die Breite des Rands hat. */
  --apex: calc(var(--rand) - var(--lampe-b) * .4 / var(--tan));
  --oben: 1.15em;                                     /* Abstand Bühne oben → Schriftzug */
  position: relative; padding-top: var(--oben); padding-bottom: .2em;
  font-family: var(--f-display); font-size: clamp(4.6rem, 13.5vw, 13rem);
  text-align: center;
}
@media (max-width: 640px) {
  /* Auf dem Handy zweizeilig und größer, der Kegel enger. */
  .buehne { font-size: 27vw; --halb: 22deg; --tan: .404; --oben: 1.15em; }
}
.buehne::before {
  /* Der Kegel: weiche Ränder aus dem conic-gradient, nach unten ausgeblendet. */
  content: ""; position: absolute; inset: 0 0 -.6em; z-index: -1; pointer-events: none;
  background:
    radial-gradient(.42em .16em at 50% calc(var(--rand) + .04em), rgba(247,222,154,.38), rgba(247,222,154,0)),
    conic-gradient(from calc(180deg - var(--halb)) at 50% var(--apex),
      rgba(232,184,74,0) 0deg, rgba(240,200,110,.12) calc(var(--halb) * .45),
      rgba(247,222,154,.22) var(--halb), rgba(240,200,110,.12) calc(var(--halb) * 1.55),
      rgba(232,184,74,0) calc(var(--halb) * 2), rgba(232,184,74,0) 360deg),
    /* Wo das Licht hinfällt, zeigt sich die Spachtelwand (assets/plaster.webp). */
    linear-gradient(rgba(14,12,10,.42), rgba(10,12,17,.62)), url("plaster.webp") center 30% / cover;
  /* Kegelform mal Ausblenden nach unten — sonst stünde das Wandfoto als Rechteck da. */
  /* Licht erst ab dem Rand des Schirms: die gedachte Spitze liegt darüber (auf dem Handy sichtbar). */
  -webkit-mask-image:
    conic-gradient(from calc(180deg - var(--halb)) at 50% var(--apex), transparent 0deg, #000 calc(var(--halb) * .5), #000 calc(var(--halb) * 1.5), transparent calc(var(--halb) * 2), transparent 360deg),
    linear-gradient(to bottom, #000 45%, transparent 100%),
    linear-gradient(to bottom, transparent calc(var(--rand) - .01em), #000 calc(var(--rand) + .03em));
  -webkit-mask-composite: source-in;
  mask-image:
    conic-gradient(from calc(180deg - var(--halb)) at 50% var(--apex), transparent 0deg, #000 calc(var(--halb) * .5), #000 calc(var(--halb) * 1.5), transparent calc(var(--halb) * 2), transparent 360deg),
    linear-gradient(to bottom, #000 45%, transparent 100%),
    linear-gradient(to bottom, transparent calc(var(--rand) - .01em), #000 calc(var(--rand) + .03em));
  mask-composite: intersect;
  animation: einschalten 1.5s .35s linear both;
}
.buehne::after {
  /* Wo das Licht aufkommt: ein flacher Fleck unter dem Schriftzug. */
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; bottom: -.25em; width: 3.2em; height: .5em; transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(232,184,74,.2), rgba(232,184,74,0) 70%);
  animation: einschalten 1.5s .35s linear both;
}
.kabel {
  position: absolute; left: 50%; bottom: calc(100% - var(--lampe-y) - 2px); height: 100vh;
  width: 1px; transform: translateX(-50%); background: #3A404B;
}
.lampe { position: absolute; z-index: 1; left: 50%; top: var(--lampe-y); width: var(--lampe-b); height: auto; transform: translateX(-50%); overflow: visible; }
.lampe .glut { animation: einschalten 1.5s .35s linear both; }
.staub {
  position: absolute; inset: 0 0 -.6em; width: 100%; height: calc(100% + .6em); pointer-events: none;
  -webkit-mask-image: conic-gradient(from calc(180deg - var(--halb)) at 50% var(--apex), transparent 0deg, #000 calc(var(--halb) * .5), #000 calc(var(--halb) * 1.5), transparent calc(var(--halb) * 2), transparent 360deg), linear-gradient(to bottom, transparent calc(var(--rand) - .01em), #000 calc(var(--rand) + .03em));
  -webkit-mask-composite: source-in;
  mask-image: conic-gradient(from calc(180deg - var(--halb)) at 50% var(--apex), transparent 0deg, #000 calc(var(--halb) * .5), #000 calc(var(--halb) * 1.5), transparent calc(var(--halb) * 2), transparent 360deg), linear-gradient(to bottom, transparent calc(var(--rand) - .01em), #000 calc(var(--rand) + .03em));
  mask-composite: intersect;
  animation: einschalten 1.5s .35s linear both;
}
.wordmark { font-size: 1em; width: min(88vw, 4em); margin: 0 auto; }
.wm-logo { position: relative; display: block; }
/* Unten das Logo im Schatten, darüber dasselbe in Gold, auf den Kegel maskiert. */
.wm-schatten { width: 100%; height: auto; filter: grayscale(1) brightness(.42); }
.wm-licht {
  position: absolute; inset: 0; width: 100%; height: auto;
  filter: drop-shadow(0 0 .06em rgba(232,184,74,.35));
  /* Das ganze Logo im Licht, unter der Lampe voll, nach außen weich auslaufend (Hani, 30.10.:
     „nur in der Mitte stark aber mit einem Verlauf nach ganz außen vom Logo“). Vorher war das
     Gold auf die Form des Kegels geschnitten, V und N standen ganz im Schatten. */
  -webkit-mask-image: radial-gradient(ellipse 58% 135% at 50% 8%, #000 22%, rgba(0,0,0,.62) 62%, rgba(0,0,0,.34) 100%);
  mask-image: radial-gradient(ellipse 58% 135% at 50% 8%, #000 22%, rgba(0,0,0,.62) 62%, rgba(0,0,0,.34) 100%);
  animation: einschalten 1.5s .35s linear both;
}
/* „Café & Lounge“ als Text im h1 unter dem Logo (Suche, Screenreader), gesetzt wie die LOUNGE-Zeile des Originals. */
.wm-sub { display: block; margin-top: .9rem; font-family: var(--f-display); font-size: clamp(1.05rem, 2.6vw, 1.6rem); line-height: 1.2; letter-spacing: .38em; text-indent: .38em; text-transform: uppercase; color: var(--licht); text-align: center; }
.hero-unten { display: grid; justify-items: center; text-align: center; gap: var(--s2); margin-top: var(--s3); animation: aufgehen .9s 1.5s cubic-bezier(.2,.7,.2,1) both; }
.hero-unten p { margin: 0; }
.hero-line { font-family: var(--f-display); font-size: clamp(1.6rem, 3.4vw, 2.5rem); line-height: 1.2; white-space: pre-line; text-wrap: balance; }
.hero-addr { color: var(--grau); font-size: .95rem; }
.hero-unten .hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); margin-block: var(--s1); }
/* Einschalten: zweimal kurz flackern, dann steht das Licht. */
@keyframes einschalten { 0% { opacity: 0; } 14% { opacity: .7; } 20% { opacity: .08; } 34% { opacity: .85; } 40% { opacity: .3; } 62%, 100% { opacity: 1; } }
@keyframes aufgehen { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* „Heute geöffnet bis …“ — setzt site.js, ohne JS bleibt die Zeile weg. */
.jetzt { display: flex; align-items: baseline; gap: .5rem; margin: 0 0 var(--s1); font-weight: 600; }
.jetzt[hidden] { display: none; }
.jetzt::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--grau); flex: none; transform: translateY(-.05rem); }
.jetzt.is-offen::before { background: var(--licht); box-shadow: 0 0 0 4px rgba(232,184,74,.18); }
.jetzt [data-zustand] { display: none; }
.jetzt.is-offen [data-zustand="offen"], .jetzt.is-zu [data-zustand="zu"], .jetzt.is-morgen [data-zustand="morgen"] { display: inline; }

/* --- Einleitung ---------------------------------------------------------- */
.intro { padding-block: var(--s6) var(--s5); display: grid; gap: var(--s2); }
.intro h2 { white-space: pre-line; }
.intro p { max-width: 38rem; font-size: 1.2rem; color: var(--grau); }
@media (min-width: 900px) { .intro { grid-template-columns: 1fr 1fr; gap: var(--s5); align-items: start; } .intro p { margin-top: .6rem; } }

/* --- Fotos und Bildplätze ----------------------------------------------------
   Bild in Rasterzelle: Container mit Seitenverhältnis, Bild absolut darin.
   Bis die Fotos da sind, steht im Rahmen, welches Motiv hierher gehört. */
.foto { position: relative; margin: 0; background: var(--graphit); overflow: hidden; aspect-ratio: var(--ar, 4 / 5); }
.foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
/* Bis das Foto da ist: ein Stück Spachtelwand hinter dem Motiv, gestrichelt umrandet. */
.foto-frei { display: grid; place-items: end start; padding: var(--s2); border: 1px dashed #7A6340; background:
    radial-gradient(70% 60% at 50% 0%, rgba(221,174,104,.12), rgba(221,174,104,0) 70%),
    linear-gradient(180deg, rgba(16,14,12,.74), rgba(10,12,17,.9)), url("plaster.webp") var(--wand-pos, center) / cover, var(--graphit); }
/* Jeder Bildplatz zeigt ein anderes Stück der Wand, sonst wirkt das Raster wie Tapete. */
.foto-frei:nth-child(3n+2) { --wand-pos: 15% 80%; }
.foto-frei:nth-child(3n) { --wand-pos: 85% 25%; }
.foto-frei:nth-child(4n) { --wand-pos: 40% 0%; }
.foto-frei figcaption { font-size: .85rem; line-height: 1.4; color: #F0CE93; max-width: 22rem; }
.foto-frei figcaption b { display: block; font-weight: 600; color: var(--text); margin-bottom: .15rem; }

/* --- Morgens / Abends: versetzt, auf der Wrap-Linie ------------------------- */
.tageszeit { padding-bottom: var(--s6); display: grid; gap: var(--s5); }
.tz { display: grid; gap: var(--s3); align-items: center; }
.tz-text p { color: var(--grau); max-width: 26rem; }
@media (min-width: 860px) {
  .tz { grid-template-columns: 7fr 5fr; gap: var(--s5); }
  .tz-abend { grid-template-columns: 5fr 7fr; margin-top: calc(var(--s5) * -1); }
  .tz-abend .tz-text { order: -1; text-align: right; justify-items: end; display: grid; }
  .tz-abend .tz-text p { margin-left: auto; }
}

/* --- Galerie-Auszug -------------------------------------------------------- */
.auszug { padding-bottom: var(--s6); }
.auszug-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s3); }
.auszug-raster { display: grid; gap: var(--s2); grid-template-columns: 1fr 1fr; }
.auszug-raster .foto:first-child, .auszug-raster .foto:nth-child(4) { grid-column: 1 / -1; --ar: 16 / 10; }
@media (min-width: 860px) {
  .auszug-raster { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: auto auto; }
  .auszug-raster .foto:first-child { grid-column: 1; grid-row: 1 / span 2; --ar: auto; min-height: 30rem; }
  .auszug-raster .foto:not(:first-child) { --ar: 1 / 1; }
  .auszug-raster .foto:nth-child(4) { grid-column: 2 / span 2; --ar: 2 / 1; }
}

/* --- Zeiten und Besuch: die Spachtelwand ------------------------------------
   Foto der Wand im Lokal (assets/plaster.webp), stark abgedunkelt, damit Text
   darauf die Kontraste hält. Oben und unten eine feine Kante wie ein Sockel. */
.band-wand {
  background:
    linear-gradient(180deg, rgba(10,12,17,.9), rgba(16,14,12,.72) 45%, rgba(10,12,17,.9)),
    url("plaster.webp") center / cover, #24201C;
  border-block: 1px solid var(--wand-linie);
}
/* Als letztes Band vor dem Fuß: dessen Oberkante ist schon die Linie, keine doppelte. */
.band-wand:last-child { border-bottom: 0; }
.besuch { padding-block: var(--s6); display: grid; gap: var(--s5); }
@media (min-width: 900px) { .besuch { grid-template-columns: 1fr 1fr; gap: var(--s6); } }
.zeiten { margin: 0; }
.zeiten > div { display: flex; justify-content: space-between; gap: var(--s2); border-top: 1px solid var(--linie); padding: .7rem .1rem; }
.zeiten > div:last-child { border-bottom: 1px solid var(--linie); }
.band-wand .zeiten > div { border-color: var(--wand-linie); }
.zeiten dt { color: var(--text); }
.zeiten dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; color: var(--grau); }
.zeiten > div.is-heute dt, .zeiten > div.is-heute dd { color: var(--licht); font-weight: 600; }

.facts { display: grid; gap: var(--s3); margin: 0 0 var(--s3); }
.facts > div { border-top: 1px solid var(--linie); padding-top: var(--s2); }
.band-wand .facts > div { border-top-color: var(--wand-linie); }
.facts dt { font-size: .85rem; color: var(--grau); margin-bottom: .25rem; }
.facts dd { margin: 0; font-size: 1.15rem; overflow-wrap: anywhere; }

/* Soziale Profile: Text plus Zeichen, damit klar ist, wohin der Link führt. */
.sozial { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); }
.sozial a { display: inline-flex; align-items: center; gap: .5rem; color: var(--text); text-decoration: none; padding: .35rem 0; min-height: 2.75rem; }
.sozial a:hover { color: var(--licht); }
.sozial svg { width: 1.25rem; height: 1.25rem; flex: none; }

/* --- Reservieren: Band und Seite -----------------------------------------
   Die Decke in der Längsansicht (assets/decke-quer.svg), nur hier und leise:
   links dunkel für den Text, nach rechts kommt sie durch. */
.band-decke {
  border-top: 1px solid var(--linie);
  background:
    linear-gradient(90deg, rgba(10,12,17,.97) 40%, rgba(10,12,17,.9) 68%, rgba(10,12,17,.8)),
    url("decke-quer.svg") right 12.5rem center / auto 150% repeat-x, var(--nacht);
}
.reservieren-band { padding-block: var(--s6); display: grid; gap: var(--s3); align-items: center; }
.reservieren-band h2 { margin: 0 0 var(--s2); max-width: 18ch; }
.reservieren-band div p { color: var(--grau); max-width: 34rem; margin: 0; }
.reservieren-band div p.rb-knopf { margin-top: var(--s4); }

/* Reservieren-Band mit der Hängelampe aus dem Hero (Hani, 30.10.: „um Dopamin zu erzeugen und eine
   Reservierung preferable zu machen“). Die Lampe schaltet sich ein, wenn das Band ins Bild kommt
   (site.js setzt .an): kurz flackern, dann fällt der Kegel samt Staub auf Text und Knopf, der Knopf
   glimmt. Dieselben Größen wie die .buehne, hier in rem. Die Lasur im Kegel ist dunkler als im Hero,
   damit der Text darin lesbar bleibt. */
.band-licht { overflow: hidden; }
.band-licht .reservieren-band {
  --lampe-b: 5.5rem; --lampe-y: 1.75rem;
  --rand: calc(var(--lampe-y) + var(--lampe-b) * .4667);
  --halb: 26deg; --tan: .4877;
  --apex: calc(var(--rand) - var(--lampe-b) * .4 / var(--tan));
  position: relative; isolation: isolate; justify-items: center; text-align: center;
  padding-top: calc(var(--rand) + var(--s5));
}
.band-licht .reservieren-band h2, .band-licht .reservieren-band div p { margin-inline: auto; }
.band-licht .reservieren-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(4rem 1.3rem at 50% calc(var(--rand) + .3rem), rgba(247,222,154,.3), rgba(247,222,154,0)),
    conic-gradient(from calc(180deg - var(--halb)) at 50% var(--apex),
      rgba(232,184,74,0) 0deg, rgba(240,200,110,.06) calc(var(--halb) * .45),
      rgba(247,222,154,.1) var(--halb), rgba(240,200,110,.06) calc(var(--halb) * 1.55),
      rgba(232,184,74,0) calc(var(--halb) * 2), rgba(232,184,74,0) 360deg),
    linear-gradient(rgba(10,12,17,.84), rgba(10,12,17,.88)), url("plaster.webp") center / cover;
  -webkit-mask-image: conic-gradient(from calc(180deg - var(--halb)) at 50% var(--apex), transparent 0deg, #000 calc(var(--halb) * .5), #000 calc(var(--halb) * 1.5), transparent calc(var(--halb) * 2), transparent 360deg), linear-gradient(to bottom, #000 60%, transparent 100%),
    linear-gradient(to bottom, transparent calc(var(--rand) - 1px), #000 calc(var(--rand) + 1px));
  -webkit-mask-composite: source-in;
  mask-image: conic-gradient(from calc(180deg - var(--halb)) at 50% var(--apex), transparent 0deg, #000 calc(var(--halb) * .5), #000 calc(var(--halb) * 1.5), transparent calc(var(--halb) * 2), transparent 360deg), linear-gradient(to bottom, #000 60%, transparent 100%),
    linear-gradient(to bottom, transparent calc(var(--rand) - 1px), #000 calc(var(--rand) + 1px));
  mask-composite: intersect;
}
.band-licht .reservieren-band::before, .band-licht .lampe .glut, .band-licht .staub { animation: einschalten 1.5s .2s linear both; }
.js .band-licht:not(.an) .reservieren-band::before, .js .band-licht:not(.an) .lampe .glut,
.js .band-licht:not(.an) .staub { animation-play-state: paused; }
.band-licht.an .rb-knopf .btn { animation: rb-glimmen 2.6s 1.7s ease-in-out infinite alternate both; }
@keyframes rb-glimmen { from { box-shadow: 0 0 0 0 rgba(232,184,74,0); } to { box-shadow: 0 0 1.6rem .25rem rgba(232,184,74,.42); } }

/* Die Szene: Lampe, Stehtisch, zwei Gäste, die alle 12 s anstoßen (gen_cv.py, tisch_szene).
   Seit 30.10. nur noch auf „Reservieren“ über den Öffnungszeiten, nicht mehr im Band der
   Startseite (Hani). */
.szene { display: block; width: 100%; max-width: 24rem; height: auto; margin: var(--s5) 0 0; overflow: visible; }
.szene .sz-zug, .szene .sz-kopf, .szene .sz-ohr, .szene .sz-funke { transform-box: view-box; transform-origin: var(--o); }
.szene .sz-zug { animation: sz-prost 12s ease-in-out infinite both; }
.szene .sz-kopf-0 { animation: sz-kopf-0 12s ease-in-out infinite both; }
.szene .sz-kopf-1 { animation: sz-kopf-1 12s ease-in-out infinite both; }
.szene .sz-ohr { animation: sz-ohr 3.2s ease-in-out infinite alternate both; }
.szene .sz-funke { opacity: 0; animation: sz-funke 12s ease-out infinite both; }
.szene .sz-glanz { animation: sz-glanz 12s ease-in-out infinite both; }
.szene .sz-perle { opacity: 0; animation: sz-perle var(--d) linear var(--v) infinite both; }
.szene .sz-staub circle { opacity: 0; animation: sz-staub var(--d) ease-in-out var(--v) infinite both; }
.szene .sz-glut, .szene .sz-licht { animation: sz-atmen 5s ease-in-out infinite alternate both; }
@keyframes sz-prost { 0%, 36% { rotate: 0deg; } 48%, 60% { rotate: var(--r); } 72%, 100% { rotate: 0deg; } }
@keyframes sz-kopf-0 { 0%, 6% { rotate: 0deg; } 11% { rotate: var(--n); } 16%, 38% { rotate: 0deg; } 48%, 60% { rotate: var(--h); } 72%, 84% { rotate: 0deg; } 89% { rotate: calc(var(--n) * .6); } 94%, 100% { rotate: 0deg; } }
@keyframes sz-kopf-1 { 0%, 16% { rotate: 0deg; } 21%, 24% { rotate: var(--n); } 30%, 38% { rotate: 0deg; } 48%, 60% { rotate: var(--h); } 72%, 100% { rotate: 0deg; } }
@keyframes sz-ohr { from { rotate: -9deg; } to { rotate: 9deg; } }
@keyframes sz-funke { 0%, 46% { opacity: 0; scale: .2; rotate: 0deg; } 49% { opacity: 1; scale: 1; } 56%, 100% { opacity: 0; scale: .5; rotate: 60deg; } }
@keyframes sz-glanz { 0%, 44% { translate: 0 0; } 58%, 100% { translate: 56px 0; } }
@keyframes sz-perle { 0% { translate: 0 0; opacity: 0; } 15% { opacity: .9; } 85% { opacity: .6; } 100% { translate: 0 -7px; opacity: 0; } }
@keyframes sz-staub { 0% { translate: 0 0; opacity: 0; } 35% { opacity: .75; } 70% { opacity: .45; } 100% { translate: var(--x) -26px; opacity: 0; } }
@keyframes sz-atmen { from { opacity: .82; } to { opacity: 1; } }

.buchung { display: grid; gap: var(--s5); align-items: start; padding-bottom: var(--s6); }
/* Auf dem Handy zuerst die Buchung, dann die Erklärung. */
@media (max-width: 959px) { .buchung-rahmen { order: -1; } }
/* Die Szene über den Öffnungszeiten, damit man sie beim Reservieren sieht (Hani, 30.10.).
   Desktop: in der mitlaufenden linken Spalte. Handy: über der Buchung — dafür löst sich der
   Textblock ins Raster auf (display: contents) und die Szene rückt nach vorn. */
.buchung-text .szene { max-width: 18rem; margin: var(--s2) 0 var(--s4); }
@media (max-width: 959px) {
  .buchung { gap: 0; }
  .buchung-text { display: contents; }
  .buchung-text .szene { order: -2; max-width: 15rem; justify-self: center; margin: 0 0 var(--s3); }
  .buchung-rahmen { margin-bottom: var(--s5); }
}
@media (min-width: 960px) {
  .buchung { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
  .buchung-text { position: sticky; top: calc(var(--header-h) + var(--s4)); }
}
.buchung-text p { color: var(--grau); }
.buchung-text .res-tel { font-size: 1.5rem; font-weight: 600; margin-bottom: var(--s4); }
.zeilen span { display: block; }
/* Ohne Innenabstand: Wand und Rand um die Karte malt die Tagesliste selbst (Thema cafevision, seit 30.10.). */
.buchung-rahmen { background: var(--nacht); border-top: 2px solid var(--licht); padding: 0; scroll-margin-top: calc(var(--header-h) + var(--s3)); }
/* Die Mindesthöhe ist nur Platzhalter bis zur ersten Höhenmeldung der Tagesliste;
   site.js setzt sie dann auf 0. Hintergrund = --paper im Tagesliste-Thema. */
.buchung-rahmen iframe { display: block; width: 100%; min-height: 32rem; border: 0; background: var(--nacht); }
.buchung-rahmen iframe[hidden] { display: none; }

/* --- Veranstaltungen: Raummiete und Catering, unter der Tischreservierung ----
   Inhalt aus Flyer und Preisliste des Lokals. Mobil: Kopf, Fotos, Details;
   ab 960 px Kopf über beide Spalten, Details links, Fotos rechts. */
.veranstaltungen { padding-block: var(--s6); display: grid; gap: var(--s4) var(--s6); scroll-margin-top: var(--header-h); }
@media (min-width: 960px) {
  .veranstaltungen { grid-template-columns: 1fr 1fr; grid-template-areas: "kopf kopf" "text fotos"; align-items: start; }
  .v-kopf { grid-area: kopf; } .v-text { grid-area: text; } .v-fotos { grid-area: fotos; }
}
.v-kopf h2 { margin: 0 0 var(--s2); max-width: 22ch; }
.v-kopf .lead { margin: 0; }
.v-anlaesse { list-style: none; margin: var(--s3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; color: var(--licht); font-weight: 600; }
.v-text h3 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); margin: var(--s4) 0 var(--s2); }
.v-text h3:first-child { margin-top: 0; }
.v-text p { color: var(--grau); max-width: 36rem; }
.v-preise { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.v-preise th, .v-preise td { text-align: left; vertical-align: top; padding: .75rem .9rem .75rem 0; border-top: 1px solid var(--wand-linie); font-weight: 400; }
.v-preise thead th, .v-preise thead td { border-top: 0; padding-top: 0; }
.v-preise thead span { display: block; font-weight: 600; color: var(--text); }
.v-preise small { display: block; font-size: .8rem; line-height: 1.35; color: var(--grau); }
.v-preise tbody th { color: var(--text); }
.v-preise td { font-size: 1.3rem; color: var(--text); white-space: nowrap; }
.v-text .v-tel { font-size: 1.5rem; font-weight: 600; color: var(--text); margin: 0 0 var(--s2); }
.v-knoepfe { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; }
.v-fotos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.v-fotos .v-gross { grid-column: 1 / -1; --ar: 1200 / 624; }
.v-fotos .foto:not(.v-gross) { --ar: 6 / 7; }
.reservieren-band div p.v-link { margin-top: var(--s2); }

/* --- Unterseiten ---------------------------------------------------------- */
.page-head { padding-block: var(--s5) var(--s4); }
.kopf-wand .page-head { padding-block: var(--s5); }
.kopf-wand {
  margin-bottom: var(--s4); border-bottom: 1px solid var(--wand-linie);
  background:
    linear-gradient(180deg, rgba(10,12,17,.93), rgba(14,12,11,.8) 55%, rgba(10,12,17,.9)),
    url("plaster.webp") center 35% / cover, #24201C;
}
.page-head h1 { font-size: clamp(2.6rem, 8vw, 5rem); }
.lead { font-size: 1.2rem; color: var(--grau); max-width: 36rem; }
.note { color: var(--grau); font-size: .95rem; }
/* Seitenköpfe auf der Wand: Titel in Gold, Text darunter hell statt Grau (Hani, 30.10.: erst
   „vllt dieses gelb“, dann „Mach nur Karte in Gold“). Gold an der hellsten Wandstelle noch 6,4:1. */
.kopf-wand h1 { color: var(--licht); }
.kopf-wand .lead, .kopf-wand .note { color: var(--text); }
.karte-body { scroll-margin-top: var(--header-h); padding-bottom: var(--s6); }

/* Karte: Name, Haarlinie, Preis — wie die Linien auf der Papierkarte im Lokal.
   Zwei feste Spalten ab Tablet, auf dem Handy untereinander. */
/* Speisen, Getränke, Cocktails, Törtchen als Reiter (site.js), unter dem Kopf mitlaufend.
   Passen sie nicht in eine Zeile (Handy, Türkisch), lässt sich die Leiste seitlich wischen. */
.karte-tabs { position: sticky; top: var(--header-h); z-index: 5; display: flex; gap: var(--s2); padding: var(--s2) 0; margin-bottom: var(--s2); background: var(--nacht); overflow-x: auto; scrollbar-width: none; }
.karte-tabs::-webkit-scrollbar { display: none; }
.karte-tabs button { flex: none; white-space: nowrap; }
.karte-tabs[hidden] { display: none; }
.karte-tabs button { font: inherit; font-size: 1.05rem; color: var(--text); background: none; cursor: pointer; border: 1px solid var(--grau); border-radius: 999px; padding: .55rem 1.4rem; }
.karte-tabs button:hover { border-color: var(--licht); }
.karte-tabs button[aria-selected="true"] { color: var(--nacht); background: var(--licht); border-color: var(--licht); }
.karte-tabs button:focus-visible { outline: 2px solid var(--licht); outline-offset: 3px; }
/* Handy: Leiste bis an den Bildschirmrand, damit der nächste Reiter angeschnitten sichtbar ist. */
@media (max-width: 599px) { .karte-tabs { gap: .4rem; margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad); scroll-padding-inline: var(--pad); } .karte-tabs button { font-size: .9rem; padding: .5rem .7rem; } }
.karte[hidden] { display: none; }
.karte-leer { grid-column: 1 / -1; margin: var(--s3) 0 var(--s5); }
.karte-teil { grid-column: 1 / -1; font-size: clamp(2rem, 4vw, 2.8rem); margin: var(--s4) 0 var(--s2); }
.js .karte-teil { display: none; }
.karte { display: grid; gap: 0 var(--s6); }
@media (min-width: 860px) { .karte { grid-template-columns: 1fr 1fr; } }
.karte-gruppe { padding-top: var(--s3); margin-bottom: var(--s4); border-top: 1px solid var(--linie); scroll-margin-top: calc(var(--header-h, 4.5rem) + var(--s2)); }
/* Unterkategorien der Karte in Gold (Hani, 30.10.). */
.karte-gruppe h3, .karte-gruppe h4 { color: var(--licht); font-family: var(--f-display); font-weight: 400; line-height: 1.15; font-size: clamp(1.6rem, 3.2vw, 2.1rem); margin: 0 0 var(--s2); }
/* Spaltenkopf über Gruppen (Getränke: alkoholfrei | mit Alkohol). */
/* Hell statt Gold, seit die Unterkategorien gold sind: sonst stünden zwei goldene Überschriften übereinander. */
.spalte-kopf { font-size: clamp(2rem, 4vw, 2.6rem); color: var(--text); margin: var(--s4) 0 var(--s2); }
.karte-spalte > .spalte-kopf:first-child { margin-top: var(--s2); }
.g-hinweis { margin: 0 0 var(--s1); color: var(--grau); font-size: .95rem; line-height: 1.5; max-width: 36rem; }
.g-wege { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1.5rem; margin: 0 0 var(--s3); font-weight: 600; }
.posten, .posten ul { list-style: none; margin: 0; padding: 0; }
.zeile { display: grid; grid-template-columns: minmax(0, max-content) minmax(1.5rem, 1fr) auto; align-items: baseline; gap: .6rem; padding: .32rem 0; }
.z-linie { border-bottom: 1px solid var(--linie); transform: translateY(-.3em); }
.z-preis { font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.z-info { display: block; color: var(--grau); font-size: .9rem; line-height: 1.4; }
/* Frühstück, Salate, später Cocktails und Törtchen: kleines Bild links. Die Beschreibung ist ein eigener Block
   (flow-root), damit sie neben dem Bild bleibt; der Preis steht auf Höhe des Namens. */
.z-text:has(.z-bild) { display: flow-root; }
/* Mit Bild nimmt der Text die ganze Breite: Die Spalte nach max-content rechnet das Bild
   nicht mit, kurze Posten (Drei Eierlei) brachen sonst schon beim Namen um. */
.zeile:has(.z-bild) { grid-template-columns: minmax(0, 1fr) 1.5rem auto; }
.z-text:has(.z-bild) .z-info { display: flow-root; }
.z-bild { float: left; width: clamp(5.5rem, 24%, 7.5rem); height: auto; aspect-ratio: 4 / 3; object-fit: cover; margin: .2rem .9rem .35rem 0; border-radius: 2px; }
.z-bild-frei { background: rgba(255,255,255,.03); border: 1px solid var(--linie); }
.z-allerg { color: var(--grau); font-size: .85rem; white-space: nowrap; }
.gruppe { padding: .32rem 0; }
.g-kopf { margin: 0; }
.zeile.unter { padding-left: var(--s2); color: var(--grau); }
.zeile.unter .z-preis { color: var(--text); }
.allergene { border-top: 1px solid var(--linie); padding-top: var(--s3); margin-top: var(--s2); }
.allergene h2 { font-size: clamp(1.6rem, 3.2vw, 2.1rem); margin-bottom: var(--s1); }
.allerg-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .3rem var(--s4); margin: var(--s2) 0 0; }
.allerg-liste div { display: flex; gap: .7rem; }
.allerg-liste dt { color: var(--licht); font-weight: 600; min-width: 1.1rem; }
.allerg-liste dd { margin: 0; color: var(--text); }
.kontakt-grid { display: grid; gap: var(--s5); padding-bottom: var(--s6); }
@media (min-width: 900px) { .kontakt-grid { grid-template-columns: 1.2fr 1fr; gap: var(--s6); } }
.links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s3); }
.kontakt-grid h2 { margin-top: var(--s5); }
.kontakt-grid > div > h2:first-child { margin-top: 0; }
.legal { padding-bottom: var(--s6); max-width: 46rem; margin-inline: auto; margin-left: max(var(--pad), calc((100% - var(--wrap)) / 2)); }
.legal h2 { font-size: 1.6rem; margin-top: var(--s4); }

/* --- Galerie ------------------------------------------------------------------ */
.galerie { padding-bottom: var(--s6); display: grid; gap: var(--s6); }
.galerie h2 { margin-bottom: var(--s3); }
.raster { display: grid; gap: var(--s2); grid-template-columns: 1fr 1fr; grid-auto-flow: dense; }
.raster .foto { --ar: 4 / 5; }
.raster .breit { grid-column: 1 / -1; --ar: 3 / 2; }
@media (min-width: 860px) {
  .raster { grid-template-columns: repeat(6, 1fr); }
  .raster .foto { grid-column: span 2; }
  .raster .breit { grid-column: span 4; --ar: auto; }
}

/* Platzhalter: sichtbar, nie als echt ausgegeben */
.platzhalter { color: #F2C96B; background: rgba(232,184,74,.10); border: 1px dashed #8A7235; padding: .05rem .4rem; border-radius: 2px; }
.platzhalter-block { display: block; padding: var(--s2); }

/* --- Fuß -------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--wand-linie);
  background: linear-gradient(180deg, rgba(7,8,12,.94), rgba(7,8,12,.86)), url("plaster.webp") center 70% / cover, #07080C;
}
.footer-inner { display: grid; gap: var(--s4); padding-block: var(--s5) var(--s4); }
.footer-inner .footer-brand { margin: 0 0 var(--s2); }
/* Unten das Logo wie im Kopf, eine Spur größer; der Name bleibt als Alt-Text (brand.name). */
.footer-brand img { display: block; height: 3.25rem; width: auto; }
.footer-inner p { color: var(--grau); margin: 0; font-size: .95rem; }
.footer-unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--linie); }
.footer-links { display: flex; gap: var(--s3); flex-wrap: wrap; }
.footer-links a { color: var(--grau); } .footer-links a:hover, .footer-links a[aria-current] { color: var(--text); }
@media (min-width: 860px) { .footer-oben { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: var(--s5); } }
.footer-oben { display: grid; gap: var(--s4); }
.footer-oben h2 { font-family: var(--f-text); font-size: .85rem; font-weight: 600; color: var(--grau); margin-bottom: var(--s1); letter-spacing: .02em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* --- WhatsApp ----------------------------------------------------------------
   Ruhiger Knopf mit Symbol über jeder Telefonnummer (Hani, 30.10.). */
.btn-wa { display: inline-flex; align-items: center; gap: .55rem; }
.btn-wa svg { width: 1.2rem; height: 1.2rem; flex: none; color: var(--licht); }
.wa { margin: 0 0 var(--s1); }
.facts dd .wa { margin: .35rem 0 .7rem; }
.footer-inner .wa { margin: var(--s2) 0 var(--s1); }
.footer-inner .btn-wa { padding: .55rem .95rem; font-size: .88rem; }