/* Simple pages (sign-in, password, administration, operator, public overview) – design system Frank Nägler */
@font-face { font-family: "Archivo"; font-weight: 100 900; font-display: swap; src: url("/fonts/archivo-var.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-weight: 400 700; font-display: swap; src: url("/fonts/instrument-sans-var.woff2") format("woff2"); }
:root { --rot: #a33a32; --rot-text: #7e2b24; --blau: #16202b; --grau: #5c6570;
  --bg: #ffffff; --papier: #f7f4ef; --flaeche: #ede8e0; --linie: #dfd9d0; --fg: #16202b;
  --faellig: #f5ebd5; --faellig-fg: #7a5c13; --ok: #2c7a75; --auf-akzent: #ffffff;
  --serif: "Archivo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; }
@media (prefers-color-scheme: dark) { :root { --rot: #d8867f; --rot-text: #d8867f; --blau: #e8e4dd; --grau: #9aa4b0;
  --bg: #1f2b38; --papier: #16202b; --flaeche: #1f2b38; --linie: #2c3846; --fg: #e8e4dd;
  --faellig: #3b2f12; --faellig-fg: #e3c068; --ok: #4fa9a2; --auf-akzent: #16202b; color-scheme: dark; } }
* { box-sizing: border-box; }
/* the attribute must win over display rules of components */
[hidden] { display: none !important; }
body { margin: 0; background: var(--papier); color: var(--fg); font: 15px/1.5 var(--sans); }
main { max-width: 30rem; margin: 8vh auto; padding: 28px 28px 22px; background: var(--bg); border-top: 4px solid var(--rot); }
main.breit { max-width: 60rem; }
h1 { font-family: var(--serif); color: var(--rot-text); font-size: 24px; margin: 0 0 4px; }
h1 small { display: block; font-family: var(--sans); font-weight: 400; font-size: 13px; color: var(--grau); }
h2 { font-family: var(--serif); color: var(--rot-text); font-size: 18px; margin: 24px 0 8px; }
label { display: block; font-size: 12px; font-weight: 700; color: var(--grau); margin: 14px 0 4px; }
input, select { width: 100%; font: inherit; color: inherit; background: var(--bg); border: 1px solid var(--linie); padding: 9px 11px; border-radius: 2px; }
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
button { font: inherit; cursor: pointer; border: 1px solid var(--linie); background: var(--bg); color: inherit; padding: 8px 14px; border-radius: 2px; }
button.primaer { background: var(--rot); border-color: var(--rot); color: var(--auf-akzent); font-weight: 700; margin-top: 18px; width: 100%; padding: 10px; }
button.klein { padding: 4px 10px; font-size: 13px; }
.meldung { padding: 10px 12px; margin: 14px 0 0; background: var(--flaeche); border-left: 3px solid var(--blau); }
.meldung.fehler { border-left-color: var(--rot); }
.fuss { margin-top: 18px; font-size: 13px; color: var(--grau); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
a { color: var(--blau); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
td, th { text-align: left; border-bottom: 1px solid var(--linie); padding: 7px 8px 7px 0; vertical-align: middle; }
th { border-bottom: 2px solid var(--fg); font-size: 12px; }
.zeile { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; }
.zeile > * { flex: 1 1 10rem; }
.zeile button { flex: 0 0 auto; }
.check { display: inline-flex; gap: 6px; align-items: center; font-weight: 400; color: var(--fg); font-size: 14px; margin: 0 12px 0 0; }
.check input { width: auto; }
/* operator area */
a.knopf { display: inline-block; text-decoration: none; color: inherit; border: 1px solid var(--linie); background: var(--bg); padding: 8px 14px; border-radius: 2px; }
a.knopf.klein { padding: 4px 10px; font-size: 13px; }
.zurueck { margin: 0 0 6px; font-size: 14px; }
td.knoepfe form { display: flex; gap: 6px; margin: 3px 0; flex-wrap: wrap; justify-content: flex-end; }
h3 { font-size: 15px; margin: 18px 0 6px; }
form.gefahr { border: 1px solid var(--rot); padding: 12px 14px; }
form.gefahr p { margin-top: 0; }
button.gefahr { background: var(--rot); border-color: var(--rot); color: var(--auf-akzent); }
select { font: inherit; padding: 8px; border: 1px solid var(--linie); background: var(--bg); color: inherit; width: 100%; }
/* operator in "Ansicht als": always visible, with the way back */
form.ansicht { position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; padding: 8px 16px; background: var(--faellig); color: var(--faellig-fg); border-bottom: 1px solid var(--linie); font-size: 14px; }
form.ansicht .fehler { font-weight: 700; }

/* dropdowns: own arrow with room to the edge (the native one sticks to the border), in the text colour */
select:not([multiple]):not([size]) { -webkit-appearance: none; appearance: none; padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
@media (forced-colors: active) { select:not([multiple]):not([size]) { appearance: auto; -webkit-appearance: auto; background-image: none; padding-right: revert; } }
input.klein { width: 13em; padding: 4px 8px; font-size: 13px; }
.zabgelaufen { color: var(--rot-text); font-weight: 700; }