:root { font-family: system-ui, sans-serif; color: #14212b; background: #edf3f6; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: linear-gradient(145deg, #0b3d5c 0 32%, #edf3f6 32%); }
.app { width: min(680px, 100%); margin: auto; padding: 48px 20px; }
header { color: white; margin-bottom: 28px; }
.eyebrow { display: flex; align-items: center; gap: 9px; color: #7ee0c3; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #7ee0c3; color: #0b3d5c; font-size: 1.1rem; animation: brand-pulse 3s ease-in-out infinite; }
.connection { display: inline-block; padding: 4px 9px; border-radius: 20px; background: #d7f8ea; color: #145e48; font-size: .75rem; font-weight: 800; }
.connection.offline { background: #ffe4e1; color: #8b3730; }
.header-tools { display: flex; align-items: center; gap: 8px; }
.theme-toggle { width: 32px; height: 32px; padding: 0; border: 1px solid #ffffff65; border-radius: 50%; background: transparent; color: white; text-align: center; }
h1 { font-size: clamp(2rem, 8vw, 3.4rem); line-height: 1; margin: 10px 0 24px; }
.progress { height: 8px; background: #ffffff35; border-radius: 8px; overflow: hidden; }
.progress span { display: block; width: 0; height: 100%; background: #7ee0c3; transition: width .3s; }
#progress-text { font-size: .9rem; }
.install { width: auto; padding: 10px 16px; color: white; border-color: #7ee0c3; background: transparent; font-weight: 700; }
.install:hover { background: #ffffff18; border-color: white; }
.card { background: white; border-radius: 20px; padding: clamp(22px, 5vw, 38px); box-shadow: 0 18px 50px #092f4730; animation: card-enter .28s ease-out; }
.topic { color: #28735f; font-weight: 750; }
.level { display: inline-block; margin-left: 6px; padding: 3px 7px; border-radius: 12px; font-size: .7rem; vertical-align: middle; }
.level-1 { background: #ffe4e1; color: #8b3730; }
.level-2 { background: #e8f3f8; color: #0b3d5c; }
.level-3 { background: #f3edff; color: #593a87; }
.question-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.question-actions { display: flex; gap: 7px; }
.question-actions .favorite { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
.favorite { width: 38px; height: 38px; padding: 0; border-radius: 50%; color: #8a9297; text-align: center; }
.favorite.active { color: #b87800; border-color: #e6a43a; background: #fff4d8; }
.favorite-button { border-color: #e6a43a; background: #fff8e8; }
.question-head .topic { margin: 0; }
.leave { width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: #edf3f6; color: #60717c; font-size: 1.5rem; line-height: 1; text-align: center; }
.leave:hover { background: #dce8ed; color: #0b3d5c; }
h2 { margin: 8px 0 24px; }
.choices { display: grid; gap: 12px; }
button { width: 100%; padding: 15px 18px; border: 2px solid #d8e3e8; border-radius: 12px; background: white; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: transform .16s ease, border-color .16s ease, background-color .16s ease; }
button:hover { border-color: #28735f; transform: translateY(-1px); }
button:active { transform: scale(.99); }
button[data-choice] { display: flex; align-items: center; gap: 12px; }
kbd { min-width: 25px; padding: 3px 6px; border: 1px solid #b9c8cf; border-radius: 5px; background: #edf3f6; color: #51636d; font: 700 .75rem system-ui; text-align: center; }
.shortcuts { margin: 16px 0 0; color: #74848c; font-size: .75rem; text-align: center; }
.check-choices { display: grid; gap: 10px; }
.input-hint { margin: 0 0 12px; color: #60717c; font-size: .85rem; }
.check-choices label { display: flex; align-items: center; gap: 12px; padding: 14px; border: 2px solid #d8e3e8; border-radius: 12px; cursor: pointer; }
.check-choices input { width: 20px; height: 20px; accent-color: #28735f; }
.short-answer { width: 100%; margin: 8px 0 4px; padding: 14px; border: 2px solid #d8e3e8; border-radius: 10px; background: transparent; color: inherit; font: inherit; }
.matching { display: grid; gap: 12px; }
.matching-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 12px; padding: 9px; border: 2px solid transparent; border-radius: 11px; }
.matching-term { min-width: 0; overflow-wrap: anywhere; }
.matching select { width: 100%; min-width: 0; max-width: 100%; padding: 11px; border: 2px solid #d8e3e8; border-radius: 9px; background: inherit; color: inherit; font: inherit; font-size: 16px; }
.matching-picker-trigger { display: none; width: 100%; min-width: 0; max-width: 100%; padding: 11px 12px; border: 2px solid var(--stroke); text-align: left; }
.matching-picker-trigger span, .matching-picker-trigger b { display: block; }.matching-picker-trigger span { min-width: 0; color: var(--text-3); overflow-wrap: anywhere; }.matching-picker-trigger b { margin-top: 4px; color: var(--cyan); font-size: .68rem; }
.matching-picker-trigger.has-value span { color: var(--text-1); }.matching-picker-trigger.invalid { border-color: var(--red); box-shadow: 0 0 0 3px #ff4d4d18; }
.matching-validation { margin: 10px 0; padding: 10px; border: 1px solid #ff4d4d55; border-radius: 9px; background: #ff4d4d10; color: var(--red); font-size: .8rem; }
.matching-validation[hidden] { display: none; }
.matching-picker-dialog { width: min(620px, calc(100vw - 24px)); max-width: none; max-height: min(82dvh, 760px); margin: auto; padding: 0; overflow: hidden; border: 1px solid #18e3ff55; border-radius: 18px; background: #151210; color: var(--text-1); box-shadow: 0 28px 80px #000d, 0 0 30px #18e3ff16; }
.matching-picker-dialog::backdrop { background: #000b; backdrop-filter: blur(5px); }
.matching-picker-dialog > section { display: grid; grid-template-rows: auto auto minmax(0, 1fr); max-height: min(82dvh, 760px); padding: 16px; }
.matching-picker-dialog header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid #ffffff14; }.matching-picker-dialog header p { margin: 0; color: var(--cyan); font: 800 .65rem "JetBrains Mono", monospace; letter-spacing: .12em; }.matching-picker-dialog header h2 { margin: 3px 0 0; font-size: 1.15rem; }
.matching-picker-close { display: grid; place-items: center; width: 42px; min-width: 42px; height: 42px; min-height: 0; padding: 0; font-size: 1.35rem; }
#matching-picker-term { margin: 12px 0; color: var(--text-2); font-weight: 800; line-height: 1.4; overflow-wrap: anywhere; }
.matching-picker-options { display: grid; gap: 8px; overflow-y: auto; overscroll-behavior: contain; padding: 2px 2px 8px; }
.matching-picker-options button { width: 100%; min-height: 54px; padding: 12px 13px; border: 1px solid #ffffff1c; background: var(--surface); color: var(--text-1); font-size: 16px; line-height: 1.35; text-align: left; white-space: normal; overflow-wrap: anywhere; }
.matching-picker-options button.selected { border-color: var(--cyan); background: #18e3ff12; box-shadow: inset 3px 0 var(--cyan); }
.matching-item .missed-answer { grid-column: 1 / -1; }
.ordering { display: grid; gap: 9px; padding: 0; list-style: none; counter-reset: order; }
.ordering li { display: grid; grid-template-columns: 1fr 40px 40px; align-items: center; gap: 6px; padding: 10px 10px 10px 14px; border: 2px solid #d8e3e8; border-radius: 10px; counter-increment: order; }
.ordering li span::before { content: counter(order) '. '; color: #28735f; font-weight: 750; }
.ordering li button { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 8px; text-align: center; font-size: 1.15rem; line-height: 1; }
button.correct { background: #dcf7eb; border-color: #1a8a68; animation: correct-pop .35s ease-out; }
button.wrong { background: #ffe4e1; border-color: #c84b40; animation: wrong-shake .32s ease-out; }
button.missed-correct { background: #fff0d5; border-color: #e69a2f; }
.check-choices label.correct, .matching-item.correct, .ordering li.correct, .short-answer.correct { background: #dcf7eb; border-color: #1a8a68; }
.check-choices label.wrong, .matching-item.wrong, .ordering li.wrong, .short-answer.wrong { background: #ffe4e1; border-color: #c84b40; }
.check-choices label.missed-correct { background: #fff0d5; border-color: #e69a2f; }
.missed-answer { display: block; grid-column: 1 / -1; margin-top: 4px; color: #a45f00; font-weight: 700; }
button.next { margin-top: 18px; background: #0b3d5c; color: white; border: 0; text-align: center; font-weight: 700; }
.submit-answer { margin-top: 18px; background: #0b3d5c; color: white; border: 0; text-align: center; font-weight: 700; }
.topic-button { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.topic-button:not(:has(.pictogram)) { grid-template-columns: minmax(0, 1fr) auto; }
.topic-button span { color: #60717c; font-size: .85rem; text-align: right; }
.pictogram { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #0b3d5c12; color: #0b3d5c; }
.pictogram svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.topic-button:disabled { cursor: not-allowed; opacity: .55; }
.category-button { border-left: 5px solid #28735f; }
.mistake-button { border-color: #e6a43a; background: #fff8e8; }
.exam-button { border-color: #0b3d5c; background: #e8f3f8; }
.calculator-button { border-color: #28735f; background: #e9f8f2; }
.recommended-button { border-color: #7b55b7; background: #f3edff; }
.formula-button { border-color: #3977a7; background: #edf7ff; }
.oral-button { border-color: #b2577b; background: #fff0f6; }
.circuit-button { border-color: #cb7626; background: #fff4e9; }
.circuit { width: 100%; margin: 8px 0; color: #60717c; }
.circuit .wire, .circuit .switch-arm, .circuit .battery-long, .circuit .battery-short, .circuit .lamp, .circuit .lamp-mark, .circuit .fuse, .circuit .fuse-wire { fill: none; stroke: currentColor; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; transition: .25s; }
.circuit .contact { fill: currentColor; }
.circuit text { fill: currentColor; font: 18px system-ui; }
.circuit.is-on { color: #c77800; }
.circuit.is-on .switch-arm { transform: rotate(24deg); transform-origin: 250px 70px; }
.circuit.is-on .lamp { fill: #ffe68a; stroke: #c77800; filter: drop-shadow(0 0 14px #ffd84f); }
.circuit.fuse-tripped .fuse-wire { stroke: #c84b40; stroke-dasharray: 8 12; }
.circuit-values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.reset-fuse { margin-top: 10px; border-color: #c84b40; color: #8b3730; text-align: center; }
.circuit-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.circuit-controls label { color: #60717c; font-size: .85rem; }
.circuit-controls strong { float: right; color: #0b3d5c; }
.circuit-controls input { width: 100%; margin-top: 8px; accent-color: #28735f; }
.circuit-values div { padding: 10px; border-radius: 10px; background: #edf5f7; text-align: center; }
.circuit-values strong, .circuit-values span { display: block; }
.circuit-values span { color: #60717c; font-size: .75rem; }
.oral-hint { padding: 16px; border-left: 4px solid #b2577b; background: #fff5f9; color: #6f5260; }
.oral-rating { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.oral-rating button { height: 100%; min-height: 58px; margin-top: 0; text-align: center; }
.formula-grid { display: grid; gap: 12px; margin-top: 20px; }
.formula-grid article { padding: 16px; border-radius: 12px; background: #edf5f7; }
.formula-grid h3 { margin: 0 0 8px; font-size: 1rem; }
.formula-grid strong { color: #0b3d5c; font-size: 1.25rem; }
.formula-grid p { margin: 8px 0 0; color: #60717c; font-size: .88rem; }
.calculation-input { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.calculation-input input { width: 100%; padding: 14px; border: 2px solid #d8e3e8; border-radius: 10px; background: transparent; color: inherit; font: inherit; font-size: 1.2rem; }
.review { display: grid; gap: 10px; }
.review article { padding: 14px; border-left: 4px solid #c84b40; background: #fff3f1; border-radius: 8px; }
.review p { margin-bottom: 0; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0 0 28px; }
.stats div { padding: 14px 8px; border-radius: 12px; background: #edf5f7; text-align: center; }
.stats strong, .stats span { display: block; }
.stats strong { color: #0b3d5c; font-size: 1.5rem; }
.stats span { margin-top: 4px; color: #60717c; font-size: .75rem; }
.exam-plan { margin: 0 0 28px; padding: 16px; border-radius: 12px; background: #edf5f7; }
.exam-plan label { display: block; margin-bottom: 7px; color: #28735f; font-weight: 750; }
.exam-plan input { width: 100%; padding: 10px; border: 1px solid #b9c8cf; border-radius: 8px; background: white; color: inherit; font: inherit; }
.exam-plan p { margin: 10px 0 0; color: #60717c; font-size: .88rem; }
.history-summary { margin: -16px 0 28px; padding: 14px 16px; border: 1px solid #d8e3e8; border-radius: 12px; }
.history-summary h3 { margin: 0 0 8px; color: #0b3d5c; }
.history-summary p { display: inline-block; margin: 0 18px 0 0; color: #60717c; font-size: .85rem; }
.reset { margin-top: 22px; padding: 10px; border: 0; color: #8b3730; text-align: center; text-decoration: underline; }
.data-actions { display: flex; gap: 10px; margin-top: 24px; }
.data-actions button { padding: 10px; text-align: center; font-size: .85rem; }
button:focus-visible { outline: 3px solid #e6a43a; outline-offset: 3px; }
@media (max-width: 520px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .data-actions { flex-direction: column; } }

@media print {
  :root, body { background: white !important; color: black !important; }
  body { min-height: auto; }
  .app { width: 100%; padding: 0; }
  header, .question-head, .print-formulas { display: none !important; }
  .card { padding: 0; box-shadow: none; background: white !important; color: black !important; }
  .formula-grid { grid-template-columns: repeat(2, 1fr); }
  .formula-grid article { break-inside: avoid; border: 1px solid #bbb; background: white !important; }
  .formula-grid strong, .formula-grid p { color: black !important; }
}

[data-theme="dark"] { color-scheme: dark; background: #07141c; }
[data-theme="dark"] body { background: linear-gradient(145deg, #061d2b 0 32%, #07141c 32%); }
[data-theme="dark"] .card { background: #102632; color: #edf5f7; box-shadow: 0 18px 50px #0008; }
[data-theme="dark"] button { background: #173440; color: #edf5f7; border-color: #365361; }
[data-theme="dark"] button:hover { border-color: #7ee0c3; }
[data-theme="dark"] .stats div, [data-theme="dark"] .leave { background: #18333f; }
[data-theme="dark"] .exam-plan, [data-theme="dark"] .exam-plan input { background: #18333f; }
[data-theme="dark"] .exam-plan p { color: #a9bbc3; }
[data-theme="dark"] .history-summary { border-color: #365361; }
[data-theme="dark"] .history-summary h3 { color: #7ee0c3; }
[data-theme="dark"] .history-summary p { color: #a9bbc3; }
[data-theme="dark"] .stats strong { color: #7ee0c3; }
[data-theme="dark"] .stats span, [data-theme="dark"] .topic-button span { color: #a9bbc3; }
[data-theme="dark"] .feedback { background: #193541; }
[data-theme="dark"] button.correct { background: #174d3c; border-color: #42bd91; }
[data-theme="dark"] button.wrong { background: #552b2a; border-color: #dc6b61; }
[data-theme="dark"] button.missed-correct, [data-theme="dark"] .check-choices label.missed-correct { background: #513b17; border-color: #e6a43a; }
[data-theme="dark"] .check-choices label.correct, [data-theme="dark"] .matching-item.correct, [data-theme="dark"] .ordering li.correct, [data-theme="dark"] .short-answer.correct { background: #174d3c; border-color: #42bd91; }
[data-theme="dark"] .check-choices label.wrong, [data-theme="dark"] .matching-item.wrong, [data-theme="dark"] .ordering li.wrong, [data-theme="dark"] .short-answer.wrong { background: #552b2a; border-color: #dc6b61; }
[data-theme="dark"] .missed-answer { color: #ffc665; }
[data-theme="dark"] .exam-button { background: #17394a; }
[data-theme="dark"] .calculator-button { background: #173f34; }
[data-theme="dark"] .recommended-button { background: #382a51; }
[data-theme="dark"] .formula-button { background: #1c374c; }
[data-theme="dark"] .oral-button, [data-theme="dark"] .oral-hint { background: #49283a; color: #f3c7da; }
[data-theme="dark"] .circuit-button { background: #4b321e; }
[data-theme="dark"] .circuit-values div { background: #18333f; }
[data-theme="dark"] .circuit-values span { color: #a9bbc3; }
[data-theme="dark"] .circuit-controls label { color: #a9bbc3; }
[data-theme="dark"] .circuit-controls strong { color: #7ee0c3; }
@media (max-width: 520px) { .circuit-controls { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .circuit-values { grid-template-columns: repeat(2, 1fr); } }
[data-theme="dark"] .formula-grid article { background: #18333f; }
[data-theme="dark"] .formula-grid strong { color: #7ee0c3; }
[data-theme="dark"] .formula-grid p { color: #a9bbc3; }
[data-theme="dark"] .mistake-button, [data-theme="dark"] .network-error { background: #4a3718; color: #ffe3ad; }
[data-theme="dark"] .review article { background: #492727; }
[data-theme="dark"] .favorite-button, [data-theme="dark"] .favorite.active { background: #4a3718; }
[data-theme="dark"] kbd { background: #102632; color: #b8c8cf; border-color: #4a626d; }
[data-theme="dark"] .check-choices label, [data-theme="dark"] .short-answer, [data-theme="dark"] .matching select, [data-theme="dark"] .ordering li { border-color: #365361; }
[data-theme="dark"] .pictogram { background: #7ee0c31c; color: #7ee0c3; }
@media (max-width: 720px) {
  .matching-item { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 11px; border-color: #ffffff12; background: var(--surface-2); }
  .matching-item select { position: absolute; width: 1px; min-width: 0; max-width: 1px; height: 1px; padding: 0; overflow: hidden; border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .matching-picker-trigger { display: block; font-size: 16px; }
  .matching-picker-dialog { width: 100%; max-height: 86dvh; margin: auto 0 0; border-right: 0; border-bottom: 0; border-left: 0; border-radius: 20px 20px 0 0; }
  .matching-picker-dialog > section { max-height: 86dvh; padding: 15px 14px calc(15px + env(safe-area-inset-bottom)); }
}
@media (max-width: 520px) { button { min-height: 48px; } .check-choices label { min-height: 54px; } .matching select, .short-answer { min-height: 48px; } }
.feedback { margin: 20px 0 0; padding: 14px; background: #f1f6f8; border-radius: 10px; }
.network-error { background: #fff3df; color: #704700; }

@keyframes card-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes correct-pop { 50% { transform: scale(1.015); } }
@keyframes wrong-shake { 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
@keyframes brand-pulse { 0%, 100% { box-shadow: 0 0 0 4px #7ee0c320; } 50% { box-shadow: 0 0 0 8px #7ee0c308; } }

@media (max-width: 520px) {
  .topic-button { grid-template-columns: 34px minmax(0, 1fr); }
  .topic-button:not(:has(.pictogram)) { grid-template-columns: minmax(0, 1fr); }
  .topic-button > span:last-child { grid-column: 2; text-align: left; }
  .topic-button:not(:has(.pictogram)) > span:last-child { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Startseite und Designstudie */
.welcome { text-align: center; }
.welcome .topic { margin-top: 0; }
.welcome h2 { max-width: 520px; margin-inline: auto; font-size: clamp(1.7rem, 6vw, 2.5rem); }
.welcome-copy { max-width: 510px; margin: -8px auto 28px; color: #60717c; line-height: 1.55; }
.welcome-visual { position: relative; display: grid; place-items: center; width: 126px; height: 126px; margin: 0 auto 20px; }
.welcome-bolt { z-index: 2; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 24px; background: #0b3d5c; color: #7ee0c3; font-size: 2.25rem; box-shadow: 0 12px 30px #0b3d5c35; animation: welcome-float 2.4s ease-in-out infinite; }
.welcome-logo {
  z-index: 2;
  display: block;
  width: 84px;
  height: 84px;
  border-radius: 22px;
  object-fit: contain;
  filter: drop-shadow(0 12px 22px #0006);
  animation: welcome-float 2.4s ease-in-out infinite;
}
.orbit { position: absolute; border: 2px solid #28735f55; border-radius: 50%; animation: orbit-spin 7s linear infinite; }
.orbit::after { content: ''; position: absolute; top: -5px; left: 50%; width: 9px; height: 9px; border-radius: 50%; background: #e6a43a; }
.orbit-one { inset: 4px; }
.orbit-two { inset: 17px; animation-direction: reverse; animation-duration: 5s; }
.design-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0 22px; }
.design-choice { display: grid; justify-items: center; gap: 5px; padding: 12px 8px; text-align: center; }
.design-choice small { color: #60717c; font-size: .72rem; }
.design-choice.is-selected { border-color: #28735f; box-shadow: 0 0 0 3px #28735f22; }
.design-preview { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; font-size: 1.4rem; }
.preview-werkstatt { background: #0b3d5c; color: #7ee0c3; }
.preview-pruefbuch { background: #eee6d3; color: #25364a; border: 1px solid #bcae91; }
.preview-highvoltage { background: #171717; color: #f6dc35; border-radius: 50%; }

/* Design 2: ruhiges Prüfungsbuch */
[data-design="pruefbuch"] body { background: linear-gradient(150deg, #25364a 0 28%, #f2ede2 28%); }
[data-design="pruefbuch"] .card { border-radius: 8px; box-shadow: 0 12px 35px #25364a22; }
[data-design="pruefbuch"] .brand-mark, [data-design="pruefbuch"] .progress span { background: #d7bd78; color: #25364a; }
[data-design="pruefbuch"] .topic, [data-design="pruefbuch"] .stats strong, [data-design="pruefbuch"] .formula-grid strong { color: #536a54; }
[data-design="pruefbuch"] button.next, [data-design="pruefbuch"] .submit-answer { background: #25364a; }
[data-design="pruefbuch"] .pictogram { background: #536a5418; color: #536a54; border-radius: 4px; }

/* Design 3: High Voltage */
[data-design="highvoltage"] body { background: linear-gradient(145deg, #151515 0 34%, #282828 34%); }
[data-design="highvoltage"] header { color: #fff; }
[data-design="highvoltage"] .eyebrow { color: #f6dc35; }
[data-design="highvoltage"] .card { border: 1px solid #f6dc3540; border-radius: 6px; box-shadow: 10px 10px 0 #f6dc3525; }
[data-design="highvoltage"] .brand-mark, [data-design="highvoltage"] .progress span { background: #f6dc35; color: #151515; }
[data-design="highvoltage"] .topic, [data-design="highvoltage"] .stats strong, [data-design="highvoltage"] .formula-grid strong { color: #c09b00; }
[data-design="highvoltage"] button.next, [data-design="highvoltage"] .submit-answer { background: #171717; color: #f6dc35; border: 2px solid #f6dc35; }
[data-design="highvoltage"] .pictogram { background: #f6dc3520; color: #c09b00; border-radius: 50%; }
[data-design="highvoltage"] .category-button { border-left-color: #f6dc35; }

@keyframes welcome-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-7px) rotate(2deg); } }
@keyframes orbit-spin { to { transform: rotate(360deg); } }
@media (max-width: 520px) { .design-grid { grid-template-columns: 1fr; } .design-choice { grid-template-columns: 50px 1fr; justify-items: start; text-align: left; } .design-choice small { grid-column: 2; } }

/* Designstudie 2026: warmes Werkstatt-Interface */
:root {
  color-scheme: dark;
  --bg: #1e1a17;
  --surface: #2a2521;
  --surface-2: #332d28;
  --stroke: #41392f;
  --cyan: #18e3ff;
  --orange: #ff7a29;
  --green: #34d07a;
  --red: #ff4d4d;
  --text-1: #f8f5f2;
  --text-2: #cbc0b3;
  --text-3: #aa9d8d;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  background: #131010;
  color: var(--text-1);
}
body, [data-theme="dark"] body, [data-theme="light"] body,
[data-design="pruefbuch"] body, [data-design="highvoltage"] body {
  background: radial-gradient(circle at 12% 8%, #18e3ff0d, transparent 38%), radial-gradient(circle at 88% 92%, #ff7a290d, transparent 38%), #131010;
  color: var(--text-1);
}
.app { width: min(820px, 100%); min-height: 100dvh; padding: 32px 20px 104px; }
.app-header { margin: 0 0 18px; padding-top: calc(44px + env(safe-area-inset-top)); color: var(--text-1); }
.brand-line {
  position: fixed;
  z-index: 30;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  min-height: calc(44px + env(safe-area-inset-top));
  padding: calc(3px + env(safe-area-inset-top)) max(20px, calc((100vw - 780px) / 2)) 3px;
  border-bottom: 1px solid #ffffff12;
  background: #100e0df2;
  box-shadow: 0 12px 30px #0007;
  backdrop-filter: blur(16px);
}
.brand-home { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 2px 0; border: 0; background: transparent; color: var(--text-1); text-align: left; caret-color: transparent; }
.brand-home::before, .brand-home::after { content: none !important; display: none !important; animation: none !important; }
.brand-home:hover { transform: none; color: var(--text-1); }
.brand-home > strong { color: var(--yellow); font: 900 1rem "JetBrains Mono", monospace; letter-spacing: .04em; }
.brand-name { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.brand-logo-mark { position: relative; display: grid; place-items: center; flex: none; width: 25px; height: 25px; overflow: hidden; }
.brand-logo-mark > b { color: var(--cyan); font: 900 1.42rem/1 "JetBrains Mono", monospace; }
.brand-logo-mark img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.brand-name strong { color: var(--text-1); font: 900 1rem "JetBrains Mono", monospace; letter-spacing: .04em; }
.brand-tagline {
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--text-3);
  font-size: .66rem;
  line-height: 1;
  white-space: nowrap !important;
}
.brand-tagline b { color: var(--cyan); font-size: .74rem; }
.brand-home > span { color: var(--text-3); font-size: .72rem; white-space: nowrap; }
.brand-home > span b { color: var(--cyan); font-size: .84rem; }
.eyebrow { margin: 0; color: var(--text-1); letter-spacing: .02em; text-transform: none; font-size: .92rem; }
.brand-dot { color: var(--cyan); }
.brand-mark, [data-design="pruefbuch"] .brand-mark, [data-design="highvoltage"] .brand-mark {
  width: 36px; height: 36px; border-radius: 11px; background: linear-gradient(135deg, var(--cyan), #0bafc9); color: #0b0a09;
  box-shadow: 0 0 18px #18e3ff45; animation: brand-pulse-new 3s ease-in-out infinite;
}
.header-tools { margin: 0; }
.connection { background: #34d07a1f; border: 1px solid #34d07a55; color: var(--green); }
.connection.checking { background: #ffffff0a; border-color: #ffffff25; color: var(--text-3); }
.connection.offline { background: #ff4d4d1a; border-color: #ff4d4d55; color: #ff8585; }
.theme-toggle { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #ffffff12; border-radius: 11px; background: var(--surface); color: var(--text-2); }
.app-header h1 { margin: 25px 0 14px; font-size: clamp(1.65rem, 6vw, 2.75rem); letter-spacing: -.025em; line-height: 1.08; }
.progress { height: 8px; background: #ffffff14; }
.progress span, [data-design="pruefbuch"] .progress span, [data-design="highvoltage"] .progress span { background: linear-gradient(90deg, #0bafc9, var(--cyan)); }
#progress-text { margin: 9px 0 0; color: var(--text-3); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .78rem; }
.install { margin-top: 12px; border: 1px solid #18e3ff55; border-radius: 10px; color: var(--cyan); }
.card, [data-theme="dark"] .card, [data-design="pruefbuch"] .card, [data-design="highvoltage"] .card {
  padding: clamp(20px, 5vw, 36px); border: 1px solid #ffffff12; border-radius: 22px; background: var(--bg); color: var(--text-1);
  box-shadow: 0 32px 70px -32px #000, 0 0 0 1px #0003; animation: card-enter .28s ease-out;
}
h2 { letter-spacing: -.015em; }
h3 { color: var(--text-2); }
.topic, [data-design="pruefbuch"] .topic, [data-design="highvoltage"] .topic {
  color: var(--cyan); font-size: .7rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
}
button, [data-theme="dark"] button {
  border: 1.5px solid var(--stroke); border-radius: 14px; background: var(--surface); color: var(--text-1);
  transition: transform .15s, border-color .15s, background .15s;
}
button:hover, [data-theme="dark"] button:hover { border-color: #18e3ff88; transform: translateY(-1px); }
button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
button.next, .submit-answer, [data-design="pruefbuch"] button.next, [data-design="pruefbuch"] .submit-answer,
[data-design="highvoltage"] button.next, [data-design="highvoltage"] .submit-answer {
  min-height: 50px; border: 0; border-radius: 12px; background: linear-gradient(135deg, var(--orange), #e85f0c); color: #1a0d02;
  box-shadow: 0 8px 18px -8px #ff7a29cc; font-weight: 800;
}
.leave, [data-theme="dark"] .leave { width: 44px; min-width: 44px; height: 44px; min-height: 44px; background: var(--surface); color: var(--text-2); border: 1px solid #ffffff12; }
.choices { gap: 10px; }
.topic-button { min-height: 70px; }
.topic-button span, [data-theme="dark"] .topic-button span { color: var(--text-3); }
.pictogram, [data-theme="dark"] .pictogram, [data-design="pruefbuch"] .pictogram, [data-design="highvoltage"] .pictogram {
  background: var(--surface-2); color: var(--cyan); border: 1px solid #ffffff10; border-radius: 10px;
}
.category-button { border-left: 4px solid var(--cyan); }
.recommended-button { border-color: #18e3ff55; background: #18e3ff0b; }
.exam-button { border-color: #ff7a2966; background: #ff7a290b; }
.mistake-button, .favorite-button { border-color: #ff7a294d; background: #ff7a2908; }
.calculator-button, .formula-button, .oral-button, .circuit-button { background: var(--surface); }
.stats { gap: 10px; }
.stats div, [data-theme="dark"] .stats div { border: 1px solid #ffffff0e; border-radius: 14px; background: var(--surface); }
.stats strong, [data-theme="dark"] .stats strong, [data-design="pruefbuch"] .stats strong, [data-design="highvoltage"] .stats strong {
  color: var(--cyan); font-family: "JetBrains Mono", ui-monospace, monospace; text-shadow: 0 0 10px #18e3ff55;
}
.stats span, [data-theme="dark"] .stats span { color: var(--text-3); }
.exam-plan, [data-theme="dark"] .exam-plan, .formula-grid article, [data-theme="dark"] .formula-grid article,
.circuit-values div, [data-theme="dark"] .circuit-values div { background: var(--surface); border: 1px solid #ffffff0e; }
.exam-plan input, [data-theme="dark"] .exam-plan input, .short-answer, .matching select, .calculation-input input {
  border-color: var(--stroke); background: #151210; color: var(--text-1);
}
.check-choices label, .ordering li, [data-theme="dark"] .check-choices label, [data-theme="dark"] .ordering li { border-color: var(--stroke); background: var(--surface); }
.check-choices input { accent-color: var(--cyan); }
kbd, [data-theme="dark"] kbd { background: var(--surface-2); border-color: var(--stroke); color: var(--text-2); }
button.correct, .check-choices label.correct, .matching-item.correct, .ordering li.correct, .short-answer.correct,
[data-theme="dark"] button.correct, [data-theme="dark"] .check-choices label.correct, [data-theme="dark"] .matching-item.correct, [data-theme="dark"] .ordering li.correct, [data-theme="dark"] .short-answer.correct { background: #34d07a1a; border-color: var(--green); }
button.wrong, .check-choices label.wrong, .matching-item.wrong, .ordering li.wrong, .short-answer.wrong,
[data-theme="dark"] button.wrong, [data-theme="dark"] .check-choices label.wrong, [data-theme="dark"] .matching-item.wrong, [data-theme="dark"] .ordering li.wrong, [data-theme="dark"] .short-answer.wrong { background: #ff4d4d1a; border-color: var(--red); }
button.missed-correct, .check-choices label.missed-correct, [data-theme="dark"] button.missed-correct, [data-theme="dark"] .check-choices label.missed-correct { background: #ff7a291a; border-color: var(--orange); }
.feedback, [data-theme="dark"] .feedback { background: var(--surface-2); color: var(--text-2); border: 1px solid #ffffff0e; }
.level { border: 1px solid currentColor; background: transparent; }
.level-1 { color: #ff7777; }.level-2 { color: var(--cyan); }.level-3 { color: #bc9cff; }
.welcome-visual { margin-top: 10px; }
.welcome-bolt { border-radius: 22px; background: linear-gradient(135deg, var(--cyan), #0bafc9); color: #0b0a09; box-shadow: 0 0 30px #18e3ff45; }
.orbit { border-color: #18e3ff35; }.orbit::after { background: var(--orange); }
.welcome-copy { color: var(--text-2); }
.welcome-readout { display: flex; align-items: center; gap: 14px; max-width: 450px; margin: 0 auto 24px; padding: 13px; border: 1px solid var(--stroke); border-radius: 14px; background: var(--surface); text-align: left; }
.welcome-readout .lcd { padding: 9px; border: 1px solid var(--stroke); border-radius: 9px; background: #151210; color: var(--cyan); font: 800 1rem "JetBrains Mono", monospace; text-shadow: 0 0 10px #18e3ff88; }
.welcome-readout strong, .welcome-readout small { display: block; }.welcome-readout small { margin-top: 3px; color: var(--text-3); }
.anonymous-stat-notice {
  max-width: 570px;
  margin: 22px auto 0;
  padding-top: 15px;
  border-top: 1px solid #ffffff12;
  color: var(--text-3);
  font-size: .7rem;
  line-height: 1.55;
  text-align: left;
}
.welcome-install {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px 18px;
  max-width: 570px;
  margin: 0 auto 22px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid #18e3ff66;
  border-radius: 18px;
  background: linear-gradient(135deg, #0c2d35e8, #201c19 72%);
  box-shadow: 0 15px 35px -24px #18e3ff, inset 3px 0 0 var(--cyan);
  text-align: left;
}
.welcome-install[hidden] { display: none; }
.welcome-install-icon { position: relative; display: grid; place-items: center; width: 60px; height: 60px; border: 1px solid #18e3ff55; border-radius: 15px; background: #07161b; }
.welcome-install-icon img { width: 46px; height: 46px; object-fit: contain; border-radius: 10px; }
.welcome-install-icon span { position: absolute; right: -5px; bottom: -5px; display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: var(--orange); color: #160b03; font-weight: 900; box-shadow: 0 0 13px #ff7a2988; }
.welcome-install-copy .topic { margin: 0 0 3px; }
.welcome-install-copy h3 { margin: 0 0 4px; color: var(--text-1); font-size: 1.05rem; }
.welcome-install-copy > p:last-child { margin: 0; color: var(--text-2); font-size: .78rem; line-height: 1.45; }
.welcome-install-action { min-height: 46px; padding: 10px 15px; border: 0; background: linear-gradient(135deg, var(--cyan), #0bafc9); color: #061013; font-weight: 850; white-space: nowrap; box-shadow: 0 8px 20px -10px var(--cyan); }
.welcome-install-later { grid-column: 2 / -1; justify-self: start; min-height: 32px; padding: 4px 0; border: 0; background: transparent; color: var(--text-3); font-size: .72rem; text-decoration: underline; }
.welcome-install-later:hover { border: 0; background: transparent; transform: none; color: var(--text-1); }
.install-guide-dialog { width: min(560px, calc(100vw - 24px)); max-width: none; max-height: 88dvh; margin: auto; padding: 0; overflow: hidden; border: 1px solid #18e3ff55; border-radius: 20px; background: #1d1916; color: var(--text-1); box-shadow: 0 30px 90px #000d, 0 0 35px #18e3ff18; }
.install-guide-dialog::backdrop { background: #000c; backdrop-filter: blur(6px); }
.install-guide-dialog > section { max-height: 88dvh; padding: 19px; overflow-y: auto; }
.install-guide-dialog header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding-bottom: 13px; border-bottom: 1px solid #ffffff14; }
.install-guide-dialog header h2 { margin: 3px 0 0; }.install-guide-dialog header .topic { margin: 0; }
.install-guide-close { flex: none; display: grid; place-items: center; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; font-size: 1.45rem; }
.install-guide-dialog ol { display: grid; gap: 10px; margin: 18px 0; padding: 0; list-style: none; }
.install-guide-dialog li { display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 11px; padding: 12px; border: 1px solid #ffffff12; border-radius: 13px; background: var(--surface); }
.install-guide-dialog li > b { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--cyan); border-radius: 50%; color: var(--cyan); font-family: "JetBrains Mono", monospace; }
.install-guide-dialog li strong, .install-guide-dialog li span { display: block; }
.install-guide-dialog li span { margin-top: 3px; color: var(--text-2); font-size: .82rem; line-height: 1.4; }
.install-guide-dialog li i { color: var(--cyan); font-style: normal; font-weight: 900; }
.install-guide-note { color: var(--text-3); font-size: .75rem; line-height: 1.45; }
.install-guide-done { width: 100%; }
@media (max-width: 620px) {
  .welcome-install { grid-template-columns: auto 1fr; gap: 12px; padding: 15px; }
  .welcome-install-action { grid-column: 1 / -1; width: 100%; }
  .welcome-install-later { grid-column: 1 / -1; justify-self: center; }
  .install-guide-dialog { width: 100%; max-height: 91dvh; margin: auto 0 0; border-right: 0; border-bottom: 0; border-left: 0; border-radius: 22px 22px 0 0; }
}
.bottom-nav { position: fixed; z-index: 20; left: 50%; bottom: 12px; display: grid; grid-template-columns: repeat(4, 1fr); width: min(500px, calc(100% - 24px)); padding: 7px; transform: translateX(-50%); border: 1px solid #ffffff12; border-radius: 18px; background: #1e1a17eb; box-shadow: 0 16px 40px #0009; backdrop-filter: blur(14px); }
.bottom-nav .nav-item { display: grid; justify-items: center; gap: 2px; min-height: 52px; padding: 6px; border: 0; background: transparent; color: var(--text-3); text-align: center; }
.bottom-nav .nav-item:hover, .bottom-nav .nav-item.active { color: var(--cyan); background: #18e3ff0b; transform: none; }
.bottom-nav .nav-item > span { font-size: 1.25rem; line-height: 1; }.bottom-nav small { font-size: .66rem; font-weight: 700; }
@keyframes brand-pulse-new { 50% { box-shadow: 0 0 25px #18e3ff70; } }
@media (min-width: 760px) { .card { padding: 38px; }.bottom-nav { bottom: 20px; }.topic-button { grid-template-columns: 40px minmax(0, 1fr) auto; }.pictogram { width: 40px; height: 40px; } }
@media (max-width: 520px) { .app { padding: 20px 14px 92px; }.app-header h1 { margin-top: 20px; }.card { border-radius: 18px; }.stats { grid-template-columns: repeat(2, 1fr); }.connection { font-size: 0; width: 11px; height: 11px; padding: 0; border-radius: 50%; }.theme-toggle { width: 34px; height: 34px; }.shortcuts { display: none; } }

/* Statistik */
.stats-overview { margin-bottom: 18px; }
.stat-feature { display: grid; grid-template-columns: 1fr 132px; align-items: center; gap: 20px; margin: 0 0 14px; padding: 20px; border: 1px solid #ffffff0e; border-radius: 18px; background: var(--surface); }
.stat-feature h3 { margin: 4px 0 6px; color: var(--text-1); font-size: 1.25rem; }
.stat-feature p { margin: 0; color: var(--text-3); line-height: 1.45; }
.readiness-ring { --value: 0; display: grid; place-content: center; width: 112px; height: 112px; margin: auto; border-radius: 50%; background: radial-gradient(circle, var(--surface) 58%, transparent 60%), conic-gradient(var(--cyan) calc(var(--value) * 1%), #ffffff12 0); box-shadow: 0 0 24px #18e3ff18; text-align: center; }
.readiness-ring strong { color: var(--cyan); font: 800 1.35rem "JetBrains Mono", monospace; text-shadow: 0 0 10px #18e3ff66; }
.readiness-ring span { color: var(--text-3); font-size: .68rem; }
.ko-stat { padding: 17px; border: 1px solid #ff4d4d3d; border-radius: 16px; background: #ff4d4d0a; }
.ko-stat > div:first-child { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ko-stat > div > strong { color: #ff8585; font-family: "JetBrains Mono", monospace; }
.ko-stat p { margin: 8px 0 0; color: var(--text-3); font-size: .8rem; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 28px 0 12px; }
.section-head h2 { margin: 0; font-size: 1.05rem; }
.section-head > span { color: var(--text-3); font: .72rem "JetBrains Mono", monospace; }
.topic-stat-list { display: grid; gap: 9px; }
.topic-stat-list article { padding: 14px; border: 1px solid #ffffff0e; border-radius: 14px; background: var(--surface); }
.topic-stat-list article > div:first-child { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.topic-stat-list strong { font-size: .88rem; }
.topic-stat-list article span { color: var(--text-3); font-size: .72rem; text-align: right; }
.stat-track { height: 7px; overflow: hidden; border-radius: 99px; background: #ffffff12; }
.stat-track > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #0bafc9, var(--cyan)); }
.ko-stat .stat-track { margin-top: 12px; }.ko-stat .stat-track > span { background: linear-gradient(90deg, #e85f0c, var(--orange)); }
.exam-stat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.exam-stat div { padding: 16px 10px; border: 1px solid #ffffff0e; border-radius: 14px; background: var(--surface); text-align: center; }
.exam-stat strong, .exam-stat span { display: block; }.exam-stat strong { color: var(--cyan); font: 800 1.2rem "JetBrains Mono", monospace; }.exam-stat span { margin-top: 5px; color: var(--text-3); font-size: .7rem; }
.empty-stat { padding: 16px; border: 1px dashed var(--stroke); border-radius: 14px; color: var(--text-3); line-height: 1.5; }
@media (max-width: 560px) { .stat-feature { grid-template-columns: 1fr; text-align: center; }.topic-stat-list article > div:first-child { display: grid; }.topic-stat-list article span { text-align: left; }.exam-stat { grid-template-columns: 1fr; } }

/* Komponenten und Mikrointeraktionen der Designstudie */
button { position: relative; overflow: hidden; }
.button-ripple { position: absolute; z-index: 0; width: 10px; height: 10px; border-radius: 50%; background: #ffffff3d; pointer-events: none; transform: translate(-50%, -50%) scale(0); animation: button-ripple .52s ease-out; }
button > * { position: relative; z-index: 1; }
.dashboard-readouts strong { transition: color .2s, text-shadow .2s; }
.training-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.training-grid .recommended-button { grid-column: 1 / -1; min-height: 90px; border-left: 4px solid var(--cyan); background: linear-gradient(120deg, #18e3ff12, var(--surface) 55%); }
.training-grid .recommended-button::after { content: '→'; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--orange); color: #1a0d02; font-weight: 900; }
.module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.module-grid .topic-button { grid-template-columns: 38px 1fr; align-content: center; min-height: 108px; padding: 14px; }
.module-grid .topic-button > span:last-child { grid-column: 2; text-align: left; }
.module-grid .topic-button:not(:has(.pictogram)) { grid-template-columns: 1fr; }
.module-grid .topic-button:not(:has(.pictogram)) > span:last-child { grid-column: 1; }
.module-grid .topic-button:hover .pictogram, .tools-grid .topic-button:hover .pictogram { color: var(--orange); transform: rotate(-4deg) scale(1.06); }
.pictogram { transition: transform .2s ease, color .2s ease; }
.tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.quiz-top { padding-bottom: 12px; border-bottom: 1px solid #ffffff0b; }
.category-pill { display: inline-flex; align-items: center; width: fit-content; max-width: calc(100% - 92px); margin: 0; padding: 6px 10px; border: 1px solid #18e3ff4d; border-radius: 999px; background: #18e3ff10; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.category-pill .level { flex: none; }
@media (max-width: 640px) {
  .quiz-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }
  .quiz-top .category-pill {
    grid-column: 1 / -1;
    width: auto;
    max-width: none;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }
  .quiz-top .question-actions {
    grid-column: 1 / -1;
    justify-self: end;
  }
}
.quiz-question { margin: 20px 0; font-size: clamp(1.15rem, 4.5vw, 1.55rem); line-height: 1.42; }
#question-input .choices { gap: 10px; }
#question-input button[data-choice] { min-height: 56px; border-width: 1.5px; }
#question-input button[data-choice] kbd { width: 28px; height: 28px; padding: 5px; border: 0; border-radius: 8px; background: var(--surface-2); font-family: "JetBrains Mono", monospace; }
#question-input button[data-choice].correct kbd { background: var(--green); color: #0b1a10; }
#question-input button[data-choice].wrong kbd { background: var(--red); color: #1a0b0b; }
#question-input button[data-choice].missed-correct kbd { background: var(--orange); color: #1a0d02; }
.gauge-wrap { position: relative; width: 170px; height: 108px; margin: auto; }
.gauge-wrap svg { width: 100%; overflow: visible; }
.gauge-base, .gauge-progress { fill: none; stroke-width: 15; stroke-linecap: round; }
.gauge-base { stroke: #ffffff12; }
.gauge-progress { stroke: url('#gauge-gradient'); stroke: var(--cyan); stroke-dasharray: var(--value) 100; filter: drop-shadow(0 0 5px #18e3ff77); animation: gauge-in 1s ease-out both; }
.gauge-value { position: absolute; inset: auto 0 0; display: grid; justify-items: center; }
.gauge-value strong { color: var(--cyan); font: 800 1.65rem "JetBrains Mono", monospace; text-shadow: 0 0 10px #18e3ff66; }
.gauge-value span { color: var(--text-3); font-size: .68rem; }
.badges-row { display: flex; gap: 8px; margin: 14px -2px 4px; padding: 2px 2px 8px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.badges-row::-webkit-scrollbar { display: none; }
.badge-chip { flex: none; padding: 8px 12px; border: 1px solid #ffffff10; border-radius: 999px; background: var(--surface); color: var(--text-2); font-size: .74rem; font-weight: 700; scroll-snap-align: start; }
.cert-list { display: grid; gap: 9px; margin-top: 12px; }
.cert-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px; border: 1px solid #ffffff0e; border-radius: 14px; background: var(--surface); }
.cert-icon { display: grid; place-items: center; width: 46px; height: 42px; border-radius: 10px; background: var(--surface-2); font: 800 .78rem "JetBrains Mono", monospace; }
.cert-icon.pass { color: var(--green); }.cert-icon.fail { color: var(--red); }
.cert-body strong, .cert-body span { display: block; }.cert-body strong { font-size: .8rem; }.cert-body span { margin-top: 3px; color: var(--text-3); font-size: .69rem; }
.cert-badge { padding: 4px 8px; border-radius: 999px; font-size: .64rem; font-weight: 800; white-space: nowrap; }
.cert-badge.pass { background: #34d07a1c; color: var(--green); }.cert-badge.fail { background: #ff4d4d1c; color: var(--red); }
.ordering li { transition: transform .2s ease, border-color .2s; }
.favorite.active { animation: favorite-pop .35s ease-out; }
@keyframes button-ripple { to { opacity: 0; transform: translate(-50%, -50%) scale(24); } }
@keyframes gauge-in { from { stroke-dasharray: 0 100; } }
@keyframes favorite-pop { 50% { transform: scale(1.22) rotate(-8deg); } }
@media (max-width: 560px) { .training-grid, .tools-grid { grid-template-columns: 1fr; }.training-grid .recommended-button { grid-column: auto; }.module-grid .topic-button { min-height: 102px; }.cert-row { grid-template-columns: 46px minmax(0, 1fr); }.cert-badge { grid-column: 2; width: fit-content; }.stat-feature .gauge-wrap { order: -1; } }
@media (max-width: 560px) { .training-filter-options { grid-template-columns: 1fr; }.training-filter-options button { min-height: 58px; } }
@media (prefers-reduced-motion: reduce) { .button-ripple { display: none; }.gauge-progress { animation: none; } }

/* Lesbarkeit, kräftigere Hauptseite und aussagekräftige Fortschrittsbalken */
.tools-grid .topic-button {
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  column-gap: 12px;
  row-gap: 3px;
  min-height: 92px;
  padding: 15px;
}
.tools-grid .topic-button .pictogram { grid-column: 1; grid-row: 1 / 3; }
.tools-grid .topic-button strong { grid-column: 2; grid-row: 1; min-width: 0; line-height: 1.3; }
.tools-grid .topic-button > span:last-child { grid-column: 2; grid-row: 2; min-width: 0; text-align: left; line-height: 1.25; overflow-wrap: anywhere; }
.tools-grid .circuit-button { background: linear-gradient(135deg, #693817, #3d261a); border-color: #ff7a296b; }
.tools-grid .oral-button { background: linear-gradient(135deg, #67294d, #3e2335); border-color: #ec5fa16b; }
.tools-grid .calculator-button { background: linear-gradient(135deg, #075943, #173b32); border-color: #34d07a66; }
.tools-grid .formula-button { background: linear-gradient(135deg, #145078, #203a4d); border-color: #18bfff66; }
.tools-grid .level-training-button { background: linear-gradient(135deg, #074d58, #17363d); border-color: #18e3ff73; }
.tools-grid .variant-training-button { background: linear-gradient(135deg, #49366d, #2d263e); border-color: #a77cff73; }
.filter-trigger { position: relative; padding-right: 45px !important; }
.filter-trigger::after { content: "⌄"; position: absolute; right: 17px; top: 50%; color: var(--cyan); font-size: 1.35rem; transform: translateY(-55%); transition: transform .2s ease; }
.filter-trigger.expanded::after { transform: translateY(-35%) rotate(180deg); }
.training-filter-options { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 10px; border: 1px solid #18e3ff45; border-radius: 14px; background: #121312; box-shadow: inset 0 0 30px #18e3ff08; animation: filter-options-open .2s ease-out both; }
.training-filter-options[hidden] { display: none; }
.training-filter-options button { display: grid; gap: 4px; min-height: 70px; padding: 11px; border: 1px solid #3a403d; border-radius: 10px; background: #22231f; color: var(--text); text-align: left; }
.training-filter-options button:hover, .training-filter-options button:focus-visible { border-color: var(--cyan); background: #19343a; }
.training-filter-options button:disabled { opacity: .4; }
.training-filter-options strong { font-size: .78rem; }.training-filter-options span { color: var(--muted); font-size: .65rem; }
@keyframes filter-options-open { from { opacity: 0; transform: translateY(-7px); } }
.training-grid .recommended-button { background: linear-gradient(120deg, #07566a, #22363a 58%, #2a2521); border-color: #18e3ff8c; }
.training-grid .exam-button { background: linear-gradient(130deg, #713313, #3c291e); border-color: #ff7a298c; }
.training-grid .mistake-button { background: linear-gradient(130deg, #683b14, #382c20); }
.training-grid .uncertain-button { background: linear-gradient(130deg, #4c356f, #30283d); border-color: #a77cff70; }
.training-grid .uncertain-button:disabled { opacity: .56; }
.training-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.training-grid .recommended-button { grid-column: auto; }
.training-grid .topic-button { min-height: 108px; }
.training-grid .mistake-button:disabled { opacity: .56; }
@media (max-width: 420px) { .training-grid .topic-button { min-height: 118px; padding: 12px; }.training-grid .topic-button strong { font-size: .82rem; }.training-grid .topic-button > span:last-child { font-size: .68rem; } }
.module-grid .category-button { background: linear-gradient(140deg, #263a3b, #2a2521 65%); border-color: #18e3ff45; border-left-color: var(--cyan); }
.dashboard-readouts div { background: linear-gradient(145deg, #33302b, #26221f); border-color: #ffffff18; }
.dashboard-readouts strong { color: #38e7ff; }
.exam-plan { background: linear-gradient(130deg, #302923, #25211e); border-color: #ff7a2938; }

.stat-track {
  --percent: 0;
  position: relative;
  height: 24px;
  overflow: hidden;
  border: 1px solid #ffffff12;
  border-radius: 999px;
  background: linear-gradient(90deg, #3b2425 0 40%, #443820 40% 70%, #1d4438 70% 100%);
  box-shadow: inset 0 2px 6px #0007;
}
.stat-track::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), #ffffff12 calc(10% - 1px) 10%); pointer-events: none; }
.stat-track > span {
  position: absolute;
  z-index: 1;
  inset: 0 auto 0 0;
  width: calc(var(--percent) * 1%);
  min-width: 0;
  background: linear-gradient(90deg, #ff4d4d 0%, #ff7a29 45%, #ffd34e 68%, #34d07a 100%);
  box-shadow: 0 0 12px #ff7a2955;
  transition: width .7s cubic-bezier(.2,.8,.2,1);
}
.stat-track > b { position: absolute; z-index: 3; inset: 0 10px 0 auto; display: flex; align-items: center; color: #fff; font: 800 .68rem "JetBrains Mono", monospace; text-shadow: 0 1px 3px #000; }
.stat-track.is-empty { background: #151210; border-style: dashed; }
.stat-track.is-empty > span { width: 0; box-shadow: none; }
.stat-track.is-empty > b { color: var(--text-3); text-shadow: none; }
.ko-stat .stat-track { height: 26px; margin-top: 12px; }
.ko-stat .stat-track > span { background: linear-gradient(90deg, #ff4d4d, #ff7a29 55%, #34d07a); }
.topic-stat-list article { border-color: #ffffff16; background: linear-gradient(135deg, #2d2824, #25211e); }
.topic-stat-list article > div:first-child { margin-bottom: 8px; }
.topic-stat-list article > div:first-child > span { white-space: nowrap; }
.gauge-progress { stroke: url(#readiness-gradient); }
.stat-feature { background: linear-gradient(130deg, #302923, #25211e); border-color: #18e3ff26; }
@media (max-width: 640px) {
  .tools-grid .topic-button { min-height: 88px; }
  .tools-grid .topic-button > span:last-child { font-size: .78rem; }
}
@media (max-width: 390px) {
  .module-grid { grid-template-columns: 1fr; }
  .tools-grid .topic-button { grid-template-columns: 38px minmax(0, 1fr); padding: 13px; }
  .topic-stat-list article > div:first-child > span { white-space: normal; }
}

/* Präzise, animierte Statistik-Füllstände */
.stat-feature { grid-template-columns: minmax(0, 1fr) 190px; overflow: hidden; }
.gauge-wrap { width: 180px; max-width: 100%; }
.gauge-marker-halo { fill: #fff3; transform-box: fill-box; transform-origin: center; animation: marker-pulse 1.8s ease-in-out infinite; }
.gauge-marker { fill: #fff; stroke: var(--orange); stroke-width: 4; filter: drop-shadow(0 0 7px #ff7a29); }
.stat-track { background: #151210; }
.stat-track::after { background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), #ffffff0b calc(10% - 1px) 10%); }
.stat-track > span { width: calc(var(--percent) * 1%); animation: stat-fill .9s cubic-bezier(.16,.8,.25,1) both; }
.stat-track.rate-low > span { background: linear-gradient(90deg, #c52f3c, #ff5665); box-shadow: 0 0 14px #ff4d4d99; }
.stat-track.rate-mid > span { background: linear-gradient(90deg, #e88816, #ffe05c); box-shadow: 0 0 14px #ffd34e99; }
.stat-track.rate-high > span { background: linear-gradient(90deg, #11a966, #43ed91); box-shadow: 0 0 14px #34d07aaa; }
.stat-track.is-empty > span { animation: none; }
.stat-track > b { color: #fff; }
@keyframes stat-fill { from { width: 0; } to { width: calc(var(--percent) * 1%); } }
@keyframes marker-pulse { 50% { opacity: .35; transform: scale(1.55); } }
@media (max-width: 560px) { .stat-feature { grid-template-columns: 1fr; }.gauge-wrap { width: 190px; } }
@media (prefers-reduced-motion: reduce) { .stat-track > span, .gauge-marker-halo { animation: none; } }

/* WATT Start, Lernen, Profil und stabile Fortschrittsanimation */
.stat-track > span, .stat-track.rate-low > span, .stat-track.rate-mid > span, .stat-track.rate-high > span { width: 0; animation: none; transition: width .9s cubic-bezier(.16,.8,.25,1); }
.bars-ready .stat-track:not(.is-empty) > span { width: calc(var(--percent) * 1%); }
.gauge-marker-halo { animation: none; }
.gauge-traveller { filter: drop-shadow(0 0 6px #ff7a29); }
.level-overview { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.level-card { padding: 15px; border: 1px solid #ffffff12; border-radius: 16px; background: linear-gradient(135deg, #2d2824, #25211e); }
.level-card > div:first-child { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 11px; }
.level-card > div:first-child strong { font-family: "JetBrains Mono", monospace; }
.level-card p { margin: 8px 0 0; color: var(--text-3); font-size: .75rem; }
.level-card-2 { border-color: #18e3ff35; }.level-card-2 > div:first-child strong { color: var(--cyan); }
.level-card-3 { border-color: #bc9cff35; }.level-card-3 > div:first-child strong { color: #bc9cff; }
.start-dashboard > h2 { margin-bottom: 4px; font-size: clamp(1.7rem, 6vw, 2.4rem); }
.start-welcome-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
.start-welcome-head h2 { margin: 0 0 5px; font-size: clamp(1.7rem, 6vw, 2.4rem); line-height: 1.08; }
.start-welcome-head .start-lead { margin: 0; }
.start-help-button { display: inline-flex; align-items: center; gap: 7px; width: auto; min-width: 44px; min-height: 44px; padding: 7px 10px; border-color: #18e3ff45; background: #18e3ff0b; color: var(--cyan); font-size: .72rem; white-space: nowrap; }
.start-help-button span { display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid currentColor; border-radius: 50%; font: 800 .7rem "JetBrains Mono", monospace; }
.start-lead { margin: 0 0 20px; color: var(--text-2); }
.countdown-chip { display: flex; align-items: center; gap: 14px; padding: 13px; border: 1px solid #ffffff12; border-radius: 16px; background: var(--surface); }
.countdown-chip .lcd { min-width: 54px; padding: 10px; border: 1px solid var(--stroke); border-radius: 10px; background: #151210; color: var(--cyan); font: 800 1.35rem "JetBrains Mono", monospace; text-align: center; text-shadow: 0 0 10px #18e3ff88; }
.countdown-chip small, .countdown-chip strong { display: block; }.countdown-chip small { margin-bottom: 3px; color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; }
.start-help-dialog { width: min(720px, calc(100vw - 24px)); max-width: none; max-height: min(88dvh, 860px); margin: auto; padding: 0; overflow: hidden; border: 1px solid #18e3ff55; border-radius: 20px; background: #1d1916; color: var(--text-1); box-shadow: 0 30px 90px #000d, 0 0 35px #18e3ff14; }
.start-help-dialog::backdrop { background: #000c; backdrop-filter: blur(6px); }
.start-help-dialog > section { display: grid; grid-template-rows: auto minmax(0, 1fr); max-height: min(88dvh, 860px); padding: 18px; }
.start-help-dialog header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid #ffffff14; }
.start-help-dialog header h2 { margin: 3px 0 0; }.start-help-dialog header .topic { margin: 0; }
.start-help-close { display: grid; place-items: center; width: 42px; min-width: 42px; height: 42px; min-height: 0; padding: 0; font-size: 1.35rem; }
.start-help-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 14px 2px 4px; overflow-y: auto; overscroll-behavior: contain; }
.start-help-content article { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid #ffffff12; border-radius: 13px; background: var(--surface-2); }
.start-help-content article > b { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #18e3ff55; border-radius: 9px; color: var(--cyan); font: 800 .78rem "JetBrains Mono", monospace; }
.start-help-content h3 { margin: 1px 0 5px; font-size: .84rem; }.start-help-content p { margin: 0; color: var(--text-3); font-size: .72rem; line-height: 1.45; }
@media (max-width: 620px) {
  .start-welcome-head { align-items: flex-start; }
  .start-help-button { padding: 7px; }.start-help-button > span + * { display: none; }
  .start-help-dialog { width: 100%; max-height: 90dvh; margin: auto 0 0; border-right: 0; border-bottom: 0; border-left: 0; border-radius: 22px 22px 0 0; }
  .start-help-dialog > section { max-height: 90dvh; padding: 15px 13px calc(15px + env(safe-area-inset-bottom)); }
  .start-help-content { grid-template-columns: 1fr; }
}
.overall-progress { margin: 18px 0; }.overall-progress > div:first-child { display: flex; justify-content: space-between; margin-bottom: 8px; }.overall-progress span { color: var(--cyan); font: 800 .85rem "JetBrains Mono", monospace; }
.start-progress { height: 9px; overflow: hidden; border-radius: 999px; background: #ffffff12; }.start-progress i { display: block; width: calc(var(--percent) * 1%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #0bafc9, var(--cyan), var(--green)); animation: start-fill .9s ease-out both; }
.continue-card { position: relative; overflow: hidden; margin: 20px 0; padding: 20px; border: 1px solid #18e3ff3d; border-radius: 18px; background: linear-gradient(125deg, #0b5362, #263234 52%, #2a2521); }
.continue-card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(var(--cyan), var(--orange)); }.continue-card h3 { margin: 7px 0; color: #fff; }.continue-card p:not(.topic) { color: var(--text-2); }.continue-card .next { width: auto; min-width: 180px; }
.start-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.start-actions button { display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 2px 12px; min-height: 82px; }.start-actions .pictogram { grid-row: 1 / 3; }.start-actions strong, .start-actions > button > span:last-child { grid-column: 2; text-align: left; }.start-actions > button > span:last-child { color: var(--text-3); font-size: .76rem; }
.brand-claim { margin: 22px 0 0; padding: 13px; border-left: 3px solid var(--orange); color: var(--text-2); font-style: normal; font-weight: 700; }
.profile-hero { display: flex; align-items: center; gap: 15px; margin: 14px 0 22px; }.profile-logo { display: grid; place-items: center; width: 66px; height: 66px; border-radius: 18px; background: linear-gradient(135deg, var(--cyan), #0bafc9); color: #0b0a09; font: 900 2rem "JetBrains Mono", monospace; box-shadow: 0 0 24px #18e3ff3d; }.profile-hero h2 { margin: 0 0 3px; }.profile-hero strong { color: var(--cyan); font-size: .85rem; }
.profile-form { padding: 17px; border: 1px solid #ffffff12; border-radius: 16px; background: var(--surface); }.profile-form > label { font-weight: 800; }.profile-form > p { margin: 4px 0 12px; color: var(--text-3); font-size: .8rem; }.profile-form > div { display: grid; grid-template-columns: 1fr auto; gap: 9px; }.profile-form input { min-width: 0; padding: 13px; border: 1px solid var(--stroke); border-radius: 10px; background: #151210; color: var(--text-1); font: inherit; }.profile-form .submit-answer { width: auto; min-width: 110px; margin: 0; }
.brand-story { margin-top: 22px; padding: 20px; border: 1px solid #ff7a2938; border-radius: 18px; background: linear-gradient(135deg, #35281f, #26221f); }.brand-story h3 { color: var(--orange); }.brand-story p { color: var(--text-2); line-height: 1.55; }.brand-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0; }.brand-steps span { display: flex; align-items: center; gap: 9px; padding: 10px; border-radius: 11px; background: #15121088; font-size: .8rem; }.brand-steps b { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 7px; background: var(--cyan); color: #111; }
@keyframes start-fill { from { width: 0; } }
@media (max-width: 560px) { .level-overview, .start-actions { grid-template-columns: 1fr; }.profile-form > div { grid-template-columns: 1fr; }.profile-form .submit-answer { width: 100%; }.brand-steps { grid-template-columns: 1fr; } }

/* Korrekturen: Training-Kacheln, Balken und dauerhaft lebendige Startseite */
.training-grid > .topic-button {
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  column-gap: 12px;
  row-gap: 3px;
  min-height: 86px;
}
.training-grid > .topic-button .pictogram { grid-column: 1; grid-row: 1 / 3; }
.training-grid > .topic-button strong { grid-column: 2; grid-row: 1; min-width: 0; line-height: 1.25; }
.training-grid > .topic-button > span:last-child { grid-column: 2; grid-row: 2; min-width: 0; text-align: left; line-height: 1.25; overflow-wrap: anywhere; }
.training-grid .recommended-button { position: relative; padding-right: 56px; }
.training-grid .recommended-button::after { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); }
.training-grid .recommended-button .pictogram { grid-row: 1 / 3; }
.stat-track > span { transition: width .8s cubic-bezier(.16,.8,.25,1) !important; }
.bars-ready .stat-track:not(.is-empty) > span { width: auto; }
body:has(.start-dashboard) .app-header { margin-bottom: 18px; }
.start-dashboard { position: relative; isolation: isolate; }
.start-dashboard::before { content: ''; position: absolute; z-index: -1; top: -24px; left: -18px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, #18e3ff20, transparent 68%); animation: watt-ambient 7s ease-in-out infinite alternate; pointer-events: none; }
.continue-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 25%, #ffffff12 45%, transparent 65%); transform: translateX(-140%); animation: watt-scan 4.8s ease-in-out infinite; pointer-events: none; }
.start-progress i { position: relative; overflow: hidden; }
.start-progress i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, #fff8, transparent); transform: translateX(-100%); animation: watt-charge 2.2s linear infinite; }
.brand-claim { animation: claim-glow 3.2s ease-in-out infinite; }
@keyframes watt-ambient { to { transform: translate(420px, 170px) scale(1.35); opacity: .55; } }
@keyframes watt-scan { 0%, 35% { transform: translateX(-140%); } 70%, 100% { transform: translateX(140%); } }
@keyframes watt-charge { to { transform: translateX(100%); } }
@keyframes claim-glow { 50% { border-left-color: var(--cyan); color: var(--text-1); } }
@media (max-width: 560px) { .training-grid > .topic-button { min-height: 82px; }.training-grid .recommended-button { padding-right: 50px; } }
@media (prefers-reduced-motion: reduce) { .start-dashboard::before, .continue-card::after, .start-progress i::after, .brand-claim { animation: none; } }

/* Direkte Balkenfüllung – unabhängig von inneren Elementen */
@property --fill {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
.stat-track {
  --fill: 0%;
  transition: --fill .85s cubic-bezier(.16,.8,.25,1);
  background: linear-gradient(90deg, #11a966 0 var(--fill), #151210 var(--fill) 100%);
}
.stat-track.rate-low { background: linear-gradient(90deg, #c52f3c 0, #ff5665 var(--fill), #151210 var(--fill) 100%); box-shadow: inset 0 0 8px #0008, 0 0 10px #ff4d4d24; }
.stat-track.rate-mid { background: linear-gradient(90deg, #e88816 0, #ffe05c var(--fill), #151210 var(--fill) 100%); box-shadow: inset 0 0 8px #0008, 0 0 10px #ffd34e24; }
.stat-track.rate-high { background: linear-gradient(90deg, #11a966 0, #43ed91 var(--fill), #151210 var(--fill) 100%); box-shadow: inset 0 0 8px #0008, 0 0 10px #34d07a28; }
.stat-track.is-empty { --fill: 0% !important; background: #151210; }
.stat-track > span { display: none !important; }
@media (prefers-reduced-motion: reduce) { .stat-track { transition: none; } }

/* Eigenständige sichtbare Füllfläche */
.stat-track { background: #151210 !important; }
.stat-track > .stat-fill {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 0;
  display: block;
  height: 100%;
  border-radius: inherit;
  transform-origin: left center;
  animation: visible-stat-fill .85s cubic-bezier(.16,.8,.25,1) both;
}
.stat-track.rate-low > .stat-fill { background: linear-gradient(90deg, #d52f40, #ff6571) !important; box-shadow: 0 0 16px #ff4d4daa; }
.stat-track.rate-mid > .stat-fill { background: linear-gradient(90deg, #ed8c13, #ffe76d) !important; box-shadow: 0 0 16px #ffd34eaa; }
.stat-track.rate-high > .stat-fill { background: linear-gradient(90deg, #0eb66b, #4cff9d) !important; box-shadow: 0 0 16px #34d07abb; }
.stat-track.is-empty > .stat-fill { display: none; }
@keyframes visible-stat-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .stat-track > .stat-fill { animation: none; } }

/* SVG-Füllung verhindert Überschreiben der Balkenfarbe */
.stat-track > .stat-fill-svg {
  position: absolute;
  z-index: 2;
  inset: 0 auto 0 0;
  display: block;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 6px currentColor);
  transform-origin: left center;
  animation: visible-stat-fill .85s cubic-bezier(.16,.8,.25,1) both;
}
.stat-track.rate-low { color: #ff5f6d; }
.stat-track.rate-mid { color: #ffe05c; }
.stat-track.rate-high { color: #43ed91; }
.stat-track::after { z-index: 3; }
.stat-track > b { z-index: 4; }
@media (prefers-reduced-motion: reduce) { .stat-track > .stat-fill-svg { animation: none; } }

/* Native Fortschrittsanzeige: value/max bestimmt die exakte Breite */
.stat-meter { position: relative; height: 24px; margin-top: 10px; color: #43ed91; }
.stat-meter progress { display: block; width: 100%; height: 100%; overflow: hidden; border: 1px solid #ffffff12; border-radius: 999px; background: #151210; accent-color: currentColor; appearance: none; -webkit-appearance: none; }
.stat-meter progress::-webkit-progress-bar { border-radius: 999px; background: #151210; box-shadow: inset 0 2px 6px #0008; }
.stat-meter progress::-webkit-progress-value { border-radius: 999px; background: currentColor; box-shadow: 0 0 14px currentColor; }
.stat-meter progress::-moz-progress-bar { border-radius: 999px; background: currentColor; box-shadow: 0 0 14px currentColor; }
.stat-meter.rate-low { color: #ff5f6d; }.stat-meter.rate-mid { color: #ffe05c; }.stat-meter.rate-high { color: #43ed91; }
.stat-meter.is-empty { color: var(--text-3); }.stat-meter.is-empty progress { border-style: dashed; }
.stat-meter > b { position: absolute; z-index: 2; inset: 0 10px 0 auto; display: flex; align-items: center; color: #fff; font: 800 .68rem "JetBrains Mono", monospace; text-shadow: 0 1px 3px #000; pointer-events: none; }
.stat-meter.is-empty > b { color: var(--text-3); text-shadow: none; }
.ko-stat .stat-meter { height: 26px; }

/* Mobile Bildfragen */
.question-figure { margin: 18px 0 8px; }
.question-image-open { display: block; width: 100%; min-height: 0; padding: 0; overflow: hidden; border: 1px solid #18e3ff45; border-radius: 16px; background: #151210; }
.question-image-open::after { content: '↗ Vergrößern'; position: absolute; z-index: 2; right: 9px; bottom: 9px; padding: 6px 9px; border-radius: 999px; background: #151210df; color: var(--cyan); font-size: .68rem; font-weight: 800; box-shadow: 0 3px 10px #0008; }
.question-image-open img { display: block; width: 100%; max-height: min(46vh, 430px); object-fit: contain; background: #f5f2ed; }
.question-figure figcaption { margin-top: 8px; color: var(--text-3); font-size: .78rem; line-height: 1.4; }
.image-dialog { width: min(960px, 100vw); max-width: none; height: min(900px, 100dvh); max-height: none; margin: auto; padding: 54px 12px 16px; border: 0; background: #0d0b0aeF; color: var(--text-1); }
.image-dialog::backdrop { background: #000d; backdrop-filter: blur(5px); }
.image-dialog-close { position: fixed; z-index: 3; top: max(12px, env(safe-area-inset-top)); right: 14px; display: grid; place-items: center; width: 42px; height: 42px; min-height: 0; padding: 0; border: 1px solid #ffffff26; border-radius: 50%; background: #2a2521; color: #fff; font-size: 1.5rem; }
.image-zoom { display: grid; place-items: center; width: 100%; height: calc(100% - 48px); overflow: auto; overscroll-behavior: contain; touch-action: pinch-zoom pan-x pan-y; }
.image-zoom img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; background: #f5f2ed; }
.image-dialog > p { margin: 10px auto 0; max-width: 760px; color: var(--text-2); font-size: .82rem; text-align: center; }
.placeholder-image-note { margin: 0 0 7px; padding: 6px 9px; border: 1px solid #ff7a2945; border-radius: 9px; background: #ff7a2910; color: var(--orange); font-size: .7rem; font-weight: 750; line-height: 1.35; }
.image-dialog > .placeholder-image-note { color: var(--orange); }
@media (max-width: 560px) { .question-figure { margin-inline: -5px; }.question-image-open img { max-height: 42vh; }.image-dialog { width: 100vw; height: 100dvh; border-radius: 0; } }

/* Einheitliche Leistungsskala: Rot -> Gelb -> Grün */
.start-meter { position: relative; height: 14px; }
.start-meter progress, .stat-meter progress { accent-color: #43ed91; }
.start-meter progress { display: block; width: 100%; height: 100%; overflow: hidden; border: 1px solid #ffffff12; border-radius: 999px; background: #151210; appearance: none; -webkit-appearance: none; }
.start-meter progress::-webkit-progress-bar, .stat-meter progress::-webkit-progress-bar { border-radius: 999px; background: #151210; box-shadow: inset 0 2px 6px #0008; }
.start-meter progress::-webkit-progress-value, .stat-meter progress::-webkit-progress-value {
  border-radius: 999px;
  background-image: linear-gradient(90deg, #ff4d4d 0 50%, #ff9b2f 60%, #ffe05c 70%, #9cdd64 76%, #43ed91 80% 100%);
  background-size: var(--gradient-scale, 100%) 100%;
  background-position: left center;
  background-repeat: no-repeat;
  box-shadow: 0 0 12px #ffb23e55;
}
.start-meter progress::-moz-progress-bar, .stat-meter progress::-moz-progress-bar {
  border-radius: 999px;
  background-image: linear-gradient(90deg, #ff4d4d 0 50%, #ff9b2f 60%, #ffe05c 70%, #9cdd64 76%, #43ed91 80% 100%);
  background-size: var(--gradient-scale, 100%) 100%;
  background-position: left center;
  background-repeat: no-repeat;
}
.pass-mark { position: absolute; z-index: 3; top: -3px; bottom: -3px; width: 2px; transform: translateX(-1px); border-radius: 2px; background: #fff; box-shadow: 0 0 6px #fff; pointer-events: none; }
.pass-mark::after { content: ''; position: absolute; top: -2px; left: 50%; width: 6px; height: 6px; transform: translateX(-50%); border-radius: 50%; background: #fff; }
.stat-meter .pass-mark[style*="100%"] { left: calc(100% - 3px) !important; }
.meter-legend { display: block; margin-top: 6px; color: var(--text-3); font-size: .7rem; }
.profile-exam-date { margin-top: 14px; padding: 17px; border: 1px solid #ff7a2935; border-radius: 16px; background: linear-gradient(135deg, #31271f, #25211e); }
.profile-exam-date > label { display: block; margin-bottom: 9px; color: var(--orange); font-weight: 800; }
.profile-exam-date input { width: 100%; padding: 12px; border: 1px solid var(--stroke); border-radius: 10px; background: #151210; color: var(--text-1); font: inherit; }
.profile-exam-date p { margin: 10px 0 0; color: var(--text-2); font-size: .82rem; }

/* Farbwechsel folgt festen Gesamtwerten, nicht der Länge der Füllfläche */
.scale-red progress::-webkit-progress-value { background: #ff4d57; box-shadow: 0 0 12px #ff4d4d66; }
.scale-warm progress::-webkit-progress-value { background: linear-gradient(90deg, #ff4d57 0 72%, #ff8d32 100%); box-shadow: 0 0 12px #ff6a3866; }
.scale-yellow progress::-webkit-progress-value { background: linear-gradient(90deg, #ff4d57 0 55%, #ff9634 78%, #ffe05c 100%); box-shadow: 0 0 12px #ffc44766; }
.scale-transition progress::-webkit-progress-value { background: linear-gradient(90deg, #ff4d57 0 48%, #ff9b35 68%, #ffe05c 84%, #69e78d 100%); box-shadow: 0 0 12px #9cdf7166; }
.scale-green progress::-webkit-progress-value { background: linear-gradient(90deg, #ff4d57 0 42%, #ff9b35 58%, #ffe05c 72%, #7be28a 86%, #43ed91 100%); box-shadow: 0 0 12px #43ed9177; }
.scale-red progress::-moz-progress-bar { background: #ff4d57; }
.scale-warm progress::-moz-progress-bar { background: linear-gradient(90deg, #ff4d57 0 72%, #ff8d32 100%); }
.scale-yellow progress::-moz-progress-bar { background: linear-gradient(90deg, #ff4d57 0 55%, #ff9634 78%, #ffe05c 100%); }
.scale-transition progress::-moz-progress-bar { background: linear-gradient(90deg, #ff4d57 0 48%, #ff9b35 68%, #ffe05c 84%, #69e78d 100%); }
.scale-green progress::-moz-progress-bar { background: linear-gradient(90deg, #ff4d57 0 42%, #ff9b35 58%, #ffe05c 72%, #7be28a 86%, #43ed91 100%); }

.learning-plan-card { margin: -8px 0 24px; padding: 16px 18px; border: 1px solid #ff7a2945; border-radius: 16px; background: linear-gradient(125deg, #3b2a1d, #292421 62%); }
.learning-plan-card .topic { margin: 0 0 6px; color: var(--orange); }
.learning-plan-card p:last-child { margin: 0; color: var(--text-2); line-height: 1.5; }
.learning-plan-card strong { color: var(--text-1); }
.daily-queue-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 13px; border-top: 1px solid #ffffff14; }
.daily-queue-line span { color: var(--text-3); font-size: .78rem; text-align: right; }
.daily-queue-card .next { width: 100%; margin-top: 13px; }
.confidence-card { margin-top: 14px; padding: 16px; scroll-margin-block: calc(62px + env(safe-area-inset-top)) calc(94px + env(safe-area-inset-bottom)); border: 1px solid #18d7ee55; border-radius: 16px; background: linear-gradient(135deg, #10292c, #211d1a); }
.confidence-card > p { margin: 5px 0 13px; color: var(--text-3); font-size: .84rem; }
.confidence-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.confidence-options button { min-height: 48px; padding: 10px; border-color: #ffffff18; background: var(--surface); text-align: center; }
.confidence-options button[data-confidence="secure"] { color: var(--green); }
.confidence-options button[data-confidence="unsure"] { color: var(--yellow); }
.confidence-options button[data-confidence="guessed"] { color: var(--orange); }
.confidence-options button.selected { border-color: currentColor; box-shadow: 0 0 16px #18d7ee22; }
.confidence-saved { color: var(--cyan) !important; }
.confidence-card .next { width: 100%; }
.retry-card { margin-top: 14px; padding: 16px; scroll-margin-block: calc(62px + env(safe-area-inset-top)) calc(102px + env(safe-area-inset-bottom)); border: 1px solid #ff7a2955; border-radius: 16px; background: linear-gradient(135deg, #332016, #211d1a); }
.retry-card strong { color: var(--orange); }
.retry-card p { margin: 6px 0 0; color: var(--text-3); font-size: .84rem; }
.retry-card .next { width: 100%; }
.session-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 18px 0; }
.session-summary div { padding: 15px 8px; border: 1px solid var(--stroke); border-radius: 14px; background: var(--surface); text-align: center; }
.session-summary strong, .session-summary span { display: block; }
.session-summary strong { color: var(--cyan); font: 700 1.35rem "JetBrains Mono", monospace; }
.session-summary span { margin-top: 5px; color: var(--text-3); font-size: .72rem; }
.confidence-summary { display: flex; flex-wrap: wrap; gap: 8px; }
.confidence-summary span { padding: 7px 10px; border-radius: 999px; background: var(--surface-2); font-size: .78rem; }
.confidence-summary .secure { color: var(--green); }.confidence-summary .unsure { color: var(--yellow); }.confidence-summary .guessed { color: var(--orange); }
.session-insight, .session-recommendation { padding: 14px; border: 1px solid #ffffff12; border-radius: 13px; background: var(--surface-2); color: var(--text-2); }
.session-analysis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 18px 0; }
.session-analysis > div, .session-detail-panel { padding: 15px; border: 1px solid #ffffff12; border-radius: 15px; background: var(--surface-2); }
.session-analysis h3, .session-detail-panel h3 { margin: 3px 0 13px; }
.session-performance-groups { display: grid; gap: 9px; }
.session-performance-groups article { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; align-items: center; }
.session-performance-groups article div { min-width: 0; }.session-performance-groups strong, .session-performance-groups span { display: block; }.session-performance-groups strong { overflow: hidden; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }.session-performance-groups span { margin-top: 2px; color: var(--text-3); font-size: .63rem; }
.session-performance-groups b { color: var(--cyan); font: 800 .74rem "JetBrains Mono", monospace; }
.session-performance-groups progress { grid-column: 1 / -1; width: 100%; height: 7px; overflow: hidden; border: 0; border-radius: 999px; appearance: none; -webkit-appearance: none; }
.session-performance-groups progress::-webkit-progress-bar { background: #151210; }.session-performance-groups progress::-webkit-progress-value { border-radius: 999px; background: linear-gradient(90deg, var(--orange), var(--cyan)); }.session-performance-groups progress::-moz-progress-bar { border-radius: 999px; background: linear-gradient(90deg, var(--orange), var(--cyan)); }
.session-detail-panel { margin: 12px 0; }
.slow-question-list { display: grid; gap: 8px; }.slow-question-list article { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px; border-left: 2px solid var(--orange); background: #15121070; }.slow-question-list b { color: var(--orange); font: 800 .78rem "JetBrains Mono", monospace; }.slow-question-list strong, .slow-question-list span { display: block; }.slow-question-list strong { font-size: .74rem; line-height: 1.35; }.slow-question-list span { margin-top: 3px; color: var(--text-3); font-size: .62rem; line-height: 1.35; }
.uncertain-correct-panel { border-color: #ffe05c35; }.uncertain-correct-panel ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }.uncertain-correct-panel li { padding: 10px; border-left: 2px solid var(--yellow); background: #ffe05c08; }.uncertain-correct-panel li strong, .uncertain-correct-panel li span { display: block; }.uncertain-correct-panel li strong { font-size: .74rem; line-height: 1.35; }.uncertain-correct-panel li span { margin-top: 3px; color: var(--yellow); font-size: .62rem; }
.session-review-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }.session-review-actions:empty { display: none; }.session-review-actions button { width: 100%; border-color: #ff7a2955; background: linear-gradient(135deg, #332016, #211d1a); color: var(--orange); text-align: center; }
.session-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.session-actions button { width: 100%; text-align: center; }
@media (max-width: 620px) { .session-analysis { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .daily-queue-line { align-items: flex-start; flex-direction: column; }.daily-queue-line span { text-align: left; }.confidence-options { grid-template-columns: 1fr; }.session-summary { grid-template-columns: repeat(2, 1fr); }.session-actions, .session-review-actions { grid-template-columns: 1fr; } }
.start-learning-plan { margin: 12px 0 16px; padding: 11px 13px; border: 1px solid #ffffff14; border-radius: 12px; background: #15121070; }
.start-learning-plan p { margin: 0 !important; font-size: .82rem; line-height: 1.48; }
.start-learning-plan strong { color: #fff; }
@media (max-width: 520px) { .dashboard-readouts strong { font-size: 1.2rem; }.learning-plan-card { padding: 14px; } }
.creator-credit { margin: 16px 0 0; color: var(--text-3); font-size: .76rem; text-align: center; }
.creator-credit strong { color: var(--text-2); }
.global-footer { margin: 18px auto 82px; color: var(--text-3); text-align: center; }
.global-footer p { margin: 0 0 10px; font-size: .74rem; }
.global-footer p strong { color: var(--text-2); }
.global-footer > div { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; max-width: 420px; margin: 0 auto; }
.global-footer button { min-height: 44px; padding: 9px 12px; border: 1px solid #ffffff1f; background: transparent; color: var(--text-2); text-align: center; font-size: .76rem; }
.global-footer button:hover { border-color: var(--cyan); color: var(--cyan); }
.daily-plan-mix { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 16px 0 4px; }
.daily-plan-mix span { padding: 10px 7px; border: 1px solid #ffffff12; border-radius: 11px; background: #15121070; color: var(--text-3); text-align: center; font-size: .7rem; }
.daily-plan-mix b { display: block; margin-top: 5px; color: var(--cyan); font: 800 1.05rem "JetBrains Mono", monospace; }
.daily-plan-mix em { display: block; color: var(--text-2); font-style: normal; font-weight: 700; }
.daily-plan-status { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; color: var(--text-2); font-size: .84rem; }
.daily-plan-status strong { color: var(--cyan); }
.daily-plan-progress { height: 9px; margin-top: 7px; overflow: hidden; border-radius: 999px; background: #0d0c0b; box-shadow: inset 0 0 0 1px #ffffff0d; }
.daily-plan-progress i { display: block; width: calc(var(--daily-rate) * 1%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--green)); animation: start-fill .8s ease-out both; }
.daily-plan-legend { margin: 9px 0 0 !important; color: var(--text-3) !important; font-size: .68rem; }
.daily-plan-legend strong { color: var(--text-2); }
.plan-time { margin: .4rem 0 .8rem; color: var(--text-2); }
.plan-time strong { color: var(--text-1); }
.daily-plan-details { margin: .9rem 0 1rem; border-top: 1px solid #ffffff12; }
.daily-plan-details summary { padding: .8rem 0 .35rem; color: var(--cyan); font-weight: 750; cursor: pointer; }
.daily-plan-details[open] summary { margin-bottom: .3rem; }
.learning-plan-focus::after { background: linear-gradient(90deg, transparent, #18e3ff66, #ff7a2966, transparent); }

.learning-path { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: .45rem; align-items: center; margin: .9rem 0 1.1rem; }
.learning-path span { min-width: 0; padding: .65rem .55rem; border: 1px solid #ffffff14; border-radius: 11px; background: #151717; text-align: center; }
.learning-path b, .learning-path small { display: block; }
.learning-path b { font-size: .76rem; }
.learning-path small { margin-top: .2rem; color: var(--text-3); font-size: .6rem; }
.learning-path i { color: var(--text-3); font-style: normal; }
.learning-path .path-new { border-color: #8f999b55; }.learning-path .path-learning { border-color: #18e3ff66; }.learning-path .path-consolidated { border-color: #ffd34e66; }.learning-path .path-secure { border-color: #45e69366; }

.stats-view-switch { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0 0 1rem; padding: 4px; border-radius: 12px; background: #111; }
.stats-view-switch button { min-height: 42px; padding: .55rem 1rem; border: 0; border-radius: 9px; background: transparent; color: var(--text-2); }
.stats-view-switch button.active { background: #1d2b2d; color: var(--cyan); }
.stats-advanced { display: none !important; }
.stats-detailed .stats-advanced { display: grid !important; }
.stats-detailed .section-head { display: flex !important; }
.stat-feature[role="button"] { cursor: pointer; }
.stat-feature[role="button"]:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

.readiness-formula { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin: 1rem 0; }
.readiness-formula span { padding: .9rem; border: 1px solid #ffffff18; border-radius: 12px; background: #151717; }
.readiness-formula b, .readiness-formula strong, .readiness-formula small { display: block; }
.readiness-formula b { color: var(--orange); }.readiness-formula strong { margin: .5rem 0; color: var(--cyan); font-size: 1.35rem; }.readiness-formula small { color: var(--text-3); }

.undo-toast { position: fixed; z-index: 1000; right: 1rem; bottom: calc(92px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 1rem; padding: .75rem .8rem .75rem 1rem; border: 1px solid #18e3ff66; border-radius: 14px; background: #101819f5; box-shadow: 0 12px 35px #000b; color: var(--text-1); }
.undo-toast button { min-height: 42px; padding: .5rem .8rem; border-color: var(--cyan); color: var(--cyan); }

.restart-tour { width: 100%; margin-top: .4rem; }
.onboarding-dialog ol { display: grid; gap: .7rem; margin: 1rem 0 1.25rem; padding: 0; list-style: none; }
.onboarding-dialog li { display: grid; grid-template-columns: 38px 1fr; gap: .7rem; align-items: center; padding: .75rem; border: 1px solid #ffffff14; border-radius: 12px; background: #151717; }
.onboarding-dialog li > b { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--cyan); border-radius: 50%; color: var(--cyan); }
.onboarding-dialog strong, .onboarding-dialog span { display: block; }.onboarding-dialog span { margin-top: .2rem; color: var(--text-2); line-height: 1.4; }
.profile-details { margin-top: 0; }
.profile-data { margin-top: 24px; padding-top: 18px; border-top: 1px solid #ffffff12; }
.profile-data h2 { margin-top: 0; }
.info-page p { color: var(--text-2); line-height: 1.6; }
.contact-note { padding: 14px; border-radius: 12px; background: var(--surface-2); }
.stats-overview { grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); }
.category-stat-list { display: grid; gap: 12px; }
.category-stat-group { overflow: hidden; border: 1px solid #ffffff16; border-radius: 17px; background: linear-gradient(135deg, #2d2824, #25211e); }
.category-stat-toggle { display: block; width: 100%; padding: 16px; border: 0; border-radius: 0; background: transparent; }
.category-stat-toggle:hover { border: 0; background: #18e3ff08; transform: none; }
.category-stat-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-bottom: 10px; }
.category-stat-head strong, .category-stat-head span { display: block; text-align: left; }
.category-stat-head strong { color: var(--text-1); line-height: 1.3; }
.category-stat-head span { margin-top: 4px; color: var(--text-3); font-size: .75rem; }
.category-chevron { color: var(--cyan); font-size: 1.3rem; transition: transform .2s ease; }
.category-stat-group.is-open .category-chevron { transform: rotate(180deg); }
.subcategory-stat-list { gap: 8px; padding: 0 12px 12px; border-top: 1px solid #ffffff0d; }
.subcategory-stat-list[hidden] { display: none; }
.subcategory-stat-list article { margin-top: 10px; background: #17141299; }
@media (max-width: 620px) { .brand-home { align-items: center; flex-direction: row; gap: 6px; }.brand-home > span { line-height: 1; }.brand-logo-mark { width: 22px; height: 22px; }.brand-name strong { font-size: .88rem; }.brand-tagline { font-size: clamp(.48rem, 1.75vw, .62rem); white-space: nowrap !important; }.brand-tagline b { font-size: 1.08em; }.daily-plan-mix { grid-template-columns: repeat(2, 1fr); } }
.app-header .brand-home, [data-theme="dark"] .app-header .brand-home, [data-design="pruefbuch"] .app-header .brand-home, [data-design="highvoltage"] .app-header .brand-home { width: auto; padding: 2px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.app-header .brand-home:hover { border: 0; background: transparent; transform: none; }
.app-header .progress span { box-shadow: 0 0 14px #18e3ffaa; }
.training-grid .recommended-button::after { content: none; display: none; }
.training-grid .recommended-button { padding-right: 15px; border-width: 1px; border-style: solid; }
.module-grid .category-button { border-width: 1px; border-style: solid; }
.training-grid .topic-button, .module-grid .topic-button, .tools-grid .topic-button {
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  column-gap: 12px;
  row-gap: 3px;
  min-height: 92px;
  padding: 15px;
}
.training-grid .topic-button .pictogram, .module-grid .topic-button .pictogram, .tools-grid .topic-button .pictogram { grid-column: 1; grid-row: 1 / 3; animation: learning-icon-idle 3.2s ease-in-out infinite; }
.training-grid .topic-button strong, .module-grid .topic-button strong, .tools-grid .topic-button strong { grid-column: 2; grid-row: 1; min-width: 0; line-height: 1.3; }
.training-grid .topic-button > span:last-child, .module-grid .topic-button > span:last-child, .tools-grid .topic-button > span:last-child { grid-column: 2; grid-row: 2; min-width: 0; text-align: left; line-height: 1.25; overflow-wrap: anywhere; }
.training-grid .topic-button:hover .pictogram, .module-grid .topic-button:hover .pictogram, .tools-grid .topic-button:hover .pictogram { animation: none; color: var(--orange); transform: rotate(-5deg) scale(1.08); }
.training-grid .topic-button:nth-child(2n) .pictogram, .module-grid .topic-button:nth-child(2n) .pictogram, .tools-grid .topic-button:nth-child(2n) .pictogram { animation-delay: -1.6s; }
@keyframes learning-icon-idle { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-2px) rotate(2deg); } }
@media (prefers-reduced-motion: reduce) { .training-grid .topic-button .pictogram, .module-grid .topic-button .pictogram, .tools-grid .topic-button .pictogram { animation: none; } }
.connection {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: .75rem;
  white-space: nowrap;
}
.connection::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 9px currentColor;
}
.profile-exam-date { overflow: hidden; }
.profile-exam-date-control {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--stroke);
  border-radius: 10px;
  background: #151210;
}
.profile-exam-date input {
  display: block;
  box-sizing: border-box;
  width: calc(100% - 2px);
  min-width: 0;
  max-width: calc(100% - 2px);
  margin: 0 1px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  inline-size: calc(100% - 2px);
  min-inline-size: 0;
  max-inline-size: calc(100% - 2px);
  -webkit-appearance: none;
  appearance: none;
  font-size: 16px;
}
@media (max-width: 640px) {
  .training-grid, .module-grid, .tools-grid { grid-template-columns: 1fr !important; }
  .training-grid .topic-button, .module-grid .topic-button, .tools-grid .topic-button {
    min-height: 88px;
    padding: 15px;
  }
}
@media (max-width: 520px) {
  .brand-line { padding-inline: 14px; }
  .connection {
    width: auto;
    height: auto;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: .7rem;
  }
}
.brand-story .creator-credit { padding-top: 14px; border-top: 1px solid #ffffff10; text-align: left; }

/* Unterbrochene Sitzungen und Schnelltraining */
.resume-session-card,
.quick-training-card,
.session-exit-card {
  margin-top: 16px;
  padding: 18px;
  border: 1px solid var(--stroke);
  border-radius: 17px;
  background: linear-gradient(135deg, #24211e, #1c1917);
}
.resume-session-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  border-color: #18e3ff66;
  box-shadow: inset 3px 0 var(--cyan);
}

.diagnostic-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.25rem;
  border: 1px solid rgba(24, 227, 255, .42);
  border-radius: 18px;
  background: linear-gradient(125deg, rgba(10, 80, 91, .42), rgba(37, 33, 31, .94));
}

.diagnostic-card h3 { margin: .25rem 0; }
.diagnostic-card p:last-child { margin-bottom: 0; color: var(--muted); }
.diagnostic-card .next { flex: 0 0 auto; width: auto; margin: 0; }

.learning-status {
  display: flex;
  align-items: center;
  gap: .65rem;
  width: fit-content;
  max-width: 100%;
  margin: -.2rem 0 1rem;
  padding: .48rem .75rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: rgba(10, 13, 14, .72);
  font-size: .78rem;
}
.learning-status b { white-space: nowrap; }
.learning-status span { color: var(--muted); }
.learning-status.status-new { color: #aeb5b6; }
.learning-status.status-learning { color: #18e3ff; }
.learning-status.status-consolidated { color: #ffd34e; }
.learning-status.status-exam-secure { color: #45e693; box-shadow: 0 0 16px rgba(69, 230, 147, .12); }
.learning-status.status-due { color: #ff7a29; }

.learning-state-overview {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .7rem;
  margin: 1rem 0 1.35rem;
}
.learning-state-overview article {
  min-width: 0;
  padding: .9rem;
  border-top: 3px solid currentColor;
  border-radius: 12px;
  background: rgba(255, 255, 255, .035);
}
.learning-state-overview strong, .learning-state-overview span, .learning-state-overview small { display: block; }
.learning-state-overview strong { font: 800 1.4rem var(--mono, monospace); }
.learning-state-overview span { margin: .2rem 0; color: var(--text); font-weight: 750; }
.learning-state-overview small { color: var(--muted); line-height: 1.35; }
.learning-state-overview .status-new { color: #8f999b; }
.learning-state-overview .status-learning { color: #18e3ff; }
.learning-state-overview .status-consolidated { color: #ffd34e; }
.learning-state-overview .status-exam-secure { color: #45e693; }
.learning-state-overview .status-due { color: #ff7a29; }

.diagnostic-result {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid rgba(24, 227, 255, .32);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(10, 65, 77, .3), rgba(255, 255, 255, .025));
}
.diagnostic-result > p { margin: 1rem 0 0; color: var(--muted); line-height: 1.55; }

@media (max-width: 640px) {
  .diagnostic-card { align-items: stretch; flex-direction: column; }
  .diagnostic-card .next { width: 100%; }
  .learning-status { align-items: flex-start; flex-direction: column; gap: .15rem; border-radius: 14px; }
  .learning-state-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .learning-state-overview article:last-child { grid-column: 1 / -1; }
  .learning-path { grid-template-columns: 1fr; }
  .learning-path i { transform: rotate(90deg); text-align: center; }
  .readiness-formula { grid-template-columns: 1fr; }
  .undo-toast { right: .75rem; bottom: calc(86px + env(safe-area-inset-bottom)); left: .75rem; justify-content: space-between; }
}
.resume-session-card h3,
.quick-training-card h3,
.session-exit-card h2 { margin: 5px 0 7px; }
.resume-session-card p,
.quick-training-card p,
.session-exit-card p { margin: 0; color: var(--text-2); line-height: 1.5; }
.resume-session-card .next { width: auto; min-width: 150px; margin: 0; }
.quick-training-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 1fr);
  align-items: center;
  gap: 18px;
}
.quick-training-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.quick-training-actions button { min-height: 46px; }
.defer-question {
  width: auto;
  min-height: 38px;
  padding: 7px 12px;
  border-color: #18e3ff55;
  border-radius: 999px;
  color: var(--cyan);
  font-size: .75rem;
  font-weight: 800;
}
.report-question {
  width: auto;
  min-height: 38px;
  padding: 7px 10px;
  border-color: #ff7a2955;
  border-radius: 999px;
  color: var(--orange);
  font-size: .75rem;
  font-weight: 800;
}
.question-report-dialog {
  width: min(520px, calc(100% - 24px));
  max-height: min(720px, calc(100dvh - 24px));
  padding: 0;
  overflow: auto;
  border: 1px solid #18e3ff55;
  border-radius: 20px;
  background: #211d1a;
  color: var(--text-1);
  box-shadow: 0 28px 80px #000c;
}
.question-report-dialog::backdrop { background: #080706cc; backdrop-filter: blur(5px); }
.question-report-dialog form { display: grid; gap: 15px; padding: 20px; }
.question-report-dialog p { margin: 0; color: var(--text-2); line-height: 1.5; }
.report-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.report-dialog-head h2 { margin: 4px 0 0; }
.report-dialog-close { flex: none; width: 42px; min-height: 42px; padding: 0; font-size: 1.35rem; }
.question-report-dialog label { display: grid; gap: 7px; color: var(--text-2); font-size: .82rem; font-weight: 750; }
.question-report-dialog label small { color: var(--text-3); font-weight: 500; }
.question-report-dialog select,
.question-report-dialog textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--stroke);
  border-radius: 11px;
  background: #151210;
  color: var(--text-1);
  font: inherit;
}
.question-report-dialog textarea { resize: vertical; }
.question-report-dialog .submit-answer { width: 100%; margin: 0; }
.report-message { min-height: 20px; color: var(--text-3); font-size: .8rem; }
.report-message.success { color: var(--green); }.report-message.error { color: var(--red); }
.session-exit-card { max-width: 620px; margin-inline: auto; }
.session-exit-actions {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}
.session-exit-actions .next { margin: 0; }
@media (max-width: 640px) {
  .resume-session-card,
  .quick-training-card { grid-template-columns: 1fr; }
  .resume-session-card .next { width: 100%; }
}

/* Gewichteter Prüfungsmodus und Prüfungsprotokoll */
.exam-rating { border: 1px solid #ffffff12; }
.exam-rating.passed { border-color: #34d07a55; background: #34d07a12; }
.exam-rating.distinction { border-color: #ffe05c88; background: linear-gradient(135deg, #ffe05c18, #34d07a12); color: #fff4b8; box-shadow: 0 0 20px #ffe05c18; }
.exam-rating.failed { border-color: #ff4d4d55; background: #ff4d4d10; }
.cert-row.exam-review-open { width: 100%; color: var(--text-1); text-align: left; }
.cert-row.exam-review-open:not(:disabled):hover { border-color: var(--cyan); }
.cert-badge.distinction { background: #ffe05c20; color: #ffe05c; }
.exam-review-list { display: grid; gap: 14px; }
.exam-review-item { padding: 17px; border: 1px solid #ffffff12; border-left-width: 4px; border-radius: 16px; background: var(--surface); }
.exam-review-item.is-correct { border-left-color: var(--green); }.exam-review-item.is-wrong { border-left-color: var(--red); }
.exam-review-head { display: flex; justify-content: space-between; gap: 12px; color: var(--text-3); font: .72rem "JetBrains Mono", monospace; }
.exam-review-item.is-correct .exam-review-head strong { color: var(--green); }.exam-review-item.is-wrong .exam-review-head strong { color: var(--red); }
.exam-review-item h3 { margin: 10px 0 14px; color: var(--text-1); line-height: 1.4; }
.exam-review-item > img { display: block; width: 100%; max-height: 320px; margin-bottom: 14px; object-fit: contain; border-radius: 12px; background: #f5f2ed; }
.exam-review-item dl { display: grid; gap: 8px; margin: 0; }
.exam-review-item dl > div { padding: 10px 12px; border-radius: 10px; background: #151210; }
.exam-review-item dt { margin-bottom: 3px; color: var(--text-3); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.exam-review-item dd { margin: 0; color: var(--text-1); font-size: .84rem; line-height: 1.45; }
.exam-review-item dd.too-slow { color: var(--orange); font-weight: 800; }
.exam-review-item > p { margin: 12px 0 0; color: var(--text-2); font-size: .82rem; line-height: 1.5; }

/* Codebasierter WATT-Zugang */
.profile-license { margin-bottom: 18px; padding: 19px; overflow: hidden; border: 1px solid var(--stroke); border-radius: 18px; background: linear-gradient(135deg, #28231f, #1c1917); }
.profile-license.active { border-color: #43ed9155; background: linear-gradient(135deg, #153126, #1b211d 62%); }
.profile-license.preview { border-color: #18e3ff55; background: linear-gradient(135deg, #12313a, #20211e 68%); }
.license-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.license-title span { color: var(--cyan); font: 800 .7rem "JetBrains Mono", monospace; letter-spacing: .1em; }
.license-title h2 { margin: 5px 0 0; }
.license-title > b { flex: none; padding: 7px 10px; border: 1px solid currentColor; border-radius: 999px; color: var(--green); font-size: .72rem; }
.profile-license.preview .license-title > b { color: var(--cyan); }
.profile-license > p { color: var(--text-2); line-height: 1.5; }
.profile-license dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0; }
.profile-license dl > div { min-width: 0; padding: 11px; border-radius: 11px; background: #0c1512aa; }
.profile-license dt { color: var(--text-3); font-size: .68rem; text-transform: uppercase; }
.profile-license dd { margin: 4px 0 0; overflow-wrap: anywhere; font-weight: 800; }
#license-activation-form { display: grid; gap: 8px; margin-top: 15px; }
#license-activation-form > label { color: var(--text-2); font-size: .78rem; font-weight: 800; }
#license-activation-form > div { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
#license-activation-form input { min-width: 0; padding: 13px; border: 1px solid var(--stroke); border-radius: 10px; background: #151210; color: var(--text-1); font: 700 .9rem "JetBrains Mono", monospace; text-transform: uppercase; }
#license-activation-form button { padding-inline: 18px; border-color: #18e3ff66; background: #113842; color: var(--cyan); }
#license-message { min-height: 18px; color: var(--text-3); }
#license-message.error { color: var(--red); }
@media (max-width: 560px) { .profile-license dl { grid-template-columns: 1fr; } #license-activation-form > div { grid-template-columns: 1fr; } #license-activation-form button { width: 100%; } }
.demo-status { width: auto; min-height: 36px; padding: 6px 10px; border: 1px solid #ffb34788; border-radius: 999px; background: #3b2513; color: #ffc470; font-size: .7rem; font-weight: 900; letter-spacing: .02em; text-align: center; white-space: nowrap; box-shadow: 0 0 16px #ff9b3522; cursor: pointer; }
.demo-status[hidden] { display: none; }
@media (max-width: 520px) {
  .header-tools { gap: 5px; }
  .demo-status { padding: 6px 8px; font-size: .62rem; }
  body:has(.demo-status:not([hidden])) .brand-tagline { display: none; }
}
#quiz { scroll-margin-top: calc(54px + env(safe-area-inset-top)); }
.question-actions { position: relative; }
.question-more { position: relative; width: 43px; min-width: 43px; min-height: 43px; padding: 0; font-size: 1.35rem; }
.question-more.has-favorite::after { content: ""; position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 8px #ffd34eaa; }
.question-action-menu { position: absolute; z-index: 12; top: calc(100% + 8px); right: 45px; display: grid; gap: 5px; width: min(230px, calc(100vw - 42px)); padding: 7px; border: 1px solid #18e3ff45; border-radius: 14px; background: #171412f5; box-shadow: 0 18px 45px #000b; backdrop-filter: blur(14px); }
.question-action-menu[hidden] { display: none; }
.question-action-menu button { display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 8px; width: 100%; min-height: 42px; padding: 8px 10px; border: 0; background: transparent; color: var(--text-2); text-align: left; }
.question-action-menu button:hover { background: #ffffff0b; color: var(--text-1); }
.question-action-menu button > span { color: var(--cyan); font-size: 1rem; text-align: center; }
.question-action-menu .favorite.active > span { color: var(--yellow); }
.question-action-menu button > b { font-size: .78rem; }
.quiz-question:focus { outline: none; }
.app-toast { position: fixed; z-index: 1100; right: 16px; bottom: calc(96px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: minmax(0, 1fr) auto 40px; align-items: center; gap: 10px; width: min(470px, calc(100% - 24px)); padding: 11px 12px 11px 15px; border: 1px solid #18e3ff55; border-radius: 15px; background: #111918f5; color: var(--text-1); box-shadow: 0 18px 50px #000c; backdrop-filter: blur(16px); }
.app-toast > span { min-width: 0; font-size: .82rem; line-height: 1.4; }
.app-toast > button { width: auto; min-height: 40px; padding: 7px 10px; border-color: #18e3ff55; color: var(--cyan); font-size: .74rem; text-align: center; }
.app-toast .toast-close { width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 0; font-size: 1.15rem; }
.app-toast.success { border-color: #34d07a66; }.app-toast.error { border-color: #ff4d4d77; }
.watt-confirm-dialog { width: min(500px, calc(100% - 24px)); padding: 0; border: 1px solid #18e3ff55; border-radius: 19px; background: #201c19; color: var(--text-1); box-shadow: 0 28px 80px #000d; }
.watt-confirm-dialog::backdrop { background: #080706cc; backdrop-filter: blur(6px); }
.watt-confirm-dialog section { padding: 20px; }.watt-confirm-dialog h2 { margin: 0 0 9px; }.watt-confirm-dialog p { margin: 0; color: var(--text-2); line-height: 1.55; }
.watt-confirm-dialog section > div { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 19px; }
.watt-confirm-dialog .danger { border-color: #ff4d4d66; background: #4a1e1e; color: #ff9a9a; }
@media (max-width: 520px) { .app-toast { right: 12px; bottom: calc(87px + env(safe-area-inset-bottom)); } .watt-confirm-dialog section > div { grid-template-columns: 1fr; } }

/* Reine Symbol-Buttons unabhängig von der allgemeinen Linksbündigkeit
   exakt innerhalb ihrer Touchfläche zentrieren. */
:is(.leave, .question-more, .toast-close, .start-help-close, .matching-picker-close, .image-dialog-close, .report-dialog-close) {
  display: grid;
  place-items: center;
  flex: none;
  padding: 0;
  line-height: 1;
  text-align: center;
}

/* Mobile Layout-Performance
   Stabile Viewporthöhe und weniger Neuzeichnen beim Ein-/Ausblenden der
   Browserleisten. Das sichtbare Design bleibt unverändert. */
@supports (min-height: 100svh) {
  .app { min-height: 100svh; }
}

.choices > .topic-button,
.category-stat-group,
.topic-stat-list > article,
.cert-row,
.exam-review-question {
  content-visibility: auto;
  contain: layout paint style;
  contain-intrinsic-size: auto 82px;
}

.category-stat-group { contain-intrinsic-size: auto 115px; }
.exam-review-question { contain-intrinsic-size: auto 260px; }

.viewport-resizing :is(
  .card,
  .pictogram,
  .progress span,
  .stat-meter progress,
  .gauge-progress,
  .gauge-traveller,
  .welcome-logo,
  .orbit,
  button
) {
  animation-play-state: paused !important;
  transition: none !important;
}

@media (max-width: 760px) {
  body,
  [data-theme="dark"] body,
  [data-theme="light"] body,
  [data-design="pruefbuch"] body,
  [data-design="highvoltage"] body {
    background: #131010;
  }
  .brand-line,
  .bottom-nav,
  .question-action-menu,
  .app-toast {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .brand-line { background: #100e0d; }
  .bottom-nav { background: #1e1a17; }
  .question-action-menu { background: #171412; }
  .app-toast { background: #111918; }
}

/* Mobile Antwortführung */
.structured-progress { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.structured-progress .input-hint { margin: 0; }
.structured-progress > b { flex: none; color: var(--cyan); font: 750 .7rem "JetBrains Mono", monospace; }

.answer-check-status { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-top: 13px; padding: 12px; border: 1px solid #18e3ff55; border-radius: 13px; background: #101d20; }
.answer-check-status > span { display: grid; place-items: center; width: 25px; height: 25px; border: 2px solid #18e3ff44; border-top-color: var(--cyan); border-radius: 50%; color: var(--orange); font-weight: 900; animation: answer-check-spin .8s linear infinite; }
.answer-check-status strong, .answer-check-status small { display: block; }
.answer-check-status strong { color: var(--text-1); font-size: .82rem; }.answer-check-status small { margin-top: 2px; color: var(--text-3); font-size: .7rem; line-height: 1.35; }
.answer-check-status button { width: auto; min-height: 40px; padding: 8px 10px; color: var(--cyan); font-size: .72rem; text-align: center; }
.answer-check-status.is-error { border-color: #ff7a2966; background: #332016; }
.answer-check-status.is-error > span { border: 1px solid var(--orange); animation: none; }
@keyframes answer-check-spin { to { transform: rotate(360deg); } }

[data-result-label]::after { content: attr(data-result-label); flex: 0 0 100%; margin-top: 5px; color: currentColor; font: 800 .7rem "JetBrains Mono", monospace; text-align: left; }
.matching-item[data-result-label]::after,
.ordering li[data-result-label]::after { grid-column: 1 / -1; }
.short-result-label { display: block; margin-top: 7px; font: 800 .72rem "JetBrains Mono", monospace; }
.short-result-label.is-correct { color: var(--green); }.short-result-label.is-wrong { color: var(--red); }
.change-current-answer { width: 100%; min-height: 42px; margin-top: 9px; padding: 8px 12px; border-color: #ffffff1d; background: transparent; color: var(--text-2); font-size: .75rem; text-align: center; }

.learning-session-active .bottom-nav { grid-template-columns: 1fr; pointer-events: none; }
.learning-session-active .bottom-nav .nav-item { display: none; }
.learning-session-active .bottom-nav::before { content: "●  TRAINING AKTIV  ·  MIT × PAUSIEREN"; display: grid; place-items: center; min-height: 50px; color: var(--cyan); font: 800 .68rem "JetBrains Mono", monospace; letter-spacing: .04em; }

@media (max-width: 760px) {
  #structured-answer > .submit-answer {
    position: sticky;
    z-index: 9;
    bottom: calc(88px + env(safe-area-inset-bottom));
    box-shadow: 0 -10px 24px #131010dd, 0 8px 18px -8px #ff7a29cc;
  }
  .structured-progress { align-items: flex-start; flex-direction: column; gap: 5px; }
  .answer-check-status { grid-template-columns: 28px minmax(0, 1fr); }
  .answer-check-status button { grid-column: 1 / -1; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .answer-check-status > span { animation: none; }
}