/* =============================================================================
   Kina Balance — Designsystem
   Edel, ruhig, großzügige Weißräume. Mobile-First.
   Referenz-Vibe: Aesop · Susanne Kaufmann · Augustinus Bader.
   ============================================================================= */

/* --- Design-Tokens -------------------------------------------------------- */
:root {
  /* Markenfarben */
  --cream: #faf3ec;
  --blush: #f2d9c6;
  --blush-soft: #f7e7da;
  --ink: #1a1a1a;
  --ink-soft: #2e2a27;
  --sage: #a8bfa8;
  --sage-dark: #7a9a7a;
  --muted: #8a7a70;

  /* Abgeleitete Flächen & Linien */
  --bg: var(--cream);
  --surface: #fffdfb;
  --line: #e8d9cb;
  --line-soft: #efe3d7;

  /* Typografie */
  --font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Maße */
  --container: 1200px;
  --container-narrow: 820px;
  --radius: 4px;
  --radius-lg: 10px;
  --radius-xl: 18px;

  /* Sanfte Schatten */
  --shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.04);
  --shadow: 0 18px 40px -24px rgba(94, 70, 54, 0.35);
  --shadow-lg: 0 30px 60px -30px rgba(94, 70, 54, 0.4);

  /* Bewegung */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.6s;

  /* Vertikaler Rhythmus der Sektionen */
  --section-y: clamp(4rem, 9vw, 8.5rem);
}

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

* {
  margin: 0;
}

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

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

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

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s var(--ease), opacity 0.25s var(--ease);
}

button {
  font-family: inherit;
  cursor: pointer;
}

ul {
  list-style: none;
  padding: 0;
}

/* --- Typografie ----------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: 0.005em;
  color: var(--ink);
}

h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 400; }
h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
h3 { font-size: clamp(1.45rem, 2.4vw, 1.95rem); }
h4 { font-size: 1.25rem; }

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

.lead {
  font-size: clamp(1.15rem, 1.8vw, 1.35rem);
  line-height: 1.7;
  color: var(--ink-soft);
}

strong { font-weight: 600; }

/* Kicker — kleine getrackte Überzeile */
.kicker {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sage-dark);
  margin-bottom: 1.1rem;
}

/* --- Layout-Helfer -------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}

.container--narrow {
  max-width: var(--container-narrow);
}

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

.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }

.section--blush { background-color: var(--blush); }
.section--blush-soft { background-color: var(--blush-soft); }
.section--ink { background-color: var(--ink); color: var(--cream); }
.section--ink h1,
.section--ink h2,
.section--ink h3 { color: var(--cream); }
.section--ink p { color: rgba(250, 243, 236, 0.82); }

.section-head {
  max-width: 660px;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.section-head--center {
  margin-inline: auto;
  text-align: center;
}
.section-head p { margin-top: 1rem; }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 1.05rem 2.1rem;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--cream);
  transition: background 0.3s var(--ease), color 0.3s var(--ease),
    border-color 0.3s var(--ease), transform 0.3s var(--ease);
  -webkit-tap-highlight-color: transparent;
  /* Lange CTA-Texte dürfen (außerhalb des Headers) zweizeilig werden —
     ausgewogen umbrechen statt überlaufen. */
  line-height: 1.4;
  text-align: center;
  text-wrap: balance;
  max-width: 100%;
}
.btn:hover {
  background: var(--sage-dark);
  border-color: var(--sage-dark);
  color: #fff;
  transform: translateY(-2px);
}

.btn--outline {
  background: transparent;
  color: var(--ink);
}
.btn--outline:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
}

.btn--light {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--ink);
}
.btn--light:hover {
  background: transparent;
  border-color: var(--cream);
  color: var(--cream);
}

.btn--ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}
.btn--ghost:hover {
  border-color: var(--sage-dark);
  color: var(--sage-dark);
  background: transparent;
}

.btn--block { width: 100%; }
.btn .icon { width: 18px; height: 18px; }

/* Textlink mit Unterstrich-Animation */
.link-underline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink);
  position: relative;
  padding-bottom: 3px;
}
.link-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.link-underline:hover { color: var(--sage-dark); }
.link-underline .icon {
  width: 16px;
  height: 16px;
  transition: transform 0.3s var(--ease);
}
.link-underline:hover .icon { transform: translateX(4px); }

/* =============================================================================
   Kopfzeile / Navigation
   ============================================================================= */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease),
    border-color 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
/* Der Header darf breiter laufen als der Seiteninhalt (1200px): mit den
   wörtlich übernommenen, langen CTA-/Nav-Texten des Inhabers braucht die
   Kopfzeile mehr Raum, sonst ragt der Buchen-Button aus dem Container. */
.site-header .container { max-width: 1400px; }
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 84px;
}
.site-header.is-scrolled {
  background: rgba(250, 243, 236, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--line-soft);
}
.site-header.is-scrolled .site-header__inner { height: 70px; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-serif);
  font-size: 1.45rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  flex-shrink: 0;
  white-space: nowrap;
  transition: height 0.4s var(--ease);
}
.brand img {
  height: 46px;
  width: auto;
  transition: height 0.4s var(--ease);
}
.site-header.is-scrolled .brand img { height: 40px; }
.brand__text { line-height: 1; }

/* Primärnavigation (Desktop) */
.nav {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 2.4vw, 2.4rem);
  flex-shrink: 0;
}
.nav__link {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  position: relative;
  padding: 0.35rem 0;
  white-space: nowrap; /* zweiwortige Punkte ("Über uns" / "О нас") nie umbrechen */
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: var(--sage-dark);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--ease);
}
.nav__link:hover::after,
.nav__link.is-active::after {
  transform: scaleX(1);
  transform-origin: left;
}
.nav__link:hover,
.nav__link.is-active { color: var(--sage-dark); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-shrink: 0;
}

/* Sprachumschalter */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.2rem;
  background: rgba(255, 253, 251, 0.6);
}
.lang-switch__item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 0.34rem 0.7rem;
  border-radius: 999px;
  color: var(--muted);
}
.lang-switch__item.is-active {
  background: var(--ink);
  color: var(--cream);
}
.lang-switch__item:not(.is-active):hover { color: var(--ink); }
.lang-switch__flag {
  width: 18px;
  height: 13px;
  border-radius: 2px;
  display: block;
  box-shadow: 0 0 0 1px rgba(26, 26, 26, 0.06);
}

.header-cta {
  display: inline-flex;
  /* In der Kopfzeile bleibt der Buchen-Button immer einzeilig */
  white-space: nowrap;
}

/* Burger */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 253, 251, 0.6);
}
.nav-toggle span {
  display: block;
  width: 18px;
  height: 1.5px;
  margin-inline: auto;
  background: var(--ink);
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}

/* Mobile Drawer */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 200;
  visibility: hidden;
  pointer-events: none;
}
.mobile-nav__overlay {
  position: absolute;
  inset: 0;
  background: rgba(26, 26, 26, 0.4);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.mobile-nav__panel {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(86vw, 380px);
  background: var(--cream);
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.45s var(--ease);
  overflow-y: auto;
}
.mobile-nav.is-open {
  visibility: visible;
  pointer-events: auto;
}
.mobile-nav.is-open .mobile-nav__overlay { opacity: 1; }
.mobile-nav.is-open .mobile-nav__panel { transform: translateX(0); }
.mobile-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2.5rem;
}
.mobile-nav__close {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--ink);
}
.mobile-nav__links {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.mobile-nav__links a {
  font-family: var(--font-serif);
  font-size: 1.7rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
}
.mobile-nav__links a.is-active { color: var(--sage-dark); }
.mobile-nav__footer {
  margin-top: auto;
  padding-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* =============================================================================
   Hero
   ============================================================================= */
.hero {
  position: relative;
  background: linear-gradient(170deg, var(--blush) 0%, var(--blush-soft) 55%, var(--cream) 100%);
  padding-top: clamp(8rem, 16vw, 11rem);
  padding-bottom: clamp(4rem, 10vw, 7rem);
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.hero__content { max-width: 600px; }
.hero h1 {
  margin-bottom: 1.5rem;
}
.hero__tagline {
  display: block;
  color: var(--ink);
}
.hero__subtitle {
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: 2.25rem;
  max-width: 46ch;
  /* Untertitel aus dem Admin darf bewusste Zeilenumbrüche enthalten */
  white-space: pre-line;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}
.hero__visual {
  position: relative;
  display: flex;
  justify-content: center;
}
.hero__logo-card {
  position: relative;
  background: var(--surface);
  border-radius: var(--radius-xl);
  padding: clamp(1.5rem, 4vw, 3rem);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 420px;
}
.hero__logo-card img {
  width: 100%;
  border-radius: var(--radius-lg);
}
.hero__leaf {
  position: absolute;
  color: var(--sage);
  opacity: 0.55;
}
.hero__leaf--1 { top: -28px; right: 8%; width: 70px; transform: rotate(12deg); }
.hero__leaf--2 { bottom: -22px; left: 4%; width: 56px; transform: rotate(-18deg); }

/* =============================================================================
   USP-Bereich
   ============================================================================= */
.usp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
}
.usp {
  text-align: center;
  padding-inline: 0.5rem;
}
.usp__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 1.5rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--sage);
  color: var(--sage-dark);
}
.usp__icon .icon { width: 26px; height: 26px; }
.usp h3 { margin-bottom: 0.65rem; }
.usp p { color: var(--muted); font-size: 1rem; }

/* Trennlinie zwischen USP (nur Desktop) */
@media (min-width: 760px) {
  .usp:not(:last-child) {
    border-right: 1px solid var(--line-soft);
  }
}

/* =============================================================================
   Split-Bereich (Bild + Text), z.B. Studio-Vorstellung
   ============================================================================= */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.split--reverse .split__media { order: 2; }
.split__media {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--blush-soft);
}
.split__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.split__body p { margin-top: 1.1rem; }
.split__body .btn,
.split__body .link-underline { margin-top: 2rem; }

/* Bild-Platzhalter (solange keine Fotos hinterlegt sind) */
.placeholder {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  background:
    radial-gradient(120% 80% at 70% 10%, var(--blush) 0%, transparent 60%),
    var(--blush-soft);
  color: var(--sage-dark);
}
.placeholder .icon { width: 54px; height: 54px; opacity: 0.5; }
.placeholder--wide { aspect-ratio: 16 / 10; }
.placeholder--square { aspect-ratio: 1 / 1; }

/* =============================================================================
   Karten (Leistungen & Produkte)
   ============================================================================= */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.card-grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease),
    border-color 0.4s var(--ease);
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
  border-color: var(--line);
}
.card__media {
  position: relative;
  overflow: hidden;
}
.card__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.card:hover .card__media img { transform: scale(1.05); }
.card__media .placeholder { aspect-ratio: 4 / 3; width: 100%; }
.card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.6rem 1.6rem 1.75rem;
}
.card__cat {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage-dark);
  margin-bottom: 0.6rem;
}
.card__title {
  font-size: 1.4rem;
  margin-bottom: 0.65rem;
}
.card__text {
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.65;
  flex: 1;
}
.card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line-soft);
}
.card__price {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--ink);
  /* Dauer-/Preis-Anzeigetexte sind bewusst mehrzeilig (Behandlungsvarianten) */
  white-space: pre-line;
}
.card__duration {
  font-size: 0.85rem;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: pre-line;
}
.card__duration .icon { width: 15px; height: 15px; }
.card--link .card__arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}
.card--link:hover .card__arrow { color: var(--sage-dark); }

/* Produktkarten-Spezifika */
.product-card .card__body { padding-bottom: 1.6rem; }
.product-card .btn { margin-top: 1.3rem; }

/* =============================================================================
   Kategorie-Filter (Produkte)
   ============================================================================= */
.filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.filter__btn {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.6rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  transition: all 0.3s var(--ease);
}
.filter__btn:hover { color: var(--ink); border-color: var(--sage); }
.filter__btn.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
}
.is-hidden { display: none !important; }

/* =============================================================================
   Testimonials
   ============================================================================= */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.testimonial {
  padding: 2.25rem 2rem;
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-soft);
}
.testimonial__quote {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  line-height: 1.55;
  font-style: italic;
  color: var(--ink);
  margin-bottom: 1.5rem;
}
.testimonial__mark {
  font-family: var(--font-serif);
  font-size: 3rem;
  line-height: 0.5;
  color: var(--sage);
  display: block;
  height: 1.4rem;
}
.testimonial__author {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* =============================================================================
   CTA-Band
   ============================================================================= */
.cta-band {
  text-align: center;
}
.cta-band .container { max-width: 720px; }
.cta-band h2 { margin-bottom: 1.1rem; }
.cta-band p { margin-bottom: 2.25rem; font-size: 1.15rem; }
.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

/* =============================================================================
   Werte (Über uns)
   ============================================================================= */
.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.value__num {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: var(--sage-dark);
  display: block;
  margin-bottom: 0.9rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
}
.value h3 { font-size: 1.4rem; margin-bottom: 0.6rem; }
.value p { color: var(--muted); font-size: 0.98rem; }

/* =============================================================================
   Seiten-Kopf (Unterseiten)
   ============================================================================= */
.page-hero {
  background: linear-gradient(175deg, var(--blush) 0%, var(--blush-soft) 70%, var(--cream) 100%);
  padding-top: clamp(8rem, 15vw, 11rem);
  padding-bottom: clamp(3rem, 7vw, 5rem);
  text-align: center;
}
.page-hero .kicker { margin-bottom: 1.25rem; }
/* Lange, nicht trennbare Woerter sprengen auf schmalen Displays sonst den
   Seitenrand - russisch "Konfidenzialitaet", deutsch "Widerrufsbelehrung".
   Entscheidend ist die kleinere Untergrenze: die bisherigen 2.6rem waren
   auf 360px zu gross, dadurch passte kein langes Wort mehr in die Zeile.
   Ab etwa 693px Breite greift weiterhin 6vw, dort aendert sich also nichts.
   hyphens und break-word bleiben als Netz fuer noch laengere Woerter;
   break-word statt anywhere, weil anywhere die min-content-Breite aendert
   und damit Grid- und Flex-Layouts beeinflussen kann. */
.page-hero h1 {
  font-size: clamp(1.75rem, 6vw, 4.6rem);
  hyphens: auto;
  overflow-wrap: break-word;
}
.page-hero p { max-width: 600px; margin: 1.25rem auto 0; }

/* =============================================================================
   Leistung — Detailseite
   ============================================================================= */
.detail-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.detail__media {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow);
  position: sticky;
  top: 100px;
}
.detail__facts {
  display: flex;
  gap: 2.5rem;
  margin: 1.75rem 0;
  padding: 1.5rem 0;
  border-block: 1px solid var(--line);
}
.detail__fact-label {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.35rem;
}
.detail__fact-value {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--ink);
  white-space: pre-line;
}
.detail__body p { margin-bottom: 1.1rem; }
.detail__headline {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  line-height: 1.35;
  color: var(--sage-dark);
  margin: 0.25rem 0 0.5rem;
}
.detail__block { margin-top: 2rem; }
.detail__block-title {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
}
.detail__benefits { list-style: none; display: flex; flex-direction: column; gap: 0.7rem; }
.detail__benefits li { display: flex; align-items: flex-start; gap: 0.7rem; line-height: 1.55; }
.detail__benefits .icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  margin-top: 0.15rem;
  color: var(--sage-dark);
}
.detail__notes {
  padding: 1.25rem 1.5rem;
  background: var(--blush-soft);
  border-radius: var(--radius-lg);
}
.detail__notes p { color: var(--muted); margin-bottom: 0.75rem; }
.detail__notes p:last-child { margin-bottom: 0; }
.detail__packages { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; }
.package-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.package-card__head { display: flex; flex-direction: column; gap: 0.25rem; }
.package-card__title-row { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.package-card__name { font-weight: 600; }
.package-card__sessions { font-size: 0.85rem; color: var(--muted); }
.package-card__desc { font-size: 0.9rem; color: var(--muted); line-height: 1.45; }
.package-card__price {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  color: var(--ink);
  white-space: nowrap;
}
.service-subgroup__title {
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  color: var(--sage-dark);
  margin-bottom: clamp(1rem, 2.5vw, 1.5rem);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line);
}
.detail__cta {
  margin-top: 2rem;
  padding: 1.75rem;
  background: var(--blush-soft);
  border-radius: var(--radius-lg);
}
.detail__cta h3 { margin-bottom: 0.5rem; }
.detail__cta p { color: var(--muted); margin-bottom: 1.5rem; }
.detail__cta-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }
/* Mehrere Buchungsvarianten (z.B. Anti-Cellulite mit vier Optionen).
   Die Beschriftungen sind laenger als der bisherige eine Knopf, deshalb
   etwas weniger Innenabstand und Sperrung. Ab schmalen Displays bekommt
   jede Variante eine eigene volle Zeile - bei vier Optionen ist das die
   einzige Anordnung, die zuverlaessig nicht ueberlaeuft. */
.detail__cta-actions--varianten .btn {
  padding-inline: 1.4rem;
  letter-spacing: 0.08em;
  text-align: center;
}
@media (max-width: 700px) {
  .detail__cta-actions--varianten {
    flex-direction: column;
    align-items: stretch;
  }
  .detail__cta-actions--varianten .btn { width: 100%; }
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.5rem;
}
.back-link:hover { color: var(--sage-dark); }
.back-link .icon { width: 16px; height: 16px; }

/* =============================================================================
   Termin buchen
   ============================================================================= */
.booking-card {
  max-width: 640px;
  margin-inline: auto;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xl);
  padding: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
  box-shadow: var(--shadow);
}
.booking-card .btn { margin-bottom: 1rem; }
/* Auf schmalen Displays ist die Buchungskarte eng: bei 320px Viewport bleiben
   vom Karteninneren (199px) nach dem Knopf-Innenabstand (2x 2.1rem = 67px) nur
   131px fuer den Text uebrig. Schon der bestehende Knopf "Online-Termin buchen"
   brach dort um. Weniger Innenabstand und weniger Sperrung schaffen den Platz;
   ab 375px passen damit beide Knoepfe in DE und RU auf eine Zeile. */
@media (max-width: 480px) {
  .booking-card .btn {
    padding-inline: 1.1rem;
    letter-spacing: 0.06em;
  }
}
.booking-card__note {
  font-size: 0.9rem;
  color: var(--muted);
}
.booking-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 2.5rem 0;
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.booking-divider::before,
.booking-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.booking-secondary {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

/* =============================================================================
   Kontakt
   ============================================================================= */
.contact-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.contact-info { display: flex; flex-direction: column; gap: 2rem; }
.contact-block__label {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage-dark);
  margin-bottom: 0.5rem;
}
.contact-block p,
.contact-block a { color: var(--ink-soft); }
.contact-block a:hover { color: var(--sage-dark); }
.contact-social {
  display: flex;
  gap: 0.8rem;
}
.contact-social a {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
}
.contact-social a:hover {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
.contact-social .icon { width: 20px; height: 20px; }

.hours-list { display: flex; flex-direction: column; gap: 0.4rem; }
.hours-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.95rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--line-soft);
}
.hours-list .day { color: var(--ink); }
.hours-list .time { color: var(--muted); }
.hours-list li.is-today .day,
.hours-list li.is-today .time { color: var(--sage-dark); font-weight: 600; }
.hours-list .closed { color: var(--muted); font-style: italic; }

/* Formular */
.form-card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xl);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  box-shadow: var(--shadow-sm);
}
.form-row { margin-bottom: 1.4rem; }
.form-row label {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.6rem;
}
.input,
.textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.input:focus,
.textarea:focus {
  outline: none;
  border-color: var(--sage-dark);
  box-shadow: 0 0 0 3px rgba(122, 154, 122, 0.16);
}
.textarea { resize: vertical; min-height: 150px; line-height: 1.6; }

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-bottom: 1.6rem;
}
.checkbox-row input {
  margin-top: 0.3rem;
  width: 18px;
  height: 18px;
  accent-color: var(--sage-dark);
  flex-shrink: 0;
}
.checkbox-row label {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.5;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  margin: 0;
}
.checkbox-row a { color: var(--sage-dark); text-decoration: underline; }

/* Honeypot — vor Menschen verbergen */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-alert {
  padding: 1rem 1.2rem;
  border-radius: var(--radius);
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
}
.form-alert--success {
  background: rgba(168, 191, 168, 0.22);
  border: 1px solid var(--sage);
  color: #4f6b4f;
}
.form-alert--error {
  background: rgba(193, 110, 90, 0.12);
  border: 1px solid #d4a08f;
  color: #a85a45;
}

/* Karte / Maps */
.map-wrap {
  margin-top: 3rem;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-sm);
}
.map-wrap iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
  filter: grayscale(0.25) contrast(0.95);
}

/* =============================================================================
   Rechtsseiten
   ============================================================================= */
.legal-content {
  max-width: 760px;
  margin-inline: auto;
}
.legal-note {
  background: var(--blush-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.35rem;
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 2.5rem;
}
.legal-content h2 {
  font-size: 1.6rem;
  margin: 2.5rem 0 1rem;
}
.legal-content h3 {
  font-size: 1.2rem;
  margin: 1.75rem 0 0.6rem;
}
.legal-content p,
.legal-content li { color: var(--ink-soft); margin-bottom: 0.9rem; }
.legal-content ul { padding-left: 1.25rem; list-style: disc; }
.legal-content ul li { margin-bottom: 0.4rem; }
.legal-content address { font-style: normal; }

/* =============================================================================
   Fehlerseiten
   ============================================================================= */
.error-page {
  min-height: 70vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-top: 84px;
}
.error-page .big {
  font-family: var(--font-serif);
  font-size: clamp(5rem, 18vw, 10rem);
  line-height: 1;
  color: var(--blush);
}
.error-page h1 { margin: 0.5rem 0 1rem; }
.error-page p { max-width: 460px; margin: 0 auto 2rem; color: var(--muted); }

/* =============================================================================
   Footer
   ============================================================================= */
.site-footer {
  background: var(--ink);
  color: rgba(250, 243, 236, 0.7);
  padding-block: clamp(3.5rem, 7vw, 5.5rem) 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(250, 243, 236, 0.12);
}
.footer-brand__logo {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream);
  margin-bottom: 1.1rem;
}
.footer-brand p { color: rgba(250, 243, 236, 0.62); font-size: 0.95rem; max-width: 34ch; }
.footer-col h4,
.footer-brand h4 {
  font-family: var(--font-sans);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 1.25rem;
}
.footer-col ul { display: flex; flex-direction: column; gap: 0.7rem; }
.footer-col a,
.footer-col li { color: rgba(250, 243, 236, 0.7); font-size: 0.95rem; }
.footer-col a:hover { color: var(--cream); }
.footer-hours li {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.9rem;
}
.footer-social { display: flex; gap: 0.7rem; margin-top: 1.25rem; }
.footer-social a {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1px solid rgba(250, 243, 236, 0.2);
  border-radius: 999px;
  color: var(--cream);
}
.footer-social a:hover { background: var(--sage-dark); border-color: var(--sage-dark); }
.footer-social .icon { width: 19px; height: 19px; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 2rem;
  font-size: 0.82rem;
  color: rgba(250, 243, 236, 0.5);
}
.footer-bottom__legal { display: flex; flex-wrap: wrap; gap: 1.25rem; }

/* =============================================================================
   Scroll-Reveal entfernt — Inhalte werden statisch und sofort angezeigt.
   Die data-reveal-Attribute in den Templates sind damit wirkungslos.
   ============================================================================= */

/* "Nach oben"-Button */
.to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--cream);
  display: grid;
  place-items: center;
  border: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.35s var(--ease);
  z-index: 90;
  box-shadow: var(--shadow);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--sage-dark); }
.to-top .icon { width: 18px; height: 18px; }

/* Sprung-Link (Barrierefreiheit) */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -60px;
  z-index: 300;
  background: var(--ink);
  color: var(--cream);
  padding: 0.7rem 1.2rem;
  border-radius: var(--radius);
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 1rem; }

:focus-visible {
  outline: 2px solid var(--sage-dark);
  outline-offset: 3px;
}

/* =============================================================================
   Responsive
   ============================================================================= */
@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { order: -1; max-width: 360px; margin-inline: auto; }
  .card-grid--4 { grid-template-columns: repeat(2, 1fr); }
  /* minmax(0, …): lange (v.a. russische) Wörter dürfen die Spalte nicht aufweiten */
  .values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Desktop-Kopfzeile in zwei Dichte-Stufen. Die wörtlich übernommenen
   Inhaber-Texte ("Buchen Sie Ihren Wunschtermin", "Kontaktieren Sie uns")
   sind deutlich länger als die alten Kurzlabels — unterhalb von 1280px
   passen Logo, vier Nav-Punkte, Sprache und CTA nicht mehr einzeilig,
   darum klappt die Navigation dort ins Burger-Menü. */

/* Stufe 1 (1280–1599px): kompakte Dichte — alles einzeilig, nichts läuft über. */
@media (min-width: 1280px) {
  .site-header__inner { gap: 1.1rem; }
  .brand { font-size: 1.15rem; letter-spacing: 0.11em; gap: 0.55rem; }
  .brand img { height: 42px; }
  .site-header.is-scrolled .brand img { height: 38px; }
  .nav { gap: 0.95rem; }
  .nav__link { font-size: 0.76rem; letter-spacing: 0.05em; }
  .header-actions { gap: 0.85rem; }
  .header-cta {
    font-size: 0.72rem;
    letter-spacing: 0.07em;
    padding: 0.85rem 1.3rem;
  }
  /* Sprachumschalter zeigt nur die Flaggen (aria-label bleibt) */
  .lang-switch__item span:not(.lang-switch__flag) { display: none; }
}

/* Stufe 2 (ab 1600px): wieder großzügigere Abstände und Schriftgrade. */
@media (min-width: 1600px) {
  .site-header__inner { gap: 1.5rem; }
  .brand { font-size: 1.32rem; letter-spacing: 0.14em; gap: 0.7rem; }
  .brand img { height: 46px; }
  .site-header.is-scrolled .brand img { height: 40px; }
  .nav { gap: 1.6rem; }
  .nav__link { font-size: 0.79rem; letter-spacing: 0.08em; }
  .header-actions { gap: 1.15rem; }
  .header-cta {
    font-size: 0.76rem;
    letter-spacing: 0.09em;
    padding: 0.95rem 1.7rem;
  }
  .lang-switch__item span:not(.lang-switch__flag) { display: inline; }
}

/* Unterhalb 1280px: Burger-Menü — volle Nav + langer Buchen-Button passen
   nicht mehr ohne Gedränge neben Logo und Sprachumschalter. */
@media (max-width: 1279px) {
  .nav,
  .header-cta { display: none; }
  .nav-toggle { display: flex; }
}

@media (max-width: 1023px) {
  .detail__media { position: static; }
}

@media (max-width: 760px) {
  .usp-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .detail-layout,
  .contact-layout { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .card-grid--3 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  body { font-size: 1rem; }
  .card-grid--4,
  .card-grid--3 { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero__actions .btn,
  .cta-band__actions .btn { width: 100%; }
  .detail__facts { gap: 1.5rem; }
  .lang-switch__item span:not(.lang-switch__flag) { display: none; }

  /* Header auf schmalen Screens entzerren: Wortmarke fluid verkleinern,
     Icon & Abstände straffen — verhindert Überlappung mit Sprachumschalter. */
  .brand {
    font-size: clamp(0.95rem, 4.3vw, 1.3rem);
    letter-spacing: 0.08em;
    gap: 0.5rem;
  }
  .brand img { height: 38px; }
  .site-header.is-scrolled .brand img { height: 34px; }
  .header-actions { gap: 0.75rem; }
}

/* Bewegung reduzieren */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* Detail-Textblöcke: vom Inhaber gesetzte Zeilenumbrüche (einfaches \n in
   beschreibung/hinweise/pakete-Intro) als echte Zeilen darstellen statt zu
   einer Zeile zu kollabieren. vorteile (<li>) und Fakten sind bereits ok. */
.detail__body p,
.detail__notes p,
.detail__packages-intro { white-space: pre-line; }