/* Seite 4: So läuft es (Bildschirm 4, onb4). Eigene Regeln dieser Seite; wird nach cp.css geladen.
 * Auf allen Seiten eingebunden: Regeln mit .cp[data-screen="onb4"] oder seiten-eigenen Klassen einschränken. */
/* Seite 4 „Deine Videos“: Hook-Bibliothek als Hauptkarte, Beispiele, Pflichten als nummerierte Liste. */
.cp-lib{position:relative;margin-top:22px;padding:22px 20px 18px;border:1px solid var(--cp-card-edge);border-radius:var(--cp-r);background:var(--cp-card);box-shadow:var(--cp-depth);overflow:hidden}
.cp-lib::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,rgba(255,61,20,0),var(--cp-fire) 30%,var(--cp-fire-hi) 70%,rgba(255,61,20,0))}
.cp-lib-ic{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin-bottom:12px;border-radius:10px;background:rgba(255,61,20,.12);color:var(--cp-fire)}
.cp-lib-ic .cp-ic{width:20px;height:20px;stroke-width:2.2}
.cp-lib .cp-h2{margin:0 0 6px}
.cp-lib-t{font-size:15.5px;line-height:1.45;color:var(--cp-dim)}
.cp-lib-dc{display:flex;align-items:center;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--cp-hair);font-size:15px;font-weight:600;color:var(--cp-text)}
.cp-lib-dc .cp-ic{width:16px;height:16px;color:var(--cp-fire)}
.cp-lab-h{margin:0 0 10px;font:700 12px/1.2 var(--cp-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--cp-mute)}
.cp-hook{position:relative;padding:14px 16px 14px 18px}
.cp-hook::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:var(--cp-fire)}
.cp-must-n,.cp-giv{display:flex;flex-direction:column;gap:0;counter-reset:pf;border-top:1px solid var(--cp-hair)}
.cp-must-n li,.cp-giv li{display:grid;grid-template-columns:36px minmax(0,1fr);align-items:center;gap:12px;min-height:54px;padding:8px 0;border:0;border-bottom:1px solid var(--cp-hair);border-radius:0;background:none;box-shadow:none;font-size:15.5px;font-weight:500}
.cp-must-ic{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:9px;border:1px solid var(--cp-card-edge);background:var(--cp-card)}
.cp-must-n li .cp-ic,.cp-giv li .cp-ic{width:17px;height:17px}
/* Bildschirm 4 (13.10.2026): Hook-Bibliothek als Bild, zwei Kacheln, Zeit-Zeile */
.cp-hb-kopf{display:flex;align-items:center;gap:12px}
.cp-hb-kopf .cp-lib-ic{margin:0}
.cp-hb-kopf .cp-h2{margin:0;white-space:nowrap;min-width:0}
.cp-hb-badge{margin-left:auto;flex:none;font-size:11.5px;font-weight:600;color:var(--cp-fire);background:rgba(255,61,20,.12);border-radius:999px;padding:4px 10px}
.cp-hb-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.cp-hb-chip{display:inline-flex;align-items:center;padding:9px 13px;border-radius:14px 14px 14px 4px;background:rgba(255,255,255,.06);border:1px solid var(--cp-card-edge);font-size:14.5px;font-weight:600;color:var(--cp-text)}
.cp-hb-chip.cp-neu{background:none;border-style:dashed;color:var(--cp-dim);font-weight:500}
.cp-giv2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0 0;padding:0;list-style:none}
.cp-giv2 li{display:flex;flex-direction:column;gap:12px;padding:16px;border:1px solid var(--cp-card-edge);border-radius:var(--cp-r);background:var(--cp-card);font-size:15.5px;font-weight:600;color:var(--cp-text)}
.cp-giv2 .cp-ic{width:17px;height:17px}
.cp-zeit{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:12px;padding:15px;border-radius:var(--cp-r);border:1px solid rgba(255,61,20,.35);background:rgba(255,61,20,.08);font-size:16px;font-weight:700;color:var(--cp-text)}
.cp-zeit .cp-ic{width:18px;height:18px;color:var(--cp-fire)}
/* Bildschirm 4, Runde 2 (13.10.2026): Zeit-Abzeichen oben, drei Schritte als verbundene Kette */
.cp-zeit-top{display:inline-flex;align-items:center;gap:8px;margin:2px 0 0;padding:7px 12px;border-radius:999px;border:1px solid rgba(255,61,20,.35);background:rgba(255,61,20,.08);font-size:14px;font-weight:700;color:var(--cp-text)}
.cp-zeit-top .cp-ic{width:16px;height:16px;color:var(--cp-fire)}
.cp-f4{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:0}
.cp-f4-s{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;padding:0 0 18px}
.cp-f4-s:not(:last-child)::before{content:"";position:absolute;left:16px;top:36px;bottom:2px;width:2px;background:linear-gradient(var(--cp-card-edge),rgba(255,255,255,.04))}
.cp-f4-n{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--cp-text);color:#0b0b0f;font-weight:800;font-size:15px;font-variant-numeric:tabular-nums}
.cp-f4-t{display:grid;gap:3px;padding:14px 16px;border:1px solid var(--cp-card-edge);border-radius:var(--cp-r);background:var(--cp-card);box-shadow:var(--cp-depth);min-width:0}
.cp-f4-t b{font-size:16.5px;color:var(--cp-text)}
.cp-f4-t small{font-size:14px;color:var(--cp-dim)}
.cp-f4-t .cp-hb-chips{margin-top:10px}
.cp-zeit-top+.cp-lead{margin-top:12px}
/* Bildschirm 3 „So machst du deine Videos“ (Milan, 16.10.2026): Kalender, ein Video pro Tag, füllt sich nacheinander. */
.cp-kal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin:20px 0 0;padding:0;list-style:none}
.cp-kal li{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.cp-kal-t{font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--cp-mute)}
.cp-kal-v{display:flex;align-items:center;justify-content:center;width:100%;max-width:44px;aspect-ratio:1;border-radius:10px;border:1px solid var(--cp-card-edge);background:var(--cp-card);color:var(--cp-mute);animation:cp-kal-an .7s var(--cp-e) both;animation-delay:calc(.8s + var(--d) * .45s)}
.cp-kal-v .cp-ic{width:13px;height:13px}
@keyframes cp-kal-an{to{background:rgba(255,61,20,.14);border-color:rgba(255,61,20,.55);color:var(--cp-fire)}}
@media (prefers-reduced-motion:reduce){.cp-kal-v{animation:none;background:rgba(255,61,20,.14);border-color:rgba(255,61,20,.55);color:var(--cp-fire)}}
/* Drei Schritte mit je einem Bild (Milan, 18.10.2026): Reel-Kacheln zum Aussuchen, Skript-Zeilen mit „Founda öffnen“, Posten. */
.cp-v3{display:grid;gap:12px;margin:20px 0 0;padding:0;list-style:none}
.cp-v3-s{padding:14px;border:1px solid var(--cp-card-edge);border-radius:var(--cp-r);background:var(--cp-card);box-shadow:var(--cp-depth)}
.cp-v3-k{display:flex;align-items:center;gap:10px;margin:0;font-size:16.5px;font-weight:700;color:var(--cp-text)}
.cp-v3-n{display:inline-flex;align-items:center;justify-content:center;flex:none;width:26px;height:26px;border-radius:50%;background:var(--cp-text);color:#0b0b0f;font-size:13px;font-weight:800;font-variant-numeric:tabular-nums}
.cp-reels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0 0;padding:0;list-style:none}
.cp-reels li{display:flex;flex-direction:column;justify-content:space-between;aspect-ratio:9/14;padding:9px;border:1px solid var(--cp-card-edge);border-radius:10px;background:rgba(255,255,255,.04);color:var(--cp-mute);min-width:0}
.cp-reels .cp-ic{width:14px;height:14px}
.cp-reels span{font-size:12.5px;font-weight:600;line-height:1.25;color:var(--cp-dim);overflow-wrap:anywhere}
.cp-reels .cp-reel-an{border:1.5px solid var(--cp-fire);background:rgba(255,61,20,.1);color:var(--cp-fire)}
.cp-reels .cp-reel-an span{color:var(--cp-text)}
.cp-v3-lbl{margin:12px 0 0;font:700 11px/1.2 var(--cp-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--cp-mute)}
.cp-v3-lbl+.cp-reels{margin-top:8px}
.cp-reels .cp-reel-mehr{justify-content:center;align-items:center;border-style:dashed;background:none;text-align:center}
.cp-reels .cp-reel-mehr span{color:var(--cp-dim)}
.cp-skript{display:grid;gap:9px;margin:8px 0 0;padding:12px;list-style:none;border:1px solid var(--cp-card-edge);border-radius:10px;background:rgba(255,255,255,.03)}
.cp-skript li{display:grid;grid-template-columns:18px minmax(0,1fr);align-items:center;gap:10px}
.cp-skript span{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.1);font-size:10.5px;font-weight:700;color:var(--cp-dim)}
.cp-skript i{display:block;height:8px;border-radius:4px;background:rgba(255,255,255,.1)}
.cp-skript li:nth-child(1) i{width:88%}.cp-skript li:nth-child(2) i{width:66%}.cp-skript li:nth-child(3) i{width:78%}
.cp-v3-zugang{display:inline-flex;align-items:center;gap:7px;margin-top:12px;padding:7px 13px;border-radius:999px;background:#fff;color:#0b0b0f;font-size:13.5px;font-weight:700}
.cp-v3-zugang .cp-ic{width:13px;height:13px}
.cp-v3-rak{width:9px;height:14px;fill:currentColor}