/* ==========================================================================
   Mabast Barber Shop & Friseursalon - Freiburg
   Mobile first. Desktop kommt per min-width obendrauf.
   Keine externen Ressourcen: Schriften liegen in assets/fonts.
   ========================================================================== */

/* --- Schriften (selbst gehostet, kein Google-Aufruf) ---------------------- */
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/playfair-latin.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* --- Tokens --------------------------------------------------------------- */
:root {
  --bg: #0a0a0a;
  --bg-2: #121212;          /* identisch mit dem Logo-Hintergrund */
  --surface: #171716;
  --surface-2: #1f1e1d;
  --line: rgba(255, 255, 255, 0.09);
  --line-soft: rgba(255, 255, 255, 0.05);

  --gold: #c89b5f;          /* aus dem Logo abgegriffen und leicht angehoben */
  --gold-hi: #e6c48d;
  --gold-dim: rgba(200, 155, 95, 0.22);

  --text: #f2efec;
  --muted: #a8a29b;

  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --shell: 1200px;
  --pad: clamp(20px, 5.5vw, 64px);
  --section: clamp(72px, 13vw, 128px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Reset ---------------------------------------------------------------- */
::selection { background: var(--gold); color: #17120a; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: 0.01em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.1; margin: 0; }
p { margin: 0 0 1rem; }
ul { margin: 0; padding: 0; list-style: none; }
figure, blockquote, figcaption { margin: 0; }

:focus-visible {
  outline: 2px solid var(--gold-hi);
  outline-offset: 3px;
}

/* Die Kopfleiste steht fest und ist rund 69 px hoch. Ohne diesen Abstand
   schiebt ein Ankersprung die Oberkante des Ziels darunter. */
section[id] { scroll-margin-top: 78px; }

.shell {
  width: 100%;                  /* ohne das schrumpft der Hero-Container,
                                   weil margin-inline:auto im Flex-Kontext
                                   das Strecken abschaltet */
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--gold);
  color: #17120a;
  padding: 12px 20px;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

/* --- Bausteine ------------------------------------------------------------ */
.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 14px;
}

.section-title {
  font-size: clamp(30px, 7.5vw, 52px);
  letter-spacing: -0.015em;
  text-wrap: balance;           /* keine einzelnen Woerter in der letzten Zeile */
}

.lede {
  font-size: clamp(16px, 4vw, 19px);
  color: var(--muted);
  max-width: 58ch;
  text-wrap: pretty;            /* keine Schusterjungen am Absatzende */
}

.rule {
  height: 1px;
  background: linear-gradient(90deg, var(--gold-dim), transparent);
  transform-origin: left;
  transition: transform 1.1s var(--ease);
  margin: 18px 0 0;
}
.js .rule { transform: scaleX(0); }
.js .is-in .rule, .js .rule.is-in { transform: scaleX(1); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  transition: background-color 0.24s var(--ease), color 0.24s var(--ease),
              border-color 0.24s var(--ease), transform 0.14s var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn svg { width: 18px; height: 18px; flex: none; }

.btn--gold { background: var(--gold); color: #17120a; }
.btn--gold:hover { background: var(--gold-hi); }

.btn--ghost { border-color: rgba(255, 255, 255, 0.22); color: var(--text); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold-hi); }

/* --- Kopfleiste ----------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px var(--pad);
  background: rgba(10, 10, 10, 0);
  backdrop-filter: blur(0px);
  transition: background-color 0.5s var(--ease), backdrop-filter 0.5s var(--ease);
}
.site-header::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-dim), rgba(255,255,255,0.09) 40%, transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease);
}
.site-header.is-stuck::after { transform: scaleX(1); }
.site-header.is-stuck {
  background: rgba(10, 10, 10, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
/* Einfarbig und breit gesperrt wie eine gravierte Ladenbeschriftung.
   Der zweifarbige Split davor wirkte wie ein Logo-Generator. */
.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;             /* Trefferflaeche, sichtbar sind nur 31 px */
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.34em;
  /* Sperrsatz haengt hinter dem letzten Buchstaben Leerraum an. Bei
     linksbuendigem Text muss der rechts weg, nicht links dazu. Mit text-indent
     stand die Tinte 7 px neben der Textkante der Seite. */
  margin-right: -0.34em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text);
  transition-property: color;
  transition-duration: 0.24s;
  transition-timing-function: var(--ease);
}
.wordmark:hover { color: var(--gold-hi); }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;             /* gemessen waren es 38 px */
  padding: 0 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
  transition-property: color;
  transition-duration: 0.24s;
  transition-timing-function: var(--ease);
}
.nav a:hover { color: var(--gold-hi); }
.nav a:active { color: var(--gold); }
.nav__call {
  gap: 8px;
  color: var(--gold) !important;
}
.nav__call svg { width: 17px; height: 17px; }
/* Reines Symbol ohne Text: eigene Mindestbreite, sonst nur 41 px */
.nav__compact .nav__call { min-width: 44px; justify-content: center; }
.nav__desktop { display: none; }

/* --- Hero ----------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 96px 0 clamp(48px, 14vw, 96px);
  overflow: clip;
}
.hero__media {
  position: absolute;
  inset: -8% 0;
  z-index: -2;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: heroZoom 22s var(--ease) forwards;
}
@keyframes heroZoom {
  from { transform: scale(1.14); }
  to   { transform: scale(1); }
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(10,10,10,0.86) 0%, rgba(10,10,10,0.32) 34%, rgba(10,10,10,0.94) 88%, var(--bg) 100%),
    radial-gradient(120% 80% at 50% 100%, rgba(10,10,10,0.8), transparent 70%);
}

.hero__logo {
  width: clamp(132px, 32vw, 220px);
  height: auto;                 /* Seitenverhaeltnis 1.317, nicht quetschen */
  margin-bottom: 24px;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.85));
}

.hero h1 {
  /* Die Zeilen sind einzelne Woerter und koennen nicht umbrechen.
     Deshalb bewusst konservativ: "Reinkommen," muss bei 360 px passen. */
  font-size: clamp(29px, 8.6vw, 92px);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.hero h1 .line { display: block; overflow: hidden; }
.hero h1 .line > span {
  display: block;
  transition: transform 1.05s var(--ease) var(--d, 0ms), filter 1.05s var(--ease) var(--d, 0ms);
}
.js .hero h1 .line > span { transform: translateY(105%); filter: blur(8px); }
.js .hero.is-in h1 .line > span { transform: translateY(0); filter: none; }
.hero h1 em { font-style: normal; color: var(--gold); }

.hero__text { max-width: 40ch; margin-bottom: 30px; color: #d7d2cc; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__cta .btn { flex: 1 1 200px; }

/* --- Reveal-Grundmuster ---------------------------------------------------
   Alle Startzustaende haengen an .js, das ein Inline-Skript im <head> setzt.
   Ohne JavaScript ist damit alles von Anfang an sichtbar, statt fuer immer
   unsichtbar zu bleiben. */
.js .reveal {
  opacity: 0;
  transform: translateY(34px);
  filter: blur(6px);
  transition-property: opacity, transform, filter;
  transition-duration: 0.8s;
  transition-timing-function: var(--ease);
  transition-delay: var(--d, 0ms);
}
.js .reveal.is-in { opacity: 1; transform: none; filter: none; }

/* Bildmaske zieht auf, Bild zoomt gleichzeitig zurueck.
   WICHTIG: der clip-path liegt auf dem Bild, nicht auf .media-mask selbst.
   .media-mask ist das vom IntersectionObserver beobachtete Element. Waere es
   selbst auf Hoehe null geclippt, meldete es dem Observer null Sichtbarkeit,
   die Maske wuerde nie geoeffnet und das Bild bliebe dauerhaft unsichtbar. */
.media-mask { display: block; overflow: clip; }
.media-mask img { width: 100%; }
.js .media-mask img {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.14);
  /* Bewusst kurz gehalten. Bei 1,25 s Maske und 1,8 s Zoom wirkte es, als
     wuerde das Bild noch nachladen, obwohl es schon da war. */
  transition: clip-path 0.7s var(--ease), transform 1.05s var(--ease);
}
.js .media-mask.is-in img { clip-path: inset(0 0 0 0); transform: scale(1); }

/* Damen-Band: Maske laeuft waagerecht von LINKS herein.
   Senkrecht war die Wischkante auf dem dunklen Haar praktisch unsichtbar, das
   Bild schien einfach da zu sein. Von rechts ebenfalls nicht, dort ist das Bild
   dunkel. Links liegen Theke, Fenster und die hellen Straehnen, dort setzt die
   Kante sofort sichtbar an und laeuft dem Text auf der rechten Seite entgegen. */
.js .chapter--flip .media-mask img {
  clip-path: inset(0 100% 0 0);
  transform: scale(1.18);
  transition: clip-path 0.85s var(--ease), transform 1.15s var(--ease);
}
.js .chapter--flip .media-mask.is-in img { clip-path: inset(0 0 0 0); }

/* --- Abschnitt: Ohne Termin ---------------------------------------------- */
.intro { padding: var(--section) 0 0; }
.intro__grid { display: grid; gap: 40px; }

.facts { display: grid; gap: 2px; margin-top: 8px; }
.fact {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.fact:last-child { border-bottom: 1px solid var(--line); }
.fact svg { width: 22px; height: 22px; color: var(--gold); flex: none; margin-top: 2px; }
.fact h3 {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 4px;
}
.fact p { margin: 0; color: var(--muted); font-size: 15px; text-wrap: pretty; }

/* --- Kapitel: Bildband ueber die volle Breite mit dem Titel darin --------
   Loest das alte Bild-neben-Liste-Muster ab. Das Band laeuft randlos, der Text
   darin bleibt trotzdem auf der Textkante der uebrigen Seite. */
.chapter { padding: var(--section) 0 0; }

.chapter__band { position: relative; overflow: clip; }
.chapter__band img {
  width: 100%;
  height: clamp(340px, 58vw, 470px);
  object-fit: cover;
}
.chapter__band::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(8, 8, 8, 0.5) 0%, rgba(8, 8, 8, 0.12) 32%, rgba(8, 8, 8, 0.96) 100%),
    /* Flacher Schleier, pro Band ueber --veil steuerbar */
    linear-gradient(rgba(8, 8, 8, var(--veil, 0)), rgba(8, 8, 8, var(--veil, 0)));
}
/* Beim Damen-Motiv liegen die hellen Straehnen genau dort, wo der Text steht.
   Gemessen ist das Band nicht heller als das Herren-Band, das Motiv draengt
   aber nach vorn. Der Schleier drueckt es zurueck. */
.chapter--flip { --veil: 0.26; }
.chapter__txt {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;                 /* sonst deckt der Verlauf den Text zu */
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding: 0 var(--pad) clamp(24px, 6vw, 44px);
}
.chapter__txt h2 {
  font-size: clamp(30px, 8vw, 54px);
  text-wrap: balance;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 4px 26px rgba(0, 0, 0, 0.9);
  margin-bottom: 12px;
}
.chapter__txt h2 span { color: var(--gold-hi); }
.chapter__txt p {
  max-width: 34ch;
  text-wrap: pretty;
  margin: 0;
  color: #d6d1cb;
  font-size: clamp(15px, 4vw, 18px);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9);
}

.chapter__prices { padding-top: clamp(38px, 7vw, 60px); }

.price-block + .price-block { margin-top: 44px; }
.price-block h3 {
  font-size: clamp(20px, 5vw, 26px);
  text-wrap: balance;
  margin-bottom: 4px;
}
.price-block__note {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 18px;
}

.price-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 10px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
  transition: opacity 0.6s var(--ease) var(--d, 0ms),
              transform 0.6s var(--ease) var(--d, 0ms);
}
/* Der Block kommt als Ganzes, nicht Zeile fuer Zeile: bei elf Zeilen lief die
   alte Kaskade 660 ms und wirkte zaeh. main.js beobachtet .price-block und
   setzt --d je Block einer Spalte. Die frueheren Regeln haengten an
   .price-list.is-in — die Klasse setzt niemand mehr, deshalb blieben die
   Preiszeilen dauerhaft unsichtbar. */
.js .price-block {
  opacity: 0;
  transform: translateY(14px);
  filter: blur(6px);
  transition-property: opacity, transform, filter;
  transition-duration: 0.8s;
  transition-timing-function: var(--ease);
  transition-delay: var(--d, 0ms);
}
.js .price-block.is-in { opacity: 1; transform: none; filter: none; }
.price-list .svc { font-size: 15px; color: #e7e3de; }
/* Bewusst Montserrat statt Playfair: das Euro-Zeichen der Serifenschrift
   verliert bei 17 px seine Querstriche und liest sich dann wie ein C. */
.price-list .amt {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
  white-space: nowrap;
}
.price-list .amt small {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 6px;
}

.price-hint {
  text-wrap: pretty;
  margin: 34px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
  max-width: 68ch;
  font-size: 13px;
  color: var(--muted);
}

/* --- Bewertungen ---------------------------------------------------------- */
.reviews { padding: var(--section) 0 0; }

/* Gesamtbewertung, von Hand gesetzt. Die Anzahl steht als „über 170" in der
   Seite, damit sie nicht altert. Bewusst ohne Sternenreihe: 4,7 mit fuenf
   gefuellten Sternen darzustellen waere geschoenert. */
.rating {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin: 26px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}
.rating strong {
  font-variant-numeric: tabular-nums;
  font-family: var(--serif);
  font-size: clamp(26px, 6vw, 34px);
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
}
.rating span { font-size: 13px; color: var(--muted); }

.reviews__grid { display: grid; gap: 16px; margin: 32px 0 32px; }
.review {
  padding: 26px 24px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
}
.review__stars { display: flex; gap: 3px; margin-bottom: 14px; }
.review__stars svg { width: 15px; height: 15px; color: var(--gold); }
.review blockquote {
  margin: 0 0 16px;
  text-wrap: pretty;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.5;
  color: #ebe7e2;
}
.review cite {
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- Galerie (standardmaessig ausgeblendet) ------------------------------- */
.gallery { padding: var(--section) 0 0; }
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 36px;
}
.gallery__item {
  position: relative;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  overflow: clip;
  aspect-ratio: 1 / 1;
}
.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Feiner Innenkontur, damit dunkle Bildkanten nicht mit dem Grund verlaufen */
  outline: 1px solid rgba(255, 255, 255, 0.1);
  outline-offset: -1px;
  transition-property: transform, opacity;
  transition-duration: 0.7s, 0.4s;
  transition-timing-function: var(--ease), var(--ease);
}
.gallery__item:active img { transform: scale(1.02); opacity: 0.75; transition-duration: 0.15s; }

/* Vorher display:none, damit konnte nichts weich werden und die Ansicht
   sprang auf. Jetzt ueber Sichtbarkeit und Deckkraft, damit Ein- und
   Ausblenden getrennt getaktet werden koennen. Ausgang kuerzer als Eingang. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(5, 5, 5, 0.94);
  backdrop-filter: blur(6px);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition-property: opacity, visibility;
  transition-duration: 0.15s, 0s;
  transition-delay: 0s, 0.15s;
  transition-timing-function: var(--ease);
}
.lightbox[open] {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition-duration: 0.28s, 0s;
  transition-delay: 0s, 0s;
  transition-timing-function: var(--ease);
}
.lightbox img {
  max-width: 100%;
  max-height: 82svh;
  object-fit: contain;
  transform: scale(0.97);
  transition-property: transform;
  transition-duration: 0.15s;
  transition-timing-function: var(--ease);
}
.lightbox[open] img {
  transform: scale(1);
  transition-duration: 0.35s;
  transition-timing-function: var(--ease);
}
.lightbox__close,
.lightbox__nav {
  position: absolute;
  min-width: 52px;
  min-height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background: rgba(18, 18, 18, 0.7);
  color: var(--text);
  cursor: pointer;
}
.lightbox__close { top: 16px; right: 16px; }
.lightbox__nav--prev { left: 12px; top: 50%; translate: 0 -50%; }
.lightbox__nav--next { right: 12px; top: 50%; translate: 0 -50%; }
.lightbox svg { width: 20px; height: 20px; }

/* --- Besuch & Anfahrt ----------------------------------------------------- */
.visit { padding: var(--section) 0; }
.visit__grid { display: grid; gap: 40px; margin-top: 36px; }

.info { display: grid; gap: 2px; }
.info__row {
  display: flex;
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.info__row:last-of-type { border-bottom: 1px solid var(--line); }
.info__row svg { width: 21px; height: 21px; color: var(--gold); flex: none; margin-top: 3px; }
.info__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.info__value { font-size: 16px; color: var(--text); }
/* Telefon und E-Mail waren als reine Textzeilen nur 19 px hoch. Auf dem Handy
   sind das die beiden wichtigsten Links der Seite. */
.info__value a {
  display: flex;
  align-items: center;
  min-height: 42px;
  text-decoration: none;
  transition-property: color;
  transition-duration: 0.3s;
  transition-timing-function: var(--ease);
}
.info__value a:hover, .info__value a:active { color: var(--gold-hi); }
.info__value a[href^="tel:"] { font-variant-numeric: tabular-nums; }
.info__hint { display: block; margin-top: 4px; font-size: 13px; color: var(--gold); }

.visit__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.visit__actions .btn { flex: 1 1 190px; }

/* Passepartout: Foto sitzt in einer helleren Platte mit Bildzeile darunter */
.photo-frame { background: var(--surface); padding: clamp(12px, 2.6vw, 18px); }
.photo-frame img { aspect-ratio: 3 / 4; object-fit: cover; }
.photo-frame figcaption {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--gold-dim);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.photo-frame figcaption span:last-child { color: var(--gold); white-space: nowrap; }

/* Karte: fertiges dunkles Kartenbild vom eigenen Server.
   Kein iframe, kein Fremdskript, kein Nachladen, also auch keine Zustimmung. */
.map {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: clip;
  margin: 28px 0 0;
}
.map img { width: 100%; height: 100%; object-fit: cover; }

.map__pin {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -100%;
  color: var(--gold);
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.75));
}
.map__pin svg { width: 34px; height: 34px; display: block; }
/* Ruhiger Puls, damit das Auge den Punkt findet */
.map__pin::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6px;
  translate: -50% 0;
  width: 34px;
  height: 34px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  opacity: 0;
  animation: pin 3.2s var(--ease) infinite;
  animation-play-state: paused;
}
@keyframes pin {
  0%   { transform: scale(0.35); opacity: 0.55; }
  70%  { transform: scale(1.5);  opacity: 0; }
  100% { transform: scale(1.5);  opacity: 0; }
}

/* Quellenangabe ist Lizenzpflicht und bleibt sichtbar */
.map__credit {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 5px 9px;
  background: rgba(10, 10, 10, 0.72);
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.02em;
}

/* --- Fußzeile ------------------------------------------------------------- */
.site-footer {
  padding: clamp(48px, 10vw, 80px) 0 calc(88px + env(safe-area-inset-bottom));
  background: var(--bg-2);
  border-top: 1px solid var(--line-soft);
  text-align: center;
}
.site-footer img { width: 148px; margin: 0 auto 26px; }
.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 4px;
  margin-bottom: 24px;
}
.site-footer nav a, .site-footer nav button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  background: none;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.3s var(--ease);
}
.site-footer nav a:hover, .site-footer nav button:hover { color: var(--gold-hi); }
.site-footer p { font-size: 12px; color: #6f6a64; margin: 0; }
/* Urheberzeile: erbt Groesse und Farbe von .site-footer p, nur der Abstand kommt
   dazu. Der Link folgt dem Gold-Hover der uebrigen Fusszeilen-Links. */
.site-footer .credit { margin-top: 8px; }
.site-footer .credit a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  transition: color 0.3s var(--ease);
}
.site-footer .credit a:hover { color: var(--gold-hi); }

/* --- Aktionsleiste unten (nur Mobil) -------------------------------------- */
.action-bar {
  position: fixed;
  inset: auto 0 0;
  z-index: 70;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid var(--line);
}
.action-bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 58px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}
.action-bar svg { width: 18px; height: 18px; }
.action-bar a {
  transition-property: background-color;
  transition-duration: 0.18s;
  transition-timing-function: ease-out;
}
.action-bar .call { background: var(--gold); color: #17120a; }
.action-bar .route { background: var(--bg-2); color: var(--text); }
/* Rueckmeldung beim Antippen. Kein Skalieren, eine volle Leiste die zuckt
   sieht kaputt aus, deshalb nur ein Aufhellen. */
.action-bar .call:active { background: var(--gold-hi); }
.action-bar .route:active { background: var(--surface-2); }

/* --- Rechtstexte (Impressum / Datenschutz) -------------------------------- */
.legal { padding: 120px 0 clamp(64px, 12vw, 110px); }
.legal h1 { font-size: clamp(30px, 8vw, 48px); margin-bottom: 28px; }
.legal h2 {
  font-size: clamp(19px, 4.6vw, 24px);
  margin: 44px 0 12px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
}
.legal p, .legal li { color: #cbc6c0; max-width: 72ch; }
.legal ul { list-style: disc; padding-left: 22px; margin-bottom: 1rem; }
.legal li { margin-bottom: 6px; }
.legal a { color: var(--gold-hi); }
.legal .todo {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(200, 155, 95, 0.14);
  border: 1px dashed var(--gold);
  color: var(--gold-hi);
  font-size: 13px;
  font-weight: 700;
}
.legal .back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 34px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
}

/* ==========================================================================
   Ab hier: groessere Bildschirme
   ========================================================================== */
@media (min-width: 640px) {
  .reviews__grid { grid-template-columns: repeat(2, 1fr); }
  .gallery__grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .hero__cta .btn { flex: 0 1 auto; }
}

@media (min-width: 900px) {
  .site-header { padding: 18px var(--pad); }
  .wordmark { font-size: 26px; }
  .nav__desktop { display: flex; }
  .nav__compact { display: none; }

  .action-bar { display: none; }
  .site-footer { padding-bottom: clamp(48px, 10vw, 80px); }

  .intro__grid { grid-template-columns: 1.05fr 0.95fr; gap: 72px; align-items: start; }

  /* Band: Titel steht mittig links im Bild, Verlauf laeuft von links */
  .chapter__band::after {
    background:
      linear-gradient(90deg, rgba(8,8,8,0.96) 0%, rgba(8,8,8,0.86) 30%,
                             rgba(8,8,8,0.3) 62%, rgba(8,8,8,0.05) 88%),
      linear-gradient(180deg, rgba(8,8,8,0.4), transparent 45%, rgba(8,8,8,0.5)),
      linear-gradient(rgba(8, 8, 8, var(--veil, 0)), rgba(8, 8, 8, var(--veil, 0)));
  }
  .chapter__txt { inset: 0; display: grid; align-content: center; padding-block: 0; }

  /* Damen: gespiegelt, damit die zwei Baender nicht identisch wirken.
     Der Keil laeuft hier tiefer ins Bild, weil unter dem Text das Motiv liegt. */
  .chapter--flip .chapter__band::after {
    background:
      linear-gradient(270deg, rgba(8,8,8,0.97) 0%, rgba(8,8,8,0.93) 34%,
                              rgba(8,8,8,0.5) 64%, rgba(8,8,8,0.12) 92%),
      linear-gradient(180deg, rgba(8,8,8,0.4), transparent 45%, rgba(8,8,8,0.5)),
      linear-gradient(rgba(8, 8, 8, var(--veil, 0)), rgba(8, 8, 8, var(--veil, 0)));
  }
  .chapter--flip .chapter__txt { justify-items: end; text-align: right; }
  .chapter--flip .chapter__txt p { margin-left: auto; }

  /* Vier Karten in zwei Spalten statt vier schmalen: bei 290 px Breite
     laufen die Zitate auf sechs Zeilen und lesen sich schlecht. */
  .reviews__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }

  .visit__grid { grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
  .photo-frame { position: sticky; top: 120px; }
  .map { margin-top: 22px; aspect-ratio: 16 / 11; }
}

@media (min-width: 1100px) {
  .hero h1 { letter-spacing: -0.03em; }
}

/* Parallax nur mit echtem Zeiger, also nicht auf Touchgeraeten */
@media (hover: hover) and (pointer: fine) {
  [data-parallax] { will-change: transform; }
  .gallery__item:hover img { transform: scale(1.07); opacity: 0.85; }
  .flip:hover .flip__img { transform: scale(1.04); }
  .flip__close:hover { transform: rotate(90deg); }
  .shot:hover .shot__frame img { transform: scale(1.07); }
}

/* --- Bewegung aus ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  /* !important, weil die Startzustaende oben an .js haengen und damit
     spezifischer waeren als diese Regeln */
  .reveal, .price-list li, .price-block { opacity: 1 !important; transform: none !important; }
  .reveal, .price-block, .hero h1 .line > span { filter: none !important; }
  .siegel__ring { animation: none !important; }
  .media-mask img { clip-path: none !important; transform: none !important; }
  .hero h1 .line > span { transform: none !important; }
  .rule { transform: scaleX(1) !important; }
  .hero__media { transform: none !important; }
  .map__pin::after { animation: none !important; }
  .lightbox, .lightbox[open] { transition-duration: 0.001ms !important; }
  .lightbox img, .lightbox[open] img { transform: none !important; }
}

/* ==========================================================================
   BOGEN, KLAPPKARTEN, FRISUREN-SPUREN                       (Ergaenzung v17)
   Der Bogen ist die Leitform: Barbierspiegel und orientalischer Torbogen
   haben dieselbe Silhouette. Er ersetzt das rechteckige Bildformat ueberall
   dort, wo ein Bild fuer sich steht - nicht im randlosen Hero, nicht auf der
   Karte, weil ein Kartenausschnitt im Bogen wie ein Fehler aussieht.
   ========================================================================== */
:root {
  --bogen: 46% 46% 12px 12px / 26% 26% 2% 2%;
  --bogen-klein: 42% 42% 8px 8px / 20% 20% 2% 2%;
}

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

.muted-word { color: var(--muted); }

.chapter__intro { max-width: 62ch; margin-bottom: clamp(28px, 5vw, 48px); }

/* --- Klappkarte ----------------------------------------------------------
   Beide Seiten liegen im selben Rasterfeld. Dadurch ist die Karte so hoch wie
   die hoehere Seite (die Preise) und das Bild fuellt diese Hoehe - die Karte
   springt beim Drehen also nicht in der Groesse. */
/* Kein 3D mehr. Die Drehung brauchte backface-visibility, und das versagt auf
   demselben Element zusammen mit overflow:hidden und border-radius. Auf dem
   iPhone wurden dadurch beide Kartenseiten gleichzeitig gezeichnet, Bild und
   Preisliste lagen uebereinander. Stattdessen blenden die Seiten ineinander. */
.flip { position: relative; }

.flip__inner {
  display: grid;
  /* Zwei feste Hoehen, damit der Uebergang sauber laeuft: geschlossen eine
     ruhige Bildhoehe, offen der Deckel. Vorher richtete sich die geschlossene
     Karte nach der laengsten Preisliste und war ueber 700 px hoch, deshalb
     fuellten die Bilder auf dem Handy den ganzen Bildschirm. Laeuft die Liste
     ueber den Deckel, scrollt sie innerhalb der Karte. */
  height: clamp(300px, 62vw, 420px);
  transition: height 0.5s var(--ease);
}
.flip.is-open .flip__inner { height: min(86svh, 780px); }

.flip__face {
  grid-area: 1 / 1;
  position: relative;
  overflow: hidden;
  border-radius: var(--bogen);
  /* Kreuzblende. visibility haelt die verdeckte Seite aus der Tastatur- und
     Tippreihenfolge heraus, opacity macht den Uebergang weich. */
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s var(--ease), visibility 0s linear 0s;
}
.flip__back {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s var(--ease), visibility 0s linear 0.45s;
}
.flip.is-open .flip__front {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s var(--ease), visibility 0s linear 0.45s;
}
.flip.is-open .flip__back {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s var(--ease), visibility 0s linear 0s;
}

.flip__front { background: var(--surface); }
.flip__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}

.flip__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,.15) 0%, rgba(10,10,10,.05) 45%, rgba(10,10,10,.86) 100%);
}

.flip__label {
  position: absolute; inset: auto 0 0 0;
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 12px;
  padding: clamp(20px, 4vw, 38px);
}
.flip__kicker {
  font-family: var(--serif);
  font-size: clamp(26px, 5.4vw, 40px);
  line-height: 1.1;
}
.flip__cue {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--gold);
}
.flip__cue svg { width: 17px; height: 17px; }

/* Ganzflaechige Schaltflaeche: klickbar wie ein Bild, bedienbar wie ein Knopf */
.flip__hit {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; background: none; cursor: pointer;
  border-radius: inherit;
}
.flip__hit:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: -6px; }

.flip__back {
  background: var(--surface);
  padding: clamp(20px, 3.6vw, 38px);
  overflow-y: auto;
}
.flip__backhead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: clamp(18px, 3vw, 28px);
  padding-bottom: 14px; border-bottom: 1px solid var(--gold-dim);
}
.flip__backtitle { font-family: var(--serif); font-size: clamp(22px, 4vw, 32px); }
.flip__close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  border: 1px solid var(--line); background: none; color: var(--text);
  border-radius: 50%; cursor: pointer;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
}
.flip__close svg { width: 19px; height: 19px; }
.flip__close:hover { border-color: var(--gold); color: var(--gold-hi); }

/* Preise auf der Rueckseite: drei Spalten auf dem Desktop, damit die Karte
   nicht ins Endlose waechst. */
.price-grid { display: grid; gap: clamp(20px, 3vw, 34px); }
@media (min-width: 760px)  { .price-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .price-grid { grid-template-columns: repeat(3, 1fr); } }
.price-grid h4 {
  font-family: var(--serif); font-size: 21px; font-weight: 700; margin: 0 0 2px;
}

/* Die Bloecke stecken hinter der Karte und werden vom Beobachter nie als
   sichtbar gemeldet. Ohne diese Zeile blieben sie dauerhaft auf opacity 0. */
.js .flip__back .price-block { opacity: 1 !important; transform: none !important; }

/* --- Frisuren-Spuren ------------------------------------------------------ */
.rails { padding-block: var(--section); }
.rail-block { margin-top: clamp(34px, 6vw, 58px); }

.rail__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; margin-bottom: 18px;
}
.rail__title { font-family: var(--serif); font-size: clamp(19px, 3.4vw, 25px); }

.rail__nav { display: flex; gap: 8px; }
.rail__arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--line); border-radius: 50%;
  background: none; color: var(--text); cursor: pointer;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease),
              opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.rail__arrow svg { width: 19px; height: 19px; }
.rail__arrow:hover:not(:disabled) { border-color: var(--gold); color: var(--gold-hi); }
.rail__arrow:active:not(:disabled) { transform: scale(0.93); }
.rail__arrow:disabled { opacity: 0.28; cursor: default; }

.rail {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: clamp(180px, 58vw, 248px);
  gap: clamp(12px, 1.6vw, 18px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 6px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail__item { scroll-snap-align: start; }

.shot { margin: 0; }
.shot__frame {
  display: block; overflow: hidden;
  border-radius: var(--bogen-klein);
  background: var(--surface);
}
.shot__frame img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.shot:focus-within .shot__frame img { transform: scale(1.07); }
.shot figcaption {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--gold-dim);
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}

/* --- Bogen fuer die uebrigen Bilder --------------------------------------- */
.photo-frame img,
.gallery__item img { border-radius: var(--bogen); }
.gallery__item { overflow: hidden; border-radius: var(--bogen); }
.map { overflow: hidden; }   /* eckig wie alle Flaechen; Bogen nur fuer Fotos */

@media (prefers-reduced-motion: reduce) {
  .flip__inner { transition: none; }
  .flip.is-open .flip__inner { transform: none; }
  .flip__back { transform: none; }
  /* Ohne Drehung wird schlicht getauscht: nur eine Seite liegt im Raster. */
  .flip__front { visibility: visible; }
  .flip.is-open .flip__front { display: none; }
  .flip__img, .shot__frame img, .rail { transition: none; }
  .rail { scroll-behavior: auto; }
  .flip:hover .flip__img,
  .shot:hover .shot__frame img { transform: none; }
}

/* Die alte Regel .price-block + .price-block (44 px) galt fuer die frueheren
   gestapelten Spalten. Im neuen Raster addiert sie sich auf den Grid-Abstand
   und versetzt die zweite und dritte Spalte. Hier zurueckgenommen. */
.price-grid .price-block + .price-block { margin-top: 0; }

/* ==========================================================================
   KLAPPKARTE: Nachbesserung
   1) Stapelung nicht mehr allein von backface-visibility abhaengig machen.
      Manche Browser rastern ein Element mit overflow:hidden PLUS border-radius
      in eine eigene Ebene und ignorieren dabei die Rueckseiten-Ausblendung -
      dann liegt die abgewandte Seite oben und faengt jeden Klick ab.
      z-index und pointer-events entscheiden das jetzt eindeutig.
   2) Der Hinweis war zu leise. Er ist jetzt eine sichtbare Schaltflaeche.
   ========================================================================== */
.flip__front { z-index: 2; }
.flip__back  { z-index: 1; pointer-events: none; }
.flip.is-open .flip__front { z-index: 1; pointer-events: none; }
.flip.is-open .flip__back  { z-index: 2; pointer-events: auto; }

/* Hinweis als Schaltflaeche: gefuellt, gross genug zum Antippen, mit Schatten
   gegen das Bild abgesetzt. Vorher war es eine Zeile in Goldschrift, die auf
   einem hellen Bildausschnitt praktisch verschwand. */
.flip__cue {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  background: var(--gold);
  color: #17120a;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5);
  transition: background-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.flip__cue svg { width: 18px; height: 18px; }
.flip:hover .flip__cue { background: var(--gold-hi); transform: translateY(-3px); }
.flip__hit:active ~ .flip__label .flip__cue,
.flip__hit:focus-visible ~ .flip__label .flip__cue { background: var(--gold-hi); }

/* Der Knopf liegt ueber dem Etikett, sonst faengt das Etikett den Klick ab. */
.flip__label { pointer-events: none; z-index: 3; }
.flip__hit { z-index: 4; }

/* Auf schmalen Schirmen untereinander statt nebeneinander, damit die
   Schaltflaeche nicht auf 100 px zusammengedrueckt wird. */
@media (max-width: 560px) {
  .flip__label { flex-direction: column; align-items: flex-start; gap: 16px; }
  .flip__cue { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .flip:hover .flip__cue { transform: none; }
}

/* --- Meisterbetrieb-Siegel ----------------------------------------------- */
.seal { color: var(--gold); display: block; }
.seal--hero {
  position: absolute;
  top: 92px;                       /* unter der festen Kopfleiste */
  right: var(--pad);
  width: clamp(100px, 24vw, 132px);
  height: auto;
  aspect-ratio: 1;
  transform: rotate(-6deg);        /* leicht gekippt wie ein Stempel */
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.55));
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.js .hero:not(.is-in) .seal--hero { opacity: 0; transform: rotate(-6deg) scale(0.92); }
.seal--footer { width: 76px; aspect-ratio: 1; margin: 0 auto 18px; }
@media (min-width: 900px) {
  .seal--hero { top: 110px; }
}

/* Ringschrift des Siegels dreht, 60 s je Umdrehung: eher Leben als Bewegung.
   Sobald die Kopfleiste festsitzt, ist der Hero weg, dann steht der Ring. */
@keyframes siegelRing { to { transform: rotate(360deg); } }
.siegel__ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: siegelRing 60s linear infinite;
}
body:has(.site-header.is-stuck) .siegel__ring { animation-play-state: paused; }
.map.is-in .map__pin::after { animation-play-state: running; }

/* --- Instagram und TikTok ------------------------------------------------
   Nur Verweise, kein eingebetteter Feed. Ein Widget wuerde ein fremdes Skript
   laden, damit waere das Einwilligungsbanner zurueck. Die Zeichen sind
   stilisierte Einfarb-Formen in Gold, kein Nachbau der Markenlogos: die
   Originale verlangen ihre eigenen Farben und wuerden die Ein-Akzent-Regel
   brechen. */
.soc {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--text);
  text-decoration: none;
  transition: color 0.24s var(--ease);
}
.soc svg { width: 20px; height: 20px; flex: none; color: var(--gold); }
.soc span { display: flex; flex-direction: column; line-height: 1.15; }
.soc b { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.soc small { font-size: 11px; color: var(--muted); }

.social--footer {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 32px;
  margin: 0 0 22px;
}

/* Kopfleiste: erst ab 900 px. Auf dem Handy gehoert der Platz dem Anruf. */
.nav__soc {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--muted);
  transition: color 0.24s var(--ease);
}
.nav__soc svg { width: 19px; height: 19px; }
@media (min-width: 900px) { .nav__soc { display: inline-flex; } }

.social--reviews { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.social--reviews .btn { flex: 1 1 180px; }
.social--reviews .btn svg { color: var(--gold); }

@media (hover: hover) and (pointer: fine) {
  .soc:hover { color: var(--gold-hi); }
  .nav__soc:hover { color: var(--gold-hi); }
}