/* ==========================================================================
   Naz Beauty Studio – style.css
   Reihenfolge: Tokens · Schriften · Basis · Bausteine · Hero (Endbild) ·
   Hero-Sequenz (nur als Enhancement) · Abschnitte · Mobil
   ========================================================================== */

:root {
  --weiss: #FDFCFA;
  --rose: #F7E9E7;
  --rose-tief: #E4C4BF;
  --gold: #B08D57;        /* nur Linien und Ornament, nie Text */
  --gold-tief: #8A6A3A;   /* lesbares Gold: Text ab 24px auf Rosé, jede Größe auf Weiß, Fokusringe */
  --tinte: #2E2521;

  --serif: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --sans: "Jost", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --t-wortmarke: clamp(2.75rem, min(9vw, 13svh), 7rem);
  --t-display: clamp(2.5rem, 5vw, 4rem);
  --t-zitat: clamp(2.5rem, 4vw, 3rem);
  --t-lead: clamp(1.1875rem, 2vw, 1.375rem);
  --t-body: 1.0625rem;
  --t-h3: 1.125rem;
  --t-ui: .9375rem;
  --t-small: .875rem;

  --abschnitt: clamp(4rem, 10vw, 8rem);
  --rand: clamp(1.25rem, 5vw, 4rem);
  --spalte: 75rem;
  --mass: 34rem;
}

/* --- Schriften (selbst gehostet, OFL) ------------------------------------ */
@font-face { font-family: "Cormorant Garamond"; font-weight: 300; font-style: normal; font-display: swap; src: url("../fonts/cormorant-garamond-300.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/cormorant-garamond-500.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 300; font-style: normal; font-display: swap; src: url("../fonts/jost-300.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/jost-400.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/jost-500.woff2") format("woff2"); }

/* --- Basis --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--weiss);
  color: var(--tinte);
  font: 400 var(--t-body) / 1.65 var(--sans);
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-color: var(--gold-tief); text-underline-offset: .18em; }
h1, h2, h3, p, figure, blockquote, dl, dd, address, ul { margin: 0; }
ul { padding: 0; list-style: none; }
address { font-style: normal; }
:focus-visible { outline: 2px solid var(--gold-tief); outline-offset: 3px; }

/* --- Typo-Bausteine ------------------------------------------------------ */
.h2 { font: 300 var(--t-display) / 1.05 var(--serif); max-width: 20ch; }
.h3 { font: 500 var(--t-h3) / 1.35 var(--sans); }
.lead { font: 300 var(--t-lead) / 1.5 var(--sans); max-width: var(--mass); margin-top: 1.5rem; }
.zitat { font: 500 var(--t-zitat) / 1.15 var(--serif); max-width: 18ch; margin-top: 1.5rem; }
p { max-width: var(--mass); }
.klein { font-size: var(--t-small); }
.note { font-weight: 500; }

.knopf {
  display: inline-block;
  font: 500 var(--t-ui) / 1 var(--sans);
  letter-spacing: .02em;
  padding: 1rem 1.5rem;
  background: var(--tinte);
  color: var(--weiss);
  border: 1px solid var(--tinte);
  text-decoration: none;
}
.knopf.zweit { background: transparent; color: var(--tinte); border-color: var(--gold-tief); }

/* --- Abschnitte ---------------------------------------------------------- */
.abschnitt { padding: var(--abschnitt) var(--rand); }
.innen { max-width: var(--spalte); margin-inline: auto; }
.rosa { background: var(--rose); }

/* Trenner: eine Goldlinie über die ganze Breite, drei Blumen aus der Zelle in der Mitte */
.trenner {
  display: flex; align-items: center; justify-content: center; gap: .75rem;
  padding: 0 var(--rand);
  background: var(--weiss);
}
.trenner::before, .trenner::after { content: ""; flex: 1; height: 1px; background: var(--gold); }
.trenner img {
  width: 1.75rem; height: 1.75rem;
  padding: 2px; border: 1px solid var(--gold); border-radius: 50%;
  background: var(--weiss);
}
.trenner.rosa { background: var(--rose); }
.trenner.rosa img { background: var(--rose); }

/* Platzhalter: ehrlich beschriftet, richtige Proportion */
.platzhalter {
  display: grid; place-items: center;
  background: var(--rose);
  border: 1px solid var(--rose-tief);
  color: var(--tinte);
  font-size: var(--t-small);
  text-align: center;
  padding: 1rem;
  text-decoration: none;
}
.rosa .platzhalter { background: var(--weiss); }
.platzhalter span { max-width: 18ch; }
.platzhalter.hoch { aspect-ratio: 3 / 4; }

/* --- Kopf ---------------------------------------------------------------- */
.kopf {
  position: absolute; inset: 0 0 auto 0; z-index: 5;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.25rem var(--rand);
  font: 500 var(--t-ui) / 1 var(--sans);
  letter-spacing: .02em;
}
.kopf a { text-decoration: none; }
.kopf nav { display: flex; gap: 2rem; }

/* --- Hero: das Endbild (Basis für alle Browser) -------------------------- */
.tz-track { height: 160svh; position: relative; }
.tz-stage {
  position: sticky; top: 0;
  height: 100svh;
  overflow: hidden;
  background: var(--weiss);
}
.tz-strasse {
  display: none;                     /* nur in der Sequenz sichtbar */
  position: absolute; top: 0; left: 50%;
  height: 100svh; width: auto; max-width: none;
  translate: -50% 0;
  transform-origin: 44% 52%;         /* die Tür */
}
.tz-zelle {
  position: absolute;
  right: var(--rand); top: 50%;
  height: 72svh; aspect-ratio: 541 / 1000;
  translate: 0 -50%;
}
.tz-zelle img { width: 100%; height: 100%; object-fit: cover; }
.tz-text {
  position: absolute; left: var(--rand); top: 50%;
  translate: 0 -50%;
  width: calc(100% - 2 * var(--rand) - 72svh * .541 - 3rem);
  max-width: 44rem;
}
.wortmarke {
  font: 300 var(--t-wortmarke) / .95 var(--serif);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.wortmarke .zeile { display: block; white-space: nowrap; }
.wortmarke .b { display: inline-block; }
.tz-linie { height: 1px; width: min(100%, 22rem); background: var(--gold); margin-top: 1.5rem; transform-origin: left center; }
.tz-sub { font: 300 var(--t-lead) / 1.5 var(--sans); margin-top: 1.25rem; max-width: 30rem; }
.tz-cta { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-top: 2rem; }
.tz-tel { font: 500 var(--t-ui) / 1 var(--sans); letter-spacing: .02em; }

/* --- Hero: die Sequenz (nur wenn der Browser sie sauber kann) ------------ */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .tz-track { view-timeline: --tz block; }
    .tz-strasse, .tz-zelle, .tz-linie, .tz-sub, .tz-cta {
      animation-timing-function: linear; animation-fill-mode: both; animation-timeline: --tz;
    }

    /* 1 · Straße: halten, dann hineingehen (Zoom auf die Tür), ausblenden */
    .tz-strasse {
      display: block;
      animation-name: tz-strasse;
      animation-range: contain 8% contain 50%;
    }
    @keyframes tz-strasse {
      0%   { transform: scale(1);   opacity: 1; animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
      65%  { opacity: 1; }
      100% { transform: scale(2.3); opacity: 0; }
    }

    /* 2 · Zelle: kommt groß in der Mitte an und setzt sich rechts in den Rahmen */
    .tz-zelle {
      --zelle-w: calc(72svh * .541);
      --dx: calc(-50vw + var(--rand) + var(--zelle-w) / 2);
      animation-name: tz-zelle;
      animation-range: contain 34% contain 72%;
    }
    /* ankommen (wächst weiter, wie der Zoom davor), dann in den Rahmen zurücktreten */
    @keyframes tz-zelle {
      0%   { transform: translateX(var(--dx)) scale(1.2);  opacity: 0; }
      32%  { transform: translateX(var(--dx)) scale(1.48); opacity: 1; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
      100% { transform: translateX(0) scale(1); opacity: 1; }
    }

    /* 3 · Wortmarke: Buchstaben laufen aus enger Setzung an ihren Platz (nur transform) */
    .wortmarke .b {
      animation-name: tz-buchstabe;
      animation-timing-function: cubic-bezier(.2, .6, .2, 1);
      animation-fill-mode: both;
      animation-timeline: --tz;
      animation-range: contain calc(56% + var(--i) * 1%) contain calc(78% + var(--i) * 1%);
    }
    @keyframes tz-buchstabe {
      from { transform: translateX(calc(var(--i) * -.28em)); opacity: 0; }
      to   { transform: translateX(0); opacity: 1; }
    }

    /* 4 · Goldlinie und Unterzeile */
    .tz-linie { animation-name: tz-linie; animation-range: contain 74% contain 90%; }
    @keyframes tz-linie { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    .tz-sub { animation-name: tz-auf; animation-range: contain 78% contain 92%; }

    /* 5 · CTA */
    .tz-cta { animation-name: tz-auf; animation-range: contain 88% contain 100%; }
    @keyframes tz-auf {
      from { transform: translateY(.5rem); opacity: 0; }
      to   { transform: translateY(0); opacity: 1; }
    }
  }
}

/* --- 2 · Haarentfernung ------------------------------------------------- */
.drei { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; margin-top: 4rem; }
.drei p, .sitzung p { margin-top: .75rem; }
.sitzung { margin-top: 4rem; }
.nisv { margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--gold); display: grid; gap: 2rem; justify-items: start; }

/* --- 3 · Behandlungen: Tabelle mit Haarlinien, keine Karten ------------- */
.tabelle {
  display: grid; grid-template-columns: repeat(5, 1fr);
  margin-top: 4rem;
  border-top: 1px solid var(--rose-tief); border-left: 1px solid var(--rose-tief);
}
.tabelle li {
  display: flex; flex-direction: column; gap: .5rem;
  padding: 1.5rem 1.25rem 1.25rem;
  border-right: 1px solid var(--rose-tief); border-bottom: 1px solid var(--rose-tief);
  min-height: 12rem;
}
.tabelle p { font-size: var(--t-ui); line-height: 1.5; }
.preis { margin-top: auto; padding-top: 1rem; font: 500 var(--t-ui) / 1 var(--sans); font-variant-numeric: tabular-nums; }

/* --- 4 · Vorher / Nachher ----------------------------------------------- */
.paar { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 4rem; max-width: 56rem; }
.paar .platzhalter { aspect-ratio: 4 / 5; }
.paar figcaption { grid-column: 1 / -1; font-size: var(--t-small); margin-top: .5rem; }
.paar + .paar { margin-top: 5rem; }

/* --- 5 · Mutter und Tochter -------------------------------------------- */
.story { display: grid; grid-template-columns: minmax(0, 34rem) minmax(16rem, 22rem); gap: 4rem; align-items: start; margin-top: 3rem; }
.prosa p + p { margin-top: 1.25rem; }

/* --- 6 · Bewertungen ---------------------------------------------------- */
.stimmen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; margin-top: 4rem; }
.stimmen blockquote p { font: 300 var(--t-lead) / 1.45 var(--sans); }
.stimmen footer { margin-top: 1rem; font-size: var(--t-small); }
#bewertungen .klein { margin-top: 3rem; }

/* --- 7 · Anfahrt --------------------------------------------------------- */
.anfahrt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 4rem; margin-top: 3rem; align-items: start; }
.zeiten { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.5rem; margin-top: 2rem; }
.zeiten dt { font-weight: 500; }
.anfahrt address + .zeiten + p { margin-top: 2rem; }
.karte { aspect-ratio: 4 / 3; }

/* --- 8 · Termin ---------------------------------------------------------- */
.grosse-nummer {
  display: inline-block; margin-top: 2rem;
  font: 300 var(--t-display) / 1 var(--serif);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.termin-knoepfe { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.5rem; }

/* --- Fuß ----------------------------------------------------------------- */
.fuss { border-top: 1px solid var(--gold); padding: 2.5rem var(--rand); font-size: var(--t-small); }
.fuss .innen { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.fuss nav { display: flex; gap: 1.5rem; flex-wrap: wrap; }

/* --- Leiste (nur mobil) -------------------------------------------------- */
.leiste { display: none; }

/* ==========================================================================
   Mobil und Tablet
   ========================================================================== */
@media (max-width: 63.99em) {
  .tabelle { grid-template-columns: repeat(2, 1fr); }
  .stimmen, .drei { grid-template-columns: 1fr; gap: 2.5rem; }
  .story, .anfahrt { grid-template-columns: 1fr; gap: 3rem; }
  .story .platzhalter { max-width: 22rem; }
}

@media (max-width: 47.99em) {
  .kopf nav a:not([href="#termin"]) { display: none; }
  .tabelle { grid-template-columns: 1fr; }
  .tabelle li { min-height: 0; }
  .paar { gap: .75rem; }

  /* Hero-Endbild mobil: Zelle oben rechts, Text darunter */
  .tz-strasse { left: 0; width: 100%; translate: 0 0; object-fit: cover; }
  .tz-zelle { top: 9svh; right: var(--rand); height: 32svh; translate: 0 0; }
  /* Text am unteren Rand verankert, damit er nie unter die Leiste rutscht */
  .tz-text { top: auto; bottom: calc(3.5rem + env(safe-area-inset-bottom) + 4svh); translate: 0 0; width: calc(100% - 2 * var(--rand)); max-width: none; }
  .wortmarke { font-size: clamp(2.25rem, 10vw, 3rem); }
  .tz-sub { font-size: var(--t-body); }
  .tz-cta { margin-top: 1.5rem; gap: 1rem; }

  body { padding-bottom: calc(3.5rem + env(safe-area-inset-bottom)); }
  .leiste {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
    display: grid; grid-template-columns: 1fr 1fr;
    background: var(--weiss);
    border-top: 1px solid var(--gold);
    box-shadow: 0 -8px 24px rgba(46, 37, 33, .08);   /* der eine erlaubte Schatten */
    padding-bottom: env(safe-area-inset-bottom);
  }
  .leiste a {
    display: grid; place-items: center; height: 3.5rem;
    font: 500 var(--t-ui) / 1 var(--sans); letter-spacing: .02em; text-decoration: none;
  }
  .leiste-tel { background: var(--tinte); color: var(--weiss); }
}

@media (max-width: 22.49em) {
  .wortmarke { font-size: 2rem; }
  .tz-sub { font-size: var(--t-ui); }
  .tz-zelle { height: 30svh; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (max-width: 47.99em) {
    .tz-zelle {
      --zelle-w: calc(32svh * .541);
      --dx: calc(-50vw + var(--rand) + var(--zelle-w) / 2);
      --dy: calc(50svh - 9svh - 16svh);
    }
    @keyframes tz-zelle {
      0%   { transform: translate(var(--dx), var(--dy)) scale(2.9); opacity: 0; }
      32%  { transform: translate(var(--dx), var(--dy)) scale(3.3); opacity: 1; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
      100% { transform: translate(0, 0) scale(1); opacity: 1; }
    }
  }
}

/* Wortmarke erst nach Schriftladung (nur mit JS; ohne JS sofort sichtbar) */
.js:not(.schrift) .wortmarke { visibility: hidden; }

/* Unterseiten (Impressum, Datenschutz) */
.kopf-statisch { position: static; border-bottom: 1px solid var(--gold); }
.unterseite .abschnitt { min-height: 60svh; }