/* ==========================================================================
   Kosmetikstudio Weinöhl, Merdingen — Stylesheet
   --------------------------------------------------------------------------
   Aufbau:
     1. Design-Tokens          6. Behandlungen
     2. Grundlagen & Reset     7. Preise
     3. Typografie             8. Hochzeit / Produkte / Gutscheine
     4. Navigation             9. Kontakt, Formular, Karte
     5. Hero                  10. Footer, Consent, Hilfsklassen

   Farben ausschließlich über Tokens (var(--…)) verwenden — nie rohe Hex-Werte
   in Komponenten. Alle Kontraste sind gegen WCAG 2.1 AA geprüft, die
   gemessenen Werte stehen als Kommentar an den Tokens.
   ========================================================================== */

/* ==========================================================================
   1. Design-Tokens
   ========================================================================== */

:root {
  /* --- Salbei-Palette (kontrastgeprüft) --- */
  --sage-900: #2E362F;   /* Fließtext, Überschriften — 11.8:1 auf Creme (AAA) */
  --sage-700: #4A5D4E;   /* Sekundärtext, Nav, Buttons — 6.7:1 (AA), weiß darauf 7.1:1 (AAA) */
  --sage-500: #7D9082;   /* NUR Dekor: Linien, Icons — 3.2:1, für Text unzulässig */
  --sage-300: #B8C7BC;   /* Rahmen, Hover-Flächen */
  --sage-200: #D3DED6;   /* zarte Flächen */
  --sage-100: #E4EBE4;   /* Abschnittshintergrund — sage-900 darauf 10.3:1 (AAA) */
  --cream:    #FAF9F6;   /* Grundfläche */
  --white:    #FFFFFF;

  /* --- Warmer Gegenpol --- */
  --accent:      #8A6650; /* CTA & Hervorhebung — 4.9:1 auf Creme (AA), weiß darauf 5.1:1 (AA) */
  --accent-dark: #6F503E; /* Hover-Zustand */
  --accent-soft: #B08D74; /* NUR Dekor: Zierlinien — 2.9:1, für Text unzulässig */

  /* --- Semantische Zuweisungen --- */
  --text:        var(--sage-900);
  --text-weich:  var(--sage-700);
  --bg:          var(--cream);
  --bg-akzent:   var(--sage-100);
  --rahmen:      var(--sage-300);
  --fehler:      #A33A2A;  /* 5.6:1 auf Creme (AA) */
  --erfolg:      #3F6B4A;  /* 5.4:1 auf Creme (AA) */

  /* --- Schrift --- */
  /* Bewusst Systemschriften: keine Google-Fonts-CDN (DSGVO) und keine
     externen Requests. Georgia/Segoe UI sind auf Windows, macOS, iOS und
     Android in gleichwertiger Form vorhanden. */
  --font-serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif;
  --font-sans:  'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

  /* --- Abstände (großzügig, Marketingseite) --- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;

  --radius:    12px;
  --radius-sm: 8px;
  --radius-lg: 20px;

  --schatten:      0 2px 12px rgba(46, 54, 47, 0.06);
  --schatten-hoch: 0 12px 32px rgba(46, 54, 47, 0.12);

  --breite:   1180px;  /* Inhaltsbreite */
  --schmal:   740px;   /* Lesetextbreite */
  --nav-hoehe: 72px;

  /* --- Bewegung ---
     Die eingebauten CSS-Kurven (ease, ease-out) sind zu schwach — sie wirken
     unentschlossen. Diese drei sind erprobte, kräftigere Varianten. */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);      /* Ein- und Austritte */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);     /* Bewegung auf dem Schirm */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);      /* Schubladen, Menüs */

  /* ease-in wird bewusst nirgends verwendet: es startet langsam, genau in dem
     Moment, in dem der Nutzer am genauesten hinschaut — das wirkt träge. */

  --dauer-druck:  120ms;   /* Tastendruck-Rückmeldung */
  --dauer-schnell:180ms;   /* Hover, Farbwechsel */
  --dauer-ui:     240ms;   /* Menüs, Akkordeon, Filter */
  --dauer-reveal: 420ms;   /* Scroll-Einblendung (Marketingfläche, darf ruhiger sein) */

  /* Altname, weiterhin gültig, damit nichts bricht */
  --tempo:  var(--dauer-ui);
  --easing: var(--ease-out);
}

/* --- Bewegung reduzieren ---
   "Reduziert" heißt nicht "keine". Wer diese Einstellung setzt, dem wird von
   Bewegung übel — nicht von Farbe. Deshalb bleiben Farb- und Deckkraft-
   Übergänge erhalten (sie erklären, was gerade passiert), während alles
   Verschiebende, Skalierende und Endlose verschwindet. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* Endlosbewegungen ganz abschalten */
  .hero__hinweis svg,
  .btn__spinner { animation: none !important; }

  /* Parallax und Auftritts-Versatz: einblenden statt bewegen */
  .hero__muster { transform: none !important; }

  .reveal { transform: none; transition: opacity var(--dauer-ui) ease; }

  .karte.tritt-ein {
    animation-name: karte-ein-sanft;
    animation-delay: 0ms;
  }

  /* Hover- und Druckbewegung raus, Farbwechsel bleibt */
  .btn:hover, .btn:active, .btn:hover:active,
  .karte:hover, .produkt:hover,
  .filter__btn:active, .nach-oben.ist-sichtbar:active {
    transform: none;
  }

  .nav__menue { transform: none; }
}

/* Deckkraft-Variante des Karten-Auftritts ohne jede Verschiebung */
@keyframes karte-ein-sanft {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Weniger Transparenz: Milchglas wird zu einer soliden Fläche.
   Für Menschen, denen durchscheinende Flächen die Lesbarkeit nehmen. */
@media (prefers-reduced-transparency: reduce) {
  .nav, .nav.ist-gescrollt {
    background: var(--cream);
    backdrop-filter: none;
  }
  .hero__zeiten {
    background: var(--white);
    backdrop-filter: none;
  }
}

/* Mehr Kontrast: klare Ränder statt zarter Abstufungen */
@media (prefers-contrast: more) {
  :root {
    --rahmen: var(--sage-700);
    --text-weich: var(--sage-900);
  }
  .karte, .karte-box, .gruppe, .produkt { border-color: var(--sage-700); }
  .btn--sekundaer { border-color: var(--sage-700); }
}

/* ==========================================================================
   2. Grundlagen & Reset
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  /* Anker rutschen nicht unter die fixierte Navigation */
  scroll-padding-top: calc(var(--nav-hoehe) + var(--space-2));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1rem;           /* 16 px Basis */
  line-height: 1.65;
  overflow-x: hidden;        /* nie horizontal scrollen */
  -webkit-font-smoothing: antialiased;
}

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

/* Fokus bleibt IMMER sichtbar — nur gestaltet, nie entfernt */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Sprungmarke für Tastatur- und Screenreader-Nutzung */
.skip-link {
  position: absolute;
  left: var(--space-2);
  top: var(--space-2);
  z-index: 200;
  padding: var(--space-2) var(--space-3);
  background: var(--accent);
  color: var(--white);
  border-radius: var(--radius-sm);
  text-decoration: none;
  /* Über transform aus dem Bild geschoben, nicht über 'top'. 'top' löst in
     jedem Einzelbild eine Layout-Berechnung aus; transform läuft auf der
     Grafikkarte. */
  transform: translateY(-200%);
  transition: transform var(--dauer-schnell) var(--ease-out);
}
.skip-link:focus { transform: none; }

/* ==========================================================================
   3. Typografie
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--text);
  margin: 0 0 var(--space-2);
}

/* Laufweite und Zeilenhöhe gehören zur Schriftgröße, nicht zur Seite.
   Große Schrift wirkt von selbst zu weit gesperrt und braucht negative
   Laufweite; kleine Schrift braucht eher etwas mehr Luft. Ein einziger
   letter-spacing-Wert für alle Größen ist irgendwo immer falsch.
   Ebenso die Zeilenhöhe: eng bei großen Überschriften, luftig im Fließtext. */
h1 {
  font-size: clamp(2.4rem, 6vw, 4.1rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
}
h2 {
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
h3 {
  font-size: clamp(1.2rem, 2.2vw, 1.45rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
}
h4 { line-height: 1.3; letter-spacing: 0; }

p { margin: 0 0 var(--space-2); }
a { color: var(--accent); }
a:hover { color: var(--accent-dark); }

/* Kleine Überschrift über der Hauptüberschrift */
.augenbraue {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-weich);
  margin-bottom: var(--space-1);
}

.lead {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: var(--text-weich);
  max-width: var(--schmal);
}

/* Zierlinie mit Blattmotiv */
.zierlinie {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-3) 0;
  color: var(--sage-500);
}
.zierlinie::before,
.zierlinie::after {
  content: '';
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, var(--sage-300), transparent);
}
.zierlinie svg { width: 22px; height: 22px; flex: none; }
.zierlinie.links::before { display: none; }
.zierlinie.links { justify-content: flex-start; }
.zierlinie.links::after { max-width: 120px; }

/* ==========================================================================
   Layout-Bausteine
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

.abschnitt { padding-block: var(--space-7); }
.abschnitt--akzent { background: var(--bg-akzent); }
.abschnitt--dunkel { background: var(--sage-700); color: var(--white); }
.abschnitt--dunkel h2, .abschnitt--dunkel h3 { color: var(--white); }
.abschnitt--dunkel .augenbraue { color: var(--sage-200); }

.abschnitt__kopf {
  max-width: var(--schmal);
  margin-bottom: var(--space-5);
}
.abschnitt__kopf--mitte {
  margin-inline: auto;
  text-align: center;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  /* min. 44 px Höhe für Touch */
  min-height: 48px;
  padding: 0.75rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 100px;
  font-family: var(--font-sans);
  font-size: 0.97rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dauer-schnell) ease,
              color var(--dauer-schnell) ease,
              transform var(--dauer-schnell) var(--ease-out),
              box-shadow var(--dauer-schnell) var(--ease-out);
}

/* Druck-Rückmeldung. Das Wichtigste am ganzen Button: die Oberfläche bestätigt
   sofort, dass sie den Nutzer gehört hat. Bewusst NICHT hinter eine
   Hover-Abfrage gestellt — auf dem Handy wird genauso gedrückt wie am Rechner. */
.btn:active {
  transform: scale(0.97);
  transition-duration: var(--dauer-druck);
}

/* Anheben nur, wo es einen echten Mauszeiger gibt. Auf Touch-Geräten löst
   :hover beim Antippen fälschlich aus und bleibt danach hängen. */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); }
  .btn:hover:active { transform: scale(0.97); }
}

.btn--primaer {
  background: var(--accent);
  color: var(--white);          /* 5.1:1 — AA */
  box-shadow: var(--schatten);
}
.btn--primaer:hover {
  background: var(--accent-dark);
  color: var(--white);
  box-shadow: var(--schatten-hoch);
}
/* Fokus über Tastatur bekommt dieselbe Aufwertung wie Hover */
.btn--primaer:focus-visible { background: var(--accent-dark); }

.btn--sekundaer {
  background: transparent;
  color: var(--sage-700);       /* 6.7:1 — AA */
  border-color: var(--sage-500);
}
.btn--sekundaer:hover {
  background: var(--sage-700);
  color: var(--white);
  border-color: var(--sage-700);
}

.btn--hell {
  background: var(--white);
  color: var(--sage-700);
}
.btn--hell:hover { background: var(--sage-100); color: var(--sage-900); }

.btn--klein { min-height: 44px; padding: 0.5rem 1.1rem; font-size: 0.88rem; }
.btn svg { width: 18px; height: 18px; flex: none; }

/* ==========================================================================
   4. Navigation
   ========================================================================== */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-hoehe);
  display: flex;
  align-items: center;
  background: rgba(250, 249, 246, 0.82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: background var(--tempo) var(--easing),
              border-color var(--tempo) var(--easing),
              box-shadow var(--tempo) var(--easing);
}
/* Zustand nach dem Scrollen — per JS gesetzt */
.nav.ist-gescrollt {
  background: rgba(250, 249, 246, 0.97);
  border-bottom-color: var(--sage-200);
  box-shadow: var(--schatten);
}

.nav__inner {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;          /* Touch-Ziel */
  text-decoration: none;
  color: var(--text);
  line-height: 1.1;
}
.logo svg { width: 30px; height: 30px; color: var(--sage-500); flex: none; }
.logo__name {
  font-family: var(--font-serif);
  font-size: 1.16rem;
  letter-spacing: 0.01em;
}
.logo__ort {
  display: block;
  font-family: var(--font-sans);
  /* 12 px ist die Untergrenze für lesbaren Text — 0.66rem wären 10,6 px
     gewesen. Die weite Laufweite trägt die Kleinschreibung mit. */
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-weich);
}

.nav__liste {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__link {
  display: block;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--text-weich);
  font-size: 0.93rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--tempo) var(--easing), background var(--tempo) var(--easing);
}
.nav__link:hover { color: var(--sage-900); background: var(--sage-100); }
/* Aktiver Abschnitt (Scrollspy) — nicht nur Farbe, auch eine Linie,
   damit die Information nicht allein über Farbe transportiert wird */
.nav__link[aria-current='true'] {
  color: var(--sage-900);
  background: var(--sage-100);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.nav__cta { margin-left: var(--space-1); }

/* Burger */
.burger {
  display: none;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--sage-300);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--sage-700);
}
.burger svg { width: 22px; height: 22px; }
.burger__schliessen { display: none; }
.burger[aria-expanded='true'] .burger__oeffnen   { display: none; }
.burger[aria-expanded='true'] .burger__schliessen { display: block; }

@media (max-width: 940px) {
  .burger { display: flex; }

  .nav__menue {
    position: fixed;
    inset: var(--nav-hoehe) 0 auto 0;
    background: var(--cream);
    border-bottom: 1px solid var(--sage-200);
    box-shadow: var(--schatten-hoch);
    padding: var(--space-2) var(--space-3) var(--space-4);
    /* geschlossen: unsichtbar UND nicht per Tabulator erreichbar.
       visibility darf NICHT mitanimiert werden — der Wert würde erst am Ende
       der Animation umspringen, das Menü wäre also während des Einblendens
       noch unsichtbar und nicht fokussierbar. Beim Schließen dagegen soll das
       Ausblenden erst NACH der Animation greifen, daher die Verzögerung. */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    /* Schubladen-Kurve: schnell los, weich aus — das Menü fährt aus dem Rand,
       statt neutral einzublenden. */
    transition: opacity var(--dauer-ui) var(--ease-drawer),
                transform var(--dauer-ui) var(--ease-drawer),
                visibility 0s linear var(--dauer-ui);
  }
  .nav__menue.ist-offen {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--tempo) var(--easing),
                transform var(--tempo) var(--easing),
                visibility 0s linear 0s;
  }
  .nav__liste { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav__link { padding: 0.85rem 1rem; font-size: 1.02rem; }
  .nav__cta { margin: var(--space-2) 0 0; }
  .nav__cta .btn { width: 100%; }
}

/* ==========================================================================
   5. Hero
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  /* vh zuerst als Rückfall für ältere Browser … */
  min-height: min(94vh, 820px);
  /* … dvh gewinnt, wo es unterstützt wird. Auf iOS-Safari meint vh die Höhe
     OHNE eingefahrene Adressleiste — der Hero wird beim ersten Scrollen also
     schlagartig kürzer und die ganze Seite ruckt. dvh macht das nicht. */
  min-height: min(94dvh, 820px);
  padding-block: calc(var(--nav-hoehe) + var(--space-6)) var(--space-6);
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 72% 18%, rgba(184, 199, 188, 0.55), transparent 60%),
    linear-gradient(168deg, var(--sage-100) 0%, var(--cream) 52%, var(--sage-200) 100%);
}

/* Blattmuster — dekorativ, per JS sanft parallax bewegt */
.hero__muster {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: var(--sage-500);
  opacity: 0.22;
  will-change: transform;
}

.hero__inhalt {
  position: relative;
  z-index: 1;
  max-width: 760px;
}
.hero h1 { margin-bottom: var(--space-2); }
.hero h1 em {
  display: block;
  font-style: italic;
  color: var(--sage-700);
}
.hero__text {
  font-size: clamp(1.05rem, 1.7vw, 1.24rem);
  color: var(--text-weich);
  max-width: 56ch;
  margin-bottom: var(--space-4);
}
.hero__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

/* Öffnungszeiten-Kachel im Hero */
.hero__zeiten {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--sage-200);
  border-radius: var(--radius);
  backdrop-filter: blur(6px);
  font-size: 0.92rem;
  color: var(--text-weich);
}
.hero__zeiten strong { color: var(--sage-900); font-weight: 600; }
.hero__zeiten svg { width: 20px; height: 20px; color: var(--sage-500); flex: none; }

/* Scroll-Hinweis */
.hero__hinweis {
  position: absolute;
  left: 50%;
  bottom: var(--space-3);
  transform: translateX(-50%);
  color: var(--text-weich);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.hero__hinweis svg { width: 20px; height: 20px; animation: schweben 2.4s ease-in-out infinite; }

@keyframes schweben {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}

@media (max-width: 620px) {
  .hero { min-height: auto; padding-block: calc(var(--nav-hoehe) + var(--space-5)) var(--space-6); }
  .hero__hinweis { display: none; }
  .hero__aktionen .btn { width: 100%; }
}

/* ==========================================================================
   6. Behandlungen
   ========================================================================== */

/* Filter-Reiter */
.filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}
.filter__btn {
  min-height: 44px;
  padding: 0.55rem 1.15rem;
  background: transparent;
  border: 1px solid var(--sage-300);
  border-radius: 100px;
  color: var(--sage-700);
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--dauer-schnell) ease,
              color var(--dauer-schnell) ease,
              border-color var(--dauer-schnell) ease,
              transform var(--dauer-druck) var(--ease-out);
}
/* Ohne Gating bliebe der Hover nach dem Antippen hängen und würde mit dem
   echten "ausgewählt"-Zustand konkurrieren. */
@media (hover: hover) and (pointer: fine) {
  .filter__btn:hover { background: var(--sage-100); }
}
.filter__btn:active { transform: scale(0.97); }
.filter__btn[aria-pressed='true'] {
  background: var(--sage-700);
  border-color: var(--sage-700);
  color: var(--white);
}

.karten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: var(--space-3);
}

.karte {
  display: flex;
  flex-direction: column;
  padding: var(--space-3);
  background: var(--white);
  border: 1px solid var(--sage-200);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  /* nur transform/opacity animieren, nie width/height */
  transition: transform var(--dauer-schnell) var(--ease-out),
              box-shadow var(--dauer-schnell) var(--ease-out),
              border-color var(--dauer-schnell) ease,
              opacity var(--dauer-ui) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .karte:hover {
    transform: translateY(-4px);
    box-shadow: var(--schatten-hoch);
    border-color: var(--sage-300);
  }
}

/* ausgeblendete Karte beim Filtern */
.karte[hidden] { display: none; }

/* Filterwechsel: die neue Auswahl blendet sich gestaffelt ein, statt
   schlagartig dazustehen. --i wird per JS gesetzt (Position in der Reihe).
   Rein dekorativ — die Karten sind ab der ersten Millisekunde bedienbar. */
.karte.tritt-ein {
  animation: karte-ein var(--dauer-ui) var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 35ms);
}

@keyframes karte-ein {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

.karte__icon {
  width: 46px;
  height: 46px;
  margin-bottom: var(--space-2);
  padding: 10px;
  color: var(--sage-700);
  background: var(--sage-100);
  border-radius: 50%;
  flex: none;
}
.karte h3 { margin-bottom: 0.35rem; }
.karte__zusatz {
  font-family: var(--font-sans);
  font-size: 0.83rem;
  font-style: italic;
  color: var(--text-weich);
}
.karte__text {
  flex: 1;
  font-size: 0.94rem;
  color: var(--text-weich);
  margin-bottom: var(--space-3);
}
.karte__fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--sage-200);
}
.karte__preis {
  font-family: var(--font-serif);
  font-size: 1.32rem;
  color: var(--sage-900);
}
.karte__preis span {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--text-weich);
}
/* "auf Anfrage" statt Betrag */
.karte__preis--anfrage { font-size: 1rem; color: var(--text-weich); font-style: italic; }

/* ==========================================================================
   7. Preise
   ========================================================================== */

.preis-werkzeug {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.suche { position: relative; flex: 1 1 320px; max-width: 420px; }
.suche svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 19px;
  height: 19px;
  color: var(--sage-500);
  pointer-events: none;
}
.suche input {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 1rem 0.7rem 2.85rem;
  background: var(--white);
  border: 1px solid var(--sage-300);
  border-radius: 100px;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--text);
}
.suche input:focus { border-color: var(--sage-500); }

.preis-treffer { font-size: 0.9rem; color: var(--text-weich); }

.gruppe {
  border: 1px solid var(--sage-200);
  border-radius: var(--radius);
  background: var(--white);
  margin-bottom: var(--space-2);
  overflow: hidden;
}
.gruppe[hidden] { display: none; }

.gruppe__kopf {
  width: 100%;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-serif);
  font-size: 1.16rem;
  color: var(--sage-900);
  transition: background var(--tempo) var(--easing);
}
@media (hover: hover) and (pointer: fine) {
  .gruppe__kopf:hover { background: var(--sage-100); }
}
.gruppe__kopf:active { background: var(--sage-200); }

.gruppe__pfeil {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--sage-500);
  transition: transform var(--dauer-ui) var(--ease-out);
}
.gruppe__kopf[aria-expanded='true'] .gruppe__pfeil { transform: rotate(180deg); }

/* Auf- und Zuklappen.
   Höhe ist die eine Ausnahme von der Regel "nur transform und opacity" — für
   ein Akkordeon gibt es keine Entsprechung mit transform. Deshalb bewusst kurz
   gehalten: Höhe kostet in jedem einzelnen Bild Layout-Arbeit.
   Den Zielwert in Pixeln misst main.js und schreibt ihn nach --hoehe. */
.gruppe__inhalt {
  padding: 0 var(--space-3) var(--space-2);
  overflow: hidden;
}

.gruppe__inhalt.klappt {
  height: var(--hoehe, auto);
  transition: height var(--dauer-ui) var(--ease-out),
              opacity var(--dauer-ui) var(--ease-out);
}
.gruppe__inhalt.klappt.ist-zu { height: 0; opacity: 0; }
.gruppe__hinweis {
  font-size: 0.88rem;
  font-style: italic;
  color: var(--text-weich);
  margin-bottom: var(--space-1);
}

.preis-zeile {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: 0.7rem 0;
  border-bottom: 1px dashed var(--sage-200);
}
.preis-zeile:last-child { border-bottom: 0; }
.preis-zeile[hidden] { display: none; }
/* Der Name nimmt nur den Platz, den er braucht — den Rest bis zum Preis
   füllt die gepunktete Linie, wie in einer klassischen Preisliste. */
.preis-zeile__name { flex: 0 1 auto; }
.preis-zeile__name em {
  font-style: italic;
  font-size: 0.87rem;
  color: var(--text-weich);
}
/* Treffer der Live-Suche hervorheben */
.preis-zeile mark {
  background: var(--sage-200);
  color: var(--sage-900);
  border-radius: 3px;
  padding: 0 2px;
}
.preis-zeile__punkte {
  flex: 1 1 auto;
  min-width: 20px;
  height: 1px;
  align-self: center;
  border-bottom: 1px dotted var(--sage-300);
}
.preis-zeile__preis {
  font-family: var(--font-serif);
  font-size: 1.08rem;
  color: var(--sage-900);
  white-space: nowrap;
}

.preis-leer {
  padding: var(--space-4);
  text-align: center;
  color: var(--text-weich);
}
.preis-fuss {
  margin-top: var(--space-3);
  font-size: 0.87rem;
  color: var(--text-weich);
}

/* ==========================================================================
   8. Hochzeit, Produkte, Gutscheine
   ========================================================================== */

.zwei-spalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-5);
  align-items: center;
}

/* Vorbereiteter Bildplatz — hier kommen später echte Fotos hinein.
   Seitenverhältnis ist reserviert, damit nichts springt (CLS). */
.bildplatz {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 25%, var(--sage-200), transparent 55%),
    linear-gradient(140deg, var(--sage-100), var(--sage-300));
  border: 1px solid var(--sage-200);
  display: grid;
  place-items: center;
  color: var(--sage-500);
}
.bildplatz svg { width: 44%; height: auto; opacity: 0.5; }
.bildplatz img { width: 100%; height: 100%; object-fit: cover; }

.liste-haken { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.liste-haken li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: 0.6rem;
}
.liste-haken li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent-soft);
}
.abschnitt--dunkel .liste-haken li::before { background: var(--sage-200); }

/* Produktkarten */
/* Bewusst KEINE Reihe aus drei gleich großen Karten — das ist das generischste
   Muster im Netz und lässt jede Seite austauschbar wirken. Stattdessen zwei
   ungleich breite Marken-Karten und darunter ein ruhiges Textband ohne Kasten. */
.produkte {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

@media (min-width: 760px) {
  .produkte { grid-template-columns: 1.25fr 1fr; }
  .produkt--breit { grid-column: 1 / -1; }
}
.produkt {
  padding: var(--space-4) var(--space-3);
  background: var(--white);
  border: 1px solid var(--sage-200);
  border-radius: var(--radius);
  text-align: center;
  transition: transform var(--tempo) var(--easing), box-shadow var(--tempo) var(--easing);
}
@media (hover: hover) and (pointer: fine) {
  .produkt:hover { transform: translateY(-3px); box-shadow: var(--schatten); }
}
.produkt__marke {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  color: var(--sage-900);
  margin-bottom: 0.25rem;
}
.produkt__rolle {
  font-size: 0.76rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-weich);
  margin-bottom: var(--space-2);
}
/* Eigenständiger Link zur Herstellerseite: mind. 44 px Touch-Ziel */
.produkt a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Das Textband: kein Kasten, nur eine Linie und Luft. Ein Kasten wäre hier
   reine Dekoration — er trägt keine Hierarchie, die es zu zeigen gäbe. */
.produkt--breit {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--sage-300);
  border-radius: 0;
  padding: var(--space-4) 0 0;
  text-align: left;
  max-width: 62ch;
}
.produkt--breit:hover { transform: none; box-shadow: none; }
.produkt--breit .produkt__marke {
  font-size: 1.35rem;
  margin-bottom: 0.15rem;
}

/* Gutschein-Banner */
.gutschein {
  position: relative;
  padding: var(--space-6) var(--space-4);
  background: var(--white);
  border: 2px dashed var(--sage-300);
  border-radius: var(--radius-lg);
  text-align: center;
}
.gutschein::before,
.gutschein::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 26px;
  height: 26px;
  background: var(--bg-akzent);
  border-radius: 50%;
  transform: translateY(-50%);
}
.gutschein::before { left: -14px; }
.gutschein::after  { right: -14px; }

/* Vita-Zeitstrahl */
.zeitstrahl { list-style: none; margin: 0; padding: 0; position: relative; }
.zeitstrahl::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(var(--sage-300), var(--sage-200));
}
.zeitstrahl li {
  position: relative;
  padding-left: var(--space-4);
  padding-bottom: var(--space-3);
}
.zeitstrahl li:last-child { padding-bottom: 0; }
.zeitstrahl li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--cream);
  border: 3px solid var(--sage-500);
}
.zeitstrahl__jahr {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.2rem;
  color: var(--accent);
}

/* ==========================================================================
   9. Kontakt, Formular, Karte
   ========================================================================== */

.kontakt-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--space-5);
  align-items: start;
}

.karte-box {
  padding: var(--space-4);
  background: var(--white);
  border: 1px solid var(--sage-200);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}

/* --- Formular --- */
.feld { margin-bottom: var(--space-3); }
.feld-reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-2);
}

.feld label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--sage-900);
}
.feld .pflicht { color: var(--fehler); }
.feld__hilfe {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--text-weich);
}

.feld input,
.feld select,
.feld textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.9rem;
  background: var(--cream);
  border: 1px solid var(--sage-300);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 1rem;      /* 16 px verhindert Auto-Zoom auf iOS */
  color: var(--text);
  transition: border-color var(--tempo) var(--easing),
              box-shadow var(--tempo) var(--easing);
}
.feld textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.feld input:focus,
.feld select:focus,
.feld textarea:focus {
  border-color: var(--sage-500);
  box-shadow: 0 0 0 3px rgba(125, 144, 130, 0.2);
}
/* Fehlerzustand — Farbe UND Text, nie Farbe allein */
.feld.hat-fehler input,
.feld.hat-fehler select,
.feld.hat-fehler textarea { border-color: var(--fehler); }

.feld__fehler {
  display: none;
  align-items: center;
  gap: 6px;
  margin-top: 0.4rem;
  font-size: 0.85rem;
  color: var(--fehler);
}
.feld.hat-fehler .feld__fehler { display: flex; }
.feld__fehler svg { width: 15px; height: 15px; flex: none; }

/* Checkbox */
.feld--check { display: flex; align-items: flex-start; gap: 0.7rem; }
.feld--check input {
  width: 24px;
  height: 24px;
  min-height: 24px;
  margin-top: 2px;
  flex: none;
  accent-color: var(--accent);
}
/* Das Label gehört mit zum Klickbereich und vergrößert das Ziel zusätzlich. */
.feld--check label { cursor: pointer; }
.feld--check label { font-weight: 400; font-size: 0.9rem; margin: 0; }
.feld--check .feld__fehler { margin-left: 0; }

.zeichen-zaehler {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.8rem;
  color: var(--text-weich);
  text-align: right;
}

/* Honeypot — für Menschen unsichtbar, für Bots verlockend */
.honigtopf {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Ladezustand des Absende-Buttons */
.btn[data-laedt='true'] { pointer-events: none; opacity: 0.75; }
.btn__spinner { display: none; width: 17px; height: 17px; animation: dreh 0.9s linear infinite; }
.btn[data-laedt='true'] .btn__spinner { display: block; }
@keyframes dreh { to { transform: rotate(360deg); } }

/* Rückmeldung nach dem Absenden */
.formular-meldung {
  display: none;
  gap: 0.7rem;
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
  border-radius: var(--radius-sm);
  font-size: 0.94rem;
}
.formular-meldung.ist-sichtbar { display: flex; }
.formular-meldung svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.formular-meldung--erfolg {
  background: #EDF4EE;
  border: 1px solid var(--erfolg);
  color: var(--erfolg);
}
.formular-meldung--fehler {
  background: #FAEEEC;
  border: 1px solid var(--fehler);
  color: var(--fehler);
}

/* --- Kontaktdaten --- */
.info-liste { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.info-liste li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--sage-200);
}
.info-liste li:last-child { border-bottom: 0; }
.info-liste svg { width: 21px; height: 21px; color: var(--sage-500); flex: none; margin-top: 3px; }
/* Eigenständige Links: als Touch-Ziel mind. 44 px hoch */
.info-liste a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--accent);
  text-decoration: none;
}
.info-liste a:hover { text-decoration: underline; }
.info-liste dt {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-weich);
  margin-bottom: 2px;
}
.info-liste dd { margin: 0; }

.zeiten-tabelle { width: 100%; border-collapse: collapse; }
.zeiten-tabelle th,
.zeiten-tabelle td {
  padding: 0.6rem 0;
  text-align: left;
  border-bottom: 1px solid var(--sage-200);
  font-weight: 400;
}
.zeiten-tabelle th { width: 45%; color: var(--text-weich); }
.zeiten-tabelle td { text-align: right; }
/* heutiger Tag — Markierung per JS */
.zeiten-tabelle tr.ist-heute th,
.zeiten-tabelle tr.ist-heute td {
  color: var(--sage-900);
  font-weight: 700;
}
.zeiten-tabelle tr.ist-heute th::after {
  content: ' — heute';
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--accent);
}

/* --- Karte --- */
.karten-fenster {
  position: relative;
  aspect-ratio: 16 / 11;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--sage-200);
  background: linear-gradient(140deg, var(--sage-100), var(--sage-300));
}
.karten-fenster iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Platzhalter, solange die Karte nicht freigegeben ist */
.karten-sperre {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4);
  text-align: center;
  color: var(--sage-900);
}
/* Der Platzhalter wird beim Laden der Karte nur ausgeblendet, nicht entfernt —
   damit er bei einem Widerruf wieder erscheinen kann. */
.karten-sperre[hidden] { display: none; }
.karten-sperre svg { width: 42px; height: 42px; color: var(--sage-700); }
.karten-sperre p { max-width: 42ch; font-size: 0.92rem; color: var(--sage-900); }

.route-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-2);
}

.weg { margin-top: var(--space-3); }
.weg h4 {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-weich);
  margin-bottom: 0.3rem;
}
.weg p { font-size: 0.92rem; color: var(--text-weich); }

/* ==========================================================================
   10. Footer, Consent, Hilfsklassen
   ========================================================================== */

.footer {
  background: var(--sage-700);
  color: var(--sage-200);
  padding-block: var(--space-6) var(--space-3);
}
.footer a { color: var(--white); }
.footer__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.footer h3 {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: var(--space-2);
}
.footer__liste { list-style: none; margin: 0; padding: 0; }
.footer__liste li { margin-bottom: 0.15rem; }
/* Eigenständige Links: als Touch-Ziel mind. 44 px hoch */
.footer__liste a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}
.footer__liste a:hover { text-decoration: underline; }
.footer .logo { color: var(--white); }
.footer .logo svg { color: var(--sage-200); }
.footer .logo__ort { color: var(--sage-200); }
.footer__unten {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.85rem;
}

/* Consent-Banner (Google Maps) */
.consent {
  position: fixed;
  left: var(--space-2);
  right: var(--space-2);
  bottom: var(--space-2);
  z-index: 150;
  max-width: 560px;
  margin-inline: auto;
  padding: var(--space-3);
  background: var(--white);
  border: 1px solid var(--sage-300);
  border-radius: var(--radius);
  box-shadow: var(--schatten-hoch);
  display: none;
}

/* Auftritt von unten — dorthin, wo das Banner sitzt. Der Weg hinein ist
   derselbe wie der Weg hinaus, damit die Herkunft ablesbar bleibt.
   Nie aus scale(0): nichts in der echten Welt entsteht aus dem Nichts. */
.consent.ist-sichtbar {
  display: block;
  animation: consent-ein var(--dauer-ui) var(--ease-out) backwards;
}

@keyframes consent-ein {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .consent.ist-sichtbar { animation-name: karte-ein-sanft; }
}
.consent h2{ font-size: 1.15rem; margin-bottom: 0.4rem; }
.consent p { font-size: 0.88rem; color: var(--text-weich); margin-bottom: var(--space-2); }
.consent__aktionen { display: flex; flex-wrap: wrap; gap: var(--space-1); }

/* Nach-oben-Button */
.nach-oben {
  position: fixed;
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: 90;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: var(--sage-700);
  color: var(--white);
  border: 0;
  border-radius: 50%;
  box-shadow: var(--schatten-hoch);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--tempo) var(--easing),
              transform var(--tempo) var(--easing),
              visibility var(--tempo),
              background var(--tempo) var(--easing);
}
.nach-oben.ist-sichtbar { opacity: 1; visibility: visible; transform: translateY(0); }
@media (hover: hover) and (pointer: fine) {
  .nach-oben:hover { background: var(--sage-900); }
}
.nach-oben.ist-sichtbar:active {
  transform: scale(0.94);
  transition-duration: var(--dauer-druck);
}
.nach-oben svg { width: 22px; height: 22px; }

/* Einblenden beim Scrollen (IntersectionObserver).
   WICHTIG: Der versteckte Ausgangszustand gilt nur, wenn das JavaScript
   tatsächlich läuft — main.js setzt dazu die Klasse .js-aktiv auf <html>.
   Ohne diese Absicherung bliebe die ganze Seite unsichtbar, falls das Skript
   einmal nicht geladen wird. */
/* Etwas ruhiger als übliche Bedien-Bewegung (420 statt 240 ms). Das passt zum
   Charakter eines Kosmetikstudios, läuft nur einmal je Abschnitt und blockiert
   nie eine Bedienung. */
.reveal {
  transition: opacity var(--dauer-reveal) var(--ease-out),
              transform var(--dauer-reveal) var(--ease-out);
}

.js-aktiv .reveal {
  opacity: 0;
  transform: translateY(16px);
}
.js-aktiv .reveal.ist-sichtbar { opacity: 1; transform: none; }

/* Bei reduzierter Bewegung nur noch aufblenden, nicht mehr verschieben. */
@media (prefers-reduced-motion: reduce) {
  .js-aktiv .reveal { transform: none; }
  .js-aktiv .reveal:not(.ist-sichtbar) { opacity: 0; }
}

/* Nur für Screenreader */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Unterseiten (Impressum, Datenschutz, Danke) */
.textseite { padding-block: calc(var(--nav-hoehe) + var(--space-6)) var(--space-6); }
.textseite .container { max-width: var(--schmal); }
.textseite h2 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); margin-top: var(--space-4); }
.textseite h3 { margin-top: var(--space-3); }
.textseite ul { padding-left: 1.2rem; }
.textseite li { margin-bottom: 0.4rem; }

@media print {
  .nav, .consent, .nach-oben, .hero__hinweis, .filter { display: none !important; }
  body { background: #fff; }
  .reveal { opacity: 1; transform: none; }
}