/* Ergänzungen zu assets/app.css (Branding AP-01a) für die serverseitigen Seiten.
   Ersetzt Inline-Styles der Mockups, weil die Content-Security-Policy keine Inline-Styles erlaubt. */
.h-card{font:var(--type-h3)}
.center{text-align:center}
.gap-6{gap:6px}
.mt-8{margin-top:8px}
.ic-brand{color:var(--plum-600)}
.btn .ic{margin-right:var(--space-2)}
.auth-card-wide{max-width:640px}
/* Schmerz-Kurzform ohne JavaScript aufklappen (Branding 7.3): sichtbar, sobald "Ja" gewählt ist */
form:has(input[name="pain"][value="ja"]:checked) .reveal{display:grid;gap:var(--space-4)}
/* Browser ohne :has() zeigen die Kurzform immer */
@supports not selector(:has(*)){.reveal{display:grid;gap:var(--space-4)}}
.plan-text{margin:0;white-space:pre-wrap;color:var(--text-secondary);background:var(--bg-page);padding:var(--space-3);border-radius:var(--radius-md)}
.mt-4{margin-top:var(--space-4)}
.mt-8x{margin-top:var(--space-8)}
.label-light{font-weight:400}
.span-2{grid-column:span 2}
.link-inline{display:inline-flex;align-items:center;gap:4px}
.danger-text{color:var(--action-danger)}
.inline-form{display:inline}
.zones-svg{display:block;width:100%;height:10px;border-radius:var(--radius-full);overflow:hidden}
.zones-svg .z1,.legend .z1{fill:var(--plum-300);background:var(--plum-300)}
.zones-svg .z2,.legend .z2{fill:var(--plum-400);background:var(--plum-400)}
.zones-svg .z3,.legend .z3{fill:var(--plum-600);background:var(--plum-600)}
.zones-svg .z4,.legend .z4{fill:var(--plum-700);background:var(--plum-700)}
.zones-svg .z5,.legend .z5{fill:var(--plum-800);background:var(--plum-800)}
.link-row{text-decoration:none;color:inherit}
.update-banner{margin-bottom:var(--space-4)}

/* S6 Verlauf: Balkenhöhen in 5-%-Schritten (statt Inline-Styles, CSP) */
.bars i.h0{height:0%}.bars i.h5{height:5%}.bars i.h10{height:10%}.bars i.h15{height:15%}.bars i.h20{height:20%}.bars i.h25{height:25%}.bars i.h30{height:30%}.bars i.h35{height:35%}.bars i.h40{height:40%}.bars i.h45{height:45%}.bars i.h50{height:50%}.bars i.h55{height:55%}.bars i.h60{height:60%}.bars i.h65{height:65%}.bars i.h70{height:70%}.bars i.h75{height:75%}.bars i.h80{height:80%}.bars i.h85{height:85%}.bars i.h90{height:90%}.bars i.h95{height:95%}.bars i.h100{height:100%}
.bars i.h0{height:2px}
.heat-scale .hs0{background:var(--bg-page);border:1px solid var(--border-subtle)}.heat-scale .hs1{background:var(--plum-100)}.heat-scale .hs2{background:var(--plum-200)}.heat-scale .hs3{background:var(--plum-400)}.heat-scale .hs4{background:var(--plum-600)}.heat-scale .hs5{background:var(--plum-800)}
.heat-scroll{overflow-x:auto}.heat-scroll .heat{min-width:420px}
.table-scroll{overflow-x:auto}.table-wide{min-width:560px}
[hidden]{display:none!important}

/* Athletenprofil (D-48): Markdown als Text, lange Wörter/Links umbrechen */
.profile-text{color:var(--text-primary);overflow-wrap:anywhere}
.profile-edit{min-height:16rem}

/* Morgen-Check-in (AP-12): Schwellung nur nach „umgeknickt“, weitere Angaben einklappbar */
.osg-schwellung{display:none}
.osg:has(input[name="osg_umgeknickt"]:checked) .osg-schwellung{display:flex}
@supports not selector(:has(*)){.osg-schwellung{display:flex}}
details.more>summary{cursor:pointer;font-weight:600;min-height:44px;display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}
details.more>summary .hint{font-weight:400}

/* Begründung der Planung (AP-13, D-56): Kurzsatz sichtbar, „mehr“ klappt ohne JavaScript auf (details) */
.kurz{color:var(--text-secondary);overflow-wrap:anywhere}
details.mehr>summary{color:var(--text-brand);list-style:none;gap:var(--space-1)}
details.mehr>summary::-webkit-details-marker{display:none}
details.mehr>summary .ic{transition:transform 150ms ease-out}
details.mehr[open]>summary .ic{transform:rotate(90deg)}
details.mehr>p{color:var(--text-secondary);padding-bottom:var(--space-2);max-width:70ch;white-space:pre-line;overflow-wrap:anywhere}

/* S9 Einheit geführt (AP-14, D-57/D-58; Mockup s9-einheit-gefuehrt.html). Ohne JavaScript sind alle Schritte sichtbar,
   Bedienelemente des Skripts (.needs-js) ausgeblendet; js/gefuehrt.js setzt html.js und body[data-phase]. */
.mb-4{margin-bottom:var(--space-4)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.start-row{margin-top:var(--space-2)}
html:not(.js) .needs-js{display:none!important}
html.js .gf-step:not(.aktiv){display:none}
.main.gefuehrt{max-width:720px}
.gf-progress{display:grid;gap:var(--space-2);margin-bottom:var(--space-4)}
.gf-progress .bar{height:6px;border-radius:var(--radius-full);background:var(--plum-100);overflow:hidden}
.gf-progress .bar i{display:block;height:100%;width:0;background:var(--plum-600);transition:width 150ms ease-out}
.phase-card{display:grid;gap:var(--space-2);text-align:center;padding:var(--space-6) var(--space-4);border-width:2px}
.phase-card .satz{font:var(--type-label);text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--text-tertiary)}
.phase-card h2{font:var(--type-h2);overflow-wrap:anywhere}
.phase-card .phase{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);margin:0 auto;padding:4px 12px;border-radius:var(--radius-full);font:var(--type-label);text-transform:uppercase;letter-spacing:var(--tracking-label);background:var(--bg-page);color:var(--text-secondary)}
.phase-card .phase .ic{width:16px;height:16px}
.phase-card .timer{font:700 64px/1 var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--text-primary)}
.phase-card .reps{font:700 40px/1.1 var(--font-display);color:var(--text-primary);overflow-wrap:anywhere}
.phase-card .reps small{display:block;font:var(--type-body);color:var(--text-tertiary);margin-top:var(--space-1)}
.phase-card .soll{font:var(--type-body-sm);color:var(--text-tertiary)}
.phase-card.blink{animation:gf-blink 1s linear 3}
@keyframes gf-blink{0%,49%{opacity:.35}50%,100%{opacity:1}}
@media (prefers-reduced-motion:reduce){.phase-card.blink{animation:none;outline:3px solid var(--focus-ring)}}
.next{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border:var(--border-default);border-radius:var(--radius-lg);background:var(--bg-surface);color:var(--text-secondary);font:var(--type-body-sm)}
.next .ic{color:var(--text-tertiary);flex:none}
.next b{color:var(--text-primary)}
.gf-actions{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--space-2);align-items:center}
.gf-actions .btn{min-width:0;padding:0 var(--space-3)}
.gf-actions .btn-primary{min-height:52px;font-size:var(--text-lg)}
.gf-actions .gf-icon:empty{display:none}
/* Fixierte Aktionsleisten (S3, S9, Check-in, Schmerz …) auf dem Smartphone über der unteren Navigation (60 px + Rand)
   halten, damit Speichern bzw. die Primäraktion beim Scrollen sichtbar bleibt */
@media (max-width:767px){
  /* Abstand zur Safe Area übernimmt die Navigation; die Leiste braucht unten nur ihren normalen Innenabstand */
  .actions-sticky{bottom:calc(61px + env(safe-area-inset-bottom));padding-bottom:var(--space-3)}
  /* Check-in in der Woche: Die Leiste gleicht mit negativem Rand den Seitenabstand aus; hier folgen noch Kacheln */
  .week-checkin{padding-bottom:var(--space-8)}
}
.gf-save{display:flex;flex-wrap:nowrap}
.timer-ton{flex-wrap:wrap;justify-content:flex-end}
@media (max-width:479px){.timer-zeile{grid-template-columns:1fr}.timer-ton{justify-content:flex-start}}
.gf-save .btn-icon{flex:none}
.done-list{display:grid;gap:var(--space-2)}
.done-list .row{font:var(--type-body-sm)}
.done-list .row>span:first-child{flex:1}
.done-list .gf-uebersicht-status .ic{color:var(--status-success)}
#gf-stumm .gf-stumm,#gf-stumm[aria-pressed="true"] .gf-ton{display:none}
#gf-stumm[aria-pressed="true"] .gf-stumm{display:inline-flex}
#gf-stumm[aria-pressed="true"]{color:var(--text-brand);background:var(--plum-100)}
/* Farbzustände (E-02, E-20, B-08): Arbeit grün, Pause/bereit/angehalten rot, sonst normale Farbe */
body[data-phase="arbeit"]{--bg-page:var(--status-success-bg)}
body[data-phase="arbeit"] .phase-card{border-color:var(--status-success)}
body[data-phase="arbeit"] .phase-card .timer,body[data-phase="arbeit"] .phase-card .phase{color:var(--status-success-text)}
body[data-phase="arbeit"] .phase-card .phase{background:var(--status-success-bg)}
body[data-phase="pause"],body[data-phase="bereit"],body[data-phase="angehalten"]{--bg-page:var(--status-error-bg)}
body[data-phase="pause"] .phase-card,body[data-phase="bereit"] .phase-card,body[data-phase="angehalten"] .phase-card{border-color:var(--status-error)}
body[data-phase="pause"] .phase-card .timer,body[data-phase="pause"] .phase-card .phase,body[data-phase="bereit"] .phase-card .timer,body[data-phase="bereit"] .phase-card .phase,body[data-phase="angehalten"] .phase-card .timer,body[data-phase="angehalten"] .phase-card .phase{color:var(--status-error-text)}
body[data-phase="pause"] .phase-card .phase,body[data-phase="bereit"] .phase-card .phase,body[data-phase="angehalten"] .phase-card .phase{background:var(--status-error-bg)}