/* ====================================================================
   aufgaben.css — öffentliche Aufgabenseiten /aufgaben/ (scripts/build-aufgaben.js).
   Baut auf design.css (Tokens), landing.css (nav, foot, .task, .opt, .kv, .faq)
   und blog.css (.blog-wrap, .post-head, .post, .post-end, .post-more) auf.
   Keine eigenen Farben außer dem weißen Papier unter den Diagrammen, das
   der Zeichner der App voraussetzt (schwarz auf weiß).
   ==================================================================== */

/* --- Kopf ----------------------------------------------------------- */
.aufg-head h1 {
    font-size: clamp(1.8rem, 5vw, 3.2rem);
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
}
.aufg-head > p:not(.post-kicker):not(.post-standfirst) {
    margin: 14px 0 0;
    max-width: 38rem;
    color: var(--otms-ink-soft);
    line-height: 1.55;
}
.aufg-head > p a { color: var(--otms-accent); text-underline-offset: 3px; }
.aufg-kv { max-width: 30rem; margin-top: 24px; }
.aufg-kv dt { flex: 0 0 auto; }
.aufg-kv dd { min-width: 0; }

/* --- Aufgabenliste -------------------------------------------------- */
.aufg-liste { max-width: 46rem; margin: clamp(36px, 6vw, 64px) auto 0; }
.aufg-h2 {
    font-family: var(--otms-f-display);
    font-weight: 700;
    font-size: clamp(1.6rem, 3.4vw, 2.2rem);
    line-height: 1.1;
    margin: 0 0 10px;
}
.aufg-bedienung { font-size: .95rem; color: var(--otms-ink-soft); max-width: 40rem; margin: 0 0 8px; }

.aufg { margin-top: clamp(36px, 6vw, 56px); scroll-margin-top: 84px; }
.aufg-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 16px;
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--otms-ink);
    font-size: inherit;
    line-height: 1.2;
}
.aufg-nr { font: 700 1.5rem/1.1 var(--otms-f-display); color: var(--otms-ink); }
.aufg-von { font-weight: 500; color: var(--otms-ink-soft); }
.aufg-meta { font: 500 .78rem/1.3 var(--otms-f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--otms-ink-soft); }

.aufg-einleitung p { font-size: 1.03rem; line-height: 1.65; margin: 0 0 10px; max-width: 42rem; }

/* Diagramm: weißes Papier in beiden Modi, auf schmalen Bildschirmen seitlich verschiebbar */
.aufg-abb { margin: 18px 0 6px; }
.aufg-abb-rahmen {
    background: #fff;
    border: 1px solid var(--otms-line);
    padding: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.aufg-abb-rahmen:focus-visible { outline: 2px solid var(--otms-focus); outline-offset: 2px; }
.aufg-svg { display: block; width: 100%; height: auto; max-width: 760px; margin: 0 auto; }
.aufg-abb figcaption { margin-top: 8px; font-size: .92rem; line-height: 1.55; color: var(--otms-ink-soft); }
@media (max-width: 600px) {
    .aufg-svg { min-width: 540px; }
}

/* Tabelle: echte HTML-Tabelle in den Farben des Designs. Erste Spalte bleibt
   beim seitlichen Verschieben stehen, Zahlen stehen ziffernweise untereinander. */
.aufg-datentabelle {
    border: 1px solid var(--otms-line);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Schatten am rechten Rand, solange weitere Spalten folgen */
    background:
        linear-gradient(to left, var(--otms-surface) 40%, transparent) 100% 0 / 28px 100% no-repeat local,
        linear-gradient(to left, rgba(0, 0, 0, .12), transparent) 100% 0 / 14px 100% no-repeat scroll,
        var(--otms-surface);
}
.aufg-datentabelle:focus-visible { outline: 2px solid var(--otms-focus); outline-offset: 2px; }
.aufg-datentabelle table { border-collapse: collapse; width: 100%; font-size: .95rem; line-height: 1.4; }
.aufg-datentabelle caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.aufg-datentabelle th, .aufg-datentabelle td { padding: 9px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--otms-line); }
.aufg-datentabelle thead th {
    font: 600 .72rem/1.3 var(--otms-f-mono);
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--otms-ink-soft);
    vertical-align: bottom;
    border-bottom: 2px solid var(--otms-line-strong);
}
.aufg-einheit { display: block; margin-top: 3px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.aufg-datentabelle tbody th { font-weight: 600; position: sticky; left: 0; background: var(--otms-surface); }
.aufg-datentabelle .num { text-align: right; font-variant-numeric: tabular-nums; }
.aufg-datentabelle td.num { white-space: nowrap; }
.aufg-datentabelle tbody tr:last-child > * { border-bottom: 0; }
@media (max-width: 600px) {
    .aufg-datentabelle table { font-size: .9rem; }
    .aufg-datentabelle th, .aufg-datentabelle td { padding: 8px 9px; }
    .aufg-datentabelle thead th { text-transform: none; letter-spacing: 0; font-size: .74rem; }
    .aufg-datentabelle tbody th { box-shadow: 1px 0 0 var(--otms-line); }
}

.aufg-task { margin-top: 18px; }
.aufg-task .task-stem { font-size: 1.06rem; margin-bottom: 14px; }
/* Fett nur, wenn die Frage auf Einleitung, Diagramm oder Text folgt; bei
   Quanti ist der Fragesatz die ganze Aufgabe. */
.aufg-einleitung ~ .aufg-task .task-stem,
.aufg-abb ~ .aufg-task .task-stem,
.aufg-material ~ .aufg-fragen .task-stem { font-weight: 600; }
.aufg-task .opt-t { line-height: 1.45; }

/* Aussagen I/II/III (in der App: app-modules.css, hier ohne App-Stile) */
.aufg-aussagen { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.aufg-aussagen .otms-statement {
    display: grid;
    grid-template-columns: 2.4em minmax(0, 1fr);
    gap: 8px;
    padding: 10px 12px;
    border-left: 3px solid var(--otms-accent);
    background: var(--otms-bg-2);
    line-height: 1.5;
}
.aufg-aussagen .otms-statement__nr { font: 700 1rem/1.5 var(--otms-f-mono); color: var(--otms-accent); }

.aufg-urteil { margin: 16px 0 0; }
.aufg-urteil:empty { display: none; }

/* Lösung: ohne JavaScript immer erreichbar, mit JavaScript erst nach „Prüfen“ */
.aufg-loesung { margin-top: 12px; border: 1px solid var(--otms-line); background: var(--otms-surface); }
.aufg-loesung summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    font: 600 1.15rem/1.2 var(--otms-f-display);
}
.aufg-loesung summary::-webkit-details-marker { display: none; }
.aufg-loesung summary::after { content: "+"; font-family: var(--otms-f-mono); color: var(--otms-ink-soft); }
.aufg-loesung[open] summary::after { content: "–"; }
.aufg-loesung-in { padding: 0 16px 16px; line-height: 1.6; }
.aufg-loesung-in > p { margin: 0 0 10px; }
.aufg-loesung-in .otms-label { margin: 18px 0 8px; }
.aufg-richtig { font-weight: 600; }
.aufg-richtig b { font-family: var(--otms-f-mono); }
.aufg-begr { margin: 0; display: grid; gap: 10px; }
.aufg-begr > div { padding-left: 12px; border-left: 2px solid var(--otms-line); }
.aufg-begr dt { font: 600 .78rem/1.4 var(--otms-f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--otms-ink-soft); }
.aufg-begr dd { margin: 2px 0 0; }

.aufg-js .aufg-loesung:not(.is-frei) { display: none; }
html:not(.aufg-js) .aufg-aktion { display: none; }
@media (hover: none) { .aufg .keys { display: none; } }

/* --- Textverständnis: nummerierte Absätze -------------------------- */
.aufg-material { margin-top: 24px; padding: 22px clamp(14px, 3vw, 28px); border: 1px solid var(--otms-line); background: var(--otms-surface); }
.aufg-material h3 { font: 700 clamp(1.35rem, 3vw, 1.7rem)/1.15 var(--otms-f-display); margin: 4px 0 16px; }
.aufg-absaetze { list-style: none; margin: 0; padding: 0; counter-reset: absatz; }
.aufg-absaetze li {
    counter-increment: absatz;
    display: grid;
    grid-template-columns: 1.8rem minmax(0, 1fr);
    gap: 6px;
}
.aufg-absaetze li::before { content: counter(absatz); font: 500 .8rem/1.9 var(--otms-f-mono); color: var(--otms-ink-soft); }
.aufg-absaetze li + li { margin-top: 12px; }
.aufg-absaetze p { margin: 0; font-size: 1.03rem; line-height: 1.68; }
@media (max-width: 420px) {
    .aufg-material { padding: 18px 12px; }
    .aufg-absaetze li { grid-template-columns: 1.1rem minmax(0, 1fr); gap: 4px; }
}

/* --- Fakten lernen: Liste und Abfrage ------------------------------- */
.aufg-tabelle { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.aufg-tabelle table { border-collapse: collapse; width: 100%; min-width: 540px; font-size: .95rem; }
.aufg-tabelle th, .aufg-tabelle td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--otms-line); vertical-align: top; }
.aufg-tabelle thead th {
    font: 600 .72rem/1.3 var(--otms-f-mono);
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--otms-ink-soft);
    border-bottom: 2px solid var(--otms-line-strong);
}
.aufg-tabelle tbody th { font-weight: 600; }
.aufg-tabelle tbody tr:nth-child(odd) { background: var(--otms-tint); }
.aufg-tabelle td:nth-child(2) { white-space: nowrap; }
/* Schmal: eine Person pro Zeile, „Name: Alter, Beruf, Eigenschaft – Diagnose“ */
@media (max-width: 600px) {
    .aufg-tabelle table { min-width: 0; }
    .aufg-tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .aufg-tabelle tr { display: block; padding: 8px 10px; border-bottom: 1px solid var(--otms-line); }
    .aufg-tabelle th, .aufg-tabelle td { display: inline; padding: 0; border: 0; }
    .aufg-tabelle tbody th::after { content: ": "; }
    .aufg-tabelle td:nth-child(2)::after, .aufg-tabelle td:nth-child(3)::after { content: ", "; }
    .aufg-tabelle td:nth-child(4)::after { content: " – "; }
}
.aufg-fakten-verdeckt { margin: 0; padding: 22px 0; color: var(--otms-ink-soft); font-style: italic; }

html:not(.aufg-js) .aufg-fakten-aktion,
html:not(.aufg-js) .aufg-fakten-verdeckt { display: none; }
.aufg-js [data-abfrage]:not(.is-aktiv) { display: none; }
.aufg-fakten.is-verdeckt .aufg-fakten-liste { display: none; }
.aufg-fakten:not(.is-verdeckt) .aufg-fakten-verdeckt,
.aufg-fakten:not(.is-verdeckt) [data-fakten-zeigen],
.aufg-fakten.is-verdeckt [data-fakten-weiter] { display: none; }
.aufg-fakten-aktion { justify-content: flex-start; }

/* --- Strategie, Fragen, Abbinder ------------------------------------ */
.aufg-strategie { margin-top: clamp(48px, 8vw, 88px); }
.aufg-strategie h2 { margin-top: 0; }
.aufg-weiter { font-weight: 600; }
.aufg-faq { max-width: 38rem; margin: clamp(40px, 6vw, 64px) auto 0; padding: 0; }
.aufg-faq h2 { margin: 0 0 6px; }
.aufg-faq summary { font-size: 1.2rem; }
.aufg-cta p + p { margin-top: -6px; }
.aufg-cta a:not(.otms-btn) { color: var(--otms-accent); }

/* --- Übersicht ------------------------------------------------------ */
.aufg-hub-umfang {
    font-family: var(--otms-f-mono);
    font-size: .78rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--otms-ink-soft);
}
.aufg-hub .aufg-hub-zahlen { margin-top: 6px; font: 500 .8rem/1.4 var(--otms-f-mono); color: var(--otms-ink-soft); }
@media (max-width: 640px) {
    .aufg-hub .aufg-hub-umfang { order: -1; }
}