/* ============================================================
   CHAI Dessert und Kaffee - Oldenburg

   Feste, transparente Navigation ueber einem Vollbild, danach ein
   kurzer Wechsel aus ruhigen Flaechen und einem vollflaechigen
   Farbblock. Die volle Karte liegt auf einer eigenen Seite.

   Abschnittsfolge der Startseite:
   1  Wechselnde Getraenke mit animierten Zutaten, ganzer Bildschirm
   2  leere Flaeche, ein Foto daneben
   3  unscharfes Foto aus dem Cafe, Text darauf
   4  leere Flaeche, zwei Fotos
   5  Bildergalerie, Text und drei Fotos als Mosaik
   6  Stimmen der Gaeste als laufende Linie
   7  Fusszeile in Navy

   Farben ausschliesslich aus dem Logo: Creme vom Aufkleber,
   Navy vom Teeglas, Chai-Rot vom Tee.
   Kanten durchgehend hart, ohne Rundung.
   ============================================================ */

:root{
  color-scheme: light;

  --bg:        #F2E8D7;
  --bg-warm:   #E9DAC1;
  --surface:   #FCF8EE;
  --line:      #D9C8AC;
  --line-soft: #E6D8C0;

  --ink:       #14303C;
  --ink-2:     #40606D;

  --accent:     #C0361F;
  --accent-ink: #A82F1B;
  --on-accent:  #FFF6EC;

  --navy:           #14303C;
  --on-navy:        #F2E8D7;
  --on-navy-2:      #C2D2D8;
  --accent-on-navy: #EE8064;

  --pad-x: clamp(20px, 4vw, 40px);
  --wrap: 1360px;
  --head-h: 68px;
}

*,*::before,*::after{ box-sizing:border-box }

html{ scroll-behavior:smooth }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Karla","Segoe UI",system-ui,sans-serif;
  font-size:20px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block }
a{ color:inherit }

/* ---------- Typografie ---------- */
h1,h2,h3,h4{ font-family:"Marcellus",Georgia,serif; font-weight:400; margin:0; letter-spacing:-.005em }
.h-block{ font-size:clamp(2.1rem, 4.4vw, 3.45rem); line-height:.95 }
.h-card{ font-size:clamp(1.4rem, 2vw, 1.6rem); line-height:1.05 }

.label{
  font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-2); margin:0 0 18px;
}
p{ margin:0 0 18px }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--accent); color:var(--on-accent); padding:12px 20px;
}
.skip:focus{ left:0 }

.visually-hidden{
  position:absolute !important; width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important; overflow:hidden !important;
  clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important;
}

:where(a,button,input,summary):focus-visible{ outline:2px solid var(--accent-ink); outline-offset:3px }

/* ---------- Aktionen ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; white-space:nowrap;
  font-family:inherit; font-size:1rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  padding:15px 30px; border:1px solid transparent; text-decoration:none; cursor:pointer;
  transition:background-color .18s, border-color .18s, color .18s, transform .18s;
}
.btn:active{ transform:translateY(1px) }
.btn-solid{ background:var(--accent); color:var(--on-accent) }
.btn-solid:hover{ background:var(--accent-ink) }
.btn-line{ background:transparent; color:var(--ink); border-color:var(--ink) }
.btn-line:hover{ background:var(--ink); color:var(--bg) }
.on-dark .btn-line{ color:#FFFFFF; border-color:#FFFFFF }
.on-dark .btn-line:hover{ background:#FFFFFF; color:var(--navy) }

.link-u{
  display:inline-block; font-size:1rem; font-weight:700; letter-spacing:.03em;
  text-transform:uppercase; text-decoration:none; padding-bottom:3px;
  border-bottom:2px solid currentColor;
}

/* ---------- Navigation, nach dem Vorbild ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:60;
  height:var(--head-h);
  background:var(--bg); color:var(--ink);
  box-shadow:inset 0 -1px 0 var(--line);
  transition:background-color .3s, color .3s, box-shadow .3s;
}
.site-header::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; z-index:0;
  background:linear-gradient(90deg,
    var(--line) 0 calc(50% - 48px),
    var(--accent) calc(50% - 48px) calc(50% + 48px),
    var(--line) calc(50% + 48px) 100%);
  opacity:.8; transition:opacity .3s;
}
.site-header.is-over-hero{ background:transparent; color:#FFFFFF; box-shadow:none }
.site-header.is-over-hero::after{ opacity:0 }

/* Betriebsstatus, aus den Oeffnungszeiten berechnet */
.nav-status{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.86rem; font-weight:600; letter-spacing:.01em; opacity:.9; white-space:nowrap;
}
.nav-status .dot{ width:7px; height:7px; background:currentColor; opacity:.55; flex:none }
.nav-status.is-open .dot{ background:#5FBF7A; opacity:1 }
@media (max-width:900px){ .nav-status{ display:none } }

.nav{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  height:var(--head-h); width:100%; padding-inline:var(--pad-x);
}
.nav-links{
  grid-column:3; display:flex; align-items:center; justify-content:flex-end;
  gap:20px; list-style:none; margin:0; padding:0;
}
.nav-links a{
  text-decoration:none; font-size:1rem; font-weight:700; letter-spacing:.03em;
  text-transform:uppercase; color:inherit;
}
.nav-links a:hover{ opacity:.72 }

.brand{
  grid-column:2; display:flex; align-items:center; gap:10px;
  text-decoration:none; color:inherit; justify-self:center;
}
.brand b{ font-family:"Marcellus",Georgia,serif; font-weight:400; font-size:1.28rem; letter-spacing:.2em; line-height:1 }

.nav-contact{
  grid-column:1; display:flex; align-items:center; justify-content:flex-start; gap:18px;
}
.nav-contact a{
  text-decoration:none; font-size:1rem; font-weight:700; letter-spacing:.03em;
  text-transform:uppercase; color:inherit;
}
.nav-contact a:hover{ opacity:.72 }

.nav-toggle{
  grid-column:3; display:none; justify-self:end;
  background:none; border:0; padding:0; color:inherit; cursor:pointer;
  font:inherit; font-size:1rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
}

@media (max-width:900px){
  .nav{ grid-template-columns:1fr auto 1fr }
  .nav-links{ display:none }
  .nav-toggle{ display:block }
  .nav-links.is-open{
    display:flex; position:fixed; left:0; right:0; top:var(--head-h); bottom:0;
    flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:0;
    background:var(--bg); color:var(--ink); padding:12px 0; z-index:59;
  }
  .nav-links.is-open a{ display:block; padding:18px var(--pad-x); font-size:1.5rem }
}

/* Transparente Logomarke. Der Dampf ist vom Bild getrennt und bewegt sich leicht. */
.logo-symbol{
  --symbol-image-size:44px;
  --symbol-image-left:-6.5px;
  --symbol-width:27px;
  --symbol-height:44px;
  --steam-left:5px;
  --steam-width:17px;
  --steam-height:12px;
  --steam-stroke:1.8px;
  position:relative; display:inline-block; flex:none;
  width:var(--symbol-width); height:var(--symbol-height); line-height:0;
  color:currentColor;
}
.logo-symbol__cup{
  position:absolute; left:var(--symbol-image-left); bottom:0;
  width:var(--symbol-image-size); height:var(--symbol-image-size); max-width:none;
  clip-path:inset(22% 25% 0 15%);
}
.logo-symbol__steam{
  position:absolute; z-index:1; top:0; left:var(--steam-left);
  display:flex; align-items:stretch; justify-content:space-between;
  width:var(--steam-width); height:var(--steam-height); pointer-events:none;
}
.logo-symbol__steam i{
  --steam-drift:0px;
  position:relative; display:block; width:3px; height:100%;
  opacity:.72; transform-origin:50% 100%;
}
.logo-symbol__steam i::before,
.logo-symbol__steam i::after{
  content:""; position:absolute; left:50%;
  width:72%; height:58%; border-left:var(--steam-stroke) solid currentColor;
  border-radius:50%;
}
.logo-symbol__steam i::before{ top:0; transform:translateX(-30%) rotate(11deg) }
.logo-symbol__steam i::after{ bottom:0; transform:translateX(-70%) rotate(-11deg) }
.logo-symbol__steam i:nth-child(1){ --steam-drift:-1px }
.logo-symbol__steam i:nth-child(2){ --steam-drift:.75px }
.logo-symbol__steam i:nth-child(3){ --steam-drift:-.6px }

.logo-symbol--footer{
  --symbol-image-size:96px;
  --symbol-image-left:-14px;
  --symbol-width:58px;
  --symbol-height:96px;
  --steam-left:12px;
  --steam-width:35px;
  --steam-height:25px;
  --steam-stroke:3px;
}

/* ---------- 1 Animierter Getraenkewechsel ---------- */
.hero{
  --hero-vh:1vh;
  position:relative; min-height:calc(100 * var(--hero-vh));
  color:#FFFFFF; overflow:hidden; isolation:isolate;
}
/* Safari vor 15.4 kennt dvh nicht. Auch die abgeleiteten Bechergroessen
   brauchen einen gueltigen Wert, sonst verschwinden Hero und Zutaten. */
@supports (height:100dvh){
  .hero{ --hero-vh:1dvh }
}
.hero-showcase{
  --hero-cycle:50.4s;
  background:#5A1D2C;
}
.hero-showcase::after{
  content:""; position:absolute; z-index:8; inset:0 0 auto; height:128px;
  background:
    linear-gradient(180deg,rgba(11,27,34,.68),rgba(11,27,34,.25) 55%,transparent);
  pointer-events:none;
}
.hero-stage{ position:absolute; inset:0; overflow:hidden }
.hero-stage::after{
  content:""; position:absolute; z-index:6; inset:auto 0 0; height:34%;
  background:linear-gradient(180deg,transparent,rgba(12,25,30,.16) 48%,rgba(12,25,30,.52));
  pointer-events:none;
}
.hero-palette{
  position:absolute; inset:0; opacity:0;
  animation:hero-palette-cycle var(--hero-cycle) linear var(--hero-delay) infinite both;
}
.hero-palette::before{
  content:""; position:absolute; left:50%; top:50%; width:min(46vw,650px); height:82%;
  transform:translate(-50%,-48%); border-radius:50% 50% 9% 9% / 34% 34% 9% 9%;
  background:rgba(255,245,226,.86); box-shadow:0 0 100px rgba(255,241,214,.24);
}
.hero-palette--berry{
  background:
    radial-gradient(circle at 16% 72%,rgba(243,147,148,.62),transparent 23%),
    radial-gradient(circle at 86% 28%,rgba(112,25,52,.78),transparent 30%),
    linear-gradient(118deg,#32151D 0%,#7D263F 45%,#D7797F 100%);
}
.hero-palette--berry::before{ background:linear-gradient(180deg,#FFEBD8 0%,#F7CFCC 61%,#D67A83 100%) }
.hero-palette--schoko{
  background:
    radial-gradient(circle at 12% 70%,rgba(166,92,133,.58),transparent 24%),
    radial-gradient(circle at 88% 26%,rgba(69,28,29,.84),transparent 31%),
    linear-gradient(118deg,#22141D 0%,#5D2A49 46%,#B66F76 100%);
}
.hero-palette--schoko::before{ background:linear-gradient(180deg,#F9E9D9 0%,#D9C4DC 60%,#986581 100%) }
.hero-palette--matcha{
  background:
    radial-gradient(circle at 10% 68%,rgba(177,190,74,.55),transparent 25%),
    radial-gradient(circle at 88% 25%,rgba(38,72,27,.86),transparent 31%),
    linear-gradient(118deg,#142A20 0%,#3F6632 46%,#A4B65F 100%);
}
.hero-palette--matcha::before{ background:linear-gradient(180deg,#F7EBD0 0%,#DCE0AE 60%,#97A84F 100%) }
.hero-palette--oreo{
  background:
    radial-gradient(circle at 12% 70%,rgba(184,137,96,.5),transparent 25%),
    radial-gradient(circle at 88% 24%,rgba(45,35,29,.88),transparent 31%),
    linear-gradient(118deg,#17130F 0%,#4D3427 47%,#A47655 100%);
}
.hero-palette--oreo::before{ background:linear-gradient(180deg,#F8EBDD 0%,#DEC8B0 60%,#9B704F 100%) }
.hero-palette--caramel{
  background:
    radial-gradient(circle at 12% 72%,rgba(231,163,82,.52),transparent 25%),
    radial-gradient(circle at 88% 24%,rgba(81,39,21,.86),transparent 31%),
    linear-gradient(118deg,#24150F 0%,#784326 47%,#C78A4F 100%);
}
.hero-palette--caramel::before{ background:linear-gradient(180deg,#FFF0D8 0%,#E9C79C 60%,#B96E38 100%) }
.hero-palette--lagoon{
  background:
    radial-gradient(circle at 11% 70%,rgba(32,195,218,.52),transparent 25%),
    radial-gradient(circle at 88% 23%,rgba(12,50,102,.88),transparent 31%),
    linear-gradient(118deg,#071625 0%,#07588A 47%,#29BDD1 100%);
}
.hero-palette--lagoon::before{ background:linear-gradient(180deg,#F7F0D7 0%,#CDEDEF 59%,#5DC3D0 100%) }
.hero-palette--ananas{
  background:
    radial-gradient(circle at 12% 72%,rgba(224,194,75,.52),transparent 25%),
    radial-gradient(circle at 88% 24%,rgba(38,83,39,.86),transparent 31%),
    linear-gradient(118deg,#112519 0%,#4D742F 47%,#C5AE4D 100%);
}
.hero-palette--ananas::before{ background:linear-gradient(180deg,#FFF3CE 0%,#E9E3A5 60%,#9DB15B 100%) }
.hero-palette--mango{
  background:
    radial-gradient(circle at 12% 72%,rgba(245,170,44,.56),transparent 25%),
    radial-gradient(circle at 88% 24%,rgba(126,45,17,.86),transparent 31%),
    linear-gradient(118deg,#301608 0%,#A34B19 47%,#EE9B2B 100%);
}
.hero-palette--mango::before{ background:linear-gradient(180deg,#FFF0CF 0%,#F4D184 59%,#E18B39 100%) }
.hero-palette--berry-love{
  background:
    radial-gradient(circle at 12% 72%,rgba(236,92,100,.54),transparent 25%),
    radial-gradient(circle at 88% 24%,rgba(83,16,37,.88),transparent 31%),
    linear-gradient(118deg,#280C15 0%,#801B37 47%,#D84E5C 100%);
}
.hero-palette--berry-love::before{ background:linear-gradient(180deg,#FFE8D9 0%,#F4C1C5 59%,#CF6977 100%) }

/* Die Komposition rechnet in Bechereinheiten: 100 --u entsprechen der
   gerenderten Hoehe des Produktbilds (2:3). So bleiben Zutaten auf jedem
   Bildschirm gleich dicht am Becher und kommen hinter ihm hervor. */
.hero-drink-scene{
  --cup-h:min(52.5vw,705px,calc(74 * var(--hero-vh)));
  --u:calc(var(--cup-h) / 100);
  --spread:1; --grow:1;
  position:absolute; z-index:3; inset:var(--head-h) 0 94px;
  display:grid; place-items:center; opacity:0;
  transform:translate3d(-115vw,0,0);
  animation:hero-product-sweep var(--hero-cycle) cubic-bezier(.67,.03,.27,1) var(--hero-delay) infinite both;
}
.hero-product-lockup{
  position:relative; z-index:3; display:grid; justify-items:center; gap:6px; margin:0;
}
.hero-product{
  --product-width:min(35vw,470px);
  --product-max-height:calc(74 * var(--hero-vh));
  position:relative; z-index:3; object-fit:contain;
  width:var(--product-width); max-height:var(--product-max-height);
  filter:drop-shadow(0 28px 32px rgba(12,24,24,.34));
  transform:translateZ(0);
}
.hero-product--matcha{ width:min(34vw,456px); max-height:calc(71.8 * var(--hero-vh)) }
.hero-drink-scene--matcha{ --cup-h:min(51vw,684px,calc(71.8 * var(--hero-vh))) }
.hero-drink-name{
  margin:0; max-width:80vw; color:#FFFFFF;
  font-family:"Karla",sans-serif; font-size:clamp(.72rem,1.1vw,.86rem);
  line-height:1.1; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  white-space:nowrap; text-align:center; text-shadow:0 2px 12px rgba(12,24,24,.48);
}
.hero-ingredients{
  position:absolute; z-index:2; inset:0; display:grid; place-items:center;
  transform:translateY(-11px);
}
.hero-ingredient{
  --x:calc(var(--ix) * var(--u) * var(--spread));
  --y:calc(var(--iy) * var(--u));
  position:absolute; width:calc(var(--is) * var(--u) * var(--grow)); opacity:0;
  filter:drop-shadow(0 13px 12px rgba(17,31,27,.24));
  animation:
    hero-ingredient-burst var(--hero-cycle) cubic-bezier(.24,.78,.32,1)
      calc(var(--hero-delay) + var(--lag)) infinite both,
    hero-ingredient-drift var(--drift-time,4.8s) ease-in-out
      var(--drift-delay,0s) infinite alternate;
}
.hero-ingredient:nth-child(1){ --drift-x:3px; --drift-y:-5px; --drift-time:4.8s; --drift-delay:-.7s }
.hero-ingredient:nth-child(2){ --drift-x:-4px; --drift-y:-3px; --drift-time:5.4s; --drift-delay:-2.1s }
.hero-ingredient:nth-child(3){ --drift-x:2px; --drift-y:4px; --drift-time:4.2s; --drift-delay:-1.4s }
.hero-ingredient:nth-child(4){ --drift-x:-3px; --drift-y:5px; --drift-time:5.8s; --drift-delay:-.4s }
.hero-ingredient:nth-child(5){ --drift-x:4px; --drift-y:2px; --drift-time:4.6s; --drift-delay:-2.7s }
.hero-ingredient:nth-child(6){ --drift-x:-2px; --drift-y:-4px; --drift-time:5.1s; --drift-delay:-1.8s }
.hero-ingredient:nth-child(7){ --drift-x:5px; --drift-y:-2px; --drift-time:5.6s; --drift-delay:-3.3s }
.hero-ingredient:nth-child(8){ --drift-x:-4px; --drift-y:3px; --drift-time:4.4s; --drift-delay:-1.1s }
.hero-ingredients--berry .hero-ingredient{
  filter:saturate(1.14) contrast(1.03) drop-shadow(0 13px 12px rgba(57,10,20,.28));
}
.hero-ingredients--matcha .hero-ingredient{
  filter:saturate(1.08) contrast(1.02) drop-shadow(0 13px 12px rgba(17,31,27,.24));
}
.hero-ingredients--schoko .hero-ingredient{
  filter:saturate(1.08) contrast(1.03) drop-shadow(0 13px 13px rgba(42,17,30,.28));
}
.hero-ingredients--oreo .hero-ingredient{
  filter:saturate(1.04) contrast(1.03) drop-shadow(0 13px 13px rgba(31,22,16,.28));
}
.hero-ingredients--caramel .hero-ingredient{
  filter:saturate(1.06) contrast(1.03) drop-shadow(0 13px 13px rgba(67,34,15,.28));
}
.hero-ingredients--lagoon .hero-ingredient{
  filter:saturate(1.1) contrast(1.03) drop-shadow(0 13px 13px rgba(7,46,72,.28));
}
.hero-ingredients--ananas .hero-ingredient{
  filter:saturate(1.08) contrast(1.03) drop-shadow(0 13px 13px rgba(35,61,24,.26));
}
.hero-ingredients--mango .hero-ingredient{
  filter:saturate(1.08) contrast(1.03) drop-shadow(0 13px 13px rgba(91,43,12,.27));
}
.hero-ingredients--berry-love .hero-ingredient{
  filter:saturate(1.12) contrast(1.03) drop-shadow(0 13px 13px rgba(69,9,23,.3));
}
.hero-ingredient--matcha-cluster,
.hero-ingredient--matcha-powder,
.hero-ingredient--matcha-burst{ mix-blend-mode:multiply }
.hero-ingredient{ --s:1 }

/* Feine Tropfen und Kruemel: eine gemeinsame Ebene, die aus der Bechermitte
   aufgeht. Eine Animation pro Szene statt einer pro Tropfen. */
.hero-sparks{
  position:absolute; inset:0; opacity:0; pointer-events:none;
  animation:
    hero-sparks-burst var(--hero-cycle) cubic-bezier(.24,.78,.32,1)
      calc(var(--hero-delay) + .15s) infinite both,
    hero-ingredient-drift 6.2s ease-in-out -1.3s infinite alternate;
  --drift-x:-2px; --drift-y:-4px;
}
.hero-sparks i{
  --d:calc(var(--is) * var(--u) * var(--grow));
  position:absolute; left:50%; top:50%; width:var(--d); height:var(--d);
  margin:calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  border-radius:50%;
  transform:translate(calc(var(--ix) * var(--u) * var(--spread)),calc(var(--iy) * var(--u)));
  background:
    radial-gradient(circle at 33% 29%,rgba(255,255,255,.95) 0 10%,rgba(255,255,255,0) 26%),
    radial-gradient(circle at 64% 74%,rgba(255,255,255,.4) 0 7%,rgba(255,255,255,0) 19%),
    radial-gradient(circle at 42% 38%,var(--c1) 0%,var(--c2) 55%,var(--c3) 100%);
  box-shadow:0 calc(var(--d) * .22) calc(var(--d) * .36) var(--shade,rgba(20,10,5,.2));
}
/* Kruemel und Pulver: matt, unregelmaessig, ohne Glanzpunkt */
.hero-sparks--speck i{
  border-radius:42% 58% 51% 49% / 55% 43% 57% 45%;
  background:radial-gradient(circle at 40% 36%,var(--c1) 0%,var(--c2) 48%,var(--c3) 100%);
  box-shadow:none;
}
.hero-sparks--speck i:nth-child(3n){ border-radius:60% 40% 38% 62% / 45% 58% 42% 55%; rotate:35deg }
.hero-sparks--speck i:nth-child(4n+1){ border-radius:35% 65% 60% 40% / 62% 38% 60% 40%; rotate:-50deg }
.hero-sparks--powder i{
  border-radius:50%;
  background:radial-gradient(circle,var(--c2) 0 28%,rgba(0,0,0,0) 70%);
  box-shadow:none;
}
.hero-sparks--berry{ --c1:#FF9AA0; --c2:#D8233F; --c3:#7A0B20; --shade:rgba(80,8,20,.24) }
.hero-sparks--schoko{ --c1:#A87761; --c2:#4E2619; --c3:#1C0B06; --shade:rgba(30,10,5,.26) }
.hero-sparks--matcha{ --c1:#C9DB82; --c2:#94B044; --c3:#5E7A22 }
.hero-sparks--oreo{ --c1:#5C4B45; --c2:#2E221E; --c3:#15100E }
.hero-sparks--caramel{ --c1:#FFD48E; --c2:#E38C2B; --c3:#8C4311; --shade:rgba(90,40,10,.24) }
.hero-sparks--lagoon{ --c1:#C4F2FF; --c2:#38B4EE; --c3:#0B55A8; --shade:rgba(5,40,80,.22) }
.hero-sparks--ananas{
  --c1:rgba(255,255,255,.28); --c2:rgba(236,245,210,.34); --c3:rgba(120,140,60,.62);
  --shade:rgba(30,50,20,.12);
}
.hero-sparks--mango{ --c1:#FFD884; --c2:#F59B1F; --c3:#A5520A; --shade:rgba(100,45,5,.24) }
.hero-sparks--berry-love{ --c1:#FF8C9A; --c2:#C8183C; --c3:#650818; --shade:rgba(80,8,20,.24) }

.hero-controls{
  position:absolute; z-index:12; left:50%; right:var(--pad-x); bottom:clamp(26px,4.4vh,48px);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  transform:translateX(-50%); width:calc(100% - (2 * var(--pad-x)));
}
.hero-cta{
  grid-column:2; min-width:min(290px,72vw); padding-inline:34px;
  box-shadow:0 13px 30px rgba(20,31,33,.25);
}
.hero-motion-toggle{
  grid-column:3; justify-self:end; position:relative; width:46px; height:46px;
  border:1px solid rgba(255,255,255,.72); background:rgba(13,31,37,.28); color:#FFFFFF;
  backdrop-filter:blur(8px); cursor:pointer; transition:background-color .18s,border-color .18s;
}
.hero-motion-toggle:hover{ background:rgba(13,31,37,.62); border-color:#FFFFFF }
.hero-motion-toggle span::before,
.hero-motion-toggle span::after{
  content:""; position:absolute; top:14px; width:3px; height:16px; background:currentColor;
}
.hero-motion-toggle span::before{ left:17px }
.hero-motion-toggle span::after{ right:17px }
.hero-motion-toggle[aria-pressed="true"] span::before{
  top:13px; left:17px; width:0; height:0; background:transparent;
  border-top:9px solid transparent; border-bottom:9px solid transparent;
  border-left:14px solid currentColor;
}
.hero-motion-toggle[aria-pressed="true"] span::after{ display:none }
/* Pfeile zum selbst Wechseln, halbtransparent auf Hoehe des Getraenks.
   Wischen funktioniert auf der ganzen Flaeche, senkrechtes Scrollen bleibt frei. */
.hero-showcase{ touch-action:pan-y pinch-zoom }
.hero-stage{ -webkit-user-select:none; user-select:none }
.hero-stage img{ -webkit-user-drag:none }
.hero-arrow{
  position:absolute; z-index:12; top:calc(50% + (var(--head-h) - 94px) / 2);
  display:grid; place-items:center; width:48px; height:48px; padding:0;
  border:0; background:none; color:#FFFFFF;
  filter:drop-shadow(0 1px 6px rgba(12,24,24,.45));
  opacity:.6; cursor:pointer; transform:translateY(-50%);
  transition:opacity .18s;
}
.hero-arrow[hidden]{ display:none }
.hero-arrow--prev{ left:var(--pad-x) }
.hero-arrow--next{ right:var(--pad-x) }
.hero-arrow:hover,
.hero-arrow:focus-visible{ opacity:1 }
.hero-arrow:focus-visible{ outline-color:#FFFFFF }
.hero-arrow span{
  width:14px; height:14px; border-top:2px solid currentColor; border-left:2px solid currentColor;
  transition:translate .18s;
}
.hero-arrow--prev span{ transform:translateX(3px) rotate(-45deg) }
.hero-arrow--next span{ transform:translateX(-3px) rotate(135deg) }
.hero-arrow--prev:hover span{ translate:-3px 0 }
.hero-arrow--next:hover span{ translate:3px 0 }
/* Auf dem Handy kleiner und naeher am Rand, Wischen bleibt der Hauptweg. */
@media (max-width:820px){
  .hero-arrow{ top:calc(50% + (var(--head-h) - 102px) / 2); width:36px; height:36px; opacity:.55 }
  .hero-arrow--prev{ left:4px }
  .hero-arrow--next{ right:4px }
  .hero-arrow span{ width:10px; height:10px }
}

/* Szenen ausserhalb des Bildes stehen nicht im Seitenbaum (main.js setzt is-parked).
   Die unsichtbare Uhr traegt die Zeitleiste, an der sich geweckte Szenen ausrichten. */
.hero-palette.is-parked,
.hero-drink-scene.is-parked{ display:none }
.hero-clock{
  position:absolute; top:0; left:0; width:0; height:0; pointer-events:none;
  animation:hero-palette-cycle var(--hero-cycle) linear infinite both;
}

/* Das erste Getraenk bleibt ohne JavaScript oder Animations-API sichtbar.
   Erst nach erfolgreicher Pruefung aktiviert main.js die Zeitleiste. */
.hero-showcase:not(.is-animated) .hero-clock,
.hero-showcase:not(.is-animated) .hero-palette,
.hero-showcase:not(.is-animated) .hero-drink-scene,
.hero-showcase:not(.is-animated) .hero-ingredient,
.hero-showcase:not(.is-animated) .hero-sparks{ animation:none }
.hero-showcase:not(.is-animated) .hero-palette.is-current{ opacity:1 }
.hero-showcase:not(.is-animated) .hero-drink-scene.is-current{ opacity:1; transform:none }
.hero-showcase:not(.is-animated) .hero-drink-scene.is-current .hero-ingredient{
  opacity:1; transform:translate3d(var(--x),var(--y),0) scale(var(--s)) rotate(var(--r));
}
.hero-showcase:not(.is-animated) .hero-drink-scene.is-current .hero-sparks{ opacity:1; transform:none }
.hero-showcase:not(.is-animated) .hero-motion-toggle{ display:none }

.hero-showcase.is-paused :is(.hero-clock,.hero-palette,.hero-drink-scene,.hero-ingredient,.hero-sparks),
.hero-showcase.is-out-of-view :is(.hero-clock,.hero-palette,.hero-drink-scene,.hero-ingredient,.hero-sparks){ animation-play-state:paused }

@keyframes hero-palette-cycle{
  0%{ opacity:0 }
  1.333333%,11.111111%{ opacity:1 }
  12.444444%,100%{ opacity:0 }
}
@keyframes hero-product-sweep{
  0%{ opacity:0; transform:translate3d(-115vw,0,0) }
  .444444%{ opacity:1 }
  2.444444%,9.333333%{ opacity:1; transform:translate3d(0,0,0) }
  11.555556%{ opacity:1; transform:translate3d(115vw,0,0) }
  12.222222%{ opacity:0; transform:translate3d(125vw,0,0) }
  12.226667%,100%{ opacity:0; transform:translate3d(-115vw,0,0) }
}
@keyframes hero-ingredient-burst{
  0%,1.333333%{ opacity:0; transform:translate3d(0,0,0) scale(.2) rotate(0deg) }
  4%,9.111111%{ opacity:1; transform:translate3d(var(--x),var(--y),0) scale(var(--s)) rotate(var(--r)) }
  11.111111%{ opacity:0; transform:translate3d(var(--x),var(--y),0) scale(var(--s)) rotate(calc(var(--r) + var(--turn,14deg))) }
  11.115556%,100%{ opacity:0; transform:translate3d(0,0,0) scale(.2) rotate(0deg) }
}
@keyframes hero-sparks-burst{
  0%,1.333333%{ opacity:0; transform:scale(.25) }
  4%,9.111111%{ opacity:1; transform:scale(1) }
  11.111111%{ opacity:0; transform:scale(1.05) }
  11.115556%,100%{ opacity:0; transform:scale(.25) }
}
@keyframes hero-ingredient-drift{
  from{ translate:0 0 }
  to{ translate:var(--drift-x) var(--drift-y) }
}

@media (max-width:820px){
  .hero-showcase::after{ height:116px }
  .hero-palette::before{
    width:min(78vw,420px); height:77%; top:49%;
    border-radius:48% 48% 8% 8% / 28% 28% 7% 7%;
  }
  .hero-drink-scene{ inset:var(--head-h) 0 102px }
  .hero-product{
    --product-width:min(74vw,365px);
    --product-max-height:calc(66 * var(--hero-vh));
  }
  .hero-product--matcha{ width:min(71.8vw,354px); max-height:calc(64 * var(--hero-vh)) }
  .hero-drink-scene{ --cup-h:min(111vw,547.5px,calc(66 * var(--hero-vh))); --spread:.9; --grow:.9 }
  .hero-drink-scene--matcha{ --cup-h:min(107.7vw,531px,calc(64 * var(--hero-vh))) }
  .hero-drink-name{ font-size:.76rem; letter-spacing:.065em }
  .hero-controls{ right:18px; width:calc(100% - 36px) }
  .hero-cta{ min-width:min(254px,65vw); padding-inline:18px; font-size:.9rem }
  .hero-motion-toggle{ width:42px; height:42px }
  .hero-motion-toggle span::before,.hero-motion-toggle span::after{ top:12px }
  .hero-motion-toggle[aria-pressed="true"] span::before{ top:11px }
}
@media (max-width:360px){
  .hero-cta{ min-width:62vw; font-size:.82rem; padding-inline:12px }
  .hero-motion-toggle{ width:38px; height:38px }
  .hero-motion-toggle span::before,.hero-motion-toggle span::after{ top:10px }
  .hero-motion-toggle span::before{ left:14px }
  .hero-motion-toggle span::after{ right:14px }
  .hero-motion-toggle[aria-pressed="true"] span::before{ top:9px; left:14px }
}

/* ---------- 2 und 4: bewusst ruhige, einfarbige Flaechen ---------- */
.plain{ padding-block:clamp(72px,11vw,132px) }
.plain--converge{ overflow:hidden }
.plain-grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(32px,5vw,72px); align-items:center;
  width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad-x);
}

.plain-copy h2{ margin-bottom:22px }
.plain-copy p{ font-size:1.1rem; max-width:44ch }
.plain-figure{ margin:0 }
.plain-figure img{ width:100% }
@media (max-width:900px){ .plain-grid{ grid-template-columns:1fr } }

.duo-head{ width:100%; max-width:var(--wrap); margin:0 auto clamp(34px,5vw,56px); padding-inline:var(--pad-x) }
.duo{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,3.4vw,48px);
  width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad-x);
}
.duo figure{ margin:0 }
.duo img{ width:100%; aspect-ratio:5/3; object-fit:cover; margin-bottom:22px }
.duo h3{ margin-bottom:12px }
.duo p{ font-size:1.05rem; color:var(--ink-2); max-width:40ch }
@media (max-width:820px){ .duo{ grid-template-columns:1fr; gap:48px } }

/* ---------- 5 Bildergalerie ---------- */
/* Schliesst direkt an Karte und Standort an: eine Haarlinie trennt,
   links der Text, rechts ein hohes Foto und zwei gestapelte. */
.gallery-section{ padding-block:0 clamp(72px,11vw,132px) }
.gallery{
  display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,2fr);
  column-gap:clamp(40px,4.4vw,64px);
  width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad-x);
}
.gallery::before{
  content:""; grid-column:1/-1; height:1px; background:var(--line);
  margin-bottom:clamp(28px,3vw,36px);
}
.gallery-copy{ align-self:start; padding-top:clamp(24px,5.4vw,76px) }
.gallery-title{ font-size:clamp(2.6rem,5.4vw,4.4rem); margin-bottom:28px }
.gallery-copy p:not(.label){ font-size:1.1rem; color:var(--ink-2); max-width:32ch; margin-bottom:38px }

.link-arrow{ display:inline-flex; align-items:center; gap:14px; border-bottom-color:var(--accent) }
.link-arrow::after{
  content:""; flex:none; width:22px; height:14px; background:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14'%3E%3Cpath d='M0 7h20M14 1l6 6-6 6' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14'%3E%3Cpath d='M0 7h20M14 1l6 6-6 6' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .2s;
}
.link-arrow:hover::after{ transform:translateX(4px) }

.gallery-mosaic{
  display:grid; grid-template-columns:minmax(0,1.28fr) minmax(0,1fr); grid-template-rows:1fr 1fr;
  gap:clamp(12px,1.4vw,20px);
}
.gallery-tile{ position:relative; margin:0; overflow:hidden; background:var(--bg-warm) }
.gallery-tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.gallery-tile--tall{ grid-column:1; grid-row:1 / span 2; aspect-ratio:27/40 }
.gallery-tile:not(.gallery-tile--tall){ grid-column:2 }
.gallery-tile:nth-child(2) img{ object-position:center 55% }
.js-reveal .gallery-tile.is-in:nth-child(2){ transition-delay:.08s }
.js-reveal .gallery-tile.is-in:nth-child(3){ transition-delay:.16s }

@media (max-width:900px){
  .gallery{ grid-template-columns:1fr }
  .gallery-copy{ padding-top:0; margin-bottom:clamp(36px,6vw,48px) }
  .gallery-copy p:not(.label){ max-width:44ch }
}
@media (max-width:560px){
  .gallery-mosaic{ grid-template-columns:1fr 1fr; grid-template-rows:auto }
  .gallery-tile--tall{ grid-column:1 / -1; grid-row:auto; aspect-ratio:4/5 }
  .gallery-tile:not(.gallery-tile--tall){ grid-column:auto; aspect-ratio:1 }
}

/* ---------- 3 Farbblock ---------- */
/* Unscharfes Foto aus dem Cafe traegt die Flaeche. Die Unschaerfe ist ins
   Bild eingerechnet (blur 14px, saturate 1.08), damit das Handy keinen Filter rechnet.
   Der Schleier ist dunkel und warm, damit das Bild sichtbar bleibt
   und der Text trotzdem sicher lesbar ist. */
.block-photo{
  position:relative; isolation:isolate; overflow:hidden;
  background:#2E120C; color:var(--on-accent); padding-block:clamp(80px,13vw,168px);
}
.block-media{ position:absolute; inset:0; z-index:-1 }
.block-media img{
  width:100%; height:100%; object-fit:cover; object-position:center 45%;
  transform:scale(1.1);
}
.block-media::after{ content:""; position:absolute; inset:0; background:rgba(46,18,12,.56) }
.block-photo .inner{ width:100%; max-width:1000px; margin-inline:auto; padding-inline:var(--pad-x) }
.block-photo .label{ color:rgba(255,246,236,.92) }
.block-photo h2{ color:var(--on-accent); margin-bottom:24px; max-width:18ch }
.block-photo p{ color:rgba(255,246,236,.94); font-size:1.15rem; max-width:52ch }
.block-photo .actions{ margin-top:32px }

/* ---------- Speisekarte ---------- */
.karte-page{
  padding-block:calc(var(--head-h) + clamp(44px,6.5vw,84px)) clamp(64px,9vw,110px);
  overflow-x:clip;
}
.karte-head{
  position:relative; width:100%; max-width:var(--wrap); margin:0 auto clamp(30px,4.4vw,48px); padding-inline:var(--pad-x);
}
.karte-head p{ position:relative; font-size:1.1rem; color:var(--ink-2); max-width:52ch; margin-top:18px }
/* Zutaten rechts neben der Ueberschrift, als ein Bild */
.karte-decor{
  position:absolute; right:calc(var(--pad-x) - 16px); top:-25px; width:min(43.3%,589px); height:auto;
  pointer-events:none;
}
@media (max-width:900px){ .karte-decor{ display:none } }
.karte-body{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad-x) }

/* ---------- Favoriten: endlose, selbst laufende Linie ----------
   Ohne JavaScript oder bei reduzierter Bewegung bleibt es eine
   waagerecht scrollbare Reihe mit Einrasten. */
.favs{ position:relative; margin-bottom:clamp(36px,5vw,64px) }
.favs-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
  width:100%; max-width:var(--wrap); margin:0 auto 22px; padding-inline:var(--pad-x);
}
.favs-head .label{ margin-bottom:10px }
.favs-title{ font-size:clamp(1.9rem,3.2vw,2.6rem); line-height:.95 }
.favs-nav{ display:flex; gap:8px }
.favs-nav[hidden]{ display:none }
.favs-btn{
  position:relative; width:46px; height:46px; padding:0; cursor:pointer;
  border:1px solid var(--line); background:transparent; color:var(--ink);
  transition:border-color .18s, background-color .18s, color .18s, opacity .18s, transform .18s;
}
.favs-btn:hover:not(:disabled){ background:var(--ink); border-color:var(--ink); color:var(--bg) }
.favs-btn:active:not(:disabled){ transform:translateY(1px) }
.favs-btn:disabled{ opacity:.35; cursor:default }
.favs-btn span{
  position:absolute; left:50%; top:50%; width:10px; height:10px;
  border-top:2px solid currentColor; border-left:2px solid currentColor;
}
.favs-btn--prev span{ transform:translate(-30%,-50%) rotate(-45deg) }
.favs-btn--next span{ transform:translate(-70%,-50%) rotate(135deg) }

.favs-rail{
  --favs-inset:max(var(--pad-x), calc((100% - var(--wrap)) / 2 + var(--pad-x)));
  --favs-gap:16px;
  overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none;
  scroll-snap-type:x mandatory; scroll-padding-inline:var(--favs-inset);
}
.favs-rail::-webkit-scrollbar{ display:none }
.favs-track{
  display:flex; gap:var(--favs-gap); width:max-content;
  margin:0; padding:4px var(--favs-inset) 14px; list-style:none;
}
.favs-rail.is-active{
  overflow:hidden; scroll-snap-type:none; cursor:grab; touch-action:pan-y;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 3.5%,#000 96.5%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 3.5%,#000 96.5%,transparent 100%);
}
.favs-rail.is-active .favs-track{ padding-inline:0; will-change:transform }
.favs-rail[data-dragging="true"]{ cursor:grabbing; -webkit-user-select:none; user-select:none }
.favs-rail img{ -webkit-user-drag:none }

.fav-card{ flex:0 0 clamp(252px,23vw,312px); scroll-snap-align:start }
.fav-card a{
  display:flex; flex-direction:column; height:100%;
  color:var(--ink); text-decoration:none; background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line-soft);
  transition:box-shadow .3s, transform .3s cubic-bezier(.16,1,.3,1);
}
.fav-card a:focus-visible{ outline:3px solid var(--accent-ink); outline-offset:-3px }
/* Getraenk mit Zutaten als ein fertiges Bild */
.fav-media{ display:block; overflow:hidden; aspect-ratio:1/1.04; background:var(--bg-warm) }
.fav-media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.16,1,.3,1) }
.fav-card a:hover{ box-shadow:inset 0 0 0 1px var(--line), 0 18px 34px rgba(20,48,60,.14); transform:translateY(-3px) }
.fav-card a:hover .fav-media img{ transform:scale(1.03) }
.fav-info{ display:grid; gap:5px; padding:16px 18px 18px; margin-top:auto }
.fav-cat{ font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2) }
.fav-name{ font-family:"Marcellus",Georgia,serif; font-size:clamp(1.3rem,1.7vw,1.5rem); line-height:1.05 }
.fav-meta{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-height:28px; font-size:.9rem; line-height:1.3; color:var(--ink-2);
}
.fav-meta b{
  flex:none; padding:4px 9px; background:var(--accent); color:var(--on-accent);
  font-size:.86rem; font-variant-numeric:tabular-nums;
}

/* ---------- Kategorien ---------- */
/* Die Leiste klebt jetzt als Ganzes, damit die Pfeile daneben liegen koennen. */
.chips-bar{ position:sticky; top:var(--head-h); z-index:20 }
/* Weiche Kante, damit die Chips unter den Pfeilen verschwinden statt abzureissen. */
.chips-bar::before,
.chips-bar::after{
  content:""; position:absolute; top:0; bottom:0; width:74px; z-index:1;
  opacity:0; pointer-events:none; transition:opacity .2s;
}
.chips-bar::before{ left:calc(-1 * var(--pad-x)); background:linear-gradient(90deg, var(--bg) 46%, transparent) }
.chips-bar::after{ right:calc(-1 * var(--pad-x)); background:linear-gradient(270deg, var(--bg) 46%, transparent) }
.chips-bar.kann-links::before{ opacity:1 }
.chips-bar.kann-rechts::after{ opacity:1 }
.chips-arrow{
  position:absolute; top:11px; bottom:11px; z-index:2; width:42px; padding:0; cursor:pointer;
  display:grid; place-items:center;
  border:1px solid var(--line); background:var(--bg); color:var(--ink);
  transition:background-color .18s, border-color .18s, color .18s, opacity .18s;
}
.chips-arrow[hidden]{ display:none }
.chips-arrow:hover:not(:disabled){ background:var(--ink); border-color:var(--ink); color:var(--bg) }
.chips-arrow:active:not(:disabled){ transform:translateY(1px) }
.chips-arrow:disabled{ opacity:.3; cursor:default }
.chips-arrow span{
  width:9px; height:9px; border-top:2px solid currentColor; border-left:2px solid currentColor;
}
.chips-arrow--prev{ left:calc(-1 * var(--pad-x)) }
.chips-arrow--prev span{ transform:translateX(2px) rotate(-45deg) }
.chips-arrow--next{ right:calc(-1 * var(--pad-x)) }
.chips-arrow--next span{ transform:translateX(-2px) rotate(135deg) }
@media (max-width:560px){
  .chips-arrow{ width:34px }
  .chips-bar::before, .chips-bar::after{ width:52px }
}

.chips{
  display:flex; gap:8px; margin:0 calc(-1 * var(--pad-x)); padding:12px var(--pad-x);
  overflow-x:auto; scrollbar-width:none;
  background:var(--bg);
  /* Flaeche ueber die volle Fensterbreite, oben und unten bleibt sie buendig */
  box-shadow:0 0 0 100vmax var(--bg);
  clip-path:inset(0 -100vmax);
}
.chips::-webkit-scrollbar{ display:none }
.chip{
  flex:none; font:inherit; font-size:.9rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  padding:10px 18px; border:1px solid var(--line); background:transparent; color:var(--ink-2); cursor:pointer;
  transition:background-color .18s, color .18s, border-color .18s, transform .18s;
}
.chip:hover{ color:var(--ink); border-color:var(--ink) }
.chip:active{ transform:translateY(1px) }
.chip[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent); color:var(--on-accent) }

/* ---------- Uebersicht: der Einstieg in die Karte ----------
   Die Karte oeffnet mit allen Kategorien als Kacheln. Erst ein Klick zeigt
   eine Kategorie. Ohne JavaScript bleibt die vollstaendige Liste sichtbar. */
.js-karte #karten-liste > .cat-block{ display:none }
.js-karte #karten-liste > .cat-block.is-offen{ display:block }
.uebersicht.is-aus{ display:none }
.uebersicht{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(212px,1fr));
  gap:clamp(12px,1.5vw,20px); padding-top:clamp(26px,3.6vw,44px);
}
.ue-card{
  display:flex; flex-direction:column; text-decoration:none; color:var(--ink);
  background:color-mix(in srgb,var(--wash) 48%,var(--surface));
  border:1px solid var(--line-soft);
  transition:transform .22s cubic-bezier(.16,1,.3,1), box-shadow .22s, border-color .22s;
}
.ue-card:hover,
.ue-card:focus-visible{
  transform:translateY(-4px); box-shadow:0 18px 34px rgba(20,48,60,.16); border-color:var(--line);
}
.ue-media{ display:grid; place-items:center; aspect-ratio:1/1; overflow:hidden }
.ue-media img{ width:100%; height:100%; object-fit:cover }
.ue-card--stage .ue-media img{ width:auto; height:92%; object-fit:contain }
.ue-body{
  display:flex; flex-direction:column; gap:5px; padding:14px 16px 16px;
  background:var(--surface); border-top:1px solid var(--line-soft);
}
.ue-name{ font-family:"Marcellus",Georgia,serif; font-size:1.18rem; line-height:1.15 }
.ue-meta{ font-size:.74rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-2) }
@media (max-width:560px){
  .uebersicht{ grid-template-columns:repeat(2,1fr); gap:10px; padding-top:22px }
  .ue-body{ padding:11px 12px 13px }
  .ue-name{ font-size:1rem }
  .ue-meta{ font-size:.68rem }
}

.cat-block{ position:relative; padding-top:clamp(60px,7.5vw,104px); scroll-margin-top:calc(var(--head-h) + 64px) }
/* Weicher Farbschleier in der Farbe der Kategorie, ueber die ganze Breite */
.cat-block::before{
  content:""; position:absolute; z-index:-1; left:50%; top:0;
  width:100vw; height:clamp(460px,52vw,720px); transform:translateX(-50%);
  background:
    radial-gradient(70% 90% at 50% 0%,color-mix(in srgb,var(--wash) 70%,transparent) 0%,transparent 72%);
  pointer-events:none;
}
.cat-head{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.12fr); align-items:center;
  gap:clamp(28px,4.4vw,72px); margin-bottom:clamp(26px,3.4vw,40px);
}
.cat-block:nth-child(even) .cat-visual{ order:-1 }
.cat-title{ font-size:clamp(2.3rem,4.3vw,3.5rem); line-height:.95; margin:0 0 16px }
.cat-lead{ margin:0; font-size:1.1rem; line-height:1.5; color:var(--ink-2); max-width:42ch }
.cat-facts{ display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 0; padding:0; list-style:none }
.cat-facts li{
  font-size:.76rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:7px 12px; border:1px solid var(--line); background:rgba(252,248,238,.66); color:var(--ink);
}
.cat-snap{
  width:min(300px,74%); aspect-ratio:4/3; margin:30px 0 0; overflow:hidden;
  box-shadow:0 20px 40px rgba(20,48,60,.16);
}
.cat-snap img{ width:100%; height:100%; object-fit:cover }
/* Kategoriebild: Bogen, Getraenk und Zutaten freigestellt, ohne Flaeche dahinter */
.cat-stage{ display:flex; justify-content:center; height:clamp(320px,36vw,500px) }
.cat-stage img{ width:auto; height:100%; max-width:100%; object-fit:contain }
/* Fotokategorien: ein grosses Querformat, ein Hochformat im Rahmen darueber */
.cat-photos{ position:relative; margin-bottom:clamp(44px,5.5vw,76px) }
.cat-photos figure{ margin:0; overflow:hidden; background:var(--bg-warm) }
.cat-photos figure:first-child{ aspect-ratio:16/11 }
.cat-photos figure:nth-child(2){
  position:absolute; left:-5%; bottom:calc(-1 * clamp(44px,5.5vw,76px)); width:36%; aspect-ratio:4/5;
  border:6px solid var(--surface); box-shadow:0 22px 44px rgba(20,48,60,.22);
}
.cat-block:nth-child(even) .cat-photos figure:nth-child(2){ left:auto; right:-5% }
/* Liegt das Motiv links im Bild, sitzt das kleine Foto rechts */
.cat-photos--flip figure:nth-child(2){ left:auto; right:-5% }
.cat-photos img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s cubic-bezier(.16,1,.3,1) }
.cat-photos figure:hover img{ transform:scale(1.04) }

/* Die Trennlinien sitzen an den Karten selbst. Bleiben in der letzten
   Reihe Zellen frei, sind sie unsichtbar statt als Kasten sichtbar. */
.menu-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:0;
  border-top:1px solid var(--line-soft); border-left:1px solid var(--line-soft);
}
.menu-sub{
  grid-column:1/-1; margin:0; padding:14px 26px 12px;
  font-family:"Karla",sans-serif; font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-2); background:rgba(233,218,193,.45);
  border-right:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
}
.item{
  background:rgba(242,232,215,.72); padding:22px 26px; display:flex; flex-direction:column; gap:6px;
  border-right:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
  transition:background-color .18s, box-shadow .18s;
}
.item:hover{ background:var(--surface); box-shadow:inset 3px 0 0 var(--accent) }
.item-top{ display:flex; align-items:baseline; gap:12px }
.item-top h3{ margin:0; font-size:1.16rem; flex:1; line-height:1.2 }
.item-no{
  flex:none; align-self:center; display:grid; place-items:center; min-width:24px; height:24px; padding:0 5px;
  background:var(--ink); color:var(--bg); font-size:.74rem; font-weight:700; font-variant-numeric:tabular-nums;
}
.price{ font-weight:700; font-size:1rem; font-variant-numeric:tabular-nums; color:var(--accent-ink); white-space:nowrap }
.item p{ margin:0; font-size:.96rem; color:var(--ink-2); line-height:1.45 }
/* Preise nach Bechergroesse, wie auf den Tafeln im Laden */
.item .sizes{ display:flex; flex-wrap:wrap; gap:2px 18px; font-size:.86rem }
.sizes b{ margin-left:5px; font-size:1rem; color:var(--accent-ink); font-variant-numeric:tabular-nums }
.item[id]{ scroll-margin-top:calc(var(--head-h) + 84px) }
.item:target{ background:var(--surface); box-shadow:inset 4px 0 0 var(--accent) }

@media (max-width:820px){
  .cat-head{ grid-template-columns:1fr; gap:26px }
  .cat-block:nth-child(even) .cat-visual,
  .cat-visual{ order:-1 }
  .cat-stage{ height:min(92vw,460px) }
  .cat-photos{ margin-inline:calc(-1 * var(--pad-x)); margin-bottom:52px }
  .cat-photos figure:nth-child(2),
  .cat-block:nth-child(even) .cat-photos figure:nth-child(2){ left:auto; right:var(--pad-x); bottom:-52px; width:38% }
  .cat-snap{ width:min(260px,64%) }
}
@media (max-width:720px){
  .fav-card{ flex-basis:74vw }
  .favs-btn{ width:40px; height:40px }
  .favs-rail{ --favs-gap:12px }
  .menu-grid{ grid-template-columns:1fr }
  .item{ padding:18px 20px }
  .menu-sub{ padding-inline:20px }
}
@media (prefers-reduced-motion: reduce){
  .favs-rail{ scroll-behavior:auto }
  .fav-card a,.fav-card a:hover{ transform:none }
  :is(.fav-media img,.cat-photos img){ transition:none }
  .fav-card a:hover .fav-media img{ transform:none }
}

.badges{ display:flex; flex-wrap:wrap; gap:10px; margin-top:44px; list-style:none; padding:0 }
.badges li{
  font-size:.9rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  color:var(--ink-2); border:1px solid var(--line); padding:9px 18px;
}

/* ---------- Google-Rezensionen ---------- */
.reviews-section{
  overflow:hidden; padding-block:clamp(76px,9vw,116px);
  background:var(--navy); color:var(--on-navy);
}
.reviews-shell{
  width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad-x);
}
.reviews-header{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:clamp(36px,6vw,88px);
}
.reviews-header .label{ color:var(--accent-on-navy) }
.reviews-header h2{ color:var(--on-navy) }
.reviews-intro{
  max-width:54ch; margin:18px 0 0; color:var(--on-navy-2); font-size:.95rem;
}
.reviews-rating{
  display:grid; grid-template-columns:auto auto; align-items:baseline; column-gap:14px;
  min-width:max-content; color:var(--on-navy); text-decoration:none;
}
.reviews-rating strong{
  font-family:"Marcellus",Georgia,serif; font-size:clamp(2.8rem,4.2vw,3.5rem);
  font-weight:400; line-height:1; font-variant-numeric:tabular-nums;
}
.rating-stars{
  display:inline-block; letter-spacing:.11em;
  background:linear-gradient(90deg,var(--accent-on-navy) 0 98%,rgba(242,232,215,.28) 98% 100%);
  background-clip:text; color:transparent;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.reviews-rating small{
  grid-column:1/-1; color:var(--on-navy-2); font-size:.76rem; text-align:right;
}
.reviews-section :focus-visible{ outline-color:var(--accent-on-navy) }

/* Ohne JavaScript bleibt die Linie horizontal scrollbar. Erst die aktive
   Variante blendet den Scrollbalken aus und laeuft automatisch. */
.review-marquee{
  --marquee-gap:16px;
  width:100%; margin-top:clamp(42px,5vw,58px); overflow-x:auto;
  touch-action:auto; scrollbar-width:thin; scrollbar-color:var(--accent-on-navy) transparent;
}
.review-marquee.is-active{
  overflow:hidden; cursor:grab; touch-action:pan-y; scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
}
.review-marquee.is-active::-webkit-scrollbar{ display:none }
.review-marquee[data-dragging="true"]{ cursor:grabbing; user-select:none }
.review-marquee-track{
  display:flex; gap:var(--marquee-gap); width:max-content; padding-block:4px 10px;
}
.review-marquee.is-active .review-marquee-track{ will-change:transform }
.review-group{ display:flex; flex-shrink:0; gap:var(--marquee-gap) }
.review-card{
  display:flex; flex:0 0 clamp(292px,24vw,348px); flex-direction:column;
  min-height:218px; margin:0; padding:25px 26px 23px;
  border-top:3px solid var(--accent); background:var(--surface); color:var(--ink);
}
.review-card p{
  margin:0; font-family:"Marcellus",Georgia,serif;
  font-size:clamp(1.08rem,1.45vw,1.27rem); line-height:1.3;
}
.review-card footer{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin-top:auto; padding-top:24px; color:var(--ink-2); font-size:.7rem;
}
.review-card footer strong{ color:var(--ink); font-size:.78rem }
.review-card footer span{ text-align:right }
.reviews-actions{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:18px 28px; margin-top:26px;
}
.review-motion-toggle{
  border:0; border-bottom:1px solid currentColor; background:transparent;
  color:var(--on-navy-2); padding:0 0 3px; font:inherit; font-size:.78rem;
  font-weight:700; letter-spacing:.03em; text-transform:uppercase; cursor:pointer;
}
.review-motion-toggle:hover{ color:var(--on-navy) }
.reviews-link{ color:var(--on-navy) }

@media (max-width:900px){
  .reviews-header{ align-items:flex-start; flex-direction:column; gap:30px }
  .reviews-rating small{ text-align:left }
  .review-marquee{ --marquee-gap:12px }
  .review-marquee.is-active{ -webkit-mask-image:none; mask-image:none }
  .review-card{ flex-basis:min(72vw,300px); min-height:196px; padding:22px }
}
@media (max-width:560px){
  .review-card{ flex-basis:min(78vw,286px); min-height:190px; padding:20px }
  .review-card footer{ align-items:flex-start; flex-direction:column; gap:3px; padding-top:20px }
  .review-card footer span{ text-align:left }
  .reviews-actions{ align-items:flex-start; flex-direction:column-reverse }
}

/* ---------- Fusszeile ---------- */
.site-footer{
  background:var(--navy); color:var(--on-navy);
  border-top:4px solid var(--accent);
  padding-block:clamp(52px,7vw,80px) 32px;
}

/* Kopf der Fusszeile: Marke, Claim, Betriebsstatus */
.foot-top{
  width:100%; max-width:var(--wrap); margin:0 auto clamp(44px,6vw,72px);
  padding-inline:var(--pad-x); text-align:center;
}
.foot-mark{ position:relative; display:inline-block; line-height:0 }

.foot-claim{
  font-family:"Marcellus",Georgia,serif; font-size:clamp(1.5rem,3vw,2.2rem);
  line-height:1.15; margin:26px 0 0; color:var(--on-navy);
}
.foot-status{
  display:inline-flex; align-items:center; gap:9px; margin:18px 0 0;
  font-size:.95rem; color:var(--on-navy-2);
}
.foot-status .dot{ width:8px; height:8px; background:var(--on-navy-2); flex:none }
.foot-status.is-open .dot{ background:#5FBF7A }

/* Instagram und Facebook direkt unter dem Logo, als helle Flaechen auf dem
   dunklen Grund. So sind sie das Erste, was im Fuss auffaellt. */
.foot-social{
  display:flex; flex-wrap:wrap; justify-content:center; gap:14px;
  margin:28px 0 0; padding:0; list-style:none;
}
.foot-social a{
  display:inline-flex; align-items:center; gap:11px; padding:13px 24px;
  text-decoration:none; color:var(--navy); background:var(--on-navy);
  border:1px solid var(--on-navy);
  font-size:.92rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  transition:background-color .2s, border-color .2s, color .2s, transform .2s;
}
.foot-social a:hover,
.foot-social a:focus-visible{
  background:var(--accent); border-color:var(--accent); color:var(--on-accent);
  transform:translateY(-2px);
}
.foot-social__icon{ width:22px; height:22px; flex:none; fill:currentColor }
@media (max-width:560px){
  .foot-social{ gap:10px }
  .foot-social a{ flex:1 1 0; justify-content:center; padding:14px 12px; font-size:.86rem }
}

.foot-grid{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:40px;
  width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad-x);
}
.foot-grid h4{
  font-family:"Karla",sans-serif; font-size:.78rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent-on-navy); margin:0 0 18px;
  padding-bottom:12px; border-bottom:1px solid rgba(242,232,215,.16);
}
.foot-grid ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px }
.foot-grid a{ text-decoration:none; font-size:1rem; color:var(--on-navy-2); transition:color .18s }
.foot-grid a:hover{ color:var(--on-navy) }
.foot-grid p{ font-size:1rem; color:var(--on-navy-2); margin:0 }
.foot-address{ line-height:1.6 }
.foot-maps{ margin-top:16px; color:var(--accent-on-navy) }
.wbr{ display:inline-block; width:0 }

/* Oeffnungszeiten gestapelt, damit nichts umbricht */
.hours-list{ margin:0; padding:0 }
.hours-list > div + div{ margin-top:16px }
.hours-list dt{
  font-size:.76rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--on-navy-2); opacity:.75; margin-bottom:4px; white-space:nowrap;
}
.hours-list dd{
  margin:0; font-size:1rem; color:var(--on-navy);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}

.foot-bottom{
  width:100%; max-width:var(--wrap); margin:clamp(44px,6vw,64px) auto 0;
  padding-inline:var(--pad-x); padding-top:24px; border-top:1px solid rgba(242,232,215,.16);
  display:flex; flex-wrap:wrap; gap:14px 28px; justify-content:space-between;
  font-size:.9rem; color:var(--on-navy-2);
}
.foot-legal{ display:flex; gap:24px }
.foot-legal a{ text-decoration:none }
.foot-legal a:hover{ color:var(--on-navy) }
.foot-credit{
  flex-basis:100%; padding-top:8px; text-align:center;
  font-size:.8rem; letter-spacing:.02em; color:var(--on-navy-2);
}

@media (max-width:900px){ .foot-grid{ grid-template-columns:1fr 1fr; gap:36px 32px } }
@media (max-width:560px){ .foot-grid{ grid-template-columns:1fr } }

/* ---------- Rechtsseiten ---------- */
.legal{
  padding-block:calc(var(--head-h) + clamp(40px,6vw,72px)) clamp(56px,8vw,88px);
  max-width:70ch; margin-inline:auto; padding-inline:var(--pad-x);
}
.legal h1{ font-size:clamp(2.1rem,4vw,2.9rem); line-height:1; margin-bottom:20px }
.legal h2{ font-size:1.5rem; margin-top:44px; margin-bottom:12px }
.legal p, .legal li{ font-size:1.05rem; line-height:1.55 }
.legal ul{ padding-left:22px }
.legal address{ font-style:normal; margin-bottom:18px }
.legal mark{
  display:block; background:var(--bg-warm); color:var(--ink);
  border-left:3px solid var(--accent); padding:16px 20px; font-size:1rem;
}
.legal a{ color:var(--accent-ink) }
.back-link{ margin-top:48px }

/* ---------- Bewegung ---------- */
.js-reveal .reveal{ opacity:0; transform:translateY(20px) }
.js-reveal .reveal-from-left:not(.is-in){
  transform:translate3d(clamp(-96px,-9vw,-48px),0,0);
  will-change:transform,opacity;
}
.js-reveal .reveal-from-right:not(.is-in){
  transform:translate3d(clamp(48px,9vw,96px),0,0);
  will-change:transform,opacity;
}
.foot-mark .logo-symbol{ transition:transform .9s cubic-bezier(.16,1,.3,1) }
.js-reveal .foot-mark .logo-symbol{ transform:scale(.82) }
.js-reveal .foot-mark.is-in .logo-symbol{ transform:none }
.js-reveal .reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.js-reveal :is(.reveal-from-left,.reveal-from-right).is-in{
  transition-duration:.9s;
  will-change:auto;
}
@media (prefers-reduced-motion:no-preference){
  .logo-symbol__steam i{ animation:logo-steam 2.8s cubic-bezier(.45,0,.2,1) infinite }
  .logo-symbol__steam i:nth-child(1){ animation-delay:-1.85s }
  .logo-symbol__steam i:nth-child(2){ animation-delay:-.9s }
}
@keyframes logo-steam{
  0%,100%{ opacity:.34; transform:translate3d(0,2.5px,0) scaleY(.9) }
  50%{ opacity:1; transform:translate3d(var(--steam-drift),-2.5px,0) scaleY(1.08) }
}
@media (prefers-reduced-motion: reduce){
  .hero-clock,.hero-palette,.hero-drink-scene,.hero-ingredient,.hero-sparks{ animation:none !important }
  .hero-drink-scene.is-current .hero-sparks{ opacity:1; transform:none }
  .hero-palette{ opacity:0 }
  .hero-palette.is-current{ opacity:1 }
  .hero-drink-scene{ opacity:0; transform:translate3d(-115vw,0,0) }
  .hero-drink-scene.is-current{ opacity:1; transform:none }
  .hero-drink-scene.is-current .hero-ingredient{
    opacity:1; transform:translate3d(var(--x),var(--y),0) scale(var(--s)) rotate(var(--r));
  }
  .hero-motion-toggle{ display:none }
  .review-marquee, .review-marquee.is-active{
    overflow-x:auto; touch-action:auto; cursor:default;
    -webkit-mask-image:none; mask-image:none;
  }
  .logo-symbol__steam i{ animation:none; opacity:.72; transform:none }
  .foot-mark .logo-symbol, .js-reveal .foot-mark .logo-symbol{ transform:none; transition:none }
  .js-reveal .reveal{ opacity:1; transform:none }
  .js-reveal .reveal.is-in{ transition:none }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important }
}