/* ==========================================================================
   SOLVIOR — Home 04 Landing (rebuild)
   Single-file stylesheet. Tokens → Base → Layout → Components → Sections
   ========================================================================== */

/* -------------------- Tokens -------------------- */
:root {
  --sv-navy:        #0A1628;
  --sv-navy-deep:   #081122;
  --sv-navy-800:    #10203a;
  --sv-blue:        #176FE3;
  --sv-blue-600:    #125fc4;
  --sv-blue-50:     #e6eef9;
  --sv-ink:         #0A1628;
  --sv-text:        #4E5B6E;
  --sv-muted:       #7c8698;
  --sv-line:        #E4E8EE;
  --sv-line-2:      #EDF0F4;
  --sv-bg:          #F5F7FA;
  --sv-bg-2:        #EDF0F4;
  --sv-white:       #ffffff;
  /* Seitenfläche: weiß; Hero nur noch ein einheitliches Hellblau darüber */
  --sv-page-bg: #ffffff;
  --sv-page-bg-fallback: #ffffff;
  /* Eine Flächenfarbe für den hellblauen Hero-Hintergrund */
  --sv-hero-bg: #e6edf5;

  --sv-font-sans:   'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sv-font-display:'Manrope', var(--sv-font-sans);

  --sv-container:   1280px;
  --sv-radius-sm:   8px;
  --sv-radius:      14px;
  --sv-radius-lg:   20px;
  --sv-radius-pill: 999px;

  --sv-shadow-sm:   0 2px 8px rgba(10,22,40,.06);
  --sv-shadow:      0 12px 30px rgba(10,22,40,.08);
  --sv-shadow-lg:   0 28px 60px rgba(10,22,40,.18);

  --sv-ease:        cubic-bezier(.22,.61,.36,1);

  /* Hero-CTA System (vereinheitlicht Icon-Größe, -Schrift und Gap zwischen Icon/Text) */
  --sv-cta-icon:    44px;
  --sv-cta-icon-fs: .95rem;
  --sv-cta-gap:     .65rem;
  /* Kleine 45°-Fase: Formsprache der dunklen Box wird oben am Hero wiederholt (Badge, Primary-CTA) */
  --sv-chamfer-sm:  clamp(10px, 1.4vw, 16px);

  /* Abstand oben bis zur Menü-Kapsel (Leiste wirkt tiefer) */
  --sv-header-pad-top: clamp(0.75rem, 1.65vw, 1.35rem);
  /* Menü-Kapsel-Basis-Höhe; ×1,05×1,1 = +5 % und erneut +10 % Mindesthöhe */
  --sv-header-inner-min-h: clamp(58px, 9vw, 72px);
  /* Menüleiste im Hero (nicht fixiert); weiterhin für alte Abstandsformeln nutzbar */
  --sv-header-stack-h: calc(var(--sv-header-pad-top) + calc(var(--sv-header-inner-min-h) * 1.05 * 1.1 * 1.06));
  /* Seitenbündigkeit: derselbe horizontale Innenrand für .sv-container und Sektionen, die abweichendes Padding nutzten */
  --sv-gutter-x: clamp(1rem, 2.5vw, 2rem);
  /* Hero-Text + Menüleiste: einheitliche linke Luft (nur hero copy / Header-Innen) */
  --sv-hero-copy-pad-l: clamp(1.65rem, 2.5vw, 2.75rem);
  --sv-hero-copy-pad-l-narrow: clamp(1.75rem, 6.2vw, 3.35rem);
  /* Menüpille: knapper Zusatz als Hero (voller Wert würde Nav+Anruf rausdrücken) */
  --sv-header-pad-l-extra: clamp(0.75rem, 1.05vw, 1.15rem);
  --sv-header-pad-l: max(
    env(safe-area-inset-left, 0px),
    calc(var(--sv-gutter-x) + var(--sv-header-pad-l-extra))
  );
}

/* -------------------- Base -------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  min-height: 100%;
  /* Menüleiste scrollt mit — nur leichter Anker-Luft */
  scroll-padding-top: clamp(0.75rem, 1.5vw, 1.25rem);
  scrollbar-width: thin;
  scrollbar-color: var(--sv-blue) rgba(10, 22, 40, 0.1);
  /* Gegen 100vw-Fullbleed: kein horizontales Mitwischen / Scrollbalken-Spalt */
  overflow-x: hidden;
  overscroll-behavior-x: none;
}
@media (min-width: 900px) {
  html {
    scrollbar-gutter: stable;
  }
}
html::-webkit-scrollbar {
  width: 11px;
}
html::-webkit-scrollbar-track {
  background: rgba(10, 22, 40, 0.08);
}
html::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--sv-blue), var(--sv-blue-600));
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
html::-webkit-scrollbar-thumb:hover {
  background: var(--sv-blue-600);
}
body {
  margin: 0;
  font-family: var(--sv-font-sans);
  color: var(--sv-ink);
  background: var(--sv-page-bg);
  background-color: var(--sv-page-bg-fallback);
  line-height: 1.6;
  min-height: 100vh;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* clip kann position:sticky am Header stören — hidden reicht für horizontales Abschneiden */
  overflow-x: hidden;
  overscroll-behavior-x: none;
}
main {
  background-color: var(--sv-page-bg-fallback);
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--sv-blue); text-decoration: none; }
a:hover { color: var(--sv-blue-600); }
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
input, textarea, select, button { font-family: inherit; }
h1, h2, h3, h4, h5 {
  font-family: var(--sv-font-display);
  color: var(--sv-ink);
  margin: 0 0 .65em;
  letter-spacing: -0.02em;
  font-weight: 700;
}
p { margin: 0 0 1rem; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* -------------------- Layout -------------------- */
.sv-container {
  width: 100%;
  max-width: var(--sv-container);
  margin-inline: auto;
  padding-inline: var(--sv-gutter-x);
}
.sv-section {
  --sv-section-pad-y: clamp(3.5rem, 8vw, 7rem);
  padding-block: var(--sv-section-pad-y);
}
/* Direkt nach Hero: Inhalt etwas tiefer (zusätzliches Padding oben) */
.sv-hero + .sv-section {
  padding-top: calc(var(--sv-section-pad-y) + clamp(1.1rem, 2.5vw, 1.85rem) + clamp(4.15rem, 7vw, 6.75rem));
  padding-bottom: var(--sv-section-pad-y);
}
/* „Über mich“ direkt nach Hero: ursprüngliches Extra-Air oben wirkte als zu große Lücke */
.sv-hero + .sv-section.sv-about-showcase {
  padding-top: calc(var(--sv-section-pad-y) + clamp(0.35rem, 1vw, 0.9rem));
  padding-bottom: var(--sv-section-pad-y);
}
.sv-section__head {
  display: grid;
  gap: clamp(1rem, 2vw, 2rem);
  grid-template-columns: 1fr;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
@media (min-width: 900px) {
  .sv-section__head { grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); align-items: end; }
}
.sv-section__head--split { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: 1.25rem; margin-bottom: clamp(2rem,4vw,3.5rem); }
.sv-section__heading { display: flex; flex-direction: column; gap: .5rem; }
.sv-kicker {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sv-blue);
  padding: 0;
  background: none;
  box-shadow: none;
  border: none;
  border-radius: 0;
}
.sv-kicker--light { color: #7db3ff; }
.sv-section__title {
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  line-height: 1.1;
  letter-spacing: -.035em;
  font-weight: 800;
  margin: 0;
  color: var(--sv-ink);
}
.sv-section__title--light { color: #fff; }
.sv-section__lead, .sv-section__text {
  color: var(--sv-text);
  font-size: clamp(1rem, 1.2vw, 1.06rem);
  line-height: 1.7;
  max-width: 40rem;
}
.sv-section__text--light { color: rgba(255,255,255,.7); }

/* -------------------- Buttons -------------------- */
.sv-btn {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .7rem 1.35rem;
  font-weight: 600;
  font-size: .95rem;
  border-radius: var(--sv-radius-pill);
  transition: transform .18s var(--sv-ease), box-shadow .2s var(--sv-ease), background .2s;
  white-space: nowrap;
}
.sv-btn:hover { transform: translateY(-2px); }
.sv-btn--pill { border-radius: var(--sv-radius-pill); }

/* Zwei Ebenen; Aus = eine Zeile nach oben, Ein = eine Zeile direkt darunter (100 % = Zeilenhöhe) */
@keyframes sv-cta-label-out {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  40% {
    transform: translate3d(0, -100%, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, -100%, 0);
    opacity: 0;
  }
}

/* Kein Zwischen-Keyframe: 30→38 % war bei 0,48 s nur ~38 ms → sichtbarer Ruck */
@keyframes sv-cta-label-in {
  0%,
  12% {
    transform: translate3d(0, 100%, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

/* Telefon / WhatsApp: dicker dunkler Rand, Navy — nur der farbige Kreis (40px hoch) wird nach rechts gestreckt, kein voller Button-Hintergrund */
.sv-btn--dark,
.sv-btn--whatsapp {
  /* 0px (nicht unitless 0): sonst kann calc(100% - …) die Hover-Breite des Balkens invalidieren */
  --sv-cta-pad: 0px;
  --sv-cta-icon: 48px;
  --sv-cta-icon-fs: 0.94rem;
  /* Streifen-Breite und Text: gleiche Dauer; linear = gleichmäßig zur Vergrößerung */
  --sv-cta-dur: 0.3s;
  /* Balken-Breite + Text: gleiche Dauer und gleiche Kurve (linear) */
  --sv-cta-ease: linear;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 5px solid var(--sv-navy-deep);
  background-color: var(--sv-navy-deep);
  color: #fff;
  padding: var(--sv-cta-pad);
  font-size: 1.06rem;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  line-height: 1;
  transform: none;
}
.sv-btn--dark {
  min-width: 15.85rem;
}
.sv-btn--whatsapp {
  min-width: 13.45rem;
}
/* Streifen am linken Innenrand (wie zuvor), Icon/Kreis unverändert */
.sv-btn--dark::before,
.sv-btn--whatsapp::before {
  content: "";
  position: absolute;
  left: var(--sv-cta-pad);
  top: 0;
  bottom: 0;
  width: var(--sv-cta-icon);
  height: var(--sv-cta-icon);
  margin-block: auto;
  border-radius: 999px;
  transition: width var(--sv-cta-dur) var(--sv-cta-ease), background 0.45s cubic-bezier(0.22, 0.99, 0.36, 1);
  z-index: 0;
  pointer-events: none;
}
.sv-btn--dark::before {
  background: var(--sv-blue);
}
.sv-btn--whatsapp::before {
  background: #25d366;
}
.sv-btn--dark:hover::before,
.sv-btn--whatsapp:hover::before {
  width: calc(100% - 2 * var(--sv-cta-pad));
}
.sv-btn--whatsapp:hover::before {
  background: #1ebe5a;
}
.sv-btn--dark:hover,
.sv-btn--whatsapp:hover {
  color: #fff;
  box-shadow: none;
  transform: none;
}
.sv-btn--dark .sv-btn__body,
.sv-btn--whatsapp .sv-btn__body {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.8rem;
  width: 100%;
  min-width: 0;
  min-height: var(--sv-cta-icon);
  position: relative;
  z-index: 1;
}
.sv-btn--dark .sv-btn__icon,
.sv-btn--whatsapp .sv-btn__icon {
  flex: 0 0 auto;
  width: var(--sv-cta-icon);
  height: var(--sv-cta-icon);
  font-size: var(--sv-cta-icon-fs);
  position: relative;
  z-index: 1;
  background: transparent;
  color: #fff;
  line-height: 0;
}
.sv-btn--dark .sv-btn__icon i,
.sv-btn--whatsapp .sv-btn__icon i {
  display: block;
  line-height: 1;
}
/* Maske = Zeilenbox + Textbreite (nicht die breite Pillenfläche wie der blaue Streifen) */
.sv-btn--dark .sv-btn__text-clip,
.sv-btn--whatsapp .sv-btn__text-clip {
  flex: 0 1 auto;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  align-self: center;
  line-height: 1;
  height: 1.25em;
  height: 1lh;
  overflow: hidden;
  border-radius: 0.2em;
  display: inline-flex;
  align-items: center;
  position: relative;
  z-index: 1;
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: paint;
}
.sv-btn--dark .sv-btn__label,
.sv-btn--whatsapp .sv-btn__label {
  min-height: 0;
  display: flex;
  align-items: center;
  line-height: 1;
  text-align: left;
  white-space: nowrap;
}
.sv-btn--dark .sv-btn__label--a,
.sv-btn--whatsapp .sv-btn__label--a {
  position: relative;
  z-index: 2;
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
.sv-btn--dark .sv-btn__label--b,
.sv-btn--whatsapp .sv-btn__label--b {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  justify-content: flex-start;
  z-index: 3;
  pointer-events: none;
  transform: translate3d(0, 100%, 0);
  opacity: 0;
}
.sv-btn--dark:hover .sv-btn__label--a,
.sv-btn--whatsapp:hover .sv-btn__label--a {
  animation: sv-cta-label-out var(--sv-cta-dur) var(--sv-cta-ease) forwards;
}
.sv-btn--dark:hover .sv-btn__label--b,
.sv-btn--whatsapp:hover .sv-btn__label--b {
  animation: sv-cta-label-in var(--sv-cta-dur) var(--sv-cta-ease) forwards;
}
/* Link-Farbe aus Base-Styles neutralisieren */
a.sv-btn--dark:hover,
a.sv-btn--whatsapp:hover {
  color: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .sv-btn--dark,
  .sv-btn--whatsapp {
    --sv-cta-dur: 0.08s;
  }
  .sv-btn--dark::before,
  .sv-btn--whatsapp::before {
    transition-duration: var(--sv-cta-dur);
  }
  .sv-btn--dark:hover .sv-btn__label--a,
  .sv-btn--dark:hover .sv-btn__label--b,
  .sv-btn--whatsapp:hover .sv-btn__label--a,
  .sv-btn--whatsapp:hover .sv-btn__label--b {
    animation: none;
  }
}
.sv-btn--blue { background: var(--sv-blue); color: #fff; padding-left: .45rem; }
.sv-btn--blue:hover { color: #fff; background: var(--sv-blue-600); box-shadow: 0 14px 32px rgba(13,122,255,.28); }

.sv-btn__icon {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--sv-blue);
  color: #fff;
  font-size: .85rem;
}
.sv-btn--blue .sv-btn__icon { background: var(--sv-navy-deep); }
.sv-btn__icon--right { order: 2; margin-left: .25rem; }

/* -------------------- Header -------------------- */
.sv-header {
  position: relative;
  z-index: 11;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background: transparent;
  color: var(--sv-ink);
  /* Weiße Menü-Leiste — mehr Abstand oben = Leiste sitzt tiefer */
  padding: var(--sv-header-pad-top) clamp(0.5rem, 2vw, 1.25rem) 0;
}
.sv-header.is-scrolled .sv-header__inner {
  border-color: var(--sv-line);
}
.sv-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  /* Etwas höhere Pille (Inhalt + Touch) */
  min-height: calc(var(--sv-header-inner-min-h) * 1.05 * 1.1 * 1.06);
  background: var(--sv-white);
  /* Kapsel / vollständig abgerundete Enden */
  border-radius: var(--sv-radius-pill);
  border: 1px solid var(--sv-line-2);
  /* Feine Innenlinie unten in Markenblau (8 %): verbindet die Pille optisch mit der Hero-Hairline */
  width: 100%;
  max-width: min(100%, calc(920px * 1.4 * 1.4 * 1.1 * 0.9 * 1.05 * 1.03));
  margin-inline: auto;
  overflow: visible;
}
/* Schmale Ansicht: volle Breite, keine Pillen; Leiste weiß */
@media (max-width: 991.98px) {
  .sv-header {
    --sv-header-pad-top: 0px;
    --sv-header-inner-min-h: clamp(52px, 8vw, 62px);
    padding: env(safe-area-inset-top, 0px) 0 0;
  }
  .sv-header__inner,
  .sv-header.is-scrolled .sv-header__inner {
    min-height: calc(var(--sv-header-inner-min-h) * 1.04 * 1.08 * 1.05);
    width: 100%;
    max-width: none;
    margin-inline: 0;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--sv-line);
    background: var(--sv-white);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 8px 24px rgba(5, 14, 28, 0.06);
  }
  .sv-logo--brand .sv-logo__img {
    height: clamp(34px, 5vw, 44px);
    max-width: min(230px, 60vw);
  }
  /* Hero: weiße Leiste; Navigation in Navy wie .sv-btn--dark */
  .sv-hero .sv-header {
    color: var(--sv-navy-deep);
    position: relative;
    z-index: 25;
  }
  .sv-hero .sv-header .sv-logo--brand .sv-logo__img {
    filter: none;
  }
  .sv-hero .sv-header .sv-logo--brand:hover .sv-logo__img {
    opacity: 0.92;
  }
  .sv-hero .sv-header .sv-header__menu {
    color: var(--sv-navy-deep);
  }
  .sv-hero .sv-header .sv-header__menu:hover {
    color: var(--sv-navy-800);
  }
  .sv-hero .sv-header .sv-nav__list a {
    color: var(--sv-navy-deep);
  }
  .sv-hero .sv-header .sv-nav__list a:hover {
    color: var(--sv-navy-800);
  }
  .sv-hero .sv-header .sv-nav__list a::after {
    background: var(--sv-navy-deep);
  }
  .sv-hero .sv-header .sv-header__search {
    color: var(--sv-navy-deep);
    border-color: var(--sv-line);
    background: var(--sv-white);
  }
  .sv-hero .sv-header .sv-header__search:hover {
    color: var(--sv-navy-800);
    background: var(--sv-bg-2);
    border-color: var(--sv-muted);
  }
  /* Schmal überall: Menü-Label + Suche in Navy wie CTA (.sv-btn--dark) */
  .sv-header__menu {
    color: var(--sv-navy-deep);
  }
  .sv-header__menu:hover {
    color: var(--sv-navy-800);
  }
  .sv-header__search {
    color: var(--sv-navy-deep);
    background: var(--sv-white);
    border-color: var(--sv-line);
  }
  .sv-header__search:hover {
    color: var(--sv-navy-800);
    background: var(--sv-bg-2);
    border-color: var(--sv-muted);
  }
}
@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
  .sv-header__inner,
  .sv-header.is-scrolled .sv-header__inner {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--sv-white);
  }
}
.sv-scroll-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 145;
  background: var(--sv-navy-deep);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 30px rgba(5, 14, 28, 0.18);
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    transform .46s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity .34s ease,
    visibility 0s linear .46s;
}
.sv-scroll-header.is-visible {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s, 0s, 0s;
}
.sv-scroll-header__inner {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  max-width: min(100%, calc(100vw - clamp(0rem, 0vw, 0rem)));
}
.sv-scroll-header .sv-nav__list {
  display: none;
  gap: clamp(0.55rem, 1vw, 1.2rem);
}
@media (min-width: 992px) {
  .sv-scroll-header .sv-nav__list {
    display: flex;
  }
}
.sv-scroll-header .sv-nav__list a {
  color: rgba(255, 255, 255, 0.82);
}
.sv-scroll-header .sv-nav__list a:hover {
  color: #fff;
}
.sv-scroll-header .sv-nav__list a::after {
  background: rgba(255, 255, 255, 0.72);
}
.sv-scroll-header .sv-header__actions {
  gap: 0.65rem;
}
.sv-scroll-header .sv-header__menu {
  color: rgba(255, 255, 255, 0.88);
}
.sv-scroll-header .sv-header__menu:hover {
  color: #fff;
}
/* Fixierte Leiste: Anruf wie zuvor (Desktop = voller .sv-btn--dark-Umfang) */
.sv-scroll-header__call.sv-btn {
  background: #fff;
  color: var(--sv-ink);
  border-color: rgba(255, 255, 255, 0.88);
  box-shadow: 0 14px 28px rgba(7, 20, 44, 0.12);
  font-size: 0.92rem;
  font-weight: 500;
}
.sv-scroll-header__call.sv-btn:hover,
.sv-scroll-header__call.sv-btn:focus-visible,
.sv-scroll-header__call.sv-btn:active {
  color: #fff;
}
.sv-scroll-header__call .sv-btn__body {
  gap: 0.8rem;
}
.sv-scroll-header__call .sv-btn__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sv-blue);
  color: #fff;
  line-height: 1;
}
.sv-scroll-header__call .sv-btn__label {
  color: inherit;
}
@media (max-width: 991.98px) {
  .sv-scroll-header__inner {
    min-height: 64px;
  }
  .sv-scroll-header .sv-logo__img {
    height: clamp(32px, 4.4vw, 40px);
    max-width: min(200px, 48vw);
  }
  /* Nur schmal: Anruf nur als runder Icon-Button (Desktop bleibt Pillen-CTA) */
  .sv-scroll-header__call.sv-btn.sv-btn--dark {
    width: 2.75rem;
    height: 2.75rem;
    min-width: 0;
    max-width: none;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    overflow: hidden;
    background: var(--sv-blue);
    color: #fff;
    box-shadow: 0 4px 14px rgba(13, 122, 255, 0.32);
    font-size: 0;
    isolation: isolate;
  }
  .sv-scroll-header__call.sv-btn.sv-btn--dark::before,
  .sv-scroll-header__call.sv-btn.sv-btn--dark:hover::before,
  .sv-scroll-header__call.sv-btn.sv-btn--dark:active::before {
    display: none !important;
  }
  .sv-scroll-header__call.sv-btn.sv-btn--dark:hover,
  .sv-scroll-header__call.sv-btn.sv-btn--dark:focus-visible,
  .sv-scroll-header__call.sv-btn.sv-btn--dark:active {
    background: var(--sv-blue-600);
    color: #fff;
    box-shadow: 0 6px 18px rgba(13, 122, 255, 0.4);
  }
  .sv-scroll-header__call.sv-btn.sv-btn--dark:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.92);
    outline-offset: 3px;
  }
  .sv-scroll-header__call .sv-btn__body {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-height: 0;
    gap: 0;
    padding: 0;
  }
  .sv-scroll-header__call .sv-btn__icon {
    width: auto;
    height: auto;
    font-size: 1rem;
    line-height: 1;
    border-radius: 0;
    background: transparent !important;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .sv-scroll-header__call .sv-btn__icon i {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }
  .sv-scroll-header__call .sv-btn__text-clip {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  .sv-scroll-header__call.sv-btn--dark:hover .sv-btn__label--a,
  .sv-scroll-header__call.sv-btn--dark:hover .sv-btn__label--b {
    animation: none !important;
  }
}
/* Desktop: schmaler rechter Innenrand — Menü + Anruf zur Pillen-Kante (mobil: volle Breite, s. @media ≤991.98px) */
.sv-header__inner.sv-container {
  padding-inline-end: clamp(0.55rem, 1.35vw, 1rem);
}
/* Menü / Scroll-Header: Gutter + --sv-header-pad-l-extra (Hero bleibt mit vollerem --sv-hero-copy-pad-l) */
@media (min-width: 992px) {
  .sv-header__inner.sv-container,
  .sv-container.sv-scroll-header__inner {
    padding-left: var(--sv-header-pad-l);
  }
  /* Pille: Navigation darf schrumpfen, CTA+Logo nicht; kein Zeilenumbruch in Link-Labels (z. B. «Über mich») */
  .sv-header__inner,
  .sv-container.sv-scroll-header__inner {
    gap: clamp(0.4rem, 0.7vw, 0.9rem);
  }
  .sv-header .sv-nav,
  .sv-scroll-header .sv-nav {
    min-width: 0;
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .sv-header .sv-nav__list,
  .sv-scroll-header .sv-nav__list {
    flex: 0 1 auto;
    min-width: 0;
  }
  .sv-header .sv-nav__list a,
  .sv-scroll-header .sv-nav__list a {
    white-space: nowrap;
  }
  .sv-header__actions,
  .sv-scroll-header .sv-header__actions {
    flex-shrink: 0;
  }
  .sv-header__inner .sv-logo--brand,
  .sv-container.sv-scroll-header__inner .sv-logo--brand {
    flex-shrink: 0;
  }
}
@media (min-width: 992px) and (max-width: 1349.98px) {
  .sv-header .sv-nav__list,
  .sv-scroll-header .sv-nav__list {
    gap: clamp(0.3rem, 0.45vw, 0.6rem);
  }
  .sv-header .sv-nav__list a,
  .sv-scroll-header .sv-nav__list a {
    font-size: 0.88rem;
  }
}
.sv-logo {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  color: inherit;
  font-family: var(--sv-font-display);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -.01em;
}
.sv-logo:hover { color: inherit; }
.sv-logo--brand {
  flex-shrink: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.sv-logo__mark {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--sv-blue);
  color: #fff;
  font-size: .85rem;
}
.sv-logo--light { color: #fff; }
.sv-logo__img {
  display: block;
  height: clamp(36px, 5vw, 48px);
  width: auto;
  max-width: min(220px, 55vw);
  object-fit: contain;
  object-position: left center;
}
.sv-logo--brand .sv-logo__img {
  height: clamp(38px, 5.2vw, 50px);
  max-width: min(240px, 62vw);
}
/* Schwarzes PNG auf dunklem Panel (Off-Canvas, Footer) */
.sv-logo--light .sv-logo__img {
  filter: brightness(0) invert(1);
}
.sv-logo--light:hover .sv-logo__img {
  opacity: 0.9;
}

.sv-nav__list {
  display: none;
  gap: clamp(0.55rem, 1.1vw, 1.35rem);
  align-items: center;
}
@media (min-width: 992px) { .sv-nav__list { display: flex; } }
@media (min-width: 992px) and (max-width: 1199.98px) {
  .sv-nav__list a {
    font-size: 0.92rem;
  }
}
.sv-nav__list a {
  color: var(--sv-text);
  font-weight: 500;
  font-size: 1rem;
  position: relative;
  padding: .25rem 0;
  transition: color .2s;
}
.sv-nav__list a:hover { color: var(--sv-ink); }
.sv-nav__list a::after {
  content: '';
  position: absolute; left: 0; bottom: -2px;
  width: 0; height: 2px; background: var(--sv-blue);
  transition: width .25s var(--sv-ease);
}
.sv-nav__list a:hover::after { width: 100%; }

.sv-header__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  overflow: visible;
}
.sv-header__search {
  display: inline-flex; align-items: center; gap: .6rem;
  color: var(--sv-ink);
  padding: .55rem 1.1rem .55rem .6rem;
  border: 1px solid var(--sv-line);
  border-radius: var(--sv-radius-pill);
  font-weight: 500; font-size: .9rem;
  background: var(--sv-bg);
  transition: background .2s, border-color .2s;
}
.sv-header__search i {
  display: grid; place-items: center;
  width: 26px; height: 26px;
  background: var(--sv-blue);
  border-radius: 50%;
  font-size: .7rem;
}
.sv-header__search:hover { background: var(--sv-bg-2); border-color: var(--sv-muted); }
.sv-header__search span { display: none; }
@media (min-width: 576px) { .sv-header__search span { display: inline; } }

.sv-header__menu {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--sv-ink);
  padding: 0.45rem 0.2rem;
  border-radius: 0;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
  transition: color 0.2s ease;
}
.sv-header__menu:hover {
  color: var(--sv-navy-800);
  /* Über Nachbar-CTA / Leiste, damit die Raute beim Hopfen nicht darunter liegt */
  position: relative;
  z-index: 100;
}
.sv-header__menu-text {
  display: inline;
}
/* Bento: drei abgerundete Quadrate + oben rechts Raute, dicke Outline-Kontur */
.sv-header__menu-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.4rem;
  /* Etwas höher als breit: Hüpfen (translateY) wird nicht am Flex-Rand abgeschnitten */
  min-height: 1.65rem;
  height: 1.65rem;
  color: inherit;
  overflow: visible;
  position: relative;
  z-index: 0;
}
.sv-header__menu:hover .sv-header__menu-icon {
  z-index: 1;
}
.sv-header__menu-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  /* Sonst clippt der ViewBox-Rand das Hüpfen (translateY) oben */
  overflow: visible;
}
/* Oben rechts: Position per SVG translate(24,8), Drehung per CSS — Hover: −45° = wie die anderen Quadrate */
.sv-header__menu-diamond-rot {
  transform: rotate(45deg);
  transform-origin: center;
  transform-box: fill-box;
  transition: transform 0.63s cubic-bezier(0.33, 1, 0.25, 1);
}
.sv-header__menu:hover .sv-header__menu-diamond-rot {
  transform: rotate(0deg);
}
@keyframes sv-header-menu-diamond-hop {
  0%,
  100% {
    transform: translateY(0);
  }
  28% {
    transform: translateY(-6.5px);
  }
  48% {
    transform: translateY(-1.5px);
  }
  68% {
    transform: translateY(-3.5px);
  }
  88% {
    transform: translateY(0);
  }
}
.sv-header__menu:hover .sv-header__menu-diamond-hop {
  animation: sv-header-menu-diamond-hop 0.63s cubic-bezier(0.34, 1.25, 0.55, 1) 1;
  /* Innerhalb des SVG über die drei Quadrate zeichnen (SVG2 / moderne Browser) */
  position: relative;
  z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
  .sv-header__menu:hover .sv-header__menu-diamond-hop {
    animation: none;
  }
  .sv-header__menu-diamond-rot,
  .sv-header__menu:hover .sv-header__menu-diamond-rot {
    transition: none;
    transform: rotate(0deg);
  }
}

/* -------------------- Offcanvas -------------------- */
.sv-offcanvas {
  position: fixed; inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: 1;
  visibility: hidden;
  transition: visibility 0s linear .42s;
}
.sv-offcanvas.is-open {
  pointer-events: auto;
  visibility: visible;
  transition-delay: 0s;
}
.sv-offcanvas__backdrop {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(233, 238, 244, 0.44) 0%, rgba(222, 229, 237, 0.38) 100%);
  opacity: 0;
  backdrop-filter: blur(0px) saturate(100%);
  -webkit-backdrop-filter: blur(0px) saturate(100%);
  transition:
    opacity .22s ease,
    backdrop-filter .34s ease,
    -webkit-backdrop-filter .34s ease;
}
.sv-offcanvas.is-open .sv-offcanvas__backdrop {
  opacity: 1;
  backdrop-filter: blur(10px) saturate(110%);
  -webkit-backdrop-filter: blur(10px) saturate(110%);
}
.sv-offcanvas__panel {
  position: absolute; top: 0; right: 0; height: 100%;
  /* Schmaler als zuvor (400px / 90vw), bleibt touch-tauglich */
  width: min(300px, 82vw);
  max-width: 100%;
  background: var(--sv-navy);
  color: #fff;
  display: flex; flex-direction: column;
  transform: translateX(110%);
  opacity: 0;
  transition:
    transform .38s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity .24s ease;
  padding: 2rem 1.35rem;
}
.sv-offcanvas.is-open .sv-offcanvas__panel {
  transform: translateX(0);
  opacity: 1;
  transition-delay: .12s, .12s;
}
.sv-offcanvas__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; }
.sv-offcanvas__close {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: #fff;
}
.sv-offcanvas__nav ul { display: flex; flex-direction: column; gap: .25rem; }
.sv-offcanvas__nav a {
  display: block;
  padding: .9rem 0;
  color: rgba(255,255,255,.82);
  font-size: 1.15rem;
  font-weight: 600;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.sv-offcanvas__nav a:hover { color: var(--sv-blue); }
.sv-offcanvas__foot { margin-top: auto; padding-top: 2rem; }
.sv-offcanvas__label { color: rgba(255,255,255,.5); font-size: .8rem; text-transform: uppercase; letter-spacing: .2em; margin-bottom: .75rem; }
.sv-offcanvas__link { display: block; color: #fff; font-weight: 600; padding: .25rem 0; }

/* Scroll-Sperre (Body) bei geöffnetem Offcanvas / Modal – iOS-Safari-sicher */
html.sv-scroll-locked,
body.sv-scroll-locked {
  overflow: hidden !important;
  overscroll-behavior: contain;
}
body.sv-scroll-locked {
  position: fixed;
  inset-inline: 0;
  width: 100%;
  /* top wird per JS auf -scrollY gesetzt, damit die Scroll-Position erhalten bleibt */
}
/* Panel selbst darf scrollen, falls Inhalt länger als Viewport */
.sv-offcanvas__panel {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
}

/* Mobile: kompakteres Offcanvas (schmaleres Panel, engere Typo/Paddings) */
@media (max-width: 767.98px) {
  .sv-offcanvas__panel {
    width: min(268px, 78vw);
    padding: 1.35rem 1.1rem;
  }
  .sv-offcanvas__head {
    margin-bottom: 1.25rem;
  }
  .sv-offcanvas__head .sv-logo__img {
    width: 160px;
    height: auto;
  }
  .sv-offcanvas__close {
    width: 36px;
    height: 36px;
    font-size: 0.95rem;
  }
  .sv-offcanvas__nav a {
    padding: .65rem 0;
    font-size: 1rem;
  }
  .sv-offcanvas__foot {
    padding-top: 1.25rem;
  }
  .sv-offcanvas__label {
    font-size: .72rem;
    margin-bottom: .5rem;
  }
  .sv-offcanvas__link {
    font-size: .95rem;
    padding: .2rem 0;
  }
}

/* ==================== Hero ==================== */
.sv-hero {
  position: relative;
  z-index: 2;
  background-color: #ffffff;
  padding: 0;
  margin-bottom: clamp(-3.75rem, -7.5vw, -6rem);
  overflow: visible;
  margin-top: 0;
}
/* Ein heller, technischer Silber-/Grau-Verlauf im Hero */
.sv-hero::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: calc(clamp(2.35rem, 4.2vw, 3.5rem) + clamp(36px, 3.8vw, 52px) - 32px);
  left: 0;
  z-index: 0;
  background:
    linear-gradient(0deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.18) 14%, rgba(255, 255, 255, 0) 28%),
    linear-gradient(0deg, #fafbfd 0%, #edf1f5 22%, #dfe5eb 50%, #d3dbe3 74%, #f0f3f7 100%);
  pointer-events: none;
}
.sv-hero__wrap {
  display: grid;
  position: relative;
  z-index: 1;
  --sv-hero-chamfer: clamp(24px, 3.2vw, 42px);
  --sv-hero-content-shift: 0px;
  padding-inline: clamp(0rem, 0.35vw, 0.3rem);
}
/* Mobil / Tablet: Bild voll, darunter .sv-hero__copy (H1, Leads, CTAs, Vorteile in einem Fluss) */
@media (max-width: 991.98px) {
  /*
    Zug nach oben = gleiche Logik wie .sv-header (narrow) + .sv-header__inner min-height,
    damit die Bildoberkante mit dem Hero-Sektionsanfang bündig ist und die Kapsel darüber liegt.
  */
  .sv-hero {
    --sv-hero-under-menu-pull: calc(
      env(safe-area-inset-top, 0px) +
      calc(clamp(52px, 8vw, 62px) * 1.04 * 1.08 * 1.05)
    );
  }
  /* Bild volle Viewport-Breite; Ränder nur bei Text + Vorteile */
  .sv-container.sv-hero__wrap {
    padding-inline: 0;
  }
  .sv-hero__wrap {
    /* Größere 45°-Fase oben links am Hero-Bild (clip-path auf .sv-hero__figure-card) */
    --sv-hero-chamfer: clamp(32px, 4.6vw, 58px);
    position: relative;
    z-index: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    /* Vorteile in .sv-hero__copy unter den CTAs — keine dritte Grid-Zeile, kein margin-Hochziehen nötig */
    grid-template-areas:
      "visual"
      "copy";
  }
  .sv-hero__visual {
    grid-area: visual;
    position: relative;
    z-index: 0;
    width: 100vw;
    max-width: none;
    /* Etwas weniger Zug nach oben = Bildblock sitzt tiefer unter der Leiste */
    margin-top: calc(-1 * var(--sv-hero-under-menu-pull) + clamp(2.2rem, 6.2vw, 3.6rem));
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}
/* Wichtig: .sv-hero__wrap ersetzt sonst .sv-hero-Container-Padding: nur ~0,3rem statt --sv-gutter-x; Cap wäre sonst viel zu groß. */
@media (min-width: 992px) {
  .sv-container.sv-hero__wrap {
    padding-inline: var(--sv-gutter-x);
  }
  .sv-hero__wrap {
    /* Eine Zeile: Text inkl. Vorteile in «copy» | «visual»; keine zweite Zeile, kein CTA-Overlap bei Zoom */
    grid-template-columns: 1.42fr 1.08fr;
    grid-template-rows: auto;
    grid-template-areas: "copy visual";
    row-gap: 0;
    --sv-hero-content-shift: clamp(12px, 1.4vw, 24px);
    /* Abstand Copy ↔ Bild: klar trennen, Kante wirkt sonst «überlagernd» */
    column-gap: clamp(0.5rem, 1.1vw, 1.5rem);
  }
}
/* Rechte Spalte: bei mittlerer Breite schmaler, Bild wirkt höher (Höhe über vh, nicht nur vw) */
@media (min-width: 992px) and (max-width: 1439.98px) {
  .sv-hero__wrap {
    grid-template-columns: 1.5fr 0.88fr;
  }
  .sv-hero__visual {
    /* max( vh, vw+rem ): kleiner skalierend wächst die Höhe per Viewport-Höhe, Spalte bleibt schmaler */
    min-height: clamp(
      520px,
      max(70vh, calc(100vw * 0.42 + 3.5rem)),
      820px
    );
  }
}
.sv-hero__copy {
  grid-area: copy;
  position: relative;
  z-index: 2;
  isolation: isolate;
  min-width: 0;
  /* Oberkante Textspalte = unterhalb Header; kompakter = Block weiter nach oben */
  --sv-hero-copy-pad-top: calc(clamp(0.05rem, 0.35vw, 0.22rem) + clamp(1.85rem, 3.8vw, 3.35rem));
  padding-bottom: clamp(1.5rem, 3vw, 2.75rem);
  padding-top: var(--sv-hero-copy-pad-top);
}
@media (max-width: 991.98px) {
  /* Copy steht unter dem Bild: normales oberes Padding (kein Abstand zur Menü-Kapsel nötig) */
  .sv-hero__copy {
    padding-top: clamp(1.05rem, 3.2vw, 1.6rem);
    /* Mehr Innenabstand links (Mobil/Tablet) */
    padding-left: max(
      env(safe-area-inset-left, 0px),
      var(--sv-hero-copy-pad-l-narrow)
    );
    padding-right: max(env(safe-area-inset-right, 0px), var(--sv-gutter-x));
  }
}
.sv-hero__copy::before { content: none; }
.sv-hero__copy > * {
  position: relative;
  z-index: 1;
}
@media (min-width: 992px) {
  .sv-hero__copy {
    z-index: 8;
    min-width: 0;
    /* Max. sicherer Linkszug: Rand zentrierten 1280er-Blocks + 1× Gutter (s. .sv-container.sv-hero__wrap) */
    --sv-hero-pull-cap: max(
      0px,
      calc(
        (100vw - min(100vw, var(--sv-container))) / 2
        + var(--sv-gutter-x)
        + env(safe-area-inset-left, 0px)
        - 0.1rem
      )
    );
    /* Immer exakt die Cap: volle optische Bündung links; früher begrenzten %/rem-Werte künstlich darunter */
    margin-left: calc(-1 * var(--sv-hero-pull-cap));
    /* Mehr Luft links im Textblock (Innenabstand) – Zug (margin) bleibt, Inhalt rückt sichtbar ein */
    padding-left: max(
      env(safe-area-inset-left, 0px),
      var(--sv-hero-copy-pad-l)
    );
    padding-right: clamp(1.5rem, 3vw, 3rem);
    overflow-wrap: break-word;
  }
}
/* Visual: rechte Spalte - Bild (unter .sv-hero__copy, damit keine falsche Überlagerung) */
.sv-hero__visual {
  grid-area: visual;
  position: relative;
  z-index: 0;
  min-height: clamp(320px, 52vw, 500px);
}
@media (min-width: 992px) {
  .sv-hero__visual {
    --sv-hero-bleed: calc(
      (100vw - min(100vw, var(--sv-container))) / 2 +
      clamp(1rem, 2.5vw, 2rem)
    );
    /* Bild auf Desktop bündig zur Hero-Oberkante ziehen (hinter die Header-Pille).
       Wert = komplette Header-Höhe (Formel identisch zu .sv-header__inner). */
    --sv-hero-desk-pull: calc(clamp(58px, 9vw, 72px) * 1.05 * 1.1 * 1.06);
    grid-row: 1;
    align-self: start;
    /* Bildhöhe Desktop: etwas imposanter (Größenzug) */
    min-height: clamp(500px, 64vw, 860px);
    overflow: visible;
    width: calc(100% + var(--sv-hero-bleed));
    margin-top: calc(-1 * var(--sv-hero-desk-pull));
    margin-right: calc(-1 * var(--sv-hero-bleed));
  }
}

/* Kicker als feine Themen-Zeile statt Badge */
.sv-hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--sv-blue);
  font-size: .79rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0 0 .95rem;
  max-width: 100%;
}
.sv-hero__kicker::before {
  content: "";
  /* Kleiner 45°-Diamant statt schlichter 1px-Linie — Formsprache der dunklen Box / des Primary-CTA */
  width: clamp(8px, 0.9vw, 11px);
  height: clamp(8px, 0.9vw, 11px);
  background: currentColor;
  opacity: .8;
  transform: rotate(45deg);
  border-radius: 1px;
  flex: 0 0 auto;
}
.sv-hero__kicker i {
  font-size: .82rem;
  opacity: .9;
}

/* Trust-Badge über der Headline — 45°-Fase (Theme) */
.sv-hero__badge {
  display: inline-flex;
  align-items: flex-start;
  gap: .62rem;
  padding: .56rem .95rem .54rem .82rem;
  margin: 0 0 clamp(0.85rem, 1.4vw, 1.15rem);
  background: linear-gradient(180deg, rgba(8, 17, 34, 0.97) 0%, rgba(8, 17, 34, 0.92) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .025em;
  line-height: 1.16;
  clip-path: polygon(
    var(--sv-chamfer-sm) 0,
    100% 0,
    100% calc(100% - var(--sv-chamfer-sm)),
    calc(100% - var(--sv-chamfer-sm)) 100%,
    0 100%,
    0 var(--sv-chamfer-sm)
  );
  -webkit-clip-path: polygon(
    var(--sv-chamfer-sm) 0,
    100% 0,
    100% calc(100% - var(--sv-chamfer-sm)),
    calc(100% - var(--sv-chamfer-sm)) 100%,
    0 100%,
    0 var(--sv-chamfer-sm)
  );
  position: relative;
  z-index: 2;
  max-width: min(100%, 31.5rem);
  box-shadow: 0 10px 24px rgba(8, 17, 34, 0.18);
}
.sv-hero__badge i {
  color: var(--sv-blue);
  font-size: .88rem;
  margin-top: .12rem;
}
.sv-hero__badge-copy {
  display: grid;
  gap: .14rem;
}
.sv-hero__badge-copy > span:first-child {
  color: rgba(255, 255, 255, 0.96);
}
.sv-hero__badge-copy > span:last-child {
  color: rgba(136, 190, 255, 0.9);
  font-size: .84em;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Badge mobil ausblenden — nach Basis-.sv-hero__badge, sonst überschreibt display:inline-flex das display:none */
@media (max-width: 991.98px) {
  .sv-hero .sv-hero__badge {
    display: none !important;
  }
}

.sv-hero__title {
  /* Fließt mit der Fensterbreite (min + vw), kein Hängen an festen Stufen */
  font-size: clamp(1.65rem, 0.55rem + 3.5vw, 4.3rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.045em;
  text-align: left;
  margin: 0 0 0.7rem;
  color: var(--sv-ink);
  max-width: 100%;
  padding-right: 0.08em;
  padding-bottom: 0.12em;
}
@media (max-width: 767.98px) {
  .sv-hero__title {
    font-size: clamp(2.15rem, 0.4rem + 5.2vw, 3.1rem);
    line-height: 1.07;
  }
}
.sv-hero__title-line {
  display: block;
  color: var(--sv-ink);
}
.sv-hero__title-line + .sv-hero__title-line {
  margin-top: clamp(0.25rem, 0.65vw, 0.55rem);
  /* Zweite Zeile setzt sich klar ab: kleiner, leichter, in Standard-Ink */
  font-size: 0.78em;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--sv-text);
}
/* Hero-H1: beide sichtbaren Titelzeilen sollen typografisch eine Einheit bilden
   (sonst „klebt“ Worttrennung + Letter-Animation unschön an riesigen Lücken) */
.sv-hero__title-line--head2 {
  font-size: 1em;
  font-weight: 800;
  letter-spacing: -.045em;
  color: var(--sv-ink);
}
.sv-hero__title-accent {
  color: var(--sv-blue);
}

/* Hero-Intro: nur opacity + transform (Compositor) — kein blur/skew in Keyframes (sonst starkes Ruckeln) */
@keyframes svHeroRevealRise {
  0% { opacity: 0; transform: translate3d(0, 28px, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes svHeroTitleChar {
  0% { opacity: 0; transform: translate3d(0, 0.38em, 0) scale(0.97); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes svHeroFigure {
  0% { opacity: 0; transform: translate3d(32px, 0, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes svHeroHex {
  0% { opacity: 0; transform: translate3d(56px, 18px, 0) scale(0.82) rotate(-4deg); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
}

.sv-js .sv-hero__reveal,
.sv-js .sv-hero__reveal--rise {
  transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(.16, .84, .24, 1);
  transition-delay: var(--sv-hero-reveal-delay, 0s);
  will-change: opacity, transform;
}
.sv-js .sv-hero__reveal {
  transition-duration: 1.15s;
}
.sv-js .sv-hero__reveal--rise {
  transition-duration: 1.35s;
}
.sv-js .sv-hero__wrap .sv-hero__reveal--rise {
  transition: none;
  transition-property: none;
}
.sv-js:not(.sv-hero-animate) .sv-hero__reveal {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
}
.sv-js:not(.sv-hero-animate) .sv-hero__reveal--rise {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
}
.sv-js:not(.sv-hero-animate) .sv-hero__wrap .sv-hero__reveal--rise {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
}
.sv-js.sv-hero-animate .sv-hero__reveal:not(.sv-hero__reveal--rise) {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.sv-js.sv-hero-animate .sv-hero__wrap .sv-hero__reveal--rise {
  animation: svHeroRevealRise var(--sv-hero-reveal-duration, 2.75s) cubic-bezier(.22, 1, .36, 1) var(--sv-hero-reveal-delay, 0s) both;
  will-change: opacity, transform;
}
.sv-js .sv-hero__title-line--script {
  overflow: visible;
  padding-right: 0.06em;
  padding-bottom: 0.14em;
}
.sv-js .sv-hero__title-char {
  display: inline-block;
  transition: none;
  transition-property: none;
  will-change: opacity, transform;
}
.sv-js .sv-hero__title-char--accent {
  color: var(--sv-blue);
}
.sv-js:not(.sv-hero-animate) .sv-hero__title-char {
  opacity: 0;
  transform: translate3d(0, 0.38em, 0) scale(0.97);
}
.sv-js.sv-hero-animate .sv-hero__title-char {
  animation: svHeroTitleChar var(--sv-hero-intro-duration, 2.75s) cubic-bezier(.22, 1, .36, 1) var(--sv-char-delay, 0ms) both;
}
.sv-js .sv-hero__figure {
  transition: none;
  transition-property: none;
  will-change: opacity, transform;
}
.sv-js:not(.sv-hero-animate) .sv-hero__figure {
  opacity: 0;
  transform: translate3d(32px, 0, 0);
}
.sv-js.sv-hero-animate .sv-hero__figure {
  animation: svHeroFigure var(--sv-hero-visual-duration, 2.75s) cubic-bezier(.22, 1, .36, 1) var(--sv-hero-visual-delay, 0ms) both;
}
.sv-hero__lead {
  /* Dunkler/klarer als vorher (#46566f) — direkt rgba, damit Accent (.sv-hero__lead-accent) nicht ausgeblendet wird */
  color: rgba(10, 22, 40, .82);
  font-size: clamp(0.94rem, 0.28rem + 0.95vw, 1.14rem);
  line-height: 1.62;
  font-weight: 400;
  margin: 0 0 0.85rem;
  max-width: 44rem;
}
.sv-hero__lead-accent {
  color: var(--sv-blue);
  font-weight: 700;
  font-size: clamp(0.95rem, 0.3rem + 0.9vw, 1.16rem);
  line-height: 1.5;
  letter-spacing: -0.01em;
}

/* Lead ohne Panel-Optik */
.sv-hero__split {
  display: grid;
  gap: clamp(0.4rem, 0.9vw, 0.7rem);
  margin: clamp(0.35rem, 0.9vw, 0.7rem) 0 clamp(1.05rem, 1.85vw, 1.5rem);
}
.sv-hero__split .sv-hero__lead {
  margin: 0;
  max-width: min(100%, clamp(30rem, 54vw, 44rem));
}
.sv-hero__split .sv-hero__lead:first-child {
  font-weight: 700;
  font-size: clamp(0.98rem, 0.3rem + 1.1vw, 1.3rem);
  line-height: 1.48;
}
@media (min-width: 992px) {
  .sv-hero__split .sv-hero__lead:first-child {
    max-width: none;
    white-space: nowrap;
  }
}
/* Lange Fließzeile: bei schmalerem Zwei-Spalten-Hero umbrechen statt horizontal abschneiden */
@media (min-width: 992px) and (max-width: 1280.98px) {
  .sv-hero__split .sv-hero__lead:first-child {
    white-space: normal;
  }
}
.sv-hero__split .sv-hero__lead + .sv-hero__lead {
  font-size: clamp(0.92rem, 0.25rem + 0.9vw, 1.08rem);
  line-height: 1.62;
}

/* Actions */
.sv-hero__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.95rem 1.2rem;
  margin-top: clamp(1.75rem, 3.2vw, 3.15rem);
  /* Unten: Abstand bis zur Vorteils-Box (verhindert Überdecken der CTAs) */
  margin-bottom: clamp(0.5rem, 1.2vw, 1rem);
}
/* Hero: CTAs etwas größer (nur diese Zeile, nicht global) */
.sv-hero__actions > .sv-btn--dark,
.sv-hero__actions > .sv-btn--whatsapp {
  --sv-cta-icon: clamp(46px, 2.2vw + 32px, 54px);
  --sv-cta-icon-fs: clamp(0.92rem, 0.2rem + 0.5vw, 1.02rem);
  font-size: clamp(1rem, 0.35rem + 0.65vw, 1.14rem);
  border-width: 6px;
}
.sv-hero__actions > .sv-btn--dark .sv-btn__body,
.sv-hero__actions > .sv-btn--whatsapp .sv-btn__body {
  gap: 0.9rem;
}
.sv-hero__actions > .sv-btn--dark {
  min-width: min(100%, clamp(11.5rem, 4rem + 22vw, 17rem));
}
.sv-hero__actions > .sv-btn--whatsapp {
  min-width: min(100%, clamp(10.5rem, 3.5rem + 18vw, 14.65rem));
}
@media (min-width: 992px) {
  .sv-hero__actions {
    /* Etwas mehr Luft bis zur hochgezogenen Vorteilskarte (verringert CTA-Überdeckungsrisiko) */
    margin-bottom: clamp(0.6rem, 1.1vw, 1.1rem);
    width: 100%;
    max-width: 100%;
    justify-content: flex-start;
    box-sizing: border-box;
  }
}
@media (max-width: 991.98px) {
  /* Bild näher an die CTAs: weniger Luft unter der Button-Zeile */
  .sv-hero__copy {
    padding-bottom: clamp(0.5rem, 1.75vw, 1rem);
  }
  .sv-hero__actions {
    margin-bottom: clamp(0.4rem, 1.5vw, 0.95rem);
  }
  /* Tablet / schmal: CTAs stapeln, fester min-width würde über den Rand laufen */
  .sv-hero__actions {
    width: 100%;
    max-width: 100%;
  }
  .sv-hero__actions > .sv-btn--dark,
  .sv-hero__actions > .sv-btn--whatsapp {
    min-width: 0;
    width: 100%;
    max-width: min(22.5rem, 100%);
  }
}
/* Tablet: H1 an schmale Breite gekoppelt (eigener Deckel, klar lesbar) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .sv-hero__title {
    font-size: clamp(1.95rem, 0.55rem + 2.8vw, 2.85rem);
    line-height: 1.08;
  }
}
.sv-hero__google {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--sv-text);
  font-size: clamp(0.88rem, 0.2rem + 0.65vw, 0.98rem);
  font-weight: 600;
  text-decoration: none;
  transition: color .2s, transform .18s var(--sv-ease);
}
.sv-hero__google:hover {
  color: var(--sv-ink);
  transform: translateY(-1px);
}
.sv-hero__google .fa-google {
  color: #4285F4;
  font-size: 1rem;
}

/* Vorteils-Karte: in .sv-hero__copy nach den CTAs (Desktop: eine Spalte, kein Negativ-Margin-Hochzug) */
.sv-hero__features {
  min-width: 0;
  margin: clamp(0.35rem, 1vw, 0.75rem) 0 0;
  max-width: min(100%, 31.5rem);
  width: 100%;
  position: relative;
  isolation: isolate;
  z-index: 1;
  overflow: visible;
  /* 45°-Fasen oben rechts + unten links (Karte); breiter als Badge/CTA */
  --sv-hero-features-chamfer: clamp(18px, 2.65vw, 32px);
  /* Einfacher Außenschatten (kein Pseudo mit grauer Fläche); clip-path-tauglich */
  filter: drop-shadow(0 8px 20px rgba(10, 22, 40, 0.09))
    drop-shadow(0 2px 7px rgba(10, 22, 40, 0.055));
}

@media (max-width: 991.98px) {
  .sv-hero__features {
    position: relative;
    z-index: 4;
    /* Abstand nach CTAs; kein neg. Zug (Inhalt in .sv-hero__copy) */
    margin-top: clamp(0.7rem, 1.35vw, 1.15rem);
    /* Doppelter Gutter: padding kommt von .sv-hero__copy */
    padding-inline: 0;
  }
}

@media (min-width: 992px) {
  .sv-hero__features {
    /* Fester Abstand zu CTAs; volle Spaltenbreite wie H1/Lead — gleiche linke Kante, kein Extra-Bleed */
    margin-top: clamp(1rem, 1.5vw, 1.85rem);
    padding-left: 0;
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    z-index: 1;
  }
  .sv-hero__highlights {
    padding:
      calc(var(--sv-hero-features-chamfer) * 0.24)
      calc(var(--sv-hero-features-chamfer) * 0.34)
      calc(var(--sv-hero-features-chamfer) * 0.26)
      calc(var(--sv-hero-features-chamfer) * 0.44);
  }
  .sv-hero__highlights li {
    padding: clamp(0.38rem, 0.78vw, 0.52rem) clamp(0.52rem, 0.98vw, 0.7rem);
    gap: 0.62rem;
  }
}
.sv-hero__highlights {
  list-style: none;
  margin: 0;
  /* Ausgleich zur clip-path-Fase: Inhalt etwas nach innen (v. a. rechts oben, unten links) */
  padding:
    calc(var(--sv-hero-features-chamfer) * 0.34)
    calc(var(--sv-hero-features-chamfer) * 0.4)
    calc(var(--sv-hero-features-chamfer) * 0.34)
    calc(var(--sv-hero-features-chamfer) * 0.54);
  border: 0;
  border-radius: 0;
  background: var(--sv-white);
  position: relative;
  z-index: 1;
  box-shadow: none;
  clip-path: polygon(
    0 0,
    calc(100% - var(--sv-hero-features-chamfer)) 0,
    100% var(--sv-hero-features-chamfer),
    100% 100%,
    var(--sv-hero-features-chamfer) 100%,
    0 calc(100% - var(--sv-hero-features-chamfer))
  );
  -webkit-clip-path: polygon(
    0 0,
    calc(100% - var(--sv-hero-features-chamfer)) 0,
    100% var(--sv-hero-features-chamfer),
    100% 100%,
    var(--sv-hero-features-chamfer) 100%,
    0 calc(100% - var(--sv-hero-features-chamfer))
  );
  overflow: hidden;
}
/* Mobil: keine Fase — rechteckige Karte (Desktop behält clip-path mit Fasen) */
@media (max-width: 991.98px) {
  .sv-hero__highlights {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    padding: clamp(0.55rem, 1.1vw, 0.72rem) clamp(0.68rem, 1.25vw, 0.88rem);
  }
}
.sv-hero__highlights li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.72rem;
  margin: 0;
  padding: clamp(0.52rem, 1.02vw, 0.66rem) clamp(0.68rem, 1.2vw, 0.82rem);
  border-bottom: 1px solid rgba(10, 22, 40, 0.055);
  font-size: clamp(0.86rem, 0.25rem + 0.75vw, 1.04rem);
  line-height: 1.46;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: rgba(10, 22, 40, 0.84);
}
.sv-hero__highlights li:last-child {
  border-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  .sv-hero__reveal--rise {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
    animation: none;
  }
  .sv-hero__title-char {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
    animation: none;
  }
  .sv-hero__reveal {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}
.sv-hero__highlights-ic {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  align-self: center;
  width: 1.45rem;
  height: 1.45rem;
  margin-top: 0;
  border-radius: var(--sv-radius-sm);
  color: #fff;
  font-size: 0.46rem;
  background: var(--sv-blue);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 2px 8px rgba(23, 111, 227, 0.2);
}
.sv-hero__highlights li .sv-hero__highlights-ic,
.sv-hero__highlights li:last-child .sv-hero__highlights-ic {
  background: var(--sv-blue);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 2px 8px rgba(23, 111, 227, 0.2);
}
.sv-hero__highlights-ic i {
  display: block;
  line-height: 1;
  transform: translateY(0.01em);
}
.sv-hero__highlights-txt {
  display: block;
  padding-top: 0.14em;
  font-family: var(--sv-font-display);
  font-weight: 500;
}
.sv-hero__highlights-txt--heavy {
  font-weight: 800;
  letter-spacing: -0.01em;
}
.sv-hero__highlights-accent {
  color: var(--sv-blue);
  font-weight: 600;
}

/* Hero rechts: ein grosses Bild fuellt die Visual-Spalte komplett */
.sv-hero__arch {
  display: none;
}
.sv-hero__figure {
  position: relative;
  z-index: 2;
  width: min(100%, 480px);
  margin: clamp(.5rem, 1.8vw, 1.2rem) 0 0 auto;
}
@media (min-width: 992px) {
  .sv-hero__figure {
    --sv-hero-figure-drop: clamp(10px, 1.25vw, 22px);
    position: absolute;
    top: calc(-1 * var(--sv-header-stack-h) + var(--sv-hero-figure-drop));
    right: 0;
    left: 0;
    width: 100%;
    /* Volle Höhe der Bildspalte (Grid-Zeile = linke Spalte inkl. Vorteilsbox), plus Auszug nach oben in den Header */
    height: calc(100% + var(--sv-header-stack-h) - var(--sv-hero-figure-drop));
    margin: 0;
    /* Weicher, mehrschichtiger Schatten – folgt dem clip-path (45°-Fase unten links) dank drop-shadow */
    filter:
      drop-shadow(0 28px 48px rgba(8, 17, 34, 0.22))
      drop-shadow(0 10px 18px rgba(8, 17, 34, 0.14))
      drop-shadow(0 2px 6px rgba(8, 17, 34, 0.08));
  }
}
.sv-hero__figure-card {
  position: relative;
  width: 100%;
  isolation: isolate;
  overflow: hidden;
  /* kein 45°-Schnitt oben links; Desktop s. @media (min-width:992) */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
@media (min-width: 992px) {
  .sv-hero__figure-card {
    height: 100%;
    clip-path: polygon(
      0 0,
      100% 0,
      100% 100%,
      var(--sv-hero-chamfer) 100%,
      0 calc(100% - var(--sv-hero-chamfer))
    );
    -webkit-clip-path: polygon(
      0 0,
      100% 0,
      100% 100%,
      var(--sv-hero-chamfer) 100%,
      0 calc(100% - var(--sv-hero-chamfer))
    );
  }
}
/* Hero-Bild: gleicher Verlauf wie die anderen Bildbereiche */
.sv-hero__figure-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(52, 162, 255, 0.1) 0%,
    rgba(18, 118, 217, 0.24) 38%,
    rgba(12, 63, 140, 0.76) 72%,
    rgba(4, 28, 76, 0.96) 100%
  );
  mix-blend-mode: multiply;
  z-index: 2;
}
/* Zusatz-Overlay deaktiviert: Verlauf sitzt komplett in ::before */
.sv-hero__figure-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: none;
  z-index: 3;
}
.sv-hero__figure-photo {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  object-position: center 30%;
  filter: saturate(0.78);
}
@media (max-width: 991.98px) {
  .sv-hero__visual {
    min-height: 0;
  }
  /* Nach Basis-.sv-hero__figure: volle Breite, kein Abstand nach oben (Bild direkt unter Menü-Kapsel) */
  .sv-hero__figure {
    width: 100%;
    max-width: none;
    margin: 0;
    z-index: 0;
  }
  /* Mobil: gleiche Blau-Tonung wie Fahrzeugtypen (.sv-offers__media::after), 180deg oben → unten */
  .sv-hero__figure-card::before {
    background: linear-gradient(
      180deg,
      rgba(52, 162, 255, 0.06) 0%,
      rgba(18, 118, 217, 0.16) 38%,
      rgba(12, 63, 140, 0.68) 72%,
      rgba(4, 28, 76, 0.92) 100%
    );
    mix-blend-mode: multiply;
    -webkit-mask-image: linear-gradient(180deg, #0000 0%, #0000 32%, #fff 58%, #fff 100%);
    mask-image: linear-gradient(180deg, #0000 0%, #0000 32%, #fff 58%, #fff 100%);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
  /* Etwas höher als 4/3, kleiner skalierend: Höhe wächst mit vh, nicht voll 100vw-breit wirkt niedriger */
  .sv-hero__figure-photo {
    aspect-ratio: 3 / 4;
    max-height: min(58vh, 400px);
    object-position: center 28%;
    filter: none;
  }
}
@media (min-width: 992px) {
  .sv-hero__figure-photo {
    aspect-ratio: unset;
    height: 100%;
    object-position: 50% 12%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sv-hero__features {
    isolation: isolate;
  }
  .sv-js:not(.sv-hero-animate) .sv-hero__figure,
  .sv-js.sv-hero-animate .sv-hero__figure {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
    will-change: auto;
  }
}

/* ============================================================ */
/* ========= MOBILE HERO REFINEMENT (≤767.98px only) ========== */
/* ============================================================ */

/* Desktop / Tablet: Mobile-only Rating-Badge ausblenden */
.sv-hero__rating { display: none; }

@media (max-width: 767.98px) {
  /* Features: offene, editoriale Liste — keine Box, keine Trennlinien */
  .sv-hero__features {
    margin-top: 1.65rem;
    padding-inline: 0;
    filter: none;
  }

  .sv-hero__highlights {
    background: transparent;
    clip-path: none;
    -webkit-clip-path: none;
    padding: 0;
    overflow: visible;
  }

  .sv-hero__highlights li {
    padding: 0.7rem 0;
    border-bottom: 0;
    gap: 0.7rem;
    font-size: 0.96rem;
    line-height: 1.5;
    color: rgba(10, 22, 40, 0.82);
  }
  .sv-hero__highlights li:first-child { padding-top: 0.15rem; }
  .sv-hero__highlights li:last-child  { padding-bottom: 0.15rem; }

  /* Icons dezenter, aber Blau-Touch klar erkennbar */
  .sv-hero__highlights li .sv-hero__highlights-ic,
  .sv-hero__highlights li:last-child .sv-hero__highlights-ic {
    width: 1.3rem;
    height: 1.3rem;
    background: rgba(13, 122, 255, 0.22);
    color: var(--sv-blue);
    font-size: 0.5rem;
    box-shadow: none;
    border-radius: 0.42rem;
  }

  /* Lead / Fließtext in der Liste konsistent ohne „--heavy"-Schwergewicht */
  .sv-hero__highlights-txt { font-weight: 500; }
  .sv-hero__highlights-txt--heavy { font-weight: 500; letter-spacing: 0; }
  .sv-hero__highlights-accent { font-weight: 700; }

  /* --- CTA-Block: voll stacked, Primary + Secondary --- */
  .sv-hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
    margin-top: clamp(1.1rem, 3vw, 1.6rem);
    margin-bottom: 0.4rem;
  }
  .sv-hero__actions > .sv-btn--dark,
  .sv-hero__actions > .sv-btn--whatsapp {
    width: 100%;
    min-width: 0;
    border-width: 3px;
    font-size: 1.02rem;
    --sv-cta-icon: 44px;
    --sv-cta-icon-fs: 0.95rem;
  }
  .sv-hero__actions > .sv-btn--dark .sv-btn__body,
  .sv-hero__actions > .sv-btn--whatsapp .sv-btn__body {
    gap: 0.7rem;
  }

  /* WhatsApp zum Secondary umstylen: Outline/Ghost, grüner Icon-Kreis bleibt */
  .sv-hero__actions > .sv-btn--whatsapp {
    background-color: #fff;
    color: var(--sv-navy-deep);
    border-color: rgba(10, 22, 40, 0.18);
    box-shadow: 0 2px 10px rgba(10, 22, 40, 0.04);
  }
  .sv-hero__actions > .sv-btn--whatsapp .sv-btn__label--a,
  .sv-hero__actions > .sv-btn--whatsapp .sv-btn__label--b {
    color: var(--sv-navy-deep);
  }
  .sv-hero__actions > .sv-btn--whatsapp:hover {
    color: #fff;
  }
  .sv-hero__actions > .sv-btn--whatsapp:hover .sv-btn__label--a,
  .sv-hero__actions > .sv-btn--whatsapp:hover .sv-btn__label--b {
    color: #fff;
  }

  /* Alten Text-Google-Link ausblenden, dafür dezente Rating-Zeile */
  .sv-hero__actions > .sv-hero__google {
    display: none;
  }
  .sv-hero__rating {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    align-self: center;
    margin-top: 0.9rem;
    margin-bottom: 1.1rem;
    padding: 0.1rem 0.15rem;
    background: transparent;
    border: 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--sv-text);
    text-decoration: none;
    line-height: 1;
    transition: color .18s var(--sv-ease);
  }
  .sv-hero__rating:hover { color: var(--sv-ink); }
  .sv-hero__rating .fa-google {
    color: #4285F4;
    font-size: 0.95rem;
  }
  .sv-hero__rating-stars {
    color: #ffb400;
    font-size: 0.9rem;
    letter-spacing: 0.03em;
  }
  .sv-hero__rating-num {
    font-weight: 700;
    color: var(--sv-ink);
  }
  .sv-hero__rating-sep { opacity: 0.35; }

  /* Kleine Viewports: leicht unter Tablet-Max — Kompromiss Bildhöhe vs. CTAs */
  .sv-hero__figure-photo {
    max-height: min(38vh, 248px);
    object-position: center 27%;
  }
}

.sv-explore {
  position: relative;
  width: clamp(120px, 12.5vw, 146px);
  height: clamp(120px, 12.5vw, 146px);
  flex-shrink: 0;
  margin: -0.25rem 0;
}
.sv-explore__ring {
  position: absolute; inset: 0;
  animation: svSpin 22s linear infinite;
}
.sv-explore__text {
  font-family: var(--sv-font-display);
  font-size: clamp(12px, 1.2vw, 14px);
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.sv-explore__btn {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: clamp(60px, 6.25vw, 72px);
  height: clamp(60px, 6.25vw, 72px);
  border-radius: 50%;
  background: var(--sv-blue);
  color: #fff;
  display: grid; place-items: center;
  font-size: clamp(1rem, 1.2vw, 1.18rem);
  transition: background .2s, transform .25s var(--sv-ease);
}
.sv-explore__btn:hover { background: var(--sv-blue-600); color: #fff; transform: translate(-50%,-50%) scale(1.08); }
@keyframes svSpin { to { transform: rotate(360deg); } }

/* -------------------- Features -------------------- */
.sv-features {
  position: relative;
  z-index: 1;
  background: var(--sv-white);
}
.sv-features__grid {
  display: grid;
  gap: clamp(1rem, 1.5vw, 1.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .sv-features__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .sv-features__grid { grid-template-columns: repeat(4, 1fr); } }
.sv-feature {
  position: relative;
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  border-radius: var(--sv-radius);
  border: 1px solid var(--sv-line);
  background: var(--sv-white);
  transition: transform .25s var(--sv-ease), box-shadow .25s var(--sv-ease), border-color .25s;
}
.sv-feature:hover { transform: translateY(-6px); box-shadow: var(--sv-shadow); border-color: transparent; }
.sv-feature__icon {
  display: grid; place-items: center;
  width: 62px; height: 62px;
  border-radius: var(--sv-radius-sm);
  background: var(--sv-blue-50);
  color: var(--sv-blue);
  font-size: 1.4rem;
  margin-bottom: 1.25rem;
  transition: background .25s, color .25s;
}
.sv-feature:hover .sv-feature__icon { background: var(--sv-blue); color: #fff; }
.sv-feature__title { font-size: 1.2rem; font-weight: 700; margin: 0 0 .5rem; }
.sv-feature__text { color: var(--sv-text); font-size: .96rem; line-height: 1.6; margin: 0 0 1.25rem; }
.sv-feature__link {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--sv-bg);
  color: var(--sv-ink);
  transition: background .2s, color .2s;
}
.sv-feature:hover .sv-feature__link { background: var(--sv-blue); color: #fff; }

/* -------------------- About -------------------- */
.sv-about { background: var(--sv-bg); }
.sv-about__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) { .sv-about__grid { grid-template-columns: 1fr 1fr; } }
.sv-about__media { position: relative; }
.sv-about__img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: var(--sv-radius-lg);
  box-shadow: var(--sv-shadow);
}
.sv-about__badge {
  position: absolute;
  right: -12px; bottom: -12px;
  width: 130px; height: 130px;
  background: #fff;
  border-radius: 50%;
  display: grid; place-items: center;
  box-shadow: var(--sv-shadow);
}
.sv-about__badge .sv-explore__ring { position: absolute; inset: 0; animation: svSpin 22s linear infinite; }
.sv-about__play {
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--sv-blue); color: #fff;
  display: grid; place-items: center;
  font-size: .9rem;
  transition: transform .25s var(--sv-ease), background .2s;
}
.sv-about__play:hover { transform: scale(1.08); background: var(--sv-blue-600); }
.sv-about__thumb {
  position: absolute;
  top: -24px; right: -24px;
  width: 140px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  border: 6px solid var(--sv-bg);
  display: none;
}
@media (min-width: 900px) { .sv-about__thumb { display: block; } }

.sv-about__copy .sv-section__title { max-width: 20ch; }
.sv-about__copy .sv-btn { margin-top: .5rem; }
.sv-founder {
  margin: 2.25rem 0 0;
  display: flex; align-items: center; gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--sv-line);
}
.sv-founder img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.sv-founder figcaption strong { display: block; font-weight: 700; color: var(--sv-ink); }
.sv-founder figcaption span { font-size: .85rem; color: var(--sv-muted); }

/* -------------------- Über mich (Solvior 3-Spalten; Fläche wie .sv-entlastung) -------------------- */
.sv-about-showcase {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.18) 14%, rgba(255, 255, 255, 0) 28%),
    linear-gradient(180deg, #fafbfd 0%, #edf1f5 22%, #dfe5eb 50%, #d3dbe3 74%, #f0f3f7 100%);
  overflow-x: hidden;
  overflow-y: visible;
  --sv-about-chamfer: clamp(14px, 2.1vw, 26px);
  --sv-about-dot-y: 0.35rem;
  /* Desktop: nachträgliches y-Ziehen (nach verringertem Sektions-Top-Pad) moderat */
  --sv-about-desk-y-pull: clamp(1.5rem, 1.8vw, 1.9rem);
}
.sv-about-showcase .sv-container {
  max-width: min(1340px, 100%);
  padding-inline: var(--sv-gutter-x);
}
.sv-about-showcase__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(0.55rem, 1.8vw, 1.25rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 1024px) {
  .sv-about-showcase__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1.18fr) minmax(0, 0.72fr);
    /* Zwei Blöcke getrennt: sonst legt CSS Grid Items in derselben Zelle übereinander (Überlappung) */
    grid-template-rows: auto auto auto;
    /* Zeile Abstand: kompakt zwischen Titel, Abs. 2 und CTA-Row */
    gap: clamp(0rem, 0.12vw, 0.1rem) clamp(1.75rem, 3.5vw, 3rem);
    align-items: start;
  }
  .sv-about-showcase__copy--upper,
  .sv-about-showcase__copy--mid,
  .sv-about-showcase__copy--lower,
  .sv-about-showcase__aside {
    transform: translateY(calc(-1 * var(--sv-about-desk-y-pull, 0px)));
  }
  .sv-about-showcase__copy--upper {
    grid-column: 2;
    grid-row: 1;
  }
  .sv-about-showcase__copy--mid {
    grid-column: 2;
    grid-row: 2;
  }
  .sv-about-showcase__copy--lower {
    grid-column: 2;
    grid-row: 3;
    align-self: start;
    justify-content: flex-start;
  }
  .sv-about-showcase__aside {
    grid-column: 3;
    /* Neben den ersten beiden Textzeilen (ohne CTA-Zeile) */
    grid-row: 1 / 3;
  }
  .sv-about-showcase {
    --sv-about-left-bleed: calc(
      (100vw - min(100vw, var(--sv-container))) / 2 +
      var(--sv-gutter-x) -
      clamp(3rem, 5vw, 4.6rem) - 175px
    );
  }
}
.sv-about-showcase__media {
  position: relative;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  isolation: isolate;
  overflow: hidden;
  /* kein filter: sonst greift backdrop-filter auf der Caption das Foto oft nicht */
}
.sv-about-showcase__media::before,
.sv-about-showcase__thumb-wrap::before {
  content: "";
  position: absolute;
  top: -88%;
  left: -34%;
  width: 12%;
  height: 245%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.01) 16%,
    rgba(255, 255, 255, 0.08) 36%,
    rgba(255, 255, 255, 0.38) 50%,
    rgba(255, 255, 255, 0.07) 64%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(42deg);
  opacity: 0;
  mix-blend-mode: screen;
  border-radius: var(--sv-radius-lg);
}
.sv-about-showcase__media:hover::before,
.sv-about-showcase__thumb-wrap:hover::before {
  animation: sv-greviews-glass-sheen 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) 1;
}
@media (min-width: 1024px) {
  .sv-about-showcase__media {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: stretch;
    justify-self: start;
    max-width: none;
    margin-inline: 0;
    margin-left: calc(-1 * var(--sv-about-left-bleed));
    width: calc(100% + var(--sv-about-left-bleed));
  }
}
.sv-about-showcase__hero-img {
  display: block;
  width: 100%;
  aspect-ratio: 0.92;
  object-fit: cover;
  object-position: 12% center;
  border-radius: var(--sv-radius-lg);
  box-shadow:
    0 14px 32px rgba(10, 22, 40, 0.12),
    0 4px 10px rgba(10, 22, 40, 0.06);
  position: relative;
  z-index: 0;
}
@media (min-width: 1024px) {
  .sv-about-showcase__hero-img {
    height: 100%;
    min-height: 0;
    aspect-ratio: unset;
  }
}
@media (min-width: 640px) {
  .sv-about-showcase__media {
    border-radius: 0;
    clip-path: polygon(
      var(--sv-about-chamfer) 0,
      100% 0,
      100% 100%,
      0 100%,
      0 var(--sv-about-chamfer)
    );
    -webkit-clip-path: polygon(
      var(--sv-about-chamfer) 0,
      100% 0,
      100% 100%,
      0 100%,
      0 var(--sv-about-chamfer)
    );
  }
  .sv-about-showcase__media::before {
    border-radius: 0;
    clip-path: polygon(
      var(--sv-about-chamfer) 0,
      100% 0,
      100% 100%,
      0 100%,
      0 var(--sv-about-chamfer)
    );
    -webkit-clip-path: polygon(
      var(--sv-about-chamfer) 0,
      100% 0,
      100% 100%,
      0 100%,
      0 var(--sv-about-chamfer)
    );
  }
  .sv-about-showcase__hero-img {
    border-radius: 0;
    clip-path: polygon(
      var(--sv-about-chamfer) 0,
      100% 0,
      100% 100%,
      0 100%,
      0 var(--sv-about-chamfer)
    );
    -webkit-clip-path: polygon(
      var(--sv-about-chamfer) 0,
      100% 0,
      100% 100%,
      0 100%,
      0 var(--sv-about-chamfer)
    );
  }
}
.sv-about-showcase__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: var(--sv-radius-lg);
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(52, 162, 255, 0.06) 0%,
    rgba(18, 118, 217, 0.16) 38%,
    rgba(12, 63, 140, 0.68) 72%,
    rgba(4, 28, 76, 0.92) 100%
  );
  opacity: 1;
  mix-blend-mode: multiply;
}
@media (min-width: 640px) {
  .sv-about-showcase__media::after {
    border-radius: 0;
    clip-path: polygon(
      var(--sv-about-chamfer) 0,
      100% 0,
      100% 100%,
      0 100%,
      0 var(--sv-about-chamfer)
    );
    -webkit-clip-path: polygon(
      var(--sv-about-chamfer) 0,
      100% 0,
      100% 100%,
      0 100%,
      0 var(--sv-about-chamfer)
    );
  }
}
/* Portrait-Overlay: breiter als hoch, unten links, Frostglas */
.sv-about-showcase__media-cap {
  position: absolute;
  z-index: 3;
  left: clamp(0.65rem, 2vw, 1.25rem);
  bottom: clamp(0.65rem, 2vw, 1.25rem);
  right: auto;
  width: min(62%, 17.5rem);
  aspect-ratio: 3 / 2;
  max-width: calc(100% - 1.25rem);
  padding: clamp(0.65rem, 1.8vw, 0.9rem) clamp(0.95rem, 2.6vw, 1.35rem);
  border-radius: 0;
  border: none;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.46) 0%,
    rgba(255, 255, 255, 0.24) 36%,
    rgba(255, 255, 255, 0.12) 68%,
    rgba(8, 17, 34, 0.18) 100%
  );
  backdrop-filter: blur(8px) saturate(128%);
  -webkit-backdrop-filter: blur(8px) saturate(128%);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 0.38rem;
  text-align: left;
  box-sizing: border-box;
  box-shadow: 0 14px 36px rgba(5, 14, 28, 0.1);
}
.sv-about-showcase__media-cap-stat {
  display: block;
  font-family: var(--sv-font-display);
  font-size: clamp(2rem, 6.5vw, 2.85rem);
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 0.88;
  color: #fff;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.12);
}
.sv-about-showcase__media-cap-tagline {
  display: block;
  font-size: clamp(0.72rem, 2.1vw, 0.88rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.86);
  max-width: none;
}
@media (max-width: 380px) {
  .sv-about-showcase__media-cap {
    width: min(70%, 15rem);
    aspect-ratio: 5 / 3;
    padding: 0.55rem 0.7rem;
    gap: 0.3rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sv-about-showcase__media-cap {
    backdrop-filter: blur(6px) saturate(122%);
    -webkit-backdrop-filter: blur(6px) saturate(122%);
    background: linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.38) 0%,
      rgba(255, 255, 255, 0.18) 38%,
      rgba(255, 255, 255, 0.08) 68%,
      rgba(8, 17, 34, 0.22) 100%
    );
  }
}
.sv-about-showcase__copy {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
  max-width: min(40rem, 100%);
  padding-left: 0.45rem;
}
.sv-about-showcase__copy--lower {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin-top: clamp(-3.2rem, -6.2vw, -1.9rem);
}
@media (min-width: 1024px) {
  .sv-about-showcase__copy {
    max-width: none;
  }
  .sv-about-showcase__copy--lower {
    margin-top: clamp(-6.5rem, -9vw, -3.4rem);
  }
  .sv-about-showcase__copy--mid {
    /* Absatz 2 deutlich näher an Absatz 1 ziehen (Desktop): schließt den visuellen Leerraum */
    margin-top: clamp(-5.5rem, -6.5vw, -2.25rem);
  }
}
.sv-about-showcase__copy--mid {
  /* Absatz 2: gleiche Typo wie oberer Block, ohne doppelte Abstände */
  gap: 0;
  padding-top: 0;
}
.sv-about-showcase__copy .sv-kicker {
  align-self: flex-start;
  margin-top: 0.45rem;
}
.sv-about-showcase__copy--upper .sv-kicker {
  margin-top: 0;
}
.sv-about-showcase__title {
  margin: 0;
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  line-height: 1.1;
  letter-spacing: -0.035em;
  font-weight: 800;
  max-width: min(40ch, 100%);
}
.sv-about-showcase__title em {
  font-style: normal;
  color: var(--sv-blue);
}
.sv-about-showcase__text {
  margin: 0;
}
.sv-about-showcase__text p {
  margin: 0 0 0.85rem;
  color: var(--sv-text);
  font-size: clamp(1rem, 1.2vw, 1.06rem);
  line-height: 1.7;
}
.sv-about-showcase__text p:last-child {
  margin-bottom: 0;
}
/* Wie .sv-hero__actions: gleiche Abstände + natürliche Button-Breiten (min-width aus .sv-btn--dark / --whatsapp) */
.sv-about-showcase__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem 1rem;
  align-self: flex-start;
  margin-top: clamp(-0.2rem, -0.8vw, 0rem);
  width: 100%;
  max-width: 100%;
}
@media (min-width: 640px) {
  .sv-about-showcase__actions {
    flex-wrap: nowrap;
  }
}
.sv-about-showcase__actions .sv-btn--dark,
.sv-about-showcase__actions .sv-btn--whatsapp {
  flex: 0 1 calc(50% - 0.35rem);
  min-width: 0;
  width: calc(50% - 0.35rem);
}
.sv-about-showcase__actions .sv-btn--dark .sv-btn__body {
  gap: 0.58rem;
}
.sv-about-showcase__actions .sv-btn--dark .sv-btn__text-clip {
  margin-left: -0.14rem;
}
.sv-about-showcase__aside {
  display: flex;
  flex-direction: column;
  gap: clamp(0.85rem, 2vw, 1.15rem);
  width: 100%;
  max-width: 400px;
  margin-inline: auto;
}
@media (min-width: 1024px) {
  .sv-about-showcase__aside {
    align-self: start;
    justify-self: end;
    max-width: min(100%, 360px);
    margin-top: 0;
    margin-inline: 0;
    z-index: 2;
  }
}
.sv-about-showcase__thumb-wrap {
  position: relative;
  width: 100%;
  isolation: isolate;
  overflow: hidden;
  filter: drop-shadow(0 12px 28px rgba(10, 22, 40, 0.1))
    drop-shadow(0 3px 8px rgba(10, 22, 40, 0.05));
}

.sv-about-showcase__thumb-stack {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
}

.sv-about-showcase__thumb-stack .sv-about-showcase__thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: unset;
  object-fit: cover;
}

.sv-about-showcase__thumb-img--a {
  animation: sv-about-thumb-fade-a 12s ease-in-out infinite;
  z-index: 0;
}

.sv-about-showcase__thumb-img--b {
  animation: sv-about-thumb-fade-b 12s ease-in-out infinite;
  z-index: 0;
}

@keyframes sv-about-thumb-fade-a {
  0%,
  40% {
    opacity: 1;
  }
  48%,
  90% {
    opacity: 0;
  }
  98%,
  100% {
    opacity: 1;
  }
}

@keyframes sv-about-thumb-fade-b {
  0%,
  40% {
    opacity: 0;
  }
  48%,
  90% {
    opacity: 1;
  }
  98%,
  100% {
    opacity: 0;
  }
}

.sv-about-showcase__thumb-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(36, 118, 200, 0.1) 0%,
    rgba(12, 88, 168, 0.22) 38%,
    rgba(8, 52, 118, 0.74) 72%,
    rgba(3, 22, 62, 0.94) 100%
  );
  mix-blend-mode: multiply;
}
@media (min-width: 1024px) {
  .sv-about-showcase__thumb-wrap {
    align-self: stretch;
  }
}
.sv-about-showcase__profile-card {
  width: 100%;
  display: grid;
  gap: 0.85rem;
  padding: clamp(1rem, 2vw, 1.25rem) clamp(1rem, 2vw, 1.2rem);
  border: none;
  background: linear-gradient(180deg, #ffffff 0%, #f8f9fb 100%);
  box-shadow:
    0 10px 26px rgba(10, 22, 40, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  box-sizing: border-box;
}
@media (min-width: 640px) {
  .sv-about-showcase__profile-card {
    clip-path: polygon(
      0 0,
      calc(100% - var(--sv-about-chamfer)) 0,
      100% var(--sv-about-chamfer),
      100% 100%,
      0 100%
    );
    -webkit-clip-path: polygon(
      0 0,
      calc(100% - var(--sv-about-chamfer)) 0,
      100% var(--sv-about-chamfer),
      100% 100%,
      0 100%
    );
  }
}
@media (min-width: 1024px) {
  .sv-about-showcase__profile-card {
    position: static;
  }
}
.sv-about-showcase__profile-name {
  display: block;
  font-family: var(--sv-font-display);
  font-size: clamp(1.16rem, 1.55vw, 1.34rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--sv-ink);
  line-height: 1.12;
  margin: 0;
}
.sv-about-showcase__profile-block {
  margin: 0;
  padding-top: 0.25rem;
  border-top: 1px solid rgba(10, 22, 40, 0.07);
}
.sv-about-showcase__profile-label {
  display: block;
  font-family: var(--sv-font-sans);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sv-muted);
  margin-bottom: 0.45rem;
}
.sv-about-showcase__profile-qual {
  margin: 0;
  font-family: var(--sv-font-sans);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.62;
  color: var(--sv-text);
}
.sv-about-showcase__profile-gf {
  margin: 0;
  font-family: var(--sv-font-sans);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--sv-muted);
}
.sv-about-showcase__profile-link {
  color: var(--sv-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-word;
}
.sv-about-showcase__profile-link:hover {
  color: var(--sv-text);
}
.sv-about-showcase__profile-link:focus-visible {
  outline: 2px solid rgba(10, 22, 40, 0.35);
  outline-offset: 2px;
  border-radius: 2px;
}
.sv-about-showcase__thumb-img {
  width: 100%;
  max-width: none;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: var(--sv-radius-lg);
  box-shadow: none;
  position: relative;
  z-index: 0;
}

.sv-about-showcase__thumb-stack .sv-about-showcase__thumb-img {
  border-radius: var(--sv-radius-lg);
}
@media (min-width: 640px) {
  .sv-about-showcase__thumb-wrap {
    border-radius: 0;
    clip-path: none;
    -webkit-clip-path: none;
  }
  .sv-about-showcase__thumb-wrap::before,
  .sv-about-showcase__thumb-wrap::after {
    clip-path: none;
    -webkit-clip-path: none;
  }
  .sv-about-showcase__thumb-img {
    border-radius: 0;
    clip-path: none;
    -webkit-clip-path: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sv-about-showcase__media::before,
  .sv-about-showcase__media:hover::before,
  .sv-about-showcase__thumb-wrap::before,
  .sv-about-showcase__thumb-wrap:hover::before {
    animation: none;
    opacity: 0;
  }

  .sv-about-showcase__thumb-img--a,
  .sv-about-showcase__thumb-img--b {
    animation: none;
  }

  .sv-about-showcase__thumb-img--b {
    opacity: 0;
  }
}

/* -------------------- Über mich: Mobile / Tablet — nur Wechselbilder, kein Portrait; eckig; kein Karten-Container -------------------- */
@media (max-width: 1023.98px) {
  .sv-about-showcase.sv-section {
    --sv-section-pad-y: clamp(3.5rem, 8vw, 7rem);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.18) 14%, rgba(255, 255, 255, 0) 28%),
      linear-gradient(180deg, #fafbfd 0%, #edf1f5 22%, #dfe5eb 50%, #d3dbe3 74%, #f0f3f7 100%);
  }

  .sv-about-showcase__grid {
    gap: clamp(0.65rem, 2.2vw, 1.15rem);
  }

  /* Kein großes Portrait/18+: nur Diashow + Profil als Glass über den Thumbs (nicht im Desktop) */
  .sv-about-showcase__media {
    display: none;
  }

  .sv-about-showcase__copy {
    max-width: 100%;
    padding-inline: 0;
    margin-inline: 0;
  }

  .sv-about-showcase__copy--upper {
    gap: 0.95rem;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
  }

  .sv-about-showcase__copy--mid {
    padding: 0;
    margin: 0;
  }

  .sv-about-showcase__copy--upper .sv-kicker {
    margin-top: 0;
  }

  .sv-about-showcase__title {
    max-width: min(40ch, 100%);
    font-size: clamp(1.9rem, 4vw, 3.1rem);
    line-height: 1.1;
    letter-spacing: -0.035em;
  }

  .sv-about-showcase__text p {
    font-size: clamp(1rem, 1.2vw, 1.06rem);
    line-height: 1.7;
    color: var(--sv-text);
  }

  /* Wechselbilder + Profilkarte: Glass-Overlay (Sprache wie .sv-greviews__badge) */
  .sv-about-showcase__aside {
    position: relative;
    max-width: none;
    width: calc(100% + (2 * var(--sv-gutter-x)));
    margin-inline: calc(-1 * var(--sv-gutter-x));
    margin-bottom: clamp(0.5rem, 1.8vw, 0.95rem);
    gap: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
  }

  .sv-about-showcase__thumb-wrap {
    width: 100%;
    filter: drop-shadow(0 12px 28px rgba(10, 22, 40, 0.1))
      drop-shadow(0 3px 8px rgba(10, 22, 40, 0.05));
    border-radius: 0;
    overflow: hidden;
  }

  .sv-about-showcase__thumb-wrap::after {
    opacity: 1;
  }

  .sv-about-showcase__thumb-stack {
    aspect-ratio: 2 / 3;
  }

  .sv-about-showcase__thumb-img,
  .sv-about-showcase__thumb-stack .sv-about-showcase__thumb-img {
    border-radius: 0;
    clip-path: none;
    -webkit-clip-path: none;
  }

  .sv-about-showcase__profile-card {
    position: absolute;
    z-index: 4;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: clamp(0.85rem, 2.2vw, 1.1rem) clamp(0.9rem, 2.2vw, 1.15rem) clamp(0.95rem, 2.4vw, 1.2rem);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.45rem;
    clip-path: none;
    -webkit-clip-path: none;
    border-radius: 0;
    border: none;
    color: #fff;
    background: linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.46) 0%,
      rgba(255, 255, 255, 0.24) 36%,
      rgba(255, 255, 255, 0.12) 68%,
      rgba(8, 17, 34, 0.18) 100%
    );
    backdrop-filter: blur(8px) saturate(128%);
    -webkit-backdrop-filter: blur(8px) saturate(128%);
    box-shadow: 0 14px 36px rgba(5, 14, 28, 0.1);
  }
  .sv-about-showcase__profile-card .sv-about-showcase__profile-name {
    color: #fff;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.12);
  }
  .sv-about-showcase__profile-card .sv-about-showcase__profile-block {
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 0.45rem;
  }
  .sv-about-showcase__profile-card .sv-about-showcase__profile-qual {
    color: rgba(255, 255, 255, 0.9);
  }
  .sv-about-showcase__profile-card .sv-about-showcase__profile-gf {
    color: rgba(255, 255, 255, 0.78);
  }
  .sv-about-showcase__profile-card .sv-about-showcase__profile-link {
    color: #fff;
  }
  .sv-about-showcase__profile-card .sv-about-showcase__profile-link:hover {
    color: rgba(255, 255, 255, 0.9);
  }
  .sv-about-showcase__profile-card .sv-about-showcase__profile-link:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.5);
  }

  .sv-about-showcase__copy--lower {
    display: none;
  }
}

/* Über mich: nur schmale Viewports (Handy), nicht Tablet */
@media (max-width: 639.98px) {
  .sv-about-showcase__copy--mid {
    margin-top: clamp(1.5rem, 4.5vw, 2.75rem);
  }
}

@media (max-width: 1023.98px) and (prefers-reduced-motion: reduce) {
  .sv-about-showcase__profile-card {
    backdrop-filter: blur(6px) saturate(122%);
    -webkit-backdrop-filter: blur(6px) saturate(122%);
    background: linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.38) 0%,
      rgba(255, 255, 255, 0.18) 38%,
      rgba(255, 255, 255, 0.08) 68%,
      rgba(8, 17, 34, 0.22) 100%
    );
  }
}

/* -------------------- Leistungen: schlanker Karten-Look (Stil der Seite) -------------------- */
/* Fahrzeugtypen: Desktop = 4 Parallelogramme nebeneinander, statisch; schmal = Ticker + Full-Bleed */
.sv-offers {
  --sv-offer-over: 0px;
  /* Parallelogramm: größerer % = stärkere Schräge, klarer parallel; zu klein = fast rechteckig */
  --sv-offer-clip: 9%;
  --sv-offer-gap: 0px; /* sichtbarer s.g. hauptsächlich über --sv-offer-clip, nicht 2–3px (fast unsichtbar) */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.18) 14%, rgba(255, 255, 255, 0) 28%),
    linear-gradient(180deg, #fafbfd 0%, #edf1f5 22%, #dfe5eb 50%, #d3dbe3 74%, #f0f3f7 100%);
}
.sv-offers__head {
  position: relative;
}
/* Desktop: keine Animation, vier Parallelogramme gleich breit in einer Zeile (im Container) */
@media (min-width: 900px) {
  .sv-offers__viewport {
    --sv-offers-bar-h: clamp(2.55rem, 4.8vw, 3.1rem);
    --sv-ticker-sec: 55s;
    --sv-offer-over: 0px;
    --sv-offer-gap: 0px;
    --sv-offer-clip: 9%;
    position: relative;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow: visible;
    touch-action: auto;
    user-select: auto;
    -webkit-user-select: auto;
    cursor: default;
    outline: none;
  }
  .sv-offers__viewport.is-dragging {
    cursor: default;
  }
  .sv-offers__marquee {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100% !important;
    min-width: 0;
    will-change: auto;
    backface-visibility: visible;
    transform: none !important;
  }
  .sv-offers__track--dup {
    display: none !important;
  }
  .sv-offers__track {
    list-style: none;
    display: flex;
    flex: 0 0 auto;
    flex-flow: row nowrap;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0;
    padding: 0;
    align-items: stretch;
    column-gap: var(--sv-offer-gap, 0px);
    row-gap: 0;
    min-height: 0;
  }
  .sv-offers__track + .sv-offers__track {
    display: none !important;
    margin-left: 0;
  }
  .sv-offers__track .sv-offers__slide + .sv-offers__slide {
    margin-left: 0;
  }
  .sv-offers__slide {
    position: relative;
    z-index: 0;
    flex: 0 0 25%;
    max-width: 25%;
    min-width: 0;
    width: auto;
    margin: 0;
    padding: 0;
    display: flex;
    box-sizing: border-box;
  }
  .sv-offers__card {
    min-height: clamp(16rem, 32vh, 32rem);
    max-height: min(75vh, 40rem);
  }
}
/* Schmal: Laufschrift, Wischen */
@media (max-width: 899px) {
  .sv-offers {
    --sv-offer-slide: 70vw;
    --sv-offer-over: 0px;
    --sv-offer-gap: 0px; /* sichtbaren Lücken-Look mindern: --sv-offer-clip + ggf. 1px Abstand (unten) */
  }
  .sv-offers__viewport {
    /* etwas höher, damit größere Leisten-Schrift (s. Mobilsatz unten) passt */
    --sv-offers-bar-h: clamp(2.8rem, 5.2vw, 3.4rem);
    --sv-ticker-sec: 55s;
    --sv-offer-over: 0px;
    --sv-offer-gap: 0px;
    --sv-offer-slide: 70vw;
    /* schmal: sichtbares Parallelogramm (Winkel etwas geringer als Desktop, trotzdem klar) */
    --sv-offer-clip: 8%;
    position: relative;
    min-height: 12rem;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
    /* Vertikales Seiten-Scrollen nicht blockieren; horizontal erst nach Achs-Lock im JS */
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    cursor: grab;
    outline: none;
  }
  .sv-offers__viewport.is-dragging {
    cursor: grabbing;
    touch-action: none;
  }
  .sv-offers__marquee {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: max-content;
    min-width: 0;
    will-change: transform;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
  }
  .sv-offers__track {
    list-style: none;
    display: flex;
    flex: 0 0 auto;
    flex-flow: row nowrap;
    width: calc(4 * var(--sv-offer-slide, 50vw) + 3 * var(--sv-offer-gap, 0px));
    min-width: calc(4 * var(--sv-offer-slide, 50vw) + 3 * var(--sv-offer-gap, 0px));
    margin: 0;
    padding: 0;
    align-items: stretch;
    column-gap: var(--sv-offer-gap, 0px);
    row-gap: 0;
    min-height: 0;
  }
  .sv-offers__track .sv-offers__slide + .sv-offers__slide {
    margin-left: 0;
  }
  .sv-offers__track + .sv-offers__track {
    margin-left: var(--sv-offer-gap, 0px);
  }
  .sv-offers__slide {
    position: relative;
    z-index: 0;
    flex: 0 0 var(--sv-offer-slide, 50vw);
    width: var(--sv-offer-slide, 50vw);
    min-width: var(--sv-offer-slide, 50vw);
    max-width: var(--sv-offer-slide, 50vw);
    margin: 0;
    padding: 0;
    display: flex;
    box-sizing: border-box;
  }
}
@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
  .sv-offers__marquee {
    width: 100% !important;
    flex-wrap: wrap;
    transform: none !important;
    justify-content: center;
  }
  .sv-offers__track--dup {
    display: none !important;
  }
  .sv-offers__track {
    flex-wrap: wrap !important;
    width: 100% !important;
    min-width: 0 !important;
    column-gap: 0.125rem !important;
    row-gap: 0.125rem !important;
  }
  .sv-offers__track .sv-offers__slide + .sv-offers__slide {
    margin-left: 0 !important;
  }
  .sv-offers__slide {
    flex: 0 0 calc((100% - 0.125rem) / 2) !important;
    min-width: min(100%, 18rem) !important;
  }
  .sv-offers__track + .sv-offers__track {
    margin-left: 0;
  }
}
/* Mobil: Fahrzeugtypen bleibt in derselben Typo-Skala wie die übrigen Sektionen */ 
@media (max-width: 899px) {
  .sv-offers .sv-section__head .sv-section__lead {
    font-size: clamp(1rem, 1.2vw, 1.06rem);
    line-height: 1.7;
  }
  .sv-offers__card .sv-offers__typ {
    font-size: clamp(1.05rem, 3.7vw, 1.45rem);
  }
  .sv-offers__card .sv-offers__typ-rest {
    font-size: clamp(0.78rem, 2.2vw, 0.95rem);
  }
  .sv-offers__bar--typ-stack {
    row-gap: 0.28rem;
  }
  .sv-offers__bar-glass {
    bottom: 0;
  }
  .sv-offers__bar {
    font-size: clamp(0.8rem, 2.5vw, 1rem);
  }
  /*
   Laufband (JS): backdrop-filter + bewegtes translate = sehr teuer.
   Optik wie Basis .sv-offers__bar-glass — nur Blur weglassen (Verlauf/Schatten unverändert).
  */
  .sv-offers.is-offers-ticker--js .sv-offers__bar-glass {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.46) 0%,
      rgba(255, 255, 255, 0.24) 36%,
      rgba(255, 255, 255, 0.12) 68%,
      rgba(8, 17, 34, 0.18) 100%
    );
    box-shadow: 0 14px 36px rgba(5, 14, 28, 0.1);
  }
  .sv-offers.is-offers-ticker--js .sv-offers__media img {
    transition: none;
  }
}
/* Fahrzeugtypen: Parallelogramm-Karten (Desktop-Größe s. @media min-width:900) */
.sv-offers .sv-container {
  max-width: min(1680px, 100%);
}

.sv-offers__card {
  display: flex;
  flex-direction: column;
  position: relative;
  isolation: isolate; /* Bar/Clip vs. benachbarte Karten-Overlap */
  width: 100%;
  height: 100%;
  min-height: clamp(22rem, 58vh, 38rem);
  max-height: min(90vh, 48rem);
  margin: 0;
  justify-content: flex-end;
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: hidden;
  -webkit-clip-path: polygon(
    var(--sv-offer-clip, 9%) 0,
    100% 0,
    calc(100% - var(--sv-offer-clip, 9%)) 100%,
    0 100%
  );
  clip-path: polygon(
    var(--sv-offer-clip, 9%) 0,
    100% 0,
    calc(100% - var(--sv-offer-clip, 9%)) 100%,
    0 100%
  );
  box-shadow: none;
  filter: none;
  transition: filter 0.25s var(--sv-ease);
}
.sv-offers__card:hover {
  transform: none;
  border-color: transparent;
  box-shadow: none;
}

.sv-offers__card::before {
  content: none;
  display: none;
}

/* Glass unten, gleiche Sprache wie Kundenstimmen (.sv-greviews__badge) */
.sv-offers__bar-glass {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: none;
  min-width: 0;
  box-sizing: border-box;
  border: none;
  border-radius: 0;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.46) 0%,
    rgba(255, 255, 255, 0.24) 36%,
    rgba(255, 255, 255, 0.12) 68%,
    rgba(8, 17, 34, 0.18) 100%
  );
  backdrop-filter: blur(8px) saturate(128%);
  -webkit-backdrop-filter: blur(8px) saturate(128%);
  box-shadow: 0 14px 36px rgba(5, 14, 28, 0.1);
  padding: clamp(0.5rem, 1.4vw, 0.8rem) clamp(0.65rem, 1.5vw, 1rem) clamp(0.5rem, 1.2vw, 0.7rem);
  pointer-events: none;
}
/* Text in der Glass-Box */
.sv-offers__bar {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: auto;
  margin: 0;
  padding: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.2rem 0.45rem;
  box-sizing: border-box;
  background: none;
  color: #fff;
  font-family: var(--sv-font-display);
  font-size: clamp(0.72rem, 1.35vw, 0.9rem);
  line-height: 1.2;
  text-align: center;
  pointer-events: none;
}
.sv-offers__class {
  font-weight: 800;
  letter-spacing: -0.02em;
}
.sv-offers__plus {
  opacity: 0.45;
  font-weight: 600;
  user-select: none;
}
.sv-offers__suffix {
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.9em;
  opacity: 0.92;
}
/* Leiste: Typ (blau, größer) über „Schadengutachten“ */
.sv-offers__bar--typ-stack {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  row-gap: 0.2rem;
  padding: 0;
  line-height: 1.2;
  text-align: center;
  /* Hit-Test: Parallelogramm/Karte (Bild) steuern Hover — nicht die Leiste allein */
  pointer-events: none;
}
.sv-offers__typ {
  color: #fff;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(1rem, 2vw, 1.35rem);
  line-height: 1.08;
  max-width: 100%;
  text-shadow: none;
}
.sv-offers__typ-rest {
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none; /* Schadengutachten: nur S groß */
  font-size: clamp(0.72rem, 1.05vw, 0.86rem);
  opacity: 1;
  text-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
  .sv-offers__bar-glass {
    backdrop-filter: blur(6px) saturate(122%);
    -webkit-backdrop-filter: blur(6px) saturate(122%);
    background: linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.38) 0%,
      rgba(255, 255, 255, 0.18) 38%,
      rgba(255, 255, 255, 0.08) 68%,
      rgba(8, 17, 34, 0.22) 100%
    );
  }
}
@media (hover: hover) and (pointer: fine) {
  .sv-offers__card .sv-offers__typ,
  .sv-offers__card .sv-offers__typ-rest {
    transform: scale(1);
    transform-origin: center;
    transition: transform 0.3s var(--sv-ease);
  }
  .sv-offers__card:hover .sv-offers__typ,
  .sv-offers__card:hover .sv-offers__typ-rest {
    transform: scale(1.04);
  }
  .sv-offers__slide:hover {
    z-index: 10;
  }
  .sv-offers__card:hover {
    filter: drop-shadow(0 20px 36px rgba(10, 22, 40, 0.12));
  }
  .sv-offers__card:hover .sv-offers__media img {
    transform: scale(1.05);
  }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .sv-offers__card .sv-offers__typ,
  .sv-offers__card .sv-offers__typ-rest {
    transition: transform 0.2s ease;
  }
  .sv-offers__card:hover .sv-offers__typ,
  .sv-offers__card:hover .sv-offers__typ-rest {
    transform: scale(1.02);
  }
}
.sv-offers__media {
  position: absolute;
  inset: 0;
  display: block;
  aspect-ratio: auto;
  background: #cfd8e3;
  border-radius: 0;
  overflow: hidden;
}
/* Wie Kundenstimmen — gleiche Tonung, oben weich ausgeblendet (mehr „nacktes“ Foto) */
.sv-offers__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(52, 162, 255, 0.06) 0%,
    rgba(18, 118, 217, 0.16) 38%,
    rgba(12, 63, 140, 0.68) 72%,
    rgba(4, 28, 76, 0.92) 100%
  );
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(180deg, #0000 0%, #0000 32%, #fff 58%, #fff 100%);
  mask-image: linear-gradient(180deg, #0000 0%, #0000 32%, #fff 58%, #fff 100%);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.sv-offers__media img {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  filter: none;
  transform: none; /* kein leichter Scale = keine künstlichen Innenränder am Foto */
  transition: transform 0.6s var(--sv-ease);
}

.sv-offers__body {
  display: none;
}

.sv-offers__kicker {
  color: var(--sv-white);
}
.sv-offers__card-title,
.sv-offers__card-title a,
.sv-offers__link {
  color: var(--sv-white);
}
.sv-offers__card-title {
  font-size: clamp(1.18rem, 0.8vw + 0.82rem, 1.45rem);
  line-height: 1.18;
}
.sv-offers__card-title a:hover,
.sv-offers__link:hover {
  color: var(--sv-white);
}
.sv-offers__desc {
  color: var(--sv-white);
  font-size: 0.98rem;
  line-height: 1.6;
}
.sv-offers__link {
  color: var(--sv-white);
}

/* Dots: nur Mobile/Slider — schlichte Punkte */
.sv-offers__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: clamp(1.1rem, 2vw, 1.5rem);
}
.sv-offers__dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--sv-muted, #c7ced8);
  opacity: 0.6;
  cursor: pointer;
  transition: opacity .2s, transform .2s, background .2s;
}
.sv-offers__dots button:hover {
  opacity: 0.9;
}
.sv-offers__dots button.is-active {
  background: var(--sv-blue);
  opacity: 1;
  transform: scale(1.25);
}

@media (prefers-reduced-motion: reduce) {
  .sv-offers__card,
  .sv-offers__media img {
    transition-duration: 0.01ms;
  }
  .sv-offers__card:hover {
    transform: none;
  }
  .sv-offers__card:hover .sv-offers__media img {
    transform: none;
  }
}

/* Google-Bewertungen / Kundenstimmen — Desktop: Bild links volle Sektionshöhe, Bewertungen rechts */
.sv-greviews.sv-section {
  padding-block: var(--sv-section-pad-y);
}
.sv-greviews {
  background: var(--sv-white);
  background-image: none;
  border-top: none;
  border-bottom: 2px solid var(--sv-line);
  overflow: hidden;
}
.sv-greviews__split {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  max-width: min(1480px, 100%);
  margin-inline: auto;
  padding-inline: var(--sv-gutter-x);
  box-sizing: border-box;
  background: var(--sv-white);
  background-image: none;
}
@media (min-width: 900px) {
  .sv-greviews__split {
    grid-template-columns: minmax(220px, 28vw) minmax(0, 1fr);
    min-height: clamp(28rem, 72vh, 52rem);
    align-items: stretch;
  }
}
.sv-greviews__visual {
  position: relative;
  min-height: clamp(12rem, 34vh, 20rem);
  background: var(--sv-white);
  background-image: none;
  padding: clamp(1rem, 3vw, 2rem);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
@media (min-width: 900px) {
  .sv-greviews__visual {
    min-height: 0;
    align-self: stretch;
    padding: clamp(2rem, 4vw, 3.25rem) 0 clamp(2rem, 4vw, 3.25rem) clamp(2.25rem, 6vw, 5rem);
  }
}
.sv-greviews__figure {
  position: relative;
  margin: 0;
  width: 100%;
  max-width: clamp(14rem, 26vw, 22rem);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: transparent;
  border-radius: var(--sv-radius);
  box-shadow: none;
}
.sv-greviews__figure::before {
  content: "";
  position: absolute;
  top: -88%;
  left: -34%;
  width: 7%;
  height: 245%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.01) 16%,
    rgba(255, 255, 255, 0.08) 36%,
    rgba(255, 255, 255, 0.38) 50%,
    rgba(255, 255, 255, 0.07) 64%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(42deg);
  opacity: 0;
  mix-blend-mode: screen;
  box-shadow: none;
}
.sv-greviews__figure:hover::before {
  animation: sv-greviews-glass-sheen 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) 1;
}
.sv-greviews__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(52, 162, 255, 0.06) 0%,
    rgba(18, 118, 217, 0.16) 38%,
    rgba(12, 63, 140, 0.68) 72%,
    rgba(4, 28, 76, 0.92) 100%
  );
  mix-blend-mode: multiply;
}
@media (min-width: 900px) {
  .sv-greviews__figure {
    max-width: none;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }
}
.sv-greviews__img {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
}
.sv-greviews__badge {
  position: absolute;
  z-index: 3;
  left: clamp(0.85rem, 2vw, 1.35rem);
  right: auto;
  bottom: clamp(0.75rem, 2vw, 1.35rem);
  transform: none;
  width: min(52%, 12.25rem);
  aspect-ratio: 1 / 1;
  max-width: calc(100% - 1.7rem);
  border-radius: 0;
  border: none;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.46) 0%,
    rgba(255, 255, 255, 0.24) 36%,
    rgba(255, 255, 255, 0.12) 68%,
    rgba(8, 17, 34, 0.18) 100%
  );
  backdrop-filter: blur(8px) saturate(128%);
  -webkit-backdrop-filter: blur(8px) saturate(128%);
  color: #fff;
  padding: 1.05rem 0.95rem 1.1rem;
  display: block;
  box-shadow: 0 14px 36px rgba(5, 14, 28, 0.1);
}
.sv-greviews__badge-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  gap: 0.35rem;
  min-width: 0;
  width: fit-content;
  max-width: 100%;
}
/* Glaskachel: mobil unten rechts; Zahl+Text als linksbündiger Block, der Block in der Kachel zentriert */
@media (max-width: 899.98px) {
  .sv-greviews__badge {
    left: auto;
    right: clamp(0.85rem, 2vw, 1.35rem);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.05rem;
  }
}
.sv-greviews__badge-stat {
  font-size: clamp(2.35rem, 5.8vw, 3.15rem);
  font-weight: 800;
  font-family: var(--sv-font-display);
  line-height: 0.92;
  letter-spacing: -0.05em;
  flex-shrink: 0;
}
.sv-greviews__badge-copy {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.86);
  line-height: 1.45;
  max-width: 9ch;
}
@keyframes sv-greviews-glass-sheen {
  0% {
    top: -88%;
    left: -34%;
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  88% {
    opacity: 1;
  }
  100% {
    top: 18%;
    left: 106%;
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sv-greviews__badge {
    backdrop-filter: blur(6px) saturate(122%);
    -webkit-backdrop-filter: blur(6px) saturate(122%);
    background: linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.38) 0%,
      rgba(255, 255, 255, 0.18) 38%,
      rgba(255, 255, 255, 0.08) 68%,
      rgba(8, 17, 34, 0.22) 100%
    );
  }
  .sv-greviews__figure::before,
  .sv-greviews__figure:hover::before {
    animation: none;
    opacity: 0;
  }
}
.sv-greviews__pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: var(--sv-ink);
  background: var(--sv-white);
  background-image: none;
  border-top: 1px solid var(--sv-line);
}
@media (min-width: 900px) {
  .sv-greviews__pane {
    border-top: none;
    border-left: none;
  }
}
.sv-greviews__pane-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 2.6vw, 1.85rem);
  width: 100%;
  max-width: var(--sv-container);
  margin-inline: 0;
  padding: clamp(2rem, 5vw, 3.5rem) var(--sv-gutter-x);
}
@media (min-width: 900px) {
  .sv-greviews__pane-inner {
    max-width: min(var(--sv-container), 100%);
    margin-inline: 0;
    padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.75rem);
  }
}
.sv-greviews__head {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  max-width: 38rem;
}
.sv-greviews__head .sv-kicker {
  align-self: flex-start;
  color: var(--sv-blue);
  line-height: 1;
}
.sv-greviews__head .sv-section__title {
  margin: 0;
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  line-height: 1.1;
  letter-spacing: -0.035em;
  font-weight: 800;
  color: var(--sv-ink);
}
.sv-greviews__head .sv-section__title.sv-greviews__title {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35em 0.45em;
}
.sv-greviews__title-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sv-blue-600);
  font-size: 0.78em;
  line-height: 1;
  opacity: 0.92;
}
.sv-greviews__title-google i {
  display: block;
}
.sv-greviews__head .sv-section__title em {
  color: var(--sv-blue-600);
  font-style: italic;
}
.sv-greviews__carousel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
  min-height: 0;
}
.sv-greviews .sv-greviews__viewport {
  position: relative;
  min-width: 0;
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  outline: none;
  cursor: grab;
}
.sv-greviews .sv-greviews__viewport::-webkit-scrollbar {
  display: none;
}
.sv-greviews .sv-greviews__viewport.is-dragging {
  cursor: grabbing;
  user-select: none;
}
.sv-greviews .sv-greviews__viewport:focus-visible {
  outline: 2px solid var(--sv-blue);
  outline-offset: 2px;
  border-radius: var(--sv-radius-sm);
}
@media (min-width: 900px) {
  .sv-greviews .sv-greviews__viewport {
    min-height: clamp(15rem, 34vh, 24rem);
  }
}
.sv-greviews .sv-greviews__track {
  display: flex;
  align-items: stretch;
  width: 100%;
}
.sv-greviews .sv-greviews__slide {
  flex: 0 0 100%;
  display: flex;
  align-items: stretch;
  width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  text-decoration: none;
  color: var(--sv-ink);
  cursor: inherit;
}
/* Review-Karten — eine pro „Bühne" */
/* Slide ist jetzt rahmenlos – Quote + Text liegen direkt auf der Seitenfläche */
.sv-greviews .sv-greviews__slide .sv-testi__quote {
  margin: 0;
  flex: 1;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transition: none;
}
.sv-greviews .sv-greviews__slide:hover .sv-testi__quote {
  border-color: transparent;
  box-shadow: none;
  transform: none;
}
.sv-greviews .sv-greviews__slide .sv-testi__quote-icon {
  font-size: clamp(2.6rem, 3.4vw, 3.6rem);
  line-height: 1;
  margin-bottom: clamp(1rem, 1.8vw, 1.5rem);
  color: var(--sv-blue);
}
.sv-greviews .sv-greviews__slide .sv-testi__quote p {
  margin: 0 0 clamp(1.75rem, 3vw, 2.5rem) 0;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-line;
  font-size: clamp(1.15rem, 1.55vw, 1.55rem);
  line-height: 1.6;
  color: var(--sv-ink);
  font-weight: 400;
  letter-spacing: -0.005em;
}
/* Footer-Zeile: Linie mit diagonalem Anschnitt + Avatar links + Sterne/Name rechts daneben */
.sv-greviews .sv-greviews__slide .sv-testi__author {
  position: relative;
  margin-top: auto;
  padding-top: clamp(1.15rem, 1.8vw, 1.5rem);
  display: flex;
  align-items: center;
  gap: clamp(0.85rem, 1.4vw, 1.15rem);
  border-top: 0;
  flex-wrap: nowrap;
}
.sv-greviews .sv-greviews__slide .sv-testi__author img {
  width: clamp(56px, 5.4vw, 72px);
  height: clamp(56px, 5.4vw, 72px);
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  filter: grayscale(0.15);
}
.sv-greviews .sv-greviews__slide .sv-testi__avatar {
  width: clamp(56px, 5.4vw, 72px);
  height: clamp(56px, 5.4vw, 72px);
  font-size: clamp(1rem, 1.3vw, 1.25rem);
  flex-shrink: 0;
}
.sv-greviews .sv-greviews__slide .sv-testi__author-meta {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.sv-greviews .sv-greviews__slide .sv-testi__stars {
  margin: 0 0 0.2rem 0;
  display: flex;
  gap: 0.18rem;
  list-style: none;
  padding: 0;
  color: var(--sv-blue);
  font-size: clamp(0.85rem, 1vw, 1rem);
}
.sv-greviews .sv-greviews__slide .sv-testi__author strong {
  display: block;
  font-size: clamp(1.05rem, 1.25vw, 1.25rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--sv-ink);
  letter-spacing: -0.01em;
}
.sv-greviews .sv-greviews__slide .sv-testi__author span {
  display: block;
  font-size: clamp(0.85rem, 0.95vw, 0.95rem);
  color: var(--sv-muted);
  line-height: 1.35;
}

/* Steuerleiste: Pfeile rechts unten am Viewport; Dots ausgeblendet */
.sv-greviews__controls[hidden] {
  display: none !important;
}
.sv-greviews__controls {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  pointer-events: none;
}
.sv-greviews__dots {
  display: none;
}
.sv-greviews__arrows {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  pointer-events: auto;
}
.sv-greviews .sv-greviews__nav {
  width: clamp(44px, 4vw, 52px);
  height: clamp(44px, 4vw, 52px);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--sv-line);
  color: var(--sv-ink);
  cursor: pointer;
  font-size: 0.95rem;
  transition: border-color .2s, background .2s, color .2s, opacity .2s, transform .2s var(--sv-ease);
}
.sv-greviews .sv-greviews__nav:hover:not(:disabled) {
  border-color: var(--sv-blue);
  background: var(--sv-blue);
  color: #fff;
  transform: translateY(-1px);
}
.sv-greviews .sv-greviews__nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
}
.sv-greviews .sv-greviews__hint {
  margin: 0;
  padding: 0;
  max-width: 36rem;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--sv-muted);
  background: none;
  border: none;
  border-radius: 0;
}
.sv-greviews .sv-testi__google.sv-greviews__google {
  margin: 0;
  align-self: flex-start;
  padding: 0.85rem 1.25rem;
  font-size: 0.95rem;
  gap: 0.65rem;
  border-radius: var(--sv-radius-pill);
}
@media (max-width: 640px) {
  .sv-greviews__controls {
    position: static;
    justify-content: flex-start;
    margin-top: 0.5rem;
  }
  .sv-greviews .sv-testi__google.sv-greviews__google {
    align-self: flex-start;
    justify-content: flex-start;
  }
}
@media (max-width: 899.98px) {
  .sv-greviews .sv-testi__google.sv-greviews__google {
    margin-top: clamp(1rem, 1.8vw, 1.4rem);
  }
}
.sv-greviews .sv-greviews__loading,
.sv-greviews .sv-greviews__err {
  flex: 1 1 auto;
  width: min(100%, 26rem);
  min-width: min(100%, 280px);
  min-height: 168px;
  margin-inline: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.35rem 1rem;
  text-align: left;
  color: var(--sv-text);
  font-size: 0.88rem;
  line-height: 1.5;
  background: #fff;
  border: 1px solid var(--sv-line);
  border-radius: var(--sv-radius);
  box-shadow: var(--sv-shadow-sm);
}
.sv-greviews .sv-greviews__loading p,
.sv-greviews .sv-greviews__err p {
  margin: 0;
}
.sv-greviews .sv-greviews__err strong {
  color: var(--sv-ink);
}
.sv-greviews__loading-ring {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--sv-line);
  border-top-color: var(--sv-blue);
  animation: sv-greviews-spin 0.75s linear infinite;
}
@keyframes sv-greviews-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .sv-greviews__loading-ring {
    animation: none;
    border-color: var(--sv-line);
    opacity: 0.7;
  }
}

/* -------------------- Services -------------------- */
.sv-services { background: var(--sv-white); }
.sv-services__grid {
  display: grid;
  gap: clamp(1rem, 1.5vw, 1.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .sv-services__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .sv-services__grid { grid-template-columns: repeat(3, 1fr); } }
.sv-service {
  background: var(--sv-white);
  border-radius: var(--sv-radius);
  overflow: hidden;
  border: 1px solid var(--sv-line);
  transition: transform .3s var(--sv-ease), box-shadow .3s var(--sv-ease);
}
.sv-service:hover { transform: translateY(-8px); box-shadow: var(--sv-shadow); }
.sv-service__media {
  position: relative; display: block;
  overflow: hidden;
  aspect-ratio: 5/4;
  background: var(--sv-bg);
}
.sv-service__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--sv-ease); }
.sv-service:hover .sv-service__media img { transform: scale(1.06); }
.sv-service__badge {
  position: absolute; left: 1.25rem; bottom: 1.25rem;
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--sv-blue); color: #fff;
  display: grid; place-items: center;
  font-size: 1.05rem;
  box-shadow: 0 10px 24px rgba(13,122,255,.3);
}
.sv-service__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.35rem 1.5rem;
}
.sv-service__title { margin: 0; font-size: 1.15rem; font-weight: 700; }
.sv-service__title a { color: var(--sv-ink); }
.sv-service__title a:hover { color: var(--sv-blue); }
.sv-service__arrow {
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--sv-bg); color: var(--sv-ink);
  flex-shrink: 0;
  transition: background .2s, color .2s, transform .25s var(--sv-ease);
}
.sv-service:hover .sv-service__arrow { background: var(--sv-navy-deep); color: #fff; transform: rotate(-45deg); }

/* -------------------- Marquee -------------------- */
.sv-marquee {
  background: var(--sv-blue);
  color: #fff;
  overflow: hidden;
  padding: 1.05rem 0;
}
.sv-marquee__track {
  display: flex; align-items: center; gap: 2rem;
  white-space: nowrap;
  animation: svMarquee 28s linear infinite;
  font-family: var(--sv-font-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  letter-spacing: -.01em;
}
.sv-marquee__track .sv-dot {
  width: 8px; height: 8px;
  background: #fff; border-radius: 50%;
  display: inline-block;
}
@keyframes svMarquee { to { transform: translateX(-50%); } }

/* -------------------- Progress -------------------- */
.sv-progress {
  position: relative;
  color: #fff;
  overflow: hidden;
}
.sv-progress__bg {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(10,22,40,.85), rgba(10,22,40,.65)),
    url("https://images.unsplash.com/photo-1552664730-d307ca884978?w=1600&q=82") center / cover no-repeat;
  z-index: 0;
}
.sv-progress__grid {
  position: relative; z-index: 1;
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .sv-progress__grid { grid-template-columns: 1.2fr 1fr; align-items: center; } }
.sv-progress__rings {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2vw, 2rem);
}
.sv-ring { position: relative; text-align: center; }
.sv-ring svg { width: 100%; height: auto; max-width: 180px; margin: 0 auto; transform: rotate(-90deg); }
.sv-ring__val {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-family: var(--sv-font-display);
  font-size: clamp(1.6rem, 2.4vw, 2rem); font-weight: 800;
}
.sv-ring__lbl { margin-top: 1rem; color: rgba(255,255,255,.72); font-size: .95rem; }

/* -------------------- Case Studies -------------------- */
.sv-cases { background: var(--sv-bg); }
.sv-cases__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .sv-cases__grid { grid-template-columns: 1fr 1.3fr; align-items: center; } }
.sv-cases__intro { position: relative; }
.sv-cases__intro .sv-btn { margin-top: 1.5rem; }
.sv-cases__list { display: flex; flex-direction: column; border-top: 1px solid var(--sv-line); }
.sv-case {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.25rem;
  align-items: center;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--sv-line);
  transition: padding .25s var(--sv-ease);
}
.sv-case__num { color: var(--sv-blue); font-family: var(--sv-font-display); font-weight: 700; font-size: 1.1rem; letter-spacing: .05em; min-width: 42px; }
.sv-case__title {
  font-family: var(--sv-font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 1.8vw, 1.55rem);
  color: var(--sv-ink);
  transition: color .2s;
}
.sv-case__title:hover { color: var(--sv-blue); }
.sv-case__arrow {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--sv-white);
  color: var(--sv-ink);
  border: 1px solid var(--sv-line);
  transition: background .2s, color .2s, transform .25s var(--sv-ease);
}
.sv-case:hover .sv-case__arrow { background: var(--sv-blue); color: #fff; border-color: var(--sv-blue); transform: rotate(-45deg); }
.sv-case--featured .sv-case__media {
  grid-column: 1 / -1;
  margin: 1rem 0 0;
}
.sv-case__media img {
  width: 100%;
  aspect-ratio: 16/7;
  object-fit: cover;
  border-radius: var(--sv-radius);
}

/* -------------------- Team -------------------- */
.sv-team { background: var(--sv-white); }
.sv-team__grid {
  display: grid;
  gap: clamp(1.25rem, 2vw, 2rem);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .sv-team__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .sv-team__grid { grid-template-columns: repeat(4, 1fr); } }
.sv-member { text-align: left; }
.sv-member__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--sv-radius);
  background: var(--sv-bg);
  aspect-ratio: 3/4;
  margin-bottom: 1rem;
}
.sv-member__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--sv-ease);
}
.sv-member:hover .sv-member__media img { transform: scale(1.06); }
.sv-member__social {
  position: absolute;
  left: 50%; bottom: 1rem;
  transform: translate(-50%, 120%);
  display: flex; gap: .5rem;
  background: rgba(10,22,40,.85);
  padding: .5rem .6rem;
  border-radius: var(--sv-radius-pill);
  transition: transform .35s var(--sv-ease);
}
.sv-member:hover .sv-member__social { transform: translate(-50%, 0); }
.sv-member__social a {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  color: #fff; font-size: .8rem;
  border-radius: 50%;
  transition: background .2s;
}
.sv-member__social a:hover { background: var(--sv-blue); }
.sv-member__name { margin: 0 0 .15rem; font-size: 1.1rem; font-weight: 700; }
.sv-member__role { margin: 0; color: var(--sv-muted); font-size: .9rem; }

/* -------------------- Testimonials (API-Slider: .sv-testi__quote …) -------------------- */
.sv-testi__quote { position: relative; margin: 2rem 0 1.5rem; }
.sv-testi__quote-icon { font-size: 3rem; color: rgba(13,122,255,.18); margin-bottom: 1rem; display: block; }
.sv-testi__quote p {
  font-family: var(--sv-font-display);
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  line-height: 1.55;
  color: var(--sv-ink);
  font-weight: 500;
}
.sv-testi__author {
  display: flex; align-items: center; gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--sv-line);
  flex-wrap: wrap;
}
.sv-testi__author img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; filter: grayscale(.2); }
.sv-testi__author strong { display: block; font-weight: 700; }
.sv-testi__author span { font-size: .85rem; color: var(--sv-muted); }
.sv-testi__stars { display: flex; gap: .2rem; margin-left: auto; color: var(--sv-blue); font-size: .85rem; }
.sv-testi__dots { display: flex; gap: .5rem; }
.sv-testi__dots button {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(10,22,40,.2);
  transition: background .2s, width .2s;
}
.sv-testi__dots button.is-active { background: var(--sv-blue); width: 26px; border-radius: 999px; }

/* -------------------- Blog -------------------- */
.sv-blog { background: var(--sv-white); }
.sv-blog__grid {
  display: grid;
  gap: clamp(1.25rem, 2vw, 2rem);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .sv-blog__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .sv-blog__grid { grid-template-columns: repeat(3, 1fr); } }
.sv-post {
  background: var(--sv-white);
  border: 1px solid var(--sv-line);
  border-radius: var(--sv-radius);
  overflow: hidden;
  transition: transform .3s var(--sv-ease), box-shadow .3s var(--sv-ease);
}
.sv-post:hover { transform: translateY(-6px); box-shadow: var(--sv-shadow); }
.sv-post__media {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 16/10;
}
.sv-post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--sv-ease); }
.sv-post:hover .sv-post__media img { transform: scale(1.06); }
.sv-post__date {
  position: absolute; top: 1rem; left: 1rem;
  background: var(--sv-blue);
  color: #fff;
  padding: .55rem .75rem;
  border-radius: var(--sv-radius-sm);
  text-align: center;
  line-height: 1;
  font-family: var(--sv-font-display);
}
.sv-post__date strong { display: block; font-size: 1.15rem; font-weight: 800; }
.sv-post__date span { display: block; font-size: .7rem; letter-spacing: .1em; margin-top: .15rem; }
.sv-post__body { padding: 1.5rem; }
.sv-post__meta {
  display: flex; flex-wrap: wrap; gap: 1rem;
  color: var(--sv-muted);
  font-size: .85rem;
  margin-bottom: .75rem;
}
.sv-post__meta li { display: inline-flex; align-items: center; gap: .4rem; }
.sv-post__title { font-size: 1.15rem; font-weight: 700; line-height: 1.35; margin: 0; }
.sv-post__title a { color: var(--sv-ink); }
.sv-post__title a:hover { color: var(--sv-blue); }

/* -------------------- Contact -------------------- */
.sv-contact { background: var(--sv-bg); }
.sv-contact__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) { .sv-contact__grid { grid-template-columns: 1fr 1.2fr; } }
.sv-contact__intro .sv-section__title { max-width: 14ch; }
.sv-contact__phone {
  display: inline-flex; align-items: center; gap: 1rem;
  margin-top: 1.5rem;
  color: var(--sv-ink);
}
.sv-contact__phone:hover { color: var(--sv-ink); }
.sv-contact__phone-ic {
  display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--sv-blue); color: #fff; font-size: 1rem;
}
.sv-contact__phone small { display: block; color: var(--sv-muted); font-size: .8rem; }
.sv-contact__phone strong { font-size: 1.25rem; font-weight: 800; font-family: var(--sv-font-display); }

.sv-contact__form {
  background: var(--sv-white);
  border-radius: var(--sv-radius-lg);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: var(--sv-shadow-sm);
  display: grid;
  gap: 1rem 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .sv-contact__form { grid-template-columns: 1fr 1fr; } }
.sv-contact__form-head {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; gap: 1.25rem 2rem;
  padding-bottom: 1.25rem; margin-bottom: .25rem;
  border-bottom: 1px solid var(--sv-line);
  font-size: .92rem; color: var(--sv-text);
}
.sv-contact__form-head a, .sv-contact__form-head span { display: inline-flex; align-items: center; gap: .5rem; }
.sv-contact__form-head a { color: var(--sv-ink); }
.sv-contact__form-head a:hover { color: var(--sv-blue); }
.sv-field { display: flex; flex-direction: column; gap: .25rem; }
.sv-field--full { grid-column: 1 / -1; }
.sv-field label {
  font-size: .8rem; font-weight: 600;
  color: var(--sv-muted);
  text-transform: uppercase; letter-spacing: .1em;
}
.sv-field input, .sv-field select, .sv-field textarea {
  border: 0; border-bottom: 1px solid var(--sv-line);
  background: transparent;
  padding: .65rem 0;
  font-size: 1rem;
  color: var(--sv-ink);
  transition: border-color .2s;
}
.sv-field input:focus, .sv-field select:focus, .sv-field textarea:focus {
  outline: none; border-bottom-color: var(--sv-blue);
}
.sv-field textarea { resize: vertical; min-height: 100px; }
.sv-contact__submit { grid-column: 1 / -1; justify-self: start; margin-top: .5rem; }

/* -------------------- Newsletter -------------------- */
.sv-newsletter {
  position: relative;
  background:
    radial-gradient(ellipse at top left, rgba(13,122,255,.6), transparent 55%),
    linear-gradient(135deg, var(--sv-blue) 0%, var(--sv-blue-600) 100%);
  padding: clamp(3rem, 6vw, 5rem) 0;
  overflow: hidden;
  color: #fff;
}
.sv-newsletter::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(rgba(255,255,255,.18) 1px, transparent 1.5px) center / 18px 18px;
  opacity: .35;
  pointer-events: none;
}
.sv-newsletter__wrap { position: relative; text-align: center; }
.sv-newsletter__title { font-size: clamp(1.8rem, 3.5vw, 2.75rem); color: #fff; margin: 0 0 1.5rem; font-weight: 800; }
.sv-newsletter__form {
  max-width: 520px; margin: 0 auto;
  display: flex; gap: .5rem;
  background: #fff;
  padding: .4rem;
  border-radius: var(--sv-radius-pill);
  box-shadow: var(--sv-shadow);
}
.sv-newsletter__form input {
  flex: 1; min-width: 0;
  padding: .7rem 1rem;
  border: 0;
  background: transparent;
  font-size: 1rem;
  color: var(--sv-ink);
  outline: none;
}
.sv-newsletter__form .sv-btn { margin: 0; padding: .65rem 1.3rem; }

/* -------------------- Footer -------------------- */
.sv-footer { background: var(--sv-navy); color: rgba(255,255,255,.75); padding-top: clamp(3rem, 6vw, 5rem); }
.sv-footer__grid {
  display: grid;
  gap: clamp(2rem, 3vw, 3rem);
  grid-template-columns: 1fr;
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 720px) { .sv-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
.sv-footer__col h4 { color: #fff; font-size: 1rem; font-weight: 700; margin: 0 0 1.25rem; }
.sv-footer__col ul li { margin-bottom: .65rem; }
.sv-footer__col ul a { color: rgba(255,255,255,.7); font-size: .95rem; }
.sv-footer__col ul a:hover { color: var(--sv-blue); }
.sv-footer__col address {
  font-style: normal;
  color: rgba(255,255,255,.7);
  font-size: .9rem; line-height: 1.5;
  margin-bottom: 1rem;
}
.sv-footer__col address strong { color: #fff; font-weight: 700; }
.sv-footer__phone { color: #fff; font-weight: 700; font-family: var(--sv-font-display); }

.sv-footer__bottom {
  padding: 1.5rem 0;
}
.sv-footer__bottom-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem;
  font-size: .88rem;
  color: rgba(255,255,255,.55);
}
.sv-footer__bottom-inner p { margin: 0; }
.sv-footer__bottom-inner ul { display: flex; gap: 1.5rem; }
.sv-footer__bottom-inner a { color: rgba(255,255,255,.55); }
.sv-footer__bottom-inner a:hover { color: #fff; }

/* -------------------- Search popup -------------------- */
.sv-search {
  position: fixed; inset: 0;
  z-index: 300;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s;
}
.sv-search.is-open { pointer-events: auto; opacity: 1; }
.sv-search__backdrop {
  position: absolute; inset: 0;
  background: rgba(5,11,26,.7);
  backdrop-filter: blur(6px);
}
.sv-search__box {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(640px, 92vw);
  background: var(--sv-white);
  border-radius: var(--sv-radius-lg);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: var(--sv-shadow-lg);
}
.sv-search__close {
  position: absolute; top: 1rem; right: 1rem;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--sv-bg); color: var(--sv-ink);
  display: grid; place-items: center;
}
.sv-search__close:hover { background: var(--sv-ink); color: #fff; }
.sv-search__box h3 { font-size: 1.35rem; font-weight: 700; margin: 0 0 1.5rem; }
.sv-search__form {
  display: flex;
  align-items: center;
  gap: .5rem;
  border-bottom: 2px solid var(--sv-line);
}
.sv-search__form input {
  flex: 1;
  padding: .9rem 0;
  border: 0; outline: none;
  background: transparent;
  font-size: 1.05rem;
  color: var(--sv-ink);
}
.sv-search__form button {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--sv-blue); color: #fff;
}
.sv-search__form button:hover { background: var(--sv-blue-600); }

/* -------------------- Utilities / reduced motion -------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   GUTACHTEN OBERHAUSEN — landing components (rebuild-200)
   ========================================================================== */

/* -------------------- Logo with subtitle -------------------- */
.sv-logo__text { line-height: 1; letter-spacing: .02em; }
.sv-logo__sub {
  display: block;
  font-family: var(--sv-font-sans);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sv-muted);
  margin-top: 2px;
}
.sv-logo--light .sv-logo__sub { color: rgba(255,255,255,.65); }

/* -------------------- Header: Dark-Telefon-CTA, proportional zur Hero-Pille etwas kompakter -------------------- */
.sv-header__call.sv-btn.sv-btn--dark {
  display: none;
  flex-shrink: 0;
  min-width: 13.35rem;
  width: max-content;
  max-width: min(100%, 17.35rem);
  font-size: 1.02rem;
  font-weight: 600;
  border-width: 5px;
  --sv-cta-icon: 46px;
  --sv-cta-icon-fs: 0.9rem;
}
.sv-header__call.sv-btn.sv-btn--dark .sv-btn__body {
  gap: 0.72rem;
}
@media (min-width: 768px) {
  .sv-header__call.sv-btn.sv-btn--dark {
    display: inline-flex;
  }
}

/* -------------------- Section head: zentrierte Variante = linksbündig (Hero nutzt das nicht) -------------------- */
.sv-section__head--center {
  text-align: left;
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: .65rem;
  margin-inline: 0;
  max-width: 56rem;
}
.sv-section__head--center .sv-section__lead { max-width: 44rem; margin-inline: 0; color: var(--sv-text); }
.sv-section__title em { font-style: normal; color: var(--sv-blue); }
.sv-section__title--light em { color: #7db3ff; }

/* -------------------- SO EINFACH GEHT'S (Feature-Optik, Inhalt DE) -------------------- */
.sv-easy {
  background: #ffffff;
}
/* Eigener Block: .sv-hero + .sv-section überschreibt padding-top mit höherer Spezifität — Luft zur Vorteils-Karte darüber */
.sv-section.sv-easy {
  padding-top: clamp(12.25rem, 26vw, 18.75rem);
  padding-bottom: clamp(5rem, 10vw, 8.25rem);
}
/* Nutzfläche für die 4 Karten: etwas schmaler als 1420, nicht so eng wie 1200 */
.sv-easy .sv-container {
  max-width: min(1340px, 100%);
  padding-inline: var(--sv-gutter-x);
}
.sv-easy__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 0.85rem;
  max-width: 42rem;
  margin-inline: 0;
  margin-bottom: clamp(2.25rem, 4.5vw, 3.25rem);
}
.sv-easy__badge {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sv-blue);
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  line-height: 1;
  box-shadow: none;
}
.sv-easy__head .sv-section__title {
  color: #0F172A;
  margin: 0;
}
.sv-easy__head .sv-section__lead {
  color: #64748B;
  margin: 0;
  max-width: 36rem;
  margin-inline: 0;
}
.sv-easy__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 1.1rem;
}
@media (min-width: 640px) {
  .sv-easy__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
  .sv-easy__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; }
}
/* 4 Schritte: pro Karte einblenden, sobald der Bereich ins Sichtfeld kommt (JS: sv-easy--reveal-pending + is-easy-inview) */
.sv-js .sv-easy.sv-easy--reveal-pending .sv-easy__item:not(.is-easy-inview) {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  pointer-events: none;
}
.sv-js .sv-easy.sv-easy--reveal-pending .sv-easy__item {
  transition: opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1), transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
}
.sv-js .sv-easy .sv-easy__item.is-easy-inview {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .sv-easy.sv-easy--reveal-pending .sv-easy__item:not(.is-easy-inview),
  .sv-easy .sv-easy__item {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition: none;
  }
}

/* Harmonisches Scroll-Reveal mit Varianten (JS: .sv-reveal-host / .sv-reveal-item[data-reveal-kind] / .is-revealed) */
.sv-js .sv-reveal-item {
  opacity: 0;
  transition:
    opacity 0.78s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.78s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.78s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--sv-reveal-delay, 0ms);
  will-change: opacity, transform, filter;
}

/* Fliesstext "entsteht" durch Blur-Aufloesung */
.sv-js .sv-reveal-item[data-reveal-kind="text"] {
  transform: translate3d(0, 10px, 0);
  filter: blur(6px);
}

/* Titel/Headings: etwas praesenteres Entstehen */
.sv-js .sv-reveal-item[data-reveal-kind="head"] {
  transform: translate3d(0, 16px, 0) scale(0.985);
  filter: blur(8px);
}

/* Karten/Spalten: ruhiger Hub mit sanftem Skalieren */
.sv-js .sv-reveal-item[data-reveal-kind="card"] {
  transform: translate3d(0, 24px, 0) scale(0.985);
}

/* Buttons: dezenter Pop */
.sv-js .sv-reveal-item[data-reveal-kind="button"] {
  transform: translate3d(0, 8px, 0) scale(0.94);
  transition-duration: 0.6s;
}

/* Bilder von links einfliegen */
.sv-js .sv-reveal-item[data-reveal-kind="image-left"] {
  transform: translate3d(-36px, 8px, 0) scale(1.02);
  filter: saturate(0.95);
}

/* Bilder von rechts einfliegen */
.sv-js .sv-reveal-item[data-reveal-kind="image-right"] {
  transform: translate3d(36px, 8px, 0) scale(1.02);
  filter: saturate(0.95);
}

.sv-js .sv-reveal-host.is-revealed .sv-reveal-item {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: none;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  .sv-reveal-item,
  .sv-reveal-host.is-revealed .sv-reveal-item {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* Außen: 1px-Rahmen + schmaler Steg; Höhe folgt dem Inhalt (kein Scroll im Karten-Inneren) */
.sv-easy__item {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  min-height: 0;
  text-align: left;
  border: 1px solid #e2e8f0;
  padding: clamp(5px, 0.9vw, 8px);
  background: #ffffff;
  box-shadow: none;
  transition: border-color 0.2s var(--sv-ease);
}
.sv-easy__item:hover {
  border-color: #cbd5e1;
}
.sv-easy__card {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  text-align: left;
  /* Verlauf Richtung Hero-Blau (--sv-hero-bg) */
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 18%, #f1f5fa 42%, var(--sv-hero-bg) 100%);
  padding-block: clamp(1.2rem, 2.15vw, 1.5rem);
  padding-inline: clamp(1.05rem, 2vw, 1.4rem);
  transition: background 0.2s var(--sv-ease);
}
.sv-easy__item:hover .sv-easy__card {
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 12%, #edf2f8 38%, var(--sv-hero-bg) 100%);
}
.sv-easy__icon {
  display: block;
  width: auto;
  height: auto;
  min-height: 54px;
  margin: 0 0 1.3rem;
  padding: 0;
  background: transparent;
  color: #334155;
  transform-origin: 50% 45%;
}
.sv-easy__item:hover .sv-easy__icon {
  /* ease-in-out je Segment + mehr Stützpunkte = gleiche Weite, weicher Verlauf */
  animation: svEasyIconWiggle 1.35s ease-in-out both;
}
@keyframes svEasyIconWiggle {
  0% {
    transform: translate3d(0, 0, 0);
  }
  5% {
    transform: translate3d(-2.5px, 0, 0);
  }
  11% {
    transform: translate3d(-5px, 0, 0);
  }
  17% {
    transform: translate3d(-3.5px, 0, 0);
  }
  23% {
    transform: translate3d(0.5px, 0, 0);
  }
  29% {
    transform: translate3d(4px, 0, 0);
  }
  35% {
    transform: translate3d(3px, 0, 0);
  }
  43% {
    transform: translate3d(-1px, 0, 0);
  }
  51% {
    transform: translate3d(-2.5px, 0, 0);
  }
  60% {
    transform: translate3d(-0.5px, 0, 0);
  }
  69% {
    transform: translate3d(1px, 0, 0);
  }
  78% {
    transform: translate3d(1.5px, 0, 0);
  }
  88% {
    transform: translate3d(-0.35px, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
/* Gutachten-Karte: Blatt/Dokument + Plus + Rechtssymbol nebeneinander */
.sv-easy__icon--cluster {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: nowrap;
}
.sv-easy__icon--cluster .sv-easy__svg {
  flex-shrink: 0;
}
.sv-easy__icon-plus {
  font-family: var(--sv-font-display), system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.45rem;
  line-height: 1;
  color: currentColor;
  opacity: 0.9;
  user-select: none;
  margin-inline: 0.05rem;
}
.sv-easy__icon-slash {
  font-family: var(--sv-font-display), system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1;
  color: currentColor;
  opacity: 0.72;
  user-select: none;
  margin-inline: 0.02rem;
}
/* Auszahlung: Phosphor Thin (Auto, Schlüssel); Hand+Geld: Phosphor Regular, blau, etwas kräftigere Linien */
.sv-easy__icon--payout {
  gap: 0.35rem;
  flex-wrap: wrap;
  row-gap: 0.2rem;
}
.sv-easy__icon--payout .sv-easy__icon-outline {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-size: 44px;
  line-height: 1;
  color: currentColor;
  -webkit-font-smoothing: antialiased;
}
.sv-easy__icon--payout .sv-easy__icon-outline--accent {
  color: var(--sv-blue);
  font-size: 46px;
  width: 46px;
  height: 46px;
}
.sv-easy__icon--payout .sv-easy__icon-slash {
  font-size: 1.55rem;
}
/* Eigenes Outline-Symbol (anwalt.png), gleiche Box wie .sv-easy__svg */
.sv-easy__icon--cluster .sv-easy__icon-img {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: block;
  object-fit: contain;
  object-position: center;
}
.sv-easy__svg {
  width: 44px;
  height: 44px;
  display: block;
  stroke-width: 0.62;
  vector-effect: non-scaling-stroke;
}
/* Vor-Ort: Auto zentriert, Lupe wandert harmonisch links–rechts */
.sv-easy__icon--orbit {
  width: 62px;
  height: 54px;
  color: inherit;
}
.sv-easy__orbit {
  position: relative;
  width: 100%;
  height: 100%;
  color: inherit;
}
.sv-easy__orbit .sv-easy__svg--car {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  color: inherit;
}
.sv-easy__loupe-drift {
  position: absolute;
  left: 50%;
  top: 3px;
  width: 36px;
  height: 36px;
  margin-left: -18px;
  pointer-events: none;
  color: inherit;
  animation: svEasyLoupeDrift 5s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}
.sv-easy__orbit .sv-easy__svg--loupe {
  width: 100%;
  height: 100%;
  color: inherit;
  stroke: currentColor;
  stroke-width: 0.92;
}
/* Vergrößertes Auto in der Lupe: Striche sollen mit scale mitwachsen (nicht non-scaling vom Eltern-SVG) */
.sv-easy__svg--loupe .sv-easy__loupe-zoom,
.sv-easy__svg--loupe .sv-easy__loupe-zoom * {
  vector-effect: auto;
}
@keyframes svEasyLoupeDrift {
  0%,
  100% {
    transform: translateX(-13px);
  }
  50% {
    transform: translateX(13px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sv-easy__loupe-drift {
    animation: none !important;
    transform: translateX(0);
  }
  .sv-easy__item:hover .sv-easy__icon {
    animation: none;
  }
}
.sv-easy__title {
  font-family: var(--sv-font-display);
  font-size: 1.18rem;
  font-weight: 700;
  margin: 0 0 0.55rem;
  color: #0f172a;
}
.sv-easy__text {
  margin: 0;
  color: #64748b;
  font-size: 0.98rem;
  line-height: 1.58;
}
.sv-easy__accent {
  color: var(--sv-blue);
  font-weight: 800;
  font-size: 1.07em;
  letter-spacing: -0.015em;
}
.sv-easy__title .sv-easy__accent {
  font-size: inherit;
  font-weight: 800;
}
.sv-easy__title-slash {
  font-weight: 600;
  opacity: 0.55;
  margin-inline: 0.08em;
}
.sv-easy__call {
  align-self: flex-start;
  margin-top: 0.85rem;
  font-size: 0.9rem;
}
.sv-easy__call .sv-btn__icon {
  font-size: 0.85em;
}

/* -------------------- Schadengutachten / Wozu nach Unfall (.sv-entlastung) — Foto-Wasserzeichen + blaues Verlaufs-Overlay -------------------- */
.sv-entlastung {
  position: relative;
  isolation: isolate;
  padding-block: clamp(3.65rem, 7.5vw, 6.25rem);
  background: #fff;
  color: var(--sv-ink);
  box-shadow: inset 0 1px 0 rgba(10, 22, 40, 0.04);
}
/* Foto-Wasserzeichen (unten), gleiche Maske wie Overlay */
.sv-entlastung::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: min(50vw, 480px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.21;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 72%, rgba(255, 255, 255, 0.3) 86%, rgba(255, 255, 255, 0.82) 100%),
    url("../bilder/optimized/kfz-gutachter-heiken-pkw-oberhausen.jpg");
  background-size: cover;
  background-position: 22% center;
  background-repeat: no-repeat;
  filter: grayscale(1) contrast(1.04) brightness(0.98);
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 10%,
    rgba(0, 0, 0, 0.95) 16%,
    rgba(0, 0, 0, 0.86) 24%,
    rgba(0, 0, 0, 0.74) 32%,
    rgba(0, 0, 0, 0.62) 40%,
    rgba(0, 0, 0, 0.5) 48%,
    rgba(0, 0, 0, 0.4) 54%,
    rgba(0, 0, 0, 0.31) 60%,
    rgba(0, 0, 0, 0.24) 65%,
    rgba(0, 0, 0, 0.18) 70%,
    rgba(0, 0, 0, 0.13) 74%,
    rgba(0, 0, 0, 0.09) 78%,
    rgba(0, 0, 0, 0.06) 82%,
    rgba(0, 0, 0, 0.04) 85%,
    rgba(0, 0, 0, 0.026) 88%,
    rgba(0, 0, 0, 0.016) 91%,
    rgba(0, 0, 0, 0.01) 93.5%,
    rgba(0, 0, 0, 0.006) 95.5%,
    rgba(0, 0, 0, 0.003) 97.5%,
    rgba(0, 0, 0, 0.001) 99%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 10%,
    rgba(0, 0, 0, 0.95) 16%,
    rgba(0, 0, 0, 0.86) 24%,
    rgba(0, 0, 0, 0.74) 32%,
    rgba(0, 0, 0, 0.62) 40%,
    rgba(0, 0, 0, 0.5) 48%,
    rgba(0, 0, 0, 0.4) 54%,
    rgba(0, 0, 0, 0.31) 60%,
    rgba(0, 0, 0, 0.24) 65%,
    rgba(0, 0, 0, 0.18) 70%,
    rgba(0, 0, 0, 0.13) 74%,
    rgba(0, 0, 0, 0.09) 78%,
    rgba(0, 0, 0, 0.06) 82%,
    rgba(0, 0, 0, 0.04) 85%,
    rgba(0, 0, 0, 0.026) 88%,
    rgba(0, 0, 0, 0.016) 91%,
    rgba(0, 0, 0, 0.01) 93.5%,
    rgba(0, 0, 0, 0.006) 95.5%,
    rgba(0, 0, 0, 0.003) 97.5%,
    rgba(0, 0, 0, 0.001) 99%,
    transparent 100%
  );
}
/* Blau-Overlay: von links nach rechts (muss mit Maske passen — links sichtbar, rechts ausgeblendet) */
.sv-entlastung::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: min(50vw, 480px);
  pointer-events: none;
  z-index: 0;
  background-image: linear-gradient(
    to right,
    rgba(200, 224, 255, 0.88) 0%,
    rgba(204, 227, 255, 0.82) 7%,
    rgba(208, 229, 255, 0.74) 14%,
    rgba(212, 232, 255, 0.64) 22%,
    rgba(216, 234, 255, 0.54) 30%,
    rgba(220, 236, 255, 0.44) 38%,
    rgba(224, 238, 255, 0.35) 45%,
    rgba(226, 239, 255, 0.28) 51%,
    rgba(230, 242, 255, 0.22) 57%,
    rgba(232, 243, 255, 0.17) 62%,
    rgba(234, 244, 255, 0.13) 67%,
    rgba(236, 245, 255, 0.1) 71%,
    rgba(238, 246, 255, 0.076) 75%,
    rgba(240, 247, 255, 0.056) 78%,
    rgba(242, 248, 255, 0.04) 81%,
    rgba(244, 249, 255, 0.028) 84%,
    rgba(246, 250, 255, 0.019) 87%,
    rgba(248, 251, 255, 0.012) 90%,
    rgba(250, 252, 255, 0.007) 93%,
    rgba(252, 253, 255, 0.004) 95.5%,
    rgba(254, 255, 255, 0.0015) 98%,
    rgba(255, 255, 255, 0) 100%
  );
  /* Noch breiter + feinere Stufen → Übergang zieht sich weiter */
  background-size: 285% 100%;
  background-position: left center;
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 10%,
    rgba(0, 0, 0, 0.95) 16%,
    rgba(0, 0, 0, 0.86) 24%,
    rgba(0, 0, 0, 0.74) 32%,
    rgba(0, 0, 0, 0.62) 40%,
    rgba(0, 0, 0, 0.5) 48%,
    rgba(0, 0, 0, 0.4) 54%,
    rgba(0, 0, 0, 0.31) 60%,
    rgba(0, 0, 0, 0.24) 65%,
    rgba(0, 0, 0, 0.18) 70%,
    rgba(0, 0, 0, 0.13) 74%,
    rgba(0, 0, 0, 0.09) 78%,
    rgba(0, 0, 0, 0.06) 82%,
    rgba(0, 0, 0, 0.04) 85%,
    rgba(0, 0, 0, 0.026) 88%,
    rgba(0, 0, 0, 0.016) 91%,
    rgba(0, 0, 0, 0.01) 93.5%,
    rgba(0, 0, 0, 0.006) 95.5%,
    rgba(0, 0, 0, 0.003) 97.5%,
    rgba(0, 0, 0, 0.001) 99%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 10%,
    rgba(0, 0, 0, 0.95) 16%,
    rgba(0, 0, 0, 0.86) 24%,
    rgba(0, 0, 0, 0.74) 32%,
    rgba(0, 0, 0, 0.62) 40%,
    rgba(0, 0, 0, 0.5) 48%,
    rgba(0, 0, 0, 0.4) 54%,
    rgba(0, 0, 0, 0.31) 60%,
    rgba(0, 0, 0, 0.24) 65%,
    rgba(0, 0, 0, 0.18) 70%,
    rgba(0, 0, 0, 0.13) 74%,
    rgba(0, 0, 0, 0.09) 78%,
    rgba(0, 0, 0, 0.06) 82%,
    rgba(0, 0, 0, 0.04) 85%,
    rgba(0, 0, 0, 0.026) 88%,
    rgba(0, 0, 0, 0.016) 91%,
    rgba(0, 0, 0, 0.01) 93.5%,
    rgba(0, 0, 0, 0.006) 95.5%,
    rgba(0, 0, 0, 0.003) 97.5%,
    rgba(0, 0, 0, 0.001) 99%,
    transparent 100%
  );
}
@media (prefers-reduced-transparency: reduce) {
  .sv-entlastung::before {
    opacity: 0.145;
  }
  .sv-entlastung::after {
    opacity: 0.58;
  }
}
/* Gleiche nutzbare Breite wie „Über mich“ (.sv-about-showcase .sv-container) */
.sv-entlastung > .sv-container {
  position: relative;
  z-index: 1;
  max-width: min(1340px, 100%);
  padding-inline: var(--sv-gutter-x);
}
.sv-entlastung .sv-section__head--split {
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding-bottom: clamp(1.1rem, 2vw, 1.6rem);
  margin-bottom: clamp(1.75rem, 3.2vw, 2.65rem);
  border-bottom: 1px solid rgba(10, 22, 40, 0.08);
  box-shadow: none;
}
.sv-entlastung .sv-section__head--split .sv-section__heading {
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
}
@media (min-width: 900px) {
  .sv-entlastung .sv-section__head--split > .sv-section__lead {
    font-size: clamp(1rem, 1.2vw, 1.06rem);
    color: var(--sv-text);
  }
}
/* Kicker: nutzt Basis-.sv-kicker (ohne Box) */
.sv-entlastung .sv-section__title {
  color: var(--sv-ink);
  letter-spacing: -0.035em;
  text-shadow: none;
}
.sv-entlastung .sv-section__title em {
  color: var(--sv-blue);
  font-style: normal;
  font-weight: inherit;
}
.sv-entlastung .sv-section__lead {
  max-width: min(52rem, 100%);
  width: 100%;
  margin-inline: 0;
  font-size: clamp(1rem, 1.2vw, 1.06rem);
  line-height: 1.7;
  color: var(--sv-text);
}

.sv-entlastung__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-bottom: 2rem;
}
@media (min-width: 768px) {
  .sv-entlastung__cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.35rem;
  }
}
.sv-entlastung__card {
  position: relative;
  background: #fff;
  border: 1px solid var(--sv-line);
  border-radius: var(--sv-radius-lg);
  padding: clamp(1.45rem, 2.3vw, 1.7rem);
  box-shadow: var(--sv-shadow-sm);
  transition:
    transform 0.22s var(--sv-ease),
    box-shadow 0.22s var(--sv-ease),
    border-color 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .sv-entlastung__card:hover {
    transform: translateY(-2px);
    border-color: rgba(23, 111, 227, 0.22);
    box-shadow: var(--sv-shadow);
  }
}
/* Wie „So einfach geht’s“ (.sv-easy__icon): Outline-Icon, keine Icon-Box */
.sv-entlastung__icon {
  display: block;
  width: auto;
  height: auto;
  min-height: 54px;
  margin: 0 0 1.3rem;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: #334155;
  transform-origin: 50% 45%;
  line-height: 1;
}
.sv-entlastung__icon > i {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  font-size: 44px;
  font-style: normal;
  color: currentColor;
  -webkit-font-smoothing: antialiased;
}
.sv-entlastung__card:nth-child(3) .sv-entlastung__icon > i {
  color: var(--sv-blue);
}
@media (hover: hover) and (pointer: fine) {
  .sv-entlastung__card:hover .sv-entlastung__icon {
    animation: svEasyIconWiggle 1.35s ease-in-out both;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sv-entlastung__card:hover .sv-entlastung__icon {
    animation: none;
  }
}
.sv-entlastung__card h3 {
  font-family: var(--sv-font-display);
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  margin: 0 0 0.5rem;
  color: var(--sv-ink);
}
.sv-entlastung__card p {
  margin: 0;
  color: var(--sv-text);
  line-height: 1.62;
  font-size: 0.93rem;
  letter-spacing: 0.01em;
}

/* Hinweis: nur Fließtext, keine Glas-/Panel-Fläche */
.sv-entlastung__info {
  margin: 0;
  margin-top: clamp(0.75rem, 1.5vw, 1.1rem);
  margin-inline: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  max-width: min(52rem, 100%);
  line-height: 1.62;
  font-size: clamp(0.92rem, 1.05vw, 0.98rem);
  color: var(--sv-text);
  text-align: left;
}
.sv-entlastung__info strong {
  color: var(--sv-ink);
  font-weight: 700;
  margin-right: 0.25em;
}
/* Theme-Radius trotz globaler 4px-Liste */
.sv-entlastung .sv-entlastung__card {
  border-radius: var(--sv-radius-lg);
}
.sv-entlastung .sv-entlastung__icon {
  border-radius: 0;
}

/* -------------------- ÃœBER MICH -------------------- */
.sv-ueber { padding-block: clamp(3.5rem, 7vw, 6rem); }
.sv-ueber__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 992px) { .sv-ueber__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.sv-ueber__media { position: relative; }
.sv-ueber__portrait {
  margin: 0;
  position: relative;
  border-radius: clamp(20px, 3vw, 28px);
  overflow: hidden;
  background: var(--sv-bg-2);
  box-shadow: var(--sv-shadow);
  aspect-ratio: 4 / 5;
}
.sv-ueber__portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sv-ueber__portrait figcaption {
  position: absolute; left: 1.1rem; bottom: 1.1rem; right: 1.1rem;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(6px);
  border-radius: 12px;
  padding: .75rem 1rem;
  display: flex; flex-direction: column; gap: .15rem;
  box-shadow: var(--sv-shadow-sm);
}
.sv-ueber__portrait figcaption strong { color: var(--sv-ink); font-family: var(--sv-font-display); font-size: 1.02rem; }
.sv-ueber__portrait figcaption span  { color: var(--sv-text); font-size: .85rem; }
.sv-ueber__copy { display: flex; flex-direction: column; gap: 1.25rem; }
.sv-ueber__accent { color: var(--sv-blue); }
.sv-ueber__text p { margin: 0 0 .85rem; color: var(--sv-text); line-height: 1.7; font-size: 1rem; }
.sv-ueber__text p:last-child { margin-bottom: 0; }
.sv-ueber__stats {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1rem;
  border-top: 1px solid var(--sv-line);
  border-bottom: 1px solid var(--sv-line);
  padding-block: 1.25rem;
}
.sv-ueber__stats li { display: flex; flex-direction: column; gap: .25rem; }
.sv-ueber__num {
  font-family: var(--sv-font-display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 800;
  color: var(--sv-ink);
  line-height: 1;
}
.sv-ueber__lbl { color: var(--sv-text); font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; }
.sv-ueber__cta { display: flex; flex-wrap: wrap; gap: .85rem; }

/* -------------------- FAQ -------------------- */
.sv-faq { padding-block: clamp(3.5rem, 7vw, 6rem); background: var(--sv-white); }
.sv-faq .sv-section__head--center .sv-kicker {
  line-height: 1;
}
.sv-faq__list { max-width: 56rem; margin: 2.5rem 0 0; display: grid; gap: .85rem; }
.sv-faq__item {
  background: #fff;
  border: 1px solid var(--sv-line);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .25s, box-shadow .25s;
}
.sv-faq__item[open] { border-color: rgba(13,122,255,.35); box-shadow: 0 8px 24px rgba(10,22,40,.06); }
.sv-faq__q {
  list-style: none;
  cursor: pointer;
  padding: 1.1rem 1.4rem;
  font-family: var(--sv-font-display);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--sv-ink);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  transition: background .2s;
}
.sv-faq__q::-webkit-details-marker { display: none; }
.sv-faq__q:hover { background: rgba(13,122,255,.04); }
.sv-faq__ic {
  position: relative;
  width: 22px; height: 22px;
  flex-shrink: 0;
}
.sv-faq__ic::before, .sv-faq__ic::after {
  content: ''; position: absolute;
  background: var(--sv-blue);
  border-radius: 2px;
  transition: transform .25s var(--sv-ease);
}
.sv-faq__ic::before { left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%); }
.sv-faq__ic::after  { top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%); }
.sv-faq__item[open] .sv-faq__ic::after { transform: translateX(-50%) scaleY(0); }
.sv-faq__a { padding: 0 1.4rem 1.25rem; color: var(--sv-text); line-height: 1.65; font-size: .96rem; }
.sv-faq__a p { margin: 0; }

/* -------------------- TESTI extras (avatar, google) -------------------- */
.sv-testi__avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sv-blue) 0%, var(--sv-blue-600) 100%);
  color: #fff;
  display: grid; place-items: center;
  font-family: var(--sv-font-display);
  font-weight: 700;
  font-size: 1.05rem;
  flex-shrink: 0;
}
.sv-testi__stars {
  list-style: none; padding: 0; margin: 0 0 0 auto;
  display: flex; gap: .15rem;
  color: #f6b32a;
  font-size: .9rem;
}
.sv-testi__google {
  display: inline-flex; align-items: center; gap: .65rem;
  margin-top: 1.5rem;
  padding: .85rem 1.25rem;
  background: #fff;
  border: 1px solid var(--sv-line);
  border-radius: var(--sv-radius-pill);
  color: var(--sv-ink);
  font-weight: 600;
  font-size: .95rem;
  transition: background .2s, border-color .2s, transform .18s var(--sv-ease);
}
.sv-testi__google:hover { color: var(--sv-ink); background: var(--sv-bg); border-color: var(--sv-muted); transform: translateY(-1px); }
.sv-testi__google .fa-google { color: #4285F4; }

/* -------------------- CONTACT extras (phone block, wa, privacy) -------------------- */
.sv-contact__phone,
.sv-contact__wa {
  display: flex; align-items: center; gap: 1rem;
  margin-top: 1rem;
  padding: 1rem 1.2rem;
  background: #fff;
  border: 1px solid var(--sv-line);
  border-radius: 14px;
  color: var(--sv-ink);
  transition: transform .2s var(--sv-ease), box-shadow .2s, border-color .2s;
}
.sv-contact__phone:hover,
.sv-contact__wa:hover { color: var(--sv-ink); transform: translateY(-2px); box-shadow: var(--sv-shadow-sm); border-color: rgba(13,122,255,.25); }
.sv-contact__phone-ic,
.sv-contact__wa-ic {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  flex-shrink: 0;
}
.sv-contact__phone-ic { background: var(--sv-navy-deep); }
.sv-contact__wa-ic { background: #25D366; }
.sv-contact__phone small,
.sv-contact__wa small { display: block; color: var(--sv-muted); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: .15rem; }
.sv-contact__phone strong,
.sv-contact__wa strong { display: block; font-family: var(--sv-font-display); font-size: 1.05rem; color: var(--sv-ink); }
.sv-contact__note { margin-top: 1rem; font-size: .88rem; color: var(--sv-muted); }
.sv-contact__privacy { grid-column: 1 / -1; font-size: .8rem; color: var(--sv-muted); margin: 0; }

/* -------------------- FOOTER extras (address, hours) -------------------- */
.sv-footer__address { font-style: normal; color: rgba(255,255,255,.7); line-height: 1.6; margin: 0 0 1rem; }
.sv-footer__contact { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.sv-footer__contact li { display: flex; align-items: center; gap: .65rem; color: rgba(255,255,255,.78); }
.sv-footer__contact i { color: var(--sv-blue); width: 18px; text-align: center; }
.sv-footer__contact a { color: rgba(255,255,255,.78); }
.sv-footer__contact a:hover { color: #fff; }
.sv-footer__hours { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.sv-footer__hours li {
  display: flex; justify-content: space-between; gap: 1rem;
  color: rgba(255,255,255,.78);
  border-bottom: none;
  padding-bottom: 0;
}
.sv-footer__hours li:last-child { padding-bottom: 0; }
.sv-footer__hours li span:last-child { color: #fff; font-weight: 600; }

/* -------------------- Nach oben (fix unten rechts, ehem. Telefon/WhatsApp) -------------------- */
.sv-back-top {
  position: fixed;
  right: clamp(0.85rem, 2.5vw, 1.5rem);
  bottom: clamp(0.85rem, 2.5vw, 1.5rem);
  z-index: 200;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 1.35rem;
  line-height: 0;
  text-decoration: none;
  background: var(--sv-blue);
  box-shadow: 0 12px 28px rgba(10, 22, 40, 0.22);
}
.sv-back-top:hover,
.sv-back-top:focus-visible {
  color: #fff;
  background: var(--sv-blue-600);
}
.sv-back-top:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* ==========================================================================
   GLOBAL ANGULAR OVERRIDE (rebuild-203)
   Kantige Radien für Flächen/Karten; Buttons bleiben Pillen (sv-btn).
   ========================================================================== */
:root {
  --sv-radius-sm:   2px;
  --sv-radius:      4px;
  --sv-radius-lg:   4px;
  --sv-radius-pill: 999px;
}

/* --- Header/Leiste: Search/Testi kantig; Leisten-Kapsel = volle Pille (.sv-header__inner) --- */
.sv-header__search,
.sv-testi__google:not(.sv-greviews__google) {
  border-radius: 4px;
}
.sv-header__menu {
  border-radius: 0;
}

/* Icons IM Button bleiben rund (kleine Kreis-Bullets) */
.sv-btn__icon,
.sv-header__call i,
.sv-header__search i { border-radius: 50%; }

/* --- Cards / Panels --- */
.sv-feature,
.sv-service,
.sv-service__media,
.sv-post,
.sv-easy__item,
.sv-entlastung__card,
.sv-offers__card,
.sv-offers__media,
.sv-faq__item,
.sv-contact__phone,
.sv-contact__wa,
.sv-contact__form,
.sv-field input,
.sv-field select,
.sv-field textarea { border-radius: 4px; }

.sv-offers__card,
.sv-offers__media { border-radius: 0; }

/* Sehr leichte Eckenmarkierung für Mini-Boxen */
.sv-easy__icon,
.sv-entlastung__icon,
.sv-feature__icon { border-radius: 4px; }

/* sv-easy: Rahmen + innere Karte kantig wie Referenz; Badge leicht abgerundet */
.sv-easy .sv-easy__item,
.sv-easy .sv-easy__card { border-radius: 0; }
.sv-easy .sv-easy__icon { border-radius: 0; }
.sv-post__date { border-radius: 2px; }

/* --- Bilder eckig (nicht abgerundet) --- */
.sv-about__img,
.sv-ueber__portrait,
.sv-ueber__portrait img,
.sv-greviews__figure,
.sv-greviews__img,
.sv-service__media img,
.sv-post__media,
.sv-post__media img,
.sv-hero__figure-card .sv-hero__figure-photo { border-radius: 0; }

/* Über-mich: Caption als klarer Block, keine schwebende abgerundete Kapsel */
.sv-ueber__portrait {
  box-shadow: none;
  background: transparent;
  overflow: hidden;
}
.sv-ueber__portrait figcaption {
  position: static;
  background: transparent;
  backdrop-filter: none;
  border-radius: 0;
  box-shadow: none;
  padding: .85rem 0 0;
  margin-top: .9rem;
  border-top: 2px solid var(--sv-blue);
}

/* Google-Badge (Kundenstimmen): eckig, Radius oben überschrieben */
.sv-greviews__badge { border-radius: 0; }

/* About-Badge (rotierender Kreis) bleibt rund — funktional */
.sv-about__badge,
.sv-about__play,
.sv-about__thumb,
.sv-feature__link,
.sv-testi__avatar,
.sv-contact__phone-ic,
.sv-contact__wa-ic,
.sv-back-top { border-radius: 50%; }

/* -------------------- Footer redesign -------------------- */
.sv-btn--white {
  background: #fff;
  color: #0b1a3a;
  box-shadow: 0 14px 28px rgba(8, 20, 48, 0.18);
}

.sv-btn--white:hover,
.sv-btn--white:focus-visible {
  color: #0b1a3a;
  background: #fff;
}

.sv-footer {
  background: #07142c;
  color: rgba(255, 255, 255, 0.76);
  padding-top: 0;
}

.sv-footer__top {
  position: relative;
  overflow: hidden;
  background-color: #07142c;
  background-image: linear-gradient(180deg, #064a9e 0%, #07142c 72%, #07142c 100%);
}

.sv-footer__top-photo {
  position: absolute;
  inset: 0;
  left: -1px;
  width: calc(100% + 2px);
  z-index: 0;
  pointer-events: none;
  background-image: url("../bilder/optimized/kfz-gutachter-heiken-pkw-oberhausen.jpg");
  background-size: cover;
  background-position: right 57%;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 42%,
    rgba(0, 0, 0, 0.72) 62%,
    rgba(0, 0, 0, 0.28) 82%,
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 42%,
    rgba(0, 0, 0, 0.72) 62%,
    rgba(0, 0, 0, 0.28) 82%,
    transparent 100%
  );
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
}

.sv-footer__top::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(140, 200, 255, 0.12) 0%, rgba(140, 200, 255, 0) 32%),
    linear-gradient(
      90deg,
      rgba(7, 20, 44, 0.14) 0%,
      rgba(7, 20, 44, 0.08) 18%,
      rgba(7, 20, 44, 0.04) 36%,
      rgba(7, 20, 44, 0.018) 55%,
      rgba(7, 20, 44, 0.006) 72%,
      transparent 88%
    ),
    linear-gradient(
      180deg,
      rgba(0, 86, 179, 0.82) 0%,
      rgba(6, 96, 196, 0.78) 9%,
      rgba(14, 108, 210, 0.74) 18%,
      rgba(23, 111, 227, 0.68) 28%,
      rgba(16, 88, 195, 0.58) 40%,
      rgba(10, 62, 150, 0.52) 52%,
      rgba(7, 20, 44, 0.55) 64%,
      rgba(7, 20, 44, 0.72) 74%,
      rgba(7, 20, 44, 0.86) 84%,
      rgba(7, 20, 44, 0.95) 92%,
      #07142c 100%
    );
  pointer-events: none;
}

.sv-footer__top::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(
    ellipse 125% 85% at 50% -5%,
    rgba(120, 190, 255, 0.22) 0%,
    rgba(40, 120, 210, 0.1) 36%,
    transparent 58%
  );
  pointer-events: none;
}

.sv-footer__top-inner {
  position: relative;
  z-index: 4;
  display: grid;
  justify-items: start;
  gap: 1rem;
  min-height: clamp(11.5rem, 17vw, 15.5rem);
  padding-block: clamp(1.85rem, 3.5vw, 2.75rem);
}

.sv-footer__top-copy {
  max-width: 38rem;
  width: 100%;
  display: grid;
  gap: 0.9rem;
  justify-items: start;
  text-align: left;
}

.sv-footer__top-copy .sv-kicker {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  font-weight: 600;
}

.sv-footer__top-title {
  margin: 0;
  color: #fff;
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  line-height: 1.1;
  letter-spacing: -0.035em;
  font-weight: 800;
  max-width: 28ch;
}

.sv-footer__top-text {
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: clamp(1rem, 1.2vw, 1.06rem);
  line-height: 1.7;
  max-width: 36rem;
  font-weight: 400;
}

.sv-footer__top-btn {
  margin-top: 0.6rem;
  font-size: 0.92rem;
  font-weight: 500;
}

.sv-footer__top-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.8rem 0.95rem;
  margin-top: 0.6rem;
}

.sv-footer__top-actions .sv-btn--dark,
.sv-footer__top-actions .sv-btn--whatsapp {
  background: #fff;
  border-color: rgba(255, 255, 255, 0.88);
  color: var(--sv-ink);
  box-shadow: 0 14px 28px rgba(7, 20, 44, 0.12);
}

.sv-footer__top-actions .sv-btn--dark:hover,
.sv-footer__top-actions .sv-btn--whatsapp:hover,
.sv-footer__top-actions a.sv-btn--dark:hover,
.sv-footer__top-actions a.sv-btn--whatsapp:hover {
  color: #fff;
}

.sv-footer__top-actions .sv-btn--dark .sv-btn__icon,
.sv-footer__top-actions .sv-btn--whatsapp .sv-btn__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  line-height: 1;
}

.sv-footer__top-actions .sv-btn--dark .sv-btn__icon {
  background: var(--sv-blue);
}

.sv-footer__top-actions .sv-btn--whatsapp .sv-btn__icon {
  background: #25d366;
}

.sv-footer__top-actions .sv-btn--dark .sv-btn__label,
.sv-footer__top-actions .sv-btn--whatsapp .sv-btn__label {
  color: inherit;
}

.sv-footer__top-actions .sv-btn__icon i {
  display: block;
  line-height: 1;
  transform: translateY(0);
}

/* ============================================================ */
/* === Mobile-Feinschliff: Hierarchie + Typo + Back-to-Top ==== */
/* ============================================================ */
@media (max-width: 767.98px) {
  /* "Noch Fragen?"-Block: gleiche Primary/Secondary-Logik wie im Hero */
  .sv-footer__top-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
    width: 100%;
  }
  .sv-footer__top-actions .sv-btn--dark,
  .sv-footer__top-actions .sv-btn--whatsapp {
    width: 100%;
    min-width: 0;
    border-width: 3px;
    font-size: 1.02rem;
  }
  /* Primary: Call — solid weiß auf dunklem Photo-BG = höchster Kontrast */
  .sv-footer__top-actions .sv-btn--dark {
    background: #fff;
    border-color: #fff;
    color: var(--sv-ink);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
  }
  /* Secondary: WhatsApp — Outline (transparent + weißer Rand) */
  .sv-footer__top-actions .sv-btn--whatsapp {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.55);
    color: #fff;
    box-shadow: none;
  }
  .sv-footer__top-actions .sv-btn--whatsapp .sv-btn__label--a,
  .sv-footer__top-actions .sv-btn--whatsapp .sv-btn__label--b {
    color: #fff;
  }
  /* Hover bleibt funktional — Balken wächst, Text wird weiß */
  .sv-footer__top-actions .sv-btn--whatsapp:hover,
  .sv-footer__top-actions a.sv-btn--whatsapp:hover {
    color: #fff;
    background: transparent;
  }

  /* H2-Größen zurücknehmen: bei 390px nimmt der Min-Wert zu viel Raum */
  .sv-section__title,
  .sv-footer__top-title {
    font-size: clamp(1.5rem, 6.4vw, 2rem);
    line-height: 1.15;
    letter-spacing: -0.028em;
  }

  /* Back-to-Top-Button: dezenter + erst nach Scroll sichtbar */
  .sv-back-top {
    width: 44px;
    height: 44px;
    font-size: 1.05rem;
    background: rgba(13, 122, 255, 0.78);
    box-shadow: 0 6px 16px rgba(10, 22, 40, 0.18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition:
      opacity .25s ease,
      transform .25s ease,
      visibility 0s linear .25s,
      background .2s;
  }
  .sv-back-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s, 0s, 0s, 0s;
  }
}

.sv-footer__main {
  background: #07142c;
}
.sv-footer__main .sv-container {
  text-align: left;
}

.sv-footer__grid {
  display: grid;
  gap: clamp(2rem, 3vw, 3rem);
  grid-template-columns: 1fr;
  padding-top: clamp(3.5rem, 8vw, 6rem);
  /* Mehr Luft über der dunkelgrauen Fußzeile (.sv-footer__bottom), v. a. unter der E-Mail */
  padding-bottom: clamp(4.75rem, 11vw, 8rem);
}

.sv-footer__brand {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 1rem;
}

.sv-footer__brand h3 {
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--sv-font-display);
  font-size: clamp(1rem, 1.18vw, 1.16rem);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -0.02em;
  max-width: 36ch;
}

.sv-footer__brand-copy {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.7;
  max-width: 26rem;
  font-size: 0.9rem;
}

.sv-footer__col {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 0.95rem;
}

.sv-footer__col h4 {
  margin: 0;
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.sv-footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.6rem;
}

.sv-footer__col ul li {
  margin-bottom: 0;
}

.sv-footer__col ul a {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.88rem;
  font-weight: 400;
}

.sv-footer__col ul a:hover {
  color: #fff;
}

.sv-footer__address {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.7;
  font-size: 0.88rem;
  font-style: normal;
}

.sv-footer__contact {
  list-style: none;
  padding: 0;
  margin: 0 0 clamp(1.35rem, 4vw, 2.25rem) 0;
  display: grid;
  gap: 0.6rem;
}

.sv-footer__contact li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.88rem;
}

.sv-footer__contact i {
  width: 16px;
  color: rgba(107, 183, 255, 0.85);
  text-align: center;
  font-size: 0.85rem;
}

.sv-footer__contact a {
  color: rgba(255, 255, 255, 0.7);
}

.sv-footer__contact a:hover {
  color: #fff;
}

.sv-footer__share {
  display: grid;
  gap: 0.8rem;
}

.sv-footer__share-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.sv-footer__share-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.72rem 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.84);
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1;
  transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.sv-footer__share-link i {
  color: rgba(107, 183, 255, 0.92);
  font-size: 0.9rem;
}

.sv-footer__share-link:hover {
  transform: translateY(-1px);
  border-color: rgba(107, 183, 255, 0.42);
  background: rgba(107, 183, 255, 0.1);
  color: #fff;
}

.sv-footer__share-link:focus-visible {
  outline: 2px solid rgba(107, 183, 255, 0.85);
  outline-offset: 3px;
}

.sv-footer__hours {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.6rem;
}

.sv-footer__hours li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: rgba(255, 255, 255, 0.6);
  border-bottom: none;
  padding-bottom: 0;
  font-size: 0.88rem;
}

.sv-footer__hours li span:first-child {
  flex: 1 1 auto;
  min-width: 0;
}

.sv-footer__hours li:last-child {
  padding-bottom: 0;
}

.sv-footer__hours li span:last-child {
  color: rgba(255, 255, 255, 0.88);
  font-weight: 500;
}

.sv-footer__bottom {
  background: #1c2838;
  padding: 1.35rem 0;
}

.sv-footer__bottom-inner {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.5rem 1.25rem;
  font-family: var(--sv-font-display);
  font-size: clamp(0.7rem, 0.4vw + 0.64rem, 0.8rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.78);
}

.sv-footer__bottom-inner p {
  margin: 0;
}

.sv-footer__bottom-inner ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.65rem 1.15rem;
  padding: 0;
  margin: 0;
}

.sv-footer__bottom-inner a {
  color: rgba(255, 255, 255, 0.88);
}

.sv-footer__bottom-inner a:hover {
  color: #fff;
}

@media (min-width: 900px) {
  .sv-footer__grid {
    grid-template-columns: minmax(0, 1.45fr) repeat(3, minmax(0, 1fr));
    align-items: start;
  }

  .sv-footer__brand {
    padding-right: clamp(1.5rem, 2.5vw, 2.5rem);
  }
}

/* -------------------- Mobile: einheitliche Gutter & vertikale Sektionsabstände (≤991.98px) -------------------- */
@media (max-width: 991.98px) {
  .sv-section {
    --sv-section-pad-y: clamp(2.75rem, 7vw, 4.25rem);
  }
  .sv-hero + .sv-section {
    padding-top: calc(var(--sv-section-pad-y) + clamp(1.25rem, 3.5vw, 2.25rem));
  }
  .sv-section.sv-easy {
    padding-top: clamp(9.25rem, 20vw, 13.5rem);
    padding-bottom: var(--sv-section-pad-y);
  }
  .sv-header__inner.sv-container,
  .sv-container.sv-scroll-header__inner {
    padding-inline: var(--sv-gutter-x);
    padding-left: max(
      env(safe-area-inset-left, 0px),
      var(--sv-hero-copy-pad-l-narrow)
    );
  }
  .sv-section.sv-entlastung {
    padding-block: var(--sv-section-pad-y);
  }
  .sv-faq {
    padding-block: var(--sv-section-pad-y);
  }
  .sv-footer__grid {
    padding-top: var(--sv-section-pad-y);
    padding-bottom: calc(var(--sv-section-pad-y) + clamp(2rem, 5.5vw, 3.5rem));
  }
  .sv-footer__top-inner {
    padding-block: clamp(1.75rem, 3.2vw, 2.5rem);
  }
}
@media (max-width: 899.98px) {
  /* Text + CTA zuerst, Foto inkl. Glaskachel am Ende (DOM: aside, pane) */
  .sv-greviews__split {
    display: flex;
    flex-direction: column;
    padding-inline: 0;
  }
  .sv-greviews__pane {
    order: 1;
    border-top: none;
  }
  .sv-greviews__visual {
    order: 2;
    border-top: 1px solid var(--sv-line);
    min-height: 0;
    padding: 0;
    align-items: stretch;
    justify-content: center;
  }
  .sv-greviews__figure {
    max-width: none;
    width: 100%;
    border-radius: 0;
  }
  .sv-greviews__pane-inner {
    padding-block: clamp(1.75rem, 4.2vw, 2.75rem);
    padding-inline: var(--sv-gutter-x);
    max-width: none;
  }
}

/* ==========================================================================
   SCROLL-HEADER: Telefon-Icon-Button (Mobile) vertikal mittig
   ========================================================================== */
@media (max-width: 991.98px) {
  .sv-scroll-header .sv-header__actions {
    align-items: center;
  }
  .sv-scroll-header__call.sv-btn.sv-btn--dark {
    align-self: center;
    margin-block: 0;
    width: auto;
    height: auto;
    min-width: 0;
    padding: 0.3rem;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    font-size: 1rem;
  }
  .sv-scroll-header__call.sv-btn.sv-btn--dark:hover,
  .sv-scroll-header__call.sv-btn.sv-btn--dark:focus-visible,
  .sv-scroll-header__call.sv-btn.sv-btn--dark:active {
    background: transparent;
    box-shadow: none;
    color: #fff;
  }
  .sv-scroll-header__call .sv-btn__icon {
    width: auto;
    height: auto;
    line-height: 1;
    transform: translateY(0);
    background: transparent !important;
  }
  .sv-scroll-header__call .sv-btn__body {
    width: auto;
    height: auto;
  }
  .sv-scroll-header__call .sv-btn__icon i {
    display: block;
    line-height: 1;
    transform: translateY(1px);
  }
}

/* ==========================================================================
   FOOTER: Partner-Linkzeile (dezent, zwischen Main und Bottom)
   ========================================================================== */
.sv-footer__partner {
  background: #07142c;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.sv-footer__partner-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  padding-top: 1.35rem;
  padding-bottom: 1rem;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.82rem;
}
.sv-footer__partner-label {
  color: rgba(255, 255, 255, 0.78);
  font-weight: 600;
  letter-spacing: 0.02em;
  font-size: 0.8rem;
}
.sv-footer__partner-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  align-items: center;
}
.sv-footer__partner-list li {
  display: inline-flex;
  align-items: center;
}
.sv-footer__partner-list li + li::before {
  content: "·";
  color: rgba(255, 255, 255, 0.3);
  margin-right: 0.9rem;
  font-weight: 700;
}
.sv-footer__partner-list a {
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  font-size: 0.82rem;
  transition: color .15s ease;
}
.sv-footer__partner-list a:hover,
.sv-footer__partner-list a:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 575.98px) {
  .sv-footer__partner-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding-top: 1.2rem;
    padding-bottom: 0.95rem;
  }
  .sv-footer__partner-list {
    gap: 0.35rem 0.75rem;
  }
}

/* ==========================================================================
   GHOST BUTTON Variante (für Legal-Seiten)
   ========================================================================== */
.sv-btn.sv-btn--ghost {
  background: transparent;
  color: var(--sv-ink);
  border: 1px solid rgba(7, 20, 44, 0.18);
  box-shadow: none;
}
.sv-btn.sv-btn--ghost .sv-btn__icon {
  background: rgba(13, 122, 255, 0.08);
  color: var(--sv-blue);
}
.sv-btn.sv-btn--ghost:hover,
.sv-btn.sv-btn--ghost:focus-visible {
  background: rgba(13, 122, 255, 0.06);
  color: var(--sv-ink);
  border-color: rgba(13, 122, 255, 0.4);
}

/* ==========================================================================
   LEGAL PAGES (Impressum / Datenschutz)
   ========================================================================== */
.sv-legal-body {
  background: #fff;
}
/* Auf Legal-Seiten: keine Scroll-Header-Logik nötig, statische Navigation */
.sv-header--legal {
  background: #fff;
  border-bottom: 1px solid rgba(7, 20, 44, 0.08);
  position: relative;
}
.sv-legal {
  padding-block: clamp(2.5rem, 6vw, 5rem);
  background: #fff;
  color: var(--sv-ink);
}
.sv-legal__wrap {
  max-width: 820px;
  margin-inline: auto;
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
}
.sv-legal__head {
  display: grid;
  gap: 0.65rem;
  margin-bottom: clamp(0.75rem, 2vw, 1.5rem);
  padding-bottom: clamp(1rem, 2.5vw, 1.5rem);
  border-bottom: 1px solid rgba(7, 20, 44, 0.08);
}
.sv-legal__eyebrow {
  font-family: var(--sv-font-display, inherit);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sv-blue);
}
.sv-legal__title {
  margin: 0;
  font-family: var(--sv-font-display, inherit);
  font-size: clamp(1.9rem, 4.8vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: var(--sv-ink);
}
.sv-legal__lead {
  margin: 0;
  color: rgba(7, 20, 44, 0.72);
  font-size: clamp(1rem, 1.4vw, 1.08rem);
  line-height: 1.55;
  max-width: 60ch;
}
.sv-legal__card {
  background: #fff;
  border: 1px solid rgba(7, 20, 44, 0.08);
  border-radius: 4px;
  padding: clamp(1.1rem, 2.2vw, 1.6rem) clamp(1.1rem, 2.4vw, 1.8rem);
  display: grid;
  gap: 0.75rem;
  box-shadow: 0 1px 2px rgba(7, 20, 44, 0.03);
}
.sv-legal__card h2 {
  margin: 0;
  font-family: var(--sv-font-display, inherit);
  font-size: clamp(1.15rem, 1.8vw, 1.35rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--sv-ink);
  line-height: 1.25;
}
.sv-legal__card p {
  margin: 0;
  color: rgba(7, 20, 44, 0.78);
  font-size: 0.98rem;
  line-height: 1.7;
}
.sv-legal__card a {
  color: var(--sv-blue);
  text-decoration: none;
  border-bottom: 1px solid rgba(13, 122, 255, 0.25);
  transition: border-color .15s ease, color .15s ease;
}
.sv-legal__card a:hover,
.sv-legal__card a:focus-visible {
  color: var(--sv-blue-600, var(--sv-blue));
  border-bottom-color: currentColor;
}
.sv-legal__card--note {
  background: rgba(13, 122, 255, 0.035);
  border-color: rgba(13, 122, 255, 0.18);
}
.sv-legal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 0.75rem;
  margin-top: clamp(0.75rem, 2vw, 1.25rem);
}
@media (max-width: 575.98px) {
  .sv-legal__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .sv-legal__actions .sv-btn {
    width: 100%;
    justify-content: center;
  }
}

/* -------------------- Schadengutachten / .sv-entlastung — Dark-Navy Stilbruch --------------------
   Foto-Wasserzeichen + blaues Verlaufs-Overlay entfernen.
   Sektion bekommt Dark-Navy-Hintergrund (gleicher Ton wie Hero-CTA-Buttons, Scroll-Header,
   Favicon). Wirkt als zweiter "Anker" der Seite. Typo wird hell, Karten bleiben weiß.
-------------------------------------------------------------------------------------------- */
.sv-entlastung {
  background: var(--sv-navy-deep, #081122);
  color: rgba(255, 255, 255, 0.85);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.sv-entlastung::before,
.sv-entlastung::after {
  content: none !important;
  background: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  display: none !important;
}

/* Subtiler Farbakzent: weicher Blau-Glow oben links, damit die dunkle Fläche nicht flach wirkt */
.sv-entlastung {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.sv-entlastung > .sv-container {
  position: relative;
  z-index: 1;
}

/* Head-Trennlinie heller */
.sv-entlastung .sv-section__head--split {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* Kicker */
.sv-entlastung .sv-kicker {
  color: rgba(255, 255, 255, 0.55);
}

/* Titel + Akzent-Wort */
.sv-entlastung .sv-section__title {
  color: #fff;
}
.sv-entlastung .sv-section__title em {
  color: #6aa8ff;
}

/* Lead */
.sv-entlastung .sv-section__lead {
  color: rgba(255, 255, 255, 0.72);
}

/* Karten bleiben weiß — maximaler Kontrast auf dunklem Grund */
.sv-entlastung__card {
  background: #fff;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04),
    0 18px 40px rgba(0, 0, 0, 0.28);
}
/* Hover-Effekte nur auf Geräten mit echtem Zeiger (Desktop), damit Mobile-Tap
   keinen klebrigen :hover-State auslöst. */
@media (hover: hover) and (pointer: fine) {
  .sv-entlastung__card:hover {
    border-color: rgba(23, 111, 227, 0.45);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.06),
      0 24px 56px rgba(0, 0, 0, 0.36);
  }
}

/* Icons in den Karten: dezenter Blau-Ton, dritte Karte bleibt Brand-Blue */
.sv-entlastung__card .sv-entlastung__icon {
  color: #3a4860;
}
.sv-entlastung__card:nth-child(3) .sv-entlastung__icon > i {
  color: var(--sv-blue);
}

/* Info-Zeile unter den Karten */
.sv-entlastung__info {
  color: rgba(255, 255, 255, 0.72);
}
.sv-entlastung__info strong {
  color: #fff;
}