:root { --rot:#E40000; --rot-dunkel:#B30000; --schwarz:#111; --grau:#6b6b6b; --linie:#e5e5e5; --hell:#f5f5f5;
  --flaeche:#fafafa; --gruen:#1f8a3b; --gelb:#d49a00; --ampelrot:#c62828; --nav:220px; }
* { box-sizing:border-box; }
body { margin:0; font-family:Outfit, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; color:var(--schwarz); background:var(--flaeche); font-size:15px; }
a { color:var(--rot); text-decoration:none; } a:hover { text-decoration:underline; }

/* Navigation links */
aside.seite { position:fixed; inset:0 auto 0 0; width:var(--nav); background:var(--schwarz); color:#fff; overflow-y:auto; padding:18px 0; }
.logo { display:block; padding:0 20px 18px; color:#fff; border-bottom:1px solid #2a2a2a; margin-bottom:10px; }
.logo:hover { text-decoration:none; } .logo b { color:var(--rot); display:block; letter-spacing:1px; font-size:18px; } .logo span { font-size:14px; color:#ddd; }
.nav-titel { font-size:11px; text-transform:uppercase; letter-spacing:.8px; color:#888; padding:16px 20px 6px; }
nav a { display:flex; align-items:center; justify-content:space-between; color:#ddd; padding:9px 20px; border-left:3px solid transparent; }
nav a:hover { background:#1d1d1d; color:#fff; text-decoration:none; }
nav a.aktiv { background:#1d1d1d; color:#fff; border-left-color:var(--rot); font-weight:500; }
nav b { background:var(--rot); color:#fff; border-radius:9px; padding:0 7px; font-size:12px; font-weight:500; } nav b:empty { display:none; }
main { margin-left:var(--nav); padding:26px 32px 80px; min-height:100vh; }

h1 { font-size:26px; margin:0 0 18px; } h2 { font-size:17px; margin:0 0 12px; } h3 { font-size:14px; margin:14px 0 8px; }
.kopf { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px; } .kopf h1 { margin:0; } .kopf .rechts { margin-left:auto; }
.leiste { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:14px; } .leiste .rechts { margin-left:auto; }
input, select, textarea { font:inherit; padding:8px 10px; border:1px solid #cfcfcf; border-radius:6px; background:#fff; color:inherit; }
input:focus, select:focus, textarea:focus { outline:2px solid var(--rot); outline-offset:-1px; border-color:var(--rot); }
textarea { width:100%; min-height:90px; resize:vertical; }
button, .btn { font:inherit; font-weight:500; padding:8px 14px; border-radius:6px; border:1px solid var(--schwarz); background:#fff; color:var(--schwarz); cursor:pointer; display:inline-block; white-space:nowrap; }
button:hover, .btn:hover { background:var(--hell); text-decoration:none; }
button.primaer, .btn.primaer { background:var(--rot); border-color:var(--rot); color:#fff; } button.primaer:hover, .btn.primaer:hover { background:var(--rot-dunkel); }
button.klein, .btn.klein { padding:4px 9px; font-size:13px; } button.link { border:none; background:none; color:var(--rot); padding:0; font-weight:400; }
button.leise { border-color:#d5d5d5; color:#555; }
button:disabled { opacity:.5; cursor:default; }

table { width:100%; border-collapse:collapse; background:#fff; } th, td { text-align:left; padding:9px 10px; border-bottom:1px solid var(--linie); vertical-align:middle; }
th { font-size:11.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--grau); font-weight:500; background:#fff; position:sticky; top:0; }
tr.klick { cursor:pointer; } tr.klick:hover td { background:#fff6f6; }
td.zahl, th.zahl { text-align:right; white-space:nowrap; }
.tabelle { background:#fff; border:1px solid var(--linie); border-radius:10px; overflow:auto; }
.tabelle tr:last-child td { border-bottom:none; }
.klein-text { color:var(--grau); font-size:13px; }

.raster { display:grid; gap:18px; align-items:start; } .raster.zwei { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.raster.material { grid-template-columns:300px minmax(0, 1fr); }
@media (max-width:1100px) { .raster.zwei, .raster.material { grid-template-columns:1fr; } }
.karte { background:#fff; border:1px solid var(--linie); border-radius:10px; padding:18px; }
.karte > h2 { display:flex; align-items:center; gap:8px; } .karte > h2 .rechts { margin-left:auto; }
.kacheln { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:14px; margin-bottom:22px; }
.kachel { background:#fff; border:1px solid var(--linie); border-radius:10px; padding:16px; color:inherit; }
.kachel:hover { border-color:var(--schwarz); text-decoration:none; }
.kachel .zahl { font-size:30px; font-weight:700; } .kachel.warn .zahl { color:var(--rot); }

.formular { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px 16px; }
.formular.drei { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.formular label { display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--grau); }
.formular label.breit, .formular .breit { grid-column:1 / -1; }
.formular input, .formular select, .formular textarea { color:var(--schwarz); width:100%; }
@media (max-width:700px) { .formular, .formular.drei { grid-template-columns:1fr; } }
.zaehler { font-size:12px; color:var(--grau); text-align:right; } .zaehler.voll { color:var(--rot); font-weight:700; }

.ampel { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; font-size:13px; }
.ampel::before { content:""; width:10px; height:10px; border-radius:50%; background:#bbb; }
.ampel.gruen::before { background:var(--gruen); } .ampel.gelb::before { background:var(--gelb); } .ampel.rot::before { background:var(--ampelrot); }
.marke { display:inline-block; font-size:11px; font-weight:500; padding:2px 8px; border-radius:10px; background:var(--hell); border:1px solid var(--linie); white-space:nowrap; }
.marke.rot { background:var(--rot); border-color:var(--rot); color:#fff; } .marke.schwarz { background:var(--schwarz); color:#fff; border-color:var(--schwarz); }
.bild-mini { width:44px; height:44px; object-fit:contain; border:1px solid var(--linie); border-radius:6px; background:#fff; display:block; }
.sbild .bild-mini { object-fit:cover; border:none; } /* Schlüsselfotos quadratisch zugeschnitten */
.platz { width:44px; height:44px; border:1px dashed #ccc; border-radius:6px; }

/* Drag & Drop */
.ablage { border:2px dashed #cfcfcf; border-radius:10px; padding:16px; text-align:center; color:var(--grau); font-size:13px; cursor:pointer; background:#fff; transition:all .15s; position:relative; }
.ablage:hover { border-color:#999; } .ablage.drueber { border-color:var(--rot); background:#fff4f4; color:var(--rot); }
.ablage.bild { min-height:220px; display:flex; align-items:center; justify-content:center; padding:10px; }
.ablage.bild img { max-width:100%; max-height:260px; object-fit:contain; display:block; }
.ablage .symbol { font-size:26px; display:block; margin-bottom:4px; }
.ablage.lädt::after { content:"wird hochgeladen …"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.85); color:var(--schwarz); border-radius:8px; }
.datei-zeile { display:flex; align-items:center; gap:8px; background:var(--hell); border-radius:8px; padding:8px 10px; font-size:13px; }
.datei-zeile a { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Angebotskarten */
.angebote { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:14px; }
.angebot { background:#fff; border:1px solid var(--linie); border-radius:10px; padding:16px; display:flex; flex-direction:column; gap:10px; }
.angebot.gilt { border-color:var(--rot); box-shadow:0 0 0 1px var(--rot) inset; }
.angebot .preis { font-size:24px; font-weight:700; } .angebot .zeile { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.angebot .zeile .rechts { margin-left:auto; } .angebot hr { border:none; border-top:1px solid var(--linie); margin:2px 0; width:100%; }
.angebot textarea { min-height:54px; font-size:13px; }
.sterne { display:inline-flex; } .sterne button { border:none; background:none; font-size:22px; padding:0 1px; color:#d0d0d0; line-height:1; }
.sterne button.an { color:var(--rot); } .sterne button:hover { background:none; }
.stern-anzeige { color:var(--rot); letter-spacing:1px; } .stern-anzeige i { color:#d0d0d0; font-style:normal; }

.hinweis { background:#fff4f4; border-left:4px solid var(--rot); padding:10px 14px; border-radius:4px; margin:0 0 14px; }
.ok-box { background:#f1f8f3; border-left:4px solid var(--gruen); padding:10px 14px; border-radius:4px; margin:0 0 14px; }
.leer { color:var(--grau); padding:30px 0; text-align:center; }
pre.bestelltext { white-space:pre-wrap; background:#fff; border:1px solid var(--linie); padding:16px; border-radius:10px; font-family:inherit; margin:0; }
#toast { position:fixed; bottom:20px; left:calc(50% + var(--nav) / 2); transform:translateX(-50%); background:var(--schwarz); color:#fff; padding:10px 18px; border-radius:8px; opacity:0; transition:opacity .2s; pointer-events:none; z-index:50; }
#toast.zeigen { opacity:1; } #toast.fehler { background:var(--rot); }
dialog { border:none; border-radius:12px; padding:22px; width:min(860px, 94vw); box-shadow:0 10px 40px rgba(0,0,0,.25); }
dialog::backdrop { background:rgba(0,0,0,.4); }
.seiten { display:flex; gap:8px; align-items:center; margin-top:12px; }

@media (max-width:760px) {
  aside.seite { position:static; width:auto; } main { margin-left:0; padding:18px 14px; }
  nav { display:flex; flex-wrap:wrap; } .nav-titel { display:none; } nav a { padding:8px 12px; }
  table { display:block; overflow-x:auto; white-space:nowrap; } #toast { left:50%; }
}
@media print { aside.seite, .leiste, button, .nicht-drucken { display:none !important; } main { margin:0; padding:0; } body { background:#fff; } }
input[type=range] { accent-color:var(--rot); }

/* Eigene Auswahlfelder statt der macOS-Standardfelder */
.auswahl { position:relative; display:inline-block; min-width:160px; vertical-align:middle; }
.formular .auswahl, .auswahl.vorschlag { display:block; width:100%; }
.auswahl > select { position:absolute; inset:0; opacity:0; pointer-events:none; width:100%; }
.auswahl-knopf { width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; text-align:left;
  font-weight:400; border:1px solid #cfcfcf; border-radius:6px; padding:8px 10px; background:#fff; color:var(--schwarz); }
.auswahl-knopf span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.auswahl-knopf svg { flex:none; color:var(--grau); }
.auswahl-knopf:hover { background:#fff; border-color:#999; }
.auswahl-knopf:focus { outline:2px solid var(--rot); outline-offset:-1px; border-color:var(--rot); }
.auswahl-knopf.leer span { color:var(--grau); } .auswahl-knopf.ungueltig { border-color:var(--rot); }
.auswahl-liste { position:fixed; max-width:460px; z-index:60; background:#fff;
  border:1px solid var(--linie); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.14); padding:4px; }
.auswahl-suche { width:100%; margin-bottom:4px; }
.auswahl-eintraege { max-height:280px; overflow-y:auto; }
.auswahl-eintrag { display:flex; justify-content:space-between; gap:14px; padding:7px 10px; border-radius:5px; cursor:pointer; white-space:nowrap; }
.auswahl-eintrag.aktiv { background:#fff0f0; } .auswahl-eintrag.gewaehlt { font-weight:500; color:var(--rot); }
.auswahl-eintrag .klein-text { font-weight:400; }
.auswahl-leer { padding:8px 10px; color:var(--grau); font-size:13px; }
input[type=checkbox] { accent-color:var(--rot); width:16px; height:16px; vertical-align:middle; cursor:pointer; }
.haken { display:flex; align-items:center; gap:8px; margin-top:10px; font-size:13px; cursor:pointer; }

/* Dialoge */
dialog.klein { width:min(520px, 94vw); } dialog.breit { width:min(1100px, 96vw); }
.frage-zeile { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:15px; }
table.sammel td { vertical-align:middle; } table.sammel input { padding:6px 8px; }

/* Mehrfachauswahl */
.aktionsleiste { display:none; position:sticky; top:0; z-index:20; align-items:center; gap:10px; flex-wrap:wrap;
  background:var(--schwarz); color:#fff; padding:10px 14px; border-radius:10px; margin-bottom:12px; }
.aktionsleiste.sichtbar { display:flex; } .aktionsleiste button.link { color:#fff; text-decoration:underline; }
.aktionsleiste button:not(.primaer):not(.link) { background:#fff; }
tr.markiert td { background:#fff4f4; }

/* Fortschrittsbalken beim Import */
.fortschritt { background:var(--hell); border-radius:8px; padding:12px 14px; }
.fortschritt-text { display:flex; justify-content:space-between; gap:12px; font-size:13px; margin-bottom:8px; }
.fortschritt-spur { height:10px; background:#e2e2e2; border-radius:5px; overflow:hidden; }
.fortschritt-balken { height:100%; background:var(--rot); border-radius:5px; transition:width .3s; }
.fortschritt-balken.unbestimmt { background:linear-gradient(90deg, var(--rot) 0 30%, #f3b0b0 30% 60%, var(--rot) 60%); background-size:200% 100%; animation:laufen 1.2s linear infinite; }
@keyframes laufen { from { background-position:100% 0; } to { background-position:-100% 0; } }

/* V1.7: Bild am Händlerartikel, Import-Protokoll */
.angebot-kopf { display:grid; grid-template-columns:1fr 84px; gap:10px; align-items:start; }
.angebot-kopf > div:first-child { display:flex; flex-direction:column; gap:8px; min-width:0; }
.ha-bild-feld { display:flex; flex-direction:column; gap:2px; }
.ablage.ha-bild { width:84px; height:84px; padding:0; display:flex; align-items:center; justify-content:center; font-size:11px; line-height:1.3; border-width:1px; overflow:hidden; }
.ablage.ha-bild img { width:100%; height:100%; object-fit:contain; display:block; }
.ablage.ha-bild.lädt::after { content:"…"; }
.mit-bild { display:flex; gap:10px; align-items:center; }
.klick-bild { cursor:zoom-in; flex:none; }
.rechnung { width:100%; background:transparent; }
.rechnung td { padding:3px 6px; border:none; font-size:13px; }
.rechnung tr.summe td { border-top:1px solid #999; font-weight:700; }
.bericht { margin-top:8px; }
tr.imp-details > td { background:#fafafa; padding:12px 14px; }
tr.klick.offen td { background:#fff4f4; }

/* V1.8: Menü, Rückgängig */
.menue-zelle { text-align:right; width:44px; }
.menue-knopf { font-size:18px; line-height:1; padding:4px 10px; }
.dialog-info { font-size:14px; } .dialog-info ul { padding-left:18px; margin:6px 0; } .dialog-info p { margin:6px 0; }
tr.zurueckgenommen td { color:var(--grau); text-decoration:line-through; } tr.zurueckgenommen td .marke, tr.zurueckgenommen td .klein-text { text-decoration:none; }
.link-knoepfe .btn { white-space:nowrap; } .kopf .link-knoepfe { margin-left:12px; } td .link-knoepfe { gap:6px; flex-wrap:nowrap; }
/* Bildbibliothek */
.bib-neu { padding:18px; text-align:center; }
.bib-raster { display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:10px; max-height:52vh; overflow:auto; padding:2px; }
.bib-kachel { display:flex; flex-direction:column; gap:4px; align-items:stretch; padding:8px; background:#fff; border:1px solid var(--linie); border-radius:8px; cursor:pointer; text-align:left; font:inherit; }
.bib-kachel:hover, .bib-kachel:focus { border-color:var(--rot, #D01414); outline:none; }
.bib-kachel img { width:100%; aspect-ratio:1; object-fit:contain; background:#fff; border-radius:4px; }
.bib-pdf { font-size:42px; text-align:center; padding:18px 0; }
.bib-text { font-size:12px; line-height:1.3; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
tr.klick-ha { cursor:pointer; } tr.klick-ha:hover td { background:#fafafa; }
table.daten th { text-align:left; font-weight:600; vertical-align:top; color:#555; font-size:13px; text-transform:none; letter-spacing:0; }
[data-ziehbild] { cursor:grab; }
.haken-zelle { cursor:pointer; }
.datei-raster { display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:12px; }
.datei-karte { position:relative; display:flex; flex-direction:column; gap:6px; padding:10px; background:#fff; border:1px solid var(--linie); border-radius:10px; }
.datei-karte.markiert { border-color:var(--rot); box-shadow:0 0 0 2px rgba(228,0,0,.15); }
.datei-karte img { width:100%; aspect-ratio:1; object-fit:contain; cursor:zoom-in; }
.datei-karte .bib-pdf { display:block; text-align:center; text-decoration:none; }
.datei-haken { position:absolute; top:6px; left:6px; background:#fff; border-radius:4px; padding:2px 4px; cursor:pointer; }
.datei-karte button { align-self:flex-start; }
/* Anmeldung */
body.abgemeldet aside.seite { display:none; } body.abgemeldet main { margin-left:0; }
.anmeldung { min-height:80vh; display:flex; align-items:center; justify-content:center; }
.anmeldung .karte { width:min(420px, 94vw); padding:28px; }
.logo-gross { display:flex; flex-direction:column; margin-bottom:10px; } .logo-gross b { color:var(--rot); font-size:24px; letter-spacing:1px; } .logo-gross span { font-size:14px; }
.formular.einspaltig { grid-template-columns:1fr; }
#konto { margin-top:14px; } .konto-name { padding:6px 20px; color:#fff; font-weight:500; }
/* ---------- Seitenleiste wie plancraft: Icons, einklappbar, Konto unten ---------- */
:root { --nav:236px; --nav-zu:64px; }
aside.seite { display:flex; flex-direction:column; padding:12px 0 0; overflow:visible; transition:width .18s ease; z-index:30; }
main { transition:margin-left .18s ease; }
.seite-kopf { display:flex; align-items:center; gap:6px; padding:0 10px 12px 12px; border-bottom:1px solid #2a2a2a; margin-bottom:8px; }
.seite-kopf .logo { display:flex; align-items:center; gap:10px; padding:4px; border:none; margin:0; flex:1; min-width:0; }
.logo-zeichen { flex:0 0 32px; height:32px; border-radius:8px; background:var(--rot); color:#fff; font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; letter-spacing:.5px; }
.logo-text { display:flex; flex-direction:column; min-width:0; line-height:1.2; } .logo-text b { color:#fff !important; font-size:14px !important; letter-spacing:0 !important; white-space:nowrap; } .logo-text span { font-size:12px; color:#aaa; }
.einklappen { background:none; border:none; color:#aaa; padding:6px; border-radius:6px; cursor:pointer; display:flex; } .einklappen:hover { background:#222; color:#fff; }
#nav { flex:1; overflow-y:auto; padding:0 8px; }
#nav a { gap:12px; justify-content:flex-start; padding:9px 12px; border-left:none; border-radius:8px; margin-bottom:2px; white-space:nowrap; }
#nav a.aktiv { background:#262626; border-left:none; }
#nav a b { margin-left:auto; }
.ic { width:19px; height:19px; flex:0 0 19px; }
.nav-trenner { height:1px; background:#2a2a2a; margin:8px 4px; }
.seite-fuss { display:flex; align-items:center; gap:6px; padding:10px 12px; border-top:1px solid #2a2a2a; position:relative; }
.fuss-knopf { display:flex; padding:8px; border-radius:8px; color:#bbb; } .fuss-knopf:hover, .fuss-knopf.aktiv { background:#262626; color:#fff; text-decoration:none; }
#konto-platz { margin-left:auto; }
.avatar { width:34px; height:34px; border-radius:50%; background:var(--rot); color:#fff; font-weight:600; font-size:13px; display:flex; align-items:center; justify-content:center; border:2px solid #333; cursor:pointer; padding:0; }
.avatar:hover { border-color:#666; }
.konto-menue { position:absolute; bottom:58px; left:10px; width:220px; background:#fff; color:var(--schwarz); border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.35); padding:6px; z-index:50; }
.konto-menue .wer { padding:10px 10px 8px; border-bottom:1px solid var(--linie); margin-bottom:4px; } .konto-menue .wer b { display:block; } .konto-menue .wer span { font-size:12px; color:var(--grau); }
.konto-menue a { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:6px; color:var(--schwarz); } .konto-menue a:hover { background:var(--hell); text-decoration:none; }
/* eingeklappt */
body.nav-zu aside.seite { width:var(--nav-zu); } body.nav-zu main { margin-left:var(--nav-zu); }
body.nav-zu .logo-text, body.nav-zu .nav-text { display:none; }
body.nav-zu .seite-kopf { flex-direction:column; padding:0 8px 10px; } body.nav-zu .seite-kopf .logo { justify-content:center; }
body.nav-zu .einklappen svg { transform:scaleX(-1); }
body.nav-zu #nav a { justify-content:center; padding:10px 0; position:relative; }
body.nav-zu #nav a b { position:absolute; top:4px; right:8px; padding:0; min-width:8px; height:8px; font-size:0; border-radius:50%; }
body.nav-zu .seite-fuss { flex-direction:column; padding:10px 0; } body.nav-zu #konto-platz { margin:0; }
body.nav-zu .konto-menue { left:8px; }
@media (max-width:760px) {
  aside.seite { flex-direction:column; } .einklappen { display:none; } #nav { display:flex; flex-wrap:wrap; } .nav-trenner { display:none; }
  body.nav-zu main { margin-left:0; } .konto-menue { bottom:auto; top:56px; }
}
/* Einstellungen: Menü links, Inhalt rechts */
.einst { display:flex; margin:-26px -32px -80px; min-height:100vh; }
.einst-menue { width:250px; flex:0 0 250px; background:#fff; border-right:1px solid var(--linie); padding:22px 12px; }
.einst-menue h1 { font-size:20px; padding:0 10px; margin-bottom:14px; }
.einst-titel { font-size:11px; text-transform:uppercase; letter-spacing:.8px; color:var(--grau); padding:14px 10px 6px; }
.einst-menue a { display:block; padding:8px 10px; border-radius:8px; color:var(--schwarz); } .einst-menue a:hover { background:var(--hell); text-decoration:none; }
.einst-menue a.aktiv { background:#efefef; font-weight:500; }
.einst-inhalt { flex:1; min-width:0; padding:26px 32px 80px; }
.kommission-knopf { max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bestell-leiste { margin:14px 0 0; } .bestell-leiste select { margin-left:6px; }
.marke.gruen { background:#e6f4ea; color:var(--gruen); }
@media (max-width:760px) { .einst { flex-direction:column; margin:-18px -14px; } .einst-menue { width:auto; flex:none; border-right:none; border-bottom:1px solid var(--linie); } .einst-inhalt { padding:18px 14px; } }
nav.einst-menue a { display:block; color:var(--schwarz); border-left:none; } nav.einst-menue a:hover { color:var(--schwarz); background:var(--hell); }
nav.einst-menue a.aktiv { background:#ececec; color:var(--schwarz); border-left:none; font-weight:600; }
.formular label .marke { align-self:flex-start; margin-bottom:2px; }

/* Schlüsselverwaltung */
.rot-text { color:var(--rot); font-weight:500; }
.kacheln.klein { grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); } .kacheln.klein .kachel { padding:12px 14px; } .kacheln.klein .zahl { font-size:24px; }
.nummer-feld { display:flex; align-items:center; border:1px solid #ccc; border-radius:8px; background:#fff; overflow:hidden; }
.nummer-feld span { padding:0 4px 0 12px; font-weight:700; color:var(--grau); } .nummer-feld input { border:none; flex:1; min-width:0; }
.nummer-feld input:focus { outline:none; } .nummer-feld:focus-within { outline:2px solid var(--rot); outline-offset:-1px; border-color:var(--rot); }
.nummer-feld.gross span, .nummer-feld.gross input { font-size:34px; font-weight:700; padding-top:8px; padding-bottom:8px; }
.k-gross { font-size:64px; font-weight:700; text-align:center; letter-spacing:2px; color:var(--rot); }
.schluessel-treffer { display:flex; gap:12px; align-items:center; width:100%; text-align:left; padding:12px; margin-bottom:8px; border-radius:10px; font-weight:400; }
.schluessel-treffer img, .ue-kopf img { width:56px; height:56px; object-fit:cover; border-radius:8px; flex:none; }
.ue-kopf { display:flex; gap:12px; align-items:center; margin-bottom:14px; } .ue-kopf h2 { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.art-knoepfe { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; } .art-knoepfe button { padding:10px 14px; }
.personen-knoepfe { display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:8px; margin-top:8px; max-height:38vh; overflow:auto; }
.personen-knoepfe button { padding:12px 10px; text-align:left; font-weight:500; display:flex; flex-direction:column; gap:2px; }
.personen-knoepfe button span { font-size:12px; font-weight:400; color:var(--grau); }
.personen-knoepfe button.gewaehlt { background:var(--rot); border-color:var(--rot); color:#fff; } .personen-knoepfe button.gewaehlt span { color:#fff; }
canvas.unterschrift { width:100%; height:180px; border:1px dashed #bbb; border-radius:8px; background:#fff; touch-action:none; display:block; cursor:crosshair; }
.unterschrift-mini { height:44px; max-width:160px; border:1px solid var(--linie); border-radius:6px; background:#fff; vertical-align:middle; margin-top:6px; cursor:zoom-in; }
.schluessel-foto { width:160px; height:160px; object-fit:cover; border-radius:8px; display:block; cursor:zoom-in; }
.schluessel-foto.leer { border:1px solid var(--linie); }
.schluessel-foto.leer { display:flex; align-items:center; justify-content:center; color:var(--grau); font-size:13px; border-style:dashed; cursor:default; }
.feld-knopf { flex:1; text-align:left; font-weight:400; min-height:38px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.verlauf { border-top:1px solid var(--linie); padding:10px 0; } .verlauf:first-of-type { border-top:none; } .verlauf.storniert > :not(.klein-text):not(.leiste) { text-decoration:line-through; color:var(--grau); }
.formular.einspaltig { grid-template-columns:1fr; }
/* Schlüssel-Übergabeprotokoll: am Bildschirm ein A4-Blatt, gedruckt randlos auf A4 */
body.nur-druck { background:#ececec; }
.pk-leiste { max-width:210mm; margin:0 auto 14px; display:flex; align-items:center; }
.protokoll { width:210mm; min-height:297mm; margin:0 auto; background:#fff; padding:18mm 18mm 14mm; box-shadow:0 2px 14px rgba(0,0,0,.12); display:flex; flex-direction:column; color:#111; box-sizing:border-box; }
.pk-kopf { display:flex; align-items:center; gap:14px; padding-bottom:12px; border-bottom:3px solid var(--rot); }
.pk-kopf img { width:46px; height:46px; object-fit:contain; } .pk-kopf b { display:block; font-size:20px; letter-spacing:.5px; } .pk-kopf span { color:#555; font-size:14px; }
.pk-nr { margin-left:auto; text-align:right; font-size:13px; color:#555; line-height:1.5; }
.pk-titel { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin:26px 0 22px; }
.pk-titel h1 { margin:4px 0 2px; font-size:30px; } .pk-titel p { margin:0; color:#444; font-size:16px; }
.pk-titel img { width:42mm; height:42mm; object-fit:cover; border-radius:6px; flex:none; }
.pk-art { display:inline-block; background:#111; color:#fff; font-size:12px; font-weight:600; letter-spacing:.6px; text-transform:uppercase; padding:4px 10px; border-radius:4px; }
.pk-storno { border:2px solid var(--rot); color:var(--rot); font-weight:600; padding:10px 12px; border-radius:6px; margin-bottom:16px; }
.protokoll.storniert .pk-felder, .protokoll.storniert .pk-titel h1 { text-decoration:line-through; text-decoration-color:var(--rot); }
.pk-felder { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid #d9d9d9; }
.pk-feld { padding:10px 12px 10px 0; border-bottom:1px solid #d9d9d9; } .pk-feld.breit { grid-column:1 / -1; }
.pk-feld span { display:block; font-size:11px; color:#666; text-transform:uppercase; letter-spacing:.5px; margin-bottom:3px; } .pk-feld b { font-weight:500; font-size:15px; }
.pk-text { margin:26px 0 0; font-size:14px; color:#333; }
.pk-unterschriften { display:grid; grid-template-columns:1fr 1fr; gap:16mm; margin-top:auto; padding-top:24mm; }
.pk-linie { height:26mm; border-bottom:1px solid #111; display:flex; align-items:flex-end; } .pk-linie img { max-height:25mm; max-width:100%; }
.pk-unterschriften span { display:block; font-size:13px; color:#444; padding-top:5px; }
.pk-fuss { margin-top:12mm; padding-top:8px; border-top:1px solid #d9d9d9; font-size:11px; color:#777; text-align:center; }
@page protokoll { size:A4; margin:0; } .protokoll { page:protokoll; }
.logo-rot { color:var(--rot); letter-spacing:1px; }
.protokoll-tabelle th { text-align:left; width:170px; color:var(--grau); font-weight:400; vertical-align:top; } .protokoll-tabelle td, .protokoll-tabelle th { padding:6px 8px 6px 0; border-bottom:1px solid var(--linie); }
.protokoll-unterschrift { margin-top:36px; width:320px; } .protokoll-unterschrift img { max-width:320px; max-height:120px; display:block; }
.protokoll-unterschrift div:last-child, .protokoll-unterschrift > div { border-top:1px solid var(--schwarz); padding-top:4px; font-size:13px; }
.protokoll-unterschrift img + div { margin-top:2px; }
@media print { body.nur-druck, body.nur-druck main, body.nur-druck #app { margin:0 !important; padding:0 !important; background:#fff !important; max-width:none !important; height:auto !important; overflow:visible !important; }
  body.nur-druck .protokoll { box-shadow:none; margin:0; width:210mm; height:297mm; min-height:0; overflow:hidden; page-break-after:avoid; }
  * { -webkit-print-color-adjust:exact; print-color-adjust:exact; } }
@media (max-width:760px) {
  dialog.handy-voll { width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; margin:0; border-radius:0; padding:16px; }
  .art-knoepfe button { flex:1 1 100%; } .kopf .rechts { margin-left:0; width:100%; } .kopf .rechts button { flex:1; }
}
.feld-gruppe { display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--grau); } .feld-gruppe input { color:var(--schwarz); width:100%; }
.personen-knoepfe button, .schluessel-treffer, .art-knoepfe button { white-space:normal; }
.lfd { color:var(--grau); font-weight:400; font-size:.8em; } .k-gross .lfd { font-size:.5em; }
.chips { display:inline-flex; border:1px solid var(--linie); border-radius:8px; overflow:hidden; background:#fff; }
.marke.gelb { background:#fff6db; border-color:#f0d27a; color:#7a5b00; }
.personalkarte h3 { margin:14px 0 0; font-size:14px; color:var(--grau); text-transform:uppercase; letter-spacing:.5px; border-bottom:1px solid var(--linie); padding-bottom:4px; }
a.schluessel-treffer { color:inherit; } a.schluessel-treffer:hover { text-decoration:none; }
tr.storniert td { text-decoration:line-through; color:var(--grau); }

/* Übergabe-Dialog */
.ue-label { margin:12px 0 4px; } .ue-form { display:flex; flex-direction:column; gap:10px; margin-top:4px; }
.ue-form label { display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--grau); } .ue-form input { color:var(--schwarz); width:100%; }
.ue-zeile { display:flex; gap:10px; } .ue-zeile > * { flex:1; min-width:0; }
.ue-fuss { display:flex; justify-content:space-between; align-items:center; margin-top:6px; } .ue-fuss .primaer { min-width:160px; padding:10px 16px; }
.ue-icon { width:56px; height:56px; border-radius:8px; border:1px solid var(--linie); display:flex; align-items:center; justify-content:center; flex:none; } .ue-icon .ic { width:26px; height:26px; }
.segment { display:flex; border:1px solid var(--schwarz); border-radius:8px; overflow:hidden; }
.segment button { flex:1; border:none; border-left:1px solid var(--linie); border-radius:0; padding:9px 6px; font-size:14px; background:#fff; white-space:normal; }
.segment button:first-child { border-left:none; } .segment button.an { background:var(--schwarz); color:#fff; }
.such-feld { position:relative; } .such-treffer { border:1px solid var(--linie); border-top:none; border-radius:0 0 8px 8px; overflow:hidden; } .such-treffer:empty { display:none; }
.such-treffer button { display:block; width:100%; text-align:left; border:none; border-top:1px solid var(--linie); border-radius:0; padding:10px 12px; font-weight:400; white-space:normal; }
.such-treffer button:first-child { border-top:none; background:#fff6f6; }
.gewaehlt-person { display:flex; align-items:center; gap:8px; padding:9px 12px; border:1px solid var(--schwarz); border-radius:8px; } .gewaehlt-person .link { margin-left:auto; }
.verlauf-aktionen { display:flex; gap:14px; align-items:center; margin-top:4px; font-size:13px; }
.unterschrift-gross { max-width:100%; max-height:140px; border:1px solid var(--linie); border-radius:8px; background:#fff; display:block; }
.gelb-text { color:#9a6b00; font-weight:500; }
/* Personalakte */
.zurueck-link { display:inline-block; margin-bottom:10px; }
.akte-kopfzeile { display:flex; align-items:center; gap:16px; background:#fff; border:1px solid var(--linie); border-radius:12px; padding:16px 18px; margin-bottom:16px; flex-wrap:wrap; }
.avatar-gross { width:60px; height:60px; border-radius:50%; background:var(--schwarz); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:20px; flex:none; }
.akte-name { flex:1; min-width:200px; } .akte-name h1 { margin:0 0 2px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.akte-raster { display:grid; grid-template-columns:minmax(240px, 1fr) minmax(0, 2.4fr); gap:16px; align-items:start; }
.akte-links { display:flex; flex-direction:column; gap:16px; }
.akte-kaesten { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; align-items:start; }
.akte-kasten { background:#fff; border:1px solid var(--linie); border-radius:12px; padding:14px 16px; } .akte-kasten.breit { grid-column:1 / -1; }
.akte-kasten.erledigen { border-color:var(--rot); background:#fff8f8; } .akte-kasten.erledigen div { margin:2px 0; }
.akte-kopf { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; } .akte-kopf h2 { margin:0; font-size:15px; }
.akte-werte { display:grid; grid-template-columns:auto 1fr; gap:6px 14px; margin:0; font-size:14px; } .akte-werte dt { color:var(--grau); } .akte-werte dd { margin:0; }
.leer-wert { color:#c4c4c4; }
.akte-schluessel { display:block; padding:8px 0; border-top:1px solid var(--linie); color:inherit; } .akte-schluessel:first-of-type { border-top:none; } .akte-schluessel:hover { text-decoration:none; background:#fafafa; }
@media (max-width:1100px) { .akte-raster { grid-template-columns:1fr; } }
@media (max-width:760px) { .akte-kaesten { grid-template-columns:1fr; } .ue-zeile { flex-direction:column; } }
.ue-form > .link { align-self:flex-start; }
@media (max-width:760px) { canvas.unterschrift { height:150px; } }

/* ---------- Clean wie plancraft (eigene Farben) ---------- */
body { background:#f3f3f3; }
h1 { font-size:22px; font-weight:600; } h2 { font-weight:600; }
button, .btn { border-color:#d9d9d9; } button:hover, .btn:hover { border-color:#bdbdbd; }
button.leise { border-color:#e2e2e2; }
.karte, .tabelle, .kachel, .akte-kasten, .akte-kopfzeile { border-color:#e6e6e6; border-radius:10px; }
.marke { border:none; border-radius:6px; padding:3px 9px; font-size:12px; background:#ececec; color:#3d3d3d; }
.marke.rot { background:#fde3e3; color:#a40f0f; } .marke.gruen { background:#dcf2e3; color:#1d6b36; }
.marke.gelb { background:#fbefc5; color:#7a5b00; border:none; } .marke.schwarz { background:#2a2a2a; color:#fff; }
.icon-knopf { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0; border:1px solid #d9d9d9; border-radius:8px; background:#fff; color:var(--schwarz); flex:none; }
.icon-knopf:hover { background:var(--hell); text-decoration:none; } .icon-knopf.klein { width:30px; height:30px; border-color:transparent; } .icon-knopf.klein:hover { border-color:#d9d9d9; }
td .icon-knopf { width:32px; height:32px; border-color:transparent; background:transparent; } td .icon-knopf:hover { border-color:#d9d9d9; background:#fff; }
.seitenkopf { display:flex; align-items:center; gap:14px; margin-bottom:18px; flex-wrap:wrap; }
.seitenkopf-titel { flex:1; min-width:200px; display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; } .seitenkopf-titel h1 { margin:0; } .seitenkopf-titel > .klein-text { flex-basis:100%; }
.seitenkopf-rechts { display:flex; align-items:center; gap:8px; margin-left:auto; }
.auswahl-eintrag.gefahr span:first-child { color:var(--rot); }
.menue-zelle { width:48px; }
.form-fuss { display:flex; justify-content:flex-end; gap:8px; margin-top:4px; }
.angaben { display:flex; gap:16px; align-items:flex-start; } .angaben .schluessel-foto { width:140px; height:140px; flex:none; }
.verlauf-liste { margin:0 -8px; }
.vz { display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; border-top:1px solid #efefef; } .vz:first-child { border-top:none; }
.vz-zeile { display:flex; align-items:center; gap:10px; width:100%; border:none; background:none; text-align:left; padding:10px 8px; font-weight:400; border-radius:6px; min-width:0; white-space:nowrap; }
.vz-zeile:hover { background:#f7f7f7; } .vz.offen .vz-zeile { background:#f7f7f7; }
.vz-art { font-weight:500; } .vz-wer { color:var(--grau); overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0; } .vz-datum { color:var(--grau); font-size:13px; }
.vz.storniert .vz-art, .vz.storniert .vz-wer { text-decoration:line-through; color:#aaa; }
.vz-details { grid-column:1 / -1; padding:2px 8px 12px; display:flex; flex-direction:column; gap:4px; }
.punkt-gelb { width:8px; height:8px; border-radius:50%; background:#e0b100; flex:none; }
.akte-kopfzeile > .icon-knopf { align-self:flex-start; }
@media (max-width:760px) { .angaben { flex-direction:column; } .seitenkopf-rechts { margin-left:0; width:100%; } .seitenkopf-rechts .primaer { flex:1; } }
.vz-details[hidden] { display:none; }
.akte-werte dd { overflow-wrap:anywhere; min-width:0; }

/* ---------- Einheitliches System (Tabellen, Filter, Seitenleiste) ---------- */
main { padding:24px 28px 60px; }
.kopf { margin-bottom:16px; min-height:40px; } .kopf h1 { font-size:22px; }
/* Tabellen: überall gleich – Kopf wie plancraft, gleiche Zeilenhöhe, Fußzeile mit Anzahl */
.tabelle { background:#fff; border:1px solid #e6e6e6; border-radius:10px; overflow:auto; }
.tabelle table { background:none; }
.tabelle th, .tabelle td { padding:12px 14px; border-bottom:1px solid #eeeeee; font-size:14px; }
.tabelle th { font-size:14px; font-weight:600; color:#2b2b2b; text-transform:none; letter-spacing:0; background:#fff; height:52px; white-space:nowrap; }
.tabelle td { height:64px; }
.tabelle tr:last-child td { border-bottom:1px solid #eeeeee; }
.tabelle tr.klick:hover td, .tabelle tr.klick-ha:hover td { background:#fafafa; cursor:pointer; }
.tabelle tr.markiert td { background:#fff1f1; }
.tabelle .haken-zelle { width:44px; padding-right:0; } .tabelle .bild-zelle { width:60px; padding-right:4px; } .tabelle .menue-zelle { width:52px; text-align:right; }
.tabelle-fuss { display:flex; align-items:center; gap:10px; padding:14px 16px; color:var(--grau); font-size:14px; background:#fff; }
.tabelle-fuss .rechts { margin-left:auto; display:flex; align-items:center; gap:8px; }
.auswahl-zeile th { background:#fff6f6; } .auswahl-zeile th:first-child { width:44px; }
.auswahl-aktionen { display:flex; align-items:center; gap:22px; font-weight:400; flex-wrap:wrap; }
.auswahl-aktionen > span { color:var(--grau); }
.auswahl-aktionen .aktion { border:none; background:none; padding:0; font-weight:600; color:var(--schwarz); display:inline-flex; gap:6px; align-items:center; }
.auswahl-aktionen .aktion:hover { color:var(--rot); background:none; } .auswahl-aktionen .aktion.gefahr { color:var(--rot); }
.aktionsleiste:empty { display:none; }
/* Filterleiste */
.filterleiste { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.suchfeld { position:relative; display:flex; align-items:center; flex:0 1 320px; min-width:220px; }
.suchfeld input { width:100%; padding-right:34px; height:40px; border-color:#d9d9d9; border-radius:8px; }
.suchfeld .ic { position:absolute; right:11px; color:var(--grau); pointer-events:none; }
.fbtn { display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 12px; border:1px solid #d9d9d9; border-radius:8px; background:#fff; font-weight:500; color:var(--schwarz); }
.fbtn:hover { background:#f6f6f6; } .fbtn.an { border-color:var(--schwarz); box-shadow:inset 0 0 0 1px var(--schwarz); }
.fbtn .ic { color:#555; }
.filter-rechts { margin-left:auto; display:flex; gap:8px; }
.filter-zurueck { color:var(--rot); } .filter-zurueck.still { color:#c5c5c5; }
.filter-standard.an { background:var(--rot); border-color:var(--rot); color:#fff; } .filter-standard.an:hover { background:var(--rot-dunkel); }
.filter-panel { position:fixed; z-index:60; background:#fff; border:1px solid #e3e3e3; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.12); width:280px; padding:6px; }
.fp-suche { display:flex; align-items:center; gap:8px; border:1px solid #d9d9d9; border-radius:8px; padding:0 10px; margin:2px 2px 6px; }
.fp-suche input { border:none; padding:8px 0; flex:1; outline:none; } .fp-suche input:focus { outline:none; }
.fp-liste { max-height:300px; overflow:auto; }
.fp-eintrag { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:6px; cursor:pointer; }
.fp-eintrag:hover { background:#f2f2f2; } .fp-eintrag.gewaehlt { font-weight:600; }
.fp-eintrag.gewaehlt:not(:has(.fp-box)) { background:#fff1f1; color:var(--rot); }
.fp-box { width:18px; height:18px; border:1.5px solid #bdbdbd; border-radius:4px; display:inline-flex; align-items:center; justify-content:center; flex:none; }
.fp-eintrag.gewaehlt .fp-box { background:var(--rot); border-color:var(--rot); color:#fff; }
.fp-leeren { display:block; width:100%; text-align:left; border:none; border-top:1px solid #eee; border-radius:0; margin-top:4px; padding:9px 10px; color:var(--rot); font-weight:500; background:none; }
.auswahl-eintrag.aktiv { background:#f2f2f2; } /* Markierung folgt der Maus (zeigeListe), daher kein eigenes :hover */
/* Seitenleiste mit Logo – eingeklappt nur der Knopf */
.logo-bild { width:34px; height:34px; object-fit:contain; background:#fff; border-radius:8px; padding:3px; flex:none; }
.logo-text b { font-size:16px !important; }
body.nav-zu .seite-kopf .logo { display:none; }
.logo-gross { align-items:center; gap:6px; } .logo-gross b { color:var(--schwarz); }
/* Angebotskarte schlank: Kopf mit ⋮, Bild + Preis nebeneinander */
.angebot-kopf { grid-template-columns:minmax(0, 1fr) auto; }
.angebot-mitte { display:flex; gap:14px; align-items:flex-start; }
.ablage.ha-bild.klein { width:72px; height:72px; flex:none; color:#bbb; }
.angebot textarea { min-height:40px; }
.tabelle-titel { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid #eeeeee; font-size:15px; } .tabelle-titel .rechts { margin-left:auto; }
[hidden] { display:none !important; } /* versteckte Hilfsknöpfe hinter ⋮ nie anzeigen (der Knopf-Stil würde display überschreiben) */
textarea { resize:none; overflow:hidden; min-height:42px; line-height:1.45; }
.akte-raster.einspaltig { grid-template-columns:1fr; } .akte-kasten.erledigen { margin-bottom:16px; }
@media (min-width:1300px) { .akte-raster.einspaltig .akte-kaesten { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
/* Listen-Seite: Seite scrollt nicht, die Tabelle ist eine Box mit fester Höhe */
@media (min-width:761px) {
  main.listen-seite { height:100vh; min-height:0; display:flex; flex-direction:column; overflow:hidden; padding-bottom:24px; }
  main.listen-seite > * { flex:none; }
  main.listen-seite > .tabelle { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
  main.listen-seite .tabelle-scroll { flex:1 1 auto; min-height:0; overflow:auto; }
  main.listen-seite .tabelle-fuss { flex:none; border-top:1px solid #eeeeee; }
  main.listen-seite .tabelle-scroll tr:last-child td { border-bottom:none; }
  main.listen-seite .tabelle th { position:sticky; top:0; z-index:2; }
}
/* Personalakte: Kästen einer Reihe gleich hoch */
.akte-kaesten { align-items:stretch; grid-auto-rows:auto; }
.akte-kaesten > .akte-kasten { display:flex; flex-direction:column; height:100%; }
.akte-kasten.lohnverlauf { margin-top:16px; } .lohn-tabelle th, .lohn-tabelle td { padding:10px 8px; border-bottom:1px solid #eeeeee; font-size:14px; }
.lohn-tabelle th { font-weight:600; color:#2b2b2b; text-transform:none; letter-spacing:0; } .lohn-tabelle tr:last-child td { border-bottom:none; }
.gruen-text { color:var(--gruen); font-weight:500; }
.akte-kasten.lohnverlauf { margin-top:16px; } .lohn-tabelle th, .lohn-tabelle td { padding:10px 8px; border-bottom:1px solid #eeeeee; font-size:14px; }
.lohn-tabelle th { font-weight:600; color:#2b2b2b; text-transform:none; letter-spacing:0; } .lohn-tabelle tr:last-child td { border-bottom:none; }
.gruen-text { color:var(--gruen); font-weight:500; }
.fp-punkt { width:16px; display:inline-flex; color:var(--rot); flex:none; }
/* Eigene Datumsauswahl */
.datumsfeld { position:relative; display:flex; align-items:center; width:100%; }
.datumsfeld input[type=text] { width:100%; padding-right:36px; }
.dp-knopf { position:absolute; right:4px; border:none; background:none; padding:6px; color:#666; display:flex; } .dp-knopf:hover { background:none; color:var(--rot); }
.kalender { position:fixed; z-index:70; background:#fff; border:1px solid #e3e3e3; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.14); padding:12px; width:288px; }
.kal-kopf { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; } .kal-kopf b { font-weight:600; }
.kal-kopf button { border:none; background:none; font-size:20px; line-height:1; padding:4px 10px; border-radius:6px; } .kal-kopf button:hover { background:#f2f2f2; }
.kal-raster { display:grid; grid-template-columns:repeat(7, 1fr); gap:2px; }
.kal-wt { text-align:center; font-size:12px; color:var(--grau); padding:4px 0; }
.kal-tag { border:none; background:none; padding:0; height:34px; border-radius:8px; font-weight:400; font-size:14px; }
.kal-tag:hover { background:#f2f2f2; } .kal-tag.fremd { color:#bbb; } .kal-tag.heute { box-shadow:inset 0 0 0 1px var(--schwarz); }
.kal-tag.gewaehlt { background:var(--rot); color:#fff; font-weight:600; } .kal-tag:disabled { color:#ddd; background:none; cursor:default; }
.kal-fuss { display:flex; gap:8px; justify-content:flex-end; align-items:center; margin-top:10px; border-top:1px solid #eee; padding-top:10px; }
.kal-fuss button { padding:6px 10px; font-size:13px; } .kal-zeit { width:70px; margin-right:auto; text-align:center; }
.nur-beta { display:none; } body.beta .nur-beta { display:block; }
.beta-bereich { margin-top:10px; border-top:1px solid #2a2a2a; padding-top:8px; }
.nav-titel-beta { padding:6px 20px 4px; font-size:11px; letter-spacing:.8px; text-transform:uppercase; color:#e0a800; }
body.nav-zu .nav-titel-beta { text-align:center; padding:6px 0; }
.akte-kaesten.drei { grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); }
.verweis { display:block; padding:9px 0; border-top:1px solid #f0f0f0; color:inherit; } .verweis:first-of-type { border-top:none; } .verweis:hover { text-decoration:none; color:var(--rot); }

/* Lieferanten-Angebote: links PDF, rechts erkannte Daten */
.ang-pruef { display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:16px; align-items:start; }
.ang-pdf { position:sticky; top:12px; padding:0; overflow:hidden; height:calc(100vh - 120px); min-height:420px; }
.ang-pdf iframe { width:100%; height:100%; border:0; display:block; }
.ang-kopf { margin-bottom:14px; }
.ang-pos td { vertical-align:top; } .ang-pos td.zahl { white-space:nowrap; } .ang-pos .ang-artikel { width:100%; min-width:200px; }
.ang-pos .ang-artikel .klein-text { margin-top:2px; } .ang-aktionen { white-space:nowrap; text-align:right; } .ang-aktionen .icon-knopf { display:inline-flex; }
.ang-pos tr.ang-std td { border-bottom:none; }
.ang-pos tr.ang-alt td { background:#fafafa; } .ang-pos tr.ang-alt td.ang-artikel { padding-left:22px; border-left:3px solid #e2e2e2; }
.ang-teurer { color:var(--rot); } .ang-billiger { color:var(--gruen); } .ang-projekt { color:var(--schwarz); font-weight:500; }
.ang-marke { margin-top:4px; }
@media (max-width:1100px) { .ang-pruef { grid-template-columns:1fr; } .ang-pdf { position:static; height:60vh; } }
.ang-pos tr.ang-anderes td:first-child { box-shadow:inset 3px 0 0 #f0a64a; }
#angdrop { position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; background:rgba(200,16,46,.08); border:3px dashed var(--rot); pointer-events:none; }
#angdrop.sichtbar { display:flex; } #angdrop div { background:#fff; padding:18px 28px; border-radius:12px; font-size:18px; font-weight:600; box-shadow:0 6px 24px rgba(0,0,0,.12); }
.ang-pos .ang-artnr { white-space:nowrap; color:#555; font-size:13px; } .ang-titel { font-weight:600; } .ang-titel .marke { font-weight:500; vertical-align:1px; }
.ang-langtext { color:var(--grau); font-size:12.5px; margin-top:2px; white-space:pre-line; }
.marke.lila { background:#efeafc; color:#4b3a8c; } .marke.orange { background:#fff1e0; color:#8a4b00; }
.ang-pos table { width:100%; } .ang-pos .ang-artikel { width:auto; min-width:150px; } .ang-pos td.ang-aktionen { width:1%; padding-left:4px; padding-right:6px; }
.ang-pos td.ang-aktionen .icon-knopf { width:28px; height:28px; } .ang-pos th, .ang-pos td { padding-left:8px; padding-right:8px; }
.bmail-kopf { display:flex; align-items:center; gap:8px; } .bmail-kopf h2 { margin:0; }
.bmail-felder { display:grid; grid-template-columns:auto 1fr; gap:4px 12px; margin:10px 0 12px; font-size:14px; } .bmail-felder dt { color:var(--grau); } .bmail-felder dd { margin:0; }
.ang-pos .ang-scroll { max-height:calc(100vh - 360px); min-height:240px; overflow:auto; }
.ang-pos .ang-scroll th { position:sticky; top:0; background:#fff; z-index:1; }
.ang-mat { display:block; margin-top:4px; font-size:12px; color:#1d6b36; text-decoration:none; white-space:normal; max-width:150px; } .ang-mat:hover { text-decoration:underline; }
.angebot-quelle { font-size:12px; font-weight:600; color:#555; margin:2px 0; } .angebot-quelle a { color:inherit; }
.angebot-text { margin-top:2px; }
@media (max-width:1100px) { .ang-pos .ang-scroll { max-height:none; } }
/* Prüfseite eines Angebots: Seite steht, nur die Positionen scrollen (Kopf mit Speichern und Fußzeile bleiben sichtbar) */
@media (min-width:1101px) {
  main.feste-seite { height:100vh; min-height:0; display:flex; flex-direction:column; overflow:hidden; padding-bottom:20px; }
  main.feste-seite > .seitenkopf { flex:none; }
  main.feste-seite .ang-pruef { flex:1 1 auto; min-height:0; align-items:stretch; }
  main.feste-seite .ang-pdf { position:static; height:auto; min-height:0; }
  main.feste-seite #angdaten { display:flex; flex-direction:column; min-height:0; }
  main.feste-seite .ang-kopf { flex:none; }
  main.feste-seite #angtab { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
  main.feste-seite .ang-pos { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
  main.feste-seite .ang-pos .ang-scroll { flex:1 1 auto; min-height:0; max-height:none; overflow:auto; }
  main.feste-seite .ang-pos .tabelle-fuss { flex:none; border-top:1px solid #eeeeee; }
}
.ang-mailtext { white-space:pre-wrap; font-family:inherit; font-size:13px; margin:0; padding:16px; height:100%; overflow:auto; background:#fff; }
.mailansicht { min-width:min(860px, 90vw); } .mail-html { width:100%; height:60vh; border:1px solid var(--linie); border-radius:8px; background:#fff; }
.mailansicht .ang-mailtext { max-height:60vh; border:1px solid var(--linie); border-radius:8px; }

/* Projektstatus wie in plancraft: Pille mit heller Farbe und dunkler Schrift */
.pstatus { display:inline-block; padding:4px 11px; border-radius:999px; font-size:14px; line-height:1.3; white-space:nowrap; background:#e9e9e9; color:#454545; }
.pstatus.gruen { background:#d3f1e3; color:#1f7a4d; } .pstatus.orange { background:#fde0cf; color:#b4501b; } .pstatus.grau { background:#e9e9e9; color:#454545; }
.pstatus.rot { background:#fcd9d9; color:#b42323; } .pstatus.blau { background:#d4e3fc; color:#1d4ed8; } .pstatus.limette { background:#dcf3bd; color:#3f6b12; }
.pstatus.tuerkis { background:#cdeefa; color:#1c5f78; } .pstatus.gelb { background:#f9e7a8; color:#7a5a00; } .pstatus.rosa { background:#fbd5ee; color:#a0287a; }
.pstatus.lila { background:#e2ddfc; color:#5b3fd1; }
.projekt-tabelle td { height:80px; } .projekt-tabelle td.pname { max-width:460px; }
.projekt-tabelle td.pname b, .projekt-tabelle td.pname .klein-text { display:block; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .projekt-tabelle td.pname .klein-text { font-weight:400; margin-top:2px; }
.tabelle th.sortierbar { cursor:pointer; user-select:none; } .tabelle th.sortierbar.an { color:#000; }

/* Allgemeine Suche (⌘K) wie in plancraft */
#suchknopf { cursor:pointer; } .nav-kbd { margin-left:auto; font:500 11px/1 inherit; color:#8a8a8a; border:1px solid #444; border-radius:5px; padding:3px 5px; }
body.nav-zu .nav-kbd { display:none; }
dialog.suchfenster { width:min(880px, calc(100vw - 32px)); max-width:none; height:min(580px, calc(100vh - 80px)); padding:0; display:flex; flex-direction:column; border-radius:12px; overflow:hidden; margin:auto; inset:0; }
dialog.suchfenster:not([open]) { display:none; }
.gs-kopf { padding:12px 12px 0; }
.gs-feld { display:flex; align-items:center; gap:8px; border:2px solid #1d4ed8; border-radius:8px; padding:0 12px; height:44px; }
.gs-feld svg { width:18px; height:18px; color:#555; flex:none; } .gs-feld input { border:none; outline:none; box-shadow:none; flex:1; font-size:16px; padding:0; height:100%; background:none; }
.gs-reiter { display:flex; gap:0; margin:6px 12px 0; border-bottom:1px solid #e6e6e6; overflow-x:auto; scrollbar-width:none; flex:none; }
.gs-reiter button { background:none; border:none; border-bottom:2px solid transparent; border-radius:0; padding:8px 9px 9px; font-size:14px; color:#2b2b2b; white-space:nowrap; cursor:pointer; flex:none; }
.gs-reiter button:hover { color:#000; }
.gs-reiter button.an { border-bottom-color:#111; font-weight:600; }
.gs-liste { flex:1; overflow:auto; padding:8px 8px 12px; }
.gs-gruppe { display:flex; align-items:center; justify-content:space-between; padding:12px 12px 6px; color:#777; font-size:14px; font-weight:500; }
.gs-mehr { background:none; border:none; color:#777; font-size:13px; cursor:pointer; padding:0; } .gs-mehr:hover { color:#111; text-decoration:underline; }
.gs-zeile { display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:8px; color:inherit; text-decoration:none; }
.gs-zeile.aktiv { background:#f1f1f1; }
.gs-text { flex:1; min-width:0; display:flex; flex-direction:column; }
.gs-text b, .gs-text span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .gs-text b { font-weight:600; font-size:15px; } .gs-text span { color:#777; font-size:13px; margin-top:1px; }
.gs-leer { color:#888; padding:24px 12px; font-size:14px; }
.gs-fuss { display:flex; gap:20px; flex-wrap:wrap; padding:11px 16px; background:#f5f5f5; color:#6b6b6b; font-size:13px; flex:none; border-top:1px solid #ececec; }
.gs-fuss span { display:inline-flex; align-items:center; gap:6px; }
.gs-fuss i { font-style:normal; font-size:12px; letter-spacing:.5px; color:#555; } .gs-fuss svg { width:15px; height:15px; color:#555; }

/* Bild groß: Fenster passt sich dem Bild an */
dialog.bild-voll { width:fit-content; height:fit-content; max-width:none; margin:auto; inset:0; padding:0; background:#000; border:none; border-radius:10px; overflow:hidden; position:fixed; }
dialog.bild-voll img { display:block; max-width:92vw; max-height:88vh; width:auto; height:auto; cursor:zoom-out; }
dialog.bild-voll .bv-titel { position:absolute; left:0; right:0; bottom:0; padding:22px 14px 10px; color:#fff; font-size:14px; background:linear-gradient(transparent, rgba(0,0,0,.6)); }
dialog.bild-voll .bv-zu { position:absolute; top:8px; right:8px; width:34px; height:34px; padding:0; border:none; border-radius:50%; background:rgba(0,0,0,.55); color:#fff; font-size:16px; line-height:34px; }
dialog.bild-voll .bv-zu:hover { background:rgba(0,0,0,.8); }

/* Sortierbare Spaltenköpfe: Pfeil hinter dem Titel */
.tabelle th.sortierbar[data-pfeil]::after { content:attr(data-pfeil); }
.tabelle th.sortierbar:hover { color:#000; }

/* Bestellstatus */
.pstatus[data-bstatus], #bstatus { cursor:pointer; }
.pstatus.orange { background:#fde0cf; color:#b4501b; }
.bestell-status { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:-4px 0 16px; } .bestell-status > span:first-child { color:var(--grau); font-size:13px; }
.gruen-knopf, button.primaer.gruen-knopf { background:#2f7d32; border-color:#2f7d32; color:#fff; } .gruen-knopf:hover { background:#256628; border-color:#256628; }
tr.pos-da td:not(.haken-zelle) { color:#6b6b6b; } tr.pos-da td:nth-child(4) { text-decoration:line-through; text-decoration-color:#9a9a9a; }
.pos-haken { width:20px; height:20px; }
.nur-handy, .handy-leiste { display:none; }
@media (max-width:760px) {
  .handy-weg { display:none; } .nur-handy { display:block; margin-top:2px; }
  .bestell-raster { display:flex; flex-direction:column-reverse; gap:18px; }
  .bestell-pos .tabelle td { height:auto; padding:14px 10px; } .pos-haken { width:28px; height:28px; }
  .bestell-pos .haken-zelle { width:48px; }
  .seitenkopf-rechts #allesda { display:none; }
  .handy-leiste { display:flex; flex-direction:column; gap:8px; position:sticky; bottom:0; background:#fff; padding:12px 0 calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--linie); margin-top:12px; z-index:5; }
  .handy-leiste button { width:100%; padding:14px; font-size:16px; border-radius:10px; }
}

/* Handy: oben nur Logo und ☰, Menü klappt auf */
.handymenue { display:none; }
@media (max-width:760px) {
  aside.seite { position:sticky; top:0; z-index:40; }
  .seite-kopf { flex-direction:row !important; align-items:center; padding:8px 12px !important; }
  .handymenue { display:flex; margin-left:auto; background:none; border:none; color:inherit; padding:6px; } .handymenue .ic { width:26px; height:26px; }
  body:not(.nav-offen) #nav, body:not(.nav-offen) #seite-fuss { display:none !important; }
  body.nav-offen #nav { padding-bottom:8px; }
  .bestell-pos table { display:table; white-space:normal; }
}
@media (max-width:760px) { .seitenkopf-titel { min-width:0; } .seitenkopf-titel .klein-text { white-space:normal; overflow-wrap:anywhere; } }
@media (max-width:760px) { .bestell-liste table { display:table; white-space:normal; width:100%; } .bestell-liste td { height:auto; padding:12px 10px; } }

/* CRM (Vertrieb) */
.crm-ansicht { width:auto; } .crm-ansicht button { padding:7px 14px; flex:none; }
.crm-aufgabe { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--linie); cursor:pointer; }
.crm-aufgabe:last-child { border-bottom:none; } .crm-aufgabe input[type=checkbox] { width:22px; height:22px; flex:none; accent-color:var(--rot); }
.crm-aufgabe-text { flex:1; min-width:0; } .crm-aufgabe-rechts { text-align:right; font-size:14px; white-space:nowrap; }
.crm-heute { color:var(--rot); font-weight:500; } .crm-tel { white-space:nowrap; } .crm-tel .ic { vertical-align:-3px; }
.crm-heute-kasten { margin-bottom:16px; }
.crm-board { display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:10px; align-items:start; }
.crm-spalte { background:#efefef; border-radius:10px; padding:8px; min-height:140px; } .crm-spalte.ziel, .crm-zu-feld.ziel { outline:2px dashed var(--rot); outline-offset:-2px; }
.crm-spalte-kopf { display:flex; justify-content:space-between; align-items:baseline; gap:6px; font-weight:500; font-size:13px; padding:2px 4px 8px; }
.crm-spalte-kopf .klein-text { font-size:12px; white-space:nowrap; }
.crm-karte { background:#fff; border:1px solid var(--linie); border-radius:8px; padding:8px 10px; margin-bottom:6px; cursor:pointer; font-size:13.5px; min-width:0; }
.crm-karte:hover { border-color:#bbb; } .crm-karte.warn { border-left:3px solid var(--rot); } .crm-karte.zieht { opacity:.4; }
.crm-karte-kopf { display:flex; justify-content:space-between; align-items:center; gap:4px; min-height:22px; }
.crm-karte-kopf b, .crm-karte-zeile { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.crm-karte-kopf .icon-knopf { margin:-6px -6px -6px 0; flex:none; }
@media (hover:hover) { .crm-karte-kopf .icon-knopf { opacity:0; } .crm-karte:hover .icon-knopf { opacity:1; } }
.crm-karte-zeile { color:var(--grau); font-size:12.5px; }
.crm-karte-fuss { display:flex; justify-content:space-between; gap:8px; font-size:12.5px; margin-top:5px; color:#444; }
.crm-karte-fuss > span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; } .crm-karte-fuss b { font-weight:500; white-space:nowrap; }
.crm-zu { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; margin-top:12px; align-items:start; }
.crm-zu-feld { background:#fff; border:1px dashed #c8c8c8; border-radius:10px; padding:8px; min-height:90px; }
.crm-zu-feld .crm-karte { background:var(--flaeche); } .crm-zu-leer { color:#aaa; font-size:13px; text-align:center; padding:14px 0; }
.crm-zu-mehr { font-size:13px; padding:2px 4px; }
body.crm-zieht .crm-zu-feld, body.crm-zieht .crm-spalte { background:#fff6f6; } body.crm-zieht .crm-zu-feld { border-color:var(--rot); }
body.crm-zieht .crm-spalte *, body.crm-zieht .crm-zu-feld * { pointer-events:none; }
.crm-suche { margin-left:auto; } .crm-suche .suchfeld input { width:200px; } .kopf .crm-suche + .primaer { margin-left:0; }
@media (max-width:1100px) { .crm-board { grid-template-columns:repeat(6, minmax(170px, 1fr)); overflow-x:auto; padding-bottom:6px; } .crm-suche .suchfeld input { width:140px; } }
.crm-seite { display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr); gap:16px; align-items:start; }
.crm-rechts { display:grid; gap:16px; } .crm-schritt { border-color:var(--rot); }
.crm-verlauf .crm-v { padding:10px 0 10px 14px; border-left:2px solid var(--linie); margin-left:4px; }
.crm-verlauf .crm-v.gespraech { border-left-color:var(--schwarz); }
.crm-v-kopf { display:flex; align-items:center; gap:6px; flex-wrap:wrap; } .crm-v-kopf .icon-knopf { margin-left:auto; }
.crm-notiz { white-space:pre-wrap; font-size:14px; background:var(--flaeche); border-radius:8px; padding:10px 12px; margin-top:6px; }
.crm-v details summary { cursor:pointer; margin-top:4px; }
.crm-angebot { display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid var(--linie); } .crm-angebot > div { flex:1; }
.crm-angebot:last-child { border-bottom:none; } .crm-angebot.ersetzt { opacity:.55; }
.crm-balken { display:flex; align-items:center; gap:10px; font-size:14px; padding:4px 0; } .crm-balken > span:first-child { width:160px; flex:none; }
.crm-balken-spur { flex:1; height:8px; background:var(--hell); border-radius:4px; overflow:hidden; } .crm-balken-spur i { display:block; height:100%; background:var(--rot); }
@media (max-width:1100px) { .crm-seite { grid-template-columns:1fr; } }
@media (max-width:760px) { .crm-aufgabe { flex-wrap:wrap; } .crm-aufgabe [data-ortstermin] { width:100%; } .crm-balken > span:first-child { width:110px; } .kopf .crm-ansicht { order:3; width:100%; } .kopf .crm-ansicht button { flex:1; } }
@media (max-width:760px) { .seitenkopf-rechts { flex-wrap:wrap; } .seitenkopf-rechts #weiter { order:3; flex-basis:100%; } .crm-board { grid-template-columns:minmax(0, 1fr); overflow:visible; } .crm-spalte { min-height:0; } .crm-zu { grid-template-columns:1fr; } .crm-suche { margin-left:0; flex:1; } .crm-suche .suchfeld input { width:100%; } }

.drop-overlay { position:fixed; inset:0; background:rgba(228,0,0,.08); border:3px dashed var(--rot); display:none; align-items:center; justify-content:center; z-index:50; pointer-events:none; font-size:22px; font-weight:500; color:var(--rot); }
.drop-overlay.sichtbar { display:flex; }
.crm-angebot.klick { cursor:pointer; } .crm-angebot.klick:hover { background:var(--flaeche); }
.ablage.gewaehlt { border-color:var(--gruen); color:var(--gruen); }

.status-chip { display:inline-flex; align-items:center; gap:4px; border:none; border-radius:8px; padding:4px 10px; font-size:13px; font-weight:400; background:#ececec; color:#3d3d3d; }
.status-chip:hover { background:#e0e0e0; } .status-chip .ic { opacity:.7; }
.status-chip.gelb { background:#fbefc5; color:#7a5b00; } .status-chip.gruen { background:#dcf2e3; color:#1d6b36; } .status-chip.rot { background:#fde3e3; color:#a40f0f; }
.ausg-tabelle td { padding-top:13px; padding-bottom:13px; }

.ges-tabelle { table-layout:fixed; } .ges-tabelle th:nth-child(1) { width:105px; } .ges-tabelle th:nth-child(2) { width:150px; } .ges-tabelle th:nth-child(4) { width:22%; } .ges-tabelle th:nth-child(5) { width:90px; } .ges-tabelle th:nth-child(6) { width:48px; }
.ges-text { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ges-text b { margin-right:8px; } .ges-text span { color:var(--grau); }
.ges-tabelle td:nth-child(4) { overflow:hidden; text-overflow:ellipsis; }
@media (max-width:760px) { .ges-tabelle th:nth-child(2), .ges-tabelle td:nth-child(2), .ges-tabelle th:nth-child(5), .ges-tabelle td:nth-child(5) { display:none; } }

/* Aufgaben */
.auf-neu-karte { padding:10px 14px; margin-bottom:16px; }
.auf-eingabe-zeile { display:flex; align-items:center; gap:10px; } .auf-eingabe-zeile input { flex:1; border:none; padding:6px 0; font-size:15px; outline:none; background:transparent; }
.auf-eingabe-zeile input:focus { outline:none; } .auf-plus { color:var(--rot); font-size:22px; line-height:1; width:22px; text-align:center; }
.auf-vorschau { display:flex; flex-wrap:wrap; align-items:center; gap:6px; } .auf-vorschau:not(:empty) { margin-top:8px; }
.auf-chip { font-size:12px; border-radius:6px; padding:2px 8px; background:#ececec; color:#3d3d3d; }
.auf-chip.datum { background:#dcf2e3; color:#1d6b36; } .auf-chip.wer { background:#ebe9fc; color:#3c3489; } .auf-chip.ziel { background:#fbefc5; color:#7a5b00; }
.auf-chip.p1 { background:#fde3e3; color:#a40f0f; } .auf-chip.p2 { background:#fde9d3; color:#8a4a00; } .auf-chip.p3 { background:#dde9fb; color:#0c447c; }
.auf-knoepfe { margin-left:auto; display:flex; gap:6px; }
.auf-gruppe { margin-bottom:16px; } .auf-gruppe-kopf { display:flex; justify-content:space-between; align-items:baseline; font-weight:500; font-size:14px; margin:0 4px 6px; }
.auf-liste { padding:0 14px; } .auf-liste.flach { padding:0; }
.auf-zeile { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--linie); cursor:pointer; min-width:0; }
.auf-liste .auf-zeile:last-child { border-bottom:none; }
.auf-kreis { width:22px; height:22px; flex:none; border-radius:50%; border:2px solid #b8b8b8; background:#fff; padding:0; display:flex; align-items:center; justify-content:center; color:#fff; }
.auf-kreis:hover { background:#f2f2f2; } .auf-kreis .ic { width:12px; height:12px; }
.auf-kreis.p1 { border-color:#d93025; background:#fdecea; } .auf-kreis.p2 { border-color:#ef8a17; background:#fef1e2; } .auf-kreis.p3 { border-color:#2f7de1; background:#e8f1fd; }
.auf-zeile.erledigt .auf-kreis { background:#9a9a9a; border-color:#9a9a9a; } .auf-zeile.erledigt .auf-text > span { text-decoration:line-through; color:var(--grau); }
.auf-text { flex:1; min-width:0; } .auf-text > span { margin-right:8px; }
.auf-bezug { font-size:12.5px; color:var(--grau); background:var(--flaeche); border-radius:6px; padding:1px 7px; white-space:nowrap; display:inline-block; max-width:100%; overflow:hidden; text-overflow:ellipsis; vertical-align:middle; }
.auf-bezug:hover { color:var(--rot); text-decoration:none; }
.auf-datum { font-size:13px; white-space:nowrap; }
.auf-zeile .icon-knopf { flex:none; } @media (hover:hover) { .auf-zeile .icon-knopf { opacity:0; } .auf-zeile:hover .icon-knopf { opacity:1; } }
.auf-prio button { padding:6px 4px; }
@media (max-width:760px) { .auf-knoepfe { margin-left:0; width:100%; } .auf-wer { display:none; } }

.auf-popup { max-height:300px; overflow:auto; padding:4px; } .auf-popup .auswahl-eintrag { white-space:normal; flex-direction:column; gap:0; }
button.auf-chip { border:none; font:inherit; font-size:12px; cursor:pointer; display:inline-flex; align-items:center; gap:3px; padding:2px 6px 2px 8px; }
button.auf-chip .ic { width:11px; height:11px; opacity:.7; } .auf-chip.ziel.leer { background:#f1f1f1; color:var(--grau); }
.auf-chip-weg { border:none; background:none; color:var(--grau); padding:0 4px; font-size:12px; cursor:pointer; }

/* Avatare */
.avatar-bild, .avatar-kreis { width:26px; height:26px; border-radius:50%; flex:none; object-fit:cover; display:inline-flex; align-items:center; justify-content:center; background:#ececec; color:#555; font-size:11px; font-weight:500; vertical-align:middle; }
.avatar.mit-bild { padding:0; overflow:hidden; } .avatar.mit-bild img { width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }
.benutzer-name { display:flex; align-items:center; gap:8px; }
.profil-karte { display:flex; gap:16px; align-items:center; } .profil-bild { width:72px; height:72px; border-radius:50%; overflow:hidden; background:#ececec; display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:500; color:#555; flex:none; } .profil-bild img { width:100%; height:100%; object-fit:cover; }
/* Aufgabe groß */
dialog.auf-detail { width:min(1000px, 96vw); max-width:none; padding:0; }
.auf-detail-kopf { display:flex; align-items:center; justify-content:space-between; padding:12px 18px; border-bottom:1px solid var(--linie); }
.auf-detail-bezug { color:#2f6fd6; font-weight:500; } .auf-detail-knoepfe { display:flex; gap:4px; } .auf-detail-knoepfe .icon-knopf:disabled { opacity:.3; }
.auf-detail-raster { display:grid; grid-template-columns:minmax(0, 1fr) 280px; min-height:420px; }
.auf-detail-links { padding:18px 22px 24px; } .auf-detail-rechts { background:#f8f8f7; padding:18px 20px; border-left:1px solid var(--linie); }
.auf-detail-titel { display:flex; gap:12px; align-items:flex-start; }
.auf-detail-titel textarea { border:none; font-size:22px; font-weight:500; padding:0; min-height:0; resize:none; flex:1; background:transparent; } .auf-detail-titel textarea:focus { outline:none; } .auf-detail-titel textarea.erledigt { text-decoration:line-through; color:var(--grau); }
.auf-kreis.gross { width:26px; height:26px; margin-top:3px; } .auf-kreis.klein { width:18px; height:18px; }
.auf-detail-notiz { border:none; padding:6px 0 6px 38px; min-height:0; resize:none; color:#444; background:transparent; } .auf-detail-notiz:focus { outline:none; }
.auf-detail-abschnitt { margin:18px 0 6px; padding-bottom:6px; border-bottom:1px solid var(--linie); }
.auf-unter { display:flex; align-items:center; gap:10px; padding:8px 0 8px 4px; border-bottom:1px solid var(--linie); } .auf-unter span { flex:1; } .auf-unter.erledigt span { text-decoration:line-through; color:var(--grau); }
.auf-weg { border:none; background:none; color:#999; padding:2px 6px; cursor:pointer; opacity:0; } .auf-unter:hover .auf-weg, .auf-weg.sichtbar { opacity:1; }
.auf-unter-neu { display:flex; align-items:center; gap:10px; padding:6px 0 6px 2px; } .auf-unter-neu input, .auf-kommentar.neu input { border:none; flex:1; padding:6px 0; background:transparent; } .auf-unter-neu input:focus { outline:none; }
.auf-kommentar { display:flex; gap:10px; padding:10px 0; } .auf-kommentar > div { flex:1; } .auf-kommentar .icon-knopf { float:right; margin:-4px 0 0; }
.auf-kommentar.neu { align-items:center; } .auf-kommentar.neu input { border:1px solid #d5d5d5; border-radius:18px; padding:8px 14px; }
.auf-feld { padding:10px 0; border-bottom:1px solid #e6e6e4; position:relative; } .auf-feld > span { display:block; font-size:13px; color:var(--grau); margin-bottom:6px; font-weight:500; }
.auf-feld-wert { border:none; background:none; padding:2px 0; font:inherit; display:flex; align-items:center; gap:8px; cursor:pointer; text-align:left; font-weight:400; color:inherit; white-space:normal; }
.auf-feld-wert:hover { color:var(--rot); background:none; } .auf-feld .auf-weg { position:absolute; right:-6px; top:6px; }
.auf-feld-wert.datum input { border:none; background:transparent; padding:2px 0; } .auf-feld-wert.datum input[type=time] { width:90px; }
.prio-p1 .ic { color:#d93025; } .prio-p2 .ic { color:#ef8a17; } .prio-p3 .ic { color:#2f7de1; }
.auf-erstellt { margin-top:14px; }
.auf-info { display:flex; gap:10px; margin-top:2px; } .auf-info span { display:inline-flex; align-items:center; gap:3px; } .auf-notiz { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:420px; }
@media (max-width:760px) { .auf-detail-raster { grid-template-columns:1fr; } .auf-detail-rechts { border-left:none; border-top:1px solid var(--linie); } }

/* Anfrage-Seite (22.10.2026): Phasenleiste, links Kontakt, rechts Inhalt, Gespräche einzeilig */
.crm-phasen { display:flex; gap:4px; margin:-4px 0 16px; overflow-x:auto; }
.crm-phasen span { flex:1; min-width:max-content; text-align:center; padding:6px 10px; border-radius:6px; background:#f0f0f0; color:#777; font-size:13px; white-space:nowrap; }
.crm-phasen span.fertig { background:#dcf3e4; color:#1f6b3a; } .crm-phasen span.jetzt { background:#fbe7c6; color:#7a4a00; font-weight:600; }
.crm-phasen span.jetzt.gewonnen { background:#cdeedb; color:#16603a; } .crm-phasen span.jetzt.verloren { background:#fcd9d9; color:#a32020; } .crm-phasen span.jetzt.wiedervorlage { background:#e2ddfc; color:#5b3fd1; }
.crm-seite2 { grid-template-columns:minmax(280px, 1fr) minmax(0, 2fr); }
.crm-links, .crm-rechts { display:flex; flex-direction:column; gap:16px; min-width:0; } .crm-seite2 .akte-kasten { margin:0; }
.crm-gespraeche { display:flex; flex-direction:column; }
.crm-gz { display:flex; align-items:center; gap:10px; padding:9px 4px; border-top:1px solid #eee; } .crm-gz:first-child { border-top:none; }
.crm-gz:hover { background:#fafafa; } .crm-gz-datum { color:#777; font-size:13px; white-space:nowrap; min-width:78px; }
.crm-gz-titel { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:1100px) { .crm-seite2 { grid-template-columns:1fr; } }

/* KI-Zugang: Schlüssel und Befehle zum Kopieren */
.ki-wert { display:flex; align-items:center; gap:8px; background:#f5f5f5; border-radius:8px; padding:8px 10px; margin:6px 0 10px; }
.ki-wert code { flex:1; min-width:0; overflow-wrap:anywhere; font-size:12.5px; }
.crm-phasen span { cursor:pointer; } .crm-phasen span:hover { filter:brightness(.96); } .crm-phasen span.jetzt[data-phase] { cursor:default; }

/* Leiste (22.10.2026): Nodus oben mit Lupe, Gruppen Lager und Kontakte mit Ausklapp-Liste rechts, Abschnitt Ressourcen */
.kopf-lupe { background:none; border:none; color:#aaa; padding:6px; border-radius:6px; cursor:pointer; display:flex; } .kopf-lupe:hover { background:#222; color:#fff; } .kopf-lupe .ic { width:18px; height:18px; }
body.nav-zu .kopf-lupe { display:none; }
.nav-gruppe { position:relative; outline:none; }
.nav-gruppe-kopf { display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:8px; margin-bottom:2px; color:#ddd; cursor:default; white-space:nowrap; user-select:none; }
.nav-gruppe:hover .nav-gruppe-kopf, .nav-gruppe.offen .nav-gruppe-kopf { background:#1d1d1d; color:#fff; }
.nav-gruppe.aktiv .nav-gruppe-kopf { background:#262626; color:#fff; font-weight:500; }
.nav-pfeil { width:14px; height:14px; color:#777; flex:none; }
.gruppen-punkt { display:none; width:7px; height:7px; border-radius:50%; background:var(--rot); padding:0 !important; min-width:0 !important; }
.gruppen-punkt.an { display:block; } .nav-gruppe-kopf .nav-text { flex:1; }
.nav-flyout { display:none; position:fixed; z-index:80; min-width:230px; background:#151515; border:1px solid #2c2c2c; border-radius:10px; padding:6px; box-shadow:0 10px 30px rgba(0,0,0,.35); }
.nav-gruppe.offen .nav-flyout { display:block; }
.flyout-titel { font-size:11px; letter-spacing:.8px; text-transform:uppercase; color:#888; padding:6px 10px 6px; }
body.nav-zu .nav-flyout .nav-text { display:inline; } body.nav-zu #nav .nav-flyout a { justify-content:flex-start; padding:9px 12px; }
body.nav-zu .nav-gruppe-kopf { justify-content:center; padding:10px 0; position:relative; } body.nav-zu .nav-gruppe-kopf .nav-pfeil { display:none; }
body.nav-zu .gruppen-punkt.an { position:absolute; top:6px; right:10px; }
.nur-beta-inline { display:none; } body.beta .nur-beta-inline { display:contents; }
.nav-titel-gruppe { padding:14px 12px 4px; font-size:11px; letter-spacing:.8px; text-transform:uppercase; color:#888; }
body.nav-zu .nav-titel-gruppe { padding:10px 0 4px; } body.nav-zu .nav-titel-gruppe .nav-text { display:none; } body.nav-zu .nav-titel-gruppe::after { content:''; display:block; height:1px; background:#2a2a2a; margin:0 10px; }
@media (max-width:760px) {
  #nav { display:block !important; }
  .nav-flyout { display:block; position:static; background:none; border:none; box-shadow:none; padding:0 0 4px 18px; min-width:0; }
  .flyout-titel, .nav-pfeil { display:none; } .nav-gruppe-kopf { cursor:default; color:#999; font-size:12px; text-transform:uppercase; letter-spacing:.6px; padding:10px 12px 2px; }
  .nav-gruppe:hover .nav-gruppe-kopf { background:none; } .nav-gruppe-kopf .ic { display:none; }
}

/* Projektakte wie plancraft (23.10.2026, nach Doms Screenshots): graue Fläche, weiße Karten, Kästen mit feinem Rahmen, Chat rechts */
main.feste-seite { height:100vh; display:flex; flex-direction:column; overflow:hidden; }
main.pa-seite { background:#f0f0f0; }
.pa-kopf { display:flex; align-items:center; gap:14px; margin:-6px 0 14px; flex:none; }
.pa-kopf h1 { margin:0; font-size:21px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .pa-kopf .rechts { margin-left:auto; }
.pa-knopf { display:inline-flex; align-items:center; justify-content:center; gap:7px; height:38px; min-width:38px; padding:0 10px; background:#fff; border:1px solid #d9d9d9; border-radius:8px; color:#222; cursor:pointer; font:inherit; font-size:14.5px; font-weight:500; text-decoration:none; }
.pa-knopf:hover { background:#f6f6f6; text-decoration:none; } .pa-knopf svg { width:17px; height:17px; } .pa-knopf.klein { height:28px; min-width:28px; padding:0 6px; }
.pa-knopf.an { border-color:#111; }
.pa { flex:1; min-height:0; display:grid; grid-template-columns:minmax(0, 1fr) 450px; gap:12px; }
.pa-links { display:flex; flex-direction:column; gap:12px; min-height:0; min-width:0; }
.pa-karte { background:#fff; border-radius:10px; }
.pa-uebersicht-karte { flex:none; padding:0 10px 10px; }
.pa-uebersicht { display:grid; grid-template-columns:1fr 1fr 1fr; grid-template-rows:auto auto; gap:6px; margin-top:10px; }
.pa-uebersicht .g1 { grid-column:1; grid-row:1; } .pa-uebersicht .g2 { grid-column:1; grid-row:2; } .pa-uebersicht .g3 { grid-column:2; grid-row:1; } .pa-uebersicht .g4 { grid-column:2; grid-row:2; } .pa-uebersicht .g5 { grid-column:3; grid-row:1 / span 2; }
.pa-box { border:1px solid #ececec; border-radius:8px; padding:14px 16px; min-width:0; line-height:1.55; font-size:15px; position:relative; }
.pa-box-titel { display:flex; align-items:center; gap:8px; font-size:13px; letter-spacing:.3px; text-transform:uppercase; color:#444; margin-bottom:10px; } .pa-box-titel svg { width:17px; height:17px; color:#333; }
.pa-gross { font-size:19px; } button.pa-link { background:none; border:none; padding:0; font:inherit; font-size:19px; cursor:pointer; }
.pa-link { color:#111; text-decoration:underline; text-underline-offset:3px; } .pa-link:hover { color:var(--rot); }
.pa-tel { color:#111; } .pa-tag { position:absolute; right:14px; top:50%; background:#ececec; color:#444; font-size:12.5px; padding:2px 8px; border-radius:6px; }
.pa-text { max-height:150px; overflow:auto; color:#333; } .pa-keine { color:#666; display:flex; align-items:center; justify-content:flex-start; min-height:90px; }
.pa-unten { flex:1; min-height:0; display:flex; flex-direction:column; padding:0 10px; }
.pa-reiter { display:flex; align-items:center; gap:2px; padding-top:10px; flex:none; min-height:48px; }
.pa-reiter > button { background:none; border:none; border-bottom:2px solid transparent; border-radius:0; padding:8px 6px 8px; margin-right:10px; font-size:15px; font-weight:600; color:#999; cursor:pointer; }
.pa-reiter > button.an { color:#111; border-bottom-color:#111; }
.pa-reiter-rechts { margin-left:auto; display:flex; gap:8px; align-items:center; }
.pa-inhalt { flex:1; min-height:0; overflow:auto; padding:6px 0 10px; }
.pa-liste { display:flex; flex-direction:column; } .pa-ablage.drueber { outline:2px dashed var(--rot); outline-offset:4px; border-radius:8px; }
.pa-zeile { display:flex; align-items:center; gap:16px; padding:12px 10px; border-bottom:1px solid #f0f0f0; color:inherit; text-decoration:none; min-height:62px; box-sizing:border-box; }
.pa-zeile:hover { background:#f5f5f5; text-decoration:none; } .pa-zeile.klick { cursor:pointer; }
.pa-ic { width:30px; flex:none; display:flex; align-items:center; justify-content:center; color:#111; } .pa-ic svg { width:22px; height:22px; } .pa-ic img { width:34px; height:34px; object-fit:cover; border-radius:5px; }
.pa-zeile-text { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; } .pa-zeile-text b { font-weight:600; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pa-zeile-text span { font-size:13px; color:#666; }
.pa-betrag { white-space:nowrap; }
.pa-leer { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:#666; text-align:center; padding:60px 20px; height:100%; box-sizing:border-box; line-height:1.6; } .pa-leer b { color:#555; }
.pa-pfad { padding:8px 10px 4px; font-size:14px; }
.pakte { max-width:760px; } .pakte-titel { display:flex; align-items:center; gap:10px; font-size:17px; margin:22px 0 10px; } .pakte-titel:first-child { margin-top:0; }
.pakte-titel::after { content:''; flex:1; height:1px; background:#e6e6e6; }
.pk-zeile { display:grid; grid-template-columns:150px 1fr; gap:12px; padding:7px 0; align-items:baseline; } .pk-zeile > span { color:#555; font-size:14px; }
.pakte-kunde { display:flex; gap:12px; align-items:flex-start; border:1px solid #e6e6e6; border-radius:10px; padding:12px 14px; color:inherit; max-width:420px; } .pakte-kunde:hover { background:#fafafa; text-decoration:none; }
/* Chat */
.pa-chat { display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.ch-titel { margin:0; padding:18px 16px 6px; font-size:20px; font-weight:700; }
.ch-reiter { display:flex; align-items:center; gap:2px; margin:0 8px; border-bottom:1px solid #e3e3e3; flex:none; }
.ch-reiter > button[data-kanal] { background:none; border:none; border-bottom:2px solid transparent; border-radius:0; padding:10px 12px; font-size:15px; font-weight:500; color:#333; cursor:pointer; margin-bottom:-1px; }
.ch-reiter > button[data-kanal].an { font-weight:600; color:#111; border-bottom-color:#111; }
.ch-filter { margin-left:auto; height:32px; margin-bottom:6px; font-size:13.5px; }
.ch-angeheftet { flex:none; border-bottom:1px solid #eee; max-height:84px; overflow:auto; background:#fafafa; } .ch-pin-zeile { padding:7px 16px; font-size:13px; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ch-pin-zeile:hover { background:#f2f2f2; }
.ch-verlauf { flex:1; min-height:0; overflow-y:auto; padding:6px 10px 10px; display:flex; flex-direction:column; gap:10px; }
.ch-verlauf.drueber { outline:2px dashed var(--rot); outline-offset:-6px; }
.ch-tag { display:flex; align-items:center; gap:10px; color:#666; font-size:12.5px; margin:10px 0 2px; } .ch-tag::before, .ch-tag::after { content:''; flex:1; height:1px; background:#e2e2e2; }
.ch-n { display:flex; align-items:flex-start; gap:10px; max-width:90%; } .ch-n.ich { align-self:flex-end; flex-direction:row-reverse; }
.ch-av { width:30px !important; height:30px !important; font-size:11px; flex:none; margin-top:2px; } .ch-av-platz { width:30px; flex:none; }
.ch-blase { background:#f2f2f2; border-radius:8px; padding:9px 12px 6px; min-width:90px; overflow-wrap:anywhere; }
.ch-n.ich .ch-blase { background:#e4e4e4; } .ch-n.erwaehnt .ch-blase { box-shadow:inset 3px 0 0 #e0a800; }
.ch-blase.geloescht { color:#888; font-style:italic; font-size:13.5px; }
.ch-wer { font-size:13.5px; font-weight:600; margin-bottom:4px; }
.ch-text { font-size:14.5px; line-height:1.5; } .ch-at { color:#1d4ed8; font-weight:600; }
.ch-zeit { font-size:12px; color:#555; text-align:right; margin-top:4px; display:flex; justify-content:flex-end; align-items:center; gap:4px; } .ch-pin-ic svg { width:12px; height:12px; }
.ch-bild { display:block; max-width:240px; max-height:240px; border-radius:6px; cursor:zoom-in; margin:2px 0 4px; }
.ch-datei { display:flex; align-items:center; gap:8px; color:#111; margin:2px 0; font-size:14px; text-decoration:none; } .ch-datei:hover b { text-decoration:underline; } .ch-datei svg { width:18px; height:18px; flex:none; }
.ch-zitat { border-left:3px solid #999; background:rgba(0,0,0,.05); border-radius:4px; padding:4px 8px; margin-bottom:6px; font-size:13px; cursor:pointer; display:flex; flex-direction:column; } .ch-zitat span { color:#555; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ch-aktion { display:flex; gap:2px; align-self:flex-start; margin-top:4px; opacity:0; transition:opacity .1s; } .ch-n:hover .ch-aktion { opacity:1; }
.ch-aktion button { background:none; border:none; padding:4px; border-radius:6px; color:#444; cursor:pointer; display:flex; } .ch-aktion button:hover { background:#eee; } .ch-aktion svg { width:16px; height:16px; }
.ch-n.blink .ch-blase { animation:chBlink 1.2s; } @keyframes chBlink { 30% { box-shadow:0 0 0 3px #e0a800; } }
.ch-galerie { display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; padding-top:6px; }
.ch-kachel { aspect-ratio:1; border:none; padding:0; border-radius:6px; overflow:hidden; background:#f2f2f2; cursor:zoom-in; display:flex; }
.ch-kachel img { width:100%; height:100%; object-fit:cover; } .ch-kachel.datei { flex-direction:column; align-items:center; justify-content:center; gap:6px; color:#111; text-decoration:none; cursor:pointer; padding:8px; text-align:center; font-size:12px; } .ch-kachel.datei svg { width:28px; height:28px; } .ch-kachel.datei span { overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.ch-unten { flex:none; background:#f2f2f2; border-radius:0 0 10px 10px; }
.ch-antwort { display:flex; align-items:center; gap:8px; padding:8px 12px 0; } .ch-antwort div { flex:1; min-width:0; border-left:3px solid #999; padding-left:8px; display:flex; flex-direction:column; font-size:13px; } .ch-antwort span { color:#666; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ch-eingabe { display:flex; align-items:flex-end; gap:8px; padding:12px; }
.ch-feld { flex:1; min-width:0; background:#fff; border:1px solid #d9d9d9; border-radius:8px; }
.ch-feld:focus-within { border-color:#999; }
.ch-werkzeug { display:none; gap:2px; padding:5px 6px 0; } .ch-feld:focus-within .ch-werkzeug { display:flex; }
.ch-werkzeug button { background:none; border:none; width:28px; height:26px; border-radius:5px; color:#222; cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center; } .ch-werkzeug button:hover { background:#f0f0f0; } .ch-werkzeug svg { width:16px; height:16px; }
.ch-feld textarea { display:block; width:100%; box-sizing:border-box; border:none; outline:none; resize:none; padding:9px 10px; font:inherit; font-size:14.5px; line-height:1.4; max-height:140px; background:none; }
.ch-senden { color:#aaa; } .ch-senden.bereit { color:#fff; background:var(--rot); border-color:var(--rot); }
@media (max-width:1100px) { .pa { grid-template-columns:1fr; overflow:auto; } main.feste-seite { height:auto; overflow:visible; } .pa-chat { height:75vh; } .pa-uebersicht { grid-template-columns:1fr; } .pa-uebersicht > .pa-box { grid-column:1 !important; grid-row:auto !important; } .pa-unten { min-height:420px; } }

/* Chat-Eingabe (3.39): Knöpfe so hoch wie das Feld, Textfeld mit Formatierung, Erwähnung als graue Marke */
.ch-eingabe { align-items:stretch; }
.ch-eingabe > .pa-knopf { height:auto; min-height:42px; width:44px; padding:0; }
.ch-editor { min-height:22px; max-height:160px; overflow-y:auto; padding:10px 12px; font-size:14.5px; line-height:1.45; outline:none; overflow-wrap:anywhere; }
.ch-editor:empty::before { content:attr(data-platzhalter); color:#999; pointer-events:none; }
.ch-marke { display:inline-block; background:#e9e9e9; color:#111; border-radius:6px; padding:0 6px; font-weight:500; white-space:nowrap; }
.ch-werkzeug button.an { background:#e6e6e6; }
/* Ablage: Haken beim Überfahren statt Symbol, Auswahl-Leiste, Ziehen auf Ordner */
.ab-haken { display:none; width:18px; height:18px; margin:0; cursor:pointer; }
.ab-zeile:hover .ab-haken, .ab-zeile.gewaehlt .ab-haken, .mit-wahl .ab-haken { display:block; }
.ab-zeile:hover .ab-symbol, .ab-zeile.gewaehlt .ab-symbol, .mit-wahl .ab-symbol { display:none; }
.ab-symbol { display:flex; align-items:center; justify-content:center; }
.ab-zeile.gewaehlt { background:#f3f3f3; } .ab-zeile.zieht { opacity:.45; }
.ab-zeile.ziel-an, .ab-ziel.ziel-an { background:#fde8e8; box-shadow:inset 0 0 0 2px var(--rot); border-radius:6px; }
.ab-leiste { display:flex; align-items:center; gap:14px; padding:10px 12px; border-bottom:1px solid #f0f0f0; position:sticky; top:0; background:#fff; z-index:2; }
.ab-alle { display:flex; align-items:center; gap:10px; font-size:14.5px; cursor:pointer; } .ab-alle input { width:18px; height:18px; margin:0; }
.ab-trenner { width:1px; height:22px; background:#ddd; }
.ab-icon { background:none; border:none; padding:6px; border-radius:6px; color:#222; cursor:pointer; display:flex; } .ab-icon:hover { background:#f0f0f0; } .ab-icon.gefahr { color:var(--rot); } .ab-icon svg { width:19px; height:19px; }
.pa-zeile.aus { opacity:.45; cursor:default; } .pa-pfad .link { font-size:14px; }

/* Pfad-Leiste der Ablage (Tiefe der Ordner): Zurück-Knopf, Ebenen mit Pfeil, jede Ebene ist Ablageziel */
.ab-pfad { display:flex; align-items:center; gap:10px; padding:6px 4px 10px; border-bottom:1px solid #f0f0f0; margin-bottom:2px; position:sticky; top:0; background:#fff; z-index:3; }
.ab-hoch-ebene { width:36px; min-width:36px; height:36px; padding:0; }
.ab-krumen { display:flex; align-items:center; gap:4px; min-width:0; overflow-x:auto; scrollbar-width:none; }
.ab-krumen > svg { width:14px; height:14px; color:#999; flex:none; }
.ab-krume { display:inline-flex; align-items:center; gap:7px; padding:6px 10px; border-radius:8px; border:1px dashed transparent; background:none; font:inherit; font-size:15px; color:#555; cursor:pointer; white-space:nowrap; max-width:240px; }
.ab-krume span { overflow:hidden; text-overflow:ellipsis; } .ab-krume svg { width:17px; height:17px; flex:none; }
button.ab-krume:hover { background:#f2f2f2; color:#111; }
.ab-krume.jetzt { color:#111; font-weight:600; cursor:default; }
.ab-pfad.ziehen .ab-ziel { border-color:#c9c9c9; }
.ab-krume.ziel-an, .ab-hoch-ebene.ziel-an { background:#fde8e8; border:1px solid var(--rot); color:var(--rot); }
/* Leerer Ordner: gestricheltes Feld über die ganze Fläche zum Auswählen oder Hineinziehen */
.ab-leerfeld { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; width:100%; min-height:360px; height:100%; border:1.5px dashed #d6d6d6; border-radius:8px; background:none; color:#aaa; font:inherit; font-size:15px; cursor:pointer; }
.ab-leerfeld:hover, .pa-ablage.drueber .ab-leerfeld { border-color:#999; color:#777; } .ab-leerfeld svg { width:22px; height:22px; }
.pa-ablage.leer { height:calc(100% - 52px); }

/* Dateiansicht wie plancraft: dunkle Leiste, Bild/PDF in der Mitte, Zoom oben */
dialog.dv { position:fixed; inset:0; width:100vw; height:100vh; max-width:none; max-height:none; margin:0; padding:0; border:none; border-radius:0; background:transparent; box-shadow:none; display:flex; flex-direction:column; overflow:hidden; }
dialog.dv:not([open]) { display:none; } dialog.dv::backdrop { background:rgba(0,0,0,.55); }
.dv-leiste { flex:none; height:56px; background:#141414; color:#fff; display:flex; align-items:center; justify-content:center; gap:14px; padding:0 14px; position:relative; }
.dv-name { font-weight:600; font-size:17px; max-width:min(60vw, 720px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dv-rechts { position:absolute; right:12px; top:0; bottom:0; display:flex; align-items:center; gap:4px; }
.dv-knopf { background:none; border:none; color:#fff; width:38px; height:38px; border-radius:8px; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; } .dv-knopf:hover { background:#2a2a2a; } .dv-knopf:disabled { opacity:.3; cursor:default; background:none; } .dv-knopf svg { width:20px; height:20px; }
.dv-buehne { flex:1; min-height:0; display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative; }
.dv-bild { max-width:calc(100vw - 200px); max-height:calc(100vh - 56px); object-fit:contain; transform-origin:center; user-select:none; box-shadow:0 6px 30px rgba(0,0,0,.35); }
.dv-pdf { width:100%; height:100%; overflow:auto; }
.dv-seiten { display:flex; flex-direction:column; align-items:center; gap:14px; padding:24px 24px 60px; width:max-content; min-width:100%; box-sizing:border-box; }
.dv-seiten canvas { background:#fff; box-shadow:0 4px 20px rgba(0,0,0,.35); border-radius:3px; }
.dv-lade { color:#eee; text-align:center; padding:40vh 20px 0; }
.dv-zoom { position:absolute; top:66px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:2px; background:#3a3a3a; color:#fff; border-radius:6px; padding:3px; font-size:14px; font-weight:600; z-index:2; }
.dv-zoom span { min-width:54px; text-align:center; } .dv-zoom button { background:none; border:none; color:#fff; width:28px; height:26px; border-radius:4px; cursor:pointer; font-size:17px; padding:0; } .dv-zoom button:hover { background:#555; }
.dv-keine { background:#fff; border-radius:10px; padding:30px 40px; display:flex; flex-direction:column; align-items:center; gap:14px; color:#444; }
.dv-druck { position:fixed; right:0; bottom:0; width:1px; height:1px; border:0; opacity:0; }
button.ch-datei { background:none; border:none; padding:0; font:inherit; cursor:pointer; text-align:left; } button.ch-kachel.datei { border:none; font:inherit; }

/* Objekt-Adresse wählen (Projekt / Kunde / andere) */
.adr-wahl { border:1px solid var(--linie); border-radius:8px; background:#fff; overflow:hidden; margin-top:4px; }
.formular label.adr-zeile, label.adr-zeile { display:grid; grid-template-columns:18px 130px 1fr; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid var(--linie); color:var(--schwarz); font-size:14px; cursor:pointer; }
.adr-zeile:last-child { border-bottom:none; } .adr-zeile:hover { background:var(--flaeche); } .adr-zeile.an { background:#fff5f5; }
.adr-zeile input[type=radio] { accent-color:var(--rot); width:16px; height:16px; margin:0; }
.adr-zeile .adr-titel { font-weight:500; } .adr-zeile .adr-text { color:var(--grau); }
.adr-zeile input[data-objekt] { margin:0; }
@media (max-width:700px) { .formular label.adr-zeile, label.adr-zeile { grid-template-columns:18px 1fr; } .adr-zeile .adr-text, .adr-zeile input[data-objekt] { grid-column:2; } }

/* Anfrage-Seite 3.46: drei Spalten, rechts Notiz-Chat mit Gesprächskarten; Anruf-Fenster */
.crm-seite3 { flex:1; min-height:0; display:grid; grid-template-columns:minmax(260px, 1fr) minmax(0, 1.1fr) minmax(360px, 430px); gap:14px; margin-top:4px; }
.crm-seite3 > .crm-links, .crm-seite3 > .crm-rechts { min-height:0; overflow-y:auto; padding:0 2px 12px; }
.crm-seite3 .akte-kasten { margin:0; }
.crm-chat { border:1px solid var(--linie); min-height:0; }
.ch-reiter.einzeln { border-bottom:none; }
.cg-karte { align-self:stretch; border:1px solid #dcdcdc; border-radius:10px; background:#fff; padding:9px 12px 6px; cursor:pointer; }
.cg-karte:hover { border-color:#bbb; }
.cg-kopf { display:flex; align-items:center; gap:8px; font-size:14px; } .cg-kopf b { font-weight:600; }
.cg-ic { display:flex; color:#444; } .cg-ic svg { width:15px; height:15px; }
.cg-titel { color:var(--grau); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.cg-dauer { margin-left:auto; background:#e8f5ec; color:var(--gruen); font-size:12px; padding:1px 8px; border-radius:10px; white-space:nowrap; }
.cg-kopf .icon-knopf { margin-left:auto; width:26px; height:26px; } .cg-dauer + .icon-knopf { margin-left:0; }
.cg-nicht { color:var(--ampelrot); font-size:13px; margin-top:4px; }
.cg-haken { display:flex; flex-wrap:wrap; gap:4px 10px; margin-top:6px; font-size:13px; color:#333; } .cg-haken span { white-space:nowrap; }
.cg-text { font-size:14px; line-height:1.45; margin-top:6px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; white-space:pre-line; }
.cg-haken-liste { margin:8px 0 0; padding-left:18px; font-size:14px; }
.an-dialog { max-width:560px; }
.an-kopf { display:flex; align-items:center; gap:10px; } .an-kopf h2 { margin:0; flex:1; font-size:19px; }
.an-uhr { display:inline-flex; align-items:center; gap:6px; background:#e8f5ec; color:var(--gruen); font-weight:600; font-variant-numeric:tabular-nums; padding:4px 12px; border-radius:14px; font-size:14px; }
.an-uhr svg { width:15px; height:15px; }
.an-unter { margin:2px 0 14px; }
.an-jn { display:flex; gap:8px; } .an-jn button { flex:1; border-color:var(--linie); color:#444; }
.an-jn button[data-er="1"].an { background:#e8f5ec; border-color:var(--gruen); color:var(--gruen); }
.an-jn button[data-er="0"].an { background:#fdecec; border-color:var(--ampelrot); color:var(--ampelrot); }
.an-jetzt { align-self:flex-start; margin-top:12px; font-size:13px; }
.an-haken { display:grid; grid-template-columns:1fr 1fr; gap:6px 14px; }
.an-h { display:flex; flex-direction:column; gap:4px; } .an-h .haken { color:var(--schwarz); font-size:14px; } .an-h input:not([type=checkbox]), .an-h select { font-size:14px; }
@media (max-width:1100px) { .crm-seite3 { grid-template-columns:1fr; } .crm-seite3 > .crm-links, .crm-seite3 > .crm-rechts { overflow:visible; } .crm-chat { height:75vh; } }
@media (max-width:600px) { .an-haken { grid-template-columns:1fr; } }
.formular .an-h label.haken, .formular #an-haken > label.haken { flex-direction:row; align-items:center; justify-content:flex-start; gap:8px; margin:0; text-align:left; color:var(--schwarz); font-size:14px; }
.an-h label.haken input { width:16px; height:16px; margin:0; flex:none; }
/* Schlüsselfoto: Ziehen und ⌘V (3.47) */
.foto-ablage .schluessel-foto.leer { text-align:center; line-height:1.5; padding:10px; box-sizing:border-box; }
.foto-ablage.drueber .schluessel-foto { outline:2px dashed var(--rot); outline-offset:3px; } .foto-ablage.drueber .schluessel-foto.leer { color:var(--rot); background:#fff4f4; }
.foto-ablage.lädt { opacity:.6; pointer-events:none; }
/* Unterschrift erst nach „Unterschreiben“ in eigenem Fenster, größeres Feld (3.48) */
.unterschrift-fenster canvas.unterschrift { height:min(260px, 42vh); }
.ue-fuss #uohne { margin-left:auto; margin-right:8px; }
#ubuch svg { width:16px; height:16px; vertical-align:-3px; margin-right:4px; }

/* Feedback / Fehler (3.49, Knopf seit 3.50 in der Fußleiste zwischen Einstellungen und Profilbild) */
#feedbackknopf { position:relative; } #feedbackknopf b { position:absolute; top:3px; right:3px; min-width:8px; height:8px; padding:0; font-size:0; border-radius:50%; background:var(--rot); } #feedbackknopf b:empty { display:none; }
.fb-arten { display:flex; gap:6px; } .fb-arten button { flex:1; border-color:var(--linie); color:#444; }
.fb-arten button.an { background:var(--rot); border-color:var(--rot); color:#fff; }
.fb-bild { border:1px dashed #c8c8c8; border-radius:8px; padding:12px; text-align:center; color:var(--grau); font-size:13px; cursor:pointer; }
.fb-bild.drueber { border-color:var(--rot); background:#fff4f4; color:var(--rot); } .fb-bild img { max-width:100%; max-height:180px; border-radius:6px; display:block; margin:0 auto 6px; }
.fb-seite { font-size:12.5px; color:var(--grau); }
.fb-board { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; align-items:start; }
.fb-spalte { background:#f0f0f0; border-radius:10px; padding:10px; min-height:120px; } .fb-spalte.drueber { outline:2px dashed var(--rot); outline-offset:-2px; }
.fb-spalte h3 { margin:0 0 8px; font-size:14px; display:flex; gap:6px; align-items:center; } .fb-spalte h3 span { color:var(--grau); font-weight:400; }
.fb-karte { background:#fff; border:1px solid #e3e3e3; border-radius:8px; padding:9px 11px; margin-bottom:8px; cursor:pointer; }
.fb-karte:hover { border-color:#bbb; } .fb-karte[draggable=true] { cursor:grab; }
.fb-karte b { display:block; font-weight:500; font-size:14px; margin-top:4px; } .fb-karte .klein-text { margin-top:3px; }
.fb-karte img { width:100%; max-height:110px; object-fit:cover; border-radius:5px; margin-top:6px; display:block; }
.fb-art { font-size:11.5px; padding:1px 7px; border-radius:5px; display:inline-block; font-weight:500; }
.fb-art.fehler { background:#fde8e8; color:#a32020; } .fb-art.idee { background:#e6effb; color:#1d4f91; } .fb-art.frage { background:#fbf0d9; color:#7a4a00; }
.fb-antwort { border-left:3px solid var(--rot); background:#fafafa; padding:8px 12px; border-radius:0 6px 6px 0; margin-top:12px; font-size:14px; }
@media (max-width:900px) { .fb-board { grid-template-columns:1fr; } }
/* Beta-Umgebung (3.51) */
#beta-leiste { position:fixed; top:0; left:0; right:0; z-index:1000; background:#f59e0b; color:#111; font-size:12.5px; font-weight:600; text-align:center; padding:3px 8px; pointer-events:none; }
body.beta-umgebung aside.seite { top:22px; } body.beta-umgebung main { padding-top:48px; } body.beta-umgebung main.feste-seite { padding-top:48px; }

/* Anfrage-Seite 3.54 (nach Doms Entwurf): Jetzt zu tun | Steckbrief/Verknüpfung | Notiz-Chat */
button.dunkel { background:#111; border-color:#111; color:#fff; } button.dunkel:hover { background:#333; } button.dunkel svg { width:16px; height:16px; vertical-align:-3px; margin-right:4px; }
.crm-seite4 { flex:1; min-height:0; display:grid; grid-template-columns:minmax(0, 1.3fr) minmax(300px, 1fr) minmax(340px, 410px); gap:14px; margin-top:4px; }
.crm-seite4 > .crm-spalte { min-height:0; overflow-y:auto; padding:0 2px 12px; }
.crm-seite4 .akte-kasten { margin:0 0 12px; }
.an-jetzt { background:#fff; border:1.5px solid #111; border-radius:12px; padding:16px 20px; }
.an-jetzt-kopf { display:flex; align-items:center; justify-content:space-between; font-size:12.5px; letter-spacing:.6px; text-transform:uppercase; font-weight:600; color:#333; margin-bottom:6px; }
.an-seit { text-transform:none; letter-spacing:0; font-weight:600; font-size:12px; background:#e8f5ec; color:var(--gruen); padding:2px 9px; border-radius:10px; } .an-seit.alt { background:#fdecec; color:var(--ampelrot); }
.an-jetzt #schritte { border-bottom:1px solid #eee; padding-bottom:6px; margin-bottom:10px; }
.an-fortschritt { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--grau); margin:4px 0 6px; }
.an-fortschritt span { width:180px; height:5px; background:#eee; border-radius:3px; overflow:hidden; } .an-fortschritt i { display:block; height:100%; background:var(--gruen); border-radius:3px; }
.an-frage { display:grid; grid-template-columns:22px 150px minmax(0, 1fr) 28px; align-items:center; gap:10px; padding:9px 0; border-bottom:1px dashed #eee; min-height:44px; }
.an-frage:last-child { border-bottom:none; }
.an-frage input[type=checkbox] { width:20px; height:20px; accent-color:var(--gruen); margin:0; }
.an-frage .an-fname { font-weight:500; font-size:14.5px; } .an-frage.fertig .an-fname { font-weight:400; color:#555; }
.an-frage .an-fwert { font-size:14.5px; min-width:0; } .an-frage .an-fwert input, .an-frage .an-fwert select { max-width:360px; width:100%; }
.an-jetzt-fuss { display:flex; align-items:center; gap:8px; margin-top:14px; padding-top:12px; border-top:1px solid #eee; } .an-jetzt-fuss > span { flex:1; }
.an-weiter { border-color:var(--rot); color:var(--rot); font-weight:600; } .an-weiter.bereit { background:var(--rot); color:#fff; }
.an-reiter { display:flex; gap:4px; background:#e9e9e9; border-radius:9px; padding:3px; margin-bottom:12px; position:sticky; top:0; z-index:2; }
.an-reiter button { flex:1; border:none; background:none; padding:7px 10px; border-radius:7px; font-weight:500; color:#555; }
.an-reiter button.an { background:#fff; color:#111; box-shadow:0 1px 2px rgba(0,0,0,.08); } .an-reiter button span { background:#ddd; border-radius:8px; padding:0 6px; font-size:12px; margin-left:4px; }
.an-aktionen { display:flex; gap:6px; margin:0 0 10px; flex-wrap:wrap; } .an-aktionen > * { flex:1; text-align:center; padding:7px 10px; font-size:14px; } .an-aktionen svg { width:15px; height:15px; vertical-align:-2px; }
.fehlt { color:#aaa; font-style:italic; }
.an-ap { display:flex; align-items:flex-start; gap:8px; padding:8px 0; border-bottom:1px solid #f0f0f0; } .an-ap:last-child { border-bottom:none; } .an-ap > div { flex:1; min-width:0; }
@media (max-width:1400px) { .crm-seite4 { grid-template-columns:minmax(0, 1.15fr) minmax(260px, 1fr) minmax(300px, 350px); } .an-frage { grid-template-columns:22px 120px minmax(0, 1fr) 28px; } }
@media (max-width:1100px) { .crm-seite4 { grid-template-columns:1fr; } .crm-seite4 > .crm-spalte { overflow:visible; } .crm-seite4 > .crm-chat { height:75vh; } }
.crm-seite4 > * { min-width:0; }
@media (max-width:900px) { .an-jetzt { padding:14px; } .an-frage { grid-template-columns:22px minmax(0, 1fr) 28px; gap:6px 10px; }
  .an-frage .an-fname { grid-column:2; grid-row:1; } .an-frage > :last-child { grid-column:3; grid-row:1; } .an-frage .an-fwert { grid-column:2 / 4; grid-row:2; }
  .an-fortschritt span { width:90px; } .an-jetzt-fuss { flex-wrap:wrap; } .an-jetzt-fuss > span { flex-basis:100%; } }
/* Chat-Eingabe wie plancraft (3.55): Knöpfe quadratisch unten bündig, Werkzeugleiste mit Trenner, Ordner und Dokument */
.ch-eingabe { align-items:flex-end; }
.ch-eingabe > .pa-knopf { height:42px; min-height:42px; width:42px; flex:none; }
.ch-trenner { width:1px; height:16px; background:#d6d6d6; margin:0 4px; align-self:center; }
.ch-werkzeug button svg { width:16px; height:16px; }

/* ---------- Dokumente (3.56, nach plancraft) ---------- */
.dok-gruppe { font-size:12px; letter-spacing:.6px; text-transform:uppercase; color:#666; padding:14px 10px 6px; border-bottom:1px solid #eee; }
.dok-zeile { gap:10px; } .dok-zeile .icon-knopf { flex:none; }
.dok-marke { font-size:12.5px; padding:3px 10px; border-radius:12px; white-space:nowrap; font-weight:500; }
.dok-marke.entwurf { background:#dbeefb; color:#1b5e8c; } .dok-marke.fertig { background:#e3f4e8; color:#1f6b3a; } .dok-marke.storno { background:#f1f1f1; color:#888; text-decoration:line-through; }
.dok-arten { display:flex; flex-direction:column; gap:8px; } .dok-arten button { display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border:1px solid #e3e3e3; background:#fafafa; border-radius:8px; font-weight:600; text-align:left; }
.dok-arten button:hover { background:#f0f0f0; }
.dok-kopf { gap:10px; } .dok-stand { color:var(--gruen); display:flex; } .dok-stand.laeuft { color:#999; } .dok-stand.fehler { color:var(--ampelrot); }
#dok-anh-n:not(:empty) { font-size:12px; background:var(--rot); color:#fff; border-radius:8px; padding:0 6px; }
.dok-seite { flex:1; min-height:0; display:grid; grid-template-columns:230px minmax(0, 1fr) 380px; gap:12px; }
.dok-nav { overflow-y:auto; padding:10px 0; font-size:14px; } .dok-nav-kopf { font-weight:600; padding:4px 16px 10px; }
.dok-nav a { display:block; padding:5px 16px 5px 26px; color:#333; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .dok-nav a:hover { background:#f4f4f4; text-decoration:none; }
.dok-nav a.titel { font-weight:600; padding-left:16px; } .dok-nav-titel { font-size:12px; letter-spacing:.5px; text-transform:uppercase; color:#666; padding:12px 16px 4px; }
.dok-nav-summe { display:flex; justify-content:space-between; padding:12px 16px 0; margin-top:10px; border-top:1px solid #eee; font-size:13px; text-transform:uppercase; letter-spacing:.4px; }
.dok-blatt { overflow-y:auto; padding:0 0 40px; }
.dok-karte { padding:20px 28px; border-bottom:1px solid #f0f0f0; } .dok-karte h2 { font-size:17px; }
.dok-kopf-form { grid-template-columns:2fr 1fr; } .dok-empf { display:block; width:100%; text-align:left; background:#f7f7f7; border:1px solid #e5e5e5; border-radius:8px; padding:12px 14px; font-weight:400; color:#111; line-height:1.5; }
.dok-texte textarea, .dok-anrede { width:100%; box-sizing:border-box; border:1px solid transparent; background:none; font:inherit; font-size:15px; padding:6px 8px; border-radius:6px; resize:vertical; }
.dok-texte textarea:hover, .dok-anrede:hover { border-color:#e3e3e3; } .dok-texte textarea:focus, .dok-anrede:focus { border-color:#bbb; background:#fff; outline:none; }
.dok-tabelle { padding:0 12px; }
.dok-pos { display:grid; grid-template-columns:18px 44px 70px 60px minmax(0, 1fr) 90px 100px 32px; gap:8px; align-items:start; padding:12px 8px; border-radius:6px; cursor:pointer; font-size:14.5px; }
.dok-pos:hover { background:#fafafa; } .dok-pos.kopf { background:#efefef; font-weight:600; cursor:default; border-radius:0; margin:0 -12px; padding:12px 20px; }
.dok-pos .dok-menge, .dok-pos .dok-preis, .dok-pos .dok-gesamt { text-align:right; } .dok-pos.titel { font-size:15px; } .dok-pos.titel .dok-pos-titel { grid-column:3 / 8; }
.dok-pos.text .dok-pos-text, .dok-pos.bild > div { grid-column:3 / 8; color:#333; } .dok-pos.bild img { max-height:140px; border-radius:6px; display:block; }
.dok-pos.markiert { box-shadow:inset 3px 0 0 var(--rot); } .dok-pos.alternativ { color:#777; } .dok-pos.zieht { opacity:.4; }
.dok-griff { color:#c4c4c4; cursor:grab; font-size:12px; letter-spacing:-2px; user-select:none; } .dok-pos .icon-knopf { width:28px; height:28px; opacity:0; } .dok-pos:hover .icon-knopf { opacity:1; }
.dok-lang ul { margin:4px 0 0; padding-left:18px; } .dok-lang { color:#333; font-size:14px; line-height:1.45; } .dok-pos-bild { max-height:90px; border-radius:6px; margin-top:6px; display:block; }
.dok-einfuegen { display:grid; grid-template-columns:1fr auto auto auto 1fr; gap:6px; align-items:center; height:8px; overflow:hidden; opacity:0; transition:height .1s, opacity .1s; }
.dok-einfuegen span { height:1px; background:#ddd; } .dok-einfuegen button { font-size:12px; padding:2px 8px; border-color:#ddd; color:#555; }
.dok-tabelle:hover .dok-einfuegen:hover, .dok-einfuegen.drueber { height:28px; opacity:1; } .dok-einfuegen.drueber span { background:var(--rot); height:2px; }
.dok-leer { padding:30px 10px; color:#777; text-align:center; }
.dok-pos-edit { background:#f6f6f6; border-radius:8px; padding:14px 16px; margin:4px 0; display:flex; flex-direction:column; gap:10px; }
.dok-pos-edit label { display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--grau); }
.dok-edit-zeile { display:grid; grid-template-columns:44px 80px 80px minmax(0, 1fr) 100px 110px; gap:8px; align-items:center; } .dok-edit-zeile .r, .dok-kalk .r { text-align:right; } .dok-edit-zeile .fett { font-weight:600; }
.dok-edit-optionen { display:flex; flex-direction:column; gap:0; padding-left:132px; } .dok-edit-optionen > .dok-toggle { padding:10px 0; border-top:1px solid #e6e6e6; }
.dok-unter { margin:0 0 10px; } textarea.dok-unter { width:100%; box-sizing:border-box; }
.dok-toggle { display:flex !important; flex-direction:row !important; align-items:center; gap:10px; cursor:pointer; color:#111 !important; font-size:14px !important; font-weight:500; }
.dok-toggle input { display:none; } .dok-toggle span { width:36px; height:20px; border-radius:10px; background:#bbb; position:relative; flex:none; transition:background .15s; }
.dok-toggle span::after { content:''; position:absolute; left:2px; top:2px; width:16px; height:16px; border-radius:50%; background:#fff; transition:left .15s; } .dok-toggle input:checked + span { background:var(--gruen); } .dok-toggle input:checked + span::after { left:18px; }
.dok-edit-fuss { display:flex; justify-content:flex-end; }
.dok-kalk { background:#fff; border:1px solid #e6e6e6; border-radius:8px; padding:12px; } .dok-kalk-titel { font-weight:600; font-size:13.5px; margin-bottom:6px; }
.dok-kalk-k { display:grid; grid-template-columns:120px 70px 70px minmax(0, 1fr) 90px 90px 28px; gap:6px; align-items:center; margin-bottom:6px; font-size:13.5px; } .dok-kalk-k.kopf { color:var(--grau); font-size:12.5px; }
.dok-kalk-k input, .dok-kalk-k select, .dok-kalk-v input { font-size:13.5px; padding:5px 7px; } .dok-kalk-wert { background:#f2f2f2; border-radius:5px; padding:5px 7px; }
.dok-kalk-v { display:grid; grid-template-columns:110px 90px 14px 80px 16px 14px 100px; gap:6px; align-items:center; margin-bottom:5px; font-size:13.5px; } .dok-kalk-v.summe { border-top:1px solid #eee; padding-top:6px; }
.dok-summen { background:#f7f7f7; margin:10px 20px; border-radius:10px; border:none; display:flex; flex-direction:column; gap:10px; }
.dok-summe-zeilen { align-self:flex-end; width:300px; display:flex; flex-direction:column; gap:4px; } .dok-summe-zeilen > div { display:flex; justify-content:space-between; font-size:14.5px; }
.dok-summe-zeilen .brutto { border-top:1px solid #ddd; padding-top:6px; margin-top:2px; } .dok-summe-zeilen button { align-self:flex-end; margin-top:8px; }
.dok-schalter { background:#fff; border-radius:8px; padding:12px 14px; }
.dok-rechts { display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.dok-rechts-reiter { display:flex; gap:2px; padding:8px 8px 0; border-bottom:1px solid #eee; flex:none; } .dok-rechts-reiter button { border:none; background:none; padding:8px 10px; font-weight:600; color:#555; border-bottom:2px solid transparent; border-radius:0; }
.dok-rechts-reiter button.an { color:var(--rot); border-bottom-color:var(--rot); }
.dok-rechts-inhalt { flex:1; min-height:0; overflow-y:auto; padding:12px; display:flex; flex-direction:column; } .dok-rechts-inhalt > input { width:100%; box-sizing:border-box; }
.dok-baustein { display:flex; align-items:center; gap:10px; border:1px solid #e3e3e3; border-radius:8px; padding:10px 12px; margin-bottom:8px; cursor:pointer; background:#fff; } .dok-baustein:hover { border-color:#bbb; } .dok-baustein .rechts { font-size:18px; }
.dok-treffer { margin-top:8px; } .dok-treffer-z { display:flex; flex-direction:column; align-items:flex-start; width:100%; text-align:left; border:none; background:none; padding:8px 6px; border-bottom:1px solid #f0f0f0; border-radius:0; font-weight:400; }
.dok-treffer-z:hover { background:#f6f6f6; } .dok-treffer-z span { font-size:12.5px; color:var(--grau); }
.dok-bildwahl { display:grid; grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); gap:8px; } .dok-bildwahl.klein { grid-template-columns:repeat(3, 1fr); margin-bottom:10px; }
.dok-bildwahl button { padding:0; border:2px solid transparent; border-radius:8px; overflow:hidden; aspect-ratio:1; background:#f2f2f2; } .dok-bildwahl button:hover { border-color:var(--rot); } .dok-bildwahl img { width:100%; height:100%; object-fit:cover; display:block; }
.dok-chat { flex:1; min-height:0; margin:-12px; } .dok-chat .ch-titel { display:none; }
.dok-anh-gitter { display:grid; grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); gap:10px; max-height:55vh; overflow-y:auto; }
.dok-anh, .dok-anh-hoch { position:relative; border:2px solid #eee; border-radius:8px; aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; cursor:pointer; background:#f7f7f7; font-size:12px; }
.dok-anh-hoch { border-style:dashed; gap:6px; } .dok-anh.an { border-color:var(--gruen); } .dok-anh input { position:absolute; top:6px; left:6px; z-index:2; width:18px; height:18px; }
.dok-anh img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .dok-anh-name { position:absolute; left:0; right:0; bottom:0; background:rgba(255,255,255,.9); padding:3px 5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dok-vorschau { flex:1; min-height:0; overflow:auto; display:flex; flex-direction:column; align-items:center; gap:16px; padding:10px 0 40px; position:relative; }
.dok-vorschau canvas { box-shadow:0 2px 12px rgba(0,0,0,.12); background:#fff; } .dok-zoom { position:sticky; top:0; z-index:2; background:#333; color:#fff; font-size:13px; padding:3px 12px; border-radius:6px; }
@media (max-width:1300px) { .dok-seite { grid-template-columns:minmax(0, 1fr) 340px; } .dok-nav { display:none; } }
@media (max-width:1000px) { .dok-seite { grid-template-columns:1fr; } .dok-rechts { min-height:60vh; } .dok-edit-optionen { padding-left:0; } .dok-pos { grid-template-columns:14px 36px 54px 46px minmax(0, 1fr) 70px 80px 28px; font-size:13.5px; } }
.dok-baustein .rechts { margin-left:auto; color:#555; }
.dok-edit-optionen { padding-left:52px; } .dok-edit-zeile { grid-template-columns:40px 64px 66px minmax(0, 1fr) 88px 96px; }
.dok-pos-edit .dok-kalk label.haken { flex-direction:row; align-items:center; gap:6px; color:#111; font-size:13.5px; }
.dok-kalk-k { grid-template-columns:104px 58px 58px minmax(60px, 1fr) 76px 76px 26px; } .dok-kalk-v { grid-template-columns:96px 76px 12px 68px 14px 12px 86px; }
/* Dokumente 3.57: Einstellungen, Briefpapier, Editor-Feinschliff */
.dok-einst { max-width:1000px; } .dok-einst h1 { font-size:20px; margin:0 0 14px; }
.dok-einst-karte { background:#fff; border-radius:10px; padding:20px 22px; margin-bottom:14px; }
.dok-einst-kopf { display:flex; align-items:center; gap:12px; margin-bottom:12px; } .dok-einst-kopf h2 { margin:0; font-size:16px; } .dok-einst-kopf svg { color:#111; } .dok-einst-kopf .rechts { margin-left:auto; }
.dok-einst-werte { display:flex; flex-direction:column; gap:14px; padding-left:34px; } .dok-einst-werte.reihe { flex-direction:row; flex-wrap:wrap; gap:14px 40px; }
.dok-einst-werte span { display:block; font-size:11.5px; letter-spacing:.5px; text-transform:uppercase; color:#666; margin-bottom:3px; } .dok-einst-werte > div > div { font-size:15px; line-height:1.45; min-height:1.2em; }
.dok-einst-form { padding-left:34px; }
.dok-logo-kachel { display:inline-flex; border:1px solid #eee; border-radius:8px; padding:14px; } .dok-logo-kachel img { max-width:160px; max-height:90px; }
.dok-einst-info { display:flex; gap:10px; align-items:flex-start; background:#fff; border-radius:10px; padding:14px 18px; font-size:14px; margin-bottom:14px; } .dok-einst-info svg { flex:none; margin-top:1px; }
.dok-einst-info.blau { background:#eaf3fd; border:1px solid #9cc3ef; } .dok-einst-info.grau { background:#f4f4f4; }
.dok-zuschlag-form { display:flex; flex-direction:column; gap:10px; padding-left:34px; } .dok-zuschlag-form label { display:grid; grid-template-columns:200px 100px 20px; align-items:center; gap:8px; font-size:14.5px; } .dok-zuschlag-form input { text-align:right; }
.dok-einheiten { display:grid; grid-template-columns:repeat(3, 190px); gap:10px 0; padding-left:34px; font-size:14.5px; grid-auto-flow:column; grid-template-rows:repeat(10, auto); }
.dok-bp { display:grid; grid-template-columns:minmax(0, 1fr) minmax(320px, 520px); gap:16px; align-items:start; } .dok-bp-rechts { background:#fff; border-radius:10px; padding:12px; position:sticky; top:0; }
.dok-bp-vk { text-align:center; font-size:14px; margin-bottom:8px; } .dok-bp-vorschau { display:flex; justify-content:center; } .dok-bp-vorschau canvas { box-shadow:0 2px 10px rgba(0,0,0,.12); }
.dok-bp-warn { background:#fdf3d8; color:#9a6b00; border-radius:12px; padding:3px 12px; font-size:13px; font-weight:500; }
.dok-bp-hg { display:flex; flex-direction:column; align-items:center; gap:6px; font-size:13px; color:#555; }
.dok-bp-hg-bild { position:relative; width:150px; height:212px; border:1px solid #e3e3e3; border-radius:6px; overflow:hidden; background:#fafafa; display:flex; align-items:center; justify-content:center; }
.dok-bp-hg-bild img, .dok-bp-hg-bild canvas { width:100%; height:100%; object-fit:cover; } .dok-bp-hg-bild .icon-knopf { position:absolute; top:6px; right:6px; background:#fff; }
.dok-bp-hg-bild label { display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer; color:#555; border:1.5px dashed #ccc; inset:8px; position:absolute; justify-content:center; border-radius:6px; }
.dok-beta { background:#dbeefb; color:#1b5e8c; font-size:11.5px; border-radius:8px; padding:1px 7px; }
.dok-nav-spalte { display:flex; flex-direction:column; gap:8px; min-height:0; } .dok-nav-spalte .dok-nav { flex:1; } .dok-nav-knopf { align-self:flex-start; }
.dok-seite.nav-zu { grid-template-columns:44px minmax(0, 1fr) 380px; } .dok-seite.nav-zu .dok-nav { display:none; }
.dok-nav a.gross { padding-left:16px; text-transform:uppercase; font-size:13px; letter-spacing:.4px; }
button.dok-nav-titel { display:flex; align-items:center; gap:6px; border:none; background:none; width:100%; text-align:left; font-weight:500; } button.dok-nav-titel.zu svg { transform:rotate(-90deg); }
.dok-empf-box { position:relative; } .dok-empf-weg { position:absolute; right:10px; top:50%; transform:translateY(-50%); color:var(--rot); }
.dok-beschr-kopf { display:flex; align-items:center; gap:4px; } .dok-beschr-kopf .icon-knopf { width:24px; height:24px; opacity:1 !important; }
.dok-pos.zwischensumme { cursor:default; font-size:14px; padding-top:4px; } .dok-pos.zwischensumme:hover { background:none; }
.dok-edit-fuss { gap:8px; }
.dok-lang-edit { border:1px solid #cfd8e6; border-radius:6px; background:#fff; } .dok-lang-edit:focus-within { border-color:#5b9be6; }
.dok-lang-werkzeug { display:flex; gap:2px; padding:4px; border-bottom:1px solid #eee; } .dok-lang-werkzeug button { border:none; background:none; padding:4px 6px; border-radius:5px; } .dok-lang-werkzeug button:hover { background:#f0f0f0; }
.dok-lang-feld { min-height:70px; padding:8px 10px; font-size:14px; line-height:1.5; outline:none; color:#111; } .dok-lang-feld ul { margin:0; padding-left:20px; }
.dok-aufmass { background:#fff; border:1px solid #e6e6e6; border-radius:8px; padding:10px; } .dok-aufmass-z { display:grid; grid-template-columns:minmax(0, 1fr) 160px 80px 28px; gap:6px; align-items:center; margin-bottom:6px; } .dok-aufmass .r { text-align:right; }
.dok-rechts-reiter button { display:flex; align-items:center; gap:6px; font-size:14px; } .dok-rechts-reiter button svg { width:17px; height:17px; }
.dok-suchfeld { display:flex; align-items:center; gap:8px; border:1.5px solid #c9d6ea; border-radius:8px; padding:0 10px; } .dok-suchfeld:focus-within { border-color:#4a8be0; } .dok-suchfeld input { border:none; outline:none !important; flex:1; padding:9px 0; }
.dok-such-reiter { display:flex; gap:2px; border-bottom:1px solid #eee; margin:10px 0 4px; } .dok-such-reiter button { border:none; background:none; border-bottom:2px solid transparent; border-radius:0; padding:8px 10px; font-weight:500; color:#555; } .dok-such-reiter button.an { color:#111; border-bottom-color:#111; }
.dok-ab-ordner { display:flex; align-items:center; gap:12px; width:100%; border:none; border-bottom:1px solid #f0f0f0; background:none; padding:12px 6px; border-radius:0; font-weight:400; text-align:left; } .dok-ab-ordner:hover { background:#f7f7f7; }
.dok-ab-ic { width:34px; height:34px; border-radius:8px; background:#f2f2f2; display:flex; align-items:center; justify-content:center; } .dok-ab-zurueck { display:flex; align-items:center; gap:6px; border:none; background:none; padding:4px 0 10px; font-weight:600; }
.dok-best-z { display:grid; grid-template-columns:22px minmax(0, 1fr) 80px 50px; gap:8px; align-items:center; padding:8px 4px; border-bottom:1px solid #f0f0f0; font-size:14px; } .dok-best-z .r { text-align:right; }
.dok-frist { font-size:14px; padding-bottom:10px; margin-bottom:10px; border-bottom:1px solid #eee; }
.tabelle .r, .tabelle th.r { text-align:right; }