.exercise-area {
    --exercise-blue: #1556a8;
    --exercise-blue-2: #2785df;
    --exercise-green: #2f8f46;
    --exercise-ink: #142947;
    --exercise-muted: #58708f;
    max-width: 1180px;
    margin: 0 auto;
}

.exercise-hero,
.exercise-set-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: clamp(22px, 4vw, 42px);
    margin-bottom: 22px;
    color: #fff;
    border: 1px solid #0e4d9d;
    border-radius: 20px;
    background: linear-gradient(135deg, #0e4c9f 0%, #2687df 65%, #40a4e8 100%);
    box-shadow: 0 16px 35px rgba(23, 69, 130, .2);
}

.exercise-hero__badge {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 88px;
    height: 88px;
    color: #0c4b93;
    font-size: 30px;
    font-weight: 900;
    letter-spacing: -.03em;
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(0, 40, 100, .24);
}

.exercise-hero h1,
.exercise-set-header h1 {
    margin: 3px 0 8px;
    color: inherit;
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.05;
}

.exercise-hero p,
.exercise-set-header p { margin: 0; color: rgba(255, 255, 255, .9); }
.exercise-hero .eyebrow,
.exercise-set-header .eyebrow { color: #d9f1ff; }

.learning-field-grid,
.exercise-set-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
    gap: 16px;
}

.learning-field-card,
.exercise-set-card {
    display: grid;
    min-height: 145px;
    padding: 20px;
    color: var(--exercise-ink);
    text-decoration: none;
    border: 1px solid #9fc4ef;
    border-radius: 16px;
    background: linear-gradient(150deg, #fff 0%, #eef6ff 100%);
    box-shadow: 0 9px 24px rgba(27, 77, 140, .11);
}

.learning-field-card span,
.exercise-set-card span {
    color: var(--exercise-blue);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.learning-field-card strong,
.exercise-set-card strong { align-self: center; font-size: 18px; line-height: 1.25; }
.learning-field-card small,
.exercise-set-card small { align-self: end; color: var(--exercise-muted); }
.learning-field-card.is-available:hover,
.exercise-set-card:hover { translate: 0 -3px; border-color: #2d7bd1; box-shadow: 0 14px 28px rgba(27, 77, 140, .18); }
.learning-field-card.is-pending { opacity: .64; border-style: dashed; box-shadow: none; }

.exercise-set-header { padding: 25px 30px; }
.exercise-progress {
    position: relative;
    min-width: 150px;
    padding: 12px 16px;
    overflow: hidden;
    color: #0b356d;
    text-align: center;
    font-weight: 800;
    border: 1px solid rgba(255,255,255,.8);
    border-radius: 999px;
    background: #fff;
}
.exercise-progress::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--exercise-progress, 0%);
    background: rgba(69, 197, 111, .23);
    transition: width .2s ease;
}

.exercise-card {
    margin: 0 0 18px;
    overflow: hidden;
    border: 1px solid #b8cee8;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(30, 71, 122, .09);
}
.exercise-card > header { padding: 18px 22px; border-bottom: 1px solid #d9e6f4; background: #f1f7ff; }
.exercise-card > header span { color: var(--exercise-green); font-size: 11px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.exercise-card > header h2 { margin: 3px 0 0; color: var(--exercise-ink); font-size: 20px; }
.exercise-prompt { padding: 20px 22px 4px; }
.exercise-prompt p { color: #223a58; line-height: 1.62; }
.exercise-statement { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: center; margin: 0 0 9px; padding: 11px 13px; border: 1px solid #d5e1ee; border-radius: 9px; background: #f9fcff; }
.exercise-statement > span { color: #223a58; line-height: 1.45; }
.exercise-statement label { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; color: #294968; font-weight: 700; }
.exercise-statement input { width: 18px; height: 18px; accent-color: #1766c2; }
.exercise-figure { margin: 18px 0; padding: 14px; text-align: center; border: 1px solid #cfdeee; border-radius: 12px; background: #f8fbff; }
.exercise-figure img { display: block; width: auto; max-width: 100%; max-height: 560px; margin: 0 auto; object-fit: contain; }

.exercise-table-wrap { margin: 0 0 18px; overflow-x: auto; border: 1px solid #c6d7eb; border-radius: 11px; }
.exercise-table { width: 100%; min-width: 580px; border-collapse: collapse; background: #fff; }
.exercise-table th { padding: 11px 13px; color: #fff; text-align: left; background: #275e9e; }
.exercise-table td { padding: 11px 13px; vertical-align: top; border-top: 1px solid #dce7f3; }
.exercise-table tbody tr:nth-child(even) { background: #f7fbff; }
.exercise-choice { width: 76px; text-align: center; }
.exercise-choice input { width: 20px; height: 20px; accent-color: #1766c2; }
.exercise-inline-answer { width: 100%; min-width: 160px; padding: 9px 11px; border: 1px solid #9fb9d8; border-radius: 7px; background: #fbfdff; }

.exercise-answer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 13px;
    margin: 14px 0 20px;
}

.exercise-field,
.exercise-binary {
    display: grid;
    align-content: start;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 14px;
    color: #203b5c;
    border: 1px solid #c5d8ed;
    border-radius: 11px;
    background: linear-gradient(145deg, #fff 0%, #f5faff 100%);
}

.exercise-field > span:first-child,
.exercise-binary legend {
    color: #1b3f69;
    font-weight: 800;
    line-height: 1.4;
}

.exercise-field input,
.exercise-field select,
.exercise-editable {
    width: 100%;
    min-width: 0;
    padding: 10px 12px;
    color: #162c48;
    font: inherit;
    border: 1px solid #91afd2;
    border-radius: 8px;
    background: #fff;
}

.exercise-editable {
    min-height: calc(var(--exercise-editable-rows, 4) * 1.5em + 24px);
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    cursor: text;
}
.exercise-editable:empty::before { content: attr(data-placeholder); color: #71849b; pointer-events: none; }
.exercise-field__control { position: relative; display: block; }
.exercise-field__control .exercise-field__suffix { position: absolute; top: 50%; right: 12px; translate: 0 -50%; color: #56708d; }
.exercise-field__control:has(.exercise-field__suffix) input { padding-right: 38px; }
.exercise-field input:focus,
.exercise-field select:focus,
.exercise-editable:focus { outline: 3px solid rgba(28, 112, 210, .22); border-color: #1c70d2; }

.exercise-binary { grid-template-columns: 1fr auto auto; align-items: center; }
.exercise-binary legend { grid-column: 1 / -1; width: 100%; padding: 0; }
.exercise-binary label { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-weight: 700; }
.exercise-binary input { width: 18px; height: 18px; accent-color: #1766c2; }

.exercise-source { margin: 15px 0 20px; border: 1px solid #a9c2df; border-radius: 10px; background: #f8fbff; }
.exercise-source summary { padding: 12px 15px; cursor: pointer; color: #174f91; font-weight: 800; }
.exercise-source p { max-height: 360px; margin: 0; padding: 0 15px 15px; overflow: auto; }
.exercise-card--supplemental { border-color: #82bb91; }
.exercise-card--supplemental > header { background: #edf9f0; }
.exercise-supplement-note { color: #28723b !important; font-weight: 800; }

.exercise-notes { display: grid; gap: 7px; padding: 0 22px 22px; }
.exercise-notes span { color: #24476f; font-weight: 800; }
.exercise-notes .exercise-editable { width: 100%; min-height: 110px; padding: 12px; color: #162c48; border: 1px solid #9fb9d8; border-radius: 9px; background: #fbfdff; }
.exercise-notes .exercise-editable:focus,
.exercise-inline-answer:focus { outline: 3px solid rgba(28, 112, 210, .22); border-color: #1c70d2; }

.exercise-admin-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 16px;
    padding: 12px 15px;
    color: #633a00;
    font-weight: 800;
    border: 1px solid #d39a29;
    border-radius: 11px;
    background: #fff7dc;
}
.exercise-card--solution { border-color: #d3b365; }
.exercise-card--solution > header { background: #fff7df; }
.exercise-set-header--solution { background: linear-gradient(135deg, #684500, #c48b18); }
.exercise-warning { margin: -6px 0 20px; padding: 14px 18px; border-left: 4px solid #d69310; background: #fff7dd; }
.exercise-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 6px 0 24px; }
.exercise-empty { padding: 48px 30px; text-align: center; border: 1px dashed #9bb9dc; border-radius: 18px; background: #f5f9ff; }
.exercise-empty > span { color: #1762b8; font-size: 24px; font-weight: 900; }

@media (max-width: 720px) {
    .exercise-hero,
    .exercise-set-header { align-items: flex-start; flex-direction: column; padding: 22px; }
    .exercise-progress { width: 100%; }
    .learning-field-grid,
    .exercise-set-grid { grid-template-columns: 1fr; }
    .exercise-admin-bar { align-items: stretch; flex-direction: column; }
    .exercise-actions { align-items: stretch; flex-direction: column; }
    .exercise-statement { grid-template-columns: 1fr 1fr; }
    .exercise-statement > span { grid-column: 1 / -1; }
    .exercise-answer-grid { grid-template-columns: 1fr; }
    .exercise-binary { grid-template-columns: 1fr 1fr; }
    .exercise-binary legend { grid-column: 1 / -1; }
}

@media print {
    .xp-titlebar,
    .xp-toolbar,
    .xp-taskbar,
    .exercise-admin-bar,
    .exercise-actions { display: none !important; }
    .xp-window,
    .xp-window__body { position: static !important; width: auto !important; height: auto !important; overflow: visible !important; box-shadow: none !important; }
    .exercise-card { break-inside: avoid; box-shadow: none; }
}

/* DAA Exercises 1.2.1: Teilfragen, direkte Lösungen, Punkte und Noten */
.exercise-task-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 13px 22px;
    border-top: 1px solid #d9e6f4;
    border-bottom: 1px solid #d9e6f4;
    background: #f6f9fc;
}
.exercise-task-toolbar > strong {
    margin-left: auto;
    color: #294d73;
    font-size: 13px;
}
.exercise-unit-shell {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 8px;
}
.exercise-unit-shell > .exercise-field { height: 100%; }
.exercise-unit-feedback {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 8px;
    padding: 7px 8px;
    border: 1px solid #c8d7e5;
    border-radius: 7px;
    background: #f7fafd;
    color: #4d647c;
    font-size: 12px;
}
.exercise-unit-feedback__score {
    min-width: 82px;
    margin-right: auto;
    color: #24496f;
}
.exercise-unit-feedback__button {
    min-height: 30px;
    padding: 4px 9px;
    border: 1px solid #a8bbce;
    border-radius: 6px;
    background: #fff;
    color: #284863;
    cursor: pointer;
    font: inherit;
    font-weight: 800;
}
.exercise-unit-feedback__button:hover,
.exercise-unit-feedback__button:focus-visible { border-color: #3679ba; outline: none; }
.exercise-unit-feedback.is-correct {
    border-color: #58a56b;
    background: #eaf8ed;
}
.exercise-unit-feedback.is-incorrect {
    border-color: #d06a70;
    background: #fdebed;
}
.exercise-unit-feedback__button--correct.is-selected {
    border-color: #126c2c;
    background: #18883a;
    color: #fff;
}
.exercise-unit-feedback__button--incorrect.is-selected {
    border-color: #a51e25;
    background: #c52c34;
    color: #fff;
}
.exercise-answer-is-correct {
    border-color: #18883a !important;
    box-shadow: 0 0 0 2px rgba(24, 136, 58, .16) !important;
}
.exercise-answer-is-incorrect {
    border-color: #c52c34 !important;
    box-shadow: 0 0 0 2px rgba(197, 44, 52, .15) !important;
}
tr.exercise-unit-is-correct > td { background-color: #f0faf2; }
tr.exercise-unit-is-incorrect > td { background-color: #fff1f2; }
.exercise-statement.exercise-unit-is-correct,
fieldset.exercise-unit-is-correct { border-color: #58a56b; background: #f0faf2; }
.exercise-statement.exercise-unit-is-incorrect,
fieldset.exercise-unit-is-incorrect { border-color: #d06a70; background: #fff1f2; }
.exercise-solution-review {
    margin: 16px 22px;
    border: 2px solid #d3b365;
    border-radius: 10px;
    background: #fffaf0;
    overflow: hidden;
}
.exercise-solution-review[hidden] { display: none; }
.exercise-solution-review > h3 {
    margin: 0;
    padding: 11px 15px;
    color: #5f470b;
    background: #fff0c1;
    font-size: 16px;
}
.exercise-solution-review__content { padding: 15px; }
.exercise-solution-review__content > :first-child { margin-top: 0; }
.exercise-solution-review__content > :last-child { margin-bottom: 0; }
.exercise-result {
    margin: 18px 0 24px;
    padding: 20px;
    border: 2px solid #8ba5c2;
    border-radius: 12px;
    background: linear-gradient(180deg, #f7fbff, #edf5fc);
}
.exercise-result.is-complete { border-color: #3679ba; }
.exercise-result__heading { display: flex; align-items: center; gap: 18px; }
.exercise-result__heading span {
    color: #52708f;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.exercise-result__heading h2 { margin: 2px 0 0; color: #17395f; }
.exercise-result__heading > strong {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin-left: auto;
    border-radius: 50%;
    background: #286fad;
    color: #fff;
    font-size: 28px;
}
.exercise-result__bar {
    height: 12px;
    margin: 14px 0;
    border: 1px solid #a7bdd3;
    border-radius: 999px;
    background: #fff;
    overflow: hidden;
}
.exercise-result__bar > span {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, #c52c34 0 30%, #e4a325 50%, #18883a 100%);
    transition: width .2s ease;
}
.exercise-result dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0; }
.exercise-result dl > div { padding: 10px 12px; border: 1px solid #c9d8e7; border-radius: 8px; background: #fff; }
.exercise-result dt { color: #5a7088; font-size: 12px; font-weight: 800; text-transform: uppercase; }
.exercise-result dd { margin: 3px 0 0; color: #17395f; font-size: 20px; font-weight: 900; }
.exercise-result__hint { margin: 14px 0 0; color: #5a7088; font-size: 13px; }
@media (max-width: 700px) {
    .exercise-task-toolbar { align-items: stretch; flex-direction: column; }
    .exercise-task-toolbar > strong { margin: 0; }
    .exercise-unit-feedback { align-items: stretch; flex-direction: column; }
    .exercise-unit-feedback__score { margin: 0; }
    .exercise-result dl { grid-template-columns: 1fr; }
}
@media print {
    .exercise-task-toolbar,
    .exercise-unit-feedback { display: none !important; }
    .exercise-answer-is-correct,
    .exercise-answer-is-incorrect { box-shadow: none !important; }
}

/* DAA LF01 Autokorrektur 1.0.0 */
.exercise-unit-feedback__check {
    min-height: 32px;
    padding: 5px 12px;
    border: 1px solid #236aa5;
    border-radius: 6px;
    background: #286fad;
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-weight: 900;
}
.exercise-unit-feedback__check:hover,
.exercise-unit-feedback__check:focus-visible {
    border-color: #164d7d;
    background: #1f6098;
    outline: 2px solid rgba(31, 109, 170, .2);
}
.exercise-unit-feedback__check:disabled { cursor: wait; opacity: .7; }
.exercise-unit-feedback__status {
    flex-basis: 100%;
    min-height: 1.35em;
    color: #38556f;
    font-weight: 800;
}
.exercise-unit-feedback.is-correct .exercise-unit-feedback__status { color: #126c2c; }
.exercise-unit-feedback.is-incorrect .exercise-unit-feedback__status { color: #a51e25; }
@media (max-width: 700px) {
    .exercise-unit-feedback__check,
    .exercise-unit-feedback__solution { width: 100%; }
}
@media print {
    .exercise-unit-feedback__check,
    .exercise-unit-feedback__status { display: none !important; }
}