:root {
  --ivd: #1e2d4f;
  --ivd-light: #2f4373;
  --bg: #f4f6fa;
  --card: #ffffff;
  --line: #e2e7f0;
  --muted: #6b7488;
  --ok: #2e9e5b;
  --warn: #d23b3b;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: #1c2333;
}

/* Topbar */
.topbar { background: var(--ivd); color: #fff; }
.topbar-inner { max-width: 980px; margin: 0 auto; display: flex; align-items: center; gap: 14px; padding: 14px 20px; }
.brand { font-weight: 800; letter-spacing: 1px; background: #fff; color: var(--ivd); padding: 2px 8px; border-radius: 4px; }
.brand-logo { height: 34px; display: block; }
.topbar .title { font-weight: 600; }
.spacer { flex: 1; }
.user { opacity: .9; font-size: 14px; }
.logout { color: #cdd6ea; text-decoration: none; font-size: 14px; }
.logout:hover { color: #fff; }

main { max-width: 980px; margin: 24px auto; padding: 0 20px; }
.intro { color: var(--muted); line-height: 1.5; }
.flash.ok { background: #e6f6ec; color: var(--ok); border: 1px solid #b6e3c6; padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; }
.flash.warn { background: #fbe6e6; color: var(--warn); border: 1px solid #e6b8b8; padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; }
.status-line { font-size: 13px; color: var(--muted); margin: 0 0 12px; }
.btn-secondary { background: #eef1f6; color: var(--ivd); border: 1px solid var(--border-strong, #c8d0e0); padding: 12px 22px; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; }
.btn-secondary:hover { background: #e2e7f0; }

/* Kategorie-Karten */
.kategorie { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; margin-bottom: 18px; }
.kategorie.inaktiv { opacity: .55; }
.kat-head { display: flex; align-items: center; gap: 12px; }
.kat-head h2 { font-size: 18px; margin: 0; color: var(--ivd); }
.gruppe { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; padding: 2px 8px; border-radius: 20px; }
.gruppe-wohnen { background: #e8eefb; color: var(--ivd-light); }
.gruppe-gewerbe { background: #fdeede; color: #9a6516; }
.aktiv-toggle { margin-left: auto; font-size: 14px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.kat-info { color: var(--muted); font-size: 13px; margin: 8px 0 14px; }

/* Felder */
.felder { display: flex; flex-direction: column; gap: 10px; }
.feld {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 0.8fr 1fr;
  gap: 10px; align-items: center;
  padding: 8px 0; border-top: 1px solid var(--line);
}
.feld-label { font-size: 14px; font-weight: 500; }
.einheit { display: block; font-size: 11px; color: var(--muted); font-weight: 400; }
.feld-input input { width: 100%; padding: 8px 10px; border: 1px solid #c8d0e0; border-radius: 8px; font-size: 14px; }
.feld-input input:disabled { background: #f0f2f7; }
.regler { margin-top: 6px; display: flex; align-items: center; gap: 8px; }
.regler-slider { flex: 1; min-width: 90px; accent-color: var(--ivd); }
.regler-out { font-size: 11px; color: var(--muted); white-space: nowrap; min-width: 96px; text-align: right; }
.feld-ref { font-size: 13px; color: var(--muted); }
.badge { font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 20px; white-space: nowrap; }
.badge.ok { background: #e6f6ec; color: var(--ok); }
.badge.warn { background: #fbe6e6; color: var(--warn); }
.badge.none { background: #eef1f6; color: var(--muted); }
.feld-keine { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.feld-meng select { width: 100%; padding: 7px 6px; border: 1px solid #c8d0e0; border-radius: 8px; font-size: 12px; }
.feld-begr { grid-column: 1 / -1; }
.feld-begr textarea { width: 100%; padding: 8px 10px; border: 1px solid #e3b0b0; border-radius: 8px; font-size: 13px; background: #fff8f8; }

/* Tendenz + Mengenspanne pro Kategorie */
.kat-extras { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; }
.tendenz { font-size: 14px; color: var(--muted); }
.tendenz input[type=range] { vertical-align: middle; width: 200px; margin: 0 8px; }
.tendenz-out { font-weight: 600; color: var(--ivd); }
.kat-meng { font-size: 14px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.kat-meng select { padding: 7px 8px; border: 1px solid #c8d0e0; border-radius: 8px; font-size: 13px; }
.kat-meng .opt { color: var(--muted); font-size: 12px; }

/* Markt & Lagen */
.ml-sub { font-size: 14px; color: var(--ivd); margin: 16px 0 8px; }
.ml-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.ml-grid.ml-3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.ml-field { display: flex; flex-direction: column; font-size: 13px; color: var(--muted); gap: 4px; }
.ml-field input { padding: 9px 11px; border: 1px solid #c8d0e0; border-radius: 8px; font-size: 14px; color: #1c2333; }
.ml-ref { font-size: 12px; color: var(--muted); }
.ml-hint { font-size: 12px; color: var(--muted); margin: 0 0 10px; }
.ml-tendenz { border-collapse: collapse; width: 100%; max-width: 620px; }
.ml-tendenz th, .ml-tendenz td { text-align: left; padding: 8px 12px 8px 0; vertical-align: top; }
.ml-tendenz thead th { font-size: 12px; color: var(--muted); font-weight: 600; }
.ml-tendenz th[scope="row"] { font-size: 14px; color: var(--ivd); white-space: nowrap; padding-top: 14px; }
.ml-tendenz select { padding: 9px 11px; border: 1px solid #c8d0e0; border-radius: 8px; font-size: 14px; color: #1c2333; background: #fff; min-width: 170px; }
.ml-tendenz td .ml-ref { display: block; margin-top: 4px; }
.ml-field.ml-full { max-width: 620px; }
.ml-field textarea { padding: 9px 11px; border: 1px solid #c8d0e0; border-radius: 8px; font-size: 14px; color: #1c2333; font-family: inherit; resize: vertical; }

/* Actions */
.actions { display: flex; align-items: center; gap: 14px; margin: 8px 0 40px; }
.btn-primary { background: var(--ivd); color: #fff; border: none; padding: 12px 26px; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; }
.btn-primary:hover { background: var(--ivd-light); }
.muted { color: var(--muted); }
.small { font-size: 12px; }

/* Login */
.login-page { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; background: linear-gradient(160deg, #243a66, #1a2540); }
.login-card { background: #fff; border-radius: 14px; padding: 36px 40px; max-width: 380px; text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.login-card .brand { display: inline-block; margin-bottom: 14px; font-size: 18px; }
.login-card h1 { font-size: 20px; color: var(--ivd); margin: 0 0 6px; }
.login-card .error { background: #fbe6e6; color: var(--warn); padding: 8px 12px; border-radius: 8px; font-size: 14px; }
.login-page footer { color: #aebbd6; font-size: 12px; margin-top: 18px; }

/* Auswertung */
.aw-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.aw-region select { padding: 8px 10px; border: 1px solid #c8d0e0; border-radius: 8px; font-size: 14px; }
.aw-scroll { overflow-x: auto; }
.aw-table { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 520px; }
.aw-table th, .aw-table td { padding: 7px 9px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.aw-table th { background: #eef1f6; color: var(--ivd); font-weight: 600; position: sticky; top: 0; }
.aw-table td.lbl, .aw-table th.lbl { white-space: normal; min-width: 150px; }
.aw-table .ref { color: var(--muted); }
.korr-input { width: 78px; padding: 5px 6px; border: 1px solid #c8d0e0; border-radius: 6px; font-size: 12.5px; text-align: right; background: #fffdf5; }
.korr-input:focus { outline: none; border-color: var(--ivd-light, #4a6ea9); box-shadow: 0 0 0 2px #dce4f5; background: #fff; }
.korr-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 16px 0 4px; }
.anom-table td { white-space: normal; vertical-align: top; }
.anom-table td.num { white-space: nowrap; text-align: right; }
.anom-fix { display: flex; gap: 6px; align-items: center; }
.anom-badge { display: inline-block; padding: 3px 8px; border-radius: 10px; font-size: 11.5px; font-weight: 600; margin: 0 4px 4px 0; }
.anom-hoch { background: #fdecec; color: #b32b2b; }
.anom-mittel { background: #fff3e0; color: #a85b00; }
.anom-niedrig { background: #eef1f6; color: #445; }
.aw-table th.ref-year { background: #e7ecf4; font-size: 11.5px; }
.aw-table th.hj { background: #f4f7fc; }
.aw-table .th-sub { font-weight: 400; font-size: 10.5px; color: var(--muted); }
.aw-table td.ref { background: #fafbfd; }
.aw-table .vor { background: #f4f7fc; }
.aw-table th.delta { background: #eef3ee; font-size: 11.5px; }
.aw-table td.delta { background: #f7faf7; font-weight: 600; font-size: 12px; color: var(--muted); }
.aw-table td.delta.delta-up { color: #1a7f37; }
.aw-table td.delta.delta-down { color: #b3261e; }
.aw-table td.out { color: var(--warn); font-weight: 600; }
.aw-table .ms { display: block; margin-top: 2px; font-size: 10px; color: var(--muted); }
.aw-table .bes-cell .be-wert { font-weight: 600; }
.aw-table th.bes-group { background: #eaf1ea; color: var(--ivd); text-align: center; font-size: 11.5px; border-left: 2px solid #cddccd; }
.aw-table th.bes-group .bes-hint { font-weight: 400; color: var(--muted); }
.aw-table th.bes-col { background: #f1f5f1; }
.aw-table td.bes-cell { background: #fafcfa; }
.aw-table tr.group-row th { position: static; border-bottom: none; }
.aw-table .spanne { display: block; font-size: 10px; color: var(--muted); }
.begr-row td.begr { background: #fff8f8; color: var(--warn); font-size: 11.5px; white-space: normal; }
.ml-entry { border-top: 1px solid var(--line); padding: 10px 0; }
.ml-name { font-weight: 600; color: var(--ivd); font-size: 13px; }
.ml-body { font-size: 13px; color: #3a4256; line-height: 1.5; }

/* Login-Felder */
.field { display: block; text-align: left; margin: 14px 0; }
.field span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.field input { width: 100%; padding: 10px 12px; border: 1px solid #c8d0e0; border-radius: 8px; font-size: 15px; }
.btn-primary.full { width: 100%; display: block; text-align: center; text-decoration: none; margin-top: 6px; }
.link { display: inline-block; margin-top: 12px; }
.login-card .info { background: #e8eefb; color: var(--ivd-light); padding: 8px 12px; border-radius: 8px; font-size: 14px; }
.nav-link { color: #cdd6ea; text-decoration: none; font-size: 14px; }
.nav-link:hover { color: #fff; }

/* Home-Kacheln */
.welcome { color: var(--ivd); margin-bottom: 4px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 20px; }
.tile { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 22px; text-decoration: none; color: inherit; transition: box-shadow .15s, transform .15s; }
.tile:hover { box-shadow: 0 8px 24px rgba(30,45,79,.12); transform: translateY(-2px); }
.tile-nachrangig { opacity: .78; }
.tile-nachrangig:hover { opacity: 1; }
.tile-icon { font-size: 30px; }
.tile-title { font-weight: 700; color: var(--ivd); margin: 8px 0 4px; }
.tile-desc { font-size: 13px; color: var(--muted); line-height: 1.4; }

/* Admin */
.card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; margin-bottom: 18px; }
.card h2 { color: var(--ivd); font-size: 17px; margin: 0 0 6px; }
.user-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; align-items: end; margin-top: 12px; }
.user-form label { display: flex; flex-direction: column; font-size: 12px; color: var(--muted); gap: 4px; }
.user-form input, .user-form select { padding: 8px 10px; border: 1px solid #c8d0e0; border-radius: 8px; font-size: 14px; color: #1c2333; }
.user-form button { align-self: end; }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th, .admin-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 13px; vertical-align: top; }
.admin-table th { background: #eef1f6; color: var(--ivd); }
.admin-table code { font-size: 11px; color: var(--ivd-light); word-break: break-all; }
.inaktiv-row { opacity: .5; }
.inline { display: inline; }
.actions-cell { white-space: nowrap; }
.btn-small { background: #eef1f6; border: 1px solid var(--line); color: var(--ivd); padding: 5px 10px; border-radius: 6px; font-size: 12px; cursor: pointer; margin: 2px; }
.btn-small:hover { background: #e2e7f0; }
.invite-link { margin-top: 6px; }
details.edit { display: inline-block; margin: 2px; }
details.edit > summary { display: inline-block; list-style: none; }
details.edit > summary::-webkit-details-marker { display: none; }
.edit-form { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding: 10px; background: #f7f9fc; border: 1px solid var(--line); border-radius: 8px; min-width: 200px; }
.edit-form input, .edit-form select { padding: 6px 8px; border: 1px solid #c8d0e0; border-radius: 6px; font-size: 13px; }
.pill { font-size: 11px; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.pill.active { background: #e6f6ec; color: var(--ok); }
.pill.pending { background: #fdeede; color: #9a6516; }
.pill.off { background: #eef1f6; color: var(--muted); }
.admin-table .inline select { padding: 5px 6px; border: 1px solid #c8d0e0; border-radius: 6px; font-size: 12px; }

/* Faktencheck */
.pill.ok { background: #e6f6ec; color: var(--ok); }
.ok-banner { background: #e6f6ec; border: 1px solid #b6e3c6; color: var(--ok); font-weight: 600; }
.fc-uebersicht { display: flex; flex-wrap: wrap; gap: 8px; }
.fc-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--line); text-decoration: none; color: var(--ivd); font-weight: 600; font-size: 13px; }
.fc-chip span { font-weight: 400; font-size: 12px; }
.fc-chip.done { background: #e6f6ec; border-color: #b6e3c6; color: var(--ok); }
.fc-chip.open { background: #fdeede; border-color: #f0d3ad; color: #9a6516; }
.fc-table input.wert { width: 110px; padding: 6px 8px; border: 1px solid #c8d0e0; border-radius: 6px; font-size: 13px; text-align: right; }
.fc-table input.wert:focus { outline: none; border-color: var(--ivd-light); box-shadow: 0 0 0 2px #dce4f5; }
.abw { font-size: 12px; color: var(--muted); }
.abw.abw-ok { color: var(--ok); }
.abw.abw-warn { color: var(--warn); font-weight: 600; }
.fc-actions-top { margin-bottom: 10px; }
.fc-actions { display: flex; align-items: center; gap: 14px; margin: 6px 0 30px; }

/* Schnell-Eingabe */
.schnell { background: #f2f7f2; border: 1px solid #cfe0cf; border-radius: 10px; padding: 14px 16px; margin: 0 0 22px; }
.schnell-head { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; }
.schnell-in { display: flex; gap: 8px; align-items: center; }
.schnell-in input#schnell-text { flex: 1; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; }
#schnell-mic.rec { background: var(--warn); color: #fff; border-color: var(--warn); }
.schnell-dialog { margin-top: 12px; padding-top: 12px; border-top: 1px dashed #cfe0cf; }
.sd-q { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; font-size: 14px; }
.sd-q select { padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px; }
.sd-felder { display: flex; flex-wrap: wrap; gap: 8px; }
.sd-felder .sd-feld { cursor: pointer; }
.sd-done { font-size: 14px; color: var(--ivd); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
input.sd-flash { outline: 2px solid var(--ok); background: #eafaef; transition: background .3s; }
.aw-table th.hj { background: #f3eef6; font-size: 11.5px; }
.aw-table td.hj { background: #fbf9fd; color: var(--muted); }
.aw-table th.bes-col .bes-status { display: block; margin-top: 3px; font-size: 9.5px; font-weight: 600; padding: 1px 6px; border-radius: 10px; }
.aw-table th.bes-col .bes-status.final { background: #e6f6ec; color: var(--ok); }
.aw-table th.bes-col .bes-status.entwurf { background: #fdf2e2; color: #9a6516; }

/* Meine Abschlüsse */
.abschluss-form { margin-top: 12px; }
.af-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px 16px; }
.af-grid label { display: flex; flex-direction: column; font-size: 13px; color: var(--muted); gap: 4px; }
.af-grid label.af-wide { grid-column: 1 / -1; }
.af-grid input, .af-grid select { padding: 9px 11px; border: 1px solid #c8d0e0; border-radius: 8px; font-size: 14px; color: #1c2333; background: #fff; }
.af-grid .opt { color: var(--muted); font-size: 11px; }
.af-actions { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.btn-del { background: none; border: none; cursor: pointer; font-size: 15px; opacity: .7; }
.btn-del:hover { opacity: 1; }
.nav-link { color: #cdd6ea; text-decoration: none; font-size: 14px; margin-right: 14px; }
.nav-link:hover { color: #fff; }

/* Bearbeitbare Eingabefelder (Preisspiegel-2026-Werte) farblich hervorheben */
.feld-input input.wert { background: #eef4fd; border-color: #bcd2f0; }
.feld-input input.wert:disabled { background: #f0f2f7; border-color: #c8d0e0; }
.feld.leer-fehlt input.wert { background: #fdecec; border-color: #e05252; box-shadow: 0 0 0 2px #f6d5d5; }

/* Kachel-Tabs in der Eingabemaske */
.kacheln-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.kachel-tab { padding: 10px 18px; border: 1px solid var(--line); background: #fff; border-radius: 10px; font-size: 15px; font-weight: 600; color: var(--ivd); cursor: pointer; }
.kachel-tab:hover { background: #f4f7fc; }
.kachel-tab.active { background: var(--ivd); color: #fff; border-color: var(--ivd); }
.kachel-panel[hidden] { display: none; }
.kachel-skip { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); margin: 0 0 14px; padding: 9px 12px; background: #f4f6fa; border: 1px dashed #c8d0e0; border-radius: 8px; cursor: pointer; }
.kachel-skip input { cursor: pointer; }

/* Kachel-Tiles mit „nichts zu berichten"-Häkchen */
.kachel-tile { position: relative; display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 8px 14px; }
.kachel-hint { display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; background: var(--ivd); color: #fff; font-size: 12px; font-weight: 400; line-height: 1.45; padding: 9px 11px; border-radius: 8px; width: max-content; max-width: 240px; box-shadow: 0 8px 22px rgba(0,0,0,.2); }
.kachel-hint strong { color: #fff; }
.kachel-tile:hover .kachel-hint { display: block; }
.kachel-tile:hover { border-color: var(--ivd-light); }
.kachel-tile.active { background: var(--ivd); border-color: var(--ivd); }
.kachel-tile.active .kachel-tab-btn { color: #fff; }
.kachel-tile.active .kachel-skip-tile { color: #cdd6ea; }
.kachel-tile.skipped { opacity: .5; }
.kachel-ico { font-size: 15px; }
.kachel-tab-btn { display: flex; align-items: center; gap: 6px; }
.kachel-tab-btn { background: none; border: none; padding: 0; font-size: 15px; font-weight: 600; color: var(--ivd); cursor: pointer; text-align: left; }
.kachel-skip-tile { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 5px; cursor: pointer; }
.kachel-skip-tile input { cursor: pointer; }


/* Nutzerverwaltung: Aktionen als saubere, gestapelte Button-Spalte */
.actions-cell { white-space: normal; }
.actions-cell > form.inline, .actions-cell > details.edit { display: block; margin: 4px 0; }
.actions-cell > form.inline .btn-small, .actions-cell > details.edit > summary { display: block; width: 160px; box-sizing: border-box; text-align: center; margin: 0; }

/* Faktencheck: Pro-Feld-Rueckgaengig-Pfeil neben dem Wert-Eingabefeld */
.wert-wrap { display: inline-flex; align-items: center; gap: 5px; }
.reset-feld { flex: none; width: 26px; height: 26px; padding: 0; border: 1px solid var(--line); background: #eef1f6; color: var(--ivd); border-radius: 6px; font-size: 15px; line-height: 1; cursor: pointer; }
.reset-feld:hover { background: #e2e7f0; }

/* Markt & Lage: Bloecke fuer Wohn-/Buero-/Einkaufslagen (Platz 1-3) */
.ml-lagen-block { margin: 10px 0 4px; }
.ml-lagen-titel { font-weight: 600; color: var(--ivd); margin: 8px 0 4px; }
.login-logo { height: 52px; width: auto; margin-bottom: 22px; }

.site-footer { text-align:center; color:#8494a4; font-size:12px; padding:22px 16px 28px; margin-top:24px; border-top:1px solid #e6edf3; }
.site-footer a { color:#3a4a86; text-decoration:none; }
.site-footer a:hover { text-decoration:underline; }
.login-page footer a { color:#cdd6ea; text-decoration:none; }
.login-page footer a:hover { color:#fff; }
.ausgegraut { opacity: .5; }
.kat-badge { display:inline-block; background:#e8ebf0; color:#6b7787; font-size:11px; font-weight:600; padding:2px 8px; border-radius:10px; margin-left:8px; vertical-align:middle; white-space:nowrap; }