/* Hilda: full-width flavour landscapes, real photography, warm editorial details. */
:root{
  --blue:#154b83;--blue-deep:#123c6a;--blue-soft:#275f96;--blue-ink:#183346;
  --cream:#f5efdf;--cream-2:#fbf7ed;--paper:#fffcf4;
  --gold:#986145;--gold-soft:#c49771;--matcha:#516940;--matcha-soft:#e3e8cf;
  --ink:#303d39;--ink-soft:#60635a;--line:#ddd8c5;
  --shadow:0 24px 60px -34px #203b4f55;--shadow-soft:0 18px 38px -28px #25393044;
}
body::after{opacity:.022}
.site-header{background:#fbf7edee;backdrop-filter:blur(12px);border-color:#dcdcc5}
.header-inner{height:88px;width:min(1440px,92vw)}
.logo-box{background:transparent;box-shadow:none;color:var(--blue);padding:0;min-width:88px}
.logo-word{font-size:2.55rem}.logo-eyebrow{font-size:.58rem}
.site-header.is-scrolled .logo-box{padding:0}
.btn-primary{background:var(--blue);box-shadow:none}
.main-nav a{font-size:.83rem}.main-nav{gap:1.6rem}
.hero{
  --land-base:#eef0d9;--land-one:#e1e8c9;--land-two:#cbd8ad;--land-three:#b5c797;--land-four:#e4dfb8;--flavour-ink:#334f3b;
  min-height:730px;height:calc(100svh - 88px);max-height:990px;
  background:var(--land-base);isolation:isolate;overflow:clip;transition:background-color 1.6s ease;
}
.hero-landscape{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0;overflow-anchor:none}
/* Bänder als eigene HTML-Ebenen (GPU): inset -4% + 8% größere viewBox = exakt dieselbe Abbildung wie vorher,
   die Prozent-Verschiebung entspricht den alten -18/-12 bzw. 24/19 SVG-Einheiten (18/1728, 12/972, 24/1728, 19/972) */
.land-layer{position:absolute;inset:-4%;overflow-anchor:none;animation:landscapeFlowPct 16s ease-in-out -4s infinite alternate}
.land-layer svg{display:block;width:100%;height:100%}
.land-layer.l2{animation-duration:20s;animation-delay:-8s}
.land-layer.l3{animation-duration:18s;animation-delay:-2s}
.land-layer.l4{animation-duration:22s;animation-delay:-10s}
.landscape-band{transition:fill 1.6s ease}
.band-one{fill:var(--land-one)}
.band-two{fill:var(--land-two)}
.band-three{fill:var(--land-three)}
.band-four{fill:var(--land-four)}
.landscape-line{fill:none;stroke:#fff9e7;stroke-width:1.2;opacity:.48}
@keyframes landscapeFlowPct{from{transform:translate(-1.0417%,-1.2346%)}to{transform:translate(1.3889%,1.9547%)}}
/* Unsichtbares wird nicht animiert: Hero außerhalb des Bildschirms und unter dem Lade-Intro pausiert */
.hero.is-offscreen .land-layer,.hero.is-offscreen .cookie-bob,.hero.is-offscreen .hero-scroll span,
html.hilda-intro-active:not(.hilda-intro-revealing) .land-layer{animation-play-state:paused}
.hero-grid{width:100%;padding:2rem 0 4.5rem;pointer-events:none}
.cookie-showcase{pointer-events:none}.cookie-stage-wrap,.cookie-meta,.cookie-dots{pointer-events:auto}
.cookie-stage{width:clamp(340px,34vw,510px)}
.cookie-glow{display:none}
.cookie-bob{position:relative;z-index:1;display:block;width:82%;animation:cookieBob 6.5s ease-in-out infinite}
.cookie-bob .cookie-img{width:100%;animation:none;filter:drop-shadow(0 24px 20px #49372430)}
.cookie-float-img{filter:drop-shadow(0 8px 8px #49372429)}
.cookie-float:nth-child(3),.cookie-float:nth-child(6),.cookie-float:nth-child(8){display:none}
.cookie-float-img{max-width:65px}
.cookie-arrow{width:48px;height:48px;box-shadow:none;background:#fffcf461;border-color:#24472e33;color:var(--flavour-ink);backdrop-filter:none}
.cookie-arrow:hover{box-shadow:none;background:#fffcf4c9}
.cookie-prev{left:-65px}.cookie-next{right:-65px}
.cookie-meta{margin-top:1.4rem;min-height:110px;color:var(--flavour-ink)}
.cookie-kicker{font-size:.64rem;letter-spacing:.21em;color:var(--flavour-ink);margin-bottom:.55rem}
.cookie-name{font-size:clamp(1.7rem,2.6vw,2.5rem);font-weight:500;color:var(--flavour-ink);max-width:660px}
.cookie-sub{font-size:.86rem;color:var(--flavour-ink);opacity:.85}
.cookie-dots{margin-top:.1rem;gap:.35rem}
.cookie-dot{width:44px;height:44px;background:transparent!important;position:relative;transform:none!important;box-shadow:none!important;flex-shrink:0}
.cookie-dot::before{content:"";position:absolute;left:18px;top:18px;width:8px;height:8px;background:var(--flavour-ink);opacity:.28;border-radius:50%;transition:opacity .3s,transform .3s}
.cookie-dot.is-active::before{opacity:1;transform:scale(1.2)}
.cookie-dot.is-active::after{content:"";position:absolute;inset:10px;border:1px solid var(--flavour-ink);border-radius:50%;opacity:.5}
.hero-editorial{position:absolute;z-index:3;left:5.5%;top:21%;max-width:26%}
.hero-location{display:block;font-size:.65rem;letter-spacing:.2em;font-weight:800;color:var(--flavour-ink);margin-bottom:1.6rem}
.hero-editorial h1{font-size:clamp(2.2rem,3.9vw,4.35rem);font-weight:400;line-height:1.08;letter-spacing:-.055em;color:var(--flavour-ink)}
.hero-editorial h1 em{color:inherit;font-weight:400}
.hero-menu-link{display:inline-flex;gap:1.25rem;align-items:center;font-size:.72rem;font-weight:800;color:var(--flavour-ink);padding:.6rem 0;margin-top:1.5rem;border-bottom:1px solid currentColor}
.hero-menu-link span{font-size:1.25rem}
.hero-note{position:absolute;right:5.5%;top:38%;width:19%;z-index:3;color:var(--flavour-ink)}
.hero-note-number{display:block;font-size:.7rem;letter-spacing:.12em;margin-bottom:1.35rem;font-weight:700}
.hero-note-title{font-family:var(--serif);font-size:clamp(1.1rem,1.5vw,1.65rem);line-height:1.3;display:block;margin-bottom:1rem}
.hero-note p{font-size:.78rem;line-height:1.8;max-width:225px}
.hero-handwritten{display:block;font-family:var(--script);font-size:1.45rem;margin-top:2rem;transform:rotate(-6deg)}
.hero-scroll{bottom:1.4rem;width:24px;height:37px;border-width:1px;border-color:var(--flavour-ink)}
.hero-scroll span{background:var(--flavour-ink)}
.awning{background:var(--blue)}
.welcome{background:var(--cream-2);padding:8rem 0}
.welcome::before{content:"";width:560px;height:620px;right:-350px;top:15%;border:75px solid #dce4cc;opacity:.55;border-radius:48% 52% 65% 35%;transform:rotate(22deg)}
.wm-main{border-radius:48% 48% 6px 6px;box-shadow:none}
.wm-main::after{display:none}.wm-main img{aspect-ratio:4/5}
.wm-detail{border:6px solid var(--paper);box-shadow:var(--shadow-soft);width:48%;right:-25px;bottom:3%}
.wm-detail::before,.wm-detail::after{display:none}
.welcome-badges svg{stroke:var(--blue)}
.auswahl{padding:6.5rem 0 7.5rem;background:#e9ecdc;overflow:clip}
.auswahl::before{width:110%;height:130px;top:-92px;left:-5%;border-radius:50%;background:var(--cream-2)}
.cards{gap:1.45rem}.card{background:transparent;border:0;border-radius:0;box-shadow:none;--rot:0deg!important}
.cards .card:hover{transform:translateY(-5px);box-shadow:none}
.card-img{aspect-ratio:4/5;border-radius:100px 100px 5px 5px}
.card:nth-child(2) .card-img img,.card:nth-child(3) .card-img img{object-position:50% 75%}
.card:nth-child(even) .card-img{border-radius:5px 5px 100px 100px}
.card-body{padding:1.3rem .2rem 0;gap:.65rem}.card-body h3{font-size:1.6rem}
.card-body p{font-size:.88rem}.card-tag{font-size:.6rem;background:#fff9e9;border:0;color:#6e482f;padding:.3rem .7rem}
.card-link{color:var(--blue);padding:.55rem 0}.head-deco{color:var(--blue);opacity:.65}
.lotus{background:#204e79}.lotus::before{opacity:.7}
.lotus-media::before{background:linear-gradient(90deg,#204e79 0%,transparent 40%)}
.lotus-media img{height:100%;margin:0;min-height:460px}
.lotus-badge{width:112px;height:112px;top:auto;bottom:1.5rem;right:1.5rem;transform:none;box-shadow:none}
.pause{background-color:#dfe7dd}
.pause-overlay{background:radial-gradient(ellipse 44% 40% at 50% 52%,rgba(2,30,55,.42),rgba(2,30,55,0) 100%),linear-gradient(180deg,rgba(2,30,55,.18),rgba(2,30,55,.38))}
.pause-caps{color:#fff}
.gaeste{background:#fcf8ed}
.quotes blockquote{box-shadow:none;background:transparent;border:0;border-top:1px solid #c8cdbf;border-radius:0;padding:2rem .5rem;--rot:0deg!important}
.quotes blockquote:nth-child(2){margin-top:0}.quotes blockquote:hover{box-shadow:none;transform:translateY(-4px)}
.quotes blockquote::before{display:none}.google-badge{box-shadow:none;background:#eef0df;border:0;border-radius:8px}
.momente{background:#e4e9d9;border:0;padding:6rem 0 5.5rem}
.momente::before{width:120%;height:210px;left:-10%;top:auto;bottom:-160px;background:#f5efdf;border-radius:50%;opacity:1}
.momente .eyebrow-script{font-family:var(--sans);font-size:.66rem;text-transform:uppercase;letter-spacing:.2em;transform:none;margin-bottom:1rem}
.momente-strip::before{background:linear-gradient(90deg,#e4e9d9,transparent)}
.momente-strip::after{background:linear-gradient(270deg,#e4e9d9,transparent)}
.momente-group{gap:1.8rem;padding-right:1.8rem}
.polaroid{padding:0;background:transparent;box-shadow:none;transform:rotate(var(--pr,0deg))}
.polaroid::before{display:none}.polaroid:hover{box-shadow:none;transform:translateY(-6px)}
.polaroid img{width:285px;aspect-ratio:4/5;border-radius:100px 100px 5px 5px}
.polaroid:nth-child(even) img{border-radius:5px 5px 100px 100px}
.polaroid figcaption{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.06em;padding:1rem .2rem;color:var(--blue)}
.standorte{background:var(--cream);padding:6rem 0 7rem}.loc-card{border:0;box-shadow:none;background:var(--paper);border-radius:4px 4px 25px 25px}
.loc-card:hover{box-shadow:none}.loc-card::before{height:9px}.loc-card::after{top:9px}
.to-top{box-shadow:none}
@media(min-width:1700px){.hero-editorial{left:8%}.hero-note{right:8%}.hero-grid{padding-bottom:5rem}.cookie-stage{width:550px}}
@media(max-width:1100px){.hero-editorial{left:4%;max-width:25%;top:24%}.hero-note{right:3%;width:20%}.hero-editorial h1{font-size:2.65rem}.cookie-stage{width:350px}.cookie-prev{left:-36px}.cookie-next{right:-36px}.hero-note p{font-size:.73rem}.hero-handwritten{font-size:1.2rem}.main-nav{gap:1rem}}
@media(max-width:880px){
  .header-inner{height:74px}.hero{height:auto;min-height:850px;max-height:none;padding:230px 0 30px;align-items:flex-start}
  .hero-editorial{left:0;right:0;top:35px;max-width:none;text-align:center}.hero-location{margin-bottom:.7rem;font-size:.59rem}
  .hero-editorial h1{font-size:2.5rem;line-height:1.1;letter-spacing:-.045em}.hero-editorial h1 br:last-child{display:none}
  .hero-menu-link{margin-top:.6rem;font-size:.67rem;padding:.35rem 0}.hero-note{display:none}
  .hero-grid{padding:1rem 0 3rem}.cookie-stage{width:min(62vw,370px)}
  .cookie-stage-wrap{width:auto}.cookie-prev{left:-43px}.cookie-next{right:-43px}
  .cookie-meta{margin-top:2rem;min-height:96px}.cookie-name{font-size:1.9rem;max-width:85vw}.cookie-sub{font-size:.8rem}
  .cookie-float-img{max-width:48px}.cookie-arrow{width:44px;height:44px}.hero-scroll{bottom:1.1rem}
  .welcome{padding:5.5rem 0}.auswahl{padding:5rem 0}.cards{gap:2rem 1.2rem}.card-img{border-radius:80px 80px 4px 4px}
  .card:nth-child(even) .card-img{border-radius:4px 4px 80px 80px}.polaroid img{width:225px}
}
@media(max-width:480px){.hero{min-height:740px;padding-top:215px}.hero-editorial{top:27px}.hero-editorial h1{font-size:2.18rem}.cookie-stage{width:65vw}.cookie-meta{margin-top:1.7rem}.cookie-name{font-size:1.7rem}.cookie-float-img{max-width:39px}.cookie-prev{left:-39px}.cookie-next{right:-39px}.hero-grid{padding-bottom:2rem}.hero-scroll{bottom:1.2rem}.card-body h3{font-size:1.4rem}.polaroid img{width:205px}}
@media(prefers-reduced-motion:reduce){.land-layer,.cookie-bob,.landscape-band,.landscape-line{animation:none;will-change:auto}.hero,.landscape-band{transition:none}.hero-scroll span{animation:none}.polaroid:hover,.cards .card:hover{transform:none}}

.cookie-showcase.is-single .cookie-arrow,.cookie-showcase.is-single .cookie-dots{display:none}

/* Touch-Geräte: Header ohne Backdrop-Blur (Header ist ohnehin fast deckend) */
html.is-touch .site-header{-webkit-backdrop-filter:none;backdrop-filter:none;background:#fbf7ed}
html.is-touch .site-header.is-scrolled{background:#f5f1e7}
/* Header schrumpft, ohne die Seite darunter zu verschieben: Höhe und Margin gleichen sich exakt aus
   (88→66 bzw. mobil 74→66). Kein Umbruch der ganzen Seite pro Frame, und der Inhalt bleibt in jedem Browser stehen. */
.site-header{transition:transform .5s var(--ease),box-shadow .4s,background .4s,margin-bottom .45s var(--ease)}
.site-header.is-scrolled{margin-bottom:22px}
@media(max-width:880px){.site-header.is-scrolled{margin-bottom:8px}}
@media(prefers-reduced-motion:reduce){.header-inner{transition:none}}

/* Real Hilda drinks in the existing animated hero. */
.hero-cafe-photo{width:clamp(280px,30vw,430px);aspect-ratio:4/5;margin:0;border-radius:48% 48% 8px 8px;overflow:hidden;box-shadow:var(--shadow);transform:rotate(-3deg)}
.hero-cafe-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 70%}
@media(max-width:880px){.hero-cafe-photo{width:min(65vw,350px)}.hero .cookie-meta{min-height:70px}.hero .cookie-name{font-size:clamp(1.4rem,5vw,2rem)}}

/* Events: Hilda's blue, editorial type and a direct route to the existing shop. */
.events{background:var(--blue);color:var(--cream-2);padding:6rem 0}
.events-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(3rem,7vw,7rem);align-items:center}
.events-label{display:block;font-size:.82rem;font-weight:700;margin-bottom:1.4rem}
.events h2{font-size:clamp(2.8rem,5vw,4.6rem);color:inherit;line-height:1.06;margin-bottom:1.6rem}
.events-copy p{max-width:45ch;font-size:1rem;line-height:1.85;color:#f5f1e7e6}
.events-booking{border-left:1px solid #f5f1e759;padding-left:clamp(2rem,4vw,4rem)}
.events-script{display:block;font-family:var(--script);font-size:2.4rem;line-height:1.2;margin-bottom:1.25rem}
.events h3{font-size:1.65rem;color:inherit;line-height:1.25;margin-bottom:1rem}
.events-booking p{max-width:35ch;font-size:.94rem;line-height:1.85;margin-bottom:1.6rem;color:#f5f1e7e6}
.events-link{letter-spacing:.08em}
.events-link:active{transform:scale(.97)}
.events-link:focus-visible{outline-color:var(--cream-2);outline-offset:5px}
.events-link-note{display:block;font-size:.72rem;margin-top:.85rem;color:#f5f1e7d9}
.footer-events{display:inline-block;margin-top:1rem;border-bottom:1px solid currentColor;padding-bottom:.2rem;transition:color .2s var(--ease)}
.footer-events:hover{color:var(--gold-soft)}
.footer-events:active{transform:translateY(1px)}
@media(min-width:861px) and (max-width:1100px){.header-cta{display:none}}
@media(max-width:700px){.events{padding:4rem 0}.events-layout{grid-template-columns:1fr;gap:2.5rem}.events-booking{border-left:0;border-top:1px solid #f5f1e759;padding:2rem 0 0}.events-copy p,.events-booking p{max-width:100%}.events h2{font-size:clamp(2.7rem,10vw,3.5rem)}}
@media(prefers-reduced-motion:reduce){.events-link,.events-link::before,.events-link .arr,.footer-events{transition:none}}