/* DeclutterData · Website-Stylesheet
   Quelle der Werte: Branding-Kit v8 (branding-kit/teile/p1-head.html, p1b-v4.html).
   Neue Bausteine stehen am Ende unter „Neu für die Website“. Beschreibung: DESIGN.md */

@font-face{font-family:Raleway;src:url(/assets/fonts/raleway-var-latin.woff2) format("woff2");font-weight:500 800;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Sans";src:url(/assets/fonts/notosans-var-latin.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Sans";src:url(/assets/fonts/notosans-italic-var-latin.woff2) format("woff2");font-weight:500 700;font-style:italic;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --surface:#F7F7F7; --surface-accent:#E3EBCA;
  --heading:#2B2D32; --body:#666666; --muted:#5F646B; --hairline:#DCDDDF;
  --primary:#8DB600; --primary-active:#82A400; --secondary:#366483; --secondary-active:#2B5069;
  --on-primary:#2B2D32; --on-secondary:#F7F7F7; --marine:#1F4055; /* Kit: #22445A, minimal dunkler für 4,5:1 auf Grün */
  --blue-text:#366483; --kw-green:#8DB600; --name:#8DB600;
  --pat-green:#8DB600; --pat-blue:#366483; --pat-op:1;
  --shadow-soft:rgba(0,0,0,.08); --shadow-btn:rgba(0,0,0,.3);
  --sig-ink:#2B2D32;
  --site-bg:#E3EBCA; --box:#F7F7F7; --site-alt:#F7F7F7;
  --head-bg:rgba(247,247,247,.94);
  --font-heading:Raleway,Helvetica,Arial,sans-serif;
  --font-body:"Noto Sans",Helvetica,Arial,sans-serif;
  --font-mono:Consolas,"Courier New",monospace;
  --logo-hell:block; --logo-dunkel:none;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --surface:#121212; --surface-accent:#2B2D32;
  --heading:#E4E5E7; --body:#C9CBD0; --muted:#A9ADB5; --hairline:#3A3D43;
  --blue-text:#8DB6D9; --pat-blue:#8DB6D9; --pat-op:.55;
  --shadow-soft:rgba(0,0,0,.45); --shadow-btn:rgba(0,0,0,.6);
  --sig-ink:#E4E5E7; --site-bg:#121212; --box:#2B2D32; --site-alt:#1A1C1F;
  --head-bg:rgba(26,28,31,.94); --logo-hell:none; --logo-dunkel:block; color-scheme:dark;
}}
:root[data-theme="dark"]{
  --surface:#121212; --surface-accent:#2B2D32;
  --heading:#E4E5E7; --body:#C9CBD0; --muted:#A9ADB5; --hairline:#3A3D43;
  --blue-text:#8DB6D9; --pat-blue:#8DB6D9; --pat-op:.55;
  --shadow-soft:rgba(0,0,0,.45); --shadow-btn:rgba(0,0,0,.6);
  --sig-ink:#E4E5E7; --site-bg:#121212; --box:#2B2D32; --site-alt:#1A1C1F;
  --head-bg:rgba(26,28,31,.94); --logo-hell:none; --logo-dunkel:block; color-scheme:dark;
}
/* ---------- Grundlagen ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--site-bg);color:var(--body);font-family:var(--font-body);font-weight:500;font-size:15px;line-height:1.7;overflow-x:clip}
h1,h2,h3,h4{font-family:var(--font-heading);color:var(--heading);margin:0;line-height:1.2}
h1,h2{text-wrap:balance}
p{margin:0}
img,svg{max-width:100%}
a{color:var(--blue-text)}
::selection{background:var(--primary);color:var(--on-primary)}
:focus-visible{outline:3px solid var(--blue-text);outline-offset:2px}
html{scrollbar-color:var(--secondary) var(--site-bg)}
.kb{color:var(--blue-text)} .kg{color:var(--kw-green)}
.ic{width:1.6em;height:1.6em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--secondary);color:var(--on-secondary);padding:10px 16px;border-radius:8px;font-weight:700;text-decoration:none}
.skip:focus-visible{top:12px}
.sig{display:block;background:var(--sig-ink);-webkit-mask:url(/assets/img/unterschrift.webp) center/contain no-repeat;mask:url(/assets/img/unterschrift.webp) center/contain no-repeat;aspect-ratio:312/164}
.patsvg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:var(--pat-op);z-index:-1}
.patbg{position:relative;isolation:isolate}

/* ---------- Abschnitte ---------- */
.in{max-width:1120px;margin-inline:auto;padding-inline:clamp(16px,4vw,48px)}
.sec{padding-block:56px 0;background:var(--site-bg)}
.sec.alt{background:var(--site-alt)}
.sec > .in{padding-bottom:48px}
.wv{display:block;width:100%;height:clamp(40px,6vw,80px);margin-bottom:-2px}
.wv.big{height:clamp(50px,8vw,100px)}
.sh2{font-size:clamp(28px,3.6vw,40px);letter-spacing:1.5px;margin-block:6px 10px}
.kick5{font:700 15px var(--font-heading);letter-spacing:2px;text-transform:uppercase;color:var(--blue-text)}
.sec-lead{font-size:16px;max-width:640px}

/* Buttons (V1b „orig“) */
.xb{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;gap:10px;font:700 17px/1.6 var(--font-body);text-decoration:none;cursor:pointer;border-radius:5px;padding:12px 30px;color:var(--on-secondary);background:var(--secondary);border:2px solid var(--primary);box-shadow:6px 6px 18px var(--shadow-btn);transition:background-color .35s ease,color .35s ease,border-color .35s ease,box-shadow .35s ease,transform .2s ease;white-space:nowrap}
.xb .ic{width:22px;height:22px}
.xb:active{transform:translate(2px,2px);box-shadow:none}
.xb.orig .ic{width:0;opacity:0;transition:width .35s ease,opacity .35s ease}
.xb.orig:hover,.xb.orig:focus-visible{background:var(--primary);border-color:var(--secondary);color:var(--on-primary)}
.xb.orig:hover .ic,.xb.orig:focus-visible .ic{width:22px;opacity:1}
.xb.ghost{background:transparent;color:var(--blue-text);border-color:var(--blue-text);box-shadow:none}
.xb.ghost:hover,.xb.ghost:focus-visible{background:var(--secondary);color:var(--on-secondary)}
@media (prefers-reduced-motion:reduce){.xb,.xb::before,.xb .ic{transition:none!important}}
.tlink{font-weight:600;color:var(--blue-text);text-decoration:underline;text-underline-offset:.2em}
.tlink:hover{text-decoration-thickness:2px}

/* ---------- Kopf ---------- */
.s-head{position:fixed;top:0;left:0;right:0;z-index:40;transition:background-color .3s ease,box-shadow .3s ease}
.s-head .bar{display:flex;align-items:center;gap:20px;padding:30px clamp(16px,4vw,48px) 6px;max-width:1220px;margin-inline:auto;transition:padding .3s ease}
.s-head .home{display:block;flex:none;width:clamp(200px,22vw,290px);transition:width .3s ease;line-height:0}
.s-head .home img{width:100%;height:auto}
.logo-hell{display:var(--logo-hell)} .logo-dunkel{display:var(--logo-dunkel)}
.navbar{margin-inline-start:auto;display:flex;align-items:center;gap:4px;background:var(--secondary);border:2px solid var(--primary);border-radius:999px;padding:6px 6px 6px 18px;box-shadow:0 8px 24px var(--shadow-soft)}
.navbar a{font:600 15px var(--font-heading);color:var(--on-secondary);letter-spacing:.4px;padding:6px 11px;text-decoration:none;border-radius:999px;white-space:nowrap}
@media (max-width:1200px){.navbar a{font-size:14px;padding:6px 8px;letter-spacing:.2px}.navbar{padding-left:10px;gap:2px}.s-head .bar{gap:14px}}
.navbar a:hover,.navbar a[aria-current="page"]{background:rgba(0,0,0,.18)}
.navbar a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--primary)}
.navbar a.cta{background:var(--primary);color:var(--on-primary);font-weight:700;padding:7px 16px}
.navbar a.cta:hover{background:var(--primary-active)}
.hbtn{flex:none;width:44px;height:44px;border-radius:50%;background:var(--secondary);border:2px solid var(--primary);color:var(--on-secondary);display:grid;place-items:center;cursor:pointer;padding:0}
.hbtn:hover{background:var(--secondary-active)}
.hbtn .ic{width:22px;height:22px}
.theme .moon{display:var(--logo-hell)} .theme .sun{display:var(--logo-dunkel)}
.burger{display:none;width:48px;height:48px}
.mnav{display:none}
@media (max-width:1060px){
  .navbar{display:none}
  .burger{display:grid;margin-inline-start:auto}
  .s-head .bar{gap:12px;padding-top:18px}
  .mnav{position:absolute;left:12px;right:12px;top:100%;margin-top:8px;background:var(--secondary);border:2px solid var(--primary);border-radius:22px;padding:10px;box-shadow:0 18px 40px rgba(0,0,0,.25);display:grid;gap:2px}
  .mnav[hidden]{display:none}
  .mnav a{font:600 17px var(--font-heading);color:var(--on-secondary);text-decoration:none;padding:12px 16px;border-radius:14px}
  .mnav a:hover,.mnav a[aria-current="page"]{background:rgba(0,0,0,.18)}
  .mnav a.cta{background:var(--primary);color:var(--on-primary);font-weight:700;text-align:center;margin-top:6px}
}
@media (max-width:420px){.s-head .home{width:min(200px,52vw)}}

/* Beim Scrollen: Kopf bekommt Fläche und wird schmaler */
.s-head.scrolled{background:var(--site-alt);box-shadow:0 6px 20px var(--shadow-soft)}
.s-head.scrolled .bar{padding-block:8px}
.s-head.scrolled .home{width:clamp(170px,17vw,220px)}
@media (prefers-reduced-motion:reduce){.s-head,.s-head .bar,.s-head .home{transition:none}}

/* Nach oben */
.totop{position:fixed;right:clamp(14px,3vw,28px);bottom:clamp(14px,3vw,28px);z-index:30;width:52px;height:52px;border-radius:50%;background:var(--secondary);border:0;color:var(--on-secondary);display:grid;place-items:center;cursor:pointer;box-shadow:4px 4px 14px var(--shadow-btn);opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .3s ease,transform .3s ease,background-color .2s;padding:0}
.totop.on{opacity:1;transform:none;pointer-events:auto}
.totop:hover{background:var(--secondary-active)}
.totop .ic{width:24px;height:24px;transform:rotate(-90deg)}
.totop svg.ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);pointer-events:none}
.totop .ring circle{fill:none;stroke-width:3}
.totop .ring .track{stroke:var(--primary);opacity:.35}
.totop .ring .bar{stroke:var(--primary);stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--p,0)*100);stroke-linecap:round}
@media (prefers-reduced-motion:reduce){.totop{transition:none}}

/* ---------- Hero Startseite ---------- */
.s-hero .in{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,56px);align-items:center;padding-block:22px 54px}
@media (max-width:860px){.s-hero .in{grid-template-columns:1fr}}
.hello{display:inline-flex;align-items:center;gap:12px;background:var(--primary);color:var(--on-primary);border-radius:999px;padding:5px 20px 5px 5px;font:700 16px var(--font-heading)}
.hello .wave-hand{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--surface);font-size:24px;line-height:1;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.hello .wave-hand > span{display:inline-block;transform-origin:70% 80%;animation:wavehand 3.2s ease-in-out infinite}
.hello.aus .wave-hand > span{animation-play-state:paused}
@keyframes wavehand{0%,60%,100%{transform:rotate(0)}6%,18%{transform:rotate(16deg)}12%,24%{transform:rotate(-8deg)}30%{transform:rotate(10deg)}38%{transform:rotate(0)}}
@media (prefers-reduced-motion:reduce){.hello .wave-hand > span{animation:none}}
.h1x{font-size:clamp(34px,4vw,54px);letter-spacing:1.5px;line-height:1.12;margin-block:14px 8px}
.h1x span.l{display:block}
@media (min-width:861px){.h1x span.l{white-space:nowrap}}
.h1x .b1{color:var(--blue-text)}
.typed{font:700 clamp(17px,1.9vw,22px)/1.4 var(--font-body);color:var(--heading);min-height:2.8em;margin-bottom:4px;position:relative;will-change:transform;background:var(--site-alt);border-radius:6px}
.typed .dd{color:var(--kw-green)}
.typed .w{color:var(--blue-text)}
.typed .caret{display:inline-block;width:2px;height:1.05em;background:var(--blue-text);margin-left:2px;vertical-align:-.15em;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.typed .caret{animation:none}}
.sub{font-size:17px;font-weight:600;line-height:1.75;color:var(--body);max-width:36em}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:26px}
.hph{position:relative;width:min(100%,470px);justify-self:end;margin-right:-8px}
.hph img.pf{width:100%;height:auto;display:block}
.hph img.ms{position:absolute;left:-7%;bottom:-3%;width:40%;height:auto;filter:drop-shadow(0 6px 14px rgba(0,0,0,.18))}
@media (max-width:860px){.hph{justify-self:center;margin-right:0;width:min(100%,340px)}}

/* ---------- Leistungskarten ---------- */
.cards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px;margin-top:26px}
.cards > .svc{grid-column:span 2}
.cards > .svc:nth-child(4),.cards > .svc:nth-child(5){grid-column:span 3}
@media (max-width:980px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.cards > .svc,.cards > .svc:nth-child(4){grid-column:span 1}.cards > .svc:nth-child(5){grid-column:1/-1}}
@media (max-width:600px){.cards{grid-template-columns:1fr}.cards > .svc:nth-child(5){grid-column:auto}}
.svc{--c:var(--primary);--on:var(--on-primary);position:relative;overflow:hidden;isolation:isolate;display:grid;gap:10px;align-content:start;min-height:220px;padding:26px 24px 24px;border-radius:14px;background:var(--box);color:var(--body);text-decoration:none;box-shadow:0 11px 37px var(--shadow-soft);transition:transform .4s ease,box-shadow .4s ease}
.svc.blue{--c:var(--secondary);--on:var(--on-secondary)}
.svc::before{content:"";position:absolute;z-index:-1;top:-34px;right:-34px;width:84px;height:84px;border-radius:50%;background:var(--c);transform:scale(1);transition:transform .5s cubic-bezier(.4,0,.6,1)}
.svc .arr{position:absolute;top:12px;right:14px;width:22px;height:22px;color:var(--on);stroke-width:2.4}
.svc .ibox{width:62px;height:62px;border-radius:12px;display:grid;place-items:center;background:var(--c);color:var(--on);transition:background-color .35s ease,color .35s ease,box-shadow .35s ease}
.svc .ibox .ic{width:32px;height:32px}
.svc h3{font-size:22px;letter-spacing:.4px;margin-top:8px;overflow-wrap:break-word;transition:color .3s ease}
.svc p{font-size:15px;line-height:1.55;transition:color .3s ease}
.svc:hover,.svc:focus-visible{transform:translateY(-5px);box-shadow:0 14px 34px rgba(0,0,0,.16)}
.svc:hover::before,.svc:focus-visible::before{transform:scale(18);transition:transform .75s ease}
.svc:hover .ibox,.svc:focus-visible .ibox{background:var(--surface);color:var(--c);box-shadow:0 6px 16px rgba(0,0,0,.18)}
.svc:hover h3,.svc:hover p,.svc:focus-visible h3,.svc:focus-visible p{color:var(--on)}
@media (prefers-reduced-motion:reduce){.svc,.svc::before,.svc *{transition:none!important}.svc:hover,.svc:focus-visible{transform:none}}

/* ---------- Portfolio ---------- */
.port{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;margin-top:26px}
.pcard{display:grid;border-radius:14px;overflow:hidden;background:var(--box);text-decoration:none;color:var(--body);transition:transform .35s ease,box-shadow .35s ease}
.pcard:hover,.pcard:focus-visible{transform:translateY(-5px);box-shadow:0 3px 15px 5px rgba(0,0,0,.13)}
.pcard .shot{aspect-ratio:16/10;margin:12px 12px 0;border-radius:10px;background:var(--site-bg);position:relative;overflow:hidden}
.pcard .shot svg{position:absolute;inset:0;width:100%;height:100%}
.pcard .meta{padding:14px 18px 18px;display:grid;gap:6px;align-content:start}
.pcard b{font:700 18px var(--font-heading);color:var(--heading)}
.tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
/* Etikett: Höhe fest, Schrift optisch mittig (Versalhöhe), Laufweite rechts ausgeglichen */
.tag{display:inline-flex;align-items:center;justify-content:center;font:700 11px/1 var(--font-heading);letter-spacing:1.2px;text-transform:uppercase;white-space:nowrap;border-radius:999px;padding:6px 8.8px 5px 10px;vertical-align:middle}
@supports (text-box:trim-both cap alphabetic){.tag{text-box:trim-both cap alphabetic;padding:6px 8.8px 6px 10px}}
.tag.g{background:var(--primary);color:var(--on-primary)} .tag.b{background:var(--secondary);color:var(--on-secondary)}
@media (prefers-reduced-motion:reduce){.pcard{transition:none}.pcard:hover{transform:none}}

/* ---------- CTA-Banner ---------- */
.ctab{position:relative;background:linear-gradient(115deg,#8DB600 0%,#8DB600 55%,#9CC313 100%);color:#2B2D32}
.ctab .kq{display:block;font:700 clamp(17px,1.9vw,23px)/1.3 var(--font-heading);letter-spacing:1.5px;color:var(--marine)}
.ctab h2,.ctab h3{font:700 clamp(26px,3.4vw,44px)/1.2 var(--font-heading);letter-spacing:1px;color:#2B2D32;margin-top:6px}
.ctab .m{color:var(--marine)}
.ctab p{font:600 16.5px/1.7 var(--font-body);color:#2B2D32}
.ctab p b{color:var(--marine)}
.ctab .xb.orig{box-shadow:6px 6px 18px rgba(0,0,0,.25)}
.ctab .xb.orig:hover,.ctab .xb.orig:focus-visible{background:#F7F7F7;color:#366483;border-color:#366483}
.ctab.a{border:6px solid var(--secondary);border-radius:44px;text-align:center;padding:clamp(26px,4vw,46px) clamp(18px,4vw,48px)}
.ctab.a p{max-width:640px;margin:14px auto 24px}
.ctab.b{border-radius:16px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;padding:clamp(24px,4vw,50px) clamp(22px,4vw,56px);box-shadow:0 10px 30px rgba(0,0,0,.12);margin-top:44px}

/* ---------- Ablauf ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-top:28px}
.step{background:var(--box);border-radius:14px;padding:22px;display:grid;gap:8px;align-content:start;box-shadow:0 11px 37px var(--shadow-soft)}
.step .n{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font:800 18px var(--font-heading)}
.step:nth-child(odd) .n{background:var(--primary);color:var(--on-primary)} .step:nth-child(even) .n{background:var(--secondary);color:var(--on-secondary)}
.step b{font:700 19px var(--font-heading);color:var(--heading)}
.step p{font-size:14.5px;line-height:1.55}
.proc{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,48px);align-items:center;margin-top:22px}
@media (max-width:860px){.proc{grid-template-columns:1fr}}
.proc .steps{grid-template-columns:1fr 1fr;margin-top:0}
@media (max-width:480px){.proc .steps{grid-template-columns:1fr}}
.tidywrap{display:grid;gap:10px;justify-items:center}
.tidy{position:relative;width:100%;max-width:520px;aspect-ratio:1.35;font-size:clamp(14px,2.2vw,20px)}
.tidy .a{position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);transform:translate(-50%,-50%) rotate(calc(var(--r)*1deg));opacity:var(--o,1);
  transition:left 1.8s cubic-bezier(.65,0,.3,1) var(--d),top 1.8s cubic-bezier(.65,0,.3,1) var(--d),transform 1.8s cubic-bezier(.65,0,.3,1) var(--d),opacity .7s ease calc(var(--d) + 1.4s),background-color .6s ease calc(var(--d) + 1.5s)}
.tidy.mess .a{transition:left 1.6s cubic-bezier(.45,0,.3,1) var(--md),top 1.6s cubic-bezier(.45,0,.3,1) var(--md),transform 1.6s cubic-bezier(.45,0,.3,1) var(--md),opacity .6s ease var(--md),background-color .5s ease var(--md)}
.tidy.mess .tsp{transform:scale(0);transition:transform .4s ease}
.tidy .cap{width:var(--w);height:var(--h);border-radius:999px;border:.14em solid var(--c);background-color:var(--c)}
.tidy.chaos .cap{background-color:transparent}
.tidy .bit{font:700 1em/1 var(--font-mono);color:var(--c)}
.tidy .dot{width:.42em;height:.42em;border-radius:50%;background:var(--c)}
.tidy .base{position:absolute;left:6%;right:4%;top:88.5%;height:.12em;border-radius:9px;background:var(--hairline)}
.tidy .sweep{position:absolute;top:-6%;bottom:-6%;width:16%;left:-30%;border-radius:999px;background:var(--primary);opacity:0;transform:skewX(-14deg)}
.tidy.run .sweep{animation:sweep 4.2s linear forwards}
@keyframes sweep{0%{left:-25%;opacity:0}6%{opacity:.16}90%{opacity:.16}100%{left:110%;opacity:0}}
.tidy .tsp{position:absolute;aspect-ratio:1;transform:scale(1);transition:transform .6s cubic-bezier(.3,1.6,.5,1) calc(5.6s + var(--sd))}
.tidy.chaos .tsp{transform:scale(0);transition:none}
.tidy.instant .a{transition:none!important}
@media (prefers-reduced-motion:reduce){.tidy .a,.tidy .tsp{transition:none!important}.tidy.run .sweep{animation:none}}
/* Startseite „Mein Vorgehen“: Grafik wartet, bis die Schritte stehen, dann lädt der Knopf zum Aufräumen ein */
.tidybtn{font-size:15px;padding:9px 22px}
.tidybtn .ic{width:18px;height:18px;color:var(--primary)}
.tidybtn .spk{fill:currentColor;stroke:none}
.tidyhint{font-size:16px;color:var(--body);text-align:center;opacity:0;transform:translateY(-4px);transition:opacity .8s ease,transform .8s ease}
.lockwrap.bereit .tidyhint{opacity:1;transform:none}
.lockwrap.gespielt .tidyhint{opacity:0}
@media (prefers-reduced-motion:no-preference){
  .tidybtn.lockt{animation:dd-lockt 2.8s ease-in-out 1s infinite}
}
@keyframes dd-lockt{0%,60%,100%{box-shadow:6px 6px 18px var(--shadow-btn),0 0 0 0 color-mix(in srgb,var(--primary) 55%,transparent)}25%{box-shadow:6px 6px 18px var(--shadow-btn),0 0 0 12px color-mix(in srgb,var(--primary) 0%,transparent)}}

/* ---------- Über mich ---------- */
.about{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,4vw,56px);align-items:start}
@media (max-width:860px){.about{grid-template-columns:1fr}}
.about .ph{position:sticky;top:110px;max-width:360px;justify-self:center;width:100%}
@media (max-width:860px){.about .ph{position:relative;top:0;max-width:300px}}
.aboutimg{display:block;border:8px solid var(--secondary);border-radius:26px;overflow:hidden}
.aboutimg img{display:block;width:100%;height:auto}
.story{display:grid;gap:12px;margin-top:6px;font-size:15.5px;line-height:1.7}
.story b{color:var(--blue-text)}
.story ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.story li{display:flex;gap:10px;align-items:baseline}
.story li i{width:9px;height:9px;border-radius:50%;flex:none;transform:translateY(-1px);background:var(--primary)}
.story li:nth-child(even) i{background:var(--secondary)}
.story .hobby{font-size:14.5px;color:var(--muted);border-top:1px solid var(--hairline);padding-top:12px}
.story .sig{width:150px;margin-top:2px}

/* Was macht mich aus */
.why{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(28px,5vw,64px);align-items:center}
@media (max-width:900px){.why{grid-template-columns:1fr}}
.pill-k{display:inline-block;background:var(--primary);color:var(--on-primary);font:700 16px var(--font-body);letter-spacing:1px;border-radius:999px;padding:8px 20px}
.why h2{font-size:clamp(30px,3.6vw,46px);letter-spacing:1px;line-height:1.25;margin:18px 0 12px}
.why .lead2{font:600 17px var(--font-body);color:var(--muted)}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.checks li{display:flex;gap:12px;align-items:flex-start;font:600 17px/1.5 var(--font-heading);letter-spacing:.4px;color:var(--heading)}
.checks .ic{width:26px;height:26px;color:var(--primary);margin-top:1px}
.checks li:nth-child(even) .ic{color:var(--blue-text)}
.zitat{grid-column:1/-1;justify-self:center;width:100%;max-width:1040px;margin:30px 0 0;position:relative;background-color:var(--box);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20' viewBox='0 0 40 20'%3E%3Cpath d='M0 15l10-8 10 8 10-8 10 8' fill='none' stroke='%238DB600' stroke-width='2' opacity='.16'/%3E%3C/svg%3E");border-radius:24px;padding:58px clamp(20px,4vw,44px) 30px}
.zitat .qc{position:absolute;left:50%;top:-36px;transform:translateX(-50%);width:72px;height:72px;border-radius:50%;background:var(--box);border:5px solid var(--primary);display:grid;place-items:center;color:var(--primary)}
.zitat .qc svg{width:30px;height:30px;fill:currentColor;stroke:none}
.zitat blockquote{margin:0;text-align:center;font:italic 500 clamp(16px,1.55vw,19px)/1.7 var(--font-body);color:var(--blue-text)}
.zitat blockquote b{font-weight:700}
.zitat .by{margin-top:26px;display:grid;gap:2px}
.zitat .by b{font:700 18px var(--font-body);color:var(--name)}
.zitat .by span{font-size:15px;color:var(--blue-text)}

/* Zertifikate */
.motto{font-style:italic;max-width:720px;margin-top:6px}
.zslider{margin-top:22px}
.ztrack{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 40px)/3);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:6px 4px 16px;scrollbar-width:thin;scrollbar-color:var(--primary) transparent}
@media (max-width:900px){.ztrack{grid-auto-columns:calc((100% - 20px)/2)}}
@media (max-width:560px){.ztrack{grid-auto-columns:84%}}
.zcard{scroll-snap-align:start;margin:0;background:var(--box);border-radius:14px;overflow:hidden;box-shadow:0 8px 24px var(--shadow-soft);display:grid;grid-template-rows:auto 1fr}
.zcard button{display:block;width:100%;padding:0;border:0;background:#fff;cursor:zoom-in;aspect-ratio:720/530}
.zcard img{width:100%;height:100%;object-fit:contain;display:block}
.zcard figcaption{padding:12px 16px 14px;display:grid;gap:2px;border-top:4px solid var(--primary)}
.zcard:nth-child(even) figcaption{border-top-color:var(--secondary)}
.zcard figcaption b{font:700 15px/1.35 var(--font-heading);color:var(--heading)}
.zcard figcaption small{font-size:13px;color:var(--muted)}
.znav{display:flex;gap:10px;justify-content:flex-end;align-items:center;margin-top:4px}
.znav .cnt{font-size:13px;font-weight:600;color:var(--muted);margin-right:auto}
.znav button{width:46px;height:46px;border-radius:50%;background:var(--secondary);border:2px solid var(--primary);color:var(--on-secondary);display:grid;place-items:center;cursor:pointer;transition:background-color .2s;padding:0}
.znav button:hover{background:var(--secondary-active)}
.znav button .ic{width:22px;height:22px}
.znav .prev .ic{transform:rotate(180deg)}
dialog.zbox{border:0;border-radius:16px;padding:0;max-width:min(92vw,980px);background:#fff;box-shadow:0 20px 60px rgba(0,0,0,.4)}
dialog.zbox::backdrop{background:rgba(8,9,10,.7)}
dialog.zbox img{display:block;width:100%;height:auto}
dialog.zbox form{position:absolute;top:10px;right:10px}
dialog.zbox button{width:44px;height:44px;border-radius:50%;border:2px solid var(--primary);background:var(--secondary);color:#F7F7F7;font:700 20px/1 var(--font-body);cursor:pointer}

/* Kundenstimmen */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-top:24px}
@media (max-width:400px){.quotes{grid-template-columns:1fr}}
.quote{background:var(--box);border-radius:14px;padding:22px;display:grid;gap:12px;align-content:start;border:1px solid var(--hairline)}
.quote h3{font:600 20px var(--font-heading);color:var(--heading);letter-spacing:.3px}
.quote .qt{font-size:15px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.quote.open .qt{-webkit-line-clamp:unset;display:block}
.quote .more{justify-self:start;font:600 14px var(--font-body);color:var(--blue-text);background:none;border:0;padding:4px 0;cursor:pointer;text-decoration:underline;text-underline-offset:.2em;min-height:32px}
.stars{display:flex;gap:3px;color:var(--primary)}
.stars svg{width:18px;height:18px;fill:currentColor}
.quote .meta{display:grid;gap:2px;font-size:13.5px;color:var(--heading);font-weight:600}
.quote .meta small{color:var(--muted);font-weight:600}
.quote .meta small.date{font-weight:500}

/* FAQ */
.faq{display:grid;gap:12px;margin-top:22px;max-width:860px}
.faq details{background:var(--box);border-radius:12px;padding:0 20px;border:1px solid var(--hairline)}
.sec.alt .faq details{background:var(--site-bg);border-color:transparent}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;font:600 17px var(--font-body);color:var(--heading);min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{flex:none;width:30px;height:30px;border-radius:50%;background:var(--secondary);color:var(--on-secondary);display:grid;place-items:center;transition:transform .45s cubic-bezier(.4,0,.2,1),background-color .45s,color .45s}
.faq summary .pm .ic{width:16px;height:16px}
.faq details[open]:not(.zu) summary .pm{transform:rotate(45deg);background:var(--primary);color:var(--on-primary)}
.faq .ans{padding:0 0 18px;font-size:15px;line-height:1.65}
.faq .ans p{margin:0 0 .75em}
.faq .ans p:last-child,.faq .ans ul:last-child{margin-bottom:0}
.faq .ans b{color:var(--blue-text);font-weight:700}
.faq .ans a{color:var(--blue-text);font-weight:700;text-underline-offset:.2em}
.faq .ans ul{margin:.2em 0 .9em;padding-left:1.3em;display:grid;gap:3px}
.faq .ans li::marker{color:var(--primary)}
.faq .ans h3,.faq .ans h4{font:700 16px var(--font-heading);color:var(--blue-text);margin:.2em 0 .35em}

/* Kontakt-Kacheln */
.ctatiles{margin-top:56px;text-align:center;background:var(--site-bg);border-radius:30px;padding:clamp(24px,4vw,44px) clamp(16px,4vw,44px) clamp(34px,5vw,54px)}
.ctatiles .pill-g{display:inline-block;background:var(--primary);color:var(--on-primary);font:700 13px var(--font-heading);letter-spacing:1.5px;text-transform:uppercase;border-radius:999px;padding:4px 14px;margin-bottom:12px}
.ctatiles h2{font-size:clamp(26px,3.4vw,40px);font-weight:800;line-height:1.2;color:var(--heading)}
.ctatiles .sub{margin:8px auto 0;max-width:none;font-size:15px}
.tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:24px 28px;margin:28px auto 0;max-width:900px;text-align:left}
.tile{grid-column:span 2;display:flex;align-items:center;justify-content:center;gap:18px;min-height:84px;padding:14px 22px;background:var(--surface);border-radius:14px;box-shadow:10px 10px 0 rgba(0,0,0,.3);color:var(--body);text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}
.tile.w3{grid-column:span 3}.tile.w6{grid-column:span 6}
.tile .ic{width:44px;height:44px;color:var(--primary);flex:none;transition:transform .3s ease}
.tile b{display:block;font:600 clamp(19px,2vw,25px)/1.1 var(--font-heading);color:var(--blue-text);text-transform:uppercase;letter-spacing:1px}
.tile small{display:block;margin-top:5px;font-size:13.5px;color:var(--muted);letter-spacing:.3px}
.tile:hover,.tile:focus-visible{transform:translate(4px,4px);box-shadow:6px 6px 0 rgba(0,0,0,.3)}
.tile:hover .ic,.tile:focus-visible .ic{transform:scale(1.1) rotate(-6deg)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tile{background:var(--surface-accent);box-shadow:10px 10px 0 var(--secondary)}:root:not([data-theme="light"]) .tile:hover,:root:not([data-theme="light"]) .tile:focus-visible{box-shadow:6px 6px 0 var(--secondary)}}
:root[data-theme="dark"] .tile{background:var(--surface-accent);box-shadow:10px 10px 0 var(--secondary)}
:root[data-theme="dark"] .tile:hover,:root[data-theme="dark"] .tile:focus-visible{box-shadow:6px 6px 0 var(--secondary)}
@media (prefers-reduced-motion:reduce){.tile,.tile .ic{transition:none}}
@media (max-width:700px){.tile,.tile.w3,.tile.w6{grid-column:1/-1;justify-content:flex-start;gap:14px;padding:12px 16px}.tile .ic{width:34px;height:34px}.tile b{font-size:18px;letter-spacing:.5px}.tile span{min-width:0;overflow-wrap:anywhere}}

/* Formular */
.contact{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:24px;max-width:860px}
.contact .full{grid-column:1/-1}
@media (max-width:640px){.contact{grid-template-columns:1fr}}
.fld{display:grid;gap:6px}
.fld label{font-size:13px;font-weight:700;color:var(--heading)}
.fld input,.fld textarea{font:500 15px var(--font-body);color:var(--heading);background:var(--surface);border:1px solid #7C818A;border-radius:6px;padding:12px 14px;min-height:46px;box-shadow:0 4px 14px var(--shadow-soft);width:100%}
.fld textarea{resize:vertical;min-height:120px}
.fld input::placeholder,.fld textarea::placeholder{color:var(--muted);opacity:1}
.fld input:focus,.fld textarea:focus{outline:3px solid var(--blue-text);outline-offset:2px;border-color:var(--primary)}
.fld input[aria-invalid="true"],.fld textarea[aria-invalid="true"]{border-color:#B3261E;border-width:2px}
.chkrow{display:flex;gap:10px;align-items:flex-start;font-size:13.5px}
.chkrow input{width:20px;height:20px;accent-color:var(--secondary);margin-top:2px;flex:none}
.formmsg{font-size:14px;font-weight:600;color:var(--blue-text)}
.formmsg.err{color:#B3261E}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .formmsg.err{color:#F2B8B5}}
:root[data-theme="dark"] .formmsg.err{color:#F2B8B5}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Footer ---------- */
.s-foot{background:var(--secondary);color:var(--on-secondary)}
.s-foot .in{display:grid;grid-template-columns:1.6fr 1fr 1.1fr;gap:28px;padding-block:20px 30px}
@media (max-width:900px){.s-foot .in{grid-template-columns:1fr 1fr}.s-foot .in>div:first-child{grid-column:1/-1}}
@media (max-width:560px){.s-foot .in{grid-template-columns:1fr}}
.s-foot .lgcard{display:block;background:#F7F7F7;border-radius:12px;padding:12px 14px;width:min(280px,100%);box-shadow:10px 10px 0 rgba(0,0,0,.3)}
.s-foot .lgcard img{width:100%;height:auto;display:block}
.s-foot .claimi{font-style:italic;font-weight:600;margin-top:14px;white-space:nowrap}
@media (max-width:560px){.s-foot .claimi{white-space:normal}}
.s-foot h2{color:var(--on-secondary);font-size:17px;margin-bottom:8px;letter-spacing:.5px;position:relative;display:inline-block;padding-bottom:6px}
.s-foot h2::after{content:"";position:absolute;left:0;bottom:0;width:28px;height:3px;border-radius:3px;background:var(--primary);transition:width .35s ease}
.s-foot .fgrp:hover h2::after,.s-foot .fgrp:focus-within h2::after{width:100%}
.s-foot .fgrp + .fgrp{margin-top:18px}
@media (prefers-reduced-motion:reduce){.s-foot h2::after{transition:none}}
.s-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:14px}
.s-foot a{color:var(--on-secondary);text-underline-offset:.2em}
.s-foot .ilinks li{display:flex;align-items:center;gap:10px}
.s-foot .ilinks .ic{width:20px;height:20px;color:var(--primary);flex:none}
.s-foot .legal{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;background:rgba(0,0,0,.18);border-radius:999px;padding:10px 22px;font-size:13px}
@media (max-width:560px){.s-foot .legal{border-radius:18px}}
.s-foot .legal .lk{display:flex;flex-wrap:wrap;gap:6px 22px}
.s-foot .legal a{text-decoration:none}
.s-foot .legal a:hover{text-decoration:underline}

/* =================================================================
   Neu für die Website (nicht im Kit, im Stil des Kits gebaut)
   ================================================================= */

/* Einstieg Unterseiten */
.p-hero .in{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(24px,4vw,56px);align-items:center;padding-block:18px 50px}
.p-hero.solo .in{grid-template-columns:1fr}
@media (max-width:860px){.p-hero .in{grid-template-columns:1fr}}
.p-hero h1{font-size:clamp(34px,4.4vw,56px);letter-spacing:1.5px;line-height:1.12;margin-block:16px 12px}
.p-hero .sub{max-width:40em}
.crumbs{font-size:13.5px;font-weight:600;color:var(--muted)}
.crumbs a{color:var(--blue-text);text-underline-offset:.2em}

/* Sprungleiste mit aktiver Sektion */
.jump{position:sticky;top:var(--jump-top,84px);z-index:20;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:10px clamp(16px,4vw,48px);margin-inline:auto;max-width:1120px;transition:top .35s ease}
.jump::-webkit-scrollbar{display:none}
.jumpbar{position:sticky;top:var(--jump-top,84px);z-index:20;background:var(--head-bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-block:1px solid var(--hairline);transition:top .35s ease}
.jumpbar .jump{position:static}
.jump a{flex:none;display:inline-flex;align-items:center;gap:8px;font:600 14.5px var(--font-heading);color:var(--heading);text-decoration:none;padding:8px 16px;border-radius:999px;background:var(--box);border:2px solid transparent;min-height:40px;transition:background-color .25s,border-color .25s,color .25s}
.jump a i{width:9px;height:9px;border-radius:50%;background:var(--primary)}
.jump a:nth-child(even) i{background:var(--secondary)}
.jump a:hover{border-color:var(--primary)}
.jump a[aria-current="true"]{background:var(--secondary);color:var(--on-secondary);border-color:var(--primary)}
.jump a[aria-current="true"] i{background:var(--primary)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .jump a[aria-current="true"] i{background:var(--primary)}}

/* Leistungsbereich */
.area{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(24px,5vw,64px);align-items:center}
.area.flip{grid-template-columns:.8fr 1.2fr}
.area.flip .art{order:-1}
@media (max-width:860px){.area,.area.flip{grid-template-columns:1fr}.area.flip .art{order:0}}
.area .lead{font-size:16.5px;line-height:1.75;max-width:38em;margin-top:4px}
.tick{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
.tick li{display:flex;gap:12px;align-items:flex-start;font:600 16px/1.5 var(--font-body);color:var(--heading)}
.tick .ic{width:24px;height:24px;color:var(--primary);margin-top:0}
.tick li:nth-child(even) .ic{color:var(--blue-text)}
.area .xb{margin-top:26px}
.art{position:relative;width:100%;max-width:460px;justify-self:center}
.art svg{display:block;width:100%;height:auto;overflow:visible}
.art .plate{fill:var(--box)}
.art .ground{fill:var(--site-bg)}
.sec.alt .art .ground{fill:var(--site-bg)}
.sec:not(.alt) .art .ground{fill:color-mix(in srgb,var(--primary) 22%,var(--site-bg))}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sec:not(.alt) .art .ground{fill:var(--site-alt)}}
:root[data-theme="dark"] .sec:not(.alt) .art .ground{fill:var(--site-alt)}
.sec.alt .step{background:var(--site-bg)}
.art .g{fill:var(--primary)} .art .b{fill:var(--secondary)} .art .t{fill:var(--hairline)}
.art .sg{stroke:var(--primary)} .art .sb{stroke:var(--secondary)} .art .st{stroke:var(--hairline)}
.art .shadow{filter:drop-shadow(0 14px 30px var(--shadow-soft))}
.art .badge{position:absolute;right:4%;bottom:-6%;display:inline-flex;align-items:center;gap:8px;background:var(--secondary);color:var(--on-secondary);border:2px solid var(--primary);border-radius:999px;padding:8px 16px 8px 10px;font:700 14px var(--font-heading);box-shadow:6px 6px 18px var(--shadow-btn)}
.art .badge .ic{width:20px;height:20px;color:var(--primary)}
/* sanfte Bewegung in den Grafiken, nur beim Einblenden */
.art [data-grow]{transform-box:fill-box;transform-origin:bottom;transform:scaleY(var(--s,1));transition:transform 1.5s cubic-bezier(.2,.8,.2,1) calc(var(--d,0s) * 2.4 + 1s)}
.art.wait [data-grow],.art.wait [data-draw]{transition-duration:0s;transition-delay:0s}
.art.wait [data-grow]{--s:.08}
.art [data-draw]{stroke-dasharray:var(--len,400);stroke-dashoffset:0;transition:stroke-dashoffset var(--dt,2.2s) cubic-bezier(.2,.8,.2,1) var(--dd,1.3s)}
.art.wait [data-draw]{stroke-dashoffset:var(--len,400)}
@media (prefers-reduced-motion:reduce){.art [data-grow],.art [data-draw]{transition:none}.art.wait [data-grow]{--s:1}.art.wait [data-draw]{stroke-dashoffset:0}}

/* Werkzeugkiste (Balken nach Jahren) */
.tools{display:grid;gap:12px;margin-top:22px;max-width:760px}
.tool{display:grid;grid-template-columns:minmax(150px,200px) 1fr auto;gap:14px;align-items:center}
.tool b{font:700 16px var(--font-heading);color:var(--heading)}
.tool .bar{height:16px;border-radius:999px;background:var(--box);overflow:hidden;box-shadow:inset 0 1px 3px var(--shadow-soft)}
.tool .bar i{display:block;height:100%;width:calc(var(--w)*1%);border-radius:inherit;background:var(--primary);transform-origin:left;transition:transform 1.5s cubic-bezier(.2,.8,.2,1) calc(var(--d,0s) + .25s)}
.tools.wait .bar i{transition-duration:0s;transition-delay:0s}
.tool:nth-child(even) .bar i{background:var(--secondary)}
.tools.wait .bar i{transform:scaleX(.04)}
.tool span{font-size:14px;font-weight:600;color:var(--muted);white-space:nowrap;min-width:5.5em;text-align:right}
@media (max-width:560px){.tool{grid-template-columns:1fr auto}.tool .bar{grid-column:1/-1;grid-row:2}}
@media (prefers-reduced-motion:reduce){.tool .bar i{transition:none}.tools.wait .bar i{transform:none}}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.chips span{font:600 14px var(--font-heading);color:var(--heading);background:var(--box);border-radius:999px;padding:6px 14px;border:1px solid var(--hairline)}

/* Werdegang als Zeitleiste */
.tl{list-style:none;margin:26px 0 0;padding:0;position:relative;display:grid;gap:18px;max-width:860px}
.tl::before{content:"";position:absolute;left:21px;top:8px;bottom:8px;width:4px;border-radius:4px;background:linear-gradient(var(--primary),var(--secondary))}
.tl li{position:relative;display:grid;grid-template-columns:46px 1fr;gap:16px;align-items:start}
.tl .dot{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--primary);color:var(--on-primary);box-shadow:0 0 0 5px var(--site-alt);z-index:1}
.tl li:nth-child(even) .dot{background:var(--secondary);color:var(--on-secondary)}
.tl .dot .ic{width:22px;height:22px}
.tl .card{background:var(--box);border-radius:14px;padding:16px 20px;box-shadow:0 11px 37px var(--shadow-soft);display:grid;gap:4px}
.tl .when{font:700 13px var(--font-heading);letter-spacing:1px;color:var(--blue-text)}
.tl h3{font-size:19px;letter-spacing:.3px}
.tl p{font-size:14.5px;line-height:1.55}
.tl li.now .card{border:2px solid var(--primary)}

/* Kontakt: zwei gleichwertige Wege */
.ways{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,28px)}
@media (max-width:760px){.ways{grid-template-columns:1fr}}
.way{position:relative;overflow:hidden;isolation:isolate;display:grid;gap:12px;align-content:start;padding:clamp(22px,3vw,32px);border-radius:20px;background:var(--box);box-shadow:0 11px 37px var(--shadow-soft)}
.way::before{content:"";position:absolute;z-index:-1;right:-60px;top:-60px;width:180px;height:180px;border-radius:50%;background:var(--c,var(--primary));opacity:.16}
.way.blue{--c:var(--secondary)}
.way .ibox{width:62px;height:62px;border-radius:14px;display:grid;place-items:center;background:var(--c,var(--primary));color:var(--on-primary)}
.way.blue .ibox{color:var(--on-secondary)}
.way .ibox .ic{width:32px;height:32px}
.way h2{font-size:clamp(24px,2.6vw,30px);letter-spacing:.5px}
.way p{font-size:16px}
.way .xb{justify-self:start;margin-top:6px}
.drahtg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 24px;margin-top:24px}
@media (max-width:980px){.drahtg{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.drahtg{grid-template-columns:1fr}}
.drahtg .tile{grid-column:auto;justify-content:flex-start}
.drahtg .tile b{font-size:clamp(17px,1.6vw,20px)}
.drahtg .tile small{overflow-wrap:anywhere}

/* sanftes Einblenden: Inhalte sind ohne JS sofort sichtbar */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .9s cubic-bezier(.2,.8,.2,1) .1s,transform .9s cubic-bezier(.2,.8,.2,1) .1s}
.js .reveal.in-view{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}}

/* Hero läuft unter den Kopf, damit das Muster bis oben reicht */
.first{padding-top:var(--head-h,96px)}
:root{--head-h:96px}
@media (max-width:900px){:root{--head-h:78px}}
.quote .qt{margin:0}
figure.quote{margin:0}
.sec,.s-foot{overflow-x:clip}
.jumpbar{background:color-mix(in srgb,var(--site-bg) 90%,transparent)}
@media (max-width:860px){.p-hero .art{max-width:260px}}
html{font-variant-numeric:lining-nums}
.first > .in > .crumbs:first-child{padding-top:18px}
.drahtg{grid-template-columns:repeat(2,minmax(0,1fr));max-width:900px}
@media (max-width:620px){.drahtg{grid-template-columns:1fr}}
.way{display:flex;flex-direction:column;align-items:flex-start}
.way p{flex:1}
/* Abschnitte unterhalb des ersten Bildschirms erst rendern, wenn sie in die Nähe kommen */
/* nur auf Seiten ohne Sprungmarken (body.cv), sonst landen Sprünge ungenau */
/* content-visibility ist aus (13.10. nachts): Die Regel griff nie, weil #portfolio fehlte. Mit id leerte sie
   Ganzseiten-Screenshots und machte Sprungmarken ungenau. Lighthouse 98 wurde ohne sie gemessen. */

/* =================================================================
   Feedback-Runde 1 (13.10.2026)
   ================================================================= */

/* Über-mich-Teaser Startseite: kurz, ohne Persönliches */
.teaser{display:grid;grid-template-columns:280px 1fr;gap:clamp(24px,5vw,64px);align-items:center;max-width:980px}
@media (max-width:760px){.teaser{grid-template-columns:1fr}.teaser .ph{max-width:240px;justify-self:center}}
.teaser .tx{font-size:17px;line-height:1.75;max-width:36em;margin-top:6px}
.teaser .tx b{color:var(--blue-text)}
.teaser .acts{margin-top:22px}
.xb.ghost .ic{width:20px;height:20px}

/* Vision, Mission, Ziel: drei Karten als Weg */
.vmz{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 28px;position:relative}
.vmz::before{content:"";position:absolute;left:16%;right:16%;top:0;height:4px;border-radius:4px;background:var(--primary);opacity:.35}
@media (max-width:860px){.vmz{grid-template-columns:1fr;max-width:520px}.vmz::before{display:none}}
.vmz li{--c:var(--primary);--on:var(--on-primary);position:relative;background:var(--box);border-radius:20px;padding:52px 24px 26px;text-align:center;box-shadow:0 11px 37px var(--shadow-soft)}
.vmz li.b{--c:var(--secondary);--on:var(--on-secondary)}
.vmz .vi{position:absolute;left:50%;top:-34px;transform:translateX(-50%);width:68px;height:68px;border-radius:50%;display:grid;place-items:center;background:var(--c);color:var(--on);box-shadow:0 0 0 6px var(--site-bg)}
.vmz .vi .ic{width:32px;height:32px}
.vmz h3{font-size:22px;letter-spacing:.4px;margin-bottom:10px}
.vmz p{font-size:15.5px;line-height:1.65}

/* Credo mit vier Blöcken */
.credo{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,64px);align-items:center}
@media (max-width:900px){.credo{grid-template-columns:1fr}}
.motto3{margin-top:22px;display:grid;gap:4px;font:800 clamp(24px,2.8vw,34px)/1.25 var(--font-heading);letter-spacing:.5px;color:var(--heading)}
.motto3 b{text-transform:uppercase;letter-spacing:1.5px}
.motto3 b.g{color:var(--kw-green)} .motto3 b.b{color:var(--blue-text)}
.cblocks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:28px 32px}
@media (max-width:560px){.cblocks{grid-template-columns:1fr}}
.cblocks li{--c:var(--kw-green);display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:6px;align-content:start;align-items:center}
.cblocks li.b{--c:var(--blue-text)}
.cblocks .ci{display:grid;place-items:center;color:var(--c)}
.cblocks .ci .ic{width:28px;height:28px}
.cblocks h3{font-size:19px;letter-spacing:.3px;margin:0}
.cblocks p{grid-column:1/-1;font-size:14.5px;line-height:1.6}

/* FAQ in zwei Reitern */
.ftabs{display:inline-flex;gap:6px;margin-top:22px;padding:6px;border-radius:999px;background:var(--secondary);border:2px solid var(--primary)}
.ftabs [role=tab]{font:700 16px var(--font-heading);letter-spacing:.4px;color:var(--on-secondary);background:transparent;border:0;border-radius:999px;padding:9px 20px;cursor:pointer;display:inline-flex;align-items:center;gap:10px;min-height:44px;transition:background-color .25s,color .25s}
.ftabs [role=tab]:hover{background:rgba(0,0,0,.18)}
.ftabs [role=tab][aria-selected=true]{background:var(--primary);color:var(--on-primary)}
.ftabs .n{font-size:12px;min-width:24px;height:24px;border-radius:999px;display:grid;place-items:center;background:rgba(255,255,255,.18)}
.ftabs [aria-selected=true] .n{background:rgba(0,0,0,.12)}
.faqtabs .faq[hidden]{display:none}
.faqtabs .faq{margin-top:18px}

/* Formular: Rechenaufgabe */
.fld.calc input{max-width:120px}
.fld .aufg{font:800 15px var(--font-heading);color:var(--blue-text);white-space:nowrap}

/* Leistungen: Vorteile je Bereich */
.vorteile{margin-top:22px;background:var(--box);border-radius:16px;padding:18px 22px 20px}
.sec.alt .vorteile{background:var(--site-bg)}
.vorteile h3,.tick-h{font:700 14px var(--font-heading);letter-spacing:1.6px;text-transform:uppercase;color:var(--blue-text);margin:0 0 10px}
.tick-h{margin-top:22px}
.tick-h + .tick{margin-top:0}
.vorteile ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.vorteile li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.5;color:var(--heading);font-weight:600}
.vorteile li .ic{width:20px;height:20px;color:var(--primary);margin-top:1px}

/* Overlay: So läuft ein Projekt */
dialog.ovl{border:0;padding:0;border-radius:24px;width:min(94vw,980px);max-height:90vh;background:var(--site-alt);color:var(--body);box-shadow:0 30px 80px rgba(0,0,0,.45);overflow:auto}
dialog.ovl::backdrop{background:rgba(8,9,10,.62)}
dialog.ovl .ovin{padding:clamp(22px,4vw,44px)}
dialog.ovl .x{position:sticky;float:right;top:14px;margin:14px 14px 0 0;width:44px;height:44px;border-radius:50%;border:2px solid var(--primary);background:var(--secondary);color:var(--on-secondary);display:grid;place-items:center;cursor:pointer;padding:0;z-index:1}
dialog.ovl .x .ic{width:22px;height:22px}
dialog.ovl .steps{margin-top:22px}
dialog.ovl .step{background:var(--site-bg)}
@media (prefers-reduced-motion:no-preference){dialog.ovl[open]{animation:ovlin .35s cubic-bezier(.2,.8,.2,1)}}
@keyframes ovlin{from{opacity:0;transform:translateY(16px) scale(.98)}}

/* Über mich: Fähigkeiten als Level, Werdegang mit Aufgaben */
.tool .pct{font:800 15px var(--font-heading);color:var(--heading);min-width:3.2em}
.tool b small{display:block;font:600 12.5px var(--font-body);color:var(--muted);letter-spacing:0}
.tl .card ul{margin:6px 0 0;padding:0 0 0 1.1em;display:grid;gap:2px;font-size:14.5px;line-height:1.5}
.tl .card ul li::marker{color:var(--primary)}
.tl .card .firma{font-size:14px;color:var(--muted);font-weight:600}
.topics{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.topics span{font:600 13px var(--font-body);color:var(--heading);background:var(--site-bg);border-radius:999px;padding:4px 12px;border:1px solid var(--hairline)}
.ahero{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px);align-items:center;padding-block:18px 40px}
@media (max-width:900px){.ahero{grid-template-columns:1fr}}
.ahero .zitat{margin:44px 0 0}
.ahero .zitat blockquote{font-size:clamp(15px,1.35vw,17px)}

/* Navigation Variante 1: grüne Linie wächst unter dem Wort, aktive Seite mit dauerhafter Linie */
.navbar a:not(.cta){position:relative}
.navbar a:not(.cta)::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:3px;border-radius:3px;background:var(--primary);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.navbar a:not(.cta):hover,.navbar a:not(.cta)[aria-current="page"]{background:transparent;box-shadow:none}
.navbar a:not(.cta):hover::after,.navbar a:not(.cta):focus-visible::after,.navbar a:not(.cta)[aria-current="page"]::after{transform:scaleX(1)}
.mnav a[aria-current="page"]:not(.cta){background:transparent;box-shadow:inset 4px 0 0 var(--primary)}
@media (prefers-reduced-motion:reduce){.navbar a::after{transition:none}}

/* Hell/Dunkel-Wechsel: kreisförmiges Aufdecken vom Schalter aus (View Transitions), Dauer in --theme-dauer */
:root{--theme-dauer:1.2s}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-group(themeicon),::view-transition-old(themeicon),::view-transition-new(themeicon){animation:none}
::view-transition-old(themeicon){display:none}
.theme-icon{position:fixed;left:50%;top:50%;z-index:200;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;display:grid;place-items:center;background:var(--secondary);border:4px solid var(--primary);color:var(--primary);pointer-events:none;opacity:0;view-transition-name:themeicon}
.theme-icon .ic{width:60px;height:60px}
.theme-icon.on{animation:ticon var(--theme-dauer) cubic-bezier(.3,.7,.3,1) forwards}
@keyframes ticon{0%{opacity:0;transform:scale(.6) rotate(-40deg)}30%{opacity:1;transform:scale(1) rotate(0)}70%{opacity:1;transform:scale(1) rotate(0)}100%{opacity:0;transform:scale(1.15) rotate(10deg)}}

.sec:not(.alt) .tl .dot{box-shadow:0 0 0 5px var(--site-bg)}
.sec:not(.alt) .topics span{background:var(--site-alt)}
.tl .card li{display:list-item;position:static}
.ahero .zitat{grid-column:auto;margin-top:36px}
@media (max-width:900px){.ahero .zitat{margin-top:44px}}
dialog.ovl .steps{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){dialog.ovl .steps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){dialog.ovl .steps{grid-template-columns:1fr}}

/* Feedback-Runde 2 (14.10.2026) */
.ctatiles.band{margin-top:0;background:var(--site-alt)}
.ctatiles.band .acts{justify-content:center;margin-top:24px}
.stickycta{display:none}
@media (max-width:760px){
  .stickycta{display:inline-flex;justify-content:center;position:fixed;left:clamp(14px,3vw,28px);right:calc(clamp(14px,3vw,28px) + 64px);bottom:clamp(14px,3vw,28px);z-index:30;padding:12px 18px;opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .3s ease,transform .3s ease,background-color .35s ease}
  .stickycta.on{opacity:1;transform:none;pointer-events:auto}
}
@media (prefers-reduced-motion:reduce){.stickycta{transition:none}}

/* Problem-Abschnitt (Typische Muster) */
.probl{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(24px,5vw,64px);align-items:start}
@media (max-width:900px){.probl{grid-template-columns:1fr}}
.reframe{margin-top:22px;font:700 clamp(19px,2vw,23px)/1.45 var(--font-heading);color:var(--heading);letter-spacing:.2px}
.muster{list-style:none;margin:0;padding:0;counter-reset:m;display:grid;gap:22px}
.muster li{counter-increment:m;display:grid;grid-template-columns:56px 1fr;column-gap:16px;row-gap:4px;padding-bottom:20px;border-bottom:1px solid var(--hairline)}
.muster li:last-child{border-bottom:0;padding-bottom:0}
.muster li::before{content:counter(m,decimal-leading-zero);grid-row:span 2;font:800 32px/1 var(--font-heading);color:var(--kw-green)}
.muster li:nth-child(even)::before{color:var(--blue-text)}
.muster h3{font-size:19px;letter-spacing:.3px;margin:2px 0 0}
.muster p{font-size:15px;line-height:1.6;margin:0}
.ueberleit{margin-top:clamp(28px,4vw,44px);font-size:16px;max-width:680px}
.lei-kopf{margin-top:clamp(40px,6vw,72px)}

/* Abgrenzung: Vergleichstabelle */
.vgl{margin-top:clamp(48px,7vw,84px)}
.vgl-box{margin-top:24px;border-radius:20px;overflow:hidden;background:var(--box);box-shadow:0 11px 37px var(--shadow-soft)}
.vgl-t{width:100%;border-collapse:collapse;font-size:15px;line-height:1.55}
.vgl-t th,.vgl-t td{padding:14px 18px;text-align:left;vertical-align:top;border-top:1px solid var(--hairline)}
.vgl-t thead th{border-top:0;font:700 15px var(--font-heading);letter-spacing:.3px;color:var(--heading)}
.vgl-t thead th:last-child{background:var(--secondary);color:var(--on-secondary)}
.vgl-t tbody th{font:700 15px var(--font-heading);color:var(--heading);width:22%}
.vgl-t td:last-child{background:color-mix(in srgb,var(--secondary) 9%,transparent);color:var(--heading);font-weight:600}
@media (max-width:700px){
  .vgl-t thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .vgl-t,.vgl-t tbody,.vgl-t tr,.vgl-t th,.vgl-t td{display:block;width:auto}
  .vgl-t tr{padding:16px 18px;border-top:1px solid var(--hairline)}
  .vgl-t tbody tr:first-child{border-top:0}
  .vgl-t th,.vgl-t td{padding:0;border:0}
  .vgl-t tbody th{width:auto;margin-bottom:8px;font-size:17px}
  .vgl-t td{margin-top:6px}
  .vgl-t td::before{content:attr(data-l);display:block;font:700 12px var(--font-heading);letter-spacing:1.4px;text-transform:uppercase;color:var(--blue-text);margin-bottom:2px}
  .vgl-t td:last-child{border-radius:12px;padding:10px 12px;margin-top:10px}
}

/* Vorher/Nachher-Regler (Portfolio auf der Startseite) */
.vn{margin:28px 0 0}
.vn-box{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:1262/720;background:var(--box);box-shadow:0 11px 37px var(--shadow-soft);border:2px solid var(--primary)}
.vn-box img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none;pointer-events:none}
.vn-vor{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.vn-griff{position:absolute;top:0;bottom:0;left:var(--pos);width:4px;margin-left:-2px;background:var(--primary);pointer-events:none}
.vn-griff .ic{max-width:none;position:absolute;top:50%;left:50%;width:44px;height:44px;padding:10px;margin:-22px 0 0 -22px;border-radius:50%;background:var(--secondary);color:var(--on-secondary);border:2px solid var(--primary);box-shadow:4px 4px 14px var(--shadow-btn)}
.vn-lab{position:absolute;bottom:12px;font:700 13px var(--font-heading);letter-spacing:1px;text-transform:uppercase;padding:5px 12px;border-radius:999px;pointer-events:none}
.vn-lab.l{left:12px;background:var(--secondary);color:var(--on-secondary)}
.vn-lab.r{right:12px;background:var(--primary);color:var(--on-primary)}
.vn-r{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}
.vn-box:has(.vn-r:focus-visible){outline:3px solid var(--blue-text);outline-offset:4px}
.vn figcaption{margin-top:10px;font-size:13.5px;color:var(--muted)}
@media (max-width:560px){.vn-lab{font-size:11px;padding:4px 9px;bottom:8px}.vn-lab .lg{display:none}.vn-griff .ic{width:36px;height:36px;padding:8px;margin:-18px 0 0 -18px}}

/* Zusammenarbeit & Preise */
.warum{margin-top:0;align-self:center}
.warum h2{font:700 14px var(--font-heading);letter-spacing:1.6px;text-transform:uppercase;color:var(--blue-text);margin:0 0 10px}
.mod .lead{font-size:16.5px;line-height:1.75;max-width:52em;margin-top:4px}
.mod-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px clamp(20px,3vw,36px);margin-top:28px;align-items:start}
.mod-g.vier{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:980px){.mod-g{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.mod-g,.mod-g.vier{grid-template-columns:1fr}}
.mod-g .tick{margin-top:0}
.mod-g .tick li{font-size:15px}
.mod-g .vorteile{margin-top:0}
.achtung ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.achtung li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.55}
.achtung .ic{flex:none;width:22px;height:22px;color:var(--blue-text);margin-top:1px}
.schritte{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;gap:12px}
.schritte li{counter-increment:s;display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start;font:600 15px/1.5 var(--font-body);color:var(--heading)}
.schritte li::before{content:counter(s);width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--secondary);color:var(--on-secondary);font:800 14px var(--font-heading)}
.vgl-t.neutral thead th:last-child{background:color-mix(in srgb,var(--secondary) 9%,transparent);color:var(--heading)}
.vgl-t.neutral td:last-child{background:transparent;color:inherit;font-weight:400}
.vgl-t.neutral thead th{background:color-mix(in srgb,var(--secondary) 9%,transparent)}
.vgl-t.neutral td{font-size:14.5px}
@media (max-width:700px){.vgl-t.neutral td{margin-top:14px}.vgl-t.neutral td:last-child{padding:0}}
#angebot .ctab{margin-top:clamp(40px,6vw,64px)}

/* Wissen: Übersicht */
.wliste{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.wkarte{display:grid;grid-template-columns:260px 1fr;gap:24px;align-items:center;text-decoration:none;color:inherit;background:var(--box);border-radius:20px;padding:14px;box-shadow:0 11px 37px var(--shadow-soft);transition:transform .25s ease,box-shadow .25s ease}
.wkarte:hover,.wkarte:focus-visible{transform:translateY(-3px);box-shadow:0 16px 40px var(--shadow-soft)}
.wbild{display:block;aspect-ratio:1200/630;border-radius:12px;overflow:hidden;background:color-mix(in srgb,var(--secondary) 12%,var(--box))}
.wbild img{width:100%;height:100%;object-fit:cover;display:block}
.wtext{display:grid;gap:8px;padding-right:10px}
.wtext b{font:700 clamp(19px,2vw,23px)/1.3 var(--font-heading);color:var(--heading)}
.wtext>span:last-child{font-size:15px;line-height:1.6}
.wmeta{font-size:13.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
@media (max-width:700px){.wkarte{grid-template-columns:1fr;gap:14px}.wtext{padding:0 6px 6px}}
@media (prefers-reduced-motion:reduce){.wkarte{transition:none}}

/* Wissen: Artikel */
.art-hero h1{font-size:clamp(30px,3.8vw,48px)}
.art-meta{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:14.5px;color:var(--muted);margin-top:6px}
.art-bild img{width:100%;height:auto;border-radius:20px;box-shadow:0 11px 37px var(--shadow-soft);display:block}
.artikel{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:clamp(24px,4vw,56px);align-items:start;padding-bottom:20px}
.artikel .prosa{grid-column:1;grid-row:1;max-width:760px}
.artikel .toc{grid-column:2;grid-row:1;position:sticky;top:calc(var(--jump-top,84px) + 16px);background:var(--box);border-radius:16px;padding:16px 18px;box-shadow:0 11px 37px var(--shadow-soft);font-size:14px}
.artikel .autor{grid-column:1}
@media (max-width:980px){.artikel{grid-template-columns:1fr}.artikel .toc{grid-column:1;grid-row:auto;position:static}.artikel .prosa{grid-row:auto}}
.toc h2{font:700 13px var(--font-heading);letter-spacing:1.6px;text-transform:uppercase;color:var(--blue-text);margin:0 0 8px}
.toc ol{margin:0;padding-left:18px;display:grid;gap:6px}
.toc a{color:var(--heading);text-decoration:none}
.toc a:hover,.toc a:focus-visible{color:var(--blue-text);text-decoration:underline}
.prosa{font-size:16.5px;line-height:1.75}
.prosa>*+*{margin-top:1em}
.prosa h2{font-size:clamp(24px,2.6vw,30px);line-height:1.25;margin-top:1.8em;scroll-margin-top:110px}
.prosa h3{font-size:20px;margin-top:1.5em}
.prosa h4{font-size:17px;margin-top:1.3em}
.prosa strong{color:var(--heading)}
.prosa ul,.prosa ol{padding-left:1.3em}
.prosa li+li{margin-top:.35em}
.prosa li>ul,.prosa li>ol{margin-top:.35em}
.prosa img{max-width:100%;height:auto;border-radius:12px;border:1px solid var(--hairline);display:block;margin-inline:auto}
.prosa a{color:var(--blue-text)}
.prosa code{font:14.5px/1.5 ui-monospace,Consolas,monospace;background:color-mix(in srgb,var(--secondary) 10%,transparent);padding:1px 5px;border-radius:5px;overflow-wrap:anywhere}
.prosa pre.code{background:#1F2328;color:#E6E8EB;border-radius:14px;padding:16px 18px;overflow-x:auto;border-left:0}
.prosa pre.code code{background:none;padding:0;color:inherit;white-space:pre;overflow-wrap:normal}
.prosa table{width:100%;border-collapse:collapse;font-size:15px;display:block;overflow-x:auto}
.prosa th,.prosa td{border:1px solid var(--hairline);padding:8px 10px;text-align:left;vertical-align:top}
.prosa th{background:color-mix(in srgb,var(--secondary) 10%,transparent);color:var(--heading)}
.prosa blockquote{margin-inline:0;padding:12px 18px;background:var(--box);border-radius:12px;font-style:italic}
.fehlt{border:2px dashed #C0392B;color:#C0392B;background:color-mix(in srgb,#C0392B 8%,transparent);border-radius:12px;padding:12px 16px;font-weight:700;font-size:14.5px}
.autor{display:grid;grid-template-columns:96px 1fr;gap:20px;align-items:start;margin-top:48px;background:var(--box);border-radius:20px;padding:22px;box-shadow:0 11px 37px var(--shadow-soft);max-width:760px}
.autor img{width:96px;height:96px;border-radius:50%;border:3px solid var(--primary);object-fit:cover}
.autor .aname{font:800 20px var(--font-heading);color:var(--heading);margin:2px 0 6px}
.autor p{font-size:15px;line-height:1.6}
.autor .alinks{margin-top:8px}
@media (max-width:520px){.autor{grid-template-columns:1fr}}

/* Portfolio */
.pcard .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left top}
.pcard.off{cursor:default}
.pcard.off:hover{transform:none;box-shadow:none}
.pcard .folgt{font:700 12px var(--font-heading);letter-spacing:1.2px;text-transform:uppercase;color:var(--blue-text)}
.ptags{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.pfakten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:26px 0 0;max-width:820px}
@media (max-width:700px){.pfakten{grid-template-columns:1fr}}
.pfakten div{background:var(--box);border-radius:14px;padding:14px 16px;box-shadow:0 8px 24px var(--shadow-soft)}
.pfakten dt{display:flex;gap:8px;align-items:center;font:700 13px var(--font-heading);letter-spacing:1.4px;text-transform:uppercase;color:var(--blue-text)}
.pfakten dt .ic{width:18px;height:18px}
.pfakten dd{margin:6px 0 0;font:600 15.5px/1.45 var(--font-body);color:var(--heading)}
.pueber .lead{font-size:16.5px;line-height:1.75;max-width:46em}
.pueber .tick{max-width:820px}
.tick li>span{display:block}
.sub-l{margin:8px 0 0;padding-left:18px;display:grid;gap:4px;font-weight:400;font-size:15px;color:var(--body)}
.phigh{margin-top:clamp(40px,6vw,64px)}
.pgal{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:22px}
.pg{margin:0;background:var(--box);border-radius:14px;overflow:hidden;box-shadow:0 8px 24px var(--shadow-soft)}
.pg button{display:block;width:100%;padding:0;border:0;background:#fff;cursor:zoom-in;aspect-ratio:1262/720}
.pg img{width:100%;height:100%;object-fit:cover;display:block}
.pg figcaption{padding:10px 14px 12px;font:700 14.5px var(--font-heading);color:var(--heading)}
.pnext{display:flex;gap:16px;align-items:center;justify-content:space-between;margin-top:14px;padding:18px 20px;background:var(--box);border-radius:16px;text-decoration:none;color:var(--body);box-shadow:0 8px 24px var(--shadow-soft);max-width:820px}
.pnext>span{display:grid;gap:4px}
.pnext b{font:700 18px var(--font-heading);color:var(--heading)}
.pnext .ic{flex:none;width:28px;height:28px;color:var(--blue-text)}
.pnext:hover b,.pnext:focus-visible b{color:var(--blue-text)}
.sec.alt .ctab{margin-top:clamp(40px,6vw,64px)}
.fehlt{margin-top:24px}
.tick .sub-l li{display:list-item;list-style:disc;font:400 15px/1.55 var(--font-body);color:var(--body)}
.art-meta{display:block;line-height:1.9}
.art-meta .tag{margin-right:6px}
.wbild .ic{width:56px;height:56px;color:var(--blue-text);opacity:.55}
.wbild:has(.ic){display:grid;place-items:center}
.fehlt{--rot:#9B2317;border-color:var(--rot);color:var(--rot);background:#FBEAE8}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fehlt{--rot:#FF9C8F;background:#3A1E1B}}
:root[data-theme="dark"] .fehlt{--rot:#FF9C8F;background:#3A1E1B}
.ctab .xb.ghost{color:var(--marine);border-color:var(--marine)}
.ctab .xb.ghost:hover,.ctab .xb.ghost:focus-visible{color:var(--on-secondary);border-color:var(--secondary)}

/* ---------- Runde 3 (14.10.2026) ---------- */
/* FAQ: Antwort blendet weich ein, Reiterwechsel ohne Sprung */
.faq details[open]:not(.zu) .ans{animation:faqIn .5s cubic-bezier(.4,0,.2,1)}
.faq details.zu .ans{opacity:0;transition:opacity .3s}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.faqtabs .faq:not([hidden]){animation:tabIn .45s cubic-bezier(.4,0,.2,1)}
@keyframes tabIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:860px){.mnav:not([hidden]){animation:menuIn .28s cubic-bezier(.4,0,.2,1)}}
@keyframes menuIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.faq details .ans,.faqtabs .faq,.mnav{animation:none!important}}

/* Überleitung Probleme → Leistungen: eine Zeile, prominent, Sterne aus dem Kit */
.ueberleit{display:flex;align-items:center;justify-content:center;gap:14px;max-width:none;margin:clamp(36px,5vw,60px) auto 0;text-align:center;font:700 clamp(17px,1.55vw,19.5px)/1.45 var(--font-heading);color:var(--heading);letter-spacing:.1px}
.ueberleit .spk{flex:none;width:22px;height:22px;fill:var(--primary);stroke:none}
.ueberleit .spk.b{fill:var(--secondary)}
@media (min-width:1100px){.ueberleit > span{white-space:nowrap}}
@media (max-width:600px){.ueberleit .spk{width:16px;height:16px}}

/* Projektkarten auf hellem Abschnitt grün absetzen */
.sec.alt .pcard{background:var(--surface-accent)}
.sec.alt .pcard .shot{background:var(--site-alt)}

/* Ablauf kompakt (Startseite) */
.flowwrap{display:grid;gap:18px;justify-items:start}
.flow{list-style:none;margin:0;padding:0;display:grid}
.flow li{position:relative;display:grid;grid-template-columns:48px 1fr;column-gap:16px;align-items:center;padding:9px 0}
.flow .n{grid-row:span 2;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font:800 19px var(--font-heading);background:var(--primary);color:var(--on-primary);box-shadow:0 6px 16px var(--shadow-soft)}
.flow li:nth-child(even) .n{background:var(--secondary);color:var(--on-secondary)}
.flow b{font:700 19px var(--font-heading);color:var(--heading);align-self:end}
.flow small{font-size:14.5px;line-height:1.45;color:var(--body);align-self:start}
.flow li:not(:last-child)::after{content:"";position:absolute;left:22.5px;top:61px;bottom:-5px;width:3px;border-radius:2px;background:linear-gradient(var(--primary),var(--secondary));transform-origin:top;transition:transform .9s cubic-bezier(.4,0,.2,1) calc(var(--i) * .85s + 1.1s)}
.flow li > *{transition:opacity .9s ease calc(var(--i) * .85s + .4s),transform .9s cubic-bezier(.2,.8,.2,1) calc(var(--i) * .85s + .4s)}
.flow li:nth-child(1){--i:0} .flow li:nth-child(2){--i:1} .flow li:nth-child(3){--i:2} .flow li:nth-child(4){--i:3}
.flow.wait li > *{opacity:0;transform:translateX(-10px);transition-duration:0s;transition-delay:0s}
.flow.wait li::after{transform:scaleY(0);transition-duration:0s;transition-delay:0s}
@media (prefers-reduced-motion:reduce){.flow li > *,.flow li::after{transition:none}}

/* Zusammenarbeit-Band (Startseite) */
.modelle{margin-top:clamp(52px,7vw,84px)}
.mk-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:24px}
@media (max-width:760px){.mk-g{grid-template-columns:1fr}}
.mk{position:relative;display:grid;gap:6px;align-content:start;padding:22px 52px 22px 24px;border-radius:14px;background:var(--box);border-top:5px solid var(--primary);color:var(--body);text-decoration:none;box-shadow:0 11px 37px var(--shadow-soft);transition:transform .35s ease,box-shadow .35s ease}
.mk.b{border-top-color:var(--secondary)}
.mk:hover,.mk:focus-visible{transform:translateY(-5px);box-shadow:0 3px 15px 5px rgba(0,0,0,.13)}
.mk-n{font:800 30px/1.1 var(--font-heading);color:var(--kw-green)}
.mk.b .mk-n{color:var(--blue-text)}
.mk b{font:700 17px var(--font-heading);color:var(--heading)}
.mk > span:last-of-type{font-size:14.5px;line-height:1.55}
.mk .arr{position:absolute;top:20px;right:18px;width:22px;height:22px;color:var(--blue-text)}
.mk-mehr{margin-top:18px}
@media (prefers-reduced-motion:reduce){.mk{transition:none}.mk:hover{transform:none}}

/* Link zu Zusammenarbeit am Ende von /leistungen/ */
.zlink{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 10px;margin:0 0 28px;font-weight:600;text-align:center}
.zlink .ic{color:var(--blue-text)}
.zlink a{font-weight:700;text-underline-offset:.2em}

/* Wissen-Teaser (Startseite) */
.wkopf{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:10px 24px}
.wneu{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:900px){.wneu{grid-template-columns:1fr}}
.wn{display:grid;gap:10px;align-content:start;height:100%;padding:12px 12px 18px;border-radius:16px;background:var(--surface-accent);color:var(--body);text-decoration:none;transition:transform .35s ease,box-shadow .35s ease}
.wn:hover,.wn:focus-visible{transform:translateY(-5px);box-shadow:0 3px 15px 5px rgba(0,0,0,.13)}
.wn .wbild{aspect-ratio:1200/630;border-radius:10px;overflow:hidden;background:var(--site-alt);display:grid;place-items:center}
.wn .wbild img{width:100%;height:100%;object-fit:cover;display:block}
.wn .wbild .ic{width:48px;height:48px;color:var(--blue-text)}
.wn .wmeta{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted);padding-inline:6px}
.wn b{font:700 17px/1.35 var(--font-heading);color:var(--heading);padding-inline:6px}
@media (prefers-reduced-motion:reduce){.wn{transition:none}.wn:hover{transform:none}}

/* Brotkrumen: überall gleicher Abstand zur Überschrift bzw. zum Etikett */
.crumbs{margin:0 0 22px}
.crumbs + h1,.crumbs + .kick5,.crumbs + .ahero,.crumbs + .art-hero{margin-top:0!important}
.p-hero .kick5{display:block}
.p-hero .kick5 + h1{margin-top:10px}
/* Projektseiten: mehr Luft zwischen Überschrift, Etiketten und Unterzeile */
.p-hero.solo h1{margin-bottom:20px}
.p-hero.solo .ptags{margin:0 0 22px}

/* Über mich: Zitat zeilenweise */
.zitat blockquote p{margin:0;text-wrap:balance}
.zitat blockquote p + p{margin-top:.3em}
.zitat blockquote p.fin{margin-top:.9em;font-style:normal;font-weight:700;color:var(--blue-text)}
.zitat blockquote p.fin b{color:var(--kw-green)}
.zitat blockquote p.fin b{font-style:italic}
/* Zitat Variante 2 (Runde 5): große deutsche Anführungszeichen in Raleway, grün oben links, blau unten rechts */
.zitat.z2 blockquote{position:relative}
.zitat.z2 blockquote::before,.zitat.z2 blockquote::after{position:absolute;font:900 150px/1 var(--font-heading);pointer-events:none;font-style:normal}
.zitat.z2 blockquote::before{content:"„";left:-6px;top:-60px;color:var(--primary)}
.zitat.z2 blockquote::after{content:"“";right:-4px;bottom:-96px;color:var(--blue-text)}
.ahero .zitat.z2 blockquote{padding-inline:clamp(28px,3.6vw,48px)}
.ahero .zitat.z2 blockquote::before,.ahero .zitat.z2 blockquote::after{font-size:clamp(96px,9vw,130px)}
.ahero .zitat.z2 blockquote::before{left:-8px;top:-44px}
.ahero .zitat.z2 blockquote::after{right:-8px;bottom:-80px}
@media (max-width:600px){.zitat.z2 blockquote::before,.zitat.z2 blockquote::after{font-size:110px}.zitat.z2 blockquote::before{top:-48px;left:-10px}.zitat.z2 blockquote::after{bottom:-72px;right:-8px}}
/* Über mich: Was macht mich aus als Icon-Karten */
.wkarten{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:520px){.wkarten{grid-template-columns:1fr}}
.wkarten li{display:grid;gap:12px;align-content:start;background:var(--box);border-radius:14px;padding:20px;box-shadow:0 11px 37px var(--shadow-soft);border-top:5px solid var(--primary)}
.wkarten li.b{border-top-color:var(--secondary)}
.wkarten .wi{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--primary);color:var(--on-primary)}
.wkarten li.b .wi{background:var(--secondary);color:var(--on-secondary)}
.wkarten .wi .ic{width:24px;height:24px}
.wkarten p{font:600 16px/1.5 var(--font-heading);color:var(--heading);letter-spacing:.2px}
.wkarten li b{color:var(--kw-green)} .wkarten li.b b{color:var(--blue-text)}
/* Fähigkeiten: Jahresangabe statt Prozent */
.tool .seit{font:600 13px var(--font-body);color:var(--muted);white-space:nowrap;min-width:5.5em;text-align:right}
.crumbs + .ahero{padding-top:0;align-items:start}
.crumbs + .ahero h1{margin-top:0}

/* Portfolio: Bild-Stapel im Kopf */
.pstapel{position:relative;width:100%;max-width:440px;aspect-ratio:4/3;justify-self:center}
.pstapel img{position:absolute;width:78%;height:auto;border-radius:12px;background:#fff;box-shadow:0 14px 34px var(--shadow-soft),0 0 0 4px var(--box);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.pstapel img{transform:translate(var(--x,0),var(--y,0)) rotate(var(--r))}
.pstapel img:nth-child(1){left:22%;top:0;--r:6deg}
.pstapel img:nth-child(2){left:0;top:18%;--r:-5deg}
.pstapel img:nth-child(3){left:11%;top:40%;--r:1deg}
/* Portfolio-Kopf: Karten werden nacheinander ausgeteilt, beim Darüberfahren fächern sie auf, die berührte Karte kommt nach vorn */
@media (prefers-reduced-motion:no-preference){
  .pstapel img{animation:dd-austeilen 1.1s cubic-bezier(.2,.8,.2,1) backwards}
  .pstapel img:nth-child(1){animation-delay:.35s}.pstapel img:nth-child(2){animation-delay:.85s}.pstapel img:nth-child(3){animation-delay:1.35s}
  .pstapel:hover img:nth-child(1){--x:14px;--y:-10px;--r:9deg}
  .pstapel:hover img:nth-child(2){--x:-14px;--y:-4px;--r:-8deg}
  .pstapel:hover img:nth-child(3){--x:4px;--y:12px;--r:2deg}
  .pstapel img:hover{z-index:2;--r:0deg;scale:1.06}
  .pstapel img{transition:transform .6s cubic-bezier(.2,.8,.2,1),scale .6s cubic-bezier(.2,.8,.2,1)}
}
@keyframes dd-austeilen{from{opacity:0;transform:translate(40px,60px) rotate(0deg) scale(.9)}to{opacity:1;transform:translate(0,0) rotate(var(--r))}}
@media (max-width:860px){.pstapel{max-width:320px}}
/* Portfolio: Projekte mit Ausgangslage, Lösung, Werkzeugen */
.faelle{list-style:none;margin:0;padding:0;display:grid;gap:24px}
.fall a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(18px,3vw,36px);align-items:center;padding:16px;border-radius:20px;background:var(--box);color:var(--body);text-decoration:none;box-shadow:0 11px 37px var(--shadow-soft);border-left:6px solid var(--primary);transition:transform .35s ease,box-shadow .35s ease}
.fall.b a{border-left-color:var(--secondary)}
.fall a:hover,.fall a:focus-visible{transform:translateY(-4px);box-shadow:0 3px 15px 5px rgba(0,0,0,.13)}
.fbild{aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:#fff;display:block}
.fbild img{width:100%;height:100%;object-fit:cover;object-position:left top;display:block}
.ftext{display:grid;gap:10px;align-content:start}
.ftext > b{font:700 clamp(20px,2vw,24px) var(--font-heading);color:var(--heading)}
.ftext dl{margin:0;display:grid;gap:8px}
.ftext dl div{display:grid;grid-template-columns:110px 1fr;gap:10px}
.ftext dt{font:700 12.5px/1.6 var(--font-heading);letter-spacing:1.2px;text-transform:uppercase;color:var(--blue-text)}
.ftext dd{margin:0;font-size:15px;line-height:1.55}
.fmehr{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--blue-text);margin-top:4px}
.fmehr .ic{width:20px;height:20px}
@media (max-width:760px){.fall a{grid-template-columns:1fr}.ftext dl div{grid-template-columns:1fr;gap:0}}
@media (prefers-reduced-motion:reduce){.fall a,.pstapel img{transition:none}.fall a:hover{transform:none}}
/* Ähnliche Projekte: zwei Karten nebeneinander */
.port.zwei{grid-template-columns:repeat(2,minmax(0,1fr));max-width:820px;margin-bottom:clamp(36px,5vw,56px)}
@media (max-width:640px){.port.zwei{grid-template-columns:1fr}}
/* Galerie: ganze Bilder zeigen, egal welches Format */
.pg img{object-fit:contain}
.pzitat{margin:14px 0 0;padding:16px 20px;border-left:5px solid var(--primary);background:var(--box);border-radius:0 14px 14px 0;font-style:italic;color:var(--heading)}
.pzitat p{margin:0 0 8px}
.pzitat .tlink{font-style:normal}
.prosa-kurz{display:grid;gap:10px;max-width:46em;font-size:15.5px;line-height:1.7}
.pueber .tick-h{margin-top:26px}

/* FAQ: fett ohne Farbe (Wunsch 14.10.: „drei“, „Optionen“) */
.faq .ans b.n{color:inherit}

/* ---------- Wissen: Hinweisboxen und Download-Button (14.10.2026) ----------
   Erzeugt von tools/wissen_import.py aus den INFO-, CHECK- und ACHTUNG-Boxen der alten Seite.
   INFO und CHECK grün, ACHTUNG blau. Symbol im runden Feld, dunkle Schrift auf Grün. */
.hinweis{--hw:var(--primary);--hw-ink:var(--on-primary);display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;background:var(--box);border:2px solid var(--hw);border-radius:16px;padding:14px 18px;box-shadow:0 11px 37px var(--shadow-soft)}
.hinweis.achtung{--hw:var(--secondary);--hw-ink:var(--on-secondary)}
.hinweis>.ic{width:36px;height:36px;padding:7px;border-radius:50%;background:var(--hw);color:var(--hw-ink);stroke-width:2.2}
.hinweis>div>p{margin:0;font-size:15.5px;line-height:1.65}
.hinweis>div>p+p{margin-top:.6em}
.hinweis .hinweis-titel{font:800 13px/1.3 var(--font-heading);letter-spacing:1.6px;text-transform:uppercase;color:var(--heading);margin:7px 0 4px}
.hinweis.achtung .hinweis-titel{color:var(--blue-text)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hinweis.achtung{--hw:var(--blue-text);--hw-ink:#121212}}
:root[data-theme="dark"] .hinweis.achtung{--hw:var(--blue-text);--hw-ink:#121212}
@media (max-width:480px){.hinweis{gap:10px;padding:12px 14px}.hinweis>.ic{width:30px;height:30px;padding:5px}}
.prosa .download{margin-top:1.8em}
.prosa .download .xb{white-space:normal;max-width:100%}
/* Rechtsseiten: Impressum, Datenschutz (14.10.2026) */
.recht .prosa{max-width:760px}
.recht .prosa .fehlt{margin:16px 0}
.recht .stand{font-size:14px;color:var(--muted);margin-top:28px}
/* Power-BI-Unterseite (Entwurf 14.10.2026) */
.pbi-kopf img,.pbi-bild img{display:block;width:100%;height:auto;border-radius:16px;box-shadow:0 12px 32px rgba(0,0,0,.12)}
.pbi-bild{display:grid;gap:18px}
.pbi-g{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);margin-top:28px}
@media (max-width:860px){.pbi-g{grid-template-columns:1fr}}
.pbi-g .tick{margin-top:0}
.pbi-hinweis{margin-top:16px;font-size:15px}
#beispiel .xb{margin-top:22px}

/* ---------- Kleine Icon-Bewegungen (Werte, Credo, Was macht mich aus): langsame Schleife, nur solange sichtbar ----------
   Jede Schleife hat eine lange Ruhephase, die Dauern sind ungleich, damit nie alles gleichzeitig zuckt.
   Nur transform/opacity (Compositor), außer dem Glimmen der Glühbirne (eine kleine SVG-Fläche).
   Außerhalb des Bildschirms fehlt .in-view, dann läuft nichts. */
.a-eye .lid,.a-comp .ndl,.a-flag .tuch,.a-bulb .glas,.a-lay .oben,.a-heart,.a-bars path,.a-shield,.a-look .pup,.a-smile .mund,.a-smile .zw{transform-box:fill-box}
.a-eye .lid{transform-origin:center}
.a-comp .ndl{transform-box:view-box;transform-origin:12px 12px}
.a-flag .tuch{transform-origin:left center}
.a-lay{overflow:visible}
.a-lay .oben{transform-origin:center}
.a-heart,.a-shield{transform-origin:center}
.a-bars path{transform-origin:bottom}
.a-smile .mund{transform-origin:center top}
.a-smile .zw{transform-origin:center}
.a-shield .hk{stroke-dasharray:1;stroke-dashoffset:0}
@media (prefers-reduced-motion:no-preference){
  .vmz.in-view .a-eye .lid{animation:dd-blink 3.6s ease-in-out infinite}
  .vmz.in-view .a-comp .ndl{animation:dd-kompass 6s .2s cubic-bezier(.45,.05,.2,1) infinite}
  .vmz.in-view .a-flag .tuch{animation:dd-wehen 3.4s .4s ease-in-out infinite}
  .cblocks.in-view .a-bulb .glas{animation:dd-glimmen 4s ease-in-out infinite}
  .cblocks.in-view .a-lay .oben{animation:dd-heben 3.6s .3s ease-in-out infinite}
  .cblocks.in-view .a-heart{animation:dd-puls 3.2s .5s ease-in-out infinite}
  .cblocks.in-view .a-bars .s1{animation:dd-balken 4.4s ease-in-out infinite}
  .cblocks.in-view .a-bars .s2{animation:dd-balken 4.4s .2s ease-in-out infinite}
  .cblocks.in-view .a-bars .s3{animation:dd-balken 4.4s .4s ease-in-out infinite}
  .wkarten.in-view .a-shield{animation:dd-schild 4.2s ease-in-out infinite}
  .wkarten.in-view .a-shield .hk{animation:dd-haken 4.2s ease-in-out infinite}
  .wkarten.in-view .a-heart{animation:dd-puls 3.2s .3s ease-in-out infinite}
  .wkarten.in-view .a-look .pup{animation:dd-schauen 4.6s .5s ease-in-out infinite}
  .wkarten.in-view .a-smile .mund{animation:dd-laecheln 4s .7s ease-in-out infinite}
  .wkarten.in-view .a-smile .zw{animation:dd-zwinkern 4s .7s ease-in-out infinite}
}
@keyframes dd-blink{0%,30%,46%,100%{transform:scaleY(1)}36%,40%{transform:scaleY(.08)}}
@keyframes dd-kompass{0%{transform:rotate(0)}16%{transform:rotate(250deg)}25%{transform:rotate(160deg)}33%{transform:rotate(200deg)}40%,50%{transform:rotate(180deg)}66%{transform:rotate(430deg)}75%{transform:rotate(340deg)}83%{transform:rotate(380deg)}90%,100%{transform:rotate(360deg)}}
@keyframes dd-wehen{0%,88%,100%{transform:skewY(0) scaleX(1)}14%{transform:skewY(-8deg) scaleX(.93)}30%{transform:skewY(4deg) scaleX(1)}46%{transform:skewY(-6deg) scaleX(.95)}62%{transform:skewY(3deg) scaleX(1)}76%{transform:skewY(-2deg) scaleX(.98)}}
@keyframes dd-glimmen{0%,72%,100%{fill:transparent}14%,24%{fill:currentColor;fill-opacity:.4}19%{fill-opacity:.12}42%{fill:currentColor;fill-opacity:.35}}
@keyframes dd-heben{0%,62%,100%{transform:translateY(0)}20%,42%{transform:translateY(-4px)}}
@keyframes dd-puls{0%,46%,100%{transform:scale(1)}10%{transform:scale(1.18)}20%{transform:scale(1)}30%{transform:scale(1.12)}40%{transform:scale(1)}}
@keyframes dd-balken{0%,70%,100%{transform:scaleY(1)}22%{transform:scaleY(.35)}48%{transform:scaleY(1.08)}58%{transform:scaleY(1)}}
@keyframes dd-schild{0%,55%,100%{transform:scale(1)}15%{transform:scale(1.1)}30%{transform:scale(1)}}
@keyframes dd-haken{0%,4%{stroke-dashoffset:0}12%,16%{stroke-dashoffset:1}40%,100%{stroke-dashoffset:0}}
@keyframes dd-schauen{0%,80%,100%{transform:translateX(0)}14%,32%{transform:translateX(-2.6px)}48%,66%{transform:translateX(2.6px)}}
@keyframes dd-laecheln{0%,62%,100%{transform:scaleY(1)}20%,42%{transform:scaleY(1.5)}}
@keyframes dd-zwinkern{0%,48%,62%,100%{transform:scaleY(1)}53%,57%{transform:scaleY(.1)}}


/* Ausführlicher Ablauf (Overlay auf Leistungen): je Schritt Text, Ergebnis, Beitrag */
dialog.ovl .steps.lang{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:700px){dialog.ovl .steps.lang{grid-template-columns:1fr}}
.steps.lang .step{gap:10px;padding:24px 24px 22px}
.steps.lang .step p{font-size:15px;line-height:1.65}
.steps.lang dl{margin:6px 0 0;padding-top:12px;border-top:2px dashed var(--line,rgba(54,100,131,.2));display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:14.5px;line-height:1.5}
.steps.lang dt{font-weight:700;color:var(--blue-text)}
.steps.lang .step:nth-child(4n+1) dt,.steps.lang .step:nth-child(4n+4) dt{color:var(--heading)}
.steps.lang dd{margin:0}
.danach{margin:22px 0 0;font-size:15.5px}

[tabindex="-1"]:focus:not(:focus-visible){outline:none}
/* Vergleichstabelle: ruhigere Zeilen, keine Trennung in Zusammensetzungen */
.nw{white-space:nowrap}
.vgl .sec-lead{max-width:46em;text-wrap:balance}
.vgl-t td{text-wrap:pretty}
@media (min-width:701px){.vgl-t th,.vgl-t td{padding:16px 24px}.vgl-t tbody th{width:20%}.vgl-t td:nth-child(2){width:37%}.vgl-t thead th{vertical-align:middle;padding-block:18px}}

/* AGB und Widerruf: Inhaltsverzeichnis, Listen mit Unterpunkten, Muster-Formular */
.agb-toc{margin:28px 0 8px;padding:18px 22px;border-radius:16px;background:var(--box);box-shadow:0 8px 24px var(--shadow-soft)}
.agb-toc b{font:700 15px var(--font-heading);letter-spacing:1.2px;text-transform:uppercase;color:var(--blue-text)}
.agb-toc ol{list-style:none;margin:10px 0 0;padding:0;columns:2 240px;column-gap:28px;font-size:15px}
.agb-toc li{break-inside:avoid;margin:0 0 4px}
.agb-toc a{text-decoration:none}.agb-toc a:hover{text-decoration:underline}
.agb h2{font-size:clamp(21px,2.2vw,25px)}
.agb h3{font-size:18px}
.agb li{line-height:1.65}
.agb li::marker{color:var(--primary)}
.agb li>ul{list-style:circle}
.agb li.lab{list-style:none;margin-left:-1.3em;margin-top:.8em}
.agb li.lab>b{color:var(--heading)}
.agb address{font-style:normal;margin:.6em 0;padding:10px 14px;border-left:4px solid var(--primary);background:var(--box);border-radius:0 10px 10px 0}
.formular-muster{margin-top:16px;padding:clamp(18px,3vw,28px);border:2px dashed var(--hairline);border-radius:16px}
.formular-muster table{display:table}
.formular-muster th{width:45%;font-weight:600}
.formular-muster td{height:2.4em}
.formular-muster .klein{font-size:14px;color:var(--muted)}
.dshinweis{display:flex;gap:10px;align-items:flex-start;margin:0;font-size:13.5px;line-height:1.55}
.dshinweis .ic{width:20px;height:20px;color:var(--primary);flex:none;margin-top:1px}

/* Wissen: Bildunterschriften wie auf der alten Seite (zentriert, kursiv, blau), Abstand zum Text größer */
.prosa .wfig{margin:2.2em 0 2.2em}
.prosa .wfig img{margin:0 auto}
.prosa .wfig figcaption{margin-top:.55em;text-align:center;font-style:italic;font-size:14.5px;line-height:1.5;color:var(--blue-text)}
/* Kopieren-Knopf für Formeln und Code */
.cpy{display:inline-grid;place-items:center;vertical-align:middle;width:28px;height:28px;margin-left:4px;padding:0;border:1.5px solid var(--hairline);border-radius:8px;background:var(--box);color:var(--blue-text);cursor:pointer;transition:background .25s ease,color .25s ease,border-color .25s ease}
.cpy .ic{width:16px;height:16px}
.cpy:hover,.cpy:focus-visible{border-color:var(--secondary);background:var(--secondary);color:var(--on-secondary)}
.cpy.ok{border-color:var(--primary);background:var(--primary);color:var(--on-primary)}
.prosa pre.code{position:relative;padding-right:52px}
.prosa pre.code .cpy{position:absolute;top:10px;right:10px;margin:0;background:#2C3138;border-color:#4A515A;color:#E6E8EB}
.cpy-tip{position:fixed;z-index:200;transform:translate(-50%,-130%);padding:4px 10px;border-radius:8px;background:var(--secondary);color:var(--on-secondary);font:700 13px var(--font-body);pointer-events:none;animation:cpytip 1.6s ease forwards}
@keyframes cpytip{0%{opacity:0;transform:translate(-50%,-100%)}12%,75%{opacity:1;transform:translate(-50%,-130%)}100%{opacity:0;transform:translate(-50%,-150%)}}

/* Wissen: Mitmach-Tabellen und Formatvergleich */
.ftab{margin:1.8em 0 2.2em;padding:clamp(14px,2.4vw,22px);border-radius:16px;background:var(--box);box-shadow:0 8px 24px var(--shadow-soft);border-top:5px solid var(--primary)}
.ftab .ft-formel{margin:0 0 12px;font-size:14.5px}
.ft-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ftab table,.ft-scroll table{display:table;width:100%;min-width:560px;border-collapse:collapse;font-size:14.5px}
.ftab th,.ftab td{border:0;border-bottom:1px solid var(--hairline);padding:7px 8px;vertical-align:middle;white-space:nowrap}
.ftab thead th{background:transparent;font:700 13px var(--font-heading);color:var(--blue-text);white-space:normal}
.ftab tbody th{background:transparent;font-weight:700}
.ft-in{width:100%;min-width:84px;font:inherit;color:var(--heading);background:var(--site-bg);border:1.5px solid var(--hairline);border-radius:8px;padding:5px 8px;transition:border-color .25s ease,box-shadow .25s ease}
.ft-in:hover{border-color:var(--secondary)}.ft-in:focus{outline:none;border-color:var(--secondary);box-shadow:0 0 0 3px color-mix(in srgb,var(--secondary) 22%,transparent)}
.ft-n{text-align:center;font-weight:700;color:var(--blue-text)}
.ft-erg{font-weight:700;color:var(--muted)}
.ft-erg.ja{color:var(--heading);background:color-mix(in srgb,var(--primary) 22%,transparent)}
@media (prefers-reduced-motion:no-preference){.ft-erg.neu{animation:ftneu .9s ease}}
@keyframes ftneu{0%{box-shadow:inset 0 0 0 2px var(--primary)}100%{box-shadow:inset 0 0 0 2px transparent}}
.ftab figcaption{margin-top:12px;font-size:14px;line-height:1.55;color:var(--body)}
.ft-tipp{font-weight:700;color:var(--blue-text)}
.fvgl th,.fvgl td{white-space:normal;min-width:110px}
.artikel .prosa{min-width:0}.ftab,.ft-scroll{max-width:100%;min-width:0}

/* ==========================================================================
   Runde 5 · Mitmach-Elemente: Werkzeug-Finder (Start), Baukasten, Simulator, Zeit-Rechner (Leistungen)
   Bewegung langsam (0,8 bis 1,2 s), nur auf Klick oder einmal beim Sichtbarwerden, nichts in Schleife.
   ========================================================================== */

/* A · Werkzeug-Finder */
.finder{margin-top:clamp(36px,5vw,56px);background:var(--box);border-radius:20px;padding:clamp(20px,3.4vw,36px);box-shadow:0 11px 37px var(--shadow-soft);border-top:5px solid var(--primary)}
.fi-kopf{display:grid;grid-template-columns:1fr auto;gap:4px 18px;align-items:end}
.fi-kopf .kick5{grid-column:1/-1}
.fi-h{font:700 clamp(20px,2.2vw,26px)/1.3 var(--font-heading);color:var(--heading);margin:0;text-wrap:balance}
.fi-punkte{list-style:none;margin:0;padding:0;display:none;gap:6px}
.fi-punkte li{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:800 13px var(--font-heading);background:var(--site-bg);color:var(--muted);transition:background-color .8s ease,color .8s ease}
.fi-punkte li.an{background:var(--secondary);color:var(--on-secondary)}
.fi-punkte li.ok{background:var(--primary);color:var(--on-primary)}
.wf-fragen{display:grid;gap:18px;margin-top:20px}
.wf-frage b{display:block;font:700 17px var(--font-heading);color:var(--heading);margin-bottom:10px}
.wf-opts{display:flex;flex-wrap:wrap;gap:10px}
.wf-opts button{font:600 15px var(--font-body);padding:10px 16px;min-height:44px;border-radius:999px;border:2px solid var(--hairline);background:var(--site-bg);color:var(--heading);cursor:pointer;text-align:left;transition:border-color .5s ease,background-color .5s ease,color .5s ease,transform .5s ease}
.wf-opts button:hover{border-color:var(--secondary);transform:translateY(-2px)}
.wf-opts button:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
.wf-opts button[aria-pressed="true"]{background:var(--secondary);border-color:var(--primary);color:var(--on-secondary)}
.wf-erg{margin-top:24px;display:grid;grid-template-columns:72px 1fr;gap:18px;align-items:start;padding:20px;border-radius:16px;background:color-mix(in srgb,var(--primary) 14%,var(--box));opacity:.45;transition:opacity 1s ease}
.wf-erg.an{opacity:1}
.wf-erg .ibox{width:72px;height:72px;border-radius:18px;display:grid;place-items:center;background:var(--primary);color:var(--on-primary)}
.wf-erg .ibox .ic{width:38px;height:38px}
.wf-erg h4{font:700 21px var(--font-heading);color:var(--heading);margin:0 0 6px}
.wf-erg p{margin:0;font-size:15.5px;line-height:1.6}
.wf-erg .wf-cta{display:none;flex-wrap:wrap;gap:8px 22px;align-items:center;margin-top:12px}
.wf-erg.an .wf-cta{display:flex}
.wf-neu{font:600 14px var(--font-body);color:var(--muted);background:none;border:0;padding:6px 0;min-height:36px;cursor:pointer;text-decoration:underline;text-underline-offset:.2em}
@media (max-width:760px){
  /* Handy: eine Frage nach der anderen, danach nur die Empfehlung. So passt alles auf einen Bildschirm. */
  .fi-punkte{display:flex}
  .wf-frage{display:none}
  .wf-frage.aktiv{display:block}
  .finder.fertig .wf-fragen{display:none}
  .finder:not(.fertig) .wf-erg{display:none}
  .finder.fertig .wf-erg{margin-top:18px}
  .wf-erg{grid-template-columns:1fr;gap:12px}
  .wf-erg .ibox{width:56px;height:56px;border-radius:14px}
  .wf-opts{display:grid}
}
@media (prefers-reduced-motion:no-preference){
  .wf-frage.aktiv{animation:dd-rein .9s cubic-bezier(.2,.8,.2,1)}
  .finder.fertig .wf-erg{animation:dd-rein 1s cubic-bezier(.2,.8,.2,1)}
}
@keyframes dd-rein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* B · Baukasten */
.bkbox{margin-top:24px;background:var(--box);border-radius:20px;padding:clamp(18px,3vw,32px);box-shadow:0 11px 37px var(--shadow-soft)}
.bk{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;position:relative;padding-top:34px}
.bk button{position:relative;display:grid;gap:6px;justify-items:center;text-align:center;padding:18px 8px;border-radius:16px;border:2px solid transparent;background:var(--site-bg);color:var(--heading);cursor:pointer;transition:transform .8s ease,border-color .8s ease,box-shadow .8s ease}
.bk button + button::before{content:"";position:absolute;left:-11px;top:50%;width:10px;height:3px;border-radius:2px;background:var(--hairline)}
.bk .bk-n{font:700 15px var(--font-heading)}
.bk button small{font:600 12.5px var(--font-body);color:var(--muted)}
.bk button .ic{width:36px;height:36px;color:var(--blue-text);transition:transform .9s cubic-bezier(.3,1.5,.5,1)}
.bk button:nth-of-type(odd) .ic{color:var(--primary)}
.bk button:hover{transform:translateY(-3px)}
.bk button:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
.bk button[aria-pressed="true"]{border-color:var(--primary);box-shadow:0 10px 26px var(--shadow-soft);transform:translateY(-4px)}
.bk button[aria-pressed="true"] .ic{transform:scale(1.15) rotate(-6deg)}
.bk-zahl{position:absolute;top:0;left:var(--zx,10%);transform:translateX(-50%);font:800 14px var(--font-heading);background:var(--primary);color:var(--on-primary);border-radius:999px;padding:3px 10px;opacity:0;transition:left 1.2s cubic-bezier(.65,0,.3,1),opacity .8s ease;white-space:nowrap}
.bk.weg .bk-zahl{opacity:1}
.bk-text{margin-top:16px;min-height:5.4em;padding:16px 18px;border-radius:14px;background:color-mix(in srgb,var(--secondary) 8%,var(--box))}
.bk-text p{margin:0;transition:opacity .6s ease}
.bk-text p.aus{opacity:0}
.bk-text b{color:var(--blue-text)}
.bk-text .bk-titel{display:block;font:700 12.5px var(--font-heading);letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.bk-steuer{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:16px}
.bk-steuer .xb{font-size:15px;padding:9px 22px}
.bk-start .ic{width:18px;height:18px;color:var(--primary)}
.bk-start .spk,.sim-start .spk{fill:currentColor;stroke:none}
.bk-stand{font:600 14px var(--font-body);color:var(--muted)}
.bk-weiter{order:-1}
@media (max-width:760px){
  /* Handy: Bausteine als kompakte Icon-Reihe, Erklärung direkt darunter */
  .bk{gap:6px}
  .bk button{padding:12px 2px;border-radius:12px;gap:4px}
  .bk button .ic{width:26px;height:26px}
  .bk .bk-n{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .bk button .ic{width:30px;height:30px}
  .bk button small{display:none}
  .bk button + button::before{display:none}
  .bk-zahl{font-size:12px;padding:2px 8px}
}

/* C · Simulator (Overlay) */
.simzeile{margin-top:14px}
.simbtn{display:inline-flex;align-items:center;gap:12px;text-align:left;padding:10px 16px 10px 12px;border-radius:14px;border:2px solid var(--hairline);background:var(--box);color:var(--heading);cursor:pointer;font:700 15.5px var(--font-heading);transition:border-color .5s ease,transform .5s ease,box-shadow .5s ease}
.simbtn > .ic:first-child{width:34px;height:34px;padding:6px;border-radius:10px;background:var(--primary);color:var(--on-primary);flex:none}
.simbtn small{display:block;font:700 11.5px var(--font-heading);letter-spacing:1.3px;text-transform:uppercase;color:var(--blue-text)}
.simbtn .arr{width:18px;height:18px;color:var(--blue-text);transition:transform .5s ease}
.simbtn:hover,.simbtn:focus-visible{border-color:var(--primary);transform:translateY(-2px);box-shadow:0 8px 22px var(--shadow-soft)}
.simbtn:hover .arr{transform:translateX(4px)}
dialog.sim{width:min(94vw,1040px)}
@media (min-width:1000px){dialog.sim .sim-lead{max-width:none;white-space:nowrap}}
dialog.sim .fs{list-style:none;padding:0;margin:26px 0 0;display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:22px;counter-reset:fs}
dialog.sim .fs li{position:relative;padding:16px;border-radius:14px;background:var(--site-bg);counter-increment:fs;opacity:0;transform:translateY(14px);transition:opacity 1s ease,transform 1s cubic-bezier(.2,.8,.2,1),box-shadow 1s ease}
dialog.sim .fs li.an{opacity:1;transform:none;box-shadow:0 10px 26px var(--shadow-soft)}
dialog.sim .fs li + li::before{content:"";position:absolute;left:-19px;top:34px;width:16px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--primary),var(--secondary));transform:scaleX(0);transform-origin:left;transition:transform .8s ease .3s}
dialog.sim .fs li.an + li.an::before,dialog.sim .fs li + li.an::before{transform:scaleX(1)}
dialog.sim .fs li .ic{width:30px;height:30px;color:var(--primary)}
dialog.sim .fs li:nth-child(even) .ic{color:var(--blue-text)}
dialog.sim .fs li b{display:block;font:700 15.5px var(--font-heading);color:var(--heading);margin:8px 0 4px}
dialog.sim .fs li b::before{content:counter(fs) " · ";color:var(--blue-text)}
dialog.sim .fs li span{font-size:14.5px;line-height:1.5}
dialog.sim.statisch .fs li{opacity:1;transform:none}
.sim-steuer{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:24px}
.sim-steuer .xb{font-size:15px;padding:9px 22px}
.sim-start .ic{width:18px;height:18px;color:var(--primary)}
.sim-hinweis{font-size:13.5px;color:var(--muted)}
@media (max-width:860px){dialog.sim .fs{grid-template-columns:1fr 1fr}dialog.sim .fs li + li::before{display:none}}
@media (max-width:520px){dialog.sim .fs{grid-template-columns:1fr;gap:12px}dialog.sim .fs li{display:grid;grid-template-columns:30px 1fr;column-gap:12px;padding:12px 14px}dialog.sim .fs li .ic{grid-row:span 2}dialog.sim .fs li b{margin:0 0 2px}}

/* D · Zeit-Rechner */
.zrbox{margin-top:clamp(28px,4vw,44px);background:var(--box);border-radius:20px;padding:clamp(20px,3.4vw,36px);box-shadow:0 11px 37px var(--shadow-soft);display:grid;grid-template-columns:1.1fr .9fr;gap:22px 36px;align-items:center}
.zr-kopf{grid-column:1/-1}
.zr-h{font:700 clamp(20px,2.2vw,26px)/1.3 var(--font-heading);color:var(--heading);margin:4px 0 8px}
.zr-kopf p{margin:0;max-width:52em}
.zr{display:grid;gap:18px}
.zr label{display:grid;gap:8px;font:700 15px var(--font-heading);color:var(--heading)}
.zr label > span{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.zr output{font:800 22px var(--font-heading);color:var(--blue-text);min-width:2ch;text-align:right}
.zr input[type=range]{width:100%;accent-color:var(--secondary);min-height:28px}
.zr-erg{padding:22px 24px;border-radius:18px;background:var(--secondary);color:var(--on-secondary);display:grid;grid-template-columns:auto auto;justify-content:start;gap:4px 28px;align-items:end}
.zr-zahl{display:grid;gap:2px}
.zr-zahl b{font:800 clamp(26px,3vw,34px)/1 var(--font-heading);color:var(--on-secondary)}
.zr-zahl span{font:700 14px var(--font-heading);letter-spacing:.4px;opacity:.9}
.zr-zahl.gross{background:var(--primary);color:var(--on-primary);border-radius:14px;padding:10px 16px 8px}
.zr-zahl.gross b{font-size:clamp(42px,5vw,60px);color:var(--on-primary)}
.zr-zahl.gross span{font-size:16px;opacity:1}
.zr-erg p{grid-column:1/-1;margin:10px 0 0;font-size:15.5px;line-height:1.55}
.zr-erg .xb{grid-column:1/-1;justify-self:start;margin-top:14px}
.zr-zahl b.puls{animation:dd-zahl .8s ease}
@keyframes dd-zahl{40%{transform:scale(1.06)}}
@media (max-width:860px){
  /* Handy: Ergebnis steht über den Reglern, so sieht man beim Schieben beides auf einem Bildschirm */
  .zrbox{grid-template-columns:1fr;gap:16px}
  .zr-kopf p{font-size:15px}
  .zr{gap:10px;order:2}
  .zr-erg{order:1;padding:14px 16px;gap:4px 18px}
  .zr-zahl.gross{padding:8px 12px 6px}
  .zr-zahl.gross b{font-size:40px}
  .zr-erg p{font-size:13.5px;margin-top:4px}
  .zr-erg .xb{display:none}
}
@media (prefers-reduced-motion:reduce){.finder *,.bkbox *,dialog.sim *,.zrbox *{transition:none!important;animation:none!important}dialog.sim .fs li{opacity:1;transform:none}}

/* Kundenstimmen: eine Feuerwerksrakete beim Sichtbarwerden (Runde 5). Nur transform/opacity, danach leer. */
#kundenstimmen{position:relative}
.fw{position:absolute;inset:-80px 0 0;overflow:hidden;pointer-events:none;z-index:1}
.fw-x{position:absolute;left:var(--sx);top:var(--sy)}
.fw-r{display:block;width:40px;height:40px;margin:-20px 0 0 -20px;transform:rotate(45deg)}
.fw-r svg{width:100%;height:100%;overflow:visible}
.fw-r .koerper{fill:var(--secondary);stroke:var(--primary);stroke-width:1.6}
.fw-r .flamme{fill:#F5B83D}
.fw-spur{position:absolute;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:var(--primary)}
.fw-p{position:absolute;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;box-shadow:0 0 8px currentColor}
.fw-p.klein{width:5px;height:5px;margin:-2.5px 0 0 -2.5px}
.fw-t{position:absolute;transform:translate(-50%,-50%);font:800 clamp(22px,3vw,34px)/1 var(--font-heading);letter-spacing:.5px;white-space:nowrap}
.fw-t .g{color:var(--kw-green)} .fw-t .b{color:var(--blue-text)}

/* ---------- Runde 6 (15.10.2026) ---------- */
/* Hinweis „Chaos → Ordnung“: Chaos rot (status-critical) und unruhig, Ordnung als grüne Pille mit dunkler Schrift */
.tidyhint .chaos{color:#A85A4E;font-weight:800;display:inline-block}
.tidyhint .ordnung{background:var(--primary);color:var(--on-primary);font-weight:800;padding:1px 9px;border-radius:999px;display:inline-block}
:root[data-theme="dark"] .tidyhint .chaos{color:#D89386}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tidyhint .chaos{color:#D89386}}
@media (prefers-reduced-motion:no-preference){
  .lockwrap.bereit:not(.gespielt) .tidyhint .chaos{animation:dd-zittern 2.4s ease-in-out infinite}
}
@keyframes dd-zittern{0%,52%,100%{transform:none}4%{transform:translate(-1px,1px) rotate(-3deg)}8%{transform:translate(1px,-1px) rotate(3deg)}12%{transform:translate(-1px,0) rotate(-2deg)}16%{transform:translate(1px,1px) rotate(2deg)}20%{transform:none}}

/* Zitat: jede Zeile bleibt zusammen (Umbrüche bewusst gesetzt), nur am Handy darf sie umbrechen */
.zitat .zl{white-space:nowrap}
@media (max-width:420px){.zitat .zl{white-space:normal}}

/* Grafiken (Runde 6): weitere Bewegungen beim Einblenden. data-pop springt auf, data-fill füllt sich von links. */
.art [data-pop]{transform-box:fill-box;transform-origin:center;transition:opacity .9s ease var(--d,0s),transform 1s cubic-bezier(.3,1.45,.5,1) var(--d,0s)}
.art.wait [data-pop]{opacity:0;transform:scale(.55);transition-duration:0s;transition-delay:0s}
.art [data-fill]{transform-box:fill-box;transform-origin:left center;transition:transform var(--t,1s) cubic-bezier(.4,0,.2,1) var(--d,0s)}
.art.wait [data-fill]{transform:scaleX(0);transition-duration:0s;transition-delay:0s}
/* Power BI: Säulen und Linie langsamer, der Start bleibt gleich */
#power-bi .art [data-grow]{transition-duration:2.4s}
#power-bi .art [data-draw]{--dd:2.6s;--dt:3.4s}
/* Power Apps: Speichern wird gedrückt, Datensatz wandert in die Datenbank */
.art .pa-dot{opacity:0;transform-box:fill-box}
/* Power Automate: Umschlag wippt, Pfeile drehen sich, Tabelle nickt; nur solange sichtbar */
.art .pa-mail,.art .pa-tab{transform-box:fill-box;transform-origin:center}
.art .pa-rot{transform-box:fill-box;transform-origin:center}
/* Power Query: Tabelle wird mit jedem Schritt sauberer */
.art .pq-z{transform-box:fill-box;transform-origin:left center;transition:transform 1.2s cubic-bezier(.4,0,.2,1) var(--d,0s)}
.art.wait .pq-z{transform:scaleX(var(--sx,1));transition-duration:0s;transition-delay:0s}
.art .pq-weg{opacity:0;transition:opacity .9s ease var(--d,0s)}
.art.wait .pq-weg{opacity:1;transition-duration:0s;transition-delay:0s}
.art .pq-titel{font:800 13px var(--font-heading);fill:#F7F7F7}
.art .pq-s text{font:700 12.5px var(--font-heading);fill:var(--heading)}
.art .pq-s{transition:opacity .7s ease var(--d,0s)}
.art.wait .pq-s{opacity:.28;transition-duration:0s;transition-delay:0s}
.art .pq-ok{fill:none;stroke:var(--primary);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:14;stroke-dashoffset:0;transition:stroke-dashoffset .6s ease calc(var(--d,0s) + .5s)}
.art.wait .pq-ok{stroke-dashoffset:14;transition-duration:0s;transition-delay:0s}
/* Glühbirne (Schulungen, Wissen): Schein pulsiert langsam, sobald sie an ist */
.art .aha-schein{transform-box:fill-box;transform-origin:center;opacity:0}
/* Wissen-Kopf: Zeichen steigen auf, ab und zu blättert eine Seite um */
.wkopf .wz text{font:800 15px var(--font-heading);fill:#F7F7F7}
.wkopf .wz text.dunkel{fill:#2B2D32}
.wkopf .wz text.klein{font-size:10px}
.wkopf .wz{transform-box:fill-box;transform-origin:center;opacity:0}
.wkopf .wk-blatt{transform-box:view-box;transform-origin:202px 0;opacity:0}
@media (prefers-reduced-motion:no-preference){
  .art.in-view .pa-dot{animation:dd-flug 1.6s ease-in-out 5.8s both}
  .art.in-view .pa-knopf{animation:dd-druck .5s ease-in-out 4.9s both}
  .art.in-view .pa-mail{animation:dd-wippen 3s ease-in-out .3s 1}
  .art.in-view .pa-tab{animation:dd-nicken 3.6s ease-in-out 2.4s 1}
  .art.in-view .pa-rot{animation:dd-drehen 3.2s cubic-bezier(.6,0,.3,1) 4.3s 1}
  .art.in-view .aha-schein{animation:dd-schein 2.8s ease-in-out 3.9s infinite}
  .wkopf.in-view .aha-schein{animation-delay:2.9s}
  .wkopf.in-view .wz1{animation:dd-steigen 10s ease-out 0.6s infinite}
  .wkopf.in-view .wz2{animation:dd-steigen 10s ease-out 1.6s infinite}
  .wkopf.in-view .wz3{animation:dd-steigen 10s ease-out 2.6s infinite}
  .wkopf.in-view .wz4{animation:dd-steigen 10s ease-out 3.6s infinite}
  .wkopf.in-view .wz5{animation:dd-steigen 10s ease-out 4.6s infinite}
  .wkopf.in-view .wz6{animation:dd-steigen 10s ease-out 5.6s infinite}
  .wkopf.in-view .wz7{animation:dd-steigen 10s ease-out 6.6s infinite}
  .wkopf.in-view .wz8{animation:dd-steigen 10s ease-out 7.6s infinite}
  .wkopf.in-view .wz9{animation:dd-steigen 10s ease-out 8.6s infinite}
  .wkopf.in-view .wz10{animation:dd-steigen 10s ease-out 9.6s infinite}
  .wkopf.in-view .wk-blatt{animation:dd-blaettern 7s ease-in-out 4s infinite}
}
@media (prefers-reduced-motion:reduce){.art .pa-dot{opacity:0}.art .aha-schein{opacity:.22}.wkopf .wz{opacity:1}}
@keyframes dd-flug{0%{opacity:0;transform:none}15%{opacity:1}80%{opacity:1;transform:translateX(52px)}100%{opacity:0;transform:translateX(58px)}}
@keyframes dd-druck{50%{transform:scale(.88)}}
@keyframes dd-wippen{0%,60%,100%{transform:none}15%{transform:translateY(-4px) rotate(-4deg)}30%{transform:translateY(0) rotate(3deg)}45%{transform:translateY(-2px) rotate(0)}}
@keyframes dd-nicken{0%,55%,100%{transform:none}20%{transform:scale(1.1)}35%{transform:scale(.97)}}
@keyframes dd-drehen{0%,30%{transform:rotate(0)}75%,100%{transform:rotate(360deg)}}
@keyframes dd-schein{0%,100%{opacity:.12;transform:scale(.9)}50%{opacity:.35;transform:scale(1.12)}}
@keyframes dd-steigen{0%{opacity:0;transform:translateY(40px) scale(.6)}20%{opacity:1;transform:translateY(0) scale(1)}70%{opacity:1;transform:translateY(-34px) scale(1)}100%{opacity:0;transform:translateY(-60px) scale(.8)}}
@keyframes dd-blaettern{0%,72%,100%{opacity:0;transform:scaleX(1)}74%{opacity:1;transform:scaleX(1)}86%{opacity:1;transform:scaleX(-1)}88%{opacity:0;transform:scaleX(-1)}}

/* Baukasten: Zeitbalken je Schritt, Pause-Knopf */
.bk-text{position:relative;overflow:hidden}
.bk-zeit{position:absolute;left:0;right:0;bottom:0;height:4px;background:color-mix(in srgb,var(--secondary) 12%,transparent)}
.bk-zeit i{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));transform:scaleX(0);transform-origin:left}
.bk-pause{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:2px solid var(--hairline);background:var(--box);color:var(--heading);font:700 14px var(--font-heading);cursor:pointer}
.bk-pause .ic{width:18px;height:18px;color:var(--blue-text)}
.bk-pause:hover,.bk-pause:focus-visible{border-color:var(--primary)}
.bk-pause[hidden]{display:none}

/* Zeit-Rechner: Ampel je nach Arbeitstagen (Farben aus dem Design-System) */
.zr-zahl.gross{transition:background-color .8s ease,color .8s ease}
.zr-zahl.gross[data-stufe="gelb"]{background:#D9A53F}
.zr-zahl.gross[data-stufe="orange"]{background:#D07A3C;color:#1E2024}
.zr-zahl.gross[data-stufe="orange"] b{color:#1E2024}
.zr-zahl.gross[data-stufe="rot"]{background:#A85A4E;color:#F7F7F7}
.zr-zahl.gross[data-stufe="rot"] b{color:#F7F7F7}
.zr-zahl.gross b{transition:color .8s ease}
.zr-erg .zr-stufe{margin-top:6px;font-weight:700;font-size:15.5px}
.zr-erg .zr-fn{display:block;margin-top:10px;font-size:13px}
.zr-zahl sup{font-size:1.25em;font-weight:800;line-height:0;margin-left:2px;vertical-align:.15em}
@media (max-width:860px){.zr-erg .zr-stufe{font-size:13.5px;margin-top:2px}}

/* Wissen: Überschriften blau (Grün hätte auf hellem Grund nur ca. 2:1 Kontrast), fette Wörter immer blau */
.prosa h2,.prosa h3,.prosa h4{color:var(--blue-text)}
.prosa strong,.prosa b{color:var(--blue-text)}

/* Feuerwerk (Runde 6): größer, zwei Raketen, Blitz, Glitzer, Sterne in der Mitte */
.fw-r .fenster{fill:var(--primary)}
.fw-spur{width:6px;height:6px;margin:-3px 0 0 -3px}
.fw-spur.b{background:var(--blue-text)}
.fw-p{width:10px;height:10px;margin:-5px 0 0 -5px}
.fw-blitz{position:absolute;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--primary) 70%,transparent),transparent 70%)}
.fw-glitzer{position:absolute;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:#F7F7F7;box-shadow:0 0 6px 2px color-mix(in srgb,var(--primary) 80%,transparent)}
.fw-t.fw-sterne,.fw-t.fw-daumen{display:flex;gap:8px}
.fw-t .ic{width:clamp(30px,3.6vw,44px);height:clamp(30px,3.6vw,44px);fill:currentColor;stroke:none}
.fw-t.fw-sterne .ic:nth-child(odd){color:var(--primary)} .fw-t.fw-sterne .ic:nth-child(even){color:var(--blue-text)}
.fw-t.fw-daumen .ic{width:56px;height:56px;color:var(--primary)}

/* Zusammenarbeit (Runde 6): Kopf je Modell mit Grafik, Modell-Finder */
.mod-kopf{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(20px,4vw,48px);align-items:center}
.mod-kopf .art{max-width:380px}
@media (max-width:860px){.mod-kopf{grid-template-columns:1fr}.mod-kopf .art{max-width:320px;justify-self:start}}
.art .m-txt{font:800 17px var(--font-heading);fill:#F7F7F7}
.art .m-txt.d{fill:var(--heading)}
.art .m-abo{font-size:24px;letter-spacing:.5px}
.art .m-klein{font:600 12px var(--font-body);fill:var(--muted)}
.art .fix-fahne{transform-box:fill-box;transform-origin:left center}
.art .loop-rot{transform-box:view-box;transform-origin:200px 130px}
.art .loop-k{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:no-preference){
  .art.in-view .fix-fahne{animation:dd-wehen 3.4s ease-in-out 4.6s infinite}
  .art.in-view .loop-rot{animation:dd-kreisen 7s linear infinite}
  .art.in-view .loop-k{animation:dd-melden 7s ease-in-out var(--d,0s) infinite}
}
@keyframes dd-kreisen{to{transform:rotate(360deg)}}
@keyframes dd-melden{0%,22%,100%{transform:none}8%{transform:scale(1.14)}15%{transform:scale(1)}}
.mfinder{margin-top:0}

/* Fußzeile: Hinweis nur für Unternehmen */
.s-foot .b2b{font-size:13.5px;opacity:.85;margin-top:6px}
/* AGB: Fortsetzungstext nach Unterpunkten */
.agb li > p.weiter{margin:.4em 0 0}

/* Startseite: Typische Muster als Kopf + Karten-Raster (Runde 6, Variante V1) */
.probl1 .kopf{display:grid;grid-template-columns:1fr 1fr;gap:12px 48px;align-items:center}
.probl1 .kopf .reframe{margin:0}
.probl1 .mk{list-style:none;margin:28px 0 0;padding:0;background:none;box-shadow:none;border:0;border-radius:0;display:grid;grid-template-columns:repeat(6,1fr);gap:16px;counter-reset:m}
.probl1 .mk li{grid-column:span 2;counter-increment:m;background:var(--box);border-radius:18px;padding:18px 18px 16px;box-shadow:0 11px 37px var(--shadow-soft);display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-content:start}
.probl1 .mk li:nth-child(4){grid-column:2/span 2}
.probl1 .mk li::before{content:counter(m,decimal-leading-zero);grid-row:span 2;font:800 28px/1 var(--font-heading);color:var(--kw-green)}
.probl1 .mk li:nth-child(even)::before{color:var(--blue-text)}
.probl1 .mk h3{font-size:17px;margin:2px 0 0}
.probl1 .mk p{font-size:14.5px;line-height:1.55;margin:0}
@media (max-width:900px){.probl1 .kopf{grid-template-columns:1fr}.probl1 .mk{grid-template-columns:1fr 1fr}.probl1 .mk li,.probl1 .mk li:nth-child(4){grid-column:auto}}
@media (max-width:560px){.probl1 .mk{grid-template-columns:1fr}}

/* Projektseiten: Ergebnis auf einen Blick, Ausgangslage → Lösung → Ergebnis, Werkzeugkette (Runde 6) */
.pstart{margin-bottom:clamp(40px,6vw,64px)}
.ergebnis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:22px}
.ergebnis div{background:var(--box);border-radius:18px;padding:18px 20px;box-shadow:0 11px 37px var(--shadow-soft);border-top:5px solid var(--primary)}
.ergebnis div:nth-child(2){border-top-color:var(--secondary)}
.ergebnis b{display:block;font:800 clamp(34px,4vw,46px)/1 var(--font-heading);color:var(--blue-text);font-variant-numeric:tabular-nums}
.ergebnis span{display:block;margin-top:8px;font:600 14.5px/1.45 var(--font-body);color:var(--heading)}
.pstory{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.pstory li{position:relative;background:var(--box);border-radius:18px;padding:18px 20px;box-shadow:0 11px 37px var(--shadow-soft);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.pstory li:nth-child(2){transition-delay:.7s}.pstory li:nth-child(3){transition-delay:1.4s}
.pstory li + li::before{content:"";position:absolute;left:-23px;top:50%;width:20px;height:4px;margin-top:-2px;border-radius:2px;background:linear-gradient(90deg,var(--primary),var(--secondary))}
.pstory .pst-k{display:inline-block;font:800 12.5px var(--font-heading);letter-spacing:1.4px;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:var(--secondary);color:var(--on-secondary)}
.pstory li:nth-child(2) .pst-k{background:var(--primary);color:var(--on-primary)}
.pstory li:nth-child(3) .pst-k{background:var(--marine);color:var(--on-secondary)}
.pstory p{margin:10px 0 0;font-size:15px;line-height:1.6}
.pstory.wait li{opacity:0;transform:translateY(16px);transition-duration:0s;transition-delay:0s}
.kette-box{margin-top:28px}
.kette{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.kette li{position:relative;display:grid;justify-items:center;text-align:center;gap:6px;transition:opacity .7s ease,transform .8s cubic-bezier(.3,1.4,.5,1)}
.kette li:nth-child(2){transition-delay:.9s}.kette li:nth-child(3){transition-delay:1.8s}.kette li:nth-child(4){transition-delay:2.7s}
.kette .kg-ic{display:grid;place-items:center;width:64px;height:64px;border-radius:20px;background:var(--box);box-shadow:0 10px 26px var(--shadow-soft);border:2px solid var(--primary)}
.kette li:nth-child(even) .kg-ic{border-color:var(--secondary)}
.kette .kg-ic .ic{width:30px;height:30px;color:var(--blue-text)}
.kette li:nth-child(odd) .kg-ic .ic{color:var(--primary)}
.kette b{font:700 15.5px var(--font-heading);color:var(--heading)}
.kette small{font-size:13.5px;line-height:1.4;color:var(--muted)}
.kette li + li::before{content:"";position:absolute;top:31px;right:calc(50% + 40px);width:calc(100% - 52px);height:4px;border-radius:2px;background:linear-gradient(90deg,var(--primary),var(--secondary));transform-origin:left;transition:transform .8s ease}
.kette li:nth-child(2)::before{transition-delay:.4s}.kette li:nth-child(3)::before{transition-delay:1.3s}.kette li:nth-child(4)::before{transition-delay:2.2s}
.kette.wait li{opacity:0;transform:scale(.7);transition-duration:0s;transition-delay:0s}
.kette.wait li + li::before{transform:scaleX(0);transition-duration:0s;transition-delay:0s}
@media (max-width:760px){
  .ergebnis,.pstory{grid-template-columns:1fr}
  .ergebnis div{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center}
  .ergebnis span{margin:0}
  .pstory li + li::before{left:50%;top:-20px;width:4px;height:14px;margin:0 0 0 -2px}
  .kette{grid-template-columns:1fr 1fr;gap:22px 16px}
  .kette li + li::before{display:none}
}
@media (prefers-reduced-motion:reduce){.pstory li,.kette li,.kette li::before{transition:none!important}}

/* Runde 7 · Power Query als Vorschau-Tabelle: Quelle, Spalten entfernen, Datentyp, Filter */
.art .pq-an{transition:opacity .9s ease var(--d,0s)}
.art.wait .pq-an{opacity:0;transition-duration:0s;transition-delay:0s}
.art .pq-rueck{transition:transform 1s cubic-bezier(.4,0,.2,1) var(--d,0s)}
.art.wait .pq-rueck{transform:translateX(var(--dx,0));transition-duration:0s;transition-delay:0s}
.art .pq-tab text{font:500 9px var(--font-body);fill:var(--heading)}
.art .pq-tab .pq-kopf{font:700 9.5px var(--font-heading);fill:#2B2D32}
.art .pq-tab .pq-typ{font:700 7.5px var(--font-body);fill:#2B2D32;fill-opacity:.6}
.art .pq-tab .pq-null{font-style:italic;fill-opacity:.5}
.art .pq-linie{stroke:var(--heading);stroke-opacity:.14;stroke-width:1}
.wf-opts button:disabled{opacity:.4;cursor:not-allowed;transform:none;text-decoration:line-through}
.wf-erg p .tlink{white-space:nowrap}
/* Runde 7 · Projektseiten nacheinander: Karten und Stationen erscheinen einzeln (Klasse .an aus main.js) */
.kette-lauf .pstory li,.kette-lauf .kette li,.kette-lauf .kette li::before{transition-delay:0s!important}
.kette-lauf .pstory li:not(.an){opacity:0;transform:translateY(16px)}
.kette-lauf .kette li:not(.an){opacity:0;transform:scale(.7)}
.kette-lauf .kette li:not(.an)::before{transform:scaleX(0)}
/* Runde 7 · „So läuft ein Projekt“ ohne Scrollen: ab 1000 px vier Spalten, breiterer Dialog, kompaktere Karten */
dialog#ablauf{width:min(94vw,1180px)}
@media (min-width:1000px){
  dialog.ovl .steps.lang{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  dialog#ablauf .ovin{padding:32px 36px}
  .steps.lang .step{padding:20px 18px 18px}
  .steps.lang dl{grid-template-columns:1fr;gap:0}
  .steps.lang dd{margin:0 0 8px}
}