:root {
  --rot: #7d1f26;
  --rot-hell: #b4232a;
  --sand: #efe9e2;
  --papier: #fbf9f6;
  --linie: #ddd5cb;
  --text: #2a2522;
  --grau: #6f665f;
  --ok: #2e6b3a;
  --warn: #8a5a00;
  --err: #a1262c;
  --radius: 6px;
}
* { box-sizing: border-box; }
html { font-size: 15px; }
body { margin: 0; font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; color: var(--text); background: var(--sand); line-height: 1.45; }
a { color: var(--rot); }
h1 { font-size: 1.45rem; margin: 0 0 .9rem; font-weight: 600; }
h2 { font-size: 1.1rem; margin: 1.4rem 0 .6rem; font-weight: 600; }
h3 { font-size: 1rem; margin: 1rem 0 .4rem; }
small, .muted { color: var(--grau); }

/* Kopfzeile */
.top { display: flex; align-items: center; gap: 1.2rem; background: var(--rot); color: #fff; padding: 0 1.2rem; height: 52px; position: sticky; top: 0; z-index: 10; }
.top a { color: #fff; text-decoration: none; }
.brand { font-weight: 600; white-space: nowrap; }
.brand .logo { background: #fff; color: var(--rot); padding: 2px 6px; border-radius: 3px; font-weight: 700; margin-right: .3rem; }
.top nav { display: flex; gap: .2rem; flex: 1; overflow-x: auto; }
.top nav a { padding: .45rem .7rem; border-radius: var(--radius); opacity: .88; white-space: nowrap; }
.top nav a:hover { background: rgba(255,255,255,.12); opacity: 1; }
.top nav a.on { background: rgba(255,255,255,.2); opacity: 1; }
.usr { display: flex; gap: .9rem; align-items: center; font-size: .9rem; white-space: nowrap; }
.usr .link { color: #fff; }

main { max-width: 1240px; margin: 0 auto; padding: 1.4rem 1.2rem 4rem; }
.bare main { max-width: 420px; padding-top: 12vh; }

/* Karten, Raster */
.card { background: var(--papier); border: 1px solid var(--linie); border-radius: 8px; padding: 1.1rem 1.2rem; margin-bottom: 1rem; }
.grid { display: grid; gap: 1rem; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .g2, .g3 { grid-template-columns: 1fr; } .top { flex-wrap: wrap; height: auto; padding: .5rem 1rem; } .usr { width: 100%; justify-content: flex-end; } }
.row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }
.head { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: 1rem; }
.head h1 { margin: 0; flex: 1; }

/* Formulare */
label { display: block; font-size: .82rem; color: var(--grau); margin: .55rem 0 .2rem; }
input[type=text], input[type=password], input[type=email], input[type=date], input[type=number], input:not([type]), select, textarea {
  width: 100%; padding: .45rem .55rem; border: 1px solid #cfc6bb; border-radius: var(--radius); font: inherit; background: #fff; color: var(--text);
}
textarea { min-height: 4.2rem; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(125,31,38,.25); border-color: var(--rot); }
.chk { display: flex; gap: .4rem; align-items: center; font-size: .9rem; color: var(--text); margin: .6rem 0; }
.chk input { width: auto; }
button, .btn { display: inline-flex; align-items: center; gap: .35rem; padding: .48rem .95rem; border-radius: var(--radius); border: 1px solid var(--rot); background: var(--rot); color: #fff; font: inherit; font-size: .92rem; cursor: pointer; text-decoration: none; white-space: nowrap; }
button:hover, .btn:hover { background: #64171d; }
.btn2 { background: #fff; color: var(--rot); }
.btn2:hover { background: #f6eeea; }
.btn-klein { padding: .25rem .55rem; font-size: .82rem; }
.danger { background: #fff; color: var(--err); border-color: var(--err); }
button.link { background: none; border: 0; padding: 0; color: var(--rot); text-decoration: underline; cursor: pointer; }
form.inline { display: inline; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }

/* Tabellen */
table { width: 100%; border-collapse: collapse; background: var(--papier); }
th, td { padding: .45rem .55rem; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; font-size: .92rem; }
th { font-weight: 600; font-size: .8rem; color: var(--grau); text-transform: uppercase; letter-spacing: .02em; background: #f4efe9; }
td.r, th.r { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
tr.dim td { color: #9a918a; }
tbody tr:hover td { background: #f7f2ec; }
.table-wrap { overflow-x: auto; border: 1px solid var(--linie); border-radius: 8px; }
.table-wrap table { border: 0; }

/* Status */
.badge { display: inline-block; padding: .1rem .5rem; border-radius: 99px; font-size: .75rem; font-weight: 600; background: #e6dfd6; color: var(--grau); }
.badge.entwurf { background: #fff3d6; color: var(--warn); }
.badge.final { background: #dcefe0; color: var(--ok); }
.badge.storniert { background: #f6dcdc; color: var(--err); }
.flash { padding: .65rem .9rem; border-radius: var(--radius); margin-bottom: 1rem; background: #dcefe0; color: var(--ok); border: 1px solid #b9dcc0; }
.flash.err { background: #f8e1e1; color: var(--err); border-color: #e9bcbc; }
.box-warn { background: #fff6e0; border: 1px solid #edd7a0; color: #6b4a00; padding: .6rem .9rem; border-radius: var(--radius); margin: .5rem 0; font-size: .92rem; }
.box-err { background: #f8e1e1; border: 1px solid #e9bcbc; color: var(--err); padding: .6rem .9rem; border-radius: var(--radius); margin: .5rem 0; font-size: .92rem; }

/* Belegpositionen */
.pos { border: 1px solid var(--linie); border-radius: 8px; background: #fff; padding: .6rem .7rem; margin-bottom: .55rem; display: grid; grid-template-columns: 1fr 80px 84px 100px 70px 110px 96px; gap: .5rem; align-items: start; }
.pos .full { grid-column: 1 / 2; }
.pos .txt { grid-column: 1 / 2; grid-row: span 2; }
.pos label { margin-top: 0; }
.pos .betrag { text-align: right; font-weight: 600; padding-top: 1.55rem; font-variant-numeric: tabular-nums; }
.pos .betrag-in { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.pos .betrag-in.ist-fix { background: #fff6dc; }
.pos .fixmark { font-size: .7rem; background: #c9a227; color: #fff; border-radius: 3px; padding: 0 .25rem; }
.pos .calc { grid-column: 2 / -1; display: grid; grid-template-columns: 100px 90px 100px 1fr; gap: .5rem; align-items: end; background: #f6f7f9; border-radius: 6px; padding: .3rem .4rem; }
.pos .calc input { text-align: right; }
.pos .calc-hint { font-size: .75rem; color: #888; padding-bottom: .45rem; }
.pos .notiz { grid-column: 1 / -1; }
.pos .notiz textarea { background: #fffbe8; }
.pos .tools { grid-column: 2 / -1; display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; font-size: .85rem; }
.pos .tools .chk { margin: 0; }
.pos .titel input, .pos .titel textarea { font-weight: 600; color: var(--rot-hell); }
.pos .titel textarea { min-height: 2.3rem; resize: vertical; }
@media (max-width: 860px) { .pos { grid-template-columns: 1fr 1fr; } .pos .txt, .pos .full { grid-column: 1 / -1; } .pos .tools, .pos .calc { grid-column: 1 / -1; } }
.summen { margin-left: auto; max-width: 360px; }
.summen td { border: 0; padding: .2rem .4rem; }
.summen tr.total td { border-top: 1px solid var(--text); font-weight: 700; }
.kpi { font-size: 1.6rem; font-weight: 600; }
.bar { height: 8px; background: var(--rot); border-radius: 4px; }
.mini td { font-size: .86rem; padding: .3rem .45rem; }
.qr { background: #fff; padding: 10px; display: inline-block; border: 1px solid var(--linie); border-radius: 6px; }
.secret { font-family: ui-monospace, Consolas, monospace; font-size: 1.05rem; letter-spacing: .08em; background: #fff; padding: .3rem .5rem; border-radius: 4px; border: 1px solid var(--linie); }
.tabs { display: flex; gap: .3rem; border-bottom: 1px solid var(--linie); margin-bottom: 1rem; flex-wrap: wrap; }
.tabs a { padding: .5rem .9rem; text-decoration: none; color: var(--grau); border-radius: 6px 6px 0 0; }
.tabs a.on { background: var(--papier); color: var(--text); border: 1px solid var(--linie); border-bottom-color: var(--papier); margin-bottom: -1px; font-weight: 600; }
.hint { font-size: .85rem; color: var(--grau); margin: .3rem 0 0; }
.logo-b { background: var(--rot); color: #fff; padding: 2px 7px; border-radius: 3px; font-weight: 700; }
.zeitform { grid-template-columns: 150px 100px 1fr auto auto; align-items: end; }
.zeitform label.chk { margin: .4rem 0; }
.span2 { grid-column: span 2; }
@media (max-width: 860px) { .zeitform { grid-template-columns: 1fr 1fr; } .span2 { grid-column: auto; } }
.vorschau { width: 100%; height: 80vh; border: 1px solid var(--linie); border-radius: 8px; background: #fff; }
.artikelwahl { max-width: 420px; }

/* v0.6 optionale Positionen */
.pos.pos-optional { border-left: 4px solid #c9a227; background: #fffaf0; }
.pos.pos-optional .betrag { font-style: italic; color: #8a6d00; }
.optwahl td { vertical-align: top; padding: 6px 8px; }
.optwahl tr.ist-option { background: #fffaf0; }
.optwahl .badge { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 3px; background: #c9a227; color: #fff; }

/* v0.7 Ansprechpartner */
.kontakt-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.kontakt-form input, .kontakt-form select { width: auto; min-width: 120px; flex: 1 1 140px; }
details.inline-edit { display: inline-block; }
details.inline-edit[open] { display: block; min-width: 520px; }
details.inline-edit summary { list-style: none; cursor: pointer; display: inline-block; }
td.nowrap { white-space: nowrap; }

/* v0.8 */
.testbanner { background: #fff3cd; color: #7a4b00; border-bottom: 1px solid #e6c46a; padding: 6px 16px; font-size: 13px; text-align: center; }
.testbanner a { color: #7a4b00; text-decoration: underline; }
.badge.job-angebot { background: #e3ecfb; color: #1f4f9a; }
.badge.job-auftrag { background: #e5f4e8; color: #23683a; }
.badge.job-abgeschlossen { background: #eee; color: #555; }
.badge.job-abgelehnt { background: #f8e1e1; color: #8a2323; }
.alttext { white-space: normal; line-height: 1.45; }
table.altpos td { vertical-align: top; }
.sig-editor { min-height: 120px; border: 1px solid #ccc; border-radius: 6px; padding: 10px; background: #fff; font-family: Calibri, Arial, sans-serif; }
.sig-editor img { max-width: 320px; }
.chips { flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.nowrap { white-space: nowrap; }
/* v0.10 Projekte */
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.span4 { grid-column: 1 / -1; }
@media (max-width: 860px) { .g4 { grid-template-columns: 1fr; } }
.belegchips { white-space: nowrap; }
.chip { display: inline-block; font-size: .75rem; padding: 1px 6px; border-radius: 10px; margin-right: 3px; border: 1px solid #ccc; }
.chip-final { background: #e7f3ea; border-color: #9cc7a8; color: #255c33; }
.chip-entwurf { background: #fff6dc; border-color: #e0c56a; color: #7a5c00; }
.projektliste td { vertical-align: middle; }
h2 small.muted { font-size: .8rem; font-weight: 400; margin-left: .5rem; }