/* EÜR – Theme auf Basis von Bootstrap 5.3 (lokal gehostet). Keine Inline-Styles nötig (strenge CSP). */
:root, [data-bs-theme=light] {
  --bs-primary: #1f5fae; --bs-primary-rgb: 31, 95, 174;
  --bs-link-color: #1f5fae; --bs-link-color-rgb: 31, 95, 174; --bs-link-hover-color: #174b8c; --bs-link-hover-color-rgb: 23, 75, 140;
  --bs-body-font-family: Roboto, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --bs-body-color: #1e2530; --bs-body-bg: #fff; --bs-tertiary-bg: #f4f5f7; --bs-border-color: #e3e6ea;
  --eur-surface: #fff; --eur-shadow: 0 1px 8px rgba(16, 24, 40, .09);
  --eur-income: #198754; --eur-expense: #c8452d; --eur-soft-bg: #b9d4ea; --eur-soft-tx: #1b3a57;
  --eur-topbar-h: 72px; --eur-rail-w: 68px;
}
[data-bs-theme=dark] {
  --bs-primary: #6ea0e0; --bs-primary-rgb: 110, 160, 224;
  --bs-link-color: #8db6ee; --bs-link-color-rgb: 141, 182, 238; --bs-link-hover-color: #b0cdf5; --bs-link-hover-color-rgb: 176, 205, 245;
  --bs-body-color: #e6e9ee; --bs-body-bg: #12161c; --bs-tertiary-bg: #1b212a; --bs-border-color: #2c3440;
  --eur-surface: #1a2029; --eur-shadow: 0 1px 8px rgba(0, 0, 0, .45);
  --eur-income: #4cc38a; --eur-expense: #ee7a63; --eur-soft-bg: #2a4560; --eur-soft-tx: #d7e8f8;
}
body { background: var(--bs-body-bg); }
.btn-primary { --bs-btn-bg: var(--eur-primary, #1f5fae); --bs-btn-border-color: var(--eur-primary, #1f5fae); --bs-btn-color: var(--eur-on-primary, #fff); --bs-btn-hover-color: var(--eur-on-primary, #fff); --bs-btn-active-color: var(--eur-on-primary, #fff);
  --bs-btn-hover-bg: var(--eur-primary-hover, #184d90); --bs-btn-hover-border-color: var(--eur-primary-hover, #184d90);
  --bs-btn-active-bg: var(--eur-primary-active, #143f75); --bs-btn-active-border-color: var(--eur-primary-active, #143f75); --bs-btn-disabled-bg: var(--eur-primary, #1f5fae); --bs-btn-disabled-border-color: var(--eur-primary, #1f5fae); font-weight: 600; }
.btn-outline-primary { --bs-btn-color: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-bg: var(--eur-primary); --bs-btn-hover-border-color: var(--eur-primary); --bs-btn-hover-color: var(--eur-on-primary, #fff); --bs-btn-active-bg: var(--eur-primary-active); --bs-btn-active-border-color: var(--eur-primary-active); --bs-btn-active-color: var(--eur-on-primary, #fff); }
.form-check-input:checked { background-color: var(--bs-primary); border-color: var(--bs-primary); }
.btn-lg-eur { padding: .75rem 1.5rem; font-size: 1.05rem; border-radius: .4rem; }
.form-control:focus, .form-select:focus { border-color: rgba(var(--bs-primary-rgb), .6); box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .18); }
.alert { overflow-wrap: anywhere; }
.bi { vertical-align: -.125em; flex: none; }

/* ---- Kopfzeile ---- */
.topbar { position: sticky; top: 0; z-index: 1030; height: var(--eur-topbar-h); background: var(--eur-surface); box-shadow: 0 2px 10px rgba(16, 24, 40, .07); }
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--bs-body-color); font-weight: 700; font-size: 1.25rem; }
.brand:hover { color: var(--bs-body-color); }
.brand-mark { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: 10px; background: var(--bs-primary); color: var(--eur-on-primary, #fff); font-size: 1.35rem; font-weight: 700; }
.btn-head { display: inline-flex; align-items: center; gap: .5rem; border: 0; background: transparent; padding: .45rem .6rem; max-width: 46vw; font-size: 1rem; }
.btn-head:hover, .btn-head.show { background: var(--bs-tertiary-bg); }
.btn-head .bi { font-size: 1.4rem; }
.head-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22ch; }
@media (max-width: 575.98px) { .head-label { display: none; } .btn-head::after { display: none; } }
.btn-icon { border: 0; font-size: 1.6rem; line-height: 1; padding: .25rem .5rem; color: var(--bs-body-color); }
.bi-gap { display: inline-block; width: 1em; }

/* ---- Schmale Icon-Leiste ---- */
.app-shell { display: flex; min-height: calc(100vh - var(--eur-topbar-h)); }
.rail { position: sticky; top: var(--eur-topbar-h); align-self: flex-start; height: calc(100vh - var(--eur-topbar-h)); width: var(--eur-rail-w); flex: none;
  flex-direction: column; align-items: center; padding: 1.25rem 0; border-right: 1px solid var(--bs-border-color); background: var(--eur-surface); }
.rail-link { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: .7rem; color: var(--bs-body-color); font-size: 1.55rem; text-decoration: none; }
.rail-link:hover { background: var(--bs-tertiary-bg); color: var(--bs-body-color); }
.rail-link.active { color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .12); }
.rail-sep { width: 28px; margin: .5rem 0; opacity: .25; }
.side-link { display: flex; align-items: center; gap: .85rem; padding: .7rem .5rem; font-size: 1.05rem; color: var(--bs-body-color); border-radius: .5rem; }
.side-link.active { color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .1); font-weight: 600; }
.side-link .bi { font-size: 1.35rem; }
.app-main { flex: 1 1 auto; min-width: 0; }

/* ---- Karten wie im Vorbild ---- */
.surface { background: var(--eur-surface); border-radius: var(--eur-radius, 12px); box-shadow: var(--eur-shadow); }
.tabs-card { padding: .4rem .6rem; max-width: 100%; overflow-x: auto; }
.tabs-card .nav-link { display: flex; align-items: center; gap: .55rem; padding: .7rem 1rem; color: var(--bs-body-color); font-size: 1.1rem; white-space: nowrap; background: none; border-radius: .5rem; }
.tabs-card .nav-link .bi { font-size: 1.35rem; }
.tabs-card .nav-link:hover { background: var(--bs-tertiary-bg); }
.tabs-card .nav-link.active { color: var(--bs-primary); font-weight: 600; background: none; }
.page-title { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem 1.5rem; padding: 1rem 1.4rem; }
.page-title h1 { font-size: 1.4rem; font-weight: 600; margin: 0; }
.tile { display: inline-flex; align-items: center; justify-content: center; min-width: 72px; height: 62px; padding: 0 1rem; border: 0; font-size: 1.55rem;
  color: var(--bs-body-color); text-decoration: none; cursor: pointer; }
.tile:hover, .tile.show, .tile[aria-expanded=true] { color: var(--bs-primary); }
.tile.dropdown-toggle::after { display: none; }
.section-title { font-size: 1.1rem; font-weight: 600; margin: 1.75rem 0 .75rem; }

/* ---- Tabellen ---- */
.table-eur { --bs-table-bg: transparent; margin-bottom: 0; }
.table-eur > thead > tr > th { font-weight: 600; font-size: .95rem; color: var(--bs-body-color); border-bottom: 1px solid var(--bs-border-color); padding: var(--eur-th-py, 1rem) .9rem; white-space: nowrap; background: transparent; }
.table-eur > tbody > tr > td { padding: var(--eur-cell-py, .85rem) .9rem; border-bottom: 0; font-size: 1rem; }
.table-eur > tbody > tr:nth-of-type(even) > * { --bs-table-bg-type: var(--bs-tertiary-bg); }
.table-eur td.accent, .table-eur th.accent { position: relative; padding-left: 1.9rem; }
.table-eur td.accent::before { content: ""; position: absolute; left: .9rem; top: .55rem; bottom: .55rem; width: 6px; background: var(--accent, var(--bs-primary)); border-radius: 1px; }
.accent-income { --accent: var(--eur-income); } .accent-expense { --accent: var(--eur-expense); } .accent-off { --accent: #9aa3ad; }
.table-eur tr.is-off > td { opacity: .55; }
.table-eur tfoot td { font-weight: 700; border-top: 1px solid var(--bs-border-color); padding: .9rem; }
.table-eur .num, .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.table-eur .form-control, .table-eur .form-select { min-width: 8rem; }
.badge-soft { display: inline-block; background: var(--eur-soft-bg); color: var(--eur-soft-tx); font-weight: 500; border-radius: .3rem; padding: .4rem .7rem; font-size: .95rem; }
.badge-soft.sm { padding: .2rem .5rem; font-size: .8rem; }
.src-tag { font-size: .75rem; color: var(--bs-secondary-color); border: 1px solid var(--bs-border-color); border-radius: 99px; padding: .05rem .5rem; margin-left: .35rem; white-space: nowrap; }
.pager-bar .pagination { --bs-pagination-padding-x: .75rem; --bs-pagination-padding-y: .4rem; --bs-pagination-color: var(--bs-body-color); --bs-pagination-bg: var(--eur-surface); --bs-pagination-border-color: var(--bs-border-color);
  --bs-pagination-active-bg: var(--eur-surface); --bs-pagination-active-color: var(--bs-primary); --bs-pagination-active-border-color: var(--bs-primary); --bs-pagination-disabled-bg: var(--eur-surface); }

/* ---- Kennzahlen / Fortschritt ---- */
.kpi { display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.4rem; height: 100%; }
.kpi-ic { display: inline-flex; width: 52px; height: 52px; border-radius: 50%; align-items: center; justify-content: center; font-size: 1.5rem; flex: none; background: rgba(var(--bs-primary-rgb), .12); color: var(--bs-primary); }
.kpi-ic.in { background: rgba(25, 135, 84, .13); color: var(--eur-income); } .kpi-ic.out { background: rgba(200, 69, 45, .13); color: var(--eur-expense); }
.kpi small { display: block; color: var(--bs-secondary-color); } .kpi b { font-size: 1.55rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.eur-progress { width: 100%; height: .75rem; appearance: none; -webkit-appearance: none; border: 0; border-radius: 99px; overflow: hidden; background: var(--bs-tertiary-bg); }
.eur-progress::-webkit-progress-bar { background: var(--bs-tertiary-bg); } .eur-progress::-webkit-progress-value { background: var(--bs-primary); border-radius: 99px; } .eur-progress::-moz-progress-bar { background: var(--bs-primary); }
.profit { font-size: 1.5rem; font-weight: 700; }

/* ---- Assistent ---- */
.stepper { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0 0 1.25rem; }
.stepper li { padding: .35rem .9rem; border: 1px solid var(--bs-border-color); border-radius: 99px; font-size: .9rem; color: var(--bs-secondary-color); }
.stepper li.on { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; } .stepper li.done { color: var(--bs-body-color); }
a.choice { display: block; color: var(--bs-body-color); text-decoration: none; border: 1px solid transparent; height: 100%; }
a.choice:hover { border-color: var(--bs-primary); color: var(--bs-body-color); }
dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.25rem; margin-bottom: 0; } dl.kv dt { color: var(--bs-secondary-color); font-weight: 400; } dl.kv dd { margin: 0; overflow-wrap: anywhere; }
.codes { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: .4rem; margin: .75rem 0; }
.big { font-size: 1.1rem; letter-spacing: .05em; } code { overflow-wrap: anywhere; }
.danger-zone { border: 1px solid var(--bs-danger); }

/* ---- Anmeldung / Gast ---- */
.guest-body { background: var(--bs-tertiary-bg); }
.guest-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem 1rem; }
.guest-card { width: 100%; max-width: 440px; background: var(--eur-surface); border-radius: .9rem; box-shadow: var(--eur-shadow); padding: 2rem 1.75rem; }
.guest-card.wide { max-width: 640px; }
textarea.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .8rem; }

@media (max-width: 767.98px) { :root { --eur-topbar-h: 62px; } .page-title { padding: .85rem 1rem; } .tile { min-width: 56px; height: 54px; } .table-eur > tbody > tr > td, .table-eur > thead > tr > th { padding: .7rem .6rem; } }
@media print {
  .topbar, .rail, .hnav, .offcanvas, .no-print, .pager-bar { display: none !important; }
  body, .guest-body { background: #fff !important; } .surface { box-shadow: none !important; border: 1px solid #ddd; } .app-shell { display: block; }
  .container-xxl { max-width: 100% !important; }
}

/* ---- Einstellbares Layout (wird per Einstellungen gesteuert) ---- */
.hnav { display: none; background: var(--eur-surface); border-bottom: 1px solid var(--bs-border-color); }
.hnav-link { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .9rem; border-radius: .5rem; color: var(--bs-body-color); text-decoration: none; white-space: nowrap; }
.hnav-link:hover { background: var(--bs-tertiary-bg); color: var(--bs-body-color); }
.hnav-link.active { color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .1); font-weight: 600; }
.rail-label { display: none; }
body[data-nav=sidebar] .rail { width: 224px; align-items: stretch; padding: 1rem .75rem; }
body[data-nav=sidebar] .rail > nav { align-items: stretch !important; }
body[data-nav=sidebar] .rail-link { width: auto; justify-content: flex-start; gap: .85rem; padding: 0 .85rem; font-size: 1.3rem; }
body[data-nav=sidebar] .rail-label { display: inline; font-size: 1rem; }
body[data-nav=sidebar] .rail-sep { width: auto; }
body[data-nav=top] .rail { display: none !important; }
body[data-nav=top] .app-shell { flex-direction: column; min-height: 0; }
@media (min-width: 768px) { body[data-nav=top] .hnav { display: block; } }
body[data-width=fluid] .app-container { max-width: none; }
body[data-head=primary] .topbar { background: var(--eur-primary); color: var(--eur-on-primary, #fff); }
body[data-head=primary] .topbar .brand, body[data-head=primary] .topbar .btn-head, body[data-head=primary] .topbar .btn-icon, body[data-head=primary] .topbar .text-body-secondary { color: var(--eur-on-primary, #fff) !important; }
body[data-head=primary] .topbar .btn-head:hover, body[data-head=primary] .topbar .btn-head.show { background: rgba(255, 255, 255, .16); }
body[data-head=primary] .topbar .brand-mark { background: var(--eur-on-primary, #fff); color: var(--eur-primary); }
.btn { --bs-btn-border-radius: min(var(--eur-radius, 12px), .6rem); }
.form-control, .form-select { border-radius: min(var(--eur-radius, 12px), .6rem); }
.eur-progress { height: .75rem; }
.stepper li.on { color: var(--eur-on-primary, #fff); }

/* ---- Einstellungen ---- */
.swatches { display: flex; flex-wrap: wrap; gap: .5rem; }
.swatch { width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--eur-surface); box-shadow: 0 0 0 1px var(--bs-border-color); cursor: pointer; padding: 0; }
.swatch:hover, .swatch.on { box-shadow: 0 0 0 2px var(--bs-body-color); }
.sw-blue { background: #1f5fae; } .sw-teal { background: #0f766e; } .sw-green { background: #2f7d32; } .sw-violet { background: #6d3fc0; } .sw-orange { background: #c2570c; } .sw-slate { background: #3d4a5c; }
.opt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.opt span { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; border: 1px solid var(--bs-border-color); border-radius: .6rem; background: var(--eur-surface); }
.opt input:checked + span { border-color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .08); font-weight: 600; }
.opt input:focus-visible + span { outline: 2px solid var(--bs-primary); outline-offset: 2px; }
.set-hub { display: block; text-decoration: none; color: var(--bs-body-color); padding: 1.1rem 1.25rem; height: 100%; }
.set-hub:hover { color: var(--bs-body-color); box-shadow: 0 0 0 2px var(--bs-primary), var(--eur-shadow); }
.set-hub .bi { font-size: 1.6rem; color: var(--bs-primary); }
.preview-card { border: 1px dashed var(--bs-border-color); border-radius: var(--eur-radius, 12px); padding: 1rem; }

/* ---- Benutzerstatus, Protokoll, Belege ---- */
.st { display: inline-block; font-size: .78rem; font-weight: 600; border-radius: 99px; padding: .15rem .6rem; white-space: nowrap; }
.st-ok { background: rgba(25, 135, 84, .15); color: var(--eur-income); } .st-warn { background: rgba(255, 193, 7, .22); color: #8a6100; }
.st-off { background: rgba(108, 117, 125, .18); color: var(--bs-secondary-color); } .st-bad { background: rgba(200, 69, 45, .15); color: var(--eur-expense); }
[data-bs-theme=dark] .st-warn { color: #ffd966; }
tr.row-off > td { opacity: .6; }
.chg { font-size: .85rem; } .chg del { color: var(--eur-expense); text-decoration-thickness: 1px; } .chg ins { color: var(--eur-income); text-decoration: none; font-weight: 500; }
.doc-ic { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: .5rem; background: rgba(var(--bs-primary-rgb), .1); color: var(--bs-primary); font-size: 1.2rem; flex: none; }
.dropzone { border: 2px dashed var(--bs-border-color); border-radius: var(--eur-radius, 12px); padding: 1.25rem; text-align: center; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 1.1rem; border-left: 2px solid var(--bs-border-color); }
.timeline li { position: relative; padding: 0 0 1rem 1rem; }
.timeline li::before { content: ""; position: absolute; left: -1.6rem; top: .35rem; width: .7rem; height: .7rem; border-radius: 50%; background: var(--bs-primary); }
.hash { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .75rem; overflow-wrap: anywhere; }
.set-sticky { top: calc(var(--eur-topbar-h) + 1rem); }
.doc-preview { max-height: 420px; }
.form-range::-webkit-slider-thumb { background: var(--bs-primary); } .form-range::-moz-range-thumb { background: var(--bs-primary); }
.form-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25); }

/* Logo */
.brand-logo { display: block; height: 36px; max-width: 150px; width: auto; object-fit: contain; }
body[data-head=primary] .topbar .brand-logo { background: #fff; border-radius: 6px; padding: 3px 8px; height: 38px; }
@media (max-width: 575.98px) { .brand-logo { max-width: 100px; height: 30px; } }
.report-head { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.report-logo { max-height: 64px; max-width: min(240px, 60%); width: auto; height: auto; object-fit: contain; }
.logo-preview { display: block; max-width: 100%; max-height: 90px; object-fit: contain; border: 1px dashed var(--bs-border-color); border-radius: .5rem; padding: .5rem; background: #fff; }
.logo-empty { display: flex; align-items: center; justify-content: center; height: 90px; background: transparent; }
/* T-Konto */
.tkonto { overflow: hidden; }
.tk-col { padding: 1rem 1.25rem; display: flex; flex-direction: column; }
.tk-head { font-weight: 600; padding-bottom: .5rem; border-bottom: 2px solid var(--bs-body-color); margin-bottom: .25rem; }
.tk-row, .tk-sum { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; border-bottom: 1px solid var(--bs-border-color-translucent); }
.tk-row .num, .tk-sum .num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tk-bal { font-weight: 600; }
.tk-sum { margin-top: auto; border-top: 2px solid var(--bs-body-color); border-bottom: 0; font-weight: 700; padding-top: .6rem; }
.tk-out .tk-head { border-bottom-color: var(--bs-danger); } .tk-in .tk-head { border-bottom-color: var(--bs-success); }
@media (min-width: 768px) { .tk-left { border-right: 2px solid var(--bs-body-color); } }
@media (max-width: 767.98px) { .tk-left { border-bottom: 2px solid var(--bs-body-color); } }
@media print { .tkonto, .surface { break-inside: avoid; } }

.tk-cat { font-weight: 600; background: var(--bs-tertiary-bg); padding-left: .4rem; padding-right: .4rem; margin-top: .35rem; }
.tk-sub { display: grid; grid-template-columns: 5.2rem 1fr auto; gap: .6rem; padding: .2rem .4rem; font-size: .85em; color: var(--bs-secondary-color); border-bottom: 1px dotted var(--bs-border-color-translucent); }
.tk-sub .tk-txt { overflow-wrap: anywhere; } .tk-sub .num { white-space: nowrap; font-variant-numeric: tabular-nums; }

.qr-box { max-width: 220px; } .qr-box .qr { width: 100%; height: auto; display: block; border: 1px solid var(--bs-border-color); border-radius: .5rem; }