/* ============================================================
   kernzone · Programm-Feature (P4)
   Komponenten-Styles, extrahiert aus dem Mockup v2.2.5
   (programm_v2.2.5.css, Teil 2). Farben/Abstaende ueber die
   CSS-Variablen aus css/style.css.

   Regeln:
   - Kein Inline-CSS: programm-v2.js rendert nur Klassen, jede
     Regel steht hier.
   - Basis-Klassen, die schon in style.css liegen (icard, play-btn,
     play-circle, cal-dot-Basis, month-nav, cal-legend, leg-dot-Basis,
     scard2, chprog, prog-high/mid/low, jdot, screen-title/-sub,
     feedback-line), werden hier NICHT gedoppelt, nur ergaenzt.
   - Generisch benannte Regeln sind unter .pg-view gescoped, damit
     sie andere Seiten nicht beeinflussen (programm.css laedt ueberall).
   - Review-Geruest aus dem Mockup (.phone, .review-head, .section-*,
     .caption, .phones, .desk-frame) ist bewusst nicht uebernommen.
   ============================================================ */

/* ---- Container / Shell ----
   Bottom-Sheet und Modals werden ins Container-Innere gerendert und
   sind absolut positioniert (Anker P4). Darum position:relative +
   overflow:hidden wie .screen im Mockup. */
.pg-shell{position:relative;overflow:hidden;}
.desktop-view .pg-shell{max-width:440px;margin:0 auto;width:100%;}

/* Buttons: volle Breite + zentriert wie im Mockup; abgeblendet wenn disabled */
.pg-view .play-btn{justify-content:center;}
.pg-view .play-btn.full{width:100%;}
.pg-view .play-btn[disabled],
.pg-view .play-btn:disabled{opacity:0.45;cursor:default;}

/* Minutenzahl-Pille (Mockup global .min; hier gescoped, da style.css
   .min nur kontextbezogen definiert) */
.pg-view .min{font-size:0.7rem;color:#cbaefa;background:rgba(140,92,214,0.15);border:1px solid rgba(140,92,214,0.25);padding:2px 8px;border-radius:999px;white-space:nowrap;}

/* Kopfzeile mit X-Button (Setup / Editor) */
.pg-head-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px;}
/* screen-title/-sub haben global padding-left:12px (style.css), das sitzt hier
   aber neben form-sec-Inhalten (Rhythmus etc.) OHNE diesen Extra-Einzug --
   dadurch stand die Überschrift sichtbar weiter rechts als der Rest der Seite.
   Für Setup/Editor auf 0 zurücksetzen, damit Titel/Untertitel bündig mit
   Rhythmus/Aufbau/Verteilung stehen. */
.pg-editor .screen-title,
.pg-editor .screen-sub,
.pg-setup .screen-title{padding-left:0;}
.pg-head-row .screen-title{margin-bottom:0;}

/* ============================================================
   Einstieg
   ============================================================ */
.reco-note{display:flex;align-items:flex-start;gap:10px;padding:11px 13px;background:rgba(140,92,214,0.08);border:1px solid rgba(140,92,214,0.20);border-radius:11px;margin-bottom:16px;}
.reco-note svg{width:15px;height:15px;color:var(--accent-bright);flex:0 0 auto;margin-top:2px;}
.reco-note span{color:var(--text-secondary);font-size:0.75rem;line-height:1.5;}
.pg-note-strong{color:var(--text-primary);font-weight:600;}
.pg-note-link{display:inline-flex;align-items:center;gap:5px;margin-top:6px;color:var(--accent-bright);font-weight:500;text-decoration:none;}
.pg-note-link .jdot{width:15px;height:15px;}
.pg-note-link .jdot svg{width:9px;height:9px;}
.pg-start-card{margin-bottom:16px;}
.pg-view .icard p + p{margin-top:8px;}

/* ============================================================
   Setup (Schnellstart) & Editor: Formular
   ============================================================ */
.form-sec{margin-bottom:20px;}
.form-sec h3{font-size:0.9rem;font-weight:600;margin-bottom:3px;}
.form-sec .fs-sub{color:var(--text-muted);font-size:0.72rem;margin-bottom:10px;}

/* Tages-Chips */
.day-chips{display:flex;gap:6px;}
.day-chip{flex:1;aspect-ratio:1;max-width:38px;border-radius:50%;background:rgba(255,255,255,0.03);border:1px solid var(--border-subtle);color:var(--text-muted);font-size:0.68rem;font-weight:600;font-family:inherit;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.day-chip.on{background:rgba(140,92,214,0.16);border-color:rgba(140,92,214,0.55);color:var(--accent-bright);}
.seg-hint{margin-top:8px;font-size:0.7rem;color:var(--text-muted);line-height:1.5;}
.pg-setup-note{margin-top:4px;}

/* Aufbau: Modus-Karten */
.mode-card{display:flex;align-items:flex-start;gap:12px;background:rgba(255,255,255,0.03);border:1px solid var(--border-subtle);border-radius:14px;padding:14px;cursor:pointer;}
.mode-card + .mode-card{margin-top:10px;}
.mode-card.on{background:rgba(140,92,214,0.12);border-color:rgba(140,92,214,0.55);}
.mode-card.compact{padding:11px 12px;}
.mode-ic{width:34px;height:34px;border-radius:10px;flex:0 0 auto;background:rgba(140,92,214,0.18);display:flex;align-items:center;justify-content:center;color:var(--accent-bright);}
.mode-ic svg{width:18px;height:18px;}
.mode-card.compact .mode-ic{width:28px;height:28px;border-radius:8px;}
.mode-card.compact .mode-ic svg{width:15px;height:15px;}
.mode-txt b{font-size:0.88rem;font-weight:600;display:block;}
.mode-txt span{font-size:0.75rem;color:var(--text-secondary);line-height:1.45;display:block;margin-top:2px;}
.mode-card.compact .mode-txt b{font-size:0.82rem;}
.mode-card.compact .mode-txt span{font-size:0.7rem;}
.mode-radio{width:16px;height:16px;border-radius:50%;border:1.5px solid rgba(140,92,214,0.45);flex:0 0 auto;margin-left:auto;margin-top:2px;position:relative;}
.mode-card.on .mode-radio{border-color:var(--accent-bright);}
.mode-card.on .mode-radio::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--accent-bright);}
.mode-radio i{position:absolute;inset:3px;border-radius:50%;background:var(--accent-bright);display:block;}

/* Verteilung: Akkordeon-Karte */
.sp-card{border-radius:14px;border:1px solid rgba(140,92,214,0.30);background:rgba(255,255,255,0.025);overflow:hidden;}
.sp-card.open{border-color:rgba(140,92,214,0.55);background:rgba(140,92,214,0.05);}
.sp-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;cursor:pointer;}
.sp-card-head h3{font-size:0.9rem;font-weight:600;margin-bottom:2px;}
.sp-card-body{padding:0 14px 14px;}
.sp-card:not(.open) .sp-card-body{display:none;}
.sp-chev{width:18px;height:18px;color:var(--accent-bright);transition:transform 0.2s;flex:0 0 auto;}
.sp-card.open .sp-chev{transform:rotate(180deg);}
.pg-accent{color:var(--accent-bright);font-weight:500;}
.pg-accent-warn{color:#F87171;}

/* Prozent-Mix */
.pct-list{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;}
.pct-row{background:rgba(255,255,255,0.03);border:1px solid var(--border-subtle);border-radius:13px;padding:11px 12px;}
.pct-row.off{opacity:0.45;}
.pct-top{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.pct-top .sname{font-size:0.84rem;font-weight:500;flex:1;}
.pct-stepper{display:flex;align-items:center;gap:2px;}
.pct-stepper button{width:26px;height:26px;border-radius:8px;background:rgba(255,255,255,0.06);border:1px solid var(--border-card);color:var(--text-secondary);font-size:0.9rem;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;}
.pct-val{width:44px;text-align:center;font-size:0.86rem;font-weight:600;color:var(--accent-bright);font-variant-numeric:tabular-nums;}
.pct-bar{height:5px;background:rgba(255,255,255,0.07);border-radius:3px;overflow:hidden;}
.pct-bar i{display:block;height:100%;background:var(--done);border-radius:3px;width:var(--pg-w,0%);}
.pct-total{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:11px;background:rgba(140,92,214,0.10);border:1px solid rgba(140,92,214,0.25);font-size:0.78rem;color:var(--text-secondary);}
.pct-total b{color:var(--success);font-size:0.9rem;font-variant-numeric:tabular-nums;}
.pct-total.warn b{color:#F87171;}

/* Fixer Wochenplan: Tages-Slots */
.dd-week{display:flex;flex-direction:column;gap:7px;margin-bottom:16px;}
.dd-row{display:flex;align-items:center;gap:10px;}
.dd-day{width:26px;font-size:0.72rem;font-weight:600;color:var(--text-secondary);text-align:center;flex:0 0 auto;}
.dd-slot{flex:1;min-height:40px;border:1px dashed rgba(140,92,214,0.35);border-radius:11px;display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:0.72rem;padding:4px 8px;cursor:pointer;}
.dd-slot.filled{border:1px solid rgba(140,92,214,0.30);border-style:solid;background:linear-gradient(150deg,rgba(110,68,163,0.45) 0%,var(--bg-card) 74%);justify-content:flex-start;gap:8px;}
.dd-slot.hover{border-color:var(--accent-bright);background:rgba(140,92,214,0.10);color:var(--accent-bright);}
.dd-slot.rest{border:1px solid rgba(255,255,255,0.05);background:rgba(255,255,255,0.015);color:rgba(255,255,255,0.18);}
.dd-slot .sname{font-size:0.8rem;font-weight:500;color:var(--text-primary);flex:1;}
.dd-slot .min{margin-left:auto;}
.slot-btn{flex:1;min-height:40px;border:1px dashed rgba(140,92,214,0.35);border-radius:11px;display:flex;align-items:center;justify-content:center;gap:6px;color:var(--accent-bright);font-size:0.75rem;font-weight:500;background:transparent;font-family:inherit;cursor:pointer;}
.slot-btn svg{width:13px;height:13px;}

/* Extras: Inline-Toggles */
.tog-inline{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 0;}
.tog-inline + .tog-inline{border-top:1px dashed rgba(140,92,214,0.15);}
.tog-inline-txt{flex:1;}
.tog-inline b{font-size:0.8rem;font-weight:500;display:block;}
.tog-inline span{font-size:0.68rem;color:var(--text-muted);display:block;}
.switch{width:40px;height:23px;border-radius:999px;background:rgba(255,255,255,0.10);border:1px solid rgba(255,255,255,0.12);position:relative;flex:0 0 auto;margin-top:2px;cursor:pointer;}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:var(--text-secondary);transition:all 0.2s;}
.switch.on{background:var(--accent);border-color:rgba(140,92,214,0.55);}
.switch.on::after{left:19px;background:#fff;}

/* Zusammenfassung */
.sum-card{background:linear-gradient(150deg,rgba(110,68,163,0.40) 0%,var(--bg-card) 50%);border:1px solid rgba(140,92,214,0.32);border-radius:14px;padding:16px;margin-bottom:16px;}
.sum-card h3{font-size:0.92rem;font-weight:600;margin-bottom:10px;}
.sum-line{display:flex;align-items:center;gap:9px;padding:7px 0;font-size:0.8rem;color:var(--text-secondary);}
.sum-line + .sum-line{border-top:1px dashed rgba(140,92,214,0.15);}
.sum-line svg{width:14px;height:14px;color:var(--accent-bright);flex:0 0 auto;}
.sum-line b{color:var(--text-primary);font-weight:500;}
.jdot-sum{width:14px;height:14px;}
.jdot-sum svg{width:8px;height:8px;}

/* Sticky-CTA + Pausieren-Link */
.sticky-cta{position:sticky;bottom:0;margin:0 -16px -16px;padding:12px 16px 16px;background:linear-gradient(to top,var(--bg-main) 65%,rgba(18,16,22,0));}
.pause-link{display:flex;align-items:center;justify-content:center;gap:4px;width:100%;margin-top:10px;background:none;border:none;color:var(--text-muted);font-size:0.72rem;font-weight:500;font-family:inherit;cursor:pointer;padding:4px 0 0;}
.pause-link svg{width:12px;height:12px;}
/* Abbrechen (Setup + Editor): grauer sbtn unter der Haupt-Aktion, oberhalb des
   Pausieren-Links -- gleicher Rhythmus wie pause-link (10px Abstand). */
.pg-cancel{margin-top:10px;}

/* ============================================================
   Bottom-Sheet (Session-Auswahl im Fixer-Wochenplan)
   ============================================================ */
.sheet-dim{position:absolute;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(2px);z-index:5;}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:6;background:var(--bg-section);border-radius:20px 20px 0 0;border-top:1px solid rgba(140,92,214,0.35);padding:14px 16px 18px;}
.sheet-grab{width:36px;height:4px;border-radius:2px;background:rgba(255,255,255,0.18);margin:0 auto 12px;}
.sheet h3{font-size:0.92rem;font-weight:600;margin-bottom:2px;}
.sheet .sh-sub{font-size:0.72rem;color:var(--text-muted);margin-bottom:10px;}
.sheet-row{display:flex;align-items:center;gap:10px;padding:11px 4px;border-bottom:1px dashed rgba(140,92,214,0.15);cursor:pointer;}
.sheet-row:last-child{border-bottom:none;}
.sheet-row .sname{flex:1;font-size:0.84rem;font-weight:500;}
.sheet-row.picked{color:var(--accent-bright);}
.sheet-row.picked .mode-radio{border-color:var(--accent-bright);}
.sheet-row .mode-radio{margin:0;}
.sheet-vers{padding:2px 4px 12px;border-bottom:1px dashed rgba(140,92,214,0.15);}
.sv-label{display:block;font-size:0.6rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:7px;}
.ver-chips{display:flex;flex-wrap:wrap;gap:6px;}
.ver-chip{border:1px solid var(--border-subtle);background:rgba(255,255,255,0.03);color:var(--text-secondary);border-radius:999px;padding:5px 11px;font-size:0.68rem;font-weight:500;font-family:inherit;cursor:pointer;}
.ver-chip.on{background:rgba(140,92,214,0.16);border-color:rgba(140,92,214,0.55);color:var(--accent-bright);}
.sheet-confirm{margin-top:14px;}

/* ============================================================
   Pausieren-/Joker-Modal
   ============================================================ */
.pg-modal{position:static;}
.modal-dim{position:absolute;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(2px);z-index:5;}
.modal-card{position:absolute;inset:0;z-index:6;margin:auto;width:calc(100% - 40px);max-width:270px;height:fit-content;background:var(--bg-section);border:1px solid rgba(140,92,214,0.35);border-radius:18px;padding:22px 20px;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,0.4);}
.modal-ic{width:44px;height:44px;border-radius:50%;margin:0 auto 14px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.14);display:flex;align-items:center;justify-content:center;color:var(--text-secondary);}
.modal-ic svg{width:18px;height:18px;}
.modal-card h3{font-size:1.02rem;font-weight:600;margin-bottom:8px;}
.modal-card p{font-size:0.8rem;color:var(--text-secondary);line-height:1.55;margin-bottom:18px;}
.pg-modal .modal-actions{display:flex;flex-direction:column;gap:8px;}
.modal-cancel{background:none;border:none;color:var(--text-secondary);font-size:0.82rem;font-weight:500;font-family:inherit;padding:9px 0;cursor:pointer;}

/* ============================================================
   Aktives Programm: Segmented Control + Fokus (Heute-Tab)
   ============================================================ */
.seg-tabs{display:flex;background:rgba(255,255,255,0.05);border:1px solid var(--border-subtle);border-radius:999px;padding:3px;margin-bottom:18px;}
.seg-tabs button{flex:1;border:none;background:transparent;color:var(--text-muted);font-size:0.76rem;font-weight:500;font-family:inherit;padding:7px 0;border-radius:999px;cursor:pointer;}
.seg-tabs button.on{background:var(--accent);color:#fff;}

.focus-wrap{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:14px;}
.focus-label{font-size:0.66rem;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent-bright);margin-bottom:14px;}
.focus-ring{width:150px;height:150px;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(140,92,214,0.35),rgba(68,22,120,0.55));border:1px solid rgba(140,92,214,0.5);box-shadow:0 0 40px rgba(140,92,214,0.25);display:flex;align-items:center;justify-content:center;margin-bottom:18px;}
.focus-ring .play-circle{width:64px;height:64px;}
.focus-ring .play-circle svg{width:24px;height:24px;}
.focus-title{font-size:1.35rem;font-weight:600;letter-spacing:-0.01em;margin-bottom:4px;}
.focus-sub{color:var(--text-secondary);font-size:0.8rem;margin-bottom:6px;max-width:230px;}
.focus-meta{font-size:0.72rem;color:var(--text-muted);margin-bottom:20px;}

/* Fortschrittsring (fuellt mit Hoerfortschritt via --pg-progress) */
.prog-ring{width:68px;height:68px;border-radius:50%;background:conic-gradient(var(--accent-bright) calc(var(--pg-progress,0) * 1%),rgba(255,255,255,0.10) 0);display:flex;align-items:center;justify-content:center;}
.prog-ring .play-circle{width:54px;height:54px;}
.prog-ring .play-circle svg{width:19px;height:19px;}
.pg-play{cursor:pointer;}
.pg-play-ring{cursor:pointer;}

/* Erledigt- / Ruhetag- / Pausiert-Ring */
.focus-ring.is-done{background:rgba(255,255,255,0.02);border-color:var(--border-subtle);box-shadow:none;}
.done-circle{width:64px;height:64px;border-radius:50%;background:rgba(74,222,128,0.14);border:1px solid rgba(74,222,128,0.50);display:flex;align-items:center;justify-content:center;color:var(--success);}
.done-circle svg{width:26px;height:26px;}
.done-circle.done-circle-joker{background:rgba(140,92,214,0.14);border-color:rgba(140,92,214,0.50);color:var(--accent-bright);}
.focus-ring.is-rest{background:rgba(255,255,255,0.02);border-color:var(--border-subtle);box-shadow:none;}
.rest-circle{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.12);display:flex;align-items:center;justify-content:center;color:var(--text-muted);}
.rest-circle svg{width:24px;height:24px;}

/* Wochen-Dots + Kontext-Zeile */
.dots-week{display:flex;gap:8px;justify-content:center;margin-bottom:8px;}
.dw{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,0.20);}
.dw.done{background:var(--done);}
.dw.today{background:transparent;border:1.5px solid rgba(255,255,255,0.85);}
.dw.rest{background:rgba(255,255,255,0.04);}
.dw.tdone{background:var(--done);border:1.5px solid rgba(255,255,255,0.85);}
.dw.joker{background:transparent;border:1.5px dashed var(--accent-bright);}
.dw.rest.today{background:rgba(255,255,255,0.04);border:1.5px solid rgba(255,255,255,0.85);}
.dots-cap{font-size:0.66rem;color:var(--text-muted);margin-bottom:16px;}
/* .jdot ist per Basisklasse display:flex (Block) und würde im Fließtext der
   Kontextzeile einen Zeilenumbruch erzwingen -- hier wie im Mockup
   (programm_v2.2.5.css, "Joker-Kreis auch inline im Fließtext nutzbar")
   auf inline-flex umschalten, direkt in .jdot-cap (die einzige Verwendung
   von jdot() im Fließtext), damit .jdot anderswo (z. B. Joker-Pille im
   Plan-Tab) unangetastet bleibt. */
.jdot-cap{display:inline-flex;width:13px;height:13px;vertical-align:-1px;}
.jdot-cap svg{width:7px;height:7px;}

/* Hinweis-Zeile (z. B. Fortsetzen) */
.hero-hint{margin-top:14px;font-size:0.7rem;color:var(--text-muted);line-height:1.5;}
.hero-hint b{color:var(--text-secondary);font-weight:500;}
.pg-hint-center{text-align:center;max-width:240px;}

/* Verpasst-Banner: Joker (lila) bzw. Streakriss (rot) */
.joker-note{display:flex;align-items:flex-start;gap:8px;background:rgba(140,92,214,0.10);border:1px solid rgba(140,92,214,0.30);border-radius:11px;padding:9px 12px;margin-bottom:14px;font-size:0.72rem;color:var(--text-secondary);text-align:left;max-width:262px;line-height:1.45;}
.joker-note svg{width:13px;height:13px;color:var(--accent-bright);flex:0 0 auto;margin-top:1px;}
.joker-note b{color:var(--text-primary);font-weight:600;}
.joker-note.pause-note{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.12);}
.joker-note.pause-note svg{color:var(--text-secondary);}
.miss-note{display:flex;align-items:flex-start;gap:8px;background:rgba(248,113,113,0.10);border:1px solid rgba(248,113,113,0.35);border-radius:11px;padding:9px 12px;margin-bottom:14px;font-size:0.72rem;color:var(--text-secondary);text-align:left;max-width:262px;line-height:1.45;}
.miss-note svg{width:13px;height:13px;color:#F87171;flex:0 0 auto;margin-top:1px;}
.miss-note b{color:var(--text-primary);font-weight:600;}

/* ============================================================
   Plan-Tab: Agenda + Joker-Pille
   ============================================================ */
.agenda{display:flex;flex-direction:column;gap:6px;}
.ag-row{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:13px;background:rgba(255,255,255,0.03);border:1px solid var(--border-subtle);}
.ag-row.today{background:linear-gradient(150deg,rgba(110,68,163,0.40) 0%,var(--bg-card) 60%);border-color:rgba(140,92,214,0.45);}
.ag-row.done{opacity:0.65;}
.ag-row.rest{opacity:0.45;background:transparent;border-style:dashed;}
.ag-date{width:34px;text-align:center;flex:0 0 auto;}
.ag-date b{display:block;font-size:0.62rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;}
.ag-date span{display:block;font-size:0.88rem;font-weight:600;}
.ag-main{flex:1;min-width:0;}
.ag-main b{font-size:0.85rem;font-weight:600;display:block;}
.ag-main span{font-size:0.7rem;color:var(--text-muted);}
.ag-title-row{display:flex;align-items:center;gap:7px;}
.ag-main .min{color:#cbaefa;font-size:0.7rem;}
.ag-state{flex:0 0 auto;color:var(--success);}
.ag-state svg{width:16px;height:16px;}
.ag-state-joker{color:var(--accent-bright);}

.joker-pill{display:flex;align-items:center;gap:8px;margin:14px 2px 12px;padding:7px 7px 7px 12px;border-radius:999px;background:rgba(140,92,214,0.10);border:1px solid rgba(140,92,214,0.30);}
.joker-pill .jtext{flex:1;}
.joker-link{margin-left:auto;background:none;border:none;color:var(--accent-bright);font-size:0.72rem;font-weight:500;text-decoration:underline;text-underline-offset:2px;cursor:pointer;font-family:inherit;padding:0;}
.joker-pill .joker-link{text-decoration:none;}

/* ============================================================
   Verlauf-Tab: Streak + Quote + Monats-Kalender
   ============================================================ */
.streak-block{text-align:center;padding:18px 0 8px;border-top:1px solid var(--border-subtle);margin-top:4px;}
.streak-block.top{border-top:none;margin-top:2px;padding-top:2px;}
.streak-num{font-size:2.8rem;font-weight:700;letter-spacing:-0.02em;color:var(--accent-bright);line-height:1;display:inline-flex;align-items:baseline;gap:8px;}
.streak-num svg{width:26px;height:26px;transform:translateY(3px);}
.streak-cap{font-size:0.78rem;color:var(--text-secondary);margin-top:6px;}
.streak-sub{font-size:0.68rem;color:var(--text-muted);margin-top:2px;}
.pg-quote-bar{margin:16px 0 8px;}
.pg-view .chprog-fill{width:var(--pg-w,0%);}
.pg-quote-label{text-align:center;font-size:0.76rem;color:var(--text-secondary);margin-bottom:18px;}

/* Kalender-Varianten (entschiedene Optik Mockup Sektion 4).
   Basis .cal-dot / .leg-dot liegt in style.css; hier nur die
   Programm-Zustaende, gescoped unter .pg-view.
   nicht trainiert / verpasst = blanke .cal-dot mit Zahl. */
/* Optik von Ruhetag und "nicht trainiert" bewusst getauscht (Daniel, 23.07.2026):
   Ruhetag ist jetzt der sichtbare, gefuellte Punkt; "nicht trainiert" (blanker
   Basis-Punkt mit Zahl, ohne Modifier-Klasse) ist jetzt transparent mit blasser
   Zahl. Werte 1:1 vertauscht, ohne die geteilte Basis in style.css (auch von
   settings-v2.js genutzt) anzufassen. */
.pg-view .cal-dot:not(.on):not(.rest):not(.joker):not(.pause-edge):not(.future):not(.empty):not(.today){background:transparent;border:none;color:rgba(255,255,255,0.22);font-weight:500;}
.pg-view .leg-dot:not(.on):not(.rest):not(.joker):not(.pause-edge):not(.future):not(.empty):not(.today){background:transparent;border:none;color:rgba(255,255,255,0.22);font-weight:500;}
.pg-view .cal-dot.rest{background:rgba(255,255,255,0.16);border:1px solid rgba(255,255,255,0.24);color:var(--text-primary);font-weight:600;}
.pg-view .cal-dot.joker{background:transparent;border:1.5px dashed var(--accent-bright);color:var(--text-secondary);}
.pg-view .cal-dot.joker svg{width:10px;height:10px;color:var(--accent-bright);}
.pg-view .cal-dot.pause-edge{background:transparent;border:1.5px dashed rgba(184,184,194,0.55);color:var(--text-secondary);}
.pg-view .cal-dot.pause-edge svg{width:9px;height:9px;color:var(--text-secondary);}
.pg-view .cal-dot.rest.today{border:2px solid rgba(255,255,255,0.85);}
/* Heute, noch nicht abgehakt (keine weitere Modifier-Klasse aus programm-v2.js):
   dieselbe Basis-Klasse wie "nicht trainiert", da JS hier nicht unterscheidet.
   Ring bleibt in jedem Fall bestehen, Fuellung eigenstaendig statt vom
   getauschten Rest/Nicht-trainiert-Paar mitgezogen -- sonst verliert "heute"
   beim Tausch seinen Ring (Border-Shorthand der Basisregel ueberschreibt ihn). */
.pg-view .cal-dot.today:not(.on):not(.rest):not(.joker):not(.pause-edge):not(.future):not(.empty){background:rgba(255,255,255,0.16);border:2px solid rgba(255,255,255,0.85);color:var(--text-primary);font-weight:600;}

.pg-view .cal-legend{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;justify-items:start;}
.pg-view .leg-dot.rest{background:rgba(255,255,255,0.16);border:1px solid rgba(255,255,255,0.24);color:var(--text-primary);font-size:10px;font-weight:600;}
/* "heute"-Legendenpunkt: derselbe Ring-Erhalt wie bei .cal-dot.today (s. o.),
   sonst verschwindet der Ring auch hier hinter der transparenten Basisregel. */
.pg-view .leg-dot.today:not(.on):not(.rest):not(.joker):not(.pause-edge):not(.future):not(.empty){background:rgba(255,255,255,0.16);border:2px solid rgba(255,255,255,0.85);}
.pg-view .leg-dot.joker{background:transparent;border:1.5px dashed var(--accent-bright);align-items:center;justify-content:center;}
.pg-view .leg-dot.joker svg{width:8px;height:8px;color:var(--accent-bright);}
.pg-view .leg-dot.pause-edge{background:transparent;border:1.5px dashed rgba(184,184,194,0.55);align-items:center;justify-content:center;}
.pg-view .leg-dot.pause-edge svg{width:7px;height:7px;color:var(--text-secondary);}

/* ============================================================
   Dashboard-Anbindung: Hero-Strip (P5, Spec 8.5 + Mockup Sektion 6)
   Bewusst NICHT unter .pg-view gescoped, da der Strip im Dashboard
   (css/style.css-Kontext) rendert, nicht im Programm-Screen.
   Kein Play mehr: Pfeil statt Play, im Erledigt-Zustand gruener Haken.
   ============================================================ */
.dash-hero{display:flex;align-items:center;gap:12px;padding:13px 16px 13px 12px;border-radius:14px;background:rgba(255,255,255,0.045);border:1px solid rgba(255,255,255,0.10);border-left:4px solid var(--accent-bright);margin-bottom:14px;text-decoration:none;color:inherit;}
.dash-hero.is-done{border-left-color:var(--success);}
.dash-hero-ic{width:42px;height:42px;border-radius:50%;flex:0 0 auto;background:var(--accent);border:1px solid rgba(255,255,255,0.18);display:flex;align-items:center;justify-content:center;color:#fff;}
.dash-hero-ic svg{width:20px;height:20px;}
.dash-hero.is-done .dash-hero-ic{background:none;border:none;color:var(--success);}
.dash-hero .hs-text{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;}
.dash-hero .dh-label{display:block;font-size:0.64rem;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent-bright);white-space:nowrap;}
.dash-hero .dh-row{display:flex;align-items:center;gap:7px;margin-top:3px;}
.dash-hero .dh-title{font-size:0.82rem;color:var(--text-primary);font-weight:500;}
.dash-hero .min{font-size:0.6rem;color:#cbaefa;background:rgba(140,92,214,0.15);border:1px solid rgba(140,92,214,0.25);padding:1px 6px;border-radius:999px;white-space:nowrap;}
.prog-streak{display:inline-flex;align-items:center;gap:4px;color:var(--accent-bright);font-size:0.98rem;font-weight:700;flex:0 0 auto;}
.prog-streak svg{width:16px;height:16px;}