/* AV-Board — Stile des Moduls js/panel.js (Bediener-Panel, Stufe B, 24.08.2026).
   Gemeinsame Tokens/Basis bleiben in style.css; hier nur, was dieses Modul braucht.
   Drei Zonen nebeneinander, kompakt (~120 px), darunter die Schubladen.
   Dunkles Thema: Die Badges Hinweis/Lücke/offener Punkt und erledigte Einträge
   bekommen im Panel hellere Farben — die Standardtöne aus style.css lesen sich
   dort zu schwach (Prüferbefund Stufe A). */

/* Panel-eigene Tokens — Standardwerte = die aus style.css; dunkel hellere Töne. */
.panel {
    --panel-blau: var(--primary-dark);
    --panel-gelb: var(--st-work);
    --panel-orange: var(--accent-dark);
    --panel-erledigt: var(--text-subtle);
    --panel-assistent: var(--primary-soft);
}
html.dark .panel, [data-theme="dark"] .panel {
    --panel-blau: #7cc4f0;
    --panel-gelb: #f5b642;
    --panel-orange: #f6a26b;
    --panel-erledigt: #94a3b8;
    --panel-assistent: #0c2c3f;
}
.panel .badge.blau   { color: var(--panel-blau); }
.panel .badge.gelb   { color: var(--panel-gelb); }
.panel .badge.orange { color: var(--panel-orange); }

/* #panel trägt die Klasse .panel (artikel.js); darin liegt .panel-innen. */
.panel { margin: 12px 0 16px; }

/* Das Panel setzt sich vom Reiterinhalt ab (v0.9.1, AP-4): eigener Grund, eigene
   Kante. In beiden Themen getrennt gesetzt statt über Transparenz — im dunklen
   Modus graut eine durchscheinende Fläche sonst aus.

   Lauf 6 (B-1) legt eine Milchglasfläche darüber: halbtransparenter Grund,
   heller Rand und ein weiches Glühen in Primär-Blau. Die Technik stammt aus
   DESIGN-AURORA-EDITORIAL §8.2 — die Farben bleiben OSP-CI, kein
   Aurora-Hintergrund, keine fremde Schrift, kein Tilt. Der deckende Grund
   oben bleibt der Rückfall: Wo backdrop-filter fehlt oder unerwünscht ist,
   sieht das Panel genauso aus wie zuvor, nur ohne Unschärfe. */
.panel-innen {
    background: var(--panel-grund); border: 1px solid var(--panel-kante);
    border-radius: calc(var(--radius) + 2px); padding: 12px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
}
.panel { --panel-grund: #eef2f7; --panel-kante: #d7dfe8; --panel-glanz: rgba(255, 255, 255, .55); }
html.dark .panel, [data-theme="dark"] .panel {
    --panel-grund: #16202f; --panel-kante: #2b3a4f; --panel-glanz: rgba(148, 187, 219, .13);
}

@supports (backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px)) {
    .panel-innen {
        background: color-mix(in srgb, var(--panel-grund) 62%, transparent);
        -webkit-backdrop-filter: blur(14px) saturate(150%);
        backdrop-filter: blur(14px) saturate(150%);
        border-color: color-mix(in srgb, var(--panel-glanz) 70%, var(--panel-kante));
        box-shadow: 0 1px 3px rgba(15, 23, 42, .06),
                    0 0 0 1px color-mix(in srgb, var(--primary) 12%, transparent),
                    0 8px 28px -18px color-mix(in srgb, var(--primary) 55%, transparent);
    }
}

/* Das Fertigungs-Tablet ist kein starkes Gerät, und backdrop-filter kostet bei
   jedem Bildaufbau Rechenzeit. Wer Transparenz abbestellt hat, bekommt die
   deckende Fläche zurück — lesbar bleibt beides gleich. */
@media (prefers-reduced-transparency: reduce) {
    .panel-innen {
        background: var(--panel-grund);
        -webkit-backdrop-filter: none; backdrop-filter: none;
    }
}

/* Der Schnitt (B-10): Links steht ein Knopf und ein Satz — das braucht keine
   volle Spalte. Mitte und rechts tragen den Verlauf einer Sitzung und eine
   ganze Frage mit Antwortkarten; sie bekommen den Platz, den links frei wird.
   Bis Lauf 6 waren alle drei gleich breit (auto-fit minmax(260px, 1fr)).

   Drei Zustände, nicht zwei — der Stapelpunkt bei 1180 px bestand schon
   (Befund N-6):
     ab 1400 px   200 px | 1fr | 1fr
     1180–1400    links als Leiste über zwei gleichen Hälften
     unter 1180   alles untereinander (Block weiter unten)                */
.panel-zonen {
    display: grid; grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1fr); gap: 12px;
}
/* Fehlt eine Zone (Q-P: leere werden nicht gezeichnet), sollen die
   verbliebenen den Platz nehmen, statt eine Lücke zu lassen. */
.panel-zonen > .panel-zone:only-child { grid-column: 1 / -1; }
.panel-zonen > .panel-zone:first-child:nth-last-child(2) { grid-column: auto; }
.panel-zonen > .panel-zone:first-child:nth-last-child(2) ~ .panel-zone { grid-column: 2 / -1; }

/* Breite folgt dem Inhalt, nicht dem Bildschirm (FB-009, 08.09.2026).
   Auf einem 3812-px-Schirm spannte die zweite Zone über zwei Rasterspalten und
   trug einen Satz über rund 3000 px — lesbar ist etwa die halbe Strecke. Die
   Zone darf den Platz behalten; ihr Text hört vorher auf. */
.panel-zone-inhalt > * { max-width: 90ch; }
.assistent-text, .panel-zone-text, .panel-leer { max-width: 90ch; }

@media (max-width: 1400px) {
    /* Links wird zur Leiste: der nächste Schritt steht über der Arbeit, nicht
       daneben. Darunter teilen sich Lauf und Fragen die Breite. */
    .panel-zonen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .panel-zonen > #panel-zone-schritt { grid-column: 1 / -1; min-height: 0; }
    .panel-zonen > #panel-zone-schritt .panel-zone-inhalt { flex-direction: row; align-items: center;
        flex-wrap: wrap; gap: 10px; }
    .panel-zonen > .panel-zone:only-child,
    .panel-zonen > .panel-zone:first-child:nth-last-child(2) ~ .panel-zone { grid-column: auto; }
}
.panel-zonen + .panel-dialog-zeile { margin-top: 8px; }
.panel-dialog-zeile .panel-dialog-eingabe { max-width: 640px; }
/* Feste Höhe (V-9): Der Reiterinhalt darunter springt nie, egal wie viel im
   Panel steht. Was nicht hineinpasst, rollt im eigenen Block. */
.panel-zone {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
    padding: 10px 14px 11px; min-height: 96px; max-height: 230px;
    display: flex; flex-direction: column; gap: 7px; min-width: 0;
}
/* Die Fragen-Zone trägt seit Lauf 6 Antwortkarten statt Chips — untereinander
   statt nebeneinander, dafür lesbar. Bei 230 px lagen die Antworten wieder
   unter der Rollkante (Sichtprüfung 08.09.2026, derselbe Befund wie im
   Screenshot). 320 px fassen eine Frage mit Rubrik, Aufklapper, drei Karten
   und dem Eingabefeld am Fuß. Zone A ist dafür ganz entfallen (B-9) — das
   Panel ist trotz der höheren Zone niedriger als vorher. */
#panel-zone-fragen, #panel-zone-laeuft { max-height: 320px; }
.panel-zone-inhalt {
    flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    display: flex; flex-direction: column; gap: 7px;
    scrollbar-width: thin;
}
.panel-zone-inhalt::-webkit-scrollbar { width: 7px; }
.panel-zone-inhalt::-webkit-scrollbar-thumb {
    background: var(--border); border-radius: 4px;
}
.panel-zone-titel {
    font-family: var(--font-display); font-weight: 600; font-size: .7rem;
    text-transform: uppercase; letter-spacing: .05em; color: var(--text-subtle);
    display: flex; align-items: center; gap: 8px;
}
.panel-zone-text { font-size: .78rem; color: var(--text-muted); line-height: 1.45; }
.panel-leer { font-size: .82rem; color: var(--text-subtle); }
.panel-fuss { font-size: .7rem; color: var(--text-subtle); line-height: 1.4; margin-top: auto; }
.panel-fuss.warnung { color: var(--accent-dark); }

/* ── Zone 1: Nächster Schritt ──────────────────────────────────────────── */

.panel-haupt-zeile { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; }
.panel-haupt {
    font-size: .95rem; padding: 8px 20px; border-radius: var(--radius-sm); max-width: 100%;
}
.panel-haupt-text {
    font-family: var(--font-display); font-weight: 600; font-size: .95rem; padding: 4px 0;
}
.panel-sekundaer { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.panel-sekundaer .btn.klein { padding: 3px 10px; font-size: .72rem; border-radius: 6px; }
.panel-sekundaer .btn.assistent { border-color: var(--primary); color: var(--panel-blau); }
.panel-sekundaer .btn.assistent:hover { background: var(--primary-soft); }
.panel-sekundaer .btn.assistent[disabled]:hover { background: var(--surface); }
.panel .btn[disabled] { opacity: .5; cursor: default; }
.panel .btn[disabled]:hover { background: var(--surface); }
.panel .btn.primaer[disabled]:hover { background: var(--primary); }

/* ── Zone 2: Läuft gerade ──────────────────────────────────────────────── */

/* Die Zonen wachsen mit ihrem Inhalt bis zu einer Grenze, ab der sie rollen —
   vorher stand das Badge auf „2", während nur eine Frage zu sehen war. */
.panel-auftraege, .panel-fragen {
    display: flex; flex-direction: column; gap: 7px;
    max-height: 340px; overflow-y: auto; min-width: 0; scrollbar-width: thin;
}
.auftrag { display: flex; flex-direction: column; gap: 3px; }
.auftrag-kopf { display: flex; align-items: center; gap: 8px; font-size: .82rem; min-width: 0; }
.auftrag-art { font-weight: 600; white-space: nowrap; }
.auftrag-zeit {
    margin-left: auto; font-family: var(--font-mono); font-size: .68rem; color: var(--text-subtle);
    white-space: nowrap;
}
.auftrag-weg {
    border: 0; background: none; color: var(--text-subtle); cursor: pointer;
    font-size: .8rem; padding: 0 2px; line-height: 1;
}
.auftrag-weg:hover { color: var(--st-crit); }
.auftrag-balken { height: 5px; background: var(--st-neutral-soft); border-radius: 3px; overflow: hidden; }
.auftrag-balken > span {
    display: block; height: 100%; background: var(--primary); transition: width var(--motion);
}
.auftrag.queued .auftrag-balken > span { background: var(--st-neutral); }
.auftrag.waiting .auftrag-balken > span { background: var(--st-work); }
.auftrag.done .auftrag-balken > span { background: var(--st-done); }
.auftrag.failed .auftrag-balken > span { background: var(--st-crit); }
.auftrag-text { font-size: .76rem; color: var(--text-muted); line-height: 1.4; }
.auftrag-fehler { font-size: .76rem; color: var(--st-crit); line-height: 1.4; }

/* ── Was die Sitzung gerade tut (Lauf 6, B-2/B-3) ────────────────────────── */

/* Statuszeile: ein Puls-Punkt und ein Satz in Klartext. Vorher stand hier nur
   die Fortschritts-Stufe — zwischen zwei Stufen sah das Panel still aus,
   obwohl die Sitzung arbeitete. */
.auftrag-lage { display: flex; align-items: center; gap: 6px; min-width: 0; }
.auftrag-puls {
    width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
    background: var(--st-neutral);
}
.auftrag-puls.an { background: var(--primary); animation: auftrag-puls 1.6s ease-in-out infinite; }
.auftrag.steht .auftrag-puls { background: var(--st-work); }
.auftrag-tut {
    font-size: .76rem; color: var(--text-muted); line-height: 1.4;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
@keyframes auftrag-puls {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .35; transform: scale(.72); }
}

/* Wanderstreifen über der Füllung: Die Breite sagt, wie weit der Lauf ist —
   die Bewegung sagt, dass überhaupt etwas passiert. Bei Stillstand hält beides
   an und wird gelb, statt dem Badge „steht still" zu widersprechen. */
.auftrag-balken.laeuft > span {
    background-image: linear-gradient(115deg,
        rgba(255, 255, 255, .38) 25%, transparent 25%, transparent 50%,
        rgba(255, 255, 255, .38) 50%, rgba(255, 255, 255, .38) 75%, transparent 75%);
    background-size: 18px 18px;
    animation: auftrag-wandern 1.1s linear infinite;
}
@keyframes auftrag-wandern { to { background-position: 18px 0; } }
.auftrag.steht .auftrag-balken > span { background: var(--st-work); animation: none; }

/* Abbrechen und neu starten — der Weg heraus, den es bis Lauf 6 nicht gab. */
.auftrag-knoepfe { display: flex; gap: 6px; margin-top: 1px; }
.auftrag-knopf {
    border: 1px solid var(--border); background: none; color: var(--text-muted);
    border-radius: 6px; padding: 1px 8px; font-size: .7rem; cursor: pointer;
    font-family: inherit; line-height: 1.6;
}
.auftrag-knopf:hover { color: var(--text); border-color: var(--text-subtle); }

/* Der Verlauf bleibt zu, bis jemand ihn aufklappt — die Statuszeile genügt. */
.auftrag-verlauf > summary {
    font-size: .7rem; color: var(--text-subtle); cursor: pointer; list-style: none;
    padding: 1px 0; user-select: none;
}
.auftrag-verlauf > summary::-webkit-details-marker { display: none; }
.auftrag-verlauf > summary::before { content: '▸ '; }
.auftrag-verlauf[open] > summary::before { content: '▾ '; }
.auftrag-verlauf > summary:hover { color: var(--text-muted); }
.schritt-liste {
    list-style: none; margin: 3px 0 0; padding: 0 0 0 2px;
    max-height: 148px; overflow-y: auto; scrollbar-width: thin;
    display: flex; flex-direction: column; gap: 2px;
}
.schritt-liste li {
    display: flex; gap: 6px; align-items: baseline; font-size: .7rem; min-width: 0;
}
.schritt-zeit {
    font-family: var(--font-mono); color: var(--text-subtle); flex: 0 0 auto; font-size: .66rem;
}
.schritt-was { color: var(--text-muted); }
.schritt-detail {
    font-family: var(--font-mono); color: var(--text-subtle);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.schritt-leer { color: var(--text-subtle); font-style: italic; }

/* Wer Bewegung nicht will, bekommt keine — der Zustand bleibt trotzdem lesbar,
   er steht in der Statuszeile und im Badge. */
@media (prefers-reduced-motion: reduce) {
    .auftrag-puls.an { animation: none; }
    .auftrag-balken.laeuft > span { animation: none; }
}

/* Kontingent der KI-Sitzung — nur, wenn ein Auftrag es liefert (Stufe B). */
.panel-kontingent {
    font-family: var(--font-mono); font-size: .7rem; color: var(--text-subtle); line-height: 1.4;
}

/* Karte „Assistent": Ergebnis der Analyse — Erklärung, Badge, Vorschlag für AL. */
.assistent-karte {
    border-left: 3px solid var(--primary); background: var(--panel-assistent);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 6px 10px 7px;
    display: flex; flex-direction: column; gap: 4px;
}
.assistent-kopf { display: flex; align-items: center; gap: 8px; font-size: .82rem; min-width: 0; }
.assistent-titel { font-family: var(--font-display); font-weight: 600; color: var(--panel-blau); }
.assistent-text { font-size: .8rem; line-height: 1.45; color: var(--text); }
.assistent-text > .mehr { display: inline-block; margin-left: 6px; }
.assistent-text > .mehr[open] { display: block; margin: 4px 0 0; }
.assistent-vorschlag { font-size: .78rem; line-height: 1.45; color: var(--text-muted); }

/* Der Weg zur Rückfrage und die Kennzeichnung überholter Befunde (FB-009). */
.assistent-verweis { margin-top: 6px; }
.assistent-karte.ueberholt { border-left-color: var(--panel-orange); opacity: .92; }
.assistent-karte.ueberholt .assistent-text { color: var(--text-muted); }
.assistent-ueberholt {
    margin-top: 6px; font-size: .76rem; line-height: 1.45; color: var(--panel-orange);
}
.assistent-label {
    display: inline-block; margin-right: 6px; font-weight: 600; color: var(--panel-orange);
}

/* ── Zone 3: Fragen an Sie ─────────────────────────────────────────────── */

.frage { border-left: 3px solid var(--accent); padding: 3px 0 4px 10px; }
.frage.ki { border-left-color: var(--primary); }
.frage-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.frage-text { font-size: .82rem; line-height: 1.45; }
.frage-kontext {
    display: inline-block; margin-top: 3px; font-size: .72rem; color: var(--primary);
    text-decoration: none; font-family: var(--font-mono);
}
.frage-kontext:hover { text-decoration: underline; }

/* Rubrik statt Badge: ein kurzes Kürzel, das sagt, worum es geht — die Frage
   selbst muss es dann nicht mehr sagen (B-6). */
.frage-rubrik {
    font-family: var(--font-mono); font-size: .66rem; letter-spacing: .04em;
    text-transform: uppercase; color: var(--primary-dark); background: var(--primary-soft);
    border-radius: 4px; padding: 1px 6px; white-space: nowrap;
}

/* Der Sachverhalt liegt hinter „Worum es geht" — samt Beleg-Link. Von drei
   Erklärstellen bleiben damit zwei (N-9). */
.frage-worum > summary {
    font-size: .72rem; color: var(--text-subtle); cursor: pointer; list-style: none;
    padding: 2px 0; user-select: none;
}
.frage-worum > summary::-webkit-details-marker { display: none; }
.frage-worum > summary::before { content: '▸ '; }
.frage-worum[open] > summary::before { content: '▾ '; }
.frage-worum > summary:hover { color: var(--text-muted); }
.frage-worum p { margin: 2px 0 4px; font-size: .76rem; line-height: 1.45; color: var(--text-muted); }

/* Antwortkarten statt Chips: Beschriftung fett, Begründung als zweite Zeile.
   Ein Chip mit angeklebter Begründung trug einen ganzen Satz und rollte aus
   dem Bild — im Screenshot vom 08.09.2026 war keine Antwort mehr zu sehen. */
/* Der Hauptknopf trägt zwei Zeilen (N-7): Tätigkeit fett, Ziel klein darunter.
   Einzeilig bräche „Stückliste & ERP-Zuordnung · Pos 1" auf 200 px dreifach um. */
.panel-haupt { display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
    text-align: left; line-height: 1.3; width: 100%; }
.haupt-tun { font-weight: 600; }
.haupt-ziel { font-size: .74rem; font-weight: 400; opacity: .85; }

.frage-karten { display: flex; flex-direction: column; gap: 4px; margin-top: 7px; }
.frage-karte {
    display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left;
    font-family: var(--font-body); cursor: pointer;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--bg); color: var(--text); padding: 5px 9px;
    transition: border-color var(--motion), background var(--motion);
}
.frage-karte:hover { border-color: var(--primary); background: var(--primary-soft); }
.karte-kopf { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
.karte-text { font-size: .78rem; font-weight: 600; line-height: 1.35; }
.karte-grund { font-size: .72rem; color: var(--text-muted); line-height: 1.4; }
.karte-stern { color: var(--accent); font-size: .8rem; flex: 0 0 auto; }
.frage-karte.empfohlen { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }

.frage-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.panel-chip {
    font-family: var(--font-body); font-size: .74rem; font-weight: 600;
    border-radius: 999px; padding: 2px 11px; cursor: pointer;
    border: 1px solid var(--primary); color: var(--primary-dark); background: var(--primary-soft);
    transition: background var(--motion), color var(--motion);
}
.panel-chip:hover { background: var(--primary); color: #fff; }
.frage-freitext { display: flex; gap: 6px; margin-top: 6px; }
.frage-freitext input {
    flex: 1; min-width: 0; font-family: var(--font-body); font-size: .8rem;
    padding: 4px 9px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--bg); color: var(--text);
}
.frage-freitext input:focus { outline: none; border-color: var(--primary); background: var(--surface); }
.frage-freitext .btn.klein { padding: 3px 10px; font-size: .72rem; border-radius: 6px; }

/* ── Schubladen ────────────────────────────────────────────────────────── */

.panel-schubladen { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 10px; }
.schublade {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); flex: 0 1 auto; min-width: 0;
}
.schublade[open] { flex: 1 1 100%; }
.schublade > summary {
    cursor: pointer; padding: 7px 14px; font-weight: 600; font-size: .82rem;
    font-family: var(--font-display); list-style: none;
    display: flex; align-items: center; gap: 7px; white-space: nowrap;
}
.schublade > summary::-webkit-details-marker { display: none; }
.schublade > summary::before {
    content: '▸'; color: var(--text-subtle); transition: transform var(--motion);
}
.schublade[open] > summary::before { transform: rotate(90deg); }
.schublade > summary:hover { color: var(--primary); }
.schublade-zahl {
    font-family: var(--font-mono); font-size: .7rem; font-weight: 600;
    background: var(--bg); border: 1px solid var(--border); border-radius: 999px;
    padding: 0 7px; color: var(--text-muted);
}
.schublade-inhalt { padding: 8px 14px 12px; border-top: 1px solid var(--border); }
/* Offene Punkte rollen im eigenen Rahmen — die Kopfzeilen der anderen
   Schubladen bleiben sichtbar, auch bei 30 Befunden. */
.schublade-inhalt.rollbar { max-height: 260px; overflow-y: auto; overscroll-behavior: contain; }

/* Befunde: Häkchen · Art · Kernaussage, Wortlaut am Pluszeichen. */
.befund {
    display: grid; grid-template-columns: 20px auto minmax(0, 1fr);
    gap: 4px 10px; align-items: baseline;
    padding: 6px 0; border-top: 1px solid var(--border); font-size: .82rem;
}
.befund:first-child { border-top: 0; padding-top: 2px; }
.befund input[type="checkbox"] { margin: 0; width: 15px; height: 15px; cursor: pointer; align-self: center; }
.befund-punkt {
    width: 7px; height: 7px; border-radius: 50%; background: var(--text-subtle);
    justify-self: center; align-self: center;
}
.befund-text { line-height: 1.5; color: var(--text); min-width: 0; }
.befund-text > .mehr { display: inline-block; margin: 0 0 0 6px; vertical-align: baseline; }
.befund-text > .mehr[open] { display: block; margin: 4px 0 0; }
.befund-meta { display: block; font-family: var(--font-mono); font-size: .68rem; color: var(--text-subtle); }
.befund.erledigt { color: var(--panel-erledigt); }
.befund.erledigt .befund-text { color: var(--panel-erledigt); text-decoration: line-through; }
.befund.erledigt .badge { opacity: .7; }

/* Sprungziel aus Zone 1 — kurzes Aufblitzen (Keyframes „aufblitzen" aus style.css). */
.panel-ziel { animation: aufblitzen 2.4s ease-out; }
tr.panel-ziel > td { animation: aufblitzen 2.4s ease-out; }

.uebermittelt-zeile {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: .84rem;
}
.uebermittelt-zeile .btn.klein { padding: 3px 10px; font-size: .72rem; border-radius: 6px; }

/* Lernhinweis — kompakte Fassung des Hinweisfelds. */
.schublade .lern-bisher { list-style: none; margin: 0 0 10px; padding: 0; }
.schublade .lern-bisher li { padding: 5px 0 5px 10px; border-left: 2px solid var(--border); margin-bottom: 5px; }
.schublade .lern-text { display: block; font-size: .82rem; line-height: 1.5; }
.schublade .lern-meta { font-size: .7rem; color: var(--text-subtle); font-family: var(--font-mono); }
.schublade .lern-eingabe { display: flex; gap: 8px; align-items: flex-start; }
.schublade .lern-eingabe textarea {
    flex: 1; font-family: var(--font-body); font-size: .84rem; line-height: 1.5;
    padding: 7px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--bg); color: var(--text); resize: vertical; min-height: 44px;
}
.schublade .lern-eingabe textarea:focus { outline: none; border-color: var(--primary); background: var(--surface); }
.schublade .lern-eingabe .btn { flex-shrink: 0; height: 36px; }

/* ── Schmal: Zonen untereinander ───────────────────────────────────────── */

@media (max-width: 1180px) {
    .panel-zonen { grid-template-columns: 1fr; gap: 8px; }
    /* Untereinander trägt die feste Höhe nichts — sie würde drei Rollflächen
       übereinander erzeugen, wo die Seite ohnehin rollt. Die beiden
       Arbeitszonen bekommen deshalb im Stapel mehr Luft als nebeneinander:
       Auf dem Fertigungs-Tablet (CLAUDE.md §C.4) soll eine ganze Frage samt
       Antwortkarten ohne Rollen zu sehen sein. */
    .panel-zone { min-height: 0; height: auto; max-height: 260px; }
    #panel-zone-fragen, #panel-zone-laeuft { max-height: 420px; }
    .panel-auftraege, .panel-fragen { max-height: none; }
    .schublade, .schublade[open] { flex: 1 1 100%; }
    .schublade > summary { white-space: normal; }
    .schublade-inhalt.rollbar { max-height: 320px; }
}

/* Link auf die Entscheidungsvorlage (AP-1): steht über den Chips, weil er
   gelesen wird, bevor geantwortet wird — nicht daneben, wo er wie ein
   weiterer Antwortchip aussähe. */
.frage-vorlage { display: inline-block; margin: 6px 0 2px; font-size: .78rem;
                 color: var(--primary, #0080C9); text-decoration: none;
                 border-bottom: 1px dotted currentColor; }
.frage-vorlage::before { content: "📄 "; }
.frage-worum .frage-vorlage { margin: 0 0 2px; font-size: .74rem; }
.frage-vorlage:hover { border-bottom-style: solid; }

/* ── Kalkulation wartet auf Ansage (v0.9.1, V-2) ─────────────────────────── */
/* Der alte Stand bleibt stehen; dass er veraltet ist, muss man ihm ansehen. */
.panel-veraltet {
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
    padding: 6px 9px; border-radius: 7px; font-size: .78rem;
    background: rgba(220, 80, 15, .07);
    border-left: 3px solid var(--panel-orange);
}

/* ── Dialog mit der Session (v0.9.1, AP-5) ───────────────────────────────── */
/* Der Verlauf rollt im Inhalt mit, das Eingabefeld bleibt unten am Block. */
.panel-dialog { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.dialog-zeile {
    display: grid; grid-template-columns: auto 1fr auto; gap: 4px 8px;
    align-items: baseline; font-size: .8rem; line-height: 1.45;
    padding: 5px 8px; border-radius: 7px;
}
.dialog-zeile.ich  { background: var(--surface-alt, rgba(0, 128, 201, .05)); }
.dialog-zeile.ki   { background: var(--panel-assistent); }
.dialog-zeile.wartet { opacity: .7; font-style: italic; }
.dialog-wer  { font-weight: 600; font-size: .7rem; color: var(--text-subtle);
               text-transform: uppercase; letter-spacing: .04em; }
.dialog-text { grid-column: 1 / -1; white-space: pre-wrap; }
.dialog-zeit { font-size: .66rem; color: var(--text-subtle); white-space: nowrap; }
.panel-dialog-eingabe {
    display: flex; gap: 6px; padding-top: 8px; margin-top: 2px;
    border-top: 1px solid var(--border);
}
.panel-dialog-eingabe input {
    flex: 1; min-width: 0; padding: 5px 9px; font-size: .8rem;
    border: 1px solid var(--border); border-radius: 7px;
    background: var(--surface); color: var(--text);
}
.panel-dialog-eingabe .btn.klein { padding: 4px 11px; font-size: .74rem; white-space: nowrap; }

/* Antwortchips an einem offenen Punkt (v0.9.1, AP-2) — ein Klick beantwortet
   und hakt ab; die Antwort steht danach im Journal. */
.befund-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.befund-chips .panel-chip { font-size: .74rem; padding: 3px 9px; }

/* Was aus einem Lernhinweis wurde (AL 27.08.2026) — die Rückmeldung an den,
   der ihn geschrieben hat. */
.lern-bisher .lern-ergebnis {
    display: block; margin-top: 3px; padding-left: 10px; font-size: .78rem;
    border-left: 2px solid var(--st-done); color: var(--text-muted);
}

/* ── Stand der Lernhinweise im mittleren Block (AL 27.08.2026) ───────────── */
/* Der Stand gehört ins Panel, das Eingabefeld in die Überlagerung: Wer einen
   neuen Hinweis schreibt, will ein leeres Feld sehen, nicht vier alte. */
.panel-lernstand { margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--border); }
.panel-lernstand .panel-zone-titel { margin-bottom: 5px; }
.lernstand-zeile {
    display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
    font-size: .76rem; padding: 3px 0;
}
.lernstand-text { flex: 1; min-width: 0; color: var(--text-muted);
                  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lernstand-mehr { flex-basis: 100%; }
.lernstand-mehr p { margin: 4px 0 0; padding-left: 8px; font-size: .76rem;
                    border-left: 2px solid var(--st-done); color: var(--text-muted); }
.lern-fuss-oben { margin-bottom: 8px; }

/* Freigabe-Warteschlange (N-6) — schlichte Liste, kein zweites Dashboard. */
.panel-liste { margin: 2px 0 0; padding-left: 18px; font-size: .8rem; line-height: 1.7; }
.panel-liste a { font-family: var(--font-code); }
.panel-liste .klein { margin-left: 6px; }
.panel-unter {
    margin-top: 8px; font-family: var(--font-display); font-weight: 600;
    font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted);
}