/* ==========================================================================
   EDS – Praxis für ästhetische Kosmetik
   Ein Stylesheet für die gesamte Website.

   Aufbau
     1.  Design-Tokens (Farben, Schriften, Abstände)  ← hier zentral anpassen
     2.  Schriften
     3.  Basis
     4.  Layout (Container, Abschnitte)
     5.  Kopfbereich & Navigation
     6.  Fußzeile & Schnellkontakt
     7.  Bausteine (Hero, Karten, Akkordeon, Preise, …)
     8.  Formulare
     9.  Hilfsklassen
    10.  Druck
   ========================================================================== */

/* 1. Design-Tokens ======================================================== */
:root {
    /* Farben */
    --c-gold: #daa520;
    --c-gold-dark: #b8892f;
    --c-gold-shadow: #bba14f;
    --c-text: #362839;          /* dunkles Aubergine – Fließtext */
    --c-heading: #362839;
    --c-ink: #000;              /* Menü, Links auf Gold */
    --c-muted: #6e6470;
    --c-bg: #f1f1f1;            /* Seitenhintergrund */
    --c-surface: #fff;          /* Karten */
    --c-line: #e1e1e1;
    --c-accordion: #e1e1e1;
    --c-accordion-hover: #ececec;
    --c-accordion-text: #515151;
    --c-success: #3f8f47;
    --c-error: #b3261e;

    /* Goldtextur (Kopf, Menü, Buttons, Fußzeile) */
    --gold-texture: url("../img/gold.jpg");

    /* Schriften */
    --font-body: "Antic Didone", Georgia, "Times New Roman", serif;
    --font-script: "Great Vibes", "Brush Script MT", cursive;
    --font-signature: "Mr De Haviland", "Brush Script MT", cursive;
    --fs-base: clamp(1.0625rem, 0.98rem + 0.3vw, 1.1875rem);
    --fs-small: 0.875em;
    --fs-h1: clamp(1.9rem, 1.4rem + 1.8vw, 2.6rem);
    --fs-h2: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
    --fs-h3: clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem);
    --lh: 1.6;

    /* Abstände & Formen */
    --container: 1300px;
    --gutter: clamp(1rem, 0.5rem + 2vw, 2.25rem);
    --space: clamp(1.25rem, 0.9rem + 1.5vw, 2rem);
    --radius: 15px;
    --radius-s: 6px;
    --shadow-card: 10px 10px 50px color-mix(in srgb, var(--c-gold-shadow) 75%, transparent);
    --shadow-soft: 3px 3px 10px color-mix(in srgb, var(--c-gold-shadow) 70%, transparent);
    --shadow-button: 0 0 5px var(--c-gold);

    /* Kopfbereich */
    --logo-height: clamp(70px, 5vw + 50px, 120px);
    --logo-height-sticky: 50px;
    --bottom-bar: 0px;
}

/* 2. Schriften (lokal gehostet – keine Verbindung zu Google) ================ */
@font-face {
    font-family: "Antic Didone";
    font-style: normal; font-weight: 400; font-display: swap;
    src: url("../fonts/antic-didone-latin-400-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Great Vibes";
    font-style: normal; font-weight: 400; font-display: swap;
    src: url("../fonts/great-vibes-latin-400-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
    font-family: "Great Vibes";
    font-style: normal; font-weight: 400; font-display: swap;
    src: url("../fonts/great-vibes-latin-ext-400-normal.woff2") format("woff2");
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Mr De Haviland";
    font-style: normal; font-weight: 400; font-display: swap;
    src: url("../fonts/mr-de-haviland-latin-400-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
    font-family: "Mr De Haviland";
    font-style: normal; font-weight: 400; font-display: swap;
    src: url("../fonts/mr-de-haviland-latin-ext-400-normal.woff2") format("woff2");
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 3. Basis ================================================================= */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: var(--lh);
    color: var(--c-text);
    background: var(--c-bg);
    padding-bottom: var(--bottom-bar);
    overflow-x: hidden;
}

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

h1, h2, h3, h4 {
    color: var(--c-heading);
    font-weight: 400;
    font-variant-caps: small-caps;
    line-height: 1.2;
    margin: 0 0 0.6em;
    text-wrap: balance;
}
h1 { font-size: var(--fs-h1); text-align: center; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-color: color-mix(in srgb, var(--c-gold) 70%, transparent); text-underline-offset: 3px; }
a:hover { color: var(--c-gold-dark); }
:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 2px; border-radius: 3px; }

strong, b { font-weight: 700; }
hr, .rule { border: 0; border-top: 1px solid #9a9a9a; margin: 1.2em 0 1.6em; }

.icon { width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.25em; }

.gold {
    background-color: var(--c-gold);
    background-image: var(--gold-texture);
    background-size: 100% 100%;
}

/* 4. Layout ================================================================ */
.container {
    width: min(100% - 2 * var(--gutter), var(--container));
    margin-inline: auto;
}
.main { display: block; padding-block: var(--space) calc(var(--space) * 1.5); outline: none; }
.main > * + * { margin-top: var(--space); }

.section__inner {
    position: relative;
}
.section--card .section__inner {
    background: var(--c-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: clamp(1.25rem, 0.5rem + 3vw, 2.5rem);
}
.section--flush .section__inner { padding: 0; overflow: hidden; }
.section__title { text-align: center; }
.section__intro { max-width: 70ch; margin: 0 auto 1.8em; text-align: center; }
.section.is-centered .section__inner { text-align: center; }
.section__inner > * + * { margin-top: 1.5rem; }
.section__inner > .section__title + *,
.section__inner > .rule + * { margin-top: 0; }

.page-title { margin-top: 0.5rem; }

.prose { max-width: 80ch; }
.is-centered .prose, .prose.is-centered { margin-inline: auto; text-align: center; }
.prose ul { padding-left: 1.2em; }
.prose li + li { margin-top: 0.35em; }
.prose h3 { margin-top: 1.4em; }
.prose h3:first-child { margin-top: 0; }
.is-small { font-size: var(--fs-small); }

.columns { display: grid; gap: var(--space); }
@media (min-width: 800px) {
    .columns--2 { grid-template-columns: repeat(2, 1fr); }
    .columns--3 { grid-template-columns: repeat(3, 1fr); }
}

/* 5. Kopfbereich & Navigation ============================================= */
.skip-link {
    position: absolute; left: 1rem; top: -100px; z-index: 100;
    background: #fff; padding: 0.6rem 1rem; border-radius: var(--radius-s);
}
.skip-link:focus { top: 1rem; }

.preview-banner {
    background: #362839; color: #fff; text-align: center; font-size: 0.85rem; padding: 0.4rem;
}
.preview-banner a { color: var(--c-gold); }

.site-header {
    position: sticky; top: 0; z-index: 50;
    background: #fff;
}
.site-header.is-stuck { box-shadow: 0 3px 8px rgb(0 0 0 / 0.35); }

.topbar { border-top: 3px solid var(--c-gold); font-size: 0.8rem; }
.topbar__inner {
    display: flex; justify-content: flex-end; align-items: center; gap: 1rem;
    padding: 0.35rem var(--gutter);
}
.topbar__link, .lang-switch__item {
    color: var(--c-ink); text-decoration: none;
    background: #fff; border-radius: 4px; padding: 0.1rem 0.55rem;
    box-shadow: 0 0 6px rgb(0 0 0 / 0.35);
    transition: background-color 0.3s;
}
.topbar__link:hover, .lang-switch__item:hover { background: var(--c-line); color: var(--c-ink); }
.lang-switch { display: flex; gap: 0.35rem; }
.lang-switch__item { font-size: 0.75rem; letter-spacing: 0.05em; }
.lang-switch__item.is-active { background: var(--c-text); color: #fff; box-shadow: none; }

.logobar {
    position: relative;
    display: flex; justify-content: center; align-items: center;
    padding: 0.35rem var(--gutter);
    background: #fff;
}
.logobar__logo { display: block; }
.logobar__logo img {
    height: var(--logo-height); width: auto; max-width: min(620px, 72vw);
    object-fit: contain;
    transition: height 0.4s ease;
}

.menu-button {
    display: none;
    position: absolute; right: var(--gutter); top: 50%; translate: 0 -50%;
    width: 52px; height: 52px; padding: 0;
    border: 0; border-radius: var(--radius-s);
    background: transparent; color: var(--c-ink); cursor: pointer;
}
.menu-button .icon { width: 40px; height: 40px; }
.menu-button__close { display: none; }
.menu-button[aria-expanded="true"] .menu-button__open { display: none; }
.menu-button[aria-expanded="true"] .menu-button__close { display: inline; }

.navbar { position: relative; }
.nav, .nav__sub { list-style: none; margin: 0; padding: 0; }
.nav__link {
    display: block;
    color: var(--c-ink); text-decoration: none;
    font-weight: 700; font-variant-caps: small-caps;
    letter-spacing: 0.02em;
}
.nav__link--group { cursor: default; }
.nav__item.is-inactive > .nav__link { opacity: 0.6; font-style: italic; }
.nav__toggle {
    border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0;
}
.nav__toggle .icon { transition: rotate 0.3s; }

/* Desktop-Menü */
@media (min-width: 1025px) {
    .site-header.is-stuck .topbar { display: none; }
    .site-header.is-stuck .logobar__logo img { height: var(--logo-height-sticky); }

    .nav { display: flex; justify-content: center; flex-wrap: wrap; }
    .nav__item--l1 { position: relative; display: flex; align-items: center; }
    .nav__item--l1 > .nav__link {
        padding: 0.55rem 0.75rem; font-size: 1.2rem; border-radius: 5px;
        transition: background-color 0.4s;
    }
    .nav__item--l1.has-children > .nav__link { padding-right: 0.1rem; }
    .nav__item--l1 > .nav__toggle { padding: 0 0.5rem 0 0.1rem; align-self: stretch; }
    .nav__item--l1 > .nav__toggle .icon { width: 1em; height: 1em; }
    .nav__item--l1:hover > .nav__link,
    .nav__item--l1:focus-within > .nav__link,
    .nav__item--l1.is-current > .nav__link { background: rgb(255 255 255 / 0.85); }

    .nav__sub {
        position: absolute; top: 100%; left: 0; min-width: 260px;
        background: #fff; border: 2px solid var(--c-line); border-radius: 5px;
        box-shadow: 3px 3px 5px rgb(0 0 0 / 0.4);
        opacity: 0; visibility: hidden; translate: 0 6px;
        transition: opacity 0.25s, translate 0.25s, visibility 0.25s;
        text-align: left;
    }
    .nav__item:hover > .nav__sub,
    .nav__item:focus-within > .nav__sub,
    .nav__item.is-open > .nav__sub { opacity: 1; visibility: visible; translate: 0 0; }
    .nav__sub .nav__item { position: relative; display: flex; align-items: center; }
    .nav__sub .nav__link { flex: 1; padding: 0.6rem 0.9rem; font-size: 1.08rem; }
    .nav__sub .nav__item:hover > .nav__link,
    .nav__sub .nav__item:focus-within > .nav__link,
    .nav__sub .nav__item.is-current > .nav__link {
        background-color: var(--c-gold); background-image: var(--gold-texture); background-size: 100% 100%;
        color: var(--c-ink);
    }
    .nav__sub .nav__toggle { padding: 0 0.6rem; rotate: -90deg; }
    .nav__sub--l3 { top: -2px; left: 100%; }
}

/* Mobil-/Tablet-Menü */
@media (max-width: 1024px) {
    :root { --bottom-bar: 64px; }
    .logobar { justify-content: flex-start; padding-right: calc(var(--gutter) + 60px); }
    .logobar__logo img { max-width: 100%; }
    .menu-button { display: grid; place-items: center; }

    .navbar {
        display: none;
        max-height: calc(100dvh - 140px);
        overflow-y: auto;
        overscroll-behavior: contain;
        border-top: 1px solid rgb(0 0 0 / 0.1);
    }
    .navbar.is-open { display: block; }
    .nav { padding: 0.5rem 0 1rem; }
    .nav__item { display: grid; grid-template-columns: 1fr auto; align-items: center; }
    .nav__link { padding: 0.7rem var(--gutter); font-size: 1.35rem; }
    .nav__item--l1 > .nav__link:hover { color: var(--c-ink); } /* Hauptpunkte liegen mobil auf Gold */
    .nav__toggle { width: 56px; height: 48px; display: grid; place-items: center; margin-right: calc(var(--gutter) - 12px); }
    .nav__toggle .icon { width: 28px; height: 28px; }
    .nav__toggle[aria-expanded="true"] .icon { rotate: 180deg; }
    .nav__item.is-current > .nav__link { text-decoration: underline; text-decoration-color: #fff; text-decoration-thickness: 2px; }
    .nav__sub { display: none; grid-column: 1 / -1; background: #fff; }
    .nav__item.is-open > .nav__sub { display: block; }
    .nav__sub .nav__link { font-size: 1.15rem; padding-left: calc(var(--gutter) + 1rem); }
    .nav__sub--l3 { background: var(--c-bg); }
    .nav__sub--l3 .nav__link { padding-left: calc(var(--gutter) + 2rem); }
}

/* 6. Fußzeile & Schnellkontakt ============================================ */
.site-footer { color: var(--c-ink); font-size: 0.95rem; }
.site-footer__inner {
    width: min(100% - 2 * var(--gutter), var(--container));
    margin-inline: auto;
    display: flex; gap: 2rem; align-items: center;
    padding-block: 1.5rem;
}
.site-footer__logo { flex: none; }
.site-footer__logo img { width: 130px; }
.site-footer__content { flex: 1; display: grid; gap: 1rem; }
.site-footer__contact {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; justify-content: space-around; gap: 0.75rem 2rem;
    font-weight: 700;
}
.site-footer__contact li { display: flex; align-items: center; gap: 0.5rem; }
.site-footer a { color: var(--c-ink); transition: color 0.3s; }
.site-footer a:hover { color: #fff; }
.site-footer__legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 1.25rem; font-size: 0.85rem; }
.site-footer__copy { text-align: center; font-size: 0.8rem; opacity: 0.8; margin: 0; }
@media (max-width: 700px) {
    .site-footer__inner { flex-direction: column; text-align: center; }
    .site-footer__contact { flex-direction: column; align-items: center; }
}

/* Schnellkontakt: Desktop = ausfahrende Buttons rechts */
.quick-contact ul { list-style: none; margin: 0; padding: 0; }
.quick-contact__item {
    display: flex; align-items: center; gap: 0.9rem;
    color: #fff; text-decoration: none;
}
.quick-contact__title { display: block; font-size: 0.85rem; }
.quick-contact__text { display: block; color: var(--c-ink); text-decoration: underline; font-size: 0.95rem; }
.quick-contact__short { display: none; }

@media (min-width: 1025px) {
    .quick-contact {
        position: fixed; right: 0; top: 50%; translate: 0 -50%; z-index: 40;
    }
    .quick-contact li + li { margin-top: 0.6rem; }
    .quick-contact__item {
        width: 280px; padding: 0.9rem 1.1rem;
        border-radius: 10px 0 0 10px;
        box-shadow: 3px 3px 5px rgb(0 0 0 / 0.45);
        translate: 222px 0;
        transition: translate 0.45s, background 0.45s, color 0.45s;
    }
    .quick-contact__item .icon { width: 24px; height: 24px; color: #fff; }
    .quick-contact__item:hover, .quick-contact__item:focus-visible {
        translate: 0 0; background: #fff; color: var(--c-ink);
    }
    .quick-contact__item:hover .icon, .quick-contact__item:focus-visible .icon { color: var(--c-gold-dark); }
}
/* Mobil/Tablet = feste Leiste unten */
@media (max-width: 1024px) {
    .quick-contact {
        position: fixed; inset: auto 0 0 0; z-index: 40;
        box-shadow: 0 -2px 8px rgb(0 0 0 / 0.3);
    }
    .quick-contact ul { display: flex; }
    .quick-contact li { flex: 1; }
    .quick-contact li + li { border-left: 1px solid rgb(255 255 255 / 0.45); }
    .quick-contact__item {
        flex-direction: column; justify-content: center; gap: 0.1rem;
        height: var(--bottom-bar);
        padding-bottom: env(safe-area-inset-bottom);
        color: var(--c-ink); font-size: 0.8rem; font-weight: 700;
    }
    .quick-contact__item .icon { width: 24px; height: 24px; }
    .quick-contact__short { display: block; }
    .quick-contact__long { display: none; }
}

/* 7. Bausteine ============================================================ */

/* Buttons */
.button, button.button, input[type="submit"] {
    display: inline-block;
    padding: 0.55rem 1.1rem;
    font: inherit; font-size: 1rem; font-variant-caps: small-caps; letter-spacing: 0.03em;
    color: #fff; text-decoration: none; text-align: center;
    background-color: var(--c-gold); background-image: var(--gold-texture); background-size: 100% 100%;
    border: 0; border-radius: 5px;
    box-shadow: var(--shadow-button);
    cursor: pointer;
    transition: background-color 0.4s, color 0.4s, box-shadow 0.4s;
}
.button:hover, button.button:hover, input[type="submit"]:hover {
    background: #fff; color: var(--c-text); box-shadow: 0 0 8px var(--c-gold);
}
.button--ghost { background: #fff; color: var(--c-text); }
.button--ghost:hover { background-color: var(--c-gold); background-image: var(--gold-texture); color: #fff; }
.button[disabled], button.button:disabled { opacity: 0.45; cursor: not-allowed; }
.cta { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; margin-top: 1.5rem; }
.cta.is-centered { justify-content: center; }

/* Hero / Titelbild */
.hero__frame {
    position: relative; overflow: hidden;
    border-radius: var(--radius);
    background: #ddd;
    aspect-ratio: 16 / 7;
}
.hero--s .hero__frame { aspect-ratio: 16 / 5; }
.hero--l .hero__frame { aspect-ratio: 16 / 9; }
.hero__img { width: 100%; height: 100%; object-fit: cover; }
.hero__caption {
    position: absolute; inset: auto 0 0 0;
    padding: clamp(1rem, 4vw, 3rem) var(--gutter);
    text-align: center;
    background: linear-gradient(to top, rgb(255 255 255 / 0.85), rgb(255 255 255 / 0));
}
.hero--dark .hero__caption { background: linear-gradient(to top, rgb(0 0 0 / 0.55), transparent); }
.hero--dark .hero__title, .hero--dark .hero__text { color: #fff; }
.hero__title { margin: 0; }
.hero__text { margin: 0.5rem auto 0; max-width: 60ch; }
@media (max-width: 700px) {
    .hero__frame, .hero--s .hero__frame, .hero--l .hero__frame { aspect-ratio: 4 / 3; }
}
/* Überschrift links auf freier Bildfläche (z. B. the skin concept®) */
@media (min-width: 701px) {
    .hero--left .hero__caption {
        inset: 0 auto 0 0; width: 45%;
        display: flex; flex-direction: column; justify-content: center;
        text-align: left; background: none;
        padding-left: clamp(1.5rem, 5vw, 4rem);
    }
}
.hero--bronze .hero__frame { background: #fff; }
.hero--bronze .hero__title {
    color: #ccc; font-weight: 900; font-size: clamp(2rem, 5vw, 4rem); letter-spacing: 0.02em;
    text-shadow: 2px 2px rgb(139 101 77), 2px 2px 5px rgb(139 101 77);
}

/* Video Startseite */
.hero-video {
    position: relative; overflow: hidden;
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    background: #e9e9e9;
    aspect-ratio: 16 / 9;
}
.hero-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-video__claim {
    position: absolute; left: 50%; bottom: 8%; translate: -50% 0;
    margin: 0; padding: 0.8rem 1.4rem;
    background: rgb(255 255 255 / 0.55); border-radius: 10px;
    font-size: var(--fs-h3); text-align: center; width: max-content; max-width: 90%;
}

/* Bild + Text */
.media { display: grid; gap: var(--space); align-items: center; }
.media + .media { margin-top: calc(var(--space) * 1.5); }
.media__figure { margin: 0; }
.media__img { width: 100%; border-radius: 10px; box-shadow: 5px 5px 25px rgb(0 0 0 / 0.25); }
.media__figure.is-contain .media__img { box-shadow: none; border-radius: 0; max-height: 520px; width: auto; margin-inline: auto; }
.media__figure figcaption { font-size: var(--fs-small); color: var(--c-muted); text-align: center; margin-top: 0.4rem; }
.media__title { margin-bottom: 0.3em; }
.media__subtitle { font-weight: 700; margin-bottom: 0.8em; }
.media__body > * + * { margin-top: 1rem; }
@media (min-width: 900px) {
    .media { grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); }
    .media--narrow { grid-template-columns: 2fr 3fr; }
    .media--reverse .media__figure { order: 2; }
    .media--reverse.media--narrow { grid-template-columns: 3fr 2fr; }
}

/* Listen */
.list { margin: 0; padding: 0; list-style: none; }
.list li { position: relative; padding-left: 1.5em; margin-bottom: 0.5em; }
.list--dot li::before {
    content: ""; position: absolute; left: 0.2em; top: 0.55em;
    width: 0.55em; height: 0.55em; border-radius: 50%;
    background-color: var(--c-gold); background-image: var(--gold-texture); background-size: 400%;
}
.list--check li::before {
    content: "✓"; position: absolute; left: 0; color: var(--c-gold-dark); font-weight: 700;
}
.list--plain li { padding-left: 0; }
ol.list--numbered { counter-reset: n; }
.list--numbered li { counter-increment: n; padding-left: 2em; }
.list--numbered li::before {
    content: counter(n); position: absolute; left: 0; top: 0.1em;
    width: 1.5em; height: 1.5em; border-radius: 50%; display: grid; place-items: center;
    font-size: 0.8em; color: #fff;
    background-color: var(--c-gold); background-image: var(--gold-texture); background-size: 400%;
}
@media (min-width: 700px) {
    .list--cols-2 { columns: 2; column-gap: 2.5rem; }
    .list--cols-3 { columns: 3; column-gap: 2rem; }
    .list[class*="list--cols-"] li { break-inside: avoid; }
}

/* Karten / Kacheln */
.cards {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: clamp(1.25rem, 3vw, 2.5rem);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    justify-content: center;
}
@media (min-width: 900px) {
    .cards { grid-template-columns: repeat(auto-fit, minmax(300px, 400px)); }
}
.card {
    display: flex; flex-direction: column;
    background: #fff;
    border-radius: 10px;
    box-shadow: var(--shadow-soft);
    padding: 10px;
    text-align: center;
}
.card.is-inactive { outline: 2px dashed var(--c-muted); }
.card__media { aspect-ratio: 1; overflow: hidden; border-radius: 4px; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: scale 0.6s; }
.card:hover .card__media img { scale: 1.04; }
.card__body { flex: 1; padding: 0.8rem 0.5rem 0.4rem; }
.card__title { font-size: 1.1rem; font-weight: 700; font-variant-caps: normal; margin-bottom: 0.4em; }
.card__text { font-size: 0.95rem; margin: 0; }
.card__price { margin-top: 0.6rem; }
.card__link { align-self: center; margin: 0.75rem 0 0.6rem; }

/* Akkordeon */
.accordion__heading {
    background: var(--c-accordion); color: var(--c-ink);
    font-size: 1.4rem; font-weight: 400; text-align: left;
    padding: 1rem 1.1rem; border-radius: 4px; margin: 0 0 1px;
}
.accordion__item + .accordion__item { margin-top: 1px; }
.accordion__summary {
    display: flex; align-items: center; gap: 0.75rem;
    list-style: none; cursor: pointer;
    background: var(--c-accordion); color: var(--c-accordion-text);
    padding: 0.95rem 1.1rem; border-radius: 4px;
    font-size: 1.3rem; font-weight: 700; font-variant-caps: small-caps;
    transition: background-color 0.3s;
}
.accordion__summary::-webkit-details-marker { display: none; }
.accordion__summary:hover, .accordion__item[open] > .accordion__summary { background: var(--c-accordion-hover); }
.accordion__dot {
    flex: none; width: 30px; height: 30px; border-radius: 50%;
    background-color: #8b654d; background-image: var(--gold-texture); background-size: 400%;
    transition: rotate 0.4s;
}
.accordion__item[open] .accordion__dot { rotate: 90deg; }
.accordion__panel { padding: 1.5rem clamp(0.25rem, 2vw, 1.75rem) 2rem; }
.accordion__panel > * + * { margin-top: 1.5rem; }
@media (max-width: 600px) {
    .accordion__summary { font-size: 1.1rem; padding: 0.8rem; }
    .accordion__heading { font-size: 1.15rem; }
    .accordion__dot { width: 22px; height: 22px; }
}

/* Preise */
.prices { max-width: 760px; }
.is-centered .prices, .section.is-centered .prices { margin-inline: auto; text-align: left; }
.prices + .prices { margin-top: 2rem; }
.prices__title { margin-bottom: 1em; font-variant-caps: small-caps; font-weight: bolder;}
.prices__intro { color: var(--c-muted); margin-bottom: 0.7em; }
.prices__list { margin: 0; }
.prices__row {
    display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem 1.5rem;
    padding: 0.65rem 0;
    border-bottom: 1px dotted #c9c3c9;
}
.prices__row:last-child { border-bottom: 0; }
.prices__label { font-weight: normal; margin: 0; }
.prices__desc { display: block; font-weight: 400; font-size: 0.9em; color: var(--c-muted); margin-top: 0.15rem; }
.prices__value { margin: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 0.2rem 1rem; text-align: right; white-space: nowrap; }
.prices__duration { color: var(--c-muted); font-size: 0.9em; display: inline-flex; gap: 0.3rem; align-items: center; }
.prices__duration .icon { width: 1em; height: 1em; }
.prices__regular { color: var(--c-muted); font-size: 0.9em; }
.prices__amount { font-weight: 700; color: var(--c-gold-dark); min-width: 5ch; }
.prices__note, .prices__footnote { font-size: var(--fs-small); color: var(--c-muted); margin-top: 0.6rem; }
.prices--compact .prices__row { padding: 0.4rem 0; }
@media (max-width: 520px) {
    .prices__row { flex-direction: column; align-items: stretch; gap: 0.2rem; }
    .prices__value { justify-content: space-between; }
}

.pricelist-toc { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-bottom: 2rem; }
.pricelist-toc a {
    text-decoration: none; padding: 0.3rem 0.8rem; border-radius: 999px;
    border: 1px solid var(--c-gold); font-size: 0.95rem;
}
.pricelist-toc a:hover { background: var(--c-gold); color: #fff; }
.pricelist-section { padding-top: 1.5rem; border-top: 1px solid var(--c-line); margin-top: 2rem; }
.pricelist-section__title { text-align: left; }
.pricelist-section__title a { text-decoration: none; }

/* Vorher / Nachher */
.before-after {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 1.5rem 2.5rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    justify-items: center;
}
.before-after__title, .clip__title { font-size: 1.05rem; font-weight: 700; font-variant-caps: normal; text-align: center; margin-bottom: 0.5rem; }
.before-after__pair { display: flex; gap: 0.75rem; justify-content: center; }
.before-after figure { margin: 0; text-align: center; }
.before-after img {
    width: clamp(110px, 32vw, 160px); aspect-ratio: 1; object-fit: cover;
    border-radius: 50%;
    box-shadow: 5px 5px 12px rgb(0 0 0 / 0.2);
    transition: box-shadow 0.4s, scale 0.4s;
}
/* Lupe: Vergrößerung per scale verschiebt nichts im Layout; nur mit echter Maus (nicht auf Touch) */
@media (hover: hover) and (pointer: fine) {
    .before-after img { position: relative; }
    .before-after img:hover { scale: 3; z-index: 10; box-shadow: 8px 8px 30px rgb(0 0 0 / 0.35); }
}
.before-after figcaption { font-size: 0.85rem; color: var(--c-muted); margin-top: 0.3rem; }

/* Eigenes Video */
.clip { margin: 0 0 1.5rem; }
.clip__video {
    display: block; width: 100%; aspect-ratio: 16 / 9; background: #000;
    border-radius: var(--radius); box-shadow: var(--shadow-soft);
}

/* Galerie */
.gallery {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 0.5rem;
    grid-template-columns: repeat(auto-fill, minmax(min(30%, 140px), 1fr));
}
.gallery__link { display: block; border-radius: 4px; overflow: hidden; }
.gallery__link img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: scale 0.4s; }
.gallery__link:hover img { scale: 1.06; }

/* Lightbox */
.lightbox {
    border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh;
    width: 100vw; height: 100dvh;
}
.lightbox::backdrop { background: rgb(20 14 20 / 0.9); }
.lightbox__figure { margin: 0; height: 100%; display: grid; place-items: center; align-content: center; padding: 3.5rem 1rem 1rem; }
.lightbox__img { max-width: min(92vw, 1400px); max-height: 80dvh; width: auto; object-fit: contain; border-radius: 4px; }
.lightbox__caption { color: #fff; text-align: center; margin-top: 0.8rem; }
.lightbox__btn {
    position: absolute; border: 0; cursor: pointer;
    width: 48px; height: 48px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgb(255 255 255 / 0.9); color: var(--c-ink);
}
.lightbox__btn .icon { width: 28px; height: 28px; }
.lightbox__close { top: 1rem; right: 1rem; }
.lightbox__prev { left: 1rem; top: 50%; translate: 0 -50%; }
.lightbox__next { right: 1rem; top: 50%; translate: 0 -50%; }

/* YouTube (erst nach Klick) */
.video-embed {
    position: relative; aspect-ratio: 16 / 9; max-width: 720px; margin-inline: auto;
    border-radius: 10px; overflow: hidden; background: #2b2330;
}
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-embed__placeholder {
    position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 1rem;
    padding: 1rem; text-align: center; color: #fff;
}
.video-embed__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.45; }
.video-embed__play {
    position: relative; display: inline-flex; align-items: center; gap: 0.5rem;
    font: inherit; font-variant-caps: small-caps; font-size: 1.1rem;
    border: 0; border-radius: 999px; padding: 0.7rem 1.4rem; cursor: pointer;
    color: #fff; background-color: var(--c-gold); background-image: var(--gold-texture); background-size: 100% 100%;
}
.video-embed__consent { position: relative; font-size: 0.8rem; max-width: 52ch; margin: 0; opacity: 0.9; }
.video-embed__consent a { color: #fff; }

/* Tabs */
.tabs__list { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 1.5rem; }
.tabs__tab {
    font: inherit; font-size: 1rem; cursor: pointer;
    padding: 0.45rem 0.9rem; border-radius: 5px;
    border: 1px solid var(--c-gold); background: #fff; color: var(--c-text);
    transition: background-color 0.3s, color 0.3s;
}
.tabs__tab:hover, .tabs__tab[aria-selected="true"] {
    color: #fff; background-color: var(--c-gold); background-image: var(--gold-texture); background-size: 100% 100%;
}
.tabs__panel { display: grid; gap: 1rem 2rem; grid-template-columns: 1fr; }
.tabs__panel + .tabs__panel { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--c-line); }
.tabs.is-enhanced .tabs__panel { margin: 0; padding: 0; border: 0; }
.tabs.is-enhanced .tabs__panel[hidden] { display: none; }
.tabs__panel h3 { margin: 0; }
.tabs__img { width: 200px; }
@media (min-width: 700px) {
    .tabs__panel { grid-template-columns: 200px 1fr; }
    .tabs__panel h3 { grid-column: 1 / -1; }
}

/* Tabs seitlich: Liste links, großes Bild rechts (the skin concept®) */
.tabs--side .tabs__panel { grid-template-columns: 1fr; }
.tabs--side .tabs__img { width: 100%; height: auto; aspect-ratio: 87 / 36; object-fit: cover; object-position: center 70%; } /* leeren Rand oben der Produktbilder ausblenden */
.tabs--side.is-enhanced .tabs__panel:not([hidden]) { animation: tabs-in 0.8s ease both; }
@keyframes tabs-in {
    from { opacity: 0; translate: -30px 0; }
    to   { opacity: 1; translate: 0 0; }
}
@media (max-width: 899px) {
    .tabs--side .tabs__img { aspect-ratio: 1; max-width: 380px; margin-inline: auto; }
}
@media (min-width: 900px) {
    .tabs--side.is-enhanced {
        display: grid; grid-template-columns: minmax(200px, 28%) 1fr;
        gap: 0 2.5rem; align-items: start;
    }
    .tabs--side .tabs__list {
        flex-direction: column; flex-wrap: nowrap; gap: 0; margin: 0;
        border-right: 1px solid var(--c-gold);
    }
    .tabs--side .tabs__tab {
        text-align: right; font-size: 1.3rem; padding: 0.55rem 1.1rem;
        border: 0; border-radius: 5px 0 0 5px; background-color: transparent;
        transition: background-color 0.5s, color 0.5s;
    }
    .tabs--side .tabs__tab:hover, .tabs--side .tabs__tab[aria-selected="true"] {
        color: #fff; background-color: var(--c-gold); background-image: var(--gold-texture); background-size: 100% 100%;
    }
    .tabs--side .tabs__panel h3 { font-size: var(--fs-h2); }
}

/* Zitat / Unterschrift */
.quote { font-family: var(--font-script); font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.2rem); line-height: 1.3; text-align: center; }
.quote--signature { font-family: var(--font-signature); color: var(--c-gold-dark); font-size: 2rem; }

/* Hinweise */
.notice { font-size: var(--fs-small); font-style: italic; color: var(--c-muted); }
.notice--box {
    font-style: normal; color: var(--c-text);
    background: #faf6ec; border-left: 4px solid var(--c-gold); padding: 0.8rem 1rem; border-radius: 4px;
}
.fallback-notice {
    display: flex; gap: 0.5rem; align-items: center; justify-content: center;
    font-size: 0.9rem; color: var(--c-muted); margin: 0 auto;
}

/* Kontaktinfo */
.contact-info { text-align: center; }
.contact-info__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; justify-content: center; }
.contact-info__list li { display: flex; align-items: center; gap: 0.6rem; }
.contact-info__list .icon { color: var(--c-gold-dark); }

/* 8. Formulare ============================================================ */
.form { max-width: 720px; margin-inline: auto; display: grid; gap: 1.2rem; }
.form__intro { max-width: 720px; margin: 0 auto 2rem; text-align: center; }
.form__group { display: grid; gap: 0.35rem; }
.form__label { font-weight: 700; }
.form__label small { font-weight: 400; color: var(--c-muted); }
.form__hint { font-size: var(--fs-small); color: var(--c-muted); }
.form__error { color: var(--c-error); font-size: var(--fs-small); }
.form__actions { text-align: center; margin-top: 0.5rem; }
.form-alert { max-width: 720px; margin: 0 auto 1.5rem; padding: 0.9rem 1.1rem; border-radius: 6px; }
.form-alert--error { background: #fbeceb; color: var(--c-error); border-left: 4px solid var(--c-error); }
.form-success { text-align: center; }
.form-success .icon { width: 56px; height: 56px; color: var(--c-success); margin: 0 auto 0.5rem; display: block; }

.input, .form input[type="text"], .form input[type="email"], .form input[type="tel"], .form input[type="date"],
.form select, .form textarea {
    width: 100%;
    font: inherit; font-size: 1rem; color: var(--c-text);
    padding: 0.75rem 1.1rem;
    border: 1px solid #ccc; border-radius: 20px;
    background: #fff;
    box-shadow: 1px 1px 6px rgb(0 0 0 / 0.18);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.form textarea { min-height: 220px; resize: vertical; border-radius: 16px; }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--c-gold); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-gold) 35%, transparent); }
.form [aria-invalid="true"] { border-color: var(--c-error); }
.form fieldset { border: 0; padding: 0; margin: 0; }
.form legend { font-weight: 700; margin-bottom: 0.5rem; padding: 0; }

/* Checkbox & Radio – große Klickflächen */
.check { display: flex; gap: 0.7rem; align-items: flex-start; cursor: pointer; line-height: 1.4; }
.check input { flex: none; width: 1.3rem; height: 1.3rem; margin: 0.1rem 0 0; accent-color: var(--c-text); }
.check-list { display: grid; gap: 0.6rem; }

.choice-grid { display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.choice {
    position: relative; display: flex; align-items: center; gap: 0.8rem;
    padding: 0.8rem 1rem; min-height: 64px;
    background: #fff; border: 2px solid #fff; border-radius: 8px;
    box-shadow: 2px 2px 6px rgb(0 0 0 / 0.25);
    cursor: pointer; text-align: left; font: inherit; color: inherit;
    transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice:hover { background-color: var(--c-gold); background-image: var(--gold-texture); background-size: 100% 100%; color: #fff; }
.choice:has(input:checked) { border-color: var(--c-text); background-color: #f4ecd9; }
.choice:has(input:focus-visible) { outline: 3px solid var(--c-gold); outline-offset: 2px; }
.choice img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; flex: none; }
.choice__sub { display: block; font-size: 0.85rem; opacity: 0.85; }
.choice-summary { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-bottom: 1.5rem; }
.choice-summary .choice { cursor: default; min-height: 0; }
.choice-summary .choice:hover { background: #fff; color: inherit; }

.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Wizard (Hautanalyse) */
.wizard__progress { height: 8px; background: var(--c-line); border-radius: 4px; overflow: hidden; margin-bottom: 0.5rem; }
.wizard__bar { height: 100%; width: 0; background-color: var(--c-gold); background-image: var(--gold-texture); transition: width 0.4s; }
.wizard__status { text-align: center; font-size: 0.9rem; color: var(--c-muted); margin-bottom: 1.5rem; }
.wizard__step { border: 0; margin: 0; padding: 0; }
.wizard__step > legend, .wizard__question {
    display: block; width: 100%; text-align: center;
    font-size: 1.2rem; font-variant-caps: small-caps; margin-bottom: 1.2rem;
}
.wizard.is-enhanced .wizard__step:not(.is-active) { display: none; }
.wizard:not(.is-enhanced) .wizard__step + .wizard__step { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--c-line); }
.wizard__nav { display: flex; justify-content: center; gap: 1rem; margin-top: 2rem; }
.wizard:not(.is-enhanced) .wizard__nav [data-wizard-prev],
.wizard:not(.is-enhanced) .wizard__nav [data-wizard-next] { display: none; }
.wizard__groups { display: grid; gap: 1.5rem 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.wizard__groups h3 { font-size: 1.05rem; }

/* Terminplaner */
.slots { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.slots__day h3 { font-size: 1rem; font-variant-caps: normal; font-weight: 700; text-align: center; margin-bottom: 0.5rem; }
.slots__times { display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: center; }
.slot {
    font: inherit; font-size: 0.9rem; padding: 0.35rem 0.55rem; cursor: pointer;
    border: 1px solid var(--c-gold); border-radius: 5px; background: #fff; color: var(--c-text);
}
.slot:hover { background: var(--c-gold); color: #fff; }
.slot:disabled { border-color: var(--c-line); color: #b9b3b9; cursor: not-allowed; background: #fafafa; text-decoration: line-through; }
.form-row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }

/* 9. Hilfsklassen ========================================================= */
.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.text-center { text-align: center; }

/* 10. Druck ================================================================ */
@media print {
    .site-header, .site-footer, .quick-contact, .cta, .video-embed, .lightbox { display: none !important; }
    body { background: #fff; padding: 0; font-size: 11pt; }
    .section--card .section__inner { box-shadow: none; padding: 0; }
    .accordion__panel { display: block !important; }
    details > :not(summary) { display: block; }
    a { text-decoration: none; }
}

/* Produktangaben (the skin concept) */
.product-meta { font-size: var(--fs-small); color: var(--c-muted); margin-bottom: 0.3em; }
.pricelist-section .prices { margin-inline: auto; }
.pricelist-section__title { text-align: center; }

/* Einzelbild */
.block-image { margin: 0 auto; text-align: center; }
.block-image img { border-radius: 10px; margin-inline: auto; }
.block-image--s { max-width: 320px; }
.block-image--m { max-width: 640px; }
.block-image figcaption { font-size: var(--fs-small); color: var(--c-muted); margin-top: 0.5rem; }