/* Coldmailing-CRM, Gestaltung.
   Leitgedanke: Das hier ist ein Werkzeug, in dem taeglich lange gearbeitet wird,
   keine Seite, die beeindrucken soll. Vorbild sind gute Mail-Programme, nicht
   Marketing-Layouts: dichte Liste links, Vorgang rechts, ruhige Flaechen,
   ein einziger Akzent. Jede Regel hier hat einen Grund, der danebensteht. */

:root {
  /* Schrift: bewusst der System-Stack. Ein Arbeitswerkzeug soll sich wie Teil des
     Systems anfuehlen, laedt keine Fremdschrift nach und faellt damit auch nicht
     in die ueblichen Slop-Schriften (Inter, Geist, Space Grotesk). */
  --schrift: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --schrift-zahl: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Flaechen: drei Ebenen, mehr braucht es nicht. */
  --grund: #fbfaf9;
  --flaeche: #ffffff;
  --flaeche-still: #f4f2f0;
  --rand: #e5e1dd;
  --rand-stark: #d3cdc7;

  --text: #1c1a18;
  --text-still: #6c6660;
  --text-leise: #97918a;

  /* Ein Akzent, warmes Tiefblau. Nicht das Tuerkis von marmodify-dental,
     damit man auf den ersten Blick sieht, dass man woanders ist. */
  --akzent: #2f4c7a;
  --akzent-hell: #eaeff7;
  --akzent-rand: #c3d0e4;

  --dringend: #a8442a;      /* wir sind am Zug */
  --dringend-hell: #fbeee9;
  --ruht: #7a6a3f;          /* zurueckgestellt */
  --ruht-hell: #f7f1e2;

  --radius: 10px;
  --radius-klein: 7px;

  /* Eigene Kurven: die eingebauten CSS-Kurven sind zu schwach.
     ⛔ Nie ease-in fuer Oberflaechen, das wirkt traege. */
  --aus: cubic-bezier(0.23, 1, 0.32, 1);
  --ein-aus: cubic-bezier(0.77, 0, 0.175, 1);

  --schatten: 0 1px 2px rgba(28, 26, 24, 0.05), 0 4px 12px rgba(28, 26, 24, 0.04);
  --schatten-hoch: 0 2px 6px rgba(28, 26, 24, 0.08), 0 12px 32px rgba(28, 26, 24, 0.10);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    --grund: #16151a;
    --flaeche: #1e1d23;
    --flaeche-still: #26252c;
    --rand: #322f39;
    --rand-stark: #433f4b;
    --text: #ece9e6;
    --text-still: #a5a09b;
    --text-leise: #756f6a;
    --akzent: #8fadd8;
    --akzent-hell: #232838;
    --akzent-rand: #3a4358;
    --dringend: #e3947a;
    --dringend-hell: #2f2220;
    --ruht: #cbb578;
    --ruht-hell: #2b2620;
    --schatten: 0 1px 2px rgba(0,0,0,0.30), 0 4px 12px rgba(0,0,0,0.24);
    --schatten-hoch: 0 2px 6px rgba(0,0,0,0.40), 0 12px 32px rgba(0,0,0,0.34);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--schrift);
  background: var(--grund);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  height: 100vh;
  overflow: hidden;
  /* Imperfektions-Ebene: eine Spur Korn, damit die Flaeche nicht als
     Standard-Leinwand liest. Sehr schwach, sonst stoert es beim Lesen. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23k)' opacity='0.035'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ Kopf */

.kopf {
  display: flex; align-items: center; gap: 14px;
  padding: 0 18px; height: 52px;
  background: var(--flaeche);
  border-bottom: 1px solid var(--rand);
}
.marke {
  font-size: 13px; font-weight: 650; letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
}
.marke .punkt {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--akzent);
  /* Der eine gestaltete Moment: der Punkt atmet, solange frisch geladen wird.
     Sichtbares Lebenszeichen statt eines Spinners irgendwo im Nichts. */
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--akzent) 55%, transparent);
}
body.laedt .marke .punkt { animation: atmen 1.4s var(--ein-aus) infinite; }
@keyframes atmen {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--akzent) 55%, transparent); }
  70%  { box-shadow: 0 0 0 7px color-mix(in srgb, var(--akzent) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--akzent) 0%, transparent); }
}

.suche {
  margin-left: auto;
  width: 210px; padding: 6px 10px;
  font: inherit; color: var(--text);
  background: var(--flaeche-still);
  border: 1px solid transparent; border-radius: var(--radius-klein);
  transition: border-color 160ms var(--aus), background 160ms var(--aus);
}
.suche:focus { outline: none; border-color: var(--akzent-rand); background: var(--flaeche); }
.suche::placeholder { color: var(--text-leise); }

/* --------------------------------------------------------------- Reiter */

.reiter {
  display: flex; align-items: stretch; gap: 2px;
  padding: 0 12px;
  background: var(--flaeche);
  border-bottom: 1px solid var(--rand);
  overflow-x: auto; scrollbar-width: none;
}
.reiter::-webkit-scrollbar { display: none; }

.reiter button {
  position: relative;
  display: flex; align-items: center; gap: 7px;
  padding: 9px 12px 10px;
  font: inherit; font-size: 13px; font-weight: 500;
  color: var(--text-still);
  background: none; border: none; cursor: pointer;
  white-space: nowrap;
  transition: color 160ms var(--aus);
}
.reiter button:hover { color: var(--text); }
.reiter button.aktiv { color: var(--text); font-weight: 600; }
.reiter button.aktiv::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px;
  height: 2px; background: var(--akzent); border-radius: 2px 2px 0 0;
}
/* Die Trennung, die Moritz verlangt hat: was Arbeit ist, steht links; die beiden
   Archive stehen rechts und werden ruhiger gezeigt, damit sie nicht mitziehen. */
.reiter .archiv { margin-left: auto; }
.reiter .archiv + .archiv { margin-left: 0; }
.reiter .archiv button { color: var(--text-leise); font-weight: 450; }
.reiter .archiv button.aktiv { color: var(--text); }

.zahl {
  font-family: var(--schrift-zahl); font-size: 11px; font-weight: 600;
  padding: 1px 6px; border-radius: 20px;
  background: var(--flaeche-still); color: var(--text-still);
  min-width: 20px; text-align: center;
}
.reiter button.aktiv .zahl { background: var(--akzent-hell); color: var(--akzent); }
.zahl.wach { background: var(--dringend-hell); color: var(--dringend); }

/* -------------------------------------------------------------- Aufbau */

.raum { display: grid; grid-template-columns: minmax(380px, 520px) 1fr; height: calc(100vh - 105px); }

.spalte-liste { border-right: 1px solid var(--rand); overflow-y: auto; background: var(--grund); }
.spalte-vorgang { overflow-y: auto; background: var(--flaeche); }

.listenkopf {
  position: sticky; top: 0; z-index: 2;
  padding: 9px 16px; font-size: 12px; color: var(--text-leise);
  background: color-mix(in srgb, var(--grund) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rand);
}

/* --------------------------------------------------------------- Zeile */

.zeile {
  position: relative;
  display: block; width: 100%; text-align: left;
  padding: 11px 14px 11px 16px;
  background: none; border: none; border-bottom: 1px solid var(--rand);
  cursor: pointer; font: inherit; color: inherit;
  transition: background 140ms var(--aus);
}
.zeile:hover { background: var(--flaeche); }
.zeile.gewaehlt { background: var(--flaeche); }
.zeile.gewaehlt::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--akzent);
}
/* Wir sind am Zug: der einzige Zustand, der von allein auffallen muss. */
.zeile.wir .praxis::after {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 7px;
  border-radius: 50%; background: var(--dringend); vertical-align: 1px;
}

.zeile-oben { display: flex; align-items: baseline; gap: 8px; }
.praxis { font-weight: 600; font-size: 13.5px; letter-spacing: -0.005em; flex: 1; min-width: 0;
          overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wann { font-family: var(--schrift-zahl); font-size: 11px; color: var(--text-leise); white-space: nowrap; }

.zeile-mitte { display: flex; align-items: center; gap: 6px; margin-top: 3px; flex-wrap: wrap; }
.stelle { font-size: 12px; color: var(--text-still); overflow: hidden;
          text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

.wortlaut {
  margin-top: 4px; font-size: 12.5px; color: var(--text-still); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Merkmal statt Statuswort: was der Vorgang WILL, steht auf der Zeile.
   Punkt F3 des Pflichtenhefts: "Antwort" und "positiv" allein sind nicht arbeitsfaehig. */
.merkmal {
  font-size: 11px; font-weight: 550; padding: 1.5px 7px; border-radius: 20px;
  background: var(--flaeche-still); color: var(--text-still);
  border: 1px solid var(--rand); white-space: nowrap;
}
.merkmal.ruf   { background: var(--akzent-hell); color: var(--akzent); border-color: var(--akzent-rand); }
.merkmal.warm  { background: var(--dringend-hell); color: var(--dringend); border-color: color-mix(in srgb, var(--dringend) 25%, transparent); }
.merkmal.ruht  { background: var(--ruht-hell); color: var(--ruht); border-color: color-mix(in srgb, var(--ruht) 25%, transparent); }
.merkmal.entwurf-da { background: var(--akzent-hell); color: var(--akzent); border-color: var(--akzent-rand); }

/* Der Einordnungsknopf sitzt NEBEN dem Vorgang in der Liste, nicht in einem
   Untermenue. Punkt G4, woertlich: "ein simpler Button ... neben dem Lead". */
.zeile-knoepfe {
  position: absolute; right: 10px; bottom: 9px;
  display: flex; gap: 4px;
  opacity: 0; transform: translateY(2px);
  transition: opacity 160ms var(--aus), transform 160ms var(--aus);
}
.zeile:hover .zeile-knoepfe, .zeile.gewaehlt .zeile-knoepfe { opacity: 1; transform: none; }
@media (hover: none) { .zeile-knoepfe { opacity: 1; transform: none; } }

.knopf {
  font: inherit; font-size: 11.5px; font-weight: 550;
  padding: 3px 9px; border-radius: var(--radius-klein);
  background: var(--flaeche); color: var(--text-still);
  border: 1px solid var(--rand-stark); cursor: pointer;
  transition: background 140ms var(--aus), color 140ms var(--aus),
              border-color 140ms var(--aus), transform 160ms var(--aus);
}
.knopf:hover { background: var(--flaeche-still); color: var(--text); }
/* Jedes drueckbare Element bekommt eine Antwort auf den Druck, sonst wirkt es tot. */
.knopf:active { transform: scale(0.97); }
.knopf.stark { background: var(--akzent); color: #fff; border-color: transparent; }
.knopf.stark:hover { background: color-mix(in srgb, var(--akzent) 88%, #000); color: #fff; }

/* ------------------------------------------------------------- Vorgang */

.leer { padding: 60px 30px; text-align: center; color: var(--text-leise); font-size: 13px; }

.vorgangskopf { padding: 18px 22px 14px; border-bottom: 1px solid var(--rand); }
.vorgangskopf h1 { margin: 0 0 3px; font-size: 18px; font-weight: 650; letter-spacing: -0.015em; }
.vorgangskopf .unter { font-size: 12.5px; color: var(--text-still); }
.vorgangskopf .kontakt { margin-top: 8px; display: flex; gap: 14px; flex-wrap: wrap;
                         font-size: 12px; color: var(--text-still); }
.vorgangskopf .kontakt a { color: var(--akzent); text-decoration: none; }
.vorgangskopf .kontakt a:hover { text-decoration: underline; }

.einordnung { display: flex; gap: 5px; flex-wrap: wrap; padding: 12px 22px;
              border-bottom: 1px solid var(--rand); background: var(--flaeche-still); }
.einordnung .titel { width: 100%; font-size: 11px; text-transform: none;
                     color: var(--text-leise); margin-bottom: 2px; }
.knopf.gewaehlt { background: var(--akzent); color: #fff; border-color: transparent; }

.verlauf { padding: 16px 22px; display: flex; flex-direction: column; gap: 12px; }
.nachricht { border: 1px solid var(--rand); border-radius: var(--radius); overflow: hidden; }
.nachricht.rein { border-color: var(--akzent-rand); }
.nachricht-kopf { display: flex; align-items: baseline; gap: 8px; padding: 7px 12px;
                  background: var(--flaeche-still); font-size: 11.5px; color: var(--text-still); }
.nachricht.rein .nachricht-kopf { background: var(--akzent-hell); color: var(--akzent); }
.nachricht-kopf .wer { font-weight: 600; }
.nachricht-kopf .zeit { margin-left: auto; font-family: var(--schrift-zahl); }
.nachricht-text { padding: 11px 13px; font-size: 13px; white-space: pre-wrap;
                  line-height: 1.55; max-height: 220px; overflow-y: auto; }

/* Der Entwurf steht IM Vorgang, direkt unter dem Verlauf, auf den er sich bezieht.
   Punkt I: absegnen oder ueberschreiben, ein Entwurf, keine Varianten. */
.entwurf { margin: 0 22px 22px; border: 1px solid var(--akzent-rand); border-radius: var(--radius);
           background: var(--akzent-hell); overflow: hidden; }
.entwurf-kopf { display: flex; align-items: center; gap: 8px; padding: 9px 13px;
                font-size: 12px; font-weight: 600; color: var(--akzent); }
.entwurf textarea {
  display: block; width: 100%; min-height: 190px; resize: vertical;
  padding: 12px 13px; font: inherit; font-size: 13px; line-height: 1.55;
  color: var(--text); background: var(--flaeche);
  border: none; border-top: 1px solid var(--akzent-rand);
}
.entwurf textarea:focus { outline: none; }
.entwurf-fuss { display: flex; align-items: center; gap: 8px; padding: 10px 13px;
                border-top: 1px solid var(--akzent-rand); }
.entwurf-fuss .stand { margin-left: auto; font-size: 11.5px; color: var(--text-still); }

.mehr { display: block; width: calc(100% - 32px); margin: 12px 16px 24px; padding: 8px;
        font: inherit; font-size: 12.5px; color: var(--text-still);
        background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius-klein);
        cursor: pointer; transition: background 140ms var(--aus); }
.mehr:hover { background: var(--flaeche-still); color: var(--text); }

.meldung { position: fixed; bottom: 18px; left: 50%; transform: translate(-50%, 8px);
           padding: 9px 16px; border-radius: var(--radius); font-size: 13px;
           background: var(--text); color: var(--grund); box-shadow: var(--schatten-hoch);
           opacity: 0; pointer-events: none; transition: opacity 200ms var(--aus), transform 200ms var(--aus); }
.meldung.da { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

@media (max-width: 900px) {
  .raum { grid-template-columns: 1fr; }
  .spalte-vorgang { display: none; }
  .raum.zeigt-vorgang .spalte-liste { display: none; }
  .raum.zeigt-vorgang .spalte-vorgang { display: block; }
}


/* ------------------------------------------------- Vermerke und Automatik */

/* Ein Systemvermerk ist kein Schriftwechsel: schmale Zeile, keine Sprechblase. */
.vermerk {
  display: flex; align-items: baseline; gap: 10px;
  padding: 5px 12px; font-size: 12px; color: var(--text-leise);
  border-left: 2px solid var(--rand-stark);
}
.vermerk .zeit { margin-left: auto; font-family: var(--schrift-zahl); font-size: 11px; }

/* Abwesenheitsnotiz und Autoreply kommen zwar herein, sind aber keine Antwort.
   Sie werden deshalb sichtbar leiser gezeigt als eine echte Rueckmeldung. */
.nachricht.auto { border-style: dashed; opacity: 0.75; }
.nachricht.auto .nachricht-kopf { background: var(--flaeche-still); color: var(--text-leise); }

/* ---------------------------------------------------------- Uebersicht */

.uebersicht { padding: 46px 40px; max-width: 720px; }
.uebersicht .gross { margin: 0 0 6px; font-size: 22px; font-weight: 600;
                     letter-spacing: -0.02em; line-height: 1.25; }
.uebersicht .gross strong { font-weight: 700; }
.uebersicht .klein { margin: 0 0 26px; font-size: 13px; color: var(--text-still);
                     max-width: 46ch; line-height: 1.55; }

.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.kachel {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  padding: 13px 15px; text-align: left; font: inherit; cursor: pointer;
  background: var(--flaeche); color: var(--text);
  border: 1px solid var(--rand); border-radius: var(--radius);
  transition: border-color 160ms var(--aus), background 160ms var(--aus), transform 160ms var(--aus);
}
.kachel:hover { border-color: var(--rand-stark); background: var(--flaeche-still); }
.kachel:active { transform: scale(0.985); }
.k-zahl { font-family: var(--schrift-zahl); font-size: 20px; font-weight: 600;
          letter-spacing: -0.02em; line-height: 1.1; }
.k-titel { font-size: 12.5px; color: var(--text-still); }