/* Mira Hairstyle Startseite. Ausgelagert am 15.09.2026, vorher inline in index.html. */
/* Selbst gehostete Schriften statt Google Fonts (DSGVO-konform, eine
   Fremdverbindung weniger). Variable Fonts im latin-Subset, deckt Deutsch
   inklusive Umlauten und ss ab. font-display: swap gegen unsichtbaren Text. */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/inter-tight-latin.woff2?v=1') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/playfair-latin.woff2?v=1') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/playfair-italic-latin.woff2?v=1') format('woff2');
}
/* Metrik-angepasste Ersatzschriften: gleiche Laufweite und Zeilenhoehe wie die
   Webfonts, damit beim Nachladen nichts springt (CLS, Audit 25.09.2026). */
@font-face{font-family:'Inter Tight Fallback';font-style:normal;src:local('Arial'),local('ArialMT'),local('Helvetica Neue'),local('Helvetica');size-adjust:95.72%;ascent-override:101.21%;descent-override:25.20%;line-gap-override:0%}
@font-face{font-family:'Playfair Fallback';font-style:normal;src:local('Georgia'),local('Times New Roman');size-adjust:101.61%;ascent-override:106.48%;descent-override:24.70%;line-gap-override:0%}
@font-face{font-family:'Playfair Fallback';font-style:italic;src:local('Georgia Italic'),local('Georgia-Italic'),local('Times New Roman Italic');size-adjust:94.20%;ascent-override:114.86%;descent-override:26.65%;line-gap-override:0%}
/* ============================================================
   superpower.com replica — global shell
   Measured from the live site: fully rem-based with a fluid root.
   ============================================================ */

/* Fluid root font size — copied verbatim from the live site's stylesheet.
   Resolves to 14.9916px @1440 and 14.4874px @1200; 16px below 968px.
   Every other value on the page is expressed in rem against this. */
html { font-size: 1rem; }
@media screen and (max-width: 1920px) { html { font-size: calc(0.747899rem + 0.210084vw); } }
@media screen and (max-width: 968px) { html { font-size: 1rem; } }

:root {
  /* Warm-Retheme: Salon statt Health-Tech. Die Toene folgen den echten
     Salonfotos (Creme-Waende, goldene Bogenspiegel): warme Stone-Neutrale
     plus Gold als einziger Akzent. Token-Namen bleiben, damit kein
     Selektor angefasst werden muss (--coral traegt jetzt Gold). */
  --black:       #171412;
  --ink:         #1c1917;
  --ink-2:       #221e1a;
  --zinc:        #78716c;
  --ash:         #a8a29e;
  --mist:        #e7e2db;
  --fog:         #f3efe9;
  --row-alt:     #f8f5f0;
  --white:       #faf9f6;
  --coral:       #a16207;
  --glass-dark:  rgba(23, 20, 18, .5);
  --glass-light: rgba(255, 255, 255, .1);

  /* Inter Tight bleibt Arbeitsschrift, Playfair Display uebernimmt die
     Headlines (klassische Beauty-Paarung). Die Mono-Rolle laeuft ebenfalls
     auf Inter Tight: Terminal-Optik passt nicht zu einem Salon, tabellarische
     Ziffern uebernimmt font-variant-numeric an den Preis-Stellen. */
  --font-sans: 'Inter Tight', 'Inter Tight Fallback', Inter, ui-sans-serif, system-ui,
               -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-serif: 'Playfair Display', 'Playfair Fallback', Georgia, 'Times New Roman', serif;
  --font-mono: 'Inter Tight', 'Inter Tight Fallback', Inter, ui-sans-serif, system-ui,
               -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --nav-h: 5.3rem;
  --page-inset: .5rem;

  /* Standard-Easing fuer Bild- und Flaechenbewegungen. Ohne diese Deklaration
     wird jede transition-Kurzschreibweise mit var(--ease-out) ungueltig und die
     Dauer faellt still auf 0s zurueck. */
  --ease-out: cubic-bezier(.22,.61,.24,1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* overflow-x must live on <html>, never on <body>: setting it on body promotes body
   to the scroll container, which pins window.scrollY at ~0 and silently breaks
   window.scrollTo, anchor jumps and any scroll-driven JS. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: -0.015em;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg, video { display: block; max-width: 100%; }
h1, h2, h3, h4, h5, p, figure, ul, ol, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
input { font: inherit; }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; border-radius: .27rem; }

/* All headings are weight 400 — the system's signature. */
h1, h2, h3, h4, h5 { font-weight: 400; }

/* ---------- layout utilities ---------- */
.container-large { width: 100%; max-width: 80rem; margin-inline: auto; }
.page-padding { padding-inline: 2.5rem; }
/* Sektionsrhythmus: 4.25rem statt der 7rem der Vorlage, die Seite
   soll dichter erzaehlen. Mobil noch eine Stufe enger. */
.padding-section-large { padding-block: 4.25rem; }
@media (max-width: 968px) { .padding-section-large { padding-block: 3rem; } }

/* ---------- buttons ---------- */
.btn-light, .btn-glass, .btn-dark, .btn-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border-radius: 999px;
  font-size: .94rem;
  line-height: 1.4;
  letter-spacing: -0.015em;
  white-space: nowrap;
  transition: background-color .18s ease, color .18s ease, opacity .18s ease;
}
.btn-light { background: var(--white); color: var(--ink); padding: .82rem 1.18rem; }
.btn-light:hover { background: #ebebeb; }
.btn-glass {
  background: var(--glass-light); color: var(--white); padding: .82rem 1.18rem;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.btn-glass:hover { background: rgba(255, 255, 255, .18); }
.btn-dark { background: var(--ink-2); color: var(--white); padding: .82rem 1.18rem; }
.btn-dark:hover { background: var(--black); }
.btn-nav { background: var(--black); color: var(--white); padding: .59rem 1.18rem; font-size: .82rem; min-height: 2.75rem; }
.btn-nav:hover { background: #262626; }

/* ---------- shared motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   SECTION: nav-hero   (prefix sp-hero)
   ============================================================ */
/* ---------- NAVBAR ---------- */
/* The live site's navbar sits ABOVE the hero card on the white page canvas —
   dark text on white — it does not overlay the photography. */
.sp-hero__nav{position:sticky;top:0;left:0;right:0;z-index:100;height:5.3rem;background:var(--white);font-family:var(--font-sans);}
.sp-hero__nav-inner{box-sizing:border-box;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:5.3rem;column-gap:1.5rem;}
.sp-hero__nav-links{display:flex;align-items:center;gap:1.55rem;margin:0;padding:0;list-style:none;justify-self:start;}
.sp-hero__nav-link{color:var(--ink);text-decoration:none;font-size:.87rem;line-height:1.4;letter-spacing:-.009em;opacity:.9;white-space:nowrap;transition:opacity .18s ease;}
.sp-hero__nav-link:hover{opacity:.6;}
.sp-hero__wordmark{justify-self:center;color:var(--black);text-decoration:none;font-size:1.3rem;font-weight:700;letter-spacing:-.03em;line-height:1;white-space:nowrap;}
.sp-hero__nav-actions{display:flex;align-items:center;gap:.75rem;justify-self:end;}
.sp-hero__nav-cta{text-decoration:none;white-space:nowrap;}
.sp-hero__grid-btn{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:2.75rem;height:2.75rem;padding:0;border:0;border-radius:999px;background:var(--fog);color:var(--ink);cursor:pointer;}
.sp-hero__grid-btn:hover{background:var(--mist);}
/* Punkte-Button oeffnet das Mobil-Menue, ab 969px stehen die Links in der Leiste. */
@media (min-width:969px){.sp-hero__grid-btn{display:none;}}
.sp-hero__grid-icon{display:block;width:.95rem;height:.95rem;}

/* ---------- HERO CARD ---------- */
.sp-hero{box-sizing:border-box;padding:0 .5rem .5rem;background:var(--white);font-family:var(--font-sans);}
.sp-hero__card{position:relative;height:56rem;border-radius:.75rem;overflow:hidden;background:var(--black);}
.sp-hero__still{position:absolute;inset:0;display:block;width:100%;height:100%;}
.sp-hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
/* Etwas kraeftiger als im Original: dort lag eine dunkle Illustration darunter,
   jetzt laeuft ein Video mit hellen Stellen. Der Verlauf haelt die Schrift in
   jedem Frame lesbar, ohne das Bild rechts zuzudecken. */
.sp-hero__scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.62) 32%,rgba(0,0,0,0) 72%),linear-gradient(0deg,rgba(0,0,0,.66) 0%,rgba(0,0,0,0) 50%);}

.sp-hero__content{position:absolute;left:4.5rem;bottom:4.5rem;width:37rem;max-width:calc(100% - 9rem);color:var(--white);}
.sp-hero__eligible{display:flex;align-items:center;gap:.45rem;margin:0 0 1.5rem;font-size:.87rem;line-height:1.4;letter-spacing:-.009em;font-weight:500;color:var(--white);}
.sp-hero__check{display:block;flex:none;width:1.05rem;height:1.05rem;}
/* Google-G statt Haken (25.09.2026): weisser Kreis, damit die Farben auf dem dunklen Video lesbar bleiben. */
.sp-hero__g{display:inline-flex;flex:none;align-items:center;justify-content:center;width:1.3rem;height:1.3rem;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);}
.sp-hero__g svg{display:block;width:.8rem;height:.8rem;}
.sp-hero__title{margin:0 0 1rem;font-size:3.75rem;line-height:1;letter-spacing:-.02em;font-weight:400;color:var(--white);}
.sp-hero__sub{margin:0 0 2rem;font-size:1.17rem;line-height:1.4;letter-spacing:-.009em;font-weight:400;color:rgba(255,255,255,.86);}
.sp-hero__actions{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 3.5rem;}
.sp-hero__btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;white-space:nowrap;cursor:pointer;}

.sp-hero__notes{display:flex;align-items:flex-start;gap:1.5rem;margin:0;padding:0;list-style:none;}
.sp-hero__note{flex:1 1 0;min-width:0;}
.sp-hero__note + .sp-hero__note{padding-left:1.5rem;border-left:1px solid rgba(255,255,255,.38);}
.sp-hero__note-title{display:block;font-size:1rem;line-height:1.4;letter-spacing:-.015em;font-weight:500;color:var(--white);}
.sp-hero__note-text{display:block;margin-top:.2rem;font-size:.87rem;line-height:1.4;letter-spacing:-.009em;color:rgba(255,255,255,.66);}
/* Live-Öffnungsstatus: farbiges Lämpchen in der Hero-Leiste.
   grün = jetzt offen · gelb = schließt in <30 Min · rot = geschlossen.
   Farbklassen setzt das JS unten (data-status-dot); ohne JS bleibt der
   neutrale Punkt + statische Öffnungszeiten sichtbar. */
.sp-status{display:inline-flex;align-items:center;gap:.5rem;}
/* Puls als Ring mit transform und opacity (Compositor), statt box-shadow in
   jedem Frame neu zu zeichnen (Audit 25.09.2026). */
.sp-status__dot{position:relative;flex:none;width:.62rem;height:.62rem;border-radius:50%;background:var(--ash);--glow:rgba(255,255,255,0);}
.sp-status__dot--open{background:#3fae5a;--glow:rgba(63,174,90,.55);}
.sp-status__dot--soon{background:#e0a412;--glow:rgba(224,164,18,.6);}
.sp-status__dot--open::after,.sp-status__dot--soon::after{content:'';position:absolute;inset:0;border-radius:50%;background:var(--glow);animation:sp-status-ring 2.4s ease-out infinite;will-change:transform,opacity;}
@keyframes sp-status-ring{0%{transform:scale(1);opacity:.9;}70%{transform:scale(2.6);opacity:0;}100%{transform:scale(2.6);opacity:0;}}
.sp-status__dot--closed{background:#e0524d;box-shadow:0 0 0 .18rem rgba(224,82,77,.22);}
@keyframes sp-status-pulse{0%{box-shadow:0 0 0 0 var(--glow);}70%{box-shadow:0 0 0 .5rem rgba(255,255,255,0);}100%{box-shadow:0 0 0 0 rgba(255,255,255,0);}}
@media (prefers-reduced-motion: reduce){.sp-status__dot--open,.sp-status__dot--soon{box-shadow:0 0 0 .16rem var(--glow);}.sp-status__dot--open::after,.sp-status__dot--soon::after{animation:none;opacity:0;}}

/* nav sits on white -> dark focus ring; hero buttons sit on the photo -> white ring */
.sp-hero__nav-link:focus-visible,.sp-hero__wordmark:focus-visible,.sp-hero__nav-cta:focus-visible,.sp-hero__grid-btn:focus-visible{outline:.15rem solid var(--ink);outline-offset:.2rem;}
.sp-hero__btn:focus-visible{outline:.15rem solid var(--white);outline-offset:.2rem;}

/* ---------- MOBIL-MENUE (Drawer) ---------- */
/* Ab 969px nie sichtbar: dort stehen die Links direkt in der Leiste. Der
   Punkte-Button traegt darum @media-Sichtbarkeit weiter unten. */
.sp-nav-drawer{position:fixed;inset:0;z-index:200;display:none;}
.sp-nav-drawer.is-open{display:block;}
.sp-nav-drawer::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.5);opacity:0;transition:opacity .2s ease;}
.sp-nav-drawer.is-open::before{opacity:1;}
.sp-nav-drawer__panel{position:absolute;top:0;right:0;bottom:0;width:min(20rem,82vw);box-sizing:border-box;display:flex;flex-direction:column;gap:1.5rem;padding:5rem 1.75rem 2rem;background:var(--white);transform:translateX(100%);transition:transform .24s var(--ease-out);}
.sp-nav-drawer.is-open .sp-nav-drawer__panel{transform:translateX(0);}
.sp-nav-drawer__list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.25rem;}
.sp-nav-drawer__link{display:block;padding:.7rem 0;font-size:1.35rem;letter-spacing:-.02em;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--mist);}
.sp-nav-drawer__link:hover{color:var(--coral);}
.sp-nav-drawer__actions{margin-top:auto;display:flex;flex-direction:column;gap:.75rem;}
.sp-nav-drawer__cta{width:100%;padding:.9rem 1.18rem;text-align:center;}
.sp-nav-drawer__call{text-align:center;font-size:.94rem;color:var(--zinc);text-decoration:none;}
.sp-nav-drawer__call:hover{color:var(--ink);}
.sp-nav-drawer__link:focus-visible,.sp-nav-drawer__call:focus-visible,.sp-nav-drawer__cta:focus-visible{outline:.15rem solid var(--coral);outline-offset:.2rem;}
@media (min-width:969px){.sp-nav-drawer{display:none!important;}}
@media (prefers-reduced-motion: reduce){.sp-nav-drawer::before,.sp-nav-drawer__panel{transition:none;}}

/* ---------- RESPONSIVE ---------- */
@media (max-width:968px){
  .sp-hero__nav{height:4.2rem;}
  .sp-hero__nav .sp-hero__nav-inner{grid-template-columns:auto 1fr;height:4.2rem;padding-inline:1.25rem;column-gap:1rem;}
  .sp-hero__nav .sp-hero__nav-links{display:none;}
  .sp-hero__nav .sp-hero__wordmark{justify-self:start;font-size:1.25rem;}
  .sp-hero__nav .sp-hero__login{display:none;}
  .sp-hero .sp-hero__scene{transform-box:view-box;transform-origin:0 0;transform:translate(-20.83%,-16.67%);}
  .sp-hero .sp-hero__scrim{background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.1) 16%,rgba(0,0,0,.5) 38%,rgba(0,0,0,.86) 100%);}
  .sp-hero .sp-hero__card{height:44rem;}
  .sp-hero .sp-hero__content{left:1.25rem;right:1.25rem;bottom:2rem;width:auto;max-width:none;}
  .sp-hero .sp-hero__title{font-size:2.6rem;line-height:1.05;}
  .sp-hero .sp-hero__sub{margin-bottom:1.5rem;font-size:1.05rem;}
  .sp-hero .sp-hero__actions{margin-bottom:2rem;}
  .sp-hero .sp-hero__notes{flex-direction:column;gap:.75rem;}
  .sp-hero .sp-hero__note + .sp-hero__note{padding-left:0;padding-top:.75rem;border-left:0;border-top:1px solid rgba(255,255,255,.28);}
}
@media (max-width:560px){
  .sp-hero__nav .sp-hero__nav-inner{padding-inline:1rem;column-gap:.75rem;}
  .sp-hero__nav .sp-hero__nav-actions{gap:.5rem;}
  .sp-hero__nav .sp-hero__wordmark{font-size:1.15rem;}
  .sp-hero .sp-hero__title{font-size:2.35rem;}
  .sp-hero .sp-hero__sub{margin-bottom:1.25rem;}
  .sp-hero .sp-hero__actions{display:grid;grid-template-columns:1fr;margin-bottom:1.75rem;}
  .sp-hero .sp-hero__btn{width:100%;}
  .sp-hero .sp-hero__notes{gap:.6rem;}
}
@media (max-width:360px){
  .sp-hero__nav .sp-hero__nav-inner{padding-inline:.75rem;column-gap:.5rem;}
  .sp-hero__nav .sp-hero__nav-actions{gap:.375rem;}
}


/* ============================================================
   SECTION: intro-howitworks   (prefix sp-hiw)
   ============================================================ */
/* ============ 3. Intro strip ============ */
.sp-hiw__intro {
  background: var(--white);
  padding-block: 3.4rem 2.2rem;
}
.sp-hiw__intro-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4rem;
}
.sp-hiw__intro-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: -0.015em;
  font-weight: 400;
  color: var(--ink);
  text-align: center;
}
/* Stat-Band statt Pseudo-Logos: grosse Mono-Zahl, Label darunter,
   Hairlines trennen. Zahlen tragen die Aussage, nicht Deko-Schrift. */
.sp-hiw__logos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  max-width: 56rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sp-hiw__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding-block: 0.4rem;
  text-align: center;
}
.sp-hiw__logo + .sp-hiw__logo {
  border-left: 1px solid var(--mist);
}
.sp-hiw__stat {
  font-family: var(--font-mono);
  font-size: 1.9rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.sp-hiw__stat-label {
  font-size: 0.85rem;
  line-height: 1.4;
  letter-spacing: -0.009em;
  color: var(--zinc);
}

/* ============ 4. How it works ============ */
.sp-hiw__how {
  background: var(--white);
}
.sp-hiw__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  margin-bottom: 3.2rem;
}
.sp-hiw__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 2.5rem;
  line-height: 1.2;
  letter-spacing: -0.0225em;
  font-weight: 400;
  color: var(--ink);
}
.sp-hiw__sub {
  margin: 0;
  max-width: 34rem;
  font-size: 1.17rem;
  line-height: 1.4;
  letter-spacing: -0.009em;
  color: var(--zinc);
}
/* Verweise auf die eigenen Leistungs-Landingpages. */
.sp-hiw__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  margin-top: 1.2rem;
}
.sp-hiw__more {
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--coral);
  text-decoration: none;
}
.sp-hiw__more:hover { text-decoration: underline; text-underline-offset: 0.15em; }
.sp-hiw__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sp-hiw__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 28rem;
  border-radius: 0.75rem;
  background: var(--white);
}
.sp-hiw__media {
  position: relative;
  /* Exakt das Seitenverhaeltnis der Clips (Seedance-Renderings in 9:16).
     Dadurch fuellt das Video den Rahmen randlos und wird nirgends beschnitten. */
  aspect-ratio: 9 / 16;
  border-radius: 0.75rem;
  overflow: hidden;
  background: var(--ink-2);
}
.sp-hiw__svg {
  display: block;
  width: 100%;
  height: 100%;
}
.sp-hiw__step {
  position: absolute;
  left: 1.2rem;
  bottom: 0.94rem;
  font-family: var(--font-mono);
  font-size: 2.5rem;
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--white);
}
.sp-hiw__body {
  display: flex;
  flex-direction: column;
  gap: 0.34rem;
  padding: 1.07rem 0.13rem 0;
}
.sp-hiw__card-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.17rem;
  line-height: 1.4;
  letter-spacing: -0.009em;
  font-weight: 400;
  color: var(--ink);
}
.sp-hiw__card-text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--zinc);
}
.sp-hiw__shop {
  display: inline-block;
  margin-top: 0.55rem;
  font-size: 0.92rem;
}
.sp-hiw__shop:hover { text-decoration: underline; text-underline-offset: 0.15em; }

/* ============ responsive ============ */
@media (max-width: 968px) {
  .sp-hiw__intro {
    padding-block: 3.5rem 2.5rem;
  }
  .sp-hiw__intro-inner {
    gap: 1.75rem;
  }
  /* 2x2-Raster: Hairline nur zwischen den Spalten einer Zeile */
  .sp-hiw__logos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 1.5rem;
  }
  .sp-hiw__logo + .sp-hiw__logo {
    border-left: 0;
  }
  .sp-hiw__logo:nth-child(even) {
    border-left: 1px solid var(--mist);
  }
  .sp-hiw__stat {
    font-size: 1.6rem;
  }
  .sp-hiw__stat-label {
    font-size: 0.8rem;
  }
  .sp-hiw__head {
    margin-bottom: 2rem;
  }
  .sp-hiw__title {
    font-size: 2rem;
  }
  .sp-hiw__sub {
    font-size: 1.06rem;
  }
  .sp-hiw__grid {
    grid-template-columns: 1fr;
    gap: 1rem;
    max-width: 26rem;
    margin-inline: auto;
  }
  .sp-hiw__card {
    min-height: 0;
  }
  .sp-hiw__step {
    font-size: 2.25rem;
  }
}

/* ============================================================================
   How it works: Videokacheln mit aufsteigender Bildunterschrift   (sp-hiw)
   ----------------------------------------------------------------------------
   Ersetzt .sp-hiw__svg. Bestehende Regeln (.sp-hiw__card, __media, __step,
   __body, __card-title, __card-text) bleiben unangetastet, dieser Block haengt
   sich rein additiv an. Insbesondere wird font-size von .sp-hiw__step NICHT
   ueberschrieben, die Groesse wird nur ueber --sp-hiw-step-size gespiegelt.

   Zustand haengt an genau zwei Zahlen, die per Attributselektor gesetzt und
   ueber den Geschwisterkombinator an alle Ebenen verteilt werden:
     --o  0 = zu, 1 = offen  (Hover, Tastaturfokus oder festgetippt)
     --p  0/1, nur "festgetippt" (Cue wird zum Schliess-Kreuz)
   Weil transition-duration und transition-delay per calc aus --o gerechnet
   werden und der Browser diese Werte laut Spezifikation aus dem After-Change-
   Style liest, ergibt sich ohne zweiten Regelsatz automatisch: langsam und
   gestaffelt hinein, kurz und gleichzeitig hinaus.
   Animiert werden ausschliesslich transform und opacity. visibility wird als
   diskreter Schalter mitgefuehrt (keine Animation, kein Layout), damit der
   backdrop-filter im Ruhezustand gar nicht erst berechnet wird.
   ========================================================================== */

:root{
  /* Geometrie */
  --sp-hiw-step-size:   2.5rem;   /* spiegelt die bestehende .sp-hiw__step */
  --sp-hiw-step-bottom: .94rem;   /* spiegelt deren bottom */
  --sp-hiw-step-box:    1.2;      /* echter Puffer: Zeilenhoehe der Ziffer */
  --sp-hiw-inset:       1.2rem;   /* Satzachse, identisch mit .sp-hiw__step */
  --sp-hiw-bar-pad:     .42rem;   /* optischer Ueberhang der Balken */
  --sp-hiw-glass-h:     38%;      /* Hoehe der Glasscheibe. Beim quadratischen
                                     Rahmen waren 60% richtig, im hohen 9:16-Format
                                     waere das ueber die halbe Kachel. Die Scheibe
                                     muss nur die Bildunterschrift tragen. */

  /* Bewegung */
  --sp-hiw-lift:        .3rem;    /* Grundweg der Satzzeilen */
  --sp-hiw-depth:       .2rem;    /* zusaetzliche Tiefe je Zeilenindex */
  --sp-hiw-settle:      .5rem;    /* Setzweg der Glasscheibe */
  --sp-hiw-zoom:        1.045;    /* langsames Heranfahren des Films */
  --sp-hiw-stagger:     45ms;
  --sp-hiw-in:          420ms;
  --sp-hiw-out:         190ms;
  --sp-hiw-rule-in:     460ms;
  --sp-hiw-video-in:    900ms;    /* bewusst laenger als alles andere: Parallaxe */
  --sp-hiw-video-out:   520ms;
  --sp-hiw-ease:        cubic-bezier(.22,.61,.24,1);
  --sp-hiw-ease-rule:   cubic-bezier(.16,1,.3,1);

  /* Flaechen */
  --sp-hiw-bar:    rgba(9,9,11,.78);      /* traegt den Textkontrast, s. Kommentar */
  --sp-hiw-edge:   rgba(255,255,255,.26); /* Oberkante der Glasscheibe */
  --sp-hiw-frame:  rgba(255,255,255,.14); /* Passepartout */
  --sp-hiw-leader: rgba(255,255,255,.42); /* Punktausleitung */
}

/* Kurzformeln, damit die calc-Zeilen unten lesbar bleiben */
.sp-hiw__media{
  --o: 0; --p: 0;
  isolation: isolate;              /* Safari: haelt Blur innerhalb der Rundung */
}
/* Die Formel muss auf JEDEM Element stehen, nicht nur auf .sp-hiw__media.
   Custom Properties werden dort ausgerechnet, wo sie deklariert sind, und auf
   .sp-hiw__media bleibt --o dauerhaft 0: den Wert 1 bekommen ueber "~" nur die
   Geschwister des Triggers, nicht deren Elternbox. Stuende die Formel allein
   oben, wuerden alle Kinder die Schliess-Dauer erben und das Oeffnen liefe
   ebenfalls in 190ms statt 420ms. Die geplante Zeitspreizung fiele damit aus. */
.sp-hiw__media, .sp-hiw__media *{
  --sp-hiw-dur: calc(var(--sp-hiw-out) + (var(--sp-hiw-in) - var(--sp-hiw-out)) * var(--o));
}

/* ---------- Zustand ----------
   aria-expanded ist die einzige Wahrheit. Das JS setzt nur dieses Attribut,
   dadurch koennen visueller Zustand und ARIA nicht auseinanderlaufen.
   Der Trigger steht deshalb als ERSTES Element im .sp-hiw__media, damit "~"
   alle Folgegeschwister erreicht. Die Stapelung macht z-index, nicht das DOM. */
.sp-hiw__trigger[aria-expanded="true"],
.sp-hiw__trigger[aria-expanded="true"] ~ *{ --o: 1; }
.sp-hiw__trigger[data-pinned="true"]{ --p: 1; }

/* Fallback ohne JS. Sobald das Skript laeuft, setzt es .sp-hiw-js auf <html>
   und diese Regeln sind aus. Sonst wuerde ein haengender :hover den per Escape
   geschlossenen Zustand wieder aufziehen und aria-expanded luegen. */
html:not(.sp-hiw-js) .sp-hiw__trigger:focus-visible,
html:not(.sp-hiw-js) .sp-hiw__trigger:focus-visible ~ *{ --o: 1; }
@media (hover: hover) and (pointer: fine){
  html:not(.sp-hiw-js) .sp-hiw__trigger:hover,
  html:not(.sp-hiw-js) .sp-hiw__trigger:hover ~ *{ --o: 1; }
}

/* ---------- Ebene 0: der Film ---------- */
.sp-hiw__video{
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: inherit;           /* Safari-Clipping-Absicherung */
  pointer-events: none;
  backface-visibility: hidden;
  /* kein will-change: vier dauerhafte Composite-Layer ueber vier laufenden
     Dekodern waeren reiner Speicherdruck ohne Gegenwert. */
  transform: scale(calc(1 + (var(--sp-hiw-zoom) - 1) * var(--o)));
  transform-origin: 50% 42%;
  transition: transform
    calc(var(--sp-hiw-video-out) + (var(--sp-hiw-video-in) - var(--sp-hiw-video-out)) * var(--o))
    var(--sp-hiw-ease);
}

/* ---------- Ebene 1a: Dauer-Scrim, traegt die Ziffer ---------- */
.sp-hiw__scrim{
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top,
              rgba(9,9,11,.72) 0%, rgba(9,9,11,.34) 20%, rgba(9,9,11,0) 46%);
}

/* ---------- Ebene 1b: die Glasscheibe ----------
   Bewusst KEIN mask-image ueber dem backdrop-filter: die Kombination rechnet in
   WebKit den Blur ueber die volle Elementflaeche, bevor maskiert wird, und ist
   dort historisch fehlerhaft. Stattdessen eine harte Oberkante als 1px-Haarlinie
   plus Schatten nach oben. Dadurch liegt die Scheibe raeumlich VOR dem Film
   statt darin, und das obere Bilddrittel bleibt vollkommen scharf.
   Sie faehrt nicht als Panel hoch, sie setzt sich nur um .5rem: die Geste
   gehoert dem Satz, nicht der Flaeche. */
.sp-hiw__glass{
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--sp-hiw-glass-h);
  z-index: 1; pointer-events: none;
  visibility: hidden;                        /* Ruhezustand: kein Blur berechnet */
  opacity: var(--o);
  background: linear-gradient(to top, rgba(9,9,11,.34), rgba(9,9,11,.06));
  border-top: 1px solid var(--sp-hiw-edge);
  box-shadow: 0 -1.25rem 2.5rem rgba(9,9,11,.32);
  transform: translate3d(0, calc((1 - var(--o)) * var(--sp-hiw-settle)), 0);
  transition:
    opacity    var(--sp-hiw-dur) var(--sp-hiw-ease),
    transform  var(--sp-hiw-dur) var(--sp-hiw-ease),
    /* diskret, nicht animiert: beim Oeffnen sofort, beim Schliessen erst danach */
    visibility 0s linear calc((1 - var(--o)) * (var(--sp-hiw-out) + 30ms));
}
.sp-hiw__trigger[aria-expanded="true"] ~ .sp-hiw__glass{ visibility: visible; }
html:not(.sp-hiw-js) .sp-hiw__trigger:is(:hover, :focus-visible) ~ .sp-hiw__glass{ visibility: visible; }

/* Blur nur, wo unterstuetzt. Ohne Unterstuetzung traegt der kraeftigere
   Verlauf aus der Basisregel die Weichzeichnung optisch mit. */
@supports ((backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px))){
  .sp-hiw__glass{
    -webkit-backdrop-filter: blur(7px) saturate(.92);
            backdrop-filter: blur(7px) saturate(.92);
    background: linear-gradient(to top, rgba(9,9,11,.26), rgba(9,9,11,.04));
  }
}

/* ---------- Ebene 2: die Bildunterschrift ----------
   overflow:hidden ist die Maskenkante: die Zeilen werden an der Unterkante
   beschnitten und kommen mechanisch daraus hervor, statt nur zu faden. */
.sp-hiw__info{
  position: absolute; z-index: 2; pointer-events: none;
  left:  calc(var(--sp-hiw-inset) - var(--sp-hiw-bar-pad));
  right: calc(var(--sp-hiw-inset) - var(--sp-hiw-bar-pad));
  /* echter Puffer statt reiner font-size-Arithmetik: die bestehende Ziffer hat
     keine line-height, ihre Box ist also rund 1.2em hoch. */
  bottom: calc(var(--sp-hiw-step-bottom)
             + var(--sp-hiw-step-size) * var(--sp-hiw-step-box)
             + .7rem);
  overflow: hidden;
}

/* Gemeinsame Bewegung aller Satzzeilen.
   --i staffelt nicht nur die Verzoegerung, sondern auch die TIEFE: die untere
   Zeile kommt von weiter hinten und spaeter, der Satz kommt aus dem Bild nach
   vorne statt als Block einzublenden. */
.sp-hiw__kicker,
.sp-hiw__spec{
  opacity: var(--o);
  transform: translate3d(0,
    calc((1 - var(--o)) * (var(--sp-hiw-lift) + var(--i,0) * var(--sp-hiw-depth))), 0);
  transition-property: opacity, transform;
  transition-timing-function: var(--sp-hiw-ease);
  transition-duration: var(--sp-hiw-dur);
  transition-delay: calc(var(--i,0) * var(--sp-hiw-stagger) * var(--o));
}

.sp-hiw__cap{
  --i: 0;
  display: flex; align-items: center; gap: .55rem;
  width: max-content; max-width: 100%;
  margin: 0;
}
/* Die Haarlinie zieht sich auf, sie faded nicht. */
.sp-hiw__rule{
  flex: 0 0 2.2rem; height: 1px;
  margin-left: var(--sp-hiw-bar-pad);        /* sitzt auf der Satzachse */
  background: var(--coral);
  transform: scaleX(var(--o));
  transform-origin: left center;
  transition: transform
    calc(var(--sp-hiw-out) + (var(--sp-hiw-rule-in) - var(--sp-hiw-out)) * var(--o))
    var(--sp-hiw-ease-rule);
}
.sp-hiw__kicker{
  flex: 0 1 auto; min-width: 0;
  font-family: var(--font-mono);
  font-size: .74rem; line-height: 1.5;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--white);
  background: var(--sp-hiw-bar);
  padding: .16rem var(--sp-hiw-bar-pad);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Kennzahlen als schmale Negativsatz-Balken.
   justify-items:start plus unterschiedlich lange Punktausleitungen ergeben eine
   ragged rechte Kante: drei gleich breite Rechtecke wuerden als Untertitel-
   Stapel gelesen, nicht als Bildunterschrift.
   Kontrast: rgba(9,9,11,.78) ergibt selbst ueber einem rein weissen Videoframe
   komponiert rund #3f3f3f, also ueber 10:1 fuer Weiss und ueber 9:1 fuer --mist.
   Die Lesbarkeit haengt damit nicht am Filmmaterial. Korall kommt nie als
   Schrift vor, nur als Linie und als Ring. */
.sp-hiw__specs{
  display: grid; justify-items: start; gap: .14rem;
  margin: .55rem 0 0;
}
.sp-hiw__spec{
  display: flex; align-items: baseline; gap: .5rem;
  max-width: 100%;
  padding: .24rem var(--sp-hiw-bar-pad);
  background: var(--sp-hiw-bar);
}
.sp-hiw__spec:nth-child(1){ --i: 1; --sp-hiw-lead: 2.4rem; }
.sp-hiw__spec:nth-child(2){ --i: 2; --sp-hiw-lead: 1.15rem; }
.sp-hiw__spec:nth-child(3){ --i: 3; --sp-hiw-lead: 2rem; }

.sp-hiw__spec dt{
  display: flex; align-items: baseline; gap: .45rem;
  font-family: var(--font-mono);
  font-size: .74rem; line-height: 1.5;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--mist);
  white-space: nowrap;
}
.sp-hiw__spec dt::after{                     /* Punktausleitung, feste Laenge */
  content: ""; flex: 0 0 var(--sp-hiw-lead, 1.6rem); height: 0;
  border-bottom: 1px dotted var(--sp-hiw-leader);
  transform: translateY(-.22em);
}
.sp-hiw__spec dd{
  margin: 0; flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: .82rem; line-height: 1.5; letter-spacing: -.005em;
  color: var(--white);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Dritte Zeile erst in der einspaltigen Ansicht. Auf dem Desktop ist die Kachel
   nur rund 280px breit, drei Balken kippen die Komposition.
   Redaktionsregel: hier steht nur Zusatz, nie eine tragende Information. */
.sp-hiw__spec--wide{ display: none; }

/* ---------- Ebene 3: Passepartout ----------
   Dauerhaft sichtbar, es ist ein Rahmen und keine Bewegung. Liegt ueber der
   Glasscheibe, damit die Linie scharf bleibt. Nur opacity aendert sich. */
.sp-hiw__frame{
  position: absolute; inset: .55rem; z-index: 3; pointer-events: none;
  border: 1px solid var(--sp-hiw-frame);
  border-radius: .45rem;
  opacity: calc(.55 + var(--o) * .45);
  transition: opacity var(--sp-hiw-dur) var(--sp-hiw-ease);
}

/* ---------- Ebene 3: Folio ----------
   Bleibt der ruhende Angelpunkt und faellt nur auf 75 Prozent zurueck, damit es
   seine Dominanz nicht genau dann verliert, wenn darueber Text steht.
   font-size wird bewusst NICHT angefasst, die bestehenden Regeln bleiben gueltig. */
.sp-hiw__step{
  z-index: 3; pointer-events: none;
  opacity: calc(1 - .25 * var(--o));
  text-shadow: 0 1px 12px rgba(9,9,11,.4);
  transition: opacity var(--sp-hiw-dur) var(--sp-hiw-ease);
}

/* ---------- Ebene 4: Trigger ---------- */
.sp-hiw__trigger{
  position: absolute; inset: 0; z-index: 4;
  display: block; width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0;
  background: none; color: inherit; font: inherit;
  -webkit-appearance: none; appearance: none;
  border-radius: inherit; cursor: pointer;
  touch-action: manipulation;                 /* kein Doppeltap-Zoom, keine 300ms */
  -webkit-tap-highlight-color: transparent;
}

/* Fokusring: liegt NICHT im Medienfeld, sondern aussen auf der weissen Karte.
   Damit kollidiert er nicht mit dem Passepartout (das war der sichtbare Fehler
   im Vergleichsentwurf) und ist unabhaengig vom Videoframe kontrastsicher:
   --ink auf --white ergibt ueber 15:1. Der Fallback fuer Engines ohne :has
   zeichnet nach innen, mit dunkler Unterlage, damit der Korall-Ring auch auf
   einem hellen Frame die 3:1 haelt. */
.sp-hiw__trigger:focus-visible{
  outline: 2px solid var(--coral);
  outline-offset: -3px;
  box-shadow: inset 0 0 0 6px rgba(9,9,11,.6);
}
@supports selector(:has(*)){
  .sp-hiw__trigger:focus-visible{ outline: none; box-shadow: none; }
  .sp-hiw__media:has(.sp-hiw__trigger:focus-visible){
    outline: 2px solid var(--ink);
    outline-offset: 3px;
  }
}
@media (forced-colors: active){
  .sp-hiw__trigger:focus-visible{ outline: 2px solid Highlight; outline-offset: -3px; }
}

.sp-hiw__sr{
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; white-space: nowrap; clip-path: inset(50%);
}

/* ---------- Cue: sitzt auf der Mittelachse des Folios ----------
   Ziffer links, Kreis rechts: die beiden bilden ein Paar und rahmen die Kachel
   unten, statt als beliebiger Knopf in einer Ecke zu sitzen. */
.sp-hiw__cue{
  position: absolute; right: 1.05rem;
  bottom: calc(var(--sp-hiw-step-bottom)
             + var(--sp-hiw-step-size) * var(--sp-hiw-step-box) / 2
             - 1.05rem);
  width: 2.1rem; height: 2.1rem; border-radius: 999px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.32);
  background: rgba(9,9,11,.28);
  color: rgba(255,255,255,.92);
}
.sp-hiw__cue::after{                           /* Korall-Ring, nur im Offen-Zustand */
  content: ""; position: absolute; inset: -1px; border-radius: 999px;
  border: 1px solid var(--coral);
  opacity: var(--o);
  transition: opacity var(--sp-hiw-dur) var(--sp-hiw-ease);
}
.sp-hiw__cue-mark{
  position: relative; display: block; width: .66rem; height: .66rem;
  /* Das Plus wird nur beim Festtippen zum Kreuz, blosser Hover laesst es stehen:
     der Unterschied zwischen Vorschau und gepinntem Zustand wird sichtbar. */
  transform: rotate(calc(var(--p) * 45deg));
  transition: transform 420ms var(--sp-hiw-ease-rule);
}
.sp-hiw__cue-mark::before,
.sp-hiw__cue-mark::after{
  content: ""; position: absolute; inset: 0; margin: auto; background: currentColor;
}
.sp-hiw__cue-mark::before{ width: 100%; height: 1px; }
.sp-hiw__cue-mark::after { width: 1px;  height: 100%; }

/* ---------- Reduzierte Bewegung ----------
   Kein !important und kein Verlass auf eine globale Regel: es werden nur die
   Wege und Staffelungen auf null gesetzt, dieselben calc-Formeln liefern dann
   von selbst eine reine Einblendung ohne jede Verschiebung. */
@media (prefers-reduced-motion: reduce){
  .sp-hiw__media{
    --sp-hiw-lift: 0rem; --sp-hiw-depth: 0rem; --sp-hiw-settle: 0rem;
    --sp-hiw-zoom: 1; --sp-hiw-stagger: 0ms;
    --sp-hiw-in: 140ms; --sp-hiw-out: 100ms; --sp-hiw-rule-in: 140ms;
    --sp-hiw-video-in: 0ms; --sp-hiw-video-out: 0ms;
  }
  .sp-hiw__rule{ transform: none; opacity: var(--o); }  /* blendet auf, zeichnet nicht */
  .sp-hiw__cue-mark{ transition-duration: 1ms; }
}

/* ---------- einspaltig ---------- */
@media (max-width: 968px){
  .sp-hiw__media{
    --sp-hiw-step-size: 2.25rem;   /* spiegelt die bestehende 968px-Regel */
    --sp-hiw-bar-pad: .5rem;
    --sp-hiw-glass-h: 34%;
  }
  .sp-hiw__spec--wide{ display: flex; }
  .sp-hiw__kicker { font-size: .8rem; }
  .sp-hiw__spec   { padding: .3rem var(--sp-hiw-bar-pad); }
  .sp-hiw__spec dt{ font-size: .8rem; }
  .sp-hiw__spec dd{ font-size: .9rem; }
  .sp-hiw__specs  { margin-top: .65rem; }
  .sp-hiw__cue{
    width: 2.4rem; height: 2.4rem; right: 1.1rem;
    bottom: calc(var(--sp-hiw-step-bottom)
               + var(--sp-hiw-step-size) * var(--sp-hiw-step-box) / 2
               - 1.2rem);
  }
}


/* ============================================================
   SECTION: pinned-features   (prefix sp-pin)
   ============================================================ */
.sp-pin{position:relative;height:400vh;background:var(--black);color:var(--white)}
.sp-pin__stage{position:sticky;top:0;height:100vh;overflow:hidden;isolation:isolate}
.sp-pin__slide{position:absolute;inset:0;overflow:hidden;opacity:0;z-index:1;transition:opacity .7s ease}
.sp-pin__slide.is-active{opacity:1;z-index:2}
.sp-pin__art{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
/* Kein Vollflaechen-Dunkel mehr: nur ein schmaler Schleier hinter der
   Textspalte links, ab der Bildmitte bleibt das Foto komplett frei.
   Der Textschatten sichert die Lesbarkeit auf hellen Stellen. */
.sp-pin__scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(23,20,18,.58) 0%,rgba(23,20,18,.3) 32%,rgba(23,20,18,0) 55%)}
.sp-pin__title,.sp-pin__text{text-shadow:0 1px 16px rgba(0,0,0,.4)}
.sp-pin__row{position:absolute;inset:0;margin-left:auto;margin-right:auto;display:flex;align-items:center;box-sizing:border-box}
.sp-pin__copy{width:32rem;max-width:100%}
.sp-pin__title{margin:0;font-family:var(--font-sans,"NB International Pro","Inter Tight",Inter,Arial,sans-serif);font-weight:400;font-size:2.5rem;line-height:1.2;letter-spacing:-.0225em;color:var(--white)}
.sp-pin__text{margin:1.25rem 0 0;font-size:1.17rem;line-height:1.4;letter-spacing:-.009em;color:rgba(255,255,255,.72);max-width:28rem}
.sp-pin__nav{position:absolute;inset:0;margin-left:auto;margin-right:auto;z-index:3;display:flex;align-items:center;justify-content:flex-end;pointer-events:none;box-sizing:border-box}
.sp-pin__nav-list{width:13.5rem;margin:0;padding:0;list-style:none;pointer-events:auto;border-top:1px solid var(--glass-light)}
.sp-pin__nav-item{display:flex;width:100%;align-items:baseline;justify-content:space-between;gap:.75rem;box-sizing:border-box;margin:0;padding:.9rem 0;background:none;border:0;border-bottom:1px solid var(--glass-light);color:var(--white);opacity:.45;text-align:left;cursor:pointer;font-family:var(--font-sans,"NB International Pro","Inter Tight",Inter,Arial,sans-serif);font-weight:400;font-size:1rem;line-height:1.4;letter-spacing:-.015em;transition:opacity .4s ease}
.sp-pin__nav-item.is-active{opacity:1}
.sp-pin__nav-item:hover:not(.is-active){opacity:.75}
.sp-pin__nav-item:focus-visible{outline:.125rem solid var(--coral);outline-offset:.25rem;opacity:1}
.sp-pin__nav-num{font-family:var(--font-mono,"NB International Mono Pro","JetBrains Mono",ui-monospace,monospace);font-size:.73rem;line-height:1.5;letter-spacing:-.005em}
@media (prefers-reduced-motion: reduce){
.sp-pin__slide,.sp-pin__nav-item{transition:none}
}
@media (max-width:968px){
.sp-pin{height:auto}
.sp-pin__stage{position:static;height:auto;overflow:visible}
.sp-pin__slide{position:relative;inset:auto;opacity:1;z-index:auto}
.sp-pin__slide.is-active{z-index:auto}
.sp-pin__row{position:relative;inset:auto;padding-top:4.5rem;padding-bottom:4.5rem;min-height:24rem}
.sp-pin__copy{width:100%}
.sp-pin__title{font-size:2rem}
.sp-pin__text{max-width:none;font-size:1.0625rem}
.sp-pin__nav{position:relative;inset:auto;z-index:auto;justify-content:flex-start;padding-top:3rem;padding-bottom:1rem}
.sp-pin__nav-list{width:100%}
}


/* ============================================================
   SECTION: membership-table   (prefix sp-inc)
   ============================================================ */
.sp-inc {
  background: var(--white);
  color: var(--ink);
}

.sp-inc__inner {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 3rem;
}

.sp-inc__intro {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 30rem;
  padding-top: 0.27rem;
}

.sp-inc__eyebrow {
  margin: 0 0 0.8rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: -0.015em;
  font-weight: 400;
  color: var(--zinc);
}

.sp-inc__title {
  margin: 0 0 2.13rem;
  font-family: var(--font-sans);
  font-size: 2.5rem;
  line-height: 1.2;
  letter-spacing: -0.0225em;
  font-weight: 400;
  color: var(--ink);
  overflow-wrap: break-word;
}

.sp-inc__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  white-space: nowrap;
}

.sp-inc__cta:hover {
  background: var(--black);
}

.sp-inc__cta:focus-visible {
  outline: 0.13rem solid var(--coral);
  outline-offset: 0.2rem;
}

/* Rechte Spalte: mehrere Preisgruppen (Damen, Herren, Kinder & Beauty).
   Jede Gruppe ist eine eigene Liste, damit die Zebra-Streifen pro Gruppe
   sauber neu beginnen und Zwischenueberschriften sie nicht verschieben. */
.sp-inc__tables {
  flex: 0 1 auto;
  width: 40rem;
  max-width: 100%;
}

/* Kategorie-Tabs: gleiche Optik wie im Terminanfrage-Funnel, damit sich die
   beiden Sektionen gleich anfuehlen. Ohne JS bleiben alle Listen sichtbar. */
.sp-inc__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.9rem;
}

.sp-inc__tab {
  padding: 0.42rem 0.95rem;
  border: 1px solid var(--mist);
  border-radius: 999px;
  background: var(--white);
  font-size: 0.85rem;
  letter-spacing: -0.009em;
  color: var(--zinc);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.sp-inc__tab:hover { border-color: var(--ash); }

.sp-inc__tab.is-on {
  background: var(--ink-2);
  border-color: var(--ink-2);
  color: var(--white);
}

.sp-inc__tab:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
}

/* Fallback ohne JS: alle drei Listen stehen untereinander, mit Abstand. */
.sp-inc__list + .sp-inc__list {
  margin-top: 2.1rem;
}

.sp-inc__list[hidden] { display: none; }

.sp-inc__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sp-inc__row {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.8rem;
  min-height: 2.67rem;
  padding: 0.33rem 0.8rem;
}

.sp-inc__row:nth-child(odd) {
  background: var(--row-alt);
}

.sp-inc__label {
  font-family: var(--font-sans);
  font-size: 0.87rem;
  line-height: 1.4;
  letter-spacing: -0.009em;
  font-weight: 400;
  color: var(--ink);
  overflow-wrap: break-word;
}

.sp-inc__desc {
  font-family: var(--font-sans);
  font-size: 0.87rem;
  line-height: 1.4;
  letter-spacing: -0.009em;
  font-weight: 400;
  color: var(--zinc);
  overflow-wrap: break-word;
}

/* Preis rechtsbuendig in der Mono-Schrift, tabellarische Ziffern
   halten die Euro-Betraege ueber alle Zeilen buendig. */
.sp-inc__price {
  justify-self: end;
  font-family: var(--font-mono);
  font-size: 0.87rem;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sp-inc__note {
  margin: 1.9rem 0 0;
  padding-inline: 0.8rem;
  font-size: 0.8rem;
  line-height: 1.5;
  letter-spacing: -0.009em;
  color: var(--zinc);
}

.sp-inc__note a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.sp-inc__note a:focus-visible {
  outline: 0.13rem solid var(--coral);
  outline-offset: 0.15rem;
  border-radius: 0.2rem;
}

@media (max-width: 968px) {
  .sp-inc__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 2.5rem;
  }

  .sp-inc__intro {
    max-width: none;
    padding-top: 0;
  }

  .sp-inc__title {
    font-size: 1.9rem;
    margin-bottom: 1.75rem;
  }

  .sp-inc__tables {
    width: 100%;
  }

  /* Einspaltig: Preis bleibt oben rechts neben dem Namen,
     die Beschreibung rutscht als volle Zeile darunter. */
  .sp-inc__row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    row-gap: 0.15rem;
    min-height: 0;
    padding: 0.6rem 0.75rem;
  }

  .sp-inc__desc {
    grid-column: 1 / -1;
  }

  /* Explizit in Zeile 1 neben den Namen setzen: in der DOM-Reihenfolge steht
     die Beschreibung dazwischen, die Auto-Platzierung wuerde den Preis sonst
     in eine eigene dritte Zeile schieben. */
  .sp-inc__price {
    grid-column: 2;
    grid-row: 1;
  }

  .sp-inc__label,
  .sp-inc__desc,
  .sp-inc__price {
    font-size: 0.94rem;
  }
}

@media (max-width: 480px) {
  .sp-inc__title {
    font-size: 1.6rem;
  }
}


/* ============================================================
   SECTION: doctors   (prefix sp-doc)
   ============================================================ */
.sp-doc {
  background-color: var(--white);
  color: var(--ink);
}

.sp-doc__head {
  max-width: 46rem;
  margin-bottom: 4rem;
}

.sp-doc__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 3rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.0225em;
  color: var(--ink);
}

.sp-doc__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 1.5rem;
  row-gap: 3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sp-doc__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sp-doc__portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
  margin-bottom: 1.15rem;
  border-radius: 0.75rem;
  overflow: hidden;
  background-color: var(--fog);
}

.sp-doc__avatar {
  display: block;
  width: 100%;
  height: 100%;
}

.sp-doc__name {
  margin: 0 0 0.2rem;
  font-family: var(--font-sans);
  font-size: 1.17rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.009em;
  color: var(--ink);
}

.sp-doc__role {
  margin: 0 0 0.9rem;
  font-size: 0.87rem;
  line-height: 1.4;
  letter-spacing: -0.009em;
  color: var(--zinc);
}

.sp-doc__bio {
  margin: 0 0 1.4rem;
  font-size: 0.87rem;
  line-height: 1.4;
  letter-spacing: -0.009em;
  color: var(--ink);
}

.sp-doc__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
  margin-top: auto;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--mist);
  font-size: 0.87rem;
  line-height: 1.4;
  letter-spacing: -0.009em;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.sp-doc__link:hover {
  border-bottom-color: var(--ink);
}

.sp-doc__link:focus-visible {
  outline: 0.125rem solid var(--ink);
  outline-offset: 0.3rem;
  border-radius: 0.15rem;
}

.sp-doc__chev {
  display: block;
  width: 0.55rem;
  height: 0.55rem;
  flex: none;
  transition: transform 0.2s ease;
}

.sp-doc__link:hover .sp-doc__chev {
  transform: translateX(0.18rem);
}

.sp-doc__board {
  display: grid;
  grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
  column-gap: 1.5rem;
  row-gap: 1.25rem;
  margin-top: 5rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--mist);
}

.sp-doc__board-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.sp-doc__board-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 1.5rem;
  row-gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sp-doc__board-item {
  font-size: 0.87rem;
  line-height: 1.4;
  letter-spacing: -0.009em;
  color: var(--zinc);
}

@media (max-width: 968px) {
  .sp-doc__head {
    max-width: none;
    margin-bottom: 2.75rem;
  }

  .sp-doc__title {
    font-size: 2.25rem;
  }

  .sp-doc__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.25rem;
    row-gap: 2.5rem;
  }

  .sp-doc__board {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 3.5rem;
  }

  .sp-doc__board-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .sp-doc__title {
    font-size: 1.9rem;
  }

  .sp-doc__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2.25rem;
  }

  .sp-doc__board-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sp-doc__link,
  .sp-doc__chev {
    transition: none;
  }

  .sp-doc__link:hover .sp-doc__chev {
    transform: none;
  }
}

/* ---------- Instagram-Galerie (ersetzt die Portraetkarten) ---------- */
.sp-doc__lead {
  margin: 1rem 0 0;
  max-width: 34rem;
  font-size: 1.17rem;
  line-height: 1.4;
  letter-spacing: -0.009em;
  color: var(--zinc);
}

.sp-ig__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sp-ig__item { min-width: 0; }

/* Quadratische Kacheln wie im Instagram-Raster. Die Originale sind hochkant,
   object-fit:cover beschneidet sie mittig. */
.sp-ig__card {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 0.75rem;
  overflow: hidden;
  background: var(--fog);
  isolation: isolate;
}

.sp-ig__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 0.62s var(--ease-out);
}

.sp-ig__card:hover .sp-ig__img,
.sp-ig__card:focus-visible .sp-ig__img {
  transform: scale(1.06);
}

/* Schleier und Glyphe liegen ueber dem Bild und kommen erst bei Kontakt. */
.sp-ig__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(9, 9, 11, 0.55), rgba(9, 9, 11, 0.08) 55%, rgba(9, 9, 11, 0));
  opacity: 0;
  transition: opacity 0.32s var(--ease-out);
}

.sp-ig__badge {
  position: absolute;
  left: 0.9rem;
  bottom: 0.9rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: var(--white);
  opacity: 0;
  transform: translateY(0.4rem);
  transition: opacity 0.32s var(--ease-out), transform 0.32s var(--ease-out);
}

.sp-ig__badge svg { width: 0.95rem; height: 0.95rem; display: block; }

.sp-ig__card:hover .sp-ig__veil,
.sp-ig__card:focus-visible .sp-ig__veil,
.sp-ig__card:hover .sp-ig__badge,
.sp-ig__card:focus-visible .sp-ig__badge { opacity: 1; }

.sp-ig__card:hover .sp-ig__badge,
.sp-ig__card:focus-visible .sp-ig__badge { transform: translateY(0); }

.sp-ig__card:focus-visible {
  outline: 0.125rem solid var(--ink);
  outline-offset: 0.2rem;
}

.sp-ig__sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; white-space: nowrap; clip-path: inset(50%);
}

.sp-ig__more {
  display: flex;
  justify-content: center;
  margin: 2.6rem 0 0;
}

.sp-ig__follow { text-decoration: none; }
.sp-ig__follow svg { width: 1rem; height: 1rem; display: block; }

@media (prefers-reduced-motion: reduce) {
  .sp-ig__img,
  .sp-ig__veil,
  .sp-ig__badge { transition: none; }
  .sp-ig__card:hover .sp-ig__img,
  .sp-ig__card:focus-visible .sp-ig__img { transform: none; }
}

@media (max-width: 968px) {
  .sp-ig__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sp-doc__lead { font-size: 1.06rem; }
}

@media (max-width: 560px) {
  .sp-ig__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; }
}

/* ---------- Marquee entlang SVG-Pfad (Praefix sp-mar) ----------
   Portait-Bilder fliessen entlang einer Kurve, per CSS offset-path. Genau die
   Technik der React-Vorlage, nur ohne Framework. Zwei Modi:
   - Ruhezustand / kein JS / schmale Screens: die vorhandenen .sp-ig__grid-Kacheln
     bleiben ein normales Raster (Fallback, siehe unten in der Sektion).
   - .is-live (ab 720px, von JS gesetzt): das Raster wird zur Pfad-Buehne. */
.sp-mar {
  position: relative;
  width: 100%;
  overflow: hidden;
  touch-action: pan-y;
}
/* Logische Buehne: feste Koordinaten des Pfades (1000 x 420), per transform
   auf die Sektionsbreite skaliert. --s wird von JS gesetzt. */
.sp-mar.is-live {
  height: calc(420px * var(--s, 1));
}
.sp-mar__track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sp-mar.is-live .sp-mar__track {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 1000px;
  height: 420px;
  gap: 0;
  transform: scale(var(--s, 1));
  transform-origin: top left;
}
.sp-mar__item {
  position: relative;
  display: block;
  min-width: 0;
  aspect-ratio: 3 / 4;
  border-radius: 0.6rem;
  overflow: hidden;
  background: var(--fog);
}
.sp-mar.is-live .sp-mar__item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 146px;
  aspect-ratio: auto;
  border-radius: 0.4rem;
  /* Kernstueck: das Element reitet auf dem Pfad und dreht sich mit dem Verlauf. */
  offset-path: path("M-120 210C150 100 340 100 500 210C660 320 850 320 1120 210");
  offset-rotate: auto;
  offset-anchor: 50% 50%;
  will-change: offset-distance;
  backface-visibility: hidden;
  transition: transform 0.3s var(--ease-out);
  cursor: grab;
}
.sp-mar.is-live.is-drag .sp-mar__item { cursor: grabbing; transition: none; }
.sp-mar.is-live .sp-mar__item:hover { transform: scale(1.45); z-index: 20; }
.sp-mar__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.sp-mar__item:focus-visible {
  outline: 0.15rem solid var(--coral);
  outline-offset: 0.15rem;
  z-index: 21;
}
/* Klone fuer eine dichtere Kette: nicht fokussierbar, aus dem A11y-Baum. */
.sp-mar__item[data-clone] { pointer-events: none; }

@media (max-width: 968px) {
  .sp-mar__track { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .sp-mar__track { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-mar.is-live .sp-mar__item { transition: none; }
}
/* Mobil: dieselbe Wellenkurve wie am Desktop, nur die Kacheln relativ zur
   Buehne groesser, damit sie trotz kleiner Skalierung gut erkennbar bleiben.
   Buehne etwas hoeher, damit die gedrehten grossen Kacheln nicht anstossen. */
@media (max-width: 719px) {
  /* Handy: kein gebogenes Wellen-Band (dort ueberlappen die Fotos), sondern ein
     wischbares Karussell mit grossen Fotos und klarem Abstand, damit jedes Foto
     voll sichtbar bleibt. is-live wird per JS unter 720px nicht gesetzt, daher
     greifen diese Grund-Regeln (keine .is-live-Selektoren noetig). */
  .sp-mar__track {
    display: flex;
    grid-template-columns: none;
    width: auto;
    height: auto;
    gap: 0.9rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0.25rem 0.25rem 0.85rem;
    scroll-padding-inline: 0.25rem;
  }
  .sp-mar__track::-webkit-scrollbar { display: none; }
  .sp-mar__item {
    flex: 0 0 66%;
    scroll-snap-align: center;
    aspect-ratio: 4 / 5;
    width: auto;
    height: auto;
    border-radius: 0.6rem;
  }
  .sp-mar__item:hover { transform: none; }
  .sp-mar__item[data-clone] { display: none; }
}


/* ============================================================
   SECTION: testimonials   (prefix sp-tst)
   ============================================================ */
.sp-tst {
  background: var(--white);
  color: var(--ink);
}

.sp-tst__rating {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 1.35rem;
  font-size: 0.87rem;
  line-height: 1.4;
  letter-spacing: -0.009em;
  color: var(--ink);
}

.sp-tst__stars {
  display: block;
  width: 5.75rem;
  height: 1rem;
  flex: none;
  fill: var(--coral);
}

.sp-tst__brand {
  font-weight: 700;
  letter-spacing: -0.02em;
}

.sp-tst__rating-sep {
  width: 1px;
  height: 0.9rem;
  background: var(--mist);
  flex: none;
}

.sp-tst__head {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 1.5rem 3rem;
  align-items: end;
}

.sp-tst__title {
  margin: 0;
  font-size: 3rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.0225em;
  color: var(--ink);
  max-width: 22ch;
}

.sp-tst__lead {
  margin: 0;
  font-size: 1.17rem;
  line-height: 1.4;
  letter-spacing: -0.009em;
  color: var(--zinc);
  max-width: 26rem;
}

.sp-tst__controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  margin: 2.75rem 0 1.25rem;
}

.sp-tst__counter {
  font-family: var(--font-mono);
  font-size: 0.87rem;
  line-height: 1.4;
  letter-spacing: -0.009em;
  color: var(--zinc);
  font-variant-numeric: tabular-nums;
  margin-right: 0.35rem;
}

.sp-tst__nav-btn {
  width: 2.9rem;
  height: 2.9rem;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--mist);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}

.sp-tst__nav-btn:hover:not(:disabled) {
  background: var(--fog);
  border-color: var(--ash);
}

.sp-tst__nav-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.sp-tst__nav-btn svg {
  width: 1.1rem;
  height: 1.1rem;
  display: block;
}

.sp-tst__nav-btn:focus-visible {
  outline: 0.125rem solid var(--coral);
  outline-offset: 0.15rem;
}

.sp-tst__scroller {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-padding-inline-start: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-block: 0.3rem;
  margin-block: -0.3rem;
}

.sp-tst__scroller::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.sp-tst__scroller:focus-visible {
  outline: 0.125rem solid var(--coral);
  outline-offset: 0.15rem;
  border-radius: 0.75rem;
}

.sp-tst__track {
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sp-tst__card {
  flex: 0 0 22rem;
  max-width: 22rem;
  min-height: 17rem;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: 1.6rem 1.4rem 1.35rem;
  border: 1px solid var(--mist);
  border-radius: 0.75rem;
  background: var(--white);
}

.sp-tst__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* Kopfzeile der Karte: Monogramm statt Portraitfoto. */
.sp-tst__who {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.1rem;
}

.sp-tst__avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  background: rgba(252, 95, 43, 0.12);
  color: var(--coral);
  font-family: var(--font-mono);
  font-size: 0.94rem;
  line-height: 1;
}

.sp-tst__name {
  margin: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.sp-tst__srcname {
  color: var(--ink);
}

.sp-tst__quote {
  margin: 0 0 1rem;
  font-size: 1.4rem;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.sp-tst__quote p {
  margin: 0;
}

.sp-tst__outcome {
  margin: auto 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--mist);
  font-size: 0.87rem;
  line-height: 1.4;
  letter-spacing: -0.009em;
  color: var(--zinc);
}

@media (prefers-reduced-motion: reduce) {
  .sp-tst__scroller {
    scroll-behavior: auto;
  }
}

@media (max-width: 968px) {
  .sp-tst__head {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.1rem;
    align-items: start;
  }

  .sp-tst__title {
    font-size: 2.25rem;
    max-width: none;
  }

  .sp-tst__lead {
    font-size: 1.0625rem;
    max-width: none;
  }

  .sp-tst__controls {
    justify-content: flex-start;
    margin: 1.9rem 0 1rem;
  }

  .sp-tst__card {
    flex-basis: min(22rem, 78vw);
    max-width: min(22rem, 78vw);
  }

  .sp-tst__quote {
    font-size: 1.25rem;
  }
}


/* ============================================================
   SECTION: social-proof   (prefix sp-soc)
   ============================================================ */
.sp-soc{background:var(--white);color:var(--ink)}
.sp-soc__inner{display:flex;flex-direction:column;gap:3.2rem}
.sp-soc__head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem}
.sp-soc__title{margin:0;max-width:38rem;font-family:var(--font-sans);font-weight:400;font-size:3rem;line-height:1.2;letter-spacing:-.0225em;color:var(--ink)}
.sp-soc__counter{margin:0 0 .45rem;font-family:var(--font-mono);font-size:.73rem;line-height:1.5;letter-spacing:-.005em;color:var(--zinc);white-space:nowrap;font-variant-numeric:tabular-nums}
.sp-soc__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;margin:0;padding:0;list-style:none}
.sp-soc__item{min-width:0}
.sp-soc__card{position:relative;margin:0;aspect-ratio:234/394;border-radius:.75rem;overflow:hidden;background:var(--ink-2);isolation:isolate}
.sp-soc__card::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);pointer-events:none}
.sp-soc__still{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.sp-soc__play{position:absolute;top:.75rem;right:.75rem;z-index:2;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:var(--glass-light);-webkit-backdrop-filter:blur(.35rem);backdrop-filter:blur(.35rem);color:var(--white);cursor:pointer;transition:background .2s ease}
.sp-soc__play:hover{background:rgba(255,255,255,.22)}
.sp-soc__play:focus-visible{outline:.125rem solid var(--white);outline-offset:.15rem}
.sp-soc__play-icon{width:.7rem;height:.8rem;margin-left:.1rem;fill:currentColor}
.sp-soc__caption{position:absolute;right:0;bottom:0;left:0;z-index:1;box-sizing:border-box;display:flex;flex-direction:column;gap:.55rem;padding:3.5rem .95rem 1.05rem;background:linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(0,0,0,.72) 32%,rgba(0,0,0,.28) 66%,rgba(0,0,0,0) 100%)}
.sp-soc__quote{margin:0;font-family:var(--font-sans);font-weight:400;font-size:.87rem;line-height:1.4;letter-spacing:-.009em;color:var(--white)}
.sp-soc__meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .5rem;margin:0;font-family:var(--font-sans);font-size:.73rem;line-height:1.5;letter-spacing:-.005em}
.sp-soc__handle{color:var(--white);font-weight:700}
.sp-soc__followers{color:rgba(255,255,255,.62)}
@media (max-width:968px){
.sp-soc__inner{gap:2.25rem}
.sp-soc__head{flex-direction:column;align-items:flex-start;gap:.6rem}
.sp-soc__title{width:100%;max-width:100%;font-size:2rem}
.sp-soc__br{display:none}
.sp-soc__counter{margin:0}
.sp-soc__grid{grid-template-columns:minmax(0,1fr);gap:.75rem;max-width:20rem}
.sp-soc__caption{padding:3rem .9rem 1rem}
}


/* ============================================================
   SECTION: pricing   (prefix sp-prc)
   ============================================================ */
.sp-prc{background:var(--white);color:var(--ink)}
.sp-prc__card{max-width:34rem;margin-inline:auto;background:var(--white);border:1px solid var(--mist);border-radius:1rem;padding:2.4rem}
.sp-prc__title{margin:0;font-family:var(--font-sans,"NB International Pro","Inter Tight",Inter,Arial,sans-serif);font-weight:400;font-size:1.88rem;line-height:1.25;letter-spacing:-.02em;color:var(--ink)}
.sp-prc__list{list-style:none;margin:1.87rem 0 0;padding:0;display:grid;gap:.87rem}
.sp-prc__item{display:flex;align-items:flex-start;gap:.8rem}
.sp-prc__check{flex:0 0 auto;width:1.47rem;height:1.47rem;border-radius:.5rem;background:var(--fog);color:var(--coral);display:inline-flex;align-items:center;justify-content:center}
.sp-prc__check svg{width:.87rem;height:.87rem;display:block}
.sp-prc__label{font-size:1rem;line-height:1.4;letter-spacing:-.015em;color:var(--ink)}
.sp-prc__rule{border:0;border-top:1px solid var(--mist);height:0;margin:1.87rem 0}
.sp-prc__price{display:flex;flex-direction:column;gap:.27rem}
.sp-prc__price-row{margin:0;display:flex;align-items:baseline;gap:.4rem}
.sp-prc__amount{font-size:3rem;line-height:1.1;letter-spacing:-.0225em;font-weight:400;color:var(--ink)}
.sp-prc__per{font-size:1.17rem;line-height:1.4;letter-spacing:-.009em;color:var(--zinc)}
.sp-prc__billed{margin:0;font-size:.87rem;line-height:1.4;letter-spacing:-.009em;color:var(--zinc)}
.sp-prc .sp-prc__cta{display:inline-flex;align-items:center;justify-content:center;width:100%;margin-top:1.6rem;padding:.82rem 1.18rem;border:0;border-radius:999px;background:var(--ink-2);color:var(--white);font-family:var(--font-sans,"NB International Pro","Inter Tight",Inter,Arial,sans-serif);font-size:.94rem;font-weight:400;line-height:1.4;text-align:center;text-decoration:none;cursor:pointer}
.sp-prc .sp-prc__cta:hover{background:var(--black)}
.sp-prc .sp-prc__cta:focus-visible{outline:.13rem solid var(--coral);outline-offset:.2rem}
.sp-prc__trust{list-style:none;margin:1.34rem 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.4rem 1.07rem}
.sp-prc__trust-item{display:flex;align-items:center;gap:1.07rem;font-size:.87rem;line-height:1.4;letter-spacing:-.009em;color:var(--zinc)}
.sp-prc__trust-item + .sp-prc__trust-item::before{content:"";flex:0 0 auto;width:.2rem;height:.2rem;border-radius:999px;background:var(--ash)}
.sp-prc__footnote{margin:.94rem 0 0;text-align:center;font-size:.73rem;line-height:1.5;letter-spacing:-.005em;color:var(--ash)}
@media (max-width:968px){
.sp-prc__card{padding:1.5rem}
.sp-prc__title{font-size:1.6rem}
.sp-prc__list{margin-top:1.5rem;gap:.75rem}
.sp-prc__rule{margin:1.5rem 0}
.sp-prc__amount{font-size:2.6rem}
.sp-prc__trust{flex-direction:column;align-items:flex-start;gap:.5rem}
.sp-prc__trust-item + .sp-prc__trust-item::before{display:none}
.sp-prc__footnote{text-align:left}
}

/* ---------- Terminanfrage-Funnel in der sp-prc-Karte (Praefix sp-bkg) ---------- */
.sp-prc__card.sp-bkg{max-width:44rem}
/* hidden-Attribut muss auch gegen eigene display:flex-Regeln gewinnen,
   das UA-Stylesheet verliert sonst gegen die Klassen-Spezifitaet. */
.sp-bkg [hidden]{display:none!important}
.sp-bkg__lead{margin:.6rem 0 0;font-size:1rem;line-height:1.5;letter-spacing:-.011em;color:var(--zinc)}
.sp-bkg__step{margin-top:1.2rem}
.sp-bkg__step-title{display:flex;align-items:baseline;gap:.6rem;margin:0 0 .55rem;font-size:1rem;font-weight:500;letter-spacing:-.011em;color:var(--ink)}
/* Kontaktfelder: Name und Nummer nebeneinander, E-Mail volle Breite. */
.sp-bkg__fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem}
.sp-bkg__input--wide{grid-column:1 / -1}
@media (max-width:560px){.sp-bkg__fields{grid-template-columns:minmax(0,1fr)}.sp-bkg__input--wide{grid-column:auto}}
.sp-bkg .sp-prc__cta{margin-top:1.2rem}
.sp-bkg__num{font-family:var(--font-mono);font-size:.73rem;letter-spacing:-.005em;color:var(--coral)}
.sp-bkg__tabs{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.8rem}
.sp-bkg__tab{padding:.42rem .95rem;border:1px solid var(--mist);border-radius:999px;background:var(--white);font-size:.85rem;letter-spacing:-.009em;color:var(--zinc);cursor:pointer;transition:border-color .15s ease,background-color .15s ease,color .15s ease}
.sp-bkg__tab:hover{border-color:var(--ash)}
.sp-bkg__tab.is-on{background:var(--ink-2);border-color:var(--ink-2);color:var(--white)}
.sp-bkg__tab:focus-visible{outline:2px solid var(--coral);outline-offset:2px}
/* Kollabierte Auswahl: eine Zeile mit "Aendern", ersetzt Tabs + Liste nach der Wahl. */
.sp-bkg__picked{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;width:100%;padding:.62rem .8rem;border:1px solid var(--ink-2);border-radius:.6rem;background:var(--ink-2);color:var(--white);font-size:.92rem;letter-spacing:-.009em;cursor:pointer;text-align:left}
.sp-bkg__picked-edit{flex:none;font-size:.8rem;color:rgba(255,255,255,.75);text-decoration:underline;text-underline-offset:.15em}
.sp-bkg__picked:focus-visible{outline:2px solid var(--coral);outline-offset:2px}
.sp-bkg__opt{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;width:100%;padding:.62rem .8rem;margin:0 0 .35rem;border:1px solid var(--mist);border-radius:.6rem;background:var(--white);font-size:.92rem;letter-spacing:-.009em;color:var(--ink);cursor:pointer;text-align:left;transition:border-color .15s ease,background-color .15s ease}
.sp-bkg__opt:hover{border-color:var(--ash)}
.sp-bkg__opt.is-on{background:var(--ink-2);border-color:var(--ink-2);color:var(--white)}
.sp-bkg__opt-price{flex:none;font-family:var(--font-mono);font-size:.82rem;letter-spacing:-.005em;font-variant-numeric:tabular-nums;color:var(--zinc)}
.sp-bkg__opt.is-on .sp-bkg__opt-price{color:rgba(255,255,255,.75)}
.sp-bkg__monthnav{display:flex;align-items:center;gap:.6rem;margin-bottom:.7rem}
.sp-bkg__month{min-width:10.5rem;text-align:center;font-size:.95rem;font-weight:500;letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums;text-transform:capitalize}
.sp-bkg__monthbtn{display:inline-flex;align-items:center;justify-content:center;width:2.1rem;height:2.1rem;flex:none;border:1px solid var(--mist);border-radius:.55rem;background:var(--white);color:var(--ink);cursor:pointer;transition:border-color .15s ease,background-color .15s ease,opacity .15s ease}
.sp-bkg__monthbtn:hover:not(:disabled){border-color:var(--ash)}
.sp-bkg__monthbtn:disabled{opacity:.3;cursor:default}
.sp-bkg__monthbtn svg{width:1.15rem;height:1.15rem}
.sp-bkg__monthbtn:focus-visible{outline:2px solid var(--coral);outline-offset:2px}
.sp-bkg__days{display:flex;flex-wrap:wrap;gap:.4rem}
.sp-bkg__day{display:flex;flex-direction:column;align-items:center;gap:.1rem;min-width:4.35rem;padding:.5rem .55rem;border:1px solid var(--mist);border-radius:.6rem;background:var(--white);cursor:pointer;transition:border-color .15s ease,background-color .15s ease}
.sp-bkg__day:hover:not(:disabled){border-color:var(--ash)}
.sp-bkg__day:disabled{opacity:.35;cursor:default}
.sp-bkg__day.is-on{background:var(--ink-2);border-color:var(--ink-2)}
.sp-bkg__day-wd{font-size:.73rem;letter-spacing:-.005em;color:var(--zinc)}
.sp-bkg__day-num{font-family:var(--font-mono);font-size:.82rem;letter-spacing:-.005em;color:var(--ink);white-space:nowrap}
.sp-bkg__day.is-on .sp-bkg__day-wd{color:rgba(255,255,255,.7)}
.sp-bkg__day.is-on .sp-bkg__day-num{color:var(--white)}
.sp-bkg__times{display:flex;flex-wrap:wrap;gap:.4rem}
.sp-bkg__time{padding:.42rem .8rem;border:1px solid var(--mist);border-radius:999px;background:var(--white);font-family:var(--font-mono);font-size:.82rem;letter-spacing:-.005em;font-variant-numeric:tabular-nums;color:var(--ink);cursor:pointer;transition:border-color .15s ease,background-color .15s ease}
.sp-bkg__time:hover{border-color:var(--ash)}
.sp-bkg__time.is-on{background:var(--ink-2);border-color:var(--ink-2);color:var(--white)}
.sp-bkg__hint{margin:.5rem 0 0;font-size:.85rem;line-height:1.5;letter-spacing:-.009em;color:var(--zinc)}
.sp-bkg__input{width:100%;padding:.7rem .9rem;border:1px solid var(--mist);border-radius:.6rem;background:var(--white);font-family:var(--font-sans);font-size:.95rem;letter-spacing:-.009em;color:var(--ink)}
.sp-bkg__input:focus-visible{outline:2px solid var(--coral);outline-offset:2px}
.sp-bkg__summary{margin-top:1.2rem;padding:.85rem 1rem;border:1px solid var(--mist);border-left:3px solid var(--coral);border-radius:.5rem;background:var(--fog)}
.sp-bkg__summary-text{margin:0;font-size:.9rem;line-height:1.6;letter-spacing:-.009em;color:var(--zinc);white-space:pre-line}
.sp-bkg__summary-total{margin:.5rem 0 0;padding-top:.5rem;border-top:1px solid var(--mist);font-size:.95rem;line-height:1.5;letter-spacing:-.009em;font-weight:500;color:var(--ink)}
.sp-bkg__send.is-off{opacity:.4;cursor:default}
.sp-bkg__opt:focus-visible,.sp-bkg__day:focus-visible,.sp-bkg__time:focus-visible{outline:2px solid var(--coral);outline-offset:2px}
@media (prefers-reduced-motion: reduce){
.sp-bkg__opt,.sp-bkg__day,.sp-bkg__time{transition:none}
}
@media (max-width:560px){
.sp-bkg__opt{flex-direction:column;align-items:flex-start;gap:.15rem}
.sp-bkg__day{min-width:calc(25% - .4rem)}
}


/* ============================================================
   SECTION: footer   (prefix sp-ftr)
   ============================================================ */
/* ================= FOOTER CTA BAND + LINK FOOTER ================= */
.sp-ftr {
  background: var(--white);
  color: var(--ink);
}
.sp-ftr__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- CTA band ---------- */
.sp-ftr__cta {
  position: relative;
  margin: 0.5rem;
  border-radius: 0.75rem;
  overflow: hidden;
  isolation: isolate;
  background: var(--black);
  color: var(--white);
}
.sp-ftr__bg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 0;
  object-fit: cover;
}
/* Scrim ueber dem Foto: links dunkel fuer die Headline, rechts bleibt Raum. */
.sp-ftr__shade {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.84) 0%, rgba(0, 0, 0, 0.55) 48%, rgba(0, 0, 0, 0.3) 100%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 40%);
}
.sp-ftr__figure { filter: drop-shadow(0 0 0.4rem rgba(255, 150, 72, 0.4)); }
.sp-ftr__cta-inner {
  position: relative;
  z-index: 1;
}
.sp-ftr__cta-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  align-items: end;
  gap: 4.27rem;
  min-height: 31rem;
}
.sp-ftr__cta-lead,
.sp-ftr__aside {
  min-width: 0;
}
/* Standort-Karte in der rechten CTA-Spalte. DSGVO-freundlich – Google Maps
   lädt erst nach Klick auf „Karte laden“; vorher fließen keine Daten an
   Google. Optik ans dunkle Banner angepasst (Glas + heller Text). */
.sp-ftr__map { width: 100%; }
.sp-ftr__map-frame {
  position: relative;
  height: clamp(13rem, 17vw, 17rem);
  border-radius: 0.75rem;
  overflow: hidden;
  background: rgba(23, 20, 18, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.14);
  isolation: isolate;
}
.sp-ftr__map-embed { display: block; width: 100%; height: 100%; border: 0; }
.sp-ftr__map-consent {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  padding: 1.5rem 1.35rem;
  color: var(--white);
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 40px),
    linear-gradient(155deg, rgba(40, 34, 28, 0.5), rgba(23, 20, 18, 0.66));
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.sp-ftr__map-pin { width: 1.85rem; height: 1.85rem; color: #e6c07a; }
.sp-ftr__map-addr { margin: 0; font-size: 1rem; font-weight: 500; letter-spacing: -0.015em; color: var(--white); }
.sp-ftr__map-note { margin: 0; max-width: 22rem; font-size: 0.78rem; line-height: 1.45; color: rgba(255, 255, 255, 0.62); }
.sp-ftr__map-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: 0.45rem; }

.sp-ftr__rating {
  display: flex;
  align-items: center;
  gap: 0.53rem;
  margin: 0 0 2.13rem;
  font-size: 0.87rem;
  line-height: 1.4;
  letter-spacing: -0.009em;
}
.sp-ftr__stars {
  display: block;
  flex: none;
  width: 4.8rem;
  height: 0.94rem;
  color: var(--coral);
}
.sp-ftr__rating-score { color: var(--white); }
.sp-ftr__rating-count { color: rgba(255, 255, 255, 0.62); }
.sp-ftr__sep {
  flex: none;
  width: 0.2rem;
  height: 0.2rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.38);
}

.sp-ftr__title {
  margin: 0 0 2.4rem;
  font-size: 5.3rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--white);
}
.sp-ftr__title-line { display: block; }

.sp-ftr__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.53rem 1.6rem;
  margin: 0 0 2.13rem;
  padding: 0;
  list-style: none;
}
.sp-ftr__trust-item {
  display: flex;
  align-items: center;
  gap: 0.47rem;
  font-size: 0.94rem;
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: rgba(255, 255, 255, 0.78);
}
.sp-ftr__check {
  flex: none;
  width: 0.94rem;
  height: 0.94rem;
  color: var(--coral);
}

.sp-ftr__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.53rem;
}
.sp-ftr__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.sp-ftr__btn:focus-visible {
  outline: 0.13rem solid var(--white);
  outline-offset: 0.2rem;
}

/* ---------- newsletter + CEO video ---------- */
.sp-ftr__aside {
  display: flex;
  flex-direction: column;
  gap: 1.87rem;
}
.sp-ftr__news-text {
  max-width: 26rem;
  margin: 0 0 1.07rem;
  font-size: 0.94rem;
  line-height: 1.5;
  letter-spacing: -0.009em;
  color: rgba(255, 255, 255, 0.66);
}
.sp-ftr__form {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 26rem;
  margin: 0;
  padding: 0.33rem 0.33rem 0.33rem 1.18rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: var(--glass-light);
}
.sp-ftr__form:focus-within { border-color: rgba(255, 255, 255, 0.55); }
.sp-ftr__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.49rem 0;
  border: 0;
  background: transparent;
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 0.94rem;
  line-height: 1.4;
  letter-spacing: -0.015em;
}
.sp-ftr__input::placeholder { color: rgba(255, 255, 255, 0.46); }
.sp-ftr__input:focus { outline: none; }
.sp-ftr__submit {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
}
.sp-ftr__submit:focus-visible {
  outline: 0.13rem solid var(--white);
  outline-offset: 0.2rem;
}
.sp-ftr__icon {
  display: block;
  width: 1.07rem;
  height: 1.07rem;
}

.sp-ftr__aside-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
}
.sp-ftr__ceo {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.53rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0.75rem;
  background: var(--glass-dark);
  color: var(--white);
  font-family: var(--font-sans);
  text-align: left;
  cursor: pointer;
}
.sp-ftr__ceo:focus-visible {
  outline: 0.13rem solid var(--white);
  outline-offset: 0.2rem;
}
.sp-ftr__ceo-thumb {
  display: block;
  flex: none;
  width: 4.27rem;
  height: 3.2rem;
  border-radius: 0.5rem;
}
.sp-ftr__ceo-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.sp-ftr__ceo-label {
  font-size: 0.94rem;
  line-height: 1.4;
  letter-spacing: -0.015em;
}
.sp-ftr__ceo-play {
  display: flex;
  align-items: center;
  gap: 0.33rem;
  font-size: 0.73rem;
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.62);
}
.sp-ftr__play {
  display: block;
  flex: none;
  width: 0.53rem;
  height: 0.67rem;
}
.sp-ftr__ask {
  padding-block: 0.59rem;
  font-size: 0.87rem;
}

/* ---------- light link footer ---------- */
.sp-ftr__foot-inner { padding-block: 4.8rem 2.13rem; }
/* Fuß-Kopf: großes Wortmarken-Logo links, die vier Link-Spalten rechts. */
.sp-ftr__foot-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 2.4rem 4rem;
  margin-bottom: 3.4rem;
}
.sp-ftr__brandcol { flex: 0 0 auto; align-self: center; }
.sp-ftr__brand {
  display: inline-block;
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 0.95;
  font-size: clamp(2.6rem, 5.5vw, 4.8rem);
  color: var(--ink);
  text-decoration: none;
}
.sp-ftr__brand:hover { color: var(--black); }
.sp-ftr__brand:focus-visible { outline: 0.15rem solid var(--ink); outline-offset: 0.2rem; }
/* Social-Icons unter dem Logo: Instagram + TikTok, verlinkt. */
.sp-ftr__social { display: flex; gap: 0.7rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.sp-ftr__social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.7rem; height: 2.7rem; border-radius: 999px;
  border: 1px solid var(--mist); color: var(--ink);
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.sp-ftr__social-link:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }
.sp-ftr__social-link:focus-visible { outline: 0.15rem solid var(--coral); outline-offset: 0.2rem; }
.sp-ftr__social-icon { width: 1.3rem; height: 1.3rem; display: block; }
.sp-ftr__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.67rem 1.6rem;
  flex: 1 1 34rem;
}
.sp-ftr__col { min-width: 0; }
.sp-ftr__col-title {
  margin: 0 0 1.07rem;
  font-size: 0.73rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ash);
}
.sp-ftr__list {
  display: flex;
  flex-direction: column;
  gap: 0.67rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sp-ftr__link {
  color: var(--zinc);
  font-size: 0.94rem;
  line-height: 1.4;
  letter-spacing: -0.009em;
  text-decoration: none;
}
.sp-ftr__link:hover { color: var(--ink); }
.sp-ftr__link:focus-visible,
.sp-ftr__legal-link:focus-visible {
  outline: 0.13rem solid var(--ink);
  outline-offset: 0.2rem;
  border-radius: 0.2rem;
}

.sp-ftr__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.53rem 1.6rem;
  margin-top: 3.2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--mist);
}
.sp-ftr__legal-copy {
  margin: 0 auto 0 0;
  font-size: 0.87rem;
  line-height: 1.4;
  letter-spacing: -0.009em;
  color: var(--ash);
}
.sp-ftr__legal-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.53rem 1.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sp-ftr__legal-link {
  color: var(--zinc);
  font-size: 0.87rem;
  line-height: 1.4;
  letter-spacing: -0.009em;
  text-decoration: none;
}
.sp-ftr__legal-link:hover { color: var(--ink); }

/* ---------- responsive ---------- */
@media (max-width: 968px) {
  .padding-section-large.sp-ftr__cta-inner { padding-block: 4rem; }
  /* the horizontal scrim in the artwork is nearly clear at its right edge, which is
     what stays visible once the band is cropped to a tall mobile aspect — add a
     vertical scrim so the headline keeps contrast over the glow */
  .sp-ftr__cta::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.44) 42%, rgba(0, 0, 0, 0.64));
  }
  .sp-ftr__cta-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
    min-height: 0;
  }
  .sp-ftr__title { font-size: 3.25rem; }
  .sp-ftr__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-ftr__foot-inner { padding-block: 3.5rem 2rem; }
  .sp-ftr__legal-copy { margin-right: 0; }
}
@media (max-width: 560px) {
  .page-padding.sp-ftr__cta-inner,
  .page-padding.sp-ftr__foot { padding-inline: 1.5rem; }
  .sp-ftr__title { font-size: 2.6rem; }
  .sp-ftr__cols { grid-template-columns: minmax(0, 1fr); }
  .sp-ftr__actions { flex-direction: column; align-items: stretch; }
  .sp-ftr__aside-row { flex-direction: column; align-items: flex-start; }
}


/* ============================================================
   SERIF-SCHICHT: Playfair Display fuer alles, was Buehne ist.
   Steht bewusst NACH allen Sektionsregeln: gleiche Spezifitaet,
   spaetere Position gewinnt, kein Selektor musste angefasst werden.
   Serif braucht weniger negatives Tracking als der Grotesk-Satz.
   ============================================================ */
.sp-hero__title,
.sp-hiw__title,
.sp-pin__title,
.sp-inc__title,
.sp-doc__title,
.sp-tst__title,
.sp-prc__title,
.sp-ftr__title {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.sp-hero__wordmark,
.sp-nav-drawer .sp-nav-drawer__link {
  font-family: var(--font-serif);
}
.sp-hero__wordmark { font-weight: 600; letter-spacing: 0; }
/* Zitate kursiv gesetzt: Bewertungs-Karten lesen sich wie Stimmen,
   nicht wie Datenzeilen. line-height 1.35 laesst Unterlaengen Platz. */
.sp-tst__quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0;
}
/* Gold ist auf dunklen Flaechen zu dunkel: dort hellere Stufe.
   Betroffen sind Video-Kacheln (Haarlinie, Cue-Ring) und Footer-CTA. */
.sp-hiw__media,
.sp-ftr__cta,
.sp-hero__card {
  --coral: #d4a84b;
}


/* ============================================================
   MOROCCANOIL (Praefix sp-shp): kein Online-Verkauf. Ueberschrift und
   Text stehen ueber dem Bild auf hellem Grund (maximale Lesbarkeit),
   darunter das marokkanische Panorama als ruhiges Stimmungsband, gefolgt
   von der Verfuegbarkeits-Zeile.
   ============================================================ */
.sp-shp { background: var(--white); }
.sp-shp__head { max-width: 44rem; margin-bottom: 1.9rem; }
.sp-shp__kicker {
  display: inline-block;
  margin-bottom: 0.85rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--coral);
}
.sp-shp__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.95rem, 3.6vw, 2.9rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.sp-shp__lead {
  margin: 1rem 0 0;
  font-size: 1.12rem;
  line-height: 1.5;
  letter-spacing: -0.009em;
  color: var(--zinc);
}
.sp-shp__figure {
  margin: 0;
  border-radius: 0.75rem;
  overflow: hidden;
  background: var(--black);
}
.sp-shp__figure-img {
  display: block;
  width: 100%;
  height: auto;
}
.sp-shp__avail {
  max-width: 44rem;
  margin: 1.6rem 0 0;
  padding-left: 1rem;
  border-left: 2px solid var(--coral);
  font-size: 1rem;
  line-height: 1.55;
  letter-spacing: -0.009em;
  color: var(--ink);
}
.sp-shp__avail strong { color: var(--coral); font-weight: 600; }
@media (max-width: 719px) {
  .sp-shp__head { margin-bottom: 1.5rem; }
  .sp-shp__lead { font-size: 1.05rem; }
}


/* ============================================================
   FAQ (Praefix sp-faq): sichtbare Fragen als native <details>-Accordions
   (kein JavaScript noetig, barrierefrei). Der gleiche Wortlaut steht als
   FAQPage-JSON-LD im <head>, deshalb Texte hier und dort synchron halten.
   ============================================================ */
.sp-faq { background: var(--white); }
.sp-faq__head { max-width: 44rem; margin-bottom: 2rem; }
.sp-faq__kicker {
  display: inline-block;
  margin-bottom: 0.85rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--coral);
}
.sp-faq__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.95rem, 3.6vw, 2.9rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.sp-faq__list { max-width: 52rem; }
.sp-faq__item {
  border-top: 1px solid var(--mist);
}
.sp-faq__item:last-child { border-bottom: 1px solid var(--mist); }
.sp-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem 0.25rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-serif);
  font-size: 1.22rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.006em;
  color: var(--ink);
}
.sp-faq__q::-webkit-details-marker { display: none; }
.sp-faq__q:hover { color: var(--coral); }
.sp-faq__icon {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  position: relative;
  transition: transform 0.25s ease;
}
.sp-faq__icon::before,
.sp-faq__icon::after {
  content: "";
  position: absolute;
  background: var(--coral);
  border-radius: 2px;
}
.sp-faq__icon::before { top: 50%; left: 0; width: 100%; height: 2px; transform: translateY(-50%); }
.sp-faq__icon::after { left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%); }
.sp-faq__item[open] .sp-faq__icon { transform: rotate(135deg); }
.sp-faq__a {
  margin: 0;
  padding: 0 2.6rem 1.4rem 0.25rem;
  font-size: 1.02rem;
  line-height: 1.6;
  letter-spacing: -0.009em;
  color: var(--zinc);
}
.sp-faq__a a { color: var(--ink); text-decoration: underline; text-underline-offset: 0.15em; }
.sp-faq__a a:hover { color: var(--coral); }
@media (max-width: 719px) {
  .sp-faq__q { font-size: 1.1rem; padding: 1.1rem 0.15rem; }
  .sp-faq__a { padding-right: 0.5rem; }
}


/* ============================================================
   MOTION-SCHICHT: Einstieg + Scroll-Reveals
   Alles hinter no-preference: bei reduzierter Bewegung bleibt die
   Seite komplett statisch, kein Element startet unsichtbar.
   ============================================================ */
/* Termin-Sektion leicht abgetoent, die weisse Karte bekommt Tiefe. */
.sp-prc { background: var(--fog); }
.sp-prc__card { box-shadow: 0 1px 2px rgba(24, 24, 27, 0.04); }

@media (prefers-reduced-motion: no-preference) {
  /* Hero: Inhalt steigt beim Laden gestaffelt ein, einmalig. */
  @keyframes spFadeUp {
    from { opacity: 0; transform: translateY(1.1rem); }
    to   { opacity: 1; transform: none; }
  }
  .sp-hero__content > * { animation: spFadeUp 0.7s var(--ease-out) both; }
  .sp-hero__content > :nth-child(1) { animation-delay: 0.1s; }
  .sp-hero__content > :nth-child(2) { animation-delay: 0.18s; }
  .sp-hero__content > :nth-child(3) { animation-delay: 0.26s; }
  .sp-hero__content > :nth-child(4) { animation-delay: 0.34s; }
  .sp-hero__content > :nth-child(5) { animation-delay: 0.42s; }

  /* Scroll-Reveal: .rv wird per JS vergeben (ohne JS bleibt alles sichtbar),
     .rv-in beim Eintritt in den Viewport. --rvd staffelt Karten. */
  .rv {
    opacity: 0;
    transform: translateY(1.3rem);
    transition:
      opacity 0.65s var(--ease-out),
      transform 0.65s var(--ease-out);
    transition-delay: var(--rvd, 0s);
  }
  .rv-in {
    opacity: 1;
    transform: none;
  }
}


/* Anfahrt-Block unter der Karte (15.09.2026) */
.sp-ftr__route{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.45rem}
.sp-ftr__route-item{font-size:.86rem;line-height:1.45;color:rgba(255,255,255,.78)}
.sp-ftr__route-item b{display:block;font-weight:600;color:#fff;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.1rem}

/* Google-Bewertungen live (Featurable, 2-Klick) */
.sp-tst__live {
  margin-top: 2.5rem;
  padding: 1.5rem;
  border: 1px solid var(--mist);
  border-radius: 1rem;
  background: var(--fog);
  display: grid;
  gap: 1rem;
  justify-items: start;
}
.sp-tst__live[hidden],
.sp-tst__live [hidden] { display: none !important; }
.sp-tst__live-text {
  margin: 0;
  max-width: 44rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--zinc);
}
.sp-tst__live-text a { color: var(--ink); text-underline-offset: 0.15em; }
.sp-tst__live-btn { border: 0; border-radius: 999px; font: inherit; font-weight: 500; cursor: pointer; }
.sp-tst__live-btn:disabled { opacity: 0.6; cursor: progress; }
.sp-tst__live-msg { margin: 0; font-size: 0.95rem; color: var(--ink); }
.sp-tst__live-slot { width: 100%; }
.sp-tst__live-slot:empty { display: none; }

/* ============ Audit-Umsetzung 25.09.2026 ============ */
/* Leistungs-Ueberschrift ueber der Linkzeile, danach der Haarverlaengerungs-Block. */
.sp-hiw__title--leist { font-size: 1.6rem; }
.sp-hiw__title--hv { margin-top: 2.4rem; }
.sp-hiw__all { margin: 1.6rem 0 0; text-align: center; }
@media (max-width: 968px) {
  .sp-hiw__title--leist { font-size: 1.35rem; }
  .sp-hiw__title--hv { margin-top: 1.8rem; }
}
/* Leistungsraster statt Link-Zeile (25.09.2026): 3 x 3 auf Desktop, Liste auf dem Handy. */
.sp-leist { list-style: none; margin: 1.4rem 0 0; padding: 0; width: 100%; max-width: 58rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; text-align: left; }
.sp-leist__item { display: flex; align-items: center; justify-content: space-between; gap: .8rem; min-height: 3.75rem; height: 100%; padding: .75rem 1rem .75rem 1.15rem; border: 1px solid var(--mist); border-radius: .75rem; background: var(--white); color: var(--ink); text-decoration: none; transition: border-color .18s ease, background-color .18s ease; }
.sp-leist__item:hover { border-color: var(--coral); background: var(--row-alt); }
.sp-leist__txt { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.sp-leist__name { font-size: 1rem; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; }
.sp-leist__meta { font-size: .82rem; line-height: 1.35; color: var(--zinc); }
.sp-leist__pfeil { flex: none; width: 1rem; height: 1rem; color: var(--coral); transition: transform .18s ease; }
.sp-leist__item:hover .sp-leist__pfeil { transform: translateX(3px); }
/* Handy: eine ruhige Liste in einer Karte, Trennlinien statt neun Einzelkaesten. */
@media (max-width: 719px) {
  .sp-leist { grid-template-columns: minmax(0, 1fr); gap: 0; border: 1px solid var(--mist); border-radius: .85rem; background: var(--white); overflow: hidden; }
  .sp-leist__item { min-height: 3.4rem; padding: .6rem 1rem; border: 0; border-radius: 0; }
  .sp-leist li + li > .sp-leist__item { border-top: 1px solid var(--mist); }
  .sp-leist__item:hover { background: var(--row-alt); }
}
@media (prefers-reduced-motion: reduce) {
  .sp-leist__item, .sp-leist__pfeil { transition: none; }
  .sp-leist__item:hover .sp-leist__pfeil { transform: none; }
}
/* Kennzahlen immer in einer Reihe (25.09.2026), auch auf Tablet und Handy. */
@media (max-width: 968px) {
  .sp-hiw__logos { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 0; }
  .sp-hiw__logo:nth-child(even) { border-left: 0; }
  .sp-hiw__logo + .sp-hiw__logo { border-left: 1px solid var(--mist); }
  .sp-hiw__stat-extra { display: none; }
}
@media (max-width: 479px) {
  .sp-hiw__intro .page-padding { padding-inline: 1rem; }
  .sp-hiw__logo { padding-inline: .15rem; }
  .sp-hiw__stat { font-size: 1.4rem; }
  .sp-hiw__stat-label { font-size: .75rem; line-height: 1.3; }
}
/* ============ CRO-Quick-Wins 25.09.2026 ============ */
/* Termin-Button unter der Preisliste */
.sp-inc__cta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: 1.4rem; }
.sp-inc__cta-btn { min-height: 2.75rem; text-decoration: none; }
.sp-inc__cta-link { font-size: .94rem; font-weight: 500; color: var(--coral); text-decoration: none; }
.sp-inc__cta-link:hover { text-decoration: underline; text-underline-offset: .15em; }
/* Treatwell als zweiter Weg im Terminbereich */
.sp-bkg__alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .15rem .4rem; min-height: 2.75rem; margin-top: 1rem; padding: .6rem 1rem; border: 1px solid var(--mist); border-radius: 999px; background: var(--row-alt); color: var(--ink); font-size: .92rem; font-weight: 500; text-align: center; text-decoration: none; transition: border-color .18s ease; }
.sp-bkg__alt span { font-weight: 400; color: var(--zinc); }
.sp-bkg__alt:hover { border-color: var(--coral); }
/* Haarverlaengerungs-Kacheln: auf Tablet und Handy seitlich wischen statt vier hohe Videos untereinander */
@media (max-width: 968px) {
  .sp-hiw__grid { display: flex; gap: .75rem; max-width: none; margin-inline: 0; padding: .25rem .1rem 1rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .sp-hiw__grid::-webkit-scrollbar { display: none; }
  .sp-hiw__card { flex: 0 0 min(76%, 19rem); scroll-snap-align: center; }
}
/* Schnellkontakt-Leiste unten (nur Handy und Tablet) */
.sp-aktion { display: none; }
@media (max-width: 968px) {
  .sp-aktion { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: .5rem; padding: .55rem .75rem calc(.55rem + env(safe-area-inset-bottom)); background: rgba(250, 249, 246, .96); border-top: 1px solid var(--mist); box-shadow: 0 -6px 24px rgba(23, 20, 18, .08); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transform: translateY(110%); visibility: hidden; transition: transform .25s var(--ease-out), visibility 0s linear .25s; }
  .sp-aktion.is-sichtbar { transform: none; visibility: visible; transition: transform .25s var(--ease-out), visibility 0s; }
  .sp-aktion__btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.9rem; border: 1px solid var(--mist); border-radius: 999px; background: var(--white); color: var(--ink); font-size: .9rem; font-weight: 500; text-decoration: none; }
  .sp-aktion__btn svg { width: 1.1rem; height: 1.1rem; flex: none; }
  .sp-aktion__btn--haupt { border-color: var(--ink-2); background: var(--ink-2); color: var(--white); }
}
/* Galerie-Grossansicht */
.sp-lb { width: min(60rem, calc(100% - 2rem)); max-width: none; max-height: calc(100% - 2rem); padding: 0; border: 0; border-radius: 1rem; background: var(--white); color: var(--ink); overflow: auto; }
.sp-lb::backdrop { background: rgba(23, 20, 18, .72); }
.sp-lb__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.sp-lb__media { display: flex; align-items: center; justify-content: center; background: var(--ink-2); }
.sp-lb__img { display: block; width: 100%; height: auto; max-height: calc(100vh - 2rem); object-fit: contain; }
.sp-lb__info { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: .9rem; padding: 2.4rem 2rem 2rem; }
.sp-lb__kicker { margin: 0; font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--coral); }
.sp-lb__titel { margin: 0; font-family: var(--font-serif); font-size: 1.45rem; line-height: 1.25; }
.sp-lb__leistung, .sp-lb__termin { min-height: 2.75rem; text-decoration: none; }
.sp-lb__termin { border: 1px solid var(--mist); }
.sp-lb__insta { font-size: .9rem; color: var(--zinc); }
.sp-lb__nav { display: flex; align-items: center; gap: .75rem; margin-top: .4rem; }
.sp-lb__count { min-width: 3rem; text-align: center; font-size: .9rem; color: var(--zinc); font-variant-numeric: tabular-nums; }
.sp-lb__nav button, .sp-lb__close { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid var(--mist); border-radius: 999px; background: var(--white); color: var(--ink); cursor: pointer; }
.sp-lb__close { position: absolute; top: .75rem; right: .75rem; z-index: 2; }
.sp-lb svg { width: 1.1rem; height: 1.1rem; }
@media (max-width: 719px) {
  .sp-lb__inner { grid-template-columns: minmax(0, 1fr); }
  .sp-lb__img { max-height: 58vh; }
  .sp-lb__info { padding: 1.25rem 1.25rem 1.5rem; gap: .7rem; }
  .sp-lb__leistung, .sp-lb__termin { align-self: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-aktion, .sp-aktion.is-sichtbar, .sp-bkg__alt { transition: none; }
}
/* Preisblock mit eigener Ueberschrift. */
.sp-inc__title { margin: 0 0 1.2rem; font-size: clamp(1.9rem, 3.2vw, 2.5rem); }
/* Bewusst KEIN content-visibility: auto. Getestet 25.09.2026, es verschiebt die
   Ankerspruenge (/#termin landete fast 1000 px zu tief). */

/* ============ Localo-Plan 26.09.2026 ============ */
/* Link unter den Bewertungskarten auf das Google-Profil. */
.sp-tst__more { margin: 1.25rem 0 0; font-size: 0.95rem; }
.sp-tst__more a { color: var(--ink); font-weight: 500; text-underline-offset: 0.2em; }
.sp-tst__more a:hover { color: var(--zinc); }