/* Zusätzliche Stile für die Themenseiten „Barrierefreie Website“ und „Website-Sicherheit“ (28.10.2026).
   Alle Klassen beginnen mit „thm-“ bzw. „st“ (Selbsttest), damit sie anderen Bereichen nicht in die Quere kommen.
   Barrierefreiheit: Kontraste ≥ 4,5:1, sichtbarer Fokus, Bewegung nur ohne „weniger Bewegung“. */

/* ---------- Kurzantwort „Das Wichtigste in 30 Sekunden“ */
.thm-kurz{max-width:880px;padding:26px 28px 24px;border-radius:16px;background:var(--papier);border:1px solid var(--linie);
  box-shadow:inset 5px 0 0 var(--blau),0 18px 40px -32px rgba(20,23,28,.5)}
.thm-kurz__k{display:flex;align-items:center;gap:10px;margin:0 0 14px;font:600 12.5px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--blau-tief)}
.thm-kurz__k svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.thm-kurz ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.thm-kurz li{position:relative;padding-left:30px;font-size:17px;line-height:1.55;color:var(--anthrazit)}
.thm-kurz li::before{content:"";position:absolute;left:4px;top:.55em;width:10px;height:10px;border-radius:50%;background:var(--gelb);box-shadow:0 0 0 3px rgba(255,214,0,.25)}
.thm-kurz__fuss{margin:16px 0 0;font:500 12.5px/1.5 var(--mono);color:var(--leise)}

/* ---------- Selbsttest */
.st{max-width:880px;padding:28px 28px 24px;border-radius:16px;background:var(--papier);border:1px solid var(--linie);box-shadow:0 22px 48px -36px rgba(20,23,28,.55)}
.st__kopf{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 20px;margin-bottom:18px}
.st__kopf h3{margin:0;font-size:21px}
.st__stand{font:500 13px/1.3 var(--mono);color:var(--leise)}
.st__fragen{display:grid;gap:12px}
.st__frage{margin:0;padding:14px 16px;border:1px solid var(--linie);border-radius:12px;background:var(--kalk);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 18px;align-items:center}
.st__frage legend{float:left;padding:0;font-size:16.5px;line-height:1.45;color:var(--anthrazit)}
.st__frage legend small{display:block;margin-top:2px;font-size:14px;color:var(--leise)}
.st__wahl{display:flex;gap:8px}
.st__wahl label{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:64px;min-height:44px;padding:0 14px;border-radius:9px;border:1.5px solid #8a929c;background:var(--papier);
  font:600 15px var(--sans);color:var(--anthrazit);cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.st__wahl input{position:absolute;opacity:0;width:1px;height:1px}
.st__wahl label:hover{border-color:var(--anthrazit)}
.st__wahl label:has(input:checked){background:var(--blau);border-color:var(--blau);color:#fff}
.st__wahl label:has(input:focus-visible){outline:3px solid var(--anthrazit);outline-offset:2px}
.st__frage:has(input:checked){background:var(--papier);border-color:var(--blau-rand)}
@media (max-width:599px){ .st{padding:22px 16px 20px} .st__frage{grid-template-columns:minmax(0,1fr)} }
.st__ergebnis{margin-top:20px;padding:20px 22px;border-radius:12px;border:1px solid var(--linie);background:var(--kalk)}
.st__ergebnis p{margin:0 0 10px;max-width:70ch}
.st__ergebnis p:last-child{margin-bottom:0}
.st__stufe{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font:600 19px/1.3 var(--sora);color:var(--anthrazit)}
.st__punkt{width:16px;height:16px;border-radius:50%;background:var(--gut);box-shadow:0 0 0 4px var(--gut-bg)}
.st__stufe[data-s="mittel"] .st__punkt{background:var(--mittel);box-shadow:0 0 0 4px var(--mittel-bg)}
.st__stufe[data-s="schlecht"] .st__punkt{background:var(--schlecht);box-shadow:0 0 0 4px var(--schlecht-bg)}
.st__zahl{font:500 13.5px var(--mono);color:var(--leise)}
.st__luecken{margin:0 0 12px;padding-left:22px;display:grid;gap:8px}
.st__luecken b{color:var(--anthrazit)}
.st__klein{font:500 12.5px/1.5 var(--mono);color:var(--leise)}
.st__fuss{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:18px}
.st__neu{background:none;border:0;padding:6px 0;font:500 15px var(--sans);color:var(--blau-tief);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.st__neu:focus-visible{outline:3px solid var(--anthrazit);outline-offset:3px;border-radius:4px}
.st:not(.st--bereit) .st__js{display:none}
.st__ohnejs{margin-top:16px;font-size:15px;color:var(--leise)}
.st--bereit .st__ohnejs{display:none}
@media (prefers-reduced-motion:no-preference){
  .st__ergebnis--neu{animation:stNeu .5s cubic-bezier(.2,.8,.2,1)}
  @keyframes stNeu{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  .st__ergebnis--neu .st__punkt{animation:stPunkt .7s .15s cubic-bezier(.2,1.6,.4,1) both}
  @keyframes stPunkt{from{transform:scale(0)}to{transform:scale(1)}}
}

/* ---------- Notfall-Block „Website gehackt?“ */
.thm-notfall{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:28px;align-items:start;max-width:1040px;padding:30px;border-radius:16px;
  background:var(--papier);border:1px solid #f0c9c4;box-shadow:inset 5px 0 0 var(--schlecht)}
.thm-notfall ol{margin:0;padding:0;list-style:none;counter-reset:n;display:grid;gap:14px}
.thm-notfall li{counter-increment:n;position:relative;padding-left:46px;line-height:1.5}
.thm-notfall li::before{content:counter(n);position:absolute;left:0;top:-2px;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  background:var(--schlecht-bg);color:var(--schlecht);font:600 15px var(--sora)}
.thm-notfall li b{color:var(--anthrazit)}
.thm-notfall__ruf{padding:22px;border-radius:12px;background:var(--kalk);border:1px solid var(--linie)}
.thm-notfall__ruf p{margin:0 0 14px}
.thm-notfall__ruf .btn{width:100%}
@media (max-width:799px){ .thm-notfall{grid-template-columns:minmax(0,1fr);padding:22px 18px} }

/* ---------- Faktentabelle mit Quelle */
.thm-fakten caption{caption-side:bottom;text-align:left;padding:12px 4px 6px;font:500 12.5px/1.55 var(--mono);color:var(--leise)}
.thm-fakten caption a{color:var(--blau-tief)}

/* ---------- Ansprechpartner (E-E-A-T) */
.thm-person{display:flex;align-items:center;gap:18px;max-width:760px;margin-top:26px;padding:18px 20px;border-radius:14px;background:var(--papier);border:1px solid var(--linie)}
.thm-person img{flex:none;width:76px;height:76px;border-radius:50%;object-fit:cover}
.thm-person p{margin:0;font-size:15.5px;line-height:1.5}
.thm-person b{display:block;font:600 16.5px/1.3 var(--sora);color:var(--anthrazit)}
.dunkel .thm-person{background:var(--tanne-karte);border-color:var(--tanne-linie)}
.dunkel .thm-person b{color:#fff}
.thm-fakten tbody th{font:600 15.5px/1.5 var(--sans);letter-spacing:0;text-transform:none;color:var(--anthrazit);white-space:nowrap;padding-right:20px}
@media (max-width:639px){ .thm-fakten tbody th{white-space:normal} }
/* Faktentabelle am Handy: Frage über Antwort statt zwei Spalten (kein seitliches Scrollen) */
@media (max-width:639px){
  .lei-tabelle .thm-fakten{min-width:0}
  .thm-fakten thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .thm-fakten tbody tr{display:block;padding:12px 4px;border-bottom:1px solid var(--linie2)}
  .thm-fakten tbody tr:last-child{border-bottom:0}
  .thm-fakten tbody th,.thm-fakten tbody td{display:block;padding:0;border:0}
  .thm-fakten tbody th{margin-bottom:4px}
}