/* ==========================================================================
   Praxis Dermajolie – Stylesheet
   Farben: klares Weiß + helles Taupe-Beige. Mobile First.
   ========================================================================== */

:root {
  --weiss: #ffffff;
  --creme: #fbf9f6;
  --sand: #f5f0eb;
  --sand-2: #ece4dc;
  --taupe: #d6c9bd;
  --taupe-3: #b3a092;
  --akzent: #7d6858;
  --tinte: #2f2925;
  --tinte-2: #5c524b;
  --linie: #e8e0d8;
  --wa: #1f8f55;

  --serif: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --sans: "Jost", "Segoe UI", system-ui, -apple-system, sans-serif;

  --radius: 18px;
  --radius-klein: 10px;
  --schatten: 0 18px 50px -24px rgba(72, 54, 40, .28);
  --schatten-klein: 0 6px 20px -10px rgba(72, 54, 40, .25);
  --kopf-h: 72px;
  --gutter: 20px;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-synthesis: none; -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf-h) + 16px); }
body {
  margin: 0; background: var(--weiss); color: var(--tinte);
  font-family: var(--sans); font-weight: 400; font-size: 16.5px; line-height: 1.65;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.005em; }
h1 { font-size: clamp(2.5rem, 7vw, 4.4rem); }
h2 { font-size: clamp(2rem, 5vw, 3rem); }
h3 { font-size: 1.55rem; }
/* Kundenwunsch: keine kursive Schrift. <em> = farbiger Akzent, aufrecht. */
em, i, cite, dfn, var, address { font-style: normal; }
h1 em, h2 em { color: var(--akzent); }
h1 em { display: block; }
/* sehr schmale Handys (320 px): lange Wörter wie „Mikrodermabrasion“ trennen statt seitlich überlaufen */
@media (max-width: 400px) { h1, h2 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; } }
p { margin: 0 0 1em; }
svg { flex-shrink: 0; }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }
.schmal { max-width: 820px; }
.sprung { position: absolute; left: -999px; top: 8px; z-index: 1000; background: var(--tinte); color: #fff; padding: 10px 16px; border-radius: 8px; }
.sprung:focus { left: 8px; }

.kicker, .mini-kicker {
  font-family: var(--sans); text-transform: uppercase; letter-spacing: .22em; font-size: .74rem;
  font-weight: 500; color: var(--akzent); margin: 0 0 1rem; display: flex; align-items: center; gap: .8em;
}
.kicker::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .6; }
.mini-kicker { letter-spacing: .16em; font-size: .7rem; margin-bottom: .5rem; }
.lead { font-size: 1.12rem; color: var(--tinte-2); max-width: 40em; font-weight: 300; }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 50px; padding: 0 1.6em; border-radius: 999px; border: 1px solid transparent;
  font-size: .82rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; transition: background .25s, color .25s, border-color .25s, transform .25s, box-shadow .25s; white-space: nowrap;
}
.knopf svg { width: 18px; height: 18px; }
.knopf-dunkel { background: var(--tinte); color: #fff; }
.knopf-dunkel:hover { background: #4a3f37; transform: translateY(-1px); box-shadow: var(--schatten-klein); }
.knopf-hell { background: var(--weiss); color: var(--tinte); border-color: var(--taupe); }
.knopf-hell:hover { border-color: var(--tinte); }
.knopf-linie { background: transparent; color: var(--tinte); border-color: var(--tinte); }
.knopf-linie:hover { background: var(--tinte); color: #fff; }
.knopf-wa { background: var(--wa); color: #fff; width: 100%; }
.knopf-wa:hover { background: #18774a; }
.knopf-ig { background: linear-gradient(45deg, #f2a65a, #d6336c 55%, #8f3bb8); color: #fff; min-height: 42px; }
.knopf-text { display: inline-flex; align-items: center; gap: .45em; color: var(--tinte); font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--taupe); padding-bottom: 2px; font-size: .95rem; }
.knopf-text svg { width: 18px; height: 18px; transition: transform .25s; }
.knopf-text:hover svg { transform: translateX(3px); }
.knopf-klein { display: inline-flex; align-items: center; gap: .4em; background: var(--sand); border: 1px solid var(--taupe); border-radius: 999px; padding: .5em 1em; font-size: .8rem; font-weight: 500; cursor: pointer; transition: background .2s; }
.knopf-klein svg { width: 15px; height: 15px; }
.knopf-klein:hover, .knopf-klein.ist-gewaehlt { background: var(--tinte); color: #fff; border-color: var(--tinte); }
.knopf-reihe { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 1.6rem; }
.knopf-mitte { justify-content: center; }
.knopf-spalte { display: flex; flex-direction: column; gap: 10px; }
.mehr { display: inline-flex; align-items: center; gap: .4em; font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 500; color: var(--akzent); }
.mehr svg { width: 16px; height: 16px; transition: transform .25s; }

/* ---------- Bilder (festes Seitenverhältnis, jedes Foto passt) ---------- */
.bild { margin: 0; position: relative; overflow: hidden; aspect-ratio: var(--verh, 4/3); background: var(--sand); border-radius: var(--radius); }
.bild img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center); transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.bild.bogen { border-radius: 999px 999px var(--radius) var(--radius); }

/* ---------- Sterne / Google ---------- */
.sterne { display: inline-flex; gap: 2px; color: #e2a63b; }
.sterne svg { width: 15px; height: 15px; fill: currentColor; }
.g-logo { width: 18px; height: 18px; }
.google-badge { display: inline-flex; align-items: center; gap: .5em; padding: .45em .95em .45em .7em; border-radius: 999px; background: var(--weiss); border: 1px solid var(--linie); text-decoration: none; font-size: .88rem; box-shadow: var(--schatten-klein); transition: transform .2s; }
.google-badge:hover { transform: translateY(-1px); }
.gb-wert { font-weight: 600; }
.gb-text { color: var(--tinte-2); }

/* ---------- Ankündigung + Kopf ---------- */
.ankuendigung { background: var(--tinte); color: #efe7df; font-size: .78rem; letter-spacing: .06em; text-align: center; padding: 8px var(--gutter); }
.ankuendigung a { text-decoration: none; }
.ankuendigung strong { color: #fff; font-weight: 500; border-bottom: 1px solid rgba(255,255,255,.4); }
.ank-trenner, .ankuendigung > span:last-child { display: none; }
/* Weichzeichner NICHT auf .kopf selbst: backdrop-filter macht das Element zum Bezugsrahmen für
   position:fixed – das mobile Menü und das Mega-Menü wären dann im Kopf eingesperrt. */
.kopf { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s; }
.kopf::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(255, 255, 255, .94); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); }
.kopf.ist-gescrollt { border-color: var(--linie); box-shadow: 0 8px 30px -22px rgba(72, 54, 40, .4); }
.kopf-innen { display: flex; align-items: center; gap: 16px; height: var(--kopf-h); max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); }
.kopf-logo img { height: 50px; width: auto; }
.kopf-aktionen { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.kopf-ig { display: none; width: 40px; height: 40px; border-radius: 50%; align-items: center; justify-content: center; color: var(--tinte); }
.kopf-ig svg { width: 22px; height: 22px; }
.kopf-ig:hover { background: var(--sand); }
/* Planer-Zähler im Kopf (erscheint, sobald etwas gemerkt ist) */
.kopf-planer { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .45em; width: 44px; height: 44px; border-radius: 999px; background: var(--sand); color: var(--tinte); text-decoration: none; font-size: .74rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; transition: background .2s; }
.kopf-planer[hidden] { display: none; }
.kopf-planer:hover { background: var(--sand-2); }
.kopf-planer svg { width: 22px; height: 22px; }
.kopf-planer-text { display: none; }
.kopf-planer-zahl { position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--tinte); color: #fff; font-size: .72rem; font-weight: 600; letter-spacing: 0; display: grid; place-items: center; border: 2px solid #fff; }
.kopf-planer.ist-neu { animation: dj-puls .7s cubic-bezier(.2, .7, .2, 1); }
@keyframes dj-puls { 0% { transform: scale(1); } 35% { transform: scale(1.22); box-shadow: 0 0 0 8px rgba(125, 104, 88, .18); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(125, 104, 88, 0); } }
/* Kein Schriftzug „Mein Planer“: mit sieben Menüpunkten passt er auf keiner Breite in die Kopfleiste (max. 1320 px).
   Symbol und Zahl genügen, die Meldung beim Merken zeigt genau darauf. */

@media (min-width: 1100px) { .nav-liste > li > a, .nav-knopf { white-space: nowrap; } }
.kopf-termin { display: none; min-height: 42px; padding: 0 1.3em; font-size: .74rem; }
.menue-knopf { width: 44px; height: 44px; border: 0; background: var(--sand); border-radius: 50%; display: grid; place-content: center; gap: 6px; cursor: pointer; }
.menue-knopf span { width: 20px; height: 1.5px; background: var(--tinte); display: block; transition: transform .3s; }
.menue-knopf[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.menue-knopf[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }

/* Mobile Navigation */
.hauptnav { position: fixed; inset: var(--kopf-h) 0 0 0; background: var(--weiss); overflow-y: auto; padding: 12px var(--gutter) 40px; opacity: 0; transform: translateY(-10px); visibility: hidden; transition: opacity .3s, transform .3s cubic-bezier(.2, .7, .2, 1), visibility .3s; }
.hauptnav.ist-offen { opacity: 1; transform: none; visibility: visible; }
.nav-liste { list-style: none; margin: 0; padding: 0; }
.nav-liste > li { border-bottom: 1px solid var(--linie); }
.nav-liste > li > a, .nav-knopf { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 16px 2px; font-family: var(--serif); font-size: 1.55rem; text-decoration: none; background: none; border: 0; cursor: pointer; text-align: left; }
.pfeilchen { width: 9px; height: 9px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .3s; margin: 0 6px 4px; }
.nav-knopf[aria-expanded="true"] .pfeilchen { transform: rotate(-135deg); margin-bottom: -4px; }
.mega { display: none; padding: 0 0 16px; }
.nav-knopf[aria-expanded="true"] + .mega { display: block; }
.mega-titel { font-size: .7rem; text-transform: uppercase; letter-spacing: .18em; color: var(--akzent); font-weight: 500; margin: 14px 0 6px; }
.mega-spalte ul { list-style: none; margin: 0; padding: 0; }
.mega-spalte a { display: block; padding: 6px 0; text-decoration: none; color: var(--tinte-2); }
.mega-spalte a:hover { color: var(--tinte); }
.mega-karte { display: block; margin-top: 18px; padding: 18px; border-radius: var(--radius-klein); background: var(--sand); text-decoration: none; }
.mega-karte strong { display: block; font-family: var(--serif); font-size: 1.35rem; font-weight: 500; line-height: 1.2; margin-bottom: 8px; }
.mega-mehr, .mega-alle { display: inline-flex; align-items: center; gap: .4em; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 500; }
.mega-mehr svg, .mega-alle svg { width: 16px; height: 16px; }
.mega-alle { margin-top: 14px; text-decoration: none; color: var(--akzent); }
.nav-mobil-extra { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.nav-ig { display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: 12px; text-decoration: none; font-weight: 500; }
.nav-ig svg { width: 22px; height: 22px; }
body.menue-offen { overflow: hidden; }

@media (min-width: 640px) {
  .ank-trenner, .ankuendigung > span:last-child { display: inline; }
  .ank-trenner { margin: 0 .8em; opacity: .5; }
  .kopf-ig { display: inline-flex; }
  .kopf-termin { display: inline-flex; }
}

@media (min-width: 1100px) {
  :root { --kopf-h: 88px; --gutter: 32px; }
  .kopf-logo img { height: 62px; }
  .menue-knopf, .nav-mobil-extra { display: none; }
  .hauptnav { position: static; transform: none; opacity: 1; visibility: visible; padding: 0; overflow: visible; background: none; margin: 0 auto; }
  .nav-liste { display: flex; gap: 4px; }
  .nav-liste > li { border: 0; position: relative; }
  .nav-liste > li > a, .nav-knopf { font-family: var(--sans); font-size: .8rem; text-transform: uppercase; letter-spacing: .13em; font-weight: 500; padding: 10px 14px; width: auto; border-radius: 999px; transition: background .2s; }
  .nav-liste > li > a:hover, .nav-knopf:hover, .nav-knopf[aria-expanded="true"] { background: var(--sand); }
  .nav-liste > li > a[aria-current="page"] { background: var(--sand); }
  .pfeilchen { width: 6px; height: 6px; margin: 0 0 3px 8px; }
  .mega { display: block; position: fixed; left: 0; right: 0; top: calc(var(--kopf-top, 0px) + var(--kopf-h)); background: var(--weiss); border-top: 1px solid var(--linie); box-shadow: 0 30px 60px -30px rgba(72, 54, 40, .35); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .25s, transform .25s, visibility .25s; padding: 0; }
  .nav-knopf[aria-expanded="true"] + .mega { opacity: 1; visibility: visible; transform: none; }
  .mega-innen { max-width: 1240px; margin: 0 auto; padding: 34px 32px 30px; display: grid; grid-template-columns: repeat(5, 1fr) 1.3fr; gap: 26px; }
  .mega-titel { margin-top: 0; }
  .mega-karte { margin: 0; grid-row: span 2; display: flex; flex-direction: column; justify-content: flex-end; min-height: 200px; background: var(--sand) url("../bilder/monogramm.png") no-repeat right 18px top 18px / 54px; }
  .mega-alle { grid-column: 1 / 6; margin: 0; }
}

/* ---------- Abschnitte ---------- */
.abschnitt { padding: 72px 0; }
.abschnitt-eng { padding: 40px 0; }
.abschnitt-sand { background: var(--sand); }
.abschnitt-kopf { max-width: 720px; margin-bottom: 40px; }
.abschnitt-kopf p:not(.kicker) { color: var(--tinte-2); }
.zwei-spalten { display: grid; gap: 40px; align-items: start; }
.fliesstext p { font-size: 1.06rem; color: var(--tinte-2); }
.fliesstext p:first-child { font-size: 1.2rem; color: var(--tinte); font-family: var(--serif); line-height: 1.45; font-size: 1.45rem; }
.raster-2, .raster-3, .raster-info { display: grid; gap: 22px; }
.haken-liste { list-style: none; margin: 0 0 1em; padding: 0; display: grid; gap: 10px; }
.haken-liste li { display: flex; gap: .7em; align-items: flex-start; }
.haken-liste svg { width: 20px; height: 20px; color: var(--akzent); margin-top: 3px; background: var(--weiss); border-radius: 50%; padding: 2px; border: 1px solid var(--taupe); }
.vorteile { background: var(--sand); border-radius: var(--radius); padding: 28px; }
.abschnitt-sand .vorteile { background: var(--weiss); }

@media (min-width: 760px) {
  .abschnitt { padding: 100px 0; }
  .abschnitt-eng { padding: 50px 0; }
  .raster-2 { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .raster-3 { grid-template-columns: repeat(2, 1fr); }
  .raster-info { grid-template-columns: repeat(2, 1fr); }
  .zwei-spalten { grid-template-columns: 1.1fr 1fr; gap: 64px; }
}
@media (min-width: 1000px) {
  .raster-3 { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .raster-info { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Startseite: Hero ---------- */
.hero { position: relative; background: var(--creme); overflow: hidden; }
.hero-bild .bild { border-radius: 0; aspect-ratio: 4/3; }
.hero-inhalt { position: relative; padding-top: 34px; padding-bottom: 56px; }
.hero h1 { font-size: clamp(2.8rem, 10vw, 5.4rem); margin-bottom: .35em; }
.hero-unten { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 28px; }
.hero-ig { display: inline-flex; align-items: center; gap: .45em; text-decoration: none; font-weight: 500; font-size: .92rem; }
.hero-ig svg { width: 20px; height: 20px; }
@media (min-width: 960px) {
  .hero { min-height: min(86vh, 820px); display: flex; align-items: center; }
  .hero-bild { position: absolute; inset: 0 0 0 38%; }
  .hero-bild .bild { height: 100%; aspect-ratio: auto; }
  .hero-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--creme) 0%, rgba(251, 249, 246, .85) 18%, rgba(251, 249, 246, 0) 52%); }
  .hero-inhalt { padding-top: 80px; padding-bottom: 80px; }
  .hero-inhalt > * { max-width: 600px; }
}

.vertrauen { border-bottom: 1px solid var(--linie); background: var(--weiss); }
.vertrauen-liste { list-style: none; margin: 0 auto; padding-top: 22px; padding-bottom: 22px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 12px; }
.vertrauen-liste li { display: flex; flex-direction: column; text-align: center; font-size: .82rem; color: var(--tinte-2); line-height: 1.35; }
.vertrauen-liste strong { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; color: var(--tinte); }
@media (min-width: 760px) { .vertrauen-liste { grid-template-columns: repeat(4, 1fr); } .vertrauen-liste li + li { border-left: 1px solid var(--linie); } }

/* Gruppen-Karten */
.raster-gruppen { display: grid; gap: 22px; }
.g-karte { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.g-karte .bild { border-radius: 0; }
.g-karte-text { padding: 22px 24px 24px; }
.g-karte ul { list-style: none; padding: 0; margin: 0; }
.g-karte li a { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--linie); text-decoration: none; transition: color .2s, padding .2s; }
.g-karte li a span { color: var(--akzent); font-size: .88rem; white-space: nowrap; }
.g-karte li a:hover { padding-left: 4px; color: var(--akzent); }
.g-karte-planer { background: var(--tinte); color: #f4ede6; border: 0; text-decoration: none; justify-content: flex-end; min-height: 300px; background-image: radial-gradient(circle at 85% 15%, rgba(214, 201, 189, .25), transparent 55%); }
.g-karte-planer .mini-kicker { color: var(--taupe); }
.g-karte-planer h3 { color: #fff; font-size: 2rem; }
.g-karte-planer p { color: #d9cfc6; }
.g-karte-planer .knopf { background: #fff; color: var(--tinte); margin-top: 8px; }
.g-karte-planer .knopf svg { width: 16px; height: 16px; }
@media (min-width: 700px) { .raster-gruppen { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1050px) { .raster-gruppen { grid-template-columns: repeat(3, 1fr); } }

/* Willkommen */
.willkommen { display: grid; gap: 40px; align-items: center; }
.willkommen-bilder { position: relative; padding-bottom: 50px; padding-right: 40px; }
.willkommen-klein { position: absolute; width: 46%; right: 0; bottom: 0; border: 6px solid var(--sand); box-shadow: var(--schatten); }
.first-date { margin-top: 28px; padding: 26px; background: var(--weiss); border-radius: var(--radius); border: 1px solid var(--taupe); display: grid; gap: 18px; align-items: center; }
.first-date h3 { margin-bottom: .3em; }
.first-date p:last-child { margin-bottom: 0; color: var(--tinte-2); }
.first-date-gross { margin-top: 0; padding: 34px; }
@media (min-width: 900px) {
  .willkommen { grid-template-columns: 1fr 1.05fr; gap: 72px; }
  .first-date-gross { grid-template-columns: 1fr auto; }
  .first-date .knopf { justify-self: start; }
  .first-date-gross { padding: 48px 56px; }
}

/* Haarentfernung Start / Methoden */
.methode, .teaser, .b-karte, .paket { position: relative; display: flex; flex-direction: column; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; text-decoration: none; transition: box-shadow .35s, transform .35s; }
.methode:hover, .teaser:hover, .b-karte:hover { box-shadow: var(--schatten); transform: translateY(-3px); }
.methode:hover .bild img, .teaser:hover .bild img, .b-karte:hover .bild img { transform: scale(1.04); }
.methode:hover .mehr svg, .teaser:hover .mehr svg, .b-karte:hover .mehr svg { transform: translateX(4px); }
.methode .bild, .teaser .bild, .b-karte .bild, .paket .bild { border-radius: 0; }
.methode-text, .teaser-text, .b-karte-text, .paket-text { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.methode-text p, .teaser-text p, .b-karte-text p, .paket-text p { color: var(--tinte-2); }
.b-karte-text .mehr, .methode-text .mehr, .teaser-text .mehr { margin-top: auto; }
.b-karte-preis { font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; color: var(--akzent); font-weight: 500; margin-bottom: .4rem; }
.b-karte-aktion, .hero-aktion { position: absolute; top: 16px; left: 16px; background: #b5473a; color: #fff; font-weight: 600; font-size: .8rem; letter-spacing: .06em; padding: .45em .9em; border-radius: 999px; }
.kasse-zeile { display: flex; gap: .55em; align-items: flex-start; font-size: .92rem; background: var(--sand); border-radius: var(--radius-klein); padding: 10px 12px; color: var(--tinte) !important; }
.kasse-zeile svg { width: 18px; height: 18px; color: var(--akzent); margin-top: 3px; }
.finanzierung { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; padding: 18px 22px; border-radius: var(--radius-klein); background: var(--creme); border: 1px dashed var(--taupe-3); font-size: .92rem; color: var(--tinte-2); }
.finanzierung strong { color: var(--tinte); font-weight: 500; }
.abschnitt-sand .finanzierung { background: var(--weiss); }

/* Team */
.team { display: grid; gap: 40px; align-items: center; }
.team-bild { max-width: 460px; }
.team-bild .bild { border-radius: 999px 999px var(--radius) var(--radius); }
.signatur { font-family: var(--serif); font-size: 1.45rem; color: var(--akzent); }
.team-text p:not(.kicker):not(.signatur) { color: var(--tinte-2); }
@media (min-width: 900px) { .team { grid-template-columns: .9fr 1.1fr; gap: 80px; } }

/* Instagram */
.ig-kopf { display: grid; gap: 26px; margin-bottom: 34px; align-items: end; }
.ig-kopf p:not(.kicker) { color: var(--tinte-2); max-width: 36em; margin: 0; }
.ig-profil { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--linie); background: var(--weiss); text-decoration: none; box-shadow: var(--schatten-klein); flex-wrap: wrap; }
.ig-avatar { width: 56px; height: 56px; border-radius: 50%; padding: 3px; background: linear-gradient(45deg, #f2a65a, #d6336c 55%, #8f3bb8); }
.ig-avatar img { width: 100%; height: 100%; border-radius: 50%; background: #fff; padding: 8px; object-fit: contain; }
.ig-profil strong { display: block; font-size: 1.05rem; }
.ig-profil small { color: var(--tinte-2); }
.ig-profil .knopf { margin-left: auto; }
.ig-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ig-kachel { position: relative; display: block; border-radius: 10px; overflow: hidden; }
.ig-kachel .bild { border-radius: 0; }
.ig-hover { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(47, 41, 37, .35); color: #fff; opacity: 0; transition: opacity .3s; }
.ig-hover svg { width: 34px; height: 34px; }
.ig-kachel:hover .ig-hover, .ig-kachel:focus-visible .ig-hover { opacity: 1; }
.ig-kachel:hover img { transform: scale(1.05); }
@media (min-width: 800px) {
  .ig-kopf { grid-template-columns: 1fr auto; }
  .ig-raster { grid-template-columns: repeat(6, 1fr); gap: 10px; }
}

/* Google-Band */
.google-band { background: var(--sand-2); }
.google-band-innen { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; padding-top: 30px; padding-bottom: 30px; text-decoration: none; text-align: center; }
.google-band-innen .g-logo { width: 30px; height: 30px; }
.gbb-wert { font-family: var(--serif); font-size: 2.6rem; font-weight: 600; line-height: 1; }
.google-band-innen .sterne svg { width: 24px; height: 24px; }
.gbb-text { color: var(--tinte-2); }
.google-band-innen:hover .mehr svg { transform: translateX(4px); }

/* CTA-Band */
.band-cta { background: var(--tinte); color: #efe7df; text-align: center; padding: 80px 0; position: relative; overflow: hidden; }
.band-cta::before { content: ""; position: absolute; inset: auto -10% -60% -10%; height: 120%; background: radial-gradient(ellipse at center, rgba(214, 201, 189, .18), transparent 60%); }
.band-cta-innen { position: relative; max-width: 820px; }
.band-mono { width: 56px; height: 56px; margin: 0 auto 18px; filter: invert(1) brightness(1.8); opacity: .9; }
.s-kopf .band-mono { filter: none; opacity: .8; }
.band-cta h2 { color: #fff; }
.band-cta p { color: #d4c9bf; }
.band-cta .knopf-reihe { justify-content: center; }
.band-cta .knopf-dunkel { background: #fff; color: var(--tinte); }
.band-cta .knopf-hell { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.band-cta .knopf-linie { color: #fff; border-color: rgba(255, 255, 255, .45); }
.band-cta .knopf-linie:hover, .band-cta .knopf-hell:hover { background: #fff; color: var(--tinte); }

/* ---------- Seitenköpfe & Brotkrumen ---------- */
.s-kopf { background: linear-gradient(180deg, var(--creme), var(--weiss)); padding: 40px 0 46px; border-bottom: 1px solid var(--linie); }
.s-kopf h1 em { display: inline; }
.s-kopf-mitte { text-align: center; padding: 90px 0; }
.s-kopf-mitte .lead { margin: 0 auto; }
.brotkrumen ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; padding: 0; margin: 0 0 22px; font-size: .8rem; color: var(--tinte-2); }
.brotkrumen li + li::before { content: "/"; margin-right: 4px; opacity: .5; }
.brotkrumen a { text-decoration: none; }
.brotkrumen a:hover { text-decoration: underline; }
.gruppe-titel { font-size: clamp(1.7rem, 4vw, 2.3rem); padding-bottom: 14px; border-bottom: 1px solid var(--linie); margin-bottom: 28px; }

/* ---------- Behandlungsseite ---------- */
.b-hero { background: linear-gradient(180deg, var(--creme) 0%, var(--weiss) 100%); padding: 26px 0 60px; }
.b-hero-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; align-items: center; }
.b-hero-bild { position: relative; max-width: 520px; width: 100%; justify-self: center; }
.b-hero-bild::before { content: ""; position: absolute; inset: 22px -14px -14px 22px; border: 1px solid var(--taupe); border-radius: 999px 999px var(--radius) var(--radius); }
.hero-aktion { top: auto; bottom: 22px; left: -8px; font-size: .95rem; padding: .6em 1.1em; box-shadow: var(--schatten-klein); }
.b-hero-fakten { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--linie); }
.fakt-preis { font-family: var(--serif); font-size: 1.7rem; font-weight: 600; }
@media (min-width: 900px) {
  .b-hero { padding: 40px 0 90px; }
  .b-hero-raster { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 70px; }
}

.kasse-box { display: flex; gap: 20px; align-items: flex-start; padding: 26px 28px; background: var(--creme); border: 1px solid var(--taupe); border-left: 4px solid var(--akzent); border-radius: var(--radius-klein); }
.kasse-box h2 { font-size: 1.7rem; margin-bottom: .3em; }
.kasse-box p { color: var(--tinte-2); }
.kasse-icon { flex: 0 0 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--akzent); color: #fff; font-size: 1.6rem; font-weight: 300; line-height: 1; }

.stufe { background: var(--weiss); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--linie); }
.stufe .bild { border-radius: 0; }
.stufe-text { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.stufe-kopf { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--linie); margin-bottom: 14px; }
.stufe-kopf h3 { font-size: 2rem; margin-bottom: .2em; }
.stufe-kopf span { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--akzent); }
.stufe-text p { color: var(--tinte-2); }
.stufe-fuss { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 12px; }
.stufe-fuss strong { font-family: var(--serif); font-size: 1.8rem; font-weight: 600; }
.stufe-fuss s { font-family: var(--sans); font-size: .95rem; color: var(--tinte-2); margin-right: .5em; font-weight: 400; }

/* Ablauf als Zeitleiste: Nummern an einer Linie – keine leeren Kästen */
.ablauf { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; position: relative; }
.ablauf li { position: relative; display: flex; gap: 18px; align-items: flex-start; padding: 0 0 26px; }
.ablauf li:last-child { padding-bottom: 0; }
.ablauf li::before { content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; width: 1px; background: var(--taupe); }
.ablauf li:last-child::before { display: none; }
.ablauf-punkt { flex: none; width: 44px; height: 44px; display: grid; place-items: center; position: relative; z-index: 1; }
.ablauf-punkt::after { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--weiss); border: 2px solid var(--taupe-3); }
.ablauf li:first-child .ablauf-punkt::after { background: var(--akzent); border-color: var(--akzent); }
.ablauf-text { padding-top: 7px; }
.ablauf h3 { font-size: 1.35rem; margin: 0 0 .15em; }
.ablauf p { margin: 0; color: var(--tinte-2); font-size: .97rem; }
@media (min-width: 860px) {
  .ablauf:not(.ablauf-senkrecht) { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 20px; }
  .ablauf:not(.ablauf-senkrecht) li { flex-direction: column; align-items: center; text-align: center; padding: 0; }
  .ablauf:not(.ablauf-senkrecht) li::before { left: calc(50% + 30px); right: calc(-50% + 10px); top: 22px; bottom: auto; width: auto; height: 1px; display: block; }
  .ablauf:not(.ablauf-senkrecht) li:last-child::before { display: none; }
  .ablauf:not(.ablauf-senkrecht) .ablauf-text { padding-top: 0; }
  .ablauf-kurz h3 { font-size: 1.25rem; }
}
.ablauf-mit-bild { display: grid; gap: 34px; align-items: center; }
@media (min-width: 860px) { .ablauf-mit-bild { grid-template-columns: 1.1fr 1fr; gap: 60px; } }

/* Grafiken aus der Broschüre nie beschneiden (enthalten Text) */
.bild-grafik { background: var(--weiss); border: 1px solid var(--linie); }
.bild-grafik img { object-fit: contain; }
.fliesstext .bild { margin-top: 26px; max-width: 460px; }
.galerie { display: grid; gap: 14px; }
@media (min-width: 640px) { .galerie-2 { grid-template-columns: repeat(2, 1fr); } .galerie-3 { grid-template-columns: repeat(3, 1fr); } }
.galerie-1 { max-width: 760px; }
.produkt-box { display: grid; gap: 22px; align-items: center; padding: 24px; border-radius: var(--radius); background: var(--creme); border: 1px solid var(--linie); }
.produkt-box .bild { max-width: 200px; }
.produkt-box p:last-child { margin: 0; color: var(--tinte-2); font-size: 1.05rem; }
@media (min-width: 700px) { .produkt-box { grid-template-columns: 200px 1fr; padding: 30px 36px; } }

.info-kachel { background: var(--weiss); border-radius: var(--radius); padding: 28px; border: 1px solid var(--linie); }
.info-kachel h3 { position: relative; padding-top: 18px; }
.info-kachel h3::before { content: ""; position: absolute; top: 0; left: 0; width: 32px; height: 2px; background: var(--taupe-3); }
.info-kachel p { color: var(--tinte-2); margin: 0; }
.abschnitt:not(.abschnitt-sand) .info-kachel { background: var(--creme); }

.ideal { display: flex; flex-direction: column; gap: 8px; }
.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chips li { padding: .55em 1.1em; border-radius: 999px; background: var(--sand); border: 1px solid var(--linie); font-size: .95rem; }

.bereiche { list-style: none; padding: 0; margin: 0; display: grid; gap: 1px; background: var(--linie); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; }
.bereiche li { background: var(--weiss); padding: 24px; }
.bereiche h3 { font-size: 1.4rem; margin-bottom: .2em; }
.bereiche p { margin: 0; color: var(--tinte-2); }
@media (min-width: 700px) { .bereiche { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .bereiche { grid-template-columns: repeat(3, 1fr); } }

.angebot { display: grid; gap: 30px; padding: 34px; background: var(--sand); border-radius: var(--radius); border: 1px solid var(--taupe); }
.angebot-preis { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.angebot-preis s { color: var(--tinte-2); }
.angebot-preis strong { font-family: var(--serif); font-size: 4rem; font-weight: 600; line-height: 1; }
@media (min-width: 860px) { .angebot { grid-template-columns: 1.5fr 1fr; align-items: center; padding: 50px 56px; } .angebot-preis { align-items: center; text-align: center; } }

.kombi { margin: 0; padding: 30px 32px; font-family: var(--serif); font-size: clamp(1.3rem, 3vw, 1.7rem); line-height: 1.4; color: var(--tinte); background: var(--creme); border-radius: var(--radius); position: relative; }
.kombi::before { content: "“"; position: absolute; top: -18px; left: 22px; font-size: 5rem; color: var(--taupe-3); line-height: 1; }

/* ---------- Preistabellen ---------- */
.abschnitt-preise { background: var(--creme); }
.preis-raster { display: grid; gap: 22px; }
@media (min-width: 900px) { .preis-raster-viele { grid-template-columns: repeat(2, 1fr); align-items: start; } }
.preistabelle { background: var(--weiss); border-radius: var(--radius); padding: 22px 20px 12px; border: 1px solid var(--linie); }
.pt-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.pt-kopf h3 { margin: 0; font-size: 1.5rem; }
.pt-badge { background: #b5473a; color: #fff; font-size: .75rem; font-weight: 600; padding: .3em .7em; border-radius: 999px; }
.pt-legende { font-size: .78rem; color: var(--tinte-2); margin: 4px 0 0; text-align: right; }
.pt-legende span { color: #a03d31; font-weight: 500; margin-left: .6em; }
.pt-hinweis { font-size: .85rem; color: var(--akzent); margin: 4px 0 0; }
.pz-liste { list-style: none; margin: 10px 0 0; padding: 0; }
.pz { display: grid; grid-template-columns: 1fr auto auto; grid-template-areas: "text preis plus" "dauer dauer dauer"; align-items: center; gap: 2px 12px; padding: 13px 0; border-top: 1px solid var(--linie); }
.pz-text { grid-area: text; display: flex; flex-direction: column; min-width: 0; }
.pz-name { font-weight: 500; }
.pz-info { font-size: .86rem; color: var(--tinte-2); line-height: 1.4; }
.pz-dauer { grid-area: dauer; font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; color: var(--akzent); }
.pz-preis { grid-area: preis; text-align: right; white-space: nowrap; font-family: var(--serif); font-size: 1.3rem; font-weight: 600; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.preis-alt { font-family: var(--sans); font-size: .8rem; font-weight: 400; color: var(--tinte-2); }
.preis-alt + span { color: #a03d31; }
.pz-plus { grid-area: plus; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--taupe); background: var(--weiss); display: grid; place-items: center; cursor: pointer; transition: background .2s, color .2s, transform .2s; }
.pz-plus svg { width: 16px; height: 16px; transition: transform .25s; }
.pz-plus:hover { background: var(--sand); }
.pz-plus.ist-gewaehlt { background: var(--tinte); color: #fff; border-color: var(--tinte); }
.pz-plus.ist-gewaehlt svg { transform: rotate(45deg); }
.plus-hinweis { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--taupe); vertical-align: -5px; background: #fff; }
.plus-hinweis svg { width: 12px; height: 12px; }
.pt-zusatz { margin: 20px 0 0; font-size: .92rem; color: var(--tinte-2); }
@media (min-width: 600px) {
  .pz { grid-template-columns: 1fr auto auto auto; grid-template-areas: "text dauer preis plus"; }
  .preistabelle { padding: 26px 28px 14px; }
}

/* FAQ */
.faq { border-top: 1px solid var(--linie); }
.faq-eintrag { border-bottom: 1px solid var(--linie); }
.faq-eintrag summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative; font-family: var(--serif); font-size: 1.35rem; font-weight: 500; }
.faq-eintrag summary::-webkit-details-marker { display: none; }
.faq-eintrag summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-family: var(--sans); font-weight: 300; font-size: 1.6rem; color: var(--akzent); transition: transform .3s; }
.faq-eintrag[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-eintrag p { color: var(--tinte-2); padding-bottom: 12px; }

/* ---------- Planer ---------- */
.planer { padding: 40px 0 80px; }
.planer-raster { display: grid; gap: 30px; align-items: start; }
.planer-schritt { margin-bottom: 34px; }
.planer-nr { display: flex; align-items: center; gap: 12px; font-family: var(--serif); font-size: 1.6rem; margin-bottom: 16px; }
.planer-nr > span:first-child { width: 36px; height: 36px; border-radius: 50%; background: var(--tinte); color: #fff; display: grid; place-items: center; font-size: 1.1rem; font-weight: 600; }
.ziel-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ziel-chip { border: 1px solid var(--taupe); background: var(--weiss); border-radius: 999px; padding: .55em 1.1em; cursor: pointer; font-size: .92rem; transition: background .2s, color .2s; }
.ziel-chip:hover { border-color: var(--tinte); }
.ziel-chip.ist-aktiv { background: var(--tinte); color: #fff; border-color: var(--tinte); }
.kat-raster { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.kat-karte { position: relative; display: flex; flex-direction: column; text-align: left; border: 1px solid var(--linie); border-radius: 14px; overflow: hidden; background: var(--weiss); cursor: pointer; padding: 0; transition: border-color .2s, box-shadow .2s, opacity .3s, transform .2s; }
.kat-karte .bild { border-radius: 0; aspect-ratio: 16/10; }
.kat-karte-text { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 3px; }
.kat-karte-text strong { font-family: var(--serif); font-size: 1.22rem; font-weight: 600; line-height: 1.15; }
.kat-karte-text small { color: var(--tinte-2); font-size: .8rem; line-height: 1.35; }
.kat-karte-text em { font-style: normal; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--akzent); margin-top: 4px; }
.kat-karte:hover { box-shadow: var(--schatten-klein); transform: translateY(-2px); }
.kat-karte.ist-aktiv { border-color: var(--tinte); box-shadow: 0 0 0 1px var(--tinte); }
.kat-karte.ist-gedimmt { opacity: .35; }
.kat-zahl { position: absolute; top: 8px; right: 8px; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px; background: var(--tinte); color: #fff; font-size: .78rem; font-weight: 600; display: grid; place-items: center; }
.kat-aktion { position: absolute; top: 8px; left: 8px; background: #b5473a; color: #fff; font-size: .7rem; font-weight: 600; padding: .25em .6em; border-radius: 999px; }
@media (min-width: 700px) { .kat-raster { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1300px) { .kat-raster { grid-template-columns: repeat(4, 1fr); } }

.items-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.items-kopf a { font-size: .9rem; }
.item-block-titel { font-size: .72rem; text-transform: uppercase; letter-spacing: .16em; color: var(--akzent); font-weight: 500; margin: 20px 0 8px; }
.item-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.item { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; padding: 10px 12px 10px 10px; border: 1px solid var(--linie); border-radius: 14px; background: var(--weiss); cursor: pointer; transition: border-color .2s, background .2s; text-align: left; width: 100%; }
.item:hover { border-color: var(--taupe-3); }
.item.ist-gewaehlt { border-color: var(--tinte); background: var(--creme); }
.item .bild { border-radius: 10px; aspect-ratio: 1/1; }
.item-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.item-name { font-weight: 500; }
.item-info { font-size: .84rem; color: var(--tinte-2); }
.item-rechts { display: flex; align-items: center; gap: 12px; }
.item-preis { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; white-space: nowrap; text-align: right; display: flex; flex-direction: column; line-height: 1.1; }
.item-preis s { font-family: var(--sans); font-size: .75rem; font-weight: 400; color: var(--tinte-2); }
.item-knopf { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--taupe); display: grid; place-items: center; background: #fff; flex-shrink: 0; transition: background .2s, transform .25s; }
.item-knopf svg { width: 15px; height: 15px; transition: transform .25s; }
.item.ist-gewaehlt .item-knopf { background: var(--tinte); color: #fff; border-color: var(--tinte); }
.item.ist-gewaehlt .item-knopf svg { transform: rotate(45deg); }
@media (max-width: 480px) {
  .item { grid-template-columns: 52px 1fr; }
  .item-rechts { grid-column: 2; justify-content: space-between; }
}

.planer-auswahl { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--weiss); border-top: 1px solid var(--linie); box-shadow: 0 -16px 40px -20px rgba(72, 54, 40, .35); border-radius: 20px 20px 0 0; max-height: 82vh; display: flex; flex-direction: column; }
.auswahl-griff { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 16px var(--gutter); border: 0; background: none; cursor: pointer; font-weight: 500; }
.auswahl-griff b { display: inline-grid; place-items: center; min-width: 24px; height: 24px; border-radius: 999px; background: var(--tinte); color: #fff; font-size: .8rem; margin-left: 6px; padding: 0 6px; }
.auswahl-griff strong { font-family: var(--serif); font-size: 1.4rem; }
.auswahl-inhalt { display: none; overflow-y: auto; padding: 0 var(--gutter) 22px; }
.planer-auswahl.ist-offen .auswahl-inhalt { display: block; }
.auswahl-liste { list-style: none; margin: 0 0 14px; padding: 0; }
.auswahl-liste li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--linie); font-size: .94rem; align-items: center; }
.auswahl-leer { color: var(--tinte-2); }
.auswahl-entf { border: 0; background: var(--sand); width: 26px; height: 26px; border-radius: 50%; cursor: pointer; flex-shrink: 0; line-height: 1; font-size: 1rem; }
.auswahl-name small { display: block; color: var(--tinte-2); font-size: .78rem; }
.auswahl-summe { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0 14px; }
.auswahl-summe strong { font-family: var(--serif); font-size: 2.2rem; font-weight: 600; }
.auswahl-hinweise { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 6px; font-size: .86rem; }
.auswahl-hinweise li { display: flex; gap: .5em; color: var(--tinte-2); }
.auswahl-hinweise li::before { content: "✓"; color: var(--akzent); font-weight: 600; }
.auswahl-hinweise li.ist-warnung::before { content: "!"; color: #a03d31; }
.planer-auswahl .knopf { width: 100%; margin-bottom: 10px; }
.auswahl-leeren { border: 0; background: none; color: var(--tinte-2); text-decoration: underline; cursor: pointer; font-size: .85rem; padding: 4px 0; }
.auswahl-klein { font-size: .8rem; color: var(--tinte-2); margin-top: 10px; }
.seite-planer .kontaktknopf-platz { bottom: 86px; }
.seite-planer main { padding-bottom: 70px; }
@media (min-width: 1000px) {
  .planer-raster { grid-template-columns: 1fr 360px; gap: 40px; }
  .planer-auswahl { position: sticky; top: calc(var(--kopf-h) + 20px); bottom: auto; border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--schatten); max-height: calc(100vh - var(--kopf-h) - 40px); z-index: 1; }
  .auswahl-griff { display: none; }
  .auswahl-inhalt { display: block; padding: 24px; }
  .seite-planer main { padding-bottom: 0; }
}

.preisliste { display: grid; gap: 10px; }
.pl-gruppe { background: var(--weiss); border-radius: var(--radius-klein); border: 1px solid var(--linie); }
.pl-gruppe summary { cursor: pointer; list-style: none; padding: 18px 22px; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: var(--serif); font-size: 1.4rem; }
.pl-gruppe summary::-webkit-details-marker { display: none; }
.pl-gruppe summary small { font-family: var(--sans); font-size: .82rem; color: var(--akzent); white-space: nowrap; }
.pl-gruppe[open] summary { border-bottom: 1px solid var(--linie); }
.pl-gruppe .preis-raster { padding: 16px; }
.pl-gruppe .preistabelle { border: 0; padding: 4px 8px; }
.pl-gruppe > .knopf-text { margin: 0 24px 20px; }

/* Toast */
/* Meldung erscheint oben unter dem Planer-Symbol – zeigt dorthin, wo die Auswahl liegt,
   und kollidiert nicht mit dem Kontaktknopf unten rechts. top setzt haupt.js passend zum Kopf. */
.toast { position: fixed; right: 16px; top: 90px; width: min(380px, calc(100% - 32px)); background: var(--tinte); color: #fff; padding: 12px 12px 12px 16px; border-radius: 14px; display: flex; align-items: center; gap: 12px; z-index: 200; font-size: .9rem; line-height: 1.35; box-shadow: var(--schatten); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .3s, transform .3s cubic-bezier(.2, .7, .2, 1), visibility .3s; }
.toast::before { content: ""; position: absolute; top: -6px; right: var(--pfeil, 72px); width: 12px; height: 12px; background: var(--tinte); transform: rotate(45deg); border-radius: 2px; }
.toast.ist-sichtbar { opacity: 1; visibility: visible; transform: none; }
.toast > span { flex: 1; min-width: 0; }
.toast a { background: #fff; color: var(--tinte); border-radius: 999px; padding: 6px 12px; text-decoration: none; font-weight: 500; white-space: nowrap; font-size: .85rem; }
@media (min-width: 1100px) { .toast { right: max(32px, calc((100vw - 1320px) / 2 + 32px)); } }

/* ---------- Kontakt ---------- */
.kontakt-raster { display: grid; gap: 34px; align-items: start; }
.kontakt-wege { display: grid; gap: 10px; }
.weg { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: var(--radius-klein); border: 1px solid var(--linie); background: var(--weiss); text-decoration: none; transition: border-color .2s, transform .2s; }
.weg:hover { border-color: var(--tinte); transform: translateX(3px); }
.weg svg { width: 26px; height: 26px; color: var(--akzent); }
.weg span { display: flex; flex-direction: column; line-height: 1.35; color: var(--tinte-2); font-size: .94rem; }
.weg strong { color: var(--tinte); font-weight: 500; font-size: 1rem; }
.weg-wa { background: #f1f8f3; border-color: #cfe6d7; }
.weg-wa svg { color: var(--wa); }
.anfahrt { margin-top: 14px; border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; background: var(--creme); }
.anfahrt .bild { border-radius: 0; }
.anfahrt-text { padding: 22px 24px; }
.anfahrt address { font-style: normal; margin-bottom: 10px; }
.anfahrt-text p { color: var(--tinte-2); }
.formular-karte { background: var(--sand); border-radius: var(--radius); padding: 30px 24px; }
.formular-karte > p:not(.kicker) { color: var(--tinte-2); }
.formular { display: grid; gap: 14px; margin-top: 10px; }
.feld-reihe { display: grid; gap: 14px; }
.feld { display: flex; flex-direction: column; gap: 6px; font-size: .86rem; font-weight: 500; }
.feld input, .feld select, .feld textarea { font: inherit; font-weight: 400; font-size: 1rem; padding: 13px 14px; border: 1px solid var(--taupe); border-radius: var(--radius-klein); background: var(--weiss); color: var(--tinte); width: 100%; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: none; border-color: var(--tinte); box-shadow: 0 0 0 3px rgba(125, 104, 88, .18); }
.feld textarea { resize: vertical; min-height: 140px; }
.feld-check { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; color: var(--tinte-2); }
.feld-check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--tinte); flex-shrink: 0; }
.feld-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular .knopf { justify-self: start; }
.hinweis-box { padding: 14px 16px; border-radius: var(--radius-klein); background: var(--weiss); border: 1px solid var(--taupe); margin: 10px 0; font-size: .92rem; }
.hinweis-fehler { border-color: #d9a39b; background: #fbf0ee; }
.fuss-hinweis { font-size: .86rem; color: var(--akzent); font-weight: 500; }
@media (min-width: 640px) { .feld-reihe { grid-template-columns: 1fr 1fr; } .formular-karte { padding: 40px; } }
@media (min-width: 980px) { .kontakt-raster { grid-template-columns: .9fr 1.1fr; gap: 50px; } .formular-karte { position: sticky; top: calc(var(--kopf-h) + 20px); } }

/* Über uns / Galerie */
.praxis-galerie { display: grid; gap: 14px; }
@media (min-width: 800px) {
  .praxis-galerie { grid-template-columns: 1.4fr 1fr; grid-template-rows: auto auto; }
  .praxis-galerie .bild:nth-child(1) { grid-column: 1; grid-row: 1 / 3; aspect-ratio: auto; height: 100%; }
  .praxis-galerie .bild:nth-child(3) { aspect-ratio: 4/3; }
}
.zitat-klein { padding: 24px 0 0 !important; }
.zitat-schluss { text-align: center; font-family: var(--serif); font-size: clamp(1.4rem, 3vw, 2rem); color: var(--akzent); padding-bottom: 90px; }

/* Journal */
.artikel .bild { margin: 0 0 34px; }
.artikel h2 { font-size: clamp(1.7rem, 4vw, 2.3rem); margin-top: 1.4em; }
.artikel p { font-size: 1.06rem; color: var(--tinte-2); }
.artikel a { color: var(--akzent); }
.tipp { background: var(--sand); padding: 22px 24px; border-radius: var(--radius-klein); margin: 26px 0 34px; }

/* Rechtstexte */
.rechtstext h2 { font-size: 1.6rem; margin-top: 1.6em; }
.rechtstext p { color: var(--tinte-2); }
.rechtstext a { color: var(--akzent); }

/* ---------- Fußzeile ---------- */
.fuss { background: var(--sand); color: var(--tinte); margin-top: 0; }
.fuss-ig { background: var(--sand-2); }
.fuss-ig-innen { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding-top: 20px; padding-bottom: 20px; }
.fuss-ig-text { margin: 0; font-family: var(--serif); font-size: 1.35rem; }
.fuss-ig-link { display: inline-flex; align-items: center; gap: .5em; font-weight: 500; text-decoration: none; padding: 10px 18px; border-radius: 999px; background: var(--weiss); }
.fuss-ig-link svg { width: 22px; height: 22px; }
.fuss-raster { display: grid; gap: 36px; padding-top: 56px; padding-bottom: 44px; }
.fuss-marke img { width: 170px; height: auto; margin-bottom: 16px; }
.fuss-marke p { color: var(--tinte-2); font-size: .94rem; max-width: 26em; }
.fuss-sozial { display: flex; gap: 8px; margin-top: 18px; }
.fuss-sozial a { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--weiss); transition: background .2s, color .2s; }
.fuss-sozial a:hover { background: var(--tinte); color: #fff; }
.fuss-sozial svg { width: 20px; height: 20px; }
.fuss-titel { font-size: .74rem; text-transform: uppercase; letter-spacing: .2em; font-weight: 500; color: var(--akzent); margin-bottom: 14px; }
.fuss-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .94rem; }
.fuss-liste a { text-decoration: none; color: var(--tinte-2); }
.fuss-liste a:hover { color: var(--tinte); text-decoration: underline; }
.fuss-zweispaltig { grid-template-columns: 1fr 1fr; column-gap: 18px; }
.fuss-kontakt { font-style: normal; display: grid; gap: 10px; font-size: .94rem; color: var(--tinte-2); }
.fuss-kontakt a { display: inline-flex; align-items: center; gap: .6em; text-decoration: none; }
.fuss-kontakt a:hover { color: var(--tinte); }
.fuss-kontakt svg { width: 18px; height: 18px; color: var(--akzent); }
.fuss-unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding-top: 18px; padding-bottom: 22px; border-top: 1px solid var(--taupe); font-size: .84rem; color: var(--tinte-2); }
.fuss-unten nav { display: flex; gap: 18px; }
.fuss-unten a { text-decoration: none; }
.fuss-unten a:hover { text-decoration: underline; }
.gb-fuss { margin-top: 4px; }
@media (min-width: 760px) { .fuss-raster { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .fuss-raster { grid-template-columns: 1.2fr 1.4fr .9fr 1fr; gap: 48px; } }

/* webexperte24-Signatur (helle Variante) */
.credit-bar { background: #ebe3da; border-top: 1px solid #ddd2c7; padding: 12px 20px; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.credit-label { font-size: 12px; letter-spacing: .3px; color: #8a7b70; }
.credit-link { display: inline-flex; align-items: center; color: #6e625a; opacity: .8; transition: opacity .2s, color .2s; }
.credit-link:hover { opacity: 1; color: #2f2925; }

/* ---------- Einblenden beim Scrollen ---------- */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); }
.js .reveal.ist-sichtbar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media print {
  .kopf, .ankuendigung, .fuss, .credit-bar, .band-cta, .planer-auswahl, .kk-wurzel { display: none !important; }
}

/* Dr. Rimpler Wirkstoffe-Guide, Journal-Routine und Kalender */
.wirkstoffe { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--linie); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; }
.wirkstoffe li { background: var(--weiss); padding: 18px 22px; display: grid; gap: 4px; }
.wirkstoffe strong { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; color: var(--akzent); letter-spacing: .02em; }
.wirkstoffe span { color: var(--tinte-2); }
@media (min-width: 700px) { .wirkstoffe { grid-template-columns: repeat(3, 1fr); } }
.routine { display: grid; gap: 16px; margin: 0 0 1em; }
.routine > div { background: var(--sand); border-radius: var(--radius-klein); padding: 20px 24px; }
.routine ol { margin: 0; padding-left: 1.3em; color: var(--tinte-2); }
.routine li { padding: 2px 0; }
@media (min-width: 640px) { .routine { grid-template-columns: 1fr 1fr; } }
.kalender { list-style: none; margin: 0 0 1em; padding: 0; display: grid; gap: 8px; }
.kalender li { display: flex; gap: 10px; align-items: baseline; padding: 10px 14px; border: 1px solid var(--linie); border-radius: var(--radius-klein); background: var(--weiss); font-size: .95rem; color: var(--tinte-2); }
.kalender span { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; color: var(--akzent); min-width: 1.8em; }
@media (min-width: 640px) { .kalender { grid-template-columns: 1fr 1fr; } }
.artikel .galerie .bild { margin: 0; }

/* First Date mit Hautanalyse */
.first-date-analyse { display: grid; gap: 34px; align-items: center; }
.fd-bilder { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 460px; }
.fd-bilder .bild:first-child { transform: translateY(-14px); }
.fd-text p:not(.kicker) { color: var(--tinte-2); }
.lead a { color: var(--tinte); text-decoration: underline; text-decoration-color: var(--taupe-3); text-underline-offset: 3px; }
.lead a:hover { text-decoration-color: var(--tinte); }
@media (min-width: 900px) { .first-date-analyse { grid-template-columns: .85fr 1.15fr; gap: 70px; } }

/* Broschüre zum Durchblättern */
.blaettern { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; max-width: 760px; margin: 0 auto; touch-action: pan-y; }
.bl-buehne { margin: 0; justify-self: center; }
.bl-buehne img { width: auto; max-width: 100%; max-height: min(78vh, 1000px); height: auto; border-radius: 6px; box-shadow: var(--schatten); background: var(--weiss); }
.bl-pfeil { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--taupe); background: var(--weiss); display: grid; place-items: center; cursor: pointer; transition: background .2s, opacity .2s; }
.bl-pfeil svg { width: 22px; height: 22px; }
.bl-pfeil:hover:not(:disabled) { background: var(--sand); }
.bl-pfeil:disabled { opacity: .3; cursor: default; }
.bl-zaehler { text-align: center; margin: 18px 0 0; display: flex; flex-direction: column; gap: 2px; }
.bl-zaehler strong { font-family: var(--serif); font-size: 1.4rem; font-weight: 600; }
.bl-zaehler span { color: var(--tinte-2); font-size: .95rem; }
.bl-tipp { text-align: center; font-size: .82rem; color: var(--tinte-2); margin: 4px 0 0; }
.bl-raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.bl-vorschau { position: relative; display: block; text-decoration: none; border-radius: 8px; outline-offset: 3px; }
.bl-vorschau .bild { border-radius: 6px; border: 2px solid transparent; transition: border-color .2s, transform .2s; box-shadow: var(--schatten-klein); }
.bl-vorschau:hover .bild { transform: translateY(-2px); }
.bl-vorschau.ist-aktiv .bild { border-color: var(--akzent); }
.bl-vorschau span { display: block; text-align: center; font-size: .8rem; color: var(--tinte-2); margin-top: 6px; }
@media (max-width: 520px) {
  .blaettern { grid-template-columns: 1fr 1fr; gap: 14px 16px; }
  .bl-buehne { grid-column: 1 / -1; grid-row: 1; }
  .bl-zurueck { grid-row: 2; justify-self: end; }
  .bl-weiter { grid-row: 2; justify-self: start; }
}
@media (min-width: 640px) { .bl-raster { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1000px) { .bl-raster { grid-template-columns: repeat(7, 1fr); } }

/* Großansicht der Broschüre (über der Seite, mit Weiterblättern) */
.bl-lightbox { position: fixed; inset: 0; z-index: 300; background: rgba(28, 24, 21, .94); display: grid; grid-template-rows: auto 1fr auto; }
.bl-lightbox[hidden] { display: none; }
body.bl-lb-offen { overflow: hidden; }
.bl-lb-kopf { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; color: #fff; }
.bl-lb-zaehler { font-family: var(--serif); font-size: 1.25rem; }
.bl-lb-zu { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); background: transparent; color: #fff; display: grid; place-items: center; cursor: pointer; }
.bl-lb-zu svg { width: 22px; height: 22px; }
.bl-lb-flaeche { overflow: auto; display: grid; place-items: center; padding: 0 12px; overscroll-behavior: contain; }
.bl-lb-flaeche img { max-width: 100%; max-height: calc(100vh - 140px); width: auto; height: auto; border-radius: 4px; cursor: zoom-in; background: #fff; }
.bl-lb-flaeche.ist-zoom { place-items: start center; }
.bl-lb-flaeche.ist-zoom img { max-width: none; max-height: none; width: min(1140px, 220vw); cursor: zoom-out; }
.bl-lb-pfeil { position: fixed; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); color: var(--tinte); display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, .3); }
.bl-lb-pfeil svg { width: 24px; height: 24px; }
.bl-lb-pfeil:disabled { opacity: .25; cursor: default; }
.bl-lb-zurueck { left: 14px; }
.bl-lb-weiter { right: 14px; }
.bl-lb-tipp { text-align: center; color: rgba(255, 255, 255, .7); font-size: .8rem; margin: 0; padding: 10px; }
@media (max-width: 640px) {
  .bl-lb-pfeil { top: auto; bottom: 12px; transform: none; width: 48px; height: 48px; }
  .bl-lb-zurueck { left: calc(50% - 60px); }
  .bl-lb-weiter { right: calc(50% - 60px); }
  .bl-lb-tipp { padding-bottom: 72px; }
  .bl-lb-flaeche img { max-height: calc(100vh - 190px); }
}

/* Kopfleiste mit sieben Menüpunkten: bei mittlerer Breite etwas enger setzen, damit nichts überläuft */
@media (min-width: 1100px) and (max-width: 1379px) {
  .kopf-innen { gap: 10px; }
  .kopf-logo img { height: 54px; }
  .nav-liste { gap: 0; }
  .nav-liste > li > a, .nav-knopf { padding: 10px 8px; font-size: .72rem; letter-spacing: .08em; }
  .kopf-termin { padding: 0 1em; }
}