/* =================================================================
   JM THE CUT · Premium Friseursalon · Schwäbisch Hall
   Reines CSS · Mobile-first · Design-Tokens nach Briefing
   ================================================================= */

/* ---------- 1. Design-Tokens ---------- */
:root {
  /* Farben */
  --sage:      #9FAE9C;   /* Salbei  */
  --petrol:    #2C5249;   /* Petrol  */
  --cream:     #EDE9E0;   /* Creme   */
  --anthracite:#1E1C1A;   /* Anthrazit */
  --taupe:     #8A8378;   /* Taupe   */

  /* Abgeleitete Töne für Tiefe */
  --cream-2:   #F5F2EB;
  --sage-deep: #8A9C87;
  --anthracite-2: #15140F;
  --gold:      #C9A86A;   /* warmer Akzent für Sterne / Linien */

  /* Schriften */
  --font-display: 'Cinzel', serif;            /* H1/H2, Versalien */
  --font-serif:   'Cormorant Garamond', serif;/* Unterzeilen */
  --font-body:    'Inter', system-ui, sans-serif;

  /* Maße */
  --maxw: 1240px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --section-y: clamp(5rem, 11vw, 9.5rem);
  --radius: 4px;

  /* Easing */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.65, 0.05, 0.36, 1);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* Lenis übernimmt das Smooth-Scrolling; native Variante als Fallback */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--anthracite);
  line-height: 1.65;
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
/* Bilder mit width/height-Attributen (CLS-Schutz) skalieren proportional, wenn CSS nur die Breite setzt */
img[width][height] { height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
em { font-style: italic; }

/* ---------- 3. Wiederkehrende Bausteine ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 880px; }

.section { padding-block: var(--section-y); position: relative; overflow: hidden; }
.section--cream { background: var(--cream); color: var(--anthracite); }
.section--sage  { background: var(--sage);  color: var(--anthracite); }
.section--dark  { background: var(--anthracite); color: var(--cream); }

/* Sanfte Verlaufskante zwischen den Abschnitten für Rhythmus */
.section--sage::before,
.section--dark::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 120px;
  background: linear-gradient(to bottom, rgba(0,0,0,.05), transparent);
  pointer-events: none; opacity: .35;
}

/* Eyebrow (Cormorant, gesperrt) */
.eyebrow {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--petrol);
  font-weight: 500;
  margin-bottom: 1.1rem;
}
.eyebrow--dark  { color: var(--petrol); }
.eyebrow--light { color: var(--sage); }

/* Section-Überschriften (Cinzel) */
.section-title {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.04;
  font-size: clamp(2.1rem, 6vw, 4.2rem);
  color: var(--anthracite);
}
.section-title em {
  font-family: var(--font-serif);
  text-transform: none;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--petrol);
}
.section-title--light { color: var(--cream); }
.section-title--light em { color: var(--sage); }

.section-head { text-align: center; margin-bottom: clamp(3rem, 6vw, 5rem); }

/* Ornament-Flourish (echo zum Logo) */
.flourish {
  display: block; width: 180px; height: 24px; margin: 1.6rem auto 0;
  background-repeat: no-repeat; background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 24' fill='none' stroke='%232C5249' stroke-width='1.2'%3E%3Cpath d='M2 12h60'/%3E%3Cpath d='M118 12h60'/%3E%3Cpath d='M70 12c4-6 10-6 10 0s6 6 10 0 10-6 10 0'/%3E%3Ccircle cx='90' cy='12' r='2.4' fill='%23C9A86A' stroke='none'/%3E%3C/svg%3E");
  opacity: .9;
}
.flourish-mini {
  display: inline-block; width: 34px; height: 1px; vertical-align: middle;
  background: currentColor; opacity: .5; margin: 0 .9rem;
}

/* ---------- 4. Buttons ---------- */
.btn {
  --bg: var(--petrol); --fg: var(--cream);
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  font-family: var(--font-body);
  font-size: .82rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  padding: 1.05em 2.1em;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer; position: relative; overflow: hidden;
  transition: transform .5s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
  background: transparent; color: var(--fg);
}
/* Füll-Wischeffekt von unten */
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--bg);
  transform: translateY(0);
  transition: transform .55s var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
}
.btn:hover { transform: translateY(-2px); }

.btn--solid { color: var(--cream); }
.btn--solid::after { background: var(--petrol); }
.btn--solid::before { background: var(--anthracite); }
.btn--solid:hover::after { transform: translateY(100%); }
.btn--solid:hover { color: var(--cream); }

.btn--lg { padding: 1.2em 2.6em; font-size: .88rem; }

/* Geister-Button (auf hellem Grund) */
.btn--ghost {
  color: var(--petrol); border-color: var(--petrol);
}
.btn--ghost::after { background: var(--petrol); transform: translateY(101%); }
.btn--ghost:hover { color: var(--cream); }
.btn--ghost:hover::after { transform: translateY(0); }

/* Nav-Button */
.btn--nav {
  color: var(--cream); border-color: rgba(237,233,224,.55);
  padding: .8em 1.6em; font-size: .72rem;
}
.btn--nav::after { background: var(--cream); transform: translateY(101%); }
.btn--nav:hover { color: var(--anthracite); }
.btn--nav:hover::after { transform: translateY(0); }
/* Im gescrollten Zustand: dunkle Variante */
.nav.scrolled .btn--nav,
.nav--solid .btn--nav { color: var(--anthracite); border-color: rgba(30,28,26,.4); }
.nav.scrolled .btn--nav::after,
.nav--solid .btn--nav::after { background: var(--petrol); }
.nav.scrolled .btn--nav:hover,
.nav--solid .btn--nav:hover { color: var(--cream); }

.section-cta { text-align: center; margin-top: clamp(2.5rem, 5vw, 4rem); }

/* ---------- 5. Grain & Cursor & Progress ---------- */
.grain {
  position: fixed; inset: 0; z-index: 9000; pointer-events: none;
  opacity: .04; /* ohne mix-blend-mode → vermeidet Composit-Artefakte auf fixierten Elementen */
  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.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Custom-Cursor entfernt – die native OS-Maus ist auf JEDEM Untergrund
   (hell / Salbei / dunkel) zuverlässig sichtbar. Die .cursor/.cursor-dot-
   Elemente im HTML bleiben dauerhaft ausgeblendet. */
.cursor, .cursor-dot { display: none !important; }

.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--petrol), var(--gold));
  z-index: 9500; transition: width .1s linear;
}

/* =================================================================
   NAVIGATION
   ================================================================= */
.nav {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 1100; /* über dem Mobile-Menü, damit der Schließen-Button (X) klickbar bleibt */
  transition: background-color .5s var(--ease), box-shadow .5s var(--ease), padding .5s var(--ease);
  padding-block: clamp(.6rem, 1.6vw, 1.1rem);
}
.nav__inner {
  max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}

/* Solider Zustand: beim Scrollen ODER dauerhaft auf Unterseiten (.nav--solid).
   Bewusst DECKENDES Creme statt durchscheinend + backdrop-filter – Letzteres
   verursacht beim Scrollen einen grauen Render-Glitch (bleibt bis Reload). */
.nav.scrolled,
.nav--solid {
  background: var(--cream);
  box-shadow: 0 1px 0 rgba(30, 28, 26, .07), 0 16px 44px -30px rgba(30, 28, 26, .45);
}

.nav__logo { position: relative; display: block; z-index: 2; flex-shrink: 0; }
.nav__logo-img { height: clamp(36px, 4.2vw, 50px); width: auto; transition: opacity .5s var(--ease); }
.nav__logo-img--dark { position: absolute; top: 0; left: 0; opacity: 0; }
.nav.scrolled .nav__logo-img--light,
.nav--solid .nav__logo-img--light { opacity: 0; }
.nav.scrolled .nav__logo-img--dark,
.nav--solid .nav__logo-img--dark  { opacity: 1; }

.nav__links { display: none; gap: clamp(1.1rem, 2.2vw, 2.8rem); }
.nav__link {
  font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  color: var(--cream); font-weight: 400; position: relative; padding: .4rem 0;
  transition: color .4s var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 1px;
  background: var(--gold); transition: width .45s var(--ease);
}
.nav__link:hover::after { width: 100%; }
.nav.scrolled .nav__link,
.nav--solid .nav__link { color: var(--anthracite); }

.nav__actions { display: flex; align-items: center; gap: clamp(.8rem, 1.6vw, 1.4rem); }
.nav__social { display: none; gap: .7rem; }
.nav__icon {
  color: var(--cream); display: grid; place-items: center;
  width: 34px; height: 34px; border: 1px solid rgba(237,233,224,.35); border-radius: 50%;
  transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.nav__icon:hover { background: var(--gold); color: var(--anthracite); border-color: var(--gold); transform: translateY(-2px); }
.nav.scrolled .nav__icon,
.nav--solid .nav__icon { color: var(--anthracite); border-color: rgba(30,28,26,.25); }
.nav.scrolled .nav__icon:hover,
.nav--solid .nav__icon:hover { background: var(--petrol); color: var(--cream); border-color: var(--petrol); }

.nav .btn--nav { display: none; }

/* Burger */
.burger {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 42px; height: 42px; background: none; border: none; cursor: pointer; z-index: 1100;
}
.burger span {
  display: block; height: 1.5px; width: 26px; background: var(--cream);
  transition: transform .45s var(--ease), opacity .35s var(--ease), background-color .45s var(--ease);
  margin-inline: auto;
}
.nav.scrolled .burger span,
.nav--solid .burger span { background: var(--anthracite); }
body.menu-open .burger span { background: var(--cream); }
body.menu-open .burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { opacity: 0; }
body.menu-open .burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Bei offenem Menü: Nav transparent + helles Logo/X, damit der Schließen-
   Button über dem dunklen Menü sichtbar ist – auch im gescrollten Zustand. */
body.menu-open .nav { background: transparent; box-shadow: none; }
body.menu-open .nav .nav__logo-img--light { opacity: 1; }
body.menu-open .nav .nav__logo-img--dark  { opacity: 0; }

/* Mobile Off-Canvas */
.mobile-menu {
  position: fixed; inset: 0; z-index: 1050; /* unter der Nav (1100), damit der X-Button klickbar bleibt */
  background: var(--anthracite);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2.5rem; padding: 2rem;
  clip-path: circle(0% at calc(100% - 42px) 42px);
  transition: clip-path .7s var(--ease);
  visibility: hidden;
}
body.menu-open .mobile-menu { clip-path: circle(150% at calc(100% - 42px) 42px); visibility: visible; }
.mobile-menu__links { display: flex; flex-direction: column; gap: 1.6rem; text-align: center; }
.mobile-menu__link {
  font-family: var(--font-display); font-size: clamp(1.6rem, 7vw, 2.4rem);
  text-transform: uppercase; letter-spacing: .04em; color: var(--cream);
  display: flex; align-items: baseline; justify-content: center; gap: 1rem;
  opacity: 0; transform: translateY(20px); transition: opacity .5s var(--ease), transform .5s var(--ease), color .3s;
}
body.menu-open .mobile-menu__link { opacity: 1; transform: translateY(0); }
body.menu-open .mobile-menu__link:nth-child(1) { transition-delay: .15s; }
body.menu-open .mobile-menu__link:nth-child(2) { transition-delay: .22s; }
body.menu-open .mobile-menu__link:nth-child(3) { transition-delay: .29s; }
body.menu-open .mobile-menu__link:nth-child(4) { transition-delay: .36s; }
body.menu-open .mobile-menu__link:nth-child(5) { transition-delay: .43s; }
body.menu-open .mobile-menu__link:nth-child(6) { transition-delay: .50s; }
body.menu-open .mobile-menu__link:nth-child(7) { transition-delay: .57s; }
.mobile-menu__link:hover { color: var(--sage); }
.mobile-menu__num { font-family: var(--font-serif); font-size: .9rem; color: var(--gold); letter-spacing: .1em; }
.mobile-menu__cta { width: min(320px, 80vw); }
.mobile-menu__social { color: var(--sage); font-family: var(--font-serif); font-size: 1.2rem; display: flex; gap: 1rem; letter-spacing: .05em; }
.mobile-menu__social a:hover { color: var(--gold); }
/* Kleine/kurze Screens (z. B. iPhone SE): 7 Einträge kompakter stapeln */
@media (max-height: 720px) {
  .mobile-menu { gap: 1.6rem; }
  .mobile-menu__links { gap: 1rem; }
  .mobile-menu__link { font-size: clamp(1.35rem, 6vw, 2rem); }
}

/* =================================================================
   HERO
   ================================================================= */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: var(--cream); overflow: hidden;
  padding: 7rem var(--gutter) 5rem;
}
.hero__bg { position: absolute; inset: 0; z-index: -1; }

/* --- Hero-Video (Hochformat 9:16) ---
   Zwei Ebenen:
   1) .hero__video--blur = vorgeblurte Mini-Variante als weiche Randfüllung
      (nur auf breiten Querformat-Schirmen sichtbar, sonst gar nicht geladen)
   2) .hero__video--main = das eigentliche Video
   Mobile/Hochformat: cover (füllt den Screen, Fokus mittig-oben).
   Breites Querformat: contain → das ganze Video ist sichtbar, nichts wirkt
   herangezoomt; die Ränder füllt die unscharfe Ebene. */
.hero__media { position: absolute; inset: 0; overflow: hidden; background: var(--anthracite); }
.hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 35%;
  backface-visibility: hidden;
}
/* Randfüllung: standardmäßig aus (Mobile/Tablet) – dort deckt das scharfe
   Video alles ab. Erst auf Desktop-Querformat rendern (siehe Media Query). */
/* Statisches, vorgeblurtes Standbild (WebP) – bewusst KEIN zweites Video:
   ein zweiter Decoder + Fullscreen-Blur waren die Hauptursache fürs Ruckeln. */
.hero__video--blur {
  display: none;
  transform: scale(1.12);
  background-color: var(--anthracite);
}
/* Poster wird exakt wie das Video gesetzt (kein Sprung beim Start).
   translateZ(0): Video bekommt eine eigene Compositing-Ebene → die Wiedergabe
   läuft am Compositor vorbei an Layout/Paint der Seite (kein Ruckeln). */
.hero__video--main { background-size: cover; background-position: center 35%; transform: translateZ(0); }

@media (min-width: 1024px) and (orientation: landscape) {
  .hero__video--main { object-fit: contain; object-position: center; background-size: contain; background-position: center; }
  .hero__video--blur { display: block; }
}

.hero__overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(30,28,26,.55) 0%, rgba(30,28,26,.25) 35%, rgba(30,28,26,.65) 100%),
    radial-gradient(circle at 50% 40%, transparent 30%, rgba(30,28,26,.45) 100%);
}

.hero__content { max-width: 900px; position: relative; }
/* Weicher dunkler Halo hinter dem Textblock: hebt Eyebrow/Headline/Sub vom
   hellen Videomotiv ab, ohne das Video flächig abzudunkeln. */
.hero__content::before {
  content: ""; position: absolute; z-index: -1; inset: -10% -14%;
  background: radial-gradient(ellipse at center,
    rgba(30, 28, 26, .52) 0%, rgba(30, 28, 26, .3) 42%, transparent 70%);
  pointer-events: none;
}
.hero__eyebrow {
  font-family: var(--font-serif);
  letter-spacing: .34em; text-transform: uppercase;
  font-size: clamp(.78rem, 1.6vw, 1rem); font-weight: 500;
  margin-bottom: clamp(1.4rem, 3vw, 2.2rem); color: var(--cream);
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  text-shadow: 0 1px 2px rgba(0,0,0,.7), 0 0 16px rgba(0,0,0,.55);
}
.hero__eyebrow .flourish-mini { opacity: .85; box-shadow: 0 0 8px rgba(0,0,0,.6); }
.flourish-mini--flip { transform: scaleX(-1); }

.hero__title {
  font-family: var(--font-display);
  font-weight: 600; text-transform: uppercase;
  font-size: clamp(2.6rem, 9vw, 6rem); line-height: 1.02; letter-spacing: .02em;
  text-shadow: 0 2px 6px rgba(0,0,0,.45), 0 0 30px rgba(0,0,0,.35);
}
.hero__title .line { display: block; overflow: hidden; }
.hero__title .line--accent {
  font-family: var(--font-serif); text-transform: none; font-style: italic;
  font-weight: 500; color: var(--sage); letter-spacing: 0;
  font-size: clamp(2.4rem, 8.5vw, 5.6rem);
  /* Salbei auf hellem Pink braucht mehr Halt: kräftigerer Schatten + Glow */
  text-shadow: 0 2px 4px rgba(0,0,0,.7), 0 0 28px rgba(0,0,0,.6), 0 0 2px rgba(0,0,0,.8);
}
/* Zeichen-Spans für die Lade-Animation */
.hero__title .char { display: inline-block; will-change: transform, opacity; }

.hero__sub {
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 2.6vw, 1.7rem);
  font-weight: 400; margin-top: clamp(1.2rem, 2.6vw, 1.8rem);
  color: rgba(237,233,224,.95); letter-spacing: .01em;
  text-shadow: 0 1px 3px rgba(0,0,0,.65), 0 0 18px rgba(0,0,0,.5);
}

.hero__actions {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: flex; flex-direction: column; align-items: center; gap: 1.6rem;
}
.hero__badge {
  font-size: .82rem; letter-spacing: .08em; color: rgba(237,233,224,.9);
  display: inline-flex; align-items: center; gap: .55rem;
}
.hero__badge strong { font-weight: 600; }
a.hero__badge { transition: color .3s var(--ease); }
a.hero__badge:hover { color: var(--cream); }
a.hero__badge:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.hero__badge .stars { color: var(--gold); letter-spacing: .1em; }

.hero__scroll {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .8rem;
  font-size: .68rem; letter-spacing: .26em; text-transform: uppercase; color: rgba(237,233,224,.8);
}
.hero__scroll-line {
  width: 1px; height: 56px; background: linear-gradient(var(--gold), transparent);
  position: relative; overflow: hidden;
}
.hero__scroll-line::after {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 40%;
  background: var(--cream); animation: scrollDown 2.2s var(--ease) infinite;
}
@keyframes scrollDown { 0%{transform:translateY(-100%)} 60%,100%{transform:translateY(260%)} }

/* =================================================================
   LEISTUNGEN — Karten
   ================================================================= */
.cards { display: grid; grid-template-columns: 1fr; gap: clamp(1.4rem, 2.5vw, 2rem); }
.card {
  position: relative; background: var(--cream-2);
  border: 1px solid rgba(138,131,120,.22);
  padding: clamp(2.2rem, 4vw, 3rem) clamp(1.8rem, 3vw, 2.4rem) clamp(2.4rem, 4vw, 3rem);
  border-radius: var(--radius); overflow: hidden;
  transition: transform .6s var(--ease), box-shadow .6s var(--ease), border-color .6s var(--ease);
}
.card::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--petrol), var(--gold));
  transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease);
}
.card:hover { transform: translateY(-8px); box-shadow: 0 30px 60px -30px rgba(30,28,26,.35); border-color: transparent; }
.card:hover::before { transform: scaleX(1); }
.card__num {
  font-family: var(--font-serif); font-size: 1rem; letter-spacing: .2em;
  color: var(--gold); font-style: italic;
}
.card__icon {
  display: block; width: 56px; height: 56px; margin: 1.4rem 0 1.6rem; color: var(--petrol);
}
.card__icon svg { width: 100%; height: 100%; }
.card__title {
  font-family: var(--font-display); font-size: clamp(1.25rem, 2.4vw, 1.55rem);
  text-transform: uppercase; letter-spacing: .03em; font-weight: 500; margin-bottom: .9rem;
}
.card__text { color: var(--taupe); font-size: .98rem; line-height: 1.7; }

/* =================================================================
   GALERIE
   ================================================================= */
.gallery {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(.6rem, 1.4vw, 1rem);
}
.gallery__item {
  position: relative; overflow: hidden; aspect-ratio: 4/5;
  border-radius: var(--radius); background: var(--sage-deep);
}
.gallery__item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .9s var(--ease), filter .9s var(--ease);
}
.gallery__item::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(30,28,26,.4), transparent 55%);
  opacity: 0; transition: opacity .6s var(--ease);
}
.gallery__item:hover img { transform: scale(1.08); }
.gallery__item:hover::after { opacity: 1; }

/* Instagram-CTA-Kachel */
.gallery__cta {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem; background: var(--petrol); color: var(--cream); text-align: center;
  font-family: var(--font-serif); font-size: 1.15rem; letter-spacing: .12em;
  text-transform: uppercase; transition: background-color .5s var(--ease);
}
.gallery__cta svg { transition: transform .6s var(--ease); }
.gallery__cta:hover { background: var(--anthracite); }
.gallery__cta:hover svg { transform: scale(1.15) rotate(-6deg); }

/* =================================================================
   ÜBER UNS / TEAM
   ================================================================= */
.about__intro { max-width: 760px; margin: 0 auto clamp(3rem, 6vw, 4.5rem); text-align: center; }
.about__lead {
  font-size: .98rem;                            /* identisch zu .value p */
  color: rgba(237, 233, 224, .65);              /* identisch zu .value p */
  margin-top: 1.8rem;
}

/* Zwei-Schriften-System – nur #team: Cormorant (--font-serif) entfällt im
   Eyebrow und im Fließtext (→ Cinzel bzw. Inter). Das kursive Akzentwort der
   Headline bleibt bewusst auf der globalen Behandlung (Cormorant-Kursiv, sage),
   damit die Headline optisch zu den übrigen Sektionen passt. */
.about-section .eyebrow { font-family: var(--font-display); }

/* Intro mittig; darunter das Familien-Trio (Janine · Tochter · Johanna). */
.about-section { position: relative; }
.about__hero { position: relative; max-width: 1160px; margin-inline: auto; }
.about__hero .about__intro { position: relative; z-index: 2; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }

/* Familien-Trio: drei Hochformat-Fotos nebeneinander, leicht „hingelegt"
   (−3° / 0° / +3°), schwarz-weiß zurückhaltend, auf Hover voll da. */
.about__family {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(.6rem, 2.2vw, 1.6rem);
  max-width: 860px; margin: 0 auto clamp(3rem, 6vw, 4.5rem);
  align-items: end;
}
.about__photo {
  position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: var(--radius);
  background: var(--anthracite-2);
  border: 1px solid rgba(237,233,224,.08);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.75);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.about__photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
  filter: grayscale(1) brightness(.88) contrast(1.02);
  opacity: .82;
  transition: filter .6s var(--ease), opacity .6s var(--ease), transform .9s var(--ease);
}
.about__photo--left   { transform: rotate(-3deg) translateY(6px); }
.about__photo--center { transform: translateY(-10px); z-index: 1; }
.about__photo--right  { transform: rotate(3deg) translateY(6px); }
/* Kleine Goldlinie als ruhiger Akzent (Echo der Wert-Linien) */
.about__photo::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 40px; height: 2px;
  background: var(--gold); opacity: .9;
}
@media (hover: hover) {
  .about__photo:hover { transform: translateY(-14px) rotate(0deg) scale(1.04); z-index: 3; box-shadow: 0 40px 70px -30px rgba(0,0,0,.85); }
  .about__photo:hover img { filter: grayscale(1) brightness(1) contrast(1); opacity: 1; transform: scale(1.03); }
}
.about__values {
  display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid rgba(159,174,156,.2); border-bottom: 1px solid rgba(159,174,156,.2);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.value { position: relative; }
.value__line { display: block; width: 40px; height: 2px; background: var(--gold); margin-bottom: 1.4rem; }
.value h3 {
  font-family: var(--font-display); font-size: clamp(1.15rem, 2vw, 1.4rem);
  text-transform: uppercase; letter-spacing: .04em; font-weight: 500; color: var(--cream); margin-bottom: .7rem;
}
.value p { color: rgba(237,233,224,.65); font-size: .98rem; }

.highlights {
  display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3rem);
  margin-top: clamp(2.5rem, 5vw, 4rem); text-align: center;
}
.highlight { display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.highlight__num {
  font-family: var(--font-display); font-size: clamp(1.3rem, 2vw, 1.75rem);
  text-transform: uppercase; letter-spacing: .03em; color: var(--sage); font-weight: 600;
}
.highlight__num .amp { color: var(--gold); }
.highlight__label { font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(237,233,224,.55); max-width: 220px; }
.highlight--badge { gap: 1rem; }
/* Zwei Highlights → schmaler, mittig */
.highlights--two { max-width: 640px; margin-inline: auto; }
.highlight__pm { width: 150px; height: auto; filter: brightness(0) invert(1); opacity: .92; }

/* Wiederverwendbare Unter-Überschrift im Headline-Stil (.section-title--light),
   bewusst kleiner als die Hauptheadline. Nutzt nur bestehende Tokens. */
.about__subtitle {
  font-family: var(--font-display); font-weight: 500;
  text-transform: uppercase; letter-spacing: .04em; line-height: 1.1;
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  color: var(--cream);
}
.about__subtitle em {
  font-family: var(--font-display); font-style: normal; color: var(--sage);
}

/* USP-Panel „Friseurhandwerk für alle" – hervorgehobener Blickfang mit
   Gold-Akzent (Token-Farben mit Alpha, wie im restlichen Stylesheet). */
.about__usp {
  max-width: 820px;
  margin: clamp(3rem, 6vw, 4.5rem) auto 0;
  padding: clamp(1.8rem, 4vw, 3rem) clamp(1.5rem, 5vw, 3rem);
  text-align: center;
  border: 1px solid rgba(201, 168, 106, .35);   /* --gold mit Alpha */
  border-top: 2px solid var(--gold);
  background: rgba(21, 20, 15, .5);              /* --anthracite-2 mit Alpha */
  border-radius: var(--radius);
}
.about__usp .value__line { margin-inline: auto; }
.about__usp h3 { margin-bottom: 1.4rem; }
.about__usp p {
  font-size: .98rem;                            /* identisch zu .value p */
  color: rgba(237, 233, 224, .65);              /* identisch zu .value p */
}
.about__usp p + p { margin-top: 1.1rem; }

/* Überschrift „Was uns auszeichnet" über dem Pillar-Grid */
.about__values-head { text-align: center; margin: clamp(3rem, 6vw, 4.5rem) auto clamp(2rem, 4vw, 3rem); }

/* Schlussakkord „Willkommen bei JM The Cut" */
.about__welcome { max-width: 640px; margin: clamp(3rem, 6vw, 4.5rem) auto 0; text-align: center; }
.about__welcome h3 { margin-bottom: 1.2rem; }
.about__welcome p {
  font-size: .98rem;                            /* identisch zu .value p */
  color: rgba(237, 233, 224, .65);              /* identisch zu .value p */
}

/* =================================================================
   TEAM
   ================================================================= */
.team {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(2.2rem, 4vw, 3rem);
  max-width: 1040px; margin-inline: auto;
}
.team__member { text-align: center; }
.team__photo {
  position: relative; margin: 0 auto 1.4rem; aspect-ratio: 4 / 5; overflow: hidden;
  max-width: 340px;
  border-radius: var(--radius); background: var(--cream-2);
  border: 1px solid rgba(138,131,120,.22);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease), border-color .6s var(--ease);
}
.team__photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
  filter: grayscale(1) contrast(1.02);
  transition: transform .9s var(--ease), filter .6s var(--ease);
}
/* Goldene Akzentlinie oben – wie bei den Leistungs-Karten */
.team__photo::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px; z-index: 1;
  background: linear-gradient(90deg, var(--petrol), var(--gold));
  transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease);
}
.team__member:hover .team__photo { transform: translateY(-8px); box-shadow: 0 30px 60px -30px rgba(30,28,26,.35); border-color: transparent; }
.team__member:hover .team__photo::before { transform: scaleX(1); }
.team__member:hover .team__photo img { transform: scale(1.04); }

/* Platzhalter, bis das Foto vorliegt */
.team__photo--placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  color: var(--petrol);
  background:
    radial-gradient(circle at 30% 20%, rgba(159,174,156,.35), transparent 60%),
    repeating-linear-gradient(45deg, rgba(44,82,73,.05) 0 14px, transparent 14px 28px),
    var(--cream-2);
  font-family: var(--font-serif); font-style: italic; font-size: 1.1rem; letter-spacing: .06em;
}
.team__photo--placeholder svg { width: 56px; height: 56px; opacity: .8; }

.team__name {
  font-family: var(--font-display); font-size: clamp(1.2rem, 2.2vw, 1.45rem);
  text-transform: uppercase; letter-spacing: .04em; font-weight: 500; color: var(--anthracite);
}
.team__role {
  font-family: var(--font-serif); font-style: italic; font-size: 1.1rem;
  color: var(--petrol); margin-top: .3rem;
}
.team__text { color: var(--taupe); font-size: .95rem; line-height: 1.65; max-width: 300px; margin: .9rem auto 0; }

/* =================================================================
   BEWERTUNGEN
   ================================================================= */
.rating-title {
  display: flex; align-items: center; justify-content: center; gap: 1.2rem; flex-wrap: wrap;
}
.rating-title__big {
  font-family: var(--font-display); font-size: clamp(3.5rem, 11vw, 7rem);
  color: var(--petrol); line-height: .9; font-weight: 600;
}
.rating-title__rest {
  font-family: var(--font-serif); font-style: italic; text-transform: none;
  font-size: clamp(1.2rem, 3vw, 1.9rem); letter-spacing: 0; text-align: left; color: var(--anthracite); font-weight: 500;
}
.rating-stars { color: var(--gold); font-size: 1.5rem; letter-spacing: .3em; margin-top: 1.4rem; }

/* --- Bewertungen als Karussell (scroll-/wischbar, aktive Karte mittig) --- */
.reviews-carousel { position: relative; }
.reviews {
  --rev-card: clamp(280px, 80vw, 400px);
  display: flex; gap: clamp(1rem, 2.2vw, 1.8rem);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding-block: 2.4rem; /* Platz für Skalierung & Schatten der aktiven Karte */
  /* erlaubt, auch die erste/letzte Karte mittig zu zentrieren */
  padding-inline: max(1rem, calc((100% - var(--rev-card)) / 2));
  scrollbar-width: none; -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.reviews::-webkit-scrollbar { display: none; }

.review {
  flex: 0 0 var(--rev-card); scroll-snap-align: center;
  background: var(--cream); border-radius: var(--radius);
  padding: clamp(2rem, 3.5vw, 2.6rem); position: relative;
  border: 1px solid rgba(138,131,120,.18);
  opacity: .4; transform: scale(.9); transform-origin: center;
  transition: opacity .5s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease);
}
.review.is-active {
  opacity: 1; transform: scale(1);
  box-shadow: 0 30px 60px -30px rgba(30,28,26,.45);
}
/* Während des unsichtbaren Rücksprungs: kein Snapping, keine Übergänge */
.reviews.is-jumping { scroll-snap-type: none; scroll-behavior: auto; }
.reviews.is-jumping .review { transition: none; }

/* Pfeil-Buttons */
.reviews-nav {
  position: absolute; top: calc(50% - .6rem); transform: translateY(-50%); z-index: 3;
  width: clamp(40px, 5vw, 52px); height: clamp(40px, 5vw, 52px); border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--cream); color: var(--petrol);
  border: 1px solid rgba(44,82,73,.28);
  box-shadow: 0 14px 30px -16px rgba(30,28,26,.4);
  transition: background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.reviews-nav:hover { background: var(--petrol); color: var(--cream); transform: translateY(-50%) scale(1.06); }
.reviews-nav--prev { left: clamp(-.5rem, 1vw, .5rem); }
.reviews-nav--next { right: clamp(-.5rem, 1vw, .5rem); }
.reviews-nav:disabled { opacity: .3; cursor: default; box-shadow: none; }
.reviews-nav:disabled:hover { background: var(--cream); color: var(--petrol); transform: translateY(-50%); }

/* Punkte-Navigation */
.reviews-dots { display: flex; justify-content: center; gap: .55rem; margin-top: 1.2rem; }
.reviews-dot {
  width: 9px; height: 9px; border-radius: 50%; border: none; cursor: pointer; padding: 0;
  background: rgba(30,28,26,.22); transition: background-color .3s var(--ease), transform .3s var(--ease);
}
.reviews-dot.is-active { background: var(--petrol); transform: scale(1.3); }
.review__stars { color: var(--gold); letter-spacing: .22em; font-size: 1.05rem; margin-bottom: 1.2rem; }
.review__quote {
  font-family: var(--font-serif); font-size: clamp(1.1rem, 2vw, 1.3rem);
  line-height: 1.55; color: var(--anthracite); font-weight: 400;
}
.review__author { margin-top: 1.4rem; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; }
.review__author span { color: var(--taupe); font-weight: 400; }

/* =================================================================
   PREISE
   ================================================================= */
.pricelist { margin-top: 1rem; }
.price-row {
  display: flex; align-items: baseline; gap: 1rem;
  padding: clamp(1rem, 2vw, 1.3rem) 0;
  border-bottom: 1px solid rgba(138,131,120,.25);
}
.price-row:first-child { border-top: 1px solid rgba(138,131,120,.25); }
.price-row__name {
  font-family: var(--font-display); font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  text-transform: uppercase; letter-spacing: .03em; font-weight: 500;
}
.price-row__dots { flex: 1; border-bottom: 1px dotted rgba(138,131,120,.6); transform: translateY(-4px); }
.price-row__val {
  font-family: var(--font-serif); font-style: italic; font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  color: var(--petrol); white-space: nowrap; font-weight: 500;
}
.pricelist__note {
  text-align: center; color: var(--taupe); font-size: .9rem;
  max-width: 560px; margin: 2rem auto 0; line-height: 1.6;
}

/* Preis-Blöcke (Unter-Überschrift + Intro) – nur bestehende Tokens/Fonts */
.price-block { margin-top: clamp(2.5rem, 5vw, 4rem); text-align: center; }
.price-block:first-of-type { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.price-block__title {
  font-family: var(--font-display); font-weight: 500;
  text-transform: uppercase; letter-spacing: .04em; line-height: 1.1;
  font-size: clamp(1.5rem, 3.2vw, 2.2rem); color: var(--anthracite);
}
.price-block__intro {
  color: var(--taupe); font-size: .95rem; line-height: 1.6;
  max-width: 620px; margin: 1rem auto 0;
}
/* Dezente Hinweiszeile direkt über einer Preisliste */
.price-block__hint {
  text-align: center; color: var(--taupe); font-size: .85rem;
  margin: 1.4rem auto 0;
}

/* Terminhinweise: bewusst ruhiger, dezenter Abschlussblock */
.price-terms { max-width: 680px; margin: clamp(3rem, 6vw, 4.5rem) auto 0; text-align: center; }
.price-terms h3 {
  font-family: var(--font-display); font-weight: 500;
  text-transform: uppercase; letter-spacing: .08em;
  font-size: clamp(1rem, 2vw, 1.2rem); color: var(--taupe); margin-bottom: 1.2rem;
}
.price-terms p { color: var(--taupe); font-size: .88rem; line-height: 1.7; }
.price-terms p + p { margin-top: 1rem; }

/* =================================================================
   KONTAKT
   ================================================================= */
.contact { display: grid; grid-template-columns: 1fr; gap: clamp(2.5rem, 5vw, 4rem); }
.contact__info { display: flex; flex-direction: column; gap: 2.2rem; }
.contact__block h3 {
  font-family: var(--font-display); font-size: 1.1rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--sage); font-weight: 500; margin-bottom: .7rem;
}
.contact__block p { color: rgba(237,233,224,.85); line-height: 1.8; }
.contact__block a { transition: color .3s; }
.contact__block a:hover { color: var(--gold); }
.contact__tag {
  display: inline-block; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); border: 1px solid rgba(201,168,106,.4); padding: .1em .6em; border-radius: 100px; margin-left: .4rem;
}
.hours { display: flex; flex-direction: column; gap: .5rem; max-width: 360px; }
.hours li { display: flex; justify-content: space-between; gap: 1.5rem; color: rgba(237,233,224,.85); border-bottom: 1px dotted rgba(237,233,224,.18); padding-bottom: .4rem; }
/* Beide Spalten bleiben einzeilig (kein Umbruch in „Mittwoch – Samstag" / „9 Uhr bis Open End") */
.hours li span { white-space: nowrap; }
.hours li span:last-child { text-align: right; }
.hours li span:first-child { color: var(--sage); }
.hours__note { margin-top: .9rem; font-family: var(--font-serif); font-style: italic; color: var(--gold); font-size: 1rem; }

.contact__map {
  border-radius: var(--radius); overflow: hidden; min-height: 340px;
  border: 1px solid rgba(159,174,156,.25); position: relative; background: var(--anthracite-2);
}
.contact__map iframe { width: 100%; height: 100%; min-height: 340px; border: 0; filter: grayscale(.4) contrast(.95); display: block; }

/* DSGVO Map-Consent-Platzhalter */
.map-consent {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .7rem; text-align: center; cursor: pointer; color: var(--cream);
  background:
    radial-gradient(circle at 30% 20%, rgba(159,174,156,.18), transparent 60%),
    repeating-linear-gradient(45deg, rgba(237,233,224,.03) 0 14px, transparent 14px 28px),
    var(--anthracite-2);
  border: none; font-family: var(--font-body); padding: 1.5rem;
  transition: background-color .4s var(--ease);
}
.map-consent:hover { background-color: var(--anthracite); }
.map-consent svg { color: var(--sage); margin-bottom: .4rem; transition: transform .5s var(--ease); }
.map-consent:hover svg { transform: translateY(-4px) scale(1.05); }
.map-consent__title { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase; }
.map-consent__hint {
  font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold);
  border: 1px solid rgba(201,168,106,.5); padding: .55em 1.2em; border-radius: 100px; margin-top: .5rem;
  transition: background-color .4s var(--ease), color .4s var(--ease);
}
.map-consent:hover .map-consent__hint { background: var(--gold); color: var(--anthracite); }
.map-consent__note { font-size: .72rem; color: rgba(237,233,224,.45); margin-top: .3rem; max-width: 320px; line-height: 1.5; }
.map-consent__legal {
  font-size: .72rem; color: rgba(237,233,224,.45); text-align: center;
  padding: .55rem 1rem; background: var(--anthracite-2);
}
.map-consent__legal a { color: var(--sage); text-decoration: underline; text-underline-offset: 2px; }
.map-consent__legal a:hover { color: var(--gold); }
.contact__map.is-loaded .map-consent__legal { display: none; }
/* Alternativ-Link unter der Karte (funktioniert ohne Einwilligung/JS) */
.contact__map { display: flex; flex-direction: column; }
.contact__map iframe { flex: 1; }
/* Consent-Fläche füllt den Kartenbereich oberhalb des Links (Flex statt absolut) */
.contact__map .map-consent { position: relative; inset: auto; flex: 1; width: 100%; min-height: 300px; }
.contact__map-link {
  display: block; text-align: center; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sage); padding: .8rem 1rem; background: var(--anthracite-2);
  border-top: 1px solid rgba(159,174,156,.18); transition: color .3s var(--ease);
}
.contact__map-link:hover { color: var(--gold); }

/* =================================================================
   CONSENT-HINWEIS (Google Maps) – dezente Karte unten, im Token-Set
   ================================================================= */
.consent {
  position: fixed; z-index: 1200;
  left: 50%; bottom: max(1rem, env(safe-area-inset-bottom));
  transform: translate(-50%, calc(100% + 2rem));
  width: min(760px, calc(100% - 2rem));
  opacity: 0;
  transition: transform .55s var(--ease), opacity .45s var(--ease);
}
.consent.is-visible { transform: translate(-50%, 0); opacity: 1; }
.consent__inner {
  display: flex; align-items: center; gap: clamp(.9rem, 2vw, 1.4rem); flex-wrap: wrap;
  background: var(--anthracite); color: var(--cream);
  border: 1px solid rgba(201,168,106,.35); border-top: 2px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.6);
  padding: clamp(1rem, 2.4vw, 1.4rem) clamp(1.1rem, 2.6vw, 1.6rem);
}
.consent__icon { color: var(--sage); flex: 0 0 auto; }
.consent__body { flex: 1 1 260px; }
.consent__title { font-family: var(--font-display); font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: .25rem; }
.consent__text { font-size: .84rem; line-height: 1.55; color: rgba(237,233,224,.7); }
.consent__text a { color: var(--sage); text-decoration: underline; text-underline-offset: 2px; }
.consent__text a:hover { color: var(--gold); }
.consent__actions { display: flex; align-items: center; gap: .9rem; flex: 0 0 auto; margin-left: auto; }
.consent__btn { padding: .85em 1.5em; font-size: .74rem; isolation: isolate; } /* eigener Stacking-Context → ::after-Füllung bleibt sichtbar */
.consent__decline {
  background: none; border: none; cursor: pointer; color: rgba(237,233,224,.65);
  font-family: var(--font-body); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  padding: .6em .2em; transition: color .3s var(--ease);
}
.consent__decline:hover { color: var(--cream); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 600px) {
  .consent__actions { width: 100%; justify-content: space-between; margin-left: 0; }
}

/* =================================================================
   FOOTER
   ================================================================= */
.footer { background: var(--anthracite-2); color: var(--cream); padding-block: clamp(3.5rem, 6vw, 5rem) 2rem; }
.footer__grid {
  display: grid; grid-template-columns: 1fr; gap: clamp(2.2rem, 4vw, 3rem);
  padding-bottom: clamp(2.5rem, 4vw, 3.5rem); border-bottom: 1px solid rgba(237,233,224,.12);
}
.footer__logo { height: clamp(52px, 6vw, 68px); width: auto; margin-bottom: 1.2rem; }
.footer__claim { font-family: var(--font-serif); font-size: 1.1rem; color: rgba(237,233,224,.75); font-style: italic; max-width: 320px; line-height: 1.5; }
.footer__social { display: flex; gap: .8rem; margin-top: 1.4rem; }
.footer__social a {
  width: 40px; height: 40px; border: 1px solid rgba(237,233,224,.25); border-radius: 50%;
  display: grid; place-items: center; transition: background-color .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}
.footer__social a:hover { background: var(--gold); color: var(--anthracite); transform: translateY(-3px); }
.footer__col h4 {
  font-family: var(--font-display); font-size: .92rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--sage); font-weight: 500; margin-bottom: 1.2rem;
}
.footer__col ul { display: flex; flex-direction: column; gap: .6rem; }
.footer__col li { font-size: .92rem; color: rgba(237,233,224,.7); display: flex; justify-content: space-between; gap: 1.5rem; }
.footer__col a { transition: color .3s; }
.footer__col a:hover { color: var(--gold); }

.footer__bottom {
  display: flex; flex-direction: column; gap: .6rem; align-items: center; text-align: center;
  padding-top: 2rem; font-size: .82rem; color: rgba(237,233,224,.5); letter-spacing: .04em;
}
.footer__credit { font-family: var(--font-serif); font-style: italic; color: var(--gold); }
.footer__powered { color: rgba(237,233,224,.4); }
.footer__powered a { color: rgba(237,233,224,.7); transition: color .3s var(--ease); }
.footer__powered a:hover { color: var(--gold); }

/* =================================================================
   RECHTLICHE UNTERSEITEN (Impressum / Datenschutz)
   ================================================================= */
.legal-page { background: var(--cream); }

/* Kopfband unter der soliden Nav */
.legal-hero {
  background: var(--anthracite);
  color: var(--cream);
  padding: clamp(8rem, 16vw, 11rem) 0 clamp(3rem, 6vw, 4.5rem);
  position: relative; overflow: hidden;
}
.legal-hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: .5;
}
.legal-hero__eyebrow {
  font-family: var(--font-serif); letter-spacing: .34em; text-transform: uppercase;
  font-size: clamp(.8rem, 1.6vw, 1rem); color: var(--sage); font-weight: 500; margin-bottom: 1rem;
}
.legal-hero__title {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em;
  font-weight: 500; line-height: 1.05; font-size: clamp(2.2rem, 7vw, 4rem); color: var(--cream);
}
.legal-hero__back {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.6rem;
  font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold);
  transition: gap .35s var(--ease), color .35s var(--ease);
}
.legal-hero__back:hover { gap: .9rem; color: var(--cream); }
.legal-hero__back svg { width: 16px; height: 16px; }

/* Inhalt */
.legal { padding-block: clamp(3.5rem, 7vw, 6rem); }
.legal__body { max-width: 760px; }
.legal__intro {
  font-family: var(--font-serif); font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  line-height: 1.6; color: var(--taupe); margin-bottom: clamp(2.5rem, 5vw, 3.5rem); font-style: italic;
}
.legal__block { margin-bottom: clamp(2.2rem, 4vw, 3rem); }
.legal__block h2 {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .03em;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem); font-weight: 500; color: var(--anthracite);
  margin-bottom: 1rem; padding-bottom: .7rem; border-bottom: 1px solid rgba(138,131,120,.3);
  display: flex; align-items: baseline; gap: .8rem;
}
.legal__block h2::before {
  content: ""; width: 22px; height: 2px; background: var(--gold); display: inline-block; transform: translateY(-4px);
}
.legal__block h3 {
  font-family: var(--font-body); font-weight: 600; font-size: 1rem; letter-spacing: .02em;
  color: var(--petrol); margin: 1.4rem 0 .5rem;
}
.legal__block p, .legal__block li { color: var(--anthracite); font-size: .98rem; line-height: 1.75; }
.legal__block p { margin-bottom: .9rem; }
.legal__block p strong { font-weight: 600; }
.legal__block a { color: var(--petrol); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(44,82,73,.35); transition: text-decoration-color .3s, color .3s; }
.legal__block a:hover { color: var(--gold); text-decoration-color: var(--gold); }
.legal__list { list-style: none; display: flex; flex-direction: column; gap: .5rem; margin: .6rem 0 1rem; }
.legal__list li { position: relative; padding-left: 1.4rem; }
.legal__list li::before { content: "—"; position: absolute; left: 0; color: var(--gold); }

/* Adress-/Kontaktkarte */
.legal__card {
  background: var(--cream-2); border: 1px solid rgba(138,131,120,.25);
  border-left: 3px solid var(--petrol); border-radius: var(--radius);
  padding: clamp(1.4rem, 3vw, 2rem); margin: 1.2rem 0; line-height: 1.8;
}
.legal__card a { text-decoration: none; }

/* Credit-Block (Technische Umsetzung): Text links, Logo rechts */
.legal__credit { display: flex; align-items: center; gap: clamp(1.5rem, 4vw, 3rem); flex-wrap: wrap; }
.legal__credit .legal__card { flex: 1 1 260px; }
.legal__credit-logo { flex: 0 0 auto; display: block; transition: opacity .3s var(--ease), transform .3s var(--ease); }
.legal__credit-logo:hover { opacity: .72; transform: translateY(-2px); }
.legal__credit-logo img { width: clamp(170px, 24vw, 240px); height: auto; }

/* Hinweis auf vom Inhaber zu prüfende Felder */
.legal__todo {
  display: block; font-size: .82rem; color: var(--taupe); font-style: italic;
  background: rgba(201,168,106,.1); border: 1px dashed rgba(201,168,106,.5);
  padding: .9rem 1.1rem; border-radius: var(--radius); margin: 1.5rem 0;
}
.legal__todo strong { font-style: normal; color: var(--petrol); }

.legal__updated { margin-top: 3rem; font-size: .85rem; color: var(--taupe); letter-spacing: .04em; }
.legal__note { font-size: .85rem !important; color: var(--taupe) !important; font-style: italic; }
.legal__block code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .85em; background: rgba(138,131,120,.14); padding: .1em .4em; border-radius: 3px; }

/* Sanfte Einblendung beim Laden (kein ScrollTrigger nötig → Text immer lesbar) */
.js .legal-fade { opacity: 0; transform: translateY(24px); animation: legalFade .9s var(--ease) forwards; }
.js .legal-fade--1 { animation-delay: .05s; }
.js .legal-fade--2 { animation-delay: .15s; }
.js .legal-fade--3 { animation-delay: .25s; }
@keyframes legalFade { to { opacity: 1; transform: none; } }

/* =================================================================
   SCROLL-REVEAL Ausgangszustände (GSAP entfernt sie)
   ================================================================= */
/* Ausgangszustände nur, wenn JS aktiv ist (Progressive Enhancement).
   Ohne JS (.js fehlt) bleiben alle Inhalte sofort sichtbar. */
.js .reveal-up    { opacity: 0; transform: translateY(40px); }
.js .reveal-scale { opacity: 0; transform: scale(.94); }

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (min-width: 600px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
  .gallery { grid-template-columns: repeat(3, 1fr); }
  .team { grid-template-columns: repeat(3, 1fr); }
  /* Vier Pillars → ausgewogenes 2×2-Grid auf Tablet/Desktop (Mobile gestapelt) */
  .about__values { grid-template-columns: repeat(2, 1fr); }

  /* Highlights: gemeinsame Zeilen über alle 3 Spalten (Subgrid), damit das
     Paul-Mitchell-Logo auf gleicher Höhe wie „SEIT 2017" / „MEISTERIN" sitzt. */
  .highlights {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;   /* Zeile 1: Überschrift/Logo · Zeile 2: Label */
    column-gap: clamp(2rem, 4vw, 3rem);
    row-gap: .9rem;
    align-items: start;
  }
  .highlight {
    grid-row: span 2;
    display: grid;
    grid-template-rows: subgrid;     /* erbt die gemeinsame Zeilenhöhe */
    align-items: start;              /* oben ausrichten: bei 2-zeiligem Text ragt nichts heraus */
    justify-items: center;
    gap: .9rem;
  }

  .highlights--two { grid-template-columns: repeat(2, 1fr); }

  .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
  .footer__bottom { flex-direction: row; justify-content: space-between; }
}

@media (min-width: 768px) {
  .contact { grid-template-columns: 1fr 1.1fr; align-items: stretch; }
}

@media (min-width: 1200px) {
  /* Ab hier ist genug Breite, dass die Labels sicher einzeilig bleiben –
     dann werden Logo & Texte exakt mittig auf einer Höhe zentriert. */
  .highlight { align-items: center; }
}

/* Desktop-Navigation: 7 Ziele + Logo + CTA brauchen Platz → ab 1024px;
   darunter Burger-Menü. Social-Icons erst ab 1200px (stehen auch im
   Mobile-Menü und im Footer). */
@media (min-width: 1024px) {
  .nav__links { display: flex; }
  .nav .btn--nav { display: inline-flex; }
  .burger { display: none; }
}
@media (min-width: 1200px) {
  .nav__social { display: flex; }
}

/* =================================================================
   REDUCED MOTION — alles ruhig stellen
   ================================================================= */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal-up, .reveal-scale { opacity: 1 !important; transform: none !important; }
  .hero__title .char { opacity: 1 !important; transform: none !important; }
  .cursor, .cursor-dot { display: none !important; }
  .hero__scroll-line::after { animation: none; }
  .grain { display: none; }

  /* Hero-Video: wird per JS gar nicht erst geladen → Poster bleibt stehen */
  .hero__video--blur { display: none !important; }
}

/* =================================================================
   NEWS · letzte Instagram-Beiträge
   Neu in Phase F. Diese Sektion hat als einzige keine Vorlage in
   _referenz/index.html.
   Ergänzung am Dateiende – oben wurde keine bestehende Regel
   verändert. Es kommen ausschließlich vorhandene Tokens, Abstände
   und Reveal-Klassen zum Einsatz.
   ================================================================= */
/* Unter 600 px eine waagerecht wischbare Reihe, eine Kachel je
   Einrastpunkt und formatfüllend – ab 600 px das Raster aus drei
   Kacheln (siehe Media Query weiter unten).

   Warum die Grenze bei 600 und nicht bei 1024 liegt: Auf dem Tablet
   hat der Wischer nichts gebracht. Zwei Kacheln nebeneinander sind
   grösser als drei und damit auch höher – die Scrollstrecke stieg von
   1135 auf 1222 px. Gemessen, nicht geschätzt.

   Der Scroller bleibt bewusst INNERHALB von .container. Damit stimmt der
   seitliche Abstand an beiden Enden von selbst mit dem übrigen Layout
   überein – auch bei der ersten und der letzten Kachel – ohne dass die
   Reihe erst aus dem Raster ausbrechen und die Abstände selbst nachbauen
   müsste. */
.news {
  --news-gap: clamp(1.8rem, 3vw, 2.6rem);

  display: flex;
  gap: var(--news-gap);
  max-width: 1040px; margin-inline: auto;

  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Am Ende der Reihe nicht die Seite mitziehen.
     Was das NICHT leistet: Wischt man in Chrome über den Anfang der Reihe
     hinaus, kann die Zurück-Geste des Browsers greifen. Das hängt nicht an
     dieser Zeile – geprüft mit auto, contain und none, am Element wie am
     Wurzelelement, das Verhalten war jedes Mal dasselbe. Auf Telefon und
     Tablet ist die Zurück-Geste eine Systemgeste vom Bildschirmrand und
     wird von einem Wisch in der Bildmitte gar nicht ausgelöst. */
  overscroll-behavior-x: contain;

  /* Luft für den Anheb-Effekt beim Überfahren. overflow-x: auto zwingt
     die senkrechte Achse rechnerisch ebenfalls auf „auto“ – ohne diese
     Reserve ragte die angehobene Kachel oben heraus und der Bereich
     bekäme eine senkrechte Bildlaufleiste. Die negativen Aussenabstände
     nehmen die Reserve fürs umgebende Layout wieder heraus, unterm
     Strich verschiebt sich nichts. */
  padding-block: 12px; margin-block: -12px;

  /* Bildlaufleiste zurückgenommen, aber nicht abgeschaltet: Sie bleibt
     bedienbar und sichtbar, nur unauffällig. */
  scrollbar-width: thin;
  scrollbar-color: rgba(44, 82, 73, .35) transparent;
}
.news::-webkit-scrollbar { height: 4px; }
.news::-webkit-scrollbar-track { background: transparent; }
.news::-webkit-scrollbar-thumb {
  background: rgba(44, 82, 73, .3); border-radius: 2px;
}
.news::-webkit-scrollbar-thumb:hover { background: rgba(44, 82, 73, .5); }

.news__item {
  display: block; color: inherit; text-decoration: none;
  transition: transform .6s var(--ease);

  /* Eine Kachel je Einrastpunkt. */
  scroll-snap-align: start;

  /* Volle Breite innerhalb von .container. Bewusst KEIN Anschnitt der
     nächsten Kachel: Ein halb abgeschnittenes Bild liest sich wie ein
     Formatierungsfehler. Dass es weitergeht, zeigen die Punkte unter
     der Reihe. */
  flex: 0 0 100%;
}

/* Die letzte Kachel rastet an ihrer RECHTEN Kante ein. Sonst läge ihr
   Einrastpunkt hinter dem Ende der Scrollstrecke und wäre unerreichbar:
   Der Bereich könnte das Ende gar nicht sauber anfahren und spränge
   zurück. Mit „end“ fällt der letzte Einrastpunkt genau auf das Ende. */
.news__item:last-child { scroll-snap-align: end; }

.news__media {
  position: relative; margin: 0 0 1.2rem; aspect-ratio: 9 / 16; overflow: hidden;
  border-radius: var(--radius); background: var(--sage-deep);
}
.news__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .9s var(--ease);
}
/* Goldene Akzentlinie oben – dasselbe Motiv wie bei den Team-Fotos */
.news__media::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px; z-index: 1;
  background: linear-gradient(90deg, var(--petrol), var(--gold));
  transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease);
}

/* Abspiel-Symbol bei Videos und Reels – dezent, im Stil der übrigen Icons */
.news__play {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  color: var(--cream); pointer-events: none;
  filter: drop-shadow(0 2px 10px rgba(30,28,26,.5));
  transition: transform .6s var(--ease);
}

.news__text {
  font-family: var(--font-serif); font-size: clamp(1rem, 1.6vw, 1.12rem);
  line-height: 1.55; color: var(--anthracite);
}
.news__date {
  margin-top: .7rem; font-size: .82rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--petrol); font-weight: 500;
}

@media (hover: hover) {
  .news__item:hover { transform: translateY(-8px); }
  .news__item:hover .news__media::before { transform: scaleX(1); }
  .news__item:hover .news__media img { transform: scale(1.05); }
  .news__item:hover .news__play { transform: scale(1.12); }
}

/* Ab 600 px das Raster aus drei Kacheln – auf dem Tablet dieselbe
   Aufteilung wie auf dem Desktop, nur schmaler (bei 768 px rund 225 px
   je Kachel). Alles, was den Scroller ausmacht, wird hier
   zurückgenommen: Ohne overflow: visible schnitte der Bereich den
   Anheb-Effekt beim Überfahren ab. */
@media (min-width: 600px) {
  .news {
    display: grid; grid-template-columns: repeat(3, 1fr);
    overflow: visible;
    scroll-snap-type: none;
    padding-block: 0; margin-block: 0;
  }
}

/* --- Seitenanzeige unter der Reihe -------------------------------
   Drei Punkte, mittig, knapp unter den Kacheln. Der aktive in Gold,
   die übrigen gedeckt. Sie zeigen, wie viele Beiträge es sind und wo
   man gerade ist.

   Für Vorlesesoftware sind sie ausgeblendet (aria-hidden im Markup):
   Der Inhalt ist über Wischen und Tabulator ohnehin erreichbar, und
   eine Seitenanzeige vorgelesen zu bekommen hilft dort niemandem.
   ------------------------------------------------------------------ */
.news__punkte {
  display: flex; justify-content: center; align-items: center;
  gap: .35rem;
  margin-top: .55rem;
}

/* Der Knopf ist 20 px gross, der sichtbare Punkt nur 7 px. So bleibt
   die Fläche zum Antippen brauchbar, ohne dass die Anzeige dem Inhalt
   Höhe wegnimmt. */
.news__punkt {
  flex: 0 0 auto;
  position: relative;
  width: 20px; height: 20px; padding: 0;
  border: 0; background: none; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.news__punkt::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: rgba(30, 28, 26, .25);
  transition: background .45s var(--ease), transform .45s var(--ease);
}
.news__punkt[data-aktiv]::before {
  background: var(--gold);
  transform: scale(1.3);
}

/* Die Seitenanzeige gehört zum Wischen. Im Raster ist alles zu sehen,
   da hätte sie nichts zu sagen.
   Diese Regel muss NACH der Grundregel stehen: Bei gleicher Spezifität
   entscheidet die Reihenfolge, und in der Media Query weiter oben wäre
   sie von „display: flex“ wieder überschrieben worden. */
@media (min-width: 600px) {
  .news__punkte { display: none; }
}

/* --- Ein ganzer Beitrag auf einen Blick --------------------------
   Auf dem Telefon soll ein vollständiger Beitrag – Bild,
   Bildunterschrift, Datum und Punkte – ohne Scrollen in den sichtbaren
   Bereich passen. Sonst sieht man nie einen Beitrag ganz, und das
   Karussell verliert seinen Sinn.

   Dafür richtet sich die Höhe des Bildes nach dem, was an Platz DA
   ist, und die Breite folgt aus dem Seitenverhältnis 9:16 – nicht
   umgekehrt. Die Kachel wird dadurch schmaler als die volle Breite und
   steht mittig; der Einrastbereich bleibt volle Breite, damit links und
   rechts kein Nachbar hereinragt.

   svh statt vh: Auf dem Telefon zählt vh die Adressleiste mit. Genau
   die fehlt dann, und der Beitrag ragt doch wieder unten heraus. Die
   vh-Zeile darüber ist der Rückfallwert für Browser ohne svh.
   ------------------------------------------------------------------ */
@media (max-width: 599.98px) {
  .news {
    /* Zeilen der Bildunterschrift. Steht hier, weil die Höhenrechnung
       darunter denselben Wert braucht. */
    --news-zeilen: 3;

    /* Die Nav liegt fest über dem Inhalt und nimmt Sichtfläche weg.
       Das Inline-Skript im Snippet misst sie und schreibt den echten
       Wert hierher; dies ist der Rückfallwert ohne JavaScript. */
    --news-nav: 64px;

    /* Damit der Beitrag nicht auf Kante steht. Wird vom Skript
       ausgelesen und in die gemessene Summe eingerechnet. */
    --news-luft: 12px;

    /* RÜCKFALLWERT. Im Regelfall misst das Inline-Skript im Snippet
       nach, was neben dem Bild wirklich an Höhe draufgeht, und
       überschreibt --news-beiwerk mit dem gemessenen Betrag. Diese
       Summe hier greift nur ohne JavaScript.

       Sie von Hand zu pflegen wäre sonst eine Falle: Wer eine
       Schriftgrösse oder einen Abstand im News-Block ändert und die
       Zeile nicht mitzieht, bekommt keinen Fehler – der Beitrag ragt
       nur wieder aus dem Bild. Das Messen erledigt das von selbst und
       fängt auch eine vergrösserte Systemschrift ab: Dann wächst das
       Beiwerk, das Bild schrumpft entsprechend, und der Beitrag passt
       weiterhin. */
    --news-beiwerk: calc(
        1.2rem                              /* Abstand unter dem Bild */
      + var(--news-zeilen) * 1.55rem        /* Bildunterschrift        */
      + .7rem + 1.36rem                     /* Datum samt Abstand      */
      + .55rem + 20px                       /* Punkte samt Abstand     */
      + 24px                                /* Polster der Reihe       */
      + var(--news-luft)
    );

    --news-frei: calc(100vh - var(--news-nav));
    --news-frei: calc(100svh - var(--news-nav));

    /* Untergrenze, damit auf sehr flachen Fenstern nichts zusammen-
       fällt. Dann passt der Beitrag nicht mehr ganz – aber er bleibt
       lesbar, statt zu einem Streifen zu werden. */
    --news-bildhoehe: max(200px, calc(var(--news-frei) - var(--news-beiwerk)));
    --news-breite: calc(var(--news-bildhoehe) * 9 / 16);
  }

  /* Bild und Text auf dieselbe Breite, mittig. Der Einrastbereich
     (.news__item) bleibt unangetastet bei voller Breite. */
  .news__media,
  .news__text,
  .news__date {
    width: min(100%, var(--news-breite));
    margin-inline: auto;
  }

  /* Höchstens drei Zeilen, danach ein Auslassungszeichen. Das deckelt
     die Gesamthöhe – ohne diesen Deckel ginge die Rechnung oben nur
     zufällig auf.

     Bewusst KEIN min-height: Bei einer einzeiligen Bildunterschrift
     stünde sonst ein Loch zwischen ihr und dem Datum. Gleich hoch sind
     die Kacheln trotzdem – als Kinder eines Flex-Bereichs ziehen sie
     auf die Höhe der höchsten, und die Punkte darunter sitzen deshalb
     bei jedem Beitrag an derselben Stelle. Der Freiraum landet nur
     UNTER dem Datum statt darüber. */
  .news__text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--news-zeilen);
            line-clamp: var(--news-zeilen);
    overflow: hidden;
  }
}
/* Handle-Zeile über den Kacheln */
.news__handle {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: .55rem;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  font-size: .9rem; letter-spacing: .04em;
}
.news__handle-icon { display: inline-flex; color: var(--petrol); }
.news__handle-name { font-weight: 500; color: var(--anthracite); }
.news__handle-link {
  color: var(--petrol); text-decoration: none;
  border-bottom: 1px solid rgba(44,82,73,.35);
  padding-bottom: 1px; transition: border-color .4s var(--ease), color .4s var(--ease);
}
.news__handle-link:hover { color: var(--anthracite); border-color: var(--gold); }
.news__date time { color: inherit; }

/* --- Darstellung „einpassen“ ---------------------------------------
   Die feste Darstellung der News-Kacheln. Das Bild bleibt vollständig
   sichtbar; was am 9:16-Format fehlt, füllt eine unscharfe,
   serverseitig erzeugte Mini-Fassung desselben Bildes – dasselbe
   Verfahren wie beim Hero-Video (.hero__video--blur).

   Umschaltbar bleibt es trotzdem, siehe jmthecutNewsDarstellung().
   Ohne die Klasse fällt die Kachel auf den harten Zuschnitt zurück.
   ------------------------------------------------------------------- */

/* Eigener Stapelkontext. Sonst müssten Füllung, Bild, Goldlinie und
   Abspielsymbol ihre Reihenfolge mit dem Rest der Seite aushandeln. */
.news__media--einpassen { z-index: 0; }

.news__media--einpassen img.news__fill {
  position: absolute; z-index: 1;
  object-fit: cover;
}

/* --- a) Gespiegelte Streifen (Regelfall) ---------------------------
   Bei jedem Bild, das breiter als 9:16 ist – also 4:5, 1:1, Querformat –
   bleiben oben und unten Streifen frei. Sie bekommen je eine senkrecht
   gespiegelte Fassung des Bildes.

   Der Kniff steckt im Zusammenspiel von object-position und scaleY(-1):
   Der obere Streifen zeigt den oberen Teil des Bildes und wird dann
   gespiegelt – dadurch landet die ERSTE Bildzeile genau an seiner
   Unterkante, also an der Naht. Dort trifft sie auf dieselbe Zeile im
   scharfen Bild. Ein Helligkeitssprung ist damit ausgeschlossen, statt
   nur abgemildert. Unten dasselbe spiegelbildlich.

   --news-band setzt das Snippet je Kachel: Es kennt das Seitenverhältnis
   des Bildes und rechnet daraus die Höhe der Streifen aus. */
.news__media--gespiegelt img.news__fill--oben,
.news__media--gespiegelt img.news__fill--unten {
  left: 0; width: 100%; height: var(--news-band, 0%);
  transform: scaleY(-1);
}
.news__media--gespiegelt img.news__fill--oben  { top: 0;    object-position: top; }
.news__media--gespiegelt img.news__fill--unten { bottom: 0; object-position: bottom; }

/* --- b) Flächige Füllung (Rückfallweg) -----------------------------
   Nur wenn das Bild mindestens so hoch wie 9:16 ist. Dann fehlt nichts
   oben und unten, sondern links und rechts, und eine einzelne Fassung
   deckt die ganze Kachel ab. Etwas größer skaliert, weil die Ränder
   einer geblurten Fassung ausgefranst sind. */
.news__media--einpassen img.news__fill--flaeche {
  inset: 0; width: 100%; height: 100%;
  transform: scale(1.12);
}

/* Schleier über der Füllung, nicht über dem Bild: Er liegt auf
   z-index 1 wie die Füllung selbst, wird aber als letztes Kind später
   gezeichnet – und bleibt unter dem scharfen Bild auf z-index 2.
   Ohne ihn konkurriert die Füllung mit dem Motiv, statt es zu tragen. */
.news__media--einpassen::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: rgba(30, 28, 26, .3);
}

/* Bei den gespiegelten Streifen wäre ein gleichmäßiger Schleier
   kontraproduktiv: Er verdunkelt nur die Füllung und reißt damit an der
   Naht genau den Sprung wieder auf, den die Spiegelung schließt.
   Deshalb eine Vignette, die an der Naht (--news-band) exakt auf null
   läuft und erst zur Kachelkante hin zunimmt. */
.news__media--gespiegelt::after {
  background: linear-gradient(to bottom,
    rgba(30, 28, 26, .42) 0,
    rgba(30, 28, 26, 0) var(--news-band, 0%),
    rgba(30, 28, 26, 0) calc(100% - var(--news-band, 0%)),
    rgba(30, 28, 26, .42) 100%);
}

/* height: 100% muss hier ausdrücklich stehen. Weiter oben gilt
   img[width][height] { height: auto } – das ist spezifischer als
   .news__media img und würde das eingepasste Bild in seiner eigenen
   Höhe stehen lassen, statt es in die Kachel zu legen. */
.news__media--einpassen img.news__img {
  position: relative; z-index: 2;
  width: 100%; height: 100%;
  object-fit: contain;
}

/* Goldlinie und Abspielsymbol gehören über beide Bildebenen. */
.news__media--einpassen::before,
.news__media--einpassen .news__play { z-index: 3; }

@media (hover: hover) {
  /* Kein Zoom auf dem scharfen Bild. Die allgemeine Hover-Regel
     vergrößert jedes Bild in .news__media um 5 % – beim Einpassen hieße
     das, ein bewusst vollständig gezeigtes Bild beim Überfahren doch
     anzuschneiden. Die Kachel hebt sich weiterhin, die Goldlinie läuft
     weiterhin. */
  .news__item:hover .news__media--einpassen img.news__img { transform: none; }

  /* Streifen bleiben gespiegelt – die allgemeine Regel würde die
     Spiegelung überschreiben und die Naht aufreißen. */
  .news__item:hover .news__media--gespiegelt img.news__fill--oben,
  .news__item:hover .news__media--gespiegelt img.news__fill--unten { transform: scaleY(-1); }

  /* Die flächige Füllung darf mitgehen, muss aber übergroß bleiben. */
  .news__item:hover .news__media--einpassen img.news__fill--flaeche { transform: scale(1.16); }
}

@media (prefers-reduced-motion: reduce) {
  /* Kein weiches Scrollen in der Kachelreihe – auch nicht, wenn der
     Tabulator eine Kachel von selbst ins Bild holt. Dort soll es
     springen statt zu gleiten. */
  .news { scroll-behavior: auto; }
}