/* =========================================================
   JILAN'S HAIRCUT — Professional Hair & Beauty, Leimen
   Markenwelt vom Flyer: warmes Creme-Papier, Gold-Akzent,
   Espresso-Braun (das Holz im Salon) und eine römische
   Serife mit echten Kleinbuchstaben (Marcellus).

   Zur Schrift: Der Schriftzug im Logo steht in Versalien
   nach römischem Inschriftenvorbild. Marcellus stammt aus
   derselben Familie, hat aber Minuskeln — der Flyer macht
   es genauso vor (Versal-Logo oben, Minuskel-Serife bei
   "Öffnungszeiten"). Cinzel kann das nicht: die Schrift
   besitzt gar keine Kleinbuchstaben, ihre Minuskeln sind
   Kapitälchen. Deshalb wirkten die Überschriften gemeißelt,
   nicht wegen eines text-transform.
   ========================================================= */

/* --- Lokale Fonts (DSGVO-freundlich, kein Google-Request) --- */
@font-face {
  font-family: "Marcellus";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/marcellus.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/archivo-var.woff2") format("woff2");
}

:root {
  /* --- Papier / helle Flächen --- */
  --paper:   #EDE9E0;   /* warmes Creme */
  --paper-2: #E6E1D5;   /* Panels */
  --paper-3: #DED7C7;
  --line:    #D2CBBB;   /* Haarlinie hell */

  /* --- Espresso / dunkle Flächen ---
     Nicht vom Flyer: der druckt auf mottled Steingrau, dieselbe Wand wie
     im Salon. Das Braun ist das Holz – Tresen, Boden, der Walnusstisch
     unter dem Flyer. Die eigene Copy nennt die Palette bereits:
     "Graue Steinwand, warmes Holz, schwarzes Leder – und das goldene Detail." */
  --char:    #211910;   /* Espresso */
  --char-2:  #2A2016;
  --char-3:  #33281B;

  /* --- Text auf hell --- */
  --ink:     #211D18;
  --body:    #4E483F;
  --muted:   #6B6357;

  /* --- Text auf dunkel --- */
  --cream:      #EEE8DC;
  --cream-2:    #CFC7B7;
  --muted-dark: #A69E8E;

  /* --- Gold (vom Flyer) --- */
  --gold:       #B08A3E;
  --gold-bright:#D8B968;
  --gold-deep:  #785B24;   /* dunkles Gold-Braun – AA-fest für Text auf Creme */
  /* Ein Verlauf, ein Nutzer: die Haarlinie über dem Footer. An den Enden
     läuft er auf transparent aus, damit die Linie nicht gegen den
     Viewportrand stößt, sondern verklingt. */
  --gold-line:  linear-gradient(90deg,
                  transparent 0%, #8A6A2E 14%, #E4CE93 50%, #8A6A2E 86%, transparent 100%);

  /* --- Typo --- */
  /* Georgia zuerst im Fallback: hat Minuskeln, das Layout kippt also nicht,
     solange marcellus.woff2 noch lädt. */
  --font-display: "Marcellus", Georgia, "Times New Roman", serif;
  --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --step--2: clamp(0.72rem, 0.69rem + 0.15vw, 0.8rem);
  --step--1: clamp(0.83rem, 0.79rem + 0.2vw, 0.93rem);
  --step-0:  clamp(1rem, 0.96rem + 0.25vw, 1.13rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --step-2:  clamp(1.5rem, 1.28rem + 1.1vw, 2.1rem);
  --step-3:  clamp(1.8rem, 1.45rem + 1.8vw, 2.8rem);
  /* Die Headline trug in Cinzel-Versalien Gewicht, das Marcellus 400 nicht hat.
     Marcellus gibt es nur in einem Schnitt – der Ersatz kommt über Größe. */
  --step-4:  clamp(2.6rem, 1.8rem + 4.2vw, 5.6rem);

  /* --- Layout --- */
  --wrap: 1200px;
  --gutter: clamp(1.2rem, 5vw, 3.25rem);
  --radius: 2px;
  --section-y: clamp(4.5rem, 8.5vw, 8rem);
  /* Header ist sticky mit fixer Höhe (min-height 76px + 1px Border) über alle
     Breakpoints hinweg – der Hero rechnet damit, um exakt einen Viewport zu
     füllen. */
  --header-h: 77px;

  --shadow: 0 30px 60px -34px rgba(30,20,10,0.45);

  /* Grundwerte für .salon-image-filter. Jede Sektion darf sie überschreiben,
     ohne dass wir uns um Selektor-Spezifität streiten müssen.
     0.34 Sepia ist der Punkt, an dem der violette LED-Streifen über den
     Spiegeln ins Braun kippt, ohne dass Hauttöne orange werden. */
  --pf-sepia: 0.34;
  --pf-sat:   0.74;
  --pf-con:   0.98;
  --pf-bri:   0.85;
}

/* =========================================================
   Reset & Basis
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* Steinkörnung: Der Flyer druckt sichtbar auf mottled Stein, und die Salonwand
   ist Stein – die eigene Copy sagt "Graue Steinwand". Ohne sie ist --paper nur
   eine Füllfarbe. feTurbulence als Inline-Data-URI, gekachelt (stitchTiles
   verhindert Kachelnähte), entsättigt. Kein zusätzlicher Request. */
:root {
  --stone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.09'/%3E%3C/svg%3E");
}

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--body);
  background-color: var(--paper);
  /* warme Tiefe statt schwerer Textur (günstig, kein Repaint beim Scrollen) */
  background-image: var(--stone),
    radial-gradient(120% 80% at 82% -10%, rgba(176,138,62,0.06), transparent 55%);
  background-repeat: repeat, no-repeat;
  background-size: 180px 180px, auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
/* Marcellus gibt es nur in einem Schnitt. Jede Gewichtung über 400 würde der
   Browser selbst fetten — font-synthesis: none verbietet ihm das. */
h1, h2, h3 { line-height: 1.1; font-weight: 400; font-synthesis: none; }
::selection { background: var(--gold-deep); color: #fff; }

/* =========================================================
   Layout-Utilities
   ========================================================= */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); position: relative; }
section[id], main[id] { scroll-margin-top: 92px; }

.visually-hidden, .skip-link:not(:focus):not(:active) {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: 0.8rem; left: 0.8rem; z-index: 300;
  background: var(--char); color: var(--cream); padding: 0.65rem 1.1rem;
  border-radius: var(--radius); text-decoration: none; font-weight: 700;
}

/* Eyebrow — kleines Label mit Gold-Strich (wie die Gold-Linien im Flyer)
   Der Strich trug denselben Drei-Stopp-Verlauf wie der Footer. Auf 34×2px
   ist ein Glanzpunkt bei 48% nicht darstellbar: er fällt auf ein einziges
   Pixel. Ein Verlauf, den niemand sehen kann, ist kein Verlauf, sondern
   Aufwand. Hier steht deshalb eine ehrliche Volltonlinie. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.75rem;
  font-family: var(--font-body);
  font-size: var(--step--2); font-weight: 700; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 1.25rem;
}
/* Auf Creme hält --gold nur 2.65:1 – unter den 3:1 für nicht-textuelle
   Elemente. --gold-deep kommt auf 5.22:1. Auf Espresso kehrt sich das um:
   dort fällt --gold-deep auf 2.74:1, --gold-bright hält 9.13:1. */
.eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--gold-deep); }
.geschichte .eyebrow::before,
.about .eyebrow::before { background: var(--gold-bright); }

.section__head { max-width: 54ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section__title {
  font-family: var(--font-display);
  font-size: var(--step-3); font-weight: 400; letter-spacing: 0;
  color: var(--ink); line-height: 1.12;
}
.section__intro { margin-top: 1.2rem; color: var(--muted); font-size: var(--step-1); line-height: 1.55; }


/* =========================================================
   Bildfilter — echte Fotos ins Espresso-Gold einbetten
   Die Fotos aus dem Salon sind neutral belichtet und knallen sonst
   aus der Palette heraus. Sepia zieht sie ins Warme, die reduzierte
   Sättigung nimmt den Fremdfarben die Schärfe – vor allem dem violetten
   LED-Streifen an der Steinwand, dem kältesten Fleck der ganzen Marke.
   ========================================================= */
.salon-image-filter {
  filter:
    sepia(var(--pf-sepia)) saturate(var(--pf-sat))
    contrast(var(--pf-con)) brightness(var(--pf-bri));
}

/* =========================================================
   Signature: die Goldlinie
   Vorher trugen vier Kanten denselben 3px-Verlauf: Header, Hero, Footer,
   Mobilebar. Vier gleiche Balken sind kein System, sondern eine wiederholte
   Regel. Der Verlauf überlebt jetzt an genau einer Stelle – über dem Footer,
   auf voller Breite, wo ein Glanzpunkt bei 50% tatsächlich zu sehen ist.

   Jede andere Kante hat eine eigene Begründung bekommen:
   – Header: die Kante ist funktional, sie trennt Nav von Inhalt. Sie war
     doppelt (3px Gold über 1px --line). Jetzt eine Linie, die beim Scrollen
     von --line nach --gold wechselt: sichtbar genau dann, wenn Inhalt
     darunter durchläuft.
   – Hero: die Kante war rein dekorativ. Ersatzlos entfallen; das Foto endet
     an der Sektionsgrenze, das genügt.
   – Mobilebar: Chrome, kein Markenmoment. Neutrale Haarlinie.
   ========================================================= */
.site-header { border-bottom-color: transparent; transition: border-bottom-color .25s ease, background-color .3s ease, backdrop-filter .3s ease; }
.site-header.is-scrolled { border-bottom-color: var(--gold-deep); }
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
}

/* =========================================================
   Buttons — dieselbe Sprache wie Hero-CTA und Kontaktieren-Button:
   scharfe Ecken, ein Goldstrich vor dem Label statt eines Icons,
   weit gesperrte Versalien. Wo der Knopf schon gefüllt in Ruhe steht
   (.btn--primary – die eine Aktion, die auch ohne Hover als "die
   wichtige" erkennbar sein muss, siehe Touch-Geräte), bleibt die
   Füllung stehen und nur Farbe/Rahmen verschieben sich beim Hover.
   Wo er als Rahmen startet (.btn--ghost), läuft die Füllung wie beim
   Hero von links ein, statt nur die Hintergrundfarbe zu tauschen.
   Kein Heben, kein Schatten mehr – das war die letzte generische
   Baukasten-Geste in diesem Bereich. */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 0.9rem 1.9rem;
  border-radius: 0;
  background: transparent; color: var(--ink);
  border: 1px solid var(--gold-deep);
  font-family: var(--font-body); font-weight: 600; font-size: 0.8rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  line-height: 1; text-decoration: none; cursor: pointer;
  transition: color .3s ease .05s, border-color .3s ease, background-color .3s ease;
}
.btn::before { content: ""; width: 12px; height: 1px; background: var(--gold-deep); flex: none; transition: background-color .3s ease; }
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--char); transform: translateX(-101%); }
.btn:hover, .btn:focus-visible { color: var(--cream); border-color: var(--char); }
.btn:hover::before, .btn:focus-visible::before { background: var(--gold-bright); }
@media (prefers-reduced-motion: no-preference) {
  .btn::after { transition: transform .45s cubic-bezier(.65,0,.35,1); }
  .btn:hover::after, .btn:focus-visible::after { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .btn:hover::after, .btn:focus-visible::after { transform: translateX(0); }
}
.btn--sm { padding: 0.65rem 1.4rem; font-size: 0.72rem; letter-spacing: 0.14em; gap: 0.5rem; }
.btn--sm::before { width: 10px; }

/* Primär = schon gefüllt in Ruhe, damit die Hauptaktion auch ohne
   Hover (Touch!) sofort als die wichtigere erkennbar bleibt. Kein
   Sweep nötig – er ist ja schon voll. */
.btn--primary {
  background: var(--char); color: var(--cream); border-color: var(--char);
}
.btn--primary::before { background: var(--gold-bright); }
.btn--primary::after { content: none; }
.btn--primary:hover, .btn--primary:focus-visible { background: var(--char-3); border-color: var(--gold-deep); color: var(--cream); }

.btn--ghost { border-color: var(--line); color: var(--ink); }
.btn--ghost::before { background: var(--gold-deep); }
.btn--ghost:hover, .btn--ghost:focus-visible { color: var(--cream); border-color: var(--char); }

/* =========================================================
   Entrance: einmaliger Cascade-Reveal beim Laden/Reload
   ========================================================= */
@keyframes reveal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes reveal-up   { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: no-preference) {
  /* Logo-Teile: Fade auf dem Wrapper, nicht auf den Bildern selbst – die
     Bilder tragen die Hell/Dunkel-Crossfade-Opacity (siehe Header-Block
     weiter unten); eine Animation direkt auf ihnen würde deren opacity per
     fill-mode:both dauerhaft auf 1 einfrieren und die dunkle Version über
     die helle legen, egal ob der Header transparent oder gescrollt ist. */
  .brand__mark, .brand__word { animation: reveal-fade .45s ease both; }
  .brand__mark { animation-delay: 0s; }
  .brand__word { animation-delay: .05s; }

  .nav__menu, .hero .eyebrow, .hero__title, .hero__lead, .hero__actions {
    animation: reveal-up .55s cubic-bezier(.2,.7,.2,1) both;
  }
  .nav__menu     { animation-delay: .10s; }
  .hero .eyebrow { animation-delay: .15s; }
  .hero__title   { animation-delay: .20s; }
  .hero__lead    { animation-delay: .28s; }
  .hero__actions { animation-delay: .36s; }
}

/* Notausstieg für den Entrance.
   Die Animationen oben laufen mit fill-mode: both – vor dem ersten Frame hält
   das Element den from-Zustand, also opacity:0. In jedem echten Browser ist das
   unsichtbar kurz. In einem Renderer, der zwar CSS anwendet, die Zeitleiste aber
   nie vorrückt, bleibt der Zustand für immer stehen: Logo, Navigation, Headline
   und die Telefonnummer wären dauerhaft leer.
   script.js prüft nach 1.5s, ob der Hero tatsächlich sichtbar geworden ist, und
   setzt diese Klasse nur, wenn er es nicht ist. Kein Gate, ein Nachweis –
   deshalb kann sie im Normalfall nie fälschlich zuschlagen. */
.entrance-stuck .brand__mark, .entrance-stuck .brand__word,
.entrance-stuck .nav__menu, .entrance-stuck .hero .eyebrow,
.entrance-stuck .hero__title,
.entrance-stuck .hero__lead, .entrance-stuck .hero__actions {
  animation: none;
}

/* =========================================================
   Scroll-Reveal: Sektionsüberschriften + Gold-Strich
   (JS armiert erst, wenn IntersectionObserver + Motion ok sind
   -> Inhalt ist NIE unsichtbar, falls JS nicht läuft)
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  /* Einzel-Reveal: Überschriften + Fließtext-Blöcke faden von unten ein.
     .reveal-armed setzt ausschließlich JS – ohne Skript bleibt alles sichtbar. */
  .reveal-armed {
    opacity: 0; transform: translateY(16px);
    transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);
  }
  .reveal-armed.is-inview { opacity: 1; transform: translateY(0); }
  .section .eyebrow.reveal-armed::before {
    transform: scaleX(0); transform-origin: left;
    transition: transform .5s cubic-bezier(.2,.7,.2,1) .15s;
  }
  .section .eyebrow.reveal-armed.is-inview::before { transform: scaleX(1); }

  /* Gruppen-Reveal mit Stagger: Kinder faden nacheinander ein (0.6s ease-out,
     20px). Die Verzögerung je Kind setzt JS inline (i * 0.1s, gedeckelt). */
  .reveal-item {
    opacity: 0; transform: translateY(20px);
    transition: opacity .6s ease-out, transform .6s ease-out;
  }
  .reveal-item.is-inview { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   Header / Nav
   ========================================================= */
/* In der Grundposition liegt der Header transparent über dem Hero-Foto –
   erst beim Scrollen bekommt er seinen festen Papier-Grund samt Blur und
   Trennkante zurück. Logo und Nav wechseln parallel von Hell-auf-Foto auf
   die ursprüngliche Dunkel-auf-Creme-Fassung (siehe .brand__mono--light
   etc. und die Nav-Farben weiter unten). */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: transparent; backdrop-filter: none;
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: rgba(237,233,224,0.85); backdrop-filter: saturate(1.1) blur(12px);
}
/* Logo-Crossfade: Hell- und Dunkelversion liegen deckungsgleich
   übereinander, nur die Opacity wechselt – kein Reflow, kein Bildtausch
   per JS. Die Größe gibt die sichtbare (helle) Version über aspect-ratio
   vor, die zweite liegt per position:absolute exakt darüber.
   Nur innerhalb von .brand__mark/.brand__word aktiv: Impressum und
   Datenschutz führen die Marke noch als einfaches Bildpaar ohne
   Crossfade (kein Hero dahinter, das eine helle Variante rechtfertigt) –
   ohne die Wrapper-Spans blieben die Bilder sonst positionslos und
   übereinander liegend, statt regulär im Textfluss. */
.brand__mark, .brand__word { position: relative; display: block; }
.brand__mark { height: 46px; aspect-ratio: 72 / 96; }
.brand__word { height: 32px; aspect-ratio: 520 / 90; }
.brand__mark .brand__mono, .brand__word .brand__wordmark {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  transition: opacity .3s ease;
}
.brand__mono--dark, .brand__wordmark--dark { opacity: 0; }
.site-header.is-scrolled .brand__mono--dark,
.site-header.is-scrolled .brand__wordmark--dark { opacity: 1; }
.site-header.is-scrolled .brand__mono--light,
.site-header.is-scrolled .brand__wordmark--light { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .brand__mono, .brand__wordmark { transition: none; }
}
/* Dezenter Shrink beim Scrollen (reines Transform, kein Reflow –
   Header-Box selbst bleibt in der Höhe fix) */
.brand__mark, .brand__word {
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  transform-origin: left center;
}
@media (prefers-reduced-motion: reduce) {
  .brand__mark, .brand__word { transition: none; }
}
.site-header.is-scrolled .brand__mark,
.site-header.is-scrolled .brand__word { transform: scale(0.86); }
/* Drei Spalten statt zwei: Logo und Kontaktieren-Button sitzen an den
   äußeren Kanten, die Nav-Links zentrieren sich in der mittleren Spalte –
   dafür ist der Button jetzt ein eigenständiges drittes Grid-Element,
   kein Listeneintrag mehr in .nav__menu. Eigener, breiterer Rahmen als
   der restliche Seiteninhalt (.wrap), damit beide Ränder wirklich näher
   an die Viewport-Kante rücken. */
.wrap.site-header__inner { max-width: 1580px; padding-inline: clamp(1.25rem, 4vw, 3.75rem); }
.site-header__inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; min-height: 76px; }
.brand { display: inline-flex; align-items: center; gap: 0.75rem; text-decoration: none; }
.nav { display: flex; justify-content: center; }

/* min-height, nicht mehr Padding: Der Knopf erscheint nur auf Mobil und war
   mit reinem Padding 32px hoch. Er ist dort die einzige Zugangstür zur
   Navigation – 44px ist das Mindestmaß für einen Daumen. Padding bleibt, damit
   sich an der optischen Breite nichts ändert. */
.nav__toggle {
  display: none; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 44px;
  background: none; border: 1px solid var(--muted-dark); border-radius: var(--radius);
  padding: 0.5rem 0.95rem; cursor: pointer; font-family: var(--font-body); font-weight: 700; color: var(--cream);
  transition: color .25s ease, border-color .25s ease;
}
.site-header.is-scrolled .nav__toggle { border-color: var(--line); color: var(--ink); }
.nav__toggle-bars, .nav__toggle-bars::before, .nav__toggle-bars::after {
  display: block; width: 18px; height: 2px; background: currentColor; position: relative;
}
.nav__toggle-bars::before, .nav__toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav__toggle-bars::before { top: -6px; } .nav__toggle-bars::after { top: 6px; }

.nav__menu { list-style: none; display: flex; align-items: center; gap: 1.9rem; padding: 0; }
/* Grundzustand = helle Schrift auf dem transparenten Header über dem
   Hero-Foto. Sobald gescrollt wird, übernimmt .is-scrolled wieder die
   ursprüngliche dunkle Schrift auf Papier-Grund. */
.nav__menu a { text-decoration: none; color: var(--cream); font-weight: 500; font-size: 0.98rem; padding: 0.4rem 0; position: relative; transition: color .18s ease; }
.nav__menu a:hover { color: var(--gold-bright); }
.nav__menu a::after {
  content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px; background: var(--gold-bright);
  transform: scaleX(0); transform-origin: left; transition: transform .22s ease;
}
.nav__menu a:hover::after, .nav__menu a:focus-visible::after { transform: scaleX(1); }
.site-header.is-scrolled .nav__menu a { color: var(--body); }
.site-header.is-scrolled .nav__menu a:hover { color: var(--ink); }
.site-header.is-scrolled .nav__menu a::after { background: var(--gold-deep); }
/* Dieselbe Sprache wie der Hero-Anruf-Button (gerahmte Plakette,
   Goldstrich, einlaufende Füllung statt Farbwechsel), nur in Zeilenform
   für die knappe Header-Höhe statt gestapelt. */
.nav__cta {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; gap: 0.65rem;
  padding: 0.8rem 1.7rem; border: 1px solid rgba(238,232,220,0.55); border-radius: 0;
  font-family: var(--font-body); font-weight: 600; font-size: 0.78rem;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--cream);
  text-decoration: none;
  transition: color .3s ease .1s, border-color .3s ease;
}
.nav__cta::before { content: ""; width: 14px; height: 1px; background: var(--gold-bright); flex: none; }
.nav__cta::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: #fff; transform: translateX(-100%);
}
.nav__cta:hover, .nav__cta:focus-visible { color: var(--char); }
.nav__cta:focus-visible { outline: 1px solid var(--gold-bright); }
/* Auf dem gescrollten Creme-Grund braucht der Rahmen eine dunklere Kante
   und die Schrift Tinte statt Kreide, sonst verschwimmt beides. */
.site-header.is-scrolled .nav__cta { border-color: var(--line); color: var(--ink); }
.site-header.is-scrolled .nav__cta:hover, .site-header.is-scrolled .nav__cta:focus-visible { color: var(--char); }
@media (prefers-reduced-motion: no-preference) {
  .nav__cta::after { transition: transform .45s cubic-bezier(.65,0,.35,1); }
  .nav__cta:hover::after, .nav__cta:focus-visible::after { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .nav__cta:hover::after, .nav__cta:focus-visible::after { transform: translateX(0); }
}

/* =========================================================
   Hero — Ladenfront-Foto, volle Höhe
   Der Hero zieht sich per negativem Margin unter den (in der Grundposition
   transparenten) Header und füllt so exakt den ersten Viewport von y=0 an;
   der sticky Header schwebt darüber, statt Platz für sich zu reservieren.
   Der Rest der Seite liegt bewusst einen Scroll tiefer. Zentriert statt
   linksbündig, damit die Textfläche wie eine bewusste Ansage wirkt statt
   einer zufällig positionierten Spalte neben dem Foto.
   ========================================================= */
.hero {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  margin-top: calc(-1 * var(--header-h));
  padding-block: clamp(4rem, 10vw, 7rem); text-align: center;
  background: var(--char); color: var(--cream);
}
.hero { --pf-sepia: 0.4; --pf-sat: 0.7; --pf-bri: 0.72; }
.hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%;
}
/* Auf schmalen, hohen Viewports zeigt object-fit: cover das Foto in voller
   Höhe (Querformat in Hochformat-Rahmen kürzt nur seitlich) – das eigene
   Ladenschild rutscht dann direkt unter unsere Headline. Ein Zoom mit
   Bezugspunkt unten schneidet das Schild oben ab und zentriert auf Eingang,
   Fenster und Markise, wo kein zweiter Textblock stört. Ab 640px Breite
   übernimmt ohnehin das eigens im Hochformat fotografierte Bild (siehe
   <picture>-Quelle im Markup) – der Zoom-Ausgleich ist nur für breitere,
   hochkant gehaltene Viewports (z. B. Tablet) nötig, die noch das
   16:9-Foto bekommen. */
@media (max-aspect-ratio: 4/5) and (min-width: 641px) {
  .hero__media img { transform: scale(1.7); transform-origin: 50% 100%; }
}
/* Kräftiger Verlauf: das eigene Ladenschild und die Fensterbeschriftung
   tragen denselben Namen wie unsere Headline und würden ihr sonst die
   Lesbarkeit streitig machen. Der Verlauf drückt das Foto durchgehend
   in den Hintergrund – Stimmung statt zweiter Textebene – und vertieft
   sich zusätzlich dort, wo Fließtext und CTA sitzen.
   Die Mitte des Radialverlaufs stand auf 0,12 und war damit die hellste
   Stelle des Bildes – genau dort, wo Eyebrow und Fließtext liegen. Am
   gerenderten Bild gemessen hielten beide nur 4,19:1 und 4,24:1 und
   verfehlten die 4,5:1 für Fließtext knapp. 0,26 schließt die Lücke und
   lässt die Ladenfront weiterhin erkennbar. */
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(20,14,8,0.58) 0%, rgba(20,14,8,0.68) 40%, rgba(20,14,8,0.78) 100%),
    radial-gradient(75% 60% at 50% 48%, rgba(20,14,8,0.26), rgba(20,14,8,0.45) 100%);
}
.hero__copy { position: relative; z-index: 1; }
.hero__ai-tag { z-index: 1; right: 1.25rem; bottom: 1.25rem; }
.hero .eyebrow { color: var(--muted-dark); }
/* Der Goldstrich vor dem Eyebrow-Wort funktioniert auf Sektionsköpfen mit
   Fließtext daneben, aber direkt über der Headline wirkt er wie ein
   abgerissener Gedankenstrich. Nur hier deshalb ausgeblendet. */
.hero .eyebrow::before { display: none; }
/* Die Headline trägt jetzt den Markennamen selbst – in Versalien und mit
   Sperrung an die Inschriften-Anmutung des Logos angelehnt (siehe
   Kommentar oben zu Marcellus/Cinzel), statt der bisherigen zwei Zeilen. */
.hero__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--step-4); line-height: 1; color: var(--cream);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.hero__lead { color: var(--muted-dark); font-size: var(--step-0); line-height: 1.6; max-width: 44ch; margin: 1.3rem auto 0; }
/* Gestapelt statt nebeneinander: eine gerahmte Haupt-Aktion, darunter,
   deutlich leiser, der Weg zur Adresse – die Hierarchie liegt in der
   Anordnung selbst, nicht nur in Farbe oder Größe. */
.hero__actions { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; margin-top: 2.75rem; }

/* Anrufen: keine Bootstrap-Pille, sondern eine gerahmte Fläche im Format
   einer gestochenen Plakette – schmale Versalien, sehr weite Sperrung,
   scharfe statt runde Ecken, dazu ein Goldstrich, der die Marke zitiert
   (siehe .eyebrow::before). Der Rahmen bleibt beim Hover stehen; die
   Füllung läuft von links dahinter ein – wie Tinte, die eine gravierte
   Kontur auffüllt, statt einer simplen Farbumschaltung. */
.hero__cta {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1.5rem 4.4rem;
  border: 1px solid rgba(238,232,220,0.55);
  text-decoration: none;
}
.hero__cta-label {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
  font-family: var(--font-body); font-weight: 600; font-size: 0.92rem;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--cream);
  transition: color .3s ease .1s;
}
.hero__cta-label::before { content: ""; width: 22px; height: 1px; background: var(--gold-bright); }
.hero__cta::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--cream); transform: translateX(-100%);
}
.hero__cta:hover .hero__cta-label, .hero__cta:focus-visible .hero__cta-label { color: var(--char); }
.hero__cta:focus-visible { outline: 1px solid var(--gold-bright); outline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .hero__cta::after { transition: transform .55s cubic-bezier(.65,0,.35,1); }
  .hero__cta:hover::after, .hero__cta:focus-visible::after { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__cta:hover::after, .hero__cta:focus-visible::after { transform: translateX(0); }
}

/* Route planen: kein zweiter Rahmen, kein zweites Gewicht – ein reiner
   Text-Link, leiser als die Nav-Links (kleiner, gesperrter, gedämpfter),
   der beim Hover aufhellt und dessen Pfeil sich lösen. */
.hero__link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-body); font-weight: 500; font-size: 0.78rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted-dark); text-decoration: none;
  padding-bottom: 3px; border-bottom: 1px solid transparent;
  transition: color .3s ease, border-color .3s ease;
}
.hero__link:hover, .hero__link:focus-visible { color: var(--cream); border-color: rgba(238,232,220,0.5); }
.hero__link:focus-visible { outline: 1px solid var(--gold-bright); outline-offset: 4px; }
.hero__link-icon { width: 0.85em; height: 0.85em; }
@media (prefers-reduced-motion: no-preference) {
  .hero__link-icon { transition: transform .3s cubic-bezier(.2,.8,.2,1); }
  .hero__link:hover .hero__link-icon, .hero__link:focus-visible .hero__link-icon { transform: translateX(3px); }
}

/* =========================================================
   Trust-Strip
   ========================================================= */
/* Die senkrechten Haarlinien zwischen den Feldern sind ersatzlos entfallen –
   der Spaltenabstand trennt bereits deutlich genug. */
.trust { border-block: 1px solid var(--line); background: var(--paper-2); }
.trust__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-block: clamp(2.2rem, 4vw, 3.2rem);
}
.trust__item { position: relative; }
/* Hauchdünnes Line-Icon über jedem USP – gibt der Textwüste einen Anker.
   Gold-deep hält auf Panel-Creme die nötigen 3:1 für Nicht-Text. */
.trust__icon { display: block; margin-bottom: 0.85rem; color: var(--gold-deep); }
.trust__icon svg { width: 30px; height: 30px; display: block; }
.trust__k { display: block; font-family: var(--font-display); font-size: 1.42rem; font-weight: 400; letter-spacing: 0; color: var(--ink); }
.trust__v { display: block; margin-top: 0.4rem; font-size: var(--step--1); color: var(--muted); line-height: 1.4; }

/* =========================================================
   Leistungen (Accordion + echte Preisliste)
   ========================================================= */
.leistungen__note { margin-top: 1.3rem; font-size: var(--step--1); color: var(--muted); }

/* Keine Rahmenlinie oben, keine Ziffern, weichere Trennung, mehr Luft:
   Damen/Herren/Kinder/Beauty sind Zielgruppen, keine Reihenfolge – eine
   Nummerierung hätte nichts kodiert, was der Leser braucht. */
.acc + .acc { border-top: 1px solid rgba(210,203,187,0.45); }
.acc__head {
  width: 100%; background: none; border: 0; cursor: pointer;
  display: flex; align-items: center; gap: 1.5rem; padding: clamp(1.9rem, 4vw, 2.9rem) 0;
  font-family: inherit; color: var(--ink); text-align: left;
  scroll-margin-top: 92px; /* bei Fokus-/Hash-Sprung nicht unter den Sticky-Header rutschen */
}
.acc__text { flex: 1; display: flex; flex-direction: column; gap: 0.45rem; }
.acc__title { font-family: var(--font-display); font-size: var(--step-2); font-weight: 400; letter-spacing: 0; line-height: 1.1; transition: color .2s ease; }
.acc__count { font-size: var(--step--1); color: var(--muted); }
.acc__icon { position: relative; width: 20px; height: 20px; flex: none; }
.acc__icon::before, .acc__icon::after {
  content: ""; position: absolute; top: 50%; left: 50%; background: var(--gold-deep);
  transform: translate(-50%,-50%) rotate(0deg);
  transition: transform .32s cubic-bezier(.4,0,.2,1), opacity .32s ease;
}
.acc__icon::before { width: 16px; height: 1px; }
.acc__icon::after { width: 1px; height: 16px; }
.acc__head[aria-expanded="true"] .acc__title { color: var(--gold-deep); }
.acc__head[aria-expanded="true"] .acc__icon::before { transform: translate(-50%,-50%) rotate(180deg); }
.acc__head[aria-expanded="true"] .acc__icon::after { transform: translate(-50%,-50%) rotate(180deg) scaleY(0); opacity: 0; }
.acc__head:hover .acc__title { color: var(--gold-deep); }
@media (prefers-reduced-motion: reduce) {
  .acc__icon::before, .acc__icon::after { transition: opacity .2s ease; }
}

.acc__panel { overflow: hidden; height: 0; transition: height .32s cubic-bezier(.4,0,.2,1); }
@media (prefers-reduced-motion: reduce) { .acc__panel { transition: none; } }
.acc__inner { padding-bottom: clamp(1.5rem, 3vw, 2.4rem); }
/* Sanftes Ein-/Ausblenden zusätzlich zur Höhe. Nur bei erlaubter Bewegung
   armiert – reduzierte Bewegung (und Browser ohne :has) behalten opacity:1,
   der Inhalt ist also nie versehentlich unsichtbar. */
@media (prefers-reduced-motion: no-preference) {
  .acc__inner { opacity: 0; transition: opacity .32s ease-in-out; }
  .acc:has(.acc__head[aria-expanded="true"]) .acc__inner { opacity: 1; }
}

/* Untergruppen innerhalb einer Kategorie.
   Statt Trennlinien und Mittelpunkten trägt hier der Weißraum die Hierarchie –
   genau wie auf dem gedruckten Flyer, wo "Komplettfärbung:" als Zwischentitel
   über den eingerückten Längen steht. */
.price-cols { columns: 2; column-gap: clamp(2rem, 5vw, 4.5rem); }
.price-group { break-inside: avoid; margin-bottom: 3rem; }
.price-group__title {
  font-family: var(--font-body); font-size: var(--step--1); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-deep);
  margin-bottom: 1.1rem;
}
.price-sub {
  font-family: var(--font-display); font-size: var(--step-0); color: var(--ink);
  margin-top: 1.4rem; margin-bottom: 0.15rem;
}
.price-list { list-style: none; padding: 0; }
.price-list--sub { padding-left: 1.1rem; }
.price-list--sub + .price-list { margin-top: 1.4rem; }
/* Dot-Leader: drei Grid-Spalten – Name (auto), gepunktete Führungslinie (1fr),
   Preis (auto). Die Linie ist ein ::before, per grid-column explizit in die
   Mitte gesetzt, damit keine ~50 <li> im Markup angefasst werden müssen.
   align-self:end + kleiner Hub setzt sie auf die Schriftlinie statt auf die
   Zeilen-Unterkante. */
.price {
  display: grid; grid-template-columns: auto 1fr auto; align-items: baseline;
  column-gap: 0.15rem; padding: 0.55rem 0;
}
/* Explizite Zeilen: Name, Führungslinie und Preis liegen immer in Zeile 1,
   die (optionale) Beschreibung fällt auf Zeile 2. Ohne das würde die
   full-width-Beschreibung – die im Markup VOR dem Preis steht (Braut-Paket) –
   den Preis per Grid-Auto-Placement in eine dritte Zeile schieben. */
.price__name { grid-column: 1; grid-row: 1; min-width: 0; font-weight: 600; color: var(--ink); font-size: var(--step-0); }
.price::before {
  content: ""; grid-column: 2; grid-row: 1; align-self: end;
  margin: 0 0.6rem; border-bottom: 1px dotted rgba(33,25,16,0.28);
  transform: translateY(-0.32em);
}
.price__value { grid-column: 3; grid-row: 1; font-family: var(--font-body); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.price__desc { grid-column: 1 / -1; grid-row: 2; color: var(--muted); font-size: var(--step--1); line-height: 1.4; margin-top: 0.1rem; }
.price__value .ab { font-size: 0.72em; font-weight: 600; color: var(--muted); margin-right: 0.3em; text-transform: lowercase; }
.price__hint { margin-top: 0.6rem; font-size: var(--step--1); color: var(--muted); font-style: italic; }

/* =========================================================
   Geschichte — dunkle Anthrazit-Sektion für Rhythmus
   ========================================================= */
.geschichte { background: var(--char); color: var(--cream); }
.geschichte .eyebrow { color: var(--muted-dark); }
.geschichte .section__title { color: var(--cream); }
/* Magazin-Layout statt starrem Text-links-Bild-rechts: ungleiche Spalten,
   oben ausgerichtet, das Bild bewusst nach unten versetzt – die Asymmetrie
   erzeugt Rhythmus, der Text bekommt Luft nach oben. */
.geschichte__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 5vw, 5.5rem); align-items: start; }
.geschichte__copy { padding-top: clamp(0.25rem, 2vw, 2rem); }
.geschichte__copy p { margin-top: 1.15rem; color: var(--cream-2); max-width: 52ch; }
.geschichte__copy p:first-of-type { margin-top: 1.6rem; }
/* margin-top erzeugt den Magazin-Versatz nach unten (Desktop); im
   Single-Column-Breakpoint unten wieder auf 0 gesetzt. */
.geschichte__figure { margin: 0; margin-top: clamp(1.5rem, 5vw, 4rem); position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.geschichte__figure::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(216,185,104,0.35); pointer-events: none; }
/* KI-Kennzeichnung nach Art. 50 KI-VO: sitzt auf jedem KI-bearbeiteten
   Foto direkt sichtbar in der Ecke, nicht erst bei Hover – gilt fürs
   Hero-Ladenfoto (siehe .hero__ai-tag) und die drei Fotos hier im Salon-
   Kapitel. Eigene Stacking-Ebene (z-index), damit sie über der Gold-
   Haarlinie (::after) und dem Hero-Verlauf liegt statt darunter. */
.ai-tag {
  position: absolute; z-index: 2; right: 0.85rem; bottom: 0.85rem;
  padding: 0.35rem 0.7rem; margin: 0;
  background: rgba(33,25,16,0.6); border: 1px solid rgba(216,185,104,0.4);
  border-radius: var(--radius); backdrop-filter: blur(4px);
  color: var(--cream); font-family: var(--font-body); font-weight: 600;
  font-size: var(--step--2); letter-spacing: 0.06em; text-transform: uppercase;
}
/* Liegt bereits auf dunklem Grund – braucht weniger Abdunklung als die Galerie. */
.geschichte { --pf-sepia: 0.28; --pf-bri: 0.90; }
.geschichte__figure img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

/* Einblick-Band: zwei Ladenfotos unter dem Magazin-Grid.
   Sie erben Gold-Haarlinie + Schatten von .geschichte__figure; hier nur der
   Zwei-Spalten-Rhythmus und das ruhige Querformat. Bewusst 3:2 statt quadratisch:
   nebeneinander würden zwei Quadrate den ganzen Viewport füllen; das flache
   Format zeigt den Raum, ohne die Seite zu dominieren. */
.geschichte__einblick {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(0.9rem, 2.2vw, 1.5rem);
  margin-top: clamp(2.5rem, 6vw, 5rem);
}
.geschichte__einblick .geschichte__figure { margin-top: 0; max-width: none; }
.geschichte__einblick .geschichte__figure img { aspect-ratio: 3 / 2; object-position: center 55%; }
/* Diese zwei zeigen den echten Raum – hier verkauft Helligkeit „sauber &
   professionell", nicht Atmosphäre. Deshalb crisp wie die Galerie (statt des
   dunkel-warmen Geschichte-Filters), nur ein Hauch Sepia für Paletten-Bindung.
   Als heller Block brechen sie zugleich den dunklen Seitenmittelteil auf. */
.geschichte__einblick { --pf-sepia: 0.08; --pf-sat: 0.96; --pf-con: 1; --pf-bri: 1; }
/* Vier identische Häkchen standen vor vier verschiedenen Aussagen und
   sagten viermal dasselbe: "Häkchen". Ohne Marker trägt der Abstand die
   Liste – deshalb steht hier mehr Luft, als eine Icon-Liste bräuchte. */
.geschichte__list { list-style: none; padding: 0; margin-top: 1.9rem; display: grid; gap: 1.05rem; max-width: 42ch; }
.geschichte__list li { color: var(--cream); font-size: var(--step-0); line-height: 1.45; }

/* =========================================================
   Frauenbereich — heller Bruch zwischen den zwei dunklen Kapiteln
   (Der Salon / Über uns). Selbe Foto-Rahmung wie .geschichte__figure,
   aber eigene Klassen: inhaltlich ein anderes Thema, kein Wiederverwenden
   fremder Sektions-Klassennamen.
   ========================================================= */
.frauenbereich__grid {
  display: grid; grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
  margin-top: clamp(2rem, 4vw, 3rem);
}
/* Kein Marker, keine Gold-Häkchen: dieselbe Zurückhaltung wie bei
   .geschichte__list – der Abstand trägt die Liste. */
.frauenbereich__list { list-style: none; padding: 0; display: grid; gap: 1.1rem; max-width: 36ch; }
.frauenbereich__list li { color: var(--body); font-size: var(--step-0); line-height: 1.5; }

.frauenbereich__figures { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.9rem, 2.2vw, 1.5rem); }
.frauenbereich__figure { margin: 0; position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.frauenbereich__figure::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(216,185,104,0.35); pointer-events: none; }
.frauenbereich__figure img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.frauenbereich { --pf-sepia: 0.1; --pf-sat: 0.94; --pf-con: 1; --pf-bri: 1; }

/* =========================================================
   Über uns — zweiter Teil des dunklen "Brand-Kapitels"
   (direkt an Geschichte anschließend, bewusst ohne Foto:
   kein Portrait vorhanden, daher Zitat + Wasserzeichen statt
   ein wiederverwendetes Salon-Foto).
   ========================================================= */
.about { background: var(--char); color: var(--cream); position: relative; overflow: hidden; }
.about::before {
  content: ""; position: absolute; top: 50%; right: -8%; transform: translateY(-50%);
  width: 46%; max-width: 420px; aspect-ratio: 646 / 860;
  background: url("images/monogram-weiss.png") center / contain no-repeat;
  opacity: 0.05; pointer-events: none; z-index: 0;
}
.about .eyebrow { color: var(--muted-dark); }
.about .section__title { color: var(--cream); }
.about__grid { position: relative; z-index: 1; max-width: 62ch; }

/* Zitat editorial eingerückt (asymmetrisch nach rechts), damit es aus dem
   Fließtext heraustritt statt bündig mitzulaufen. */
.about__quote {
  position: relative; margin: 2.5rem 0 2rem; padding-left: 1.75rem;
  margin-left: clamp(0rem, 3vw, 2.75rem); border-left: 2px solid var(--gold);
}
/* Riesiges Anführungszeichen als dezentes Wasserzeichen hinter dem Zitat.
   Marcellus, Gold, sehr niedrige Deckkraft – edel, nie mitgelesen. */
.about__quote::before {
  content: "\201C"; position: absolute; top: -0.42em; left: -0.6rem;
  font-family: var(--font-display); font-size: 10rem; line-height: 1;
  color: var(--gold-bright); opacity: 0.08; pointer-events: none; z-index: 0;
}
.about__quote > * { position: relative; z-index: 1; }
.about__quote p {
  font-family: var(--font-display); font-size: var(--step-2); font-weight: 400;
  line-height: 1.45; color: var(--cream); letter-spacing: 0;
}
.about__quote footer {
  margin-top: 1rem; font-family: var(--font-body); font-size: var(--step--1);
  font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-bright);
}


.about__signature {
  list-style: none; padding: 0; margin-top: 2.4rem;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem;
}
/* Drei identische 2px-Verläufe nebeneinander waren die templatigste Stelle
   der Seite. Eine zurückgenommene Haarlinie ordnet, ohne zu dekorieren. */
.about__signature li {
  border-top: 1px solid rgba(216,185,104,0.35); padding-top: 0.95rem;
}
.about__signature-k {
  display: block; font-family: var(--font-display); font-weight: 400;
  font-size: var(--step-1); color: var(--gold-bright); margin-bottom: 0.4rem;
}
.about__signature-v { display: block; color: var(--cream-2); font-size: var(--step--1); line-height: 1.5; }

/* =========================================================
   Galerie
   ========================================================= */
/* Damen und Herren trennen, ohne die Galerie zu zerschneiden. Die Leiste ist
   im Markup hidden und wird von script.js freigeschaltet. */
.gallery__filter { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 1.75rem; }
/* Dieselbe Ursache wie beim Nav-Knopf: Höhe kam allein aus dem Padding, 33px.
   Drei Filter direkt nebeneinander sind auf dem Handy ein Trefferproblem. */
.gallery__filter-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;
  background: none; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0.5rem 1.1rem; cursor: pointer;
  font-family: var(--font-body); font-size: var(--step--1); font-weight: 600;
  color: var(--muted);
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
.gallery__filter-btn:hover { color: var(--ink); border-color: var(--gold-deep); }
.gallery__filter-btn[aria-pressed="true"] { background: var(--char); border-color: var(--char); color: var(--cream); }

/* Gleichmäßiges Raster: jede Kachel ist ein Quadrat gleicher Größe, ob Foto
   oder Video, ob ungefiltert oder nach Damen/Herren gefiltert. Ein einziges,
   ruhiges Raster statt eines Mosaiks mit Sonderformaten. */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.gallery__item { margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--paper-2); position: relative; aspect-ratio: 1; --zoom: 1.06; }
/* Ganze Szenen wirken nach Handyfoto, enge Ausschnitte nach Redaktion.
   --crop steht pro Foto im HTML – dort gehört die Information hin, welcher
   Teil des Bildes das Handwerk zeigt. --zoom schneidet zusätzlich hinein und
   schiebt die Unordnung an den Rändern aus dem Bild: Produktposter,
   Fensterbank, Rollwagen. */
/* Einzige Sektion, in der die Fotos ihre echte Farbe behalten. Ein Balayage,
   dessen Ton man erst beim Drüberfahren sieht, zeigt seine Arbeit nicht. Der
   Rest-Sepia hält die Kacheln nur noch in der Palette, statt sie zu dämpfen. */
.gallery__item img {
  --pf-sepia: 0.06; --pf-sat: 1; --pf-con: 1; --pf-bri: 1;
  width: 100%; height: 100%; object-fit: cover;
  object-position: var(--crop, 50% 50%);
  transform: scale(var(--zoom, 1));
  transition: transform .55s cubic-bezier(.2,.7,.2,1);
}
/* Da die Kacheln schon farbig sind, kann der Hover keine Farbe mehr dazugeben.
   Er tritt stattdessen näher: das Bild wächst, die Goldkante schließt sich.
   Bei reduzierter Bewegung entfällt der Zoom, die Kante trägt die Hervorhebung
   dann allein. */
@media (prefers-reduced-motion: no-preference) {
  .gallery__item:hover img { transform: scale(calc(var(--zoom, 1) * 1.06)); }
}
/* Dunkles Overlay von unten legt sich beim Hover/Tap über das Bild – der
   Premium-Schatten, den ein farbiges Foto sonst nicht vom Zoom allein bekäme.
   Die Goldkante (::after) liegt per z-index darüber und rahmt. */
.gallery__item::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(20,14,8,0.46), rgba(20,14,8,0.06) 55%, transparent);
  opacity: 0; transition: opacity .4s ease;
}
.gallery__item:hover::before, .gallery__item:active::before { opacity: 1; }
.gallery__item::after { content: ""; position: absolute; inset: 0; z-index: 2; border: 0 solid var(--gold-deep); opacity: 0; transition: opacity .3s ease; }
.gallery__item:hover::after { opacity: 1; border-width: 2px; }
/* Per JS klickbar gemacht: Cursor und Fokusring zeigen, dass sich etwas öffnet. */
.gallery__item[role="button"] { cursor: pointer; }
.gallery__item[role="button"]:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }

/* ---- Bewegte Kacheln ------------------------------------------------------
   Die beiden Videos laufen stumm in Endlosschleife. Sie sitzen im selben
   Quadrat wie die Fotos; object-fit schneidet das 9:16-Bild mittig zu. */
.gallery__video {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%;
  display: block; background: var(--paper-2);
  transform: scale(var(--zoom, 1));
  transition: transform .55s cubic-bezier(.2,.7,.2,1);
}
@media (prefers-reduced-motion: no-preference) {
  .gallery__item--video:hover .gallery__video { transform: scale(1.05); }
}
/* Play-Plakette signalisiert Bewegung, auch bevor das Video im Blick startet. */
.gallery__badge {
  position: absolute; top: 0.7rem; right: 0.7rem; z-index: 3;
  width: 2.1rem; height: 2.1rem; display: grid; place-items: center;
  border-radius: 50%; background: rgba(20,14,8,0.55);
  border: 1px solid rgba(214,183,120,0.6);
  backdrop-filter: blur(2px); pointer-events: none;
}
.gallery__badge svg { width: 0.9rem; height: 0.9rem; fill: var(--cream); margin-left: 1px; }
/* Kurzes Label unten links; nennt die Arbeit, da Videos nicht in die Lightbox
   öffnen. Liegt über dem Hover-Verlauf (::before, z-index 1). */
.gallery__vcap {
  position: absolute; left: 0.8rem; bottom: 0.75rem; z-index: 3;
  color: var(--cream); font-family: var(--font-display);
  font-size: var(--step--1); letter-spacing: 0.01em;
  text-shadow: 0 1px 10px rgba(0,0,0,0.55); pointer-events: none;
}

/* =========================================================
   Lightbox
   Natives <dialog>: Fokusfang, Esc und Backdrop kommen vom Browser.
   ========================================================= */
.lightbox {
  border: 0; padding: 0; background: transparent;
  max-width: 100vw; max-height: 100dvh; width: 100%; height: 100%;
  overflow: hidden;
}
.lightbox::backdrop { background: rgba(0,0,0,0.8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.lightbox[open] {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: clamp(0.5rem, 2vw, 1.5rem); padding: clamp(1rem, 4vw, 3rem);
}
.lightbox__figure { margin: 0; grid-column: 2; display: flex; flex-direction: column; align-items: center; gap: 1rem; min-height: 0; }
.lightbox__img {
  max-width: 100%; max-height: 78dvh; width: auto; height: auto;
  object-fit: contain; border-radius: var(--radius);
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.7);
}
/* Öffnen: das Bild fährt Fade-In + leichten Scale-Up. Nur bei erlaubter
   Bewegung; sonst erscheint es ohne Animation. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes lightbox-in {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
  }
  @keyframes lightbox-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
  .lightbox[open] .lightbox__img { animation: lightbox-in .34s cubic-bezier(.2,.7,.2,1) both; }
  /* Hintergrund blendet beim Öffnen weich ein statt hart zu erscheinen. */
  .lightbox[open]::backdrop { animation: lightbox-backdrop-in .3s ease both; }
}
.lightbox__caption { color: var(--cream-2); font-size: var(--step--1); text-align: center; max-width: 60ch; line-height: 1.5; }

.lightbox__nav, .lightbox__close {
  background: rgba(237,233,224,0.1); color: var(--cream);
  border: 1px solid rgba(238,232,220,0.3); border-radius: 50%;
  cursor: pointer; display: grid; place-items: center; line-height: 1;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.lightbox__nav { width: 3rem; height: 3rem; align-self: center; }
.lightbox__nav--prev { grid-column: 1; }
.lightbox__nav--next { grid-column: 3; }
.lightbox__nav:hover, .lightbox__close:hover { background: var(--gold-deep); border-color: var(--gold-deep); }
.lightbox__nav[hidden] { display: none; }
/* Schlanke SVG-Icons statt klobiger Glyphen. */
.lightbox__nav svg { width: 1.6rem; height: 1.6rem; }
.lightbox__close svg { width: 1.4rem; height: 1.4rem; }

.lightbox__close {
  position: absolute; top: clamp(0.75rem, 2vw, 1.25rem); right: clamp(0.75rem, 2vw, 1.25rem);
  width: 2.75rem; height: 2.75rem;
}
@media (prefers-reduced-motion: no-preference) {
  .lightbox__nav:hover, .lightbox__close:hover { transform: scale(1.08); }
}

/* Auf schmalen Screens sitzen die Pfeile unter dem Bild statt daneben,
   damit dem Foto die volle Breite bleibt. */
@media (max-width: 560px) {
  .lightbox[open] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; }
  .lightbox__figure { grid-column: 1 / -1; grid-row: 1; }
  .lightbox__nav--prev { grid-column: 1; grid-row: 2; }
  .lightbox__nav--next { grid-column: 2; grid-row: 2; justify-self: end; }
}

/* =========================================================
   Zeiten & Anfahrt
   ========================================================= */
.anfahrt__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: stretch; }
.panel { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.5rem, 3.5vw, 2.5rem); }

/* Die Zeilenlinien bleiben – eine Tabelle ohne Linien ist keine Tabelle mehr.
   Nur weicher und mit mehr Luft. */
/* <table> bleibt semantisch (JS liest tr[data-day]); visuell zu Flex-/Grid-
   Zeilen mit demselben Dot-Leader wie die Preisliste. */
.hours { width: 100%; display: block; }
.hours tbody { display: block; }
.hours tr {
  display: grid; grid-template-columns: auto 1fr auto; align-items: baseline;
  padding: 0.9rem 0;
}
.hours th { grid-column: 1; text-align: left; font-weight: 500; color: var(--body); font-variant-numeric: tabular-nums; }
.hours tr::after {
  content: ""; grid-column: 2; align-self: end;
  margin: 0 0.6rem; border-bottom: 1px dotted rgba(33,25,16,0.25);
  transform: translateY(-0.34em);
}
.hours td { grid-column: 3; text-align: right; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.hours__closed { color: var(--muted); font-weight: 500; }
.hours tr.is-today th, .hours tr.is-today td { color: var(--gold-deep); font-weight: 700; }
.hours tr.is-today th { position: relative; padding-left: 1rem; }
.hours tr.is-today th::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 2px; height: 60%; background: var(--gold-deep); }

.contact-block { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-style: normal; display: grid; gap: 1.1rem; }
.contact-row { display: flex; align-items: flex-start; gap: 0.85rem; }
.contact-row svg { width: 20px; height: 20px; flex: none; stroke: var(--gold-deep); margin-top: 2px; }
.contact-row .k { display: block; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 0.15rem; }
.contact-row a, .contact-row span.v { color: var(--ink); font-weight: 600; text-decoration: none; font-variant-numeric: tabular-nums; }
.contact-row a:hover { color: var(--gold-deep); }
.contact__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.5rem; }

.anfahrt__map { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); min-height: 380px; background: var(--paper-3); display: flex; position: relative; }
/* Widerruf der Karten-Einwilligung. Absolut positioniert, weil der Container
   ein Flex-Container ist und der Knopf sonst als zweite Spalte neben der Karte
   landen würde statt auf ihr. */
.map-revoke {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--line); border-radius: calc(var(--radius) / 3);
  background: var(--paper); color: var(--ink);
  font-family: var(--font-body); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.04em; cursor: pointer;
  box-shadow: 0 2px 10px rgba(33,25,16,0.14);
  transition: border-color .3s ease, background .3s ease;
}
.map-revoke:hover { border-color: var(--gold-deep); background: #fff; }
.map-revoke:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
/* Keyloses "Custom Map Theme": der output=embed-iframe nimmt kein Styles-JSON
   an (das bräuchte die Maps-JS-API + Key und bräche das Zwei-Klick-Modell).
   Ein warmer Sepia-/Graustufen-Filter zieht die Karte stattdessen in die
   Palette der Seite. */
.anfahrt__map iframe { width: 100%; height: 100%; min-height: 380px; border: 0; display: block; filter: grayscale(0.4) sepia(0.28) saturate(0.9) contrast(0.95) brightness(1.02); }

/* Steht so lange an der Stelle der Karte, bis jemand sie anfordert. Soll nicht
   nach Fehler aussehen, sondern nach Karte: ein angedeutetes Raster, darauf ein
   Pin. Erklärt wird erst unter dem Button, in einem Satz statt in einem Absatz. */
.map-consent {
  position: relative; flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.9rem; text-align: center; padding: clamp(1.5rem, 4vw, 2.75rem);
  background-color: var(--paper-3);
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 52px 52px;
  transition: background-color .25s ease;
}
.map-consent:hover { background-color: var(--paper-2); }

.map-consent__pin {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  color: var(--gold-deep);
  background: var(--paper-2); border: 1px solid rgba(216,185,104,0.4);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), background-color .25s ease;
}
.map-consent__pin svg { width: 26px; height: 26px; }
.map-consent:hover .map-consent__pin { background: var(--paper-3); }
@media (prefers-reduced-motion: no-preference) {
  .map-consent:hover .map-consent__pin { transform: translateY(-3px); }
}

/* Die ganze Kachel ist der Auslöser: das ::before des Buttons deckt sie ab.
   Deshalb darf der Button selbst hier nicht angehoben werden – ein transform
   würde ihn zum Bezugsrahmen seines eigenen ::before machen, die Klickfläche
   fiele auf Buttongröße zusammen und der Hover würde flackern. Gehoben wird
   stattdessen der Pin. Aus demselben Grund muss .btn's eigenes
   position:relative (für den Sweep der Ghost-Variante) hier wieder raus:
   sonst wird der Button selbst zum Bezugsrahmen seines ::before, statt
   die ganze Kachel.
   Der Goldstrich sitzt hier nicht auf dem ::after des <button> selbst –
   generierter Inhalt auf dem nativen Button-Element bekommt zwar Layout
   und Klickfläche, wird aber in gängigen Browsern nicht gemalt. Deshalb
   trägt ein echtes <span> im Label den Strich, wie schon bei
   .hero__cta-label. */
.map-consent__btn { position: static; overflow: visible; isolation: auto; }
.map-consent__btn::before,
.map-consent__btn:hover::before,
.map-consent__btn:focus-visible::before { content: ""; position: absolute; inset: 0; width: auto; height: auto; background: transparent; }
.map-consent__btn::after { content: none; }
.map-consent__btn:hover { transform: none; box-shadow: none; }
.map-consent__btn-label { display: inline-flex; align-items: center; gap: 0.5rem; }
.map-consent__btn-label::after { content: ""; width: 12px; height: 1px; background: var(--gold-bright); flex: none; }

/* --muted ist auf --paper kalibriert und hält dort 4.89:1 – gerade eben über
   den 4.5:1 für normalen Text. Diese Kachel liegt auf --paper-3, dem dunkelsten
   hellen Panel: dieselbe Farbe fällt hier auf 4.13:1 und damit unter AA.
   Ausgerechnet der Datenschutzhinweis, den man zum Einwilligen lesen muss.
   --body hält auf --paper-3 6.31:1. */
.map-consent__note { max-width: 46ch; color: var(--body); font-size: var(--step--1); line-height: 1.7; }
/* Positioniert, damit die Links über der Klickfläche des Buttons liegen und
   ihr eigenes Ziel behalten. */
.map-consent__note a { position: relative; z-index: 1; color: var(--body); text-decoration: underline; text-underline-offset: 2px; }
.map-consent__note a:hover { color: var(--gold-deep); }
/* Der Trenner stand auf --line: 1.13:1 gegen die Kachel, praktisch unsichtbar.
   Er ist aria-hidden, also kein AA-Fall – aber ein Trenner, den niemand sieht,
   trennt nichts. --muted bleibt sichtbar und ordnet sich den Links unter. */
.map-consent__note span { margin: 0 0.35rem; color: var(--muted); }

/* =========================================================
   Footer — dunkles Anthrazit mit Gold
   ========================================================= */
/* Der einzige Ort, an dem der Verlauf steht: volle Breite, 1px, an beiden
   Enden verklingend. border-image kann nicht auslaufen – daher ein ::before. */
.site-footer { background: var(--char); color: var(--cream-2); position: relative; padding-top: clamp(3rem, 6vw, 4.5rem); }
.site-footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--gold-line);
}
.site-footer__grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,0.08); }
.footer__wordmark { height: 40px; width: auto; display: block; margin-bottom: 1.2rem; }
.site-footer__brand p { color: var(--muted-dark); font-size: 0.92rem; line-height: 1.55; max-width: 32ch; }
.footer__socials { display: flex; gap: 1.3rem; margin-top: 1.4rem; }
.footer__social { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--cream); text-decoration: none; font-weight: 600; font-size: 0.9rem; }
.footer__social svg { fill: currentColor; }
.footer__social:hover { color: var(--gold-bright); }
.footer__h { font-family: var(--font-display); font-size: 1rem; letter-spacing: 0.01em; color: var(--gold-bright); margin-bottom: 1.1rem; font-weight: 400; }
.footer__hours { list-style: none; padding: 0; font-size: 0.9rem; }
.footer__hours li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.28rem 0; font-variant-numeric: tabular-nums; color: var(--muted-dark); }
.footer__hours span:last-child { color: var(--cream); }
.footer__contact { font-style: normal; font-size: 0.9rem; line-height: 1.75; color: var(--muted-dark); }
.footer__contact a { color: var(--cream); text-decoration: none; font-variant-numeric: tabular-nums; }
.footer__contact a:hover { color: var(--gold-bright); }
.footer__links { list-style: none; padding: 0; font-size: 0.9rem; }
.footer__links li { padding: 0.28rem 0; }
.footer__links a { color: var(--muted-dark); text-decoration: none; }
.footer__links a:hover { color: var(--gold-bright); text-decoration: underline; }
.site-footer__base { padding-block: 1.6rem; font-size: 0.8rem; color: var(--cream-2); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* =========================================================
   Sticky Mobile-Kontaktleiste
   ========================================================= */
/* Schwebende Pille statt Vollbalken: mit Abstand zum Rand, Glasmilch und
   weichem Schatten. Overlay-Chrome – hier sind runde Ecken markenkonform. */
.mobilebar {
  position: fixed; left: 50%; right: auto; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 0.9rem);
  z-index: 130; display: none;
  grid-template-columns: repeat(2, 1fr);
  width: min(340px, calc(100% - 2rem));
  border-radius: 999px; overflow: hidden;
  background: rgba(33,25,16,0.78);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  backdrop-filter: blur(8px) saturate(1.1);
  border: 1px solid rgba(238,232,220,0.16);
  box-shadow: 0 16px 38px -12px rgba(0,0,0,0.58);
}
.mobilebar__btn { display: flex; flex-direction: column; align-items: center; gap: 0.22rem; padding: 0.72rem 0.4rem; color: var(--cream); text-decoration: none; font-size: 0.74rem; font-weight: 700; }
.mobilebar__btn svg { width: 22px; height: 22px; fill: currentColor; }
.mobilebar__btn--call { color: var(--gold-bright); }
.mobilebar__btn + .mobilebar__btn { border-left: 1px solid rgba(238,232,220,0.14); }
.mobilebar__btn:active { background: rgba(238,232,220,0.08); }

/* =========================================================
   Rechtstexte
   ========================================================= */
/* Rechtstexte werden gelesen, nicht überflogen: engeres Maß, größerer
   Zeilenabstand. Deutsche Rechtssprache baut Komposita wie
   "Umsatzsteuer-Identifikationsnummer" – ohne Silbentrennung reißt das
   bei 62ch Löcher in den Flattersatz. */
.legal { padding-block: clamp(3rem, 5vw, 4.5rem) clamp(3.5rem, 6vw, 5.5rem); }
.legal__wrap { max-width: 700px; }
.legal__title { font-family: var(--font-display); font-size: var(--step-3); font-weight: 400; color: var(--ink); margin-bottom: 1.5rem; text-wrap: balance; }
/* Abstand nach oben trennt vom vorigen Abschnitt, der nach unten bindet an
   den eigenen Text. Vorher standen beide zu nah beieinander (2.5 / 0.6). */
.legal h2 { font-family: var(--font-display); font-size: var(--step-1); font-weight: 400; color: var(--ink); margin-top: 3rem; margin-bottom: 0.5rem; text-wrap: balance; }
/* :not(.eyebrow) – sonst erbt das Label Fließtext-Farbe, -Maß und
   Silbentrennung. Es ist ein gesperrtes Versalien-Label, kein Absatz. */
.legal p:not(.eyebrow), .legal ul { color: var(--body); margin-bottom: 0.9rem; max-width: 62ch; line-height: 1.65; hyphens: auto; }
.legal ul { padding-left: 1.2rem; } .legal li { margin-bottom: 0.4rem; }
.legal a { color: var(--gold-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
.legal__back { margin-top: 3rem; } .legal__back a { font-weight: 700; }

/* =========================================================
   Fokus (Keyboard)
   Auf Espresso käme --gold-deep nur auf 2.75:1 – unter den 3:1, die ein
   Fokusring als Nicht-Text-Element braucht. Auf dunklen Flächen übernimmt
   deshalb --gold-bright (9.1:1).
   ========================================================= */
:focus-visible { outline: 2px solid var(--focus-ring, var(--gold-deep)); outline-offset: 3px; border-radius: 2px; }
.geschichte, .about, .site-footer, .mobilebar { --focus-ring: var(--gold-bright); }
.btn:focus-visible, .nav__cta:focus-visible { outline-offset: 4px; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 940px) {
  .geschichte__grid { grid-template-columns: 1fr; }
  .geschichte__copy { padding-top: 0; }
  .geschichte__figure { max-width: 470px; margin-top: 0; }
  .frauenbereich__grid { grid-template-columns: 1fr; }
  .anfahrt__grid { grid-template-columns: 1fr; }
  .trust__grid { grid-template-columns: repeat(2, 1fr); gap: 1.6rem 0; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

/* Breiter als die alte Schwelle (880px): seit Logo und Kontaktieren-Button
   als eigene Grid-Spalten die mittlere Nav-Spalte einengen, brechen die
   Linklabels schon deutlich früher um. Der Hamburger übernimmt jetzt
   entsprechend früher. */
@media (max-width: 1160px) {
  .nav__toggle { display: inline-flex; }
  .nav__menu {
    position: absolute; top: 100%; right: var(--gutter); left: var(--gutter);
    flex-direction: column; align-items: stretch; gap: 0.2rem;
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 0.7rem; margin-top: 0.6rem; box-shadow: var(--shadow); display: none;
  }
  .nav__menu.is-open { display: flex; }
  .nav__menu li { width: 100%; }
  /* Das aufgeklappte Menü liegt immer auf festem Papier-Grund (siehe oben),
     unabhängig vom Scroll-Status des Headers dahinter – die Schrift bleibt
     deshalb hier immer dunkel, auch direkt am Seitenanfang. */
  .nav__menu a { display: block; padding: 0.8rem 0.7rem; color: var(--body); }
  .nav__menu a:hover { color: var(--ink); }
  .nav__menu a::after { display: none; }
  /* Der Kontaktieren-Button steht jetzt außerhalb von .nav__menu und würde
     hier mit dem Hamburger um den Platz konkurrieren – die feste
     Mobilebar unten übernimmt den Anruf-Zugang auf schmalen Screens. */
  .nav__cta { display: none; }
}

@media (max-width: 760px) {
  .price-cols { columns: 1; }
}

@media (max-width: 640px) {
  .geschichte__einblick { grid-template-columns: 1fr; }
  .frauenbereich__figures { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .gallery { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .mobilebar { display: grid; }
  .site-footer { padding-bottom: 6.5rem; }
  .about__signature { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .trust__grid { grid-template-columns: 1fr 1fr; }
  /* Die Plakette bleibt eine bewusst begrenzte Fläche statt eines
     Volltonbalkens – nur die Sperrung weicht etwas, damit "Anrufen" bei
     schmaler Spalte nicht zu breit ausläuft. */
  .hero__cta { padding-inline: 2.4rem; }
  .hero__cta-label { letter-spacing: 0.22em; }
  .brand__mono { height: 42px; }
  .brand__wordmark { height: 27px; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .site-footer__base { justify-content: flex-start; }
}

@media (max-width: 380px) { .brand__wordmark { display: none; } }