/* =========================================================================
   Öffentliche Seiten des Ticketsystems (service.beispiel.de)
   seit 1.51 im Stadtbild (Designvorschlag X): hell und amtlich in
   Stadtblau am Tag, gedämpft in der Nacht.

   Eigene Datei mit eigenen Schriften, weil unter der Subdomain die Dateien
   des Portals nicht erreichbar sind (der Webordner ist service/). Gedacht
   fürs Handy zuerst – gemeldet wird in der Fahrzeughalle.
   ========================================================================= */

@font-face{font-family:"Barlow"; src:url("schrift/barlow-latin-400-normal.woff2") format("woff2"); font-weight:400; font-display:swap}
@font-face{font-family:"Barlow"; src:url("schrift/barlow-latin-500-normal.woff2") format("woff2"); font-weight:500; font-display:swap}
@font-face{font-family:"Barlow"; src:url("schrift/barlow-latin-600-normal.woff2") format("woff2"); font-weight:600; font-display:swap}
@font-face{font-family:"Barlow"; src:url("schrift/barlow-latin-700-normal.woff2") format("woff2"); font-weight:700 900; font-display:swap}
@font-face{font-family:"Barlow Condensed"; src:url("schrift/barlow-condensed-latin-700-normal.woff2") format("woff2"); font-weight:600 900; font-display:swap}

:root{
  --grund:#F4F6F9; --flaeche:#FFFFFF; --mulde:#EEF1F5; --feld:#F7F9FB;
  --text:#14202E; --text2:#3A4858; --leise:#5B6878; --blass:#8A96A5;
  --linie:#DDE3EA; --linie2:#CBD3DD;
  --blau:#00539F; --blau-text:#00539F; --blau-hell:#E3EEF8; --leiste:#00539F;
  --rot:#C4000F; --rot-text:#C4000F; --rot-hell:#FDE7E8;
  --warn-text:#8A5A00; --warn-hell:#FFF4DB; --gruen-text:#1E7A45; --gruen-hell:#E4F5EA;
  --schatten:0 1px 2px rgba(20,32,46,.06), 0 6px 18px rgba(20,32,46,.05);
  --schrift:"Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --kopf:"Barlow Condensed", "Barlow", system-ui, sans-serif;
  --mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme:light;
}
html[data-thema="nacht"]{
  --grund:#0E141B; --flaeche:#172130; --mulde:#0B1118; --feld:#0B1118;
  --text:#E6ECF3; --text2:#C3CDD8; --leise:#93A1B3; --blass:#6C7A8C;
  --linie:#263243; --linie2:#334154;
  --blau:#2A6FBF; --blau-text:#78B4EE; --blau-hell:#16304F; --leiste:#13253A;
  --rot:#D0101C; --rot-text:#FF6B73; --rot-hell:#3B1418;
  --warn-text:#F2C35B; --warn-hell:#33290F; --gruen-text:#63D394; --gruen-hell:#12301F;
  --schatten:0 1px 2px rgba(0,0,0,.3), 0 6px 18px rgba(0,0,0,.25);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0; padding:0}
body{background:var(--grund); color:var(--text); font-family:var(--schrift); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; min-height:100vh; display:flex; flex-direction:column}
a{color:var(--blau-text)}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--blau); outline-offset:2px}

/* ---------- Kopf und Leiste ---------- */
.sv-kopf{display:flex; align-items:center; gap:16px; min-height:70px; padding:0 20px; background:var(--flaeche); border-bottom:1px solid var(--linie)}
.sv-marke{display:flex; align-items:center}
.sv-marke img{height:42px; width:auto; display:block}
.sv-logo-nacht{display:none!important}
html[data-thema="nacht"] .sv-logo-tag{display:none!important}
html[data-thema="nacht"] .sv-logo-nacht{display:block!important}
.sv-trenner{width:1px; height:34px; background:var(--linie)}
.sv-kopf-name{font-size:15px; font-weight:500; color:var(--leise)}
.sv-kopf-rechts{margin-left:auto; font-size:14px; color:var(--leise)}
/* Umschalter der Darstellung (seit 1.51.1): Automatisch · Tag · Nacht als Symbole */
.thema-schalter{display:flex; align-items:center; gap:2px; flex:none; margin-left:auto; padding:3px; border-radius:22px;
  background:var(--mulde); border:1px solid var(--linie)}
.sv-kopf-rechts + .thema-schalter{margin-left:14px}
.thema-schalter .ts-titel{display:none}
.thema-schalter .ts-wahl{display:flex; align-items:center; justify-content:center; gap:5px; height:32px; padding:0 11px 0 9px; border-radius:17px;
  color:var(--leise); text-decoration:none; font-size:13.5px; font-weight:600}
.thema-schalter .ts-wahl:hover{color:var(--text)}
.thema-schalter .ts-wahl.an{background:var(--flaeche); color:var(--text); box-shadow:0 1px 3px rgba(20,32,46,.18)}
html[data-thema="nacht"] .thema-schalter .ts-wahl.an{box-shadow:0 1px 3px rgba(0,0,0,.45)}
.thema-schalter svg{width:16px; height:16px; flex:none}
.sv-leiste{display:flex; align-items:stretch; min-height:50px; padding:0 12px; background:var(--leiste); color:#fff}
.sv-leiste a{display:flex; align-items:center; padding:0 14px; color:#fff; font-size:15px; font-weight:700; text-decoration:none; box-shadow:inset 0 -3px 0 #fff}
.sv-notruf{display:flex; align-items:center; margin-left:auto; padding:0 8px; font-size:14px; opacity:.9}

.sv-rumpf{flex:1 0 auto; width:100%; max-width:780px; margin:0 auto; padding:28px 18px 56px}
.sv-fuss{display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; padding:14px 20px; background:var(--flaeche);
  border-top:1px solid var(--linie); font-size:14px; color:var(--leise)}
.sv-fuss img{width:28px; height:35px; object-fit:contain}
.sv-fuss-rechts{margin-left:auto}

/* ---------- Einstieg ---------- */
.sv-einstieg{margin:0 0 22px}
.sv-etikett{font-size:14px; font-weight:600; color:var(--leise)}
.sv-einstieg h1{margin:6px 0 10px; font-family:var(--kopf); font-size:clamp(28px,6vw,38px); font-weight:700; line-height:1.05; text-wrap:balance}
.sv-einstieg p{margin:0; color:var(--leise); max-width:64ch}

/* ---------- Meldungen ---------- */
.sv-meldung{margin:0 0 18px; padding:14px 16px; border-radius:12px; font-size:15px; line-height:1.55; border:1px solid transparent}
.sv-meldung ul{margin:6px 0 0; padding-left:20px}
.sv-fehler{background:var(--rot-hell); color:var(--rot-text); border-color:rgba(196,0,15,.25)}
.sv-erfolg{background:var(--gruen-hell); color:var(--gruen-text); border-color:rgba(46,158,91,.25)}
.sv-warnung{background:var(--warn-hell); color:var(--warn-text); border-color:rgba(224,161,0,.3)}
.sv-info{background:var(--blau-hell); color:var(--text); border-color:var(--linie)}
.sv-schon{margin:8px 0; padding-left:20px}
.sv-schon li+li{margin-top:3px}
.sv-mono{font-family:var(--mono); font-size:.92em}

/* ---------- Formular ---------- */
.sv-form{display:flex; flex-direction:column; gap:18px}
.sv-block{margin:0; padding:20px 20px 22px; border:1px solid var(--linie); border-radius:14px; background:var(--flaeche); box-shadow:var(--schatten); min-width:0}
.sv-block legend{float:left; width:100%; margin:0 0 6px; padding:0; display:flex; align-items:center; gap:10px;
  font-family:var(--kopf); font-size:22px; font-weight:700}
.sv-block legend + *{clear:both}
.sv-schritt{display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--blau); color:#fff;
  font:700 14px var(--schrift)}
label{display:block; margin:16px 0 7px; font-size:15px; font-weight:600; color:var(--text2)}
input[type=text],input[type=email],select,textarea{width:100%; padding:13px 18px; font:inherit; font-size:16px; color:var(--text);
  background:var(--feld); border:1px solid var(--linie2); border-radius:24px; outline:none}
textarea{resize:vertical; min-height:120px; border-radius:16px}
input:focus,select:focus,textarea:focus{border-color:var(--blau); box-shadow:0 0 0 3px var(--blau-hell); background:var(--flaeche)}
select{appearance:none; padding-right:40px; background-image:linear-gradient(45deg,transparent 50%,var(--leise) 50%),linear-gradient(135deg,var(--leise) 50%,transparent 50%);
  background-position:calc(100% - 22px) 55%, calc(100% - 16px) 55%; background-size:6px 6px; background-repeat:no-repeat}
input[type=file]{width:100%; font:inherit; font-size:14px; color:var(--leise); padding:12px; border:1px dashed var(--linie2); border-radius:14px; background:var(--feld)}
.sv-leise{color:var(--leise); font-size:14px; font-weight:400; margin:8px 0 0}
label .sv-leise{font-size:13px; margin:0}
.sv-dateien{list-style:none; margin:6px 0 0; padding:0; font-size:13px; color:var(--leise)}
.sv-dateien .zu-gross{color:var(--rot-text)}
.sv-zwei{display:grid; grid-template-columns:1fr 1fr; gap:0 14px}
.sv-zwei > div > label{margin-top:10px}
.sv-falle{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* Kategorie-Kacheln wie die Kacheln des Portals */
.sv-wahl{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:10px}
.sv-kachel{position:relative; margin:0; padding:14px 14px 13px; min-height:84px; display:flex; flex-direction:column; gap:3px; cursor:pointer;
  background:var(--flaeche); border:1px solid var(--linie2); border-radius:12px; font-size:inherit; color:var(--text)}
.sv-kachel::before{content:""; width:10px; height:10px; border-radius:50%; background:var(--kf,#94a3b8); margin-bottom:6px}
.sv-kachel input{position:absolute; opacity:0; pointer-events:none}
.sv-kachel b{font-size:15px; font-weight:700; line-height:1.2; overflow-wrap:anywhere; hyphens:auto}
.sv-kachel small{font-size:13px; color:var(--leise); line-height:1.3}
.sv-kachel:hover{border-color:var(--blau)}
.sv-kachel:has(input:checked){border:2px solid var(--blau); padding:13px 13px 12px; background:var(--blau-hell)}
.sv-kachel:has(input:focus-visible){outline:2px solid var(--blau); outline-offset:2px}
.sv-kachel.vertraulich{border-style:dashed}

.sv-absenden{display:flex; flex-direction:column; gap:8px}
.sv-knopf{display:inline-flex; align-items:center; justify-content:center; appearance:none; border:0; border-radius:26px; cursor:pointer; text-decoration:none;
  background:var(--blau); color:#fff; font:700 16px var(--schrift); padding:0 26px; min-height:52px}
.sv-knopf:hover{filter:brightness(1.08)}
.sv-knopf:disabled{opacity:.6; cursor:wait}
.sv-knopf.still{background:var(--flaeche); color:var(--text); border:1px solid var(--linie2)}
.sv-knopfreihe{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}

/* ---------- Vorgang ---------- */
.sv-vorgang{margin:0 0 18px; padding:22px 24px; background:var(--flaeche); border:1px solid var(--linie); border-radius:14px; box-shadow:var(--schatten)}
.sv-nummer{font-family:var(--kopf); font-weight:700; font-size:clamp(30px,7vw,42px); color:var(--blau-text); line-height:1}
.sv-vorgang-kopf{display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; margin-top:12px}
.sv-vorgang h1{margin:10px 0 0; font-size:22px; line-height:1.25; font-weight:700; text-wrap:balance}
.sv-status{font-size:13px; font-weight:700; color:var(--text); background:color-mix(in srgb, var(--sf) 22%, transparent);
  border:1px solid color-mix(in srgb, var(--sf) 60%, transparent); padding:3px 10px; border-radius:12px}
.sv-verlauf{display:flex; flex-direction:column; gap:12px; margin-bottom:22px}
.sv-nachricht{border:1px solid var(--linie); background:var(--flaeche); border-radius:14px; padding:14px 16px}
.sv-nachricht.stab{border-left:4px solid var(--blau)}
.sv-nachricht header{display:flex; justify-content:space-between; gap:10px; font-size:13px; font-weight:600; color:var(--leise); margin-bottom:6px}
.sv-nachricht p{margin:0; overflow-wrap:anywhere}
.sv-anhang{display:inline-block; margin:8px 8px 0 0; font-size:13px; font-weight:600; border:1px solid var(--linie2); border-radius:14px; padding:5px 11px; text-decoration:none}
.sv-anhang.weg{opacity:.55; text-decoration:line-through}
.sv-anhang.sv-laden{margin-left:-4px; padding:5px 10px}

@media (max-width:620px){
  .sv-wahl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sv-zwei{grid-template-columns:1fr}
  .sv-kopf-name,.sv-trenner,.sv-kopf-rechts{display:none}
  .sv-kopf{gap:10px; padding:0 14px}
  .thema-schalter .ts-wahl{height:30px; padding:0 8px 0 7px; gap:4px; font-size:13px}
  .thema-schalter svg{width:14px; height:14px}
  .sv-marke img{height:36px}
  .sv-block{padding:16px 14px 18px}
  .sv-kachel b{font-size:14px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Rechtliches (1.61) */
.sv-fuss-rechts{display:flex; flex-wrap:wrap; gap:6px 18px}
.sv-fuss-rechts a, .sv-datenschutz a, .recht a{color:var(--blau-text)}
.recht{max-width:820px; line-height:1.6}
.recht h2{margin:1.6em 0 .5em; font-size:1.2rem}
.recht h3{margin:1.2em 0 .4em; font-size:1.05rem}
.recht ul{padding-left:1.3em}
.recht-tabelle{overflow-x:auto; margin:0 0 1.1em}
.recht-tabelle table{border-collapse:collapse; width:100%; font-size:.93rem}
.recht-tabelle th, .recht-tabelle td{border:1px solid var(--linie); padding:6px 9px; text-align:left; vertical-align:top}
.recht-tabelle th{background:var(--mulde)}
.recht-platzhalter{background:var(--warn-hell); color:var(--warn-text); padding:0 3px; border-radius:3px}
.recht-stand{color:var(--leise); font-size:.9rem; margin-top:2em}
.sv-datenschutz{font-size:.85rem; color:var(--leise); margin:.6em 0 0}

/* 1.63: Kontaktformular im Impressum, Ergänzung zur Datenschutzerklärung */
.recht-kontakt{margin:2em 0 0; padding:18px 20px; border:1px solid var(--linie); border-radius:16px; background:var(--flaeche)}
.recht-kontakt h2{margin-top:0}
.recht-form{display:flex; flex-direction:column; gap:8px}
.recht-form label{font-weight:600; font-size:14px; margin-top:6px}
.recht-form button{align-self:flex-start; margin-top:8px}
.recht-zwei{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.recht-zwei > div{display:flex; flex-direction:column; gap:6px}
.recht-falle{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.recht-leise,.recht-hinweis{color:var(--leise); font-size:14px}
.recht-ok{padding:12px 14px; border-radius:12px; background:var(--gruen-hell, rgba(34,197,94,.12))}
.recht-fehler{padding:12px 14px; border-radius:12px; background:var(--rot-hell, rgba(239,68,68,.12))}
@media (max-width:640px){ .recht-zwei{grid-template-columns:1fr} }

/* 1.63.5: Tabellen der Rechtstexte auf dem Handy als Karten – kein Wischen zur Seite */
@media (max-width:640px){
  .recht-tabelle{overflow:visible}
  .recht-tabelle table, .recht-tabelle tbody, .recht-tabelle tr,
  .recht-tabelle td{display:block; width:auto}
  .recht-tabelle thead{display:none}
  .recht-tabelle tr{border:1px solid var(--linie); border-radius:10px; padding:8px 12px; margin:0 0 10px}
  .recht-tabelle td{border:0; padding:3px 0; overflow-wrap:anywhere}
  .recht-tabelle td:first-child{font-weight:700}
  .recht-tabelle td[data-kopf]:not([data-kopf=""]):not(:first-child)::before{content:attr(data-kopf) ": "; font-weight:600; color:var(--leise, #667)}
}
.recht{overflow-wrap:anywhere}

/* 1.97.4: Zuständigkeit – Abstand zwischen Personenliste und freien Adressen */
.sv-freie-mail{margin-top:22px; padding-top:16px; border-top:1px solid var(--x-linie, rgba(127,127,127,.25))}

/* 1.119.0: Wäscheabwurf – Mehrfachauswahl, Schieberegler mit Zusatzfeld */
.sv-mehrfach .sv-kachel{min-height:64px; justify-content:center}
.sv-mehrfach .sv-kachel::before{content:""; position:absolute; top:12px; right:12px; width:20px; height:20px; margin:0; border-radius:6px;
  border:2px solid var(--linie2); background:var(--flaeche)}
.sv-mehrfach .sv-kachel:has(input:checked)::before{background:var(--blau); border-color:var(--blau);
  box-shadow:inset 0 0 0 3px var(--flaeche)}
.sv-mehrfach .sv-kachel b{padding-right:26px}
.sv-schalter-zeile{margin-top:16px; padding:14px 16px; border:1px solid var(--linie); border-radius:12px; background:var(--feld)}
.sv-schalter{display:flex; align-items:center; gap:14px; margin:0; cursor:pointer; text-transform:none; letter-spacing:0; font-weight:400}
.sv-schalter input{position:absolute; opacity:0; width:1px; height:1px}
.sv-schalter-regler{position:relative; flex:none; width:52px; height:30px; border-radius:99px; background:var(--linie2); transition:background .15s}
.sv-schalter-regler::after{content:""; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .15s}
.sv-schalter input:checked + .sv-schalter-regler{background:var(--blau)}
.sv-schalter input:checked + .sv-schalter-regler::after{transform:translateX(22px)}
.sv-schalter input:focus-visible + .sv-schalter-regler{outline:2px solid var(--blau); outline-offset:2px}
.sv-schalter span:last-child{display:flex; flex-direction:column; gap:2px}
.sv-schalter b{font-size:16px; color:var(--text)}
.sv-schalter small{font-size:13px; color:var(--leise)}
.sv-schalter-feld{margin-top:12px}
.sv-schalter-feld[hidden]{display:none}
.sv-schalter-feld label{margin-top:0}
@media (prefers-reduced-motion:reduce){.sv-schalter-regler,.sv-schalter-regler::after{transition:none}}

/* 1.119.0: Angaben des Wäscheabwurfs im Ticket */
.sv-abwurf{margin:0 0 16px; padding:16px 18px; border:1px solid var(--linie); border-left:5px solid #0A7C8C; border-radius:12px; background:var(--flaeche)}
.sv-abwurf h3{margin:0 0 10px; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--leise)}
.sv-abwurf-teile{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px}
.sv-abwurf-teile span{padding:5px 12px; border-radius:99px; background:var(--mulde); border:1px solid var(--linie2); font-weight:600; font-size:14px}
.sv-abwurf-zeile{display:flex; gap:10px; align-items:flex-start; margin-top:8px; padding:10px 12px; border-radius:10px; font-size:14.5px}
.sv-abwurf-zeile i{font-style:normal; font-size:18px; line-height:1.1}
.sv-abwurf-zeile.infektion{background:var(--rot-hell); color:var(--rot-text)}
.sv-abwurf-zeile.defekt{background:var(--warn-hell); color:var(--warn-text)}
.sv-abwurf-zeile.ohne{background:var(--mulde); color:var(--leise)}