/* CRDigital Finance – Oberfläche im CRDigital-Look: Navy, Blau, Silber. Keine Abhängigkeiten. */
:root {
  --navy: #0b2545; --navy-2: #13315c; --blau: #1f6fb2; --blau-hell: #e8f1fa; --silber: #c0c6cf; --silber-hell: #eef0f3;
  --text: #1c2430; --text-2: #5b6573; --weiss: #fff; --gruen: #1e8a4c; --rot: #c0392b; --gelb: #d9a400; --bg: #f5f7fa;
  --radius: 10px; --schatten: 0 1px 2px rgba(11, 37, 69, .08), 0 4px 14px rgba(11, 37, 69, .06);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 15px/1.5 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--text); background: var(--bg); }
a { color: var(--blau); text-decoration: none; } a:hover { text-decoration: underline; }
h1 { font-size: 1.5rem; margin: 0 0 .25rem; color: var(--navy); } h2 { font-size: 1.15rem; margin: 1.5rem 0 .5rem; color: var(--navy); }
h3 { font-size: 1rem; margin: 1rem 0 .4rem; color: var(--navy-2); }
.untertitel { color: var(--text-2); margin: 0 0 1rem; }

/* Rahmen */
.app { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.seite { grid-template-columns: 1fr; }
.seitenleiste { background: var(--navy); color: var(--weiss); display: flex; flex-direction: column; padding: 1rem .75rem; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.marke { display: flex; align-items: center; gap: .6rem; padding: .25rem .5rem 1rem; }
.marke svg { width: 38px; height: 38px; flex: none; }
.marke b { display: block; font-size: 1.05rem; letter-spacing: .02em; } .marke small { color: var(--silber); font-size: .78rem; }
.nav a { display: flex; align-items: center; gap: .6rem; color: #dbe3ee; padding: .5rem .6rem; border-radius: 8px; font-size: .95rem; }
.nav a:hover { background: var(--navy-2); text-decoration: none; } .nav a.aktiv { background: var(--blau); color: #fff; }
.nav svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.seitenleiste .fuss { margin-top: auto; padding: .75rem .5rem 0; font-size: .78rem; color: var(--silber); }
.kopf { display: flex; align-items: center; gap: 1rem; padding: .7rem 1.5rem; background: var(--weiss); border-bottom: 1px solid var(--silber-hell); position: sticky; top: 0; z-index: 5; }
.kopf .mandant { font-weight: 600; color: var(--navy); }
.kopf form.suche { margin-left: auto; display: flex; gap: .4rem; }
.kopf input[type=search] { width: 260px; }
.kopf .benutzer { color: var(--text-2); font-size: .9rem; }
.inhalt { padding: 1.5rem; max-width: 1280px; }
.hamburger { display: none; }

/* Elemente */
.karte { background: var(--weiss); border-radius: var(--radius); box-shadow: var(--schatten); padding: 1.1rem 1.25rem; margin-bottom: 1rem; }
.raster { display: grid; gap: 1rem; } .raster-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .raster-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .raster-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.kennzahl { background: var(--weiss); border-radius: var(--radius); box-shadow: var(--schatten); padding: 1rem 1.1rem; border-left: 4px solid var(--blau); }
.kennzahl small { color: var(--text-2); display: block; } .kennzahl b { font-size: 1.4rem; color: var(--navy); }
.kennzahl.warn { border-left-color: var(--gelb); } .kennzahl.rot { border-left-color: var(--rot); } .kennzahl.gruen { border-left-color: var(--gruen); }
table { width: 100%; border-collapse: collapse; background: var(--weiss); }
.karte table { box-shadow: none; }
th, td { padding: .5rem .6rem; text-align: left; border-bottom: 1px solid var(--silber-hell); vertical-align: top; }
th { color: var(--text-2); font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; background: #fafbfc; }
td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr:hover td { background: #fbfcfe; }
.knopf { display: inline-flex; align-items: center; gap: .4rem; background: var(--blau); color: #fff; border: 0; border-radius: 8px; padding: .5rem .95rem; font: inherit; font-weight: 600; cursor: pointer; }
.knopf:hover { background: var(--navy-2); text-decoration: none; } .knopf.leicht { background: var(--blau-hell); color: var(--navy); } .knopf.leicht:hover { background: #d7e6f5; }
.knopf.rot { background: var(--rot); } .knopf.gruen { background: var(--gruen); } .knopf.klein { padding: .3rem .7rem; font-size: .85rem; font-weight: 500; }
.knopf:disabled { opacity: .5; cursor: not-allowed; }
input, select, textarea { font: inherit; padding: .5rem .6rem; border: 1px solid var(--silber); border-radius: 8px; background: #fff; width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--blau-hell); border-color: var(--blau); }
input[type=checkbox], input[type=radio] { width: auto; }
label { display: block; font-size: .85rem; color: var(--text-2); margin-bottom: .2rem; }
.feld { margin-bottom: .8rem; } .felder { display: grid; gap: .8rem 1rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.hinweis { padding: .7rem .9rem; border-radius: 8px; margin: .6rem 0; background: var(--blau-hell); color: var(--navy); }
.hinweis.ok { background: #e6f4ec; color: #145a32; } .hinweis.fehler { background: #fbe9e7; color: #7a1f14; } .hinweis.warn { background: #fff6d6; color: #6b5200; }
.marke-text { color: var(--silber); font-size: .8rem; }
.chip { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .78rem; background: var(--silber-hell); color: var(--navy); }
.chip.gruen { background: #e6f4ec; color: #145a32; } .chip.rot { background: #fbe9e7; color: #7a1f14; } .chip.gelb { background: #fff6d6; color: #6b5200; } .chip.blau { background: var(--blau-hell); }
.aufgabe { display: flex; align-items: center; gap: .8rem; padding: .6rem .3rem; border-bottom: 1px solid var(--silber-hell); }
.aufgabe .punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--blau); flex: none; } .aufgabe.dringlich .punkt { background: var(--rot); }
.aufgabe .text { flex: 1; } .aufgabe .zahl { font-weight: 600; color: var(--navy); }
.schritte { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 1rem; }
.schritte span { padding: .25rem .6rem; border-radius: 999px; background: var(--silber-hell); font-size: .82rem; }
.schritte span.fertig { background: #e6f4ec; color: #145a32; } .schritte span.aktiv { background: var(--blau); color: #fff; }
.pruefung li { padding: .5rem 0; border-bottom: 1px solid var(--silber-hell); list-style: none; }
.pruefung .ok::before { content: "✔ "; color: var(--gruen); } .pruefung .offen::before { content: "✖ "; color: var(--rot); }
.pruefung ul { margin: .3rem 0 0 1.2rem; color: var(--text-2); font-size: .9rem; }
.zweispaltig { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.rechts { text-align: right; } .klein { font-size: .85rem; color: var(--text-2); }
.gross { font-size: 1.6rem; font-weight: 700; color: var(--navy); }
.tabs a { display: inline-block; padding: .4rem .9rem; border-radius: 8px 8px 0 0; color: var(--text-2); } .tabs a.aktiv { background: var(--weiss); color: var(--navy); font-weight: 600; box-shadow: var(--schatten); }
.leer { padding: 2rem; text-align: center; color: var(--text-2); }
.posten-zeile { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr auto; gap: .5rem; align-items: end; margin-bottom: .5rem; }
.quittung { max-width: 420px; margin: 1rem auto; padding: 1.5rem; border: 1px solid var(--silber); border-radius: 8px; background: #fff; font-size: .95rem; }
.quittung h2 { margin-top: 0; }
.anmelden { max-width: 380px; margin: 8vh auto; }
.zaehl { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .5rem; }
.zaehl label { display: flex; flex-direction: column; } .zaehl input { text-align: right; }
.messages { list-style: none; padding: 0; margin: 0 0 1rem; }
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .seitenleiste { position: fixed; left: -260px; width: 250px; transition: left .2s; z-index: 10; } .seitenleiste.offen { left: 0; }
  .hamburger { display: inline-block; background: none; border: 0; font-size: 1.5rem; cursor: pointer; color: var(--navy); }
  .inhalt { padding: 1rem; } .kopf input[type=search] { width: 140px; } .zweispaltig { grid-template-columns: 1fr; }
  .posten-zeile { grid-template-columns: 1fr 1fr; }
}
@media print {
  .seitenleiste, .kopf, .knopf, .nicht-drucken { display: none !important; } .app { display: block; } .inhalt { padding: 0; } body { background: #fff; }
}

/* Einrichtungsassistent: Auswahl als Liste */
.wahl{display:flex;gap:.5rem;align-items:center;font-weight:400;margin:.3rem 0;cursor:pointer}
.wahl input{width:auto}

/* Live-Demo */
.demo-band{background:#fff4d6;color:#5a4300;border-bottom:1px solid #f0d78c;padding:.45rem 1rem;font-size:.9rem;text-align:center}
.demo-band a{color:#5a4300;font-weight:600}

/* Rechnungspositionen */
table.positionen input, table.positionen select, table.positionen textarea { width: 100%; padding: .35rem .4rem; font-size: .9rem; }
table.positionen textarea { resize: vertical; min-height: 2.1rem; }
table.positionen td { padding: .25rem .2rem; vertical-align: top; }

/* Rechnung bearbeiten: Formular volle Breite, mit Vorschau zweispaltig; Positionen als Karten */
.rechnung-layout { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
.rechnung-layout.mit-vorschau { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
@media (max-width: 1250px) { .rechnung-layout.mit-vorschau { grid-template-columns: minmax(0, 1fr); } }
#positionen { display: flex; flex-direction: column; gap: .55rem; }
.pos-zeile { display: grid; gap: .45rem .6rem; padding: .7rem .8rem; border: 1px solid #dde2e8; border-radius: 10px; background: #f8fafc;
  grid-template-columns: 8rem 6rem 9rem 6rem 11rem minmax(7rem, 1fr) 2rem;
  grid-template-areas: "art text text text text text weg" "menge einheit preis rabatt steuer summe ."; }
.pos-zeile label { font-size: .72rem; color: #6b7685; margin: 0 0 .15rem; text-transform: none; letter-spacing: 0; }
.pos-zeile input, .pos-zeile select, .pos-zeile textarea { width: 100%; padding: .4rem .5rem; font-size: .92rem; background: #fff; }
.pos-zeile textarea { resize: vertical; min-height: 2.3rem; line-height: 1.35; }
.pos-zeile input.zahl { text-align: right; }
.pz-art { grid-area: art; } .pz-text { grid-area: text; } .pz-menge { grid-area: menge; } .pz-einheit { grid-area: einheit; }
.pz-preis { grid-area: preis; } .pz-rabatt { grid-area: rabatt; } .pz-steuer { grid-area: steuer; }
.pz-summe { grid-area: summe; text-align: right; } .pz-summe b { display: block; padding: .45rem 0; font-size: 1rem; color: var(--navy, #0b2545); }
.pz-weg { grid-area: weg; align-self: start; border: 0; background: none; color: #9aa4b2; cursor: pointer; font-size: 1rem; padding: .2rem; border-radius: 6px; }
.pz-weg:hover { color: #c62828; background: #fdecec; }
.pos-fuss { display: flex; justify-content: space-between; align-items: center; margin-top: .6rem; padding: .5rem .8rem; border-top: 2px solid #0b2545; }
.pos-fuss span { font-size: .95rem; } .pos-fuss b { font-size: 1.1rem; margin-left: .6rem; color: #0b2545; }
@media (max-width: 760px) {
  .pos-zeile { grid-template-columns: 1fr 1fr 2rem; grid-template-areas: "art art weg" "text text text" "menge einheit einheit" "preis rabatt rabatt" "steuer summe summe"; }
}
.rechnung-layout.mit-vorschau .pos-zeile { grid-template-columns: repeat(3, minmax(0, 1fr)) 2rem;
  grid-template-areas: "art text text weg" "menge einheit preis ." "rabatt steuer summe ."; }
/* Dokumentvorschau: A4 in echter Breite, eingepasst und zoombar */
.karte.vorschau { padding: 0; overflow: hidden; align-self: start; position: sticky; top: 1rem; }
.vorschau-leiste { display: flex; justify-content: space-between; align-items: center; padding: .5rem .8rem; border-bottom: 1px solid #dde2e8; font-size: .85rem; color: #6b7685; }
.vorschau-leiste span:last-child { display: flex; gap: .3rem; }
.vorschau-rahmen { overflow: auto; background: #e9edf2; max-height: calc(100vh - 6rem); }
.vorschau-innen { position: relative; overflow: hidden; margin: 0 auto; }
.vorschau-rahmen iframe { position: absolute; top: 0; left: 0; width: 860px; height: 1200px; border: 0; transform-origin: 0 0; }
.pos-zeile.mit-konto { grid-template-columns: 8rem 6rem 9rem 6rem 10rem 7rem minmax(7rem, 1fr) 2rem;
  grid-template-areas: "art text text text text text text weg" "menge einheit preis rabatt steuer konto summe ."; }
.pz-konto { grid-area: konto; }
@media (max-width: 1100px) { .pos-zeile.mit-konto { grid-template-columns: repeat(4, minmax(0, 1fr)) 2rem;
  grid-template-areas: "art text text text weg" "menge einheit preis rabatt ." "steuer konto summe summe ."; } }
@media (max-width: 760px) { .pos-zeile.mit-konto { grid-template-columns: 1fr 1fr 2rem;
  grid-template-areas: "art art weg" "text text text" "menge einheit einheit" "preis rabatt rabatt" "steuer konto konto" "summe summe summe"; } }
.pz-warnung { grid-column: 1 / -1; font-size: .82rem; padding: .3rem .55rem; border-radius: 6px; background: #fff4e0; color: #8a5a00; }
.pz-warnung.rot { background: #fdecec; color: #b42318; font-weight: 600; }
/* Rechnung fotografieren */
.foto-knoepfe { display: flex; gap: .5rem; flex-wrap: wrap; }
.foto-knoepfe .knopf { flex: 1 1 12rem; justify-content: center; cursor: pointer; padding: .8rem 1rem; }
.foto-liste { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; }
.foto-seite { position: relative; width: 84px; height: 112px; border: 1px solid #dde2e8; border-radius: 8px; overflow: hidden; background: #f5f7fa; }
.foto-seite img { width: 100%; height: 100%; object-fit: cover; }
.foto-seite .foto-pdf { display: flex; align-items: center; justify-content: center; height: 100%; font-weight: 700; color: #b42318; }
.foto-seite button { position: absolute; top: 2px; right: 2px; border: 0; border-radius: 50%; width: 22px; height: 22px; background: rgba(0,0,0,.55); color: #fff; font-size: .7rem; cursor: pointer; }
.foto-seite span { position: absolute; bottom: 0; left: 0; right: 0; font-size: .65rem; text-align: center; background: rgba(255,255,255,.85); }
/* Vertrieb */
.themenwahl { display: flex; flex-wrap: wrap; gap: .3rem .8rem; } .themenwahl label { font-size: .88rem; display: flex; gap: .3rem; align-items: center; margin: 0; }
.verlauf { border-left: 3px solid #1f6fb2; padding: .4rem .7rem; margin-bottom: .6rem; background: #f8fafc; border-radius: 0 6px 6px 0; }