/* ==========================================================================
   Coban Immobilien — Hausverwaltung Haiger
   Design: "Vertrauens-Blau" — heller SaaS-Stil mit Pill-Formen, angelehnt
   an das vom Kunden vorgegebene Referenzdesign (verto-hv.de)
   ========================================================================== */

/* Bewusst KEINE Schrift von Google-Servern.
   Ein Aufruf von fonts.googleapis.com überträgt die IP-Adresse des Besuchers
   in die USA. Das war Gegenstand der Entscheidung des LG München I vom
   20.01.2022 (3 O 17493/20) und wird seither regelmäßig abgemahnt.
   Systemschriften brauchen keine Einwilligung, laden sofort und sparen
   zwei externe Verbindungen — das verbessert zugleich die Ladezeit. */

/* ---- Tokens ------------------------------------------------------------ */
:root{
  --bg:            #F5F6F8;
  --bg-alt:        #EAEDF2;
  --card:          #FFFFFF;
  --ink:           #16202C;
  --ink-soft:      #57606C;
  --stone:         #8A93A0;
  --line:          #E1E5EB;
  --blueprint:     #1E3A5F;
  --blueprint-2:   #142943;
  --brass:         #C8912B;
  --brass-light:   #DDAE52;

  --font-stack:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-display:  var(--font-stack);
  --font-body:     var(--font-stack);
  --font-mono:     var(--font-stack);

  --container:     1180px;
  --radius:        18px;
  --radius-pill:   999px;

  --ease:          cubic-bezier(.22,.7,.2,1);
}

/* ---- Reset --------------------------------------------------------------*/
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: linear-gradient(180deg, var(--bg-alt) 0%, var(--bg) 420px, #FFFFFF 900px);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4,p,figure{ margin: 0; }
button{ font: inherit; background: none; border: none; cursor: pointer; color: inherit; }
input, textarea, select{ font: inherit; }

:focus-visible{
  outline: 2px solid var(--blueprint);
  outline-offset: 3px;
}

.container{
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 28px;
}

.visually-hidden{
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---- Typography ----------------------------------------------------------*/
.eyebrow{
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--blueprint);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

h1, .h1{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.3rem, 6vw, 3.6rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-align: center;
}
h2, .h2{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
}
h3, .h3{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.3;
}
.lede{
  font-size: 1.1rem;
  color: var(--ink-soft);
  max-width: 46ch;
}
em{
  font-style: normal;
  font-weight: 800;
  color: var(--blueprint);
}
.mono-stat{
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ---- Buttons --------------------------------------------------------------*/
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 30px;
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 600;
  border-radius: var(--radius-pill);
  transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
  white-space: nowrap;
}
.btn-primary{
  background: linear-gradient(180deg, var(--blueprint) 0%, var(--blueprint-2) 100%);
  color: #fff;
  border: 1px solid var(--blueprint-2);
  box-shadow: 0 10px 24px -8px rgba(30,58,95,.55);
}
.btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -8px rgba(30,58,95,.6);
}
.btn-ghost{
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
}
.btn-ghost:hover{
  border-color: var(--blueprint);
  color: var(--blueprint);
  transform: translateY(-2px);
}
.btn-arrow{ transition: transform .35s var(--ease); }
.btn:hover .btn-arrow{ transform: translateX(4px); }

/* ---- Header / Nav ---------------------------------------------------------*/
.site-header{
  position: sticky;
  top: 14px;
  z-index: 100;
}
.site-header .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding-inline: 22px;
  box-shadow: 0 8px 30px -18px rgba(18,20,26,.25);
}
.brand{
  display: flex;
  align-items: center;
}
.brand-logo{
  width: 150px;
  height: 46px;
  object-fit: cover;
  object-position: 48% 39%;
  border-radius: 6px;
  flex: none;
}
.footer-logo{
  width: 210px;
  height: 84px;
  object-fit: cover;
  object-position: 50% 43%;
  border-radius: 8px;
  flex: none;
}

.nav-desktop{
  display: flex;
  align-items: center;
  gap: 30px;
}
.nav-desktop a{
  font-size: 0.92rem;
  font-weight: 500;
  position: relative;
  padding: 6px 0;
  color: var(--ink-soft);
}
.nav-desktop a:hover,
.nav-desktop a[aria-current="page"]{ color: var(--blueprint); }

.nav-cta{ display: flex; align-items: center; gap: 14px; }
.nav-cta .btn{ padding: 11px 22px; font-size: 0.88rem; }

.nav-toggle{
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}
.nav-toggle span{
  width: 20px; height: 2px; border-radius: 2px; background: var(--ink);
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }

.nav-mobile{
  display: none;
  position: fixed;
  inset: 96px 14px 0 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  z-index: 99;
  padding: 12px 22px 32px;
  overflow-y: auto;
  max-height: calc(100vh - 116px);
  box-shadow: 0 20px 50px -20px rgba(18,20,26,.35);
}
.nav-mobile.is-open{ display: block; }
.nav-mobile a{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.nav-mobile .btn{ margin-top: 24px; width: 100%; }

/* ---- Glowing "Wechsel" nav highlight ------------------------------------------------*/
.nav-desktop a.nav-highlight{
  background: var(--bg-alt);
  color: var(--blueprint);
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 999px;
  animation: navPulse 2.4s ease-in-out infinite;
}
.nav-desktop a.nav-highlight::after{ display: none; }
.nav-mobile a.nav-highlight{ color: var(--blueprint); }
.nav-mobile a.nav-highlight .glow-dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--blueprint);
  display: inline-block;
  animation: navPulse 2.4s ease-in-out infinite;
}
@keyframes navPulse{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(30,58,95,.35); }
  50%{ box-shadow: 0 0 0 7px rgba(30,58,95,0); }
}
@media (prefers-reduced-motion: reduce){
  .nav-desktop a.nav-highlight, .nav-mobile a.nav-highlight .glow-dot{ animation: none; }
}

/* ---- Sticky mobile CTA bar --------------------------------------------------*/
.mobile-cta-bar{
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 150;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -12px 30px -20px rgba(18,20,26,.3);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  gap: 12px;
}
.mobile-cta-bar .btn{ flex: 1; padding: 14px 16px; font-size: 0.92rem; }
.mobile-cta-bar .btn-ghost{ flex: 0 0 auto; width: 52px; padding: 14px; }
.mobile-cta-bar .btn-ghost svg{ width: 20px; height: 20px; }

/* ---- Hero -----------------------------------------------------------------*/
.hero{
  padding: 48px 0 40px;
  overflow: hidden;
}
.hero .container{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 720px;
}
.hero-copy{ display: flex; flex-direction: column; align-items: center; width: 100%; }
.hero-copy h1{ margin-top: 18px; }
.hero-copy .lede{ margin-top: 20px; max-width: 52ch; text-align: center; }
.hero-actions{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  margin-top: 30px;
  width: 100%;
  max-width: 360px;
}
.hero-actions .btn{ width: 100%; }
.hero-actions .phone{
  font-family: var(--font-mono);
  font-size: 0.95rem;
  text-align: center;
}
.hero-actions .phone span{ display:block; font-size: 0.68rem; color: var(--stone); letter-spacing: .08em; text-transform: uppercase;}

/* ---- Hero mini-features (3 kurze Zeilen über den CTA-Buttons) ---------------------*/
.hero-features{
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 28px 0 6px;
  align-items: center;
}
.hero-features .hf-item{
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-soft);
  font-size: 0.98rem;
}
.hero-features .hf-item svg{ width: 20px; height: 20px; stroke: var(--blueprint); flex: none; }

/* ---- Glühender CTA-Button: Lichtpunkt wandert im Uhrzeigersinn AM RAHMEN ----------
   Die frühere Fassung lag mit z-index:-1 hinter dem Button und wurde von dessen
   eigenem Farbverlauf verdeckt — sichtbar war nur ein diffuses Wischen.
   Jetzt: ein Kegelverlauf, der per Maske exakt auf den Rahmen beschnitten wird.
   Der Winkel wird über eine registrierte Custom Property animiert, dadurch
   dreht sich der Verlauf selbst und nicht das Element (sonst dreht die Maske mit). */
@property --beam-angle{
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.glow-cta{
  position: relative;
  isolation: isolate;
}
.glow-cta::before{
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;                 /* Dicke des leuchtenden Rahmens */
  /* Schmaler Lichtstreifen statt breitem Keil: Der sichtbare Bereich ist nur
     rund 45 Grad breit, sonst wirkt es wie ein Uhrzeiger, der über die Fläche
     wischt — genau das war am alten Verlauf falsch. */
  background: conic-gradient(
    from var(--beam-angle),
    rgba(221,174,82,0)    0deg,
    rgba(221,174,82,0)  315deg,
    rgba(221,174,82,.35) 331deg,
    #FFE3A0             346deg,
    #FFFFFF             352deg,
    #FFE3A0             356deg,
    rgba(221,174,82,.35) 359deg,
    rgba(221,174,82,0)  360deg
  );
  /* Nur der Rand bleibt stehen: Außenfläche minus Innenfläche */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  animation: beamSpin 2.8s linear infinite;
  pointer-events: none;
  z-index: 2;
}
/* Dezenter Schein — ebenfalls nur am Rand, nicht über der Fläche.
   Auch dieser Layer wird auf den Rahmen maskiert, sonst leuchtet der Button
   innen auf und es sieht wieder nach Uhrzeiger aus. */
.glow-cta::after{
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: inherit;
  padding: 5px;
  background: conic-gradient(
    from var(--beam-angle),
    rgba(221,174,82,0)   0deg,
    rgba(221,174,82,0) 330deg,
    rgba(255,211,120,.7) 349deg,
    rgba(221,174,82,0) 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  filter: blur(5px);
  animation: beamSpin 2.8s linear infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes beamSpin{ to{ --beam-angle: 360deg; } }

/* Ohne @property-Unterstützung bleibt ein ruhiger goldener Rahmen stehen –
   das wirkt gewollt und nicht kaputt. */
@supports not (background: conic-gradient(from var(--beam-angle), red, blue)){
  .glow-cta::before{
    background: linear-gradient(90deg, var(--brass), var(--brass-light));
    animation: none;
  }
  .glow-cta::after{ display: none; }
}

@media (prefers-reduced-motion: reduce){
  .glow-cta::before{ animation: none; background: linear-gradient(90deg, var(--brass), var(--brass-light)); }
  .glow-cta::after{ display: none; }
}

/* ---- Große Bewertungs-Badges (2 nebeneinander, hero) ------------------------------*/
.rating-badges-big{
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 40px;
  flex-wrap: wrap;
}
.rating-badge-big{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}
.rating-badge-big .rb-icon{ width: 48px; height: 48px; }
.rating-badge-big .rb-icon svg, .rating-badge-big .rb-icon img{ width: 100%; height: 100%; }
.rating-badge-big .rb-score{
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--ink);
}
.rating-badge-big .rb-stars{ color: var(--brass); font-size: 1.05rem; letter-spacing: 2px; }
.rating-badge-big .rb-label{ font-size: 0.82rem; color: var(--stone); }
a.rating-badge-big:hover .rb-score{ color: var(--blueprint); }

.hero-art{ display: none; }
.blueprint-line{
  fill: none;
  stroke: var(--blueprint);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.blueprint-line-thin{
  fill: none;
  stroke: var(--blueprint);
  stroke-width: 0.75;
  opacity: 0.55;
}
.blueprint-fill{ fill: var(--brass); }
.draw-path{
  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: var(--len, 1000);
  animation: draw 2.6s var(--ease) forwards;
  animation-delay: var(--delay, 0s);
}
@keyframes draw{ to{ stroke-dashoffset: 0; } }

/* ---- Dimension-line divider (signature element) ---------------------------*/
.dim{
  padding: 34px 0;
  position: relative;
}
.dim .container{
  display: flex;
  align-items: center;
  gap: 18px;
}
.dim-line{
  flex: 1;
  height: 9px;
  position: relative;
}
.dim-line svg{ width: 100%; height: 100%; display: block; overflow: visible; }
.dim-line line, .dim-line path{
  stroke: var(--stone);
  stroke-width: 1;
}
.dim-line .dim-fill{
  stroke: var(--brass);
}
.dim-label{
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-soft);
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.dim-label strong{
  color: var(--brass);
  font-weight: 600;
}
.dim.is-visible .dim-fill{
  animation: dimdraw 1.1s var(--ease) forwards;
}
.dim-fill{
  stroke-dasharray: var(--dlen, 400);
  stroke-dashoffset: var(--dlen, 400);
}
@keyframes dimdraw{ to{ stroke-dashoffset: 0; } }

/* ---- Sections generic -------------------------------------------------------*/
section{ padding: 96px 0; }
.section-alt{ background: var(--bg-alt); }
.section-head{
  max-width: 640px;
  margin-bottom: 56px;
}
.section-head h2{ margin-top: 16px; }
.section-head .lede{ margin-top: 18px; }
.section-foot{
  margin-top: 48px;
  display: flex;
  justify-content: center;
}

/* reveal on scroll */
.reveal{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.is-visible{ opacity: 1; transform: none; }

/* ---- Grids & Cards -----------------------------------------------------------*/
.grid{ display: grid; gap: 28px; }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }

.card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px 30px;
  box-shadow: 0 10px 30px -22px rgba(18,20,26,.2);
  transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.card:hover{
  transform: translateY(-5px);
  border-color: var(--blueprint);
  box-shadow: 0 18px 40px -20px rgba(30,58,95,.3);
}
.card-icon{ width: 40px; height: 40px; margin-bottom: 22px; }
.card h3{ margin-bottom: 12px; }
.card p{ color: var(--ink-soft); font-size: 0.96rem; }
.card-link{
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--blueprint);
}

/* ---- Stats row ------------------------------------------------------------*/
.stats{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.stat{
  border-left: 1px solid var(--line);
  padding-left: 20px;
}
.stat .num{
  font-family: var(--font-mono);
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  color: var(--blueprint);
  font-weight: 600;
}
.stat .label{
  margin-top: 6px;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* ---- Map / region block -----------------------------------------------------*/
.region-list{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 22px;
}
.region-list span{
  font-family: var(--font-mono);
  font-size: 0.82rem;
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
}

/* ---- Testimonial / Quote ------------------------------------------------------*/
.quote{
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  font-style: italic;
  color: var(--blueprint);
  max-width: 760px;
  line-height: 1.35;
}
.quote-attr{
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--stone);
}

/* ---- Testimonial cards (Kundenstimmen) --------------------------------------------*/
.testi-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.testi-card{
  background: var(--ink);
  border: none;
  border-radius: 20px;
  padding: 34px 28px;
  box-shadow: 0 20px 40px -26px rgba(18,20,26,.4);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.testi-card::before{
  content: '\201C';
  position: absolute;
  top: -26px; left: 18px;
  font-family: var(--font-display);
  font-size: 7rem;
  color: rgba(255,255,255,.07);
  line-height: 1;
  pointer-events: none;
}
.testi-stars{ color: var(--brass-light); letter-spacing: 2px; font-size: 1rem; margin-bottom: 16px; position: relative; }
.testi-card p{ color: #E7E9E4; font-size: 0.96rem; flex: 1; position: relative; }
.testi-attr{
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: #9AA69C;
  display: flex;
  align-items: center;
  gap: 8px;
}
.testi-attr .verified{ color: var(--blueprint); }

/* ---- Comparison table v2: Coban vs. anderer Hausverwalter -------------------------*/
.compare{
  display: grid;
  grid-template-columns: 1.1fr 1.3fr 1.3fr;
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  background: var(--card);
  box-shadow: 0 20px 50px -32px rgba(18,20,26,.3);
}
.compare-head{
  display: contents;
}
.compare-head > div{
  padding: 26px 24px;
  font-weight: 700;
}
.compare-head .c-label{
  display: flex; align-items: flex-end;
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--stone); font-weight: 500;
  background: var(--card);
}
.compare-head .c-us{
  background: var(--bg-alt);
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-display); font-size: 1.05rem;
}
.compare-head .c-them{
  background: var(--card);
  display: flex; align-items: center; gap: 10px;
  color: var(--stone);
}
.compare-head .c-them .x-avatar{
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg-alt);
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.compare-head .c-them .x-avatar svg{ width: 16px; height: 16px; }
.compare-head .c-them small{ display:block; font-family: var(--font-mono); font-size: 0.72rem; color: var(--stone); font-weight: 400; }
.compare-row{ display: contents; }
.compare-row > div{
  padding: 20px 24px;
  border-top: 1px solid var(--line);
  font-size: 0.92rem;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.compare-row .c-label{ font-weight: 600; align-items: center; background: var(--card); }
.compare-row .c-us{ background: var(--bg-alt); color: var(--ink); }
.compare-row .c-them{ color: var(--ink-soft); }
.check-dot, .x-dot{
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex: none; margin-top: 1px;
}
.check-dot{ background: var(--blueprint); }
.check-dot svg{ width: 12px; height: 12px; stroke: #fff; }
.x-dot{ background: #E4A2A2; }
.x-dot svg{ width: 10px; height: 10px; stroke: #fff; }

/* ---- Process tracker v2 (nummerierte Kreise + Linie) ------------------------------*/
.process-track{ position: relative; }
.process-nums{
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  padding: 0 60px;
}
.process-nums .num-circle{
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--blueprint);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 700;
  position: relative; z-index: 2;
  margin: 0 auto;
}
.process-nums .num-circle svg{ width: 18px; height: 18px; stroke: #fff; }
.process-nums .num-line{
  position: absolute; top: 22px; left: 60px; right: 60px; height: 2px;
  background: var(--line); z-index: 1;
}
.process-nums .num-line-fill{
  position: absolute; top: 0; left: 0; height: 100%;
  width: 50%; background: var(--blueprint);
}
.process-nums-wrap{ position: relative; }
.process-icon{
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--bg-alt);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.process-icon svg{ width: 22px; height: 22px; }
.step-circle{ display: none; }
.process-foot{ text-align: center; margin-top: 40px; }
.process-foot .btn{ margin-bottom: 12px; }
.process-foot p{ font-size: 0.85rem; color: var(--stone); }

/* ---- Stats band v2 (dunkel, Erfolgsbilanz) -----------------------------------------*/
.stats-band{
  background: var(--ink);
  color: #fff;
  text-align: center;
}
.stats-band .eyebrow{ color: var(--brass-light); justify-content: center; }
.stats-band h2{ color: #fff; margin-top: 14px; }
.stats-band .lede{ color: #B7BEC9; margin: 16px auto 0; text-align: center; }
.stats-band-grid{
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.stat-card{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius);
  padding: 30px 20px;
}
.stat-card .stat-icon{
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
}
.stat-card .stat-icon svg{ width: 22px; height: 22px; stroke: var(--brass-light); }
.stat-card .num{ font-family: var(--font-mono); font-size: 2.1rem; font-weight: 800; }
.stat-card .label{ margin-top: 6px; font-weight: 600; font-size: 0.92rem; }
.stat-card .sub{ margin-top: 4px; font-size: 0.78rem; color: #8891A0; }

/* ---- CTA band ---------------------------------------------------------------*/
.cta-band{
  background: var(--ink);
  color: var(--bg);
}
.cta-band h2{ color: var(--bg); }
.cta-band .lede{ color: #C7CCDA; }
.cta-band .container{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}
.cta-band .btn-ghost{ border-color: var(--bg); color: var(--bg); }
.cta-band .btn-ghost:hover{ border-color: var(--brass-light); color: var(--brass-light); }

/* ---- Footer ------------------------------------------------------------------*/
.site-footer{
  background: var(--ink);
  color: #B7BEC9;
  padding: 72px 0 30px;
}
.footer-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 50px;
  border-bottom: 1px solid #262A35;
}
.footer-grid h2.footer-h{
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass-light);
  margin-bottom: 18px;
}
.footer-grid li{ margin-bottom: 10px; font-size: 0.92rem; }
.footer-grid a:hover{ color: #fff; }
.footer-brand p{ margin-top: 16px; color: #98A0AF; max-width: 32ch; font-size: 0.92rem; }
.footer-bottom{
  padding-top: 26px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.8rem;
  font-family: var(--font-mono);
  color: #7B8496;
}
.footer-bottom a:hover{ color: #fff; }

/* ---- Page header (Unterseiten) -------------------------------------------------*/
.page-hero{
  padding: 60px 0 70px;
  border-bottom: 1px solid var(--line);
}
.page-hero h1{ margin-top: 16px; }
.page-hero .lede{ margin-top: 18px; }
.breadcrumb{
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--stone);
  margin-bottom: 20px;
}
.breadcrumb a:hover{ color: var(--brass); }

/* ---- Table (Preise) ------------------------------------------------------------*/
.price-table{
  width: 100%;
  border-collapse: collapse;
}
.price-table th, .price-table td{
  text-align: left;
  padding: 18px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
}
.price-table th{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
  font-weight: 500;
}
.price-table td:last-child, .price-table th:last-child{ text-align: right; }
.price-cards{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 24px;
}
.price-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 38px 30px;
  display: flex;
  flex-direction: column;
}
.price-card.is-featured{
  border-color: var(--blueprint);
  box-shadow: 0 18px 40px -20px rgba(29,63,99,.35);
  position: relative;
}
.price-card.is-featured::before{
  content: 'Meist gewählt';
  position: absolute; top: -13px; left: 30px;
  background: var(--blueprint); color: var(--bg);
  font-family: var(--font-mono); font-size: 0.65rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
}
.price-card .price{
  font-family: var(--font-mono);
  font-size: 2rem; color: var(--blueprint); margin: 18px 0 4px;
}
.price-card .price span{ font-size: 0.9rem; color: var(--stone); }
.price-card ul{ margin-top: 24px; flex: 1; }
.price-card li{
  padding: 9px 0; border-top: 1px solid var(--line);
  font-size: 0.9rem; display: flex; gap: 10px;
}
.price-card li:first-child{ border-top: none; }
.price-card .btn{ margin-top: 26px; justify-content: center; }
.price-note{
  margin-top: 30px; font-size: 0.85rem; color: var(--stone);
}

/* ---- Timeline (Über uns) ---------------------------------------------------------*/
.timeline{ position: relative; padding-left: 30px; border-left: 1px solid var(--line); }
.timeline-item{ position: relative; padding-bottom: 44px; }
.timeline-item:last-child{ padding-bottom: 0; }
.timeline-item::before{
  content: '';
  position: absolute; left: -35px; top: 4px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--brass); border: 2px solid var(--bg);
  box-shadow: 0 0 0 1px var(--brass);
}
.timeline-year{
  font-family: var(--font-mono); font-size: 0.8rem; color: var(--blueprint);
  margin-bottom: 6px; display:block;
}

/* ---- Team ---------------------------------------------------------------------*/
.team-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; }
.team-card .avatar{
  width: 100%; aspect-ratio: 4/5;
  border-radius: var(--radius);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
}
.team-card .role{ font-family: var(--font-mono); font-size: 0.78rem; color: var(--brass); margin-top: 4px; }

/* ---- Values grid ----------------------------------------------------------------*/
.values-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 50px; }
.value-item{ display: flex; gap: 20px; }
.value-num{ font-family: var(--font-mono); color: var(--line); font-size: 2.2rem; font-weight: 600; line-height: 1; }
.value-item h3{ margin-bottom: 8px; }
.value-item p{ color: var(--ink-soft); font-size: 0.95rem; }

/* ---- Forms (Kontakt) --------------------------------------------------------------*/
.form-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.form-grid .full{ grid-column: 1 / -1; }
.field label{
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 8px;
}
.field input, .field textarea, .field select{
  width: 100%;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 13px 15px;
  color: var(--ink);
  transition: border-color .3s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus{
  border-color: var(--blueprint);
  outline: none;
}
.field textarea{ resize: vertical; min-height: 130px; }
.form-consent{ display: flex; gap: 10px; align-items: flex-start; font-size: 0.85rem; color: var(--ink-soft); }
.form-consent input{ margin-top: 4px; }
.contact-info{
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--radius);
  padding: 40px 34px;
}
.contact-info h3{ color: var(--bg); }
.contact-info .item{ margin-top: 26px; }
.contact-info .item .k{
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--brass-light); display:block; margin-bottom: 6px;
}
.contact-info .item a:hover{ color: var(--brass-light); }
.contact-layout{
  display: grid; grid-template-columns: 1.3fr 0.9fr; gap: 40px;
}

/* ---- Kontakt: Direktanruf-Panel (stärkster Lead-Kanal) ---------------------------*/
.call-panel{
  background: linear-gradient(180deg, var(--blueprint) 0%, var(--blueprint-2) 100%);
  color: #fff;
  border-radius: 22px;
  padding: 32px 30px;
  text-align: center;
  box-shadow: 0 20px 44px -24px rgba(30,58,95,.6);
}
.call-panel .cp-label{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brass-light);
}
.call-panel .cp-number{
  display: block;
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: clamp(1.4rem, 4.5vw, 2rem);
  margin: 12px 0 6px;
  color: #fff;
}
.call-panel .cp-number:hover{ color: var(--brass-light); }
.call-panel .cp-hours{ font-size: 0.86rem; color: #C7CCDA; }
.call-panel .btn{ margin-top: 20px; width: 100%; background: #fff; color: var(--blueprint); border-color: #fff; }
.call-panel .btn:hover{ background: var(--brass-light); border-color: var(--brass-light); color: var(--ink); }

/* ---- Kontakt: "Was passiert danach" ----------------------------------------------*/
.next-steps{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 30px;
}
.next-step{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 22px;
  text-align: center;
}
.next-step .ns-num{
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--bg-alt); color: var(--blueprint);
  font-family: var(--font-mono); font-weight: 700; font-size: 0.9rem;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
}
.next-step h3{ font-size: 1.05rem; margin-bottom: 6px; }
.next-step p{ color: var(--ink-soft); font-size: 0.88rem; }

/* ---- Kontakt: Reassurance-Zeile unter dem Button ----------------------------------*/
.form-reassure{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 18px;
  font-size: 0.84rem;
  color: var(--ink-soft);
}
.form-reassure span{ display: flex; align-items: center; gap: 7px; }
.form-reassure svg{ width: 15px; height: 15px; stroke: var(--blueprint); flex: none; }

/* ---- Job listing (Karriere) -----------------------------------------------------*/
.job-list{ display: flex; flex-direction: column; }
.job-item{
  display: flex; justify-content: space-between; align-items: center;
  padding: 28px 0; border-top: 1px solid var(--line);
  transition: padding-left .3s var(--ease);
}
.job-list .job-item:last-child{ border-bottom: 1px solid var(--line); }
.job-item:hover{ padding-left: 12px; }
.job-item h3{ margin-bottom: 6px; }
.job-item .meta{ font-family: var(--font-mono); font-size: 0.78rem; color: var(--stone); }
.job-item .btn{ flex: none; }

/* ---- Wechsel-Seite: Warnsignale, Tipp-Box, Vorlage --------------------------------*/
.warn-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.warn-card{
  background: #FBEEEE;
  border: 1px solid #F3D6D6;
  border-radius: var(--radius);
  padding: 28px 26px;
}
.warn-icon{
  width: 44px; height: 44px; border-radius: 12px;
  background: #F6DADA;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.warn-icon svg{ width: 22px; height: 22px; stroke: #C0433F; }
.warn-card h3{ margin-bottom: 8px; }
.warn-card p{ color: var(--ink-soft); font-size: 0.92rem; }

.tip-box{
  display: flex;
  gap: 14px;
  background: #FBF3E1;
  border: 1px solid #EFDDAF;
  border-radius: var(--radius);
  padding: 22px 24px;
  font-size: 0.92rem;
  color: #7A5C1E;
}
.tip-box .tip-icon{ flex: none; font-size: 1.2rem; }

.wechsel-steps{ counter-reset: wstep; }
.wechsel-step{
  display: flex;
  gap: 22px;
  align-items: flex-start;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 26px;
  margin-bottom: 16px;
}
.wechsel-step .w-num{
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--blueprint);
  color: #fff;
  font-family: var(--font-mono); font-weight: 700; font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.wechsel-step h3{ margin-bottom: 6px; }
.wechsel-step p{ color: var(--ink-soft); font-size: 0.92rem; }

.lead-magnet{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.lead-magnet ul{ margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.lead-magnet li{ display: flex; align-items: center; gap: 10px; font-size: 0.94rem; }
.lead-magnet li .li-check{
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--blueprint);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.lead-magnet li .li-check svg{ width: 10px; height: 10px; stroke: var(--blueprint); }
.template-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px;
  box-shadow: 0 20px 50px -32px rgba(18,20,26,.3);
}
.template-card .t-head{ display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.template-card .t-icon{
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--bg-alt);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.template-card .t-icon svg{ width: 22px; height: 22px; stroke: var(--brass); }
.template-card .t-meta-row{ display: flex; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--line); font-size: 0.88rem; }
.template-card .t-meta-row:first-of-type{ border-top: none; }
.template-card .t-meta-row .k{ color: var(--stone); }
.template-card .t-meta-row .v{ font-weight: 600; }
.template-preview{
  margin-top: 22px;
  background: var(--bg-alt);
  border-radius: 12px;
  padding: 22px 20px;
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.7;
  white-space: pre-line;
}

/* ---- Trust bar (Bewertungen, Kennzahlen) -----------------------------------------*/
.trust-bar{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 28px;
  margin-top: 34px;
}
.trust-item{
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-align: center;
}
.trust-stars{ display: inline-flex; gap: 2px; color: var(--brass); font-size: 0.95rem; letter-spacing: 1px; }
.trust-item strong{ color: var(--ink); font-weight: 600; }
.trust-item a{ text-decoration: underline; text-underline-offset: 3px; color: var(--blueprint); }
.trust-item a:hover{ color: var(--brass); }
.trust-divider{ width: 1px; height: 22px; background: var(--line); }

.badge-row{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
.badge{
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: var(--radius-pill);
  padding: 13px 20px;
  font-size: 0.88rem;
  color: var(--ink-soft);
  box-shadow: 0 8px 20px -14px rgba(18,20,26,.25);
}
.badge strong{ color: var(--ink); }
.badge svg{ width: 20px; height: 20px; flex: none; }

/* ---- Google review badge -----------------------------------------------------------*/
.rating-badges{ display: flex; flex-wrap: nowrap; gap: 10px; justify-content: center; }
.google-badge{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 10px 16px;
  box-shadow: 0 8px 20px -14px rgba(18,20,26,.25);
  min-width: 0;
}
.google-badge .g-icon{
  width: 30px; height: 30px; flex: none;
  border-radius: 50%;
  background: var(--bg-alt);
  display: flex; align-items: center; justify-content: center;
}
.google-badge .g-icon svg, .google-badge .g-icon img{ width: 18px; height: 18px; }
.google-badge .g-text{ display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.google-badge .g-rating{ font-family: var(--font-mono); font-weight: 700; font-size: 0.9rem; display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.google-badge .g-rating .trust-stars{ font-size: 0.8rem; }
.google-badge .g-count{ font-size: 0.68rem; color: var(--stone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.google-badge.is-link{ transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.google-badge.is-link:hover{ transform: translateY(-2px); box-shadow: 0 12px 26px -14px rgba(18,20,26,.3); }

/* ---- 5 Gründe: Warum wechseln (Reasons-Liste) -----------------------------------------*/
.reasons-list{ display: flex; flex-direction: column; gap: 18px; }
.reason-card{
  display: flex;
  gap: 24px;
  align-items: flex-start;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 32px;
  box-shadow: 0 10px 30px -24px rgba(18,20,26,.2);
}
.reason-num{
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--line);
  flex: none;
  width: 40px;
  line-height: 1.3;
}
.reason-icon{
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--bg-alt);
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.reason-icon svg{ width: 26px; height: 26px; }
.reason-card h3{ margin-bottom: 8px; }
.reason-card p{ color: var(--ink-soft); font-size: 0.95rem; }
.callout-band{
  margin-top: 24px;
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius);
  padding: 34px 32px;
  display: flex;
  gap: 24px;
  align-items: center;
}
.callout-band .callout-icon{
  width: 56px; height: 56px; border-radius: 16px;
  background: rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.callout-band .callout-icon svg{ width: 28px; height: 28px; stroke: var(--brass-light); }
.callout-band h3{ color: #fff; margin-bottom: 8px; }
.callout-band p{ color: #C7CCC7; font-size: 0.95rem; }

/* ---- Price calculator ---------------------------------------------------------------*/
.price-calc{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 40px 36px;
  box-shadow: 0 20px 50px -30px rgba(18,20,26,.25);
}
.price-calc-top{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  margin-bottom: 8px;
}
.price-calc-top label{ font-weight: 600; }
.price-calc-count{ font-family: var(--font-mono); font-weight: 800; color: var(--blueprint); font-size: 1.6rem; }
.price-calc input[type="range"]{
  width: 100%;
  appearance: none;
  height: 6px;
  border-radius: 999px;
  background: var(--line);
  margin: 18px 0 8px;
}
.price-calc input[type="range"]::-webkit-slider-thumb{
  appearance: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--blueprint);
  border: 4px solid #fff;
  box-shadow: 0 4px 14px -4px rgba(30,58,95,.6);
  cursor: pointer;
}
.price-calc input[type="range"]::-moz-range-thumb{
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--blueprint);
  border: 4px solid #fff;
  box-shadow: 0 4px 14px -4px rgba(30,58,95,.6);
  cursor: pointer;
}
.price-calc-scale{
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--stone);
  margin-bottom: 28px;
}
.price-calc-result{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.price-calc-result .r-item{ text-align: center; }
.price-calc-result .r-label{ font-size: 0.78rem; color: var(--stone); margin-bottom: 6px; }
.price-calc-result .r-value{ font-family: var(--font-mono); font-weight: 800; font-size: 1.5rem; color: var(--ink); }
.price-calc-result .r-value.is-accent{ color: var(--blueprint); }
.price-calc-result .r-value span{ font-size: 0.85rem; font-weight: 500; color: var(--stone); }
.price-calc-tier{
  display: inline-block;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--blueprint);
  background: var(--bg-alt);
  padding: 6px 14px;
  border-radius: 999px;
}

/* ---- Verwaltungsart-Auswahl im Rechner --------------------------------------------*/
.calc-step-label{
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brass);
  display: block;
  margin-bottom: 12px;
}
.type-switch{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}
.type-option{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
  border: 2px solid var(--line);
  background: var(--card);
  border-radius: 14px;
  padding: 16px 18px;
  cursor: pointer;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.type-option:hover{ border-color: var(--stone); }
.type-option[aria-pressed="true"]{
  border-color: var(--blueprint);
  background: var(--bg-alt);
}
.type-option svg{ width: 22px; height: 22px; stroke: var(--blueprint); flex: none; margin-top: 2px; }
.type-option .to-title{ font-weight: 700; font-size: 0.98rem; display: block; }
.type-option .to-sub{ font-size: 0.8rem; color: var(--ink-soft); display: block; margin-top: 2px; }

/* Bereiche, die nur für WEG bzw. Miete gelten */
.calc-weg-only[hidden], .calc-miete-only[hidden]{ display: none; }
.calc-request-panel{
  background: linear-gradient(180deg, var(--blueprint) 0%, var(--blueprint-2) 100%);
  color: #fff;
  border-radius: 20px;
  padding: 30px;
  text-align: center;
}
.calc-request-panel h3{ color: #fff; margin-bottom: 8px; }
.calc-request-panel p{ color: #C7CCDA; font-size: 0.92rem; max-width: 46ch; margin: 0 auto 20px; }
.calc-request-panel .btn-primary{ background: var(--brass); border-color: var(--brass); color: var(--ink); box-shadow: none; }
.calc-request-panel .btn-primary:hover{ background: var(--brass-light); border-color: var(--brass-light); }

/* ---- Preis-Ergebnis-Panel (dunkel, kompakt) --------------------------------------*/
.price-result-panel{
  background: linear-gradient(180deg, var(--blueprint) 0%, var(--blueprint-2) 100%);
  color: #fff;
  border-radius: 20px;
  padding: 28px 30px;
  margin-top: 24px;
}
.price-result-panel .prp-label{
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brass-light);
}
.price-result-panel .prp-main{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.price-result-panel .prp-unit{
  font-family: var(--font-mono);
  font-size: 0.92rem;
  color: #C7CCDA;
}
.price-result-panel .prp-unit strong{ color: #fff; font-size: 1.15rem; }
.price-result-panel .prp-total{
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: clamp(2rem, 6vw, 2.6rem);
  line-height: 1;
}
.price-result-panel .prp-total small{
  display: block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 400;
  color: #C7CCDA;
  margin-top: 4px;
}
.price-result-panel .prp-rows{
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.15);
}
.price-result-panel .prp-row{
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  padding: 5px 0;
  color: #C7CCDA;
  font-variant-numeric: tabular-nums;
}
.price-result-panel .prp-row.is-strong{ color: #fff; font-weight: 700; }
.price-result-panel .prp-actions{
  display: flex;
  gap: 12px;
  margin-top: 22px;
  flex-wrap: wrap;
}
.price-result-panel .prp-actions .btn{ flex: 1; min-width: 180px; }
.price-result-panel .prp-actions .btn-primary{
  background: var(--brass);
  border-color: var(--brass);
  color: var(--ink);
  box-shadow: none;
}
.price-result-panel .prp-actions .btn-primary:hover{ background: var(--brass-light); border-color: var(--brass-light); }
.price-result-panel .prp-actions .btn-ghost{
  background: transparent;
  border-color: rgba(255,255,255,.35);
  color: #fff;
}
.price-result-panel .prp-actions .btn-ghost:hover{ border-color: #fff; color: #fff; background: rgba(255,255,255,.08); }
.price-result-panel .prp-actions .btn svg{ width: 16px; height: 16px; stroke: currentColor; }

/* ---- Enthaltene Leistungen im Rechner ---------------------------------------------*/
.calc-included{
  background: var(--bg-alt);
  border-radius: 14px;
  padding: 20px 22px;
  margin-top: 22px;
}
.calc-included .ci-head{
  display: flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: 0.94rem;
  margin-bottom: 12px;
}
.calc-included .ci-head svg{ width: 18px; height: 18px; stroke: var(--blueprint); flex: none; }
.calc-included ul{ display: grid; grid-template-columns: 1fr 1fr; gap: 7px 20px; }
.calc-included li{
  font-size: 0.87rem;
  color: var(--ink-soft);
  padding-left: 15px;
  position: relative;
}
.calc-included li::before{
  content: '';
  position: absolute; left: 0; top: 9px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--blueprint);
}
.calc-hint{
  margin-top: 16px;
  font-size: 0.85rem;
  color: var(--ink-soft);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 18px;
}
.calc-hint strong{ color: var(--ink); }

/* ---- Druckansicht der Preis-Indikation (nur beim Drucken sichtbar) ----------------*/
.print-sheet{ display: none; }

@media print{
  /* Beim Drucken der Preis-Indikation: alles ausblenden außer dem Druckbogen */
  body.is-printing-price > *{ display: none !important; }
  body.is-printing-price .print-sheet{
    display: block !important;
    position: static;
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: #16202C;
  }
  body.is-printing-price .print-sheet h1{ font-size: 20pt; margin: 0 0 4pt; }
  body.is-printing-price .print-sheet .ps-sub{ font-size: 9pt; color: #57606C; margin-bottom: 18pt; }
  body.is-printing-price .print-sheet table{ width: 100%; border-collapse: collapse; margin: 14pt 0; }
  body.is-printing-price .print-sheet td{ padding: 6pt 0; border-bottom: 1px solid #ccc; font-size: 10pt; }
  body.is-printing-price .print-sheet td:last-child{ text-align: right; }
  body.is-printing-price .print-sheet tr.ps-total td{ font-weight: 700; font-size: 12pt; border-bottom: none; padding-top: 10pt; }
  body.is-printing-price .print-sheet ul{ padding-left: 14pt; font-size: 9.5pt; color: #333; }
  body.is-printing-price .print-sheet li{ margin-bottom: 3pt; }
  body.is-printing-price .print-sheet .ps-note{
    font-size: 8.5pt; color: #57606C; margin-top: 16pt;
    border-top: 1px solid #ccc; padding-top: 8pt;
  }
  /* Der Druckbogen selbst liegt im body, nicht in einem versteckten Container */
  .mobile-cta-bar, .site-header, .site-footer{ display: none !important; }
}

/* ---- Capacity / urgency banner ----------------------------------------------------*/
.hero-badges{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 24px;
}
.capacity-banner{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--brass-light);
  border-radius: 999px;
  padding: 9px 20px 9px 14px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.capacity-banner .dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brass);
  box-shadow: 0 0 0 3px rgba(200,145,43,.18);
  flex: none;
}
.capacity-banner strong{ color: var(--brass); }

.availability-badge{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 18px 9px 14px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.availability-badge strong{ color: #16A34A; }
.pulse-dot{
  position: relative;
  width: 8px; height: 8px; border-radius: 50%;
  background: #22C55E;
  flex: none;
}
.pulse-dot::after{
  content: '';
  position: absolute; inset: -5px;
  border-radius: 50%;
  background: #22C55E;
  opacity: .55;
  animation: pulseDot 1.8s ease-out infinite;
}
@keyframes pulseDot{
  0%{ transform: scale(.5); opacity: .55; }
  100%{ transform: scale(2.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
  .pulse-dot::after{ animation: none; opacity: 0; }
}

/* ---- Differenzierung: Vergleichsliste ---------------------------------------------*/
.diff-table{
  width: 100%;
  border-collapse: collapse;
}
.diff-table th, .diff-table td{
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
  text-align: left;
  vertical-align: top;
}
.diff-table thead th{
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
  font-weight: 500;
}
.diff-table td:nth-child(2), .diff-table th:nth-child(2){
  color: var(--stone);
}
.diff-table td:nth-child(3), .diff-table th:nth-child(3){
  color: var(--blueprint);
  font-weight: 500;
}
.diff-table .yes::before{ content:'✓ '; color: var(--blueprint); font-weight:700; }
.diff-table .no::before{ content:'– '; color: var(--stone); }

/* ---- Process steps ------------------------------------------------------------------*/
.process-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  counter-reset: step;
}
.process-step{
  position: relative;
  padding: 0 28px 0 0;
  border-right: 1px dashed var(--line);
}
.process-grid .process-step:last-child{ border-right: none; padding-right:0; }
.process-step .step-num{
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--brass);
  display: block;
  margin-bottom: 14px;
}
.process-step h3{ margin-bottom: 10px; }
.process-step p{ color: var(--ink-soft); font-size: 0.92rem; }

/* ---- FAQ accordion -------------------------------------------------------------------*/
.faq-list{ border-top: 1px solid var(--line); }
.faq-item{ border-bottom: 1px solid var(--line); }
.faq-item summary{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 22px 4px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 1.1rem;
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary .plus{
  font-family: var(--font-mono);
  color: var(--brass);
  font-size: 1.3rem;
  flex: none;
  transition: transform .3s var(--ease);
}
.faq-item[open] summary .plus{ transform: rotate(45deg); }
.faq-item .faq-a{
  padding: 0 4px 24px;
  color: var(--ink-soft);
  max-width: 68ch;
}

/* ---- Responsive -----------------------------------------------------------------*/
@media (max-width: 980px){
  .grid-3{ grid-template-columns: repeat(2,1fr); }
  .price-cards{ grid-template-columns: repeat(2,1fr); }
  .type-switch{ grid-template-columns: 1fr; }
  .stats-band-grid{ grid-template-columns: repeat(2,1fr); }
  .footer-grid{ grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .footer-brand{ grid-column: 1/-1; }
  .contact-layout{ grid-template-columns: 1fr; }
  .next-steps{ grid-template-columns: 1fr; }
  .stats{ grid-template-columns: repeat(2,1fr); row-gap: 26px; }
  .values-grid{ grid-template-columns: 1fr; }
  .team-grid{ grid-template-columns: repeat(2,1fr); }
  .process-grid{ grid-template-columns: 1fr; gap: 36px; }
  .process-step{ border-right: none; padding-right: 0; }
  .price-calc{ padding: 30px 22px; }
  /* Klappmenue schon auf Tablets: bis 980 px passen die Menuepunkte und der
     Angebots-Knopf nicht mehr nebeneinander in die Kopfzeile. */
  .nav-desktop, .nav-cta .btn{ display: none; }
  .nav-toggle{ display: flex; }
}

@media (max-width: 720px){
  .stats-band-grid{ grid-template-columns: 1fr 1fr; gap: 14px; }
  .compare{ display: flex; flex-direction: column; gap: 14px; border: none; box-shadow: none; background: transparent; border-radius: 0; }
  .compare-head, .compare-row{ display: block; background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px -24px rgba(18,20,26,.2); }
  .compare-head > div, .compare-row > div{ border-top: 1px solid var(--line); padding: 14px 18px; }
  .compare-head > div:first-child, .compare-row > div:first-child{ border-top: none; }
  .compare-head .c-label{ display: none; }
  .compare-row .c-label{ font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--stone); font-weight: 600; padding-bottom: 6px; background: var(--card); }
  .process-nums{ display: none; }
  .process-grid{ display: flex; flex-direction: column; gap: 0; }
  .process-step{ display: flex; align-items: flex-start; gap: 16px; text-align: left; padding: 0 0 36px; }
  .process-step:last-child{ padding-bottom: 0; }
  .step-circle{
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 12px;
    background: var(--blueprint); color: #fff;
    font-family: var(--font-mono); font-weight: 700;
    flex: none; position: relative; z-index: 2;
  }
  .step-circle svg{ width: 18px; height: 18px; stroke: #fff; }
  .step-circle.is-todo{ background: var(--card); border: 2px solid var(--line); color: var(--ink-soft); }
  .process-step:not(:last-child) .step-circle::after{
    content: ''; position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%); width: 2px; height: 32px;
    background: var(--line);
  }
  .step-card{
    flex: 1;
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 20px 22px;
    box-shadow: 0 10px 30px -24px rgba(18,20,26,.2);
  }
  .step-card .process-icon{ margin-bottom: 12px; }
  .mobile-cta-bar{ display: flex; }
  body{ padding-bottom: 76px; }
  .price-calc-result{ grid-template-columns: 1fr; gap: 14px; }
  .price-calc-top{ flex-direction: column; align-items: flex-start; gap: 4px; }
  .price-result-panel{ padding: 24px 20px; }
  .price-result-panel .prp-main{ flex-direction: column; gap: 8px; }
  .type-switch{ grid-template-columns: 1fr; gap: 10px; }
  .price-result-panel .prp-actions .btn{ min-width: 0; width: 100%; flex: none; }
  .calc-included ul{ grid-template-columns: 1fr; }
  section{ padding: 64px 0; }
  .grid-3, .grid-2{ grid-template-columns: 1fr; }
  .testi-grid{ grid-template-columns: 1fr; }
  .warn-grid{ grid-template-columns: 1fr; }
  .reason-card{ padding: 22px 20px; gap: 16px; }
  .reason-num{ display: none; }
  .reason-icon{ width: 44px; height: 44px; }
  .reason-icon svg{ width: 22px; height: 22px; }
  .callout-band{ flex-direction: column; text-align: center; padding: 28px 24px; }
  .lead-magnet{ grid-template-columns: 1fr; }
  .wechsel-step{ flex-direction: column; }
  .price-cards{ grid-template-columns: 1fr; }
  .diff-table-wrap{ overflow-x: auto; }
  .diff-table{ min-width: 560px; }
  .trust-bar{ gap: 14px; }
  .trust-divider{ display: none; }
  .capacity-banner, .availability-badge{ font-size: 0.7rem; padding: 8px 14px 8px 12px; text-align: left; }
  .hero-badges{ gap: 10px; }
  .hero-features{ gap: 10px; margin: 22px 0 4px; }
  .hero-features .hf-item{ font-size: 0.88rem; }
  .rating-badges-big{ gap: 26px; margin-top: 30px; }
  .rating-badge-big .rb-icon{ width: 38px; height: 38px; }
  .rating-badge-big .rb-score{ font-size: 1.2rem; }
  .rating-badge-big .rb-stars{ font-size: 0.9rem; }
  .rating-badge-big .rb-label{ font-size: 0.72rem; }
  .rating-badges{ gap: 8px; }
  .google-badge{ padding: 8px 10px; gap: 8px; }
  .google-badge .g-icon{ width: 26px; height: 26px; }
  .google-badge .g-icon svg{ width: 15px; height: 15px; }
  .google-badge .g-rating{ font-size: 0.8rem; }
  .google-badge .g-count{ font-size: 0.6rem; max-width: 84px; }
  .form-grid{ grid-template-columns: 1fr; }
  .cta-band .container{ flex-direction: column; align-items: flex-start; }
  .footer-grid{ grid-template-columns: 1fr; gap: 34px; }
  .team-grid{ grid-template-columns: 1fr; max-width: 320px; margin-inline: auto; }
  .dim-label{ font-size: 0.68rem; }
  .job-item{ flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ---- Reduced motion ---------------------------------------------------------------*/
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .draw-path{ animation: none; stroke-dashoffset: 0; }
  .dim-fill{ animation: none; stroke-dashoffset: 0; }
  .reveal{ opacity: 1; transform: none; transition: none; }
  .card, .btn, .job-item{ transition: none; }
}

/* ==========================================================================
   TEIL 2 — Standortseiten, Leistungsseiten, Mobile-Feinschliff
   ========================================================================== */

/* ---- Zugänglichkeit ------------------------------------------------------*/
.skip-link{
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--blueprint);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 12px 0;
  font-weight: 600;
}
.skip-link:focus{ left: 0; }

/* ---- Header-Ergänzungen --------------------------------------------------*/
.btn-call-sm{
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: .01em;
}
@media (max-width: 1080px){
  .nav-desktop{ gap: 20px; }
  .btn-call-sm{ display: none; }
}

.footer-contact{
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.9rem;
}
.footer-contact a{ color: #C7CCDA; }
.footer-contact a:hover{ color: var(--brass-light); }
.footer-contact span{ color: #7B8496; }

/* ---- Brotkrumen ----------------------------------------------------------*/
.breadcrumb span{ color: var(--stone); }
.breadcrumb a:hover{ color: var(--blueprint); text-decoration: underline; }
.breadcrumb [aria-current]{ color: var(--ink-soft); }

/* ---- Linksbündige H1 auf Unterseiten -------------------------------------*/
.h1-left{ text-align: left; }

/* ---- Fließtext-Blöcke ----------------------------------------------------*/
.prose{ max-width: 68ch; }
.prose p{
  color: var(--ink-soft);
  font-size: 1.02rem;
  line-height: 1.75;
}
.prose p + p{ margin-top: 18px; }

/* ---- Standort-Hero -------------------------------------------------------*/
.geo-hero,
.svc-hero{
  padding: 34px 0 70px;
}
.geo-hero-grid,
.svc-hero-grid{
  display: grid;
  grid-template-columns: 1.35fr 0.85fr;
  gap: 50px;
  align-items: start;
  margin-top: 26px;
}
.geo-hero h1,
.svc-hero h1{
  text-align: left;
  margin-top: 14px;
  font-size: clamp(2.1rem, 5vw, 3.1rem);
}
.geo-hero .lede,
.svc-hero .lede{
  margin-top: 18px;
  text-align: left;
  max-width: 56ch;
}
.geo-hero .hero-features{
  align-items: flex-start;
  margin: 26px 0 4px;
}

.geo-actions{
  display: flex;
  gap: 14px;
  margin-top: 26px;
  flex-wrap: wrap;
}
.geo-rating{
  margin-top: 20px;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.geo-rating strong{ color: var(--ink); }

/* ---- Faktenkarte ---------------------------------------------------------*/
.geo-facts{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 30px 28px;
  box-shadow: 0 20px 50px -30px rgba(18,20,26,.28);
  position: sticky;
  top: 100px;
}
.geo-facts .gf-title{
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.geo-facts dl{ margin: 0; }
.geo-facts dl > div{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--line);
}
.geo-facts dt{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--stone);
  flex: none;
}
.geo-facts dd{
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: right;
}
.geo-facts .btn{ width: 100%; margin-top: 22px; }
.geo-facts .gf-wa{
  display: block;
  text-align: center;
  margin-top: 14px;
  font-size: 0.84rem;
  color: var(--blueprint);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.geo-facts .gf-price{
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--blueprint);
  line-height: 1.15;
}
.geo-facts .gf-note{
  margin-top: 12px;
  font-size: 0.86rem;
  color: var(--ink-soft);
  line-height: 1.6;
}

/* ---- Zweispalter ---------------------------------------------------------*/
.geo-two{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 50px;
  align-items: start;
}

/* ---- Ortsteil-Liste ------------------------------------------------------*/
.ortsteile{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 22px;
}
.ortsteile li{
  font-family: var(--font-mono);
  font-size: 0.8rem;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  background: var(--card);
}

/* ---- Kompakte Vertrauensleiste -------------------------------------------*/
.mini-trust{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.mt-item{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 18px;
}
.mt-item strong{
  display: block;
  font-family: var(--font-mono);
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--blueprint);
  line-height: 1.1;
}
.mt-item span{
  display: block;
  margin-top: 6px;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

/* ---- Preis-Teaser --------------------------------------------------------*/
.price-teaser{
  margin-top: 20px;
  background: linear-gradient(180deg, var(--blueprint) 0%, var(--blueprint-2) 100%);
  color: #fff;
  border-radius: 20px;
  padding: 26px 26px;
}
.price-teaser .pt-label{
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brass-light);
}
.price-teaser .pt-main{
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 1.3rem;
  font-weight: 700;
}
.price-teaser .pt-main strong{ font-size: 1.9rem; }
.price-teaser .pt-main a{ color: #fff; }
.price-teaser .pt-main a:hover{ color: var(--brass-light); }
.price-teaser .pt-sub{
  margin-top: 12px;
  font-size: 0.88rem;
  color: #C7CCDA;
  line-height: 1.65;
}
.price-teaser .btn{ margin-top: 20px; }
.price-teaser .btn-primary{
  background: var(--brass);
  border-color: var(--brass);
  color: var(--ink);
  box-shadow: none;
}
.price-teaser .btn-primary:hover{ background: var(--brass-light); border-color: var(--brass-light); }
.price-teaser .btn-ghost{
  background: transparent;
  border-color: rgba(255,255,255,.35);
  color: #fff;
}
.price-teaser .btn-ghost:hover{ border-color: #fff; color: #fff; background: rgba(255,255,255,.08); }

/* ---- Nachbarorte / verwandte Leistungen ----------------------------------*/
.nb-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}
.nb-link{
  display: block;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 22px;
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.nb-link:hover{
  transform: translateY(-3px);
  border-color: var(--blueprint);
  box-shadow: 0 16px 34px -22px rgba(30,58,95,.4);
}
.nb-link strong{ display: block; font-size: 1.02rem; }
.nb-link span{
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--stone);
}

/* ---- Städte-Raster -------------------------------------------------------*/
.city-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 12px;
}
.city-pill{
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px 16px 38px;
  transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.city-pill:hover{
  transform: translateY(-2px);
  border-color: var(--blueprint);
  box-shadow: 0 14px 30px -22px rgba(30,58,95,.45);
}
.city-pill .cp-dot{
  position: absolute;
  left: 17px; top: 22px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--brass);
  box-shadow: 0 0 0 3px rgba(200,145,43,.18);
}
.city-pill strong{ font-size: 0.98rem; font-weight: 700; }
.city-pill .cp-sub{
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--stone);
}

.kreis-list{
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.kreis-list li{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--bg-alt);
  color: var(--ink-soft);
}

/* ---- Bundesland-Blöcke ---------------------------------------------------*/
.state-blocks{ display: flex; flex-direction: column; gap: 34px; }
.state-block{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 30px 30px 32px;
  box-shadow: 0 20px 50px -34px rgba(18,20,26,.28);
}
.state-block .sb-head{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.state-block .sb-head h3{ margin-top: 8px; font-size: 1.5rem; }

/* ---- Standort-Hub Hero ---------------------------------------------------*/
.hub-hero{ padding: 34px 0 76px; overflow: hidden; }
.hub-hero-grid{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 50px;
  align-items: center;
  margin-top: 26px;
}
.hub-hero h1{ text-align: left; margin-top: 14px; }
.hub-hero .lede{ text-align: left; margin-top: 20px; max-width: 52ch; }
.hub-stats{
  display: flex;
  gap: 36px;
  margin-top: 30px;
  flex-wrap: wrap;
}
.hub-stats strong{
  display: block;
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--blueprint);
  line-height: 1;
}
.hub-stats span{
  display: block;
  margin-top: 6px;
  font-size: 0.84rem;
  color: var(--ink-soft);
}

/* Radar-Grafik (reines CSS, keine Bilddatei) */
.hub-art{ display: flex; justify-content: center; }
.hub-radar{
  position: relative;
  width: min(100%, 420px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #FFFFFF 0%, var(--bg-alt) 72%, var(--bg) 100%);
  box-shadow: 0 30px 70px -40px rgba(18,20,26,.45), inset 0 0 0 1px var(--line);
}
.hub-radar .hr-ring{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  border: 1px dashed var(--line);
  border-radius: 50%;
}
.hub-radar .hr-1{ width: 34%; height: 34%; }
.hub-radar .hr-2{ width: 62%; height: 62%; }
.hub-radar .hr-3{ width: 88%; height: 88%; }
.hub-radar .hr-center{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  background: linear-gradient(180deg, var(--blueprint) 0%, var(--blueprint-2) 100%);
  color: #fff;
  border-radius: 999px;
  padding: 10px 20px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.86rem;
  box-shadow: 0 10px 26px -10px rgba(30,58,95,.7);
  z-index: 3;
}
.hub-radar .hr-center em{ color: #fff; font-weight: 700; }
.hub-radar .hr-pin{
  position: absolute;
  transform: translate(-50%,-50%);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 13px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-soft);
  white-space: nowrap;
  box-shadow: 0 8px 18px -12px rgba(18,20,26,.4);
  z-index: 2;
}
.hub-radar .hr-pin::before{
  content: '';
  position: absolute;
  left: 7px; top: 50%;
  transform: translateY(-50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--brass);
}
.hub-radar .hr-pin{ padding-left: 20px; }
.hub-radar .hr-p1{ top: 22%; left: 34%; }
.hub-radar .hr-p2{ top: 40%; left: 76%; }
.hub-radar .hr-p3{ top: 68%; left: 70%; }
.hub-radar .hr-p4{ top: 30%; left: 74%; }
.hub-radar .hr-p4{ top: 76%; left: 34%; }
.hub-radar .hr-p5{ top: 62%; left: 22%; }
.hub-radar .hr-p6{ top: 36%; left: 18%; }

/* ---- Leistungskarten (Standort- und Hub-Seiten) --------------------------*/
.svc-card{ display: block; }
.svc-card .svc-ico{
  width: 48px; height: 48px;
  border-radius: 14px;
  background: var(--bg-alt);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.svc-card .svc-ico svg{ width: 24px; height: 24px; stroke: var(--blueprint); }
.svc-card .card-link{ display: inline-flex; }

/* ---- „Für wen" -----------------------------------------------------------*/
.fw-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
.fw-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brass);
  border-radius: 14px;
  padding: 24px 24px;
}
.fw-card h3{ font-size: 1.05rem; margin-bottom: 8px; }
.fw-card p{ color: var(--ink-soft); font-size: 0.92rem; }

/* ---- Leistungsumfang -----------------------------------------------------*/
.scope-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.scope-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 30px 30px;
  position: relative;
  box-shadow: 0 14px 40px -32px rgba(18,20,26,.3);
}
.scope-card .sc-num{
  position: absolute;
  top: 26px; right: 28px;
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--line);
}
.scope-card h3{ margin-bottom: 18px; padding-right: 50px; }
.scope-list{ display: flex; flex-direction: column; gap: 11px; }
.scope-list li{
  position: relative;
  padding-left: 26px;
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.55;
}
.scope-list li::before{
  content: '';
  position: absolute;
  left: 0; top: 6px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--blueprint);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
  background-size: 10px 10px;
  background-position: center;
  background-repeat: no-repeat;
}

/* ---- Ablauf-Schritte -----------------------------------------------------*/
.svc-steps{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
}
.svc-step{
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px 22px;
}
.svc-step .ss-num{
  width: 36px; height: 36px;
  border-radius: 11px;
  background: var(--blueprint);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 700;
  flex: none;
}
.svc-step h3{ font-size: 1.02rem; margin-bottom: 6px; }
.svc-step p{ color: var(--ink-soft); font-size: 0.9rem; }

/* ---- „Was wir nicht machen" ----------------------------------------------*/
.notin-list{
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.notin-list li{
  position: relative;
  padding-left: 28px;
  font-size: 0.93rem;
  color: var(--ink-soft);
  line-height: 1.6;
}
.notin-list li::before{
  content: '–';
  position: absolute;
  left: 8px; top: 0;
  color: var(--stone);
  font-weight: 700;
}

/* ==========================================================================
   Responsive — Tablet
   ========================================================================== */
@media (max-width: 980px){
  .geo-hero-grid,
  .svc-hero-grid,
  .hub-hero-grid,
  .geo-two{
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .geo-facts{ position: static; }
  .scope-grid{ grid-template-columns: 1fr; }
  .hub-art{ order: -1; }
  .hub-radar{ width: min(100%, 340px); }
}

/* ==========================================================================
   Responsive — Handy / iPhone
   ========================================================================== */
@media (max-width: 720px){
  .geo-hero,
  .svc-hero,
  .hub-hero{ padding: 22px 0 48px; }

  .geo-hero h1,
  .svc-hero h1,
  .hub-hero h1{ font-size: clamp(1.95rem, 8.5vw, 2.4rem); }

  .geo-actions{ flex-direction: column; align-items: stretch; }
  .geo-actions .btn{ width: 100%; }

  .geo-facts{ padding: 24px 20px; border-radius: 18px; }
  .geo-facts dl > div{ padding: 10px 0; }

  .mini-trust{ grid-template-columns: 1fr 1fr; gap: 10px; }
  .mt-item{ padding: 14px 14px; }
  .mt-item strong{ font-size: 1.2rem; }
  .mt-item span{ font-size: 0.76rem; }

  .city-grid{ grid-template-columns: 1fr 1fr; gap: 10px; }
  .city-pill{ padding: 13px 12px 13px 32px; }
  .city-pill .cp-dot{ left: 13px; top: 19px; }
  .city-pill strong{ font-size: 0.9rem; }
  .city-pill .cp-sub{ font-size: 0.64rem; }

  .state-block{ padding: 22px 18px 24px; border-radius: 18px; }
  .state-block .sb-head{ margin-bottom: 18px; padding-bottom: 16px; }
  .state-block .sb-head .btn{ width: 100%; }

  .hub-stats{ gap: 22px; }
  .hub-stats strong{ font-size: 1.9rem; }
  .hub-radar{ width: min(100%, 290px); }
  .hub-radar .hr-pin{ font-size: 0.62rem; padding: 4px 10px 4px 17px; }
  .hub-radar .hr-pin::before{ left: 6px; width: 4px; height: 4px; }
  .hub-radar .hr-center{ font-size: 0.76rem; padding: 8px 15px; }

  .scope-card{ padding: 22px 20px; border-radius: 16px; }
  .scope-card .sc-num{ top: 20px; right: 20px; font-size: 1.2rem; }
  .scope-card h3{ padding-right: 40px; margin-bottom: 14px; }

  .fw-card{ padding: 20px 18px; }
  .svc-step{ padding: 18px 16px; }
  .nb-grid{ grid-template-columns: 1fr; }
  .prose p{ font-size: 0.98rem; }
  .ortsteile li{ font-size: 0.74rem; padding: 6px 11px; }
  .price-teaser{ padding: 22px 20px; }

  /* Drei Buttons in der Sticky-Leiste */
  .mobile-cta-bar{ gap: 8px; }
  .mobile-cta-bar .btn-ghost{ width: 48px; padding: 13px 0; }
  .mobile-cta-bar .btn-primary{ font-size: 0.88rem; padding: 13px 12px; }
}

@media (max-width: 380px){
  .city-grid{ grid-template-columns: 1fr; }
  .mini-trust{ grid-template-columns: 1fr; }
  .mobile-cta-bar .btn-primary{ font-size: 0.82rem; }
}

/* ==========================================================================
   Mobile-Feinschliff (iOS/Android)
   ========================================================================== */

/* Kein blauer Blitz beim Antippen */
a, button, summary, .card, .city-pill, .nb-link{
  -webkit-tap-highlight-color: rgba(30,58,95,.12);
}

/* Kein seitliches Scrollen — egal was passiert */
html, body{ max-width: 100%; overflow-x: hidden; }

/* iOS zoomt bei Formularfeldern unter 16px automatisch herein */
@media (max-width: 720px){
  .field input,
  .field textarea,
  .field select{ font-size: 16px; }
}

/* Mindestgröße für Tap-Ziele */
@media (max-width: 720px){
  .nav-mobile a,
  .footer-grid li a,
  .faq-item summary{ min-height: 44px; }
  .footer-grid li{ margin-bottom: 4px; }
  .footer-grid li a{ display: flex; align-items: center; }
}

/* Sichere Bereiche bei iPhones mit Notch/Dynamic Island */
@supports (padding: max(0px)){
  .container{
    padding-left: max(28px, env(safe-area-inset-left));
    padding-right: max(28px, env(safe-area-inset-right));
  }
  .mobile-cta-bar{
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
}

/* Sticky-Elemente dürfen die feste Leiste nicht überlappen */
@media (max-width: 720px){
  .geo-facts{ position: static; }
}

/* Bilder nie über den Rand */
img{ height: auto; }

/* ---- Reduzierte Bewegung -------------------------------------------------*/
@media (prefers-reduced-motion: reduce){
  .city-pill, .nb-link, .svc-card{ transition: none; }
}

/* ---- Leistungs-Übersicht (leistungen.html) -------------------------------*/
.lst-rows{ display: flex; flex-direction: column; gap: 24px; }
.lst-row{
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 30px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 34px 34px;
  box-shadow: 0 18px 46px -34px rgba(18,20,26,.3);
  scroll-margin-top: 110px;
}
.lst-side{ display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lst-num{
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--line);
  line-height: 1;
}
.lst-ico{
  width: 56px; height: 56px;
  border-radius: 16px;
  background: var(--bg-alt);
  display: flex; align-items: center; justify-content: center;
}
.lst-ico svg{ width: 28px; height: 28px; stroke: var(--blueprint); }
.lst-body h3{ margin-top: 8px; font-size: 1.45rem; }
.lst-body > p{ margin-top: 14px; color: var(--ink-soft); font-size: 0.98rem; line-height: 1.7; max-width: 62ch; }
.lst-pts{
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
}
.lst-foot{
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.lst-price{
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--blueprint);
}

@media (max-width: 720px){
  .lst-row{
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 24px 20px;
    border-radius: 18px;
  }
  .lst-side{ flex-direction: row; align-items: center; gap: 14px; }
  .lst-num{ font-size: 1.2rem; }
  .lst-ico{ width: 46px; height: 46px; border-radius: 13px; }
  .lst-ico svg{ width: 23px; height: 23px; }
  .lst-body h3{ font-size: 1.25rem; }
  .lst-pts{ grid-template-columns: 1fr; }
  .lst-foot .btn{ width: 100%; }
}

/* ==========================================================================
   TEIL 3 — Standortdaten, lokale Besonderheiten, rechtlicher Rahmen
   ========================================================================== */

/* ---- Standortdaten (Kennzahlen-Kacheln) ----------------------------------*/
.sd-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.sd-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px 24px;
  box-shadow: 0 14px 40px -34px rgba(18,20,26,.3);
}
.sd-card .sd-ico{
  width: 44px; height: 44px;
  border-radius: 13px;
  background: var(--bg-alt);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.sd-card .sd-ico svg{ width: 22px; height: 22px; stroke: var(--blueprint); }
.sd-card .sd-label{
  display: block;
  font-size: 0.84rem;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.sd-card .sd-value{
  display: block;
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--ink);
}
.sd-card .sd-sub{
  display: block;
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--stone);
}

/* ---- Lokale Besonderheiten -----------------------------------------------*/
.loc-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.loc-card{
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px 28px;
  box-shadow: 0 14px 40px -34px rgba(18,20,26,.28);
}
.loc-card .loc-ico{
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.loc-card .loc-ico svg{ width: 22px; height: 22px; }
.loc-card h3{ font-size: 1.08rem; margin-bottom: 9px; }
.loc-card p{ color: var(--ink-soft); font-size: 0.94rem; line-height: 1.68; }

/* Drei Ausprägungen: neutral, Achtung, Vorteil */
.loc-info .loc-ico{ background: var(--bg-alt); }
.loc-info .loc-ico svg{ stroke: var(--blueprint); }

.loc-warn{ background: #FDF8EE; border-color: #EFDDAF; }
.loc-warn .loc-ico{ background: #F6E7C4; }
.loc-warn .loc-ico svg{ stroke: #9A6F14; }

.loc-ok{ background: #F1F6F1; border-color: #CFE2CF; }
.loc-ok .loc-ico{ background: #DCEBDC; }
.loc-ok .loc-ico svg{ stroke: #2F6B3A; }

/* ---- Rechtlicher Rahmen --------------------------------------------------*/
.legal-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: start;
}
.legal-card{
  border-radius: 20px;
  padding: 30px 30px;
  border: 1px solid var(--line);
  background: var(--card);
}
.legal-card .lc-head{
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 18px;
}
.legal-card .lc-ico{
  width: 46px; height: 46px;
  border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.legal-card .lc-ico svg{ width: 23px; height: 23px; }
.legal-card h3{ font-size: 1.12rem; }
.legal-card .lc-sub{
  display: block;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--stone);
}
.legal-card > p{ color: var(--ink-soft); font-size: 0.94rem; line-height: 1.7; }
.legal-card .lc-list{
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.legal-card .lc-list li{
  position: relative;
  padding-left: 26px;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.legal-card .lc-list li::before{
  content: '';
  position: absolute;
  left: 0; top: 4px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background-size: 10px 10px;
  background-position: center;
  background-repeat: no-repeat;
}
.legal-card .lc-foot{
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.legal-card .lc-foot span{
  display: block;
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin-bottom: 14px;
}

.legal-blue{ background: #F2F6FB; border-color: #D8E3F0; }
.legal-blue .lc-ico{ background: #DDE8F5; }
.legal-blue .lc-ico svg{ stroke: var(--blueprint); }
.legal-blue .lc-list li::before{
  background-color: var(--blueprint);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
}
.legal-blue .lc-foot{ border-top-color: #D8E3F0; }

.legal-amber{ background: #FDF8EE; border-color: #EFDDAF; }
.legal-amber .lc-ico{ background: #F6E7C4; }
.legal-amber .lc-ico svg{ stroke: #9A6F14; }
.legal-amber .lc-list li::before{
  background-color: #B5851C;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
}
.legal-amber .lc-foot{ border-top-color: #EFDDAF; }
.legal-amber .btn-primary{
  background: var(--brass);
  border-color: var(--brass);
  color: var(--ink);
  box-shadow: none;
}
.legal-amber .btn-primary:hover{ background: var(--brass-light); border-color: var(--brass-light); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px){
  .sd-grid{ grid-template-columns: 1fr 1fr; }
  .loc-grid{ grid-template-columns: 1fr; }
  .legal-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 720px){
  .sd-grid{ grid-template-columns: 1fr 1fr; gap: 12px; }
  .sd-card{ padding: 18px 16px; border-radius: 15px; }
  .sd-card .sd-ico{ width: 36px; height: 36px; border-radius: 11px; margin-bottom: 13px; }
  .sd-card .sd-ico svg{ width: 18px; height: 18px; }
  .sd-card .sd-label{ font-size: 0.76rem; }
  .sd-card .sd-value{ font-size: 1.15rem; }
  .sd-card .sd-sub{ font-size: 0.72rem; }

  .loc-card{
    flex-direction: column;
    gap: 14px;
    padding: 22px 20px;
    border-radius: 16px;
  }
  .loc-card h3{ font-size: 1.02rem; }
  .loc-card p{ font-size: 0.91rem; }

  .legal-card{ padding: 24px 20px; border-radius: 16px; }
  .legal-card .lc-head{ gap: 13px; margin-bottom: 15px; }
  .legal-card .lc-ico{ width: 40px; height: 40px; border-radius: 12px; }
  .legal-card h3{ font-size: 1.04rem; }
  .legal-card .lc-foot .btn{ width: 100%; }
}

@media (max-width: 380px){
  .sd-grid{ grid-template-columns: 1fr; }
}

/* Beispielrechnung im Preis-Teaser der Standortseiten */
.price-teaser .pt-main{
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.1;
}
.price-teaser .pt-main small{
  display: block;
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 400;
  color: #C7CCDA;
}
@media (max-width: 720px){
  .price-teaser .pt-main{ font-size: 1.7rem; }
}

/* ==========================================================================
   TEIL 4 — Marktdaten je Standort
   ========================================================================== */
.md-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.md-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px 24px;
  box-shadow: 0 14px 40px -34px rgba(18,20,26,.3);
  display: flex;
  flex-direction: column;
}
.md-card .md-ico{
  width: 44px; height: 44px;
  border-radius: 13px;
  background: var(--bg-alt);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.md-card .md-ico svg{ width: 22px; height: 22px; stroke: var(--blueprint); }
.md-card .md-label{
  font-size: 0.84rem;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.md-card .md-value{
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1.15;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.md-card .md-yoy{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  font-size: 0.8rem;
  font-weight: 600;
}
.md-card .md-yoy svg{ width: 13px; height: 13px; flex: none; }
.md-card .md-yoy.md-up{ color: #2F7A3E; }
.md-card .md-yoy.md-down{ color: #B3523E; }
.md-card .md-sub{
  margin-top: 8px;
  font-size: 0.76rem;
  color: var(--stone);
}

/* Quellenangabe — gehört sichtbar auf die Seite, nicht ins Kleingedruckte */
.md-source{
  margin-top: 20px;
  padding: 16px 20px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--ink-soft);
}
.md-source strong{ color: var(--ink); }

.sd-heading{
  margin-top: 46px;
  margin-bottom: 20px;
  font-size: 1.15rem;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

@media (max-width: 980px){
  .md-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px){
  .md-grid{ grid-template-columns: 1fr 1fr; gap: 12px; }
  .md-card{ padding: 18px 16px; border-radius: 15px; }
  .md-card .md-ico{ width: 36px; height: 36px; border-radius: 11px; margin-bottom: 13px; }
  .md-card .md-ico svg{ width: 18px; height: 18px; }
  .md-card .md-label{ font-size: 0.76rem; }
  .md-card .md-value{ font-size: 1.22rem; }
  .md-card .md-yoy{ font-size: 0.72rem; margin-top: 8px; }
  .md-card .md-sub{ font-size: 0.7rem; }
  .md-source{ font-size: 0.78rem; padding: 14px 16px; }
  .sd-heading{ margin-top: 34px; padding-top: 22px; font-size: 1.05rem; }
}
@media (max-width: 380px){
  .md-grid{ grid-template-columns: 1fr; }
}

/* Footer-Spaltenüberschriften: semantisch h2, optisch unverändert */
.footer-grid h2.footer-h{
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass-light);
  margin-bottom: 18px;
}
/* Kontaktkarte: Name als h2 statt h3, Optik identisch */
.contact-info h2.ci-name{
  color: var(--bg);
  font-size: 1.25rem;
  font-weight: 700;
  margin-top: 14px;
}

/* ---- Vergleichstabelle auf den Bundesland-Seiten -------------------------*/
.table-wrap{
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  box-shadow: 0 14px 40px -34px rgba(18,20,26,.3);
  -webkit-overflow-scrolling: touch;
}
.geo-table{
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 0.93rem;
}
.geo-table thead th{
  text-align: right;
  padding: 16px 18px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
  font-weight: 500;
  border-bottom: 1px solid var(--line);
  background: var(--bg-alt);
  white-space: nowrap;
}
.geo-table thead th:first-child{ text-align: left; }
.geo-table tbody th{
  text-align: left;
  padding: 14px 18px;
  font-weight: 600;
  border-bottom: 1px solid var(--line);
}
.geo-table tbody th a{ color: var(--blueprint); text-decoration: underline; text-underline-offset: 3px; }
.geo-table tbody th a:hover{ color: var(--brass); }
.geo-table .t-kreis{
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--stone);
  margin-top: 2px;
}
.geo-table tbody td{
  padding: 14px 18px;
  text-align: right;
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.geo-table tbody tr:last-child th,
.geo-table tbody tr:last-child td{ border-bottom: none; }
.geo-table tbody tr:hover{ background: var(--bg-alt); }
.geo-table .t-na{ color: var(--stone); }

@media (max-width: 720px){
  .geo-table{ font-size: 0.86rem; min-width: 480px; }
  .geo-table thead th{ padding: 12px 13px; font-size: 0.64rem; }
  .geo-table tbody th, .geo-table tbody td{ padding: 11px 13px; }
}

/* Rechtstexte: Abschnittsüberschriften sind h2, Optik wie bisher */
.legal-h{ font-size: 1.25rem; font-weight: 700; }

/* ==========================================================================
   TEIL 5 — Bewertungen: Verifiziert-Kennzeichnung und Portal-Leiste
   ========================================================================== */

/* Grüner Punkt + "Verifizierte Bewertungen" */
.verified-tag{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.82rem;
  color: #2F7A3E;
  font-weight: 600;
  white-space: nowrap;
}
.vt-dot{
  position: relative;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #22C55E;
  flex: none;
}
.vt-dot::after{
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: #22C55E;
  opacity: .5;
  animation: pulseDot 2.2s ease-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .vt-dot::after{ animation: none; opacity: 0; }
}

.rating-line{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 20px;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.rating-line strong{ color: var(--ink); }
.rating-line a{
  color: var(--blueprint);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rating-line a:hover{ color: var(--brass); }
.rating-line .rl-extra{ color: var(--stone); }

/* Auf dunklem Grund */
.cta-band .verified-tag,
.stats-band .verified-tag,
.contact-info .verified-tag{ color: #6EE7A0; }
.cta-band .rating-line,
.stats-band .rating-line{ color: #C7CCDA; }
.cta-band .rating-line strong,
.stats-band .rating-line strong{ color: #fff; }

/* ---- Portal-Leiste -------------------------------------------------------*/
.review-portals{ margin-top: 34px; }
.review-portals .rp-headline{
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 14px;
  text-align: center;
}
.rp-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}
.rp-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 14px;
  transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.rp-item:hover{
  transform: translateY(-2px);
  border-color: var(--blueprint);
  box-shadow: 0 14px 30px -22px rgba(30,58,95,.45);
}
.rp-item .rp-name{ font-weight: 700; font-size: 0.92rem; }
.rp-item .rp-stars{ color: var(--brass); font-size: 0.8rem; letter-spacing: 1px; }
.rp-item .rp-rating{
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--ink);
}
.rp-item .rp-count{ font-size: 0.72rem; color: var(--stone); }
.rp-item .rp-ver{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  font-size: 0.68rem;
  font-weight: 600;
  color: #2F7A3E;
}
.rp-item .rp-ver .vt-dot{ width: 6px; height: 6px; }
.rp-item .rp-ver .vt-dot::after{ inset: -3px; }

/* Badges im Hero bekommen die Kennzeichnung ebenfalls */
.rating-badge-big .rb-ver{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.68rem;
  font-weight: 600;
  color: #2F7A3E;
}
.rating-badge-big .rb-ver .vt-dot{ width: 6px; height: 6px; }
.rating-badge-big .rb-ver .vt-dot::after{ inset: -3px; }

@media (max-width: 720px){
  .rp-grid{ grid-template-columns: 1fr 1fr; gap: 10px; }
  .rp-item{ padding: 13px 10px; border-radius: 12px; }
  .rp-item .rp-name{ font-size: 0.84rem; }
  .rp-item .rp-rating{ font-size: 1rem; }
  .rating-line{ font-size: 0.85rem; }
}

/* ==========================================================================
   TEIL 6 — Wissen & Ratgeber
   ========================================================================== */
.cat-list{
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 26px;
}
.cat-list li{
  font-family: var(--font-mono);
  font-size: 0.76rem;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink-soft);
}
.cat-list li span{ color: var(--stone); }

.art-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}
.art-card{
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 30px 28px;
  box-shadow: 0 14px 40px -34px rgba(18,20,26,.3);
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.art-card:hover{
  transform: translateY(-4px);
  border-color: var(--blueprint);
  box-shadow: 0 20px 44px -26px rgba(30,58,95,.38);
}
.art-card .ac-cat{
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--brass);
  background: var(--bg-alt);
  padding: 5px 11px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.art-card h3{ font-size: 1.15rem; line-height: 1.32; margin-bottom: 10px; }
.art-card p{ color: var(--ink-soft); font-size: 0.92rem; flex: 1; line-height: 1.6; }
.art-card .ac-meta{
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--stone);
}
.art-card .ac-arrow{ color: var(--blueprint); transition: transform .3s var(--ease); }
.art-card:hover .ac-arrow{ transform: translateX(4px); }

/* ---- Artikelseite --------------------------------------------------------*/
.art{ padding: 34px 0 60px; }
.art-container{ max-width: 780px; }
.art-head{ margin-top: 22px; }
.art-head h1{ font-size: clamp(1.95rem, 4.6vw, 2.7rem); margin-top: 14px; }
.art-head .lede{ text-align: left; margin-top: 18px; max-width: none; }
.art-meta{
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--stone);
}

.art-toc{
  margin-top: 30px;
  background: var(--bg-alt);
  border-radius: 16px;
  padding: 24px 26px;
}
.art-toc .toc-title{
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 12px;
}
.art-toc ol{
  margin: 0;
  padding-left: 20px;
  list-style: decimal;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.art-toc li{ color: var(--ink-soft); font-size: 0.92rem; }
.art-toc a{ color: var(--blueprint); }
.art-toc a:hover{ text-decoration: underline; text-underline-offset: 3px; }

.art-body{ margin-top: 36px; }
.art-body .art-intro{
  font-size: 1.08rem;
  line-height: 1.75;
  color: var(--ink);
  padding-bottom: 8px;
}
.art-body h2{
  font-size: 1.35rem;
  margin-top: 38px;
  margin-bottom: 12px;
  scroll-margin-top: 110px;
}
.art-body p{
  color: var(--ink-soft);
  font-size: 1.01rem;
  line-height: 1.78;
}

.art-box{
  margin-top: 40px;
  background: linear-gradient(180deg, var(--blueprint) 0%, var(--blueprint-2) 100%);
  color: #fff;
  border-radius: 20px;
  padding: 30px 30px;
}
.art-box h3{ color: #fff; margin-bottom: 10px; }
.art-box p{ color: #C7CCDA; font-size: 0.96rem; line-height: 1.7; }
.art-box .btn{
  margin-top: 20px;
  background: var(--brass);
  border-color: var(--brass);
  color: var(--ink);
  box-shadow: none;
}
.art-box .btn:hover{ background: var(--brass-light); border-color: var(--brass-light); }

.art-disclaimer{
  margin-top: 36px;
  padding: 16px 20px;
  border-left: 3px solid var(--line);
  font-size: 0.84rem;
  line-height: 1.65;
  color: var(--stone);
}

@media (max-width: 720px){
  .art{ padding: 20px 0 44px; }
  .art-grid{ grid-template-columns: 1fr; gap: 14px; }
  .art-card{ padding: 22px 20px; border-radius: 16px; }
  .art-card h3{ font-size: 1.05rem; }
  .art-toc{ padding: 20px 18px; }
  .art-body h2{ font-size: 1.18rem; margin-top: 30px; }
  .art-body p{ font-size: 0.97rem; }
  .art-body .art-intro{ font-size: 1.02rem; }
  .art-box{ padding: 24px 20px; }
  .art-box .btn{ width: 100%; }
}

/* ==========================================================================
   TEIL 7 — Verwalterwechsel: Schritte und Musterbeschlüsse
   ========================================================================== */
.ws-steps{ display: flex; flex-direction: column; gap: 14px; max-width: 880px; margin-inline: auto; }
.ws-step{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.ws-step[open]{ border-color: var(--brass-light); box-shadow: 0 14px 36px -30px rgba(18,20,26,.4); }
.ws-step summary{
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 24px;
  cursor: pointer;
  list-style: none;
  min-height: 44px;
}
.ws-step summary::-webkit-details-marker{ display: none; }
.ws-num{
  width: 46px; height: 46px;
  border-radius: 13px;
  background: var(--brass-light);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 1.15rem;
  flex: none;
}
.ws-txt{ flex: 1; min-width: 0; }
.ws-txt strong{ display: block; font-family: var(--font-display); font-size: 1.1rem; }
.ws-txt span{ display: block; margin-top: 3px; color: var(--ink-soft); font-size: 0.9rem; }
.ws-chev{ flex: none; color: var(--stone); transition: transform .3s var(--ease); }
.ws-chev svg{ width: 20px; height: 20px; display: block; }
.ws-step[open] .ws-chev{ transform: rotate(180deg); }
.ws-detail{
  padding: 0 24px 22px 88px;
  color: var(--ink-soft);
  font-size: 0.94rem;
  line-height: 1.72;
}

/* ---- Musterbeschlüsse ----------------------------------------------------*/
.mb-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: start;
}
.mb-card{
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 28px 28px;
  background: var(--card);
}
.mb-head{ display: flex; gap: 15px; align-items: center; margin-bottom: 16px; }
.mb-ico{
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.mb-ico svg{ width: 22px; height: 22px; }
.mb-card h3{ font-size: 1.18rem; }
.mb-sub{
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--stone);
}
.mb-card > p{ color: var(--ink-soft); font-size: 0.93rem; line-height: 1.7; }
.mb-list{ margin-top: 16px; display: flex; flex-direction: column; gap: 9px; }
.mb-list li{
  position: relative;
  padding-left: 26px;
  font-size: 0.89rem;
  color: var(--ink-soft);
}
.mb-list li::before{
  content: '';
  position: absolute; left: 0; top: 3px;
  width: 15px; height: 15px; border-radius: 50%;
  background-size: 10px 10px; background-position: center; background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
}

.mb-red{ background: #FDF3F3; border-color: #F0D6D6; }
.mb-red .mb-ico{ background: #F6DCDC; }
.mb-red .mb-ico svg{ stroke: #B4413C; }
.mb-red .mb-list li::before{ background-color: #B4413C; }
.mb-red .mb-toggle summary{ background: #F6DCDC; color: #8E312D; }

.mb-green{ background: #F2F8F3; border-color: #CFE4D3; }
.mb-green .mb-ico{ background: #DBEDDF; }
.mb-green .mb-ico svg{ stroke: #2F7A3E; }
.mb-green .mb-list li::before{ background-color: #2F7A3E; }
.mb-green .mb-toggle summary{ background: #DBEDDF; color: #2460310; color: #246031; }

.mb-toggle{ margin-top: 20px; }
.mb-toggle summary{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 18px;
  border-radius: 999px;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 0.92rem;
  min-height: 44px;
}
.mb-toggle summary::-webkit-details-marker{ display: none; }
.mb-toggle .mb-close{ display: none; }
.mb-toggle[open] .mb-open{ display: none; }
.mb-toggle[open] .mb-close{ display: inline; }
.mb-text{
  margin: 14px 0 0;
  max-height: 300px;
  overflow: auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 18px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.65;
  color: var(--ink-soft);
  white-space: pre-wrap;
  word-break: break-word;
  -webkit-overflow-scrolling: touch;
}
.mb-copy{ width: 100%; margin-top: 14px; }
.mb-copy svg{ width: 17px; height: 17px; }
.mb-copy.is-done{ border-color: #2F7A3E; color: #2F7A3E; }

@media (max-width: 860px){
  .mb-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 720px){
  .ws-step summary{ padding: 16px 16px; gap: 14px; }
  .ws-num{ width: 38px; height: 38px; border-radius: 11px; font-size: 1rem; }
  .ws-txt strong{ font-size: 1rem; }
  .ws-txt span{ font-size: 0.85rem; }
  .ws-detail{ padding: 0 16px 18px 16px; font-size: 0.9rem; }
  .mb-card{ padding: 22px 18px; border-radius: 16px; }
  .mb-text{ font-size: 0.72rem; max-height: 260px; }
}

/* ==========================================================================
   TEIL 8 — Druckbogen der Preis-Indikation (wird als PDF gespeichert)
   ========================================================================== */
@media print{
  @page{ size: A4; margin: 16mm 15mm; }

  body.is-printing-price .print-sheet{
    font-family: Arial, Helvetica, sans-serif;
    color: #16202C;
    font-size: 10pt;
    line-height: 1.5;
  }

  /* Kopfzeile mit Wortmarke */
  body.is-printing-price .print-sheet .ps-head{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 8pt;
    border-bottom: 2.5pt solid #1E3A5F;
    margin-bottom: 16pt;
  }
  body.is-printing-price .print-sheet .ps-logo{
    font-size: 19pt;
    font-weight: 800;
    letter-spacing: 3pt;
    color: #1E3A5F;
    line-height: 1;
  }
  body.is-printing-price .print-sheet .ps-sub2{
    font-size: 8pt;
    letter-spacing: .6pt;
    color: #57606C;
    margin-top: 3pt;
  }
  body.is-printing-price .print-sheet .ps-ref{
    text-align: right;
    font-size: 8.5pt;
    color: #57606C;
  }
  body.is-printing-price .print-sheet .ps-ref span{
    display: inline-block;
    min-width: 58pt;
    color: #8A93A0;
  }

  body.is-printing-price .print-sheet h1{
    font-size: 17pt;
    margin: 0 0 3pt;
    color: #16202C;
  }
  body.is-printing-price .print-sheet .ps-sub{
    font-size: 9.5pt;
    color: #57606C;
    margin-bottom: 14pt;
  }

  /* Ergebnisblock */
  body.is-printing-price .print-sheet .ps-hero{
    background: #F1F4F8;
    border-left: 3.5pt solid #C8912B;
    padding: 12pt 14pt;
    margin-bottom: 16pt;
  }
  body.is-printing-price .print-sheet .ps-hero-main{
    font-size: 11pt;
    color: #57606C;
  }
  body.is-printing-price .print-sheet .ps-hero-main span{
    font-size: 22pt;
    font-weight: 800;
    color: #1E3A5F;
    letter-spacing: -0.5pt;
  }
  body.is-printing-price .print-sheet .ps-hero-sub{
    font-size: 9pt;
    color: #57606C;
    margin-top: 4pt;
  }

  body.is-printing-price .print-sheet .ps-h2{
    font-size: 10.5pt;
    margin: 0 0 6pt;
    padding-bottom: 3pt;
    border-bottom: .75pt solid #C8D0DA;
    color: #1E3A5F;
  }

  body.is-printing-price .print-sheet table{
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 16pt;
  }
  body.is-printing-price .print-sheet td{
    padding: 5.5pt 0;
    border-bottom: .5pt solid #DDE2E9;
    font-size: 9.5pt;
  }
  body.is-printing-price .print-sheet td:last-child{
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  body.is-printing-price .print-sheet tr.ps-total td{
    font-weight: 700;
    font-size: 11pt;
    border-bottom: none;
    border-top: 1.2pt solid #1E3A5F;
    padding-top: 7pt;
  }
  body.is-printing-price .print-sheet tr.ps-year td{
    border-bottom: none;
    color: #57606C;
    font-size: 9pt;
    padding-top: 2pt;
  }

  /* Zwei Spalten: Leistungen und Staffel */
  body.is-printing-price .print-sheet .ps-cols{
    display: flex;
    gap: 22pt;
    margin-bottom: 14pt;
  }
  body.is-printing-price .print-sheet .ps-cols > div{ flex: 1; }
  body.is-printing-price .print-sheet ul{
    padding-left: 12pt;
    margin: 0;
    font-size: 9pt;
    color: #333;
  }
  body.is-printing-price .print-sheet li{ margin-bottom: 3pt; }
  body.is-printing-price .print-sheet .ps-tiers td{
    padding: 4pt 0;
    font-size: 9pt;
  }
  body.is-printing-price .print-sheet .ps-tiers{ margin-bottom: 4pt; }
  body.is-printing-price .print-sheet .ps-mini{
    font-size: 8.5pt;
    color: #57606C;
    line-height: 1.55;
  }

  body.is-printing-price .print-sheet .ps-note{
    font-size: 8pt;
    color: #57606C;
    line-height: 1.55;
    background: #FAFBFC;
    border: .5pt solid #DDE2E9;
    padding: 8pt 10pt;
  }
  body.is-printing-price .print-sheet .ps-foot{
    margin-top: 12pt;
    padding-top: 6pt;
    border-top: .5pt solid #DDE2E9;
    font-size: 7.5pt;
    color: #8A93A0;
    text-align: center;
  }
}

/* ==========================================================================
   TEIL 9 — Vertrauensblock im Hero und echte Kundenstimmen
   ========================================================================== */
.hero-reviews{
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}
.hr-google{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 22px 34px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 16px 40px -30px rgba(18,20,26,.4);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
a.hr-google:hover{
  transform: translateY(-3px);
  border-color: var(--blueprint);
  box-shadow: 0 22px 46px -26px rgba(30,58,95,.45);
}
.hr-logo{ width: 40px; height: 40px; }
.hr-logo svg{ width: 100%; height: 100%; display: block; }
.hr-score{
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 2rem;
  line-height: 1.05;
  color: var(--ink);
  margin-top: 6px;
}
.hr-stars{ color: var(--brass); font-size: 1.05rem; letter-spacing: 3px; }
.hr-count{ font-size: 0.86rem; color: var(--ink-soft); }
.hr-google .verified-tag{ margin-top: 4px; font-size: 0.76rem; }

/* Portalleiste unter der Google-Kachel */
.portal-marks{ width: 100%; }
.pm-head{
  display: block;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 14px;
}
.pm-row{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.pm-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 8px;
}
.pm-ico{
  width: 28px; height: 28px;
  color: var(--pm, var(--blueprint));
}
.pm-ico svg{ width: 100%; height: 100%; display: block; }
.pm-name{
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  line-height: 1.25;
}
.pm-stars{ color: var(--brass); font-size: 0.66rem; letter-spacing: 1px; }

/* ---- Echte Kundenstimmen -------------------------------------------------*/
.testi-card .tc-title{
  display: block;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1rem;
  margin-bottom: 8px;
  position: relative;
}
.testi-card .testi-attr{
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding-top: 16px;
  margin-top: 18px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.testi-card .tc-author{ color: #E7E9E4; font-weight: 600; }
.testi-card .tc-src{ color: #8F98A6; font-size: 0.72rem; }
.testi-card .verified-tag{ color: #6EE7A0; font-size: 0.72rem; margin-top: 3px; }

@media (max-width: 980px){
  .testi-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px){
  .hero-reviews{ margin-top: 32px; gap: 20px; }
  .hr-google{ padding: 18px 26px; border-radius: 17px; }
  .hr-score{ font-size: 1.7rem; }
  .hr-logo{ width: 34px; height: 34px; }
  .pm-row{ grid-template-columns: 1fr 1fr; gap: 10px; }
  .pm-item{ padding: 12px 8px; }
  .testi-grid{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   TEIL 10 — Fünf Kennzahlen, Portalleiste, Google-Verknüpfung
   ========================================================================== */

/* Fünf Kacheln statt vier: auto-fit, damit kein Waisenkind entsteht */
.stats-band-grid{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 720px){ .stats-band-grid{ grid-template-columns: 1fr 1fr; } }

/* Karte, die per Aggregator nachlesbar ist */
.rp-item .rp-via{
  display: block;
  margin-top: 3px;
  font-size: 0.64rem;
  color: var(--stone);
  line-height: 1.3;
}
.rp-note{
  margin-top: 16px;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--stone);
  text-align: center;
  max-width: 68ch;
  margin-inline: auto;
}

/* Sechs Portale sauber verteilen */
.rp-grid{ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
@media (max-width: 720px){
  .rp-grid{ grid-template-columns: 1fr 1fr; }
}

/* Google-Kachel: klickbar deutlich machen */
a.hr-google{ position: relative; }
a.hr-google::after{
  content: '↗';
  position: absolute;
  top: 12px; right: 14px;
  font-size: 0.8rem;
  color: var(--stone);
}

/* ==========================================================================
   TEIL 11 — Kompakter Vertrauensblock vor jeder Handlungsaufforderung
   ========================================================================== */
.trust-strip{
  padding: 0 0 48px;
  background: var(--bg-alt);
}
.section-alt + .trust-strip{ background: #fff; }
.tsc-inner{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
  flex-wrap: wrap;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 24px 32px;
  box-shadow: 0 16px 44px -34px rgba(18,20,26,.35);
}

/* Google-Block links */
.tsc-google{
  display: flex;
  align-items: center;
  gap: 14px;
  padding-right: 32px;
  border-right: 1px solid var(--line);
  transition: opacity .25s var(--ease);
}
.tsc-google:hover{ opacity: .78; }
.tsc-glogo{ width: 34px; height: 34px; flex: none; }
.tsc-glogo svg{ width: 100%; height: 100%; display: block; }
.tsc-gtext{ display: flex; flex-direction: column; gap: 1px; }
.tsc-gscore{
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 1.35rem;
  line-height: 1.1;
  color: var(--ink);
}
.tsc-gstars{ color: var(--brass); font-size: 0.82rem; letter-spacing: 2px; }
.tsc-gcount{ font-size: 0.8rem; color: var(--ink-soft); }
.tsc-google .verified-tag{ font-size: 0.74rem; }

/* Portalreihe rechts */
.tsc-portals{ display: flex; flex-direction: column; gap: 10px; }
.tsc-head{
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--stone);
}
.tsc-row{ display: flex; gap: 22px; flex-wrap: wrap; }
.tsc-portal{ display: flex; align-items: center; gap: 8px; }
.tsc-ico{ width: 20px; height: 20px; color: var(--pm, var(--blueprint)); flex: none; }
.tsc-ico svg{ width: 100%; height: 100%; display: block; }
.tsc-pname{ font-size: 0.8rem; font-weight: 600; color: var(--ink); }
.tsc-pscore{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--ink);
}
.tsc-pstars{ color: var(--brass); font-size: 0.6rem; letter-spacing: 1px; }

/* Bewertung auch in der Hero-Portalleiste sichtbar */
.pm-rating{
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--ink);
  line-height: 1.1;
}

@media (max-width: 980px){
  .tsc-inner{ gap: 22px; padding: 20px 22px; }
  .tsc-google{ padding-right: 0; border-right: none; border-bottom: 1px solid var(--line); padding-bottom: 18px; width: 100%; justify-content: center; }
  .tsc-portals{ width: 100%; align-items: center; }
  .tsc-row{ justify-content: center; gap: 18px; }
}
@media (max-width: 720px){
  .trust-strip{ padding-bottom: 36px; }
  .tsc-inner{ border-radius: 17px; padding: 18px 16px; }
  .tsc-gscore{ font-size: 1.2rem; }
  .tsc-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px 10px; width: 100%; }
  .tsc-portal{ flex-direction: column; gap: 4px; text-align: center; }
  .tsc-pname{ font-size: 0.72rem; }
  .tsc-pscore{ font-size: 0.8rem; }
  .pm-rating{ font-size: 0.95rem; }
}

/* ==========================================================================
   TEIL 12 — Mobile-Überarbeitung
   Ziel: alle 62 Seiten auf dem Handy so, dass ein Eigentümer in drei
   Sekunden versteht, worum es geht, und mit einem Daumen anrufen kann.
   ========================================================================== */

/* ---- Mobiles Menü --------------------------------------------------------
   Vorher: justify-content:space-between hat beim hervorgehobenen Eintrag
   den Leuchtpunkt nach links und den Text nach rechts gedrückt. Und 1,35 rem
   auf zehn Einträgen war schlicht zu hoch für einen Handybildschirm. */
@media (max-width: 980px){
  .nav-mobile{
    inset: 88px 12px auto 12px;
    max-height: calc(100dvh - 104px - env(safe-area-inset-bottom));
    padding: 6px 18px 20px;
    border-radius: 18px;
    overscroll-behavior: contain;
  }
  .nav-mobile a{
    justify-content: flex-start;
    gap: 10px;
    font-size: 1.05rem;
    font-weight: 600;
    padding: 13px 0;
    min-height: 48px;
  }
  .nav-mobile a[aria-current="page"]{
    color: var(--blueprint);
    font-weight: 700;
  }
  .nav-mobile a.nav-highlight{
    color: var(--blueprint);
    font-weight: 700;
  }
  /* Der Leuchtpunkt gehört direkt vor den Text, nicht an den Rand */
  .nav-mobile a.nav-highlight .glow-dot{ order: -1; margin: 0; }
  .nav-mobile .btn{
    margin-top: 16px;
    padding: 15px 20px;
    font-size: 0.95rem;
    justify-content: center;
    min-height: 52px;
  }
  .nav-mobile a:last-of-type{ border-bottom: none; }
}

/* ---- Kopfzeile schlanker --------------------------------------------------*/
@media (max-width: 720px){
  .site-header{ top: 10px; }
  .site-header .container{
    height: 60px;
    padding-inline: 16px;
  }
  .brand-logo{ width: 124px; height: 38px; }
}

/* ---- Hero: schneller auf den Punkt ---------------------------------------*/
@media (max-width: 720px){
  .hero{ padding: 26px 0 30px; }
  .hero-copy h1{ margin-top: 14px; }
  .hero .lede{ margin-top: 15px; font-size: 1rem; }
  .hero-badges{ margin-bottom: 18px; }
  .hero-actions{ margin-top: 24px; gap: 11px; }
  .hero-actions .btn{ min-height: 54px; font-size: 1rem; }
}

/* ---- Abschnitte enger stapeln --------------------------------------------*/
@media (max-width: 720px){
  section{ padding: 48px 0; }
  .section-head{ margin-bottom: 30px; }
  .section-head .lede{ margin-top: 12px; font-size: 0.98rem; }
  .section-foot{ margin-top: 30px; }
  .container{ padding-inline: 18px; }
  .callout-band{ margin-top: 18px; }
}
@supports (padding: max(0px)){
  @media (max-width: 720px){
    .container{
      padding-left: max(18px, env(safe-area-inset-left));
      padding-right: max(18px, env(safe-area-inset-right));
    }
  }
}

/* ---- Dunkles Kennzahlenband ----------------------------------------------*/
@media (max-width: 720px){
  .stats-band-grid{ margin-top: 32px; gap: 12px; }
  .stat-card{ padding: 20px 14px; }
  .stat-card .num{ font-size: 1.7rem; }
  .stat-card .stat-icon{ width: 36px; height: 36px; margin-bottom: 12px; }
  .stat-card .stat-icon svg{ width: 18px; height: 18px; }
  .stat-card .label{ font-size: 0.85rem; }
  .stat-card .sub{ font-size: 0.72rem; }
}

/* ---- Abschluss-Aufruf: Knöpfe volle Breite -------------------------------*/
@media (max-width: 720px){
  .cta-band{ padding: 44px 0; }
  .cta-band .container{ gap: 22px; }
  .cta-band > .container > div:last-child{ width: 100%; flex-direction: column; }
  .cta-band .btn{ width: 100%; min-height: 54px; }
}

/* ---- Feste Leiste unten: Platz freihalten --------------------------------*/
@media (max-width: 720px){
  body{ padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  .site-footer{ padding-bottom: 24px; }
}

/* ---- Tabellen: Wischhinweis ----------------------------------------------*/
@media (max-width: 720px){
  .table-wrap{ position: relative; }
  .table-wrap::after{
    content: 'seitlich wischen →';
    position: absolute;
    right: 10px; bottom: 6px;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    color: var(--stone);
    background: var(--card);
    padding: 2px 7px;
    border-radius: 999px;
    pointer-events: none;
  }
}

/* ---- Formular komfortabler ----------------------------------------------*/
@media (max-width: 720px){
  .form-grid{ gap: 16px; }
  .field input, .field select{ min-height: 50px; }
  .field textarea{ min-height: 120px; }
  .contact-info{ padding: 28px 20px; }
  form .btn[type="submit"], form button[type="submit"]{ width: 100%; min-height: 54px; }
}

/* ---- Lange Wörter nicht über den Rand -----------------------------------*/
@media (max-width: 720px){
  h1, h2, h3, .lede, p{ overflow-wrap: break-word; }
}

/* ---- Sehr schmale Geräte (iPhone SE) ------------------------------------*/
@media (max-width: 380px){
  .container{ padding-inline: 14px; }
  .brand-logo{ width: 112px; height: 34px; }
  .stats-band-grid{ grid-template-columns: 1fr; }
  .hero-actions .btn{ font-size: 0.94rem; }
  .mobile-cta-bar .btn-primary{ font-size: 0.8rem; padding: 13px 8px; }
  .mobile-cta-bar .btn-ghost{ width: 44px; }
}

/* =============================================================================
   TEIL 13 — Abschluss-Karte "Angebot anfordern" + Vektor-Logo
   ========================================================================== */

/* ---- Logo ----------------------------------------------------------------*/
.brand-logo{
  display: block;
  width: auto;
  height: 50px;
  object-fit: initial;
  border-radius: 0;
  overflow: visible;
}
.footer-logo{
  display: block;
  width: auto;
  height: 50px;
  object-fit: initial;
  border-radius: 0;
  overflow: visible;
}

/* ---- Abschnitt: heller Grund, dunkle Karte --------------------------------*/
.cta-band{
  background: var(--bg);
  color: var(--ink);
  padding: 64px 0 88px;
}
.cta-band .container{ display: block; }
.cta-card{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 56px;
  align-items: center;
  padding: 60px 64px;
  border-radius: 28px;
  color: #fff;
  background:
    radial-gradient(90% 120% at 0% 0%, rgba(58,104,158,.55) 0%, rgba(58,104,158,0) 55%),
    radial-gradient(70% 90% at 100% 100%, rgba(8,22,40,.9) 0%, rgba(8,22,40,0) 60%),
    linear-gradient(135deg, #1B3A5E 0%, #0E223A 100%);
  box-shadow: 0 40px 70px -40px rgba(14,34,58,.7);
}
.cta-card::before{
  content: '';
  position: absolute;
  z-index: -1;
  width: 420px; height: 420px;
  left: -140px; bottom: -220px;
  background: radial-gradient(circle, rgba(221,174,82,.28) 0%, rgba(221,174,82,0) 65%);
  pointer-events: none;
}
.cta-card::after{
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,.08);
  pointer-events: none;
}
.cta-card h2{
  color: #fff;
  font-size: clamp(1.75rem, 3.1vw, 2.55rem);
  line-height: 1.12;
  letter-spacing: -.01em;
  margin: 0 0 14px;
}
.cta-card .lede{
  color: #B9C7D9;
  font-size: 1.05rem;
  max-width: 46ch;
  margin: 0;
}

/* Bewertungszeile */
.cta-rating{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 24px 0 30px;
  font-size: .93rem;
  color: #C9D3E0;
}
.cta-rating .cr-g{
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #fff;
  display: grid; place-items: center;
  flex: none;
}
.cta-rating .cr-g svg{ width: 17px; height: 17px; }
.cta-rating .trust-stars{ color: #FBBC05; letter-spacing: 1px; font-size: 1.08rem; }
.cta-rating strong{ color: #fff; font-size: 1.12rem; font-weight: 800; }
.cta-rating a{
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.35);
  text-underline-offset: 3px;
}
.cta-rating a:hover{ text-decoration-color: var(--brass-light); }
.cta-band .cta-rating .verified-tag{ color: #6EE7A0; }

/* Buttons */
.cta-actions{ display: flex; flex-wrap: wrap; gap: 14px; }
.cta-card .cta-btn-main{
  background: #fff;
  color: var(--blueprint-2);
  border: 0;
  font-weight: 700;
  box-shadow: 0 12px 34px -10px rgba(221,174,82,.6);
}
.cta-card .cta-btn-main:hover{
  color: var(--blueprint);
  transform: translateY(-2px);
  box-shadow: 0 16px 40px -10px rgba(221,174,82,.75);
}
.cta-card .cta-btn-alt{
  background: rgba(255,255,255,.06);
  color: #fff;
  border: 1px solid rgba(255,255,255,.32);
}
.cta-card .cta-btn-alt:hover{
  background: rgba(255,255,255,.12);
  border-color: var(--brass-light);
  color: var(--brass-light);
  transform: translateY(-2px);
}

/* Kontaktkacheln */
.cta-contact{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.cc-item{
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 12px;
  border-radius: 16px;
  color: #fff;
  text-decoration: none;
  transition: background .25s var(--ease);
}
a.cc-item:hover{ background: rgba(255,255,255,.06); }
.cc-ico{
  flex: none;
  width: 54px; height: 54px;
  border-radius: 15px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.1);
  display: grid; place-items: center;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
a.cc-item:hover .cc-ico{ background: rgba(221,174,82,.18); border-color: rgba(221,174,82,.45); }
.cc-ico svg{
  width: 22px; height: 22px;
  fill: none; stroke: #fff; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.cc-label{
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: #7FB8F2;
  margin-bottom: 2px;
}
.cc-val{
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
  overflow-wrap: anywhere;
}
.cta-avail{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 0 12px;
  font-size: .86rem;
  color: #B9C7D9;
}
.ca-dot{
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #34D399;
  box-shadow: 0 0 0 0 rgba(52,211,153,.6);
  animation: caPulse 2.2s ease-out infinite;
  flex: none;
}
@keyframes caPulse{
  0%  { box-shadow: 0 0 0 0 rgba(52,211,153,.55); }
  70% { box-shadow: 0 0 0 9px rgba(52,211,153,0); }
  100%{ box-shadow: 0 0 0 0 rgba(52,211,153,0); }
}
@media (prefers-reduced-motion: reduce){ .ca-dot{ animation: none; } }

/* ---- Tablet --------------------------------------------------------------*/
@media (max-width: 960px){
  .cta-card{ grid-template-columns: 1fr; gap: 34px; padding: 48px 40px; }
  .cta-side{ border-top: 1px solid rgba(255,255,255,.1); padding-top: 26px; }
  .cta-contact{ grid-template-columns: 1fr 1fr; gap: 6px 14px; }
}

/* ---- Handy / iPhone -----------------------------------------------------*/
@media (max-width: 720px){
  .brand-logo, .footer-logo{ width: auto; height: 44px; }
  .cta-band{ padding: 36px 0 52px; }
  .cta-band .container{ gap: 0; }
  .cta-band > .container > div:last-child{ flex-direction: initial; }
  .cta-card{ padding: 34px 22px 28px; border-radius: 22px; gap: 26px; }
  .cta-card .lede{ font-size: 1rem; }
  .cta-rating{ margin: 18px 0 22px; font-size: .88rem; }
  .cta-actions{ flex-direction: column; }
  .cta-actions .btn{ width: 100%; min-height: 54px; white-space: normal; text-align: center; }
  .cta-contact{ grid-template-columns: 1fr; gap: 2px; }
  .cc-item{ padding: 8px 4px; gap: 14px; }
  .cc-ico{ width: 46px; height: 46px; border-radius: 13px; }
  .cc-val{ font-size: 1rem; }
  .cta-avail{ margin-left: 4px; align-items: flex-start; }
  .ca-dot{ margin-top: 5px; }
}
@media (max-width: 380px){
  .brand-logo, .footer-logo{ height: 40px; }
  .cta-card{ padding: 28px 16px 24px; }
}

/* =============================================================================
   TEIL 14 — Vergleichstabelle mit Leuchten, 3 Schritte neu, Google-Karte
   ========================================================================== */
.sr-only{
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---- Vergleichstabelle -----------------------------------------------------*/
.compare-v2{ border-color: #E3E8F0; box-shadow: 0 30px 60px -40px rgba(20,41,67,.35); }
.compare-v2 .compare-head > div{ padding-block: 22px; }
.compare-v2 .compare-head .c-us{
  background: linear-gradient(180deg, #CFE2F6 0%, #DDEAF8 100%);
}
.compare-logo{ height: 46px; width: auto; display: block; }
.compare-v2 .compare-head .c-them{ color: var(--ink-soft); font-size: 1rem; }
.compare-v2 .compare-head .c-them .x-avatar{ color: var(--stone); }
.compare-v2 .compare-row > div{
  padding: 22px 26px;
  align-items: center;
  font-size: .95rem;
  line-height: 1.5;
  transition: background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.compare-v2 .compare-row .c-label{ font-weight: 700; color: var(--ink); }
.compare-v2 .compare-row .c-us{ background: #EDF4FC; color: var(--ink); }
.compare-v2 .compare-row .c-them{ background: #FAFBFC; color: #7A838F; }

/* Grüner Haken, roter Kreis */
.compare-v2 .check-dot, .compare-v2 .x-dot{ width: 30px; height: 30px; margin-top: 0; }
.compare-v2 .check-dot{
  background: linear-gradient(180deg, #22C55E 0%, #16A34A 100%);
  box-shadow: 0 6px 14px -4px rgba(22,163,74,.55);
}
.compare-v2 .check-dot svg{ width: 15px; height: 15px; }
.compare-v2 .x-dot{
  background: linear-gradient(180deg, #F43F5E 0%, #E11D48 100%);
  box-shadow: 0 6px 14px -4px rgba(225,29,72,.5);
}
.compare-v2 .x-dot svg{ width: 13px; height: 13px; }

/* Leuchten beim Überfahren (und per Tastatur) */
.compare-v2 .compare-row:hover > div,
.compare-v2 .compare-row:focus-visible > div{ background: #F4F8FD; }
.compare-v2 .compare-row:hover .c-label,
.compare-v2 .compare-row:focus-visible .c-label{ color: #1D6FD1; }
.compare-v2 .compare-row:hover .c-us,
.compare-v2 .compare-row:focus-visible .c-us{
  background: linear-gradient(180deg, #D6E8FA 0%, #C8DFF7 100%);
  box-shadow: inset 0 0 0 1px rgba(29,111,209,.18), inset 0 0 28px rgba(29,111,209,.12);
}
.compare-v2 .compare-row:hover .c-them,
.compare-v2 .compare-row:focus-visible .c-them{ background: #FBF4F5; }
.compare-v2 .compare-row:hover .check-dot{ box-shadow: 0 0 0 6px rgba(34,197,94,.16), 0 8px 18px -4px rgba(22,163,74,.6); }
.compare-v2 .compare-row:hover .x-dot{ box-shadow: 0 0 0 6px rgba(244,63,94,.12), 0 8px 18px -4px rgba(225,29,72,.5); }
.compare-v2 .compare-row:focus{ outline: none; }

@media (max-width: 720px){
  .compare-v2 .compare-head{ display: flex; align-items: stretch; }
  .compare-v2 .compare-head .c-us{ flex: 1; justify-content: center; }
  .compare-v2 .compare-head .c-them{ flex: 1; border-top: none; font-size: .9rem; }
  .compare-v2 .compare-head > div{ padding: 16px; }
  .compare-logo{ height: 38px; }
  .compare-v2 .compare-row > div{ padding: 14px 18px; }
  .compare-v2 .compare-row .c-label{ color: var(--stone); }
  .compare-v2 .check-dot, .compare-v2 .x-dot{ width: 26px; height: 26px; }
  .dim-label{ white-space: normal; }
}

/* ---- 3 Schritte ------------------------------------------------------------*/
.steps-v2{ position: relative; overflow: hidden; }
.steps-head{ text-align: center; margin-inline: auto; }
.steps-head .eyebrow{ justify-content: center; }
.steps-head .lede{ margin-inline: auto; }
.steps{
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  position: relative;
}
/* Verbindungslinie mit wanderndem Lichtpunkt */
.steps::before{
  content: "";
  position: absolute;
  top: 62px; left: 14%; right: 14%;
  height: 2px;
  background: repeating-linear-gradient(90deg, #C9D6E6 0 8px, transparent 8px 16px);
  z-index: 0;
}
.steps::after{
  content: "";
  position: absolute;
  top: 58px; left: 14%;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--brass-light);
  box-shadow: 0 0 0 5px rgba(221,174,82,.2), 0 0 18px 4px rgba(221,174,82,.55);
  animation: stepTravel 4.5s ease-in-out infinite;
  z-index: 0;
}
@keyframes stepTravel{
  0%  { left: 14%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100%{ left: calc(86% - 10px); opacity: 0; }
}
.step{
  position: relative;
  z-index: 1;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 30px 28px 32px;
  box-shadow: 0 24px 50px -38px rgba(20,41,67,.45);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.step:hover{
  transform: translateY(-6px);
  border-color: rgba(221,174,82,.55);
  box-shadow: 0 34px 60px -34px rgba(20,41,67,.5), 0 0 0 4px rgba(221,174,82,.1);
}
.step-top{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.step-ico{
  width: 64px; height: 64px;
  border-radius: 20px;
  display: grid; place-items: center;
  background: linear-gradient(160deg, var(--blueprint) 0%, var(--blueprint-2) 100%);
  box-shadow: 0 14px 26px -12px rgba(20,41,67,.7);
  transition: transform .35s var(--ease);
}
.step:hover .step-ico{ transform: rotate(-6deg) scale(1.05); }
.step-ico svg{ width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.step-no{
  font-size: 3.2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px #CBD5E1;
  transition: -webkit-text-stroke-color .35s var(--ease);
}
.step:hover .step-no{ -webkit-text-stroke-color: var(--brass-light); }
.step-chip{
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .76rem; font-weight: 700;
  color: #0F7A3D;
  background: #E7F7EE;
  border-radius: 999px;
  padding: 5px 12px;
  margin-bottom: 12px;
}
.step-chip::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: #22C55E; }
.step h3{ font-size: 1.28rem; margin: 0 0 10px; }
.step p{ color: var(--ink-soft); font-size: .95rem; line-height: 1.6; margin: 0; }

.steps-cta{
  margin-top: 36px;
  display: flex; align-items: center; justify-content: space-between; gap: 22px 30px; flex-wrap: wrap;
  padding: 26px 30px;
  border-radius: 22px;
  background: linear-gradient(135deg, #1B3A5E 0%, #0E223A 100%);
  color: #fff;
  box-shadow: 0 30px 60px -40px rgba(14,34,58,.8);
}
.sc-text{ display: grid; gap: 6px; }
.sc-text strong{ font-size: 1.25rem; }
.sc-rating{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: .9rem; color: #C9D3E0; }
.sc-rating .trust-stars{ color: #FBBC05; letter-spacing: 1px; }
.sc-rating b{ color: #fff; }
.steps-cta .verified-tag{ color: #6EE7A0; }
.sc-actions{ display: flex; gap: 12px; flex-wrap: wrap; }
.steps-cta .btn-primary{ background: #fff; color: var(--blueprint-2); border: 0; font-weight: 700; }
.steps-cta .btn-ghost{ background: rgba(255,255,255,.06); color: #fff; border: 1px solid rgba(255,255,255,.32); }
.steps-cta .btn-ghost:hover{ border-color: var(--brass-light); color: var(--brass-light); }

@media (max-width: 900px){
  .steps{ grid-template-columns: 1fr; gap: 18px; }
  .steps::before{ top: 30px; bottom: 30px; left: 51px; right: auto; width: 2px; height: auto;
    background: repeating-linear-gradient(180deg, #C9D6E6 0 8px, transparent 8px 16px); }
  .steps::after{ display: none; }
  .step{ padding: 24px 22px 26px; }
  .step-ico{ width: 56px; height: 56px; border-radius: 18px; }
  .step-no{ font-size: 2.6rem; }
}
@media (max-width: 720px){
  .steps-cta{ padding: 24px 20px; }
  .sc-actions{ width: 100%; flex-direction: column; }
  .sc-actions .btn{ width: 100%; min-height: 54px; }
}
@media (prefers-reduced-motion: reduce){
  .steps::after{ animation: none; display: none; }
}

/* ---- Google-Karte bei den Kundenstimmen ---------------------------------*/
.g-showcase{
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: 40px 44px;
  box-shadow: 0 30px 60px -44px rgba(20,41,67,.45);
}
.gs-left{ display: flex; align-items: center; gap: 22px; padding-right: 40px; border-right: 1px solid var(--line); }
.gs-g{ width: 72px; height: 72px; border-radius: 50%; background: #fff; box-shadow: 0 8px 24px -10px rgba(0,0,0,.25); display: grid; place-items: center; flex: none; }
.gs-g svg{ width: 40px; height: 40px; }
.gs-score{ font-size: 3.4rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--ink); }
.gs-stars{ color: #FBBC05; font-size: 1.35rem; letter-spacing: 2px; margin: 4px 0 2px; }
.gs-count{ font-size: .9rem; color: var(--ink-soft); font-weight: 600; }
.gs-title{ font-weight: 800; font-size: 1.2rem; color: var(--ink); margin: 0 0 8px; }
.gs-right p{ color: var(--ink-soft); margin: 0 0 12px; max-width: 58ch; }
.gs-right .gs-meta{ margin-bottom: 18px; }
.tc-top{ display: flex; align-items: center; gap: 10px; }
.tc-g{ width: 26px; height: 26px; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.tc-g svg{ width: 15px; height: 15px; }
@media (max-width: 820px){
  .g-showcase{ grid-template-columns: 1fr; gap: 24px; padding: 28px 22px; }
  .gs-left{ padding-right: 0; border-right: none; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
  .gs-right .btn{ width: 100%; white-space: normal; text-align: center; }
  .gs-score{ font-size: 2.8rem; }
  .gs-g{ width: 60px; height: 60px; }
}

/* =============================================================================
   TEIL 15 — Gründe leuchten, Fragen-Box, Portal-Symbole, Landkreise
   ========================================================================== */

/* ---- Sechs Gründe: Leuchten beim Überfahren --------------------------------*/
.reason-card{
  position: relative;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.reason-num, .reason-icon, .reason-card h3{ transition: color .35s var(--ease), background .35s var(--ease), text-shadow .35s var(--ease), box-shadow .35s var(--ease); }
.reason-icon svg{ transition: stroke .35s var(--ease); }
.reason-card:hover{
  transform: translateX(6px);
  border-color: rgba(221,174,82,.6);
  background: linear-gradient(90deg, #FFFBF2 0%, #FFFFFF 55%);
  box-shadow: 0 0 0 4px rgba(221,174,82,.12), 0 22px 44px -26px rgba(200,145,43,.45);
}
.reason-card:hover .reason-num{
  color: var(--brass);
  text-shadow: 0 0 14px rgba(221,174,82,.75), 0 0 2px rgba(221,174,82,.9);
}
.reason-card:hover .reason-icon{
  background: linear-gradient(160deg, var(--blueprint) 0%, var(--blueprint-2) 100%);
  box-shadow: 0 10px 22px -10px rgba(20,41,67,.7);
}
.reason-card:hover .reason-icon svg{ stroke: #fff; }
.reason-card:hover h3{ color: var(--blueprint); }
@media (hover: none){ .reason-card:hover{ transform: none; } }

/* ---- Haben Sie weitere Fragen? ---------------------------------------------*/
.faq-help{
  margin-top: 34px;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  padding: 26px 30px;
  border-radius: 24px;
  background: linear-gradient(100deg, #F3F5F8 0%, #F3F5F8 55%, #E3EEFA 100%);
  border: 1px solid var(--line);
}
.fh-ico{
  width: 58px; height: 58px; flex: none;
  border-radius: 17px;
  display: grid; place-items: center;
  background: linear-gradient(160deg, #2F7FD8 0%, #1E5FB3 100%);
  box-shadow: 0 14px 26px -10px rgba(30,95,179,.6);
}
.fh-ico svg{ width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linejoin: round; }
.fh-text{ flex: 1 1 260px; display: grid; gap: 4px; }
.fh-text strong{ font-size: 1.15rem; color: var(--ink); }
.fh-text span{ color: var(--ink-soft); font-size: .93rem; }
.fh-actions{ display: flex; flex-direction: column; align-items: center; gap: 8px; }
.fh-tel{ font-size: .82rem; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }
.fh-tel:hover{ color: var(--blueprint); }
@media (max-width: 720px){
  .faq-help{ padding: 22px 18px; gap: 16px; }
  .fh-ico{ width: 50px; height: 50px; }
  .fh-actions{ width: 100%; }
  .fh-actions .btn{ width: 100%; min-height: 54px; }
}

/* ---- Bewertungszeile mit Google-Symbol, Portale mit Bildzeichen ------------*/
.rating-line{ align-items: center; }
.rl-g{
  display: inline-grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px -2px rgba(0,0,0,.2);
  vertical-align: middle;
  margin-right: 2px;
}
.rl-g svg{ width: 15px; height: 15px; display: block; }
.rp-ico{
  width: 40px; height: 40px;
  border-radius: 12px;
  display: grid; place-items: center;
  margin: 0 auto 8px;
  background: currentColor;
  position: relative;
}
.rp-ico svg{ width: 22px; height: 22px; position: relative; z-index: 1; }
.rp-ico svg *{ stroke: #fff; }
.rp-ico svg [fill="currentColor"]{ fill: #fff; }
.rp-grid{ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* ---- Einzugsgebiet nach Landkreisen ----------------------------------------*/
.kreis-hq{
  display: flex; align-items: center; gap: 14px;
  margin-top: 26px;
  padding: 14px 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, #1B3A5E 0%, #0E223A 100%);
  color: #fff;
  text-decoration: none;
}
.kreis-hq strong{ display: block; font-size: 1rem; }
.kreis-hq span span{ display: block; font-size: .8rem; color: #B9C7D9; }
.kh-pin{ width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.1); display: grid; place-items: center; flex: none; }
.kh-pin svg{ width: 20px; height: 20px; fill: none; stroke: var(--brass-light); stroke-width: 1.8; }
.kreis-grid{
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.kreis-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 16px 10px;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.kreis-card:hover{ border-color: #BBD3EE; box-shadow: 0 16px 34px -26px rgba(20,41,67,.45); }
.kc-head{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-bottom: 8px; }
.kc-head strong{ font-size: .95rem; color: var(--ink); }
.kc-head > span{ font-size: .72rem; color: var(--stone); font-weight: 600; letter-spacing: .02em; }
.kc-head .kc-more{ margin-left: auto; color: var(--blueprint); }
.kreis-card ul{ list-style: none; margin: 0; padding: 0; }
.kreis-card li + li{ border-top: 1px dashed var(--line); }
.kreis-card li a{
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 2px;
  color: var(--ink);
  text-decoration: none;
}
.kreis-card li a:hover .kc-city{ color: var(--blueprint); }
.kc-city{ font-weight: 600; font-size: .92rem; line-height: 1.25; }
.kc-kreis{ display: block; font-size: .7rem; font-weight: 500; color: var(--stone); }
.kc-min{
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  font-size: .76rem; font-weight: 700;
  color: #0F7A3D;
  background: #E3F6EA;
  border: 1px solid #BFE8CF;
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}
.kc-min svg{ width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kreis-note{ margin-top: 10px; font-size: .75rem; color: var(--stone); }
@media (max-width: 560px){
  .kreis-grid{ grid-template-columns: 1fr; }
}

/* =============================================================================
   TEIL 16 — Karte Einzugsgebiet, Google-Bewertungskacheln, Logo, Footer-Sterne
   ========================================================================== */

/* ---- Karte ------------------------------------------------------------------*/
.kmap{
  margin: 0;
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  background:
    radial-gradient(90% 70% at 50% 55%, #1C3B60 0%, rgba(28,59,96,0) 70%),
    linear-gradient(160deg, #13294A 0%, #0B1B30 100%);
  box-shadow: 0 40px 80px -46px rgba(11,27,48,.9), inset 0 0 0 1px rgba(255,255,255,.06);
}
.kmap svg{ display: block; width: 100%; height: auto; }
.kmap figcaption{
  padding: 12px 20px 16px;
  font-size: .72rem;
  color: #8FA3BD;
  border-top: 1px solid rgba(255,255,255,.07);
}
.km-region{ fill: rgba(255,255,255,.16); font-size: 11px; font-weight: 700; letter-spacing: .28em; }
.km-ring{ fill: none; stroke: rgba(255,255,255,.14); stroke-width: 1; stroke-dasharray: 3 5; }
.km-ring-label{ fill: rgba(255,255,255,.38); font-size: 10px; font-weight: 600; }
.km-line{
  stroke: rgba(221,174,82,.55);
  stroke-width: 1.2;
  stroke-dasharray: 2 6;
  animation: kmFlow 2.6s linear infinite;
  transition: stroke .25s, stroke-width .25s;
}
@keyframes kmFlow{ to{ stroke-dashoffset: -32; } }
.km-pin{ cursor: pointer; }
.km-dot-sm{ fill: #7FA6D4; stroke: #0E223A; stroke-width: 1.5; transition: fill .2s; }
.km-pin:hover .km-dot-sm, .km-pin:focus .km-dot-sm{ fill: #DDAE52; }
.km-halo{ fill: rgba(52,211,153,.18); transition: r .25s; }
.km-dot{ fill: #34D399; stroke: #0E223A; stroke-width: 2; }
.km-tag{ fill: #fff; filter: drop-shadow(0 4px 8px rgba(0,0,0,.35)); transition: fill .2s; }
.km-pin text{ font-size: 11.5px; }
.km-name{ fill: #16202C; font-weight: 700; }
.km-min{ fill: #0F7A3D; font-weight: 700; }
.km-pin.is-major:hover .km-tag, .km-pin.is-major:focus .km-tag{ fill: #FFF6E3; }
.km-pin.is-major:hover .km-halo{ r: 16; fill: rgba(221,174,82,.3); }
.km-hq-label{ fill: #0E223A; font-size: 12px; font-weight: 800; }
.km-pulse{ fill: none; stroke: #DDAE52; stroke-width: 2; transform-origin: center; transform-box: fill-box; animation: kmPulse 2.4s ease-out infinite; }
@keyframes kmPulse{ 0%{ transform: scale(1); opacity: .9; } 100%{ transform: scale(3.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce){ .km-line, .km-pulse{ animation: none; } }
.geo-two{ align-items: start; }

/* ---- Google-Bewertungskacheln --------------------------------------------*/
.g-review{
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 26px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 24px 50px -40px rgba(20,41,67,.5);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.g-review::before{ display: none; }
.g-review:hover{ transform: translateY(-5px); border-color: #C9DAEE; box-shadow: 0 34px 60px -40px rgba(20,41,67,.55); }
.gr-head{ display: flex; align-items: center; gap: 12px; }
.gr-avatar{
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 1.1rem; flex: none;
}
.gr-who{ display: grid; line-height: 1.25; min-width: 0; }
.g-review .tc-author{ color: var(--ink); font-weight: 700; font-size: .98rem; }
.gr-meta{ font-size: .76rem; color: var(--stone); }
.g-review .tc-g{ margin-left: auto; box-shadow: 0 2px 8px -2px rgba(0,0,0,.2); flex: none; }
.gr-rating{ display: flex; align-items: center; gap: 10px; }
.gr-rating .testi-stars{ color: #FBBC05; letter-spacing: 1px; font-size: 1.05rem; margin: 0; }
.gr-rating time{ font-size: .8rem; color: var(--stone); }
.gr-text{ margin: 0; padding: 0; border: 0; flex: 1; }
.gr-text p{ margin: 0 0 10px; color: #3C4653; font-size: .93rem; line-height: 1.6; }
.gr-text p:last-child{ margin-bottom: 0; }
.g-review .verified-tag{ color: #15803D; font-size: .78rem; padding-top: 12px; border-top: 1px solid var(--line); }
@media (max-width: 980px){ .testi-grid{ grid-template-columns: 1fr; } }

/* ---- Logo ---------------------------------------------------------------------*/
.brand-logo{ height: 44px; }
.footer-lockup{ display: inline-flex; flex-direction: column; align-items: center; gap: 8px; }
.footer-logo{ height: 64px; }
.fl-tag{
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #C9D3E0;
  white-space: nowrap;
}
@media (max-width: 720px){
  .brand-logo{ height: 40px; }
  .footer-logo{ height: 58px; }
}
@media (max-width: 380px){ .brand-logo{ height: 36px; } }

/* ---- Footer: 5,0-Sterne ------------------------------------------------------*/
.footer-rating{
  display: inline-flex; align-items: center; gap: 7px;
  margin: 4px 0 18px;
  padding: 7px 14px 7px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: #9DB8D9;
  font-size: .85rem;
  text-decoration: none;
  transition: background .25s, border-color .25s;
}
.footer-rating:hover{ background: rgba(255,255,255,.1); border-color: rgba(221,174,82,.5); }
.fr-g{ width: 24px; height: 24px; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.fr-g svg{ width: 14px; height: 14px; }
.fr-star{ color: #FBBC05; font-size: 1rem; }
.footer-rating strong{ color: #fff; }
.compare-logo{ height: 46px; }

/* =============================================================================
   TEIL 17 — Navigation mit Aufklapp-Menüs, kleinere Logos, Angebotskarte
   ========================================================================== */

/* ---- Logos: klein, überall gleich --------------------------------------------*/
.brand-logo{ height: 34px; width: auto; }
.footer-logo{ height: 46px; width: auto; }
.footer-lockup{ gap: 6px; }
.fl-tag{ font-size: .56rem; letter-spacing: .08em; }
.compare-logo{ height: 38px; }
@media (max-width: 720px){
  .brand-logo{ height: 32px; }
  .footer-logo{ height: 44px; }
}
@media (max-width: 380px){ .brand-logo{ height: 30px; } }

/* ---- Hauptnavigation -----------------------------------------------------------*/
.nav-desktop{ gap: 26px; }
.nav-dd{ position: relative; display: flex; align-items: center; }
.nav-desktop .dd-trigger{ display: inline-flex; align-items: center; gap: 4px; }
.dd-chev{ width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.nav-dd:hover .dd-chev, .nav-dd:focus-within .dd-chev{ transform: rotate(180deg); }
.nav-dd:hover .dd-trigger, .nav-dd:focus-within .dd-trigger{ color: var(--blueprint); }

.dd-panel{
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  transform: translate(-50%, 8px);
  min-width: 300px;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 34px 70px -24px rgba(20,41,67,.35), 0 2px 6px rgba(20,41,67,.05);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  z-index: 300;
}
/* unsichtbare Brücke, damit das Menü beim Herunterfahren mit der Maus offen bleibt */
.dd-panel::before{ content: ""; position: absolute; left: 0; right: 0; top: -22px; height: 22px; }
.nav-dd:hover .dd-panel, .nav-dd:focus-within .dd-panel{
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
}
.dd-wide{ min-width: 560px; }
.dd-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.nav-desktop .dd-panel a.dd-item{ padding: 11px 14px; }
.nav-desktop .dd-panel a::after{ display: none; }
.nav-desktop .dd-item{
  display: grid; gap: 2px;
  padding: 11px 14px;
  border-radius: 13px;
  color: var(--ink);
  transition: background .2s;
}
.dd-item strong{ font-size: .9rem; font-weight: 700; }
.dd-item span{ font-size: .76rem; color: var(--stone); font-weight: 400; }
.nav-desktop .dd-item:hover, .nav-desktop .dd-item:focus-visible{ background: #F1F6FC; }
.nav-desktop .dd-item:hover strong{ color: var(--blueprint); }
.nav-desktop .dd-foot{
  display: block;
  margin-top: 6px;
  padding: 11px 14px 6px;
  border-top: 1px solid var(--line);
  font-size: .82rem;
  font-weight: 700;
  color: var(--blueprint);
}
.nav-desktop .dd-foot:hover{ color: var(--brass); }
@media (max-width: 1080px){
  .nav-desktop{ gap: 18px; }
  .btn-call-sm{ display: none; }
}

/* Mobile: Leistungen eingerückt */
.nav-mobile .nm-sub{
  padding-left: 18px;
  font-size: .92rem;
  color: var(--ink-soft);
  border-left: 2px solid var(--line);
  margin-left: 4px;
}

/* ---- Angebotskarte: Buttons nebeneinander, E-Mail ohne Umbruch -------------*/
.cta-card{ grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 44px; }
.cta-actions .btn{ padding: 15px 24px; }
.cta-rating .verified-tag{ white-space: nowrap; }
.cc-val{ overflow-wrap: normal; word-break: normal; }
@media (max-width: 1024px){
  .cta-card{ grid-template-columns: 1fr; gap: 30px; }
  .cta-side{ border-top: 1px solid rgba(255,255,255,.1); padding-top: 24px; }
  .cta-contact{ grid-template-columns: 1fr 1fr; gap: 6px 14px; }
}
@media (max-width: 720px){
  .cta-contact{ grid-template-columns: 1fr; }
  .cc-val{ overflow-wrap: anywhere; }
}

/* =============================================================================
   TEIL 18 — schlichte Karte, klickbare Landkreise, Logo lesbar, Tabellenkopf,
             Feinschliff iPhone/Android
   ========================================================================== */

/* ---- Karte: hell, ruhig, modern ------------------------------------------------*/
.kmap{
  margin: 0;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(180deg, #F7FAFD 0%, #EEF3F9 100%);
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -48px rgba(20,41,67,.45);
}
.kmap svg{ display: block; width: 100%; height: auto; }
.km-ring{ fill: none; stroke: #D5DFEB; stroke-width: 1.2; stroke-dasharray: 4 6; }
.km-ring-label{ fill: #97A6B8; font-size: 11px; font-weight: 600; }
.km-pin circle{ fill: #9FB4CC; transition: fill .2s, r .2s; }
.km-pin.is-named circle{ fill: #1E3A5F; }
.km-pin text{ fill: #3C4653; font-size: 13px; font-weight: 600; }
.km-pin:hover circle, .km-pin:focus circle{ fill: #DDAE52; }
.km-pin:hover text{ fill: #1E3A5F; }
.km-hq text{ fill: #16202C; font-size: 15px; font-weight: 800; }
.km-pulse{ fill: none; stroke: #1E3A5F; stroke-width: 2; transform-origin: center; transform-box: fill-box; animation: kmPulse 2.6s ease-out infinite; }
@keyframes kmPulse{ 0%{ transform: scale(1); opacity: .5; } 100%{ transform: scale(3); opacity: 0; } }
@media (prefers-reduced-motion: reduce){ .km-pulse{ animation: none; } }
.kmap figcaption{
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
  padding: 12px 18px 14px;
  font-size: .74rem; color: var(--stone);
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,.6);
}
.km-legend{ display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink-soft); }
.km-legend i{ width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.lg-hq{ background: #1E3A5F; box-shadow: 0 0 0 3px rgba(30,58,95,.18); }
.lg-dot{ background: #9FB4CC; }
.km-cap{ margin-left: auto; }

/* ---- Landkreis-Kacheln: Kopf ist ein Link -----------------------------------*/
.kc-head{
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: -6px -8px 6px;
  padding: 6px 8px;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: background .2s;
}
.kc-head:hover{ background: #F1F6FC; }
.kc-title{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.kc-title strong{ font-size: .95rem; color: var(--ink); }
.kc-title span{ font-size: .72rem; color: var(--stone); font-weight: 600; }
.kc-head .kc-more{ margin-left: 0; flex: none; font-size: .74rem; font-weight: 700; color: var(--blueprint); white-space: nowrap; }
.kc-head:hover .kc-more{ color: var(--brass); }

/* ---- Tabellenkopf: grüner Haken / rotes Kreuz ---------------------------------*/
.compare-head .head-dot{ width: 28px; height: 28px; }
.compare-head .c-us{ gap: 12px; }
.compare-head .c-them .x-dot.head-dot{ margin: 0; }

/* ---- Logo: Original, lesbar, überall gleich -----------------------------------*/
.brand-logo{ height: 38px; }
.footer-lockup{ align-items: flex-start; }
.footer-logo{ height: 46px; }
.fl-tag{ font-size: .6rem; letter-spacing: .06em; color: #D5DEE9; }

/* ---- iPhone & Android --------------------------------------------------------*/
html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a, button{ -webkit-tap-highlight-color: rgba(30,58,95,.12); }
img, svg{ max-width: 100%; }

@media (max-width: 720px){
  .brand-logo{ height: 34px; }
  .site-header .container{ height: 58px; }
  .nav-mobile a{ min-height: 46px; display: flex; align-items: center; }
  .nav-mobile .nm-sub{ min-height: 40px; }

  .section-head h2, h2{ font-size: clamp(1.55rem, 6.6vw, 2rem); line-height: 1.15; }
  .lede{ font-size: 1rem; }

  .compare-v2 .compare-head .c-us{ gap: 8px; }
  .compare-head .head-dot{ width: 24px; height: 24px; }

  .kreis-grid{ grid-template-columns: 1fr; }
  .kc-min{ font-size: .74rem; }
  .kmap{ border-radius: 18px; }
  .km-cap{ margin-left: 0; width: 100%; }

  .footer-rating{ font-size: .8rem; }
  .footer-grid{ gap: 30px; }

  .faq-item summary{ padding-right: 44px; }
  .testi-grid{ gap: 16px; }
  .g-review{ padding: 22px 18px 18px; }
  .gs-left{ flex-direction: row; }

  /* Buttons fingerfreundlich */
  .btn{ min-height: 48px; }
  input, select, textarea{ font-size: 16px; } /* verhindert Auto-Zoom auf iPhone */
}
@media (max-width: 380px){
  .brand-logo{ height: 30px; }
  .cta-card h2{ font-size: 1.5rem; }
  .cta-rating{ font-size: .82rem; }
}

/* ---- Handy: Tippflächen mind. 44 px, keine Schrift unter 11 px ------------*/
@media (max-width: 720px){
  .footer-contact a, .footer-bottom a, .site-footer li a{ display: inline-flex; align-items: center; min-height: 44px; }
  .fh-tel{ display: inline-flex; align-items: center; min-height: 44px; }
  .rating-line a, .cta-rating a{ display: inline-flex; align-items: center; min-height: 40px; }
  .pm-head, .pm-stars, .dim-label, .rp-ver{ font-size: .72rem; }
  .rp-via{ font-size: .7rem; }
  .fl-tag{ font-size: .66rem; letter-spacing: .04em; }
}

/* ---- Kopfbereich: komplettes Original-Logo (mit Unterzeile) ----------------*/
.site-header .container{ height: 76px; }
.brand-logo{ height: 56px; width: auto; }
@media (max-width: 720px){
  .site-header .container{ height: 64px; }
  .brand-logo{ height: 46px; }
}
@media (max-width: 380px){ .brand-logo{ height: 42px; } }

/* ---- Logo oben links: EINE feste Größe auf allen Seiten und Geräten -------
   Wunsch des Inhabers: überall exakt gleich groß. Diese Regel steht bewusst
   zuletzt und überschreibt alle früheren Größenangaben je Bildschirmbreite. */
.site-header .brand-logo,
.site-header .brand-logo[width]{
  height: 46px !important;
  width: auto !important;
  max-width: none !important;
}
.site-header .container{ height: 68px; }
@media (max-width: 720px){ .site-header .container{ height: 62px; } }

/* =============================================================================
   TEIL 19 — Startseite "Leistungen": modern, vertrauensvoll, anfrageorientiert
   ========================================================================== */
.svc-v2 .svc-head{ max-width: 760px; }
.svc-proof{
  list-style: none; margin: 22px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px 12px;
}
.svc-proof li{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .86rem; font-weight: 600; color: var(--ink);
  box-shadow: 0 6px 16px -12px rgba(20,41,67,.35);
}
.svc-proof li strong{ color: var(--ink); }
.svc-proof svg, .sv-list svg{
  width: 18px; height: 18px; flex: none;
  padding: 3px; border-radius: 50%;
  background: #22A55A; stroke: #fff; stroke-width: 3.2; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}

.sv-grid{
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

/* Gemeinsame Kartenbasis */
.sv-card, .sv-feature, .sv-switch{
  position: relative;
  display: flex; flex-direction: column;
  border-radius: 22px;
  padding: 26px 24px 22px;
  text-decoration: none;
  color: var(--ink);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.sv-card{
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 20px 40px -36px rgba(20,41,67,.5);
}
.sv-card:hover, .sv-card:focus-visible{
  transform: translateY(-6px);
  border-color: #BCD2EA;
  box-shadow: 0 34px 60px -36px rgba(20,41,67,.45);
}
.sv-top{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.sv-ico{
  width: 52px; height: 52px; border-radius: 16px;
  display: grid; place-items: center;
  background: #EDF3FA;
  transition: background .35s var(--ease), transform .35s var(--ease);
}
.sv-ico svg{ width: 26px; height: 26px; fill: none; stroke: var(--blueprint); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: stroke .35s; }
.sv-card:hover .sv-ico{ background: var(--blueprint); transform: rotate(-4deg); }
.sv-card:hover .sv-ico svg{ stroke: #fff; }
.sv-arrow{
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  color: var(--blueprint); font-weight: 700;
  transition: background .3s, color .3s, transform .3s, border-color .3s;
}
.sv-card:hover .sv-arrow{ background: var(--brass-light); border-color: var(--brass-light); color: #fff; transform: translateX(3px); }
.sv-card h3, .sv-feature h3, .sv-switch h3{ font-size: 1.22rem; margin: 0 0 6px; }
.sv-lead{ margin: 0 0 14px; color: var(--ink-soft); font-size: .93rem; line-height: 1.55; }
.sv-list{ list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.sv-list li{ display: flex; align-items: flex-start; gap: 9px; font-size: .9rem; line-height: 1.4; font-weight: 500; }
.sv-list svg{ margin-top: 1px; }
.sv-plus{
  margin: auto 0 0;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  font-size: .84rem; color: var(--ink-soft); line-height: 1.5;
}
.sv-plus strong{ color: var(--brass); }

/* Kernleistung: groß und dunkel */
.sv-feature{
  grid-column: span 2;
  background:
    radial-gradient(80% 90% at 100% 0%, rgba(58,104,158,.5) 0%, rgba(58,104,158,0) 60%),
    linear-gradient(135deg, #1B3A5E 0%, #0E223A 100%);
  color: #fff;
  padding: 32px 32px 26px;
  box-shadow: 0 40px 70px -44px rgba(14,34,58,.9);
  overflow: hidden;
}
.sv-feature::after{
  content: ""; position: absolute; right: -80px; bottom: -120px;
  width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(221,174,82,.22), rgba(221,174,82,0) 65%);
  pointer-events: none;
}
.sv-feature:hover{ transform: translateY(-6px); box-shadow: 0 50px 80px -44px rgba(14,34,58,.95); }
.sv-feature .sv-ico{ background: rgba(255,255,255,.1); }
.sv-feature .sv-ico svg{ stroke: var(--brass-light); }
.sv-feature .sv-arrow{ border-color: rgba(255,255,255,.25); color: #fff; }
.sv-feature:hover .sv-arrow{ background: var(--brass-light); border-color: var(--brass-light); }
.sv-feature h3{ font-size: 1.6rem; color: #fff; }
.sv-feature .sv-lead{ color: #BFCCDD; font-size: 1rem; max-width: 56ch; }
.sv-feature .sv-list{ color: #E7EDF5; }
.sv-list-2{ grid-template-columns: 1fr 1fr; gap: 10px 22px; }
.sv-feature .sv-plus{ border-top-color: rgba(255,255,255,.15); color: #BFCCDD; }
.sv-feature .sv-plus strong{ color: var(--brass-light); }
.sv-badge{
  position: absolute; top: 30px; left: 96px;
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #0E223A; background: var(--brass-light);
  padding: 5px 11px; border-radius: 999px;
}
.sv-cta{
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 16px;
  font-weight: 700; font-size: .92rem;
}
.sv-feature .sv-cta{ color: var(--brass-light); }

/* Verwaltungswechsel: goldener Rahmen */
.sv-switch{
  background: linear-gradient(180deg, #FFFBF1 0%, #FFFFFF 70%);
  border: 1.5px solid rgba(221,174,82,.7);
  box-shadow: 0 26px 50px -40px rgba(200,145,43,.6);
}
.sv-switch:hover{ transform: translateY(-6px); box-shadow: 0 36px 60px -36px rgba(200,145,43,.55); }
.sv-switch .sv-ico{ background: rgba(221,174,82,.18); }
.sv-switch .sv-ico svg{ stroke: var(--brass); }
.sv-switch:hover .sv-arrow{ background: var(--brass-light); border-color: var(--brass-light); color: #fff; }
.sv-kicker{ font-size: .78rem; font-weight: 700; color: var(--brass); margin-bottom: 4px; }
.sv-switch .sv-cta{ margin-top: auto; padding-top: 12px; color: var(--brass); }

/* Anfrage-Leiste */
.svc-lead{
  margin-top: 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap;
  padding: 24px 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 24px 50px -44px rgba(20,41,67,.55);
}
.sl-text{ display: grid; gap: 4px; flex: 1 1 380px; }
.sl-text strong{ font-size: 1.12rem; color: var(--ink); }
.sl-text span{ color: var(--ink-soft); font-size: .93rem; }
.sl-actions{ display: flex; gap: 12px; flex-wrap: wrap; }
.svc-note{ margin: 14px 4px 0; font-size: .8rem; color: var(--stone); }

@media (max-width: 1024px){
  .sv-grid{ grid-template-columns: 1fr 1fr; }
  .sv-feature{ grid-column: 1 / -1; }
}
@media (max-width: 720px){
  .sv-grid{ grid-template-columns: 1fr; gap: 14px; margin-top: 28px; }
  .sv-feature{ padding: 26px 20px 22px; }
  .sv-feature h3{ font-size: 1.35rem; }
  .sv-list-2{ grid-template-columns: 1fr; }
  .sv-badge{ position: static; align-self: flex-start; margin-bottom: 14px; order: -1; }
  .sv-card, .sv-switch{ padding: 22px 18px 18px; }
  .svc-proof li{ font-size: .8rem; }
  .svc-lead{ padding: 20px 18px; }
  .sl-actions{ width: 100%; flex-direction: column; }
  .sl-actions .btn{ width: 100%; }
}
@media (hover: none){
  .sv-card:hover, .sv-feature:hover, .sv-switch:hover{ transform: none; }
}

/* =============================================================================
   TEIL 20 — Leistungen: Kerngeschäft betonen, 3 Kernleistungen, Ergänzungen
   ========================================================================== */
.svc-intro{
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 40px;
  align-items: end;
}
.svc-v2 .svc-head{ max-width: none; margin-bottom: 0; }
.svc-proof{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 640px; }
.svc-proof li{ border-radius: 14px; padding: 10px 14px 10px 10px; }

/* Abgrenzung: kein Nebenjob */
.svc-versus{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 22px 22px 18px;
  box-shadow: 0 24px 50px -42px rgba(20,41,67,.5);
}
.vs-title{ display: block; font-weight: 800; font-size: 1.02rem; color: var(--ink); margin-bottom: 12px; }
.svc-versus ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.svc-versus li{ display: flex; align-items: flex-start; gap: 10px; font-size: .9rem; line-height: 1.4; }
.svc-versus svg{ width: 20px; height: 20px; flex: none; padding: 4px; border-radius: 50%; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; margin-top: 0; }
.svc-versus .is-no{ color: #7A838F; }
.svc-versus .is-no svg{ background: #E5484D; }
.svc-versus .is-yes{ margin-top: 4px; padding: 11px 12px; border-radius: 12px; background: #E9F7EF; color: #14532D; }
.svc-versus .is-yes svg{ background: #22A55A; }

/* Drei Kernleistungen */
.sv-core-grid{
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.sv-core{
  position: relative;
  display: flex; flex-direction: column;
  padding: 26px 24px 22px;
  border-radius: 24px;
  text-decoration: none;
  color: #fff;
  overflow: hidden;
  background:
    radial-gradient(90% 80% at 100% 0%, rgba(58,104,158,.5) 0%, rgba(58,104,158,0) 60%),
    linear-gradient(150deg, #1B3A5E 0%, #0E223A 100%);
  box-shadow: 0 36px 64px -44px rgba(14,34,58,.9);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.sv-core::after{
  content: ""; position: absolute; right: -90px; bottom: -130px;
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(221,174,82,.2), rgba(221,174,82,0) 65%);
  pointer-events: none;
}
.sv-core:hover{ transform: translateY(-6px); box-shadow: 0 48px 80px -44px rgba(14,34,58,.95); }
.sv-core .sv-top{ gap: 10px; }
.sv-core .sv-ico{ background: rgba(255,255,255,.1); }
.sv-core .sv-ico svg{ stroke: var(--brass-light); }
.sv-core .sv-badge{ position: static; margin-right: auto; }
.sv-core .sv-arrow{ border-color: rgba(255,255,255,.25); color: #fff; }
.sv-core:hover .sv-arrow{ background: var(--brass-light); border-color: var(--brass-light); transform: translateX(3px); }
.sv-core h3{ color: #fff; font-size: 1.3rem; margin: 0 0 6px; }
.sv-core .sv-lead{ color: #BFCCDD; }
.sv-core .sv-list{ color: #E7EDF5; }
.sv-core .sv-plus{ border-top-color: rgba(255,255,255,.15); color: #BFCCDD; }
.sv-core .sv-plus strong{ color: var(--brass-light); }
.sv-core .sv-cta{ color: var(--brass-light); }

/* Ergänzende Leistungen */
.sv-extra{ margin-top: 28px; }
.sv-extra-title{
  display: block; margin: 0 0 12px 2px;
  font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--stone);
}
.sv-mini-grid{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.sv-mini{
  display: flex; align-items: center; gap: 12px;
  padding: 14px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  text-decoration: none; color: var(--ink);
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.sv-mini:hover{ transform: translateY(-3px); border-color: #BCD2EA; box-shadow: 0 20px 40px -32px rgba(20,41,67,.45); }
.sv-mini .sv-ico{ width: 44px; height: 44px; border-radius: 13px; flex: none; }
.sv-mini .sv-ico svg{ width: 22px; height: 22px; }
.sm-text{ display: grid; gap: 2px; min-width: 0; flex: 1; }
.sm-text strong{ font-size: .95rem; }
.sm-text span{ font-size: .78rem; color: var(--ink-soft); line-height: 1.35; }
.sv-mini .sv-arrow{ width: 30px; height: 30px; flex: none; font-size: .85rem; }
.sv-mini:hover .sv-arrow{ background: var(--blueprint); border-color: var(--blueprint); color: #fff; }

/* Wechsel-Leiste */
.sv-switch-bar{
  margin-top: 18px;
  display: flex; align-items: center; gap: 16px;
  padding: 16px 20px;
  border-radius: 18px;
  background: linear-gradient(90deg, #FFF7E6 0%, #FFFDF8 100%);
  border: 1.5px solid rgba(221,174,82,.7);
  text-decoration: none; color: var(--ink);
  transition: box-shadow .3s, transform .3s var(--ease);
}
.sv-switch-bar:hover{ transform: translateY(-2px); box-shadow: 0 24px 44px -34px rgba(200,145,43,.7); }
.sv-switch-bar .sv-ico{ background: rgba(221,174,82,.2); flex: none; }
.sv-switch-bar .sv-ico svg{ stroke: var(--brass); }
.sb-text{ display: grid; gap: 2px; flex: 1; min-width: 0; }
.sb-text strong{ font-size: 1rem; }
.sb-text span{ font-size: .86rem; color: var(--ink-soft); }
.sb-cta{ flex: none; font-weight: 700; color: var(--brass); white-space: nowrap; }

@media (max-width: 1024px){
  .svc-intro{ grid-template-columns: 1fr; gap: 24px; align-items: start; }
  .sv-core-grid{ grid-template-columns: 1fr 1fr; }
  .sv-core-grid .sv-core:first-child{ grid-column: 1 / -1; }
  .sv-mini-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px){
  .svc-proof{ grid-template-columns: 1fr; }
  .sv-core-grid{ grid-template-columns: 1fr; gap: 14px; margin-top: 26px; }
  .sv-core{ padding: 22px 18px 18px; }
  .sv-mini-grid{ grid-template-columns: 1fr; gap: 10px; }
  .sv-switch-bar{ flex-wrap: wrap; padding: 16px; }
  .sb-cta{ width: 100%; }
}
@media (hover: none){ .sv-core:hover, .sv-mini:hover, .sv-switch-bar:hover{ transform: none; } }

/* =============================================================================
   TEIL 21 — Über uns: Foto des Inhabers, Zahlen, Unterschiede, Zielgruppen
   ========================================================================== */

/* ---- Foto ------------------------------------------------------------------*/
.owner-photo{
  margin: 0;
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: var(--bg-alt);
  box-shadow: 0 40px 70px -46px rgba(20,41,67,.7);
  max-width: 420px;
}
.owner-photo img{ display: block; width: 100%; height: auto; }
.owner-photo figcaption{
  position: absolute; left: 0; right: 0; bottom: 0;
  display: grid; gap: 2px;
  padding: 44px 20px 18px;
  color: #fff;
  background: linear-gradient(180deg, rgba(14,34,58,0) 0%, rgba(14,34,58,.88) 60%);
}
.owner-photo figcaption strong{ font-size: 1.1rem; }
.owner-photo figcaption span{ font-size: .84rem; color: #C9D6E4; }

/* ---- Zahlen-Leiste ----------------------------------------------------------*/
.about-stats{ padding: 10px 0 0; }
.as-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 28px 56px -46px rgba(20,41,67,.6);
}
.as-item{
  background: var(--card);
  padding: 24px 18px 22px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
  transition: background .25s var(--ease);
}
a.as-item:hover{ background: #F4F8FD; }
.as-ico{
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: #EDF3FA;
  margin-bottom: 6px;
}
.as-ico svg{ width: 21px; height: 21px; fill: none; stroke: var(--blueprint); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.as-num{
  font-family: var(--font-mono);
  font-size: 2.1rem; font-weight: 800; line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.as-num small{ font-size: .95rem; font-weight: 600; color: var(--blueprint); margin-left: 2px; }
.as-stars{ color: #FBBC05; font-size: .95rem; letter-spacing: 1px; }
.as-lbl{ font-size: .82rem; color: var(--ink-soft); line-height: 1.35; max-width: 20ch; }

/* ---- Was uns unterscheidet ---------------------------------------------------*/
.about-diff .section-head{ max-width: 720px; }
.diff-list{
  list-style: none; margin: 34px 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.diff-list li{
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px 22px;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--ink-soft);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.diff-list li:hover{ transform: translateY(-3px); border-color: #BCD2EA; box-shadow: 0 22px 44px -34px rgba(20,41,67,.5); }
.diff-list strong{ color: var(--ink); }
.diff-list svg{
  width: 24px; height: 24px; flex: none; margin-top: 1px;
  padding: 4px; border-radius: 50%;
  background: #22A55A; stroke: #fff; stroke-width: 3; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---- Für WEG-Eigentümer und Vermieter ---------------------------------------*/
.about-target{ padding-top: 0; }
.at-card{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  padding: 30px 32px;
  border-radius: 24px;
  border: 1px solid #CADDF2;
  background: linear-gradient(120deg, #EAF2FB 0%, #F8FBFF 55%, #FFFFFF 100%);
  box-shadow: 0 30px 60px -48px rgba(20,41,67,.6);
}
.at-icons{ display: flex; }
.at-icons span{
  width: 52px; height: 52px; border-radius: 16px;
  display: grid; place-items: center;
  background: #fff;
  border: 1px solid #D3E3F5;
}
.at-icons span + span{ margin-left: -14px; }
.at-icons svg{ width: 24px; height: 24px; fill: none; stroke: var(--blueprint); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.at-text h2{ font-size: 1.35rem; margin: 0 0 8px; }
.at-text p{ color: var(--ink-soft); font-size: .95rem; margin: 0; max-width: 62ch; }
.at-cta{ flex: none; white-space: nowrap; }
.at-proof{
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px;
  margin: 18px 0 0;
  font-size: .86rem; color: var(--ink-soft);
}
.at-proof svg{
  width: 18px; height: 18px; vertical-align: -4px; margin-right: 6px;
  padding: 3px; border-radius: 50%;
  background: #22A55A; stroke: #fff; stroke-width: 3.2; fill: none;
}

@media (max-width: 900px){
  .as-grid{ grid-template-columns: 1fr 1fr; }
  .diff-list{ grid-template-columns: 1fr; }
  .at-card{ grid-template-columns: 1fr; gap: 18px; text-align: left; }
  .at-cta{ width: 100%; justify-content: center; }
}
@media (max-width: 720px){
  .owner-photo{ max-width: none; }
  .as-item{ padding: 18px 12px; }
  .as-num{ font-size: 1.75rem; }
  .as-lbl{ font-size: .76rem; }
  .at-card{ padding: 24px 20px; }
  .diff-list li{ padding: 16px 16px; }
}
@media (hover: none){ .diff-list li:hover{ transform: none; } }

/* =============================================================================
   TEIL 22 — Website-System: Kopfbereich, Handy-Menü, Karte v3
   ========================================================================== */

/* ---- Kopfbereich: ruhig und hochwertig -------------------------------------*/
/* Verwaltungswechsel: dezent hervorgehoben — ohne Dauer-Pulsieren */
.nav-desktop a.nav-highlight{
  animation: none;
  background: #EEF3FA;
  border: 1px solid #D6E2F1;
  color: var(--blueprint);
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 999px;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.nav-desktop a.nav-highlight:hover,
.nav-desktop a.nav-highlight[aria-current="page"]{
  background: var(--blueprint); border-color: var(--blueprint); color: #fff;
}
.nav-desktop > a:not(.nav-highlight), .nav-desktop .dd-trigger{ position: relative; }
.nav-desktop > a:not(.nav-highlight)::after, .nav-desktop .dd-trigger::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; border-radius: 2px;
  background: var(--brass-light);
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s var(--ease);
}
.nav-desktop > a:not(.nav-highlight):hover::after,
.nav-desktop > a[aria-current="page"]:not(.nav-highlight)::after,
.nav-dd:hover .dd-trigger::after,
.nav-desktop .dd-trigger[aria-current="page"]::after{ transform: scaleX(1); }
.nav-desktop .dd-trigger::after{ right: 18px; }
.nav-offer{ box-shadow: 0 10px 24px -12px rgba(20,41,67,.6); }
.nav-offer:hover{ transform: translateY(-1px); }
@media (max-width: 1080px){ .nav-desktop{ gap: 16px; } }
@media (max-width: 720px){ .nav-cta{ display: none; } }

/* ---- Handy-Menü: Hauptpunkte, Unterpunkte erst auf Tippen ------------------*/
.nav-mobile{ padding: 8px 18px 18px; }
.nav-mobile .nm-link,
.nav-mobile .nm-toggle{
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  min-height: 54px;
  padding: 0 4px;
  border: 0; border-bottom: 1px solid var(--line);
  background: none;
  font-family: var(--font-display);
  font-size: 1.08rem; font-weight: 600;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.nav-mobile .nm-toggle .dd-chev{
  margin-left: auto;
  width: 20px; height: 20px;
  transition: transform .25s var(--ease);
}
.nav-mobile .nm-toggle[aria-expanded="true"]{ color: var(--blueprint); border-bottom-color: transparent; }
.nav-mobile .nm-toggle[aria-expanded="true"] .dd-chev{ transform: rotate(180deg); }
.nav-mobile .nm-panel{
  display: grid;
  margin: 0 0 8px;
  padding: 6px 0 8px 14px;
  border-left: 2px solid #D6E2F1;
  border-bottom: 1px solid var(--line);
}
.nav-mobile .nm-panel[hidden]{ display: none !important; }
.nav-mobile .nm-panel a{
  display: flex; align-items: center;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  font-family: var(--font-body);
  font-size: .98rem; font-weight: 500;
  color: var(--ink-soft);
}
.nav-mobile .nm-panel a.nm-all{ color: var(--blueprint); font-weight: 700; }
.nav-mobile .nm-link[aria-current="page"]{ color: var(--blueprint); }

/* Verwaltungswechsel mobil hervorgehoben */
.nav-mobile .nm-highlight{
  margin-top: 6px;
  padding: 0 14px;
  border: 1px solid #D6E2F1;
  border-radius: 14px;
  background: #EEF3FA;
  color: var(--blueprint);
  font-weight: 700;
}
.nav-mobile .nm-highlight + .nm-group .nm-toggle{ margin-top: 4px; }
.nav-mobile .nm-highlight .glow-dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brass-light);
  flex: none;
}
/* Angebot anfordern mobil: großer Hauptknopf */
.nav-mobile .nm-offer{
  display: flex; justify-content: center; align-items: center; gap: 8px;
  width: 100%;
  min-height: 54px;
  margin-top: 18px;
  font-size: 1rem;
  border-bottom: 0;
}
.nav-mobile .nm-call{
  display: flex; justify-content: center; align-items: center;
  min-height: 44px;
  margin-top: 6px;
  border: 0;
  font-family: var(--font-body);
  font-size: .9rem; font-weight: 500;
  color: var(--ink-soft);
}

/* ---- Karte v3 ------------------------------------------------------------------*/
.kmap{
  margin: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 34px 70px -52px rgba(20,41,67,.55);
}
.km-head{
  display: flex; align-items: center; justify-content: space-between; gap: 12px 18px; flex-wrap: wrap;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--line);
}
.km-head > div:first-child{ display: grid; gap: 2px; }
.km-kicker{ font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brass); }
.km-head strong{ font-size: 1.05rem; color: var(--ink); }
.km-chips{ display: flex; flex-wrap: wrap; gap: 6px; }
.km-chip{
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .76rem; font-weight: 600; color: var(--ink-soft);
  background: #FAFBFD;
}
.km-chip b{ color: var(--ink); }
.km-chip i{ width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.km-chip.km-he i{ background: #1E3A5F; }
.km-chip.km-nw i{ background: #2E7D6B; }
.km-chip.km-rp i{ background: #B07D1A; }

.km-stage{ position: relative; background: #F6F9FC; }
.km-stage svg{ display: block; width: 100%; height: auto; }
.km-gridbg{ color: #E3EAF2; }
.km-area{
  fill: rgba(30,58,95,.07);
  stroke: rgba(30,58,95,.28);
  stroke-width: 1.4;
  stroke-dasharray: 5 6;
  stroke-linejoin: round;
}
.km-ring{ fill: none; stroke: #C9D6E5; stroke-width: 1; }
.km-ring-label{ fill: #8C9BAE; font-size: 11px; font-weight: 600; }
.km-pin{ cursor: pointer; outline: none; }
.km-hit{ fill: transparent; }
.km-dot{ stroke: #fff; stroke-width: 2; transition: r .2s var(--ease); }
.km-he .km-dot{ fill: #1E3A5F; }
.km-nw .km-dot{ fill: #2E7D6B; }
.km-rp .km-dot{ fill: #B07D1A; }
.km-pin text{ fill: #2A3544; font-size: 12.5px; font-weight: 600; paint-order: stroke; stroke: #F6F9FC; stroke-width: 4px; stroke-linejoin: round; }
.km-pin:hover .km-dot, .km-pin.is-active .km-dot, .km-pin:focus-visible .km-dot{ r: 8; }
.km-pin.is-active text, .km-pin:hover text{ fill: var(--blueprint); }
.km-hq-dot{ fill: #1E3A5F; }
.km-hq text{ fill: #101D2B; font-size: 15px; font-weight: 800; paint-order: stroke; stroke: #F6F9FC; stroke-width: 5px; }
.km-pulse{ fill: none; stroke: #1E3A5F; stroke-width: 2; transform-origin: center; transform-box: fill-box; animation: kmPulse 3s ease-out infinite; }

.km-tip{
  position: absolute; z-index: 3;
  display: grid; gap: 2px;
  min-width: 190px; max-width: 240px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 40px -18px rgba(20,41,67,.45);
  pointer-events: auto;
}
.km-tip strong{ font-size: .92rem; color: var(--ink); }
.km-tip-kreis{ font-size: .76rem; color: var(--stone); }
.km-tip-min{ font-size: .8rem; font-weight: 700; color: #0F7A3D; }
.km-tip-link{ margin-top: 6px; font-size: .82rem; font-weight: 700; color: var(--blueprint); }
.km-tip-link:hover{ color: var(--brass); }

.kmap figcaption{
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
  padding: 12px 20px 14px;
  border-top: 1px solid var(--line);
  font-size: .74rem; color: var(--stone);
  background: var(--card);
}
.km-legend{ display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--ink-soft); }
.km-legend i{ width: 11px; height: 11px; display: inline-block; }
.lg-hq{ border-radius: 50%; background: #1E3A5F; box-shadow: 0 0 0 3px rgba(30,58,95,.18); }
.lg-area{ border-radius: 3px; background: rgba(30,58,95,.1); border: 1px dashed rgba(30,58,95,.4); }
.km-cap{ margin-left: auto; }
@media (max-width: 720px){
  .kmap{ border-radius: 18px; }
  .km-head{ padding: 16px 16px 12px; }
  .km-cap{ margin-left: 0; width: 100%; }
  .km-pin text{ font-size: 14px; }
}

/* ---- Karte v3: Feinschliff ---------------------------------------------------*/
.km-pin .km-hit{ fill: transparent; }
.km-pin.km-he .km-dot{ fill: #1E3A5F; }
.km-pin.km-nw .km-dot{ fill: #2E7D6B; }
.km-pin.km-rp .km-dot{ fill: #B07D1A; }
.km-gridbg{ color: #EBF0F6; }
@media (max-width: 720px){
  .km-pin text{ font-size: 21px; stroke-width: 6px; }
  .km-pin.is-named:not(.is-major) text{ display: none; }
  .km-hq text{ font-size: 24px; stroke-width: 7px; }
  .km-ring-label{ font-size: 17px; }
  .km-dot{ stroke-width: 3; }
}
/* Karte v3: ältere Kartenregeln (Teil 16/18) sicher überstimmen */
.kmap .km-tip[hidden]{ display: none; }
.kmap .km-pin .km-hit{ fill: transparent; }
.kmap .km-pin.km-he .km-dot{ fill: #1E3A5F; }
.kmap .km-pin.km-nw .km-dot{ fill: #2E7D6B; }
.kmap .km-pin.km-rp .km-dot{ fill: #B07D1A; }
@media (max-width: 720px){ .kmap .km-gridbg{ display: none; } }
@media (max-width: 720px){
  .kmap .km-pin .km-dot{ r: 7; }
  .kmap .km-pin.is-named .km-dot{ r: 9; }
  .kmap .km-pin .km-hit{ r: 22; }
}

/* ---- Handy: lange deutsche Wörter in Überschriften sauber trennen ----------*/
@media (max-width: 720px){
  h1, h2, h3{ -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
  h1{ font-size: clamp(1.85rem, 8.2vw, 2.5rem); }
}
/* Grid-Spalten dürfen schmaler werden als ihr längstes Wort (sonst Überlauf) */
.svc-hero-grid > *, .geo-hero-grid > *, .geo-two > *, .grid > *{ min-width: 0; }
/* Handy: lange Knopftexte umbrechen statt über den Rand ragen */
@media (max-width: 720px){
  .btn{ white-space: normal; text-align: center; max-width: 100%; }
}

/* =============================================================================
   TEIL 23 — Design-System: Footer, Bewertungsblock, Leistungskarten (Pillar)
   ========================================================================== */

/* ---- Footer ---------------------------------------------------------------*/
.site-footer{
  background: #0F1B29;
  color: #A9B6C6;
  padding: 72px 0 28px;
}
.site-footer .footer-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 48px;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer-home{ display: inline-block; margin-bottom: 20px; }
.site-footer .footer-lockup{ display: inline-flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.site-footer .footer-logo{ height: 44px; width: auto; display: block; }
.site-footer .fl-tag{ font-size: .6rem; letter-spacing: .07em; color: #8FA0B5; }
.footer-brand > p{ font-size: .92rem; line-height: 1.65; color: #A9B6C6; margin: 0 0 18px; max-width: 38ch; }
.site-footer .footer-rating{ margin: 0 0 22px; }
.site-footer .footer-contact{
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 4px;
}
.site-footer .footer-contact a{
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 40px;
  color: #DCE4EE; font-size: .92rem;
  text-decoration: none;
  transition: color .2s;
}
.site-footer .footer-contact a:hover{ color: #fff; }
.site-footer .footer-contact svg{
  width: 32px; height: 32px; flex: none;
  padding: 8px; border-radius: 10px;
  background: rgba(255,255,255,.06);
  fill: none; stroke: var(--brass-light); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  transition: background .2s;
}
.site-footer .footer-contact a:hover svg{ background: rgba(221,174,82,.16); }
.site-footer .footer-h{
  font-family: var(--font-body);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--brass-light);
  margin: 6px 0 18px;
}
.site-footer .footer-col ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.site-footer .footer-col a{
  display: inline-flex; align-items: center;
  min-height: 34px;
  color: #C3CEDB; font-size: .92rem;
  text-decoration: none;
  transition: color .2s, transform .2s;
}
.site-footer .footer-col a:hover{ color: #fff; transform: translateX(3px); }
.site-footer .footer-col a.footer-more{ color: var(--brass-light); font-weight: 600; }
.site-footer .footer-bottom{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  padding-top: 24px;
  font-size: .82rem; color: #8292A6;
}
.footer-promise{ display: inline-flex; align-items: center; gap: 8px; }
.footer-promise i{ width: 7px; height: 7px; border-radius: 50%; background: #34D399; }
.footer-legal{ display: flex; gap: 20px; }
.footer-legal a{ color: #A9B6C6; text-decoration: none; }
.footer-legal a:hover{ color: #fff; }
@media (max-width: 1024px){
  .site-footer .footer-grid{ grid-template-columns: 1fr 1fr; gap: 36px 28px; }
  .footer-brand{ grid-column: 1 / -1; }
}
@media (max-width: 720px){
  .site-footer{ padding: 52px 0 24px; }
  .site-footer .footer-grid{ grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .site-footer .footer-col:last-child{ grid-column: 1 / -1; }
  .site-footer .footer-col a{ min-height: 44px; font-size: .95rem; }
  .site-footer .footer-bottom{ flex-direction: column; align-items: flex-start; }
}

/* ---- Bewertungsblock (vor der Angebotskarte) --------------------------------*/
.trust-strip{ padding: 64px 0 8px; }
.rb{
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 28px;
  align-items: stretch;
}
.rb-summary{
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 26px 24px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
}
.rb-g{ width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: 0 4px 14px -6px rgba(0,0,0,.25); }
.rb-g svg{ width: 24px; height: 24px; }
.rb-score{ display: flex; align-items: baseline; gap: 10px; margin-top: 6px; }
.rb-score strong{ font-size: 2.6rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--ink); }
.rb-stars{ color: #F5B301; letter-spacing: 1px; }
.rb-count{ margin: 0; font-size: .9rem; color: var(--ink-soft); font-weight: 600; }
.rb-summary .verified-tag{ font-size: .8rem; }
.rb-link{
  margin-top: 8px;
  font-weight: 700; font-size: .9rem; color: var(--blueprint);
  text-decoration: none;
  border-bottom: 1px solid rgba(30,58,95,.25);
}
.rb-link:hover{ color: var(--brass); border-bottom-color: var(--brass); }
.rb-portals{ margin: auto 0 0; padding-top: 14px; font-size: .76rem; line-height: 1.5; color: var(--stone); }
.rb-cards{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rb-card{
  margin: 0;
  display: flex; flex-direction: column; gap: 12px;
  padding: 22px 20px 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.rb-card:hover{ border-color: #C9DAEE; box-shadow: 0 24px 44px -36px rgba(20,41,67,.5); }
.rb-card .rb-stars{ font-size: .95rem; }
.rb-card blockquote{ margin: 0; flex: 1; font-size: .92rem; line-height: 1.6; color: #3A4452; }
.rb-card figcaption{ display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.rb-avatar{ width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: .9rem; flex: none; }
.rb-who{ display: grid; line-height: 1.3; }
.rb-who strong{ font-size: .9rem; color: var(--ink); }
.rb-who span{ font-size: .76rem; color: var(--stone); }
@media (max-width: 1024px){
  .rb{ grid-template-columns: 1fr; }
  .rb-summary{ flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
  .rb-portals{ width: 100%; margin: 0; padding-top: 6px; }
}
@media (max-width: 820px){
  .rb-cards{ grid-template-columns: 1fr; }
}
@media (max-width: 720px){
  .trust-strip{ padding: 44px 0 4px; }
  .rb-summary{ padding: 20px 18px; }
  .rb-score strong{ font-size: 2.1rem; }
}

/* ---- Hausverwaltung: vier Verwaltungsformen als Karten ------------------------*/
.pf-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 36px;
}
.pf-card{
  display: flex; flex-direction: column; gap: 14px;
  padding: 28px 26px 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 22px 44px -40px rgba(20,41,67,.5);
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.pf-card:hover{ transform: translateY(-4px); border-color: #C3D6EC; box-shadow: 0 32px 56px -40px rgba(20,41,67,.55); }
.pf-head{ display: flex; align-items: center; gap: 16px; }
.pf-ico{
  width: 56px; height: 56px; flex: none;
  border-radius: 16px;
  display: grid; place-items: center;
  background: #EDF3FA;
  color: var(--blueprint);
  transition: background .3s, color .3s;
}
.pf-ico svg{ width: 28px; height: 28px; }
.pf-card:hover .pf-ico{ background: var(--blueprint); color: #fff; }
.pf-for{ display: block; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brass); margin-bottom: 2px; }
.pf-head h3{ margin: 0; font-size: 1.3rem; }
.pf-head h3 a{ color: var(--ink); text-decoration: none; }
.pf-head h3 a:hover{ color: var(--blueprint); }
.pf-match{
  margin: 0;
  padding: 11px 14px;
  border-radius: 12px;
  background: #EEF7F1;
  color: #1F5134;
  font-size: .9rem; line-height: 1.5;
}
.pf-match strong{ color: #14532D; }
.pf-desc{ margin: 0; color: var(--ink-soft); font-size: .94rem; line-height: 1.65; flex: 1; }
.pf-foot{
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}
.pf-price{ font-size: .84rem; font-weight: 600; color: var(--ink-soft); }
.pf-link{ font-weight: 700; font-size: .92rem; color: var(--blueprint); text-decoration: none; }
.pf-link:hover{ color: var(--brass); }
@media (max-width: 820px){
  .pf-grid{ grid-template-columns: 1fr; gap: 14px; }
  .pf-card{ padding: 22px 18px 18px; }
}
@media (hover: none){ .pf-card:hover{ transform: none; } }

/* =============================================================================
   TEIL 24 — Premium-Leistungsseiten (sp-*): gemeinsames Design-System
   ========================================================================== */
.sp-i{ width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sp-sec{ padding: 88px 0; }
.sp-sec + .sp-sec{ padding-top: 0; }
.sp-sec.sp-intro, .sp-sec.sp-why-sec, .sp-sec.sp-faq-sec{ background: var(--bg-alt); padding-top: 88px; }
.sp-sec.sp-intro + .sp-sec, .sp-sec.sp-why-sec + .sp-sec, .sp-sec.sp-faq-sec + .sp-sec{ padding-top: 88px; }

/* ---- Hero ------------------------------------------------------------------*/
.sp-hero{
  padding: 40px 0 72px;
  background:
    radial-gradient(60% 70% at 100% 0%, rgba(30,58,95,.07) 0%, rgba(30,58,95,0) 70%),
    var(--bg);
}
.sp-hero .breadcrumb{ margin-bottom: 28px; }
.sp-hero-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr);
  gap: 56px;
  align-items: start;
}
.sp-h1{
  font-size: clamp(2.3rem, 4.6vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -.02em;
  margin: 14px 0 18px;
  text-align: left;
}
.sp-h1 em{ display: block; font-style: normal; color: var(--blueprint); }
.sp-region{
  display: flex; align-items: flex-start; gap: 8px;
  margin: 0 0 18px;
  font-size: .9rem; font-weight: 600; color: var(--ink-soft);
}
.sp-region .sp-i{ width: 18px; height: 18px; color: var(--brass); margin-top: 2px; }
.sp-hero .lede{ max-width: 58ch; }
.sp-chips{ list-style: none; margin: 22px 0 28px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sp-chips li{
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px 8px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  font-size: .85rem; font-weight: 600; color: var(--ink);
}
.sp-chips .sp-i{ width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: #22A55A; color: #fff; stroke-width: 3; }
.sp-actions{ display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }

/* Inhaber-Karte */
.sp-owner{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 22px;
  box-shadow: 0 40px 70px -52px rgba(20,41,67,.6);
  display: grid; gap: 16px;
}
.sp-owner-top{ display: flex; align-items: center; gap: 16px; }
.sp-owner-top img{
  width: 84px; height: 96px; flex: none;
  object-fit: cover; object-position: 50% 8%;
  border-radius: 16px;
  background: var(--bg-alt);
}
.sp-owner-id{ display: grid; gap: 2px; }
.sp-owner-k{ font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brass); }
.sp-owner-id strong{ font-size: 1.15rem; color: var(--ink); }
.sp-owner-id > span:last-child{ font-size: .85rem; color: var(--ink-soft); }
.sp-owner-facts{ list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.sp-owner-facts li{ display: flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--ink); }
.sp-owner-facts .sp-i{ color: var(--blueprint); }
.sp-owner-price{
  display: grid; gap: 2px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #F4F7FB;
}
.sp-owner-price span{ font-size: .78rem; color: var(--stone); font-weight: 600; }
.sp-owner-price strong{ font-size: 1.25rem; color: var(--ink); }
.sp-owner-price a{ font-size: .86rem; font-weight: 700; color: var(--blueprint); text-decoration: none; margin-top: 4px; }
.sp-owner-price a:hover{ color: var(--brass); }
.sp-owner-links{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sp-owner-links a{
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: .88rem; font-weight: 600; color: var(--ink);
  text-decoration: none;
  transition: border-color .2s, background .2s;
}
.sp-owner-links a:hover{ border-color: var(--blueprint); background: #F4F7FB; }
.sp-owner-links .sp-i{ width: 18px; height: 18px; color: var(--blueprint); }

/* ---- Zahlen ------------------------------------------------------------------*/
.sp-facts{
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.sp-fact{ padding: 26px 20px; display: grid; gap: 4px; }
.sp-fact + .sp-fact{ border-left: 1px solid var(--line); }
.sp-fact strong{ font-family: var(--font-mono); font-size: 2rem; font-weight: 800; letter-spacing: -.02em; color: var(--blueprint); line-height: 1; }
.sp-fact span{ font-size: .86rem; color: var(--ink-soft); }
.sp-sec.sp-facts-sec{ padding: 0 0 88px; }

/* ---- Typische Situationen ------------------------------------------------------*/
.sp-pairs{ display: grid; gap: 12px; margin-top: 36px; }
.sp-pairs-head{
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--stone);
  padding: 0 22px;
}
.sp-pair{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sp-before, .sp-after{
  display: flex; align-items: flex-start; gap: 14px;
  padding: 20px 22px;
  border-radius: 18px;
}
.sp-before{ background: #F6F7F9; border: 1px solid var(--line); color: var(--ink-soft); }
.sp-after{ background: var(--card); border: 1px solid #CFE6D8; box-shadow: 0 18px 36px -32px rgba(20,83,45,.45); color: var(--ink); }
.sp-before p, .sp-after p{ margin: 0; font-size: .95rem; line-height: 1.55; }
.sp-after p{ font-weight: 500; }
.sp-before .sp-i{ width: 24px; height: 24px; padding: 5px; border-radius: 50%; background: #E5E7EB; color: #6B7280; stroke-width: 2.6; }
.sp-after .sp-i{ width: 24px; height: 24px; padding: 4px; border-radius: 50%; background: #22A55A; color: #fff; stroke-width: 3; }

/* ---- Zuständigkeiten (Sondereigentum) --------------------------------------------*/
.sp-split-grid{ display: grid; grid-template-columns: 1fr 1.15fr; gap: 16px; margin-top: 36px; }
.sp-split-l, .sp-split-r{ border-radius: 22px; padding: 26px 26px 22px; }
.sp-split-l{ background: #F6F7F9; border: 1px solid var(--line); }
.sp-split-r{ background: linear-gradient(150deg, #1B3A5E 0%, #0E223A 100%); color: #fff; }
.sp-split-t{ display: block; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 14px; color: var(--stone); }
.sp-split-r .sp-split-t{ color: var(--brass-light); }
.sp-split-grid ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sp-split-l li{ padding-left: 16px; position: relative; color: var(--ink-soft); font-size: .95rem; }
.sp-split-l li::before{ content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: #9AA6B6; }
.sp-split-r li{ display: flex; gap: 10px; align-items: flex-start; font-size: .98rem; font-weight: 500; }
.sp-split-r .sp-i{ width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: #22A55A; color: #fff; stroke-width: 3; margin-top: 1px; }

/* ---- Worum es geht + Passt zu Ihnen ------------------------------------------------*/
.sp-intro-grid{ display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; align-items: start; }
.sp-intro h2{ margin: 14px 0 20px; }
.sp-prose p{ color: var(--ink-soft); font-size: 1rem; line-height: 1.8; margin: 0 0 16px; max-width: 64ch; }
.sp-fit{ background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 24px 22px; }
.sp-fit-t{ display: block; font-weight: 800; font-size: 1.05rem; margin-bottom: 14px; }
.sp-fit ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.sp-fit li{ display: flex; gap: 12px; align-items: flex-start; }
.sp-fit li > .sp-i{ width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: #EDF3FA; color: var(--blueprint); stroke-width: 3; margin-top: 1px; }
.sp-fit strong{ display: block; font-size: .95rem; color: var(--ink); }
.sp-fit li span{ display: block; font-size: .88rem; color: var(--ink-soft); line-height: 1.55; margin-top: 2px; }

/* ---- Leistungsumfang ------------------------------------------------------------*/
.sp-scope{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 36px; }
.sp-scope-card{
  background: var(--card); border: 1px solid var(--line); border-radius: 22px;
  padding: 26px 24px 22px;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.sp-scope-card:hover{ border-color: #C3D6EC; box-shadow: 0 26px 50px -42px rgba(20,41,67,.55); }
.sp-scope-ico{ width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: #EDF3FA; color: var(--blueprint); margin-bottom: 14px; }
.sp-scope-ico .sp-i{ width: 24px; height: 24px; }
.sp-scope-card h3{ margin: 0 0 14px; font-size: 1.12rem; }
.sp-scope-card ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.sp-scope-card li{ display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; line-height: 1.5; color: var(--ink-soft); }
.sp-scope-card li .sp-i{ width: 18px; height: 18px; color: #22A55A; stroke-width: 2.6; margin-top: 2px; }

.sp-phases{ list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 0; position: relative; }
.sp-phases::before{ content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; background: #D6E2F1; }
.sp-phase{ display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 20px; padding: 0 0 26px; position: relative; }
.sp-phase-n{
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--blueprint); color: #fff; font-weight: 800;
  box-shadow: 0 0 0 6px var(--bg);
  position: relative; z-index: 1;
}
.sp-phase > div{ background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 20px 22px; }
.sp-phase h3{ margin: 0 0 10px; font-size: 1.08rem; }
.sp-phase ul{ margin: 0; padding-left: 18px; display: grid; gap: 6px; color: var(--ink-soft); font-size: .92rem; }

/* ---- 24-Stunden-Zusage ------------------------------------------------------------*/
.sp-guar{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 32px; align-items: center;
  padding: 34px 36px;
  border-radius: 26px;
  background: linear-gradient(150deg, #1B3A5E 0%, #0E223A 100%);
  color: #fff;
  box-shadow: 0 40px 70px -48px rgba(14,34,58,.9);
}
.sp-guar-badge{
  width: 118px; height: 118px; border-radius: 50%;
  display: grid; place-content: center; text-align: center;
  border: 2px solid rgba(221,174,82,.7);
  box-shadow: inset 0 0 0 8px rgba(255,255,255,.04);
}
.sp-guar-badge strong{ font-family: var(--font-mono); font-size: 2.6rem; line-height: 1; color: var(--brass-light); }
.sp-guar-badge span{ font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: #C9D6E4; }
.sp-guar-k{ font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brass-light); }
.sp-guar h2{ color: #fff; font-size: clamp(1.35rem, 2.4vw, 1.8rem); margin: 8px 0 12px; }
.sp-guar-text p{ color: #C3D0DF; font-size: .95rem; line-height: 1.65; margin: 0 0 10px; max-width: 62ch; }
.sp-guar-ex{ color: #fff !important; font-weight: 500; }
.sp-guar-points{ list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sp-guar-points li{ display: flex; gap: 10px; align-items: center; font-size: .9rem; color: #E3EAF2; white-space: nowrap; }
.sp-guar-points .sp-i{ width: 32px; height: 32px; padding: 7px; border-radius: 10px; background: rgba(255,255,255,.08); color: var(--brass-light); }

/* ---- Zwischen-CTA ---------------------------------------------------------------*/
.sp-mid{
  display: flex; align-items: center; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap;
  padding: 24px 28px;
  border: 1px solid #CADDF2;
  border-radius: 20px;
  background: linear-gradient(100deg, #EDF4FB 0%, #FFFFFF 80%);
}
.sp-mid > div{ display: grid; gap: 4px; flex: 1 1 380px; }
.sp-mid strong{ font-size: 1.12rem; color: var(--ink); }
.sp-mid span{ color: var(--ink-soft); font-size: .93rem; }

/* ---- Warum Coban -----------------------------------------------------------------*/
.sp-why{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 36px; background: var(--line); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; }
.sp-why-item{ background: var(--card); padding: 28px 28px 26px; transition: background .25s; }
.sp-why-item:hover{ background: #FBFCFE; }
.sp-why-n{ font-family: var(--font-mono); font-size: .8rem; font-weight: 700; color: var(--brass); }
.sp-why-item h3{ margin: 8px 0 8px; font-size: 1.12rem; }
.sp-why-item p{ margin: 0; color: var(--ink-soft); font-size: .94rem; line-height: 1.6; }
.sp-notin{ margin-top: 16px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 0 20px; }
.sp-notin summary{ cursor: pointer; padding: 16px 0; font-weight: 600; font-size: .92rem; color: var(--ink); list-style: none; }
.sp-notin summary::-webkit-details-marker{ display: none; }
.sp-notin summary::after{ content: "+"; float: right; color: var(--blueprint); font-weight: 700; }
.sp-notin[open] summary::after{ content: "–"; }
.sp-notin ul{ margin: 0 0 18px; padding-left: 18px; display: grid; gap: 8px; color: var(--ink-soft); font-size: .9rem; }

/* ---- Inhaber-Zitat ------------------------------------------------------------------*/
.sp-quote{
  display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 28px; align-items: center;
  padding: 26px 30px;
  background: var(--card); border: 1px solid var(--line); border-radius: 24px;
}
.sp-quote img{ width: 150px; height: 170px; object-fit: cover; object-position: 50% 8%; border-radius: 18px; }
.sp-quote blockquote{ margin: 0; }
.sp-quote blockquote p{ font-size: clamp(1.1rem, 1.8vw, 1.35rem); line-height: 1.5; color: var(--ink); font-weight: 500; margin: 0 0 12px; }
.sp-quote footer{ display: grid; gap: 2px; }
.sp-quote footer strong{ color: var(--ink); }
.sp-quote footer span{ font-size: .85rem; color: var(--stone); }
.sp-quote-link{ font-weight: 700; color: var(--blueprint); text-decoration: none; white-space: nowrap; }

/* ---- Ablauf -------------------------------------------------------------------------*/
.sp-steps{ list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: none; position: relative; }
.sp-steps::before{ content: ""; position: absolute; top: 22px; left: 10%; right: 10%; height: 2px; background: repeating-linear-gradient(90deg, #C9D6E6 0 8px, transparent 8px 16px); }
.sp-steps li{ position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 60px 20px 22px; }
.sp-step-n{ position: absolute; top: 0; left: 20px; transform: translateY(0); width: 44px; height: 44px; margin-top: 0; border-radius: 50%; display: grid; place-items: center; background: var(--blueprint); color: #fff; font-weight: 800; box-shadow: 0 0 0 6px var(--bg); top: -1px; }
.sp-steps h3{ margin: 0 0 8px; font-size: 1.05rem; }
.sp-steps p{ margin: 0; font-size: .9rem; line-height: 1.55; color: var(--ink-soft); }
.sp-steps-foot{ display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 26px; }
.sp-steps-foot span{ font-size: .88rem; color: var(--stone); }

/* ---- Verwaltungswechsel-Hinweis ------------------------------------------------------*/
.sp-wechsel{
  display: flex; align-items: center; gap: 18px;
  padding: 20px 24px;
  border-radius: 20px;
  background: linear-gradient(90deg, #FFF7E6 0%, #FFFDF8 100%);
  border: 1.5px solid rgba(221,174,82,.7);
  text-decoration: none; color: var(--ink);
  transition: box-shadow .25s, transform .25s var(--ease);
}
.sp-wechsel:hover{ transform: translateY(-2px); box-shadow: 0 24px 44px -34px rgba(200,145,43,.7); }
.sp-wechsel-ico{ width: 48px; height: 48px; border-radius: 14px; background: rgba(221,174,82,.2); display: grid; place-items: center; color: var(--brass); flex: none; }
.sp-wechsel-ico .sp-i{ width: 24px; height: 24px; }
.sp-wechsel-text{ display: grid; gap: 2px; flex: 1; min-width: 0; }
.sp-wechsel-text strong{ font-size: 1.02rem; }
.sp-wechsel-text span{ font-size: .88rem; color: var(--ink-soft); }
.sp-wechsel-cta{ flex: none; font-weight: 700; color: var(--brass); white-space: nowrap; }

/* ---- Responsiv --------------------------------------------------------------------*/
@media (max-width: 1024px){
  .sp-hero-grid{ grid-template-columns: 1fr; gap: 32px; }
  .sp-owner{ max-width: 560px; }
  .sp-intro-grid{ grid-template-columns: 1fr; gap: 32px; }
  .sp-guar{ grid-template-columns: auto minmax(0, 1fr); }
  .sp-guar-points{ grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sp-guar-points li{ white-space: normal; }
  .sp-steps{ grid-template-columns: 1fr 1fr; }
  .sp-steps::before{ display: none; }
  .sp-quote{ grid-template-columns: 120px minmax(0, 1fr); }
  .sp-quote-link{ grid-column: 2; }
  .sp-quote img{ width: 120px; height: 140px; }
}
@media (max-width: 760px){
  .sp-sec, .sp-sec.sp-intro, .sp-sec.sp-why-sec, .sp-sec.sp-faq-sec{ padding: 60px 0; }
  .sp-sec + .sp-sec{ padding-top: 0; }
  .sp-sec.sp-intro + .sp-sec, .sp-sec.sp-why-sec + .sp-sec, .sp-sec.sp-faq-sec + .sp-sec{ padding-top: 60px; }
  .sp-sec.sp-facts-sec{ padding-bottom: 60px; }
  .sp-hero{ padding: 28px 0 52px; }
  .sp-h1{ font-size: clamp(2rem, 9vw, 2.6rem); }
  .sp-facts{ grid-template-columns: 1fr 1fr; }
  .sp-fact:nth-child(3){ border-left: 0; }
  .sp-fact:nth-child(n+3){ border-top: 1px solid var(--line); }
  .sp-fact strong{ font-size: 1.6rem; }
  .sp-pairs-head{ display: none; }
  .sp-pair{ grid-template-columns: 1fr; gap: 0; }
  .sp-before{ border-radius: 18px 18px 0 0; border-bottom: 0; }
  .sp-after{ border-radius: 0 0 18px 18px; }
  .sp-split-grid, .sp-scope, .sp-why, .sp-steps{ grid-template-columns: 1fr; }
  .sp-guar{ grid-template-columns: 1fr; padding: 26px 20px; gap: 20px; text-align: left; }
  .sp-guar-badge{ width: 92px; height: 92px; }
  .sp-guar-badge strong{ font-size: 2rem; }
  .sp-guar-points{ grid-template-columns: 1fr; }
  .sp-mid{ padding: 20px 18px; }
  .sp-mid .btn{ width: 100%; }
  .sp-quote{ grid-template-columns: 1fr; text-align: left; padding: 22px 18px; }
  .sp-quote img{ width: 96px; height: 110px; }
  .sp-quote-link{ grid-column: auto; }
  .sp-wechsel{ flex-wrap: wrap; }
  .sp-wechsel-cta{ width: 100%; }
  .sp-owner-top img{ width: 72px; height: 84px; }
  .sp-actions .btn{ flex: 1 1 100%; }
}
@media (hover: none){ .sp-wechsel:hover{ transform: none; } }

/* ==========================================================================
   TEIL 25 — Die vier Versprechen (USP-System), Inhaber-Block, Über uns
   ========================================================================== */

/* ---- USP-Leiste unter dem Seitenkopf -------------------------------------*/
.usp-band{ padding: 0 0 8px; position: relative; z-index: 2; }
.ub-grid{
  list-style: none; margin: 0; padding: 10px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 30px 60px -46px rgba(20,41,67,.55);
}
.ub-item{
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 16px;
  transition: background .25s var(--ease);
}
.ub-item:hover{ background: var(--bg); }
.ub-ico{
  width: 42px; height: 42px; flex: none; border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(150deg, #1B3A5E, #0E223A); color: var(--brass-light);
}
.ub-ico svg{ width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ub-txt{ display: grid; gap: 2px; min-width: 0; }
.ub-txt strong{ font-size: .92rem; line-height: 1.25; color: var(--ink); }
.ub-txt span{ font-size: .78rem; line-height: 1.35; color: var(--ink-soft); }

/* ---- USP-Karten ------------------------------------------------------------*/
.uc-grid{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.uc-card{
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 10px;
  padding: 26px 24px 28px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.uc-card::after{
  content: ""; position: absolute; inset: auto -30% -60% auto; width: 220px; height: 220px;
  background: radial-gradient(closest-side, rgba(200,145,43,.22), rgba(200,145,43,0));
  opacity: 0; transition: opacity .35s var(--ease); pointer-events: none;
}
.uc-card:hover{ transform: translateY(-4px); border-color: rgba(200,145,43,.55); box-shadow: 0 34px 60px -40px rgba(20,41,67,.55), 0 0 0 4px rgba(200,145,43,.10); }
.uc-card:hover::after{ opacity: 1; }
.uc-top{ display: flex; align-items: center; justify-content: space-between; }
.uc-ico{
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  background: linear-gradient(150deg, #1B3A5E, #0E223A); color: var(--brass-light);
}
.uc-ico svg{ width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.uc-n{ font-size: .8rem; font-weight: 700; letter-spacing: .08em; color: var(--stone); }
.uc-kpi{ margin-top: 8px; font-size: 2rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; color: var(--blueprint); }
.uc-card h3{ margin-top: 10px; font-size: 1.2rem; line-height: 1.25; letter-spacing: -.01em; }
.uc-card p{ font-size: .92rem; line-height: 1.6; color: var(--ink-soft); }

/* ---- "Bei Coban Immobilien läuft Verwaltung anders" -----------------------*/
.anders{ padding: 88px 0; background: linear-gradient(180deg, var(--bg) 0%, #fff 100%); }
.an-head{
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 28px; margin-bottom: 28px; align-items: stretch;
}
.an-pain{
  padding: 32px; border-radius: 24px;
  background: #FBF3F2; border: 1px solid #F1D9D6;
}
.an-pain .eyebrow{ color: #B4443A; }
.an-pain h2{ margin: 12px 0 20px; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.an-pains{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.an-pains li{ display: flex; gap: 10px; align-items: flex-start; font-size: .94rem; line-height: 1.45; color: var(--ink); }
.an-pains svg{
  width: 20px; height: 20px; flex: none; margin-top: 1px; padding: 4px; border-radius: 50%;
  background: #E5484D; color: #fff; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round;
}
.an-turn{
  position: relative;
  padding: 32px; border-radius: 24px;
  background: linear-gradient(150deg, #1B3A5E 0%, #0E223A 100%); color: #fff;
  display: flex; flex-direction: column; justify-content: center;
  box-shadow: 0 40px 70px -48px rgba(14,34,58,.9);
}
.an-arrow{
  position: absolute; left: -22px; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brass); color: #fff; box-shadow: 0 0 0 6px #fff;
}
.an-arrow svg{ width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.an-k{ font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brass-light); }
.an-turn h2{ margin: 10px 0 12px; color: #fff; font-size: clamp(1.6rem, 2.8vw, 2.2rem); line-height: 1.15; }
.an-turn p{ color: rgba(255,255,255,.78); }
.an-foot{ display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 28px; }
.an-link{ font-weight: 700; color: var(--blueprint); }
.an-link:hover{ text-decoration: underline; }

/* ---- Inhaber-Block ---------------------------------------------------------*/
.owner-block{ padding: 72px 0; }
.ob-card{
  display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: 44px; align-items: center;
  padding: 26px; border-radius: 28px;
  background: var(--card); border: 1px solid var(--line);
  box-shadow: 0 50px 90px -60px rgba(20,41,67,.6);
}
.ob-photo{ position: relative; margin: 0; border-radius: 22px; overflow: hidden; background: #6f7378; aspect-ratio: 4 / 5; }
.ob-photo img{ width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.ob-photo figcaption{ position: absolute; left: 14px; bottom: 14px; }
.ob-live{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 999px;
  background: rgba(255,255,255,.94); font-size: .8rem; font-weight: 700; color: var(--ink);
  box-shadow: 0 10px 24px -12px rgba(0,0,0,.4);
}
.ob-text{ padding: 10px 14px 10px 0; }
.ob-text blockquote{ margin: 14px 0 0; }
.ob-lead{ font-size: clamp(1.3rem, 2.2vw, 1.7rem); line-height: 1.3; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.ob-text blockquote p + p{ margin-top: 12px; color: var(--ink-soft); }
.ob-sign{ display: grid; margin-top: 18px; padding-left: 14px; border-left: 3px solid var(--brass); }
.ob-sign span{ font-size: .88rem; color: var(--ink-soft); }
.ob-facts{ list-style: none; padding: 0; margin: 22px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ob-facts li{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line);
  font-size: .85rem; font-weight: 600;
}
.ob-facts svg, .ob-actions svg{ width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ob-facts svg{ color: var(--brass); }
.ob-actions{ display: flex; flex-wrap: wrap; gap: 12px; }
.ob-actions .btn{ display: inline-flex; align-items: center; gap: 8px; }

/* ---- Über uns: Hero --------------------------------------------------------*/
.about-hero{ padding: 36px 0 64px; text-align: left; }
.ah-grid{ display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; align-items: center; }
.about-hero .breadcrumb{ margin-bottom: 22px; }
.about-hero h1{ margin: 14px 0 18px; font-size: clamp(2.2rem, 4.4vw, 3.5rem); line-height: 1.06; letter-spacing: -.02em; text-align: left; }
.about-hero h1 em{ display: block; font-style: normal; color: var(--blueprint); }
.about-hero .lede{ max-width: 58ch; margin: 0; }
.ah-points{ list-style: none; padding: 0; margin: 24px 0 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.ah-points li{ display: flex; align-items: flex-start; gap: 9px; font-weight: 600; font-size: .95rem; line-height: 1.35; }
.ah-points svg{ width: 20px; height: 20px; flex: none; padding: 3px; border-radius: 50%; background: #22A55A; color: #fff; fill: none; stroke: currentColor; stroke-width: 3; }
.ah-actions{ display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.ah-photo{ position: relative; margin: 0 0 0 auto; width: min(100%, 440px); }
.ah-photo img{
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 10%;
  border-radius: 28px; background: #6f7378;
  box-shadow: 0 60px 100px -60px rgba(20,41,67,.8);
}
.ah-photo::before{
  content: ""; position: absolute; inset: 18px -18px -18px 18px; z-index: -1;
  border-radius: 30px; border: 2px solid rgba(200,145,43,.45);
}
.ah-badge{
  position: absolute; display: grid; gap: 1px;
  padding: 12px 16px; border-radius: 16px;
  background: rgba(255,255,255,.96); color: var(--ink);
  box-shadow: 0 24px 40px -22px rgba(20,41,67,.7);
  font-size: .78rem; line-height: 1.3;
}
.ah-badge strong{ font-size: 1.25rem; line-height: 1.1; }
.ah-badge-g{ left: -28px; top: 38px; }
.ah-stars{ color: #F5B301; letter-spacing: 1px; font-size: .85rem; }
.ah-badge-t{ right: -22px; bottom: 96px; }
.ah-badge-t strong{ color: var(--blueprint); }
.ah-photo figcaption{
  position: absolute; left: 16px; right: 16px; bottom: 16px;
  display: grid; padding: 12px 16px; border-radius: 16px;
  background: rgba(14,34,58,.82); color: #fff; backdrop-filter: blur(6px);
}
.ah-photo figcaption span{ font-size: .82rem; color: rgba(255,255,255,.8); }

/* ---- Über uns: Geschichte --------------------------------------------------*/
.about-story{ padding: 88px 0; }
.st-grid{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.st-text h2{ margin: 14px 0 18px; }
.st-text p{ color: var(--ink-soft); }
.st-text p + p{ margin-top: 14px; }
.st-quote{
  position: relative; margin: 0; padding: 38px 34px 30px;
  border-radius: 26px; background: linear-gradient(150deg, #1B3A5E 0%, #0E223A 100%); color: #fff;
  box-shadow: 0 40px 70px -48px rgba(14,34,58,.9);
}
.st-mark{ position: absolute; top: -8px; left: 26px; font-size: 6rem; line-height: 1; color: var(--brass); font-family: Georgia, serif; }
.st-quote blockquote{ margin: 0; }
.st-lead{ font-size: clamp(1.2rem, 2vw, 1.45rem); line-height: 1.35; font-weight: 700; }
.st-quote blockquote p + p{ margin-top: 14px; color: rgba(255,255,255,.78); }
.st-quote figcaption{ display: flex; align-items: center; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.15); }
.st-quote figcaption img{ width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: 50% 12%; }
.st-quote figcaption > span{ display: grid; }
.st-quote figcaption > span span{ font-size: .85rem; color: rgba(255,255,255,.7); }

/* ---- Über uns: Positionierung ----------------------------------------------*/
.about-core{ padding: 88px 0; background: var(--bg-alt); }
.ac-grid{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.ac-left h2{ margin: 14px 0 14px; }
.ac-left > p{ color: var(--ink-soft); }
.ac-not{ list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; }
.ac-not li{ display: flex; align-items: center; gap: 10px; font-weight: 600; }
.ac-not svg{ width: 22px; height: 22px; flex: none; padding: 5px; border-radius: 50%; background: #E5484D; color: #fff; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.ac-right{
  padding: 30px; border-radius: 26px; background: var(--card); border: 1px solid var(--line);
  box-shadow: 0 40px 70px -52px rgba(20,41,67,.6); display: grid; gap: 10px;
}
.ac-k{ font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brass); }
.ac-claim{ font-size: clamp(1.35rem, 2.3vw, 1.75rem); line-height: 1.2; letter-spacing: -.01em; margin-bottom: 8px; }
.ac-svc{
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px;
  padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--bg);
  transition: border-color .25s var(--ease), transform .25s var(--ease), background .25s var(--ease);
}
.ac-svc span{ font-weight: 700; }
.ac-svc small{ grid-column: 1; font-size: .85rem; color: var(--ink-soft); }
.ac-svc i{ grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: normal; font-weight: 700; color: var(--blueprint); }
.ac-svc:hover{ border-color: rgba(200,145,43,.6); background: #fff; transform: translateX(3px); }
.ac-more{ margin-top: 6px; font-size: .9rem; color: var(--ink-soft); }
.ac-more a{ color: var(--blueprint); font-weight: 600; }

/* ---- Über uns: Versprechen & Spotlights ------------------------------------*/
.about-usps{ padding: 88px 0; }
.about-spot{ padding: 0 0 88px; }
.sp2-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.sp2-card{
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: start;
  padding: 32px; border-radius: 26px; border: 1px solid var(--line); background: var(--card);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.sp2-card:hover{ transform: translateY(-4px); border-color: rgba(200,145,43,.55); box-shadow: 0 34px 60px -40px rgba(20,41,67,.55); }
.sp2-time{ background: linear-gradient(150deg, #1B3A5E 0%, #0E223A 100%); color: #fff; border-color: transparent; }
.sp2-big{ font-size: 5rem; font-weight: 800; line-height: .9; letter-spacing: -.04em; color: var(--brass); }
.sp2-big small{ display: block; font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; }
.sp2-k{ font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brass); }
.sp2-card h3{ margin: 8px 0 10px; font-size: 1.25rem; line-height: 1.3; }
.sp2-card p{ font-size: .95rem; color: var(--ink-soft); }
.sp2-time p{ color: rgba(255,255,255,.78); }
.sp2-time .sp2-k{ color: var(--brass-light); }
.sp2-link{ display: inline-block; margin-top: 14px; font-weight: 700; color: var(--blueprint); }
.sp2-links{ display: inline-block; margin-top: 14px; font-weight: 700; color: rgba(255,255,255,.6); }
.sp2-links a{ color: #fff; }
.sp2-links a:hover{ color: var(--brass-light); }
.about-diff .diff-list a{ color: var(--blueprint); font-weight: 600; }

/* ---- Responsiv --------------------------------------------------------------*/
@media (max-width: 1080px){
  .ub-grid{ grid-template-columns: 1fr 1fr; }
  .uc-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px){
  .an-head, .ob-card, .ah-grid, .st-grid, .ac-grid, .sp2-grid{ grid-template-columns: minmax(0, 1fr); }
  .an-arrow{ left: 50%; top: -22px; transform: translateX(-50%) rotate(90deg); }
  .ob-card{ gap: 24px; }
  .ob-photo{ max-width: 360px; }
  .ob-text{ padding: 0 6px 6px; }
  .ah-photo{ margin: 12px auto 0; width: min(100%, 400px); }
  .ah-badge-g{ left: -8px; }
  .ah-badge-t{ right: -8px; }
  .ah-photo::before{ inset: 14px -10px -14px 14px; }
}
@media (max-width: 600px){
  .usp-band{ padding-top: 4px; }
  .ub-grid{ grid-template-columns: 1fr; padding: 6px; }
  .ub-item{ padding: 10px; }
  .uc-grid{ grid-template-columns: minmax(0, 1fr); }
  .an-pains, .ah-points{ grid-template-columns: minmax(0, 1fr); }
  .anders, .about-story, .about-core, .about-usps{ padding: 64px 0; }
  .about-spot{ padding-bottom: 64px; }
  .an-pain, .an-turn, .ac-right, .sp2-card, .st-quote{ padding: 24px 20px; }
  .sp2-card{ grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .sp2-big{ font-size: 3.6rem; }
  .ob-card{ padding: 14px; border-radius: 22px; }
  .owner-block{ padding: 48px 0; }
  .ob-actions .btn, .an-foot .btn, .ah-actions .btn{ flex: 1 1 100%; justify-content: center; }
  .ah-badge{ padding: 9px 12px; }
  .ah-badge strong{ font-size: 1.05rem; }
  .ah-badge-t{ bottom: 88px; }
}

/* ==========================================================================
   TEIL 26 — DESIGNSYSTEM C (20.09.2026)
   Hell und ruhig, Serifenschrift für große Überschriften, feine Symbole,
   Navy nur für Handlungen, KEIN Gold. Gelb ausschließlich für Sterne.
   Gilt vorerst nur für die Startseite: alle Regeln sind auf <body class="ds-c">
   begrenzt. Texte und Inhalte bleiben unverändert.
   ========================================================================== */
@font-face{ font-family:"Source Serif"; src:url("../fonts/source-serif.woff2") format("woff2"); font-weight:300 700; font-style:normal; font-display:swap; }
@font-face{ font-family:"Inter"; src:url("../fonts/inter.woff2") format("woff2"); font-weight:300 700; font-style:normal; font-display:swap; }

.ds-c{
  /* Farben: Gold wird durch Navy ersetzt, Sterne behalten ihr Gelb */
  --brass:        #1E3A5F;
  --brass-light:  #2C5183;
  --star:         #F5B301;
  --bg:           #FFFFFF;
  --bg-alt:       #F7F7F5;
  --card:         #FFFFFF;
  --ink:          #14181D;
  --ink-soft:     #5B6570;
  --stone:        #7C848E;
  --line:         #E5E7E4;
  --blueprint:    #1E3A5F;
  --blueprint-2:  #16304F;
  --ok:           #1F8A4C;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Source Serif", Georgia, "Times New Roman", serif;
  --radius:       14px;
  --sh-card:      0 1px 0 rgba(20,24,29,.03), 0 20px 44px -34px rgba(20,24,29,.4);
  --sh-lift:      0 1px 0 rgba(20,24,29,.03), 0 30px 56px -34px rgba(20,24,29,.5);
  background: #fff;
  font-family: var(--font-body);
}

/* ---- Typografie -------------------------------------------------------- */
.ds-c h1, .ds-c h2, .ds-c .stat-num, .ds-c .mono-stat{
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -.012em;
}
.ds-c h1{ font-size: clamp(2.3rem, 4.6vw, 3.6rem); line-height: 1.1; }
.ds-c h1 em, .ds-c h2 em{ font-style: italic; font-weight: 400; color: var(--blueprint); }
.ds-c h2{ font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.14; }
.ds-c h3{ font-family: var(--font-display); font-weight: 600; letter-spacing: -.005em; }
.ds-c .lede{ color: var(--ink-soft); }
.ds-c .eyebrow{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-size: .74rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft);
}
.ds-c .eyebrow::before{ content: ""; width: 26px; height: 1px; background: currentColor; opacity: .55; }
.ds-c .eyebrow svg{ display: none; }
.ds-c .section-head{ margin-bottom: 40px; }

/* ---- Sterne behalten ihr Gelb ------------------------------------------ */
.ds-c :is(.ah-stars,.as-stars,.gs-stars,.hr-stars,.pm-stars,.rb-stars,.rp-stars,.testi-stars,.trust-stars,.tsc-gstars,.tsc-pstars,.hv-stars){ color: var(--star); }

/* ---- Symbole: eine Linienstärke, keine schweren Kästchen ---------------- */
.ds-c :is(.sv-ico,.step-ico,.rp-ico,.as-ico,.ub-ico,.uc-ico,.md-ico,.lc-ico,.loc-ico,.sd-ico,.pf-ico,.lst-ico,.tsc-ico,.fh-ico,.cc-ico,.reason-icon){
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  width: auto; height: auto; border-radius: 0; color: var(--blueprint);
}
.ds-c :is(.sv-ico,.step-ico,.as-ico,.ub-ico,.uc-ico,.reason-icon,.fh-ico,.cc-ico) svg{
  width: 26px; height: 26px; stroke-width: 1.5; stroke: currentColor; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
.ds-c .reason-icon svg, .ds-c .step-ico svg{ width: 28px; height: 28px; }

/* ---- Buttons ------------------------------------------------------------ */
.ds-c .btn{ border-radius: 10px; font-family: var(--font-body); font-weight: 600; letter-spacing: 0; }
.ds-c .btn-primary{
  background: var(--blueprint); border-color: var(--blueprint); color: #fff;
  box-shadow: 0 12px 26px -18px rgba(30,58,95,.75);
}
.ds-c .btn-primary:hover{ background: var(--blueprint-2); border-color: var(--blueprint-2); transform: translateY(-2px); }
.ds-c .btn-ghost{ background: #fff; border-color: var(--line); color: var(--ink); }
.ds-c .btn-ghost:hover{ border-color: var(--ink); transform: translateY(-2px); }
.ds-c .glow-cta::before, .ds-c .glow-cta::after{ display: none; }   /* kein goldener Schein */

/* ---- Karten, Flächen, Linien -------------------------------------------- */
.ds-c :is(.card,.reason-card,.kreis-card,.faq-item,.rp-item,.sv-mini,.stat-card,.testi-card,.g-review,.pt-card,.tsc-card,.step-card){
  border-radius: var(--radius); border-color: var(--line); box-shadow: var(--sh-card);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.ds-c :is(.reason-card,.kreis-card,.sv-mini,.rp-item,.g-review):hover{
  transform: translateY(-2px); box-shadow: var(--sh-lift); border-color: #C9CFC9;
}
.ds-c .section-alt{ background: var(--bg-alt); }

/* ---- Hero ---------------------------------------------------------------- */
.ds-c .hero{ background: linear-gradient(180deg, var(--bg-alt) 0%, #fff 70%); padding-bottom: 56px; }
.ds-c .hero-copy h1{ margin-top: 20px; }
.ds-c .capacity-banner, .ds-c .availability-badge{
  background: #fff; border: 1px solid var(--line); color: var(--ink-soft); box-shadow: none;
}
.ds-c .capacity-banner strong, .ds-c .availability-badge strong{ color: var(--ink); }
.ds-c .capacity-banner .dot{ background: var(--blueprint); }
.ds-c .hero-features .hf-item{
  background: transparent; border: 0; padding: 0; color: var(--ink-soft); font-weight: 500;
}
.ds-c .hero-features .hf-item svg{ stroke: var(--blueprint); stroke-width: 1.5; }
.ds-c .hero-reviews{ margin-top: 34px; }

/* ---- Die vier Versprechen ------------------------------------------------ */
.ds-c .usp-band .ub-grid{ padding: 0; border-radius: var(--radius); box-shadow: var(--sh-card); background: #fff; }
.ds-c .ub-item{ padding: 26px 24px; border-radius: 0; align-items: flex-start; }
.ds-c .ub-item:hover{ background: var(--bg-alt); }
.ds-c .ub-ico svg{ width: 24px; height: 24px; color: var(--blueprint); }
.ds-c .ub-txt strong{ font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; line-height: 1.3; }
.ds-c .ub-txt span{ font-size: .9rem; color: var(--ink-soft); }

/* ---- Leistungen: helle Karten, eine führt ------------------------------- */
.ds-c .sv-core{
  background: #fff; color: var(--ink); border: 1px solid var(--line);
  box-shadow: var(--sh-card); border-radius: var(--radius); padding: 30px 28px 26px;
}
.ds-c .sv-core::after{ display: none; }
.ds-c .sv-core-grid > .sv-core:first-child{ background: var(--ink); border-color: var(--ink); color: #fff; }
.ds-c .sv-core-grid > .sv-core:first-child :is(h3,.sv-cta){ color: #fff; }
.ds-c .sv-core-grid > .sv-core:first-child :is(.sv-lead,.sv-list,.sv-plus){ color: rgba(255,255,255,.78); }
.ds-c .sv-core-grid > .sv-core:first-child .sv-ico{ color: #fff !important; }
.ds-c .sv-core-grid > .sv-core:first-child .sv-plus{ border-top-color: rgba(255,255,255,.16); }
.ds-c .sv-core-grid > .sv-core:first-child .sv-badge{ background: rgba(255,255,255,.12); color: #fff; }
.ds-c .sv-core-grid > .sv-core:first-child .sv-arrow{ border-color: rgba(255,255,255,.3); color: #fff; }
.ds-c .sv-core h3{ color: var(--ink); font-size: 1.45rem; }
.ds-c .sv-core .sv-lead, .ds-c .sv-core .sv-plus{ color: var(--ink-soft); }
.ds-c .sv-core .sv-list{ color: var(--ink); }
.ds-c .sv-core .sv-plus{ border-top-color: var(--line); margin-top: auto; }
.ds-c .sv-core .sv-cta{ color: var(--blueprint); white-space: nowrap; }
.ds-c .sv-badge{ background: var(--bg-alt); color: var(--ink-soft); font-weight: 600; letter-spacing: .12em; }
.ds-c .sv-arrow{ border-color: var(--line); color: var(--ink); }
.ds-c .sv-core:hover{ transform: translateY(-2px); box-shadow: var(--sh-lift); border-color: #C9CFC9; }
.ds-c .sv-core:hover .sv-arrow{ background: var(--blueprint); border-color: var(--blueprint); color: #fff; }
.ds-c .svc-versus{ background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-card); border-radius: var(--radius); }
.ds-c .sv-switch-bar{
  background: var(--bg-alt); border: 1px solid var(--line); box-shadow: none; color: var(--ink);
}
.ds-c .sv-switch-bar:hover{ border-color: var(--ink); box-shadow: var(--sh-card); }
.ds-c .sv-switch-bar .sb-cta{ color: var(--blueprint); }
.ds-c .svc-lead{ background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-card); }

/* ---- Zahlen-Kasten ------------------------------------------------------- */
.ds-c .stats-band{ background: var(--ink); }
.ds-c .stats-band .stat-card{ background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); box-shadow: none; }
.ds-c .stats-band .stat-card:hover{ background: rgba(255,255,255,.07); transform: translateY(-2px); }
.ds-c .stats-band .stat-icon{ background: transparent; border: 0; }
.ds-c .stats-band .stat-icon svg{ width: 26px; height: 26px; stroke-width: 1.5; stroke: #fff; fill: none; opacity: .85; }
.ds-c .stats-band .stat-num{ font-family: var(--font-display); font-weight: 400; letter-spacing: -.02em; }
.ds-c .stats-band .eyebrow{ color: rgba(255,255,255,.6); justify-content: center; }

/* ---- Kundenstimmen und Bewertungen -------------------------------------- */
.ds-c .g-showcase, .ds-c .g-review{ border-radius: var(--radius); border-color: var(--line); }
.ds-c .g-review blockquote, .ds-c .g-review p{ font-family: var(--font-display); font-style: italic; font-size: 1.08rem; line-height: 1.5; }
.ds-c .gs-score{ font-family: var(--font-display); font-weight: 400; }
.ds-c .rp-item{ background: #fff; }

/* ---- Abschluss-Karte ----------------------------------------------------- */
.ds-c .cta-card{ background: var(--ink); border-radius: 22px; box-shadow: var(--sh-lift); }
.ds-c .cta-card h2{ font-family: var(--font-display); color: #fff; }
.ds-c .cta-card .lede{ color: rgba(255,255,255,.75); }
.ds-c .cta-btn-main{ background: #fff; color: var(--ink); border-color: #fff; }
.ds-c .cta-btn-main:hover{ transform: translateY(-2px); background: #fff; }
.ds-c .cta-btn-alt{ border-color: rgba(255,255,255,.3); color: #fff; background: transparent; }
.ds-c .cta-btn-alt:hover{ border-color: #fff; }
.ds-c .cc-item{ background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; }
.ds-c .cc-ico svg{ width: 22px; height: 22px; stroke: #fff; stroke-width: 1.5; fill: none; opacity: .9; }
.ds-c .cta-rating a{ color: rgba(255,255,255,.9); }

/* ---- Fußbereich ---------------------------------------------------------- */
.ds-c .site-footer{ background: var(--ink); }
.ds-c .footer-h{ font-family: var(--font-body); color: rgba(255,255,255,.55); letter-spacing: .16em; }
.ds-c .site-footer a{ color: rgba(246,244,241,.82); }
.ds-c .site-footer a:hover{ color: #fff; }

/* ---- Vergleichstabelle und weitere Abschnitte --------------------------- */
.ds-c .compare-row{ border-color: var(--line); }
.ds-c .c-us .check-dot{ background: var(--ok); }
.ds-c .reason-num{ font-family: var(--font-display); color: var(--ink-soft); font-weight: 400; }
.ds-c .faq-item{ background: #fff; }
.ds-c .faq-item summary{ font-family: var(--font-display); font-weight: 600; }
.ds-c .faq-help{ background: var(--bg-alt); border: 1px solid var(--line); box-shadow: none; }
.ds-c .mono-stat, .ds-c .kc-min{ font-family: var(--font-body); }

/* ---- Bewegung nur dezent ------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .ds-c *{ transition: none !important; animation: none !important; }
}
/* TEIL 26b — Feinschliff Designsystem C */
.ds-c h1 em{ font-style: normal; }
.ds-c .hero h1 em{ color: var(--blueprint); }
.ds-c .usp-band .ub-item{ align-items: flex-start; }
/* TEIL 26c — Abschluss-Karte: goldener Schimmer raus, Buttons klarer */
.ds-c .cta-card::before, .ds-c .cta-card::after{ display: none; }
.ds-c .cta-card{ background: var(--ink); }
.ds-c .cta-card .cta-btn-main{ background: #fff; color: var(--ink); border-color: #fff; box-shadow: none; }
.ds-c .cta-card .cta-btn-alt{ background: transparent; border: 1px solid rgba(255,255,255,.35); color: #fff; }
.ds-c .cta-card .cta-btn-alt:hover{ border-color: #fff; background: rgba(255,255,255,.06); }
.ds-c .stats-band .num{ font-family: var(--font-display); font-weight: 400; letter-spacing: -.02em; }

/* ==========================================================================
   TEIL 27 — VARIANTEN ZUR ANSICHT (20.09.2026)
   Nur für die Vorschauseiten vorschau-a.html und vorschau-b.html.
   Die echte Startseite (ds-c) bleibt davon unberührt.
   ========================================================================== */
@font-face{ font-family:"Instrument Sans"; src:url("../fonts/instrument-sans.woff2") format("woff2"); font-weight:400 700; font-style:normal; font-display:swap; }

/* ============================ VARIANTE A ==================================
   Hell und sachlich, ohne Serifen. Grotesk für Überschriften.
   ========================================================================== */
.ds-a{
  --brass:        #1E3A5F;
  --brass-light:  #2C5183;
  --star:         #F5B301;
  --bg:           #FFFFFF;
  --bg-alt:       #F5F7F9;
  --card:         #FFFFFF;
  --ink:          #14181D;
  --ink-soft:     #56606B;
  --stone:        #7C848E;
  --line:         #E4E8EC;
  --blueprint:    #1E3A5F;
  --blueprint-2:  #16304F;
  --radius:       12px;
  --font-body:    "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Instrument Sans", "Inter", -apple-system, "Segoe UI", sans-serif;
  background: #fff; font-family: var(--font-body);
}
.ds-a h1, .ds-a h2, .ds-a h3{ font-family: var(--font-display); letter-spacing: -.03em; font-weight: 700; }
.ds-a h1{ font-size: clamp(2.3rem, 4.6vw, 3.5rem); line-height: 1.05; }
.ds-a h2{ font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.1; }
.ds-a h1 em, .ds-a h2 em{ font-style: normal; color: var(--blueprint); }
.ds-a .eyebrow{ font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.ds-a .eyebrow::before{ display: none; }
.ds-a .eyebrow svg{ display: none; }
.ds-a :is(.ah-stars,.as-stars,.gs-stars,.hr-stars,.pm-stars,.rb-stars,.rp-stars,.testi-stars,.trust-stars,.tsc-gstars,.tsc-pstars){ color: var(--star); }
.ds-a :is(.sv-ico,.step-ico,.rp-ico,.as-ico,.ub-ico,.uc-ico,.md-ico,.lc-ico,.loc-ico,.sd-ico,.pf-ico,.lst-ico,.tsc-ico,.fh-ico,.cc-ico,.reason-icon){
  background: transparent !important; border: 0 !important; box-shadow: none !important; width: auto; height: auto; color: var(--blueprint);
}
.ds-a :is(.sv-ico,.step-ico,.as-ico,.ub-ico,.reason-icon,.fh-ico,.cc-ico) svg{ width: 24px; height: 24px; stroke-width: 1.6; stroke: currentColor; fill: none; }
.ds-a .btn{ border-radius: 8px; font-weight: 600; }
.ds-a .btn-primary{ background: var(--blueprint); border-color: var(--blueprint); box-shadow: none; }
.ds-a .btn-primary:hover{ background: var(--blueprint-2); transform: translateY(-2px); }
.ds-a .btn-ghost{ background: #fff; border-color: var(--line); color: var(--ink); }
.ds-a .glow-cta::before, .ds-a .glow-cta::after{ display: none; }
.ds-a .hero{ background: linear-gradient(180deg, var(--bg-alt), #fff 70%); }
.ds-a .capacity-banner, .ds-a .availability-badge{ background: #fff; border: 1px solid var(--line); color: var(--ink-soft); box-shadow: none; }
.ds-a .hero-features .hf-item{ background: transparent; border: 0; padding: 0; color: var(--ink-soft); }
.ds-a .hero-features .hf-item svg{ stroke: var(--blueprint); stroke-width: 1.6; }
.ds-a :is(.reason-card,.kreis-card,.sv-mini,.rp-item,.g-review,.faq-item,.pt-card,.svc-versus,.svc-lead){
  border-radius: var(--radius); border-color: var(--line); box-shadow: 0 1px 0 rgba(20,24,29,.03), 0 16px 36px -30px rgba(20,24,29,.4);
}
.ds-a .sv-core{ background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 16px 36px -30px rgba(20,24,29,.4); }
.ds-a .sv-core::after{ display: none; }
.ds-a .sv-core :is(h3,.sv-list){ color: var(--ink); }
.ds-a .sv-core :is(.sv-lead,.sv-plus){ color: var(--ink-soft); }
.ds-a .sv-core .sv-cta{ color: var(--blueprint); }
.ds-a .sv-core .sv-ico{ color: var(--blueprint) !important; }
.ds-a .sv-core .sv-badge{ background: var(--bg-alt); color: var(--ink-soft); }
.ds-a .sv-core .sv-arrow{ border-color: var(--line); color: var(--ink); }
.ds-a .sv-core .sv-plus{ border-top-color: var(--line); }
.ds-a .stats-band{ background: var(--ink); }
.ds-a .stats-band .stat-card{ background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); }
.ds-a .stats-band .stat-icon{ background: transparent; border: 0; }
.ds-a .stats-band .stat-icon svg{ stroke: #fff; stroke-width: 1.6; fill: none; opacity: .85; }
.ds-a .cta-card{ background: var(--blueprint); }
.ds-a .cta-card::before, .ds-a .cta-card::after{ display: none; }
.ds-a .cta-btn-main{ background: #fff; color: var(--blueprint); border-color: #fff; }
.ds-a .site-footer{ background: var(--ink); }

/* ============================ VARIANTE B ==================================
   Dunkel und repräsentativ: dunkle Grundfläche, Serifen-Überschriften,
   helle Schrift. Die Bewertungs-Karte wird hell als Kontrast.
   ========================================================================== */
.ds-b{
  --brass:        #C8D6E5;
  --brass-light:  #DDE6F0;
  --star:         #F5B301;
  --bg:           #101418;
  --bg-alt:       #161B21;
  --card:         #171C23;
  --ink:          #F4F2EF;
  --ink-soft:     #A7B0BA;
  --stone:        #8B939C;
  --line:         rgba(255,255,255,.12);
  --blueprint:    #F4F2EF;
  --blueprint-2:  #FFFFFF;
  --radius:       16px;
  --font-body:    "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Source Serif", Georgia, serif;
  background: var(--bg); color: var(--ink); font-family: var(--font-body);
}
.ds-b :is(h1,h2,h3,.num,.mono-stat){ font-family: var(--font-display); font-weight: 500; letter-spacing: -.01em; color: var(--ink); }
.ds-b h1{ font-size: clamp(2.3rem, 4.6vw, 3.6rem); line-height: 1.12; }
.ds-b h2{ font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.16; }
.ds-b :is(h1 em, h2 em){ font-style: italic; font-weight: 400; color: #C8D6E5; }
.ds-b p, .ds-b li, .ds-b span, .ds-b dd, .ds-b dt{ color: inherit; }
.ds-b .lede{ color: var(--ink-soft); }
.ds-b .eyebrow{ color: var(--ink-soft); letter-spacing: .2em; font-size: .72rem; }
.ds-b .eyebrow svg{ display: none; }
.ds-b :is(.ah-stars,.as-stars,.gs-stars,.hr-stars,.pm-stars,.rb-stars,.rp-stars,.testi-stars,.trust-stars,.tsc-gstars,.tsc-pstars){ color: var(--star); }
.ds-b section{ background: transparent; }
.ds-b .section-alt{ background: var(--bg-alt); }
.ds-b :is(.card,.reason-card,.kreis-card,.faq-item,.rp-item,.sv-mini,.testi-card,.g-review,.g-showcase,.pt-card,.tsc-card,.svc-versus,.svc-lead,.faq-help,.usp-band .ub-grid,.geo-facts,.step-card){
  background: var(--card) !important; border: 1px solid var(--line) !important; border-radius: var(--radius); box-shadow: none; color: var(--ink);
}
.ds-b :is(.reason-card,.kreis-card,.sv-mini,.rp-item,.g-review):hover{ background: #1D242C !important; transform: translateY(-2px); }
.ds-b :is(.sv-ico,.step-ico,.rp-ico,.as-ico,.ub-ico,.uc-ico,.md-ico,.lc-ico,.loc-ico,.sd-ico,.pf-ico,.lst-ico,.tsc-ico,.fh-ico,.cc-ico,.reason-icon){
  background: rgba(255,255,255,.08) !important; border: 0 !important; color: #fff; box-shadow: none !important;
}
.ds-b :is(.sv-ico,.step-ico,.as-ico,.ub-ico,.reason-icon,.fh-ico,.cc-ico) svg{ stroke: currentColor; fill: none; stroke-width: 1.6; }
.ds-b .btn{ border-radius: 4px; font-weight: 600; }
.ds-b .btn-primary{ background: var(--ink); color: #101418; border-color: var(--ink); box-shadow: none; }
.ds-b .btn-primary:hover{ background: #fff; border-color: #fff; transform: translateY(-2px); }
.ds-b .btn-ghost{ background: transparent; border-color: rgba(255,255,255,.3); color: var(--ink); }
.ds-b .btn-ghost:hover{ border-color: #fff; }
.ds-b .glow-cta::before, .ds-b .glow-cta::after{ display: none; }
.ds-b .site-header .container{ background: rgba(23,28,35,.92) !important; border: 1px solid var(--line); }
.ds-b .site-header a, .ds-b .nav-links a{ color: var(--ink); }
.ds-b .brand-logo{ filter: invert(1) brightness(1.6); }
.ds-b .hero{ background: radial-gradient(70% 60% at 50% 0%, rgba(200,214,229,.08), transparent 70%); }
.ds-b .capacity-banner, .ds-b .availability-badge{ background: rgba(255,255,255,.05); border: 1px solid var(--line); color: var(--ink-soft); }
.ds-b .hero-features .hf-item{ background: transparent; border: 0; color: var(--ink-soft); }
.ds-b .hero-features .hf-item svg{ stroke: #C8D6E5; }
.ds-b .sv-core{ background: #171C23; border: 1px solid var(--line); box-shadow: none; }
.ds-b .sv-core::after{ display: none; }
.ds-b .sv-core-grid > .sv-core:first-child{ background: #F4F2EF; color: #101418; border-color: #F4F2EF; }
.ds-b .sv-core-grid > .sv-core:first-child :is(h3,.sv-cta,.sv-list){ color: #101418; }
.ds-b .sv-core-grid > .sv-core:first-child :is(.sv-lead,.sv-plus){ color: #4C555F; }
.ds-b .sv-core-grid > .sv-core:first-child .sv-ico{ background: rgba(16,20,24,.08) !important; color: #101418; }
.ds-b .sv-core-grid > .sv-core:first-child .sv-badge{ background: rgba(16,20,24,.1); color: #101418; }
.ds-b .sv-core-grid > .sv-core:first-child .sv-arrow{ border-color: rgba(16,20,24,.25); color: #101418; }
.ds-b .stats-band{ background: var(--bg-alt); }
.ds-b .stats-band .stat-card{ background: rgba(255,255,255,.04) !important; }
.ds-b .stats-band .stat-icon{ background: rgba(255,255,255,.08) !important; }
.ds-b .stats-band .stat-icon svg{ stroke: #fff; fill: none; }
.ds-b .cta-card{ background: #F4F2EF !important; color: #101418; }
.ds-b .cta-card::before, .ds-b .cta-card::after{ display: none; }
.ds-b .cta-card :is(h2,.cta-val,strong){ color: #101418; }
.ds-b .cta-card .lede, .ds-b .cta-card .cc-label{ color: #4C555F; }
.ds-b .cta-btn-main{ background: #101418; color: #F4F2EF; border-color: #101418; }
.ds-b .cta-btn-alt{ background: transparent; color: #101418; border: 1px solid rgba(16,20,24,.3); }
.ds-b .cta-card .cc-item{ background: rgba(16,20,24,.04); border: 1px solid rgba(16,20,24,.1); }
.ds-b .cta-card .cc-ico{ background: rgba(16,20,24,.08) !important; color: #101418; }
.ds-b .cta-card .cta-rating a{ color: #101418; }
.ds-b .site-footer{ background: var(--bg-alt); }
.ds-b .compare-row{ border-color: var(--line); }
.ds-b .kmap{ filter: invert(.92) hue-rotate(180deg); }   /* Karte lesbar auf Dunkel */
/* TEIL 27b — Variante B: Kontrast-Korrekturen */
.ds-b .svc-proof li{ background: var(--card); border: 1px solid var(--line); color: var(--ink); }
.ds-b .svc-proof li strong{ color: var(--ink); }
.ds-b .sv-switch-bar{ background: var(--card) !important; border: 1px solid var(--line); color: var(--ink); box-shadow: none; }
.ds-b .sv-switch-bar :is(strong,span){ color: var(--ink); }
.ds-b .sv-switch-bar .sb-cta{ color: #C8D6E5; }
.ds-b .sv-switch-bar .sv-ico{ background: rgba(255,255,255,.08) !important; color: #fff; }
.ds-b .svc-lead .sl-text strong{ color: var(--ink); }
.ds-b .sv-core-grid > .sv-core:first-child .sv-plus{ color: #4C555F; border-top-color: rgba(16,20,24,.12); }
.ds-b .sv-core-grid > .sv-core:first-child .sv-plus strong{ color: #101418; }
.ds-b .sv-core-grid > .sv-core:first-child .sv-lead{ color: #4C555F; }

/* ==========================================================================
   TEIL 28 — ENTWURF D (.ds-d)
   Basis wie Entwurf A: hell, serifenlos, Navy als einzige Akzentfarbe.
   Dazu: Kanzlei-Seriosität durch engere Radien, feinere Linien, gesperrte
   Kleinschrift — und ein heller Lichtrand ("Leuchtkante") auf allen dunklen
   Flächen und Buttons. Nur für vorschau-d.html.
   ========================================================================== */
.ds-d{
  --brass:        #1E3A5F;
  --brass-light:  #2C5183;
  --star:         #F5B301;
  --bg:           #FFFFFF;
  --bg-alt:       #F6F7F9;
  --card:         #FFFFFF;
  --ink:          #111820;
  --ink-soft:     #515B66;
  --stone:        #646E79;
  --line:         #E3E7EB;
  --blueprint:    #23395B;
  --blueprint-2:  #1A2C47;
  --ok:           #1F8A4C;
  --radius:       10px;
  --font-body:    "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Instrument Sans", "Inter", -apple-system, "Segoe UI", sans-serif;
  /* Leuchtkante: heller Lichtrand oben, weicher Schein außen */
  --edge: inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.08);
  --glow: 0 18px 40px -22px rgba(35,57,91,.55);
  background: #fff; font-family: var(--font-body); color: var(--ink);
}
.ds-d h1, .ds-d h2, .ds-d h3{ font-family: var(--font-display); font-weight: 700; letter-spacing: -.028em; }
.ds-d h1{ font-size: clamp(2.25rem, 4.4vw, 3.4rem); line-height: 1.06; }
.ds-d h2{ font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.12; }
.ds-d h1 em, .ds-d h2 em{ font-style: normal; color: var(--blueprint); }
.ds-d .lede{ color: var(--ink-soft); }
.ds-d .eyebrow{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-size: .7rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--stone);
}
.ds-d .eyebrow::before{ content: ""; width: 22px; height: 1px; background: currentColor; opacity: .5; }
.ds-d .eyebrow svg{ display: none; }
.ds-d :is(.ah-stars,.as-stars,.gs-stars,.hr-stars,.pm-stars,.rb-stars,.rp-stars,.testi-stars,.trust-stars,.tsc-gstars,.tsc-pstars,.sl-stars){ color: var(--star); }

/* Symbole: eine Strichstärke, ohne Kästchen */
.ds-d :is(.sv-ico,.step-ico,.rp-ico,.as-ico,.ub-ico,.uc-ico,.md-ico,.lc-ico,.loc-ico,.sd-ico,.pf-ico,.lst-ico,.tsc-ico,.fh-ico,.cc-ico,.reason-icon){
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  width: auto; height: auto; color: var(--blueprint);
}
.ds-d :is(.sv-ico,.step-ico,.as-ico,.ub-ico,.reason-icon,.fh-ico,.cc-ico) svg{
  width: 24px; height: 24px; stroke-width: 1.5; stroke: currentColor; fill: none; stroke-linecap: round; stroke-linejoin: round;
}

/* Buttons mit Leuchtkante */
.ds-d .btn{ border-radius: var(--radius); font-weight: 600; letter-spacing: -.005em; }
.ds-d .btn-primary{
  background: linear-gradient(180deg, #2B4468 0%, var(--blueprint) 100%);
  border: 1px solid var(--blueprint-2); color: #fff;
  box-shadow: var(--edge), var(--glow);
}
.ds-d .btn-primary:hover{ transform: translateY(-2px); box-shadow: var(--edge), 0 22px 48px -22px rgba(35,57,91,.7); }
.ds-d .btn-ghost{ background: #fff; border: 1px solid var(--line); color: var(--ink); box-shadow: 0 1px 0 rgba(17,24,32,.03); }
.ds-d .btn-ghost:hover{ border-color: var(--blueprint); transform: translateY(-2px); }
.ds-d .glow-cta::before, .ds-d .glow-cta::after{ display: none; }

/* Flächen: sehr feine Linien, wenig Schatten */
.ds-d :is(.reason-card,.kreis-card,.sv-mini,.rp-item,.g-review,.faq-item,.pt-card,.svc-versus,.svc-lead,.tsc-card,.step-card,.usp-band .ub-grid){
  border-radius: var(--radius); border: 1px solid var(--line); background: #fff;
  box-shadow: 0 1px 0 rgba(17,24,32,.03), 0 14px 34px -30px rgba(17,24,32,.45);
}
.ds-d :is(.reason-card,.kreis-card,.sv-mini,.rp-item,.g-review):hover{
  border-color: #C6CED6; box-shadow: 0 1px 0 rgba(17,24,32,.03), 0 22px 44px -28px rgba(17,24,32,.5); transform: translateY(-2px);
}
.ds-d .section-alt{ background: var(--bg-alt); }
.ds-d .hero{ background: linear-gradient(180deg, var(--bg-alt), #fff 65%); }
.ds-d .capacity-banner, .ds-d .availability-badge{ background: #fff; border: 1px solid var(--line); color: var(--ink-soft); box-shadow: none; }
.ds-d .hero-features .hf-item{ background: transparent; border: 0; padding: 0; color: var(--ink-soft); }
.ds-d .hero-features .hf-item svg{ stroke: var(--blueprint); stroke-width: 1.5; }

/* Leistungskarten: eine führt, dunkel mit Leuchtkante */
.ds-d .sv-core{ background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 1px 0 rgba(17,24,32,.03), 0 14px 34px -30px rgba(17,24,32,.45); }
.ds-d .sv-core::after{ display: none; }
.ds-d .sv-core :is(h3,.sv-list){ color: var(--ink); }
.ds-d .sv-core :is(.sv-lead,.sv-plus){ color: var(--ink-soft); }
.ds-d .sv-core .sv-plus{ border-top-color: var(--line); }
.ds-d .sv-core .sv-cta{ color: var(--blueprint); }
.ds-d .sv-core .sv-badge{ background: var(--bg-alt); color: var(--stone); letter-spacing: .14em; }
.ds-d .sv-core .sv-arrow{ border-color: var(--line); color: var(--ink); }
.ds-d .sv-core:hover .sv-arrow{ background: var(--blueprint); border-color: var(--blueprint); color: #fff; }
.ds-d .sv-core-grid > .sv-core:first-child{
  background: linear-gradient(170deg, #27405F 0%, #16233A 100%);
  border-color: #16233A; color: #fff; box-shadow: var(--edge), 0 26px 56px -34px rgba(17,24,32,.7);
}
.ds-d .sv-core-grid > .sv-core:first-child :is(h3,.sv-cta,.sv-list){ color: #fff; }
.ds-d .sv-core-grid > .sv-core:first-child :is(.sv-lead,.sv-plus){ color: rgba(255,255,255,.76); }
.ds-d .sv-core-grid > .sv-core:first-child .sv-plus{ border-top-color: rgba(255,255,255,.18); }
.ds-d .sv-core-grid > .sv-core:first-child .sv-ico{ color: #fff !important; }
.ds-d .sv-core-grid > .sv-core:first-child .sv-badge{ background: rgba(255,255,255,.14); color: #fff; }
.ds-d .sv-core-grid > .sv-core:first-child .sv-arrow{ border-color: rgba(255,255,255,.3); color: #fff; }
.ds-d .sv-switch-bar{ background: #fff; border: 1px solid var(--line); box-shadow: none; }
.ds-d .sv-switch-bar:hover{ border-color: var(--blueprint); }
.ds-d .sv-switch-bar .sb-cta{ color: var(--blueprint); }

/* Vertrauenszeile unter den Buttons (neu in diesem Entwurf) */
.ds-d .sl-trust{
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: .88rem; color: var(--ink-soft);
}
.ds-d .sl-trust .sl-g{ width: 20px; height: 20px; display: inline-grid; place-items: center; }
.ds-d .sl-trust .sl-g svg{ width: 18px; height: 18px; }
.ds-d .sl-trust strong{ color: var(--ink); font-size: .95rem; }
.ds-d .sl-trust .sl-ver{ display: inline-flex; align-items: center; gap: 6px; color: var(--ok); font-weight: 600; font-size: .82rem; }
.ds-d .sl-trust .sl-ver i{ width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }

/* Zahlen-Kasten und Abschluss: dunkel mit Leuchtkante */
.ds-d .stats-band{ background: #111820; }
.ds-d .stats-band .stat-card{ background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1); box-shadow: var(--edge); }
.ds-d .stats-band .stat-icon{ background: transparent; border: 0; }
.ds-d .stats-band .stat-icon svg{ stroke: #fff; stroke-width: 1.5; fill: none; opacity: .85; }
.ds-d .cta-card{
  background: linear-gradient(170deg, #27405F 0%, #16233A 100%);
  border-radius: 18px; box-shadow: var(--edge), 0 40px 80px -46px rgba(17,24,32,.8);
}
.ds-d .cta-card::before, .ds-d .cta-card::after{ display: none; }
.ds-d .cta-btn-main{ background: #fff; color: var(--blueprint); border-color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }
.ds-d .cta-btn-alt{ background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.34); color: #fff; box-shadow: var(--edge); }
.ds-d .cta-btn-alt:hover{ border-color: #fff; }
.ds-d .cc-item{ background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); box-shadow: var(--edge); }
.ds-d .cc-ico{ color: #fff !important; }
.ds-d .site-footer{ background: #111820; }
.ds-d .footer-h{ color: rgba(255,255,255,.55); letter-spacing: .2em; font-family: var(--font-body); }
.ds-d .site-footer a{ color: rgba(244,246,248,.82); }
.ds-d .site-footer a:hover{ color: #fff; }
.ds-d .faq-item summary{ font-family: var(--font-display); font-weight: 600; }
.ds-d .reason-num{ font-family: var(--font-display); color: var(--stone); font-weight: 600; letter-spacing: .04em; }
.ds-d .cta-card .lede{ color: rgba(255,255,255,.82); }
.ds-d .cta-card .cc-label{ color: rgba(255,255,255,.62); }
.ds-d .cta-card .cta-rating{ color: rgba(255,255,255,.85); }
.ds-d .cta-avail{ color: rgba(255,255,255,.7); }
/* TEIL 28b — Entwurf D: Lichtkante deutlich sichtbar */
.ds-d{
  --edge: inset 0 1px 0 rgba(255,255,255,.55), inset 0 0 0 1px rgba(255,255,255,.16);
  --glow: 0 14px 30px -12px rgba(35,57,91,.55);
}
.ds-d :is(.btn-primary, .cta-btn-alt, .sv-core-grid > .sv-core:first-child, .cta-card, .stats-band .stat-card){ position: relative; }
/* Lichtsaum oben auf dunklen Flächen */
.ds-d :is(.btn-primary, .cta-btn-alt, .sv-core-grid > .sv-core:first-child, .cta-card, .stats-band .stat-card)::after{
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; z-index: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.04) 26%, rgba(255,255,255,0) 60%);
}
.ds-d :is(.sv-core-grid > .sv-core:first-child, .cta-card, .stats-band .stat-card) > *{ position: relative; z-index: 1; }
.ds-d .btn-primary{
  border-color: rgba(255,255,255,.25);
  box-shadow: var(--edge), var(--glow), 0 0 0 1px rgba(35,57,91,.9);
}
.ds-d .btn-primary:hover{ box-shadow: var(--edge), 0 20px 42px -14px rgba(35,57,91,.65), 0 0 0 1px rgba(35,57,91,.9); }
.ds-d .btn-primary span, .ds-d .btn-primary .btn-arrow{ position: relative; z-index: 1; }
.ds-d .cta-btn-main{ box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 12px 28px -14px rgba(0,0,0,.5); }
.ds-d .sv-core-grid > .sv-core:first-child{ box-shadow: var(--edge), 0 26px 56px -30px rgba(17,24,32,.75); }
.ds-d .cta-card{ box-shadow: var(--edge), 0 40px 80px -40px rgba(17,24,32,.85); }
.ds-d .sv-core-grid > .sv-core:first-child .sv-plus strong{ color: #fff; }
.ds-d .sv-core .sv-plus strong{ color: var(--blueprint); }
/* TEIL 28c — Entwurf D: weicher Lichtreflex, wandert beim Hover von rechts nach links.
   Sehr dezent (max. 16 % Weiß), weich gezeichnet, langsam, liegt hinter dem Text. */
.ds-d :is(.btn-primary, .cta-btn-alt, .cta-btn-main){ position: relative; overflow: hidden; isolation: isolate; }
.ds-d :is(.btn-primary, .cta-btn-alt, .cta-btn-main) > *{ position: relative; z-index: 2; }
.ds-d :is(.btn-primary, .cta-btn-alt)::before{
  content: ""; position: absolute; display: block; top: -60%; bottom: -60%; left: -40%; width: 55%;
  z-index: 1; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.22) 45%, rgba(255,255,255,.22) 55%, rgba(255,255,255,0) 100%);
  filter: blur(10px);
  transform: translateX(240%);
  transition: transform 1.15s cubic-bezier(.33,.7,.28,1), opacity .5s ease;
}
.ds-d :is(.btn-primary, .cta-btn-alt):hover::before{ opacity: 1; transform: translateX(-140%); }
/* Heller Button: Reflex dunkler statt weiß, sonst unsichtbar */
.ds-d .cta-btn-main::before{
  content: ""; position: absolute; display: block; top: -60%; bottom: -60%; left: -40%; width: 55%;
  z-index: 1; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, rgba(35,57,91,0) 0%, rgba(35,57,91,.10) 50%, rgba(35,57,91,0) 100%);
  filter: blur(10px);
  transform: translateX(240%);
  transition: transform 1.15s cubic-bezier(.33,.7,.28,1), opacity .5s ease;
}
.ds-d .cta-btn-main:hover::before{ opacity: 1; transform: translateX(-140%); }
@media (prefers-reduced-motion: reduce){
  .ds-d :is(.btn-primary, .cta-btn-alt, .cta-btn-main)::before{ display: none; }
}
/* TEIL 28d — Lichtreflex auch ohne Maus (Handy/Tablet).
   Auf Touchgeräten gibt es kein Hover: Der Reflex läuft beim Antippen
   und einmal, wenn der Button ins Bild kommt (Klasse wird per Skript gesetzt). */
@keyframes dsSweep{
  0%   { opacity: 0; transform: translateX(240%); }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-140%); }
}
.ds-d :is(.btn-primary, .cta-btn-alt, .cta-btn-main).is-sweeping::before{
  animation: dsSweep 1.4s cubic-bezier(.33,.7,.28,1) both;
}
@media (hover: none){
  .ds-d :is(.btn-primary, .cta-btn-alt, .cta-btn-main):active::before{
    animation: dsSweep 1.1s cubic-bezier(.33,.7,.28,1) both;
  }
}
@media (prefers-reduced-motion: reduce){
  .ds-d :is(.btn-primary, .cta-btn-alt, .cta-btn-main).is-sweeping::before{ animation: none; }
}
/* Alte Rotations-Animation der früheren Gold-Variante abschalten */
.ds-d :is(.btn-primary, .cta-btn-alt, .cta-btn-main)::before{ animation: none; }
.ds-d :is(.btn-primary, .cta-btn-alt, .cta-btn-main).is-sweeping::before{ animation: dsSweep 1.4s cubic-bezier(.33,.7,.28,1) both; }
@media (hover: none){ .ds-d :is(.btn-primary, .cta-btn-alt, .cta-btn-main):active::before{ animation: dsSweep 1.1s cubic-bezier(.33,.7,.28,1) both; } }
/* TEIL 28e — Lichtreflex kräftiger: schmalere, hellere Bahn, kürzere Laufzeit */
.ds-d :is(.btn-primary, .cta-btn-alt)::before{
  width: 42%;
  background: linear-gradient(100deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.10) 30%,
    rgba(255,255,255,.55) 50%,
    rgba(255,255,255,.10) 70%,
    rgba(255,255,255,0) 100%);
  filter: blur(6px);
  transition: transform .95s cubic-bezier(.33,.7,.28,1), opacity .35s ease;
}
.ds-d .cta-btn-main::before{
  width: 42%;
  background: linear-gradient(100deg,
    rgba(35,57,91,0) 0%,
    rgba(35,57,91,.08) 30%,
    rgba(35,57,91,.22) 50%,
    rgba(35,57,91,.08) 70%,
    rgba(35,57,91,0) 100%);
  filter: blur(6px);
}
.ds-d :is(.btn-primary, .cta-btn-alt, .cta-btn-main).is-sweeping::before{ animation: dsSweep 1.05s cubic-bezier(.33,.7,.28,1) both; }
@media (hover: none){ .ds-d :is(.btn-primary, .cta-btn-alt, .cta-btn-main):active::before{ animation: dsSweep .9s cubic-bezier(.33,.7,.28,1) both; } }
/* TEIL 28f — Geometrie der Lichtbahn korrigiert:
   Die Bahn startet rechts AUSSERHALB und läuft durch den Button nach links.
   Vorher lag sie durch left:-40% fast komplett außerhalb. */
.ds-d :is(.btn-primary, .cta-btn-alt, .cta-btn-main)::before{
  left: 0; right: auto; width: 55%;
  transform: translateX(200%);
}
.ds-d :is(.btn-primary, .cta-btn-alt, .cta-btn-main):hover::before{ transform: translateX(-120%); }
@keyframes dsSweep{
  0%   { opacity: 0; transform: translateX(200%); }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-120%); }
}
/* TEIL 28g — Lichtbahn sichtbar: breiterer heller Kern, weniger Weichzeichner */
.ds-d :is(.btn-primary, .cta-btn-alt)::before{
  width: 60%;
  background: linear-gradient(100deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.14) 22%,
    rgba(255,255,255,.42) 42%,
    rgba(255,255,255,.42) 58%,
    rgba(255,255,255,.14) 78%,
    rgba(255,255,255,0) 100%);
  filter: blur(3px);
  mix-blend-mode: screen;
}
.ds-d .cta-btn-main::before{
  width: 60%;
  background: linear-gradient(100deg,
    rgba(35,57,91,0) 0%,
    rgba(35,57,91,.06) 22%,
    rgba(35,57,91,.16) 42%,
    rgba(35,57,91,.16) 58%,
    rgba(35,57,91,.06) 78%,
    rgba(35,57,91,0) 100%);
  filter: blur(3px);
  mix-blend-mode: multiply;
}
/* TEIL 28h — ruhigerer, gleichmäßiger Lauf */
.ds-d :is(.btn-primary, .cta-btn-alt, .cta-btn-main)::before{
  transition: transform 1.3s cubic-bezier(.45,.05,.55,.95), opacity .4s ease;
}
.ds-d :is(.btn-primary, .cta-btn-alt, .cta-btn-main).is-sweeping::before{
  animation: dsSweep 1.4s cubic-bezier(.45,.05,.55,.95) both;
}
@media (hover: none){
  .ds-d :is(.btn-primary, .cta-btn-alt, .cta-btn-main):active::before{
    animation: dsSweep 1.2s cubic-bezier(.45,.05,.55,.95) both;
  }
}
/* ==========================================================================
   TEIL 28i — Lichtreflex, endgültige Fassung.
   Ohne mix-blend-mode und ohne Weichzeichner-Filter: beides wird von Safari
   auf dem iPhone in Kombination mit overflow:hidden und Farbverlauf-Hintergrund
   unzuverlässig dargestellt. Weiche Kanten entstehen jetzt allein über die
   Farbstopps des Verlaufs.
   ========================================================================== */
.ds-d :is(.btn-primary, .cta-btn-alt)::before{
  width: 70%;
  filter: none;
  mix-blend-mode: normal;
  background: linear-gradient(100deg,
    rgba(255,255,255,0)    0%,
    rgba(255,255,255,.06) 18%,
    rgba(255,255,255,.20) 33%,
    rgba(255,255,255,.50) 50%,
    rgba(255,255,255,.20) 67%,
    rgba(255,255,255,.06) 82%,
    rgba(255,255,255,0)  100%);
  will-change: transform, opacity;
  -webkit-backface-visibility: hidden;
}
.ds-d .cta-btn-main::before{
  width: 70%;
  filter: none;
  mix-blend-mode: normal;
  background: linear-gradient(100deg,
    rgba(35,57,91,0)    0%,
    rgba(35,57,91,.04) 18%,
    rgba(35,57,91,.10) 33%,
    rgba(35,57,91,.20) 50%,
    rgba(35,57,91,.10) 67%,
    rgba(35,57,91,.04) 82%,
    rgba(35,57,91,0)  100%);
  will-change: transform, opacity;
}
/* TEIL 28j — URSACHE GEFUNDEN: .glow-cta::before maskiert das Element auf den
   Rahmen (mask-composite: exclude). Dadurch war vom Lichtreflex nur die Kante
   sichtbar. Maske und Innenabstand hier zurücksetzen. */
.ds-d :is(.btn-primary, .cta-btn-alt, .cta-btn-main)::before{
  -webkit-mask: none !important;
          mask: none !important;
  -webkit-mask-composite: add;
          mask-composite: add;
  padding: 0 !important;
  border-radius: 0;
  inset: auto;
  top: -60%; bottom: -60%; left: 0; right: auto;
}
/* TEIL 28k — Stärke fein justiert: klar erkennbar, aber dezent */
.ds-d :is(.btn-primary, .cta-btn-alt)::before{
  background: linear-gradient(100deg,
    rgba(255,255,255,0)    0%,
    rgba(255,255,255,.05) 18%,
    rgba(255,255,255,.16) 33%,
    rgba(255,255,255,.34) 50%,
    rgba(255,255,255,.16) 67%,
    rgba(255,255,255,.05) 82%,
    rgba(255,255,255,0)  100%);
}
/* TEIL 28l — Handy: Reflex etwas kräftiger (kleine Buttons, helle Displays) */
@media (hover: none), (max-width: 760px){
  .ds-d :is(.btn-primary, .cta-btn-alt)::before{
    background: linear-gradient(100deg,
      rgba(255,255,255,0)    0%,
      rgba(255,255,255,.07) 18%,
      rgba(255,255,255,.22) 33%,
      rgba(255,255,255,.44) 50%,
      rgba(255,255,255,.22) 67%,
      rgba(255,255,255,.07) 82%,
      rgba(255,255,255,0)  100%);
  }
}
/* ==========================================================================
   TEIL 28m — Entwurf D: umlaufender Lichtstrahl am Button-RAHMEN
   (ersetzt den Lichtreflex über die Fläche).
   - conic-gradient erzeugt einen einzelnen hellen Lichtpunkt,
   - die Maske (content-box XOR border-box) lässt nur einen 1,5-px-Rand stehen,
   - --beam-angle wird animiert (@property), der Punkt läuft gegen den
     Uhrzeigersinn: rechts → oben → links → unten.
   Nur Rahmen, keine Fläche. Läuft dauerhaft, also auch auf dem Handy.
   ========================================================================== */
@keyframes dsBeamCCW{
  from{ --beam-angle: 100deg; }     /* Lichtpunkt startet rechts */
  to  { --beam-angle: -260deg; }    /* volle Runde gegen den Uhrzeigersinn */
}
.ds-d :is(.btn-primary, .cta-btn-alt, .cta-btn-main){
  position: relative; isolation: isolate; overflow: visible !important;
}
/* Leuchtender Rahmen mit Lichtpunkt */
.ds-d :is(.btn-primary, .cta-btn-alt, .cta-btn-main)::before{
  content: "" !important; display: block !important; position: absolute !important;
  inset: -1px !important; top: -1px !important; bottom: -1px !important; left: -1px !important; right: -1px !important;
  width: auto !important; height: auto !important;
  padding: 1.5px !important;
  border-radius: inherit !important;
  background: conic-gradient(from var(--beam-angle),
    rgba(255,255,255,.14)   0deg,     /* ruhiger, schwach leuchtender Grundrahmen */
    rgba(255,255,255,.14) 292deg,
    rgba(255,255,255,.45) 322deg,
    #FFFFFF               346deg,     /* Lichtpunkt */
    rgba(255,255,255,.45) 356deg,
    rgba(255,255,255,.14) 360deg) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
          mask-composite: exclude !important;
  opacity: 1 !important; transform: none !important; filter: none !important; mix-blend-mode: normal !important;
  transition: none !important;
  animation: dsBeamCCW 3.6s linear infinite !important;
  pointer-events: none; z-index: 3;
}
/* Weicher Schein um den Lichtpunkt — nur außerhalb des Buttons (breiterer,
   weichgezeichneter Ring, innen ausgeschnitten, damit die Fläche frei bleibt) */
.ds-d :is(.btn-primary, .cta-btn-alt, .cta-btn-main)::after{
  content: "" !important; display: block !important; position: absolute !important;
  inset: -7px !important; padding: 6px !important;
  border-radius: calc(var(--radius) + 7px) !important;
  background: conic-gradient(from var(--beam-angle),
    rgba(255,255,255,0)     0deg,
    rgba(255,255,255,0)   318deg,
    rgba(255,255,255,.55) 346deg,
    rgba(255,255,255,0)   360deg) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
          mask-composite: exclude !important;
  filter: blur(5px) !important;
  opacity: .9 !important;
  animation: dsBeamCCW 3.6s linear infinite !important;
  pointer-events: none; z-index: 2;
}
/* Heller Button (weiß auf dunkler Karte): Rahmen außen, damit der Strahl auf
   dem dunklen Grund sichtbar ist */
.ds-d .cta-btn-main::before{ inset: -3px !important; top: -3px !important; bottom: -3px !important; left: -3px !important; right: -3px !important; }
/* Vorherigen Lichtreflex über die Fläche abschalten */
.ds-d :is(.btn-primary, .cta-btn-alt, .cta-btn-main).is-sweeping::before{ animation: dsBeamCCW 3.6s linear infinite !important; }
@media (hover: none){ .ds-d :is(.btn-primary, .cta-btn-alt, .cta-btn-main):active::before{ animation: dsBeamCCW 3.6s linear infinite !important; } }
/* Bewegung reduziert: ruhiger leuchtender Rahmen ohne Lauf */
@media (prefers-reduced-motion: reduce){
  .ds-d :is(.btn-primary, .cta-btn-alt, .cta-btn-main)::before,
  .ds-d :is(.btn-primary, .cta-btn-alt, .cta-btn-main)::after{ animation: none !important; }
}
/* ==========================================================================
   TEIL 28n — Umlaufender Lichtstrahl, endgültige Technik: SVG-Rahmenlinie.
   Warum nicht conic-gradient: Der Winkel läuft vom Mittelpunkt aus, auf einem
   breiten Button rast der Punkt über die kurzen Seiten und kriecht über die
   langen. Eine SVG-Linie mit stroke-dasharray läuft gleichmäßig über den Umfang.
   Das SVG wird per Skript in jeden Button gesetzt (Inhalt bleibt unverändert).
   ========================================================================== */
.ds-d :is(.btn-primary, .cta-btn-alt, .cta-btn-main)::before,
.ds-d :is(.btn-primary, .cta-btn-alt, .cta-btn-main)::after{ display: none !important; animation: none !important; }
.ds-d .beam{
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none; z-index: 3;
}
.ds-d .beam rect{ fill: none; vector-effect: non-scaling-stroke; }
.ds-d .beam .b-base{ stroke: rgba(255,255,255,.20); stroke-width: 1; }
.ds-d .beam .b-dot{
  stroke: #FFFFFF; stroke-width: 1.8; stroke-linecap: round;
  stroke-dasharray: 9 91;                       /* Lichtstrahl = 9 % des Umfangs */
  animation: dsBeamRun 4.2s linear infinite;
  filter: drop-shadow(0 0 2px rgba(255,255,255,.95)) drop-shadow(0 0 6px rgba(255,255,255,.5));
}
/* Auf hellem Button (weiß auf dunkler Karte) ist der Grundrahmen unsichtbar —
   dort leuchtet nur der Punkt, dessen Schein auf den dunklen Grund fällt */
.ds-d .cta-btn-main .beam .b-base{ stroke: rgba(35,57,91,.12); }
/* stroke-dashoffset steigt → der Strahl läuft gegen die Pfadrichtung,
   also gegen den Uhrzeigersinn: rechts → oben → links → unten */
@keyframes dsBeamRun{ from{ stroke-dashoffset: 0; } to{ stroke-dashoffset: 100; } }
@media (prefers-reduced-motion: reduce){
  .ds-d .beam .b-dot{ animation: none; stroke-dasharray: none; stroke: rgba(255,255,255,.4); filter: none; }
}
/* TEIL 28o — eigener Pfad: beginnt rechts in der Mitte, läuft gegen den
   Uhrzeigersinn (rechts → oben → links → unten). Der Strahl ist mittig auf
   dem Startpunkt zentriert (Versatz 4,5 = halbe Strahllänge). */
.ds-d .beam path{ fill: none; vector-effect: non-scaling-stroke; }
.ds-d .beam .b-base{ stroke: rgba(255,255,255,.20); stroke-width: 1; }
.ds-d .cta-btn-main .beam .b-base{ stroke: rgba(35,57,91,.12); }
.ds-d .beam .b-dot{
  stroke: #FFFFFF; stroke-width: 1.8; stroke-linecap: round;
  stroke-dasharray: 9 91;
  animation: dsBeamPath 4.2s linear infinite;
  filter: drop-shadow(0 0 2px rgba(255,255,255,.95)) drop-shadow(0 0 6px rgba(255,255,255,.5));
}
@keyframes dsBeamPath{ from{ stroke-dashoffset: 4.5; } to{ stroke-dashoffset: -95.5; } }
@media (prefers-reduced-motion: reduce){
  .ds-d .beam .b-dot{ animation: none; stroke-dasharray: none; stroke: rgba(255,255,255,.4); filter: none; }
}
/* SVG liegt exakt auf der Innenkante des Buttons (1 px Rahmen) */
.ds-d .beam{ left: 0; top: 0; width: 100%; height: 100%; }
.ds-d .beam path{ vector-effect: none; }
/* Weicher Schein um den Lichtpunkt: breitere, halbtransparente Linie auf
   demselben Weg (ohne Filter — zuverlässig in Safari) */
.ds-d .beam .b-halo{
  fill: none; stroke: rgba(255,255,255,.22); stroke-width: 6; stroke-linecap: round;
  stroke-dasharray: 12 88;
  animation: dsBeamHalo 4.2s linear infinite;
}
@keyframes dsBeamHalo{ from{ stroke-dashoffset: 6; } to{ stroke-dashoffset: -94; } }
.ds-d .beam .b-dot{ filter: drop-shadow(0 0 2px rgba(255,255,255,.9)); }
@media (prefers-reduced-motion: reduce){ .ds-d .beam .b-halo{ display: none; } }
/* TEIL 28p — Lichtstrahl: Uhrzeigersinn (rechts → unten → links → oben),
   langsamer (6,5 s pro Runde), kürzerer Strahl (5 % statt 9 % des Umfangs) */
.ds-d .beam .b-dot{
  stroke-dasharray: 5 95;
  animation: dsBeamCW 6.5s linear infinite;
}
.ds-d .beam .b-halo{
  stroke-dasharray: 8 92;
  animation: dsBeamHaloCW 6.5s linear infinite;
}
/* Pfad läuft gegen den Uhrzeigersinn; steigender Versatz schiebt den Strahl
   rückwärts, also im Uhrzeigersinn. Start zentriert auf rechts Mitte. */
@keyframes dsBeamCW{ from{ stroke-dashoffset: 2.5; } to{ stroke-dashoffset: 102.5; } }
@keyframes dsBeamHaloCW{ from{ stroke-dashoffset: 4; } to{ stroke-dashoffset: 104; } }
/* Heller Button: Rahmen liegt 3 px außerhalb auf dem dunklen Grund */
.ds-d .cta-btn-main .beam{ left: -3px; top: -3px; width: calc(100% + 6px); height: calc(100% + 6px); }
.ds-d .cta-btn-main .beam .b-base{ stroke: rgba(255,255,255,.22); }

/* ==========================================================================
   TEIL 28q — ENTWURF D: FEINSCHLIFF (Einheitlichkeit, Preis-Buttons)
   Ein Schriftsystem, zwei Radien, zwei Schatten, drei Symbolgrößen,
   eine Linienstärke. Nur .ds-d, die Live-Seite ist nicht betroffen.
   ========================================================================== */
.ds-d{
  --font-stack: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:  "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --r-s: 10px;                 /* Karten, Kacheln, Buttons */
  --r-l: 14px;                 /* große Flächen und Panels */
  --sh-1: 0 1px 0 rgba(17,24,32,.03), 0 14px 34px -30px rgba(17,24,32,.45);
  --sh-2: 0 1px 0 rgba(17,24,32,.03), 0 30px 60px -40px rgba(17,24,32,.55);
}
/* Zahlen: gleiche Schrift, aber gleich breite Ziffern */
.ds-d :is(.num, .hr-score, .prp-unit, .prp-label, .mono-stat, .pm-rating, .dim-label, .calc-step-label, .c-label){ font-family: var(--font-body); font-variant-numeric: tabular-nums; }

/* Überschriften H3: eine Größe */
.ds-d h3, .ds-d :is(.sv-core, .step) h3{ font-size: 1.25rem; line-height: 1.25; }

/* Radien: 10px für Karten, 14px für große Flächen */
.ds-d :is(.pm-item, .calc-hint, .step, .faq-help, .sv-switch-bar, .steps-cta, .hr-google, .price-result-panel, .type-option){ border-radius: var(--r-s); }
.ds-d :is(.compare, .price-calc, .g-showcase, .cta-card, .calc-request-panel, .calc-included, .fx-n2-card){ border-radius: var(--r-l); }

/* Schatten: zwei Stufen */
.ds-d :is(.hr-google, .step){ box-shadow: var(--sh-1); }
.ds-d :is(.compare, .price-calc, .g-showcase){ box-shadow: var(--sh-2); }
.ds-d .steps-cta{ box-shadow: var(--edge), var(--sh-2); }

/* Symbole: 18 / 20 / 24 px, Linienstärke 1.5 (Häkchen in Punkten 2) */
.ds-d :is(.pm-ico, .callout-icon, .stat-icon) svg{ width: 24px; height: 24px; }
.ds-d :is(.type-option, .rp-ico) svg{ width: 20px; height: 20px; }
.ds-d .btn svg:not(.beam), .ds-d .cr-g svg{ width: 18px; height: 18px; }
.ds-d :is(.pm-ico, .ci-head, .rp-ico, .callout-icon, .type-option, .btn) svg:not(.beam) :is(path, circle, rect, polyline, line){ stroke-width: 1.5; }
.ds-d .cr-g svg path{ stroke: none; }
.ds-d .check-dot svg, .ds-d .x-dot svg{ width: 12px; height: 12px; stroke-width: 2; }
.ds-d :is(.is-no, .is-yes, .sv-list li, .c-us, .c-them) > svg{ stroke-width: 2; }

/* Abstände: Standard 96px je Sektion */
.ds-d main > section[style*="padding: 60px"]{ padding: 96px 0 !important; }
.ds-d .cta-band{ padding-top: 96px; padding-bottom: 96px; }
@media (max-width: 640px){
  .ds-d main > section[style*="padding: 60px"]{ padding: 64px 0 !important; }
  .ds-d .cta-band{ padding-top: 64px; padding-bottom: 64px; }
}

/* Preise: „Angebot anfordern“ auf dunklem Panel — hell und gut lesbar */
.ds-d :is(.price-result-panel .prp-actions, .calc-request-panel) .btn-primary{
  background: #fff; color: var(--blueprint); border: 1px solid #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 14px 30px -16px rgba(0,0,0,.55);
  font-weight: 700;
}
.ds-d :is(.price-result-panel .prp-actions, .calc-request-panel) .btn-primary:hover{
  background: #EEF2F7; border-color: #EEF2F7; color: var(--blueprint-2); transform: translateY(-2px);
}
.ds-d :is(.price-result-panel .prp-actions, .calc-request-panel) .btn-primary:focus-visible{ outline: 2px solid #fff; outline-offset: 3px; }
/* Lichtstrahl an hellen Buttons: außen um den Button (Klasse setzt das Skript) */
.ds-d .beam-out{ overflow: visible !important; }
.ds-d .beam-out .beam{ left: -3px; top: -3px; width: calc(100% + 6px); height: calc(100% + 6px); }
.ds-d .beam-out .beam .b-base{ stroke: rgba(255,255,255,.22); }
/* Kontrast auf dunklen Flächen (Navy-Akzent wäre dort unlesbar) */
.ds-d .price-result-panel .prp-label{ color: rgba(255,255,255,.62); }
.ds-d .stats-band .lede{ color: rgba(255,255,255,.72); }
.ds-d .site-footer .footer-h, .ds-d .site-footer .footer-col a.footer-more{ color: rgba(255,255,255,.62); }
.ds-d .site-footer .footer-col a.footer-more:hover{ color: #fff; }
/* Hinweise unter „Sechs Gründe“ (Design K4): helle Karten mit Etikett und Links */
.ds-d .hw-pair{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; margin-top: 24px; }
.ds-d .hw-card{ display: flex; flex-direction: column; padding: 28px 28px 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-s); box-shadow: var(--sh-1); transition: transform .2s, border-color .2s, box-shadow .2s; }
.ds-d .hw-card:hover{ transform: translateY(-2px); border-color: #C6CED6; box-shadow: 0 1px 0 rgba(17,24,32,.03), 0 22px 44px -28px rgba(17,24,32,.5); }
.ds-d .hw-top{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.ds-d .hw-ico{ width: 48px; height: 48px; border-radius: var(--r-s); background: #EDF1F6; color: var(--blueprint); display: grid; place-items: center; flex: none; }
.ds-d .hw-ico svg{ width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ds-d .hw-chip{ font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--blueprint); background: #EDF1F6; padding: 5px 11px; border-radius: 999px; white-space: nowrap; }
.ds-d .hw-card h3{ margin: 0 0 10px; color: var(--ink); font-size: 1.2rem; line-height: 1.3; letter-spacing: -.012em; hyphens: manual; -webkit-hyphens: manual; }
.ds-d .hw-card p{ margin: 0 0 18px; color: var(--ink-soft); font-size: 1rem; line-height: 1.65; }
.ds-d .hw-links{ display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.ds-d .hw-links a{ font-weight: 600; font-size: .94rem; color: var(--blueprint); text-decoration: none; }
.ds-d .hw-links a:hover{ text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px){ .ds-d .hw-pair{ grid-template-columns: 1fr; gap: 14px; } }
@media (max-width: 640px){
  .ds-d .hw-card{ padding: 22px 20px 20px; }
  .ds-d .hw-ico{ width: 44px; height: 44px; }
  .ds-d .hw-card h3{ font-size: 1.12rem; }
  .ds-d .hw-card p{ font-size: .97rem; }
}

/* ==========================================================================
   TEIL 28r — STARTSEITE ENTWURF D: Leistungen-Kopf (N2), Einzugsgebiet (E16)
   Aus den Vorschau-Entwürfen übernommen (vorher Inline-CSS der Vorschauseiten).
   ========================================================================== */
/* Leistungen, oberer Teil: Karte „Unser Hauptgeschäft“ */
.ds-d .fx{ margin-bottom: 56px; }
.ds-d .fx-head{ margin: 0; text-align: left; max-width: 760px; }
.ds-d .fx-head h2{ max-width: 24ch; }
.ds-d .fx-i{ flex: none; width: 20px; color: var(--blueprint); display: grid; place-items: center; align-self: flex-start; margin-top: 2px; }
.ds-d .fx .fx-i svg{ width: 20px !important; height: 20px !important; stroke-width: 1.5 !important; }
.ds-d .fx svg:not(.beam){ width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ds-d .fx-n2{ display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: 56px; align-items: center; }
.ds-d .fx-n2-proof{ list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; }
.ds-d .fx-n2-proof li{ display: flex; gap: 10px; font-size: .94rem; font-weight: 500; color: var(--ink); }
.ds-d .fx-n2-card{ padding: 30px 30px 26px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 1px 0 rgba(17,24,32,.03), 0 14px 34px -30px rgba(17,24,32,.45); }
.ds-d .fx-k{ display: block; font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--stone); }
.ds-d .fx-main{ display: flex; align-items: center; gap: 14px; margin: 14px 0 12px; color: var(--blueprint); }
.ds-d .fx-main svg{ width: 34px; height: 34px; }
.ds-d .fx-main strong{ font-family: var(--font-display); font-size: 2rem; letter-spacing: -.03em; color: var(--ink); line-height: 1.1; }
.ds-d .fx-sub, .ds-d .fx-add{ list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ds-d .fx-sub{ padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.ds-d .fx-sub a{ display: inline-block; padding: 5px 12px; border-radius: 999px; background: #EDF1F6; color: var(--blueprint); font-size: .84rem; font-weight: 600; text-decoration: none; transition: background .2s; }
.ds-d .fx-sub a:hover{ background: #DCE4EE; }
.ds-d .fx-k2{ margin-top: 20px; }
.ds-d .fx-add{ margin-top: 10px; }
.ds-d .fx-add a{ display: inline-block; padding: 4px 11px; border: 1px solid var(--line); border-radius: 999px; font-size: .82rem; color: var(--ink-soft); text-decoration: none; }
.ds-d .fx-add a:hover{ border-color: var(--blueprint); color: var(--blueprint); }
.ds-d .fx-yes{ display: flex; gap: 10px; margin: 22px 0 0; padding: 14px 16px; border-radius: 8px; background: var(--bg-alt); font-size: .9rem; color: var(--ink-soft); }
.ds-d .fx-yes svg{ color: var(--ok); }
.ds-d .fx-yes strong{ color: var(--ink); }
@media (max-width: 1000px){ .ds-d .fx-n2{ grid-template-columns: 1fr; gap: 36px; } }
@media (max-width: 640px){ .ds-d .fx{ margin-bottom: 40px; } .ds-d .fx-n2-proof{ grid-template-columns: 1fr; } .ds-d .fx-n2-card{ padding: 24px 20px 20px; } }
/* Einzugsgebiet: Orte nach Landkreisen */
.ds-d .ez svg:not(.beam){ width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ds-d .ez h2{ text-align: left; max-width: 22ch; }
.ds-d .ez .lede{ max-width: 58ch; margin-top: 16px; }
.ds-d .ez ul, .ds-d .ez ol{ list-style: none; margin: 0; padding: 0; }
.ds-d .ez a small{ font-variant-numeric: tabular-nums; }
.ds-d .ez-head{ display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 48px; }
.ds-d .ez-stats{ display: flex; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.ds-d .ez-stats > div{ display: grid; padding: 16px 22px; min-width: 120px; }
.ds-d .ez-stats > div + div{ border-left: 1px solid var(--line); }
.ds-d .ez-stats strong{ font-family: var(--font-display); font-size: 2rem; line-height: 1.05; letter-spacing: -.03em; color: var(--blueprint); }
.ds-d .ez-stats span{ font-size: .8rem; color: var(--stone); }
.ds-d .ez-cta{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; margin-top: 32px; padding: 24px 28px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 1px 0 rgba(17,24,32,.03), 0 14px 34px -30px rgba(17,24,32,.45); }
.ds-d .ez-cta > div:first-child{ display: grid; gap: 4px; max-width: 560px; }
.ds-d .ez-cta strong{ font-family: var(--font-display); font-size: 1.15rem; }
.ds-d .ez-cta span{ color: var(--ink-soft); font-size: .94rem; }
.ds-d .ez-btns{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ds-d .ez-btns .btn{ display: inline-flex; align-items: center; gap: 8px; }
.ds-d .ez-note{ margin-top: 16px; font-size: .8rem; color: var(--stone); }
/* Filter-Knöpfe und Orts-Kacheln */
.ds-d .e15-f{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.ds-d .e15-f button{ display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font: inherit; font-size: .88rem; font-weight: 600; color: var(--ink-soft); cursor: pointer; transition: all .2s; }
.ds-d .e15-f button b{ font-weight: 600; font-size: .76rem; padding: 1px 7px; border-radius: 999px; background: var(--bg-alt); color: var(--stone); }
.ds-d .e15-f button:hover{ border-color: var(--blueprint); color: var(--blueprint); }
.ds-d .e15-f button.is-on{ background: var(--blueprint); border-color: var(--blueprint); color: #fff; }
.ds-d .e15-f button.is-on b{ background: rgba(255,255,255,.18); color: #fff; }
.ds-d .e15-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-top: 20px; min-height: 120px; align-content: start; }
.ds-d .e15-chip{ display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 13px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink); text-decoration: none; font-size: .93rem; font-weight: 500; transition: border-color .2s, transform .2s, box-shadow .2s; }
.ds-d .e15-chip[hidden]{ display: none; }
.ds-d .e15-chip:hover{ border-color: var(--blueprint); transform: translateY(-1px); box-shadow: 0 10px 24px -18px rgba(17,24,32,.5); }
.ds-d .e15-chip small{ font-size: .78rem; color: var(--stone); white-space: nowrap; }
/* Gruppen je Landkreis */
.ds-d .e16{ margin-top: 20px; border-top: 1px solid var(--ink); }
.ds-d .e16-grp{ display: grid; grid-template-columns: 240px minmax(0,1fr); gap: 20px 32px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.ds-d .e16-grp[hidden]{ display: none; }
.ds-d .e16-h{ display: grid; gap: 4px; align-content: start; padding-top: 10px; }
.ds-d .e16-h strong{ font-family: var(--font-display); font-size: 1.1rem; letter-spacing: -.01em; }
.ds-d .e16-h span{ font-size: .82rem; color: var(--stone); }
.ds-d .e16-chips{ display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.ds-d .e16-more .e16-h span{ display: none; }
.ds-d .e16-mcols{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.ds-d .e16-m{ display: grid; gap: 4px 0; align-content: start; }
.ds-d .e16-m > strong{ font-family: var(--font-display); font-size: .98rem; }
.ds-d .e16-m > span{ font-size: .8rem; color: var(--stone); margin-bottom: 8px; }
.ds-d .ez-cta-t .ez-trust{ flex-basis: 100%; }
.ds-d .ez-trust{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--ink-soft); text-decoration: none; font-size: .9rem; }
.ds-d .ez-trust:hover strong{ color: var(--blueprint); }
.ds-d .ez-trust strong{ color: var(--ink); font-size: 1rem; }
.ds-d .ez-g{ width: 22px; height: 22px; display: inline-grid; place-items: center; }
.ds-d .ez-g svg{ width: 20px !important; height: 20px !important; stroke: none !important; }
.ds-d .ez-st{ color: var(--star); letter-spacing: 1px; }
.ds-d .ez-sep{ width: 1px; height: 16px; background: var(--line); margin: 0 4px; }
@media (max-width: 640px){
  .ds-d .ez-stats{ width: 100%; }
  .ds-d .ez-stats > div{ padding: 12px 14px; min-width: 0; flex: 1; }
  .ds-d .ez-stats strong{ font-size: 1.6rem; }
  .ds-d .ez-cta{ padding: 20px; }
  .ds-d .ez-btns, .ds-d .ez-btns .btn{ width: 100%; justify-content: center; }
  .ds-d .e15-f button{ flex: none; }
  .ds-d .e16-grp{ grid-template-columns: 1fr; gap: 12px; padding: 18px 0; }
  .ds-d .e16-h{ padding-top: 0; }
  .ds-d .e16-chips{ grid-template-columns: 1fr 1fr; gap: 8px; }
  .ds-d .e16-mcols{ grid-template-columns: 1fr 1fr; gap: 14px 8px; }
  .ds-d .ez-trust{ flex-wrap: nowrap; gap: 6px; font-size: .8rem; white-space: nowrap; }
  .ds-d .ez-trust strong{ font-size: .9rem; }
  .ds-d .ez-st{ letter-spacing: 0; font-size: .8rem; }
  .ds-d .ez-gw{ display: none; }
  .ds-d .e15-f{ flex-wrap: nowrap; overflow-x: auto; margin-left: -16px; margin-right: -16px; padding: 0 16px 4px; scrollbar-width: none; }
  .ds-d .e15-chip{ padding: 11px 12px; font-size: .88rem; }
}
/* Bewertungsportale: farbige Symbolkachel wie vorher (Entwurf D hatte sie ausgeblendet) */
.ds-d .review-portals .rp-ico{ width: 40px !important; height: 40px !important; margin: 0 auto 10px; border-radius: var(--r-s); background: currentColor !important; display: grid; place-items: center; }
.ds-d .review-portals .rp-ico svg{ width: 22px; height: 22px; }
/* Maßlinie „Coban Immobilien ——— Inhabergeführt …“: auf dem Handy untereinander */
@media (max-width: 640px){
  .ds-d .dim{ padding: 26px 0; }
  .ds-d .dim .container{ flex-direction: column; align-items: center; gap: 10px; text-align: center; }
  .ds-d .dim-line{ width: 100%; flex: none; }
  .ds-d .dim-label{ white-space: normal; font-size: .82rem; line-height: 1.5; }
}
/* Lichtstrahl an hellen Buttons auf heller Fläche (z. B. Telefon-Button): Navy statt Weiß */
.ds-d .beam-ink .beam .b-base{ stroke: rgba(35,57,91,.10); }
.ds-d .beam-ink .beam .b-halo{ stroke: rgba(35,57,91,.16); }
.ds-d .beam-ink .beam .b-dot{ stroke: var(--blueprint); filter: drop-shadow(0 0 2px rgba(35,57,91,.55)); }
/* Schutz: der Lichtstrahl füllt immer den ganzen Button-Rahmen,
   egal welche Symbol-Regeln für SVGs in Buttons gelten */
.ds-d svg.beam{ position: absolute !important; left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; }
.ds-d .beam-out > svg.beam, .ds-d .cta-btn-main > svg.beam{ left: -3px !important; top: -3px !important; width: calc(100% + 6px) !important; height: calc(100% + 6px) !important; }
.ds-d [data-beam]{ position: relative; isolation: isolate; }

/* ==========================================================================
   TEIL 29 — SEITENBAUSTEINE (pg-*) FÜR LEISTUNGS- UND STADTSEITEN
   Abgeleitet aus der Startseite (Designsystem D): gleiche Farben, Schrift,
   Radien (--r-s 10px / --r-l 14px), Schatten (--sh-1 / --sh-2), Symbole
   (18/20/24 px, Linie 1.5), Abstände (96 / 64 px). HTML: _build/komponenten.pl
   ========================================================================== */
.ds-d .pg-i{ width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ds-d .pg-k{ display: block; font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--stone); }
.ds-d .pg-src{ margin: 14px 0 0; font-size: .78rem; color: var(--stone); }
.ds-d .pg-grid{ display: grid; gap: 20px; }
.ds-d .pg-grid-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.ds-d .pg-grid-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.ds-d .pg-grid-4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
.ds-d .pg-head{ text-align: left; max-width: 760px; margin: 0 0 40px; }
.ds-d .pg-head h2{ max-width: 24ch; }
.ds-d .pg-head.pg-center{ text-align: center; margin-inline: auto; }
.ds-d .pg-head.pg-center h2{ margin-inline: auto; }
.ds-d .pg-card, .ds-d .pg-prob, .ds-d .pg-scope, .ds-d .pg-why, .ds-d .pg-svc, .ds-d .pg-loc, .ds-d .pg-rev, .ds-d .pg-rev-sum, .ds-d .pg-mini, .ds-d .pg-step{
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-s); box-shadow: var(--sh-1);
}
.ds-d .pg-svc, .ds-d .pg-why, .ds-d .pg-rev{ transition: transform .2s, border-color .2s, box-shadow .2s; }
.ds-d .pg-svc:hover, .ds-d .pg-why:hover, .ds-d .pg-rev:hover{ transform: translateY(-2px); border-color: #C6CED6; box-shadow: 0 1px 0 rgba(17,24,32,.03), 0 22px 44px -28px rgba(17,24,32,.5); }

/* Hero */
.ds-d .pg-hero{ padding: 32px 0 72px; background: linear-gradient(180deg, var(--bg-alt), #fff 70%); }
.ds-d .pg-crumbs ol{ list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: .82rem; color: var(--stone); }
.ds-d .pg-crumbs li + li::before{ content: "›"; margin-right: 6px; color: #A3ACB6; }
.ds-d .pg-crumbs a{ color: var(--ink-soft); text-decoration: none; }
.ds-d .pg-crumbs a:hover{ color: var(--blueprint); text-decoration: underline; text-underline-offset: 3px; }
.ds-d .pg-hero-grid{ display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr); gap: 56px; align-items: center; }
.ds-d .pg-hero h1{ margin: 14px 0 0; font-size: clamp(2.1rem, 4.2vw, 3.2rem); line-height: 1.08; }
.ds-d .pg-hero h1 em{ display: block; color: var(--blueprint); font-style: normal; }
.ds-d .pg-region{ margin: 14px 0 0; font-size: .92rem; font-weight: 600; color: var(--blueprint); }
.ds-d .pg-hero .lede{ margin-top: 16px; max-width: 58ch; }
.ds-d .pg-badge{ display: inline-flex; align-items: center; gap: 10px; margin: 20px 0 0; padding: 8px 14px 8px 10px; border-radius: 999px; background: #E7F5EC; color: #17663A; font-size: .9rem; font-weight: 600; }
.ds-d .pg-badge .pg-i{ color: var(--ok); }
.ds-d .pg-chips{ list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.ds-d .pg-chips li{ display: flex; align-items: center; gap: 8px; font-size: .92rem; font-weight: 500; color: var(--ink); }
.ds-d .pg-chips .pg-i{ width: 18px; height: 18px; color: var(--ok); }
.ds-d .pg-actions{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.ds-d .pg-actions .btn{ display: inline-flex; align-items: center; gap: 8px; }
.ds-d .pg-gline{ display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: .88rem; color: var(--ink-soft); text-decoration: none; }
.ds-d .pg-gline strong{ color: var(--ink); font-size: .98rem; }
.ds-d .pg-g{ width: 20px; height: 20px; display: inline-grid; place-items: center; }
.ds-d .pg-g svg{ width: 18px; height: 18px; }
.ds-d .pg-stars{ color: var(--star); letter-spacing: 1px; }
.ds-d .pg-ver{ display: inline-flex; align-items: center; gap: 6px; color: var(--ok); font-weight: 600; font-size: .8rem; }
.ds-d .pg-ver i{ width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.ds-d .pg-card{ padding: 26px; box-shadow: var(--sh-2); }
.ds-d .pg-owner-top{ display: flex; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.ds-d .pg-owner-top img{ width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
.ds-d .pg-owner-top div{ display: grid; }
.ds-d .pg-owner-top strong{ font-family: var(--font-display); font-size: 1.1rem; }
.ds-d .pg-owner-top span{ font-size: .85rem; color: var(--ink-soft); }
.ds-d .pg-owner-facts, .ds-d .pg-place-rows{ list-style: none; margin: 0; padding: 0; }
.ds-d .pg-owner-facts li, .ds-d .pg-place-rows li{ display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.ds-d .pg-owner-facts strong, .ds-d .pg-place-rows strong{ font-family: var(--font-display); font-size: 1.15rem; color: var(--blueprint); white-space: nowrap; order: 2; }
.ds-d .pg-owner-facts span, .ds-d .pg-place-rows span{ font-size: .88rem; color: var(--ink-soft); }
.ds-d .pg-owner-note{ display: flex; gap: 10px; margin: 16px 0 0; font-size: .86rem; color: var(--ink-soft); }
.ds-d .pg-owner-note .pg-i{ color: var(--blueprint); }
.ds-d .pg-place .pg-k{ margin-bottom: 4px; }
.ds-d .pg-place-owner{ display: flex; align-items: center; gap: 12px; margin-top: 16px; font-size: .86rem; color: var(--ink-soft); }
.ds-d .pg-place-owner img{ width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
.ds-d .pg-place-owner strong{ color: var(--ink); }

/* Abschnitte */
.ds-d .pg-prob{ display: grid; gap: 14px; padding: 24px; align-content: start; }
.ds-d .pg-prob p{ display: flex; gap: 12px; margin: 0; }
.ds-d .pg-prob-q{ font-weight: 600; color: var(--ink); line-height: 1.45; }
.ds-d .pg-prob-q .pg-i{ color: #B7791F; }
.ds-d .pg-prob-a{ padding-top: 14px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: .96rem; line-height: 1.6; }
.ds-d .pg-prob-a .pg-i{ color: var(--ok); }
.ds-d .pg-split, .ds-d .pg-local{ display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: 56px; align-items: start; }
.ds-d .pg-split-text p, .ds-d .pg-local-text p{ margin: 16px 0 0; color: var(--ink-soft); line-height: 1.7; max-width: 62ch; }
.ds-d .pg-split-text h2, .ds-d .pg-local-text h2{ margin-top: 14px; }
.ds-d .pg-split-side, .ds-d .pg-local-cards{ display: grid; gap: 12px; }
.ds-d .pg-mini{ display: flex; gap: 14px; padding: 18px 20px; }
.ds-d .pg-mini .pg-i{ color: var(--blueprint); margin-top: 2px; }
.ds-d .pg-mini div{ display: grid; gap: 4px; }
.ds-d .pg-mini strong{ font-family: var(--font-display); font-size: 1.02rem; }
.ds-d .pg-mini span{ font-size: .92rem; color: var(--ink-soft); line-height: 1.55; }
.ds-d .pg-scope{ padding: 26px 26px 22px; }
.ds-d .pg-scope h3{ margin: 0 0 14px; font-size: 1.15rem; }
.ds-d .pg-scope ul, .ds-d .pg-notin ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ds-d .pg-scope li{ display: flex; gap: 10px; font-size: .95rem; color: var(--ink); line-height: 1.5; }
.ds-d .pg-scope .pg-i{ width: 18px; height: 18px; color: var(--ok); margin-top: 2px; }
.ds-d .pg-notin{ margin-top: 20px; border: 1px solid var(--line); border-radius: var(--r-s); background: #fff; }
.ds-d .pg-notin summary{ display: flex; justify-content: space-between; padding: 16px 20px; cursor: pointer; font-weight: 600; list-style: none; }
.ds-d .pg-notin summary::-webkit-details-marker{ display: none; }
.ds-d .pg-notin summary span{ transition: transform .2s; color: var(--stone); }
.ds-d .pg-notin[open] summary span{ transform: rotate(45deg); }
.ds-d .pg-notin ul{ padding: 0 20px 18px; }
.ds-d .pg-notin li{ font-size: .93rem; color: var(--ink-soft); line-height: 1.6; padding-left: 14px; border-left: 2px solid var(--line); }
.ds-d .pg-why{ padding: 26px 24px 24px; }
.ds-d .pg-num{ font-family: var(--font-display); font-size: .8rem; font-weight: 600; letter-spacing: .12em; color: #A3ACB6; }
.ds-d .pg-why h3{ margin: 12px 0 8px; font-size: 1.1rem; }
.ds-d .pg-why p{ margin: 0; font-size: .94rem; color: var(--ink-soft); line-height: 1.6; }
.ds-d .pg-svc{ display: flex; flex-direction: column; padding: 26px 24px 22px; scroll-margin-top: 110px; }
.ds-d .pg-svc-top{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.ds-d .pg-svc-ico{ width: 48px; height: 48px; border-radius: var(--r-s); background: #EDF1F6; color: var(--blueprint); display: grid; place-items: center; }
.ds-d .pg-svc-ico .pg-i{ width: 24px; height: 24px; }
.ds-d .pg-tag{ font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--blueprint); background: #EDF1F6; padding: 4px 10px; border-radius: 999px; }
.ds-d .pg-svc h3{ margin: 0 0 8px; font-size: 1.15rem; }
.ds-d .pg-svc p{ margin: 0; font-size: .94rem; color: var(--ink-soft); line-height: 1.6; }
.ds-d .pg-svc .pg-svc-local{ display: flex; gap: 8px; margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: var(--bg-alt); font-size: .88rem; color: var(--ink); }
.ds-d .pg-svc-local .pg-i{ width: 18px; height: 18px; color: var(--blueprint); margin-top: 1px; }
.ds-d .pg-more{ margin-top: auto; padding-top: 16px; font-weight: 600; font-size: .92rem; color: var(--blueprint); text-decoration: none; }
.ds-d .pg-more:hover{ text-decoration: underline; text-underline-offset: 3px; }
.ds-d .pg-extra{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 22px; }
.ds-d .pg-extra > span{ font-size: .82rem; font-weight: 600; color: var(--stone); margin-right: 4px; }
.ds-d .pg-extra a{ display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font-size: .88rem; font-weight: 500; text-decoration: none; }
.ds-d .pg-extra a:hover{ border-color: var(--blueprint); color: var(--blueprint); }
.ds-d .pg-extra .pg-i{ width: 18px; height: 18px; color: var(--blueprint); }
.ds-d .pg-loc{ display: flex; gap: 14px; padding: 20px 22px; }
.ds-d .pg-loc .pg-i{ width: 22px; height: 22px; margin-top: 2px; }
.ds-d .pg-loc-ok .pg-i{ color: var(--ok); }
.ds-d .pg-loc-warn .pg-i{ color: #B7791F; }
.ds-d .pg-loc-info .pg-i{ color: var(--blueprint); }
.ds-d .pg-loc h3{ margin: 0 0 6px; font-size: 1.05rem; }
.ds-d .pg-loc p{ margin: 0; font-size: .93rem; color: var(--ink-soft); line-height: 1.6; }
.ds-d .pg-facts{ display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); border: 1px solid var(--line); border-radius: var(--r-s); background: #fff; box-shadow: var(--sh-1); }
.ds-d .pg-fact{ display: grid; gap: 4px; padding: 22px 24px; align-content: start; }
.ds-d .pg-fact + .pg-fact{ border-left: 1px solid var(--line); }
.ds-d .pg-fact strong{ font-family: var(--font-display); font-size: 1.9rem; line-height: 1.05; letter-spacing: -.03em; color: var(--blueprint); }
.ds-d .pg-fact span{ font-size: .88rem; color: var(--ink-soft); }
.ds-d .pg-fact small{ font-size: .78rem; color: var(--stone); }

/* Bewertungen */
.ds-d .pg-revs{ display: grid; grid-template-columns: 280px minmax(0,1fr); gap: 20px; align-items: start; }
.ds-d .pg-rev-sum{ display: grid; justify-items: center; gap: 6px; padding: 30px 22px; text-align: center; box-shadow: var(--sh-2); }
.ds-d .pg-g-lg{ width: 44px; height: 44px; }
.ds-d .pg-g-lg svg{ width: 38px; height: 38px; }
.ds-d .pg-rev-score{ font-family: var(--font-display); font-size: 3rem; line-height: 1; letter-spacing: -.04em; }
.ds-d .pg-stars-lg{ font-size: 1.25rem; letter-spacing: 3px; }
.ds-d .pg-rev-count{ font-size: .9rem; color: var(--ink-soft); }
.ds-d .pg-rev-sum .btn{ margin-top: 12px; width: 100%; justify-content: center; }
.ds-d .pg-rev-list{ display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.ds-d .pg-rev{ display: flex; flex-direction: column; margin: 0; padding: 22px 22px 18px; }
.ds-d .pg-rev-top{ display: flex; justify-content: space-between; align-items: center; }
.ds-d .pg-rev blockquote{ margin: 12px 0 16px; font-size: .96rem; line-height: 1.62; color: var(--ink); }
.ds-d .pg-rev figcaption{ display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.ds-d .pg-rev figcaption > span:last-child{ display: grid; }
.ds-d .pg-rev figcaption strong{ font-size: .92rem; }
.ds-d .pg-rev figcaption small{ font-size: .76rem; color: var(--stone); }
.ds-d .pg-av{ width: 36px; height: 36px; border-radius: 50%; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .9rem; flex: none; }

/* Ablauf, Preis */
.ds-d .pg-steps{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.ds-d .pg-step{ position: relative; padding: 24px 22px 22px; }
.ds-d .pg-step-n{ display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--blueprint); color: #fff; font-weight: 700; font-size: .95rem; box-shadow: var(--edge); }
.ds-d .pg-step h3{ margin: 14px 0 6px; font-size: 1.08rem; }
.ds-d .pg-step p{ margin: 0; font-size: .93rem; color: var(--ink-soft); line-height: 1.6; }
.ds-d .pg-price{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; margin-top: 24px; padding: 24px 28px; border-radius: var(--r-l); color: #fff; background: linear-gradient(170deg, #27405F 0%, #16233A 100%); box-shadow: var(--edge), var(--sh-2); }
.ds-d .pg-price > div{ display: grid; gap: 4px; max-width: 640px; }
.ds-d .pg-price .pg-k{ color: rgba(255,255,255,.6); }
.ds-d .pg-price strong{ font-family: var(--font-display); font-size: 1.6rem; letter-spacing: -.02em; }
.ds-d .pg-price span{ color: rgba(255,255,255,.78); font-size: .92rem; line-height: 1.55; }
.ds-d .pg-price .btn-primary{ background: #fff; color: var(--blueprint); border-color: #fff; }

/* FAQ */
.ds-d .pg-faq{ display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 56px; align-items: start; }
.ds-d .pg-faq-head{ position: sticky; top: 110px; }
.ds-d .pg-faq-head h2{ margin-top: 14px; }
.ds-d .pg-faq-help{ display: grid; grid-template-columns: 44px 1fr; gap: 12px 14px; align-items: center; margin-top: 28px; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-s); background: #fff; box-shadow: var(--sh-1); }
.ds-d .pg-faq-help img{ width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
.ds-d .pg-faq-help p{ margin: 0; font-size: .92rem; color: var(--ink-soft); line-height: 1.5; }
.ds-d .pg-faq-help p strong{ display: block; color: var(--ink); }
.ds-d .pg-faq-help .btn{ grid-column: 1 / -1; justify-content: center; }
.ds-d .pg-tel{ grid-column: 1 / -1; text-align: center; font-size: .88rem; color: var(--blueprint); font-weight: 600; text-decoration: none; }
.ds-d .pg-faq-list{ margin: 0; }

/* Links, Chips */
.ds-d .pg-links-grp + .pg-links-grp{ margin-top: 26px; }
.ds-d .pg-links-grp .pg-k{ margin-bottom: 12px; }
.ds-d .pg-links-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.ds-d .pg-tags{ list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ds-d .pg-tags li{ padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: .86rem; color: var(--ink-soft); }

@media (max-width: 1000px){
  .ds-d .pg-hero-grid, .ds-d .pg-split, .ds-d .pg-local, .ds-d .pg-faq, .ds-d .pg-revs{ grid-template-columns: 1fr; gap: 36px; }
  .ds-d .pg-grid-3, .ds-d .pg-grid-4{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ds-d .pg-faq-head{ position: static; }
  .ds-d .pg-hero-aside{ max-width: 520px; }
}
@media (max-width: 640px){
  .ds-d .pg-hero{ padding: 20px 0 56px; }
  .ds-d .pg-crumbs ol{ margin-bottom: 20px; }
  .ds-d .pg-grid-2, .ds-d .pg-grid-3, .ds-d .pg-grid-4{ grid-template-columns: 1fr; gap: 14px; }
  .ds-d .pg-actions .btn{ width: 100%; justify-content: center; }
  .ds-d .pg-gline{ font-size: .82rem; }
  .ds-d .pg-card{ padding: 22px 20px; }
  .ds-d .pg-head{ margin-bottom: 28px; }
  .ds-d .pg-fact{ padding: 18px; }
  .ds-d .pg-fact + .pg-fact{ border-left: 0; border-top: 1px solid var(--line); }
  .ds-d .pg-fact strong{ font-size: 1.6rem; }
  .ds-d .pg-price{ padding: 22px 20px; }
  .ds-d .pg-price .btn{ width: 100%; justify-content: center; }
  .ds-d .pg-links-grid{ grid-template-columns: 1fr 1fr; gap: 8px; }
  .ds-d .pg-rev-list{ grid-template-columns: 1fr; }
}
.ds-d .pg-hero h1, .ds-d .pg-hero .eyebrow{ text-align: left; }
/* Rechtsrahmen-Karten der Stadtseiten im Designsystem D (hell, ohne Gold) */
.ds-d .pg-legal{ margin-top: 24px; }
.ds-d .pg-legal .legal-card{ background: #fff; border: 1px solid var(--line); border-radius: var(--r-s); box-shadow: var(--sh-1); }
.ds-d .pg-legal .legal-card .lc-ico{ background: #EDF1F6; color: var(--blueprint); border-radius: var(--r-s); }
.ds-d .pg-legal .lc-list svg, .ds-d .pg-legal .lc-list .dot{ color: var(--blueprint); }
.ds-d .pg-svc h3{ hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.ds-d .pg-legal .legal-card .lc-ico svg{ stroke: var(--blueprint); }
.ds-d .pg-legal .legal-card .lc-list li::before{ background-color: var(--blueprint); }
.ds-d .pg-legal .legal-card .lc-foot{ border-top-color: var(--line); }
/* Bewertungen im Hero der Leistungs- und Stadtseiten: wie auf der Startseite (Google + Portale) */
.ds-d .pg-hero-aside{ display: grid; gap: 16px; }
.ds-d .pg-hero-aside .hero-reviews{ margin: 0; }
.ds-d .pg-hero-main .hero-reviews{ margin: 28px 0 0; justify-content: flex-start; }
/* Stadtseiten: Bewertungen rechts im Hero, Ortskarte beim Immobilienmarkt, Anfrageformular */
.ds-d .pg-hero-aside .pm-row{ grid-template-columns: 1fr 1fr; }
.ds-d .pg-hero-aside .hr-google{ width: 100%; max-width: none; }
.ds-d .pg-market{ display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 24px; align-items: start; }
.ds-d .pg-market-side .pg-card{ box-shadow: var(--sh-1); }
.ds-d .pg-facts-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.ds-d .pg-facts-2 .pg-fact + .pg-fact{ border-left: 0; }
.ds-d .pg-facts-2 .pg-fact:nth-child(even){ border-left: 1px solid var(--line); }
.ds-d .pg-facts-2 .pg-fact:nth-child(n+3){ border-top: 1px solid var(--line); }
.ds-d .pg-formwrap{ display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 56px; align-items: start; }
.ds-d .pg-form-text h2{ margin-top: 14px; }
.ds-d .pg-form-points{ flex-direction: column; gap: 10px; margin-top: 22px; }
.ds-d .pg-form-text .pg-place-owner{ margin-top: 24px; }
.ds-d .pg-form-text .pg-place-owner a{ color: var(--blueprint); font-weight: 600; }
.ds-d .pg-form{ padding: 28px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--sh-2); }
.ds-d .pg-form .form-grid{ gap: 16px; }
.ds-d .pg-form .field label{ font-family: var(--font-body); font-size: .8rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); }
.ds-d .pg-form .field input, .ds-d .pg-form .field select, .ds-d .pg-form .field textarea{ border: 1px solid #C6CED6; border-radius: var(--r-s); background: #fff; font-family: var(--font-body); }
.ds-d .pg-form .field textarea{ min-height: 90px; }
.ds-d .pg-form .field input:focus, .ds-d .pg-form .field select:focus, .ds-d .pg-form .field textarea:focus{ border-color: var(--blueprint); box-shadow: 0 0 0 3px rgba(35,57,91,.12); outline: 0; }
.ds-d .pg-opt{ font-weight: 400; color: var(--stone); }
.ds-d .pg-form .form-consent{ font-size: .82rem; }
.ds-d .pg-form .form-consent a{ color: var(--blueprint); text-decoration: underline; }
.ds-d .pg-form .btn{ width: 100%; justify-content: center; margin-top: 20px; }
.ds-d .pg-form-note{ margin: 10px 0 0; text-align: center; font-size: .8rem; color: var(--stone); }
.ds-d .pg-form [data-form-status]{ margin: 12px 0 0; font-size: .88rem; }
@media (max-width: 1000px){ .ds-d .pg-market, .ds-d .pg-formwrap{ grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 640px){
  .ds-d .pg-form{ padding: 22px 18px; }
  .ds-d .pg-facts-2{ grid-template-columns: 1fr 1fr; }
  .ds-d .pg-facts-2 .pg-fact{ border-top: 0 !important; }
  .ds-d .pg-facts-2 .pg-fact:nth-child(n+3){ border-top: 1px solid var(--line) !important; }
}
.ds-d .pg-form .form-consent{ display: flex; gap: 10px; align-items: flex-start; font-weight: 400; color: var(--ink-soft); line-height: 1.5; }
.ds-d .pg-form .form-consent input{ width: 18px; height: 18px; min-height: 0; margin: 2px 0 0; padding: 0; flex: none; accent-color: var(--blueprint); }
.ds-d .pg-form-text .lede{ margin-top: 14px; }
.ds-d .pg-place-rows strong{ text-align: right; white-space: normal; }
.ds-d .pg-form .field label.form-consent{ display: flex; font-weight: 400; font-size: .82rem; color: var(--ink-soft); }
/* Problem → Lösung: klare Beschriftung */
.ds-d .pg-lbl{ display: inline-block; justify-self: start; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }
.ds-d .pg-lbl-q{ background: #FBF1DE; color: #8A5A0B; }
.ds-d .pg-lbl-a{ background: #E7F5EC; color: #17663A; margin-top: 4px; }
.ds-d .pg-prob .pg-prob-a{ padding-top: 0; border-top: 0; color: var(--ink); }
.ds-d .pg-prob .pg-lbl-a{ padding-top: 3px; }
.ds-d .pg-prob{ gap: 10px; }
.ds-d .pg-prob .pg-lbl-a{ position: relative; }
/* Grüner Schnell-Hinweis unter dem Ablauf: führt zum kleinen Anfrageformular */
.ds-d .pg-quick{ display: flex; align-items: center; gap: 12px; width: fit-content; max-width: 100%; margin: 22px auto 0; padding: 14px 20px; border-radius: 999px; background: #E7F5EC; border: 1px solid #BFE3CC; color: #17663A; text-decoration: none; font-size: .98rem; transition: background .2s, transform .2s, box-shadow .2s; }
.ds-d .pg-quick:hover{ background: #D6EFDF; transform: translateY(-1px); box-shadow: 0 10px 24px -16px rgba(23,102,58,.55); }
.ds-d .pg-quick .pg-i{ color: var(--ok); }
.ds-d .pg-quick strong{ color: #0F5130; }
.ds-d .pg-quick-go{ font-weight: 700; transition: transform .2s; }
.ds-d .pg-quick:hover .pg-quick-go{ transform: translateX(3px); }
@media (max-width: 640px){ .ds-d .pg-quick{ border-radius: var(--r-s); width: 100%; font-size: .92rem; } }
/* Kleine Google-Zeile unter dem Anfrage-Hinweis und im Formularbereich */
.ds-d .pg-quick-g{ display: flex; justify-content: center; margin-top: 10px; }
.ds-d .pg-quick-g .pg-gline, .ds-d .pg-form-g .pg-gline{ margin-top: 0; padding-top: 0; border-top: 0; font-size: .84rem; }
.ds-d .pg-form-g{ margin-top: 22px; }
/* Inhaber-Block: Google-Wertung unter den Punkten (alle Seiten) */
.ob-google{ display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 14px; font-size: .88rem; color: var(--ink-soft); text-decoration: none; }
.ob-google strong{ color: var(--ink); font-size: .98rem; }
.ob-google .ob-g{ width: 20px; height: 20px; display: inline-grid; place-items: center; }
.ob-google .ob-g svg{ width: 18px; height: 18px; }
.ob-google .ob-stars{ color: var(--star, #F5B301); letter-spacing: 1px; }
.ob-google:hover span:last-child{ color: var(--blueprint); text-decoration: underline; text-underline-offset: 3px; }
.ob-google{ margin: 16px 0 6px; }
.ds-d .pg-badges{ justify-content: flex-start; margin: 0 0 22px; }
/* Audit V8: Kontrast der Pfeile und Nummern */
.ds-d .pg-price .btn-primary .btn-arrow{ color: var(--blueprint); }
.ds-d .pg-legal .lc-foot .btn-primary .btn-arrow{ color: #fff; }
.ds-d .pg-num{ color: var(--stone); }

/* ==========================================================================
   TEIL 29b — ÜBERSICHTSSEITEN (Hausverwaltung, Leistungen, Bundesländer)
   Leistungszeilen (pg-row), Vergleich (pg-cmp), Tabelle mit Quelle (pg-table)
   ========================================================================== */
.ds-d .pg-rows{ display: grid; gap: 16px; }
.ds-d .pg-row{ display: grid; grid-template-columns: 64px minmax(0,1fr) 240px; gap: 28px; align-items: start; padding: 28px 30px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-s); box-shadow: var(--sh-1); scroll-margin-top: 110px; transition: border-color .2s, box-shadow .2s; }
.ds-d .pg-row:hover{ border-color: #C6CED6; box-shadow: 0 1px 0 rgba(17,24,32,.03), 0 22px 44px -28px rgba(17,24,32,.5); }
.ds-d .pg-row-side{ display: grid; justify-items: center; gap: 12px; }
.ds-d .pg-row-n{ font-size: .78rem; font-weight: 600; letter-spacing: .12em; color: var(--ink-soft); }
.ds-d .pg-row-body h3{ margin: 6px 0 8px; font-size: 1.3rem; }
.ds-d .pg-row-body h3 a{ color: inherit; text-decoration: none; }
.ds-d .pg-row-body h3 a:hover{ color: var(--blueprint); }
.ds-d .pg-row-body > p{ margin: 0; color: var(--ink-soft); font-size: .96rem; line-height: 1.65; max-width: 62ch; }
.ds-d .pg-row-pts{ list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px 20px; }
.ds-d .pg-row-pts li{ display: flex; gap: 8px; font-size: .92rem; color: var(--ink); line-height: 1.45; }
.ds-d .pg-row-pts .pg-i{ width: 18px; height: 18px; color: var(--ok); margin-top: 1px; }
.ds-d .pg-row-foot{ display: grid; gap: 14px; align-self: stretch; align-content: space-between; padding-left: 24px; border-left: 1px solid var(--line); }
.ds-d .pg-row-price{ display: grid; gap: 2px; font-weight: 600; color: var(--ink); font-size: 1rem; }
.ds-d .pg-row-price small{ font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--stone); }
.ds-d .pg-row-foot .btn{ justify-content: center; }

.ds-d .pg-cmp, .ds-d .pg-table{ background: #fff; border: 1px solid var(--line); border-radius: var(--r-s); box-shadow: var(--sh-1); overflow: hidden; }
.ds-d .pg-cmp table, .ds-d .pg-table table{ width: 100%; border-collapse: collapse; font-size: .95rem; }
.ds-d .pg-cmp th, .ds-d .pg-cmp td, .ds-d .pg-table th, .ds-d .pg-table td{ padding: 16px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); line-height: 1.5; }
.ds-d .pg-cmp tbody tr:last-child > *, .ds-d .pg-table tbody tr:last-child > *{ border-bottom: 0; }
.ds-d .pg-cmp thead th, .ds-d .pg-table thead th{ background: var(--bg-alt); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.ds-d .pg-cmp thead th:nth-child(2){ color: var(--blueprint); }
.ds-d .pg-cmp tbody th{ width: 24%; font-weight: 600; color: var(--ink); }
.ds-d .pg-cmp td{ color: var(--ink-soft); }
.ds-d .pg-table tbody th a{ font-weight: 600; color: var(--ink); text-decoration: none; }
.ds-d .pg-table tbody th a:hover{ color: var(--blueprint); text-decoration: underline; }
.ds-d .pg-table tbody th small{ display: block; font-weight: 400; font-size: .8rem; color: var(--stone); }
.ds-d .pg-table td{ font-variant-numeric: tabular-nums; color: var(--ink); }
.ds-d .pg-table .t-na{ color: var(--stone); }
.ds-d .pg-table tbody tr:hover > *{ background: #F7F9FB; }

@media (max-width: 1000px){
  .ds-d .pg-row{ grid-template-columns: 56px minmax(0,1fr); }
  .ds-d .pg-row-foot{ grid-column: 2; padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
}
@media (max-width: 640px){
  .ds-d .pg-row{ grid-template-columns: 1fr; gap: 14px; padding: 22px 20px; }
  .ds-d .pg-row-side{ display: flex; align-items: center; gap: 12px; }
  .ds-d .pg-row-foot{ grid-column: 1; }
  .ds-d .pg-row-foot .btn{ width: 100%; }
  .ds-d .pg-row-pts{ grid-template-columns: 1fr; }
  /* Tabellen werden auf dem Handy zu Karten: jede Zeile ein Block, Zellen mit Beschriftung */
  .ds-d .pg-cmp thead, .ds-d .pg-table thead{ display: none; }
  .ds-d .pg-cmp tr, .ds-d .pg-table tr{ display: block; padding: 14px 18px; border-bottom: 1px solid var(--line); }
  .ds-d .pg-cmp tbody tr:last-child, .ds-d .pg-table tbody tr:last-child{ border-bottom: 0; }
  .ds-d .pg-cmp th, .ds-d .pg-cmp td, .ds-d .pg-table th, .ds-d .pg-table td{ display: block; width: auto; padding: 4px 0; border: 0; }
  .ds-d .pg-cmp tbody th{ width: auto; padding-bottom: 8px; }
  .ds-d .pg-cmp td::before, .ds-d .pg-table td::before{ content: attr(data-l); display: block; font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--stone); margin-bottom: 2px; }
  .ds-d .pg-table tr{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 2px 12px; }
  .ds-d .pg-table tbody th{ grid-column: 1 / -1; padding-bottom: 6px; }
  .ds-d .pg-table td::before{ font-size: .6rem; letter-spacing: .1em; }
}

/* ==========================================================================
   TEIL 29c — ÜBER UNS (Porträt im Kopf, Geschichte mit Zitat, Kerngeschäft,
   Hervorhebungen, Werdegang)
   ========================================================================== */
.ds-d .pg-hero-g{ margin-top: 22px; }
.ds-d .pg-photo{ position: relative; margin: 0; max-width: 440px; margin-left: auto; }
.ds-d .pg-photo img{ display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 18%; border-radius: var(--r-l); box-shadow: var(--sh-2); }
.ds-d .pg-photo figcaption{ position: absolute; left: 16px; right: 16px; bottom: 16px; display: grid; gap: 2px; padding: 14px 18px; border-radius: var(--r-s); background: rgba(255,255,255,.94); backdrop-filter: blur(6px); box-shadow: var(--sh-1); }
.ds-d .pg-photo figcaption strong{ font-family: var(--font-display); font-size: 1.1rem; color: var(--ink); }
.ds-d .pg-photo figcaption span{ font-size: .88rem; color: var(--ink-soft); }
.ds-d .pg-photo-badge{ position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r-s); background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-2); color: var(--ink); text-decoration: none; font-size: .9rem; line-height: 1.2; }
.ds-d .pg-photo-badge small{ display: block; font-size: .76rem; color: var(--ink-soft); }
.ds-d .pg-photo-badge .pg-i{ color: var(--ok); }
.ds-d .pg-photo-g{ top: 22px; left: -34px; }
.ds-d .pg-photo-t{ top: 104px; right: -26px; }
.ds-d .pg-photo-g .pg-g svg{ width: 22px; height: 22px; }

.ds-d .pg-story{ display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: 56px; align-items: center; }
.ds-d .pg-story-side{ display: grid; gap: 18px; }
.ds-d .pg-story-p{ grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); }
.ds-d .pg-story-p .pg-story-side{ grid-template-columns: minmax(0,.62fr) minmax(0,1fr); align-items: end; }
.ds-d .pg-story-p .pg-quote-lead{ font-size: 1.1rem; }
.ds-d .pg-story-photo img{ display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 18%; border-radius: var(--r-l); box-shadow: var(--sh-2); }
.ds-d .pg-quote{ position: relative; margin: 0; padding: 34px 32px 26px; border-radius: var(--r-l); color: #fff; background: linear-gradient(170deg, #27405F 0%, #16233A 100%); box-shadow: var(--sh-2); }
.ds-d .pg-quote-mark{ position: absolute; top: 4px; right: 22px; font-family: Georgia, serif; font-size: 5rem; line-height: 1; color: rgba(255,255,255,.18); }
.ds-d .pg-quote blockquote{ margin: 0; }
.ds-d .pg-quote p{ margin: 0 0 14px; color: rgba(255,255,255,.82); line-height: 1.65; font-size: .96rem; }
.ds-d .pg-quote .pg-quote-lead{ font-family: var(--font-display); font-size: 1.22rem; line-height: 1.45; color: #fff; }
.ds-d .pg-quote figcaption{ display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.16); }
.ds-d .pg-quote figcaption img{ width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.ds-d .pg-quote figcaption span{ display: grid; }
.ds-d .pg-quote figcaption small{ color: rgba(255,255,255,.7); font-size: .82rem; }

.ds-d .pg-not{ list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.ds-d .pg-not li{ display: flex; gap: 10px; align-items: flex-start; font-size: .96rem; color: var(--ink); }
.ds-d .pg-not .pg-i{ width: 18px; height: 18px; color: #B4432F; margin-top: 2px; }

.ds-d .pg-spot{ display: flex; gap: 26px; padding: 30px 30px 28px; border-radius: var(--r-l); background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-1); color: var(--ink); text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .2s; }
.ds-d a.pg-spot:hover{ transform: translateY(-2px); border-color: #C6CED6; box-shadow: 0 22px 44px -28px rgba(17,24,32,.5); }
.ds-d .pg-spot-big{ flex: none; font-family: var(--font-display); font-size: 4.2rem; line-height: .9; letter-spacing: -.04em; color: var(--blueprint); }
.ds-d .pg-spot-big small{ font-size: 1.1rem; letter-spacing: 0; margin-left: 4px; }
.ds-d .pg-spot h3{ margin: 8px 0 10px; font-size: 1.2rem; line-height: 1.35; }
.ds-d .pg-spot p{ margin: 0; color: var(--ink-soft); font-size: .95rem; line-height: 1.65; }
.ds-d .pg-spot .pg-more{ display: inline-block; margin-top: 14px; }
.ds-d .pg-spot-dark{ color: #fff; border-color: transparent; background: linear-gradient(170deg, #27405F 0%, #16233A 100%); box-shadow: var(--sh-2); }
.ds-d .pg-spot-dark .pg-spot-big{ color: #fff; }
.ds-d .pg-spot-dark .pg-k{ color: rgba(255,255,255,.7); }
.ds-d .pg-spot-dark p{ color: rgba(255,255,255,.82); }
.ds-d .pg-spot-links{ display: block; margin-top: 14px; font-weight: 600; }
.ds-d .pg-spot-links a{ color: #fff; }

.ds-d .pg-tl{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; position: relative; }
.ds-d .pg-tl::before{ content: ""; position: absolute; left: 0; right: 0; top: 19px; height: 2px; background: var(--line); }
.ds-d .pg-tl-item{ position: relative; display: grid; gap: 16px; }
.ds-d .pg-tl-year{ justify-self: start; position: relative; padding: 8px 14px; border-radius: 999px; background: var(--blueprint); color: #fff; font-weight: 600; font-size: .9rem; letter-spacing: .04em; box-shadow: 0 0 0 6px var(--bg-alt); }
.ds-d .pg-sec:not(.section-alt) .pg-tl-year{ box-shadow: 0 0 0 6px #fff; }
.ds-d .pg-tl-item h3{ margin: 0 0 6px; font-size: 1.08rem; }
.ds-d .pg-tl-item p{ margin: 0; color: var(--ink-soft); font-size: .93rem; line-height: 1.6; }

@media (max-width: 1000px){
  .ds-d .pg-photo{ margin: 12px auto 0; max-width: 420px; }
  .ds-d .pg-story{ grid-template-columns: 1fr; gap: 32px; }
  .ds-d .pg-tl{ grid-template-columns: repeat(2, minmax(0,1fr)); row-gap: 32px; }
  .ds-d .pg-tl::before{ display: none; }
}
@media (max-width: 640px){
  .ds-d .pg-photo-g{ left: 10px; top: 12px; }
  .ds-d .pg-photo-t{ right: 10px; top: auto; bottom: 96px; }
  .ds-d .pg-story-p .pg-story-side{ grid-template-columns: 1fr; }
  .ds-d .pg-story-photo{ max-width: 320px; }
  .ds-d .pg-spot{ flex-direction: column; gap: 12px; padding: 24px 22px; }
  .ds-d .pg-spot-big{ font-size: 3.2rem; }
  .ds-d .pg-tl{ grid-template-columns: 1fr; gap: 0; padding-left: 0; }
  .ds-d .pg-tl-item{ grid-template-columns: 76px 1fr; gap: 14px; padding-bottom: 26px; }
  .ds-d .pg-tl-item::before{ content: ""; position: absolute; left: 30px; top: 36px; bottom: 0; width: 2px; background: var(--line); }
  .ds-d .pg-tl-item:last-child::before{ display: none; }
  .ds-d .pg-tl-year{ justify-self: stretch; text-align: center; padding: 8px 6px; align-self: start; }
  .ds-d .pg-quote{ padding: 28px 22px 22px; }
}

/* TEIL 29d — Über uns: persönliches Wort des Inhabers (Brief) */
.ds-d .pg-letter{ max-width: 780px; margin: 0 auto; padding: 44px 48px 36px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--sh-2); }
.ds-d .pg-letter-top{ display: flex; gap: 20px; align-items: center; margin-bottom: 26px; }
.ds-d .pg-letter-top img{ width: 72px; height: 72px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px #EDF1F6; }
.ds-d .pg-letter-top h2{ margin: 8px 0 0; font-size: clamp(1.5rem, 2.4vw, 2rem); }
.ds-d .pg-letter p{ margin: 0 0 16px; color: var(--ink-soft); line-height: 1.75; font-size: 1.02rem; }
.ds-d .pg-letter .pg-letter-lead{ font-family: var(--font-display); font-size: 1.3rem; line-height: 1.5; color: var(--ink); }
.ds-d .pg-letter-sign{ display: grid; gap: 2px; margin-top: 26px; }
.ds-d .pg-letter-name{ font-family: "Segoe Script", "Brush Script MT", cursive; font-size: 1.9rem; color: var(--blueprint); line-height: 1.2; }
.ds-d .pg-letter-sign span:last-child{ font-size: .88rem; color: var(--stone); }
.ds-d .pg-letter-foot{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.ds-d .pg-letter-foot .pg-tel{ font-weight: 600; color: var(--blueprint); text-decoration: none; }
@media (max-width: 640px){
  .ds-d .pg-letter{ padding: 28px 22px 24px; }
  .ds-d .pg-letter-top{ align-items: flex-start; }
  .ds-d .pg-letter-top img{ width: 56px; height: 56px; }
}
/* Über uns: kleineres Porträt, darunter die drei Versprechen (Wunsch des Inhabers) */
.ds-d .pg-photo{ max-width: 320px; }
.ds-d .pg-photo figcaption{ left: 12px; right: 12px; bottom: 12px; padding: 12px 16px; }
.ds-d .pg-photo-usps{ list-style: none; max-width: 320px; margin: 16px 0 0 auto; padding: 16px 18px; display: grid; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-s); box-shadow: var(--sh-1); }
.ds-d .pg-photo-usps li{ display: flex; gap: 12px; align-items: flex-start; font-size: .92rem; color: var(--ink-soft); line-height: 1.45; }
.ds-d .pg-photo-usps .pg-i{ color: var(--blueprint); margin-top: 1px; }
.ds-d .pg-photo-usps strong{ color: var(--ink); }
@media (max-width: 1000px){ .ds-d .pg-photo, .ds-d .pg-photo-usps{ margin-left: auto; margin-right: auto; } }

/* TEIL 29e — Über uns: Bildvarianten im Kopf (ph1 … ph5) */
.ds-d .ph-name{ display: block; font-family: var(--font-display); font-size: 1.25rem; color: var(--ink); letter-spacing: -.01em; }
.ds-d .ph-role{ display: block; font-size: .88rem; color: var(--ink-soft); margin-top: 2px; }
.ds-d .ph-usps{ list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 11px; text-align: left; }
.ds-d .ph-usps li{ display: flex; gap: 11px; align-items: flex-start; font-size: .92rem; color: var(--ink-soft); line-height: 1.45; }
.ds-d .ph-usps .pg-i{ color: var(--blueprint); margin-top: 1px; }
.ds-d .ph-usps strong{ color: var(--ink); }

/* 1 Visitenkarte */
.ds-d .ph1{ max-width: 340px; margin-left: auto; padding: 30px 28px 24px; text-align: center; background: #fff; border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--sh-2); }
.ds-d .ph1-img{ display: block; width: 132px; height: 132px; margin: 0 auto 16px; border-radius: 50%; object-fit: cover; object-position: 50% 14%; box-shadow: 0 0 0 5px #EDF1F6; }
.ds-d .ph1 .ph-usps{ padding-top: 18px; border-top: 1px solid var(--line); }
.ds-d .ph-tel{ display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-weight: 600; color: var(--blueprint); text-decoration: none; }

/* 2 Quer */
.ds-d .ph2{ display: grid; grid-template-columns: 132px 1fr; gap: 22px; align-items: start; padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--sh-2); }
.ds-d .ph2-img{ width: 132px; height: 170px; border-radius: var(--r-s); object-fit: cover; object-position: 50% 14%; }
.ds-d .ph2 .ph-usps{ margin-top: 14px; gap: 9px; }
.ds-d .ph2 .ph-usps li{ font-size: .88rem; }

/* 3 Dunkle Kontaktkarte */
.ds-d .ph3{ max-width: 340px; margin-left: auto; border-radius: var(--r-l); overflow: hidden; box-shadow: var(--sh-2); background: linear-gradient(170deg, #27405F 0%, #16233A 100%); }
.ds-d .ph3-img{ display: block; width: 100%; height: 240px; object-fit: cover; object-position: 50% 16%; }
.ds-d .ph3-body{ padding: 20px 24px 22px; }
.ds-d .ph3 .ph-name{ color: #fff; }
.ds-d .ph3 .ph-role{ color: rgba(255,255,255,.72); }
.ds-d .ph3 .ph-usps li{ color: rgba(255,255,255,.8); }
.ds-d .ph3 .ph-usps strong{ color: #fff; }
.ds-d .ph3 .ph-usps .pg-i{ color: #9FC2E8; }
.ds-d .ph3-links{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.ds-d .ph3-links a{ display: inline-flex; justify-content: center; align-items: center; gap: 8px; padding: 10px; border-radius: var(--r-s); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: #fff; font-weight: 600; font-size: .9rem; text-decoration: none; }
.ds-d .ph3-links a:hover{ background: rgba(255,255,255,.18); }

/* 4 Rund mit Ring und Unterschrift */
.ds-d .ph4{ max-width: 320px; margin-left: auto; text-align: center; }
.ds-d .ph4-ring{ width: 220px; height: 220px; margin: 0 auto 14px; padding: 8px; border-radius: 50%; background: conic-gradient(from 200deg, #27405F, #9FC2E8, #27405F); box-shadow: var(--sh-2); }
.ds-d .ph4-img{ width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 14%; border: 4px solid #fff; }
.ds-d .ph4-sign{ display: block; font-family: "Segoe Script", "Brush Script MT", cursive; font-size: 1.8rem; color: var(--blueprint); line-height: 1.2; }
.ds-d .ph4-usps{ margin-top: 20px; padding: 16px 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-s); box-shadow: var(--sh-1); }

/* 5 Bogen mit Kacheln */
.ds-d .ph5{ max-width: 340px; margin-left: auto; }
.ds-d .ph5-arch{ position: relative; border-radius: 170px 170px var(--r-l) var(--r-l); overflow: hidden; box-shadow: var(--sh-2); background: #EDF1F6; }
.ds-d .ph5-img{ display: block; width: 100%; height: 330px; object-fit: cover; object-position: 50% 14%; }
.ds-d .ph5-tag{ position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); white-space: nowrap; padding: 8px 16px; border-radius: 999px; background: rgba(255,255,255,.95); box-shadow: var(--sh-1); font-size: .9rem; color: var(--ink-soft); }
.ds-d .ph5-tag strong{ color: var(--ink); }
.ds-d .ph5-tiles{ list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ds-d .ph5-tiles li{ display: grid; justify-items: center; gap: 4px; padding: 12px 6px; text-align: center; background: #fff; border: 1px solid var(--line); border-radius: var(--r-s); box-shadow: var(--sh-1); }
.ds-d .ph5-tiles .pg-i{ color: var(--blueprint); }
.ds-d .ph5-tiles strong{ font-size: .88rem; color: var(--ink); }
.ds-d .ph5-tiles span{ font-size: .74rem; color: var(--ink-soft); }

@media (max-width: 1000px){ .ds-d .ph1, .ds-d .ph3, .ds-d .ph4, .ds-d .ph5{ margin-left: auto; margin-right: auto; } }
@media (max-width: 640px){ .ds-d .ph2{ grid-template-columns: 96px 1fr; gap: 16px; padding: 16px; } .ds-d .ph2-img{ width: 96px; height: 124px; } }
/* Bild 2 im Kopf: Karte darf etwas breiter sein als die Spalte */
@media (min-width: 1001px){ .ds-d .pg-hero-aside .ph2{ margin-right: -24px; } }
.ds-d .ph2{ grid-template-columns: 120px 1fr; }
.ds-d .ph2-img{ width: 120px; height: 160px; }
/* Bild 2: Geschäftsführung mit Kurzvorstellung, darunter die drei Versprechen */
.ds-d .ph2{ display: block; padding: 22px 22px 16px; }
.ds-d .ph2-top{ display: grid; grid-template-columns: 120px 1fr; gap: 20px; align-items: start; }
.ds-d .ph2-body .pg-k{ margin-bottom: 6px; }
.ds-d .ph2-bio{ margin: 12px 0 0; font-size: .9rem; line-height: 1.6; color: var(--ink-soft); }
.ds-d .ph2-usps{ list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 14px; }
.ds-d .ph2-usps li{ display: inline-flex; align-items: center; gap: 7px; font-size: .88rem; font-weight: 600; color: var(--ink); }
.ds-d .ph2-usps .pg-i{ width: 18px; height: 18px; color: var(--blueprint); }
@media (max-width: 640px){ .ds-d .ph2-top{ grid-template-columns: 96px 1fr; gap: 14px; } .ds-d .ph2-img{ width: 96px; height: 128px; } }

/* ==========================================================================
   TEIL 30 — ENDABNAHME 22.09.2026
   K6/W8: nichts ragt auf kleinen Handys über den Rand · W9: Kontrast · O5: Tippflächen
   ========================================================================== */
/* Orts-Kacheln: Spalten dürfen schrumpfen, die Fahrzeit bricht bei Platzmangel unter den Namen */
.ds-d .pg-links-grid{ grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); }
.ds-d .e15-chip{ min-width: 0; flex-wrap: wrap; row-gap: 2px; }
.ds-d .e15-chip > span{ min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 640px){
  .ds-d .pg-links-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-d .e15-chip{ flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }
}
/* Lange deutsche Wörter (z. B. „Sondereigentumsverwaltung“) dürfen umbrechen */
.ds-d h1, .ds-d h2, .ds-d h3, .ds-d .pg-price strong, .ds-d .pg-k{ overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
/* Footer auf sehr schmalen Handys */
@media (max-width: 380px){
  .fl-tag{ white-space: normal; text-align: left; line-height: 1.4; }
  .footer-lockup{ max-width: 100%; }
  .footer-contact, .footer-contact li, .footer-contact a{ min-width: 0; overflow-wrap: anywhere; }
  .footer-brand{ min-width: 0; }
}
/* Tippflächen im Footer: mindestens 24 px hoch (WCAG 2.2) */
.site-footer .footer-grid a, .site-footer .footer-bottom a{ display: inline-block; padding-block: 4px; }
/* Formular-Beschriftungen und Brotkrumen: ausreichender Kontrast */
.ds-d .field label, .ds-d .breadcrumb, .ds-d .breadcrumb a{ color: var(--ink-soft); }
/* Impressum und Datenschutz: ruhige Lesespalte */
.ds-d .legal-hero h1{ font-size: clamp(2rem, 4vw, 2.8rem); }
.ds-d .legal-body{ padding-top: 24px; }
.ds-d .legal-wrap{ max-width: 820px; display: grid; gap: 34px; }
.ds-d .legal-sec h2{ font-size: 1.3rem; margin: 0 0 12px; }
.ds-d .legal-sec p, .ds-d .legal-sec li{ color: var(--ink-soft); line-height: 1.75; margin: 0 0 10px; overflow-wrap: anywhere; }
.ds-d .legal-sec ul{ padding-left: 20px; margin: 0; }
.ds-d .legal-sec a{ color: var(--blueprint); }
.ds-d .legal-note{ padding: 16px 18px; border-left: 3px solid var(--blueprint); background: var(--bg-alt); border-radius: 0 var(--r-s) var(--r-s) 0; color: var(--ink); line-height: 1.7; }
/* Formulare: unsichtbares Spam-Feld, Datenschutz-Hinweis */
.hp-field{ position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.ds-d .form-privacy{ margin: 4px 0 0; font-size: .85rem; line-height: 1.55; color: var(--ink-soft); }
.ds-d .form-privacy a{ color: var(--blueprint); text-decoration: underline; }
/* Raster dürfen schmaler werden als ihr längstes Wort (sonst Überstand auf 320-px-Handys) */
@media (max-width: 1000px){
  .ds-d .pg-hero-grid, .ds-d .pg-split, .ds-d .pg-local, .ds-d .pg-faq, .ds-d .pg-revs, .ds-d .pg-market, .ds-d .pg-formwrap, .ds-d .pg-story{ grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px){
  .site-footer .footer-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid a, .footer-grid li, .footer-brand p{ overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; }
  .ds-d .faq-item summary{ min-width: 0; overflow-wrap: anywhere; }
}
/* Über uns, Bildkarte: Textspalte darf schrumpfen */
.ds-d .ph2-top{ grid-template-columns: 120px minmax(0, 1fr); }
.ds-d .ph2-body .pg-k{ letter-spacing: .12em; overflow-wrap: anywhere; }
@media (max-width: 640px){ .ds-d .ph2{ padding: 16px; } .ds-d .ph2-top{ grid-template-columns: 88px minmax(0, 1fr); gap: 14px; } .ds-d .ph2-img{ width: 88px; height: 118px; } }
/* Startseite „Unser Hauptgeschäft“: Spalten dürfen auf 320-px-Handys schrumpfen (nur CSS, Inhalt unverändert) */
@media (max-width: 1000px){ .ds-d .fx-n2{ grid-template-columns: minmax(0, 1fr); } .ds-d .fx-n2 > *{ min-width: 0; } }
/* Hinweis-Kasten unter Karten (z. B. Tipp bei den Warnsignalen) */
.ds-d .pg-tip{ display: flex; gap: 12px; align-items: flex-start; margin-top: 20px; padding: 16px 20px; border-radius: var(--r-s); background: #FFF8E6; border: 1px solid #F1DFA8; }
.ds-d .pg-tip .pg-i{ color: #9A6B00; margin-top: 2px; }
.ds-d .pg-tip p{ margin: 0; color: var(--ink); font-size: .95rem; line-height: 1.6; }

/* ==========================================================================
   TEIL 31 — PREISSTUFEN (Leistung in jeder Größe gleich)
   ========================================================================== */
.ds-d .ps-grid{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ds-d .ps-card{ position: relative; display: grid; gap: 10px; align-content: start; padding: 26px 22px 22px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--sh-1); }
.ds-d .ps-card.ps-hi{ border-color: var(--blueprint); box-shadow: var(--sh-2); }
.ds-d .ps-badge{ position: absolute; top: -12px; left: 22px; padding: 4px 12px; border-radius: 999px; background: var(--blueprint); color: #fff; font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.ds-d .ps-units{ font-family: var(--font-display); font-size: 1.25rem; color: var(--ink); }
.ds-d .ps-price{ display: grid; gap: 2px; margin: 4px 0 8px; }
.ds-d .ps-price b{ font-family: var(--font-display); font-size: 2.6rem; font-weight: 700; color: var(--blueprint); letter-spacing: -.02em; line-height: 1; }
.ds-d .ps-price small{ font-size: .85rem; color: var(--ink-soft); }
.ds-d .ps-card .btn{ justify-content: center; }
.ds-d .ps-inkl{ margin-top: 20px; padding: 24px 26px; background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--r-l); }
.ds-d .ps-list{ list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 24px; }
.ds-d .ps-list li{ display: flex; gap: 10px; font-size: .95rem; color: var(--ink); line-height: 1.45; }
.ds-d .ps-list .pg-i{ width: 18px; height: 18px; color: var(--ok); margin-top: 1px; }
/* Variante 2: Preisleiste */
.ds-d .pb-wrap{ display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.ds-d .pb-bar{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: #fff; border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--sh-1); }
.ds-d .pb-col{ position: relative; display: grid; gap: 6px; align-content: center; justify-items: center; padding: 34px 12px 26px; text-align: center; color: var(--ink); text-decoration: none; transition: background .2s; }
.ds-d .pb-col + .pb-col{ border-left: 1px solid var(--line); }
.ds-d .pb-col:hover{ background: #F7F9FB; }
.ds-d .pb-col.pb-hi{ background: linear-gradient(170deg, #27405F 0%, #16233A 100%); color: #fff; border-radius: var(--r-s); margin: -8px 0; box-shadow: var(--sh-2); z-index: 1; }
.ds-d .pb-col .ps-badge{ left: 50%; transform: translateX(-50%); white-space: nowrap; background: #fff; color: var(--blueprint); border: 1px solid var(--line); }
.ds-d .pb-units{ font-weight: 600; font-size: .95rem; }
.ds-d .pb-price{ font-family: var(--font-display); font-size: 2.4rem; letter-spacing: -.02em; line-height: 1.05; color: var(--blueprint); }
.ds-d .pb-hi .pb-price{ color: #fff; }
.ds-d .pb-col small{ font-size: .8rem; color: var(--ink-soft); }
.ds-d .pb-hi small{ color: rgba(255,255,255,.75); }
.ds-d .pb-go{ margin-top: 8px; font-size: .85rem; font-weight: 600; color: var(--blueprint); }
.ds-d .pb-hi .pb-go{ color: #fff; }
.ds-d .pb-inkl{ display: grid; gap: 14px; align-content: start; padding: 24px 26px; background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--r-l); }
.ds-d .ps-list-1{ grid-template-columns: 1fr; gap: 9px; margin: 0; }
.ds-d .pb-inkl .btn{ justify-self: start; }
@media (max-width: 1000px){
  .ds-d .ps-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; }
  .ds-d .ps-list{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-d .pb-wrap{ grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px){
  .ds-d .ps-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; row-gap: 20px; }
  .ds-d .ps-card{ padding: 22px 14px 16px; }
  .ds-d .ps-price b{ font-size: 2rem; }
  .ds-d .ps-units{ font-size: 1.02rem; }
  .ds-d .ps-card .btn{ padding-inline: 8px; font-size: .88rem; }
  .ds-d .ps-list{ grid-template-columns: minmax(0, 1fr); }
  .ds-d .pb-bar{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-d .pb-col:nth-child(3){ border-left: 0; }
  .ds-d .pb-col:nth-child(n+3){ border-top: 1px solid var(--line); }
  .ds-d .pb-col.pb-hi{ margin: 0; }
  .ds-d .pb-price{ font-size: 2rem; }
}
.ds-d .pb-wrap{ align-items: center; }
.ds-d .pb-go{ white-space: nowrap; font-size: .8rem; }
/* Schwerpunkt-Hinweis unter den Preisstufen */
.ds-d .ps-fokus{ display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; margin-top: 16px; padding: 20px 24px; border-radius: var(--r-l); color: #fff; background: linear-gradient(170deg, #27405F 0%, #16233A 100%); box-shadow: var(--sh-2); }
.ds-d .ps-fokus-ico{ width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--r-s); background: rgba(255,255,255,.1); }
.ds-d .ps-fokus-ico .pg-i{ width: 24px; height: 24px; color: #fff; }
.ds-d .ps-fokus strong{ font-family: var(--font-display); font-size: 1.12rem; }
.ds-d .ps-fokus p{ margin: 4px 0 0; color: rgba(255,255,255,.8); font-size: .94rem; line-height: 1.55; }
.ds-d .ps-fokus-tags{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.ds-d .ps-fokus-tags li{ padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); font-size: .8rem; font-weight: 600; white-space: nowrap; }
@media (max-width: 1000px){ .ds-d .ps-fokus{ grid-template-columns: auto minmax(0, 1fr); } .ds-d .ps-fokus-tags{ grid-column: 1 / -1; justify-content: flex-start; } }
@media (max-width: 640px){ .ds-d .ps-fokus{ grid-template-columns: minmax(0, 1fr); padding: 20px; } }
/* Preisleiste: Google-Bewertung direkt unter den vier Größen */
.ds-d .pb-left{ display: grid; gap: 18px; }
.ds-d .pb-google{ display: flex; justify-content: center; }
.ds-d .pb-google .pg-gline{ flex-wrap: wrap; justify-content: center; }
/* Lichtstrahl: nie von „max-width: 100 %“ beschnitten (sonst fehlt beim äußeren Strahl rechts ein Stück) */
.ds-d svg.beam{ max-width: none !important; max-height: none !important; }

/* ==========================================================================
   TEIL 32 — KONTAKTSEITE
   ========================================================================== */
.ds-d .pg-mini-link{ text-decoration: none; color: inherit; transition: border-color .2s, transform .2s; }
.ds-d .pg-mini-link:hover{ border-color: var(--blueprint); transform: translateY(-1px); }
.ds-d .kt-wrap{ align-items: start; }
.ds-d .kt-side{ display: grid; gap: 16px; padding: 26px 28px; border-radius: var(--r-l); color: #fff; background: linear-gradient(170deg, #27405F 0%, #16233A 100%); box-shadow: var(--sh-2); }
.ds-d .kt-side .pg-k{ color: rgba(255,255,255,.65); }
.ds-d .kt-owner{ display: flex; align-items: center; gap: 12px; }
.ds-d .kt-owner img{ width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.ds-d .kt-owner span{ display: grid; }
.ds-d .kt-owner strong{ font-family: var(--font-display); font-size: 1.08rem; }
.ds-d .kt-owner small{ font-size: .85rem; color: rgba(255,255,255,.7); }
.ds-d .kt-list{ list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid rgba(255,255,255,.16); display: grid; gap: 10px; }
.ds-d .kt-list a{ display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-s); background: rgba(255,255,255,.08); color: #fff; text-decoration: none; transition: background .2s; }
.ds-d .kt-list a:hover{ background: rgba(255,255,255,.16); }
.ds-d .kt-list .pg-i{ color: #9FC2E8; }
.ds-d .kt-list span{ display: grid; font-weight: 600; font-size: .95rem; overflow-wrap: anywhere; }
.ds-d .kt-list small{ font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.ds-d .kt-note{ display: flex; gap: 10px; margin: 0; font-size: .9rem; color: rgba(255,255,255,.82); line-height: 1.55; }
.ds-d .kt-note .pg-i{ color: #9FC2E8; }
.ds-d .kt-google .pg-gline{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #fff; }
.ds-d .kt-google .pg-gline span{ color: rgba(255,255,255,.8); }
.ds-d .kt-google .pg-gline strong{ color: #fff; }
@media (max-width: 1000px){ .ds-d .kt-side{ padding: 22px; } }
.ds-d .kt-two{ display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 24px; align-items: start; }
@media (max-width: 1000px){ .ds-d .kt-two{ grid-template-columns: minmax(0, 1fr); } }