/* Kontrollraum – CNM-Hausstil (wie o.cnm.at-Rechnung / cnm.at): Haarlinien statt Karten,
   Bebas Neue für Titel und Ziffern, DM Sans für Text, Orange nur als Akzent. */
@font-face { font-family: "Bebas Neue"; src: url("/fonts/bebas-neue-400-normal-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("/fonts/dm-sans-400-normal-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("/fonts/dm-sans-500-normal-latin.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("/fonts/dm-sans-600-normal-latin.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --orange: #e8500a;
  --ink: #1a1a1a;
  --grau: #6b6b6b;
  --linie: #d0d0d0;
  --linie-fein: #e8e8e8;
  --papier: #ffffff;
  --papier-leicht: #f7f6f4;
}

* { box-sizing: border-box; }
html { color-scheme: light; }
body {
  margin: 0; background: var(--papier); color: var(--ink);
  font-family: "DM Sans", system-ui, sans-serif; font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ink); text-decoration-color: var(--linie); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--orange); }

.kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 28px; padding: 18px max(16px, env(safe-area-inset-right, 0px)) 14px max(16px, env(safe-area-inset-left, 0px)); border-bottom: 1px solid var(--ink); }
.marke { font-family: "Bebas Neue", sans-serif; font-size: 28px; letter-spacing: .04em; text-decoration: none; }
.marke b { color: var(--orange); font-weight: 400; }
.nav { display: flex; flex-wrap: wrap; gap: 18px; margin-left: auto; }
.nav a, .nav button { font: inherit; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; }
.nav a.aktiv { color: var(--orange); }
.nav .wer { color: var(--grau); text-transform: none; letter-spacing: 0; }

main { padding: 24px max(16px, env(safe-area-inset-right, 0px)) 48px max(16px, env(safe-area-inset-left, 0px)); max-width: 1400px; margin: 0 auto; }
.eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--grau); margin: 0 0 6px; }
.eyebrow.ki { color: var(--orange); }
.eyebrow .nr { font-family: "Bebas Neue", sans-serif; font-size: 16px; color: var(--orange); margin-right: 8px; letter-spacing: .04em; }
h1 { font-family: "Bebas Neue", sans-serif; font-weight: 400; font-size: 40px; letter-spacing: .02em; line-height: 1; margin: 0 0 20px; text-wrap: balance; }
h2 { font-family: "Bebas Neue", sans-serif; font-weight: 400; font-size: 24px; letter-spacing: .03em; margin: 32px 0 10px; padding-top: 14px; border-top: 1px solid var(--ink); }
h2:first-of-type { margin-top: 8px; }
.ziffer { font-family: "Bebas Neue", sans-serif; font-size: 1.15em; letter-spacing: .03em; }
.meldung { border-left: 3px solid var(--orange); padding: 6px 12px; margin: 0 0 18px; background: var(--papier-leicht); }
.fehler { color: var(--orange); font-size: 13px; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--grau); padding: 8px 10px 6px 0; border-bottom: 1px solid var(--ink); }
td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--linie-fein); vertical-align: top; }
tr:hover td { background: var(--papier-leicht); }
td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; }
.tabelle-rahmen { overflow-x: auto; }
.leise { color: var(--grau); }
.klein { font-size: 13px; }

.ampel { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.ampel-rot { color: var(--orange); font-weight: 600; }
.ampel-gelb { color: var(--ink); }
.ampel-gruen { color: var(--grau); }
.marke-bestaetigen { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--orange); margin-left: 6px; }
.status { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--grau); }
.status-fehler, .status-manuell { color: var(--orange); }

.zweispaltig { display: grid; grid-template-columns: 1fr; gap: 28px 40px; }
@media (min-width: 1024px) { .zweispaltig { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.spalte { min-width: 0; }
.mailtext { white-space: pre-wrap; font-size: 14px; line-height: 1.55; border-left: 1px solid var(--linie); padding-left: 14px; max-height: 60vh; overflow: auto; }

form.inline { display: inline; }
label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--grau); margin: 12px 0 4px; }
input[type=text], input[type=email], input[type=password], input[type=number], select, textarea {
  font: inherit; width: 100%; max-width: 480px; padding: 7px 9px; border: 1px solid var(--linie); border-radius: 0; background: var(--papier); color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--orange); outline-offset: 1px; border-color: var(--orange); }
button, .knopf { font: inherit; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; padding: 8px 14px; border: 1px solid var(--ink); background: var(--papier); color: var(--ink); cursor: pointer; border-radius: 0; }
button.primaer { background: var(--ink); color: var(--papier); }
button.orange { border-color: var(--orange); color: var(--orange); }
button:hover { border-color: var(--orange); }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.filter { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: end; margin: 0 0 18px; }
.filter label { margin: 0 0 4px; }
.filter select { width: auto; min-width: 180px; }
.anmeldung { max-width: 420px; margin: 10vh auto 0; }
.seitenzahl { margin-top: 18px; font-size: 13px; }
.seitenzahl nav { display: flex; gap: 10px; flex-wrap: wrap; }
.fuss { font-size: 12px; color: var(--grau); border-top: 1px solid var(--linie); padding-top: 12px; margin-top: 40px; }