/* ==================================================================
   B&H Express Logistik — style.css
   Tokenbasis: Universale-Briefing, Markenfarben aus dem Logo gezogen.
   Handgeschrieben, kein Build-Step, keine externen Abhaengigkeiten.
   ================================================================== */

/* ---------- Schrift ---------------------------------------------- */

@font-face{
  font-family:"Onest";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("/assets/fonts/onest-latin.woff2") format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
                U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Onest";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("/assets/fonts/onest-latin-ext.woff2") format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
                U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,
                U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- Tokens ----------------------------------------------- */

:root{
  /* Marke — aus B_H_Logo.pdf ausgelesen */
  --brand:        #004aad;   /* Wortmarke, Buttons, Links        */
  --brand-dark:   #003a88;   /* Hover                            */
  --brand-deep:   #14171a;   /* dunkle Flaechen, Footer          */
  --brand-deep-2: #0c0e10;   /* Verlaufspartner                  */
  --brand-grad:   #0f61cf;   /* Chevron-Verlauf, nur dekorativ   */

  --ink:      #14171a;
  --ink-soft: #5e6670;
  --tint:     #e9f1fc;
  --tint-line:#cfe0f7;
  --bg:       #ffffff;
  --bg-soft:  #fafafb;
  --line:     #e8eaec;

  --header-space:calc(78px + 2 * 1.15rem);
  --r-btn:300px;  --r-sm:10px;  --r-md:16px;  --r-lg:24px;  --r-xl:34px;

  --shadow-xs:0 1px 2px rgba(20,23,26,.06);
  --shadow-sm:0 6px 20px -8px rgba(20,23,26,.16);
  --shadow-md:0 22px 50px -20px rgba(20,23,26,.28);
  --shadow-lg:0 40px 80px -30px rgba(20,23,26,.35);

  --maxw:1280px;
  --header-gap:clamp(.7rem,1.6vw,1.15rem);
  --r-bar:999px;
  --r-panel:30px;
  --gutter:clamp(1.1rem,3vw,1.5rem);
  --header-h:78px;

  --font:"Onest",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ease:.32s cubic-bezier(.22,1,.36,1);
}

/* ---------- Reset ------------------------------------------------- */

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  margin:0;
  font-family:var(--font);
  font-weight:400;
  line-height:1.6;
  font-size:clamp(1.02rem,.97rem + .3vw,1.125rem);
  color:var(--ink);
  background:var(--bg);
  overflow-x:clip;
  padding-top:var(--header-space);
}
img,svg,video{ display:block; max-width:100%; height:auto }
button,input,select,textarea{ font:inherit; color:inherit }
h1,h2,h3,h4,p,ul,ol,figure{ margin:0 }
ul,ol{ padding:0; list-style:none }
a{ color:var(--brand); text-decoration-thickness:1px; text-underline-offset:.22em }
a:hover{ color:var(--brand-dark) }

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

.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;
}

.skip-link{
  position:absolute; left:.75rem; top:-4rem; z-index:200;
  background:var(--brand-deep); color:#fff; padding:.75rem 1.25rem;
  border-radius:var(--r-sm); transition:top var(--ease);
}
.skip-link:focus{ top:.75rem; color:#fff }

/* ---------- Typografie -------------------------------------------- */

h1{ font-size:clamp(2.9rem,1.7rem + 4.8vw,4.5rem); line-height:1.1;  font-weight:700; letter-spacing:-.025em }
h2{ font-size:clamp(2.1rem,1.4rem + 2.9vw,3rem);   line-height:1.18; font-weight:700; letter-spacing:-.02em }
h3{ font-size:clamp(1.45rem,1.15rem + 1vw,1.875rem);line-height:1.22;font-weight:600; letter-spacing:-.01em }
h4{ font-size:1.125rem; line-height:1.35; font-weight:600 }

.lead{ font-size:clamp(1.12rem,1.02rem + .55vw,1.3rem); line-height:1.55; color:var(--ink-soft) }
.eyebrow{
  display:inline-block; font-size:.8125rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--brand);
  margin-bottom:1rem;
}
.muted{ color:var(--ink-soft) }
.stack > * + *{ margin-top:1.1rem }

/* ---------- Layout ------------------------------------------------ */

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter) }
.section{ padding-block:clamp(4rem,2.5rem + 7vw,10rem) }
.section--soft{ background:var(--bg-soft) }
.section--tint{ background:var(--tint) }
.section--tight{ padding-block:clamp(3rem,2rem + 4vw,6rem) }

.section-head{ max-width:62ch; margin-bottom:clamp(2.5rem,1.5rem + 3vw,4rem) }
.section-head--center{ margin-inline:auto; text-align:center }

.grid{ display:grid; gap:clamp(1.25rem,.8rem + 1.6vw,2rem) }
.grid--2{ grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr)) }
.grid--3{ grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr)) }
.grid--4{ grid-template-columns:repeat(auto-fit,minmax(min(100%,13.5rem),1fr)) }

/* ---------- Buttons ----------------------------------------------- */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.95rem 1.7rem;
  font-weight:600; line-height:1.2; text-align:center; text-decoration:none;
  color:#fff; background:var(--brand);
  border:2px solid transparent; border-radius:var(--r-btn);
  cursor:pointer;
  transition:background var(--ease),transform var(--ease),
             border-color var(--ease),color var(--ease),box-shadow var(--ease);
}
.btn:hover{ background:var(--brand-dark); color:#fff; transform:translateY(-2px) }
.btn:active{ transform:translateY(0) }

.btn--lg{ padding:1.15rem 2.1rem; font-size:1.05rem }
.btn--dark{ background:var(--brand-deep) }
.btn--dark:hover{ background:#000 }
.btn--white{ background:#fff; color:var(--brand-deep) }
.btn--white:hover{ background:#fff; color:var(--brand); box-shadow:var(--shadow-sm) }
.btn--ghost{ background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.55) }
.btn--ghost:hover{ background:#fff; color:var(--brand-deep); border-color:#fff }
.btn--outline{ background:transparent; color:var(--brand-deep); border-color:var(--line) }
.btn--outline:hover{ background:transparent; color:var(--brand); border-color:var(--brand) }
.btn--text{
  padding:0; background:none; color:var(--brand); border-radius:0;
  border-bottom:2px solid currentColor;
}
.btn--text:hover{ background:none; color:var(--brand-dark); transform:none }

.btn-row{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2rem }

/* ---------- Header (schwebende Leiste) ---------- */
.header{
  position:fixed;inset:0 0 auto;z-index:100;
  padding:var(--header-gap) var(--gutter);
  padding-top:calc(var(--header-gap) + env(safe-area-inset-top,0px));
  pointer-events:none;
  transition:padding var(--ease);
}
.header.is-scrolled{--header-gap:.55rem}
.header__bar{
  pointer-events:auto;
  display:flex;align-items:center;gap:1.25rem;
  max-width:var(--maxw);margin-inline:auto;
  height:var(--header-h);padding:.5rem .6rem .5rem 1.75rem;
  background:#fff;border:1px solid rgba(20,23,26,.06);border-radius:var(--r-bar);
  box-shadow:0 10px 30px -12px rgba(20,23,26,.22),0 2px 6px -2px rgba(20,23,26,.07);
  transition:height var(--ease),box-shadow var(--ease);
}
.header.is-scrolled .header__bar{
  height:62px;
  box-shadow:0 16px 40px -16px rgba(20,23,26,.32),0 2px 6px -2px rgba(20,23,26,.1);
}
.header__logo{flex:0 0 auto;display:flex;align-items:center}
.header__logo img{width:clamp(132px,15vw,178px);transition:width var(--ease)}
.header.is-scrolled .header__logo img{width:clamp(120px,13vw,156px)}

.nav{display:flex;align-items:center;gap:.15rem;margin-inline:auto}
.nav a{
  position:relative;display:inline-block;padding:.55rem .8rem;
  font-weight:500;font-size:.95rem;color:var(--ink);text-decoration:none;
  border-radius:var(--r-sm);transition:color var(--ease),background var(--ease);
}
.nav a::after{
  content:"";position:absolute;left:.8rem;right:.8rem;bottom:.3rem;height:2px;
  background:var(--brand);border-radius:2px;
  transform:scaleX(0);transform-origin:left;transition:transform var(--ease);
}
.nav a:hover{color:var(--brand)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--brand);font-weight:600}
.nav__foot{display:none}

.header__actions{display:flex;align-items:center;gap:.35rem;flex:0 0 auto}
.header__tel{
  display:inline-flex;align-items:center;gap:.45rem;padding:.55rem .85rem;
  font-weight:600;font-size:.95rem;color:var(--ink);text-decoration:none;
  border-radius:var(--r-btn);transition:color var(--ease),background var(--ease);
}
.header__tel:hover{color:var(--brand);background:var(--tint)}

.burger{
  display:none;position:relative;width:46px;height:46px;flex:0 0 auto;
  padding:0;background:transparent;border:0;border-radius:50%;cursor:pointer;
  transition:background var(--ease);
}
.burger:hover{background:var(--tint)}
.burger span{
  position:absolute;left:50%;width:20px;height:2px;margin-left:-10px;
  background:var(--ink);border-radius:2px;
  transition:transform .4s cubic-bezier(.22,1,.36,1),opacity .18s ease,background var(--ease);
}
.burger span:nth-child(1){top:16px}
.burger span:nth-child(2){top:22px}
.burger span:nth-child(3){top:28px}
.burger[aria-expanded="true"] span{background:var(--brand)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.3)}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.scrim{
  position:fixed;inset:0;z-index:98;
  background:rgba(12,14,16,.34);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;
}
.scrim.is-open{opacity:1;visibility:visible}

@media (max-width:1040px){
  .header__bar{padding-left:1.1rem}
  .header__tel,.header__cta{display:none}
  .burger{display:block;margin-left:auto}

  .nav{
    position:fixed;z-index:99;
    left:var(--gutter);right:var(--gutter);
    top:calc(var(--header-h) + 2 * var(--header-gap) + env(safe-area-inset-top,0px) + .3rem);
    display:block;margin:0;padding:.55rem;
    background:#fff;border:1px solid rgba(20,23,26,.06);border-radius:var(--r-panel);
    box-shadow:0 30px 60px -22px rgba(20,23,26,.45),0 4px 10px -4px rgba(20,23,26,.12);
    opacity:0;visibility:hidden;
    transform:translateY(-12px) scale(.97);transform-origin:top right;
    transition:opacity .26s ease,transform .42s cubic-bezier(.22,1,.36,1),visibility .42s;
    max-height:calc(100dvh - var(--header-h) - 5rem);overflow-y:auto;
  }
  .nav.is-open{opacity:1;visibility:visible;transform:none}

  .nav a{
    display:flex;align-items:center;justify-content:space-between;
    padding:.95rem 1rem;font-size:1.08rem;font-weight:600;border-radius:14px;
    opacity:0;transform:translateY(10px);
    transition:opacity .34s ease,transform .34s cubic-bezier(.22,1,.36,1),background var(--ease),color var(--ease);
  }
  .nav a::after{
    content:"";position:static;width:7px;height:7px;
    border:0;border-right:2px solid var(--brand);border-top:2px solid var(--brand);
    background:none;border-radius:0;
    transform:rotate(45deg);transition:transform var(--ease);
  }
  .nav a:hover{background:var(--bg-soft)}
  .nav a[aria-current="page"]{background:var(--tint)}
  .nav.is-open a{opacity:1;transform:none}
  .nav.is-open a:nth-child(1){transition-delay:.05s}
  .nav.is-open a:nth-child(2){transition-delay:.09s}
  .nav.is-open a:nth-child(3){transition-delay:.13s}
  .nav.is-open a:nth-child(4){transition-delay:.17s}
  .nav.is-open a:nth-child(5){transition-delay:.21s}

  .nav__foot{
    display:grid;gap:.5rem;margin-top:.55rem;padding:.9rem .6rem .5rem;
    border-top:1px solid var(--line);
    opacity:0;transform:translateY(10px);
    transition:opacity .34s ease .24s,transform .34s cubic-bezier(.22,1,.36,1) .24s;
  }
  .nav.is-open .nav__foot{opacity:1;transform:none}
  .nav__foot .btn{width:100%}
  .nav__foot .nav__tel{
    display:flex;align-items:center;justify-content:center;gap:.5rem;
    padding:.8rem 1rem;font-weight:600;color:var(--ink);text-decoration:none;
    border:1px solid var(--line);border-radius:var(--r-btn);
  }
}

/* ---------- Hero -------------------------------------------------- */

.hero{ position:relative; isolation:isolate; color:#fff; background:var(--brand-deep);
       margin-top:calc(-1 * var(--header-space)); padding-top:var(--header-space) }
.hero__media{ position:absolute; inset:0; z-index:-2 }
.hero__media img{ width:100%; height:100%; object-fit:cover }
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg,rgba(12,14,16,.88) 0%,rgba(12,14,16,.72) 45%,rgba(12,14,16,.35) 100%);
}
.hero__inner{
  display:flex; flex-direction:column; justify-content:center;
  min-height:clamp(30rem,24rem + 22vw,44rem);
  padding-block:clamp(4rem,3rem + 5vw,7rem);
  max-width:56rem;
}
.hero h1{ color:#fff }
.hero .lead{ color:rgba(255,255,255,.82); margin-top:1.4rem; max-width:44rem }
.hero__proof{
  display:flex; flex-wrap:wrap; gap:.6rem 1.75rem;
  margin-top:2.5rem; padding-top:1.75rem;
  border-top:1px solid rgba(255,255,255,.18);
  font-size:.95rem; color:rgba(255,255,255,.78);
}
.hero__proof li{ display:flex; align-items:center; gap:.5rem }
.hero__proof li::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--brand); flex:0 0 auto;
}

/* ---------- Schnell-Kontakt-Band ---------------------------------- */

.quickbar{ margin-top:-3.5rem; position:relative; z-index:5 }
.quickbar__grid{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr)) }
.quickcard{
  display:flex; flex-direction:column; gap:.3rem;
  padding:1.5rem 1.6rem;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--shadow-sm); text-decoration:none; color:var(--ink);
  transition:transform var(--ease),box-shadow var(--ease),border-color var(--ease);
}
.quickcard:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--tint-line); color:var(--ink) }
.quickcard__label{ font-size:.8125rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--brand) }
.quickcard__value{ font-size:1.25rem; font-weight:600; line-height:1.3 }
.quickcard__hint{ font-size:.925rem; color:var(--ink-soft) }

/* ---------- Foto-Split -------------------------------------------- */

.split{ display:grid; gap:clamp(2rem,1rem + 4vw,4.5rem); align-items:center;
        grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr)) }
.split__media img{ width:100%; border-radius:var(--r-lg); box-shadow:var(--shadow-sm) }
.split--reverse .split__media{ order:2 }
@media (max-width:900px){ .split--reverse .split__media{ order:0 } }

.checklist li{ position:relative; padding-left:1.9rem; margin-top:.75rem }
.checklist li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:10px; height:10px; border-radius:2px; background:var(--brand);
}

/* ---------- Leistungskarten --------------------------------------- */

.card{
  display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden;
  transition:transform var(--ease),box-shadow var(--ease),border-color var(--ease);
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--tint-line) }
.card__media img{ width:100%; aspect-ratio:3/2; object-fit:cover }
.card__body{ display:flex; flex-direction:column; flex:1; padding:1.75rem 1.75rem 2rem }
.card__body h3{ margin-bottom:.85rem }
.card__list{ margin:.25rem 0 1.5rem; color:var(--ink-soft) }
.card__list li{ position:relative; padding-left:1.25rem; margin-top:.5rem; font-size:.975rem }
.card__list li::before{ content:""; position:absolute; left:0; top:.6em; width:7px; height:2px; background:var(--brand) }
.card__body .btn--text{ margin-top:auto; align-self:flex-start }

/* ---------- Zahlen-Kacheln ---------------------------------------- */

.stats{ display:grid; gap:1px; background:var(--line);
        border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
        grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr)) }
.stat{ padding:clamp(1.75rem,1rem + 2vw,2.75rem) 1.5rem; background:#fff; text-align:center }
.stat__value{
  font-size:clamp(2.4rem,1.6rem + 2.6vw,3.4rem); font-weight:700;
  line-height:1.05; letter-spacing:-.03em; color:var(--brand);
  font-variant-numeric:tabular-nums;
}
.stat__label{ margin-top:.5rem; font-size:.95rem; color:var(--ink-soft) }

/* ---------- Nachweise --------------------------------------------- */

.proof{ display:flex; flex-direction:column; gap:.4rem;
        padding:1.75rem; background:#fff;
        border:1px solid var(--line); border-left:4px solid var(--brand);
        border-radius:var(--r-sm) }
.proof h3{ font-size:1.125rem; font-weight:600 }
.proof p{ color:var(--ink-soft); font-size:.975rem }
.proof__meta{ margin-top:.4rem; font-size:.875rem; color:var(--ink-soft); font-variant-numeric:tabular-nums }

/* ---------- Ablauf ------------------------------------------------ */

.steps{ counter-reset:step }
.step{ position:relative; padding:2rem 1.75rem; background:#fff;
       border:1px solid var(--line); border-radius:var(--r-lg) }
.step::before{
  counter-increment:step; content:counter(step,decimal-leading-zero);
  display:block; margin-bottom:1rem;
  font-size:2rem; font-weight:700; line-height:1; color:var(--brand);
  font-variant-numeric:tabular-nums;
}
.step h3{ font-size:1.25rem; margin-bottom:.6rem }
.step p{ color:var(--ink-soft) }

/* ---------- Flotte / Technik -------------------------------------- */

.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-lg); background:#fff }
table{ width:100%; border-collapse:collapse; min-width:36rem }
th,td{ padding:1rem 1.25rem; text-align:left; border-bottom:1px solid var(--line); font-size:.975rem }
th{ font-weight:600; background:var(--bg-soft); white-space:nowrap }
tbody tr:last-child td{ border-bottom:0 }

/* ---------- Gebiet ------------------------------------------------ */

.area__plz{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.5rem }
.area__plz li{
  padding:.45rem 1rem; font-size:.95rem; font-weight:600;
  background:var(--tint); border:1px solid var(--tint-line);
  border-radius:var(--r-btn); color:var(--brand-dark);
}
.area__orte{ margin-top:1.5rem; color:var(--ink-soft); line-height:1.9 }

/* ---------- Galerie ----------------------------------------------- */

.gallery{ display:grid; gap:.75rem; grid-template-columns:repeat(auto-fit,minmax(min(46%,11rem),1fr)) }
.gallery img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--r-md) }

/* ---------- Video-Karte ------------------------------------------- */

.video-card{ border-radius:var(--r-lg); overflow:hidden; background:var(--brand-deep); box-shadow:var(--shadow-md) }
.video-card video{ width:100%; aspect-ratio:16/9; object-fit:cover }

/* ---------- FAQ --------------------------------------------------- */

.faq{ max-width:52rem }
.faq details{ border-bottom:1px solid var(--line) }
.faq summary{
  display:flex; align-items:flex-start; justify-content:space-between; gap:1.5rem;
  padding:1.4rem 0; font-size:1.125rem; font-weight:600;
  cursor:pointer; list-style:none;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{
  content:"+"; flex:0 0 auto; font-size:1.5rem; font-weight:400; line-height:1;
  color:var(--brand); transition:transform var(--ease);
}
.faq details[open] summary::after{ transform:rotate(45deg) }
.faq details > p{ padding-bottom:1.5rem; color:var(--ink-soft); max-width:60ch }

/* ---------- Formularkarte ----------------------------------------- */

.formcard{
  padding:clamp(1.75rem,1.2rem + 2.5vw,3.25rem);
  color:#fff; border-radius:var(--r-xl);
  background:linear-gradient(150deg,var(--brand-deep) 0%,var(--brand-deep-2) 100%);
  box-shadow:var(--shadow-lg);
}
.formcard h2,.formcard h3{ color:#fff }
.formcard .lead{ color:rgba(255,255,255,.75) }

.field{ display:flex; flex-direction:column; gap:.45rem; margin-top:1.1rem }
.field label{ font-size:.925rem; font-weight:600; color:rgba(255,255,255,.88) }
.field .req{ color:var(--brand-grad) }
.field input,.field select,.field textarea{
  width:100%; padding:.85rem 1rem;
  background:rgba(255,255,255,.07); color:#fff;
  border:1px solid rgba(255,255,255,.2); border-radius:var(--r-sm);
  transition:border-color var(--ease),background var(--ease);
}
.field input::placeholder,.field textarea::placeholder{ color:rgba(255,255,255,.45) }
.field input:focus,.field select:focus,.field textarea:focus{
  background:rgba(255,255,255,.12); border-color:#fff; outline:none;
}
.field select option{ color:var(--ink) }
.field textarea{ min-height:9rem; resize:vertical }
.field input[type="file"]{ padding:.6rem }
.field--row{ display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr)) }

.consent{ display:flex; gap:.75rem; align-items:flex-start; margin-top:1.5rem;
          font-size:.925rem; color:rgba(255,255,255,.8) }
.consent input{ width:1.15rem; height:1.15rem; margin-top:.2rem; flex:0 0 auto; accent-color:var(--brand) }
.consent a{ color:#fff }

.hp{ position:absolute; left:-9999px; opacity:0; height:0; width:0 }

.formnote{ margin-top:1.25rem; font-size:.85rem; color:rgba(255,255,255,.6) }
.alert{ padding:1rem 1.25rem; border-radius:var(--r-sm); margin-bottom:1.5rem; font-size:.975rem }
.alert--ok{ background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.3); color:#fff }
.alert--err{ background:rgba(0,74,173,.18); border:1px solid var(--brand); color:#fff }

/* ---------- CTA-Band ---------------------------------------------- */

.ctaband{
  color:#fff;
  background:linear-gradient(120deg,var(--brand-deep) 0%,var(--brand-deep-2) 100%);
}
.ctaband__inner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:2rem; padding-block:clamp(3rem,2rem + 3vw,4.5rem);
}
.ctaband h2{ color:#fff; max-width:34ch }
.ctaband p{ margin-top:.75rem; color:rgba(255,255,255,.72); max-width:48ch }
.ctaband .btn-row{ margin-top:0 }

/* ---------- Footer ------------------------------------------------ */

.footer{ color:rgba(255,255,255,.72); background:var(--brand-deep) }
.footer__grid{
  display:grid; gap:2.5rem; padding-block:clamp(3rem,2rem + 3vw,5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));
}
.footer h3,.footer__grid h2{
  margin-bottom:1.1rem; font-size:.875rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase;
  color:#fff;                      /* Kontraststelle — nach Farbwechsel pruefen */
}
.footer a{ color:rgba(255,255,255,.72); text-decoration:none; transition:color var(--ease) }
.footer a:hover{ color:#fff }
.footer li{ margin-top:.55rem }
.footer address{ font-style:normal; line-height:1.8 }
.footer__logo img{ width:180px; margin-bottom:1.25rem }
.footer__strip{ display:grid; gap:.5rem; padding-bottom:2.5rem;
                grid-template-columns:repeat(auto-fit,minmax(min(30%,7rem),1fr)) }
.footer__strip img{ width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:var(--r-sm); opacity:.8 }
.footer__bottom{
  display:flex; flex-wrap:wrap; gap:.75rem 2rem; justify-content:space-between;
  padding-block:1.5rem; border-top:1px solid rgba(255,255,255,.14);
  font-size:.875rem; color:rgba(255,255,255,.55);
}

/* ---------- WhatsApp-Button --------------------------------------- */

.wa{
  position:fixed; right:1.1rem; z-index:90;
  bottom:calc(1.1rem + env(safe-area-inset-bottom,0px));
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.85rem 1.35rem; font-weight:600; font-size:.95rem;
  color:#fff; text-decoration:none; background:#25d366;
  border-radius:var(--r-btn); box-shadow:var(--shadow-md);
  transition:transform var(--ease),box-shadow var(--ease);
}
.wa:hover{ color:#fff; transform:translateY(-2px); box-shadow:var(--shadow-lg) }
.wa svg{ width:20px; height:20px; fill:currentColor; flex:0 0 auto }
/* Nie ueber dem Absenden-Button des Formulars liegen */
.has-form .wa{ display:none }
@media (min-width:900px){ .has-form .wa{ display:inline-flex } }

/* ---------- Breadcrumb -------------------------------------------- */

.crumbs{ padding-block:1.25rem; font-size:.875rem; color:var(--ink-soft) }
.crumbs ol{ display:flex; flex-wrap:wrap; gap:.4rem }
.crumbs li:not(:last-child)::after{ content:"/"; margin-left:.4rem; color:var(--line) }

/* ---------- Seitenkopf (Unterseiten) ------------------------------ */

.pagehead{ padding-block:clamp(2.5rem,1.5rem + 4vw,5rem) 0 }
.pagehead__inner{ max-width:52rem }
.pagehead .lead{ margin-top:1.4rem }

/* ---------- Reveal ------------------------------------------------ */

.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1) }
.reveal.is-in{ opacity:1; transform:none }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none }
}

/* ---------- Print -------------------------------------------------- */

@media print{
  .header,.wa,.ctaband,.quickbar{ display:none }
  body{ color:#000 }
}

/* ==================================================================
   Verläufe im iOS-Stil, Abstände, Ausrichtung
   Bewusst am Ende: überschreibt die Grundregeln oben per Reihenfolge.
   ================================================================== */

:root{
  --brand-from:#1c74e0;
  --brand-to:#004aad;
  --grad-brand:linear-gradient(180deg,var(--brand-from) 0%,var(--brand-to) 38%);
  --grad-brand-x:linear-gradient(90deg,var(--brand-from) 0%,var(--brand-to) 100%);
  /* Wanderverlauf: doppelt so breit wie der Button, beim Hover wandert
     die Position nach rechts — dadurch laeuft das Licht durch. */
  --sweep-brand:linear-gradient(to right,var(--brand-from) 0%,var(--brand-to) 51%,var(--brand-from) 100%);
  --sweep-dark:linear-gradient(to right,#2b3036 0%,#0c0e10 51%,#2b3036 100%);
  --grad-dark:linear-gradient(180deg,#23272c 0%,#0c0e10 100%);
}

/* ---------- Buttons ---------- */
/* Verlauf laeuft waagerecht und wandert beim Hover durch. Pillenform,
   leichter Schriftschnitt, weicher Schatten. Kein Innenschein. */
.btn{
  background-image:var(--sweep-brand);
  background-size:200% auto;
  background-position:left center;
  box-shadow:0 4px 14px -10px rgba(20,23,26,.42);
  font-weight:500;
  transition:background-position .55s ease,
             transform var(--ease),
             box-shadow var(--ease),
             color var(--ease),
             border-color var(--ease);
}
.btn:hover{
  background-position:right center;
  box-shadow:0 8px 20px -12px rgba(20,23,26,.45);
}
.btn:active{ box-shadow:none }

.btn--lg{ padding:1.05rem 2.1rem; font-size:1.02rem }

.btn--dark{
  background-image:var(--sweep-dark);
  box-shadow:0 4px 14px -10px rgba(12,14,16,.5);
}
.btn--dark:hover{ background-position:right center }

.btn--white{ background:#fff; box-shadow:0 4px 14px -10px rgba(12,14,16,.45) }
.btn--white:hover{ background:#fff }

.btn--ghost{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.34); box-shadow:none }
.btn--ghost:hover{ background:rgba(255,255,255,.95); border-color:transparent }

/* Keine Wanderung, wenn der Nutzer weniger Bewegung wuenscht */
@media (prefers-reduced-motion:reduce){
  .btn:hover{ background-position:left center }
}

.btn--outline{ background:transparent; box-shadow:none }
.btn--outline:hover{ background:transparent }

.btn--text{ background:none; box-shadow:none }
.btn--text:hover{ background:none }

/* ---------- Verlaufstext ---------- */
.stat__value,.step::before{
  background:var(--grad-brand);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}

/* ---------- Navi-Unterstrich nur am Desktop ---------- */
@media (min-width:1041px){
  .nav a::after{ background:var(--grad-brand-x) }
}

/* ---------- Nachweiskante ---------- */
.proof{ position:relative; border-left-color:transparent }
.proof::before{
  content:"";position:absolute;left:-4px;top:0;bottom:0;width:4px;
  background:var(--grad-brand);
  border-radius:var(--r-sm) 0 0 var(--r-sm);
}

/* ---------- Hero: Luft unter der schwebenden Leiste ---------- */
.hero{ padding-top:calc(var(--header-space) + clamp(2rem,5.5vw,4.5rem)) }
.hero__inner{ padding-block:clamp(2rem,1.5rem + 3vw,4.5rem) clamp(4rem,3rem + 5vw,7rem) }

/* ---------- Mobil: Burger nach rechts ---------- */
@media (max-width:1040px){
  .header__actions{ margin-left:auto }
}

/* ---------- Hero: Haken statt Fliesstext ---------- */
.hero__checks{
  display:grid;gap:.95rem;margin-top:2.25rem;max-width:46rem;
}
.hero__checks li{
  display:flex;align-items:flex-start;gap:.85rem;
  font-size:clamp(1rem,.94rem + .35vw,1.16rem);
  font-weight:500;line-height:1.45;color:rgba(255,255,255,.93);
}
.hero__checks svg{
  flex:0 0 auto;width:23px;height:23px;margin-top:.14em;
  color:var(--brand-from);
}

/* ==================================================================
   Hero nach dem Vorbild: schmale Spalte, helles Overlay,
   Statuszeile, Haken als Leistungsaussagen, ein Ziel, Diagonale
   ================================================================== */

/* Navi rechts statt mittig */
@media (min-width:1041px){
  .nav{ margin-left:auto; margin-right:.5rem }
}

/* Overlay heller, Foto bleibt lesbar */
.hero::after{
  background:linear-gradient(100deg,
    rgba(12,14,16,.80) 0%,
    rgba(12,14,16,.58) 42%,
    rgba(12,14,16,.26) 100%);
}
.hero__media img{ filter:saturate(.92) }

.hero__inner{
  position:relative;z-index:1;
  max-width:54rem;
  min-height:clamp(33rem,26rem + 21vw,46rem);
}

/* Schmalere Spalte, ruhigere Groesse */
.hero h1{
  font-size:clamp(2.5rem,1.55rem + 3.3vw,3.9rem);
  max-width:15ch;
}

/* Statuszeile mit Punkt */
.hero__status{
  display:inline-flex;align-items:center;gap:.6rem;
  margin-bottom:1.5rem;
  font-size:.95rem;font-weight:500;color:rgba(255,255,255,.85);
}
.hero__status::before{
  content:"";width:9px;height:9px;border-radius:50%;
  background:#34d399;box-shadow:0 0 0 4px rgba(52,211,153,.2);
  flex:0 0 auto;
}

/* Haken in Weiss, etwas kraeftiger gesetzt */
.hero__checks{ gap:1.05rem;margin-top:2.4rem;max-width:42rem }
.hero__checks li{ font-weight:600;color:#fff }
.hero__checks svg{ color:rgba(255,255,255,.75);width:22px;height:22px }

/* Pfeil im Button */
.btn__arrow{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;flex:0 0 auto;
  margin-left:.45rem;margin-right:-.85rem;
  border-radius:50%;background:rgba(255,255,255,.22);
  transition:transform var(--ease);
}
.btn__arrow svg{ width:15px;height:15px;stroke:currentColor }
.btn:hover .btn__arrow{ transform:translateX(3px) }

/* Weisse Diagonale als Abschluss */
.hero::before{
  content:"";position:absolute;left:0;right:0;bottom:-1px;z-index:0;
  height:clamp(38px,5.5vw,104px);
  background:var(--bg);
  clip-path:polygon(0 100%,100% 0,100% 100%);
}
@media (max-width:700px){
  .hero::before{ clip-path:polygon(0 100%,100% 35%,100% 100%) }
}

/* ==================================================================
   Proportionen nach Vorbild nachgezogen
   ================================================================== */

/* Leiste haelt mehr Abstand zum Rand */
.header{ padding-inline:clamp(1.1rem,4vw,3.25rem) }
.header__bar{ padding:.45rem .55rem .45rem 1.85rem; gap:1rem }

/* Logo kleiner im Verhaeltnis zur Leiste */
.header__logo img{ width:clamp(142px,14vw,190px) }
.header.is-scrolled .header__logo img{ width:clamp(128px,12.5vw,166px) }

/* Navi etwas groesser, mehr Luft zwischen den Punkten */
.nav a{ padding:.55rem .95rem; font-size:1rem }

/* CTA in der Leiste kompakter — er soll nicht die halbe Leiste fuellen */
.header__cta{ padding:.72rem 1.4rem; font-size:.95rem; border-width:0 }
.header__tel{ font-size:.98rem }

/* ---------- Schrift enger gesetzt ---------- */
h1{ line-height:1.02; letter-spacing:-.032em }
h2{ line-height:1.08; letter-spacing:-.026em }
h3{ letter-spacing:-.016em }

.hero h1{
  font-size:clamp(2.6rem,1.5rem + 4vw,4.2rem);
  max-width:13ch;
}

/* Haken etwas groesser, damit sie die Ueberschrift tragen */
.hero__checks li{ font-size:clamp(1.02rem,.95rem + .38vw,1.2rem) }

/* ---------- Buttons: Verhaeltnis Text zu Flaeche ---------- */
.btn{ padding:.88rem 1.6rem; font-size:.98rem }
.btn--lg{ padding:1.08rem 2.15rem; font-size:1.05rem }

/* ==================================================================
   Skala kalibriert an gemessenen Werten des Vorbilds.
   Uebernommen sind Maszahlen, kein fremder Code.
   h1 4.5rem / 500 / 1.2 / -.045rem · h2 3.25rem / 500 / 1.2 / -.0325rem
   Button .625rem 1.5rem / 500 · Abschnitt 7rem · Container 80rem
   ================================================================== */

body{ line-height:1.55 }

h1{
  font-size:clamp(2.6rem,1.35rem + 4.3vw,4.5rem);
  font-weight:500;
  line-height:1.2;
  letter-spacing:-.045rem;
}
h2{
  font-size:clamp(2.25rem,1.6rem + 2.6vw,3.25rem);
  font-weight:500;
  line-height:1.2;
  letter-spacing:-.0325rem;
}
h3{
  font-size:clamp(1.375rem,1.15rem + .9vw,1.75rem);
  font-weight:500;
  line-height:1.3;
  letter-spacing:-.018rem;
}

.lead{ font-size:clamp(1.125rem,1.05rem + .4vw,1.375rem); line-height:1.5 }

/* Abschnitte waren deutlich luftiger als im Vorbild */
.section{ padding-block:clamp(3rem,2rem + 4.2vw,7rem) }
.section--tight{ padding-block:clamp(2.5rem,1.8rem + 2.4vw,4rem) }

/* ---------- Hero ---------- */
/* Inhalt linksbuendig im Raster, nicht als zentrierte Spalte */
.hero__inner{ max-width:var(--maxw); margin-inline:auto }
.hero h1{ font-size:clamp(2.6rem,1.35rem + 4.3vw,4.5rem); max-width:15ch }
.hero .hero__checks{ max-width:44rem }
.hero__checks li{ font-size:1.125rem; font-weight:600 }

/* ---------- Buttons: eine Groesse auf der ganzen Seite ---------- */
.btn,
.btn--lg,
.header__cta{
  padding:.625rem 1.5rem;
  font-size:1rem;
  font-weight:500;
  line-height:1.5;
  border-width:1px;
}
.btn__arrow{ width:28px;height:28px;margin-left:.35rem;margin-right:-.7rem }
.btn__arrow svg{ width:14px;height:14px }

/* ---------- Navi ---------- */
.nav a{ padding:.5rem 1rem; font-size:1rem; font-weight:600 }

/* ---------- Hero: betontes Wort in eigener Zeile ---------- */
.hero h1{ max-width:17ch }
.hero h1 strong{
  display:block;
  font-weight:700;
  letter-spacing:-.06rem;   /* fett laeuft breiter, das holt es zurueck */
}

/* ==================================================================
   Markenzeichen als Wasserzeichen, Menue leichter
   ================================================================== */

/* Menue weniger fett */
.nav a{ font-weight:500 }
.nav a[aria-current="page"]{ font-weight:600 }

/* Chevron aus dem Logo, sehr zurueckhaltend hinter den Karten */
.quickcard{ position:relative; overflow:hidden; isolation:isolate }
.quickcard::after{
  content:"";position:absolute;z-index:-1;
  right:-26px;bottom:-30px;width:132px;height:132px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23004aad' stroke-width='6'%3E%3Cpath d='M38 8 L14 32 L38 56'/%3E%3Cpath d='M54 8 L30 32 L54 56'/%3E%3Cpath d='M70 8 L46 32 L70 56'/%3E%3C/svg%3E") no-repeat center/contain;
  opacity:.07;pointer-events:none;
  transition:transform .5s cubic-bezier(.22,1,.36,1),opacity var(--ease);
}
.quickcard:hover::after{ transform:translateX(-8px); opacity:.12 }

/* Grosse Fassung im CTA-Band, in Weiss */
.ctaband{ position:relative; overflow:hidden; isolation:isolate }
.ctaband::after{
  content:"";position:absolute;z-index:-1;
  right:-60px;top:50%;width:min(340px,38vw);height:min(340px,38vw);
  transform:translateY(-50%);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23ffffff' stroke-width='5'%3E%3Cpath d='M38 8 L14 32 L38 56'/%3E%3Cpath d='M54 8 L30 32 L54 56'/%3E%3Cpath d='M70 8 L46 32 L70 56'/%3E%3C/svg%3E") no-repeat center/contain;
  opacity:.055;pointer-events:none;
}

/* Dezent auch auf der dunklen Formularkarte */
.formcard{ position:relative; overflow:hidden; isolation:isolate }
.formcard::after{
  content:"";position:absolute;z-index:-1;
  left:-70px;bottom:-70px;width:min(300px,40vw);height:min(300px,40vw);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23ffffff' stroke-width='5'%3E%3Cpath d='M38 8 L14 32 L38 56'/%3E%3Cpath d='M54 8 L30 32 L54 56'/%3E%3Cpath d='M70 8 L46 32 L70 56'/%3E%3C/svg%3E") no-repeat center/contain;
  opacity:.05;pointer-events:none;
}

/* ==================================================================
   Leistungen als Reiter: links Liste, rechts Karte mit Inhalt
   ================================================================== */

.svc{ background:#f3f4f5 }

.svc__grid{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,8.5fr);
  align-items:stretch;
}

/* ---------- Liste links ---------- */
.svc__list{ display:flex;flex-direction:column;border-top:1px solid #e1e3e6;min-width:0 }
.svc__tab{
  display:flex;align-items:center;gap:1rem;width:100%;
  padding:1.65rem 1.5rem;
  font:inherit;font-size:clamp(1.08rem,1rem + .35vw,1.28rem);font-weight:500;
  letter-spacing:-.01rem;text-align:left;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid #e1e3e6;
  cursor:pointer;
  transition:background var(--ease),color var(--ease);
}
.svc__tab:hover{ background:rgba(20,23,26,.035) }
.svc__tab[aria-selected="true"]{ background:#e7e8ea }

.svc__icon{
  flex:0 0 auto;display:grid;place-items:center;
  width:38px;height:38px;border-radius:10px;
  background:var(--tint);color:var(--brand);
  transition:background var(--ease),color var(--ease),transform var(--ease);
}
.svc__icon svg{ width:19px;height:19px }
.svc__tab[aria-selected="true"] .svc__icon{
  background:var(--grad-brand);color:#fff;
}
.svc__tab:hover .svc__icon{ transform:scale(1.05) }

/* ---------- Karte rechts ---------- */
.svc__panel{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(1.75rem,1.2rem + 2vw,3rem);
  background:#fff;border-radius:var(--r-lg);
  box-shadow:0 18px 40px -26px rgba(20,23,26,.35);
}
.svc__panel[hidden]{ display:none }
.svc__panel.is-in > *{ animation:svcIn .5s cubic-bezier(.22,1,.36,1) both }
.svc__panel.is-in > *:nth-child(2){ animation-delay:.04s }
.svc__panel.is-in > *:nth-child(3){ animation-delay:.08s }
.svc__panel.is-in > *:nth-child(4){ animation-delay:.12s }
@keyframes svcIn{ from{ opacity:0;transform:translateY(10px) } to{ opacity:1;transform:none } }

.svc__panel h3{ font-size:clamp(1.55rem,1.25rem + 1vw,2.1rem);font-weight:500 }
.svc__text{ margin-top:.9rem;color:var(--ink-soft);max-width:58ch }

.svc__points{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem 1.4rem }
.svc__points li{ position:relative;padding-left:1.15rem;font-size:.95rem;font-weight:500;line-height:1.4 }
.svc__points li::before{
  content:"";position:absolute;left:0;top:.45em;
  width:7px;height:7px;border-radius:50%;background:#b6cdf0;
}

/* ---------- Mobil: Reiter als Pillen, Karte darunter ---------- */
@media (max-width:900px){
  .svc__grid{ grid-template-columns:1fr;gap:1rem }
  .svc__list{
    flex-direction:row;gap:.5rem;border-top:0;
    overflow-x:auto;scroll-snap-type:x mandatory;
    padding:.15rem .1rem .6rem;margin-inline:-.1rem;
    scrollbar-width:none;
  }
  .svc__list::-webkit-scrollbar{ display:none }
  .svc__tab{
    flex:0 0 auto;width:auto;gap:.6rem;
    padding:.55rem 1rem .55rem .55rem;font-size:.95rem;white-space:nowrap;
    background:#fff;border:1px solid #e1e3e6;border-radius:var(--r-btn);
    scroll-snap-align:start;
  }
  .svc__tab[aria-selected="true"]{ background:var(--ink);color:#fff;border-color:var(--ink) }
  .svc__icon{ width:30px;height:30px;border-radius:50% }
  .svc__icon svg{ width:15px;height:15px }
}
@media (max-width:520px){
  .svc__points{ grid-template-columns:1fr }
}

@media (prefers-reduced-motion:reduce){
  .svc__panel.is-in > *{ animation:none }
}

/* ---------- Leistungs-Karte: Inhalt links, Foto randlos rechts ---------- */
.svc__list{ height:100% }
.svc__tab{ flex:1 1 0 }
.svc__tab:focus-visible{ outline:2px solid var(--brand);outline-offset:-2px;border-radius:0 }
.svc__tab[aria-selected="true"]{ box-shadow:inset 3px 0 0 var(--brand) }

.svc__panels{ display:flex;min-width:0 }
.svc__panel{
  flex:1;display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  padding:0;
}
.svc__content{
  display:flex;flex-direction:column;
  padding:clamp(1.75rem,1.2rem + 2vw,3rem);
}
.svc__points{
  margin:1.6rem 0 1.9rem;padding-top:1.6rem;border-top:1px solid var(--line);
}
.svc__more{ margin-top:auto;align-self:flex-start }
.svc__media{ position:relative;min-height:320px;background:#e9eaec }
.svc__media img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover }

@media (max-width:900px){
  .svc__list{ height:auto }
  .svc__tab{ flex:0 0 auto }
  .svc__tab[aria-selected="true"]{ box-shadow:none }
  .svc__panel{ grid-template-columns:1fr }
  .svc__media{ order:-1;min-height:0;aspect-ratio:16/10 }
}

/* ---------- Platzhalterfotos in bestehenden Rahmen ---------- */
.ph--img{ padding:0;border:0;background:#e9eaec }
.ph--img img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover }

/* ==================================================================
   Aus der Landingpage uebernommen: Leistungsleiste, Ablauf, Fragen
   ================================================================== */

/* ---------- Was wir fahren: linierte Leiste ---------- */
.leiste{ display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:3rem;border-top:1px solid var(--ink) }
.leiste li{ padding:1.5rem 1.5rem 0 0 }
.leiste li + li{ padding-left:1.5rem;border-left:1px solid var(--line) }
.leiste a{ display:block;color:inherit;text-decoration:none }
.leiste__icon{
  display:grid;place-items:center;width:40px;height:40px;margin-bottom:1rem;
  border-radius:var(--r-sm);background:var(--tint);color:var(--brand);
  transition:background var(--ease),color var(--ease);
}
.leiste__icon svg{ width:20px;height:20px }
.leiste h3{ font-size:1.125rem;font-weight:600;letter-spacing:-.01rem;transition:color var(--ease) }
.leiste p{ margin-top:.4rem;font-size:.95rem;color:var(--ink-soft) }
.leiste a:hover .leiste__icon{ background:var(--grad-brand);color:#fff }
.leiste a:hover h3{ color:var(--brand) }

/* ---------- So geht es weiter ---------- */
.schritte{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;margin-top:3rem;counter-reset:s }
.schritt{ position:relative;padding-top:2rem;border-top:2px solid var(--line) }
.schritt:first-child{ border-top-color:var(--brand) }
.schritt::before{
  counter-increment:s;content:counter(s);
  position:absolute;top:-1.05rem;left:0;
  display:grid;place-items:center;width:2.1rem;height:2.1rem;
  font-size:.95rem;font-weight:600;color:#fff;border-radius:50%;background:var(--grad-brand);
}
.schritt h3{ font-size:1.125rem;font-weight:600;letter-spacing:-.01rem }
.schritt p{ margin-top:.4rem;color:var(--ink-soft) }
.schritt .zeit{ display:inline-block;margin-top:1rem;font-size:.875rem;font-weight:600;color:var(--brand-dark) }

/* ---------- Haeufige Fragen ---------- */
.fragen{ display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:4rem;align-items:start }
.fragen h2{ max-width:16ch }
.fragen__liste details{ border-bottom:1px solid var(--line) }
.fragen__liste details:first-child{ border-top:1px solid var(--line) }
.fragen__liste summary{
  display:flex;justify-content:space-between;align-items:flex-start;gap:1.5rem;
  padding:1.5rem 0;font-size:1.125rem;font-weight:600;cursor:pointer;list-style:none;
}
.fragen__liste summary::-webkit-details-marker{ display:none }
.fragen__liste summary::after{
  content:"+";flex:0 0 auto;font-size:1.5rem;font-weight:400;line-height:1;color:var(--brand);
  transition:transform var(--ease);
}
.fragen__liste details[open] summary::after{ transform:rotate(45deg) }
.fragen__liste p{ padding-bottom:1.5rem;color:var(--ink-soft);max-width:60ch }
.fragen__direkt{ margin-top:2rem;padding:1.5rem;border-radius:var(--r-md);background:var(--bg-soft) }
.fragen__direkt p{ font-size:.95rem;color:var(--ink-soft) }
.fragen__direkt a{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:1rem;
  font-size:1.375rem;font-weight:600;color:var(--ink);text-decoration:none;
  transition:color var(--ease);
}
.fragen__direkt a:hover{ color:var(--brand) }
.fragen__direkt svg{ width:20px;height:20px;color:var(--brand) }

/* ---------- Responsiv ---------- */
@media (max-width:980px){
  .leiste{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .leiste li:nth-child(3){ padding-left:0;border-left:0 }
  .leiste li:nth-child(n+3){ margin-top:1.5rem;border-top:1px solid var(--line) }
  .fragen{ grid-template-columns:1fr;gap:2rem }
}
@media (max-width:640px){
  .leiste{ grid-template-columns:1fr }
  .leiste li,.leiste li + li{ padding-left:0;border-left:0 }
  .leiste li + li{ margin-top:1.5rem;border-top:1px solid var(--line) }
  .schritte{ grid-template-columns:1fr;gap:3rem }
}

/* ==================================================================
   Nachweise dunkel, Ablauf als Zeitleiste
   ================================================================== */

/* ---------- Nachweise ---------- */
.proofs{ background:var(--brand-deep);color:#fff }
.proofs .eyebrow{ color:var(--brand-from) }
.proofs h2{ color:#fff;max-width:14ch }
.proofs .lead{ margin-top:1.25rem;color:rgba(255,255,255,.72) }

.split2{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(2.5rem,1.5rem + 4vw,5rem);align-items:start;
}
.split2__kopf{ position:sticky;top:calc(var(--header-space) + 1.5rem) }

.certs{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem }
.cert{
  display:flex;flex-direction:column;gap:.5rem;padding:1.75rem;
  border-radius:var(--r-lg);
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);
  transition:background var(--ease),border-color var(--ease),transform var(--ease);
}
.cert:hover{ background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.17);transform:translateY(-2px) }
.cert__icon{
  display:grid;place-items:center;width:46px;height:46px;margin-bottom:.75rem;
  border-radius:13px;background:var(--grad-brand);color:#fff;
  box-shadow:0 10px 22px -12px rgba(0,74,173,.8);
}
.cert__icon svg{ width:22px;height:22px }
.cert h3{ font-size:1.125rem;font-weight:600;letter-spacing:-.01rem;color:#fff }
.cert p{ font-size:.95rem;line-height:1.5;color:rgba(255,255,255,.68) }
.cert__meta{
  margin-top:auto;padding-top:1rem;
  font-size:.8rem;font-weight:500;color:rgba(255,255,255,.52);
  font-variant-numeric:tabular-nums;
}

/* ---------- Ablauf als Zeitleiste ---------- */
.ablauf__kopf h2{ max-width:13ch }
.ablauf__kopf .lead{ margin-top:1.25rem;max-width:38ch }

.zeitlinie{ counter-reset:z }
.zl{ position:relative;padding:0 0 2.75rem 4.25rem }
.zl:last-child{ padding-bottom:0 }
.zl::before{
  counter-increment:z;content:counter(z);
  position:absolute;left:0;top:0;z-index:1;
  display:grid;place-items:center;width:2.75rem;height:2.75rem;
  font-weight:600;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:50%;
  box-shadow:var(--shadow-xs);
}
.zl:first-child::before{
  color:#fff;background:var(--grad-brand);border-color:transparent;
  box-shadow:0 10px 22px -12px rgba(0,74,173,.7);
}
.zl::after{
  content:"";position:absolute;left:calc(1.375rem - 1px);top:2.75rem;bottom:0;width:2px;
  background:var(--line);
  transform:scaleY(0);transform-origin:top;
  transition:transform .8s cubic-bezier(.22,1,.36,1);
}
.zl:first-child::after{ background:linear-gradient(var(--brand),var(--line)) }
.zl:last-child::after{ display:none }
.zeitlinie.is-in .zl::after{ transform:none }
.zeitlinie.is-in .zl:nth-child(2)::after{ transition-delay:.35s }

.zl__zeit{
  display:inline-block;margin:.45rem 0 .8rem;padding:.28rem .75rem;
  font-size:.8rem;font-weight:600;color:var(--brand-dark);
  background:var(--tint);border-radius:var(--r-btn);
}
.zl h3{ font-size:1.25rem;font-weight:600;letter-spacing:-.012rem }
.zl p{ margin-top:.45rem;color:var(--ink-soft);max-width:48ch }

/* ---------- Responsiv ---------- */
@media (max-width:980px){
  .split2{ grid-template-columns:1fr }
  .split2__kopf{ position:static }
}
@media (max-width:600px){
  .certs{ grid-template-columns:1fr }
  .zl{ padding-left:3.5rem }
  .zl::before{ width:2.35rem;height:2.35rem;font-size:.9rem }
  .zl::after{ left:calc(1.175rem - 1px);top:2.35rem }
}

/* ==================================================================
   Hintergrund-Deko
   Vier Elemente, alle aus der Marke abgeleitet. Jeder Abschnitt
   bekommt hoechstens zwei, manche keins — sonst wird es Tapete.
     .deko-chev   Chevron aus dem Logo, Umriss      (::after)
     .deko-rings  Ringe wie Funkwellen              (::before)
     .deko-dots   Punktraster, laeuft aus           (::before)
     .deko-glow   weiches Leuchten in Markenrot     (Hintergrund)
   Positionen ueber Custom Properties im style-Attribut.
   ================================================================== */

:root{
  --chev-rot:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%23004aad' stroke-width='1.6'%3E%3Cpath d='M112 14 26 100l86 86'/%3E%3Cpath d='M150 14 64 100l86 86'/%3E%3Cpath d='M188 14 102 100l86 86'/%3E%3C/svg%3E");
  --chev-weiss:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%23ffffff' stroke-width='1.6'%3E%3Cpath d='M112 14 26 100l86 86'/%3E%3Cpath d='M150 14 64 100l86 86'/%3E%3Cpath d='M188 14 102 100l86 86'/%3E%3C/svg%3E");
}

/* overflow:clip statt hidden — hidden wuerde die mitlaufenden
   Ueberschriften (position:sticky) in den Abschnitten abschalten */
.deko{ position:relative;isolation:isolate;overflow:clip }

/* ---------- Chevron ---------- */
.deko-chev::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  width:var(--cw,min(600px,62vw));aspect-ratio:1;
  background:var(--chev-rot) no-repeat center/contain;
  opacity:var(--co,.10);
}
.deko-chev--r::after{ right:-9%;top:-14% }
.deko-chev--l::after{ left:-13%;bottom:-20%;transform:scaleX(-1) }
.deko-chev--w::after{ background-image:var(--chev-weiss);opacity:var(--co,.07) }

/* ---------- Ringe ---------- */
.deko-rings::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  width:min(1150px,120vw);aspect-ratio:1;border-radius:50%;
  right:-32%;top:50%;transform:translateY(-50%);
  background:repeating-radial-gradient(circle,transparent 0 63px,rgba(0,74,173,.11) 63px 64.5px);
  -webkit-mask-image:radial-gradient(circle,#000 18%,transparent 66%);
          mask-image:radial-gradient(circle,#000 18%,transparent 66%);
}
.deko-rings--l::before{ right:auto;left:-32% }

/* ---------- Punktraster ---------- */
.deko-dots::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(20,23,26,.17) 1px,transparent 1.35px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 52% 62% at var(--dx,86%) var(--dy,18%),#000 8%,transparent 72%);
          mask-image:radial-gradient(ellipse 52% 62% at var(--dx,86%) var(--dy,18%),#000 8%,transparent 72%);
}

/* ---------- Leuchten ---------- */
.deko-glow{
  background-image:radial-gradient(var(--gs,760px) circle at var(--gx,4%) var(--gy,100%),
                   var(--gc,rgba(28,116,224,.10)),transparent 70%);
}

/* ---------- Mobil zuruecknehmen ---------- */
@media (max-width:700px){
  .deko-chev::after{ width:min(380px,90vw) }
  .deko-chev--r::after{ right:-30%;top:-8% }
  .deko-chev--l::after{ left:-34%;bottom:-10% }
  .deko-rings::before{ width:170vw;right:-80% }
  .deko-rings--l::before{ left:-80% }
  .deko-glow{ --gs:480px }
}

/* ==================================================================
   Footer als freistehende Karte, Aufforderung integriert
   Gleicher Randabstand wie die Kopfleiste.
   ================================================================== */

.footer{
  color:rgba(255,255,255,.72);
  background:var(--bg-soft);
  padding:clamp(1.5rem,3vw,3rem) clamp(1.1rem,4vw,3.25rem)
          calc(clamp(1rem,2vw,1.5rem) + env(safe-area-inset-bottom,0px));
}
.footer__card{
  position:relative;isolation:isolate;overflow:hidden;
  max-width:var(--maxw);margin-inline:auto;
  padding:clamp(2.25rem,1.5rem + 4vw,5rem) clamp(1.5rem,1rem + 4vw,5rem) 0;
  border-radius:var(--r-xl);
  background:
    radial-gradient(720px circle at 100% 0%,rgba(28,116,224,.15),transparent 70%),
    linear-gradient(160deg,var(--brand-deep) 0%,var(--brand-deep-2) 100%);
  box-shadow:0 30px 60px -32px rgba(12,14,16,.5);
}
/* Firmenname riesig und blass hinter der Aufforderung */
.footer__card::before{
  content:"B&H";position:absolute;z-index:-1;pointer-events:none;
  left:50%;top:-.1em;transform:translateX(-50%);
  font-size:clamp(9rem,4rem + 20vw,22rem);font-weight:800;line-height:1;letter-spacing:-.05em;
  color:rgba(255,255,255,.035);white-space:nowrap;
}

.footer__cta{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2rem;
  padding-bottom:clamp(2.5rem,2rem + 3vw,4.5rem);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.footer__cta h2{ color:#fff;max-width:20ch }
.footer__cta p{ margin-top:.9rem;color:rgba(255,255,255,.68);max-width:46ch }
.footer__cta .btn-row{ margin-top:0 }
.footer__cta .btn svg{ width:17px;height:17px }

.footer .footer__grid{ padding-block:clamp(2.5rem,2rem + 3vw,4rem) }
.footer h3,.footer__grid h2{
  margin-bottom:1rem;
  font-size:1.125rem;font-weight:600;letter-spacing:-.01rem;text-transform:none;
}
.footer .footer__bottom{ padding-block:1.5rem }

@media (max-width:700px){
  .footer__cta .btn-row{ width:100% }
  .footer__cta .btn{ flex:1 1 auto }
}

/* ==================================================================
   Weniger Rand: Kopfleiste und Footer-Karte gleich nah am Bildrand
   ================================================================== */
.header{ padding-inline:clamp(.75rem,2.2vw,1.75rem) }
.footer{
  padding:clamp(1rem,2vw,1.75rem) clamp(.75rem,2.2vw,1.75rem)
          calc(clamp(.75rem,1.5vw,1.25rem) + env(safe-area-inset-bottom,0px));
}
.footer__card{ padding:clamp(1.75rem,1.2rem + 2.6vw,3.5rem) clamp(1.25rem,.8rem + 2.6vw,3.5rem) 0 }
.footer__cta h2{ font-size:clamp(1.9rem,1.4rem + 1.9vw,2.6rem);max-width:24ch }
.footer__cta{ padding-bottom:clamp(2rem,1.5rem + 2vw,3rem) }
.footer .footer__grid{ padding-block:clamp(2rem,1.5rem + 2vw,3rem) }

/* ==================================================================
   Unterseiten: Seitenkopf, Brotkrumen, Kontaktseite
   ================================================================== */
.pagehead{
  position:relative;
  padding:clamp(2.5rem,1.5rem + 4vw,4.5rem) 0 clamp(1.5rem,1rem + 2vw,2.5rem);
}
.pagehead h1{ font-size:clamp(2.4rem,1.5rem + 3.4vw,3.8rem);max-width:18ch }
.pagehead .lead{ margin-top:1.25rem;max-width:54ch }
.crumbs{ margin-bottom:1.25rem;font-size:.875rem;color:var(--ink-soft) }
.crumbs ol{ display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0;padding:0 }
.crumbs li:not(:last-child)::after{ content:"/";margin-left:.4rem;color:#c3c7cc }
.crumbs a{ color:var(--ink-soft);text-decoration:none }
.crumbs a:hover{ color:var(--brand) }

.kontakt__grid{
  display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:clamp(1.5rem,1rem + 2vw,2.5rem);align-items:start;
}
.kanaele{ display:grid;gap:.75rem;position:sticky;top:calc(var(--header-space) + 1rem) }
.kanal{
  display:flex;gap:1rem;align-items:flex-start;padding:1.25rem 1.35rem;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  color:var(--ink);text-decoration:none;
  transition:border-color var(--ease),transform var(--ease),box-shadow var(--ease);
}
a.kanal:hover{ border-color:var(--tint-line);transform:translateY(-2px);box-shadow:var(--shadow-sm) }
.kanal__icon{
  flex:0 0 auto;display:grid;place-items:center;width:42px;height:42px;
  border-radius:12px;background:var(--tint);color:var(--brand);
}
.kanal__icon svg{ width:20px;height:20px }
.kanal__label{ display:block;font-size:.8rem;font-weight:600;color:var(--brand) }
.kanal__wert{ display:block;margin-top:.1rem;font-size:1.08rem;font-weight:600;line-height:1.35 }
.kanal__hint{ display:block;margin-top:.2rem;font-size:.9rem;color:var(--ink-soft) }

.formcard .field input[type="file"]{ padding:.65rem;cursor:pointer }
.formcard .field select{ appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9rem center;background-size:16px;padding-right:2.6rem }

.textseite{ max-width:46rem }
.textseite h2{ margin-top:2.5rem;font-size:1.5rem;font-weight:600 }
.textseite p,.textseite address{ margin-top:.9rem;color:var(--ink-soft);font-style:normal;line-height:1.7 }
.hinweisbox{ margin-top:2rem;padding:1.1rem 1.25rem;border-radius:var(--r-md);background:var(--tint);color:var(--brand-dark);font-size:.95rem }

@media (max-width:900px){
  .kontakt__grid{ grid-template-columns:1fr }
  .kanaele{ position:static }
}

/* ==================================================================
   Weniger Rand an Kopfleiste und Footer, Kontaktseite, Unterseiten
   ================================================================== */

/* Rand: Kopfleiste und Footer bleiben gleich weit vom Bildschirmrand */
.header{ padding-inline:clamp(.75rem,2.5vw,2rem) }
.footer{
  padding:clamp(1rem,2vw,2rem) clamp(.75rem,2.5vw,2rem)
          calc(clamp(.75rem,1.5vw,1.25rem) + env(safe-area-inset-bottom,0px));
}
.footer__card{ padding:clamp(1.75rem,1.2rem + 3vw,3.75rem) clamp(1.25rem,.8rem + 3vw,3.75rem) 0 }
.footer__cta h2{ max-width:24ch;font-size:clamp(1.9rem,1.4rem + 1.8vw,2.75rem) }

/* ---------- Kontaktseite ---------- */
.kontakt__grid{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2rem,1rem + 4vw,4.5rem);align-items:start;
}
.kontakt__info h1{ font-size:clamp(2.4rem,1.5rem + 3vw,3.75rem);max-width:13ch }
.kontakt__info .lead{ margin-top:1.25rem;max-width:40ch }

.kanal{ display:grid;gap:.75rem;margin-top:2.25rem }
.kanal a{
  display:flex;align-items:center;gap:1rem;padding:1rem 1.1rem;
  color:var(--ink);text-decoration:none;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  transition:border-color var(--ease),transform var(--ease),box-shadow var(--ease);
}
.kanal a:hover{ color:var(--ink);border-color:var(--tint-line);transform:translateY(-2px);box-shadow:var(--shadow-sm) }
.kanal__icon{
  display:grid;place-items:center;flex:0 0 auto;width:44px;height:44px;
  border-radius:12px;background:var(--tint);color:var(--brand);
}
.kanal__icon svg{ width:20px;height:20px }
.kanal strong{ display:block;font-weight:600 }
.kanal small{ display:block;font-size:.9rem;color:var(--ink-soft) }

.fakten{
  display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;
  margin:2.25rem 0 0;padding-top:2rem;border-top:1px solid var(--line);
}
.fakten dt{ font-size:.875rem;font-weight:600;color:var(--ink-soft) }
.fakten dd{ margin:.35rem 0 0;font-weight:500;line-height:1.5 }

/* Formularkarte: Pillen und Feldgruppen auf dunklem Grund */
.formcard fieldset{ margin:0;padding:0;border:0;min-width:0 }
.formcard legend{ padding:0;font-size:.925rem;font-weight:600;color:rgba(255,255,255,.88) }
.formcard .opt{ font-weight:400;color:rgba(255,255,255,.5) }
.pillen{ display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem }
.pille{ position:relative }
.pille input{ position:absolute;opacity:0;width:1px;height:1px }
.pille span{
  display:inline-flex;padding:.5rem .95rem;font-size:.925rem;font-weight:500;color:#fff;cursor:pointer;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.2);border-radius:var(--r-btn);
  transition:background var(--ease),color var(--ease),border-color var(--ease);
}
.pille span:hover{ border-color:rgba(255,255,255,.5) }
.pille input:checked + span{ color:var(--ink);background:#fff;border-color:#fff }
.pille input:focus-visible + span{ outline:2px solid var(--brand-from);outline-offset:2px }
.formcard input[type="file"]::file-selector-button{
  margin-right:.75rem;padding:.45rem .9rem;font:inherit;font-size:.875rem;color:var(--ink);
  background:#fff;border:0;border-radius:var(--r-btn);cursor:pointer;
}
.formcard .btn{ width:100% }

/* ---------- Danke- und Rechtsseiten ---------- */
.schlicht{ min-height:62vh;display:grid;align-content:center }
.schlicht__karte{ max-width:40rem }
.schlicht__icon{
  display:grid;place-items:center;width:56px;height:56px;margin-bottom:1.5rem;
  border-radius:50%;background:var(--tint);color:var(--brand);
}
.schlicht__icon svg{ width:26px;height:26px }
.schlicht h1{ font-size:clamp(2.2rem,1.5rem + 2.6vw,3.25rem) }
.schlicht p{ margin-top:1rem;color:var(--ink-soft);max-width:52ch }
.recht{ max-width:48rem }
.recht h2{ margin-top:2.5rem;font-size:1.5rem;font-weight:600 }
.recht p{ margin-top:.75rem;color:var(--ink-soft) }
.testhinweis{
  margin-top:1.5rem;padding:1rem 1.25rem;border-radius:var(--r-md);
  background:var(--tint);color:var(--brand-dark);font-size:.95rem;
}

@media (max-width:980px){
  .kontakt__grid{ grid-template-columns:1fr }
}
@media (max-width:520px){
  .fakten{ grid-template-columns:1fr }
}

/* ==================================================================
   Footer breiter, Logozeichen statt Schriftzug · Unterseiten
   ================================================================== */

html{ scroll-padding-top:calc(var(--header-space) + 1rem) }

/* ---------- Footer ---------- */
.footer__card{ max-width:96rem }
.footer__card::before{
  content:"";font-size:0;
  left:auto;right:-3%;top:-6%;transform:none;
  width:min(560px,52vw);aspect-ratio:220/200;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 200' fill='none' stroke-width='12' stroke-linejoin='miter' stroke-miterlimit='10'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%230f61cf'/%3E%3Cstop offset='1' stop-color='%23004aad'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg stroke='url(%23g)'%3E%3Cpath d='M118 16H92L16 100l76 84h26'/%3E%3Cpath d='M160 16h-26L58 100l76 84h26'/%3E%3Cpath d='M202 16h-26l-76 84 76 84h26'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;
  opacity:.15;
}
@media (max-width:700px){
  .footer__card::before{ width:78vw;right:-22%;top:-3% }
}

/* ---------- Kopfbereich der Unterseiten ---------- */
.hero--sub .hero__inner{
  min-height:clamp(19rem,14rem + 14vw,27rem);justify-content:flex-end;
  padding-block:clamp(1.5rem,1rem + 2vw,2.5rem) clamp(4rem,3rem + 4vw,6rem);
}
.hero--sub h1{ font-size:clamp(2.4rem,1.5rem + 3.2vw,3.9rem);max-width:18ch }
.hero--sub .lead{ margin-top:1.1rem;max-width:48ch;color:rgba(255,255,255,.84) }
.brot{ display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.25rem;font-size:.9rem;color:rgba(255,255,255,.66) }
.brot a{ color:#fff;text-decoration:none }
.brot a:hover{ text-decoration:underline;text-underline-offset:.2em }
.brot li + li::before{ content:"/";margin-right:.5rem;color:rgba(255,255,255,.4) }

/* ---------- Leistungsseite ---------- */
.bereich__icon{
  display:grid;place-items:center;width:48px;height:48px;margin-bottom:1.25rem;
  border-radius:13px;background:var(--grad-brand);color:#fff;
  box-shadow:0 10px 22px -12px rgba(0,74,173,.7);
}
.bereich__icon svg{ width:22px;height:22px }
.bereich .split__media .ph{ aspect-ratio:1/1 }
.bereich .lead{ margin-top:1rem }
.bereich__intro{ margin-top:1rem;color:var(--ink-soft);max-width:60ch }

.punkte3{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 2rem;margin-top:2.5rem }
.punkte3 li{ margin-top:1.75rem;padding-top:1.25rem;border-top:1px solid var(--line) }
.punkte3 li:nth-child(-n+3){ border-top-color:var(--ink) }
.punkte3 h3{ font-size:1.075rem;font-weight:600;letter-spacing:-.01rem }
.punkte3 p{ margin-top:.45rem;font-size:.95rem;color:var(--ink-soft) }

/* ---------- Karriere ---------- */
.stellen{ display:grid;gap:1rem;margin-top:3rem }
.stelle{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.5rem 2.5rem;align-items:start;
  padding:clamp(1.5rem,1rem + 2vw,2.25rem);
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  transition:border-color var(--ease),box-shadow var(--ease);
}
.stelle:hover{ border-color:var(--tint-line);box-shadow:var(--shadow-sm) }
.stelle h3{ font-size:clamp(1.3rem,1.15rem + .6vw,1.6rem);font-weight:600 }
.stelle__meta{ display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.8rem }
.stelle__meta span{
  padding:.28rem .75rem;font-size:.82rem;font-weight:600;color:var(--brand-dark);
  background:var(--tint);border-radius:var(--r-btn);
}
.stelle > div > p{ margin-top:1rem;color:var(--ink-soft);max-width:62ch }
.stelle__listen{ display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:1.25rem }
.stelle__listen h4{ font-size:.875rem;font-weight:600;color:var(--ink-soft) }
.stelle__listen ul{ margin-top:.4rem }
.stelle__listen li{ position:relative;padding-left:1.1rem;margin-top:.4rem;font-size:.95rem }
.stelle__listen li::before{ content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--brand) }

.formcard select{
  width:100%;padding:.85rem 1rem;color:#fff;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);border-radius:var(--r-sm);
}
.formcard select option{ color:var(--ink) }

@media (max-width:900px){
  .punkte3{ grid-template-columns:1fr 1fr }
  .punkte3 li:nth-child(3){ border-top-color:var(--line) }
  .stelle{ grid-template-columns:1fr }
}
@media (max-width:560px){
  .punkte3{ grid-template-columns:1fr }
  .punkte3 li:nth-child(2){ border-top-color:var(--line) }
  .stelle__listen{ grid-template-columns:1fr }
}

/* ---------- Referenzen als Aussage ---------- */
.referenzen{ border-top:1px solid var(--line) }
.referenzen__satz{
  max-width:26ch;
  font-size:clamp(1.5rem,1.15rem + 1.7vw,2.35rem);font-weight:500;
  line-height:1.2;letter-spacing:-.03rem;
}
.referenzen__satz b{ font-weight:600;color:var(--brand) }
.referenzen__zusatz{ margin-top:.9rem;max-width:52ch;color:var(--ink-soft) }

/* ---------- Hero: Abstand an die tatsächliche Leiste koppeln ---------- */
/* Die Leiste sitzt bei  Sicherheitsabstand + Leistenrand + Leistenhöhe.
   Genau das plus Luft ist der Startpunkt des Hero-Inhalts. */
.hero{
  padding-top:calc(env(safe-area-inset-top,0px) + var(--header-gap) + var(--header-h)
                   + clamp(2rem,6vw,4.5rem));
}
@media (max-width:700px){
  .hero__inner{ min-height:auto }
  .hero__checks{ gap:.8rem;margin-top:1.9rem }
  .hero__checks li{ font-size:1.02rem;line-height:1.35 }
  .hero__checks svg{ width:20px;height:20px }
  .hero__status{ margin-bottom:1.1rem;font-size:.9rem }
  .hero h1{ max-width:none }
}

/* ---------- Auftraggeber als Kachel im Nachweis-Block ---------- */
.cert--breit{ grid-column:1 / -1 }

/* ==================================================================
   Platz für die schwebende Leiste — eine Quelle für alle Abstände
   Leistenunterkante = Sicherheitsabstand + Leistenrand + Leistenhöhe
   ================================================================== */
:root{ --bar-raum:calc(env(safe-area-inset-top,0px) + var(--header-gap) + var(--header-h)) }

body{ padding-top:var(--bar-raum) }

/* Hero holt den Platz zurück, damit das Foto unter der Leiste durchläuft,
   und setzt den Inhalt darunter wieder ab. */
.hero{
  margin-top:calc(-1 * var(--bar-raum));
  padding-top:calc(var(--bar-raum) + clamp(2rem,6vw,4.5rem));
}

html{ scroll-padding-top:calc(var(--bar-raum) + 1rem) }
.split2__kopf{ top:calc(var(--bar-raum) + 1.5rem) }
.kanaele{ top:calc(var(--bar-raum) + 1rem) }

/* ---------- Hero: Fahrzeugmotiv und Luft nach unten ---------- */
/* Der Transporter steht rechts der Mitte — Ausschnitt so legen,
   dass er sichtbar bleibt und links Platz für die Überschrift ist. */
.hero__media img{ object-position:58% center }
@media (max-width:900px){ .hero__media img{ object-position:66% center } }
@media (max-width:700px){
  .hero__media img{ object-position:70% center }
  /* unten mehr Raum, damit die Kontaktkarten nicht am Button kleben */
  .hero__inner{ padding-bottom:clamp(5.5rem,16vw,8rem) }
}
/* Helleres Foto braucht links etwas mehr Abdeckung für den weißen Text */
.hero::after{
  background:linear-gradient(100deg,
    rgba(10,13,16,.86) 0%,
    rgba(10,13,16,.66) 46%,
    rgba(10,13,16,.34) 100%);
}

/* ==================================================================
   Schrift vereinheitlicht
   Vorher gab es für denselben Zweck drei verschiedene Größen.
   ================================================================== */

/* Kleine Überschriften in Listen und Kacheln: ein Wert statt zwei */
.punkte3 h3{ font-size:1.125rem;letter-spacing:-.012rem }
.leiste h3{ letter-spacing:-.012rem }

/* Fließtext in Kacheln und Listen: 1rem statt 0,95rem, mehr Zeilenabstand */
.leiste p,
.punkte3 p,
.cert p,
.svc__points li{ font-size:1rem;line-height:1.55 }

/* Wirklich kleine Angaben bleiben klein — das ist Beiwerk, kein Text */
.cert__meta,.quickcard__hint,.stat__label,.stelle__meta span{ font-size:.9rem }

/* ==================================================================
   Handy: Feinschliff
   Lange deutsche Wörter, Größe der Bedienelemente, freie Fußzeile.
   ================================================================== */

@media (max-width:700px){

  /* Zusammengesetzte Wörter wie "Briefkastenleerung" oder
     "Verkehrshaftungsversicherung" brechen, statt aus dem Bild zu laufen */
  h1,h2,h3,h4,.svc__tab,.quickcard__value,.stelle h3{
    overflow-wrap:break-word;
    hyphens:auto;
  }
  p,li,address,dt,dd,summary,.lead{ overflow-wrap:break-word }

  /* Bedienelemente auf Fingergröße: 44 Pixel sind das Mindestmaß */
  .nav a,.nav__tel,.kanal a,.footer__grid a{
    display:flex;align-items:center;min-height:44px;
  }
  .btn{ min-height:48px }
  .pille span{ min-height:44px;display:flex;align-items:center;justify-content:center }
  summary{ min-height:52px;align-items:center }
  .burger{ width:48px;height:48px }
  .svc__more,.card .btn--text{ display:inline-flex;align-items:center;min-height:44px }

  /* Der WhatsApp-Knopf lag über der Fußzeile */
  .footer__bottom{ padding-bottom:calc(4.75rem + env(safe-area-inset-bottom,0px)) }

  /* Reiterzeile: die weiche Kante zeigt, dass man wischen kann */
  .svc__list{
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
            mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
  }

  /* Formularfelder nie unter 16 Pixel, sonst zoomt iOS beim Antippen hinein */
  .formcard input,.formcard select,.formcard textarea{ font-size:max(1rem,16px) }
}

@media (max-width:420px){
  /* Auf sehr schmalen Geräten nur noch das Symbol */
  .wa{ padding:1rem;border-radius:50% }
  .wa span{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;
  }
  .footer__logo img{ width:150px }
  .hero h1{ hyphens:none }          /* die Überschrift bleibt ungetrennt */
}

/* ==================================================================
   Dunkelblaue Fassung
   Seitengrund blau, Schrift weiß. Alles über Tokens, plus die
   Stellen, an denen Weiß fest im Stylesheet steht.
   ================================================================== */

:root{
  --ink:#ffffff;
  --ink-soft:rgba(255,255,255,.72);
  --bg:#062a5e;
  --bg-soft:#0a3168;
  --line:rgba(255,255,255,.14);
  --tint:rgba(255,255,255,.10);
  --tint-line:rgba(255,255,255,.24);

  /* Markenblau muss auf dunklem Grund heller werden, sonst verschwindet es */
  --brand:#9cc5ff;
  --brand-from:#9cc5ff;
  --brand-dark:#1c74e0;
  --brand-to:#1c74e0;
  --brand-deep:#041d45;
  --brand-deep-2:#03142f;

  --grad-brand:linear-gradient(180deg,#9cc5ff 0%,#1c74e0 38%);
  --sweep-brand:linear-gradient(to right,#1c74e0 0%,#004aad 51%,#1c74e0 100%);
  --grad-icon:linear-gradient(180deg,#1c74e0 0%,#004aad 38%);
  --grad-dark:linear-gradient(180deg,#0a3168 0%,#041d45 100%);

  --shadow-xs:0 1px 2px rgba(0,0,0,.3);
  --shadow-sm:0 6px 20px -8px rgba(0,0,0,.5);
  --shadow-md:0 22px 50px -20px rgba(0,0,0,.6);
  --shadow-lg:0 40px 80px -30px rgba(0,0,0,.7);
}

/* ---------- Kopfleiste bleibt weiß, Inhalt dunkel ---------- */
.header__bar{ border-color:transparent }
.header__bar .nav a,
.header__tel{ color:#14171a }
.header__bar .nav a:hover{ color:#004aad;background:#e9f1fc }
.header__bar .nav a[aria-current="page"]{ color:#004aad }
.nav a::after{ background:linear-gradient(90deg,#1c74e0,#004aad) }
.burger span{ background:#14171a }
.burger:hover{ background:#e9f1fc }
.header__cta{ background-image:var(--sweep-brand) }
@media (max-width:1040px){
  .nav{ background:#fff }
  .nav a{ color:#14171a }
  .nav a:hover{ background:#e9f1fc }
  .nav a[aria-current="page"]{ background:#e9f1fc }
  .nav__foot{ border-top-color:#e3e5e8 }
  .nav__tel{ color:#14171a;border-color:#e3e5e8 }
}

/* ---------- Flächen, die vorher weiß waren ---------- */
.svc{ background:#0a3168 }
.quickcard,
.card,
.stat,
.step,
.svc__panel,
.stelle,
.kanal a,
.table-wrap{
  background:rgba(255,255,255,.055);
  border-color:rgba(255,255,255,.13);
  color:var(--ink);
}
.quickcard:hover,.card:hover,.stelle:hover,.kanal a:hover{
  background:rgba(255,255,255,.085);
  border-color:rgba(255,255,255,.26);
}
.stats{ background:rgba(255,255,255,.13) }
.svc__tab[aria-selected="true"]{ background:rgba(255,255,255,.10) }
.svc__tab:hover{ background:rgba(255,255,255,.06) }
.svc__list{ border-top-color:var(--line) }
.svc__tab{ border-bottom-color:var(--line) }
.svc__media{ background:rgba(255,255,255,.08) }
th{ background:rgba(255,255,255,.06) }

/* ---------- Nachweise und Footer noch dunkler absetzen ---------- */
.proofs{ background:var(--brand-deep) }
.footer{ background:var(--bg) }
.footer__card{
  border:1px solid rgba(255,255,255,.1);
  background:
    radial-gradient(720px circle at 100% 0%,rgba(107,166,255,.18),transparent 70%),
    linear-gradient(160deg,#041d45 0%,#03142f 100%);
}

/* ---------- Einzelne Farbstellen ---------- */
.stat__value,.step::before{ background-image:var(--grad-brand) }
.zl__zeit{ background:rgba(255,255,255,.12);color:#9cc5ff }
.zl::before{ background:#0a3168;border-color:rgba(255,255,255,.2);color:#fff }
.zl:first-child::before{ background:var(--grad-brand);color:#041d45 }
.zl::after{ background:rgba(255,255,255,.18) }
.zl:first-child::after{ background:linear-gradient(#9cc5ff,rgba(255,255,255,.18)) }
.btn--outline{ color:#fff;border-color:rgba(255,255,255,.3) }
.btn--outline:hover{ color:#9cc5ff;border-color:#9cc5ff }
.btn--white{ color:#041d45 }
.btn--white:hover{ color:#004aad }
.pille input:checked + span{ background:#fff;color:#041d45;border-color:#fff }
.testhinweis{ background:rgba(255,255,255,.1);color:#9cc5ff }
.fragen__direkt{ background:rgba(255,255,255,.06) }
.ph--img,.ph{ background:rgba(255,255,255,.08) }
.deko-dots::before{ background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1.35px) }
.deko-rings::before{ background:repeating-radial-gradient(circle,transparent 0 63px,rgba(255,255,255,.09) 63px 64.5px) }
.deko-glow{ background-image:radial-gradient(var(--gs,760px) circle at var(--gx,4%) var(--gy,100%),rgba(107,166,255,.14),transparent 70%) }
.deko-chev::after{ opacity:.07 }
.leiste{ border-top-color:rgba(255,255,255,.55) }
.hero::before{ background:var(--bg) }
::selection{ background:#9cc5ff;color:#041d45 }

/* ==================================================================
   Blaue Fassung, helle Karten
   Blau ist die Bühne, weiß ist der Inhalt. Überall dort, wo gelesen
   oder geklickt wird, steht dunkle Schrift auf weißer Fläche.
   ================================================================== */

:root{
  --karte:#ffffff;
  --karte-ink:#14171a;
  --karte-soft:#5e6670;
  --karte-line:rgba(20,23,26,.09);
  --karte-blau:#004aad;
  --karte-tint:#e9f1fc;
}

/* ---------- Flächen ---------- */
.quickcard,
.card,
.stat,
.step,
.svc__panel,
.stelle,
.kanal a,
.table-wrap,
.cert,
.fragen__direkt,
.formcard{
  background:var(--karte);
  border-color:var(--karte-line);
  color:var(--karte-ink);
  box-shadow:0 18px 40px -26px rgba(0,0,0,.55);
}
.quickcard:hover,.card:hover,.stelle:hover,.kanal a:hover,.cert:hover{
  background:var(--karte);
  border-color:#cfe0f7;
  box-shadow:0 26px 50px -24px rgba(0,0,0,.6);
}
.stats{ background:var(--karte-line) }

/* ---------- Schrift in den Karten ---------- */
.quickcard__value,.card h3,.svc__panel h3,.stat__label,.step h3,.stelle h3,
.kanal strong,.cert h3,.formcard h2{ color:var(--karte-ink) }
.quickcard__hint,.card__list,.svc__text,.step p,.stelle > div > p,.kanal small,
.cert p,.fragen__direkt p,.stelle__listen h4{ color:var(--karte-soft) }

/* Diese Listen stehen frei auf blauem Grund — hier gilt die helle Schrift */
.punkte3 h3{ color:var(--ink) }
.punkte3 p{ color:var(--ink-soft) }
.punkte3 li{ border-top-color:rgba(255,255,255,.18) }
.quickcard__label,.card .btn--text,.svc__more,.kanal__icon{ color:var(--karte-blau) }
.cert__meta{ color:#5e6670 }
.card__list li::before,.stelle__listen li::before{ background:var(--karte-blau) }
.svc__points li{ color:var(--karte-ink) }
.svc__points li::before{ background:#cfe0f7 }
.stelle__listen li{ color:var(--karte-ink) }
.stelle__meta span{ background:var(--karte-tint);color:#004aad }
.kanal__icon{ background:var(--karte-tint) }
.kanal a{ color:var(--karte-ink) }
.fragen__direkt a{ color:var(--karte-ink) }
.fragen__direkt a:hover{ color:var(--karte-blau) }
.fragen__direkt svg{ color:var(--karte-blau) }
.table-wrap th{ background:#f3f4f5;color:var(--karte-ink) }
.table-wrap td{ color:var(--karte-ink) }

/* Zahlen und Schrittnummern wieder im satten Markenblau */
.stat__value,.step::before{
  background-image:var(--grad-icon);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.cert__icon{ background-image:var(--grad-icon);color:#fff }

/* ---------- Reiter: aktiver Reiter schließt an die weiße Karte an ---------- */
.svc__tab{ color:#fff }
.svc__tab:hover{ background:rgba(255,255,255,.08) }
.svc__tab[aria-selected="true"]{ background:var(--karte);color:var(--karte-ink);box-shadow:inset 3px 0 0 #004aad }
.svc__tab[aria-selected="true"] .svc__icon{ background-image:var(--grad-icon);color:#fff }
.svc__icon{ background:rgba(255,255,255,.12);color:#9cc5ff }

/* ---------- Zeitleiste ---------- */
.zl::before{ background:var(--karte);color:var(--karte-ink);border-color:transparent }
.zl:first-child::before{
  background-image:var(--grad-icon);
  background-clip:border-box;-webkit-background-clip:border-box;
  color:#fff;-webkit-text-fill-color:#fff;
}
.zl__zeit{ background:var(--karte-tint);color:#004aad }

/* ---------- Formularkarte hell ---------- */
.formcard .lead{ color:var(--karte-soft) }
.formcard label,.formcard legend{ color:var(--karte-ink) }
.formcard .opt{ color:var(--karte-soft) }
.formcard .req{ color:#004aad }
.formcard input,.formcard select,.formcard textarea{
  background:#f3f4f5;color:var(--karte-ink);border-color:transparent;
}
.formcard input::placeholder,.formcard textarea::placeholder{ color:#5e6670 }
.formcard input:hover,.formcard textarea:hover,.formcard select:hover{ border-color:#cfe0f7 }
.formcard input:focus,.formcard select:focus,.formcard textarea:focus{
  background:#fff;border-color:#004aad;box-shadow:0 0 0 4px rgba(0,74,173,.14);
}
.formcard select option{ color:var(--karte-ink) }
.formcard .consent{ color:var(--karte-soft) }
.formcard .consent a{ color:var(--karte-ink) }
.formcard .formnote{ color:var(--karte-soft) }
.formcard .pille span{ background:#f3f4f5;border-color:transparent;color:var(--karte-ink) }
.formcard .pille span:hover{ border-color:#004aad }
.formcard .pille input:checked + span{ background:#004aad;border-color:#004aad;color:#fff }
.formcard input[type="file"]::file-selector-button{ background:#004aad;color:#fff }
.formcard .fehler{ color:#b3261e }
.formcard .alert--err{ background:#fdecee;border-color:#f3c0c5;color:#8c1c24 }
.formcard .btn{ background-image:var(--sweep-brand) }
.formcard::after{ opacity:.05 }

/* Dunkle Abschnitte behalten ihre Wirkung, die Karten darin sind hell */
.proofs{ background:#041d45 }

/* ---------- Footer: passt sich der blauen Seite an ---------- */
.footer__card{
  background:
    radial-gradient(720px circle at 100% 0%,rgba(107,166,255,.16),transparent 70%),
    linear-gradient(160deg,#041d45 0%,#03142f 100%);
  border-color:rgba(255,255,255,.12);
}
.footer__card::before{ opacity:.05 }
.proofs{ background:#041d45 }
.proofs.deko-chev::after{ opacity:.05 }

/* ==================================================================
   Footer als weiße Karte — gleicher Gedanke wie die Kopfleiste
   ================================================================== */
.footer{ background:var(--bg) }
.footer__card{
  background:var(--karte);
  border:1px solid var(--karte-line);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.55);
  color:var(--karte-soft);
}
.footer__card::before{
  opacity:.10;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 200' fill='none' stroke-width='12' stroke-linejoin='miter' stroke-miterlimit='10'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%230f61cf'/%3E%3Cstop offset='1' stop-color='%23004aad'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg stroke='url(%23g)'%3E%3Cpath d='M118 16H92L16 100l76 84h26'/%3E%3Cpath d='M160 16h-26L58 100l76 84h26'/%3E%3Cpath d='M202 16h-26l-76 84 76 84h26'/%3E%3C/g%3E%3C/svg%3E");
}
.footer__cta{ border-bottom-color:var(--karte-line) }
.footer__cta h2,.footer h3,.footer__grid h2{ color:var(--karte-ink) }
.footer__cta p,.footer address{ color:var(--karte-soft) }
.footer a{ color:var(--karte-soft) }
.footer a:hover{ color:var(--karte-blau) }
.footer__bottom{ border-top-color:var(--karte-line);color:#5e6670 }

/* Der helle Umriss-Button braucht auf Weiß dunkle Linien */
.footer .btn--ghost{ background:transparent;border-color:var(--karte-line);color:var(--karte-ink) }
.footer .btn--ghost:hover{ background:transparent;border-color:var(--karte-blau);color:var(--karte-blau) }
.footer .btn{ background-image:var(--sweep-brand) }

/* ---------- Schrift auf dunklem Grund ---------- */
/* Helle Schrift auf dunklem Grund wirkt dünner als dunkle auf hellem.
   Deshalb etwas mehr Strichstärke und weniger enge Laufweite. */
h1{ font-weight:550;letter-spacing:-.03rem }
h2{ font-weight:550;letter-spacing:-.022rem }
.hero h1 strong{ font-weight:700;letter-spacing:-.045rem }
:root{ --ink-soft:rgba(255,255,255,.78) }
/* In den weißen Karten gilt wieder der normale Schnitt */
.svc__panel h3,.card h3,.cert h3,.stelle h3,.formcard h2{ font-weight:600;letter-spacing:-.012rem }

/* ==================================================================
   Nachbesserungen
   ================================================================== */

/* 1) Buttons im Footer: die Linkfarbe des Footers darf sie nicht erben */
.footer .btn{ color:#fff }
.footer .btn--ghost{ background:transparent;border-color:var(--karte-line);color:var(--karte-ink) }
.footer .btn--ghost:hover{ background:transparent;border-color:var(--karte-blau);color:var(--karte-blau) }
.footer .btn--ghost svg{ color:var(--karte-blau) }

/* 2) Punktraster raus — auf den weißen Karten wirkt es wie Schmutz */
.deko-dots::before{ display:none }

/* 3) Reiter auf dem Handy: weiße Pillen brauchen dunkle Schrift */
@media (max-width:900px){
  .svc__tab{ background:var(--karte);color:var(--karte-ink);border-color:transparent }
  .svc__tab .svc__icon{ background:var(--karte-tint);color:var(--karte-blau) }
  .svc__tab[aria-selected="true"]{
    background-image:var(--grad-icon);color:#fff;border-color:transparent;box-shadow:none;
  }
  .svc__tab[aria-selected="true"] .svc__icon{ background:rgba(255,255,255,.22);color:#fff }
}

/* 4) Footer: eigene Schriftgrößen statt Erbe aus dem Fließtext */
.footer h3,.footer__grid h2{ font-size:1rem;font-weight:600;letter-spacing:-.008rem;margin-bottom:.9rem }
.footer li,.footer address,.footer__card p{ font-size:1rem;line-height:1.55 }
.footer__cta p{ font-size:1.05rem }
.footer__bottom{ font-size:.875rem }

/* Statuspunkt auf denselben Grünton wie der WhatsApp-Knopf */
.hero__status::before{ background:#25d366;box-shadow:0 0 0 4px rgba(37,211,102,.22) }


/* ==================================================================
   Nachbesserung: ein Blau für die ganze Seite
   Vorher hatten abwechselnde Abschnitte, Nachweisblock und Footer
   drei verschiedene Untergründe. Das ergibt Nähte, sobald der Inhalt
   in weißen Karten sitzt.
   ================================================================== */
.section--soft,
.proofs,
.footer,
.fragen{ background:var(--bg) }
.proofs.deko-chev::after{ opacity:.06 }

/* Fließtext auf Blau heller: 78 % liest sich als Grau, 88 % als Weiß */
:root{ --ink-soft:rgba(255,255,255,.88) }
.svc__tab{ color:rgba(255,255,255,.92) }

/* ==================================================================
   Nachbesserungen Handy
   ================================================================== */

/* Die weiße Reiterschrift gilt nur für die senkrechte Liste am Rechner.
   Auf dem Handy sind die Reiter weiße Pillen und brauchen dunkle Schrift. */
@media (min-width:901px){
  .svc__tab{ color:rgba(255,255,255,.92) }
}
@media (max-width:900px){
  .svc__tab{ color:var(--karte-ink) }
  .svc__tab[aria-selected="true"]{ color:#fff }
}

/* Der Pfeil im Klappmenü hatte eine Füllung bekommen und sah aus wie ein Klotz */
@media (max-width:1040px){
  .nav a::after{ background:none }
  /* Der Button im Menüfuß ist ein Button, kein Menüpunkt */
  .nav .btn{ color:#fff;background-image:var(--sweep-brand);justify-content:center }
  .nav .btn::after{ display:none }
}
@media (min-width:1041px){
  .nav a::after{ background:linear-gradient(90deg,#1c74e0,#004aad) }
}

/* ==================================================================
   Die blaue Fläche bekommt Tiefe
   Eine einzige Farbe über die ganze Seite wirkt flach. Statt harter
   Abschnittswechsel ein weicher Verlauf plus zwei Lichtquellen.
   ================================================================== */
body{
  background-color:var(--bg);
  background-image:
    radial-gradient(1100px circle at 8% -4%,  rgba(156,197,255,.16), transparent 58%),
    radial-gradient(900px  circle at 104% 26%, rgba(0,74,173,.42),    transparent 62%),
    radial-gradient(800px  circle at -10% 78%, rgba(0,74,173,.34),    transparent 60%),
    linear-gradient(180deg,#062a5e 0%,#04204b 46%,#062a5e 100%);
  background-attachment:scroll;
}
.section--soft,.proofs,.footer,.fragen{ background:transparent }

/* Abschnitte werden durch eine feine Lichtkante getrennt, nicht durch Farbe */
.section + .section{ border-top:1px solid rgba(255,255,255,.07) }
.proofs{ position:relative }
.proofs::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(760px circle at 78% 0%,rgba(156,197,255,.12),transparent 66%);
}
.deko-chev::after{ opacity:.09 }
.deko-rings::before{ opacity:.9 }