/* Montserrat from our own server — no request to Google (SIL Open Font License) */
@font-face {
  font-family: "Montserrat"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("../fonts/montserrat-latin-wght.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat"; font-style: italic; font-weight: 300 500; font-display: swap;
  src: url("../fonts/montserrat-latin-italic-wght.woff2") format("woff2");
}

/* ==========================================================================
   EIS KISTE SOLINGEN — "in Bewegung"
   Same warm palette and content as the light variant, but the page is
   built around motion: a moving hero shot, parallax layers, kinetic type
   and drifting washes. Every animation is transform/opacity only.
   ========================================================================== */

:root {
  --bg:       #f7f3ec;
  --bg-2:     #efe7db;
  --surface:  #fffdfa;

  --ink:    #1c1917;
  --ink-2:  #5c554c;
  --ink-3:  #6b6358;   /* 4.8:1 on --bg-2: small grey text stays readable (WCAG AA) */

  --tan:      #e5c8a3;
  --tan-deep: #b0834a;
  --tan-pale: #f2e6d4;
  --tan-text: #83602f;   /* tan for TEXT: 4.6:1 on --bg-2; --tan-deep stays for decoration and large numerals */

  /* solid buttons: a warm walnut rather than near-black — clearly darker
     than the page, clearly not ink. 8.4:1 against white text. */
  --btn:       #5a4433;
  --btn-hover: #48362a;

  --line:      rgba(28, 25, 23, 0.14);
  --line-soft: rgba(28, 25, 23, 0.07);

  --font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --serif: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --container: 1280px;
  --gutter: clamp(20px, 4.2vw, 56px);
  --bleed: calc(-1 * (var(--gutter) + max(0px, (100vw - var(--container)) / 2)));
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; }
[hidden] { display: none !important; }   /* component display rules must not resurrect hidden elements */

/* Accessibility: a visible keyboard focus everywhere, a skip link, and
   text that is only there for screen readers */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.btn:focus-visible { outline-offset: 4px; border-radius: 999px; }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline: none; }   /* the field's underline turns ink instead */
.skip {
  position: fixed; left: 16px; top: 12px; z-index: 100;
  padding: 12px 20px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 600; font-size: 15px;
  transform: translateY(-160%); transition: transform .2s var(--ease);
}
.skip:focus { transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* WCAG 2.2.2: anything that moves by itself for more than five seconds can be
   stopped. The toggle pauses the films and every running CSS animation. */
.motion-toggle {
  position: absolute; right: var(--gutter); bottom: 20px; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: rgba(255,253,250,.82); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.motion-toggle svg { width: 14px; height: 14px; fill: currentColor; }
.motion-toggle .i-play { display: none; }
body.motion-paused .motion-toggle .i-play { display: block; }
body.motion-paused .motion-toggle .i-pause { display: none; }
body.motion-paused *, body.motion-paused *::before, body.motion-paused *::after { animation-play-state: paused !important; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--tan); color: var(--ink); }

h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.15; letter-spacing: -0.03em; }
p { margin: 0 0 1.1em; color: var(--ink-2); }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.serif { font-family: var(--serif); font-weight: 400; font-style: italic; letter-spacing: -0.015em; }

.d1 { font-size: clamp(2.6rem, 4.8vw, 4.4rem); }   /* "Handgemachtes" must end before the bowl in the film */
.d2 { font-size: clamp(2rem, 4.4vw, 3.7rem); }
.lede { font-size: clamp(16.5px, 1.25vw, 19px); line-height: 1.62; color: var(--ink-2); max-width: 44ch; }

body::after {
  content: "";
  position: fixed; inset: 0; z-index: 70;
  pointer-events: none; opacity: 0.3; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.22'/%3E%3C/svg%3E");
}

.label {
  display: flex; align-items: center; gap: 12px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--tan-text);
}
.label::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: 0.6; }

.section { padding: clamp(70px, 9vw, 150px) 0; }

/* ==========================================================================
   Scroll progress
   ========================================================================== */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 80; pointer-events: none; }
.progress i {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--tan), var(--tan-deep));
  transform: scaleX(0); transform-origin: 0 50%;
  will-change: transform;
}

/* ==========================================================================
   Header
   ========================================================================== */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  transition: background 0.5s var(--ease), border-color 0.5s var(--ease), backdrop-filter 0.5s var(--ease);
  border-bottom: 1px solid transparent;
}
body.scrolled .header {
  background: rgba(247, 243, 236, 0.86);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom-color: var(--line-soft);
}
.header__inner {
  max-width: var(--container); margin: 0 auto;
  padding: 16px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.brand { display: flex; align-items: center; gap: 11px; }
.brand img { width: 42px; height: 42px; border-radius: 50%; }
.brand span { font-weight: 600; font-size: 15.5px; letter-spacing: -0.02em; }

.nav { display: flex; align-items: center; gap: 26px; }
.nav a { position: relative; font-size: 15px; font-weight: 500; color: var(--ink); padding: 4px 0; }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--ink); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 0.45s var(--ease);
}
.nav a:hover::after, .nav a.is-active::after { transform: scaleX(1); }

.burger {
  display: none; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(255,253,250,.6); position: relative; cursor: pointer;
}
.burger span {
  position: absolute; left: 13px; right: 13px; height: 1.5px; background: var(--ink);
  transition: transform 0.45s var(--ease), opacity 0.25s var(--ease), top 0.45s var(--ease);
}
.burger span:nth-child(1) { top: 18px; }
.burger span:nth-child(2) { top: 25px; }
body.nav-open .burger span:nth-child(1) { top: 21.5px; transform: rotate(45deg); }
body.nav-open .burger span:nth-child(2) { top: 21.5px; transform: rotate(-45deg); }

.drawer {
  position: fixed; inset: 0; z-index: 55; background: var(--bg);
  padding: 96px var(--gutter) 40px; display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease), visibility 0.4s var(--ease);
}
body.nav-open .drawer { opacity: 1; visibility: visible; }
.drawer > a {
  font-size: clamp(1.9rem, 8vw, 2.6rem); font-weight: 500; letter-spacing: -0.03em;
  padding: 18px 0; border-bottom: 1px solid var(--line-soft);
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
body.nav-open .drawer > a { opacity: 1; transform: none; }
body.nav-open .drawer > a:nth-child(1) { transition-delay: 0.06s; }
body.nav-open .drawer > a:nth-child(2) { transition-delay: 0.1s; }
body.nav-open .drawer > a:nth-child(3) { transition-delay: 0.14s; }
body.nav-open .drawer > a:nth-child(4) { transition-delay: 0.18s; }
.drawer__foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: 10px; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px; border-radius: 999px;
  font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
  border: 1px solid transparent; cursor: pointer;
  transition: transform 0.4s var(--ease), background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
  will-change: transform;
}
.btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.btn--dark { background: var(--btn); color: #fff; }
.btn--dark:hover { background: var(--btn-hover); }
.btn--line { border-color: var(--line); color: var(--ink); background: rgba(255,253,250,.5); }
.btn--line:hover { border-color: var(--ink); }
.btn:active { transform: scale(0.985); }
.btn[disabled] { opacity: .55; cursor: default; }

.alink {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 15px; font-weight: 600; padding-bottom: 3px;
  border-bottom: 1px solid var(--line); transition: border-color 0.35s var(--ease);
}
.alink svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; transition: transform 0.35s var(--ease); }
.alink:hover { border-color: var(--ink); }
.alink:hover svg { transform: translate(3px, -3px); }

.status { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; color: var(--ink-2); }
.status i { width: 7px; height: 7px; border-radius: 50%; background: var(--tan-deep); box-shadow: 0 0 0 4px rgba(176,131,74,.14); }
.status.is-open i { background: #5f8a48; box-shadow: 0 0 0 4px rgba(95,138,72,.16); animation: pulse 2.4s var(--ease) infinite; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(95,138,72,.16); }
  50%      { box-shadow: 0 0 0 9px rgba(95,138,72,0); }
}

/* ==========================================================================
   Kinetic type — words rise out of a mask
   ========================================================================== */
/* The mask must be taller than the line box, or it slices the descenders off
   ("Handgemachtes" loses its g). padding extends the clip area, the negative
   margin takes the extra height back out of the layout, and the start offset
   has to clear the taller mask so nothing peeks before the reveal. */
.kin {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.34em;
  margin-bottom: -0.34em;
}
.kin > i {
  display: inline-block; font-style: inherit;
  transform: translateY(150%);
  transition: transform 1s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 65ms);
}
.is-in .kin > i { transform: translateY(0); }

.rise { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.is-in .rise, .rise.is-in { opacity: 1; transform: none; }
.rise-2 { transition-delay: .1s; }
.rise-3 { transition-delay: .2s; }
.rise-4 { transition-delay: .3s; }

/* ==========================================================================
   Hero with moving picture
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  padding: 120px 0 116px;   /* the copy has to end above the scroll cue */
  overflow: hidden;
}
/* The film plays once, independent of scrolling, and stays on the finished
   sundae. Its first frame sits underneath as the poster. */
/* --crop nudges the bowl away from the headline; poster and film share it so
   the hand-off from poster to film is seamless */
.hero__bg { --crop: 35% 50%; position: absolute; inset: 0; z-index: 0; background: var(--bg-2) var(--crop) / cover no-repeat; }
.hero__bg video, .hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__bg video { object-position: var(--crop); }

/* The cream veil only covers the type's side. The film's subject — the
   sundae being built — sits in the right half and has to stay unwashed. */
.hero__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(247,243,236,.96) 0%, rgba(247,243,236,.86) 24%, rgba(247,243,236,.35) 40%, rgba(247,243,236,0) 50%),
    radial-gradient(70% 55% at 0% 100%, rgba(247,243,236,.8), rgba(247,243,236,0) 70%);
}
.hero .container { position: relative; z-index: 2; width: 100%; }
/* three stacked lines keep the headline left of the sundae in the film */
.hero h1 { margin: 20px 0 22px; max-width: 8em; }
.hero .lede { max-width: 35ch; }   /* stays off the tray in the film */

.scrollcue {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%);
  z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-3);
}
.scrollcue span:last-child { width: 1px; height: 42px; background: linear-gradient(var(--tan-deep), transparent); position: relative; overflow: hidden; }
.scrollcue span:last-child::after {
  content: ""; position: absolute; inset: 0; background: var(--tan-deep);
  animation: drip 2.4s var(--ease) infinite;
}
@keyframes drip { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }

/* ==========================================================================
   Marquee
   ========================================================================== */
.marquee {
  border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
  padding: 20px 0; overflow: hidden; background: var(--bg-2);
}
.marquee__track { display: flex; width: max-content; animation: slide 42s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__g { display: flex; align-items: center; flex-shrink: 0; }
.marquee__i {
  display: flex; align-items: center; gap: 26px; padding-right: 26px;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.15rem, 2.1vw, 1.9rem); color: var(--ink);
  white-space: nowrap;
}
.marquee__i::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tan-deep); flex-shrink: 0; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ==========================================================================
   Parallax media
   ========================================================================== */
.media {
  position: relative; overflow: hidden; border-radius: 26px;
  background: var(--tan-pale);
  box-shadow: 0 42px 70px -46px rgba(116,82,46,.5), 0 12px 28px -20px rgba(116,82,46,.26);
}
.media img, .media video { width: 100%; height: 100%; object-fit: cover; }
.media__inner { position: absolute; inset: -12% 0; will-change: transform; }
.media__inner img { height: 100%; }

.wash {
  position: absolute; z-index: 0; pointer-events: none;
  mix-blend-mode: multiply; background-repeat: no-repeat; background-size: 100% 100%;
  opacity: .72; will-change: transform;
}
.wash--1 { background-image: url("../img/wash-1.jpg"); }
.wash--2 { background-image: url("../img/wash-2.jpg"); }
.wash--float { animation: drift 26s ease-in-out infinite alternate; }
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(2.5%, -3%, 0) scale(1.06); }
}

/* ==========================================================================
   Offer rows — alternating, parallax
   ========================================================================== */
.row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(26px, 4vw, 76px); align-items: center;
}
.row + .row { margin-top: clamp(56px, 7vw, 120px); }
.row--flip .row__media { order: 2; }
.row__media { aspect-ratio: 5 / 4; }
.row__no {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(2.4rem, 5vw, 4.2rem); color: var(--tan-deep);
  line-height: 1; display: block; margin-bottom: 10px;
}
.row__body h3 { font-size: clamp(1.6rem, 3vw, 2.5rem); margin-bottom: 14px; }
.row__body p { max-width: 44ch; }

/* Offer rows answer the pointer: the picture lifts and tilts a touch toward
   the text, the photo drifts closer, the number slides in. The lift goes on
   .row__media because .media__inner is already driven by the parallax. */
.offers .row__media, .offers .row__no, .offers .media__inner img {
  transition: transform 0.8s var(--ease-out), box-shadow 0.8s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .offers .row:hover .row__media {
    transform: translate3d(0, -10px, 0) rotate(-0.8deg);
    box-shadow: 0 56px 80px -48px rgba(116,82,46,.58), 0 16px 34px -20px rgba(116,82,46,.3);
  }
  .offers .row--flip:hover .row__media { transform: translate3d(0, -10px, 0) rotate(0.8deg); }
  .offers .row:hover .media__inner img { transform: scale(1.045); }
  .offers .row:hover .row__no { transform: translate3d(12px, 0, 0); }
}

/* ==========================================================================
   Film band — full-bleed moving picture
   ========================================================================== */
/* The band takes the film's own 16:9 shape, so the whole frame is visible at
   every window width. A fixed height (and parallax overscan) cropped the top
   and bottom off on wide screens. */
.band { position: relative; overflow: hidden; aspect-ratio: 16 / 9; }
.band__inner { position: absolute; inset: 0; }
.band video, .band img { width: 100%; height: 100%; object-fit: cover; }
.band__veil {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(247,243,236,.92), rgba(247,243,236,.35) 46%, rgba(247,243,236,.1));
}
.band__copy {
  position: absolute; inset: 0; display: flex; align-items: center;
}
.band__copy .container { width: 100%; }
.band__copy h2 { max-width: 14ch; }

/* ==========================================================================
   Locations
   ========================================================================== */
.places { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3.4vw, 54px); }
.place__media { aspect-ratio: 5 / 3.8; margin-bottom: 26px; }
.place h3 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); margin: 12px 0 8px; }
.place__addr { font-size: 15.5px; color: var(--ink-3); margin-bottom: 16px; }
.hours { margin: 22px 0 24px; }
.hours__row {
  display: flex; justify-content: space-between; gap: 18px; padding: 11px 0;
  border-top: 1px solid var(--line-soft); font-size: 15.5px;
}
.hours__row:last-child { border-bottom: 1px solid var(--line-soft); }
.hours__row dt { margin: 0; color: var(--ink-2); }
.hours__row dd { margin: 0; font-weight: 600; }
.place__actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }

/* ==========================================================================
   Quote
   ========================================================================== */
.quote {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.6rem, 4vw, 3.2rem); line-height: 1.2; letter-spacing: -0.025em;
  max-width: 20ch;
}

/* ==========================================================================
   Contact + form
   ========================================================================== */
.contact { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(34px, 5vw, 86px); }
.clist { margin-top: 30px; border-top: 1px solid var(--line); }
.clist a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 16px 0; border-bottom: 1px solid var(--line-soft); font-size: 16px;
  transition: padding-left .4s var(--ease);
}
.clist a:hover { padding-left: 8px; }
.clist .k { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.clist .v { font-weight: 600; text-align: right; }

.form { display: grid; gap: 4px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; }
.field { position: relative; padding: 20px 0 10px; border-bottom: 1px solid var(--line); transition: border-color .35s var(--ease); }
.field:focus-within { border-bottom-color: var(--ink); }
.field label { display: block; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 7px; }
.field input, .field textarea, .field select {
  width: 100%; border: 0; outline: none; background: transparent;
  font-family: inherit; font-size: 16.5px; color: var(--ink); padding: 0 0 6px; resize: vertical;
}
.field textarea { min-height: 116px; line-height: 1.55; }
.field.is-invalid { border-bottom-color: #a33a2e; }
.field__err { display: block; margin-top: 6px; font-size: 13.5px; color: #a33a2e; }   /* 5.9:1 */
.consent.is-invalid span { color: #a33a2e; }
.field input::placeholder, .field textarea::placeholder { color: #776f64; }   /* 4.5:1 */
.field select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.field--select::after {
  content: ""; position: absolute; right: 2px; bottom: 18px; width: 8px; height: 8px;
  border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3);
  transform: rotate(45deg); pointer-events: none;
}
.consent { display: flex; gap: 12px; align-items: flex-start; margin: 24px 0 4px; font-size: 14.5px; color: var(--ink-2); }
.consent input { margin: 2px 0 0; flex-shrink: 0; width: 19px; height: 19px; accent-color: var(--ink); }
.consent a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--tan-deep); }
.form__foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 26px; }
.form__note { font-size: 13.5px; color: var(--ink-3); }
.formmsg { margin-top: 20px; padding: 16px 20px; border-radius: 12px; font-size: 15px; display: none; }
.formmsg.is-ok { display: block; background: #e9f0e3; color: #3d5a2b; }
.formmsg.is-err { display: block; background: #f6e5e3; color: #8c3a32; }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ==========================================================================
   Google rating — a quiet strip before the footer (static snapshot)
   ========================================================================== */
.reviews { padding: clamp(56px, 6vw, 92px) 0; background: var(--bg-2); border-top: 1px solid var(--line-soft); }
.reviews__inner { display: flex; flex-direction: column; align-items: center; gap: 22px; }

.stars { position: relative; display: inline-block; font-size: 14px; letter-spacing: 2px; line-height: 1; color: rgba(28,25,23,.14); }
.stars::before { content: "★★★★★"; }
.stars i { position: absolute; top: 0; left: 0; bottom: 0; width: var(--fill, 100%); overflow: hidden; white-space: nowrap; color: var(--gold); font-style: normal; }
.stars i::before { content: "★★★★★"; }

/* the card mirrors Google's own overview, so it reads as "the Google rating" at a glance */
.rsnap { --gold: #f2b01e; width: 100%; max-width: 440px; margin: 0; padding: 22px 26px 24px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line-soft); box-shadow: 0 30px 60px -44px rgba(116,82,46,.45); }
.rsnap__head { display: grid; gap: 2px; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--line-soft); }
.rsnap__head span { font-size: 15px; font-weight: 600; color: var(--ink); }
.rsnap__head small { font-size: 12.5px; color: var(--ink-3); }
.rsnap__body { display: grid; grid-template-columns: 1fr auto; gap: 26px; align-items: center; }
.rsnap__bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.rsnap__bars li { display: grid; grid-template-columns: 12px 1fr; gap: 12px; align-items: center; font-size: 12.5px; color: var(--ink-2); }
.rsnap__bars i { position: relative; height: 8px; border-radius: 99px; background: rgba(28,25,23,.08); overflow: hidden; }
.rsnap__bars i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: var(--gold); }
.rsnap__score { display: grid; justify-items: center; gap: 6px; }
.rsnap__score b { font-size: 52px; font-weight: 500; letter-spacing: -0.03em; line-height: 1; color: var(--ink); }

/* ==========================================================================
   Footer with a scroll-driven wordmark
   ========================================================================== */
.footer { padding: clamp(46px, 5vw, 76px) 0 0; border-top: 1px solid var(--line); overflow: hidden; }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: clamp(24px, 3vw, 44px); padding-bottom: 40px; }
.footer h2 { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 14px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.footer li, .footer a { font-size: 15px; color: var(--ink-2); }
.footer a:hover { color: var(--ink); }
.footer__about { font-size: 15px; max-width: 32ch; margin: 16px 0 0; }
.footer__bottom {
  border-top: 1px solid var(--line-soft); padding-top: 22px;
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: 14px; color: var(--ink-3);
}
.footer__credit { line-height: 1.7; }
.footer__credit a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--tan-deep); }

.bigmark {
  margin-top: 26px; white-space: nowrap;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(3.4rem, 16vw, 16rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(28,25,23,.16);
  user-select: none; pointer-events: none;
  margin-bottom: -.2em; will-change: transform;
}

/* ==========================================================================
   Legal
   ========================================================================== */
.legal { max-width: 72ch; }
.legal h2 { font-size: clamp(1.3rem, 2vw, 1.7rem); margin: 46px 0 12px; }
.legal h3 { font-size: 1.02rem; font-weight: 700; margin: 26px 0 8px; }
.legal p, .legal li { font-size: 16px; line-height: 1.68; }
.legal a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--tan-deep); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1000px) {
  .nav { display: none; }
  .burger { display: block; }
  .header__inner > .btn { display: none; }

  .hero { min-height: 92svh; padding-top: 104px; padding-bottom: 44px; }
  .scrollcue { display: none; }   /* collided with the hero buttons */
  /* portrait: the film sits above the copy instead of behind it */
  .hero__bg { --crop: 80% 50%; bottom: 50%; }
  .hero__veil {
    background: linear-gradient(to top, rgb(247,243,236) 50%, rgba(247,243,236,0) 64%);
  }
  .hero h1 { max-width: none; }

  .row, .row--flip { grid-template-columns: 1fr; gap: 22px; }
  .row--flip .row__media { order: 0; }
  .row__media { aspect-ratio: 5 / 3.6; }

  .places { grid-template-columns: 1fr; }
  .contact { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .band { aspect-ratio: auto; height: clamp(300px, 70vw, 460px); }   /* taller than 16:9: crops the sides, never top/bottom */
  .band__veil { background: linear-gradient(to top, rgba(247,243,236,.95), rgba(247,243,236,.3)); }
}

/* WCAG reflow at 320px: "Handgemachtes" must fit the narrowest phones */
@media (max-width: 360px) {
  .d1 { font-size: 2.2rem; }
}

@media (max-width: 600px) {
  body { font-size: 16px; }
  .form__row { grid-template-columns: 1fr; gap: 0; }
  .footer__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .kin > i, .rise { transform: none !important; opacity: 1 !important; }
  .media__inner { position: absolute; inset: 0; transform: none !important; }   /* the only parallax layer left */
}