/* ============================================================
   DAS NEUE DESIGN: ein Hintergrund, viele Inseln

   Bis hierher war die Suite eine Flaeche. Weisse Spalten
   stiessen aneinander, und wo eine endete, fing die naechste
   an; der Hintergrund war nur das, was uebrig blieb.

   Hier ist es umgekehrt. Der Hintergrund liegt ueber die ganze
   Seite, durchgehend und ohne Naht, und alles andere liegt
   darauf. Zwischen den Inseln sieht man ihn, und genau das
   haelt die Seite zusammen.

   DREI REGELN, aus denen alles Weitere folgt:
     1. Nichts ist randlos. Jede Flaeche hat vier Ecken und
        einen Abstand zur naechsten.
     2. Weiss ist Inhalt. Was keinen Inhalt traegt (Seitenkopf,
        Kennzahlen, Filterzeile), steht direkt auf dem Grund.
     3. Der Schatten traegt, er umrandet nicht. Weich und gross
        statt einer Haarlinie - eine Karte liegt auf, sie klebt
        nicht.

   WARUM EINE LAGE DARUEBER UND KEIN EINGRIFF: crm-suite.css,
   crm.css, sales-suite.css und die uebrigen sind unveraenderte
   Kopien aus der Workstation (werkzeug/aus-workstation-holen.cjs).
   Diese Datei wird als LETZTE geladen und gewinnt damit bei
   gleicher Spezifitaet. Wo das nicht reicht, steht hier eine
   Stelle mehr im Selektor - nie ein !important, solange es ohne
   geht, sonst ist die naechste Aenderung nicht mehr zu machen.

   ABSCHALTEN: <body class="flach"> gibt den alten Stand zurueck.
   Jede Regel hier haengt an body:not(.flach).
   ============================================================ */

:root {
  --sw-rund: 20px;
  --sw-rund-klein: 13px;
  --sw-luft: 14px;
  --sw-schatten: 0 1px 2px rgba(22,35,58,.04), 0 8px 24px rgba(22,35,58,.055);
  --sw-schatten-hoch: 0 2px 6px rgba(22,35,58,.06), 0 18px 44px rgba(22,35,58,.10);
  --sw-leiste: #1b2434;

  /* ---------- Zwei Farben, zwei Aufgaben ----------
     So macht es das Vorbild, und es ist der Grund, warum die
     Oberflaeche dort ruhig wirkt, obwohl viel darauf steht:

     SCHWARZ sagt "hier stehst du gerade" und "das ist die eine
     Handlung". Der aktive Reiter, der gewaehlte Filter, der
     Knopf oben rechts - alle dieselbe dunkle Flaeche. Weil sie
     dieselbe Farbe haben, konkurrieren sie nicht.

     AMBER sagt "hier bist du in der Navigation". Genau EIN
     Element traegt es. Waere es auch an den Knoepfen, waeren es
     zehn gelbe Flecken und keiner hiesse mehr etwas.

     Was NICHT aus dem Bild kommt: gut/warm/kalt. Die sind
     Bedeutung und keine Gestaltung - sie bleiben, wie sie sind,
     damit "ueberfaellig" in jedem Design rot ist. */
  --sw-aktiv: #16233a;
  --sw-aktiv-text: #ffffff;
  --sw-amber: #f0bf3c;
  --sw-amber-tinte: #241c05;

  /* Der Grund. Vier Stimmungen zur Wahl; umgestellt wird mit
     einem Attribut am <html>, siehe design.js.

     FUENF KEGEL, NICHT DREI: zwei oben, drei unten. Vorher lagen
     alle farbigen Lichter oben, und unten stand nur der blanke
     Grundton. Ein grauer Verlauf nach unten half nicht - er machte
     es dunkler, aber nicht farbig, und genau die FARBE fehlte:
     oben gruen und pfirsich, unten nichts. Das wirkte, als sei
     der untere Teil der Seite ausgeblichen.

     Die unteren Kegel sitzen ausserhalb des Bildes (102 bis 112 %),
     damit man ihre Mitte nicht sieht - zu sehen ist nur ihr
     Auslauf, und der reicht hoch genug, um die Flaeche unter dem
     Inhalt zu faerben. */
  --sw-grund: #f4f1ea;
  --sw-licht:
    radial-gradient(900px 620px at 12% -8%,  rgba(166,214,190,.52), transparent 62%),
    radial-gradient(760px 540px at 88% 2%,   rgba(247,206,176,.50), transparent 60%),
    radial-gradient(820px 620px at  6% 108%, rgba(170,210,186,.46), transparent 64%),
    radial-gradient(900px 660px at 96% 102%, rgba(244,205,178,.44), transparent 62%),
    radial-gradient(900px 700px at 55% 112%, rgba(196,217,241,.40), transparent 66%);
}
html[data-grund="himmel"] {
  --sw-grund: #eef4fa;
  --sw-licht:
    radial-gradient(880px 600px at 8% -6%,   rgba(26,155,219,.20),  transparent 60%),
    radial-gradient(720px 520px at 94% 6%,   rgba(126,196,232,.26), transparent 58%),
    radial-gradient(820px 600px at  4% 106%, rgba(26,155,219,.17),  transparent 62%),
    radial-gradient(880px 640px at 98% 104%, rgba(126,196,232,.24), transparent 60%),
    radial-gradient(900px 700px at 52% 114%, rgba(186,214,238,.44), transparent 66%);
}
html[data-grund="papier"] {
  --sw-grund: #f6f3ee;
  --sw-licht:
    radial-gradient(860px 580px at 16% -4%,  rgba(232,219,199,.70), transparent 60%),
    radial-gradient(700px 520px at 92% 10%,  rgba(241,228,214,.80), transparent 58%),
    radial-gradient(820px 600px at  4% 106%, rgba(228,212,188,.62), transparent 62%),
    radial-gradient(860px 620px at 98% 104%, rgba(238,224,206,.66), transparent 60%),
    radial-gradient(840px 660px at 50% 112%, rgba(222,222,210,.52), transparent 66%);
}
html[data-grund="kuehl"] {
  --sw-grund: #f5f8fc;
  --sw-licht:
    radial-gradient(820px 560px at 10% -6%,  rgba(223,233,245,.90), transparent 62%),
    radial-gradient(700px 500px at 92% 4%,   rgba(230,238,247,.85), transparent 58%),
    radial-gradient(820px 580px at  4% 106%, rgba(214,227,242,.80), transparent 62%),
    radial-gradient(860px 600px at 98% 104%, rgba(224,234,246,.78), transparent 60%),
    radial-gradient(880px 660px at 50% 112%, rgba(210,224,240,.60), transparent 66%);
}

/* ============================================================
   0 - Was vorher da war, und warum hier ein #crsOverlay steht

   bruecke.css faerbt die Suite seit jeher in #1E599D: eine
   einzige Zeile am .crs-frame, von der Navigation und Kopfleiste
   ihre Farbe erben, dazu 25 Regeln, die Schrift und Symbole auf
   Blau lesbar halten. Das war die alte Gestaltung.

   Diese Regeln stehen hinter einem ID-Selektor (#crsOverlay) -
   dort steht auch begruendet warum: sonst laegen sie gleichauf
   mit crm-suite.css und die Reihenfolge entschiede. Eine
   Klassenregel von hier kommt dagegen nicht an.

   Darum traegt jede Regel, die eine von ihnen ersetzt, dieselbe
   Stelle im Selektor. NICHT weil Spezifitaet huebsch waere,
   sondern weil !important die naechste Aenderung unmoeglich
   machen wuerde. bruecke.css bleibt unangetastet: schaltet man
   hier auf .flach, ist die alte Gestaltung vollstaendig zurueck.
   ============================================================ */

/* ============================================================
   1 - Das Geruest

   .crs-frame ist ein Raster aus zwei Spalten (240px | Rest) und
   war bisher randlos. Jetzt traegt es den Grund, bekommt Polster
   und einen Abstand zwischen den Spalten - damit stehen
   Navigation und Hauptbereich als zwei Inseln da.
   ============================================================ */
/* DER GRUND GEHOERT AN DIE WURZEL, nicht an ein Element in der
   Mitte. Er stand zuerst am .crs-frame - und der deckt das
   Fenster zwar vollstaendig ab, aber eben nur, solange nichts
   daneben liegt: eine Rollleiste, ein Ueberhang, der Streifen
   zwischen Layout-Viewport und Fensterkante. Ueberall dort kam
   #f5f8fc von <html> und <body> zum Vorschein - der ALTE
   Grundton, blaeulich gegen das cremige Neue.

   Genau das war auf fast jeder Seite unten als heller Streifen
   zu sehen. Am .crs-frame gemessen war immer alles richtig; der
   Fehler lag eine Ebene darueber, dort, wo ich nicht gemessen
   hatte.

   Jetzt tragen html und body den Grund, und der Rahmen ist
   durchsichtig. Damit gibt es genau EINE Stelle, an der die
   Farbe steht, und nichts dahinter, das anders sein koennte. */
html {
  background-color: var(--sw-grund);
  background-image: var(--sw-licht);
  /* Fest am Fenster, nicht am Inhalt: wer rollt, bewegt die
     Inseln ueber das Licht hinweg, und das Licht bleibt. */
  background-attachment: fixed;
}
body:not(.flach) { background: transparent; }

body:not(.flach) #crsOverlay .crs-frame,
body:not(.flach) .crs-frame {
  background: transparent;
  /* Keine Luft am Rahmen: die Navigation ist kein Moebel, das im
     Raum steht, sondern die Wand. Den Abstand traegt jetzt der
     Hauptbereich (siehe .crs-haupt weiter unten), damit die
     Inseln rechts ihre Luecken behalten. */
  padding: 0;
  gap: 0;
  grid-template-columns: 240px minmax(0, 1fr);
  overflow: visible;
  /* DREI SCHATTEN AUS DER WORKSTATION, die hier nichts zu suchen
     haben. crm-suite.css setzt am Rahmen:

       inset 1px 0 0 0 rgba(accent,.32)   Streifen innen links
       0 0 0 1px rgba(18,35,58,.10)       Rahmen aussen herum
       -10px 0 26px -14px rgba(...,.38)   Schatten nach links

     In der Workstation ist die Suite ein Andock-Fenster am
     rechten Bildrand: dort ist die linke Kante eine echte Kante
     zum Hauptfenster, und die drei zeichnen sie nach. Als SaaS
     fuellt sie das ganze Fenster - dann umranden sie einfach den
     Bildschirm und legen einen grauen Rahmen um alles. */
  box-shadow: none;
}
/* Mit #crsOverlay, wie die Regel darueber: die traegt eine ID,
   und gegen eine ID gewinnt keine Kette aus Klassen. Ohne das
   blieb die Spalte beim Einklappen auf 240px stehen — die
   Leiste wurde nicht schmal, sondern ragte mit voller Breite
   unter den Inhalt. */
body:not(.flach) #crsOverlay .crs-frame.eng,
body:not(.flach) .crs-frame.eng { grid-template-columns: 72px minmax(0, 1fr); }
/* Und die Leiste darf sich nicht von ihrem Inhalt aufblaehen
   lassen: ein Grid-Kind hat min-width:auto, also die
   MINDESTbreite seines Inhalts. */
body:not(.flach) #crsOverlay .crs-nav,
body:not(.flach) .crs-nav { min-width: 0; }

/* ---------- Die Navigation: angedockt, nicht schwebend ----------

   Sie war eine dunkle Insel: 24 Pixel Radius, Schatten, ringsum
   Luft. Das war als Gegensatz gedacht — und genau das war das
   Problem. Die Navigation ist kein Inhalt, sondern der Rahmen,
   in dem Inhalt steht. Ein Rahmen, der schwebt und die
   kraeftigste Farbe der Seite traegt, zieht jedes Mal den Blick
   auf sich, wenn man eigentlich auf die Tabelle schaut.

   Jetzt steht sie buendig an drei Kanten, ohne Radius und ohne
   Schatten, und ist weiss wie der Inhalt. Getrennt wird durch
   eine Linie, nicht durch eine Luecke.

   Der aktive Eintrag traegt KEINE gefuellte Akzentflaeche mehr,
   sondern einen Balken am linken Rand der Leiste. Eine volle
   Farbflaeche in einer weissen Spalte ist der zweite Blickfang
   neben dem Inhalt; der Balken sagt dasselbe und nimmt der
   Spalte nichts. (Variante "Kante" aus der Vorschau.) */
body:not(.flach) .crs-nav {
  background: #fff;
  border-radius: 0;
  box-shadow: none;
  border-right: 1px solid var(--scrm-linie, #e7eef6);
  padding: 14px 10px 10px;
  overflow: hidden;
}
body:not(.flach) #crsOverlay .crs-marke,
body:not(.flach) .crs-marke { color: var(--scrm-tinte, #12233a); padding-inline: 6px; }
body:not(.flach) .crs-marke small,
body:not(.flach) .crs-marke .crs-mt small { color: var(--scrm-mut, #8a97a8); }
body:not(.flach) .crs-navliste { margin: 0 -4px; padding: 0 4px; }
body:not(.flach) .crs-navliste::-webkit-scrollbar { width: 6px; }
body:not(.flach) .crs-navliste::-webkit-scrollbar-thumb { background: rgba(18,35,58,.14); border-radius: 3px; }
body:not(.flach) .crs-navfuss { border-top-color: var(--scrm-linie, #e7eef6); }

/* Mit #crsOverlay geschrieben, nicht nur body:not(.flach):
   bruecke.css setzt die Schrift der Leiste mit genau diesem
   ID-Selektor auf rgba(255,255,255,.88). Gegen eine ID gewinnt
   keine Verkettung aus Klassen, egal wie spaet sie geladen wird
   — die Eintraege standen weiss auf weiss. Gemessen. */
body:not(.flach) #crsOverlay .crs-nv,
body:not(.flach) .crs-nv {
  position: relative;
  color: var(--scrm-text2, #4b5564);
  border-radius: 10px;
  background: transparent;
}
body:not(.flach) #crsOverlay .crs-nv .material-symbols-rounded,
body:not(.flach) .crs-nv .material-symbols-rounded { color: var(--scrm-mut, #8a97a8); }
body:not(.flach) #crsOverlay .crs-nv:hover,
body:not(.flach) .crs-nv:hover { background: rgba(18,35,58,.05); color: var(--scrm-tinte, #12233a); }
body:not(.flach) #crsOverlay .crs-nv:hover .material-symbols-rounded,
body:not(.flach) .crs-nv:hover .material-symbols-rounded { color: var(--scrm-tinte, #12233a); }
/* Der Balken sitzt am Rand der LEISTE, nicht am Eintrag: die
   Nav hat 10 Pixel Innenabstand, also ragt er genau so weit
   hinaus. */
body:not(.flach) #crsOverlay .crs-nv.an::before,
body:not(.flach) .crs-nv.an::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 7px;
  bottom: 7px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent, #f0862f);
}
body:not(.flach) #crsOverlay .crs-nv .crs-nz,
body:not(.flach) .crs-nv .crs-nz { background: var(--accent, #f0862f); color: #fff; }
body:not(.flach) #crsOverlay .crs-gruppe,
body:not(.flach) .crs-gruppe { color: var(--scrm-mut, #8a97a8); }
/* Reste aus der dunklen Zeit: bruecke.css setzt Markentext und
   die Trennlinie ueber dem Fuss auf Weiss (ID-Selektor). Auf der
   hellen Leiste war der Untertitel weiss auf weiss und die Linie
   unsichtbar. */
body:not(.flach) #crsOverlay .crs-mt b { color: var(--scrm-tinte, #12233a); }
body:not(.flach) #crsOverlay .crs-mt small { color: var(--scrm-mut, #8a97a8); }
body:not(.flach) #crsOverlay .crs-mt small em { color: var(--accent-dark, #a3530f); }
body:not(.flach) #crsOverlay .crs-navfuss { border-top-color: var(--scrm-linie, #e7eef6); }
/* Die Gruppenueberschriften heissen .crs-navkat (nicht
   .crs-gruppe) und haengen in bruecke.css an #crsNav — eine
   zweite ID. Sie standen weiss auf weiss, bis hierher. */
body:not(.flach) #crsOverlay #crsNav .crs-navkat,
body:not(.flach) #crsNav .crs-navkat { color: var(--scrm-mut, #8a97a8); }
body:not(.flach) .crs-mehrknopf { color: var(--scrm-text2, #4b5564); }
body:not(.flach) .crs-mehrknopf:hover,
body:not(.flach) .crs-mehrknopf.an { background: rgba(18,35,58,.05); color: var(--scrm-tinte, #12233a); }
body:not(.flach) .crs-mehrpfeil { color: var(--scrm-mut, #8a97a8); }

/* Das Menue "Mehr" faehrt aus der dunklen Leiste heraus - es
   bleibt hell, weil darin Inhalt steht und kein Geruest. */
body:not(.flach) .crs-mehr {
  border-radius: var(--sw-rund);
  box-shadow: var(--sw-schatten-hoch);
  border: 0;
  overflow: hidden;
}

/* ---------- Der Hauptbereich ----------
   Er war weiss. Jetzt ist er durchsichtig: was man sieht, sind
   die Inseln darin, und dazwischen der Grund. */
body:not(.flach) .crs-haupt {
  background: transparent;
  gap: var(--sw-luft);
  min-height: 0;
  /* Der Abstand, den frueher der Rahmen trug. Links bleibt er
     weg: dort steht die Leiste mit ihrer Linie, und eine Luecke
     daneben waere genau das Schweben, das hier abgeschafft
     wird. */
  padding: var(--sw-luft) var(--sw-luft) var(--sw-luft) var(--sw-luft);
}

/* ---------- Die Kopfleiste: eine Insel in drei Spalten ----------
   Links die angehefteten Seiten, in der Mitte die Suche, rechts
   das Konto.

   Ein Raster aus 1fr | auto | 1fr und nicht flex mit Luecken:
   nur so steht die Suche in der MITTE DES FENSTERS und nicht in
   der Mitte dessen, was zwischen links und rechts uebrig bleibt.
   Sobald eine Seite angeheftet wird, waere sie sonst verrutscht -
   und mit jeder weiteren ein Stueck mehr. */
body:not(.flach) .crs-kopf {
  background: #fff;
  border-radius: var(--sw-rund);
  box-shadow: var(--sw-schatten);
  border-bottom: 0;
  padding: 8px 12px;
  min-height: 56px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  transition: outline-color .18s, background .18s;
  outline: 2px dashed transparent;
  outline-offset: -4px;
}
/* Sie ist Ziel, solange etwas darueber haengt. */
body:not(.flach) .crs-kopf.tb-zielt {
  background: #f6fbfe;
  outline-color: rgba(var(--accent-rgb, 26,155,219), .5);
}
body:not(.flach) .crs-kopf > .tb-pins { grid-column: 1; justify-self: start; }
body:not(.flach) .crs-kopf > #crsGSucheBox { grid-column: 2; justify-self: center; width: min(520px, 42vw); max-width: none; }
body:not(.flach) .crs-kopf > #ktoKnopf { grid-column: 3; justify-self: end; }
/* Der Schliessen-Knopf gehoert in der SaaS nicht hierher - es
   gibt nichts, wohin man die Suite schliessen koennte. */
body:not(.flach) .crs-kopf > .crs-x { display: none; }

/* Das Konto ist nur noch der Kreis. Der Name stand daneben und
   wiederholte, was im Menue darunter ohnehin oben steht. */
body:not(.flach) #ktoKnopf .kto-name { display: none; }
body:not(.flach) #ktoKnopf {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
}
body:not(.flach) #ktoKnopf .kto-kreis {
  width: 34px; height: 34px;
  font-size: 12.5px; font-weight: 700;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px transparent;
  transition: box-shadow .16s;
}
body:not(.flach) #ktoKnopf:hover .kto-kreis,
body:not(.flach) #ktoKnopf.an .kto-kreis {
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(var(--accent-rgb, 26,155,219), .55);
}
/* Die Lage des Menues rechnet konto.js (menueStellen) und setzt
   sie als Inline-Stil — seit es an body haengt statt in der
   Topbar, die es mit overflow:hidden abgeschnitten hat.

   Hier stand "right:12px; left:auto". Das widerspricht dem jetzt.
   Der Inline-Stil gewinnt zwar, aber wer diese Regel liest, sucht
   den Fehler danach an der falschen Stelle. */

/* ---------- Die angehefteten Seiten ---------- */
.tb-pins { display: flex; align-items: center; gap: 5px; min-width: 0; }
.tb-pin {
  display: inline-flex; align-items: center; gap: 7px;
  border: 0; font-family: inherit; cursor: grab;
  background: #f2f5f9; color: #55657c;
  font-size: 12.5px; font-weight: 600;
  padding: 7px 11px; border-radius: 11px;
  max-width: 180px;
  transition: background .15s, color .15s;
}
.tb-pin:hover { background: #e8eef6; color: #16233a; }
.tb-pin.an { background: var(--sw-aktiv, #16233a); color: #fff; }
.tb-pin > span:not(.tb-ab) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-pin .material-symbols-rounded { font-size: 17px; flex: none; }
.tb-pin .tb-ab {
  flex: none; width: 17px; height: 17px; margin: 0 -3px 0 1px;
  border-radius: 6px; display: grid; place-items: center;
  opacity: 0; transition: opacity .15s, background .15s;
}
.tb-pin .tb-ab .material-symbols-rounded { font-size: 14px; }
.tb-pin:hover .tb-ab { opacity: .5; }
.tb-pin .tb-ab:hover { opacity: 1; background: rgba(0,0,0,.09); }
.tb-pin.an .tb-ab:hover { background: rgba(255,255,255,.2); }
.tb-pin.tb-gezogen { opacity: .34; }

/* Solange nichts oben liegt, steht hier, wozu die Zeile da ist.
   Eine leere Flaeche erklaert sich nicht von selbst. */
.tb-leer {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; color: #a8b3c2; padding-left: 2px;
  white-space: nowrap;
}
.tb-leer .material-symbols-rounded { font-size: 16px; }

.tb-marke { width: 2px; align-self: stretch; min-height: 26px; background: var(--accent, #1a9bdb); border-radius: 2px; }

/* Der Geist am Zeiger. */
.tb-geist {
  position: fixed; z-index: 9000; pointer-events: none; display: none;
  align-items: center; gap: 8px;
  background: var(--sw-leiste, #1b2434); color: #fff;
  font-size: 12.5px; font-weight: 600;
  padding: 8px 13px; border-radius: 11px;
  box-shadow: 0 12px 30px rgba(16,24,40,.34);
}
.tb-geist .material-symbols-rounded { font-size: 16px; }
body.tb-zieht, body.tb-zieht * { cursor: grabbing !important; user-select: none; }
/* Beim Ziehen fasst man die Seite selbst an - ein Greifzeiger
   sagt das, bevor man es ausprobiert. */
body:not(.flach) .crs-nv[data-crssicht] { cursor: grab; }
.crs-nv.tb-gezogen { opacity: .34; }

/* Die Kopfleiste war durchsichtig und nahm das Blau des Rahmens
   an; alles darin ist deshalb fuer dunklen Grund gebaut. Jetzt
   ist sie eine weisse Insel - weisse Schrift auf Weiss waere
   unsichtbar, also kommen die Farben von darin zurueck auf die
   Werte, die crm-suite.css ohnehin vorsieht. */
body:not(.flach) #crsOverlay .crs-gs-feld {
  background: #f2f5f9;
  color: #8a97a8;
}
body:not(.flach) #crsOverlay .crs-gs-feld input { color: #12233a; }
body:not(.flach) #crsOverlay .crs-gs-feld input::placeholder { color: #8a97a8; }
body:not(.flach) #crsOverlay .crs-gs-feld kbd { background: #e3eaf3; color: #55657c; }
body:not(.flach) #crsOverlay .crs-gs-feld:focus-within {
  background: #fff;
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb, 26,155,219), .22);
}
body:not(.flach) #crsOverlay .crs-x { color: #55657c; }
body:not(.flach) #crsOverlay .crs-x:hover { background: #f1f5fa; color: #12233a; }

/* Der aktive Eintrag trug Amber — auf der dunklen Leiste war das
   die eine Stelle, die Farbe hatte. Auf der hellen Leiste ist es
   der zweite Blickfang neben dem Inhalt, und davon gibt es nur
   einen. Jetzt eine ruhige Flaeche plus der Balken am Rand
   (siehe oben). */
body:not(.flach) #crsOverlay .crs-nv.an,
body:not(.flach) .crs-nv.an {
  background: rgba(18,35,58,.05);
  color: var(--scrm-tinte, #12233a);
  font-weight: 700;
  box-shadow: none;
}
body:not(.flach) #crsOverlay .crs-nv.an .material-symbols-rounded,
body:not(.flach) .crs-nv.an .material-symbols-rounded { color: var(--accent-dark, #a3530f); }
body:not(.flach) #crsOverlay .crs-nv.an .crs-nz {
  background: var(--accent, #f0862f);
  color: #fff;
}
/* NICHT auf dem aktiven Eintrag. Sechs Regeln quer durch drei
   Stilblaetter setzen hier einen Hover-Grund, und keine davon
   nimmt .an aus - beim Darueberfahren verschwand das Amber
   also unter einer hellen Flaeche, und die eine Stelle, die
   sagt "hier bist du", sagte es ausgerechnet dann nicht mehr,
   wenn der Zeiger darauf steht.

   :not(.an) an der spezifischsten Regel genuegt: sie gewinnt
   gegen alle sechs, und wo sie nicht greift, greift gar keine. */
body:not(.flach) #crsOverlay .crs-nv:hover:not(.an),
body:not(.flach) .crs-nv:hover:not(.an) { background: rgba(18,35,58,.05); }
body:not(.flach) #crsOverlay .crs-nv.an:hover,
body:not(.flach) .crs-nv.an:hover {
  background: rgba(18,35,58,.08);
  color: var(--scrm-tinte, #12233a);
}
body:not(.flach) #crsOverlay .crs-nv.an:hover .material-symbols-rounded { color: var(--accent-dark, #a3530f); }
/* Der Strich, der den aktiven Eintrag markiert, ist daneben
   doppelt gemoppelt - die Flaeche sagt es schon. */
body:not(.flach) #crsOverlay .crs-nvmarke { display: none; }

/* ============================================================
   1b - Schwarz heisst "aktiv"

   Reiter, Filterchips und der eine faellige Knopf teilen sich
   eine Flaeche. Vorher trug jedes davon die Designfarbe, und
   auf einer Seite mit Reitern UND Filtern UND einem Knopf
   leuchteten dann drei Dinge gleich stark um die Aufmerksamkeit.
   ============================================================ */
body:not(.flach) #crsOverlay .m3-chip.an,
body:not(.flach) #crsOverlay .scrm-tab.an,
body:not(.flach) #crsOverlay .sal-tab.an,
body:not(.flach) #crsOverlay .iapp-tab.on,
body:not(.flach) .m3-chip.an,
body:not(.flach) .scrm-tab.an,
body:not(.flach) .pille.an {
  background: var(--sw-aktiv);
  color: var(--sw-aktiv-text);
  border-color: var(--sw-aktiv);
  box-shadow: none;
}
body:not(.flach) #crsOverlay .m3-chip.an .material-symbols-rounded,
body:not(.flach) .m3-chip.an .material-symbols-rounded { color: var(--sw-aktiv-text); }

/* Der gefuellte Knopf ist die EINE faellige Handlung je Seite.
   Im Vorbild ist er schwarz, nicht bunt - damit steht er fuer
   sich und nicht in einer Reihe mit den Statusfarben. */
body:not(.flach) #crsOverlay .m3-btn.filled,
body:not(.flach) .m3-btn.filled {
  background: var(--sw-aktiv);
  color: var(--sw-aktiv-text);
  box-shadow: 0 2px 8px rgba(22,35,58,.18);
}
body:not(.flach) #crsOverlay .m3-btn.filled:hover,
body:not(.flach) .m3-btn.filled:hover { background: #22334f; }
body:not(.flach) .m3-btn.filled .material-symbols-rounded { color: var(--sw-aktiv-text); }

/* Der "tonal" daneben ist die zweite Handlung und bleibt leise:
   zwei schwarze Knoepfe nebeneinander waeren wieder zwei
   gleich laute Angebote. */
body:not(.flach) .m3-btn.tonal {
  background: #eef2f7;
  color: #16233a;
  box-shadow: none;
}
body:not(.flach) .m3-btn.tonal:hover { background: #e4ebf4; }

/* Der Unterstrich am aktiven App-Reiter kommt aus md3-kit.css
   und zeigte dort die Designfarbe. */
body:not(.flach) #crsOverlay .iapp-tab.on {
  box-shadow: inset 0 -2px 0 var(--sw-aktiv);
  background: transparent;
  color: var(--sw-aktiv);
}

/* ---------- Seitenkopf: steht AUF dem Grund ----------
   Ueberschrift, Unterzeile und die Aktionsknoepfe bekommen
   keine Karte. Eine Karte darum wuerde behaupten, man koenne
   darin etwas tun - man liest sie aber nur. */
body:not(.flach) .crs-seitenkopf {
  padding: 6px 6px 0;
  background: transparent;
}
body:not(.flach) .crs-seitenkopf h1 { font-size: 27px; letter-spacing: -.025em; }
body:not(.flach) .crs-sub { font-size: 12.5px; }

/* ---------- Die Inhaltsflaeche ----------
   .crs-body trug den Grundton und eine abgerundete Ecke oben
   links - beides war der Versuch, eine randlose Flaeche weicher
   wirken zu lassen. Beides faellt weg: der Grund liegt jetzt
   weiter unten, am Rahmen. */
body:not(.flach) .crs-body {
  background: transparent;
  border-top-left-radius: 0;
  overflow: visible;
  /* DER STREIFEN, DEN MAN AUF JEDER SEITE SAH.

     .crs-body trug margin: 0 10px 10px 0 - zehn Pixel rechts und
     zehn unten. Gemessen bei 2000 x 990: der Inhalt endete bei
     1976,966, die Navigation daneben erst bei 1986,976. Rundherum
     also ein leerer Rand, der breiter war als der Abstand zwischen
     den Inseln, und in dem nichts stand ausser Hintergrund.

     In der Workstation ist das richtig: dort sitzt die Suite in
     einem Fenster mit eigenem Rahmen, und der Rand haelt den
     Inhalt von dessen Kante weg. Hier gibt es diese Kante nicht -
     der Abstand zum Rand ist das Polster des Rahmens, 14px, und
     den teilt sich der Inhalt mit der Navigation. */
  margin: 0;
}
body:not(.flach) .crs-body::after { display: none; }
body:not(.flach) .crs-wirte { min-height: 0; }

/* ---------- DIE SEITE IST EINE FLAECHE ----------

   Flos Bild vom 05.11.: die Einwand-Bibliothek, drei Pfeile den
   linken Rand hinunter, dazu "mach es einfach genauso wie bei
   E-Mail". Seine Liste war Kontakte, Leads, Deals, Funnels,
   Leitfaeden und Einwand-Bibliothek.

   Diese sechs sind genau die Seiten OHNE durchgehende Flaeche
   gewesen, und die drei, die er nicht nannte - E-Mail, Kalender,
   Meetings - genau die mit einer. Die Huelle der Gaeste
   (.crs-imrahmen) traegt dort Rundung und Schatten, und weil ihr
   Inhalt weiss ist, sieht man sie als Karte. Auf den uebrigen
   Seiten lag der Inhalt frei auf dem Grund.

   Also traegt jetzt JEDER Wirt diese Flaeche, nicht nur die
   Gaeste. Eine Seite ist ein Blatt, auf dem etwas liegt - nicht
   eine Handvoll Zettel ueber einer Tapete.

   AUCH DIE SEITEN, DIE FLO NICHT AUFGEZAEHLT HAT: Dashboard,
   Firmen, Aufgaben, Produkte, Anforderungen, Webinare, Vorlagen,
   Techniken, Papierkorb. Seine Liste war die, was ihm beim
   Durchklicken auffiel; zwei Sorten Seiten daraus zu machen waere
   genau der Zustand, den er beseitigt haben will.

   DIE LUFT UNTER DEM SEITENKOPF steht jetzt ebenfalls hier, an
   EINER Stelle. Vorher waren es drei Regeln an drei Wirtsarten,
   und bei den Gaesten wirkte keine davon: deren Huelle steht auf
   position:fixed, und crm-suite.js schreibt ihr das Rechteck von
   #crsGast als Inline-Stil hinein -

       var r = ziel.getBoundingClientRect();
       ov.style.top = Math.round(r.top) + "px";        gastPlatzieren()

   - und getBoundingClientRect schliesst das Polster EIN. Am
   gemeinsamen Vater .crs-wirte gilt es fuer alle, und das
   Rechteck, das gastPlatzieren misst, ist schon das richtige.

   NUR OBEN. Unten hat der Rahmen selbst sein Polster von
   vierzehn; ein zweites daneben machte achtundzwanzig daraus.

   Gemessen am 05.11. ueber dreizehn Seiten - Kontakte, Leads,
   Deals, Firmen, Produkte, Dashboard, Leitfaeden, Techniken,
   Einwaende, E-Mail, Kalender, Meetings, Funnels: alle
   268,163 bis 1010,754, auf den Pixel gleich. Einzige Ausnahme
   ist die Einwand-Bibliothek, die oben bei 100 beginnt - dort
   versteckt crm-suite.js den Seitenkopf (Zeile 288), weil die
   Seite ihren eigenen mitbringt. */
body:not(.flach) .crs-wirte {
  padding-top: var(--sw-luft);
  box-sizing: border-box;
}
/* KEINE FLAECHE AM WIRT. Einen halben Tag lang stand hier das
   Gegenteil - jeder Wirt ein weisses Blatt, weil Flos sechs
   Seiten genau die ohne eine solche Flaeche waren. Das war die
   falsche Haelfte der Beobachtung. Was ihm fehlte, waren nicht
   die Blaetter, sondern die BEREICHE: Teile mit eigener Rundung,
   zwischen denen der Grund steht. Am 05.11. mit drei Bildern
   einer fremden Oberflaeche belegt und mit "GENAU wollte ich das
   haben" abgenommen.

   Der Wirt ist also wieder nur der Rahmen, in dem die Bereiche
   liegen, und zu sehen ist er nicht. */
body:not(.flach) .crs-wirt.crs-eigen { padding: 0; gap: var(--sw-luft); }

/* Aufgaben und Leads zogen sich mit margin: -14px wieder ueber
   die Kante zurueck - rundum, nicht nur oben: gemessen standen sie
   zwei Pixel vom Fensterrand statt vierzehn. Das war richtig,
   solange die Flaeche randlos sein sollte; als Insel ist es der
   Abstand, der fehlt. */
body:not(.flach) .cau { margin: 0; }

/* ---------- Die Wirte: durchsichtig ----------
   Jede Seite laeuft in einem eigenen .crs-wirt, und jede Maschine
   brachte ihren eigenen Grundton mit: .scrm-frame (Kontakte,
   Pipeline, Deals, Papierkorb) und .sales-frame (Leitfaeden,
   Einwaende, Techniken, Uebersicht) standen beide auf #f5f8fc -
   dem alten Grund.

   Gemessen am 04.11.: 939 x 1033 Pixel, ohne weissen Vorfahren.
   Sie deckten den neuen Grund auf acht von fuenfzehn Seiten
   vollstaendig ab. Von aussen sah es aus, als haette das Design
   dort nicht gegriffen; in Wahrheit lag es darunter.

   Eine Regel fuer alle Wirte statt zweier Einzelfaelle: die
   naechste Maschine bringt sonst denselben Ton wieder mit. */
/* Die Maschinen legen ihren Ton nicht mehr ueber die Flaeche.

   Bis zum 05.11. stand hier "durchsichtig", und das war richtig,
   solange der Grund durchscheinen sollte. Seit der Wirt selbst
   das Blatt ist (siehe oben), geht es um das Gegenteil: die
   Flaeche soll WEISS bleiben und nicht unter #f5f8fc verschwinden.

   Durchsichtig bleibt allein der Gast - er bringt seine eigene
   Huelle mit, und zwei Flaechen uebereinander sind eine zuviel.

   Gegen die langen Ketten der Originale (#crsOverlay .scrm-frame
   und #crsOverlay .sales-frame.imrahmen:not([hidden])) kommt eine
   Regel am blossen .crs-wirt nicht an - gemessen am 05.11.: Radius
   0 bei Kontakte, Leads, Deals, Papierkorb und Pipeline, und bei
   den drei Sales-Seiten ausserdem noch der alte Grundton. Darum
   hier dieselbe Kette plus eine. */
body:not(.flach) .crs-wirt { background: transparent; }
/* Die Sales-Maschine sitzt hinter #crsOverlay .sales-frame.imrahmen
   :not([hidden]) - vier Stellen im Selektor, gegen die eine Regel
   am blossen .crs-wirt nicht ankommt. Darum hier dieselbe Kette
   plus eine. */
body:not(.flach) #crsOverlay .sales-frame.imrahmen:not([hidden]),
body:not(.flach) .sales-frame { background: transparent; }

/* ---------- JEDER BEREICH BIS AN DEN RAND ----------

   Die Bereiche gibt es auf fast jeder Seite laengst - Karten mit
   Rundung und Schatten. Was sie zu weit nach innen schob, war das
   Polster, das jede Maschine fuer ihre eigene Flaeche mitbringt:

     .scrm-body (Kontakte, Leads, Deals, Pipeline, Papierkorb)  16
     .sal-body  (Leitfaeden, Techniken, Einwaende)              16

   Gemessen am 05.11.: die Kontaktliste begann bei 284, die
   Navigation endet bei 254 - dreissig Pixel, waehrend das Polster
   des Rahmens ueberall sonst vierzehn setzt. Zwei Raender
   nebeneinander.

   Das Polster gehoerte der Flaeche, und die gibt es nicht mehr.
   Ohne es sitzt der erste Bereich bei 268, also vierzehn neben
   der Navigation, und der Abstand ZWISCHEN den Bereichen bleibt,
   wo er war - der kommt aus dem Gitter der Maschine (gap: 14). */
body:not(.flach) #crsOverlay .scrm-frame .scrm-body,
body:not(.flach) #crsOverlay .sales-frame .sal-body { padding: 0; }

/* Dieselbe Rechnung eine Ebene tiefer. Die beiden Maschinen
   polstern nicht nur aussen, sondern noch einmal innen:

     .sal-sk     Kopfzeile der Sales-Seiten      16px 20px 12px
     .sal-ueb    Uebersicht (Einwaende)           4px 20px 20px
     .sal-brett  Brett (Leitfaeden)               4px 20px 20px
     .sal-liste2 Liste (Techniken)
     .cau-spalte Aufgaben                        14px 16px 28px

   Gemessen am 05.11.: Leitfaeden und Einwaende standen damit bei
   288 statt 268 - vierunddreissig neben der Navigation statt
   vierzehn. Aufgaben stand zusaetzlich vierzehn zu tief, weil
   .crs-wirte die Luft unter dem Seitenkopf laengst gibt.

   NUR links, rechts und oben. Das Polster UNTEN bleibt: es ist
   kein Rand, sondern Auslauf unter der letzten Zeile, damit die
   nicht an der Kante klebt. */
body:not(.flach) #crsOverlay .sal-sk,
body:not(.flach) #crsOverlay .sal-ueb,
body:not(.flach) #crsOverlay .sal-brett,
body:not(.flach) #crsOverlay .sal-liste2,
/* EINE REGEL JE ANSICHT, und das sind sechs.

   Flo am 05.11., nach dem Hochladen: "sieht trotzdem aus wie
   vorher". Er hatte den Ablaufbaum offen, ich hatte in Spalten
   gemessen - und jede der sechs Ansichten des Leitfadens baut
   ihren eigenen Behaelter mit demselben Polster von zwanzig:

     spalten     .sal-brett            4px 20px 20px
     senkrecht   .sal-senk             4px 20px 20px
     baum        .sal-baum             8px 20px 20px
     dialog      .sal-dia              4px 20px 20px
     Ablaufbaum  .sal-fluss            8px 20px 24px
     fokus       .sal-fokus > .sal-liste  6px 20px 14px

   Gemessen: in Spalten standen die Bereiche bei 268, in den
   anderen fuenf bei 288. Darum hier alle sechs.

   Bei fokus NUR das direkte Kind: .sal-liste gibt es auch in der
   Spalten-Ansicht, dort aber INNERHALB der Karte - da sind die
   zwanzig das Innenpolster und gehoeren bleiben. */
body:not(.flach) #crsOverlay .sal-senk,
body:not(.flach) #crsOverlay .sal-baum,
body:not(.flach) #crsOverlay .sal-dia,
body:not(.flach) #crsOverlay .sal-fluss,
body:not(.flach) #crsOverlay .sal-fokus > .sal-liste {
  padding-left: 0;
  padding-right: 0;
}
body:not(.flach) #crsOverlay .cau-spalte {
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
}

/* Dasselbe eine Ebene tiefer: ein eingelassener Bereich INNERHALB
   einer Karte war ebenfalls im alten Grundton getoent. Eine Karte
   hat eine Flaeche, nicht zwei. */
body:not(.flach) .scrm-srumpf.scrm-kinhalt,
body:not(.flach) .scrm-frame > .scrm-inhalt { background: transparent; }

/* ============================================================
   2 - Die Karten

   Jede weisse Flaeche, die Inhalt traegt, wird zur Insel: vier
   Ecken, weicher Schatten, keine Haarlinie. Die Klassen stehen
   einzeln da und nicht als Sammelregel - eine Liste sagt, was
   gemeint ist, ein * sagt es nicht.
   ============================================================ */
body:not(.flach) .scrm-karte,
body:not(.flach) .sal-karte,
body:not(.flach) .cau-blatt,
body:not(.flach) .crs-liste,
body:not(.flach) .pj-kasten,
body:not(.flach) .pj-mitte,
body:not(.flach) .cld-liste,
body:not(.flach) .sal-liste2,
body:not(.flach) .sal-mit,
body:not(.flach) .sal-pal,
body:not(.flach) .fi-werte,
body:not(.flach) .tb-rahmen,
body:not(.flach) .sal-tkidx,
body:not(.flach) .wb-karte {
  border-radius: var(--sw-rund);
  box-shadow: var(--sw-schatten);
  border: 0;
  overflow: hidden;
}

/* Kleinere Bauteile innerhalb einer Karte bleiben klein: ein
   20er Radius auf einem 30 Pixel hohen Chip sieht aus wie eine
   Tablette. */
body:not(.flach) .crs-kz,
body:not(.flach) .sal-kk,
body:not(.flach) .crs-pchip,
body:not(.flach) .crs-nennung,
body:not(.flach) .crs-wunsch {
  border-radius: var(--sw-rund-klein);
  border: 0;
}

/* ---------- Das Brett (Pipeline) ----------
   Die Spalten sind kein Inhalt, sondern Faecher. Sie bekommen
   darum keinen Schatten, sondern eine leicht helle Flaeche -
   der Grund scheint durch, die Karten darin liegen oben auf. */
body:not(.flach) .crm-spalte,
body:not(.flach) .pj-spalte,
body:not(.flach) .cld-spalte {
  background: rgba(255,255,255,.58);
  border-radius: var(--sw-rund);
  border: 0;
  box-shadow: none;
}
body:not(.flach) .crm-karte,
body:not(.flach) .pj-karte,
body:not(.flach) .cld-karte {
  border-radius: var(--sw-rund-klein);
  box-shadow: var(--sw-schatten);
  border: 0;
  transition: transform .16s ease, box-shadow .16s ease;
}
body:not(.flach) .crm-karte:hover,
body:not(.flach) .pj-karte:hover,
body:not(.flach) .cld-karte:hover {
  transform: translateY(-2px);
  box-shadow: var(--sw-schatten-hoch);
}

/* ---------- Die Dashboard-Kacheln ----------
   Sie haben ihren Radius schon aus dashboard.css; hier bekommen
   sie nur denselben Schatten wie alle anderen Inseln, damit es
   nicht zwei Sorten von Karten gibt. */
body:not(.flach) .dsh-kachel {
  border: 0;
  box-shadow: var(--sw-schatten);
  border-radius: var(--sw-rund);
}
body:not(.flach) .dsh-katalog { border: 0; box-shadow: var(--sw-schatten); border-radius: var(--sw-rund); }

/* ---------- Die Fusszeile mit den Tastenkuerzeln ----------
   Sie lief als weisser Streifen ueber die ganze Breite, Radius 0,
   hart gegen den Grund - gemessen 1148 x 34 Pixel. Auf Kontakte,
   Pipeline und Deals war sie das Erste, was unten ins Auge fiel.

   Sie ist Hinweis und kein Inhalt: "/ suchen · N Kontakt · C
   Chance" sagt, was die Tastatur kann. Nach Regel 2 - weiss ist
   Inhalt - steht sie damit direkt auf dem Grund, wie die
   Werkzeugzeile auch. */
body:not(.flach) .scrm-fuss,
body:not(.flach) .sal-fuss,
body:not(.flach) .cld-fuss {
  background: transparent;
  border-top: 0;
  padding-left: 6px;
  padding-right: 6px;
}

/* ---------- Das Schubfach ----------
   Es faehrt von rechts ein und klebte an drei Kanten. Als Insel
   bekommt es Abstand und Ecken - und einen kraeftigeren Schatten
   als die Karten darunter, weil es ueber ihnen liegt und nicht
   neben ihnen.

   NICHT gemeint sind Baender INNERHALB einer Karte (.scrm-band):
   die sind Abschnitte und keine Flaechen. Ihnen Ecken zu geben
   hiesse, eine Karte in lauter kleine Karten zu zerlegen. */
body:not(.flach) .scrm-schub {
  top: var(--sw-luft);
  right: var(--sw-luft);
  bottom: var(--sw-luft);
  border-radius: var(--sw-rund);
  box-shadow: var(--sw-schatten-hoch);
  border-left: 0;
}

/* ZU HEISST DRAUSSEN.

   Das Schubfach faehrt im Original mit translateX(102%) hinaus -
   zwei Prozent seiner Breite als Reserve, also acht Pixel. Das
   reichte, solange es an der Kante klebte (right: 0). Seit es als
   Insel vierzehn Pixel Abstand haelt, reicht es nicht mehr, und es
   bleibt ein weisser Streifen am rechten Rand stehen - auf jeder
   Seite, die ein Schubfach hat.

   Gemessen am 05.11. in der laufenden Suite: Fenster 1706 breit,
   linke Kante des geschlossenen Schubs bei 1686. Zwanzig Pixel
   sichtbar, weiss, mit runder Ecke oben - genau der Streifen.

   Die eigene Breite plus achtundvierzig Pixel macht es unabhaengig
   davon, wo die Kante gerade liegt. Dieselbe Rechnung fuer die
   E-Mail-Schublade: die klebt zwar noch an right: 0, ragte aber aus
   demselben Grund mit neunzehn Pixeln herein.

   Der offene Zustand bleibt unberuehrt - gemessen: offen bei 1286,
   zu bei 1726, und der Uebergang laeuft weiter, weil die transition
   am Element selbst haengt. */
body:not(.flach) .scrm-schub:not(.an),
body:not(.flach) #emailOverlay .em-drawer:not(.open) {
  transform: translateX(calc(100% + 48px));
}

/* ---------- DER RAHMEN SELBST WAR WEISS ----------
   Das war der Bereich hinter dem Kalender.

   Gemessen mit elementsFromPoint, also dem ganzen Stapel an
   einem Punkt statt nur dem obersten Element:

     gast-frame [rgb(255,255,255)]
       < crs-imrahmen  [transparent]
       < crs-wirt      [transparent]
       < crs-wirte     [transparent]
       < crs-body      [transparent]
       < crs-haupt     [transparent]
       < crs-frame     [transparent]

   Alles darunter war durchsichtig - und ganz oben lag der
   iframe mit weissem Grund und deckte sie zu. Deshalb habe ich
   ihn bei vier Durchgaengen nicht gefunden: ich hatte immer die
   CONTAINER gemessen, nie den Rahmen selbst, und elementFromPoint
   (Einzahl) gibt bei einem iframe das Element im Hauptdokument
   zurueck, nicht dessen Fuellung.

   Es trifft jede Seite, die als Gast laeuft: Kalender, E-Mail,
   Meetings, Funnels und die Sales-Seiten. Daher "auf fast jeder
   Seite".

   Die Dokumente darin sind bereits durchsichtig (html und body
   von kalender.html: rgba(0,0,0,0)), also scheint jetzt der
   Grund durch.

   JEDER Rahmen, nicht nur dieser eine: die Gaeste heissen
   unterschiedlich - gast-frame (Kalender, Meetings), email-frame,
   lm-frame (Funnels), salFrame. Darum die Regel am <iframe>
   selbst; der naechste Gast bringt sonst wieder seinen eigenen
   Namen und seinen eigenen weissen Grund mit. */
body:not(.flach) #crsOverlay iframe,
body:not(.flach) .crs-wirt iframe,
body:not(.flach) .gast-frame,
body:not(.flach) #salFrame {
  background: transparent;
}

/* Und die Layoutflaechen DARIN, soweit sie im Hauptdokument
   liegen: sie trugen denselben alten Grundton #f5f8fc wie
   .scrm-frame und .sales-frame zuvor.

   Mit ID davor, weil die Originale es auch haben:
   #emailOverlay.crs-imrahmen und #lmOverlay.crs-imrahmen. Eine
   Klassenregel von hier kommt dagegen nicht an - gemessen, sie
   stand in der Liste und verlor. */
body:not(.flach) #emailOverlay.crs-imrahmen .em-layout,
body:not(.flach) #emailOverlay.crs-imrahmen > .email-frame,
body:not(.flach) #lmOverlay.crs-imrahmen > .lm-frame,
body:not(.flach) .em-layout,
body:not(.flach) .email-frame,
body:not(.flach) .lm-frame,
body:not(.flach) .lm-koerper {
  /* HIER EIN !important, und das ist eine Ausnahme.

     Ueberall sonst in dieser Datei genuegt es, dieselbe Stelle
     im Selektor zu tragen wie das Original. Bei diesen dreien
     nicht: der Selektor passt nachweislich (el.matches gibt
     true), die Regel steht im Stilblatt, sie ist spezifischer
     als alle, die ich finden konnte - und trotzdem gewinnt
     #f5f8fc aus var(--ir-verlauf).

     Ich habe die Quelle nicht gefunden: nicht als Inline-Stil,
     nicht in einer @media-Abfrage, nicht unter den Regeln, die
     el.matches bestaetigt. Statt weiter zu suchen, waehrend die
     Flaeche auf vier Seiten sichtbar bleibt, steht hier das
     grobe Mittel. Wer die Quelle findet, nimmt es wieder weg. */
  background: transparent !important;
}

/* ---------- DIE DEAL-SEITE TRUG IHN AUCH ----------
   Der graue Grund, auf den Flo am 05.11. gezeigt hat.

   Die Deal-Seite ist kein .crs-wirt. Gemessen am 05.11. in der
   laufenden Suite haengt sie NEBEN den Wirten, direkt am Rahmen:

     #crsOverlay.fx-overlay
       > #crsFrame.crs-frame
         > #dealOverlay.crs-imrahmen
           > .pj-frame

   Darum hat keine der Regeln oben sie erwischt: nicht die fuer
   die Wirte, nicht die fuer die iframes, nicht die fuer die
   Layoutflaechen der Gaeste.

   Mit elementsFromPoint im Polsterbereich gemessen, also dem
   ganzen Stapel an einem Punkt statt nur dem obersten Element:
   .pj-frame war das EINZIGE deckende Element darin - alles
   darunter bis zum <html> war schon durchsichtig.

   .pj-frame steht in deal.css auf var(--scrm-grund, #f5f8fc) -
   demselben alten Grundton, den .scrm-frame und .sales-frame
   zuvor hatten. Die Karten darin sind laengst Inseln; nur die
   Flaeche dahinter war noch grau statt durchsichtig.

   Was NICHT mitkommt: die vielen #eef3f9 in deal.css. Das sind
   Knoepfe, Chips und Balken - kleine Bauteile INNERHALB der
   Karten, und die sollen sich vom Weiss abheben. */
body:not(.flach) #dealOverlay > .pj-frame,
body:not(.flach) .pj-frame { background: transparent; }


/* ---------- Gaeste im Rahmen (E-Mail, Kalender, Meetings) ----------
   Sie laufen in einem eigenen Fenster ueber der Inhaltsflaeche.
   Damit sie nicht als einzige randlos dastehen, bekommt ihre
   Huelle denselben Radius. */
body:not(.flach) .crs-imrahmen,
body:not(.flach) #salFrame,
body:not(.flach) .crs-gast .vk-fenster {
  border-radius: var(--sw-rund);
  box-shadow: var(--sw-schatten);
  overflow: hidden;
  border: 0;
}
body:not(.flach) #salFrame { padding: 0; }

/* ---------- FUNNELS: DIE HUELLE IST KEIN BEREICH ----------

   Flos Bild vom 05.11., Pfeil auf den linken Rand: "hier ist es
   noch nicht fixed, und die Tabs oben musst du auch anpassen".

   Funnels ist ein Gast wie E-Mail, aber sein Inhalt ist anders
   gebaut: waehrend die Mailansicht EINE weisse Flaeche ist, sind
   es hier laengst Bereiche (.lm-karte, je mit Rundung). Die
   Huelle darum trug trotzdem Rundung und Schatten - ein leerer
   Rahmen um lauter Bereiche, also eine Lage zuviel.

   Drei Zahlen, gemessen am 05.11.:

     Karten begannen bei 284      Navigation endet bei 254, macht 30
     erster Reiter bei 271        drei Pixel neben den Karten
     Trennlinie von 281 bis 997   dreizehn innerhalb des Kopfes

   Das Polster von sechzehn setzt lead-magnet.js INLINE in den
   Behaelter unter #lmFlaeche ("padding:16px;display:flex;..."),
   und die Datei ist eine unveraenderte Kopie. Gegen einen
   Inline-Stil kommt nur !important an - das ist der Grund fuer
   die beiden hier, nicht Bequemlichkeit.

   Die Reiterzeile liegt danach auf dem Grund, buendig mit den
   Karten darunter. Das ist dieselbe Ordnung wie bei Deals und
   Dashboard: eine Werkzeugzeile ist Navigation, kein Inhalt, und
   steht darum nicht in einem Bereich. */
body:not(.flach) #lmOverlay.crs-imrahmen,
/* Meetings aus demselben Grund: seine Kacheln sind eigene
   Bereiche, also ist die Huelle darum ein leerer Rahmen.
   E-Mail und Kalender stehen NICHT hier - deren Inhalt ist
   eine zusammenhaengende Flaeche, die eine Huelle braucht. */
body:not(.flach) #bookingOverlay.crs-imrahmen,
/* Und der Kalender: Seitenspalte, Kalenderkarte und Agenda sind
   dort drei eigene Bereiche. */
body:not(.flach) #kalenderOverlay.crs-imrahmen,
/* Und seit die Mailansicht in vier Bereiche zerfaellt (siehe
   unten), auch sie. Damit hat kein Gast mehr eine Huelle - jede
   der vier Seiten traegt ihre Bereiche selbst. */
body:not(.flach) #emailOverlay.crs-imrahmen {
  box-shadow: none;
  border-radius: 0;
}

/* ---------- E-MAIL: VIER SPALTEN, VIER BEREICHE ----------

   Flo am 05.11.: "ich moechte, dass die 4 Spalten einzeln sind -
   also Konten, die Spalte mit Neue Mail, die Spalte mit
   Vorschau-Karte, die Spalte mit dem Inhalt der Mails."

   Sie waren eine Flaeche mit drei Haarlinien darin. Gemessen:
   .em-layout ist ein Gitter aus 210px 198px 340px 1fr ohne
   Zwischenraum, und jede Spalte trug border-right: 1px.

   Also Zwischenraum statt Linie: gap vierzehn, wie ueberall
   sonst, und jede Spalte bekommt Rundung und Schatten. Das
   Gitter rechnet die letzte Spalte (1fr) selbst kleiner -
   nachgemessen: 268-478, 492-690, 704-1044, 1058-1786, also
   buendig bis an die rechte Kante.

   overflow: hidden, damit die Listen ihre runden Ecken nicht
   ueberlaufen - die Mailliste und der Lesebereich rollen. */
body:not(.flach) #emailOverlay .em-layout {
  gap: var(--sw-luft);
  /* DIE DREI FESTEN SPALTEN MUESSEN MITSCHRUMPFEN.

     Das Gitter steht auf 210px 198px 340px 1fr. Ohne Zwischenraum
     ging das genau auf; mit dreimal vierzehn braucht es
     zweiundvierzig Pixel mehr, und die nimmt sich zuerst die
     letzte Spalte - bis sie bei null ist. Danach laeuft das
     Gitter ueber den Rand.

     Gemessen am 05.11. bei 1024 Fensterbreite: .em-layout reichte
     bis 1058, der Gast endet bei 1010. Die Mailliste stand mit
     vierunddreissig Pixeln im Nichts, und vom Lesebereich war
     nichts mehr uebrig. Bei 2000 faellt es nicht auf, weil die
     letzte Spalte dort noch 928 Pixel hat.

     minmax(0, ...) macht aus jeder festen Breite eine Obergrenze:
     wird es eng, geben alle vier nach. Nachgemessen bei 1024:
     Gitter endet bei 1010, buendig mit dem Gast. */
  grid-template-columns:
    minmax(0, 210px) minmax(0, 198px) minmax(0, 340px) minmax(0, 1fr) !important;
}
body:not(.flach) #emailOverlay .em-account-bar,
body:not(.flach) #emailOverlay .em-sidebar,
body:not(.flach) #emailOverlay .em-list,
body:not(.flach) #emailOverlay .em-detail {
  border-radius: var(--sw-rund) !important;
  box-shadow: var(--sw-schatten) !important;
  border-right: 0 !important;
  border-left: 0 !important;
  overflow: hidden;
}
/* UND DIE KANTE AUF DEM PSEUDOELEMENT.

   Flo am 05.11., nach dem Hochladen: "was ist mit dem BORDER?!?
   der soll weg, siehst du diese linie?" - eine Linie links und
   oben um den ganzen Bereich, blass orange.

   Sie steckte nicht am Element, sondern dahinter:

     .lm-koerper::after{ ... box-shadow: inset 1px 1px 0 ... }
       lead-magnet.css, verstaerkt in intentio-rahmen.css

   Das ist die Kante des Intentio-Rahmens: ein Pixel links und
   oben, der das Fenster einer App von ihrem Rahmen abhebt. In der
   Workstation richtig - dort liegt das Fenster IN einem Rahmen.
   Hier gibt es keinen, also hebt sie von nichts ab.

   Dieselbe Kante gibt es als .crs-body::after (crm-suite.css);
   die ist weiter oben in dieser Datei schon abgeschaltet. Nach
   dem Abschalten beider traegt kein Element der Suite mehr so
   ein Pseudoelement mit Schatten - gemessen ueber alle Flaechen
   ueber 300 x 200 Pixel. */
body:not(.flach) .lm-koerper::after { display: none; }
body:not(.flach) #lmOverlay.crs-imrahmen #lmFlaeche > div {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body:not(.flach) #lmOverlay.crs-imrahmen .lm-kopf {
  padding-left: 0;
  padding-right: 0;
}

/* ---------- DIE REITER SIND PILLEN, KEIN UNTERSTRICH ----------

   Flo am 05.11.: "der orangefarbene border ... WEG. ansonsten
   musst du die tabs anpassen das sie zum design passen."

   Der Strich kam aus bruecke.css:

     #lmOverlay.crs-imrahmen .lm-nb.lm-an{
       box-shadow: inset 0 -2px 0 var(--accent,#ef8a3c); }

   Das ist das Muster "Reiter mit Unterstrich" - es gehoert in
   eine Zeile, die auf einer Flaeche sitzt und eine Kante hat, an
   der der Strich anliegen kann. Seit die Reiterzeile auf dem
   Grund steht, liegt er auf nichts.

   Stattdessen Pillen, wie sie in dieser Oberflaeche schon zweimal
   stehen: die angehefteten Seiten oben (.tb-pin, weiter oben in
   dieser Datei) und die Filterchips bei Aufgaben (.m3-chip). Der
   aktive ist gefuellt und dunkel - dasselbe, was Flo an seinem
   Vorbild gezeigt hat.

   Die Trennlinie faellt mit weg: zwischen Pillen und Inhalt
   braucht es keinen Strich, der Abstand sagt es schon. */
body:not(.flach) #lmOverlay.crs-imrahmen .lm-kopf::after { display: none; }
body:not(.flach) #lmOverlay.crs-imrahmen .lm-navliste { gap: 6px; }
body:not(.flach) #lmOverlay.crs-imrahmen .lm-nb {
  height: 32px;
  padding: 0 13px;
  border-radius: 9px;
  background: #f2f5f9;
  color: #55657c;
  box-shadow: none;
  font-weight: 600;
  transition: background .15s, color .15s;
}
body:not(.flach) #lmOverlay.crs-imrahmen .lm-nb:hover {
  background: #e8eef6;
  color: #16233a;
}
body:not(.flach) #lmOverlay.crs-imrahmen .lm-nb.lm-an {
  background: var(--sw-aktiv, #16233a);
  color: #fff;
  box-shadow: none;
  font-weight: 700;
}
body:not(.flach) #lmOverlay.crs-imrahmen .lm-nb.lm-an .material-symbols-rounded { color: #fff; }

/* ---------- UND KEINE LUFT ZWISCHEN HUELLE UND GAST ----------
   Die Karte hinter dem weissen Mailbereich, auf die Flo am 05.11.
   gezeigt hat.

   email-im-rahmen.css setzt .crs-imrahmen { --gastluft: 16px }
   und rueckt den Gast damit rundum sechzehn Pixel von der Kante
   ein. Das war richtig, solange die Huelle selbst die Flaeche war
   und der Gast darin ein Block: sechzehn Pixel wie bei
   #scrmInhalt, damit der Inhalt nicht am Rand klebt.

   Als Insel ist es falsch. Die Huelle traegt jetzt Radius und
   Schatten, der Gast ist durchsichtig - und wo sein weisser
   Inhalt aufhoert, scheint der Grund durch. Gemessen auf allen
   vier Gastseiten: Huelle 268,149 bis 1010,754, Gast 284,165 bis
   994,738. Sechzehn Pixel rundum, auf jeder Seite dieselben.

   Bei E-Mail faellt es auf, weil der Inhalt dort weiss ist und
   hart an seiner Kante endet. Bei Kalender, Meetings und Funnels
   ist der Inhalt selbst durchsichtig - dort war derselbe Streifen
   da und nur nicht zu sehen.

   Also null, und zwar ueber die Variable und nicht ueber die vier
   Regeln darunter: die stehen hinter !important, die Variable
   nicht. Eine Zahl an einer Stelle, wie es dort schon gedacht war.

   Die Ecken schneidet die Huelle selbst - sie hat overflow:hidden
   aus der Regel darueber. Gemessen: Radius 20, Gast buendig bei
   0/0/0/0. */
body:not(.flach) .crs-imrahmen { --gastluft: 0px; }

/* ============================================================
   3 - Werkzeugzeilen als Pillen

   Filter und Umschalter standen in einer Leiste mit Trennlinie.
   Eine Leiste ist wieder eine Flaeche; hier liegen die Knoepfe
   einzeln auf dem Grund.
   ============================================================ */
body:not(.flach) .scrm-tabs,
body:not(.flach) .crs-filter,
body:not(.flach) .sal-tabs {
  background: transparent;
  border-bottom: 0;
  padding: 2px 6px 0;
  gap: 7px;
}
body:not(.flach) .scrm-tabs .scrm-tab,
body:not(.flach) .crs-filter .m3-chip {
  background: rgba(255,255,255,.76);
  box-shadow: 0 1px 2px rgba(22,35,58,.05);
  border: 0;
  border-radius: 999px;
}
body:not(.flach) .scrm-tabs .scrm-tab.an,
body:not(.flach) .crs-filter .m3-chip.an {
  background: var(--sw-leiste);
  color: #fff;
  box-shadow: none;
}

/* ============================================================
   4 - Tabellen

   Eine Tabelle ist Inhalt, also eine Insel. Ihr Kopf darf aber
   nicht mitrollen und braucht eine Flaeche, die deckt.
   ============================================================ */
body:not(.flach) .tbl-wrap,
body:not(.flach) .tb-wrap {
  border-radius: var(--sw-rund);
  box-shadow: var(--sw-schatten);
  border: 0;
  overflow: hidden;
  background: #fff;
}

/* ============================================================
   5 - Was NICHT mitmacht

   Dialoge, Menues und Hinweise liegen ueber allem und haben
   ihren eigenen Schatten. Sie hier noch einmal anzufassen
   hiesse, zwei Schatten uebereinanderzulegen.
   ============================================================ */

/* ============================================================
   6 - Der Design-Bereich im Konto-Menue

   Er sitzt dort, wo alles Persoenliche sitzt: hinter dem
   eigenen Namen oben rechts. Vier Proben statt vier Woerter -
   "Papier" sagt nicht, wie Papier aussieht.
   ============================================================ */
body:not(.flach) .kto-menue { border-radius: var(--sw-rund); box-shadow: var(--sw-schatten-hoch); border: 0; }
.kto-trenner { height: 1px; background: #eef2f7; margin: 6px 0; }
.kto-design { padding: 4px 12px 10px; }
.kto-dtitel {
  display: block; font-size: 9.5px; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase;
  color: #93a1b3; padding-bottom: 7px;
}
.kto-gruende { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.kto-grund {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid transparent; background: transparent;
  font-family: inherit; font-size: 12px; font-weight: 600; color: #55657c;
  padding: 6px 8px; border-radius: 10px; cursor: pointer; text-align: left;
  transition: background .15s, border-color .15s, color .15s;
}
.kto-grund i {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  box-shadow: inset 0 0 0 1px rgba(22,35,58,.12);
}
.kto-grund:hover { background: #f4f7fb; color: #16233a; }
/* Gewaehlt ist dieselbe dunkle Flaeche wie ueberall sonst -
   darum sieht man hier gleich mit, was "aktiv" im neuen
   Design heisst. */
.kto-grund.an {
  background: var(--sw-aktiv, #16233a);
  color: #fff;
  border-color: var(--sw-aktiv, #16233a);
}
.kto-grund.an i { box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }

/* Schmales Fenster: bei wenig Platz kostet das Polster mehr,
   als der Grund dazwischen bringt. */
@media (max-width: 900px) {
  body:not(.flach) .crs-frame { padding: 8px; gap: 8px; }
  body:not(.flach) .crs-nav { border-radius: 18px; }
}