/* ==========================================================================
   DER BARBIER — Weil am Rhein
   Design-System „Leder & Klinge"
   Tokens → Basis → Komponenten → Sektionen → Seiten → Responsive
   ========================================================================== */

/* ---------- Fonts (self-hosted, DSGVO) ---------- */
/* Anton = Display-Wucht (nur 400), Space Mono = Editorial-Monospace wie die Referenz */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/anton-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/space-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/space-mono-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Mrs Saint Delafield';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/mrs-saint-delafield-400.woff2') format('woff2');
}

/* Metrisch angeglichene Ersatzschriften. Ohne sie springt beim Font-Swap das
   halbe Layout (auf gedrosselter Verbindung gemessene CLS: 0,27 auf
   services.html). Werte aus dem Canvas-Vergleich bei 100px:
   Anton 893,16px breit / asc 1,180 / desc 0,330 gegen Arial Narrow 1056,74;
   Space Mono 1224 / 1,120 / 0,360 gegen Courier New 1200,20. */
@font-face {
  font-family: 'Anton Fallback';
  src: local('Arial Narrow'), local('Liberation Sans Narrow'), local('Helvetica Neue Condensed');
  size-adjust: 84.52%;
  ascent-override: 139.6%;
  descent-override: 39.05%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Space Mono Fallback';
  src: local('Courier New'), local('Liberation Mono'), local('DejaVu Sans Mono');
  size-adjust: 101.98%;
  ascent-override: 109.8%;
  descent-override: 35.3%;
  line-gap-override: 0%;
}

/* ---------- Tokens ---------- */
:root {
  /* Farben */
  --ink: #171310;
  --ink-2: #221c17;
  --ink-3: #2d251e;
  --paper: #f1eae1;
  --paper-2: #e7ddd0;
  --camel: #b28f77;
  --camel-deep: #8f6d55;
  --camel-text: #755640; /* AA-sicher fuer Kleintext auf paper/paper-2 */
  --cream: #efe3d7;
  --cream-dim: rgba(239, 227, 215, 0.8);
  --line-dark: rgba(178, 143, 119, 0.26);
  --line-light: rgba(23, 19, 16, 0.16);

  /* Typografie */
  --font-display: 'Anton', 'Anton Fallback', 'Arial Narrow', sans-serif;
  --font-body: 'Space Mono', 'Space Mono Fallback', 'Courier New', monospace;
  --font-script: 'Mrs Saint Delafield', cursive;
  --fs-hero: clamp(4.75rem, 18.5vw, 19rem);
  --fs-h1: clamp(3.5rem, 10.5vw, 10rem);
  --fs-h2: clamp(2.5rem, 5vw, 4rem);
  --fs-h3: 1.625rem;
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;
  --fs-label: 0.8125rem;

  /* Raum */
  --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-6: 24px; --s-8: 32px;
  --s-12: 48px; --s-16: 64px; --s-24: 96px; --s-32: 128px;
  --section: clamp(100px, 12vw, 220px);
  --container: 1280px;
  --gutter: clamp(20px, 4vw, 48px);

  /* Bewegung */
  --ease-snap: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 0.25s;
  --t-med: 0.6s;
}

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

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

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--ink);
  background: var(--paper);
  overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }

[data-parallax] { overflow: clip; }

[hidden] { display: none !important; }

a, button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

a { color: inherit; }

::selection { background: var(--camel); color: var(--ink); }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  background: var(--camel);
  color: var(--ink);
  padding: 12px 20px;
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus-visible { left: 0; }

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

main { display: block; }

/* Dunkle Buehnen */
.on-dark {
  background: var(--ink);
  color: var(--cream);
}
.on-dark ::selection { background: var(--cream); color: var(--ink); }

/* Helle Sektionen: setzen die on-dark-Vererbung des body gezielt zurueck
   (Kaskaden-Falle: body.on-dark wuerde sonst Dark-Varianten hineinerben) */
.on-light {
  background: var(--paper);
  color: var(--ink);
}
.on-light ::selection { background: var(--camel); color: var(--ink); }

/* ---------- Typografie-Komponenten ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  /* 1.06 ist das gemessene Minimum: Antons Umlautpunkte reichen 1,060em ueber
     die Grundlinie, Versalien nur 0,860em. Bei 0.98 stiess das Ä von
     "NAECHSTEN" in die Zeile darueber. */
  line-height: 1.06;
  letter-spacing: 0;
  text-wrap: balance;
}

/* line-height 0.9 wie im Startseiten-Hero: die Versalien ragen dadurch minimal
   ueber die Oberkante des Camel-Balkens - genau der Anschnitt, der die
   Signature ausmacht. Bei 0.98 verschwand die Schrift sauber im Balken. */
h1.display { font-size: var(--fs-h1); line-height: 0.9; }
h2.display { font-size: var(--fs-h2); }

.lead {
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  max-width: 28em;
}
.lead, .menu-claim, .hero-sub p { text-wrap: pretty; }

.script {
  font-family: var(--font-script);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

/* Sektions-Label: kleines Wort im Balken (Signature) */
.label {
  display: inline-block;
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--camel-text);
  margin-bottom: var(--s-6);
}
.label::before { content: '[ '; }
.label::after { content: ' ]'; }
.on-dark .label { color: var(--camel); }

/* Balken-Wort in Headlines (Signature): Camel-Balken wischt ueber das Wort */
.bar-word {
  position: relative;
  display: inline-block;
  padding: 0 0.08em;
  color: var(--ink);
  z-index: 1;
}
.bar-word::before {
  content: '';
  position: absolute;
  inset: 0.04em -0.06em -0.02em;
  background: var(--camel);
  z-index: -1;
  transform-origin: left center;
}
.on-dark .bar-word { color: var(--ink); }
/* Wipe-Animation: klassengetriggert (nicht Keyframe), Safety: sichtbar ohne JS */
.js .reveal-bar .bar-word::before {
  transform: scaleX(0);
  transition: transform var(--t-med) var(--ease-snap);
}
.js .reveal-bar .bar-word {
  color: inherit;
  transition: color 0.2s linear 0.25s;
}
.js .reveal-bar.lit .bar-word::before { transform: scaleX(1); }
.js .reveal-bar.lit .bar-word { color: var(--ink); }

/* Block-Reveal (Karten, Bilder, Absaetze) */
.js .reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.45s linear, transform 0.65s var(--ease-out);
}
.js .reveal.lit { opacity: 1; transform: none; }
.js .reveal[data-delay='1'] { transition-delay: 0.1s; }
.js .reveal[data-delay='2'] { transition-delay: 0.2s; }
.js .reveal[data-delay='3'] { transition-delay: 0.3s; }
.js .reveal[data-delay='4'] { transition-delay: 0.4s; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  padding: 17px 30px 16px;
  border: 1px solid transparent;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out),
    background-color 0.3s var(--ease-out), transform 0.16s var(--ease-out);
}
.btn .btn-txt { position: relative; z-index: 1; }
.btn::before {
  /* Balken-Wipe im Hover: rein von links, raus nach rechts (durchwischen) */
  content: '';
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.3s var(--ease-out);
}
.btn:hover::before, .btn:focus-visible::before {
  transform: scaleX(1);
  transform-origin: left center;
}
.btn:active { transform: scale(0.97); }

.btn--primary { background: var(--camel); color: var(--ink); }
.btn--primary::before { background: var(--cream); }

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

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

/* Text-Link mit Underline-Draw */
.link-draw {
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.9375rem;
  position: relative;
  padding-bottom: 4px;
}
.link-draw::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.5s var(--ease-snap);
}
.link-draw:hover::after, .link-draw:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* ---------- Intro-Overlay ---------- */
.intro {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.55s var(--ease-snap);
}
.intro.intro--done { transform: translateY(-100%); }
.intro.intro--gone { display: none; }

.intro-script {
  font-family: var(--font-script);
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  color: var(--camel);
  line-height: 1.2;
  padding: 0 24px 8px;
  /* schreibt sich per clip-path ein */
  clip-path: inset(0 100% 0 0);
}
.intro.intro--play .intro-script {
  animation: introWrite 0.75s var(--ease-out) 0.1s forwards;
}
@keyframes introWrite {
  to { clip-path: inset(0 -5% 0 0); }
}

.intro-bar {
  background: var(--camel);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 4.5vw, 2.75rem);
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 10px 22px 7px;
  transform: scaleX(0);
  transform-origin: left center;
}
.intro.intro--play .intro-bar {
  animation: introBar 0.4s var(--ease-snap) 0.75s forwards;
}
@keyframes introBar {
  to { transform: scaleX(1); }
}
.intro-bar span {
  display: block;
  opacity: 0;
}
.intro.intro--play .intro-bar span {
  animation: introBarText 0.25s linear 1s forwards;
}
@keyframes introBarText {
  to { opacity: 1; }
}

.intro-logo {
  width: 76px;
  height: 76px;
  opacity: 0;
  transform: scale(0.85);
  margin-bottom: 6px;
}
.intro.intro--play .intro-logo {
  animation: introLogo 0.6s var(--ease-out) 0.05s forwards;
}
@keyframes introLogo {
  to { opacity: 1; transform: none; }
}

/* Ohne JS oder mit reduced motion: Intro existiert nicht sichtbar */
.no-js .intro { display: none; }
@media (prefers-reduced-motion: reduce) {
  .intro { display: none !important; }
}

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: transform 0.3s var(--ease-out), background-color 0.3s var(--ease-out);
  background: transparent;
}
.site-header.header--scrolled {
  background: rgba(23, 19, 16, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.site-header.header--hidden { transform: translateY(-110%); }
/* Bei offenem Menue liegt der Header (mit X-Button) ueber dem Vollbild-Menue */
.nav-open .site-header { z-index: 130; transform: none; }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  padding: 14px var(--gutter);
  max-width: 1600px;
  margin-inline: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--cream);
}
.brand img { width: 46px; height: 46px; }
.brand-word {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 1.375rem;
  letter-spacing: 0.06em;
  line-height: 1;
  padding-top: 3px;
}

.nav-desktop { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 34px); }
.nav-desktop a:not(.btn) {
  color: var(--cream);
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  position: relative;
  padding: 6px 0;
}
.nav-desktop a:not(.btn)::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--camel);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.4s var(--ease-snap);
}
.nav-desktop a:not(.btn):hover::after,
.nav-desktop a:not(.btn):focus-visible::after,
.nav-desktop a[aria-current='page']::after {
  transform: scaleX(1);
  transform-origin: left center;
}
.nav-desktop .btn { padding: 12px 22px 11px; font-size: 0.8125rem; }

/* Ein Bildschirm, ein "Termin buchen". Der Header-CTA tritt zurueck, solange
   der Hero seinen eigenen zeigt - und sobald die Sticky-Leiste uebernimmt. */
.site-header.header--cta-off .nav-desktop .btn--primary,
.site-header.header--cta-off .nav-book,
body:has(.sticky-book--in) .nav-desktop .btn--primary,
body:has(.sticky-book--in) .nav-book {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.nav-desktop .btn--primary, .nav-book {
  transition: opacity 0.3s var(--ease-out), visibility 0s linear 0s;
}
.site-header.header--cta-off .nav-desktop .btn--primary,
.site-header.header--cta-off .nav-book { transition-delay: 0s, 0.3s; }

/* Buchen-Button im Header, solange die Desktop-Navigation eingeklappt ist.
   Sonst laege der einzige Buchungsweg hinter dem Burger. */
.nav-book {
  display: none;
  margin-left: auto;
  padding: 12px 16px 11px;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  min-height: 44px;
}

/* Mobile-Menue */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  color: var(--cream);
  width: 48px; height: 48px;
  cursor: pointer;
  position: relative;
  z-index: 130;
}
.nav-toggle .bars, .nav-toggle .bars::before, .nav-toggle .bars::after {
  content: '';
  display: block;
  position: absolute;
  left: 12px;
  width: 24px; height: 2px;
  background: currentColor;
  transition: transform 0.35s var(--ease-snap), opacity 0.2s;
}
.nav-toggle .bars { top: 23px; }
.nav-toggle .bars::before { left: 0; top: -7px; }
.nav-toggle .bars::after { left: 0; top: 7px; }
.nav-open .nav-toggle .bars { transform: rotate(45deg); }
.nav-open .nav-toggle .bars::before { transform: rotate(-90deg) translateX(-7px); }
.nav-open .nav-toggle .bars::after { opacity: 0; }

.nav-mobile {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--gutter);
  transform: translateY(-100%);
  transition: transform 0.45s var(--ease-snap), visibility 0s linear 0.45s;
  visibility: hidden;
}
.nav-open .nav-mobile {
  transform: none;
  visibility: visible;
  transition: transform 0.55s var(--ease-snap), visibility 0s;
}
.nav-mobile a {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(2.5rem, 9vh, 4rem);
  line-height: 1.12;
  color: var(--cream);
  text-decoration: none;
}
.nav-mobile a:hover, .nav-mobile a[aria-current='page'] { color: var(--camel); }
.nav-mobile .nav-mobile-meta {
  margin-top: var(--s-8);
  color: var(--cream-dim);
  font-size: var(--fs-small);
}
.nav-open { overflow: hidden; }

/* ---------- Hero (Startseite) ---------- */
.hero {
  padding-top: clamp(120px, 18vh, 190px);
}
h1.hero-headline {
  /* h1-Praefix noetig: schlaegt h1.display in der Spezifitaet, sonst greift --fs-hero nie.
     JS (fitHero) skaliert die Zeile exakt auf Containerbreite — Wortmarke als Band. */
  font-size: clamp(4rem, 14vw, 15rem);
  white-space: nowrap;
  max-width: none;
  line-height: 0.9;
  width: 100%;
}
.hero { overflow-x: clip; }
.hero-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-8);
  justify-content: space-between;
  margin-top: var(--s-8);
}
.hero-sub p {
  color: var(--cream-dim);
  max-width: 26em;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--s-4); }

/* Wann, wo, wie erreichbar — die drei Fragen, die vor dem Termin kommen.
   Bewusst leise gesetzt: Struktur, keine Dekoration. */
.hero-facts {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-6);
  margin-top: var(--s-6);
  padding-top: var(--s-6);
  padding-bottom: clamp(56px, 8vh, 110px);
  border-top: 1px solid var(--line-dark);
}
.hero-facts-k {
  display: block;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--camel);
  margin-bottom: 6px;
}
.hero-facts-v {
  display: inline-block;
  min-height: 24px;
  font-size: var(--fs-small);
  color: var(--cream);
  font-variant-numeric: tabular-nums;
}
/* Der Status sitzt auf der Zeile darueber, damit „Jetzt geoeffnet" und
   „Geschlossen" dort stehen, wo sonst die Rubrik steht. Die tatsaechlichen
   Zeiten bleiben darunter immer lesbar. */
.hero-facts-k.is-open::before,
.hero-facts-k.is-closed::before {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 8px;
  vertical-align: 0.08em;
  background: var(--camel);
}
.hero-facts-k.is-closed::before { background: var(--line-dark); }
.hero-facts-k.is-closed { color: var(--cream-dim); }
.hero-open-week {
  display: block;
  margin-top: 8px;
  font-size: var(--fs-label);
  line-height: 1.6;
  color: var(--cream-dim);
  font-variant-numeric: tabular-nums;
}
a.hero-facts-v { text-decoration: underline; text-decoration-color: var(--line-dark); text-underline-offset: 4px; }
a.hero-facts-v:hover, a.hero-facts-v:focus-visible { color: var(--camel); text-decoration-color: currentColor; }
@media (max-width: 720px) {
  .hero-facts { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .hero-facts li + li { border-top: 1px solid var(--line-dark); padding-top: var(--s-4); }
}

.hero-figure {
  margin: 0;
  position: relative;
}
.hero-figure img {
  width: 100%;
  height: clamp(340px, 62vh, 720px);
  object-fit: cover;
}

/* Hero-Siegel: Logo mit rotierender Inschrift an der Naht Text/Foto */
.hero-seam {
  position: relative;
  z-index: 5;
  height: 0;
  max-width: 1600px;
  margin-inline: auto;
}
.hero-seal {
  position: absolute;
  right: clamp(24px, 6vw, 96px);
  top: 0;
  width: clamp(128px, 14vw, 200px);
  aspect-ratio: 1;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
}
.hero-seal img {
  width: 52%;
  height: 52%;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.45));
}
.hero-seal-ring {
  position: absolute;
  inset: 0;
  animation: sealSpin 45s linear infinite;
}
.hero-seal-ring text {
  font-family: var(--font-body);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  fill: var(--camel);
}
@keyframes sealSpin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-seal-ring { animation: none; }
}
@media (max-width: 560px) {
  .hero-seal { right: 16px; }
}

/* ---------- Marquee ---------- */
.marquee {
  background: var(--camel);
  color: var(--ink);
  overflow: hidden;
  padding: 13px 0 11px;
  border-block: 1px solid var(--ink);
}
.marquee-track {
  display: flex;
  gap: 0;
  width: max-content;
  animation: marqueeMove 30s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track > span {
  display: flex;
  gap: 2.5em;
  padding-right: 2.5em;
  white-space: nowrap;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--fs-small);
}
.marquee-track .dot { color: var(--ink); opacity: 0.55; }
@keyframes marqueeMove {
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* ---------- Sektionen allgemein ---------- */
.section { padding-block: var(--section); }
.section-head {
  margin-bottom: clamp(40px, 6vw, 96px);
}
.section-head .display { max-width: 12em; }
.section-head--split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-6);
}

/* ---------- Preisliste (Menue-Stil) ---------- */
.menu-list { list-style: none; }
.menu-item {
  padding-block: 22px;
  border-bottom: 1px solid var(--line-light);
}
.on-dark .menu-item { border-color: var(--line-dark); }
.menu-item:first-child { border-top: 1px solid var(--line-light); }
.on-dark .menu-item:first-child { border-color: var(--line-dark); }
.menu-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.menu-name {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: var(--fs-h3);
  letter-spacing: 0.02em;
  line-height: 1.05;
}
.menu-leader {
  flex: 1;
  border-bottom: 2px dotted var(--line-light);
  transform: translateY(-6px);
  min-width: 40px;
}
.on-dark .menu-leader { border-color: var(--line-dark); }
.menu-price {
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--camel-text); /* 5,57:1 auf paper - camel-deep waere 3,92:1 */
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.on-dark .menu-price { color: var(--camel); }
.menu-claim {
  color: rgba(23, 19, 16, 0.62);
  font-size: var(--fs-small);
  margin-top: 6px;
  letter-spacing: 0.04em;
}
.on-dark .menu-claim { color: var(--cream-dim); }

/* Services-Teaser Startseite: Liste + Foto */
.services-teaser-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.services-teaser-grid figure { margin: 0; position: sticky; top: 120px; }
.services-teaser-grid figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.services-teaser-grid figcaption {
  font-size: var(--fs-small);
  color: rgba(23,19,16,0.68);
  padding-top: 10px;
}
.services-teaser-cta { margin-top: var(--s-8); display: flex; gap: var(--s-4); flex-wrap: wrap; }

/* Preisliste 2-spaltig (Services-Seite) */
.menu-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(48px, 7vw, 112px);
  align-items: start;
}
@media (max-width: 860px) {
  .menu-cols { grid-template-columns: minmax(0, 1fr); }
}
/* ---------- Story / About-Band ---------- */
.story-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.story-grid figure { margin: 0; }
.story-grid figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* ---------- Bild-Slider ----------
   Die Buehne haelt das Seitenverhaeltnis, die Bilder liegen deckungsgleich
   uebereinander. Gewechselt wird ausschliesslich die Deckkraft: kein
   Nachladen von Layout, kein Sprung, kein Ruckeln beim Bildwechsel.
   Ohne JavaScript bleibt das erste Bild stehen, die Bedienleiste entfaellt. */
.pslide { margin: 0; position: relative; }
.pslide-stage {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ink-2);
}
.pslide-item {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 700ms var(--ease-out);
}
.pslide-item.is-active { opacity: 1; }
.story-grid .pslide-item img,
.pslide-item img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  display: block;
}
.pslide-ui {
  display: flex;
  align-items: center;
  gap: var(--s-3, 12px);
  margin-top: var(--s-4);
}
html.no-js .pslide-ui { display: none; }
.pslide-btn {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-dark);
  background: transparent;
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 1rem;
  cursor: pointer;
  transition: background 180ms var(--ease-out), border-color 180ms var(--ease-out);
}
.pslide-btn:hover { background: var(--ink-3); border-color: var(--camel); }
.pslide-btn:active { transform: scale(0.97); }
.pslide-dots { display: flex; gap: 8px; margin-left: auto; }
.pslide-dot {
  width: 34px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  display: grid;
  align-items: center;
  cursor: pointer;
}
.pslide-dot::before {
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  background: var(--line-dark);
  transition: background 200ms var(--ease-out);
}
.pslide-dot[aria-current="true"]::before { background: var(--camel); }
.pslide-dot:hover::before { background: var(--cream-dim); }
@media (prefers-reduced-motion: reduce) {
  .pslide-item { transition: opacity 1ms linear; }
}
.story-copy .script {
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  color: var(--camel);
  display: block;
  margin-top: var(--s-6);
  transform: rotate(-3deg);
}
.story-sign {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  margin-top: var(--s-4);
}
.story-seal {
  width: 88px;
  height: 88px;
  transform: rotate(-8deg);
  opacity: 0.92;
  flex: none;
}

.story-facts {
  list-style: none;
  margin-top: var(--s-8);
  display: grid;
  gap: 12px;
}
.story-facts li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  color: var(--cream-dim);
}
.story-facts li::before {
  content: '';
  width: 14px; height: 3px;
  background: var(--camel);
  flex: none;
  transform: translateY(-4px);
}

/* ---------- Testimonials ---------- */
.quotes { position: relative; }
.quote-stage {
  display: grid;
}
.quote {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.quote.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease 0.1s, visibility 0s;
}
.quote blockquote {
  /* Versalien in Mono ueber fuenf Zeilen waren die unleserlichste Kombination
     im ganzen System - jetzt Satzschreibung, normaler Schnitt, groesser. */
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1.125rem, 2vw, 1.6rem);
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--cream);
  max-width: 34ch;
  text-wrap: pretty;
}
.quote figcaption {
  margin-top: var(--s-6);
  color: var(--camel);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: var(--fs-small);
}
.quote-stars {
  color: var(--camel);
  letter-spacing: 0.3em;
  margin-bottom: var(--s-6);
}
.quote-nav {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-8);
}
.quote-btn {
  width: 52px; height: 52px;
  border: 1px solid var(--line-dark);
  background: none;
  color: var(--cream);
  font-size: 1.25rem;
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast), transform 0.16s var(--ease-out);
}
.quote-btn:active { transform: scale(0.95); }
.quote-btn:hover, .quote-btn:focus-visible { background: var(--cream); color: var(--ink); }
.quote-dots { display: flex; gap: 10px; }
.quote-dot {
  width: 32px; height: 4px;
  box-sizing: content-box;
  background: var(--line-dark);
  background-clip: padding-box;
  border: 12px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: background-color var(--t-fast);
}
.quote-dot.is-active { background-color: var(--camel); }
.quotes-meta {
  margin-top: var(--s-8);
  color: var(--cream-dim);
  font-size: var(--fs-small);
}

/* ---------- Galerie ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: dense;
  gap: clamp(6px, 0.9vw, 14px);
}
.gallery-bleed {
  max-width: none;
  padding-inline: clamp(16px, 3vw, 56px);
}
.gallery-bleed .gallery-grid {
  gap: clamp(14px, 1.8vw, 28px);
}
.gallery-grid.gallery-grid--teaser { grid-template-columns: repeat(4, 1fr); }
.gallery-grid--teaser .gallery-item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.gallery-grid--teaser .gallery-item:nth-child(6) { grid-column: span 2; }
.gallery-grid--teaser .gallery-item img { height: 100%; aspect-ratio: auto; }
@media (max-width: 860px) {
  .gallery-grid.gallery-grid--teaser { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid--teaser .gallery-item:nth-child(1) { grid-column: span 2; }
  .gallery-grid--teaser .gallery-item:nth-child(6) { grid-column: span 2; }
}
.gallery-item {
  margin: 0;
  position: relative;
  overflow: hidden;
  background: var(--ink-2);
  border: 0;
  padding: 0;
  cursor: zoom-in;
  display: block;
  width: 100%;
}
.gallery-item img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out), filter 0.5s ease;
}
@media (hover: hover) and (pointer: fine) {
  .gallery-item:hover img { transform: scale(1.04); }
}
.gallery-item:focus-visible img { transform: scale(1.04); }
.gallery-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(23,19,16,0.5), transparent 42%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .gallery-item:hover::after { opacity: 1; }
}
.gallery-item.is-wide { grid-column: span 2; }
.gallery-item.is-wide img { aspect-ratio: 8 / 5; }

/* Filter */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: var(--s-12);
}
.filter-btn {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 11px 20px 10px;
  border: 1px solid var(--line-light);
  background: none;
  color: var(--ink);
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform 0.16s var(--ease-out);
}
.filter-btn:hover { border-color: var(--ink); }
.filter-btn:active { transform: scale(0.96); }
.filter-btn.is-active { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.gallery-item {
  transition: opacity 0.25s var(--ease-out), display 0.25s allow-discrete;
}
@starting-style {
  .gallery-item { opacity: 0; }
}
.gallery-item.is-hidden { display: none; opacity: 0; }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(15, 12, 10, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 64px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s var(--ease-out), visibility 0s linear 0.25s;
}
.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s var(--ease-out), visibility 0s;
}
.lightbox img {
  max-width: 100%;
  max-height: calc(100vh - 120px);
  width: auto;
  height: auto;
  object-fit: contain;
  transform: scale(0.97);
  transition: transform 0.25s var(--ease-out);
}
.lightbox.is-open img { transform: scale(1); }
.lightbox-caption {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--cream-dim);
  font-size: var(--fs-small);
  text-align: center;
  max-width: 80vw;
}
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute;
  background: none;
  border: 1px solid var(--line-dark);
  color: var(--cream);
  width: 52px; height: 52px;
  cursor: pointer;
  font-size: 1.375rem;
  line-height: 1;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover,
.lightbox-close:focus-visible, .lightbox-prev:focus-visible, .lightbox-next:focus-visible {
  background: var(--cream);
  color: var(--ink);
}
.lightbox-close { top: 20px; right: 20px; }
.lightbox-close:active { transform: scale(0.95); }
.lightbox-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 20px; top: 50%; transform: translateY(-50%); }
.lightbox-prev:active, .lightbox-next:active { transform: translateY(-50%) scale(0.95); }

/* ---------- CTA-Band ---------- */
.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(120px, 22vh, 240px);
  color: var(--cream);
}
.cta-band picture, .cta-band > img {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.cta-band picture img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(23,19,16,0.88) 20%, rgba(23,19,16,0.55));
}
.cta-band .display { font-size: var(--fs-h2); max-width: 10em; }
.cta-band .cta-actions { margin-top: var(--s-8); display: flex; gap: var(--s-4); flex-wrap: wrap; }
.cta-meta {
  margin-top: var(--s-6);
  font-size: var(--fs-small);
  color: var(--cream-dim);
  font-variant-numeric: tabular-nums;
}

/* ---------- Karten (Services-Seite, Team) ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 3vw, 40px);
}
.svc-card {
  background: var(--paper);
  border: 1px solid var(--line-light);
  display: flex;
  flex-direction: column;
}
.on-dark .svc-card { background: var(--ink-2); border-color: rgba(178,143,119,0.16); }
.svc-card figure { margin: 0; overflow: hidden; }
.svc-card figure img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: grayscale(1) contrast(1.04);
  transition: transform 0.7s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .svc-card:hover figure img { transform: scale(1.04); }
}
.svc-card-body {
  padding: clamp(22px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}
/* Buchen-Link je Karte: bewusst kein zweiter Primaerbutton. Sechs identische
   camel Flaechen untereinander machen aus dem Akzent eine Tapete. */
.svc-book {
  margin-top: auto;
  padding-top: var(--s-4);
  align-self: flex-start;
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  min-height: 24px;
}
.svc-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.svc-card-head h2, .svc-card-head h3 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: var(--fs-h3);
  line-height: 1.05;
  letter-spacing: 0.02em;
}
.svc-price {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--camel);
  white-space: nowrap;
  font-size: 1.625rem;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.svc-card-body p { font-size: 0.96rem; color: rgba(23, 19, 16, 0.68); }
.on-dark .svc-card-body p { color: var(--cream-dim); }
@media (min-width: 861px) {
  /* gleiche Kartenhoehen: Textbereich reserviert konstant 3 Zeilen */
  .svc-card-body p { min-height: 4.5em; }
}
.svc-card .btn { align-self: flex-start; margin-top: auto; }

/* Team
   Flex statt Grid: Bei fuenf Karten laesst ein Grid in der letzten Reihe eine
   Luecke stehen. Flex mit `justify-content: center` zentriert den Rest, das
   Raster wirkt auf jeder Breite gesetzt statt abgeschnitten. */
.team-grid {
  --team-gap: clamp(20px, 2.6vw, 32px);
  --team-cols: 5;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--team-gap);
}
.team-card {
  position: relative;
  flex: 0 1 calc((100% - (var(--team-cols) - 1) * var(--team-gap)) / var(--team-cols));
}
.team-card figure {
  margin: 0;
  overflow: hidden;
  position: relative;
  background: var(--ink-2);
}
.team-card figure img {
  width: 100%;
  /* 2:3 wie die Originale: kein Kopfausschnitt, alle Karten gleich hoch. */
  aspect-ratio: 2 / 3;
  object-fit: cover;
  object-position: 50% 30%;
  /* Die gelieferten Portraets sind Schwarz-Weiss; der Filter zieht das eine
     Farbbild in dieselbe Serie. Kein Aufblenden zu Farbe beim Hover - das
     haette nur bei einer der fuenf Karten funktioniert. */
  filter: grayscale(1) contrast(1.04);
  transition: transform 0.7s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .team-card:hover figure img { transform: scale(1.03); }
}
.team-card-name {
  /* Kein Camel-Balken: die Signature bleibt Hero, Start-CTA und Unterseiten-H1
     vorbehalten. Auf einem Team-Namen wird sie zum Muster. */
  display: block;
  color: var(--cream);
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: var(--fs-h3);
  line-height: 1.05;
  letter-spacing: 0.02em;
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-dark);
}
.team-card-role {
  margin-top: 8px;
  color: var(--cream-dim);
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
/* Spezialisierung: eine Stufe leiser als die Rolle, aber in Camel, damit die
   Karte einen Anker hat, an dem das Auge haengen bleibt. */
.team-card-spec {
  margin-top: 4px;
  color: var(--camel);
  font-size: var(--fs-label);
  letter-spacing: 0.04em;
}

/* Werte-Zeile */
.value-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 48px);
}
.value-row article {
  border-top: 3px solid var(--camel);
  padding-top: var(--s-4);
}
.value-row h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 400;
  font-size: var(--fs-h3);
  margin-bottom: 8px;
}
.value-row p { font-size: 0.96rem; color: rgba(23,19,16,0.68); }
.on-dark .value-row p { color: var(--cream-dim); }

/* ---------- Unterseiten-Hero ---------- */
.page-hero {
  padding-top: clamp(130px, 20vh, 210px);
  padding-bottom: clamp(48px, 8vh, 96px);
}
.page-hero .display { font-size: var(--fs-h1); }
.page-hero .lead { margin-top: var(--s-6); color: var(--cream-dim); }

/* ---------- Buchen ---------- */
.booking-shell {
  background: var(--paper);
  color: var(--ink);
}
.booking-widget {
  /* 480px solange Planity deaktiviert ist; nach Aktivierung gerne auf 700px */
  min-height: 480px;
  background: #fff;
  border: 1px solid var(--line-light);
  padding: clamp(8px, 1.5vw, 24px);
  position: relative;
}
/* Planity bleibt weg, bis es nachweislich eine Buchungsstrecke rendert. */
.booking-widget.is-probing > #planity-booking { display: none; }

/* Gestaltete Ersatzkarte, solange die Online-Buchung nicht freigeschaltet ist */
.booking-offline {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 420px;
  text-align: center;
  gap: var(--s-4);
  padding: var(--s-8) var(--s-6);
}
.booking-offline strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: 1.1;
}
.booking-offline p { max-width: 34em; color: rgba(23, 19, 16, 0.68); }
.booking-offline .booking-offline-meta { font-size: var(--fs-small); }
.booking-note {
  margin-top: var(--s-6);
  font-size: var(--fs-small);
  color: rgba(23,19,16,0.62);
  max-width: 40em;
}
.booking-fallback {
  margin-top: var(--s-8);
  border: 1px solid var(--line-light);
  padding: var(--s-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  align-items: center;
  justify-content: space-between;
}

/* ---------- Kontakt ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.contact-grid figure { margin: 0; }
.contact-grid figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.contact-list { list-style: none; display: grid; gap: var(--s-6); }
.contact-list .k {
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--camel-text);
  font-weight: 700;
  display: block;
  margin-bottom: 4px;
}
.on-dark .contact-list .k { color: var(--camel); }
.contact-list a { text-decoration-color: var(--camel); text-underline-offset: 4px; }
.contact-list a:hover { color: var(--camel-text); }

.hours-table { border-collapse: collapse; width: 100%; max-width: 420px; }
.hours-table td {
  padding: 9px 0;
  border-bottom: 1px solid var(--line-light);
  vertical-align: top;
}
.on-dark .hours-table td { border-color: var(--line-dark); }
.hours-table td:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hours-table .closed { color: rgba(23,19,16,0.68); }
.on-dark .hours-table .closed { color: var(--cream-dim); }

/* Karte
   Die Karte laedt direkt. Der Graufilter haelt sie im Ton der Seite; der
   Balken darunter traegt Adresse und den Routen-Link, damit der Weg nach
   draussen genauso einen Klick weit ist wie der Weg in die Karte hinein. */
.map-frame { position: relative; background: var(--ink-2); }
.map-frame iframe {
  width: 100%;
  height: clamp(360px, 52vh, 520px);
  border: 0;
  display: block;
  filter: grayscale(1) contrast(1.05);
}
.map-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-6) var(--gutter);
  background: var(--ink-2);
  border-top: 1px solid var(--line-dark);
}
.map-bar-adresse {
  margin: 0;
  color: var(--cream);
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
}
.map-bar-actions { display: flex; flex-wrap: wrap; gap: var(--s-4); }

/* ---------- Rechtsseiten ---------- */
.legal {
  max-width: 680px;
  margin-inline: auto;
  padding-block: var(--s-12) var(--section);
}
.legal h1 { font-size: var(--fs-h2); margin-bottom: var(--s-8); }
.legal h2 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 400;
  font-size: var(--fs-h3);
  margin: var(--s-8) 0 var(--s-3);
}
.legal h3 { font-size: 1.0625rem; margin: var(--s-6) 0 var(--s-2); }
.legal p, .legal li { margin-bottom: var(--s-3); color: rgba(23,19,16,0.8); }
.legal ul { padding-left: 1.2em; }
.legal .placeholder {
  background: rgba(178, 143, 119, 0.22);
  padding: 1px 6px;
  font-weight: 700;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink);
  color: var(--cream);
  border-top: 3px solid var(--camel);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: clamp(28px, 4vw, 64px);
  padding-block: clamp(96px, 10vw, 160px) var(--s-16);
}
.footer-brand img { width: 72px; height: 72px; margin-bottom: var(--s-4); }
.footer-brand p { color: var(--cream-dim); font-size: var(--fs-small); max-width: 26em; }
.site-footer h2 {
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--camel);
  margin-bottom: var(--s-4);
  font-weight: 700;
}
.site-footer ul { list-style: none; display: grid; gap: 10px; font-size: 0.9375rem; }
.site-footer a { color: var(--cream); text-decoration: none; }
/* WCAG 2.2 Zielgroesse: die Footer-Links lagen bei 21-22px Hoehe. */
.site-footer li a, .footer-bottom a,
.nav-mobile-meta a, .map-direct {
  display: inline-block;
  min-height: 24px;
  padding-block: 3px;
}
.map-direct { color: var(--cream); }
.site-footer a:hover { color: var(--camel); text-decoration: underline; text-underline-offset: 4px; }
.footer-hours td { padding: 3px 0; font-size: 0.9375rem; color: var(--cream-dim); }
.footer-hours td:first-child { padding-right: 18px; }
.footer-bottom {
  border-top: 1px solid var(--line-dark);
  padding-block: var(--s-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-small);
  color: var(--cream-dim);
}
.footer-bottom nav { display: flex; gap: var(--s-6); }
.footer-social { display: flex; gap: var(--s-4); }
.footer-social a {
  width: 44px; height: 44px;
  border: 1px solid var(--line-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.footer-social a:hover { background: var(--camel); color: var(--ink); text-decoration: none; }
.footer-social svg { width: 18px; height: 18px; fill: currentColor; }

/* ---------- Video-Sektion („Press for Shave") ---------- */
.clip-section { overflow: hidden; background: var(--ink-3); }
.clip-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.clip-frame {
  position: relative;
  margin: 0;
  justify-self: end;
  width: min(100%, 420px);
  margin-right: calc(var(--gutter) * -1);
  background: var(--ink-2);
}
.clip-frame video {
  display: block;
  width: 100%;
  height: clamp(480px, 82vh, 720px);
  object-fit: cover;
}
.clip-frame figcaption {
  position: absolute;
  left: -14px;
  bottom: 26px;
  background: var(--camel);
  color: var(--ink);
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 7px 14px 6px;
}
.clip-copy .display { max-width: 8em; }
.clip-copy p { color: var(--cream-dim); max-width: 30em; margin-top: var(--s-6); }
.clip-mute {
  background: none;
  border: 1px solid var(--line-dark);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 11px 18px 10px;
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.clip-mute:hover, .clip-mute:focus-visible { background: var(--cream); color: var(--ink); }

/* ---------- Google-Bewertungs-Badge ---------- */
/* Bewertungs-Panel: steht neben dem Zitat, nicht als Randnotiz ueber der
   Ueberschrift - 5,0 aus 219 Rezensionen ist das staerkste Argument der Seite. */
.gbadge {
  display: grid;
  gap: var(--s-2);
  align-content: start;
  justify-items: start;
  border: 1px solid var(--line-dark);
  padding: var(--s-8) var(--s-6);
  text-decoration: none;
  transition: border-color var(--t-fast), background-color var(--t-fast);
}
.gbadge:hover, .gbadge:focus-visible { border-color: var(--camel); background: rgba(178, 143, 119, 0.08); }
.gbadge .g-num {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 6vw, 5.5rem);
  line-height: 0.85;
  color: var(--camel);
  font-variant-numeric: tabular-nums;
}
.gbadge .g-meta { font-size: var(--fs-small); color: var(--cream-dim); line-height: 1.5; }
.gbadge .g-stars { color: var(--camel); letter-spacing: 0.24em; font-size: 1rem; }
.gbadge .g-link {
  margin-top: var(--s-2);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cream);
  border-bottom: 1px solid var(--line-dark);
  padding-bottom: 3px;
}
.gbadge:hover .g-link { border-color: var(--camel); }

/* Zitat links, Bewertung rechts - statt einer halbleeren Buehne */
.quotes-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(240px, 0.8fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
@media (max-width: 860px) {
  .quotes-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-12); }
  .gbadge { justify-self: stretch; }
}

/* ---------- Instagram-Sektion ---------- */
.ig-tiles {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(8px, 1.2vw, 16px);
}
.ig-tiles a {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--ink-2);
}
.ig-tiles img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out), opacity 0.4s ease;
}
@media (hover: hover) and (pointer: fine) {
  .ig-tiles a:hover img { transform: scale(1.06); opacity: 0.85; }
}
.ig-tiles a:focus-visible img { transform: scale(1.06); opacity: 0.85; }
.ig-tiles a::after {
  content: '↗';
  position: absolute;
  right: 10px;
  bottom: 6px;
  color: var(--cream);
  font-size: 1.125rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.ig-tiles a:hover::after { opacity: 1; }
.ig-embed-consent {
  border: 1px solid var(--line-light);
  padding: var(--s-8);
  display: grid;
  gap: var(--s-4);
  justify-items: start;
  margin-top: var(--s-8);
}
.ig-embed-consent p { font-size: var(--fs-small); color: rgba(23, 19, 16, 0.65); max-width: 46em; }
.ig-embed-frame {
  margin-top: var(--s-8);
  background: #fff;
  border: 1px solid var(--line-light);
}
.ig-embed-frame iframe {
  width: 100%;
  height: clamp(680px, 85vh, 1000px);
  border: 0;
  display: block;
}

/* ---------- Instagram-Live-Grid (lokal gespeicherte Posts) ---------- */
.ig-live-grid { grid-template-columns: repeat(3, 1fr); }
a.gallery-item { text-decoration: none; cursor: pointer; }
/* Singles definieren die Zeilenhoehen (1:1), das grosse Bild fuellt seinen 2x2-Bereich absolut */
.ig-live-grid .gallery-item img {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.ig-live-grid .gallery-item.is-big {
  grid-column: span 2;
  grid-row: span 2;
  min-height: 100%;
}
.ig-live-grid .gallery-item.is-big img {
  position: absolute;
  inset: 0;
  height: 100%;
  aspect-ratio: auto;
}
.ig-live-grid .gallery-item::before {
  content: '↗';
  position: absolute;
  right: 12px;
  top: 10px;
  z-index: 1;
  color: var(--cream);
  font-size: 1.125rem;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
  .ig-live-grid .gallery-item:hover::before { opacity: 1; }
}
@media (max-width: 860px) {
  .ig-live-grid { grid-template-columns: repeat(2, 1fr); }
  .ig-live-grid .gallery-item:nth-child(6) { display: none; }
  .ig-live-grid .gallery-item.is-big { grid-column: span 2; grid-row: auto; min-height: 0; }
  .ig-live-grid .gallery-item.is-big img {
    position: static;
    aspect-ratio: 4 / 3;
    height: auto;
  }
}

/* ---------- Menue-Liste: Hover-Bildwechsel ---------- */
.menu-item[data-img] { cursor: default; transition: transform 0.35s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .menu-item[data-img]:hover { transform: translateX(10px); }
}
.menu-figure { position: relative; overflow: hidden; }
.menu-figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.45s ease;
}
.menu-figure img.is-front { opacity: 1; position: relative; }

/* ---------- .on-light-Overrides (nach allen on-dark-Regeln!) ---------- */
.on-light .label { color: var(--camel-text); }
.on-light .contact-list .k { color: var(--camel-text); }
.on-light :focus-visible, .booking-shell :focus-visible { outline-color: var(--ink); }
.on-light .btn--ghost { border-color: var(--line-light); color: var(--ink); }
.on-light .btn--ghost::before { background: var(--ink); }
.on-light .btn--ghost:hover, .on-light .btn--ghost:focus-visible { color: var(--cream); border-color: var(--ink); }
.on-light .menu-item, .on-light .menu-item:first-child { border-color: var(--line-light); }
.on-light .menu-leader { border-color: var(--line-light); }
.on-light .menu-price { color: var(--camel-text); }
.on-light .menu-claim { color: rgba(23, 19, 16, 0.62); }
.on-light .value-row p { color: rgba(23, 19, 16, 0.68); }
.on-light .svc-card { background: #fff; border-color: var(--line-light); }
.on-light .svc-card-body p { color: rgba(23, 19, 16, 0.68); }
.on-light .svc-price { color: var(--camel-text); }
.on-light .hours-table td { border-color: var(--line-light); }
.on-light .hours-table .closed { color: rgba(23, 19, 16, 0.68); }
.on-light .link-draw { color: var(--ink); }

/* Nur fuer Screenreader (die Klasse wurde bisher per Inline-Style nachgebaut) */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- SEO-Unterseiten: Fakten, Textbloecke, FAQ ---------- */
.seo-kurz-title {
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--camel-text);
  font-weight: 700;
  margin-bottom: var(--s-4);
}
.seo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: start;
}
.seo-facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--s-3) var(--s-6);
  border-top: 1px solid var(--line-light);
  padding-top: var(--s-6);
}
.seo-facts dt {
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--camel-text);
  font-weight: 700;
  padding-top: 2px;
}
.seo-facts dd { font-size: var(--fs-small); }
.seo-cta { margin-top: var(--s-8); display: flex; gap: var(--s-4); flex-wrap: wrap; }
.seo-figure { margin: 0; }
.seo-figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* Hochformat-Vorlagen bekommen einen stehenden Rahmen statt eines Beschnitts */
.seo-figure--hoch img { aspect-ratio: 3 / 4; object-position: 50% 35%; }

.seo-block { margin-top: clamp(48px, 7vw, 96px); max-width: 42em; }
.seo-block h2 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: var(--fs-h3);
  line-height: 1.1;
  letter-spacing: 0.02em;
  margin-bottom: var(--s-4);
}
.seo-block p + p { margin-top: var(--s-4); }
.seo-block p { text-wrap: pretty; }
.seo-list { display: grid; gap: var(--s-4); }
.seo-list dt { font-weight: 700; }
.seo-list dd {
  color: rgba(23, 19, 16, 0.68);
  font-size: var(--fs-small);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line-light);
}
.seo-list dd:last-child { border-bottom: 0; padding-bottom: 0; }

.faq-list { display: grid; max-width: 46em; }
.faq-item { border-top: 1px solid var(--line-dark); }
.faq-item:last-child { border-bottom: 1px solid var(--line-dark); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: var(--s-4) 40px var(--s-4) 0;
  min-height: 48px;
  font-weight: 700;
  position: relative;
  transition: color var(--t-fast) var(--ease-out);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--camel);
  transition: transform var(--t-fast) var(--ease-out);
}
.faq-item[open] summary::after { content: '−'; }
.faq-item summary:hover, .faq-item summary:focus-visible { color: var(--camel); }
.faq-answer { padding: 0 40px var(--s-6) 0; color: var(--cream-dim); max-width: 42em; }

.seo-weiter { margin-top: clamp(48px, 7vw, 96px); }
.seo-weiter h2 {
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--camel);
  margin-bottom: var(--s-4);
}
.seo-weiter ul { list-style: none; display: grid; gap: var(--s-2); }
.seo-weiter a {
  display: inline-block;
  min-height: 24px;
  padding-block: 4px;
  text-decoration: none;
  border-bottom: 1px solid var(--line-dark);
  transition: border-color var(--t-fast), color var(--t-fast);
}
.seo-weiter a:hover, .seo-weiter a:focus-visible { color: var(--camel); border-color: var(--camel); }

@media (max-width: 860px) {
  .seo-grid { grid-template-columns: minmax(0, 1fr); }
  .seo-facts { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
  .seo-facts dt { padding-top: var(--s-3); }
}

/* Dezente Seitenliste im Footer */
.footer-seo {
  border-top: 1px solid var(--line-dark);
  padding-block: var(--s-8) var(--s-6);
}
.footer-seo-cols {
  display: grid;
  /* auto-fit statt fester Dreierteilung: seit R10 gibt es eine vierte Spalte
     („Friseur in Weil am Rhein"), und es sollen weitere dazukommen duerfen. */
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--s-6) var(--s-8);
}
.footer-seo h3 {
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(239, 227, 215, 0.55);
  font-weight: 400;
  margin-bottom: var(--s-3);
}
.footer-seo ul { list-style: none; display: grid; gap: 2px; }
.footer-seo a {
  display: inline-block;
  min-height: 24px;
  padding-block: 3px;
  font-size: var(--fs-small);
  color: var(--cream-dim);
  text-decoration: none;
}
.footer-seo a:hover, .footer-seo a:focus-visible { color: var(--camel); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 700px) {
  .footer-seo-cols { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Sticky-Termin-Button ---------- */
.sticky-book {
  position: fixed;
  right: clamp(16px, 2.5vw, 32px);
  bottom: clamp(16px, 2.5vw, 32px);
  z-index: 90;
  transform: translateY(150%);
  opacity: 0;
  background: var(--camel);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  padding: 16px 26px 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  transition: transform 0.45s var(--ease-snap), opacity 0.3s ease, background-color 0.3s var(--ease-out);
}
.sticky-book--in { transform: none; opacity: 1; }
.sticky-book--in:active { transform: scale(0.97); }
.sticky-book:hover, .sticky-book:focus-visible { background: var(--cream); }
.sticky-book:active { transform: scale(0.97); }
@media (min-width: 561px) {
  /* Pill darf die Footer-Links unten rechts nicht verdecken */
  body:has(.sticky-book) .footer-bottom { padding-right: 230px; }
}
@media (max-width: 560px) {
  .sticky-book {
    right: 0;
    bottom: 0;
    left: 0;
    text-align: center;
    padding: 16px 20px calc(15px + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.3);
  }
  body:has(.sticky-book) .site-footer { padding-bottom: 64px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .services-teaser-grid, .story-grid, .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .clip-grid { grid-template-columns: 1fr; }
  .clip-frame { justify-self: start; width: min(100%, 340px); margin-right: 0; }
  .clip-frame video { height: auto; max-height: 70vh; }
  .ig-tiles { grid-template-columns: repeat(3, 1fr); }
  .services-teaser-grid figure { position: static; max-width: 560px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* Team: fuenf, drei, zwei, eins. Die letzte Reihe zentriert sich selbst. */
@media (max-width: 1080px) { .team-grid { --team-cols: 3; } }
@media (max-width: 700px)  { .team-grid { --team-cols: 2; } }
@media (max-width: 460px)  { .team-grid { --team-cols: 1; } }
@media (max-width: 460px)  { .team-card { max-width: 380px; } }

@media (max-width: 860px) {
  .nav-desktop { display: none; }
  .nav-toggle { display: block; }
  .nav-book { display: inline-flex; }
  .nav-open .nav-book { opacity: 0; pointer-events: none; }
  .header-inner { gap: var(--s-3); }
  /* Mobil bleibt der Header immer erreichbar (Menue-Zugang!) */
  .site-header.header--hidden { transform: none; }
  .site-header { background: rgba(23, 19, 16, 0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .card-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-item.is-wide { grid-column: span 2; }
}

@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; padding-block: var(--s-16) var(--s-8); }
  .hero-figure img { height: 52vh; }
  .value-row { grid-template-columns: 1fr; }
  .lightbox-prev, .lightbox-next { display: none; }
}

@media (max-width: 480px) {
  /* Space Mono laeuft mit 0,6em pro Zeichen: bei 17px passen auf 390px nur
     33 Zeichen in eine Zeile. 16px + schmalerer Gutter holen ~37 heraus.
     Mehr gibt eine Monospace auf dieser Breite nicht her. */
  :root { --fs-body: 1rem; --gutter: 16px; }
  /* Preiszeilen: Mono braucht Platz — kompakter setzen statt clippen */
  .menu-name { font-size: 1.375rem; }
  .menu-row { gap: 10px; }
  .menu-leader { min-width: 16px; }
  .menu-price { font-size: 1rem; }
  /* Quote-Navigation passt sonst nicht in 350px */
  .quote-btn { width: 48px; height: 48px; flex: none; }
  .quote-dots { gap: 6px; }
  .quote-dot {
    width: 20px;
    border-left-width: 6px;
    border-right-width: 6px;
    border-top-width: 22px;
    border-bottom-width: 22px;
  }
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js .reveal, .js .reveal-bar .bar-word::before {
    opacity: 1 !important;
    transform: none !important;
    transition-delay: 0s !important;
  }
  .sticky-book { transform: none; opacity: 1; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .intro, .marquee, .cta-band, .site-footer .footer-social { display: none; }
}