:root {
  --grund: #eef0f2;
  --flaeche: #ffffff;
  --linie: #d5d9de;
  --text: #1d2329;
  --leise: #5f6b76;
  /* Firmenfarben – hier zentral anpassen, sobald das EM-Logo da ist */
  --kopf: #2e3338;          /* Anthrazit */
  --kopf-feld: #3a4046;
  --kopf-rand: #575e65;
  --akzent: #3a6d8c;        /* Stahlblau */
  --akzent-dunkel: #2d5770;
  --akzent-hell: #e1eaf1;
  --logo: #5b636b;
  --blau: #3a6d8c;
  --warnung: #b58100;
  --gefahr: #b3261e;
  --chat-breite: 380px;
  --links-breite: 320px;
  --annahme: #fff4d6;
  --annahme-text: #7a5600;
  --kopf-hoehe: 52px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  color: var(--text);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--grund); }
body { display: flex; flex-direction: column; overflow: hidden; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

/* ---------- Kopfzeile ---------- */
.kopf {
  height: var(--kopf-hoehe);
  display: flex; align-items: center; gap: 10px;
  padding: 0 12px;
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--kopf); color: #fff;
  flex: none;
}
.marke { font-weight: 700; letter-spacing: .02em; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.logo {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; border-radius: 6px;
  background: var(--logo); color: #fff; font-size: 13px; font-weight: 800;
}
.projektname {
  min-width: 0; flex: 0 1 320px;
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  padding: 6px 8px; color: #fff;
}
.projektname:hover:not(:disabled), .projektname:focus { border-color: var(--kopf-rand); outline: none; background: var(--kopf-feld); }
.kopf select { background: var(--kopf-feld); border: 1px solid var(--kopf-rand); border-radius: 6px; padding: 5px 6px; color: #fff; }
.luecke { flex: 1; }
.kopf .symbol, .kopf .text {
  background: transparent; border: 1px solid var(--kopf-rand); border-radius: 6px;
  color: #fff; min-height: 36px; padding: 0 10px;
}
.kopf .symbol { min-width: 40px; font-size: 18px; }
.kosten {
  font-size: 13px; padding: 5px 10px; border-radius: 999px;
  background: var(--kopf-feld); border: 1px solid var(--kopf-rand); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.kosten.warnung { background: #5a4600; border-color: var(--warnung); }
.kosten.gesperrt { background: #5c1612; border-color: var(--gefahr); }

/* ---------- Arbeitsfläche ---------- */
.arbeitsflaeche {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: var(--links-breite) 1fr 6px var(--chat-breite);
  position: relative;
}
.arbeitsflaeche.ohne-projekte { grid-template-columns: 0 1fr 6px var(--chat-breite); }
.arbeitsflaeche.ohne-chat { grid-template-columns: var(--links-breite) 1fr 0 0; }
.arbeitsflaeche.ohne-projekte.ohne-chat { grid-template-columns: 0 1fr 0 0; }
.ohne-projekte #projekte, .ohne-chat #chat, .ohne-chat #ziehgriff { display: none; }

.seite { background: var(--flaeche); min-height: 0; display: flex; flex-direction: column; }
.links { border-right: 1px solid var(--linie); }

.neues-projekt { display: flex; gap: 6px; padding: 10px; border-bottom: 1px solid var(--linie); }
.neues-projekt input { flex: 1; min-width: 0; padding: 8px; border: 1px solid var(--linie); border-radius: 6px; }
.neues-projekt button, .eingabe button {
  background: var(--akzent); color: #fff; border: 0; border-radius: 6px; padding: 0 12px; min-height: 40px;
}
.neues-projekt button:hover, .eingabe button:hover:not(:disabled) { background: var(--akzent-dunkel); }

.projektliste { list-style: none; margin: 0; padding: 6px; }
.projektliste li button {
  width: 100%; text-align: left; background: none; border: 0; border-radius: 6px;
  padding: 10px; display: flex; flex-direction: column; gap: 2px;
}
.projektliste li button:hover { background: var(--grund); }
.projektliste li.aktiv button { background: var(--akzent-hell); }
.projektliste .zeile2 { font-size: 12px; color: var(--leise); display: flex; gap: 6px; align-items: center; }
.punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--blau); display: inline-block; }
.punkt.wartet_auf_kunde { background: var(--warnung); }
.punkt.abgeschlossen { background: #3b8a4a; }
.punkt.aufnahme { background: #9aa3ab; }

/* ---------- Reiter links ---------- */
.reiter { display: flex; border-bottom: 1px solid var(--linie); flex: none; }
.reiter button {
  flex: 1; background: none; border: 0; border-bottom: 3px solid transparent;
  padding: 10px 4px; min-height: 44px; color: var(--leise); position: relative;
}
.reiter button.aktiv { color: var(--text); border-bottom-color: var(--akzent); font-weight: 600; }
.reiter button:disabled { opacity: .4; cursor: default; }
.reiter-inhalt { flex: 1; min-height: 0; overflow-y: auto; }
.neu-punkt { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--akzent); }
.zahl-klein { font-size: 12px; color: var(--leise); }
.leise { color: var(--leise); }
.klein { font-size: 13px; }

/* ---------- Steckbrief ---------- */
.steckbrief { padding: 12px 14px 24px; font-size: 14px; line-height: 1.45; }
.steckbrief h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--leise); margin: 16px 0 6px; }
.steckbrief h3:first-child { margin-top: 4px; }
.steckbrief p { margin: 0 0 4px; }
.steckbrief .leer-wert { color: var(--leise); font-style: italic; }
.steckbrief dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0; }
.steckbrief dt { color: var(--leise); }
.steckbrief dd { margin: 0; }
.steckbrief table { width: 100%; border-collapse: collapse; }
.steckbrief td { padding: 4px 4px 4px 0; border-top: 1px solid var(--linie); vertical-align: top; }
.steckbrief td.wert { font-weight: 600; white-space: nowrap; }
.herkunft { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 999px; background: var(--grund); color: var(--leise); white-space: nowrap; }
.herkunft.annahme, .herkunft.foto { background: var(--annahme); color: var(--annahme-text); }
.steckbrief ul { margin: 0; padding-left: 18px; }
.steckbrief li.annahme { background: var(--annahme); color: var(--annahme-text); border-radius: 4px; padding: 1px 4px; margin-bottom: 2px; list-style-position: inside; margin-left: -18px; }
.steckbrief-fuss { margin-top: 18px; padding-top: 10px; border-top: 1px solid var(--linie); display: flex; flex-direction: column; gap: 8px; }
.steckbrief-fuss label { display: flex; gap: 8px; align-items: center; font-weight: 600; }
.steckbrief-fuss input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--akzent); }
.steckbrief-fuss select { padding: 4px; border: 1px solid var(--linie); border-radius: 6px; background: var(--flaeche); }
.alte-fassung { background: var(--annahme); color: var(--annahme-text); padding: 6px 8px; border-radius: 6px; font-size: 13px; }

/* ---------- Unterlagen ---------- */
.unterlage-dazu { margin: 12px 12px 4px; width: calc(100% - 24px); min-height: 44px; border: 1px dashed var(--akzent); color: var(--akzent-dunkel); background: var(--akzent-hell); border-radius: 8px; }
#reiter-unterlagen > p { margin: 0 12px 8px; }
.unterlagen-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; padding: 0 12px 16px; }
.unterlage { border: 1px solid var(--linie); border-radius: 8px; background: var(--flaeche); padding: 0; overflow: hidden; text-align: left; display: flex; flex-direction: column; }
.unterlage img, .unterlage .pdf-symbol { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--grund); }
.unterlage .pdf-symbol { display: grid; place-items: center; font-weight: 700; color: var(--gefahr); font-size: 18px; }
.unterlage span { font-size: 12px; padding: 4px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.anhaenge { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 12px; }
.anhang-chip { display: flex; align-items: center; gap: 6px; background: var(--grund); border: 1px solid var(--linie); border-radius: 8px; padding: 3px 4px 3px 3px; font-size: 13px; max-width: 100%; }
.anhang-chip img { width: 32px; height: 32px; object-fit: cover; border-radius: 4px; }
.anhang-chip .pdf-klein { width: 32px; height: 32px; display: grid; place-items: center; font-size: 10px; font-weight: 700; color: var(--gefahr); background: var(--flaeche); border-radius: 4px; }
.anhang-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
.anhang-chip.laedt { opacity: .6; }
.anhang-chip button { border: 0; background: none; min-width: 28px; min-height: 28px; border-radius: 6px; }

.grossansicht { position: fixed; inset: 0; z-index: 50; background: rgba(20, 23, 26, .92); display: flex; flex-direction: column; padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); }
.gross-kopf { display: flex; align-items: center; gap: 10px; color: #fff; padding: 8px 12px; }
.gross-kopf span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gross-kopf button { background: none; border: 1px solid #666; color: #fff; border-radius: 6px; min-width: 44px; min-height: 40px; }
.grossansicht img { flex: 1; min-height: 0; object-fit: contain; width: 100%; touch-action: pinch-zoom; }
.ablegen-hinweis { position: fixed; inset: 12px; z-index: 40; border: 3px dashed var(--akzent); border-radius: 16px; background: rgba(225, 234, 241, .85); display: grid; place-items: center; font-size: 18px; color: var(--akzent-dunkel); pointer-events: none; }

/* ---------- 3D-Ansicht ---------- */
.mitte { position: relative; min-width: 0; overflow: hidden; background: linear-gradient(#f7f8fa, #dfe3e7); }
.leinwand { position: absolute; inset: 0; touch-action: none; }
.leinwand canvas { display: block; transition: filter .35s ease; }
.mitte.rechnet .leinwand canvas { filter: blur(7px) saturate(.6); }
.rechnet-hinweis {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: rgba(46, 51, 56, .85); color: #fff; padding: 10px 18px; border-radius: 999px;
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.mitte.rechnet .rechnet-hinweis { opacity: 1; }
.leer { position: absolute; inset: 0; display: grid; place-items: center; color: var(--leise); pointer-events: none; text-align: center; padding: 24px; }
.leer p { max-width: 380px; line-height: 1.5; }

.auswahl-info {
  position: absolute; left: 12px; top: 12px; max-width: calc(100% - 24px);
  background: rgba(255, 255, 255, .95); border: 1px solid var(--linie); border-left: 4px solid var(--akzent);
  border-radius: 6px; padding: 8px 12px; font-size: 14px;
}
.ansichtsknoepfe {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: flex; gap: 4px; background: rgba(255, 255, 255, .92);
  border: 1px solid var(--linie); border-radius: 10px; padding: 4px;
  max-width: calc(100% - 24px); overflow-x: auto;
}
.ansichtsknoepfe button {
  border: 0; background: none; border-radius: 7px; min-height: 40px; min-width: 52px; padding: 0 10px;
}
.ansichtsknoepfe button:hover { background: var(--grund); }

.kennwerte {
  position: absolute; right: 12px; top: 12px; width: min(320px, calc(100% - 24px));
  background: rgba(255, 255, 255, .95); border: 1px solid var(--linie); border-radius: 8px;
  font-size: 13px; max-height: calc(100% - 90px); overflow-y: auto;
}
.kennwerte summary { padding: 8px 12px; cursor: pointer; font-weight: 600; }
.kennwerte dl { display: grid; grid-template-columns: auto auto; gap: 3px 12px; margin: 0 12px 10px; }
.kennwerte dt { color: var(--leise); }
.kennwerte dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.kennwerte table { width: calc(100% - 24px); margin: 0 12px 12px; border-collapse: collapse; }
.kennwerte th, .kennwerte td { text-align: left; padding: 3px 4px; border-top: 1px solid var(--linie); }
.kennwerte td.zahl { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Chat ---------- */
.ziehgriff { cursor: col-resize; background: var(--linie); touch-action: none; }
.ziehgriff:hover { background: var(--akzent); }
.nachrichten { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.nachricht { padding: 9px 12px; border-radius: 10px; line-height: 1.45; max-width: 92%; overflow-wrap: anywhere; }
.nachricht.nutzer { align-self: flex-end; background: var(--akzent-hell); }
.nachricht.ki { align-self: flex-start; background: var(--grund); }
.nachricht.fehler { align-self: stretch; background: #fde8e6; color: var(--gefahr); }
.nachricht.hinweis { align-self: center; font-size: 13px; color: var(--leise); background: none; padding: 2px; }
.nachricht p { margin: 0 0 6px; }
.nachricht p:last-child { margin: 0; }
.nachricht ul, .nachricht ol { margin: 2px 0 8px; padding-left: 22px; }
.nachricht li { margin-bottom: 2px; }
.nachricht.ki.schreibt::after { content: "▍"; color: var(--akzent); animation: blinken 1s steps(1) infinite; }
@keyframes blinken { 50% { opacity: 0; } }

.auswahl-chip {
  margin: 0 12px; padding: 6px 6px 6px 10px; border-radius: 8px; background: var(--akzent-hell);
  font-size: 13px; display: flex; align-items: center; gap: 6px;
}
.auswahl-chip span { flex: 1; }
.auswahl-chip button { border: 0; background: none; min-width: 32px; min-height: 32px; border-radius: 6px; }
.eingabe { display: flex; gap: 6px; padding: 10px 12px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
.eingabe textarea {
  flex: 1; resize: none; border: 1px solid var(--linie); border-radius: 8px; padding: 8px; min-width: 0;
}
.eingabe button:disabled { opacity: .5; cursor: default; }
.eingabe-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.eingabe-knoepfe button { min-height: 40px; }
.eingabe-knoepfe #senden { grid-column: 1 / -1; }
.eingabe .mikrofon, .eingabe .anhang {
  background: var(--flaeche); color: var(--text); border: 1px solid var(--linie);
  display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 48px;
}
.eingabe .mikrofon:hover:not(:disabled), .eingabe .anhang:hover:not(:disabled) { background: var(--grund); }
.eingabe .mikrofon.nimmt, .eingabe .mikrofon.nimmt:hover:not(:disabled) { background: var(--gefahr); border-color: var(--gefahr); color: #fff; animation: pulsieren 1.2s ease-in-out infinite; }
.eingabe .mikrofon.erkennt, .eingabe .mikrofon.erkennt:hover:not(:disabled) { background: var(--akzent-hell); color: var(--akzent-dunkel); cursor: progress; }
.mikrofon-zeit { font-size: 13px; font-variant-numeric: tabular-nums; }
@keyframes pulsieren { 50% { box-shadow: 0 0 0 6px rgba(179, 38, 30, .2); } }

/* ---------- Schmale Bildschirme (Tablet hochkant, Handy) ---------- */
@media (max-width: 900px) {
  .arbeitsflaeche, .arbeitsflaeche.ohne-projekte, .arbeitsflaeche.ohne-chat,
  .arbeitsflaeche.ohne-projekte.ohne-chat { grid-template-columns: 1fr; }
  .mitte { grid-column: 1; grid-row: 1; }
  .ziehgriff { display: none; }
  .seite {
    position: absolute; top: 0; bottom: 0; z-index: 5;
    box-shadow: 0 0 24px rgba(0, 0, 0, .2);
  }
  .links { left: 0; width: min(360px, 92vw); }
  .rechts { right: 0; width: min(420px, 100vw); }
  .projektname { flex-basis: 140px; }
  .marke { display: none; }
  #projektstatus { display: none; }
}

/* ---------- Anmeldung ---------- */
body.anmelden { display: grid; place-items: center; padding: 16px; background: var(--kopf); }
.anmeldekarte {
  width: min(360px, 100%); background: var(--flaeche); border-radius: 12px; padding: 28px;
  display: flex; flex-direction: column; gap: 10px;
}
.anmeldekarte .marke { font-size: 20px; }
.unterzeile { margin: 0 0 10px; color: var(--leise); }
.anmeldekarte input { padding: 10px; border: 1px solid var(--linie); border-radius: 6px; }
.anmeldekarte button { background: var(--akzent); color: #fff; border: 0; border-radius: 6px; min-height: 44px; }
.meldung { color: var(--gefahr); margin: 4px 0 0; }