/* =====================================================================
   Schwalbennestchen – Gestaltung (einzige CSS-Datei, aus dem abgenommenen Klickdummy)
   ===================================================================== */

/* ===== Farben & Grundwerte (eine Quelle) ===== */
:root{
  --navy:#1f2a44; --rose:#b5656f; --rose-hell:#f7eced;
  --grund:#faf7f4; --flaeche:#fff; --flaeche-2:#f3eee9; --linie:#e5ddd5;
  --text:#222833; --gedaempft:#6b6f78;
  --gut:#2e7d4f; --warn:#a15c00; --kritisch:#b3261e;
  --reihe-1:#3d5a9e; --reihe-2:#c2606b;
  --kb:0px; --radius:12px;
  --seite:980px;   /* Breite des Seiteninhalts – Kopfzeile richtet sich danach aus */
}
*{box-sizing:border-box}

/* ===== Feste Seite (Verfassung 17) – nie pro Ansicht überschreiben ===== */
html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
body{background:var(--grund);color:var(--text);font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-text-size-adjust:100%}
input,select,textarea,button{font:inherit;color:inherit}
input,select,textarea{font-size:16px}
a{color:var(--navy)} a.knopf{text-decoration:none;display:inline-block}

/* ===== Rahmen: Kopfzeile, Inhalt, Register ===== */
.app{height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"kopf" "inhalt" "tabs"}
.kopf{grid-area:kopf;display:flex;align-items:center;justify-content:flex-start;padding:calc(6px + env(safe-area-inset-top)) 16px 6px;background:var(--flaeche);border-bottom:1px solid var(--linie)}
.kopf img{height:60px;max-width:100%;object-fit:contain}
.inhalt{grid-area:inhalt;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scrollbar-gutter:stable both-edges;padding:16px 16px calc(24px + var(--kb))}
.inhalt>*{max-width:var(--seite);margin-left:auto;margin-right:auto}
.tabs{grid-area:tabs;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));background:var(--flaeche);border-top:1px solid var(--linie);padding-bottom:env(safe-area-inset-bottom)}
.tab{border:0;background:none;padding:7px 2px 6px;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--gedaempft);font-size:11px;cursor:pointer;min-width:0}
.tab svg{width:22px;height:22px}
.tab span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.tab.aktiv{color:var(--rose);font-weight:600}
.tab .lang{display:none}
@media (min-width:760px){
  .app{grid-template-areas:"kopf tabs" "inhalt inhalt";grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  /* Wordmarke bündig mit dem Seiteninhalt, Register direkt daneben */
  .kopf{padding-left:max(calc(16px + var(--sb, 0px)), calc((100vw - var(--seite)) / 2))}
  .tabs{border-top:0;border-bottom:1px solid var(--linie);display:flex;justify-content:flex-start;align-items:center;gap:4px;padding:0 max(calc(16px + var(--sb, 0px)), calc((100vw - var(--seite)) / 2)) 0 32px}
  .tab{flex-direction:row;gap:8px;font-size:14px;padding:10px 14px;border-bottom:2px solid transparent}
  .tab.aktiv{border-bottom-color:var(--rose)}
  .tab svg{width:18px;height:18px}
  .tab .kurz{display:none} .tab .lang{display:inline}
  .kopf img{height:76px}
}
@media (min-width:760px) and (max-width:1099px){
  .tabs{gap:0;padding-left:12px}
  .tab{padding:10px 8px}
}
@media (min-width:760px) and (max-width:939px){
  .tab svg{display:none}
}

/* ===== Grundelemente ===== */
h1,h2,h3{font-family:Georgia,"Times New Roman",serif;color:var(--navy);font-weight:600;margin:0 0 10px}
h1{font-size:22px} h2{font-size:18px} h3{font-size:15px}
.karte{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius);padding:16px;margin-bottom:14px;min-width:0}
.zeile{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.zeile>*{min-width:0}
.raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:10px}
.feld{display:flex;flex-direction:column;gap:4px;min-width:0}
.feld label{font-size:12.5px;color:var(--gedaempft);font-weight:600}
.feld input,.feld select,.feld textarea,.eingabe{width:100%;min-width:0;padding:9px 11px;border:1px solid var(--linie);border-radius:10px;background:#fff}
.feld textarea{resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--rose);outline-offset:0;border-color:var(--rose)}
.knopf{border:1px solid var(--navy);background:var(--navy);color:#fff;border-radius:10px;padding:9px 14px;cursor:pointer;font-weight:600;white-space:nowrap}
.knopf.leise{background:#fff;color:var(--navy);border-color:var(--linie)}
.knopf.rose{background:var(--rose);border-color:var(--rose)}
.knopf.gefahr{background:#fff;color:var(--kritisch);border-color:#e7c3c0}
.knopf.klein{padding:5px 10px;font-size:13px;font-weight:500}
.knopf:disabled{opacity:.45;cursor:not-allowed}
.knopfleiste{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.hinweis{font-size:13px;color:var(--gedaempft)}
.fehlerbox{background:#fdecea;color:var(--kritisch);border-radius:10px;padding:10px 12px;margin-bottom:12px;font-size:14px}
.abstand{margin-top:10px}
.schalter{display:flex;gap:8px;align-items:center;cursor:pointer}
.schalter input{width:20px;height:20px;margin:0}
.knopfleiste.unter-karten{margin:-4px 0 18px}
#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(84px + var(--kb));z-index:70;background:var(--navy);color:#fff;padding:9px 16px;border-radius:999px;font-size:14px;display:none;max-width:calc(100vw - 32px);text-align:center}

.abstand-gross{margin-top:12px}
.hinweisbox{background:var(--rose-hell);color:var(--navy);border-radius:10px;padding:10px 12px;margin-bottom:12px;font-size:14px}
.badge{display:inline-block;border-radius:999px;padding:2px 9px;font-size:12px;font-weight:600;white-space:nowrap}
.b-offen{background:#fff3e0;color:var(--warn)} .b-bezahlt{background:#e6f4ea;color:var(--gut)}
.b-storniert{background:#eee;color:#777;text-decoration:line-through} .b-alt{background:var(--flaeche-2);color:var(--gedaempft)}
.st-gut{color:var(--gut)} .st-warn{color:var(--warn)} .st-kritisch{color:var(--kritisch)}
.rechts{text-align:right} .zahl{font-variant-numeric:tabular-nums;white-space:nowrap}
.ganze-breite{grid-column:1/-1}
details>summary{cursor:pointer;color:var(--navy);font-weight:600;font-size:14px;padding:4px 0}

/* ===== Listen (Ausgangsbuch, Kunden) ===== */
.listen-karte{padding:6px 12px}
.leer{padding:10px 0;margin:0}
.liste{border-top:1px solid var(--linie)}
.lz{display:grid;gap:2px 10px;padding:10px 4px;border-bottom:1px solid var(--linie);cursor:pointer;
  grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"nr betrag" "kunde status" "leistung leistung"}
.lz:hover{background:var(--flaeche-2)}
.lz .nr{grid-area:nr;font-weight:700} .lz .betrag{grid-area:betrag;text-align:right;font-weight:700}
.lz .kunde{grid-area:kunde;overflow-wrap:anywhere} .lz .status{grid-area:status;text-align:right}
.lz .leistung{grid-area:leistung;color:var(--gedaempft);font-size:13px;overflow-wrap:anywhere}
.lz.kunde-zeile{grid-template-areas:"nr betrag" "kunde kunde" "leistung leistung"}
.lz.kunde-zeile .nr{font-weight:600;overflow-wrap:anywhere}
.lz.kunde-rechnung{grid-template-areas:"nr betrag" "leistung status"}
.lz.storno .nr,.lz.storno .betrag{text-decoration:line-through;color:#888}
.lz.kopfzeile{display:none}
.lz.buch-zeile .datum{display:none}
@media (min-width:760px){
  .lz.buch-zeile,.lz.kopfzeile{grid-template-columns:90px 80px minmax(0,1.2fr) minmax(0,1.6fr) 110px 110px;grid-template-areas:"nr datum kunde leistung betrag status";align-items:center}
  .lz.buch-zeile .datum{display:block;grid-area:datum} .lz.buch-zeile .leistung{font-size:14px}
  .lz.kopfzeile{display:grid;cursor:default;font-size:12.5px;color:var(--gedaempft);font-weight:600}
  .lz.kopfzeile .datum{grid-area:datum}
  .lz.kopfzeile:hover{background:none}
}

/* ===== Statistik: Diagramme (HTML-Balken, Text bleibt in echter Größe) ===== */
.statistik-raster{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px}
.legende{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--gedaempft);margin-bottom:8px}
.legende i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.saeulen{position:relative;height:190px;margin:6px 0 0 44px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;border-bottom:1px solid #cfc7bf}
.saeulen .gl{position:absolute;left:0;right:0;border-top:1px solid #eee7e0;pointer-events:none}
.saeulen .gl span{position:absolute;right:calc(100% + 6px);top:-8px;font-size:11px;color:var(--gedaempft);white-space:nowrap}
.saeule{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:2px;height:100%;min-width:0}
.saeule .bar{flex:1 1 0;max-width:22px;border-radius:4px 4px 0 0;min-height:0}
.saeulen-achse{margin-left:44px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;font-size:11px;color:var(--gedaempft);text-align:center;padding-top:4px}
.saeulen-achse span{overflow:hidden;white-space:nowrap}
.saeulen-achse b{font-weight:400} .saeulen-achse .kurz{display:none}
@media (max-width:479px){ .saeulen-achse .lang{display:none} .saeulen-achse .kurz{display:inline} }
.hbalken{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 12px;font-size:14px}
.hbalken .name{overflow-wrap:anywhere}
.hbalken .wert{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.hbalken .spur{grid-column:1/-1;height:8px;background:var(--flaeche-2);border-radius:4px;margin-bottom:8px;overflow:hidden}
.hbalken .spur b{display:block;height:100%;background:var(--reihe-1);border-radius:4px}
.waechter .spur{height:12px;background:var(--flaeche-2);border-radius:6px;overflow:hidden;margin:6px 0 4px}
.waechter .spur b{display:block;height:100%;border-radius:6px}
.waechter-zeile{margin-bottom:12px}
.waechter-kopf{justify-content:space-between}
.waechter-status{font-size:13px;font-weight:600}
table.tab-ansicht{width:100%;border-collapse:collapse;font-size:13px;margin-top:6px}
table.tab-ansicht td,table.tab-ansicht th{padding:4px 6px;border-bottom:1px solid var(--linie);text-align:left}
table.tab-ansicht .rechts{text-align:right}
#tip{position:fixed;z-index:60;pointer-events:none;background:var(--navy);color:#fff;font-size:13px;padding:5px 9px;border-radius:8px;display:none;max-width:240px}
.tippbar{cursor:pointer}

/* ===== Kennzahlen & Zeitraum ===== */
.zeile .eingabe.jahrfilter{width:auto;flex:0 0 auto}
.kennzahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,124px),1fr));gap:10px;margin-bottom:14px}
.kz{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius);padding:12px 14px;min-width:0}
.kz .w{font-size:clamp(17px,5vw,21px);font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kz .t{font-size:12.5px;color:var(--gedaempft);font-weight:600}

/* ===== Neue Rechnung: Positionen ===== */
.pos{border:1px solid var(--linie);border-radius:10px;padding:10px;margin-bottom:8px;display:grid;gap:8px;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"l l" "k k" "m p" "b s"}
.pos.mitbasis{grid-template-areas:"l l" "k k" "m p" "ba ba" "b s"}
.pos .p-l{grid-area:l} .pos .p-k{grid-area:k} .pos .p-m{grid-area:m} .pos .p-p{grid-area:p} .pos .p-ba{grid-area:ba}
.pos .p-b{grid-area:b;align-self:center;font-weight:700} .pos .p-s{grid-area:s;justify-self:end;align-self:center}
@media (min-width:640px){
  .pos{grid-template-columns:minmax(0,3fr) minmax(0,1.6fr) 70px 100px minmax(90px,auto) 36px;grid-template-areas:"l k m p b s";align-items:end}
  .pos.mitbasis{grid-template-columns:minmax(0,3fr) minmax(0,1.5fr) 64px 92px 96px minmax(90px,auto) 36px;grid-template-areas:"l k m p ba b s"}
  .pos .p-b{text-align:right;padding-bottom:9px}
}
.summenblock{display:grid;grid-template-columns:auto auto;justify-content:end;gap:2px 18px;margin-top:10px;font-size:15px}
.summenblock .gesamt{font-weight:800;font-size:18px;color:var(--navy)}
.ansicht-info{margin-bottom:10px;justify-content:space-between}

/* ===== Dialog (unten als Blatt am Handy, mittig am großen Bildschirm) ===== */
#dialog{position:fixed;inset:0;z-index:50;display:none;background:rgba(20,24,35,.45)}
#dialog.offen{display:block}
.dlg{position:absolute;left:0;right:0;bottom:var(--kb);max-height:calc(100dvh - var(--kb) - 24px);background:var(--grund);border-radius:16px 16px 0 0;display:flex;flex-direction:column}
.dlg-kopf{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px 8px}
.dlg-kopf h2{margin:0;min-width:0;overflow-wrap:anywhere}
.dlg-inhalt{overflow-y:auto;overflow-x:hidden;padding:4px 16px 12px;min-height:0}
.dlg-fuss{display:flex;gap:8px;flex-wrap:wrap;padding:10px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--linie);background:var(--flaeche)}
@media (min-width:760px){
  .dlg{left:50%;right:auto;top:50%;bottom:auto;transform:translate(-50%,-50%);width:min(820px,calc(100vw - 32px));max-height:calc(100dvh - 48px);border-radius:16px}
  .dlg.schmal{width:min(520px,calc(100vw - 32px))}
}

/* ===== Kunden ===== */
.such-leiste{margin-bottom:12px}
.such-leiste .eingabe{flex:1 1 200px}
.kontakt-leiste{margin-bottom:12px}
.umsatz-zeile{margin-top:16px;justify-content:space-between;align-items:baseline}
.umsatz-zeile h3{margin:0}
.umsatz-wert{font-size:17px;color:var(--navy)}

/* ===== Rechnungsbeleg – EIN Layout für Vorschau, Ansicht und Druck/PDF ===== */
.beleg-wrap{container-type:inline-size;width:100%;max-width:720px;margin:0 auto}
.beleg{position:relative;background:#fff;color:#111;min-height:141cqw;padding:10cqw 9cqw 7cqw;display:flex;flex-direction:column;font-size:1.75cqw;line-height:1.45;box-shadow:0 1px 6px rgba(0,0,0,.12);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.beleg .b-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:4cqw}
.beleg .b-logo{width:36cqw;height:auto}
.beleg .b-abs{font-size:1.6cqw;text-align:right}
.beleg .b-abs a{color:#2c5d7c}
.beleg .b-datum{text-align:right;margin-top:1.5cqw}
.beleg .b-empf{margin-top:7cqw;min-height:9cqw}
.beleg .b-titel{display:flex;justify-content:space-between;margin-top:7cqw;font-size:2.3cqw;font-weight:600}
.beleg table{width:100%;border-collapse:collapse;margin-top:3cqw}
.beleg td,.beleg th{padding:.8cqw 0;vertical-align:top;text-align:left}
.beleg th{font-weight:600;border-bottom:.15cqw solid #999;font-size:1.55cqw}
.beleg .r{text-align:right;white-space:nowrap;padding-left:2cqw}
.beleg .detail{color:#555;font-size:1.5cqw}
.beleg .b-bem{margin-top:3cqw;white-space:pre-wrap}
.beleg .b-summe{margin-left:auto;margin-top:4cqw;min-width:34cqw}
.beleg .b-summe div{display:flex;justify-content:space-between;gap:4cqw;padding:.4cqw 0}
.beleg .b-summe .g{border-top:.15cqw solid #333;font-weight:700;padding-top:1cqw}
.beleg .b-ersetzt{color:#555;margin-top:.5cqw}
.beleg .b-storno{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%) rotate(-16deg);border:.6cqw solid var(--kritisch);color:var(--kritisch);border-radius:2cqw;padding:1.5cqw 5cqw;font-size:8cqw;font-weight:800;letter-spacing:.5cqw;opacity:.8;text-align:center;line-height:1.1;pointer-events:none}
.beleg .b-storno small{display:block;font-size:2.2cqw;letter-spacing:0;font-weight:700}
.beleg .b-vermerk{margin-top:3cqw;text-align:right;font-weight:700}
.beleg .b-fuss{margin-top:auto;padding-top:6cqw;font-size:1.6cqw}
.beleg .vorschau-stempel{color:var(--rose)}

/* ===== Listen-Bericht (PDF über Drucken) ===== */
.bericht{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#111;font-size:10pt}
.bericht .k{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:1px solid #999;padding-bottom:4mm;margin-bottom:5mm}
.bericht .k img{height:16mm}
.bericht h1{font-size:15pt;margin:0}
.bericht h2{font-size:12pt;margin:6mm 0 2mm}
.bericht table{width:100%;border-collapse:collapse}
.bericht td,.bericht th{padding:1.3mm 2mm;border-bottom:.2mm solid #ddd;text-align:left}
.bericht th{border-bottom:.4mm solid #666}
.bericht .r{text-align:right;white-space:nowrap}
.bericht .oben{font-weight:700;margin:0 0 3mm}

#druck{display:none}
@media print{
  @page{size:A4;margin:0}                       /* Rechnung: Ränder macht das Beleg-Layout selbst */
  @page bericht{size:A4;margin:14mm 15mm}       /* Listen: Rand auf JEDER Seite */
  #druck .bericht{page:bericht}
  html,body{height:auto!important;overflow:visible!important;background:#fff}
  .app,#dialog,#toast,#tip{display:none!important}
  #druck{display:block}
  #druck .beleg-wrap{width:210mm;max-width:none}
  #druck .beleg{box-shadow:none}
}

/* ===== Einstellungen ===== */
.kat-zeile{margin-bottom:8px}
.kat-zeile .eingabe{flex:1 1 160px}

/* ===== Anmeldung ===== */
.anmeldung{height:100dvh;overflow-y:auto;display:flex;align-items:center;justify-content:center;padding:16px 16px calc(16px + var(--kb))}
.anmeldung .karte{width:min(400px,100%);margin:0;text-align:center}
.anmeldung img{width:min(260px,80%);height:auto;margin:6px auto 14px;display:block}
.anmeldung .feld{text-align:left;margin-bottom:12px}
.anmeldung .knopf{width:100%}