:root {
    --bg: #f5f6f4;
    --surface: #ffffff;
    --surface-2: #f0f2ef;
    --border: #dde1dc;
    --text: #1d2420;
    --muted: #66706a;
    --primary: #2f6f4f;
    --primary-dark: #245a3f;
    --primary-soft: #e3efe8;
    --danger: #b3261e;
    --danger-soft: #fbe9e7;
    --warn: #8a5a00;
    --warn-soft: #fff4dc;
    --ok: #1f6b3a;
    --ok-soft: #e4f4e8;
    --info-soft: #e6eef9;
    --radius: 8px;
    --shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 1px 6px rgba(0, 0, 0, .04);
}

* { box-sizing: border-box; }
html { font-size: 15px; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    line-height: 1.45;
}
a { color: var(--primary); }
h1 { font-size: 1.5rem; margin: 0 0 .25rem; }
h2 { font-size: 1.15rem; margin: 1.5rem 0 .6rem; }
h3 { font-size: 1rem; margin: 1rem 0 .4rem; }
p { margin: .4rem 0 .8rem; }
.muted { color: var(--muted); }
.small { font-size: .87rem; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nowrap { white-space: nowrap; }

/* Kopfzeile */
.topbar {
    display: flex; align-items: center; gap: 1rem;
    background: var(--surface); border-bottom: 1px solid var(--border);
    padding: .5rem 1.25rem; position: sticky; top: 0; z-index: 10;
}
.brand { font-weight: 700; color: var(--primary); text-decoration: none; white-space: nowrap; }
.mainnav { display: flex; gap: .15rem; flex-wrap: wrap; flex: 1; align-items: center; }
.mainnav a {
    padding: .35rem .6rem; border-radius: 6px; text-decoration: none; color: var(--text); font-size: .93rem;
}
.mainnav a:hover { background: var(--surface-2); }
.mainnav a.active { background: var(--primary-soft); color: var(--primary-dark); font-weight: 600; }
.nav-sep { width: 1px; height: 1.2rem; background: var(--border); margin: 0 .4rem; }
.userbox { display: flex; gap: .6rem; align-items: center; font-size: .87rem; white-space: nowrap; }
.userbox .tenant { font-weight: 600; }
.nav-toggle { display: none; }

.container { max-width: 1280px; margin: 0 auto; padding: 1.25rem; }
.container.narrow { max-width: 440px; padding-top: 8vh; }
.container.narrow.wide { max-width: 1100px; padding-top: 2rem; }   /* Seiten ohne Anmeldung mit Tabellen (Kontierungs-Link) */

/* Karten & Raster */
.card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1rem 1.25rem; box-shadow: var(--shadow); margin-bottom: 1rem;
}
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }
.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

.stat { padding: .9rem 1.1rem; }
.stat .label { color: var(--muted); font-size: .85rem; }
.stat .value { font-size: 1.5rem; font-weight: 650; font-variant-numeric: tabular-nums; }

/* Formulare */
label { display: block; font-size: .85rem; color: var(--muted); margin-bottom: .2rem; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number],
input[type=month], input[type=url], input[type=file], select, textarea {
    width: 100%; padding: .45rem .55rem; border: 1px solid var(--border); border-radius: 6px;
    background: #fff; font: inherit; color: inherit;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primary-soft); border-color: var(--primary); }
textarea { min-height: 4rem; }
.field { margin-bottom: .8rem; }
.form-row { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.check { display: flex; align-items: center; gap: .4rem; color: var(--text); font-size: .93rem; }
.check input { width: auto; }
form.inline { display: inline; }
.filters { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; }
.filters .field { margin: 0; min-width: 140px; }

/* Buttons */
.btn, button.btn {
    display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .9rem; border-radius: 6px;
    border: 1px solid var(--primary); background: var(--primary); color: #fff; font: inherit; font-weight: 550;
    text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn:hover { background: var(--primary-dark); }
.btn.secondary { background: var(--surface); color: var(--primary); }
.btn.secondary:hover { background: var(--primary-soft); }
.btn.danger { background: var(--surface); color: var(--danger); border-color: var(--danger); }
.btn.danger:hover { background: var(--danger-soft); }
.btn.small { padding: .2rem .55rem; font-size: .85rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
button.link { background: none; border: 0; padding: 0; color: var(--primary); cursor: pointer; font: inherit; text-decoration: underline; }
button.link.danger { color: var(--danger); }

/* Tabellen */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: var(--surface); }
th, td { padding: .45rem .55rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
th { font-size: .82rem; color: var(--muted); font-weight: 600; background: var(--surface-2); }
tr:hover td { background: #fafbf9; }
tfoot td { font-weight: 650; background: var(--surface-2); }
table.compact td, table.compact th { padding: .3rem .4rem; }
table.edit td { padding: .25rem .3rem; }
table.edit input, table.edit select { padding: .3rem .4rem; }
tr.ignored td { color: var(--muted); text-decoration: line-through; }
tr.ignored td input, tr.ignored td select { text-decoration: line-through; }
tr.private td input { font-style: italic; color: var(--muted); }
tr.private td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
a.badge { text-decoration: none; }

/* Status / Badges */
.badge { display: inline-block; padding: .08rem .5rem; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.badge.new { background: var(--info-soft); color: #1e4f8f; }
.badge.review, .badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.booked, .badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.ocr_failed, .badge.bad { background: var(--danger-soft); color: var(--danger); }
.badge.neutral { background: var(--surface-2); color: var(--muted); }
.badge.duplicate { background: #efe7f6; color: #5b3a7a; }
tr.is-duplicate td { color: var(--muted); }
tr.is-duplicate td.num { text-decoration: line-through; }

.flash { padding: .65rem .9rem; border-radius: var(--radius); margin-bottom: 1rem; border: 1px solid transparent; }
.flash-success { background: var(--ok-soft); border-color: #b9dfc4; }
.flash-error { background: var(--danger-soft); border-color: #f1c0bb; }
.flash-warning { background: var(--warn-soft); border-color: #f0d79a; }
.flash-info { background: var(--info-soft); border-color: #c4d6f0; }
.notice { padding: .6rem .8rem; border-radius: 6px; background: var(--warn-soft); margin: .5rem 0; }
.notice.error { background: var(--danger-soft); }
.notice.ok { background: var(--ok-soft); }
/* Kontoauszüge: fehlender Beleg fällt auf, Überschriften sortieren */
tr.bank-missing td { background: var(--danger-soft); }
tr.bank-missing td:first-child { box-shadow: inset 4px 0 0 var(--danger); }
.card.bank-gap { border-left: 4px solid var(--danger); }
a.sort { color: inherit; text-decoration: none; white-space: nowrap; }
a.sort:hover { text-decoration: underline; }
.bank-reason { min-width: 18rem; max-width: 30rem; }
/* Noch zu zahlen (Lieferanten auf Rechnung) */
.stat-ok { border-left: 4px solid var(--ok); }
.stat-warn { border-left: 4px solid var(--warn); }
.stat-bad { border-left: 4px solid var(--danger); }
a.owed-tile { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; text-decoration: none; color: var(--text); }
a.owed-tile .value { font-size: 1.4rem; }
a.owed-tile:hover { box-shadow: 0 0 0 2px var(--border); }
.invoice-box summary { cursor: pointer; }
.bank-reason label.check { align-items: flex-start; margin: .3rem 0; font-size: .85rem; }
.notice ul { margin: .3rem 0 0; padding-left: 1.2rem; }

.preview { width: 100%; min-height: 420px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); }
.preview img { max-width: 100%; display: block; }
.receipt-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.receipt-layout.no-file { grid-template-columns: minmax(0, 1fr); }

.plan-grid input { width: 4rem; text-align: center; }
.plan-grid td.today, .plan-grid th.today { background: var(--primary-soft); }
.plan-grid td.weekend, .plan-grid th.weekend { background: #f7f7f2; }
.bar { height: .5rem; background: var(--surface-2); border-radius: 4px; overflow: hidden; min-width: 80px; }
.bar > span { display: block; height: 100%; background: var(--primary); }

details summary { cursor: pointer; color: var(--primary); }
code, pre { font-family: ui-monospace, Consolas, monospace; font-size: .85rem; }
pre { background: var(--surface-2); padding: .6rem; border-radius: 6px; overflow-x: auto; white-space: pre-wrap; }
.copy { display: flex; gap: .4rem; }
.copy input { font-family: ui-monospace, Consolas, monospace; font-size: .85rem; }

@media (max-width: 960px) {
    .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .receipt-layout { grid-template-columns: minmax(0, 1fr); }
    .topbar { flex-wrap: wrap; }
    .nav-toggle { display: block; margin-left: auto; background: none; border: 1px solid var(--border); border-radius: 6px; padding: .2rem .6rem; font-size: 1.1rem; }
    .mainnav, .userbox { display: none; width: 100%; }
    body.nav-open .mainnav { display: flex; flex-direction: column; align-items: stretch; }
    body.nav-open .userbox { display: flex; padding: .5rem 0; }
    .nav-sep { display: none; }
}
@media (max-width: 600px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
    .container { padding: 1rem; }
}
@media print {
    .topbar, .subnav, .support-banner, .actions, .filters, .btn, .no-print, .flash { display: none !important; }
    .print-block { break-inside: avoid; }
    body { background: #fff; }
    .card { box-shadow: none; border: 0; }
}

/* Support-Einsicht des Betreibers */
.support-banner {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    background: #7a1f16; color: #fff; padding: .45rem 1.25rem; font-size: .9rem;
}
.support-banner .btn.secondary { background: #fff; color: #7a1f16; border-color: #fff; }
.in-support .topbar { border-top: 3px solid #7a1f16; }
.matrix th, .matrix td { text-align: center; }
.matrix th:first-child, .matrix td:first-child { text-align: left; }
.warnbox { border: 1px solid #f0d79a; background: var(--warn-soft); border-radius: 6px; padding: .7rem .9rem; margin: .6rem 0; }

/* Produktionsliste zum Abhaken (auch gedruckt) */
.check-box { display: inline-block; width: 1.3rem; height: 1.3rem; border: 2px solid #888; border-radius: 4px; vertical-align: middle; }
.kitchen-list td { font-size: 1.05rem; padding: .5rem .6rem; }
.kitchen-list .col-check { width: 6.5rem; text-align: center; }

/* Sprungleiste auf langen Seiten */
.jumpnav { display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: baseline; font-size: .9rem; margin: -.4rem 0 1rem; color: var(--muted, #666); }
.jumpnav a { white-space: nowrap; }
.to-top { position: fixed; right: 1rem; bottom: 1rem; background: var(--primary, #2f6f4f); color: #fff; padding: .45rem .8rem; border-radius: 999px;
          text-decoration: none; font-size: .9rem; box-shadow: 0 2px 8px rgba(0,0,0,.2); opacity: 0; pointer-events: none; transition: opacity .2s; }
.to-top.show { opacity: 1; pointer-events: auto; }
[id^="abschnitt-"], .card[id] { scroll-margin-top: 4.5rem; }

/* Positionen mit Hinweis der Belegerkennung */
tr.needs-check td { background: var(--warn-soft, #fff6dc); }
.check-note { color: #7a5b00; margin-top: .2rem; }
tr:target td { outline: 2px solid var(--primary, #2f6f4f); }

/* Bereich Plausibilität (eigene Adresse): andere Farbe, damit sofort sichtbar ist „hier ist etwas anderes“ */
body.area-plausi { --primary: #6b3fa0; --primary-dark: #552f80; --primary-soft: #eee6f7; }
body.area-plausi .topbar { border-bottom: 3px solid var(--primary); }
.area-link { font-weight: 600; }

/* Betreiber-Bereich (eigene Adresse): dunkle Kopfzeile, Bernstein als Akzent – unverwechselbar mit dem Betrieb */
body.area-operator { --primary: #b45309; --primary-dark: #92400e; --primary-soft: #fdf0dc; background: #f4f1ec; }
body.area-operator .topbar { background: #1f2933; border-bottom: 3px solid #f59e0b; }
body.area-operator .topbar .brand, body.area-operator .mainnav a, body.area-operator .userbox, body.area-operator .userbox a { color: #f3f4f6; }
body.area-operator .mainnav a:hover { background: #323f4b; }
body.area-operator .mainnav a.active { background: #f59e0b; color: #1f2933; }
.area-badge { display: inline-block; margin-left: .4rem; padding: .05rem .45rem; border-radius: 4px; background: #f59e0b; color: #1f2933;
    font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; }

/* Unterleiste für Menüpunkte mit mehreren Seiten (Belege, Zuordnung, Rezepte & Produkte, Abschluss) */
.subnav { display: flex; flex-wrap: wrap; gap: .25rem; margin: -.4rem 0 1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--border, #e5e5e5); }
.subnav a { padding: .25rem .65rem; border-radius: 999px; text-decoration: none; color: var(--muted, #555); font-size: .9rem; }
.subnav a:hover { background: var(--surface-2, #f0f0f0); }
.subnav a.active { background: var(--primary-soft); color: var(--primary-dark); font-weight: 600; }

[hidden] { display: none !important; }
#upload-list li.error { color: var(--danger, #b42318); }
#upload-list li.warn { color: var(--warn, #8a5a00); }

/* DAU-Hinweise (20.10.): Bereich als Schild, Person mit Rolle, Testbetrieb gestreift */
.brand .area-badge { font-size: .72rem; font-weight: 700; padding: .12rem .45rem; border-radius: 999px; margin-left: .35rem;
    background: var(--primary); color: #fff; vertical-align: middle; letter-spacing: .02em; }
body:not(.area-plausi):not(.area-operator) .topbar { border-bottom: 3px solid var(--primary); }
body.area-plausi { background: #f6f2fb; }
body.area-plausi .topbar { background: #efe6f8; }
.userbox .tenant { background: var(--primary-soft); color: var(--primary-dark); padding: .15rem .55rem; border-radius: 6px; }
.userbox .who { color: var(--text); text-decoration: none; font-size: .93rem; }
.userbox .who:hover { text-decoration: underline; }
.test-band { background: repeating-linear-gradient(-45deg, #fde68a, #fde68a 14px, #fef3c7 14px, #fef3c7 28px);
    color: #78350f; font-weight: 700; text-align: center; padding: .35rem 1rem; letter-spacing: .04em; border-bottom: 1px solid #f59e0b; }
body.area-plausi .mainnav a.active { background: #fff; }

/* Betrieb wechseln (eine Person in mehreren Betrieben) */
.tenant-switch { position: relative; }
.tenant-switch summary { cursor: pointer; list-style: none; }
.tenant-switch summary::-webkit-details-marker { display: none; }
.tenant-menu { position: absolute; right: 0; top: 2rem; background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0,0,0,.12); min-width: 16rem; z-index: 30; padding: .3rem; }
.tenant-menu a { display: block; padding: .45rem .6rem; border-radius: 6px; color: var(--text); text-decoration: none; white-space: nowrap; }
.tenant-menu a:hover { background: var(--surface-2); }

/* Produkte zuordnen – „Eins nach dem anderen“ (23.10.) */
.assign-progress { display: flex; justify-content: space-between; align-items: center; gap: 1rem; max-width: 52rem; margin: 0 auto .6rem; }
.assign-progress select { width: auto; }
.assign-card { max-width: 52rem; margin: 0 auto 1rem; }
.assign-title { font-size: 1.45rem; font-weight: 650; line-height: 1.25; word-break: break-word; }
.assign-facts { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin-top: .4rem; font-size: .95rem; }
.assign-q { font-size: 1.1rem; margin: 1.2rem 0 .5rem; }
.assign-sugg { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .6rem; }
.assign-sugg .btn { font-size: 1rem; padding: .5rem .9rem; }
.assign-sugg .btn.active { background: var(--primary); color: #fff; }
.assign-sugg .btn.active .muted { color: #e8f2ec; }
.assign-search { position: relative; max-width: 30rem; }
.assign-search input { font-size: 1rem; padding: .55rem .7rem; }
.assign-matches { position: absolute; z-index: 5; left: 0; right: 0; margin: .1rem 0 0; padding: .2rem 0; list-style: none; background: var(--surface, #fff);
    border: 1px solid var(--primary); border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.assign-matches li { padding: .4rem .7rem; cursor: pointer; }
.assign-matches li:hover, .assign-matches li:first-child { background: var(--primary-soft); }
.assign-matches li.new { color: var(--primary); font-weight: 600; }
#assign-chosen { margin-top: .3rem; color: var(--primary-dark); min-height: 1.2em; }
.assign-pack { margin-top: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.assign-pack input { width: 6rem; }
.assign-pack select { width: auto; }
.assign-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.3rem; }
.btn.big { font-size: 1.05rem; padding: .6rem 1.4rem; }
.assign-usage { margin-top: 1rem; border-top: 1px solid #e6e9e7; padding-top: .7rem; }
.assign-usage-btns { display: flex; flex-wrap: wrap; gap: .5rem; margin: .4rem 0; }
.assign-usage-btns .btn { text-align: left; line-height: 1.25; }
.assign-usage-btns .muted { font-weight: 400; font-size: .8rem; }
.assign-progress a { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--muted); }
.assign-progress a:hover, .assign-progress a.strong { color: var(--primary); border-bottom-color: var(--primary); }
.assign-filter { max-width: 20rem; width: 100%; margin: .3rem 0 .6rem; padding: .4rem .6rem; border: 1px solid var(--border); border-radius: 6px; font: inherit; }


/* Startplan auf der Übersicht (Erstbefüllung, 23.10.) */
.startplan .sp-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.startplan .sp-head > div:first-child { flex: 1 1 22rem; }
.startplan .sp-head h2, .startplan > h2 { margin: 0 0 .2rem; }
.sp-count { text-align: right; white-space: nowrap; }
.sp-steps { list-style: none; margin: .6rem 0 0; padding: 0; }
.sp-steps > li { display: flex; gap: .8rem; align-items: flex-start; padding: .75rem 0; border-top: 1px solid var(--border); }
.sp-num { flex: 0 0 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--primary-soft); color: var(--primary);
    display: flex; align-items: center; justify-content: center; font-weight: 700; }
.sp-steps > li.done .sp-num { background: var(--ok-soft); color: var(--ok); }
.sp-steps > li.done .sp-main strong { color: var(--muted); }
.sp-main { flex: 1; min-width: 0; }
.sp-main > div { margin-top: .15rem; }
.sp-who details { margin-top: .25rem; }
.sp-who details .form-row { margin-top: .4rem; }
.sp-actions { display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; }
@media (max-width: 640px) {
    .sp-steps > li { flex-wrap: wrap; }
    .sp-actions { flex-direction: row; align-items: center; width: 100%; padding-left: 2.7rem; }
    .sp-count { text-align: left; }
}
.startplan.sp-collapsed { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; padding-top: .6rem; padding-bottom: .6rem; }
.startplan.sp-collapsed form { margin: 0; }
/* Sprungleiste: angesprungener Abschnitt leuchtet kurz auf */
.jump-target { animation: jump-flash 1.4s ease-out; }
@keyframes jump-flash { 0%, 30% { box-shadow: 0 0 0 3px var(--primary); } 100% { box-shadow: var(--shadow); } }

/* Handy-Seiten (23.10.): große Knöpfe, große Zahlenfelder (mind. 16px, sonst zoomt iOS beim Tippen) */
.mobile-page { max-width: 34rem; margin: 0 auto; }
.mbtn { display: block; width: 100%; margin: .6rem 0; padding: 1rem; border-radius: 10px; border: 2px solid var(--primary);
    background: var(--primary); color: #fff; font: inherit; font-size: 1.1rem; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer; }
.mbtn.secondary { background: var(--surface); color: var(--primary); }
.mbtn .small { font-weight: 400; }
.mobile-queue { list-style: none; padding: 0; margin: 1rem 0; }
.mobile-queue li { padding: .55rem .7rem; margin-bottom: .4rem; border-radius: 6px; background: var(--surface-2); font-size: .92rem; }
.mobile-queue li.ok { background: var(--ok-soft); }
.mobile-queue li.bad { background: var(--danger-soft); }
.count-search { width: 100%; font-size: 1.05rem; padding: .7rem .8rem; border: 1px solid var(--border); border-radius: 8px; margin: .4rem 0 .8rem; position: sticky; top: .3rem; z-index: 2; }
.count-row { display: grid; grid-template-columns: 1fr 6.5rem 5rem; gap: .4rem .5rem; align-items: center; padding: .6rem 0; border-top: 1px solid var(--border); }
.count-row[hidden] { display: none; }
.count-name { font-weight: 600; }
.count-qty, .count-unit { font-size: 1.15rem; padding: .55rem .5rem; border: 1px solid var(--border); border-radius: 8px; width: 100%; }
.count-qty { text-align: right; }
.count-state { grid-column: 1 / -1; min-height: 0; }
.count-state:empty { display: none; }
.count-state.ok { color: var(--ok); }
.count-state.bad { color: var(--danger); }
.mobile-only { display: none; }
@media (max-width: 640px) { .mobile-only { display: inline-block; } }
/* Rezept: Zutaten ohne Einkaufspreis mit passenden Einkäufen (24.10.) */
tfoot td.price-hint { font-weight: 400; }
.price-sources { margin: .35rem 0 0; padding-left: 1.1rem; }
.price-sources li { margin: .2rem 0; }
/* Steuerberater-Übersicht und Rückfragen (24.10.) */
.advisor-card h2 { margin-top: 0; }
.question-box { padding: .6rem .7rem; margin: .5rem 0; border-radius: 6px; background: var(--surface-2); }
.question-box > div { margin: .15rem 0; }
.question-box textarea, .advisor-card textarea { width: 100%; font: inherit; padding: .45rem .55rem; border: 1px solid var(--border); border-radius: 6px; }
/* Startplan: Etappen (26.10.) */
.sp-steps > li.sp-stage { display: block; padding: .9rem 0 .2rem; border-top: 2px solid var(--primary-soft); color: var(--primary); }
.sp-steps > li.sp-stage:first-child { border-top: 0; padding-top: .2rem; }
/* Zählen: Ware, die in der Liste fehlt (26.10.) */
.count-add { margin-top: 1.2rem; padding-top: .8rem; border-top: 2px solid var(--border); }
.count-add label { font-weight: 600; }
.count-add-row { display: grid; grid-template-columns: 1fr 6.5rem 5rem; gap: .5rem; align-items: center; }
.inv-add { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--border); }
.count-new { width: 100%; font-size: 1.05rem; padding: .7rem .8rem; border: 1px solid var(--border); border-radius: 8px; margin: .4rem 0 .6rem; }
/* Schwund am Handy (29.10.): Grund als große Knöpfe */
.schwund-form .count-add-row { grid-template-columns: 1fr 7rem; }
.reason-list { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.mbtn.reason { margin: 0; padding: .7rem .5rem; font-size: .95rem; text-align: left; cursor: pointer; }
.mbtn.reason:has(input:checked) { background: var(--primary); color: #fff; }
.schwund-form details { margin: .8rem 0; }
/* Produktionsplanung (29.10.): Wetter und Veranstaltungen unter dem Datum */
.plan-hint { font-weight: 400; font-size: .75rem; line-height: 1.25; color: var(--muted); max-width: 9rem; margin: .2rem auto 0; white-space: normal; text-align: center; }
.plan-hint .plan-event { display: block; margin-top: .15rem; color: var(--primary); font-weight: 600; }
.plan-grid th.closed, .plan-grid td.closed { background: var(--surface-2, #eee); opacity: .7; }
.plan-hint .plan-holiday { display: block; color: #8a5a00; font-weight: 600; }
.plan-hint .plan-closed { display: block; font-style: italic; }
.plan-hint .plan-open { display: block; color: var(--primary); }
.plan-hint .plan-last { display: block; font-style: italic; }
.plan-hint .plan-soldout { display: block; color: #b3261e; }
button.linklike { background: none; border: 0; padding: 0; color: var(--primary); text-decoration: underline; cursor: pointer; font: inherit; }

/* Belegbild im Seitenfenster (26.10.) */
.preview-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(42vw, 640px); background: var(--card, #fff); border-left: 1px solid #ccd;
  box-shadow: -4px 0 16px rgba(0,0,0,.12); z-index: 50; display: flex; flex-direction: column; }
.preview-panel[hidden] { display: none; }
.preview-head { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .5rem .8rem; border-bottom: 1px solid #dde; }
.preview-panel iframe { flex: 1; width: 100%; border: 0; background: #f4f4f4; }
@media (min-width: 1300px) { body.has-preview { margin-right: min(42vw, 640px); } }   /* schmaler: Fenster liegt über der Seite */
tr.preview-active td { background: var(--info-soft, #eef4fc); }
@media (max-width: 960px) { .preview-panel { width: 100vw; top: auto; height: 60vh; border-left: 0; border-top: 1px solid #ccd; }
  body.has-preview { margin-right: 0; margin-bottom: 60vh; } }
/* Kontenrahmen festlegen (27.10.) */
.chart-options label{display:block;padding:.35rem 0;cursor:pointer}
.chart-options input[type=radio]{margin-right:.4rem}
.acct-pick{display:inline-flex;align-items:center;gap:.35rem;flex-wrap:wrap}.acct-pick input{width:6.5rem}.acct-name{max-width:16rem}
.recipe-sheet h1{margin-bottom:.2rem}.recipe-sheet h2{font-size:1.15rem;margin:1rem 0 .3rem;border-bottom:1px solid #ccc}.recipe-sheet ul{margin:0;padding-left:1.2rem;font-size:1.15rem;line-height:1.7}@media print{.recipe-sheet{box-shadow:none;border:0}.recipe-sheet ul{font-size:14pt}}

/* 30.10. Prognose und Farben in der Planung */
.plan-why { font-size: .72rem; line-height: 1.25; font-weight: 400; color: var(--muted); max-width: 9rem; margin: .2rem 0 0 auto; white-space: normal; text-align: right; }
.plan-grid td.plan-c-red { background: #f8d7d4; color: #8c1d18; font-weight: 600; }
.plan-grid td.plan-c-yellow { background: #fbeec2; color: #6b4e00; font-weight: 600; }
.plan-grid td.plan-c-green { background: #d7efdc; color: #1c5b2c; font-weight: 600; }
.plan-grid td.plan-c-blue { background: #d6e6f7; color: #174a7c; font-weight: 600; }
.sort-progress { max-width: 52rem; margin: 0 auto .7rem; }
.sort-bar { height: .55rem; border-radius: 999px; background: #e6e9e4; overflow: hidden; margin-bottom: .35rem; }
.sort-bar span { display: block; height: 100%; background: #2f6b4f; transition: width .3s; }

/* Übungskopie: unübersehbar, auch vor der Anmeldung */
.practice-banner {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem 1rem; flex-wrap: wrap;
    background: #b45309; color: #fff; padding: .45rem 1.25rem; font-size: .9rem;
}
.practice-banner a { color: #fff; }
.practice-banner .btn.secondary { background: #fff; color: #b45309; border-color: #fff; }
.in-practice .topbar { border-top: 3px solid #b45309; }

/* Menü: beim Überfahren aufklappen (auch per Tastatur); auf dem Handy nur die Verwaltung, dort immer offen */
.nav-item { position: relative; }
.nav-drop { display: none; position: absolute; left: 0; top: 100%; z-index: 50; min-width: 13rem; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: .3rem; box-shadow: 0 6px 18px rgba(0, 0, 0, .12); }
.mainnav .nav-drop a { display: block; white-space: nowrap; }
.mainnav .nav-drop a.current { font-weight: 600; color: var(--primary-dark); }
@media (hover: hover) and (min-width: 801px) { .nav-item:hover .nav-drop { display: flex; } }
@media (min-width: 801px) { .nav-item:focus-within .nav-drop { display: flex; } }
@media (max-width: 800px) { .nav-admin .nav-drop { display: flex; position: static; border: 0; box-shadow: none; padding-left: .8rem; } .nav-item > a { display: block; } }

/* Heute */
.next-step { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; border-left: 4px solid var(--primary); }
.next-step h3 { margin: .1rem 0; font-size: 1.15rem; }
.next-step.calm { border-left-color: var(--ok); }
.plan-bar { margin: .5rem 0; }
.sp-all { margin-top: .6rem; }

/* Produktseite: ein Speichern, bleibt beim Scrollen sichtbar */
.save-bar { position: sticky; bottom: 0; z-index: 5; background: var(--surface); border-top: 1px solid var(--border); padding: .6rem 1rem; margin-top: 1rem; }
.save-bar { box-shadow: 0 -4px 12px rgba(0, 0, 0, .08); }

/* Handy: Unterleiste als wischbare Zeile, Karten mit großen Knöpfen, Felder mit 16px (sonst zoomt iOS beim Tippen) */
@media (max-width: 640px) {
    .subnav { flex-wrap: nowrap; overflow-x: auto; }
    .subnav a { white-space: nowrap; flex: none; }
    .assign-card input[type=text], .assign-card select { font-size: 16px; }
    .assign-actions .btn { flex: 1 1 100%; padding-top: .75rem; padding-bottom: .75rem; }
    .assign-usage-btns .btn { flex: 1 1 100%; }
    .save-bar .small { display: none; }
}

/* Karten am Handy: eine Frage je Bildschirm, gleich groß auf jeder Fensterbreite */
.mcards-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .7rem; font-size: 1.05rem; }
.mcards .assign-q { font-size: 1.15rem; margin: 1rem 0 .6rem; }
.mcards-input { width: 100%; font-size: 1.1rem; padding: .8rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.mcards-qty { width: 7rem; font-size: 1.1rem; padding: .6rem; }
.mcards .assign-pack select { font-size: 16px; }
.mcards-more { margin-top: .9rem; border-top: 1px solid var(--border); padding-top: .7rem; }
.mcards-more summary { cursor: pointer; padding: .4rem 0; font-size: 1.05rem; color: var(--primary); font-weight: 600; }
.mobile-page .count-add { margin-top: .4rem; padding-top: 0; border-top: 0; }
.warn-text { color: #8a5a00; margin-top: .2rem; }

/* Handy-Menü und Küche */
.mobile-group { font-size: .95rem; color: var(--muted); margin: 1.1rem 0 .1rem; font-weight: 600; }
.mobile-group + .mbtn { margin-top: .3rem; }
.mbtn[hidden] { display: none; }
.mobile-row { display: flex; justify-content: space-between; align-items: center; gap: .6rem; text-align: left; }
.factor-row { display: flex; gap: .4rem; flex-wrap: wrap; margin: .3rem 0 .8rem; }
.shop-row { display: flex; gap: .7rem; align-items: center; padding: .7rem 0; border-top: 1px solid var(--border); cursor: pointer; }
.shop-row input { width: 1.5rem; height: 1.5rem; flex: none; }
.shop-row:has(input:checked) { opacity: .5; text-decoration: line-through; }

/* Handy-Menü: Bereiche zum Aufklappen, je einer offen */
.mgroup { margin: .6rem 0; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.mgroup summary { cursor: pointer; padding: .95rem 1rem; font-size: 1.1rem; font-weight: 600; color: var(--primary); }
.mgroup[open] { padding: 0 .7rem .4rem; }
.mgroup[open] summary { padding-left: .3rem; padding-right: .3rem; }
.mobile-pc { text-align: center; margin-top: 2rem; }

/* Rezepte prüfen am Handy */
.recipe-photo { display: block; width: 100%; height: auto; border-radius: 8px; margin-top: .4rem; }
.ing-row { display: grid; grid-template-columns: 1fr 4.6rem 3.8rem 1.6rem; gap: .3rem; align-items: center; padding: .25rem 0; }
.ing-row input[type=text] { width: 100%; min-width: 0; font-size: 16px; padding: .5rem .4rem; border: 1px solid var(--border); border-radius: 6px; }
.mbtn.mbtn-off { border-color: var(--border); color: var(--muted); background: transparent; cursor: default; font-weight: 500; }

/* Gutscheine */
.voucher-head { text-align: center; }
.voucher-rest { font-size: 2.6rem; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: .3rem; }
.voucher-warn { font-weight: 600; color: var(--danger); margin: .6rem 0; }
.voucher-head.voucher-bad { border-color: var(--danger); }
.voucher-head.voucher-warn { border-color: var(--warn); }
.choice-row { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-bottom: .6rem; }
.voucher-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .8rem; }
.voucher-tile { display: block; cursor: pointer; border: 2px solid var(--border); border-radius: 10px; padding: .5rem; background: var(--surface); }
.voucher-tile:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary); }
.voucher-tile input { margin-right: .3rem; }
.voucher-mini { display: block; position: relative; aspect-ratio: 210 / 148; background: #fff; container-type: inline-size; overflow: hidden; margin-bottom: .4rem; border: 1px solid var(--border); }
.voucher-mini > * { position: absolute; }
.voucher-mini img { object-fit: contain; }
.voucher-mini .vm-frame { inset: 4%; border: 1px solid; }
.voucher-mini .vm-t { font-weight: 700; white-space: nowrap; line-height: 1; color: #333; }
.voucher-mini .vm-qr { background: repeating-conic-gradient(#222 0 25%, #fff 0 50%) 0 0 / 12% 12%; }
.voucher-mini .vm-line { border-bottom: 1px solid #aaa; }
@font-face { font-family: VoucherScript; src: url(fonts/Tangerine-Bold.ttf); }
.voucher-mini .vm-title { font-family: VoucherScript, cursive; font-weight: 700; line-height: 1; white-space: nowrap; }
.voucher-mini .vm-name { display: flex; align-items: center; justify-content: center; white-space: normal; text-align: center; font-size: 2.4cqw; }
.voucher-mini .vm-right { object-position: top right; }
.voucher-mini .vm-foot { background: repeating-linear-gradient(#bbb 0 2px, transparent 2px 9px); opacity: .7; }
.voucher-motifs { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .7rem; margin-top: .8rem; }
.voucher-motif { border: 1px solid var(--border); border-radius: 8px; padding: .5rem; }
.voucher-motif img { display: block; width: 100%; height: 6rem; object-fit: contain; margin-bottom: .3rem; }
.voucher-motif.off { opacity: .45; }
.voucher-motif .link { display: block; }
a.voucher-tile { text-decoration: none; color: inherit; }

/* Leistungswahl (2.11.) */
.lw-card h2 { margin: 0; }
.lw-pick { gap: .6rem; margin-bottom: .6rem; }
.lw-pick input { transform: scale(1.3); }
.lw-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.lw-cols h3 { font-size: .95rem; margin: .2rem 0 .4rem; }
.lw-cols ul { margin: 0; padding-left: 1.1rem; }
.lw-commit { align-items: flex-start; margin: .35rem 0; }
.lw-commit input { margin-top: .2rem; }
.lw-head { margin-top: 1.6rem; }
.lw-pos { margin-top: .8rem; }
.lw-pos-hint { margin: .5rem 0 0; font-size: 1rem; color: var(--text); }
.notice-card { border-left: 4px solid var(--primary); }
.lw-change { margin-bottom: 1rem; }
.lw-change > summary { display: inline-block; margin-bottom: 1rem; list-style: none; }
.lw-group { margin: .9rem 0 .2rem; }
.lw-reach { background: var(--warn-soft); border-left: 4px solid var(--warn); padding: .6rem .9rem; margin: .8rem 0; border-radius: 6px; }
@media (max-width: 700px) { .lw-cols { grid-template-columns: 1fr; } }
@media print { .lw-change, .lw-summary .actions { display: none; } }
.pos-hint { background: var(--warn-soft); border: 2px solid #f0d79a; border-radius: 8px; padding: .8rem 1rem; margin: 0 0 1rem; text-align: center; font-size: 1.05rem; }
.pos-hint p { margin: .2rem 0; }
.pos-hint .pos-amount { font-size: 2rem; font-weight: 700; }