/* VAL Security – einheitliches Layout nach pruefungstraining.html.
   Rein visuelle Anpassungen; Lerntexte, Fragen, Antworten und Funktionen bleiben unverändert. */
:root{--lad-gold:#e9bc52;--lad-gold2:#f4d47e;--lad-cyan:#72cfd3;--lad-bg:#050a0b;--lad-panel:#071619;--lad-line:rgba(233,188,82,.34)}
html{scroll-behavior:smooth}
body{background:radial-gradient(ellipse at 50% -12%,#102529 0%,#050a0b 58%,#020607 100%)!important;color:#edf4f2}
.sub-top{background:rgba(4,11,13,.97)!important;border-bottom:1px solid rgba(233,188,82,.28)!important;backdrop-filter:blur(14px)}
.sub-nav{max-width:1760px!important;margin-inline:auto!important}
.sub-hero.sub-hero-image-only{display:block!important;width:100%!important;max-width:1760px!important;margin:clamp(14px,2vw,24px) auto 0!important;padding:0 clamp(14px,2.2vw,36px)!important;overflow:visible!important;background:transparent!important;border:0!important;box-sizing:border-box!important}
.sub-hero.sub-hero-image-only img{display:block!important;width:100%!important;height:auto!important;max-height:none!important;aspect-ratio:auto!important;object-fit:contain!important;object-position:center!important;border:1px solid rgba(233,188,82,.42)!important;border-radius:12px!important;box-shadow:0 18px 46px rgba(0,0,0,.28)!important;background:#061214!important}
.sub-main{width:100%!important;max-width:1760px!important;margin:0 auto!important;padding:0 clamp(14px,2.2vw,36px)!important;box-sizing:border-box!important}
.sub-toolbar{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px 24px!important;flex-wrap:wrap!important;margin:18px 0 0!important;padding:17px clamp(18px,2.2vw,30px)!important;min-height:72px!important;border:1px solid rgba(114,207,211,.2)!important;border-bottom-color:rgba(233,188,82,.36)!important;border-radius:12px 12px 0 0!important;background:linear-gradient(115deg,rgba(8,25,28,.98),rgba(5,13,15,.98))!important;box-shadow:0 8px 24px rgba(0,0,0,.16)!important}
.sub-title{font-size:clamp(12px,1.05vw,15px)!important;line-height:1.45!important;letter-spacing:.13em!important;font-weight:900!important;color:#f2cf75!important}
.sub-meta{font-size:10px!important;line-height:1.6!important;letter-spacing:.1em!important;color:#9db9b8!important}
.page-wrap{width:100%!important;max-width:none!important;margin:0 auto!important;padding:clamp(16px,2.2vw,30px) 0 clamp(36px,4vw,64px)!important;box-sizing:border-box!important}
.module-nav{border:1px solid rgba(114,207,211,.24)!important;border-radius:12px!important;padding:clamp(13px,1.6vw,20px)!important;margin:0 0 18px!important;background:linear-gradient(135deg,rgba(8,25,28,.98),rgba(4,12,14,.98))!important;box-shadow:0 12px 30px rgba(0,0,0,.2)!important}
.module-nav-title{margin-bottom:12px!important;color:var(--lad-gold2)!important;font-size:10px!important;letter-spacing:.2em!important;font-weight:900!important}
.module-links{gap:8px!important}
.module-links a{min-height:42px!important;display:flex!important;align-items:center!important;gap:10px!important;padding:10px 13px!important;border:1px solid rgba(114,207,211,.2)!important;border-radius:6px!important;background:rgba(5,16,18,.9)!important;color:#c7d6d4!important;font-size:11px!important;font-weight:800!important;letter-spacing:.045em!important;text-decoration:none!important;transition:border-color .18s ease,background .18s ease,transform .18s ease!important}
.module-links a span{display:inline-grid!important;place-items:center!important;min-width:26px!important;height:25px!important;border:1px solid rgba(233,188,82,.28)!important;border-radius:4px!important;color:var(--lad-gold2)!important;background:rgba(233,188,82,.07)!important}
.module-links a:hover,.module-links a.active{border-color:rgba(233,188,82,.68)!important;background:linear-gradient(115deg,rgba(233,188,82,.15),rgba(114,207,211,.06))!important;color:#fff!important;transform:translateY(-1px)!important}
.content-panel{min-width:0!important;padding:clamp(18px,2.3vw,34px)!important;border:1px solid rgba(233,188,82,.3)!important;border-radius:12px!important;background:linear-gradient(145deg,rgba(8,23,26,.98),rgba(3,9,11,.98))!important;box-shadow:0 16px 38px rgba(0,0,0,.2)!important}
.section-head{padding-bottom:17px!important;margin-bottom:22px!important;border-bottom:1px solid rgba(114,207,211,.17)!important}
.section-head h2{color:#f4f3ed!important;font-size:clamp(21px,2.1vw,30px)!important;line-height:1.18!important;letter-spacing:.01em!important}
.section-head p{color:var(--lad-cyan)!important;font-size:10px!important;letter-spacing:.13em!important;font-weight:800!important}
.grid{gap:14px!important;align-items:stretch!important}
.card,.question,.result,.law-card,.block-card{border:1px solid rgba(233,188,82,.25)!important;border-radius:10px!important;background:linear-gradient(145deg,rgba(11,27,29,.98),rgba(4,12,14,.98))!important;box-shadow:0 9px 25px rgba(0,0,0,.17)!important;overflow:hidden}
.card{padding:clamp(17px,1.8vw,25px)!important}
.card:before{background:linear-gradient(180deg,var(--lad-gold2),var(--lad-gold))!important;opacity:.72!important}
.card h3,.question h3{color:#f1f3ee!important;line-height:1.4!important}
.card p,.card li,.question p{color:#c4d0ce!important;line-height:1.72!important}
.callout{border:1px solid rgba(233,188,82,.22)!important;border-left:3px solid var(--lad-gold)!important;border-radius:6px!important;background:linear-gradient(100deg,rgba(233,188,82,.09),rgba(114,207,211,.035))!important;color:#d5dfdd!important}
.key,.merks .card strong{color:var(--lad-gold2)!important}
button,.btn,.quiz-btn,.sub-btn,.primary-btn,.exam-btn,a.button{border-radius:6px!important;font-weight:850!important;letter-spacing:.035em!important}
.quiz-btn,.btn,.sub-btn,.primary-btn,.exam-btn,button.primary{border:1px solid #d7ad49!important;background:linear-gradient(110deg,#f0cf78,#c99a37)!important;color:#080b0b!important;box-shadow:0 5px 16px rgba(201,154,55,.12)!important}
button.secondary,.sub-btn.secondary{background:rgba(5,12,13,.92)!important;color:#f3d782!important;border:1px solid rgba(114,207,211,.25)!important}
:where(button,a,input,select,textarea):focus-visible{outline:2px solid var(--lad-gold2)!important;outline-offset:3px!important}
@media(max-width:900px){.sub-hero.sub-hero-image-only{padding-inline:14px!important}.sub-main{padding-inline:14px!important}.sub-toolbar{align-items:flex-start!important;flex-direction:column!important}.module-links{grid-template-columns:repeat(2,minmax(0,1fr))!important}.grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:600px){.sub-hero.sub-hero-image-only{margin-top:12px!important;padding-inline:10px!important}.sub-hero.sub-hero-image-only img{border-radius:8px!important}.sub-main{padding-inline:10px!important}.sub-toolbar{margin-top:12px!important;padding:15px!important;border-radius:9px 9px 0 0!important}.sub-meta{font-size:9px!important}.page-wrap{padding-top:12px!important}.module-nav{padding:11px!important;margin-bottom:12px!important;border-radius:9px!important}.module-links{grid-template-columns:minmax(0,1fr)!important;gap:7px!important}.module-links a{min-height:40px!important;padding:9px 11px!important}.content-panel{padding:14px!important;border-radius:9px!important}.section-head{align-items:flex-start!important;margin-bottom:16px!important}.section-head h2{font-size:22px!important}.grid,.answers,.merks{grid-template-columns:minmax(0,1fr)!important}.card{padding:16px!important}.quiz-btn,.btn,.sub-btn,.primary-btn,.exam-btn{width:100%!important}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.module-links a{transition:none!important}}


/* Korrektur Sicherheitstechnik: ältere Seitenstruktur nutzt hero-image-banner statt sub-hero-image-only. */
.hero-image-banner,
.sub-hero.hero-image-banner{
  display:block!important;width:100%!important;max-width:1760px!important;
  margin:clamp(14px,2vw,24px) auto 0!important;padding:0 clamp(14px,2.2vw,36px)!important;
  box-sizing:border-box!important;overflow:visible!important;background:transparent!important;
  border:0!important;min-height:0!important;
}
.hero-image-banner img,
.sub-hero.hero-image-banner img{
  display:block!important;width:100%!important;height:auto!important;max-height:none!important;
  aspect-ratio:auto!important;object-fit:contain!important;object-position:center!important;
  border:1px solid rgba(233,188,82,.58)!important;border-radius:12px!important;
  box-shadow:0 18px 46px rgba(0,0,0,.32)!important;background:#061214!important;
}
.sub-main .sub-toolbar{border-radius:12px 12px 0 0!important}
.sub-main .page-wrap{width:100%!important;max-width:none!important}
.sub-main .module-nav{border-radius:12px!important}
.sub-main .content-panel,
.sub-main .tab-panel.content-panel{min-width:0!important;color:#edf4f2!important}
.sub-main .grid{gap:clamp(12px,1.5vw,18px)!important}
.sub-main .card,
.sub-main .question,
.sub-main .topic-box,
.sub-main .section,
.sub-main .tab-panel.content-panel{
  border:1px solid rgba(114,207,211,.22)!important;border-radius:10px!important;
  background:linear-gradient(145deg,rgba(9,30,34,.97),rgba(5,16,18,.98))!important;
  box-shadow:0 10px 28px rgba(0,0,0,.18)!important;
}
.sub-main .card,.sub-main .question,.sub-main .topic-box{padding:clamp(16px,2vw,24px)!important}
.sub-main .content-panel h2,.sub-main .content-panel h3,.sub-main .card h2,.sub-main .card h3,.sub-main .question h3{color:#f4d47e!important}
.sub-main .btn,
.sub-main button.btn,
.sub-main .content-panel button{
  border:1px solid rgba(244,212,126,.68)!important;border-radius:6px!important;
  background:linear-gradient(135deg,#e9bc52,#a97820)!important;color:#111!important;
  font-weight:800!important;letter-spacing:.045em!important;padding:11px 16px!important;
  box-shadow:0 5px 16px rgba(0,0,0,.22)!important;cursor:pointer!important;
}
.sub-main .question label{display:block!important;margin-top:8px!important;padding:11px 12px!important;
  border:1px solid rgba(114,207,211,.17)!important;border-radius:5px!important;
  background:rgba(7,25,28,.9)!important;color:#dce8e6!important;line-height:1.6!important}
.sub-main .question input{accent-color:#e9bc52!important}
.sub-main .key{border-left:3px solid #e9bc52!important;border-radius:0 6px 6px 0!important;background:rgba(233,188,82,.07)!important}
@media(max-width:760px){
  .hero-image-banner,.sub-hero.hero-image-banner{padding:0 14px!important}
  .sub-main{padding-left:14px!important;padding-right:14px!important}
  .sub-main .grid{grid-template-columns:minmax(0,1fr)!important}
  .sub-main .sub-toolbar{align-items:flex-start!important}
}


/* Korrektur Unfallverhütung: Banner verwendet .unfall-hero-banner statt .sub-hero-image-only. */
.sub-hero.unfall-hero-banner{
  display:block!important;position:relative!important;width:100%!important;max-width:1760px!important;
  min-height:0!important;height:auto!important;margin:clamp(14px,2vw,24px) auto 0!important;
  padding:0 clamp(14px,2.2vw,36px)!important;overflow:visible!important;box-sizing:border-box!important;
  border:0!important;border-radius:0!important;background:transparent!important;line-height:0!important;
}
.sub-hero.unfall-hero-banner>img{
  display:block!important;width:100%!important;height:auto!important;max-width:none!important;max-height:none!important;
  aspect-ratio:auto!important;object-fit:contain!important;object-position:center!important;
  border:1px solid rgba(233,188,82,.58)!important;border-radius:12px!important;
  box-shadow:0 18px 46px rgba(0,0,0,.32)!important;background:#061214!important;
}
.sub-hero.unfall-hero-banner .sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;
  margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-width:600px){.sub-hero.unfall-hero-banner{margin-top:12px!important;padding-inline:10px!important}.sub-hero.unfall-hero-banner>img{border-radius:8px!important}}

/* Lesbarkeitspaket für alle zehn Lernbereiche: skalierbare Typografie für Desktop und Mobilgeräte. */
.sub-main,.sub-main p,.sub-main li,.sub-main label,.sub-main input,.sub-main select,.sub-main textarea,
.sub-main .content-panel,.sub-main .card,.sub-main .question,.sub-main .topic-box,.sub-main .section,
.sub-main .tab-panel,.sub-main .callout,.sub-main .key,.sub-main .feedback,.sub-main .answer span,
.sub-main .step span,.sub-main .compare span,.sub-main .merks .card span{
  font-size:clamp(15px,1vw,17px)!important;
  line-height:1.7!important;
}
.sub-main p,.sub-main li,.sub-main label,.sub-main .card p,.sub-main .card li,
.sub-main .question p,.sub-main .answer span,.sub-main .step span,.sub-main .compare span,
.sub-main .merks .card span,.sub-main .callout,.sub-main .feedback{
  color:#d0dcda!important;
}
.sub-main h1{font-size:clamp(27px,3vw,42px)!important;line-height:1.2!important}
.sub-main h2,.sub-main .section-head h2,.sub-main .content-panel h2{font-size:clamp(23px,2vw,31px)!important;line-height:1.28!important}
.sub-main h3,.sub-main .card h3,.sub-main .question h3{font-size:clamp(18px,1.35vw,22px)!important;line-height:1.4!important}
.sub-main h4,.sub-main .escalation-box h4{font-size:clamp(16px,1.1vw,19px)!important;line-height:1.4!important}
.sub-title{font-size:clamp(13px,1vw,16px)!important;line-height:1.5!important}
.sub-meta,.module-nav-title,.section-head p,.qmeta,.sub-main .escalation-kicker,.sub-main .escalation-pill,
.sub-main .escalation-figure figcaption{font-size:12px!important;line-height:1.5!important;letter-spacing:.06em!important}
.module-links a{font-size:clamp(13px,.95vw,15px)!important;line-height:1.45!important;min-height:46px!important}
.module-links a span{font-size:12px!important;min-width:28px!important;height:28px!important}
.sub-main .question label,.sub-main .answer,.sub-main .answers label{padding:13px 14px!important;line-height:1.65!important}
.sub-main button,.sub-main .btn,.sub-main .quiz-btn,.sub-main .primary-btn,.sub-main .exam-btn,
.sub-main input[type=button],.sub-main input[type=submit]{font-size:15px!important;line-height:1.35!important;min-height:44px!important}
.sub-main input[type=checkbox],.sub-main input[type=radio]{width:18px;height:18px;flex:0 0 auto}
.sub-main .card,.sub-main .question,.sub-main .topic-box,.sub-main .content-panel{overflow-wrap:anywhere}
@media(max-width:900px){
  .sub-nav{padding-inline:18px!important}
  .main-nav a{font-size:12px!important}
  .sub-main p,.sub-main li,.sub-main label,.sub-main .answer span{font-size:16px!important}
}
@media(max-width:600px){
  .sub-nav{padding:10px 12px!important;gap:10px!important;min-height:58px!important;flex-wrap:wrap!important}
  .sub-brand b{font-size:13px!important;letter-spacing:.06em!important}
  .sub-brand small{font-size:10px!important;letter-spacing:.1em!important}
  .main-nav{flex-wrap:wrap!important;gap:4px!important}
  .main-nav a{font-size:12px!important;padding:9px 8px!important;white-space:normal!important;line-height:1.35!important}
  .sub-main p,.sub-main li,.sub-main label,.sub-main .content-panel,.sub-main .card,
  .sub-main .question,.sub-main .callout,.sub-main .answer span,.sub-main .step span,
  .sub-main .compare span,.sub-main .merks .card span{font-size:16px!important;line-height:1.7!important}
  .sub-main h1{font-size:clamp(25px,7vw,32px)!important}
  .sub-main h2,.sub-main .section-head h2,.sub-main .content-panel h2{font-size:24px!important}
  .sub-main h3,.sub-main .card h3,.sub-main .question h3{font-size:19px!important}
  .sub-meta,.module-nav-title,.section-head p,.qmeta,.sub-main .escalation-kicker,.sub-main .escalation-pill,
  .sub-main .escalation-figure figcaption{font-size:12px!important}
  .module-links a{font-size:14px!important;min-height:44px!important}
  .sub-main button,.sub-main .btn,.sub-main .quiz-btn,.sub-main .primary-btn,.sub-main .exam-btn{font-size:16px!important;min-height:46px!important}
  .sub-main .question label,.sub-main .answer,.sub-main .answers label{padding:13px!important}
}