/* ============================================================
   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
   (Anker P4). Ursprünglich war das ganze Overlay (Sheet + Modal)
   `position:absolute` relativ zu DIESEM Container -- das ging schief,
   sobald der Container (= aktuelle Ansicht: Editor-Formular, Heute-Tab
   usw.) höher war als der sichtbare Bildschirm: Sheet/Modal haben sich
   dann relativ zur GESAMTEN Inhaltshöhe positioniert statt relativ zum
   sichtbaren Ausschnitt. Ergebnis: Fenster teils halb ausserhalb des
   Bildschirms, Scroll-Ziel je nach Zustand/Scrollposition komplett
   unterschiedlich (von Daniel gemeldet, Bugfix 23.07.2026). Fix: Sheet
   und Modal sind jetzt `position:fixed` (siehe Abschnitte "Bottom-Sheet"
   und "Pausieren-/Joker-Modal" weiter unten) -- damit hängen sie immer
   am sichtbaren Bildschirm, nicht mehr am (oft viel höheren) Inhalt.
   position:relative/overflow:hidden bleiben hier trotzdem stehen, für
   alles andere im Container, das normal (nicht fixed) positioniert ist. */
.pg-shell{position:relative;overflow:hidden;}
.desktop-view .pg-shell{max-width:440px;margin:0 auto;width:100%;}

/* Desktop: Sheet/Modal sind jetzt fixed zum ganzen Browserfenster (s.u.),
   nicht mehr zur schmalen Programm-Spalte neben der Rail. Die Rail ist
   fest 220px breit (.rail in style.css) -- damit Sheet/Modal trotzdem
   ueber der Programm-Spalte erscheinen (statt mittig im ganzen Fenster,
   was neben der Rail schief aussehen wuerde), hier um die halbe
   Rail-Breite (110px) nach rechts verschoben. Bugfix 23.07.2026. */
.desktop-view .sheet,
.desktop-view .modal-card{left:calc(50% + 110px);right:auto;margin-left:0;margin-right:0;transform:translateX(-50%);}

/* Buttons: volle Breite + zentriert wie im Mockup; abgeblendet wenn disabled.
   pg-disabled ist eine reine Optik-Klasse (kein disabled-Attribut): Create-
   und Save-Button bleiben damit klickbar, damit ein Tap den Tooltip zeigen
   kann -- ein natives disabled-Attribut feuert bei echtem Klick kein
   click-Event mehr (Daniel 28.07.2026). */
.pg-view .play-btn{justify-content:center;}
.pg-view .play-btn.full{width:100%;}
.pg-view .play-btn[disabled],
.pg-view .play-btn:disabled,
.pg-view .play-btn.pg-disabled{opacity:0.45;cursor:default;}
/* Info-Popup am Create-/Save-Button: dasselbe Muster wie das Info-Icon auf
   der Sessions-Seite (.sess-info-wrapper/.sess-info-popup, style.css) --
   Daniel wollte hier explizit denselben Tooltip-Stil, nicht das schmalere
   .ui-tooltip der Kalender-Punkte. .sess-info-wrapper braucht sonst einen
   positionierten Vorfahren (bei Sessions übernimmt das die umgebende
   Titel-Zeile) -- hier übernimmt der Button selbst die Rolle, daher
   position:relative hier ergänzt. Popup sitzt unten im sticky-cta (kein
   Platz nach unten, Bottom-Nav überlappt) -- Richtung umgedreht, öffnet
   nach oben statt wie im Original nach unten. */
.pg-create.sess-info-wrapper,
.pg-save.sess-info-wrapper{position:relative;}
/* opacity auf dem Button selbst würde das Popup mitdimmen -- ein Kind kann
   bei CSS-opacity nicht "voller" sein als sein Elternelement, das Popup
   war dadurch praktisch unlesbar (Daniel 28.07.2026). Deshalb Button-Opacity
   hier zurück auf 1, das Ausgegraut-Aussehen kommt stattdessen nur vom
   Label-Wrapper (.pg-btn-label), das Popup bleibt daneben voll sichtbar. */
.pg-view .play-btn.pg-create.pg-disabled,
.pg-view .play-btn.pg-save.pg-disabled{opacity:1;}
.pg-btn-label{display:inline-flex;align-items:center;gap:7px;}
.pg-create.pg-disabled .pg-btn-label,
.pg-save.pg-disabled .pg-btn-label{opacity:0.45;}
.pg-create.sess-info-wrapper .sess-info-popup,
.pg-save.sess-info-wrapper .sess-info-popup{top:auto;bottom:100%;left:0;width:100%;margin-top:0;transition:opacity 0.2s ease, margin-bottom 0.2s ease, visibility 0.2s ease;}
.pg-create.sess-info-wrapper.force-show .sess-info-popup,
.pg-save.sess-info-wrapper.force-show .sess-info-popup{margin-bottom:6px;}
@media (hover: hover) {
  .pg-create.sess-info-wrapper:hover .sess-info-popup,
  .pg-save.sess-info-wrapper:hover .sess-info-popup{margin-bottom:6px;}
}

/* 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 hat 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 der Titel bündig mit
   Rhythmus/Aufbau/Schwerpunkte steht. (Der Editor-Untertitel "Änderungen
   gelten ab nächster Woche" ist seit 23.07.2026 komplett entfernt, siehe
   saveEditor(); Setup hat nie einen screen-sub gehabt.) */
.pg-editor .screen-title,
.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;}
.seg-hint.warn{color:#F87171;}
.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;}

/* Schwerpunkte: Akkordeon-Karte (Setup + Editor) */
.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;}
.pg-reset-weights,
.pg-setup-reset-weights{background:none;border:none;padding:0;margin:0;font:inherit;cursor:pointer;}

/* 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;}
.cal-dot{position:relative;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;font-size:0.75rem;font-weight:600;color:var(--text-secondary);border:1.5px solid transparent;cursor:default;}
.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;border: 1.5px solid rgba(140,92,214,0.40);border-radius: 50%;display:flex;align-items:center;justify-content:center;color:var(--accent-bright);}
.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)
   Bugfix 23.07.2026: position:fixed statt absolute, damit das Sheet
   immer am sichtbaren Bildschirm unten klebt -- unabhaengig davon, wie
   hoch das Editor-Formular gerade ist oder wie weit man gescrollt hat
   (vorher: absolute relativ zum Formular-Container, dadurch teils weit
   ausserhalb des sichtbaren Bereichs). max-width+margin, damit es auf
   Desktop nicht ueber die volle Fensterbreite geht (Desktop-Korrektur
   der Position selbst steht oben bei ".desktop-view .sheet"). Zusaetzlich
   max-height+overflow-y als Schutz, falls die Session-Liste laenger ist
   als der sichtbare Bildschirm -- dann scrollt nur das Sheet, es wird
   nicht oben abgeschnitten.
   Bugfix 23.07.2026 (Teil 2): z-index von 5/6 auf 150/151 angehoben.
   `.botnav` (style.css) ist ebenfalls position:fixed;bottom:0 mit
   z-index:100 -- lag also ÜBER dem unteren Rand des Sheets und hat den
   "Session auswählen"-Button verdeckt (von Daniel per Screenshot in der
   PWA gemeldet). Jetzt liegt das Sheet über der Nav-Leiste, wie bei
   einem Bottom-Sheet ueblich (Nav ist waehrend das Sheet offen ist kurz
   nicht sichtbar/bedienbar). Zusaetzlich padding-bottom des Sheets um
   env(safe-area-inset-bottom) erweitert (gleiches Muster wie .botnav),
   damit der Button auf Handys mit Home-Indicator/Gesten-Leiste (z. B.
   Pixel 9a) nicht direkt am unteren Bildschirmrand klebt.
   ============================================================ */
.sheet-dim{position:fixed;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(2px);z-index:150;}
.sheet{position:fixed;left:0;right:0;bottom:0;max-width:440px;margin-left:auto;margin-right:auto;max-height:85vh;overflow-y:auto;z-index:151;background:var(--bg-section);border-radius:20px 20px 0 0;border-top:1px solid rgba(140,92,214,0.35);padding:14px 16px calc(18px + env(safe-area-inset-bottom));}
.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;}

/* Tausch-Sheet (Session tauschen, Heute-Tab): Markierung der aktuell
   geplanten Session, teilt sich sonst .sheet-row/.ver-chip/.pg-cancel mit
   dem Editor-Sheet. */
.today-tag{font-size:0.68rem;color:var(--accent-bright);font-weight:600;margin-left:8px;letter-spacing:0.02em;}

/* ============================================================
   Pausieren-/Joker-Modal
   Bugfix 23.07.2026: position:fixed statt absolute -- selbe Ursache wie
   beim Bottom-Sheet oben. Modal war relativ zum Editor/Heute-Container
   zentriert (dessen Gesamthoehe, nicht der sichtbare Bildschirm), daher
   teils weit ausserhalb des sichtbaren Bereichs bzw. sehr
   unterschiedliche Scrollposition noetig, um es zu finden. max-height+
   overflow-y zusaetzlich als Schutz gegen Abschneiden auf niedrigen
   Bildschirmen (z.B. Querformat).
   Bugfix 23.07.2026 (Teil 2): z-index von 5/6 auf 150/151 angehoben,
   aus demselben Grund wie beim Bottom-Sheet -- `.botnav` liegt fixed
   mit z-index:100, das Modal soll immer darueber liegen.
   ============================================================ */
.pg-modal{position:static;}
.modal-dim{position:fixed;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(2px);z-index:150;}
.modal-card{position:fixed;inset:0;z-index:151;margin:auto;width:calc(100% - 40px);max-width:270px;max-height:90vh;overflow-y:auto;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;}
/* L6-Nachbesserung: Fehlertext bei einem gescheiterten Pausieren/Joker-
   Versuch sitzt IM Modal (siehe htmlModalError() in programm-v2.js), weil
   der Seiten-Banner .pg-error-note hinter dem fixed .modal-dim verschwinden
   würde. Gleiches Rot wie .pg-error-note/.miss-note (#F87171). */
.modal-error{background:rgba(248,113,113,0.10);border:1px solid rgba(248,113,113,0.35);border-radius:10px;padding:8px 10px;font-size:0.76rem;color:var(--text-secondary);line-height:1.4;text-align:left;margin:-6px 0 16px;}
.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.15);}
.dw.empty{background:rgba(255,255,255,0.08);}
.dw.pause{background:transparent;border:1.5px dashed rgba(184,184,194,0.55);}
.dw.dw-missed{background:transparent;border:1.5px dashed #F87171;}
.dw.done{background:var(--done);}
.dw.today{background:transparent;border:1.5px solid rgba(255,255,255,0.85);}
.dw.rest{background:repeating-linear-gradient(135deg,rgba(255,255,255,0.25) 0 2px,rgba(255,255,255,0.08) 2px 4px);}
.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{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:0px;}
.jdot-cap svg{width:7px;height:7px;}

/* "Session tauschen"-Link (Heute-Tab): bewusst gedämpfter Text-Link statt
   Pille (Daniel 24.07.2026) -- keine Fläche, keine Akzentfarbe, damit der
   Tausch nicht wie eine einladende Option wirkt, sondern wie ein Hinweis
   für den Ausnahmefall (Mockup Variante D war optisch zu nah an der
   Joker-Pille). */
.pg-swap-link{display:inline-flex;align-items:center;gap:5px;margin-top:10px;background:none;border:none;padding:0;cursor:pointer;font-family:inherit;color:var(--text-secondary);font-size:0.72rem;font-weight:500;}
.pg-swap-link svg{width:13px;height:13px;}

/* 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;}

/* Fehler-Banner (L6): gleiche Optik wie .miss-note (dasselbe Rot #F87171),
   liegt aber außerhalb von .pg-view (siehe render() in programm-v2.js) und
   läuft deshalb in jedem Zustand mit (Einstieg/Setup/Editor/Tabs). Deshalb
   kein max-width wie .miss-note, sondern volle Breite, plus Schließen-Knopf. */
.pg-error-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:12px 0 14px;font-size:0.72rem;color:var(--text-secondary);text-align:left;line-height:1.45;}
.pg-error-note svg{width:13px;height:13px;color:#F87171;flex:0 0 auto;margin-top:1px;}
.pg-error-note span{flex:1;}
.pg-error-note .pg-error-close{background:none;border:none;padding:0;margin:0;flex:0 0 auto;display:flex;cursor:pointer;}
.pg-error-note .pg-error-close svg{width:11px;height:11px;color:var(--text-secondary);margin-top:1px;}

/* ============================================================
   Plan-Tab: Wochen-Umschalter (Vorschau naechste Woche)
   1:1 aus MOCKUP_Naechste_Woche_Tab_final.html, Variante B: nur Textfarbe
   plus Unterstrich, keine gefuellte Flaeche, keine Rundung. Beide Buttons
   flex:1, jeder traegt seinen eigenen border-bottom, damit die Schiene aus
   zwei gleich breiten Haelften besteht, unabhaengig von der Textlaenge.
   ============================================================ */
.pg-view .wtab{display:flex;margin-bottom:16px;}
.pg-view .wtab button{flex:1;background:none;border:none;border-bottom:2px solid var(--border-subtle);font-family:inherit;font-size:0.76rem;font-weight:500;color:var(--text-muted);cursor:pointer;padding:4px 2px 9px;text-align:center;transition:all 0.2s ease;}
.pg-view .wtab button.active{color:var(--accent-bright);font-weight:600;border-bottom-color:var(--accent-bright);}

/* Fusszeile der Vorschau ("Nächste Woche: Weiter geht's am ..."), dynamisch
   aus dem ersten planned-Tag der Vorschau, siehe htmlPlan() in programm-v2.js. */
.pg-view .hint{font-size:0.7rem;color:var(--text-muted);margin:14px 0 4px;line-height:1.5;text-align:center;}

/* ============================================================
   Plan-Tab: Agenda + Joker-Pille
   ============================================================ */
.agenda{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.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);}
.ag-state-joker .jdot{border:1.5px solid var(--accent-bright);background:transparent;cursor:default;pointer-events:none;}
.ag-state-missed{color:#F87171;}
.mdot{display:inline-block;width:15px;height:15px;border-radius:50%;border:1.5px solid #F87171;}

/* Padding-left 19px statt 12px (Daniel 24.07.2026): die Icon-Kreis-Aussenkante
   soll optisch mit der linken Kante der Datumsziffer (.ag-date span, in der
   34px breiten, zentrierten Datumsspalte der Agenda-Zeilen darueber) fluchten.
   Ziffer + Icon sind unterschiedlich breit, deshalb ist das kein 1:1-Wert aus
   .ag-row -- bei Bedarf hier nachjustieren. */
.joker-pill{display:flex;align-items:center;gap:8px;margin:0 2px 14px;padding:7px 7px 7px 19px;border-radius:999px;background:rgba(140,92,214,0.10);border:1px solid rgba(140,92,214,0.30);}
.joker-pill .jtext{flex:1;}
/* Icon in der Joker-Pille ist rein dekorativ (kein eigener Klick-Trigger --
   das ist der separate "heute einsetzen"-Link), darum die globale
   .jdot:hover-Affordanz (style.css) hier zuruecknehmen. */
.joker-pill .jdot{cursor:default;}
.joker-pill .jdot:hover{color:var(--accent-bright);border-color:rgba(140,92,214,0.40);}
.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;}
/* Quotenleiste (Review L4, 02.08.2026): bezieht sich auf den Monat, den der
   Kalender gerade zeigt, und steht UNTER der Legende als Abschluss der Karte
   (zwischen Raster und Legende geklemmt hat sie zu sehr irritiert). Gleiche
   max-width und Zentrierung wie .cal-grid, damit alles dieselbe Kante hat; der
   margin-top setzt sich zum margin-bottom der Legende (18px aus style.css). */
.pg-quote-bar{max-width:280px;margin:8px auto;}
.pg-view .chprog-fill{width:var(--pg-w,0%);}
.pg-quote-label{text-align:center;font-size:0.76rem;color:var(--text-secondary);}
/* Monat mit weniger als zwei abgewickelten Tagen: Text statt Leiste, gedaempft,
   damit er nicht wie ein Ergebnis wirkt. Eigener margin-top, weil in diesem Fall
   die Leiste fehlt, die den Abstand zur Legende sonst mitbringt. */
.pg-quote-empty{color:var(--text-muted);margin-top:8px;}
.pg-quote-note{text-align:center;font-size:0.68rem;color:var(--text-muted);margin-top:3px;}

/* Kalender-Varianten (Mockup Varianten_8, "C verfeinert" -- Daniel 24.07.2026,
   loest die vorige Optik aus Sektion 4 ab). Basis .cal-dot / .leg-dot liegt in
   style.css; hier nur die Programm-Zustaende, gescoped unter .pg-view.
   "nicht trainiert" bekommt jetzt eine eigene Klasse .cal-missed (rot
   gestrichelt, siehe Diskussion_Aktivitaet.html Optionen 2/3) statt der
   bisherigen blassen Basis-Optik. Tage VOR Programmstart bleiben bewusst die
   blasse Basis (kein "verpasst", da noch kein Programm lief -- eigene Klasse
   .cal-missed wird von programm-v2.js nur bei echtem status==='missed'
   gesetzt. Diese Basis-Regel ist nach der Missed-Auslagerung nur noch fuer
   "vor Programmstart" relevant.
   Daniel 24.07.2026, echter Bugfund: Klasse hiess urspruenglich schlicht
   .missed -- das kollidierte mit der GLOBALEN .missed-Regel aus style.css
   (Streak-gerissen-Warnbanner in challenges-v2.js: display:flex, padding:10px
   13px, border-radius:11px). Gleiche Spezifitaet (0,1,0), style.css lud
   zuerst, .cal-dot.missed hat nur background/border/color ueberschrieben --
   padding/border-radius/display blieben vom globalen .missed uebrig und
   verzerrten den Kreis zum Oval. Der vorherige "Puls-Glow"-Verdacht unten war
   ein Irrweg. Fix: eigene Klasse .cal-missed statt .missed, damit es nicht
   mehr mit fremden globalen Klassen kollidiert.
   Daniel 24.07.2026: kein Kreis mit Zahl, sondern ein minimaler, unauffaelliger
   Punkt -- kein Rand, keine Zahl (programm-v2.js liefert hier inner='' ), nur
   eine kleine Fuellung per ::after, deutlich kleiner als die Tages-Kreise. Das
   ::after landet dank display:flex auf .cal-dot automatisch zentriert. */
.pg-view .cal-dot:not(.on):not(.rest):not(.joker):not(.pause-edge):not(.future):not(.empty):not(.today):not(.cal-missed){background:transparent;border:none;}
.pg-view .cal-dot:not(.on):not(.rest):not(.joker):not(.pause-edge):not(.future):not(.empty):not(.today):not(.cal-missed)::after{content:"";width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.24);}
.pg-view .leg-dot:not(.on):not(.rest):not(.joker):not(.pause-edge):not(.future):not(.empty):not(.today):not(.cal-missed){background:transparent;border:none;}
.pg-view .leg-dot:not(.on):not(.rest):not(.joker):not(.pause-edge):not(.future):not(.empty):not(.today):not(.cal-missed)::after{content:"";width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,0.24);}
/* .cal-missed: exakt wie .future (gestrichelter Kreis + Zahl), nur rot statt
   lila -- Daniel 24.07.2026 wollte keine dickere Randbreite, sondern 1:1
   dieselbe Optik. Farbe #F87171 ist bewusst identisch zu .miss-note svg
   (Streak-gerissen-Banner im Heute-Tab, programm.css Zeile ~325) -- dasselbe
   Rot wie dort. Randbreite 1.5px wie .joker/.future. Das eigentliche
   Oval-Problem war die Klassennamen-Kollision mit dem globalen .missed aus
   style.css, siehe Kommentar oben -- nicht Randbreite und nicht der
   Puls-Glow von .today. */
.pg-view .cal-dot.cal-missed{background:transparent;border:1.5px dashed #F87171;color:#F87171;}
.pg-view .leg-dot.cal-missed{background:transparent;border:1.5px dashed #F87171;}
.pg-view .cal-dot.future{background:transparent;border:1.5px dashed var(--accent-bright);color:var(--accent-bright);}
.pg-view .leg-dot.future{background:transparent;border:1.5px dashed var(--accent-bright);}
.pg-view .cal-dot.rest{background:repeating-linear-gradient(135deg,rgba(255,255,255,0.12) 0 4px,rgba(255,255,255,0.04) 4px 8px);border:1.5px solid rgba(184,184,194,0.5);color:rgba(255,255,255,0.45);}
.pg-view .leg-dot.rest{background:repeating-linear-gradient(135deg,rgba(255,255,255,0.12) 0 4px,rgba(255,255,255,0.04) 4px 8px);border:1.5px solid rgba(184,184,194,0.5);color:rgba(255,255,255,0.45);font-size:10px;}
.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:14px;height:14px;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):not(.cal-missed){background:rgba(255,255,255,0.16);border:2px solid rgba(255,255,255,0.85);color:var(--text-primary);font-weight:600;}
/* "heute" und "erledigt": Haken statt Zahl, transparenter Hintergrund */
.pg-view .cal-dot.on{color:var(--text-primary);}
.pg-view .cal-dot.on.today{background:transparent;border:2px solid rgba(255,255,255,0.85);color:var(--success);}
.pg-view .cal-dot.on.today svg{width:15px;height:15px;}

/* Puls hinter "heute": INSET-Glow direkt auf .cal-dot.today statt eines
   aussenliegenden ::before mit box-shadow -- ein AUSSEN liegender Schein
   reichte bei 8px-Grid-Gap zwischen 24px-Punkten in Nachbarzellen hinein.
   Das war ein echter, aber SEPARATER Bug von "23 ist oval" (Daniel
   24.07.2026 vermutete zwischenzeitlich einen Zusammenhang, da "heute" (24)
   direkt neben "nicht trainiert" (23) sitzt und der Effekt dort am meisten
   auffiel). Die eigentliche Oval-Ursache war die .missed-Klassenkollision
   mit style.css, siehe Kommentar bei .cal-missed weiter oben -- unabhaengig
   von diesem Puls. `inset`-box-shadow verlaesst den Rand des eigenen
   Elements nie, also kein Ueberlauf in Nachbarzellen mehr, unabhaengig vom
   Blur-Radius. Kein Pseudo-Element, kein position/z-index mehr noetig. */
.pg-view .cal-dot.today:not(.on):not(.rest):not(.joker):not(.cal-missed){animation:pg-cal-today-pulse 3.4s ease-in-out infinite;}
@keyframes pg-cal-today-pulse{0%,100%{box-shadow:inset 0 0 0 0 rgba(140,92,214,0);}50%{box-shadow:inset 0 0 10px 4px rgba(140,92,214,0.95);}}

/* Aussenkante der Legenden-Kreise auf die Aussenkante der Kalender-Kreise
   ausrichten (Daniel 24.07.2026: "Legende muss einen Hauch nach rechts").
   .cal-grid zentriert jeden 24px-Punkt innerhalb seiner von 7 gleich breiten
   Spalten (`justify-items:center`), dadurch hat der ganz linke Punkt einen
   kleinen Eigen-Einzug zur Kartenkante -- bei voller Spaltenbreite 280px/7
   Spalten/8px-Gap exakt (280-6*8)/7=33.14px Spaltenbreite, (33.14-24)/2=
   4.57px Einzug. `.cal-legend` hatte keine eigene Breitenbegrenzung und ihre
   Punkte lagen dank `justify-items:start` exakt an der Kartenkante (0px
   Einzug) -- daher der sichtbare Versatz. Fix: dieselbe `max-width:280px` +
   zentrierende Margins wie `.cal-grid` (damit beide bei breiten Karten
   gleich zentriert werden, kein via `margin` verkuerztes Shorthand, das die
   bestehende `margin-bottom:18px` der Basisklasse aus style.css loeschen
   wuerde) plus derselbe Einzug als `padding-left`. */
.pg-view .cal-legend{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;justify-items:start;max-width:280px;margin-left:auto;margin-right:auto;padding-left:4.6px;}
/* "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):not(.cal-missed){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;}

/* Desktop: Strip volle Breite wie die feedback-line-Bloecke unten */
.desktop-view .dash-hero{width:100%;box-sizing:border-box;margin-bottom:22px;}

/* Ruhetag- / Joker-Zustand (gedaempft statt Akzent, Vorbild: .focus-ring.is-rest
   und .rest-circle, Zeile 282/283). Ruhetag darf nicht wie ein Fehler oder ein
   deaktivierter Button wirken, daher kein reines Grau ohne Kontur. */
.dash-hero.is-rest{border-left-color:rgba(255,255,255,0.18);}
.dash-hero.is-rest .dash-hero-ic{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.12);color:var(--text-muted);}
.dash-hero.is-rest .dh-title{color:var(--text-secondary);}
.dash-hero.is-joker{border-left-color:var(--accent-bright);}
.dash-hero.is-joker .dash-hero-ic{background:rgba(140,92,214,0.18);border-color:rgba(140,92,214,0.30);color:var(--accent-bright);}

/* Isolierter Animationsstart fuer den nachtraeglich per JS eingefuegten
   Strip (Teil C): eigener Delay 0s, unabhaengig von der Einblend-Staffel in
   style.css, die ab Seitenstart zaehlt. Nach style.css geladen, gewinnt bei
   gleicher Spezifitaet. style.css bleibt unangetastet. */
.dash-hero{animation:slideUpFade 0.5s cubic-bezier(0.16,1,0.3,1) forwards;animation-delay:0s;opacity:0;}

/* Link zum Heute-Tab fr aktive Plan-Tab-Zeile */
.ag-row.pg-goto-heute { cursor: pointer; }