/* Feature-Seite Presseportal (dunkler Entwurf 30.10.2026) */
/* Abstrakte Grafik: Message -> 5 Regeln -> Meldung im Portal (baut sich mit .gh/.g auf) */
.gh.pp-bau{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:36px;max-width:1040px;margin:40px auto 0;padding:0;background:none}
.pp-sp{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px}
.pp-sp .fs-lab3{margin-bottom:10px}
.pp-sp + .pp-sp::before{content:"";position:absolute;left:-24px;top:120px;width:10px;height:10px;border-right:2px solid #4A4A4A;border-top:2px solid #4A4A4A;transform:rotate(45deg)}
.pp-msg{display:flex;align-items:center;gap:12px;padding:14px;border-radius:14px;background:#F2F2F2;margin-top:70px}
.pp-msg .ph{width:52px;height:52px;border-radius:12px;background:linear-gradient(135deg,#E0246B,#7A1840)}
.pp-msg .z{display:flex;flex-direction:column;gap:7px}.pp-msg .z i{width:96px;height:8px;border-radius:4px;background:#2A0A18}.pp-msg .z i+i{width:76px;background:#F49AB8}.pp-msg .z i+i+i{width:56px;background:#C9C9C9}
.pp-regel{display:flex;align-items:center;gap:12px;width:190px}
.pp-regel i{height:9px;border-radius:5px;background:#4A4A4A}
.pp-ok{flex:none;position:relative;width:24px;height:24px;border-radius:50%;background:#E0246B}
.pp-ok::after{content:"";position:absolute;left:8px;top:5px;width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.pp-kopf{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:300px}
.pp-kopf b{font:900 20px var(--f-display);letter-spacing:-.03em;color:#F2F2F2;text-transform:uppercase}
.pp-chips{display:flex;gap:6px}.pp-chips i{width:40px;height:20px;border-radius:999px;border:1.5px solid #5A5A5A}.pp-chips i.an{background:#E0246B;border-color:#E0246B}
.pp-neu,.pp-alt{position:relative;display:flex;align-items:center;gap:12px;width:100%;max-width:300px;padding:14px;border-radius:14px;background:#1E1E1E}
.pp-neu{box-shadow:0 0 0 2px #E0246B}
.pp-alt{opacity:.55}
.pp-logo{flex:none;width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,#E0246B,#7A1840)}.pp-logo.b{background:#3A3A3A}.pp-logo.c{background:#4A2A36}
.pp-z{flex:1;display:flex;flex-direction:column;gap:7px}.pp-z i{height:7px;border-radius:4px;background:#4A4A4A;width:70%}
.pp-z i.k{width:38%;height:6px;background:#F49AB8}.pp-z i.t{width:92%;height:10px;background:#F2F2F2}
.pp-sitemap{position:absolute;right:-10px;top:-12px;padding:3px 9px;border-radius:999px;background:#FFB08F;color:#4A0E26;font:700 10px var(--f-mono);letter-spacing:.04em}
html.ani .pp-bau .g{opacity:0;transform:translateY(14px) scale(.85)}
/* Ablauf 02: fuenf Punkte werden nacheinander zu Haken */
.pp-punkte{display:flex;gap:12px}
.pp-punkte i{position:relative;display:block;width:30px;height:30px;border-radius:50%;border:2px solid #3A3A3A}
.pp-punkte i::after{content:"";position:absolute;left:9px;top:5px;width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg);opacity:0}
#ablauf.da .pp-punkte i{animation:pp-punkt 6s ease infinite}
#ablauf.da .pp-punkte i::after{animation:pp-haken 6s ease infinite}
#ablauf.da .pp-punkte i:nth-child(2),#ablauf.da .pp-punkte i:nth-child(2)::after{animation-delay:.3s}
#ablauf.da .pp-punkte i:nth-child(3),#ablauf.da .pp-punkte i:nth-child(3)::after{animation-delay:.6s}
#ablauf.da .pp-punkte i:nth-child(4),#ablauf.da .pp-punkte i:nth-child(4)::after{animation-delay:.9s}
#ablauf.da .pp-punkte i:nth-child(5),#ablauf.da .pp-punkte i:nth-child(5)::after{animation-delay:1.2s}
@keyframes pp-punkt{0%,10%{background:transparent;border-color:#3A3A3A}20%,85%{background:#E0246B;border-color:#E0246B}100%{background:transparent;border-color:#3A3A3A}}
@keyframes pp-haken{0%,10%{opacity:0}20%,85%{opacity:1}100%{opacity:0}}
.pp-url{font-size:12.5px;padding:11px 14px}.pp-url > span{color:#7A6A70}
/* Mini-Karten auf den Fotos */
.sc-k-bild .mini.m-kat{display:flex;flex-wrap:wrap;gap:6px;padding:14px;height:auto}
.m-kat span{font-size:11.5px;font-weight:700;padding:5px 10px;border-radius:999px;border:1.5px solid var(--line2);color:var(--fg)}
.m-kat span.an{background:#E0246B;border-color:#E0246B;color:#fff}
.sc-k-bild .mini.m-xml{display:flex;flex-direction:column;gap:4px;padding:14px 16px;height:auto;font:600 11.5px var(--f-mono);color:#9A8A90}
.m-xml .e{padding-left:14px}.m-xml b{color:#E0246B;font-weight:700}
/* Die fuenf Regeln: grosse Ziffern, keine Boxen */
.pp-regeln{list-style:none;padding:0;margin:44px auto 0;max-width:1120px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:34px 26px}
.pp-regeln li{display:flex;flex-direction:column;align-items:center;text-align:center}
.pp-n{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#E0246B;color:#fff;font:900 24px var(--f-display)}
.pp-regeln h3{font-size:19px;color:#F2F2F2;margin:16px 0 6px}.pp-regeln p{color:#A3A3A3;line-height:1.55;margin:0;font-size:15px}
.pp-faelle{display:grid;grid-template-columns:1fr 1fr;gap:30px;max-width:900px;margin:56px auto 0}
.pp-fall{display:flex;gap:16px;align-items:flex-start}
.pp-fall small{display:block;font:700 11px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:#FF6E9E;margin-bottom:6px}
.pp-fall b{display:block;color:#F2F2F2;font-size:17px;margin-bottom:6px}.pp-fall p{color:#A3A3A3;line-height:1.55;margin:0}
.pp-mk{flex:none;position:relative;width:34px;height:34px;border-radius:50%;background:#E0246B}
.pp-fall.ja .pp-mk::after{content:"";position:absolute;left:12px;top:7px;width:8px;height:15px;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg)}
.pp-fall.nein .pp-mk{background:#3A3A3A}
.pp-fall.nein .pp-mk::before,.pp-fall.nein .pp-mk::after{content:"";position:absolute;left:16px;top:8px;width:3px;height:18px;border-radius:2px;background:#F2F2F2;transform:rotate(45deg)}
.pp-fall.nein .pp-mk::after{transform:rotate(-45deg)}
#mehr .fs-liste{grid-template-columns:repeat(4,minmax(0,1fr))}
#ratgeber .lb-seo,.lb-seo ul a{color:#F2F2F2}
@media (max-width:980px){.pp-regeln{grid-template-columns:repeat(3,minmax(0,1fr))}#mehr .fs-liste{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.gh.pp-bau{grid-template-columns:1fr;gap:28px}.pp-sp + .pp-sp::before{display:none}.pp-msg{margin-top:0}
  .pp-regeln{grid-template-columns:1fr 1fr}.pp-faelle{grid-template-columns:1fr}#mehr .fs-liste{grid-template-columns:1fr}}
/* Richtig geschrieben: Blatt mit den fuenf Teilen, Liste daneben; beides baut sich beim Einblenden auf */
.pp-aufbau{display:grid;grid-template-columns:minmax(0,300px) minmax(0,460px);justify-content:center;align-items:center;gap:56px;margin:44px auto 0}
.pp-blatt{display:flex;flex-direction:column;gap:16px;padding:26px 24px;border-radius:14px;background:#F2F2F2;box-shadow:0 30px 70px -30px rgba(0,0,0,.8)}
.pa{display:flex;flex-direction:column;gap:7px;border-radius:6px;transition:box-shadow .4s,background .4s}
.pa i{display:block;height:7px;border-radius:4px;background:#C9C2C5}.pa i:last-child{width:72%}
.pa1{height:16px;width:88%;background:#2A0A18}
.pa2 i{background:#2A0A18;opacity:.75}
.pa4{padding-left:12px;border-left:4px solid #E0246B}.pa4 i{background:#F49AB8}
.pa5 i{background:#9A8A90}.pa5 i:first-child{width:40%;background:#E0246B}
.pp-teile{list-style:none;counter-reset:t;padding:0;margin:0;display:flex;flex-direction:column;gap:20px}
.pp-teile li{counter-increment:t;display:grid;grid-template-columns:40px 1fr;column-gap:16px;align-items:start}
.pp-teile li::before{content:counter(t);grid-row:span 2;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#E0246B;color:#fff;font:900 16px var(--f-display)}
.pp-teile b{color:#F2F2F2;font-size:18px}.pp-teile span{color:#A3A3A3;line-height:1.55}
html.ani #richtig .pa,html.ani #richtig .pp-teile li{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .6s cubic-bezier(.3,1.4,.5,1)}
html.ani #richtig.da .pa,html.ani #richtig.da .pp-teile li{opacity:1;transform:none}
#richtig .pa2,#richtig .pp-teile li:nth-child(2){transition-delay:.5s}
#richtig .pa3,#richtig .pp-teile li:nth-child(3){transition-delay:1s}
#richtig .pa4,#richtig .pp-teile li:nth-child(4){transition-delay:1.5s}
#richtig .pa5,#richtig .pp-teile li:nth-child(5){transition-delay:2s}
.pp-ratgeber{text-align:center;color:#A3A3A3;margin:40px 0 0}.pp-ratgeber a{color:#F2F2F2}
@media (max-width:760px){.pp-aufbau{grid-template-columns:1fr;gap:34px}.pp-blatt{max-width:300px;margin:0 auto}}