
:root{--bg:#f3f8fc;--white:#fff;--ink:#102f47;--text:#4f6b80;--muted:#70879a;--line:#d9e7f1;--navy:#123d78;--blue:#2563eb;--sky:#0ea5e9;--soft:#eef8ff;--shadow:0 20px 55px rgba(17,59,92,.12);--max:1180px}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--bg)}body{margin:0;min-width:320px;color:var(--ink);background:radial-gradient(circle at 90% 0,rgba(14,165,233,.08),transparent 28rem),linear-gradient(180deg,#f9fcff,var(--bg));font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased}a,button{font:inherit}img{max-width:100%;display:block}
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);backdrop-filter:blur(14px);border-bottom:1px solid #dfe9f1}.header-in{width:min(calc(100% - 28px),var(--max));min-height:70px;margin:auto;display:flex;align-items:center;gap:18px}.brand{display:flex;align-items:center;text-decoration:none}.brand img{width:auto;height:58px;max-width:168px;object-fit:contain}.nav{display:flex;gap:2px;margin-left:auto}.nav a{padding:10px 11px;border-radius:11px;text-decoration:none;color:#587286;font-size:12px;font-weight:820}.nav a:hover,.nav a[aria-current="page"]{background:#eef7fd;color:#0d6fc2}.consult{margin-left:8px;min-height:40px;display:inline-flex;align-items:center;padding:0 14px;border:1px solid #bcd8ea;border-radius:999px;background:#fff;color:#0b68b4;text-decoration:none;font-size:12px;font-weight:900}.menu-btn{display:none;margin-left:auto;width:44px;height:44px;border-radius:50%;border:1px solid #bdd9e9;background:#fff;cursor:pointer}.menu-btn i{display:block;width:19px;height:2px;margin:4px auto;background:#0877bc;border-radius:99px}.mobile-menu{display:none;border-top:1px solid #e3ebf0;background:#fff}.mobile-menu.open{display:block}.mobile-menu-in{width:calc(100% - 20px);margin:auto;padding:9px 0 13px;display:grid;gap:6px}.mobile-menu a{min-height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;border-radius:12px;border:1px solid #e0e8ee;background:#f8fafb;color:#37566d;text-decoration:none;font-size:12px;font-weight:850}.mobile-menu a.primary{background:#176fd1;color:#fff;border-color:#176fd1}.mobile-sep{height:1px;background:#e4ebf0;margin:3px 0}
.page{width:min(calc(100% - 28px),var(--max));margin:auto;padding:22px 0 54px}.start-page{padding-top:22px}.business-hero{position:relative;overflow:hidden;min-height:500px;border-radius:34px;background:#eef7fc;box-shadow:0 26px 70px rgba(17,50,76,.14)}.business-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center}.business-hero-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(249,252,254,.99) 0%,rgba(249,252,254,.97) 34%,rgba(249,252,254,.82) 49%,rgba(249,252,254,.25) 67%,rgba(249,252,254,0) 80%)}.business-hero-copy{position:relative;z-index:2;width:min(57%,650px);min-height:500px;padding:60px 0 105px 52px;display:flex;flex-direction:column;justify-content:center}.vivi-hello{display:inline-flex;align-self:flex-start;padding:9px 12px;border:1px solid rgba(42,113,164,.20);border-radius:999px;background:rgba(255,255,255,.78);color:#31566f;box-shadow:0 7px 22px rgba(47,91,120,.06);font-size:11px;font-weight:850}.business-hero h1{margin:18px 0 0;font-size:clamp(42px,4.9vw,64px);line-height:1.01;letter-spacing:-.055em}.business-hero p{margin:18px 0 0;max-width:580px;color:#526d80;font-size:14px;line-height:1.62}
.choice-panel{position:relative;z-index:4;width:calc(100% - 58px);margin:-54px auto 0;padding:24px;border:1px solid var(--line);border-radius:25px;background:rgba(255,255,255,.98);box-shadow:0 22px 55px rgba(26,60,85,.13);backdrop-filter:blur(14px)}.choice-panel-head{display:grid;grid-template-columns:170px minmax(0,1fr) minmax(250px,380px);gap:18px;align-items:end;margin-bottom:17px}.choice-panel-head span{color:#0a78c9;font-size:10px;font-weight:950;letter-spacing:.13em;text-transform:uppercase}.choice-panel-head h2{margin:0;font-size:25px;letter-spacing:-.035em}.choice-panel-head p{margin:0;color:#748899;font-size:11.5px;line-height:1.5}.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.choice-card{min-height:92px;display:grid;grid-template-columns:44px minmax(0,1fr) 22px;gap:12px;align-items:center;padding:15px 16px;border:1px solid #dce7ee;border-radius:17px;background:#fbfdfe;color:#17364e;text-decoration:none;transition:.18s}.choice-card:hover{transform:translateY(-2px);border-color:#99cdec;background:#f5fbff;box-shadow:0 10px 24px rgba(31,79,111,.07)}.choice-no{width:44px;height:44px;display:grid;place-items:center;border-radius:13px;background:#edf7fd;color:#0a79cb;font-size:11px;font-weight:950}.choice-card strong{display:block;font-size:13.2px;line-height:1.28}.choice-card small{display:block;margin-top:4px;color:#728797;font-size:10.4px;line-height:1.42}.choice-card b{color:#0a80d3;font-size:20px}.choice-panel-foot{display:flex;align-items:center;justify-content:flex-end;gap:18px;margin-top:15px;padding-top:14px;border-top:1px solid #e5edf2}.choice-panel-foot a{color:#4f6d83;text-decoration:none;font-size:10.7px;font-weight:850}.choice-panel-foot a:first-child{color:#0b75c4}
.road-wrap{width:min(100%,900px);margin:auto}.road-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}.road-top a{color:#688092;text-decoration:none;font-size:11px;font-weight:800}.road-step{color:#0a76c7;font-size:10px;font-weight:950;letter-spacing:.11em;text-transform:uppercase}.road-card{overflow:hidden;border:1px solid #d8e5ed;border-radius:28px;background:#fff;box-shadow:var(--shadow)}.road-head{display:grid;grid-template-columns:94px minmax(0,1fr);gap:18px;align-items:center;padding:24px 25px;background:radial-gradient(circle at 10% 20%,rgba(39,163,235,.17),transparent 10rem),linear-gradient(135deg,#123d78,#1d5ca0);color:#fff}.road-avatar{width:94px;height:94px;padding:4px;border-radius:24px;background:#fff;overflow:hidden}.road-avatar img{width:100%;height:100%;object-fit:cover;object-position:70% center;border-radius:20px}.road-head h1{margin:0;font-size:clamp(29px,4.2vw,43px);line-height:1.03;letter-spacing:-.045em}.road-head p{margin:8px 0 0;color:#d6e6f3;font-size:12.5px;line-height:1.55}.road-context{margin:16px 16px 0;padding:13px 14px;border:1px solid #cfe3f2;border-radius:15px;background:#eef8ff;color:#315873;font-size:11px;line-height:1.55}.road-choices{padding:16px;display:grid;gap:9px}.road-choice{min-height:72px;display:grid;grid-template-columns:minmax(0,1fr) 24px;gap:12px;align-items:center;padding:14px 15px;border:1px solid #dae5ed;border-radius:17px;background:#fff;color:#17354d;text-decoration:none;transition:.17s}.road-choice:hover{border-color:#9bceed;background:#f8fcff;transform:translateY(-1px)}.road-choice strong{display:block;font-size:13px;line-height:1.3}.road-choice small{display:block;margin-top:4px;color:#718697;font-size:10.5px;line-height:1.42}.road-choice span{color:#0980d3;font-size:20px;font-weight:900}.road-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-top:1px solid #e4ebf0;background:#f8fafb}.road-bottom a{color:#537087;text-decoration:none;font-size:10.5px;font-weight:800}.road-bottom a:last-child{color:#0a76c7}
.subhero{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.85fr);gap:28px;align-items:center;padding:30px;border:1px solid var(--line);border-radius:30px;background:#fff;box-shadow:var(--shadow)}.subhero-copy .kicker{color:#0a78c9;font-size:10px;font-weight:950;letter-spacing:.12em;text-transform:uppercase}.subhero h1{margin:9px 0 12px;font-size:clamp(38px,5vw,60px);line-height:1;letter-spacing:-.05em}.subhero p{color:#61798d;line-height:1.65}.subhero-img{overflow:hidden;border-radius:22px;background:#eef6fb}.subhero-img img{width:100%;aspect-ratio:16/10;object-fit:cover}.content-section{margin-top:22px;padding:26px;border:1px solid var(--line);border-radius:25px;background:#fff;box-shadow:0 12px 34px rgba(21,59,88,.07)}.content-section h2{margin:0 0 12px;font-size:28px;letter-spacing:-.035em}.content-section p{color:#60798d;line-height:1.68}.three-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.info-card,.price-card{border:1px solid #dae7ef;border-radius:20px;background:#fbfdff;padding:20px}.info-card h3,.price-card h3{margin:0 0 7px}.info-card p,.price-card p{margin:0;color:#687f91;font-size:13px;line-height:1.55}.price{margin:14px 0 12px;font-size:34px;font-weight:950;color:#0b65b2}.price small{font-size:12px;color:#718697}.check-list{list-style:none;padding:0;margin:15px 0;display:grid;gap:8px}.check-list li{display:flex;gap:8px;font-size:13px;color:#3e5c71}.check-list li:before{content:'✓';color:#0b82d8;font-weight:950}.button{min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 15px;border-radius:13px;text-decoration:none;border:1px solid #c9dce8;background:#fff;color:#18577f;font-size:11.5px;font-weight:900}.button.primary{background:linear-gradient(135deg,#0ea5e9,#2563eb);border-color:transparent;color:#fff}.note{padding:13px 14px;border:1px solid #cfe3f2;border-radius:15px;background:#eef8ff;color:#315873;font-size:12px;line-height:1.55}.result-card{display:grid;grid-template-columns:310px minmax(0,1fr);overflow:hidden;border:1px solid #d8e5ed;border-radius:28px;background:#fff;box-shadow:var(--shadow)}.result-image{background:#edf4f8;padding:10px;display:flex;align-items:center;justify-content:center}.result-image img{width:100%;height:100%;max-height:560px;object-fit:cover;border-radius:18px}.result-copy{padding:28px}.result-kicker{color:#0b79ca;font-size:10px;font-weight:950;letter-spacing:.11em;text-transform:uppercase}.result-copy h1{margin:8px 0 6px;font-size:clamp(32px,4vw,48px);line-height:1;letter-spacing:-.05em}.result-price{color:#0a6cac;font-size:24px;font-weight:950}.result-price small{font-size:11px;color:#738899;margin-left:5px}.result-copy p{color:#6e8394;font-size:12.5px;line-height:1.55}.result-list{list-style:none;margin:18px 0;padding:0;display:grid;gap:8px}.result-list li{display:flex;gap:8px;color:#3f5b70;font-size:12px}.result-list li:before{content:'✓';color:#0b82d8;font-weight:950}.result-support{padding:12px;border-radius:14px;background:#f2f8fc;border:1px solid #dce8ef;color:#526c7f;font-size:11.5px}.result-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:17px}
.footer{width:min(calc(100% - 28px),var(--max));margin:0 auto 24px;padding:18px 20px;border:1px solid #dbe7ef;border-radius:20px;background:#fff;display:flex;align-items:center;justify-content:space-between;gap:20px;color:#61798d;font-size:11px}.footer strong{display:block;color:#17364e;font-size:13px}.footer nav{display:flex;gap:12px;flex-wrap:wrap}.footer a{color:#557287;text-decoration:none}.footer a:hover{color:#0b75c4}
@media(max-width:900px){.nav,.consult{display:none}.menu-btn{display:block}.choice-panel-head{grid-template-columns:1fr;gap:5px;align-items:start}.subhero{grid-template-columns:1fr}.three-grid{grid-template-columns:1fr}.result-card{grid-template-columns:1fr}.result-image img{max-height:320px;object-fit:cover}.footer{align-items:flex-start;flex-direction:column}}
@media(max-width:680px){.page{width:calc(100% - 14px);padding-top:8px}.business-hero{display:flex;flex-direction:column;min-height:0;border-radius:23px}.business-hero-img{position:relative;order:1;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:67% center}.business-hero-shade{display:none}.business-hero-copy{order:2;width:100%;min-height:0;padding:22px 19px 82px;background:linear-gradient(180deg,#f7fbfd,#eef6fa)}.business-hero h1{font-size:36px}.business-hero p{font-size:13px}.choice-panel{width:calc(100% - 18px);margin:-62px auto 0;padding:14px;border-radius:20px}.choice-grid{grid-template-columns:1fr}.choice-card{min-height:78px;padding:12px}.choice-panel-foot{align-items:flex-start;flex-direction:column;gap:8px}.road-head{grid-template-columns:72px 1fr;padding:18px}.road-avatar{width:72px;height:72px}.road-choices{padding:10px}.subhero{padding:18px;border-radius:22px}.subhero h1{font-size:38px}.content-section{padding:18px}.brand img{height:52px;max-width:145px}}

/* Startseite V3: ruhiger Vivi-Einstieg ohne Bild-/Text-Dopplung */
.brand{gap:10px}.brand-wordmark{display:flex;flex-direction:column;line-height:1;text-decoration:none}.brand-wordmark strong{font-size:15px;color:#123d78;letter-spacing:-.02em}.brand-wordmark span{margin-top:4px;font-size:9px;font-weight:780;color:#6f8798;letter-spacing:.02em}.brand img{height:60px;max-width:72px}
.start-page{padding-top:18px}.business-hero{min-height:455px;border-radius:30px;background:#f5faff;box-shadow:0 22px 58px rgba(17,50,76,.11)}.business-hero-img{object-position:center center}.business-hero-shade{background:linear-gradient(90deg,rgba(248,252,255,.98) 0%,rgba(248,252,255,.94) 28%,rgba(248,252,255,.72) 42%,rgba(248,252,255,.12) 60%,rgba(248,252,255,0) 72%)}.business-hero-copy{width:min(50%,590px);min-height:455px;padding:44px 0 74px 48px}.business-hero h1{margin-top:16px;font-size:clamp(38px,4.2vw,54px);line-height:1.02;letter-spacing:-.048em}.business-hero p{max-width:525px;margin-top:15px;font-size:13.5px;line-height:1.58}.vivi-hello{padding:8px 11px;background:rgba(255,255,255,.92);border-color:#d5e6f1;color:#1b5f8b}.choice-panel{width:calc(100% - 76px);margin:-38px auto 0;padding:22px 24px;border-radius:23px;box-shadow:0 18px 46px rgba(26,60,85,.11)}.choice-panel-head{grid-template-columns:145px minmax(0,1fr) minmax(240px,330px);margin-bottom:14px}.choice-panel-head h2{font-size:24px}.choice-panel-head p{font-size:11px}.choice-card{min-height:84px;padding:13px 15px}.choice-card small{font-size:10px}.choice-panel-foot{margin-top:12px;padding-top:12px}
@media(max-width:900px){.brand-wordmark{display:flex}.business-hero-copy{width:min(58%,560px)}.choice-panel{width:calc(100% - 44px)}}
@media(max-width:680px){.brand-wordmark strong{font-size:14px}.brand-wordmark span{font-size:8px}.brand img{height:50px;max-width:60px}.business-hero{border-radius:22px}.business-hero-img{position:relative;order:1;aspect-ratio:16/9;object-position:68% center}.business-hero-copy{order:2;width:100%;padding:21px 18px 74px}.business-hero h1{font-size:34px}.choice-panel{width:calc(100% - 14px);margin:-52px auto 0}}

/* Startseite V4: Hero-Motiv enthält die komplette Aufmacherbotschaft. Keine zusätzliche Textüberlagerung. */
.hero-image-only{
  min-height:0;
  aspect-ratio:auto;
  background:#eaf5fb;
  overflow:hidden;
}
.hero-image-only .hero-image-link{
  display:block;
  width:100%;
  text-decoration:none;
  line-height:0;
}
.hero-image-only .business-hero-img{
  position:relative;
  inset:auto;
  width:100%;
  height:auto;
  object-fit:contain;
  object-position:center;
}
.hero-image-only + .choice-panel{
  margin-top:-28px;
}
#vivi-start{scroll-margin-top:92px}
@media(max-width:680px){
  .hero-image-only{border-radius:20px}
  .hero-image-only .business-hero-img{
    aspect-ratio:auto;
    object-fit:contain;
    object-position:center;
  }
  .hero-image-only + .choice-panel{
    margin-top:-18px;
  }
}


/* Leistungen: fertiges Motiv als eigenständiger Aufmacher, ohne doppelte Hero-Texte */
.services-hero{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:30px;
  background:#fff;
  box-shadow:var(--shadow);
}
.services-hero img{
  width:100%;
  height:auto;
  display:block;
}
.services-intro{
  margin-top:18px;
  padding:20px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  border:1px solid var(--line);
  border-radius:22px;
  background:#fff;
  box-shadow:0 12px 34px rgba(21,59,88,.07);
}
.services-intro .kicker{
  display:block;
  margin-bottom:5px;
  color:#0a78c9;
  font-size:10px;
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.services-intro h1{
  margin:0;
  font-size:clamp(25px,3vw,34px);
  line-height:1.08;
  letter-spacing:-.04em;
}
.services-intro p{
  margin:7px 0 0;
  color:#61798d;
  font-size:13px;
  line-height:1.55;
}
.services-intro .button{
  flex:0 0 auto;
  min-width:134px;
}
.services-list{
  margin-top:18px;
}
@media(max-width:680px){
  .services-hero{border-radius:20px}
  .services-intro{
    margin-top:12px;
    padding:17px;
    align-items:flex-start;
    flex-direction:column;
    gap:14px;
    border-radius:18px;
  }
  .services-intro h1{font-size:27px}
  .services-intro .button{width:100%}
  .services-list{margin-top:12px}
}
