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

/* Übungskatalog S10/S10a (AP-16, docs/konzept/uebungskatalog.md 6.1/6.2; Mockups s10-uebung.html, s10a-uebungen.html) */
.chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
a.chip{display:inline-flex;align-items:center;min-height:36px;padding:0 var(--space-3);border:var(--border-default);border-radius:var(--radius-full);background:var(--bg-surface);color:var(--text-secondary);font:var(--type-body-sm);text-decoration:none}
a.chip:hover{border-color:var(--focus-ring)}
a.chip[aria-current]{background:var(--bg-subtle);border-color:var(--border-brand);color:var(--text-brand);font-weight:600}
.search-row{display:flex;gap:var(--space-2)}
.search-row .input{flex:1;min-width:0}
.ex-card{display:grid;gap:var(--space-1)}
.ex-card .name{display:inline-flex;align-items:center;gap:var(--space-2);font-weight:600;color:var(--text-primary)}
.ex-card .s{font:var(--type-body-sm);color:var(--text-tertiary)}
.ex-card .badge{justify-self:start}
.exercise-page .lead{font-weight:600;color:var(--text-primary);overflow-wrap:anywhere}
.exercise-page p,.exercise-page li{overflow-wrap:anywhere}
.ex-list{margin:0;padding-left:1.4em;display:grid;gap:var(--space-2)}
.pre-line{white-space:pre-line}
.vorsicht{background:var(--status-error-bg);border-color:var(--status-error)}
.vorsicht h2{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--status-error-text)}
.video{margin:0;display:grid;gap:var(--space-2)}
.video-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--radius-md);overflow:hidden;background:var(--bg-page)}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);font:var(--type-body-sm)}
.link-host{overflow-wrap:anywhere}
a.ex-link{display:inline-flex;align-items:center;gap:var(--space-1)}
.phase-card .ausfuehrung{justify-self:center;min-height:44px;font:var(--type-body-sm);color:var(--text-brand)}

/* Erinnerung an Blockbilanz und Zielklärung (AP-15, E-05/E-14): Karte über abgedunkeltem Hintergrund, Rand in der
   Statusfarbe Warnung; ohne JavaScript bedienbar, Inhalt dahinter inert. */
.review-overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:var(--space-4);background:rgb(20 12 28 / .55);overflow-y:auto}
.review-dialog{width:100%;max-width:520px;border:2px solid var(--status-warning);box-shadow:0 12px 40px rgb(0 0 0 / .25)}
.review-dialog h2{display:flex;align-items:center;gap:var(--space-2);margin:0}
.review-dialog .ic-warning{color:var(--status-warning-text)}
.review-items{margin:0;padding-left:1.2em;display:grid;gap:var(--space-2);overflow-wrap:anywhere}
.review-dialog .btn-row{flex-wrap:wrap}
body.has-overlay{overflow:hidden}
/* S2 Karte „Block“ (AP-15, 6.2) */
.block-card .faellig{margin:0;padding-left:1.2em;display:grid;gap:var(--space-1);color:var(--text-secondary)}
/* S11 Blockseite (AP-15, T5): nur lesen; Listen mit Aufzählungszeichen, Revisionen als Zeitleiste */
.block-page ul.bullet{margin:0;padding-left:1.2em;display:grid;gap:var(--space-1);overflow-wrap:anywhere}
.block-page .timeline{list-style:none;margin:0;padding:0 0 0 var(--space-4);border-left:2px solid var(--border-subtle);display:grid;gap:var(--space-4)}
.block-page .timeline>li{position:relative}
.block-page .timeline>li::before{content:"";position:absolute;left:calc(-1 * var(--space-4) - 7px);top:22px;width:12px;height:12px;border-radius:50%;background:var(--plum-400)}
.block-page .entscheidungen td,.block-page .bilanz-ziele td{vertical-align:top;overflow-wrap:anywhere}
.block-page .entscheidungen ul.bullet{padding-left:1em}
.block-page .kv dd{overflow-wrap:anywhere}
.block-page .badge{white-space:nowrap}