@font-face{font-family:"Inter";src:url("fonts/inter-var-latin.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url("fonts/plusjakartasans-var-latin.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
/* Entwurf B – „Modern": hell, luftig, abgerundet, Schriften wie sz-franken.de */
:root{
  --bg:#FFFFFF; --soft:#F1F5F9; --card:#FFFFFF; --ink:#0F172B; --muted:#4A5A70;
  --line:#E2E8F0; --line-strong:#CBD5E1; --field:#F8FAFC; --note-bg:#EAF4FB;
  --night:#020618; --night-2:#0D1428; --night-line:#1E293B; --on-night:#E9EEF5; --on-night-muted:#9AA8BC;
  --blue:#007CBB; --blue-deep:#005E8F; --blue-text:#006DA6; --blue-ink:#00507A; --blue-on-dark:#4DB0E3; --blue-soft:#E3F1FA;
  --star:#F5A623; --wa:#1E9E57; --wa-deep:#17834A; --focus:#007CBB;
  --display:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif; --body:"Inter","Segoe UI",system-ui,sans-serif;
  --r:20px; --shadow:0 1px 2px rgba(15,23,43,.05),0 12px 32px -12px rgba(15,23,43,.18);
  color-scheme:light;
}
.v-b{font-size:16.5px}
.v-b h1{font-size:clamp(2.3rem,5.2vw,3.9rem);font-weight:800;line-height:1.06;letter-spacing:-.025em}
.v-b h2{font-size:clamp(1.8rem,3.6vw,2.6rem);font-weight:800;line-height:1.12;letter-spacing:-.02em}
.v-b h3{font-size:1.2rem;font-weight:700;line-height:1.3;letter-spacing:-.01em}
.v-b .eyebrow{font-size:.82rem;font-weight:600;color:var(--blue-text);letter-spacing:.02em}
.v-b .btn{border-radius:999px;font-size:1rem}
.v-b .btn-primary{box-shadow:0 8px 20px -8px rgba(0,124,187,.6)}
.v-b .pill{display:inline-flex;align-items:center;gap:.45rem;justify-self:start;background:var(--blue-soft);color:var(--blue-ink);font-weight:600;font-size:.88rem;padding:.4rem .85rem .4rem .55rem;border-radius:999px}
.v-b .pill svg{width:18px;height:18px;padding:3px;border-radius:50%;background:var(--blue);color:#fff}

/* Header – Glas */
.v-b .site-header{background:rgba(255,255,255,.82);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--line)}
.v-b .brand-name{font:800 1.08rem/1 var(--display);letter-spacing:-.01em}
.v-b .brand-name small{font-family:var(--body);font-weight:500;color:var(--muted);letter-spacing:.06em}
.v-b .nav a{color:var(--muted);font-size:.95rem}
.v-b .nav a:hover,.v-b .nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--blue)}
.v-b .nav{background:#fff}
.v-b .header-call{background:var(--blue);color:#fff;padding:.5rem 1rem;border-radius:999px;align-items:flex-start}
.v-b .header-call span{opacity:.85;font-size:.62rem}
.v-b .header-call strong{font-size:1rem}
@media (min-width:1301px){.v-b .nav{background:transparent}}

/* Hero */
.v-b .hero{background:linear-gradient(180deg,#F5F9FC 0%,#FFFFFF 100%)}
.v-b .hero .hero-row{padding-block:clamp(2.5rem,6vw,4.5rem) clamp(3rem,6vw,4.5rem)}
.v-b .hero h1 em{font-style:normal;color:var(--blue)}
.v-b .hero-proof{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.4rem;font-size:.95rem;color:var(--muted)}
.v-b .hero-proof strong{color:var(--ink)}
.v-b .proof-sep{width:1px;height:28px;background:var(--line-strong)}
.v-b .hero-visual{position:relative}
.v-b .hero-img{width:100%;aspect-ratio:4/4.3;object-fit:cover;border-radius:28px;box-shadow:var(--shadow)}
.v-b .float{position:absolute;background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:.75rem 1rem;display:flex;align-items:center;gap:.6rem;font-size:.85rem;color:var(--muted)}
.v-b .float strong{font:800 1.5rem/1 var(--display);color:var(--ink)}
.v-b .float svg{width:20px;height:20px;color:var(--blue)}
.v-b .f1{left:-1.2rem;top:12%}
.v-b .f2{right:-1rem;top:46%}
.v-b .f3{left:1.4rem;bottom:-1rem}
@media (max-width:900px){.v-b .hero-img{aspect-ratio:4/3}.v-b .f1{left:.6rem}.v-b .f2{right:.6rem}}
.v-b .page-hero{background:var(--soft)}
.v-b .page-hero .ph-row{padding-block:clamp(2.2rem,5vw,3.6rem)}
.v-b .ph-img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);box-shadow:var(--shadow)}
.v-b .crumbs{color:var(--muted)}
.v-b .meta{color:var(--muted)}

/* Facts */
.v-b .facts .wrap>ul{background:var(--night);color:#fff;border-radius:var(--r);padding:1.6rem 2rem;margin-top:-1rem}
.v-b .facts strong{font-family:var(--display);font-weight:800}
.v-b .facts span{color:var(--on-night-muted)}

/* Cards & tiles */
.v-b .tile,.v-b .service{background:var(--soft);border-radius:var(--r);transition:transform .2s,box-shadow .2s,background-color .2s}
.v-b .tile:hover{background:#fff;box-shadow:var(--shadow);transform:translateY(-2px)}
.v-b .tile-big{background:var(--night);color:#fff}
.v-b .tile-big p,.v-b .tile-big .tag{color:var(--on-night-muted)}
.v-b .tile-big .more{color:var(--blue-on-dark)}
.v-b .tile-big:hover{background:var(--night)}
.v-b .tile .more{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#fff;color:var(--blue)}
.v-b .tile-big .more{display:inline-flex;width:auto;height:auto;background:none}
.v-b .article-card,.v-b .city-card,.v-b .standort,.v-b form.report,.v-b .loc-box,.v-b .price{background:#fff;border:1px solid var(--line);border-radius:var(--r)}
.v-b .article-card:hover,.v-b .city-card:hover{box-shadow:var(--shadow);border-color:transparent}
.v-b form.report{box-shadow:var(--shadow);border:0}
.v-b .field input,.v-b .field textarea,.v-b .field select{border-radius:12px;border-color:var(--line)}
.v-b .chip{background:#fff;border:1px solid var(--line);border-radius:999px}
.v-b .chip svg{color:var(--blue)}
.v-b .chip:hover{border-color:var(--blue);color:var(--blue-ink)}
.v-b .note{border-radius:0 12px 12px 0}
.v-b .rounded{border-radius:var(--r)}

/* Sections */
.v-b .section.alt{background:var(--soft)}
.v-b .section.alt .article-card{border-color:transparent}
.v-b .section.dark{background:var(--night);color:var(--on-night)}
.v-b .section.dark .lead,.v-b .section.dark p{color:var(--on-night-muted)}
.v-b .section.dark .eyebrow{color:var(--blue-on-dark)}
.v-b .section.dark .standort{background:var(--night-2);border-color:var(--night-line);color:var(--on-night)}
.v-b .section.dark .standort h3{color:#fff}
.v-b .section.dark .textlink{color:var(--blue-on-dark)}
.v-b .section.dark .chip{background:var(--night-2);border-color:var(--night-line);color:var(--on-night)}
.v-b .section.dark .chip:hover{border-color:var(--blue-on-dark)}
.v-b .section.dark .chip svg{color:var(--blue-on-dark)}

/* Steps – Karten mit Linie */
.v-b .steps li{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.5rem;padding-top:3.6rem}
.v-b .steps li::before{content:"0" counter(s);position:absolute;top:1.3rem;left:1.5rem;font:800 1rem/1 var(--display);color:var(--blue)}
.v-b .steps .time{background:var(--blue-soft);color:var(--blue-ink);border-radius:999px;position:absolute;top:1.05rem;right:1.2rem}
.v-b .section.alt .steps li{border-color:transparent}

/* Aside */
.v-b .aside{background:var(--soft);border-radius:var(--r)}

/* FAQ */
.v-b .faq details{background:var(--soft);border:0;border-radius:16px;margin-bottom:.6rem;padding-inline:1.2rem}
.v-b .section.alt .faq details{background:#fff}
.v-b .faq summary{font-family:var(--display);font-size:1.02rem}
.v-b .faq summary::after{width:28px;height:28px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:1.1rem;top:1rem;right:0}

/* CTA */
.v-b .cta-band{padding-inline:var(--gutter,clamp(16px,4vw,32px));padding-block:0 3rem;background:var(--bg)}
.v-b .cta-band .wrap{background:var(--blue);color:#fff;border-radius:28px;padding-inline:clamp(1.4rem,4vw,3rem);max-width:1180px}

/* Footer */
.v-b .site-footer{background:var(--soft);color:var(--muted)}
.v-b .site-footer h4{color:var(--ink)}
.v-b .site-footer strong,.v-b .site-footer .brand-name{color:var(--ink)}
.v-b .footer-bottom{border-top:1px solid var(--line-strong)}
.v-b .action-bar{padding:.5rem .5rem calc(.5rem + env(safe-area-inset-bottom,0px));gap:.5rem;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line)}
.v-b .action-bar a{border-radius:999px;padding:.85rem .5rem}
.v-b .hero h1{letter-spacing:-.015em;line-height:1.1}
.v-b .hero .lead{font-size:1.2rem;max-width:44ch}
