/* ============================================================
   CIHAN — Berlin-Schöneberg · Design System v4
   Apple Design Language: Weiß, ruhige Grautöne, Blau als Akzent
   ============================================================ */

:root {
  --bg: #ffffff;
  --bg-alt: #f5f5f7;
  --bg-soft: #fbfbfd;
  --ink: #1d1d1f;
  --text: #1d1d1f;
  --text-dim: #424245;
  --text-faint: #6e6e73;   /* Apple-Sekundärgrau · 4.9:1 auf Weiß */
  --line: rgba(0, 0, 0, 0.08);
  --line-strong: rgba(0, 0, 0, 0.16);

  --blue: #0071e3;
  --blue-hover: #0077ed;
  --blue-tint: rgba(0, 113, 227, 0.08);
  --rose: #b8766d;
  --amber: #e8a33d;            /* nur für Bewertungssterne */
  --success: #3d9a50;
  --danger: #de4b3b;
  --wa: #35b56a;

  --font-display: 'Space Grotesk', 'Inter', -apple-system, sans-serif;
  --font-body: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;

  --container: 1120px;
  --gutter: 22px;
  --radius: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --header-h: 60px;
  --shadow-soft: 0 6px 24px rgba(0, 0, 0, 0.05);
  --shadow-hover: 0 16px 40px rgba(0, 0, 0, 0.1);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  overflow-x: clip;   /* 'hidden' macht body zum Scroll-Container und killt position:sticky */
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; line-height: 1.08; font-weight: 700; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--blue); color: #fff; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #d2d2d7; border-radius: 8px; border: 2px solid var(--bg); }

.container { width: min(var(--container), calc(100% - var(--gutter) * 2)); margin: 0 auto; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sec-title, .hero-headline, .cta-band h2 { text-wrap: balance; }
.btn, .tab-btn, .slot, .nav-link { touch-action: manipulation; }

/* ---------- Buttons (Apple) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px;
  font-size: 15px; font-weight: 500; letter-spacing: -0.01em;
  text-decoration: none; white-space: nowrap;
  border-radius: var(--radius); border: 0;
  transition: background 0.25s, color 0.25s, transform 0.2s var(--ease), box-shadow 0.25s;
}
.btn:active { transform: scale(0.98); }
.btn svg { flex: 0 0 auto; }
.btn-gold { background: var(--blue); color: #fff; }             /* Primär (Klassenname beibehalten) */
.btn-gold:hover { background: var(--blue-hover); }
.btn-outline { background: #e8e8ed; color: var(--ink); }        /* Sekundär, ruhig */
.btn-outline:hover { background: #dcdce1; }
.btn-light { background: #fff; color: var(--ink); box-shadow: var(--shadow-soft); }
.btn-wa { background: var(--wa); color: #fff; }
.btn-wa:hover { filter: brightness(1.05); }
.btn-ghost { background: transparent; color: var(--blue); padding: 12px 10px; }
.btn-ghost:hover { text-decoration: underline; }
.btn-sm { padding: 9px 18px; font-size: 14px; border-radius: 10px; }
.btn[disabled] { opacity: 0.4; pointer-events: none; }
/* Blauer Textlink mit Chevron */
.btn-link {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--blue); font-size: 17px; font-weight: 400;
  text-decoration: none; padding: 10px 4px;
}
.btn-link:hover { text-decoration: underline; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--header-h);
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: saturate(1.8) blur(20px); backdrop-filter: saturate(1.8) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, background 0.3s;
}
.site-header.scrolled { background: rgba(255, 255, 255, 0.82); border-bottom-color: var(--line); }
.header-inner {
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.brand-mono {
  width: 44px; height: 36px; border-radius: 10px; flex: 0 0 auto;
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 1;
  color: var(--ink); background: #fff;
}
.brand-mono b { font-weight: 700; color: var(--blue); margin-left: -0.46em; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { font-family: var(--font-display); font-size: 16px; letter-spacing: 0.12em; color: var(--ink); }
.brand-text em { font-style: normal; font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-faint); }

.main-nav { display: flex; align-items: center; gap: 4px; }
.nav-link {
  padding: 8px 12px; text-decoration: none;
  font-size: 14px; font-weight: 400;
  color: var(--text-dim); transition: color 0.2s;
}
.nav-link:hover, .nav-link.active { color: var(--ink); }

.header-actions { display: flex; align-items: center; gap: 10px; }
.lang-switch {
  display: flex; border-radius: 9px; padding: 2.5px;
  background: rgba(0, 0, 0, 0.05);
}
.lang-btn {
  border: 0; background: transparent; color: var(--text-faint);
  font-size: 11.5px; font-weight: 600;
  padding: 5.5px 10px; border-radius: 7px; transition: all 0.2s;
}
.lang-btn.active { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); }
.lang-btn:not(.active):hover { color: var(--ink); }

/* Bereich-Umschalter (Damen / Herren) */
.gseg { display: flex; border-radius: 9px; padding: 2.5px; background: rgba(0, 0, 0, 0.05); }
.gseg-btn {
  border: 0; background: transparent; color: var(--text-faint);
  font-size: 12px; font-weight: 600; white-space: nowrap;
  padding: 5.5px 12px; border-radius: 7px; cursor: pointer; transition: all 0.2s;
}
.gseg-btn.active { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); }
.gseg-btn:not(.active):hover { color: var(--ink); }
.gseg--hero { display: none; margin: 24px auto 0; }

/* ---------- Bereich-Gate (Damen / Herren Auswahl) ---------- */
.gate {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center; padding: 28px;
  background: var(--bg);
  opacity: 0; visibility: hidden;
  transition: opacity 0.5s var(--ease), visibility 0.5s var(--ease);
}
html[data-gate="1"] .gate { opacity: 1; visibility: visible; }
html[data-gate="1"] { overflow: hidden; }
.gate-inner { width: 100%; max-width: 920px; text-align: center; }
.gate-head { margin-bottom: 40px; }
.gate-mono {
  display: inline-flex; font-family: var(--font-display); font-weight: 700;
  font-size: 30px; letter-spacing: -0.04em; color: var(--ink); margin-bottom: 22px;
}
.gate-mono b { color: var(--blue); }
.gate-title {
  margin: 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(30px, 4.5vw, 46px); letter-spacing: -0.03em; color: var(--ink);
}
.gate-sub { font-size: clamp(16px, 2vw, 19px); color: var(--text-dim); margin-top: 12px; }
.gate-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.gate-card {
  position: relative; aspect-ratio: 4 / 5; border: 0; padding: 0; cursor: pointer;
  border-radius: var(--radius-xl); overflow: hidden; background: var(--bg-alt);
  display: flex; align-items: flex-end;
  box-shadow: var(--shadow-soft);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.gate-card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.14); }
.gate-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.gate-card:hover img { transform: scale(1.05); }
.gate-ov { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0.62) 100%); }
.gate-card-tx { position: relative; z-index: 2; padding: 30px; text-align: left; width: 100%; }
.gate-kicker { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.8); margin-bottom: 8px; }
.gate-name { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 2.6vw, 30px); color: #fff; letter-spacing: -0.02em; text-shadow: 0 1px 20px rgba(0,0,0,0.3); }
.gate-name em { font-style: normal; color: rgba(255,255,255,0.88); }
.gate-go { display: inline-block; margin-top: 14px; font-size: 15px; font-weight: 600; color: #fff; opacity: 0.9; }
.gate-note { font-size: 14px; color: var(--text-faint); margin-top: 30px; }

/* Hero auf gewählten Bereich reduzieren */
html[data-gender="damen"] .hero-men { display: none; }
html[data-gender="herren"] .hero-women { display: none; }
html[data-gender] .hero-tiles { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
@media (max-width: 560px) {
  .gate { padding: 20px; }
  .gate-head { margin-bottom: 26px; }
  .gate-cards { grid-template-columns: 1fr; gap: 12px; }
  .gate-card { aspect-ratio: 16 / 10; }
  .gate-card-tx { padding: 22px; }
}

.nav-toggle {
  display: none; position: relative; z-index: 130;
  width: 40px; height: 40px; border-radius: 10px;
  border: 0; background: transparent;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ''; position: absolute; left: 50%; width: 17px; height: 1.5px;
  background: var(--ink); border-radius: 2px;
  transition: transform 0.35s var(--ease), background 0.25s;
}
.nav-toggle span { top: 50%; transform: translate(-50%, -50%); }
.nav-toggle span::before { top: -5.5px; transform: translateX(-50%); left: 50%; }
.nav-toggle span::after { top: 5.5px; transform: translateX(-50%); left: 50%; }
body.nav-open .nav-toggle span { background: transparent; }
body.nav-open .nav-toggle span::before { top: 0; transform: translateX(-50%) rotate(45deg); }
body.nav-open .nav-toggle span::after { top: 0; transform: translateX(-50%) rotate(-45deg); }

/* ---------- Hero (hell, große Typo + Medien-Kacheln) ---------- */
.hero { padding: calc(var(--header-h) + 72px) 0 0; background: var(--bg); }
.hero-head { text-align: center; max-width: 780px; margin: 0 auto 56px; }
.hero-headline {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(44px, 7vw, 84px); letter-spacing: -0.03em; color: var(--ink);
  margin-bottom: 20px;
}
.hero-lede { font-size: clamp(18px, 2.2vw, 22px); color: var(--text-dim); max-width: 620px; margin: 0 auto 28px; }
.hero-cta { display: flex; gap: 18px; justify-content: center; align-items: center; flex-wrap: wrap; }

.hero-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.tile {
  position: relative; border-radius: var(--radius-xl); overflow: hidden;
  min-height: 560px; display: flex; align-items: flex-end;
  background: var(--bg-alt);
}
.tile .hero-bg { position: absolute; inset: 0; }
.tile .hero-bg img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.tile:hover .hero-bg img { transform: scale(1.04); }
.hero-men .hero-bg img { object-position: 50% 45%; }
.hero-women .hero-bg img { object-position: 50% 42%; }
.tile .hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(185deg, rgba(0, 0, 0, 0.06) 30%, rgba(0, 0, 0, 0.62) 100%);
}
/* Damen-Bild ist unten heller → etwas kräftigerer Verlauf für Textkontrast */
.hero-women .hero-overlay {
  background: linear-gradient(185deg, rgba(0, 0, 0, 0.04) 22%, rgba(0, 0, 0, 0.48) 62%, rgba(0, 0, 0, 0.78) 100%);
}
.tile .hero-content { position: relative; z-index: 2; padding: 36px; max-width: 430px; }
.tile .hero-content .hero-kicker,
.tile .hero-content .hero-title,
.tile .hero-content .hero-sub { text-shadow: 0 1px 22px rgba(0, 0, 0, 0.28); }
.hero-kicker {
  display: inline-block;
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75); margin-bottom: 10px;
}
.hero-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(28px, 2.8vw, 40px); color: #fff; letter-spacing: -0.02em;
  margin-bottom: 10px;
}
.hero-title em { font-style: normal; color: #fff; }
.hero-title .ht2 { display: block; color: rgba(255, 255, 255, 0.85); margin-top: 0.06em; font-size: 0.82em; }
.hero-title .ht2 .amp { color: rgba(255, 255, 255, 0.5); font-weight: 400; font-size: 0.75em; margin-right: 0.2em; }
.hero-sub { color: rgba(255, 255, 255, 0.78); font-size: 15.5px; margin-bottom: 20px; }
.tile .btn-gold { background: rgba(255, 255, 255, 0.95); color: var(--ink); }
.tile .btn-gold:hover { background: #fff; }

/* ---------- Sektionen ---------- */
.sec { padding: 128px 0; }
.sec-head { max-width: 700px; margin-bottom: 64px; }
.sec-head.center { margin-inline: auto; text-align: center; }
.kicker {
  display: inline-block;
  font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 14px;
}
.sec-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(34px, 4.4vw, 56px); color: var(--ink); letter-spacing: -0.03em;
  margin-bottom: 18px;
}
.sec-title em { font-style: normal; color: inherit; }
.sec-sub { color: var(--text-dim); font-size: 19px; }
.sec--coal, .sec--light { background: var(--bg-alt); }

/* ---------- Über uns ---------- */
.about-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 72px; align-items: center; }
.about-copy .sec-head { margin-bottom: 26px; }
.about-copy p { color: var(--text-dim); }
.about-features { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 32px; }
.about-features li {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 15px; font-weight: 600; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: 16px;
  padding: 15px 16px;
}
.sec .about-features li { background: #fff; }
.about-features li svg { flex: 0 0 auto; margin-top: 3px; color: var(--blue); }
.about-features li small { display: block; font-weight: 400; color: var(--text-faint); font-size: 13.5px; }
.about-visual { position: relative; }
.about-img {
  border-radius: var(--radius-xl); overflow: hidden;
  aspect-ratio: 4 / 3.4;
}
.about-img img { width: 100%; height: 100%; object-fit: cover; }
.about-grid--chavi { margin-top: 88px; grid-template-columns: 0.95fr 1.05fr; }
.about-grid--chavi .about-img { aspect-ratio: 1 / 1; max-width: 480px; }
.about-grid--chavi .about-img img { object-position: 50% 20%; }

/* Bewertungs-Chip auf den Porträts */
.rate-chip {
  position: absolute; left: 18px; bottom: 18px; z-index: 2;
  display: flex; align-items: baseline; gap: 9px;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
  border-radius: 16px; padding: 11px 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
}
.rate-chip .stars { color: var(--amber); font-size: 13px; letter-spacing: 2px; }
.rate-chip b { font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--ink); }
.rate-chip small { font-size: 12.5px; color: var(--text-dim); }
@media (max-width: 560px) {
  .rate-chip { left: 12px; bottom: 12px; padding: 9px 13px; gap: 7px; }
  .rate-chip .stars { font-size: 11px; letter-spacing: 1px; }
  .rate-chip b { font-size: 16px; }
  .rate-chip small { font-size: 11.5px; }
}

.stats-band {
  margin-top: 96px; padding-top: 52px;
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px;
}
.stat { text-align: center; }
.stat-num {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(34px, 4vw, 56px);
  color: var(--ink); line-height: 1; letter-spacing: -0.03em;
  display: inline-flex; align-items: baseline; gap: 2px;
}
.stat-num sup { font-size: 0.5em; color: var(--blue); }
.stat-label { margin-top: 10px; font-size: 14px; color: var(--text-faint); }

/* ---------- Leistungen (breit, luftig, untereinander) ---------- */
.tabs-wrap { text-align: center; }
.tabs {
  display: inline-flex; gap: 3px; padding: 3px;
  background: rgba(0, 0, 0, 0.05); border-radius: 12px;
  margin: 0 auto 52px;
}
.tab-btn {
  border: 0; background: transparent; color: var(--text-dim);
  font-size: 14.5px; font-weight: 500;
  padding: 10px 26px; border-radius: 9px; transition: all 0.25s var(--ease);
  display: inline-flex; align-items: center; gap: 8px;
}
.tab-btn svg { opacity: 0.55; }
.tab-btn.active { background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }
.tab-btn.active svg { opacity: 1; color: var(--blue); }
.tab-btn:not(.active):hover { color: var(--ink); }

.price-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; max-width: 760px; margin: 0 auto; }

/* Preismenü-Steuerung (Bereich + Haarlänge) */
.pm-top { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-bottom: 40px; }
.pm-switch { display: flex; background: #e8e8ed; border-radius: 14px; padding: 3px; }
.pm-switch button {
  border: 0; background: transparent; cursor: pointer;
  padding: 10px 30px; border-radius: 11px;
  font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--text-dim);
  transition: all 0.2s;
}
.pm-switch button.active { background: #fff; color: var(--ink); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12); }
.len-cards { display: flex; gap: 20px; justify-content: center; }
.len-card {
  border: 0; background: none; padding: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.len-card .lc-img {
  position: relative; width: 104px; height: 130px;
  border-radius: 20px; overflow: hidden; display: block;
  outline: 2.5px solid transparent; outline-offset: 3px;
  transition: outline-color 0.22s, transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.len-card .lc-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.55s var(--ease);
}
.len-card:hover .lc-img { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.14); }
.len-card:hover .lc-img img { transform: scale(1.06); }
.len-card.active .lc-img { outline-color: var(--blue); box-shadow: 0 14px 30px rgba(0, 113, 227, 0.22); }
.lc-check {
  position: absolute; top: 8px; right: 8px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--blue); color: #fff; font-size: 12px; font-weight: 700;
  display: grid; place-items: center;
  opacity: 0; transform: scale(0.5); transition: opacity 0.2s, transform 0.25s var(--ease);
}
.len-card.active .lc-check { opacity: 1; transform: scale(1); }
.lc-label { font-size: 13.5px; font-weight: 600; color: var(--text-dim); transition: color 0.2s; }
.len-card.active .lc-label { color: var(--blue); }
.pm-top { scroll-margin-top: calc(var(--header-h) + 18px); }
.pm-pick-title {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(20px, 2.4vw, 24px);
  color: var(--ink); letter-spacing: -0.015em; text-align: center; margin: 10px 0 0;
}
.pm-pick-sub { font-size: 14.5px; color: var(--text-faint); text-align: center; margin: 6px 0 4px; }
.len-cards.pick { gap: 18px; }
.len-cards.pick .len-card {
  background: #fff; border: 1.5px solid var(--line); border-radius: 26px;
  padding: 13px 13px 12px; gap: 11px;
  transition: border-color 0.22s, transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.len-cards.pick .len-card:hover { border-color: var(--blue); transform: translateY(-3px); box-shadow: 0 16px 36px rgba(0, 113, 227, 0.14); }
.len-cards.pick .lc-img { width: 138px; height: 172px; border-radius: 18px; }
.len-cards.pick .lc-img:hover { transform: none; box-shadow: none; }
.len-cards.pick .lc-label { font-size: 15px; color: var(--ink); }

/* Akkordeon-Preisgruppen */
.price-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.acc {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow 0.3s var(--ease);
}
.acc.open { box-shadow: var(--shadow-soft); }
.acc-head {
  display: flex; align-items: center; gap: 16px; width: 100%;
  padding: 18px 22px; border: 0; background: none; cursor: pointer; text-align: left;
}
.acc-head img { width: 56px; height: 56px; border-radius: 16px; object-fit: cover; flex: 0 0 auto; }
.acc-tx { flex: 1; min-width: 0; }
.acc-tx h3 {
  font-family: var(--font-display); font-size: 18.5px; font-weight: 600;
  color: var(--ink); letter-spacing: -0.015em; margin: 0;
}
.acc-tx small { display: block; font-size: 13px; color: var(--text-faint); margin-top: 3px; }
.acc-chev { flex: 0 0 auto; color: var(--text-faint); transition: transform 0.32s var(--ease); }
.acc.open .acc-chev { transform: rotate(90deg); color: var(--blue); }
.acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s var(--ease); }
.acc.open .acc-body { grid-template-rows: 1fr; }
.acc-in { overflow: hidden; min-height: 0; padding: 0 24px; }
.acc.open .acc-in { padding-bottom: 12px; }
.acc-in .svc-row:first-child { border-top: 1px solid var(--line); }
.svc-row.has-th { align-items: center; }
.svc-thumb {
  width: 44px; height: 44px; border-radius: 13px; object-fit: cover;
  flex: 0 0 auto; background: var(--bg-alt);
  cursor: zoom-in;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
[data-peek]:hover .svc-thumb { transform: scale(1.12); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16); }

/* Schwebende Behandlungs-Vorschau */
.svc-peek {
  position: fixed; z-index: 220; width: 330px; max-width: calc(100vw - 20px);
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--line); border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
  padding: 14px 14px 11px; pointer-events: none;
  opacity: 0; transform: translateY(8px) scale(0.97);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
}
.svc-peek.show { opacity: 1; transform: none; pointer-events: auto; }
.sp-head { font-size: 14px; font-weight: 600; color: var(--ink); margin: 0 2px 10px; }
.sp-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sp-fig { position: relative; display: block; }
.sp-imgs img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 13px; display: block; }
.sp-tag {
  position: absolute; left: 7px; bottom: 7px;
  font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: #fff; background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: 3px 8px; border-radius: 7px;
}
.sp-fig:last-child .sp-tag { background: var(--blue); }
.sp-note { font-size: 11.5px; color: var(--text-faint); text-align: center; margin-top: 9px; }
.pm-anim { animation: pmIn 0.32s var(--ease); }
@keyframes pmIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Preis-Bühne: Modelbild links, Preise rechts */
.pm-stage {
  display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 30px; align-items: start;
  scroll-margin-top: calc(var(--header-h) + 18px);
}
.ps-media {
  position: sticky; top: calc(var(--header-h) + 22px);
  aspect-ratio: 3 / 4; border-radius: var(--radius-xl); overflow: hidden;
  background: var(--bg-alt);
}
.ps-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.07);
  transition: opacity 0.6s var(--ease), transform 1.1s var(--ease);
}
.ps-img.is-on { opacity: 1; transform: scale(1); }
.ps-caption {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--ink);
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  padding: 8px 15px; border-radius: 999px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}
.ps-rail {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 2;
  display: flex; gap: 10px; padding: 9px 11px; border-radius: 20px;
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}
.ps-rb {
  border: 0; background: none; padding: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
}
.ps-rb img {
  width: 52px; height: 64px; object-fit: cover; border-radius: 12px; display: block;
  outline: 2px solid transparent; outline-offset: 2px;
  transition: outline-color 0.2s, transform 0.2s var(--ease);
}
.ps-rb:hover img { transform: translateY(-2px); }
.ps-rb span { font-size: 11px; font-weight: 600; color: var(--text-dim); }
.ps-rb.active img { outline-color: var(--blue); }
.ps-rb.active span { color: var(--blue); }
.ps-phead { margin-bottom: 18px; }
.ps-phead h3 {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 2.6vw, 32px);
  letter-spacing: -0.02em; color: var(--ink);
}
.ps-phead small { display: block; font-size: 13.5px; color: var(--text-faint); margin-top: 5px; }
.ps-panel .price-list { max-width: none; margin: 0; }
@media (max-width: 900px) {
  .pm-stage { display: block; }
  .ps-media { position: relative; top: auto; aspect-ratio: 4 / 5; max-width: 480px; margin: 0 auto 22px; }
  .ps-phead { text-align: center; }
}
.price-card {
  background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 36px 40px 26px;
}
.sec--coal .price-card, .sec--light .price-card { border-color: transparent; box-shadow: var(--shadow-soft); }
.price-card h3 {
  font-family: var(--font-display); font-size: 21px; font-weight: 600; color: var(--ink);
  letter-spacing: -0.015em; margin-bottom: 18px;
}
.svc-row { display: flex; align-items: baseline; gap: 14px; padding: 15px 0; }
.svc-row + .svc-row { border-top: 1px solid var(--line); }
.svc-info { min-width: 0; }
.svc-name { font-weight: 500; font-size: 16.5px; color: var(--ink); display: inline; }
.svc-badge {
  display: inline-block; vertical-align: 2px; margin-left: 8px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.03em;
  color: var(--blue); background: var(--blue-tint); border-radius: 6px; padding: 2.5px 8px;
}
.svc-meta { display: block; font-size: 13.5px; color: var(--text-faint); margin-top: 2px; }
.svc-dots { flex: 1; min-width: 16px; }
.svc-price { font-weight: 600; font-size: 16.5px; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.price-note { text-align: center; color: var(--text-faint); font-size: 14px; max-width: 560px; margin: 36px auto 0; }
.price-note a { color: var(--blue); text-decoration: none; }
.price-note a:hover { text-decoration: underline; }
.svc-cta-row { text-align: center; margin-top: 44px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- Vorher / Nachher ---------- */
.ba-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 860px; margin: 0 auto; }
.ba-slider {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 3 / 4; user-select: none; touch-action: pan-y;
  cursor: ew-resize; background: var(--bg-alt);
}
.ba-img { position: absolute; inset: 0; }
.ba-img img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba-after { clip-path: inset(0 0 0 50%); }
.ba-handle {
  position: absolute; top: 0; bottom: 0; left: 50%; z-index: 4;
  width: 2px; background: rgba(255, 255, 255, 0.9); transform: translateX(-1px);
}
.ba-handle::after {
  content: '↔'; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 42px; height: 42px; border-radius: 50%;
  background: #fff; color: var(--ink);
  display: grid; place-items: center;
  font-size: 17px; font-weight: 700;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
}
.ba-tag {
  position: absolute; top: 14px; z-index: 3;
  font-size: 11px; font-weight: 600;
  padding: 5px 12px; border-radius: 8px;
  background: rgba(255, 255, 255, 0.88); color: var(--ink);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.ba-tag--before { left: 14px; }
.ba-tag--after { right: 14px; color: var(--blue); }
.ba-caption { margin-top: 16px; text-align: center; }
.ba-caption b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 16.5px; color: var(--ink); letter-spacing: -0.01em; }
.ba-caption span { font-size: 14px; color: var(--text-faint); }
.ba-hint { text-align: center; color: var(--text-faint); font-size: 14px; margin-top: 32px; }

/* ---------- Arbeiten ---------- */
.work-group + .work-group { margin-top: 64px; }
.wg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.wg-head h3 {
  font-family: var(--font-display); font-weight: 600; font-size: 22px;
  letter-spacing: -0.02em; color: var(--ink);
}
.wg-head .line { display: none; }
.wg-grid { display: grid; gap: 16px; }
.wg-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.wg-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.work-item { margin: 0; cursor: zoom-in; }
.wi-img {
  border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 3 / 4; background: var(--bg-alt);
}
.wg-grid[data-ratio="square"] .wi-img { aspect-ratio: 1; }
.wg-grid[data-ratio="landscape"] .wi-img { aspect-ratio: 4 / 3; }
.wi-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.work-item:hover .wi-img img { transform: scale(1.04); }
.work-item figcaption { margin-top: 10px; font-size: 13.5px; color: var(--text-faint); text-align: center; }

.img-fallback {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  background: var(--bg-alt);
  color: var(--text-faint); font-family: var(--font-display); font-size: 30px;
}

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 160;
  background: rgba(0, 0, 0, 0.85);
  display: grid; place-items: center;
  opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lb-img { max-width: min(88vw, 1000px); max-height: 82vh; border-radius: 16px; }
.lb-btn {
  position: absolute; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.14); color: #fff;
  border: 0; font-size: 18px;
  display: grid; place-items: center; transition: background 0.2s;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.lb-btn:hover { background: rgba(255, 255, 255, 0.28); }
.lb-close { top: 20px; right: 20px; }
.lb-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 20px; top: 50%; transform: translateY(-50%); }
.lb-count { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, 0.7); font-size: 14px; }

/* ---------- Team ---------- */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.team-card {
  background: #fff; border-radius: var(--radius-xl); overflow: hidden;
  text-align: center;
  box-shadow: var(--shadow-soft);
  display: flex; flex-direction: column;
}
.tc-photo {
  position: relative; aspect-ratio: 1 / 1; width: 100%;
  background: var(--bg-alt); overflow: hidden;
  display: grid; place-items: center;
}
.tc-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%;
  filter: grayscale(1) contrast(1.02);
  transition: transform 0.7s var(--ease), filter 0.5s var(--ease);
}
.team-card:hover .tc-photo img { transform: scale(1.04); }
@media (hover: hover) {
  .team-card:hover .tc-photo img { filter: grayscale(0) contrast(1); }
}
.tc-mono {
  font-family: var(--font-display); font-size: 62px; font-weight: 700; color: #fff;
  width: 100%; height: 100%; display: grid; place-items: center;
  background: linear-gradient(160deg, #2a2a2e, var(--ink));
}
.team-card.is-woman .tc-mono { background: linear-gradient(160deg, #9c665e, #7c4f48); }
.tc-info { padding: 24px 22px 28px; }
.tc-name { font-family: var(--font-display); font-weight: 600; font-size: 20px; color: var(--ink); letter-spacing: -0.01em; }
.tc-role { font-size: 13px; font-weight: 600; color: var(--text-faint); margin: 6px 0 10px; }
.tc-desc { font-size: 14.5px; color: var(--text-dim); margin: 0 0 14px; }
.tc-rating { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.tc-rating .stars, .rating-summary .stars, .q-stars { color: var(--amber); letter-spacing: 2px; }

/* ---------- Kundenstimmen ---------- */
.quotes-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 52px; flex-wrap: wrap; }
.rating-summary { display: flex; align-items: center; gap: 16px; }
.rating-summary .big {
  font-family: var(--font-display); font-size: 54px; font-weight: 700; color: var(--ink); line-height: 1; letter-spacing: -0.03em;
}
.rating-summary .rs-meta { font-size: 14px; color: var(--text-dim); max-width: 240px; }
.rating-summary .stars { font-size: 15px; display: block; margin-bottom: 4px; }
.q-viewport { overflow: visible; }
.q-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.quote-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 28px 26px; display: flex; flex-direction: column; gap: 14px;
}
.quote-card .q-mark { display: none; }
.q-stars { font-size: 13px; }
.q-text { font-size: 16px; color: var(--ink); flex: 1; margin: 0; }
.q-author { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.q-author b { font-size: 14.5px; color: var(--ink); font-weight: 600; }
.q-author span { font-size: 12.5px; color: var(--text-faint); }

/* ---------- Instagram ---------- */
.insta-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.insta-card {
  display: flex; align-items: center; gap: 18px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 26px 28px; text-decoration: none;
  transition: box-shadow 0.3s;
}
.insta-card:hover { box-shadow: var(--shadow-hover); }
.ic-icon {
  width: 52px; height: 52px; border-radius: 14px; flex: 0 0 auto;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(45deg, #f9ce34, #ee2a7b 55%, #6228d7);
}
.insta-card.is-women .ic-icon { background: linear-gradient(45deg, #f6d5c3, #d66a5e 50%, #8c3a56); }
.ic-body { min-width: 0; }
.ic-handle { font-weight: 600; font-size: 17px; color: var(--ink); display: block; }
.ic-desc { font-size: 14px; color: var(--text-faint); }
.ic-arrow { margin-left: auto; color: var(--blue); font-size: 20px; transition: transform 0.25s var(--ease); }
.insta-card:hover .ic-arrow { transform: translateX(4px); }

/* ---------- Kontakt / Standorte ---------- */
.loc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.loc-card {
  background: #fff; border-radius: var(--radius-xl);
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: var(--shadow-soft);
}
.lc-photo { height: 220px; overflow: hidden; }
/* Ladenfronten oben ausrichten: Schild/Fenster bleiben sichtbar, nur der Gehweg unten wird beschnitten */
.lc-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.lc-head {
  padding: 26px 30px 20px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.lc-head h3 { font-family: var(--font-display); font-weight: 600; font-size: 21px; color: var(--ink); letter-spacing: -0.015em; }
.lc-head small { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 5px; }
.lc-badge {
  width: 46px; height: 46px; border-radius: 12px; flex: 0 0 auto;
  background: var(--bg-alt); color: var(--text-dim);
  display: grid; place-items: center;
}
.lc-body { padding: 26px 30px; display: grid; gap: 18px; flex: 1; }
.lc-line { display: flex; gap: 13px; align-items: flex-start; }
.lc-line svg { flex: 0 0 auto; color: var(--text-faint); margin-top: 4px; }
.lc-line a { color: var(--blue); text-decoration: none; font-weight: 500; }
.lc-line a:hover { text-decoration: underline; }
.lc-line .lbl { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 2px; }
.open-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; color: var(--text-dim); }
.open-badge .dot-ind { width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.open-badge.closed .dot-ind { background: var(--danger); }
.hours-table { width: 100%; font-size: 14.5px; }
.hours-table li { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.hours-table li:last-child { border-bottom: 0; }
.hours-table .d { color: var(--text-dim); }
.hours-table .h { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.hours-table li.today .d, .hours-table li.today .h { color: var(--blue); font-weight: 600; }
.hours-table li.closed-day .h { color: var(--text-faint); }
.lc-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.map-shell {
  position: relative; min-height: 220px; border-top: 1px solid var(--line);
  background: var(--bg-alt);
  display: grid; place-items: center;
}
.map-shell iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-consent { text-align: center; padding: 26px; }
.map-consent p { font-size: 13px; color: var(--text-faint); max-width: 300px; margin: 0 auto 14px; }

/* ---------- CTA ---------- */
.cta-band { background: var(--bg-alt); padding: 110px 0; text-align: center; }
.cta-band h2 {
  font-family: var(--font-display); font-size: clamp(34px, 4.6vw, 60px); font-weight: 700;
  letter-spacing: -0.03em; margin-bottom: 16px; color: var(--ink);
}
.cta-band h2 em { font-style: normal; color: inherit; }
.cta-band p { color: var(--text-dim); max-width: 520px; margin: 0 auto 34px; font-size: 18px; }
.cta-band .btn-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; align-items: center; }

/* ---------- Footer ---------- */
.site-footer { background: var(--bg-alt); border-top: 1px solid var(--line); padding: 56px 0 0; font-size: 13.5px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 44px; }
.foot-brand p { color: var(--text-faint); font-size: 13.5px; margin-top: 14px; max-width: 300px; }
.foot-col h4 { font-size: 12.5px; font-weight: 600; color: var(--ink); margin-bottom: 16px; }
.foot-col li { margin-bottom: 9px; }
.foot-col a { color: var(--text-dim); text-decoration: none; font-size: 13.5px; }
.foot-col a:hover { color: var(--ink); text-decoration: underline; }
.foot-col .fc-note { color: var(--text-faint); font-size: 13px; }
.foot-bottom {
  border-top: 1px solid var(--line); padding: 18px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--text-faint);
}
.foot-bottom a { color: var(--text-dim); text-decoration: none; }
.foot-bottom a:hover { color: var(--ink); text-decoration: underline; }
.foot-legal { display: flex; gap: 18px; flex-wrap: wrap; }

/* ---------- Schwebende Buttons ---------- */
.fabs { position: fixed; right: 22px; bottom: 22px; z-index: 90; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.fab {
  width: 50px; height: 50px; border-radius: 50%; border: 0;
  display: grid; place-items: center; color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s var(--ease), opacity 0.2s;
  text-decoration: none; cursor: pointer;
}
.fab:hover { transform: translateY(-2px); }
.fab-top { background: #fff; color: var(--ink); opacity: 0; pointer-events: none; transform: translateY(8px); }
.fab-top.show { opacity: 1; pointer-events: auto; transform: none; }

/* Kontakt-Widget (Apple-style Speed-Dial) */
.cdial { position: relative; }
.fab-contact {
  width: 58px; height: 58px; background: var(--blue);
  box-shadow: 0 10px 30px rgba(0, 113, 227, 0.42);
  position: relative;
}
.fab-contact:hover { background: var(--blue-hover); }
.fab-contact .ic-close { position: absolute; opacity: 0; transform: rotate(-45deg) scale(0.6); transition: opacity 0.22s, transform 0.22s var(--ease); }
.fab-contact .ic-chat { transition: opacity 0.22s, transform 0.22s var(--ease); }
.cdial.open .fab-contact .ic-chat { opacity: 0; transform: rotate(45deg) scale(0.6); }
.cdial.open .fab-contact .ic-close { opacity: 1; transform: rotate(0) scale(1); }
.cdial-menu {
  position: absolute; right: 0; bottom: calc(100% + 14px);
  width: 300px; max-width: calc(100vw - 44px);
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px);
  border: 1px solid var(--line); border-radius: 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
  padding: 10px; overflow: hidden;
  opacity: 0; transform: translateY(14px) scale(0.96); transform-origin: bottom right;
  pointer-events: none; transition: opacity 0.24s var(--ease), transform 0.24s var(--ease);
}
.cdial.open .cdial-menu { opacity: 1; transform: none; pointer-events: auto; }
.cd-head { padding: 12px 14px 12px; }
.cd-title { display: block; font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--ink); letter-spacing: -0.01em; }
.cd-sub { display: block; font-size: 13px; color: var(--text-faint); margin-top: 3px; }
.cdi {
  display: flex; align-items: center; gap: 13px; width: 100%;
  padding: 11px 13px; border-radius: 14px; border: 0; background: transparent;
  text-align: left; text-decoration: none; cursor: pointer;
  transition: background 0.15s;
}
.cdi:hover { background: rgba(0, 0, 0, 0.045); }
.cdi-ic {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center; color: var(--blue);
  background: var(--blue-tint);
}
.cdi-tx { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.cdi-tx b { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.cdi-tx small { font-size: 12.5px; color: var(--text-faint); }
.cdi-cta { margin-top: 4px; background: var(--blue); }
.cdi-cta:hover { background: var(--blue-hover); }
.cdi-cta .cdi-ic { background: rgba(255, 255, 255, 0.22); color: #fff; }
.cdi-cta .cdi-tx b { color: #fff; }
.cdi-cta .cdi-tx small { color: rgba(255, 255, 255, 0.82); }

/* ---------- Buchungs-Sheet ---------- */
.bm { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 20px; visibility: hidden; }
.bm.open { visibility: visible; }
.bm-backdrop {
  position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.3s;
}
.bm.open .bm-backdrop { opacity: 1; }
.bm-dialog {
  position: relative; width: min(600px, 100%); min-width: 0; max-height: min(760px, calc(100svh - 40px));
  display: flex; flex-direction: column;
  background: #fff; border-radius: 22px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
  transform: translateY(20px); opacity: 0;
  transition: transform 0.4s var(--ease), opacity 0.3s;
}
.bm.open .bm-dialog { transform: none; opacity: 1; }
.bm-head { padding: 26px 28px 0; }
.bm-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.bm-title { font-family: var(--font-display); font-weight: 700; font-size: 23px; color: var(--ink); letter-spacing: -0.02em; }
.bm-sub { font-size: 13.5px; color: var(--text-faint); margin: 5px 0 0; }
.bm-close {
  width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto;
  border: 0; background: var(--bg-alt); color: var(--text-dim);
  font-size: 14px; transition: background 0.2s;
}
.bm-close:hover { background: #e8e8ed; color: var(--ink); }
.bm-steps { display: flex; gap: 5px; margin: 20px 0 0; }
.bm-step { flex: 1; height: 3px; border-radius: 3px; background: #e8e8ed; }
.bm-step.done, .bm-step.active { background: var(--blue); }
.bm-step-label { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); margin: 13px 0 0; }
.bm-body { padding: 16px 28px 10px; overflow-y: auto; overflow-x: hidden; flex: 1; min-width: 0; }
.bm-datepick { min-width: 0; }
.bm-view { display: none; animation: viewIn 0.35s var(--ease); }
.bm-view.active { display: block; }
@keyframes viewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.salon-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.salon-opt {
  position: relative; text-align: left;
  border: 1.5px solid var(--line); border-radius: 16px;
  background: #fff; padding: 20px;
  transition: border-color 0.25s, background 0.25s; cursor: pointer;
}
.salon-opt:hover { border-color: var(--line-strong); }
.salon-opt.selected { border-color: var(--blue); background: var(--blue-tint); }
.salon-opt .so-icon { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: var(--bg-alt); color: var(--text-dim); margin-bottom: 12px; }
.salon-opt.selected .so-icon { background: #fff; color: var(--blue); }
.salon-opt b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--ink); margin-bottom: 4px; }
.salon-opt small { font-size: 13.5px; color: var(--text-faint); display: block; line-height: 1.5; }
.salon-opt .so-check {
  position: absolute; top: 13px; right: 13px;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--line-strong); display: grid; place-items: center;
  font-size: 11px; color: transparent; transition: all 0.2s;
}
.salon-opt.selected .so-check { background: var(--blue); border-color: var(--blue); color: #fff; }

.pick-group { margin-bottom: 18px; }
.pick-group h4 { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 10px; }
.pick-item {
  display: flex; align-items: center; gap: 13px;
  border: 1.5px solid var(--line); border-radius: 12px;
  padding: 12px 15px; margin-bottom: 8px; cursor: pointer;
  transition: border-color 0.2s, background 0.2s; background: #fff;
}
.pick-item:hover { border-color: var(--line-strong); }
.pick-item.checked { border-color: var(--blue); background: var(--blue-tint); }
.pick-item input { position: absolute; opacity: 0; pointer-events: none; }
.pi-box {
  width: 20px; height: 20px; border-radius: 6px; flex: 0 0 auto;
  border: 1.5px solid var(--line-strong); display: grid; place-items: center;
  font-size: 11px; color: transparent; transition: all 0.2s;
}
.pick-item.checked .pi-box { background: var(--blue); border-color: var(--blue); color: #fff; }
.pi-info { flex: 1; min-width: 0; }
.pi-name { font-weight: 500; font-size: 15px; color: var(--ink); display: block; }
.pi-meta { font-size: 13px; color: var(--text-faint); }
.pi-price { font-weight: 600; font-size: 15px; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pick-summary {
  position: sticky; bottom: -10px;
  display: flex; justify-content: space-between; gap: 14px; align-items: center;
  background: var(--bg-alt); border-radius: 12px;
  padding: 12px 16px; margin-top: 14px; font-size: 14px;
}
.pick-summary b { color: var(--ink); font-size: 15px; }
.pick-summary .ps-lbl { color: var(--text-faint); }

/* Datum & Uhrzeit – Tages-Strip (Apple-Style) */
.dp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.dp-label { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); display: inline-flex; align-items: center; gap: 6px; }
.dp-month { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink); }
.dp-strip {
  display: flex; gap: 9px; overflow-x: auto; padding: 4px 2px 12px;
  scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.dp-strip::-webkit-scrollbar { display: none; }
.dp-day {
  flex: 0 0 auto; width: 58px; scroll-snap-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 0 10px; border: 1.5px solid var(--line); border-radius: 16px;
  background: #fff; cursor: pointer; transition: transform 0.2s var(--ease), border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.dp-day:hover:not(:disabled) { border-color: var(--line-strong); transform: translateY(-2px); }
.dp-dow { font-size: 11px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-faint); }
.dp-num { font-family: var(--font-display); font-size: 21px; font-weight: 600; color: var(--ink); line-height: 1; }
.dp-dot { width: 5px; height: 5px; border-radius: 50%; background: #34c759; }
.dp-day.is-today { border-color: var(--line-strong); }
.dp-day.is-today .dp-dow { color: var(--blue); }
.dp-day.is-selected { background: var(--blue); border-color: var(--blue); box-shadow: 0 10px 22px rgba(0, 113, 227, 0.28); }
.dp-day.is-selected .dp-dow, .dp-day.is-selected .dp-num { color: #fff; }
.dp-day.is-selected .dp-dot { background: #fff; }
.dp-day.is-closed { opacity: 0.38; cursor: not-allowed; }
.dp-day.is-closed .dp-dot { background: var(--line-strong); }
.dp-slots { margin-top: 8px; }
.dp-label--slots { display: flex; color: var(--text-dim); margin-bottom: 13px; }
.f-field label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 7px; }
.f-field input, .f-field textarea, .f-field select {
  width: 100%; padding: 12px 15px;
  background: var(--bg-alt); border: 1.5px solid transparent; border-radius: 12px;
  color: var(--ink); font-family: var(--font-body); font-size: 15px;
  transition: border-color 0.2s, background 0.2s;
}
.f-field input:focus, .f-field textarea:focus { border-color: var(--blue); background: #fff; outline: none; }
.f-field input.invalid { border-color: var(--danger); }
.f-field input[type="date"] { color-scheme: light; }
.f-err { font-size: 12.5px; color: var(--danger); margin-top: 6px; display: none; }
.f-err.show { display: block; }
.f-hint { font-size: 13px; color: var(--text-faint); margin-top: 6px; }
.slots { display: flex; flex-direction: column; gap: 16px; }
.slot-group-lbl { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-faint); margin-bottom: 9px; }
.slot-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.slot {
  border: 1.5px solid var(--line); background: #fff;
  color: var(--ink); border-radius: 11px; padding: 11px 6px;
  font-size: 14px; font-weight: 500; transition: transform 0.15s var(--ease), border-color 0.2s, color 0.2s, background 0.2s;
  font-variant-numeric: tabular-nums;
}
.slot:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-1px); }
.slot.selected { background: var(--blue); border-color: var(--blue); color: #fff; }
.slot-empty { text-align: center; color: var(--text-faint); font-size: 14px; padding: 24px 10px; border: 1.5px dashed var(--line-strong); border-radius: 14px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }

.bm-summary { border-radius: 16px; background: var(--bg-alt); padding: 20px 22px; margin-bottom: 16px; }
.bm-summary dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 0; }
.bm-summary dt { font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); padding-top: 3px; }
.bm-summary dd { margin: 0; font-size: 15px; color: var(--ink); }
.bm-summary dd b { color: var(--blue); }
.bm-note { font-size: 13.5px; color: var(--text-dim); margin: 0 0 16px; line-height: 1.6; }
.bm-final-actions { display: grid; gap: 10px; }
.bm-final-actions .btn { width: 100%; }
.bm-alt { text-align: center; font-size: 13px; color: var(--text-faint); margin-top: 14px; }
.bm-alt a { color: var(--blue); }
.bm-foot {
  padding: 16px 28px 24px; display: flex; justify-content: space-between; gap: 14px;
  border-top: 1px solid var(--line); margin-top: 8px;
}
.bm-success { text-align: center; padding: 18px 6px 6px; }
.bm-success .ok-ring {
  width: 74px; height: 74px; margin: 0 auto 18px; border-radius: 50%;
  border: 2.5px solid var(--success); color: var(--success);
  display: grid; place-items: center; font-size: 28px;
  animation: okPop 0.5s var(--ease);
}
@keyframes okPop { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 16px);
  z-index: 170; background: var(--ink);
  color: #fff; font-size: 14.5px; font-weight: 500;
  padding: 12px 22px; border-radius: 12px; box-shadow: 0 14px 36px rgba(0, 0, 0, 0.25);
  opacity: 0; pointer-events: none; transition: all 0.3s var(--ease);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Shop-Bausteine ---------- */
.cart-btn {
  position: relative; width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto;
  border: 0; background: rgba(0, 0, 0, 0.05); color: var(--ink);
  display: grid; place-items: center;
  transition: background 0.2s;
}
.cart-btn:hover { background: rgba(0, 0, 0, 0.09); }
.cart-count {
  position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px;
  border-radius: 999px; padding: 0 5px;
  background: var(--blue); color: #fff; font-size: 11px; font-weight: 700;
  display: grid; place-items: center;
}

/* Produkt-Vitrinen: große, gestapelte Blöcke */
.prod-features { display: grid; gap: 20px; }
.pf {
  background: var(--bg-alt); border-radius: var(--radius-xl);
  overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.pf:hover { transform: translateY(-4px); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.09); }
.pf-in {
  display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 24px;
  min-height: 460px;
}
.pf.alt .pf-copy { order: 2; }
.pf-copy { padding: 56px; }
.pf-copy h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(26px, 3vw, 38px); letter-spacing: -0.025em; color: var(--ink);
  margin-bottom: 12px;
}
.pf-copy p { font-size: 17px; color: var(--text-dim); margin-bottom: 26px; max-width: 400px; }
.pf-buy { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.pf-price { font-size: 22px; font-weight: 600; color: var(--ink); line-height: 1.15; }
.pf-price small { display: block; font-size: 12px; font-weight: 400; color: var(--text-faint); }
.pf-img { align-self: stretch; min-height: 340px; overflow: hidden; }
.pf-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.pf:hover .pf-img img { transform: scale(1.06); }
.pf-img { position: relative; }
.pf-img video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-replay {
  position: absolute; right: 14px; bottom: 14px; z-index: 2;
  width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; color: var(--ink);
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: saturate(160%) blur(12px); backdrop-filter: saturate(160%) blur(12px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  opacity: 0; transform: scale(0.6); pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.35s var(--ease), background 0.2s, color 0.2s;
}
.pf.vid-done .pf-replay { opacity: 1; transform: scale(1); pointer-events: auto; }
.pf-replay:hover { background: var(--blue); color: #fff; }

.cart { position: fixed; inset: 0; z-index: 150; visibility: hidden; }
.cart.open { visibility: visible; }
.cart-backdrop {
  position: absolute; inset: 0; background: rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  opacity: 0; transition: opacity 0.3s;
}
.cart.open .cart-backdrop { opacity: 1; }
.cart-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100%);
  background: #fff;
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 0.4s var(--ease);
  box-shadow: -16px 0 50px rgba(0, 0, 0, 0.12);
}
.cart.open .cart-panel { transform: none; }
.cart-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 24px 16px; border-bottom: 1px solid var(--line);
}
.cart-body { flex: 1; overflow-y: auto; padding: 18px 24px; }
.cart-foot { border-top: 1px solid var(--line); padding: 16px 24px calc(20px + env(safe-area-inset-bottom)); background: var(--bg-soft); }
.cart-empty { text-align: center; color: var(--text-faint); padding: 50px 10px; font-size: 14.5px; }
.ci { display: flex; gap: 13px; align-items: center; padding: 13px 0; }
.ci + .ci { border-top: 1px solid var(--line); }
.ci-img { width: 58px; height: 58px; border-radius: 12px; overflow: hidden; flex: 0 0 auto; background: var(--bg-alt); }
.ci-img img { width: 100%; height: 100%; object-fit: cover; }
.ci-info { flex: 1; min-width: 0; }
.ci-name { font-weight: 500; font-size: 14.5px; color: var(--ink); }
.ci-price { font-size: 13px; color: var(--text-faint); }
.qty { display: inline-flex; align-items: center; border-radius: 9px; background: var(--bg-alt); }
.qty button { width: 28px; height: 28px; border: 0; background: transparent; color: var(--ink); font-size: 15px; cursor: pointer; }
.qty button:hover { color: var(--blue); }
.qty b { min-width: 22px; text-align: center; font-size: 14px; }
.ci-remove { border: 0; background: none; color: var(--text-faint); font-size: 13px; padding: 6px; cursor: pointer; }
.ci-remove:hover { color: var(--danger); }
.sum-row { display: flex; justify-content: space-between; font-size: 14px; color: var(--text-dim); padding: 3px 0; }
.sum-row.total { font-size: 16.5px; font-weight: 600; color: var(--ink); border-top: 1px solid var(--line); margin-top: 8px; padding-top: 10px; }
.bank-box { background: var(--bg-alt); border-radius: 14px; padding: 16px 18px; margin-top: 6px; font-size: 13.5px; }
.bank-box div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.bank-box span { color: var(--text-faint); }
.bank-box b { color: var(--ink); text-align: right; word-break: break-word; font-weight: 600; }

/* ---------- Mobile Leiste ---------- */
.mobile-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  display: none; border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: saturate(1.8) blur(20px); backdrop-filter: saturate(1.8) blur(20px);
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  gap: 8px;
}
.mb-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 10px; font-size: 15px; font-weight: 500;
  border: 0; border-radius: var(--radius); text-decoration: none; cursor: pointer;
}
.mb-call { background: #e8e8ed; color: var(--ink); }
.mb-book { background: var(--blue); color: #fff; }

/* ---------- Reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
[data-reveal].revealed { opacity: 1; transform: none; }
[data-reveal="left"], [data-reveal="right"] { transform: translateY(14px); }

/* ---------- Rechtsseiten ---------- */
.legal-main { padding: calc(var(--header-h) + 56px) 0 90px; }
.legal-main .container { max-width: 740px; }
.legal-main h1 { font-family: var(--font-display); font-size: clamp(32px, 4vw, 44px); letter-spacing: -0.025em; margin-bottom: 32px; color: var(--ink); }
.legal-main h2 { font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--ink); margin: 38px 0 12px; letter-spacing: -0.015em; }
.legal-main p, .legal-main li { color: var(--text-dim); font-size: 16px; line-height: 1.75; }
.legal-main ul { list-style: disc; padding-left: 22px; }
.legal-main a { color: var(--blue); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .q-track { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  :root { --header-h: 56px; }
  .main-nav {
    position: fixed; inset: 0; z-index: 120;
    flex-direction: column; justify-content: center; gap: 4px;
    background: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s;
  }
  body.nav-open .main-nav { opacity: 1; visibility: visible; }
  .main-nav .nav-link { font-size: 24px; padding: 12px; color: var(--ink); font-weight: 500; }
  .nav-toggle { display: block; }
  .header-actions .btn { display: none; }
  .header-actions .gseg { display: none; }
  .gseg--hero { display: inline-flex; }
  .hero { padding-top: calc(var(--header-h) + 48px); }
  .hero-head { margin-bottom: 36px; }
  .hero-tiles { grid-template-columns: 1fr; gap: 14px; }
  .tile { min-height: 440px; }
  .about-grid { grid-template-columns: 1fr; gap: 44px; }
  .about-visual { max-width: 560px; }
  .stats-band { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; margin-top: 64px; }
  .ba-grid { grid-template-columns: 1fr; max-width: 430px; margin: 0 auto; }
  .wg-grid.cols-4, .wg-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
  .insta-cards { grid-template-columns: 1fr; }
  .loc-grid { grid-template-columns: 1fr; }
  .q-track { grid-template-columns: 1fr; }
  .salon-pick { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .slot-row { grid-template-columns: repeat(3, 1fr); }
  .len-cards { gap: 14px; }
  .len-card .lc-img { width: 92px; height: 115px; }
  .len-cards.pick { gap: 10px; }
  .len-cards.pick .len-card { padding: 9px 9px 9px; border-radius: 20px; gap: 8px; }
  .len-cards.pick .lc-img { width: 88px; height: 110px; border-radius: 14px; }
  .len-cards.pick .lc-label { font-size: 13.5px; }
  .acc-head { padding: 15px 16px; gap: 13px; }
  .acc-head img { width: 48px; height: 48px; border-radius: 13px; }
  .acc-in { padding: 0 16px; }
  .svc-thumb { width: 40px; height: 40px; }
  .sec { padding: 88px 0; }
  .sec-head { margin-bottom: 44px; }
  .price-card { padding: 28px 24px 20px; }
  .pf-in { grid-template-columns: 1fr; min-height: 0; }
  .pf.alt .pf-copy { order: 0; }
  .pf-copy { padding: 36px 28px 8px; }
  .pf-img { min-height: 300px; margin: 20px 0 0; }
  .mobile-bar { display: flex; }
  body:has(.mobile-bar) { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .fabs { bottom: calc(84px + env(safe-area-inset-bottom)); }
  .q-viewport { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .q-viewport::-webkit-scrollbar { display: none; }
  .q-track { display: flex; gap: 14px; }
  .quote-card { flex: 0 0 86%; scroll-snap-align: center; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  :root { --gutter: 16px; }
  .container { width: calc(100% - var(--gutter) * 2); }
  .brand-text strong { font-size: 14px; }
  .hero-headline { font-size: clamp(38px, 11vw, 48px); }
  .hero-cta .btn { width: 100%; }
  .hero-cta .btn-link { width: 100%; justify-content: center; }
  .tile { min-height: 380px; }
  .tile .hero-content { padding: 24px; }
  .about-features { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; max-width: 340px; margin-inline: auto; }
  .wg-grid { gap: 10px; }
  .wg-grid[data-ratio="landscape"] { grid-template-columns: 1fr; }
  .work-item figcaption { font-size: 12px; margin-top: 6px; }
  .lc-head { padding: 22px 20px 18px; }
  .lc-body { padding: 22px 20px; }
  .cta-band { padding: 72px 0; }
  .foot-grid { grid-template-columns: 1fr; gap: 30px; }
  .bm-head, .bm-body { padding-inline: 20px; }
  .bm-foot { padding-inline: 20px; }
  .fabs { right: 14px; }
  .fab { width: 46px; height: 46px; }
  .tabs { flex-direction: column; width: 100%; border-radius: 14px; }
  .tab-btn { justify-content: center; }
  .pf-copy { padding: 28px 22px 4px; }
  /* Buchung als Bottom-Sheet */
  .bm { padding: 0; place-items: end stretch; }
  #bookingModal .bm-dialog,
  #bookingModal.open .bm-dialog {
    width: 100%; max-height: 94svh; border-radius: 20px 20px 0 0;
    transform: none; opacity: 1; transition: none; animation: none;
  }
  .bm-foot { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
}

/* ---------- Reduzierte Bewegung ---------- */
@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;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ============================================================
   ATMOSPHÄRE v5 — Wärme, Tiefe & dunkle Bühnen
   ============================================================ */
:root {
  --bg-warm: #f7f5f2;
  --shadow-soft: 0 8px 30px rgba(0, 0, 0, 0.06);
  --shadow-hover: 0 22px 58px rgba(0, 0, 0, 0.12);
  --shadow-dark: 0 26px 70px rgba(0, 0, 0, 0.55);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

/* Hero: weicher Lichtschein statt flachem Weiß */
.hero { position: relative; background: #fff; }
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(58% 46% at 80% -6%, rgba(232, 163, 61, 0.13), transparent 68%),
    radial-gradient(48% 42% at 8% 2%, rgba(184, 118, 109, 0.10), transparent 70%),
    linear-gradient(180deg, #fdfbf9 0%, #ffffff 58%);
}
.hero > .container { position: relative; z-index: 1; }

/* Warme, ruhige Flächen statt kaltem Grau */
.sec--warm { background: var(--bg-warm); }
.sec--warm .price-card, .sec--warm .acc { border-color: transparent; box-shadow: var(--shadow-soft); }

/* Dunkle Bühne — hier leuchten die Fotos */
.sec--dark {
  position: relative; isolation: isolate;
  background: linear-gradient(180deg, #17171a 0%, #0e0e10 100%);
  color: rgba(255, 255, 255, 0.72);
}
.sec--dark::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(72% 48% at 50% -2%, rgba(232, 163, 61, 0.11), transparent 72%);
}
.sec--dark::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--grain); opacity: 0.15; mix-blend-mode: overlay;
}
.sec--dark > .container { position: relative; z-index: 1; }
.sec--dark .kicker { color: rgba(255, 255, 255, 0.5); }
.sec--dark .sec-title { color: #fff; }
.sec--dark .sec-sub { color: rgba(255, 255, 255, 0.6); }
.sec--dark .wg-head h3 { color: #fff; }
.sec--dark .work-item figcaption { color: rgba(255, 255, 255, 0.55); }
.sec--dark .wi-img { box-shadow: var(--shadow-dark); }
.sec--dark .work-item:hover .wi-img { box-shadow: 0 30px 80px rgba(0, 0, 0, 0.65); }

/* Finale: dramatischer CTA-Block */
.cta-band {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(158deg, #242429 0%, #141416 55%, #1b1b1f 100%);
  color: #fff;
}
.cta-band::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(52% 62% at 14% 12%, rgba(0, 113, 227, 0.22), transparent 70%),
    radial-gradient(46% 56% at 88% 88%, rgba(232, 163, 61, 0.16), transparent 70%);
}
.cta-band::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--grain); opacity: 0.14; mix-blend-mode: overlay;
}
.cta-band > .container { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255, 255, 255, 0.68); }
.cta-band .btn-outline {
  background: rgba(255, 255, 255, 0.14); color: #fff;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.cta-band .btn-outline:hover { background: rgba(255, 255, 255, 0.24); }

/* Footer wärmer, weicher Übergang */
.site-footer { background: var(--bg-warm); }

/* ============================================================
   FARBRHYTHMUS v6
   · Navigation passt sich dem Untergrund an (hell / dunkel)
   · Kein langes Weiß mehr am Anfang
   · Vorher/Nachher + Galerie = ein durchgehendes dunkles Kapitel
   ============================================================ */

/* ---------- Hero fließt warm in "Über uns" ---------- */
.hero::before {
  background:
    radial-gradient(58% 46% at 80% -6%, rgba(232, 163, 61, 0.15), transparent 68%),
    radial-gradient(48% 42% at 8% 2%, rgba(184, 118, 109, 0.11), transparent 70%),
    linear-gradient(180deg, #fdfbf9 0%, #ffffff 40%, #faf8f5 78%, var(--bg-warm) 100%);
}

/* ---------- Dunkles Kapitel als eine Bühne ---------- */
.sec--dark.sd-a { background: linear-gradient(180deg, #17171a 0%, #131316 100%); }
.sec--dark.sd-b { background: linear-gradient(180deg, #131316 0%, #0e0e10 100%); }
.sec--dark.sd-b::before {
  background:
    radial-gradient(58% 34% at 50% 104%, rgba(0, 113, 227, 0.10), transparent 72%),
    radial-gradient(46% 26% at 12% -4%, rgba(232, 163, 61, 0.06), transparent 70%);
}
/* Vorher/Nachher auf dunklem Grund */
.sec--dark .ba-slider { background: #1c1c20; box-shadow: var(--shadow-dark); }
.sec--dark .ba-caption b { color: #fff; }
.sec--dark .ba-caption span { color: rgba(255, 255, 255, 0.52); }
.sec--dark .ba-hint { color: rgba(255, 255, 255, 0.45); }
.sec--dark .ba-tag--after { color: #2b8cf0; }

/* ---------- Navigation: hell über hell, dunkel über dunkel ---------- */
.site-header,
.brand-mono, .brand-text strong, .brand-text em,
.nav-link, .lang-switch, .lang-btn, .gseg, .gseg-btn,
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  transition: background 0.35s var(--ease), color 0.35s var(--ease),
              border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.site-header.on-dark { background: rgba(18, 18, 21, 0.6); border-bottom-color: transparent; }
.site-header.on-dark.scrolled { background: rgba(18, 18, 21, 0.78); border-bottom-color: rgba(255, 255, 255, 0.09); }
.on-dark .brand-mono { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.18); color: #fff; }
.on-dark .brand-mono b { color: #6cb0ff; }
.on-dark .brand-text strong { color: #fff; }
.on-dark .brand-text em { color: rgba(255, 255, 255, 0.45); }
.on-dark .nav-link { color: rgba(255, 255, 255, 0.62); }
.on-dark .nav-link:hover, .on-dark .nav-link.active { color: #fff; }
.on-dark .lang-switch, .on-dark .gseg { background: rgba(255, 255, 255, 0.11); }
.on-dark .lang-btn, .on-dark .gseg-btn { color: rgba(255, 255, 255, 0.58); }
.on-dark .lang-btn.active, .on-dark .gseg-btn.active {
  background: rgba(255, 255, 255, 0.94); color: #1d1d1f; box-shadow: none;
}
.on-dark .lang-btn:not(.active):hover, .on-dark .gseg-btn:not(.active):hover { color: #fff; }
.on-dark .nav-toggle span,
.on-dark .nav-toggle span::before,
.on-dark .nav-toggle span::after { background: #fff; }

/* ---------- Eingang: dunkle Bühne statt weißer Fläche ---------- */
.gate {
  background:
    radial-gradient(78% 62% at 50% -8%, #26262b 0%, #17171a 46%, #0d0d0f 100%);
}
.gate::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--grain); opacity: 0.16; mix-blend-mode: overlay;
}
.gate-inner { position: relative; z-index: 1; }
.gate-mono {
  width: auto; height: auto; background: transparent; border-color: transparent;
  color: #fff;
}
.gate-mono b { color: #6cb0ff; }
.gate-title { color: #fff; }
.gate-sub { color: rgba(255, 255, 255, 0.6); }
.gate-note { color: rgba(255, 255, 255, 0.4); }
.gate-card { background: #1c1c20; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5); }
.gate-card:hover { box-shadow: 0 40px 90px rgba(0, 0, 0, 0.62); }
.gate-ov { background: linear-gradient(180deg, rgba(0,0,0,0.02) 34%, rgba(0,0,0,0.68) 100%); }

/* Preisbereich: von der warmen Fläche ins klare Weiß und zurück in die Tiefe */
/* Startete oben in derselben warmen Farbe wie der Abschnitt darüber – genau
   deshalb war der Übergang unsichtbar. Beginnt jetzt sofort auf Weiß; das gibt
   eine echte Stufe und die Preisliste steht auf dem klarsten Grund. */
.sec--lift {
  background: linear-gradient(180deg,
    #ffffff 0%, #ffffff 84%, #f6f4f1 94%, #f3f1ee 100%);
}

/* ============================================================
   HIERARCHIE v7 — Bühne, Person, Person
   Nach der Bereichswahl: eine breite Kino-Bühne statt einer
   zweiten Kachel im Porträtformat. Darunter zwei klar als
   Menschen lesbare Porträts – gleiche Form, gespiegelt.
   ============================================================ */

/* ---------- Held: breite Bühne, sobald ein Bereich gewählt ist ---------- */
html[data-gender] .hero-tiles {
  grid-template-columns: 1fr;
  max-width: none;
  margin-inline: 0;
}
html[data-gender] .tile {
  min-height: 0;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-xl);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.16);
}
/* Textseite links abdunkeln – der Kopf im Bild bleibt frei */
/* Barbier-Bild ist von Haus aus dunkel → dezenter Schleier reicht */
html[data-gender] .tile .hero-overlay {
  background:
    linear-gradient(96deg, rgba(0,0,0,0.58) 0%, rgba(0,0,0,0.32) 40%, rgba(0,0,0,0.02) 72%),
    linear-gradient(0deg, rgba(0,0,0,0.24) 0%, transparent 38%);
}
html[data-gender] .hero-women .hero-overlay {
  background:
    linear-gradient(96deg, rgba(0,0,0,0.80) 0%, rgba(0,0,0,0.52) 40%, rgba(0,0,0,0.06) 74%),
    linear-gradient(0deg, rgba(0,0,0,0.3) 0%, transparent 38%);
}
html[data-gender] .tile .hero-content { max-width: 540px; padding: 0 0 0 56px; }
html[data-gender] .tile { align-items: center; }
html[data-gender] .hero-title { font-size: clamp(32px, 3.6vw, 52px); }
html[data-gender] .hero-sub { font-size: 16.5px; max-width: 440px; }

/* ---------- Porträts: gleiche Form, gespiegelt, klar kleiner ---------- */
.about-img { position: relative; margin: 0; box-shadow: var(--shadow-soft); }
.about-grid .about-img { aspect-ratio: 4 / 5; width: 100%; max-width: none; }
.about-grid:not(.about-grid--chavi) .about-visual { justify-self: end; width: 100%; max-width: 420px; }
.about-grid--chavi .about-visual { justify-self: start; width: 100%; max-width: 420px; }
.about-grid--chavi .about-img { aspect-ratio: 4 / 5; }
.about-grid--chavi .about-img img { object-position: 50% 22%; }

/* Namensschild – macht sofort klar: das ist ein Mensch, kein Salon */
.ph-name {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 62px 22px 20px;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.72) 100%);
  text-align: left;
}
.ph-name b {
  display: block;
  font-family: var(--font-display); font-weight: 700;
  font-size: 26px; letter-spacing: -0.02em; color: #fff;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.4);
}
.ph-name span {
  display: block; margin-top: 2px;
  font-size: 12.5px; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
/* Bewertungs-Chip wandert nach oben, damit er das Namensschild nicht überlagert */
.about-visual .rate-chip { top: 16px; bottom: auto; left: 16px; }

@media (max-width: 900px) {
  /* Bühne läuft randlos über die volle Breite – Porträts bleiben eingerückt.
     Das trennt "Salon" und "Mensch" auch ohne Querformat. */
  html[data-gender] .hero-tiles {
    width: calc(100% + var(--gutter) * 2);
    margin-inline: calc(var(--gutter) * -1);
  }
  html[data-gender] .tile {
    aspect-ratio: auto; min-height: 520px; align-items: flex-end;
    border-radius: 0; box-shadow: none;
  }
  html[data-gender] .tile .hero-content { padding: 0 22px 34px; max-width: none; }
  html[data-gender] .tile .hero-overlay,
  html[data-gender] .hero-women .hero-overlay {
    background: linear-gradient(185deg, rgba(0,0,0,0.04) 20%, rgba(0,0,0,0.5) 60%, rgba(0,0,0,0.82) 100%);
  }
  .about-grid:not(.about-grid--chavi) .about-visual,
  .about-grid--chavi .about-visual { justify-self: center; width: 100%; max-width: 300px; }
}

/* ============================================================
   FEINSCHLIFF v8 — Kontakt-Reihenfolge & spürbares Preis-Öffnen
   ============================================================ */

/* Kontakt/Adresse: Damen links, Herren rechts (Karten getauscht) */
.loc-card.is-women { order: -1; }

/* Preis-Bühne öffnet sich sichtbar von unten – das rechte Preis-Panel
   steigt herauf, die Zeilen ziehen gestaffelt nach. */
@keyframes psRise    { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@keyframes psFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes psRowRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.pm-stage { animation: psFadeIn 0.45s var(--ease) backwards; }
.pm-stage .ps-media { animation: psFadeIn 0.6s var(--ease) backwards; }
.pm-stage .ps-panel { animation: psRise 0.62s var(--ease) 0.06s backwards; }
.ps-panel .pm-anim > * { animation: psRowRise 0.5s var(--ease) backwards; }
.ps-panel .pm-anim > *:nth-child(1) { animation-delay: 0.16s; }
.ps-panel .pm-anim > *:nth-child(2) { animation-delay: 0.22s; }
.ps-panel .pm-anim > *:nth-child(3) { animation-delay: 0.28s; }
.ps-panel .pm-anim > *:nth-child(4) { animation-delay: 0.34s; }
.ps-panel .pm-anim > *:nth-child(n+5) { animation-delay: 0.40s; }

/* Ausgewählte Längen-Karte: leuchtet kurz auf, bevor sich die Bühne öffnet */
.len-cards.pick .len-card.is-picking { border-color: var(--blue); transform: translateY(-3px); box-shadow: 0 16px 38px rgba(0, 113, 227, 0.20); }
.len-cards.pick .len-card.is-picking .lc-img { outline-color: var(--blue); box-shadow: 0 14px 30px rgba(0, 113, 227, 0.22); }
.len-cards.pick .len-card.is-picking .lc-check { opacity: 1; transform: scale(1); }
.len-cards.pick .len-card.is-picking .lc-label { color: var(--blue); }

/* Aufgeklappte Preisgruppe landet sauber unter dem Header, nicht dahinter */
.price-list .acc { scroll-margin-top: calc(var(--header-h) + 16px); }

/* Modelbild passt immer ins Fenster → es bleibt beim Blättern länger stehen,
   statt unten abgeschnitten zu werden und früh wegzuscrollen. */
.ps-media { max-height: calc(100vh - var(--header-h) - 44px); }

/* ============================================================
   LOGO v9 — goldenes Unendlichkeits-Monogramm (CC)
   Gold funktioniert auf hellem wie dunklem Grund, deshalb
   entfällt der frühere weiße Kasten samt Rahmen.
   ============================================================ */
.brand-mono {
  width: 48px; height: 23px;
  background: none; border: 0; border-radius: 0;
  padding: 0; overflow: visible;
}
.brand-mono img { width: 100%; height: 100%; object-fit: contain; }
/* Kasten-Styles der adaptiven Navigation neutralisieren */
.on-dark .brand-mono { background: none; border-color: transparent; }

.gate-mono { width: 104px; height: 51px; margin-bottom: 22px; }

/* Wortmarke "CIHAN & CHAVI" ist deutlich breiter als vorher – nie umbrechen
   lassen und auf schmalen Geräten Schrift + Sprachschalter zurücknehmen. */
.brand-text strong, .brand-text em { white-space: nowrap; }
@media (max-width: 400px) {
  .brand-text strong { font-size: 12.5px; letter-spacing: 0.05em; }
  .brand-text em { font-size: 8px; letter-spacing: 0.1em; }
  .lang-btn { padding: 5px 7px; font-size: 10.5px; }
  .brand-mono { width: 42px; height: 20px; }
}

/* ============================================================
   KOPF v10 — Marken-Lockup mittig, Navigation links & rechts
   Vier Wörter sitzen an den vier Enden des Logos.
   ============================================================ */
:root { --header-h: 66px; }

.brand {
  display: grid; grid-template-columns: auto auto auto;
  align-items: center; column-gap: 9px; row-gap: 0;
}
.bl-a { grid-area: 1 / 1 / 2 / 2; text-align: right; }
.brand .brand-mono { grid-area: 1 / 2 / 3 / 3; }
.bl-b { grid-area: 1 / 3 / 2 / 4; text-align: left; }
.bl-c { grid-area: 2 / 1 / 3 / 2; text-align: right; }
.bl-d { grid-area: 2 / 3 / 3 / 4; text-align: left; }
.bl-a, .bl-b {
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; letter-spacing: 0.12em; line-height: 1.25;
  color: var(--ink); white-space: nowrap;
}
.bl-c, .bl-d {
  font-size: 8px; letter-spacing: 0.2em; line-height: 1.3;
  text-transform: uppercase; color: var(--text-faint); white-space: nowrap;
}
.site-header .brand-mono { width: 52px; height: 25px; }
.on-dark .bl-a, .on-dark .bl-b { color: #fff; }
.on-dark .bl-c, .on-dark .bl-d { color: rgba(255, 255, 255, 0.5); }

/* Drei Spalten: gleich breite Seiten halten die Marke exakt mittig */
.header-inner {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 12px;
}
.nav-l { grid-column: 1; justify-self: start; }
.site-header .brand { grid-column: 2; justify-self: center; }
.hdr-right { grid-column: 3; display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-width: 0; }
.main-nav { gap: 2px; }
.nav-link { padding: 8px 10px; }

/* Fusszeile behält das Lockup, aber linksbündig */
.site-footer .brand { justify-content: start; }

@media (max-width: 900px) {
  /* Vollbild-Menü: obere Hälfte = linke Links, untere = rechte Links */
  .nav-l { inset: 0 0 50% 0; justify-content: flex-end; padding-bottom: 6px; }
  .nav-r { inset: 50% 0 0 0; justify-content: flex-start; padding-top: 6px; }
  .hdr-right { gap: 8px; }
}
@media (max-width: 400px) {
  .bl-a, .bl-b { font-size: 11px; letter-spacing: 0.07em; }
  .bl-c, .bl-d { font-size: 6.8px; letter-spacing: 0.14em; }
  .brand { column-gap: 6px; }
  .site-header .brand-mono { width: 42px; height: 20px; }
}

/* Linke Spalte trägt Navigation + Bereichsschalter, damit beide Seiten
   ähnlich schwer sind und die Marke wirklich mittig stehen kann. */
.hdr-left { grid-column: 1; justify-self: start; display: flex; align-items: center; gap: 12px; min-width: 0; }
.header-inner { gap: 10px; }
.nav-link { padding: 8px 9px; }

/* Unter 1100px passen Navigation + Marke + Aktionen nicht mehr nebeneinander
   → kompakter Kopf mit Menütaste, Marke bleibt mittig. */
@media (max-width: 1140px) {
  .nav-l, .nav-r {
    position: fixed; left: 0; right: 0; z-index: 120;
    display: flex; flex-direction: column; gap: 4px;
    background: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s;
  }
  .nav-l { top: 0; height: 50vh; justify-content: flex-end; padding-bottom: 6px; }
  .nav-r { top: 50vh; height: 50vh; justify-content: flex-start; padding-top: 6px; }
  body.nav-open .nav-l, body.nav-open .nav-r { opacity: 1; visibility: visible; }
  .nav-l .nav-link, .nav-r .nav-link { font-size: 24px; padding: 12px; color: var(--ink); font-weight: 500; text-align: center; }
  .nav-toggle { display: block; }
  .header-actions .btn { display: none; }
  .hdr-left .gseg { display: none; }
  .gseg--hero { display: inline-flex; }
}

/* Menü-Hälften: feste Breite statt left/right, sonst kollidieren die
   inset-Regeln aus zwei Media-Blöcken und die obere Hälfte schrumpft. */
@media (max-width: 1140px) {
  .nav-l, .nav-r { inset: auto; left: 0; right: auto; width: 100vw; max-width: 100vw; }
  .nav-l { top: 0; height: 50vh; }
  .nav-r { top: 50vh; height: 50vh; }
}

/* Preisgruppen: universelle Symbole statt Fotos – bei 56px lesbarer */
.acc-ico {
  width: 56px; height: 56px; border-radius: 16px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: rgba(0, 113, 227, 0.08); color: var(--blue);
  transition: background 0.25s, color 0.25s;
}
.acc.open .acc-ico { background: var(--blue); color: #fff; }
@media (max-width: 900px) {
  .acc-ico { width: 48px; height: 48px; border-radius: 13px; }
  .acc-ico svg { width: 23px; height: 23px; }
}

/* Preiszeile überfahren: Zeile hebt sich, links erscheint das passende Foto */
@media (hover: hover) {
  .ps-panel .svc-row[data-img] { cursor: default; border-radius: 10px; transition: background 0.2s, box-shadow 0.2s; }
  .ps-panel .svc-row[data-img]:hover { background: rgba(0, 113, 227, 0.06); box-shadow: 0 0 0 6px rgba(0, 113, 227, 0.06); }
  .ps-panel .svc-row[data-img]:hover .svc-name { color: var(--blue); }
  .ps-panel .svc-row[data-img]:hover .svc-price { color: var(--blue); }
}

/* ============================================================
   HERO v11 — kinoformatiger Vollbild-Auftritt
   Bild fuellt den Bildschirm, Text liegt darauf, Bewertung sichtbar.
   ============================================================ */
/* 88vh statt Vollbild: unten blitzt der naechste Abschnitt durch – das zeigt,
   dass es weitergeht, und wirkt weniger wie eine Wand. */
.hero { padding: 0; height: 88svh; min-height: 520px; max-height: 860px; position: relative; }
.hero::before { display: none; }
.hero .tile {
  position: absolute; inset: 0;
  min-height: 0; aspect-ratio: auto; border-radius: 0; box-shadow: none;
  display: flex; align-items: flex-end; overflow: hidden;
}
html[data-gender] .hero-tiles { display: contents; }
.hero .hero-bg img { transform: scale(1.06); animation: heroZoom 14s var(--ease) forwards; }
@keyframes heroZoom { to { transform: scale(1); } }
.hero .hero-overlay {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.46) 0%, rgba(0,0,0,0.12) 32%, rgba(0,0,0,0.62) 78%, rgba(0,0,0,0.82) 100%),
    linear-gradient(96deg, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.12) 52%, transparent 78%);
}
.hero .hero-content {
  position: relative; z-index: 2; max-width: none;
  padding: 0 0 clamp(56px, 9vh, 104px);
  text-align: left;
}
.hero .hero-kicker {
  font-size: 13px; letter-spacing: 0.2em; color: rgba(255,255,255,0.85);
  margin-bottom: 16px;
}
.hero .hero-title {
  font-size: clamp(40px, 7.2vw, 92px); line-height: 1.02; letter-spacing: -0.035em;
  margin-bottom: 18px; max-width: 15ch;
}
.hero .hero-title .ht2 { font-size: 0.6em; margin-top: 0.12em; }
.hero .hero-sub {
  font-size: clamp(16px, 1.5vw, 20px); color: rgba(255,255,255,0.9);
  max-width: 52ch; margin-bottom: 30px;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero .btn-gold { padding: 15px 30px; font-size: 16px; border-radius: 14px; }
.btn-glass {
  background: rgba(255,255,255,0.16); color: #fff; padding: 15px 26px;
  font-size: 16px; border-radius: 14px; text-decoration: none;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.28);
}
.btn-glass:hover { background: rgba(255,255,255,0.26); }
/* Bewertung direkt im ersten Bildschirm */
.hero-trust {
  display: inline-flex; align-items: baseline; gap: 9px; margin-top: 26px;
  font-size: 14px; color: rgba(255,255,255,0.82);
}
.hero-trust .ht-stars { color: var(--amber); letter-spacing: 2px; font-size: 13px; }
.hero-trust b { font-family: var(--font-display); font-size: 18px; color: #fff; }
/* Scroll-Hinweis */
.hero-scroll {
  position: absolute; left: 50%; bottom: 22px; z-index: 3; transform: translateX(-50%);
  width: 26px; height: 42px; border: 1.6px solid rgba(255,255,255,0.55); border-radius: 14px;
}
.hero-scroll span {
  position: absolute; left: 50%; top: 9px; width: 3px; height: 7px; border-radius: 2px;
  background: rgba(255,255,255,0.9); transform: translateX(-50%);
  animation: scrollDot 1.9s var(--ease) infinite;
}
@keyframes scrollDot { 0%,100% { opacity:0; transform:translate(-50%,0) } 40% { opacity:1 } 75% { opacity:0; transform:translate(-50%,13px) } }

/* ---------- Schnellzugriff direkt unter dem Auftritt ---------- */
.quick { padding: 22px 0 0; background: var(--bg); }
.quick-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.qc {
  display: flex; flex-direction: column; gap: 3px; text-decoration: none;
  padding: 18px 18px 16px; border-radius: 16px;
  background: var(--bg-warm); border: 1px solid transparent;
  transition: transform 0.25s var(--ease), box-shadow 0.25s, border-color 0.25s;
}
.qc svg { color: var(--blue); margin-bottom: 7px; }
.qc b { font-family: var(--font-display); font-size: 15.5px; color: var(--ink); font-weight: 600; }
.qc small { font-size: 13px; color: var(--text-faint); }
.qc:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); border-color: var(--line); }

@media (max-width: 900px) {
  .hero { height: 84svh; min-height: 480px; }
  .hero .hero-content { padding-bottom: 92px; }
  .hero .hero-title { max-width: 12ch; }
  .hero-actions { gap: 10px; }
  .hero .btn-gold, .btn-glass { padding: 14px 22px; font-size: 15px; }
  .quick-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .qc { padding: 15px 14px 13px; border-radius: 14px; }
}
@media (max-width: 560px) {
  .hero .hero-sub { display: none; }
  .hero-trust { margin-top: 20px; }
}

/* ============================================================
   RHYTHMUS v12 — kompakter, ohne gedraengt zu wirken
   ============================================================ */
.sec { padding: 92px 0; }
.sec-head { margin-bottom: 48px; }
.about-grid { gap: 56px; }
.about-grid--chavi { margin-top: 56px; }
.about-features { gap: 10px; margin-top: 24px; }
.about-features li { padding: 13px 14px; }
.stats-band { margin-top: 56px; }
.cta-band { padding: 88px 0; }
.quick { padding: 26px 0 0; }

@media (max-width: 900px) {
  .sec { padding: 68px 0; }
  .sec-head { margin-bottom: 36px; }
  .about-grid { gap: 36px; }
  .about-grid--chavi { margin-top: 44px; }
  .stats-band { margin-top: 44px; }
  .cta-band { padding: 64px 0; }
}

/* ============================================================
   FAQ & ANFAHRT v13
   ============================================================ */
.faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 26px; max-width: 1000px; margin: 0 auto; }
.faq-col { display: flex; flex-direction: column; gap: 12px; }
.faq-i {
  background: #fff; border-radius: 16px; border: 1px solid transparent;
  box-shadow: var(--shadow-soft); overflow: hidden;
  transition: box-shadow 0.25s;
}
.faq-i summary {
  list-style: none; cursor: pointer; padding: 18px 46px 18px 20px; position: relative;
  font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--ink);
}
.faq-i summary::-webkit-details-marker { display: none; }
.faq-i summary::after {
  content: ''; position: absolute; right: 20px; top: 50%; width: 10px; height: 10px;
  border-right: 2px solid var(--text-faint); border-bottom: 2px solid var(--text-faint);
  transform: translateY(-70%) rotate(45deg); transition: transform 0.3s var(--ease), border-color 0.3s;
}
.faq-i[open] summary::after { transform: translateY(-30%) rotate(-135deg); border-color: var(--blue); }
.faq-i[open] { box-shadow: var(--shadow-hover); }
.faq-i p { margin: 0; padding: 0 20px 18px; font-size: 15px; color: var(--text-dim); }

.arrive { margin-top: 56px; max-width: 1000px; margin-inline: auto; }
.arrive h3 {
  font-family: var(--font-display); font-size: 20px; color: var(--ink);
  text-align: center; margin-bottom: 24px;
}
.arrive-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.arr-i {
  display: flex; gap: 13px; align-items: flex-start;
  background: #fff; border-radius: 16px; padding: 18px 18px;
  box-shadow: var(--shadow-soft);
}
.arr-i svg { flex: 0 0 auto; color: var(--blue); margin-top: 2px; }
.arr-i b { display: block; font-size: 15px; color: var(--ink); margin-bottom: 3px; }
.arr-i span { font-size: 14px; color: var(--text-dim); line-height: 1.55; }

@media (max-width: 900px) {
  .faq-grid { grid-template-columns: 1fr; gap: 12px; }
  .arrive-grid { grid-template-columns: 1fr; }
  .arrive { margin-top: 40px; }
}

/* Mobile Buchungsleiste: ab dem zweiten Bildschirm immer griffbereit */
.bookbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  display: none; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 16px calc(11px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(1.8) blur(20px); backdrop-filter: saturate(1.8) blur(20px);
  border-top: 1px solid var(--line);
  transform: translateY(105%); transition: transform 0.35s var(--ease);
}
.bookbar.show { transform: none; }
.bb-info { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.bb-stars { color: var(--amber); font-size: 12px; letter-spacing: 1px; }
.bb-info b { font-family: var(--font-display); font-size: 16px; color: var(--ink); }
.bb-info small { font-size: 12.5px; color: var(--text-faint); white-space: nowrap; }
.bookbar .btn { padding: 11px 20px; font-size: 14.5px; }
@media (max-width: 900px) {
  .bookbar { display: flex; }
  body.nav-open .bookbar { transform: translateY(105%); }
  .fabs { bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
}
.hero-trust .ht-n { font-style: normal; color: rgba(255,255,255,0.92); margin-right: 5px; }

/* ============================================================
   FEINSCHLIFF v14 — Minimalismus & Lebendigkeit
   Weniger Kanten, mehr Luft, praezisere Typografie,
   Mikro-Interaktionen mit Absicht (nicht als Deko).
   ============================================================ */

/* ---------- Typografie: klarere Hierarchie, ruhigerer Fluss ---------- */
.sec-title { letter-spacing: -0.035em; }
.sec-sub { font-size: 18px; color: var(--text-dim); max-width: 62ch; }
.sec-head.center .sec-sub { margin-inline: auto; }
.kicker { font-size: 12px; letter-spacing: 0.16em; color: var(--text-faint); margin-bottom: 16px; }

/* ---------- Ruhigere Flaechen: weniger Rahmen, mehr Luft ---------- */
.price-card, .acc, .qc, .faq-i, .arr-i, .loc-card, .team-card, .quote-card {
  border-color: rgba(0, 0, 0, 0.05);
}
.acc { box-shadow: none; border: 1px solid rgba(0, 0, 0, 0.06); }
.acc.open { box-shadow: 0 10px 34px rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.04); }
.svc-row { border-top-color: rgba(0, 0, 0, 0.05); }

/* ---------- Mikro-Interaktionen mit Absicht ---------- */
/* Jede Taste gibt Rueckmeldung */
.btn, .qc, .acc-head, .len-card, .gseg-btn, .lang-btn, .faq-i summary {
  -webkit-tap-highlight-color: transparent;
}
.btn { transition: background 0.22s, color 0.22s, transform 0.16s var(--ease), box-shadow 0.25s; }
.btn:active { transform: scale(0.975); }
.qc:active, .len-card:active { transform: scale(0.985); }

/* Textlinks: Unterstrich waechst aus der Mitte */
.btn-link, .foot-col a, .nav-link { position: relative; }
.foot-col a::after, .btn-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: 50% 50%;
  transition: transform 0.32s var(--ease);
}
.foot-col a:hover::after, .btn-link:hover::after { transform: scaleX(1); }
.foot-col a:hover { text-decoration: none; }
.btn-link:hover { text-decoration: none; }

/* Aktiver Menuepunkt bekommt einen feinen Punkt statt Farbe allein */
.nav-link.active::after {
  content: ''; position: absolute; left: 50%; bottom: 2px; width: 4px; height: 4px;
  border-radius: 50%; background: var(--blue); transform: translateX(-50%);
  animation: navDot 0.4s var(--ease) both;
}
@keyframes navDot { from { opacity: 0; transform: translateX(-50%) scale(0.2); } to { opacity: 1; transform: translateX(-50%) scale(1); } }

/* Bilder atmen beim Ueberfahren – ruhig, nicht sprunghaft */
.wi-img img, .lc-photo img, .about-img img, .gate-card img {
  transition: transform 0.9s var(--ease), filter 0.6s var(--ease);
}
.work-item:hover .wi-img img { transform: scale(1.045); }

/* Sanftes Auftauchen: gestaffelt statt gleichzeitig */
[data-reveal] { transition-duration: 0.75s; }
.wg-grid > *:nth-child(2) { transition-delay: 0.06s; }
.wg-grid > *:nth-child(3) { transition-delay: 0.12s; }
.wg-grid > *:nth-child(4) { transition-delay: 0.18s; }
.team-grid > *:nth-child(2) { transition-delay: 0.07s; }
.team-grid > *:nth-child(3) { transition-delay: 0.14s; }
.team-grid > *:nth-child(4) { transition-delay: 0.21s; }
.quick-grid > *:nth-child(2) { transition-delay: 0.05s; }
.quick-grid > *:nth-child(3) { transition-delay: 0.1s; }
.quick-grid > *:nth-child(4) { transition-delay: 0.15s; }

/* Leichter Tiefeneffekt beim Scrollen (per JS gesetzt) */
.para { will-change: transform; }

/* Fokus sichtbar, aber elegant */
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 8px; }

/* Feiner Fortschrittsbalken oben: zeigt, wie weit man ist */
.progress {
  position: fixed; top: 0; left: 0; height: 2px; z-index: 130;
  background: var(--blue); width: 0; transition: width 0.1s linear;
}

/* ============================================================
   POLITUR v15 — ruhigere Portraets, feinere Scrollleiste
   ============================================================ */

/* Bewertungs-Chip: kompakt und unten rechts – oben am Abschnittsrand
   wirkte er wie ein Fremdkoerper. Namensschild bleibt unten links. */
.about-visual .rate-chip {
  top: auto; bottom: 16px; left: auto; right: 16px;
  gap: 6px; padding: 9px 13px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18);
}
.about-visual .rate-chip .stars { font-size: 11px; letter-spacing: 1px; }
.about-visual .rate-chip b { font-size: 15px; }
.about-visual .rate-chip small { font-size: 11.5px; color: var(--text-faint); }
/* Namensschild: Textkasten umschliesst nur den Text, dann kollidiert
   er nie mit dem Bewertungs-Chip – unabhaengig von der Bildbreite. */
.ph-name b, .ph-name span { width: max-content; max-width: 100%; }

/* Feine Scrollleiste: schlank, unaufdringlich, reagiert auf Beruehrung */
* { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.18) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.16); border-radius: 99px; border: 2px solid transparent;
  background-clip: content-box; transition: background 0.25s;
}
::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.3); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* Stapelreihenfolge absichern: kein Abschnitt darf ueber dem naechsten liegen.
   Der Auftritt bleibt unten, alles Folgende darueber. */
.hero { z-index: 0; }
main > section:not(.hero) { position: relative; z-index: 1; }

/* ============================================================
   LUXUS-POLITUR v16
   Kaesten raus, Haarlinien rein. Luft statt Rahmen.
   Kein Kachelblock direkt unter dem Auftritt – das wirkte wie ein
   Amtsportal. Stattdessen eine ruhige Markenleiste.
   ============================================================ */
.ribbon { background: var(--bg); padding: 0; }
.ribbon-in {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}
.rb-i {
  padding: 34px 26px 32px; position: relative;
  display: flex; flex-direction: column; gap: 5px;
}
.rb-i + .rb-i::before {
  content: ''; position: absolute; left: 0; top: 32px; bottom: 30px;
  width: 1px; background: rgba(0, 0, 0, 0.07);
}
.rb-i b {
  font-size: 11px; font-weight: 600; letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--text-faint);
}
.rb-i span {
  font-family: var(--font-display); font-size: 16.5px; font-weight: 500;
  color: var(--ink); letter-spacing: -0.012em; line-height: 1.35;
}

/* Auftritt: Inhalt schrumpft mit, wenn das Fenster flach ist.
   Vorher lief der Text unten heraus und stiess an den Scroll-Hinweis. */
.hero .hero-content { padding-bottom: clamp(40px, 7vh, 86px); }
.hero .hero-title { font-size: clamp(34px, min(6.4vw, 9.4vh), 84px); }
.hero .hero-sub { font-size: clamp(15px, 1.4vw, 19px); margin-bottom: clamp(16px, 2.6vh, 30px); }
.hero-trust { margin-top: clamp(12px, 2.4vh, 24px); }
@media (max-height: 700px) {
  .hero .hero-sub { display: none; }
  .hero-scroll { display: none; }          /* kein Platz -> lieber weglassen */
}

@media (max-width: 900px) {
  .ribbon-in { grid-template-columns: 1fr 1fr; }
  .rb-i { padding: 22px 18px; }
  .rb-i:nth-child(n+3)::after {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
    background: rgba(0, 0, 0, 0.07);
  }
  .rb-i:nth-child(3)::before { display: none; }
}

/* ============================================================
   AUFTRITT v17 — ruhig und unbedraengt
   Kein Scroll-Hinweis, keine Leiste. Das Bild bekommt seinen Raum,
   der Text wird nicht mehr zusammengequetscht.
   ============================================================ */
.ribbon { display: none; }
.hero-scroll { display: none; }

/* Grosszuegige, ruhige Hoehe – ohne Zwang zur Schrumpfung */
.hero { height: 86svh; min-height: 560px; max-height: 900px; }
.hero .hero-content { padding-bottom: clamp(52px, 8vh, 92px); }
.hero .hero-title { font-size: clamp(38px, 6vw, 82px); }
.hero .hero-sub { font-size: clamp(16px, 1.4vw, 19px); margin-bottom: 28px; }
.hero-trust { margin-top: 24px; }

/* Flache Fenster: nur die Beschreibung weicht, der Rest bleibt in Ruhe */
@media (max-height: 640px) {
  .hero .hero-sub { display: none; }
  .hero { min-height: 460px; }
}
@media (max-width: 900px) {
  .hero { height: 82svh; min-height: 480px; }
}

/* ============================================================
   AUFTRITT v18 — Editorial-Split: links Text, rechts Bild
   Grund: die Salonfotos sind quadratisch. In einem breiten Banner
   sieht man nur einen schmalen Streifen davon (bei flachen Fenstern
   nur 34 %). Im hohen Rahmen rechts ist das Bild fast vollstaendig
   zu sehen – und der Text steht ruhig auf Weiss statt auf dem Foto.
   ============================================================ */
.hero {
  height: auto; min-height: 0; max-height: none;
  padding: calc(var(--header-h) + clamp(24px, 4vh, 52px)) 0 clamp(40px, 6vh, 72px);
  background: var(--bg);
}
.hero::before { display: none; }
html[data-gender] .hero-tiles { display: contents; }

.hero .tile {
  position: relative; inset: auto;
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: center; gap: clamp(32px, 5vw, 72px);
  width: min(var(--container), calc(100% - var(--gutter) * 2));
  margin-inline: auto;
  min-height: 0; aspect-ratio: auto; overflow: visible;
  border-radius: 0; box-shadow: none;
}
/* Bildseite: hoher Rahmen, in dem ein quadratisches Foto fast ganz passt */
.hero .hero-bg {
  position: relative; inset: auto; order: 2;
  aspect-ratio: 4 / 4.05; border-radius: var(--radius-xl); overflow: hidden;
  background: var(--bg-alt); box-shadow: 0 34px 80px rgba(0, 0, 0, 0.16);
}
.hero .hero-bg img { width: 100%; height: 100%; object-fit: cover; transform: none; animation: none; }
.hero .hero-men .hero-bg img { object-position: 50% 34%; }
.hero .hero-women .hero-bg img { object-position: 50% 30%; }
.hero .hero-overlay { display: none; }

/* Textseite: ruhig auf Weiss, dunkle Schrift */
.hero .hero-content {
  order: 1; position: relative; z-index: 1;
  width: auto; max-width: none; padding: 0; text-align: left;
}
.hero .hero-kicker { color: var(--text-faint); text-shadow: none; }
.hero .hero-title {
  color: var(--ink); text-shadow: none;
  font-size: clamp(38px, 4.6vw, 68px); line-height: 1.03; max-width: 13ch;
}
.hero .hero-title em { color: var(--ink); }
.hero .hero-title .ht2 { color: var(--text-dim); }
.hero .hero-title .ht2 .amp { color: var(--text-faint); }

/* ============================================================
   ADRESSKARTEN v22 — Namen im Duktus des Ladenschilds
   Vorbild ist das Schild am Richard-von-Weizsäcker-Platz:
   zwei gesperrte Versalnamen nebeneinander, darunter die
   Fachbezeichnungen, verbunden durch ein zurückhaltendes &.
   ============================================================ */
.lc-sign { display: block; margin: 2px 0 0; }
.lc-sign .ls-top,
.lc-sign .ls-bot { display: flex; align-items: baseline; gap: 0.9em; }
.lc-sign .ls-top b {
  font-family: var(--font-display); font-weight: 700;
  font-size: 21px; letter-spacing: 0.1em; color: var(--ink); line-height: 1.1;
}
.lc-sign .ls-bot { margin-top: 1px; gap: 0.42em; }
.lc-sign .ls-bot i {
  font-style: normal; font-size: 12.5px; letter-spacing: 0.19em;
  color: var(--text-faint); line-height: 1.2;
}
.lc-sign .ls-bot em {
  font-style: normal; font-size: 12.5px; color: var(--line-strong); font-weight: 600;
}
/* Die Unterzeile sitzt bündig unter den beiden Namen */
.lc-sign:not(.lc-sign--solo) .ls-bot { justify-content: space-between; max-width: 12.4em; }
.lc-sign--solo .ls-bot { gap: 0; }
@media (max-width: 560px) {
  .lc-sign .ls-top b { font-size: 18px; letter-spacing: 0.08em; }
  .lc-sign .ls-bot i, .lc-sign .ls-bot em { font-size: 11.5px; letter-spacing: 0.15em; }
}

/* Die vierte Sprache macht den Umschalter breiter; bei mittleren Fensterbreiten
   lief die rechte Navigation dadurch in den Markenschriftzug. Gemessen bei
   1280 px: rechte Seite braucht 506 px, verfügbar sind 461 px. */
@media (min-width: 1024px) and (max-width: 1439px) {
  .lang-btn { padding: 5.5px 7px; }
  .main-nav .nav-link { padding: 8px 6px; font-size: 13.5px; }
  .hdr-right { gap: 9px; }
  .header-actions { gap: 9px; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .lang-btn { padding: 5px 5px; font-size: 11px; }
  .main-nav .nav-link { padding: 8px 5px; font-size: 13px; }
}

/* Auf dem Handy stand die Wortmarke mittig fixiert, während Sprachschalter und
   Menüknopf von rechts heranrückten – bei drei Sprachen schon knapp, bei vier
   überlappend. Auf schmalen Geräten steht die Marke deshalb links neben dem
   Menüknopf, statt in der Mitte zu kleben. */
@media (max-width: 720px) {
  .header-inner { grid-template-columns: auto 1fr auto; gap: 8px; }
  .site-header .brand { grid-column: 1; justify-self: start; }
  .hdr-right { grid-column: 3; }
  .nav-l { grid-column: 1 / -1; }        /* Vollbildmenü bleibt unberührt */
  .lang-btn { padding: 5px 7px; font-size: 10.5px; }
  .lang-switch { padding: 2px; }
  .header-actions { gap: 8px; }
  .brand { column-gap: 6px; }
  .bl-a, .bl-b { font-size: 11.5px; letter-spacing: 0.07em; }
  .bl-c, .bl-d { font-size: 7px; letter-spacing: 0.13em; }
  .site-header .brand-mono { width: 42px; height: 20px; }
}
@media (max-width: 400px) {
  .lang-btn { padding: 4.5px 5px; font-size: 10px; }
  .bl-a, .bl-b { font-size: 10.5px; letter-spacing: 0.05em; }
  .bl-c, .bl-d { font-size: 6.5px; letter-spacing: 0.1em; }
  .site-header .brand-mono { width: 36px; height: 17px; }
}

/* ============================================================
   ÜBER UNS v23 — die beiden Porträts als Paar
   Vorher: Cihan 3:2 quer und schwarzweiß, Chavi 4:5 hoch und farbig,
   dazu ungleiche Breiten. Jetzt tragen beide dasselbe Format, dieselbe
   Breite und dieselbe Bildsprache; nur die Seite wechselt.
   ============================================================ */
/* Die Selektorform muss der aus v6 entsprechen (dort steht :not(...) davor),
   sonst gewinnt die ältere Regel für den Cihan-Block und die beiden Bilder
   bekommen wieder unterschiedliche Breiten. */
.about-grid:not(.about-grid--chavi) .about-img,
.about-grid--chavi .about-img { aspect-ratio: 4 / 5; }
.about-grid:not(.about-grid--chavi) .about-img img,
.about-grid--chavi .about-img img { object-position: 50% 50%; }
.about-grid:not(.about-grid--chavi) .about-visual { width: 100%; max-width: 440px; justify-self: end; }
.about-grid--chavi .about-visual { width: 100%; max-width: 440px; justify-self: start; }

/* Beide Textspalten gleich breit und gleich hoch ausgerichtet */
.about-grid { align-items: center; }
.about-grid:not(.about-grid--chavi) .about-copy,
.about-grid--chavi .about-copy { max-width: 46ch; }
.about-grid:not(.about-grid--chavi) .about-copy { justify-self: start; }
.about-grid--chavi .about-copy { justify-self: end; }

@media (max-width: 900px) {
  .about-grid:not(.about-grid--chavi) .about-visual,
  .about-grid--chavi .about-visual { max-width: 420px; justify-self: center; }
  .about-grid:not(.about-grid--chavi) .about-copy,
  .about-grid--chavi .about-copy { max-width: none; }
  /* Einspaltig kam der Chavi-Block mit dem Bild zuerst, der Cihan-Block mit dem
     Text. Beide führen jetzt mit der Überschrift – gleiche Leseabfolge. */
  .about-grid--chavi .about-copy { order: -1; }
}

/* ============================================================
   ÜBER UNS v24 — Abschnittswechsel sichtbar machen
   Der helle Abschnitt lief bisher unmittelbar in das Hero-Foto darüber:
   zwei große Bilder untereinander, kein Signal für "neuer Abschnitt".
   Ein schmales dunkles Band setzt jetzt eine harte Kante und nennt
   zugleich beide Häuser mit Adresse.
   ============================================================ */
/* Warmes Anthrazit statt reinem Schwarz: dieselbe Trennkraft, aber mit brauner
   Untermalung. Reines #17171a schlug ein Loch in die warme Seite und stand in
   Konkurrenz zu den wirklich dunklen Abschnitten (Vorher/Nachher, Galerie). */
.sec-band {
  background: linear-gradient(180deg, #2e2a26 0%, #262220 100%);
  color: rgba(244, 241, 236, 0.9);
  margin: calc(var(--sec-pad, 92px) * -1) 0 clamp(56px, 7vw, 96px);
  padding: 15px 0;
}
.sec--warm .sec-band { margin-top: -92px; }
.sb-in {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(18px, 4vw, 54px); flex-wrap: wrap;
}
.sb-item { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.sb-item b {
  font-family: var(--font-display); font-weight: 600;
  font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; color: #f4f1ec;
}
.sb-item i {
  font-style: normal; font-size: 12px; letter-spacing: 0.04em;
  color: rgba(244, 241, 236, 0.5);
}
.sb-sep {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(244, 241, 236, 0.26); flex: 0 0 auto;
}

/* Gemeinsamer Abschnittskopf – wie in den übrigen Abschnitten mittig */
.about-open { margin-bottom: clamp(52px, 6vw, 84px); }
.about-open .about-logo { margin: 0 auto 16px; }
.about-open .sec-sub { max-width: 60ch; margin-left: auto; margin-right: auto; }

/* Logo über den Abschnitten */
.about-logo { display: block; width: 78px; height: auto; margin: 0 0 14px; opacity: 0.92; }

@media (max-width: 900px) {
  .about-logo { width: 66px; margin-bottom: 11px; }
  .sec--warm .sec-band { margin-top: -68px; }   /* Abschnittspolster ist hier 68 px */
  .sb-item { gap: 7px; }
  .sb-item b { font-size: 11px; letter-spacing: 0.12em; }
  .sb-item i { font-size: 11px; }
}
@media (max-width: 620px) {
  .sb-in { flex-direction: column; gap: 8px; }
  .sb-sep { display: none; }
  .sb-item { flex-direction: column; align-items: center; gap: 1px; white-space: normal; text-align: center; }
}

/* Abschlussband: gleiche Farbe wie das Band am Anfang. Der Abschnitt bekommt
   dadurch zwei erkennbare Kanten, und die Preisliste beginnt danach sichtbar neu. */
/* Der Grund wechselte an der Abschnittskante hart von Warm auf Weiss. Diese
   Kante braucht es nicht mehr: die weisse Karte markiert den Wechsel bereits.
   Der Abschnitt blendet deshalb auf seinem letzten Fuenftel nach Weiss – die
   Karte legt sich dann auf einen Grund, der ihre eigene Farbe schon angenommen
   hat, und der Uebergang wird weich statt gesetzt. */
/* Weicher Ausklang, aber erst UNTERHALB der Abschlusskarte. Lag der Verlauf
   auf dem ganzen Abschnitt, stand die weisse Karte auf fast weissem Grund –
   ihre Kante verschwand und sie klebte optisch an der naechsten Ueberschrift.
   Der Verlauf sitzt deshalb in einer eigenen Schicht ganz unten. */
#ueber-uns {
  position: relative;
  background: var(--bg-warm);
  padding-bottom: clamp(124px, 12vw, 172px);
}
#ueber-uns::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: clamp(112px, 11vw, 158px);
  background: linear-gradient(180deg, rgba(247, 245, 242, 0) 0%, #ffffff 100%);
  pointer-events: none;
}

/* Der Abschluss ist keine dunkle Flaeche mehr, sondern eine weisse Karte, die
   auf der Abschnittskante liegt: oben noch im warmen Grund, unten schon im
   weissen Preisteil. Die Karte markiert die Grenze selbst – so bleibt nur eine
   dunkle Flaeche im Abschnitt (das Band oben) statt zwei. */
/* Die Karte ragte urspruenglich ueber die Abschnittskante. Das funktionierte,
   solange darunter ein anderer Grund lag – nach dem weichen Verlauf lag sie
   weiss auf fast weiss und klebte optisch an der naechsten Ueberschrift.
   Jetzt sitzt sie vollstaendig im Abschnitt, mit klarem Abstand nach unten. */
.sec-close {
  background: transparent;
  margin: clamp(60px, 6vw, 92px) 0 0;
  padding: 0;
}
.sec-close .stats-band {
  margin-top: 0; border-top: 0;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.055);
  border-radius: var(--radius-xl);
  padding: clamp(34px, 3.6vw, 48px) clamp(22px, 3vw, 40px);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.07), 0 2px 5px rgba(0, 0, 0, 0.035);
  position: relative; z-index: 2;
}
.sec-close .stat-num { color: var(--ink); }
/* Gedaempftes Kupfer statt Gold – ein satter Goldton kippt hier schnell ins Billige */
.sec-close .stat-num sup { color: #c99f78; }
.sec-close .stat-label { color: var(--text-faint); }
/* Zwischen Karte und der naechsten Abschnittsueberschrift muss ein echter
   Abschnittsabstand liegen – vorher standen dort nur 72 px und beides las
   sich als ein Block. */
#leistungen { padding-top: clamp(104px, 10vw, 148px); }

@media (max-width: 900px) {
  #leistungen { padding-top: clamp(72px, 12vw, 104px); }
}

/* ------------------------------------------------------------
   Die vier Merkmale: statt vier schwebender weißer Kästchen ein
   ruhiges Raster mit Haarlinien. Das Symbol sitzt in einem Ring,
   die Farbe kommt aus der Tinte statt aus dem Blau – dadurch wirkt
   der Block gesetzt und nicht wie eingestreute Notizzettel.
   ------------------------------------------------------------ */
.about-features {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  margin-top: clamp(28px, 3.4vw, 42px);
  border-top: 1px solid var(--line);
}
.sec .about-features li,
.about-features li {
  display: flex; align-items: center; gap: 14px;
  background: none; border: 0; border-radius: 0;
  border-bottom: 1px solid var(--line);
  padding: 18px 0; min-width: 0;
  transition: background 0.25s var(--ease);
}
.about-features li:nth-child(odd) { padding-right: 22px; border-right: 1px solid var(--line); }
.about-features li:nth-child(even) { padding-left: 22px; }
.about-features li:hover { background: rgba(0, 0, 0, 0.018); }
.about-features li svg {
  flex: 0 0 auto; width: 17px; height: 17px; padding: 10px; margin: 0;
  box-sizing: content-box; border-radius: 50%;
  border: 1px solid var(--line-strong); color: var(--ink);
  stroke-width: 1.6;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.about-features li:hover svg { border-color: var(--ink); background: rgba(0, 0, 0, 0.03); }
.about-features li > div { min-width: 0; }
.about-features li > div > span {
  display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.012em; color: var(--ink);
}
.about-features li small {
  display: block; margin-top: 2px;
  font-size: 13px; font-weight: 400; color: var(--text-faint); line-height: 1.4;
}
@media (max-width: 560px) {
  .about-features { grid-template-columns: 1fr; }
  .about-features li:nth-child(odd) { padding-right: 0; border-right: 0; }
  .about-features li:nth-child(even) { padding-left: 0; }
  .about-features li { padding: 15px 0; gap: 13px; }
  .about-features li svg { width: 16px; height: 16px; padding: 9px; }
}

/* ============================================================
   MARKE v22 — "Chavi Cosmetic" gleichgewichtig zu "Coiffeur Cihan"
   Beide Häuser gehören zusammen; die zweite Zeile stand vorher auf
   60 % der Titelgröße und wirkte wie ein Zusatz.
   ============================================================ */
.hero .hero-title .ht2 { font-size: 1em; margin-top: 0.04em; }
.hero .hero-title .ht2 .amp { font-size: 0.62em; margin-right: 0.16em; }
/* Titel darf dafür etwas ruhiger werden, sonst sprengt er zwei volle Zeilen */
.hero .hero-title { font-size: clamp(34px, 4vw, 58px); max-width: 15ch; }
@media (max-width: 560px) {
  .hero .hero-title { font-size: clamp(30px, 8.4vw, 40px); }
  .hero .hero-title .ht2 .amp { font-size: 0.58em; }
}
.hero .hero-sub { color: var(--text-dim); text-shadow: none; max-width: 46ch; margin-bottom: 30px; }
.hero-trust { color: var(--text-dim); }
.hero-trust b { color: var(--ink); }
.hero-trust .ht-n { color: var(--text-dim); }
.btn-glass {
  background: #e8e8ed; color: var(--ink); border-color: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.btn-glass:hover { background: #dcdce1; }

@media (max-width: 900px) {
  .hero { padding-top: calc(var(--header-h) + 28px); padding-bottom: 44px; }
  .hero .tile { grid-template-columns: 1fr; gap: 26px; }
  .hero .hero-bg { order: 1; aspect-ratio: 4 / 3.6; }
  .hero .hero-content { order: 2; }
  .hero .hero-title { max-width: none; }
}

/* ============================================================
   AUFTRITT v19 — Bild laeuft bis zum Bildschirmrand
   Vorher schwebte es als Kaesten mit Schatten ueber der Kante zum
   naechsten Abschnitt. Jetzt ist es am Rand verankert und deutlich
   groesser; der Text bleibt exakt an der Container-Kante.
   ============================================================ */
.hero .tile {
  width: 100%; margin-inline: 0;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(30px, 4.5vw, 68px);
  padding-left: max(var(--gutter), calc((100% - var(--container)) / 2));
  padding-right: 0;
  align-items: stretch;
}
.hero .hero-content { align-self: center; }
.hero .hero-bg {
  aspect-ratio: auto; height: 100%; min-height: clamp(420px, 62vh, 620px);
  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
  box-shadow: none;
}

@media (max-width: 900px) {
  .hero .tile {
    grid-template-columns: 1fr;
    padding-left: 0; padding-right: 0;
  }
  .hero .hero-bg {
    border-radius: 0; min-height: 0; height: auto; aspect-ratio: 4 / 3.5;
  }
  .hero .hero-content {
    padding-inline: var(--gutter);
    width: min(var(--container), calc(100% - var(--gutter) * 2));
    margin-inline: auto; padding-inline: 0;
  }
}

/* Korrektur zu v19:
   1) Hoehe wird vom Raster bestimmt, nicht vom Bild -> passt auf einen Schirm.
   2) Der Textblock traegt zusaetzlich die Klasse .container; deren
      "margin: 0 auto" hat ihn aus der Flucht geschoben. */
.hero .tile { min-height: clamp(470px, 66vh, 640px); }
.hero .hero-bg { height: 100%; min-height: 0; }
.hero .hero-content {
  width: auto; max-width: 46ch; margin-inline: 0; justify-self: start;
}
@media (max-width: 900px) {
  .hero .tile { min-height: 0; }
  .hero .hero-content { max-width: none; }
}

/* Eine aeltere Regel (html[data-gender] .tile) zwang dem Auftritt ein
   3:2-Verhaeltnis auf -> bei voller Breite ergab das 953 px Hoehe.
   Hier mit gleicher Staerke aufheben. */
html[data-gender] .hero .tile {
  aspect-ratio: auto;
  min-height: clamp(470px, 66vh, 640px);
  max-width: none; margin-inline: 0;
}
@media (max-width: 900px) {
  html[data-gender] .hero .tile { min-height: 0; }
}

/* ============================================================
   AUFTRITT v20 — symmetrisch statt an den Rand geklebt
   Randlos rechts wirkte auf breiten Schirmen unruhig: links 400 px
   Leere, rechts das Bild an der Kante. Jetzt sitzen beide Spalten
   sauber im Raster, das Bild ist trotzdem deutlich groesser als zuvor.
   ============================================================ */
html[data-gender] .hero .tile {
  width: min(var(--container), calc(100% - var(--gutter) * 2));
  margin-inline: auto;
  padding-left: 0; padding-right: 0;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(34px, 4.5vw, 70px);
  align-items: center;
  min-height: 0;
}
.hero .hero-bg {
  height: auto; min-height: 0;
  aspect-ratio: 4 / 4.5;
  border-radius: var(--radius-xl);
  box-shadow: 0 26px 64px rgba(0, 0, 0, 0.13);
}
.hero .hero-content { align-self: center; max-width: 42ch; }
/* Etwas Luft unter dem Kopfbereich, damit das Bild nicht anstoesst */
.hero { padding-top: calc(var(--header-h) + clamp(30px, 5vh, 64px)); }

@media (max-width: 900px) {
  html[data-gender] .hero .tile {
    grid-template-columns: 1fr; gap: 24px;
    width: min(var(--container), calc(100% - var(--gutter) * 2));
  }
  .hero .hero-bg { aspect-ratio: 4 / 3.8; }
  .hero .hero-content { max-width: none; }
}

/* ZONEN-SYMBOLE (Waxing) — Koerperzone statt Foto; behandelter Bereich in Rose */
.svc-ico {
  width: 44px; height: 44px; border-radius: 13px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--bg-alt); color: #adadb2;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease);
}
.svc-ico .zn { stroke: var(--rose); stroke-width: 1.65; fill: rgba(184, 118, 109, 0.17); }
.svc-ico .tb, .svc-ico .zn.tb { stroke-width: 3.1; fill: none; }
.svc-row:hover .svc-ico { transform: scale(1.08); background: #ededf0; }
@media (max-width: 720px) { .svc-ico { width: 40px; height: 40px; } }


/* ============================================================
   PREISLISTE v21 — dicht statt versteckt
   Recherche (15 Salon-/Buchungsseiten): keine einzige verbirgt Preise hinter
   einem Klick. Das Problem war nie die Zeilenzahl, sondern die Zeilenhoehe
   (gemessen 98 px, ueblich 40–52). Also: Aufklapper raus, Zeilen enger,
   Foto auf Gruppenebene, Dauer sichtbar, Waxing aufgeteilt.
   ============================================================ */

/* --- Gruppe: immer offen, kein Kartenrahmen mehr --- */
.pg { scroll-margin-top: calc(var(--header-h) + 16px); }
.pg + .pg { margin-top: 24px; }
.pg-head {
  display: flex; align-items: center; gap: 12px;
  padding: 0 0 8px; border-bottom: 1px solid var(--line); margin-bottom: 2px;
}
.pg-ico {
  width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--bg-alt); color: var(--text-faint);
}
.pg-ico svg { width: 20px; height: 20px; }
.pg-tx { min-width: 0; }
.pg-tx h3 {
  font-family: var(--font-display); font-size: 18px; font-weight: 600;
  letter-spacing: -0.02em; margin: 0; color: var(--ink);
}
.pg-tx small { display: block; font-size: 12.5px; color: var(--text-faint); margin-top: 1px; }

/* --- Zeile: Name · Punkte · Dauer · Preis --- */
.price-list .svc-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-top: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.price-list .svc-row:last-child { border-bottom: 0; }
.price-list .svc-name {
  display: block; font-size: 16px; font-weight: 500; letter-spacing: -0.01em;
  min-width: 0; overflow-wrap: anywhere;
}
.price-list .svc-badge {
  display: inline-block; font-style: normal; vertical-align: 1px; margin-left: 8px;
  font-size: 10.5px; font-weight: 650; letter-spacing: 0.02em;
  color: var(--blue); background: var(--blue-tint); border-radius: 999px; padding: 2px 8px;
}
.price-list .svc-dots {
  flex: 1 1 auto; min-width: 14px; align-self: flex-end;
  border-bottom: 1px dotted rgba(0, 0, 0, 0.22); transform: translateY(-6px);
}
.price-list .svc-meta {
  display: block; margin: 0; flex: 0 0 auto;
  font-size: 12.5px; color: var(--text-faint); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.price-list .svc-price {
  flex: 0 0 auto; display: flex; align-items: baseline; justify-content: flex-end;
  gap: 8px; min-width: 68px;
  font-size: 16px; font-weight: 650; line-height: 1.25;
}
/* Die uebrigen Laengen als leiser Hinweis – daneben, nicht darunter:
   eine zweite Zeile kostete 12 px in jeder der 30 Preiszeilen. */
.price-list .svc-price u {
  order: -1; text-decoration: none;
  font-size: 11.5px; font-weight: 400; color: var(--text-faint); white-space: nowrap;
}
/* Mini-Bild und Zonensymbol bestimmen sonst die Zeilenhoehe: eine Textzeile misst
   rund 23 px, ein 40er Kaestchen macht daraus 62 px. Auf 32 gebracht liegen
   Bild- und Textzeilen fast gleichauf. */
.price-list .svc-thumb { width: 32px; height: 32px; border-radius: 10px; }
.price-list .svc-ico { width: 32px; height: 32px; border-radius: 10px; }
.price-list .svc-ico svg { width: 20px; height: 20px; }

/* --- Lange Gruppen: Rest hinter einem Knopf --- */
.pg.has-more .svc-row.is-more { display: none; }
.pg.show-all .svc-row.is-more { display: flex; }
.pg-more {
  display: block; width: 100%; margin-top: 4px; padding: 9px 0;
  border: 0; background: none; cursor: pointer; font: inherit;
  font-size: 13.5px; font-weight: 550; color: var(--blue);
  text-align: left; border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.pg-more:hover { color: var(--blue-hover); }
.pg.show-all .pg-more { border-bottom: 0; }

/* --- Beliebteste Behandlungen --- */
/* Zweispaltig: als Liste untereinander frass der Block 283 px des Panels,
   im breiten Panel ist die Flaeche ohnehin vorhanden. */
.pm-pop {
  background: var(--bg-alt); border-radius: var(--radius-lg);
  padding: 14px 15px; margin-bottom: 24px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 7px;
}
.pm-pop h4 {
  grid-column: 1 / -1; margin: 0 0 1px;
  font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--text-faint); font-weight: 700;
}
.pp-row {
  display: flex; align-items: center; gap: 11px; padding: 8px 10px;
  background: #fff; border-radius: 13px;
  text-decoration: none; color: inherit; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.pp-row:hover { transform: translateY(-1px); box-shadow: 0 5px 16px rgba(0, 0, 0, 0.09); }
.pp-img { width: 38px; height: 38px; border-radius: 11px; overflow: hidden; flex: 0 0 auto; background: var(--bg-alt); }
.pp-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-tx { flex: 1; min-width: 0; }
.pp-tx b { display: block; font-size: 14px; font-weight: 550; letter-spacing: -0.01em; }
.pp-tx small { display: block; font-size: 12px; color: var(--text-faint); }
.pp-p { font-weight: 650; font-size: 14.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* --- Laengenfilter: Filter, kein Tor --- */
.ps-len {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding-bottom: 12px; margin-bottom: 18px; border-bottom: 1px solid var(--line);
}
.ps-seg { display: inline-flex; background: var(--bg-alt); border-radius: 999px; padding: 3px; gap: 2px; }
.ps-seg .ps-rb {
  border: 0; background: none; cursor: pointer; font: inherit;
  padding: 7px 17px; border-radius: 999px; font-size: 13.5px; color: var(--text-dim);
}
.ps-seg .ps-rb.active {
  background: #fff; color: var(--ink); font-weight: 600;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.13);
}
.ps-len em { font-style: normal; font-size: 12.5px; color: var(--text-faint); }

/* --- Buehne: jetzt in allen drei Ansichten --- */
.ps-mediawrap { position: sticky; top: calc(var(--header-h) + 22px); }
.pm-stage .ps-media { position: relative; top: auto; }
/* Kosmetik-Fotos sind 640x640 – im 3:4-Rahmen wuerden sie unnoetig beschnitten */
.pm-stage[data-mode="beauty"] .ps-media { aspect-ratio: 1 / 1; }
.pm-stage[data-mode="herren"] .ps-media { aspect-ratio: 3 / 4; }

@media (max-width: 900px) {
  .ps-mediawrap { position: static; }
  /* Bildband kurz halten: 4/5 waere auf 390 px ueber 450 px hoch */
  .pm-stage .ps-media,
  .pm-stage[data-mode="beauty"] .ps-media { aspect-ratio: 16 / 10; max-height: 210px; max-width: none; margin: 0 0 14px; }
  .pm-stage .ps-img { object-position: 50% 30%; }
  /* Laengenfilter bleibt erreichbar – vorher musste man dafuer ganz nach oben */
  .ps-len {
    position: sticky; top: calc(var(--header-h) + 4px); z-index: 6;
    background: var(--bg); flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px 0 10px; margin-bottom: 12px;
  }
  .ps-len em { display: none; }
  .ps-seg { display: flex; }
  .ps-seg .ps-rb { flex: 1; text-align: center; padding: 9px 0; font-size: 14px; }
}

@media (max-width: 560px) {
  .pg + .pg { margin-top: 24px; }
  .price-list .svc-row { padding: 10px 0; gap: 10px; }
  .price-list .svc-name { font-size: 15px; hyphens: auto; -webkit-hyphens: auto; }
  .price-list .svc-meta { font-size: 11.5px; }
  .price-list .svc-price { font-size: 15px; min-width: 58px; }
  .price-list .svc-price u { font-size: 10.5px; }
  .pg-tx h3 { font-size: 16.5px; }
  .pg-ico { width: 32px; height: 32px; border-radius: 10px; }
  .pg-ico svg { width: 18px; height: 18px; }
  .pm-pop { padding: 12px; margin-bottom: 20px; grid-template-columns: 1fr; gap: 6px; }
  .pp-tx b { white-space: normal; }
}

/* Sanftes Einblenden nur noch fuer die Buehne, ohne gestaffelte Verzoegerung:
   die alten Zeilen-Delays (bis 0,4 s, fill-mode backwards) liessen die Liste
   beim ersten Blick leer wirken. */
.ps-panel .pm-anim > * { animation: none; }
.pm-anim { animation: pmIn 0.3s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .pm-anim, .pm-stage, .pm-stage .ps-media, .pm-stage .ps-panel { animation: none; }
  .ps-img { transition: none; }
}

/* ============================================================
   v25 – Warenkorb ohne Online-Zahlung: statt Kasse der Weg in
   den Salon. Ruhig gehalten, es ist ein Hinweis, kein Angebot.
   ============================================================ */
.shop-abhol {
  margin-top: 14px; padding: 14px 16px;
  background: rgba(168, 130, 63, 0.07);
  border: 1px solid rgba(168, 130, 63, 0.24);
  border-radius: 12px;
}
.shop-abhol b { display: block; font-size: 15px; margin-bottom: 5px; color: var(--ink); }
.shop-abhol p { margin: 0; font-size: 13.5px; line-height: 1.55; color: #5d5850; }
.shop-abhol .sa-adr { margin-top: 7px; font-weight: 600; color: var(--ink); }
.cart-hint {
  margin-top: 10px; font-size: 13.5px; line-height: 1.55; color: #6b655d;
}

/* ============================================================
   v26 – Kopfzeile: Luft um die Marke garantieren.

   Die Seitenspalten sind gleich breit, damit die Marke mittig sitzt.
   Rechts stehen aber Menue, Sprachwahl und Terminknopf, links nur Menue
   und Bereichsschalter – rechts blieben dadurch nur 10 px Abstand zur
   Marke. Auf Deutsch faellt das kaum auf, im Russischen sind die Woerter
   laenger und es sieht aus, als beruehre sich alles.

   Der groessere Abstand holt sich den Platz aus einer knapperen
   Link-Polsterung, damit nichts umbricht.
   ============================================================ */
.site-header .nav-link { padding: 8px 7px; }
.site-header .brand { padding-inline: 4px; }

/* Sprachwahl kompakter. Vier zweibuchstabige Kuerzel brauchen keine 10 px
   Polsterung; die gesparten rund 30 px fehlen rechts, wo Menue, Sprachwahl
   und Terminknopf zusammen ueber ihre Spalte hinauslaufen und in die Marke
   ragen. Erst ab Tablet-Breite – auf dem Telefon bleiben die Tippflaechen
   in voller Groesse. */
@media (min-width: 901px) {
  .site-header .lang-btn { padding-inline: 6px; }
}

/* ------------------------------------------------------------
   Russisch braucht mehr Breite als die uebrigen Sprachen:
   "Команда · Магазин · Контакты" plus Sprachwahl und "Записаться"
   verlangen rund 459 px, die rechte Spalte bietet bei 1280 px
   Fensterbreite aber nur 444 px. Die Gruppe lief deshalb aus ihrer
   Spalte heraus in die Marke hinein – genau die Ueberlappung.

   Ein breiteres Fenster hilft nicht: der Kopf sitzt in einem Container,
   der bei 1120 px gedeckelt ist – die rechte Spalte bleibt also bei
   jeder Bildschirmbreite 441 px. Russisch passt damit nie.

   Deshalb bekommt Russisch oberhalb der 1140-px-Grenze denselben
   kompakten Kopf, den schmale Fenster ohnehin nutzen. Verloren geht
   nichts: alle Links stehen im Menue hinter der Taste.
   ------------------------------------------------------------ */
@media (min-width: 1141px) {
  html[lang="ru"] .nav-l,
  html[lang="ru"] .nav-r {
    position: fixed; left: 0; right: 0; z-index: 120;
    display: flex; flex-direction: column; gap: 4px;
    background: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s;
  }
  html[lang="ru"] .nav-l { top: 0; height: 50vh; justify-content: flex-end; padding-bottom: 6px; }
  html[lang="ru"] .nav-r { top: 50vh; height: 50vh; justify-content: flex-start; padding-top: 6px; }
  html[lang="ru"] body.nav-open .nav-l,
  html[lang="ru"] body.nav-open .nav-r { opacity: 1; visibility: visible; }
  html[lang="ru"] .nav-l .nav-link,
  html[lang="ru"] .nav-r .nav-link {
    font-size: 24px; padding: 12px; color: var(--ink); font-weight: 500; text-align: center;
  }
  html[lang="ru"] .nav-toggle { display: block; }
  html[lang="ru"] .header-actions .btn { display: none; }
  html[lang="ru"] .hdr-left .gseg { display: none; }
  html[lang="ru"] .gseg--hero { display: inline-flex; }
}