/* ==========================================================================
   Depilare Waxing Studio — Design-System
   Palette und Typografie nach der Markenvorlage: Burgunder, Gold und Creme,
   Serifenschrift für Überschriften, Script für Akzente.
   Schriften liegen selbst gehostet unter /static/fonts (keine Fremd-Requests).
   Aufbau: 1 Tokens · 2 Reset · 3 Layout · 4 Typografie · 5 Komponenten
           6 Sektionen · 7 Utilities · 8 Animationen · 9 Print
   ========================================================================== */

/* 0 — Schriften (selbst gehostet, OFL-Lizenzen unter /static/fonts) -------- */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/playfair-400-latin.a81e6c6c3493.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: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/playfair-600-latin.a81e6c6c3493.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: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/playfair-700-latin.a81e6c6c3493.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: 'Great Vibes';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/greatvibes-400-latin.ae3a802aa562.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;
}

/* 1 — Tokens ------------------------------------------------------------- */
:root {
  /* Marke — Werte aus der Vorlage ausgelesen */
  --burgundy-900: #4a1f22;
  --burgundy-800: #632a2e;
  --burgundy-700: #7e3330;
  --burgundy-600: #894246;
  --burgundy-500: #a25450;
  --burgundy-300: #d3a9a3;
  --burgundy-100: #f0dcd8;
  --burgundy-50: #f8edea;

  /* Gold/Bronze — nur für Schmuckelemente, nicht für Fließtext (Kontrast) */
  --gold: #c0913f;
  --gold-strong: #a36019;
  --gold-soft: #d4ad82;
  --gold-light: #ebd1b8;

  /* Warme Neutraltöne */
  --cream: #f7f1e8;
  --cream-2: #ecdacc;
  --panel: #e6d2c7;
  --ink: #352213;
  --ink-soft: #6b5245;
  --ink-muted: #857066;
  --line: #ddc9b9;
  --surface: #fffdfa;
  --surface-2: #f7f1e8;
  --page: #f7f1e8;

  /* Semantik */
  --brand: var(--burgundy-600);
  --brand-strong: var(--burgundy-700);
  --brand-soft: var(--burgundy-100);
  --on-brand: #fdf7f2;
  --focus: var(--burgundy-600);

  /* Typografie */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-script: "Great Vibes", "Segoe Script", cursive;
  --fs-body: clamp(1rem, 0.2vw + 0.96rem, 1.075rem);
  --fs-small: 0.875rem;
  --fs-h1: clamp(2rem, 4.6vw + 0.9rem, 3.35rem);
  --fs-h2: clamp(1.55rem, 2.2vw + 1rem, 2.25rem);
  --fs-h3: clamp(1.15rem, 0.6vw + 1rem, 1.4rem);
  --fs-lead: clamp(1.05rem, 0.5vw + 1rem, 1.2rem);
  --lh-tight: 1.15;
  --lh-body: 1.65;

  /* Raum & Form */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;
  --pad-inline: clamp(1.1rem, 4vw, 2rem);
  --section-y: clamp(3.25rem, 7vw, 6.5rem);
  --gap: clamp(1rem, 2.5vw, 2rem);
  --measure: 68ch;
  /* Abstände der Überschriften – der Reset setzt alles auf 0, deshalb hier
     an einer Stelle festgelegt und überall gleich verwendet. */
  --space-heading: 0.85rem;
  --space-eyebrow: 0.6rem;
  /* Abstand nach einem Bild oder einem eigenen Block */
  --space-block: 1.25rem;

  /* Effekte */
  --shadow-sm: 0 1px 2px rgba(28, 27, 34, 0.06),
    0 1px 3px rgba(126, 51, 48, 0.06);
  --shadow-md: 0 10px 30px -12px rgba(126, 51, 48, 0.22);
  --shadow-lg: 0 30px 60px -25px rgba(126, 51, 48, 0.3);
  --ring: 0 0 0 3px var(--burgundy-300);
  --header-h: 68px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 2 — Reset -------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 0.75rem);
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: var(--brand);
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--brand-strong);
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* 3 — Layout ------------------------------------------------------------- */
/* In rem, nicht px: so wächst der Inhaltsbereich mit der Schriftgröße des
   Nutzers mit. Mit festen 1160 px passte der Kopfbereich bei größerer Schrift
   nie mehr in eine Zeile und brach um. */
.container {
  width: min(72.5rem, 100%);
  margin-inline: auto;
  padding-inline: var(--pad-inline);
}

.section {
  padding-block: var(--section-y);
}

.section--soft {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
}

.section--tint {
  background: var(--burgundy-50);
}

.grid {
  display: grid;
  gap: var(--gap);
}

@media (min-width: 50em) {
  .grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* 4 — Typografie --------------------------------------------------------- */
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  line-height: var(--lh-tight);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--burgundy-800);
  text-wrap: balance;
}

/* Derselbe Abstand unter jeder Überschrift – unabhängig davon, in welchem
   Baustein sie steht. Ohne diese Regel hängt der Abstand davon ab, ob der
   jeweilige Baustein zufällig eine eigene Regel mitbringt. */
:is(h1, h2, h3, h4) + * {
  margin-block-start: var(--space-heading);
}

/* Im Fließtext gilt die Regel ebenfalls – 1rem dort wäre ein anderer Abstand. */
.prose :is(h1, h2, h3, h4) + * {
  margin-block-start: var(--space-heading);
}

/* Script-Akzent für kurze Betonungen (wie in der Vorlage) */
.script {
  font-family: var(--font-script);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--burgundy-700);
}

h1 {
  font-size: var(--fs-h1);
}

h2 {
  font-size: var(--fs-h2);
}

h3 {
  font-size: var(--fs-h3);
}

p {
  text-wrap: pretty;
}

.lead {
  font-size: var(--fs-lead);
  color: var(--ink-soft);
  max-width: var(--measure);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-block-end: var(--space-eyebrow);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* Text in Burgunder (Kontrast), die Linie in Gold (Schmuck) */
  color: var(--burgundy-700);
}

.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: var(--gold);
}

/* Kleine Zeile auf burgunderfarbener Fläche (Termin-Abschnitt) */
.eyebrow--on-dark {
  color: var(--gold-light);
}

.eyebrow--on-dark::before {
  background: var(--gold-light);
}

.section-head {
  max-width: var(--measure);
  margin-block-end: calc(var(--gap) * 1.25);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head--center .lead {
  margin-inline: auto;
}


/* 5 — Komponenten -------------------------------------------------------- */
.skip-link {
  position: absolute;
  inset-inline-start: 50%;
  translate: -50% -120%;
  z-index: 200;
  background: var(--burgundy-900);
  color: #fff;
  padding: 0.65rem 1.1rem;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  translate: -50% 0;
}

.btn {
  --btn-bg: var(--brand);
  --btn-fg: var(--on-brand);
  --btn-border: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.8rem 1.35rem;
  border: 1px solid var(--btn-border);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease),
    background-color 0.18s var(--ease);
}

.btn:hover {
  color: var(--btn-fg);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn:active {
  transform: translateY(0);
}

.btn--lg {
  padding: 1rem 1.7rem;
  font-size: 1.05rem;
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--brand-strong);
  --btn-border: var(--burgundy-300);
}

.btn--ghost:hover {
  --btn-bg: var(--brand-soft);
}

.btn--on-dark {
  --btn-bg: #fff;
  --btn-fg: var(--burgundy-800);
}

.btn--on-dark.btn--ghost {
  --btn-bg: rgba(255, 255, 255, 0.08);
  --btn-fg: #fff;
  --btn-border: rgba(255, 255, 255, 0.55);
}

.btn--on-dark.btn--ghost:hover {
  --btn-bg: rgba(255, 255, 255, 0.18);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.15rem, 2.5vw, 1.6rem);
  box-shadow: var(--shadow-sm);
}

.card h3 {
  margin-block-end: 0.4rem;
}

.card p {
  color: var(--ink-soft);
}

.card__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--burgundy-600);
  color: var(--on-brand);
  margin-block-end: 0.9rem;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  margin-block: 1.35rem 0;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  border-radius: var(--r-pill);
  background: var(--gold-light);
  border: 1px solid var(--gold-soft);
  color: var(--burgundy-800);
  font-size: var(--fs-small);
  font-weight: 600;
}

/* Bild-Karte mit festem Seitenverhältnis (kein Layout-Sprung) */
.figure {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  background: var(--burgundy-100);
}

.figure img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.figure--portrait img {
  aspect-ratio: 4 / 3;
}

/* Steht unter einem Bild noch ein Block (etwa die Merkmale im Kopfbereich),
   braucht er Luft – der Reset setzt alle Abstände auf 0. */
.figure + * {
  margin-block-start: var(--space-block);
}

/* 6 — Sektionen ---------------------------------------------------------- */

/* 6.1 Header / Navigation */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 241, 232, 0.9);
  backdrop-filter: saturate(180%) blur(12px);
  border-block-end: 1px solid transparent;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.site-header.is-scrolled {
  border-block-end-color: var(--line);
  box-shadow: 0 6px 20px -18px rgba(126, 51, 48, 0.45);
}

/* Kopfbereich: Marke links, Menü rechts. `flex-wrap` ist hier das Wichtige –
   passt beides zusammen nicht in eine Zeile, rutscht das Menü in die nächste,
   statt sich über die Wortmarke zu schieben. Überlappen ist damit strukturell
   ausgeschlossen. Damit es gar nicht erst dazu kommt, erscheint die Menüzeile
   erst ab 1100 px – darunter übernimmt das Burger-Menü. */
.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 1rem;
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--ink);
  /* Marke gibt nicht nach: Logo und Wortmarke bleiben vollständig. */
  flex: none;
}

/* Lotus-Marke: Höhe fest, Breite aus dem Seitenverhältnis */
.brand__mark {
  display: block;
  height: 40px;
  width: auto;
  flex: none;
}

.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.brand__name {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0;
  font-size: 1.15rem;
  color: var(--burgundy-800);
}

.brand__sub {
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-strong);
  white-space: nowrap;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.9rem;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-weight: 600;
  cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  content: "";
}

.nav-toggle__bars {
  position: relative;
}

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

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

.nav {
  display: flex;
  align-items: center;
  /* Menüpunkte bleiben einzeilig (white-space weiter unten), dürfen aber als
     Block umbrechen und rechts ausgerichtet bleiben. */
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-inline-start: auto;
  gap: 0.35rem;
}

/* :not(.btn) ist hier entscheidend: .nav a (Klasse + Element) hat eine höhere
   Spezifität als .btn und würde sonst die weiße Button-Schrift überschreiben. */
.nav a:not(.btn) {
  display: inline-block;
  flex: none;
  white-space: nowrap;
  /* Bewusst kleiner als der Fließtext und auf allen Desktop-Breiten gleich:
     die System-Schrift ist je nach Betriebssystem unterschiedlich breit,
     deshalb braucht die Zeile echten Puffer (gemessen: so bleiben ~150 px). */
  font-size: 0.95rem;
  padding: 0.55rem 0.85rem;
  border-radius: var(--r-pill);
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
}

.nav a:not(.btn):hover,
.nav a:not(.btn)[aria-current="page"] {
  background: var(--burgundy-50);
  color: var(--brand-strong);
}

/* Sprachumschalter im Kopfbereich: schlichte Buchstaben-Kennungen, damit die
   Menüzeile nicht breiter wird als nötig. Der aktive Punkt ist keine Verknüpfung. */
.lang-switch {
  display: flex;
  align-items: center;
  flex: none;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
}

.lang-switch__item {
  color: inherit;
  text-decoration: none;
}

.lang-switch__item:hover {
  color: var(--brand-strong);
}

.lang-switch__item.is-current {
  color: var(--brand-strong);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.lang-switch--footer {
  margin-block-start: 0.75rem;
  font-size: var(--fs-small);
}

.lang-switch--footer .lang-switch__item {
  text-decoration: none;
}

/* Hinweis auf nicht übersetzten Seiten (Wissen, Rechtstexte) */
.language-note {
  background: var(--burgundy-100);
  color: var(--ink-soft);
  font-size: var(--fs-small);
  padding: 0.6rem 1rem;
  text-align: center;
}

.language-note a {
  color: var(--brand-strong);
  font-weight: 600;
}

.lang-switch--footer .lang-switch__item.is-current {
  text-decoration: none;
}

.nav__cta {
  margin-inline-start: 0.35rem;
}

/* Schmale Fenster: Burger-Menü (Drawer). Bewusst erst ab 1100 px die Menüzeile
   darüber – erst dann passen Wortmarke, Menüpunkte, Sprachumschalter und
   Termin-Knopf sicher in eine Zeile, ohne umzubrechen. */
@media (max-width: 71.99em) {
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.2rem;
    padding: 1rem var(--pad-inline) 1.5rem;
    background: #fff;
    border-block-end: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    transform: translateY(-115%);
    visibility: hidden;
    transition: transform 0.28s var(--ease), visibility 0.28s;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
  }

  .nav.is-open {
    transform: translateY(0);
    visibility: visible;
  }

  .nav a:not(.btn) {
    padding: 0.85rem 1rem;
    border-radius: var(--r-md);
    font-size: 1.05rem;
  }

  .nav__cta .btn {
    width: 100%;
    margin-block-start: 0.5rem;
  }
}

@media (min-width: 72em) {
  .nav-toggle {
    display: none;
  }
}

/* Schmale Fenster: die Marke kompakter setzen. Sonst ist sie samt Unterzeile
   breiter als der Platz neben dem Burger – der Burger würde aus dem Fenster
   geschoben und wäre nicht mehr erreichbar. */
@media (max-width: 35em) {
  .brand {
    gap: 0.55rem;
  }

  .brand__mark {
    height: 34px;
  }

  .brand__name {
    font-size: 1.05rem;
  }

  .brand__sub {
    font-size: 0.58rem;
    letter-spacing: 0.08em;
  }
}

/* Sehr schmal: Unterzeile weg, damit Marke und Burger sicher nebeneinander stehen. */
@media (max-width: 25em) {
  .brand__sub {
    display: none;
  }
}

/* Zwischen 900 und 1279 px ist der Kopfbereich knapp: Menüpunkte enger
   stellen und die Unterzeile der Marke auslassen. Die Menüpunkte bleiben
   dabei einzeilig – sie haben Vorrang vor dem Markenblock. */
@media (min-width: 72em) and (max-width: 99.99em) {
  .nav {
    gap: 0.15rem;
  }

  .nav a:not(.btn) {
    padding-inline: 0.55rem;
  }

  .brand__sub {
    display: none;
  }
}

/* Ab 1280 px ist Platz für die Unterzeile, aber sparsamer gesetzt als im
   Fließtext-Original, damit sie nicht das Menü einengt. */
/* Die Unterzeile der Wortmarke erst, wenn wirklich breit Platz ist (100 em =
   1600 px bei 16 px Schrift) – sie kostet rund 57 px Markenbreite, die der
   Menüzeile dann fehlen. Zusammen mit dem etwas breiteren Inhaltsbereich bleiben
   hier über 170 px Puffer; die System-Schrift ist je nach Betriebssystem
   unterschiedlich breit, deshalb ist dieser Puffer nötig. Die Menüschrift ist
   auf allen Desktop-Breiten gleich (0.95 rem). */
@media (min-width: 100em) {
  .container {
    width: min(80rem, 100%);
  }

  .brand__sub {
    font-size: 0.6rem;
    letter-spacing: 0.12em;
  }

  .nav {
    gap: 0.2rem;
  }

  .nav a:not(.btn) {
    padding-inline: 0.7rem;
  }

  .lang-switch {
    gap: 0.4rem;
    font-size: 0.68rem;
  }
}

/* 6.2 Hero */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--cream-2), var(--cream) 72%);
  padding-block: clamp(2rem, 5vw, 4rem) var(--section-y);
}

.hero::after {
  content: "";
  position: absolute;
  inset-block-start: -220px;
  inset-inline-end: -160px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(192, 145, 63, 0.18),
    transparent 65%
  );
  pointer-events: none;
}

.hero__grid {
  position: relative;
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}

@media (min-width: 56.25em) {
  .hero__grid {
    grid-template-columns: 1.05fr 1fr;
  }
}

/* Der Abstand kommt aus den allgemeinen Regeln (--space-eyebrow oberhalb,
   --space-heading unterhalb der Überschrift). */
.hero h1 {
  margin-block-start: 0;
}

.hero__text > p {
  margin-block-start: var(--space-heading);
}

.hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 1.75rem;
  margin-block-start: 1.75rem;
  padding: 0;
}

.hero__badges li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--burgundy-800);
}

.hero__badges .icon {
  color: var(--brand);
}

.hero__media {
  position: relative;
}

.hero__media .figure img {
  aspect-ratio: 4 / 3;
}

@media (min-width: 56.25em) {
  .hero__media .figure img {
    aspect-ratio: 5 / 6;
  }
}

.hero__price-tag {
  position: absolute;
  inset-block-end: -0.85rem;
  inset-inline-start: 1.25rem;
  background: var(--surface);
  border-color: var(--gold-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 0.7rem 1rem;
  box-shadow: var(--shadow-md);
  font-size: var(--fs-small);
}

.hero__price-tag strong {
  display: block;
  font-size: 1.25rem;
  color: var(--brand-strong);
  letter-spacing: -0.02em;
}

.hero__price-tag-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-strong);
  margin-block-end: 0.15rem;
}

/* 6.3 Preise */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block-end: 1.75rem;
  padding: 0;
}

.tab {
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease);
}

.tab:hover {
  border-color: var(--burgundy-300);
}

.tab[aria-selected="true"] {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.price-panel[hidden] {
  display: none;
}

.price-panel {
  max-width: 860px;
}

.category-note {
  color: var(--ink-muted);
  margin-block-end: 1.25rem;
}

.price-list {
  padding: 0;
  border-block-start: 1px solid var(--line);
}

.price-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0.35rem 1rem;
  padding-block: 0.95rem;
  border-block-end: 1px solid var(--line);
}

.price-row__name {
  font-weight: 600;
  font-size: 1.05rem;
}

.price-row__meta {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  font-size: var(--fs-small);
  color: var(--ink-muted);
}

/* Unterpunkte einer Leistung (z. B. Wimpernlifting mit/ohne Färben) */
.price-options {
  grid-column: 1 / -1;
  padding: 0;
  margin-block-start: 0.35rem;
}

.price-options li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0.25rem 1rem;
  padding: 0.35rem 0 0.35rem 1.1rem;
  border-inline-start: 2px solid var(--burgundy-100);
  margin-inline-start: 0.15rem;
}

.price-options__name {
  font-size: var(--fs-small);
  color: var(--ink-soft);
}

.price-options__price {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--brand-strong);
  justify-self: end;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.price-options__duration {
  grid-column: 2;
  justify-self: end;
  font-size: 0.78rem;
  color: var(--ink-muted);
}

.price-row__desc {
  grid-column: 1 / -1;
  font-size: var(--fs-small);
  color: var(--ink-soft);
}

.price-row__price {
  justify-self: end;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--brand-strong);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.price-row__duration {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.price-note {
  margin-block-start: 1.5rem;
  font-size: var(--fs-small);
  color: var(--ink-muted);
}

/* 6.4 Ablauf */
.steps {
  counter-reset: step;
  display: grid;
  gap: var(--gap);
  padding: 0;
}

@media (min-width: 50em) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.step {
  position: relative;
  padding-inline-start: 3.25rem;
}

.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
}

.step h3 {
  margin-block-end: 0.3rem;
}

.step p {
  color: var(--ink-soft);
}

/* 6.5 FAQ */
.faq {
  display: grid;
  gap: 0.6rem;
  max-width: 860px;
}

.faq details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 0.35rem 1.1rem 0.35rem;
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

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

.faq summary::after {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand);
  rotate: 45deg;
  transition: rotate 0.2s var(--ease);
  flex: none;
}

.faq details[open] summary::after {
  rotate: 225deg;
}

.faq details p {
  padding-block-end: 0.9rem;
  color: var(--ink-soft);
  max-width: 62ch;
}

/* 6.6 CTA-Band */
.cta {
  background: linear-gradient(135deg, var(--burgundy-800), var(--burgundy-600) 65%, var(--burgundy-500));
  color: #fff;
}

.cta h2,
.cta p {
  color: #fff;
}

.cta__inner {
  display: grid;
  gap: var(--gap);
  align-items: center;
  padding-block: var(--section-y);
}

@media (min-width: 56.25em) {
  .cta__inner {
    grid-template-columns: 1.4fr auto;
  }
}

.cta .lead {
  color: rgba(255, 255, 255, 0.88);
}

/* 6.7 Kontakt */
.contact-grid {
  display: grid;
  gap: var(--gap);
}

@media (min-width: 56.25em) {
  .contact-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.contact-list {
  display: grid;
  gap: 1.1rem;
  padding: 0;
}

.contact-list li {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 0.85rem;
  align-items: start;
}

.contact-list .card__icon {
  margin: 0;
}

.contact-list dt,
.contact-list__label {
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.contact-list a {
  font-weight: 600;
  text-decoration: none;
}

.contact-list a:hover {
  text-decoration: underline;
}

.map-placeholder {
  display: grid;
  place-items: center;
  gap: 0.9rem;
  text-align: center;
  min-height: 320px;
  border: 1px dashed var(--burgundy-300);
  border-radius: var(--r-lg);
  background: var(--burgundy-50);
  padding: 2rem 1.25rem;
}

.map-placeholder p {
  color: var(--ink-soft);
  max-width: 34ch;
}

.map-embed iframe {
  width: 100%;
  min-height: 380px;
  border: 0;
  border-radius: var(--r-lg);
}

/* 6.8 Footer */
.site-footer {
  background: var(--burgundy-900);
  color: rgba(255, 255, 255, 0.82);
  padding-block: clamp(2.5rem, 5vw, 4rem) 1.5rem;
}

.site-footer a:not(.btn) {
  color: #fff;
  text-decoration: none;
}

.site-footer a:not(.btn):hover {
  text-decoration: underline;
}

.site-footer h2,
.site-footer h3 {
  color: #fff;
  font-size: 1rem;
  letter-spacing: 0.02em;
  margin-block-end: 0.85rem;
}

.site-footer address {
  font-style: normal;
  line-height: 1.7;
}

.footer-grid {
  display: grid;
  gap: var(--gap);
}

@media (min-width: 50em) {
  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-block-end: 1rem;
  color: #fff;
}

.footer-brand .brand__mark {
  height: 46px;
}

.footer-list {
  display: grid;
  gap: 0.5rem;
  padding: 0;
  font-size: var(--fs-small);
}

.footer-list .icon {
  width: 1em;
  height: 1em;
}

.footer-bottom {
  margin-block-start: 2.5rem;
  padding-block-start: 1.25rem;
  border-block-start: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.7);
}

/* 6.9 Bewertungen */
.rating-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
}

.rating-score {
  font-size: clamp(2.25rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--brand-strong);
}

.stars {
  display: flex;
  gap: 0.15rem;
  color: var(--gold);
}

.stars .icon {
  width: 1.1em;
  height: 1.1em;
  fill: currentColor;
  stroke: none;
}

/* Sterne einer einzelnen Kundenstimme: kleiner als im Kopfschnitt, und leere
   Sterne bleiben sichtbar – bei 4 von 5 soll man den fehlenden sehen. */
.stars--small {
  gap: 0.1rem;
  font-size: 0.95rem;
}

.stars .icon.star--empty {
  opacity: 0.3;
}

.reviews {
  display: grid;
  gap: var(--gap);
  padding: 0;
}

@media (min-width: 43.75em) {
  .reviews {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 62.5em) {
  .reviews {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.review {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.35rem;
  box-shadow: var(--shadow-sm);
}

.review__text {
  color: var(--ink-soft);
  margin: 0;
}

.review__text::before {
  content: "„";
}

.review__text::after {
  content: "“";
}

.review__meta {
  margin-block-start: auto;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: var(--fs-small);
  color: var(--ink-muted);
}

.review__meta strong {
  color: var(--ink);
}

/* 6.10 Öffnungszeiten */
.hours {
  display: grid;
  gap: 0.3rem;
  padding: 0;
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
}

.hours li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  max-width: 22rem;
}

.hours li.is-today {
  font-weight: 700;
  color: var(--brand-strong);
}

.site-footer .hours li.is-today {
  color: #fff;
}

/* 6.11 Sticky-Call-to-Action (nur mobil) */
.sticky-cta {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 96;
  display: flex;
  gap: 0.5rem;
  padding: 0.6rem var(--pad-inline);
  background: rgba(247, 241, 232, 0.97);
  backdrop-filter: blur(10px);
  border-block-start: 1px solid var(--line);
  translate: 0 110%;
  transition: translate 0.25s var(--ease);
}

.sticky-cta.is-visible {
  translate: 0 0;
}

.sticky-cta .btn {
  flex: 1;
}

@media (min-width: 56.25em) {
  .sticky-cta {
    display: none;
  }
}

@media (max-width: 56.24em) {
  body {
    padding-block-end: 4.5rem;
  }

  .back-to-top {
    inset-block-end: 5rem;
  }
}

/* 6.12 Galerie */
.gallery {
  display: grid;
  gap: var(--gap);
  padding: 0;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.gallery .figure {
  height: 100%;
  margin: 0;
}

.gallery img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.gallery figcaption {
  padding: 0.7rem 0.9rem;
  font-size: var(--fs-small);
  color: var(--ink-muted);
  background: var(--surface);
}

/* 6.13 Nutzenlisten */
.benefits {
  display: grid;
  gap: 0.8rem;
  padding: 0;
}

.benefits li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 0.75rem;
  align-items: start;
  color: var(--ink-soft);
}

.benefits .icon {
  color: var(--brand);
  margin-block-start: 0.25rem;
}

.benefits strong {
  color: var(--ink);
}

/* 6.14 Marken-Elemente aus der Vorlage */
.claim-pill {
  display: inline-block;
  padding: 0.55rem 1.1rem;
  border-radius: var(--r-pill);
  background: var(--gold-light);
  color: var(--burgundy-800);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Rundes Siegel: "Pflege · Komfort · Vertrauen" */
.seal {
  display: grid;
  place-items: center;
  gap: 0.15rem;
  width: 116px;
  height: 116px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  padding: 0.75rem;
  text-align: center;
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--burgundy-700);
  background: transparent;
}

.seal__mark {
  display: block;
  width: 34px;
  height: auto;
}

/* Behandlungsbereiche als Häkchenliste */
.areas {
  display: grid;
  gap: 0.6rem 2rem;
  padding: 0;
  /* Abstand zur Überschrift kommt aus der allgemeinen Regel */
}

@media (min-width: 37.5em) {
  .areas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.areas li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.areas .icon {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--gold-strong);
}

/* 6.15 Rechtstexte */
.legal {
  padding-block: clamp(2rem, 5vw, 4rem) var(--section-y);
}

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

.prose > * + * {
  margin-block-start: 1rem;
}

.prose h2 {
  font-size: var(--fs-h3);
  margin-block-start: 2.25rem;
}

.prose h3 {
  font-size: 1.05rem;
  margin-block-start: 1.75rem;
}

.prose ul,
.prose ol {
  padding-inline-start: 1.35rem;
  display: grid;
  gap: 0.4rem;
}

.prose li::marker {
  color: var(--brand);
}

.prose address {
  font-style: normal;
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  padding: 0;
  margin-block-end: 1.25rem;
  font-size: var(--fs-small);
  color: var(--ink-muted);
}

.breadcrumbs li + li::before {
  content: "/";
  margin-inline-end: 0.4rem;
  color: var(--line);
}

/* 6.10 Back to top */
.back-to-top {
  position: fixed;
  inset-block-end: 1.15rem;
  inset-inline-end: 1.15rem;
  z-index: 90;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--burgundy-300);
  border-radius: 50%;
  background: var(--surface);
  color: var(--brand-strong);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s var(--ease), visibility 0.2s;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
}

/* 7 — Utilities ---------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.text-muted {
  color: var(--ink-muted);
}

.small {
  font-size: var(--fs-small);
}

.nowrap {
  white-space: nowrap;
}

/* 8 — Animationen -------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  /* Nur wenn JavaScript läuft (.js setzt das Inline-Skript im <head>), starten
     die Elemente unsichtbar - ohne JS bleibt der Inhalt sichtbar. */
  .js [data-reveal] {
    opacity: 0;
    translate: 0 14px;
    transition: opacity 0.55s var(--ease), translate 0.55s var(--ease);
  }

  [data-reveal].is-visible {
    opacity: 1;
    translate: 0 0;
  }
}

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

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

/* 9 — Print (Preisliste zum Mitnehmen) ----------------------------------- */
@media print {
  .site-header,
  .back-to-top,
  .sticky-cta,
  .cta,
  .hero__media,
  .map-placeholder,
  .map-embed,
  .site-footer {
    display: none !important;
  }

  body {
    color: #000;
    font-size: 11pt;
  }

  .section {
    padding-block: 0.5rem;
  }

  .price-row {
    break-inside: avoid;
  }

  a::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
  }
}