/* =========================================================
   Vitalcenter Rüsselsheim
   1. Fonts
   2. Design Tokens
   3. Reset & Base
   4. Typography
   5. Layout
   6. Buttons & Chips
   7. Surfaces (Glass / Gradient Cards)
   8. Header & Navigation
   9. Hero
  10. Welcome
  11. Programme (Bento)
  12. Ablauf (Steps)
  13. Beauty / Beckenboden / Vitalshop
  14. Team
  15. Kontakt
  16. Footer
  17. Legal Pages
  18. Motion
   ========================================================= */

/* ---------- 1. Fonts ---------- */

@font-face {
  font-family: 'Questrial';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/questrial-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Questrial';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/questrial-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Zeyada';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/zeyada-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Zeyada';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/zeyada-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- 2. Design Tokens ---------- */

:root {
  /* Palette — the only four colours in this project */
  --palladian: #eee9df;
  --oatmeal: #c9c1b1;
  --flame: #ffb162;
  --truffle: #a35139;

  /* Semantic colour roles */
  --bg: var(--palladian);
  --ink: var(--truffle);
  --ink-invert: var(--palladian);
  --line: var(--oatmeal);
  --accent: var(--flame);

  /* Gradients */
  --grad-hero: radial-gradient(
    85% 75% at 92% 108%,
    #a35139 0%,
    #ffb162 34%,
    #c9c1b1 62%,
    #eee9df 88%
  );
  --grad-tall: linear-gradient(
    180deg,
    #eee9df 0%,
    #c9c1b1 45%,
    #ffb162 80%,
    #a35139 100%
  );
  --grad-warm: linear-gradient(160deg, #ffb162 0%, #a35139 70%);

  /* CTA: Fuellung bleibt im Truffle-Tiefenbereich, damit Palladian-Text
     ueberall >= 4.58:1 haelt. Flame sitzt nur im Ring, nie unter der Schrift. */
  --grad-cta: linear-gradient(135deg, #a35139 0%, #8c4230 100%);
  --grad-cta-hover: linear-gradient(135deg, #a35139 0%, #99492f 100%);
  --grad-cta-ring: linear-gradient(135deg, #ffb162 0%, #a35139 72%);
  --grad-glow: radial-gradient(80% 140% at 100% 0%, #ffb162 0%, #a35139 55%);
  --grad-team: linear-gradient(
    180deg,
    #eee9df 0%,
    #c9c1b1 30%,
    #ffb162 70%,
    #a35139 100%
  );

  /* Glass */
  --glass-bg: rgba(238, 233, 223, 0.75);
  --glass-bg-strong: rgba(238, 233, 223, 0.85);
  --glass-bg-soft: rgba(238, 233, 223, 0.6);
  --glass-blur: blur(14px);

  /* Noise overlay against gradient banding */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Radii */
  --r-pill: 999px;
  --r-card: 28px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-arch: 220px 220px 28px 28px;

  /* Spacing — 4/8px raster */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-9: 36px;
  --s-12: 48px;
  --s-18: 72px;
  --s-28: 112px;

  --gap: var(--s-4);
  --section-y: var(--s-18);
  --card-pad: var(--s-8);
  --gutter: var(--s-5);
  --maxw: 1280px;
  --header-h: 76px;

  /* Typography */
  --font-sans: 'Questrial', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    system-ui, sans-serif;
  --font-script: 'Zeyada', 'Questrial', cursive;

  --t-h1: clamp(50px, 8vw, 110px);
  --t-h2: clamp(34px, 4.6vw, 60px);
  --t-h3: clamp(32px, 3.2vw, 40px);
  --t-h4: clamp(22px, 2.2vw, 26px);
  --t-body: clamp(17px, 1.3vw, 20px);
  --t-small: 15px;
  --t-label: 13px;
  --t-script: clamp(36px, 4.5vw, 54px);

  --measure: 60ch;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 200ms;
}

@media (min-width: 640px) {
  :root {
    --gutter: var(--s-8);
    --card-pad: var(--s-9);
  }
}

@media (min-width: 960px) {
  :root {
    --section-y: var(--s-28);
    --header-h: 84px;
  }
}

/* ---------- 3. Reset & Base ---------- */

*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

button {
  font: inherit;
  color: inherit;
}

ul, ol {
  padding: 0;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

/* Focus ring — identical everywhere, per spec */

:focus-visible {
  outline: 2px solid var(--truffle);
  outline-offset: 3px;
  border-radius: var(--s-1);
}

/* Visually hidden, still announced */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--s-2);
  left: var(--s-2);
  z-index: 200;
  padding: var(--s-3) var(--s-5);
  background: var(--truffle);
  color: var(--palladian);
  border-radius: var(--r-pill);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--dur) var(--ease);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* ---------- 4. Typography ---------- */

h1, h2, h3 {
  font-weight: 400;
  text-wrap: balance;
}

h1 {
  font-size: var(--t-h1);
  line-height: 0.98;
  letter-spacing: -0.03em;
}

h2 {
  font-size: var(--t-h2);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

h3 {
  font-size: var(--t-h3);
  line-height: 1.06;
  letter-spacing: -0.02em;
}

p {
  text-wrap: pretty;
  max-width: var(--measure);
}

.eyebrow {
  display: block;
  font-size: var(--t-label);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: var(--s-4);
}

.script {
  font-family: var(--font-script);
  font-size: var(--t-script);
  line-height: 1.1;
  letter-spacing: 0;
  max-width: none;
}

.small {
  font-size: var(--t-small);
  line-height: 1.55;
}

/* Text stack — vertical rhythm inside prose blocks */

.stack-lg > * + * {
  margin-top: var(--s-6);
}

/* ---------- 5. Layout ---------- */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

main > section {
  padding-block: var(--section-y);
  scroll-margin-top: calc(var(--header-h) + var(--s-6));
}

/* ch must sit on the heading itself — on the wrapper it would resolve
   against the 20px body size and squeeze a 60px headline to ~15 chars. */

.two-col {
  display: grid;
  gap: var(--s-12);
  align-items: start;
}

@media (min-width: 960px) {
  .two-col {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-18);
  }
}

/* ---------- 6. Buttons & Chips ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: var(--s-3) var(--s-6);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-size: 16px;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
    color var(--dur) var(--ease), border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn--primary:hover {
  background-image: var(--grad-cta-hover), var(--grad-cta-ring);
}

.btn--ghost {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-color: var(--oatmeal);
  color: var(--truffle);
}

/* On a Truffle background: inverted outline button */

/* External link marker */

.ext::after {
  content: ' \2197';
  display: inline-block;
  font-size: 0.85em;
  text-decoration: none;
}

.tel-link {
  white-space: nowrap;
}

/* ---------- 7. Surfaces ---------- */

/* Gradient cards get a noise veil to kill banding */

/* Glass panel — guarantees Truffle text keeps ~5.5:1 over any gradient */

.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--oatmeal);
  border-radius: var(--r-md);
  padding: var(--s-6);
  color: var(--truffle);
}

/* Inside a Truffle zone, text flips to Palladian */

@supports not (backdrop-filter: blur(4px)) {
  .glass, .btn--ghost {
    background: var(--palladian);
  }
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-right: auto;
  min-width: 0;
  text-decoration: none;
  color: var(--truffle);
}

.brand__dot {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--grad-warm);
}

.nav {
  display: none;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  list-style: none;
}

.header-pill .btn {
  flex: 0 0 auto;
  min-height: 44px;
  padding-inline: var(--s-5);
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--oatmeal);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--truffle);
  cursor: pointer;
}

.nav-toggle__bars {
  position: relative;
  display: block;
  width: 18px;
  height: 1px;
  background: currentColor;
}

.nav-toggle__bars::before, .nav-toggle__bars::after {
  content: '';
  position: absolute;
  left: 0;
  width: 18px;
  height: 1px;
  background: currentColor;
  transition: transform var(--dur) var(--ease);
}

.nav-toggle__bars::before {
  top: -6px;
}

.nav-toggle__bars::after {
  top: 6px;
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bars {
  background: transparent;
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bars::before {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bars::after {
  transform: translateY(-6px) rotate(-45deg);
}

/* Mobile sheet */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: grid;
  align-items: end;
  background: rgba(163, 81, 57, 0.28);
  opacity: 0;
  visibility: hidden;
  transition: opacity 240ms var(--ease), visibility 240ms var(--ease);
}

.sheet[data-open='true'] {
  opacity: 1;
  visibility: visible;
}

.sheet__panel {
  background: var(--palladian);
  border-top: 1px solid var(--oatmeal);
  border-radius: var(--r-card) var(--r-card) 0 0;
  padding: var(--s-8) var(--gutter) calc(var(--s-8) + env(safe-area-inset-bottom));
  transform: translateY(12px);
  transition: transform 240ms var(--ease);
}

.sheet[data-open='true'] .sheet__panel {
  transform: translateY(0);
}

.sheet__list {
  list-style: none;
  display: grid;
  gap: var(--s-1);
  margin-bottom: var(--s-6);
}

.sheet__list a {
  display: block;
  padding: var(--s-4) var(--s-2);
  font-size: 22px;
  letter-spacing: -0.015em;
  text-decoration: none;
  border-bottom: 1px solid var(--oatmeal);
}

.sheet__list li:last-child a {
  border-bottom: 0;
}

.sheet .btn {
  width: 100%;
}

@media (min-width: 960px) {
  .nav {
    display: block;
  }

  .nav-toggle, .sheet {
    display: none;
  }
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-8);
}

.hero__script {
  margin-top: var(--s-8);
}

.hero__cards {
  display: grid;
  gap: var(--gap);
  margin-top: var(--s-12);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  max-width: 720px;
}

.hero__card .eyebrow {
  margin-bottom: var(--s-2);
}

.hero__card p {
  font-size: 17px;
  line-height: 1.5;
}

@media (min-width: 960px) {
  .hero__cards {
    margin-top: var(--s-18);
  }
}

.fact h3 {
  font-size: var(--t-h4);
  margin-bottom: var(--s-2);
}

.fact p {
  font-size: 17px;
  line-height: 1.55;
}

/* ---------- 11. Programme (Bento) ---------- */

/* Card: Metabolic Balance — tall, light top / dark bottom */

/* Card: Vital-Diät — warm gradient, glass body, script in Truffle zone */

/* Card: Power Kurzprogramm — glow, text sits in the Truffle region */

/* Card: Fastenberatung — quiet, full width */

/* Cost disclosure */

.cost-list {
  list-style: none;
  display: grid;
  gap: var(--s-2);
  font-size: 16px;
}

.cost-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--oatmeal);
}

.cost-list li:last-child {
  border-bottom: 0;
}

.hours li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2) var(--s-5);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-sm);
  border: 1px solid transparent;
}

.hours li + li {
  border-top-color: var(--oatmeal);
  border-radius: var(--r-sm);
}

.hours__day {
  letter-spacing: -0.01em;
}

.hours__time {
  font-size: 17px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.hours li[data-today='true'] {
  background: var(--truffle);
  color: var(--palladian);
  border-color: var(--truffle);
}

.hours li[data-closed='true'] .hours__time {
  font-style: italic;
}

.site-footer__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-6);
  justify-content: space-between;
  font-size: var(--t-small);
}

.site-footer nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  list-style: none;
}

/* ---------- 17. Legal Pages ---------- */

.page-head {
  padding-block: var(--s-12) var(--s-8);
}

.page-head .eyebrow {
  margin-bottom: var(--s-3);
}

.prose {
  padding-bottom: var(--section-y);
  max-width: 72ch;
}

.prose h2 {
  font-size: clamp(26px, 3vw, 34px);
  margin-top: var(--s-12);
  margin-bottom: var(--s-4);
}

.prose p, .prose li {
  max-width: 68ch;
}

.prose p + p {
  margin-top: var(--s-4);
}

.prose ul, .prose ol {
  margin-top: var(--s-4);
  padding-left: var(--s-6);
  display: grid;
  gap: var(--s-2);
}

.prose ol ul {
  margin-top: var(--s-2);
}

.prose dl {
  display: grid;
  gap: var(--s-2) var(--s-6);
  margin-top: var(--s-4);
}

.prose dt {
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.prose dd {
  margin: 0 0 var(--s-5);
  line-height: 1.6;
}

@media (min-width: 640px) {
  .prose dl {
    grid-template-columns: 200px 1fr;
    align-items: baseline;
  }

  .prose dd {
    margin-bottom: var(--s-4);
  }
}

.prose .callout {
  margin-top: var(--s-6);
  padding: var(--s-6);
  border: 1px solid var(--oatmeal);
  border-radius: var(--r-md);
  background: var(--glass-bg-soft);
}

/* ---------- 18. Motion ---------- */

/* Reveal on scroll — only armed once JS confirms IntersectionObserver */

.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 400ms var(--ease), transform 400ms var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

.js-reveal [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .js-reveal [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

@media print {
  .site-header, .sheet, .hero__actions, .btn {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }
}

/* Surfaces: hairline + soft shadow instead of hard oatmeal outlines */
.fact {
  padding: var(--s-6);
  border-radius: var(--r-md);
  border: 1px solid var(--oatmeal);
  border-color: var(--line-soft);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.glass {
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, var(--shadow-sm);
}

.btn--ghost {
  border-color: var(--line-soft);
}

.btn--primary {
  background-image: var(--grad-cta), var(--grad-cta-ring);
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  border: 1px solid transparent;
  color: var(--palladian);
  box-shadow: 0 8px 20px -10px rgba(163, 81, 57, 0.7);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
}

.eyebrow::before {
  content: '';
  width: 20px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.glass .eyebrow::before, .hero__cards .eyebrow::before {
  display: none;
}

/* ---------- 9. Hero ---------- */
/* Hero: copy left, image arch right */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  margin-top: calc(-1 * (var(--header-h) + var(--s-6)));
  padding-top: calc(var(--header-h) + var(--s-12));
  padding-bottom: var(--s-18);
  overflow: hidden;
  min-height: auto;
  background: var(--grad-hero);
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--noise);
  pointer-events: none;
  opacity: 0.04;
}

.hero__inner {
  width: 100%;
  display: grid;
  gap: var(--s-6) var(--s-12);
  align-content: center;
}

.hero__inner > * {
  margin-top: 0;
  min-width: 0;
}

.hero__actions {
  margin-top: var(--s-2);
}

.hero__media {
  margin: 0;
  position: relative;
  aspect-ratio: 4 / 5;
  max-height: 560px;
  border-radius: var(--r-arch);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  order: -1;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 80% 50%;
}

.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(163, 81, 57, 0) 55%,
    rgba(163, 81, 57, 0.28) 100%
  );
  pointer-events: none;
}

.hero__cards {
  margin-top: var(--s-4);
  max-width: 640px;
}

@media (min-width: 960px) {
  .hero {
    padding-bottom: var(--s-28);
  }

  .hero__inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }

  .hero__inner > * {
    grid-column: 1;
  }

  .hero__media {
    grid-column: 2;
    grid-row: 1 / span 6;
    order: 0;
    align-self: center;
    max-height: none;
    aspect-ratio: 4 / 5.2;
  }

  .hero__cards {
    margin-top: var(--s-8);
  }
}

.lead {
  line-height: 1.55;
  font-size: clamp(17px, 1.4vw, 20px);
}

.hours-today {
  letter-spacing: -0.01em;
  font-size: 18px;
}

.hero__card p {
  font-size: 15px;
}

.btn {
  font-size: 15px;
  min-height: 46px;
}

.hero__copy {
  text-align: center;
}

.hero__copy .eyebrow {
  justify-content: center;
}

.hero h1 {
  margin-bottom: 0;
  max-width: 18ch;
  margin-inline: auto;
  font-size: var(--t-h1);
}

.hero__media {
  max-width: 340px;
  width: 100%;
  margin-inline: auto;
  justify-self: center;
}

.hero__lead {
  max-width: 40ch;
}

.hero__script {
  color: var(--truffle);
  line-height: 1.15;
}

.hero__cards {
  display: grid;
  max-width: none;
  grid-template-columns: 1fr;
}

@media (min-width: 960px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr) 340px minmax(0, 1fr);
    grid-template-areas:
      'copy   copy  copy'
      'lead   media cards'
      'actions media cards'
      'script media cards';
    column-gap: var(--s-12);
    row-gap: var(--s-5);
    align-items: start;
  }

  .hero__inner > * {
    grid-column: auto;
  }

  .hero__copy {
    grid-area: copy;
    margin-bottom: var(--s-6);
  }

  .hero__lead {
    grid-area: lead;
    align-self: end;
  }

  .hero__actions {
    grid-area: actions;
    margin-top: 0;
  }

  .hero__script {
    grid-area: script;
    align-self: start;
    margin-top: var(--s-4);
  }

  .hero__media {
    grid-area: media;
    grid-row: 2 / span 3;
    aspect-ratio: 3 / 4;
    max-height: 480px;
    align-self: stretch;
    height: 100%;
  }

  .hero__cards {
    grid-area: cards;
    grid-row: 2 / span 3;
    align-content: center;
    margin-top: 0;
    gap: var(--s-4);
  }
}

/* Welcome: heading left, copy right, three facts in a row below */

#willkommen .two-col {
  gap: var(--s-8) var(--s-18);
}

#willkommen .stack-lg {
  display: contents;
}

#willkommen .stack-lg > * + * {
  margin-top: 0;
}

#willkommen .welcome__aside {
  grid-column: 1 / -1;
}

@media (min-width: 960px) {
  #willkommen .stack-lg > div:first-child {
    grid-column: 1;
    grid-row: 1 / span 3;
  }

  #willkommen .stack-lg > p {
    grid-column: 2;
  }

  #willkommen .welcome__aside {
    grid-template-columns: repeat(3, 1fr);
    margin-top: var(--s-6);
  }
}

#willkommen .stack-lg > p {
  max-width: 52ch;
}

@media (max-width: 959px) {
  .hero__media {
    order: 1;
    max-width: 280px;
    aspect-ratio: 4 / 3.4;
    max-height: 260px;
  }

  .hero__inner > .hero__copy {
    order: -2;
  }
}

/* ---------- 21. Call to action ---------- */

.btn--arrow::after {
  content: '\2192';
  display: inline-block;
  transition: transform var(--dur) var(--ease);
}

.btn--arrow:hover::after {
  transform: translateX(4px);
}

/* ---------- 8. Header & Navigation ---------- */
/* ---------- 22. Header: full-width bar ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding-block: 0;
  border-bottom: 1px solid transparent;
  transition: background-color 240ms var(--ease), border-color 240ms var(--ease),
    box-shadow 240ms var(--ease);
}

.site-header.is-scrolled {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-bottom-color: var(--line-soft);
  box-shadow: 0 10px 30px -22px rgba(163, 81, 57, 0.5);
}

.header-pill {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  border-color: var(--line-soft);
  min-height: var(--header-h);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Logo mark in header */
.brand__mark {
  flex: 0 0 auto;
  width: 30px;
  height: 37px;
}

.brand__name {
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(16px, 2.2vw, 20px);
}

.nav__link {
  display: inline-block;
  text-decoration: none;
  color: var(--truffle);
  transition: background-color var(--dur) var(--ease);
  font-size: 15px;
  position: relative;
  padding: var(--s-2) var(--s-3);
  border-radius: 0;
  background: none;
}

.nav__link:hover {
  background: none;
}

.nav__link:hover::after {
  transform: scaleX(1);
}

@media (min-width: 960px) {
  .header-pill {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--s-8);
  }

  .header-pill .btn {
    justify-self: end;
  }

  .nav__list {
    gap: var(--s-4);
  }
}

@media (max-width: 959px) {
  .site-header {
    background: var(--glass-bg-strong);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
  }

  .header-pill {
    min-height: 64px;
  }
}

/* ---------- 23. Header: liquid glass capsule ---------- */

.site-header, .site-header.is-scrolled {
  background: none;
  border-bottom-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding-block: var(--s-3);
}

.header-pill {
  position: relative;
  isolation: isolate;
  min-height: 64px;
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-6);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: var(--r-pill);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(247, 243, 236, 0.34) 45%,
    rgba(247, 243, 236, 0.46) 100%
  );
  -webkit-backdrop-filter: blur(12px) saturate(1.8) brightness(1.06);
  backdrop-filter: blur(12px) saturate(1.8) brightness(1.06);
  box-shadow:
    inset 1.5px 1.5px 0 rgba(255, 255, 255, 0.85),
    inset -1px -1px 0 rgba(255, 255, 255, 0.3),
    inset 0 0 22px rgba(255, 255, 255, 0.28),
    0 14px 34px -14px rgba(163, 81, 57, 0.4),
    0 2px 6px rgba(163, 81, 57, 0.1);
  transition: box-shadow 240ms var(--ease), background-color 240ms var(--ease);
}

/* Refraction: bend what sits behind the glass (Chromium) */

@supports (backdrop-filter: url(#vc-liquid)) {
  .header-pill {
    -webkit-backdrop-filter: url(#vc-liquid) blur(6px) saturate(1.8) brightness(1.06);
    backdrop-filter: url(#vc-liquid) blur(6px) saturate(1.8) brightness(1.06);
  }
}

/* Specular sheen across the top-left edge */

.header-pill::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(120% 140% at 8% -30%, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 45%);
  pointer-events: none;
}

/* Soft caustic on the lower edge */

.header-pill::after {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
  pointer-events: none;
}

.site-header.is-scrolled .header-pill {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.62) 0%,
    rgba(247, 243, 236, 0.5) 50%,
    rgba(247, 243, 236, 0.58) 100%
  );
}

.nav__link::after {
  content: '';
  position: absolute;
  bottom: 2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 240ms var(--ease);
  left: var(--s-3);
  right: var(--s-3);
}

.header-pill .btn--primary {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 8px 18px -8px rgba(163, 81, 57, 0.7);
}

.nav-toggle {
  border-color: rgba(163, 81, 57, 0.25);
  background: rgba(255, 255, 255, 0.35);
}

@media (min-width: 960px) {
  .header-pill {
    padding-right: var(--s-2);
  }
}

@media (max-width: 959px) {
  .site-header {
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .header-pill, .site-header.is-scrolled .header-pill {
    background: var(--surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ---------- 24. Liquid glass on surfaces ---------- */

/* Shared recipe: translucent fill, bright rim, specular sheen.
   Large panels get blur + highlights only; the refraction filter stays on
   the small surfaces where it is cheap and actually visible. */

.glass, .btn--ghost {
  position: relative;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.46) 0%,
    rgba(247, 243, 236, 0.3) 50%,
    rgba(247, 243, 236, 0.42) 100%
  );
  -webkit-backdrop-filter: blur(14px) saturate(1.7) brightness(1.05);
  backdrop-filter: blur(14px) saturate(1.7) brightness(1.05);
  box-shadow:
    inset 1.5px 1.5px 0 rgba(255, 255, 255, 0.8),
    inset -1px -1px 0 rgba(255, 255, 255, 0.28),
    inset 0 0 20px rgba(255, 255, 255, 0.22),
    0 12px 30px -16px rgba(163, 81, 57, 0.38);
}

.glass::after {
  /* the disclose "+" marker already uses ::after on its summary, not here */
  content: '';
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), transparent);
  pointer-events: none;
}

/* Hero cards and ghost buttons: small enough for real refraction */

@supports (backdrop-filter: url(#vc-liquid)) {
  .hero__card, .btn--ghost {
    -webkit-backdrop-filter: url(#vc-liquid) blur(8px) saturate(1.7) brightness(1.05);
    backdrop-filter: url(#vc-liquid) blur(8px) saturate(1.7) brightness(1.05);
  }
}

/* Cost disclosure sits inside the gradient card: keep summary text readable */

/* Mobile menu sheet */

.sheet__panel {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-bottom: 0;
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.72) 0%,
    rgba(247, 243, 236, 0.62) 100%
  );
  -webkit-backdrop-filter: blur(22px) saturate(1.7);
  backdrop-filter: blur(22px) saturate(1.7);
  box-shadow: inset 1.5px 1.5px 0 rgba(255, 255, 255, 0.8);
}

@media (prefers-reduced-transparency: reduce) {
  .glass, .btn--ghost, .sheet__panel {
    background: var(--surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Small phones: the call button lives in the menu sheet, give the name room */

@media (max-width: 479px) {
  .header-pill > .btn {
    display: none;
  }
}

/* Gradient text accent — one phrase per headline */
.accent {
  -webkit-text-fill-color: transparent;
  color: transparent;
  padding-bottom: 0.08em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background: linear-gradient(100deg, #a35139 0%, #bd5f3e 60%, #ca6a41 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.header-pill::before, .glass::before, .btn--ghost::before {
  opacity: 0.85;
}

/* Gradient cards: calmer shadow so they sit in the page instead of on it */

/* ---------- 26. Bento boxes: even edges, calmer fills ---------- */

/* One uniform hairline drawn inside the box (box-shadow, not border), so it
   does not pick up the gradient underneath and look stronger on one side. */

/* Glass panels inside the boxes: same rim on all four sides, no caustic line */

/* Light cards stay light, with dark text on top */

/* Mid-tone cards: flat Truffle base with one soft glow in the corner */

/* ---------- 27. Section transitions: no hard edges ---------- */

/* Every full-bleed background starts and ends in the page colour, and soft
   warm glows on <main> carry the colour from one section into the next. */

main {
  background:
    radial-gradient(ellipse 760px 460px at 100% 11%, rgba(255, 190, 130, 0.16), transparent 70%),
    radial-gradient(ellipse 760px 480px at 0% 25%, rgba(255, 200, 150, 0.13), transparent 70%),
    radial-gradient(ellipse 800px 500px at 100% 45%, rgba(255, 190, 130, 0.13), transparent 70%),
    radial-gradient(ellipse 760px 480px at 0% 58%, rgba(255, 200, 150, 0.12), transparent 70%),
    radial-gradient(ellipse 800px 500px at 100% 92%, rgba(255, 190, 130, 0.14), transparent 70%);
}

/* Team arch placeholder: warmer than flat grey */

/* Section rhythm: alternate a faint tint so the page reads in bands */
/* Process band: transparent at both ends instead of a tinted block */
#ablauf {
  background: linear-gradient(
    180deg,
    rgba(247, 243, 236, 0) 0%,
    rgba(247, 243, 236, 0.85) 50%,
    rgba(247, 243, 236, 0) 100%
  );
}

/* ---------- 16. Footer ---------- */
/* Team: page colour, peach in the middle, page colour again */

/* Footer: a line that fades out at the sides */
.site-footer {
  padding-block: var(--s-8);
  border-top: 0;
  position: relative;
}

.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--gutter);
  right: var(--gutter);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(163, 81, 57, 0.22), transparent);
}

/* Hero: headline on top, image arch in the centre, text left, cards right */
/* Process steps and team keep their markup, just tighter */
/* Hero dissolves into the page over its lower third */
/* Fade only the hero background, never its content */
.hero {
  min-height: auto;
  padding-top: calc(var(--header-h) + var(--s-18));
  padding-bottom: calc(var(--s-28) + var(--s-8));
  background: none;
  -webkit-mask-image: none;
  mask-image: none;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--grad-hero);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
}

main > section.ed {
  padding-block: var(--section-y);
  background: none;
}

.ed__head p {
  margin-top: var(--s-5);
  max-width: 44ch;
}

.ed__head h2 {
  max-width: 16ch;
}

.ed__head--wide {
  margin-bottom: var(--s-12);
}

.ed__head--wide h2 {
  max-width: 24ch;
}

@media (min-width: 960px) {
  .ed__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--s-18);
    align-items: start;
  }

  .ed__grid > .ed__head {
    position: sticky;
    top: calc(var(--header-h) + var(--s-8));
  }
}

@media (max-width: 959px) {
  .ed__grid > .ed__head {
    margin-bottom: var(--s-9);
  }
}

/* Small caps label used for tags */

.row__tag {
  display: block;
  margin-bottom: var(--s-3);
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ----- Programme rows ----- */

.rows {
  list-style: none;
}

.row {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-5) var(--s-8);
  padding-block: var(--s-9);
  border-top: 1px solid transparent;
  border-image: var(--hair-fade) 1;
}

.row:last-child {
  border-bottom: 1px solid transparent;
  border-image: var(--hair-fade) 1;
}

.row::before {
  content: '';
  position: absolute;
  inset: 0 calc(-1 * var(--s-6));
  z-index: -1;
  background: linear-gradient(90deg, rgba(255, 190, 130, 0.14), rgba(255, 190, 130, 0) 80%);
  opacity: 0;
  transition: opacity 300ms var(--ease);
  pointer-events: none;
  border-radius: var(--r-md);
}

.row:hover::before, .row:focus-within::before {
  opacity: 1;
}

.row__num {
  min-width: 2ch;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.row__main {
  display: grid;
  gap: var(--s-4);
  justify-items: start;
  min-width: 0;
}

.row__main h3 {
  font-size: var(--t-h3);
}

.row__main p {
  max-width: 54ch;
}

.row__script {
  color: var(--truffle);
  margin-top: var(--s-2);
}

.inline-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) 0;
  list-style: none;
  font-size: var(--t-small);
}

.inline-list li + li::before {
  content: '\00b7';
  margin-inline: var(--s-3);
  opacity: 0.5;
}

.inline-list--wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 0 var(--s-8);
}

.inline-list--wrap li {
  padding-block: var(--s-2);
  border-bottom: 1px solid var(--hair);
}

.inline-list--wrap li + li::before {
  content: none;
}

/* Text link with arrow */

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding-bottom: 2px;
  font-size: 16px;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: gap var(--dur) var(--ease);
}

.link-arrow::after {
  content: '\2192';
}

.link-arrow.ext-link::after {
  content: '\2197';
}

.link-arrow:hover {
  gap: var(--s-3);
}

/* Cost disclosure */

.more {
  width: 100%;
  max-width: 54ch;
}

.more summary {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  cursor: pointer;
  list-style: none;
  font-size: 16px;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

.more summary::-webkit-details-marker {
  display: none;
}

.more summary::after {
  content: '+';
  font-size: 20px;
  line-height: 1;
}

.more[open] summary::after {
  content: '\2013';
}

.more__body {
  display: grid;
  gap: var(--s-4);
  padding-top: var(--s-5);
}

.more .cost-list {
  font-size: 16px;
}

.more .cost-list li {
  border-bottom-color: var(--hair);
}

@media (max-width: 599px) {
  .row {
    grid-template-columns: 1fr;
    gap: var(--s-3);
  }
}

/* ----- Timeline ----- */

.timeline {
  list-style: none;
  display: grid;
  gap: var(--s-9);
}

.tl {
  position: relative;
  padding-left: var(--s-9);
}

.tl::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: calc(-1 * var(--s-9));
  width: 1px;
  background: linear-gradient(180deg, rgba(163, 81, 57, 0.3), rgba(163, 81, 57, 0.05));
}

.tl:last-child::before {
  display: none;
}

.tl__dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--accent-grad);
  box-shadow: 0 0 0 6px rgba(255, 190, 130, 0.22);
}

.tl__num {
  display: block;
  margin-bottom: var(--s-2);
  font-size: clamp(40px, 4.2vw, 56px);
  line-height: 1;
  letter-spacing: -0.03em;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.tl h3 {
  font-size: var(--t-h4);
  margin-bottom: var(--s-3);
}

.tl p {
  font-size: var(--t-small);
  line-height: 1.6;
}

@media (min-width: 960px) {
  .timeline {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-8);
  }

  .tl {
    padding-left: 0;
    padding-top: var(--s-12);
  }

  .tl::before {
    left: 15px;
    right: calc(-1 * var(--s-8));
    top: 7px;
    bottom: auto;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, rgba(163, 81, 57, 0.3), rgba(163, 81, 57, 0.05));
  }
}

/* ----- Offers: alternating split rows ----- */

.split {
  display: grid;
  gap: var(--s-8);
  align-items: center;
  padding-block: var(--s-12);
  border-top: 1px solid transparent;
  border-image: var(--hair-fade) 1;
}

.split__text {
  display: grid;
  gap: var(--s-4);
  justify-items: start;
}

.split__text h3 {
  font-size: var(--t-h2);
  line-height: 1.05;
}

.split__text p {
  max-width: 50ch;
}

.treat {
  width: 100%;
  margin-top: var(--s-2);
}

.split__media {
  margin: 0;
  width: 100%;
}

/* Packshot: Studioweiss wird per multiply auf Palladian gelegt, damit keine
   fuenfte Flaechenfarbe entsteht. Ohne Blend-Support bleibt der weisse Grund
   stehen - lesbar, nur weniger integriert. */
.split__media--packshot {
  border-radius: var(--r-card);
  background: var(--palladian);
}

.split__media--packshot img {
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
}

@media (min-width: 960px) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-18);
  }

  .split--flip .split__media {
    order: -1;
  }
}

.shopline {
  display: grid;
  gap: var(--s-5);
  padding-block: var(--s-12) 0;
  border-top: 1px solid transparent;
  border-image: var(--hair-fade) 1;
}

.shopline h3 {
  font-size: var(--t-h3);
  max-width: 18ch;
}

.shopline > div:last-child {
  display: grid;
  gap: var(--s-4);
  justify-items: start;
}

@media (min-width: 960px) {
  .shopline {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-18);
  }
}

/* ----- Team ----- */

.people {
  list-style: none;
}

.person {
  display: grid;
  gap: var(--s-1) var(--s-6);
  padding-block: var(--s-6);
  border-top: 1px solid transparent;
  border-image: var(--hair-fade) 1;
}

.person h3 {
  font-size: var(--t-h3);
}

.person p {
  font-size: var(--t-small);
}

@media (min-width: 640px) {
  .person {
    grid-template-columns: 1.2fr 1fr;
    align-items: baseline;
  }
}

.doctor {
  margin-top: var(--s-9);
  padding: var(--s-8) 0 0;
  border-top: 1px solid transparent;
  border-image: var(--hair-fade) 1;
}

.doctor .script {
  color: var(--truffle);
  font-size: clamp(34px, 4vw, 50px);
}

/* ----- CTA ----- */

.cta2__inner {
  position: relative;
  display: grid;
  gap: var(--s-5);
  justify-items: center;
  text-align: center;
  padding-block: var(--s-12);
  isolation: isolate;
}

.cta2__inner::before {
  content: '';
  position: absolute;
  inset: -10% -6%;
  z-index: -1;
  background: radial-gradient(
    closest-side,
    rgba(255, 190, 130, 0.3) 0%,
    rgba(255, 190, 130, 0) 100%
  );
  pointer-events: none;
}

.cta2__inner h2 {
  max-width: 20ch;
}

.cta2__inner .lead {
  max-width: 46ch;
}

.cta2__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  justify-content: center;
  margin-top: var(--s-2);
}

/* ----- Contact ----- */

.addr {
  margin-top: var(--s-8);
  font-style: normal;
  line-height: 1.65;
}

.addr__links {
  display: grid;
  gap: var(--s-1);
  margin-top: var(--s-4);
}

.hours-title {
  font-size: var(--t-h4);
  margin-bottom: var(--s-4);
}

/* ---------- 12. Ablauf (Steps) ---------- */

/* ---------- 13. Beauty / Beckenboden / Vitalshop ---------- */

/* Vitalshop — wide gradient stripe */

/* ---------- 14. Team ---------- */

/* Placeholder keeps the arch silhouette until a real photo exists */

/* ---------- 15. Kontakt ---------- */
.hours {
  list-style: none;
  display: grid;
  gap: 0;
}

.hours li, .hours li + li {
  padding: var(--s-4) 0;
  border: 0;
  border-radius: 0;
  border-top: 1px solid transparent;
  border-image: var(--hair-fade) 1;
}

.hours li:first-child {
  border-top: 0;
  border-image: none;
}

.hours li[data-today='true'] {
  position: relative;
  padding-inline: var(--s-5);
  margin-inline: calc(-1 * var(--s-5));
  border-radius: var(--r-md);
  border: 0;
  border-image: none;
  color: var(--truffle);
  background: linear-gradient(90deg, rgba(255, 190, 130, 0.3), rgba(255, 190, 130, 0.06));
}

.hours li[data-today='true'] + li {
  border-top: 0;
  border-image: none;
}

/* Retire the leftovers of the previous layout */

#ablauf {
  background: none;
}

main > section.ed {
  overflow-x: clip;
}

@media (max-width: 959px) {
  .hours li[data-today='true'] {
    margin-inline: calc(-1 * var(--s-3));
    padding-inline: var(--s-3);
  }

  .row::before {
    inset-inline: calc(-1 * var(--s-3));
  }
}

/* Illustration beside Galvanic Spa */

.split__art {
  margin: 0;
  width: 100%;
  max-width: 440px;
  justify-self: center;
}

.split__art svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.sign {
  color: var(--truffle);
  margin-block: var(--s-1);
}

/* Header grid: brand and button size to their content, nav fills the middle */
@media (min-width: 960px) {
  .header-pill {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--s-6);
  }

  .header-pill .nav {
    justify-self: center;
  }

  .brand__name {
    white-space: nowrap;
  }
}

@media (min-width: 960px) and (max-width: 1139px) {
  .nav__list {
    gap: var(--s-1);
  }

  .nav__link {
    padding-inline: var(--s-2);
    font-size: 14px;
  }
}

/* =========================================================
   19. Refinement (v2)
   Calmer surfaces, warmer gradients without grey midtones,
   hero with image arch. Overrides earlier rules on purpose.
   ========================================================= */
/* =========================================================
   20. Refinement (v3)
   Smaller type scale, centred hero with three columns,
   re-arranged welcome section.
   ========================================================= */
/* ---------- 25. Softer gradients ---------- */

/* Lighter, closer stops: the dark Truffle end is kept only where cream text
   sits on it (about 4.4:1 at #b05c42), everything else stays gentle. */
/* =========================================================
   28. Editorial sections (Programme to Kontakt)
   No boxes: type, hairlines and white space. Gradient is used as
   an accent (numbers, dots, one soft glow), never as a surface.
   ========================================================= */
/* ---------- 28. Ambient glare behind liquid glass ---------- */

/* Apple's Liquid Glass only reads as glass when there is something worth
   refracting behind it. The ambient glows on <main> (section 27) carry the
   page, but they are too diffuse to show up through a 14px blur. So every
   glass cluster gets its own warm bloom placed directly behind the panels:
   bright enough to tint the material, soft enough that the Truffle text on
   top keeps its contrast. */
:root {
  --surface: #f7f3ec;
  --line-soft: rgba(163, 81, 57, 0.16);
  --shadow-sm: 0 1px 2px rgba(163, 81, 57, 0.06),
    0 8px 24px -12px rgba(163, 81, 57, 0.18);
  --shadow-md: 0 2px 4px rgba(163, 81, 57, 0.06),
    0 24px 48px -24px rgba(163, 81, 57, 0.32);
  --glass-bg: rgba(247, 243, 236, 0.78);
  --glass-bg-strong: rgba(247, 243, 236, 0.9);
  --glass-bg-soft: rgba(247, 243, 236, 0.62);
  --glass-blur: blur(18px) saturate(1.2);
  --r-card: 32px;
  --t-h1: clamp(36px, 4.8vw, 66px);
  --t-h2: clamp(28px, 3.3vw, 44px);
  --t-h3: clamp(23px, 2.2vw, 29px);
  --t-h4: clamp(19px, 1.7vw, 22px);
  --t-body: clamp(16px, 1.1vw, 18px);
  --t-small: 14px;
  --t-label: 12px;
  --t-script: clamp(28px, 3.2vw, 40px);
  --grad-hero: radial-gradient(
      60% 70% at 88% 12%,
      rgba(255, 190, 130, 0.34) 0%,
      rgba(255, 190, 130, 0) 70%
    ),
    radial-gradient(
      70% 80% at 0% 100%,
      rgba(255, 190, 130, 0.14) 0%,
      rgba(255, 190, 130, 0) 70%
    ),
    linear-gradient(180deg, rgba(238, 233, 223, 0) 80%, #eee9df 100%),
    var(--palladian);
  --grad-tall: linear-gradient(
    180deg,
    #f7f3ec 0%,
    #f6e2cb 48%,
    #ecbf9a 80%,
    #b9694c 100%
  );
  --grad-warm: linear-gradient(155deg, #f7dcc0 0%, #e8aa84 50%, #b9694c 100%);
  --grad-glow: radial-gradient(
    95% 130% at 100% 0%,
    #f6c9a0 0%,
    #db9068 42%,
    #b45f44 80%
  );
  --grad-team: linear-gradient(
    180deg,
    #eee9df 0%,
    #f6e6d2 40%,
    #f2cfa9 75%,
    #cf9373 100%
  );
  --hair: rgba(163, 81, 57, 0.16);
  --hair-fade: linear-gradient(90deg, rgba(163, 81, 57, 0.22), rgba(163, 81, 57, 0.04));
  --accent-grad: linear-gradient(100deg, #a35139 0%, #bd5f3e 60%, #ca6a41 100%);
  --glare-flame: rgba(255, 177, 98, 0.32);
  --glare-truffle: rgba(163, 81, 57, 0.18);
  --glare-blur: 44px;
}

.hero__cards, .welcome__aside, .timeline, .team2, .cta2, #kontakt .ed__body {
  position: relative;
  isolation: isolate;
}

.hero__cards::before, .welcome__aside::before, .timeline::before, .team2::before, .cta2::before, #kontakt .ed__body::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: var(--glare-inset, -14% -10%);
  pointer-events: none;
  background:
    radial-gradient(
      var(--glare-size, 42% 58%) at var(--glare-x, 16%) var(--glare-y, 10%),
      var(--glare-flame),
      transparent var(--glare-stop, 70%)
    ),
    radial-gradient(
      38% 54% at var(--glare-x2, 88%) var(--glare-y2, 88%),
      var(--glare-truffle),
      transparent 72%
    );
  filter: blur(var(--glare-blur));
}

/* Each cluster gets its own light direction so the page does not read as one
   repeated stamp. */

.hero__cards {
  --glare-x: 10%;
  --glare-y: 0%;
  --glare-x2: 94%;
  --glare-y2: 100%;
}

/* ---------- 10. Welcome ---------- */
.welcome__aside {
  display: grid;
  gap: var(--gap);
  --glare-x: 92%;
  --glare-y: 6%;
  --glare-x2: 8%;
  --glare-y2: 92%;
}

.timeline {
  --glare-x: 24%;
  --glare-y: 112%;
  --glare-x2: 80%;
  --glare-y2: -12%;
}


.team2 {
  /* Nur ein Licht, oben rechts. Der zweite Verlauf unten links ist abgeschaltet,
     er lag hinter der Unterschrift. Die Ebene endet zusaetzlich bei 45% Hoehe,
     damit auch die Streuung die Signatur nicht mehr erreicht. */
  --glare-truffle: transparent;
  --glare-inset: -16% -10% 55% -8%;
  --glare-x: 96%;
  --glare-y: 10%;
  --glare-size: 58% 62%;
  --glare-stop: 90%;
  --glare-blur: 58px;
  --glare-flame: rgba(255, 177, 98, 0.3);
}

.cta2 {
  /* Oben buendig statt ueberstehend: die Ebene ragte 91px in die
     Team-Sektion hinein und erzeugte dort den unteren Schein. */
  --glare-inset: 5% -10% -14% -10%;
  --glare-x: 50%;
  --glare-y: 16%;
  --glare-x2: 50%;
  --glare-y2: 106%;
  --glare-blur: 60px;
}

#kontakt .ed__body {
  --glare-x: 6%;
  --glare-y: 8%;
  --glare-x2: 96%;
  --glare-y2: 90%;
}

/* Specular treatment: a hard top rim where the light hits, a soft shaded
   underside that reads as material thickness, and a wider separation shadow
   so the panel floats instead of sticking. */

.glass, .btn--ghost, .sheet__panel {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 1.5px 1.5px 0 rgba(255, 255, 255, 0.72),
    inset -1px -1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -16px 26px -20px rgba(163, 81, 57, 0.32),
    inset 0 0 20px rgba(255, 255, 255, 0.2),
    0 14px 34px -18px rgba(163, 81, 57, 0.34);
}

/* A single diagonal highlight sweeping the upper-left corner, the way a sheet
   of glass catches a window. Sits above the fill, below the content. */
.glass::before, .btn--ghost::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(
      118deg,
      rgba(255, 255, 255, 0) 32%,
      rgba(255, 255, 255, 0.42) 46%,
      rgba(255, 255, 255, 0) 60%
    ),
    radial-gradient(
      130% 120% at 6% -25%,
      rgba(255, 255, 255, 0.7) 0%,
      rgba(255, 255, 255, 0) 55%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.22) 0%,
      rgba(255, 255, 255, 0) 40%
    );
}

/* Interactive glass responds: the sheen slides and the panel lifts. */

.btn--ghost {
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.btn--ghost::before {
  background-position: 0% 0%;
  transition: background-position 420ms var(--ease), opacity var(--dur) var(--ease);
}

.btn--ghost:hover::before {
  opacity: 1;
  background-position: 36% 0%;
}

/* A touch more body where glass sits on busy, darker gradients */

/* Chips inside dark zones: tinted glass instead of cream */
.btn--ghost:hover {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.62) 0%,
    rgba(247, 243, 236, 0.46) 100%
  );
  border-color: rgba(255, 255, 255, 0.8);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 1.5px 1.5px 0 rgba(255, 255, 255, 0.8),
    inset 0 -16px 26px -20px rgba(163, 81, 57, 0.26),
    0 18px 38px -18px rgba(163, 81, 57, 0.4);
}

/* The hero pair is the first glass the visitor sees: let its bloom breathe
   very slowly, in step with the hero gradient. */

@keyframes glare-breathe {
  0%,
  100% {
    opacity: 0.85;
    transform: translate3d(0, 0, 0);
  }
  50% {
    opacity: 1;
    transform: translate3d(2.5%, -2%, 0);
  }
}

.hero__cards::before {
  animation: glare-breathe 22s var(--ease) infinite;
  will-change: opacity, transform;
}

/* Accessibility fallbacks: no bloom when transparency is reduced (the glass
   turns solid there anyway), no drift when motion is reduced. */

@media (prefers-reduced-motion: reduce) {
  .hero__cards::before {
    animation: none;
  }

  .btn--ghost::before {
    transition: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .hero__cards::before, .welcome__aside::before, .timeline::before, .team2::before, .cta2::before, #kontakt .ed__body::before {
    display: none;
  }

  .glass, .btn--ghost, .sheet__panel {
    box-shadow: var(--shadow-sm);
  }
}

/* Heute-Zeile: der vorherige Flame-Tint drueckte den Truffle-Text auf 4.17:1.
   Statt die Zeile anzuwaermen faengt sie jetzt Licht - das hebt den Kontrast
   ueber den Normalwert - und ein Truffle-Balken traegt die Markierung. */

.hours li[data-today='true'] {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.82) 0%,
    rgba(255, 255, 255, 0.18) 100%
  );
  box-shadow:
    inset 3px 0 0 var(--truffle),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  color: var(--truffle);
}

.hours li[data-today='true'] .hours__day {
  letter-spacing: -0.005em;
}

/* Die Glare-Ebenen bluten absichtlich ueber ihre Container hinaus. Ohne Klemme
   erzeugt das auf schmalen Viewports horizontalen Scroll. overflow-x: clip
   schneidet ab, ohne - anders als overflow: hidden - den Sticky-Header oder
   das Scroll-Verhalten anzufassen. */

main {
  overflow-x: clip;
}

/* ---------- 29. CTA-Hintergrund: laengeres, weicheres Auslaufen ---------- */

/* Im CTA liegen zwei Ebenen uebereinander: die Glare-Ebene der Sektion und
   dieser innere Schein. Letzterer lief mit closest-side ohne Weichzeichnung
   bis an die Boxkante und setzte dort eine sichtbare Grenze. Jetzt faellt er
   ueber vier Stufen ab und wird zusaetzlich gestreut. */

.cta2__inner::before {
  inset: -16% -10%;
  background: radial-gradient(
    farthest-side at 50% 42%,
    rgba(255, 190, 130, 0.24) 0%,
    rgba(255, 190, 130, 0.15) 38%,
    rgba(255, 190, 130, 0.06) 68%,
    rgba(255, 190, 130, 0) 100%
  );
  filter: blur(40px);
}

/* Die Glare-Ebene wird transparent, bevor sie ihre eigene Boxkante erreicht -
   damit entsteht dort gar kein Schnitt mehr, der weichgezeichnet werden muss.
   Der obere Rand bleibt weit genug innen, damit nichts in die Team-Sektion
   zurueckblutet. */

.cta2 {
  --glare-inset: 7% -10% -14% -10%;
  --glare-size: 56% 72%;
  --glare-stop: 100%;
  --glare-blur: 64px;
}

/* Galvanic Spa: Linien-Illustration als transparentes PNG, damit Seitenfarbe
   und Glare durchscheinen. */

.split__art img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- 30. Header: durchgehender Balken ---------- */

/* Die Kapsel (Abschnitt 23) wird zum randlosen Balken: das Glasmaterial sitzt
   jetzt auf .site-header statt auf .header-pill, laeuft also ueber die volle
   Breite. Die Pille selbst wird zum reinen Layout-Container. Hoehe bleibt
   var(--header-h), damit scroll-margin-top der Anker weiter passt. */

.site-header,
.site-header.is-scrolled {
  padding-block: 0;
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.58) 0%,
    rgba(247, 243, 236, 0.42) 100%
  );
  -webkit-backdrop-filter: blur(16px) saturate(1.8) brightness(1.04);
  backdrop-filter: blur(16px) saturate(1.8) brightness(1.04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: background-color 240ms var(--ease), box-shadow 240ms var(--ease);
}

/* Beim Scrollen etwas dichter und mit Abhebung nach unten */

.site-header.is-scrolled {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.72) 0%,
    rgba(247, 243, 236, 0.58) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 12px 28px -20px rgba(163, 81, 57, 0.45);
}

/* Container statt Kapsel: keine Rundung, kein eigenes Material */

.header-pill,
.site-header.is-scrolled .header-pill {
  position: relative;
  min-height: var(--header-h);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Glanzkante und Lichtlinie gehoerten zur Pillenform */

.header-pill::before,
.header-pill::after {
  content: none;
}

@supports (backdrop-filter: url(#vc-liquid)) {
  .header-pill {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Auf dem Balken braucht der Telefon-Button weniger Eigengewicht */

.header-pill .btn--primary {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.nav-toggle {
  border-color: var(--line-soft);
  background: none;
}

@media (prefers-reduced-transparency: reduce) {
  .site-header,
  .site-header.is-scrolled {
    background: var(--surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ---------- 31. Mobil und Tablet ---------- */

/* 31.1 Leseschrift
   Gemessen auf 375px: Fliesstext 16px, Timeline und Team sogar 14px,
   Labels 12px. Das Konzept setzt 17-20px Fliesstext und 13px Labels an.
   Auf kleinen Schirmen liest sich zu kleine Schrift schlechter als auf dem
   Desktop, nicht besser - deshalb hier eher groesser als dort. */

@media (max-width: 1079px) {
  body {
    font-size: 17px;
    line-height: 1.62;
  }

  .lead {
    font-size: 19px;
    line-height: 1.55;
  }

  .tl p,
  .person p,
  .row__main p,
  .split__text p,
  .shopline p {
    font-size: 16px;
    line-height: 1.6;
  }

  .small {
    font-size: 15px;
    line-height: 1.55;
  }

  .hours__day,
  .hours__time {
    font-size: 16px;
  }
}

/* 31.2 Tap-Ziele
   Freistehende Links lagen zwischen 15px und 29px Hoehe. Apple HIG und
   WCAG 2.5.8 verlangen 44px. Links mitten im Fliesstext sind von 2.5.8
   ausdruecklich ausgenommen und bleiben unangetastet, sonst zerreisst es
   den Zeilenfall. */

@media (max-width: 1079px), (pointer: coarse) {
  .nav__link,
  .link-arrow,
  .more summary,
  .site-footer nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .addr__links a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  .brand {
    min-height: 44px;
  }

  .addr__links {
    gap: 0;
  }

  .site-footer nav ul {
    gap: 0 var(--s-6);
  }

  .site-footer__row {
    align-items: center;
  }

  /* Der Trennstrich unter .link-arrow sitzt sonst mittig im neuen Tap-Feld */
  .link-arrow {
    padding-bottom: 0;
    background-position: 0 calc(50% + 0.72em);
  }
}

/* 31.3 Tablet nutzt die Breite
   Zwischen 620px und 960px ist Platz fuer zwei Spalten, die Seite stellte
   aber alles untereinander. */

@media (min-width: 620px) and (max-width: 959px) {
  .welcome__aside,
  .hero__cards {
    grid-template-columns: 1fr 1fr;
  }

  .welcome__aside > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* Labels standen ueberall auf 12px, das Konzept setzt 13px an. Gilt fuer
   alle Breiten, nicht nur fuer kleine Schirme. */

.eyebrow,
.row__tag {
  font-size: 13px;
}

/* ---------- 32. Vitalshop fuehrt das Sortiment an ---------- */

/* Der Vitalshop stand als schmaler Streifen am Ende der Sektion. Jetzt ist er
   das erste und wichtigste Element: die Trennlinie gehoerte zur alten Position
   am Fuss, und als Aufmacher darf die Ueberschrift mehr Gewicht tragen. */

#sortiment .shopline:first-of-type {
  padding-block-start: 0;
  border-top: 0;
  border-image: none;
}

#sortiment .shopline:first-of-type h3 {
  font-size: clamp(30px, 3.4vw, 42px);
  max-width: 14ch;
}

/* ---------- 33. Hero: vollstaendige Oeffnungszeiten ---------- */

/* Die Karte zeigt jetzt alle Tage statt nur den heutigen. Tabellenziffern,
   damit die Uhrzeiten spaltenweise untereinander stehen. */

.hero__hours {
  list-style: none;
  display: grid;
  gap: var(--s-1);
  margin: 0;
  padding: 0;
}

.hero__hours li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 var(--s-4);
  font-size: 15px;
  line-height: 1.5;
}

.hero__hours li > span:first-child {
  opacity: 0.72;
}

.hero__hours li > span:last-child {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Die zweite Karte ist viel kuerzer - sie soll nicht mitwachsen */
.hero__cards {
  align-items: start;
}