/* Beauty Club Minto, Website
   Richtung: Editorial wie ein Beauty-Magazin, gebaut aus dem Salon selbst. Weisser Marmor als
   Grund, Smaragdgruen wie die Marmorwaende, Goldadern wie im Stein. Fraunces fuer grosse
   Ueberschriften mit kursiven Momenten, Manrope fuer Text, Preise und Uhrzeiten.
   Bewegung: das Schaufenster oeffnet sich, Ueberschriften steigen wortweise auf, Fotos werden
   freigelegt, Goldadern zeichnen sich in den gruenen Flaechen. Keine Boegen, kein Laufband. */

.icon { display: inline-block; width: 1em; height: 1em; fill: currentColor; vertical-align: -.125em; flex-shrink: 0; overflow: visible; }

:root {
    --cream: #FAF8F3;
    --cream-2: #F3EFE7;
    --sand: #EDE7DC;
    --sand-2: #DFD7C8;
    --taupe: #7D8783;
    --gold: #B8892A;
    --gold-dark: #85601A;
    --gold-light: #E3C77E;
    --gold-grad: linear-gradient(120deg, #94691C 0%, #C4942C 50%, #94691C 100%);
    --emerald: #0F3B33;
    --emerald-2: #15493F;
    --ink: #1C2926;
    --ink-2: #384541;
    --muted: #5B6763;
    --white: #FFFFFF;
    --paper: #FFFFFF;
    --line: rgba(184, 137, 42, 0.32);
    --shadow: 0 10px 30px -20px rgba(12, 45, 39, 0.35);
    --radius: 6px;
    --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
    --sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --header-h: 84px;
    --ease: cubic-bezier(.22, .9, .3, 1);
}

/* Schriften liegen auf dem eigenen Server (schneller, keine Daten an Google) */
@font-face {
    font-family: 'Fraunces';
    font-style: italic;
    font-weight: 400 700;
    font-display: swap;
    src: url('/fonts/fraunces-italic-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Fraunces';
    font-style: italic;
    font-weight: 400 700;
    font-display: swap;
    src: url('/fonts/fraunces-italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/fonts/fraunces-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/fonts/fraunces-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/fonts/manrope-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/fonts/manrope-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

/* overflow-x auf html: Safari schiebt sonst trotz body-Regel seitlich. */
html { overflow-x: hidden; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
/* body: clip statt hidden, hidden macht body zum Scrollcontainer, dann
   bleibt die Kopfzeile (position: sticky) nicht mehr oben stehen. */
body {
    margin: 0;
    overflow-x: clip;
    font-family: var(--sans);
    font-weight: 400;
    font-size: 17px;
    line-height: 1.7;
    color: var(--ink-2);
    background: var(--cream);
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--gold-light); color: var(--ink); }

.container { width: min(1200px, 100% - 48px); margin-inline: auto; }

.skip-link { position: absolute; left: 12px; top: -60px; z-index: 3000; background: var(--emerald); color: #fff; padding: 10px 16px; border-radius: 8px; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 3px; }

/* ---------- Typografie ---------- */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; line-height: 1.08; margin: 0 0 .5em; color: var(--ink); letter-spacing: -.015em; font-optical-sizing: auto; }
p { margin: 0 0 1em; }
em { font-style: italic; }

/* Kleine Ueberzeile in Versalien */
.eyebrow {
    display: inline-block;
    font-family: var(--sans); font-weight: 600; font-size: .9rem;
    letter-spacing: 0; text-transform: none; color: var(--gold-dark); margin-bottom: 12px;
}

/* Abschnittstitel gross wie im Magazin, das kursive Wort in Gold */
.section-title { font-size: clamp(2.3rem, 1.2rem + 3.6vw, 4.6rem); font-weight: 500; text-transform: none; letter-spacing: -.025em; line-height: 1; }
.section-title em { font-style: italic; font-weight: 400; color: var(--gold-dark); }
.section-title { text-wrap: balance; }

.gold-text { color: var(--gold-dark); }

.section { padding: clamp(60px, 7vw, 100px) 0; position: relative; }
.section--tint { background: linear-gradient(180deg, var(--sand), var(--cream-2)); }
.section--dark { background: var(--emerald); color: #E8ECE6; }
.section--dark .section-title, .section--dark h3 { color: #FBF8F1; }
.section--dark .section-header p { color: #B4C6BE; }
.section--dark .eyebrow { color: var(--gold-light); }
.section--dark .gold-text { color: var(--gold-light); }

.section-header { text-align: left; max-width: 900px; margin: 0 0 clamp(40px, 5vw, 72px); }
.section-header .eyebrow { justify-content: center; }
.section-header p { color: var(--muted); }

/* grosses Hintergrundwort als Magazin-Detail */
.section > .container { position: relative; z-index: 1; }

/* ---------- Knoepfe ---------- */
.btn {
    position: relative; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 50px; padding: 13px 28px; border-radius: 3px;
    font-family: var(--sans); font-weight: 600; font-size: .95rem; letter-spacing: 0; text-transform: none;
    text-decoration: none; text-align: center; white-space: normal; cursor: pointer;
    border: 1px solid transparent;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .3s ease, color .3s ease, border-color .3s ease;
}
/* Smaragd wie die Marmornischen, mit feiner Goldkante */
.btn-dark {
    background: var(--emerald-2); color: #F7F1E3;
    box-shadow: none;
}
.btn-dark .icon { color: var(--gold-light); }
.btn-dark:hover { background: var(--emerald); color: #fff; }
.btn-gold { background: var(--gold-grad); background-size: 200% 100%; color: #2B1F14; box-shadow: 0 14px 30px -14px rgba(120, 86, 20, .8); }
.btn-gold:hover { transform: translateY(-2px); background-position: 100% 0; }
.btn-outline { background: rgba(255, 255, 255, .6); color: var(--ink); border-color: rgba(15, 59, 51, .35); backdrop-filter: blur(6px); }
.btn-outline .icon { color: var(--gold-dark); }
.btn-outline:hover { background: var(--emerald-2); color: #fff; border-color: var(--emerald-2); }
.btn-outline:hover .icon { color: var(--gold-light); }
.btn-outline--light { background: transparent; color: var(--gold-light); border-color: rgba(227, 199, 126, .5); }
.btn-outline--light .icon { color: inherit; }
.btn-outline--light:hover { background: var(--gold-light); color: var(--emerald); border-color: var(--gold-light); }
.btn-small { min-height: 44px; padding: 9px 20px; font-size: .9rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.center-cta { text-align: center; margin-top: 52px; }


/* ---------- Top bar & Header ---------- */
.top-bar { background: var(--sand); color: var(--ink-2); font-size: .86rem; font-weight: 500; }
.top-bar .container { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.top-bar .icon { color: var(--gold-dark); margin-right: 7px; }
.top-bar-text { display: inline-flex; align-items: center; }
.top-bar-right { display: flex; gap: 22px; }
.top-bar a { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.top-bar a:hover { color: var(--gold-dark); }
.top-bar-social { min-width: 44px; justify-content: center; }
.top-bar-social .icon { margin: 0; font-size: 1rem; }

.site-header {
    position: sticky; top: 0; z-index: 900;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
    border-bottom: 1px solid transparent;
    transition: box-shadow .3s ease, border-color .3s ease, background-color .3s ease;
}
.site-header.scrolled { box-shadow: 0 12px 30px -24px rgba(16, 44, 38, .55); border-color: var(--line); background: rgba(255, 255, 255, .95); }
.main-nav { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); }
.logo { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; color: var(--ink); transform-origin: left center; transition: transform .3s var(--ease); }
.logo img { height: 56px; width: auto; }
.logo-text { display: flex; flex-direction: column; line-height: 1.05; }
.logo-name { font-family: var(--serif); font-weight: 600; font-size: 1.28rem; letter-spacing: .06em; text-transform: uppercase; font-variation-settings: "opsz" 24; }
.logo-place { font-family: var(--sans); font-weight: 600; font-size: .8rem; color: var(--gold-dark); margin-top: 3px; }
.site-header.scrolled .logo { transform: scale(.9); }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a:not(.btn) { text-decoration: none; font-weight: 600; font-size: .95rem; position: relative; padding: 12px 0; color: var(--ink); }
.nav-links a:not(.btn):hover, .nav-links a.is-current { color: var(--gold-dark); }

.menu-toggle {
    display: none; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line);
    background: var(--white); cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.menu-toggle span { display: block; width: 20px; height: 1.5px; background: var(--ink); border-radius: 2px; }
.menu-toggle span:nth-child(2) { width: 14px; margin-left: 6px; }

.nav-overlay { position: fixed; inset: 0; z-index: 1050; background: rgba(12, 45, 39, .45); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; }
.nav-overlay.active { opacity: 1; visibility: visible; }
/* translateX statt right:-320px, sonst laesst sich die Seite seitlich schieben. */
.mobile-nav {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 1100; width: min(340px, 88vw);
    background: var(--cream); padding: 76px 28px calc(28px + env(safe-area-inset-bottom));
    display: flex; flex-direction: column; gap: 2px;
    transform: translateX(105%); transition: transform .45s var(--ease);
    box-shadow: -20px 0 40px -20px rgba(16, 44, 38, .4); overflow-y: auto;
}
.mobile-nav.active { transform: translateX(0); }
.mobile-nav-logo { width: 84px; height: auto; margin: 0 0 18px; }
.mobile-nav a { text-decoration: none; font-family: var(--sans); font-weight: 600; font-size: 1.1rem; padding: 10px 0; border-bottom: 1px solid var(--line); min-height: 44px; display: flex; align-items: center; }
.mobile-nav a[aria-current="page"] { color: var(--gold-dark); }
.mobile-nav-close { position: absolute; top: 16px; right: 16px; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); cursor: pointer; font-size: 1.1rem; }
.mobile-nav .mobile-booking-item, .mobile-nav .mobile-phone-item { font-family: var(--sans); font-size: .95rem; font-weight: 600; border: 0; margin-top: 14px; padding: 14px 18px; border-radius: 3px; justify-content: center; gap: 8px; }
.mobile-booking-item { background: var(--emerald-2); color: #F7F1E3; }
.mobile-booking-item .icon { color: var(--gold-light); }
.mobile-phone-item { background: var(--white); color: var(--ink); border: 1px solid rgba(15, 59, 51, .3) !important; }
.mobile-phone-item .icon { color: var(--gold-dark); }

/* ---------- Hero: Eingangsfoto ueber die volle Breite, hell und ohne Abdunklung.
   Der Text steht darunter auf Creme, links der Titel, rechts Einleitung und Knoepfe. ---------- */
.hero { position: relative; background: var(--cream); }
/* Hoehe waechst mit der Breite; der Ausschnitt zeigt oben den Schriftzug BEAUTY CLUB und darunter den Salon */
.hero-media { position: relative; height: clamp(320px, 34vw, 640px); overflow: hidden; background: var(--sand-2); }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 24%; }
.hero-text {
    display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: start;
    padding: clamp(36px, 4vw, 56px) 0 clamp(20px, 3vw, 40px);
}
.hero .hero-subtitle { margin: 0; }
.hero .hero-buttons { margin: 26px 0 24px; }

/* Versalien wie auf dem Schild ueber dem Eingang, die Zeile darunter kursiv in Gold */
.hero-title { font-size: clamp(2.8rem, 1rem + 5vw, 6rem); line-height: .94; margin: 0; font-weight: 500; letter-spacing: -.035em; }
.hero-title .line { display: block; overflow: hidden; padding-bottom: .1em; }
.hero-title .line-inner { display: block; }
.hero-title .line--accent { color: var(--gold-dark); font-style: italic; font-weight: 400; padding-left: .6em; }
.hero-title em { font-style: italic; }
.hero-subtitle { font-size: 1.12rem; color: var(--muted); max-width: 540px; }
.hero-buttons { display: flex; flex-wrap: wrap; gap: 14px; margin: 32px 0 34px; }
.hero-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: .9rem; font-weight: 500; color: var(--ink-2); }
.hero-facts .icon { color: var(--gold); margin-right: 8px; }

/* Sterne: Umrisse, darueber anteilig gefuellt (4,6 von 5) */
.stars { position: relative; display: inline-block; white-space: nowrap; line-height: 1; font-size: .95rem; letter-spacing: 2px; }
.stars .icon { margin-right: 2px; }
.stars-base { color: rgba(184, 137, 42, .28); }
.stars-fill { position: absolute; left: 0; top: 0; overflow: hidden; color: var(--gold); }
.stars--light .stars-base { color: rgba(227, 199, 126, .25); }
.stars--light .stars-fill { color: var(--gold-light); }


.zoomable { cursor: zoom-in; }

/* ---------- Ueber uns: Portraet der Inhaberin ---------- */
.about-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(36px, 6vw, 96px); align-items: center; }
.about-visual { position: relative; }
.arch-photo { position: relative; margin: 0; width: min(100%, 460px); margin-inline: auto; }
.arch-photo-frame { position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); background: var(--sand); }
.arch-photo-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.about-quote { position: relative; }
.about-content p { color: var(--muted); }
.about-signature { display: flex; align-items: center; gap: 16px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); }
.about-signature > span { display: flex; flex-direction: column; line-height: 1.3; }
/* kleines Foto der Inhaberin neben ihrem Namen, rund mit Goldrand wie das Logo */
.about-avatar { width: 76px; height: 76px; flex: 0 0 auto; object-fit: cover; object-position: center 25%; border: 2px solid var(--gold); border-radius: 50%; box-shadow: 0 10px 24px -12px rgba(12, 45, 39, .55); }
.about-signature-name { font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.about-signature-role { font-size: .92rem; font-weight: 500; color: var(--muted); }

/* ---------- Zahlen ---------- */
.stats { background: var(--emerald); color: #EEF1EC; padding: clamp(48px, 6vw, 72px) 0; position: relative; overflow: hidden; }
.stats::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 120% at 50% 0%, rgba(227, 199, 126, .16), transparent 70%); }
.stats-grid { position: relative; display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 24px; text-align: center; }
.stat { display: flex; flex-direction: column; gap: 8px; padding: 0 10px; }
.stat + .stat { border-left: 1px solid rgba(227, 199, 126, .2); }
/* Zahlen in der Grotesk */
.stat-value {
    font-family: var(--sans); font-weight: 600; font-size: clamp(2.6rem, 1.6rem + 3vw, 4rem); line-height: 1;
    font-variant-numeric: lining-nums tabular-nums; color: var(--gold-light);
}
.stat-label { font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: #B4C6BE; }

/* ---------- Behandlungen: festes Bild links, Karten rechts ---------- */
.treat-split { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.treat-stage { position: sticky; top: calc(var(--header-h) + 30px); }
.treat-frame {
    position: relative; aspect-ratio: 4 / 5; overflow: hidden;
    border-radius: var(--radius); background: var(--sand-2);
}
.treat-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease; }
.treat-frame img.active { opacity: 1; }
.treat-caption { display: none; }
.treat-list { display: flex; flex-direction: column; gap: 18px; }
.treat-card {
    position: relative; background: rgba(255, 255, 255, .8); border-radius: var(--radius);
    border: 1px solid rgba(184, 137, 42, .2); padding: 28px 30px 22px;
    transition: border-color .4s ease, box-shadow .4s ease, background-color .4s ease, opacity 1s var(--ease), translate 1s var(--ease);
}
.treat-card.is-active { background: var(--paper); border-color: var(--gold-light); }
.treat-thumb { display: none; }
.treat-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 8px; }
.treat-card h3 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem); font-weight: 500; margin: 0; letter-spacing: -.02em; transition: color .4s ease, transform .5s var(--ease); }
.treat-card p { color: var(--muted); font-size: .98rem; margin: 0 0 14px; }
.treat-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.service-from { font-weight: 600; color: var(--gold-dark); font-variant-numeric: lining-nums tabular-nums; letter-spacing: .02em; }
.service-link { text-decoration: none; font-weight: 600; font-size: .92rem; color: var(--ink); min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }
.service-link .icon { color: var(--gold-dark); transition: transform .3s var(--ease); }
.service-link:hover { color: var(--gold-dark); }

/* ---------- Team: zwei Gruppenfotos nebeneinander ---------- */
.team { background: linear-gradient(180deg, var(--cream), var(--sand)); }
.team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2.4vw, 28px); }
.team-photo { position: relative; margin: 0; }
.team-photo-frame { display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); background: var(--sand-2); }
.team-photo-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.team-cta { text-align: center; margin-top: 44px; }
.team-cta .btn-row { justify-content: center; margin-top: 0; }

/* ---------- Preise ---------- */
.price-tabs, .gallery-filter {
    display: flex; flex-wrap: nowrap; gap: 4px; overflow-x: auto; scrollbar-width: none;
    border-bottom: 1px solid var(--line); margin-bottom: 34px;
}
.price-tabs::-webkit-scrollbar, .gallery-filter::-webkit-scrollbar { display: none; }
/* Reiter mit Unterstrich statt runder Chips; die aeusseren auto-Raender zentrieren die
   Leiste, solange sie passt, und lassen sie sonst links beginnen (scrollbar) */
.price-tab:first-child, .gallery-filter button:first-child { margin-left: auto; }
.price-tab:last-child, .gallery-filter button:last-child { margin-right: auto; }
.price-tab, .gallery-filter button {
    position: relative; flex: 0 0 auto; min-height: 48px; padding: 12px 18px; border: 0; border-radius: 0; background: none;
    color: var(--muted); font-family: var(--sans); font-weight: 600; font-size: .95rem; letter-spacing: 0; text-transform: none;
    white-space: nowrap; cursor: pointer; transition: color .3s ease;
}
.price-tab::after, .gallery-filter button::after {
    content: ""; position: absolute; left: 18px; right: 18px; bottom: -1px; height: 2px; background: var(--gold-dark);
    transform: scaleX(0); transition: transform .35s var(--ease);
}
.price-tab:hover, .gallery-filter button:hover { color: var(--ink); }
.price-tab.active, .gallery-filter button.active { color: var(--ink); }
.price-tab.active::after, .gallery-filter button.active::after { transform: scaleX(1); }
.price-panel {
    position: relative; background: var(--paper); border-radius: 8px; padding: clamp(26px, 4.5vw, 60px);
    border: 1px solid var(--line);
}

.price-panel-head { text-align: center; margin-bottom: 30px; }
.price-panel-head h3 { font-size: clamp(1.9rem, 1.3rem + 1.6vw, 2.8rem); font-weight: 500; font-style: italic; letter-spacing: -.02em; }
.price-note { color: var(--muted); font-size: .94rem; margin: 0; }
.price-note .icon { color: var(--gold); margin-right: 4px; }
.price-groups--multi { columns: 2 380px; column-gap: 64px; }
.price-group { break-inside: avoid; margin-bottom: 30px; }
.price-group h4 { font-family: var(--sans); font-size: 1rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--gold-dark); margin-bottom: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.price-list { list-style: none; margin: 0; padding: 0; }
.price-list li { display: flex; align-items: baseline; gap: 10px; padding: 12px 0; border-bottom: 1px dashed rgba(184, 137, 42, .22); }
.price-list li:last-child { border-bottom: 0; }
.price-name { flex: 0 1 auto; font-weight: 600; color: var(--ink); }
.price-desc { display: block; font-size: .86rem; font-weight: 400; color: var(--muted); line-height: 1.5; margin-top: 2px; }
.price-name small { display: block; font-size: .8rem; font-weight: 500; color: var(--gold-dark); letter-spacing: .02em; margin-top: 3px; font-variant-numeric: lining-nums tabular-nums; }
.price-dots { flex: 1 1 20px; min-width: 16px; }
/* Preise nie in der Serifenschrift: Mediaevalziffern sind schwer lesbar. */
.price-value { flex: 0 0 auto; font-family: var(--sans); font-weight: 600; color: var(--gold-dark); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
/* Aufpreise etwas zurueckgenommen, wie Extras auf einer Karte */
.price-group--addon { background: var(--cream); border-radius: 4px; padding: 18px 22px 8px; }
.price-group--addon h4 { border-bottom-color: rgba(184, 137, 42, .22); }
.price-group--addon .price-list li { padding: 9px 0; }
.price-group--addon .price-name { font-weight: 400; color: var(--ink-2); }
.prices-cta { text-align: center; margin-top: 40px; }
.prices-cta .btn-row { justify-content: center; }
.prices-notice { color: var(--muted); font-size: .9rem; }

/* ---------- Lookbook (Galerie) ---------- */
/* Galerie-Filter auf dunklem Grund: dieselben Reiter in hellen Farben */
.gallery-filter { margin: 22px 0 0; border-bottom-color: rgba(227, 199, 126, .25); }
.gallery-filter button { color: #A6BBB2; }
.gallery-filter button::after { background: var(--gold-light); }
.gallery-filter button:hover, .gallery-filter button.active { color: #FBF8F1; }
.lookbook { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.look-item { position: relative; padding: 0; border: 0; background: #1B4A41; overflow: hidden; border-radius: var(--radius); aspect-ratio: 3 / 4; cursor: zoom-in; }
.look-item img { width: 100%; height: 100%; object-fit: cover; }
.lookbook.is-filtered .look-item { margin-top: 0; margin-bottom: 0; }
.look-item.is-hidden { display: none; }

/* ---------- Studio ---------- */
.salon-intro { max-width: 900px; margin: 0 0 52px; text-align: left; }
.salon-intro .eyebrow { justify-content: center; }
.salon-intro p { color: var(--muted); }
.salon-mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; gap: 16px; }
.salon-tile { position: relative; padding: 0; border: 0; background: var(--sand); overflow: hidden; border-radius: var(--radius); cursor: zoom-in; }
.salon-tile img { width: 100%; height: 100%; object-fit: cover; }
.salon-tile--1 { grid-column: span 2; grid-row: span 2; }
/* bei drei Fotos fuellen die beiden kleinen die rechte Haelfte */
.salon-mosaic--3 .salon-tile--2, .salon-mosaic--3 .salon-tile--3 { grid-column: span 2; }

/* ---------- Bewertungen ---------- */
.review-band { position: relative; overflow: hidden; background: var(--emerald); color: #EEF1EC; padding: clamp(72px, 9vw, 120px) 0; text-align: center; }
/* Emblem in der Ecke, abseits des Zitats */
.review-band::after { content: ""; position: absolute; right: -70px; bottom: -70px; width: 300px; aspect-ratio: 1; background: url(/img/logo-klein.webp) center / contain no-repeat; opacity: .08; pointer-events: none; }
.review-head { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 26px; font-size: .95rem; font-weight: 600; color: var(--gold-light); }
.review-head .stars { font-size: 1.15rem; letter-spacing: 4px; }
/* Alle Zitate liegen im selben Rasterfeld: die Hoehe richtet sich nach dem laengsten, nichts springt */
.review-slider { position: relative; margin: 0 auto; max-width: 860px; display: grid; }
.review-quote { position: relative; margin: 0 0 34px; }
.js .review-quote { grid-area: 1 / 1; align-self: center; margin: 0; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .8s var(--ease), transform .8s var(--ease), visibility .8s; }
.js .review-quote.active { opacity: 1; visibility: visible; transform: none; }
.review-quote blockquote { position: relative; margin: 0 0 18px; font-family: var(--sans); font-style: italic; font-weight: 400; font-size: clamp(1.1rem, .9rem + .6vw, 1.35rem); line-height: 1.55; }
.review-quote figcaption { color: var(--gold-light); font-weight: 600; font-size: .95rem; }
.review-quote figcaption span { color: #A6BBB2; font-weight: 500; }
.review-dots { display: flex; justify-content: center; gap: 4px; margin-top: 26px; }
.review-dots button { position: relative; width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--gold-light); padding: 0; margin: 0 8px; background: transparent; cursor: pointer; transition: background-color .3s ease, transform .3s ease; }
.review-dots button::after { content: ""; position: absolute; inset: -17px; }
.review-dots button.active { background: var(--gold-light); transform: scale(1.2); }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(36px, 6vw, 90px); align-items: start; }
.faq-aside { position: sticky; top: calc(var(--header-h) + 30px); }
.faq-aside p { color: var(--muted); }
.faq-contact { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 26px; }
.faq-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 34px; align-items: center; gap: 12px; padding: 20px 4px; min-height: 64px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-q { font-weight: 600; font-size: 1.04rem; color: var(--ink); transition: color .3s ease; }
.faq-item summary:hover .faq-q, .faq-item[open] .faq-q { color: var(--gold-dark); }
.faq-item summary .icon { width: 34px; height: 34px; padding: 10px; box-sizing: border-box; border-radius: 50%; border: 1px solid var(--line); color: var(--gold-dark); vertical-align: middle; transition: transform .4s var(--ease), background-color .3s ease, color .3s ease; }
.faq-item[open] summary .icon { transform: rotate(45deg); }
.faq-answer { padding: 0 46px 22px 4px; color: var(--muted); }
.faq-answer p { margin: 0; }
.faq-link { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.faq-link:hover { color: var(--gold-dark); }
.faq-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

/* ---------- Besuch ---------- */
.visit-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 32px; align-items: stretch; }
.visit-image { position: relative; border-radius: var(--radius); }
.visit-slides { position: relative; height: 100%; min-height: 420px; border-radius: var(--radius); overflow: hidden; background: var(--sand); }
.visit-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.2s ease; }
.visit-slide.active { opacity: 1; }
.visit-slide img { width: 100%; height: 100%; object-fit: cover; }
.visit-dots { position: absolute; left: 0; right: 0; bottom: 16px; display: flex; justify-content: center; gap: 4px; }
.visit-dots button { position: relative; width: 10px; height: 10px; border-radius: 50%; border: 0; padding: 0; margin: 0 6px; background: rgba(255, 255, 255, .6); cursor: pointer; }
/* unsichtbare Trefferflaeche fuer 44px Tippziel */
.visit-dots button::after { content: ""; position: absolute; inset: -17px; }
.visit-dots button.active { background: var(--gold-light); }
.visit-info { background: var(--paper); border-radius: var(--radius); padding: clamp(28px, 4vw, 44px); border: 1px solid var(--line); position: relative; }
.visit-info h3 { font-size: clamp(1.6rem, 1.2rem + 1vw, 2.2rem); font-weight: 500; letter-spacing: -.02em; }
.contact-list { list-style: none; padding: 0; margin: 0 0 22px; }
.contact-list li { display: flex; gap: 14px; align-items: flex-start; }
.contact-list .icon { color: var(--gold); width: 18px; flex: 0 0 18px; margin-top: 15px; }
.contact-list a { display: inline-block; padding: 9px 0; min-height: 44px; text-decoration: none; overflow-wrap: anywhere; }
.contact-list strong { font-weight: 600; color: var(--ink); }
.contact-list a:hover { color: var(--gold-dark); }
.hours h4 { font-family: var(--sans); font-size: 1rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--gold-dark); }
.hours dl { margin: 0; }
.hours dl div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.hours dt { font-weight: 500; }
.hours dd { margin: 0; font-variant-numeric: lining-nums tabular-nums; text-align: right; }
.google-link { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 10px; font-weight: 600; font-size: .9rem; color: var(--ink); text-decoration: none; }
.google-link .icon { color: var(--gold-dark); }
.google-link:hover { text-decoration: underline; text-decoration-color: var(--gold); }
.google-link--light { color: var(--gold-light); margin-top: 22px; }
.google-link--light .icon { color: inherit; }
.social-row { position: relative; display: flex; gap: 12px; margin-top: 18px; }
.social-row a { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; text-decoration: none; border: 1px solid var(--line); color: var(--gold-dark); transition: background-color .3s ease, color .3s ease; }
.social-row a:hover { background: var(--emerald-2); color: #fff; }

/* ---------- Footer ---------- */
.site-footer { background: var(--emerald); color: #E8ECE6; padding: 72px 0 calc(104px + env(safe-area-inset-bottom)); font-size: .93rem; overflow: hidden; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr .8fr; gap: 36px; }
.footer-brand img { width: 110px; height: auto; margin-bottom: 18px; }
.footer-brand p { color: #B4C6BE; }
.footer-social { display: flex; gap: 10px; margin-top: 8px; }
.footer-social a { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(227, 199, 126, .3); color: var(--gold-light); text-decoration: none; transition: background-color .3s ease, color .3s ease; }
.footer-social a:hover { background: var(--gold-light); color: var(--emerald); }
.site-footer .footer-heading { font-family: var(--sans); font-size: 1rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--gold-light); margin-bottom: 12px; }
.site-footer .footer-sub { margin-top: 22px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li a { display: inline-block; padding: 10px 0; min-height: 44px; text-decoration: none; color: #E8ECE6; }
.site-footer a:hover { color: var(--gold-light); }
.footer-hours { font-variant-numeric: lining-nums tabular-nums; color: #B4C6BE; }
.footer-hours li { padding: 3px 0; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; border-top: 1px solid rgba(227, 199, 126, .2); padding-top: 16px; margin-top: 48px; color: #9FB4AB; font-size: .82rem; }
.footer-credit { color: var(--gold-light) !important; display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.site-footer a[aria-current="page"] { color: var(--gold-light); }
.nowrap { white-space: nowrap; }

/* ---------- Schwebender Buchen-Knopf ---------- */
.booking-float {
    position: fixed; right: 22px; bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 950;
    display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 12px 22px; border-radius: 3px;
    background: var(--emerald-2); color: #F7F1E3; font-weight: 600; font-size: .95rem; text-decoration: none;
    box-shadow: 0 6px 18px -8px rgba(12, 45, 39, .5); transition: transform .35s var(--ease);
}
.booking-float .icon { color: var(--gold-light); font-size: 1.1rem; }
.booking-float:hover { background: var(--emerald); }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 2000; background: rgba(7, 28, 24, .94); display: none; align-items: center; justify-content: center; padding: 20px; }
.lightbox.active { display: flex; }
.lightbox-content { max-width: 100%; max-height: 90vh; border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.lightbox-close { position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 16px; width: 50px; height: 50px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .1); color: #fff; font-size: 1.8rem; line-height: 1; cursor: pointer; }

/* ---------- Unterseiten: Seitenkopf, Brotkrumen, weitere Seiten ---------- */
.page-hero { position: relative; overflow: hidden; padding: clamp(64px, 9vw, 120px) 0 clamp(56px, 7vw, 90px); text-align: center; }
.page-hero-inner { position: relative; z-index: 2; max-width: 860px; }
.page-hero .eyebrow { justify-content: center; }
.page-title { font-size: clamp(2.6rem, 1.2rem + 4.6vw, 5.6rem); line-height: .98; margin-bottom: 22px; font-weight: 500; letter-spacing: -.03em; }
.page-title .line { display: block; overflow: hidden; padding-bottom: .08em; }
.page-title .line-inner { display: block; }
.page-hero .hero-subtitle { margin: 0 auto; }
.page-hero .hero-buttons { justify-content: center; margin-bottom: 0; }
.breadcrumb { display: flex; justify-content: center; align-items: center; gap: 10px; font-size: .9rem; color: var(--muted); margin-bottom: 18px; }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; color: var(--gold-dark); text-decoration: none; font-weight: 600; }
.breadcrumb a:hover { text-decoration: underline; }
.notfound-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }

.next-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.next-card {
    position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 130px; padding: 26px 28px;
    background: var(--paper); border-radius: var(--radius); border: 1px solid rgba(184, 137, 42, .22); text-decoration: none;
    transition: transform .4s var(--ease), box-shadow .4s ease, border-color .4s ease;
}
.next-card:hover { border-color: var(--gold); }
.next-eyebrow { font-size: .9rem; font-weight: 600; color: var(--gold-dark); }
.next-title { font-family: var(--serif); font-weight: 500; font-size: 1.6rem; line-height: 1.2; color: var(--ink); padding-right: 40px; }
.next-arrow { position: absolute; right: 22px; bottom: 22px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--sand); color: var(--gold-dark); transition: background-color .3s ease, color .3s ease, transform .4s var(--ease); }
.next-card:hover .next-arrow { background: var(--emerald-2); color: #fff; }

/* ---------- Cookie-Einwilligung (nur wenn Statistik eingetragen ist) ---------- */
.consent {
    position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 1200;
    width: min(440px, calc(100% - 32px)); background: var(--paper); border-radius: 6px; padding: 20px 22px;
    box-shadow: 0 24px 60px -20px rgba(12, 45, 39, .45); border: 1px solid var(--line); font-size: .92rem;
}
.consent p { margin: 0 0 14px; color: var(--muted); }
.consent a { color: var(--gold-dark); }
.consent-buttons { display: flex; gap: 10px; justify-content: flex-end; }
.consent-buttons .btn { width: auto; flex: 1; }

/* ============ Responsive ============ */

@media (max-width: 1160px) {
    .nav-links { gap: 18px; }
    .nav-links a:not(.btn) { font-size: .9rem; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1020px) {
    :root { --header-h: 72px; }
    .nav-links { display: none; }
    .menu-toggle { display: flex; }
    .logo img { height: 46px; }
    .logo-name { font-size: 1.05rem; }
    .site-header.scrolled .logo { transform: none; }
    .top-bar-text { display: none; }
    .top-bar .container { justify-content: center; }
    .hero { min-height: 0; }
    .about-grid, .visit-grid, .faq-grid { grid-template-columns: 1fr; }
    .hero-text { grid-template-columns: 1fr; gap: 22px; align-items: start; }
    .about-visual { max-width: 560px; width: 100%; margin: 0 auto; }
    .faq-aside { position: static; }
    /* Behandlungen: statt festem Bild bekommt jede Karte ihr Bild */
    .treat-split { grid-template-columns: 1fr; }
    .treat-stage { display: none; }
    .treat-list { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
    .treat-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; background: var(--paper); }
    .treat-thumb { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
    .treat-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
    .treat-body { padding: 22px 22px 14px; display: flex; flex-direction: column; flex: 1; }
    .treat-body p { flex: 1; }
    .lookbook { grid-template-columns: repeat(2, 1fr); }
    .salon-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
    .salon-tile--1 { grid-column: span 2; }
    .salon-mosaic--3 .salon-tile--2, .salon-mosaic--3 .salon-tile--3 { grid-column: span 1; }
    .visit-slides { min-height: 0; aspect-ratio: 4 / 3; height: auto; }
    .stats-grid:not(.stats-grid--3) { grid-template-columns: repeat(2, 1fr); row-gap: 34px; }
    .stats-grid:not(.stats-grid--3) .stat:nth-child(3) { border-left: 0; }
    .next-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
    body { font-size: 16px; }
    .container { width: min(1200px, 100% - 32px); }
    .top-bar { letter-spacing: .04em; }
    .top-bar-right { gap: 14px; font-size: .74rem; }
    .top-bar-right a:first-child { display: none; }
    .hero-title { font-size: clamp(2.6rem, 13vw, 3.6rem); }
    .hero-title .line--accent { padding-left: .4em; }
    .hero-media { height: auto; aspect-ratio: 4 / 3.3; }
    .hero-text { padding: 30px 0 48px; }
    .treat-list { grid-template-columns: 1fr; }
    .team-grid { grid-template-columns: 1fr; }
    .arch-photo { width: 86%; }
    .logo img { height: 42px; }
    .logo-name { font-size: .95rem; letter-spacing: .06em; }
    .logo-place { font-size: .74rem; }
    .lookbook { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .price-tabs { margin-inline: -16px; padding: 0 6px; }
    .price-tab, .gallery-filter button { padding: 12px 14px; }
    .price-tab::after, .gallery-filter button::after { left: 14px; right: 14px; }
    .price-panel { padding: 30px 20px; }
    .price-panel::before { inset: 8px; }
    .price-groups--multi { columns: 1; }
    .price-dots { display: none; }
    .price-list li { justify-content: space-between; }
    .price-group--addon { padding: 14px 16px 4px; }
    .salon-mosaic { grid-auto-rows: 130px; gap: 10px; }
    .faq-item summary { gap: 8px; }
    .faq-answer { padding: 0 8px 20px 4px; }
    .footer-grid { grid-template-columns: 1fr; gap: 26px; }
    .booking-float { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); padding: 12px 20px; }
    .btn, .btn-row .btn, .hero-buttons .btn, .faq-contact .btn { width: 100%; }
    .faq-actions .btn { width: auto; flex: 1 1 140px; }
    .notfound-links .btn { width: auto; }
    .site-footer li a { min-width: 44px; }
    .stat-label { font-size: .7rem; letter-spacing: .12em; }
    /* drei Kennzahlen untereinander, getrennt von feinen Linien */
    .stats-grid--3 { grid-template-columns: 1fr; row-gap: 22px; }
    .stats-grid--3 .stat + .stat { border-left: 0; border-top: 1px solid rgba(227, 199, 126, .2); padding-top: 22px; }
    .review-band::after { display: none; }
    /* lange Namen in Versalien passen nicht in eine Handyzeile: dort am Bindestrich umbrechen lassen */
    .section-title .nowrap, .section-title em { white-space: normal; }
    .next-grid { grid-template-columns: 1fr; }
    .next-card { min-height: 0; padding: 22px; }
    .breadcrumb { margin-bottom: 6px; }
    .page-title { font-size: clamp(2.4rem, 11vw, 3.2rem); }
}


@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .js .review-quote { transition: none; }
}

/* Salon und FAQ stehen auf demselben Grund: ohne Bewertungsband dazwischen kein doppelter Abstand */
.salon + .faq { padding-top: clamp(24px, 4vw, 56px); }
.price-group:last-child { margin-bottom: 0; }

/* =====================================================================
   Editorial und Bewegung
   ===================================================================== */

/* Hero: der Titel greift ueber die Unterkante des Schaufensters, wie ein Magazin-Cover */
.hero-head { position: relative; z-index: 2; margin-top: calc(-1 * clamp(70px, 10vw, 170px)); padding: clamp(18px, 2.4vw, 34px) clamp(20px, 3vw, 44px) 0 0; background: var(--cream); justify-self: start; }
.hero-side { padding-top: clamp(8px, 2vw, 30px); }
.hero-subtitle { font-size: clamp(1.05rem, .95rem + .3vw, 1.22rem); }

/* Schaufenster oeffnet sich wie die Glastueren, danach setzt sich das Bild */
.js .hero-media img { clip-path: inset(0 50% 0 50%); transform: scale(1.12); animation: doors 1.5s var(--ease) .15s forwards, settle 2.6s var(--ease) .15s forwards; }
.js .hero-media::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--gold); opacity: .9; animation: seam 1.1s ease .1s forwards; }
@keyframes doors { to { clip-path: inset(0 0 0 0); } }
@keyframes settle { to { transform: scale(1); } }
@keyframes seam { 0% { transform: scaleY(0); opacity: .9; } 50% { transform: scaleY(1); opacity: .9; } 100% { transform: scaleY(1); opacity: 0; } }

/* Woerter steigen aus einer Maske (Spans setzt script.js) */
.w { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0 .12em .1em; margin: 0 -.12em -.1em; }
.wi { display: inline-block; }
.js .split .wi { transform: translateY(108%); transition: transform 1.05s var(--ease); transition-delay: calc(var(--wi, 0) * 70ms + var(--wd, 0ms)); }
.js .split.in .wi { transform: none; }

/* Fotos werden von unten freigelegt; das Bild selbst setzt sich dabei leicht */
.js .wipe img { clip-path: inset(100% 0 0 0); transform: scale(1.14); transition: clip-path 1.25s var(--ease), transform 1.8s var(--ease); transition-delay: var(--wd, 0ms); }
.js .wipe.in img { clip-path: inset(0 0 0 0); transform: scale(1); }
.js .treat-frame.wipe img { transition: clip-path 1.25s var(--ease), transform 1.8s var(--ease), opacity .6s ease; }

/* Text unter Ueberschriften folgt ruhig */
.js .rise { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--wd, 0ms); }
.js .rise.in { opacity: 1; transform: none; }

/* Knoepfe: Gold laeuft beim Darueberfahren von links durch */
.btn { isolation: isolate; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--gold-light); transform: scaleX(0); transform-origin: right; transition: transform .55s var(--ease); }
.btn:hover::before { transform: scaleX(1); transform-origin: left; }
.btn-dark:hover, .btn-outline:hover { background: var(--emerald-2); }
.btn-dark:hover { color: var(--emerald); }
.btn-outline:hover { background: transparent; color: var(--emerald); border-color: var(--gold-light); }
.btn-dark:hover .icon, .btn-outline:hover .icon { color: var(--emerald); }
.btn-outline--light:hover { color: var(--emerald); }

/* Menue: Goldlinie waechst unter dem Wort */
.nav-links a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.nav-links a:not(.btn):hover::after, .nav-links a.is-current::after { transform: scaleX(1); transform-origin: left; }

/* Behandlungen als grosse Typo-Liste statt Karten */
.treat-list { gap: 0; border-top: 1px solid var(--line); }
.treat-card { background: none !important; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 30px 0 24px; }
.treat-card.is-active h3 { color: var(--emerald); transform: translateX(14px); }
.treat-card h3 em, .treat-card.is-active h3 { font-style: italic; }
.treat-foot { border-top: 0; padding-top: 0; }

/* Preise bauen sich beim Reiterwechsel Zeile fuer Zeile auf */
.js .price-panel.active .price-list li { animation: rowIn .6s var(--ease) both; animation-delay: calc(var(--ri, 0) * 35ms); }
@keyframes rowIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.price-list li { transition: background-color .3s ease; }
.price-list li:hover .price-name { color: var(--emerald); }

/* Galerie: beim Darueberfahren hebt sich das Foto, die anderen treten zurueck */
.lookbook:hover .look-item img { filter: saturate(.7) brightness(.82); }
.look-item img { transition: filter .5s ease, transform 1s var(--ease); }
.lookbook .look-item:hover img { filter: none; transform: scale(1.04); }
.look-item:nth-child(even) { margin-top: clamp(24px, 4vw, 64px); }

/* Team: zweites Foto versetzt, beide wandern beim Scrollen leicht gegeneinander */
.team-grid { align-items: start; }
.team-photo:nth-child(2) { margin-top: clamp(30px, 6vw, 96px); }
.team-photo-frame img { transform-origin: center; }

/* Goldadern wie im smaragdgruenen Marmor der Salonwaende. Nur Hintergrund, nie ueber Text. */
.section--dark, .site-footer { position: relative; overflow: hidden; }
.veins { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .55; }
.veins path { fill: none; stroke: url(#veinGold); stroke-linecap: round; }
.section--dark > .container, .site-footer > .container { position: relative; z-index: 1; }

@media (max-width: 1020px) {
    .hero-head { margin-top: calc(-1 * clamp(50px, 9vw, 90px)); }
    .treat-card { padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper) !important; }
    .treat-card.is-active h3 { transform: none; }
    .treat-list { gap: 18px; border-top: 0; }
}
@media (max-width: 640px) {
    .hero-head { margin-top: -46px; padding: 16px 18px 0 0; }
    .look-item:nth-child(even) { margin-top: 22px; }
    .team-photo:nth-child(2) { margin-top: 0; }
    .veins { opacity: .4; }
}
@media (prefers-reduced-motion: reduce) {
    .js .hero-media img, .js .wipe img { clip-path: none !important; transform: none !important; }
    .js .split .wi { transform: none !important; }
    .js .rise { opacity: 1 !important; transform: none !important; }
    .js .hero-media::after { display: none; }
}
.arch-caption { margin-top: 14px; font-size: .95rem; color: var(--muted); }
.arch-caption em { font-family: var(--serif); font-size: 1.35rem; font-style: italic; color: var(--ink); }
.btn-outline--light { background: var(--emerald); }
/* Schwebender Buchen-Knopf gleitet erst herein, wenn der Hero mit seinem eigenen Knopf vorbei ist */
.js .booking-float { transform: translateY(160%); transition: transform .6s var(--ease), background-color .3s ease; }
.js .booking-float.show { transform: none; }
/* Unterseiten: der Seitenkopf nennt das Thema schon, der erste Abschnitt startet direkt mit dem Inhalt */
.page-hero + .section { padding-top: clamp(16px, 3vw, 40px); }
.page-hero + .section > .container > .section-header > .section-title { display: none; }
.page-hero + .section > .container > .section-header:not(:has(p, .gallery-filter)) { display: none; }