/* VAL Security – einheitliches Lernbereich-Design (Desktop, Tablet, Mobil) */
:root {
  --val-ui-bg: #05090a;
  --val-ui-panel: rgba(7, 16, 18, .96);
  --val-ui-panel-soft: rgba(10, 22, 24, .96);
  --val-ui-gold: #dcb34e;
  --val-ui-gold-bright: #f4d783;
  --val-ui-line: rgba(220, 179, 78, .32);
  --val-ui-muted: #a8b5b4;
}
.sub-main { width: 100%; max-width: 1540px; margin-inline: auto; }
.sub-toolbar { min-height: 62px; align-items: center; padding: 16px clamp(16px, 2.4vw, 34px); gap: 12px 24px; background: rgba(5, 9, 10, .98); border-bottom: 1px solid var(--val-ui-line); }
.sub-title { color: var(--val-ui-gold-bright) !important; font-size: clamp(11px, .8vw, 13px); line-height: 1.4; }
.sub-meta { color: #a6b1af !important; font-size: 10px; line-height: 1.5; }
.page-wrap { width: 100%; padding: clamp(16px, 2.4vw, 32px) clamp(14px, 2.5vw, 34px) 64px; }
.module-nav { border: 1px solid var(--val-ui-line) !important; border-radius: 3px; padding: 15px !important; margin-bottom: 22px !important; background: rgba(4, 10, 11, .97) !important; box-shadow: 0 12px 34px rgba(0,0,0,.18); }
.module-nav-title { color: var(--val-ui-gold-bright) !important; font-weight: 800; font-size: 10px !important; letter-spacing: .19em; }
.module-links { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px !important; }
.module-links a { display: flex !important; min-width: 0; min-height: 46px; align-items: center; justify-content: flex-start; gap: 9px; padding: 10px 12px !important; border: 1px solid rgba(220,179,78,.24) !important; border-radius: 2px; background: linear-gradient(135deg, rgba(16,25,26,.96), rgba(5,10,11,.96)) !important; color: #e5e9e7 !important; font-size: 11px; line-height: 1.35; text-decoration: none; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.module-links a span { display: inline-flex; flex: 0 0 25px; width: 25px; height: 25px; align-items: center; justify-content: center; border: 1px solid rgba(220,179,78,.45); border-radius: 2px; color: var(--val-ui-gold-bright); font-size: 10px; font-weight: 800; }
.module-links a:hover, .module-links a.active { border-color: var(--val-ui-gold) !important; background: linear-gradient(135deg, rgba(61,46,19,.7), rgba(8,15,16,.98)) !important; color: #fff !important; }
.module-links a:hover { transform: translateY(-1px); }
.content-panel { min-width: 0; padding: clamp(16px, 2.2vw, 30px) !important; border: 1px solid var(--val-ui-line) !important; border-radius: 3px; background: linear-gradient(145deg, rgba(7,15,17,.98), rgba(3,8,9,.98)) !important; }
.section { min-width: 0; }
.section-head { align-items: center !important; gap: 12px 20px !important; padding-bottom: 16px !important; margin-bottom: 22px !important; border-bottom-color: var(--val-ui-line) !important; }
.section-head h2 { color: #f4f3ed !important; font-size: clamp(20px, 2vw, 28px) !important; line-height: 1.15; letter-spacing: .015em; }
.section-head p { color: var(--val-ui-gold-bright) !important; font-size: 9px !important; line-height: 1.5; letter-spacing: .12em; }
.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px !important; align-items: stretch; }
.card, .question, .result, .law-card, .block-card { min-width: 0; border: 1px solid rgba(220,179,78,.22) !important; border-radius: 3px !important; background: linear-gradient(145deg, rgba(12,22,23,.98), rgba(5,11,12,.98)) !important; box-shadow: 0 8px 24px rgba(0,0,0,.14); }
.card { padding: clamp(16px, 1.7vw, 22px) !important; }
.card:before { background: linear-gradient(180deg, var(--val-ui-gold-bright), var(--val-ui-gold)) !important; opacity: .7 !important; }
.card h3, .question h3 { color: #f0f0e9 !important; font-size: clamp(14px, 1vw, 16px) !important; line-height: 1.4 !important; }
.card p, .card li, .question p { color: #c2ccca; font-size: 13px; line-height: 1.7; }
.card .callout, .callout { border-left-color: var(--val-ui-gold) !important; background: rgba(220,179,78,.07) !important; }
.key, .merks .card strong { color: var(--val-ui-gold-bright) !important; }
button, .btn, .quiz-btn, .sub-btn, .primary-btn, .exam-btn, a.button { min-height: 42px; border-radius: 2px !important; font: inherit; font-weight: 800; letter-spacing: .035em; transition: background .18s ease, border-color .18s ease, transform .18s ease; }
.quiz-btn, .btn, .sub-btn, .primary-btn, .exam-btn, button.primary { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 11px 18px !important; border: 1px solid var(--val-ui-gold) !important; background: linear-gradient(115deg, #f0ce76, #c99b38) !important; color: #090b0b !important; text-decoration: none; }
.quiz-btn:hover, .btn:hover, .sub-btn:hover, .primary-btn:hover, .exam-btn:hover, button.primary:hover { background: linear-gradient(115deg, #ffe7a1, #dfb750) !important; transform: translateY(-1px); }
button.secondary, .sub-btn.secondary { background: rgba(5,12,13,.9) !important; color: #f3d782 !important; border: 1px solid var(--val-ui-line) !important; }
.answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px !important; }
.answer { min-width: 0; min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 11px 13px !important; border: 1px solid rgba(220,179,78,.2) !important; border-radius: 2px; background: rgba(8,17,18,.95) !important; color: #dce4e2; line-height: 1.5; }
.answer:has(input:checked) { border-color: var(--val-ui-gold) !important; background: rgba(220,179,78,.09) !important; }
.answer input { accent-color: var(--val-ui-gold); flex: 0 0 auto; }
.question { padding: clamp(15px, 1.7vw, 22px) !important; margin-bottom: 14px !important; }
.qmeta { color: var(--val-ui-gold-bright) !important; font-size: 9px !important; line-height: 1.5; }
.result { padding: clamp(18px, 2vw, 28px) !important; }
.score { color: var(--val-ui-gold-bright) !important; }
.track { height: 10px !important; background: #111b1c !important; border-color: var(--val-ui-line) !important; }
.bar { background: linear-gradient(90deg, #b8892e, #f4d783) !important; }
.feedback, .error-list { line-height: 1.65; }
:where(button, a, input, select, textarea):focus-visible { outline: 2px solid var(--val-ui-gold-bright) !important; outline-offset: 3px; }
@media (max-width: 1200px) { .module-links { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .sub-toolbar { align-items: flex-start; flex-direction: column; }
  .sub-meta { font-size: 9px; }
  .page-wrap { padding: 12px 12px 40px !important; }
  .module-nav { padding: 10px !important; margin-bottom: 14px !important; }
  .module-links { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 7px !important; }
  .module-links a { min-height: 44px; padding: 9px !important; font-size: 10px; }
  .module-links a span { flex-basis: 23px; width: 23px; height: 23px; }
  .content-panel { padding: 14px !important; }
  .section-head { align-items: flex-start !important; }
  .grid, .answers, .merks { grid-template-columns: minmax(0, 1fr) !important; }
  .card { padding: 16px !important; }
  .card p, .card li, .question p { font-size: 13px; }
  .quiz-btn, .btn, .sub-btn, .primary-btn, .exam-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; } }

/* VAL Trainingszentrum – großzügigere Lernbereiche (Version 2) */
.sub-toolbar { min-height: 68px; padding-block: 18px !important; }
.module-nav { padding: 18px !important; margin-bottom: 26px !important; }
.module-links { gap: 10px !important; }
.module-links a { min-height: 54px !important; padding: 12px 14px !important; font-size: 12px !important; line-height: 1.45 !important; gap: 11px !important; }
.module-links a span { flex-basis: 29px !important; width: 29px !important; height: 29px !important; font-size: 11px !important; }
.content-panel { padding: clamp(20px, 2.5vw, 36px) !important; }
.section-head { padding-bottom: 19px !important; margin-bottom: 26px !important; }
.section-head h2 { font-size: clamp(23px, 2.2vw, 31px) !important; }
.grid { gap: 18px !important; }
.card { padding: clamp(20px, 2vw, 27px) !important; }
.card h3 { font-size: clamp(16px, 1.15vw, 18px) !important; line-height: 1.45 !important; margin-bottom: 11px !important; }
.card p, .card li, .question p { font-size: 14px !important; line-height: 1.75 !important; }
.card ul { padding-left: 22px !important; margin: 11px 0 !important; }
.callout { padding: 15px 17px !important; font-size: 13px !important; line-height: 1.75 !important; }
.question { padding: clamp(20px, 2vw, 27px) !important; margin-bottom: 17px !important; }
.question h3 { font-size: clamp(16px, 1.15vw, 18px) !important; line-height: 1.55 !important; margin-bottom: 15px !important; }
.qmeta { font-size: 10px !important; margin-bottom: 9px !important; }
.answers { gap: 11px !important; }
.answer { min-height: 56px !important; padding: 14px 16px !important; gap: 12px !important; font-size: 14px !important; line-height: 1.6 !important; }
.answer span { font-size: 14px !important; line-height: 1.6 !important; }
button, .btn, .quiz-btn, .sub-btn, .primary-btn, .exam-btn, a.button { min-height: 48px !important; }
.quiz-btn, .btn, .sub-btn, .primary-btn, .exam-btn, button.primary { padding: 13px 21px !important; font-size: 11px !important; }
.result { padding: clamp(22px, 2.3vw, 32px) !important; }
.score { font-size: clamp(54px, 4.2vw, 66px) !important; }
.track { height: 12px !important; margin: 15px 0 !important; }
@media (max-width: 1200px) {
  .module-links { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 760px) {
  .module-nav { padding: 12px !important; margin-bottom: 17px !important; }
  .module-links { gap: 8px !important; }
  .module-links a { min-height: 50px !important; padding: 11px !important; font-size: 11px !important; }
  .module-links a span { flex-basis: 25px !important; width: 25px !important; height: 25px !important; }
  .content-panel { padding: 17px !important; }
  .section-head { margin-bottom: 19px !important; }
  .section-head h2 { font-size: 23px !important; }
  .grid, .answers, .merks { grid-template-columns: minmax(0, 1fr) !important; }
  .card { padding: 19px !important; }
  .card h3 { font-size: 17px !important; }
  .card p, .card li, .question p, .answer span { font-size: 14px !important; }
  .question { padding: 18px !important; }
  .question h3 { font-size: 16px !important; }
  .answer { min-height: 54px !important; padding: 13px !important; }
  .quiz-btn, .btn, .sub-btn, .primary-btn, .exam-btn { width: 100%; }
}