/* ============================================================
   SOCIETY HAIRSTYLIST by Adem Özakan — Köln
   Konzept „Der Spiegelsaal": Smaragd-Patina, Messing-Haarlinien,
   Spiegelrahmen als Bildbühne. Siehe .impeccable.md
   ============================================================ */

:root {
  --nacht: #0c1f19;
  --nacht-tief: #081511;
  --tanne: #14382c;
  --patina: #2e6b52;
  --messing: #c9a96a;
  --messing-hell: #e2c891;
  --gold-tief: #9a7b45;
  --porzellan: #f4f1e9;
  --porzellan-dim: rgba(244, 241, 233, 0.72);
  --tinte: #151715;
  --tinte-dim: rgba(21, 23, 21, 0.68);
  --hairline: rgba(201, 169, 106, 0.38);
  --hairline-soft: rgba(201, 169, 106, 0.2);

  --display: "Gloock", "Times New Roman", serif;
  --grotesk: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;

  --w-max: 1240px;
  --pad-x: clamp(20px, 4vw, 56px);
  --sek-y: clamp(88px, 12vh, 150px);

  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--grotesk);
  font-size: 16px;
  line-height: 1.65;
  color: var(--porzellan);
  background: var(--nacht);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: inherit; text-decoration: none; }

::selection { background: var(--messing); color: var(--nacht-tief); }

/* ---------- Typo-Bausteine ---------- */

.brow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--messing);
}

h1, h2, h3 { font-family: var(--display); font-weight: 400; }

.h-display {
  font-size: clamp(44px, 7.2vw, 96px);
  line-height: 1.02;
  letter-spacing: 0.005em;
}

.h-sektion {
  font-size: clamp(32px, 4.6vw, 58px);
  line-height: 1.08;
}

.h-karte {
  font-size: clamp(21px, 2vw, 26px);
  line-height: 1.2;
}

.vorwort {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.7;
  max-width: 56ch;
}

.dim { color: var(--porzellan-dim); }

/* ---------- Wrapper ---------- */

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

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

/* ---------- Navigation ---------- */

.nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 60;
  transition: background 0.4s, border-color 0.4s, transform 0.4s;
  border-bottom: 1px solid transparent;
}

/* Blur liegt auf dem Pseudo-Element: backdrop-filter direkt auf .nav würde
   .nav zum Containing Block für das fixierte Mobilmenü machen (Menü klebt
   dann am 70px-Nav statt am Viewport — Bug nach dem Scrollen). */
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.nav.fest {
  background: rgba(8, 21, 17, 0.86);
  border-bottom-color: var(--hairline-soft);
}

.nav.fest::before {
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.nav-innen {
  max-width: var(--w-max);
  margin-inline: auto;
  padding: 18px var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.nav-logo img { height: 34px; width: auto; }

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 34px);
  list-style: none;
}

.nav-links a {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--porzellan-dim);
  transition: color 0.25s;
}

.nav-links a:hover { color: var(--messing-hell); }

.nav-cta {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--messing);
  border: 1px solid var(--hairline);
  padding: 10px 20px;
  transition: background 0.25s, color 0.25s;
  white-space: nowrap;
}

.nav-cta:hover { background: var(--messing); color: var(--nacht-tief); }

.nav-burger {
  display: none;
  background: none;
  border: 1px solid var(--hairline);
  width: 44px;
  height: 44px;
  cursor: pointer;
  position: relative;
  z-index: 70;
}

.nav-burger span,
.nav-burger::before,
.nav-burger::after {
  content: "";
  display: block;
  width: 20px;
  height: 1px;
  background: var(--messing);
  margin: 5px auto;
  transition: transform 0.4s var(--ease-out), opacity 0.3s ease;
}

.nav-burger span { margin-block: 0; }

body.menu-offen .nav-burger::before { transform: translateY(6px) rotate(45deg); }
body.menu-offen .nav-burger::after { transform: translateY(-6px) rotate(-45deg); }
body.menu-offen .nav-burger span { opacity: 0; }

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

.held {
  min-height: 100svh;
  display: grid;
  align-items: end;
  position: relative;
  isolation: isolate;
  padding-top: 120px;
  background:
    radial-gradient(120% 90% at 82% 10%, rgba(46, 107, 82, 0.35), transparent 55%),
    radial-gradient(90% 70% at 8% 88%, rgba(46, 107, 82, 0.22), transparent 60%),
    var(--nacht);
}

.held::before {
  /* Patina-Korn: feines Rauschen wie die Spachtelwand */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.79 0 0 0 0 0.66 0 0 0 0 0.42 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.held-innen {
  max-width: var(--w-max);
  margin-inline: auto;
  padding: 0 var(--pad-x) clamp(56px, 9vh, 110px);
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: end;
}

.held-copy .brow { display: block; margin-bottom: 26px; }

.held-copy h1 { color: var(--porzellan); }

.held-copy h1 em {
  font-style: normal;
  color: var(--messing-hell);
}

.held-sub {
  margin-top: 28px;
  max-width: 46ch;
  font-size: clamp(15px, 1.3vw, 18px);
  color: var(--porzellan-dim);
}

.held-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 40px;
}

.knopf {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.07em;
  padding: 16px 30px;
  border: 1px solid var(--messing);
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}

.knopf.voll { background: var(--messing); color: var(--nacht-tief); }
.knopf.voll:hover { background: var(--messing-hell); border-color: var(--messing-hell); }

.knopf.geist { color: var(--messing); border-color: var(--hairline); }
.knopf.geist:hover { border-color: var(--messing); color: var(--messing-hell); }

/* Hero- und Kontakt-CTAs: kompakter als die Abschluss-Buttons und immer nebeneinander. */
.held .held-ctas,
.kontakt-ctas {
  gap: 10px;
  flex-wrap: nowrap;
}

.held .held-ctas { margin-top: 34px; }

.held .knopf,
.kontakt-ctas .knopf {
  font-size: 13px;
  letter-spacing: 0.06em;
  padding: 13px 22px;
  white-space: nowrap;
}

.held-trust {
  margin-top: 44px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--porzellan-dim);
}

.sterne { color: var(--messing); letter-spacing: 3px; font-size: 13px; }

/* Der Spiegelrahmen */

.rahmen {
  display: block;
  position: relative;
  border: 1px solid var(--hairline);
  padding: 10px;
  background: rgba(8, 21, 17, 0.4);
}

.rahmen::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid var(--hairline-soft);
  pointer-events: none;
  z-index: 2;
  transition: border-color 0.4s;
}

.rahmen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.held-bild { position: relative; }

.held-bild .rahmen {
  aspect-ratio: 4 / 5;
  display: block;
}

.held-bild figcaption {
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(244, 241, 233, 0.42);
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

/* Boden-Haarlinie unter dem Hero-Bild */
.held-innen::after {
  content: "";
  position: absolute;
  left: var(--pad-x);
  right: var(--pad-x);
  bottom: clamp(36px, 6vh, 72px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline) 12%, var(--hairline) 88%, transparent);
  z-index: -1;
}

.held-innen { position: relative; }

/* ---------- Trust-Band (Laufband) ---------- */
/* 4 identische Spuren; Animation bis -50 % = exakt 2 Spuren → nahtlose Schleife,
   Spurbreite ×2 deckt auch sehr breite Viewports. */

.band {
  border-block: 1px solid var(--hairline-soft);
  background: var(--nacht-tief);
  overflow: hidden;
}

.band-lauf {
  display: flex;
  width: max-content;
  animation: band-zug 48s linear infinite;
}

.band:hover .band-lauf { animation-play-state: paused; }

.band-spur {
  display: flex;
  align-items: center;
  list-style: none;
  padding-block: 20px;
}

.band-spur li {
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--porzellan-dim);
}

.band-spur li b { color: var(--porzellan); font-weight: 500; }

.band-spur li::after {
  content: "·";
  color: var(--messing);
  margin-inline: clamp(26px, 3.5vw, 54px);
}

@keyframes band-zug {
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .band-lauf { animation: none; width: auto; }
  .band-spur { flex-wrap: wrap; justify-content: center; gap: 10px 0; padding-inline: var(--pad-x); }
  .band-spur[aria-hidden="true"] { display: none; }
  .band-spur li:last-child::after { content: none; }
}

/* ---------- Spiegelgalerie (Leistungen) ---------- */

.galerie-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(48px, 6vw, 80px);
}

.galerie-kopf .brow { display: block; margin-bottom: 18px; }

.spiegelreihe {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(12px, 1.5vw, 22px);
  position: relative;
}

/* die gemeinsame Bodenlinie, auf der die Spiegel stehen */
.spiegelreihe::after {
  content: "";
  position: absolute;
  left: -6%;
  right: -6%;
  bottom: 100px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline) 8%, var(--hairline) 92%, transparent);
}

.spiegel {
  display: block;
  position: relative;
}

.spiegel .rahmen {
  aspect-ratio: 3 / 4.6;
  overflow: hidden;
}

.spiegel .rahmen img {
  filter: saturate(0.92) brightness(0.88);
  transition: filter 0.5s var(--ease-out), transform 0.9s var(--ease-out);
}

.spiegel:hover .rahmen img,
.spiegel:focus-visible .rahmen img {
  filter: saturate(1) brightness(1);
  transform: scale(1.035);
}

.spiegel:hover .rahmen::before { border-color: var(--messing); }

.spiegel-schild {
  display: block;
  margin-top: 18px;
  text-align: center;
}

.spiegel-schild .name {
  display: block;
  font-family: var(--display);
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.2;
  color: var(--porzellan);
  white-space: nowrap;
}

.spiegel-schild .ab {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--messing);
}

.spiegel-schild .mehr {
  display: inline-block;
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--porzellan-dim);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 2px;
  transition: color 0.25s, border-color 0.25s;
}

.spiegel:hover .mehr { color: var(--messing-hell); border-color: var(--messing); }

/* ---------- Feature (Brautstyling) ---------- */

.feature {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}

.feature .rahmen { aspect-ratio: 4 / 5; overflow: hidden; }

.feature-copy .brow { display: block; margin-bottom: 18px; }

.feature-copy h2 { margin-bottom: 24px; }

.feature-copy p + p { margin-top: 16px; }

.feature-fakten {
  list-style: none;
  margin-top: 32px;
  border-top: 1px solid var(--hairline-soft);
}

.feature-fakten li {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline-soft);
  font-size: 14px;
}

.feature-fakten li span:first-child { color: var(--porzellan-dim); }
.feature-fakten li span:last-child { text-align: right; }

.feature-copy .knopf { margin-top: 34px; }

/* ---------- Atelier (helle Sektion) ---------- */

.hell {
  background: var(--porzellan);
  color: var(--tinte);
}

.hell .brow { color: var(--gold-tief); }
.hell .dim { color: var(--tinte-dim); }
.hell .rahmen { border-color: rgba(154, 123, 69, 0.5); background: #fff; }
.hell .rahmen::before { border-color: rgba(154, 123, 69, 0.28); }

.atelier-kopf { max-width: 720px; margin-bottom: clamp(48px, 6vw, 80px); }
.atelier-kopf .brow { display: block; margin-bottom: 18px; }
.atelier-kopf p { margin-top: 22px; }

/* Studio-Karussell — Pfeile steuern, Wischen macht der native Scroll-Container. */

.karussell { --luecke: clamp(16px, 2.4vw, 28px); }

.karussell-spur {
  display: flex;
  gap: var(--luecke);
  list-style: none;
  overflow-x: auto;
  /* proximity statt mandatory: mandatory lässt manche mobilen Browser die
     Geste auf dieser Achse entschlossener „einfangen" — proximity ist
     zurückhaltender und lässt vertikales Scrollen leichter durch. */
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Hinweis für den Browser, dass diese Fläche in erster Linie horizontal
   gedacht ist (hilft z. B. beim performanten Start eindeutig waagrechter
   Wischgesten). Reicht allein NICHT aus, um senkrechtes Wischen an die
   Seite durchzureichen — dafür sorgt die touchmove-Logik in site.js
   (preventDefault + manuelles window.scrollBy bei erkannter Vertikal-
   bewegung), siehe Kommentar dort für die Begründung. */
.karussell-spur,
.karussell-spur * {
  touch-action: pan-x;
}

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

.karussell-dia img {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
}

.karussell-dia {
  flex: 0 0 calc((100% - var(--luecke)) / 2);
  scroll-snap-align: start;
}

.karussell-dia .rahmen { aspect-ratio: 3 / 4; overflow: hidden; }

.karussell-dia figcaption {
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--messing);
}

.hell .karussell-dia figcaption { color: var(--gold-tief); }

.karussell-leiste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: clamp(26px, 3vw, 36px);
  padding-top: 22px;
  border-top: 1px solid var(--hairline-soft);
}

.hell .karussell-leiste { border-top-color: rgba(154, 123, 69, 0.28); }

/* Schiene = minimaler Fortschrittsbalken: Breite zeigt den sichtbaren Anteil. */
.karussell-schiene {
  position: relative;
  flex: 1;
  max-width: 220px;
  height: 1px;
  background: rgba(201, 169, 106, 0.22);
}

.hell .karussell-schiene { background: rgba(154, 123, 69, 0.25); }

.karussell-schiene::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos, 0%);
  width: var(--breite, 50%);
  background: var(--messing);
  transition: left 0.25s var(--ease-out), width 0.25s var(--ease-out);
}

.hell .karussell-schiene::after { background: var(--gold-tief); }

.karussell-pfeile { display: flex; gap: 10px; }

.pfeil {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  background: none;
  border: 1px solid var(--hairline);
  color: var(--messing);
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s, opacity 0.25s;
}

.pfeil svg { width: 20px; height: 12px; }

.pfeil:hover:not(:disabled) {
  background: var(--messing);
  color: var(--nacht-tief);
  border-color: var(--messing);
}

.pfeil:disabled { opacity: 0.28; cursor: default; }

.hell .pfeil { border-color: rgba(154, 123, 69, 0.5); color: var(--gold-tief); }

.hell .pfeil:hover:not(:disabled) {
  background: var(--gold-tief);
  color: var(--porzellan);
  border-color: var(--gold-tief);
}

/* Team */

.team {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 36px);
}

.team-karte .rahmen { aspect-ratio: 3 / 3.6; overflow: hidden; }

.team-karte .rahmen img { filter: saturate(0.95); }

.team-karte h3 {
  margin-top: 18px;
  font-size: clamp(20px, 1.8vw, 24px);
}

.team-karte .rolle {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--messing);
}

.team-karte p { margin-top: 12px; font-size: 14px; color: var(--porzellan-dim); }

.hell .team-karte .rolle { color: var(--gold-tief); }
.hell .team-karte p { color: var(--tinte-dim); }

/* Platzhalter-Panel (Foto folgt) */

.platzhalter {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(90% 70% at 50% 20%, rgba(46, 107, 82, 0.5), transparent 70%),
    var(--tanne);
  color: var(--messing);
}

.platzhalter span {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: 1px solid var(--hairline);
  padding: 10px 16px;
}

/* ---------- Stimmen ---------- */

.stimmen-kopf { text-align: center; max-width: 640px; margin-inline: auto; margin-bottom: clamp(48px, 6vw, 84px); }
.stimmen-kopf .brow { display: block; margin-bottom: 18px; }

.zitat-gross {
  max-width: 880px;
  margin-inline: auto;
  text-align: center;
  padding-bottom: clamp(48px, 6vw, 84px);
}

.zitat-gross blockquote {
  font-family: var(--display);
  font-size: clamp(24px, 3.2vw, 40px);
  line-height: 1.3;
  color: var(--porzellan);
}

.zitat-gross blockquote em { color: var(--messing-hell); font-style: normal; }

.zitat-gross figcaption { margin-top: 22px; font-size: 13px; color: var(--porzellan-dim); }

.stimmen-gitter {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 26px);
}

.stimme {
  border: 1px solid var(--hairline-soft);
  padding: clamp(22px, 2.4vw, 32px);
  background: rgba(20, 56, 44, 0.35);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.stimme p { font-size: 14.5px; color: var(--porzellan-dim); flex: 1; }

.stimme .wer {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--porzellan);
}

.stimmen-fuss { text-align: center; margin-top: clamp(36px, 5vw, 56px); }

.stimmen-fuss a {
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--messing);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 3px;
}

.stimmen-fuss a:hover { color: var(--messing-hell); }

/* ---------- Kontakt ---------- */

.kontakt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}

.kontakt-copy .brow { display: block; margin-bottom: 18px; }
.kontakt-copy h2 { margin-bottom: 26px; }

.kontakt-zeilen { list-style: none; margin-top: 30px; }

.kontakt-zeilen li {
  display: flex;
  gap: 18px;
  padding: 15px 0;
  border-bottom: 1px solid var(--hairline-soft);
  font-size: 15px;
  align-items: baseline;
}

.kontakt-zeilen .k-label {
  flex: 0 0 110px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--messing);
}

.kontakt-zeilen a:hover { color: var(--messing-hell); }

/* Uhrzeile — Öffnungszeiten mit römischen Ziffern (die goldene Salonuhr) */

.uhr { list-style: none; margin-top: 30px; }

.uhr li {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline-soft);
  font-size: 14.5px;
}

.uhr .num {
  flex: 0 0 34px;
  font-family: var(--display);
  font-size: 15px;
  color: var(--messing);
}

.uhr .tag { flex: 1; color: var(--porzellan-dim); }
.uhr .zeit { color: var(--porzellan); }
.uhr .zu .zeit { color: rgba(244, 241, 233, 0.4); }

.kontakt-bild .rahmen { aspect-ratio: 3 / 4; overflow: hidden; }

.kontakt-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* ---------- Footer ---------- */

.fuss {
  border-top: 1px solid var(--hairline-soft);
  background: var(--nacht-tief);
  padding: clamp(48px, 6vw, 72px) 0 36px;
}

.fuss-innen {
  max-width: var(--w-max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.fuss-oben {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--hairline-soft);
}

.fuss-logo img { height: 44px; width: auto; }

.fuss-nav { display: flex; flex-wrap: wrap; gap: 12px 28px; list-style: none; }

.fuss-nav a { font-size: 13px; color: var(--porzellan-dim); }
.fuss-nav a:hover { color: var(--messing-hell); }

.fuss-unten {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 28px;
  padding-top: 26px;
  font-size: 12px;
  color: rgba(244, 241, 233, 0.4);
}

.fuss-unten a:hover { color: var(--messing-hell); }

/* ---------- Unterseiten ---------- */

.us-kopf {
  padding: clamp(150px, 22vh, 220px) 0 clamp(56px, 8vw, 90px);
  background:
    radial-gradient(110% 80% at 85% 0%, rgba(46, 107, 82, 0.32), transparent 55%),
    var(--nacht);
  border-bottom: 1px solid var(--hairline-soft);
}

.us-kopf .brow { display: block; margin-bottom: 20px; }

.us-kopf h1 { font-size: clamp(40px, 6vw, 78px); line-height: 1.04; }

.us-kopf .vorwort { margin-top: 26px; }

.us-fakten {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
  margin-top: 38px;
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--porzellan-dim);
}

.us-fakten b { color: var(--messing); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; font-size: 11px; display: block; margin-bottom: 4px; }

/* Galerie-Gitter der Unterseiten */

.werk-gitter {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 26px);
}

.werk-gitter .rahmen { aspect-ratio: 3 / 4; overflow: hidden; }

.werk-gitter .rahmen img {
  filter: saturate(0.95) brightness(0.94);
  transition: filter 0.5s var(--ease-out), transform 0.9s var(--ease-out);
}

.werk-gitter .rahmen:hover img { filter: none; transform: scale(1.03); }

.werk-gitter .breit { grid-column: span 2; aspect-ratio: auto; }

/* Preisliste */

.preise-kopf { max-width: 640px; margin-bottom: clamp(40px, 5vw, 64px); }
.preise-kopf .brow { display: block; margin-bottom: 16px; }
.preise-kopf p { margin-top: 18px; }

.preisliste { list-style: none; max-width: 760px; }

.preisliste li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(21, 23, 21, 0.14);
}

.preisliste .p-name { font-weight: 500; }

.preisliste .p-info { font-size: 13px; color: var(--tinte-dim); }

.preisliste .p-punkte {
  flex: 1;
  border-bottom: 1px dotted rgba(154, 123, 69, 0.55);
  transform: translateY(-4px);
}

.preisliste .p-preis {
  font-family: var(--display);
  font-size: 19px;
  white-space: nowrap;
}

.preis-note { margin-top: 26px; font-size: 13px; color: var(--tinte-dim); max-width: 62ch; }

/* Ablauf-Liste */

.ablauf {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 40px);
  counter-reset: schritt;
}

.schritt {
  border-top: 1px solid var(--hairline);
  padding-top: 22px;
}

.schritt::before {
  counter-increment: schritt;
  content: counter(schritt, upper-roman);
  font-family: var(--display);
  font-size: 15px;
  color: var(--messing);
  display: block;
  margin-bottom: 14px;
}

.schritt h3 { font-size: 20px; margin-bottom: 10px; }
.schritt p { font-size: 14.5px; color: var(--porzellan-dim); }

/* CTA-Band */

.cta-band {
  text-align: center;
  border-top: 1px solid var(--hairline-soft);
  background:
    radial-gradient(80% 100% at 50% 120%, rgba(46, 107, 82, 0.4), transparent 70%),
    var(--nacht-tief);
}

.cta-band .brow { display: block; margin-bottom: 20px; }

.cta-band h2 { max-width: 20ch; margin-inline: auto; }

.cta-band p { max-width: 52ch; margin: 22px auto 0; color: var(--porzellan-dim); }

.cta-band .held-ctas { justify-content: center; }

/* Zitat-Einschub auf Unterseiten */

.us-zitat {
  max-width: 780px;
  margin-inline: auto;
  text-align: center;
}

.us-zitat blockquote {
  font-family: var(--display);
  font-size: clamp(21px, 2.6vw, 32px);
  line-height: 1.35;
}

.us-zitat figcaption { margin-top: 18px; font-size: 13px; color: var(--porzellan-dim); }

/* Querverweise */

.quer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 26px);
}

.quer .spiegel .rahmen { aspect-ratio: 3 / 3.4; }

/* ---------- Strähnen-Rechner (extensions.html) ---------- */

.rechner {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  border: 1px solid var(--hairline-soft);
  background: rgba(8, 21, 17, 0.55);
}

.rechner-links {
  padding: clamp(28px, 4vw, 56px);
  border-right: 1px solid var(--hairline-soft);
}

.rechner-rechts { padding: clamp(28px, 4vw, 56px); }

.rechner .brow { display: block; margin-bottom: 18px; }

.rechner h2 {
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.15;
  margin-bottom: 36px;
}

.feld-label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--messing);
  margin-bottom: 12px;
}

.rechner select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: var(--nacht-tief) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23c9a96a' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 18px center;
  border: 1px solid var(--hairline);
  color: var(--porzellan);
  font: 500 15px/1.4 var(--grotesk);
  padding: 16px 48px 16px 18px;
  cursor: pointer;
}

.rechner select:focus-visible { outline: 2px solid var(--messing); outline-offset: 2px; }

.menge-kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-top: 38px;
}

.menge-kopf .feld-label { margin-bottom: 0; }

.menge-wert {
  font-family: var(--display);
  font-size: clamp(24px, 2.2vw, 32px);
  color: var(--porzellan);
  line-height: 1;
}

.regler {
  --fuell: 50%;
  width: 100%;
  margin-top: 20px;
  appearance: none;
  -webkit-appearance: none;
  height: 20px;
  background: transparent;
  cursor: pointer;
}

.regler::-webkit-slider-runnable-track {
  height: 2px;
  background: linear-gradient(to right, var(--messing) var(--fuell), rgba(201, 169, 106, 0.25) var(--fuell));
}

.regler::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -8px;
  border-radius: 50%;
  background: var(--messing);
  border: 3px solid var(--nacht-tief);
  box-shadow: 0 0 0 1px var(--messing);
}

.regler::-moz-range-track {
  height: 2px;
  background: linear-gradient(to right, var(--messing) var(--fuell), rgba(201, 169, 106, 0.25) var(--fuell));
}

.regler::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--messing);
  border: 3px solid var(--nacht-tief);
  box-shadow: 0 0 0 1px var(--messing);
}

.regler:focus-visible { outline: 2px solid var(--messing); outline-offset: 4px; }

.chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

.chip {
  background: none;
  border: 1px solid var(--hairline-soft);
  color: var(--porzellan-dim);
  font: 500 11px/1 var(--grotesk);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 13px 16px;
  cursor: pointer;
  transition: border-color 0.25s, color 0.25s;
}

.chip:hover { border-color: var(--messing); color: var(--messing-hell); }

.preis-gross {
  font-family: var(--display);
  font-size: clamp(56px, 7vw, 92px);
  line-height: 1;
  color: var(--messing-hell);
  margin-top: 6px;
}

.preis-gross .euro { font-size: 0.42em; }

.preis-zeile { margin-top: 20px; font-size: 15px; color: var(--messing); }

.rechner-note {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--porzellan-dim);
  max-width: 46ch;
}

.rechner-rechts .knopf { margin-top: 30px; }

@media (max-width: 900px) {
  .rechner { grid-template-columns: 1fr; }
  .rechner-links { border-right: none; border-bottom: 1px solid var(--hairline-soft); }
}

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

.zeigen {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  transition-delay: var(--verzug, 0s);
}

.zeigen.da { opacity: 1; transform: none; }

/* Hero-Choreografie */

.held [data-akt] {
  opacity: 0;
  transform: translateY(34px);
  animation: aufstieg 1.1s var(--ease-out) forwards;
}

.held [data-akt="1"] { animation-delay: 0.15s; }
.held [data-akt="2"] { animation-delay: 0.3s; }
.held [data-akt="3"] { animation-delay: 0.45s; }
.held [data-akt="4"] { animation-delay: 0.6s; }
.held [data-akt="5"] { animation-delay: 0.8s; }

@keyframes aufstieg {
  to { opacity: 1; transform: none; }
}

/* ---------- Fokus & Motion ---------- */

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--messing);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .zeigen, .held [data-akt] {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .spiegel .rahmen img, .werk-gitter .rahmen img { transition: none !important; }
  .karussell-spur { scroll-behavior: auto; }
  .karussell-schiene::after { transition: none; }
  .nav-links,
  .nav-links li a,
  .nav-burger span,
  .nav-burger::before,
  .nav-burger::after {
    transition: none !important;
    transition-delay: 0s !important;
  }
}

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .spiegelreihe {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    margin-inline: calc(-1 * var(--pad-x));
    padding-inline: var(--pad-x);
    scrollbar-width: none;
  }
  /* Hinweis für horizontale Wischgesten — das eigentliche „senkrecht darf
     immer an die Seite durchgereicht werden" übernimmt site.js, siehe
     Kommentar bei .karussell-spur weiter oben. */
  .spiegelreihe,
  .spiegelreihe * {
    touch-action: pan-x;
  }
  .spiegelreihe::-webkit-scrollbar { display: none; }
  .spiegel { flex: 0 0 min(64vw, 300px); scroll-snap-align: start; }
  /* Bodenlinie nur im Rasterlayout: im Scroller läge sie quer über den Schildern. */
  .spiegelreihe::after { display: none; }
  .spiegel img {
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    user-select: none;
  }

  .team {
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    overflow-x: auto;
  }
  .team,
  .team * {
    touch-action: pan-x;
  }
  .team-karte img {
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    user-select: none;
  }
}

@media (max-width: 900px) {
  .held-innen { grid-template-columns: 1fr; align-items: start; }
  .held { align-items: start; padding-top: 130px; }
  .held-bild { max-width: 420px; }
  .held-innen::after { display: none; }

  .nav-links {
    position: fixed;
    inset: 0;
    background: rgba(8, 21, 17, 0.97);
    flex-direction: column;
    justify-content: center;
    gap: 30px;
    transform: translateY(-100%);
    opacity: 0;
    /* Schließen: symmetrische Kurve, damit die Bewegung nicht schon am Anfang „snapt". */
    transition: transform 0.55s var(--ease-io), opacity 0.4s var(--ease-io);
    z-index: 65;
  }
  body.menu-offen .nav-links {
    transform: none;
    opacity: 1;
    /* Öffnen: zügiger Start, sanftes Einrasten. */
    transition: transform 0.6s var(--ease-out), opacity 0.45s ease;
  }
  body.menu-offen { overflow: hidden; }

  /* Verlinkungen erscheinen gestaffelt beim Öffnen; beim Schließen blenden
     sie gemeinsam aus, weil die verzögerte Regel dann nicht mehr greift. */
  .nav-links a {
    display: block;
    font-size: 19px;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.35s var(--ease-io), transform 0.4s var(--ease-io);
  }
  body.menu-offen .nav-links a {
    opacity: 1;
    transform: none;
    transition: opacity 0.4s ease, transform 0.45s var(--ease-out);
  }
  /* Jedes <a> ist einziges Kind seines <li> — daher am <li> zählen, nicht am <a>. */
  body.menu-offen .nav-links li:nth-child(1) a { transition-delay: 0.12s; }
  body.menu-offen .nav-links li:nth-child(2) a { transition-delay: 0.17s; }
  body.menu-offen .nav-links li:nth-child(3) a { transition-delay: 0.22s; }
  body.menu-offen .nav-links li:nth-child(4) a { transition-delay: 0.27s; }
  body.menu-offen .nav-links li:nth-child(5) a { transition-delay: 0.32s; }
  body.menu-offen .nav-links li:nth-child(6) a { transition-delay: 0.37s; }
  body.menu-offen .nav-links li:nth-child(7) a { transition-delay: 0.42s; }

  .nav-burger { display: block; }
  .nav-cta { display: none; }

  .feature, .kontakt { grid-template-columns: 1fr; }
  .feature .rahmen { max-width: 520px; }

  .karussell-dia { flex: 0 0 100%; }

  .stimmen-gitter { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }

  .werk-gitter { grid-template-columns: repeat(2, 1fr); }
  .werk-gitter .breit { grid-column: span 2; }

  .ablauf { grid-template-columns: 1fr; gap: 28px; }

  .quer { grid-template-columns: 1fr; max-width: 420px; }

  .team { grid-template-columns: 1fr; max-width: 420px; overflow: visible; }
}

@media (max-width: 560px) {
  .held .held-ctas,
  .kontakt-ctas { gap: 8px; }

  .held .knopf,
  .kontakt-ctas .knopf { padding: 13px 14px; font-size: 12px; letter-spacing: 0.03em; }

  .werk-gitter { grid-template-columns: 1fr; }
  .werk-gitter .breit { grid-column: auto; }
  .kontakt-zeilen .k-label { flex-basis: 90px; }
}