/* Nanoki Beauty Spa Elbe, Website
   Richtung: ruhiger Luxus aus dem Studio selbst. Creme und Sand wie bei King Nails,
   das Gold des Logos, Espresso fuer Kontrast, weisse Bluetenwolken und die
   Haengeleuchten vom Empfang. Bodoni fuer die grossen Momente, Jost fuer alles Lesbare. */

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

:root {
    --cream: #F6F2EB;
    --cream-2: #EFE8DE;
    --sand: #E8DED4;
    --sand-2: #DCCEBE;
    --taupe: #8A8077;
    --gold: #A0815A;
    --gold-dark: #7A5F3D;
    --gold-light: #E2CDA6;
    --gold-grad: linear-gradient(120deg, #8A6A43 0%, #C2A276 38%, #EBDABA 52%, #B4936A 70%, #8A6A43 100%);
    /* dunklere Fassung fuer Schrift, die helle Mitte waere auf Creme zu kontrastarm */
    --gold-text: linear-gradient(120deg, #6B5131 0%, #8F6F47 35%, #A3835A 50%, #8A6A43 65%, #6B5131 100%);
    --espresso: #2E251F;
    --espresso-2: #3B2F28;
    --ink: #33281F;
    --ink-2: #4E4037;
    --muted: #74665B;
    --white: #FFFFFF;
    --paper: #FFFDF9;
    --line: rgba(160, 129, 90, 0.3);
    --shadow: 0 24px 60px -30px rgba(62, 44, 30, 0.45);
    --radius: 18px;
    --serif: 'Bodoni Moda', 'Didot', Georgia, serif;
    --sans: 'Jost', 'Futura', system-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: 'Bodoni Moda';
  font-style: italic;
  font-weight: 500 600;
  font-display: swap;
  src: url(/fonts/bodonimoda-italic.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: 'Bodoni Moda';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(/fonts/bodonimoda-normal.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: 'Jost';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/fonts/jost-normal.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(--espresso); 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: 600; line-height: 1.12; margin: 0 0 .5em; color: var(--ink); letter-spacing: -.01em; }
p { margin: 0 0 1em; }
em { font-style: italic; }

/* Kleine Ueberzeile in Versalien */
.eyebrow {
    display: inline-flex; align-items: center; gap: 14px;
    font-family: var(--sans); font-weight: 600; font-size: .76rem;
    letter-spacing: .28em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: 18px;
}

/* Abschnittstitel in Versalien wie bei King Nails, das Akzentwort kursiv in Gold */
.section-title { font-size: clamp(1.7rem, 1rem + 2.2vw, 2.8rem); font-weight: 500; text-transform: uppercase; letter-spacing: .05em; line-height: 1.14; }
.section-title em { font-weight: 500; text-transform: none; letter-spacing: -.005em; font-size: 1.14em; white-space: nowrap; }
.section-title { text-wrap: balance; }

.gold-text {
    background: var(--gold-text);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

.section { padding: clamp(84px, 10vw, 140px) 0; position: relative; }
.section--tint { background: linear-gradient(180deg, var(--sand), var(--cream-2)); }
.section--dark { background: var(--espresso); color: #E9DFD2; }
.section--dark .section-title, .section--dark h3 { color: #FAF4EA; }
.section--dark .section-header p { color: #CDBFAE; }
.section--dark .eyebrow { color: var(--gold-light); }
.section--dark .gold-text { background-image: var(--gold-grad); }

.section-header { text-align: center; max-width: 760px; margin: 0 auto clamp(40px, 5vw, 64px); }
.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: 999px;
    font-family: var(--sans); font-weight: 600; font-size: .84rem; letter-spacing: .12em; text-transform: uppercase;
    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;
}
/* Espresso wie bei King Nails, mit feiner Goldkante */
.btn-dark {
    background: var(--espresso-2); color: #F6EBDA;
    box-shadow: inset 0 0 0 1px rgba(226, 205, 166, .3), 0 14px 30px -16px rgba(46, 37, 31, .75);
}
.btn-dark .icon { color: var(--gold-light); }
.btn-dark:hover { background: var(--espresso); color: #fff; transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(226, 205, 166, .6), 0 20px 36px -16px rgba(46, 37, 31, .85); }
.btn-gold { background: var(--gold-grad); background-size: 200% 100%; color: #2B1F14; box-shadow: 0 14px 30px -14px rgba(120, 90, 50, .8); }
.btn-gold:hover { transform: translateY(-2px); background-position: 100% 0; }
/* Lichtkante, die ueber den Knopf wandert */
.btn-outline { background: rgba(255, 255, 255, .5); color: var(--ink); border-color: rgba(59, 47, 40, .35); backdrop-filter: blur(6px); }
.btn-outline .icon { color: var(--gold-dark); }
.btn-outline:hover { background: var(--espresso-2); color: #fff; border-color: var(--espresso-2); transform: translateY(-2px); }
.btn-outline:hover .icon { color: var(--gold-light); }
.btn-outline--light { background: transparent; color: var(--gold-light); border-color: rgba(226, 205, 166, .5); }
.btn-outline--light .icon { color: inherit; }
.btn-outline--light:hover { background: var(--gold-light); color: var(--espresso); border-color: var(--gold-light); }
.btn-small { min-height: 44px; padding: 9px 22px; font-size: .78rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.center-cta { text-align: center; margin-top: 52px; }

/* ---------- Haengeleuchten wie ueber dem Empfang ---------- */
.pendants { position: absolute; left: 0; right: 0; top: 0; pointer-events: none; }
.pendants span {
    position: absolute; top: 0; left: var(--x); width: 3px; height: var(--len);
    background: linear-gradient(180deg, #1C1612, #3A2E25 92%); border-radius: 0 0 2px 2px;
    transform-origin: top center;
}
/* Leuchtende Spitze mit warmem Lichtkegel */
.pendants i {
    position: absolute; left: 50%; bottom: -3px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%;
    background: #FFF4DF; box-shadow: 0 0 6px 2px rgba(255, 226, 170, .95), 0 10px 26px 6px rgba(255, 210, 140, .45);
    animation: glow 4.8s ease-in-out infinite; animation-delay: calc(var(--i) * -.37s);
}
@keyframes glow { 0%, 100% { opacity: 1; } 50% { opacity: .78; } }
.js .pendants span { transform: scaleY(0); animation: drop 1.4s var(--ease) forwards; animation-delay: calc(var(--d) + .2s); }
.js .pendants i { opacity: 0; animation: lightOn .8s ease forwards, glow 4.8s ease-in-out 2.2s infinite; animation-delay: calc(var(--d) + 1.1s), calc(var(--d) + 2.2s); }
@keyframes drop { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes lightOn { to { opacity: 1; } }

/* ---------- Intro-Vorhang ---------- */
.intro-curtain { display: none; }
.intro .intro-curtain {
    display: grid; place-items: center;
    position: fixed; inset: 0; z-index: 2500; background: var(--cream);
    clip-path: inset(0 0 0 0);
    animation: curtainUp .9s var(--ease) 2.2s forwards;
}
.pendants--intro { height: 42vh; left: 12%; right: 12%; }
.intro .pendants--intro span { animation-delay: calc(var(--d) * .8); animation-duration: 1s; }
.intro .pendants--intro i { animation-delay: calc(var(--d) * .8 + .7s), 3s; }
.intro-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: 18vh; }
.intro-logo { width: min(220px, 52vw); height: auto; opacity: 0; animation: introLogo 1.1s var(--ease) .9s forwards; }
.intro-line { width: 0; height: 1px; background: var(--gold); animation: introLine .9s var(--ease) 1.2s forwards; }
.intro-tag { font-size: .74rem; letter-spacing: .4em; text-transform: uppercase; color: var(--gold-dark); opacity: 0; animation: fadeIn .6s ease 1.45s forwards; }
@keyframes introLogo { from { opacity: 0; transform: translateY(14px) scale(.96); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes introLine { to { width: min(240px, 50vw); } }
@keyframes fadeIn { to { opacity: 1; } }
@keyframes curtainUp { to { clip-path: inset(0 0 100% 0); visibility: hidden; } }

/* ---------- Deko-Ebenen ---------- */
/* feine Papierstruktur ueber allem, nimmt keine Klicks an */
.grain {
    position: fixed; inset: 0; z-index: 5; pointer-events: none; opacity: .055;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .22 0 0 0 0 .15 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 1000; background: var(--gold-grad); }

/* ---------- Top bar & Header ---------- */
.top-bar { background: var(--sand); color: var(--ink-2); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; 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, 253, 249, .86);
    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(62, 44, 30, .55); border-color: var(--line); background: rgba(255, 253, 249, .95); }
.main-nav { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); }
.logo { display: inline-flex; align-items: center; min-height: 44px; }
.logo img { height: 52px; width: auto; transform-origin: left center; transition: transform .3s var(--ease); }
.site-header.scrolled .logo img { transform: scale(.86); }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a:not(.btn) { text-decoration: none; font-weight: 500; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; position: relative; padding: 12px 0; color: var(--ink); }
.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 .4s var(--ease);
}
.nav-links a:not(.btn):hover::after, .nav-links a.is-current::after { transform: scaleX(1); transform-origin: left; }

.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(46, 37, 31, .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(62, 44, 30, .4); overflow-y: auto;
}
.mobile-nav.active { transform: translateX(0); }
.mobile-nav-logo { width: 120px; height: auto; margin: 0 0 18px; }
.mobile-nav a { text-decoration: none; font-family: var(--serif); font-weight: 500; font-size: 1.3rem; 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: .82rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; border: 0; margin-top: 14px; padding: 14px 18px; border-radius: 999px; justify-content: center; gap: 8px; }
.mobile-booking-item { background: var(--espresso-2); color: #F6EBDA; }
.mobile-booking-item .icon { color: var(--gold-light); }
.mobile-phone-item { background: var(--white); color: var(--ink); border: 1px solid rgba(59, 47, 40, .3) !important; }
.mobile-phone-item .icon { color: var(--gold-dark); }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: clamp(40px, 6vw, 80px) 0 clamp(80px, 9vw, 120px); min-height: calc(100svh - 128px); display: flex; align-items: center; }
.hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .8; animation: drift 18s ease-in-out infinite alternate; }
.blob--gold { width: 46vw; height: 46vw; right: -8vw; top: -12vw; background: radial-gradient(circle, rgba(226, 205, 166, .85), transparent 68%); }
.blob--sand { width: 34vw; height: 34vw; left: -10vw; bottom: -14vw; background: radial-gradient(circle, #E3D5C5, transparent 68%); animation-duration: 22s; }
.blob--light { width: 26vw; height: 26vw; left: 38vw; top: 10vw; background: radial-gradient(circle, rgba(255, 255, 255, .95), transparent 70%); animation-duration: 26s; }
@keyframes drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(3vw, 2vw, 0) scale(1.08); } }

.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(36px, 5vw, 80px); align-items: center; }
/* Versalien mit Abstand wie bei King Nails, die Zeile darunter kursiv in Gold */
.hero-title { font-size: clamp(2.3rem, .8rem + 3.7vw, 4.3rem); line-height: 1.04; margin-bottom: 28px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; }
.hero-title .line { display: block; overflow: hidden; padding-bottom: .1em; }
.hero-title .line-inner { display: block; }
.hero-title .line--accent { text-transform: none; letter-spacing: -.01em; font-size: 1.18em; line-height: 1; padding-top: .04em; }
.hero-title em { font-weight: 500; }
.hero-subtitle { font-size: 1.12rem; color: var(--muted); max-width: 520px; }
.hero-buttons { display: flex; flex-wrap: wrap; gap: 14px; margin: 34px 0 36px; }
.hero-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 28px; font-size: .92rem; font-weight: 500; }
.hero-facts .icon { color: var(--gold); margin-right: 8px; }

/* Startanimation: Zeilen fahren aus einer Maske hoch (nur mit JS-Klasse) */
.js .hero-title .line-inner { transform: translateY(105%); animation: lineUp 1.1s var(--ease) forwards; animation-delay: var(--d, 0s); }
.js .hero-anim { opacity: 0; transform: translateY(18px); animation: riseIn 1s var(--ease) forwards; animation-delay: var(--d, 0s); }
.js.intro .hero-title .line-inner, .js.intro .hero-anim { animation-delay: calc(var(--d, 0s) + 2.5s); }
@keyframes lineUp { to { transform: translateY(0); } }
@keyframes riseIn { to { opacity: 1; transform: none; } }

/* Hoehe am Bildschirm ausrichten, damit Bogen, Karten und Bewertung im ersten Bild liegen */
.hero-visual { position: relative; aspect-ratio: 400 / 520; width: min(100%, 460px, calc((100svh - 300px) * .77)); justify-self: center; margin-top: 40px; }
.pendants--hero { top: -26%; height: 30%; left: 4%; right: 4%; z-index: 0; }
.js.intro .pendants--hero span { animation-delay: calc(var(--d) + 2.6s); }
.js.intro .pendants--hero i { animation-delay: calc(var(--d) + 3.5s), calc(var(--d) + 4.6s); }
.hero-arch {
    position: absolute; inset: 0; z-index: 1; overflow: hidden;
    border-radius: 999px 999px 22px 22px; box-shadow: var(--shadow);
    border: 6px solid var(--paper); background: var(--sand-2);
}
.hero-arch img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transform-origin: 50% 40%; animation: kenburns-soft 22s ease-in-out infinite alternate; }
@keyframes kenburns-soft { from { transform: scale(1.03); } to { transform: scale(1.1); } }
@keyframes kenburns { from { transform: scale(1.05); } to { transform: scale(1.16) translate(-2%, -1%); } }
.js .hero-arch { clip-path: inset(100% 0 0 0 round 999px 999px 22px 22px); animation: archReveal 1.4s var(--ease) .35s forwards; }
.js.intro .hero-arch { animation-delay: 2.7s; }
@keyframes archReveal { to { clip-path: inset(0 0 0 0 round 999px 999px 22px 22px); } }
.hero-arch-line { position: absolute; top: -18px; right: -18px; width: 100%; height: 100%; overflow: visible; z-index: 0; }
.hero-arch-line path { fill: none; stroke: var(--gold); stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .hero-arch-line path { stroke-dashoffset: 1; animation: draw 2.4s var(--ease) .6s forwards; }
.js.intro .hero-arch-line path { animation-delay: 2.9s; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* Zwei Sofortbilder mit weissem Rand, leicht gedreht wie bei King Nails */
.hero-card { position: absolute; z-index: 3; background: var(--paper); padding: 7px 7px 26px; border-radius: 4px; box-shadow: 0 22px 44px -22px rgba(46, 37, 31, .55); }
.hero-card img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }
.hero-card--a { left: -17%; bottom: 4%; width: 38%; aspect-ratio: 4 / 5.6; rotate: -6deg; }
.hero-card--b { right: -9%; top: 24%; width: 30%; aspect-ratio: 4 / 5.4; rotate: 5deg; }
.js .hero-card, .js .seal--hero, .js .hero-badge { opacity: 0; animation: popIn 1s var(--ease) forwards; }
.js .hero-card--a { animation-delay: 1s; }
.js .hero-card--b { animation-delay: 1.15s; }
.js .seal--hero { animation-delay: 1.3s; }
.js .hero-badge { animation-delay: 1.4s; }
.js.intro .hero-card--a { animation-delay: 3.3s; }
.js.intro .hero-card--b { animation-delay: 3.45s; }
.js.intro .seal--hero { animation-delay: 3.6s; }
.js.intro .hero-badge { animation-delay: 3.7s; }
@keyframes popIn { from { opacity: 0; translate: 0 24px; scale: .92; } to { opacity: 1; translate: 0 0; scale: 1; } }

/* drehendes Siegel mit Umschrift um das Logo-Emblem */
.seal { position: absolute; z-index: 4; width: 128px; aspect-ratio: 1; left: -9%; top: 6%; display: grid; place-items: center; }
.seal svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 26s linear infinite; z-index: 1; }
.seal text { font-family: var(--sans); font-size: 12.6px; font-weight: 600; letter-spacing: 2.2px; fill: var(--gold-dark); }
.seal::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(255, 253, 249, .94); box-shadow: var(--shadow); }
.seal-face { position: relative; z-index: 1; width: 44%; height: auto; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Bewertungskarte wie die "Exzellenz"-Karte bei King Nails */
.hero-badge {
    position: absolute; z-index: 4; right: -10%; bottom: 9%;
    background: var(--paper); color: var(--ink); border-radius: 6px; padding: 14px 20px 14px 18px;
    box-shadow: 0 22px 44px -22px rgba(46, 37, 31, .55); display: flex; align-items: center; gap: 14px; line-height: 1.25;
}
.hero-badge::before { content: ""; position: absolute; inset: 5px; border: 1px solid var(--line); border-radius: 3px; pointer-events: none; }
.hero-badge-num { font-family: var(--sans); font-weight: 500; font-size: 2.3rem; line-height: 1; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.hero-badge-text { display: flex; flex-direction: column; gap: 4px; }
.hero-badge-sub { font-size: .7rem; color: var(--muted); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }

/* 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(160, 129, 90, .28); }
.stars-fill { position: absolute; left: 0; top: 0; overflow: hidden; color: var(--gold); }
.stars--light .stars-base { color: rgba(226, 205, 166, .25); }
.stars--light .stars-fill { color: var(--gold-light); }


/* ---------- Laufband: ein ruhiges Band mit dem Spross aus dem Logo ---------- */
.band { position: relative; z-index: 2; overflow: hidden; white-space: nowrap; background: var(--espresso); padding: 20px 0; }
/* doppelte Goldlinie wie auf einer Menuekarte */
.band::before, .band::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: rgba(226, 205, 166, .3); }
.band::before { top: 7px; }
.band::after { bottom: 7px; }
.band-track { display: inline-flex; animation: marquee 70s linear infinite; }
.band-group { display: inline-flex; align-items: center; }
.band span { font-family: var(--sans); font-weight: 500; font-size: .84rem; letter-spacing: .26em; text-transform: uppercase; color: #EFE3CF; padding: 0 28px; }
.band-sep { color: var(--gold); font-size: 1.2rem; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Einblendungen beim Scrollen (nur mit JS) ---------- */
.js [data-reveal] { opacity: 0; translate: 0 34px; transition: opacity 1s var(--ease), translate 1s var(--ease); transition-delay: var(--d, 0s); }
/* Bild-Einblendung per Abdeckung, die nach oben wegfaehrt. Kein clip-path auf
   dem Element selbst: Chrome rechnet ihn in die Sichtbarkeitspruefung ein, das
   Element gaelte dann nie als sichtbar. */
.js [data-reveal="clip"] { opacity: 1; translate: none; position: relative; }
.js [data-reveal="clip"]::before {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
    background: var(--sand-2); transform-origin: top; transition: transform 1.2s var(--ease); transition-delay: var(--d, 0s);
}
.js [data-reveal="clip"].in::before { transform: scaleY(0); }
.js [data-reveal].in { opacity: 1; translate: 0 0; }

.zoomable { cursor: zoom-in; }

/* ---------- Ueber uns: zwei Sofortbilder ---------- */
.about-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(36px, 6vw, 96px); align-items: center; }
.about-visual { position: relative; min-height: 560px; }
.polaroid {
    position: absolute; display: block; padding: 10px 10px 0; margin: 0; border: 0; cursor: zoom-in; text-align: center;
    background: var(--paper); border-radius: 4px; box-shadow: 0 30px 60px -30px rgba(46, 37, 31, .55);
    transition: rotate .6s var(--ease), translate .6s var(--ease), box-shadow .4s ease;
}
.polaroid-photo { display: block; aspect-ratio: var(--ratio, 4 / 5); overflow: hidden; border-radius: 2px; background: var(--sand); }
.polaroid-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.polaroid-caption { display: block; padding: 10px 6px 14px; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.15rem; color: var(--ink); }
.polaroid--back { top: 0; right: 0; width: 66%; rotate: 5deg; z-index: 1; }
.polaroid--back .polaroid-caption { text-align: right; padding-right: 18px; }
.polaroid--front { left: 0; top: 70px; width: 56%; rotate: -4deg; z-index: 2; }
.polaroid:hover { rotate: 0deg; translate: 0 -6px; box-shadow: 0 36px 70px -30px rgba(46, 37, 31, .65); z-index: 3; }
.about-quote { position: relative; font-style: italic; font-weight: 500; font-size: clamp(1.8rem, 1.1rem + 2.2vw, 2.9rem); text-transform: none; letter-spacing: -.01em; }
.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 img { width: 54px; height: auto; }
.about-signature > span { display: flex; flex-direction: column; line-height: 1.3; }
.about-signature-name { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.7rem; color: var(--ink); }
.about-signature-role { font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-dark); }

/* ---------- Zahlen ---------- */
.stats { background: var(--espresso); color: #F1E8DC; 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(226, 205, 166, .16), transparent 70%); }
.stats-grid { position: relative; display: grid; grid-template-columns: repeat(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(226, 205, 166, .2); }
/* Zahlen in der Grotesk, Bodoni-Ziffern waeren hier zu fein */
.stat-value {
    font-family: var(--sans); font-weight: 500; font-size: clamp(2.6rem, 1.6rem + 3vw, 4.2rem); line-height: 1;
    font-variant-numeric: lining-nums tabular-nums;
    background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat-label { font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: #CDBFAE; }

/* ---------- 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: 999px 999px 24px 24px; box-shadow: var(--shadow); border: 6px solid var(--paper); background: var(--sand-2);
}
.treat-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity .9s var(--ease), transform 1.6s var(--ease); }
.treat-frame img.active { opacity: 1; transform: scale(1); }
.treat-caption {
    position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); white-space: nowrap; max-width: 90%; overflow: hidden; text-overflow: ellipsis;
    background: rgba(46, 37, 31, .82); color: #fff; backdrop-filter: blur(6px);
    font-family: var(--sans); font-size: .74rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; padding: 10px 18px; border-radius: 2px;
}
.treat-list { display: flex; flex-direction: column; gap: 18px; }
.treat-card {
    position: relative; background: rgba(255, 253, 249, .78); border-radius: var(--radius);
    border: 1px solid rgba(160, 129, 90, .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); box-shadow: var(--shadow); }
.treat-thumb { display: none; }
.treat-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 8px; }
.treat-card h3 { font-size: clamp(1.3rem, 1.1rem + .6vw, 1.65rem); font-weight: 500; margin: 0; }
.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: .78rem; letter-spacing: .12em; text-transform: uppercase; 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 .icon { transform: translateX(5px); }

/* ---------- Motto: You are beautiful ---------- */
.motto { background: linear-gradient(180deg, var(--cream), var(--sand)); overflow: hidden; }
.motto-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(36px, 6vw, 96px); align-items: center; }
.motto-title { margin: 0 0 22px; font-family: var(--serif); line-height: .95; }
.motto-small { display: block; font-weight: 500; font-size: clamp(1.4rem, 1rem + 1.6vw, 2.4rem); letter-spacing: .3em; text-transform: uppercase; color: var(--ink); margin-bottom: .2em; }
.motto-script { display: block; font-style: italic; font-weight: 500; font-size: clamp(4rem, 1.6rem + 9vw, 9.5rem); letter-spacing: -.02em; padding-bottom: .08em; }
.motto-lead { font-size: 1.15rem; color: var(--muted); max-width: 480px; }
.motto-visual { position: relative; }
.motto-frame {
    display: block; width: min(100%, 420px); margin-left: auto; padding: 0; border: 6px solid var(--paper); cursor: zoom-in;
    border-radius: 999px 999px 22px 22px; overflow: hidden; box-shadow: var(--shadow); background: var(--sand-2); aspect-ratio: 2 / 3;
}
.motto-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; transition: transform 1.2s var(--ease); }
.motto-frame:hover img { transform: scale(1.04); }

/* ---------- 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: 500; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase;
    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: 28px; padding: clamp(26px, 4.5vw, 60px);
    box-shadow: var(--shadow); animation: panelIn .55s var(--ease);
}
/* doppelte Goldkante wie bei einer Menuekarte */
.price-panel::before { content: ""; position: absolute; inset: 12px; border: 1px solid var(--line); border-radius: 20px; pointer-events: none; }
@keyframes panelIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.price-panel-head { text-align: center; margin-bottom: 30px; }
.price-panel-head h3 { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem); font-weight: 500; }
.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: .78rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; 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(160, 129, 90, .22); }
.price-list li:last-child { border-bottom: 0; }
.price-name { flex: 0 1 auto; font-weight: 500; 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; border-bottom: 1px dotted rgba(160, 129, 90, .55); transform: translateY(-5px); 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: 16px; padding: 18px 22px 8px; }
.price-group--addon h4 { border-bottom-color: rgba(160, 129, 90, .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(226, 205, 166, .25); }
.gallery-filter button { color: #BFAF9C; }
.gallery-filter button::after { background: var(--gold-light); }
.gallery-filter button:hover, .gallery-filter button.active { color: #FAF4EA; }
.lookbook { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding-bottom: 60px; }
/* versetzte Spalten wie in einem Lookbook, per margin, damit die Einblendung (translate) frei bleibt */
.look-item { position: relative; padding: 0; border: 0; background: #3D3129; overflow: hidden; border-radius: 16px; aspect-ratio: 3 / 4; cursor: zoom-in; }
.look-item:nth-child(4n+2), .look-item:nth-child(4n+4) { margin-top: 60px; margin-bottom: -60px; }
.look-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.look-item::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(226, 205, 166, 0); border-radius: 10px; transition: border-color .5s ease, inset .5s var(--ease); pointer-events: none; }
.look-item:hover img { transform: scale(1.07); }
.look-item:hover::after { border-color: rgba(226, 205, 166, .85); inset: 14px; }
.look-zoom { position: absolute; right: 18px; bottom: 18px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 253, 249, .92); color: var(--ink); opacity: 0; transform: scale(.7); transition: opacity .4s ease, transform .4s var(--ease); }
.look-item:hover .look-zoom { opacity: 1; transform: none; }
.lookbook.is-filtered .look-item { margin-top: 0; margin-bottom: 0; }
.look-item.is-hidden { display: none; }

/* ---------- Studio ---------- */
.salon-intro { max-width: 860px; margin: 0 auto 52px; text-align: center; }
.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 { padding: 0; border: 0; background: var(--sand); overflow: hidden; border-radius: 16px; cursor: zoom-in; }
.salon-tile img { width: 100%; height: 118%; margin-top: -9%; object-fit: cover; will-change: transform; }
.salon-tile--1 { grid-column: span 2; grid-row: span 2; border-radius: 200px 200px 16px 16px; }
.salon-tile--6 { grid-column: span 2; }

/* ---------- Bewertungen ---------- */
.review-band { position: relative; overflow: hidden; background: var(--espresso); color: #F3EADD; 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/emblem-hell.svg) center / contain no-repeat; opacity: .07; pointer-events: none; }
.review-head { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 26px; font-size: .8rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; 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(--serif); font-style: italic; font-weight: 500; font-size: clamp(1.2rem, .9rem + 1.05vw, 1.75rem); line-height: 1.42; }
.review-quote figcaption { color: var(--gold-light); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: .8rem; }
.review-quote figcaption span { color: #BFAF9C; 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: 500; font-size: 1.05rem; 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(135deg); background: var(--espresso-2); color: #fff; border-color: var(--espresso-2); }
.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: 24px; }
.visit-slides { position: relative; height: 100%; min-height: 420px; border-radius: 24px; overflow: hidden; box-shadow: var(--shadow); 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-slide.active img { animation: kenburns 12s ease-in-out forwards; }
.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: 24px; padding: clamp(28px, 4vw, 44px); box-shadow: var(--shadow); position: relative; }
.visit-info::before { content: ""; position: absolute; inset: 10px; border: 1px solid var(--line); border-radius: 18px; pointer-events: none; }
.visit-info h3 { font-size: 1.8rem; font-weight: 500; }
.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: .78rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; 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(--espresso-2); color: #fff; }

/* ---------- Footer ---------- */
.site-footer { background: var(--espresso); color: #E9DFD2; 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: 150px; height: auto; margin-bottom: 18px; }
.footer-brand p { color: #CDBFAE; }
.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(226, 205, 166, .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(--espresso); }
.site-footer .footer-heading { font-family: var(--sans); font-size: .76rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; 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: #E9DFD2; }
.site-footer a:hover { color: var(--gold-light); }
.footer-hours { font-variant-numeric: lining-nums tabular-nums; color: #CDBFAE; }
.footer-hours li { padding: 3px 0; }
.footer-word {
    font-family: var(--serif); font-style: italic; font-weight: 500; text-align: center; white-space: nowrap;
    font-size: clamp(3.5rem, 18vw, 15rem); line-height: .95; margin: 56px 0 10px;
    background: var(--gold-grad); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
    opacity: .9;
}
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; border-top: 1px solid rgba(226, 205, 166, .2); padding-top: 16px; color: #B7A795; 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: 54px; padding: 12px 24px; border-radius: 999px;
    background: var(--espresso-2); color: #F6EBDA; font-weight: 600; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
    box-shadow: inset 0 0 0 1px rgba(226, 205, 166, .35), 0 16px 34px -12px rgba(46, 37, 31, .7); transition: transform .35s var(--ease);
}
.booking-float .icon { color: var(--gold-light); font-size: 1.1rem; }
.booking-float::before { content: ""; position: absolute; inset: -6px; border-radius: inherit; border: 1px solid var(--gold); opacity: 0; animation: pulse 3s ease-out infinite; }
@keyframes pulse { 0% { opacity: .8; transform: scale(.94); } 100% { opacity: 0; transform: scale(1.18); } }
.booking-float:hover { transform: translateY(-3px); }

/* ---------- Punkt-Navigation rechts ---------- */
.dot-nav { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 920; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.dot-nav a { position: relative; display: flex; align-items: center; justify-content: flex-end; width: 44px; height: 30px; text-decoration: none; }
.dot-nav a::after { content: ""; width: 10px; height: 10px; border-radius: 999px; margin-right: 4px; background: rgba(255, 253, 249, .9); border: 1.5px solid var(--gold); box-shadow: 0 2px 6px rgba(46, 37, 31, .25); transition: opacity .3s ease, background-color .3s ease; }
.dot-nav a::before {
    content: ""; position: absolute; right: 4px; top: 50%; width: 10px; height: 28px; margin-top: -14px; border-radius: 999px;
    background: var(--gold-grad); border: 1.5px solid var(--gold-dark); box-shadow: 0 2px 6px rgba(46, 37, 31, .25);
    opacity: 0; transform: scaleY(.36); transition: transform .4s var(--ease), opacity .3s ease;
}
.dot-nav a:hover::after { background: var(--gold-light); }
.dot-nav a.active::before { opacity: 1; transform: none; }
.dot-nav a.active::after { opacity: 0; }
.dot-label { position: absolute; right: 30px; white-space: nowrap; pointer-events: none; font-size: .76rem; font-weight: 500; letter-spacing: .06em; color: #fff; background: var(--espresso-2); padding: 5px 12px; border-radius: 999px; opacity: 0; transform: translateX(6px); transition: opacity .25s ease, transform .25s ease; }
.dot-nav a:hover .dot-label, .dot-nav a:focus-visible .dot-label { opacity: 1; transform: none; }
.dot-nav.show-label a.active .dot-label { opacity: 1; transform: none; }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 2000; background: rgba(30, 24, 19, .94); display: none; align-items: center; justify-content: center; padding: 20px; }
.lightbox.active { display: flex; animation: fadeIn .3s ease; }
.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; }

/* ---------- Ein weisser Bluetenzweig am Motto-Bild ---------- */
.branch { position: absolute; z-index: 3; pointer-events: none; overflow: visible; filter: drop-shadow(0 8px 14px rgba(70, 50, 35, .22)); transform-origin: 0% 100%; animation: sway 7s ease-in-out infinite alternate; }
.branch-wood { fill: none; stroke: #5E4A3B; stroke-width: 3.2; stroke-linecap: round; }
.branch-wood--thin { stroke-width: 1.8; }
.bud { fill: #FBF5EA; stroke: #E4D6C2; stroke-width: .8; }
.branch .bl { transform-box: fill-box; transform-origin: center; }
.js .branch .bl { scale: 0; opacity: 0; animation: bloom 1.1s var(--ease) forwards; animation-delay: calc(var(--base, 0s) + var(--i) * .14s + .3s); }
@keyframes bloom { 0% { scale: 0; opacity: 0; rotate: -40deg; } 70% { opacity: 1; } 100% { scale: 1; opacity: 1; rotate: 0deg; } }
@keyframes sway { from { rotate: -1.6deg; } to { rotate: 1.8deg; } }
/* Zweige ausserhalb des ersten Bildschirms bluehen erst, wenn sie sichtbar werden */
.js .branch.wait .bl { animation-play-state: paused; }

/* Zweig unten rechts unter dem Teamfoto, dort verdeckt er keine Bildunterschrift */
.branch--motto { width: 54%; left: -10%; bottom: -26px; transform: rotate(-4deg); }
.footer-word-wrap { position: relative; }

/* ---------- 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; }
/* Logo-Emblem als zartes Wasserzeichen links */
.page-hero::before { content: ""; position: absolute; left: 4%; top: 50%; width: min(340px, 30vw); aspect-ratio: 1; transform: translateY(-50%); background: url(/img/emblem.svg) center / contain no-repeat; opacity: .08; pointer-events: none; }
.page-hero .eyebrow { justify-content: center; }
.page-title { font-size: clamp(2.3rem, 1.1rem + 4vw, 4.2rem); line-height: 1.06; margin-bottom: 20px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.page-title .line { display: block; overflow: hidden; padding-bottom: .08em; }
.page-title .line-inner { display: block; }
.js .page-title .line-inner { transform: translateY(105%); animation: lineUp 1.1s var(--ease) forwards; animation-delay: var(--d, 0s); }
.page-hero .hero-subtitle { margin: 0 auto; }
.page-hero .hero-buttons { justify-content: center; margin-bottom: 0; }
.pendants--page { height: 46%; left: 58%; right: 4%; z-index: 0; opacity: .85; }
.breadcrumb { display: flex; justify-content: center; align-items: center; gap: 10px; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; 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(160, 129, 90, .22); text-decoration: none;
    transition: transform .4s var(--ease), box-shadow .4s ease, border-color .4s ease;
}
.next-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--gold-light); }
.next-eyebrow { font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-dark); }
.next-title { font-family: var(--serif); font-weight: 500; font-size: 1.35rem; 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(--espresso-2); color: #fff; transform: translateX(4px); }

/* ---------- 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: 18px; padding: 20px 22px;
    box-shadow: 0 24px 60px -20px rgba(46, 37, 31, .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: 1240px) and (min-width: 641px) { .dot-nav { right: 6px; } }

@media (max-width: 1160px) {
    .nav-links { gap: 18px; }
    .nav-links a:not(.btn) { font-size: .74rem; letter-spacing: .12em; }
    .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: 42px; }
    .site-header.scrolled .logo img { transform: none; }
    .top-bar-text { display: none; }
    .top-bar .container { justify-content: center; }
    .hero { min-height: 0; }
    .hero-grid, .about-grid, .visit-grid, .faq-grid, .motto-grid { grid-template-columns: 1fr; }
    .hero-visual { width: min(74%, 420px); margin: 90px auto 0; }
    .about-visual { max-width: 560px; width: 100%; margin: 0 auto; }
    .faq-aside { position: static; }
    .motto-frame { margin: 0 auto; }
    /* 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(3, 1fr); }
    .look-item:nth-child(4n+2), .look-item:nth-child(4n+4) { margin-top: 0; margin-bottom: 0; }
    .look-item:nth-child(3n+2) { margin-top: 40px; margin-bottom: -40px; }
    .salon-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
    .salon-tile--1 { grid-column: span 2; }
    .salon-tile--6 { grid-column: span 1; }
    .visit-slides { min-height: 0; aspect-ratio: 4 / 3; height: auto; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); row-gap: 34px; }
    .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 { padding-top: 34px; }
    .hero-title { font-size: clamp(1.9rem, 9.4vw, 2.7rem); letter-spacing: .03em; }
    .hero-visual { width: 70%; margin-top: 84px; }
    .pendants--hero { top: -24%; height: 26%; }
    .hero-card--a { left: -24%; width: 44%; }
    .hero-card--b { right: -22%; width: 36%; padding: 5px 5px 18px; }
    .hero-card { padding: 5px 5px 18px; }
    .seal { width: 92px; left: -17%; top: 0; }
    .seal text { font-size: 13px; }
    .hero-badge { right: -20%; bottom: 3%; padding: 10px 14px 10px 12px; gap: 10px; }
    .hero-badge-num { font-size: 1.6rem; }
    .hero-badge .stars { font-size: .72rem; letter-spacing: 1px; }
    .hero-badge-sub { font-size: .58rem; letter-spacing: .1em; }
    .about-visual { min-height: 0; aspect-ratio: 1 / 1.08; }
    .polaroid { padding: 6px 6px 0; }
    .polaroid-caption { font-size: .95rem; padding: 6px 4px 9px; }
    .polaroid--back { width: 70%; }
    .polaroid--front { top: 48px; width: 56%; }
    .treat-list { grid-template-columns: 1fr; }
    .motto-small { letter-spacing: .22em; }
    .motto-frame { width: 78%; }
    .lookbook { grid-template-columns: repeat(2, 1fr); gap: 10px; padding-bottom: 30px; }
    .look-item:nth-child(3n+2) { margin-top: 0; margin-bottom: 0; }
    .look-item:nth-child(even) { margin-top: 30px; margin-bottom: -30px; }
    .price-tabs { margin-inline: -16px; padding: 0 6px; }
    .price-tab, .gallery-filter button { padding: 12px 14px; letter-spacing: .12em; }
    .price-tab::after, .gallery-filter button::after { left: 14px; right: 14px; }
    .price-panel { padding: 30px 20px; border-radius: 22px; }
    .price-panel::before { inset: 8px; border-radius: 16px; }
    .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; }
    .salon-tile--1 { border-radius: 120px 120px 14px 14px; }
    .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; }
    /* Punkt-Navigation auf dem Handy aus: die Punkte laegen auf dem Text und waeren zu kleine Tippziele */
    .dot-nav { display: none; }
    .eyebrow { letter-spacing: .2em; gap: 10px; }
    .site-footer li a { min-width: 44px; }
    .stat-label { font-size: .7rem; letter-spacing: .12em; }
    .band { padding: 17px 0; }
    .band span { font-size: .76rem; letter-spacing: .2em; padding: 0 18px; }
    .page-hero::before { width: 52vw; left: -10%; opacity: .06; }
    .review-band::after { display: none; }
    .section-title { letter-spacing: .035em; }
    /* lange Namen in Versalien passen nicht in eine Handyzeile: dort am Bindestrich umbrechen lassen */
    .section-title .nowrap { 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(1.9rem, 9vw, 2.6rem); letter-spacing: .03em; }
    .pendants--page { left: 50%; height: 30%; opacity: .6; }
    .branch--motto { width: 50%; left: -4%; }
}


@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .js [data-reveal], .js .hero-anim, .js .hero-card, .js .seal--hero, .js .hero-badge { opacity: 1 !important; translate: none !important; transform: none; clip-path: none !important; }
    .js .hero-title .line-inner, .js .page-title .line-inner { transform: none !important; }
    .js .hero-arch { clip-path: none !important; }
    .js .hero-arch-line path { stroke-dashoffset: 0 !important; }
    .js .pendants span { transform: none !important; }
    .js .pendants i { opacity: 1 !important; }
    .js [data-reveal="clip"]::before { display: none; }
    .intro-curtain { display: none !important; }
    .grain { display: none; }
    .js .branch .bl { scale: 1 !important; opacity: 1 !important; }
    .js .review-quote { transition: none; }
}