/* ============================================================
   Bruecke fuer das CSS der echten Module.

   Alle Stilblaetter daneben sind unveraenderte Kopien aus src/ und
   bringen ihre eigenen Farben mit. Was sie von AUSSEN erwarten, steht
   hier — und sonst nichts.

   In der Workstation kommen diese Werte aus styles.css (870 KB, zu
   neunzehn Zwanzigsteln fuer Dinge, die es hier nicht gibt) und von
   applyChrome(), das die Akzentfarbe des Anwenders auf <body> setzt.

   Diese Datei MUSS nach allen anderen geladen werden.
   ============================================================ */

/* ---------- 1. Akzent und Grundfarben ----------
   EINE Stelle. Die Workstation laesst den Anwender die Akzentfarbe
   waehlen; hier steht das Orange, mit dem Flo arbeitet. Wer Blau will,
   aendert die drei Zeilen. */
:root{
  --accent:#ef8a3c; --accent-rgb:239,138,60; --accent-dark:#c96a22;
  --accent-softer:rgba(239,138,60,.09);

  /* Helle Flaechen — der Inhalt der Workstation ist immer hell. */
  --text:#12233a; --muted:#8a97a8; --panel:#ffffff; --weiss:#ffffff;
  --line:#e7eef6; --field:#f1f3f8; --surface:#ffffff; --surface2:#f5f8fc;
  --bg:#f5f8fc; --border:#e7eef6; --text-muted:#8a97a8;
  --primary:var(--accent); --primary-soft:rgba(239,138,60,.12);
  --blue:#1a9bdb; --red:#b3261e;
  --ck-chrome:#ffffff; --ck-tint-rgb:239,138,60;
  --ci-akz:var(--accent); --ci-card:#ffffff; --ci-feld:#f1f3f8;
  --ci-line:#e7eef6; --ci-soft:#f5f8fc;

  /* Das Andock-System gibt es hier nicht; die Suite fuellt das Fenster. */
  --dock-right:0px;
  --dock-dur:.18s;
}

/* ---------- 2. Das Fenster ---------- */
html,body{ height:100%; margin:0; background:#f5f8fc; color:var(--text);
  font:14px/1.45 "Roboto Flex","Segoe UI",system-ui,sans-serif; }
*{ box-sizing:border-box; }

/* Die Suite fuellt alles. In der Workstation ist sie ein Andock-Fenster
   am rechten Rand; als eigenstaendiges SaaS gibt es nichts daneben. */
#crsOverlay{ position:fixed; inset:0; display:none; }
#crsOverlay[data-open="true"]{ display:block; }
#crsOverlay > .crs-frame{ position:absolute; inset:0; border-radius:0; }

/* ---------- 3. Die Gaeste ----------
   E-Mail, Kalender, Meetings und Funnels sind eigene Apps. Die Suite
   legt ihre Huelle ueber die Inhaltsflaeche und setzt die Masse direkt
   am Element (gastPlatzieren in crm-suite.js) — hier steht nur, dass
   sie bis dahin weg sind. */
#emailOverlay, #kalenderOverlay, #bookingOverlay, #lmOverlay{ display:none; }
#emailOverlay[data-open="true"], #kalenderOverlay[data-open="true"],
#bookingOverlay[data-open="true"], #lmOverlay[data-open="true"]{ display:block; }
[hidden]{ display:none !important; }

/* Die Seiten der Gaeste fuellen ihre Huelle. */
.gast-frame{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; background:#fff; }
/* Funnels zeichnet selbst hinein (.lm-frame ist position:absolute). */
.crs-imrahmen > .lm-frame{ inset:0; border-radius:0; }

/* Was ohne Server nicht geht, sagt es — statt leer zu bleiben. */
.gast-fehlt{ position:absolute; inset:0; display:grid; place-content:center; justify-items:center;
  gap:10px; padding:40px; text-align:center; background:#fff; }
.gast-fehlt .material-symbols-rounded{ font-size:30px; color:var(--accent); }
.gast-fehlt b{ font-size:15.5px; }
.gast-fehlt p{ margin:0; max-width:46ch; font-size:13.5px; line-height:1.65; color:#41556d; }
.gast-fehlt code{ background:#f1f3f8; border-radius:4px; padding:1px 5px; font-size:12.5px; }

/* ---------- 4. Der Start ----------
   Die Uebersetzungen kommen als Modul und damit zuletzt. Bis dahin
   soll nicht einfach eine weisse Flaeche stehen. */
#start{ position:fixed; inset:0; display:grid; place-content:center; justify-items:center; gap:14px;
  background:#f5f8fc; color:#8a97a8; font-size:13.5px; }
#start .sp{ width:26px; height:26px; border-radius:50%; border:2.5px solid #dbe6f1;
  border-top-color:var(--accent); animation:start-dreh .8s linear infinite; }
@keyframes start-dreh{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ #start .sp{ animation:none; } }

/* ============================================================
   5. Funnels und Meetings im Rahmen der Suite

   Beide bringen eine eigene LINKE Navigation mit — sinnvoll, solange
   sie ein eigenes Fenster sind. Im Rahmen der Suite steht links aber
   schon die Navigation der Suite, und zwei Leisten nebeneinander sind
   keine Navigation mehr.

   Also dasselbe, was die Suite mit der Sales-Maschine macht: deren
   Kopf und Leiste bleiben weg (crm-suite.css Zeile 147). Hier wandert
   die Leiste zusaetzlich nach oben und wird zum Segment-Schalter —
   dem Muster, das die Suite auf ihren eigenen Seiten benutzt
   (.cau-seg in crs-aufgaben.css: helle Pillengruppe, aktives Feld
   weiss mit Schattenkante).

   Rein ueber das Stilblatt. Die Knoepfe bleiben dieselben Elemente
   und tun weiter, was sie tun — es wird nichts umgebaut, nur anders
   gesetzt.
   ============================================================ */

/* ---------- Funnels (Lead Magnet) ----------
   Die Abschnittsleiste wandert per suite-wirt.js in die Titelzeile der
   App, neben den Namen. Eine eigene Zeile darueber waere eine zu viel —
   die Titelzeile hat dafuer schon Plaetze (.lm-kname, .lm-ktabs,
   .lm-krechts).

   Aussehen: .iapp-tab aus md3-kit.css, die Reiter des Produkts —
   Unterstrich am aktiven, kein Chip, kein Rahmen. Hier gespiegelt,
   weil sich den Knoepfen von aussen keine Klasse anheften laesst.

   WARUM ueberall "#lmOverlay" davor: intentio-rahmen.css faerbt die
   App ueber ID-Selektoren (#lmOverlay .lm-nb.lm-an). Eine ID schlaegt
   jede Zahl von Klassen, egal in welcher Reihenfolge die Dateien
   geladen werden. Gemessen, nicht vermutet. */
#lmOverlay.crs-imrahmen > .lm-frame{
  /* Die Leiste ist weg aus dem Raster — es bleibt eine Zeile. */
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:minmax(0,1fr);
}
/* Hinter der App lag der getoente Verlauf des Rahmens. Der Inhalt
   bringt seinen eigenen Grund mit; intentio-rahmen.css setzt den
   Verlauf mit !important, darum die gezielte Ruecknahme. */
#lmOverlay.crs-imrahmen > .lm-frame{ background:#fff !important; }

/* Marke, Cookie-Fussnote und die eigene Suche: die Suite hat ihren
   eigenen Kopf und ihre eigene Suche. */
#lmOverlay.crs-imrahmen .lm-nav > .lm-mk,
#lmOverlay.crs-imrahmen .lm-navfuss,
#lmOverlay.crs-imrahmen .lm-haupt > .lm-chrome{ display:none; }

/* Das Original bleibt, wo die App es erwartet — unsichtbar. Sichtbar
   ist die Kopie in der Titelzeile (siehe suite-wirt.js). */
#lmOverlay.crs-imrahmen > .lm-frame > .lm-nav{ display:none; }

/* Die Kopie ist ein Stueck der Titelzeile, keine Flaeche mehr. */
#lmOverlay.crs-imrahmen .lm-kopf > .lm-nav{
  flex-direction:row; align-items:stretch; align-self:stretch;
  gap:2px; padding:0; margin:0 0 0 4px; min-height:0; width:auto;
  background:transparent; border:0;
  overflow-x:auto; overflow-y:hidden;
}
#lmOverlay.crs-imrahmen .lm-navliste{
  display:inline-flex; align-items:stretch; gap:2px; flex:0 0 auto;
  padding:0; overflow:visible; min-height:0;
}
/* Der Funnel-Name steht im Markup als erstes Kind der Knopfliste. In
   einer Zeile mit Titel und Reitern ist er eine Wiederholung — er
   steht auch in der Liste "Deine Funnels" darunter. */
#lmOverlay.crs-imrahmen .lm-nvgr{ display:none; }

#lmOverlay.crs-imrahmen .lm-nb{
  width:auto; height:auto; padding:0 13px; gap:7px;
  border-radius:0; font-size:13px; font-weight:600;
  white-space:nowrap; background:transparent; box-shadow:none;
}
#lmOverlay.crs-imrahmen .lm-nb .material-symbols-rounded{ font-size:17px; }
#lmOverlay.crs-imrahmen .lm-nb:hover{ background:#eef3f9; color:var(--text,#12233a); }
#lmOverlay.crs-imrahmen .lm-nb.lm-an{
  background:transparent; color:var(--accent-dark,#c96a22); font-weight:700;
  box-shadow:inset 0 -2px 0 var(--accent,#ef8a3c);
}
#lmOverlay.crs-imrahmen .lm-nb.lm-an .material-symbols-rounded{ color:var(--accent-dark,#c96a22); }
/* ============================================================
   6. Navigation und Kopfleiste in #1E599D

   Beide sind in crm-suite.css DURCHSICHTIG — die Farbe kommt vom
   Rahmen darunter (.crs-frame mit --ir-verlauf, einer Toenung aus der
   Akzentfarbe). Darum faerbt eine einzige Zeile den ganzen Bereich.

   Die Schrift- und Hoverfarben muessen mit: .crs-nv & Co. haben ihre
   Werte fest eingebaut (color:#41556d, hover #f2f6fa) — gedacht fuer
   eine weisse Leiste. Auf Dunkelblau waere das unlesbar.

   Die hellen Werte sind nicht erfunden: es sind genau die, die
   intentio-rahmen.css fuer dunkle Designs vorsieht (Zeile 56 ff.).
   Der Kommentar dort sagt, sie sind so gewaehlt, dass Text 4,5:1 und
   Symbole 3:1 erreichen.

   "#crsOverlay" davor, weil die Regeln in crm-suite.css sonst
   gleichauf liegen und die Reihenfolge entscheiden wuerde.
   ============================================================ */
#crsOverlay .crs-frame{ background:#1E599D; }

/* ---------- Marke ---------- */
#crsOverlay .crs-mt b{ color:#fff; }
#crsOverlay .crs-mt small{ color:rgba(255,255,255,.72); }
#crsOverlay .crs-mt small em{ color:#fff; }

/* ---------- Navigationseintraege ---------- */
#crsOverlay .crs-nv{ color:rgba(255,255,255,.88); }
#crsOverlay .crs-nv .material-symbols-rounded{ color:rgba(255,255,255,.72); }
#crsOverlay .crs-nv:hover{ background:rgba(255,255,255,.10); color:#fff; }
#crsOverlay .crs-nv:hover .material-symbols-rounded{ color:#fff; }
#crsOverlay .crs-nv.an{ background:rgba(255,255,255,.16); color:#fff; }
#crsOverlay .crs-nv.an .material-symbols-rounded{ color:#fff; }
#crsOverlay .crs-nv:focus-visible{ outline-color:#fff; }
/* Der gezogene Eintrag hob sich mit weissem Grund ab — auf Weiss. */
#crsOverlay .crs-nv.crs-zieht{ background:rgba(255,255,255,.22); color:#fff; }
#crsOverlay .crs-nvmarke{ background:#fff; }
/* Gruppenueberschriften und der Fuss der Leiste. */
#crsOverlay .crs-gruppe{ color:rgba(255,255,255,.62); }
#crsOverlay .crs-navfuss{ border-top-color:rgba(255,255,255,.16); }
/* Der Zaehler bleibt im Akzent: er soll auffallen, und Orange auf
   Blau tut das deutlicher als Weiss auf Weiss-durchscheinend. */
#crsOverlay .crs-nz{ background:var(--accent); color:#fff; }

/* ---------- Kopfleiste ---------- */
#crsOverlay .crs-gs-feld{ background:rgba(255,255,255,.12); color:rgba(255,255,255,.72); }
#crsOverlay .crs-gs-feld input{ color:#fff; }
#crsOverlay .crs-gs-feld input::placeholder{ color:rgba(255,255,255,.62); }
#crsOverlay .crs-gs-feld kbd{ background:rgba(255,255,255,.18); color:#fff; }
/* Beim Tippen wird das Feld weiss — dann muss die Schrift zurueck auf
   Dunkel, sonst schreibt man in Weiss auf Weiss. */
#crsOverlay .crs-gs-feld:focus-within{ background:#fff; color:#8a97a8; }
#crsOverlay .crs-gs-feld:focus-within input{ color:#12233a; }
#crsOverlay .crs-gs-feld:focus-within input::placeholder{ color:#8a97a8; }
/* Schliessen-Knopf */
#crsOverlay .crs-x{ color:rgba(255,255,255,.82); }
#crsOverlay .crs-x:hover{ background:rgba(255,255,255,.10); color:#fff; }

/* Das Menue "Mehr" gehoert zur Navigation und trug deshalb deren Ton —
   eine helle Toenung aus der Akzentfarbe, also Pfirsich. Neben einer
   dunkelblauen Leiste sieht das nach Versehen aus. Es schwebt ueber
   dem Inhalt, also bekommt es die Flaeche der uebrigen schwebenden
   Menues der Suite: Weiss, wie die Trefferliste der Suche
   (.crs-gs-erg in crm-suite.css).

   Es haengt am body, nicht im Overlay — darum die ID. */
#crsMehr{ background:#fff; }

/* ---------- Die runde Ecke der Gaeste ----------
   Auf den eigenen Seiten der Suite setzt der Inhalt mit einer runden
   Ecke oben links ein (.crs-body, 18px). Die Gast-Huellen liegen
   GENAU darauf — gemessen beide bei 240,64, derselbe Punkt — und
   deckten sie mit einer eckigen Flaeche zu.

   Der Radius sitzt am inneren Rahmen, nicht an der Huelle: die Huelle
   mit overflow:hidden zu beschneiden wuerde auch schwebende Menues
   abschneiden, die aus der App herausragen. Ein iframe beschneidet
   seinen Inhalt ohnehin selbst. */
.crs-imrahmen > .gast-frame,
.crs-imrahmen > .gast-fehlt,
#lmOverlay.crs-imrahmen > .lm-frame{
  border-top-left-radius:var(--ir-ecke, 18px);
}
/* Die E-Mail-Huelle ist in der Workstation ein Modal und bringt einen
   dunklen Schleier mit (email.css, rgba(4,7,12,.55)). Im Rahmen der
   Suite ist sie keine Ueberblendung, sondern eine Seite — und hinter
   der runden Ecke kaeme sonst ein dunkler Zipfel zum Vorschein.
   Gemessen: die drei anderen Huellen sind durchsichtig, nur diese
   nicht. */
#emailOverlay.crs-imrahmen{ background:transparent !important; }

/* ============================================================
   Ueberschriften in der Navigation (crm-suite.js, navHtml).

   Dezent heisst: klein, zurueckgenommen, viel Luft darueber. Sie
   sollen gliedern, nicht mitreden — darum keine Linien und keine
   Farbe, nur Abstand und ein blasses Weiss.
   ============================================================ */
#crsNav .crs-navkat{
  margin:18px 0 5px; padding:0 13px;
  font-size:10px; font-weight:800; letter-spacing:.09em;
  text-transform:uppercase; color:rgba(255,255,255,.40);
  user-select:none; white-space:nowrap;
}
#crsNav .crs-navkat:first-child{ margin-top:4px; }

/* Eingeklappt passt kein Wort mehr in das schmale Band. Statt den
   Text zu verstecken und eine Luecke zu lassen, wird die
   Ueberschrift zu einem Strich: die Gliederung bleibt sichtbar,
   ohne dass etwas quer steht. */
#crsFrame.eng #crsNav .crs-navkat{
  margin:12px 12px 8px; padding:0;
  height:1px; overflow:hidden; text-indent:-9999px;
  background:rgba(255,255,255,.18);
}

/* Die Reiterzeile in Leads/Deals faellt weg: die Navigation hat
   jetzt zwei Eintraege, und zwei Bedienungen fuer eine Entscheidung
   sind eine zu viel. Die Knoepfe bleiben im Dokument — leads-de.js
   drueckt sie, um die Maschine umzuschalten. */
#crsFrame .cld-tabs{ display:none; }