/* ============================================================================
   SALON KAMMRATH — Friseur & Beauty · Musterstadt
   Basis-Stufe (29 EUR). Standbilder, ein Einblende-Effekt je Abschnitt, dazu
   Hover und Fokus. Kein Parallax, kein Pinning, kein Scrub, kein Zaehler,
   kein `background-attachment: fixed`.

   HERKUNFT
   --------
   Uebersetzt aus dem Claude-Design-Entwurf "Salon Kammrath.dc.html"
   (Projekt b99b2291-6af3-449c-92fd-faddaef0cbd9) nach `docs/regeln/vorlagen.md`.
   Der Entwurf laedt Playfair Display und Open Sans von `fonts.googleapis.com`
   und zwoelf Fotos von `images.pexels.com`; dazu `style-hover` an rund
   fuenfundzwanzig Knoten, `style-focus` an fuenf Formularfeldern, zwei
   `<sc-if>`-Bloecke (Cookie-Hinweis, Erfolgsmeldung), `onSubmit="{{ onSubmit }}"`,
   `onClick="{{ closeCookie }}"` und eine `DCLogic`-Klasse mit eigenem Zustand.
   Nichts davon laeuft in einem Browser ohne die Claude-Design-Umgebung (V1).

   Gebaut wird nach Benedikts Entscheidung vom 20.08.2026 nur die
   Starter-Fassung. Der Entwurf sah an genau einer Stelle scroll-gebundene
   Bewegung vor — sein Zitatband traegt `background-attachment: fixed`. Das
   faellt fuer die Basis-Stufe ERSATZLOS weg und wird nicht abgeschwaecht (V7):
   das Band ist hier ein Standbild.

   UEBERTRAGBAR AUF ANDERE BRANCHEN
   --------------------------------
   Die Klassennamen sind absichtlich sachlich und nicht friseurspezifisch:
   `.hero`, `.trust`, `.about`, `.prices`, `.quote`, `.team`, `.gallery`,
   `.contact`, `.wayto`. Wer denselben Aufbau fuer eine Werkstatt, eine Praxis
   oder ein Restaurant braucht, tauscht Texte, Bilder und die drei Farbtokens —
   an der Gestaltung selbst ist nichts, was nur fuer einen Salon gilt. Die
   Preisliste (`.pricelist`) ist eine `<dl>` und traegt jede zweispaltige
   Leistung-Preis-Aufstellung.

   ABWEICHUNGEN VOM ENTWURF, JEDE MIT GRUND
   ----------------------------------------
    1. SCHRIFTEN. Der Entwurf verlangt Playfair Display (Titel) und Open Sans
       (Text). Open Sans bleibt. Playfair Display ist durch MONTSERRAT ersetzt,
       nicht durch Cormorant Garamond wie in der Ersatztabelle in
       `docs/vorlagen/uebernahme-anleitung.md`, Schritt 4. Grund: die
       Schriftzulieferung fuer diese Uebernahme ist auf
       `public/beispiele/_shared/friseur/fonts/` festgelegt, und dort liegt
       keine Serifenschrift — nur Paar A (Montserrat + Open Sans) und Paar B
       (Jost + Open Sans). Genommen ist Paar A, weil Montserrat in Versalien mit
       weiter Sperrung die gehobene Anmutung traegt, die der Entwurf ueber die
       Serife suchte. Beide Dateien sind nach `vendor/fonts/` KOPIERT, nicht
       verlinkt (V2). Zusammen 86 276 B = 84,3 KB, Budget 120 KB.
    2. KEINE KURSIVE. Zu Montserrat und Open Sans liegt kein kursiver Schnitt
       vor; `font-style: italic` erzeugt darauf eine schraeg gescherte
       Faelschung. Betont wird ueber Gewicht, Versalien und die Akzentfarbe.
    3. PFEILE UND HAKEN AUS DEM TEXT ENTFERNT. Der Entwurf setzt die Zeichen
       U+2702 (Schere), U+2766, U+260F, U+2713 (Haken), U+2302 (Haus), U+2191
       (Pfeil hoch), U+260E und U+2709 direkt in den Text. Open Sans fuehrt
       keines dieser Zeichen (Abschnitt 6 der README in `_shared/friseur`); der
       Browser holte sie aus einer Ersatzschrift, und das ist ein sichtbarer
       Stilbruch. Alle acht sind durch gezeichnete 24x24-Strichsymbole ersetzt.
       Im Einsatz sind ALLE ACHT Symbole aus `_shared/friseur/icons.svg.html`
       (scissors, hairdryer, tint-bowl, comb, clock, phone, calendar, tram),
       kopiert und nicht verlinkt (V2), dazu SECHS fuer diese Seite neu
       gezeichnete im selben Raster (check, envelope, pin, person, arrow-up,
       paper-plane) — 24x24, `stroke="currentColor"`, `stroke-width="1.5"`,
       `fill="none"`, ohne eigene Farbe, `aria-hidden="true"`.
    4. COOKIE-HINWEIS ERSATZLOS WEG (V12). Seine beiden Knoepfe riefen dieselbe
       Funktion auf und schlossen nur das Fenster; die Seite laedt ohnehin
       nichts von Dritten. Der echte kommt aus dem Zusatz `cookie-pro`. Mit ihm
       ist auch der Fusszeilenverweis "Cookie-Einstellungen" verschwunden.
    5. FACEBOOK UND INSTAGRAM WEG (V17). Beide zeigten im Entwurf auf
       `#kontakt` — ein Versprechen ohne Deckung.
    6. EINGEBETTETE KARTE WEG (V12). Der Entwurf zeigte eine gestreifte Flaeche
       mit der Aufschrift "google-maps-einbindung / anfahrt". An ihrer Stelle
       steht eine gezeichnete Lageskizze (`.map`) und daneben die Anfahrt als
       echter Text.
    7. `kmFadeUp` AM HERO IST WEG. Das LCP-Element wird nicht animiert
       (Qualitaetsuntergrenze in `docs/VORLAGEN-STUFEN.md`).
    8. `background-attachment: fixed` AM ZITATBAND IST EIN STANDBILD (V7).
    9. MOBIL ZUERST (V5). Der Entwurf zeichnet `repeat(3, 1fr)`, `1fr 1fr` und
       `1.05fr 1fr` ohne jede Bedingung; auf 360 px stuenden dort drei Kacheln
       nebeneinander. Alle Media Queries hier sind `min-width`, die schmale
       Ansicht ist der Ausgangszustand. Geprueft bei 360, 768 und 1280 px.
   10. FARBEN. Siehe Kontrastblock unten — das Gold des Entwurfs faellt als
       Textfarbe auf Hell durch und traegt dort nur noch Flaechen und Linien.
   11. ERFUNDENE DATEN (V10). Hoersterstrasse 24 / 48143 Muenster wurde
       Musterstrasse 24 / 12345 Musterstadt, 0251 / 44 12 87 wurde 0123 456789,
       `info@salon-kammrath.de` wurde `.example`, "(c) 2022" wurde 2026, und die
       Jahresmarke am Salonbild rechnet 1987 auf das laufende Jahr (39 statt 35).
   12. "Ausbildungsbetrieb der HWK" und "Mitglied der Friseurinnung Muenster"
       sind allgemein beschrieben (V11): "Ausbildungsbetrieb" und "Mitglied der
       oertlichen Friseurinnung und Ausbildungsbetrieb der zustaendigen
       Handwerkskammer". Eine Bewertungszahl gab es im Entwurf nicht und kommt
       auch nicht hinzu.
   13. SECHS GALERIEBILDER SIND FUENF. "Schere und Kamm" und "Werkzeug des
       Friseurs" zeigten dasselbe Motiv; sie sind zusammengelegt. Damit bleiben
       genau elf Bildauftraege — die Zahl, die
       `docs/vorlagen/bild-prompts-salon-kammrath.md` fuehrt.

   KONTRASTE — GERECHNET, NICHT GESCHAETZT (V9)
   --------------------------------------------
   WCAG-2.1-Relativluminanz, sRGB. Halbtransparente Schleier sind vorher im
   sRGB-Raum verrechnet, so wie der Browser es tut.

     --ink #1b1b1b        auf #fff .................... 17,2 : 1   OK
     --ink #1b1b1b        auf --paper #f7f5f2 ......... 15,8 : 1   OK
     --body #4a4a4a       auf #fff .................... 8,86 : 1   OK
     --body #4a4a4a       auf --paper ................. 8,14 : 1   OK
     --muted #6a6a6a      auf #fff .................... 5,41 : 1   OK
     --muted #6a6a6a      auf --paper ................. 4,97 : 1   OK
     --muted #6a6a6a      auf --paper-2 #faf8f5 ....... 5,10 : 1   OK

     --gold #b0904f       auf #fff .................... 3,02 : 1   FAELLT DURCH
   > Folge: Das Gold des Entwurfs traegt auf hellem Grund NIE Text. Es ist dort
   > nur noch Flaeche, Rahmen und Trennstrich. Wo der Entwurf goldenen Text
   > wollte (Vorzeilen, Preise, Verweise), traegt ihn das dunklere Gold:

     --gold-ink #83672c   auf #fff .................... 5,33 : 1   OK
     --gold-ink #83672c   auf --paper ................. 4,90 : 1   OK
     --gold-ink #83672c   auf --paper-2 ............... 5,03 : 1   OK
     #fff                 auf --gold-ink (Knopf) ...... 5,33 : 1   OK
   > Der Entwurf setzt weissen Text auf das helle Gold #b0904f — 3,02 : 1. Der
   > Knopf liegt deshalb auf dem dunkleren Gold, und das helle bleibt als
   > Rahmen und Strich sichtbar.

     --gold #b0904f       auf --dark #1b1b1b .......... 5,70 : 1   OK
     --gold #b0904f       auf --dark-2 #151515 ........ 6,04 : 1   OK
     --on-dark #c9c4ba    auf --dark .................. 9,92 : 1   OK
     #a5a099              auf --dark .................. 6,63 : 1   OK
     --foot #a5a09a       auf --dark-2 ................ 7,04 : 1   OK
     #fff                 auf --dark .................. 17,2 : 1   OK

   HERO. Schleier rgba(15,15,15,.66), flaechig. Gerechnet gegen den
   ungueltigsten denkbaren Fall — ein reinweisses Pixel im Foto (#fff), das
   unter dem Schleier zu #616161 wird. Damit gelten die Werte unabhaengig
   davon, wie hell `img/hero.jpg` spaeter ausfaellt:

     #fff                 auf #616161 ................. 6,20 : 1   OK
     --gold-lt #ecdfbe    auf #616161 ................. 4,68 : 1   OK
     #eae6df (Vorspann)   auf #616161 ................. 4,98 : 1   OK
   > Der Entwurf hatte hier einen Verlauf von 0,50 bis 0,72 Deckung. Bei 0,50
   > kaeme ein weisses Pixel auf #7c7c7c und Weiss darauf nur noch auf 4,3 : 1.
   > Deshalb flaechige 0,66 statt Verlauf.

   ZITATBAND. Schleier rgba(20,20,20,.78), reinweisses Pixel wird #484848:

     #fff                 auf #484848 ................. 9,15 : 1   OK
     --gold-lt #ecdfbe    auf #484848 ................. 6,91 : 1   OK

   FORMULARKASTEN auf --dark:

     #eee (Eingabe)       auf Feldgrund #232323 ....... 13,6 : 1   OK
     #b8b8b8 (Vorbelegung) auf #232323 ................ 7,92 : 1   OK
     --on-dark #c9c4ba (Beschriftung) auf --dark ...... 9,92 : 1   OK

   PLATZHALTER:

     --ph-ink #5d5d5d     auf --ph-bg #efece6 ......... 5,59 : 1   OK

   LAGESKIZZE (`.map`). Die Beschriftungen liegen je nach Position auf dem
   Kartengrund, auf einer Bauflaeche oder auf der Gruenflaeche. Gerechnet ist
   deshalb jede gegen die DUNKELSTE Fuellung, damit kein Wert davon abhaengt,
   ueber welchem Feld ein Label zufaellig sitzt:

     --body #4a4a4a       auf Bauflaeche #e7e2d9 ...... 6,87 : 1   OK
     --body #4a4a4a       auf Gruenflaeche #e3e9dd .... 7,16 : 1   OK
     --body #4a4a4a       auf Kartengrund #f2efea ..... 7,73 : 1   OK
     --ink #1b1b1b        auf Bauflaeche #e7e2d9 ..... 13,35 : 1   OK
   > Vorher stand hier --muted (#6a6a6a) und fuer "Salon" --gold-ink (#83672c).
   > Auf der Bauflaeche sind das 4,19 : 1 und 4,13 : 1, auf der Gruenflaeche
   > 4,37 : 1 — jeweils unter 4,5 (V9). Beide sind je eine Stufe dunkler
   > gesetzt; eine neue Farbe kam dafuer nicht dazu.

   KOPF. Der Kopf war mit rgba(255,255,255,.97) hinterlegt und klebt ab 900 px
   ueber dem durchlaufenden Inhalt. Damit haengt der Kontrast seiner Beschriftung
   daran, was gerade darunter steht. Er ist deshalb deckend (--white); dann
   gelten fuer ihn die Werte auf #fff aus dem oberen Block. Sichtbar aendert das
   nichts — 3 % Durchlass hat ohnehin niemand gesehen.
   ========================================================================= */


/* ── Schriften · selbst gehostet, kein Abruf zu einem fremden Server ─────── */

@font-face {
  font-family: "Montserrat";
  src: url("../vendor/fonts/montserrat-var.woff2") format("woff2");
  font-weight: 400 700;          /* Datei traegt wght 100-900, freigegeben 400-700 */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Open Sans";
  src: url("../vendor/fonts/open-sans-var.woff2") format("woff2");
  font-weight: 400 700;          /* Datei traegt wght 300-800 */
  font-style: normal;
  font-display: swap;
}


/* ── Tokens ─────────────────────────────────────────────────────────────── */

:root {
  --ink: #1b1b1b;
  --body: #4a4a4a;
  --muted: #6a6a6a;

  --white: #fff;
  --paper: #f7f5f2;
  --paper-2: #faf8f5;
  --line: #ececec;
  --line-2: #e2ded7;
  --dots: #cfcabf;

  --dark: #1b1b1b;
  --dark-2: #151515;
  --field: #232323;
  --on-dark: #c9c4ba;
  --on-dark-2: #a5a099;
  --foot: #a5a09a;

  --gold: #b0904f;        /* nur Flaeche, Rahmen, Strich — nie Text auf Hell */
  --gold-ink: #83672c;    /* dieselbe Familie, abgedunkelt fuer Text */
  --gold-lt: #ecdfbe;     /* Text auf dem verschleierten Foto */

  --ph-bg: #efece6;
  --ph-stripe: #e2ddd3;
  --ph-ink: #5d5d5d;

  --font-title: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --font-body: "Open Sans", "Segoe UI", system-ui, sans-serif;

  --wrap: 1170px;
  --pad: 20px;
  --notice: 26px;         /* feste Hinweisleiste aus A17 */
  --hd: 84px;             /* klebender Kopf ab 900 px, einzeilig */
  --quick: 58px;          /* feste Leiste unten, unter 900 px */

  --focus: #83672c;
}


/* ── Grundlage ──────────────────────────────────────────────────────────── */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding-top: var(--notice);
  padding-bottom: var(--quick);
  background: var(--white);
  color: var(--body);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* `height: auto` ist hier Pflicht, nicht Geschmack: jedes Foto traegt `width`
   und `height` im Markup (damit der Platz vor dem Laden steht). Ohne die Zeile
   bliebe die Hoehe auf dem Attributwert stehen, sobald `max-width` die Breite
   verkleinert — das Bild wuerde in die Laenge gezogen. */
img { max-width: 100%; height: auto; display: block; }
svg { max-width: 100%; }

h1, h2, h3 {
  font-family: var(--font-title);
  color: var(--ink);
  font-weight: 500;
  line-height: 1.22;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 7.4vw, 3.6rem); letter-spacing: -.005em; }
h2 { font-size: clamp(1.6rem, 5vw, 2.45rem); }
h3 { font-size: clamp(1.2rem, 3.4vw, 1.5rem); }

p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--gold-ink); text-decoration: none; }
a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

ul { margin: 0; padding: 0; list-style: none; }
dl, dd, dt { margin: 0; }

.icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  vertical-align: -.15em;
}

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}

section[id] { scroll-margin-top: calc(var(--notice) + 1rem); }

.skip {
  position: absolute;
  left: 50%;
  top: calc(var(--notice) + .5rem);
  transform: translate(-50%, -260%);
  z-index: 200;
  background: var(--gold-ink);
  color: var(--white);
  padding: .7rem 1.2rem;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: .06em;
}

.skip:focus { transform: translate(-50%, 0); color: var(--white); text-decoration: none; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}


/* ── Wiederkehrende Bausteine ───────────────────────────────────────────── */

.eyebrow {
  font-family: var(--font-title);
  font-size: .69rem;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin: 0 0 1rem;
}

.eyebrow--light { color: var(--gold-lt); }

.rule {
  display: block;
  width: 54px;
  height: 1px;
  background: var(--gold);
  margin: 1.4rem 0;
}

.rule--short { width: 34px; margin: .35rem 0 1.5rem; }
.rule--light { background: var(--gold-lt); margin-inline: auto; }

.sectionhead {
  text-align: center;
  max-width: 640px;
  margin: 0 auto clamp(2.4rem, 6vw, 3.9rem);
}

.sectionhead .rule { margin-inline: auto; margin-bottom: 0; }
.sectionhead__sub { margin-top: 1rem; color: var(--body); }


/* ── Knoepfe ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.2;
  padding: 1.05rem 2rem;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}

.btn:hover { text-decoration: none; }

.btn--gold {
  background: var(--gold-ink);
  border-color: var(--gold-ink);
  color: var(--white);
}

.btn--gold:hover,
.btn--gold:focus-visible {
  background: var(--dark);
  border-color: var(--dark);
  color: var(--white);
}

.btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, .7);
  color: var(--white);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: var(--white);
  border-color: var(--white);
  color: var(--ink);
}

.btn--block { width: 100%; }


/* ── Topleiste ──────────────────────────────────────────────────────────── */

.topbar {
  background: var(--dark);
  color: var(--on-dark);
  font-size: .78rem;
  letter-spacing: .02em;
  border-bottom: 1px solid #2a2a2a;
}

.topbar__inner {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.4rem;
  align-items: center;
  justify-content: center;
  padding-block: .6rem;
  line-height: 1.5;
}

.topbar__item { display: inline-flex; align-items: center; gap: .5rem; }
.topbar__item .icon { width: 15px; height: 15px; color: var(--gold); }
.topbar a { color: var(--on-dark); }
.topbar a:hover { color: var(--white); }
.topbar__hide { display: none; }

@media (min-width: 620px) {
  .topbar__inner { justify-content: space-between; }
  .topbar__hide { display: inline-flex; }
}


/* ── Kopf ───────────────────────────────────────────────────────────────── */
/* Unter 900 px steht der Kopf still und traegt die Menuezeile umgebrochen
   darunter; er darf dort Platz kosten, weil er wegscrollt. Ab 900 px klebt er
   einzeilig. Die zwei wichtigsten Wege liegen mobil in der Leiste unten. */

.header {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 14px rgba(0, 0, 0, .06);
}

.header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .9rem 1.4rem;
  padding-block: .95rem;
}

.brand { display: flex; align-items: center; gap: .8rem; color: inherit; }
.brand:hover { text-decoration: none; }

.brand__mark {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  background: var(--dark);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-title);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: .04em;
}

.brand__text { display: block; line-height: 1.2; }

.brand__name {
  display: block;
  font-family: var(--font-title);
  font-size: 1.32rem;
  font-weight: 500;
  letter-spacing: .03em;
  color: var(--ink);
  white-space: nowrap;
}

.brand__sub {
  display: block;
  font-size: .62rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .25rem;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .3rem 1.15rem;
  width: 100%;
  border-top: 1px solid var(--line);
  padding-top: .8rem;
}

.nav a {
  font-family: var(--font-title);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--body);
  padding: .4rem 0;
  border-bottom: 2px solid transparent;
}

.nav a:hover,
.nav a:focus-visible {
  color: var(--gold-ink);
  border-bottom-color: var(--gold);
  text-decoration: none;
}

.header__cta { display: none; }

@media (min-width: 900px) {
  .header {
    position: sticky;
    top: var(--notice);
    z-index: 60;
  }

  .header__inner {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: var(--hd);
    padding-block: 0;
  }

  .nav {
    width: auto;
    border-top: 0;
    padding-top: 0;
    flex-wrap: nowrap;
    gap: 1.35rem;
  }

  .header__cta { display: inline-flex; padding: .95rem 1.6rem; }

  section[id] { scroll-margin-top: calc(var(--notice) + var(--hd) + 1rem); }

  body { padding-bottom: 0; }
}


/* ── Hero ───────────────────────────────────────────────────────────────── */
/* Standbild. `img/hero.jpg` liegt seit dem 22.08.2026 im Ordner und deckt die
   gestreifte Ebene darunter vollstaendig ab; die Streifen bleiben als Auffang
   stehen, falls die Datei je fehlt (V13). Der Schleier ist flaechig und nicht
   als Verlauf angelegt; der Grund steht im Kontrastblock oben. */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(78vh, 620px);
  background-color: #2a2a2a;
  background-image:
    linear-gradient(rgba(15, 15, 15, .66), rgba(15, 15, 15, .66)),
    var(--ew-kopfbild, url("../img/hero.jpg")),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .07) 0 14px, rgba(255, 255, 255, 0) 14px 28px);
  background-size: cover, cover, auto;
  background-position: center, center 40%, center;
  background-repeat: no-repeat, no-repeat, repeat;
}

.hero__inner {
  width: 100%;
  text-align: center;
  color: var(--white);
  padding-block: clamp(4rem, 13vw, 7rem);
}

.hero h1 { color: var(--white); margin-bottom: 1.2rem; }

.hero__sub {
  max-width: 620px;
  margin: 0 auto 2.4rem;
  font-size: 1.02rem;
  line-height: 1.8;
  color: #eae6df;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  justify-content: center;
  margin: 0;
}


/* ── Dunkles Band mit drei Zusagen ──────────────────────────────────────── */

.trust { background: var(--dark); color: var(--on-dark-2); }

.trust__grid { display: grid; gap: 0; }

.trust__item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.6rem var(--pad);
  border-bottom: 1px solid #2c2c2c;
  font-size: .89rem;
  line-height: 1.7;
}

.trust__item:last-child { border-bottom: 0; }
.trust__item .icon { color: var(--gold); width: 24px; height: 24px; margin-top: .1rem; }

.trust__item strong {
  display: block;
  font-family: var(--font-title);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--white);
  margin-bottom: .2rem;
}

.trust__item strong a { color: var(--white); }
.trust__item strong a:hover { color: var(--gold); }

@media (min-width: 700px) {
  .trust__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .trust__item {
    border-bottom: 0;
    border-right: 1px solid #2c2c2c;
    padding: 2.1rem 1.6rem;
  }

  .trust__item:first-child { padding-left: 0; }
  .trust__item:last-child { border-right: 0; padding-right: 0; }
}


/* ── Salon ──────────────────────────────────────────────────────────────── */

.about { padding-block: clamp(3.4rem, 9vw, 6.5rem); background: var(--white); }

.about__grid { display: grid; gap: clamp(3rem, 6vw, 4.5rem); align-items: center; }

/* Das Salonbild ist hochkant (3:4). In der einspaltigen Ansicht wuerde es auf
   768 px ueber neunhundert Pixel hoch und schoebe den Text aus dem Bild —
   deshalb bis 900 px auf eine vernuenftige Breite begrenzt und mittig gesetzt. */
.about__media {
  position: relative;
  max-width: 26rem;
  margin-inline: auto;
  padding-bottom: 2.2rem;
  padding-right: 2.2rem;
}

.about__badge {
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 0;
  background: var(--gold-ink);
  color: var(--white);
  padding: 1.2rem 1.5rem;
  text-align: center;
  line-height: 1.1;
}

.about__badgenum {
  display: block;
  font-family: var(--font-title);
  font-size: 2.3rem;
  font-weight: 500;
}

.about__badgelabel {
  display: block;
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-top: .45rem;
}

.about__text h2 { margin-bottom: 1.3rem; }

.ticks {
  display: grid;
  gap: .7rem 1.8rem;
  margin: 1.9rem 0 2rem;
}

.ticks li {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  font-size: .93rem;
  color: var(--ink);
}

.ticks .icon { color: var(--gold-ink); margin-top: .2rem; }

.signature {
  font-family: var(--font-title);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}

.signature__role {
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  margin: .4rem 0 0;
}

@media (min-width: 560px) {
  .ticks { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
  .about__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .about__media { max-width: none; margin-inline: 0; }
}


/* ── Leistungen und Preise ──────────────────────────────────────────────── */

.prices {
  padding-block: clamp(3.4rem, 9vw, 6.2rem);
  background: var(--paper);
  border-top: 1px solid var(--line);
}

.prices__grid { display: grid; gap: 1.6rem; }

.card {
  background: var(--white);
  border: 1px solid #e9e4dc;
  padding: clamp(1.6rem, 4vw, 2.6rem);
}

.card h3 { display: flex; align-items: center; gap: .6rem; }
.card h3 .icon { color: var(--gold-ink); width: 22px; height: 22px; }

.pricelist { display: grid; gap: .95rem; }

.pricelist__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem;
}

.pricelist__row dt {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: .6rem;
  font-size: .95rem;
  color: var(--ink);
}


.pricelist__row dd {
  flex: 0 0 auto;
  font-size: .95rem;
  font-weight: 600;
  color: var(--gold-ink);
  white-space: nowrap;
}

.prices__note {
  text-align: center;
  font-size: .85rem;
  color: var(--muted);
  margin: 1.9rem 0 0;
}

@media (min-width: 760px) {
  .prices__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.9rem; }
}

/* Die Punktlinie zwischen Leistung und Preis kommt erst, wenn die Karte breit
   genug ist, dass die Zeile nicht umbricht. Bricht sie um, haengt die Linie
   sonst ueber der zweiten Zeile in der Luft. Schmal steht die Leistung links,
   der Preis rechts — dieselbe Ordnung, nur ohne Zierde. */
@media (min-width: 1080px) {
  .pricelist__row dt::after {
    content: "";
    flex: 1 1 2rem;
    border-bottom: 1px dotted var(--dots);
  }
}


/* ── Zitatband ──────────────────────────────────────────────────────────── */
/* Standbild. Der Entwurf hatte hier `background-attachment: fixed` — das ist
   Parallaxe und faellt in der Basis-Stufe ersatzlos weg (V7). */

.quote {
  background-color: #2a2a2a;
  background-image:
    linear-gradient(rgba(20, 20, 20, .78), rgba(20, 20, 20, .78)),
    url("../img/zitat.jpg"),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .07) 0 14px, rgba(255, 255, 255, 0) 14px 28px);
  background-size: cover, cover, auto;
  background-position: center, center, center;
  background-repeat: no-repeat, no-repeat, repeat;
}

.quote__inner {
  max-width: 800px;
  text-align: center;
  color: var(--white);
  padding-block: clamp(3.4rem, 9vw, 6rem);
}

.quote__mark {
  font-family: var(--font-title);
  font-size: 4.4rem;
  font-weight: 600;
  line-height: .62;
  color: var(--gold-lt);
  margin: 0 0 .4rem;
}

.quote blockquote { margin: 0; }

.quote blockquote p {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(1.15rem, 3.6vw, 1.75rem);
  line-height: 1.6;
  color: var(--white);
  margin: 0 0 1.5rem;
  text-wrap: balance;
}

.quote__by {
  font-size: .7rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold-lt);
  margin: 0;
}


/* ── Team ───────────────────────────────────────────────────────────────── */

.team { padding-block: clamp(3.4rem, 9vw, 6.2rem); background: var(--white); }

.team__grid { display: grid; gap: 1.8rem; }

.person { border: 1px solid var(--line); background: var(--white); }
.person > img { border-bottom: 1px solid var(--line); }
.person__body { padding: 1.5rem 1.4rem 1.8rem; text-align: center; }

.person__name {
  font-family: var(--font-title);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}

.person__role {
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin: .5rem 0 .9rem;
}

.person__body p:last-child { font-size: .9rem; line-height: 1.75; margin: 0; }

@media (min-width: 560px) { .team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .team__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }


/* ── Galerie ────────────────────────────────────────────────────────────── */

.gallery {
  padding-block: clamp(3.4rem, 9vw, 6.2rem);
  background: var(--paper);
  border-top: 1px solid var(--line);
}

/* `minmax(0, 1fr)` statt `1fr` ist hier KEINE Marotte: `1fr` heisst
   `minmax(auto, 1fr)`, und eine Kachel mit `aspect-ratio`, die auf Zeilenhoehe
   gedehnt wird, leitet daraus eine automatische MINDESTBREITE ab. Eine einzige
   hohe Kachel zieht dann eine Spalte auf und schiebt die Reihe aus dem Raster.
   Mit `minmax(0, …)` faellt dieses Minimum weg und die Spalten bleiben gleich. */
.gallery__grid { display: grid; gap: 1.1rem; }

@media (min-width: 560px) {
  .gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Ab 760 px laeuft die Galerie auf sechs Spalteneinheiten: obere Reihe drei
   Kacheln zu zwei Einheiten, untere Reihe zwei Kacheln zu drei. Fuenf Bilder
   fuellen so beide Reihen restlos — kein leeres Feld am Ende. Innerhalb einer
   Reihe sind alle Kacheln gleich breit und damit auch gleich hoch. */
@media (min-width: 760px) {
  .gallery__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .gallery__grid > * { grid-column: span 2; }
  .gallery__grid > :nth-child(4),
  .gallery__grid > :nth-child(5) { grid-column: span 3; }
}


/* ── Kontakt ────────────────────────────────────────────────────────────── */

.contact { padding-block: clamp(3.4rem, 9vw, 6.2rem); background: var(--white); }
.contact__grid { display: grid; gap: clamp(2.4rem, 6vw, 4rem); }
.contact__left h2 { margin-bottom: 1.3rem; }

.hours {
  border: 1px solid #e9e4dc;
  background: var(--paper-2);
  padding: 1.4rem 1.5rem;
  margin: 2rem 0 1.9rem;
}

.hours__title {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-title);
  font-size: .69rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin: 0 0 1rem;
}

.hours__list { display: grid; gap: .7rem; }

.hours__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: .95rem;
}

.hours__row dt { color: var(--body); }
.hours__row dd { color: var(--ink); text-align: right; }
.hours__row .is-off { color: var(--muted); }

.contactlist { display: grid; gap: .9rem; font-size: .95rem; line-height: 1.7; }
.contactlist li { display: flex; gap: .8rem; align-items: flex-start; }
.contactlist .icon { color: var(--gold-ink); margin-top: .28rem; }

.wayto {
  margin-top: 2.2rem;
  border: 1px solid var(--line-2);
  background: var(--paper-2);
  padding: 1.4rem 1.5rem 1.6rem;
}

.wayto__title {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-title);
  font-size: .69rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin: 0 0 1rem;
}

.wayto__text { font-size: .89rem; line-height: 1.75; margin: 1.1rem 0 0; color: var(--body); }

/* Gezeichnete Lageskizze — keine eingebettete Karte (V12), kein Abruf (V3). */
.map { display: block; width: 100%; height: auto; border: 1px solid var(--line-2); }
.map__bg { fill: #f2efea; }
.map__block { fill: #e7e2d9; }
.map__green { fill: #e3e9dd; }
.map__road { stroke: #fff; stroke-width: 11; fill: none; }
.map__road--main { stroke-width: 17; }
.map__rail { stroke: #cfc7b8; stroke-width: 2; stroke-dasharray: 7 6; fill: none; }
.map__stop { fill: #fff; stroke: #a49b8a; stroke-width: 2; }
.map__path { stroke: #83672c; stroke-width: 2; stroke-dasharray: 4 5; fill: none; }
.map__pin { fill: none; stroke: #83672c; stroke-width: 2.2; stroke-linejoin: round; }
.map__pindot { fill: #83672c; stroke: none; }

/* Die Schriftgroesse steht in viewBox-Einheiten, nicht in Pixeln: die Skizze
   skaliert mit ihrer Breite, und auf 360 px waeren 12 Einheiten nur noch rund
   neun Pixel. 14,5 traegt auch dort. Die Skizze ist ohnehin keine
   Informationsquelle — Anfahrt, Parken und Zugang stehen als Text darunter.
   Die Farbe ist `--body` und nicht `--muted`: die Beschriftungen liegen auf
   drei verschiedenen Fuellungen, und auf der dunkelsten (#e7e2d9) faellt
   `--muted` mit 4,19 : 1 durch (V9). */
.map__label {
  font-family: var(--font-body);
  font-size: 14.5px;
  fill: var(--body);
  letter-spacing: .02em;
}

/* `--ink` statt `--gold-ink`: "Salon" sitzt auf der dunkelsten Fuellung der
   Skizze, und dort traegt das Gold nur 4,13 : 1. Der Zeiger daneben bleibt
   golden — er ist Flaeche und Strich, kein Text. */
.map__label--pin { fill: var(--ink); font-weight: 700; font-size: 15.5px; }

@media (min-width: 980px) {
  .contact__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
}


/* ── Formular ───────────────────────────────────────────────────────────── */
/* Kein `action`, Knopf `type="button"`: die Vorlage hat keinen Server, an den
   sie etwas schicken koennte. Was nichts tut, tut hier auch nicht so (V12). */

.formbox { background: var(--dark); padding: clamp(1.8rem, 5vw, 2.9rem); }
.formbox h3 { color: var(--white); margin-bottom: 1.6rem; }

.form { display: grid; gap: 1rem; }
.form__pair { display: grid; gap: 1rem; }

.field { display: grid; gap: .4rem; margin: 0; }

.field label {
  font-family: var(--font-title);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--on-dark);
}

/* Hier steht bewusst KEIN `outline: none`. `.field input` und
   `input:focus-visible` haben dieselbe Spezifitaet (0,1,1) — bei Gleichstand
   gewinnt die spaetere Regel, und das waere diese. Der Fokusrahmen aus dem
   Grundlagen-Block waere damit ausgerechnet an den Formularfeldern weg. Die
   Rahmenfarbe unten wechselt zusaetzlich, ersetzt den Rahmen aber nicht. */
.field input,
.field select,
.field textarea {
  font-family: var(--font-body);
  font-size: .95rem;
  background: var(--field);
  border: 1px solid #333;
  color: #eee;
  padding: .85rem 1rem;
  width: 100%;
  transition: border-color 160ms ease;
}

.field textarea { resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: #b8b8b8; }

.field input:hover,
.field select:hover,
.field textarea:hover,
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--gold); }

.consent {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  font-size: .8rem;
  line-height: 1.65;
  color: var(--on-dark);
  margin: .3rem 0 .2rem;
}

.consent input { margin-top: .28rem; accent-color: var(--gold); flex: 0 0 auto; }
.consent a { color: var(--gold-lt); text-decoration: underline; text-underline-offset: 2px; }
.consent a:hover { color: var(--white); }

.form__note { font-size: .78rem; line-height: 1.7; color: var(--on-dark-2); margin: .3rem 0 0; }

@media (min-width: 480px) {
  .form__pair { grid-template-columns: 1fr 1fr; }
}


/* ── Fuss ───────────────────────────────────────────────────────────────── */

.footer { background: var(--dark-2); color: var(--foot); font-size: .9rem; }

.footer__grid {
  display: grid;
  gap: 2.4rem;
  padding-block: clamp(2.6rem, 7vw, 4rem);
}

.footer h2 {
  font-size: .69rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 1.2rem;
}

.footer__name {
  font-family: var(--font-title);
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: .03em;
  color: var(--white);
  margin: 0;
}

.footer__tag {
  font-size: .62rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold);
  margin: .5rem 0 1.1rem;
}

.footer p { line-height: 1.8; }
.footer a { color: var(--foot); }
.footer a:hover { color: var(--white); }
.footer__list { display: grid; gap: .6rem; }

.footer__legal { border-top: 1px solid #262626; }

.footer__legalinner {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.4rem;
  justify-content: space-between;
  padding-block: 1.2rem;
  font-size: .8rem;
}

.footer__legalinner p { margin: 0; }
.footer__links { display: flex; gap: 1.4rem; }

@media (min-width: 700px) {
  .footer__grid { grid-template-columns: 1.2fr 1fr 1fr; gap: 3rem; }
}


/* ── Feste Leiste unten und Knopf nach oben ─────────────────────────────── */

.quickbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--dark);
  border-top: 1px solid #2c2c2c;
  padding-bottom: env(safe-area-inset-bottom);
}

.quickbar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: var(--quick);
  color: var(--white);
  font-family: var(--font-title);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.quickbar a + a { border-left: 1px solid #2c2c2c; }
.quickbar .icon { color: var(--gold); }
.quickbar a:hover { background: var(--gold-ink); color: var(--white); text-decoration: none; }
.quickbar a:hover .icon { color: var(--white); }

.totop {
  position: fixed;
  right: 16px;
  bottom: calc(var(--quick) + 16px);
  z-index: 70;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dark);
  color: var(--white);
  transition: background-color 180ms ease;
}

.totop:hover { background: var(--gold-ink); color: var(--white); }

@media (min-width: 900px) {
  .quickbar { display: none; }
  .totop { bottom: 24px; right: 24px; }
}


/* ── Platzhalter fuer noch fehlende Fotos (V13) ─────────────────────────── */
/* Ein graues Rechteck sieht aus wie ein Fehler; eine gestreifte Flaeche mit
   Symbol und Beschriftung sieht aus wie eine Stelle, die noch gefuellt wird.
   Ersetzt wird sie durch ein <img> mit alt, width, height und loading="lazy";
   das Hero-Bild ohne lazy. */

.ph {
  position: relative;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .5rem;
  margin: 0;
  padding: 1rem;
  aspect-ratio: 4 / 3;
  color: var(--ph-ink);
  background-color: var(--ph-bg);
  background-image: repeating-linear-gradient(
    135deg,
    var(--ph-stripe) 0 10px,
    transparent 10px 20px
  );
  border: 1px solid var(--line-2);
  text-align: center;
}

.ph--portrait { aspect-ratio: 3 / 4; }
.ph .icon { width: 2rem; height: 2rem; opacity: .85; }

.ph__txt {
  font-family: var(--font-body);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  line-height: 1.6;
}


/* ── Einblenden: genau ein Effekt je Abschnitt ──────────────────────────── */
/* Der Ausgangszustand haengt an `.has-reveal`, und die Klasse setzt allein
   `js/reveal.js`. Ohne Javascript ist deshalb nichts versteckt. */

.has-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(12px);
}

.has-reveal [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity 400ms ease-out, transform 400ms ease-out;
}


/* ── Rechtlicher Hinweis am Seitenende ──────────────────────────────────── */

.legalnote {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 1.75rem var(--pad) 2.5rem;
  font-size: .85rem;
  line-height: 1.75;
  color: var(--muted);
  background: var(--white);
  scroll-margin-top: calc(var(--notice) + 1rem);
}

.legalnote h2 { font-size: 1rem; letter-spacing: .03em; margin: 0 0 .5rem; }
.legalnote p { margin: 0 0 .7rem; max-width: 64ch; }
.legalnote p:last-child { margin-bottom: 0; }

@media (min-width: 900px) {
  .legalnote { scroll-margin-top: calc(var(--notice) + var(--hd) + 1rem); }
}


/* ── Weniger Bewegung: abschalten, nicht verkuerzen ─────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .has-reveal [data-reveal],
  .has-reveal [data-reveal].is-in {
    opacity: 1;
    transform: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* ── Druck ──────────────────────────────────────────────────────────────── */

@media print {
  #ew-demo-notice, .quickbar, .totop, .header, .topbar, .hero__actions, .formbox { display: none; }
  body { padding: 0; color: #000; background: #fff; }
  .hero, .quote, .trust, .footer { background: none; color: #000; }
  .hero h1, .hero__sub, .quote blockquote p, .quote__by, .eyebrow--light { color: #000; }
  .trust__item strong, .footer h2, .footer__name, .footer a { color: #000; }
  .ph { border: 1px solid #999; background: none; }
}