/* GTS Berichte – gemeinsame Gestaltungsbasis (Prototyp) */
:root{
  --blau:#0086D2; --blau-tief:#006BAA; --blau-hauch:#E6F3FB;
  --rot:#DE0D1A;
  --asphalt:#141922; --asphalt-2:#232A36;
  --gelb:#F2A900; --gelb-hauch:#FFF5D6; --gelb-text:#7A5300;
  --gruen:#1E9E5A; --gruen-hauch:#E3F5EB;
  --fehler:#C8102E; --fehler-hauch:#FDE8EB;

  --grund:#F3F5F8; --flaeche:#FFFFFF; --flaeche-2:#F7F9FB;
  --text:#141922; --text-2:#5A6372; --text-3:#8A93A3;
  --linie:#E1E6ED; --linie-stark:#C9D1DC;
  --schatten:0 1px 2px rgba(20,25,34,.06),0 8px 24px rgba(20,25,34,.06);
  --fokus:0 0 0 3px rgba(0,134,210,.35);

  --f-anzeige:"Barlow Semi Condensed",Barlow,system-ui,sans-serif;
  --f-text:Barlow,system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace;
  --r:14px; --r-klein:9px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --grund:#0E1218; --flaeche:#171C25; --flaeche-2:#1D2330;
    --text:#EEF2F7; --text-2:#A9B2C1; --text-3:#7C8697;
    --linie:#283041; --linie-stark:#36405280;
    --blau-hauch:#0B2A3F; --gelb-hauch:#3A2E0B; --gelb-text:#FFD36B;
    --gruen-hauch:#0F2E20; --fehler-hauch:#3A1219;
    --schatten:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"]{
  --grund:#0E1218; --flaeche:#171C25; --flaeche-2:#1D2330;
  --text:#EEF2F7; --text-2:#A9B2C1; --text-3:#7C8697;
  --linie:#283041; --linie-stark:#36405280;
  --blau-hauch:#0B2A3F; --gelb-hauch:#3A2E0B; --gelb-text:#FFD36B;
  --gruen-hauch:#0F2E20; --fehler-hauch:#3A1219;
  --schatten:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.3);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--grund);color:var(--text);font:400 16px/1.5 var(--f-text);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:none;box-shadow:var(--fokus);border-radius:8px}
img{max-width:100%;display:block}
.mono{font-family:var(--f-mono);font-weight:500;letter-spacing:-.01em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Knöpfe ---------- */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;padding:12px 18px;
  font:600 16px/1 var(--f-anzeige);letter-spacing:.01em;transition:transform .12s var(--ease),background-color .15s,box-shadow .15s;-webkit-tap-highlight-color:transparent;text-decoration:none}
.knopf:active{transform:scale(.97)}
.knopf svg{width:20px;height:20px;flex:none}
.knopf-primaer{background:var(--blau);color:#fff}
.knopf-primaer:hover{background:var(--blau-tief)}
.knopf-ruhig{background:var(--flaeche);color:var(--text);box-shadow:inset 0 0 0 1.5px var(--linie-stark)}
.knopf-ruhig:hover{background:var(--flaeche-2)}
.knopf-gelb{background:var(--gelb);color:#2A1E00}
.knopf-text{background:none;color:var(--blau);padding:8px 10px}
.knopf[disabled]{opacity:.45;pointer-events:none}

/* ---------- Status-Chip ---------- */
.status{display:inline-flex;align-items:center;gap:6px;font:600 13px/1 var(--f-anzeige);letter-spacing:.02em;padding:6px 10px 6px 8px;border-radius:999px;white-space:nowrap}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.status[data-s="pruefung"]{background:var(--blau-hauch);color:var(--blau)}
.status[data-s="korrektur"]{background:var(--gelb-hauch);color:var(--gelb-text)}
.status[data-s="laeuft"]{background:var(--blau-hauch);color:var(--blau)}
.status[data-s="laeuft"]::before{animation:puls 1s infinite}
.status[data-s="versendet"]{background:var(--gruen-hauch);color:var(--gruen)}
.status[data-s="fehler"]{background:var(--fehler-hauch);color:var(--fehler)}
.status[data-s="warteschlange"]{background:var(--flaeche-2);color:var(--text-2);box-shadow:inset 0 0 0 1px var(--linie)}
@keyframes puls{50%{opacity:.25}}

/* ---------- EU-Kennzeichen ---------- */
.kennzeichen{display:inline-flex;align-items:stretch;height:24px;border-radius:4px;background:#fff;color:#111;box-shadow:inset 0 0 0 1.5px #111;
  font:600 14px/24px var(--f-anzeige);letter-spacing:.06em;overflow:hidden;white-space:nowrap}
.kennzeichen::before{content:"D";display:grid;place-items:end center;width:13px;background:#003399;color:#fff;font-size:8px;line-height:1;padding-bottom:3px;letter-spacing:0}
.kennzeichen span{padding:0 7px 0 5px}

/* ---------- Strecke: Weg eines Berichts als Fahrbahn ---------- */
.strecke{--stufe:0;position:relative;padding-top:4px}
.strecke .bahn{position:relative;height:10px;border-radius:5px;background:var(--asphalt-2);overflow:visible}
.strecke .bahn::before{content:"";position:absolute;left:6px;right:6px;top:4px;height:2px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.55) 0 8px,transparent 8px 16px)}
.strecke .gefahren{position:absolute;left:0;top:0;bottom:0;border-radius:5px;background:var(--blau);width:calc(var(--stufe) * 50%);transition:width .9s var(--ease)}
.strecke .lkw{position:absolute;top:-12px;left:calc(var(--stufe) * 50%);transform:translateX(calc(var(--stufe) * -50%));width:30px;height:16px;color:var(--text);transition:left .9s var(--ease),transform .9s var(--ease)}
.strecke .halte{display:flex;justify-content:space-between;margin-top:8px;font:500 12px/1.2 var(--f-anzeige);color:var(--text-3);letter-spacing:.02em}
.strecke .halte span:nth-child(2){text-align:center}
.strecke .halte span:last-child{text-align:right}
.strecke .halte span.erreicht{color:var(--text)}
.strecke .baustelle{position:absolute;top:-13px;width:18px;height:18px;transform:translateX(-50%)}
.strecke[data-s="korrektur"] .gefahren{background:var(--gelb)}
.strecke[data-s="fehler"] .gefahren{background:var(--fehler)}
.strecke[data-s="versendet"] .gefahren{background:var(--gruen)}

/* Signet-Schwung (aus dem Logo) */
.schwung{display:block;height:6px;width:100%;background:var(--rot);clip-path:polygon(0 92%,100% 0,86% 100%,0 100%)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
.status[data-s="verworfen"]{background:var(--flaeche-2);color:var(--fehler);box-shadow:inset 0 0 0 1px var(--linie)}