/* ==============================================================
   seite-version-e — finale Fassung (10.09.2026)
   Kürzere Headlines, mehr Bild, Icon-Listen, Beleg-Optik.
   Vorbilder: Baulig (Icon-Listen + Foto-BG), manuav (Beleg/Rechenweg),
   Candidate Flow (Meldungs-Wolke im Hero).
   ============================================================== */

/* ---------- Sektionskopf: Kicker + kurze H2 + Lede ---------- */
.hd{position:relative;margin-bottom:64px}
.hd .lbl{display:block;margin-bottom:18px}
.hd .h2{max-width:13em}
.hd .lede{max-width:600px;margin-top:20px}
.hd--mitte{text-align:center}
.hd--mitte .h2{margin:0 auto;max-width:16em}
.hd--mitte .lede{margin:20px auto 0;text-wrap:balance}
.hd--split{display:grid;grid-template-columns:6fr 5fr;gap:64px;align-items:end}
.hd--split .lede{margin-top:0;padding-bottom:6px}
@media(max-width:900px){.hd{margin-bottom:44px}.hd--split{grid-template-columns:1fr;gap:20px}}

/* ---------- Icon-Liste (Baulig-Muster, aber WebMount-Kanten) ---------- */
.il{list-style:none;margin:0;padding:0;display:grid;gap:0}
.il--2{grid-template-columns:1fr 1fr;column-gap:48px}
.il li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;align-items:start;
  padding:15px 0;border-bottom:1px solid var(--line)}
.il li > svg{width:34px;height:34px;flex:none;margin-top:-2px}
.il b{display:block;font-size:16px;font-weight:500;line-height:1.35;letter-spacing:-.01em;color:var(--ink)}
.il span{display:block;margin-top:5px;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.on-dark .il li{border-color:var(--wline-soft)}
.on-dark .il b{color:#fff}
.on-dark .il span{color:rgba(255,255,255,.68)}
@media(max-width:820px){.il--2{grid-template-columns:1fr;column-gap:0}}

/* ---------- Beleg (Gegenrechnung, manuav-Idee) ---------- */
.bl{position:relative;background:#fff;border-radius:2px;padding:34px 34px 40px;
  box-shadow:0 1px 2px rgba(10,23,48,.06),0 28px 50px -26px rgba(11,27,43,.28)}
.bl::after{content:"";position:absolute;left:0;right:0;bottom:-11px;height:12px;
  background:linear-gradient(-45deg,transparent 50%,#fff 51%) 0 0/12px 12px repeat-x,
             linear-gradient(45deg,transparent 50%,#fff 51%) 0 0/12px 12px repeat-x}
.bl__k{font:600 11px/1 'Inter Tight',system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
  display:flex;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid var(--line)}
.bl__r{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:13px 0;border-bottom:1px solid var(--line-soft);font-size:15px;color:var(--ink-2)}
.bl__r b{font-weight:500;color:var(--ink);text-align:right}
.bl__r--sum{border-bottom:0;padding-top:16px;margin-top:4px;border-top:1px solid var(--ink);font-size:16px;color:var(--ink)}
.bl__r--sum b{font-size:19px;font-weight:500}
.bl__note{margin:16px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink-3)}
.bl .g-ph,.bl .ph{display:inline-block;height:.8em;min-width:4.2ch;background:rgba(10,23,48,.13);border-radius:1px;vertical-align:-.08em}

/* ---------- Fragen: kompakt, zweispaltig, offen sichtbar ---------- */
.fq{border-top:1px solid var(--line)}
.fq__i{display:grid;grid-template-columns:5fr 7fr;gap:56px;padding:34px 0 36px;border-bottom:1px solid var(--line)}
.fq__q{margin:0;font-size:clamp(19px,1.7vw,23px);line-height:1.3;font-weight:500;letter-spacing:-.015em;color:var(--ink);text-wrap:balance}
.fq__a{margin:0;font-size:16px;line-height:1.65;color:var(--ink-2)}
.fq__a + .fq__a{margin-top:12px}
.fq__hi{margin-top:16px;padding:16px 20px;background:var(--bg-alt);border-left:2px solid var(--blue);font-size:15.5px;line-height:1.6;color:var(--ink)}
.fq__gfx{grid-column:1/-1;margin-top:24px}
.fq__gfx .wg{max-width:1080px}
@media(max-width:900px){.fq__i{grid-template-columns:1fr;gap:14px;padding:28px 0 30px}}

/* ---------- Foto-Band mit Overlay ---------- */
.pb{position:relative;overflow:hidden;background:var(--navy)}
.pb__bg{position:absolute;inset:0;background-size:cover;background-position:center 40%;opacity:.42}
.pb::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(7,26,62,.96) 0%,rgba(7,26,62,.9) 38%,rgba(7,26,62,.55) 62%,rgba(7,26,62,.35) 100%)}
.pb .container{position:relative;z-index:2}

/* ---------- Zahlenzeile ---------- */
.kn{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.kn div{padding:26px 28px 28px;border-right:1px solid var(--line-soft)}
.kn div:last-child{border-right:0}
.kn b{display:block;font-size:clamp(28px,2.6vw,36px);font-weight:300;letter-spacing:-.03em;color:var(--ink);line-height:1}
.kn span{display:block;margin-top:8px;font-size:14px;line-height:1.45;color:var(--ink-2)}
@media(max-width:760px){.kn{grid-template-columns:1fr}.kn div{border-right:0;border-bottom:1px solid var(--line-soft)}}

/* ---------- Feinschliff bestehender Teile ---------- */
.sx__head .h2,.hd .h2{text-wrap:balance}
.rc__satz{max-width:820px}
/* Gegenrechnung: Kette, Legende, Beleg + Text */
.rc__beleg{display:grid;grid-template-columns:6fr 5fr;gap:64px;align-items:start;margin-top:64px;max-width:1180px;margin-left:auto;margin-right:auto}
.rc__side .rc__satz{margin:0;text-align:left;font-size:17px;line-height:1.62;color:var(--ink)}
.rc__side .rc__note{margin:16px 0 0;text-align:left;max-width:none}
.rc__side .rc__cta{margin-top:28px;text-align:left}
@media(max-width:900px){.rc__beleg{grid-template-columns:1fr;gap:40px;margin-top:44px}}
.gt__kick i{font-style:normal;font-weight:400;color:var(--ink-3);letter-spacing:.08em;margin-right:10px}
/* Zwischenband */
.pb__in{max-width:920px}
.pb__satz{margin:22px 0 0;font-size:clamp(30px,3.4vw,46px);line-height:1.14;font-weight:300;letter-spacing:-.025em;color:#fff}
.pb__satz strong{font-weight:500;color:#fff}
.pb__sub{margin:22px 0 0;max-width:620px;font-size:17px;line-height:1.6;color:rgba(255,255,255,.72)}

/* ---------- Pain-Karten-Grafiken (#lage) — flach, roh, ohne Geräte ---------- */
.pg{display:flex;align-items:center;justify-content:center;padding:14px 4px}
/* 01 · Vier Angebote, das billigste gewinnt */
.pg1{display:flex;gap:12px;align-items:flex-end;width:100%;justify-content:center}
.pg1__b{display:flex;flex-direction:column;gap:6px;width:50px;padding:12px 9px 11px;background:#fff;
  border:1px solid var(--line);border-radius:1px}
.pg1__b i{display:block;height:4px;background:rgba(10,23,48,.16)}
.pg1__b i:nth-child(2){width:70%}
.pg1__b b{display:block;height:12px;margin-top:7px;background:rgba(10,23,48,.24)}
.pg1__b--win{border-color:var(--blue);box-shadow:0 0 0 2px rgba(24,91,237,.14)}
.pg1__b--win b{background:var(--blue);height:7px}
.pg1__b--win{padding-bottom:18px}
/* 02 · Sechs Plätze, einer besetzt */
.pg2{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 18px;width:100%;max-width:216px}
.pg2__p{position:relative;height:44px;border:1px dashed rgba(10,23,48,.24);border-radius:1px}
.pg2__p::before{content:"";position:absolute;left:50%;top:9px;width:14px;height:14px;margin-left:-7px;border-radius:50%;border:1px dashed rgba(10,23,48,.24)}
.pg2__p::after{content:"";position:absolute;left:50%;bottom:8px;width:26px;height:14px;margin-left:-13px;border:1px dashed rgba(10,23,48,.24);border-bottom:0;border-radius:8px 8px 0 0}
.pg2__p--on{border:1px solid var(--blue);background:rgba(24,91,237,.06)}
.pg2__p--on::before{border:0;background:var(--blue)}
.pg2__p--on::after{border-color:var(--blue);border-style:solid;border-bottom:0}
/* 03 · Woche mit Terminen, die nichts bringen */
.pg3{display:flex;gap:9px;width:100%;justify-content:center;align-items:flex-start}
.pg3__d{display:flex;flex-direction:column;gap:7px;width:36px}
.pg3__d i{display:block;height:28px;background:rgba(10,23,48,.12);border-radius:1px}
.pg3__d i.x{position:relative;background:rgba(24,91,237,.14)}
.pg3__d i.x::before,.pg3__d i.x::after{content:"";position:absolute;left:5px;right:5px;top:50%;height:1.4px;background:var(--blue);opacity:.6}
.pg3__d i.x::before{transform:rotate(28deg)}
.pg3__d i.x::after{transform:rotate(-28deg)}
/* 04 · Auftragslage, nicht planbar */
.pg4{width:100%;height:118px}
.pg4__ax{stroke:rgba(10,23,48,.16);stroke-width:1}
.pg4__l{fill:none;stroke:rgba(10,23,48,.5);stroke-width:2.2;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.pg4__p{fill:var(--blue)}
.pg4{height:132px}
.pm-graphic.pg{border:0;background:transparent;border-radius:0}
.hd--mitte .g{display:block}
.hd--mitte .h2{max-width:18em}

/* ---------- Für wen / nicht für wen: zwei Karten ---------- */
.wh{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:72px auto 0;max-width:1080px}
.wh__c{background:#fff;border:1px solid var(--line);border-radius:2px;padding:32px 32px 26px}
.wh__c--ja{border-color:rgba(24,91,237,.34);box-shadow:0 26px 44px -30px rgba(11,27,43,.24)}
.wh__k{display:block;font:600 11px/1 'Inter Tight',system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--blue);margin-bottom:22px}
.wh__c--nein .wh__k{color:var(--ink-3)}
.wh ul{list-style:none;margin:0;padding:0}
.wh li{display:grid;grid-template-columns:26px 1fr;gap:14px;padding:14px 0;border-top:1px solid var(--line-soft)}
.wh li:first-child{border-top:0;padding-top:0}
.wh__i{width:26px;height:26px;border-radius:2px;display:flex;align-items:center;justify-content:center;
  background:rgba(24,91,237,.1);color:var(--blue)}
.wh__c--nein .wh__i{background:rgba(10,23,48,.06);color:var(--ink-3)}
.wh__i svg{width:16px;height:16px}
.wh b{grid-column:2;display:block;font-size:16px;font-weight:500;line-height:1.3;color:var(--ink)}
.wh span{grid-column:2;display:block;margin-top:4px;font-size:14px;line-height:1.5;color:var(--ink-2)}
@media(max-width:820px){.wh{grid-template-columns:1fr;gap:18px;margin-top:48px}.wh__c{padding:26px 24px 22px}}

/* ---------- Bausteine als Karten ---------- */
.bs{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.bs__c{position:relative;background:#fff;border:1px solid var(--line);border-radius:2px;padding:26px 24px 26px}
.sx--alt .bs__c{background:#fff}
.bs__n{display:block;font:600 11px/1 'Inter Tight',system-ui,sans-serif;letter-spacing:.16em;color:var(--blue);margin-bottom:14px}
.bs__c b{display:block;font-size:17px;font-weight:500;line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
.bs__c p{margin:9px 0 0;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
@media(max-width:1040px){.bs{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.bs{grid-template-columns:1fr}}

/* ---------- Fragen als Akkordeon ---------- */
.ak{max-width:960px;border-top:1px solid var(--line)}
.ak__i{border-bottom:1px solid var(--line)}
.ak__i summary{list-style:none;display:flex;align-items:center;gap:24px;padding:24px 0;cursor:pointer}
.ak__i summary::-webkit-details-marker{display:none}
.ak__q{flex:1;font-size:clamp(17px,1.5vw,20px);font-weight:500;line-height:1.35;letter-spacing:-.01em;color:var(--ink)}
.ak .fx{flex:none;width:30px;height:30px;border:1px solid var(--line);border-radius:2px;display:flex;align-items:center;justify-content:center;color:var(--ink-3);transition:border-color .3s,color .3s}
.ak__i[open] .fx{border-color:var(--blue);color:var(--blue)}
.ak__i[open] .fx .v{opacity:0}
.ak .fx .v{transition:opacity .25s var(--ease)}
.ak__i summary:hover .fx{border-color:var(--ink-3);color:var(--ink)}
.ak__a{padding:0 60px 28px 0;max-width:760px}
.ak__a .fq__a{margin:0;font-size:16px;line-height:1.65;color:var(--ink-2)}
.ak__a .fq__a + .fq__a{margin-top:12px}
.ak__a .fq__hi{margin-top:16px;padding:16px 20px;background:var(--bg-alt);border-left:2px solid var(--blue);font-size:15.5px;line-height:1.6;color:var(--ink)}
.ak__a .fq__gfx{margin-top:24px;max-width:none;padding-right:0}
.ak__a .fq__gfx .wg{max-width:1080px}
@media(max-width:820px){.ak__a{padding-right:0}.ak__i summary{gap:14px}}
/* Infografik volle Breite */
.ig{margin:0 auto;max-width:1264px}
.ig .wg{width:100%}
.sx .sx__scene{max-width:640px;margin:36px auto 0}
/* Zettel: Rechenzeilen + Druckanimation */
.bl__r span i{font-style:normal;color:var(--blue);margin-right:6px;font-weight:500}
.bl__r--op{color:var(--ink-3);font-size:14px;padding:9px 0}
.bl__r--op b{color:var(--ink-2);font-weight:400}
.bl__r--sub{padding:10px 0;background:linear-gradient(90deg,transparent,rgba(24,91,237,.05) 40%,transparent)}
.bl__r--sub b{color:var(--ink)}
.bl--anim .bl__r,.bl--anim .bl__note{opacity:0;transform:translateY(6px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.bl--anim.in .bl__r,.bl--anim.in .bl__note{opacity:1;transform:none}
.no-anim .bl--anim .bl__r,.no-anim .bl--anim .bl__note{opacity:1;transform:none}
.rc__beleg{grid-template-columns:7fr 5fr}
/* FAQ im Originaldesign: Antwortabsätze */
.faq .a .fa{margin:0 0 10px}
.faq .a .fa:last-child{margin-bottom:0}
.faq .a .fa--hi{margin-top:14px;padding:14px 18px;background:var(--bg-alt);border-left:2px solid var(--blue);color:var(--ink)}
.faq .a .fq__gfx{margin-top:22px}
.faq .a .fq__gfx .wg{max-width:900px}
/* Headlines kleiner, dafür fetter (Melvin, 10.09.) — gilt für diese Fassung */
.h2{font-size:clamp(26px,2.9vw,40px);font-weight:600;letter-spacing:-.022em;line-height:1.15}
.h2 strong{font-weight:600;color:var(--blue)}
.fd .h2 strong,.pb .h2 strong{color:#7FA5F5}
.hd .h2,.sx__head .h2{max-width:20em}
.hd--mitte .h2{max-width:22em}
/* Nutzenkarten unter der Übersicht */
@media(max-width:900px){.bn{grid-template-columns:1fr;gap:16px;margin-top:40px}}
/* Problem → Lösung */
.pl{margin-top:48px}
.pl__h{display:grid;grid-template-columns:1fr 56px 1fr;gap:0;margin-bottom:18px}
.pl__h .lbl{margin:0}
.lbl--p{color:var(--ink-3)}
.pl__r{display:grid;grid-template-columns:1fr 56px 1fr;align-items:stretch;margin-bottom:22px}
.pl__c{position:relative;min-height:236px;border-radius:2px;overflow:hidden;padding:30px 32px;display:flex;gap:20px;align-items:flex-start;
  background:var(--img) center 35%/cover no-repeat;color:#fff}
.pl__c::before{content:"";position:absolute;inset:0;pointer-events:none}
.pl__c > *{position:relative;z-index:1}
.pl__c--p{border-left:3px solid var(--ink)}
.pl__c--p::before{background:linear-gradient(90deg,rgba(7,14,28,.9) 0%,rgba(7,14,28,.72) 60%,rgba(7,14,28,.5) 100%)}
.pl__c--l{border-left:3px solid var(--blue);color:var(--ink)}
.pl__c--l::before{background:linear-gradient(90deg,rgba(245,246,248,.96) 0%,rgba(245,246,248,.86) 60%,rgba(245,246,248,.7) 100%)}
.pl__i{flex:none;width:48px;height:48px;border-radius:2px;display:flex;align-items:center;justify-content:center;background:var(--ink);color:#fff}
.pl__c--l .pl__i{background:var(--blue)}
.pl__i svg{width:22px;height:22px}
.pl__c b{display:block;font-size:20px;font-weight:600;line-height:1.25;letter-spacing:-.015em}
.pl__c p{margin:8px 0 0;font-size:15px;line-height:1.55;opacity:.9;max-width:34ch}
.pl__c--l p{color:var(--ink-2);opacity:1}
.pl__a{display:flex;align-items:center;justify-content:center;color:var(--blue)}
.pl__a svg{width:22px;height:22px}
@media(max-width:900px){.pl__h{display:none}.pl__r{grid-template-columns:1fr;gap:6px}.pl__a{height:32px;transform:rotate(90deg)}.pl__c{min-height:0;padding:22px 20px}}
/* Abschluss: Punkte als Liste */
.final__list{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.final__list li{position:relative;padding-left:22px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.final__list li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:1px;background:var(--blue)}

/* ============================================================
   seite-version-g — Strukturumbau (10.09.2026)
   ============================================================ */

/* Persönliche Ansprache: kurz, kein Foto */
.ans{padding:64px 0}
.ans__satz{max-width:820px;margin:0 auto;text-align:center;font-size:19px;line-height:1.65;color:var(--ink);text-wrap:balance}

/* Lösung, fusioniert */
.solgroup{margin-top:64px}
.solgroup__lead{text-align:center;max-width:640px;margin:0 auto;font-size:17px;color:var(--ink-3);font-style:normal}
.solgroup__h{display:block;font:600 12px/1 'Inter Tight',system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);margin-bottom:24px}
.solgroup__h--b{color:#2E5E4E}
.solgroup__h i{font-style:normal;font-weight:400;color:var(--ink-3);letter-spacing:.06em;margin-right:10px}
.soltiles{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.solc{position:relative;background:#fff;border:1px solid var(--line);border-radius:2px;padding:24px 22px 22px}
.solc__i{display:flex;width:38px;height:38px;border-radius:2px;background:var(--navy);color:#fff;align-items:center;justify-content:center;margin-bottom:18px}
.solc__i svg{width:19px;height:19px}
.solc__n{position:absolute;right:20px;top:24px;font:600 11px/1 'Inter Tight',system-ui,sans-serif;color:var(--ink-3)}
.solc b{display:block;font-size:15.5px;font-weight:600;line-height:1.3;letter-spacing:-.012em;color:var(--ink)}
.solc p{margin:8px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.fdstrip{margin:44px auto 0;max-width:1000px;text-align:center;font-size:14.5px;line-height:1.6;color:var(--ink-3);
  padding-top:28px;border-top:1px solid var(--line)}
.fdstrip b{color:var(--ink-2);font-weight:500}
@media(max-width:1040px){.soltiles{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.soltiles{grid-template-columns:1fr}}

/* Vertrauen, fusioniert */
.tr{background:#fff}
.tr__grid{display:grid;grid-template-columns:1fr 240px;gap:64px;align-items:start}
.tr__txt .lbl{display:block;margin-bottom:18px}
.tr__p{margin:22px 0 0;max-width:64ch;font-size:17px;line-height:1.62;color:var(--ink-2)}
.tr__who{margin:24px 0 0;font-size:14px;line-height:1.5;color:var(--ink-3)}
.tr__who b{display:block;font-weight:500;color:var(--ink);font-size:15px}
.tr__img img{width:100%;height:auto;display:block;border-radius:2px}
.tr__stat{margin:64px auto 0;padding-top:36px;border-top:1px solid var(--line);text-align:center}
.tr__stat b{display:block;font-size:22px;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.tr__stat span{display:block;margin-top:8px;font-size:13.5px;color:var(--ink-3)}
.tr__wall{margin-top:40px}
@media(max-width:900px){.tr__grid{grid-template-columns:1fr;gap:32px}.tr__img{max-width:220px}}

/* Garantie + persönlicher CTA, fusioniert */
.gt__panel--cta{align-items:flex-start}
.gt__vouch--cta{flex:0 0 46%;display:flex;gap:26px;align-items:flex-start}
.gt__vouch--cta .gt__ava{width:132px;height:172px;flex:none;margin:0}
.gt__cta-box{flex:1;min-width:0;padding-top:2px}
.gt__cta-rows{display:grid;border-top:1px solid var(--line);margin-bottom:24px}
.gt__cta-act{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:1080px){.gt__vouch--cta{flex-direction:column}.gt__vouch--cta .gt__ava{width:120px;height:156px}}
@media(max-width:680px){.gt__cta-act{flex-direction:column;align-items:stretch}}

/* Zettel-Wiedergabe innerhalb der FAQ-Antwort */
.faq__beleg{margin-top:20px;max-width:460px}
.faq__beleg .bl{padding:24px 24px 26px}
.faq__beleg .bl__k{font-size:10px}
.faq__beleg .bl__r{font-size:13px;padding:9px 0}
.faq__beleg .bl__r--sum{font-size:14px}
.faq__beleg .bl__note{font-size:11.5px}

/* ============================================================
   Leistungskacheln — alter Aufbau (Nummer, Headline, Text, Grafik
   flush unten) + neues Nutzen-Label. Grafiken: echte Mockups statt
   abstrakter Icons, wiederverwendbare Bausteine (Melvin, 10.09.).
   ============================================================ */
.lk{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.lk__c{position:relative;border:1px solid var(--line);border-radius:2px;background:var(--bg-alt);
  padding:36px 36px 0;display:flex;flex-direction:column;overflow:hidden}
.lk__no{position:absolute;top:36px;right:36px;font-size:11.5px;font-weight:600;letter-spacing:.1em;color:var(--blue)}
.lk__h{margin:0 40px 0 0;font-size:23px;line-height:1.25;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.lk__do{margin:14px 0 0;font-size:15px;line-height:1.55;color:var(--ink-2);max-width:44ch}
.lk__nutzen{margin:16px 0 24px;padding-top:16px;border-top:1px solid var(--line-soft);max-width:44ch}
.lk__nutzen b{display:block;font:600 11px/1 'Inter Tight',system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:7px}
.lk__nutzen span{font-size:14.5px;line-height:1.5;color:var(--ink)}
.lk__g{margin:auto -36px 0;border-top:1px dashed rgba(10,23,48,.22);background:#fff;
  height:246px;flex:none;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
@media(max-width:1040px){.lk{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.lk{grid-template-columns:1fr}}
@media(max-width:620px){.lk__c{padding:28px 28px 0}.lk__g{margin:auto -28px 0}}

/* wiederverwendbare Chrome-Bausteine für die Kachel-Mockups */
.lkc-win{width:92%;max-width:300px;border-radius:2px;overflow:hidden;background:#fff;
  box-shadow:0 0 0 1px rgba(10,23,48,.12),0 20px 34px -18px rgba(11,27,43,.28)}
.lkc-bar{height:22px;background:#F4F6F8;border-bottom:1px solid #E7EAEE;display:flex;align-items:center;gap:5px;padding:0 9px}
.lkc-bar i{width:5px;height:5px;border-radius:50%;background:#DDE1E7}
.lkc-bar span{flex:1;margin-left:3px;height:12px;border:1px solid #E7EAEE;border-radius:2px;background:#fff;
  font:400 7.5px/12px Roboto,Arial,sans-serif;color:#5C6A82;padding:0 6px;white-space:nowrap;overflow:hidden}
.lkc-hero{height:88px;position:relative;background-size:cover;background-position:center 28%}
.lkc-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,37,87,0) 30%,rgba(11,37,87,.72) 100%)}
.lkc-hero b{position:absolute;left:11px;bottom:9px;right:11px;font:500 12px/1.2 'Inter Tight',system-ui,sans-serif;color:#fff;z-index:1}
.lkc-mark{position:absolute;left:11px;top:9px;z-index:1;display:inline-flex;align-items:center;gap:5px;font:600 8.5px/1 'Inter Tight',system-ui,sans-serif;letter-spacing:.04em;color:#fff}
.lkc-mark i{width:13px;height:13px;border-radius:2px;background:#2E5E4E;flex:none}
.lkc-body{padding:9px 11px 12px}
.lkc-fl{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.lkc-fl div{background:#F5F6F8;border-radius:2px;padding:6px 6px 7px}
.lkc-fl b{display:block;font:600 6.5px/1 'Inter Tight',system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.lkc-fl span{display:block;margin-top:4px;height:4px;background:rgba(10,23,48,.14);border-radius:1px}
.lkc-btn{margin-top:8px;height:22px;border-radius:2px;background:#2E5E4E;color:#fff;font:500 9.5px/22px 'Inter Tight',system-ui,sans-serif;text-align:center}

.lkc-gs{display:flex;align-items:center;gap:7px;width:92%;max-width:290px;height:30px;padding:0 12px;background:#fff;
  border-radius:15px;box-shadow:0 1px 6px rgba(32,33,36,.24);font:400 12px/1 Roboto,Arial,sans-serif;color:#202124;margin-bottom:11px}
.lkc-gs i{width:13px;height:13px;border-radius:50%;border:1.6px solid #9AA0A6;position:relative;flex:none}
.lkc-gs i::after{content:"";position:absolute;right:-5px;bottom:-4px;width:6px;height:1.6px;background:#9AA0A6;transform:rotate(45deg)}

.lkc-serp{width:92%;max-width:290px;font-family:Roboto,Arial,sans-serif}
.lkc-serp__r{padding:7px 9px;border-radius:2px}
.lkc-serp__r + .lkc-serp__r{margin-top:2px}
.lkc-serp__r--own{background:#F8F9FA;box-shadow:inset 3px 0 0 var(--blue)}
.lkc-serp__u{font-size:8px;color:#4D5156}
.lkc-serp__t{margin-top:2px;font-size:11.5px;color:#1A0DAB}
.lkc-serp__r--own .lkc-serp__t{color:#0B2557;font-weight:500}
.lkc-serp__r--mute .lkc-serp__u,.lkc-serp__r--mute .lkc-serp__t{color:#B0B4BA}

.lkc-prof{width:92%;max-width:280px;border-radius:2px;overflow:hidden;background:#fff;font-family:Roboto,Arial,sans-serif;
  box-shadow:0 0 0 1px rgba(10,23,48,.12),0 20px 34px -18px rgba(11,27,43,.28)}
.lkc-prof__ph{height:60px;background-size:cover;background-position:center 25%}
.lkc-prof__nm{padding:9px 12px 0;font-size:14px;color:#202124}
.lkc-prof__chips{padding:8px 12px 11px;display:flex;flex-wrap:wrap;gap:5px}
.lkc-prof__chips span{font:500 8.5px/1 'Inter Tight',system-ui,sans-serif;padding:5px 8px;border-radius:10px;background:#F1F3F4;color:#5F6368}
.lkc-prof__chips span.on{background:var(--blue);color:#fff}

.lkc-jobs{width:92%;max-width:290px;border-radius:2px;overflow:hidden;background:#fff;font-family:Roboto,Arial,sans-serif;
  box-shadow:0 0 0 1px rgba(10,23,48,.12),0 20px 34px -18px rgba(11,27,43,.28)}
.lkc-jh{padding:7px 10px;font-size:9.5px;color:#202124;border-bottom:1px solid #DADCE0;display:flex;justify-content:space-between}
.lkc-jh span{color:#70757A}
.lkc-jr{padding:7px 10px;border-bottom:1px solid #F1F3F4;display:flex;flex-direction:column;gap:1px}
.lkc-jr:last-child{border-bottom:0}
.lkc-jr b{font-weight:500;font-size:10.5px;color:#202124}.lkc-jr span{font-size:8.5px;color:#70757A}
.lkc-jr--own{background:#F8F9FA;box-shadow:inset 3px 0 0 var(--blue)}.lkc-jr--own b{color:#0B2557}
.lkc-jr--mute b,.lkc-jr--mute span{color:#B0B4BA}

.lkc-form{width:78%;max-width:180px;border-radius:2px;overflow:hidden;background:#fff;
  box-shadow:0 0 0 1px rgba(10,23,48,.12),0 20px 34px -18px rgba(11,27,43,.28);padding:12px 13px}
.lkc-form label{display:block;font:600 7px/1 'Inter Tight',system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:7px 0 3px}
.lkc-form label:first-child{margin-top:0}
.lkc-form div{height:20px;border:1px solid rgba(10,23,48,.16);border-radius:2px;font:400 9px/18px 'Inter Tight',system-ui,sans-serif;color:var(--ink);padding:0 6px}
.lkc-form .btn2{margin-top:9px;height:24px;background:#2E5E4E;color:#fff;font:500 9.5px/24px 'Inter Tight',system-ui,sans-serif;text-align:center;border:0}

.lkc-check{width:92%;max-width:280px;border-radius:2px;overflow:hidden;background:#fff;
  box-shadow:0 0 0 1px rgba(10,23,48,.12),0 20px 34px -18px rgba(11,27,43,.28)}
.lkc-check__r{display:flex;align-items:center;gap:9px;padding:9px 13px;border-bottom:1px solid var(--line-soft);font:500 12px/1 'Inter Tight',system-ui,sans-serif;color:var(--ink)}
.lkc-check__r:last-child{border-bottom:0}
.lkc-check__r i{width:16px;height:16px;border-radius:2px;background:var(--blue);flex:none;position:relative}
.lkc-check__r i::after{content:"";position:absolute;left:4.5px;top:2.5px;width:4px;height:7px;border:solid #fff;border-width:0 1.6px 1.6px 0;transform:rotate(45deg)}
.lkc-check__r.off i{background:rgba(10,23,48,.1)}
.lkc-check__r.off i::after{border-color:#B0B4BA}
.lkc-check__r.off{color:var(--ink-3)}

/* Rechner-Mockup (Kachel „Der Smarte Rechner") */
.lkc-calc{width:92%;max-width:280px;border-radius:2px;overflow:hidden;background:#fff;
  box-shadow:0 0 0 1px rgba(10,23,48,.12),0 20px 34px -18px rgba(11,27,43,.28)}
.lkc-calc__body{padding:14px 16px 16px}
.lkc-calc__row{margin-bottom:12px}
.lkc-calc__row label{display:flex;justify-content:space-between;font:500 10px/1 'Inter Tight',system-ui,sans-serif;color:var(--ink-2);margin-bottom:6px}
.lkc-calc__row label span{color:var(--ink-3)}
.lkc-calc__track{height:5px;border-radius:3px;background:rgba(10,23,48,.1);position:relative}
.lkc-calc__track i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--blue)}
.lkc-calc__track b{position:absolute;top:50%;width:13px;height:13px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 1px rgba(10,23,48,.18),0 2px 4px rgba(10,23,48,.2);transform:translate(-50%,-50%)}
.lkc-calc__out{margin-top:14px;padding:12px 14px;background:var(--bg-alt);border-radius:2px;display:flex;justify-content:space-between;align-items:center}
.lkc-calc__out span{font:500 11px/1.3 'Inter Tight',system-ui,sans-serif;color:var(--ink-2)}
.lkc-calc__out .ph{height:16px;min-width:5ch}

/* Breite Zeile unter dem 3er-Raster: zwei Kacheln, je halbe Breite (1,5 von 3 Spalten) */
.lk--wide{grid-template-columns:1fr 1fr;margin-top:20px}
.lk__c--wide .lk__g{height:auto;min-height:246px}
@media(max-width:1040px){.lk--wide{grid-template-columns:1fr}}

/* ---------- Fallstudien (Vertrauen) — Vorlage für weitere Fälle ---------- */
.fs{margin-top:64px;padding-top:40px;border-top:1px solid var(--line)}
.fs .h2{margin-top:14px}
.fs__lede{margin:16px 0 0;max-width:62ch;font-size:16px;line-height:1.6;color:var(--ink-2)}
.cs{display:flex;flex-direction:column;gap:24px;margin-top:36px}
.cs__c{background:#fff;border:1px solid var(--line);border-radius:2px;overflow:hidden;display:grid;grid-template-columns:1.22fr 1fr}
.cs__media{background:var(--bg-alt);display:flex;align-items:stretch;padding:0;overflow:hidden;
  border-right:1px solid var(--line);min-height:420px}
.cs__shot{width:100%;display:flex}
.cs__shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:left top}
/* Zweite Karte spiegeln — gibt der Reihe Rhythmus statt Wiederholung */
.cs__c:nth-child(even){grid-template-columns:1fr 1.22fr}
.cs__c:nth-child(even) .cs__media{order:2;border-right:0;border-left:1px solid var(--line)}
.cs__c:nth-child(even) .cs__content{order:1}
.cs__content{padding:44px 44px 40px;display:flex;flex-direction:column;justify-content:center}
.cs__k{display:block;font:600 11px/1 'Inter Tight',system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--blue);margin-bottom:18px}
.cs__h{margin:0;font-size:27px;line-height:1.25;font-weight:500;letter-spacing:-.018em;color:var(--ink);
  max-width:27ch;text-wrap:balance}
.cs__p{margin:14px 0 0;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.cs__note{margin:20px 0 0;padding-top:18px;border-top:1px solid var(--line-soft);font-size:13px;color:var(--ink-3)}
/* Zahlenzeile: Werte treten hervor, Beschriftung bleibt ruhig */
.cs__stats{display:flex;flex-wrap:wrap;gap:8px 30px;margin:22px 0 0;padding-top:20px;
  border-top:1px solid var(--line-soft);font-size:14px;line-height:1.4;color:var(--ink-2)}
.cs__stats span{display:inline-flex;align-items:baseline;gap:8px;white-space:nowrap}
.cs__stats b{font-size:24px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
/* Zitat: grosses Anfuehrungszeichen als Wasserzeichen statt Portraitfoto */
.cs__quote{position:relative;margin:22px 0 0;padding:20px 0 0 46px;border-top:1px solid var(--line-soft)}
.cs__quote::before{content:"\201C";position:absolute;left:-4px;top:8px;z-index:0;pointer-events:none;user-select:none;
  font:300 86px/.8 'Inter Tight',system-ui,sans-serif;letter-spacing:-.05em;color:rgba(11,37,87,.10)}
.cs__quote p{position:relative;z-index:1;margin:0;font-size:15px;line-height:1.5;font-style:italic;color:var(--ink)}
.cs__quote span{position:relative;z-index:1;display:block;margin-top:8px;font-size:12.5px;color:var(--ink-3)}
@media(max-width:820px){.cs__c{grid-template-columns:1fr}.cs__content{padding:28px 24px 26px}
  .cs__quote{padding-left:38px}.cs__quote::before{font-size:76px;left:-4px}}

/* ---------- Vorher/Nachher (unter den Fallstudien) ---------- */
.vn{margin-top:56px}
.vn__head{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 18px;margin-bottom:18px}
.vn__intro{margin:0;font-size:14px;line-height:1.5;color:var(--ink-3)}
.vn__c{background:#fff;border:1px solid var(--line);border-radius:2px;overflow:hidden}
.vn__shots{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}
.vn__fig{margin:0;display:flex;flex-direction:column;background:var(--bg-alt)}
.vn__fig + .vn__fig{border-left:1px solid var(--line)}
.vn__fig figcaption{padding:12px 20px;border-bottom:1px solid var(--line);background:#fff;
  font:600 10.5px/1 'Inter Tight',system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.vn__fig--nachher figcaption{color:var(--blue)}
.vn__fig img{display:block;width:100%;height:auto}
.vn__content{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;padding:38px 44px 40px}
.vn__content .cs__p{margin:4px 0 0}
@media(max-width:820px){
  .vn__shots,.vn__content{grid-template-columns:1fr}
  .vn__fig + .vn__fig{border-left:0;border-top:1px solid var(--line)}
  .vn__content{gap:14px;padding:26px 24px 28px}
}

/* ---------- Fallstudien, schlicht (netfame als Anstoss, 15.09.2026) ---------- */
.fs{margin-top:72px;padding-top:64px;border-top:1px solid var(--line)}
.fs__head{text-align:center;max-width:780px;margin:0 auto 44px}
.fs__head .h2{margin-top:14px;text-wrap:balance}
/* Fester Umbruch vor dem blauen Teil (25.09.2026): der blaue Block macht ueber
   die Haelfte des Satzes aus und brach gemessen bei 1440, 390 und 320 px auf
   zwei Zeilen — balance konnte das nicht loesen, nowrap haette bei 320 px den
   Rand gesprengt. Mit dem <br> sitzt Blau von 390 bis 1920 exakt auf Zeile 2.
   Unter 341 px passt "Ergebnisse unserer Kunden." (304 px) nicht mehr in die
   Spalte (276 px): dort faellt der feste Umbruch weg, damit balance wieder
   zwei gleich lange Zeilen setzen kann, und die Farbe wird zurueckgenommen —
   eine ueber zwei Zeilen gebrochene Farbflaeche ist schlechter als gar keine. */
@media(max-width:340px){
  /* NICHT display:none — der Umbruch verschwindet dann ersatzlos und es steht
     „dieErgebnisse" ohne Leerzeichen da. Als inline mit content:" " bleibt die
     Wortgrenze erhalten. */
  .fs__head .h2 br{display:inline}
  .fs__head .h2 br::after{content:" "}
  .fs__head .h2 strong{color:inherit}
}
.fs__head .fs__lede{margin:14px auto 0;max-width:none}
.fst{display:flex;flex-direction:column;gap:20px}
.fst__c{display:grid;grid-template-columns:1.12fr 1fr;gap:56px;align-items:center;
  background:var(--bg-alt);border-radius:2px;padding:44px 48px}
.fst__shot{border-radius:2px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(10,23,48,.08),0 26px 44px -26px rgba(11,27,43,.35)}
.fst__shot img{display:block;width:100%;height:auto}
.fst__name{margin:0;font-size:26px;line-height:1.2;font-weight:500;letter-spacing:-.015em;color:var(--ink)}
.fst__meta{display:flex;flex-wrap:wrap;gap:6px 22px;margin:10px 0 0;font-size:14.5px;color:var(--ink-3)}
.fst__meta span{display:inline-flex;align-items:center;gap:7px}
.fst__meta svg{width:14px;height:14px;flex:none}
.fst__lbl{display:table;margin-top:24px;padding:6px 9px;background:#fff;border-radius:2px;
  font:600 10.5px/1 'Inter Tight',system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.fst__done{list-style:none;margin:10px 0 0;padding:0}
.fst__done li{position:relative;padding:4px 0 4px 24px;font-size:15.5px;line-height:1.45;color:var(--ink-2)}
.fst__done li::before{content:"→";position:absolute;left:0;top:4px;font-weight:600;color:var(--blue)}
.fst__res{margin:10px 0 0;display:flex;flex-direction:column;gap:4px}
.fst__res p{margin:0;display:flex;align-items:baseline;gap:14px;font-size:20px;line-height:1.2;letter-spacing:-.01em;color:var(--ink)}
.fst__res b{flex:none;font-size:52px;line-height:1;font-weight:500;letter-spacing:-.035em;color:var(--blue)}
.fst__note{margin:10px 0 0;max-width:50ch;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.fst__quote{margin:16px 0 0;font-size:15px;line-height:1.5;font-style:italic;color:var(--ink)}
.fst__quote span{margin-left:4px;font-style:normal;font-size:13px;color:var(--ink-3)}
.fst__link{display:inline-flex;align-items:center;gap:8px;margin-top:22px;padding:12px 18px;
  background:#fff;border:1px solid var(--line);border-radius:2px;
  font-size:14.5px;font-weight:500;color:var(--ink);text-decoration:none;transition:border-color .2s}
.fst__link svg{width:14px;height:14px}
.fst__link:hover{border-color:var(--ink)}
.fs .vn{margin-top:40px}
@media(max-width:900px){
  .fst__c{grid-template-columns:1fr;gap:28px;padding:24px 22px 28px}
  .fst__res b{font-size:42px}
}

/* ---------- Pain-Karte 01: zwei Angebote nebeneinander (15.09.2026, nach Melvins Vorlage) ----------
   Teures Angebot ausgegraut, billiges in voller Farbe. In der schmalen Karte innen umgebaut:
   Symbol + Label oben, Leistung volle Breite, darunter EUR und Sterne. Ab 440px Grafikbreite groesser. Prefix .pq */
.pm-graphic.pg:has(.pq){padding:0;align-items:center;container-type:inline-size}
.pq{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:10px;font-family:'Inter Tight',system-ui,sans-serif}
.pq__c{display:flex;flex-direction:column;gap:11px;min-width:0;padding:10px 10px 11px;background:#fff;border-radius:4px;
  box-shadow:0 10px 24px rgba(11,27,43,.09),0 1px 2px rgba(11,27,43,.06)}
.pq__head{display:grid;grid-template-columns:22px 1fr;column-gap:7px;row-gap:7px;align-items:center}
.pq__ico{width:22px;height:22px;border-radius:4px;display:flex;align-items:center;justify-content:center;
  background:rgba(24,91,237,.1);color:var(--blue)}
.pq__ico svg{width:11px;height:11px;display:block}
.pq__t{display:contents}
.pq__t span{grid-column:2;grid-row:1;font-size:9.5px;line-height:1.1;color:#7C879B;white-space:nowrap}
.pq__t b{grid-column:1 / -1;grid-row:2;font-size:11.5px;line-height:1.15;font-weight:600;letter-spacing:-.02em;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pq__row{display:flex;align-items:center;justify-content:space-between;gap:4px}
.pq__eur{font-size:19px;line-height:1;font-weight:600;letter-spacing:-.04em;color:var(--blue);white-space:nowrap}
@container (max-width:252px){
  .pq{gap:8px}
  .pq__c{padding:9px 8px 10px;gap:9px}
  .pq__head{grid-template-columns:20px 1fr;column-gap:6px;row-gap:6px}
  .pq__ico{width:20px;height:20px}.pq__ico svg{width:10px;height:10px}
  .pq__t span{font-size:9px}.pq__t b{font-size:10.5px;letter-spacing:-.025em}
  .pq__eur{font-size:16px}.pq__stars svg{width:8px;height:8px}}
.pq__stars{display:flex;gap:1px}
.pq__stars svg{display:block;width:9px;height:9px;fill:var(--blue)}
@container (min-width:440px){
  .pq{gap:18px}
  .pq__c{gap:14px;padding:13px 14px 12px}
  .pq__head{grid-template-columns:28px 1fr;column-gap:10px}
  .pq__ico{width:28px;height:28px}.pq__ico svg{width:14px;height:14px}
  .pq__t span{font-size:10.5px}.pq__t b{font-size:13.5px}
  .pq__eur{font-size:26px}.pq__stars svg{width:14px;height:14px}}
/* Das teure Angebot faellt raus */
.pq__c--weg{opacity:.42;filter:grayscale(1);box-shadow:0 0 0 1px rgba(10,23,48,.06)}
.anim .pm-card .pq__c--weg{opacity:1;filter:none;box-shadow:0 10px 24px rgba(11,27,43,.09),0 1px 2px rgba(11,27,43,.06);
  transition:opacity .9s cubic-bezier(.22,.8,.24,1) .7s,filter .9s cubic-bezier(.22,.8,.24,1) .7s,box-shadow .9s cubic-bezier(.22,.8,.24,1) .7s}
.anim .pm-card.in .pq__c--weg{opacity:.42;filter:grayscale(1);box-shadow:0 0 0 1px rgba(10,23,48,.06)}
@media(prefers-reduced-motion:reduce){.anim .pm-card .pq__c--weg{opacity:.42;filter:grayscale(1);box-shadow:0 0 0 1px rgba(10,23,48,.06);transition:none}}

/* ---------- Pain-Karte 02: drei Bewerber-Plaetze, keiner besetzt (15.09.2026, nach Melvins Vorlage) ----------
   Mitte gross in Blau, Seiten klein und grau. Rot der Vorlage durch Blau ersetzt. Prefix .pw */
.pm-graphic.pg:has(.pw){padding:0;align-items:center;justify-content:center}
.pw{width:100%;display:flex;align-items:center;justify-content:center;gap:14px}
.pw__s{flex:none;width:56px;height:56px;border-radius:4px;display:flex;align-items:center;justify-content:center;
  background:#fff;box-shadow:0 0 0 1px rgba(10,23,48,.07),0 6px 14px rgba(11,27,43,.05)}
.pw__s svg{width:29px;height:29px;display:block}
.pw__s svg circle,.pw__s svg path{fill:#B9C0CC}
.pw__s svg path.x{fill:none;stroke:#B9C0CC;stroke-width:3.4;stroke-linecap:round}
.pw__s--main{width:98px;height:98px;border-radius:6px;
  background:linear-gradient(120deg,#2A67F2 0%,#185BED 45%,#0F49C8 100%);
  box-shadow:0 22px 40px -14px rgba(11,27,43,.34),0 4px 10px rgba(11,27,43,.08)}
.pw__s--main svg{width:53px;height:53px}
.pw__s--main svg circle,.pw__s--main svg path{fill:#fff}
.pw__s--main svg path.x{fill:none;stroke:#fff;stroke-width:3.6}
.anim .pm-card .pw__s--main{opacity:0;transform:scale(.92);transition:opacity .7s cubic-bezier(.22,.8,.24,1) .45s,transform .7s cubic-bezier(.22,.8,.24,1) .45s}
.anim .pm-card.in .pw__s--main{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.anim .pm-card .pw__s--main{opacity:1;transform:none;transition:none}}

/* ---------- Pain-Karte 03: Stapel gleicher Anfragen (15.09.2026) ----------
   Dieselbe Frage immer wieder, hinten blasser und schmaler. Blau nur fuer den Zaehler. Prefix .pst */
.pm-graphic.pg:has(.pst){padding:0;align-items:center;justify-content:center}
.pst{width:100%;display:flex;align-items:center;justify-content:center;font-family:'Inter Tight',system-ui,sans-serif}
.pst__stack{position:relative;width:100%;height:108px}
.pst__m{position:absolute;left:50%;transform:translateX(-50%);box-sizing:border-box;
  display:flex;flex-direction:column;gap:4px;padding:13px 15px 14px;background:#fff;border-radius:4px}
.pst__m--front{top:30px;width:100%;box-shadow:0 12px 28px rgba(11,27,43,.10),0 1px 2px rgba(11,27,43,.06)}
.pst__m--b2{top:15px;width:90%;background:#F6F7FA;box-shadow:0 0 0 1px rgba(10,23,48,.07)}
.pst__m--b3{top:0;width:80%;background:#EFF1F5;box-shadow:0 0 0 1px rgba(10,23,48,.06)}
.pst__m--b2 > *,.pst__m--b3 > *{visibility:hidden}
.pst__k{font-size:10.5px;line-height:1.1;color:#7C879B}
.pst__q{font-size:14px;line-height:1.2;font-weight:600;letter-spacing:-.015em;color:var(--ink);white-space:nowrap}
.pst__n{position:absolute;right:-6px;top:20px;z-index:2;padding:5px 7px;border-radius:4px;
  background:var(--blue);color:#fff;font-size:11.5px;font-weight:600;line-height:1;letter-spacing:-.01em;
  box-shadow:0 6px 14px rgba(11,27,43,.18)}
.anim .pm-card .pst__m--b2,.anim .pm-card .pst__m--b3{transform:translate(-50%,14px);transition:transform .8s cubic-bezier(.22,.8,.24,1) .35s}
.anim .pm-card.in .pst__m--b2,.anim .pm-card.in .pst__m--b3{transform:translateX(-50%)}
.anim .pm-card .pst__n{opacity:0;transform:scale(.9);transition:opacity .5s cubic-bezier(.22,.8,.24,1) .8s,transform .5s cubic-bezier(.22,.8,.24,1) .8s}
.anim .pm-card.in .pst__n{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .anim .pm-card .pst__m--b2,.anim .pm-card .pst__m--b3{transform:translateX(-50%);transition:none}
  .anim .pm-card .pst__n{opacity:1;transform:none;transition:none}}

/* ---------- Pain-Karte 04: aufgefaecherte Dokumente, Auftragslage bricht ein (15.09.2026, nach Melvins Vorlage) ----------
   Vorne gerade das eigene Dokument mit Kurve und Ring, dahinter zwei schraege, blasse, textlose Dokumente.
   Unten weiche Ausblendung statt harter Schnittkante. Blau statt Rot. Prefix .pfn */
.pm-graphic.pg:has(.pfn){padding:0;align-items:stretch;justify-content:center;container-type:inline-size}
.pfn{position:relative;width:100%;min-height:158px;overflow:hidden;font-family:'Inter Tight',system-ui,sans-serif;
  -webkit-mask-image:linear-gradient(to bottom,#000 80%,transparent 100%);mask-image:linear-gradient(to bottom,#000 80%,transparent 100%)}
.pfn__scene{position:absolute;left:50%;top:4px;width:260px;height:180px;margin-left:-130px;transform-origin:top center}
@container (min-width:440px){.pfn__scene{transform:scale(1.4)}}
.pfn__doc{position:absolute;box-sizing:border-box;background:#fff;border-radius:4px;padding:10px 11px}
.pfn__doc--front{left:58px;top:2px;width:144px;height:176px;z-index:3;
  box-shadow:0 14px 34px rgba(11,27,43,.11),0 1px 2px rgba(11,27,43,.06)}
.pfn__doc--l,.pfn__doc--r{top:22px;width:98px;height:140px;z-index:1;background:#FCFCFD;
  box-shadow:0 0 0 1px rgba(10,23,48,.06),0 8px 20px rgba(11,27,43,.05)}
.pfn__doc--l{left:20px;transform:rotate(-8deg);transform-origin:center}
.pfn__doc--r{right:20px;transform:rotate(8deg);transform-origin:center}
.pfn__doc--r .pfn__dh{flex-direction:row-reverse}
.pfn__dh{display:flex;align-items:center;gap:8px}
.pfn__ico{flex:none;width:22px;height:22px;border-radius:4px;background:#EEF0F4;display:flex;align-items:center;justify-content:center}
.pfn__ico--on{width:24px;height:24px;background:rgba(24,91,237,.1);color:var(--blue)}
.pfn__ico svg{width:13px;height:13px;display:block}
.pfn__bars{flex:1;display:flex;flex-direction:column;gap:4px}
.pfn__bars i{display:block;height:4px;border-radius:1px;background:rgba(10,23,48,.10)}
.pfn__bars i + i{width:60%;background:rgba(10,23,48,.06)}
.pfn__doc--r .pfn__bars{align-items:flex-end}
.pfn__t{display:flex;flex-direction:column;gap:1px;line-height:1.15}
.pfn__t span{font-size:9.5px;color:#7C879B}
.pfn__t b{font-size:12.5px;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.pfn__row{display:block;height:5px;margin-top:9px;border-radius:1px;background:rgba(10,23,48,.06)}
.pfn__doc--front .pfn__row:first-of-type{margin-top:11px}
.pfn__row--s{width:64%}
.pfn__doc--l .pfn__row:nth-of-type(2n),.pfn__doc--r .pfn__row:nth-of-type(2n){width:72%}
.pfn__doc--r .pfn__row{margin-left:auto}
.pfn__cw{position:relative;margin:12px -11px 0;height:66px}
.pfn__chart{display:block;width:100%;height:100%;overflow:visible}
.pfn__line{fill:none;stroke:var(--blue);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.pfn__dot{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 2.4px var(--blue),0 0 0 8px rgba(24,91,237,.13)}
/* Bewegung: Kurve zeichnet sich, dann Ring, dann faechern die hinteren Dokumente auf */
.anim .pm-card .pfn__line{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.8s cubic-bezier(.22,.8,.24,1) .3s}
.anim .pm-card.in .pfn__line{stroke-dashoffset:0}
.anim .pm-card .pfn__area,.anim .pm-card .pfn__dot{opacity:0;transition:opacity .6s cubic-bezier(.22,.8,.24,1) 1.3s}
.anim .pm-card.in .pfn__area,.anim .pm-card.in .pfn__dot{opacity:1}
.anim .pm-card .pfn__doc--l{transform:rotate(0);transition:transform .9s cubic-bezier(.22,.8,.24,1) .2s}
.anim .pm-card .pfn__doc--r{transform:rotate(0);transition:transform .9s cubic-bezier(.22,.8,.24,1) .2s}
.anim .pm-card.in .pfn__doc--l{transform:rotate(-8deg)}
.anim .pm-card.in .pfn__doc--r{transform:rotate(8deg)}
@media(prefers-reduced-motion:reduce){
  .anim .pm-card .pfn__line{stroke-dashoffset:0;transition:none}
  .anim .pm-card .pfn__area,.anim .pm-card .pfn__dot{opacity:1;transition:none}
  .anim .pm-card .pfn__doc--l{transform:rotate(-8deg);transition:none}
  .anim .pm-card .pfn__doc--r{transform:rotate(8deg);transition:none}}


/* ---------- Pain-Karten: Layout nach Variante 4 (15.09.2026, von Melvin gewaehlt) ----------
   Grafik oben auf grauer Flaeche (8px vom Kartenrand, Radius 2px wie die Karte), darunter
   Label dunkelgrau · 12 · Headline · 16 · Text. Innenluft ueber und unter jeder Grafik gleich. */
#lage .pm-card{padding:8px 8px 26px}
#lage .pm-graphic,#lage .pm-graphic.pg{order:-1;flex:0 0 auto;height:196px;min-height:0;margin:0 0 24px;padding:16px 12px;
  background:#F2F4F7;border-radius:2px}
#lage .pm-lbl,#lage .pm-t,#lage .pm-p{margin-left:14px;margin-right:14px}
#lage .pm-lbl{margin-top:0;margin-bottom:12px;color:#5F6C82}
#lage .pm-t{margin-top:0;margin-bottom:16px}
#lage .pm-p{margin-top:0;margin-bottom:0}
/* Karte 01: Kaesten etwas hoeher; ausgegrautes Angebot auf grauem Grund etwas deckender */
#lage .pq__c{padding-top:15px;padding-bottom:16px}
#lage .pq__c--weg,.anim #lage .pm-card.in .pq__c--weg{opacity:.55}
/* Karte 02: Quadrate minimal groesser */
#lage .pw__s{width:60px;height:60px}
#lage .pw__s--main{width:104px;height:104px}
#lage .pw__s--main svg{width:56px;height:56px}
/* Karte 03: hintere Lagen heben sich vom grauen Grund ab */
#lage .pst__m--b2{background:#FCFDFE;box-shadow:0 0 0 1px rgba(10,23,48,.08)}
#lage .pst__m--b3{background:#F9FAFB;box-shadow:0 0 0 1px rgba(10,23,48,.07)}
/* Karte 04: Dokument mit derselben Innenluft oben und unten, Kurve voll sichtbar */
#lage .pfn{height:164px;min-height:0;
  -webkit-mask-image:linear-gradient(to bottom,#000 75%,transparent 90%);mask-image:linear-gradient(to bottom,#000 75%,transparent 90%)}
#lage .pfn__scene{top:27px}
#lage .pfn__doc--front .pfn__row{display:none}
#lage .pfn__cw{margin-top:10px;height:58px}

/* ---------- Pain-Sektion: Bruecke ueber den Karten (15.09.2026, Variante 1 von Melvin gewaehlt) ----------
   Eigene Zeile direkt ueber dem Raster statt zweiter grauer Lede-Absatz: sichtbar 55 px nach oben, 28 px zu den Karten. */
#lage .pm-br{margin:48px auto 0;text-align:center;font:600 18px/1.4 'Inter Tight',system-ui,sans-serif;color:#1F2B44;letter-spacing:-.005em}
#lage .pm-br strong{font-weight:600}
#lage .pm-grid{margin-top:26px}

/* ---------- 03 · Bausteine als eigener Abschnitt (16.09.2026, Melvin: Vorschlag „fertig fertig") ----------
   Klasse .bst, weil .bs oben schon ein Zweispalten-Raster ist.
   Rangordnung: Ergebnis-Band weiss mit Schatten auf Weiss, Bausteine weiss mit Schatten auf Grau.
   Grafikflaeche eine Stufe dunkler als der Abschnitt (wie die Grafikflaechen der Pain-Karten),
   sonst verschwimmt die untere Kartenhaelfte im Hintergrund. Die 406er-Buehnen der Mockups
   hatten #F5F6F8 fest eingetragen — sie werden transparent, --bg-alt wird fuer Verlaeufe umgebogen. */
/* Gemessen: die Sektion hatte 12,2% Tinte gegen ~20% bei beiden Nachbarn und
   55% leere Bildzeilen. Die Leere lag in drei Baendern, keines davon in der
   Grafik: 167px Polster oben, 102px Luecke zur Grafik, 244px darunter.
   Polster darum enger statt Inhalt zu erfinden. */
#system.sec{padding-top:110px;padding-bottom:90px}
.bst{background:var(--bg-alt);position:relative}
.bst .head-mitte{margin-bottom:64px}
.bst .lk__c{background:#fff;border-color:transparent;
  box-shadow:0 1px 2px rgba(10,23,48,.05),0 18px 30px -12px rgba(10,23,48,.16)}
.bst .lk__g{background:#EDF0F4;border-top:0;--bg-alt:#EDF0F4}
.bst .lk__g > div{background-color:transparent!important}
/* Handy: eine Wischreihe mit allen acht Karten, die naechste schaut heraus */
@media(max-width:680px){
  .bst .head-mitte{margin-bottom:36px}
  .bst__grid{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
    margin:0 -22px;padding:6px 22px 30px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .bst__grid::-webkit-scrollbar{display:none}
  .bst .lk{display:contents}
  .bst .lk__c{flex:0 0 84%;scroll-snap-align:center;margin:0}
}

/* ---------- 03 · Bausteine: Grafikflaeche eingerueckt + Haarlinie (16.09.2026, Variante 1 von Melvin gewaehlt) ----------
   Bauweise wie die Pain-Karten: 8 px weisser Rand, Karte bleibt rundum weiss.
   Mockups sind fuer 406 x 246 gebaut und werden jetzt verkleinert statt abgeschnitten;
   den Faktor (--gs) setzt ein kleines Skript am Seitenende. */
.bst .lk__c{padding-bottom:8px}
.bst .lk__g{margin:auto -28px 0;height:auto;aspect-ratio:406/246;border-radius:2px;position:relative;display:block;overflow:hidden}
.bst .lk__g > *{position:absolute!important;left:50%;top:50%;flex:none;width:406px;margin:0!important;
  transform:translate(-50%,-50%) scale(var(--gs,1));transform-origin:50% 50%}
.bst .lk__g::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:50;
  box-shadow:inset 0 0 0 1px rgba(10,23,48,.06)}
/* breite Karten: gleiche Flaechenhoehe wie die Reihe darueber, Mockup nicht aufblasen */
.bst .lk__c--wide .lk__g{aspect-ratio:auto;height:calc(246px * var(--gs,1));min-height:0}
@media(max-width:620px){.bst .lk__g{margin:auto -20px 0}}

/* ---------- Erfolgsformel aus einem Guss mit #bausteine (16.09.2026) ----------
   Format A + B = Ergebnis bleibt. Gleiche Sprache wie die Bausteine: grauer Grund,
   weisse Karten mit dem Pain-/Bausteine-Schatten, Titel 23/500, Text 15, blaue Mikrolabels.
   Ergebnis-Karte bleibt der dunkle Anker (Navy wie die Kacheln der Systemgrafik).
   Alter Glow-Test und die .fx-Karten sind damit ausser Gebrauch. */
#formel.fml{background:var(--bg-alt);padding-top:0;padding-bottom:150px}
#formel.fml::after{display:none}
/* keine Trennlinie: Bausteine und Formel sind ein Kapitel auf demselben Grund */
#formel.fml > .container::before{display:none}
#bausteine.sec{padding-bottom:0}
.fml__head{margin:0 0 64px;padding-top:140px}
.fml__row{display:grid;grid-template-columns:1fr 56px 1fr 56px 1fr;grid-template-rows:auto auto 1fr;align-items:stretch;max-width:1264px;margin:0 auto}
/* Subgrid: Label, Titel und Liste stehen in allen drei Karten auf denselben Hoehen */
.fml__c{display:grid;grid-row:1 / span 3;grid-template-rows:subgrid;align-content:start}
.fml__op{grid-row:1 / span 3}
.fml__row > :nth-child(1){grid-column:1}
.fml__row > :nth-child(2){grid-column:2}
.fml__row > :nth-child(3){grid-column:3}
.fml__row > :nth-child(4){grid-column:4}
.fml__row > :nth-child(5){grid-column:5}
.fml__c{position:relative;background:#fff;border-radius:2px;padding:34px 34px 30px;
  box-shadow:0 1px 2px rgba(10,23,48,.05),0 18px 30px -12px rgba(10,23,48,.16)}
/* Etikett zweiteilig (24.09.2026, Melvin), Bauart netfame: Phasenmarke + Bezeichnung.
   Die Farbcodierung des Vorbilds (Blau/Rot/Gruen je Phase) ist NICHT uebernommen —
   sie bricht "Blau nur als Akzent". Die beiden Teile trennt stattdessen das
   Schriftbild: Marke versal/gesperrt/blau, Bezeichnung gemischt/dunkel. Dazwischen
   ein Haarstrich statt Punkt oder Kasten, damit kein drittes Element entsteht. */
.fml__lbl{display:flex;align-items:baseline;gap:10px;margin-bottom:16px;min-width:0}
.fml__no{flex:none;font:700 10.5px/1.5 'Inter Tight',system-ui,sans-serif;font-style:normal;
  letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.fml__tag{flex:1;min-width:0;position:relative;padding-left:11px;
  font:500 13.5px/1.5 'Inter Tight',system-ui,sans-serif;letter-spacing:-.005em;color:var(--ink);text-wrap:pretty}
.fml__tag::before{content:"";position:absolute;left:0;top:.28em;bottom:.28em;width:1px;background:var(--line)}
.fml__c--res .fml__no{color:#8FB0FF}
.fml__c--res .fml__tag{color:rgba(255,255,255,.88)}
.fml__c--res .fml__tag::before{background:rgba(255,255,255,.22)}
.fml__h{margin:0;font-size:23px;line-height:1.3;font-weight:500;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.fml__list{list-style:none;margin:22px 0 0;padding:20px 0 0;border-top:1px solid var(--line-soft);align-self:start}
.fml__list li{text-wrap:pretty}
.fml__list li{position:relative;padding:6px 0 6px 30px;font-size:15px;line-height:1.5;color:var(--ink)}
.fml__list i{position:absolute;left:0;top:8px;width:18px;height:18px;border-radius:50%;background:#EDF0F4;
  box-shadow:inset 0 0 0 1px rgba(10,23,48,.06);display:flex;align-items:center;justify-content:center}
.fml__list i svg{width:11px;height:11px;fill:var(--blue);display:block}
/* Ergebnis: dunkler Anker */
.fml__c--res{background:linear-gradient(165deg,#133A80 0%,#0B2557 55%,#081C45 100%);
  box-shadow:0 1px 2px rgba(10,23,48,.08),0 22px 38px -14px rgba(8,28,69,.42)}
.fml__c--res .fml__lbl{color:#8FB0FF}
.fml__c--res .fml__h{color:#fff}
.fml__c--res .fml__list{border-top-color:rgba(255,255,255,.14)}
.fml__c--res .fml__list li{color:rgba(255,255,255,.92)}
.fml__c--res .fml__list i{background:rgba(255,255,255,.12);box-shadow:none}
.fml__c--res .fml__list i svg{fill:#fff}
/* Rechenzeichen: weisse Scheibe mit demselben Schatten, liegt ueber beiden Kartenkanten */
.fml__op{position:relative;z-index:2;display:flex;align-items:center;justify-content:center}
.fml__op i{position:relative;display:block;width:48px;height:48px;border-radius:50%;background:#fff;flex:none;
  box-shadow:0 0 0 1px rgba(10,23,48,.05),0 10px 22px -10px rgba(10,23,48,.28)}
.fml__op i::before,.fml__op i::after{content:"";position:absolute;left:50%;top:50%;background:var(--blue);border-radius:1px}
.fml__plus::before{width:16px;height:2px;margin:-1px 0 0 -8px}
.fml__plus::after{width:2px;height:16px;margin:-8px 0 0 -1px}
.fml__eq::before{width:16px;height:2px;margin:-5px 0 0 -8px}
.fml__eq::after{width:16px;height:2px;margin:3px 0 0 -8px}
@media(max-width:1100px){.fml__row{grid-template-columns:1fr 44px 1fr 44px 1fr}.fml__c{padding:28px 24px 24px}.fml__h{font-size:21px}}
@media(max-width:900px){
  .fml__head{padding-top:96px}
  .fml__row{grid-template-columns:1fr;grid-template-rows:none;max-width:560px}
  .fml__c{grid-row:auto;display:block}
  .fml__op{grid-row:auto}
  .fml__row > *{grid-column:1!important}
  #formel.fml{padding-bottom:96px}
  .fml__op{height:56px}
  .fml__op i{width:44px;height:44px}
}

/* ---------- 03 · Bausteine: drei Reihen zu je drei Karten + Karte 09 (16.09.2026) ----------
   07/08 nicht mehr breit; .lk--3 ist das normale Dreierraster mit Abstand zur Reihe darueber. */
.lk--3{margin-top:20px}
/* Karte 09 · Mockup Terminbuchung + KI-Vorsortierung (Buehne 406 x 246 wie alle anderen) */
.lk9{position:relative;width:406px;height:246px;overflow:hidden;font-family:'Inter Tight',system-ui,sans-serif;color:#08182C}
.lk9__win{position:absolute;left:16px;top:16px;width:206px;height:214px;background:#fff;border-radius:4px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(10,23,48,.10),0 20px 34px -18px rgba(11,27,43,.30),0 4px 10px -6px rgba(11,27,43,.12)}
.lk9__bar{height:22px;display:flex;align-items:center;gap:4px;padding:0 8px;background:#F7F8FA;border-bottom:1px solid #E7EAEE}
.lk9__bar i{width:5px;height:5px;border-radius:50%;background:#D5DAE1}
.lk9__bar span{margin-left:6px;flex:1;height:12px;border-radius:2px;background:#fff;border:1px solid #E7EAEE;font-size:6.5px;line-height:10px;color:#6B778C;padding:0 5px}
.lk9__body{padding:12px 12px 0}
.lk9__t{display:block;font-size:11.5px;font-weight:600;letter-spacing:-.005em;color:#0A1730}
.lk9__days{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:10px}
.lk9__days span{height:36px;border-radius:3px;border:1px solid #E3E7ED;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:#0A1730;line-height:1.1}
.lk9__days em{font-style:normal;font-size:7.5px;font-weight:500;color:#6B778C;margin-bottom:1px}
.lk9__days .on{background:#0D468A;border-color:#0D468A;color:#fff}
.lk9__days .on em{color:rgba(255,255,255,.75)}
.lk9__slots{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:8px}
.lk9__slots span{height:22px;border-radius:3px;border:1px solid #E3E7ED;display:flex;align-items:center;justify-content:center;font-size:9.5px;font-weight:500;color:#44506A}
.lk9__slots .on{border-color:#0D468A;background:#EEF3F9;color:#0D468A;font-weight:600}
.lk9__btn{display:flex;align-items:center;justify-content:center;height:24px;margin-top:9px;border-radius:3px;background:#0D468A;color:#fff;font-size:9.5px;font-weight:600;letter-spacing:.01em}
.lk9__note{position:absolute;background:#fff;border-radius:4px;
  box-shadow:0 0 0 1px rgba(10,23,48,.08),0 18px 32px -16px rgba(11,27,43,.34),0 3px 8px -4px rgba(11,27,43,.12)}
.lk9__note--cal{left:214px;top:40px;width:178px;display:flex;align-items:center;gap:9px;padding:9px 10px}
.lk9__ico{flex:none;width:24px;height:24px;border-radius:4px;background:#185BED;display:flex;align-items:center;justify-content:center}
.lk9__ico svg{width:14px;height:14px;display:block}
.lk9__note b{display:block;font-size:10.5px;font-weight:600;color:#0A1730;letter-spacing:-.005em}
.lk9__note em{display:block;font-style:normal;font-size:9px;color:#5B667C;margin-top:2px}
.lk9__note--ki{left:200px;top:124px;width:192px;padding:9px 11px 10px}
.lk9__tags{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px}
.lk9__tag{font-size:7.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#185BED;background:#EEF3FE;border-radius:2px;padding:3px 5px}
.lk9__tag--ok{color:#fff;background:#185BED}

/* ==================================================================
   EINHEITLICHER STIL ab #garantie bis #fuerwen (16.09.2026, Melvin: „nicht einheitlich, wirkt zusammengewürfelt")
   Vorbild ist die Erfolgsformel: Karten weiss mit Schatten, Mikrolabels blau in Versalien (11/.14em),
   Titel 500, Listen mit kleinen Haekchen-Kreisen auf #EDF0F4, Bilder als Mockup auf eingerueckter Grafikflaeche.
   Rhythmus: #formel grau -> #garantie weiss -> #fallstudien grau -> #fuerwen weiss.
   (#vertrauen 25.09.2026 aufgeloest, Bewertungen stehen in #fallstudien.)
   Weiss-auf-weiss-Karten bekommen zusaetzlich eine Haarlinie (wie das Nutzen-Band).
   ================================================================== */
:root{--card-shadow:0 1px 2px rgba(10,23,48,.05),0 18px 30px -12px rgba(10,23,48,.16);
  --card-shadow-w:0 0 0 1px rgba(10,23,48,.06),0 1px 2px rgba(10,23,48,.04),0 18px 36px -18px rgba(10,23,48,.18)}

/* ---- Google-Bewertungen ----
   Seit 25.09.2026 stehen sie NICHT mehr in einer eigenen Sektion
   (#vertrauen ist aufgeloest), sondern im grauen Fallstudien-Abschnitt
   unter dem Vorher/Nachher-Fall. Begruendung: es sind Belege wie die
   Faelle darueber, keine eigene Kapitelaussage — getrennt erzeugten sie
   einen zusaetzlichen Weiss-Grau-Wechsel fuer drei Zitate.
   Die Regeln fuer die alte persoenliche Karte (.tr__grid/.tr__txt/
   .tr__img) sind mitentfernt, das Markup gibt es seit 16.09. nicht mehr. */
.tr__stat{margin:72px auto 0;padding-top:0;border-top:0}
.tr__stat b{font-size:26px;font-weight:500;letter-spacing:-.015em}
.tr__stat span{font-size:14px}
.tr__wall{margin-top:36px}
.tr__wall > div{border:0!important;box-shadow:var(--card-shadow-w)!important;padding:26px!important;margin-bottom:20px!important}
@media(max-width:900px){ .tr__stat{margin-top:56px} }

/* ---- #fallstudien: grauer Abschnitt, Faelle als weisse Karten ---- */
.fsx{background:var(--bg-alt)}
.fsx .fs{margin-top:0;padding-top:0;border-top:0}
.fsx .fs__head{margin-bottom:64px}
.fsx .fst{gap:24px}
.fsx .fst__c{background:#fff;box-shadow:var(--card-shadow);padding:8px;gap:0;align-items:stretch;grid-template-columns:1.12fr 1fr}
.fsx .fst__shot{position:relative;display:flex;align-items:center;justify-content:center;padding:36px;
  background:#EDF0F4;border-radius:2px;overflow:hidden;box-shadow:none}
.fsx .fst__shot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(10,23,48,.06)}
.fsx .fst__shot img{border-radius:3px;box-shadow:0 0 0 1px rgba(10,23,48,.08),0 22px 38px -18px rgba(11,27,43,.34)}
.fsx .fst__body{padding:40px 44px 40px 48px;display:flex;flex-direction:column;justify-content:center}
.fsx .fst__name{font-size:26px}
.fsx .fst__lbl{display:block;margin-top:26px;padding:0;background:none;border-radius:0;
  font:600 11px/1 'Inter Tight',system-ui,sans-serif;letter-spacing:.14em;color:var(--blue)}
.fsx .fst__done li{padding:5px 0 5px 30px;color:var(--ink);font-size:15px}
.fsx .fst__done li::before{content:"";left:0;top:7px;width:18px;height:18px;border-radius:50%;
  background:#EDF0F4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23185BED' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/11px 11px no-repeat;box-shadow:inset 0 0 0 1px rgba(10,23,48,.06)}
.fsx .fst__link{align-self:flex-start}
.fsx .vn{margin-top:88px}
.fsx .vn__head{display:block;text-align:center;margin:0 auto 40px;max-width:720px}
.fsx .vn__head .lbl{display:block;margin-bottom:12px}
/* Zwischenheadline, nicht Fliesstext (25.09.2026, Melvin).
   Vorher stand hier 16 px in ink-2 — also Fliesstextstufe, obwohl die Karte
   direkt darunter eine 26-px-Headline traegt. Damit war der Blockkopf kleiner
   als die Ueberschrift, die er einleitet. Jetzt auf der Zwischenstufe: etwas
   ueber der Kartenheadline (26), deutlich unter der Sektions-H2.
   Gewicht 500 und Laufweite -.015em wie .cs__h, damit die beiden als eine
   Familie lesen. balance ist hier zulaessig — es ist eine Headline, kein
   Lede; die Blocksatz-Regel gilt nur fuer Ledes. */
.fsx .vn__intro{font-size:clamp(21px,2.1vw,28px);line-height:1.3;font-weight:500;
  letter-spacing:-.015em;color:var(--ink);text-wrap:balance}
.fsx .vn__c{border:0;background:#fff;box-shadow:var(--card-shadow)}
.fsx .vn__shots{gap:8px;padding:8px 8px 0;border-bottom:0}
.fsx .vn__fig{position:relative;background:#EDF0F4;border-radius:2px;padding:44px 28px 28px;overflow:hidden}
.fsx .vn__fig::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(10,23,48,.06)}
.fsx .vn__fig + .vn__fig{border-left:0}
.fsx .vn__fig figcaption{position:absolute;left:28px;top:18px;padding:0;border:0;background:none;
  font:600 11px/1 'Inter Tight',system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.fsx .vn__fig--nachher figcaption{color:var(--blue)}
.fsx .vn__fig img{border-radius:3px;box-shadow:0 0 0 1px rgba(10,23,48,.08),0 22px 38px -18px rgba(11,27,43,.34)}
.fsx .vn__content{padding:40px 44px 44px}
.fsx .cs__k{letter-spacing:.14em;margin-bottom:14px}
.fsx .cs__h{font-size:26px;letter-spacing:-.015em}
.fsx .cs__p{font-size:15px}
@media(max-width:900px){
  .fsx .fst__c{grid-template-columns:1fr}
  .fsx .fst__shot{padding:20px}
  .fsx .fst__body{padding:26px 22px 28px}
  .fsx .vn__shots{grid-template-columns:1fr}
  .fsx .vn__fig{padding:40px 18px 18px}
  .fsx .vn__fig figcaption{left:18px}
  .fsx .vn__content{padding:26px 22px 30px}
}

/* ---- #fuerwen: weiss, zwei Karten wie die Formel ---- */
#fuerwen .wh{max-width:1264px;gap:20px}
#fuerwen .wh__c,#fuerwen .wh__c--ja{border:0;box-shadow:var(--card-shadow-w);padding:34px 34px 26px}
#fuerwen .wh__k{letter-spacing:.14em;margin-bottom:18px}
#fuerwen .wh li{grid-template-columns:18px 1fr;gap:12px;padding:14px 0}
#fuerwen .wh__i{width:18px;height:18px;border-radius:50%;background:#EDF0F4;color:var(--blue);margin-top:1px;
  box-shadow:inset 0 0 0 1px rgba(10,23,48,.06)}
#fuerwen .wh__i svg{width:11px;height:11px}
#fuerwen .wh__c--nein .wh__i{background:#F1F3F6;color:var(--ink-3)}
#fuerwen .wh b{font-size:16px}
#fuerwen .wh li span{font-size:14.5px}
/* .wh span traf bisher auch das Label (ebenfalls ein span) — deshalb stand „Passt zu Ihnen" grau und zu gross */
#fuerwen .wh .wh__k{grid-column:auto;margin-top:0;font-size:11px;line-height:1;color:var(--blue)}
#fuerwen .wh .wh__c--nein .wh__k{color:var(--ink-3)}
.tr__stat .lbl{display:block;margin-bottom:12px}

/* ---------- Neue Reihenfolge (16.09.2026, Melvin: struktur-vorschlag als neue Hauptversion) ----------
   ... formel -> garantie -> fallstudien (Faelle + Bewertungen) -> fuerwen -> ablauf -> kontakt -> fragen -> gespraech */
#garantie{padding-top:150px!important;padding-bottom:150px!important;background:#fff}
#garantie > .container::before{display:none!important}
/* Bewertungskarten liegen jetzt auf dem grauen Fallstudien-Grund —
   derselbe Schatten wie die Fallkarten daneben, nicht der Weiss-Schatten. */
#fallstudien .tr__wall > div{box-shadow:var(--card-shadow)!important}
#fallstudien.fsx{padding-top:120px}
/* 23.09.2026 — Knopf und Garantiezeile auf eine Blockbreite.
   Vorher: align-items:flex-end, der Knopf also 197 px rechtsbuendig
   ueber einem 330 px breiten Text. Die rechten Kanten stimmten, die
   linken sprangen um 133 px. */
.final__act{display:flex;flex-direction:column;align-items:stretch;gap:14px;width:330px}
.final__act .btn{justify-content:center}
.final__gt{display:flex;align-items:flex-start;gap:9px;margin:0;max-width:330px;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.final__gt i{flex:none;width:20px;height:20px;color:var(--blue);margin-top:-1px}
.final__gt i svg{width:20px;height:20px;display:block}
.final__gt b{font-weight:600;color:var(--ink)}
@media(max-width:900px){#garantie{padding-top:96px!important;padding-bottom:96px!important}#fallstudien.fsx{padding-top:80px}}
@media(max-width:760px){.final__act{width:auto}}

/* ---------- 03 · Bausteine: Stack nach der Erfolgsformel (16.09.2026, Melvin freigegeben) ----------
   01 Website · 02 Expertenseite · 03 Von ChatGPT empfohlen · 04 Google-Eintrag · 05 Google Jobs · 06 Google Ads ·
   07 Rechner · 08 Automatisierung mit KI · 09 Ergebnis in Zahlen. „Ein Ansprechpartner" aus dem Raster genommen. */
/* Karte 03 · Von ChatGPT empfohlen — neutraler KI-Chat, keine fremde Marke */
.lkai{position:relative;width:406px;height:246px;overflow:hidden;font-family:'Inter Tight',system-ui,sans-serif;color:#0A1730}
.lkai__win{position:absolute;left:34px;top:16px;width:338px;height:214px;background:#fff;border-radius:6px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(10,23,48,.10),0 22px 38px -18px rgba(11,27,43,.32),0 4px 10px -6px rgba(11,27,43,.12)}
.lkai__top{height:30px;display:flex;align-items:center;gap:7px;padding:0 12px;border-bottom:1px solid #EEF0F3}
.lkai__spark{width:16px;height:16px;border-radius:4px;background:#0A1730;display:flex;align-items:center;justify-content:center}
.lkai__spark svg{width:11px;height:11px;fill:#fff}
.lkai__name{font-size:10px;font-weight:600;color:#44506A}
.lkai__q{margin:12px 12px 0 auto;max-width:228px;margin-left:auto;margin-right:12px;padding:8px 11px;border-radius:12px 12px 3px 12px;background:#F1F3F6;
  font-size:10.5px;line-height:1.4;color:#0A1730;width:fit-content}
.lkai__a{display:flex;gap:8px;padding:12px 12px 0}
.lkai__av{flex:none;width:20px;height:20px;border-radius:50%;background:#0A1730;display:flex;align-items:center;justify-content:center;margin-top:1px}
.lkai__av svg{width:11px;height:11px;fill:#fff}
.lkai__txt{flex:1;min-width:0}
.lkai__txt p{margin:2px 0 7px;font-size:10.5px;line-height:1.4;color:#0A1730}
.lkai__card{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;border:1px solid #E3E7ED;background:#fff}
.lkai__logo{flex:none;width:26px;height:26px;border-radius:6px;background:#185BED;position:relative}
.lkai__logo::after{content:"";position:absolute;left:8px;top:7px;width:10px;height:12px;border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;background:#fff}
.lkai__card b{display:block;font-size:11px;font-weight:600;color:#0A1730}
.lkai__card em{display:block;font-style:normal;font-size:9px;color:#6B778C;margin-top:1px}
.lkai__stars{margin-left:auto;font-size:9px;letter-spacing:1px;color:#F5B400}
.lkai__dim{display:flex;flex-direction:column;gap:5px;margin-top:9px!important}
.lkai__dim i{display:block;height:5px;border-radius:3px;background:#EDF0F4}
.lkai__dim i:first-child{width:92%}.lkai__dim i:last-child{width:64%}

/* ---------- 03 · Bausteine: Textkonzept (16.09.2026, Melvin freigegeben; Copy-Feinschliff folgt) ----------
   Blauer Name klein · Nutzen als Headline · ein Satz zur Funktion · kein Nutzen-Block. */
.lk__c--kurz .lk__lbl{display:block;margin:0 48px 14px 0;font:600 11px/1 'Inter Tight',system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.lk__c--kurz .lk__no{line-height:1}
.lk__c--kurz .lk__h{margin-right:0;font-size:22px;line-height:1.28;text-wrap:balance}
.lk__c--kurz .lk__do{margin:12px 0 28px;font-size:15px;line-height:1.55;max-width:none}


/* Hero am Handy: Die Grafikbuehne (520 px + Versatz) hat die einzige Rasterspalte auf 554 px gedehnt,
   dadurch liefen Label, Unterzeile und Vertrauenszeile rechts aus dem Bild (gemessen bei 390 px, 17.09.2026). */
@media(max-width:1180px){
  .hero--v2 .hero__inner{grid-template-columns:minmax(0,1fr)}
  .hero--v2 .hero__viz{min-width:0}
}


/* 17.09.2026 — Sektionskopf "Lage": Lede groesser, Einleitungszeile leiser */
/* Lede als eigene zweite Ebene: laeuft breit aus (kein max-width-Korsett),
   text-wrap:pretty statt balance — balance zieht beide Zeilen auf gleiche
   Laenge und erzeugt die schmale zentrierte Blockform. Der <br> im Markup
   setzt einen Satz pro Zeile; bis 21px passt Satz 1 auf eine Zeile. */
#lage .pm-lede{font-size:21px;line-height:1.45;letter-spacing:-.008em;
  margin-top:22px;max-width:none;text-wrap:pretty}
/* Die Bruecke ist eine Ueberleitung zum Raster — sie muss naeher an den Karten
   stehen als am Kopfblock, sonst schwebt sie zwischen beidem. */
#lage .pm-br{font-size:17px;font-weight:500;color:var(--ink-2);margin-top:56px}
#lage .pm-grid{margin-top:22px}


/* 17.09.2026 — Kundenportal im Header (Fassung P3: Text mit Trennstrich) */
.hdr__portal{display:inline-flex;align-items:center;gap:7px;flex:none;
  margin-left:22px;padding:0 0 0 22px;
  font-size:13.5px;font-weight:500;letter-spacing:.01em;
  color:rgba(255,255,255,.80);text-decoration:none;white-space:nowrap;
  border-left:1px solid rgba(255,255,255,.26);
  text-shadow:0 1px 2px rgba(3,10,26,.55),0 0 12px rgba(3,10,26,.45);
  transition:color .25s var(--ease)}
.hdr__portal svg{width:14px;height:14px;flex:none;filter:drop-shadow(0 1px 2px rgba(3,10,26,.5))}
.hdr__portal:hover{color:#fff}
.hdr__cta{margin-left:22px}
.hdr.light .hdr__portal{color:var(--ink-3);border-left-color:rgba(10,23,48,.20);text-shadow:none}
.hdr.light .hdr__portal svg{filter:none}
.hdr.light .hdr__portal:hover{color:var(--ink)}
@media(max-width:900px){.hdr__portal{display:none}}


/* 18.09.2026 — Markenname innerhalb von Großbuchstaben-Eyebrows
   ".lbl" & Co. stehen auf text-transform:uppercase, das killt das
   interne große M von "WebMount". Konvention ab jetzt: den Marken-
   namen in ein <span class="brand"> setzen, sobald er in einer
   Eyebrow/einem Label auftaucht — der Rest bleibt normal groß. */
.brand{text-transform:none;letter-spacing:normal;margin-right:-.18em}
.lbl__txt{white-space:nowrap}


/* 18.09.2026 — System-Sektion H2: Kernaussage vs. Anwendung staffeln (wie im Hero) */
.h2--stufe{display:block}
.h2--stufe .h2-lead{display:block}
.h2-lead .is-struck{color:var(--ink-3);text-decoration:line-through;text-decoration-color:var(--ink-3);text-decoration-thickness:2px}
.h2-lead strong{position:relative;display:inline-block}
.h2-lead strong::after{
  content:'';position:absolute;left:0;right:0;bottom:-.08em;height:.09em;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cpath d='M3,9 C80,3 220,3 297,8' stroke='%23185BED' stroke-width='6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:100% 100%;pointer-events:none;
}
/* Groesse und Gewicht wie #lage .pm-lede (Melvin, 26.09.2026): vorher
   .62em/500, also 24,8 px und halbfett — die einzige Subheadline der
   Seite mit eigenem Mass. Jetzt 21 px/400 wie die Pain-Sektion.
   Absolut statt em, weil pm-lede ebenfalls absolut ist; dadurch muss
   .h2-sub am Handy in die 16,5-px-Regel in mobil.css, sonst waere sie
   dort groesser als die H2 selbst (25 px). */
.h2--stufe .h2-sub{display:block;margin-top:.24em;font-size:21px;line-height:1.26;font-weight:400;letter-spacing:-.006em;color:var(--ink-2)}

/* ---------- Pain-Karten 2x2, Grafik oben (26.09.2026, Melvin) — nur Desktop ----------
   Lesefluss wie bei den vier schmalen Karten: Bild, Label, Headline, Text. Die breitere
   Karte bekommt eine hoehere Grafikflaeche, die Grafik selbst waechst mit (zoom), damit
   sie die Flaeche traegt statt darin zu schwimmen. Textraender etwas grosszuegiger. */
@media (min-width:1041px){
  #lage .pm-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:30px}
  #lage .pm-card{padding:8px 8px 32px}
  #lage .pm-graphic,#lage .pm-graphic.pg{height:244px;margin:0 0 28px}
  /* Buehne wie in der schmalen Karte (300 px), gleichmaessig vergroessert und mittig —
     die Grafiken rechnen teils in Containerbreite und wuerden sonst in die Breite laufen */
  #lage .pm-graphic,#lage .pm-graphic.pg{display:flex;justify-content:center;align-items:center}
  #lage .pm-graphic > *{flex:none;width:330px;zoom:1.15}
  #lage .pm-lbl,#lage .pm-t,#lage .pm-p{margin-left:26px;margin-right:26px}
}

/* ---------- Rechnung: Etikett auf grauer Leiste (26.09.2026, Test auf 4811) ----------
   Bauart netfame: die Phasenzeile liegt auf einer grauen Leiste, die Marke in einem
   weissen Feld darin. Gibt der Karte eine zweite Ebene und fuehrt den Blick auf
   "Phase 1 + Phase 2 = Ergebnis". WebMount-Fassung: 2px-Kanten, Grau der
   Grafikflaechen (#F2F4F7), keine Farbcodierung je Phase. Das Feld ersetzt den
   Haarstrich als Trenner. */
.fml__lbl{align-items:center;gap:12px;margin:-16px -16px 24px;padding:5px 14px 5px 5px;
  background:#F2F4F7;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(10,23,48,.04)}
.fml__no{padding:5px 10px 4px;background:#fff;border-radius:2px;
  box-shadow:0 0 0 1px rgba(10,23,48,.07),0 1px 2px rgba(10,23,48,.06)}
.fml__tag{padding-left:0}
.fml__tag::before{display:none}
.fml__c--res .fml__lbl{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.fml__c--res .fml__no{color:var(--blue);box-shadow:none}
@media (max-width:1100px){.fml__lbl{margin:-10px -10px 20px}}

/* Regio-System: Headline „Sie brauchen nicht mehr Anfragen, sondern die richtigen." einzeilig am Desktop (26.09.2026) */
@media (min-width:1041px){#system .h2.h2--stufe{max-width:1100px}}

/* ---------- Footer neu (26.09.2026, Melvin; Bauart adventure-marketing.com, WebMount-Stil) ----------
   Dunkle ruhige Flaeche, Logo mit gesperrter Unterzeile, Firma, Kontakt; unten Copyright
   links, Rechtliches rechts. Rechts unten das Bergzeichen gross und blass als Wasserzeichen,
   nach unten auslaufend und vom Rand angeschnitten. Keine Adresse, keine AGB. */
footer.ftn{position:relative;overflow:hidden;background:radial-gradient(70% 110% at 80% 115%,rgba(24,91,237,.2) 0%,rgba(24,91,237,.12) 25%,rgba(24,91,237,.06) 48%,rgba(24,91,237,.02) 70%,rgba(24,91,237,0) 90%),#071A3E;color:rgba(255,255,255,.86);padding:112px 0 44px}
.ftn .container{position:relative;z-index:1}
.ftn__mark{position:absolute;z-index:0;pointer-events:none;user-select:none;left:47%;bottom:-.28em;
  font:600 clamp(170px,23vw,400px)/1 'Inter Tight',system-ui,sans-serif;letter-spacing:-.045em;white-space:nowrap;
  color:transparent;background:linear-gradient(180deg,rgba(168,194,255,.46) 0%,rgba(92,142,255,.34) 22%,rgba(47,110,245,.2) 48%,rgba(24,91,237,.05) 72%,rgba(24,91,237,0) 86%);
  -webkit-background-clip:text;background-clip:text;filter:blur(1px)}
.ftn__brand{display:inline-flex;flex-direction:column;align-items:center;gap:14px}
.ftn__logo{display:inline-flex;align-items:center;gap:12px}
.ftn__logo img{height:40px;width:auto;display:block}
.ftn__logo b{font:600 34px/1 'Inter Tight',system-ui,sans-serif;letter-spacing:-.02em;color:#fff}
.ftn__sub{font:500 10.5px/1 'Inter Tight',system-ui,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.72);padding-left:.24em}
.ftn__firma{margin:40px 0 0;font:600 16px/1.5 'Inter Tight',system-ui,sans-serif;color:#fff}
.ftn__kontakt{margin-top:26px;display:flex;flex-direction:column;gap:3px;font:400 16px/1.5 'Inter Tight',system-ui,sans-serif}
.ftn__kontakt span{color:rgba(255,255,255,.86);margin-bottom:4px}
.ftn a{color:rgba(255,255,255,.86);text-decoration:none;transition:color .25s cubic-bezier(.22,.8,.24,1)}
.ftn a:hover{color:#fff}
.ftn__legal{margin-top:132px;display:flex;justify-content:space-between;align-items:center;gap:20px;
  font:400 15px/1.5 'Inter Tight',system-ui,sans-serif;color:rgba(255,255,255,.78)}
.ftn__legal nav{display:flex;gap:30px}
@media (max-width:760px){
  footer.ftn{padding:76px 0 36px}
  .ftn__logo img{height:34px}.ftn__logo b{font-size:29px}
  .ftn__sub{font-size:9.5px;letter-spacing:.2em}
  .ftn__legal{margin-top:84px;flex-direction:column-reverse;align-items:flex-start;gap:14px;font-size:14px}
  .ftn__legal nav{gap:24px}
  .ftn__mark{left:34%;font-size:42vw}
}

/* Footer-Schriftzug in gebuerstetem Stahl (26.09.2026, Melvin: Variante B) — Stahlverlauf wie
   der Kontaktknopf, scharf, nach unten auslaufend. Ersetzt Blauverlauf und Lichtschein. */
footer.ftn{background:#071A3E}
.ftn .ftn__mark{filter:none;opacity:.2;
  background:linear-gradient(180deg,#F1F3F5 0%,#C9CFD6 38%,#8E98A3 52%,#B9C1C9 70%,#6E7883 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-mask-image:linear-gradient(180deg,#000 20%,transparent 92%);mask-image:linear-gradient(180deg,#000 20%,transparent 92%)}

/* 28.09.2026 Fallstudien-Karte: Screenshot fuellt die linke Haelfte buendig statt klein im grauen
   Kasten zu schwimmen (wurde bei schmaleren Fenstern sichtbar, weil der Text hoeher wird als das Bild).
   Keine Kreise an den Haken (Designsystem: Kreise nur bei Avataren). */
@media(min-width:901px){
  .fsx .fst__c{padding:0;overflow:hidden;grid-template-columns:1.3fr 1fr}
  .fsx .fst__shot{display:block;padding:0;border-radius:0;min-height:100%;background:#EDF0F4}
  .fsx .fst__shot::after{border-radius:0;box-shadow:inset -1px 0 0 rgba(10,23,48,.08)}
  .fsx .fst__shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left top;
    border-radius:0;box-shadow:none}
}
.fsx .fst__done li{padding-left:26px}
.fsx .fst__done li::before{width:14px;height:14px;top:9px;border-radius:0;background-color:transparent;background-size:14px 14px;box-shadow:none}

/* 01.10.2026 (Version o): wieder drei Meldungen wie im alten Hero, Positionen aus style.css.
   Unterzeile ohne Breitenkorsett, sie ist drei Saetze lang. */
html #start.hero--v2 .hero__sub{max-width:none}

/* 28.09.2026: Ohne das Pain-Raster ist "Fakt ist…" nur noch Kopf und Lede. Kein eigener unterer
   Abstand mehr, sonst stehen zwei Sektionskoepfe mit ~300 px Leere untereinander. */
html #lage.sec{padding-bottom:0}

/* 01.10.2026: Kopf mit vier Links und "Erstgespraech buchen" ist zwischen 901 und 1059 px zu breit.
   Dort entfaellt das Kundenlogin im Kopf (es gibt keinen Platz, im Menue erscheint es erst ab 900 px abwaerts). */
@media (min-width:901px) and (max-width:1059px){
  .hdr__portal:not(.hdr__portal--m){display:none}
}