/* ============================================================
   NICOLE FERRARI KOSMETIK — Design System
   Direction: "Oak, Oat & Eucalyptus"
   Every colour is sampled from the real studio (photo-01/05):
   oat walls, walnut floor, greige curtains, magnolia blush,
   Nicole's rose-berry lip, the dried eucalyptus in her vase.
   Warm and light. Dark appears exactly twice (heritage + footer).
   ============================================================ */

:root {
  /* --- surfaces --- */
  --bg:            #EAE3D6;   /* oat/greige walls (not the cream cliche) */
  --surface:       #F6F1E8;   /* paper — warm-white chair & shelves */
  --surface-cool:  #DED8CE;   /* curtain/armchair greige — structural */

  /* --- ink & text --- */
  --ink:           #2C241D;   /* walnut — all headings & body */
  --muted:         #6E5F4E;   /* oak-taupe — secondary text (4.83:1) */

  /* --- accents --- */
  --blush:         #F4D9C7;   /* brand blush — FILL / mark only, never text on light */
  --action:        #9C4C50;   /* clay-rose from Nicole's lip — links, buttons, emphasis (4.62:1) */
  --action-hover:  #843F44;
  --sage:          #566049;   /* deep eucalyptus — GREEN PEEL thread only (5.2:1) */
  --sage-light:    #AEB79C;   /* eucalyptus tint on the dark band (7.3:1 on ink) */

  /* --- dark band (heritage + footer only) --- */
  --band:          #2C241D;
  --band-text:     #F6F1E8;
  --band-muted:    #B9AC99;
  --band-blush:    #F4D9C7;

  /* --- lines --- */
  --line:          rgba(44,36,29,.12);   /* faded-ink hairline (structural) */
  --line-strong:   rgba(44,36,29,.22);   /* price-row separators */
  --line-band:     rgba(246,241,232,.16);

  /* --- radius --- */
  --radius-sm:     4px;
  --radius:        8px;
  --radius-pill:   999px;

  /* --- type --- */
  --font-display:  "Newsreader", Georgia, "Times New Roman", serif;
  --font-label:    "Jost", "Century Gothic", "Futura", sans-serif;
  --font-body:     "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;

  --fs-hero:  clamp(2.75rem, 6vw, 5rem);
  --fs-h1-quiet: clamp(2rem, 4.4vw, 3.4rem);
  --fs-quote:    clamp(1.6rem, 3.2vw, 2.4rem);
  --fs-h2:    clamp(2rem, 4vw, 3rem);
  --fs-h3:    clamp(1.375rem, 2.2vw, 1.75rem);
  --fs-body:  clamp(1rem, 1.05vw, 1.125rem);
  --fs-small: .875rem;
  --lh-display: 1.06;
  --lh-body:    1.62;
  --measure:    64ch;

  --maxw:    1200px;
  --space:   clamp(3rem, 6vw, 5.5rem);   /* section padding */
  --gap:     clamp(1.5rem, 4vw, 4rem);

  --ease:      cubic-bezier(.22,.61,.36,1);
  --dur:       450ms;
  --dur-fast:  180ms;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-wrap: break-word;
  text-wrap: pretty;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
::selection { background: var(--blush); color: var(--ink); }

/* ---------- Layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); }
section { padding: var(--space) 0; }
section.tight { padding: calc(var(--space) * .62) 0; }
.surface { background: var(--surface); }

.measure { max-width: var(--measure); }

/* pull-quote (Über mich) — serif italic + hanging quote, no side-stripe */
.pullquote {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: var(--fs-quote); line-height: 1.28; color: var(--ink);
  max-width: 26ch; margin: clamp(2rem, 4vw, 3rem) 0;
  position: relative; padding-top: 1.6rem;
}
.pullquote::before { content: "\201E"; position: absolute; top: -.2rem; left: -.1rem; font-size: 3.2rem; line-height: 1; color: var(--action); }

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-display);
  letter-spacing: -.01em;
  color: var(--ink);
  font-variation-settings: "opsz" 44;
  text-wrap: balance;
}
h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.15; }
h4 { font-size: 1.125rem; }
.serif-i { font-family: var(--font-display); font-style: italic; font-weight: 400; }
p { max-width: var(--measure); }
.lead { font-size: clamp(1.125rem, 1.5vw, 1.375rem); color: var(--ink); line-height: 1.5; }
.muted { color: var(--muted); }
a.link {
  color: var(--action);
  text-decoration: none;
  font-weight: 500;
  background-image: linear-gradient(var(--action), var(--action));
  background-size: 0% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--dur-fast) var(--ease);
  padding-bottom: 1px;
}
a.link:hover, a.link:focus-visible { background-size: 100% 1.5px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-label);
  font-weight: 500; font-size: .95rem; letter-spacing: .02em;
  padding: .85rem 1.6rem; min-height: 44px;
  border: 1.5px solid transparent; border-radius: var(--radius-pill);
  text-decoration: none; cursor: pointer; transition: all var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.btn .arrow { transition: transform var(--dur-fast) var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.btn-primary { background: var(--action); color: var(--surface); }
.btn-primary:hover { background: var(--action-hover); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-secondary:hover { background: var(--ink); color: var(--surface); }
.btn-ghost { background: transparent; color: var(--ink); padding-left: 0; padding-right: 0; }
.btn-ghost .u { position: relative; }
.btn-ghost .u::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1.5px; background: var(--action); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-fast) var(--ease); }
.btn-ghost:hover .u::after { transform: scaleX(1); }
.btn-sm { padding: .62rem 1.15rem; font-size: .85rem; min-height: 44px; }
/* on the dark band, the primary flips to blush + ink (contrast guardrail) */
.on-band .btn-primary { background: var(--band-blush); color: var(--ink); }
.on-band .btn-primary:hover { background: var(--surface); }
.on-band .btn-secondary { color: var(--band-text); border-color: var(--band-muted); }
.on-band .btn-secondary:hover { background: var(--band-text); color: var(--ink); }

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--action); outline-offset: 2px; border-radius: var(--radius-sm);
}
.on-band :where(a, button):focus-visible { outline-color: var(--band-blush); }

/* ---------- Header / Nav ---------- */
.header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px) saturate(1.1);
  border-bottom: 1px solid var(--line);
}
.header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 74px; }
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; }
.brand img { width: auto; height: 38px; }
.brand .word { font-family: var(--font-label); font-weight: 500; font-size: 1.02rem; letter-spacing: .04em; color: var(--ink); line-height: 1.1; }
.brand .word b { font-weight: 600; }
.nav-links { display: flex; align-items: center; gap: 1.9rem; list-style: none; }
.nav-links a {
  font-family: var(--font-label); font-weight: 400; font-size: .95rem; letter-spacing: .02em;
  color: var(--ink); text-decoration: none; padding: .3rem 0; position: relative;
}
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--action); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-fast) var(--ease); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-right { display: flex; align-items: center; gap: 1.1rem; }
.lang { font-family: var(--font-label); font-size: .82rem; letter-spacing: .08em; color: var(--muted); text-decoration: none; }
.lang b { color: var(--ink); }
.nav-gutschein { font-family: var(--font-label); font-size: .9rem; color: var(--ink); text-decoration: none; }
.nav-gutschein:hover { color: var(--action); }
/* sticky Termin buchen — hidden while hero in view, eased in after */
.nav-cta { opacity: 1; visibility: visible; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur); }
body.at-top .nav-cta { opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none; }

.burger { display: none; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; flex-direction: column; justify-content: center; gap: 5px; }
.burger span { display: block; height: 2px; width: 24px; background: var(--ink); margin: 0 auto; transition: var(--dur-fast); }
/* mobile menu overlay */
.mobile-menu {
  position: fixed; inset: 66px 0 0; z-index: 55;
  background: var(--bg);
  padding: 2rem clamp(1.25rem,4vw,2.5rem) 3rem;
  transform: translateY(-8px); opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility var(--dur-fast);
  display: flex; flex-direction: column; gap: .3rem;
  overflow-y: auto;
}
body.menu-open .mobile-menu { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
body.menu-open { overflow: hidden; }
.mobile-menu a { font-family: var(--font-display); font-size: 1.9rem; color: var(--ink); text-decoration: none; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.mobile-menu a.mm-cta { font-family: var(--font-label); font-size: 1rem; color: var(--surface); background: var(--action); border: 0; border-radius: var(--radius-pill); text-align: center; padding: .95rem; margin-top: 1.2rem; }
.mobile-menu .mm-meta { font-family: var(--font-label); font-size: .85rem; color: var(--muted); margin-top: 1.4rem; display: grid; gap: .35rem; }
.mobile-menu .mm-meta a { font-family: var(--font-label); font-size: .85rem; border: 0; padding: 0; color: var(--action); display: inline; }
body.menu-open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { opacity: 0; }
body.menu-open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 901px) { .mobile-menu { display: none; } }

/* ---------- Hero (warm light split) ---------- */
.hero { padding: clamp(2rem, 4vw, 3.5rem) 0 clamp(2.5rem, 5vw, 4.5rem); }
.hero .wrap { display: grid; grid-template-columns: 1.02fr .98fr; gap: var(--gap); align-items: center; }
.hero-copy { max-width: 34rem; }
.hero h1 { margin-bottom: 1.4rem; }
.hero h1 .accent-word { font-style: italic; color: var(--action); }
.hero .lead { color: var(--muted); margin-bottom: 2rem; }
.hero-actions { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.hero-note { margin-top: 1.8rem; font-family: var(--font-label); font-size: .82rem; letter-spacing: .05em; color: var(--muted); display: inline-flex; align-items: center; gap: .5rem; }
.hero-note .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--action); }
.hero-media { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 4.4; background: var(--surface-cool); }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media .mark { position: absolute; right: 16px; bottom: 14px; width: 42px; height: 42px; opacity: .9; }

/* ---------- Intro ---------- */
.intro .wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--gap); align-items: start; }
.intro h2 { max-width: 12ch; }
.intro .body p + p { margin-top: 1.1rem; }

/* ---------- Section head ---------- */
.section-head { margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.section-head h2 { margin-top: .5rem; max-width: 18ch; }
.section-head .lead { color: var(--muted); margin-top: 1rem; }
.section-head.between { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }

/* ---------- Treatment preview list (home) & category price rows ---------- */
.tlist { border-top: 1px solid var(--line-strong); }
.trow {
  display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: baseline;
  gap: 1rem 2rem; padding: 1.35rem 1rem; border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit; transition: background var(--dur-fast) var(--ease);
  position: relative;
}
a.trow:hover, a.trow:focus-visible { background: var(--surface); }
.trow .t-name { font-family: var(--font-display); font-size: 1.4rem; line-height: 1.2; }
.trow .t-desc { font-size: .95rem; color: var(--muted); margin-top: .3rem; max-width: 52ch; }
.trow .t-price { font-family: var(--font-label); font-weight: 500; font-size: 1.05rem; color: var(--action); white-space: nowrap; }
.trow .t-price .from { font-size: .78rem; color: var(--muted); letter-spacing: .02em; display: block; font-weight: 400; }
a.trow .t-go { position: absolute; right: 1rem; bottom: 1.1rem; font-family: var(--font-label); font-size: .8rem; color: var(--action); opacity: 0; transform: translateX(-4px); transition: var(--dur-fast); }
a.trow:hover .t-go { opacity: 1; transform: none; }

/* simple price rows (no link, e.g. waxing list) */
.prow { display: grid; grid-template-columns: 1fr auto auto; gap: .8rem 1.6rem; align-items: baseline; padding: .95rem 1rem; border-bottom: 1px solid var(--line); }
.prow .p-name { font-weight: 500; }
.prow .p-dur { font-family: var(--font-label); font-size: .9rem; color: var(--muted); text-align: right; }
.prow .p-price { font-family: var(--font-label); font-weight: 500; color: var(--action); text-align: right; min-width: 5.5ch; }
.pricelist { border-top: 1px solid var(--line-strong); }
.pricelist .note { font-size: .9rem; color: var(--muted); margin-top: 1.1rem; }

/* ---------- Price-tier trio (Gesichtsbehandlungen) ---------- */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-strong); }
.tier { padding: 2rem 1.6rem 1.8rem; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.tier:last-child { border-right: 0; }
.tier.featured { background: var(--surface); }
.tier .flag { font-family: var(--font-label); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--action); min-height: 1.2rem; }
.tier h3 { margin: .3rem 0 .2rem; }
.tier .tprice { font-family: var(--font-label); font-weight: 500; font-size: 1.9rem; color: var(--ink); }
.tier .tprice small { font-size: .85rem; color: var(--muted); font-weight: 400; }
.tier .tdur { font-family: var(--font-label); font-size: .85rem; color: var(--muted); margin-bottom: 1rem; }
.tier p { font-size: .95rem; color: var(--muted); }
.tier .adds { font-size: .85rem; color: var(--muted); margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.tier .btn { margin-top: 1.4rem; align-self: flex-start; }

/* ---------- Split image + text ---------- */
.split .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: center; }
.split.rev .split-media { order: 2; }
.split-media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 5 / 4; background: var(--surface-cool); }
.split-media img { width: 100%; height: 100%; object-fit: cover; }
.split-copy h2 { margin-bottom: 1.1rem; }
.split-copy p { color: var(--muted); }
.split-copy .btn { margin-top: 1.6rem; }
.split-copy .thread { margin-bottom: 1rem; }

/* sage thread (GREEN PEEL only) */
.thread { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-label); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sage); }
.thread::before { content: ""; width: 26px; height: 1.5px; background: var(--sage); }

/* ---------- GREEN PEEL method comparison table ---------- */
.methods { width: 100%; border-collapse: collapse; border-top: 2px solid var(--sage); }
.methods caption { text-align: left; }
.methods th, .methods td { text-align: left; padding: 1.1rem 1.1rem; vertical-align: top; border-bottom: 1px solid var(--line); }
.methods thead th { font-family: var(--font-label); font-weight: 500; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sage); }
.methods tbody tr:nth-child(even) { background: var(--surface); }
.methods .m-name { font-family: var(--font-display); font-size: 1.3rem; }
.methods .m-sub { font-family: var(--font-label); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: block; margin-top: .2rem; }
.methods .m-price { font-family: var(--font-label); font-weight: 500; color: var(--action); white-space: nowrap; }
.methods td small { color: var(--muted); }
.method-cards { display: none; } /* mobile fallback rendered from same data */

/* ---------- FAQ accordion ---------- */
.faq { border-top: 1px solid var(--line-strong); max-width: 52rem; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 1.25rem 2.5rem 1.25rem 0; position: relative; font-family: var(--font-label); font-weight: 500; font-size: 1.08rem; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: .4rem; top: 1.5rem; width: 11px; height: 11px; border-right: 2px solid var(--sage); border-bottom: 2px solid var(--sage); transform: rotate(45deg); transition: transform var(--dur-fast) var(--ease); }
.faq details[open] summary { color: var(--sage); }
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq .answer { padding: 0 2.5rem 1.4rem 0; color: var(--muted); }
.faq .answer p + p { margin-top: .8rem; }

/* ---------- Heritage band (dark, once) ---------- */
.band { background: var(--band); color: var(--band-text); }
.band h2, .band h3 { color: var(--band-text); }
.band .lead { color: var(--band-muted); }
.heritage .wrap { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: var(--gap); align-items: center; }
.heritage h2 { max-width: 14ch; margin-bottom: 1rem; }
.timeline { list-style: none; display: grid; gap: 0; border-left: 1px solid var(--line-band); }
.timeline li { position: relative; padding: 1.15rem 0 1.15rem 1.8rem; }
.timeline li::before { content: ""; position: absolute; left: -5px; top: 1.55rem; width: 9px; height: 9px; border-radius: 50%; background: var(--sage-light); }
.timeline .yr { font-family: var(--font-label); font-weight: 500; font-size: 1.5rem; color: var(--band-blush); line-height: 1; }
.timeline .ev { color: var(--band-muted); margin-top: .35rem; font-size: .98rem; }
.heritage .points { list-style: none; margin-top: 1.6rem; display: grid; gap: .7rem; }
.heritage .points li { padding-left: 1.5rem; position: relative; color: var(--band-muted); font-size: .98rem; }
.heritage .points li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--sage-light); }

/* ---------- CTA band (light) ---------- */
.cta .wrap { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.cta h2 { max-width: 16ch; }
.cta .cta-meta { font-family: var(--font-label); font-size: .9rem; color: var(--muted); margin-top: .6rem; }
.cta .btn { flex: none; }

/* ---------- Gutschein teaser ---------- */
.gutschein .split-media { aspect-ratio: 16 / 9; }

/* ---------- Page hero (sub pages) ---------- */
.page-hero { padding: clamp(3rem, 6vw, 5rem) 0 clamp(1.5rem, 3vw, 2.5rem); }
.page-hero .crumb { font-family: var(--font-label); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.page-hero h1 { margin: .8rem 0 1rem; }
.page-hero .lead { color: var(--muted); }

/* in-page anchors (Behandlungen) */
.anchors { position: sticky; top: 74px; z-index: 40; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.anchors .wrap { display: flex; gap: 1.4rem; overflow-x: auto; padding-top: .9rem; padding-bottom: .9rem; scrollbar-width: none; }
.anchors .wrap::-webkit-scrollbar { display: none; }
.anchors a { font-family: var(--font-label); font-size: .88rem; color: var(--muted); text-decoration: none; white-space: nowrap; }
.anchors a:hover { color: var(--action); }

.cat { padding-top: clamp(2.5rem, 5vw, 4rem); scroll-margin-top: 130px; }
.cat > .wrap > h2 { margin-bottom: 1.6rem; }
.cat > .wrap > a.btn { margin-top: clamp(1.2rem, 2vw, 1.6rem); }

/* ---------- Contact / booking ---------- */
.contact .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: start; }
.contact-facts dl { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.4rem; margin-top: 1.4rem; }
.contact-facts dt { font-family: var(--font-label); font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-top: .15rem; }
.contact-facts dd { color: var(--ink); }
.contact-facts dd a { color: var(--action); text-decoration: none; }
.contact-facts dd a:hover { text-decoration: underline; }
.contact-facts .hours { display: grid; grid-template-columns: auto auto; gap: .2rem 1rem; justify-content: start; }
.book-cta { margin-top: 2rem; padding: 1.6rem; background: var(--surface); border-radius: var(--radius); }
.book-cta h3 { font-family: var(--font-display); font-size: 1.3rem; margin-bottom: .5rem; }
.book-cta p { font-size: .95rem; color: var(--muted); margin-bottom: 1rem; }

form.contact-form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: .35rem; }
.field label { font-family: var(--font-label); font-size: .82rem; letter-spacing: .04em; color: var(--muted); }
.field label .req { color: var(--action); }
.field input, .field textarea {
  font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--radius);
  padding: .75rem .9rem; transition: border-color var(--dur-fast);
}
.field input:focus, .field textarea:focus { border-color: var(--action); }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--action); outline-offset: 1px; }
.field textarea { min-height: 120px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.form-note { font-size: .82rem; color: var(--muted); }
.map { display: block; margin-top: var(--gap); border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 6; border: 1px solid var(--line); }
.map img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.2) sepia(.05); transition: filter var(--dur) var(--ease), transform var(--dur) var(--ease); }
.map:hover img { filter: none; transform: scale(1.02); }

/* ---------- Footer (walnut, dark) ---------- */
.footer { background: var(--band); color: var(--band-text); padding: clamp(3.5rem,7vw,5rem) 0 2rem; }
.footer .cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 2.5rem; }
.footer .brand .word { color: var(--band-text); }
.footer p.about { color: var(--band-muted); font-size: .95rem; margin-top: 1rem; max-width: 32ch; }
.footer h5 { font-family: var(--font-label); font-weight: 500; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--band-text); margin-bottom: 1.1rem; }
.footer ul { list-style: none; display: grid; gap: .65rem; }
.footer a { color: var(--band-muted); text-decoration: none; font-size: .95rem; }
.footer a:hover { color: var(--band-blush); }
.footer .hours-mini { color: var(--band-muted); font-size: .95rem; display: grid; gap: .3rem; }
.footer .bottom { border-top: 1px solid var(--line-band); margin-top: 3rem; padding-top: 1.5rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; color: var(--band-muted); font-size: .82rem; }
.footer .bottom a { font-size: .82rem; }
.footer .socials { display: flex; gap: .2rem; margin-left: -.6rem; }
.footer .socials a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }

/* ---------- Reveal on scroll (progressive enhancement: only hides when JS is active) ---------- */
.reveal { transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.js .reveal:not(.in) { opacity: 0; transform: translateY(14px); }
.timeline li.reveal { transition-delay: var(--d, 0ms); }

/* ---------- View transitions (hold the oat constant) ---------- */
@view-transition { navigation: auto; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .nav-links, .nav-right .lang, .nav-gutschein { display: none; }
  .burger { display: flex; }
  .header .wrap { height: 66px; }
  .anchors { top: 66px; }
  body.at-top .nav-cta { opacity: 1; transform: none; pointer-events: auto; } /* always reachable on mobile */

  .hero .wrap, .intro .wrap, .split .wrap, .split.rev .split-media,
  .heritage .wrap, .contact .wrap { grid-template-columns: 1fr; }
  .split.rev .split-media { order: 0; }
  .hero-media { aspect-ratio: 4 / 3.4; }
  .tiers { grid-template-columns: 1fr; }
  .tier { border-right: 0; border-bottom: 1px solid var(--line); }
  .tier:last-child { border-bottom: 0; }
  .form-row { grid-template-columns: 1fr; }
  .footer .cols { grid-template-columns: 1fr 1fr; gap: 2rem; }

  /* GREEN PEEL table → stacked cards on mobile */
  .methods { display: none; }
  .method-cards { display: grid; gap: 1.1rem; border-top: 2px solid var(--sage); padding-top: 1.4rem; }
  .mcard { padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); }
  .mcard .m-name { font-family: var(--font-display); font-size: 1.35rem; }
  .mcard .m-sub { font-family: var(--font-label); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--sage); display: block; margin-top: .15rem; }
  .mcard .m-price { font-family: var(--font-label); font-weight: 500; color: var(--action); }
  .mcard dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; margin-top: .7rem; font-size: .92rem; }
  .mcard dt { font-family: var(--font-label); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--sage); padding-top: .15rem; }
  .mcard dd { color: var(--muted); }
}
@media (max-width: 560px) {
  .footer .cols { grid-template-columns: 1fr; }
  .prow { grid-template-columns: 1fr auto; }
  .prow .p-dur { display: none; }
  .cta .wrap { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 400px) {
  .nav-cta { display: none; } /* booking stays in the burger menu + hero */
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .btn, .btn .arrow, .nav-cta,
  .nav-links a::after, .btn-ghost .u::after, a.link, a.trow { transition: none !important; }
  @view-transition { navigation: none; }
}