@charset "UTF-8";
/* ==========================================================================
   Wahlo — Design System
   Colours & type from the Wahlo Markenrichtlinien 2026.
   Interaction rule: primary = navy, hover = green.
   ========================================================================== */

/* ---------- Self-hosted Poppins (no Google CDN — DSGVO) ---------- */
@font-face{font-family:Poppins;font-style:normal;font-weight:300;font-display:swap;src:url(fonts/poppins-300.woff2) format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url(fonts/poppins-400.woff2) format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;src:url(fonts/poppins-500.woff2) format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url(fonts/poppins-600.woff2) format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;src:url(fonts/poppins-700.woff2) format("woff2")}

:root{
  /* Brand — Werte aus logo.svg und den Icon-Dateien */
  --navy:#002377;          /* Icon-Navy   — 14.1:1 auf Weiß */
  --navy-700:#001B5C;
  --navy-900:#001240;
  --navy-50:rgba(0,35,119,.06);
  --navy-100:rgba(0,35,119,.12);

  /* Green — 500 = Markengrün aus den Icons, 700 = klein genug lesbar auf Weiß */
  --green-400:#3FC46A;
  --green-500:#089A38;     /* Marken-Grün — 3.7:1, gut für Flächen und große Schrift */
  --green-600:#07822F;
  --green-700:#066526;     /* 5.6:1 auf Weiß — für kleine grüne Schrift */
  --green-50:rgba(8,154,56,.07);
  --green-100:rgba(8,154,56,.13);

  --white:#fff;
  --tertiary:#F3F4F6;
  --text:#111827;
  --muted:#63697A;
  --border:#E5E7EB;
  --danger:#DC2626;

  /* Semantic */
  --color-primary:var(--navy);
  --color-accent:var(--green-500);
  --color-accent-text:var(--green-700);

  --font:Poppins,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --fw-light:300;--fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;

  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;
  --space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--space-10:128px;

  --container:1180px;
  --radius-sm:8px;--radius-md:14px;--radius-lg:20px;--radius-xl:28px;--radius-full:999px;

  --shadow-sm:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08);
  --shadow-md:0 4px 12px rgba(16,24,40,.08),0 2px 4px rgba(16,24,40,.06);
  --shadow-lg:0 20px 48px rgba(16,24,40,.14);
  --shadow-card:0 24px 60px rgba(16,24,40,.12),0 4px 12px rgba(16,24,40,.06);

  /* Motion */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --dur-fast:150ms;--dur-base:300ms;--dur-slow:600ms;
  --transition:180ms ease;

  --header-h:74px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
/* ponytail: clip statt hidden — die ausgeblendete Mobil-Navigation steht per
   transform rechts ausserhalb und blaehte die Seitenbreite um ~320px auf.
   `clip` statt `hidden`: overflow auf html/body schneidet position:fixed NICHT ab,
   `clip` schon — und es macht (anders als hidden) den body nicht zum Scroll-Container. */
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px);-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;font-family:var(--font);font-weight:var(--fw-light);
  color:var(--text);background:var(--white);line-height:1.65;
  -webkit-font-smoothing:antialiased;
  /* ponytail: KEIN overflow-x:hidden hier. Das laesst overflow-y zu auto werden,
     macht body zum Scroll-Container — dann scrollt das Fenster nicht mehr, der
     IntersectionObserver feuert nie und alle .reveal bleiben unsichtbar.
     Das Abschneiden erledigt html{overflow-x:clip}. */
}
img{max-width:100%;display:block}
img:not([width]):not([height]){height:auto}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:16px}
table{border-collapse:collapse;width:100%}

h1,h2,h3,h4,h5{font-weight:var(--fw-bold);color:var(--navy);margin:0 0 var(--space-3);line-height:1.18;letter-spacing:-.015em}
h1{font-size:clamp(2rem,1.4rem + 2.9vw,3.4rem)}
h2{font-size:clamp(1.55rem,1.25rem + 1.4vw,2.3rem)}
h3{font-size:clamp(1.15rem,1.05rem + .45vw,1.4rem);font-weight:var(--fw-semibold)}
h4{font-size:1.05rem;font-weight:var(--fw-semibold)}
p{margin:0 0 var(--space-4);font-weight:var(--fw-light)}
strong,b{font-weight:var(--fw-semibold)}

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

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:max(var(--space-5),env(safe-area-inset-left))}
.container--narrow{max-width:760px}
.section{padding-block:clamp(48px,7vw,96px)}
.section--tight{padding-block:clamp(32px,4vw,56px)}
.text-center{text-align:center}
.bg-tertiary{background:var(--tertiary)}
.bg-mint{background:var(--green-50)}
.lead{font-size:clamp(1rem,.95rem + .3vw,1.15rem);color:var(--muted);max-width:62ch}
.muted{color:var(--muted)}

.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--navy);color:#fff;padding:12px 20px;border-radius:0 0 var(--radius-sm) 0}
.skip-link:focus{left:0}

.eyebrow{
  display:inline-block;font-weight:var(--fw-semibold);color:var(--green-700);
  letter-spacing:.08em;text-transform:uppercase;font-size:.78rem;margin-bottom:var(--space-2);
}
.h-accent::after{content:"";display:block;width:64px;height:4px;margin:var(--space-3) 0 0;background:var(--green-500);border-radius:2px}
.text-center .h-accent::after,.h-accent.is-centered::after{margin-inline:auto}

/* ==========================================================================
   Icons — navy by default, green on hover (inherits currentColor)
   ========================================================================== */
.icon{display:block;flex:none;color:currentColor;transition:color var(--dur-base) var(--ease-out)}
/* Marken-Icons aus den .svg-Dateien: Navy ist currentColor (wechselt beim Hover),
   die grünen Akzente bleiben fest. Sie sind flächig, nicht als Linien gezeichnet. */
.icon--brand{overflow:visible}
.icon--brand path,.icon--brand circle,.icon--brand rect,.icon--brand polygon{
  transition:fill var(--dur-base) var(--ease-out);
}
.icon-circle{
  width:56px;height:56px;border-radius:50%;background:var(--navy-50);
  display:grid;place-items:center;color:var(--navy);
  transition:background var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out);
}
.icon-circle--sm{width:44px;height:44px}
a:hover .icon-circle,button:hover .icon-circle,.card:hover .icon-circle,
.service-option:hover .icon-circle{background:var(--green-100);color:var(--green-700)}

/* ==========================================================================
   Buttons — navy fill, green fill on hover
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  font-weight:var(--fw-semibold);font-size:1rem;padding:15px 28px;
  border-radius:var(--radius-full);border:2px solid transparent;
  transition:background var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out),transform var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out);
  text-align:center;line-height:1.3;
}
.btn .icon{width:20px;height:20px}
.btn--primary{background:var(--navy);color:#fff;box-shadow:var(--shadow-sm)}
.btn--primary:hover{background:var(--green-700);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.btn--primary:active{transform:translateY(0)}

.btn--outline{background:transparent;border-color:var(--navy);color:var(--navy)}
.btn--outline:hover{background:var(--green-700);border-color:var(--green-700);color:#fff;transform:translateY(-2px)}

.btn--ghost{background:var(--navy-50);color:var(--navy)}
.btn--ghost:hover{background:var(--green-700);color:#fff}

.btn--white{background:#fff;color:var(--navy)}
.btn--white:hover{background:var(--green-700);color:#fff;transform:translateY(-2px)}

.btn--block{width:100%}
.btn--lg{padding:18px 32px;font-size:1.06rem}
.btn--split{justify-content:space-between}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:sticky;top:0;z-index:100;background:#fff;
  /* ponytail: KEIN backdrop-filter. Es macht den Header zum containing block fuer
     position:fixed-Kinder — die Mobil-Navigation lag dann im Header (74px hoch)
     statt im Viewport und war praktisch unsichtbar. */
  border-bottom:1px solid transparent;
  transition:box-shadow var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out);
}
.site-header.is-scrolled{box-shadow:0 2px 14px rgba(16,24,40,.08);border-bottom-color:var(--border)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:var(--header-h)}
.logo img{height:clamp(34px,4vw,44px);width:auto}
.main-nav{display:flex;align-items:center;gap:var(--space-6)}
.main-nav a{font-weight:var(--fw-medium);color:var(--navy);font-size:.97rem;position:relative;padding:6px 0;transition:color var(--dur-base) var(--ease-out)}
.main-nav a:hover,.main-nav a.is-active{color:var(--green-700)}
.main-nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--green-500);
  border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform var(--dur-base) var(--ease-out);
}
.main-nav a:hover::after,.main-nav a.is-active::after{transform:scaleX(1)}
.header-actions{display:flex;align-items:center;gap:var(--space-3)}
.icon-btn{
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  border:2px solid var(--navy);color:var(--navy);
  transition:background var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out);
}
.icon-btn:hover{background:var(--green-700);border-color:var(--green-700);color:#fff}
.hamburger{display:none;width:44px;height:44px;place-items:center;color:var(--navy);border-radius:var(--radius-sm)}
.hamburger:hover{color:var(--green-700)}
.hamburger .icon{width:26px;height:26px}
.nav-backdrop{position:fixed;inset:0;background:rgba(15,31,82,.4);opacity:0;pointer-events:none;transition:opacity var(--dur-base) var(--ease-out);z-index:98}
.nav-backdrop.is-open{opacity:1;pointer-events:auto}

/* ==========================================================================
   Hero — full-bleed image with a left fade mask, per the approved design
   ========================================================================== */
/* Foto liegt als eigene Ebene rechts oben und blendet diagonal in Weiß aus.
   Die Textspalte liegt darüber, das Formular überlappt das Foto unten. */
.hero{
  background:var(--white);position:relative;overflow:hidden;isolation:isolate;
  padding-block:clamp(24px,3vw,44px) clamp(40px,6vw,88px);
}
.hero__photo{
  position:absolute;top:0;right:0;z-index:0;pointer-events:none;
  width:min(64%,880px);
  height:clamp(360px,38vw,520px);
}
.hero__photo img{
  width:100%;height:100%;object-fit:cover;object-position:46% 34%;
  /* Diagonale Weiß-Blende: unten links weich auslaufend Richtung oben rechts */
  -webkit-mask-image:linear-gradient(107deg,transparent 4%,rgba(0,0,0,.18) 16%,rgba(0,0,0,.72) 32%,#000 52%),
                     linear-gradient(to top,transparent 0,rgba(0,0,0,.55) 9%,#000 26%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(107deg,transparent 4%,rgba(0,0,0,.18) 16%,rgba(0,0,0,.72) 32%,#000 52%),
                     linear-gradient(to top,transparent 0,rgba(0,0,0,.55) 9%,#000 26%);
          mask-composite:intersect;
}
.hero .container{position:relative;z-index:1}
.hero__copy{max-width:min(640px,56%);padding-block:clamp(10px,1.4vw,18px) clamp(14px,2vw,22px)}

.hero__title{margin-bottom:var(--space-4);font-weight:var(--fw-bold);line-height:1.1}
/* Hervorhebung im Fliesstext. green-700 statt green-500, weil kleiner Text
   nach WCAG AA 4.5:1 braucht — green-500 schafft auf Weiss nur 3.7:1.
   In der grossen H1 bleibt green-500: fuer grosse Schrift genuegen 3:1. */
.accent{color:var(--green-700)}
.hero__title .accent{color:var(--green-500)}
.hero__lead{font-size:clamp(1.02rem,.96rem + .35vw,1.2rem);color:var(--muted);max-width:32ch;font-weight:var(--fw-light)}

.trust-pill{
  display:inline-flex;align-items:center;gap:var(--space-3);background:#fff;
  border:1px solid var(--border);border-radius:var(--radius-full);padding:10px 22px 10px 12px;
  box-shadow:var(--shadow-sm);margin-top:var(--space-5);font-size:.87rem;
  color:var(--navy);font-weight:var(--fw-medium);letter-spacing:.02em;
}
.trust-pill strong{color:var(--green-700);font-weight:var(--fw-bold)}
.trust-pill .badge-icon{
  width:30px;height:30px;border-radius:50%;background:var(--green-100);
  display:grid;place-items:center;color:var(--green-600);flex:none;
}
.trust-pill .badge-icon .icon{width:17px;height:17px}

/* ---------- Request card (overlaps the hero photo) ---------- */
.request-card{
  background:#fff;border-radius:var(--radius-xl);box-shadow:var(--shadow-card);
  padding:clamp(20px,2.4vw,30px);position:relative;z-index:5;
}
.request-card h2,.request-card h3{margin-bottom:var(--space-4);font-size:clamp(1.15rem,1rem + .6vw,1.55rem)}
/* ponytail: immer 3 in einer Reihe — auch auf dem Handy. */
.service-options{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);margin-bottom:var(--space-5)}
.service-option{
  position:relative;border:1.5px solid var(--border);border-radius:var(--radius-md);
  padding:var(--space-4) 6px;text-align:center;background:#fff;
  transition:border-color var(--dur-base) var(--ease-out),background var(--dur-base) var(--ease-out),
             transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-base) var(--ease-out);
}
.service-option .icon{width:34px;height:34px;margin:0 auto var(--space-2);color:var(--navy);transition:color var(--dur-base) var(--ease-out)}
.service-option__label{
  display:block;font-weight:var(--fw-semibold);color:var(--navy);
  /* ponytail: nowrap + mitwachsende Groesse — "Küchenmontage" darf nie umbrechen. */
  font-size:clamp(.66rem,2.9vw,.98rem);white-space:nowrap;letter-spacing:-.01em;
  transition:color var(--dur-base) var(--ease-out);
}
.service-option:hover{border-color:var(--green-400);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.service-option:hover .icon,.service-option:hover .service-option__label{color:var(--green-700)}
.service-option input{position:absolute;opacity:0;width:1px;height:1px}
.service-option:has(input:checked){border-color:var(--green-500);border-width:2px;background:var(--green-50)}
.service-option:has(input:checked) .icon,.service-option:has(input:checked) .service-option__label{color:var(--green-700)}
.service-option:has(input:focus-visible){outline:3px solid var(--green-600);outline-offset:2px}

.field-label{display:block;font-weight:var(--fw-semibold);color:var(--navy);margin-bottom:var(--space-2);font-size:.95rem}
.input-with-icon{position:relative;margin-bottom:var(--space-4)}
.input-with-icon .icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--navy);pointer-events:none}
.input-with-icon input{
  width:100%;padding:16px 16px 16px 48px;border:1.5px solid var(--border);
  border-radius:var(--radius-md);background:#fff;color:var(--text);outline:none;
  transition:border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out);
}
.input-with-icon input::placeholder{color:#9CA3AF}
.input-with-icon input:focus{border-color:var(--green-500);box-shadow:0 0 0 4px var(--green-100)}
.input-with-icon.has-error input{border-color:var(--danger)}

/* Step 2 of the request form */
.form-step2{display:none;margin-top:var(--space-2)}
.form-step2.is-open{display:block;animation:slideDown var(--dur-base) var(--ease-out)}
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* ---------- Trust strip ---------- */
.trust-strip{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3);
  margin-top:var(--space-6);padding-top:var(--space-6);border-top:1px solid var(--border);
}
.trust-strip__item{text-align:center;padding-inline:var(--space-2);position:relative}
.trust-strip__item + .trust-strip__item::before{
  content:"";position:absolute;left:0;top:8px;bottom:8px;width:1px;background:var(--border);
}
.trust-strip__item .icon{width:32px;height:32px;margin:0 auto var(--space-2);color:var(--navy);transition:color var(--dur-base) var(--ease-out)}
.trust-strip__item:hover .icon{color:var(--green-600)}
.trust-strip__item strong{display:block;color:var(--green-700);font-weight:var(--fw-bold);font-size:.95rem;line-height:1.3}
.trust-strip__item span{display:block;color:var(--navy);font-weight:var(--fw-regular);font-size:.88rem;line-height:1.3}

/* ==========================================================================
   "So funktioniert Wahlo" — mint panel with 5 steps
   ========================================================================== */
.how{padding-block:clamp(32px,5vw,64px)}
.how__panel{background:var(--green-50);border-radius:var(--radius-xl);padding:clamp(28px,5vw,64px) clamp(20px,4vw,48px)}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-4);margin-top:var(--space-7)}
.step{text-align:center;position:relative}
.step + .step::before{
  content:"";position:absolute;left:calc(-1 * var(--space-4) / 2);top:52px;width:9px;height:9px;
  border-top:2px solid #C7D2E4;border-right:2px solid #C7D2E4;
  transform:translateX(-50%) rotate(45deg);
}
.step__icon{
  position:relative;width:104px;height:104px;border-radius:50%;background:#fff;
  display:grid;place-items:center;margin:0 auto var(--space-4);
  box-shadow:0 4px 16px rgba(30,58,138,.08);
  transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out);
}
.step:hover .step__icon{transform:translateY(-4px);box-shadow:0 10px 26px rgba(30,58,138,.14)}
.step__icon .icon{width:44px;height:44px;color:var(--navy);transition:color var(--dur-base) var(--ease-out)}
.step:hover .step__icon .icon{color:var(--green-600)}
.step__num{
  position:absolute;top:-2px;left:-2px;width:32px;height:32px;border-radius:50%;
  background:var(--green-500);color:#fff;display:grid;place-items:center;
  font-weight:var(--fw-bold);font-size:.92rem;box-shadow:0 0 0 4px var(--green-50);
}
.step h3{font-size:1rem;margin-bottom:var(--space-2);font-weight:var(--fw-semibold)}
.step p{font-size:.88rem;color:var(--muted);margin:0}

/* ==========================================================================
   Cards & grids
   ========================================================================== */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-5)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4)}
/* ponytail: Grid-Kinder haben per Default min-width:auto — die 640px breite
   Preistabelle sprengte damit die Spalte und die ganze Seite. */
.grid-2>*,.grid-3>*,.grid-4>*{min-width:0}
.card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:clamp(20px,3vw,32px);
  transition:box-shadow var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out);
}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px);border-color:#D9DEE7}
.card h3{margin-bottom:var(--space-2)}
.card p{color:var(--muted);font-size:.95rem}
.card .icon-circle{margin-bottom:var(--space-4)}
.card .icon-circle .icon{width:26px;height:26px}
.card--flat:hover{transform:none;box-shadow:none}

.check-list li{display:flex;gap:var(--space-3);align-items:flex-start;font-size:.94rem;color:var(--muted);margin-bottom:var(--space-3)}
.check-list .icon{width:18px;height:18px;color:var(--green-600);margin-top:3px;flex:none}

.pill-list{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.pill-list li,.pill{
  background:var(--navy-50);color:var(--navy);border-radius:var(--radius-full);
  padding:6px 14px;font-size:.85rem;font-weight:var(--fw-medium);
  transition:background var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out);
}
a.pill:hover,.pill-list a:hover{background:var(--green-700);color:#fff}

/* ---------- Page hero (inner pages) — photo background + navy overlay ---------- */
.page-hero{
  position:relative;overflow:hidden;color:#fff;
  padding-block:clamp(52px,7vw,88px);
  background:var(--navy) url("img/bg-1920.jpg") center 42% / cover no-repeat;
  background-attachment:scroll;
  /* Inline gesetzte Seitenbilder erben Position und Groesse hierueber. */
  background-size:cover;background-position:center 42%;background-repeat:no-repeat;
}
/* Overlay: deep navy on the left where the text sits, lighter on the right so the
   photo stays visible. Two layers — colour wash + vertical depth. */
.page-hero::before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(100deg,
      rgba(15,31,82,.94) 0%,
      rgba(23,45,116,.88) 38%,
      rgba(30,58,138,.72) 66%,
      rgba(30,58,138,.58) 100%),
    linear-gradient(to bottom, rgba(15,31,82,.35) 0%, rgba(15,31,82,0) 42%, rgba(15,31,82,.42) 100%);
}
.page-hero::after{
  content:"";position:absolute;right:-140px;top:-140px;width:440px;height:440px;
  border-radius:50%;background:rgba(34,197,94,.16);filter:blur(2px);
}
.page-hero > .container{position:relative;z-index:1}
.page-hero h1{text-shadow:0 2px 18px rgba(10,20,55,.45)}
.page-hero p{text-shadow:0 1px 12px rgba(10,20,55,.4)}

/* Vermittlerhinweis — sichtbar, aber nicht laut.
   Er steht auf dem dunklen Hero-Bild, deshalb heller Text auf halbdurch-
   sichtigem Grund statt der sonst üblichen --muted-Farbe: auf dem Foto
   wäre die nicht mehr lesbar. Kein text-shadow, der Hintergrund trägt. */
.vermittler-hinweis{
  display:flex;align-items:flex-start;gap:var(--space-2);
  margin-top:var(--space-4);max-width:58ch;
  padding:10px 14px;border-radius:var(--radius-md);
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(4px);
  font-size:.86rem;line-height:1.5;color:#fff;text-shadow:none
}
.vermittler-hinweis svg{flex:none;margin-top:2px;opacity:.9}

/* Außerhalb eines Hero-Bildes — falls der Baustein später auf hellem
   Grund eingesetzt wird, etwa auf /leistungen/ oder unter dem Formular. */
.section .vermittler-hinweis,
.container--narrow .vermittler-hinweis{
  background:var(--green-100);border-color:transparent;
  color:var(--text);backdrop-filter:none
}

/* Compact variant for legal pages — same treatment, less height */
.page-hero--slim{padding-block:clamp(36px,5vw,56px)}
.page-hero h1{color:#fff}
.page-hero p{color:rgba(255,255,255,.88);max-width:62ch}
.page-hero .eyebrow{color:var(--green-400)}
.breadcrumb{font-size:.84rem;color:rgba(255,255,255,.72);margin-bottom:var(--space-3)}
.breadcrumb a:hover{color:#fff;text-decoration:underline}
.breadcrumb span[aria-current]{color:rgba(255,255,255,.95)}

/* ==========================================================================
   Price table
   ========================================================================== */
.price-table-wrap{border:1px solid var(--border);border-radius:var(--radius-lg);background:#fff;overflow:hidden}
.price-table{width:100%;font-size:.92rem;table-layout:auto}
.price-table th,.price-table td{padding:13px 14px;text-align:left;border-bottom:1px solid var(--border);vertical-align:top}
.price-table th:nth-child(2),.price-table td:nth-child(2){white-space:nowrap;width:1%}
.price-table td:last-child,.price-table th:last-child{text-align:right;white-space:nowrap;width:1%}
.price-table thead th{background:var(--navy);color:#fff;font-weight:var(--fw-semibold);font-size:.85rem;letter-spacing:.03em;text-transform:uppercase;border-bottom:0}
.price-table thead th:first-child{border-top-left-radius:var(--radius-lg)}
.price-table thead th:last-child{border-top-right-radius:var(--radius-lg)}
.price-table tbody tr:last-child td{border-bottom:0}
.price-table tbody tr{transition:background var(--dur-fast) ease}
.price-table tbody tr:hover{background:var(--green-50)}
.price-table td:first-child{font-weight:var(--fw-semibold);color:var(--navy)}
.price-table .price{white-space:nowrap;font-weight:var(--fw-bold);color:var(--green-700);font-size:1rem}
.price-note{font-size:.85rem;color:var(--muted);margin-top:var(--space-3)}
/* Herkunft der Preise. Kleiner als der Disclaimer, aber lesbar —
   --muted ist auf 4.5:1 geprüft, deshalb keine zusätzliche Aufhellung. */
.price-source{font-size:.78rem;color:var(--muted);margin-top:var(--space-2);font-style:italic}

/* Autoren- und Prüfzeile über dem Artikeltext. */
.artikel-meta{
  display:flex;align-items:center;gap:var(--space-2);
  margin:0 0 var(--space-5);padding-bottom:var(--space-4);
  border-bottom:1px solid var(--border);
  font-size:.85rem;color:var(--muted)
}
.artikel-meta svg{flex:none;color:var(--green-700)}

/* ---------- Ratgeber-Artikel: Bildkarte, zwei Spalten, Inhaltsverzeichnis ----------
   Vorher: 74ch Text links, rechts eine leere weiße Spalte. Jetzt: Text links,
   rechts klebt das Inhaltsverzeichnis mit einem Anfrage-Kasten. Das Beitrags-
   bild liegt als Karte halb über dem Hero, halb auf der Seite. */
:root{--artikel-bild-ueberlapp:clamp(90px,14vw,180px)}

/* Eigener Hero für Artikel — unabhängig von .page-hero. Kein Foto, nur die
   Farbschichten; das Foto ist die Karte darunter. Text sitzt höher und die
   H1 ist eine Stufe kleiner als auf den Leistungsseiten, weil der Titel
   eines Artikels länger ist als „Umzug Mannheim". */
.hero-kompakt{
  position:relative;overflow:hidden;color:#fff;
  padding-block:clamp(28px,4vw,48px) clamp(28px,4vw,48px);
  background:
    linear-gradient(100deg,rgba(15,31,82,1) 0%,rgba(23,45,116,.98) 45%,rgba(30,58,138,.94) 100%);
}
.hero-kompakt::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(15,31,82,.35) 0%,rgba(15,31,82,0) 42%,rgba(15,31,82,.42) 100%);
}
.hero-kompakt::after{
  content:"";position:absolute;right:-140px;top:-140px;width:440px;height:440px;
  border-radius:50%;background:rgba(34,197,94,.16);filter:blur(2px);pointer-events:none;
}
.hero-kompakt--mit-bild{padding-bottom:calc(clamp(28px,4vw,48px) + var(--artikel-bild-ueberlapp))}
.hero-kompakt > .container{position:relative;z-index:1}
.hero-kompakt .breadcrumb{font-size:.84rem;color:rgba(255,255,255,.72);margin-bottom:var(--space-3)}
.hero-kompakt .breadcrumb a:hover{color:#fff;text-decoration:underline}
.hero-kompakt .breadcrumb span[aria-current]{color:rgba(255,255,255,.95)}
.hero-kompakt .eyebrow{color:var(--green-400)}
.hero-kompakt h1{color:#fff;font-size:clamp(1.7rem,1.2rem + 2vw,2.6rem);max-width:26ch;margin-bottom:var(--space-3)}
.hero-kompakt p{color:rgba(255,255,255,.88);max-width:62ch;font-size:1.02rem;margin:0}

.section--artikel{padding-top:0}
.artikel-bild{
  margin:calc(-1 * var(--artikel-bild-ueberlapp)) 0 0;
  border-radius:var(--radius-lg);overflow:hidden;
  background:var(--tertiary);
  box-shadow:0 18px 44px rgba(16,24,40,.18),0 2px 6px rgba(16,24,40,.08);
  position:relative;z-index:2;
  aspect-ratio:1400/560;
}
.artikel-bild img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;display:block}

/* KI-Hinweis direkt unter dem Bild — als Bildunterschrift, eine Zeile.
   --muted auf Weiß liegt über 4.5:1; kleiner geht die Schrift nicht,
   ohne die Wahrnehmbarkeit nach Art. 50 KI-VO zu verlieren. */
.artikel-ki-hinweis{
  display:flex;align-items:center;gap:6px;
  margin:var(--space-2) 0 var(--space-6);
  font-size:.72rem;line-height:1.5;color:var(--muted)
}
.artikel-ki-hinweis .icon{flex:none;width:13px;height:13px;color:var(--green-700)}
.artikel-ki-hinweis a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.artikel-ki-hinweis a:hover{color:var(--green-700)}
/* Ohne Bild sitzt der Hinweis direkt unter dem Hero — dann braucht er oben Luft. */
.hero-kompakt + .section--artikel > .container > .artikel-ki-hinweis:first-child{margin-top:var(--space-6)}
.hero-kompakt + .section--artikel > .container > .artikel-layout:first-child{margin-top:var(--space-7)}

/* ponytail: KEIN align-items:start. Die Seitenspalte muss so hoch sein wie
   die Zeile, sonst hat position:sticky keinen Raum zum Kleben — genau der
   Fehler des ersten Entwurfs. */
.artikel-layout{
  display:grid;grid-template-columns:minmax(0,1fr) 320px;
  gap:var(--space-8);align-items:stretch
}
.artikel-haupt{min-width:0}
.artikel-seite{align-self:stretch}
.artikel-haupt .prose{max-width:none}
/* Die vier importierten Artikel bringen ein eigenes <nav class="toc"> im Text mit —
   jetzt steht das Verzeichnis in der Spalte, das zweite bleibt weg. */
.artikel-haupt .prose nav.toc{display:none}
.artikel-seite__sticky{position:sticky;top:calc(var(--header-h) + 24px);display:grid;gap:var(--space-4)}

.artikel-toc{
  border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--space-4) var(--space-5);background:#fff
}
.artikel-toc__titel{
  margin:0 0 var(--space-2);font-size:.78rem;font-weight:var(--fw-semibold);
  letter-spacing:.06em;text-transform:uppercase;color:var(--navy)
}
.artikel-toc ol{margin:0;padding:0;list-style:none;counter-reset:toc}
.artikel-toc li{counter-increment:toc;border-top:1px solid var(--border)}
.artikel-toc li:first-child{border-top:0}
.artikel-toc a{
  display:flex;gap:var(--space-2);padding:9px 0;
  font-size:.9rem;line-height:1.4;color:var(--text)
}
.artikel-toc a::before{content:counter(toc);flex:none;width:1.4em;font-weight:var(--fw-semibold);color:var(--green-700);font-variant-numeric:tabular-nums}
.artikel-toc a:hover{color:var(--green-700)}

.artikel-cta{
  border-radius:var(--radius-lg);padding:var(--space-5);
  background:var(--navy);color:#fff
}
.artikel-cta .eyebrow{color:var(--green-400)}
.artikel-cta p{margin:var(--space-2) 0 var(--space-4);font-size:.92rem;line-height:1.55;color:rgba(255,255,255,.88)}
.artikel-cta strong{color:#fff}
.artikel-cta .btn{width:100%}

/* Ratgeber-Übersicht: Karte mit Bild oben, Text darunter. */
.card--post{padding:0;display:flex;flex-direction:column;overflow:hidden}
.card--post .card__media{margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--tertiary)}
.card--post .card__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--dur-slow) var(--ease-out)}
.card--post:hover .card__media img{transform:scale(1.04)}
.card--post .card__body{padding:clamp(18px,2.4vw,26px);display:flex;flex-direction:column;flex:1}

/* Seitennummerierung unter der Ratgeber-Liste (the_posts_pagination).
   WordPress liefert nackte Links „1 2 Nächste" — ohne diese Regeln steht
   das wie Fließtext unter den Karten. Runde Pillen wie die Buttons,
   aktuelle Seite grün, Pfeile statt Wörter. */
.navigation.pagination{margin-top:var(--space-6);display:flex;justify-content:center}
.navigation.pagination .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.navigation.pagination .nav-links{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;align-items:center}
.navigation.pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 14px;
  border:1.5px solid var(--border);border-radius:var(--radius-full);background:#fff;
  font-weight:600;font-size:.95rem;color:var(--text);text-decoration:none;
  transition:border-color var(--dur-fast),background var(--dur-fast),color var(--dur-fast)}
.navigation.pagination a.page-numbers:hover{border-color:var(--green-500);color:var(--green-700);background:var(--green-50)}
.navigation.pagination .page-numbers.current{background:var(--green-500);border-color:var(--green-500);color:#fff}
.navigation.pagination .page-numbers.dots{border:0;background:none;min-width:24px;padding:0;color:var(--muted)}
.navigation.pagination .prev,.navigation.pagination .next{gap:6px}

/* Verweise auf die Detailseiten unter jeder Leistung in der Übersicht. */
.detail-links{margin-top:var(--space-4);font-size:.88rem;line-height:1.9}
.detail-links .muted{margin-right:var(--space-1)}
.extras-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-2);margin-top:var(--space-5)}
.extras-list li{display:flex;justify-content:space-between;gap:var(--space-4);padding:12px 16px;background:var(--tertiary);border-radius:var(--radius-sm);font-size:.9rem}
.extras-list span:first-child{color:var(--text)}
.extras-list span:last-child{font-weight:var(--fw-semibold);color:var(--navy);white-space:nowrap}

/* ==========================================================================
   FAQ accordion
   ========================================================================== */
.faq{display:grid;grid-template-columns:1fr;gap:var(--space-3);align-items:start}
@media (min-width:900px){.faq{grid-template-columns:1fr 1fr;gap:var(--space-3) var(--space-5)}}
.faq__item{border:1px solid var(--border);border-radius:var(--radius-md);background:#fff;overflow:hidden;transition:border-color var(--dur-base) var(--ease-out)}
.faq__item:hover{border-color:#D3DAE6}
.faq__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  padding:18px 20px;text-align:left;font-weight:var(--fw-semibold);color:var(--navy);font-size:1rem;
  transition:color var(--dur-base) var(--ease-out);
}
.faq__q:hover{color:var(--green-700)}
.faq__q .icon{width:22px;height:22px;flex:none;transition:transform var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out)}
.faq__q[aria-expanded="true"]{color:var(--green-700)}
.faq__q[aria-expanded="true"] .icon{transform:rotate(180deg)}
.faq__a{max-height:0;overflow:hidden;transition:max-height var(--dur-base) var(--ease-out)}
/* ponytail: max-height statt grid 0fr→1fr — die fr-Variante loest in Chrome
   nicht zuverlaessig auf. Deckel 600px reicht fuer jede Antwort hier;
   bei laengeren Texten Wert erhoehen. */
.faq__item.is-open .faq__a{max-height:600px}
.faq__a p{padding:0 20px 18px;margin:0;color:var(--muted);font-size:.95rem}

/* ==========================================================================
   Forms
   ========================================================================== */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
/* Schritt 1 des Anfrageformulars: die beiden Adressfelder.

   Der Platz für das Icon muss hier ausdrücklich gesetzt werden. Die Felder
   liegen in .form-group UND in .input-with-icon; beide Regeln haben dieselbe
   Spezifität (0,1,1), und .form-group input steht weiter unten in der Datei.
   Es gewinnt also und ersetzt `padding:16px 16px 16px 48px` durch
   `padding:14px 16px` — der linke Freiraum verschwindet, das absolut
   positionierte Icon bleibt liegen und sitzt auf dem Platzhaltertext.
   Genau das war auf der Live-Seite zu sehen.
   Drei Klassen davor heben die Regel über beide hinweg. */
/* Zweite Zeile unter dem Absendeknopf: die Erreichbarkeit. Eine Spur kleiner
   als die Zeile darüber, damit die Zusage die Hauptaussage bleibt und die
   Einschränkung als das gelesen wird, was sie ist. */
.form-meta__zeiten{display:inline-block;margin-top:2px;font-size:.82em}

.form-step1{margin-bottom:var(--space-2)}
.form-step1 .input-with-icon{margin-bottom:0}
.form-step1 .input-with-icon input{
  padding:14px 16px 14px 46px;
  border-radius:var(--radius-sm);
}
.form-step1 .input-with-icon .icon{left:14px}
.form-group{margin-bottom:var(--space-4)}
.form-group.full{grid-column:1/-1}
.form-group label{display:block;font-weight:var(--fw-medium);color:var(--navy);margin-bottom:6px;font-size:.92rem}
.form-group input,.form-group select,.form-group textarea{
  width:100%;padding:14px 16px;border:1.5px solid var(--border);border-radius:var(--radius-sm);
  background:#fff;outline:none;color:var(--text);
  transition:border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out);
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--green-500);box-shadow:0 0 0 4px var(--green-100)}
.form-group textarea{resize:vertical;min-height:130px}
.form-error{color:var(--danger);font-size:.82rem;margin-top:5px;display:none}
.form-group.has-error input,.form-group.has-error select,.form-group.has-error textarea,
.form-group.has-error .consent-box{border-color:var(--danger)}
.form-group.has-error .form-error{display:block}
.form-group.has-error input,.form-group.has-error select{animation:shake .4s var(--ease-in-out)}
.form-success{
  display:none;background:var(--green-50);border:1px solid var(--green-500);color:var(--green-700);
  padding:var(--space-4);border-radius:var(--radius-md);margin-bottom:var(--space-5);font-weight:var(--fw-medium);
}
.form-success.is-visible{display:block;animation:slideDown var(--dur-base) var(--ease-out)}

.consent-box{display:flex;gap:var(--space-3);align-items:flex-start;padding:14px;background:var(--tertiary);border:1.5px solid transparent;border-radius:var(--radius-sm);margin-bottom:var(--space-4)}
.consent-box input[type=checkbox]{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--green-600)}
.consent-box label{font-size:.84rem;color:var(--muted);font-weight:var(--fw-light);line-height:1.5;margin:0}
.consent-box a{color:var(--green-700);text-decoration:underline}
.form-meta{font-size:.82rem;color:var(--muted);text-align:center;margin-top:var(--space-3)}

.btn.is-loading{pointer-events:none;opacity:.85}
.spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}

/* ==========================================================================
   Contact / info blocks
   ========================================================================== */
.contact-info{display:flex;flex-direction:column;gap:var(--space-4)}
.contact-info .item{display:flex;gap:var(--space-3);align-items:flex-start}
.contact-info .item .icon-circle{flex:none;width:46px;height:46px}
.contact-info .item .icon-circle .icon{width:21px;height:21px}
.contact-info .item strong{display:block;color:var(--navy)}
.contact-info .item span,.contact-info .item a{color:var(--muted);font-size:.93rem}
.contact-info .item a:hover{color:var(--green-700)}

/* ---------- Contact methods (3 ways) ---------- */
.contact-methods{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
.contact-method{
  display:flex;flex-direction:column;align-items:center;gap:var(--space-2);
  padding:var(--space-5) var(--space-3);background:#fff;border:1px solid var(--border);
  border-radius:var(--radius-lg);text-align:center;color:var(--navy);
  transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out);
}
.contact-method .icon{width:30px;height:30px;color:var(--navy);transition:color var(--dur-base) var(--ease-out)}
.contact-method strong{font-size:1rem}
.contact-method small{color:var(--muted);font-size:.84rem}
.contact-method:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--green-400)}
.contact-method:hover .icon{color:var(--green-600)}

/* ==========================================================================
   Values / stats
   ========================================================================== */
.value-list{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-5)}
.value-item{display:flex;gap:var(--space-4)}
.value-item .num{
  flex:none;width:48px;height:48px;border-radius:50%;background:var(--navy);color:#fff;
  font-weight:var(--fw-bold);display:grid;place-items:center;
  transition:background var(--dur-base) var(--ease-out);
}
.value-item:hover .num{background:var(--green-700)}
.value-item h3{margin-bottom:4px}
.value-item p{margin:0;color:var(--muted);font-size:.94rem}

.stat-strip{
  position:relative;overflow:hidden;color:#fff;padding-block:clamp(36px,5vw,56px);
  background:var(--navy) url("img/bg-1200.jpg") center 38% / cover no-repeat;
}
.stat-strip::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(15,31,82,.93) 0%,rgba(30,58,138,.86) 60%,rgba(30,58,138,.78) 100%);
}
.stat-strip > .container{position:relative;z-index:1}
.stat-strip .grid-3{text-align:center}
.stat-strip strong{display:block;font-size:clamp(2rem,1.6rem + 1.6vw,2.8rem);color:var(--green-400);font-weight:var(--fw-bold);line-height:1.1}
.stat-strip span{font-size:.92rem;color:rgba(255,255,255,.82)}

/* ==========================================================================
   Marquee (durchlaufendes Vertrauensband)
   ========================================================================== */
.marquee{overflow:hidden;position:relative;padding-block:var(--space-5);margin-block:clamp(40px,6vw,72px);border-block:1px solid var(--border);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;gap:var(--space-8);width:max-content;animation:marquee 38s linear infinite;will-change:transform}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__item{display:flex;align-items:center;gap:var(--space-2);color:var(--navy);font-weight:var(--fw-medium);font-size:.93rem;white-space:nowrap}
.marquee__item .icon{width:20px;height:20px;color:var(--green-600)}

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band{
  border-radius:var(--radius-xl);padding:clamp(32px,5vw,64px) clamp(20px,4vw,48px);
  text-align:center;color:#fff;position:relative;overflow:hidden;
  background:var(--navy) url("img/bg-1200.jpg") center 40% / cover no-repeat;
}
.cta-band::before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(135deg,rgba(15,31,82,.92) 0%,rgba(30,58,138,.85) 55%,rgba(22,42,110,.9) 100%),
    radial-gradient(circle at 12% 88%, rgba(34,197,94,.22) 0%, transparent 55%);
}
.cta-band > *{position:relative;z-index:1}
.cta-band h2,.cta-band p{text-shadow:0 2px 14px rgba(10,20,55,.4)}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,.9);max-width:56ch;margin-inline:auto}
.cta-band .btn--white:hover{background:var(--green-500);color:#fff}

/* ==========================================================================
   City page extras
   ========================================================================== */
.city-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--space-4);margin-top:var(--space-6)}
.city-fact{background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-4)}
.city-fact dt{font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.city-fact dd{margin:0;font-weight:var(--fw-semibold);color:var(--navy);font-size:.98rem}
.notice{
  display:flex;gap:var(--space-3);padding:var(--space-4) var(--space-5);
  background:var(--green-50);border-left:4px solid var(--green-500);
  border-radius:0 var(--radius-md) var(--radius-md) 0;margin-block:var(--space-5);
}
.notice .icon{width:22px;height:22px;color:var(--green-700);flex:none;margin-top:2px}
.notice p{margin:0;font-size:.93rem;color:var(--text)}
.notice strong{color:var(--navy)}

.city-links{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.city-link{
  display:inline-flex;align-items:center;gap:var(--space-2);padding:10px 18px;
  border:1.5px solid var(--border);border-radius:var(--radius-full);
  color:var(--navy);font-weight:var(--fw-medium);font-size:.93rem;background:#fff;
  transition:all var(--dur-base) var(--ease-out);
}
.city-link .icon{width:16px;height:16px}
.city-link:hover{background:var(--green-700);border-color:var(--green-700);color:#fff;transform:translateY(-2px)}

/* ==========================================================================
   Blog
   ========================================================================== */
.post-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-5)}
.post-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;
  transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.post-card__body{padding:var(--space-5);display:flex;flex-direction:column;flex:1}
.post-card__cat{font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;color:var(--green-700);font-weight:var(--fw-semibold);margin-bottom:var(--space-2)}
.post-card h3{font-size:1.1rem;margin-bottom:var(--space-2)}
.post-card p{font-size:.92rem;color:var(--muted);flex:1}
.post-card__meta{font-size:.82rem;color:var(--muted);margin-top:var(--space-3)}

.prose{max-width:74ch}
.prose h2{margin-top:var(--space-8);scroll-margin-top:calc(var(--header-h) + 24px)}
.prose h3{margin-top:var(--space-6)}
.prose p,.prose li{font-size:1.02rem;line-height:1.75}
.prose ul,.prose ol{margin:0 0 var(--space-5);padding-left:1.3em;list-style:disc}
.prose ol{list-style:decimal}
.prose li{margin-bottom:var(--space-2)}
.prose a{color:var(--green-700);text-decoration:underline;text-underline-offset:2px}
.prose a:hover{color:var(--navy)}
.prose strong{color:var(--navy)}
.key-facts{background:var(--green-50);border-radius:var(--radius-lg);padding:var(--space-5) var(--space-6);margin-bottom:var(--space-6)}
.key-facts h2{margin-top:0;font-size:1.15rem}
.key-facts ul{list-style:none;padding:0;margin:0}
.key-facts li{display:flex;gap:var(--space-3);margin-bottom:var(--space-2);font-size:.96rem}
.key-facts .icon{width:18px;height:18px;color:var(--green-700);flex:none;margin-top:5px}
.toc{border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-5);margin-bottom:var(--space-6)}
.toc strong{display:block;color:var(--navy);margin-bottom:var(--space-3)}
.toc li{margin-bottom:var(--space-2)}
.toc a{color:var(--muted);font-size:.94rem}
.toc a:hover{color:var(--green-700)}

/* ==========================================================================
   Legal pages
   ========================================================================== */
.legal{max-width:78ch}
.legal h2{font-size:1.35rem;margin-top:var(--space-7)}
.legal h3{font-size:1.05rem;margin-top:var(--space-5)}
.legal p,.legal li{font-size:.97rem;line-height:1.75}
.legal ul{list-style:disc;padding-left:1.3em;margin-bottom:var(--space-4)}
.legal li{margin-bottom:var(--space-2)}
.legal a{color:var(--green-700);text-decoration:underline}
.legal address{font-style:normal;background:var(--tertiary);padding:var(--space-4) var(--space-5);border-radius:var(--radius-md);margin-bottom:var(--space-4)}
/* .legal .todo — entfernt: die gelben Hinweiskästen in den Rechtstexten waren
   Notizen an uns selbst und hatten auf einer öffentlichen Seite nichts zu suchen. */

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{background:var(--tertiary);color:var(--muted);padding-block:clamp(40px,6vw,72px) var(--space-5);border-top:1px solid var(--border)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:var(--space-6)}
.footer-grid .logo img{height:40px;margin-bottom:var(--space-4)}
.site-footer .footer-grid h2{color:var(--navy);font-size:.95rem;font-weight:var(--fw-semibold);margin-bottom:var(--space-4);letter-spacing:normal}
.site-footer p{font-size:.9rem;max-width:34ch;color:var(--muted)}
.site-footer li{margin-bottom:var(--space-2);font-size:.9rem}
.site-footer a{transition:color var(--dur-base) var(--ease-out)}
.site-footer a{color:var(--navy)}
.site-footer a:hover{color:var(--green-700)}
/* Derselbe grüne Strich wie im Hauptmenü — auch im Fuß. Nur Listen-Links,
   nicht die Fließtext-Links im KI-Hinweis oder in der Adresse. */
.site-footer ul a,.footer-cities a,.footer-legal a{position:relative;display:inline-block;padding-bottom:2px}
.site-footer ul a::after,.footer-cities a::after,.footer-legal a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--green-500);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform var(--dur-base) var(--ease-out)}
.site-footer ul a:hover::after,.footer-cities a:hover::after,.footer-legal a:hover::after{transform:scaleX(1)}
.footer-cities{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);margin-top:var(--space-6);padding-top:var(--space-5);border-top:1px solid var(--border);font-size:.86rem}
/* Kennzeichnung nach Art. 50 KI-Verordnung.
   Zwei Dinge waren beim ersten Versuch falsch: die Farben waren für einen
   dunklen Fuß geschrieben — der Fuß ist aber hell — und `.site-footer p`
   (Spezifität 0,1,1) hat die Regel schlicht überstimmt, sodass gar nichts
   davon ankam. Deshalb jetzt mit `.site-footer` davor.
   Zurückhaltend, aber nicht versteckt: die Vorschrift verlangt Wahrnehmbarkeit
   ohne Hilfsmittel. --muted auf --tertiary liegt bei 4.7:1 und damit über der
   Grenze von WCAG AA — ein grauerer Ton wäre rechtlich wertlos. */
.site-footer .ki-hinweis{
  margin:var(--space-5) 0 0;
  padding-top:var(--space-4);
  border-top:1px solid var(--border);
  font-size:.78rem;line-height:1.6;
  color:var(--muted);
  max-width:none;
}
.site-footer .ki-hinweis a{color:var(--navy);text-decoration:underline;text-underline-offset:2px}
.site-footer .ki-hinweis a:hover{color:var(--green-700)}

/* Dieselbe Fußnote unter einzelnen Bildern. */
.bild-hinweis{margin-top:var(--space-2);font-size:.75rem;line-height:1.5;color:var(--muted)}

.footer-bottom{
  margin-top:var(--space-6);padding-top:var(--space-5);border-top:1px solid var(--border);
  display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);font-size:.82rem;flex-wrap:wrap;
}
.footer-legal{display:flex;gap:var(--space-4);flex-wrap:wrap}
.social-row{display:flex;gap:var(--space-3);margin-top:var(--space-4)}
.social-row a{
  width:44px;height:44px;border-radius:50%;border:1px solid var(--border);background:#fff;
  display:grid;place-items:center;transition:all var(--dur-base) var(--ease-out);
}
.social-row a .icon{width:20px;height:20px}
.social-row a:hover{background:var(--green-700);border-color:var(--green-700);color:#fff}

/* ==========================================================================
   Cookie banner
   ========================================================================== */
.cookie-banner{
  position:fixed;left:50%;bottom:16px;transform:translateX(-50%) translateY(150%);
  width:min(720px,calc(100% - 32px));background:#fff;border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);padding:var(--space-5) var(--space-6);z-index:200;
  transition:transform 400ms var(--ease-out);
}
.cookie-banner.is-visible{transform:translateX(-50%) translateY(0)}
.cookie-banner h2{font-size:1.1rem;margin-bottom:var(--space-2)}
.cookie-banner p{font-size:.88rem;color:var(--muted);margin-bottom:var(--space-4)}
.cookie-banner a{color:var(--green-700);text-decoration:underline}
.cookie-actions{display:flex;gap:var(--space-3);flex-wrap:wrap}
.cookie-actions .btn{flex:1;min-width:150px;padding:13px 20px;font-size:.94rem}
.cookie-prefs{display:none;margin-bottom:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--border)}
.cookie-prefs.is-open{display:block}
.cookie-prefs label{display:flex;gap:var(--space-3);align-items:flex-start;margin-bottom:var(--space-3);font-size:.88rem}
.cookie-prefs input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--green-600)}
.cookie-prefs span strong{display:block;color:var(--navy)}
.cookie-prefs span small{color:var(--muted)}

/* ==========================================================================
   Motion — scroll reveals & keyframes
   ========================================================================== */
.reveal{opacity:0;transform:translateY(24px);transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
.reveal.is-visible{opacity:1;transform:none}
.reveal--scale{transform:scale(.94)}
.reveal--scale.is-visible{transform:none}
.reveal--left{transform:translateX(-28px)}
.reveal--left.is-visible{transform:none}

@keyframes heroUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes heroZoom{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-6px)}40%,60%{transform:translateX(6px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.js .hero-anim .hero__title,.js .hero-anim .hero__lead,.js .hero-anim .trust-pill,.js .hero-anim .hero__media,.js .hero-anim .request-card{opacity:0}
.js .hero-anim .hero__title{animation:heroUp var(--dur-slow) var(--ease-out) forwards}
.js .hero-anim .hero__lead{animation:heroUp var(--dur-slow) var(--ease-out) .1s forwards}
.js .hero-anim .trust-pill{animation:heroUp 500ms var(--ease-out) .2s forwards}
.js .hero-anim .hero__media{animation:heroZoom 900ms var(--ease-out) forwards}
.js .hero-anim .request-card{animation:heroUp 700ms var(--ease-out) .3s forwards}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1180px){
  .hero__photo{width:min(66%,760px)}
  .hero__copy{max-width:min(520px,54%)}
}
@media (max-width:1024px){
  .steps{grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
  .step + .step::before{display:none}
  .step:nth-child(n+4){grid-column:span 1}
  .footer-grid{grid-template-columns:1fr 1fr}
  .grid-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  /* ponytail: auf dem Handy KEINE Überlappung. Foto läuft im normalen Fluss
     ganz oben, blendet nach unten in Weiß aus, Text steht sauber darunter.
     Text über einem Foto ist auf 430px nicht zuverlässig lesbar. */
  .hero{padding-block:0 var(--space-4)}
  .hero__photo{
    position:static;width:auto;height:clamp(210px,46vw,290px);
    margin-inline:calc(-1 * var(--space-5));
  }
  .hero__photo img{
    object-position:50% 32%;
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 60%,rgba(0,0,0,.55) 82%,transparent 100%);
            mask-image:linear-gradient(to bottom,#000 0%,#000 60%,rgba(0,0,0,.55) 82%,transparent 100%);
  }
  .hero__copy{max-width:none;padding-block:var(--space-4) var(--space-5)}
  .hero__title,.hero__lead{max-width:none}
  .grid-3,.grid-2,.value-list{grid-template-columns:1fr}
  .contact-methods{grid-template-columns:1fr}
  /* Artikel: eine Spalte. Verzeichnis über dem Text, Anfrage-Kasten darunter
     — beides nicht mehr klebend, auf dem Handy wäre das ein Drittel des Bildschirms. */
  .artikel-layout{grid-template-columns:1fr;gap:var(--space-6)}
  .artikel-seite{order:-1}
  .artikel-seite__sticky{position:static}
  .artikel-cta{display:none}
  .artikel-bild{aspect-ratio:16/10;border-radius:var(--radius-md)}
}
@media (max-width:768px){
  :root{--header-h:66px}
  .main-nav{
    position:fixed;top:var(--header-h);right:0;bottom:0;width:min(320px,84vw);
    background:#fff;flex-direction:column;align-items:stretch;gap:0;
    padding:var(--space-4) var(--space-5);transform:translateX(105%);
    transition:transform var(--dur-base) var(--ease-out);overflow-y:auto;z-index:99;
    box-shadow:-8px 0 30px rgba(16,24,40,.12);
  }
  .main-nav.is-open{transform:translateX(0)}
  .main-nav a{display:block;width:100%;padding:var(--space-4) 0;border-bottom:1px solid var(--border);font-size:1.05rem}
  .main-nav a::after{display:none}
  .hamburger{display:grid}
  .steps{grid-template-columns:1fr 1fr;gap:var(--space-4)}
  .step__icon{width:84px;height:84px}
  .step__icon .icon{width:36px;height:36px}
  .form-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:var(--space-5)}
  .footer-bottom{flex-direction:column;align-items:flex-start}
  .trust-strip{grid-template-columns:1fr 1fr;gap:var(--space-4)}
  .trust-strip__item:nth-child(3)::before{display:none}
  .cta-band{border-radius:var(--radius-lg)}
  .how__panel{border-radius:var(--radius-lg)}
}
@media (max-width:480px){
  .container{padding-inline:var(--space-4)}
  .service-option{padding:var(--space-3) 6px}
  .service-option .icon{width:26px;height:26px}
  .service-option__label{font-size:.8rem;line-height:1.2;hyphens:auto}
  .hero__photo{margin-inline:calc(-1 * var(--space-4))}
  .page-hero{background-position:60% 42%}
  /* Senkrecht gestapelt — gleicher Aufbau wie auf dem Desktop, nur untereinander.
     Feste Textbreite, damit die Zeilen wie am Desktop umbrechen. */
  .steps{grid-template-columns:1fr;gap:var(--space-7);margin-top:var(--space-6)}
  .step{max-width:300px;margin-inline:auto}
  .step + .step::before{display:none}
  .request-card{padding:var(--space-4);border-radius:var(--radius-lg)}
  .cookie-actions .btn{min-width:100%}
  .hero__media{min-height:210px}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .reveal{opacity:1;transform:none}
  .js .hero-anim .hero__title,.js .hero-anim .hero__lead,.js .hero-anim .trust-pill,.js .hero-anim .hero__media,.js .hero-anim .request-card{opacity:1}
  .marquee__track{animation:none}
}

/* ---------- Print ---------- */
@media print{
  .site-header,.cookie-banner,.cta-band,.marquee{display:none!important}
  body{padding:0}
  .reveal{opacity:1;transform:none}
}

/* ==========================================================================
   Seitenbild (Service- und Stadtseiten)
   Fuellt den weissen Bereich rechts. Pro Seite eine eigene Datei —
   austauschbar in src/data/services.json (Feld "image").
   ========================================================================== */

/* Vier Fakten-Karten nebeneinander — auch auf dem Handy */
.city-facts{grid-template-columns:repeat(4,1fr);gap:var(--space-3)}
.city-fact{padding:var(--space-3)}
.city-fact dt{font-size:.68rem;letter-spacing:.03em}
.city-fact dd{font-size:.86rem;line-height:1.25}

/* ==========================================================================
   Schwebende Buttons rechts (Desktop)
   ========================================================================== */
.float-actions{
  position:fixed;right:18px;bottom:22px;z-index:90;
  display:flex;flex-direction:column;gap:12px;
}
.float-btn{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:var(--navy);color:#fff;box-shadow:0 6px 20px rgba(16,24,40,.22);
  transition:background var(--dur-base) var(--ease-out),transform var(--dur-fast) var(--ease-out);
}
.float-btn:hover{background:var(--green-700);transform:translateY(-3px)}
.float-btn .icon{width:24px;height:24px}
.float-btn--wa{background:var(--green-600)}
.float-btn--wa:hover{background:var(--green-700)}
.float-btn--top{opacity:0;pointer-events:none;transition:opacity var(--dur-base) var(--ease-out),background var(--dur-base) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.float-btn--top.is-visible{opacity:1;pointer-events:auto}

@media (max-width:900px){
  /* Auf dem Handy ausgeblendet — der Anruf-Button sitzt oben im Header. */
  .float-actions{display:none}
}
@media (max-width:480px){
  .city-facts{grid-template-columns:repeat(2,1fr)}
}
.icon.is-flipped{transform:rotate(180deg)}

/* ==========================================================================
   Preis-USP-Reihe unter der Tabelle
   ========================================================================== */
.price-usp{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:var(--space-3);margin-top:var(--space-5);
}
.price-usp__item{
  display:flex;gap:var(--space-3);align-items:flex-start;
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);
  padding:var(--space-4);font-size:.93rem;color:var(--text);
}
.price-usp__item .icon{color:var(--green-600);flex:none;margin-top:2px}

/* ==========================================================================
   Bildbande — volle Breite statt Bild in der Ecke
   ========================================================================== */
.media-band{padding-block:clamp(32px,5vw,56px)}
.media-band__inner{
  position:relative;border-radius:var(--radius-xl);overflow:hidden;
  box-shadow:var(--shadow-md);
}
.media-band__inner img{
  width:100%;height:auto;display:block;
  aspect-ratio:16/6;object-fit:cover;object-position:50% 38%;
}
.media-band__overlay{
  position:absolute;inset:auto 0 0 0;
  padding:clamp(20px,4vw,36px);
  background:linear-gradient(to top,rgba(0,18,64,.82) 0%,rgba(0,18,64,.45) 55%,transparent 100%);
}
.media-band__overlay p{
  margin:0;color:#fff;font-weight:var(--fw-semibold);
  font-size:clamp(1rem,.9rem + .6vw,1.4rem);text-shadow:0 2px 12px rgba(0,10,40,.5);
}
@media (max-width:760px){
  .media-band__inner img{aspect-ratio:16/9}
  .media-band__inner{border-radius:var(--radius-lg)}
}

/* ponytail: fehlte komplett — die Tabellen-Caption war dadurch sichtbar. */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Preistabelle auf schmalen Schirmen: aus jeder Zeile wird eine Karte.
   Eine 4-spaltige Tabelle passt unter ~700px nicht — Zuschneiden ist keine Loesung. */
@media (max-width:700px){
  .price-table,.price-table thead,.price-table tbody,.price-table tr,.price-table th,.price-table td{display:block;width:auto}
  .price-table thead{display:none}
  .price-table tr{border-bottom:1px solid var(--border);padding:var(--space-4) var(--space-4) var(--space-3)}
  .price-table tr:last-child{border-bottom:0}
  .price-table td{border:0;padding:2px 0;text-align:left!important;white-space:normal!important;width:auto!important}
  .price-table td:first-child{font-size:1.02rem;margin-bottom:var(--space-2)}
  .price-table td:not(:first-child)::before{
    content:attr(data-label) ": ";color:var(--muted);font-weight:var(--fw-regular);
  }
  .price-table td.price{margin-top:var(--space-2);font-size:1.05rem}
  .price-table td.price::before{content:"Richtpreis: "}
}

/* --------------------------------------------------------------------------
   Bild neben dem Text statt als riesiges Vollbreit-Band darunter.
   -------------------------------------------------------------------------- */
.media-aside{border-radius:var(--radius-lg);overflow:hidden;position:relative;box-shadow:var(--shadow-md)}
.media-aside img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 42%}
.media-aside figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:var(--space-6) var(--space-5) var(--space-4);
  color:#fff;font-weight:var(--fw-semibold);font-size:1.02rem;
  background:linear-gradient(to top,rgba(0,18,64,.86),transparent)
}
@media (max-width:900px){.media-aside img{aspect-ratio:16/10}}

/* --------------------------------------------------------------------------
   Ratgeber: Fliesstext linksbuendig im selben Raster wie FAQ und Seitenkopf.
   Vorher sass der Artikel in einer zentrierten 760px-Spalte, die FAQ darunter
   in der vollen Breite — zwei verschiedene linke Kanten auf einer Seite.
   -------------------------------------------------------------------------- */
.prose{max-width:74ch}
/* Das frühere Raster „Text 74ch + .toc in der zweiten Spalte" ist entfernt:
   nur die vier importierten Artikel hatten ein .toc im Text, bei allen
   anderen blieb die zweite Spalte leer. Das Verzeichnis steht jetzt in
   .artikel-seite (single.php), für jeden Artikel gleich. */

/* --------------------------------------------------------------------------
   Ueber uns: Portraet-Band, damit die Mission nicht als Textwueste dasteht.
   -------------------------------------------------------------------------- */
.about-split{display:grid;grid-template-columns:1fr;gap:var(--space-6);align-items:center}
@media (min-width:900px){.about-split{grid-template-columns:1.05fr .95fr;gap:var(--space-8)}}

/* Hero-Karte kompakter, damit auf dem Desktop mehr davon oberhalb der Falz liegt. */
@media (min-width:900px){
  .hero .request-card h2{margin-bottom:var(--space-3)}
  .hero .service-options{margin-bottom:var(--space-4)}

}

/* Der Hero-Block ueber der Karte war so hoch, dass die Karte auf 900px-Schirmen
   unten abgeschnitten wirkte. Kompaktere Typo schiebt sie nach oben. */
@media (min-width:900px){
  .hero__title{margin-bottom:var(--space-3)}
  .hero__lead{max-width:44ch;margin-bottom:var(--space-3)}
}

/* In der schmalen Karte der Unterseiten brechen vier Spalten unsauber um. */
@media (min-width:900px){
  .section .request-card .trust-strip{grid-template-columns:1fr 1fr;row-gap:var(--space-4)}
  .section .request-card .trust-strip__item:nth-child(2n) + *{border-left:0}
}

/* Kontakt: die beiden Karten rechts sollen zusammen so hoch sein wie das
   Formular links — sonst haengt unten eine ungleiche Kante. */
@media (min-width:900px){.contact-grid{align-items:stretch}.contact-grid > .card{height:100%}}
.contact-side{display:flex;flex-direction:column;gap:var(--space-5);height:100%}
.contact-side > .card:last-child{flex:1}

/* Rechtstexte: die Unterstriche im Muster-Widerrufsformular sind ein einziges
   Wort und sprengten auf dem Handy die Seitenbreite. */
.legal{overflow-wrap:anywhere}

/* Verweiskarten auf die Detailseiten einer Leistung */
.card--link{display:block;transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)}
.card--link:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--green-500)}
.card--link h4{margin-bottom:var(--space-2)}
.card--link p{font-size:.94rem;margin-bottom:var(--space-3)}
.card__more{color:var(--navy);font-weight:var(--fw-semibold);font-size:.92rem;transition:color var(--dur-base) var(--ease-out)}
.card__more::after{content:" →"}
.card--link:hover .card__more{color:var(--green-700)}

/* Aufzählungen in den Detailseiten */
.check-list-plain{list-style:disc;padding-left:1.25em;margin-bottom:var(--space-4)}
.check-list-plain li{margin-bottom:var(--space-2)}
.num-list{list-style:decimal;padding-left:1.25em;margin-bottom:var(--space-4)}
.num-list li{margin-bottom:var(--space-2)}

/* Allgemeine Fehlermeldung im Formular — ersetzt das frühere window.alert,
   das die Seite blockierte und wie ein Absturz aussah. */
.form-fehler{
  display:flex;align-items:flex-start;gap:var(--space-2);
  margin:0 0 var(--space-4);padding:12px 14px;
  border-radius:var(--radius-md);
  background:rgba(200,30,40,.08);border:1px solid rgba(200,30,40,.28);
  color:#8A1220;font-size:.9rem;line-height:1.45
}

/* ponytail: Rechner-Ergebnis. Nur die Ergebnisbox ist neu — Selects, Grid und
   Buttons nutzen die vorhandenen Formularklassen. */
.rechner__ergebnis{display:block;text-align:center;background:var(--green-100);border-radius:var(--radius-lg);padding:var(--space-5) var(--space-4);margin-top:var(--space-2)}
.rechner__zahl{display:block;font-size:2rem;font-weight:var(--fw-semibold);color:var(--navy);line-height:1.2}
.rechner__hinweis{display:block;font-size:.9rem;color:var(--muted);margin-top:6px}
.rechner .btn{margin-top:var(--space-4)}
@media (max-width:600px){.rechner__zahl{font-size:1.5rem}}

/* ponytail: nur die drei neuen Bausteine des Rechner-Schritts 2. Alles andere
   nutzt die vorhandenen Formularklassen. */
.rechner-details{background:var(--white,#fff);border:1px solid var(--border,#e6e8eb);border-radius:var(--radius-lg);padding:var(--space-6);margin-bottom:var(--space-5)}
.rechner-details .rechner__ergebnis{margin:0 0 var(--space-3)}
.rechner-details .price-note{margin:0 0 var(--space-5)}
.rechner-extras{border:0;padding:0;margin:var(--space-5) 0 0}
.rechner-extras legend{font-weight:var(--fw-medium);color:var(--navy);margin-bottom:var(--space-3);padding:0}
.rechner-extra{display:flex;gap:10px;align-items:flex-start;padding:9px 12px;border:1px solid var(--border,#e6e8eb);border-radius:10px;margin-bottom:8px;cursor:pointer;transition:border-color .15s,background .15s}
.rechner-extra:hover{border-color:var(--green-500)}
.rechner-extra:has(input:checked){border-color:var(--green-500);background:var(--green-100)}
.rechner-extra input{margin-top:3px;flex:0 0 auto}
.rechner-extra small{display:block;color:var(--muted);font-size:.85rem}
.request-card--kompakt{box-shadow:none;padding-top:var(--space-5)}

/* ponytail: die Vorschlagsliste der Ortssuche. Ein <ul> über dem Feld —
   kein Dropdown-Bauteil, keine Bibliothek. */
.rechner-ort{position:relative}
.rechner-ort__liste{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 4px);margin:0;padding:4px;list-style:none;background:#fff;border:1px solid var(--border,#e6e8eb);border-radius:10px;box-shadow:0 12px 28px rgba(16,24,40,.12);max-height:260px;overflow:auto}
.rechner-ort__liste li{padding:8px 10px;border-radius:7px;cursor:pointer;font-size:.95rem}
.rechner-ort__liste li:hover,.rechner-ort__liste li.is-aktiv{background:var(--green-100)}
/* Liste unter dem Formularfeld (orte.js hängt sie in .input-with-icon) */
.input-with-icon .rechner-ort__liste{top:calc(100% + 6px)}

/* ==========================================================================
   Rechner — vier Schritte, Richtpreis am Ende, gesperrt bis zur Anfrage
   (assets/rechner.js). Kacheln statt Auswahllisten: eine Frage, drei bis
   vier Antworten zum Antippen — auf dem Handy ohne aufklappendes Menü.
   ========================================================================== */
.section--rechner{padding-top:clamp(28px,4vw,48px)}
.wizard{background:#fff;border:1px solid var(--border);border-radius:var(--radius-xl);padding:clamp(20px,3.5vw,40px);box-shadow:var(--shadow-md)}

/* Fortschritt: fünf Punkte, verbunden durch eine Linie. */
.wizard__punkte{display:flex;justify-content:space-between;list-style:none;margin:0 0 var(--space-6);padding:0;position:relative;counter-reset:none}
.wizard__punkte::before{content:"";position:absolute;left:18px;right:18px;top:17px;height:2px;background:var(--border);z-index:0}
.wizard__punkte li{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:.78rem;color:var(--muted);cursor:pointer;min-width:0;text-align:center}
.wizard__punkte li span{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#fff;border:2px solid var(--border);font-weight:var(--fw-semibold);color:var(--muted);transition:background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast)}
.wizard__punkte li.is-aktiv{color:var(--navy);font-weight:var(--fw-semibold)}
.wizard__punkte li.is-aktiv span{border-color:var(--navy);color:var(--navy)}
.wizard__punkte li.is-fertig span{background:var(--green-500);border-color:var(--green-500);color:#fff}

.wizard__schritt{border:0;padding:0;margin:0;min-width:0}
.wizard__frage{display:block;font-size:clamp(1.15rem,1rem + .8vw,1.45rem);font-weight:var(--fw-bold);color:var(--navy);margin:0 0 var(--space-4);line-height:1.25;padding:0}
.wizard__frage--klein{font-size:.95rem;font-weight:var(--fw-semibold);margin:var(--space-5) 0 var(--space-3)}
.wizard__nav{display:flex;justify-content:space-between;gap:var(--space-3);margin-top:var(--space-6);padding-top:var(--space-5);border-top:1px solid var(--border)}
.wizard__nav [data-weiter]{margin-left:auto}
/* .btn setzt display:inline-flex und schlägt damit das [hidden] des Browsers —
   derselbe Fehler, der im alten Rechner den Knopf stehen ließ. */
.btn[hidden]{display:none}
.wizard .form-error{display:none}
.wizard .has-error + .form-error,.wizard .has-error .form-error{display:block}

/* Kacheln = Radio-Felder als Karten. Das Radio bleibt im Baum (Tastatur,
   Screenreader), ist aber visuell versteckt; der Rahmen zeigt die Wahl. */
.kacheln{display:grid;gap:var(--space-3)}
.kacheln--2{grid-template-columns:repeat(2,1fr)}
.kacheln--3{grid-template-columns:repeat(3,1fr)}
.kacheln--4{grid-template-columns:repeat(4,1fr)}
.kacheln--inline{margin-top:var(--space-3);grid-template-columns:repeat(2,minmax(0,220px))}
.kacheln.has-error .kachel{border-color:var(--danger)}
.kachel{position:relative;display:flex;flex-direction:column;gap:3px;padding:14px 14px 13px;border:2px solid var(--border);border-radius:var(--radius-md);background:#fff;cursor:pointer;transition:border-color var(--dur-fast),background var(--dur-fast),box-shadow var(--dur-fast);min-width:0}
.kachel--schmal{padding:11px 12px;text-align:center;align-items:center}
.kachel:hover{border-color:var(--green-400)}
.kachel input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.kachel:has(input:checked){border-color:var(--green-500);background:var(--green-50);box-shadow:0 0 0 1px var(--green-500) inset}
.kachel:has(input:focus-visible){outline:3px solid rgba(8,154,56,.35);outline-offset:2px}
.kachel__titel{font-weight:var(--fw-semibold);color:var(--navy);font-size:.98rem;line-height:1.25}
.kachel__sub{font-size:.8rem;color:var(--muted);line-height:1.35}
.kachel:has(input:checked) .kachel__titel::after{content:"";display:inline-block;width:8px;height:8px;margin-left:8px;border-radius:50%;background:var(--green-500);vertical-align:middle}

/* Ergebnis: Karte mit Zahl und Aufschlüsselung — unscharf, solange gesperrt. */
.ergebnis{position:relative;border-radius:var(--radius-lg);background:var(--green-100);padding:var(--space-6) var(--space-5);overflow:hidden}
.ergebnis__inhalt{transition:filter var(--dur-slow) var(--ease-out),opacity var(--dur-slow)}
.ergebnis.is-gesperrt .ergebnis__inhalt{filter:blur(9px);opacity:.55;user-select:none;pointer-events:none}
.ergebnis__label{display:block;text-align:center;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--green-700);font-weight:var(--fw-semibold)}
.ergebnis__zahl{display:block;text-align:center;font-size:clamp(1.9rem,1.4rem + 2vw,2.8rem);font-weight:var(--fw-bold);color:var(--navy);line-height:1.15;margin:6px 0 var(--space-4)}
.ergebnis__zeilen{list-style:none;margin:0;padding:var(--space-3) 0 0;border-top:1px solid rgba(8,154,56,.25)}
.ergebnis__zeilen li{display:flex;justify-content:space-between;gap:var(--space-4);padding:7px 0;font-size:.92rem;line-height:1.4;border-bottom:1px solid rgba(8,154,56,.12)}
.ergebnis__zeilen li span{color:var(--text)}
.ergebnis__zeilen li strong{white-space:nowrap;color:var(--navy);font-weight:var(--fw-semibold)}
.ergebnis__zeilen .ergebnis__summe{border-bottom:0;padding-top:12px;font-size:1rem}
.ergebnis__zeilen .ergebnis__summe strong{color:var(--green-700);font-size:1.1rem}
.ergebnis__schloss{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;padding:var(--space-5);color:var(--navy)}
.ergebnis__schloss svg{color:var(--green-700);margin-bottom:4px}
.ergebnis__schloss strong{font-size:1.1rem}
.ergebnis__schloss span{font-size:.92rem;color:var(--text);max-width:46ch;line-height:1.5}
.ergebnis.is-gesperrt .ergebnis__schloss{display:flex}
/* Hinter dem Schloss braucht die Karte Mindesthöhe, sonst quetscht sich der
   Text über zwei Zeilen Preis. */
.ergebnis.is-gesperrt{min-height:260px}

.ergebnis__drin{list-style:none;margin:var(--space-4) 0 var(--space-6);padding:0;display:grid;gap:8px}
.ergebnis__drin li{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;color:var(--text);line-height:1.45}
.ergebnis__drin svg{flex:none;margin-top:3px;color:var(--green-700)}

.ergebnis__fertig{margin:0 0 var(--space-5);padding:var(--space-4) var(--space-5);border-radius:var(--radius-md);background:var(--green-100);border:1px solid rgba(8,154,56,.3);font-size:.95rem;line-height:1.55}
.ergebnis__fertig strong{display:block;color:var(--navy);margin-bottom:4px}

/* Das Formular im Rechner: kein Karten-in-Karte-Rahmen. */
.wizard .request-card--kompakt{box-shadow:none;border:1px solid var(--border)}

@media (max-width:640px){
  .wizard{padding:var(--space-4);border-radius:var(--radius-lg)}
  .wizard__punkte li{font-size:.68rem}
  .wizard__punkte li span{width:30px;height:30px;font-size:.85rem}
  .wizard__punkte::before{top:14px;left:15px;right:15px}
  .kacheln--3,.kacheln--4{grid-template-columns:repeat(2,1fr)}
  .kacheln--inline{grid-template-columns:repeat(2,1fr)}
  .ergebnis__zeilen li{flex-direction:column;gap:2px}
  .ergebnis__zeilen li strong{white-space:normal}
  .ergebnis__zeilen .ergebnis__summe{flex-direction:row}
  .wizard__nav .btn{flex:1}
}

/* Rechner-Band (Startseite / Leistungsseiten): zwei Karten, mittig. */
.section--rechner-band{padding-top:0}
.rechner-band{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5);max-width:900px;margin-inline:auto}
.rechner-band--eins{grid-template-columns:minmax(0,1fr);max-width:520px}
.rechner-band__karte{display:flex;flex-direction:column;align-items:flex-start}
.rechner-band__karte .btn{margin-top:auto}
@media (max-width:760px){.rechner-band{grid-template-columns:1fr}}