/* ==========================================================================
   Café Senku · Startseite: Hero „Grübchens Theke“ und schlanke Sektionen
   Gestapelte 2D-Ebenen über dem gemalten Hintergrund. Die Bühne (.h-buehne)
   hat das Seitenverhältnis des Bilds und deckt den Hero ab wie object-fit:
   cover; alle Ebenen stehen in Prozent der Bühne und sitzen damit bei jeder
   Breite auf der Thekenkante. Quer: 16:9-Bild, hoch (unter 760 px oder
   Hochformat): 9:16-Bild mit eigenen Ankern. Werte aus sprites.json
   überschreiben die Vorgaben (--q-… und --h-… per JS).
   ========================================================================== */

/* ---------- Header auf der hellen Theke: leichte helle Fläche hinter Logo und Nav ---------- */
.h-seite .site-header .wrap { padding: 6px 10px 6px 14px; background: rgba(245, 239, 222, 0.7); border-radius: 30px 38px 34px 28px / 34px 28px 38px 30px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.h-seite .site-header .nav a { color: var(--ink); }
@media (max-width: 759px) { .h-seite .site-header .nav a { padding: 6px 4px; } .h-seite .site-header .wrap { padding: 3px 8px 1px 10px; border-radius: 22px 26px 24px 20px / 24px 20px 26px 22px; } .h-seite .site-header .nav { flex-basis: calc(100% + 6px); margin-left: -3px; } }
.h-seite .site-header .nav a:hover { background: rgba(26, 23, 18, 0.07); }

/* ---------- Hero als Größen-Container ---------- */
.h-hero {
  /* svh statt dvh: in Safari wächst dvh beim Einklappen der Leiste und der Hero springt mitten im Scrollen */
  position: relative; height: max(560px, 100svh); overflow: clip; isolation: isolate;
  container-type: size; background: var(--cream); color: var(--ink);
  /* Bühne: Seitenverhältnis, vertikaler Anker (0 oben, 1 unten), Unterkante der Thekenlippe */
  --ar: 1.7844; --anker: 0.56; --lippe: 0.705;
}
.h-hero > * {
  --bw: max(100cqw, 100cqh * var(--ar));
  --bh: calc(var(--bw) / var(--ar));
  --by: calc((100cqh - var(--bh)) * var(--anker) + var(--platz, 0px));
  --vorne: calc(var(--by) + var(--bh) * var(--lippe));
}

.h-buehne {
  position: absolute; left: 50%; top: var(--by); width: var(--bw); height: var(--bh);
  transform: translateX(-50%); transition: top 0.35s var(--ease);
  /* Anker quer in Prozent der Bühne (Vorgaben aus assets/img/hero/sprites.json, JS rechnet sie bei Änderungen neu) */
  --kante: var(--q-kante, 61.5%);
  --g-x: var(--q-g-x, 63%); --g-fuss: var(--q-g-fuss, 73.63%); --g-breite: var(--q-g-breite, 34.75%); --g-schnitt: var(--q-g-schnitt, 58.5%);
  --dose-h: var(--q-dose-h, 24%);
  --luft: var(--j-luft, 4.6%);
}
.h-bild, .h-bild img { position: absolute; inset: 0; width: 100%; height: 100%; }
.h-bild img { object-fit: cover; }

/* ---------- Grübchen ----------
   Die Ebene schneidet die Figur an der hinteren Thekenkante ab (--g-schnitt): Grübchen steht hinter der Theke. */
.h-gruebchen-ebene {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  clip-path: polygon(0 0, 100% 0, 100% var(--c1, var(--g-schnitt)), var(--kx, 50%) var(--c2, var(--g-schnitt)), var(--kx, 50%) var(--c3, var(--g-schnitt)), 0 var(--c4, var(--g-schnitt)));
  transition: clip-path 0.3s var(--ease);
}
.h-gruebchen {
  position: absolute; left: var(--g-pos, var(--g-x)); top: calc(var(--g-fuss) + var(--g-dy, 0%)); width: var(--g-breite); aspect-ratio: 1;
  transform: translate(-50%, -100%) scaleX(var(--g-spiegel, 1)); transition: left 0.9s ease-in-out, top 0.3s var(--ease);
}
/* Laufen: vier Schritte in 0,9 s, Wippen 3 % und Neigung 2 Grad im Wechsel */
.h-gruebchen.geht img { animation: h-gehen 0.45s ease-in-out 2; }
/* Beim Heben setzt hero.js den Versatz Bild für Bild, ohne Übergang */
.h-gruebchen.direkt { transition: left 0.9s ease-in-out; }
@keyframes h-gehen {
  0%, 50%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-3%) rotate(-2deg); }
  75% { transform: translateY(-3%) rotate(2deg); }
}
.h-gruebchen img, .h-gruebchen-form { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; transform-origin: 50% 95%; animation: h-atmen 3.2s ease-in-out infinite alternate; }
.h-gruebchen img:not(.ist-an) { visibility: hidden; }
.h-gruebchen-form { display: none; left: 19%; width: 62%; height: 78%; bottom: 5%; border-radius: var(--blob); background: var(--matcha); box-shadow: inset 0 0 0 3px var(--sumi); }
.h-gruebchen.fehlt .h-gruebchen-form { display: block; }
.h-gruebchen.fehlt img { display: none; }
@keyframes h-atmen { from { transform: scaleY(1); } to { transform: scaleY(1.02); } }

/* ---------- Dosen ---------- */
.h-dosen { position: absolute; inset: 0; z-index: 2; }
.h-dose {
  position: absolute; left: var(--x); top: var(--kante); height: var(--dose-h); aspect-ratio: 688 / 1024;
  padding: 0; border: 0; background: none; cursor: pointer; --skala: 1;
  transform: translate(-50%, -100%) rotate(var(--dreh, 0deg)) scale(var(--skala)); transform-origin: 50% 100%;
  transition: left 0.4s var(--ease), top 0.4s var(--ease), transform 0.4s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
/* Die gezeichneten Dosen haben unten etwa 5 % Luft im Bild (--luft setzt den Dosenboden auf die Kante) */
.h-dose img, .h-dose-form { display: block; transform: translateY(var(--luft)); transition: transform 0.35s var(--ease); }
.h-dose img { width: 100%; height: 100%; max-width: none; }
.h-dose-form { display: none; width: 44%; height: 90%; margin: 5% auto 0; border-radius: 16% / 7%; background: var(--ton, var(--usucha)); box-shadow: inset 0 0 0 2px var(--sumi); }
.h-dose.fehlt img { display: none; }
.h-dose.fehlt .h-dose-form { display: block; }
.h-dose:hover img, .h-dose:hover .h-dose-form, .h-dose:focus-visible img, .h-dose:focus-visible .h-dose-form { transform: translateY(calc(var(--luft) - 8%)); }
/* gewählte Dose hebt sich nicht mehr beim Zeigen, sie gehört jetzt Grübchens Hand */
.h-dose[aria-expanded="true"]:hover img, .h-dose[aria-expanded="true"]:hover .h-dose-form { transform: translateY(var(--luft)); }
.h-dose:focus-visible { outline: none; }
.h-dose:focus-visible::after { content: ""; position: absolute; left: 20%; right: 20%; top: 2%; bottom: -6%; border: 3px solid var(--hanko); border-radius: 14px; }
/* in der erhobenen Faust: Lage und Größe rechnet hero.js aus lift_hand in sprites.json */
.h-dose.ist-gehalten { left: var(--hx); top: var(--hy); --skala: var(--hs, 1); z-index: 3; transition: left 0.5s var(--ease), top 0.5s cubic-bezier(0.3, 1.3, 0.5, 1), transform 0.5s var(--ease); }
/* Dose hängt an der Hand: Lage setzt hero.js Bild für Bild */
.h-dose.haengt { transition: none; }
/* Rückweg: die Dose gleitet aus der Faust auf ihren Platz */
.h-dose.kehrt-zurueck { transition: left 0.45s var(--ease), top 0.45s var(--ease), transform 0.45s var(--ease); }
.h-dose.ist-gehalten img, .h-dose.ist-gehalten .h-dose-form { transform: translateY(var(--luft)); }

/* Standplätze quer (wie im Vorschaubild: fünf links vor Grübchen, drei rechts) */
.h-d1 { --x: var(--q-x, 27%); }
.h-d2 { --x: var(--q-x, 33%); }
.h-d3 { --x: var(--q-x, 39%); }
.h-d4 { --x: var(--q-x, 45%); }
.h-d5 { --x: var(--q-x, 51%); }
.h-d6 { --x: var(--q-x, 74%); }
.h-d7 { --x: var(--q-x, 80%); }
.h-d8 { --x: var(--q-x, 86%); }

/* Platzhalterfarben, bis die gezeichneten Dosen da sind (Töne aus dosen.json) */
.h-ton-iced-matcha-latte { --ton: #8fb06a; }
.h-ton-kefir-strawberry { --ton: #e7a3a8; }
.h-ton-iced-ube-latte { --ton: #a68cc4; }
.h-ton-iced-latte { --ton: #a8774a; }
.h-ton-coco-cloud-matcha { --ton: #b9cf94; }
.h-ton-matcha-lemonade { --ton: #c9d77a; }
.h-ton-iced-hojicha-latte { --ton: #b98a62; }
.h-ton-tokyo-fog { --ton: #b7aba0; }

/* ---------- Text auf der Thekenfront ---------- */
.h-text { position: absolute; z-index: 4; left: max(var(--gutter), (100% - var(--wrap)) / 2); right: var(--gutter); top: calc(var(--vorne) + 1.6cqh); max-width: 920px; transition: top 0.35s var(--ease); }
.h-text h1 { font-size: clamp(32px, 3.9vw, 62px); color: var(--deep); letter-spacing: -0.02em; text-wrap: balance; }
.h-adresse { margin: 8px 0 18px; font-size: clamp(16px, 1.3vw, 19px); color: var(--ink-soft); }

/* ---------- Info-Karte ---------- */
/* Sprechblase: Lage, Breite, Zipfel und Ursprung der Animation setzt hero.js (in px relativ zum Hero) */
.h-karte {
  position: absolute; z-index: 6; left: var(--blase-x, 16px); top: var(--blase-y, 100px); width: var(--blase-w, min(380px, calc(100% - 32px)));
  display: grid; gap: 6px; justify-items: start; padding: 18px 22px 20px;
  background: var(--cream); border: 2px solid var(--sumi); border-radius: 34px 40px 36px 30px / 36px 30px 40px 34px;
  transform-origin: var(--ox, 50%) var(--oy, 100%);
}
.h-karte[hidden] { display: none; }
.h-hero.h-sofort .h-buehne, .h-hero.h-sofort .h-text { transition: none; }
.h-karte.ist-auf { animation: h-blase-auf 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.h-karte.ist-zu { animation: h-blase-zu 0.2s ease-in both; }
@keyframes h-blase-auf { from { opacity: 0; scale: 0.2; } to { opacity: 1; scale: 1; } }
@keyframes h-blase-zu { from { opacity: 1; scale: 1; } to { opacity: 0; scale: 0.2; } }
/* Zipfel: gedrehtes Quadrat auf der Kante, die innere Hälfte deckt die Kontur der Blase ab */
.h-zipfel { position: absolute; left: var(--zipfel-x, 50%); top: var(--zipfel-y, 100%); width: 22px; height: 22px; translate: -50% -50%; rotate: 45deg; background: var(--cream); border: 0 solid var(--sumi); }
.h-karte[data-zipfel="links"] .h-zipfel { border-left-width: 2px; border-bottom-width: 2px; }
.h-karte[data-zipfel="rechts"] .h-zipfel { border-top-width: 2px; border-right-width: 2px; }
.h-karte[data-zipfel="unten"] .h-zipfel { border-right-width: 2px; border-bottom-width: 2px; }
.h-karte-kopf { display: flex; align-items: baseline; gap: 4px 16px; flex-wrap: wrap; padding-right: 40px; }
.h-karte-name { font-size: clamp(21px, 2vw, 28px); }
.h-karte-preis { font-family: var(--font-display); font-weight: 500; font-size: clamp(20px, 1.9vw, 26px); color: var(--deep); font-variant-numeric: tabular-nums; }
.h-karte-liefer { font-size: 15px; color: var(--ink-soft); }
.h-karte-liefer a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--usucha); }
.h-karte-liefer a:hover { text-decoration-color: var(--ink); }
.h-karte-liefer a.marke { text-decoration: none; }
.h-karte-logos { display: inline-block; margin-top: 4px; white-space: nowrap; font-size: 17px; }
.h-zu { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; z-index: 1; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50% 46% 52% 48% / 48% 52% 46% 50%; background: var(--cream); color: var(--ink); cursor: pointer; }
.h-zu svg { width: 18px; height: 18px; }
.h-zu:hover { background: var(--foam); }

/* ---------- Hoch: 9:16-Bild, vier Dosen ---------- */
@media (max-width: 759px), (max-aspect-ratio: 1/1) {
  .h-hero { --ar: 0.56; --anker: 0.4; --lippe: 0.475; height: max(600px, 100svh); }
  .h-buehne {
    --kante: var(--h-kante, 43.5%);
    --g-x: var(--h-g-x, 60%); --g-fuss: var(--h-g-fuss, 49.26%); --g-breite: var(--h-g-breite, 60.72%); --g-schnitt: var(--h-g-schnitt, 40%);
    --dose-h: var(--h-dose-h, 13%);
  }
  .h-breit { display: none; }
  .h-text .btn { padding: 14px 20px; font-size: 16px; gap: 8px; }
  .h-d1 { --x: var(--h-x, 16%); }
  .h-d2 { --x: var(--h-x, 30%); }
  .h-d3 { --x: var(--h-x, 44%); }
  .h-d4 { --x: var(--h-x, 82%); }
}

/* ---------- Sektionen der Startseite ---------- */
.h-sektion-titel { margin-bottom: clamp(32px, 4.5vw, 56px); }
.h-weiter { margin-top: clamp(24px, 3vw, 36px); }
.h-besuch-adresse { margin-top: 22px; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; }
.h-besuch-zeile { margin-top: 14px; color: var(--ink-soft); }
.h-besuch-links { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; }

/* ---------- Reduzierte Bewegung: alles steht, Klick wechselt sofort ---------- */
@media (prefers-reduced-motion: reduce) {
  .h-gruebchen-form, .h-gruebchen img, .h-karte, .h-karte.ist-auf, .h-karte.ist-zu { animation: none; }
  .h-buehne, .h-text { transition: none; }
  .h-dose, .h-dose.ist-gehalten, .h-dose-form, .h-dose img, .h-gruebchen, .h-gruebchen-ebene { transition: none; }
}

/* ---------- Frisch gemacht: Text 7, Grübchen mit erhobener Dose 5 ---------- */
.h-frisch-raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.h-frisch .lede { margin-top: 18px; max-width: 52ch; }
.h-frisch-bild { position: relative; isolation: isolate; margin: 0; width: min(100%, 420px); justify-self: center; aspect-ratio: 1; }
.h-frisch-bild::before { content: ""; position: absolute; inset: 14% 2% 2% 4%; z-index: -1; border-radius: 58% 42% 52% 48% / 46% 56% 44% 54%; background: var(--foam); transform: rotate(-6deg); }
.h-frisch-bild img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Dose in der Faust, gleiche Anker wie im Hero (lift_hand x 86,4, y 32,7, Dosenbreite 12 %, Griff bei 62 %) */
.h-frisch-bild .h-frisch-dose { inset: auto; left: 73.38%; top: 9.08%; width: 26.04%; height: auto; }
@media (max-width: 899px) { .h-frisch-raster { grid-template-columns: minmax(0, 1fr); } .h-frisch-bild { width: min(80%, 340px); } }

/* ---------- Ruhige Theke (Unterseiten, data-modus="ruhig"): gleiche Bühne, Grübchen steht und atmet, keine Interaktion ---------- */
.h-theke-ruhig { height: max(320px, 56vh); --anker: 0.2; }
.h-theke-ruhig .h-dose { cursor: default; pointer-events: none; }
.h-mit-theke { padding-top: 0; }
.h-mit-theke .h-theke-ruhig { margin-bottom: clamp(36px, 5vw, 64px); }
/* Triptychon (Bestellen): Bild in der Seitenbreite, Seitenverhältnis fest, Höhe höchstens 64 % des Fensters */
.h-triptychon { position: relative; width: min(100%, calc(64vh * 1.786)); aspect-ratio: 1.786; margin: 0 auto clamp(36px, 5vw, 64px); border-radius: var(--r-l); overflow: hidden; background: #1a1712; }
.h-triptychon picture, .h-triptychon img { position: absolute; inset: 0; width: 100%; height: 100%; }
.h-triptychon img { object-fit: cover; object-position: 50% 50%; }
@media (max-width: 759px), (max-aspect-ratio: 1/1) { .h-triptychon { width: min(100%, calc(60vh * 0.8)); aspect-ratio: 0.8; } }
@media (max-width: 759px), (max-aspect-ratio: 1/1) {
  .h-theke-ruhig { height: max(300px, 46vh); --anker: 0.26; }
}

/* ---------- Was es gibt: acht Dosen nebeneinander, flach ---------- */
.h-karte-reihe { padding: clamp(28px, 2.6vw, 36px) 0; }
.h-reihe-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px 24px; flex-wrap: wrap; }
.h-reihe-kopf h2 { font-size: clamp(30px, 3vw, 42px); }
.h-reihe { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0 24px; }
.h-reihe-dose { display: grid; justify-items: center; gap: 6px; text-decoration: none; color: var(--ink); }
.h-reihe-dose img { width: min(100%, 138px); height: auto; transition: transform 0.35s var(--ease); }
.h-reihe-dose span { font-family: var(--font-display); font-weight: 500; font-size: 15px; line-height: 1.2; text-align: center; text-wrap: balance; }
.h-reihe-dose:hover img { transform: translateY(-4px); }
.h-kat-klein { margin-top: 12px; padding-top: 10px; }
.h-kat-klein a { font-size: clamp(20px, 1.9vw, 26px); }
@media (max-width: 759px) {
  .h-reihe { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .h-reihe::-webkit-scrollbar { display: none; }
  .h-reihe li { flex: 0 0 120px; scroll-snap-align: start; }
  .h-reihe-dose img { width: 114px; }
}

/* ---------- Nach Hause bestellen: Grübchen rennt einmal durch und steht dann mit Tüte unter der Lieferando-Kachel ---------- */
.h-run-sektion { position: relative; overflow: hidden; }
/* Nur die beiden Kacheln, ohne Überschrift: volle Breite, größer (Felix, 23.10.2026) */
.h-run-sektion .bestellen-grid { grid-template-columns: minmax(0, 1fr); }
.h-run-kacheln { position: relative; padding-bottom: 170px; gap: clamp(14px, 1.8vw, 24px); }
.h-run-kacheln .liefer-kachel { min-height: clamp(160px, 17vw, 230px); padding: clamp(24px, 3.4vw, 48px); }
.h-run-kacheln .liefer-logo { height: clamp(34px, 3.8vw, 52px); margin-bottom: 12px; }
.h-run-kacheln .liefer-logo--lieferando { --lh: clamp(51px, 5.7vw, 78px); height: var(--lh); margin: calc(var(--lh) / -6) 0 0 calc(var(--lh) / -6); }
.h-run-kacheln .liefer-art { font-size: clamp(15px, 1.4vw, 19px); }
.h-run-kacheln .liefer-pfeil { width: 38px; height: 38px; }
.h-run-steht { --platz: 75%; position: absolute; left: var(--platz); bottom: 6px; height: 150px; width: auto; max-width: none; translate: -50% 0; transform-origin: 50% 100%; animation: h-atmen 3.2s ease-in-out infinite alternate; }
.h-run { position: absolute; inset: 0; pointer-events: none; }
.h-run-laeufer { --gr: 140px; position: absolute; left: calc(-1 * var(--gr) - 40px); bottom: var(--run-boden, 12px); width: var(--gr); height: var(--gr); visibility: hidden; }
.h-run-figur { position: absolute; inset: 0; width: 100%; height: 100%; }
.h-run-linie { position: absolute; right: 78%; height: 2px; border-radius: 2px; background: var(--sumi); opacity: 0; transform-origin: 100% 50%; }
.h-run-l1 { top: 34%; width: 140px; --dl: 0ms; }
.h-run-l2 { top: 44%; width: 90px; --dl: 60ms; right: 72%; }
.h-run-l3 { top: 55%; width: 170px; --dl: 120ms; }
.h-run-l4 { top: 66%; width: 110px; --dl: 180ms; right: 70%; }
.h-run-l5 { top: 76%; width: 70px; --dl: 240ms; right: 66%; }
.h-run-staub { position: absolute; width: 24px; height: auto; opacity: 0; }
.h-run-s1 { left: 22%; bottom: 8%; --dl: 0ms; }
.h-run-s2 { left: 64%; bottom: 6%; --dl: 150ms; }
/* mit JS: erst verstecken, dann laufen lassen, dann stehen */
.h-run-sektion.h-run-bereit .h-run-steht { visibility: hidden; animation: none; }
.h-run-sektion.h-run-laeuft .h-run-laeufer { visibility: visible; animation: h-run-weg 2.2s linear forwards; }
/* durchgelaufen: der Läufer ist rechts aus dem Bild, die Figur mit Tüte hüpft von rechts bis zu ihrem Platz herein */
.h-run-sektion.h-run-laeuft.h-run-steht-da .h-run-laeufer { visibility: hidden; }
.h-run-sektion.h-run-laeuft .h-run-figur { animation: h-run-hopp 0.09s ease-in-out infinite alternate; }
.h-run-sektion.h-run-laeuft .h-run-linie { animation: h-run-strich 0.3s linear var(--dl) infinite; }
.h-run-sektion.h-run-laeuft .h-run-staub { animation: h-run-puff 0.3s ease-out var(--dl) infinite; }
.h-run-sektion.h-run-steht-da .h-run-steht { visibility: visible; animation: h-run-rein 1.2s cubic-bezier(0.25, 0.6, 0.35, 1) both, h-run-huepf 0.2s ease-in-out 6 alternate both, h-atmen 3.2s ease-in-out 1.2s infinite alternate; }
@keyframes h-run-weg { from { left: calc(-1 * var(--gr) - 40px); } to { left: calc(100% + 60px); } }
@keyframes h-run-hopp { from { translate: 0 0; } to { translate: 0 -4px; } }
@keyframes h-run-strich { 0% { opacity: 0; scale: 0.4 1; } 20% { opacity: 0.6; } 100% { opacity: 0; scale: 1 1; translate: -40px 0; } }
@keyframes h-run-puff { 0% { opacity: 0.9; scale: 0.4; } 100% { opacity: 0; scale: 1.3; translate: -14px -6px; } }
@keyframes h-run-rein { from { left: calc(var(--platz) + 70vw); } to { left: var(--platz); } }
@keyframes h-run-huepf { from { translate: -50% 0; } to { translate: -50% -14px; } }
@media (max-width: 759px) {
  .h-run-steht { height: 120px; }
  .h-run-kacheln { padding-bottom: 140px; }
}
@media (max-width: 559px) {
  .h-run-steht { --platz: 50%; }
  .h-run-kacheln .liefer-kachel { min-height: 120px; }
  .h-run-kacheln .liefer-pfeil { width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .h-run-steht { animation: none; }
}