/* ------------------------------------------------------------------
   crm.css - die Oberflaeche des CRM. 02.09.2026, zweite Fassung.

   DIESE FASSUNG FOLGT DEM ARTBOARD "CRM Entwurf", Blatt "kunden", und
   nicht meiner eigenen Auslegung: Violett als Akzent, Kachel mit
   Initialen, Status als Punkt mit Wort, Zaehler mit Versalienbeschriftung
   OBEN und Zahl darunter, Schlagworte je Kunde, "Details" rechts im Fuss.

   Die Farben des Entwurfs stehen als Marken oben, damit eine Nachtfassung
   spaeter eine Sache von zehn Zeilen ist und nicht von zweihundert. Wer
   die Werte aendert, aendert sie hier.
   ------------------------------------------------------------------ */

:root {
  --crm-akzent: #667eea;
  --crm-akzent-2: #764ba2;
  --crm-akzent-weich: #ede9fe;
  --crm-tinte: #1a1a1a;
  --crm-tinte-2: #6c757d;
  --crm-tinte-3: #9ca3af;
  --crm-flaeche: #ffffff;
  --crm-grund: #f8f9fb;
  --crm-linie: #e8eaed;
  --crm-linie-2: #f0f0f0;
  --crm-ok: #10b981;
  --crm-ok-weich: #d1fae5;
  --crm-ok-tinte: #065f46;
  --crm-warn: #f59e0b;
  --crm-warn-weich: #fef3c7;
  --crm-warn-tinte: #92400e;
  --crm-krit: #ef4444;
  --crm-krit-weich: #fee2e2;
  --crm-krit-tinte: #991b1b;
  --crm-schatten: 0 1px 2px rgba(16, 24, 40, .05);
  --crm-schatten-hoch: 0 8px 24px rgba(16, 24, 40, .10);
}

/* Die Seite bekommt den hellen Grund des Entwurfs, nicht den des Studios. */
.obs-main:has(#crm-kunden), .obs-main:has(.crm-seite) { background: var(--crm-grund); }

/* DIE BRETTANSICHT BRAUCHT DIE GANZE BREITE. obs.css setzt .obs-main auf
   max-width:1320px - die Lesebreite des Studios, richtig fuer Text. Ein
   Kartenbrett bricht darin nach fuenf Karten um und schneidet Firmennamen ab;
   der Entwurf zeigt sechs in einer Reihe. */
.obs-main:has(.crm-seite) { max-width: none; }

/* ----- Kopfzeile: Titel links, Zaehlzeile darunter ----- */
.crm-kopf { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin: 0 0 18px; }
.crm-kopf-text { flex: 1 1 260px; min-width: 0; }
.crm-kopf h1 { margin: 0; font-size: 1.75rem; font-weight: 700; color: var(--crm-tinte); letter-spacing: -.01em; }
.crm-kopf-text p { margin: 4px 0 0; color: var(--crm-tinte-2); font-size: .84rem; }
.crm-kopf-tat { display: flex; gap: 8px; align-items: center; }

/* ----- Knoepfe ----- */
.crm-knopf { appearance: none; cursor: pointer; font: inherit; font-size: .84rem; font-weight: 500;
  border: 1px solid var(--crm-linie); background: var(--crm-flaeche); color: var(--crm-tinte);
  border-radius: 8px; padding: 8px 14px; transition: background .12s, transform .12s, box-shadow .12s; }

/* EIN KNOPF AUS EINEM LINK, 10.09.2026.

   crm-knopf setzte die Unterstreichung nicht zurueck. An einem <button> faellt das
   nicht auf, an einem <a> sehr: "+ Neuer Vertrag" und "Kontaktieren" sahen aus wie
   Woerter im Fliesstext. Die Regel steht hier und nicht an der Seite - eine Seite,
   die ihre Knoepfe selbst nachbessert, ist der Anfang von zwei Stilen.

   inline-flex NUR fuer den Link: an einem <button> wirkt die senkrechte Polsterung
   ohnehin, an einem <a> ohne Blockfluss laeuft sie aus dem Kasten. */
.crm-knopf { text-decoration: none; }

a.crm-knopf { display: inline-flex; align-items: center; justify-content: center; }
.crm-knopf:hover { background: var(--crm-linie); }
.crm-knopf--haupt { border: 0; color: #fff;
  background: linear-gradient(135deg, var(--crm-akzent), var(--crm-akzent-2)); box-shadow: var(--crm-schatten); }
.crm-knopf--haupt:hover { transform: translateY(-2px); box-shadow: var(--crm-schatten-hoch); }
.crm-knopf--still { border-color: transparent; background: transparent; color: var(--crm-tinte-2); }
.crm-knopf--still:hover { background: var(--crm-linie-2); }
.crm-knopf--gefahr { color: var(--crm-krit-tinte); border-color: var(--crm-krit-weich); background: var(--crm-flaeche); }
.crm-knopf--gefahr:hover { background: var(--crm-krit-weich); }
.crm-knopf[disabled] { opacity: .5; cursor: default; transform: none; }

/* Das Drei-Punkte-Menue oben rechts an der Karte. */
.crm-mehr { appearance: none; border: 0; background: transparent; cursor: pointer;
  color: var(--crm-tinte-3); font-size: 1.05rem; line-height: 1; border-radius: 6px;
  padding: 3px 7px; flex: 0 0 auto; }
.crm-mehr:hover { background: var(--crm-linie); color: var(--crm-tinte); }

/* ----- Werkzeugleiste: Suche links, Filter und Anlegen rechts ----- */
.crm-leiste { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 18px; }
.crm-suche { flex: 1 1 260px; max-width: 340px; position: relative; }
.crm-suche input { width: 100%; box-sizing: border-box; font: inherit; font-size: .84rem;
  background: var(--crm-flaeche); color: var(--crm-tinte); border: 1px solid var(--crm-linie);
  border-radius: 8px; padding: 9px 12px; }
/* Die Lupe steht im Platzhaltertext und nicht als Pseudoelement: obs.css
   gestaltet input mit hoeherer Spezifitaet, der linke Innenabstand kam nicht
   an, und das Symbol lag ueber dem Text. Der Entwurf hat sie ohnehin im Feld. */
.crm-suche label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.crm-suche input:focus-visible, .crm-form input:focus-visible,
.crm-form select:focus-visible, .crm-form textarea:focus-visible {
  outline: 2px solid var(--crm-akzent); outline-offset: 1px; border-color: var(--crm-akzent); }

.crm-filter { display: flex; gap: 6px; flex-wrap: wrap; }
.crm-filter button { appearance: none; cursor: pointer; font: inherit; font-size: .78rem;
  border: 1px solid var(--crm-linie); background: var(--crm-flaeche); color: var(--crm-tinte-2);
  border-radius: 8px; padding: 7px 12px; }
.crm-filter button[aria-pressed="true"] { background: var(--crm-akzent-weich);
  border-color: var(--crm-akzent); color: var(--crm-akzent-2); font-weight: 600; }

/* ----- Kartengitter: schmalere Karten als in meiner ersten Fassung ----- */
.crm-gitter { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); align-items: start; }

.crm-karte { background: var(--crm-flaeche); border: 1px solid var(--crm-linie);
  border-radius: 12px; box-shadow: var(--crm-schatten); overflow: hidden;
  transition: box-shadow .14s, transform .14s; }
.crm-karte:hover { box-shadow: var(--crm-schatten-hoch); transform: translateY(-2px); }

.crm-karte-kopf { display: flex; align-items: flex-start; gap: 10px; padding: 14px 14px 12px; }

/* Kachel mit Initialen. Die Farbe kommt aus dem Namen, damit dieselbe Firma
   immer dieselbe Kachel hat - sechs Toene wie im Entwurf. */
.crm-initialen { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 9px;
  display: grid; place-items: center; font-weight: 700; font-size: .82rem; color: #fff;
  letter-spacing: .02em; }
.crm-initialen[data-ton="0"] { background: linear-gradient(135deg, #667eea, #764ba2); }
.crm-initialen[data-ton="1"] { background: linear-gradient(135deg, #7c3aed, #4c1d95); }
.crm-initialen[data-ton="2"] { background: linear-gradient(135deg, #f43f5e, #be123c); }
.crm-initialen[data-ton="3"] { background: linear-gradient(135deg, #06b6d4, #0e7490); }
.crm-initialen[data-ton="4"] { background: linear-gradient(135deg, #f59e0b, #b45309); }
.crm-initialen[data-ton="5"] { background: linear-gradient(135deg, #fda4af, #f472b6); }

.crm-karte-name { flex: 1 1 auto; min-width: 0; }
.crm-karte-name a { display: block; color: var(--crm-tinte); text-decoration: none;
  font-weight: 600; font-size: .88rem; line-height: 1.25;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.crm-karte-name a:hover { color: var(--crm-akzent-2); }

/* Status als Punkt mit Wort, wie im Entwurf - kein Pillenchip. */
.crm-status { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px;
  font-size: .72rem; color: var(--crm-tinte-2); }
.crm-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--crm-tinte-3); }
.crm-status--kunde::before { background: var(--crm-ok); }
.crm-status--interessent::before { background: var(--crm-warn); }
.crm-status--ehemalig::before { background: var(--crm-tinte-3); }

/* ----- Zaehler: Beschriftung in Versalien OBEN, Zahl darunter ----- */
.crm-zahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  padding: 0 14px 12px; }
.crm-zahl span { display: block; font-size: .58rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--crm-tinte-3); font-weight: 600; margin-bottom: 3px; }
.crm-zahl b { display: block; font-size: .95rem; font-weight: 700; color: var(--crm-tinte);
  font-variant-numeric: tabular-nums; }
.crm-zahl--leer b { color: var(--crm-tinte-3); font-weight: 400; }

/* ----- Fuss: Schlagworte links, "Details" rechts ----- */
.crm-karte-fuss { display: flex; align-items: center; gap: 6px;
  border-top: 1px solid var(--crm-linie-2); padding: 10px 14px; background: #fcfcfd; }
.crm-schild { font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600;
  color: var(--crm-tinte-2); background: var(--crm-linie); border-radius: 4px; padding: 3px 6px; }
.crm-grow { flex: 1 1 auto; }
.crm-details { font-size: .74rem; color: var(--crm-akzent); text-decoration: none; font-weight: 600; white-space: nowrap; }
.crm-details:hover { text-decoration: underline; }

/* ----- Leerzustand, Meldungen ----- */
.crm-leer { border: 1px dashed var(--crm-linie); border-radius: 12px; padding: 34px 24px;
  text-align: center; color: var(--crm-tinte-2); background: var(--crm-flaeche); }
.crm-leer b { display: block; color: var(--crm-tinte); font-size: 1rem; margin-bottom: 6px; }
.crm-leer p { margin: 0 auto; max-width: 46ch; font-size: .86rem; line-height: 1.55; }

.crm-melde { border-radius: 8px; padding: 10px 12px; font-size: .84rem; margin: 0 0 14px; }
.crm-melde--fehler { background: var(--crm-krit-weich); color: var(--crm-krit-tinte); }
.crm-melde--ok { background: var(--crm-ok-weich); color: var(--crm-ok-tinte); }
.crm-melde--warn { background: var(--crm-warn-weich); color: var(--crm-warn-tinte); }

/* ----- Akte und Formular ----- */
.crm-akte { display: grid; gap: 16px; grid-template-columns: minmax(0, 2fr) minmax(250px, 1fr); align-items: start; }
@media (max-width: 900px) { .crm-akte { grid-template-columns: 1fr; } }
.crm-block { background: var(--crm-flaeche); border: 1px solid var(--crm-linie);
  border-radius: 12px; padding: 16px; box-shadow: var(--crm-schatten); }
.crm-block > h2 { margin: 0 0 12px; font-size: .95rem; font-weight: 700; color: var(--crm-tinte); }
.crm-block + .crm-block { margin-top: 14px; }

.crm-felder { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; font-size: .86rem; }
.crm-felder dt { color: var(--crm-tinte-3); }
.crm-felder dd { margin: 0; color: var(--crm-tinte); overflow-wrap: anywhere; }

.crm-liste { list-style: none; margin: 0; padding: 0; }
.crm-liste li { display: flex; gap: 10px; align-items: center; padding: 10px 2px;
  border-bottom: 1px solid var(--crm-linie-2); font-size: .86rem; }
.crm-liste li:last-child { border-bottom: 0; }
.crm-liste-name { flex: 1 1 auto; min-width: 0; }
.crm-liste-name b { display: block; font-weight: 600; color: var(--crm-tinte); }
.crm-liste-name small { color: var(--crm-tinte-3); font-size: .74rem; }
.crm-liste a { color: var(--crm-akzent); text-decoration: none; }
.crm-liste a:hover { text-decoration: underline; }

.crm-form { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.crm-form label { display: block; font-size: .74rem; letter-spacing: .04em; text-transform: uppercase;
  font-weight: 600; color: var(--crm-tinte-3); margin-bottom: 4px; }
.crm-form input, .crm-form select, .crm-form textarea { width: 100%; box-sizing: border-box;
  font: inherit; font-size: .86rem; background: var(--crm-flaeche); color: var(--crm-tinte);
  border: 1px solid var(--crm-linie); border-radius: 8px; padding: 9px 11px; }
.crm-form textarea { min-height: 86px; resize: vertical; }
.crm-form .crm-breit { grid-column: 1 / -1; }
.crm-form-fuss { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: flex-end;
  border-top: 1px solid var(--crm-linie-2); padding-top: 12px; }

.crm-hinweis { font-size: .78rem; color: var(--crm-tinte-3); line-height: 1.5; margin: 6px 0 0;
  text-transform: none; letter-spacing: 0; font-weight: 400; }


/* NACHTRAG 1 - zwei Dinge, die erst am gerenderten Brett auffielen.

   GLEICHE KARTENHOEHEN. Ein zweizeiliger Firmenname schob bei einer Karte
   die Zaehler nach unten, und die Reihe stand ausgerissen da. Der Entwurf
   zeigt eine gerade Kante: also Karten strecken, Fuss nach unten druecken
   und dem Namensfeld zwei Zeilen Platz reservieren.

   UND DIE LUPE LAG UEBER DEM TEXT: obs.css gestaltet input-Felder mit
   hoeherer Spezifitaet als meine Klasse, das Innenabstand-Links kam nicht an.
   Deshalb hier mit .crm-seite davor. */
.crm-gitter { align-items: stretch; }
.crm-karte { display: flex; flex-direction: column; }
.crm-karte-fuss { margin-top: auto; }
.crm-karte-name { min-height: 2.9em; }


/* ==================================================================
   NACHTRAG 2 - DER RAHMEN. 02.09.2026.

   Kai: "der seitenrahmen stimmt doch auch nicht" und "ich will das ganze
   Design". Richtig: bis hierher hing das CRM in der Huelle des Studios,
   mit Organisationswaehler, Tageslicht/Nacht und einem blauen
   "Instanz buchen" - alles Dinge, die im Entwurf nicht vorkommen und im
   Vertrieb auch nichts zu suchen haben.

   Diese Fassung baut den Rahmen aus dem Entwurf: weisse Sidebar mit
   flacher Liste, aktiver Punkt als violette Pille, darueber der Kopf mit
   Marke, und eine weisse Leiste ueber dem Inhalt.

   EINE ABWEICHUNG MIT ABSICHT: Abmelden und der Mandant stehen im
   Entwurf nirgends. Weglassen kann ich beides nicht - ohne Abmelden
   kommt niemand aus der Sitzung, und ohne Mandantenanzeige weiss bei
   mehreren Organisationen niemand, in welcher er schreibt. Beides sitzt
   deshalb leise am Fuss der Sidebar statt laut in der Kopfzeile.
   ================================================================== */

.crm-app { display: flex; min-height: 100vh; background: var(--crm-grund); }

.crm-rail { flex: 0 0 218px; width: 218px; background: var(--crm-flaeche);
  border-right: 1px solid var(--crm-linie); display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; }

.crm-marke { display: flex; align-items: center; gap: 9px; padding: 18px 16px 20px;
  color: var(--crm-tinte); text-decoration: none; }
.crm-marke-zeichen { width: 26px; height: 26px; border-radius: 8px; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--crm-akzent), var(--crm-akzent-2));
  display: grid; place-items: center; color: #fff; font-size: .68rem; font-weight: 700; }
.crm-marke b { font-size: .94rem; font-weight: 700; letter-spacing: -.01em; }

.crm-nav { padding: 0 10px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.crm-nav a, .crm-nav span.crm-nav-aus { display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 9px; font-size: .84rem; font-weight: 500;
  color: var(--crm-tinte-2); text-decoration: none; }
.crm-nav a:hover { background: var(--crm-grund); color: var(--crm-tinte); }
.crm-nav a[aria-current="page"] { color: #fff; font-weight: 600;
  background: linear-gradient(135deg, var(--crm-akzent), var(--crm-akzent-2)); }
.crm-nav a[aria-current="page"] .crm-ic { opacity: 1; }
.crm-nav span.crm-nav-aus { color: var(--crm-tinte-3); cursor: default; }
.crm-ic { width: 16px; height: 16px; flex: 0 0 auto; opacity: .75; }

.crm-rail-fuss { margin-top: auto; border-top: 1px solid var(--crm-linie);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.crm-rail-orga { font-size: .7rem; color: var(--crm-tinte-3); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-rail-konto { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--crm-tinte-2); }
.crm-rail-konto .crm-initialen { width: 26px; height: 26px; border-radius: 7px; font-size: .64rem; }
.crm-rail-konto form { margin: 0; }
.crm-abmelden { appearance: none; border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-size: .74rem; color: var(--crm-akzent); text-decoration: none; }
.crm-abmelden:hover { text-decoration: underline; }

.crm-arbeit { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.crm-main { flex: 1 1 auto; padding: 22px 26px 40px; }

/* Die weisse Leiste ueber dem Inhalt. Sie ist Teil der Seite und nicht des
   Rahmens, weil ihre Knoepfe von der Seite kommen - Suche und "Neuer Kunde"
   gehoeren zu den Kunden, nicht zum CRM. */
.crm-topbar { background: var(--crm-flaeche); border-bottom: 1px solid var(--crm-linie);
  padding: 12px 26px; margin: -22px -26px 22px; display: flex; align-items: center;
  gap: 12px; flex-wrap: wrap; }
.crm-topbar .crm-suche { margin: 0; }
.crm-topbar-rechts { margin-left: auto; display: flex; gap: 8px; align-items: center; }


/* NACHTRAG 3 - drei Fehler, die erst der Rahmen sichtbar gemacht hat.

   1. [hidden] WIRKTE NICHT MEHR. In der ersten Fassung stand die Regel drin,
      beim Umbau auf den Entwurf ist sie herausgefallen - und damit standen
      die Filterknoepfe offen, obwohl sie hinter "Filter" gehoeren.
      obs.css bringt sie nicht mit.

   2. NAMENSKOLLISION .crm-marke: erst Schlagwort an der Karte, dann
      Wortmarke in der Sidebar. Die Wortmarke hat den Schlagworten ihr
      Flex-Layout und ihren Innenabstand aufgezwungen - daher die Kaesten
      im Kartenfuss. Das Schlagwort heisst jetzt .crm-schild.

   3. Die Wortmarke kam in Grossbuchstaben, weil obs.css b/strong so setzt. */
[hidden] { display: none !important; }
.crm-marke b { text-transform: none; }
.crm-schild { white-space: nowrap; }


/* ==================================================================
   NACHTRAG 4 - DIE KUNDENAKTE, Blatt "customer-detail". 02.09.2026.
   ================================================================== */

/* Brotkrumen und die zwei Knoepfe darueber */
.crm-krumen { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; }
.crm-krumen nav { font-size: .82rem; color: var(--crm-tinte-3); }
.crm-krumen nav a { color: var(--crm-akzent); text-decoration: none; }
.crm-krumen nav a:hover { text-decoration: underline; }
.crm-krumen-tat { margin-left: auto; display: flex; gap: 8px; }

/* Die Kopfkarte */
.crm-akte-kopf { background: var(--crm-flaeche); border: 1px solid var(--crm-linie);
  border-radius: 14px; box-shadow: var(--crm-schatten); padding: 20px 22px; margin: 0 0 18px; }
.crm-akte-oben { display: flex; align-items: flex-start; gap: 16px; }
.crm-akte-kachel { width: 56px; height: 56px; border-radius: 13px; flex: 0 0 auto;
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 1.15rem; }
.crm-akte-titel { flex: 1 1 auto; min-width: 0; }
.crm-akte-titel h1 { margin: 0; font-size: 1.5rem; font-weight: 700; color: var(--crm-tinte); letter-spacing: -.01em; }
.crm-akte-titel p { margin: 3px 0 0; font-size: .8rem; color: var(--crm-tinte-3); }
.crm-akte-chips { display: flex; gap: 8px; flex-wrap: wrap; }

.crm-pille { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px;
  padding: 4px 11px; font-size: .74rem; font-weight: 600; white-space: nowrap;
  background: var(--crm-linie); color: var(--crm-tinte-2); }
.crm-pille::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .8; }
.crm-pille--kunde { background: var(--crm-ok-weich); color: var(--crm-ok-tinte); }
.crm-pille--interessent { background: var(--crm-warn-weich); color: var(--crm-warn-tinte); }
.crm-pille--ehemalig { background: var(--crm-linie); color: var(--crm-tinte-3); }
.crm-pille--stufe { background: var(--crm-warn-weich); color: var(--crm-warn-tinte); }
.crm-pille--stufe::before { content: "\2605"; width: auto; height: auto; border-radius: 0; background: none; font-size: .8rem; }

/* Das Feldraster im Kopf: drei Spalten, Beschriftung in Versalien */
.crm-akte-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 24px; margin-top: 20px; }
@media (max-width: 760px) { .crm-akte-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.crm-akte-feld span { display: block; font-size: .6rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--crm-tinte-3); font-weight: 600; margin-bottom: 4px; }
.crm-akte-feld b { display: block; font-size: .88rem; font-weight: 500; color: var(--crm-tinte); overflow-wrap: anywhere; }
.crm-akte-feld a { color: var(--crm-akzent); text-decoration: none; }
.crm-akte-feld a:hover { text-decoration: underline; }
.crm-akte-feld--leer b { color: var(--crm-tinte-3); font-weight: 400; }

/* Reiter */
.crm-reiter { display: flex; gap: 4px; border-bottom: 1px solid var(--crm-linie); margin: 0 0 20px; flex-wrap: wrap; }
.crm-reiter button { appearance: none; border: 0; background: none; cursor: pointer; font: inherit;
  font-size: .84rem; font-weight: 500; color: var(--crm-tinte-2); padding: 10px 14px;
  border-bottom: 2px solid transparent; margin-bottom: -1px; }
.crm-reiter button:hover { color: var(--crm-tinte); }
.crm-reiter button[aria-selected="true"] { color: var(--crm-akzent); font-weight: 600;
  border-bottom-color: var(--crm-akzent); }
.crm-reiter button[disabled] { color: var(--crm-tinte-3); cursor: default; }

/* Abschnittskopf mit Knopf rechts */
.crm-abschnitt { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.crm-abschnitt h2 { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--crm-tinte); }
.crm-abschnitt .crm-grow { flex: 1 1 auto; }

/* Kontaktkarten */
.crm-kontakte { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); align-items: stretch; }
.crm-kontakt { background: var(--crm-flaeche); border: 1px solid var(--crm-linie); border-radius: 12px;
  box-shadow: var(--crm-schatten); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.crm-kontakt-kachel { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: .74rem; }
.crm-kontakt-name b { display: block; font-size: .88rem; font-weight: 600; color: var(--crm-tinte); }
.crm-kontakt-name small { display: block; font-size: .72rem; color: var(--crm-tinte-3); margin-top: 1px; }
.crm-kontakt-zeilen { display: flex; flex-direction: column; gap: 5px; font-size: .78rem; color: var(--crm-tinte-2); }
.crm-kontakt-zeile { display: flex; align-items: center; gap: 7px; min-width: 0; }
.crm-kontakt-zeile span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-kontakt-zeile a { color: var(--crm-akzent); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-kontakt-zeile a:hover { text-decoration: underline; }
.crm-kontakt-zeile .crm-ic { width: 13px; height: 13px; opacity: .6; flex: 0 0 auto; }
.crm-kontakt-fuss { margin-top: auto; display: flex; gap: 6px; justify-content: flex-end; }
.crm-rund { appearance: none; cursor: pointer; border: 1px solid var(--crm-linie);
  background: var(--crm-flaeche); width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; color: var(--crm-tinte-2); font-size: .74rem; padding: 0; }
.crm-rund:hover { background: var(--crm-akzent-weich); border-color: var(--crm-akzent); color: var(--crm-akzent-2); }

/* Die gestrichelte Karte am Ende */
.crm-kontakt-neu { border: 2px dashed var(--crm-linie); background: transparent; border-radius: 12px;
  display: grid; place-items: center; text-align: center; padding: 20px 14px; cursor: pointer;
  color: var(--crm-tinte-3); font: inherit; min-height: 150px; }
.crm-kontakt-neu:hover { border-color: var(--crm-akzent); color: var(--crm-akzent-2); background: var(--crm-akzent-weich); }
.crm-kontakt-neu .crm-plus { display: block; font-size: 1.5rem; line-height: 1; margin-bottom: 8px; }
.crm-kontakt-neu b { display: block; font-size: .84rem; font-weight: 600; color: inherit; }
.crm-kontakt-neu small { display: block; font-size: .72rem; margin-top: 2px; }


/* ===== NACHTRAG 5 — Kundenakte 1:1 nach Board customer-detail ===== */
.crm-main{padding:28px 28px 40px}
.crm-akte-kopf{padding:28px;border-radius:12px;display:flex;flex-direction:column;gap:24px}
.crm-akte-oben{display:flex;align-items:center;justify-content:space-between;gap:20px}
.crm-akte-kachel{width:80px;height:80px;border-radius:12px;font-size:2rem;color:#fff;background:linear-gradient(135deg,var(--crm-akzent) 0%,var(--crm-akzent-2) 100%)!important}
.crm-akte-titel h1{font-size:1.75rem;font-weight:700;margin:0;line-height:1.15}
.crm-akte-titel p{font-size:.875rem;color:var(--crm-tinte-2);margin:4px 0 0}
.crm-akte-chips{display:flex;gap:8px;align-self:flex-start}
.crm-pille{padding:6px 12px;border-radius:20px;font-size:.8125rem;font-weight:600}
.crm-akte-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.crm-akte-feld span{font-size:.75rem;font-weight:600;color:var(--crm-tinte-2);text-transform:uppercase;letter-spacing:.4px}
.crm-akte-feld b,.crm-akte-feld a{font-size:.9375rem;font-weight:600}
.crm-reiter{margin:0 -28px;padding:0 28px;gap:0;background:var(--crm-flaeche);border-bottom:1px solid var(--crm-linie)}
.crm-reiter button{padding:16px 20px;font-size:.875rem;font-weight:600;margin-bottom:-1px;border-radius:0;border-bottom:2px solid transparent}
.crm-reiter button[aria-selected="true"]{color:var(--crm-akzent);border-bottom-color:var(--crm-akzent);background:none}
.crm-rund{width:32px;height:32px;border-radius:6px;border:1px solid var(--crm-linie);background:var(--crm-flaeche);font-size:.875rem;padding:0;display:grid;place-items:center}
.crm-kontakt-zeile .crm-ic{font-size:.875rem;line-height:1;width:1.2em;display:inline-block;text-align:center}
#crm-k-bearbeiten::before{content:"\270F\FE0F";margin-right:6px}

/* NACHTRAG 6 — Emoji-Symbole wie im Board */
/* Die Leiste trug Emoji in einem <span>, und DAS war ihre Größe: 1.15em, inline-block,
   zentriert. Seit die Symbole Strich-SVG sind (login|crm-railnav, 06.09.2026), gilt
   wieder die Regel weiter oben — .crm-ic { width: 16px; height: 16px }. Eine zweite
   Größe für dieselbe Klasse war der Grund, warum in der Leiste zwei Zeichensätze
   nebeneinander standen: farbige Emoji und einfarbige SVG. */
.crm-pille--stufe::before{content:"\1F451";font-size:.8125rem}

/* NACHTRAG 7 — die Marke am Hauptkontakt. Steht nicht im Board (dessen CSS
   endet bei den Reitern), aber ohne sie sieht man den Hauptkontakt nur an der
   Reihenfolge. Darum leise: Akzent-Ton, klein, rechts in der Namenszeile. */
.crm-kontakt .crm-chip--haupt{margin-left:auto;flex:0 0 auto;padding:2px 8px;border-radius:999px;background:var(--crm-akzent-weich);color:var(--crm-akzent-2);font-size:.6875rem;font-weight:600;letter-spacing:.2px}

/* ------------------------------------------------------------------ Leads
   Nachtrag 8, 04.09.2026. Werte aus dem Blatt `leads` des CRM-Entwurfs:
   Filterspalte 280px, Polster 24px, Avatar 40x40, Radien 6/8/10px,
   Fortschrittsbalken 4px. Farben ausschliesslich ueber die Variablen oben -
   das Blatt benutzt dieselben Werte, und zwei Wahrheiten laufen auseinander. */
.crm-lead-raum {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

@media (max-width: 1100px) {
  .crm-lead-raum { grid-template-columns: minmax(0, 1fr); }
}

.crm-lead-spalte {
  background: var(--crm-flaeche);
  border: 1px solid var(--crm-linie);
  border-radius: 10px;
  padding: 20px;
  box-shadow: var(--crm-schatten);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.crm-lead-gruppe { display: flex; flex-direction: column; gap: 8px; }

.crm-lead-gruppe > b {
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--crm-tinte-2);
}

/* Reiter und Quellen sind Knoepfe und keine Kaestchen: ein Filter, der genau
   einen Wert hat, ist eine Wahl und keine Mehrfachauswahl. Das Blatt zeigt
   Kaestchen, aber daneben eine Zahl je Zeile - die Zahl ist der Zweck. */
.crm-lead-wahl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--crm-linie);
  border-radius: 6px;
  background: var(--crm-flaeche);
  color: var(--crm-tinte);
  font-size: .8125rem;
  cursor: pointer;
  text-align: left;
}

.crm-lead-wahl:hover { border-color: var(--crm-akzent); }

.crm-lead-wahl[aria-pressed="true"] {
  border-color: var(--crm-akzent);
  background: var(--crm-akzent-weich);
  color: var(--crm-akzent-2);
  font-weight: 600;
}

.crm-lead-wahl small { color: var(--crm-tinte-3); font-variant-numeric: tabular-nums; }

.crm-lead-wahl[aria-pressed="true"] small { color: var(--crm-akzent-2); }

.crm-lead-regler { display: flex; flex-direction: column; gap: 6px; }

.crm-lead-regler input[type="range"] { width: 100%; accent-color: var(--crm-akzent); }

.crm-lead-regler span { font-size: .75rem; color: var(--crm-tinte-2); }

/* --- die Liste --- */
.crm-lead-liste { display: flex; flex-direction: column; gap: 12px; }

.crm-lead-karte {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 16px 20px;
  background: var(--crm-flaeche);
  border: 1px solid var(--crm-linie);
  border-radius: 10px;
  box-shadow: var(--crm-schatten);
}

.crm-lead-karte:hover { box-shadow: var(--crm-schatten-hoch); }

@media (max-width: 720px) {
  .crm-lead-karte { grid-template-columns: 40px minmax(0, 1fr); }
  .crm-lead-rechts { grid-column: 1 / -1; }
}

.crm-lead-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--crm-akzent), var(--crm-akzent-2));
  color: #fff;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .3px;
}

.crm-lead-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.crm-lead-name {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--crm-tinte);
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

.crm-lead-name:hover { color: var(--crm-akzent-2); text-decoration: underline; }

.crm-lead-text small { font-size: .75rem; color: var(--crm-tinte-2); overflow-wrap: anywhere; }

.crm-lead-rechts { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* Die Punktekachel des Blattes: 44x44, Zahl gross, Wort klein darunter. */
.crm-lead-score {
  min-width: 44px;
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--crm-akzent-weich);
  color: var(--crm-akzent-2);
  text-align: center;
  line-height: 1.15;
}

.crm-lead-score b { display: block; font-size: 1.0625rem; font-variant-numeric: tabular-nums; }

.crm-lead-score small { font-size: .625rem; text-transform: uppercase; letter-spacing: .4px; }

.crm-lead-balken { width: 72px; height: 4px; border-radius: 2px; background: var(--crm-linie); }

.crm-lead-balken i { display: block; height: 100%; border-radius: 2px; background: var(--crm-akzent); }

.crm-lead-tat { display: flex; gap: 6px; }

/* 32x32 wie die Aktionsknoepfe der Kundenakte - dieselbe Groesse, damit die
   beiden Seiten nicht zwei Sprachen sprechen. */
.crm-lead-tat button {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--crm-linie);
  border-radius: 6px;
  background: var(--crm-flaeche);
  cursor: pointer;
  font-size: .875rem;
}

.crm-lead-tat button:hover { border-color: var(--crm-akzent); }

.crm-lead-tat button[disabled] { opacity: .45; cursor: not-allowed; }

.crm-lead-leer { padding: 32px; text-align: center; color: var(--crm-tinte-2); }

/* ------------------------------------------------------- Organisationswahl
   Nachtrag 9, 04.09.2026. Kai: "mein Admin user hat mehrere Organisationen"
   - und trotzdem stand im CRM "Keiner Organisation zugeordnet". Grund:
   Mandantgrenze verweigert das Raten, und die gemerkte Wahl haengt am Host.
   Der Fuss der Sidebar hatte einen leeren Platz dafuer (#crm-orga), den nie
   jemand gefuellt hat. Dort sitzt jetzt der Umschalter. Farben nur ueber die
   Variablen oben. */
.crm-orgawahl { min-width: 0; }
.crm-orgawahl > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 4px; }
.crm-orgawahl > summary::-webkit-details-marker { display: none; }
.crm-orgawahl > summary::after { content: "\25BE"; flex: 0 0 auto; font-size: .6rem; color: var(--crm-tinte-3); transition: transform .12s; }
.crm-orgawahl[open] > summary::after { transform: rotate(180deg); }
.crm-orgawahl > summary:hover { color: var(--crm-tinte); }
.crm-orgawahl > summary:focus-visible { outline: 2px solid var(--crm-akzent); outline-offset: 2px; border-radius: 4px; }
.crm-orgaliste { margin: 6px 0 2px; display: flex; flex-direction: column; gap: 2px; }
.crm-orgalbl { font-size: .62rem; letter-spacing: .05em; text-transform: uppercase; font-weight: 600; color: var(--crm-tinte-3); padding: 0 0 2px; }
.crm-orgaeintrag { appearance: none; cursor: pointer; font: inherit; font-size: .74rem; text-align: left; border: 0; background: transparent; color: var(--crm-tinte-2); border-radius: 6px; padding: 6px 8px; }
.crm-orgaeintrag:hover { background: var(--crm-linie-2); color: var(--crm-tinte); }
/* Die laufende Organisation ist markiert und bleibt anklickbar: ein Klick
   darauf ist harmlos und billiger als ein deaktivierter Knopf, den man fuer
   kaputt haelt. */
.crm-orgaeintrag[data-aktiv="selected"] { color: var(--crm-tinte); font-weight: 600; background: var(--crm-linie-2); }
.crm-orgaeintrag[data-aktiv="selected"]::before { content: "\2713\00a0"; color: var(--crm-akzent); }

/* ------------------------------------------------------------- Uebernahme
   Nachtrag 10, 04.09.2026. Kai: "ausserdem benoetigt man einen Knopf, um den
   Kunden zu uebernehmen (anzulegen oder einem bestehenden auszuwaehlen)".
   Das Blatt loest den alten Zwei-Klick-Riegel am Haken ab: es fragt, was
   wirklich offen war, statt nur zu bremsen. */
.crm-lead-vorschau { display: grid; gap: 6px; margin: 0 0 14px; padding: 12px 14px; border-radius: 8px; background: var(--crm-grund); border: 1px solid var(--crm-linie-2); }
.crm-lead-vzeile { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 10px; font-size: .82rem; }
.crm-lead-vzeile > b { font-weight: 600; font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; color: var(--crm-tinte-3); align-self: center; }
.crm-lead-vzeile > span { color: var(--crm-tinte); min-width: 0; overflow-wrap: anywhere; }
.crm-lead-uebwege { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 780px) { .crm-lead-uebwege { grid-template-columns: minmax(0, 1fr); } }
.crm-lead-uebweg { border: 1px solid var(--crm-linie); border-radius: 10px; padding: 14px; display: grid; gap: 8px; }
.crm-lead-uebweg > b { font-size: .9rem; font-weight: 600; color: var(--crm-tinte); }
.crm-lead-uebweg > label { font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; color: var(--crm-tinte-3); margin: 4px 0 -4px; }
.crm-lead-uebweg > input { width: 100%; box-sizing: border-box; font: inherit; font-size: .84rem; background: var(--crm-flaeche); color: var(--crm-tinte); border: 1px solid var(--crm-linie); border-radius: 8px; padding: 8px 10px; }
.crm-lead-uebweg > input:focus-visible { outline: 2px solid var(--crm-akzent); outline-offset: 1px; border-color: var(--crm-akzent); }
.crm-lead-uebweg > button { justify-self: start; }
.crm-lead-trefferliste { display: grid; gap: 4px; }
/* Ein Treffer ist ein Knopf und kein Listeneintrag mit Knopf daneben: der
   ganze Streifen ist die Wahl, und ein kleines Ziel neben einem grossen Text
   trifft niemand auf Anhieb. */
.crm-lead-treffer { appearance: none; cursor: pointer; font: inherit; text-align: left; display: grid; gap: 1px; border: 1px solid var(--crm-linie); background: var(--crm-flaeche); border-radius: 8px; padding: 8px 10px; }
.crm-lead-treffer:hover { border-color: var(--crm-akzent); background: var(--crm-linie-2); }
.crm-lead-treffer > b { font-size: .84rem; font-weight: 600; color: var(--crm-tinte); }
.crm-lead-treffer > span { font-size: .74rem; color: var(--crm-tinte-3); }
.crm-lead-uebfuss { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; border-top: 1px solid var(--crm-linie-2); padding-top: 12px; }


/* ================================================================
   NACHTRAG 04.09.2026 - Produktkatalog und Produktakte.

   Gebaut auf den vorhandenen Bausteinen: crm-seite, crm-kopf, crm-leiste,
   crm-gitter, crm-karte, crm-status, crm-schild, crm-knopf, crm-melde,
   crm-leer, crm-akte, crm-block. Neu ist nur, was der Entwurf zeigt und
   es noch nicht gab: die Kachel mit Bild, die Variantenzeile mit Preis
   rechts, die Dokumentenzeile und die Reiter der Akte.
   ================================================================ */

.crm-pk .crm-karte-kopf { align-items: flex-start; gap: .75rem; }

.crm-pk-bild {
  width: 3rem; height: 3rem; flex: 0 0 auto;
  object-fit: cover; border-radius: .6rem;
  border: 1px solid var(--crm-linie);
  background: var(--crm-grund);
}

.crm-pk-bild--leer {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.4rem; line-height: 1;
}

.crm-pk-titel { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1 1 auto; }

.crm-pk-unter {
  margin: 0; font-size: .8rem; color: var(--crm-tinte-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.crm-pk-spanne {
  margin: .6rem 0 0; font-weight: 600; font-size: .95rem; color: var(--crm-tinte);
}

/* ---- Akte: Reiter ---- */

.crm-d-reiter {
  display: flex; gap: .25rem; margin: 1rem 0 0;
  border-bottom: 1px solid var(--crm-linie);
}

.crm-d-reiter button {
  appearance: none; background: none; border: 0; border-bottom: 2px solid transparent;
  padding: .55rem .9rem; font: inherit; font-weight: 600; font-size: .9rem;
  color: var(--crm-tinte-3); cursor: pointer;
}

.crm-d-reiter button[aria-selected="true"] {
  color: var(--crm-akzent); border-bottom-color: var(--crm-akzent);
}

.crm-d-reiter button[disabled] { color: var(--crm-tinte-3); opacity: .45; cursor: not-allowed; }

/* ---- Akte: Uebersicht ---- */

.crm-d-info {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .9rem;
}

.crm-d-feld { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }

.crm-d-marke {
  font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--crm-tinte-3);
}

.crm-d-wert { font-size: .9rem; color: var(--crm-tinte); }

.crm-d-text { margin: .4rem 0 0; font-size: .9rem; line-height: 1.55; color: var(--crm-tinte-2); }

.crm-d-bild {
  max-width: 100%; margin-top: .8rem; border-radius: .6rem;
  border: 1px solid var(--crm-linie);
}

/* ---- Akte: Varianten ---- */

.crm-d-vzeile,
.crm-d-dzeile {
  display: flex; align-items: center; gap: .8rem;
  padding: .7rem .85rem; border: 1px solid var(--crm-linie); border-radius: .6rem;
  background: var(--crm-flaeche); margin-top: .5rem;
}

.crm-d-vtext, .crm-d-dtext { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1 1 auto; }

.crm-d-vname, .crm-d-dname { font-weight: 600; font-size: .92rem; color: var(--crm-tinte); }

.crm-d-vunter, .crm-d-dtext small {
  font-size: .78rem; color: var(--crm-tinte-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.crm-d-vpreis { display: flex; flex-direction: column; align-items: flex-end; flex: 0 0 auto; }

.crm-d-vbetrag { font-weight: 700; font-size: 1rem; color: var(--crm-tinte); }

.crm-d-vpreis small { font-size: .72rem; color: var(--crm-tinte-3); }

/* AUF ANFRAGE IST KEIN PREIS UND SIEHT AUCH NICHT SO AUS. Sonst liest es
   sich wie ein Betrag, den jemand vergessen hat einzutragen. */
.crm-d-vpreis--anfrage {
  font-weight: 600; font-size: .85rem; color: var(--crm-warn-tinte);
  background: var(--crm-warn-weich); border-radius: .4rem; padding: .2rem .5rem;
}

.crm-d-vtat, .crm-d-dtat { display: flex; gap: .35rem; flex: 0 0 auto; }

/* ---- Akte: Dokumente ---- */

.crm-d-dsymbol { font-size: 1.2rem; line-height: 1; flex: 0 0 auto; }

.crm-d-dname { text-decoration: none; }
.crm-d-dname:hover { text-decoration: underline; }

.crm-d-dkunde {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .78rem; color: var(--crm-tinte-2); white-space: nowrap; flex: 0 0 auto;
}

.crm-schild--bild {
  background: var(--crm-akzent-weich); color: var(--crm-akzent);
  border-color: transparent;
}

.crm-d-hochladen {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin-top: .9rem; padding-top: .9rem; border-top: 1px dashed var(--crm-linie);
  font-size: .85rem;
}

.crm-d-hochladen input[type="file"] { font: inherit; font-size: .85rem; }

.crm-d-hinweis { margin: .4rem 0 0; font-size: .75rem; color: var(--crm-tinte-3); }

@media (max-width: 700px) {
  .crm-d-vzeile, .crm-d-dzeile { flex-wrap: wrap; }
  .crm-d-vpreis { align-items: flex-start; }
}


/* ================================================================
   NACHTRAG 04.09.2026 - Karte gerade gezogen. Im Bild gemessen, nicht geraten.

   DREI FEHLER, die ein Blick auf den Bildschirm zeigte und die Zahlen nicht:

   1. DIE PADDING SITZT IM HAUS AN DEN TEILEN, nicht an der Karte:
      .crm-karte-kopf und .crm-karte-fuss haben je 14px, .crm-karte selbst
      keine. Meine Preiszeile war ein direktes Kind der Karte und lag deshalb
      bis an den Rand - sie braucht die 14px selbst.
   2. DER NAME IST HIER EIN LINK. Ohne text-decoration:none unterstreicht ihn
      der Browser, und ohne ellipsis schiebt ein langer Name die Statusmarke
      aus der Karte: "Betreuungspauschale" und "Inaktiv" standen uebereinander.
   3. DER FUSS BRICHT NICHT UM. SKU, Zaehler, "Bearbeiten" und "Details" passen
      bei 238px Spaltenbreite nicht in eine Zeile - der letzte Knopf war
      abgeschnitten.
   ================================================================ */

.crm-pk-spanne { padding: 0 14px 12px; }

.crm-pk .crm-karte-name {
  display: block; text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.crm-pk .crm-karte-name:hover { text-decoration: underline; }

.crm-pk .crm-status { flex: 0 0 auto; white-space: nowrap; }

.crm-pk .crm-karte-fuss { flex-wrap: wrap; row-gap: 6px; }

/* Die Kachel bleibt quadratisch, auch wenn das Bild es nicht ist. */
.crm-pk-bild { aspect-ratio: 1 / 1; }


/* ================================================================
   NACHTRAG 04.09.2026 - LESEBREITE FUER DAS GANZE CRM.

   Kai auf einem 5120 px breiten Schirm: "mach das einheitlich."

   Vorher hatte KEINE Seite eine Grenze - .crm-main nahm den ganzen Rest,
   und das hiess bei ihm 4846 px Inhaltsbreite. Sichtbar wurde es an der
   Variantenzeile (Name links, Preis fuenftausend Pixel weiter rechts) und
   an der Beschreibung, die zu einer einzigen langen Zeile wird. Kunden und
   Leads hatten dasselbe Verhalten.

   EINE REGEL AN EINER STELLE - .crm-main gilt fuer jede Seite dieser Rolle,
   also auch fuer die, die noch kommen. Eine max-width nur an den
   Produktseiten haette das CRM ungleich gemacht: eine Seite schmal, der
   Rest breit, und niemand weiss, warum.

   LINKSBUENDIG UND NICHT ZENTRIERT: die Navigation steht links, und ein
   Inhalt, der in der Mitte eines 5K-Schirms klebt, laesst zwischen Rail und
   Text ein Loch. 1400 px sind bei dieser Schriftgroesse rund 150 Zeichen je
   Zeile - mehr liest niemand gern.
   ================================================================ */

.crm-main { max-width: 1400px; }

/* ---------------------------------------------------------- Opportunities
   Nachtrag 11, 04.09.2026. Werte aus dem Blatt "Opportunities & Sales
   Funnel": Spalte 320px auf #f8f9fb mit Radius 12, Spaltenkopf weiss und
   haftend mit 16px Polster, Karten weiss mit Radius 8 und 12px Polster,
   Kartenabstand 12px, Zahl im Kopf weiss auf Akzent (2px 8px, Radius 4),
   Stufenchip 10px/700 in Grossbuchstaben, Wert 14px/700 in Akzentfarbe
   zwischen zwei Linien, gewonnene Karte auf #f0fdf4 mit 0.85 Deckkraft.
   Farben ueber die Variablen, wo es sie gibt. */
.crm-opp-kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 18px; }
@media (max-width: 900px) { .crm-opp-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.crm-opp-kachel { background: var(--crm-flaeche); border: 1px solid var(--crm-linie); border-radius: 10px; padding: 14px 16px; display: grid; gap: 2px; }
.crm-opp-kachel > b { font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; font-weight: 600; color: var(--crm-tinte-3); }
.crm-opp-kachel > strong { font-size: 1.35rem; font-weight: 700; color: var(--crm-tinte); letter-spacing: -.01em; }
.crm-opp-kachel > span { font-size: .72rem; color: var(--crm-tinte-3); }

/* --- die Balken: Breite nach Summe --- */
.crm-opp-balken { display: grid; gap: 8px; margin: 0 0 18px; padding: 16px; background: var(--crm-flaeche); border: 1px solid var(--crm-linie); border-radius: 12px; }
.crm-opp-balkenzeile { display: grid; grid-template-columns: 110px minmax(0, 1fr) 32px; gap: 10px; align-items: center; }
.crm-opp-balkenzeile > b { font-size: .8rem; font-weight: 600; color: var(--crm-tinte-2); }
.crm-opp-balkenzeile > small { font-size: .72rem; color: var(--crm-tinte-3); text-align: right; }
.crm-opp-bahn { background: var(--crm-linie-2); border-radius: 6px; height: 32px; overflow: hidden; display: flex; align-items: center; }
.crm-opp-nullwert { padding-left: 12px; font-size: .8rem; font-weight: 600; color: var(--crm-tinte-3); }
.crm-opp-fuellung { height: 32px; border-radius: 6px; display: flex; align-items: center; padding: 0 12px; box-sizing: border-box; color: #fff; font-weight: 700; font-size: .8rem; background: linear-gradient(135deg, var(--crm-akzent), var(--crm-akzent-2)); }
.crm-opp-fuellung[data-stufe="won"] { background: linear-gradient(135deg, #10b981, #047857); }

/* --- das Brett --- */
/* Vier Spalten, jede mit eigenem Rollbereich und haftendem Kopf. Waagerecht
   rollt das Brett als Ganzes: vier Spalten a 320px passen auf einen breiten
   Schirm, auf einem schmalen soll man schieben und nicht die Seite verbiegen. */
.crm-opp-brett { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(320px, 1fr); gap: 16px; overflow-x: auto; align-items: start; padding-bottom: 6px; }
.crm-opp-spalte { background: var(--crm-grund); border: 1px solid var(--crm-linie); border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; max-height: 70vh; }
.crm-opp-spaltenkopf { background: var(--crm-flaeche); padding: 14px 16px; border-bottom: 1px solid var(--crm-linie); display: flex; align-items: center; gap: 8px; position: sticky; top: 0; z-index: 2; }
.crm-opp-spaltenkopf h3 { font-size: .84rem; font-weight: 700; margin: 0; color: var(--crm-tinte); }
.crm-opp-spaltenzahl { font-size: .7rem; font-weight: 700; color: #fff; background: var(--crm-akzent); padding: 2px 8px; border-radius: 4px; }
.crm-opp-spaltenkopf small { margin-left: auto; font-size: .74rem; font-weight: 600; color: var(--crm-tinte-2); }
.crm-opp-karten { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.crm-opp-spaltenleer { margin: 0; text-align: center; color: var(--crm-tinte-3); font-size: .9rem; padding: 8px 0; }

/* --- die Karte --- */
.crm-opp-karte { background: var(--crm-flaeche); border: 1px solid var(--crm-linie); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, .05); transition: border-color .12s, box-shadow .12s, transform .12s; }
.crm-opp-karte:hover { border-color: var(--crm-akzent); box-shadow: var(--crm-schatten-hoch); transform: translateY(-2px); }
/* Gewonnen bleibt sichtbar, tritt aber zurueck: die Spalte Won ist Geschichte
   und keine Arbeitsliste. */
.crm-opp-karte--won { opacity: .85; background: var(--crm-ok-weich); }
.crm-opp-kopf { display: flex; align-items: center; gap: 8px; }
.crm-opp-ampel { font-size: .86rem; line-height: 1; cursor: help; }
.crm-opp-chip { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: var(--crm-linie-2); color: var(--crm-akzent); padding: 2px 6px; border-radius: 3px; }
.crm-opp-chip[data-stufe="won"] { background: var(--crm-ok-weich); color: var(--crm-ok-tinte); }
/* Auf der gruenen Karte waere ein gruener Chip kein Chip mehr. */
.crm-opp-karte--won .crm-opp-chip { background: var(--crm-flaeche); }
.crm-opp-chip[data-stufe="lost"] { background: var(--crm-krit-weich); color: var(--crm-krit-tinte); }
.crm-opp-kopf small { margin-left: auto; font-size: .7rem; font-weight: 600; color: var(--crm-tinte-3); cursor: help; }
.crm-opp-karte h4 { margin: 0; font-size: .82rem; font-weight: 600; color: var(--crm-tinte); line-height: 1.35; }
.crm-opp-firma { margin: 0; font-size: .74rem; color: var(--crm-tinte-3); }
.crm-opp-wert { font-size: .88rem; font-weight: 700; color: var(--crm-akzent); padding: 8px 0; border-top: 1px solid var(--crm-linie-2); border-bottom: 1px solid var(--crm-linie-2); }
.crm-opp-tat { display: flex; gap: 4px; }
.crm-opp-tat button { appearance: none; cursor: pointer; font: inherit; font-size: .8rem; line-height: 1; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--crm-linie); background: var(--crm-flaeche); color: var(--crm-tinte-2); border-radius: 6px; }
.crm-opp-tat button:hover:not([disabled]) { border-color: var(--crm-akzent); color: var(--crm-akzent); }
.crm-opp-tat button[disabled] { opacity: .35; cursor: default; }

/* --- Grund im selben Zug --- */
.crm-opp-grundzeile { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; align-items: center; }
.crm-opp-grundzeile input { width: 100%; box-sizing: border-box; font: inherit; font-size: .78rem; border: 1px solid var(--crm-akzent); border-radius: 6px; padding: 6px 8px; background: var(--crm-flaeche); color: var(--crm-tinte); }
.crm-opp-grundzeile .crm-knopf { padding: 6px 10px; font-size: .74rem; }

/* --- die Ablage der verlorenen --- */
/* Lost ist keine Spalte (Kai, 04.09.2026), aber auch kein Papierkorb: die
   Gruende sind das Wertvollste an einer Vertriebstabelle. */
.crm-opp-verloren { margin-top: 18px; }
.crm-opp-verloren > summary { cursor: pointer; font-size: .8rem; font-weight: 600; color: var(--crm-tinte-2); padding: 8px 0; }
.crm-opp-verloren > summary:hover { color: var(--crm-tinte); }
.crm-opp-verlustliste { display: grid; gap: 6px; }
.crm-opp-verlust { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.5fr) auto minmax(0, 2fr) auto; gap: 10px; align-items: center; background: var(--crm-flaeche); border: 1px solid var(--crm-linie); border-radius: 8px; padding: 8px 12px; font-size: .78rem; }
@media (max-width: 860px) { .crm-opp-verlust { grid-template-columns: minmax(0, 1fr); } }
.crm-opp-verlust > b { font-weight: 600; color: var(--crm-tinte); }
.crm-opp-verlust > span { color: var(--crm-tinte-3); min-width: 0; overflow-wrap: anywhere; }
.crm-opp-verlustwert { font-weight: 600; color: var(--crm-tinte-2); white-space: nowrap; }
.crm-opp-grund { font-style: italic; }


/* ===========================================================================
   NACHTRAG 04.09.2026 - die Einstellungen (/einstellungen).

   ZWEI REITER, EINE SCHIENE, EINE TAFEL. Die Listen brauchen eine Schiene, weil es
   viele kurze Listen sind und man zwischen ihnen springt; die Felder brauchen ein Band,
   weil es fuenf Objektarten sind und man selten wechselt. Deshalb sehen die beiden
   Reiter verschieden aus - nicht aus Laune, sondern weil die Wege verschieden sind.

   .crm-tafel IST DIE ERSTE TABELLE IM CRM. Bisher war alles Karte; hier zaehlt der
   Vergleich Zeile fuer Zeile (Name, Wert, Platz, Verwendung) und nicht das einzelne
   Objekt - eine Karte je Listenwert waere Platzverschwendung mit Suchaufwand.
   =========================================================================== */

.crm-e-reiter {
  display: flex;
  gap: 6px;
  margin: 0 0 18px;
  border-bottom: 1px solid var(--crm-linie);
}

.crm-reiter-knopf {
  appearance: none;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--crm-tinte-2);
  font: inherit;
  font-weight: 600;
  padding: 8px 14px 10px;
  cursor: pointer;
}

.crm-reiter-knopf:hover { color: var(--crm-tinte); }

.crm-reiter-knopf.ist-an {
  color: var(--crm-akzent);
  border-bottom-color: var(--crm-akzent);
}

.crm-e-spalten {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

@media (max-width: 900px) {
  .crm-e-spalten { grid-template-columns: minmax(0, 1fr); }
}

.crm-e-listenrail {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--crm-flaeche);
  border: 1px solid var(--crm-linie);
  border-radius: 10px;
  padding: 12px;
}

.crm-e-gruppe { display: flex; flex-direction: column; gap: 2px; }

.crm-e-gruppe-titel {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--crm-tinte-3);
}

.crm-e-listenknopf {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  appearance: none;
  border: 0;
  background: none;
  border-radius: 7px;
  padding: 7px 9px;
  font: inherit;
  color: var(--crm-tinte);
  text-align: left;
  cursor: pointer;
}

.crm-e-listenknopf:hover { background: var(--crm-grund); }

.crm-e-listenknopf.ist-an {
  background: var(--crm-akzent);
  color: #fff;
}

.crm-e-listenname { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.crm-e-listenzahl {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  color: var(--crm-tinte-3);
}

.crm-e-listenknopf.ist-an .crm-e-listenzahl,
.crm-e-artknopf.ist-an .crm-e-listenzahl { color: rgba(255, 255, 255, .8); }

.crm-e-artenband { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }

.crm-e-artknopf {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  appearance: none;
  border: 1px solid var(--crm-linie);
  background: var(--crm-flaeche);
  border-radius: 999px;
  padding: 6px 14px;
  font: inherit;
  color: var(--crm-tinte);
  cursor: pointer;
}

.crm-e-artknopf:hover { border-color: var(--crm-linie-2); }

.crm-e-artknopf.ist-an {
  background: var(--crm-akzent);
  border-color: var(--crm-akzent);
  color: #fff;
}

.crm-e-listenkopf {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 12px;
}

.crm-e-listenkopf h2 { margin: 0; font-size: 19px; }

.crm-e-schluessel {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--crm-tinte-3);
}

.crm-e-untertitel {
  margin: 20px 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--crm-tinte-3);
}

.crm-e-marken { display: flex; flex-wrap: wrap; gap: 8px; }

.crm-e-marken .crm-schild { display: inline-flex; align-items: center; gap: 6px; }

.crm-e-marken code,
.crm-tafel code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  color: var(--crm-tinte-3);
}

.crm-tafel {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.crm-tafel th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--crm-tinte-3);
  padding: 0 10px 7px;
  border-bottom: 1px solid var(--crm-linie);
  white-space: nowrap;
}

.crm-tafel td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--crm-linie);
  vertical-align: middle;
}

.crm-tafel tr:last-child td { border-bottom: 0; }

/* Ein abgeschalteter Wert ist noch da und nicht weg - blass, aber lesbar. */
.crm-tafel tr.ist-aus td { color: var(--crm-tinte-3); }

.crm-tafel-tat {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.crm-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.crm-e-punkt {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  margin-right: 7px;
  vertical-align: baseline;
}

.crm-e-hinweiszeile {
  display: block;
  font-size: 12px;
  color: var(--crm-tinte-3);
  margin-top: 2px;
}

.crm-e-listenlink {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--crm-akzent);
  cursor: pointer;
  text-align: left;
}

.crm-e-listenlink:hover { text-decoration: underline; }

.crm-schild--warn {
  background: var(--crm-warn-weich);
  color: var(--crm-warn-tinte);
}

/* Der feste technische Wert steht als Satz da, nicht als gesperrtes Feld. */
.crm-e-fest {
  margin: 0 0 14px;
  font-size: 12.5px;
  color: var(--crm-tinte-3);
}


/* NACHTRAG 04.09.2026 - der Block "Weitere Angaben" (crm-felder.js).
   Er sitzt in den Akten und speichert selbst; die Zeile im Fuss sagt, WO die Felder
   herkommen - sonst sucht man sie an der Akte, an der sie nur erscheinen. */

.crm-ef-hinweis {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--crm-tinte-3);
}

.crm-ef-quelle {
  font-size: 12px;
  color: var(--crm-tinte-3);
  align-self: center;
  margin-right: 4px;
}

.crm-melde.crm-ef-melde { margin: 0 0 12px; }


/* NACHTRAG 04.09.2026 (Korrektur) - der Block "Weitere Angaben" bekommt seine eigene Karte.

   ER HING ZUERST AN .crm-akte, UND DAS WAR FALSCH: die Klasse ist auf den Aktenseiten ein
   ZWEISPALTIGES GITTER. Die Ueberschrift landete damit in der linken Spalte und die
   Meldezeile daneben in der rechten - im Bild sofort zu sehen, im DOM nicht. Zweite Lehre
   derselben Art wie bei den Produktkarten: eine Bildschirmaufnahme gehoert zur Messung. */

.crm-eigene {
  display: block;
  margin: 22px 0 0;
  background: var(--crm-flaeche);
  border: 1px solid var(--crm-linie);
  border-radius: 10px;
  box-shadow: var(--crm-schatten);
  padding: 18px 22px 20px;
}

.crm-eigene form.crm-form { display: block; }

.crm-eigene h2 { margin: 0; font-size: 18px; }

.crm-eigene .crm-felder { margin-top: 14px; }

.crm-eigene .crm-form-fuss { margin-top: 18px; }

.crm-eigene .crm-ef-haken {
  display: flex;
  align-items: center;
  gap: 9px;
  text-transform: none;
  letter-spacing: normal;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--crm-tinte);
  margin-top: 18px;
}

.crm-eigene .crm-ef-haken input { width: auto; margin: 0; }

/* ------------------------------------------------------------- Zeitstrahl
   Nachtrag 12, 04.09.2026. Der Strom haengt an drei Stellen (Kundenakte,
   Leadformular, Opportunityformular) und wird von einem Baustein gezeichnet -
   also auch ein Satz Regeln und nicht drei. Farben ueber die Variablen. */
.crm-strom { display: grid; gap: 10px; }
.crm-strom-kopf { display: flex; align-items: baseline; gap: 12px; }
.crm-strom-kopf > b { font-size: .88rem; font-weight: 700; color: var(--crm-tinte); }
.crm-strom-schalter { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--crm-tinte-3); cursor: pointer; }
.crm-strom-schalter input { margin: 0; }

/* Die Eingabe ist eine Zeile und kein Formblock: ein Verlaufseintrag ist eine
   Nebenhandlung, und wer dafuer ein Formular aufklappen muss, laesst es. */
.crm-strom-form { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 6px; align-items: start; }
@media (max-width: 780px) { .crm-strom-form { grid-template-columns: minmax(0, 1fr); } }
.crm-strom-form select, .crm-strom-form input, .crm-strom-form textarea { font: inherit; font-size: .8rem; box-sizing: border-box; background: var(--crm-flaeche); color: var(--crm-tinte); border: 1px solid var(--crm-linie); border-radius: 6px; padding: 7px 9px; }
.crm-strom-form textarea { grid-column: 2 / -1; resize: vertical; min-height: 34px; }
@media (max-width: 780px) { .crm-strom-form textarea { grid-column: auto; } }
.crm-strom-form select:focus-visible, .crm-strom-form input:focus-visible, .crm-strom-form textarea:focus-visible { outline: 2px solid var(--crm-akzent); outline-offset: 1px; border-color: var(--crm-akzent); }
.crm-strom-form .crm-knopf { padding: 7px 12px; font-size: .78rem; align-self: start; }

/* --- die Liste --- */
.crm-strom-liste { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; }
.crm-strom-zeile { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 9px 10px; border-radius: 8px; }
.crm-strom-zeile:nth-child(odd) { background: var(--crm-grund); }
/* Die Systemspur tritt zurueck, ohne zu verschwinden: sie ist der Beweis, nicht
   die Nachricht. */
.crm-strom-zeile--system { opacity: .72; }
.crm-strom-zeile--system .crm-strom-text > b { font-weight: 500; }
.crm-strom-zeichen { font-size: .9rem; line-height: 1.4; }
.crm-strom-text { min-width: 0; }
.crm-strom-text > b { display: block; font-size: .8rem; font-weight: 600; color: var(--crm-tinte); line-height: 1.4; }
.crm-strom-text > p { margin: 2px 0 0; font-size: .78rem; color: var(--crm-tinte-2); line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; }
.crm-strom-zeile > small { font-size: .7rem; color: var(--crm-tinte-3); white-space: nowrap; padding-top: 2px; }
.crm-strom-leer { padding: 12px 10px; font-size: .8rem; color: var(--crm-tinte-3); }

/* ===== NACHTRAG 04.09.2026: EIGENE STATUSWERTE DES MANDANTEN =====
   Ein Status, den der Mandant selbst angelegt hat, hat keine eingebaute Farbe.
   Er bekommt die Akzentmarke - nicht die von "Ehemalig" oder "Kunde", denn eine
   geliehene Farbe behauptet eine Bedeutung, die der Wert nicht hat. */
.crm-status--eigen::before { background: var(--crm-akzent); }
.crm-pille--eigen { background: var(--crm-akzent-weich); color: var(--crm-akzent); }

/* ---------------------------------------------------------------------------
   DIE ANMELDESEITE (06.09.2026).

   Kai: "http://localhost/login siht nicht richihg aus." Sie benutzte die
   Produktvorlage login|openbicmsunauth, und die ist auf Bootstrap gebaut: row,
   col-12, input-container, form-label, form-control, animated-border. Der
   CRM-Auftritt lädt kein Bootstrap — es wirkte also KEINE dieser Klassen.
   Beschriftung und Feld standen nebeneinander, die zwei Felder waren
   unterschiedlich breit, und der Kasten klebte oben links über die ganze Breite.

   Die Produktvorlage bleibt unangetastet: sie gilt für jeden Auftritt. Das CRM hat
   jetzt seine eigene, login|crm-anmelden — mit denselben zwei versteckten Feldern
   (action=openbilogin und dem Antiforgery-Wert), denn ohne die kommt keine
   Anmeldung durch.
   --------------------------------------------------------------------------- */

/* Die Anmeldung ist die einzige Seite ohne Arbeitsfläche — sie darf mittig stehen. */
.crm-main:has(.crm-anmeldung) {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 8vh;

  /* .crm-main ist sonst auf 1400 px Lesebreite begrenzt und steht links. Gemessen:
     bei 2285 px Fenster lag die Karte bei 516 statt in der Mitte. Eine Anmeldeseite
     hat keinen Text zu lesen — sie darf den ganzen Schirm zum Zentrieren nehmen. */
  max-width: none;
}

.crm-main:has(.crm-anmeldung) > .crm-block {
  width: 100%;
  max-width: 23rem;
  padding: 20px 22px 22px;
}

.crm-anmeldung {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.crm-anmeldefeld {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: .78rem;
  color: var(--crm-tinte-2);
}

.crm-anmeldefeld input {
  font: inherit;
  font-size: .85rem;
  padding: 9px 11px;
  border: 1px solid var(--crm-linie);
  border-radius: 10px;
  background: var(--crm-flaeche);
  color: var(--crm-tinte);
}

.crm-anmeldefeld input:focus {
  outline: none;
  border-color: var(--crm-akzent);
  box-shadow: 0 0 0 3px var(--crm-akzent-weich);
}

.crm-anmeldeknopf {
  justify-content: center;
  height: 40px;
  border-radius: 10px;
}

/* Julia hat vor der Anmeldung nichts zu tun: keine Sitzung, keine Aufträge — und sie
   grüßt trotzdem. Ihr Skript hängt fest in der Seitenvorlage openbicrm, also wird sie
   hier weggeräumt. Der Marker steht in login|crm-railleer und gilt genau dann, wenn
   die Leiste die abgemeldete Fassung zeigt. */
body:has(.crm-abgemeldet) #jul-wurzel { display: none; }

/* Abgemeldet gibt es keine Anwendung, durch die man navigieren könnte — also auch keine
   Leiste. Vorher stand dort die Marke und EIN Eintrag „Anmelden", der auf die Seite
   zeigte, auf der man schon war. Die Marke steht jetzt in der Karte (.crm-anmeldemarke).

   Der Marker crm-abgemeldet bleibt im Baum, auch wenn die Leiste unsichtbar ist —
   display:none nimmt das Element nicht aus dem DOM, und :has() braucht es. */
body:has(.crm-abgemeldet) .crm-rail { display: none; }

.crm-anmeldemarke {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  color: var(--crm-tinte);
}

.crm-anmeldemarke b {
  font-size: .94rem;
  font-weight: 700;
  letter-spacing: -.01em;
}