/* Bausteine der Trainings-Web-App (AP-01a).
   Baut ausschließlich auf den Aliasen des Chadid Design-Systems auf (../chadid-design-system/styles.css).
   Keine Hex-Werte hier; Ausnahmen sind kommentiert. Breakpoints: Smartphone < 768, Tablet 768–1023, Desktop ≥ 1024. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg-page);color:var(--text-primary);font:var(--type-body);min-height:100dvh}
h1,h2,h3,h4{margin:0;color:var(--plum-800);letter-spacing:var(--tracking-display)}
h1{font:var(--type-h2)}
h2{font:var(--type-h3)}
h3{font:var(--type-h4)}
p{margin:0}
a{color:var(--link)}
a:hover{color:var(--link-hover)}
:focus-visible{outline:var(--border-focus);outline-offset:2px;border-radius:var(--radius-sm)}
button,input,select,textarea{font:inherit;color:inherit}
.muted{color:var(--text-tertiary)}
.small{font:var(--type-body-sm)}
.mono{font:var(--type-mono);font-variant-numeric:tabular-nums}
.label{font:var(--type-label);text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--text-accent)}
.stack{display:grid;gap:var(--space-stack)}
.stack-lg{display:grid;gap:var(--space-6)}
.stack > *,.stack-lg > *,.main > *{min-width:0}
.row{display:flex;align-items:center;gap:var(--space-inline)}
.between{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}
.grow{flex:1;min-width:0}
@media (max-width:767px){.hide-mobile.hide-mobile{display:none}}

/* Icons: Tabler Outline (icons/, MIT) als Inline-Sprite über icons.js; Farbe über currentColor, Strich 2 */
.ic{display:inline-block;width:var(--icon-size);height:var(--icon-size);flex:none;fill:none;stroke:currentColor;stroke-width:var(--icon-stroke);stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.ic-lg{width:var(--icon-size-lg);height:var(--icon-size-lg)}
.ic-sm{width:16px;height:16px}

/* ---------- Seitenrahmen ---------- */
.app{display:grid;grid-template-rows:auto 1fr auto;grid-template-areas:"top" "main" "nav";min-height:100dvh}
.topbar{grid-area:top;position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:var(--space-3);
  min-height:56px;padding:var(--space-2) var(--space-4);background:var(--bg-surface);border-bottom:var(--border-default)}
.brand{display:flex;align-items:center;gap:var(--space-2);text-decoration:none;color:var(--text-brand)}
.brand img{height:30px;width:auto}
.brand span{font:var(--weight-display) 19px/1 var(--font-display);letter-spacing:var(--tracking-display)}
.topbar h1{font:var(--type-h4);color:var(--plum-800)}
.topbar-actions{margin-left:auto;display:flex;gap:var(--space-1)}
.main{grid-area:main;padding:var(--space-4);width:100%;max-width:760px;margin:0 auto;padding-bottom:var(--space-8)}
.main.wide{max-width:1160px}

.nav{grid-area:nav;position:sticky;bottom:0;z-index:5;display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--bg-surface);border-top:var(--border-default);padding-bottom:env(safe-area-inset-bottom)}
.nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:60px;
  text-decoration:none;color:var(--text-tertiary);font:var(--type-body-sm);transition:var(--transition)}
.nav a .ic{width:var(--icon-size-lg);height:var(--icon-size-lg)}
.nav a[aria-current]{color:var(--text-brand)}
.nav a:hover{color:var(--text-brand)}
.nav .nav-brand,.nav .nav-foot{display:none}

@media (min-width:768px){
  .app{grid-template-columns:96px 1fr;grid-template-rows:auto 1fr;grid-template-areas:"nav top" "nav main"}
  .nav{position:sticky;top:0;bottom:auto;height:100dvh;grid-template-columns:1fr;align-content:start;gap:var(--space-1);
    border-top:0;border-right:var(--border-default);padding:var(--space-3) var(--space-2)}
  .nav a{min-height:64px;border-radius:var(--radius-lg)}
  .nav a[aria-current]{background:var(--bg-subtle)}
  .nav .nav-brand{display:flex;justify-content:center;padding:var(--space-2) 0 var(--space-4)}
  .nav .nav-brand img{height:36px}
  .nav .nav-brand span{display:none}
  .topbar{min-height:64px;padding:var(--space-3) var(--space-6)}
  .topbar .brand{display:none}
  .main{padding:var(--space-6)}
}
@media (min-width:1024px){
  .app{grid-template-columns:240px 1fr}
  .nav{padding:var(--space-4) var(--space-3)}
  .nav a{flex-direction:row;justify-content:flex-start;gap:var(--space-3);min-height:48px;padding:0 var(--space-3);font:var(--type-body)}
  .nav .nav-brand{justify-content:flex-start;padding:var(--space-2) var(--space-3) var(--space-6)}
  .nav .nav-brand span{display:inline}
  .nav .nav-foot{display:block;margin-top:auto;padding:var(--space-3);color:var(--text-tertiary);font:var(--type-body-sm)}
  .main{padding:var(--space-8)}
}

/* Auth-Seiten (S0, S1, S7): keine Navigation, eine zentrierte Karte */
.auth{min-height:100dvh;display:grid;place-items:center;padding:var(--space-4)}
.auth-card{width:100%;max-width:420px;background:var(--bg-surface);border:var(--border-default);border-radius:var(--radius-xl);
  padding:var(--space-8) var(--space-6);box-shadow:var(--shadow-card)}
.auth-brand{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);margin-bottom:var(--space-6)}
.auth-brand img{height:64px}
.auth-brand .name{font:var(--weight-display) var(--text-xl)/1 var(--font-display);color:var(--text-brand)}
.auth-brand .sub{font:var(--type-body-sm);color:var(--text-tertiary)}
.auth-foot{margin-top:var(--space-6);text-align:center;font:var(--type-body-sm);color:var(--text-tertiary)}

/* ---------- Karten ---------- */
.card{background:var(--bg-surface);border:var(--border-default);border-radius:var(--radius-lg);padding:var(--space-4);box-shadow:var(--shadow-card)}
.card-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-2);margin-bottom:var(--space-3)}
.card.clickable{cursor:pointer;transition:var(--transition)}
.card.clickable:hover{border-color:var(--focus-ring)}
@media (min-width:768px){.card{padding:var(--space-card)}}
.section-title{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-2);margin:var(--space-6) 0 var(--space-3)}
.section-title:first-child{margin-top:0}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:44px;padding:0 var(--space-4);
  border-radius:var(--radius-md);border:1px solid transparent;background:transparent;cursor:pointer;text-decoration:none;
  font:var(--type-button);font-size:var(--text-base);transition:var(--transition);white-space:nowrap}
.btn-primary{background:var(--action-primary);color:var(--text-on-brand)}
.btn-primary:hover{background:var(--action-primary-hover);box-shadow:var(--shadow-focus)}
.btn-primary:active{background:var(--action-primary-active)}
.btn-secondary{border-color:var(--border-strong);color:var(--text-brand);background:var(--bg-surface)}
.btn-secondary:hover{border-color:var(--focus-ring)}
.btn-ghost{color:var(--text-brand)}
.btn-ghost:hover{background:var(--bg-subtle)}
.btn-danger{background:var(--action-danger);color:var(--text-on-brand)}
.btn-danger:hover{background:var(--action-danger-hover)}
.btn[disabled],.btn[aria-disabled=true]{opacity:var(--opacity-disabled);cursor:default;box-shadow:none}
.btn-block{width:100%}
.btn-icon{min-width:44px;padding:0;border-radius:var(--radius-md);color:var(--text-brand)}
.btn-icon:hover{background:var(--bg-subtle)}
.btn-row{display:flex;gap:var(--space-3);flex-wrap:wrap}
.btn-row .btn{flex:1}
@media (min-width:768px){.btn-row .btn{flex:none}}
.actions-sticky{position:sticky;bottom:0;margin:var(--space-6) calc(-1 * var(--space-4)) calc(-1 * var(--space-8));
  padding:var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
  background:var(--bg-page);border-top:var(--border-default)}
@media (min-width:768px){.actions-sticky{position:static;margin:var(--space-6) 0 0;padding:0;border:0;background:transparent}}

/* ---------- Formulare ---------- */
.field{display:grid;gap:6px}
.field > label,.field > .field-label{font:var(--weight-body-strong) var(--text-sm)/1.3 var(--font-body);color:var(--text-secondary)}
.input,.select,.textarea{width:100%;min-height:44px;padding:10px var(--space-3);background:var(--bg-surface-raised);
  border:var(--border-hover);border-radius:var(--radius-md);transition:var(--transition)}
.input:hover,.select:hover,.textarea:hover{border-color:var(--focus-ring)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--focus-ring);box-shadow:var(--shadow-focus)}
.textarea{min-height:88px;resize:vertical}
.select{appearance:none;-webkit-appearance:none;padding-right:40px}
.select-wrap{position:relative}
.select-wrap .ic{position:absolute;right:12px;top:50%;transform:translateY(-50%) rotate(90deg);color:var(--text-tertiary);pointer-events:none}
.hint{font:var(--type-body-sm);color:var(--text-tertiary)}
.field.invalid .input{border-color:var(--status-error)}
.field.invalid .hint{color:var(--status-error-text)}
.input.mono{font-variant-numeric:tabular-nums}
.input-inline{display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--space-2)}
.input-inline .unit{color:var(--text-tertiary);font:var(--type-body-sm)}
.check{display:flex;align-items:center;gap:var(--space-3);min-height:44px;cursor:pointer}
.check input{width:22px;height:22px;accent-color:var(--plum-600);margin:0}

/* Skalenwahl (RPE 0–10, Erholung 1–5 …): jede Stufe ein Touch-Ziel ≥ 44 px */
.scale{display:grid;gap:var(--space-1);grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.scale label{position:relative;display:flex;align-items:center;justify-content:center;min-height:48px;
  background:var(--bg-surface-raised);border:var(--border-hover);border-radius:var(--radius-md);cursor:pointer;
  font:var(--type-mono);font-size:var(--text-base);transition:var(--transition)}
.scale label:hover{border-color:var(--focus-ring)}
.scale input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.scale input:checked + span{color:var(--text-on-brand)}
.scale label:has(input:checked){background:var(--action-primary);border-color:var(--action-primary);color:var(--text-on-brand)}
.scale label:has(input:focus-visible){outline:var(--border-focus);outline-offset:2px}
.scale-ends{display:flex;justify-content:space-between;font:var(--type-body-sm);color:var(--text-tertiary);margin-top:4px}
.scale-11{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-flow:row}
@media (min-width:480px){.scale-11{grid-template-columns:repeat(11,minmax(0,1fr))}}

/* Segmentwahl (Ja/Nein, Seite, Timing, Status) */
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--space-1)}
.seg.wrap{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:480px){.seg.wrap{grid-auto-flow:column;grid-template-columns:none}}
@media (min-width:1024px) and (max-width:1279px){.two-col .seg.wrap{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}}
.seg label{position:relative;display:flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:44px;padding:6px var(--space-2);min-width:0;
  background:var(--bg-surface-raised);border:var(--border-hover);border-radius:var(--radius-md);cursor:pointer;font:var(--type-body-sm);
  font-weight:var(--weight-body-strong);color:var(--text-secondary);text-align:center;transition:var(--transition)}
.seg label:hover{border-color:var(--focus-ring)}
.seg input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.seg label:has(input:checked){background:var(--bg-subtle);border-color:var(--border-brand);color:var(--text-brand)}
.seg label:has(input:focus-visible){outline:var(--border-focus);outline-offset:2px}

/* ---------- Hinweise und Marken ---------- */
.alert{display:flex;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);border-left:3px solid;font:var(--type-body-sm)}
.alert .ic{margin-top:1px}
.alert-error{background:var(--status-error-bg);border-color:var(--status-error);color:var(--status-error-text)}
.alert-warning{background:var(--status-warning-bg);border-color:var(--status-warning);color:var(--status-warning-text)}
.alert-success{background:var(--status-success-bg);border-color:var(--status-success);color:var(--status-success-text)}
.alert-info{background:var(--status-info-bg);border-color:var(--status-info);color:var(--status-info-text)}
.alert-hint{background:var(--bg-accent-soft);border-color:var(--marker);color:var(--text-accent)}
.alert b{font-weight:var(--weight-body-strong)}
.alert .body{color:var(--text-secondary)}

.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:var(--radius-full);font:var(--type-label);letter-spacing:0;
  text-transform:none;font-size:var(--text-xs);white-space:nowrap}
.badge .ic{width:12px;height:12px}
.badge-neutral{background:var(--neutral-200);color:var(--text-secondary)}
.badge-success{background:var(--status-success-bg);color:var(--status-success-text)}
.badge-warning{background:var(--status-warning-bg);color:var(--status-warning-text)}
.badge-error{background:var(--status-error-bg);color:var(--status-error-text)}
.badge-info{background:var(--status-info-bg);color:var(--status-info-text)}
.badge-hint{background:var(--bg-accent-soft);color:var(--text-accent)}
.badge-brand{background:var(--bg-subtle);color:var(--text-brand)}

.kv{display:grid;grid-template-columns:auto 1fr;gap:6px var(--space-4);font:var(--type-body-sm)}
.kv dt{color:var(--text-tertiary);margin:0}
.kv dd{margin:0;color:var(--text-primary);word-break:break-word}

/* ---------- Woche (S2) ---------- */
.week-nav{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:var(--space-2)}
.week-nav .title{text-align:center}
.week-nav .title h1{font:var(--type-h3)}
.week-nav .title .muted{font:var(--type-body-sm)}
.week-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2);margin-top:var(--space-4)}
.stat{background:var(--bg-surface);border:var(--border-default);border-radius:var(--radius-lg);padding:var(--space-3) var(--space-4)}
.stat .l{font:var(--type-body-sm);color:var(--text-tertiary)}
.stat .v{font:var(--weight-body-strong) var(--text-xl)/1.2 var(--font-body);color:var(--text-primary);margin-top:2px}
.stat .v small{font:var(--type-body-sm);color:var(--text-tertiary);font-weight:400;white-space:nowrap}
@media (max-width:767px){.stat .v small{display:block}}
.days{display:grid;gap:var(--space-3);margin-top:var(--space-4)}
.day{background:var(--bg-surface);border:var(--border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);overflow:hidden}
.day.today{border-color:var(--border-brand)}
.day-head{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-bottom:var(--border-default)}
.day-head .d{font:var(--weight-body-strong) var(--text-base)/1.2 var(--font-body)}
.day-head .d small{font-weight:400;color:var(--text-tertiary);margin-left:6px}
.day.today .d{color:var(--text-brand)}
.day.today .d::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--marker);margin-right:8px;vertical-align:middle}
.day-head .checkin{margin-left:auto}
.checkin{display:inline-flex;align-items:center;gap:4px;font:var(--type-body-sm);text-decoration:none;min-height:32px}
.checkin.done{color:var(--status-success-text)}
.checkin.open{color:var(--text-accent);font-weight:var(--weight-body-strong)}
.checkin.none{color:var(--text-tertiary)}
.session{display:grid;grid-template-columns:40px 1fr auto 20px;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);
  text-decoration:none;color:inherit;min-height:64px;transition:var(--transition)}
.session + .session{border-top:var(--border-default)}
.session:hover{background:var(--bg-subtle)}
.session .tile{width:40px;height:40px;border-radius:var(--radius-md);background:var(--bg-subtle);color:var(--plum-600);display:grid;place-items:center}
.session .tile .ic{width:22px;height:22px}
.session.done .tile{background:var(--neutral-200);color:var(--text-tertiary)}
.session .t{font-weight:var(--weight-body-strong);line-height:1.3}
.session .m{font:var(--type-body-sm);color:var(--text-tertiary)}
.session .chev{color:var(--text-tertiary);transform:none}
.session .prio{font:var(--type-mono);font-size:var(--text-xs);color:var(--text-tertiary);margin-left:6px}
.rest{padding:var(--space-3) var(--space-4);color:var(--text-tertiary);font:var(--type-body-sm);display:flex;gap:var(--space-2);align-items:center}
.empty{padding:var(--space-8) var(--space-4);text-align:center;color:var(--text-tertiary);display:grid;gap:var(--space-3);justify-items:center}
.empty .ic{width:32px;height:32px;color:var(--plum-400)}
@media (min-width:1024px){.days.grid7{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1280px){
  .days.grid7{grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--space-2);align-items:start}
  .days.grid7 .day-head{flex-wrap:wrap;padding:var(--space-3)}
  .days.grid7 .day-head .checkin{margin-left:0;width:100%}
  .days.grid7 .session{grid-template-columns:32px 1fr;padding:var(--space-3);gap:var(--space-2)}
  .days.grid7 .session .tile{width:32px;height:32px}
  .days.grid7 .session .tile .ic{width:18px;height:18px}
  .days.grid7 .session .status,.days.grid7 .session .chev{grid-column:2;justify-self:start}
  .days.grid7 .session .chev{display:none}
  .days.grid7 .session .t{font-size:var(--text-sm)}
  .days.grid7 .session .typ{display:none}
  .days.grid7 .day-head .d small{display:block;margin:0}
}

/* ---------- Einheit (S3) ---------- */
.page-head{display:grid;gap:var(--space-1);margin-bottom:var(--space-4)}
.page-head .eyebrow{display:flex;align-items:center;gap:var(--space-2);font:var(--type-body-sm);color:var(--text-tertiary)}
.plan-table{width:100%;border-collapse:collapse;font:var(--type-body-sm)}
.plan-table th{text-align:left;font:var(--type-label);text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--text-tertiary);padding:0 var(--space-2) var(--space-2) 0}
.plan-table td{padding:var(--space-2) var(--space-2) var(--space-2) 0;border-top:var(--border-default);vertical-align:middle}
.plan-table .input{min-height:40px;padding:6px var(--space-2);text-align:center}
.exercise{display:grid;gap:var(--space-2);padding:var(--space-3) 0;border-top:var(--border-default)}
.exercise:first-child{border-top:0;padding-top:0}
.exercise .name{font-weight:var(--weight-body-strong)}
.exercise .soll{font:var(--type-body-sm);color:var(--text-tertiary)}
.exercise .ist{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2)}
.exercise .ist .field > label{font:var(--type-label);text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--text-tertiary)}
.two-col{display:grid;gap:var(--space-4)}
@media (min-width:1024px){.two-col{grid-template-columns:minmax(0,3fr) minmax(0,2fr);align-items:start}.two-col > .sticky{position:sticky;top:88px}}
.activity{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3)}
@media (min-width:480px){.activity{grid-template-columns:repeat(4,1fr)}}
.zones{display:flex;height:10px;border-radius:var(--radius-full);overflow:hidden;gap:2px;background:var(--bg-page)}
.zones span{background:var(--plum-300)}
.zones span:nth-child(2){background:var(--plum-400)}
.zones span:nth-child(3){background:var(--plum-600)}
.zones span:nth-child(4){background:var(--plum-700)}
.zones span:nth-child(5){background:var(--plum-800)}
.legend{display:flex;flex-wrap:wrap;gap:var(--space-3);font:var(--type-body-sm);color:var(--text-secondary)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:middle}

/* Aufklappbarer Block (Schmerz ja → Felder) */
.reveal{display:none}
.reveal.open{display:grid;gap:var(--space-4)}
.subcard{background:var(--bg-page);border:var(--border-default);border-radius:var(--radius-md);padding:var(--space-4)}

/* ---------- Verlauf (S6) ---------- */
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3)}
@media (min-width:768px){.tiles{grid-template-columns:repeat(4,1fr)}}
.multiples{display:grid;gap:var(--space-3)}
@media (min-width:640px){.multiples{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.multiples{grid-template-columns:repeat(4,1fr)}}
.chart{display:grid;gap:var(--space-2)}
.chart .title{display:flex;align-items:center;gap:var(--space-2);font:var(--type-body-sm);color:var(--text-secondary)}
.chart .title b{color:var(--text-primary);font-weight:var(--weight-body-strong)}
.bars{display:grid;grid-template-columns:repeat(8,1fr);gap:var(--space-1);align-items:end;height:96px;border-bottom:1px solid var(--border-subtle);padding:0 2px}
.bars i{display:block;width:100%;max-width:24px;margin:0 auto;background:var(--plum-600);border-radius:4px 4px 0 0;position:relative;transition:var(--transition)}
.bars i.cur{background:var(--plum-800)}
.bars i:hover{background:var(--plum-800)}
.bars i[data-v]:hover::after{content:attr(data-v);position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);
  background:var(--bg-surface-raised);border:var(--border-default);border-radius:var(--radius-sm);padding:2px 6px;font:var(--type-mono);font-size:var(--text-xs);color:var(--text-primary);box-shadow:var(--shadow-menu);white-space:nowrap}
.xaxis{display:grid;grid-template-columns:repeat(8,1fr);font:var(--type-mono);font-size:var(--text-xs);color:var(--text-tertiary);text-align:center}
.chart .end{font:var(--type-mono);font-size:var(--text-xs);color:var(--text-secondary);text-align:right}
.heat{display:grid;grid-template-columns:minmax(72px,auto) repeat(8,minmax(0,1fr));gap:2px;align-items:center;font:var(--type-body-sm)}
.heat .rl{color:var(--text-secondary);padding-right:var(--space-2);white-space:nowrap}
.heat .ch{font:var(--type-mono);font-size:var(--text-xs);color:var(--text-tertiary);text-align:center}
.heat .c{height:36px;border-radius:var(--radius-sm);background:var(--bg-page);border:1px solid var(--border-subtle);position:relative}
.heat .c[data-i="1"],.heat .c[data-i="2"]{background:var(--plum-100);border-color:transparent}
.heat .c[data-i="3"],.heat .c[data-i="4"]{background:var(--plum-200);border-color:transparent}
.heat .c[data-i="5"],.heat .c[data-i="6"]{background:var(--plum-400);border-color:transparent}
.heat .c[data-i="7"],.heat .c[data-i="8"]{background:var(--plum-600);border-color:transparent}
.heat .c[data-i="9"],.heat .c[data-i="10"]{background:var(--plum-800);border-color:transparent}
.heat .c[data-i]:hover::after{content:attr(data-t);position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);z-index:2;
  background:var(--bg-surface-raised);border:var(--border-default);border-radius:var(--radius-sm);padding:2px 6px;font:var(--type-body-sm);color:var(--text-primary);box-shadow:var(--shadow-menu);white-space:nowrap}
.heat-scale{display:flex;align-items:center;gap:6px;font:var(--type-body-sm);color:var(--text-tertiary);margin-top:var(--space-2)}
.heat-scale i{width:18px;height:12px;border-radius:2px;display:inline-block}

/* ---------- Einstellungen (S8) ---------- */
.list{display:grid}
.list-item{display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--space-3);padding:var(--space-3) 0;border-top:var(--border-default)}
.list-item:first-child{border-top:0;padding-top:0}
.list-item:last-child{padding-bottom:0}
.list-item .t{font-weight:var(--weight-body-strong)}
.list-item .s{font:var(--type-body-sm);color:var(--text-tertiary)}