/* ══ COCKPIT — review-karte.css · Klartext-Karte je Prüfpunkt (N-46, Owner 07.11.) ══
   Eine Karte, eine Leserichtung: Schwere + Überschrift → je Grund „Was ist passiert" /
   „Was wir von dir brauchen" / Prüfregel → „Deine Antwort" (nur echte Fragen) →
   Aktionen → Technik eingeklappt. Lesetext in Archivo ab .9rem, Mono nur für Kennungen.
   Farben ausschließlich aus tokens.css (AA-gemessen); die Schwere trägt zusätzlich
   immer ein Wort — nie Farbe allein. */

/* Klartext-Modus: Mitte nimmt die volle Arbeitsbreite, die rechte Spalte entfällt */
.rsplit2.rsplit2--klartext { grid-template-columns: minmax(0, 1fr); }
.rsplit2--klartext .rcorr-wrap:empty { display: none; }

.kk {
  background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--radius);
  border-left: 4px solid var(--st-open);
  padding: 1.15rem 1.35rem 1.3rem; box-shadow: 0 1px 3px rgba(27, 24, 19, .05);
  max-width: 920px;
}
.kk--fehler { border-left-color: var(--st-block); }
.kk--pruefen { border-left-color: var(--st-cpa); }
.kk--hinweis { border-left-color: var(--fg-dim); }

/* Schwere als Wort (Fehler · Prüfen · Hinweis) — Pille, Sentence case */
.kk-sev {
  display: inline-block; padding: .14rem .55rem .12rem; border-radius: 3px;
  font-family: var(--f-body); font-size: .74rem; font-weight: 700; letter-spacing: .01em;
  border: 1px solid transparent; white-space: nowrap; vertical-align: middle;
}
.kk-sev--fehler { color: #fff; background: var(--st-block); border-color: var(--st-block); }
.kk-sev--pruefen { color: var(--st-cpa); border-color: color-mix(in srgb, var(--st-cpa) 55%, transparent); background: color-mix(in srgb, var(--st-cpa) 8%, transparent); }
.kk-sev--hinweis { color: var(--fg-dim); border-color: var(--line); background: var(--bg-2); }

/* Kopf */
.kk__head { padding-bottom: .9rem; border-bottom: 1px solid var(--line-soft); }
.kk__sevline { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.kk__block { font-family: var(--f-mono); font-size: .58rem; font-weight: 700; letter-spacing: .12em; color: var(--st-block); border: 1px solid color-mix(in srgb, var(--st-block) 45%, transparent); border-radius: 2px; padding: .08rem .35rem; }
.kk__task { font-family: var(--f-mono); font-size: .6rem; letter-spacing: .1em; color: var(--fg-dim); }
.kk__h { margin: .45rem 0 0; font-family: var(--f-disp); font-weight: 800; font-stretch: 112%; font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem); line-height: 1.15; letter-spacing: -.005em; color: var(--fg); overflow-wrap: break-word; }
.kk__akte { margin: .45rem 0 0; font-size: .86rem; color: var(--fg-dim); }
.kk__akte a { font-family: var(--f-mono); font-weight: 700; color: var(--brass); }
.kk__akte a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.kk__stand { margin: .35rem 0 0; font-size: .82rem; color: var(--fg-dim); line-height: 1.5; }
.kk__stand b { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.kk__alt { display: inline-block; margin-left: .3rem; padding: .02rem .45rem; border: 1px dashed color-mix(in srgb, var(--st-cpa) 60%, transparent); border-radius: 3px; color: var(--st-cpa); font-size: .76rem; font-weight: 600; }
.kk__neulauf { display: block; color: var(--fg-dim); }

/* Gründe — Liste ohne Nummern (keine Reihenfolge, nur Schwere), je Grund ein Block */
.kk__gruende { list-style: none; margin: 0; padding: 0; }
.kkg { padding: .9rem 0 .85rem; border-bottom: 1px solid var(--line-soft); }
.kkg:last-child { border-bottom: 0; }
.kkg__t { margin: 0; display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; font-family: var(--f-body); font-weight: 700; font-size: 1rem; line-height: 1.3; color: var(--fg); }
.kkg__titel { min-width: 0; overflow-wrap: break-word; }
.kkg__n { font-family: var(--f-mono); font-size: .66rem; font-weight: 700; color: var(--brass); border: 1px solid color-mix(in srgb, var(--brass) 45%, transparent); border-radius: 3px; padding: .06rem .4rem; font-variant-numeric: tabular-nums; }
.kkg__dl { margin: .7rem 0 0; display: grid; gap: .6rem; }
.kkg__row { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr); gap: .25rem 1rem; align-items: start; }
.kkg__row dt { font-size: .82rem; font-weight: 700; color: var(--brass); line-height: 1.5; }
.kkg__row dd { margin: 0; font-size: .94rem; line-height: 1.55; color: var(--fg); max-width: 66ch; }
.kkg__regel { margin: .65rem 0 0; font-family: var(--f-mono); font-size: .7rem; line-height: 1.5; letter-spacing: .01em; color: var(--fg-dim); }
.kkg__regel span { font-weight: 700; color: var(--fg-dim); }
.kkg__fund { margin-top: .5rem; }
.kkg__fund summary, .kk__tech summary {
  cursor: pointer; display: inline-block; padding: .2rem 0; min-height: 44px; line-height: 2;
  font-family: var(--f-mono); font-size: .68rem; font-weight: 700; letter-spacing: .04em; color: var(--brass);
}
.kkg__fund summary::marker, .kk__tech summary::marker { color: var(--fg-dim); }
.kkg__fund summary:hover, .kk__tech summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.kkg__fund summary:focus-visible, .kk__tech summary:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; border-radius: 2px; }
.kkg__fund ul { margin: .2rem 0 0; padding: .55rem .75rem; list-style: none; background: var(--bg); border: 1px solid var(--line-soft); border-radius: 3px; display: grid; gap: .3rem; }
.kkg__fund li { font-family: var(--f-mono); font-size: .7rem; line-height: 1.5; color: var(--fg); overflow-wrap: anywhere; }
.kk__nogrund { margin: 1rem 0 0; font-size: .9rem; color: var(--fg-dim); line-height: 1.5; }

/* Antwort / Aktionen */
.kk__form { margin-top: .4rem; padding-top: 1rem; border-top: 1px solid var(--line-soft); }
.kk__fh { margin: 0 0 .6rem; font-family: var(--f-body); font-weight: 700; font-size: 1rem; color: var(--fg); }
.kk__fh span { font-weight: 400; font-size: .84rem; color: var(--fg-dim); }
.kk__noq { margin: 0 0 .9rem; font-size: .9rem; line-height: 1.55; color: var(--fg); max-width: 66ch; }
.kk__frage { margin-bottom: 1rem; }
.kk__frage[hidden] { display: none; }
.kk__flabel { display: block; font-size: .9rem; font-weight: 700; color: var(--fg); }
.kk__fhilfe { margin: .1rem 0 .4rem; font-size: .8rem; color: var(--fg-dim); line-height: 1.45; }
.kk__frage .rfield__in { max-width: 28rem; }
.kk__wortbtn { margin-top: 0; }
.kk__wortbtn[aria-expanded="true"] { color: var(--fg); border-color: var(--fg); }
.kk__worte { margin-top: .4rem; }
.kk__worte[hidden] { display: none; }
.kk__worte .rci { margin-top: .6rem; padding-top: .8rem; }
.kk__actions { margin-top: 1.1rem; }
.kk__actions .btn-act[hidden] { display: none; }
.kk .hsc { margin-bottom: .6rem; }

/* Technische Details — eingeklappt, nichts gelöscht */
.kk__tech { margin-top: 1rem; padding-top: .5rem; border-top: 1px dashed var(--line); }
.kk__tech summary span { font-weight: 400; color: var(--fg-dim); letter-spacing: .02em; }
.kk__techdl { margin: .3rem 0 0; display: grid; gap: .35rem; }
.kk__techdl div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: .8rem; }
.kk__techdl dt { font-family: var(--f-mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-dim); padding-top: .15rem; }
.kk__techdl dd { margin: 0; font-family: var(--f-mono); font-size: .74rem; color: var(--fg); overflow-wrap: anywhere; }
.kk__techh { margin: .9rem 0 .4rem; font-size: .82rem; font-weight: 700; color: var(--fg); }
.kk__techh span { font-weight: 400; color: var(--fg-dim); }
.kk__techf { display: grid; gap: .1rem; }
.kk__techrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .7rem; align-items: center; padding: .35rem .1rem; border-bottom: 1px solid var(--line-soft); }
.kk__techrow:last-child { border-bottom: 0; }
.kk__techk { font-family: var(--f-mono); font-size: .7rem; color: var(--fg); }
.kk__techk i { font-style: normal; color: var(--fg-dim); margin-left: .3rem; }
.kk__techwarn { margin: 0; padding: .5rem .75rem; list-style: none; background: var(--bg); border: 1px solid var(--line-soft); border-radius: 3px; display: grid; gap: .3rem; }
.kk__techwarn li { font-family: var(--f-mono); font-size: .7rem; line-height: 1.5; color: var(--fg); overflow-wrap: anywhere; }
.kk--done .already { margin-top: 1rem; }

/* Enge Panels (Breit-Dock, Handy): Label über dem Text */
@container rsp (max-width: 560px) {
  .kkg__row { grid-template-columns: minmax(0, 1fr); gap: .15rem; }
  .kk__techdl div { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
  .kk { padding: 1rem 1rem 1.1rem; }
}
@media (max-width: 480px) {
  .kk__actions .btn-act { flex: 1 1 100%; }
}