/* p6.css */
.p6x{position:absolute;inset:0;font-family:inherit}
/* ===== A: Belege fliegen rein, werden abgehakt ===== */
.p6a{background:#F4F7F7;background-image:linear-gradient(rgba(47,163,163,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(47,163,163,.12) 1px,transparent 1px);background-size:32px 32px}
.p6a .beleg{position:absolute;width:13%;aspect-ratio:3/4;background:#fff;border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,.12);padding:8px;display:flex;flex-direction:column;gap:5px;animation:aFlieg 6s cubic-bezier(.6,.05,.3,1) infinite}
.p6a .beleg i{display:block;height:4px;border-radius:2px;background:#d9dedd}.p6a .beleg i:nth-child(1){width:60%;background:#111}.p6a .beleg i:nth-child(4){width:40%;margin-top:auto;background:#2FA3A3}
.p6a .b1{left:6%;top:14%;--r:-8deg;animation-delay:0s}.p6a .b2{left:16%;top:46%;--r:6deg;animation-delay:.35s}.p6a .b3{left:28%;top:10%;--r:-3deg;animation-delay:.7s}.p6a .b4{left:8%;top:60%;--r:10deg;animation-delay:1.05s}
@keyframes aFlieg{0%{transform:rotate(var(--r)) translate(0,0) scale(1);opacity:0}8%{opacity:1}35%{transform:rotate(var(--r)) translate(0,0) scale(1);opacity:1}
 60%,100%{transform:rotate(0) translate(calc(var(--zx,330%)),calc(var(--zy,0%))) scale(.35);opacity:0}}
.p6a .b1{--zx:400%;--zy:40%}.p6a .b2{--zx:330%;--zy:-30%}.p6a .b3{--zx:250%;--zy:70%}.p6a .b4{--zx:380%;--zy:-60%}
.p6a .box{position:absolute;left:58%;top:50%;width:21%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:18px;background:#111;display:grid;place-items:center;color:#fff;font-size:15px;letter-spacing:-.01em}
.p6a .box span{position:absolute;bottom:12%;font-size:12px;color:#b7c0bf}
.p6a .ok{width:38%;aspect-ratio:1;border-radius:50%;background:#2FA3A3;display:grid;place-items:center;color:#fff;font-size:26px;transform:scale(0);animation:aOk 6s ease infinite}
@keyframes aOk{0%,55%{transform:scale(0)}63%{transform:scale(1.15)}68%,92%{transform:scale(1)}100%{transform:scale(0)}}
.p6a .rechts{position:absolute;right:5%;top:50%;transform:translateY(-50%);display:grid;gap:8px;width:20%}
.p6a .rechts div{background:#fff;border-radius:8px;padding:7px 9px;font-size:12px;display:flex;justify-content:space-between;opacity:0;animation:aZeile 6s ease infinite}
.p6a .rechts div b{color:#2FA3A3;font-weight:500}
.p6a .rechts div:nth-child(2){animation-delay:.25s}.p6a .rechts div:nth-child(3){animation-delay:.5s}
@keyframes aZeile{0%,62%{opacity:0;transform:translateX(10px)}70%,92%{opacity:1;transform:none}100%{opacity:0}}

/* ===== B: Jahres-Uhr – Fristen werden abgehakt ===== */
.p6b{background:#10302F;color:#F2F4F3}
.p6b .monate{position:absolute;left:5%;right:5%;top:50%;transform:translateY(-50%);display:grid;grid-template-columns:repeat(12,1fr);gap:6px}
.p6b .m{position:relative;height:clamp(56px,12vw,110px);border-radius:8px;background:rgba(255,255,255,.06);overflow:hidden;animation:bM 7.2s linear infinite}
.p6b .m::before{content:"";position:absolute;inset:0;background:#2FA3A3;transform:scaleY(0);transform-origin:bottom;animation:bFill 7.2s linear infinite;animation-delay:inherit}
.p6b .m span{position:absolute;left:0;right:0;bottom:6px;text-align:center;font:500 10px ui-monospace,monospace;letter-spacing:.06em;color:rgba(255,255,255,.7);z-index:1}
.p6b .m b{position:absolute;left:0;right:0;top:8px;text-align:center;font-weight:400;font-size:14px;z-index:1;opacity:0;animation:bOk 7.2s linear infinite;animation-delay:inherit}
@keyframes bFill{0%{transform:scaleY(0)}6%,88%{transform:scaleY(1)}96%,100%{transform:scaleY(0)}}
@keyframes bOk{0%,5%{opacity:0}8%,88%{opacity:1}96%,100%{opacity:0}}
.p6b .tx{position:absolute;left:5%;top:9%;font-size:13px;color:#b7c0bf}.p6b .tx b{color:#fff;font-weight:400}
.p6b .fz{position:absolute;right:5%;top:9%;font:500 11px ui-monospace,monospace;letter-spacing:.12em;color:#7fd6d4}

/* ===== C: Team-Fotos wechseln (deine freigestellten Porträts) ===== */
.p6c{background:linear-gradient(180deg,#e9efee,#F4F7F7)}
.p6c .kopf{position:absolute;bottom:0;height:96%;opacity:0;animation:cW 12s ease infinite}
.p6c .kopf img{height:100%;display:block}
.p6c .k1{left:8%;animation-delay:0s}.p6c .k2{left:30%;animation-delay:3s}.p6c .k3{left:52%;animation-delay:6s}.p6c .k4{left:72%;animation-delay:9s}
@keyframes cW{0%{opacity:0;transform:translateY(8px)}5%,40%{opacity:1;transform:none}48%,100%{opacity:0}}
.p6c .chip{position:absolute;left:4%;top:8%;background:#111;color:#fff;border-radius:99px;padding:6px 12px;font-size:12px}
@media (prefers-reduced-motion:reduce){.p6x *,.p6x *::before{animation:none!important;opacity:1!important}}

/* p7.css */
.p7x{position:absolute;inset:0;font-family:inherit;color:#111;background:#F4F7F7;background-image:linear-gradient(rgba(47,163,163,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(47,163,163,.12) 1px,transparent 1px);background-size:32px 32px;overflow:hidden}
/* A: drei Optionen werden durchgerechnet, die beste leuchtet */
.p7a .opt{position:absolute;top:16%;bottom:16%;width:24%;background:#fff;border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,.08);padding:10px 12px;display:flex;flex-direction:column;gap:6px;animation:p7aKarte 7s ease infinite}
.p7a .o1{left:8%}.p7a .o2{left:38%}.p7a .o3{left:68%}
.p7a .opt h5{margin:0;font-weight:500;font-size:13px}.p7a .opt small{font-size:11px;color:#595755}
.p7a .bar{margin-top:auto;height:8px;border-radius:4px;background:#e6ebea;overflow:hidden}.p7a .bar i{display:block;height:100%;background:#111;width:var(--w);transform:scaleX(0);transform-origin:left;animation:p7aBar 7s ease infinite}
.p7a .wert{font:500 12px ui-monospace,monospace;opacity:0;animation:p7aWert 7s ease infinite}
.p7a .o2{animation-name:p7aBeste}.p7a .o2 .bar i{background:#2FA3A3}
.p7a .tag{position:absolute;right:10px;top:10px;background:#2FA3A3;color:#fff;font-size:10px;border-radius:99px;padding:3px 8px;opacity:0;animation:p7aTag 7s ease infinite}
@keyframes p7aBar{0%,10%{transform:scaleX(0)}40%,92%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes p7aWert{0%,38%{opacity:0}45%,92%{opacity:1}100%{opacity:0}}
@keyframes p7aKarte{0%,55%{opacity:1}62%,90%{opacity:.45}100%{opacity:1}}
@keyframes p7aBeste{0%,55%{transform:none;box-shadow:0 6px 18px rgba(0,0,0,.08)}62%,90%{transform:translateY(-6px) scale(1.04);box-shadow:0 0 0 2px #2FA3A3,0 14px 30px rgba(47,163,163,.25)}100%{transform:none}}
@keyframes p7aTag{0%,58%{opacity:0;transform:scale(.6)}64%,90%{opacity:1;transform:none}100%{opacity:0}}
/* B: Entscheidungsbaum – Linien wachsen, ein Weg wird türkis */
.p7b svg{position:absolute;inset:0;width:100%;height:100%}
.p7x.p7b svg path{fill:none!important;stroke:#111!important;stroke-width:2!important;stroke-dasharray:1!important;stroke-dashoffset:1;animation:p7bLinie 7s ease infinite}
.p7x.p7b svg path.gut{stroke:#2FA3A3!important;stroke-width:3.5!important;animation-name:p7bGut}
.p7b circle{fill:#111}.p7b circle.z{fill:#fff;stroke:#111;stroke-width:2;opacity:0;animation:p7bPunkt 7s ease infinite}.p7b circle.zg{fill:#2FA3A3;stroke:#2FA3A3;animation-name:p7bPunktG}
.p7b text{font-size:13px;font-weight:500;fill:#111;opacity:0;animation:p7bPunkt 7s ease infinite}.p7b text.tg{fill:#1F7E7E;animation-name:p7bPunktG}
@keyframes p7bLinie{0%,8%{stroke-dashoffset:1}35%,92%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:1;opacity:0}}
@keyframes p7bGut{0%,48%{stroke-dashoffset:1}62%,92%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:1;opacity:0}}
@keyframes p7bPunkt{0%,30%{opacity:0}38%,92%{opacity:1}100%{opacity:0}}
@keyframes p7bPunktG{0%,58%{opacity:0}64%,92%{opacity:1}100%{opacity:0}}
/* C: Säulen – Steuerlast ohne und mit Planung */
.p7c .spalten{position:absolute;left:14%;right:30%;bottom:20%;top:18%;display:grid;grid-template-columns:1fr 1fr;gap:18%;align-items:end}
.p7c .sp{position:relative;border-radius:10px 10px 0 0;transform-origin:bottom;animation:p7cWachs 7s ease infinite}
.p7c .s1{height:90%;background:#111}.p7c .s2{height:52%;background:#2FA3A3;animation-name:p7cWachs2}
.p7c .sp span{position:absolute;left:-20px;right:-20px;bottom:-22px;text-align:center;font-size:12px;color:#595755}
.p7c .sp b{position:absolute;left:-20px;right:-20px;top:-24px;text-align:center;font-weight:500;font-size:14px;opacity:0;animation:p7cWert 7s ease infinite}
.p7c .diff{position:absolute;right:6%;top:40%;background:#fff;border-radius:12px;padding:10px 14px;font-size:13px;box-shadow:0 6px 18px rgba(0,0,0,.08);opacity:0;animation:p7cDiff 7s ease infinite}.p7c .diff b{display:block;color:#1F7E7E;font-weight:400;font-size:26px;letter-spacing:-.02em}
.p7c .lin{position:absolute;left:8%;right:28%;bottom:20%;height:1px;background:#111}
@keyframes p7cWachs{0%,8%{transform:scaleY(0)}30%,92%{transform:scaleY(1)}100%{transform:scaleY(0)}}
@keyframes p7cWachs2{0%,36%{transform:scaleY(0)}58%,92%{transform:scaleY(1)}100%{transform:scaleY(0)}}
@keyframes p7cWert{0%,55%{opacity:0}62%,92%{opacity:1}100%{opacity:0}}
@keyframes p7cDiff{0%,64%{opacity:0;transform:translateY(6px)}72%,92%{opacity:1;transform:none}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.p7x *{animation:none!important;opacity:1!important;stroke-dashoffset:0!important}}

/* p8e.css */
/* Platz 8 – E: wie D, aber Glas-Optik und mehr Luft (Zahl links, Struktur rechts) */
.p8e{position:absolute;inset:0;color:#111;overflow:hidden;font-family:inherit;background:#EEF3F2}
.p8e .bl{position:absolute;border-radius:50%;filter:blur(28px);opacity:.75;animation:p8eBl 14s ease-in-out infinite alternate}
.p8e .bl1{width:46%;height:120%;left:-8%;top:-30%;background:radial-gradient(circle,#9fdcd9,rgba(159,220,217,0) 70%)}
.p8e .bl2{width:40%;height:110%;right:-6%;bottom:-40%;background:radial-gradient(circle,#2FA3A3,rgba(47,163,163,0) 70%);opacity:.45;animation-delay:-5s}
.p8e .bl3{width:30%;height:90%;left:45%;top:-35%;background:radial-gradient(circle,#ffffff,rgba(255,255,255,0) 70%);opacity:.9;animation-delay:-9s}
@keyframes p8eBl{0%{transform:translate(0,0)}100%{transform:translate(8%,10%)}}
.p8e .gl{background:rgba(255,255,255,.42);-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);border:1px solid rgba(255,255,255,.8);box-shadow:0 10px 30px rgba(17,20,19,.07),inset 0 1px 0 rgba(255,255,255,.9)}
/* linke Karte: Steuerlast */
.p8e .zahl{position:absolute;left:4%;top:12%;bottom:12%;width:30%;border-radius:18px;padding:14px 16px;display:flex;flex-direction:column;justify-content:space-between}
.p8e .zahl .wer{display:flex;align-items:center;gap:8px;font:500 10px ui-monospace,Menlo,monospace;letter-spacing:.12em;color:#595755}
.p8e .zahl .wer i{width:26px;height:26px;border-radius:50%;background:#111;display:grid;place-items:center;flex:none}
.p8e .zahl .wer i svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:1.8}
.p8e .zahl b{display:block;font-weight:300;font-size:clamp(34px,4.2vw,58px);line-height:1;letter-spacing:-.04em;transition:color .5s}
.p8e.s2 .zahl b,.p8e.s3 .zahl b,.p8e.s4 .zahl b{color:#1F7E7E}
.p8e .zahl small{font:500 10px ui-monospace,Menlo,monospace;letter-spacing:.12em;color:#1F7E7E;min-height:1.3em}
/* rechte Fläche: Struktur */
.p8e .feld{position:absolute;left:38%;right:3%;top:0;bottom:0}
.p8e .k{position:absolute;transform:translate(-50%,-50%) scale(.9);opacity:0;border-radius:14px;padding:7px 16px;font-size:12.5px;white-space:nowrap;text-align:center;transition:opacity .5s,transform .6s cubic-bezier(.3,1.3,.5,1),left .8s ease,top .8s ease}
.p8e .k small{display:block;font-size:10.5px;color:#595755;margin-top:1px}
.p8e .k.an{opacity:1;transform:translate(-50%,-50%) scale(1)}
.p8e .k.dk{background:rgba(17,20,19,.84);color:#fff;border-color:rgba(255,255,255,.25)}.p8e .k.dk small{color:#b7c0bf}
.p8e .pp{left:50%;top:15%}
.p8e .eu,.p8e .gm,.p8e .ho{left:50%;top:50%}
.p8e.s3 .gm{top:85%}
.p8e.s4 .gm{left:25%;top:85%}
.p8e .im{left:75%;top:85%}
.p8e .k.pp{display:flex;align-items:center;gap:8px;padding:5px 14px 5px 5px;border-radius:99px}.p8e .k.pp i{width:24px;height:24px;border-radius:50%;background:#111;display:grid;place-items:center}.p8e .k.pp i svg{width:13px;height:13px;fill:none;stroke:#fff;stroke-width:1.8}
.p8e svg.ln{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.p8e svg.ln path{fill:none!important;stroke:rgba(17,20,19,.55)!important;stroke-width:1.3!important;vector-effect:non-scaling-stroke;opacity:0;transition:opacity .5s ease .35s}
.p8e svg.ln path.an{opacity:1}
.p8e .weg{position:absolute;left:calc(4% + 12px);bottom:calc(12% + 10px);background:rgba(47,163,163,.88);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;border-radius:99px;padding:5px 12px;font-size:12px;opacity:0;transform:translateY(6px);transition:opacity .5s,transform .5s}
.p8e.s4 .weg{opacity:1;transform:none}.p8e .zahl small{transition:opacity .4s}.p8e.s4 .zahl small{opacity:0}
@media (prefers-reduced-motion:reduce){.p8e *{transition:none!important;animation:none!important}}

/* p9.css */
/* Platz 9 – Kompetenzen, Glas-Stil wie Platz 8 */
.p9x{position:absolute;inset:0;color:#111;overflow:hidden;font-family:inherit;background:#EEF3F2}
.p9x .bl{position:absolute;border-radius:50%;filter:blur(28px);animation:p9Bl 14s ease-in-out infinite alternate}
.p9x .bl1{width:46%;height:120%;left:-8%;top:-30%;background:radial-gradient(circle,#9fdcd9,rgba(159,220,217,0) 70%);opacity:.75}
.p9x .bl2{width:40%;height:110%;right:-6%;bottom:-40%;background:radial-gradient(circle,#2FA3A3,rgba(47,163,163,0) 70%);opacity:.45;animation-delay:-5s}
.p9x .bl3{width:30%;height:90%;left:45%;top:-35%;background:radial-gradient(circle,#fff,rgba(255,255,255,0) 70%);opacity:.9;animation-delay:-9s}
@keyframes p9Bl{0%{transform:translate(0,0)}100%{transform:translate(8%,10%)}}
.p9x .gl{background:rgba(255,255,255,.42);-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);border:1px solid rgba(255,255,255,.8);box-shadow:0 10px 30px rgba(17,20,19,.07),inset 0 1px 0 rgba(255,255,255,.9)}
.p9x .chip{border-radius:99px;padding:7px 14px;font-size:12.5px;white-space:nowrap;transition:background .5s,color .5s,transform .5s,box-shadow .5s}
.p9x .chip.on{background:rgba(17,20,19,.86);color:#fff;transform:scale(1.06);box-shadow:0 12px 26px rgba(17,20,19,.18)}
/* A: Karte links nennt die Kompetenz, rechts leuchtet sie auf */
.p9a .zahl{position:absolute;left:4%;top:12%;bottom:12%;width:30%;border-radius:18px;padding:14px 16px;display:flex;flex-direction:column;justify-content:space-between}
.p9a .zahl span{font:500 10px ui-monospace,Menlo,monospace;letter-spacing:.12em;color:#595755}
.p9a .zahl b{font-weight:300;font-size:clamp(20px,2.2vw,30px);line-height:1.1;letter-spacing:-.02em;color:#1F7E7E;transition:opacity .3s}
.p9a .zahl small{font:500 10px ui-monospace,Menlo,monospace;letter-spacing:.12em;color:#1F7E7E}
.p9a .feld{position:absolute;left:38%;right:3%;top:10%;bottom:10%;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:8px}
.p9a .chip{opacity:0;transform:translateY(8px)}.p9a .chip.da{opacity:1;transform:none}.p9a .chip.da.on{transform:scale(1.06)}
.p9a .chip{transition:opacity .5s,transform .5s,background .5s,color .5s,box-shadow .5s}
/* B: Kompetenzen kreisen um SWDT. */
.p9b .mitte{position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px;border-radius:50%;background:rgba(17,20,19,.86);color:#fff;display:grid;place-items:center;font-size:15px;letter-spacing:-.01em;box-shadow:0 12px 30px rgba(17,20,19,.2)}
.p9b .mitte i{color:#2FA3A3;font-style:normal}
.p9b .bahn{position:absolute;left:50%;top:50%;width:0;height:0}
.p9b .bahn .chip{position:absolute;transform:translate(-50%,-50%)}
.p9b .ring{position:absolute;left:50%;top:50%;border:1px dashed rgba(17,20,19,.18);border-radius:50%;transform:translate(-50%,-50%)}
@keyframes p9Dreh{to{transform:rotate(360deg)}}
@keyframes p9Gegen{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(-360deg)}}
/* C: zwei Laufbänder */
.p9c .band{position:absolute;left:0;display:flex;gap:10px;white-space:nowrap;animation:p9Lauf 26s linear infinite}
.p9c .band.r1{top:22%}.p9c .band.r2{top:56%;animation-direction:reverse;animation-duration:32s}
.p9c .band .chip{padding:10px 18px;font-size:14px}
.p9c .rand{position:absolute;inset:0;background:linear-gradient(90deg,#EEF3F2 0,rgba(238,243,242,0) 12%,rgba(238,243,242,0) 88%,#EEF3F2 100%);pointer-events:none}
.p9c .t{position:absolute;left:4%;bottom:8%;font:500 10px ui-monospace,Menlo,monospace;letter-spacing:.12em;color:#1F7E7E}
@keyframes p9Lauf{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.p9x *{animation:none!important;transition:none!important}.p9a .chip{opacity:1;transform:none}}

/* p10n.css */
/* Platz 10 – neue Ideen D/E/F, Glas-Stil */
.p10n{position:absolute;inset:0;color:#111;overflow:hidden;font-family:inherit;background:#EEF3F2}
.p10n .bl{position:absolute;border-radius:50%;filter:blur(28px);animation:p10nBl 14s ease-in-out infinite alternate}
.p10n .bl1{width:46%;height:120%;left:-8%;top:-30%;background:radial-gradient(circle,#9fdcd9,rgba(159,220,217,0) 70%);opacity:.75}
.p10n .bl2{width:40%;height:110%;right:-6%;bottom:-40%;background:radial-gradient(circle,#2FA3A3,rgba(47,163,163,0) 70%);opacity:.45;animation-delay:-5s}
.p10n .bl3{width:30%;height:90%;left:45%;top:-35%;background:radial-gradient(circle,#fff,rgba(255,255,255,0) 70%);opacity:.9;animation-delay:-9s}
@keyframes p10nBl{0%{transform:translate(0,0)}100%{transform:translate(8%,10%)}}
.p10n .gl{background:rgba(255,255,255,.45);-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);border:1px solid rgba(255,255,255,.85);box-shadow:0 10px 30px rgba(17,20,19,.07),inset 0 1px 0 rgba(255,255,255,.9)}
.p10n .zt{position:absolute;left:4%;bottom:8%;font:500 10px ui-monospace,Menlo,monospace;letter-spacing:.12em;color:#1F7E7E;transition:opacity .4s}
.p10n .chip{border-radius:99px;padding:5px 11px;font-size:11.5px;white-space:nowrap}

/* D: Waage – erst liegt das Finanzamt vorn, dann kippt sie zu Ihnen */
.p10d .waage{position:absolute;left:50%;top:14%;width:60%;height:78%;transform:translateX(-50%)}
.p10d .saeule{position:absolute;left:50%;top:6%;bottom:6%;width:4px;margin-left:-2px;background:#111;border-radius:2px}
.p10d .fuss{position:absolute;left:50%;bottom:0;width:90px;height:8px;margin-left:-45px;background:#111;border-radius:4px}
.p10d .kopf{position:absolute;left:50%;top:0;width:14px;height:14px;margin:-4px 0 0 -7px;border-radius:50%;background:#2FA3A3;z-index:3}
.p10d .balken{position:absolute;left:12%;right:12%;top:3%;height:4px;background:#111;border-radius:2px;transform:rotate(var(--w,0deg));transition:transform 1.2s cubic-bezier(.4,1.5,.5,1)}
.p10d .schale{position:absolute;top:0;width:44%;transform:translate(-50%,0) rotate(calc(var(--w,0deg) * -1));transform-origin:50% 0;transition:transform 1.2s cubic-bezier(.4,1.5,.5,1)}
.p10d .schale.l{left:0}.p10d .schale.r{left:100%}
.p10d .seil{height:18px;width:60%;margin:0 auto;border:1.5px solid rgba(17,20,19,.55);border-bottom:0;border-radius:40% 40% 0 0/100% 100% 0 0}
.p10d .teller{border-radius:0 0 16px 16px;padding:6px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px}.p10d .teller .chip{padding:3px 9px;font-size:10.5px}
.p10d .teller b{font-weight:500;font-size:12px}
.p10d .teller .chip{opacity:0;transform:translateY(-14px);transition:opacity .45s,transform .45s}
.p10d .teller .chip.da{opacity:1;transform:none}
.p10d .teller .chip.dk{background:rgba(17,20,19,.86);color:#fff}
.p10d .teller .chip.p10tk{background:#2FA3A3;color:#fff}
.p10d .seite{position:absolute;right:4%;top:9%;border-radius:99px;padding:5px 12px;font-size:12px;background:rgba(47,163,163,.9);color:#fff;opacity:0;transform:translateY(6px);transition:opacity .5s,transform .5s}
.p10d.gut .seite{opacity:1;transform:none}

/* E: Bescheid wird geprüft – Fehler markiert, Stempel „Einspruch“ */
.p10e .doc{position:absolute;left:8%;top:10%;bottom:10%;width:34%;border-radius:14px;padding:12px 14px;overflow:hidden}
.p10e .doc h6{margin:0 0 8px;font:500 10px ui-monospace,Menlo,monospace;letter-spacing:.12em;color:#595755}
.p10e .doc .z{position:relative;height:6px;border-radius:3px;background:rgba(17,20,19,.14);margin:0 0 9px;transition:background .4s}
.p10e .doc .z.f{background:rgba(17,20,19,.14)}
.p10e .doc .z.mark{background:#2FA3A3;box-shadow:0 0 0 3px rgba(47,163,163,.18)}
.p10e .scan{position:absolute;left:0;right:0;top:0;height:28%;background:linear-gradient(180deg,rgba(47,163,163,0),rgba(47,163,163,.22));border-bottom:2px solid #2FA3A3;transform:translateY(-110%);opacity:0}
.p10e.scant .scan{opacity:1;animation:p10eScan 1.8s ease-in-out}
@keyframes p10eScan{0%{transform:translateY(-110%)}100%{transform:translateY(380%)}}
.p10e .stempel{position:absolute;left:25%;top:52%;transform:translate(-50%,-50%) rotate(-12deg) scale(1.8);border:2.5px solid #1F7E7E;color:#1F7E7E;border-radius:8px;padding:4px 10px;font:600 13px ui-monospace,Menlo,monospace;letter-spacing:.14em;background:rgba(255,255,255,.7);opacity:0;transition:transform .35s cubic-bezier(.3,1.6,.5,1),opacity .2s;z-index:3}
.p10e.stamp .stempel{opacity:1;transform:translate(-50%,-50%) rotate(-12deg) scale(1)}
.p10e .liste{position:absolute;left:48%;right:4%;top:14%;display:flex;flex-direction:column;gap:8px}
.p10e .liste h5{margin:0 0 2px;font-weight:400;font-size:18px;letter-spacing:-.02em}
.p10e .liste h5 b{font-weight:400;color:#1F7E7E}
.p10e .liste .it{display:flex;align-items:center;gap:9px;border-radius:12px;padding:7px 12px;font-size:12px;opacity:0;transform:translateX(12px);transition:opacity .45s,transform .45s}
.p10e .liste .it.da{opacity:1;transform:none}
.p10e .liste .it i{width:18px;height:18px;border-radius:50%;background:#2FA3A3;color:#fff;display:grid;place-items:center;font-style:normal;font-size:10px;flex:none}

/* F: Frist läuft – wir reagieren sofort */
.p10f .ring{position:absolute;left:8%;top:50%;width:150px;height:150px;margin-top:-75px;border-radius:50%;display:grid;place-items:center;text-align:center}
.p10f .ring svg{position:absolute;inset:8px;width:calc(100% - 16px);height:calc(100% - 16px);transform:rotate(-90deg)}
.p10f .ring circle{fill:none;stroke-width:6}
.p10f .ring .bg{stroke:rgba(17,20,19,.1)}
.p10f .ring .fg{stroke:#2FA3A3;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:var(--o,100);transition:stroke-dashoffset .8s ease}
.p10f .ring b{display:block;font-weight:300;font-size:36px;line-height:1;letter-spacing:-.03em}
.p10f .ring small{display:block;font:500 9.5px ui-monospace,Menlo,monospace;letter-spacing:.12em;color:#595755;margin-top:4px}
.p10f .tl{position:absolute;left:40%;right:4%;top:12%;bottom:12%;display:flex;flex-direction:column;justify-content:center;gap:9px}
.p10f .tl .it{display:flex;align-items:center;gap:10px;border-radius:12px;padding:7px 12px;font-size:12.5px;opacity:.35;transition:opacity .5s,background .5s,color .5s}
.p10f .tl .it em{font-style:normal;font:500 10px ui-monospace,Menlo,monospace;letter-spacing:.1em;color:#1F7E7E;min-width:52px}
.p10f .tl .it.da{opacity:1}
.p10f .tl .it.ok{background:rgba(17,20,19,.86);color:#fff}.p10f .tl .it.ok em{color:#7fd6d4}
@media (prefers-reduced-motion:reduce){.p10n *{animation:none!important;transition:none!important}}

/* p15.css */
/* Platz 15 – „Ihr eigenes Dashboard“, Glas-Stil */
.p15x{position:absolute;inset:0;color:#111;overflow:hidden;font-family:inherit;background:#EEF3F2;z-index:2}
.p15x .bl{position:absolute;border-radius:50%;filter:blur(28px);animation:p15Bl 14s ease-in-out infinite alternate}
.p15x .bl1{width:50%;height:120%;left:-10%;top:-30%;background:radial-gradient(circle,#9fdcd9,rgba(159,220,217,0) 70%);opacity:.75}
.p15x .bl2{width:44%;height:110%;right:-8%;bottom:-40%;background:radial-gradient(circle,#2FA3A3,rgba(47,163,163,0) 70%);opacity:.45;animation-delay:-5s}
.p15x .bl3{width:34%;height:90%;left:40%;top:-35%;background:radial-gradient(circle,#fff,rgba(255,255,255,0) 70%);opacity:.9;animation-delay:-9s}
@keyframes p15Bl{0%{transform:translate(0,0)}100%{transform:translate(8%,10%)}}
.p15x .gl{background:rgba(255,255,255,.45);-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);border:1px solid rgba(255,255,255,.85);box-shadow:0 10px 30px rgba(17,20,19,.07),inset 0 1px 0 rgba(255,255,255,.9)}
.p15x .mono{font:500 9.5px ui-monospace,Menlo,monospace;letter-spacing:.12em;color:#595755}
/* A: Dashboard-Fenster */
.p15a .fen{position:absolute;left:6%;right:6%;top:9%;bottom:9%;border-radius:16px;display:grid;grid-template-columns:44px 1fr;grid-template-rows:26px 1fr;overflow:hidden}
.p15a .kopf{grid-column:1/3;height:26px;display:flex;align-items:center;gap:5px;padding:0 12px;border-bottom:1px solid rgba(17,20,19,.06)}
.p15a .kopf i{width:7px;height:7px;border-radius:50%;background:rgba(17,20,19,.18)}.p15a .kopf span{margin-left:auto}
.p15a .nav{display:flex;flex-direction:column;align-items:center;gap:10px;padding-top:12px;border-right:1px solid rgba(17,20,19,.06)}
.p15a .nav i{width:16px;height:16px;border-radius:5px;background:rgba(17,20,19,.12)}.p15a .nav i:first-child{background:#111}
.p15a .haupt{padding:12px 14px;display:grid;grid-template-rows:auto 1fr;gap:10px;min-height:0}
.p15a .kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.p15a .kpi div{border-radius:10px;padding:7px 9px;background:rgba(255,255,255,.6)}
.p15a .kpi b{display:block;font-weight:400;font-size:clamp(13px,1.35vw,18px);letter-spacing:-.02em;margin-top:2px;white-space:nowrap}
.p15a .kpi div:nth-child(3) b{color:#1F7E7E}
.p15a .chart{position:relative;border-radius:10px;background:rgba(255,255,255,.5);min-height:0}
.p15a .chart svg{position:absolute;inset:6px 8px;width:calc(100% - 16px);height:calc(100% - 12px)}
.p15a .chart path{fill:none;stroke:#2FA3A3;stroke-width:2.2;vector-effect:non-scaling-stroke;stroke-linecap:round}
.p15a .chart path.f{fill:rgba(47,163,163,.12);stroke:none}
.p15a .chart svg{clip-path:inset(0 100% 0 0)}
.p15a.lauf .chart svg{animation:p15Linie 2.2s ease forwards}
@keyframes p15Linie{to{clip-path:inset(0 0 0 0)}}

.p15a .toast{position:absolute;right:9%;bottom:14%;border-radius:12px;padding:8px 12px;font-size:12px;display:flex;align-items:center;gap:8px;opacity:0;transform:translateY(10px);transition:opacity .5s,transform .5s;background:rgba(17,20,19,.86);color:#fff;border-color:rgba(255,255,255,.2)}
.p15a .toast i{width:16px;height:16px;border-radius:50%;background:#2FA3A3;display:grid;place-items:center;font-style:normal;font-size:10px}
.p15a.neu .toast{opacity:1;transform:none}
/* B: Handy mit App */
.p15b .txt{position:absolute;left:7%;top:50%;transform:translateY(-50%);max-width:40%}
.p15b .txt b{display:block;font-weight:300;font-size:clamp(22px,2.6vw,34px);line-height:1.05;letter-spacing:-.03em}
.p15b .txt b em{font-style:normal;color:#1F7E7E}
.p15b .txt span{display:block;margin-top:10px}
.p15b .tel{position:absolute;right:10%;top:8%;bottom:-30%;width:30%;border-radius:26px;padding:12px 10px;display:flex;flex-direction:column;gap:6px}
.p15b .tel .ob{display:flex;justify-content:space-between;align-items:center;padding:0 4px 4px}
.p15b .tel .ob b{font-weight:500;font-size:12px}.p15b .tel .ob i{width:16px;height:16px;border-radius:50%;background:#2FA3A3}
.p15b .z{border-radius:10px;padding:6px 9px;font-size:11px;display:flex;justify-content:space-between;gap:6px;background:rgba(255,255,255,.7);opacity:0;transform:translateY(10px);transition:opacity .45s,transform .45s}
.p15b .z.da{opacity:1;transform:none}.p15b .z b{font-weight:500;color:#1F7E7E;white-space:nowrap}
.p15b .z.dk{background:rgba(17,20,19,.86);color:#fff}.p15b .z.dk b{color:#7fd6d4}
/* C: Fristen-Kalender */
.p15c .kal{position:absolute;left:6%;top:10%;bottom:10%;width:48%;border-radius:16px;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.p15c .kal .t{display:flex;justify-content:space-between}
.p15c .tage{flex:1;display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.p15c .tage i{border-radius:6px;background:rgba(255,255,255,.55);font-style:normal;font-size:10px;color:#595755;display:grid;place-items:center;transition:background .4s,color .4s}
.p15c .tage i.fr{background:rgba(17,20,19,.86);color:#fff}
.p15c .tage i.ok{background:#2FA3A3;color:#fff}
.p15c .re{position:absolute;right:6%;top:10%;bottom:10%;width:36%;display:flex;flex-direction:column;justify-content:center;gap:8px}
.p15c .re .gross{border-radius:14px;padding:10px 12px}
.p15c .re .gross b{display:block;font-weight:300;font-size:clamp(22px,2.6vw,32px);letter-spacing:-.03em;color:#1F7E7E}
.p15c .re .it{border-radius:10px;padding:6px 10px;font-size:11.5px;display:flex;justify-content:space-between;opacity:.4;transition:opacity .4s}
.p15c .re .it.da{opacity:1}.p15c .re .it b{font-weight:500;color:#1F7E7E}
@media (prefers-reduced-motion:reduce){.p15x *{animation:none!important;transition:none!important}.p15a .chart svg{clip-path:none}.p15b .z{opacity:1;transform:none}}
@media (max-width:600px){
  .p15a .fen{left:4%;right:4%;top:7%;bottom:7%;grid-template-columns:1fr}
  .p15a .kopf{grid-column:1}.p15a .nav{display:none}
  .p15a .haupt{padding:8px 10px;gap:7px}
  .p15a .kpi{gap:5px}.p15a .kpi div{padding:5px 7px}.p15a .kpi b{font-size:12.5px}
  .p15x .mono{font-size:8px;letter-spacing:.08em}
  .p15a .toast{right:6%;bottom:9%;padding:5px 9px;font-size:10.5px}
  .p15b .txt b{font-size:20px}.p15b .tel{width:42%;right:5%}.p15b .z{font-size:9.5px;padding:4px 7px}
  .p15c .kal{width:54%;left:4%;padding:7px 8px}.p15c .tage i{font-size:8px}.p15c .re{width:38%;right:3%}.p15c .re .it{font-size:9.5px;padding:4px 7px}.p15c .re .gross b{font-size:18px}
}