/* Itolia Scanmind – schlankes, lokales Stylesheet (kein Framework, CSP-konform).
   Farben nach itolia.de: Orange hsl(24 95% 50%) (Logo #f07d00 → #e6500f), warme Grautöne. */
:root {
  --fg: #1f1f1f; --bg: #f5f4f2; --karte: #fff; --rand: #e3dfdb; --flaeche: #edeae7;
  --akzent: #e6500f; --akzent-hell: #f07d00; --akzent-dunkel: #c2410c;
  --ok: #1b7f3b; --hinweis: #b45309; --fehler: #b3261e; --grau: #5a5a55;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--fg); background: var(--bg); line-height: 1.45; font-size: 15px; }
a { color: var(--akzent-dunkel); }
header.kopf { background: #1e1e1e; color: #e6e6e6; border-bottom: 3px solid var(--akzent-hell); padding: .6rem 1.2rem; display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
header.kopf .marke { font-weight: 600; font-size: 1.05rem; text-decoration: none; color: #fff; display: inline-flex; align-items: center; gap: .6rem; }
header.kopf .marke .logo { height: 1.9rem; width: auto; background: #fff; border-radius: 4px; padding: .2rem .45rem; }
header.kopf .marke span { letter-spacing: .02em; }
header.kopf nav a { margin-right: .9rem; text-decoration: none; color: #c9c9c5; }
header.kopf nav a.aktiv, header.kopf nav a:hover { color: var(--akzent-hell); }
header.kopf .status { margin-left: auto; font-size: .85rem; color: #c9c9c5; display: flex; gap: 1rem; align-items: center; }
header.kopf .status strong { color: #fff; }
header.kopf .status form { display: inline; }
header.kopf select { background: #2b2b2b; color: #fff; border: 1px solid #5a5a55; border-radius: 3px; padding: .15rem .3rem; }
main { max-width: 72rem; margin: 1.2rem auto; padding: 0 1.2rem; }
h1 { font-size: 1.45rem; margin: .2rem 0 1rem; }
h2 { font-size: 1.15rem; margin: 1.6rem 0 .6rem; }
h3 { font-size: 1rem; margin: 1.1rem 0 .4rem; }
.karte { background: var(--karte); border: 1px solid var(--rand); border-radius: 6px; padding: 1rem 1.2rem; margin-bottom: 1rem; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .8rem; }
.kachel { background: var(--karte); border: 1px solid var(--rand); border-left: 4px solid var(--akzent-hell); border-radius: 6px; padding: .8rem 1rem; }
.kachel .zahl { font-size: 1.7rem; font-weight: 700; }
.kachel .titel { color: var(--grau); font-size: .85rem; }
table { border-collapse: collapse; width: 100%; background: var(--karte); }
th, td { text-align: left; vertical-align: top; padding: .4rem .55rem; border-bottom: 1px solid var(--rand); }
th { background: var(--flaeche); font-weight: 600; }
tr:hover td { background: #fbf7f3; }
code { background: var(--flaeche); padding: .05rem .3rem; border-radius: 3px; font-size: .9em; }
.meldung { padding: .6rem .9rem; border-radius: 5px; margin-bottom: .8rem; border-left: 4px solid var(--akzent-hell); background: #fff3e8; }
.meldung.ok { border-color: var(--ok); background: #e7f5ec; }
.meldung.warnung { border-color: var(--hinweis); background: #fff4e0; }
.meldung.fehler { border-color: var(--fehler); background: #fdeceb; }
.meldung.info { border-color: var(--grau); background: var(--flaeche); }
.banner { padding: .7rem 1rem; border-radius: 5px; margin-bottom: 1rem; background: #fdeceb; border: 1px solid #f1b8b4; }
.banner.warnung { background: #fff4e0; border-color: #f0d49a; }
.status-OK, .status-VALIDIERT, .status-EXPORTIERT, .status-FREIGEGEBEN { color: var(--ok); font-weight: 600; }
.status-HINWEIS, .status-PRUEFUNG, .status-EINGANG, .status-AUSGELESEN { color: var(--hinweis); font-weight: 600; }
.status-FEHLER, .status-ABWEICHUNG, .status-UNVOLLSTAENDIG, .status-ABGELEHNT { color: var(--fehler); font-weight: 600; }
form.formular label { display: block; font-weight: 600; margin: .7rem 0 .2rem; }
form.formular input[type=text], form.formular input[type=password], form.formular input[type=number], form.formular input[type=email], form.formular select, form.formular textarea { width: 100%; max-width: 36rem; padding: .45rem .55rem; border: 1px solid var(--rand); border-radius: 4px; font: inherit; }
form.formular input:focus, form.formular select:focus, form.formular textarea:focus { outline: 2px solid var(--akzent-hell); outline-offset: 1px; }
form.formular textarea { font-family: ui-monospace, Consolas, monospace; font-size: .9rem; }
form.formular .hilfe { color: var(--grau); font-size: .85rem; margin-top: .15rem; }
form.formular .zeile { display: flex; gap: 1rem; flex-wrap: wrap; }
form.formular .zeile > div { flex: 1 1 14rem; }
button, .knopf, a.knopf, a.knopf:visited { font: inherit; font-weight: 600; padding: .45rem .9rem; border-radius: 4px; border: 1px solid var(--akzent); background: var(--akzent); color: #fff; cursor: pointer; text-decoration: none; display: inline-block; line-height: 1.3; }
button:hover, .knopf:hover, a.knopf:hover { background: var(--akzent-dunkel); border-color: var(--akzent-dunkel); color: #fff; }
button.sekundaer, .knopf.sekundaer, a.knopf.sekundaer, a.knopf.sekundaer:visited { background: #fff; color: var(--akzent-dunkel); border-color: var(--akzent); }
button.sekundaer:hover, .knopf.sekundaer:hover, a.knopf.sekundaer:hover { background: #fff3e8; color: var(--akzent-dunkel); }
button.gefahr { background: var(--fehler); border-color: var(--fehler); color: #fff; }
button.gefahr:hover { background: #8f1e18; border-color: #8f1e18; }
button:disabled, button[disabled] { background: #c9c9c5; border-color: #c9c9c5; color: #fff; cursor: not-allowed; }
button.klein, .knopf.klein { padding: .2rem .55rem; font-size: .85rem; }
.aktionen { margin-top: 1rem; display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.inline { display: inline; }
.rechts { text-align: right; }
.klein { font-size: .85rem; color: var(--grau); }
.mono { font-family: ui-monospace, Consolas, monospace; font-size: .9em; }
.zweispaltig { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1rem; }
.feldliste dt { font-weight: 600; color: var(--grau); font-size: .85rem; margin-top: .5rem; }
.feldliste dd { margin: 0; }
.login { max-width: 24rem; margin: 4rem auto; }
footer { color: var(--grau); font-size: .85rem; text-align: center; padding: 2rem 0; }
.feld-tabelle input[type=text] { width: 100%; min-width: 10rem; padding: .3rem .4rem; border: 1px solid var(--rand); border-radius: 3px; font: inherit; font-size: .9rem; }
.feld-tabelle select { padding: .3rem; font: inherit; font-size: .9rem; }
.feld-tabelle td { vertical-align: middle; }
.inline-label { display: inline; font-weight: normal; }
.schalter { margin-top: .6rem; }
.schmal { width: 8rem; }
pre.klein { white-space: pre-wrap; background: var(--flaeche); padding: .6rem; border-radius: 4px; }
.tabs { margin-bottom: .8rem; }
.tabs a { margin-right: 1rem; text-decoration: none; color: var(--grau); }
.tabs a.aktiv { color: var(--akzent-dunkel); font-weight: 600; border-bottom: 2px solid var(--akzent-hell); }
main.breit { max-width: 120rem; }
.pruefung { grid-template-columns: 3fr 2fr; }
.pruefung.gross { grid-template-columns: 1fr; }
.vorschau h3 { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.vorschau iframe { width: 100%; height: max(74vh, 680px); border: 1px solid var(--rand); background: #fff; }
.pruefung.gross .vorschau iframe { height: 90vh; }
.vorschau img { max-width: 100%; border: 1px solid var(--rand); }
@media (max-width: 72rem) { .pruefung { grid-template-columns: 1fr; } }
.kopfdaten { display: flex; gap: 1.5rem; flex-wrap: wrap; }