/* ==========================================================================
   Chinaski Studio & Bar -- laedt NACH dem kompletten Deli-Stapel
   (base, v1, v8-v14). Hier steht nur, was die CSB von der Deli
   unterscheidet: Farben, Headline-Schrift, Freisteller in Nischen und
   Buehne, der Tresen. Alles andere ist Deli-Code.
   ========================================================================== */

@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/HankenGrotesk-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/HankenGrotesk-Italic-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* --- Farben ------------------------------------------------------------------
   Die Deli-Rollen mit CSB-Werten belegt:
     --blush  Seitengrund. Bei der Deli Pfirsich, hier ein Rose aus dem
              CSB-Rose #bc7070 und Creme -- das reine Rose traegt keine
              Schrift (Plum darauf 2,5:1). Plum auf diesem Ton: 5,9:1.
     --plum   CSB-Plum statt Deli-Plum.
     --coral  der eine Akzent: CSB-Orange, eine Spur heller, damit es auf
              Plum als grosse Schrift 3:1 schafft (#da7341 nur 2,9:1).
     --white  Creme statt Weiss, wie Schrift auf der Live-Seite. */
:root {
  --blush: #e6c6c0;
  --plum: #623b4d;
  --coral: #e07a45;
  --coral-ink: #a84a1c;
  --red: #b8302b;
  --cream: #fdf5eb;
  --white: #fdf5eb;
  --ink: #2a1720;
  --acai: #8a5a6d;

  --body: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
  --brass: #c8955a;
  --plum-deep: #4a2b3a;
}
html { font-synthesis: none; }

/* --- Headline-Schrift (Picker) ----------------------------------------------
   Jede Stelle, an der die Deli var(--display) setzt. font-size-adjust stellt
   die Versalhoehe gleich, damit die Groessen der Deli fuer jede Schrift
   gleich hoch wirken; Breite und Charakter bleiben die der Schrift. */
html[data-font="dunbar"]    { --display: "dunbar-tall", "Arial Narrow", sans-serif;           --d-style: italic; --d-weight: 600; --d-cap: .74; }
html[data-font="league"]    { --display: "League Gothic", "Arial Narrow", sans-serif;        --d-style: normal; --d-weight: 400; --d-cap: .78; }
html[data-font="rozha"]     { --display: "Rozha One", Georgia, serif;                        --d-style: normal; --d-weight: 400; --d-cap: .66; }
html[data-font="shoulders"] { --display: "Big Shoulders Display", "Arial Narrow", sans-serif; --d-style: normal; --d-weight: 800; --d-cap: .76; }

:is(.display, .btn, .overlay__nav a, .overlay__nav-btn, .statement__pair, .openstate__pill,
    .secnav__link, .sm-fact__value, .sm-panel__name, .sm-extra__title,
    .ss-arch__num, .ss-arch__name, .ss-byo__title) {
  font-style: var(--d-style);
  font-weight: var(--d-weight);
  font-size-adjust: cap-height var(--d-cap);
}

/* --- Hero --------------------------------------------------------------------- */
/* Akzentzeile im Film: Orange statt Rose -- Rose auf dem Video geht unter. */
.csb.hero-a .hero__title .line--accent { color: var(--coral); }

/* --- Brunch: Nischen mit Freistellern ---------------------------------------
   Die Nischen der Deli sind hell und tragen Fotos. Hier sind sie Plum wie die
   Wand mit den Bogenspiegeln im Laden, die Gerichte stehen freigestellt
   darin, der Lichtrand ist Messing wie die Lampen. */
.csb .ss-arch--cut .ss-arch__img {
  background:
    radial-gradient(ellipse 70% 45% at 50% 30%, color-mix(in srgb, var(--plum) 70%, #b98a6e) 0%, transparent 70%),
    linear-gradient(var(--plum), #4c2c3b);
}
.csb .ss-arch--cut .ss-arch__img::after { border-color: color-mix(in srgb, var(--brass) 75%, transparent); }
/* Kontaktschatten unter dem Gericht */
.csb .ss-arch--cut .ss-arch__img::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 10%;
  width: calc(var(--w, .85) * 92%);
  height: 9%;
  translate: -50% 40%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(20, 8, 14, .7), transparent);
}
.csb .ss-arch--cut .ss-arch__img img {
  top: auto;
  bottom: 11%;
  left: 50%;
  width: calc(var(--w, .85) * 100%);
  height: 72%;
  object-fit: contain;
  object-position: 50% 100%;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  -webkit-mask: none;
  mask: none;
}
.csb .ss-arch--cut:hover .ss-arch__img img { transform: translateX(-50%) scale(1.05); }
.csb .brunch .sec-title__accent { padding-bottom: 0; }

/* Siegel: Spiegelei statt Blatt */
.csb .ss-sticker__egg { fill: var(--cream); }
.csb .ss-sticker__yolk { fill: #f2a93b; }

/* --- Bar: Aufbau wie "Our fridge" der Deli ---------------------------------
   Section in Plum (die Bar ist der Abend), Text in Creme. Die Zeichnung
   (includes/bar.php) steht als Kasten mit runden Ecken und Schatten wie der
   Kuehlschrank; ihre eigene Wand ist eine Spur heller als die Section. Am
   Telefon schneidet der Kasten die Seiten ab (preserveAspectRatio slice):
   Boegen, Glasboeden, Nummern und Tresen bleiben (x 305-1095), Blumen, Saeule und
   Hocker gehen -- so stehen die Flaschen gross genug. */
.csb .bar {
  background: var(--plum-deep, #4a2b3a);
  color: var(--white);
}
.csb .bar .sec-title,
.csb .bar .fridge-legend__title { color: var(--white); }
.csb .bar .eyebrow { color: var(--blush); }
.csb .bar .fridge-legend li { border-top-color: color-mix(in srgb, var(--white) 20%, transparent); }
.csb .bar .fridge-legend__items { color: color-mix(in srgb, var(--white) 78%, transparent); }
.csb .bar .fridge__btn { background: var(--coral); border-color: var(--coral); color: var(--ink); }
.csb .bar .fridge__btn:hover { background: var(--white); border-color: var(--white); color: var(--plum); }

.csb .bar-stage {
  position: relative;
  width: min(100%, 74vh * 1400 / 950);
  aspect-ratio: 1400 / 950;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 1.8rem 3.6rem -1rem rgba(16, 6, 11, .6);
}
.csb .bar-svg { display: block; width: 100%; height: 100%; }
.csb .bar-label { font-family: var(--body); font-weight: 800; letter-spacing: .03em; }
.csb .bar-no__t { font-family: var(--body); font-weight: 800; letter-spacing: .02em; }
@media (max-width: 699px) {
  .csb .bar-stage { width: 100%; aspect-ratio: 830 / 1000; border-radius: 16px; }
}
/* Nummern in der Zeichnung und die Ebenen-Liste nur am Telefon (Patrick,
   27.10.2026). Am Desktop nennt jede Flasche ihren Namen beim Zeigen --
   das Etikett steht ueber der Flasche, hell auf der dunklen Bar. Dafuer
   bekommt die Zeichnung mehr Breite. */
@media (min-width: 700px) {
  .csb .bar-no,
  .csb .bar .fridge-legend { display: none; }
}
/* Desktop: Text als Kopfzeile, die Zeichnung ueber die ganze Breite -- so
   steht die Bar komplett (Strauss bis Hocker) und trotzdem gross. */
@media (min-width: 1100px) {
  .csb .bar.fridge--c { grid-template-columns: minmax(0, 1fr); row-gap: clamp(1.2rem, 2.6vh, 2rem); }
  .csb .bar .fridge__copy {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "eyebrow cta" "title cta" "lead cta";
    align-items: end;
    column-gap: 3rem;
  }
  .csb .bar .eyebrow { grid-area: eyebrow; }
  .csb .bar .sec-title { grid-area: title; }
  .csb .bar .sec-lead { grid-area: lead; }
  .csb .bar .fridge__cta { grid-area: cta; margin: 0; }
  .csb .bar .fridge__visual { width: 100%; }
  .csb .bar-stage { width: min(100%, (100vh - 9rem) * 1400 / 950); margin-inline: auto; }
}
.csb .bar .frb-tip {
  padding: .45rem .75rem;
  background: var(--white);
  color: var(--plum);
  font-size: .82rem;
  font-weight: 700;
  box-shadow: 0 .6rem 1.4rem -.4rem rgba(16, 6, 11, .55);
}
@media (min-width: 700px) and (max-width: 1099px) {
  .csb .bar.fridge--c .fridge__visual { width: min(100%, 46rem); }
  .csb .bar-stage { width: 100%; }
}

/* --- Picker (nur zur Abstimmung, fliegt vor dem Livegang raus) ---------- */
.font-picker {
  position: fixed;
  right: .75rem;
  bottom: .75rem;
  z-index: 120;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .5rem;
  font-family: var(--body);
  color: var(--ink);
}
.font-picker__toggle {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .85rem;
  border: 0;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 8px 26px rgba(42, 23, 32, .3);
  font: 700 .78rem/1 var(--body);
  cursor: pointer;
}
.font-picker__toggle span { opacity: .55; font-weight: 600; }
.font-picker__list {
  display: none;
  flex-direction: column;
  gap: .3rem;
  padding: .55rem;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 36px rgba(42, 23, 32, .32);
}
.font-picker.is-open .font-picker__list { display: flex; }
.font-picker__opt {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  min-width: 15rem;
  padding: .45rem .7rem;
  border: 1.5px solid transparent;
  border-radius: 10px;
  background: none;
  text-align: left;
  cursor: pointer;
}
.font-picker__opt:hover { background: #f5ece9; }
.font-picker__opt.is-active { border-color: var(--plum); }
.font-picker__sample { font-size: 1.35rem; line-height: 1; text-transform: uppercase; }
.font-picker__name { font: 600 .72rem/1 var(--body); opacity: .6; }