/* Kostenzettel v2, Hero-Optik: Nachtschwarz, Signalgelb, Weiß, ein ruhiges Blau.
   Layout: Handy zuerst (eine Spalte, Leiste unten), ab 900px Leiste links. */
:root {
  --ink: #1A1A1A;
  --gelb: #FFE600;
  --blau: #156DB5;
  --papier: #FFFFFF;
  --flaeche: #F3F3F1;
  --flaeche2: #E9E9E6;
  --rand: #D4D7D8;
  --grau: #52585B;
  --grau2: #8A9093;
  --rot: #C0392B;
  --gruen: #1A9E4B;
  --orange: #D97706;
  --schrift: "Titillium Web", "Segoe UI", Roboto, system-ui, sans-serif;
  --radius: 4px;
  --leiste-h: 60px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; height: 100%; }
body { background: var(--flaeche); color: var(--ink); font-family: var(--schrift); font-size: 16px; line-height: 1.4; min-height: 100%; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
h1, h2, h3 { font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; }
h2 { font-size: 20px; }
small { font-size: 12px; }
[hidden] { display: none !important; }

/* Kopf */
.kopf { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--ink); color: #fff; }
.kopf-innen { max-width: 760px; margin: 0 auto; padding: 10px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px)); display: flex; align-items: center; gap: 12px; }
.wortmarke { font-weight: 700; font-size: 20px; letter-spacing: -0.02em; white-space: nowrap; }
.wortmarke span { background: var(--gelb); color: var(--ink); padding: 0 5px; margin-right: 1px; }
.kopf-firma { flex: 1; min-width: 0; color: #B9BDBF; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Leiste */
.leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: var(--ink); display: flex; justify-content: space-around; padding: 4px 0 calc(4px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid #333; }
.leiste button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; color: #A1A7AA; font-size: 11px; font-weight: 600; }
.leiste button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.leiste button.aktiv { color: var(--gelb); }

main { max-width: 760px; margin: 0 auto; padding: 16px max(16px, env(safe-area-inset-right, 0px)) calc(var(--leiste-h) + 110px) max(16px, env(safe-area-inset-left, 0px)); }
main > section { display: none; }
main > section.aktiv { display: block; }

@media (min-width: 900px) {
  :root { --leiste-h: 0px; }
  .leiste { top: 0; bottom: 0; right: auto; width: 200px; flex-direction: column; justify-content: flex-start; padding: 70px 10px 20px; border-top: none; border-right: 1px solid #333; }
  .leiste button { flex: none; flex-direction: row; gap: 12px; padding: 12px 12px; font-size: 15px; border-radius: var(--radius); width: 100%; justify-content: flex-start; }
  .leiste button.aktiv { background: #2A2A2A; }
  .kopf-innen, main { margin-left: 200px; max-width: none; padding-left: 32px; padding-right: 32px; }
  main { max-width: 980px; }
  main { padding-bottom: 120px; }
}

/* Bausteine */
.card { background: var(--papier); border: 1px solid var(--rand); border-radius: var(--radius); padding: 14px; margin-bottom: 12px; }
.abschnitt { margin-top: 22px; }
.abschnitt-kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 18px 0 10px; flex-wrap: wrap; }
.abschnitt-kopf h2 { font-size: 18px; }
.eyebrow { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--blau); font-weight: 700; }
.hinweis { font-size: 13px; color: var(--grau); }
.link { color: var(--blau); font-weight: 600; font-size: 14px; padding: 6px 2px; }
.link.rot { color: var(--rot); }
.btn { display: inline-block; width: 100%; border-radius: var(--radius); padding: 13px 16px; font-size: 16px; font-weight: 700; text-align: center; margin-top: 8px; background: var(--flaeche2); color: var(--ink); }
.btn.gelb { background: var(--gelb); color: var(--ink); }
.btn.dunkel { background: var(--ink); color: #fff; }
.btn.hell { background: var(--flaeche2); color: var(--ink); }
.btn.klein { width: auto; margin: 0; padding: 8px 14px; font-size: 14px; }
.btn:disabled { opacity: .5; cursor: default; }
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vier { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 520px) { .vier { grid-template-columns: 1fr 1fr; } }
label.feld { display: block; font-size: 13px; font-weight: 600; color: var(--grau); margin-bottom: 10px; }
label.feld input, label.feld textarea, label.feld select { display: block; width: 100%; margin-top: 4px; border: 1px solid var(--rand); border-radius: var(--radius); padding: 11px 12px; font-size: 16px; font-weight: 400; background: #fff; color: var(--ink); }
label.feld textarea { min-height: 72px; resize: vertical; }
input:focus, textarea:focus, select:focus, button:focus-visible { outline: 2px solid var(--blau); outline-offset: 1px; }
.feld-haken { display: flex; align-items: flex-start; gap: 10px; padding: 10px 2px 14px; cursor: pointer; font-weight: 600; font-size: 14px; }
.feld-haken input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--ink); }
.feld-haken small { display: block; color: var(--grau); font-weight: 400; margin-top: 2px; }
.suche { margin-bottom: 10px; }
.suche input { width: 100%; border: 1px solid var(--rand); border-radius: var(--radius); background: #fff; padding: 11px 12px; font-size: 16px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chips button { border: 1px solid var(--rand); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; background: #fff; color: var(--grau); }
.chips button.aktiv { background: var(--ink); color: #fff; border-color: var(--ink); }
.zurueck { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.speicherstand { font-size: 12px; color: var(--grau2); }
.speicherstand.warn { color: var(--rot); font-weight: 700; }
.logo-vorschau { display: block; max-height: 60px; margin-top: 8px; }
.version { text-align: center; margin: 18px 0 6px; }

/* Start */
.hero { background: var(--ink); color: #fff; border-radius: var(--radius); padding: 22px 18px 18px; }
.hero h1 { font-size: 30px; line-height: 1.1; margin: 6px 0 8px; }
.hero-text { color: #C7CBCD; max-width: 48ch; font-size: 15px; }
.kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; }
.kachel { background: #2A2A2A; border-radius: var(--radius); padding: 10px 12px; cursor: pointer; text-align: left; color: #fff; }
.kachel b { display: block; font-size: 26px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kachel small { color: #A1A7AA; font-size: 12px; }
.kachel.gelb { background: var(--gelb); color: var(--ink); }
.kachel.gelb small { color: #5B5500; }

/* Listen */
.liste { display: flex; flex-direction: column; gap: 8px; }
.eintrag { background: var(--papier); border: 1px solid var(--rand); border-radius: var(--radius); padding: 12px 14px; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; cursor: pointer; text-align: left; width: 100%; }
.eintrag:active { background: var(--flaeche); }
.eintrag .e-titel { font-weight: 700; font-size: 16px; }
.eintrag .e-sub { color: var(--grau); font-size: 13px; }
.eintrag .e-betrag { font-weight: 700; font-size: 17px; text-align: right; font-variant-numeric: tabular-nums; }
.eintrag .e-status { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.leer { color: var(--grau); font-size: 14px; padding: 14px; background: var(--papier); border: 1px dashed var(--rand); border-radius: var(--radius); }
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--flaeche2); color: var(--grau); white-space: nowrap; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.entwurf { background: var(--flaeche2); color: var(--grau); }
.pill.festgeschrieben { background: #E3EEF8; color: var(--blau); }
.pill.gesendet { background: #FFF6B3; color: #6B5F00; }
.pill.bezahlt { background: #E1F3E7; color: #137A38; }
.pill.storniert { background: #F9E3E0; color: var(--rot); }
.pill.offen { background: #FFF6B3; color: #6B5F00; }
.pill.ueberfaellig { background: #F9E3E0; color: var(--rot); }

/* Vorgang */
.vg-kopf .kunde-wahl { display: flex; flex-direction: column; align-items: flex-start; width: 100%; border: 1px solid var(--rand); border-radius: var(--radius); padding: 8px 12px; margin-bottom: 10px; background: #fff; text-align: left; }
.kw-label { font-size: 12px; color: var(--grau); font-weight: 600; }
.kw-name { font-weight: 700; font-size: 16px; }
.kw-name.leer { color: var(--blau); }
.belege-leiste { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 8px; scrollbar-width: thin; }
.belege-leiste .bchip { flex: none; background: var(--papier); border: 1px solid var(--rand); border-radius: var(--radius); padding: 8px 12px; text-align: left; min-width: 130px; }
.belege-leiste .bchip b { display: block; font-size: 14px; }
.belege-leiste .bchip small { display: block; color: var(--grau); }
.belege-leiste .bchip.plus { border-style: dashed; color: var(--blau); font-weight: 700; display: flex; align-items: center; justify-content: center; min-width: 110px; }
.vg-aktionen { display: flex; justify-content: space-between; margin-top: 16px; }

/* Editor (Positionen), aus dem Kostenzettel 1.7, an die Optik angepasst */
.bauteil { background: var(--papier); border: 1px solid var(--rand); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; }
.b-kopf { display: flex; align-items: center; gap: 6px; padding: 10px 10px 6px; }
.b-kopf input { flex: 1; min-width: 0; border: 1px solid var(--rand); border-radius: var(--radius); padding: 10px 12px; font-size: 17px; font-weight: 700; }
.b-klapp { background: var(--flaeche2); border-radius: var(--radius); width: 42px; height: 42px; font-size: 18px; flex: none; }
.b-zu-zeile { display: none; padding: 12px 14px; justify-content: space-between; align-items: center; cursor: pointer; }
.b-zu-zeile span { font-weight: 700; }
.b-zu-zeile b { font-size: 17px; font-variant-numeric: tabular-nums; }
.bauteil.zu .b-kopf, .bauteil.zu .b-inhalt { display: none; }
.bauteil.zu .b-zu-zeile { display: flex; }
.gruppe { padding: 4px 10px 6px; }
.gruppe h4 { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--grau); margin: 6px 2px 4px; }
.plus { border: 1px dashed var(--rand); border-radius: var(--radius); width: 100%; padding: 8px; color: var(--blau); font-weight: 700; font-size: 14px; margin-top: 4px; }
.zeile { border: 1px solid var(--rand); border-radius: var(--radius); padding: 8px; margin-bottom: 8px; background: #FCFCFB; position: relative; }
.z-oben { display: flex; gap: 4px; align-items: flex-start; }
.z-bezbox { flex: 1; min-width: 0; position: relative; }
.z-oben textarea { display: block; width: 100%; border: 1px solid var(--rand); border-radius: var(--radius); padding: 9px 10px; font-size: 16px; line-height: 1.3; resize: none; overflow: hidden; background: #fff; }
.z-x { color: var(--rot); font-size: 22px; line-height: 1; width: 32px; height: 38px; flex: none; }
.z-merk { width: 34px; height: 38px; flex: none; padding: 0; }
.z-merk svg { width: 20px; height: 20px; fill: none; stroke: #B5BBBE; stroke-width: 2; stroke-linejoin: round; }
.z-merk.gruen svg { fill: var(--gruen); stroke: var(--gruen); }
.pfeile { display: flex; flex-direction: column; width: 26px; flex: none; gap: 2px; }
.pfeile button { background: var(--flaeche2); border-radius: 3px; height: 18px; font-size: 10px; padding: 0; line-height: 18px; }
.pfeile button:disabled { color: #C5CACD; background: #F4F4F2; }
.b-kopf .pfeile { width: 30px; }
.b-kopf .pfeile button { height: 20px; line-height: 20px; }
.b-zu-zeile .pfeile { margin-left: auto; margin-right: 10px; }
.b-zu-zeile b { flex: none; }
.hinweisbox { padding: 8px 10px 10px; border-top: 1px solid var(--rand); }
.hinweisbox h4 { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--grau); margin: 2px 2px 4px; }
.hinweisbox .z-oben textarea { font-size: 15px; }
.hinweis-plus { color: var(--blau); font-weight: 700; font-size: 14px; padding: 9px 4px; }
.zettel-hinweis { background: var(--papier); border: 1px solid var(--rand); border-radius: var(--radius); margin: 12px 0; padding: 0 6px; }
.zettel-hinweis .hinweisbox { border-top: none; }
.vorschlaege { position: absolute; left: 0; right: 0; top: 100%; z-index: 15; background: #fff; border: 1px solid var(--rand); border-radius: var(--radius); box-shadow: 0 6px 18px rgba(20,20,20,.14); margin-top: 2px; max-height: 220px; overflow-y: auto; }
.vorschlag { display: flex; justify-content: space-between; gap: 8px; padding: 9px 10px; border-bottom: 1px solid var(--rand); cursor: pointer; font-size: 15px; }
.vorschlag:last-child { border-bottom: none; }
.vorschlag span { flex: 1; min-width: 0; }
.vorschlag small { color: var(--grau); white-space: nowrap; }
.z-unten { display: grid; grid-template-columns: 56px 74px minmax(90px, 1fr) auto; gap: 6px; margin-top: 6px; align-items: end; }
.z-unten label { display: block; font-size: 11px; color: var(--grau); font-weight: 600; min-width: 0; }
.z-unten input, .z-unten select { display: block; width: 100%; min-width: 0; margin-top: 2px; border: 1px solid var(--rand); border-radius: var(--radius); padding: 8px 5px; font-size: 16px; background: #fff; }
.z-unten input { text-align: right; font-variant-numeric: tabular-nums; }
.z-unten input:disabled { background: var(--flaeche); color: var(--grau); }
.z-unten select { padding: 8px 2px; appearance: auto; }
.geld { display: flex; align-items: center; margin-top: 2px; border: 1px solid var(--rand); border-radius: var(--radius); background: #fff; }
.geld input { border: none; margin: 0; padding-right: 2px; }
.geld input:focus { outline: none; }
.geld:focus-within { outline: 2px solid var(--blau); }
.geld i { font-style: normal; color: var(--grau); padding: 0 6px 0 0; }
.z-betrag { text-align: right; padding-bottom: 8px; min-width: 76px; }
.z-betrag small { display: block; font-size: 11px; color: var(--grau); font-weight: 600; }
.z-betrag b { font-size: 16px; font-variant-numeric: tabular-nums; }
.b-zwischen { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--flaeche); border-top: 1px solid var(--rand); padding: 11px 14px; font-weight: 700; }
.b-zwischen b { font-size: 18px; white-space: nowrap; flex: none; font-variant-numeric: tabular-nums; }
.b-aktionen { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 10px; }
.b-aktionen button { background: var(--flaeche2); border-radius: var(--radius); padding: 9px 12px; font-size: 14px; font-weight: 700; }
.b-aktionen button.weg { background: none; color: var(--rot); margin-left: auto; }
.b-aktionen .hinweis { padding: 9px 4px; }

/* Katalog-Artikel */
.art-zeile { display: grid; grid-template-columns: 1fr 64px 84px 28px; gap: 6px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--rand); }
.art-zeile:last-child { border-bottom: none; }
.art-zeile input, .art-zeile select { width: 100%; min-width: 0; border: 1px solid transparent; border-radius: var(--radius); padding: 6px; font-size: 15px; background: transparent; }
.art-zeile input:focus, .art-zeile select:focus { background: #fff; border-color: var(--rand); }
.art-zeile input[data-f=ep] { text-align: right; }
.art-zeile .z-x { width: 28px; height: 32px; font-size: 20px; }
.art-kopf { display: grid; grid-template-columns: 1fr 64px 84px 28px; gap: 6px; font-size: 11px; color: var(--grau); text-transform: uppercase; letter-spacing: .06em; padding: 0 6px 4px; }
.art-kopf span:nth-child(3) { text-align: right; }

/* Fuss */
.fuss { position: fixed; left: 0; right: 0; bottom: var(--leiste-h); z-index: 20; background: var(--papier); border-top: 1px solid var(--rand); display: none; }
.fuss.sichtbar { display: block; }
.fuss-innen { max-width: 760px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 8px; }
@media (min-width: 900px) { .fuss { left: 200px; } .fuss-innen { max-width: 980px; padding: 10px 32px; } }
.fuss-gesamt { flex: 1; }
.fuss-gesamt small { display: block; font-size: 12px; color: var(--grau); font-weight: 600; }
.fuss-gesamt b { font-size: 24px; font-variant-numeric: tabular-nums; }
.fuss .btn { width: auto; margin: 0; padding: 12px 16px; }

/* Sheets */
.sheet { position: fixed; inset: 0; z-index: 40; background: rgba(26,26,26,.55); display: none; align-items: flex-end; }
.sheet.offen { display: flex; }
.sheet-box { background: #fff; width: 100%; max-width: 640px; margin: 0 auto; border-radius: 10px 10px 0 0; padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px)); max-height: 82vh; display: flex; flex-direction: column; }
.sheet-kopf { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.sheet-kopf input { flex: 1; border: 1px solid var(--rand); border-radius: var(--radius); padding: 11px 12px; font-size: 17px; }
.sheet-kopf b { flex: 1; font-size: 17px; }
.sheet-kopf button { background: var(--flaeche2); border-radius: var(--radius); width: 44px; height: 44px; font-size: 22px; }
.such-liste { overflow-y: auto; flex: 1; }
.such-eintrag { display: flex; justify-content: space-between; align-items: center; padding: 12px 6px; border-bottom: 1px solid var(--rand); cursor: pointer; gap: 8px; }
.such-eintrag span { font-weight: 700; }
.such-eintrag small { display: block; color: var(--grau); font-weight: 400; font-size: 12px; }
.beleg-wahl { display: grid; gap: 8px; }
.beleg-wahl button { text-align: left; border: 1px solid var(--rand); border-radius: var(--radius); padding: 12px 14px; display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; }
.beleg-wahl button b { grid-row: 1 / 3; font-size: 22px; background: var(--ink); color: var(--gelb); width: 46px; height: 46px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-size: 14px; letter-spacing: .04em; }
.beleg-wahl button span { font-weight: 700; }
.beleg-wahl button small { color: var(--grau); }
.beleg-wahl button:disabled { opacity: .45; }

/* Beleg-Seite */
.bg-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.bg-kopf h2 { font-size: 22px; }
.bg-kopf .nummer { font-size: 14px; color: var(--grau); }
.bg-summen { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-variant-numeric: tabular-nums; margin-top: 8px; }
.bg-summen .ges { font-weight: 700; font-size: 18px; border-top: 2px solid var(--ink); padding-top: 6px; }
.bg-summen .rest { font-weight: 700; font-size: 20px; background: var(--gelb); padding: 6px 8px; }
.bg-aktionen { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.bg-aktionen .btn { width: auto; flex: 1; min-width: 140px; }
.fehlt { background: #FFF6B3; border: 1px solid #E8D54A; border-radius: var(--radius); padding: 10px 12px; font-size: 14px; }
.fehlt ul { margin: 4px 0 0 18px; }
.vorschau { width: 100%; height: 70vh; border: 1px solid var(--rand); border-radius: var(--radius); background: #fff; }
@media (min-width: 900px) { .vorschau { height: 80vh; } }

/* Kunde */
.kd-karte { display: grid; grid-template-columns: 1fr; gap: 6px; }
.kd-karte .kd-name { font-size: 22px; font-weight: 700; }
.kd-karte .kd-zeile { display: grid; grid-template-columns: 90px 1fr; gap: 8px; font-size: 15px; padding: 4px 0; border-bottom: 1px solid var(--flaeche2); }
.kd-karte .kd-zeile small { color: var(--grau); font-weight: 600; font-size: 13px; padding-top: 2px; }
.kd-karte a { color: var(--blau); font-weight: 600; text-decoration: none; }

.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--leiste-h) + 24px); z-index: 60; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--radius); font-size: 14px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .2s; max-width: 90vw; }
.toast.zeigen { opacity: 1; }

.anmeldung { position: fixed; inset: 0; z-index: 80; background: var(--ink); display: flex; align-items: center; justify-content: center; padding: 16px; }
.anmeldung-box { background: #fff; border-radius: var(--radius); padding: 24px; width: 100%; max-width: 360px; }
.anmeldung-box .wortmarke { margin-bottom: 16px; font-size: 24px; }

@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }
@media print { .kopf, .leiste, .fuss, .sheet, .toast { display: none !important; } }