/* ---------------------------------------------------------------------
     Kathi's Kuchenbar
     Composition: Inspo 1-4 (vertical rail, seal badge, Art-Deco display
     type set on arcs and circles, free-floating cut-out food).
     Palette: the Inspo lavender is translated into the real brand world:
     the teal wall of the shop, the gold K and the deep green wordmark.

     Shape rule: photos are arches (full top radius) or cut-outs,
     interactive elements are pills, inputs are 12px. Nothing else rounds.
     --------------------------------------------------------------------- */
  :root{
    --paper:#0F2A28;
    --paper-2:#12322F;
    --panel:#143734;
    --ink:#E4F1EE;
    --ink-soft:#A9C3BE;
    --teal:#2AA6AE;
    --teal-deep:#16646B;
    --teal-night:#0A1F1E;
    --gold:#CDAA6B;
    --gold-text:#D9B878;
    --gold-label:#DCC08A;
    --gold-display:#CDAA6B;
    --line:rgba(228,241,238,.16);
    --shadow:rgba(0,0,0,.45);
    --on-teal:#F2FAF9;
    --error:#F2A08F;

    --rail-w:96px;
    --pad:clamp(20px,5vw,72px);

    --ease-out:cubic-bezier(.16,1,.3,1);
    --ease-in-out:cubic-bezier(.77,0,.175,1);

    --font-display:"Italiana","Didot","Bodoni 72",serif;
    --font-body:"Jost",-apple-system,"Segoe UI",sans-serif;
    color-scheme:dark;
  }

  *,*::before,*::after{box-sizing:border-box}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
  html,body{margin:0;padding:0}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:var(--font-body);
    font-weight:400;
    line-height:1.6;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  /* Clipping decoration must not create a scroll container around sticky content. */
  @supports (overflow:clip){body{overflow-x:clip}}
  img{max-width:100%;height:auto;display:block}
  a{color:inherit}
  h1,h2,h3,p,figure{margin:0}
  ul{list-style:none;margin:0;padding:0}
  :focus-visible{outline:2px solid var(--teal);outline-offset:4px;border-radius:4px}

  .display{font-family:var(--font-display);font-weight:400;text-transform:uppercase;letter-spacing:.02em;line-height:.9}
  .small-caps{font-size:.72rem;text-transform:uppercase;letter-spacing:.2em;font-weight:500}

  /* ------------------------------ Rail ------------------------------ */
  .rail{
    position:fixed;inset:0 auto 0 0;z-index:30;
    width:var(--rail-w);height:100dvh;
    display:flex;flex-direction:column;align-items:center;justify-content:space-between;
    padding:22px 0 28px;
  }
  .seal{position:relative;width:78px;height:78px;display:grid;place-items:center;text-decoration:none}
  .seal svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 28s linear infinite}
  .seal text{font-family:var(--font-body);font-size:10.4px;letter-spacing:.34em;fill:var(--ink);font-weight:500}
  .seal img{width:30px;height:auto}
  @keyframes spin{to{transform:rotate(360deg)}}

  .rail nav{display:flex;flex-direction:column;align-items:center;gap:44px}
  .rail nav a{
    writing-mode:vertical-rl;transform:rotate(180deg);
    text-decoration:none;font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;font-weight:500;
    color:var(--ink-soft);position:relative;padding:4px 2px;transition:color .2s ease;
  }
  .rail nav a::after{
    content:"";position:absolute;left:50%;bottom:-12px;width:4px;height:4px;border-radius:50%;
    background:var(--gold);transform:translateX(-50%) scale(0);transition:transform .3s var(--ease-out);
  }
  .rail nav a:hover,.rail nav a.is-active{color:var(--ink)}
  .rail nav a.is-active::after{transform:translateX(-50%) scale(1)}
  .rail__ig{color:var(--ink);font-size:20px;text-decoration:none;transition:color .2s ease,transform .2s var(--ease-out)}
  .rail__ig:hover{color:var(--teal);transform:translateY(-2px)}

  /* scroll progress on the right edge, as in the Inspos; CSS scroll timeline */
  .progress{position:fixed;top:0;right:0;width:4px;height:100dvh;z-index:30;pointer-events:none}
  .progress::before{content:"";position:absolute;inset:0;background:var(--teal-deep);transform-origin:top;transform:scaleY(.15)}
  @supports (animation-timeline:scroll()){
    .progress::before{animation:grow linear both;animation-timeline:scroll(root)}
    @keyframes grow{from{transform:scaleY(.04)}to{transform:scaleY(1)}}
  }

  main{margin-left:var(--rail-w)}
  section{position:relative;scroll-margin-top:0}

  /* ------------------------------ Hero ------------------------------ */
  .hero{
    min-height:100dvh;display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    align-items:center;gap:0;
    padding:clamp(28px,5vh,64px) var(--pad) clamp(28px,5vh,64px) clamp(16px,3vw,48px);
    overflow:hidden;
  }
  .hero::before{ /* the teal wall of the shop, bleeding off the right edge */
    content:"";position:absolute;top:0;right:0;bottom:0;width:34%;
    background:var(--teal);z-index:0;
  }
  .hero__text{position:relative;z-index:2}
  .hero h1{font-size:clamp(3.6rem,10.5vw,10.4rem);color:var(--ink)}
  .hero h1 .l--brand{color:var(--gold-display)}
  .hero h1 .l{display:block;overflow:hidden;padding-bottom:.04em}
  .hero h1 .l>span{display:block;transition:transform 1s var(--ease-out)}
  .hero h1 .l:nth-child(2)>span{transition-delay:.08s}
  .hero h1 .l:nth-child(3)>span{transition-delay:.16s}
  .hero h1 .l:nth-child(3){padding-left:.9em}
  .js .hero h1 .l>span{transform:translateY(105%)}
  .is-ready .hero h1 .l>span{transform:none}

  .hero__lede{
    margin-top:clamp(28px,4vw,48px);max-width:34ch;
    display:flex;flex-direction:column;align-items:flex-start;gap:22px;
    transition:opacity .8s var(--ease-out) .45s,transform .8s var(--ease-out) .45s;
  }
  .js .hero__lede{opacity:0;transform:translateY(14px)}
  .is-ready .hero__lede{opacity:1;transform:none}
  .hero__lede p{font-size:1.05rem;color:var(--ink-soft)}

  .pill{
    display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
    padding:14px 26px;border-radius:999px;border:0;cursor:pointer;
    background:var(--ink);color:var(--paper);
    font:500 .78rem/1 var(--font-body);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
    transition:background .2s ease,transform .15s var(--ease-out),gap .25s var(--ease-out);
  }
  .pill:hover{background:var(--teal-deep);color:var(--on-teal);gap:14px}
  .pill:active{transform:scale(.97)}

  .hero__stage{position:relative;z-index:1;aspect-ratio:1;width:min(100%,640px);justify-self:end}
  .hero__tart{
    position:absolute;inset:9%;
    filter:drop-shadow(0 40px 50px var(--shadow));
    transition:opacity 1.1s var(--ease-out) .2s,transform 1.4s var(--ease-out) .2s;
  }
  .hero__tart img{width:100%;height:100%;object-fit:contain}
  .js .hero__tart{opacity:0;transform:scale(.9) rotate(-25deg)}
  .is-ready .hero__tart{opacity:1;transform:none}
  @media (prefers-reduced-motion:no-preference){ .hero__tart img{animation:spin 90s linear infinite} }
  .hero__ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:2}
  @media (prefers-reduced-motion:no-preference){ .hero__ring{animation:spin-rev 120s linear infinite} }
  @keyframes spin-rev{to{transform:rotate(-360deg)}}
  .hero__ring text{font-family:var(--font-display);font-size:34px;letter-spacing:.2em;fill:var(--ink)}

  .float{position:absolute;z-index:3;pointer-events:none;filter:drop-shadow(0 16px 18px var(--shadow))}
  .float img{width:100%;height:auto}
  .hero .f-rasp{width:clamp(90px,11vw,170px);right:-4%;bottom:6%;transform:rotate(-12deg)}
  .hero .f-mint{width:clamp(60px,6vw,96px);left:4%;top:4%;transform:rotate(28deg)}

  /* ------------------------------ Karte ------------------------------
     Coffee first. The real bags from the shop stand on the right, still:
     no image swapping, nothing moves while reading prices. */
  .menu{background:var(--teal-deep);color:var(--on-teal);padding:clamp(80px,10vw,140px) var(--pad);overflow:hidden}
  .menu__top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(40px,6vw,96px);align-items:center}
  .menu h2{font-size:clamp(3rem,7vw,6rem)}
  .menu__intro{margin-top:18px;max-width:40ch;opacity:.9;font-size:1.05rem}
  .menu h3{font:500 .74rem/1 var(--font-body);letter-spacing:.24em;text-transform:uppercase;margin-bottom:14px;color:var(--on-teal);opacity:.92}
  .menu ul{margin:0}
  .menu li{display:grid;grid-template-columns:1fr auto;gap:2px 16px;padding:13px 0}
  .menu li+li{border-top:1px solid rgba(242,250,249,.16)}
  .menu .name{font-size:1.05rem;font-weight:500}
  .menu .desc{grid-column:1;font-size:.84rem;opacity:.85}
  .menu .eur{font-variant-numeric:tabular-nums;white-space:nowrap}
  .menu__coffee-list{margin-top:clamp(36px,5vw,56px);max-width:560px}
  .menu__coffee-list .name{font-family:var(--font-display);font-size:clamp(1.5rem,2.2vw,1.9rem);font-weight:400;letter-spacing:.02em;line-height:1.15}
  .menu__coffee-list .eur{font-size:1.1rem;align-self:center}

  .menu__bags{position:relative;justify-self:center;width:min(100%,540px)}
  .bags__stage{position:relative;aspect-ratio:1/1.06}
  .bags__disc{ /* dark tabletop disc; white bags need a dark ground to read */
    position:absolute;left:7%;bottom:0;width:86%;aspect-ratio:1;border-radius:50%;
    background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--teal-night) 70%,var(--teal-deep)) 0%,var(--teal-night) 70%);
    box-shadow:inset 0 0 0 1px rgba(242,250,249,.08),0 50px 80px -40px rgba(4,30,33,.7);
  }
  .bags__ring{position:absolute;left:0;bottom:-7%;width:100%;aspect-ratio:1;overflow:visible}
  .bags__ring text{font-family:var(--font-display);font-size:26px;letter-spacing:.16em;fill:var(--on-teal)}
  @media (prefers-reduced-motion:no-preference){ .bags__ring{animation:spin 50s linear infinite} }
  .bags__coffee{position:absolute;left:9%;bottom:5%;width:82%;height:auto;filter:drop-shadow(0 30px 30px rgba(4,30,33,.55))}
  .menu__bags figcaption{position:relative;margin-top:clamp(40px,5vw,64px);display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-top:1px solid rgba(242,250,249,.24);padding-top:16px}
  .menu__bags figcaption strong{font-family:var(--font-display);font-weight:400;font-size:1.5rem;letter-spacing:.02em}
  .menu__bags figcaption span{font-size:.9rem;opacity:.9;white-space:nowrap}

  .menu__more{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,5vw,80px);margin-top:clamp(64px,8vw,110px);padding-top:clamp(36px,4vw,52px);border-top:1px solid rgba(242,250,249,.24)}
  .menu__note{margin-top:clamp(40px,5vw,64px);font-size:.9rem;opacity:.9;max-width:62ch}

  /* ------------------------------ Lieblingsstücke ------------------------------
     The vitrine: arch photos stand on a teal counter and slide past while the
     page scrolls (desktop: section pins, vertical scroll drives the track;
     phones / reduced motion / no JS: a native swipe row). Cards tip toward
     the centre, the photo inside drifts against the movement. */
  .favs{
    position:relative;background:var(--paper);
    --cap:8.5rem;               /* caption block on the counter */
    --pin-pb:clamp(56px,8vh,84px);
    --card-w:clamp(230px,21vw,330px);
    --head-w:clamp(300px,30vw,460px);
    --gap:clamp(28px,4vw,64px);
  }
  .favs__pin{position:relative;overflow:hidden;padding:clamp(80px,10vw,140px) 0 var(--pin-pb)}
  .favs__wall{position:absolute;left:0;right:0;bottom:0;height:calc(var(--cap) + var(--pin-pb));background:var(--teal);z-index:0}
  .favs__ghost{
    position:absolute;z-index:0;top:clamp(16px,5vh,64px);left:var(--pad);
    font-family:var(--font-display);text-transform:uppercase;white-space:nowrap;
    font-size:clamp(7rem,21vw,21rem);line-height:.8;color:var(--paper-2);
    pointer-events:none;user-select:none;
    transform:translate3d(calc(var(--p,0) * -38%),0,0);will-change:transform;
  }

  .favs__head{position:relative;z-index:1;padding:0 var(--pad);max-width:calc(var(--head-w) + 2 * var(--pad))}
  .favs__eyebrow{color:var(--gold-text);display:flex;align-items:center;gap:12px}
  .favs__eyebrow::before{content:"";width:28px;height:1px;background:currentColor}
  .favs h2{font-size:clamp(3rem,6.4vw,6rem);margin-top:18px}
  .favs h2 .l{display:block;overflow:hidden;padding-bottom:.05em}
  .favs h2 .l>span{display:block;transition:transform 1.1s var(--ease-out)}
  .favs h2 .l:nth-child(2){padding-left:.7em}
  .favs h2 .l:nth-child(2)>span{transition-delay:.1s}
  .js .favs h2 .l>span{transform:translateY(105%)}
  .js .favs.in h2 .l>span{transform:none}
  .favs__lede{margin-top:22px;color:var(--ink-soft);font-size:1.05rem;max-width:32ch}
  .favs__hint{margin-top:26px;display:inline-flex;align-items:center;gap:12px;color:var(--ink)}
  .favs__hint i{font-size:1.2rem}
  @media (prefers-reduced-motion:no-preference){ .favs__hint i{animation:nudge 1.8s var(--ease-in-out) infinite} }
  @keyframes nudge{0%,100%{transform:none}50%{transform:translateX(8px)}}
  .favs__hint .t-swipe{display:none}

  .favs__track{
    position:relative;z-index:1;display:flex;align-items:flex-end;gap:var(--gap);
    margin-top:clamp(48px,6vw,80px);padding:clamp(48px,6vw,72px) var(--pad) 0;
    overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--pad);scrollbar-width:none;
    list-style:none;margin-bottom:0;
  }
  .favs__track::-webkit-scrollbar{display:none}

  .fav{flex:0 0 var(--card-w);scroll-snap-align:center}
  .fav__lift{
    position:relative;transform-origin:50% 100%;
    transform:translate3d(0,calc(var(--ad,0) * 34px),0) rotate(calc(var(--d,0) * var(--tilt,7deg)));
  }
  .fav__no{
    position:absolute;z-index:2;left:-.12em;top:-.62em;
    font-family:var(--font-display);font-size:clamp(3.4rem,5vw,5rem);line-height:1;color:var(--gold-display);
    transition:transform .6s var(--ease-out);
  }
  .fav__arch{
    position:relative;aspect-ratio:3/4;border-radius:999px 999px 0 0;overflow:hidden;
    background:var(--paper-2);box-shadow:0 40px 60px -34px var(--shadow);
    transition:clip-path 1.3s var(--ease-out) calc(var(--i,0) * .09s + .15s);
  }
  .js .fav__arch{clip-path:inset(100% 0 0 0)}
  .js .favs.in .fav__arch{clip-path:inset(0)}
  .fav__arch img{
    width:100%;height:100%;object-fit:cover;
    transform:translate3d(calc(var(--d,0) * -9%),0,0) scale(1.2);
  }
  .fav__price{
    position:absolute;z-index:2;right:-16px;bottom:-26px;
    width:clamp(74px,6.4vw,92px);aspect-ratio:1;border-radius:50%;
    display:grid;place-items:center;align-content:center;
    background:var(--paper);color:var(--ink);
    box-shadow:inset 0 0 0 1px var(--gold),inset 0 0 0 5px var(--paper),inset 0 0 0 6px color-mix(in srgb,var(--gold) 45%,transparent),0 16px 30px -14px var(--shadow);
    font-family:var(--font-display);font-size:clamp(1.25rem,1.7vw,1.6rem);line-height:1;
    transform:rotate(-10deg);transition:transform .7s var(--ease-out);
  }
  .fav__price small{font-family:var(--font-body);font-size:.62rem;letter-spacing:.2em;margin-top:5px}
  .fav.is-current .fav__price{transform:rotate(4deg) scale(1.1)}
  .fav.is-current .fav__no{transform:translateY(-6px)}
  .fav__cap{height:var(--cap);padding:34px 4px 0;color:var(--on-teal)}
  .fav__cap h3{font-family:var(--font-display);font-weight:400;font-size:clamp(1.5rem,2vw,1.85rem);line-height:1.1;letter-spacing:.02em}
  .fav__cap p{margin-top:6px;font-size:.88rem;line-height:1.45;opacity:.88}

  .favs__end{flex:0 0 clamp(240px,22vw,320px);align-self:stretch;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:22px;padding-bottom:calc(var(--cap) + 28px)}
  .favs__end p{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(1.9rem,2.8vw,2.6rem);line-height:1}

  .favs__hud{
    position:absolute;z-index:2;left:var(--pad);right:var(--pad);bottom:calc(var(--pin-pb) / 2 - 8px);
    display:flex;align-items:center;gap:18px;color:var(--on-teal);
    font:500 .75rem/1 var(--font-body);letter-spacing:.2em;font-variant-numeric:tabular-nums;
  }
  .favs__bar{flex:1;max-width:280px;height:1px;background:rgba(242,250,249,.3);position:relative}
  .favs__bar::after{content:"";position:absolute;inset:0;background:var(--on-teal);transform-origin:left;transform:scaleX(var(--p,0))}

  /* Pinned mode (JS sets .favs--pinned unless reduced motion). --pin-top is
     the height of the sticky top bar on phones, 0 on desktop. svh keeps the
     pin steady while mobile browser bars collapse. */
  .favs--pinned .favs__pin{
    position:sticky;top:var(--pin-top,0px);
    height:calc(100vh - var(--pin-top,0px));height:var(--pin-height,calc(100svh - var(--pin-top,0px)));
    padding:0 0 var(--pin-pb);
    display:flex;flex-direction:column;justify-content:flex-end;
  }
  .favs--pinned{--card-w:min(25vw,calc((var(--pin-height,100svh) - var(--cap) - var(--pin-pb) - 150px) * .75))}
  .favs--pinned .favs__head{position:absolute;left:0;bottom:calc(var(--pin-pb) + var(--cap) + 10px)}
  .favs--pinned .favs__head,.favs--pinned .favs__track{will-change:transform}
  .favs--pinned .favs__track{overflow:visible;scroll-snap-type:none;margin-top:0;padding-left:calc(var(--pad) + var(--head-w) + var(--gap) * 1.5)}

  /* ------------------------------ Über uns ------------------------------ */
  .story{padding:clamp(90px,12vw,160px) var(--pad);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(14px,2vw,28px);align-items:center}
  .story__photo{grid-column:1 / 6;position:relative}
  .story__photo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 25%;box-shadow:0 50px 80px -40px var(--shadow)}
  .story__photo::after{ /* teal wall block behind the photo, echoing the hero */
    content:"";position:absolute;z-index:-1;left:clamp(24px,4vw,60px);top:clamp(24px,4vw,60px);right:calc(-1 * clamp(24px,4vw,60px));bottom:calc(-1 * clamp(24px,4vw,60px));
    background:var(--teal);
  }
  .story__text{grid-column:7 / 13}
  .story h2{font-size:clamp(2.8rem,6vw,5.4rem)}
  .story p{margin-top:24px;max-width:44ch;color:var(--ink-soft);font-size:1.05rem}
  .story__sign{display:flex;align-items:center;gap:14px;margin-top:34px;font:500 .78rem/1 var(--font-body);letter-spacing:.2em;text-transform:uppercase}
  .story__sign img{width:44px;height:auto}

  /* ------------------------------ Galerie (bento, 5 cells) ------------------------------ */
  .gallery{padding:0 var(--pad) clamp(90px,11vw,150px)}
  .gallery__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,clamp(200px,22vw,330px));gap:clamp(10px,1.4vw,18px)}
  .gallery figure{position:relative;overflow:hidden;background:var(--paper-2)}
  .gallery figure:first-child{grid-column:span 2;grid-row:span 2}
  .gallery img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-out)}
  .gallery figure:hover img{transform:scale(1.04)}
  .gallery__more{margin-top:28px;display:flex;justify-content:flex-end}
  .ig-link{
    display:inline-flex;align-items:center;gap:10px;padding:10px 0;text-decoration:none;
    font:500 .8rem/1 var(--font-body);letter-spacing:.18em;text-transform:uppercase;color:var(--ink);
    border-bottom:1px solid var(--ink);transition:color .2s ease,border-color .2s ease,gap .25s var(--ease-out);
  }
  .ig-link i{font-size:1.25rem}
  .ig-link:hover{color:var(--teal-deep);border-color:var(--teal-deep);gap:14px}

  /* ------------------------------ Kinderecke ------------------------------ */
  .kids{padding:0 var(--pad) clamp(90px,11vw,150px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(14px,2vw,28px);align-items:end}
  .kids__text{grid-column:1 / 5;padding-bottom:clamp(8px,2vw,24px)}
  .kids h2{font-size:clamp(2.8rem,5.6vw,5rem)}
  .kids p{margin-top:20px;color:var(--ink-soft);font-size:1.05rem;max-width:36ch}
  .kids__photo{grid-column:5 / 13}
  .kids__photo img{width:100%;aspect-ratio:4/3;object-fit:cover;box-shadow:0 50px 80px -40px var(--shadow)}

  /* ------------------------------ Reservierung ------------------------------ */
  .reserve{
    padding:clamp(80px,10vw,140px) var(--pad);background:var(--paper-2);
    display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(14px,2vw,28px);align-items:center;
  }
  .reserve__head{grid-column:1 / 7}
  .reserve__head h2{font-size:clamp(2.8rem,5.6vw,5rem)}
  .reserve__head>p{margin-top:16px;color:var(--ink-soft);max-width:40ch}
  form{margin-top:clamp(28px,4vw,44px);display:grid;gap:18px}
  .row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;min-width:0}
  .row--3{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,.8fr)}
  .field{display:grid;gap:8px;min-width:0}
  .field label{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--ink-soft)}
  .field input,.field textarea{
    font:400 1rem var(--font-body);color:var(--ink);
    background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:13px 15px;
    transition:border-color .15s ease,box-shadow .15s ease;
  }
  .field input::placeholder,.field textarea::placeholder{color:var(--ink-soft);opacity:.8}
  .field input:focus-visible,.field textarea:focus-visible{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 22%,transparent)}
  .field input[aria-invalid="true"]{border-color:var(--error)}
  .field .err{font-size:.8rem;color:var(--error)}
  .field textarea{resize:vertical;min-height:92px}
  .form-note{font-size:.875rem;color:var(--ink-soft)}
  .form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}

  .reserve__photo{grid-column:8 / 13;position:relative}
  .reserve__photo img{width:100%;aspect-ratio:4/5;object-fit:cover;box-shadow:0 50px 80px -40px var(--shadow)}
  .badge{ /* rotating seal, the Inspo 4 ring shrunk to a stamp on the photo corner */
    position:absolute;left:calc(-1 * clamp(40px,5vw,80px));top:calc(-1 * clamp(40px,5vw,80px));
    width:clamp(130px,13vw,190px);aspect-ratio:1;border-radius:50%;
    background:var(--paper);display:grid;place-items:center;box-shadow:0 20px 40px -20px var(--shadow);
  }
  .badge svg{position:absolute;inset:6%;width:88%;height:88%}
  .badge text{font-family:var(--font-display);font-size:11px;letter-spacing:.08em;fill:var(--ink)}
  .badge i{font-size:clamp(26px,2.6vw,36px);color:var(--gold)}
  @media (prefers-reduced-motion:no-preference){ .badge svg{animation:spin 30s linear infinite} }

  /* ------------------------------ Kontakt ------------------------------ */
  .contact{background:var(--teal-night);color:var(--on-teal);padding:clamp(72px,9vw,120px) var(--pad) 36px}
  .contact__top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(36px,6vw,90px);align-items:start}
  .contact h2{font-size:clamp(2.6rem,5.4vw,4.6rem)}
  .contact dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 40px;margin:0}
  .contact dt{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--gold-label);margin-bottom:8px}
  .contact dd{margin:0;font-size:1rem;line-height:1.65}
  .contact a{text-decoration:none;border-bottom:1px solid rgba(242,250,249,.3);transition:border-color .2s ease}
  .contact a:hover{border-color:var(--gold)}
  .todo{opacity:.75;font-size:.85em}
  .todo-ink{text-transform:none;letter-spacing:0}
  .contact__foot{
    margin-top:clamp(60px,8vw,110px);padding-top:24px;border-top:1px solid rgba(242,250,249,.16);
    display:flex;flex-wrap:wrap;gap:16px 28px;justify-content:space-between;align-items:center;font-size:.8rem;opacity:.8
  }

  /* ------------------------------ Reveals ------------------------------ */
  [data-reveal]{transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
  .js [data-reveal]{opacity:0;transform:translateY(24px)}
  .js [data-reveal].in{opacity:1;transform:none}

  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
    .js .hero h1 .l>span,.js .hero__lede,.js .hero__tart,.js [data-reveal],.js .favs h2 .l>span{opacity:1!important;transform:none!important}
    .js .fav__arch{clip-path:none!important}
  }

  /* ------------------------------ Responsive ------------------------------ */
  @media (max-width:1100px) and (min-width:861px){
    .menu__more{grid-template-columns:1fr 1fr}
  }
  @media (max-width:860px){
    :root{--rail-w:0px;--pad:16px}
    .rail{
      position:sticky;top:0;width:100%;height:auto;flex-direction:row;
      padding:10px 16px;background:color-mix(in srgb,var(--paper) 88%,transparent);
      backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    }
    .seal{width:52px;height:52px}
    .seal text{font-size:8.6px}
    .seal img{width:20px}
    .rail nav{flex-direction:row;gap:18px}
    .rail nav a{writing-mode:horizontal-tb;transform:none;letter-spacing:.1em;font-size:.75rem;padding:14px 2px}
    .rail nav a::after{bottom:-6px}
    .rail__ig{display:none}
    .progress{display:none}

    /* Hero: headline and tart share the first screen. Headline drops to two
       lines, the tart is sized by viewport height so it never falls below. */
    .hero{
      grid-template-columns:1fr;min-height:calc(100svh - 72px);
      align-content:center;gap:0;padding:20px 20px 32px;
    }
    .hero::before{display:none}
    .hero h1{font-size:clamp(2.7rem,13vw,4.2rem)}
    .hero h1 .l:nth-child(2),.hero h1 .l:nth-child(3){display:inline-block;vertical-align:top}
    .hero h1 .l:nth-child(3){padding-left:.28em}
    .hero__stage{justify-self:center;width:min(86vw,44svh,420px);margin:22px 0 0;order:1}
    .hero__stage::before{ /* the teal wall becomes a band behind the lower half of the tart */
      content:"";position:absolute;z-index:-1;top:52%;bottom:-8%;left:50%;width:100vw;transform:translateX(-50%);
      background:var(--teal);
    }
    .hero__text{display:contents}
    .hero__lede{order:2;margin-top:clamp(28px,5svh,44px);gap:18px;max-width:none}
    .hero__lede p{font-size:1rem}
    .hero .f-rasp{right:-2%;bottom:0}

    /* One rhythm for every section on phones */
    .menu,.story,.reserve,.contact{padding:64px 20px}
    .gallery{padding:0 20px 64px}
    .contact{padding-bottom:28px}

    .menu__top,.menu__more,.contact__top{grid-template-columns:1fr}
    .menu__top{gap:48px}
    .menu__coffee-list{margin-top:32px}
    .menu__coffee-list .name{font-size:1.45rem}
    .menu li{padding:11px 0}
    .menu__bags{width:min(92%,400px)}
    .menu__bags figcaption{flex-wrap:wrap;margin-top:36px;gap:4px 12px}
    .menu__bags figcaption strong{font-size:1.25rem}
    .menu__more{margin-top:48px;padding-top:32px;gap:40px}

    .rail nav a.nav--wide{display:none}
    .favs{--card-w:min(70vw,300px);--cap:8rem;--pin-pb:52px;--tilt:3deg}
    .favs__pin{padding-top:64px}
    .favs__ghost{display:none}
    .favs__head{padding:0 20px}
    .favs__track{margin-top:24px;padding:56px 20px 0;scroll-padding:0 20px}
    .favs:not(.favs--pinned) .favs__hint .t-scroll{display:none}
    .favs:not(.favs--pinned) .favs__hint .t-swipe{display:inline}
    .favs__hud{left:20px;right:20px}
    .favs__end{flex-basis:62vw}
    /* Phones, pinned: the heading is the first "slide", the first cake peeks in
       from the right; cards are sized by the remaining screen height. */
    .favs--pinned{
      --head-w:66vw;--tilt:5deg;
      --card-w:min(68vw,calc((var(--pin-height,calc(100svh - var(--pin-top,0px))) - var(--cap) - var(--pin-pb) - 76px) * .75));
    }
    .favs--pinned .favs__ghost{display:block;top:18px;left:20px;font-size:8.5rem}
    .favs--pinned h2{font-size:2.6rem;margin-top:14px}
    .favs--pinned .favs__lede{font-size:.98rem;margin-top:16px}
    .favs--pinned .favs__hint{margin-top:18px}
    .favs--pinned .favs__track{padding-top:0}
    .favs--pinned .fav__cap p{font-size:.84rem}
    .story,.reserve{grid-template-columns:1fr}
    .story__photo,.story__text,.reserve__head,.reserve__photo{grid-column:1;grid-row:auto}
    .story{row-gap:52px}
    .story__photo{margin-right:16px}
    .story__photo::after{left:16px;top:16px;right:-16px;bottom:-16px}
    .story p{margin-top:18px}

    .gallery__grid{grid-template-columns:1fr 1fr;grid-template-rows:none;grid-auto-rows:42vw;gap:8px}
    .gallery figure:first-child{grid-column:span 2;grid-row:span 2}
    .gallery__more{margin-top:20px}

    .kids{grid-template-columns:1fr;padding:0 20px 64px;row-gap:28px}
    .kids__text,.kids__photo{grid-column:1}
    .kids__photo{order:-1}
    .reserve__photo{display:none}
    form{margin-top:28px;gap:14px}
    .row{grid-template-columns:minmax(0,1fr);gap:14px}
    .row--3{grid-template-columns:repeat(2,minmax(0,1fr))}
    .row--3 .field:last-child{grid-column:span 2}
    .contact dl{grid-template-columns:1fr;gap:24px}
    .contact__top{gap:32px}
    .contact__foot{margin-top:48px}
  }

/* Resilient controls and keyboard navigation. */
.skip-link{position:fixed;top:12px;left:12px;z-index:100;padding:12px 20px;background:var(--paper);color:var(--ink);transform:translateY(-180%)}
.skip-link:focus{transform:none}
.contact dd{overflow-wrap:anywhere}
.rail__ig{min-width:44px;min-height:44px;display:grid;place-items:center}
.pill{min-height:44px}
.field input,.field textarea{min-width:0;width:100%}
.field input::placeholder,.field textarea::placeholder{opacity:1}
.form-note a{text-underline-offset:3px}
@media(max-width:860px){
  section{scroll-margin-top:84px}
  .rail__ig{display:none}
  .rail nav a{min-height:44px;min-width:44px}
}
@media(max-width:380px){.rail nav{gap:8px}.rail{padding-inline:12px}}
.utility-page{margin:0 auto;max-width:900px;padding:clamp(32px,7vw,96px) 24px;min-height:100svh}
.utility-brand{display:inline-block;margin-bottom:64px;text-underline-offset:4px}
.utility-page h1{font-size:clamp(2.4rem,6vw,5rem);overflow-wrap:anywhere}
.utility-page p{max-width:65ch;margin:28px 0}
.utility-page .pill{margin-top:8px}
/* Legal pages follow the existing palette and type system. */
.legal-header,.legal-footer{max-width:1000px;margin:0 auto;padding:24px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px}
.legal-header a,.legal-footer a{display:inline-flex;align-items:center;min-height:44px;text-underline-offset:4px}
.legal-page{margin:0 auto;max-width:820px;padding:clamp(32px,6vw,80px) 24px;overflow-wrap:anywhere}
.legal-page h1{font-size:clamp(2.25rem,5.8vw,4.5rem);line-height:1.08;text-transform:none;hyphens:auto;margin-bottom:40px}
.legal-page h2{font-family:var(--font-body);font-size:1.35rem;font-weight:500;line-height:1.35;margin:40px 0 16px}
.legal-page p{font-size:1rem;line-height:1.75;margin:16px 0;max-width:72ch}
.legal-page a{text-underline-offset:3px}
.legal-page .legal-draft{padding:20px;background:var(--paper-2);border:1px solid var(--line)}
.legal-page .legal-date{font-size:.875rem;color:var(--ink-soft);margin-top:40px}
.legal-footer{border-top:1px solid var(--line);font-size:.875rem}
.legal-footer nav,.legal-links{display:flex;flex-wrap:wrap;gap:12px 24px}
.legal-links a{display:inline-flex;align-items:center;min-height:44px}