/* ============================================================
   Diana's Kosmetik — Redesign „Bei Diana" (test3)
   Konzept: persönliche Empfehlung statt Beauty-Kette.
   Signatur: Dianas Handnotizen (Caveat) + Vorher/Nachher-Regler.
   Farben:  Porzellan / Espresso / Rosenholz / Puder / Honig
   Schrift: Fraunces (Display) · Inter (Text) · Caveat (Handschrift)
   Alle Schriften lokal gehostet (DSGVO).
   ============================================================ */

/* ---------- Schriften ---------- */
@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/fraunces-latin-var.woff2') format('woff2');
}
@font-face {
    font-family: 'Fraunces';
    font-style: italic;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/fraunces-italic-latin-var.woff2') format('woff2');
}
@font-face {
    font-family: 'Caveat';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/caveat-latin-var.woff2') format('woff2');
}
/* Inter als variable Schrift: eine Datei fuer den ganzen Bereich 100-900.
   Ersetzt die drei statischen Schnitte 300/400/500 und liefert endlich auch
   600 und 700, die das Stylesheet fuer saemtliche Ueberschriften verlangt --
   vorher wurden die auf 500 gekappt oder vom Browser fett gerechnet.
   Mit 47 KB kleiner als die drei statischen zusammen (70 KB).
   Nachgemessen: 300/400/500 decken sich mit den alten Dateien auf 0,02 px. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-latin-var.woff2') format('woff2');
}

/* ---------- Token ---------- */
:root {
    --porzellan: #FBF6F0;
    --puder:     #F3E6D9;
    --espresso:  #3A2C23;
    --taupe:     #86735F;
    --rosenholz: #A96D52;
    --rosenholz-dunkel: #8A5540;
    --honig:     #B08437;
    --nacht:     #33281E;
    --linie:     #E9DCCC;
    --weiss:     #FFFDFA;

    /* Legacy-Aliase für Alt-Templates (Impressum/Datenschutz) */
    --primary-dark:  var(--rosenholz-dunkel);
    --primary-light: var(--rosenholz);
    --soft-pink:     var(--porzellan);
    --accent-gold:   #C9A227;

    --schrift-display: 'Inter', system-ui, sans-serif;
    --schrift-text:    'Inter', system-ui, sans-serif;
    --schrift-hand:    'Caveat', cursive;
}

/* ---------- Basis ---------- */
* { box-sizing: border-box; }

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

body {
    margin: 0;
    font-family: var(--schrift-text);
    font-size: 1.0rem;
    line-height: 1.7;
    color: var(--espresso);
    background-color: var(--porzellan);
}

h1, h2, h3, h4 {
    font-family: var(--schrift-display);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.015em;
    margin: 0 0 0.5em;
    text-wrap: balance;
}

p { margin: 0 0 1em; }

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

a { color: inherit; }

em, .kursiv {
    font-family: var(--schrift-display);
    font-style: italic;
    font-weight: 400;
}

.wrap {
    max-width: 1160px;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.sektion { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.sektion-hell { background: var(--weiss); }
.sektion-puder { background: var(--puder); }

/* Eyebrow-Label über Überschriften */
.vorzeile {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--rosenholz);
    margin-bottom: 0.9rem;
}

.untertitel {
    color: var(--taupe);
    max-width: 46rem;
    font-size: 1.06rem;
}

/* ---------- Handnotizen (Signatur) ---------- */
.notiz {
    font-family: var(--schrift-hand);
    font-weight: 500;
    font-size: clamp(1.25rem, 2.2vw, 1.5rem);
    line-height: 1.25;
    color: var(--honig);
    transform: rotate(-2.5deg);
    display: inline-block;
}

.notiz svg { display: inline-block; vertical-align: middle; }

/* ---------- Knöpfe ---------- */
.knopf, .knopf-leise {
    display: inline-block;
    font-family: var(--schrift-text);
    font-weight: 500;
    font-size: 0.98rem;
    padding: 0.9em 2.1em;
    border-radius: 999px;
    text-decoration: none;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.15s ease;
}

.knopf {
    background: var(--rosenholz);
    color: #fff;
}
.knopf:hover, .knopf:focus-visible { background: var(--rosenholz-dunkel); }
.knopf:active { transform: scale(0.98); }

.knopf-leise {
    border-color: var(--espresso);
    color: var(--espresso);
    background: transparent;
}
.knopf-leise:hover, .knopf-leise:focus-visible {
    background: var(--espresso);
    color: var(--porzellan);
}

.knopf:focus-visible, .knopf-leise:focus-visible, a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2.5px solid var(--honig);
    outline-offset: 3px;
}

/* ---------- Navigation ---------- */
.kopf {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(251, 246, 240, 0.88);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--linie);
}

.kopf-innen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: 78px;
}

.marke {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    text-decoration: none;
}
.marke img { width: 46px; height: 46px; object-fit: contain; }
.marke-name {
    font-family: var(--schrift-display);
    font-weight: 600;
    font-size: 1.22rem;
    letter-spacing: 0.01em;
    line-height: 1.1;
}
.marke-name small {
    display: block;
    font-family: var(--schrift-text);
    font-weight: 500;
    font-size: 0.66rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--taupe);
}

/* "Kosmetikinstitut Diana" ist dreimal so lang wie das fruehere "Diana".
   Damit der Kopf neben Logo und Burger nicht bricht (er hat feste 78px Hoehe,
   an denen auch das mobile Menue haengt), faellt der Name mit der Breite mit -
   der Descriptor weicht zuletzt.
   Bewusst auf .kopf eingegrenzt: .marke-name steht auch in der Fusszeile. */
.kopf .marke { min-width: 0; }
.kopf .marke img { flex: none; }
.kopf .marke-name {
    font-size: clamp(0.98rem, 3.5vw, 1.22rem);
    white-space: nowrap;
}
.kopf .marke-name small { white-space: nowrap; }

/* Zwischen 861 und 960px stehen Wortmarke und volle Navigation auf Kante
   (gemessen: 16px Rest). Breitester Teil ist die gesperrte Zusatzzeile,
   nicht der Name - also dort die Sperrung zuruecknehmen. */
@media (max-width: 1023px) {
    .kopf .marke-name small { letter-spacing: 0.12em; }
}
@media (max-width: 560px) {
    .kopf .marke-name small { font-size: 0.58rem; letter-spacing: 0.1em; }
}
@media (max-width: 420px) {
    .kopf .marke img { width: 38px; height: 38px; }
    .kopf .marke-name small { display: none; }
}

.hauptmenue {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.hauptmenue a {
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    transition: color 0.2s ease, background-color 0.2s ease;
}
.hauptmenue a:hover { color: var(--rosenholz); }
.hauptmenue a.aktiv {
    color: var(--rosenholz-dunkel);
    background: var(--puder);
}
.hauptmenue .knopf {
    margin-left: 0.6rem;
    padding: 0.62em 1.5em;
    font-size: 0.92rem;
}

/* Burger + mobiles Menü */
#menu-toggle {
    display: none;
    background: none;
    border: none;
    padding: 0.55rem;
    cursor: pointer;
    color: var(--espresso);
    font-size: 1.45rem;
    line-height: 1;
}

#menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(58, 44, 35, 0.45);
    z-index: 40;
}

#mobile-menu {
    position: absolute;
    top: 78px;
    left: 0;
    width: 100%;
    background: var(--porzellan);
    border-bottom: 1px solid var(--linie);
    padding: 0.5rem 1.5rem 2rem;
    z-index: 50;
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
}
#mobile-menu.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
#mobile-menu.hidden { display: none; }
#mobile-menu a {
    display: block;
    text-decoration: none;
    font-size: 1.05rem;
    font-weight: 500;
    padding: 0.95rem 0.4rem;
    border-bottom: 1px solid var(--linie);
}
#mobile-menu a.aktiv { color: var(--rosenholz-dunkel); }
#mobile-menu .knopf {
    margin-top: 1.2rem;
    text-align: center;
    color: #fff;
    border-bottom: none;
}

/* Schmales Fenster mit noch voller Navigation (861-1023px): dort stehen
   Wortmarke und Menue auf Kante, seit im Kopf der volle Firmenname steht.
   Etwas engere Polsterung schafft die Reserve, ohne den Umschaltpunkt
   zum Burger zu verschieben. */
@media (min-width: 861px) and (max-width: 1023px) {
    .hauptmenue a { padding: 0.5rem 0.6rem; font-size: 0.9rem; }
    .hauptmenue .knopf { margin-left: 0.3rem; padding: 0.58em 1.15em; }
}

@media (max-width: 860px) {
    .hauptmenue { display: none; }
    #menu-toggle { display: block; }
}
@media (min-width: 861px) {
    #mobile-menu, #menu-overlay { display: none !important; }
}

/* ---------- Bühne: Bilderfolge über dem Hero (Startseite) ----------
   Wechselt von selbst alle 7 s, ist aber jederzeit von Hand bedienbar —
   Pfeile, Punkte, Pfeiltasten. Jeder Eingriff setzt die Uhr zurück, sonst
   springt das Bild direkt nach dem Klick weiter. Steuerung in js/main.js. */
.buehne {
    position: relative;
    height: clamp(340px, 68vh, 620px);
    overflow: hidden;
    background: var(--nacht);
}
.buehne-folie {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.9s ease-in-out;
}
.buehne-folie.aktiv {
    opacity: 1;
    pointer-events: auto;
}
.buehne-foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.buehne-schleier {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(51, 40, 30, 0.66) 0%, rgba(51, 40, 30, 0.42) 45%, rgba(51, 40, 30, 0.22) 100%);
}
.buehne-text {
    position: relative;
    max-width: 40rem;
    color: #fff;
}
.buehne-text h2 {
    color: #fff;
    font-size: clamp(1.9rem, 4.4vw, 3.2rem);
    margin: 0 0 0.5em;
}
.buehne-text p {
    font-size: clamp(1rem, 1.5vw, 1.14rem);
    margin-bottom: 1.7rem;
    color: rgba(255, 255, 255, 0.92);
}

/* Bedienung */
.buehne-pfeil {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    padding: 0;
    font-size: 1.6rem;
    line-height: 1;
    color: #fff;
    background: rgba(51, 40, 30, 0.38);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.buehne-pfeil:hover,
.buehne-pfeil:focus-visible {
    background: var(--rosenholz);
    border-color: var(--rosenholz);
}
.buehne-zurueck { left: clamp(0.6rem, 2vw, 1.6rem); }
.buehne-vor     { right: clamp(0.6rem, 2vw, 1.6rem); }

.buehne-punkte {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1.3rem;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 0.55rem;
}
.buehne-punkt {
    width: 10px;
    height: 10px;
    padding: 0;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.25s ease, width 0.25s ease;
}
.buehne-punkt[aria-current="true"] {
    background: #fff;
    width: 26px;
}
.buehne-punkt:focus-visible,
.buehne-pfeil:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

@media (max-width: 620px) {
    .buehne { height: clamp(300px, 56vh, 420px); }

    /* Auf Handybreiten füllt der Bühnentext die volle Breite und lief
       vorher hinter die Pfeile, die auf halber Höhe am Bildrand saßen.
       Deshalb wandert die ganze Bedienung in eine Zeile an den unteren
       Bildrand: Pfeile außen, Punkte mittig. Das Polster an der Folie
       hält den Text darüber. */
    .buehne-folie { padding-bottom: 3.4rem; }
    .buehne-pfeil {
        width: 38px;
        height: 38px;
        font-size: 1.3rem;
        top: auto;
        bottom: 0.5rem;
        transform: none;
    }
    .buehne-punkte { bottom: 1.35rem; }
}

/* ---------- Hero ---------- */
.held {
    padding-block: clamp(2.5rem, 6vw, 5rem);
    overflow: hidden;
}
.held-raster {
    display: grid;
    grid-template-columns: 1.05fr 0.9fr;
    gap: clamp(2rem, 6vw, 5rem);
    align-items: center;
}
.held h1 {
    font-size: clamp(2.5rem, 5.4vw, 4.1rem);
    font-weight: 600;
}
.held-text .untertitel { margin-bottom: 1.8rem; }
.held-aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    align-items: center;
    margin-bottom: 1.4rem;
}
.held-fakten {
    color: var(--taupe);
    font-size: 0.9rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.4rem;
    padding: 0;
    margin: 0;
    list-style: none;
}
.held-fakten .sterne { color: var(--rosenholz); letter-spacing: 0.1em; }

/* Porträt in Bogenform + Handnotiz */
.held-bild { position: relative; }
.bogen {
    border-radius: 999px 999px 26px 26px;
    overflow: hidden;
    aspect-ratio: 4 / 4.8;
    box-shadow: 0 24px 60px -28px rgba(58, 44, 35, 0.45);
}
.bogen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.held-notiz {
    position: absolute;
    bottom: -1.2rem;
    left: -1.6rem;
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: 14px;
    padding: 0.7rem 1.2rem;
    box-shadow: 0 12px 30px -16px rgba(58, 44, 35, 0.3);
    transform: rotate(-3deg);
}
.held-notiz .notiz { transform: none; }

@media (max-width: 860px) {
    .held-raster { grid-template-columns: 1fr; }
    .held-bild { order: -1; max-width: 420px; margin-inline: auto; width: 100%; }
    .held-notiz { left: 0.5rem; }
}

/* ---------- Behandlungs-Karten ---------- */
.karten {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.2rem, 3vw, 2rem);
    margin-top: 2.5rem;
}
.karte {
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: 22px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.karte:hover, .karte:focus-visible {
    transform: translateY(-6px);
    box-shadow: 0 22px 44px -24px rgba(58, 44, 35, 0.35);
}
.karte figure { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; }
.karte figure img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.karte:hover figure img { transform: scale(1.04); }
.karte-text { padding: 1.5rem 1.6rem 1.7rem; display: flex; flex-direction: column; flex: 1; }
.karte h3 { font-size: 1.35rem; margin-bottom: 0.4rem; }
.karte p { color: var(--taupe); font-size: 0.95rem; flex: 1; }
.karte-fuss {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 1rem;
    gap: 1rem;
}
.karte-preis { font-weight: 500; font-size: 0.95rem; }
.karte-fuss .notiz { font-size: 1.15rem; transform: rotate(-2deg); }

@media (max-width: 860px) {
    .karten { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
}

/* ---------- Vorher/Nachher-Regler ---------- */
.ba-reihe {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.2rem, 3vw, 2rem);
    margin-top: 2.5rem;
}
.ba-figur { margin: 0; }

/* Steht nur noch ein Vergleich in der Reihe, soll er nicht auf ein Drittel
   der Breite schrumpfen. Kommen wieder mehrere dazu, greift die Regel von
   selbst nicht mehr. */
.ba-reihe:has(> .ba-figur:only-child) {
    grid-template-columns: minmax(0, 460px);
}
.ba {
    --pos: 50%;
    position: relative;
    aspect-ratio: 1;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 16px 36px -22px rgba(58, 44, 35, 0.4);
    touch-action: pan-y;
}
.ba > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ba-vorher-wrap {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: var(--pos);
    overflow: hidden;
}
.ba-vorher-wrap img {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    width: auto;
    max-width: none;
}
.ba-linie {
    position: absolute;
    top: 0; bottom: 0;
    left: var(--pos);
    width: 2px;
    margin-left: -1px;
    background: var(--porzellan);
    pointer-events: none;
}
.ba-griff {
    position: absolute;
    top: 50%;
    left: var(--pos);
    transform: translate(-50%, -50%);
    width: 42px; height: 42px;
    border-radius: 50%;
    background: var(--porzellan);
    color: var(--espresso);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    letter-spacing: -0.05em;
    box-shadow: 0 4px 14px rgba(58, 44, 35, 0.35);
    pointer-events: none;
}
.ba input[type="range"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: ew-resize;
    margin: 0;
}
.ba-etikett {
    position: absolute;
    top: 0.8rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: rgba(251, 246, 240, 0.85);
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    pointer-events: none;
}
.ba-etikett-v { left: 0.8rem; }
.ba-etikett-n { right: 0.8rem; }
.ba-figur figcaption {
    text-align: center;
    font-size: 0.92rem;
    color: var(--taupe);
    margin-top: 0.9rem;
}
.ba-hinweis {
    text-align: center;
    margin-top: 2rem;
}
.kleingedrucktes {
    font-size: 0.8rem;
    color: var(--taupe);
    text-align: center;
    margin-top: 1.2rem;
}

@media (max-width: 860px) {
    .ba-reihe { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; }
}

/* ---------- Split-Sektion (Hautanalyse) ---------- */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 6vw, 5rem);
    align-items: center;
}
.split-bild {
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 24px 50px -30px rgba(58, 44, 35, 0.45);
}
.split-bild img { width: 100%; height: 100%; object-fit: cover; }
.haken-liste {
    list-style: none;
    padding: 0;
    margin: 1.4rem 0 2rem;
    display: grid;
    gap: 0.9rem;
}
.haken-liste li {
    display: flex;
    gap: 0.8rem;
    align-items: baseline;
    color: var(--espresso);
}
.haken-liste li::before {
    content: '✓';
    flex-shrink: 0;
    font-weight: 700;
    color: var(--honig);
}

@media (max-width: 860px) {
    .split { grid-template-columns: 1fr; }
}

/* ---------- Bildstreifen (Hände-Banner) ---------- */
.streifen { padding: 0; }
.streifen figure { margin: 0; }
.streifen img { width: 100%; max-height: 420px; object-fit: cover; }
.streifen figcaption {
    text-align: center;
    padding: 1.4rem 1.5rem 0;
}
.streifen figcaption .notiz { transform: rotate(-1.5deg); }

/* ---------- Abschluss-CTA ---------- */
.abschluss { text-align: center; }
.abschluss h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); max-width: 34rem; margin-inline: auto; }
.abschluss .held-aktionen { justify-content: center; margin-top: 1.6rem; }
.abschluss .notiz { margin-top: 1.4rem; }

/* Sektions-Überschriften */
.sektion h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); }

/* ---------- Fußzeile ---------- */
.fuss {
    background: var(--nacht);
    color: #EDEAE0;
    padding: clamp(3rem, 6vw, 4.5rem) 0 2rem;
    margin-top: 0;
}
.fuss a { color: inherit; text-decoration: none; }
.fuss a:hover { text-decoration: underline; }
.fuss-raster {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 2.5rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid rgba(237, 234, 224, 0.2);
}
.fuss-marke .marke-name { color: #fff; font-size: 1.35rem; }
.fuss .notiz { color: #D9B97E; margin-top: 0.8rem; }
.fuss h4 {
    font-family: var(--schrift-text);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #C9AE83;
    margin-bottom: 1rem;
}
.fuss address { font-style: normal; line-height: 1.9; }
.fuss-zeiten { line-height: 1.9; }
.fuss-unten {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.8rem;
    padding-top: 1.6rem;
    font-size: 0.82rem;
    color: rgba(237, 234, 224, 0.65);
}
.fuss-unten nav { display: flex; gap: 1.4rem; }

@media (max-width: 860px) {
    .fuss-raster { grid-template-columns: 1fr; gap: 1.8rem; }
}

/* ---------- Kontaktformular ---------- */
.kontakt-raster {
    display: grid;
    grid-template-columns: 0.85fr 1.4fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
}
.info-karte {
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: 20px;
    padding: 1.7rem 1.8rem;
    margin-bottom: 1.4rem;
}
.info-karte h3 { font-size: 1.2rem; margin-bottom: 0.9rem; }
.info-karte p { margin-bottom: 0.4rem; }
.info-karte .zeile {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.3rem 0;
}
.info-karte .zeile span:last-child { font-weight: 500; }
.info-karte .gedimmt { color: var(--taupe); }

.formular-karte {
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: 24px;
    padding: clamp(1.6rem, 4vw, 2.8rem);
}
.formular-karte h2 { font-size: 1.7rem; }
.feld-raster {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
}
.feld { display: flex; flex-direction: column; gap: 0.45rem; }
/* Hinweis unter E-Mail und Handynummer: eines von beidem reicht */
.feld-hinweis {
    margin: -0.5rem 0 0;
    font-size: 0.84rem;
    color: var(--taupe);
}
.feld-breit { grid-column: 1 / -1; }
.feld label {
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--taupe);
}
.feld input, .feld select, .feld textarea {
    font-family: var(--schrift-text);
    font-size: 1rem;
    color: var(--espresso);
    background: var(--porzellan);
    border: 1.5px solid var(--linie);
    border-radius: 14px;
    padding: 0.85rem 1.1rem;
    transition: border-color 0.2s ease, background-color 0.2s ease;
    width: 100%;
}
.feld input:focus, .feld select:focus, .feld textarea:focus {
    outline: none;
    border-color: var(--rosenholz);
    background: #fff;
}
.feld textarea { resize: vertical; min-height: 140px; }

#message:not(:empty) {
    border-radius: 14px;
    padding: 1rem 1.2rem;
    margin-bottom: 1.3rem;
    font-weight: 500;
}
#message.meldung-ok {
    background: rgba(88, 129, 87, 0.12);
    border: 1px solid rgba(88, 129, 87, 0.4);
    color: var(--nacht);
}
#message.meldung-fehler {
    background: rgba(169, 109, 82, 0.12);
    border: 1px solid rgba(169, 109, 82, 0.45);
    color: var(--rosenholz-dunkel);
}

@media (max-width: 860px) {
    .kontakt-raster { grid-template-columns: 1fr; }
    .feld-raster { grid-template-columns: 1fr; }
}

/* Karte (Google Maps, Klick-zum-Laden) */
.karte-bereich { height: 24rem; background: var(--puder); }
.karte-platzhalter {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--taupe);
}
#map-container { width: 100%; height: 100%; }

/* ---------- Preisliste (Behandlungen) ---------- */
.gruppe { margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.gruppe-kopf {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin-bottom: 1.8rem;
}
.gruppe-kopf h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 0; }
.gruppe-kopf::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--linie);
}
/* Eine Behandlung je Zeile ueber die volle Breite - keine Kacheln nebeneinander.
   Die Karte ist dadurch eine Zeile: Bild | Titel + Dauer | Preis | Buchen. */
.preis-raster {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.9rem;
}
.preis-karte {
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: 20px;
    padding: 1.6rem 1.7rem;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.preis-karte:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px -24px rgba(58, 44, 35, 0.35);
}
.preis-bild {
    margin: -1.6rem -1.7rem 1.2rem;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: 19px 19px 0 0;
}
.preis-bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.preis-karte:hover .preis-bild img { transform: scale(1.04); }
.preis-kopf {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.2rem 1rem;
    margin-bottom: 0.3rem;
}
.preis-kopf h3 { font-size: 1.18rem; margin: 0; }
.preis {
    font-family: var(--schrift-display);
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--rosenholz-dunkel);
    white-space: nowrap;
}
.preis-alt {
    color: var(--taupe);
    text-decoration: line-through;
    font-size: 0.85rem;
    font-weight: 400;
    margin-left: 0.4rem;
}
.dauer { color: var(--taupe); font-size: 0.85rem; margin-bottom: 0.7rem; }
.preis-karte p:not(.dauer) { color: var(--espresso); font-size: 0.94rem; flex: 1; }

/* ----- Zeilenform der Preisliste ----- */
.preis-karte {
    flex-direction: row;
    align-items: center;
    gap: clamp(0.9rem, 2.2vw, 1.6rem);
    padding: 0.9rem 1.4rem;
    flex-wrap: wrap;
}
.preis-bild {
    margin: 0;
    flex: 0 0 clamp(78px, 10vw, 112px);
    aspect-ratio: 1;
    border-radius: 14px;
}
.preis-kopf {
    display: block;
    flex: 1 1 14rem;
    min-width: 0;
    margin: 0;
}
.preis-kopf h3 { font-size: 1.08rem; }
.preis-karte .dauer { margin: 0.15rem 0 0; }
.preis-karte .preis { margin-left: auto; }
.preis-karte .buchen { margin-top: 0; white-space: nowrap; }
.preis-bild-leer { background: none; }
.preis-notiz { top: -0.8rem; }

/* Schmale Geraete: festes Raster statt Umbruch nach Gutduenken.
   Zeile 1  Bild | Titel + Dauer
   Zeile 2  Bild | Preis | Buchen
   Der Platzhalter entfaellt hier - auf 320px ist die Breite zu kostbar. */
@media (max-width: 620px) {
    .preis-karte {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "bild titel titel"
            "bild preis buchen";
        align-items: center;
        column-gap: 0.9rem;
        row-gap: 0.45rem;
        padding: 0.9rem 1.1rem;
    }
    .preis-bild { grid-area: bild; flex: none; width: 64px; }
    .preis-bild-leer { display: none; }
    .preis-kopf { grid-area: titel; }
    .preis-kopf h3 { font-size: 1rem; overflow-wrap: anywhere; }
    .preis-karte .preis { grid-area: preis; margin-left: 0; }
    .preis-karte .buchen { grid-area: buchen; justify-self: end; }
}
.preis-karte .buchen {
    margin-top: 1rem;
    font-weight: 500;
    font-size: 0.92rem;
    color: var(--rosenholz);
    text-decoration: none;
}
.preis-karte .buchen:hover { text-decoration: underline; color: var(--rosenholz-dunkel); }
.preis-notiz {
    position: absolute;
    top: -1rem;
    right: 1.2rem;
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: 999px;
    padding: 0.15rem 0.9rem;
    font-size: 1.05rem;
}

/* Anker-Sprungziele unter der klebrigen Navi */
[id] { scroll-margin-top: 100px; }

/* ---------- Seitenkopf (Unterseiten) ---------- */
.seitenkopf {
    padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2rem, 5vw, 3.5rem);
    text-align: center;
}
.seitenkopf h1 { font-size: clamp(2.3rem, 4.6vw, 3.4rem); }
.seitenkopf .untertitel { margin-inline: auto; }

/* ---------- Über mich ---------- */
.person-raster {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: clamp(2rem, 6vw, 4.5rem);
    align-items: center;
}
.person-bilder { position: relative; padding-bottom: 3.5rem; }
.person-haupt {
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 24px 55px -30px rgba(58, 44, 35, 0.5);
}
.polaroid {
    position: absolute;
    right: -0.8rem;
    bottom: 0;
    width: min(46%, 240px);
    background: #fff;
    padding: 0.55rem 0.55rem 2.4rem;
    border-radius: 6px;
    box-shadow: 0 16px 34px -18px rgba(58, 44, 35, 0.5);
    transform: rotate(4deg);
}
.polaroid img {
    border-radius: 2px;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: 50% 18%;
}
.polaroid .notiz {
    position: absolute;
    bottom: 0.35rem;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 1.15rem;
    transform: none;
}
/* Bleibt das Polaroid als einziges Bild uebrig, kann es nicht mehr absolut
   am grossen Portraet haengen - sonst faellt .person-bilder in sich zusammen.
   Kommt das Portraet zurueck, greift die Regel von selbst nicht mehr. */
.person-bilder:has(> .polaroid:only-child) { padding-bottom: 0; }
.person-bilder:has(> .polaroid:only-child) .polaroid {
    position: relative;
    right: auto;
    bottom: auto;
    width: min(100%, 400px);
    margin-inline: auto;
    transform: rotate(-1.5deg);
}
.person-bilder:has(> .polaroid:only-child) .polaroid img {
    aspect-ratio: 4 / 5;
    object-position: 50% 20%;
}

.merkmale {
    list-style: none;
    padding: 0;
    margin: 1.6rem 0 0;
    display: grid;
    gap: 0.8rem;
}
.merkmale li { display: flex; gap: 0.8rem; align-items: baseline; }
.merkmale li::before {
    content: '✓';
    font-weight: 700;
    color: var(--honig);
}

.philosophie {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem;
    margin-top: 2.2rem;
}
.philosophie article {
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: 20px;
    padding: 1.7rem 1.6rem;
}
.philosophie h3 { font-size: 1.2rem; }
.philosophie p { color: var(--taupe); font-size: 0.94rem; margin: 0; }

@media (max-width: 860px) {
    .person-raster { grid-template-columns: 1fr; }
    .philosophie { grid-template-columns: 1fr; }
}

/* ---------- Kontakt-Schnellblöcke (schwebend rechts) ---------- */
.contact-slide-block {
    position: fixed;
    right: 0;
    z-index: 45;
    background-color: var(--nacht);
    color: #fff;
    box-shadow: -4px 8px 24px rgba(0, 0, 0, 0.2);
    border-radius: 12px 0 0 12px;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
    display: flex;
    align-items: center;
}
.contact-slide-block.collapsed { transform: translateX(calc(100% - 50px)); }
.contact-slide-trigger {
    width: 50px; height: 50px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0;
}
.contact-slide-trigger i { font-size: 19px; color: #fff; }
.contact-slide-content {
    padding: 12px 18px 12px 6px;
    display: flex; align-items: center; gap: 10px;
    font-size: 13px; font-weight: 500;
    white-space: nowrap; color: #fff;
    text-decoration: none;
}
.contact-slide-content:hover { text-decoration: underline; }
.contact-slide-content i { display: none; }
#emailBlock { bottom: 20px; }
#whatsappBlock { bottom: 80px; }
#phoneBlock { bottom: 140px; }

/* ---------- Sanftes Einblenden beim Scrollen ---------- */
.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.sichtbar {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .karte, .karte figure img, .preis-karte, .preis-bild img { transition: none; }
}

/* ---------- 404 ---------- */
.leer-seite { text-align: center; padding-block: clamp(4rem, 10vw, 7rem); }

/* ---------- Bewertungen (live von Treatwell) ---------- */
.bewertung-summe {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    flex-wrap: wrap;
    font-size: 1.05rem;
    color: var(--taupe);
}
.bewertung-summe strong {
    font-family: var(--schrift-display);
    font-weight: 600;
    font-size: 2.4rem;
    color: var(--espresso);
}
.bewertung-summe .sterne { color: var(--rosenholz); letter-spacing: 0.12em; }
.bewertung-summe a { color: var(--rosenholz); }

.rezensionen {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.2rem, 3vw, 2rem);
    margin-top: 2rem;
}
.rezension {
    margin: 0;
    background: var(--porzellan);
    border: 1px solid var(--linie);
    border-radius: 20px;
    padding: 1.7rem 1.8rem;
    display: flex;
    flex-direction: column;
}
.rezension .sterne {
    color: var(--rosenholz);
    letter-spacing: 0.15em;
    margin-bottom: 0.6rem;
}
.rezension-text { flex: 1; }
.rezension footer {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--taupe);
    margin-top: 0.4rem;
}

@media (max-width: 860px) {
    .rezensionen { grid-template-columns: 1fr; max-width: 460px; }
}