/* ============================================================
   STUDIO 169 – Nails & Beauty Lab, Winterthur

   Hausaufbau wie Kingnails und AK Luxy: Hero mit Text links und Bild
   rechts, Preise als Karten-Akkordeon, Galerie, Bewertungskarten,
   Kontaktkarte, dunkler Fuss.

   Die Farben kommen aus dem Salon selbst: Creme von den Waenden, Sand
   von den Sesseln, Bronze vom beleuchteten Schriftzug. Nicht das Dunkel
   der Kingnails-Vorlage – die Raeume in Winterthur sind hell.
   ============================================================ */

:root {
    /* Flaechen */
    --cream:       #FAF6F0;
    --cream-deep:  #F4ECE1;
    --sand:        #E7D8C6;
    --sand-soft:   #F0E4D6;
    --white:       #FFFFFF;

    /* Akzente */
    --tan:         #C39A72;   /* Ton des Monogramms, fuer Flaechen und Symbole */
    --tan-text:    #8B633B;   /* derselbe Ton als Schrift, auf 4,5:1 gezogen */
    --bronze:      #7E6039;
    --bronze-deep: #5F482A;

    /* Schrift */
    --ink:         #332C25;
    --ink-soft:    #6B6055;
    --ink-faint:   #736A5F;

    --font-head: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --radius:      14px;
    --shadow-sm:   0 2px 10px rgba(94, 72, 42, .06);
    --shadow-md:   0 12px 40px rgba(94, 72, 42, .10);
    --shadow-lg:   0 26px 70px rgba(94, 72, 42, .14);

    /* Der Rundbogen aus den Regalnischen des Salons. */
    --arch: 50% 50% var(--radius) var(--radius) / 32% 32% 2% 2%;

    --ease: cubic-bezier(.22, .61, .36, 1);
}

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

/* Nur auf html, nicht auf * – global gesetzt bricht es jedes
   programmatische Scrollen und damit auch Screenshot-Werkzeuge. */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 96px;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 300;
    line-height: 1.72;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

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

h1, h2, h3, h4 {
    font-family: var(--font-head);
    font-weight: 500;
    line-height: 1.14;
    color: var(--ink);
    margin: 0 0 .5em;
    font-variant-numeric: lining-nums;
}
h1 { font-size: clamp(2.6rem, 5.4vw, 4.2rem); }
h2 { font-size: clamp(2rem, 3.8vw, 3rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.55rem); }

p { margin: 0 0 1.1em; }

a { color: var(--tan-text); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--bronze-deep); }

:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; border-radius: 4px; }

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

.ic { width: 1.1em; height: 1.1em; flex: none; vertical-align: -.16em; }

.eyebrow {
    display: block;
    font-size: .74rem;
    font-weight: 500;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--tan-text);
    margin-bottom: 1rem;
}

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--bronze); color: var(--white); padding: .8rem 1.4rem;
}
.skip-link:focus { left: 1rem; top: 1rem; color: var(--white); }

/* ---------- Bildrahmen ----------
   Zwei Fassungen. Der Bogen greift die beleuchteten Regalnischen auf und
   bleibt deshalb zwei Bildern vorbehalten: dem grossen im Hero und dem
   Portrait der Inhaberin. An allen Bildern angewandt wurde die Form zur
   Tapete. Alles Uebrige steht in einem ruhigen Rahmen mit weichen Ecken. */
.arch,
.frame {
    margin: 0;
    overflow: hidden;
    background: var(--sand-soft);
    box-shadow: var(--shadow-md);
}
.arch img,
.frame img { width: 100%; height: 100%; object-fit: cover; }
.arch  { border-radius: var(--arch); }
.frame { border-radius: var(--radius); }

/* ---------- Einblenden beim Scrollen ---------- */
[data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    [data-reveal] { opacity: 1; transform: none; transition: none; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================================
   Effekte
   Alle nutzen nur transform, opacity, clip-path oder
   background-position – also Eigenschaften, die die Grafikkarte
   allein bewegen kann. Nichts davon loest ein Neuberechnen des
   Layouts aus, und alles steht still, wenn das Betriebssystem
   reduzierte Bewegung meldet (Regel am Ende des Abschnitts).
   ============================================================ */

/* ---------- Grosses Monogramm als Wasserzeichen ----------
   Ueber die Abschnitte verteilt, abwechselnd links und rechts, immer
   ueber den Rand hinauslaufend – angeschnitten wirkt es wie eine
   Praegung im Papier, vollstaendig sichtbar waere es ein zweites Logo.

   Die Deckung ist bewusst sehr niedrig. Gemessen liegt der Unterschied
   zur Grundflaeche damit unter zwei Prozent Leuchtdichte, der Text
   darueber verliert also praktisch keinen Kontrast. Eine Schraube fuer
   alle Stellen: --wz-alpha. */
:root { --wz-alpha: .05; }

.hat-wz { position: relative; isolation: isolate; }
.hat-wz::before {
    content: '';
    position: absolute;
    z-index: -1;
    pointer-events: none;
    width: var(--wz-size, min(560px, 46vw));
    aspect-ratio: 1;
    background: url('img/logo-watermark.webp?v=2') center / contain no-repeat;
    opacity: var(--wz-alpha);
}
.wz-links       { --wz-size: min(540px, 44vw); }
.wz-links::before       { left: -10%;  top: 12%; }
.wz-rechts      { --wz-size: min(600px, 48vw); }
.wz-rechts::before      { right: -12%; top: 22%; }
.wz-links-tief  { --wz-size: min(520px, 42vw); }
.wz-links-tief::before  { left: -9%;   bottom: 6%; }

/* Auf dem Handy nimmt das Zeichen sonst die halbe Breite und legt sich
   quer unter den Fliesstext. */
@media (max-width: 700px) {
    :root { --wz-alpha: .04; }
    .wz-links::before,
    .wz-rechts::before,
    .wz-links-tief::before { width: 68vw; }
    .wz-links::before      { left: -26%; }
    .wz-rechts::before     { right: -26%; }
    .wz-links-tief::before { left: -26%; }
}

/* ---------- Bilder, die durchwechseln ----------
   Ueberall dasselbe Prinzip: alle Aufnahmen liegen gestapelt, sichtbar
   ist eine, script.js schaltet weiter. Gilt fuer das Nagelbild im Hero
   und fuer jede Kachel der Innencollage. */
.hero-klein img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.1s var(--ease);
}
.hero-klein img.is-on { opacity: 1; }

/* ---------- Goldschimmer ueber den Ueberschriften ----------
   Ein heller Streifen wandert alle acht Sekunden einmal durch. Das ist
   der Effekt aus der Kingnails-Vorlage, hier in Bronze statt Gold. */
/* Zwei Vorsichtsmassnahmen:

   1. Der Streifen ist Bronze, nicht der helle Monogrammton. Bronze
      traegt auf Creme 5,4:1, der helle Ton nur 2,4:1 – waehrend der
      Streifen durchlaeuft, waere ein Teil der Ueberschrift sonst
      kurzzeitig zu blass.
   2. Die Regel steht in einem @supports-Block. Ohne
      background-clip: text wuerde `color: transparent` die
      Ueberschrift schlicht unsichtbar machen. */
.shimmer { color: var(--ink); }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .shimmer {
        background: linear-gradient(100deg,
            var(--ink) 0%, var(--ink) 40%,
            var(--bronze) 50%,
            var(--ink) 60%, var(--ink) 100%);
        background-size: 300% 100%;
        background-position: 100% 0;
        -webkit-background-clip: text;
                background-clip: text;
        color: transparent;
        animation: schimmer 8s var(--ease) infinite;
    }
}
@keyframes schimmer {
    0%, 62%  { background-position: 100% 0; }
    92%, 100% { background-position: 0 0; }
}

/* ---------- Bilder ziehen sich auf ----------
   Statt einfach einzublenden gibt ein Vorhang das Bild von unten frei,
   waehrend es selbst leicht zurueckzoomt. Wirkt wertiger als ein
   blosses Aufblenden und dauert kaum laenger. */
[data-vorhang] { overflow: hidden; }
[data-vorhang] img {
    clip-path: inset(100% 0 0 0);
    transform: scale(1.12);
    transition: clip-path 1.1s var(--ease), transform 1.4s var(--ease);
}
[data-vorhang].is-visible img {
    clip-path: inset(0 0 0 0);
    transform: scale(1);
}

/* ---------- Richtung des Einblendens ----------
   Nicht alles kommt von unten: was rechts steht, kommt von rechts.

   Die seitliche Verschiebung ragt waehrend der Bewegung ueber den
   Rand hinaus und verbreitert die Seite um bis zu 16 px. "overflow-x:
   clip" an den betroffenen Abschnitten schneidet das ab, ohne – anders
   als "hidden" – einen eigenen Scrollbereich aufzumachen, der
   position: sticky im Kopf brechen wuerde. */
.about, .visit, .testimonials, .services, .gallery { overflow-x: clip; }
[data-reveal="links"]  { transform: translateX(-28px); }
[data-reveal="rechts"] { transform: translateX(28px); }
[data-reveal="links"].is-visible,
[data-reveal="rechts"].is-visible { transform: none; }

/* ---------- Leichte Neigung zum Mauszeiger ----------
   Nur auf Zeigergeraeten; auf dem Handy gibt es kein Hover und der
   Effekt kostete nur Rechenzeit. */
.tilt {
    transform: perspective(1200px)
               rotateX(var(--tilt-x, 0deg))
               rotateY(var(--tilt-y, 0deg));
    transition: transform .5s var(--ease);
}

/* ---------- Knoepfe: Lichtstreifen beim Darueberfahren ---------- */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
    content: '';
    position: absolute;
    inset: 0 auto 0 -60%;
    width: 45%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
    transform: skewX(-18deg);
    transition: left .6s var(--ease);
}
.btn-primary:hover::after { left: 115%; }

/* ---------- Zaehler ----------
   Die Bewertungszahl zaehlt hoch, sobald sie ins Bild kommt.
   tabular-nums haelt die Breite konstant, sonst zappelt die Zeile. */
[data-zaehler] { font-variant-numeric: lining-nums tabular-nums; }

/* ---------- Preiszeilen laufen gestaffelt ein ----------
   --row kommt aus dem Markup und verzoegert jede Zeile ein wenig
   gegenueber der vorigen. */
.accordion-item.active .service-item {
    animation: zeileEin .5s var(--ease) both;
    animation-delay: calc(var(--row, 0) * 45ms);
}
@keyframes zeileEin {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* ---------- Monogramm-Band wandert ---------- */
.monogram-band::before { animation: bandWandert 90s linear infinite; }
@keyframes bandWandert {
    from { background-position: left top; }
    to   { background-position: -1000px top; }
}

@media (prefers-reduced-motion: reduce) {
    /* Der Wechsler haelt an; sichtbar bleibt das erste Bild. */
    .hero-klein img, .dia-buehne img { transition: none; }
    .gallery-item:hover img { transform: none; }
    .shimmer, .shimmer:is(h1, h2, h3) {
        animation: none;
        background: none;
        -webkit-background-clip: initial;
                background-clip: initial;
        color: var(--ink);
    }
    [data-vorhang] img { clip-path: none; transform: none; transition: none; }
    .tilt { transform: none; }
    .btn-primary::after { display: none; }
    .accordion-item.active .service-item { animation: none; }
    .monogram-band::before { animation: none; }
}

/* ---------- Knoepfe ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: .82rem 1.7rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: .92rem;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .25s var(--ease), color .25s var(--ease),
                border-color .25s var(--ease), transform .25s var(--ease),
                box-shadow .25s var(--ease);
}
.btn-lg { padding: 1rem 2.1rem; font-size: .95rem; }
.btn-block { display: flex; width: 100%; }

.btn-primary {
    background: var(--bronze);
    color: var(--white);
    box-shadow: 0 8px 24px rgba(126, 96, 57, .26);
}
.btn-primary:hover {
    background: var(--bronze-deep); color: var(--white);
    transform: translateY(-2px); box-shadow: 0 14px 32px rgba(126, 96, 57, .32);
}

.btn-ghost { background: transparent; color: var(--tan-text); border-color: var(--sand); }
.btn-ghost:hover { background: var(--sand-soft); border-color: var(--tan); color: var(--bronze-deep); }

.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }
.center-cta { text-align: center; margin-top: 3rem; }

/* ---------- Lesefortschritt ---------- */
.scroll-progress {
    position: fixed; inset: 0 auto auto 0;
    height: 2px; width: 0;
    background: linear-gradient(90deg, var(--tan), var(--bronze));
    z-index: 120;
}

/* ---------- Kopfzeile ---------- */
.top-bar {
    background: var(--cream-deep);
    border-bottom: 1px solid rgba(196, 154, 114, .22);
    font-size: .8rem;
    color: var(--ink-soft);
}
.top-bar .container {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: .4rem 2rem; padding-block: .55rem;
}
.top-bar-link { display: inline-flex; align-items: center; gap: .45rem; color: var(--ink-soft); }
.top-bar-link:hover { color: var(--bronze); }

/* ---------- Kopf ---------- */
header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(250, 246, 240, .82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid transparent;
    transition: background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
header.scrolled {
    background: rgba(250, 246, 240, .96);
    border-bottom-color: rgba(196, 154, 114, .28);
    box-shadow: var(--shadow-sm);
}
header nav {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.5rem; padding-block: .85rem;
}

/* Das Wortbild ist gesetzt, nicht als Bild eingebunden: das Material
   enthaelt nur das Monogramm, den Schriftzug gibt es ausschliesslich als
   Wandbeschriftung auf den Fotos. */
.logo { display: inline-flex; align-items: center; gap: .8rem; }
.logo-mark { width: 46px; height: 46px; }
.logo-type { display: flex; flex-direction: column; line-height: 1; }
.logo-name {
    font-family: var(--font-head);
    font-size: 1.6rem; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--bronze);
    /* Playfair setzt Ziffern ab Werk als Mediaevalziffern; im Wandlogo
       des Studios stehen sie auf Versalhoehe. */
    font-variant-numeric: lining-nums;
}
.logo-sub {
    font-size: .57rem; letter-spacing: .3em; text-transform: uppercase;
    color: var(--tan-text); margin-top: .34rem;
}

.nav-links { display: flex; align-items: center; gap: 2rem; }
.nav-links a:not(.btn) {
    position: relative;
    font-size: .86rem; letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink-soft);
}
.nav-links a:not(.btn)::after {
    content: ''; position: absolute; left: 0; bottom: -6px;
    width: 0; height: 1px; background: var(--tan);
    transition: width .3s var(--ease);
}
.nav-links a:not(.btn):hover,
.nav-links a.is-current { color: var(--bronze); }
.nav-links a:not(.btn):hover::after,
.nav-links a.is-current::after { width: 100%; }

.menu-toggle { display: none; background: none; border: 0; padding: .4rem; color: var(--bronze); cursor: pointer; }
.menu-toggle .ic { width: 26px; height: 26px; }
.menu-toggle .menu-close { display: none; }
.menu-toggle.is-open .menu-open { display: none; }
.menu-toggle.is-open .menu-close { display: block; }

/* ---------- Mobiles Menue ---------- */
.nav-overlay {
    position: fixed; inset: 0; z-index: 105;
    background: rgba(51, 44, 37, .42);
    opacity: 0; visibility: hidden;
    transition: opacity .3s var(--ease), visibility .3s;
}
.nav-overlay.active { opacity: 1; visibility: visible; }

.mobile-nav {
    position: fixed; top: 0; right: 0; z-index: 110;
    width: min(320px, 84vw); height: 100dvh;
    padding: 6rem 1.8rem 2rem;
    background: var(--cream); box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform .34s var(--ease);
    display: flex; flex-direction: column; gap: .2rem; overflow-y: auto;
}
.mobile-nav.active { transform: none; }
.mobile-nav a {
    padding: .9rem 0;
    border-bottom: 1px solid rgba(196, 154, 114, .2);
    font-size: 1rem; letter-spacing: .06em; text-transform: uppercase;
    color: var(--ink);
}
.mobile-nav a:hover { color: var(--bronze); }
.mobile-booking-item {
    display: inline-flex !important; align-items: center; justify-content: center;
    gap: .6rem; margin-top: 1.4rem;
    padding: .9rem 1.2rem !important; border: 0 !important; border-radius: 999px;
    background: var(--bronze); color: var(--white) !important; font-size: .86rem !important;
}

/* ---------- Hero ---------- */
.hero {
    position: relative;
    padding: clamp(3rem, 6vw, 5rem) 0 clamp(4rem, 7vw, 6rem);
    background:
        radial-gradient(900px 500px at 82% 12%, rgba(231, 216, 198, .55), transparent 70%),
        radial-gradient(700px 420px at 8% 78%, rgba(240, 228, 214, .6), transparent 68%),
        var(--cream);
    overflow: hidden;
}
.hero-inner {
    display: grid;
    grid-template-columns: 1.02fr .98fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}

.hero-headline { margin-bottom: 1.2rem; }
.hero-lead { display: block; color: var(--ink); }

/* Die Woerter liegen gestapelt uebereinander, deshalb springt die Zeile
   beim Wechsel nicht und die Ueberschrift behaelt ihre Hoehe. */
.hero-words { display: inline-grid; font-style: italic; color: var(--bronze); }
.hero-word {
    grid-area: 1 / 1;
    opacity: 0; transform: translateY(12px);
    transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.hero-word.is-on { opacity: 1; transform: none; }

.hero-subtitle { max-width: 52ch; font-size: 1.05rem; color: var(--ink-soft); }
.hero-buttons { display: flex; flex-wrap: wrap; gap: .9rem; margin: 2rem 0 0; }

.hero-facts {
    list-style: none; margin: 2rem 0 0; padding: 0;
    display: grid; gap: .6rem; font-size: .9rem; color: var(--ink-soft);
}
.hero-facts li { display: flex; align-items: center; gap: .65rem; }
.hero-facts .ic { color: var(--tan); }

/* Grosses Bild im Bogen, daneben ein kleineres im Rahmen – der Gegensatz
   der beiden Formen macht den Bogen erst als Absicht lesbar. */
.hero-visual { position: relative; padding-bottom: 3.5rem; }
.hero-arch .dia-buehne img { object-position: 22% center; }
/* Die Punkte der Hero-Diashow sitzen knapp unter dem Bogen und links –
   mittig lag der letzte Punkt hinter dem Nagelbild, das rechts unten
   ueber den Bogen ragt. */
.hero-arch .dia-punkte {
    margin-top: .5rem;
    justify-content: flex-start;
    padding-left: .4rem;
}
.hero-klein {
    position: absolute; right: -1rem; bottom: 0;
    width: 44%; aspect-ratio: 1;
    border: 6px solid var(--cream);
    box-shadow: var(--shadow-lg);
}

.scroll-hint {
    position: absolute; left: 50%; bottom: 1.6rem; translate: -50% 0;
    width: 22px; height: 36px;
    border: 1px solid var(--sand); border-radius: 999px;
}
.scroll-hint span {
    position: absolute; left: 50%; top: 8px; translate: -50% 0;
    width: 3px; height: 7px; border-radius: 2px; background: var(--tan);
    animation: scrollDot 1.9s var(--ease) infinite;
}
@keyframes scrollDot {
    0%, 100% { transform: translateY(0); opacity: 1; }
    60%      { transform: translateY(12px); opacity: 0; }
}

/* ---------- Abschnittskopf ---------- */
.section-header { max-width: 62ch; margin: 0 auto 3.4rem; text-align: center; }
.section-header p { color: var(--ink-soft); margin-bottom: 0; }

.rating-line {
    display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: .5rem; margin-top: 1.2rem !important;
    padding: .5rem 1.2rem;
    border: 1px solid var(--sand); border-radius: 999px;
    background: var(--white); font-size: .88rem;
}
.rating-stars { display: inline-flex; gap: .1rem; color: var(--tan); }
.rating-line strong { color: var(--ink); font-weight: 500; }

/* ---------- Studio ---------- */
.about { padding: clamp(4rem, 8vw, 7rem) 0; background: var(--cream-deep); }
/* Mittig statt oben ausgerichtet: die Textspalte ist kuerzer als das
   hochkantige Portrait, und mittig verteilt sich die Luft oben und
   unten statt als Loch darunter zu stehen. Die Bildspalte ist zusaetzlich
   gedeckelt, damit das Portrait die Seite nicht dominiert. */
.about-grid {
    display: grid; grid-template-columns: .8fr 1.2fr;
    gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.about-media { max-width: 420px; }

.about-media { position: relative; }
/* 2:3 wie die Aufnahme selbst. Bei 3:4 schnitt der Bogen oben und
   unten etwas weg – genau dort sitzen Kopf und Haende. */
.about-portrait { aspect-ratio: 2 / 3; }
.about-caption { margin-top: 1.1rem; text-align: center; line-height: 1.4; }
.about-caption strong {
    display: block; font-family: var(--font-head);
    font-size: 1.4rem; font-weight: 500; color: var(--ink);
}
.about-caption span {
    font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--tan-text);
}
.about-content p { color: var(--ink-soft); }
.about-quote {
    position: relative; margin: 0 0 1.6rem;
    padding: 1.3rem 1.5rem 1.3rem 3.4rem;
    border-left: 2px solid var(--tan);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: var(--white);
}
.about-quote p {
    margin: 0; font-family: var(--font-head);
    font-size: 1.3rem; font-style: italic; line-height: 1.45; color: var(--ink) !important;
}
.quote-glyph { position: absolute; left: 1.2rem; top: 1.5rem; width: 1.3rem; height: 1.3rem; color: var(--sand); }

/* ---------- Preise ---------- */
.services { padding: clamp(4rem, 8vw, 7rem) 0; }

.service-accordion { max-width: 920px; margin-inline: auto; display: grid; gap: .7rem; }
.accordion-item {
    border: 1px solid var(--sand); border-radius: var(--radius);
    background: var(--white); overflow: hidden;
    transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.accordion-item.active { border-color: var(--tan); box-shadow: var(--shadow-md); }
.accordion-header {
    display: flex; align-items: center; gap: 1rem;
    width: 100%; padding: 1.15rem 1.4rem;
    border: 0; background: none; font-family: inherit; color: inherit;
    text-align: left; cursor: pointer;
}
.accordion-header h3 { flex: 1; margin: 0; font-size: clamp(1.15rem, 1.8vw, 1.4rem); }
.accordion-meta {
    min-width: 1.9rem; height: 1.9rem; display: grid; place-items: center;
    border-radius: 50%; background: var(--sand-soft);
    font-size: .76rem; color: var(--bronze);
}
.accordion-chevron { width: 1.2rem; height: 1.2rem; color: var(--tan); transition: transform .3s var(--ease); }
.accordion-item.active .accordion-chevron { transform: rotate(180deg); }

/* grid-template-rows 0fr -> 1fr blendet auf, ohne dass eine Maximalhoehe
   geraten werden muss – bei bis zu zwoelf Zeilen je Gruppe waere jede
   geratene Hoehe entweder zu klein oder zu traege. */
.accordion-content { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .36s var(--ease); }
.accordion-item.active .accordion-content { grid-template-rows: 1fr; }
.service-list { overflow: hidden; }
.accordion-item.active .service-list { padding: 0 1.4rem 1.3rem; }

.service-note {
    margin: 0 0 1rem; padding: .7rem .95rem; border-radius: 10px;
    background: var(--sand-soft); font-size: .86rem; color: var(--ink-soft);
}
.service-item {
    display: grid; grid-template-columns: 1fr auto auto;
    align-items: baseline; gap: .4rem 1rem;
    padding: .72rem 0; border-bottom: 1px dashed rgba(196, 154, 114, .3);
}
.service-item:last-child { border-bottom: 0; }
.service-name { font-size: .97rem; }
.service-duration { font-size: .8rem; color: var(--ink-faint); white-space: nowrap; }
.service-price {
    font-family: var(--font-head); font-size: 1.2rem; font-weight: 600;
    color: var(--bronze); white-space: nowrap; min-width: 6.2rem; text-align: right;
    font-variant-numeric: lining-nums tabular-nums;
}

.services-cta {
    max-width: 720px; margin: 3.4rem auto 0; padding: 2.2rem 1.6rem;
    border: 1px solid var(--sand); border-radius: var(--radius);
    background: var(--cream-deep); text-align: center;
}
.services-cta p { color: var(--ink-soft); }

/* ---------- Galerie ---------- */
.gallery { padding: clamp(4rem, 8vw, 7rem) 0; background: var(--cream-deep); }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.4rem; }
.gallery-item { aspect-ratio: 1; cursor: zoom-in; }
.gallery-item { position: relative; }
.gallery-item img { transition: transform .7s var(--ease); }
.gallery-item:hover img { transform: scale(1.06); }

/* Beim Darueberfahren legt sich ein warmer Schleier mit Lupe darueber –
   erst dadurch ist zu erkennen, dass die Bilder anklickbar sind. */
.gallery-item::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(51,44,37,0), rgba(51,44,37,.34));
    opacity: 0;
    transition: opacity .4s var(--ease);
    pointer-events: none;
}
.gallery-item .lupe {
    position: absolute; left: 50%; top: 50%;
    translate: -50% -50%;
    display: grid; place-items: center;
    width: 3rem; height: 3rem;
    border: 1px solid rgba(250, 246, 240, .8);
    border-radius: 50%;
    color: var(--cream);
    opacity: 0;
    transform: translateY(10px) scale(.9);
    transition: opacity .4s var(--ease), transform .4s var(--ease);
    pointer-events: none;
}
.gallery-item:hover::after { opacity: 1; }
.gallery-item:hover .lupe { opacity: 1; transform: translateY(0) scale(1); }

.lightbox {
    position: fixed; inset: 0; z-index: 160;
    display: none; place-items: center; padding: 4vmin;
    background: rgba(51, 44, 37, .92);
}
.lightbox.active { display: grid; }
.lightbox-content { max-width: 92vw; max-height: 88vh; border-radius: var(--radius); }
.lightbox-close { position: absolute; top: 1.4rem; right: 1.6rem; color: var(--cream); cursor: pointer; }
.lightbox-close .ic { width: 30px; height: 30px; }

/* ---------- Monogramm-Band ----------
   Das eigene Zeichen des Salons, versetzt wiederholt. Uebernommen ist vom
   Monogram Canvas nur das Kompositionsprinzip; Motiv und Farbe sind die
   des Studios. Bewusst als abgegrenzter Streifen und nicht als Flaeche
   hinter dem Inhalt – unter Text muesste es auf wenige Prozent herunter. */
.monogram-band {
    position: relative;
    height: clamp(92px, 10vw, 128px);
    background: var(--cream);
    border-block: 1px solid rgba(196, 154, 114, .22);
    overflow: hidden;
}
.monogram-band::before {
    content: ''; position: absolute; inset: 0;
    opacity: .34;
    background-image: url('img/monogram-tile.png?v=3');
    /* "auto 200%" zeigt die obere Haelfte der Kachel, also genau eine
       Motivreihe, mittig im Band. */
    background-size: auto 200%;
    background-position: left top;
}

/* ---------- Bewertungen ---------- */
.testimonials { padding: clamp(4rem, 8vw, 7rem) 0; }
/* Karussell: alle Karten liegen auf demselben Rasterfeld, sichtbar ist
   immer eine. script.js baut die Punkte und schaltet weiter. */
.testimonials-slider {
    display: grid;
    max-width: 760px;
    margin-inline: auto;
}
.testimonial-card {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: opacity .5s var(--ease), transform .5s var(--ease), visibility .5s;
}
.testimonial-card.active { opacity: 1; visibility: visible; transform: none; }

/* Sichtbar ist ein Punkt von 8 px, anfassbar eine Flaeche von 30x30.
   Ein 8-px-Knopf ist mit dem Finger nicht zu treffen – derselbe Fehler
   war in einer frueheren Fassung schon einmal drin. */
.slider-dots { display: flex; justify-content: center; gap: .2rem; margin-top: 1.4rem; }
.slider-dots .dot {
    position: relative;
    width: 30px; height: 30px;
    padding: 0; border: 0; background: none; cursor: pointer;
}
.slider-dots .dot::after {
    content: '';
    position: absolute; top: 50%; left: 50%;
    translate: -50% -50%;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--sand);
    transition: background .25s var(--ease), width .25s var(--ease);
}
.slider-dots .dot.active::after { width: 24px; border-radius: 999px; background: var(--tan); }
.slider-dots .dot:hover::after { background: var(--tan); }

.testimonial-card {
    padding: 2.2rem 1.8rem 1.8rem;
    border: 1px solid var(--sand); border-radius: var(--radius);
    background: var(--white); box-shadow: var(--shadow-sm);
    text-align: center;
    display: flex; flex-direction: column;
}
.testimonial-card .quote-glyph {
    position: static; width: 1.7rem; height: 1.7rem;
    margin: 0 auto .7rem; color: var(--sand);
}
.review-stars { display: flex; justify-content: center; gap: .18rem; margin-bottom: .9rem; color: var(--tan); }
.review-text {
    font-family: var(--font-head);
    font-size: 1.12rem; font-style: italic; line-height: 1.55;
    color: var(--ink); flex: 1;
}
.review-author { display: inline-flex; align-items: center; justify-content: center; gap: .8rem; margin-top: 1.2rem; }
.author-avatar {
    width: 2.6rem; height: 2.6rem; display: grid; place-items: center;
    border-radius: 50%; background: var(--sand-soft);
    font-size: .85rem; font-weight: 500; color: var(--bronze);
}
.author-info { display: flex; flex-direction: column; text-align: left; line-height: 1.35; }
.author-info strong { font-weight: 500; }
.author-info span { font-size: .76rem; color: var(--ink-faint); }

/* ---------- Besuch ---------- */
.visit { padding: clamp(4rem, 8vw, 7rem) 0; background: var(--cream-deep); }
.visit-grid {
    display: grid; grid-template-columns: 1.05fr .95fr;
    gap: clamp(2rem, 4vw, 3.4rem); align-items: start;
}
.visit-map-link { position: relative; display: block; aspect-ratio: 4 / 3; }

/* ---------- Diashow ----------
   Ein Baustein fuer alle Stellen. Die Form kommt ueber eine Zusatzklasse
   an der Buehne: dia-bogen fuer den Rundbogen im Hero, dia-eckig fuer
   den weichen Rahmen im Kontaktabschnitt. */
.dia-buehne {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--sand-soft);
    box-shadow: var(--shadow-md);
}
.dia-bogen { border-radius: var(--arch); aspect-ratio: 4 / 3.2; }
.dia-eckig { border-radius: var(--radius); }

.dia-buehne img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity 1.1s var(--ease), transform 6s linear;
}
/* Das sichtbare Bild zoomt waehrend seiner Standzeit unmerklich heran –
   eine ruhige Kamerafahrt statt eines Standbilds. */
.dia-buehne img.is-on { opacity: 1; transform: scale(1); }

.dia-pfeil {
    position: absolute;
    top: 50%; translate: 0 -50%;
    z-index: 3;
    display: grid; place-items: center;
    width: 2.8rem; height: 2.8rem;
    border: 0; border-radius: 50%;
    background: rgba(250, 246, 240, .9);
    color: var(--bronze);
    cursor: pointer;
    opacity: 0;
    transition: opacity .3s var(--ease), background .3s var(--ease);
    box-shadow: var(--shadow-sm);
}
.dia-pfeil .ic { width: 1.2rem; height: 1.2rem; }
.dia-zurueck { left: .9rem; }
.dia-zurueck .ic { transform: rotate(90deg); }
.dia-vor { right: .9rem; }
.dia-vor .ic { transform: rotate(-90deg); }
.diashow:hover .dia-pfeil,
.dia-pfeil:focus-visible { opacity: 1; }
.dia-pfeil:hover { background: var(--cream); }

/* Ohne Maus gibt es kein Darueberfahren – dort stehen die Pfeile
   dauerhaft, sonst waeren sie unerreichbar. */
@media (hover: none) {
    .dia-pfeil { opacity: 1; width: 2.5rem; height: 2.5rem; }
    .dia-zurueck { left: .6rem; }
    .dia-vor { right: .6rem; }
}

.dia-punkte { display: flex; justify-content: center; gap: .2rem; margin-top: 1rem; }
.dia-punkte button {
    position: relative;
    width: 30px; height: 30px;
    padding: 0; border: 0; background: none; cursor: pointer;
}
.dia-punkte button::after {
    content: '';
    position: absolute; top: 50%; left: 50%;
    translate: -50% -50%;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--sand);
    transition: background .25s var(--ease), width .25s var(--ease);
}
.dia-punkte button.active::after { width: 24px; border-radius: 999px; background: var(--tan); }
.dia-punkte button:hover::after { background: var(--tan); }

/* Der Kartenverweis steht jetzt unter der Diashow statt darauf – auf
   dem Bild lag er den Pfeilen im Weg. */
.link-maps {
    display: inline-flex; align-items: center; gap: .5rem;
    margin-top: .9rem;
    font-size: .82rem; color: var(--tan-text);
}
.link-maps:hover { color: var(--bronze-deep); }

/* Zweites Bild darunter: sonst endete die linke Spalte deutlich frueher
   als die Kontaktkarte rechts. */
.visit-zweit { margin-top: 1.4rem; aspect-ratio: 16 / 10; }

.visit-info {
    padding: 2.2rem;
    border: 1px solid var(--sand); border-radius: var(--radius);
    background: var(--white); box-shadow: var(--shadow-sm);
}
.visit-info h3 {
    margin-bottom: .2rem; font-size: 1.7rem;
    letter-spacing: .08em; text-transform: uppercase; color: var(--bronze);
    font-variant-numeric: lining-nums;
}
.visit-sub {
    display: block; margin-bottom: 1.6rem;
    font-size: .68rem; letter-spacing: .28em; text-transform: uppercase; color: var(--tan-text);
}
.visit-list { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .9rem; }
.visit-list li { display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; align-items: start; font-size: .95rem; }
.visit-list .ic { margin-top: .35rem; color: var(--tan); }
.visit-list a { color: var(--ink); }
.visit-list a:hover { color: var(--bronze); }
.visit-list small { grid-column: 2; font-size: .82rem; color: var(--ink-faint); }

.status-pill {
    display: inline-flex; align-items: center; gap: .55rem; margin: 0;
    padding: .42rem 1rem; border: 1px solid var(--sand); border-radius: 999px;
    background: var(--white); font-size: .82rem; color: var(--ink-soft);
}
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-faint); }
.status-pill.is-open { border-color: rgba(106, 148, 96, .4); color: #47653E; }
.status-pill.is-open .status-dot { background: #6A9460; box-shadow: 0 0 0 4px rgba(106, 148, 96, .18); }

.opening-hours { margin: 1.4rem 0; padding: 1.1rem 1.2rem; border-radius: 10px; background: var(--sand-soft); }
.opening-hours strong {
    display: block; margin-bottom: .5rem;
    font-size: .72rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--bronze);
}
.opening-hours p { margin: 0; font-size: .92rem; color: var(--ink-soft); }

.visit-note { margin: 1rem 0 0; font-size: .8rem; color: var(--ink-faint); text-align: center; }

/* ---------- Fuss ---------- */
footer {
    padding: clamp(3rem, 6vw, 4.5rem) 0 2rem;
    background: var(--ink); color: rgba(250, 246, 240, .74);
    font-size: .9rem;
}
footer a { color: rgba(250, 246, 240, .74); }
footer a:hover { color: var(--tan); }

.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1.2fr 1fr; gap: 2.4rem; }
.footer-brand .logo-name { color: var(--cream); display: block; }
.footer-brand .logo-sub { color: var(--tan); display: block; margin-bottom: 1rem; }
.footer-brand p { margin: 0; line-height: 1.7; }
.footer-mark { width: 42px; height: 42px; margin-bottom: .7rem; }

.footer-col h4 {
    margin-bottom: 1rem; font-family: var(--font-body);
    font-size: .72rem; font-weight: 500; letter-spacing: .22em;
    text-transform: uppercase; color: var(--tan);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.footer-hours { display: grid; gap: .3rem; margin-top: 1.1rem; font-size: .84rem; color: rgba(250, 246, 240, .56); }
.footer-social { display: flex; gap: .7rem; margin-top: 1.2rem; }
.footer-social a {
    display: grid; place-items: center; width: 2.3rem; height: 2.3rem;
    border: 1px solid rgba(250, 246, 240, .2); border-radius: 50%;
}
.footer-social a:hover { border-color: var(--tan); }

.footer-bottom {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem;
    margin-top: 3rem; padding-top: 1.6rem;
    border-top: 1px solid rgba(250, 246, 240, .14);
    font-size: .8rem; color: rgba(250, 246, 240, .52);
}
.footer-credit { color: rgba(250, 246, 240, .62); }

/* ---------- Schwebender Knopf ---------- */
.float-booking {
    position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 90;
    display: inline-flex; align-items: center; gap: .6rem;
    padding: .85rem 1.3rem; border-radius: 999px;
    background: var(--bronze); color: var(--white);
    font-size: .88rem; font-weight: 500; letter-spacing: .04em;
    box-shadow: var(--shadow-md);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.float-booking:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); color: var(--white); }

/* ============================================================
   Schmalere Bildschirme
   ============================================================ */

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

@media (max-width: 900px) {
    .desktop-only { display: none; }
    .menu-toggle { display: block; }

    .hero-inner,
    .about-grid,
    .visit-grid { grid-template-columns: 1fr; }

    /* justify-self statt margin-inline: auto. Auf einem Rasterelement
       schaltet ein automatischer Aussenabstand das Dehnen ab – das
       Element faellt dann auf seine Inhaltsbreite zusammen, und die
       Diashow schrumpfte damit auf 136 px. */
    .hero-visual { order: -1; width: min(520px, 100%); justify-self: center; }
    .hero-klein { width: 40%; right: 0; }
    .scroll-hint { display: none; }

    .about-media { width: min(420px, 100%); justify-self: center; }
    .section-header { margin-bottom: 2.6rem; }
}

@media (max-width: 620px) {
    body { font-size: 16px; }
    .container { width: min(1200px, 100% - 32px); }

    .top-bar .container { gap: .2rem 1.2rem; font-size: .74rem; }
    .logo-mark { width: 38px; height: 38px; }
    .logo-name { font-size: 1.3rem; }
    .logo-sub { font-size: .5rem; letter-spacing: .24em; }

    .hero-buttons .btn { width: 100%; }

    /* Knopftexte duerfen umbrechen – "Alle Bewertungen auf Treatwell" ist
       mit nowrap breiter als ein 390-px-Bildschirm. */
    .btn { white-space: normal; }
    .center-cta .btn { max-width: 100%; }

    /* Bei schmaler Spalte rutscht die Dauer unter die Leistung, damit der
       Preis nicht auf zwei Zeilen umbricht. */
    .service-item { grid-template-columns: 1fr auto; }
    .service-name { grid-column: 1; }
    .service-duration { grid-column: 1; grid-row: 2; }
    .service-price { grid-column: 2; grid-row: 1 / span 2; align-self: center; }

    .about-quote { padding: 1.1rem 1.1rem 1.1rem 2.9rem; }
    .about-quote p { font-size: 1.15rem; }

    .testimonial-card { padding: 1.8rem 1.3rem 1.6rem; }
    .reviews-grid { grid-template-columns: 1fr; }
    .visit-info { padding: 1.6rem 1.3rem; }

    .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
    .footer-bottom { justify-content: center; text-align: center; }

    .float-booking span { display: none; }
    .float-booking { width: 3.4rem; height: 3.4rem; padding: 0; justify-content: center; }
    .float-booking .ic { width: 1.5rem; height: 1.5rem; }
}

@media print {
    .top-bar, header, .mobile-nav, .nav-overlay, .float-booking,
    .scroll-progress, .scroll-hint, .lightbox, .monogram-band { display: none !important; }
    .accordion-content { grid-template-rows: 1fr !important; }
    .service-list { padding: 0 0 1rem !important; }
    body { background: #fff; }
}