/* PypeCloud — Startseite (Richtung A „Plattform“). Gemeinsame Grundlagen stehen in base.css. */
/* Hero */
.hero{position:relative;padding:calc(132px + var(--sicher-oben)) 0 96px;overflow:clip;isolation:isolate}
/* Farbe im Kopf (Armin 7025/7027/7130, 18.10.2026): die Farbwolke füllt den ganzen Kopf, bei jeder Breite, und läuft nach unten weich aus. Farben, Wolken und die Aussparung um den Text
   malt js/start.js (band()). Die Kopfzeile liegt darüber, deckend weiß. */
.hero-v{position:absolute;z-index:-1;top:0;right:0;left:0;height:100%;-webkit-mask-image:linear-gradient(180deg,#000 84%,transparent 100%);mask-image:linear-gradient(180deg,#000 84%,transparent 100%)}
.hero-v canvas{width:100%;height:100%;display:block}
.hero-v::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");opacity:.18;mix-blend-mode:soft-light;pointer-events:none}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:48px;align-items:center}
@keyframes puls{0%{box-shadow:0 0 0 0 rgba(20,168,117,.45)}80%,100%{box-shadow:0 0 0 9px rgba(20,168,117,0)}}
.hero h1{max-width:11.5em}
.hero .lead{margin-top:26px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.hero-fuss{margin-top:22px;font-size:14.5px;color:var(--leise)}

/* schwebende Oberflächen */
.hb{position:relative;width:100%;max-width:620px;aspect-ratio:620/690;margin-left:auto;display:grid;grid-template-columns:100%;align-content:space-between;row-gap:16px}
/* Die drei Karten liegen untereinander im Fluss (Posteingang links oben, Auftrag rechts, Anruf links unten) statt an festen Prozenten: wird eine Karte höher (schmalere
   Spalte, Zeilen brechen um), rutscht der Rest nach, und keine Karte deckt mehr einen Teil der anderen (Armin 6532, bei 1024 px schnitt die Auftragskarte Text ab). */
.kk{position:relative;transform:translate3d(var(--px,0px),var(--py,0px),0);transition:transform .5s var(--ease)}
.kf{animation:schweb var(--d,8s) ease-in-out var(--v,0s) infinite}
/* Verbindungslinie vom Chip „Auftrag“ der ersten Zeile zur Auftragskarte (Armin, 16.10.2026: die Karte wirkte wie ein Teil des Posteingangs).
   Posteingang, Auftrag und Linie schweben im Gleichtakt (gleiche Dauer, gleicher Takt, gleiche Tiefe), die Anruf-Karte bewusst für sich. */
.kk.kk-verb{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.kk-verb .kf{width:100%;height:100%}
.verb,.verb-k{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.verb{filter:drop-shadow(0 1px 3px rgba(11,24,100,.5))}
.vb,.vp{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vs{fill:#fff;stroke:var(--blau-text);stroke-width:1.5}
.kk-post .k-zeilen li:first-child{box-shadow:inset 3px 0 0 var(--blau)}
@keyframes schweb{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.kk-post{width:62%;justify-self:start;z-index:1}
.kk-auf{width:54%;justify-self:end;z-index:3}
.kk-anruf{width:54%;justify-self:start;margin-left:4%;z-index:2}
.karte{background:#fff;border:1px solid rgba(11,27,63,.07);border-radius:16px;box-shadow:var(--schatten);overflow:hidden;font-size:13px;line-height:1.35;animation:rein .9s var(--ease) both;animation-delay:var(--e,0s)}
@keyframes rein{from{opacity:0;transform:translateY(22px) scale(.98)}}
.bsp{position:absolute;right:2%;bottom:-2%;z-index:4;font:500 12px/1 var(--font);color:#44506E;background:rgba(255,255,255,.94);padding:6px 9px;border-radius:999px}
.k-kopf{display:flex;align-items:center;gap:9px;padding:13px 15px;border-bottom:1px solid #EDF1F8}
.k-kopf b{font-weight:600;font-size:13.5px;letter-spacing:-.01em}
.k-kopf .chip{margin-left:auto}
.k-ic{width:26px;height:26px;border-radius:8px;background:#E8EFFF;color:var(--blau-text);display:grid;place-items:center}
.k-ic svg.i{width:15px;height:15px}
.k-zeilen{list-style:none}
.k-zeilen li{padding:11px 15px;display:grid;grid-template-columns:1fr auto;gap:2px 8px;border-bottom:1px solid #F0F3F9;animation:zeile .6s var(--ease) both;animation-delay:calc(.5s + var(--n,0)*.38s)}
.k-zeilen li:last-child{border-bottom:0}
.k-zeilen li>.chip{align-self:center;justify-self:end}
@keyframes zeile{from{opacity:0;transform:translateY(10px)}}
.z-t b{display:block;font-weight:600;font-size:13px}
.z-t small{color:var(--leise);font-size:11.5px}
.z-f{grid-column:1/-1;display:flex;align-items:center;gap:6px;font:500 11px/1.3 var(--mono);color:var(--blau-text);animation:zeile .6s var(--ease) both;animation-delay:calc(.95s + var(--n,0)*.38s)}
.z-f svg.i{width:13px;height:13px;stroke-width:2.2}
.felder{padding:6px 15px 14px}
.feld{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed #E5EAF4;font-size:12.5px}
.feld:last-child{border-bottom:0}
.feld span{color:var(--leise)}
.feld b{font-weight:500;text-align:right}
.k-titel{padding:14px 15px 4px;display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px}
.k-titel b{font:600 13px/1 var(--mono);letter-spacing:-.01em;white-space:nowrap}
.schimmer{position:relative;overflow:hidden}
.schimmer::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.75) 50%,transparent 70%);transform:translateX(-100%);animation:glanz 5.5s 2.8s ease-in-out infinite}
@keyframes glanz{0%{transform:translateX(-100%)}30%,100%{transform:translateX(100%)}}
.anruf{display:flex;align-items:center;gap:13px;padding:14px 15px}
.ring{position:relative;width:38px;height:38px;border-radius:50%;background:var(--blau-text);color:#fff;display:grid;place-items:center;flex:none}
.ring::before,.ring::after{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--blau);animation:ringe 2.4s ease-out infinite}
.ring::after{animation-delay:1.2s}
@keyframes ringe{from{transform:scale(1);opacity:.7}to{transform:scale(1.9);opacity:0}}
.anruf-t{flex:1;min-width:0}.anruf-t b{display:block;font-weight:600;font-size:13px}.anruf-t small{color:var(--leise);font-size:11.5px}
.welle{display:flex;align-items:center;gap:2.5px;height:22px}
.welle i{display:block;width:3px;border-radius:2px;background:var(--blau);height:6px;animation:welle 1.1s ease-in-out infinite}
.welle i:nth-child(2n){animation-delay:.15s}.welle i:nth-child(3n){animation-delay:.32s}.welle i:nth-child(5n){animation-delay:.5s}
@keyframes welle{0%,100%{height:5px}50%{height:20px}}
.anruf-f{padding:0 15px 13px;display:flex;align-items:center;gap:7px;font:500 11.5px/1.3 var(--mono);color:var(--blau-text)}
.anruf-f svg.i{width:13px;height:13px;stroke-width:2.2}

/* Streifen */
.streifen{border-block:1px solid var(--linie);background:#fff;position:relative}
.streifen .wrap{display:flex;align-items:center;gap:28px;height:84px}
.streifen p{font-size:14.5px;color:var(--slate);max-width:15em;line-height:1.35;flex:none}
.lauf-rahmen{overflow:hidden;flex:1;min-width:0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.lauf{display:flex;gap:12px;width:max-content;animation:lauf 46s linear infinite}
.lauf:hover{animation-play-state:paused}
@keyframes lauf{to{transform:translateX(-50%)}}
.lauf span{display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 16px;border:1px solid var(--linie);border-radius:999px;font-size:15px;font-weight:500;color:var(--ink);background:var(--mist);white-space:nowrap}
.lauf span svg.i{width:17px;height:17px;color:var(--blau-text)}

/* Abschnitte */
.sek{--sek-pad:128px;padding:var(--sek-pad) 0}
/* Sprungziel: nicht der Abschnittsrand, sondern die Überschrift (scroll-padding-top in base.css stellt den Abstand zur Kopfzeile ein) */
.sek[id]{scroll-margin-top:calc(var(--sek-pad) * -1)}
.sek-kopf{margin-bottom:56px}
.sek-kopf p.lead{margin-top:18px}

/* Leistungen (Raster mit Oberflächen) */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
.b{position:relative;border:1px solid var(--linie);border-radius:20px;background:#fff;overflow:hidden;display:flex;flex-direction:column;min-height:400px}
.b-text{padding:30px 30px 0;position:relative;z-index:2}
.b-text p{margin-top:10px;color:var(--slate);font-size:16px;max-width:30em}
.b-gross{grid-column:span 7;grid-row:span 2}
.b-klein{grid-column:span 5}
.b::before{content:"";position:absolute;inset:auto 0 0 0;height:60%;background:radial-gradient(120% 90% at 80% 100%,rgba(108,213,255,.34),rgba(138,120,255,.16) 45%,transparent 70%);z-index:0;pointer-events:none}
.b-gross::before{background:radial-gradient(110% 80% at 30% 105%,rgba(62,118,246,.32),rgba(138,120,255,.16) 50%,transparent 72%)}
.b-ui{position:relative;z-index:1;flex:1;margin-top:26px;padding:0 30px;display:flex;align-items:flex-end}
.b-gross .b-ui{align-items:stretch}
.b-gross .app{height:100%}
.app{display:grid;grid-template-columns:58px 1fr;width:100%;background:#fff;border:1px solid rgba(11,27,63,.08);border-bottom:0;border-radius:14px 14px 0 0;box-shadow:var(--schatten);overflow:hidden;font-size:13px;min-height:260px}
.app-seite{background:#F7F9FD;border-right:1px solid #EDF1F8;padding:16px 0;display:flex;flex-direction:column;align-items:center;gap:12px}
.ap-logo{width:26px;height:26px;border-radius:8px;background:var(--blau);margin-bottom:6px}
.ap-ic{width:26px;height:26px;border-radius:8px;background:#E9EEF8}
.ap-ic.an{background:#DCE7FF;box-shadow:inset 0 0 0 1.5px #9DB9FA}
.app-haupt{padding:16px 18px}
.app-kopf{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.app-kopf b{font-weight:600;font-size:14.5px}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.kpis div{display:flex;flex-direction:column;border:1px solid #EDF1F8;border-radius:10px;padding:9px 11px}   /* Beschriftung oben, Zahl unten bündig: die Zahlen stehen auf einer Linie, auch wenn die Beschriftungen verschieden oft umbrechen (Armin 21.10.2026: „bitte unten ausrichten nicht versetzt“); die Zeilen des Rasters sind gleich hoch */
.chart{border:1px solid #EDF1F8;border-radius:10px;padding:12px 14px 14px;margin-bottom:12px}
.chart-k{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px}.chart-k b{font-weight:600}.chart-k span{color:var(--leise);font-size:11.5px}
.balken{display:flex;align-items:flex-end;gap:7px;height:92px;margin-top:12px}
.balken i{flex:1;height:var(--h);border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,#8FB0FA,#3E76F6);transform-origin:bottom}
.balken i:nth-child(n+10){background:linear-gradient(180deg,#A99BFF,#5B6CF0)}
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){.rv.da .balken i{animation:wachs .9s var(--ease) both;animation-delay:calc(.3s + var(--k,0)*55ms)}}
@keyframes wachs{from{transform:scaleY(.04);opacity:.3}}
.kpis small{display:block;font-size:11px;color:var(--leise)}
.kpis b{align-self:flex-start;margin-top:auto;font:500 22px/1.2 var(--font);letter-spacing:-.02em}   /* flex-start: der Kasten bleibt so breit wie die Zahl (das Ticken skaliert um seine Mitte, bewegung.css) */
.tab-z{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:9px 2px;border-top:1px solid #EDF1F8;font-size:12.5px}
.tab-z div>span{color:var(--leise);display:block;font-size:11.5px}
.tab-z b{font-weight:500}
.pipe{width:100%;padding-bottom:0;display:flex;align-items:flex-end}
.pipe svg{width:100%;height:auto}
.site{width:100%;background:#fff;border:1px solid rgba(11,27,63,.08);border-bottom:0;border-radius:14px 14px 0 0;box-shadow:var(--schatten);overflow:hidden}
.site-bar{display:flex;align-items:center;gap:6px;padding:10px 12px;border-bottom:1px solid #EDF1F8;background:#F7F9FD}
.site-bar i{width:8px;height:8px;border-radius:50%;background:#D6DDEC}
.site-bar span{margin-left:8px;flex:1;background:#fff;border:1px solid #E7ECF6;border-radius:6px;font:500 11px/1 var(--mono);color:var(--leise);padding:6px 9px}
.site-in{padding:18px 18px 0;display:grid;grid-template-columns:1.1fr .9fr;gap:14px;align-items:start}
.site-in .s-h{height:12px;border-radius:6px;background:var(--ink);width:78%;margin-bottom:8px}
.site-in .s-h2{height:12px;border-radius:6px;background:var(--ink);width:52%;margin-bottom:14px}
.site-in .s-p{height:7px;border-radius:4px;background:#E3E9F5;margin-bottom:6px}
.site-in .s-b{display:inline-flex;margin-top:8px;font-size:11.5px;font-weight:500;background:var(--blau-text);color:#fff;border-radius:7px;padding:7px 11px}
.site-in .s-bild{height:92px;border-radius:12px;background:linear-gradient(135deg,#DCE7FF,#EEEAFF 60%,#FFE3EF)}
.site-neu{margin:12px 18px 0;display:flex;align-items:center;gap:9px;padding:10px 12px;border:1px solid #E1E8F8;border-bottom:0;border-radius:12px 12px 0 0;background:#fff;font-size:12px;box-shadow:0 -8px 20px -14px rgba(31,63,184,.5)}
.site-neu b{font-weight:600}.site-neu small{color:var(--leise);display:block;font-size:11px}

/* dunkle Fläche: Fluss */
.fluss-sek{background:linear-gradient(180deg,#F0F5FF 0%,#FFFFFF 100%);position:relative;overflow:clip;isolation:isolate;border-block:1px solid var(--linie)}
.fluss-sek::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(62,118,246,.22) 1.2px,transparent 1.5px);background-size:28px 28px;-webkit-mask-image:radial-gradient(70% 80% at 50% 56%,#000,transparent);mask-image:radial-gradient(70% 80% at 50% 56%,#000,transparent)}
.fluss{margin-top:64px}
.fluss svg{width:100%;height:auto;overflow:visible}
.fluss .f-m{display:none}
.fluss-fuss{margin-top:26px;color:var(--slate);font-size:15px;text-align:center;text-wrap:balance}   /* das Symbol steht direkt vor dem ersten Wort, auch wenn der Satz umbricht (Armin 6594) */
.fluss-fuss svg.i{display:inline-block;width:18px;height:18px;color:var(--blau-text);vertical-align:-3px;margin-right:8px}

/* Einstieg */
.einstieg{background:var(--mist);position:relative;overflow:clip;isolation:isolate}
.einstieg::before{content:"";position:absolute;z-index:-1;left:-10%;right:-10%;top:38%;height:46%;transform:skewY(-6deg);background:linear-gradient(100deg,#CFE0FF 0%,#B9D3FF 28%,#C9C4FF 55%,#FFD0E3 85%,#FFE1CC 100%);opacity:.55;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.paar{display:grid;grid-template-columns:1.25fr 1fr;gap:20px;align-items:stretch}
.tarif{border-radius:20px;padding:34px;display:flex;flex-direction:column;position:relative}
.tarif-h{background:#fff;border:1px solid var(--linie);box-shadow:var(--schatten)}
.tarif-d{background:linear-gradient(150deg,#2F62E6 0%,#4258E2 52%,#5A4FDB 100%);color:#fff;box-shadow:var(--schatten)}
.tarif h3{font-size:26px}
.preis{display:flex;align-items:baseline;gap:14px;margin:18px 0 4px}
.preis b{font-size:clamp(46px,5vw,68px);font-weight:500;letter-spacing:-.045em;line-height:1}
.preis span{color:var(--slate);font-size:16px}
.prueff{list-style:none;margin:26px 0 30px;display:grid;gap:10px}
.prueff li{display:flex;align-items:center;gap:13px;border:1px solid var(--linie);border-left:3px solid var(--blau);border-radius:10px;padding:13px 16px;font-size:16px;font-weight:500;background:#FCFDFF;letter-spacing:-.005em}
.prueff svg.i{color:var(--blau-text);width:18px;height:18px;stroke-width:2.2}
.tarif .knopf{align-self:flex-start;margin-top:auto}
.tarif-d p{color:#fff;font-size:16px;margin-top:12px}
.tarif-d .zahl{font-size:clamp(46px,6.4vw,92px);font-weight:500;letter-spacing:-.045em;line-height:1;margin-top:auto;padding-top:22px}   /* große Zahl in der Mitte der Karte, seit sie nur noch anreißt (Armin 6599); padding hält am Handy den Abstand */
.tarif-d small{margin-top:auto;padding-top:22px;color:#fff;font-size:14px;display:block}   /* nur anreißen, Einzelheiten in der Analyse (Armin 6599) */
.nachsatz{margin-top:22px;font-size:15.5px;color:#3B4768;display:flex;gap:8px;align-items:flex-start}   /* Pfeil an der ersten Zeile, nicht mitten neben dem Absatz (Armin 6594) */
.nachsatz svg.i{color:var(--blau-text);width:18px;height:18px;margin-top:3px}

/* Beispiele */
.notiz{margin-top:22px;font-size:14px;color:var(--leise)}
/* Jede Branche ist eine eigene Karte (Armin 6538: „Es fehlt mir die klare Trennung, wo welches Beispiel beginnt und endet“): Rahmen, gleicher
   Innenabstand, Abstand zur nächsten Karte, der aufgeklappte Inhalt liegt sichtbar INNERHALB seiner Karte, die geöffnete hebt sich ab. */
.faelle{display:grid;gap:14px}
.fall{border:1px solid var(--linie);border-radius:20px;background:#fff;box-shadow:0 1px 2px rgba(11,27,63,.04);transition:border-color .35s,box-shadow .5s var(--ease)}
.fall.offen{border-color:#C6D5F5;box-shadow:0 1px 1px rgba(11,27,63,.04),0 16px 34px -16px rgba(31,63,184,.32)}
.fall-kopf{width:100%;display:grid;grid-template-columns:44px 1fr auto;gap:18px;align-items:center;padding:22px 24px;text-align:left;border-radius:20px}
.fall-kopf:focus-visible{outline-offset:-3px;border-radius:20px}
.fall-ic{width:44px;height:44px;border-radius:12px;border:1px solid var(--linie);display:grid;place-items:center;color:var(--blau-text);background:#fff}
.fall-h{font-size:inherit;letter-spacing:inherit;line-height:inherit}
.fall-titel{display:block;font-size:clamp(18px,2vw,26px);font-weight:500;letter-spacing:-.02em;line-height:1.2}
.fall-branche{display:block;margin-bottom:5px;font-size:13.5px;font-weight:600;letter-spacing:0;line-height:1.3;color:var(--blau-text)}
.plus{width:36px;height:36px;border-radius:10px;background:#E8EFFF;color:var(--blau-text);display:grid;place-items:center;transition:background .2s}
.plus svg{transition:transform .4s var(--ease)}
.plus svg.i{width:16px;height:16px;stroke-width:2.2}
.fall-kopf:hover .plus{background:#D9E5FF}
.fall.offen .plus svg{transform:rotate(45deg)}
.fall-koerper{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.fall.offen .fall-koerper{grid-template-rows:1fr}
.fall-innen{overflow:hidden;min-height:0}
.fall-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin:0 24px;padding:24px 0 28px 62px;border-top:1px solid #EDF1F8;align-items:center}
.fall-grid p{color:var(--slate);max-width:30em}
.vn{display:grid;gap:10px}
.vn-z{display:grid;grid-template-columns:72px 1fr;gap:0 12px;align-items:start;padding:14px 16px;border:1px solid var(--linie);border-radius:14px;background:#fff;color:var(--slate);font-size:16px;line-height:1.45}
.vn-z dt{margin-top:1px;justify-self:start}
.vn-nach{background:#F5F9FF;border-color:#D5E2FB;color:var(--ink)}
.fall-grid .vn-rechnung{margin-top:10px;font-size:14px;color:var(--leise);max-width:none}
.fall-grid ul{list-style:none;margin-top:18px;display:grid;gap:10px}
.fall-grid li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px}
.fall-grid li svg.i{color:var(--blau-text);margin-top:3px;width:17px;height:17px;stroke-width:2.2}
.vorschau{border-radius:16px;padding:26px 26px 46px;background:linear-gradient(135deg,#DCE7FF 0%,#E7E3FF 52%,#FFE5EF 100%);position:relative}
.vorschau .karte{animation:none;font-size:13px}
.vorschau .k-kopf{flex-wrap:wrap;row-gap:6px}   /* schmale Karten (320 px): das Kennzeichen-Chip rutscht unter den Titel, statt die Spalte zu weiten */
.vorschau .bsp{right:14px;bottom:9px}
.v-liste{list-style:none}
.v-liste li{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;padding:11px 15px;border-bottom:1px solid #F0F3F9}
.v-liste li:last-child{border-bottom:0}
.v-liste b{font-weight:600;font-size:13px;display:block}
.v-liste small{color:var(--leise);font-size:11.5px}
.mail-faden{padding:14px 15px;border-bottom:1px solid #F0F3F9}
.mail-faden b{font-weight:600;font-size:13px}.mail-faden p{color:var(--slate);font-size:12.5px;margin-top:4px;max-width:none}
.aufgabe{display:flex;gap:10px;align-items:center;padding:12px 15px;background:#F7FAFF;font-size:12.5px}
.aufgabe i{width:18px;height:18px;border-radius:6px;border:1.5px solid #9DB9FA;display:grid;place-items:center;color:var(--blau-text);flex:none}
.aufgabe i svg.i{width:12px;height:12px;stroke-width:3}
.aufgabe span{color:var(--leise);margin-left:auto;font:500 11px/1 var(--mono);white-space:nowrap}
.aufgabe + .aufgabe{border-top:1px solid #E9EFFB}
.weitere{margin-top:28px;display:flex;align-items:center;justify-content:space-between;gap:18px 32px;padding:22px 26px;border:1px solid var(--linie);border-radius:18px;background:var(--mist)}
.weitere p{max-width:42em;color:var(--slate);font-size:16.5px}
.weitere p b{color:var(--ink);font-weight:600}
.weitere p b .hl{color:var(--blau-text)}   /* Armin 6590 */

/* Ablauf */
.schritte{--ab:28px;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--ab);position:relative;padding-top:8px}
.schritt{position:relative}
/* Verbindung von Punkt zu Punkt: je Schritt eine Strecke bis zum nächsten Punkt (::before Spur, ::after Füllung). Der letzte Schritt hat keine,
   so steht nach Punkt 4 keine Linie über (Armin, 15.10.2026: „Der Strich nach der 4 muss weg“). Die Prüfung pruefen.py (Schlüssel „ablauf“) misst es am Bildschirmfoto. */
.schritt:not(:last-child)::before,.schritt:not(:last-child)::after{content:"";position:absolute;left:38px;right:calc(var(--ab) * -1);top:18px;height:2px;border-radius:2px;background:var(--linie)}
.schritt:not(:last-child)::after{background:linear-gradient(90deg,var(--blau),var(--violett));background-size:300% 100%;transform-origin:left;transform:scaleX(0);transition:transform .42s linear}
.schritt:nth-child(2)::after{background-position:50% 0}
.schritt:nth-child(3)::after{background-position:100% 0}
.schritt.an:not(:last-child)::after{transform:scaleX(1)}
.nr{width:38px;height:38px;border-radius:50%;background:#fff;border:1.5px solid var(--linie);display:grid;place-items:center;font:500 15px/1 var(--mono);color:var(--leise);position:relative;z-index:1;transition:background .4s,color .4s,border-color .4s,box-shadow .4s}
.schritt.an .nr{background:var(--blau-text);border-color:var(--blau-text);color:#fff;box-shadow:0 8px 18px -6px rgba(45,95,227,.7)}
.schritt h3{margin:20px 0 8px}
.schritt p{color:var(--slate);font-size:16px}
.schritt .chip{margin-top:16px}

/* Warum */
.warum{background:#fff}
.drei{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.ik{width:44px;height:44px;border:1px solid var(--linie);border-radius:12px;display:grid;place-items:center;color:var(--blau-text);margin-bottom:22px;background:linear-gradient(180deg,#fff,#F5F8FE)}
.drei p{color:var(--slate);font-size:16.5px}
.drei p b{color:var(--ink);font-weight:600}
.zahlen{margin-top:80px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--linie)}   /* genau drei Kacheln (Armin 7197): am Rechner nebeneinander, am Handy untereinander */
.zahlen div{padding:34px 28px 0 0}
.zahlen div+div{padding-left:28px;border-left:1px solid var(--linie)}
.zahlen b{display:block;font-size:clamp(38px,4.4vw,60px);font-weight:500;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.zahlen b small{font-size:.5em;letter-spacing:-.02em;margin-left:.12em;color:var(--slate)}
.zahlen b em{font-style:normal}
.zahlen div>span{display:block;margin-top:10px;color:var(--slate);font-size:15px}

/* Kontakt */
.kontakt{padding:0 0 120px}
.k-karte{position:relative;overflow:hidden;border-radius:28px;color:#fff;padding:72px 64px;isolation:isolate;background:#1F3FB8}
.k-karte canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-2}
.k-karte::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(11,24,100,.58) 0%,rgba(11,24,100,0) 40%),linear-gradient(100deg,rgba(11,24,100,.78) 0%,rgba(11,24,100,.52) 42%,rgba(11,24,100,.08) 78%,rgba(11,24,100,0) 100%)}
.k-karte h2{max-width:14em;color:#fff}
.k-karte p.lead{color:rgba(255,255,255,.88);margin-top:20px}
.k-aktion{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.k-daten{margin:44px -64px -72px;padding:28px 64px 40px;display:flex;flex-wrap:wrap;gap:18px 52px;font-size:15.5px;background:rgba(11,24,100,.6);border-top:1px solid rgba(255,255,255,.2)}
.k-daten small{display:block;color:rgba(255,255,255,.9);font-size:13px;margin-bottom:3px}
.k-daten a{font-weight:500;overflow-wrap:anywhere}
.k-daten a:hover{text-decoration:underline;text-underline-offset:3px}

/* Auftritt beim Scrollen (nur mit Skript und ohne „weniger Bewegung“) */
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  .rv{opacity:0;transform:translateY(16px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0)*90ms)}
  .rv.da{opacity:1;transform:none}
}

/* Ergänzungen der echten Seite */
.b-ui-spalte{flex-direction:column;justify-content:flex-end;align-items:stretch}
.ablauf-sek{background:var(--mist)}
.chip-rechts{margin-left:auto}
.tarif-h .tarif-text{color:var(--slate);font-size:16px}
.drei h3{margin-bottom:10px}

@media (max-width:1060px){
  .bento{grid-template-columns:1fr}.b-gross,.b-klein{grid-column:auto;grid-row:auto}
  .paar{grid-template-columns:1fr}
  .fall-grid{grid-template-columns:1fr;gap:26px;padding-left:0}
  .vorschau{max-width:640px}
  .drei{grid-template-columns:1fr;gap:34px}
}

@media (max-width:980px){
  .hero{padding:calc(104px + var(--sicher-oben)) 0 64px}
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .hb{max-width:480px;margin:0 auto;aspect-ratio:auto;height:auto;display:grid;gap:14px;align-content:start;padding:6px 0 12px}
  .kk{position:relative;inset:auto;width:auto !important;transform:none;justify-self:stretch}
  /* Handy: drei getrennte Karten mit Abstand und Versatz statt überlappend; rechts neben dem Posteingang bleibt die Gasse für die Linie */
  .kk-post{width:calc(100% - 40px) !important}
  .kk-auf{margin:20px 0 0 40px;z-index:3}
  .kk-anruf{margin:18px 40px 0 0}
  .kk.kk-verb{position:absolute;inset:0;width:100% !important;height:100%}
  .kf{animation-duration:9s}
}
@media (max-width:720px){
  .sek{--sek-pad:84px}.sek-kopf{margin-bottom:38px}
  .streifen .wrap{height:auto;padding-block:16px;flex-direction:column;align-items:flex-start;gap:12px}
  .streifen p{max-width:none}.lauf-rahmen{width:100%;flex:none}
  .b{min-height:0}.b-text{padding:24px 22px 0}.b-ui{padding:0 20px;margin-top:22px}
  .app{grid-template-columns:44px 1fr;min-height:0}.app-haupt{padding:13px 12px}.kpis{gap:7px}.kpis b{font-size:19px}
  .tarif{padding:26px 22px}
  .zahlen{grid-template-columns:1fr}
  .zahlen b{font-size:clamp(34px,10.5vw,44px)}
  .zahlen div,.zahlen div+div{padding:26px 0 0;border-left:0}
  .zahlen div+div{border-top:1px solid var(--linie);margin-top:26px}
  .fluss .f-d{display:none}.fluss .f-m{display:block}
  .fall{border-radius:18px}
  .fall-kopf{grid-template-columns:40px 1fr 34px;gap:12px;padding:16px 16px;border-radius:18px}
  .fall-kopf:focus-visible{border-radius:18px}
  .fall-ic{width:40px;height:40px}
  .fall-grid{margin:0 16px;padding:20px 0 22px}
  .vorschau{padding:16px 16px 42px}
  .vn-z{grid-template-columns:1fr;gap:6px;padding:13px 14px}
  .weitere{flex-direction:column;align-items:flex-start;padding:20px}
  .schritte{--ab:30px;grid-template-columns:1fr;padding-left:0}
  .schritt:not(:last-child)::before,.schritt:not(:last-child)::after{left:18px;right:auto;top:38px;bottom:calc(var(--ab) * -1);width:2px;height:auto}
  .schritt:not(:last-child)::after{background:linear-gradient(180deg,var(--blau),var(--violett));background-size:100% 300%;transform-origin:top;transform:scaleY(0)}
  .schritt:nth-child(2)::after{background-position:0 50%}
  .schritt:nth-child(3)::after{background-position:0 100%}
  .schritt.an:not(:last-child)::after{transform:scaleY(1)}
  .schritt{display:grid;grid-template-columns:38px 1fr;column-gap:18px}
  .schritt .nr{grid-row:1/4}.schritt h3{margin:3px 0 6px}.schritt .chip{justify-self:start;margin-top:12px}
  .k-karte{padding:44px 24px;border-radius:22px}.k-daten{flex-direction:column;gap:18px;margin:36px -24px -44px;padding:26px 24px 34px}
  .k-karte::before{background:linear-gradient(180deg,rgba(11,24,100,.62) 0%,rgba(11,24,100,.66) 55%,rgba(11,24,100,.74) 100%)}
  .kontakt{padding-bottom:80px}
}
@media (max-width:420px){
  .hero-cta .knopf{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .streifen .wrap{height:auto;padding-block:20px}
  .lauf-rahmen{-webkit-mask-image:none;mask-image:none}
  .lauf{flex-wrap:wrap;width:auto;justify-content:flex-start}
}