.l6-page .worksheet-stage {
    max-width: 1500px;
}

.l6-page .worksheet-paper {
    padding: 12px 14px 14px;
}

.l6-zone-host,
.l6-task-list,
.l6-booking-list {
    display: grid;
    gap: 7px;
}

.l6-task,
.l6-calc-task,
.l6-mapping-task,
.l6-booking-task {
    border: 1px solid #d7cbb6;
    background: rgba(255, 250, 240, 0.94);
}

.l6-task {
    display: grid;
    grid-template-columns: minmax(260px, .9fr) minmax(420px, 1.45fr);
    gap: 12px;
    align-items: center;
    padding: 8px 9px;
}

.l6-task > strong,
.l6-calc-copy strong,
.l6-mapping-task strong,
.l6-booking-copy strong {
    color: #171b18;
    font-family: "Lora", serif;
    font-size: .92rem;
    line-height: 1.28;
}

.l6-choices {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.l6-choices button {
    width: 100%;
    min-width: 0;
    text-align: left;
}

.l6-choices button,
.l6-check-button,
.l6-reset,
.l6-status-button,
.l6-more-practice,
.l6-account,
.l6-drop-slot,
.l6-calc-field input,
.l6-calc-field select,
.l6-booking-line input {
    min-height: 32px;
    border: 1px solid #9f9279;
    border-radius: 0;
    background: #fffaf0;
    color: #1f2b2f;
    font-family: "JetBrains Mono", monospace;
    font-size: .66rem;
    font-weight: 800;
    line-height: 1.18;
}

.l6-choices button,
.l6-check-button,
.l6-reset,
.l6-status-button,
.l6-more-practice,
.l6-account {
    padding: 6px 8px;
    cursor: pointer;
}

.l6-choices button:hover,
.l6-check-button:hover,
.l6-reset:hover,
.l6-account:hover,
.l6-account.is-selected {
    border-color: #201d17;
    background: #f4ead9;
}

.l6-choices button.is-selected {
    border-color: var(--feedback-correct-accent);
    background: var(--feedback-correct-bg);
    color: var(--feedback-correct-text);
}

.l6-choices button.is-wrong {
    border-color: var(--feedback-wrong-accent);
    background: var(--feedback-wrong-bg);
    color: var(--feedback-wrong-text);
}

.l6-choices button.is-correct,
.l6-task.is-complete,
.l6-calc-task.is-complete,
.l6-mapping-task.is-complete,
.l6-booking-task.is-complete {
    border-color: #98bd9f;
    background: var(--feedback-correct-bg);
}

.l6-feedback {
    grid-column: 1 / -1;
    margin: 0;
    padding: 6px 8px;
    border: 1px solid #d7cbb6;
    background: #fffdf8;
    color: #665f51;
    font-size: .76rem;
    line-height: 1.35;
}

.l6-feedback:empty,
.l6-feedback:not(.is-correct):not(.is-wrong) {
    display: none;
}

.l6-feedback.is-correct {
    border-color: #98bd9f;
    background: var(--feedback-correct-bg);
    color: var(--feedback-correct-text);
}

.l6-feedback.is-wrong {
    border-color: #d99585;
    background: var(--feedback-wrong-bg);
    color: var(--feedback-wrong-text);
}

.l6-calc-task {
    display: grid;
    grid-template-columns: minmax(250px, .9fr) minmax(360px, 1.6fr) 84px;
    gap: 10px;
    align-items: center;
    padding: 9px;
}

.l6-calc-copy,
.l6-booking-copy {
    display: grid;
    gap: 4px;
}

.l6-case-label {
    width: fit-content;
    padding: 3px 6px;
    border: 1px solid #d7cbb6;
    background: #fbf6ea;
    color: var(--feedback-correct-accent);
    font-family: "JetBrains Mono", monospace;
    font-size: .56rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.l6-calc-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    gap: 6px;
}

.l6-calc-field {
    display: grid;
    gap: 3px;
}

.l6-calc-field label,
.l6-booking-line label {
    color: #665f51;
    font-family: "JetBrains Mono", monospace;
    font-size: .55rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.l6-calc-field input,
.l6-calc-field select,
.l6-booking-line input {
    width: 100%;
    padding: 0 7px;
}

.l6-calc-field input,
.l6-booking-line input {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.l6-work-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 18px;
    align-items: start;
}

.l6-work-grid > .l6-task-list,
.l6-work-grid > .l6-booking-list {
    min-width: 0;
}

.l6-account-plan {
    position: sticky;
    top: 118px;
    /* Ohne Höhenbegrenzung klebt nur der obere Teil: Ein Plan, der höher als das
       Fenster ist, zwingt zum Scrollen — und dabei verschwindet die Aufgabe.
       Mit eigener Bildlaufleiste bleiben Aufgabe und Konten gleichzeitig sichtbar. */
    max-height: calc(100vh - 138px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 10px;
    border: 1px solid rgba(33, 33, 28, .2);
    background: rgba(247, 242, 229, .95);
}

.l6-plan-title {
    margin: 0 0 3px;
    color: #b85135;
    font-family: "JetBrains Mono", monospace;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.l6-plan-help {
    margin: 0 0 8px;
    color: #6b6257;
    font-size: .7rem;
    line-height: 1.3;
}

.l6-plan-classes {
    display: grid;
    gap: 5px;
}

.l6-plan-class {
    border: 1px solid rgba(33, 33, 28, .16);
    background: #fffaf0;
}

/* Die zehn Kopfzeilen sehen bewusst alle gleich aus. Weil der Plan immer
   zugeklappt startet, wären sie sonst der einzige Unterschied im Bild — und ein
   abgeblendeter Kopf würde verraten, in welcher Klasse das gesuchte Konto nicht
   steht. Die Klasse zu wählen ist aber der erste fachliche Schritt.
   Zurückgenommen wird erst, was nach dem Aufklappen zu sehen ist. */
.l6-plan-class.is-muted > .l6-plan-accounts {
    opacity: .62;
}

.l6-plan-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 7px;
    color: #fffaf0;
    font-family: "JetBrains Mono", monospace;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .04em;
    cursor: pointer;
    /* Das Standarddreieck weicht je nach Browser stark ab; wir zeichnen selbst. */
    list-style: none;
}

.l6-plan-head::-webkit-details-marker {
    display: none;
}

.l6-plan-head::after {
    content: "+";
    margin-left: auto;
    font-size: .82rem;
    line-height: 1;
}

.l6-plan-class[open] > .l6-plan-head::after {
    content: "−";
}

.l6-plan-head:focus-visible {
    outline: 2px solid #fffaf0;
    outline-offset: -3px;
}

.l6-plan-class-0 .l6-plan-head { background: #34312b; }
.l6-plan-class-1 .l6-plan-head { background: #1d5f9f; }
.l6-plan-class-2 .l6-plan-head { background: #1f7b4d; }
.l6-plan-class-3 .l6-plan-head { background: #d57b1f; color: #201d17; }
.l6-plan-class-4 .l6-plan-head { background: #7b4bb3; }
.l6-plan-class-5 .l6-plan-head { background: #4a453b; }
.l6-plan-class-6 .l6-plan-head { background: #247f52; }
.l6-plan-class-7 .l6-plan-head { background: #bd3d32; }
.l6-plan-class-8 .l6-plan-head { background: #6a5b4c; }
.l6-plan-class-9 .l6-plan-head { background: #6d4a82; }

.l6-plan-accounts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    padding: 5px;
}

/* Die Chips im Kontenplan bleiben bewusst neutral. Die Kontenklasse trägt schon
   die farbige Kopfzeile ihrer Gruppe; die Farbe des einzelnen Kontos erscheint
   erst, wenn es in einer Ablagefläche liegt. So bleibt der Plan ruhig, und die
   Farbe bedeutet etwas: "dieses Konto hast du gesetzt". */
.l6-account-chip {
    min-width: 0;
    min-height: 0;
    padding: 5px 6px;
    border: 1px solid rgba(33, 33, 28, .2);
    background: #fffdf7;
    color: #2a251f;
    font-size: .66rem;
    line-height: 1.2;
    text-align: left;
    cursor: grab;
}

.l6-account-chip.is-needed {
    border-color: #2d7c53;
    background: #edf7ee;
}


.l6-account-chip:active {
    cursor: grabbing;
}

.l6-mapping-task {
    display: grid;
    grid-template-columns: minmax(210px, 1fr) minmax(210px, .9fr) 78px;
    gap: 7px;
    align-items: center;
    padding: 8px;
}

.l6-drop-slot {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 46px;
    padding: 4px;
    border-style: dashed;
    cursor: pointer;
}

.l6-drop-slot.is-over,
.l6-drop-slot:focus {
    border-color: var(--feedback-correct-accent);
    background: #eaf4e8;
    outline: none;
}

.l6-drop-slot.has-account {
    border-style: solid;
    border-color: #9f9279;
    background: #fffdf7;
}

.l6-drop-slot:disabled {
    opacity: 1;
    cursor: default;
}

.l6-drop-placeholder {
    width: 100%;
    color: #746b5f;
    font-size: .65rem;
    text-align: center;
}

.l6-dropped-account {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px;
    align-items: center;
    width: 100%;
    min-height: 34px;
    padding: 5px 7px;
    color: #fffaf0;
    font-family: "JetBrains Mono", monospace;
    font-size: .64rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: left;
}

/* Ein abgelegtes Konto lässt sich wieder herausziehen: auf eine andere Ablage
   zum Verschieben, irgendwo daneben zum Entfernen. Der Greifzeiger zeigt das an. */
.l6-dropped-account[draggable="true"] {
    cursor: grab;
}

.l6-dropped-account[draggable="true"]:active {
    cursor: grabbing;
}

.l6-dropped-account > strong {
    font-size: .68rem;
}

.l6-dropped-account > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.l6-dropped-class-0 { background: #34312b; }
.l6-dropped-class-1 { background: #1d5f9f; }
.l6-dropped-class-2 { background: #1f7b4d; }
.l6-dropped-class-3 { background: #d57b1f; color: #201d17; }
.l6-dropped-class-4 { background: #7b4bb3; }
.l6-dropped-class-5 { background: #4a453b; }
.l6-dropped-class-6 { background: #247f52; }
.l6-dropped-class-7 { background: #bd3d32; }
.l6-dropped-class-8 { background: #6a5b4c; }
.l6-dropped-class-9 { background: #6d4a82; }

.l6-mapping-task > .l6-check-button {
    width: 78px;
    justify-self: end;
}

.l6-booking-task {
    display: grid;
    gap: 8px;
    padding: 10px;
}

.l6-booking-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.l6-booking-side {
    display: grid;
    gap: 5px;
    align-content: start;
    min-width: 0;
    padding: 7px;
    border: 1px solid rgba(33, 33, 28, .16);
    background: rgba(255, 253, 247, .68);
}

.l6-booking-side > strong {
    padding-bottom: 5px;
    border-bottom: 1px solid #9f9279;
    font: 800 .62rem/1.1 "JetBrains Mono", monospace;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.l6-booking-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 96px;
    gap: 6px;
    align-items: end;
}

.l6-booking-line .l6-drop-slot {
    min-height: 42px;
}

.l6-booking-line > div {
    display: grid;
    gap: 3px;
}

.l6-booking-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 1px;
}

.l6-booking-actions .l6-check-button,
.l6-calc-task > .l6-check-button {
    min-width: 84px;
}

.l6-status-button,
.l6-more-practice,
.l6-reset {
    width: 100%;
}

.l6-status-button {
    border-color: #201d17;
    background: #201d17;
    color: var(--text-on-dark);
}

.l6-status-button.is-done {
    border-color: var(--feedback-correct-accent);
    background: var(--feedback-correct-accent);
}

.l6-more-practice {
    opacity: .62;
    cursor: not-allowed;
}

@media (max-width: 1100px) {
    .l6-work-grid { grid-template-columns: 1fr; }
    /* Einspaltig steht der Plan unter den Aufgaben. Eine zweite Bildlaufleiste
       im Seitenfluss wäre hier hinderlich, und 100vh ist auf Mobilgeräten
       ohnehin unzuverlässig — die eingeklappten Klassen halten ihn kurz genug. */
    .l6-account-plan {
        position: static;
        max-height: none;
        overflow-y: visible;
    }
}

@media (max-width: 860px) {
    .l6-task,
    .l6-calc-task,
    .l6-booking-grid {
        grid-template-columns: 1fr;
    }
    .l6-choices {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .l6-mapping-task {
        grid-template-columns: 1fr;
    }
    .l6-mapping-task > .l6-check-button {
        width: 100%;
    }
    .l6-booking-line { grid-template-columns: minmax(0, 1fr) 86px; }
}