/* funkit - Belegimport – Marke funk it.consulting Logo 2A (DESIGN.md im Projekt) */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/static/vendor/fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/static/vendor/fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --navy: #16263D; --blau: #2B4A76; --eisblau: #D9E8F7;
  --orange: #F4581C; --orange-hover: #D94A13; --orange-bg: #FDECE3;
  --muted: #5B7091; --meta: #627084;
  --bg: #F7F8FA; --surface: #FFFFFF; --tint: #F0F5FB;
  --line: #E3E8EF; --line-soft: #EDF0F4; --line-strong: #C9D2DD;
  --rot: #C0261A; --rot-bg: #FBEAE8; --gruen: #2F7D3B; --gruen-bg: #E9F4EA; --amber: #8A6008; --amber-bg: #FBF3DC;
  --r-ctl: 6px; --r-card: 10px; --r-pill: 999px;
  --schrift: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --weich: cubic-bezier(0.25, 1, 0.4, 1);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--navy); font: 400 1rem/1.5 var(--schrift); }
h1, h2, h3 { margin: 0; letter-spacing: -0.01em; }
h1 { font-size: 1.5rem; font-weight: 600; line-height: 1.25; }
h2 { font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
a { color: var(--blau); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }
.nur-vorleser { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Kopfzeile: Navy-Chrome, Glas erlaubt */
.kopf {
  position: sticky; top: 0; z-index: 20; height: 3.75rem; padding: 0 1.5rem;
  display: flex; align-items: center; gap: 1rem; background: var(--navy); color: #fff;
}
@supports (backdrop-filter: blur(1px)) {
  .kopf { background: rgba(22, 38, 61, 0.92); backdrop-filter: blur(20px) saturate(180%); }
}
@media (prefers-reduced-transparency: reduce) { .kopf { background: var(--navy); backdrop-filter: none; } }
.kopf-marke { display: flex; align-items: center; gap: 0.625rem; color: #fff; text-decoration: none; font-weight: 700; letter-spacing: -0.02em; font-size: 1.125rem; min-height: 3rem; }
.kopf-kunde { background: #fff; border-radius: var(--r-ctl); padding: 2px 6px; display: flex; align-items: center; height: 2.75rem; }
.kopf-kunde img { height: 2.5rem; width: auto; display: block; }
.kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
.kopf-benutzer { color: rgba(255, 255, 255, 0.75); }

/* Knöpfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3rem; padding: 0 1.125rem; border-radius: var(--r-ctl); border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--navy); font: 500 1.0625rem/1 var(--schrift); cursor: pointer;
  text-decoration: none; transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .25s var(--weich);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.knopf:hover { border-color: var(--blau); color: var(--blau); }
.knopf:active { transform: scale(0.97); transition-duration: .05s; }
/* Text auf Orange ist Navy (4,58:1, AA) */
.knopf-primaer { background: var(--orange); border-color: var(--orange); color: var(--navy); font-weight: 600; }
.knopf-primaer:hover { background: var(--orange-hover); border-color: var(--orange-hover); color: var(--navy); }
.knopf-tertiaer { border-color: transparent; background: transparent; color: var(--blau); font-weight: 600; }
.knopf-tertiaer:hover { background: var(--tint); border-color: transparent; }
.knopf-gefahr { border-color: var(--rot); color: var(--rot); background: transparent; font-weight: 600; }
.knopf-gefahr:hover { background: var(--rot-bg); color: var(--rot); border-color: var(--rot); }
.knopf-chrome { background: transparent; border-color: rgba(255, 255, 255, 0.3); color: #fff; }
.knopf-chrome:hover { background: rgba(255, 255, 255, 0.1); color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.knopf:disabled, .knopf[aria-disabled="true"] { background: var(--line-soft); border-color: var(--line-soft); color: var(--meta); cursor: not-allowed; transform: none; }
@media (prefers-reduced-motion: reduce) { .knopf, .knopf:active { transition: none; transform: none; } }

/* Karten, Seiten */
.seite { max-width: 90rem; margin: 0 auto; padding: 1.5rem; }
.karte { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 1rem; }
.label { font-size: 0.84375rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--meta); }
.leise { color: var(--muted); }
.zeile { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.stapel > * + * { margin-top: 1rem; }

/* Hinweise */
.hinweis-box { border-radius: var(--r-ctl); padding: 0.75rem 1rem; background: var(--tint); color: var(--navy); }
.hinweis-fehler { background: var(--rot-bg); color: var(--rot); }
.hinweis-warnung { background: var(--amber-bg); color: var(--amber); }
.hinweis-ok { background: var(--gruen-bg); color: var(--gruen); }
.hinweis-box ul { margin: 0.25rem 0 0; padding-left: 1.25rem; }

/* Formulare */
.feld { display: flex; flex-direction: column; gap: 0.375rem; }
.feld > span { font-weight: 600; }
input, select, textarea {
  font: 400 1rem/1.4 var(--schrift); color: var(--navy); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--r-ctl); min-height: 3rem; padding: 0 0.75rem; width: 100%;
}
textarea { padding: 0.625rem 0.75rem; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--orange); outline-offset: 0; border-color: var(--orange); }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--rot); background: var(--rot-bg); }

/* Anmeldung */
.anmeldung { min-height: calc(100vh - 3.75rem); display: flex; align-items: safe center; justify-content: center; padding: 1.5rem; }
.anmeldung .karte { width: min(26rem, 100%); padding: 2rem; }
.anmeldung form { display: flex; flex-direction: column; gap: 1.25rem; }
.qr { display: flex; justify-content: center; padding: 0.5rem; border: 1px solid var(--line); border-radius: var(--r-card); }
.qr { background: #fff; }
.qr svg { width: min(17rem, 100%); height: auto; image-rendering: pixelated; shape-rendering: crispEdges; }
.code-eingabe { font-size: 1.5rem; letter-spacing: 0.3em; text-align: center; font-variant-numeric: tabular-nums; }

/* Übersicht */
.ablage {
  border: 2px dashed var(--line-strong); border-radius: var(--r-card); background: var(--surface);
  padding: 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  transition: background-color .15s ease, border-color .15s ease;
}
.ablage.aktiv { border-color: var(--orange); background: var(--orange-bg); }
.reiter { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 1.5rem 0 1rem; }
.reiter button {
  min-height: 3rem; padding: 0 1rem; border-radius: var(--r-pill); border: 1px solid var(--line); background: transparent;
  color: var(--muted); font: 500 1rem/1 var(--schrift); cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem;
}
.reiter button[aria-selected="true"] { background: var(--eisblau); border-color: var(--eisblau); color: var(--navy); font-weight: 600; }
.zaehler { background: var(--orange); color: var(--navy); border-radius: var(--r-pill); padding: 2px 9px; font-size: 0.8125rem; font-weight: 600; }
.zaehler.ruhig { background: var(--line-soft); }

.tabelle-rahmen { border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; background: var(--surface); }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; background: var(--bg); color: var(--meta); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); }
td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr.klickbar { cursor: pointer; }
tbody tr.klickbar:hover { background: var(--tint); }
.zahl { text-align: right; font-variant-numeric: tabular-nums; }
.leer { padding: 3rem 1rem; text-align: center; color: var(--muted); }

.status { display: inline-flex; align-items: center; gap: 0.375rem; border-radius: var(--r-pill); padding: 3px 10px; font-size: 0.875rem; font-weight: 600; white-space: nowrap; }
.status-auffaellig { background: var(--amber-bg); color: var(--amber); }
.status-unauffaellig { background: var(--gruen-bg); color: var(--gruen); }
.status-freigegeben, .status-exportiert { background: var(--eisblau); color: var(--navy); }
.status-exportiert.status-uebernommen { background: var(--gruen-bg); color: var(--gruen); }
.status-fehler { background: var(--rot-bg); color: var(--rot); }
.status-eingegangen, .status-in_arbeit { background: var(--line-soft); color: var(--meta); }

/* Prüfansicht */
.pruef { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.vorschau { position: sticky; top: 5.25rem; max-height: calc(100vh - 6.75rem); overflow: auto; background: #E9EDF2; border-radius: var(--r-card); border: 1px solid var(--line); padding: 1rem; }
.pdf-seite { position: relative; margin: 0 auto 1rem; background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 38, 0.12); }
.pdf-seite canvas { display: block; width: 100%; height: auto; }
.textLayer { position: absolute; inset: 0; overflow: clip; line-height: 1; transform-origin: 0 0; z-index: 0; }
.textLayer :is(span, br) { color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0% 0%; }
.textLayer { --min-font-size: 1; --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size)); --min-font-size-inv: calc(1 / var(--min-font-size)); }
.textLayer > :not(.markedContent), .textLayer .markedContent span:not(.markedContent) {
  z-index: 1; --font-height: 0; font-size: calc(var(--text-scale-factor) * var(--font-height));
  --scale-x: 1; --rotate: 0deg; transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv));
}
.textLayer .markedContent { display: contents; }
.textLayer span.fund { background: rgba(43, 74, 118, 0.18); border-radius: 2px; }
.textLayer span.fund-aktiv { background: rgba(244, 88, 28, 0.35); outline: 2px solid var(--orange); }

.formular .karte + .karte { margin-top: 1rem; }
.kopf-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.kopf-felder .breit { grid-column: 1 / -1; }
/* Datum mit Kalendersymbol im Feld */
.datum-feld { position: relative; }
.datum-feld > input:first-child { padding-right: 3rem; }
.datum-knopf { position: absolute; top: 0; right: 0; width: 2.75rem; height: 100%; min-height: 2.75rem; display: flex; align-items: center;
  justify-content: center; border: 0; background: transparent; color: var(--blau); border-radius: 0 var(--r-ctl) var(--r-ctl) 0; cursor: pointer; }
.datum-knopf:hover { background: var(--tint); }
.datum-knopf:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
.datum-knopf:disabled { color: var(--meta); cursor: not-allowed; background: transparent; }
.datum-kalender { position: absolute; right: 0; bottom: 0; width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.fund-knopf { align-self: flex-start; font-size: 0.9375rem; min-height: 2.75rem; padding: 0 0.5rem; }
.fund-text { font-size: 0.9375rem; color: var(--muted); }
.loesch-hinweis { font-size: 0.9375rem; color: var(--rot); font-weight: 600; margin-top: 0.25rem; }
/* Positionen: kompakt, alle Bedienelemente einer Zeile auf derselben Linie (44 px = noch gut treffbar) */
.positionen td { padding: 0.375rem 0.5rem; vertical-align: top; }
.positionen td:first-child { padding-left: 1rem; }
.positionen input, .positionen select { min-height: 2.75rem; }
.positionen select { padding: 0 1.5rem 0 0.5rem; }
.positionen td:first-child > * + * { margin-top: 0.25rem; }
.positionen .fund-knopf { min-height: 2rem; padding: 0; text-align: left; }
.positionen .fund-text { line-height: 1.35; }
.positionen .spalte-menge { width: 6rem; }
.positionen .spalte-menge input { font-variant-numeric: tabular-nums; }
.positionen .spalte-einheit { width: 7rem; font-weight: 600; line-height: 2.75rem; }
.positionen .spalte-einheit .fund-text { line-height: 1.35; font-weight: 400; }
.positionen td:last-child { width: 1%; white-space: nowrap; }
.positionen td:last-child .knopf { min-height: 2.75rem; padding: 0 0.75rem; }
.positionen tr.markiert td { background: var(--orange-bg); }
.positionen tr.sonstiger td { background: var(--amber-bg); }
.kopf-pruef .blaettern { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.haken { width: 1.5rem; height: 1.5rem; min-height: 0; padding: 0; accent-color: var(--blau); cursor: pointer; }
.spalte-haken { width: 3.5rem; padding: 0 !important; }
.haken-flaeche { display: flex; align-items: center; justify-content: center; min-width: 3.5rem; min-height: 3.5rem; cursor: pointer; }
.schalter { display: inline-flex; align-items: center; gap: 0.625rem; min-height: 3rem; font-weight: 500; cursor: pointer; }
.suchfeld { position: relative; }
.vorschlaege { position: absolute; z-index: 30; left: 0; top: calc(100% + 4px); min-width: 100%; width: max-content; max-width: min(34rem, 90vw);
  max-height: 18rem; overflow: auto; margin: 0; padding: 4px; list-style: none; background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--r-ctl); box-shadow: 0 8px 24px rgba(16, 24, 38, 0.16); }
.vorschlaege li { padding: 0.625rem 0.75rem; min-height: 2.75rem; display: flex; align-items: center; border-radius: 4px; cursor: pointer; }
.vorschlaege li:hover { background: var(--tint); }
.vorschlaege li[aria-selected="true"] { background: var(--eisblau); }
.vorschlaege li.keine-treffer { color: var(--muted); cursor: default; }
.tabelle-rahmen.mit-suche { overflow: visible; }
.startpasswort { font: 600 1.125rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: #fff; color: var(--navy); padding: 0.5rem 0.75rem; border-radius: var(--r-ctl); border: 1px solid var(--line); user-select: all; }
.wahl { width: 100%; min-height: 3.5rem; font-size: 1.0625rem; }
.liste-schlicht { list-style: none; margin: 0; padding: 0; }
.liste-schlicht li { padding: 0.75rem 0; border-bottom: 1px solid var(--line-soft); }
.liste-schlicht li:last-child { border-bottom: 0; }
.aktionen { position: sticky; bottom: 0; display: flex; gap: 0.75rem; justify-content: flex-end; flex-wrap: wrap; padding: 1rem; background: rgba(247, 248, 250, 0.95); border-top: 1px solid var(--line); margin-top: 1rem; }
details.protokoll summary { cursor: pointer; font-weight: 600; min-height: 3rem; display: flex; align-items: center; }
details.protokoll li { color: var(--muted); }

.meldung { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 50; max-width: min(36rem, calc(100% - 2rem));
  background: rgba(255, 255, 255, 0.96); border: 1px solid var(--line); border-radius: var(--r-card); padding: 0.875rem 1.25rem;
  box-shadow: 0 8px 24px rgba(16, 24, 38, 0.16); font-weight: 500; }
.meldung.fehler { color: var(--rot); }
.laedt { color: var(--muted); padding: 2rem; text-align: center; }

@media (max-width: 1023px) {
  .pruef { grid-template-columns: 1fr; }
  .vorschau { position: static; max-height: 70vh; }
}
@media (max-width: 767px) {
  .seite { padding: 1rem; }
  .kopf { padding: 0 1rem; gap: 0.5rem; }
  .kopf-benutzer { display: none; }
  .kopf-firma { display: none; }
  .kopf-felder { grid-template-columns: 1fr; }
  .tabelle-rahmen { overflow-x: auto; }
  .spalte-optional { display: none; }
}

/* Einladung: Text zum Kopieren, gut lesbar und umbrechend */
.einladung-text { margin: 0; padding: 0.75rem; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-ctl);
  font: inherit; font-size: 1rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; user-select: all; }
.anmeldung-wege { border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 1rem; }
.anmeldung-wege .knopf { width: 100%; min-height: 3rem; }

/* Benutzerliste: viele Aktionen je Zeile – lieber seitlich scrollen als Knöpfe abschneiden oder Wörter umbrechen */
.benutzer-rahmen { overflow-x: auto; }
.benutzer-rahmen td .knopf { white-space: nowrap; }
/* Überschriften bekommen per Skript den Fokus (Bildschirmleser) – kein Fokusrahmen um Text */
h1[tabindex="-1"]:focus, [role="alert"][tabindex="-1"]:focus { outline: none; }
/* Einladungscode (14 Zeichen): weniger gesperrt, damit er auch auf dem Handy ganz sichtbar bleibt */
.code-eingabe.code-lang { font-size: 1.25rem; letter-spacing: 0.08em; }