@import url("fonts.css");

/* =====================================================================
   Lanz Entrümpelung – Stylesheet
   Farben: Weiß, Logoblau (#0054a6), dunkles Blau (#00305f)
   Ecken: durchgängig 0px. Fluchten: eine gemeinsame Container-Breite.
   ===================================================================== */

:root{
  --blue:#0054a6;
  --blue-700:#004a92;
  --blue-dark:#00305f;
  --blue-deep:#012242;
  --ink:#11161d;
  --body:#3f4854;
  --muted:#6c7684;
  --line:#dee3ea;
  --line-soft:#e9edf2;
  --line-strong:#c6cfda;
  --surface:#f5f7fa;
  --surface-2:#eef2f7;
  --white:#ffffff;

  --serif:"Source Serif 4",Charter,"Bitstream Charter","Iowan Old Style",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  /* Eine einzige Quelle für alle Seitenabstände – garantiert gleiche Fluchten */
  --gutter:clamp(20px,5.2vw,72px);
  --maxw:1240px;
  --header-h:84px;
  --section-y:clamp(64px,7.4vw,108px);
  --gap-x:clamp(32px,4.4vw,64px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ------------------------------- Reset ------------------------------ */
*,*::before,*::after{box-sizing:border-box}
*{border-radius:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
body{
  margin:0;
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.72;
  color:var(--body);
  background:var(--white);
  font-feature-settings:"kern","liga","calt";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-wrap:break-word;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:var(--blue);text-decoration:none}
ul,ol{margin:0;padding:0}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
::selection{background:var(--blue);color:#fff}

/* ---------------------------- Typografie ---------------------------- */
h1,h2,h3,h4{
  font-family:var(--serif);
  font-optical-sizing:auto;
  color:var(--ink);
  font-weight:600;
  letter-spacing:-.012em;
  margin:0;
  text-wrap:balance;
}
h1{font-size:clamp(2.05rem,1.32rem + 2.35vw,3.15rem);line-height:1.13}
h2{font-size:clamp(1.66rem,1.2rem + 1.5vw,2.4rem);line-height:1.19}
h3{font-size:clamp(1.16rem,1.05rem + .35vw,1.34rem);line-height:1.34;letter-spacing:-.006em}
h4{font-size:1.0625rem;line-height:1.45;letter-spacing:0}
p{margin:0;text-wrap:pretty}
p + p{margin-top:1.05em}
strong,b{font-weight:600;color:var(--ink)}
small{font-size:.875rem}

.lead{
  font-size:clamp(1.06rem,1rem + .32vw,1.2rem);
  line-height:1.65;
  color:var(--body);
  max-width:56ch;
  text-wrap:pretty;
}
.prose p,.prose li{max-width:68ch}

/* ------------------------------ Layout ------------------------------ */
.container{
  width:100%;
  max-width:calc(var(--maxw) + 2 * var(--gutter));
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{padding-block:var(--section-y)}
.section--tight{padding-block:calc(var(--section-y) * .66)}
.section--surface{background:var(--surface)}
.section--dark{background:var(--blue-dark);color:#cadaea}
.section--dark h2,.section--dark h3,.section--dark h4{color:#fff}
.section--line{border-top:1px solid var(--line)}

/* Zweispalter: beide Spalten sind gleich hoch (stretch); der Text setzt
   oben bündig an und schiebt sein letztes Element per auto-Margin nach
   unten – dadurch stimmen obere und untere Flucht überein. */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--gap-x);
  align-items:stretch;
}
.split--wide-text{grid-template-columns:1.08fr 1fr}
.split--wide-media{grid-template-columns:1fr 1.08fr}
.split__col{display:flex;flex-direction:column;min-width:0}
.split__col > .split__foot{margin-top:auto;padding-top:clamp(20px,2.4vw,32px)}
/* optischer Ausgleich der halben Zeilenhöhe, damit die Versalhöhe der
   ersten Zeile exakt auf der Oberkante des Bildes sitzt */
.split__col--text > :first-child{margin-top:-.16em}
.split__media{align-self:stretch;display:flex;flex-direction:column}
.split__media > figure,.split__media > .figure{
  margin:0;display:flex;flex-direction:column;height:100%;justify-content:space-between}

/* Bildrahmen mit festem Seitenverhältnis – das Bild wird dadurch nie
   verzerrt, sondern nur skaliert. */
.frame{position:relative;overflow:hidden;background:var(--surface-2);display:block}
.frame > img{width:100%;height:100%;object-fit:cover;display:block}
.frame--43{aspect-ratio:4/3}
.frame--32{aspect-ratio:3/2}
.frame--169{aspect-ratio:16/9}
.frame--fill{flex:1 1 auto;min-height:220px}
.figcaption{margin-top:12px;font-size:.875rem;color:var(--muted);line-height:1.5}

.grid{display:grid;gap:clamp(20px,2.2vw,28px)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}

.section-head{max-width:60ch;margin-bottom:clamp(34px,4vw,54px)}
.section-head p{margin-top:16px}
.section-head--split{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:var(--gap-x);align-items:end;max-width:none;
}
.section-head--split h2{max-width:22ch}

/* ------------------------------ Buttons ----------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 30px;
  font-size:1rem;font-weight:500;line-height:1.2;
  border:1px solid transparent;
  transition:background-color .22s var(--ease),color .22s var(--ease),
             border-color .22s var(--ease);
  cursor:pointer;text-align:center;
}
.btn--primary{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn--primary:hover{background:var(--blue-dark);border-color:var(--blue-dark)}
.btn--outline{background:transparent;color:var(--blue);border-color:var(--line-strong)}
.btn--outline:hover{border-color:var(--blue);background:var(--blue);color:#fff}
.btn--ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.42)}
.btn--ghost-light:hover{background:#fff;color:var(--blue-dark);border-color:#fff}
.btn--light{background:#fff;color:var(--blue-dark);border-color:#fff}
.btn--light:hover{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn--block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}

/* Textlink mit wanderndem Pfeil */
.arrow-link{
  display:inline-flex;align-items:center;gap:9px;
  font-weight:500;color:var(--blue);
  border-bottom:1px solid transparent;padding-bottom:2px;
  transition:border-color .2s var(--ease),color .2s var(--ease);
}
.arrow-link svg{transition:transform .24s var(--ease);flex:none}
.arrow-link:hover{border-bottom-color:currentColor}
.arrow-link:hover svg{transform:translateX(5px)}
.arrow-link--light{color:#fff}

/* ------------------------------ Header ------------------------------ */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:120;
  height:var(--header-h);
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background-color .3s var(--ease),border-color .3s var(--ease);
}
.site-header__inner{
  height:100%;display:flex;align-items:center;justify-content:space-between;gap:28px;
}
.logo{display:flex;align-items:center;flex:none}
.logo img{
  height:38px;width:auto;
  filter:brightness(0) invert(1);
  transition:filter .3s var(--ease);
}
.site-header.is-solid{background:#fff;border-bottom-color:var(--line)}
.site-header.is-solid .logo img{filter:none}

.nav{display:flex;align-items:center;gap:clamp(18px,1.9vw,30px);margin-left:auto}
.nav__list{display:flex;align-items:center;gap:clamp(16px,1.7vw,28px);list-style:none}
.nav__item{position:relative}
.nav__link{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.975rem;font-weight:500;color:#fff;
  padding:8px 0;position:relative;white-space:nowrap;
  transition:color .25s var(--ease);
}
.nav__link::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .26s var(--ease);
}
.nav__link:hover::after,.nav__item.is-open > .nav__link::after,
.nav__link[aria-current="page"]::after{transform:scaleX(1)}
.site-header.is-solid .nav__link{color:var(--blue-dark)}
.site-header.is-solid .nav__link:hover{color:var(--blue)}
.nav__chevron{transition:transform .26s var(--ease)}
.nav__item.is-open .nav__chevron{transform:rotate(180deg)}

.nav__phone{
  display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  font-size:.975rem;font-weight:500;color:#fff;
  border:1px solid rgba(255,255,255,.45);padding:11px 20px;
  transition:background-color .24s var(--ease),color .24s var(--ease),border-color .24s var(--ease);
}
.nav__phone:hover{background:#fff;color:var(--blue-dark);border-color:#fff}
.site-header.is-solid .nav__phone{color:#fff;background:var(--blue);border-color:var(--blue)}
.site-header.is-solid .nav__phone:hover{background:var(--blue-dark);border-color:var(--blue-dark)}

/* Dropdown Leistungen */
.submenu{
  position:absolute;top:calc(100% + 18px);left:50%;transform:translate(-50%,8px);
  width:min(680px,calc(100vw - 2 * var(--gutter)));
  background:#fff;border:1px solid var(--line);
  box-shadow:0 18px 44px -22px rgba(4,26,54,.34);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s var(--ease),transform .24s var(--ease),visibility .24s;
}
.submenu::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
.nav__item.is-open > .submenu{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.submenu__grid{display:grid;grid-template-columns:1fr 1fr;list-style:none}
.submenu__link{
  display:block;padding:18px 24px;border-bottom:1px solid var(--line-soft);
  transition:background-color .2s var(--ease);
}
.submenu__grid > li:nth-child(odd) .submenu__link{border-right:1px solid var(--line-soft)}
.submenu__link:hover{background:var(--surface)}
.submenu__title{
  display:block;font-family:var(--serif);font-size:1.02rem;font-weight:600;
  color:var(--blue-dark);line-height:1.35;transition:color .2s var(--ease);
}
.submenu__link:hover .submenu__title{color:var(--blue)}
.submenu__desc{display:block;font-size:.855rem;color:var(--muted);line-height:1.5;margin-top:4px}
.submenu__foot{padding:15px 24px;background:var(--surface);display:flex;justify-content:space-between;align-items:center;gap:16px}
.submenu__foot .arrow-link{font-size:.93rem}
.submenu__foot span{font-size:.87rem;color:var(--muted)}

/* Hamburger */
.burger{
  display:none;width:44px;height:44px;margin-right:-10px;
  align-items:center;justify-content:center;flex:none;
}
.burger span{
  display:block;width:24px;height:1.5px;background:#fff;position:relative;
  transition:background-color .2s var(--ease);
}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:24px;height:1.5px;background:inherit;
  transition:transform .3s var(--ease);
}
.burger span::before{top:-7px}
.burger span::after{top:7px}
.site-header.is-solid .burger span{background:var(--blue-dark)}
.is-menu-open .burger span{background:transparent}
.is-menu-open .burger span::before{transform:translateY(7px) rotate(45deg);background:var(--blue-dark)}
.is-menu-open .burger span::after{transform:translateY(-7px) rotate(-45deg);background:var(--blue-dark)}

/* ------------------------------- Hero ------------------------------- */
.hero{
  background:var(--blue-dark);
  color:#cfdcea;
  padding-top:calc(var(--header-h) + clamp(46px,5.6vw,84px));
  padding-bottom:clamp(56px,6.4vw,92px);
  position:relative;overflow:hidden;
}
.hero h1{color:#fff}
.hero .lead{color:#c3d3e4;margin-top:22px}
.hero__grid{display:grid;grid-template-columns:1.02fr 1fr;gap:var(--gap-x);align-items:stretch}
.hero__text{display:flex;flex-direction:column;justify-content:space-between;min-width:0}
.hero__text > :first-child{margin-top:-.14em}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero__facts{
  display:flex;flex-wrap:wrap;gap:10px 26px;list-style:none;
  margin-top:34px;padding-top:24px;border-top:1px solid rgba(255,255,255,.16);
  font-size:.945rem;color:#b9cbdd;
}
.hero__facts li{display:flex;align-items:center;gap:9px}
.hero__facts svg{flex:none;color:#7fb1e6}
.hero__media{align-self:stretch;display:flex}
.hero__media .frame{width:100%}

/* Schlanker Kopfbereich der Unterseiten */
.pagehead{
  background:var(--blue-dark);color:#c3d3e4;
  padding-top:calc(var(--header-h) + clamp(40px,4.6vw,68px));
  padding-bottom:clamp(40px,4.6vw,68px);
}
.pagehead h1{color:#fff;max-width:20ch}
.pagehead .lead{color:#c3d3e4;margin-top:20px}
.pagehead--wide h1{max-width:26ch}
.breadcrumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;list-style:none;
  font-size:.87rem;color:#93aec9;margin-bottom:22px;
}
.breadcrumb a{color:#93aec9;transition:color .2s var(--ease)}
.breadcrumb a:hover{color:#fff}
.breadcrumb li:not(:last-child)::after{content:"/";margin-left:8px;color:#587c9f}
.breadcrumb [aria-current]{color:#dce7f1}

/* --------------------------- Vertrauensband -------------------------- */
.trustbar{border-bottom:1px solid var(--line);background:#fff}
.trustbar__inner{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;
  gap:clamp(24px,3vw,44px);align-items:center;padding-block:clamp(26px,3vw,38px);
}
.trustbar__item{display:flex;gap:14px;align-items:flex-start}
.trustbar__item svg{flex:none;color:var(--blue);margin-top:3px}
.trustbar__item strong{display:block;font-family:var(--serif);font-size:1.04rem;color:var(--ink);line-height:1.35;font-weight:600}
.trustbar__item span{display:block;font-size:.88rem;color:var(--muted);line-height:1.5;margin-top:3px}
.trustbar__seal{display:flex;justify-content:flex-end}
.trustbar__seal img{height:76px;width:auto}

/* ------------------------------ Karten ------------------------------ */
.card{
  display:flex;flex-direction:column;height:100%;
  background:#fff;border:1px solid var(--line);
  transition:border-color .26s var(--ease),transform .26s var(--ease),
             box-shadow .26s var(--ease);
}
.card:hover{border-color:var(--line-strong);transform:translateY(-3px);
  box-shadow:0 16px 34px -24px rgba(4,26,54,.42)}
.card__body{padding:clamp(22px,2.2vw,30px);display:flex;flex-direction:column;flex:1 1 auto}
.card__body p{margin-top:11px;font-size:.95rem;color:var(--body)}
.card__foot{margin-top:auto;padding-top:20px}
.card h3 a{color:inherit;transition:color .2s var(--ease)}
.card:hover h3 a{color:var(--blue)}
.card .frame{border-bottom:1px solid var(--line)}

/* Leistungskarte mit Symbol */
.service-card{
  display:flex;flex-direction:column;height:100%;padding:clamp(24px,2.4vw,32px);
  background:#fff;border:1px solid var(--line);
  transition:border-color .26s var(--ease),transform .26s var(--ease);
}
.service-card:hover{border-color:var(--blue);transform:translateY(-3px)}
.service-card__icon{color:var(--blue);margin-bottom:18px}
.service-card h3{margin-bottom:10px;min-height:2.68em}
.service-card h3 a{color:inherit;transition:color .2s var(--ease)}
.service-card:hover h3 a{color:var(--blue)}
.service-card p{font-size:.95rem;flex:1 1 auto}
.service-card .arrow-link{margin-top:20px}

/* Ablauf-Schritte */
.steps{list-style:none;display:grid;gap:0;border-top:1px solid var(--line)}
.steps li{
  display:grid;grid-template-columns:64px minmax(0,1fr);
  gap:clamp(16px,2vw,28px);padding-block:clamp(22px,2.4vw,30px);
  border-bottom:1px solid var(--line);align-items:start;
}
.steps__num{font-family:var(--serif);font-size:1.5rem;color:var(--blue);line-height:1.2}
.steps h3{margin-bottom:7px}
.steps p{font-size:.95rem;max-width:64ch}
.section--dark .steps,.section--dark .steps li{border-color:rgba(255,255,255,.16)}
.section--dark .steps__num{color:#7fb1e6}

/* Merkmalsliste mit Haken */
.checklist{list-style:none;display:grid;gap:13px}
.checklist li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;font-size:.985rem}
.checklist svg{color:var(--blue);margin-top:5px;flex:none}
.checklist--light svg{color:#7fb1e6}
.checklist--2{grid-template-columns:1fr 1fr;gap:13px clamp(24px,3vw,44px)}
.checklist--fill{height:100%;align-content:space-between}

/* Faktenkasten */
.factbox{
  border:1px solid var(--line);border-left:3px solid var(--blue);
  background:var(--surface);padding:clamp(22px,2.4vw,30px);
}
.factbox h2,.factbox h3{font-size:1.12rem;margin-bottom:14px}
.factbox ul{list-style:none;display:grid;gap:10px}
.factbox li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;font-size:.955rem;line-height:1.6}
.factbox li::before{content:"";width:5px;height:5px;background:var(--blue);margin-top:.65em}

/* ------------------------- Vorher / Nachher ------------------------- */
.compare{position:relative;user-select:none;touch-action:pan-y;background:var(--surface-2);overflow:hidden}
.compare__img{display:block;width:100%;height:auto}
.compare__after{position:absolute;top:0;left:0;bottom:0;overflow:hidden;width:50%}
.compare__after img{position:absolute;top:0;left:0;height:100%;width:auto;max-width:none}
.compare__handle{
  position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;
  transform:translateX(-1px);box-shadow:0 0 0 1px rgba(4,26,54,.16);pointer-events:none;
}
.compare__grip{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:46px;height:46px;background:#fff;display:flex;align-items:center;
  justify-content:center;color:var(--blue-dark);
  box-shadow:0 4px 16px -6px rgba(4,26,54,.5);
}
.compare__range{
  position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;
  cursor:ew-resize;margin:0;background:none;
}
.compare__range::-webkit-slider-thumb{-webkit-appearance:none;width:46px;height:100%;cursor:ew-resize}
.compare__range::-moz-range-thumb{width:46px;height:100%;cursor:ew-resize;border:0;background:none}
.compare__tag{
  position:absolute;top:14px;font-size:.78rem;
  background:rgba(1,34,66,.82);color:#fff;padding:6px 12px;pointer-events:none;
}
.compare__tag--l{left:14px}
.compare__tag--r{right:14px}

/* --------------------------- Kundenstimmen -------------------------- */
.quote-card{
  display:flex;flex-direction:column;height:100%;padding:clamp(26px,2.6vw,34px);
  background:#fff;border:1px solid var(--line);margin:0;
  transition:border-color .26s var(--ease)}
.quote-card:hover{border-color:var(--line-strong)}
.stars{display:flex;gap:3px;color:#e8a317;margin-bottom:16px}
.quote-card blockquote{margin:0;font-family:var(--serif);font-size:1.09rem;line-height:1.58;color:var(--ink);flex:1 1 auto}
.quote-card figcaption{
  margin-top:22px;padding-top:16px;border-top:1px solid var(--line);
  font-size:.89rem;color:var(--muted);display:flex;justify-content:space-between;
  align-items:center;gap:14px;flex-wrap:wrap;
}
.quote-card figcaption strong{color:var(--ink);font-weight:500}
.google-source{display:inline-flex;align-items:center;gap:7px;color:var(--muted);white-space:nowrap}

/* ----------------------------- Formulare ---------------------------- */
.field{display:flex;flex-direction:column;gap:8px}
.field > label,.legend{font-size:.93rem;font-weight:500;color:var(--ink)}
.input{
  width:100%;padding:13px 15px;background:#fff;
  border:1px solid var(--line-strong);color:var(--ink);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
  -webkit-appearance:none;appearance:none;
}
.input:focus{outline:none;border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
.input::placeholder{color:#9aa4b1}
textarea.input{min-height:132px;resize:vertical;line-height:1.6}
select.input{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236c7684' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:40px;
}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form-grid .span-2{grid-column:1/-1}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.consent{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;align-items:start;font-size:.875rem;line-height:1.6;color:var(--muted)}
.consent input{width:18px;height:18px;margin-top:3px;accent-color:var(--blue)}
.form-note{font-size:.83rem;color:var(--muted);line-height:1.6}
.form-status{padding:16px 18px;border:1px solid var(--line);background:var(--surface);font-size:.94rem}
.form-status--ok{border-color:#b4d7b8;background:#f1f8f2;color:#245c2c}
.form-status--err{border-color:#e2b9b9;background:#fbf3f3;color:#8a2b2b}

/* Auswahlkacheln im Rechner */
.choices{display:grid;gap:12px}
.choices--2{grid-template-columns:1fr 1fr}
.choices--3{grid-template-columns:repeat(3,1fr)}
.choice{position:relative;display:block}
.choice input{position:absolute;opacity:0;width:0;height:0}
.choice__box{
  display:flex;flex-direction:column;gap:5px;height:100%;
  padding:16px 18px;border:1px solid var(--line-strong);background:#fff;
  cursor:pointer;transition:border-color .2s var(--ease),background-color .2s var(--ease);
}
.choice__box strong{font-weight:500;color:var(--ink);font-size:.985rem;line-height:1.4}
.choice__box span{font-size:.845rem;color:var(--muted);line-height:1.5}
.choice__box:hover{border-color:var(--blue)}
.choice input:checked + .choice__box{border-color:var(--blue);background:#f2f7fd;box-shadow:inset 0 0 0 1px var(--blue)}
.choice input:focus-visible + .choice__box{outline:2px solid var(--blue);outline-offset:2px}

/* --------------------------- Kostenrechner -------------------------- */
.calc{background:#fff;border:1px solid var(--line)}
.calc__head{
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  padding:20px clamp(22px,2.6vw,34px);border-bottom:1px solid var(--line);background:var(--surface);
}
.calc__step-label{font-size:.89rem;color:var(--muted)}
.calc__progress{position:relative;height:2px;background:var(--line);width:min(220px,42vw)}
.calc__progress i{position:absolute;top:0;bottom:0;left:0;background:var(--blue);transition:width .35s var(--ease)}
.calc__body{padding:clamp(24px,2.8vw,38px)}
.calc__step{display:none}
.calc__step.is-active{display:block;animation:fade .32s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.calc__q{font-family:var(--serif);font-size:clamp(1.24rem,1.1rem + .5vw,1.5rem);color:var(--ink);line-height:1.3;margin-bottom:8px;font-weight:600}
.calc__hint{font-size:.91rem;color:var(--muted);margin-bottom:24px;max-width:58ch}
.calc__nav{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  margin-top:30px;padding-top:24px;border-top:1px solid var(--line);
}
.calc__back{font-size:.94rem;color:var(--muted);display:inline-flex;align-items:center;gap:8px;transition:color .2s var(--ease)}
.calc__back:hover{color:var(--blue)}
.calc__result{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-x);align-items:start}
.calc__price{
  font-family:var(--serif);font-size:clamp(2.4rem,1.8rem + 2.4vw,3.4rem);
  color:var(--blue-dark);line-height:1.05;letter-spacing:-.02em;font-weight:600;
}
.calc__price-note{font-size:.9rem;color:var(--muted);margin-top:12px}
.calc__summary{list-style:none;border-top:1px solid var(--line)}
.calc__summary li{
  display:flex;justify-content:space-between;gap:20px;padding-block:11px;
  border-bottom:1px solid var(--line-soft);font-size:.93rem;
}
.calc__summary li span:first-child{color:var(--muted)}
.calc__summary li span:last-child{color:var(--ink);text-align:right;font-weight:500}
.range-row{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:18px}
.range-out{font-family:var(--serif);font-size:1.6rem;color:var(--blue-dark);font-weight:600}
.range-scale{display:flex;justify-content:space-between;font-size:.82rem;color:var(--muted);margin-top:10px}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:2px;background:var(--line-strong);
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:22px;height:22px;background:var(--blue);cursor:grab;border:0;
}
input[type=range]::-moz-range-thumb{width:22px;height:22px;background:var(--blue);cursor:grab;border:0;border-radius:0}

/* ------------------------------ Akkordeon --------------------------- */
.accordion{border-top:1px solid var(--line)}
.accordion__item{border-bottom:1px solid var(--line)}
.accordion__btn{
  display:flex;justify-content:space-between;align-items:flex-start;gap:24px;
  width:100%;text-align:left;padding-block:clamp(18px,2vw,24px);
  font-family:var(--serif);font-size:clamp(1.04rem,1rem + .28vw,1.19rem);
  font-weight:600;color:var(--ink);line-height:1.42;
  transition:color .2s var(--ease);
}
.accordion__btn:hover{color:var(--blue)}
.accordion__icon{flex:none;margin-top:7px;position:relative;width:14px;height:14px}
.accordion__icon::before,.accordion__icon::after{
  content:"";position:absolute;background:var(--blue);transition:transform .28s var(--ease)}
.accordion__icon::before{left:0;top:6px;width:14px;height:1.5px}
.accordion__icon::after{left:6px;top:0;width:1.5px;height:14px}
.accordion__item.is-open .accordion__icon::after{transform:scaleY(0)}
.accordion__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s var(--ease)}
.accordion__item.is-open .accordion__panel{grid-template-rows:1fr}
.accordion__inner{overflow:hidden}
.accordion__inner > div{padding-bottom:clamp(20px,2.2vw,26px);max-width:70ch}
.accordion__inner p + p{margin-top:.9em}

/* -------------------------------- Blog ------------------------------ */
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:.85rem;color:var(--muted)}
.post-meta .dot{width:3px;height:3px;background:var(--line-strong);flex:none}
.article__layout{display:grid;grid-template-columns:minmax(0,1fr) 312px;gap:clamp(38px,5vw,76px);align-items:start}
.article__body > * + *{margin-top:1.15em}
.article__body h2{font-size:clamp(1.42rem,1.2rem + .8vw,1.85rem);margin-top:1.85em;line-height:1.24}
.article__body h3{margin-top:1.6em;font-size:1.18rem}
.article__body p,.article__body li{max-width:70ch}
.article__body ul,.article__body ol{display:grid;gap:9px}
.article__body ul{list-style:none;padding-left:0}
.article__body ul li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px}
.article__body ul li::before{content:"";width:5px;height:5px;background:var(--blue);margin-top:.62em}
.article__body ol{list-style:decimal;padding-left:24px}
.article__body ol li{padding-left:6px}
.article__body ol li::marker{color:var(--blue);font-family:var(--serif)}
.article__body a{border-bottom:1px solid var(--line-strong);transition:border-color .2s var(--ease)}
.article__body a:hover{border-bottom-color:var(--blue)}
.article__body blockquote{
  margin:1.6em 0;padding:4px 0 4px 26px;border-left:3px solid var(--blue);
  font-family:var(--serif);font-size:1.16rem;line-height:1.55;color:var(--ink);
}
.article__body figure{margin:1.9em 0}
.article__body table{width:100%;border-collapse:collapse;font-size:.94rem;margin:0}
.article__body th,.article__body td{padding:13px 16px;border:1px solid var(--line);text-align:left;vertical-align:top}
.article__body th{background:var(--surface);font-weight:500;color:var(--ink);font-family:var(--sans)}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.6em 0}
.aside{position:sticky;top:calc(var(--header-h) + 28px);display:grid;gap:26px}
.aside__box{border:1px solid var(--line);padding:24px}
.aside__box h3{font-size:1.06rem;margin-bottom:14px}
.aside__box p{font-size:.92rem}
.aside__box .btn{margin-top:18px}
.aside__box--blue{background:var(--surface);border-left:3px solid var(--blue)}
.toc{list-style:none;display:grid;gap:10px;font-size:.92rem}
.toc a{color:var(--body);border-bottom:1px solid transparent;transition:color .2s var(--ease),border-color .2s var(--ease)}
.toc a:hover{color:var(--blue);border-bottom-color:var(--blue)}

/* Stellenanzeige */
.job-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border:1px solid var(--line);margin:1.9em 0}
.job-facts > div{padding:18px 22px;border-bottom:1px solid var(--line-soft)}
.job-facts > div:nth-child(odd){border-right:1px solid var(--line-soft)}
.job-facts dt{font-size:.83rem;color:var(--muted);margin-bottom:4px}
.job-facts dd{margin:0;font-size:.98rem;color:var(--ink);font-weight:500}

/* -------------------------------- Karte ------------------------------ */
.map-consent{
  position:relative;aspect-ratio:16/10;background:var(--surface-2);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  text-align:center;padding:clamp(24px,4vw,44px);
}
.map-consent__inner{max-width:44ch;display:grid;gap:14px;justify-items:center}
.map-consent h3{font-size:1.12rem}
.map-consent p{font-size:.9rem;color:var(--muted)}
.map-consent iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}

/* ------------------------------- Footer ------------------------------ */
.site-footer{background:var(--blue-deep);color:#9fb6cd;font-size:.945rem}
.site-footer a{color:#c5d5e5;transition:color .2s var(--ease)}
.site-footer a:hover{color:#fff}
.site-footer h4{color:#fff;font-size:1.02rem;margin-bottom:18px}
.footer__grid{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1.15fr;
  gap:clamp(28px,3.4vw,56px);padding-block:clamp(52px,5.6vw,78px);
}
.footer__logo img{height:40px;width:auto;filter:brightness(0) invert(1)}
.footer__about{margin-top:22px;max-width:38ch;line-height:1.7;color:#9fb6cd}
.footer__list{list-style:none;display:grid;gap:11px}
.footer__contact{list-style:none;display:grid;gap:13px}
.footer__contact li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;align-items:start}
.footer__contact span{text-wrap:pretty}
.footer__contact svg{color:#6f9dcb;margin-top:4px;flex:none}
.footer__social{display:flex;gap:10px;margin-top:26px}
.footer__social a{
  width:42px;height:42px;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.2);color:#c5d5e5;
  transition:background-color .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease);
}
.footer__social a:hover{background:#fff;color:var(--blue-deep);border-color:#fff}
.footer__bar{
  border-top:1px solid rgba(255,255,255,.13);padding-block:24px;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 26px;font-size:.875rem;
}
.footer__bar ul{list-style:none;display:flex;flex-wrap:wrap;gap:12px 24px}

/* ------------------------------- CTA-Band ---------------------------- */
.cta{background:var(--blue);color:#dbe9f7}
.cta h2{color:#fff;max-width:20ch}
.cta__grid{display:grid;grid-template-columns:1.15fr auto;gap:var(--gap-x);align-items:center}
.cta p{margin-top:16px;max-width:50ch;color:#d3e4f5}
.cta__actions{display:flex;flex-direction:column;gap:12px;min-width:246px}

/* ----------------------------- Hilfsklassen -------------------------- */
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:var(--gutter);top:-70px;z-index:200;background:#fff;
  color:var(--blue-dark);padding:12px 20px;border:1px solid var(--blue);
  transition:top .2s var(--ease);
}
.skip-link:focus{top:14px}
.mt-0{margin-top:0}
.text-muted{color:var(--muted)}
.divider{height:1px;background:var(--line);border:0;margin:0}

/* ------------------------------ Responsive --------------------------- */
/* Zwischen 961 und 1180 px reicht der Platz nicht fuer Navigation und
   Telefonschaltflaeche - die Nummer steht weiterhin im Hero und im Fuss. */
@media (max-width:1180px){
  .nav__phone{display:none}
}
@media (max-width:1100px){
  .split--lead{grid-template-columns:1fr;gap:clamp(28px,5vw,44px)}
  .split--lead .split__col > .split__foot{margin-top:24px;padding-top:0}
}
@media (max-width:1080px){
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .trustbar__inner{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:26px}
  .trustbar__seal{grid-column:1/-1;justify-content:flex-start;border-top:1px solid var(--line);padding-top:24px}
  .article__layout{grid-template-columns:minmax(0,1fr)}
  .aside{position:static;grid-template-columns:1fr 1fr}
}
@media (max-width:960px){
  :root{--header-h:68px}
  .nav__list,.nav__phone{display:none}
  .burger{display:flex}
  .hero__grid{grid-template-columns:1fr;gap:clamp(30px,5vw,44px)}
  .hero__text{justify-content:flex-start}
  .split,.calc__result,.cta__grid,.section-head--split{grid-template-columns:1fr;gap:clamp(28px,5vw,44px)}
  .split--wide-text,.split--wide-media{grid-template-columns:1fr}
  .split__col > .split__foot{margin-top:24px;padding-top:0}
  .split--media-first .split__media{order:-1}
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .cta__actions{min-width:0}
  .section-head--split{align-items:start}
}
@media (max-width:760px){
  body{font-size:1.02rem;line-height:1.68}
  h1,h2,h3,.calc__q,.accordion__btn{hyphens:auto;-webkit-hyphens:auto}
  p,li,.lead{hyphens:auto;-webkit-hyphens:auto}
  .grid--2,.grid--3,.grid--4,.form-grid,.choices--2,.choices--3,
  .checklist--2,.aside,.job-facts{grid-template-columns:1fr}
  .job-facts > div:nth-child(odd){border-right:0}
  .trustbar__inner{grid-template-columns:1fr;row-gap:22px}
  .trustbar__seal{padding-top:20px}
  .btn{width:100%}
  .btn-row{flex-direction:column;gap:12px}
  .hero__facts{gap:12px 20px;font-size:.9rem}
  .steps li{grid-template-columns:44px minmax(0,1fr);gap:16px}
  .steps__num{font-size:1.3rem}
  .footer__grid{grid-template-columns:1fr;gap:38px}
  .quote-card blockquote{font-size:1.04rem}
  .compare__tag{font-size:.72rem;padding:5px 9px;top:10px}
  .compare__tag--l{left:10px}
  .compare__tag--r{right:10px}
  .submenu__grid{grid-template-columns:1fr}
}

/* Mobiles Menü */
.mobile-nav{
  position:fixed;top:var(--header-h);left:0;right:0;bottom:0;z-index:110;background:#fff;
  overflow-y:auto;overscroll-behavior:contain;
  transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .26s var(--ease),transform .3s var(--ease),visibility .3s;
  border-top:1px solid var(--line);
}
.is-menu-open .mobile-nav{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.is-menu-open{overflow:hidden}
.mobile-nav__list{list-style:none;padding:8px 0 0}
.mobile-nav__list > li{border-bottom:1px solid var(--line)}
.mobile-nav__link{
  display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;
  padding:19px 0;font-family:var(--serif);font-size:1.2rem;font-weight:600;
  color:var(--blue-dark);line-height:1.35;text-align:left;
}
.mobile-nav__link svg{flex:none;color:var(--blue);transition:transform .28s var(--ease)}
.mobile-nav__sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--ease)}
.mobile-nav__item.is-open .mobile-nav__sub{grid-template-rows:1fr}
.mobile-nav__item.is-open .mobile-nav__link svg{transform:rotate(180deg)}
.mobile-nav__sub-inner{overflow:hidden}
.mobile-nav__sub ul{list-style:none;padding:0 0 16px}
.mobile-nav__sub a{
  display:block;padding:11px 0 11px 18px;border-left:1px solid var(--line);
  color:var(--body);font-size:1rem;transition:color .2s var(--ease),border-color .2s var(--ease);
}
.mobile-nav__sub a:hover{color:var(--blue);border-left-color:var(--blue)}
.mobile-nav__foot{padding:28px 0 40px;display:grid;gap:14px}
.mobile-nav__meta{margin-top:10px;font-size:.9rem;color:var(--muted);line-height:1.7}

@media (min-width:961px){
  .mobile-nav{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms;transition-duration:.01ms;scroll-behavior:auto}
}

@media print{
  .site-header,.site-footer,.mobile-nav,.cta,.calc{display:none}
  body{color:#000}
}