/* ============================================================
   DER RAHMEN — vier Leisten um eine Bühne
   Vorlage: previews/grundgeruest.html

   Bisher war die Suite eine Navigation links und Inhalt rechts.
   Jetzt liegt um den Inhalt ein Rahmen aus vier Leisten:

     OBEN    Topbar     Marke, Suche, Konto
     LINKS   Navigation
     RECHTS  Sidebar    schmale Werkzeugspalte, vorerst leer
     UNTEN   Bottombar  Zustand, Entwurf, Leisten-Schalter

   In der Mitte die Bühne: hell, gerundet, mit dem Inhalt darin.

   WARUM DIESE DATEI ZULETZT GELADEN WIRD: crm-suite.css ist eine
   Kopie aus der Workstation und wird nicht angefasst, und
   schwebend.css gestaltet den Inhalt. Beide bleiben; diese Datei
   legt nur den Rahmen darum. Wo sie eine Regel von schwebend.css
   ersetzen muss, trägt sie dieselbe Stelle im Selektor
   (body:not(.flach) #crsOverlay …) - nicht weil Spezifität hübsch
   wäre, sondern weil es ohne !important sonst nicht geht.

   ABSCHALTEN: <body class="flach"> gibt den alten Stand zurück,
   genau wie bei schwebend.css.
   ============================================================ */

/* ============================================================
   DIE FAKTOREN, ANGEMELDET

   Die Spaltenbreiten hängen an Faktoren. Eine gewöhnliche Custom
   Property ist für den Browser nur ein Haufen Zeichen: er kann
   sie nicht überblenden, und eine transition auf grid-template
   friert obendrein den Startwert ein — die Leiste verschwindet
   dann nie. Mit @property bekommt jeder Faktor einen Typ, der
   Browser überblendet die ZAHL, und grid-template rechnet bei
   jedem Bild neu.
   ============================================================ */
@property --rh-fn { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --rh-fr { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --rh-ft { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --rh-fb { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --rh-navw { syntax: "<length>"; inherits: true; initial-value: 216px; }

/* ============================================================
   DIE SIEBEN ENTWÜRFE

   Jeder setzt zweierlei: die Farben des RAHMENS (Präfix --rh-)
   und den Ton der BÜHNE. Letzterer läuft über die Variablen, die
   schwebend.css ohnehin schon benutzt (--sw-grund, --sw-licht),
   damit der Inhalt ohne Umbau mitzieht.
   ============================================================ */
html {
  --rh-rand: rgba(255,255,255,.08);
  --rh-text: #e7ecf3;
  --rh-mut: #9aa3b2;
  /* NAHTLOS — für jeden Entwurf. Kein Spalt, keine Rundung an
     den Leisten, keine eigene Fläche.

     Jede Leiste mit einem eigenen Verlauf zu füllen reicht
     nicht: ein Verlauf beginnt in JEDEM Element neu, und weil
     die Topbar 56 px, die Bottombar 44 px und die Navigation
     mehrere hundert Pixel hoch sind, trifft an jeder Kante
     helles Ende auf dunklen Anfang. Genau das sieht man als
     Naht. Also trägt der Rahmen die eine Fläche, und die
     Leisten sind leer. */
  --rh-spalt: 0px;
  --rh-rund: 0px;
  --rh-leiste: none;
  --rh-leiste-schatten: none;
  --rh-strich: 0;              /* Lichtstrich auf der Leistenkante: 1 = an */
  --rh-buehne-rand: rgba(255,255,255,.16);
  --rh-buehne-schatten: 0 0 0 1px rgba(0,0,0,.25), 0 18px 50px rgba(0,0,0,.4);
}

html[data-design="aurora"] {
  --rh-akz: #7c5cff;   --rh-akz-rgb: 124,92,255;
  --rh-akz2: #22d3ee;  --rh-akz2-rgb: 34,211,238;
  --rh-akz3: #f472b6;  --rh-akz3-rgb: 244,114,182;
  --rh-schirm:
    radial-gradient(circle at 0% 0%, rgba(124,92,255,.17), transparent 42%),
    radial-gradient(circle at 100% 100%, rgba(244,114,182,.12), transparent 42%),
    radial-gradient(circle at 55% 45%, rgba(34,211,238,.06), transparent 55%),
    #0a0c14;
  --sw-grund: #f8f7fe;
  --sw-licht: none;
  --rh-linie: #e9e6fa;
  --rh-tinte: #1b1733;
  --rh-bmut: #6a6490;
  --accent: #6d4bf0;   --accent-rgb: 109,75,240;  --accent-dark: #4c2fc0;
}

html[data-design="carbon"] {
  --rh-akz: #c0c8d6;   --rh-akz-rgb: 192,200,214;
  --rh-akz2: #7a83a0;  --rh-akz2-rgb: 122,131,160;
  --rh-akz3: #e2e6ee;  --rh-akz3-rgb: 226,230,238;
  --rh-schirm:
    radial-gradient(circle at 50% 0%, rgba(192,200,214,.07), transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(122,131,160,.05), transparent 50%),
    #08090c;
  --sw-grund: #f7f8fa;
  --sw-licht: none;
  --rh-linie: #e6e8ee;
  --rh-tinte: #16181d;
  --rh-bmut: #666b78;
  /* Der Rahmenakzent ist hier unbrauchbar: auf Weiß wäre er
     unsichtbar. Die Bühne bekommt Graphit. */
  --accent: #4b5565;   --accent-rgb: 75,85,101;   --accent-dark: #2e3542;
}

html[data-design="ocean"] {
  --rh-akz: #22b8db;   --rh-akz-rgb: 34,184,219;
  --rh-akz2: #2dd4bf;  --rh-akz2-rgb: 45,212,191;
  --rh-akz3: #60a5fa;  --rh-akz3-rgb: 96,165,250;
  --rh-schirm:
    radial-gradient(circle at 10% 0%, rgba(34,184,219,.16), transparent 45%),
    radial-gradient(circle at 90% 100%, rgba(45,212,191,.11), transparent 45%),
    #061018;
  --sw-grund: #f4fbfc;
  --sw-licht: none;
  --rh-linie: #d9eef2;
  --rh-tinte: #0c2229;
  --rh-bmut: #4d7580;
  --accent: #0e7490;   --accent-rgb: 14,116,144;  --accent-dark: #0a5468;
}

/* Anthrazit Touch — in der Workstation der neutrale Entwurf: kein
   eigener Farbton, nur ein kühler Unterton (220). Den Akzent gibt
   main.js dort fest vor, hsl(210 70% 56%). */
html[data-design="anthrazit"] {
  --rh-akz: #408fdd;   --rh-akz-rgb: 64,143,221;
  --rh-akz2: #8e9aa8;  --rh-akz2-rgb: 142,154,168;
  --rh-akz3: #ccd4de;  --rh-akz3-rgb: 204,212,222;
  --rh-rand: rgba(255,255,255,.09);
  --rh-schirm:
    radial-gradient(circle at 12% 0%, rgba(64,143,221,.10), transparent 48%),
    radial-gradient(circle at 100% 100%, rgba(204,212,222,.045), transparent 45%),
    #202227;
  --sw-grund: #f7f8fa;
  --sw-licht: none;
  --rh-linie: #e4e8ee;
  --rh-tinte: #171a1f;
  --rh-bmut: #5f6773;
  --accent: #2f6fb5;   --accent-rgb: 47,111,181;  --accent-dark: #22537f;
}

html[data-design="bluetouch"] {
  --rh-akz: #2b87e3;   --rh-akz-rgb: 43,135,227;
  --rh-akz2: #4fb6e8;  --rh-akz2-rgb: 79,182,232;
  --rh-akz3: #8ab4f8;  --rh-akz3-rgb: 138,180,248;
  --rh-rand: rgba(255,255,255,.09);
  --rh-schirm:
    radial-gradient(circle at 0% 0%, rgba(43,135,227,.20), transparent 45%),
    radial-gradient(circle at 100% 100%, rgba(79,182,232,.12), transparent 45%),
    radial-gradient(circle at 55% 60%, rgba(138,180,248,.07), transparent 55%),
    #0d1726;
  --sw-grund: #f5f9fe;
  --sw-licht: none;
  --rh-linie: #dde9f8;
  --rh-tinte: #0e1c2e;
  --rh-bmut: #53678a;
  --accent: #1b6fc4;   --accent-rgb: 27,111,196;  --accent-dark: #14518f;
}

/* ------------------------------------------------------------
   GLOSSY — Hochglanz

   Der AUFBAU ist bei allen Entwürfen derselbe: nahtlose Leisten,
   gerundete Bühne. Hochglanz unterscheidet sich darum nicht mehr
   in der Form, sondern im LICHT — kräftigere Blooms im Schirm
   und eine helle Kante an der Bühne.

   Die Farbe ist Blue Touch: Hochglanz ist eine Oberfläche, keine
   eigene Farbe.

   "Glossy Rahmen" gibt es nicht mehr als eigenen Entwurf — seit
   alle Leisten nahtlos sind, wäre er mit diesem hier identisch.
   design.js bildet eine gespeicherte Wahl darauf ab.
   ------------------------------------------------------------ */
html[data-design="glossy"] {
  --rh-akz: #2b87e3;   --rh-akz-rgb: 43,135,227;
  --rh-akz2: #4fb6e8;  --rh-akz2-rgb: 79,182,232;
  --rh-akz3: #8ab4f8;  --rh-akz3-rgb: 138,180,248;
  --rh-rand: rgba(255,255,255,.14);
  --rh-text: #eaf2fb;
  --rh-mut: #9fb0c6;
  --rh-schirm:
    radial-gradient(circle at 8% -5%, rgba(43,135,227,.34), transparent 45%),
    radial-gradient(circle at 100% 105%, rgba(79,182,232,.24), transparent 48%),
    radial-gradient(circle at 60% 40%, rgba(138,180,248,.09), transparent 55%),
    linear-gradient(170deg, #12213a, #0d1726 55%, #080e18);
  --rh-buehne-rand: rgba(255,255,255,.3);
  --rh-buehne-schatten:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 0 0 1px rgba(0,0,0,.3),
    0 22px 60px rgba(0,0,0,.5);
  --sw-grund: #f6faff;
  --sw-licht: none;
  --rh-linie: #dae7f8;
  --rh-tinte: #0e1c2e;
  --rh-bmut: #53678a;
  --accent: #1b6fc4;   --accent-rgb: 27,111,196;  --accent-dark: #14518f;
}

/* ------------------------------------------------------------
   GLOSSY NOIR — Hochglanz, warm

   Der zweite Hochglanz-Entwurf. Er teilt mit Glossy die
   Oberfläche (kräftige Lichter im Schirm, helle Kante an der
   Bühne) und unterscheidet sich nur in der Farbe: fast
   schwarzer Grund, Kupfer als Akzent.

   WARUM KUPFER: alle anderen Entwürfe sind blau, grau oder
   violett — die Palette hatte keinen einzigen warmen Ton. Und
   auf dem fast schwarzen Grund trägt Kupfer besser als jedes
   weitere Blau.

   Der Bühnenakzent ist deutlich dunkler als der des Rahmens:
   #d9913f auf Weiß käme nur auf 2,4 : 1 und wäre als Schrift
   unlesbar.
   ------------------------------------------------------------ */
html[data-design="noir"] {
  --rh-akz: #d9913f;   --rh-akz-rgb: 217,145,63;
  --rh-akz2: #e8b877;  --rh-akz2-rgb: 232,184,119;
  --rh-akz3: #b4772f;  --rh-akz3-rgb: 180,119,47;
  --rh-rand: rgba(255,255,255,.12);
  --rh-text: #f3efe9;
  --rh-mut: #a9a29a;
  --rh-schirm:
    radial-gradient(circle at 8% -5%, rgba(217,145,63,.26), transparent 45%),
    radial-gradient(circle at 100% 105%, rgba(180,119,47,.20), transparent 48%),
    radial-gradient(circle at 60% 40%, rgba(232,184,119,.07), transparent 55%),
    linear-gradient(170deg, #171410, #0c0c0f 55%, #070707);
  --rh-buehne-rand: rgba(255,255,255,.28);
  --rh-buehne-schatten:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 0 0 1px rgba(0,0,0,.45),
    0 22px 60px rgba(0,0,0,.6);
  --sw-grund: #faf8f5;
  --sw-licht: none;
  --rh-linie: #ece5db;
  --rh-tinte: #1a1611;
  --rh-bmut: #776d60;
  --accent: #96591a;   --accent-rgb: 150,89,26;   --accent-dark: #6d3f10;
}

/* ============================================================
   DAS RASTER

   Drei Spalten, drei Zeilen. Fällt eine Leiste weg, geht ihr
   Faktor auf 0 und die Bühne wächst in die freie Ecke.
   ============================================================ */
body:not(.flach) #crsOverlay .crs-frame,
body:not(.flach) .crs-frame {
  --rh-barw: 56px;
  --rh-toph: 56px;
  --rh-both: 44px;
  --rh-fn: 1; --rh-fr: 1; --rh-ft: 1; --rh-fb: 1;
  --rh-navw: 216px;

  display: grid;
  height: 100%;
  width: 100%;
  padding: var(--rh-spalt);
  gap: var(--rh-spalt);
  grid-template-columns:
    calc(var(--rh-navw) * var(--rh-fn))
    minmax(0, 1fr)
    calc(var(--rh-barw) * var(--rh-fr));
  grid-template-rows:
    calc(var(--rh-toph) * var(--rh-ft))
    minmax(0, 1fr)
    calc(var(--rh-both) * var(--rh-fb));
  /* Die Bewegung hängt an den FAKTOREN, nicht an grid-template:
     eine transition auf grid-template friert den Startwert ein. */
  transition:
    --rh-fn .26s cubic-bezier(.2,.7,.3,1),
    --rh-fr .26s cubic-bezier(.2,.7,.3,1),
    --rh-ft .26s cubic-bezier(.2,.7,.3,1),
    --rh-fb .26s cubic-bezier(.2,.7,.3,1),
    --rh-navw .26s cubic-bezier(.2,.7,.3,1);
  background: var(--rh-schirm);
  overflow: hidden;
}
/* Die alte Zweiteilung von schwebend.css gilt nicht mehr. */
body:not(.flach) #crsOverlay .crs-frame.eng,
/* Die alte Regel fuer die schmale Navigation setzt in
   schwebend.css ZWEI Spalten (72px | Rest) und ist mit ihrer
   ID-Stelle spezifischer als das Raster oben. Sie muss darum
   hier vollstaendig ersetzt werden, sonst faellt die rechte
   Leiste beim Einklappen aus dem Raster. */
body:not(.flach) #crsOverlay .crs-frame.eng,
body:not(.flach) .crs-frame.eng {
  --rh-navw: 60px;
  grid-template-columns:
    calc(var(--rh-navw) * var(--rh-fn))
    minmax(0, 1fr)
    calc(var(--rh-barw) * var(--rh-fr));
}

body:not(.flach) #crsOverlay .crs-frame.rh-ohne-nav,
body:not(.flach) .crs-frame.rh-ohne-nav { --rh-fn: 0; }
body:not(.flach) #crsOverlay .crs-frame.rh-ohne-rechts,
body:not(.flach) .crs-frame.rh-ohne-rechts { --rh-fr: 0; }
body:not(.flach) #crsOverlay .crs-frame.rh-ohne-top,
body:not(.flach) .crs-frame.rh-ohne-top { --rh-ft: 0; }
body:not(.flach) #crsOverlay .crs-frame.rh-ohne-bot,
body:not(.flach) .crs-frame.rh-ohne-bot { --rh-fb: 0; }

/* ---------- Die Leisten als Glaskacheln ---------- */
body:not(.flach) #crsOverlay .rh-leiste,
body:not(.flach) .rh-leiste {
  /* Ohne das schrumpft keine Leiste unter die Breite ihres
     Inhalts: ein Rasterkind hat min-width:auto, und bei Faktor 0
     blieben 18 px als Streifen stehen. */
  min-width: 0; min-height: 0;
  position: relative; overflow: hidden;
  color: var(--rh-text);
  background: var(--rh-leiste);
  border: 1px solid var(--rh-rand);
  border-radius: var(--rh-rund);
  box-shadow: var(--rh-leiste-schatten);
  backdrop-filter: blur(28px) saturate(170%);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
  transition: opacity .2s;
}
/* Ein feiner Lichtstrich auf der Oberkante — der Glanz, der die
   Kachel vom Schirm abhebt. */
body:not(.flach) #crsOverlay .rh-leiste::before,
body:not(.flach) .rh-leiste::before {
  content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 1px;
  opacity: var(--rh-strich);
  background: linear-gradient(90deg, transparent,
    rgba(var(--rh-akz-rgb), .45), rgba(var(--rh-akz2-rgb), .35), transparent);
  pointer-events: none;
}

/* KEINE ÜBERGÄNGE — in jedem Entwurf. Jede Leiste mit eigenem Verlauf zu
   füllen reicht nicht — ein Verlauf beginnt in JEDEM Element neu,
   und weil Topbar 56 px, Bottombar 44 px und die Navigation
   mehrere hundert Pixel hoch sind, trifft an jeder Kante helles
   Ende auf dunklen Anfang. Genau das sieht man als Naht. Also
   trägt der Rahmen die eine Fläche, und die Leisten sind leer. */
body:not(.flach) #crsOverlay .crs-frame,
body:not(.flach) .crs-frame {
  background:
    linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.025) 38%, rgba(255,255,255,0) 72%),
    var(--rh-schirm);
}
body:not(.flach) #crsOverlay .rh-leiste,
body:not(.flach) .rh-leiste {
  border-width: 0;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}

body:not(.flach) #crsOverlay .crs-frame.rh-ohne-nav .crs-nav,
body:not(.flach) .crs-frame.rh-ohne-nav .crs-nav,
body:not(.flach) #crsOverlay .crs-frame.rh-ohne-rechts .rh-rechts,
body:not(.flach) .crs-frame.rh-ohne-rechts .rh-rechts,
body:not(.flach) #crsOverlay .crs-frame.rh-ohne-top .rh-top,
body:not(.flach) .crs-frame.rh-ohne-top .rh-top,
body:not(.flach) #crsOverlay .crs-frame.rh-ohne-bot .rh-bot,
body:not(.flach) .crs-frame.rh-ohne-bot .rh-bot {
  opacity: 0; pointer-events: none; padding: 0; border-width: 0;
}

/* ---------- Die Plätze im Raster ---------- */
body:not(.flach) .rh-top    { grid-column: 1 / -1; grid-row: 1;
  display: flex; align-items: center; gap: 14px; padding: 0 12px 0 14px; }
body:not(.flach) #crsOverlay .crs-nav,
body:not(.flach) .crs-nav { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; padding: 8px; }
body:not(.flach) #crsOverlay .crs-haupt,
body:not(.flach) .crs-haupt { grid-column: 2; grid-row: 2; min-width: 0; min-height: 0; }
body:not(.flach) .rh-rechts { grid-column: 3; grid-row: 2;
  display: flex; flex-direction: column; align-items: center; padding: 8px 0; gap: 4px; }
body:not(.flach) .rh-bot    { grid-column: 1 / -1; grid-row: 3;
  display: flex; align-items: center; gap: 8px; padding: 0 10px; }

/* ============================================================
   DIE BÜHNE

   Der Hauptbereich ist jetzt die helle Insel in der Mitte. Bei
   Glossy Rahmen ist sie das EINZIGE gerundete Stück — weil der
   Rahmen hinter ihren Ecken durchscheint, sehen diese Ecken nach
   innen gerundet aus.
   ============================================================ */
body:not(.flach) #crsOverlay .crs-haupt,
body:not(.flach) .crs-haupt {
  background: var(--sw-grund);
  border: 1px solid var(--rh-buehne-rand);
  border-radius: 14px;
  box-shadow: var(--rh-buehne-schatten);
  overflow: hidden;
  display: flex; flex-direction: column;
}
body:not(.flach) #crsOverlay .crs-haupt,
body:not(.flach) .crs-haupt { border-radius: 18px; }

body:not(.flach) #crsOverlay .crs-body,
body:not(.flach) .crs-body { margin: 0; border-radius: 0; background: none; flex: 1; min-height: 0; }

/* ---------- Die Reihenfolge in der Topbar ----------
   Die Topbar IST die crs-kopf. konto.js hängt seinen Knopf ans
   Ende, anheften.js setzt seine Zone an den Anfang — beide
   wissen nichts voneinander und nichts von der Marke. Statt sie
   umzubauen, ordnet der Rahmen hier, wer wo steht. */
body:not(.flach) #crsOverlay .rh-top > .rh-marke,
body:not(.flach) .rh-top > .rh-marke { order: 0; }
/* Die angehefteten Seiten stehen LINKS, gleich neben der Marke —
   sie sind Navigation, und Navigation fängt links an. */
body:not(.flach) #crsOverlay .rh-top > .tb-pins,
body:not(.flach) .rh-top > .tb-pins { order: 1; display: flex; align-items: center; gap: 2px; min-width: 0; }
body:not(.flach) #crsOverlay .rh-top > .rh-schub,
body:not(.flach) .rh-top > .rh-schub { order: 2; }
body:not(.flach) .rh-top > #ktoKnopf,
body:not(.flach) #crsOverlay .rh-top > .kto-knopf,
body:not(.flach) .rh-top > .kto-knopf { order: 4; }
body:not(.flach) #crsOverlay .rh-top > .crs-x,
body:not(.flach) .rh-top > .crs-x { order: 5; }
/* Das Konto-Menü klappt unter seinem Knopf auf und darf nicht
   mitsortiert werden — es liegt über allem. */
body:not(.flach) #crsOverlay .rh-top > .kto-menue,
body:not(.flach) .rh-top > .kto-menue { order: 9; }

body:not(.flach) #crsOverlay .rh-top,
body:not(.flach) .rh-top { position: relative; }
/* Damit die Pillen nicht unter die Suche laufen, endet ihr Platz
   vor deren linker Kante. */
body:not(.flach) #crsOverlay .rh-top > .tb-pins,
body:not(.flach) .rh-top > .tb-pins { max-width: calc(50% - min(210px, 17vw) - 24px); overflow: hidden; }

/* ---------- Angeheftete Seiten sehen aus wie Navigationspunkte ----------
   Sie SIND Navigation, nur an einem anderen Platz: dieselben
   34 px, dieselbe Schrift, dasselbe Symbol, dieselbe Fläche.
   Nur der Akzentbalken fehlt — er sitzt links am Eintrag, und in
   einer waagerechten Leiste stünde er quer zur Leserichtung. */
body:not(.flach) #crsOverlay .rh-top .tb-pin,
body:not(.flach) .rh-top .tb-pin {
  display: inline-flex; align-items: center; gap: 12px;
  height: 34px; padding: 0 14px; border-radius: 6px;
  background: none; border: 0; cursor: grab;
  font-family: inherit; font-size: 14px; font-weight: 500;
  color: var(--rh-text); max-width: 200px;
}
body:not(.flach) #crsOverlay .rh-top .tb-pin:hover,
body:not(.flach) .rh-top .tb-pin:hover { background: rgba(255,255,255,.06); color: var(--rh-text); }
body:not(.flach) #crsOverlay .rh-top .tb-pin.an,
body:not(.flach) .rh-top .tb-pin.an { background: rgba(255,255,255,.1); font-weight: 600; color: var(--rh-text); }
body:not(.flach) #crsOverlay .rh-top .tb-pin .material-symbols-rounded,
body:not(.flach) .rh-top .tb-pin .material-symbols-rounded { font-size: 18px; color: var(--rh-mut); }
body:not(.flach) #crsOverlay .rh-top .tb-pin.an .material-symbols-rounded,
body:not(.flach) .rh-top .tb-pin.an .material-symbols-rounded { color: var(--rh-text); }
/* Das Kreuz zum Abnehmen liegt über dem Text, statt Platz zu
   belegen — wie das Dreipunkt-Menü in der Navigation. */
body:not(.flach) #crsOverlay .rh-top .tb-pin .tb-ab,
body:not(.flach) .rh-top .tb-pin .tb-ab {
  flex: none; width: 18px; height: 18px; margin: 0 -8px 0 -4px;
  border-radius: 5px; display: grid; place-items: center;
  color: var(--rh-mut); opacity: 0;
  /* SOLANGE ES UNSICHTBAR IST, FÄNGT ES KEINE KLICKS. Es liegt
     mit negativen Rändern über dem rechten Ende der Pille — ohne
     diese Zeile trifft ein Klick dort das Kreuz statt die Seite,
     und die Pille verschwindet, statt sich zu öffnen. */
  pointer-events: none;
}
body:not(.flach) #crsOverlay .rh-top .tb-pin:hover .tb-ab,
body:not(.flach) .rh-top .tb-pin:hover .tb-ab { pointer-events: auto; }
body:not(.flach) #crsOverlay .rh-top .tb-pin .tb-ab .material-symbols-rounded,
body:not(.flach) .rh-top .tb-pin .tb-ab .material-symbols-rounded { font-size: 14px; }
body:not(.flach) #crsOverlay .rh-top .tb-pin:hover .tb-ab,
body:not(.flach) .rh-top .tb-pin:hover .tb-ab { opacity: .7; }
body:not(.flach) #crsOverlay .rh-top .tb-pin .tb-ab:hover,
body:not(.flach) .rh-top .tb-pin .tb-ab:hover { opacity: 1; background: rgba(255,255,255,.14); color: #fff; }
body:not(.flach) #crsOverlay .rh-top .tb-leer,
body:not(.flach) .rh-top .tb-leer {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px;
  font-size: 12.5px; color: var(--rh-mut); white-space: nowrap; opacity: .7;
}
body:not(.flach) #crsOverlay .rh-top .tb-leer .material-symbols-rounded,
body:not(.flach) .rh-top .tb-leer .material-symbols-rounded { font-size: 16px; }

/* ============================================================
   DIE NAVIGATION — Maße nach HubSpot

   34 px hohe Zeilen, 14 px Schrift, 18 px Symbol mit 12 px
   Abstand, 8 px Rand zur Leiste, 16 px Luft über einer Gruppe.
   Das ist enger als bisher und trägt mehr Punkte auf gleicher
   Höhe — genau das, was eine CRM-Navigation braucht.
   ============================================================ */
body:not(.flach) #crsOverlay .crs-marke,
body:not(.flach) .crs-marke { display: none; }   /* die Marke steht in der Topbar */

body:not(.flach) #crsOverlay .crs-navliste,
body:not(.flach) .crs-navliste {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
  padding: 0; margin: 0;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.14) transparent;
}
body:not(.flach) #crsOverlay .crs-navliste::-webkit-scrollbar,
body:not(.flach) .crs-navliste::-webkit-scrollbar { width: 6px; }
body:not(.flach) #crsOverlay .crs-navliste::-webkit-scrollbar-thumb,
body:not(.flach) .crs-navliste::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 3px; }

body:not(.flach) #crsOverlay .crs-nv,
body:not(.flach) .crs-nv {
  display: flex; align-items: center; gap: 12px;
  height: 34px; min-height: 34px; padding: 0 14px; border-radius: 6px; width: 100%;
  font-size: 14px; font-weight: 500; color: var(--rh-text);
  background: none; border: 0; position: relative; cursor: pointer;
  text-align: left;
}
/* ZEIGEN UND GEWAEHLT - mit denselben Formen wie schwebend.css.

   Dort stehen die Regeln als :hover:not(.an) und .an:hover, also
   mit (0,4,0). Eine schlichte .crs-nv:hover-Regel (0,3,0) kommt
   dagegen nicht an, egal wie spaet sie geladen wird - und genau
   darum blieb beim Zeigen die HELLE Flaeche von frueher stehen,
   mit dunkler Schrift auf dunklem Grund. */
body:not(.flach) #crsOverlay .crs-nv:hover:not(.an),
body:not(.flach) .crs-nv:hover:not(.an) {
  background: rgba(255,255,255,.06);
  color: var(--rh-text);
}
body:not(.flach) #crsOverlay .crs-nv.an:hover,
body:not(.flach) .crs-nv.an:hover {
  background: rgba(255,255,255,.14);
  color: var(--rh-text);
}
/* Beim Zeigen wird das Symbol HELLER, nicht dunkler.
   schwebend.css faerbt es auf #12233a - gedacht fuer die helle
   Navigation von frueher. Auf dem dunklen Rahmen verschwindet es
   damit fast, und der Zeiger-Effekt sah kaputt aus. Die Regel
   dort ist mit (0,4,1) spezifischer als meine Grundregel fuer
   das Symbol; eine eigene Hover-Regel mit derselben Stelle im
   Selektor schlaegt sie, weil diese Datei spaeter geladen wird. */
body:not(.flach) #crsOverlay .crs-nv:hover .material-symbols-rounded,
body:not(.flach) .crs-nv:hover .material-symbols-rounded { color: var(--rh-text); }
/* Dasselbe fuer den gewaehlten Punkt: dort setzt schwebend.css
   die Designfarbe, die auf dunklem Grund kaum traegt. */
body:not(.flach) #crsOverlay .crs-nv.an .material-symbols-rounded,
body:not(.flach) .crs-nv.an .material-symbols-rounded { color: var(--rh-text); }
body:not(.flach) #crsOverlay .crs-nv.an .crs-nz,
body:not(.flach) .crs-nv.an .crs-nz { background: rgba(255,255,255,.14); color: var(--rh-text); }
body:not(.flach) #crsOverlay .crs-nv.an,
body:not(.flach) .crs-nv.an { background: rgba(255,255,255,.1); font-weight: 600; color: var(--rh-text); }
/* Der Akzentbalken links statt einer gefüllten Fläche: man WEISS,
   wo man ist — der Punkt muss es nur bestätigen, nicht rufen. */
body:not(.flach) #crsOverlay .crs-nv.an::before,
body:not(.flach) .crs-nv.an::before {
  content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--rh-akz);
}
body:not(.flach) #crsOverlay .crs-nv .material-symbols-rounded,
body:not(.flach) .crs-nv .material-symbols-rounded { font-size: 18px; flex: none; color: var(--rh-mut); }
body:not(.flach) #crsOverlay .crs-nv.an .material-symbols-rounded,
body:not(.flach) .crs-nv.an .material-symbols-rounded { color: var(--rh-text); }
body:not(.flach) #crsOverlay .crs-nt,
body:not(.flach) .crs-nt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body:not(.flach) #crsOverlay .crs-nz,
body:not(.flach) .crs-nz {
  font-size: 11px; font-weight: 700; color: var(--rh-mut);
  background: rgba(255,255,255,.08); border-radius: 9px; padding: 1px 6px; min-width: 0;
}

/* Die Bereichsüberschrift: eigene 34-px-Zeile, 16 px Luft darüber. */
body:not(.flach) #crsOverlay .crs-navkat,
body:not(.flach) .crs-navkat {
  display: flex; align-items: center; height: 34px; padding: 0 14px;
  margin-top: 16px; margin-bottom: 0;
  font-size: 13px; font-weight: 500; color: var(--rh-mut);
  text-transform: none; letter-spacing: 0;
}
body:not(.flach) #crsOverlay .crs-navliste > .crs-navkat:first-child,
body:not(.flach) .crs-navliste > .crs-navkat:first-child { margin-top: 0; }

body:not(.flach) #crsOverlay .crs-navfuss,
body:not(.flach) .crs-navfuss {
  flex: none; padding: 8px 0 0; margin-top: 8px;
  border-top: 1px solid var(--rh-rand);
  display: flex; align-items: center; gap: 4px;
}
body:not(.flach) #crsOverlay .crs-navfuss .crs-nv,
body:not(.flach) .crs-navfuss .crs-nv { height: 32px; min-height: 32px; }
/* Zwei volle Knöpfe nebeneinander passen in 216 px nicht: beide
   wurden abgeschnitten. Der Papierkorb kommt mit seinem Symbol
   aus — "Einklappen" nicht, denn dort steht, was der Knopf tut. */
body:not(.flach) #crsOverlay .crs-navfuss [data-crssicht="korb"],
body:not(.flach) .crs-navfuss [data-crssicht="korb"] {
  flex: none; width: 32px; padding: 0; gap: 0; justify-content: center;
}
body:not(.flach) #crsOverlay .crs-navfuss [data-crssicht="korb"] .crs-nt,
body:not(.flach) .crs-navfuss [data-crssicht="korb"] .crs-nt { display: none; }
body:not(.flach) .crs-navfuss #crsEng { flex: 1; min-width: 0; }
/* Glossy Rahmen heisst: keine Uebergaenge. Die Trennlinie ueber
   dem Navigationsfuss ist zwar keine Leistenkante, aber derselbe
   helle Strich - und sie saesse ausgerechnet da, wo die
   Navigation in die Fussleiste laeuft. */
body:not(.flach) #crsOverlay .crs-navfuss,
body:not(.flach) .crs-navfuss { border-top: 0; }

/* Schmale Navigation: nur Symbole, Zeilen bleiben 34 px hoch. */
body:not(.flach) #crsOverlay .crs-frame.eng .crs-nv,
body:not(.flach) .crs-frame.eng .crs-nv { justify-content: center; padding: 0; gap: 0; }
body:not(.flach) .crs-frame.eng .crs-nt,
body:not(.flach) .crs-frame.eng .crs-nz,
body:not(.flach) #crsOverlay .crs-frame.eng .crs-navkat,
body:not(.flach) .crs-frame.eng .crs-navkat { display: none; }
body:not(.flach) #crsOverlay .crs-frame.eng .crs-nv.an::before,
body:not(.flach) .crs-frame.eng .crs-nv.an::before { display: none; }
body:not(.flach) #crsOverlay .crs-frame.eng .crs-nv.an,
body:not(.flach) .crs-frame.eng .crs-nv.an { box-shadow: inset 0 0 0 1px rgba(var(--rh-akz-rgb), .5); }

/* ============================================================
   TOPBAR
   ============================================================ */
body:not(.flach) .rh-marke { display: flex; align-items: center; gap: 10px; flex: none;
  width: calc(var(--rh-navw) - 26px); min-width: 0; overflow: hidden; }
body:not(.flach) .crs-frame.eng .rh-marke,
body:not(.flach) #crsOverlay .crs-frame.rh-ohne-nav .rh-marke,
body:not(.flach) .crs-frame.rh-ohne-nav .rh-marke { width: auto; }
body:not(.flach) #crsOverlay .rh-logo,
body:not(.flach) .rh-logo {
  width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center;
  background: conic-gradient(from 0deg, var(--rh-akz), var(--rh-akz2), var(--rh-akz3), var(--rh-akz));
  box-shadow: 0 0 18px rgba(var(--rh-akz-rgb), .45); position: relative;
}
body:not(.flach) .rh-logo::before { content: ""; position: absolute; inset: 1.5px; border-radius: 7.5px;
  background: linear-gradient(135deg, #fff, #e7ecf3); }
body:not(.flach) #crsOverlay .rh-logo .material-symbols-rounded,
body:not(.flach) .rh-logo .material-symbols-rounded { position: relative; z-index: 1; font-size: 17px; color: #0b0d12; }
body:not(.flach) #crsOverlay .rh-wort,
body:not(.flach) .rh-wort { display: flex; flex-direction: column; line-height: 1; min-width: 0; }
body:not(.flach) #crsOverlay .rh-wort b,
body:not(.flach) .rh-wort b { font-size: 16px; font-weight: 800; letter-spacing: -.015em; white-space: nowrap; }
body:not(.flach) #crsOverlay .rh-wort b i,
body:not(.flach) .rh-wort b i { font-style: normal; color: var(--rh-akz2); }
body:not(.flach) .rh-wort small { font-size: 8.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .24em; color: var(--rh-mut); margin-top: 4px; }

/* Die Suite-Suche zieht in die Topbar um. */
/* Die Suche steht in der MITTE — und zwar absolut, nicht im
   Fluss: im Fluss hinge ihre Lage davon ab, wie viele Seiten
   gerade angeheftet sind, und mit jeder weiteren Pille rutschte
   sie nach rechts. So liegt sie immer in der Mitte des
   Fensters, unabhängig von allem daneben. */
body:not(.flach) #crsOverlay .rh-top .crs-gsuche,
body:not(.flach) .rh-top .crs-gsuche {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: min(420px, 34vw); min-width: 0; z-index: 2;
}
body:not(.flach) #crsOverlay .rh-top .crs-gs-feld,
body:not(.flach) .rh-top .crs-gs-feld {
  display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 11px;
  border-radius: 10px; background: rgba(0,0,0,.22); border: 1px solid var(--rh-rand);
  color: var(--rh-mut);
}
body:not(.flach) #crsOverlay .rh-top .crs-gs-feld:hover,
body:not(.flach) .rh-top .crs-gs-feld:hover { background: rgba(0,0,0,.3); border-color: rgba(var(--rh-akz-rgb), .4); }
body:not(.flach) #crsOverlay .rh-top .crs-gs-feld .material-symbols-rounded,
body:not(.flach) .rh-top .crs-gs-feld .material-symbols-rounded { font-size: 17px; }
body:not(.flach) #crsOverlay .rh-top .crs-gs-feld input,
body:not(.flach) .rh-top .crs-gs-feld input {
  flex: 1; min-width: 0; background: none; border: 0; outline: 0;
  font: inherit; font-size: 12.5px; color: var(--rh-text);
}
body:not(.flach) #crsOverlay .rh-top .crs-gs-feld input::placeholder,
body:not(.flach) .rh-top .crs-gs-feld input::placeholder { color: var(--rh-mut); }
body:not(.flach) #crsOverlay .rh-top .crs-gs-feld kbd,
body:not(.flach) .rh-top .crs-gs-feld kbd {
  font: 700 10px/1 ui-monospace, Consolas, monospace; padding: 4px 6px;
  border-radius: 5px; background: rgba(255,255,255,.07); color: var(--rh-mut);
}
body:not(.flach) #crsOverlay .rh-top .crs-gs-erg,
body:not(.flach) .rh-top .crs-gs-erg { top: 40px; }

body:not(.flach) #crsOverlay .rh-schub,
body:not(.flach) .rh-schub { flex: 1; }
body:not(.flach) #crsOverlay .rh-ibtn,
body:not(.flach) .rh-ibtn {
  all: unset; box-sizing: border-box; cursor: pointer; width: 32px; height: 32px;
  border-radius: 9px; display: grid; place-items: center; color: var(--rh-mut);
}
body:not(.flach) #crsOverlay .rh-ibtn:hover,
body:not(.flach) .rh-ibtn:hover { background: rgba(255,255,255,.07); color: var(--rh-text); }
body:not(.flach) #crsOverlay .rh-ibtn.an,
body:not(.flach) .rh-ibtn.an { background: rgba(var(--rh-akz-rgb), .18); color: #fff; }
body:not(.flach) #crsOverlay .rh-ibtn .material-symbols-rounded,
body:not(.flach) .rh-ibtn .material-symbols-rounded { font-size: 19px; }
body:not(.flach) #crsOverlay .rh-ibtn:focus-visible,
body:not(.flach) .rh-ibtn:focus-visible { outline: 2px solid var(--rh-akz); outline-offset: 2px; }
/* Nur bei Hochglanz: der aktive Symbolknopf bekommt Verlauf und
   Lichtkante. In den matten Entwürfen bleibt er eine Fläche. */
html[data-design="glossy"] body:not(.flach) #crsOverlay .rh-ibtn.an,
html[data-design="glossy"] body:not(.flach) .rh-ibtn.an,
html[data-design="noir"] body:not(.flach) #crsOverlay .rh-ibtn.an,
html[data-design="noir"] body:not(.flach) .rh-ibtn.an {
  background: linear-gradient(180deg, rgba(var(--rh-akz-rgb), .45), rgba(var(--rh-akz-rgb), .22));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 2px 10px rgba(var(--rh-akz-rgb), .45);
}

/* ============================================================
   RECHTE SIDEBAR — vorerst leer

   Sie wird gebaut und lässt sich ein- und ausblenden, trägt aber
   noch keine Werkzeuge. Lieber eine leere Leiste, die man
   wegklappen kann, als vier Knöpfe, die nichts tun.
   ============================================================ */
body:not(.flach) #crsOverlay .rh-rechts .rh-ibtn,
body:not(.flach) .rh-rechts .rh-ibtn { width: 38px; height: 38px; border-radius: 11px; }
body:not(.flach) #crsOverlay .rh-rechts .rh-ibtn .material-symbols-rounded,
body:not(.flach) .rh-rechts .rh-ibtn .material-symbols-rounded { font-size: 20px; }
body:not(.flach) #crsOverlay .rh-lueck,
body:not(.flach) .rh-lueck { flex: 1; }
body:not(.flach) #crsOverlay .rh-rtrenner,
body:not(.flach) .rh-rtrenner { width: 24px; height: 1px; background: var(--rh-rand); margin: 6px 0; }

/* ============================================================
   BOTTOMBAR
   ============================================================ */
body:not(.flach) .rh-zustand { display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; color: var(--rh-mut); }
body:not(.flach) #crsOverlay .rh-zustand .material-symbols-rounded,
body:not(.flach) .rh-zustand .material-symbols-rounded { font-size: 15px; }
body:not(.flach) .rh-ampel { width: 7px; height: 7px; border-radius: 50%; background: #34d399;
  box-shadow: 0 0 8px rgba(52,211,153,.7); }
body:not(.flach) .rh-gruppe { display: flex; align-items: center; gap: 3px; padding: 3px;
  border-radius: 11px; background: rgba(0,0,0,.22); border: 1px solid var(--rh-rand); }
body:not(.flach) #crsOverlay .rh-gruppe .rh-ibtn,
body:not(.flach) .rh-gruppe .rh-ibtn { width: 28px; height: 26px; border-radius: 8px; }
body:not(.flach) #crsOverlay .rh-gruppe .rh-ibtn .material-symbols-rounded,
body:not(.flach) .rh-gruppe .rh-ibtn .material-symbols-rounded { font-size: 17px; }
body:not(.flach) #crsOverlay .rh-gruppe .rh-ibtn.an,
body:not(.flach) .rh-gruppe .rh-ibtn.an { background: rgba(var(--rh-akz-rgb), .25); color: #fff; }
body:not(.flach) .rh-lbl { font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--rh-mut); margin-right: 3px; }
body:not(.flach) #crsOverlay .rh-proben,
body:not(.flach) .rh-proben { display: flex; align-items: center; gap: 5px; }
body:not(.flach) #crsOverlay .rh-probe,
body:not(.flach) .rh-probe {
  all: unset; box-sizing: border-box; cursor: pointer; width: 15px; height: 15px;
  border-radius: 50%; border: 2px solid transparent;
}
body:not(.flach) #crsOverlay .rh-probe.an,
body:not(.flach) .rh-probe.an { border-color: rgba(255,255,255,.75); }
body:not(.flach) #crsOverlay .rh-probe:focus-visible,
body:not(.flach) .rh-probe:focus-visible { outline: 2px solid var(--rh-akz); outline-offset: 2px; }

/* ============================================================
   Schmales Fenster: der Rahmen legt sich zusammen.
   ============================================================ */
@media (max-width: 900px) {
  body:not(.flach) #crsOverlay .crs-frame,
  body:not(.flach) .crs-frame { --rh-navw: 60px; --rh-fr: 0; }
  body:not(.flach) .crs-frame .crs-nt,
  body:not(.flach) .crs-frame .crs-nz,
  body:not(.flach) #crsOverlay .crs-frame .crs-navkat,
  body:not(.flach) .crs-frame .crs-navkat { display: none; }
  body:not(.flach) #crsOverlay .crs-frame .crs-nv,
  body:not(.flach) .crs-frame .crs-nv { justify-content: center; padding: 0; gap: 0; }
  body:not(.flach) #crsOverlay .rh-marke,
  body:not(.flach) .rh-marke { width: auto; }
  body:not(.flach) #crsOverlay .rh-wort,
  body:not(.flach) .rh-wort { display: none; }
}


/* ============================================================
   NOTNAGEL FUER DIE TOPBAR

   Sie traegt auch die Klasse crs-kopf, und schwebend.css macht
   daraus ein RASTER aus drei Spalten. Setzt sich dort das Raster
   durch, landen alle Kinder ohne grid-column in Spalte 1 -
   uebereinander. Die Suche liegt dann obenauf und faengt jeden
   Zeiger ab: die angehefteten Seiten reagieren weder auf Zeigen
   noch auf Klicken, und genau so sah es aus.

   Welche Regel gewinnt, haengt davon ab, ob die Suite im Overlay
   laeuft - nur dann traegt meine Fassung eine ID. Damit es in
   BEIDEN Faellen sicher ist, steht sie hier noch einmal mit dem
   Entwurfs-Attribut als zusaetzlicher Stelle im Selektor. Das
   haengt an <html> und ist immer gesetzt.
   ============================================================ */
html[data-design] body:not(.flach) .rh-top {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 12px 0 14px;
  grid-template-columns: none;
  min-height: 0;
  border-radius: var(--rh-rund);
  box-shadow: var(--rh-leiste-schatten);
  background: var(--rh-leiste);
}
/* Dieselbe Stelle fuer die Kinder: sonst zieht schwebend.css sie
   weiterhin in seine Spalten. */
html[data-design] body:not(.flach) .rh-top > .tb-pins { grid-column: auto; justify-self: auto; order: 1; }
html[data-design] body:not(.flach) .rh-top > .crs-gsuche {
  grid-column: auto; justify-self: auto;
  position: absolute; left: 50%; transform: translateX(-50%);
  width: min(420px, 34vw); max-width: none;
}
html[data-design] body:not(.flach) .rh-top > #ktoKnopf,
html[data-design] body:not(.flach) .rh-top > .kto-knopf { grid-column: auto; justify-self: auto; order: 4; }
/* Das Schliessen-Kreuz blendet schwebend.css aus - im Rahmen ist
   es aber der einzige Weg hinaus. */
html[data-design] body:not(.flach) .rh-top > .crs-x { display: inline-grid; order: 5; }