/* ============================================================
   Friseur Gade — Twistringen
   Palette „Natürlich & Bio" (Kundin-Auswahl) · DM Serif Display + Nunito
   ============================================================ */

:root {
  --leinen: #F5F0E8;
  --leinen-hell: #FAF7F1;
  --leinen-tief: #ECE4D6;
  --kamel: #C4A882;
  /* Aufgehellte Kamel-Variante für Text auf Waldgrün: #C4A882 schafft dort nur 3,4:1,
     diese Stufe 4,8:1 (WCAG AA). Auf hellem Grund weiter --kamel verwenden. */
  --kamel-hell: #DCC9AC;
  --salbei: #7D9B76;
  --wald: #3D5A3E;
  --wald-tief: #2E4530;
  --text: #26302A;
  --text-soft: #55645A;
  --radius-l: 2rem;
  --radius-m: 1.25rem;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; color-scheme: light; }
a, button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

body {
  font-family: 'Nunito', sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--leinen);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: 'DM Serif Display', serif; font-weight: 400; line-height: 1.12; text-wrap: balance; }

/* height: auto ist Pflicht: Die width/height-Attribute im HTML (gegen Layout-Shift)
   setzen sonst eine feste Höhe und jedes `aspect-ratio` im CSS bleibt wirkungslos.
   Gilt genauso für <video> — das Hero-Video war dadurch 2,7× zu hoch (02.08.2026). */
img, video { max-width: 100%; display: block; height: auto; }
a { color: inherit; }

/* Lange Wörter/URLs dürfen das Layout nicht sprengen */
h1, h2, h3, p, a, li { overflow-wrap: break-word; }

/* Sticky Nav verdeckt sonst die Überschrift des Anker-Ziels (Nav endet bei ~78 px) */
section[id] { scroll-margin-top: 6.5rem; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }

/* Grain-Overlay */
body::after {
  content: "";
  position: fixed; inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Skip-Link */
.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--wald); color: var(--leinen);
  padding: 0.6rem 1.2rem; border-radius: 0 0 0.75rem 0; z-index: 200;
  text-decoration: none; font-weight: 700;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 3px solid var(--wald); outline-offset: 3px; border-radius: 4px; }

/* ============ NAVIGATION ============ */
.nav-wrap {
  position: sticky; top: 0.9rem; z-index: 100;
  padding: 0 1rem;
  display: flex; justify-content: center;
}
.nav {
  display: flex; align-items: center; gap: 1.75rem;
  background: rgba(250, 247, 241, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(61, 90, 62, 0.10);
  border-radius: 999px;
  padding: 0.55rem 0.65rem 0.55rem 1.5rem;
  box-shadow: 0 12px 40px -18px rgba(61, 90, 62, 0.35);
  width: 100%; max-width: 820px;
  transition: box-shadow 0.4s var(--ease), background 0.4s var(--ease), max-width 0.4s var(--ease);
}
.nav-wrap.scrolled .nav {
  background: rgba(250, 247, 241, 0.95);
  box-shadow: 0 18px 50px -18px rgba(46, 69, 48, 0.5);
  max-width: 760px;
}
.nav-logo {
  font-family: 'DM Serif Display', serif;
  font-size: 1.3rem; text-decoration: none; color: var(--wald);
  letter-spacing: 0.01em; white-space: nowrap;
  display: inline-flex; align-items: center; min-height: 44px;
}
.nav-links { display: flex; gap: 1.35rem; list-style: none; margin-left: auto; }
.nav-links a {
  text-decoration: none; font-weight: 600; font-size: 0.95rem; color: var(--text-soft);
  transition: color 0.25s var(--ease);
  /* 44×44 Trefferfläche: „Home" war sonst nur 42 px breit */
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px;
}
.nav-links a:hover { color: var(--wald); }
.nav-links a[aria-current="page"] { color: var(--wald); }

/* Button-System */
.btn {
  display: inline-flex; align-items: center; gap: 0.75rem;
  background: var(--wald); color: var(--leinen-hell);
  font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 1rem;
  text-decoration: none; border: none; cursor: pointer;
  border-radius: 999px; padding: 0.5rem 0.5rem 0.5rem 1.5rem;
  transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 160ms var(--ease);
  box-shadow: 0 10px 30px -12px rgba(61, 90, 62, 0.55);
  min-height: 48px;
  position: relative; overflow: hidden;
}
/* Shine-Sweep beim Hover (läuft einmal durch, snappt unsichtbar zurück) */
.btn::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.22) 50%, transparent 65%);
  transform: translateX(-130%);
  pointer-events: none;
}
/* Magnetic-Modus: JS steuert transform per rAF, CSS-Transition auf transform stört dann */
.btn--magnet { transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.btn .btn-icon {
  width: 2.1rem; height: 2.1rem; border-radius: 999px;
  background: rgba(245, 240, 232, 0.16);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 0.3s var(--ease), background 0.3s var(--ease);
  flex-shrink: 0;
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--wald-tief); box-shadow: 0 14px 36px -12px rgba(46, 69, 48, 0.6); }
  .btn:hover .btn-icon { transform: translate(3px, -1px) scale(1.05); background: rgba(245, 240, 232, 0.26); }
  .btn:hover::after { transform: translateX(130%); transition: transform 0.75s cubic-bezier(0.23, 1, 0.32, 1); }
}
.btn:active { transform: scale(0.97); }
.btn svg { width: 1rem; height: 1rem; }

.btn--nav { font-size: 0.92rem; min-height: 44px; padding-left: 1.25rem; }

.btn--invert { background: var(--leinen-hell); color: var(--wald); box-shadow: 0 14px 40px -14px rgba(0, 0, 0, 0.35); }
.btn--invert .btn-icon { background: rgba(61, 90, 62, 0.1); }
@media (hover: hover) and (pointer: fine) {
  .btn--invert:hover { background: #fff; }
}

/* Kamel-Unterstreichung als Pseudo-Element statt border-bottom: so lässt sich die
   Trefferfläche per padding auf 44 px bringen, ohne dass der Strich vom Text abrutscht. */
.link-quiet {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 700; color: var(--wald); text-decoration: none;
  padding: 0.5rem 0;
  min-height: 44px;
}
.link-quiet::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(0.5rem - 2px);
  height: 2px; background: var(--kamel);
  transition: background 0.3s var(--ease);
}
.link-quiet:hover::after { background: var(--wald); }

/* Burger (nur mobil) */
.burger {
  display: none;
  width: 44px; height: 44px; border-radius: 999px;
  background: transparent; border: 1px solid rgba(61,90,62,0.18);
  cursor: pointer; position: relative; flex-shrink: 0;
}
.burger span {
  position: absolute; left: 12px; right: 12px; height: 2px;
  background: var(--wald); border-radius: 2px;
  transition: transform 0.4s var(--ease), opacity 0.3s var(--ease);
}
.burger span:nth-child(1) { top: 17px; }
.burger span:nth-child(2) { top: 25px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(245, 240, 232, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2rem;
  opacity: 0; visibility: hidden;
  overscroll-behavior: contain;
  transition: opacity 0.45s var(--ease), visibility 0.45s;
}
.mobile-menu.open { opacity: 1; visibility: visible; }
.mobile-menu a {
  font-family: 'DM Serif Display', serif; font-size: 2rem;
  color: var(--wald); text-decoration: none;
  transform: translateY(24px); opacity: 0;
  transition: transform 0.6s var(--ease), opacity 0.6s var(--ease);
}
.mobile-menu.open a { transform: translateY(0); opacity: 1; }
.mobile-menu.open a:nth-child(1) { transition-delay: 0.08s; }
.mobile-menu.open a:nth-child(2) { transition-delay: 0.16s; }
.mobile-menu.open a:nth-child(3) { transition-delay: 0.24s; }

/* Mobile Sticky-CTA unten */
.mobile-cta {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
  background: rgba(250, 247, 241, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(61, 90, 62, 0.12);
}
.mobile-cta .btn { width: 100%; justify-content: center; }

/* ============ SEKTIONEN ============ */
section { padding: 6rem 0; }

.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal[data-delay="1"] { transition-delay: 0.1s; }
.reveal[data-delay="2"] { transition-delay: 0.2s; }
.reveal[data-delay="3"] { transition-delay: 0.3s; }

/* HERO (Startseite) */
.hero { padding: 4.5rem 0 5.5rem; }
.hero-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: 4rem; align-items: center;
}
.hero h1 {
  font-size: clamp(2.6rem, 5.5vw, 4.2rem);
  color: var(--text);
  margin-bottom: 1.4rem;
}
.hero h1 em, .page-hero h1 em { font-style: italic; color: var(--wald); line-height: 1.15; }
.hero p {
  font-size: 1.15rem; color: var(--text-soft);
  max-width: 34rem; margin-bottom: 2.2rem;
}
.hero-actions { display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap; }

.hero-figure {
  position: relative;
  background: rgba(61, 90, 62, 0.06);
  border: 1px solid rgba(61, 90, 62, 0.1);
  border-radius: var(--radius-l);
  padding: 0.5rem;
  /* Ohne overflow lief das per Parallax auf scale(1.1) gezogene Video aus dem Rahmen
     und erzeugte bei 768px ~10px horizontalen Scroll. Alle anderen Parallax-Rahmen
     haben das overflow, hier fehlte es. */
  overflow: hidden;
}
.hero-figure img {
  border-radius: calc(var(--radius-l) - 0.5rem);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  width: 100%;
}
.hero-badge {
  position: absolute; left: 1.4rem; bottom: 1.4rem;
  background: rgba(250, 247, 241, 0.92);
  backdrop-filter: blur(8px);
  border-radius: 999px; padding: 0.5rem 1.1rem;
  font-size: 0.88rem; font-weight: 700; color: var(--wald);
  border: 1px solid rgba(61, 90, 62, 0.12);
}

/* PAGE-HERO (Unterseiten) */
.page-hero { padding: 4rem 0 1.5rem; }
.page-hero h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); margin-bottom: 1rem; }
.page-hero p { font-size: 1.12rem; color: var(--text-soft); max-width: 38rem; }

/* USP / Grüne Blöcke */
.block-green { background: var(--wald); color: var(--leinen); border-radius: var(--radius-l); margin: 0 1rem; }
@media (min-width: 1280px) { .block-green { margin: 0 auto; max-width: 1400px; } }
.block-green h2 { color: var(--leinen-hell); }
.block-green h2 em { font-style: italic; color: var(--kamel); line-height: 1.15; }

.usp-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 4rem; align-items: center; }
.usp-figure { border-radius: var(--radius-m); overflow: hidden; position: relative; }
.usp-figure img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.usp-grid h2 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 1.2rem; }
.usp-lead { color: rgba(245, 240, 232, 0.82); margin-bottom: 2rem; max-width: 32rem; }
.usp-points { list-style: none; display: grid; gap: 1.1rem; }
.usp-points li { display: flex; gap: 0.9rem; align-items: flex-start; }
.usp-points .dot-icon {
  width: 2.4rem; height: 2.4rem; flex-shrink: 0;
  border-radius: 999px; background: rgba(245, 240, 232, 0.12);
  display: flex; align-items: center; justify-content: center;
}
.usp-points svg { width: 1.15rem; height: 1.15rem; stroke: var(--kamel); }
.usp-points strong { display: block; font-size: 1.05rem; color: var(--leinen-hell); }
.usp-points span { color: rgba(245, 240, 232, 0.78); font-size: 0.95rem; }

/* SCHWERPUNKT-KARTEN */
.focus h2 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 0.9rem; }
.section-intro { color: var(--text-soft); max-width: 36rem; margin-bottom: 3rem; }
.focus-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; }
.focus-card {
  background: var(--leinen-hell);
  border: 1px solid rgba(61, 90, 62, 0.09);
  border-radius: var(--radius-l);
  padding: 0.6rem;
  text-decoration: none; color: inherit;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
  box-shadow: 0 18px 50px -30px rgba(61, 90, 62, 0.3);
  display: flex; flex-direction: column;
  position: relative;
}
@media (hover: hover) and (pointer: fine) {
  .focus-card:hover { transform: translateY(-5px); box-shadow: 0 26px 60px -28px rgba(61, 90, 62, 0.42); }
}
.focus-card img {
  border-radius: calc(var(--radius-l) - 0.6rem);
  aspect-ratio: 16 / 10; object-fit: cover; width: 100%;
}
.focus-card-body { padding: 1.6rem 1.4rem 1.5rem; }
.focus-card h3 { font-size: 1.65rem; margin-bottom: 0.5rem; }
.focus-card p { color: var(--text-soft); font-size: 0.98rem; margin-bottom: 1.1rem; }
.focus-card .link-quiet { font-size: 0.95rem; }

/* LEISTUNGSLISTE (Startseite) */
.services { background: var(--leinen-tief); border-radius: var(--radius-l); margin: 0 1rem; }
@media (min-width: 1280px) { .services { margin: 0 auto; max-width: 1400px; } }
.services h2 { font-size: clamp(1.9rem, 3.5vw, 2.6rem); margin-bottom: 2.5rem; }
.services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; }
.service-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 1.1rem 0.25rem;
  border-bottom: 1px solid rgba(61, 90, 62, 0.14);
}
.services-grid .service-row:nth-child(-n+2) { border-top: 1px solid rgba(61, 90, 62, 0.14); }
@media (min-width: 769px) { .services-grid { column-gap: 3.5rem; } }
.service-row .name { font-weight: 700; }
.service-row .name small { display: block; font-weight: 400; color: var(--text-soft); font-size: 0.85rem; }
.service-row .price { font-weight: 800; color: var(--wald); white-space: nowrap; font-variant-numeric: tabular-nums; }
.services-note { margin-top: 1.75rem; color: var(--text-soft); font-size: 0.92rem; }
.services-cta { margin-top: 2.25rem; }

/* VORHER/NACHHER-SLIDER */
.ba-slider {
  --pos: 50%;
  position: relative;
  max-width: 560px;
  margin: 0 auto 3.5rem;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-l);
  overflow: hidden;
  touch-action: pan-y;
  background: var(--leinen-tief);
  box-shadow: 0 30px 70px -35px rgba(46, 69, 48, 0.5);
}
.ba-slider img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.ba-after {
  position: absolute; inset: 0;
  clip-path: inset(0 0 0 var(--pos));
}
.ba-divider {
  position: absolute; top: 0; bottom: 0; left: var(--pos);
  width: 2px; margin-left: -1px;
  background: var(--leinen-hell);
  box-shadow: 0 0 20px rgba(38, 48, 42, 0.4);
  pointer-events: none;
}
.ba-knob {
  position: absolute; top: 50%; left: var(--pos);
  transform: translate(-50%, -50%);
  width: 3rem; height: 3rem; border-radius: 999px;
  background: var(--leinen-hell); color: var(--wald);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 32px -8px rgba(38, 48, 42, 0.55);
  pointer-events: none;
}
.ba-knob svg { width: 1.2rem; height: 1.2rem; }
.ba-range {
  position: absolute; inset: 0;
  width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize;
  -webkit-appearance: none; appearance: none;
}
.ba-range:focus-visible ~ .ba-knob { outline: 3px solid var(--wald); outline-offset: 3px; }
.ba-tag {
  position: absolute; top: 1rem; z-index: 2;
  background: rgba(250, 247, 241, 0.92); color: var(--wald);
  font-size: 0.8rem; font-weight: 800;
  border-radius: 999px; padding: 0.25rem 0.85rem;
  pointer-events: none;
}
.ba-tag--vorher { left: 1rem; }
.ba-tag--nachher { right: 1rem; }
.ba-hint { text-align: center; color: var(--text-soft); font-size: 0.92rem; margin: -2.25rem auto 3rem; }

/* Gezeichnete Unterstreichung (Kamel-Strich) */
.u-draw { position: relative; white-space: nowrap; }
.u-draw .u-stroke {
  position: absolute; left: -2%; bottom: -0.1em;
  width: 104%; height: 0.24em;
  overflow: visible;
}
.u-draw .u-stroke path {
  fill: none; stroke: var(--kamel); stroke-width: 7; stroke-linecap: round;
  stroke-dasharray: 320; stroke-dashoffset: 320;
}
.u-draw.drawn .u-stroke path {
  transition: stroke-dashoffset 0.9s cubic-bezier(0.23, 1, 0.32, 1) 0.2s;
  stroke-dashoffset: 0;
}
@media (prefers-reduced-motion: reduce) {
  .u-draw .u-stroke path { stroke-dashoffset: 0 !important; transition: none !important; }
}

/* GALERIE */
.gallery h2 { font-size: clamp(1.9rem, 3.5vw, 2.6rem); margin-bottom: 2.5rem; }
.gallery-strip {
  display: flex; gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0.25rem 0.25rem 1.25rem;
  -webkit-overflow-scrolling: touch;
}
.gallery-strip figure {
  flex: 0 0 min(70vw, 340px);
  scroll-snap-align: start;
  border-radius: var(--radius-m);
  overflow: hidden;
  position: relative;
}
.gallery-strip img {
  aspect-ratio: 3 / 4; object-fit: cover; width: 100%;
  transition: transform 0.7s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .gallery-strip figure:hover img { transform: scale(1.04); }
}
.gallery-strip figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.75rem 1.1rem 0.9rem;
  background: linear-gradient(to top, rgba(38, 48, 42, 0.65), transparent);
  color: var(--leinen-hell); font-size: 0.88rem; font-weight: 700;
}

/* BEWERTUNGEN */
.reviews { text-align: center; }
.reviews-score {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-weight: 800; font-size: 1.05rem; color: var(--wald);
  margin-bottom: 2.5rem;
  background: var(--leinen-hell);
  border: 1px solid rgba(61, 90, 62, 0.1);
  border-radius: 999px; padding: 0.55rem 1.3rem;
}
.stars { color: var(--kamel); letter-spacing: 2px; font-size: 1.05rem; }
.reviews h2 { font-size: clamp(1.9rem, 3.5vw, 2.6rem); margin-bottom: 2.75rem; }
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; text-align: left; }
.review {
  background: var(--leinen-hell);
  border: 1px solid rgba(61, 90, 62, 0.09);
  border-radius: var(--radius-m);
  padding: 1.75rem 1.6rem;
}
.review blockquote { font-size: 1rem; color: var(--text); margin-bottom: 1.1rem; }
.review cite { font-style: normal; font-size: 0.9rem; color: var(--text-soft); font-weight: 700; }
.review--tint { background: var(--wald); border-color: transparent; }
.review--tint blockquote { color: var(--leinen-hell); }
.review--tint cite { color: rgba(245, 240, 232, 0.75); }

/* ÜBER UNS */
.about-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 4rem; align-items: center; }
.about-figure { border-radius: var(--radius-l); overflow: hidden; }
.about-figure img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.about h2 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 1.2rem; }
.about h2 em { font-style: italic; color: var(--wald); line-height: 1.15; }
.about p { color: var(--text-soft); max-width: 32rem; margin-bottom: 1.2rem; }

/* ABSCHLUSS-CTA */
.final-cta { text-align: center; color: var(--leinen-hell); }

/* Wort-Reveal (Headlines) */
main h2 .w, .final-cta h2 .w { display: inline-block; }

/* Hero-Video (ersetzt Hero-Bild, gleiche Optik) */
.hero-figure video {
  border-radius: calc(var(--radius-l) - 0.5rem);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  width: 100%;
  display: block;
}
.final-cta h2 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin-bottom: 1rem; }
.final-cta p { color: rgba(245, 240, 232, 0.8); margin-bottom: 2.2rem; max-width: 30rem; margin-inline: auto; }

/* ============ LEISTUNGSSEITE ============ */
.anchor-nav {
  display: flex; gap: 0.75rem; flex-wrap: wrap;
  padding: 1.5rem 0 0;
}
.anchor-nav a {
  text-decoration: none; font-weight: 700; font-size: 0.92rem;
  color: var(--wald);
  background: var(--leinen-hell);
  border: 1px solid rgba(61, 90, 62, 0.14);
  border-radius: 999px; padding: 0.5rem 1.1rem;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
  min-height: 44px; display: inline-flex; align-items: center;
}
@media (hover: hover) and (pointer: fine) {
  .anchor-nav a:hover { background: var(--wald); color: var(--leinen-hell); }
}

.service-detail { padding: 5rem 0; }
.service-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start; }
/* Grid-Items haben min-width: auto und schrumpfen sonst nicht unter die min-content-
   Breite ihres Inhalts — dann sprengt eine breite Tabelle trotz overflow-x-Wrapper
   die ganze Seite (fiel erst bei 320px auf). */
.service-detail-grid > *, .usp-grid > *, .about-grid > *, .team-grid > * { min-width: 0; }
.service-detail h2 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 1rem; }
.service-detail .lead { color: var(--text-soft); margin-bottom: 1.5rem; }
.service-detail p + p { margin-top: 1rem; }
.service-detail-figure { border-radius: var(--radius-l); overflow: hidden; position: sticky; top: 6rem; }
/* height: auto ist Pflicht — sonst gewinnt das height-Attribut aus dem HTML
   (Presentational Hint) und aspect-ratio wird ignoriert */
.service-detail-figure img { aspect-ratio: 4 / 5; height: auto; object-fit: cover; width: 100%; }

.check-list { list-style: none; display: grid; gap: 0.8rem; margin-bottom: 1.75rem; }
.check-list li { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.98rem; }
.check-list svg { width: 1.25rem; height: 1.25rem; stroke: var(--salbei); flex-shrink: 0; margin-top: 0.2rem; }

/* Zertifikat-Badge (SIMPLIE-zertifizierter Salon) */
.cert-badge {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.45rem 1rem 0.45rem 0.7rem; margin-bottom: 1.1rem;
  border: 1px solid rgba(61, 90, 62, 0.22); border-radius: 999px;
  background: var(--leinen-hell);
  font-size: 0.76rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--wald);
}
.cert-badge svg { width: 1.15rem; height: 1.15rem; stroke: var(--kamel); fill: none; flex-shrink: 0; }
.cert-badge--invert {
  background: rgba(245, 240, 232, 0.08);
  border-color: rgba(196, 168, 130, 0.5);
  color: var(--leinen-hell);
}
/* Dezente Variante (Startseite): soll dort nicht mit der Headline konkurrieren */
.cert-badge--sm {
  font-size: 0.66rem; letter-spacing: 0.08em;
  padding: 0.3rem 0.7rem 0.3rem 0.5rem; gap: 0.4rem;
  margin-bottom: 0.9rem;
}
.cert-badge--sm svg { width: 0.9rem; height: 0.9rem; }

/* ============ KI-KENNZEICHNUNG ============ */
/* Kleiner Hinweis unten rechts IM Bild — kein Chip, keine Flaeche, nur Text.
   Unten rechts, weil unten links im Hero schon .hero-badge sitzt.
   aria-hidden: die Information steht zusaetzlich im alt-Text jedes betroffenen Bildes.
   So bleibt der Accessible Name der umgebenden Links (.focus-card ist ein <a>) sauber. */
.ai-note {
  position: absolute; bottom: 0.8rem; right: 1rem; z-index: 3;
  margin: 0;
  font-size: 1rem; font-weight: 700; letter-spacing: 0.02em;
  /* Weisse Schrift ohne Kasten. Entscheidend ist eine KNAPPE 1px-Kontur, kein weicher
     Schatten: bei dieser Schriftgroesse frisst ein 2px-Weichzeichner die weisse Fuellung
     auf, der Text wird zu grauem Matsch — auf dem Holzboden in salon.jpg war er damit
     praktisch unlesbar. Darum zwei harte 1px-Lagen fuer die Kante plus EIN weicher
     Abfall fuer die Tiefe. Am Motiv mit dem hellsten Bildfuss gegen drei Alternativen
     geprueft (weicher Verlauf am Bildfuss, dunkle Schrift mit Halo, Status quo). */
  color: #fff;
  text-shadow:
    0 0 1px rgba(0, 0, 0, 1),
    0 0 1px rgba(0, 0, 0, 1),
    0 1px 4px rgba(0, 0, 0, 0.95),
    0 0 14px rgba(0, 0, 0, 0.7);
  white-space: nowrap;
  pointer-events: none;
}
/* Rahmen mit Innenabstand: Text um das Padding nach innen versetzen */
.hero-figure .ai-note { bottom: 1.3rem; right: 1.3rem; }
/* Helle Buehnen (Creme-Gradient bzw. Leinen): weisse Schrift waere dort unsichtbar.
   Dunkelgruen mit derselben Logik — knappe helle Kontur statt weichem Halo. */
.laengen-stage .ai-note,
.ba-slider .ai-note {
  color: var(--wald);
  text-shadow:
    0 0 1px rgba(250, 247, 241, 1),
    0 0 1px rgba(250, 247, 241, 1),
    0 1px 4px rgba(250, 247, 241, 0.95),
    0 0 14px rgba(250, 247, 241, 0.8);
}
/* Schmale Screens: proportional kleiner, damit die Zeile (26 Zeichen, nowrap)
   nicht die halbe Bildbreite einnimmt — Stufe 3 wuerde dort zu wuchtig */
@media (max-width: 560px) { .ai-note { font-size: 0.8rem; right: 0.8rem; bottom: 0.7rem; } }

/* Bildflaeche der Teaser-Karten: eigener Bezugsrahmen, damit der Hinweis unten IM Bild
   sitzt und nicht am Fuss der ganzen Karte (unter Titel und Text) */
.card-media { position: relative; display: block; }

/* Methoden-Fakten (kompakte Kennzahlen zur SIMPLIE-Technik) */
.method-facts { list-style: none; display: grid; gap: 0.7rem; margin: 1.5rem 0 1.75rem; }
@media (min-width: 560px) { .method-facts { grid-template-columns: repeat(3, 1fr); } }
.method-facts li {
  padding: 0.95rem 1rem;
  border: 1px solid rgba(61, 90, 62, 0.12); border-radius: var(--radius-m);
  background: var(--leinen-hell);
}
.method-facts strong {
  display: block; font-family: 'DM Serif Display', serif; font-weight: 400;
  font-size: 1.35rem; line-height: 1.15; color: var(--wald);
}
.method-facts span { display: block; font-size: 0.86rem; color: var(--text-soft); margin-top: 0.2rem; }

/* Preistabellen */
.price-table { width: 100%; border-collapse: collapse; margin: 1.25rem 0 1.75rem; }
.price-table caption { text-align: left; font-weight: 800; padding-bottom: 0.6rem; font-size: 0.95rem; }
.price-table th {
  text-align: left; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-soft); font-weight: 800; padding: 0.5rem 0.5rem 0.5rem 0;
  border-bottom: 1px solid rgba(61, 90, 62, 0.2);
}
.price-table th:not(:first-child), .price-table td:not(:first-child) { text-align: right; }
.price-table td {
  padding: 0.85rem 0.5rem 0.85rem 0;
  border-bottom: 1px solid rgba(61, 90, 62, 0.12);
  font-size: 0.98rem;
}
.price-table td:first-child { font-weight: 700; }
.price-table td:not(:first-child) { font-weight: 800; color: var(--wald); white-space: nowrap; font-variant-numeric: tabular-nums; }

.price-hint { font-size: 0.9rem; color: var(--text-soft); }

/* Breite Preistabellen dürfen scrollen statt die Seite zu sprengen */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.25rem 0 1.75rem; }
.table-scroll .price-table { margin: 0; }
.table-scroll:focus-visible { outline: 2px solid var(--kamel); outline-offset: 4px; border-radius: 0.5rem; }
@media (max-width: 560px) {
  .price-table th, .price-table td { font-size: 0.86rem; }
  .price-table td { padding-top: 0.7rem; padding-bottom: 0.7rem; }
  .price-table th:not(:first-child), .price-table td:not(:first-child) { padding-left: 0.4rem; }
}

/* Invertierte Preistabelle (auf Waldgrün-Block) — Deckkraft/Farbton auf WCAG AA getrimmt */
.price-table--invert caption { color: var(--leinen-hell); }
.price-table--invert th { color: rgba(245, 240, 232, 0.82); border-color: rgba(245, 240, 232, 0.3); }
.price-table--invert td { color: var(--leinen-hell); border-color: rgba(245, 240, 232, 0.2); }
.price-table--invert td:not(:first-child) { color: var(--kamel-hell); }
.price-hint--invert { color: rgba(245, 240, 232, 0.82); }
.price-hint--invert a { color: var(--kamel-hell); }

.cta-inline { margin-top: 2rem; }

/* Haarlängen-Widget (interaktiv) */
.laengen-widget {
  display: grid; grid-template-columns: minmax(0, 420px) 1fr;
  gap: 2.5rem; align-items: center;
  background: var(--leinen-hell);
  border: 1px solid rgba(61, 90, 62, 0.1);
  border-radius: var(--radius-l);
  padding: 1.5rem;
  margin: 2.5rem 0 1.5rem;
}
.laengen-stage {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-m);
  overflow: hidden;
  background: radial-gradient(circle at 50% 30%, #FAF7F1 0%, #F0E8D9 55%, #E3D7C1 100%);
}
.laengen-wort {
  position: absolute; inset: 0;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 4%;
  font-family: 'DM Serif Display', serif; font-style: italic;
  font-size: clamp(4.5rem, 32vw, 9rem);
  line-height: 1;
  color: rgba(125, 155, 118, 0.32);
  user-select: none; pointer-events: none;
  transition: opacity 0.25s ease;
}
@media (min-width: 901px) { .laengen-wort { font-size: clamp(5rem, 10vw, 9rem); } }
.laengen-img {
  position: absolute; inset: 6% 0 0 0;
  width: 100%; height: 94%; object-fit: contain; object-position: bottom center;
  opacity: 0;
  /* Filter konstant halten: animierte drop-shadow/blur-Filter rendern in Safari
     auf noch nicht dekodierten Bildern als weiße Box */
  filter: drop-shadow(0 30px 30px rgba(46, 69, 48, 0.3));
  transform: translateY(12px) scale(0.98);
  transition: opacity 0.45s ease, transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.laengen-img.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.laengen-linie {
  position: absolute; left: 0; right: 0; top: 0;
  pointer-events: none;
  transition: transform 0.55s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform;
}
.laengen-linie::before {
  content: "";
  display: block;
  border-top: 2px dashed var(--wald);
  opacity: 0.85;
}
.laengen-linie-label {
  position: absolute; right: 0.75rem; top: -0.95rem;
  background: var(--wald); color: var(--leinen-hell);
  font-size: 0.78rem; font-weight: 800;
  border-radius: 999px; padding: 0.15rem 0.7rem;
}
.laengen-controls {
  display: inline-flex; gap: 0.4rem;
  background: var(--leinen);
  border: 1px solid rgba(61, 90, 62, 0.14);
  border-radius: 999px; padding: 0.35rem;
  width: max-content;
  margin-bottom: 1.25rem;
}
.laengen-btn {
  font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 0.95rem;
  color: var(--text-soft);
  background: transparent; border: none; cursor: pointer;
  border-radius: 999px; padding: 0.55rem 1.3rem;
  min-height: 44px;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), transform 160ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .laengen-btn:hover { color: var(--wald); }
}
.laengen-btn:active { transform: scale(0.97); }
.laengen-btn.is-active { background: var(--wald); color: var(--leinen-hell); }
.laengen-info h3 { font-size: 1.6rem; margin-bottom: 0.6rem; }
.laengen-status { color: var(--text-soft); max-width: 26rem; }
.laengen-status strong { color: var(--wald); }

@media (max-width: 900px) {
  .laengen-widget { grid-template-columns: 1fr; gap: 1.5rem; padding: 1rem; }
  .laengen-stage { max-width: 420px; margin: 0 auto; width: 100%; }
  .laengen-info { text-align: center; }
  .laengen-controls { margin-inline: auto; }
  .laengen-status { margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .laengen-img { transition: opacity 0.2s ease; filter: none; }
  .laengen-linie { transition: none; }
  .laengen-btn { transition: none; }
}
.laengen-legende { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 1.5rem; }
.laengen-legende div {
  background: var(--leinen-hell);
  border: 1px solid rgba(61, 90, 62, 0.09);
  border-radius: var(--radius-m);
  padding: 1.25rem 1.2rem;
}
.laengen-legende strong { display: block; color: var(--wald); margin-bottom: 0.3rem; }
.laengen-legende span { font-size: 0.92rem; color: var(--text-soft); }

/* ============ ÜBER-UNS-SEITE ============ */
.team-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 4rem; align-items: center; }
.team-figure { border-radius: var(--radius-l); overflow: hidden; }
.team-figure img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
.salon-figure { border-radius: var(--radius-l); overflow: hidden; margin-top: 3rem; position: relative; }
.salon-figure img { aspect-ratio: 16 / 8; object-fit: cover; width: 100%; }

/* ============ RECHTSSEITEN ============ */
.legal { max-width: 44rem; }
.legal h1 { font-size: clamp(2.2rem, 4vw, 3rem); margin-bottom: 1.5rem; }
.legal p { margin-bottom: 1rem; color: var(--text-soft); }
.legal h2 {
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  margin: 2.5rem 0 0.9rem; color: var(--wald);
}
.legal h3 {
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 1.05rem; font-weight: 800;
  margin: 1.8rem 0 0.7rem; color: var(--text);
}
.legal h2 + h3 { margin-top: 1rem; }
.legal-list {
  list-style: disc; padding-left: 1.4rem;
  margin: 0 0 1.2rem; color: var(--text-soft);
}
.legal-list li { margin-bottom: 0.4rem; }
/* Grossschreibung im Widerspruchsrecht ist juristisch so gewollt — als Block
   abgesetzt, damit die Wand aus Versalien lesbar bleibt */
.legal-emphasis {
  font-size: 0.88rem; line-height: 1.7;
  padding-left: 1rem; border-left: 2px solid var(--kamel);
}
.legal-stand { font-size: 0.85rem; opacity: 0.85; margin-top: 2rem; }
.legal a { color: var(--wald); text-decoration: underline; text-underline-offset: 0.2em; }
/* Lange E-Mails und URLs duerfen mobil brechen */
.legal a, .legal p { overflow-wrap: break-word; }

/* ============ FOOTER ============ */
footer { padding: 4.5rem 0 7.5rem; color: var(--text-soft); }
.footer-grid {
  display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 3rem;
  padding-bottom: 3rem; border-bottom: 1px solid rgba(61, 90, 62, 0.14);
}
.footer-brand { font-family: 'DM Serif Display', serif; font-size: 1.5rem; color: var(--wald); margin-bottom: 0.9rem; }
footer h2 { font-family: 'Nunito', sans-serif; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 800; color: var(--text); margin-bottom: 1rem; }
footer ul { list-style: none; display: grid; gap: 0.5rem; }
footer a { text-decoration: none; transition: color 0.25s var(--ease); }
footer a:hover { color: var(--wald); }
/* Trefferflächen im Footer auf 44 px — waren vorher nur 19 px hoch */
footer ul a, .footer-legal a, .footer-cookie { display: inline-flex; align-items: center; min-height: 44px; }
/* Cookie-Einstellungen ist ein <button>, kein Link: er navigiert nicht, sondern oeffnet
   die Consent-Auswahl. Sieht wie die Nachbarlinks aus, bleibt aber semantisch korrekt
   (vorher stand hier ein href="#", das auf der Verbotsliste steht). */
.footer-cookie {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer;
  transition: color 0.25s var(--ease);
}
.footer-cookie:hover { color: var(--wald); }
.footer-legal { align-items: center; }
.footer-meta {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding-top: 1.75rem; font-size: 0.88rem; flex-wrap: wrap;
}
.footer-legal { display: flex; gap: 1.5rem; list-style: none; }

/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
  .hero-grid, .usp-grid, .about-grid, .team-grid, .service-detail-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .reviews-grid { grid-template-columns: 1fr; }
  .usp-grid .usp-figure { order: -1; }
  /* relative statt static: hebt das Sticky auf (top: auto), bleibt aber Bezugsrahmen
     fuer das absolut positionierte .ai-badge — mit static rutscht es aus dem Bild */
  .service-detail-figure { position: relative; top: auto; }
  .laengen-legende { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  section { padding: 4rem 0; }
  .hero { padding: 2.5rem 0 3.5rem; }
  .service-detail { padding: 3.5rem 0; }
  .nav-links { display: none; }
  .burger { display: block; margin-left: auto; }
  .nav { gap: 0.9rem; padding-left: 1.2rem; }
  .btn--nav { display: none; }
  .mobile-cta { display: block; }
  .focus-grid { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr; }
  .services-grid .service-row:nth-child(2) { border-top: none; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .price-table { font-size: 0.92rem; }

  /* --- Leistungsseite mobil entzerren --- */
  /* Bilder quer statt hochkant: hochkant frisst sonst den ganzen Screen */
  .service-detail-figure img { aspect-ratio: 4 / 3; }

  .service-detail .lead { font-size: 0.98rem; }
  .service-detail p, .check-list li { line-height: 1.55; }
  .check-list li { font-size: 0.94rem; }
  .check-list { gap: 0.65rem; }

  /* Kennzahlen kompakt nebeneinander statt drei hohe Kacheln untereinander */
  .method-facts { grid-template-columns: repeat(3, 1fr); gap: 0.45rem; margin: 1.25rem 0 1.5rem; }
  .method-facts li { padding: 0.7rem 0.55rem; }
  .method-facts strong { font-size: 1rem; }
  .method-facts span { font-size: 0.72rem; line-height: 1.35; margin-top: 0.15rem; }

  /* Haarlängen-Widget: Bühne höher, Figur größer, Regler über volle Breite */
  .laengen-widget { padding: 1rem; gap: 1.5rem; margin: 1.75rem 0 1.25rem; }
  .laengen-stage { aspect-ratio: 4 / 5; }
  .laengen-wort { font-size: 26vw; padding-top: 2%; }
  .laengen-info h3 { font-size: 1.4rem; }
  .laengen-controls { display: flex; width: 100%; margin-bottom: 1rem; }
  .laengen-btn { flex: 1; padding: 0.55rem 0.4rem; font-size: 0.9rem; }
  .laengen-status { font-size: 0.94rem; line-height: 1.5; }
  .laengen-legende div { padding: 0.9rem 1rem; }
}

/* Reduced Motion: Bewegung raus, sanfte Opacity-Fades bleiben */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { transform: none; transition: opacity 0.25s ease; }
  .btn, .btn-icon, .focus-card, .gallery-strip img, .burger span { transition: none !important; }
  .mobile-menu { transition: opacity 0.2s ease, visibility 0.2s; }
  .mobile-menu a { transform: none; transition: opacity 0.2s ease; }
  .focus-card:hover, .gallery-strip figure:hover img { transform: none; }
}