/* Übersicht der CIN-Next-Familie (Nutzer 14.10.2026, Regeln in dev/regeln/uebersicht.md). Vorbild Creative Suite: je
   Produkt ein Quadrat mit Kürzel, als Gruppe ein Farbkreis. Hero schlicht im Open-Source-Stil (Zielbild Fassung 2):
   weiß, feine Linien, Monospace für Kicker und Versionen, transparente Karte, Quadrate mit Verlauf und Symbol,
   Spiegelbild darunter. Bewegung nur als Mikroanimation im Hero, alles andere steht (endgültige Fassung, Nutzer
   14.10.2026: "Symbol, Karte, Spiegelbild, Mikro"). Darkmode-Regeln in der Form html[data-bs-theme="dark"] …, wie im Rest der Seite. */

/* JetBrains Mono für Überschrift, Kicker und Versionen im Hero (Nutzer 14.10.2026: Retro-Bildschirm "Alles in einer
   Schriftart", aus elf Schriften gewählt: JetBrains Mono, nicht fett). paket-bauen.py lädt die Schrift beim Bauen
   als lokale Datei (DSGVO). */
@import url("fonts/uebersicht-fonts.css");

/* ---------- Palette (Nutzer 14.10.2026: "etwas blassere Farbpalette", dann "Dieses Monotone ist zu langweilig. Ich will
   mehr Dynamik", "jedem einzelnen Icon ein anderes Motiv, ein passendes"; gewählt: Verlauf und Symbol) ----------
   Je Produkt Grundton (--p-*), Nachbarton für den Verlauf (--p2-*), Schrift des Kürzels (--t-*) und Akzent für Häkchen,
   Linien, Ring und Schein (--u-*). Palette "Verlauf", beim Überfahren im Hero "Verlauf kräftig" (--pk-*, --pk2-*;
   Nutzer: "Standard die Verlaufpalette und OnHover die Verlauf kräftiger").
   Verläufe: Weiß auf beiden Enden mindestens 3:1 (Verlauf 3,3:1, kräftig 3,05:1), reicht für die großen fetten Kürzel.
   Die Werte der Produktfarben stehen seit 15.10.2026 zentral in :root von homepage.css (Gerüst, Nutzer "Ja, zentral"),
   hier nur noch Schrift des Kürzels und Akzent. */

:root {
  --t-crm: #fff; --t-pos: #fff; --t-wms: #fff; --t-shop: #fff; --t-robo: #fff;
  --u-crm: var(--p-crm); --u-pos: var(--p-pos); --u-wms: var(--p-wms); --u-shop: var(--p-shop); --u-robo: var(--p-robo);
}

@property --c { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --c2 { syntax: "<color>"; inherits: true; initial-value: transparent; }

[data-p="crm"]  { --c: var(--p-crm);  --c2: var(--p2-crm);  --fg: var(--t-crm);  --c-ui: var(--u-crm); }
[data-p="pos"]  { --c: var(--p-pos);  --c2: var(--p2-pos);  --fg: var(--t-pos);  --c-ui: var(--u-pos); }
[data-p="wms"]  { --c: var(--p-wms);  --c2: var(--p2-wms);  --fg: var(--t-wms);  --c-ui: var(--u-wms); }
[data-p="shop"] { --c: var(--p-shop); --c2: var(--p2-shop); --fg: var(--t-shop); --c-ui: var(--u-shop); }
[data-p="robo"] { --c: var(--p-robo); --c2: var(--p2-robo); --fg: var(--t-robo); --c-ui: var(--u-robo); }

/* Quadrat mit Verlauf, großem Symbol (bi-*) und kleinem Kürzel darunter (Nutzer: Motiv "Symbol"). Der Name steht
   zusätzlich im Text und im aria-label, weil Weiß auf den Verläufen nur 3:1 hat. */
.uv-sq {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  aspect-ratio: 1;
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgb(255 255 255 / .18), transparent 60%),
    linear-gradient(135deg, var(--c2), var(--c));
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .06);
  color: var(--fg);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1;
  letter-spacing: .02em;
}
.uv-sym { display: block; font-size: 1.7em; line-height: 1; }
.uv-kz { margin-top: .3em; font-size: .52em; letter-spacing: .08em; }
/* CIN-Zeichen aus dem Logo statt bi-Symbol (Würfel CIN NEXT, Nutzer 19.10.2026): Es füllt sein Feld ganz aus, die
   bi-Symbole nicht; deshalb 84 % der Symbolgröße, der Rand hält die Höhe gleich */
.uv-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.uv-cin { width: .84em; height: .84em; margin: .08em; fill: currentColor; }
html[data-bs-theme="dark"] .uv-sq { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); }
/* Etikett "Neu" (Nutzer 14.10.2026 mit Referenzbild: "etwas farbiger und größer"): kräftiges Gelb, Schrift in Navy */
.uv-new {
  position: absolute;
  top: -.6rem;
  right: -.6rem;
  z-index: 1;
  padding: .22rem .6rem;
  border-radius: 999px;
  background: #fcd34d;
  color: #1b3661;
  font-size: .7rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: transform .2s ease;
}

/* Knöpfe ohne Bootstrap-.btn (dessen Hover färbt die Schrift um); beim Überfahren nur der Zeiger */
.uv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .6rem 1.1rem;
  border-radius: 999px;
  border: 1px solid #1b3661;
  background: #1b3661;
  color: #fff;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
}
.uv-btn:hover { color: #fff; }
.uv-btn--ghost,
.uv-btn--ghost:hover { background: transparent; border-color: rgb(27 54 97 / .25); color: #1b3661; }
.uv-btn:focus-visible { outline: 2px solid #1b3661; outline-offset: 3px; }

/* ---------- Hero (Fassung 3, Nutzer 14.10.2026 spätabends: "reduzieren nur auf Icons") ----------
   Links alle Texte: Release-Hinweis, Kicker, Überschrift mit Schreibmaschine, Slogan, Satz, zwei Knöpfe. Rechts ohne
   Karte nur die fünf Icons als Dock auf einer festen Grundlinie; das gewählte wird zur Karte mit Inhalt. */

/* Farbe des "Stifts" im Hero: Orange, nach dem Wählen eines Icons dessen kräftige Farbe (data-gen am #hero, gesetzt
   von uebersicht.js). Färbt NÄCHSTEN GENERATION, den Cursor, die Punkte hinter der Überschrift und die Stränge.
   --pen2 ist der Nachbarton (--pk2-* wie im Verlauf der Icons) für den Slogan; vor der Wahl Orange #ea580c (3,6:1 auf
   Weiß, ein helles Bernstein hätte nur 2,2:1). */
@property --pen { syntax: "<color>"; inherits: true; initial-value: #d97706; }
@property --pen2 { syntax: "<color>"; inherits: true; initial-value: #ea580c; }
.uv-hero {
  --pen: #d97706;
  --pen2: #ea580c;
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: 100vh;
  padding: 6.4rem 5vw 4rem;
  transition: --pen .6s ease, --pen2 .6s ease;
}
#hero[data-gen="crm"]  { --pen: var(--pk-crm);  --pen2: var(--pk2-crm); }
#hero[data-gen="pos"]  { --pen: var(--pk-pos);  --pen2: var(--pk2-pos); }
#hero[data-gen="wms"]  { --pen: var(--pk-wms);  --pen2: var(--pk2-wms); }
#hero[data-gen="shop"] { --pen: var(--pk-shop); --pen2: var(--pk2-shop); }
#hero[data-gen="robo"] { --pen: var(--pk-robo); --pen2: var(--pk2-robo); }
/* Punktraster als organische Wolke (Nutzer 14.10.2026: "viel zu extrem", "mehr organisch …, so dass sie die farbigen
   Texte erreichen"): um das Dock, nach links bis an NÄCHSTEN GENERATION, außen keine Punkte. Die Wolke sind vier weich
   überlappende Ellipsen (--b1… bis --b4…, aus der Lage von Dock und Schrift in uebersicht.js). Graue Punkte mit 8 %
   Deckkraft; darüber dieselben Punkte in der Stiftfarbe nahe der farbigen Schrift (--c…). Beide Lagen und die Leinwände
   der Stränge und der Welle haben dieselbe Fläche, damit die Punkte genau übereinander liegen. */
.uv-hero::before,
.uv-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-size: 16px 16px;
  pointer-events: none;
}
.uv-hero::before {
  --blob:
    radial-gradient(ellipse var(--b1rx, 30%) var(--b1ry, 42%) at var(--b1x, 70%) var(--b1y, 52%), #000 50%, transparent 100%),
    radial-gradient(ellipse var(--b2rx, 1px) var(--b2ry, 1px) at var(--b2x, 0px) var(--b2y, 0px), #000 45%, transparent 100%),
    radial-gradient(ellipse var(--b3rx, 1px) var(--b3ry, 1px) at var(--b3x, 0px) var(--b3y, 0px), #000 45%, transparent 100%),
    radial-gradient(ellipse var(--b4rx, 1px) var(--b4ry, 1px) at var(--b4x, 0px) var(--b4y, 0px), #000 40%, transparent 100%);
  background-image: radial-gradient(rgb(27 54 97 / .08) 1px, transparent 1.3px);
  -webkit-mask-image: var(--blob);
  mask-image: var(--blob);
}
.uv-hero::after {
  background-image: radial-gradient(color-mix(in srgb, var(--pen) 55%, transparent) 1.1px, transparent 1.4px);
  -webkit-mask-image: radial-gradient(ellipse var(--crx, 1px) var(--cry, 1px) at var(--cx, 0px) var(--cy, 0px), rgb(0 0 0 / .6), transparent);
  mask-image: radial-gradient(ellipse var(--crx, 1px) var(--cry, 1px) at var(--cx, 0px) var(--cy, 0px), rgb(0 0 0 / .6), transparent);
}
/* Stränge wie Datentransfer (Nutzer: "kleine Stränge … wie Datentransfer. Nur dezent", Fassung 3: "durchgehend bis zu
   dem jeweiligen Icon") und Pixelwelle des Intros: Leinwände auf derselben Fläche wie das Raster, hinter dem Inhalt */
.uv-strands,
.uv-wave { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.uv-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: clamp(3rem, 6vw, 5.5rem);
  align-items: center;
  width: 100%;
  max-width: 84rem;
  margin: 0 auto;
}
/* links an der Mittelachse, linksbündig */
.uv-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-self: end;
  width: 100%;
  max-width: 34rem;
  text-align: left;
  container-type: inline-size;
}
/* Schrift des Retro-Bildschirms (Nutzer 14.10.2026 aus elf Schriften gewählt: JetBrains Mono, nicht fett) */
.uv-retro { font-family: "JetBrains Mono", ui-monospace, "Liberation Mono", monospace; font-weight: 400; }
.uv-hero-copy .k { margin-bottom: .55rem; font-size: 1rem; line-height: 1.2; letter-spacing: .04em; color: #7a7368; }
/* Live-Webinar 04.11.2026 (Nutzer 22.10.2026): Hinweis, Rubrik und Kopfzeilen-Punkt nur, solange das Skript im <head>
   die Klasse uv-webinar setzt (bis 04.11.2026 16:00 Uhr deutscher Zeit, ohne JavaScript nie) */
html:not(.uv-webinar) [data-webinar] { display: none !important; }
/* Hinweis über dem Kicker (gewählt "Pille", "Über dem Kicker"): weiße Pille mit feinem Rand, Datum in der Schrift der
   Überschrift. Links ein gelbes Feld "Neu" wie an den Icons (Nutzer nach dem Test: erst Feld LIVE, dann gelber Punkt,
   Blinken entfernt, zuletzt "mach darauß wiede 'Neu'", "achte auf das centering": Schrift im Feld optisch mittig).
   Keine Bewegung, beim Überfahren nur der Rand in Navy. Überschrift, Container und Dock rücken um ihre Höhe (die Fluchtlinie
   misst alignTop in uebersicht.js). */
.uv-live {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  max-width: 100%;
  margin-bottom: .9rem;
  padding: .3rem .85rem .3rem .3rem;
  border: 1px solid rgb(27 54 97 / .16);
  border-radius: 999px;
  background: #fff;
  color: #3d3a35;
  font-family: "JetBrains Mono", ui-monospace, "Liberation Mono", monospace;
  font-size: .82rem;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .2s ease;
}
.uv-live:hover { border-color: #1b3661; color: #3d3a35; }
.uv-live:focus-visible { outline: 2px solid #1b3661; outline-offset: 3px; }
.uv-live-new {
  flex: none;
  padding: .24rem calc(.5rem - .06em) .2rem .5rem;
  border-radius: 999px;
  background: #fcd34d;
  color: #1b3661;
  font-family: Outfit, sans-serif;
  font-size: .68rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.uv-live .bi { color: #1b3661; font-size: .95em; }
.uv-live-text { overflow: hidden; text-overflow: ellipsis; }
/* 360 px: ganz in einer Zeile ohne Abschneiden */
@media (max-width: 399.98px) { .uv-live { gap: .28rem; padding-inline: .26rem .5rem; font-size: .72rem; } }
/* alle drei Zeilen in einer Schrift, gleich groß wie auf einem Bildschirm. "NÄCHSTEN GENERATION" und "für Ihr ganzes
   Unternehmen." passen samt Cursor je in eine Zeile (Nutzer 14.10.2026: "Betrieb" in die Zeile darüber): uebersicht.js misst
   die längere Zeile in der Schrift und setzt --type-div (JetBrains Mono: 16,2em plus Zelle 0,6em; bis 20.10.2026 mit "Betrieb" 15em) */
.uv-hero-copy h1 {
  margin: 0;
  font-size: min(4.6rem, calc(100cqi / var(--type-div, 17.1)));
  line-height: 1.12;
  letter-spacing: 0;
  color: #141210;
}
/* ---------- Überschrift mit Schreibmaschine (Nutzer 14.10.2026) ----------
   Zeile 1 "Software der", Zeile 2 NÄCHSTEN GENERATION in der Stiftfarbe (ohne Hintergrund), Zeile 3 Teil 2 je Produkt,
   Produktname in Produktfarbe; alles in einer Schrift, gleiche Größe. Der dicke Cursor hat die Stiftfarbe. Wird ein Icon
   gewählt, markiert der Cursor die unteren zwei Zeilen invers und löscht sie, dann wechselt die Stiftfarbe und er tippt
   neu. Die Höhe hält uebersicht.js fest (längste Fassung), damit nichts springt. */
.uv-type { align-self: stretch; }
.uv-type-line { display: block; }
.uv-type-l1,
.uv-type-l2 { white-space: nowrap; }
/* Umbruch nach dem Doppelpunkt (\n in T2, Nutzer 15.10.2026): Produktname immer ganz in der Zeile darunter */
.uv-type-t2 { white-space: pre-line; }
.uv-gen { color: var(--pen); text-transform: uppercase; }
.uv-gen[hidden] { display: none; }
.uv-type-prod { color: var(--pc); }
.uv-type-prod[data-p="crm"]  { --pc: var(--pk-crm); }
.uv-type-prod[data-p="pos"]  { --pc: var(--pk-pos); }
.uv-type-prod[data-p="wms"]  { --pc: var(--pk-wms); }
.uv-type-prod[data-p="shop"] { --pc: var(--pk-shop); }
.uv-type-prod[data-p="robo"] { --pc: var(--pk-robo); }
/* dicker Block-Cursor wie am alten Terminal, eine Zeichenzelle breit: steht beim Tippen, blinkt in Ruhe im Sekundentakt;
   beim Markieren ausgeblendet */
.uv-cursor {
  display: inline-block;
  width: var(--cell, .6em);
  height: 1em;
  margin-left: .04em;
  vertical-align: -.2em;
  background: var(--pen);
}
.uv-cursor[hidden] { display: none; }
.uv-cursor.is-idle { animation: uv-blink 1s steps(1, end) infinite; }
@keyframes uv-blink { 50% { opacity: 0; } }
/* Markierung invers wie am Terminal (Nutzer: "Invers rückwärts"): Fläche in der Farbe des Textes, Schrift hell. Die Fläche
   ist genau eine Zeile hoch (1,12em wie die Zeilenhöhe der Überschrift, je Zeilenstück eigen), sonst ragt sie in die
   Nachbarzeilen (Nutzer 14.10.2026: "die Balken [sind] größer als der Text und überlappen in die nächste Zeile") */
.uv-sel {
  background: linear-gradient(var(--sel-c, #141210), var(--sel-c, #141210)) 0 50% / 100% 1.12em no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  color: #fff;
}
.uv-gen .uv-sel { --sel-c: var(--pen); }
.uv-type-prod.uv-sel { --sel-c: var(--pc); color: #fff; }
/* Slogan der Karte als Unterzeile (Nutzer: "Slogan" nach links), kleiner als die Überschrift */
.uv-hero-slogan {
  margin: 2.1rem 0 0; /* Nutzer 14.10.2026: "1rem Abstand nach oben zum Text" (1rem mehr) */
  font-size: clamp(1.15rem, 1.55vw, 1.45rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: #1b3661;
}
/* Verlauf im Produkt (Nutzer 15.10.2026 bei CRM: "Folgt dem Produkt"; Navy in die Produktfarbe "wirkt nicht gut fürs
   Auge", gewählt "Verlauf im Produkt"): zwei Nachbartöne des Produkts wie im Icon, vor der Wahl Bernstein nach Orange;
   kein Navy im Verlauf, kein trüber Mittelton. Wechselt mit dem weichen Übergang von NÄCHSTEN GENERATION, hell und
   dunkel gleich. */
.uv-hero-slogan em {
  font-style: normal;
  white-space: nowrap;
  background: linear-gradient(90deg, var(--pen), var(--pen2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.uv-hero-lead { margin: .7rem 0 1.5rem; max-width: 27rem; font-size: 1.02rem; line-height: 1.5; color: #5c564c; }
.uv-actions { display: flex; flex-wrap: wrap; gap: .6rem; }

.uv-hero-stage {
  position: relative;
  justify-self: start;
  width: 100%;
  max-width: 40rem;
  container-type: inline-size;
}

/* Fluchtlinien (Nutzer 14.10.2026, Screenshot: "Alles soll etwas harmonischer wirken und auf unsichtbare Fluchtlinien
   laufen"; gewählt "Freiraum über Icons"), nur nebeneinander ab 900 px:
   - oben: Oberkante der Großbuchstaben von "Software der" (erste Zeile der Überschrift) und Oberkante des Containers
     auf einer Linie (Nutzer 14.10.2026, zweiter Screenshot: "noch etwas runter gleich mit 'Software der'");
   - unten: Grundlinie der letzten Zeile des Fließtexts auf der Unterkante der Icons (Boden der Spiegelung);
   - der Container bleibt kompakt, der übrige Platz steht zwischen Container und Icons (mindestens 1,6rem); wird die
     Bühne höher als der Text (schmale Fenster), wächst links die Lücke unter der Überschrift;
   - das Ganze steht höher als die Mitte (unten mehr Rand als oben, bei 900 px Fensterhöhe etwa 60 px höher).
   Grundlinie: --lead-d ist der Abstand von der Grundlinie bis zur Unterkante der Zeile (Zeilenhöhe 1,5, Schrift des
   Fließtexts); --cap-d der Abstand vom Anfang der Zeile bis zur Oberkante der Großbuchstaben von "Software der", gemessen
   in uebersicht.js (alignTop); ohne Skript gilt der Näherungswert. */
.uv-hero-text { display: contents; }
@media (min-width: 900px) {
  .uv-hero { padding-bottom: max(4rem, 20.8vh); }
  .uv-hero-grid { grid-template-rows: auto auto; row-gap: 0; align-items: stretch; }
  /* Größen-Container (für die Schrift der Überschrift) eine Ebene tiefer, sonst gilt keine Teilung der Zeilen (subgrid) */
  .uv-hero-copy { container-type: normal; grid-column: 1; grid-row: 1 / span 2; display: grid; grid-template-rows: subgrid; justify-items: start; }
  .uv-hero-text { container-type: inline-size; display: flex; flex-direction: column; align-items: flex-start; align-self: stretch; width: 100%; }
  .uv-hero-copy h1 { margin-bottom: 2.1rem; }
  .uv-hero-slogan { margin-top: auto; }
  .uv-hero-lead { margin-bottom: 0; }
  .uv-actions { margin-top: 1.5rem; align-self: start; }
  .uv-hero-stage { --cap-d: 2.15rem; --lead-d: .42rem; grid-column: 2; grid-row: 1; align-self: stretch; justify-content: space-between; padding-top: var(--cap-d); }
  .uv-hero-stage .uv-dock { margin-bottom: calc(var(--lead-d) - .3rem - var(--s) * .44); }
}

/* ---------- Dock (Nutzer 14.10.2026: "Bitte wieder die Optik von Screenshot 1 einfügen mit den gleichen
   OnHover-Animationen", "onhover soll jetzt aber nicht mehr das Icon in size ändern") ----------
   Fünf Icons auf einer Grundlinie in der Optik der V-Old: Verlauf, großes Symbol, kleines Kürzel, Spiegelbild darunter,
   "Neu" an der Ecke. Gleich groß in Ruhe und gewählt (--s, 5,5rem, in schmalen Spalten kleiner), über die Breite der
   Bühne verteilt. Darüber steht der Container mit den Infos des gewählten Produkts (.uv-pop, per order über dem Dock). */
.uv-hero-stage { display: flex; flex-direction: column; }
.uv-dock {
  --s: min(5.5rem, calc(100cqi / 6));
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
}
.uv-dock > li { position: relative; flex: 0 0 auto; width: var(--s); }
.uv-dock .uv-el {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: --c .3s ease, --c2 .3s ease;
}
/* etwas größere Trefferfläche, vor allem auf dem Handy */
.uv-dock .uv-el::before { content: ""; position: absolute; inset: -.4rem; }
.uv-dock .uv-el:focus-visible { outline: 2px solid var(--c-ui); outline-offset: 3px; }
.uv-dock .uv-el > .uv-sq { width: 100%; font-size: calc(var(--s) * .255); }
/* Spiegelbild unter jedem Icon (Nutzer 14.10.2026: Farben "durch einen sanften Effekt gespiegelt"): kurz, ausblendend.
   Verhält sich wie eine echte Spiegelung am Boden (Prüflauf 14.10.2026): Der Streifen mit der Ausblendung steht fest,
   darin bewegt sich nur das gespiegelte Quadrat gegengleich zum Icon, um dieselbe Mitte. Hebt sich das Icon, rückt es
   nach unten in die Ausblendung und wird dadurch von selbst etwas blasser. "Neu" sitzt über dem Icon; gespiegelt läge
   es unterhalb des Streifens und bleibt deshalb unsichtbar. Das Spiegelbild liegt direkt am Icon an (vorher .3rem Lücke;
   der Streifen ist um sie länger, die Höhe des Docks bleibt), und der Streifen ist seitlich je 10 % breiter, damit das
   um 15 % wachsende Spiegelbild seine runden Seiten behält (Nutzer 20.10.2026 mit Screenshot: "er liegt nicht genau an
   dem icon und onhover verformen sich die seiten und passen nicht mehr zur iconform"). */
.uv-mirror {
  display: block;
  height: calc(var(--s) * .44 + .3rem);
  margin: 0 calc(var(--s) * -.1);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(rgb(0 0 0 / .32), transparent 92%);
  mask-image: linear-gradient(rgb(0 0 0 / .32), transparent 92%);
}
/* Die Spiegelung steht fest in scale (nie animiert); transform bewegt nur Lage und Größe und wirkt innerhalb der
   Spiegelung, deshalb heißt "6 px tiefer" dort translateY(-6px). Vorher lag scaleY(-1) im animierten transform: Beim
   schnellen Überfahren kehrte sich der Übergang mitten drin um, der Browser zerlegte die Spiegelung dann als halbe
   Drehung, und das Spiegelbild stand kurz schräg (Nutzer 15.10.2026, Screenshot POS: "verbuggtes Verhalten"). */
.uv-mirror .uv-sq { width: var(--s); margin: 0 auto; font-size: calc(var(--s) * .255); scale: 1 -1; }

/* Bewegung wie in der V-Old (Nutzer 14.10.2026): Icons setzen sich einmal beim Laden (je 80 ms versetzt). Beim
   Überfahren (nur Maus) kommt das Icon nach vorn (6 px hoch, 15 % größer; Nutzer 14.10.2026: "das aktive Icon etwas
   größer", gewählt 15 % statt 8 %) und geht in "Verlauf kräftig" über, das Spiegelbild geht gegengleich mit, die Nachbarn weichen zur Seite (10 px, die übernächsten 4 px),
   einmal läuft ein Lichtreflex diagonal darüber (0,8 s), "Neu" neigt sich 5°. Das gewählte Icon bleibt so angehoben, bis
   ein anderes gewählt wird; beim Intro hebt sich jedes kurz, wenn die Welle es erreicht (is-lit). Bei reduzierter
   Bewegung keine Animation; das gewählte steht ohne Übergang angehoben. */
.uv-dock .uv-el > .uv-sq,
.uv-dock .uv-mirror > .uv-sq,
.uv-dock > li {
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), filter .3s ease, opacity .3s ease;
}
.uv-dock .uv-sq::after,
.uv-ds-sq::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(105deg,
    transparent 38%,
    rgb(15 23 42 / .06) 42%,
    rgb(140 186 242 / .08) 46%,
    rgb(255 255 255 / .6) 50%,
    rgb(140 186 242 / .08) 54%,
    rgb(15 23 42 / .06) 58%,
    transparent 62%) 100% 0 / 300% 100% no-repeat;
}
/* Vor dem Puls des Intros grau (Nutzer 14.10.2026: "Vor Anfangs Animationspuls die Cards in Grau darstellen"); die
   Welle färbt jedes Icon, das sie erreicht (is-on), danach entfällt is-pre. Nur wo das Intro läuft (ab 768 px, ohne
   reduzierte Bewegung). */
:root { --g1: #a3adbd; --g2: #7b8698; }
html[data-bs-theme="dark"] { --g1: #4f5a6c; --g2: #364152; }
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .uv-dock.is-pre .uv-el:not(.is-on):not(:hover) { --c: var(--g1); --c2: var(--g2); }
}
.uv-dock .uv-el.is-lit[data-p="crm"],  .uv-dock > li.is-active > .uv-el[data-p="crm"]  { --c: var(--pk-crm);  --c2: var(--pk2-crm); }
.uv-dock .uv-el.is-lit[data-p="pos"],  .uv-dock > li.is-active > .uv-el[data-p="pos"]  { --c: var(--pk-pos);  --c2: var(--pk2-pos); }
.uv-dock .uv-el.is-lit[data-p="wms"],  .uv-dock > li.is-active > .uv-el[data-p="wms"]  { --c: var(--pk-wms);  --c2: var(--pk2-wms); }
.uv-dock .uv-el.is-lit[data-p="shop"], .uv-dock > li.is-active > .uv-el[data-p="shop"] { --c: var(--pk-shop); --c2: var(--pk2-shop); }
.uv-dock .uv-el.is-lit[data-p="robo"], .uv-dock > li.is-active > .uv-el[data-p="robo"] { --c: var(--pk-robo); --c2: var(--pk2-robo); }
.uv-dock .uv-el.is-lit > .uv-sq,
.uv-dock > li.is-active > .uv-el > .uv-sq { transform: translateY(-6px) scale(1.15); }
/* Spiegelbild angehoben: es bleibt genau an der Unterkante des Icons (das Icon hebt sich 6 px und wächst um 15 %, seine
   Unterkante wandert um 0,075 × Breite − 6 px; das Spiegelbild wandert gegengleich mit, gerechnet in der Spiegelung) */
.uv-dock .uv-el.is-lit .uv-mirror > .uv-sq,
.uv-dock > li.is-active .uv-mirror > .uv-sq { transform: translateY(calc(6px - var(--s) * .15)) scale(1.15); }
@media (prefers-reduced-motion: no-preference) {
  /* Einsetzen: Icon steigt 8 px auf, sein Spiegelbild sinkt gegengleich (translate, damit transform frei bleibt) */
  .uv-dock .uv-el { animation: uv-settle .26s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 80ms); }
  .uv-dock .uv-el > .uv-sq,
  .uv-dock .uv-mirror > .uv-sq { animation: uv-rise .26s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 80ms); }
  .uv-dock .uv-mirror > .uv-sq { animation-name: uv-sink; }
  @media (hover: hover) and (pointer: fine) {
    .uv-dock > li:has(> .uv-el:hover) { z-index: 2; }
    .uv-dock .uv-el[data-p="crm"]:hover  { --c: var(--pk-crm);  --c2: var(--pk2-crm); }
    .uv-dock .uv-el[data-p="pos"]:hover  { --c: var(--pk-pos);  --c2: var(--pk2-pos); }
    .uv-dock .uv-el[data-p="wms"]:hover  { --c: var(--pk-wms);  --c2: var(--pk2-wms); }
    .uv-dock .uv-el[data-p="shop"]:hover { --c: var(--pk-shop); --c2: var(--pk2-shop); }
    .uv-dock .uv-el[data-p="robo"]:hover { --c: var(--pk-robo); --c2: var(--pk2-robo); }
    .uv-dock .uv-el:hover > .uv-sq { transform: translateY(-6px) scale(1.15); }
    .uv-dock .uv-el:hover .uv-mirror > .uv-sq { transform: translateY(calc(6px - var(--s) * .15)) scale(1.15); }
    .uv-dock .uv-el:hover .uv-sq::after { animation: uv-sweep .8s cubic-bezier(.45, .05, .25, 1) both; }
    /* "Neu" (Nutzer: "Kein Federn, kein Wigglen, minimalistisch"): gleichmäßig 5° nach rechts und 106 % in 0,2 s */
    .uv-dock .uv-el:hover .uv-new { transform: rotate(5deg) scale(1.06); }
    .uv-dock > li:has(+ li > .uv-el:hover) { transform: translateX(-10px); }
    .uv-dock > li:has(+ li + li > .uv-el:hover) { transform: translateX(-4px); }
    .uv-dock > li:has(> .uv-el:hover) + li { transform: translateX(10px); }
    .uv-dock > li:has(> .uv-el:hover) + li + li { transform: translateX(4px); }
  }
}
@keyframes uv-sweep {
  0% { background-position: 100% 0; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { background-position: 0% 0; opacity: 0; }
}
@keyframes uv-settle {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes uv-rise { from { translate: 0 8px; } }
@keyframes uv-sink { from { translate: 0 -8px; } }

/* ---------- Container mit den Infos über der Reihe (Nutzer 14.10.2026: "darüber einen neuen Container spawnen, der
   alle Informationen beinhaltet. Dazu den aktuellen Container mit den Infos … weiter nach oben schieben, länger machen
   statt höher"; gewählt "Über der ganzen Reihe", "Bleibt stehen") ----------
   So breit wie die Reihe und flach: links Kopf (Symbol, Marke, Name, Version, "Neu") und Nutzen-Satz, rechts die drei
   Mehrwerte und darunter das Ziel. Sauberer kräftiger Verlauf des gewählten Produkts ohne Abdunklung, Schrift weiß mit
   feinem Schatten. Die fünf Inhalte liegen übereinander (die Fläche ist so hoch wie der längste, auch vor der ersten
   Wahl), damit nichts springt; Farbe und Inhalt blenden weich über, der Zeiger unten wandert zum gewählten Icon
   (--tip-x aus uebersicht.js). Vor der ersten Wahl unsichtbar. */
.uv-pop {
  --c: var(--pk-crm);
  --c2: var(--pk2-crm);
  position: relative;
  order: -1;
  display: grid;
  margin-bottom: 1.6rem;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgb(255 255 255 / .14), transparent 55%),
    linear-gradient(135deg, var(--c2), var(--c));
  color: #fff;
  text-shadow: 0 1px 2px rgb(0 0 0 / .22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: --c .35s ease, --c2 .35s ease, opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}
.uv-pop.is-on { opacity: 1; visibility: visible; transform: none; transition: --c .35s ease, --c2 .35s ease, opacity .25s ease, transform .25s ease, visibility 0s; }
.uv-pop[data-p="crm"]  { --c: var(--pk-crm);  --c2: var(--pk2-crm); }
.uv-pop[data-p="pos"]  { --c: var(--pk-pos);  --c2: var(--pk2-pos); }
.uv-pop[data-p="wms"]  { --c: var(--pk-wms);  --c2: var(--pk2-wms); }
.uv-pop[data-p="shop"] { --c: var(--pk-shop); --c2: var(--pk2-shop); }
.uv-pop[data-p="robo"] { --c: var(--pk-robo); --c2: var(--pk2-robo); }
.uv-pop-item {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: .6rem 1.6rem;
  padding: 1.05rem 1.25rem 1.1rem;
  visibility: hidden;
  opacity: 0;
  transition: opacity .2s ease, visibility 0s linear .2s;
}
.uv-pop-item.is-on { visibility: visible; opacity: 1; transition: opacity .25s ease .05s, visibility 0s; }
.uv-pop-head { display: flex; align-items: flex-start; gap: .7rem; margin: 0; }
.uv-pop-head > .bi { font-size: 2rem; line-height: 1; }
.uv-pop-cin { flex: 0 0 auto; width: 1.68rem; height: 1.68rem; margin: .16rem; fill: currentColor; filter: drop-shadow(0 1px 2px rgb(0 0 0 / .22)); }
.uv-pop-name { display: flex; flex-direction: column; font-size: 1.3rem; font-weight: 700; line-height: 1.05; letter-spacing: -.01em; }
.uv-pop-name small { margin-bottom: .3em; font-size: .62rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .9; }
.uv-pop-ver {
  margin-top: .45em;
  font-family: "JetBrains Mono", ui-monospace, "Liberation Mono", monospace;
  font-size: .66rem;
  font-weight: 400;
  letter-spacing: 0;
  white-space: nowrap;
  opacity: .9;
}
.uv-pop-new {
  margin-left: auto;
  padding: .22em .6em;
  border-radius: 999px;
  background: #fcd34d;
  color: #1b3661;
  font-size: .7rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-shadow: none;
}
.uv-pop-lead { margin: .8rem 0 0; font-size: 1rem; font-weight: 600; line-height: 1.35; }
.uv-pop-side { display: flex; flex-direction: column; align-items: flex-start; }
.uv-pop-feats { display: grid; gap: .35rem; margin: .1rem 0 0; padding: 0; list-style: none; }
/* Häkchen wie auf den Produktkacheln, hier weiß */
.uv-pop-feats li { position: relative; padding-left: 1.3em; font-size: .9rem; line-height: 1.3; }
.uv-pop-feats li::before {
  content: "";
  position: absolute;
  left: .15em;
  top: .32em;
  width: .55em;
  height: .3em;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}
.uv-pop-go {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  margin-top: .75rem;
  font-size: .9rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
}
.uv-pop-go:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.uv-pop-go:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; }
/* Zeiger unten auf das gewählte Icon: flaches Dreieck (Nutzer 14.10.2026: "Kein 3D Shadow") in der Farbe, die der
   Container an dieser Stelle seiner Kante hat: Verlauf (--tip-t aus uebersicht.js, 0 = --c2, 1 = --c) plus die weiße
   Lage darüber (--tip-w) */
.uv-pop-tip {
  position: absolute;
  left: var(--tip-x, 50%);
  top: 100%;
  width: 18px;
  height: 9px;
  margin-left: -9px;
  background:
    linear-gradient(rgb(255 255 255 / var(--tip-w, 0)), rgb(255 255 255 / var(--tip-w, 0))),
    color-mix(in srgb, var(--c) calc(var(--tip-t, .7) * 100%), var(--c2));
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transition: left .3s cubic-bezier(.2, .8, .2, 1);
}
/* schmale Bühne: einspaltig */
@container (max-width: 31rem) {
  .uv-pop-item { grid-template-columns: minmax(0, 1fr); padding: .95rem 1.05rem 1rem; }
  .uv-pop-lead { margin-top: .6rem; }
}

/* ---------- Baum CIN Next (Nutzer 19.10.2026, "Modulstruktur" in dev/regeln/uebersicht.md) ----------
   CIN Next ist das Grundmodul, CRM, ERP und DMS gehören dazu. Ist CIN NEXT im Dock gewählt, wächst unter seinem
   Spiegelbild eine Linie nach unten (0,25 s, sie kommt aus dem ausgeblendeten Ende des Spiegelbilds), dann setzen sich
   CRM, ERP und DMS nacheinander wie die Dock-Würfel beim Laden (je 0,15 s versetzt, je 0,3 s), der Text daneben blendet
   ein und gleitet 8 px heran; zusammen etwa 0,85 s ("Zügig"). Er bleibt stehen wie der Container und blendet beim
   Wechsel auf ein anderes Produkt in 0,2 s aus. Die Spiegelbilder bleiben ("Baum unter den Spiegeln"); Lage aus
   uebersicht.js (--tree-x, --tree-y: linke Kante des Würfels, Unterkante des Docks). Würfel halb so groß wie im Dock
   (bei 1366 × 657 bleiben unter den Spiegeln 186 px); das Kürzel steht fett im Text, im Würfel wäre es unter 11 px.
   Blautöne passend zum Verlauf von CIN NEXT: CRM Cyan, ERP Blauviolett, DMS tiefes Blau, Weiß darauf mindestens 3:1. */
.uv-tree {
  --s: min(5.5rem, calc(100cqi / 6));
  --sub: calc(var(--s) * .5);
  --gap: .5rem;
  --branch: .9rem;
  --line: color-mix(in srgb, var(--pk-crm) 65%, transparent);
  position: absolute;
  left: var(--tree-x, 0px);
  top: var(--tree-y, 100%);
  right: 0;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, visibility 0s linear .2s;
}
.uv-tree.is-on { visibility: visible; opacity: 1; transition: none; }
/* Stamm von der Mitte des Würfels bis zum letzten Abzweig, oben weich aus dem Spiegelbild */
.uv-tree::before {
  content: "";
  position: absolute;
  left: calc(var(--s) / 2 - 1px);
  top: calc(var(--s) * -.2);
  width: 2px;
  height: calc(var(--s) * .2 + .6rem + 2 * (var(--sub) + var(--gap)) + var(--sub) / 2);
  background: linear-gradient(transparent, var(--line) calc(var(--s) * .2));
  transform-origin: top;
}
.uv-tree-list {
  display: grid;
  gap: var(--gap);
  margin: 0;
  padding: .6rem 0 0 calc(var(--s) / 2 + var(--branch));
  list-style: none;
}
.uv-tree-list > li { position: relative; display: flex; align-items: center; gap: .75rem; }
/* Abzweig vom Stamm zum Würfel */
.uv-tree-list > li::before {
  content: "";
  position: absolute;
  left: calc(var(--branch) * -1);
  top: 50%;
  width: var(--branch);
  height: 2px;
  margin-top: -1px;
  background: var(--line);
  transform-origin: left;
}
.uv-tree-sq { flex: 0 0 auto; width: var(--sub); border-radius: 8px; font-size: calc(var(--sub) * .3); }
/* Blautöne von CRM, ERP, DMS zentral in :root von homepage.css (Nutzer 19.10.2026: Grundtöne --m-* "Zentral",
   abgeleitete --m2-*, --mk-*, --mk2-*, --mt-* "Auch zentral") */
[data-m="crm"] { --c: var(--m-crm); --c2: var(--m2-crm); --fg: #fff; --c-ui: var(--m-crm); }
[data-m="erp"] { --c: var(--m-erp); --c2: var(--m2-erp); --fg: #fff; --c-ui: var(--m-erp); }
[data-m="dms"] { --c: var(--m-dms); --c2: var(--m2-dms); --fg: #fff; --c-ui: var(--m-dms); }
/* eine Zeile, wo Platz ist; in schmalen Bühnen zwei (passt in die Höhe des Würfels) */
.uv-tree-text { min-width: 0; font-size: .92rem; line-height: 1.3; color: #5c564c; }
.uv-tree-text b { margin-right: .3em; font-weight: 700; color: #1b3661; }
@media (prefers-reduced-motion: no-preference) {
  .uv-tree.is-on::before { animation: uv-grow-y .25s cubic-bezier(.2, .8, .2, 1) both; }
  .uv-tree.is-on .uv-tree-list > li::before { animation: uv-grow-x .2s ease both; animation-delay: calc(.2s + var(--j, 0) * .15s); }
  .uv-tree.is-on .uv-tree-sq {
    animation: uv-settle .3s cubic-bezier(.2, .8, .2, 1) both, uv-rise .3s cubic-bezier(.2, .8, .2, 1) both;
    animation-delay: calc(.25s + var(--j, 0) * .15s);
  }
  .uv-tree.is-on .uv-tree-text { animation: uv-slide .3s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.3s + var(--j, 0) * .15s); }
}
@keyframes uv-grow-y { from { transform: scaleY(0); } }
@keyframes uv-grow-x { from { transform: scaleX(0); } }
@keyframes uv-slide { from { opacity: 0; translate: -8px 0; } }
html[data-bs-theme="dark"] .uv-tree-text { color: #9ca3af; }
html[data-bs-theme="dark"] .uv-tree-text b { color: #e6edf3; }

@media (prefers-reduced-motion: reduce) {
  .uv-cursor.is-idle { animation: none; }
  .uv-hero,
  .uv-dock > li,
  .uv-dock .uv-el,
  .uv-dock .uv-el > .uv-sq,
  .uv-dock .uv-mirror > .uv-sq,
  .uv-pop,
  .uv-pop.is-on,
  .uv-pop-item,
  .uv-pop-item.is-on,
  .uv-pop-tip,
  .uv-tree { transition: none; }
}

@media (max-width: 899.98px) {
  .uv-hero { padding: 5.6rem 1.1rem 2.4rem; min-height: 0; }
  .uv-hero-grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .uv-hero-copy { justify-self: stretch; max-width: none; }
  .uv-hero-stage { max-width: 40rem; }
  /* untereinander ist der Hero nicht bildschirmhoch: Der Baum steht im Fluss unter dem Dock, sein Platz ist wie der des
     Containers vorab frei, damit nichts springt */
  .uv-tree { position: relative; left: 0; top: 0; }
}
/* Handy: Der Container steht unter der Reihe statt darüber, damit das getippte Icon nicht wegspringt und vor dem ersten
   Tippen kein leerer Platz über den Icons steht; er nimmt erst nach dem Tippen Platz. Ist er offen, rastet der Hero
   nicht mehr ein: Sonst setzt das Einrasten (homepage.css) beim ersten Tippen die Seite um bis zu 260 px zurück, weil
   der Hero höher wird (Prüflauf 14.10.2026). Vor dem ersten Tippen rastet er ein wie jede Rubrik. */
@media (max-width: 599.98px) {
  .uv-pop { order: 0; margin: 1.5rem 0 0; }
  .uv-pop:not(.is-on) { display: none; }
  #hero:has(.uv-pop.is-on) { scroll-snap-align: none; }
  .uv-pop-tip { top: auto; bottom: 100%; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
  /* Baum als Liste unter dem Container (Nutzer 19.10.2026: "Liste unter Container"), ohne Stamm, blendet in 0,3 s ein */
  .uv-tree { --sub: 2.4rem; margin-top: .9rem; }
  .uv-tree:not(.is-on) { display: none; }
  .uv-tree::before,
  .uv-tree-list > li::before { display: none; }
  .uv-tree-list { gap: .6rem; padding: 0; }
  @media (prefers-reduced-motion: no-preference) {
    .uv-tree.is-on { animation: uv-settle .3s ease both; }
    .uv-tree.is-on .uv-tree-sq,
    .uv-tree.is-on .uv-tree-text { animation: none; }
  }
}

html[data-bs-theme="dark"] .uv-hero-copy h1 { color: #e6edf3; }
html[data-bs-theme="dark"] .uv-type-t2 > .uv-sel:not(.uv-type-prod),
html[data-bs-theme="dark"] .uv-type-t1 .uv-sel { --sel-c: #e6edf3; color: #0d1117; }
html[data-bs-theme="dark"] .uv-hero-lead { color: #9ca3af; }
html[data-bs-theme="dark"] .uv-hero-copy .k { color: #8b949e; }
html[data-bs-theme="dark"] .uv-live { background: #161b22; border-color: #30363d; color: #c9d1d9; }
html[data-bs-theme="dark"] .uv-live:hover { border-color: #8cbaf2; color: #c9d1d9; }
html[data-bs-theme="dark"] .uv-live:focus-visible { outline-color: #8cbaf2; }
html[data-bs-theme="dark"] .uv-live .bi { color: #8cbaf2; }
html[data-bs-theme="dark"] .uv-hero::before { background-image: radial-gradient(rgb(140 186 242 / .09) 1px, transparent 1.3px); }
html[data-bs-theme="dark"] .uv-hero-slogan { color: #e6edf3; }
html[data-bs-theme="dark"] .uv-btn { box-shadow: inset 0 0 0 1px rgb(140 186 242 / .35); }
html[data-bs-theme="dark"] .uv-btn--ghost { border-color: #30363d; color: #8cbaf2; box-shadow: none; }
html[data-bs-theme="dark"] .uv-btn:focus-visible { outline-color: #8cbaf2; }

/* ---------- Rubriken der Übersicht ---------- */

.uv-scene { padding: 6rem 5vw 5rem; }
.uv-wrap { max-width: 78rem; margin-inline: auto; }
.uv-head { max-width: 46rem; margin-bottom: 2rem; }
.uv-head .k {
  margin-bottom: .4rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #7a7368;
}
.uv-head h2 {
  margin: 0 0 .7rem;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1.08;
  font-weight: 650;
  letter-spacing: -0.03em;
  color: #141210;
}
.uv-head p {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.45;
  color: #5c564c;
  text-wrap: balance;
}

/* ---------- Produkte: Kacheln in der Optik der Preiskarten, letzte Reihe mittig ---------- */

.uv-prods {
  --cols: 5;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.uv-prods > li { flex: 0 0 calc((100% - (var(--cols) - 1) * 1rem) / var(--cols)); min-width: 0; }
.uv-prod {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.2rem 1.15rem 1.05rem;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgb(27 54 97 / .1);
  box-shadow: 0 10px 28px rgb(27 54 97 / .06);
  color: inherit;
  text-decoration: none;
}
.uv-prod:focus-visible { outline: 2px solid var(--c-ui); outline-offset: 3px; }
.uv-prod .uv-sq { width: 4.2rem; margin-bottom: 1rem; }
.uv-prod-new {
  top: 1.2rem;
  right: 1.15rem;
}
.uv-prod-brand {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #7a7368;
}
.uv-prod-name {
  font-size: 1.35rem;
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: #141210;
}
/* kompakt (15.10.2026): der Nutzen-Satz füllt auf, der Link steht in allen Kacheln einer Reihe auf gleicher Höhe */
.uv-prod-lead {
  flex: 1;
  margin: .55rem 0 1rem;
  font-size: .95rem;
  line-height: 1.35;
  color: #3d3830;
}
/* CRM · ERP · DMS unter dem Satz der Kachel CIN Next (Nutzer 19.10.2026, "Kachel mit drei Kürzeln"): kleine Felder in
   den dunklen Enden der Blautöne aus Hero und Kreis, Weiß darauf mindestens 4,8:1 */
.uv-prod-mods { display: flex; gap: .35rem; margin: -.35rem 0 1rem; }
.uv-prod-mods > span {
  padding: .2rem .5rem;
  border-radius: 4px;
  background: var(--chip);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .06em;
}
.uv-prod-mods > [data-m="crm"] { --chip: var(--mt-crm); }
.uv-prod-mods > [data-m="erp"] { --chip: var(--mt-erp); }
.uv-prod-mods > [data-m="dms"] { --chip: var(--mt-dms); }
.uv-prod-foot {
  display: grid;
  padding-top: .8rem;
  border-top: 1px dashed rgb(27 54 97 / .16);
}
.uv-prod-go {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .86rem;
  font-weight: 600;
  color: #1b3661;
}

@media (max-width: 1199.98px) { .uv-prods { --cols: 3; } }
@media (max-width: 899.98px)  { .uv-prods { --cols: 2; } }
@media (max-width: 767.98px) {
  .uv-scene { padding: 4.6rem 1.1rem 3rem; }
}
@media (max-width: 599.98px)  { .uv-prods { --cols: 1; } }

/* ---------- Darkmode ---------- */

html[data-bs-theme="dark"] .uv-head h2,
html[data-bs-theme="dark"] .uv-prod-name { color: #e6edf3; }
html[data-bs-theme="dark"] .uv-head p { color: #9ca3af; }
html[data-bs-theme="dark"] .uv-head .k,
html[data-bs-theme="dark"] .uv-prod-brand { color: #8b949e; }
html[data-bs-theme="dark"] .uv-prod {
  background: #161b22;
  border-color: #30363d;
  box-shadow: none;
}
html[data-bs-theme="dark"] .uv-prod-lead { color: #c9d1d9; }
html[data-bs-theme="dark"] .uv-prod-foot { border-top-color: #30363d; }
html[data-bs-theme="dark"] .uv-prod-go { color: #8cbaf2; }

/* ---------- Ein Datenstamm: zwei Ringe am Desktop, Liste darunter (Nutzer 19.10.2026, "Modulstruktur") ----------
   --W Breite des Kreises: so groß, dass Kopf und Kreis in eine Bildschirmhöhe passen (Nutzer: "'Ein Datenstamm'
   kategorie auf 100hv checken grafik kann etwas größer werden"), höchstens 38rem, und so schmal, dass links und rechts
   die Texte Platz haben. Äußerer Ring Radius 40 % mit POS (11 Uhr), WMS (3 Uhr), Shop (7 Uhr); innerer Ring Radius 22 %
   (etwa die Hälfte, so stehen POS, ERP und Shop fast in einer Flucht) mit CRM (1 Uhr), ERP (9 Uhr), DMS (5 Uhr), also in
   den Lücken des äußeren. Würfel 12 % breit (Nutzer 19.10.2026: "filigraner sein kleiner machen", gewählt "20 % kleiner,
   Inhalt wie Hero", vorher 15 %). Je Baustein --x/--y Lage im Kreis und --e Abstand vom Rand des Kreises bis
   zur nahen Kante des Würfels (Anteil von --W); daraus Höhe und Linie seines Eintrags. */
@media (min-width: 992px) {
  .uv-ds-scene { padding-top: 5.2rem; }
  .uv-ds-scene .uv-head { margin-bottom: 1.25rem; }
}
.uv-ds {
  --W: clamp(20rem, min(calc(100vh - 15.5rem), calc(90vw - 31rem)), 38rem);
  --g: 1.4rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--W) minmax(0, 1fr);
  margin: 0 auto;
  max-width: 78rem;
}
/* CRM auf 12 Uhr (Nutzer 20.10.2026, Bild 2: "kreis position korrigieren das crm auf 12uhr steht"): innen CRM 0°,
   DMS 120°, ERP 240°, außen in den Lücken WMS 60°, Shop 180°, POS 300°. Texte links POS, ERP, Shop, rechts CRM, DMS,
   WMS (gewählt "Links und rechts"); die Texte der Anwendungen haben eigene Höhen, weil ihr Ring sich dreht. */
[data-ds="crm"]  { --x: 50%;    --y: 28%; --e: .44; }
[data-ds="dms"]  { --x: 69.05%; --y: 61%; --e: .25; }
[data-ds="erp"]  { --x: 30.95%; --y: 61%; --e: .25; }
[data-ds="wms"]  { --x: 84.64%; --y: 30%; }
[data-ds="shop"] { --x: 50%;    --y: 90%; }
[data-ds="pos"]  { --x: 15.36%; --y: 30%; }
.uv-ds-item[data-ds="pos"]  { --y: 28%; }
.uv-ds-item[data-ds="wms"]  { --y: 85%; }
.uv-ds-item[data-ds="shop"] { --y: 85%; }
.uv-ds-group { display: none; }
.uv-ds-side { position: relative; margin: 0; padding: 0; list-style: none; }
.uv-ds-item {
  position: absolute;
  top: var(--y);
  display: flex;
  flex-direction: column;
  gap: .2rem;
  width: min(17rem, 100%);
  transform: translateY(-50%);
}
.uv-ds-side--l .uv-ds-item { right: 0; padding-right: var(--g); text-align: right; }
.uv-ds-side--r .uv-ds-item { left: 0; padding-left: var(--g); }
/* Linie vom Würfel zum Text, nur beim Überfahren (Nutzer: "bei onhover soll die gestrichelte linie animate in"): zeichnet
   sich in 0,3 s vom Würfel aus, blendet beim Verlassen in 0,2 s aus */
.uv-ds-item::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(var(--g) + var(--W) * var(--e) - .9rem);
  border-top: 1.5px dashed color-mix(in srgb, var(--c-ui) 70%, transparent);
  opacity: 0;
  transform: scaleX(0);
  transition: opacity .2s ease, transform 0s linear .2s;
}
.uv-ds-side--l .uv-ds-item::after { right: calc(var(--W) * var(--e) * -1 + .45rem); transform-origin: right; }
.uv-ds-side--r .uv-ds-item::after { left: calc(var(--W) * var(--e) * -1 + .45rem); transform-origin: left; }
.uv-ds-item.is-fixed::after { opacity: 1; transform: none; transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.uv-ds-name { font-size: 1.02rem; font-weight: 650; color: #141210; }
/* Zeilen ausgeglichen, damit kein Wort allein in der letzten Zeile steht; "CIN Next" mit geschütztem Leerzeichen */
.uv-ds-text { font-size: .88rem; line-height: 1.35; color: #5c564c; text-wrap: balance; }
.uv-ds-mini { display: none; }
/* Schreibmaschine im Intro (uebersicht.js, mountWheel): getippter Teil in der Produktfarbe, der ungetippte Rest
   unsichtbar an seinem Platz (nichts verschiebt sich), Block-Cursor ohne eigene Breite, blinkt am Ende */
.uv-ds-typed { color: var(--c-type, var(--c)); }
.uv-ds-rest { visibility: hidden; }
/* Block-Cursor am zuletzt getippten Zeichen (uebersicht.js, typed): außerhalb des Textflusses, damit kein Umbruch mitten
   im Wort entsteht; vor dem ersten Zeichen am Anfang (is-start, sichtbar trotz unsichtbarem Rest) */
.uv-ds-at { position: relative; }
/* beim Tippen feste Zeilen (uebersicht.js, lineBreaks): solange <br> drin sind, kein weiterer Umbruch */
.uv-ds-text:has(> br),
.uv-ds-name:has(> br),
.uv-ds-stack-text:has(> br),
.uv-ds-stack-name:has(> br) { white-space: nowrap; }
.uv-ds-at::after {
  content: "";
  position: absolute;
  left: calc(100% + .05em);
  top: 0;
  width: .5em;
  height: 1.1em;
  background: var(--c-type, var(--c));
  visibility: visible;
}
.uv-ds-at.is-start::after { left: 0; }
/* im Darkmode heller, sonst ist das tiefe Blau von DMS auf dem dunklen Grund kaum lesbar */
html[data-bs-theme="dark"] .uv-ds-item { --c-type: color-mix(in srgb, var(--c) 62%, #fff); }
.uv-ds-at.is-idle::after { animation: uv-blink 1s steps(1, end) infinite; }

/* Kreis über den Seitentexten: deren gestrichelte Linien reichen in den Kreis und laufen so immer unter den Würfeln
   (Nutzer 20.10.2026: "prüfe das striche immer unter icons sind") */
.uv-ds-wheel { position: relative; z-index: 1; width: var(--W); aspect-ratio: 1; }
/* Ringe: außen die Farben der Anwendungen an ihren Würfeln, innen die Blautöne von CRM, ERP, DMS */
.uv-ds-ring {
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: conic-gradient(from -60deg, var(--u-pos), var(--u-wms) 120deg, var(--u-shop) 240deg, var(--u-pos) 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px));
  opacity: .85;
}
.uv-ds-ring--in {
  inset: 28%;
  background: conic-gradient(from 0deg, var(--m2-crm), var(--m-dms) 120deg, var(--m-erp) 240deg, var(--m2-crm) 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
}
/* Speichen von der Mitte zu den Anwendungen, durch die Lücken des inneren Rings */
.uv-ds-spoke {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40%;
  border-top: 1.5px dashed rgb(27 54 97 / .22);
  transform-origin: 0 0;
  transform: rotate(var(--a, 0deg));
}
.uv-ds-spoke[data-ds="pos"] { --a: -150deg; }
.uv-ds-spoke[data-ds="wms"] { --a: -30deg; }
.uv-ds-spoke[data-ds="shop"] { --a: 90deg; }
.uv-ds-hub {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 25%;
  padding: .5rem .6rem;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgb(27 54 97 / .1);
  box-shadow: 0 14px 34px rgb(27 54 97 / .12);
  transform: translate(-50%, -50%);
}
.uv-ds-hub img { display: block; width: 100%; height: auto; }
.uv-logo-dark { display: none !important; }
/* Symbol und Kürzel im Verhältnis des Docks (Schrift 0,255 × Würfelbreite, Symbol 43 %), Kürzel nie unter 9 px und
   halbfett; feinere Kanten: weißer Rand 3 px, Ecken 10 px ("Feinere Kanten") */
.uv-ds-sq {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 12%;
  border-radius: 10px;
  font-size: calc(var(--W) * .12 * .255);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 3px #fff, inset 0 0 0 1px rgb(0 0 0 / .06);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), --c .3s ease, --c2 .3s ease;
}
.uv-ds-sq .uv-kz { font-size: max(9px, .52em); font-weight: 600; }
/* Überfahren wie im Dock (Nutzer: "Heben wie im Dock"): 6 px hoch, 15 % größer, Verlauf kräftig, einmal Lichtreflex.
   Genauso leuchtet ein Würfel im Intro auf, wenn ihn die Welle erreicht (is-lit, 0,6 s) */
.uv-ds-sq.is-hot,
.uv-ds-sq.is-lit { z-index: 1; transform: translate(-50%, -50%) translateY(-6px) scale(1.15); }
.uv-ds-sq:is(.is-hot, .is-lit)[data-p="pos"]  { --c: var(--pk-pos);  --c2: var(--pk2-pos); }
.uv-ds-sq:is(.is-hot, .is-lit)[data-p="wms"]  { --c: var(--pk-wms);  --c2: var(--pk2-wms); }
.uv-ds-sq:is(.is-hot, .is-lit)[data-p="shop"] { --c: var(--pk-shop); --c2: var(--pk2-shop); }
.uv-ds-sq:is(.is-hot, .is-lit)[data-m="crm"]  { --c: var(--mk-crm); --c2: var(--mk2-crm); }
.uv-ds-sq:is(.is-hot, .is-lit)[data-m="erp"]  { --c: var(--mk-erp); --c2: var(--mk2-erp); }
.uv-ds-sq:is(.is-hot, .is-lit)[data-m="dms"]  { --c: var(--mk-dms); --c2: var(--mk2-dms); }
/* ---------- Intro und Endzustand (Nutzer 19.10.2026, "Intro des Datenstamm-Kreises", mountWheel in uebersicht.js) ----------
   Vor dem Intro (is-pre) alle Würfel grau, bis die Welle sie trifft; CRM, ERP, DMS bleiben danach farbig (is-on). Im
   Endzustand (is-done) sind POS, WMS, Shop grau, außer beim Überfahren; in der Liste unter 992 px ihre kleinen Würfel. */
.uv-ds-scene { position: relative; isolation: isolate; }
.uv-ds.is-pre .uv-ds-sq:not(.is-lit):not(.is-on),
.uv-ds.is-done .uv-ds-sq[data-p]:not(.is-hot):not(.is-peer),
.uv-ds.is-done .uv-ds-item[data-p] .uv-ds-mini { --c: var(--g1); --c2: var(--g2); }
/* Ringe: vor dem Intro beide grau; der innere wird mit CRM, ERP, DMS blau (is-core) und bleibt es, der äußere leuchtet
   mit POS, WMS, Shop kurz auf (is-apps) und ist sonst grau */
.uv-ds-ring { transition: filter .6s ease, opacity .6s ease; }
.uv-ds.is-pre .uv-ds-ring,
.uv-ds.is-done .uv-ds-ring:not(.uv-ds-ring--in) { filter: grayscale(1); opacity: .45; }
.uv-ds.is-core .uv-ds-ring--in,
.uv-ds.is-apps .uv-ds-ring:not(.uv-ds-ring--in) { filter: none; opacity: .85; }
/* Einträge von CRM, ERP, DMS: vor dem Intro leer, bis der Cursor sie tippt; danach (is-fixed) Name, Satz und Linie in der
   Produktfarbe. Im Hellmodus die dunklen Enden der Blautöne (Weiß-Kontrast wie die Felder der Produktkachel, auf Weiß
   mindestens 4,8:1) */
.uv-ds.is-pre .uv-ds-item[data-m]:not(.is-typing):not(.is-fixed) { visibility: hidden; }
.uv-ds-item[data-m="crm"] { --c-type: var(--mt-crm); }
.uv-ds-item[data-m="erp"] { --c-type: var(--mt-erp); }
.uv-ds-item[data-m="dms"] { --c-type: var(--mt-dms); }
.uv-ds-item.is-fixed .uv-ds-name,
.uv-ds-item.is-fixed .uv-ds-text { color: var(--c-type, var(--c)); }
@media (prefers-reduced-motion: no-preference) {
  .uv-ds-sq.is-hot::after { animation: uv-sweep .8s cubic-bezier(.45, .05, .25, 1) both; }
}
@media (prefers-reduced-motion: reduce) {
  .uv-ds-sq,
  .uv-ds-item::after { transition: none; }
}

/* ---------- Zusammenhänge im Kreis (Nutzer 20.10.2026: "wenn ich als User auf CRM havere, sollte der äußere Kreis immer
   rotieren und mir für jedes Icon den Zusammenhang nennen", "snappy", "12 principles of animation"; Runde 2 mit Bildern:
   CRM auf 12 Uhr, Partner rastet in der Lücke daneben ein, nur Gewählter und Partner farbig, graue Bahn, beide Ringe
   drehen langsam gegeneinander) ----------
   uebersicht.js (mountWheel) setzt --rot (äußerer Ring samt POS, WMS, Shop, im Uhrzeigersinn) und --rot-in (innerer Ring
   samt CRM, ERP, DMS) je Bild; die Würfel laufen per sin()/cos() auf ihrer Kreisbahn und bleiben aufrecht. Grundwinkel --a0
   im Uhrzeigersinn ab 12 Uhr, Radius 40 % außen, 22 % innen. Ohne sin() im Browser gelten --x/--y, nichts dreht. */
@property --rot { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
@property --rot-in { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
.uv-ds-sq[data-ds="crm"]  { --a0: 0deg; }
.uv-ds-sq[data-ds="dms"]  { --a0: 120deg; }
.uv-ds-sq[data-ds="erp"]  { --a0: 240deg; }
.uv-ds-sq[data-ds="wms"]  { --a0: 60deg; }
.uv-ds-sq[data-ds="shop"] { --a0: 180deg; }
.uv-ds-sq[data-ds="pos"]  { --a0: 300deg; }
@supports (translate: calc(1px * sin(1deg))) {
  .uv-ds-sq { left: 50%; top: 50%; }
  .uv-ds-sq[data-p] {
    --ang: calc(var(--a0) + var(--rot));
    translate: calc(var(--W) * .4 * sin(var(--ang))) calc(var(--W) * -.4 * cos(var(--ang)));
  }
  .uv-ds-sq[data-m] {
    --ang: calc(var(--a0) + var(--rot-in));
    translate: calc(var(--W) * .22 * sin(var(--ang))) calc(var(--W) * -.22 * cos(var(--ang)));
  }
  .uv-ds-ring:not(.uv-ds-ring--in) { rotate: var(--rot); }
  .uv-ds-ring--in { rotate: var(--rot-in); }
  .uv-ds-spoke { transform: rotate(calc(var(--a, 0deg) + var(--rot))); }
}
/* Bühne: Speichen weg; nur der gewählte Würfel und sein Partner sind farbig, die übrigen inneren grau und deckend (Bild 3:
   "nur markierte icon farbig", "linie unter icons nicht sichtbar") */
.uv-ds-item,
.uv-ds-spoke { transition: opacity .2s ease; }
.uv-ds-sq { transition: transform .3s cubic-bezier(.2, .8, .2, 1), --c .3s ease, --c2 .3s ease; }
.uv-ds.is-focus .uv-ds-spoke { opacity: 0; }
.uv-ds.is-focus .uv-ds-sq[data-m]:not(.is-hot):not(.is-peer) { --c: var(--g1); --c2: var(--g2); }
/* Karte (CRM, ERP, DMS): Seitentexte der Module links blass, rechts liegt die Karte */
.uv-ds.is-card .uv-ds-side--l .uv-ds-item[data-m] { opacity: .18; }
.uv-ds.is-card .uv-ds-side--r .uv-ds-item[data-m] { opacity: 0; }
/* Anwendung gewählt: die Zusammenhänge stehen links unter dem Thema, die Seitentexte von CRM, ERP, DMS treten blass
   zurück (Nutzer 20.10.2026, gewählt "Treten blass zurück") */
.uv-ds.is-app .uv-ds-item[data-m] { opacity: .18; }
.uv-ds.is-app .uv-ds-item.is-covered { opacity: 0; }
.uv-ds-text { transition: opacity .2s ease; }
.uv-ds-text.is-fade { opacity: 0; }
/* Texte der Anwendungen: mit Kreis nur, solange sie gewählt sind (ihr Ring dreht sich); getippt, beim Verlassen blendet
   der Text aus wie der Baum im Hero (0,2 s). Immer oben links über dem Kreis, linksbündig, in der Schrift des Hero
   (Nutzer 20.10.2026: "texte von outer circle sollte immer oben links spawnen linksbündig und schriftart herobanner text -
   passe auch die größe an damit der user sieht 'Das ist das Thema'", gewählt Name 1,6rem, Satz 1rem). WMS steht in der
   rechten Liste und rückt um Spalte und Kreis nach links. */
@media (min-width: 992px) {
  .uv-ds-item[data-p] {
    top: 0;
    gap: .45rem;
    width: 100%;
    padding: 0 !important;
    text-align: left;
    font-family: "JetBrains Mono", ui-monospace, "Liberation Mono", monospace;
    transform: none;
    opacity: 0;
    pointer-events: none;
  }
  .uv-ds-side--l .uv-ds-item[data-p] { left: 0; right: auto; }
  .uv-ds-side--r .uv-ds-item[data-p] { left: calc(-100% - var(--W)); }
  .uv-ds-item[data-p] .uv-ds-name { font-size: 1.6rem; font-weight: 500; line-height: 1.15; color: var(--c-type); }
  /* balance statt pretty: pretty bricht getippten Text (Teile in Elementen) anders um als den fertigen, der Text sprang
     in letzter Sekunde in eine neue Zeile (Nutzer 20.10.2026: "Die Texte brechen immer in letzter Sekunde nochmal um") */
  .uv-ds-item[data-p] .uv-ds-text { font-size: 1rem; line-height: 1.45; text-wrap: balance; }
  .uv-ds-item[data-p] .uv-ds-text .uv-ds-typed { color: inherit; }
  .uv-ds-item[data-p].is-show { opacity: 1; pointer-events: auto; }
}
/* Zusammenhänge unter dem Thema, sortiert (CRM, dann ERP): Name in der Farbe des Moduls 1,1rem, Satz .95rem, getippt */
.uv-ds-stack { display: flex; flex-direction: column; gap: .2rem; margin-top: .7rem; }
.uv-ds-stack-name { font-size: 1.1rem; font-weight: 500; line-height: 1.15; color: var(--c-type); }
.uv-ds-stack-text { font-size: .95rem; line-height: 1.42; color: #5c564c; text-wrap: balance; }
.uv-ds-stack-text .uv-ds-typed { color: inherit; }
.uv-ds-stack[data-m="crm"] { --c-type: var(--mt-crm); }
.uv-ds-stack[data-m="erp"] { --c-type: var(--mt-erp); }
.uv-ds-stack[data-m="dms"] { --c-type: var(--mt-dms); }
html[data-bs-theme="dark"] .uv-ds-stack { --c-type: color-mix(in srgb, var(--c) 62%, #fff); }
html[data-bs-theme="dark"] .uv-ds-stack-text { color: #9ca3af; }
.uv-ds-item[data-p="pos"]  { --c-type: var(--pk-pos); }
.uv-ds-item[data-p="wms"]  { --c-type: var(--pk-wms); }
.uv-ds-item[data-p="shop"] { --c-type: var(--pk-shop); }
/* Partner: im Fokus etwas größer, beim Einrasten kurz gestaucht und gestreckt (5 %), ohne sich zu heben */
.uv-ds.is-focus .uv-ds-sq.is-hot { transform: translate(-50%, -50%) scale(1.1); }
.uv-ds-sq.is-peer { z-index: 1; transform: translate(-50%, -50%) scale(1.05); }
.uv-ds-sq.is-land { animation: uv-land .38s cubic-bezier(.2, .8, .2, 1); }
@keyframes uv-land { 0% { scale: 1.05 .95; } 55% { scale: .98 1.02; } 100% { scale: 1; } }
.uv-ds-sq.is-peer[data-p="pos"]  { --c: var(--pk-pos);  --c2: var(--pk2-pos); }
.uv-ds-sq.is-peer[data-p="wms"]  { --c: var(--pk-wms);  --c2: var(--pk2-wms); }
.uv-ds-sq.is-peer[data-p="shop"] { --c: var(--pk-shop); --c2: var(--pk2-shop); }
.uv-ds-sq.is-peer[data-m="crm"]  { --c: var(--mk-crm); --c2: var(--mk2-crm); }
.uv-ds-sq.is-peer[data-m="erp"]  { --c: var(--mk-erp); --c2: var(--mk2-erp); }
.uv-ds-sq.is-peer[data-m="dms"]  { --c: var(--mk-dms); --c2: var(--mk2-dms); }
/* Datentransfer (Nutzer 20.10.2026: "mehr effort bei der animation von outerlane zu inner dotanimation entfernen und
   langsame organisches füllen mit transition der farbe und glowanimationen digitaler datentransfer"; gewählt "Ring glüht,
   Farbe fließt nach innen", "Immer außen nach innen", "1,2 s füllen, Schimmer alle 1,5 s"). Graue Bahn zwischen den Ringen
   (Radius 31 %, Bild 4 "als graue linie"). Je Verbindung (uebersicht.js, flow): der äußere Ring glüht rund um die
   Anwendung in ihrer Farbe auf, dann fließt die Farbe über die Bahn ins Modul und geht dabei in dessen Blauton über
   (Verlauf von Quelle zu Ziel), darunter ein weiches Glühen; danach läuft ein heller Schimmer die Linie entlang. Alles
   unter den Würfeln, über den Ringen. */
.uv-ds-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.uv-ds-track { fill: none; stroke: rgb(27 54 97 / .16); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.uv-ds-flow { transition: opacity .2s ease; }
.uv-ds-flow.is-out { opacity: 0; }
.uv-ds-flow path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* Datenpaket (uebersicht.js, packet): Punkt und Funken skalieren um ihre eigene Mitte */
.uv-ds-packet circle, .uv-ds-spark { transform-box: fill-box; transform-origin: center; }
.uv-ds-glow { opacity: .45; }
/* Treffer "Andocken" (uebersicht.js, hitFx): kleiner runder Knopf in der Farbe der Anwendung mit ihrem Symbol, auf dem
   Rand des Moduls dort, wo die Linie ankommt (--hx/--hy), über Symbol und Kürzel */
.uv-ds-dock {
  position: absolute;
  z-index: 2;
  left: var(--hx);
  top: var(--hy);
  display: grid;
  place-items: center;
  width: 36%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--fx);
  box-shadow: 0 0 0 2px #fff;
  color: #fff;
  font-size: .7em;
  pointer-events: none;
  translate: -50% -50%;
}
html[data-bs-theme="dark"] .uv-ds-dock { box-shadow: 0 0 0 2px #0d1117; }
/* wartet grau, bis die Linie ihn erreicht (uebersicht.js, step, flow), leuchtet dann farbig auf */
.uv-ds-dock { transition: background-color .25s ease; }
.uv-ds-dock.is-wait { background: var(--g1); }
/* leuchtende Spitze der wachsenden Linie: heller als die Linie, mit Glühen */
.uv-ds-head { stroke: color-mix(in srgb, var(--c-head) 45%, #fff); }
.uv-ds-head-glow { stroke: var(--c-head); opacity: .8; }
/* Tafel und gewähltes Modul (CRM, ERP, DMS): Klick springt zum nächsten Zusammenhang */
.uv-ds.is-card .uv-ds-card,
.uv-ds.is-card .uv-ds-sq.is-hot { cursor: pointer; }
/* Tafel rechts neben dem Kreis (uebersicht.js, mountWheel, step; Nutzer 20.10.2026: "den inneren Circle genau wie den
   äußeren Circle … auf der rechten Seite", gewählt "Thema des Moduls", "Weiße Karte springt", "Liste grau, Aktiver
   tippt", "Punkte weg, zurück nach oben"): oben Name und Satz des Moduls in der Schrift des Hero wie das Thema einer
   Anwendung links, darunter je Zusammenhang eine Zeile, grau; die aktive ist farbig, die weiße Karte (hl) liegt hinter
   ihr und springt beim Wechsel zu ihr (.32 s, kurzes Nachfedern), links außen ein kleiner Pfeil in der Farbe des Moduls.
   Gleitet beim Öffnen 10 px heran. */
.uv-ds-card { display: none; }
@media (min-width: 992px) {
  .uv-ds-side--l { grid-area: 1 / 1; }
  .uv-ds-wheel { grid-area: 1 / 2; }
  .uv-ds-side--r { grid-area: 1 / 3; }
  .uv-ds-card {
    position: relative;
    display: flex;
    flex-direction: column;
    grid-area: 1 / 3;
    align-self: center;
    width: min(19rem, calc(100% - var(--g)));
    margin-left: var(--g);
    font-family: "JetBrains Mono", ui-monospace, "Liberation Mono", monospace;
    opacity: 0;
    visibility: hidden;
    transform: translateX(10px);
    transition: opacity .2s ease, transform .25s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .25s;
  }
  .uv-ds.is-card .uv-ds-card { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .uv-ds-rel { display: none; }
}
.uv-ds-card[data-m="crm"] { --c-type: var(--mt-crm); }
.uv-ds-card[data-m="erp"] { --c-type: var(--mt-erp); }
.uv-ds-card[data-m="dms"] { --c-type: var(--mt-dms); }
.uv-ds-card-name,
.uv-ds-card-text { position: relative; margin: 0; padding-inline: 1rem; }
.uv-ds-card-name { font-size: 1.6rem; font-weight: 500; line-height: 1.15; color: var(--c-type); }
.uv-ds-card-text { margin-top: .45rem; font-size: 1rem; line-height: 1.45; color: #5c564c; text-wrap: balance; }
.uv-ds-card-text .uv-ds-typed { color: inherit; }
.uv-ds-card-list { display: flex; flex-direction: column; gap: .2rem; margin: 1.1rem 0 0; padding: 0; list-style: none; }
.uv-ds-row { display: grid; gap: .45rem; padding: .8rem 1rem; }
.uv-ds-row-head { display: flex; align-items: center; gap: .45rem; margin: 0; color: #b5ada0; font-size: .8rem; }
.uv-ds-row-text { margin: 0; font-size: .95rem; line-height: 1.42; color: #a39b8f; text-wrap: balance; transition: color .2s ease; }
.uv-ds-row-text .uv-ds-typed { color: inherit; }
.uv-ds-row .uv-ds-chip[data-m],
.uv-ds-row .uv-ds-chip[data-p] { --chip: #b9b3a9; transition: background-color .2s ease; }
.uv-ds-row.is-on .uv-ds-row-head { color: #9a9184; }
.uv-ds-row.is-on .uv-ds-row-text { color: #2b2620; }
.uv-ds-row.is-on .uv-ds-chip[data-m="crm"]  { --chip: var(--mt-crm); }
.uv-ds-row.is-on .uv-ds-chip[data-m="erp"]  { --chip: var(--mt-erp); }
.uv-ds-row.is-on .uv-ds-chip[data-m="dms"]  { --chip: var(--mt-dms); }
.uv-ds-row.is-on .uv-ds-chip[data-p="pos"]  { --chip: var(--pk-pos); }
.uv-ds-row.is-on .uv-ds-chip[data-p="wms"]  { --chip: var(--pk-wms); }
.uv-ds-row.is-on .uv-ds-chip[data-p="shop"] { --chip: var(--pk-shop); }
.uv-ds-card-text:has(> br),
.uv-ds-card-name:has(> br),
.uv-ds-row-text:has(> br) { white-space: nowrap; }
/* weiße Karte hinter der aktiven Zeile: Lage und Höhe aus uebersicht.js (placeHl), Zeilen liegen darüber */
.uv-ds-card-hl {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--hl-h, 0);
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgb(27 54 97 / .1);
  box-shadow: 0 14px 34px rgb(27 54 97 / .12);
  opacity: 0;
  transform: translateY(var(--hl-y, 0));
}
.uv-ds-card-hl.is-on {
  opacity: 1;
  transition: transform .32s cubic-bezier(.34, 1.36, .64, 1), height .32s cubic-bezier(.34, 1.36, .64, 1), opacity .2s ease;
}
.uv-ds-card-hl::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -.75rem;
  border-block: .38rem solid transparent;
  border-left: .45rem solid var(--c-ui);
  transform: translateY(-50%);
}
.uv-ds-card-list > .uv-ds-row { position: relative; }
/* Kürzel als kleine Felder in der Farbe des Bausteins (wie die Felder der Produktkachel) */
.uv-ds-chip {
  display: inline-block;
  padding: .2rem .5rem;
  border-radius: 5px;
  background: var(--chip);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .06em;
}
.uv-ds-chip[data-m="crm"]  { --chip: var(--mt-crm); }
.uv-ds-chip[data-m="erp"]  { --chip: var(--mt-erp); }
.uv-ds-chip[data-m="dms"]  { --chip: var(--mt-dms); }
.uv-ds-chip[data-p="pos"]  { --chip: var(--pk-pos); }
.uv-ds-chip[data-p="wms"]  { --chip: var(--pk-wms); }
.uv-ds-chip[data-p="shop"] { --chip: var(--pk-shop); }
@media (prefers-reduced-motion: reduce) {
  .uv-ds-sq.is-land { animation: none; }
  .uv-ds-card-hl { display: none; }
}

/* Hintergrund wie im Hero (uebersicht.js, mountWheel, "Hintergrund wie im Hero"): Punktraster 16 px als organische Wolke
   aus fünf weich überlappenden Ellipsen (--w1… bis --w5…; Nutzer 20.10.2026 mit Skizze: "zu rund, es soll ein bisschen
   dynamischer sein - organischer", "wie im herobanner soll unter dem text auch etwas des bg zu sehen sein"): um den
   Kreis, links oben unter dem Thema, ein Band von dort zur Mitte, rechts unten ausschwingend, eine Fläche rechts oben;
   nahe dem Zentrum dieselben Punkte in der Stiftfarbe
   (--h…); darüber laufen die Datenpakete (Leinwand .uv-strands). Raster und Leinwand haben dieselbe Fläche wie die
   Rubrik, damit die Punkte genau übereinander liegen. Nur mit Kreis. */
.uv-ds-bg { position: absolute; inset: 0; z-index: -1; display: none; pointer-events: none; }
.uv-ds-scene > .uv-strands { display: none; }
@media (min-width: 992px) {
  .uv-ds-bg,
  .uv-ds-scene > .uv-strands { display: block; }
}
.uv-ds-bg::before,
.uv-ds-bg::after { content: ""; position: absolute; inset: 0; background-size: 16px 16px; }
.uv-ds-bg::before {
  --blob:
    radial-gradient(ellipse var(--w1rx, 1px) var(--w1ry, 1px) at var(--w1x, 0px) var(--w1y, 0px), #000 45%, transparent 100%),
    radial-gradient(ellipse var(--w2rx, 1px) var(--w2ry, 1px) at var(--w2x, 0px) var(--w2y, 0px), #000 40%, transparent 100%),
    radial-gradient(ellipse var(--w3rx, 1px) var(--w3ry, 1px) at var(--w3x, 0px) var(--w3y, 0px), #000 40%, transparent 100%),
    radial-gradient(ellipse var(--w4rx, 1px) var(--w4ry, 1px) at var(--w4x, 0px) var(--w4y, 0px), #000 40%, transparent 100%),
    radial-gradient(ellipse var(--w5rx, 1px) var(--w5ry, 1px) at var(--w5x, 0px) var(--w5y, 0px), #000 35%, transparent 100%);
  background-image: radial-gradient(rgb(27 54 97 / .08) 1px, transparent 1.3px);
  -webkit-mask-image: var(--blob);
  mask-image: var(--blob);
}
.uv-ds-bg::after {
  background-image: radial-gradient(color-mix(in srgb, var(--pen) 55%, transparent) 1.1px, transparent 1.4px);
  -webkit-mask-image: radial-gradient(ellipse var(--hrx, 1px) var(--hry, 1px) at var(--hx, 0px) var(--hy, 0px), rgb(0 0 0 / .6), transparent);
  mask-image: radial-gradient(ellipse var(--hrx, 1px) var(--hry, 1px) at var(--hx, 0px) var(--hy, 0px), rgb(0 0 0 / .6), transparent);
}
html[data-bs-theme="dark"] .uv-ds-bg::before { background-image: radial-gradient(rgb(140 186 242 / .09) 1px, transparent 1.3px); }

/* Liste unter 992 px: zwei Gruppen mit Zwischenzeile, erst das Grundmodul (CRM, ERP, DMS), dann die Anwendungen
   (POS, WMS, Shop); drei Karten je Reihe, auf dem Handy eine */
@media (max-width: 991.98px) {
  .uv-ds { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; max-width: none; }
  .uv-ds-wheel { display: none; }
  .uv-ds-side { display: contents; }
  .uv-ds-group {
    display: block;
    grid-column: 1 / -1;
    margin: .8rem 0 -.2rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #7a7368;
  }
  .uv-ds-group--kern { order: 1; margin-top: 0; }
  .uv-ds-item[data-ds="crm"] { order: 2; }
  .uv-ds-item[data-ds="erp"] { order: 3; }
  .uv-ds-item[data-ds="dms"] { order: 4; }
  .uv-ds-group--apps { order: 5; }
  .uv-ds-item[data-ds="pos"] { order: 6; }
  .uv-ds-item[data-ds="wms"] { order: 7; }
  .uv-ds-item[data-ds="shop"] { order: 8; }
  .uv-ds-item {
    position: static;
    width: auto;
    padding: 1rem !important;
    text-align: left !important;
    transform: none;
    border-radius: 18px;
    background: #fff;
    border: 1px solid rgb(27 54 97 / .1);
  }
  .uv-ds-item::after { display: none; }
  .uv-ds-mini { display: grid; width: 3.4rem; margin-bottom: .45rem; font-size: 1rem; }
  /* Zusammenhänge unter CRM, ERP, DMS (Nutzer 20.10.2026, "Liste mit Zusammenhängen"): zugeklappt, Tippen öffnet */
  .uv-ds-rel { margin-top: .55rem; padding-top: .55rem; border-top: 1px dashed rgb(27 54 97 / .16); }
  .uv-ds-rel summary { cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--c-type, var(--c)); }
  .uv-ds-rel ul { display: grid; gap: .55rem; margin: .6rem 0 0; padding: 0; list-style: none; }
  .uv-ds-rel li { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); align-items: start; gap: .6rem; font-size: .86rem; line-height: 1.38; color: #5c564c; }
  .uv-ds-rel .uv-ds-chip { justify-self: start; }
}
@media (max-width: 599.98px) {
  .uv-ds { grid-template-columns: 1fr; }
  .uv-ds-item { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 1rem; row-gap: .2rem; }
  .uv-ds-mini { grid-row: 1 / 3; width: 4.2rem; margin: 0; font-size: 1.2rem; }
  .uv-ds-rel { grid-column: 1 / -1; }
}

/* ---------- Knopf der Community-Rubrik und des Live-Webinars (die Pakete sind seit 14.10.2026 durch den Preisrechner
   ersetzt) ---------- */

.uv-comm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .6rem 1.1rem;
  border-radius: 999px;
  background: #1b3661;
  color: #fff;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
}
.uv-comm-btn:hover { color: #fff; }
.uv-comm-btn:focus-visible { outline: 2px solid #1b3661; outline-offset: 3px; }

/* ---------- Community ---------- */

.uv-comm {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1.6rem;
  align-items: center;
  padding: 2rem;
  border-radius: 22px;
  background: #fff;
  border: 1px solid rgb(27 54 97 / .1);
  box-shadow: 0 10px 28px rgb(27 54 97 / .06);
}
.uv-comm-icon {
  display: grid;
  place-items: center;
  width: 4.2rem;
  aspect-ratio: 1;
  border-radius: 10px;
  background: #1b3661;
  color: #fff;
  font-size: 1.7rem;
}
.uv-comm-copy .k {
  margin-bottom: .3rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #7a7368;
}
.uv-comm-copy h2 { margin: 0 0 .4rem; font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 650; line-height: 1.1; letter-spacing: -0.02em; color: #141210; }
.uv-comm-copy p { margin: 0; max-width: 38rem; font-size: .98rem; line-height: 1.45; color: #5c564c; }
@media (max-width: 767.98px) {
  .uv-comm { grid-template-columns: 1fr; gap: 1rem; padding: 1.4rem; }
  .uv-comm-btn { justify-self: start; }
}

/* ---------- Live-Webinar 04.11.2026 (Nutzer 22.10.2026, gewählt "Karte mit Kalenderblatt", "Platz sichern", Handy
   "Einspaltig, Blatt klein oben"; Höhe zuerst "Kompakt", nach dem Test "ziel hat keine 100hv") ----------
   Direkt nach dem Hero eine Karte wie Community, mittig und so breit, dass die Frage in drei Zeilen steht: links das
   Kalenderblatt, rechts Kicker, Frage, Text, Datum, Schlusssatz und Knopf. Keine Bewegung beim Laden. Ab 900 px wie der
   Hero bildschirmhoch, die Karte steht in der Mitte der Fläche unter der Kopfzeile. */
.uv-web-scene { padding-bottom: 3rem; }
@media (min-width: 900px) {
  .uv-web-scene { display: grid; align-content: center; min-height: 100vh; padding-bottom: 2rem; }
}
.uv-web {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
  max-width: 58rem;
  margin-inline: auto;
  padding: 2.2rem 2.4rem;
  border-radius: 22px;
  background: #fff;
  border: 1px solid rgb(27 54 97 / .1);
  box-shadow: 0 10px 28px rgb(27 54 97 / .06);
}
/* Kalenderblatt: Streifen mit dem Monat in Navy, großer Tag, Uhrzeit in der Schrift des Hinweises im Hero */
.uv-web-cal {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 5.6rem;
  margin: .3rem 0 0;
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgb(27 54 97 / .14);
  box-shadow: 0 6px 16px rgb(27 54 97 / .08);
  line-height: 1;
}
.uv-web-mon {
  align-self: stretch;
  padding: .38rem 0 .32rem;
  background: #1b3661;
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-align: center;
  text-transform: uppercase;
}
.uv-web-day { padding: .5rem 0 .2rem; font-size: 2.5rem; font-weight: 700; letter-spacing: -.02em; color: #141210; }
.uv-web-time {
  padding: 0 0 .6rem;
  font-family: "JetBrains Mono", ui-monospace, "Liberation Mono", monospace;
  font-size: .78rem;
  color: #5c564c;
}
.uv-web-copy .k {
  margin-bottom: .4rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #7a7368;
}
.uv-web-copy h2 {
  margin: 0 0 1rem;
  font-size: clamp(1.45rem, 2.6vw, 2.05rem);
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #141210;
  text-wrap: balance;
}
.uv-web-copy p { margin: 0 0 .7rem; max-width: 44rem; font-size: 1rem; line-height: 1.5; color: #5c564c; }
/* Datum und Ablauf in einer Zeile, schmal untereinander; der Ablauf etwas leichter als das Datum */
.uv-web-copy .uv-web-date {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.4rem;
  font-weight: 600;
  color: #1b3661;
}
.uv-web-date > span { display: inline-flex; align-items: baseline; gap: .5rem; }
.uv-web-flow { font-weight: 500; }
/* Knopf und daneben der Link auf den Blog-Beitrag (Zielbild Blog 22.10.2026) */
.uv-web-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem; margin-top: 1.5rem; } /* Nutzer 22.10.2026: "bisschen mehr space zwischen fließtext und buttons" */
.uv-web-more { display: inline-flex; align-items: center; gap: .4rem; font-size: .92rem; font-weight: 600; color: #1b3661; text-decoration: none; }
.uv-web-more:hover { color: #1b3661; text-decoration: underline; text-underline-offset: 3px; }
.uv-web-more:focus-visible { outline: 2px solid #1b3661; outline-offset: 3px; border-radius: 4px; }
@media (max-width: 767.98px) {
  /* Handy: Blatt klein links neben dem Kicker, darunter alles in einer Spalte */
  .uv-web-scene { padding-bottom: 2rem; }
  .uv-web { column-gap: .9rem; row-gap: 0; align-items: center; padding: 1.4rem; }
  .uv-web-copy { display: contents; }
  .uv-web-copy > * { grid-column: 1 / -1; }
  .uv-web-cal { grid-column: 1; grid-row: 1; width: 3.6rem; margin: 0 0 1rem; border-radius: 9px; }
  .uv-web-copy > .k { grid-column: 2; grid-row: 1; margin: 0 0 1rem; }
  .uv-web-mon { padding: .26rem 0 .22rem; font-size: .6rem; }
  .uv-web-day { padding: .32rem 0 .12rem; font-size: 1.55rem; }
  .uv-web-time { padding-bottom: .38rem; font-size: .6rem; }
}

/* ---------- Darkmode der Rubriken ---------- */

html[data-bs-theme="dark"] .uv-ds-name,
html[data-bs-theme="dark"] .uv-comm-copy h2 { color: #e6edf3; }
html[data-bs-theme="dark"] .uv-ds-text,
html[data-bs-theme="dark"] .uv-comm-copy p { color: #9ca3af; }
html[data-bs-theme="dark"] .uv-comm-copy .k,
html[data-bs-theme="dark"] .uv-ds-group { color: #8b949e; }
html[data-bs-theme="dark"] .uv-comm,
html[data-bs-theme="dark"] .uv-ds-item {
  background: #161b22;
  border-color: #30363d;
  box-shadow: none;
}
@media (min-width: 992px) {
  html[data-bs-theme="dark"] .uv-ds-item { background: none; }
}
html[data-bs-theme="dark"] .uv-ds-hub { background: #161b22; border-color: #30363d; box-shadow: 0 14px 34px rgb(0 0 0 / .4); }
html[data-bs-theme="dark"] .uv-logo-light { display: none !important; }
html[data-bs-theme="dark"] .uv-logo-dark { display: block !important; }
html[data-bs-theme="dark"] .uv-ds-sq { box-shadow: 0 0 0 3px #0d1117, inset 0 0 0 1px rgb(255 255 255 / .12); }
html[data-bs-theme="dark"] .uv-ds-spoke { border-top-color: rgb(140 186 242 / .25); }
html[data-bs-theme="dark"] .uv-ds-track { stroke: rgb(140 186 242 / .2); }
html[data-bs-theme="dark"] .uv-ds-card-hl { background: #161b22; border-color: #30363d; box-shadow: 0 14px 34px rgb(0 0 0 / .4); }
html[data-bs-theme="dark"] .uv-ds-card { --c-type: color-mix(in srgb, var(--c-ui) 62%, #fff); }
html[data-bs-theme="dark"] .uv-ds-card-text { color: #9ca3af; }
html[data-bs-theme="dark"] .uv-ds-row-text { color: #6b7280; }
html[data-bs-theme="dark"] .uv-ds-row:not(.is-on) .uv-ds-chip[data-m],
html[data-bs-theme="dark"] .uv-ds-row:not(.is-on) .uv-ds-chip[data-p] { --chip: #4b5563; }
html[data-bs-theme="dark"] .uv-ds-row.is-on .uv-ds-row-text { color: #e6edf3; }
html[data-bs-theme="dark"] .uv-ds-row.is-on .uv-ds-row-head { color: #8b949e; }
html[data-bs-theme="dark"] .uv-ds-rel { border-top-color: #30363d; }
html[data-bs-theme="dark"] .uv-ds-rel li { color: #9ca3af; }
html[data-bs-theme="dark"] .uv-ds-ring { opacity: 1; }
html[data-bs-theme="dark"] .uv-comm-icon { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14); }
/* Knöpfe bleiben Navy wie der Gesprächs-Knopf der Kopfzeile, mit hellem Rand gegen den dunklen Grund */
html[data-bs-theme="dark"] .uv-comm-btn { box-shadow: inset 0 0 0 1px rgb(140 186 242 / .35); }
html[data-bs-theme="dark"] .uv-comm-btn:focus-visible { outline-color: #8cbaf2; }
/* Live-Webinar: Karte wie Community, Streifen des Kalenderblatts bleibt Navy mit hellem Rand */
html[data-bs-theme="dark"] .uv-web { background: #161b22; border-color: #30363d; box-shadow: none; }
html[data-bs-theme="dark"] .uv-web-cal { background: #0d1117; border-color: #30363d; box-shadow: none; }
html[data-bs-theme="dark"] .uv-web-mon { box-shadow: inset 0 -1px 0 rgb(140 186 242 / .35); }
html[data-bs-theme="dark"] .uv-web-day,
html[data-bs-theme="dark"] .uv-web-copy h2 { color: #e6edf3; }
html[data-bs-theme="dark"] .uv-web-time,
html[data-bs-theme="dark"] .uv-web-copy p { color: #9ca3af; }
html[data-bs-theme="dark"] .uv-web-copy .k { color: #8b949e; }
html[data-bs-theme="dark"] .uv-web-copy .uv-web-date { color: #8cbaf2; }
html[data-bs-theme="dark"] .uv-web-more { color: #8cbaf2; }
html[data-bs-theme="dark"] .uv-web-more:focus-visible { outline-color: #8cbaf2; }