/*
 * Nice Style – Layout und Komponenten.
 * Alle Werte stammen aus assets/css/tokens.css. Hier stehen nur var(--…), 0,
 * 1px-Haarlinien und Media-Query-Grenzen.
 *
 * 1 Grundlagen · 2 Typografie · 3 Hilfsklassen · 4 Schaltflächen · 5 Kopf
 * 6 Menü · 7 Seiten · 8 Sektionen · 9 Hero · 10 Laufband · 11 Reveals
 * 12 Fuß · 13 Abstufungen · 14 Bewegung
 */

/* ----------------------------------------------------- 1 Grundlagen -- */

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

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  scroll-behavior: smooth;
  /*
   * Der Kopf steht fest ueber der Seite. Ohne diesen Abstand scrollt der Browser ein per Tabulator
   * erreichtes Element genau an den oberen Rand - also unter den Kopf, wo niemand es sieht.
   * Betrifft nur das Nachscrollen des Browsers; In-Seiten-Anker rechnen die Kopfhoehe selbst.
   */
  scroll-padding-top: calc(var(--header-h) + var(--s-4));
}

/* Sobald das Skript läuft, übernimmt Lenis das sanfte Scrollen. */
html.js {
  scroll-behavior: auto;
}

body {
  margin: 0;
  overflow-x: clip;
  background-color: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

a {
  color: var(--c-gold-light);
}

:focus-visible {
  outline: var(--focus-w) solid var(--c-gold-light);
  outline-offset: var(--focus-offset);
  border-radius: var(--r-sm);
}

::selection {
  background-color: var(--c-gold);
  color: var(--c-bg);
}

/* ---------------------------------------------------- 2 Typografie -- */

h1,
h2,
h3,
h4 {
  margin: 0 0 var(--s-4);
  font-family: var(--f-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: 0;
}

p {
  margin: 0 0 var(--s-4);
}

.kicker {
  margin: 0 0 var(--s-4);
  color: var(--c-gold);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.punkt-gold {
  color: var(--c-gold);
}

/* --------------------------------------------------- 3 Hilfsklassen -- */

.behaelter {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.behaelter-schmal {
  max-width: var(--container-narrow);
}

.nur-fuer-screenreader {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.sprunglink {
  position: absolute;
  top: 0;
  left: var(--gutter);
  z-index: var(--z-modal);
  transform: translateY(-120%);
  padding: var(--s-3) var(--s-5);
  border-radius: 0 0 var(--r-md) var(--r-md);
  background-color: var(--c-gold);
  color: var(--c-bg);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  transition: transform var(--t-base) var(--ease);
}

.sprunglink:focus-visible {
  transform: translateY(0);
}

.ns-icon {
  width: var(--icon-md);
  height: var(--icon-md);
  flex: none;
}

/*
 * „öffnet in einem neuen Tab" ist ein Hinweis für Hilfsmittel, nicht für das Auge. Vorher
 * galt die Ausblendung nur innerhalb von `.knopf` und `.fuss-instagram` – der Maps-Link im Fuß
 * ist keins von beidem, und der Satz stand dort sichtbar unter dem Link.
 */
.hinweis-extern {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.marke {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  /* Der Logo-Link war nur 19 px hoch und damit das kleinste Tippziel der Seite. */
  min-height: var(--tap-min);
  gap: var(--s-1);
  color: var(--c-text);
  line-height: var(--lh-tight);
  text-decoration: none;
}

/* Schriftzug-Zeilen bleiben untereinander, auch wenn das Emblem links daneben steht. */
.marke-text {
  display: inline-flex;
  flex-direction: column;
  gap: var(--s-1);
}

.marke-mit-logo {
  flex-direction: row;
  align-items: center;
  gap: var(--s-3);
}

/* Rundes Emblem in Tippziel-Höhe; das Logo ist selbst quadratisch mit schwarzem Grund. */
.marke-logo {
  flex: none;
  width: var(--tap-min);
  height: var(--tap-min);
  border: 1px solid var(--c-gold-deep);
  border-radius: var(--r-pill);
  object-fit: cover;
}

.marke-name {
  font-family: var(--f-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: .05em;
  text-transform: uppercase;
}

.marke-gold {
  color: var(--c-gold);
  font-style: italic;
}

.marke-zusatz {
  color: var(--c-text-muted);
  white-space: nowrap;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.bild-platzhalter {
  --hex-deckkraft: .22;
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background-color: var(--c-surface-2);
  color: var(--c-text-muted);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.bild-platzhalter > span {
  position: relative;
}

/* Das Hexagon-Raster bleibt überall ein zurückhaltender Untergrund. */
.bild-platzhalter::before,
.seiten-kopf::before,
.menue::before,
.sektion-salon::before,
.fuss::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--hex-pattern);
  background-size: var(--hex-size) auto;
  opacity: var(--hex-deckkraft);
  pointer-events: none;
}

/* ------------------------------------------------- 4 Schaltflächen -- */

.knopf {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--tap-min);
  padding-inline: var(--s-6);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform var(--t-base) var(--ease),
    translate var(--t-fast) var(--ease),
    background-color var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease),
    color var(--t-base) var(--ease);
}

.knopf .ns-icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

/* Primäre Handlungsaufforderung: `translate` gehört dem Magnet-Modul, `transform` der Hebung. */
.knopf-gold {
  translate: var(--magnet-x, 0) var(--magnet-y, 0);
  background-color: var(--c-gold);
  color: var(--c-bg);
}

.knopf-gold:hover {
  transform: translateY(calc(var(--lift) * -1));
  background-color: var(--c-gold-light);
  box-shadow: var(--glow-gold);
}

.knopf-geist {
  border-color: var(--c-line-strong);
  background-color: transparent;
  color: var(--c-text);
}

.knopf-geist:hover {
  transform: translateY(calc(var(--lift) * -1));
  border-color: var(--c-gold);
  color: var(--c-gold-light);
}

.knopf-whatsapp {
  background-color: var(--c-wa);
  color: var(--c-bg);
}

.knopf-whatsapp:hover {
  transform: translateY(calc(var(--lift) * -1));
  background-color: var(--c-wa-hell);
}

/* Beim Drücken setzt sich der Knopf wieder ab – sichtbare Rückmeldung ohne Wackeln. */
.knopf-gold:active,
.knopf-geist:active,
.knopf-whatsapp:active {
  transform: translateY(0);
}

.knopf-breit {
  width: 100%;
}

.knopf-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

/* --------------------------------------------------------- 5 Kopf -- */

.kopf {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  transition: transform var(--t-slow) var(--ease);
}

.kopf.ist-versteckt {
  transform: translateY(-140%);
}

.kopf-huelle {
  position: relative;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  border: 1px solid transparent;
  transition:
    background-color var(--t-slow) var(--ease),
    border-color var(--t-slow) var(--ease),
    margin var(--t-slow) var(--ease),
    max-width var(--t-slow) var(--ease);
}

.kopf.ist-fest .kopf-huelle {
  max-width: calc(var(--container) - var(--s-12));
  margin-top: var(--s-3);
  border-color: var(--c-line);
  border-radius: var(--r-pill);
  overflow: hidden;
  background-color: var(--c-glass);
  box-shadow: var(--shadow-float);
  backdrop-filter: blur(var(--blur-glass));
  -webkit-backdrop-filter: blur(var(--blur-glass));
}

.kopf-innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  height: var(--header-h);
}

.kopf-nav {
  display: flex;
  gap: var(--s-6);
  margin-inline: auto;
}

.kopf-nav a {
  position: relative;
  padding-block: var(--s-3);
  /* Ohne das bricht „Über uns" in der geschrumpften Pille um, und „uns" hängt unter dem Rand. */
  white-space: nowrap;
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: color var(--t-base) var(--ease);
}

.kopf-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  transform: scaleX(0);
  transform-origin: right;
  background-color: var(--c-gold);
  transition: transform var(--t-base) var(--ease);
}

.kopf-nav a:hover {
  color: var(--c-text);
}

.kopf-nav a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.kopf-aktionen {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.kopf-telefon .ns-icon {
  color: var(--c-gold);
}

.kopf-fortschritt {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 0;
  height: var(--bar-h);
  transform: scaleX(0);
  transform-origin: left;
  border-radius: var(--r-pill);
  background-image: linear-gradient(90deg, var(--c-gold-deep), var(--c-gold-light));
  opacity: 0;
  transition: opacity var(--t-base) var(--ease);
}

/*
 * In der Pille ist es rund 50 px enger. Der Zusatz „Barbershop Eppingen" passt dort nicht mehr
 * neben die Navigation: er brach auf zwei Zeilen um, lief unten aus der Pille heraus, und der
 * Lesebalken schnitt quer durch das Wort. Die Wortmarke allein trägt den gescrollten Zustand.
 */
.kopf.ist-fest .marke-zusatz {
  display: none;
}

/* In der Pille läuft der Lesebalken über die volle Breite und wird mitgerundet. */
.kopf.ist-fest .kopf-fortschritt {
  left: 0;
  right: 0;
  border-radius: 0;
  opacity: 1;
}

.menue-schalter {
  display: none;
  place-items: center;
  width: var(--tap-min);
  height: var(--tap-min);
  padding: 0;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-pill);
  background-color: transparent;
  color: var(--c-text);
  cursor: pointer;
  transition: border-color var(--t-base) var(--ease), color var(--t-base) var(--ease);
}

.menue-schalter:hover {
  border-color: var(--c-gold);
  color: var(--c-gold-light);
}

.menue-schalter-auf,
.menue-schalter-zu {
  display: grid;
  place-items: center;
}

.menue-schalter-zu,
.menue-schalter[aria-expanded="true"] .menue-schalter-auf {
  display: none;
}

.menue-schalter[aria-expanded="true"] .menue-schalter-zu {
  display: grid;
}

/* --------------------------------------------------------- 6 Menü -- */

.menue {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  visibility: hidden;
  overflow-y: auto;
  background-color: var(--c-glass-deep);
  backdrop-filter: blur(var(--blur-menu));
  -webkit-backdrop-filter: blur(var(--blur-menu));
  opacity: 0;
  transition: opacity var(--t-slow) var(--ease), visibility var(--t-slow) var(--ease);
}

.menue.ist-offen {
  visibility: visible;
  opacity: 1;
}

/* Bei offenem Menü bleibt der Kopf mit dem Schließen-Schalter bedienbar. */
body.menue-offen {
  overflow: hidden;
}

body.menue-offen .kopf {
  z-index: var(--z-modal);
  transform: none;
}

body.menue-offen .kopf-huelle {
  border-color: transparent;
  background-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.menue-offen .kopf-fortschritt {
  opacity: 0;
}

.menue-innen {
  position: relative;
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding: calc(var(--header-h) + var(--s-10)) var(--gutter) var(--s-16);
}

.menue-nav {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--s-12);
  border-top: 1px solid var(--c-line);
}

.menue-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: var(--tap-min);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--c-line);
  color: var(--c-text);
  font-family: var(--f-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  text-decoration: none;
  transition: color var(--t-base) var(--ease), padding-left var(--t-base) var(--ease);
}

.menue-nav a .ns-icon {
  color: var(--c-gold);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease);
}

.menue-nav a:hover {
  padding-left: var(--s-3);
  color: var(--c-gold-light);
}

.menue-nav a:hover .ns-icon {
  opacity: 1;
}

.menue-kontakt {
  display: grid;
  gap: var(--s-3);
}

.menue-zeiten {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: var(--s-4) 0 0;
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}

.menue-zeiten .ns-icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
  color: var(--c-gold);
}

/* -------------------------------------------------------- 7 Seiten -- */

.seiten-kopf {
  position: relative;
  padding-top: calc(var(--header-h) + var(--s-16));
  padding-bottom: var(--s-12);
  border-bottom: 1px solid var(--c-line);
  background-image: radial-gradient(120% 150% at 50% 0%, var(--c-gold-bg), transparent 62%);
  overflow: hidden;
}

/* Kopf und Inhalt einer Seite stehen auf derselben linken Kante. */
.seiten-kopf > .behaelter {
  position: relative;
  max-width: var(--container-narrow);
}

.seiten-titel {
  max-width: 18ch;
  margin-bottom: var(--s-5);
  font-size: var(--fs-3xl);
}

.seiten-vorspann {
  max-width: 54ch;
  margin: 0;
  color: var(--c-text-muted);
  font-size: var(--fs-lg);
}

.seiten-inhalt {
  padding-top: var(--s-16);
  padding-bottom: var(--section);
}

.seiten-inhalt > * + * {
  margin-top: var(--s-10);
}

.inhaltstext {
  color: var(--c-text-muted);
}

.inhaltstext h2 {
  margin-top: var(--s-12);
  color: var(--c-text);
  font-size: var(--fs-2xl);
}

.inhaltstext h3 {
  margin-top: var(--s-10);
  color: var(--c-text);
  font-size: var(--fs-xl);
}

.inhaltstext > :first-child {
  margin-top: 0;
}

.inhaltstext a {
  color: var(--c-gold-light);
  text-underline-offset: var(--s-1);
}

.inhaltstext ul,
.inhaltstext ol {
  margin: 0 0 var(--s-4);
  padding-left: var(--s-6);
}

.inhaltstext li {
  margin-bottom: var(--s-2);
}

.inhaltstext strong {
  color: var(--c-text);
  font-weight: var(--fw-semibold);
}

.inhaltstext mark.platzhalter {
  padding: 0 .3em;
  border-radius: var(--r-sm);
  background-color: var(--c-warning-bg);
  color: var(--c-warning);
  font-weight: var(--fw-semibold);
}

/* Rechtsseiten (Impressum, Datenschutz): etwas schmaler als der übliche Inhalt, reine Lesebreite. */
.seite-recht .inhaltstext {
  max-width: 68ch;
}

/* Terminseiten (Plugin-Wrapper): der schmale Rahmen kommt aus `.behaelter-schmal`; hier nur die
   Kennzeichnung für E2E-Tests und künftiges Styling der Plugin-Komponenten (`booking.css`). */
.seite-termin {
  min-height: 60vh;
}

.kontaktkarte {
  position: relative;
  padding: var(--s-10);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background-color: var(--c-surface-2);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.kontaktkarte::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-image: linear-gradient(90deg, transparent, var(--c-gold), transparent);
}

.kontaktkarte-text {
  margin: 0 0 var(--s-7);
  color: var(--c-text);
  font-family: var(--f-display);
  font-size: var(--fs-xl);
  line-height: var(--lh-heading);
}

.kontaktkarte-zeiten {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: var(--s-8) 0 0;
  padding-top: var(--s-6);
  border-top: 1px solid var(--c-line);
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}

.kontaktkarte-zeiten .ns-icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
  color: var(--c-gold);
}

.beitragsliste {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--c-line);
}

.beitragsliste li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: var(--tap-min);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--c-line);
}

.beitragsliste a {
  color: var(--c-text);
  font-family: var(--f-display);
  font-size: var(--fs-xl);
  text-decoration: none;
}

.beitragsliste a:hover {
  color: var(--c-gold-light);
}

.beitragsliste-datum {
  color: var(--c-text-muted);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------- 8 Sektionen -- */

.sektion {
  position: relative;
  padding-block: var(--section);
}

.sektion-kopf {
  margin-bottom: var(--s-10);
}

.sektion-titel {
  max-width: 20ch;
  margin: 0;
  font-size: var(--fs-3xl);
}

.sektion-vorspann {
  max-width: var(--vorspann-max);
  margin: var(--s-4) 0 0;
  color: var(--c-text-muted);
  font-size: var(--fs-lg);
}

/* ---------------------------------------------------- 8a Leistungen -- */

.sektion-leistungen {
  border-top: 1px solid var(--c-line);
}

.leistungs-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--karte-min), 1fr));
  gap: var(--s-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * Die Neigung kommt aus zwei Custom Properties, die das Skript setzt (−1 … 1). So bleibt
 * `transform` allein Sache des Stylesheets und der Hover-Zustand unten wird nicht überschrieben.
 */
.leistung-karte {
  --neige-x: 0;
  --neige-y: 0;
  --licht-x: 50%;
  --licht-y: 50%;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background-color: var(--c-surface);
  transform:
    perspective(var(--tilt-tiefe))
    rotateX(calc(var(--neige-x) * var(--tilt-max)))
    rotateY(calc(var(--neige-y) * var(--tilt-max)));
  transition:
    transform var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease),
    background-color var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease);
}

.leistung-karte:hover,
.leistung-karte:focus-within {
  border-color: var(--c-gold);
  background-color: var(--c-surface-2);
  box-shadow: var(--glow-gold);
}

.leistung-karte:active {
  background-color: var(--c-surface);
}

.leistung-licht {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle var(--licht-radius) at var(--licht-x) var(--licht-y), var(--c-gold-bg), transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base) var(--ease);
}

.leistung-karte.ist-geneigt .leistung-licht {
  opacity: 1;
}

.leistung-innen {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  height: 100%;
  padding: var(--s-7);
}

.leistung-name {
  margin: 0;
  font-size: var(--fs-xl);
}

.leistung-text {
  margin: 0;
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}

/* `margin-top: auto` schiebt Daten und Knopf nach unten – alle Karten enden auf einer Linie. */
.leistung-daten {
  display: grid;
  gap: var(--s-2);
  margin: auto 0 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-line);
}

.leistung-datenzeile {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
}

.leistung-daten dt {
  color: var(--c-text-muted);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.leistung-daten dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-semibold);
}

.leistung-preis {
  color: var(--c-gold-light);
}

.leistung-cta {
  width: 100%;
}

.leistung-cta .ns-icon {
  transition: transform var(--t-base) var(--ease);
}

.leistung-karte:hover .leistung-cta .ns-icon {
  transform: translateX(var(--s-1));
}

.leistung-hinweis {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  max-width: var(--vorspann-max);
  margin: var(--s-8) 0 0;
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--c-line);
  border-inline-start: var(--rule-w) solid var(--c-gold);
  border-radius: var(--r-md);
  background-color: var(--c-gold-bg);
  font-size: var(--fs-sm);
}

.leistung-hinweis .ns-icon {
  color: var(--c-gold);
}

/* ------------------------------------------------------- 8b Galerie -- */

.sektion-galerie {
  border-top: 1px solid var(--c-line);
}

/* Raster als Rückfall, Masonry über Spalten – so bleibt die Galerie überall lückenlos. */
.galerie-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--karte-min), 1fr));
  gap: var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

@supports (column-count: 3) {
  .galerie-raster {
    display: block;
    column-count: var(--galerie-spalten);
    column-gap: var(--s-4);
  }

  .galerie-stueck {
    break-inside: avoid;
    margin-bottom: var(--s-4);
  }
}

.galerie-knopf {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background-color: var(--c-surface);
  cursor: pointer;
  transition:
    border-color var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease);
}

.galerie-bild {
  width: 100%;
  height: auto;
  transition: transform var(--t-slow) var(--ease);
}

.galerie-knopf:hover,
.galerie-knopf:focus-visible {
  border-color: var(--c-gold);
  box-shadow: var(--glow-gold);
}

.galerie-knopf:hover .galerie-bild {
  transform: scale(var(--hero-zoom));
}

.galerie-knopf:active .galerie-bild {
  transform: scale(1);
}

.galerie-lupe {
  position: absolute;
  right: var(--s-3);
  bottom: var(--s-3);
  display: grid;
  place-items: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border-radius: var(--r-pill);
  background-color: var(--c-glass);
  color: var(--c-gold-light);
  opacity: 0;
  transform: translateY(var(--s-2));
  transition:
    opacity var(--t-base) var(--ease),
    transform var(--t-base) var(--ease);
}

.galerie-knopf:hover .galerie-lupe,
.galerie-knopf:focus-visible .galerie-lupe {
  opacity: 1;
  transform: translateY(0);
}

/* Ohne Zeiger gibt es kein Überfahren: dort steht das Zeichen dauerhaft. */
@media (hover: none) {
  .galerie-lupe {
    opacity: 1;
    transform: translateY(0);
  }
}

.galerie-hinweis {
  margin: var(--s-6) 0 0;
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}

/* ------------------------------------------------------ 8c Lichtbox -- */

.lichtbox {
  width: min(var(--lichtbox-breite), 100%);
  max-width: min(var(--lichtbox-breite), 100%);
  max-height: 100%;
  margin: auto;
  padding: var(--gutter);
  border: 0;
  background-color: transparent;
  color: var(--c-text);
}

.lichtbox::backdrop {
  background-color: var(--c-lichtbox-grund);
  backdrop-filter: blur(var(--blur-glass));
}

body.lichtbox-offen {
  overflow: hidden;
}

.lichtbox-rahmen {
  display: grid;
  gap: var(--s-4);
}

.lichtbox-buehne {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3);
}

.lichtbox-bild {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: var(--lichtbox-hoehe);
  margin-inline: auto;
  border-radius: var(--r-md);
  background-color: var(--c-surface);
}

.lichtbox-zu,
.lichtbox-pfeil {
  display: grid;
  place-items: center;
  width: var(--tap-min);
  height: var(--tap-min);
  padding: 0;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-pill);
  background-color: var(--c-glass);
  color: var(--c-text);
  cursor: pointer;
  transition:
    border-color var(--t-base) var(--ease),
    color var(--t-base) var(--ease),
    scale var(--t-fast) var(--ease);
}

.lichtbox-zu {
  justify-self: end;
}

.lichtbox-zu:hover,
.lichtbox-pfeil:hover,
.lichtbox-zu:focus-visible,
.lichtbox-pfeil:focus-visible {
  border-color: var(--c-gold);
  color: var(--c-gold-light);
}

.lichtbox-zu:active,
.lichtbox-pfeil:active {
  scale: .94;
}

/* Der Winkel zeigt nach unten – gedreht wird daraus „zurück" und „weiter". */
.lichtbox-zurueck .ns-icon {
  transform: rotate(90deg);
}

.lichtbox-weiter .ns-icon {
  transform: rotate(-90deg);
}

.lichtbox-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
}

.lichtbox-text {
  max-width: var(--vorspann-max);
  margin: 0;
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}

.lichtbox-zaehler {
  margin: 0;
  color: var(--c-gold);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-label);
  white-space: nowrap;
}

/* --------------------------------------------------------- 8d Salon -- */

/*
 * `overflow: clip` statt `hidden`: die Parallaxe bleibt in der Sektion, ohne dass ein
 * Scroll-Container entsteht – sonst würde `position: sticky` im Textteil nicht mehr greifen.
 */
.sektion-salon {
  --hex-deckkraft: .06;
  position: relative;
  overflow: clip;
  border-top: 1px solid var(--c-line);
}

/*
 * Kein `align-items: start`: die Textspalte muss sich über die volle Zeilenhöhe strecken,
 * sonst ist sie genauso hoch wie ihr Inhalt und `position: sticky` im Inneren hat keinen Weg,
 * den es zurücklegen könnte – das Haften wäre wirkungslos.
 */
.salon-raster {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-12);
}

.salon-haftet {
  position: sticky;
  top: var(--salon-oben);
}

.salon-text {
  max-width: var(--vorspann-max);
  margin: 0;
  color: var(--c-text-muted);
  font-size: var(--fs-lg);
}

.salon-stapel {
  display: grid;
  gap: var(--s-10);
}

.salon-bild {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background-color: var(--c-surface);
}

/* Versetzte Kanten machen aus dem Stapel eine Collage statt einer Spalte. */
.salon-bild:nth-child(2) {
  margin-inline-end: var(--salon-versatz);
}

.salon-bild:nth-child(3) {
  margin-inline-start: var(--salon-versatz);
}

.salon-foto {
  width: 100%;
  height: auto;
}

.zaehler-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-8);
  margin: var(--s-10) 0 0;
  padding: 0;
  list-style: none;
}

.zaehler {
  display: grid;
  gap: var(--s-1);
}

.zaehler-wert {
  color: var(--c-gold);
  font-family: var(--f-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  line-height: var(--lh-tight);
}

.zaehler-text {
  color: var(--c-text-muted);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* ---------------------------------------------------- 8d2 Geschichte -- */

.sektion-geschichte {
  border-top: 1px solid var(--c-line);
}

.geschichte-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--s-12);
}

.geschichte-spalte {
  display: grid;
  gap: var(--s-4);
}

.geschichte-text {
  max-width: var(--vorspann-max);
  margin: 0;
  color: var(--c-text-muted);
  font-size: var(--fs-lg);
}

.geschichte-zitat {
  margin: var(--s-2) 0 0;
  padding-top: var(--s-6);
  border-top: 1px solid var(--c-line);
  color: var(--c-gold);
  font-family: var(--f-display);
  font-size: var(--fs-xl);
  font-style: italic;
  line-height: var(--lh-heading);
}

.geschichte-bild-huelle {
  position: relative;
}

/* Die goldene Haarlinie rahmt das Foto, statt es nur zu beschneiden. */
.geschichte-rahmen {
  margin: 0;
  padding: var(--s-2);
  border: 1px solid var(--c-gold);
  border-radius: var(--r-lg);
}

.geschichte-foto {
  width: 100%;
  height: auto;
  border-radius: calc(var(--r-lg) - var(--s-2));
}

.geschichte-abzeichen {
  position: absolute;
  right: var(--s-6);
  bottom: calc(-1 * var(--s-5));
  padding: var(--s-2) var(--s-5);
  border: 1px solid var(--c-gold);
  border-radius: var(--r-pill);
  background-color: var(--c-glass-deep);
  backdrop-filter: blur(var(--blur-glass));
  color: var(--c-gold);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  box-shadow: var(--shadow-card);
}

/* ---------------------------------------------------------- 8e Team -- */

.sektion-team {
  border-top: 1px solid var(--c-line);
}

.team-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--team-min), 1fr));
  gap: var(--s-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Neigung und Lichtkegel wie bei den Leistungskarten – dieselben zwei Custom Properties. */
.team-karte {
  --neige-x: 0;
  --neige-y: 0;
  --licht-x: 50%;
  --licht-y: 50%;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background-color: var(--c-surface);
  transform:
    perspective(var(--tilt-tiefe))
    rotateX(calc(var(--neige-x) * var(--tilt-max)))
    rotateY(calc(var(--neige-y) * var(--tilt-max)));
  transition:
    transform var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease),
    background-color var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease);
}

.team-karte:hover,
.team-karte:focus-within {
  border-color: var(--c-gold);
  background-color: var(--c-surface-2);
  box-shadow: var(--glow-gold);
}

.team-karte:active {
  background-color: var(--c-surface);
}

.team-licht {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle var(--licht-radius) at var(--licht-x) var(--licht-y), var(--c-gold-bg), transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base) var(--ease);
}

.team-karte.ist-geneigt .team-licht {
  opacity: 1;
}

.team-innen {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-4);
  height: 100%;
  padding: var(--s-7);
}

.team-avatar {
  display: grid;
  place-items: center;
  width: var(--avatar-groesse);
  height: var(--avatar-groesse);
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  background-color: var(--c-surface-2);
}

/* Mit Foto: Goldring statt Hairline, damit das helle Studio-Porträt auf der dunklen Karte gefasst ist. */
.team-avatar-foto {
  border-color: var(--c-gold-deep);
}

/* Platzhalter, bis ein Foto im Backend hängt: goldene Initiale auf dunklem Grund. */
.team-avatar-platzhalter {
  border-color: var(--c-gold-deep);
  background-image: radial-gradient(circle at 50% 30%, var(--c-gold-bg), transparent 70%);
}

.team-initial {
  color: var(--c-gold);
  font-family: var(--f-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

.team-foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-name {
  margin: 0;
  font-size: var(--fs-xl);
}

.team-text {
  margin: 0;
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}

/* `margin-top: auto` hält die Knöpfe aller Karten auf einer Linie. */
.team-cta {
  margin-top: auto;
}

.team-cta .ns-icon {
  transition: transform var(--t-base) var(--ease);
}

.team-karte:hover .team-cta .ns-icon {
  transform: translateX(var(--s-1));
}

/* --------------------------------------------------- 8f Bewertungen -- */

.sektion-bewertungen {
  border-top: 1px solid var(--c-line);
}

/* Volle Behälterbreite: die Kanten liegen auf denen der Karten darüber und darunter. */
.bewertungen-leer {
  display: grid;
  justify-items: center;
  gap: var(--s-4);
  padding: var(--s-12) var(--s-6);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background-color: var(--c-surface);
  background-image: radial-gradient(80% 120% at 50% 0%, var(--c-gold-bg), transparent 65%);
  text-align: center;
}

.bewertungen-leer-zeichen {
  display: grid;
  place-items: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border-radius: var(--r-pill);
  background-color: var(--c-gold-bg);
  color: var(--c-gold);
}

.bewertungen-leer-zeichen .ns-icon {
  width: var(--icon-lg);
  height: var(--icon-lg);
}

.bewertungen-leer-text {
  max-width: var(--leer-max);
  margin: 0;
  color: var(--c-text-muted);
  font-size: var(--fs-lg);
}

/*
 * Slider: waagerechtes Scrollen mit Einrastpunkten. Er funktioniert ohne Skript (wischen,
 * Tastatur im scrollbaren Bereich); Pfeile, Punkte und der Stand kommen vom Skript dazu.
 */
.bewertungen-slider {
  display: grid;
  gap: var(--s-6);
}

.slider-spur {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(var(--folien-breite), 1fr);
  gap: var(--s-5);
  margin: 0;
  padding: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  list-style: none;
}

.slider-spur::-webkit-scrollbar {
  display: none;
}

.slider-folie {
  display: flex;
  scroll-snap-align: start;
}

.bewertung {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  width: 100%;
  margin: 0;
  padding: var(--s-7);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background-color: var(--c-surface);
}

.sterne {
  display: flex;
  gap: var(--s-1);
  margin: 0;
}

.stern {
  display: inline-flex;
  color: var(--c-line-strong);
}

.stern.ist-voll {
  color: var(--c-gold);
}

.stern .ns-icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.bewertung-text {
  margin: 0;
  font-size: var(--fs-lg);
}

.bewertung-fuss {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-line);
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}

.bewertung-name {
  color: var(--c-text);
  font-style: normal;
  font-weight: var(--fw-semibold);
}

.slider-steuerung {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
}

/* Stehen alle Folien nebeneinander, wäre die Steuerung ohne Wirkung – dann bleibt sie weg. */
.bewertungen-slider.ist-vollstaendig .slider-steuerung {
  display: none;
}

.slider-pfeil {
  display: grid;
  place-items: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-pill);
  background-color: transparent;
  color: var(--c-text);
  cursor: pointer;
  transition:
    transform var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease),
    color var(--t-base) var(--ease),
    opacity var(--t-base) var(--ease);
}

.slider-pfeil:hover {
  border-color: var(--c-gold);
  color: var(--c-gold-light);
}

.slider-pfeil:active {
  transform: translateY(var(--lift));
}

.slider-pfeil[disabled] {
  opacity: var(--deckkraft-aus);
  cursor: default;
}

.slider-pfeil[disabled]:hover {
  border-color: var(--c-line-strong);
  color: var(--c-text);
}

/* Der Winkel zeigt nach unten – gedreht wird daraus „zurück" und „weiter". */
.slider-zurueck .ns-icon {
  transform: rotate(90deg);
}

.slider-weiter .ns-icon {
  transform: rotate(-90deg);
}

.slider-punkte {
  display: flex;
  align-items: center;
}

.slider-punkt {
  display: grid;
  place-items: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border: 0;
  background-color: transparent;
  cursor: pointer;
}

.slider-punkt-kern {
  width: var(--punkt);
  height: var(--punkt);
  border-radius: var(--r-pill);
  background-color: var(--c-line-strong);
  transition:
    width var(--t-base) var(--ease),
    background-color var(--t-base) var(--ease);
}

.slider-punkt:hover .slider-punkt-kern,
.slider-punkt:active .slider-punkt-kern {
  background-color: var(--c-gold-light);
}

.slider-punkt[aria-current="true"] .slider-punkt-kern {
  width: var(--punkt-aktiv);
  background-color: var(--c-gold);
}

/* ------------------------------------------------- 8g Öffnungszeiten -- */

.sektion-zeiten {
  border-top: 1px solid var(--c-line);
}

.zeiten-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--zeiten-min), 1fr));
  gap: var(--s-5);
  align-items: start;
}

.zeiten-karte,
.anfahrt-karte {
  padding: var(--s-7);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background-color: var(--c-surface);
}

.status-pille {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0 0 var(--s-6);
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.status-pille.ist-offen {
  border-color: var(--c-success);
  background-color: var(--c-success-bg);
  color: var(--c-success);
}

.status-pille.ist-zu {
  background-color: var(--c-surface-2);
  color: var(--c-text-muted);
}

.status-punkt {
  width: var(--punkt);
  height: var(--punkt);
  flex: none;
  border-radius: var(--r-pill);
  background-color: currentColor;
}

.zeiten-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

/*
 * Die Spaltenüberschriften stehen nur für Hilfsmittel im Markup und sind ausgeblendet. Der
 * Browser gibt `th` aber von sich aus `font-weight: bold` – und das war auf der ganzen
 * Startseite die einzige Stelle mit Manrope 700. Für zwei unsichtbare Wörter lädt der Browser
 * sonst eine 25 KB große Schriftdatei, die niemand zu sehen bekommt.
 */
.zeiten-tabelle thead th {
  font-weight: var(--fw-semibold);
}

/*
 * `vertical-align: baseline`: Auf schmalen Geräten rutscht die Marke „heute" unter den
 * Wochentag. Die Zeitangabe steht dann auf derselben Linie wie der Tag statt in der Mitte
 * der gewachsenen Zeile.
 */
.zeiten-zeile > * {
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--c-line);
  font-weight: var(--fw-regular);
  text-align: start;
  vertical-align: baseline;
}

.zeiten-zeile:last-child > * {
  border-bottom: 0;
}

.zeiten-tag {
  color: var(--c-text-muted);
}

.zeiten-zeit {
  text-align: end;
  white-space: nowrap;
}

.zeiten-zeit.ist-geschlossen {
  color: var(--c-text-muted);
}

/* Der heutige Tag trägt die goldene Linie und den hellen Text. */
.zeiten-zeile.ist-heute > * {
  border-bottom-color: var(--c-gold-deep);
}

.zeiten-zeile.ist-heute .zeiten-tag,
.zeiten-zeile.ist-heute .zeiten-zeit {
  color: var(--c-gold-light);
  font-weight: var(--fw-semibold);
}

.zeiten-marke {
  display: inline-block;
  margin-inline-start: var(--s-2);
  padding-inline: var(--s-2);
  border-radius: var(--r-pill);
  background-color: var(--c-gold-bg);
  color: var(--c-gold);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.anfahrt-titel {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0 0 var(--s-4);
  font-size: var(--fs-xl);
}

.anfahrt-titel .ns-icon {
  color: var(--c-gold);
}

.anfahrt-adresse {
  display: grid;
  gap: var(--s-1);
  margin: 0 0 var(--s-4);
  color: var(--c-text-muted);
  font-style: normal;
}

.anfahrt-name {
  color: var(--c-text);
  font-weight: var(--fw-semibold);
}

.anfahrt-text {
  margin: 0 0 var(--s-6);
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}

/* ----------------------------------------------------------- 8h FAQ -- */

.sektion-faq {
  border-top: 1px solid var(--c-line);
}

/*
 * Der Kopf steht auf derselben linken Kante wie alle anderen Sektionen; nur die Liste selbst
 * bleibt schmal, damit die Antworten in gut lesbaren Zeilen stehen.
 */
.faq-liste {
  display: grid;
  gap: var(--s-3);
  max-width: var(--container-narrow);
}

.faq-eintrag {
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background-color: var(--c-surface);
  transition:
    border-color var(--t-base) var(--ease),
    background-color var(--t-base) var(--ease);
}

.faq-eintrag:hover {
  border-color: var(--c-line-strong);
}

.faq-eintrag[open] {
  border-color: var(--c-gold-deep);
  background-color: var(--c-surface-2);
}

.faq-frage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: var(--tap-min);
  padding: var(--s-4) var(--s-5);
  font-family: var(--f-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  list-style: none;
  cursor: pointer;
  transition: color var(--t-base) var(--ease);
}

/* Das eigene Zeichen ersetzt das Dreieck des Browsers. */
.faq-frage::-webkit-details-marker {
  display: none;
}

.faq-frage:hover,
.faq-eintrag[open] > .faq-frage {
  color: var(--c-gold-light);
}

.faq-frage:active {
  color: var(--c-gold);
}

.faq-zeichen {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--icon-lg);
  height: var(--icon-lg);
  color: var(--c-gold);
  transition: transform var(--t-base) var(--ease);
}

.faq-eintrag[open] .faq-zeichen {
  transform: rotate(180deg);
}

/* Die Höhe fährt das Skript; `overflow: hidden` hält den Text währenddessen im Rahmen. */
.faq-flaeche {
  overflow: hidden;
}

.faq-antwort {
  margin: 0;
  padding: 0 var(--s-5) var(--s-5);
  color: var(--c-text-muted);
}

/* -------------------------------------------------- 8i Abschluss-CTA -- */

.sektion-cta {
  border-top: 1px solid var(--c-line);
}

.cta-flaeche {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--c-gold-deep);
  border-radius: var(--r-lg);
  background-color: var(--c-surface);
  box-shadow: var(--glow-gold);
}

.cta-glanz {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(70% 110% at 50% 0%, var(--c-gold-bg), transparent 62%);
  pointer-events: none;
}

.cta-innen {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--s-4);
  padding: var(--s-16) var(--gutter);
  text-align: center;
}

.cta-titel {
  max-width: var(--cta-titel-max);
  margin: 0;
  font-size: var(--fs-3xl);
}

.cta-text {
  max-width: var(--vorspann-max);
  margin: 0;
  color: var(--c-text-muted);
  font-size: var(--fs-lg);
}

.cta-knoepfe {
  justify-content: center;
  margin-top: var(--s-2);
}

.cta-zeiten {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: var(--s-2) 0 0;
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}

.cta-zeiten .ns-icon {
  color: var(--c-gold);
}

/* --------------------------------------------------------- 9 Hero -- */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(var(--hero-h-min), var(--hero-h), var(--hero-h-max));
  padding-top: calc(var(--header-h) + var(--s-12));
  padding-bottom: var(--s-14);
  overflow: hidden;
}

/* Medium, Schleier und Goldstaub liegen als eine Einheit hinter dem Text und zoomen gemeinsam. */
.hero-medium {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  will-change: transform;
}

.hero-bild,
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Das Video legt sich erst über das Poster, wenn es wirklich Bilder liefert. */
.hero-video {
  opacity: 0;
  transition: opacity var(--t-slow) var(--ease);
}

.hero-video.ist-bereit {
  opacity: 1;
}

.hero-schleier {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(
      180deg,
      var(--c-schleier-mittel) 0%,
      var(--c-schleier-weich) 22%,
      var(--c-schleier-mittel) 58%,
      var(--c-schleier-tief) 100%
    ),
    linear-gradient(90deg, var(--c-schleier-seite) 0%, var(--c-schleier-weich) 52%, transparent 74%);
}

.hero-partikel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero-innen {
  position: relative;
  width: 100%;
}

.hero-kicker {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}

.hero-kicker::before {
  content: "";
  width: var(--s-8);
  height: 1px;
  background-color: var(--c-gold);
}

.hero-titel {
  max-width: var(--hero-max-text);
  margin: 0 0 var(--s-6);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

/* Jede Zeile sitzt in einer eigenen Maske, damit sie beim Auftritt hinter der Kante hervorkommt. */
.hero-maske {
  display: block;
  padding-bottom: var(--maske-luft);
  overflow: hidden;
}

.hero-zeile {
  display: block;
  will-change: transform;
}

.hero-titel em {
  color: var(--c-gold);
  font-style: italic;
}

.hero-claim {
  max-width: 40ch;
  margin: 0 0 var(--s-3);
  color: var(--c-text);
  font-family: var(--f-display);
  font-size: var(--fs-xl);
  line-height: var(--lh-heading);
  text-wrap: balance;
}

.hero-sub {
  max-width: 52ch;
  margin: 0 0 var(--s-8);
  color: var(--c-text-muted);
  font-size: var(--fs-base);
}

.hero-knoepfe {
  margin-bottom: var(--s-7);
}

.hero-vertrauen {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}

.hero-vertrauen .ns-icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
  color: var(--c-gold);
}

.hero-scroll {
  position: absolute;
  right: var(--gutter);
  bottom: var(--s-10);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  color: var(--c-text-muted);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.hero-scroll-wort {
  writing-mode: vertical-rl;
}

.hero-scroll-linie {
  position: relative;
  width: 1px;
  height: var(--s-12);
  background-color: var(--c-line);
  overflow: hidden;
}

.hero-scroll-linie::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--c-gold);
  animation: hero-scroll-lauf var(--t-scroll) var(--ease) infinite;
}

@keyframes hero-scroll-lauf {
  0% {
    transform: scaleY(0);
    transform-origin: top;
  }

  45% {
    transform: scaleY(1);
    transform-origin: top;
  }

  55% {
    transform: scaleY(1);
    transform-origin: bottom;
  }

  100% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
}

/* ----------------------------------------------------- 10 Laufband -- */

/*
 * Das Band und sein Anhalte-Schalter. Der Schalter sitzt im weichen Auslauf am rechten Rand,
 * also dort, wo ohnehin keine Schrift steht.
 */
.marquee-bereich {
  position: relative;
}

.marquee-halt {
  position: absolute;
  right: var(--gutter);
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: var(--tap-min);
  height: var(--tap-min);
  transform: translateY(-50%);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-pill);
  background-color: var(--c-surface-2);
  color: var(--c-text-muted);
  cursor: pointer;
  transition:
    border-color var(--t-base) var(--ease),
    color var(--t-base) var(--ease);
}

.marquee-halt:hover {
  border-color: var(--c-gold);
  color: var(--c-gold-light);
}

/* `display: grid` oben schlüge sonst den Vorgabewert des Browsers für `[hidden]`. */
.marquee-halt[hidden] {
  display: none;
}

.marquee-halt .ns-icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

/* Immer nur eines der beiden Sinnbilder – welches, sagt `aria-pressed`. */
.marquee-halt-weiter,
.marquee-halt[aria-pressed="true"] .marquee-halt-pause {
  display: none;
}

.marquee-halt[aria-pressed="true"] .marquee-halt-weiter {
  display: block;
}

.marquee {
  position: relative;
  border-block: 1px solid var(--c-line);
  background-color: var(--c-surface);
  overflow: hidden;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}

.marquee.ist-gezogen {
  cursor: grabbing;
}

/* Die Ränder laufen weich aus, damit das Band nicht abgeschnitten wirkt. */
.marquee::before,
.marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: var(--s-16);
  pointer-events: none;
}

.marquee::before {
  left: 0;
  background-image: linear-gradient(90deg, var(--c-surface), transparent);
}

/* Rechts breiter: dort sitzt der Anhalte-Schalter, und darunter soll keine Schrift durchlaufen. */
.marquee::after {
  right: 0;
  width: calc(var(--s-16) + var(--tap-min) + var(--gutter));
  background-image: linear-gradient(270deg, var(--c-surface), transparent);
}

.marquee-schub {
  will-change: transform;
}

.marquee-spur {
  display: flex;
  width: max-content;
  animation: marquee-lauf var(--marquee-dauer) linear infinite;
}

/* Angehalten wird über die Abspielrichtung, nicht über `animation: none` – so bleibt das Band
   an der Stelle stehen, an der es war, statt an den Anfang zu springen. */
.marquee-bereich.ist-angehalten .marquee-spur {
  animation-play-state: paused;
}

@keyframes marquee-lauf {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(var(--marquee-weg));
  }
}

.marquee-gruppe {
  display: flex;
  align-items: center;
  height: var(--marquee-hoehe);
}

.marquee-punkt {
  width: var(--marquee-punkt);
  height: var(--marquee-punkt);
  flex: none;
  border-radius: var(--r-pill);
  background-color: var(--c-gold);
}

.marquee-wort {
  padding-inline: var(--s-6);
  color: var(--c-text-muted);
  font-family: var(--f-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

/* ------------------------------------------------------ 11 Reveals -- */

/*
 * Ausgangszustand nur, wenn `bewegt` gesetzt ist. Die Klasse vergibt ein Kopfskript vor dem
 * ersten Bildaufbau – und nur dann, wenn weder `?static` noch reduzierte Bewegung gilt.
 * Ohne JavaScript, im Standbild-Modus und bei reduzierter Bewegung ist alles sofort sichtbar.
 */
html.bewegt [data-reveal],
html.bewegt [data-reveal-group] > *,
html.bewegt [data-reveal-batch] > * {
  opacity: 0;
}

html.bewegt [data-reveal-img] {
  clip-path: inset(0 0 100% 0);
}

html.bewegt .hero-zeile {
  transform: translateY(var(--zeile-versatz));
}

html.bewegt .hero-kicker,
html.bewegt .hero-claim,
html.bewegt .hero-sub,
html.bewegt .hero-knoepfe,
html.bewegt .hero-vertrauen,
html.bewegt .hero-scroll {
  opacity: 0;
}

/* Standbild-Modus: keine Animation, kein Übergang – verlässliche Screenshots und Prüfungen. */
html.ist-static *,
html.ist-static *::before,
html.ist-static *::after {
  animation-play-state: paused !important;
  transition: none !important;
}

/* ---------------------------------------------------------- 12 Fuß -- */

.fuss {
  position: relative;
  border-top: 1px solid var(--c-line);
  background-color: var(--c-surface);
}

.fuss-raster {
  position: relative;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--s-10);
  padding-top: var(--s-16);
  padding-bottom: var(--s-14);
}

.fuss-claim {
  max-width: 34ch;
  margin: var(--s-5) 0 var(--s-6);
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}

.fuss-instagram {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tap-min);
  color: var(--c-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
}

.fuss-instagram .ns-icon {
  color: var(--c-gold);
}

.fuss-instagram:hover {
  color: var(--c-gold-light);
}

.fuss-titel {
  margin-bottom: var(--s-5);
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.fuss-adresse,
.fuss-links,
.fuss-hinweis {
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
  font-style: normal;
}

.fuss-adresse {
  margin-bottom: var(--s-4);
}

.fuss-links a {
  /* Telefon und E-Mail werden auf dem Handy angetippt: volle Tippflaeche statt 32 px Textzeile. */
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding-block: var(--s-1);
  color: var(--c-text-muted);
  text-decoration: none;
}

.fuss-links a:hover,
.fuss-nav a:hover {
  color: var(--c-gold-light);
}

.fuss-zeiten {
  margin: 0 0 var(--s-4);
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}

.fuss-zeiten-zeile {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-1);
}

.fuss-zeiten dt {
  font-weight: var(--fw-semibold);
}

.fuss-zeiten dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.fuss-nav {
  display: flex;
  flex-direction: column;
}

.fuss-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
  text-decoration: none;
}

.fuss-unten {
  position: relative;
  border-top: 1px solid var(--c-line);
}

.fuss-unten-innen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-5);
}

.fuss-unten p {
  margin: 0;
  color: var(--c-text-muted);
  font-size: var(--fs-xs);
}

.fuss-recht {
  display: flex;
  gap: var(--s-6);
}

.fuss-recht a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--c-text-muted);
  font-size: var(--fs-xs);
  text-decoration: none;
}

.fuss-recht a:hover {
  color: var(--c-gold-light);
}

/* -------------------------------------------------- 13 Abstufungen -- */

@media (max-width: 1080px) {
  .kopf-nav {
    display: none;
  }

  .kopf-telefon {
    width: var(--tap-min);
    padding-inline: 0;
  }

  .kopf-telefon-nummer {
    display: none;
  }

  .menue-schalter {
    display: grid;
  }

  .fuss-raster {
    grid-template-columns: 1fr 1fr;
  }

  .hero {
    padding-top: calc(var(--header-h) + var(--s-8));
    padding-bottom: var(--s-12);
  }

  .galerie-raster {
    --galerie-spalten: 2;
  }
}

/* Unter 900 px stehen Text und Bildstapel des Salons untereinander – ohne Haften, ohne Versatz. */
@media (max-width: 900px) {
  .salon-raster {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-10);
  }

  .salon-haftet {
    position: static;
  }

  .salon-stapel {
    gap: var(--s-6);
  }

  .salon-bild:nth-child(2),
  .salon-bild:nth-child(3) {
    margin-inline: 0;
  }

  .geschichte-raster {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-10);
  }

  .geschichte-abzeichen {
    right: var(--s-4);
    bottom: calc(-1 * var(--s-4));
  }
}

/* Auf schmalen Geräten wird der Innenabstand der Karten kleiner, damit der Text Platz behält. */
@media (max-width: 560px) {
  .team-innen,
  .bewertung,
  .zeiten-karte,
  .anfahrt-karte {
    padding: var(--s-5);
  }

  .cta-innen {
    padding: var(--s-12) var(--s-5);
  }

  .bewertungen-leer {
    padding: var(--s-10) var(--s-5);
  }
}

@media (max-width: 760px) {
  .marke-zusatz {
    display: none;
  }

  .kontaktkarte {
    padding: var(--s-6);
  }

  .fuss-raster {
    grid-template-columns: 1fr;
    gap: var(--s-8);
  }

  /* Auf schmalen Geräten würde der Scroll-Hinweis neben den Schaltflächen sitzen. */
  .hero-scroll {
    display: none;
  }

  .marquee-wort {
    padding-inline: var(--s-4);
    font-size: var(--fs-xl);
  }

  .marquee::before,
  .marquee::after {
    width: var(--s-8);
  }
}

@media (max-width: 560px) {
  .kopf-telefon {
    display: none;
  }

  .kopf-innen {
    gap: var(--s-2);
  }

  .marke-name {
    font-size: var(--fs-lg);
  }

  .kopf-aktionen .knopf-gold {
    padding-inline: var(--s-4);
    font-size: var(--fs-xs);
  }

  .knopf-reihe .knopf {
    width: 100%;
  }

  /* Die Display-Schrift wird enger gestellt, damit die längste Zeile in einer Zeile bleibt. */
  .hero-titel {
    font-size: var(--fs-display-eng);
  }

  .hero-claim {
    font-size: var(--fs-lg);
  }

  /* Die Vertrauenszeile soll auf schmalen Geräten in einer Zeile bleiben. */
  .hero-vertrauen {
    font-size: var(--fs-xs);
  }

  .galerie-raster {
    --galerie-spalten: 1;
  }

  .leistung-innen {
    padding: var(--s-5);
  }

  /* Neben dem Bild ist kein Platz mehr für die Pfeile – sie legen sich darüber. */
  .lichtbox-buehne {
    position: relative;
    display: block;
  }

  .lichtbox-pfeil {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .lichtbox-zurueck {
    left: var(--s-2);
  }

  .lichtbox-weiter {
    right: var(--s-2);
  }

  .zaehler-reihe {
    gap: var(--s-6);
  }
}

/* ------------------------------------------------------ 14 Bewegung -- */

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

  /* Endlose Bewegungen werden abgeschaltet statt auf 1 ms gestaucht. */
  .marquee-spur,
  .hero-scroll-linie::after {
    animation: none;
  }

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