:root {
  --bg: #0b0b0b;
  --karte: #17151c;
  --linie: #2c2833;
  --text: #f1eee8;
  --leise: #a9a3b0;
  --akzent: #ff3333;
  --akzent2: #ff7a1a;
  --gut: #3ccf7a;
  --mittel: #f2b632;
  --schlecht: #ff6b5e;
  --head: 'Staatliches', Impact, 'Arial Narrow Bold', sans-serif;
  --body: 'Roboto Condensed', system-ui, -apple-system, Arial, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.55 var(--body); }
a { color: var(--akzent); }
.wrap { max-width: 860px; margin: 0 auto; padding: 0 16px; }

.kopf { padding: 44px 0 34px; text-align: center;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,51,51,.25), transparent 65%), linear-gradient(#1b1720, var(--bg));
  border-bottom: 1px solid var(--linie); }
.dach { margin: 0; color: var(--leise); letter-spacing: .14em; text-transform: uppercase; font-size: 14px; }
.marke { margin: 6px 0 2px; font: 64px/1 var(--head); letter-spacing: .04em; color: var(--akzent);
  text-shadow: 0 0 28px rgba(255,51,51,.4); }
.unter { margin: 0; color: var(--leise); }

h1, h2, h3 { font-family: var(--head); font-weight: 400; letter-spacing: .03em; line-height: 1.1; }
h1 { font-size: 40px; margin: 34px 0 12px; }
h2 { font-size: 30px; margin: 0 0 14px; color: var(--akzent); }
h3 { font-size: 22px; margin: 26px 0 8px; }
.intro p { margin: 0 0 12px; }
.frist { color: var(--leise); }

.karte { background: var(--karte); border: 1px solid var(--linie); border-radius: 14px; padding: 24px; margin: 26px 0; }
.spezifikation { width: 100%; border-collapse: collapse; margin: 16px 0; }
.spezifikation th, .spezifikation td { text-align: left; vertical-align: top; padding: 9px 10px; border-top: 1px solid var(--linie); }
.spezifikation th { width: 130px; color: var(--leise); font-weight: 400; }
.pruefhilfe { border-top: 1px solid var(--linie); padding-top: 14px; }
.pruefhilfe summary { cursor: pointer; color: var(--akzent); font-weight: 700; }
.pruefhilfe li { margin-bottom: 8px; }

.raster { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
label { display: block; font-weight: 700; margin-bottom: 14px; }
.raster label { margin-bottom: 0; }
input, select, textarea { display: block; width: 100%; margin-top: 6px; padding: 11px 12px; font: 17px var(--body);
  color: var(--text); background: #0f0e13; border: 1px solid #3a3542; border-radius: 9px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--akzent); outline-offset: 1px; border-color: transparent; }
input[type=file] { padding: 10px; cursor: pointer; }
input[type=file]::file-selector-button { font: 700 15px var(--body); margin-right: 12px; padding: 8px 14px; border: 0;
  border-radius: 7px; background: var(--akzent); color: #fff; cursor: pointer; }
small { display: block; font-weight: 400; color: var(--leise); font-size: 14px; margin-top: 5px; }
.frei { font-weight: 400; color: var(--leise); }
.datei { margin-top: 4px; }
.haken { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; }
.haken input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--akzent); }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.pruefung { border-radius: 10px; padding: 12px 16px; margin: -4px 0 16px; border: 1px solid var(--linie); background: #121016; }
.pruefung p { margin: 0 0 6px; font-weight: 700; }
.pruefung ul { list-style: none; margin: 6px 0; padding: 0; }
.pruefung li { padding: 3px 0 3px 26px; position: relative; }
.pruefung li::before { content: ''; position: absolute; left: 4px; top: 10px; width: 11px; height: 11px; border-radius: 50%; background: var(--leise); }
.pruefung li.gut::before { background: var(--gut); }
.pruefung li.mittel::before { background: var(--mittel); }
.pruefung li.schlecht::before { background: var(--schlecht); }
.pruefung.gut { border-color: rgba(60,207,122,.5); }
.pruefung.mittel { border-color: rgba(242,182,50,.5); }
.pruefung.schlecht { border-color: rgba(255,107,94,.6); }
.pruefung > p:last-child:not(:first-child) { font-weight: 400; color: var(--leise); }

button, .knopf { display: inline-block; font: 26px/1 var(--head); letter-spacing: .05em; padding: 14px 34px; border: 0; border-radius: 10px;
  background: var(--akzent); color: #fff; cursor: pointer; text-decoration: none; }
button:hover, .knopf:hover { filter: brightness(1.08); }
button:disabled { opacity: .5; cursor: wait; }
button.zweit { font: 700 15px var(--body); padding: 9px 16px; background: transparent; color: var(--leise); border: 1px solid var(--linie); }
.meldung { background: rgba(255,107,94,.12); border: 1px solid var(--schlecht); border-radius: 9px; padding: 10px 14px; }
.meldung.gut { background: rgba(60,207,122,.12); border-color: var(--gut); }
.leise { color: var(--leise); font-size: 15px; }

.balken { height: 26px; background: #0f0e13; border: 1px solid var(--linie); border-radius: 13px; overflow: hidden; }
#balken-fuellung { height: 100%; width: 0; border-radius: 13px; transition: width .3s;
  background: linear-gradient(90deg, var(--akzent2), var(--akzent)); }
.zahlen { margin: 12px 0; }
.zahlen strong { font: 30px var(--head); color: var(--akzent); margin-right: 10px; }
.erfolg { border-color: rgba(60,207,122,.5); }
.erfolg h2 { color: var(--gut); }

.ampel { display: flex; align-items: center; gap: 14px; margin: 6px 0 8px; }
.lichter { display: inline-flex; gap: 6px; padding: 6px 9px; background: #050507; border: 1px solid var(--linie); border-radius: 20px; }
.lichter i { width: 18px; height: 18px; border-radius: 50%; opacity: .18; }
.lichter i.schlecht { background: var(--schlecht); }
.lichter i.mittel { background: var(--mittel); }
.lichter i.gut { background: var(--gut); }
.lichter i.an { opacity: 1; box-shadow: 0 0 12px currentColor; }
.lichter i.schlecht.an { color: var(--schlecht); } .lichter i.mittel.an { color: var(--mittel); } .lichter i.gut.an { color: var(--gut); }
.ampel .urteil { font: 22px var(--head); letter-spacing: .03em; }
.pruefung.gut .urteil { color: var(--gut); } .pruefung.mittel .urteil { color: var(--mittel); } .pruefung.schlecht .urteil { color: var(--schlecht); }
.pruefung.neutral .urteil { color: var(--leise); }
.ampel-text { font-weight: 700; } .ampel-text.gut { color: var(--gut); } .ampel-text.mittel { color: var(--mittel); } .ampel-text.schlecht { color: var(--schlecht); }
.pruefung > p:first-child { font-weight: 400; color: var(--leise); }
.prio-hinweis { background: rgba(242,182,50,.08); border-left: 3px solid var(--akzent); padding: 10px 14px; border-radius: 6px; margin: 22px 0 6px; }
fieldset.video { position: relative; border: 1px solid var(--linie); border-radius: 12px; padding: 14px 18px 4px; margin: 16px 0; background: #121016; }
fieldset.video legend { font: 22px var(--head); letter-spacing: .03em; padding: 0 8px; }
.prio-marke { font: 700 13px var(--body); letter-spacing: 0; color: #fff; background: var(--akzent); border-radius: 20px; padding: 2px 10px; margin-left: 8px; vertical-align: middle; }
fieldset.video[data-nr="2"] .prio-marke, fieldset.video[data-nr="3"] .prio-marke { background: #3a3542; color: var(--text); }
.entfernen { position: absolute; top: -6px; right: 14px; }
#mehr { margin-top: 2px; }
.raten { border-collapse: collapse; margin: 2px 0 6px; }
.raten th, .raten td { padding: 3px 14px 3px 0; border: 0; font-size: 15px; text-align: left; }
.raten th { color: var(--leise); font-weight: 400; }

.fuss { border-top: 1px solid var(--linie); margin-top: 40px; padding: 24px 0 40px; color: var(--leise); font-size: 14px; text-align: center; }
.fuss a { color: var(--leise); }

.text h2 { font-size: 24px; margin-top: 28px; }
.text p, .text li { color: #dcd8d2; }

@media (max-width: 640px) {
  .marke { font-size: 44px; }
  h1 { font-size: 30px; }
  .raster { grid-template-columns: 1fr; }
  .karte { padding: 18px 16px; }
  .spezifikation th { width: auto; display: block; padding-bottom: 0; border: 0; }
  .spezifikation td { display: block; padding-top: 2px; }
  .spezifikation tr { display: block; border-top: 1px solid var(--linie); padding: 6px 0; }
  .spezifikation .raten tr { display: table-row; border: 0; padding: 0; }
  .spezifikation .raten th, .spezifikation .raten td { display: table-cell; width: auto; padding: 3px 10px 3px 0; }
  fieldset.video { padding: 14px 12px 4px; }
  .entfernen { position: static; margin-bottom: 10px; }
}

/* Augenzeugen */
.logo { width: 120px; height: auto; display: block; margin: 0 auto 6px; }
.kurz { list-style: none; padding: 0; margin: 14px 0 0; }
.kurz li { margin: 4px 0; }
.dateiliste { list-style: none; padding: 0; margin: -4px 0 16px; font-size: 15px; }
.dateiliste li { padding: 8px 12px; margin: 6px 0; border-radius: 8px; background: #121016; border: 1px solid var(--linie); word-break: break-all; }
.dateiliste li.gut { border-color: rgba(60,207,122,.45); }
.dateiliste li.schlecht { border-color: var(--schlecht); color: var(--schlecht); }
select { font-size: 16px; }
.zwei-wege { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 22px 0 0; }
.zwei-wege .karte { margin: 0; }
.zwei-wege h2 { font-size: 26px; }
.handles a { display: block; font-weight: 700; margin: 6px 0; text-decoration: none; }
.publikum { margin: 4px 0 14px; }
.knopf { font-size: 22px; padding: 11px 24px; }
@media (max-width: 640px) { .zwei-wege { grid-template-columns: 1fr; } }