@import url('fonts.css');

/* ============================================================
   S+P Bau GmbH – Design-System
   Farben exakt aus dem Firmenlogo gesampelt.
   ============================================================ */
:root{
  --ink:#1F2C2A;          /* Logo-Dunkel */
  --ink-2:#182320;        /* noch dunkler, für Verläufe */
  --accent:#A3C8D8;       /* Logo-Hellblau */
  --accent-deep:#3E7893;  /* dunklere Variante – Kontrast auf Weiß (AA) */
  --paper:#FFFFFF;
  --paper-soft:#F3F6F6;
  --line:#DFE6E5;
  --grey:#63706E;
  --maxw:1180px;
  --maxw-wide:1400px;
  --ease:cubic-bezier(.19,1,.22,1);
}

*{box-sizing:border-box}
/* Anker-Sprünge: der fixe Header darf die Überschrift nicht verdecken */
section[id], header[id]{scroll-margin-top:72px}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3{font-weight:800; line-height:1.08; letter-spacing:-.025em; margin:0}
h2{font-size:clamp(28px,3.2vw,44px)}
h3{font-size:19px; letter-spacing:-.01em}
p{margin:0 0 1em}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px; width:100%}
.wrap-wide{max-width:var(--maxw-wide)}
.eyebrow{
  font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent-deep); margin-bottom:12px;
}
.block{padding:clamp(56px,7vw,96px) 0}
.block.soft{background:var(--paper-soft)}
.block.dark{background:linear-gradient(170deg,var(--ink) 0%,var(--ink-2) 100%); color:#fff}
.block.dark .eyebrow{color:var(--accent)}
.section-head{max-width:700px; margin-bottom:clamp(30px,3.6vw,48px)}
.section-head--center{margin-left:auto; margin-right:auto; text-align:center}
.section-head p{color:var(--grey); font-size:17px; margin:14px 0 0}
.block.dark .section-head p{color:#C3CFCD}
.lead{font-size:19px; line-height:1.55}
.lead-dark{color:#C3CFCD; max-width:430px; margin-bottom:28px}

/* --- Die drei Logo-Balken als Marken-Element --------------- */
.bars{display:flex; gap:5px; align-items:center}
.bars i{display:block; width:9px; height:26px; background:var(--accent); transform:skewX(-18deg)}
.bars.sm i{width:6px; height:16px}

/* --- Navigation -------------------------------------------- */
nav{
  position:fixed; inset:0 0 auto 0; z-index:100; padding:16px 0;
  transition:background-color .45s var(--ease), box-shadow .45s var(--ease), padding .45s var(--ease);
}
nav.scrolled{background:rgba(255,255,255,.93); backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--line); padding:9px 0}
nav .wrap{max-width:var(--maxw-wide); display:flex; align-items:center; justify-content:space-between; gap:24px}
nav .logo img{height:36px; width:auto; transition:height .45s var(--ease)}
nav.scrolled .logo img{height:30px}
nav .logo .dark{display:none}
nav.scrolled .logo .light{display:none}
nav.scrolled .logo .dark{display:block}
nav ul{display:flex; gap:28px; list-style:none; margin:0; padding:0}
nav ul a{position:relative; text-decoration:none; font-size:15px; font-weight:500; color:#fff; transition:color .3s var(--ease)}
nav.scrolled ul a{color:var(--ink)}
nav ul a::after{content:""; position:absolute; left:0; bottom:-5px; width:0; height:2px; background:var(--accent-deep); transition:width .35s var(--ease)}
nav.scrolled ul a:hover::after, nav ul a:focus-visible::after{width:100%}
nav ul a:hover{color:var(--accent)}
nav.scrolled ul a:hover{color:var(--accent-deep)}
.nav-cta{
  display:inline-flex; align-items:center; padding:11px 20px; background:var(--ink);
  color:#fff !important; text-decoration:none; font-size:15px; font-weight:600;
  transition:background-color .3s var(--ease);
}
nav.scrolled .nav-cta{background:var(--ink)}
.nav-cta:hover{background:var(--accent-deep)}
.burger{display:none; width:42px; height:42px; border:0; background:none; padding:9px; cursor:pointer}
.burger span{display:block; height:2px; background:#fff; margin:5px 0; transition:.35s var(--ease)}
nav.scrolled .burger span{background:var(--ink)}
nav.open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
nav.open .burger span:nth-child(2){opacity:0}
nav.open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* --- Hero -------------------------------------------------- */
.hero{position:relative; display:flex; align-items:stretch; overflow:hidden; min-height:100svh}
.hero-media{position:absolute; inset:0}
.hero-media img{width:100%; height:100%; object-fit:cover}
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(31,44,42,.74) 0%,rgba(31,44,42,.56) 34%,rgba(31,44,42,.93) 100%);
}
.hero-wrap{position:relative; z-index:2; display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:0}
.hero-inner{color:#fff; max-width:820px; padding:120px 0 44px}
.claim{
  font-size:clamp(15px,1.5vw,18px); font-weight:600; letter-spacing:.06em;
  color:#fff; margin:20px 0 14px; text-transform:uppercase;
  text-shadow:0 1px 14px rgba(24,35,32,.75);
}
.hero h1{font-size:clamp(38px,5.8vw,72px); letter-spacing:-.035em}
.hero h1 .hl{color:var(--accent)}
.hero .sub{font-size:clamp(16px,1.7vw,20px); color:#E4EDEB; text-shadow:0 1px 12px rgba(24,35,32,.5); margin:20px 0 30px; max-width:610px}
.btns{display:flex; gap:13px; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; justify-content:center; padding:15px 28px;
  text-decoration:none; font-weight:600; font-size:16px; border:2px solid transparent; cursor:pointer;
  transition:background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn-solid{background:var(--accent); color:var(--ink)}
.btn-solid:hover{background:#fff}
.btn-ghost{border-color:rgba(255,255,255,.5); color:#fff}
.btn-ghost:hover{border-color:#fff; background:rgba(255,255,255,.1)}
/* Formular-Button: dunkel, wechselt beim Überfahren ins Markenblau */
.btn-ink{background:var(--ink); color:#fff}
.btn-ink:hover{background:var(--accent); color:var(--ink)}

/* Kurzprofil-Leiste am unteren Hero-Rand */
.hero-strip{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  border-top:1px solid rgba(255,255,255,.22); margin-bottom:0;
}
.hero-strip div{padding:22px 26px 26px 0}
.hero-strip strong{display:block; color:#fff; font-size:15px; font-weight:700; margin-bottom:3px}
.hero-strip span{color:#AFC0BE; font-size:13.5px; line-height:1.45; display:block}

/* --- Leistungen -------------------------------------------- */
.section-head--wide{
  max-width:none;
  padding-bottom:clamp(20px,2.2vw,32px); border-bottom:1px solid var(--line);
}
.section-head--wide h2{margin-bottom:clamp(14px,1.4vw,20px)}
.section-head--wide p{
  margin:0; max-width:830px;
  font-size:clamp(16px,1.25vw,19px); color:var(--grey); line-height:1.65;
}

.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.2vw,20px)}
.card{
  background:var(--paper); padding:clamp(24px,2.2vw,34px) clamp(22px,2vw,32px) clamp(26px,2.4vw,36px);
  position:relative; border-top:3px solid transparent;
  transition:border-color .4s var(--ease), transform .4s var(--ease),
             box-shadow .4s var(--ease), background-color .4s var(--ease);
}
.card:hover, .card.active{
  border-top-color:var(--accent);
  transform:translateY(-8px);
  box-shadow:0 30px 56px -24px rgba(31,44,42,.42);
  background:linear-gradient(180deg, rgba(163,200,216,.16) 0%, rgba(163,200,216,.05) 100%);
}
.card:hover .card-num, .card.active .card-num{color:var(--accent-deep)}
.card:hover h3, .card.active h3{color:var(--accent-deep)}
.card:hover li, .card.active li{border-color:rgba(62,120,147,.22)}
.card:hover ul, .card.active ul{border-color:rgba(62,120,147,.22)}
.card .card-num, .card h3{transition:color .4s var(--ease)}
.card-num{
  font-size:13px; font-weight:700; letter-spacing:.22em; color:var(--accent);
  margin-bottom:clamp(14px,1.4vw,20px);
}
.card h3{font-size:clamp(19px,1.45vw,23px); margin-bottom:8px; letter-spacing:-.02em}
.card-lead{
  font-size:14.5px; color:var(--accent-deep); margin:0 0 clamp(14px,1.3vw,20px);
  line-height:1.45; font-weight:500;
}
.card ul{margin:0; padding:0; list-style:none; border-top:1px solid var(--line); transition:border-color .4s var(--ease)}
.card li{
  font-size:14px; color:var(--grey); line-height:1.45;
  padding:9px 0; border-bottom:1px solid var(--line);
  transition:border-color .4s var(--ease);
}
.card li:last-child{border-bottom:0}

/* --- Ablauf: Timeline -------------------------------------- */
.timeline{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.1vw,18px);
  align-items:stretch;
}
.tl-step{
  position:relative; display:flex; flex-direction:column; justify-content:flex-start;
  padding:clamp(28px,2.8vw,46px) clamp(22px,2vw,34px);
  background-color:rgba(255,255,255,.04);
  background-image:
    linear-gradient(168deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.015) 52%, rgba(0,0,0,.08) 100%);
  border:1px solid rgba(255,255,255,.08);
  border-top:2px solid rgba(163,200,216,.55);
  transition:background-color .38s var(--ease), background-image .38s var(--ease),
             border-color .38s var(--ease), transform .38s var(--ease), box-shadow .38s var(--ease);
}
.tl-step:hover, .tl-step.active{
  background-color:var(--accent); background-image:none;
  border-color:var(--accent); border-top-color:var(--accent);
  transform:translateY(-6px);
  box-shadow:0 26px 48px -24px rgba(0,0,0,.55);
}
.tl-step:hover .tl-num, .tl-step.active .tl-num{color:rgba(31,44,42,.34)}
.tl-step:hover h3, .tl-step.active h3{color:var(--ink)}
.tl-step:hover p, .tl-step.active p{color:rgba(31,44,42,.86)}
.tl-num{
  transition:color .3s var(--ease);
  font-size:clamp(44px,3.9vw,64px); font-weight:800; line-height:.92;
  letter-spacing:-.05em; color:rgba(163,200,216,.32);
  margin:0 0 clamp(16px,1.6vw,24px);
}
.tl-step h3{
  transition:color .3s var(--ease);
  font-size:clamp(19px,1.5vw,25px); margin:0 0 clamp(12px,1.1vw,16px); color:#fff;
  letter-spacing:-.025em;
}
.tl-step p{font-size:15.5px; color:#AEBDBB; margin:0; line-height:1.7; transition:color .4s var(--ease)}
/* Abschlusszeile unter der Timeline */
.tl-cta{
  display:flex; align-items:center; justify-content:space-between; gap:clamp(20px,3vw,48px);
  margin-top:clamp(26px,3vw,44px); padding-top:clamp(22px,2.6vw,36px);
  border-top:1px solid rgba(255,255,255,.12);
}
.tl-cta p{margin:0; color:#B0BFBD; font-size:15.5px; max-width:620px; line-height:1.6}
.tl-cta .btn{flex:0 0 auto}

/* --- Einblicke: Bento-Raster -------------------------------- */
.bento{
  display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(2,minmax(0,1fr));
  gap:clamp(10px,1.1vw,16px); max-height:62svh;
}
.bento figure{position:relative; margin:0; overflow:hidden; background:var(--ink)}
.bento figure img{width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease), opacity .4s var(--ease)}
.bento figure:hover img{transform:scale(1.05)}
.b-lead{grid-column:span 2; grid-row:span 2}
.bento figcaption{
  position:absolute; inset:auto 0 0 0; padding:34px 18px 16px; color:#fff;
  background:linear-gradient(180deg,rgba(24,35,32,0) 0%,rgba(24,35,32,.86) 72%);
}
.bento figcaption strong{display:block; font-size:15px; font-weight:700; letter-spacing:-.01em}
.bento figcaption span{display:block; font-size:13px; color:#C3CFCD; margin-top:2px}
.b-lead figcaption{padding:48px 24px 22px}
.b-lead figcaption strong{font-size:20px}
.b-lead figcaption span{font-size:14.5px}

/* --- Unternehmen -------------------------------------------- */
.about{
  display:grid; grid-template-columns:.86fr 1.14fr; gap:clamp(30px,4vw,70px);
  align-items:stretch;
}
.about-img{margin:0; position:relative; overflow:hidden; display:flex}
.about-img img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/5}
.about-img::after{  /* feiner Akzentrahmen an der oberen Kante */
  content:""; position:absolute; top:0; left:0; width:clamp(48px,5vw,78px); height:3px;
  background:var(--accent);
}
.about-text{display:flex; flex-direction:column; justify-content:center}
.about-text h2{margin-bottom:clamp(16px,1.8vw,26px)}
.about-text .lead{
  font-size:clamp(17px,1.35vw,21px); color:var(--ink); line-height:1.5;
  margin-bottom:clamp(16px,1.6vw,24px); font-weight:500;
}
.about-text p{color:var(--grey); font-size:16px; line-height:1.65}
.about-text p:last-child{margin-bottom:0}

.facts-row{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,56px);
  margin-top:clamp(30px,3.4vw,54px); padding-top:clamp(24px,2.6vw,38px);
  border-top:1px solid var(--line);
}
.facts-row strong{
  display:block; font-size:clamp(22px,2vw,30px); font-weight:800; letter-spacing:-.025em;
  color:var(--ink); margin-bottom:8px;
}
.facts-row div{position:relative; padding-left:clamp(14px,1.2vw,20px)}
.facts-row div::before{
  content:""; position:absolute; left:0; top:4px; bottom:4px; width:2px; background:var(--accent);
}
.facts-row span{font-size:14.5px; color:var(--grey); line-height:1.5; display:block}

/* --- Kontakt + Formular ------------------------------------- */
.contact{display:grid; grid-template-columns:1fr 1.02fr; gap:clamp(32px,5vw,80px); align-items:center}
.contact-side h2{margin-bottom:clamp(14px,1.4vw,20px)}

/* Was nach dem Absenden passiert – nimmt dem Formular die Hemmschwelle */
.next-steps{
  list-style:none; margin:clamp(22px,2.4vw,34px) 0 0; padding:0; counter-reset:step;
}
.next-steps li{
  position:relative; padding:0 0 clamp(14px,1.4vw,20px) clamp(38px,3vw,48px); counter-increment:step;
}
.next-steps li::before{
  content:counter(step,decimal-leading-zero);
  position:absolute; left:0; top:1px;
  font-size:12.5px; font-weight:700; letter-spacing:.14em; color:var(--accent);
}
.next-steps li::after{
  content:""; position:absolute; left:clamp(10px,.9vw,14px); top:22px; bottom:4px; width:1px;
  background:rgba(163,200,216,.22);
}
.next-steps li:last-child{padding-bottom:0}
.next-steps li:last-child::after{display:none}
.next-steps strong{display:block; color:#fff; font-size:16px; font-weight:700; margin-bottom:3px}
.next-steps span{display:block; color:#A9B8B6; font-size:14.5px; line-height:1.55}
.assure{
  margin:clamp(18px,2vw,26px) 0 0; padding-left:clamp(14px,1.2vw,18px);
  border-left:2px solid var(--accent);
  color:#C3CFCD; font-size:14.5px; line-height:1.55;
}

.contact-lines{list-style:none; margin:clamp(22px,2.4vw,32px) 0 0; padding:0}
.contact-lines li{padding:13px 0; border-bottom:1px solid rgba(255,255,255,.14)}
.contact-lines li:first-child{border-top:1px solid rgba(255,255,255,.14)}
.contact-lines .k{font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:4px}
.contact-lines a{font-size:16px; font-weight:600; text-decoration:none}
.contact-lines a:hover{color:var(--accent)}

/* Das Formular ist der Blickfang: helle Fläche auf dunklem Grund */
.cform{
  background:var(--paper); color:var(--ink);
  padding:clamp(26px,2.8vw,42px);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.55);
  border-top:3px solid var(--accent);
}
.cform-head{margin-bottom:clamp(18px,1.8vw,26px); padding-bottom:clamp(14px,1.4vw,20px); border-bottom:1px solid var(--line)}
.cform-head h3{font-size:clamp(20px,1.6vw,26px); margin:0 0 5px; letter-spacing:-.02em}
.cform-head p{margin:0; font-size:14.5px; color:var(--grey)}
.f-row{display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,1.1vw,18px)}
.f-field{margin-bottom:clamp(12px,1.1vw,18px); display:flex; flex-direction:column}
.cform label{
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-deep); margin-bottom:7px; font-weight:600;
}
.cform input, .cform select, .cform textarea{
  font-family:inherit; font-size:15px; color:var(--ink); background:#FBFCFC;
  border:1px solid var(--line); padding:13px 15px; width:100%;
  transition:border-color .3s var(--ease), background-color .3s var(--ease);
}
.cform select{
  appearance:none; -webkit-appearance:none; padding-right:40px; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%233E7893' stroke-width='2' fill='none' stroke-linecap='square'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center;
}
.cform textarea{resize:vertical; min-height:92px}
.cform input::placeholder, .cform textarea::placeholder{color:#9AA5A3}
.cform input:focus, .cform select:focus, .cform textarea:focus{
  outline:none; border-color:var(--accent-deep); background:#fff;
}
.cform .btn{width:100%; margin-top:4px; font-size:16.5px; padding:17px 28px}
.cform .note{font-size:12.5px; color:var(--grey); margin:14px 0 0; line-height:1.5}
.cform .note a{color:var(--accent-deep)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.form-status{padding:12px 14px; margin-bottom:16px; font-size:14.5px; font-weight:600}
.form-status.ok{background:rgba(62,120,147,.12); color:var(--accent-deep); border-left:3px solid var(--accent-deep)}
.form-status.err{background:#FFEFE8; color:#A24B21; border-left:3px solid #A24B21}

/* Platzhalter für fehlende Angaben – unübersehbar */
.todo{background:#FFE9A8; color:#5A4300; font-weight:700; padding:2px 8px; font-size:12.5px; display:inline-block}

/* --- Footer ------------------------------------------------- */
footer{background:var(--ink-2); color:#9FAFAD; padding:52px 0 30px; font-size:14px}
footer .cols{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px; padding-bottom:30px; border-bottom:1px solid rgba(255,255,255,.14)}
footer img{height:38px; width:auto; margin-bottom:14px}
footer .f-claim{color:#fff; font-weight:600; margin-bottom:12px}
footer h4{color:#fff; font-size:13px; letter-spacing:.1em; text-transform:uppercase; margin:0 0 12px; font-weight:600}
footer ul{list-style:none; margin:0; padding:0}
footer li{padding:4px 0}
footer a{text-decoration:none}
footer a:hover{color:var(--accent)}
.footer-bottom{display:flex; justify-content:space-between; gap:20px; padding-top:20px; flex-wrap:wrap; font-size:13px}

/* --- Rechtstexte -------------------------------------------- */
.legal{padding:140px 0 80px; max-width:780px}
.legal h1{font-size:clamp(32px,4.4vw,46px); margin-bottom:30px}
.legal h2{font-size:21px; margin:36px 0 10px}
.legal p, .legal li{color:var(--ink); opacity:.88; font-size:16px}
.legal ul{padding-left:20px; margin:0 0 1em}
.legal li{padding:3px 0}
.legal-intro{
  font-size:17.5px; color:var(--ink); padding-left:18px;
  border-left:3px solid var(--accent); margin-bottom:34px; line-height:1.6;
}

/* --- Reveal -------------------------------------------------- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .85s var(--ease), transform .85s var(--ease)}
.reveal.in{opacity:1; transform:none}
.d1{transition-delay:.08s} .d2{transition-delay:.16s}

/* ============================================================
   SNAP-SCROLLING – jede Sektion füllt den Bildschirm (ab Desktop)
   ============================================================ */
@media (min-width:880px) and (min-height:700px){
  /* Snap NUR auf der Startseite – auf Impressum/Datenschutz gibt es keine
     Vollbild-Sektionen, dort würde „mandatory" die Seite ans Ende ziehen */
  html.home{scroll-snap-type:y mandatory; scroll-behavior:smooth}
  /* Kein Anker-Versatz im Snap-Modus: scroll-margin-top würde die Snap-Punkte
     verschieben – oben bliebe ein Streifen stehen, unten würde abgeschnitten. */
  .home section[id], .home header[id]{scroll-margin-top:0}
  .hero, section.block{
    min-height:100svh;
    scroll-snap-align:start; scroll-snap-stop:always;
  }
  section.block{
    display:flex; flex-direction:column; justify-content:safe center;
    padding:clamp(72px,12vh,92px) 0 clamp(32px,6vh,52px);
  }
  .home footer{scroll-snap-align:end}

  /* Typo und Abstände an die Bildschirmhöhe koppeln, damit jede
     Sektion auch auf flachen Laptops (768–800 px) komplett passt */
  .section-head{flex:0 0 auto; margin-bottom:clamp(16px,2.6vh,34px)}
  .block h2{font-size:clamp(25px,3.7vh,44px)}
  .block .section-head p{font-size:clamp(13.5px,1.9vh,17px); margin-top:clamp(8px,1.3vh,14px)}
  .section-head--wide{margin-bottom:clamp(12px,1.8vh,34px); padding-bottom:clamp(10px,1.5vh,32px)}
  .section-head--wide h2{margin-bottom:clamp(6px,1.1vh,20px)}
  .section-head--wide p{font-size:clamp(13px,1.7vh,19px); line-height:1.5}
  #leistungen h2{font-size:clamp(24px,3.3vh,44px)}
  .card{padding:clamp(12px,1.85vh,34px) clamp(18px,1.9vw,32px) clamp(12px,2vh,36px)}
  .card-num{font-size:clamp(11.5px,1.5vh,13px); margin-bottom:clamp(6px,1.1vh,20px)}
  .card h3{font-size:clamp(15px,1.95vh,23px); margin-bottom:clamp(3px,.7vh,8px)}
  .card-lead{font-size:clamp(12.5px,1.55vh,14.5px); margin-bottom:clamp(6px,1.15vh,20px); line-height:1.4}
  .card li{font-size:clamp(12px,1.5vh,14px); padding:clamp(3px,.6vh,9px) 0; line-height:1.4}
  /* Ablauf: Kopf oben, Felder in der Mitte, Abschluss unten –
     der freie Raum verteilt sich zwischen die Blöcke statt in die Karten */
  #ablauf .wrap{
    display:flex; flex-direction:column; flex:1 1 auto; min-height:0;
    justify-content:space-between; padding-top:clamp(8px,1.6vh,30px);
  }
  #ablauf .section-head{margin-bottom:0}
  .timeline{flex:0 0 auto}
  #ablauf h2{font-size:clamp(28px,4.4vh,52px)}
  .tl-step{padding:clamp(20px,3.4vh,46px) clamp(18px,1.8vw,34px)}
  .tl-num{font-size:clamp(32px,6.4vh,64px); margin-bottom:clamp(10px,2vh,24px)}
  .tl-step h3{font-size:clamp(17px,2.6vh,25px); margin-bottom:clamp(8px,1.4vh,16px)}
  .tl-step p{font-size:clamp(13px,1.8vh,15px)}
  .tl-cta{flex:0 0 auto}

  /* Hero und Bildergalerie auch auf flachen Fenstern (ab 620 px Höhe) exakt eine Seite */
  .hero-inner{padding:clamp(88px,14.5vh,140px) 0 clamp(24px,3.8vh,44px)}
  .hero h1{font-size:clamp(32px,6.8vh,72px)}
  .hero .sub{font-size:clamp(14.5px,2.1vh,20px); margin:clamp(10px,2vh,20px) 0 clamp(16px,3vh,30px)}
  .claim{margin:clamp(8px,1.8vh,20px) 0 clamp(7px,1.3vh,14px)}
  .hero .bars i{height:clamp(16px,2.8vh,26px)}
  .hero-strip div{padding:clamp(11px,2vh,22px) 26px clamp(12px,2.4vh,26px) 0}
  .hero-strip strong{font-size:clamp(13px,1.7vh,15px)}
  .hero-strip span{font-size:clamp(11.5px,1.5vh,13.5px)}
  .btn{padding:clamp(11px,1.9vh,15px) clamp(20px,2vw,28px); font-size:clamp(14.5px,1.9vh,16px)}
  #einblicke{padding-top:clamp(66px,10.6vh,92px)}
  #einblicke .section-head{margin-bottom:clamp(7px,1.1vh,34px)}
  #einblicke .section-head p{font-size:clamp(12.5px,1.6vh,17px); margin-top:clamp(5px,.9vh,14px)}
  .bento{gap:clamp(8px,1.1vh,16px)}
  .bento figcaption{padding:clamp(20px,3.4vh,34px) 18px clamp(9px,1.5vh,16px)}
  .b-lead figcaption{padding:clamp(26px,4.4vh,48px) 24px clamp(12px,2vh,22px)}
  .next-steps{margin-top:clamp(14px,2.2vh,34px)}
  .next-steps li{padding-bottom:clamp(10px,1.5vh,20px)}
  .next-steps strong{font-size:clamp(14px,1.9vh,16px)}
  .next-steps span{font-size:clamp(12.5px,1.65vh,14.5px)}
  .assure{margin-top:clamp(12px,1.8vh,26px); font-size:clamp(12.5px,1.65vh,14.5px)}
  .contact-lines{margin-top:clamp(14px,2.2vh,32px)}
  .contact-lines li{padding:clamp(8px,1.3vh,13px) 0}
  .cform{padding:clamp(20px,3vh,42px) clamp(22px,2.2vw,42px)}
  .cform-head{margin-bottom:clamp(12px,1.7vh,26px); padding-bottom:clamp(10px,1.4vh,20px)}
  .f-field{margin-bottom:clamp(9px,1.3vh,18px)}
  .cform textarea{min-height:clamp(64px,10vh,110px)}
  .cform .btn{padding:clamp(13px,1.9vh,17px) 28px}
  .tl-cta{margin-top:clamp(16px,2.6vh,44px); padding-top:clamp(14px,2.4vh,36px)}
  .tl-cta p{font-size:clamp(13.5px,1.8vh,15.5px)}
  .about-text p{font-size:clamp(13px,1.72vh,16px); line-height:1.55; margin-bottom:clamp(7px,1.1vh,14px)}
  .about-text .lead{font-size:clamp(15px,2.1vh,21px); margin-bottom:clamp(8px,1.4vh,24px); line-height:1.45}
  .about-text h2{margin-bottom:clamp(10px,1.8vh,26px)}
  /* Unternehmen: Bild und Text füllen den Bildschirm, Kennzahlen sitzen unten */
  #unternehmen .wrap{display:flex; flex-direction:column; flex:1 1 auto; min-height:0}
  .about{flex:1 1 auto; min-height:0; grid-template-rows:minmax(0,1fr)}
  .about-img, .about-text{min-height:0}
  .about-img img{aspect-ratio:auto; height:100%; max-height:none}
  .facts-row{flex:0 0 auto}
  .facts-row{margin-top:clamp(18px,2.8vh,54px); padding-top:clamp(16px,2.2vh,38px)}
  .facts-row strong{font-size:clamp(18px,2.8vh,30px); margin-bottom:clamp(4px,.8vh,8px)}
  .facts-row span{font-size:clamp(12.5px,1.6vh,14.5px)}
  /* Einblicke: das Bildraster füllt exakt den Rest der Bildschirmhöhe */
  #einblicke .wrap{display:flex; flex-direction:column; flex:1 1 auto; min-height:0}
  .bento{flex:1 1 auto; min-height:0; max-height:none; height:auto}
}

/* --- Responsive ---------------------------------------------- */
@media (max-width:1180px){
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .timeline{grid-template-columns:repeat(2,1fr); row-gap:36px}
  .tl-step::before{right:0}
}
@media (max-width:980px){
  .split, .contact, .about{grid-template-columns:1fr}
  .about-img img{aspect-ratio:16/10}
  .facts-row{grid-template-columns:1fr; gap:18px}

  .bento{grid-template-columns:repeat(2,1fr); grid-template-rows:none; max-height:none}
  .b-lead{grid-column:span 2; grid-row:auto; aspect-ratio:16/10}
  .bento figure:not(.b-lead){aspect-ratio:4/3}
  footer .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .burger{display:block}
  nav ul{
    position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0;
    background:var(--paper); padding:8px 28px 20px; box-shadow:0 18px 30px rgba(31,44,42,.14);
    opacity:0; visibility:hidden; transform:translateY(-10px);
    transition:opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s;
  }
  nav.open ul{opacity:1; visibility:visible; transform:none;
    transition:opacity .3s var(--ease), transform .3s var(--ease), visibility 0s;}
  nav ul a, nav.scrolled ul a{color:var(--ink); display:block; padding:13px 0; border-bottom:1px solid var(--line)}
  nav .nav-cta{display:none}
  .hero-inner{padding:110px 0 54px}
  /* Die drei Kurzpunkte stehen mobil ohnehin in den Leistungen –
     der Hero bleibt dadurch luftig statt überfüllt */
  .hero-strip{display:none}
  .hero-wrap{justify-content:center}
}
@media (max-width:620px){
  body{font-size:16px}
  /* Mobil kompakter: weniger Luft in den Karten, kürzere Wege beim Scrollen */
  .block{padding:clamp(44px,11vw,64px) 0}
  .wrap{padding:0 22px}
  .card{padding:22px 20px 24px}
  .card h3{font-size:19px}
  .card-lead{font-size:14.5px}
  .card li{font-size:14.5px; padding:8px 0}
  .tl-step{padding:24px 22px 26px}
  .tl-num{font-size:40px; margin-bottom:12px}
  .tl-step h3{font-size:20px}
  .about-text .lead{font-size:17px}
  .about-text p{font-size:15.5px}
  .facts-row strong{font-size:21px}
  .next-steps li{padding-left:34px}
  .legal{padding:104px 0 60px}
  .legal h2{font-size:19px; margin:28px 0 8px}
  .legal p, .legal li{font-size:15.5px}
  .legal-intro{font-size:16px}
  .cform{padding:22px 20px 26px}
  footer{padding:40px 0 26px}
  .tl-cta{flex-direction:column; align-items:stretch; text-align:left}
  .grid-3, .timeline{grid-template-columns:1fr}
  .bento{grid-template-columns:1fr}
  .b-lead{grid-column:span 1}
  .f-row{grid-template-columns:1fr; gap:0}
  footer .cols{grid-template-columns:1fr}
  .btns .btn{width:100%}
  .qual-item{flex-direction:column; gap:4px}
  .qual-item strong{min-width:0}
}

/* --- Barrierefreiheit ---------------------------------------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:3px solid var(--accent-deep); outline-offset:3px;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-snap-type:none; scroll-behavior:auto}
  .reveal{opacity:1; transform:none; transition:none}
  *{animation:none !important}
}