:root{
  --navy-900:#0A1826; --navy-800:#0D1F35; --navy-700:#14324E;
  --cyan:#1F9BD6; --cyan-light:#5CC4F0; --cyan-pale:#A5DEF7; --cyan-glow:rgba(31,155,214,.30);
  --silver:#C8D4DC; --white:#fff; --paper:#EEF1F4; --paper2:#E4E9ED; --ink:#0D1F35; --ink-soft:#46607A;
  --wrap:1140px; --r:14px;
  --shadow:0 18px 50px rgba(8,19,31,.13);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Montserrat,"Helvetica Neue",system-ui,sans-serif;color:var(--ink);background:var(--white);line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--cyan)}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 22px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- Wortmarke ---------- */
.wm{font-weight:800;letter-spacing:-.5px;line-height:1;white-space:nowrap}
.wm .a{background:linear-gradient(176deg,#fff 0%,#DDE6EC 38%,#9FB0BD 72%,#EAF1F5 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--silver)}
.wm .b{background:linear-gradient(176deg,#9BE6F6 0%,#4FC3DC 42%,#1580BC 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--cyan)}
.wm-dark .a{background:linear-gradient(176deg,#0E2233 0%,#2A4356 60%,#0E2233 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--ink)}
.sub{display:flex;align-items:center;gap:12px;justify-content:center;margin-top:9px}
.sub span{font-size:.78rem;font-weight:600;letter-spacing:5px;color:var(--silver);text-transform:uppercase;white-space:nowrap}
.sub i{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--cyan));max-width:110px}
.sub i:last-child{background:linear-gradient(90deg,var(--cyan),transparent)}
.claim{margin-top:14px;font-size:.82rem;font-weight:600;letter-spacing:3.4px;color:var(--cyan-light);text-transform:uppercase;text-align:center}

/* ---------- Kopf ---------- */
header{position:sticky;top:0;z-index:60;background:rgba(3,11,20,.95);backdrop-filter:blur(10px);border-bottom:1px solid rgba(92,196,240,.18)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;height:66px}
.nav .wm{font-size:1.16rem}
.nav > a:first-child{display:inline-flex;align-items:center;min-height:44px}
nav ul{display:none;gap:26px;list-style:none;margin:0;padding:0}
nav a{display:inline-flex;align-items:center;min-height:44px;color:#CBD9E3;text-decoration:none;font-size:.88rem;font-weight:600;letter-spacing:.4px}
nav a:hover{color:var(--cyan-light)}
.tel-top{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;background:var(--cyan);color:#04212B;text-decoration:none;font-weight:700;font-size:.86rem;padding:0 18px;border-radius:999px;white-space:nowrap}
.tel-top:hover{background:var(--cyan-light)}

/* ---------- Hero ---------- */
.hero{position:sticky;top:0;z-index:0;min-height:100svh;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;
  background:#030B14 url("bilder/hero-bg.jpg?v=2") no-repeat center top/100% auto;
  color:#fff;padding:0 0 34px;overflow:hidden;text-align:center}
/* Abdunkeln, damit Text und Knöpfe sicher lesbar bleiben */
.hero::before{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,rgba(3,11,20,0) 0%,rgba(3,11,20,0) 20%,rgba(3,11,20,.55) 27%,rgba(3,11,20,.92) 36%,#030B14 46%)}
.hero > *{position:relative;z-index:2}
/* Alles nach dem Hero schiebt sich darueber */
main > section:not(.hero){position:relative;z-index:1}
footer{position:relative;z-index:1}

.hero-logo{display:none}
.mann{width:186px;height:186px;border-radius:50%;object-fit:cover;object-position:50% 42%;background:linear-gradient(160deg,#EAF6FD,#CDE9F8);margin:0 auto;box-shadow:0 0 0 5px #fff,0 0 0 9px var(--cyan),0 16px 34px rgba(31,155,214,.26)}
.ueber{display:grid;grid-template-columns:1fr;gap:24px;align-items:center;justify-items:center}
.ueber .sec-head{margin:0;max-width:640px;text-align:left}
.ueber .eyebrow{text-align:left}
@media(min-width:820px){.ueber{grid-template-columns:210px 1fr;gap:46px;justify-items:start}.ueber .sec-head{max-width:none}.mann{width:210px;height:210px}}
.hero .wm{font-size:clamp(2.1rem,8.4vw,4rem)}
.hero p.lead{max-width:620px;margin:0 auto;color:#D3E4F0;font-size:1rem;text-shadow:0 2px 12px rgba(5,14,24,.85)}
.hero .wrap{display:flex;flex-direction:column;justify-content:flex-end;gap:18px;padding-top:34vh;padding-bottom:10px}
.cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:24px 0 0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:54px;padding:15px 26px;border-radius:999px;font-weight:700;font-size:1rem;text-decoration:none;border:0;cursor:pointer}
.btn-1{background:linear-gradient(135deg,var(--cyan-light),var(--cyan));color:#04212B;box-shadow:0 10px 30px var(--cyan-glow)}
.btn-1:hover{filter:brightness(1.08)}
.btn-2{background:transparent;color:#fff;border:1.5px solid rgba(165,222,247,.5)}
.btn-2:hover{border-color:var(--cyan-light);background:rgba(92,196,240,.12)}
.trust{display:flex;flex-wrap:wrap;gap:9px 22px;justify-content:center;margin:22px 0 0;padding:0;list-style:none;color:#9FBACB;font-size:.83rem;font-weight:600}
.trust li{display:flex;align-items:center;gap:7px}

/* ---------- Abschnitte ---------- */
section{padding:62px 0}
.sec-head{text-align:center;max-width:660px;margin:0 auto 46px}
.eyebrow{font-size:.75rem;font-weight:700;letter-spacing:3.4px;color:var(--cyan);text-transform:uppercase;margin:0 0 12px}
h2{font-size:clamp(1.6rem,4.6vw,2.35rem);font-weight:800;letter-spacing:-.6px;margin:0 0 14px;line-height:1.2}
.sec-head p{margin:0;color:var(--ink-soft);font-size:1.01rem}

.grid{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:18px}
.card{background:var(--white);border:1px solid #E1E9EE;border-radius:var(--r);padding:26px 24px;box-shadow:0 2px 14px rgba(14,34,51,.05);transition:transform .18s,box-shadow .18s,border-color .18s}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--cyan-pale)}
.ico{width:50px;height:50px;border-radius:13px;background:linear-gradient(135deg,#E7F6FA,#C9EBF3);display:flex;align-items:center;justify-content:center;margin-bottom:15px}
.card h3{font-size:1.06rem;font-weight:700;margin:0 0 7px}
.card p{margin:0;color:var(--ink-soft);font-size:.93rem}

.alt{background:var(--paper)}
.werte{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:16px}
.wert{display:flex;gap:15px;align-items:flex-start;background:#fff;border-radius:var(--r);padding:22px;border:1px solid #E1E9EE}
.wert h3{margin:0 0 4px;font-size:1rem;font-weight:700}
.wert p{margin:0;font-size:.9rem;color:var(--ink-soft)}

/* ---------- Ablauf ---------- */
.steps{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:14px;counter-reset:s}
.step{position:relative;background:#fff;border:1px solid #E1E9EE;border-radius:var(--r);padding:24px 22px 22px 66px}
.step::before{counter-increment:s;content:counter(s);position:absolute;left:20px;top:22px;width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--cyan-light),var(--cyan));color:#04212B;font-weight:800;font-size:1rem;display:flex;align-items:center;justify-content:center}
.step h3{margin:0 0 5px;font-size:1rem;font-weight:700}
.step p{margin:0;font-size:.9rem;color:var(--ink-soft)}

/* ---------- Gebiet ---------- */
.orte{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;list-style:none;padding:0;margin:0}
.orte li{background:#fff;border:1px solid var(--cyan-pale);color:var(--ink);border-radius:999px;padding:9px 18px;font-size:.9rem;font-weight:600}

/* ---------- Kontakt ---------- */
.kontakt{position:relative;overflow:hidden;background:radial-gradient(120% 100% at 50% 0%,#0F3454 0%,var(--navy-900) 68%);color:#fff}
.kontakt h2{color:#fff}
.kontakt .sec-head p{color:#BCD2E0}
.kbox{display:grid;grid-template-columns:1fr;gap:22px}
.kcard{background:rgba(255,255,255,.055);border:1px solid rgba(165,222,247,.22);border-radius:var(--r);padding:26px}
.kcard h3{margin:0 0 18px;font-size:1.05rem;color:#fff}
.kzeile{display:flex;align-items:center;min-height:44px;gap:13px;margin-bottom:10px;color:#DCE9F1;text-decoration:none;font-size:.97rem;word-break:break-word}
.kzeile:hover{color:var(--cyan-light)}
.kzeile svg{flex:none}
form{display:flex;flex-direction:column;gap:13px}
label{font-size:.83rem;font-weight:600;color:#BCD2E0}
input,textarea,select{width:100%;padding:13px 15px;border-radius:10px;border:1px solid rgba(165,222,247,.32);background:rgba(255,255,255,.07);color:#fff;font:inherit;font-size:.95rem}
input:focus,textarea:focus,select:focus{outline:2px solid var(--cyan-light);outline-offset:1px}
input::placeholder,textarea::placeholder{color:#7E9AAC}
.hp{position:absolute;left:-9999px}

/* ---------- Fuß ---------- */
footer{background:#050D16;color:#9CB4C4;padding:44px 0 30px;font-size:.9rem}
.frow{display:flex;flex-direction:column;gap:22px;align-items:center;text-align:center}
footer a{color:#B9D3E0;text-decoration:none}
form a{display:inline-block;padding:6px 0;text-decoration:underline}
footer a:hover{color:var(--cyan-light)}
.flinks{display:flex;gap:6px 22px;flex-wrap:wrap;justify-content:center}
.flinks a{display:inline-flex;align-items:center;min-height:44px;padding:0 2px}
.fbottom{margin-top:26px;padding-top:20px;border-top:1px solid rgba(143,168,185,.16);text-align:center;font-size:.86rem}

/* ---------- Größer ---------- */
@media(min-width:700px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .werte{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .frow{flex-direction:row;justify-content:space-between;text-align:left}
}
@media(min-width:980px){
  section{padding:92px 0}
  nav ul{display:flex}
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .werte{grid-template-columns:repeat(4,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(5,minmax(0,1fr))}
  .kbox{grid-template-columns:1fr 1.15fr;gap:30px}
  .hero{padding-top:74px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}

#ueber{padding-top:26px}

/* ============================================================
   GLANZ — Lichtreflexe, Funkeln, Wasser
   ============================================================ */

/* Funkeln: Vier-Zack-Stern wie im Logo */
.funke{position:absolute;pointer-events:none;opacity:0;animation:funkeln 5.5s ease-in-out infinite}
.funke svg{display:block}
@keyframes funkeln{
  0%,88%,100%{opacity:0;transform:scale(.55) rotate(0deg)}
  92%{opacity:1;transform:scale(1.12) rotate(12deg)}
  96%{opacity:.5;transform:scale(.85) rotate(20deg)}
}
.f1{top:9%;left:5%;animation-delay:.0s}
.f2{top:15%;right:7%;animation-delay:1.5s}
.f3{top:31%;left:4%;animation-delay:2.8s}
.f4{top:5%;right:26%;animation-delay:4.1s}
.f5{top:24%;right:4%;animation-delay:3.4s}

/* Lichtstreifen, der über eine Fläche wandert */
.sheen{position:relative;overflow:hidden}
.sheen::after{content:"";position:absolute;top:-60%;left:-70%;width:45%;height:220%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:rotate(16deg);animation:sweep 7s ease-in-out infinite}
@keyframes sweep{0%,72%{left:-70%}86%,100%{left:130%}}

/* Wassertropfen und Blasen */
.tropfen{position:absolute;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.95) 0%,rgba(140,222,250,.75) 34%,rgba(31,155,214,.55) 72%,rgba(16,110,160,.42) 100%);
  box-shadow:inset 0 -4px 9px rgba(255,255,255,.65),0 3px 12px rgba(31,155,214,.35);pointer-events:none;
  animation:schweben 9s ease-in-out infinite}
@keyframes schweben{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-14px) scale(1.04)}}
.t1{width:24px;height:30px;top:13%;right:8%;animation-delay:0s;opacity:.9}
.t2{width:14px;height:17px;top:22%;right:15%;animation-delay:1.8s;opacity:.8}
.t3{width:9px;height:11px;top:18%;right:20%;animation-delay:3.2s;opacity:.7}
.t4{width:18px;height:22px;top:8%;left:2%;animation-delay:2.4s;opacity:.8}

/* Karten: Glasoptik statt Standardkasten */
.card{position:relative;overflow:hidden;
  background:linear-gradient(158deg,#fff 0%,#F7FCFE 100%);
  border:1px solid #DCE9F1}
.card::before{content:"";position:absolute;inset:0;border-radius:var(--r);padding:1px;
  background:linear-gradient(150deg,rgba(92,196,240,.55),rgba(255,255,255,0) 45%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.card:hover{border-color:transparent}
.ico{position:relative;background:linear-gradient(145deg,#E3F5FD,#BFE7F8);
  box-shadow:0 4px 14px rgba(31,155,214,.18),inset 0 1px 0 rgba(255,255,255,.9)}

/* Werte-Kacheln mit Glanzkante */
.wert{background:linear-gradient(158deg,#fff,#F6FBFE);border:1px solid #DCE9F1;
  box-shadow:0 2px 12px rgba(14,34,51,.05)}

/* Ablaufschritte: leuchtende Nummer */
.step::before{box-shadow:0 6px 16px rgba(31,155,214,.35),inset 0 1px 0 rgba(255,255,255,.6)}

/* Der Mann: gross, ohne Kasten, unten weich auslaufend */
.mann{width:100%;max-width:none;height:auto;border-radius:0;object-fit:contain;
  background:none;box-shadow:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 62%,rgba(0,0,0,.55) 84%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 62%,rgba(0,0,0,.55) 84%,transparent 100%);
  filter:drop-shadow(0 18px 34px rgba(31,155,214,.30))}
.mann-box{position:relative;width:100%;max-width:420px;margin:0 auto}

/* Ueberschriften bekommen einen Glanzpunkt */
h2{position:relative}
.sec-head .eyebrow{position:relative;display:inline-block}

/* Hero-Logo leicht atmend */
.hero-logo{animation:atmen 7s ease-in-out infinite}
@keyframes atmen{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

@media(prefers-reduced-motion:reduce){
  .funke,.tropfen,.hero-logo,.sheen::after{animation:none!important}
  .funke{opacity:.75}
}

/* ============================================================
   NACH VISITENKARTE — Wellen, Blasen, Wechsel hell/dunkel
   ============================================================ */

/* Abschnittsfarben */
.dunkel{position:relative;background:linear-gradient(168deg,var(--navy-800) 0%,var(--navy-900) 100%);color:#E8F1F7;overflow:hidden}
.dunkel h2{color:#fff}
.dunkel .sec-head p{color:#A9C3D6}
.dunkel .eyebrow{color:var(--cyan-light)}
.hell{position:relative;background:linear-gradient(168deg,#F6F8FA 0%,var(--paper) 55%,var(--paper2) 100%);overflow:hidden}

/* Wellen-Trenner mit Blasen, wie am unteren Kartenrand */
.welle{position:absolute;left:0;right:0;line-height:0;pointer-events:none;z-index:3;height:clamp(58px,11vw,132px);overflow:hidden}
.welle svg{display:block;width:200%;height:100%}
.welle .lage{animation:fliessen linear infinite;transform-origin:center}
.welle .l1{animation-duration:23s}
.welle .l2{animation-duration:13s;animation-direction:reverse}
.welle .l3{animation-duration:31s}
.welle .l4{animation-duration:17s;animation-direction:reverse}
.welle .l5{animation-duration:9.5s}
.welle .schaum{mix-blend-mode:screen}
@keyframes fliessen{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.welle-unten{bottom:-1px}
.welle-oben{top:-1px;transform:rotate(180deg)}

/* Blasen wie in der Kartenwelle */
.blase{position:absolute;z-index:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.55) 0%,rgba(168,232,252,.30) 30%,rgba(70,190,225,.16) 62%,rgba(40,150,195,.10) 100%);
  border:1px solid rgba(190,240,255,.42);
  box-shadow:inset -3px -4px 10px rgba(120,215,250,.20),inset 3px 3px 8px rgba(255,255,255,.30),0 0 14px rgba(120,205,240,.22);
  animation:steigen 11s ease-in-out infinite}
.blase::after{content:"";position:absolute;top:15%;left:20%;width:24%;height:20%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.95),rgba(255,255,255,.25));filter:blur(.4px)}
.blase::before{content:"";position:absolute;bottom:14%;right:18%;width:12%;height:10%;border-radius:50%;background:rgba(255,255,255,.5)}
@keyframes steigen{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}

/* Kontaktzeilen: runder Icon-Rahmen wie auf der Kartenrückseite */
.kzeile{position:relative}
.kring{flex:none;width:38px;height:38px;border-radius:50%;border:1.5px solid rgba(92,196,240,.55);
  display:flex;align-items:center;justify-content:center;background:rgba(92,196,240,.09)}
.kzeile:hover .kring{border-color:var(--cyan-light);background:rgba(92,196,240,.18)}

/* Leistungen auf Dunkel: Glaskarten */
.dunkel .card{background:linear-gradient(158deg,rgba(255,255,255,.075) 0%,rgba(255,255,255,.03) 100%);
  border:1px solid rgba(140,200,235,.18);backdrop-filter:blur(6px)}
.dunkel .card::before{background:linear-gradient(150deg,rgba(92,196,240,.5),rgba(255,255,255,0) 48%)}
.dunkel .card h3{color:#fff}
.dunkel .card p{color:#A9C3D6}
.dunkel .ico{background:linear-gradient(145deg,rgba(92,196,240,.22),rgba(31,155,214,.12));
  border:1px solid rgba(140,200,235,.25);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.dunkel .card:hover{border-color:rgba(92,196,240,.45);box-shadow:0 16px 40px rgba(0,0,0,.35)}

/* Feine Trennlinien wie in der Leistungsliste der Karte */
.orte li{background:rgba(255,255,255,.06);border:1px solid rgba(140,200,235,.25);color:#DCEAF4}

/* Glanzlinie an Abschnittskanten */
.kante{position:absolute;left:0;right:0;height:1px;z-index:3;
  background:linear-gradient(90deg,transparent,rgba(140,215,245,.65),transparent)}
.kante-oben{top:0}

@media(min-width:900px){
  .hero{background-position:center 64px;background-size:auto 50vh;padding-bottom:40px}
  .hero::before{background:linear-gradient(180deg,rgba(3,11,20,0) 0%,rgba(3,11,20,0) 62%,rgba(3,11,20,.6) 74%,rgba(3,11,20,.95) 100%)}
  .hero .wrap{padding-top:calc(50vh + 44px)}
}

/* Der Mann: keine sichtbare Bildkante */
.mann{-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 52%,rgba(0,0,0,.85) 68%,rgba(0,0,0,.35) 86%,transparent 100%),
                        linear-gradient(to right,transparent 0%,#000 7%,#000 93%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom,#000 0%,#000 52%,rgba(0,0,0,.85) 68%,rgba(0,0,0,.35) 86%,transparent 100%),
             linear-gradient(to right,transparent 0%,#000 7%,#000 93%,transparent 100%);
  mask-composite:intersect}
.welle-oben{top:-1px;transform:rotate(180deg)}
.hell > .welle-oben{z-index:5}

/* ============================================================
   SCROLL-ERLEBNIS — Abschnitte ziehen sich herein
   ============================================================ */
/* Einblendungen steuert GSAP. Ohne GSAP ist alles sofort sichtbar. */

/* Abschnitte in voller Höhe, ohne Inhalt abzuschneiden */
main > section{min-height:100svh;display:flex;flex-direction:column;justify-content:center}
main > section > .wrap{width:100%}
@media(max-width:700px){
  main > section{min-height:auto;padding-top:76px;padding-bottom:76px}
  main > section.dunkel,main > section.hell{padding-top:96px;padding-bottom:96px}
}

/* Blasen steigen in der Welle auf */
.wellenblasen{position:absolute;left:0;right:0;bottom:0;height:clamp(58px,11vw,132px);pointer-events:none;z-index:4;overflow:hidden}
.wb{position:absolute;bottom:-24px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.9),rgba(190,240,255,.55) 40%,rgba(90,200,235,.35) 100%);
  box-shadow:inset -1px -2px 4px rgba(60,170,210,.4),0 0 8px rgba(150,230,255,.5);
  animation:aufsteigen linear infinite}
@keyframes aufsteigen{
  0%{transform:translateY(0) translateX(0);opacity:0}
  12%{opacity:.9}
  80%{opacity:.7}
  100%{transform:translateY(-130px) translateX(14px);opacity:0}
}

/* ============================================================
   DER ZUG — die Welle holt die naechste Seite herauf
   Die Hoehe wird beim Scrollen gesteuert; ohne Steuerung bleibt
   der Ruhewert stehen und alles sieht normal aus.
   ============================================================ */
.welle-zug{transition:none}
.zug .welle-zug,.zug .welle-zug + .wellenblasen{will-change:height}
.zug .hero{will-change:filter,transform}

/* ============================================================
   FASSUNG 2 (17.10.2026) — Schrift, Hauptüberschrift, Reiter,
   Wisch-Fläche, Steuerrechner, Fragen, Handy-Leiste
   ============================================================ */

/* ---------- Schrift: Fließtext normal, Überschriften kräftig ---------- */
body{font-weight:450;font-size:1.03rem;line-height:1.7;color:#22384C}
h1,h2,h3{color:var(--ink)}
h2{font-weight:800;letter-spacing:-.8px;line-height:1.15;font-size:clamp(1.75rem,4.8vw,2.7rem)}
h3{font-weight:700;letter-spacing:-.2px}
.sec-head p{font-size:1.06rem;line-height:1.7}
.akzent{background:linear-gradient(100deg,#1580BC 0%,#2BA8C4 60%,#5CC4F0 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--cyan)}
.dunkel .akzent{background:linear-gradient(100deg,#7FD9F5,#A5E4FA);-webkit-background-clip:text;background-clip:text}
.dunkel p,.dunkel li{color:#B4CADA}
.eyebrow{font-weight:700;letter-spacing:3px}
nav a{font-weight:600}
.btn{font-weight:700;letter-spacing:.1px}
.btn-klein{min-height:46px;padding:11px 20px;font-size:.93rem}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:#fff;color:var(--ink);padding:10px 16px;border-radius:8px}
.skip:focus{left:12px}
:focus-visible{outline:3px solid var(--cyan-light);outline-offset:3px}

/* ---------- Kopf ---------- */
.tel-top span{font-variant-numeric:tabular-nums}
@media(max-width:380px){.nav .wm{font-size:1rem}.tel-top{padding:0 13px;font-size:.8rem}}

/* ---------- Start ---------- */
.hero{background-size:min(100%,1100px) auto;background-position:center 66px}
.hero::before{background:linear-gradient(180deg,rgba(3,11,20,0) 0%,rgba(3,11,20,0) 30%,rgba(3,11,20,.7) 40%,#030B14 50%)}
.hero .wrap{padding-top:calc(min(100vw,1100px) * .49 + 70px);gap:12px}
.hero-ort{margin:0;font-size:.78rem;font-weight:700;letter-spacing:2.6px;text-transform:uppercase;color:var(--cyan-light)}
.hero h1{margin:0;color:#fff;font-weight:800;letter-spacing:-1.2px;line-height:1.08;font-size:clamp(2.1rem,7.6vw,3.6rem);text-shadow:0 4px 24px rgba(0,10,25,.6)}
.glanzwort{background:linear-gradient(100deg,#A5E4FA 0%,#5CC4F0 45%,#fff 55%,#5CC4F0 70%,#A5E4FA 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:glanzlauf 6s ease-in-out infinite}
@keyframes glanzlauf{0%,55%{background-position:100% 0}85%,100%{background-position:0 0}}
.hero p.lead{font-size:1.05rem;font-weight:450;color:#C9DCEA;max-width:640px}
.cta{margin-top:14px}
.trust{margin-top:16px;font-weight:600;color:#A6C0D1}
@media(min-width:900px){
  .hero{background-position:center 70px;background-size:auto 46vh;padding-bottom:44px}
  .hero::before{background:linear-gradient(180deg,rgba(3,11,20,0) 0%,rgba(3,11,20,0) 50%,rgba(3,11,20,.75) 58%,#030B14 66%)}
  .hero .wrap{padding-top:calc(46vh + 86px)}
}
@media(min-width:900px) and (max-height:760px){
  .hero{background-size:auto 40vh}
  .hero .wrap{padding-top:calc(40vh + 82px)}
  .hero h1{font-size:2.9rem}
  .hero p.lead{font-size:.98rem}
}

/* ---------- Reiter „Für wen“ ---------- */
.tabs{max-width:1020px;margin:0 auto}
.tabliste{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:18px}
.tab{display:flex;align-items:center;justify-content:center;gap:9px;min-height:54px;padding:10px 14px;border-radius:14px;
  border:1.5px solid #D3E3EC;background:#fff;color:#33526B;font:inherit;font-weight:700;font-size:.95rem;cursor:pointer;
  transition:background .2s,border-color .2s,color .2s,box-shadow .2s}
.tab:hover{border-color:var(--cyan-light);color:var(--ink)}
.tab[aria-selected="true"]{background:linear-gradient(135deg,#0F3B5E,#0B2440);border-color:transparent;color:#fff;box-shadow:0 12px 28px rgba(13,31,53,.25)}
.tab[aria-selected="true"] svg{color:var(--cyan-light)}
.panel{display:grid;gap:26px;background:#fff;border:1px solid #DCE9F1;border-radius:20px;padding:28px 24px;box-shadow:0 18px 50px rgba(8,19,31,.08)}
.panel[hidden]{display:none}
html:not(.js) .panel[hidden]{display:grid;margin-top:14px}
.panel.auf{animation:panelrein .45s ease-out}
@keyframes panelrein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.panel h3{font-size:1.4rem;line-height:1.25;margin:0 0 12px;letter-spacing:-.4px}
.panel p{margin:0 0 14px;color:#3F5A70}
.rhythmus{font-size:.94rem;background:#EEF7FB;border-radius:10px;padding:10px 14px;display:inline-block}
.rhythmus strong{color:var(--ink)}
.haken{list-style:none;margin:0;padding:0;display:grid;gap:12px;align-content:start}
.haken li{position:relative;padding:12px 14px 12px 46px;background:#F5FAFC;border-radius:12px;font-weight:500;color:#21384C}
.haken li::before{content:"";position:absolute;left:14px;top:50%;width:20px;height:20px;margin-top:-10px;border-radius:50%;
  background:linear-gradient(135deg,var(--cyan-light),var(--cyan)) center/100% no-repeat}
.haken li::after{content:"";position:absolute;left:21px;top:50%;width:6px;height:10px;margin-top:-7px;border:solid #fff;border-width:0 2.2px 2.2px 0;transform:rotate(45deg)}
@media(min-width:760px){
  .tabliste{grid-template-columns:repeat(4,1fr)}
  .panel{grid-template-columns:1.15fr 1fr;padding:38px 40px;gap:40px;align-items:center}
}

/* ---------- Leistungen ---------- */
.grid-4 .card{display:flex;flex-direction:column}
.card h3{font-size:1.1rem;hyphens:manual}
.card p{flex:1}
.tag{display:inline-block;align-self:flex-start;margin-top:16px;font-size:.78rem;font-weight:600;letter-spacing:.3px;color:#8FD8F0;
  border:1px solid rgba(127,217,245,.35);border-radius:999px;padding:5px 12px}
.dunkel .ico{width:52px;height:52px}
.card-cta{background:linear-gradient(150deg,rgba(92,196,240,.22),rgba(31,155,214,.08))!important;border-color:rgba(127,217,245,.45)!important;justify-content:center}
.card-cta .btn{align-self:flex-start;margin-top:16px}
@media(min-width:1100px){.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- Wisch-Fläche ---------- */
.wisch{position:relative;max-width:980px;margin:0 auto;aspect-ratio:16/8;min-height:300px;border-radius:24px;overflow:hidden;
  box-shadow:0 30px 70px rgba(8,19,31,.28),0 0 0 1px rgba(255,255,255,.6) inset;user-select:none;-webkit-user-select:none}
@media(max-width:600px){.wisch{aspect-ratio:4/5}}
.wisch-inhalt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;
  background:radial-gradient(120% 90% at 30% 20%,#1E6FA8 0%,#0F3B65 40%,#081B33 100%)}
.wisch-inhalt::before{content:"";position:absolute;top:-30%;left:-20%;width:40%;height:160%;transform:rotate(22deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent)}
.wisch-inhalt::after{content:"";position:absolute;inset:0;background:url(bilder/mann.png) right -40px bottom -10px/58% auto no-repeat;opacity:.16}
.wisch-text{position:relative;z-index:2;padding:20px}
.wisch-gross{margin:0;font-weight:900;font-size:clamp(4rem,14vw,9rem);letter-spacing:-4px;line-height:.9;
  background:linear-gradient(180deg,#fff 0%,#DDEFF8 40%,#7FD9F5 70%,#E9FBFF 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 6px 20px rgba(92,196,240,.45))}
.wisch-klein{margin:14px auto 0;max-width:420px;color:#CFE5F2;font-weight:500;font-size:1.05rem}
.w-funke{position:absolute;width:26px;height:26px;opacity:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c1.1 6.3 3.6 8.8 9.9 9.9C15.6 12 13.1 14.5 12 20.8 10.9 14.5 8.4 12 2.1 10.9 8.4 9.8 10.9 7.3 12 1Z' fill='%23fff'/%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(0 0 8px #A5E4FA)}
.w1{top:16%;left:18%}.w2{top:24%;right:16%;width:38px;height:38px}.w3{bottom:20%;left:30%;width:18px;height:18px}.w4{bottom:26%;right:28%}
.wisch-dreck{position:absolute;inset:0;width:100%;height:100%;cursor:none;touch-action:none;transition:opacity 1.1s ease}
@media(hover:none){.wisch-dreck{cursor:auto}}
.schwamm{position:absolute;left:0;top:0;pointer-events:none;opacity:0;transition:opacity .25s;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35));z-index:3}
.wisch.mit-maus .schwamm,.wisch.demo .schwamm{opacity:1}
.wisch-fortschritt{position:absolute;left:24px;right:24px;bottom:18px;height:6px;border-radius:9px;background:rgba(255,255,255,.25);overflow:hidden;z-index:3;transition:opacity .6s}
.wisch-fortschritt span{display:block;height:100%;width:0;background:linear-gradient(90deg,#7FD9F5,#fff);border-radius:9px;transition:width .2s}
.wisch.sauber .wisch-dreck{opacity:0;pointer-events:none}
.wisch.sauber .wisch-fortschritt,.wisch.sauber .schwamm{opacity:0}
.wisch.sauber .w-funke{animation:funkeln2 2.6s ease-in-out infinite}
.wisch.sauber .w2{animation-delay:.4s}.wisch.sauber .w3{animation-delay:.9s}.wisch.sauber .w4{animation-delay:1.3s}
@keyframes funkeln2{0%,100%{opacity:0;transform:scale(.5) rotate(0)}40%{opacity:1;transform:scale(1.15) rotate(15deg)}70%{opacity:.4;transform:scale(.9) rotate(25deg)}}
.wisch-hinweis-touch{display:none}
@media(hover:none){.wisch-hinweis-maus{display:none}.wisch-hinweis-touch{display:block}}
.wisch-fertig{max-width:640px;margin:26px auto 0;text-align:center;opacity:0;transform:translateY(10px);transition:opacity .7s .5s,transform .7s .5s}
.wisch-fertig.da{opacity:1;transform:none}
.wisch-fertig p{font-size:1.1rem;color:#2C465C;margin:0 0 16px}
html:not(.js) .wisch-dreck,html:not(.js) .wisch-fortschritt{display:none}
html:not(.js) .wisch-fertig{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.wisch-dreck{transition:none}.glanzwort{animation:none}}

/* ---------- Über uns ---------- */
.ueber .sec-head p{margin-bottom:14px}
.unterschrift{font-weight:700;color:#fff!important;margin-top:20px!important;font-size:1.05rem}
.unterschrift span{display:block;font-weight:500;font-size:.85rem;color:var(--cyan-light);letter-spacing:1.5px;text-transform:uppercase}
.fakten{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:10px}
.fakten li{border:1px solid rgba(140,200,235,.22);background:rgba(255,255,255,.05);border-radius:12px;padding:12px 16px;font-size:.92rem;color:#C4D8E6}
.fakten strong{display:block;color:#fff;font-size:.82rem;letter-spacing:1.4px;text-transform:uppercase;margin-bottom:2px}
@media(min-width:760px){.fakten{grid-template-columns:repeat(3,1fr)}}
@media(min-width:820px){.ueber{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}.mann-box{max-width:none}}

/* ---------- Warum ---------- */
.werte-6 .wert h3{font-size:1.04rem;margin-bottom:6px}
.werte-6 .wert p{font-size:.94rem;line-height:1.6}
.werte-6 svg{flex:none}
@media(min-width:980px){.werte-6{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- Steuerrechner ---------- */
.steuer{margin-top:40px;display:grid;gap:26px;border-radius:22px;padding:30px 26px;color:#DCEAF4;
  background:radial-gradient(120% 120% at 0% 0%,#14507A 0%,#0C2846 55%,#081A30 100%);box-shadow:0 24px 60px rgba(8,19,31,.25)}
.steuer h3{color:#fff;font-size:clamp(1.35rem,3.4vw,1.8rem);line-height:1.2;margin:0 0 12px;letter-spacing:-.4px}
.steuer .eyebrow{color:var(--cyan-light)}
.steuer p{margin:0 0 12px;color:#BFD5E4}
.steuer .klein{font-size:.84rem;color:#8FAABD;margin:0}
.rechner{background:rgba(255,255,255,.06);border:1px solid rgba(140,200,235,.25);border-radius:18px;padding:22px}
.rechner label{display:block;color:#BFD5E4;font-size:.9rem;font-weight:600}
.rechner output{display:block;font-size:2rem;font-weight:800;color:#fff;margin:4px 0 12px;font-variant-numeric:tabular-nums}
.rechner input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:10px;padding:0;border:0;border-radius:9px;outline-offset:4px;
  background:linear-gradient(90deg,#5CC4F0 0,#5CC4F0 var(--p,20%),rgba(255,255,255,.18) var(--p,20%))}
.rechner input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:#fff;border:4px solid #1F9BD6;box-shadow:0 4px 12px rgba(0,0,0,.35);cursor:pointer}
.rechner input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:4px solid #1F9BD6;cursor:pointer}
.ergebnis{margin-top:18px;padding-top:16px;border-top:1px solid rgba(140,200,235,.2);display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.ergebnis span{color:#BFD5E4;font-size:.92rem}
.ergebnis strong{font-size:2.1rem;font-weight:900;color:#7FE3B0;font-variant-numeric:tabular-nums}
@media(min-width:860px){.steuer{grid-template-columns:1.2fr 1fr;padding:40px 44px;gap:44px;align-items:center}}

/* ---------- Ablauf ---------- */
#ablauf{padding-top:30px}
@media(min-width:980px){.steps-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.step h3{font-size:1.04rem}

/* ---------- Gebiet & Fragen ---------- */
.gebiet{display:grid;gap:22px;align-items:center;margin-bottom:64px;padding-bottom:56px;border-bottom:1px solid rgba(140,200,235,.16)}
.gebiet h2{margin-bottom:10px}
.gebiet p{margin:0}
.gebiet .orte{justify-content:flex-start}
@media(min-width:900px){.gebiet{grid-template-columns:1fr 1fr;gap:48px}}
.faq-kopf{margin-bottom:28px}
.faq{max-width:820px;margin:0 auto;display:grid;gap:12px}
.faq details{border:1px solid rgba(140,200,235,.22);background:rgba(255,255,255,.045);border-radius:14px;transition:background .2s,border-color .2s}
.faq details[open]{background:rgba(92,196,240,.09);border-color:rgba(127,217,245,.45)}
.faq summary{list-style:none;cursor:pointer;padding:18px 54px 18px 20px;position:relative;font-weight:700;color:#fff;font-size:1.02rem;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:22px;top:50%;width:10px;height:10px;margin-top:-7px;border:solid var(--cyan-light);border-width:0 2.4px 2.4px 0;transform:rotate(45deg);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.faq details p{margin:0;padding:0 20px 20px;color:#BFD5E4}

/* ---------- Kontakt ---------- */
.kgross{font-size:1.2rem;font-variant-numeric:tabular-nums}
.kstill{cursor:default}
.kstill:hover{color:#DCE9F1}
.form-hinweis{margin:2px 0 0;font-size:.85rem;color:#9EB9CB;line-height:1.55}
select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%237FD9F5' stroke-width='2' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;padding-right:40px}
select option{color:#0D1F35}

/* ---------- Fuß ---------- */
.fslogan{margin:8px 0 0;font-size:.82rem;letter-spacing:2px;text-transform:uppercase;color:#5FCDE4}
.fkontakt{margin:10px 0 0;font-size:.9rem}

/* ---------- Schnellkontakt am Handy ---------- */
.mobil-leiste{position:fixed;left:12px;right:12px;bottom:12px;z-index:70;display:grid;grid-template-columns:1fr 1fr;gap:10px;
  transform:translateY(140%);transition:transform .35s ease}
.mobil-leiste.sichtbar{transform:none}
.mobil-leiste a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:54px;border-radius:16px;font-weight:700;text-decoration:none;box-shadow:0 12px 30px rgba(0,0,0,.35)}
.ml-anruf{background:linear-gradient(135deg,var(--cyan-light),var(--cyan));color:#04212B}
.ml-wa{background:#0B2440;color:#fff;border:1.5px solid rgba(127,217,245,.45)}
@media(min-width:900px){.mobil-leiste{display:none}}
.wisch-inhalt{z-index:0}
.wisch-dreck{z-index:1}
.logo-link{text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
@media(max-width:899px){footer{padding-bottom:96px}}
/* acht Reiter: am Handy schmaler, Text darf umbrechen */
.tabliste{grid-template-columns:repeat(2,minmax(0,1fr))}
.tab{min-width:0;text-align:center;line-height:1.25}
.tab svg{flex:none}
@media(max-width:759px){.tab{font-size:.84rem;gap:7px;padding:10px 8px;min-height:56px;justify-content:flex-start;text-align:left}}
@media(min-width:760px){.tabliste{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ============================================================
   KÜRZER (17.10.2026): Abschnitte nur so hoch wie ihr Inhalt
   ============================================================ */
main > section:not(.hero){min-height:0}
section{padding:58px 0}
main > section.hell,main > section.dunkel{padding-top:clamp(70px,9vw,110px);padding-bottom:56px}
#warum{padding-top:clamp(70px,9vw,110px)}
.sec-head{margin-bottom:32px}
.ueber .sec-head p{margin-bottom:10px}
.fakten{margin-top:16px}
.unterschrift{margin-top:12px!important}
.wisch{aspect-ratio:16/7;min-height:260px}
.wisch-fertig{margin-top:18px}
.faq-kopf{margin-bottom:22px}
.faq summary{padding:15px 50px 15px 18px}
@media(max-width:759px){
  main > section.hell,main > section.dunkel{padding-top:76px;padding-bottom:44px}
  .kontakt{padding:52px 0}
  .wisch{aspect-ratio:1/1}
  .panel{padding:22px 18px;gap:18px}
  .panel h3{font-size:1.22rem}
  .haken{gap:8px}
  .haken li{padding:9px 12px 9px 42px;font-size:.94rem}
  .mann-box{max-width:300px}
  .werte-6{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .werte-6 .wert{flex-direction:column;gap:8px;padding:14px}
  .werte-6 .wert svg{width:26px;height:26px}
  .werte-6 .wert h3{font-size:.92rem;line-height:1.3}
  .werte-6 .wert p{font-size:.84rem;line-height:1.5}
  .fakten li{padding:10px 14px}
}

/* ============================================================
   START FASSUNG 3 (17.10.2026): farbig, Logo freigestellt,
   Slogan als leuchtendes Band
   ============================================================ */
.hero{
  background:
    radial-gradient(55% 45% at 50% 30%,rgba(120,215,250,.55) 0%,rgba(40,160,225,.28) 38%,rgba(20,110,200,0) 72%),
    radial-gradient(130% 95% at 50% 0%,#1A74C2 0%,#0F4C93 38%,#0A3168 68%,#071E45 100%);
  background-size:auto;background-position:0 0;
  padding:84px 0 40px;justify-content:center}
.hero::before{background:linear-gradient(180deg,rgba(4,18,42,0) 60%,rgba(4,18,42,.45) 100%)}
.hero .wrap{padding-top:0;padding-bottom:0;gap:14px;align-items:center}
@media(min-width:900px){.hero{background-size:auto;padding:92px 0 46px}.hero .wrap{padding-top:0}}
@media(min-width:900px) and (max-height:760px){.hero .wrap{padding-top:0}}

/* Lichtstrahlen, die sich langsam drehen */
.strahlen{position:absolute;left:50%;top:30%;width:1600px;height:1600px;margin:-800px 0 0 -800px;z-index:1;pointer-events:none;opacity:.35;
  background:repeating-conic-gradient(from 0deg,rgba(190,240,255,.16) 0deg 6deg,rgba(190,240,255,0) 6deg 22deg);
  -webkit-mask-image:radial-gradient(circle,#000 0%,rgba(0,0,0,.55) 30%,transparent 62%);mask-image:radial-gradient(circle,#000 0%,rgba(0,0,0,.55) 30%,transparent 62%);
  animation:drehen 90s linear infinite}
@keyframes drehen{to{transform:rotate(360deg)}}

/* aufsteigende Blasen im Hintergrund */
.hero-blasen{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.hero-blasen span{position:absolute;bottom:-40px;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.85),rgba(190,240,255,.35) 40%,rgba(120,210,245,.12) 100%);
  border:1px solid rgba(220,248,255,.45);box-shadow:inset -2px -3px 6px rgba(80,180,230,.35);animation:blasesteigt linear infinite}
.hero-blasen span:nth-child(1){left:8%;width:16px;height:16px;animation-duration:13s}
.hero-blasen span:nth-child(2){left:18%;width:9px;height:9px;animation-duration:10s;animation-delay:3s}
.hero-blasen span:nth-child(3){left:31%;width:22px;height:22px;animation-duration:16s;animation-delay:6s}
.hero-blasen span:nth-child(4){left:69%;width:12px;height:12px;animation-duration:12s;animation-delay:1s}
.hero-blasen span:nth-child(5){left:80%;width:24px;height:24px;animation-duration:17s;animation-delay:4s}
.hero-blasen span:nth-child(6){left:90%;width:10px;height:10px;animation-duration:11s;animation-delay:7s}
.hero-blasen span:nth-child(7){left:55%;width:8px;height:8px;animation-duration:14s;animation-delay:9s}
@keyframes blasesteigt{0%{transform:translateY(0);opacity:0}10%{opacity:.9}100%{transform:translateY(-105vh) translateX(20px);opacity:0}}

/* Logo */
.hero-bild{display:block;width:min(94vw,640px);height:auto;margin:0 auto -4px;
  filter:drop-shadow(0 18px 40px rgba(3,20,55,.45));animation:atmen 7s ease-in-out infinite}
@media(min-width:900px){.hero-bild{width:min(56vw,620px,calc((100vh - 400px) * 1.74))}}

/* Slogan als leuchtendes Band */
.slogan-band{margin:0}
.slogan-band span{position:relative;display:inline-block;padding:12px 30px;border-radius:999px;overflow:hidden;
  font-weight:700;font-size:clamp(1.02rem,3.6vw,1.45rem);letter-spacing:.4px;color:#fff;
  background:linear-gradient(180deg,rgba(12,48,98,.9),rgba(6,28,62,.9));
  box-shadow:0 0 0 2px rgba(127,217,245,.9),0 0 28px 6px rgba(92,196,240,.45),inset 0 1px 0 rgba(255,255,255,.25);
  text-shadow:0 0 14px rgba(160,225,255,.55)}
.slogan-band em{font-style:normal;background:linear-gradient(180deg,#E9FBFF,#7FD9F5 60%,#C6F2FF);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.slogan-band span::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);animation:sweep 6s ease-in-out infinite}

/* Überschrift & Text auf Blau */
.hero h1{margin-top:10px;text-shadow:0 4px 26px rgba(2,18,48,.55)}
.glanzwort{background:linear-gradient(100deg,#CFF4FF 0%,#7FD9F5 45%,#fff 55%,#7FD9F5 70%,#CFF4FF 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text}
.hero p.lead{color:#E2F0FA;font-size:1.12rem;font-weight:500;text-shadow:0 2px 12px rgba(2,18,48,.5)}
.trust{color:#D6EAF7}
.btn-2{border-color:rgba(214,240,252,.7);background:rgba(255,255,255,.08)}
.btn-2:hover{background:rgba(255,255,255,.16)}
.hero .funke{z-index:2}

@media(prefers-reduced-motion:reduce){.strahlen,.hero-blasen span,.hero-bild,.slogan-band span::after{animation:none}}
@media(min-width:900px){.hero{background-position:0 0}}
@media(max-width:600px){.slogan-band span{white-space:nowrap;font-size:clamp(.82rem,4.1vw,1rem);padding:10px 18px}.hero-bild{width:100vw;max-width:none;margin-left:-22px;margin-right:-22px}}
/* Wisch-Fläche als Abschluss: zwei Knöpfe */
.wisch-fertig .cta{margin-top:0}
.btn-3{background:#0B2440;color:#fff;border:1.5px solid rgba(31,155,214,.5)}
.btn-3:hover{background:#12345A}
#glanz{padding-bottom:72px}