/* Verkehrsrecht-Check – gekapselte Styles (.vrc-root). CI analog Unfallformular (.uf-root). */
.vrc-root{
    --red:#C4262A; --red-dark:#9E1E22; --red-soft:#FBECEC;
    --ink:#1B1718; --muted:#736A6C; --line:#E7E0E0;
    --canvas:#F6F2F1; --card:#FFFFFF; --field:#FBFAFA; --field-focus:#FFFFFF;
    --success:#1F7A4D; --success-soft:#E7F2EC;
    --amber:#A45513; --amber-soft:#FFF4E5;
    --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --radius:14px; --radius-sm:10px;
    --shadow:0 1px 2px rgba(27,23,24,.04),0 12px 32px -12px rgba(27,23,24,.18);
    font-family:var(--sans); font-size:15px; color:var(--ink); line-height:1.5; text-align:left; -webkit-font-smoothing:antialiased;
    display:flex; flex-direction:column; align-items:center;
  }
.vrc-root *{box-sizing:border-box}

/* Theme-Reset (Divi). Divi stylt je Textmodul (.et_pb_text_N h3, .et_pb_text_N.et_pb_text a !important) –
   daher hier bewusst hohe Spezifität + !important, damit der Check in jedem Modul gleich aussieht. */
.vrc-root h1,.vrc-root h2,.vrc-root h3,.vrc-root p,.vrc-root ul,.vrc-root li,.vrc-root label{padding:0;text-align:left}
.vrc-root .card h1,.vrc-root .card h2,.vrc-root .card h3{font-family:var(--sans)!important;font-style:normal!important}
.vrc-root ul{list-style:disc}
.vrc-root .card .actions a.btn-primary,.vrc-root .card .actions a.btn-primary:hover,.vrc-root .card .actions a.btn-primary:focus{color:#fff!important;text-decoration:none!important}
.vrc-root .card .actions a.btn-ghost,.vrc-root .card .actions a.btn-ghost:hover,.vrc-root .card .actions a.btn-ghost:focus{color:var(--ink)!important;text-decoration:none!important}
.vrc-root .btn svg{color:inherit;stroke:currentColor}
.vrc-root .card{width:100%;max-width:680px;background:var(--card);border:1px solid var(--line);
    border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}

/* Kopf mit Fortschritt */
.vrc-root .head{padding:22px 26px 18px;border-bottom:1px solid var(--line)}
.vrc-root .progress-meta{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;color:var(--muted);margin-bottom:9px}
.vrc-root .progress-meta .count{font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink)}
.vrc-root .bar{height:5px;background:var(--line);border-radius:99px;overflow:hidden}
.vrc-root .bar > i{display:block;height:100%;width:33.3%;background:linear-gradient(90deg,var(--red),var(--red-dark));border-radius:99px;transition:width .45s cubic-bezier(.4,0,.1,1)}
.vrc-root .eyebrow{display:block;margin-top:16px;font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--red);font-weight:700}
.vrc-root .head h1{font-size:24px;line-height:1.2;letter-spacing:-.02em;margin:4px 0 5px;text-wrap:balance;font-weight:750;color:var(--ink)}
.vrc-root .head p{margin:0;font-size:14px;color:var(--muted)}
.vrc-root .body{padding:22px 26px 26px}

/* Zwischenüberschriften */
.vrc-root .sub{font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--red);font-weight:700;
    margin:24px 0 13px;padding-top:18px;border-top:1px solid var(--line);display:flex;align-items:center;gap:8px}
.vrc-root .sub:first-child{margin-top:0;padding-top:0;border-top:0}

/* Themen-Kacheln */
.vrc-root .topics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.vrc-root .topic{display:flex;gap:12px;align-items:flex-start;text-align:left;font-family:inherit;color:var(--ink);
    background:var(--field);border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:14px;cursor:pointer;transition:.15s;margin:0}
.vrc-root .topic:hover{border-color:#D8CFCF;background:#fff}
.vrc-root .topic-icon{width:38px;height:38px;border-radius:10px;background:var(--red-soft);color:var(--red);display:flex;align-items:center;justify-content:center;flex:none;transition:.15s}
.vrc-root .topic-icon svg{width:21px;height:21px}
.vrc-root .topic-text b{display:block;font-size:15px;font-weight:700;line-height:1.3}
.vrc-root .topic-text small{display:block;font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.4}
.vrc-root .topic[aria-pressed="true"]{border-color:var(--red);background:var(--red-soft)}
.vrc-root .topic[aria-pressed="true"] .topic-icon{background:var(--red);color:#fff}
.vrc-root .topic[aria-pressed="true"] b{color:var(--red-dark)}
.vrc-root .topic:focus-visible{outline:none;box-shadow:0 0 0 3px var(--red-soft);border-color:var(--red)}

/* Formular */
.vrc-root .form-wrap{display:none}
.vrc-root .form-wrap.active{display:block;margin-top:22px;padding-top:20px;border-top:1px solid var(--line);animation:vrc-rise .4s cubic-bezier(.2,.7,.2,1)}
@keyframes vrc-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.vrc-root .intro{font-size:13.5px;color:var(--muted);margin:-4px 0 16px}
.vrc-root .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}
.vrc-root .field{margin-bottom:16px;min-width:0}
.vrc-root .field.full{grid-column:1/-1}
.vrc-root .field > label{display:block;font-size:13px;font-weight:650;margin-bottom:6px;line-height:1.35}
.vrc-root .hint{display:block;font-size:12px;color:var(--muted);font-weight:400;margin-top:5px;line-height:1.4}
.vrc-root input[type=text],.vrc-root input[type=date],.vrc-root select{
    width:100%;font-family:inherit;font-size:15.5px;color:var(--ink);background:var(--field);
    border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:12px 13px;outline:none;min-height:48px;margin:0;
    transition:border-color .15s,background .15s,box-shadow .15s}
.vrc-root select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23736A6C' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 14px center;padding-right:34px}
.vrc-root input:focus,.vrc-root select:focus{border-color:var(--red);background:var(--field-focus);box-shadow:0 0 0 3px var(--red-soft)}

/* Checkbox-Kacheln (wie .choice.check im Unfallformular) */
.vrc-root .choice{position:relative;display:block;grid-column:1/-1;margin-bottom:10px}
.vrc-root .choice input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}
.vrc-root .choice span{display:flex;align-items:flex-start;gap:10px;border:1.5px solid var(--line);border-radius:var(--radius-sm);
    padding:12px 14px;font-size:14px;font-weight:550;background:var(--field);cursor:pointer;transition:.15s;user-select:none;line-height:1.4}
.vrc-root .choice .dot{width:18px;height:18px;border-radius:6px;border:2px solid var(--line);flex:none;transition:.15s;position:relative;margin-top:1px;background:#fff}
.vrc-root .choice input:checked + span{border-color:var(--red);background:var(--red-soft);color:var(--red-dark)}
.vrc-root .choice input:checked + span .dot{border-color:var(--red);background:var(--red)}
.vrc-root .choice input:checked + span .dot::after{content:"";position:absolute;inset:0;margin:auto;width:5px;height:9px;border:2px solid #fff;border-top:0;border-left:0;transform:rotate(42deg) translateY(-1px)}
.vrc-root .choice input:focus-visible + span{box-shadow:0 0 0 3px var(--red-soft)}

/* Buttons */
.vrc-root .actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.vrc-root .btn{font-family:inherit;font-size:15px;font-weight:650;border-radius:var(--radius-sm);padding:13px 20px;cursor:pointer;
    border:1.5px solid transparent;transition:.15s;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;line-height:1.2}
.vrc-root .btn svg{width:17px;height:17px;flex:none}
.vrc-root .btn-primary{background:var(--red);color:#fff;box-shadow:0 6px 16px -8px var(--red)}
.vrc-root .btn-primary:hover{background:var(--red-dark);color:#fff}
.vrc-root .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.vrc-root .btn-ghost:hover{border-color:var(--ink);color:var(--ink)}
.vrc-root .btn-block{width:100%}
.vrc-root .btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--red-soft)}

/* Ergebnis */
.vrc-root .result{display:none;margin-top:22px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.vrc-root .result.visible{display:block;animation:vrc-rise .45s ease}
.vrc-root .result-head{padding:18px 20px;background:var(--canvas);border-bottom:1px solid var(--line)}
.vrc-root .pill{display:inline-flex;align-items:center;gap:6px;border-radius:99px;padding:4px 10px;font-size:11.5px;font-weight:700;letter-spacing:.02em;
    background:var(--amber-soft);color:#783b08}
.vrc-root .pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.vrc-root .pill.urgent{background:var(--red-soft);color:var(--red-dark)}
.vrc-root .pill.good{background:var(--success-soft);color:var(--success)}
.vrc-root .result-head h2{font-size:19px;line-height:1.25;letter-spacing:-.015em;margin:10px 0 3px;font-weight:750;color:var(--ink);text-wrap:balance}
.vrc-root .result-head h2:focus{outline:none}
.vrc-root .result-head p{margin:0;font-size:12.5px;color:var(--muted)}
.vrc-root .result-body{padding:18px 20px 20px;font-size:14.5px}
.vrc-root .result-body p{margin:8px 0}
.vrc-root .result-body ul{margin:8px 0 10px;padding-left:20px}
.vrc-root .result-body li{margin:4px 0}
.vrc-root .result-body h3{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--red);margin:20px 0 8px;font-weight:700}
.vrc-root .callout{border-left:3px solid var(--amber);background:var(--amber-soft);padding:12px 14px;margin:14px 0;border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-size:13.5px}
.vrc-root .callout.red{border-left-color:var(--red);background:var(--red-soft)}
.vrc-root .callout p{margin:6px 0}
.vrc-root .deadline{display:block;font-size:17px;font-weight:750;color:var(--ink);margin:0 0 4px;font-variant-numeric:tabular-nums}
.vrc-root .deadline small{display:block;font-size:12.5px;font-weight:550;color:var(--muted);margin-top:2px}
.vrc-root .warn{color:var(--red-dark);font-weight:650}
.vrc-root .summary-box{width:100%;min-height:150px;background:var(--field);border:1.5px solid var(--line);border-radius:var(--radius-sm);
    padding:12px 13px;color:var(--ink);font-family:inherit;font-size:13px;line-height:1.5;resize:vertical;margin:0}
.vrc-root .fineprint{font-size:12px;color:var(--muted);margin-top:12px}

.vrc-root .legal{width:100%;max-width:680px;color:var(--muted);font-size:11.5px;margin-top:16px;line-height:1.55}
.vrc-root .legal b{color:var(--ink)}
.vrc-root .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (prefers-reduced-motion:reduce){.vrc-root *{animation:none!important;transition:none!important}}
@media (max-width:600px){
  .vrc-root .topics,.vrc-root .grid{grid-template-columns:1fr}
  .vrc-root .head,.vrc-root .body{padding-left:18px;padding-right:18px}
  .vrc-root .result-head,.vrc-root .result-body{padding-left:16px;padding-right:16px}
  .vrc-root .head h1{font-size:21px}
  .vrc-root .actions .btn{flex:1 1 100%}
  }
@media print{
  .vrc-root .card{box-shadow:none;border:0}
  .vrc-root .topics,.vrc-root .form-wrap,.vrc-root .actions,.vrc-root .bar,.vrc-root .progress-meta,.vrc-root .body > .sub{display:none!important}
  .vrc-root .result{display:block!important;border:0}
}