@import url("fonts/homepage-fonts.css");

/* Produktfarben, einmal für alle Seiten (Nutzer 15.10.2026: „Damit das immer gleich ist … in den einzelnen Icons soll auch
   die Schrift in allen Unterbereichen davon betroffen werden“; gewählt „Ja, zentral“). Werte und Namen wie bisher in
   uebersicht.css: --p-* und --p2-* Verlauf der Quadrate, --pk-* und --pk2-* der kräftige Verlauf; --pk-* ist zugleich die
   Schriftfarbe des Produkts (Tipptext der Übersicht, Überschrift der Unterseite). Eine Änderung hier wirkt überall.
   Robo seit 27.10.2026 (Nutzer beim Architekten: "#5c37c3 als neue farbe - gib es an alle weiter"): --pk-robo #5c37c3,
   --p-robo derselbe Ton zu 82 % mit Grau, wie vorher #9e7adc zu #a77cf0; --p2-robo und --pk2-robo unverändert. */
:root {
  --p-crm: #6a8bd7; --p-pos: #d76a83; --p-wms: #2a9d95; --p-shop: #589d2a; --p-robo: #6244b7;
  --p2-crm: #3495c5; --p2-pos: #d27356; --p2-wms: #3298bd; --p2-shop: #2ba156; --p2-robo: #ce62d5;
  --pk-crm: #6890ee; --pk-pos: #ee6585; --pk-wms: #12a59b; --pk-shop: #4da512; --pk-robo: #5c37c3;
  --pk2-crm: #189bdc; --pk2-pos: #eb6d47; --pk2-wms: #179ecf; --pk2-shop: #13aa4a; --pk2-robo: #e257ec;
  /* Blautöne des Grundmoduls CIN Next (Nutzer 19.10.2026, Modulstruktur): CRM, ERP, DMS, Werte wie [data-m] in uebersicht.css */
  --m-crm: #1683c0; --m-erp: #4f6fd6; --m-dms: #2c468f;
  /* Abgeleitete Töne des Grundmoduls (Nutzer 19.10.2026 im Chat der Übersicht: „Auch zentral“), Namen wie bei den Produkten:
     --m2 helles Ende des Verlaufs, --mk und --mk2 der kräftige Verlauf (Überfahren, Aufleuchten), --mt Text und kleine
     Felder auf Weiß (mindestens 4,8:1). Werte aus uebersicht.css, gemessen von der Übersicht. */
  --m2-crm: #2599d2; --m2-erp: #6f8ee6; --m2-dms: #4664bf;
  --mk-crm: #0b7fc4; --mk-erp: #4566e0; --mk-dms: #253f96;
  --mk2-crm: #1aa3e3; --mk2-erp: #6a8cf2; --mk2-dms: #3e5fcf;
  --mt-crm: #1478b2; --mt-erp: #4a68cf; --mt-dms: var(--m-dms);
}
/* Robo im Darkmode heller (Nutzer 27.10.2026 beim Architekten, gewählt "Heller Ton dunkel"): #5c37c3 wäre auf #0d1117 zu
   dunkel, #8e74d8 hat 5,1:1. Die übrigen Produktfarben gelten hell wie dunkel. */
html[data-bs-theme="dark"] { --p-robo: #8b76c8; --pk-robo: #8e74d8; }

html {
  scroll-behavior: auto !important;
  background: #ffffff !important;
}
html, body {
  /* viewport scrolls — overflow-y:auto on html/body kills position:sticky */
  overflow-x: clip !important;
  overflow-y: visible !important;
}
body,
body.bg-body-aside {
  margin: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  background: #ffffff !important;
  color: #1a1714;
  font-family: Outfit, sans-serif !important;
}
body.is-live { overflow: hidden !important; }

.grain {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 50;
  opacity: 0;
  display: none;
}

.hp-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0.7rem 1.4rem;
  background: rgba(255,255,255,.38);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-bottom: 0;
  overflow: visible;
}
.hp-nav a { color: inherit; text-decoration: none; }
.hp-nav-brand {
  display: flex; align-items: center; gap: .6rem; font-weight: 700;
}
.hp-nav-brand img { height: 2.1rem; }
.hp-logo-dark { display: none !important; }
/* Rubrik-Punkte: der Link ist die Trefferfläche (14 × 24 px), der sichtbare Punkt ist ::before (8 px, aktiv 22 px).
   Beim Überfahren wächst der Punkt und darunter gleitet ein Etikett mit Symbol und Namen der Rubrik mit
   (homepage.js, .hp-nav-tip; Nutzer 29.09.2026). Der Linktext ist der Name der Rubrik, sichtbar nur im Etikett. */
.hp-nav-dots { position: relative; display: flex; gap: 0; align-items: center; }
.hp-nav-dots > a {
  position: relative;
  display: block;
  width: 14px;
  height: 24px;
  font-size: 0;
  line-height: 0;
  color: transparent;
  transition: width .35s cubic-bezier(.16,1,.3,1);
}
.hp-nav-dots > a::before {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  top: 50%;
  height: 8px;
  margin-top: -4px;
  border-radius: 99px;
  background: #d6cfc2;
  transition: background-color .25s ease, transform .3s cubic-bezier(.16,1,.3,1), box-shadow .2s ease;
}
.hp-nav-dots > a.is-active { width: 28px; }
.hp-nav-dots > a.is-active::before { background: #1b3661; }
.hp-nav-dots > a.is-hover::before,
.hp-nav-dots > a:focus-visible::before {
  background: #1b3661;
  transform: scale(1.5);
}
.hp-nav-dots > a.is-active.is-hover::before,
.hp-nav-dots > a.is-active:focus-visible::before { transform: scale(1.12, 1.5); }
.hp-nav-dots > a:focus-visible { outline: none; }
.hp-nav-dots > a:focus-visible::before { box-shadow: 0 0 0 3px rgb(91 141 239 / .45); }
/* Klick: ein Ring löst sich vom Punkt, bevor die Seite zur Rubrik springt */
.hp-nav-dots > a::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  border: 2px solid #1b3661;
  opacity: 0;
  pointer-events: none;
}
.hp-nav-dots > a.is-go::after { animation: hp-nav-dot-go .55s cubic-bezier(.16,1,.3,1); }
@keyframes hp-nav-dot-go {
  from { opacity: .7; transform: scale(1); }
  to { opacity: 0; transform: scale(3.2); }
}
.hp-nav-tip {
  position: absolute;
  left: 0;
  top: calc(100% + 10px);
  z-index: 2;
  translate: var(--tip-x, 0px) 0;
  transform: translateX(-50%) translateY(-6px) scale(.92);
  transform-origin: 50% 0;
  padding: .3rem .7rem .32rem;
  border-radius: 999px;
  background: #1b3661;
  color: #fff;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgb(27 54 97 / .28);
  opacity: 0;
  pointer-events: none;
  transition: translate .34s cubic-bezier(.16,1,.3,1), transform .24s cubic-bezier(.16,1,.3,1), opacity .18s ease;
}
/* Spitze zum Punkt */
.hp-nav-tip::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -4px;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 2px;
  background: inherit;
  transform: rotate(45deg);
}
.hp-nav-tip.is-on { opacity: 1; transform: translateX(-50%); }
/* erstes Erscheinen am Punkt, ohne vom letzten Ort herüberzugleiten */
.hp-nav-tip.is-jump { transition: transform .24s cubic-bezier(.16,1,.3,1), opacity .18s ease; }
.hp-nav-tip-face {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .38rem;
}
.hp-nav-tip-face i { font-size: .85rem; line-height: 1; }
.hp-nav-tip-face.is-swap { animation: hp-nav-tip-swap .22s cubic-bezier(.16,1,.3,1); }
@keyframes hp-nav-tip-swap {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: none; }
}
.hp-nav-end {
  display: flex; align-items: center; gap: .55rem;
  position: relative;
}
.plus-nav-wrap {
  position: relative;
  width: 2.55rem;
  height: 2.55rem;
  overflow: visible;
}
.plus-nav-wrap.is-landing #plus-nav {
  opacity: 0;
  pointer-events: none;
}
#plus-nav { transition: opacity .3s ease; }
/* Hell/Dunkel-Umschalter: von Anfang an sichtbar (Nutzer 29.09.2026) */
.hp-mode-btn,
.hp-nav .hp-nav-link {
  width: 2.55rem; height: 2.55rem;
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  color: #1b3661;
  font-size: 1.05rem;
  cursor: pointer;
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}
.hp-mode-btn:hover,
.hp-nav .hp-nav-link:hover { background: #eef1f6; color: #1b3661; }
.hp-mode-btn i,
.hp-nav .hp-nav-link i { line-height: 1; }
.hp-nav .hp-nav-link { text-decoration: none; }
/* Gespräch anfragen: Icon-Knopf in derselben Optik wie der Plus-Knopf (.plus-neu.is-icon) */
.hp-nav .hp-nav-cta {
  width: 2.55rem;
  height: 2.55rem;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #1b3661;
  color: #fff;
  font-size: 1.2rem;
  transition: transform .2s cubic-bezier(.16,1,.3,1);
}
.hp-nav .hp-nav-cta:hover { transform: scale(1.06); }
.hp-nav .hp-nav-cta i { line-height: 1; }
/* Logo-Zusatz (Nutzer 14.10.2026): rechts neben dem Logo eine Spalte so hoch wie das Logo. Oben bündig das Feld in
   Navy mit dem Namen der Seite (CRM, POS, WMS), darunter die Version des nachgebauten Stands, unten bündig mit dem
   Logo; linke Kanten in einer Flucht. Im Logo-Link, keine Bewegung. Unter 768 px nur das Feld, unten bündig.
   Die Landingpages setzen dasselbe Markup (.hp-nav-badge) in ihren a.hp-nav-brand. */
.hp-nav-brand .hp-nav-badge {
  height: 2.1rem;
  padding-top: .075rem; /* das Logo-Bild hat oben rund 1,2 px durchsichtigen Rand; unten sitzt die Grundlinie schon richtig */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}
.hp-nav-brand .hp-nav-tag {
  flex: 0 0 auto;
  width: 2.1rem;
  height: 1.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: var(--hp-tag, #1b3661);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1;
}
/* Feld in der Produktfarbe der Seite statt Navy (Nutzer 15.10.2026, Screenshot POS rosa: „im Logo den Background wie im
   Screenshot anpassen“, alle Seiten außer der Übersicht): data-p an .hp-nav-badge, Farbe aus --pk-* oben in :root,
   Schrift weiß, Maße und Version unverändert, hell wie dunkel. Ohne data-p bleibt Navy. */
.hp-nav-brand .hp-nav-badge[data-p="crm"]  { --hp-tag: var(--pk-crm); }
.hp-nav-brand .hp-nav-badge[data-p="pos"]  { --hp-tag: var(--pk-pos); }
.hp-nav-brand .hp-nav-badge[data-p="wms"]  { --hp-tag: var(--pk-wms); }
.hp-nav-brand .hp-nav-badge[data-p="shop"] { --hp-tag: var(--pk-shop); }
/* Grundmodul neben dem Logo der CRM-Seite (Nutzer 19.10.2026: „crm neben logo sinnvoll anpassen“, gewählt „CRM · ERP · DMS“):
   drei Felder nebeneinander in den Blautönen des Grundmoduls, je 2.1rem breit, Höhe wie das einzelne Feld, Version darunter.
   Markup: .hp-nav-tags mit drei .hp-nav-tag und data-m="crm|erp|dms". */
.hp-nav-brand .hp-nav-tags { display: flex; gap: .15rem; }
.hp-nav-brand .hp-nav-tags .hp-nav-tag { width: 2.1rem; }
.hp-nav-brand .hp-nav-tag[data-m="crm"] { --hp-tag: var(--m-crm); }
.hp-nav-brand .hp-nav-tag[data-m="erp"] { --hp-tag: var(--m-erp); }
.hp-nav-brand .hp-nav-tag[data-m="dms"] { --hp-tag: var(--m-dms); }
/* Unter 768 px passen drei Felder nicht neben Logo und Knöpfe (bei 390 px ragten die Knöpfe 16 px über den Rand),
   dort steht nur CRM (Nutzer: „sonst nur CRM“). */
@media (max-width: 767.98px) {
  .hp-nav-brand .hp-nav-tag:is([data-m="erp"], [data-m="dms"]) { display: none; }
}
.hp-nav-brand .hp-nav-ver {
  color: #1b3661;
  font-size: .6em;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
@media (max-width: 767.98px) {
  .hp-nav-brand .hp-nav-ver { display: none; }
  /* Feld unten bündig mit der sichtbaren Logo-Unterkante, das Bild hat auch unten rund 1,2 px durchsichtigen Rand */
  .hp-nav-brand .hp-nav-badge { justify-content: flex-end; padding-top: 0; padding-bottom: .075rem; }
}
/* Schmale Handys: Platz für das Feld neben dem Logo, bei 360 px ragte die Kopfzeile sonst rund 15 px über den Rand */
@media (max-width: 399.98px) {
  .hp-nav { padding-inline: 1rem; gap: .75rem; }
  .hp-nav-brand,
  .hp-nav-end { gap: .45rem; }
}
/* Größeres Logo ab 768 px (Nutzer 14.10.2026: „logo in allen instanzen anpassen auf 3rem“, Feld 2.4 × 1.7rem,
   „Nur ab 768 px“). Die Spalte bleibt so hoch wie das Logo, oben und unten bündig; der durchsichtige Rand des
   Logo-Bilds wächst mit (1/28 der Höhe). */
@media (min-width: 768px) {
  .hp-nav-brand img { height: 3rem; }
  /* Feld direkt über der Version, beide unten (Nutzer 14.10.2026: „CRM muss weiter runter, damit es direkt über der
     Versionsnummer anfängt“); unten .03rem, damit die Grundlinie der Version auf der Logo-Unterkante sitzt */
  .hp-nav-brand .hp-nav-badge { height: 3rem; justify-content: flex-end; gap: .2rem; padding-bottom: .03rem; }
  .hp-nav-brand .hp-nav-tag { width: 2.4rem; height: 1.7rem; }
}
/* Logo in der Produktfarbe statt Orange (Nutzer 20.10.2026: „jede landingpage bekommt ihre farbe statt orange“; gewählt
   „Code mit Maske“, Farbton wie das Feld aus --pk-*, CRM-Seite CRM-Hellblau, Übersicht „Orange bleibt“). Nur auf Seiten
   mit data-p am Feld: Das Logo-Bild schiebt seine Datei aus dem Rahmen und zeigt als Hintergrund ein Grundbild, das
   außerhalb von X und GENERATION deckend Navy (dunkel: Weiß) ist, darunter die Produktfarbe. Die Maske ist das
   Originallogo (assets/cinnextgen_light.webp bzw. _dark.webp): Sie allein glättet die Kanten, so scheint die Farbe nur in X
   und Feld durch, die Schrift im Feld bleibt ausgespart. (Bis 20.10.2026 mittags war das Grundbild selbst halbdurchsichtig
   an den Kanten, die Farbe schien als Saum um die Navy-Teile, Nutzer: „poslogo scheint einen pinken border bekommen zu
   haben“.) Die Grundbilder sind aus den Logos in application/public/img/ci erzeugt; ändert sich das Logo, neu erzeugen.
   Ohne :has bleibt das Logo orange. */
.hp-nav-brand:has(.hp-nav-badge[data-p="crm"])  { --hp-logo-x: var(--pk-crm); }
.hp-nav-brand:has(.hp-nav-badge[data-p="pos"])  { --hp-logo-x: var(--pk-pos); }
.hp-nav-brand:has(.hp-nav-badge[data-p="wms"])  { --hp-logo-x: var(--pk-wms); }
.hp-nav-brand:has(.hp-nav-badge[data-p="shop"]) { --hp-logo-x: var(--pk-shop); }
.hp-nav-brand:has(.hp-nav-badge[data-p]) img {
  --hp-logo-base: url("assets/cinnextgen_light_ohne_x.webp");
  --hp-logo-mask: url("assets/cinnextgen_light.webp");
  object-position: -999rem 0;
  background: var(--hp-logo-base) 0 0 / 100% 100% no-repeat var(--hp-logo-x);
  -webkit-mask: var(--hp-logo-mask) 0 0 / 100% 100% no-repeat;
  mask: var(--hp-logo-mask) 0 0 / 100% 100% no-repeat;
}
.hp-nav-brand:has(.hp-nav-badge[data-p]) .hp-logo-dark {
  --hp-logo-base: url("assets/cinnextgen_dark_ohne_x.webp");
  --hp-logo-mask: url("assets/cinnextgen_dark.webp");
}

.hp-talk {
  background: #1b3661 !important; color: #fff !important;
  padding: .38rem .85rem; border-radius: 999px; font-weight: 600; font-size: .86rem;
  text-decoration: none; /* Knopf, kein Link-Unterstrich (Nutzer 14.10.2026, „Zum Querschnitt“) */
  display: inline-block; /* für den Herzschlag: transform wirkt nicht auf einfache Inline-Elemente */
}

/* Dunkle Knöpfe (Nutzer 15.10.2026: „alle Knopf dunkel im ganzen Layout … die gleiche Border Animation … wie der Button,
   der den Dark Mode aktiviert, wenn der User darüber hovert + dezente Pulse/Heartbeat-Animation“, dann „Puls-Animation der
   Buttons nur on Hover“): „Gespräch anfragen“ und „Zum Querschnitt“ (.hp-talk) und „Gespräch anfragen“ im Abschluss;
   andere Knöpfe (Übersicht: .uv-btn, .uv-comm-btn) nehmen die Klasse .hp-beat, die nur die Bewegung bringt, keine Farbe,
   Größe oder Schrift. In Ruhe steht der Knopf still. Beim Überfahren und bei Tastaturfokus der laufende Farbrand und der
   weiche Schein von .theme-item.btn-crm-glow:hover (Verlauf und Tempo wie crm-glow-move) und der Herzschlag: sofort zwei
   kurze Schläge mit 3 % (0,8 s), dann 4 s Ruhe, solange der Zeiger bleibt; bei reduzierter Bewegung kein Herzschlag.
   Rand und Schein liegen über dem Knopf und sind innen ausmaskiert (Ring 2 px; Schein als 2-px-Form am Knopf, weichgezeichnet mit 24 px Raum, Maske nach dem
   Weichzeichnen), damit der Herzschlag (transform) sie nicht über die Fläche legt. Die Klasse setzt position: relative;
   :where hält die Spezifität niedrig, eigene Regeln der Seite gehen vor. */
:where(.hp-beat, .hp-talk, #close .close-card .btn-primary) { position: relative; }
:where(.hp-beat, .hp-talk, #close .close-card .btn-primary)::before,
:where(.hp-beat, .hp-talk, #close .close-card .btn-primary)::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  background: linear-gradient(
    45deg,
    #1b3661, #2a4875, #5b8def, #5B4DFF,
    #1b3661, #f59e0b, #2a4875, #5b8def,
    #152b4d, #5B4DFF, #1b3661, #2a4875
  );
  background-size: 400%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
:where(.hp-beat, .hp-talk, #close .close-card .btn-primary)::before { inset: -2px; padding: 2px; }
:where(.hp-beat, .hp-talk, #close .close-card .btn-primary)::after { inset: -24px; padding: 22px; background-clip: content-box; filter: blur(9px); }
:where(.hp-beat, .hp-talk, #close .close-card .btn-primary):is(:hover, :focus-visible) { animation: hp-heartbeat 4.8s ease-in-out infinite; }
:where(.hp-beat, .hp-talk, #close .close-card .btn-primary):is(:hover, :focus-visible)::before { opacity: 1; animation: crm-glow-move 18s linear infinite; }
:where(.hp-beat, .hp-talk, #close .close-card .btn-primary):is(:hover, :focus-visible)::after { opacity: .55; animation: crm-glow-move 18s linear infinite; }
@keyframes hp-heartbeat {
  0%, 8%, 16%, 100% { transform: scale(1); }
  4%, 12% { transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  :where(.hp-beat, .hp-talk, #close .close-card .btn-primary):is(:hover, :focus-visible) { animation: none; }
}

.scene { position: relative; overflow: visible; }
.scene--banner { min-height: 100vh; height: auto; }
/* Aufgaben: der Auftakt läuft auf Zeit (homepage.js AUF_INTRO), die Karte steht beim Einrasten schon; der Pin
   dient nur noch zum Verweilen, deshalb 200vh statt 280vh (Nutzer 29.09.2026) */
.scene--hero { height: 200vh; }
.scene--pin { height: 200vh; }
.scene--pin-long { height: 230vh; }
.scene--close { min-height: 100vh; }
/* Kompakte Rubrik ohne Anheften (Nutzer 15.10.2026, Darkmode: „Der ganze Container drumherum soll schmaler werden,
   nimmt zu viel Platz ein“; „lass die eigentlichen Positionen der Cards wie sie waren … das einzige, was ich wollte, ist,
   dass alles von der Höhe schmaler wird“): Hinweiskarte an ihrem Platz oben links (4.5vw, 5.4rem), das Inhaltsstück
   waagrecht mittig wie bisher, 3rem unter der Karte; danach 5rem Luft. Keine Bildschirmhöhe, kein Scrollweg, keine
   Überblendung (homepage.js, landing.js). Handy wie die übrigen Rubriken. */
@media (min-width: 768px) {
  .scene--compact .scene-sticky { position: relative; height: auto; display: block; padding: 5.4rem 0 5rem; }
  .scene--compact .copy { position: relative; left: auto; top: auto; width: fit-content; margin: 0 0 0 4.5vw; }
  .scene--compact .fg { padding: 3rem 3.2vw 0; }
}
.scene-sticky {
  position: sticky; top: 0; height: 100vh;
  overflow: visible;
  display: flex;
  flex-direction: column;
  /* no opaque slab: an opaque 100vh block would slide over the previous
     card and its top edge is the visible seam. Scenes cross-fade instead. */
  background: transparent;
  opacity: var(--scene-op, 1);
}
.scene-sticky::after { display: none !important; }

.bg-plate {
  position: absolute;
  inset: 5.1rem 4.5vw 3.4vh;
  filter: blur(9px) saturate(.92) brightness(1.02);
  transform: none;
  opacity: .48;
  pointer-events: none;
  user-select: none;
  border-radius: 18px;
  overflow: hidden;
}
.bg-plate .crm-lite {
  width: 100%; height: 100%;
  background: #fff;
  display: grid;
  grid-template-columns: 14rem 1fr;
  box-shadow: 0 0 0 1px #ececec;
  border-radius: 18px;
}
.crm-lite-side {
  background: #f7f7f8;
  border-right: 1px solid #ececec;
  padding: 1.4rem 1rem;
}
.crm-lite-side .ghost-nav {
  height: 36px; margin-bottom: 8px; border-radius: 8px; background: #eceef1;
}
.crm-lite-side .ghost-nav.is-on { background: #dfe6f3; }
.crm-lite-main { padding: 1.1rem 1.4rem; }
.ghost-top {
  height: 44px; border-radius: 10px; background: #f1f3f6; margin-bottom: 1rem;
}
.ghost-row {
  height: 52px; margin-bottom: 8px; background: #f1f3f6; border-radius: 8px;
}
.ghost-row.is-on { background: #e4ebf8; width: 92%; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; height: calc(100% - 60px); }
.ghost-day { min-height: 72px; background: #f1f3f6; border-radius: 8px; }
.ghost-day.is-on { background: #dce6f8; }

.crm-lite--cal { grid-template-columns: 13.5rem 1fr; }
.hp-mini-cal {
  margin-top: 1.4rem;
  padding: .7rem .55rem .8rem;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #ececec;
}
.hp-mini-cal-h {
  font-size: .72rem; font-weight: 700; text-align: center; margin-bottom: .45rem; color: #1b3661;
}
.hp-mini-cal-w,
.hp-mini-cal-g {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center;
  font-size: .62rem; color: #6b7280;
}
.hp-mini-cal-w { font-weight: 600; margin-bottom: .2rem; }
.hp-mini-cal-g span {
  padding: .28rem 0; border-radius: 6px;
}
.hp-mini-cal-g .mute { color: #c5c9d0; }
.hp-mini-cal-g .is-on { background: #1b3661; color: #fff; font-weight: 700; }
.hp-cal-main {
  display: flex; flex-direction: column; min-height: 0; padding: .85rem 1.1rem 1rem !important;
}
.hp-cal-tabs {
  display: flex; gap: 1.1rem; align-items: center;
  border-bottom: 1px solid #e8e2d6; padding-bottom: .55rem; margin-bottom: .7rem;
  font-size: .82rem; font-weight: 600; color: #8a847a;
}
.hp-cal-tabs .is-on { color: #1b3661; box-shadow: 0 2px 0 #1b3661; }
.hp-cal-tabs i { margin-right: .28rem; }
.hp-cal-bar {
  display: flex; align-items: center; gap: .55rem; margin-bottom: .65rem; color: #1a1714;
}
.hp-cal-bar strong { font-size: 1.05rem; }
.hp-cal-chip {
  border: 1px solid #d7dbe2; border-radius: 8px; padding: .18rem .55rem; font-size: .75rem; background: #fff;
}
.hp-cal-chip.is-on { background: #1b3661; color: #fff; border-color: #1b3661; margin-left: auto; }
.hp-cal-nav {
  width: 1.6rem; height: 1.6rem; border-radius: 8px; background: #f1f3f6;
  display: inline-flex; align-items: center; justify-content: center;
}
.hp-cal-week,
.hp-cal-month {
  display: grid; grid-template-columns: repeat(7, 1fr);
}
.hp-cal-week {
  font-size: .7rem; font-weight: 600; color: #8a847a; padding: .2rem 0 .35rem;
  text-align: center;
}
.hp-cal-month {
  flex: 1; gap: 4px; min-height: 0;
}
.hp-cal-cell {
  background: #f7f8fa; border-radius: 8px; min-height: 4.4rem; padding: .28rem .32rem;
  display: flex; flex-direction: column; gap: 3px; border: 1px solid transparent;
}
.hp-cal-cell > span { font-size: .72rem; font-weight: 600; color: #4b5563; }
.hp-cal-cell.mute { opacity: .4; }
.hp-cal-cell.is-today {
  background: #eef3fb; border-color: #1b3661;
}
.hp-cal-cell.is-today > span { color: #1b3661; }
.hp-cal-ev {
  display: block; font-style: normal; font-size: .62rem; font-weight: 600;
  line-height: 1.35; padding: .08rem .32rem; border-radius: 4px;
  color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hp-cal-ev.is-meet { background: #3B82F6; }
.hp-cal-ev.is-apt { background: #10B981; }
.hp-cal-ev.is-ho { background: #8B5CF6; }
.hp-cal-ev.is-story { background: #1b3661; }

.fg {
  position: relative; z-index: 2;
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  display: grid;
  place-items: center;
  padding: 5.2rem 3.2vw 2.1rem;
  perspective: 1800px;
  overflow: visible;
}
#aufgabe .fg {
  padding: 4.5rem 2.5vw 1.4rem;
  align-items: stretch;
  place-items: stretch;
}

.copy {
  position: absolute; left: 4.5vw; top: 5.4rem; z-index: 4; max-width: 28rem;
  pointer-events: none;
  padding: 0.9rem 1.15rem 1.05rem;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 10px 36px rgb(27 54 97 / .08);
  border: 1px solid rgb(27 54 97 / .08);
}
.copy--hero {
  max-width: min(22.5rem, 30vw);
  padding: .7rem 2.2rem .8rem .9rem;
  background: rgb(255 255 255 / .28);
  backdrop-filter: blur(22px) saturate(1.15);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  border: 1px solid rgb(255 255 255 / .42);
  box-shadow: 0 12px 32px rgb(27 54 97 / .06);
  transform-origin: left top;
  transform: rotate(var(--copy-rz, -3.2deg)) scale(var(--copy-sc, 1.05));
  opacity: var(--copy-op, 1);
  will-change: transform, opacity;
}
.copy .k {
  font-size: .72rem !important; letter-spacing: .16em; text-transform: uppercase;
  color: #7a7368; margin-bottom: .45rem;
}
.copy h2 {
  font-size: clamp(1.55rem, 3vw, 2.45rem) !important;
  line-height: 1.12 !important; margin: 0 !important; font-weight: 650 !important;
  color: #141210 !important;
}
.copy--hero h2 {
  font-size: clamp(1.28rem, 2.1vw, 1.72rem) !important;
  color: #3d3a36 !important;
  letter-spacing: -0.02em;
}
.copy p {
  margin: .65rem 0 0 !important;
  color: #5c564c !important;
  font-size: .98rem !important;
  max-width: 26rem;
}
.copy--hero p {
  font-size: .86rem !important;
  max-width: 21rem;
  color: #5a564f !important;
  margin-top: .4rem !important;
}
.copy { padding-right: 2.4rem; }
.hp-copy-close,
.hp-bezug-min {
  pointer-events: auto;
  position: absolute;
  top: .42rem;
  right: .42rem;
  z-index: 2;
  width: 1.7rem;
  height: 1.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: rgb(27 54 97 / .08);
  color: #1b3661;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.hp-copy-close i { font-size: .78rem; }
.hp-bezug-min i { font-size: .95rem; }
.hp-copy-close:hover,
.hp-bezug-min:hover {
  background: #1b3661;
  color: #fff;
  transform: scale(1.06);
}
.copy.is-dismissed { display: none !important; }

/* Text und Folien stehen als Gruppe mittig (Nutzer 15.10.2026, Bild 2: „Der Textcontainer muss näher an den rechten
   Container“): die Folienspalte ist höchstens so breit wie die Folien (52rem), der Abstand zum Text ist überall der
   Spaltenabstand; vorher stand die Karte mittig in einer breiten Spalte, bei 1920 px 266 px vom Text entfernt. */
.hp-banner {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(17rem, 26rem) minmax(0, 52rem);
  justify-content: center;
  gap: clamp(1.4rem, 4vw, 3.2rem);
  align-items: center;
  padding: 6.4rem 5vw 5.4rem;
  overflow: visible;
  --hp-pen: #4f7fd1;
}
.hp-banner-copy h1 {
  font-size: clamp(2rem, 4.2vw, 3.15rem) !important;
  line-height: 1.08 !important;
  margin: 0 !important;
  font-weight: 650 !important;
  color: #141210 !important;
  letter-spacing: -0.03em;
}
/* Überschrift mit markierten Wörtern in der Produktfarbe (Nutzer 15.10.2026: „der Übergang gerade bei Onlineshop sieht
   fürchterlich aus … das letzte Update von der Next-Instanz aufgreifen … die markierten Wörter in der respektiven Farbe
   darstellen“; Vorbild der Slogan der Übersicht, „aus Erfahrung wird Zukunft“ vollfarbig; ersetzt alle Verläufe davor):
   kein Verlauf. Die Wörter in <em> stehen vollfarbig in --pk-* der Seite (CRM „Das Online-Cockpit“, POS „Die Kasse“,
   WMS „Das Lager“, Shop „Der Onlineshop“), der Rest in Navy, im Darkmode hell wie bisher. Gilt mit data-p an .hp-banner. */
.hp-banner[data-p="crm"]   { --hp-pen: var(--pk-crm); }
.hp-banner[data-p="pos"]   { --hp-pen: var(--pk-pos); }
.hp-banner[data-p="wms"]   { --hp-pen: var(--pk-wms); }
.hp-banner[data-p="shop"]  { --hp-pen: var(--pk-shop); }
.hp-banner[data-p] .hp-banner-copy h1 { color: #1b3661 !important; }
html[data-bs-theme="dark"] .hp-banner[data-p] .hp-banner-copy h1 { color: #e6edf3 !important; }
.hp-banner[data-p] .hp-banner-copy h1 em { font-style: normal; color: var(--hp-pen); }
/* CRM-Überschrift in zwei Zeilen, „Online-Cockpit“ ohne Umbruch (Nutzer 15.10.2026: „Online-Cockpit nicht brechen –
   2 Zeilen“): höchstens 3rem statt 3.15rem, damit „Das Online-Cockpit“ in die 26rem breite Textspalte passt
   (gemessen 429 px bei 3.15rem, Spalte 416 px). */
.hp-banner-copy h1.hp-h1-cockpit { font-size: clamp(2rem, 4.2vw, 3rem) !important; }
.hp-h1-cockpit span { white-space: nowrap; }
.hp-banner-copy p {
  margin: .85rem 0 1.35rem !important;
  color: #5c564c !important;
  font-size: 1.02rem !important;
  max-width: 24rem;
}
.hp-banner-copy .hp-talk {
  display: inline-flex;
  text-decoration: none;
}
.hp-banner-stage {
  min-width: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.hp-slides {
  display: grid;
  width: 100%;
  max-width: min(52rem, 100%);
  margin-inline: auto;
  filter: drop-shadow(0 28px 64px rgb(27 54 97 / .2));
}
.hp-slide {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .55s ease;
  width: 100%;
}
.hp-slide.is-on {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}
.hp-slide > img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: calc(100vh - 13.2rem);
  object-fit: contain !important;
  object-position: center top;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid rgb(27 54 97 / .08);
}
.hp-messe-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .85rem;
  min-height: min(28rem, calc(100vh - 13.6rem));
  padding: clamp(1.6rem, 4vw, 2.8rem);
  border-radius: 16px;
  border: 1px solid rgb(27 54 97 / .12);
  background:
    linear-gradient(145deg, #ffffff 0%, #f4f1ea 48%, #e8eef6 100%);
  color: #1a1714;
}
.hp-messe-kicker {
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #7a7368;
  font-weight: 600;
}
.hp-messe-title {
  margin: 0 !important;
  font-size: clamp(1.85rem, 3.4vw, 2.75rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em;
  color: #1b3661 !important;
  line-height: 1.05 !important;
}
.hp-messe-meta {
  margin: 0 !important;
  color: #5c564c !important;
  font-size: .95rem !important;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .75rem;
  align-items: center;
}
.hp-messe-meta i { color: #1b3661; }
.hp-messe-pitch {
  margin: 0 !important;
  max-width: 34rem;
  color: #3f3a33 !important;
  font-size: 1.02rem !important;
  line-height: 1.45 !important;
}
.hp-messe-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin-top: .35rem;
}
.hp-messe-ghost {
  display: inline-flex;
  align-items: center;
  padding: .38rem .85rem;
  border-radius: 999px;
  border: 1px solid #1b3661;
  color: #1b3661 !important;
  font-weight: 600;
  font-size: .86rem;
  text-decoration: none;
  background: transparent;
}
.hp-messe-ghost:hover { background: #eef1f6; }
/* Steuerleiste sitzt am Viewport zentriert (Fullscreen), nicht an der Bild-Spalte:
   aus dem Stage-Fluss gelöst und über die ganze Banner-Breite gespannt. */
.hp-slide-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  margin: 0;
  width: auto;
  max-width: none;
}
.hp-slide-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .35rem;
}
.hp-slide-tabs button,
.hp-slide-step {
  border: 1px solid #d7dbe2;
  background: #fff;
  color: #1b3661;
  border-radius: 999px;
  font: 600 .78rem Outfit, sans-serif;
  padding: .38rem .7rem;
  cursor: pointer;
}
.hp-slide-step {
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.hp-slide-tabs button.is-on {
  background: #1b3661;
  color: #fff;
  border-color: #1b3661;
}
.hp-slide-tabs button:hover,
.hp-slide-step:hover {
  border-color: #1b3661;
}

.hp-tags-card {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(145deg, #ffffff 0%, #f7f3ea 42%, #e8eef6 100%);
}
.hp-tags-card::before {
  content: "#";
  position: absolute;
  right: -0.15em;
  bottom: -0.28em;
  font-size: clamp(7rem, 18vw, 12rem);
  font-weight: 700;
  line-height: 1;
  color: rgb(27 54 97 / .07);
  pointer-events: none;
}
.hp-tags-slide-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  position: relative;
  z-index: 1;
}
.hp-tag-hash {
  width: 2.05rem;
  height: 2.05rem;
  border-radius: 8px;
  border: 1px solid #1b3661;
  background: #fff;
  color: #1b3661;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  cursor: pointer;
  padding: 0;
  font-size: 1.05rem;
}
.hp-tag-hash:hover,
.hp-tag-hash.is-on {
  background: #1b3661;
  color: #fff;
}
.hp-tags-slide-pills .hp-tag-hash { cursor: default; }
.hp-tags-slide-pills .tag-badge {
  font-weight: 600;
  font-size: .82rem;
  padding: .32rem .7rem;
}

.scene--board {
  min-height: 100vh;
  padding: 5.8rem 5vw 4.6rem;
}
.hp-tag-board {
  max-width: 68rem;
  margin-inline: auto;
}
.hp-tag-board-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(18rem, .85fr);
  gap: 1.4rem 2.2rem;
  align-items: end;
  margin-bottom: 1.6rem;
}
.hp-tag-board-copy .k,
.hp-tag-types .k,
.hp-tag-email .k,
.hp-tag-card-k {
  font-size: .72rem !important;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #7a7368;
  font-weight: 600;
  margin-bottom: .4rem;
  display: flex;
  align-items: center;
  gap: .38rem;
}
.hp-tag-board-copy h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.45rem) !important;
  line-height: 1.1 !important;
  margin: 0 0 .7rem !important;
  font-weight: 650 !important;
  color: #141210 !important;
  letter-spacing: -0.03em;
}
.hp-tag-board-copy p {
  margin: 0 !important;
  color: #5c564c !important;
  font-size: 1.02rem !important;
  max-width: 38rem;
  line-height: 1.45;
}
.hp-tag-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .55rem;
  justify-content: flex-end;
}
.hp-tag-or-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.hp-tag-or-chips .tag-badge {
  appearance: none;
  -webkit-appearance: none;
  font-weight: 600;
  font-size: .78rem;
  padding: .32rem .65rem;
  cursor: pointer;
  opacity: 1;
  line-height: 1.2;
  transition: opacity .18s ease, transform .18s ease;
}
.hp-tag-or-chips.is-filtering .tag-badge { opacity: .42; }
.hp-tag-or-chips.is-filtering .tag-badge.is-on,
.hp-tag-or-chips .tag-badge:hover {
  opacity: 1;
}
.hp-tag-style {
  display: inline-flex;
  border: 1px solid #d7dbe2;
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
}
.hp-tag-style button {
  border: 0;
  background: transparent;
  color: #1b3661;
  font: 600 .74rem Outfit, sans-serif;
  padding: .32rem .7rem;
  cursor: pointer;
}
.hp-tag-style button.is-on {
  background: #1b3661;
  color: #fff;
}
.hp-tag-toolbar-hint {
  grid-column: 1 / -1;
  margin: -.35rem 0 0 !important;
  color: #8a847a !important;
  font-size: .82rem !important;
}
.hp-tag-pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  align-items: stretch;
  margin-bottom: 1rem;
  position: relative;
}
.hp-tag-pair-join {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: 0 .55rem;
  min-width: 6.2rem;
  position: relative;
  z-index: 1;
}
.hp-tag-pair-join::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: #1b3661;
  opacity: .28;
  z-index: -1;
}
.hp-tag-pair-join span:last-child {
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #7a7368;
  font-weight: 600;
  background: #fff;
  padding: .1rem .28rem;
}
.hp-tag-card {
  background: #fff;
  border: 1px solid rgb(27 54 97 / .1);
  border-radius: 16px;
  padding: 1.05rem 1.15rem 1.1rem;
  box-shadow: 0 10px 28px rgb(27 54 97 / .06);
  transition: opacity .28s ease, transform .28s ease, filter .28s ease;
}
.hp-tag-card.is-dim,
.hp-tag-pair-join.is-dim {
  opacity: .34;
  filter: grayscale(.35);
}
.hp-tag-card h3 {
  font-size: 1.05rem !important;
  font-weight: 650 !important;
  margin: 0 0 .4rem !important;
  color: #141210 !important;
}
.hp-tag-card p {
  margin: 0 0 .75rem !important;
  color: #5c564c !important;
  font-size: .9rem !important;
  line-height: 1.4;
}
.hp-tag-card-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .32rem;
}
.hp-tag-card-pills .tag-badge {
  font-weight: 600;
  font-size: .75rem;
}
.hp-tag-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .75rem;
  margin-bottom: 1.15rem;
}
.hp-tag-grid .hp-tag-card h3 { font-size: .98rem !important; }
.hp-tag-card.is-catalog {
  background: #f4f1ea;
  border-style: dashed;
  border-color: rgb(27 54 97 / .22);
  box-shadow: none;
}
.hp-tag-meta {
  display: grid;
  grid-template-columns: 1.35fr .85fr;
  gap: .85rem;
}
.hp-tag-types,
.hp-tag-email {
  border-radius: 16px;
  padding: 1.05rem 1.2rem 1.15rem;
  border: 1px solid rgb(27 54 97 / .1);
}
.hp-tag-types {
  background: #fff;
}
.hp-tag-types ul,
.hp-tag-email ul {
  list-style: none;
  margin: .35rem 0 0;
  padding: 0;
  display: grid;
  gap: .45rem;
}
.hp-tag-types li {
  display: grid;
  grid-template-columns: 7.2rem 1fr;
  gap: .55rem;
  font-size: .88rem;
  color: #5c564c;
}
.hp-tag-types strong {
  color: #1b3661;
  font-weight: 650;
}
.hp-tag-email {
  background: #1b3661;
  color: #f4f1ea;
  border-color: #1b3661;
}
.hp-tag-email .k { color: #c5cfe0; }
.hp-tag-email h3 {
  margin: 0 0 .4rem !important;
  font-size: 1.08rem !important;
  font-weight: 650 !important;
  color: #fff !important;
}
.hp-tag-email p {
  margin: 0 0 .7rem !important;
  color: #d7deea !important;
  font-size: .9rem !important;
  line-height: 1.4;
}
.hp-tag-email li {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .88rem;
  color: #eef1f6;
}
.hp-tag-email i { color: #c9a227; }

.spot-pair {
  position: relative;
  width: min(1100px, 88vw);
  height: calc(100vh - 7.4rem);
  max-height: 820px;
}
.spot-pair .spotlight {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: 100%;
}

#termin .fg { overflow: visible; }

#spot-termin.spotlight {
  width: min(520px, 92vw);
  height: auto;
  max-height: calc(100vh - 7.2rem);
  overflow: visible;
}
#spot-termin .modal-card {
  height: auto;
  max-height: calc(100vh - 7.2rem);
}
#spot-termin .modal-body,
.live-modal .hp-event-modal .modal-body {
  min-height: 0;
}
#spot-termin .event-collapse-body,
.hp-event-modal .event-collapse-body {
  max-height: 80rem;
}
#spot-termin .event-collapse-card[data-collapsed="true"] .event-collapse-body,
.hp-event-modal .event-collapse-card[data-collapsed="true"] .event-collapse-body {
  max-height: 0;
  opacity: 0;
}
#spot-termin .event-termin-card .card-body,
.hp-event-modal .event-termin-card .card-body {
  padding-bottom: 1.35rem;
}

.cal-deck-slot {
  position: relative;
  transform-origin: 50% 58%;
  transition: transform .7s cubic-bezier(.16,1,.3,1), filter .55s ease, opacity .4s ease;
}
.cal-deck-hit {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 4;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.cal-deck-slot.is-back:not(.is-off) .cal-deck-hit { display: block; }
.cal-deck-slot.is-front {
  position: relative;
  z-index: 2;
  transform: none;
  filter: none;
  pointer-events: auto;
}
.cal-deck-slot.is-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  cursor: pointer;
  --deck-x: 42%;
  --deck-r: 6.8deg;
  transform: translate3d(var(--deck-x), 7%, 0) rotate(var(--deck-r)) scale(.93);
  filter: blur(5px) saturate(.86);
  opacity: .94;
  pointer-events: auto;
}
.cal-deck-slot.is-back.is-left {
  --deck-x: -42%;
  --deck-r: -6.8deg;
}
.cal-deck-slot.is-back.is-off {
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  filter: blur(8px);
}
.cal-deck-slot.is-back .modal-card { pointer-events: none; }
.cal-deck-slot.is-back:not(.is-off):hover {
  filter: blur(2.4px) saturate(.95);
  transform: translate3d(var(--deck-x), 5%, 0) rotate(var(--deck-r)) scale(.96);
  opacity: 1;
}

.spotlight {
  width: min(1100px, 88vw);
  height: auto;
  max-height: calc(100vh - 7.4rem);
  transform-origin: 50% 58%;
  will-change: transform, opacity;
  opacity: var(--op, 0);
  transform:
    translate3d(var(--tx, 90px), var(--ty, 140px), 0)
    rotateX(var(--rx, 10deg))
    rotateZ(var(--rz, -3deg))
    scale(var(--sc, .78));
  pointer-events: auto;
}
.spotlight.is-landed {
  overflow: visible;
  transform: none !important;
  filter: none !important;
  box-shadow: 0 32px 70px rgb(27 54 97 / .22);
}
#spot-projekt:not(.is-landed) .modal-body {
  overflow: hidden !important;
}

.hp-postfach,
.hp-calendar,
.hp-kontakte,
.hp-teamchat,
.hp-erweiterungen {
  width: min(1100px, 88vw);
  height: calc(100vh - 7.4rem);
  max-height: 820px;
  transform-origin: 50% 58%;
  will-change: transform, opacity, width;
  opacity: var(--op, 0);
  transform:
    translate3d(var(--tx, 90px), var(--ty, 140px), 0)
    rotateX(var(--rx, 10deg))
    rotateZ(var(--rz, -3deg))
    scale(var(--sc, .78));
  pointer-events: none;
  min-height: 0;
  overflow: hidden;
  transition: width .45s cubic-bezier(.16, 1, .3, 1), max-width .45s cubic-bezier(.16, 1, .3, 1);
}
.hp-postfach.is-landed,
.hp-calendar.is-landed,
.hp-kontakte.is-landed,
.hp-teamchat.is-landed,
.hp-erweiterungen.is-landed {
  pointer-events: auto;
  overflow: visible;
  transform: none !important;
  filter: none !important;
  will-change: width;
  box-shadow: 0 32px 70px rgb(27 54 97 / .22);
}
.hp-postfach.is-split {
  width: 80vw !important;
  max-width: 80vw !important;
}
#hp-postfach #communication-view {
  height: 100%;
  overflow: visible;
}
#hp-comm-split-host:not(.d-none) {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}
#hp-comm-split-host #detail-view {
  height: 100%;
  min-height: 0;
}
.hp-pop-menu {
  z-index: 4000 !important;
}
#communication-toolbar,
#tc-conv-header,
.hp-task-mobile .task-toolbar,
#table-contacts > .card {
  overflow: visible !important;
}
#hp-calendar [data-module="calendar"],
#hp-kontakte #contact-list,
#hp-teamchat #team-chat-view,
#hp-erweiterungen #hp-ext-shell {
  height: 100%;
}
#hp-erweiterungen #hp-ext-shell {
  display: flex;
  flex-direction: row;
  min-height: 0;
  background: var(--bs-body-bg);
  border-radius: .75rem;
  overflow: hidden;
}
#hp-erweiterungen .hp-ext-nav {
  flex: 0 0 13.25rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: .75rem .55rem;
  border-right: 1px solid var(--bs-border-color);
  background: var(--bs-tertiary-bg);
  min-height: 0;
  overflow-y: auto;
}
#hp-erweiterungen .hp-ext-plugin {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .4rem .25rem .5rem;
  border-top: 1px solid var(--bs-border-color);
}
#hp-erweiterungen .hp-ext-plugin:first-child {
  border-top: 0;
  padding-top: 0;
}
#hp-erweiterungen .hp-ext-plugin.is-on {
  background: color-mix(in srgb, var(--bs-body-bg) 70%, transparent);
  border-radius: .55rem;
  box-shadow: inset 3px 0 0 var(--bs-emphasis-color);
}
#hp-erweiterungen .hp-ext-plugin-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .15rem .45rem .45rem;
}
#hp-erweiterungen .hp-ext-plugin-head img {
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  object-fit: contain;
}
#hp-erweiterungen .hp-ext-plugin-name {
  padding: 0;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bs-emphasis-color);
}
#hp-erweiterungen .hp-ext-plugin-desc {
  font-size: .72rem;
  color: var(--bs-secondary-color);
}
#hp-erweiterungen .hp-ext-view {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: inherit;
  border-radius: .45rem;
  padding: .4rem .65rem;
  font-size: .92rem;
}
#hp-erweiterungen .hp-ext-view.active {
  background: var(--bs-body-bg);
  font-weight: 650;
  box-shadow: 0 0 0 1px var(--bs-border-color);
}
/* Seit JTL-Wawi (30.09.2026) liegen auch am Desktop nur die Ansichten des aktiven Plugins offen, die anderen zeigen den Kopf */
#hp-erweiterungen .hp-ext-plugin:not(.is-on):not([data-plugin="intro"]) .hp-ext-view {
  display: none;
}
#hp-erweiterungen .hp-ext-plugin-head[role="button"] {
  cursor: pointer;
  border-radius: .45rem;
}
#hp-erweiterungen .hp-ext-plugin:not(.is-on) .hp-ext-plugin-head[role="button"]:hover {
  background: var(--bs-body-bg);
}
.hp-ext-new {
  display: inline-block;
  margin-left: .25rem;
  padding: .08rem .4rem;
  border-radius: 999px;
  background: rgb(255 140 40);
  color: #1b3661;
  font-size: .62rem;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: .06em;
  text-transform: uppercase;
  vertical-align: .12em;
}
#hp-erweiterungen .hp-ext-soon {
  margin: auto 0 0;
  padding: .35rem .65rem 0;
  font-size: .75rem;
  color: var(--bs-secondary-color);
}
#hp-erweiterungen #hp-ext-body {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}
#hp-erweiterungen .hp-ext-stage:not(.d-none) {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: auto;
}
#hp-erweiterungen #hp-ext-xelion {
  padding: .85rem;
}
#hp-erweiterungen #hp-ext-xelion #main-wrapper {
  height: 100%;
  min-height: 0;
}
#hp-erweiterungen #hp-ext-xelion #user-state-panel {
  flex: 0 0 auto;
}
#hp-erweiterungen #hp-ext-xelion .user-state-item .btn {
  transition: color .45s ease, border-color .45s ease, background-color .45s ease;
}
#hp-erweiterungen #hp-ext-xelion .user-state-item .btn-outline-danger[data-role="xelion-phone"] {
  animation: hp-ext-oncall 1.6s ease-in-out infinite;
}
#hp-erweiterungen #hp-ext-schreiben,
#hp-erweiterungen #hp-ext-uebersicht,
#hp-erweiterungen #hp-ext-am-kontakt,
#hp-erweiterungen #hp-ext-admin,
#hp-erweiterungen #hp-ext-vorlage {
  padding: .85rem;
}
#hp-erweiterungen #hp-ext-vorlage .hp-ext-modal-stage {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100%;
  background: color-mix(in srgb, var(--bs-emphasis-color) 18%, transparent);
  padding: 1rem;
  border-radius: .75rem;
}
/* CRM-Fenster (index/modal.tpl: .modal.window-modal.modal-lg) im Panel statt fest über der Seite */
#hp-erweiterungen #hp-ext-vorlage .hp-ext-modal-inline {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  z-index: auto;
}
#hp-erweiterungen #hp-ext-vorlage .modal-dialog {
  width: min(920px, 100%);
  max-width: none;
  max-height: 100%;
  margin: 0 auto !important;
}
#hp-erweiterungen #hp-ext-admin #ac-view {
  height: 100%;
}
#hp-erweiterungen #hp-ext-admin .cin-user-report-member-list,
#hp-erweiterungen #hp-ext-vorlage .cin-user-report-member-list {
  max-height: 11rem;
}
@keyframes hp-ext-oncall {
  0%, 100% { box-shadow: 0 0 0 0 rgb(220 53 69 / .45); }
  50% { box-shadow: 0 0 0 .35rem rgb(220 53 69 / 0); }
}
#hp-erweiterungen #hp-ext-xelion #contact-left-panel {
  width: 100%;
  transition: width .6s cubic-bezier(.22, 1, .36, 1);
}
#hp-erweiterungen #hp-ext-xelion #contact-left-panel.hp-ext-split {
  width: 42%;
  flex: 0 0 42%;
}
#hp-erweiterungen #hp-ext-xelion .workspace-right-panel.is-hidden {
  display: none !important;
}
#hp-erweiterungen #hp-ext-xelion #hp-ext-kontakt-host .row > .col-12.col-lg-7,
#hp-erweiterungen #hp-ext-xelion #hp-ext-kontakt-host .row > .col-12.col-lg-5 {
  flex: 0 0 100%;
  max-width: 100%;
}
#hp-erweiterungen #hp-ext-xelion #xelion-popup-container {
  margin: 0 1rem 1rem 0;
}
/* Im schmalen Demo-Fenster läge das Konferenz-Banner unter dem Popup; im CRM ist die Fläche breiter. */
#hp-erweiterungen #hp-ext-xelion #xelion-conference-banner {
  left: 1rem !important;
  transform: none !important;
}
#hp-erweiterungen #hp-ext-liste .extension-card-icon {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
#hp-erweiterungen #hp-ext-liste .extension-card-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#hp-erweiterungen #hp-ext-liste .extensions-item[role="button"] {
  cursor: pointer;
}
#hp-erweiterungen #hp-ext-liste .extensions-item[role="button"] .card:hover {
  box-shadow: 0 10px 28px rgb(27 54 97 / .12);
}
#hp-erweiterungen #hp-ext-liste .extension-actions .icon-link::before {
  content: none;
}
#hp-erweiterungen #hp-ext-liste .extension-upload-zone {
  border: 2px dashed var(--bs-border-color);
}
#hp-erweiterungen #hp-ext-schreiben .cin-user-report-editor,
#hp-erweiterungen #hp-ext-uebersicht .cin-user-report-hub {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  border-radius: 0;
}
#hp-erweiterungen #hp-ext-schreiben {
  padding: 1rem;
}
/* JTL-Wawi: Ansichten wie im CRM-Hauptbereich (#main); Fenster liegen über der Ansicht statt über der Seite */
#hp-erweiterungen .hp-jtl-stage {
  padding: 1rem;
}
#hp-erweiterungen .hp-jtl-stage [data-role="list"] [role="button"] {
  cursor: pointer;
}
#hp-erweiterungen .hp-jtl-modal {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: auto;
  height: auto;
  padding: 1rem;
  overflow: hidden;
  background: rgb(0 0 0 / .5);
}
#hp-erweiterungen .hp-jtl-modal .modal-dialog {
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
#hp-erweiterungen #hp-ext-schreiben .cin-user-report-editor {
  border-radius: .75rem;
}
#termin .fg,
#kontakte .fg,
#teamchat .fg,
#erweiterungen .fg,
#ticket .fg,
#projekt .fg,
#aufgabe .fg {
  align-items: stretch;
  place-items: center;
  overflow: visible;
}
.live-modal.is-comm-detail,
.live-modal.is-contact-detail {
  place-items: center;
}
.live-modal.is-comm-detail .mail-detail-shell,
.live-modal.is-contact-detail .contact-detail-shell {
  width: min(1200px, calc(100vw - 2rem));
  height: calc(100dvh - 2rem);
  max-height: calc(100dvh - 2rem);
  max-width: none;
}
.live-modal.is-comm-detail .mail-detail-shell .modal-body,
.live-modal.is-contact-detail .contact-detail-shell .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background-color: var(--cin-surface);
  padding: 0 !important;
}
.live-modal.is-comm-detail #detail-view,
.live-modal.is-contact-detail .contact-detail {
  height: 100%;
  min-height: 0;
}
.spotlight > .modal-card,
.spotlight .cal-deck-slot.is-front > .modal-card,
.spotlight [data-tpl] > .modal-card {
  max-height: calc(100vh - 7.4rem);
}

.modal-card {
  height: 100%;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  display: flex; flex-direction: column;
  overflow: hidden;
  --bs-modal-padding: 1.25rem;
  --bs-modal-header-padding: 1.15rem 1.4rem;
  --bs-modal-header-padding-x: 1.4rem;
  --bs-modal-header-padding-y: 1.15rem;
  --bs-modal-footer-gap: .75rem;
}
.modal-card .modal-header,
.modal-card .modal-footer {
  flex: 0 0 auto;
  background: #f3f4f6 !important;
}
.modal-card .modal-header {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 1.15rem 1.4rem !important;
  gap: .75rem;
}
.modal-card .modal-header .modal-title {
  flex: 1 1 auto;
  min-width: 0;
}
.modal-card .modal-header .btn-close {
  margin-left: auto !important;
  margin-right: 0 !important;
  flex: 0 0 auto;
  padding: .45rem !important;
}
.modal-card .modal-body {
  flex: 1;
  overflow: auto;
  background: #f3f4f6 !important;
  padding: 1.15rem 1.4rem !important;
}
.modal-card .modal-body.p-0 {
  padding: 0 0 0.25rem !important;
}
.modal-card .modal-body.p-0 > .nav-line,
.modal-card .modal-body.p-0 > .d-flex {
  padding-left: 1.4rem !important;
  padding-right: 1.4rem !important;
}
.modal-card .modal-body.p-0 > .p-3,
.modal-card .modal-body.p-0 > div.p-3 {
  padding: 1.15rem 1.4rem !important;
}
.modal-card .modal-footer {
  padding: 1rem 1.4rem 1.2rem !important;
  gap: .65rem !important;
}
.modal-card .modal-footer > * {
  margin: 0 !important;
}
.modal-card:not(.mail-detail-shell):not(.contact-detail-shell) .nav-line .nav-link { pointer-events: none; }
.mail-detail-shell .nav-line .nav-link,
.contact-detail-shell .nav-line .nav-link { pointer-events: auto; }
.hp-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  border: 1px solid #d7dbe2; background: #fff; border-radius: 999px;
  padding: .15rem .65rem; font-size: .8rem;
}
.hp-option-dd {
  position: relative;
  width: 100%;
}
.hp-option-toggle {
  display: flex !important;
  align-items: center;
  width: 100%;
  text-align: left;
}
.hp-option-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  min-width: 13.5rem;
  padding: .35rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 12px 32px rgb(15 23 42 / .12);
}
.hp-option-menu button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: .5rem;
  border: 0;
  background: transparent;
  padding: .45rem .6rem;
  border-radius: 6px;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.hp-option-menu button:hover,
.hp-option-menu button.hp-tour-scan {
  background: #eef1f6;
}
.hp-option-menu button.hp-tour-scan {
  box-shadow: inset 0 0 0 1px #1b3661;
}
.hp-option-menu button.is-gated,
.hp-option-menu button:disabled {
  opacity: .42 !important;
  filter: grayscale(.5);
  cursor: not-allowed !important;
}
.hp-option-menu button.is-gated.hp-tour-scan,
.hp-option-menu button:disabled.hp-tour-scan {
  opacity: .62 !important;
  background: #f3f4f6;
}
.hp-tour-float-menu {
  position: fixed !important;
  z-index: 2085 !important;
  right: auto !important;
  min-width: 13.5rem;
  pointer-events: auto !important;
}
.task-header-context .comm-item-type-badge {
  display: inline-flex !important;
  align-items: center;
  font-weight: 600;
}

.hero-stage {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 1.25rem;
  position: relative;
  width: min(1100px, 92vw);
  height: 100%;
  min-height: 0;
  margin: 0 auto;
  overflow: visible;
  transition: justify-content .45s cubic-bezier(.16,1,.3,1), gap .35s ease;
}
.hero-stage.is-open,
.hero-stage.is-clear {
  gap: .4rem;
}
.fan {
  display: flex; gap: .7rem; flex-wrap: wrap; justify-content: center;
  max-width: 54rem;
  flex: 0 0 auto;
  overflow: visible;
  max-height: 8rem;
  transition: max-height .5s .9s cubic-bezier(.22,1,.36,1),
    margin .5s .9s cubic-bezier(.22,1,.36,1),
    opacity .35s .85s ease;
}
.fan.is-leaving {
  max-height: 0;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.hero-stage.is-open {
  justify-content: flex-start;
  padding-top: .4rem;
}
.hero-stage.is-clear {
  justify-content: center;
  padding-top: 0;
}
.plus-slot {
  flex: 0 0 auto;
  height: var(--plus-slot-h, 8.2rem);
  width: 8.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.hero-stage.is-open .plus-slot,
.hero-stage.is-clear .plus-slot {
  height: 0;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  opacity: 0;
}
.plus-wrap {
  position: relative;
  z-index: 8;
  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
}
.plus-wrap.is-on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition: opacity .85s ease, transform .9s cubic-bezier(.16, 1, .3, 1);
}
.plus-wrap.is-fly {
  position: fixed;
  z-index: 55;
  margin: 0;
  pointer-events: auto;
  overflow: visible;
  width: max-content;
  height: max-content;
}
.hp-nav-end .plus-wrap {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
}
.plus-wrap.is-gone {
  opacity: 0;
  pointer-events: none;
}
.plus-neu {
  position: relative;
  z-index: 2;
  isolation: isolate;
  overflow: hidden;
  width: 8.2rem; height: 8.2rem; border-radius: 50%;
  border: 0; background: #1b3661; color: #fff;
  font-size: 1.2rem; font-weight: 700;
  box-shadow: none;
  cursor: pointer;
  touch-action: manipulation;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
  transform: scale(var(--plus-sc, 1));
  transition: width .5s cubic-bezier(.16,1,.3,1), height .5s cubic-bezier(.16,1,.3,1),
    gap .3s, transform .2s cubic-bezier(.16,1,.3,1);
}
.plus-neu i { font-size: 1.7rem; transition: font-size .35s; }
.plus-neu .plus-label {
  display: block;
  overflow: hidden;
  max-height: 1.4rem;
  opacity: 1;
  transition: opacity .22s, max-height .35s;
}
.plus-neu.is-icon {
  width: 2.55rem; height: 2.55rem;
  border-radius: 10px;
  gap: 0;
  box-shadow: none;
  transform: none;
}
.plus-neu.is-icon .plus-label { opacity: 0; max-height: 0; }
.plus-neu.is-icon i { font-size: 1.2rem; }
.plus-neu.is-icon:hover { transform: scale(1.06); }
button.plus-neu.hp-end-btn {
  width: 8.2rem !important;
  height: 8.2rem !important;
  border-radius: 14px !important;
  padding: .85rem !important;
  flex-direction: row;
  gap: 0;
  overflow: hidden;
  transform: none;
}
button.plus-neu.hp-end-btn img {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
}
.plus-menu {
  position: absolute; left: 50%; top: calc(100% + .7rem);
  transform: translateX(-50%) translateY(8px);
  min-width: 13.5rem;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
  box-shadow: 0 18px 40px rgb(0 0 0 / .12);
  padding: .4rem;
  opacity: 0; pointer-events: none;
  z-index: 6;
}
.plus-menu.is-on {
  opacity: 1; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: .35s cubic-bezier(.16,1,.3,1);
}
.plus-menu button {
  display: flex; align-items: center; gap: .65rem;
  width: 100%; border: 0; background: transparent;
  padding: .55rem .7rem; border-radius: 8px;
  font-weight: 600; text-align: left; cursor: pointer;
}
.plus-menu button:hover { background: #eef1f6; }
.plus-menu i { color: #1b3661; width: 1.1rem; }

.fan-chip {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 999px;
  padding: .9rem 1.25rem; font-weight: 600;
  box-shadow: 0 12px 32px rgb(0 0 0 / .07);
  opacity: 0; transform: translateY(48px) scale(.88);
  cursor: pointer;
  position: relative;
  z-index: 1;
  pointer-events: none;
  transition:
    opacity .55s cubic-bezier(.22,1,.36,1),
    transform .55s cubic-bezier(.22,1,.36,1);
}
.fan-chip.is-on {
  opacity: 1; transform: none;
  pointer-events: auto;
}
.fan-chip.is-on.is-out {
  pointer-events: none;
  transition: none;
  animation: fan-chip-click-out .7s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: var(--out-delay, 0ms);
}
@keyframes fan-chip-click-out {
  0% { opacity: 1; transform: scale(1); }
  28% { opacity: 1; transform: scale(.91); }
  48% { opacity: 1; transform: scale(1.04); }
  100% { opacity: 0; transform: scale(1); }
}
.fan-chip i { color: #1b3661; margin-right: .4rem; }
.fan-chip.is-press, .fan-chip.is-hot {
  outline: 2px solid #1b3661;
  transform: scale(1.04);
}
.fan-chip.is-on.is-squash {
  outline: 3px solid #1b3661;
  transition: none;
  transform: scale(var(--sx, 1), var(--sy, 1));
}

.btn-crm-glow {
  --BG_color: #ffffff;
  --color: #1b3661;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
  color: var(--color);
  isolation: isolate;
  overflow: visible;
}
.btn-crm-glow .fan-chip-face {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 11;
  background: var(--BG_color);
  border-radius: 999px;
  padding: .9rem 1.25rem;
  box-shadow: 0 12px 32px rgb(0 0 0 / .07);
}
.btn-crm-glow:before,
.btn-crm-glow:after {
  content: "";
  position: absolute;
  left: -2px;
  top: -2px;
  border-radius: 999px;
  background: linear-gradient(
    45deg,
    #1b3661, #2a4875, #5b8def, #5B4DFF,
    #1b3661, #f59e0b, #2a4875, #5b8def,
    #152b4d, #5B4DFF, #1b3661, #2a4875
  );
  background-size: 400%;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  z-index: -1;
  opacity: 0;
  animation: none;
}
.btn-crm-glow.is-glow:before,
.btn-crm-glow.is-glow:after {
  opacity: 1;
  animation: crm-glow-move 18s linear infinite;
}
.btn-crm-glow:after {
  filter: blur(22px);
}
@keyframes crm-glow-move {
  0% { background-position: 0 0; }
  50% { background-position: 400% 0; }
  100% { background-position: 0 0; }
}

.js-sla-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  margin: 0 0 .15rem;
  transition: grid-template-rows .28s cubic-bezier(.16,1,.3,1), opacity .22s ease, margin .22s ease;
}
.js-sla-panel > * { overflow: hidden; min-height: 0; }
.js-sla-panel.is-on {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-bottom: 1rem;
}
.ticket-sla-level.is-gold {
  color: #c9a227 !important;
  border-color: #c9a227 !important;
  background: #fff6d9 !important;
}

#spot-hero {
  width: min(1180px, 90vw);
  flex: 1 1 0%;
  min-height: 0;
  height: auto;
  max-height: calc(100vh - 8.2rem);
  overflow: visible;
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
#spot-hero.hp-task-stage .cal-deck-slot { display: none; }
#spot-hero .modal-card {
  min-height: 0;
  height: 100%;
  max-height: calc(100vh - 11.5rem);
}
#spot-hero .hp-view-pane[data-view="detail"] .modal-card {
  max-height: calc(100vh - 11.5rem);
}

.hp-view-tabs-row {
  flex: 0 0 auto;
  align-self: center;
  z-index: 3;
  position: relative;
}
.hp-view-tabs {
  flex: 0 0 auto;
  z-index: 2;
  box-shadow: 0 8px 22px rgb(27 54 97 / .14);
}
.hp-tour-btn.btn-crm-glow {
  width: 2.7rem !important;
  height: 2.7rem !important;
  flex: 0 0 auto;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  --BG_color: #ffffff;
  color: #1b3661 !important;
  box-shadow: none;
  cursor: pointer;
  isolation: isolate;
  overflow: visible;
  pointer-events: auto !important;
}
.hp-tour-btn.btn-crm-glow .fan-chip-face {
  width: 2.7rem;
  height: 2.7rem;
  padding: 0 !important;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  color: #1b3661;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 1.45rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  box-shadow: none;
  pointer-events: none;
  overflow: visible;
  animation: hp-tour-face-beat 2.8s cubic-bezier(.16,1,.3,1) infinite !important;
}
.hp-tour-btn.btn-crm-glow:before,
.hp-tour-btn.btn-crm-glow:after {
  left: -2px !important;
  top: -2px !important;
  width: calc(100% + 4px) !important;
  height: calc(100% + 4px) !important;
  border-radius: 999px;
  opacity: 1 !important;
  pointer-events: none !important;
  animation: crm-glow-move 18s linear infinite !important;
}
.hp-tour-btn.btn-crm-glow:after {
  left: -6px !important;
  top: -6px !important;
  width: calc(100% + 12px) !important;
  height: calc(100% + 12px) !important;
  filter: blur(9px);
  opacity: .55 !important;
}
.hp-tour-pulse-ring {
  position: absolute !important;
  inset: -2px !important;
  border-radius: 999px !important;
  border: 1px solid #5b8def !important;
  pointer-events: none !important;
  z-index: 0 !important;
  animation: hp-tour-pulse-ring 3.6s cubic-bezier(.16,1,.3,1) infinite !important;
}
.hp-tour-btn.is-on .hp-tour-pulse-ring,
body.is-hp-tour .hp-tour-pulse-ring {
  animation: none !important;
  opacity: 0 !important;
  transform: none !important;
}
@keyframes hp-tour-pulse-ring {
  0% { transform: scale(1); opacity: .6; }
  55% { transform: scale(3.7); opacity: 0; }
  100% { transform: scale(3.7); opacity: 0; }
}
@keyframes hp-tour-face-beat {
  0%, 78%, 100% { transform: scale(1); }
  10% { transform: scale(.98); }
  20% { transform: scale(1.02); }
  30% { transform: scale(1); }
}
.hp-tour-btn.btn-crm-glow:hover .fan-chip-face,
.hp-tour-btn.btn-crm-glow:focus-visible .fan-chip-face,
.hp-tour-btn.btn-crm-glow.is-on .fan-chip-face {
  background: #ffffff;
  color: #1b3661;
  border-color: transparent;
  box-shadow: none;
}
.hp-tour-btn--toolbar.btn-crm-glow,
.hp-tour-btn--toolbar.btn-crm-glow .fan-chip-face {
  width: 2.35rem !important;
  height: 2.35rem !important;
}
.hp-tour-btn--toolbar.btn-crm-glow .fan-chip-face {
  font-size: 1.2rem !important;
}
#hp-tour-aufgaben,
#hp-tour-projekt,
#hp-tour-kalender,
#hp-tour-postfach,
#hp-tour-kontakte,
#hp-tour-teamchat,
#hp-tour-erweiterungen {
  position: fixed !important;
  z-index: 2200 !important;
  margin: 0 !important;
  opacity: 0;
  pointer-events: none !important;
  transition: opacity .45s ease;
}
#hp-tour-aufgaben.is-in,
#hp-tour-projekt.is-in,
#hp-tour-kalender.is-in,
#hp-tour-postfach.is-in,
#hp-tour-kontakte.is-in,
#hp-tour-teamchat.is-in,
#hp-tour-erweiterungen.is-in {
  opacity: 1;
  pointer-events: auto !important;
}
.hp-tour-more {
  color: #1b3661 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  text-underline-offset: 0.18em;
}
.hp-tour-more:hover,
.hp-tour-more:focus-visible {
  text-decoration: underline !important;
}
.hp-tag-style-label {
  min-width: 3.6rem;
  text-align: right;
  font-variant: small-caps;
  letter-spacing: .04em;
  opacity: 0;
}
body.is-hp-tour-projekt .hp-tag-style-label {
  opacity: 1;
}
.hp-tour-tooltip {
  max-width: min(28rem, calc(100vw - 1.5rem));
  width: min(28rem, calc(100vw - 1.5rem));
}
/* Titel wie im CRM (crm.css .crm-tour-title): Seitenschrift, fett */
.hp-tour-tooltip .crm-tour-title {
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}
/* Der Hinweiskasten des Abschnitts darf das Tour-Ziel nicht überdecken */
body.is-hp-tour .copy {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.hp-tour-nudge {
  animation: hp-tour-nudge .65s ease;
  box-shadow: 0 0 0 3px rgb(201 162 39 / .4) !important;
}
@keyframes hp-tour-nudge {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.08); }
}
.hp-tour-assignee-new.is-in {
  animation: hp-tour-row-in .55s cubic-bezier(.16,1,.3,1);
}
@keyframes hp-tour-row-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}
/* Tour zeigt den Reiter so, wie das CRM ihn beim Hover zeigt (crm.css .nav.nav-line .nav-link:hover) */
#spot-projekt .nav-link.hp-tour-scan {
  color: var(--cin-foreground);
  border-bottom-color: var(--bs-primary);
  border-bottom-width: 1px;
}
.hp-tour-proj-member.is-in {
  animation: hp-tour-row-in .55s cubic-bezier(.16,1,.3,1);
}
body.is-hp-tour-aufgaben .task-kanban,
body.is-hp-tour-aufgaben .task-kanban-cards,
body.is-hp-tour-aufgaben .task-gantt,
body.is-hp-tour-aufgaben .task-gantt-scroll {
  overflow: visible !important;
}
body.is-hp-tour-aufgaben #spot-hero .modal-body,
body.is-hp-tour-projekt #spot-projekt .modal-body {
  overflow: auto !important;
}
body.is-hp-tour-aufgaben #aufgabe .scene-sticky,
body.is-hp-tour-aufgaben #spot-hero {
  opacity: 1 !important;
}
body.is-hp-tour-aufgaben #spot-hero {
  transform: none !important;
}
body.is-hp-tour-projekt #projekt .scene-sticky,
body.is-hp-tour-projekt #spot-projekt {
  opacity: 1 !important;
}
body.is-hp-tour-projekt #spot-projekt {
  transform: none !important;
}
body.is-hp-tour-kalender #termin .scene-sticky,
body.is-hp-tour-kalender #hp-calendar {
  opacity: 1 !important;
}
body.is-hp-tour-kalender #hp-calendar {
  transform: none !important;
  overflow: visible !important;
}
body.is-hp-tour-kalender #termin .copy {
  opacity: 0 !important;
  pointer-events: none !important;
}
body.is-hp-tour-kalender #hp-calendar .tab-content {
  overflow: auto !important;
}
body.is-hp-tour-kalender .contextmenu-root {
  z-index: 2300 !important;
}
body.is-hp-tour-kalender .live-backdrop.is-on {
  display: none !important;
}
body.is-hp-tour-kalender .live-modal,
body.is-hp-tour-kalender .live-modal.is-on {
  transition: none !important;
  transform: none !important;
}
body.is-hp-tour-kalender .live-modal.is-on {
  opacity: 1 !important;
}
body.is-hp-tour-kalender .live-modal .hp-event-modal {
  overflow: hidden;
  flex-direction: column;
}
body.is-hp-tour-kalender #cin-calendar .wc-select-calendar-view .dropdown-menu.show {
  z-index: 2300;
}
body.is-hp-tour-postfach #ticket .scene-sticky,
body.is-hp-tour-postfach #hp-postfach {
  opacity: 1 !important;
}
body.is-hp-tour-postfach #hp-postfach {
  transform: none !important;
  overflow: visible !important;
}
body.is-hp-tour-postfach #ticket .copy {
  opacity: 0 !important;
  pointer-events: none !important;
}
body.is-hp-tour-postfach #hp-postfach .list {
  overflow: auto !important;
}
body.is-hp-tour-postfach .contextmenu-root {
  z-index: 2300 !important;
}
body.is-hp-tour-postfach .live-backdrop.is-on {
  display: none !important;
}
body.is-hp-tour-postfach .live-modal,
body.is-hp-tour-postfach .live-modal.is-on {
  transition: none !important;
  transform: none !important;
}
body.is-hp-tour-postfach .live-modal.is-on {
  opacity: 1 !important;
}
body.is-hp-tour-postfach .live-modal .mail-detail-shell {
  overflow: hidden;
  flex-direction: column;
}
body.is-hp-tour-postfach #hp-comm-filter-menu.show {
  z-index: 2300;
}
body.is-hp-tour-postfach #hp-postfach.is-split #communication-left-panel {
  transition: width 2.2s cubic-bezier(.25, 1, .35, 1) !important;
}
body.is-hp-tour-postfach #hp-postfach.is-split .communication-main {
  min-height: 0;
}
body.is-hp-tour-postfach #hp-postfach.is-split .communication-right-panel:not(.is-hidden) {
  display: flex !important;
  flex: 1 1 auto;
  min-width: 0;
}
body.is-hp-tour-postfach #hp-postfach.is-split #resize-handle:not(.d-none) {
  z-index: 3;
  flex-shrink: 0;
}
body.is-hp-tour-postfach #hp-postfach.is-split #hp-comm-split-host:not(.d-none) {
  display: flex !important;
}
body.is-hp-tour-kontakte #kontakte .scene-sticky,
body.is-hp-tour-kontakte #hp-kontakte {
  opacity: 1 !important;
}
body.is-hp-tour-kontakte #hp-kontakte {
  transform: none !important;
  overflow: visible !important;
}
body.is-hp-tour-kontakte #kontakte .copy {
  opacity: 0 !important;
  pointer-events: none !important;
}
body.is-hp-tour-kontakte #contact-detail-content .tab-content {
  overflow: auto !important;
}
body.is-hp-tour-kontakte #contact-left-panel tbody.list {
  overflow: auto !important;
}
body.is-hp-tour-kontakte #hp-kontakte #contact-left-panel.is-split-anim {
  transition: width .9s cubic-bezier(.22, 1, .36, 1) !important;
}
body.is-hp-tour-kontakte.is-tour-split-move .crm-tour-highlight,
body.is-hp-tour-kontakte.is-tour-split-move .crm-tour-backdrop,
body.is-hp-tour-teamchat.is-tour-split-move .crm-tour-highlight,
body.is-hp-tour-teamchat.is-tour-split-move .crm-tour-backdrop {
  opacity: 0 !important;
}
body.is-hp-tour-teamchat #teamchat .scene-sticky,
body.is-hp-tour-teamchat #hp-teamchat {
  opacity: 1 !important;
}
body.is-hp-tour-teamchat #hp-teamchat {
  transform: none !important;
  overflow: visible !important;
}
body.is-hp-tour-teamchat #teamchat .copy {
  opacity: 0 !important;
  pointer-events: none !important;
}
body.is-hp-tour-erweiterungen #erweiterungen .scene-sticky,
body.is-hp-tour-erweiterungen #hp-erweiterungen {
  opacity: 1 !important;
}
body.is-hp-tour-erweiterungen #hp-erweiterungen {
  transform: none !important;
  overflow: visible !important;
}
body.is-hp-tour-erweiterungen #erweiterungen .copy {
  opacity: 0 !important;
  pointer-events: none !important;
}
body.is-hp-tour-erweiterungen #hp-ext-body {
  overflow: auto !important;
}
#tc-create-poll-modal.show {
  display: block !important;
  z-index: 2300 !important;
}
#tc-create-poll-modal .modal-dialog {
  z-index: 2301;
}
.tc-poll-modal-backdrop {
  z-index: 2290 !important;
}
body.is-hp-tour-teamchat #hp-teamchat #team-chat-left-panel.is-split-anim {
  transition: width .9s cubic-bezier(.22, 1, .36, 1) !important;
}
body.is-hp-tour-teamchat #hp-teamchat #team-chat-main {
  min-height: 0;
}
body.is-hp-tour-teamchat #hp-teamchat #team-chat-right-panel {
  display: flex !important;
  flex: 1 1 auto;
  min-width: 0;
}
body.is-hp-tour-teamchat #tc-messages,
body.is-hp-tour-teamchat #tc-conversations-scroll {
  overflow: auto !important;
}
body.is-hp-tour-kontakte #hp-kontakte #contact-list-view {
  min-height: 0;
}
body.is-hp-tour-kontakte #hp-kontakte #contact-right-panel {
  display: flex !important;
  flex: 1 1 auto;
  min-width: 0;
}
body.is-hp-tour-kontakte #hp-kontakte #contact-resize-handle:not(.d-none) {
  z-index: 3;
  flex-shrink: 0;
}
body.is-hp-tour-kontakte .contextmenu-root {
  z-index: 2300 !important;
}
body.is-hp-tour-kontakte .live-backdrop.is-on {
  display: none !important;
}
body.is-hp-tour-kontakte .live-modal,
body.is-hp-tour-kontakte .live-modal.is-on {
  transition: none !important;
  transform: none !important;
}
body.is-hp-tour-kontakte .live-modal.is-on {
  opacity: 1 !important;
}
#hp-calendar .nav-link.hp-tour-scan,
#cin-calendar [data-appointment].hp-tour-scan,
#cin-calendar [data-view].hp-tour-scan,
#timeline-container .timeline-row.hp-tour-scan,
#vacation-overview-container .hp-tour-scan,
.contextmenu-item.hp-tour-scan {
  box-shadow: inset 0 0 0 1px #1b3661, 0 0 0 3px rgb(201 162 39 / .35);
  background: #eef1f6;
}
#cin-calendar [data-appointment].hp-tour-scan {
  position: relative;
  z-index: 4;
}
body.is-hp-tour-aufgaben .task-kanban-card[data-hp-kanban="slide"] {
  position: relative;
  z-index: 4;
}
body.is-hp-tour { cursor: default; }
.hp-view-pane {
  display: none;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}
.hp-view-pane.is-on {
  display: flex;
  flex-direction: column;
}
.hp-view-pane[data-view="detail"] > [data-tpl] {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.hp-view-pane[data-view="detail"] > [data-tpl] > .modal-card {
  flex: 1 1 auto;
}

/* Kanban/Gantt sind 1:1 das CRM-Markup (task-kanban-*, task-gantt-*) — crm.css macht die Optik.
   Hier nur die Bühnen-Höhe, damit die Panes wie die Live-Panels den Rest der Fläche füllen. */
.hp-view-pane[data-view="kanban"] .task-kanban,
.hp-view-pane[data-view="gantt"] .task-gantt {
  max-height: calc(100vh - 11.5rem);
  min-height: min(24rem, calc(100vh - 14rem));
}
.hp-view-pane[data-view="kanban"] .task-kanban {
  filter: drop-shadow(0 18px 40px rgb(27 54 97 / .14));
}

.hp-bezug-pop {
  position: absolute;
  left: calc(50% + min(590px, 45vw) + .7rem);
  top: 48%;
  transform: translateY(-42%);
  width: min(16.4rem, 20vw);
  padding: 1rem 1.05rem;
  border-radius: 14px;
  border: 1px solid rgb(27 54 97 / .12);
  background: #fff;
  box-shadow: 0 18px 40px rgb(27 54 97 / .14);
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease, transform .5s cubic-bezier(.16,1,.3,1);
  z-index: 3;
}
.hp-bezug-pop.is-on {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%);
}
.hp-bezug-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .5rem;
  padding-right: 1.6rem;
}
.hp-bezug-spine { display: none; }
.hp-bezug-pop .k {
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #7a7368;
  font-weight: 600;
  margin-bottom: .35rem;
}
.hp-bezug-pop h3 {
  margin: 0 0 .45rem !important;
  font-size: 1.05rem !important;
  color: #1a1714 !important;
  font-weight: 700 !important;
}
.hp-bezug-pop p {
  margin: 0 0 .75rem !important;
  font-size: .86rem !important;
  color: #5c564c !important;
  line-height: 1.4 !important;
}
.hp-bezug-pills {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  align-items: flex-start;
  margin-bottom: .65rem;
}
.hp-bezug-panel { display: none; }
.hp-bezug-panel.is-on { display: block; }

/* Zu wenig Platz rechts neben der Aufgabe: aufgeklappt am Fensterrand statt abgeschnitten */
.hp-bezug-pop.is-tight:not(.is-docked) {
  position: fixed;
  left: auto;
  right: 12px;
  width: min(16.4rem, calc(100vw - 24px));
  z-index: 30;
}
.hp-bezug-pop.is-docked,
.hp-bezug-pop.is-docked.is-on {
  position: fixed !important;
  left: auto !important;
  right: 0 !important;
  top: 50% !important;
  bottom: auto !important;
  width: 2.4rem !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: translateY(-50%) !important;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .4rem;
  overflow: visible;
  z-index: 30;
}
.hp-bezug-pop.is-docked .hp-bezug-panel,
.hp-bezug-pop.is-docked .hp-bezug-panel[hidden] {
  display: flex !important;
  flex-direction: column;
  position: relative;
  flex: 0 0 7.4rem;
  width: 2.4rem;
  height: 7.4rem;
  max-height: 7.4rem;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border-radius: 14px 0 0 14px;
  border: 1px solid rgb(27 54 97 / .12);
  border-right: 0;
  background: #eef1f6;
  box-shadow: none;
  transform: none;
  cursor: pointer;
  transition: width .22s cubic-bezier(.16,1,.3,1), background .2s ease, box-shadow .2s ease;
}
.hp-bezug-pop.is-docked .hp-bezug-panel:hover,
.hp-bezug-pop.is-docked .hp-bezug-panel:focus-within {
  width: 3.15rem;
  background: #fff;
  z-index: 1;
  box-shadow: -8px 6px 18px rgb(27 54 97 / .1);
}
.hp-bezug-pop.is-docked .hp-bezug-head,
.hp-bezug-pop.is-docked h3,
.hp-bezug-pop.is-docked p,
.hp-bezug-pop.is-docked .hp-bezug-pills,
.hp-bezug-pop.is-docked .hp-bezug-list,
.hp-bezug-pop.is-docked .hp-bezug-legend,
.hp-bezug-pop.is-docked .hp-bezug-min {
  display: none !important;
}
.hp-bezug-pop.is-docked .hp-bezug-spine {
  display: flex;
  position: relative;
  inset: auto;
  width: 2.4rem;
  height: 100%;
  margin-left: auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  writing-mode: horizontal-tb;
  transform: none;
  background: transparent;
  border-radius: 0;
  color: #1b3661;
}
.hp-bezug-spine-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: .68rem;
  font-weight: 700;
}

.hp-bezug-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .28rem;
  font-size: .8rem;
  color: #5c564c;
}
.hp-bezug-legend {
  margin: 0 0 .65rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .32rem;
  font-size: .8rem;
  color: #3f3a33;
  font-weight: 600;
}
.hp-bezug-legend li,
.hp-bezug-list li {
  display: flex;
  align-items: center;
  gap: .45rem;
}
.hp-bezug-swatch {
  width: .85rem;
  height: .55rem;
  border-radius: 3px;
  flex-shrink: 0;
}
.hp-bezug-swatch.is-conflict {
  background: #9ca3af;
  box-shadow: 0 0 0 2px #dc2626;
}
.hp-bezug-line {
  width: .95rem;
  height: 2px;
  border-radius: 2px;
  flex-shrink: 0;
}
.hp-bezug-line.is-thick { height: 3px; }
.hp-bezug-line.is-dash {
  height: 0;
  border-top: 2px dashed #dc2626;
  background: none !important;
}

/* Unteraufgaben/Abhängigkeiten/Erinnerungen kommen aus crm.css — hier nur die langsame
   SLA-Progress-Animation der Demo (First-run Eingehalten → Gefährdet → Verletzt). */
#aufgabe .js-sla-fill {
  transition: width 1.5s cubic-bezier(.33,1,.68,1), background-color .9s ease;
}
#aufgabe .js-sla-summary {
  transition: border-color .9s ease, background-color .9s ease;
}

@media (max-width: 1180px) {
  .hp-tag-board-head { grid-template-columns: 1fr; }
  .hp-tag-toolbar { justify-content: flex-start; }
  .hp-tag-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
  .hp-bezug-pop {
    left: auto;
    right: .5rem;
    top: auto;
    bottom: .5rem;
    transform: none;
    width: min(16rem, 42vw);
  }
  .hp-bezug-pop.is-on { transform: none; }
}

@media (max-width: 767.98px) {
  #hp-bezug-pop { display: none !important; }
}

.stack-stage {
  position: relative;
  width: min(1100px, 90vw);
  height: calc(100vh - 7.6rem);
  max-height: 760px;
}
.stack-card {
  position: absolute; inset: 6% 5%;
  opacity: 0;
  transform: translate3d(70px, 160px, 0) rotateX(10deg) scale(.82);
  filter: drop-shadow(0 24px 50px rgb(27 54 97 / .18));
  pointer-events: none;
}
.stack-card.is-on {
  opacity: 1;
  pointer-events: auto;
  transition: transform .85s cubic-bezier(.16,1,.3,1), opacity .6s ease;
}
.stack-card:nth-child(1).is-on { transform: translate(-8%, 10%) rotate(-3.8deg); z-index: 1; }
.stack-card:nth-child(2).is-on { transform: translate(1%, -3%) rotate(1.1deg); z-index: 2; }
.stack-card:nth-child(3).is-on { transform: translate(11%, 7%) rotate(4.2deg); z-index: 3; }
.stack-card .modal-card { height: 100%; }

.live-backdrop {
  position: fixed; inset: 0; z-index: 70;
  background: rgb(20 18 14 / .32);
  backdrop-filter: blur(12px);
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease;
}
.live-backdrop.is-on { opacity: 1; pointer-events: auto; }
.live-modal {
  position: fixed; inset: 0; z-index: 71;
  display: grid; place-items: center;
  padding: 4.5rem 3vw 3vh;
  opacity: 0; pointer-events: none;
  transform: translate3d(0, 28px, 0) scale(.96);
}
.live-modal.is-on {
  opacity: 1; pointer-events: auto;
  transform: none;
  transition: .5s cubic-bezier(.16,1,.3,1);
}
.live-modal .modal-card {
  width: min(1100px, 90vw);
  height: auto;
  max-height: calc(100vh - 6.5rem);
}
.live-modal .modal-card.hp-event-modal {
  width: min(520px, 92vw);
  height: auto;
  max-height: min(88vh, 860px);
}

.hp-cursor {
  position: fixed; z-index: 80; width: 34px; height: 34px;
  pointer-events: none; opacity: 0;
  filter: drop-shadow(0 2px 4px rgb(0 0 0 / .3));
  transition: opacity .2s, transform .12s;
}
.hp-cursor.is-on { opacity: 1; }
.hp-cursor.is-down {
  transform: scale(.68) rotate(-14deg);
  filter: drop-shadow(0 3px 8px rgb(0 0 0 / .45));
}

.close-card {
  background: #fff; border-radius: 18px; padding: 2.4rem 2.6rem;
  max-width: 38rem; box-shadow: 0 24px 60px rgb(27 54 97 / .12);
  text-align: center; /* Nutzer 15.10.2026: „den ganzen Cardcontent centered“, gilt für alle Seiten */
}
.close-card h2 { font-weight: 700 !important; margin-bottom: .4rem !important; }

/* the card itself stays put — only the Dunkel button animates */
.theme-stage {
  position: relative;
  z-index: 3;
  width: min(26rem, 88vw);
  opacity: 1;
  transform: none;
  filter: drop-shadow(0 28px 60px rgb(27 54 97 / .2));
  pointer-events: auto;
}
.theme-waves {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.theme-menu-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 1.15rem 1.1rem 1.05rem;
  box-shadow: 0 20px 48px rgb(27 54 97 / .12);
}
.theme-menu-card .dropdown-header {
  font-size: .72rem !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #7a7368 !important;
}
.theme-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: .7rem;
  border: 0;
  background: transparent;
  padding: .72rem .85rem;
  border-radius: 10px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  color: inherit;
}
.theme-item:hover { background: #eef1f6; }
.theme-item i { width: 1.15rem; color: #1b3661; }
.theme-item.btn-crm-glow {
  /* the glow layers are absolute; without a local origin they measure
     against .theme-stage and cover the whole card */
  position: relative;
  padding: 0;
  margin: .4rem 0;
  --BG_color: #ffffff;
}
.theme-item.btn-crm-glow .fan-chip-face {
  justify-content: flex-start;
  border-radius: 10px;
  padding: .72rem .85rem;
  gap: .7rem;
  box-shadow: none;
  border: 1px solid #e5e7eb;
}
/* the shared glow is a pill; inside the menu it has to hug the 10px row,
   otherwise the blurred copy balloons over the whole card */
.theme-item.btn-crm-glow:before,
.theme-item.btn-crm-glow:after {
  border-radius: 12px;
  opacity: 0;
  transition: opacity .4s ease;
}
.theme-item.btn-crm-glow:after {
  filter: blur(9px);
}
/* the running gradient border is a hover affordance, not ambient decoration */
.theme-item.btn-crm-glow:hover:before,
.theme-item.btn-crm-glow:focus-visible:before {
  opacity: 1;
  animation: crm-glow-move 18s linear infinite;
}
.theme-item.btn-crm-glow:hover:after,
.theme-item.btn-crm-glow:focus-visible:after {
  opacity: .55;
  animation: crm-glow-move 18s linear infinite;
}
.theme-item.btn-crm-glow:hover,
.theme-item.btn-crm-glow:focus-visible {
  background: transparent;
}
.theme-item.btn-crm-glow:hover .fan-chip-face,
.theme-item.btn-crm-glow:focus-visible .fan-chip-face {
  border-color: transparent;
}
/* hover preview: card and rows already wear the dark theme while the organic
   dark field breathes behind them — the switch is staged, not yet committed */
.theme-menu-card,
.theme-menu-card .dropdown-header,
.theme-item,
.theme-item i,
.theme-item.btn-crm-glow .fan-chip-face {
  transition: background-color .45s ease, border-color .45s ease, color .45s ease;
}
.theme-stage.is-preview .theme-menu-card,
.theme-stage.is-preview .theme-item.btn-crm-glow .fan-chip-face {
  background: #161b22;
  border-color: #30363d;
  color: #e6edf3;
}
.theme-stage.is-preview .theme-menu-card { box-shadow: none; }
.theme-stage.is-preview .theme-menu-card .dropdown-header { color: #8b949e !important; }
.theme-stage.is-preview .theme-item { color: #e6edf3; }
.theme-stage.is-preview .theme-item i { color: #a5b4fc; }
.theme-stage.is-preview .theme-item:hover { background: #1f2937; }
.theme-stage.is-preview .theme-item.btn-crm-glow:hover { background: transparent; }
/* no shadow inside the dark field — it only muddies the flat black */
.theme-stage.is-preview { filter: none; }

.theme-item.is-squash {
  outline: 2px solid #1b3661;
  transform: scale(var(--sx, 1), var(--sy, 1));
}
.theme-item.is-arrival-pulse {
  animation: hp-theme-arrival-pulse .62s cubic-bezier(.16,1,.3,1);
}
@keyframes hp-theme-arrival-pulse {
  0% { transform: scale(1); }
  34% { transform: scale(.94); }
  68% { transform: scale(1.035); }
  100% { transform: scale(1); }
}

html[data-bs-theme="dark"] .hp-logo-light { display: none !important; }
html[data-bs-theme="dark"] .hp-logo-dark { display: block !important; }
html[data-bs-theme="dark"] body {
  background: #0d1117 !important;
  color: #e6edf3;
}
html[data-bs-theme="dark"] .scene-sticky {
  background: #0d1117;
}
#close .scene-sticky {
  background: #fff !important;
}
html[data-bs-theme="dark"] #close .scene-sticky {
  background: #0d1117 !important;
}
html[data-bs-theme="dark"] #close .close-card h2 {
  color: #e6edf3 !important;
}
html[data-bs-theme="dark"] #close .close-card .text-muted,
html[data-bs-theme="dark"] #close .close-card .k {
  color: #9ca3af !important;
}
/* Linkzeile im Abschlussblock, gleich auf allen Seiten (Nutzer 15.10.2026: „Icons genauso, nur kleiner“, „ganz
   minimalistisch – grau, onhover Wechsel in respektive Farbe“; „Shop und Robo hinzufügen, Border entfernen, Grau
   aufhellen, sanftere Transition“): „Sortiment:“ und je Produkt außer der eigenen Seite ein Quadrat wie im Dock der
   Übersicht (Verlauf, Symbol, Kürzel), 48 px, ohne Rand, „Neu“, Spiegelung und Anheben. Ruhend hellgrau, beim
   Überfahren und bei Tastaturfokus in 0,6 s in den Verlauf des Produkts (--p-* und --p2-* oben in :root). */
@property --hp-sq-c { syntax: "<color>"; inherits: true; initial-value: #b9c1cd; }
@property --hp-sq-c2 { syntax: "<color>"; inherits: true; initial-value: #98a2b1; }
.hp-close-mods { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .6rem; }
@media (max-width: 399.98px) { .hp-close-mods { gap: .45rem; } } /* fünf Quadrate in einer Reihe bei 360 px */
.hp-close-mods a { font-weight: 600; }
.hp-close-sq {
  --hp-sq-c: #b9c1cd;
  --hp-sq-c2: #98a2b1;
  display: grid;
  place-items: center;
  align-content: center;
  width: 3rem;
  aspect-ratio: 1;
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgb(255 255 255 / .18), transparent 60%),
    linear-gradient(135deg, var(--hp-sq-c2), var(--hp-sq-c));
  color: #fff !important;
  text-decoration: none !important;
  line-height: 1;
  transition: --hp-sq-c .6s cubic-bezier(.4, 0, .2, 1), --hp-sq-c2 .6s cubic-bezier(.4, 0, .2, 1);
}
.hp-close-sq i { display: block; font-size: 1.35rem; line-height: 1; }
.hp-close-sq span { margin-top: .22rem; font-size: .56rem; font-weight: 700; letter-spacing: .08em; }
html[data-bs-theme="dark"] .hp-close-sq { --hp-sq-c: #4f5a6c; --hp-sq-c2: #364152; }
.hp-close-sq:focus-visible { outline: 2px solid var(--hp-sq-c); outline-offset: 3px; }
@media (hover: hover) {
  .hp-close-sq[data-p="uebersicht"]:hover { --hp-sq-c: #4f7fd1; --hp-sq-c2: #1b3661; }
  .hp-close-sq[data-p="crm"]:hover  { --hp-sq-c: var(--p-crm); --hp-sq-c2: var(--p2-crm); }
  .hp-close-sq[data-p="pos"]:hover  { --hp-sq-c: var(--p-pos); --hp-sq-c2: var(--p2-pos); }
  .hp-close-sq[data-p="wms"]:hover  { --hp-sq-c: var(--p-wms); --hp-sq-c2: var(--p2-wms); }
  .hp-close-sq[data-p="shop"]:hover { --hp-sq-c: var(--p-shop); --hp-sq-c2: var(--p2-shop); }
  .hp-close-sq[data-p="robo"]:hover { --hp-sq-c: var(--p-robo); --hp-sq-c2: var(--p2-robo); }
}
.hp-close-sq[data-p="uebersicht"]:focus-visible { --hp-sq-c: #4f7fd1; --hp-sq-c2: #1b3661; }
.hp-close-sq[data-p="crm"]:focus-visible  { --hp-sq-c: var(--p-crm); --hp-sq-c2: var(--p2-crm); }
.hp-close-sq[data-p="pos"]:focus-visible  { --hp-sq-c: var(--p-pos); --hp-sq-c2: var(--p2-pos); }
.hp-close-sq[data-p="wms"]:focus-visible  { --hp-sq-c: var(--p-wms); --hp-sq-c2: var(--p2-wms); }
.hp-close-sq[data-p="shop"]:focus-visible { --hp-sq-c: var(--p-shop); --hp-sq-c2: var(--p2-shop); }
.hp-close-sq[data-p="robo"]:focus-visible { --hp-sq-c: var(--p-robo); --hp-sq-c2: var(--p2-robo); }
@media (prefers-reduced-motion: reduce) { .hp-close-sq { transition: none; } }
html[data-bs-theme="dark"] .hp-nav {
  background: rgb(13 17 23 / .38);
  border-bottom-color: transparent;
  color: #e6edf3;
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}
html[data-bs-theme="dark"] .hp-mode-btn,
html[data-bs-theme="dark"] .hp-nav .hp-nav-link {
  background: #161b22;
  border-color: #30363d;
  color: #e6edf3;
}
html[data-bs-theme="dark"] .hp-mode-btn:hover,
html[data-bs-theme="dark"] .hp-nav .hp-nav-link:hover { background: #1f2937; color: #e6edf3; }
html[data-bs-theme="dark"] .hp-nav-brand .hp-nav-ver { color: #fff; }
html[data-bs-theme="dark"] .hp-nav-dots > a::before { background: #30363d; }
html[data-bs-theme="dark"] .hp-nav-dots > a.is-active::before,
html[data-bs-theme="dark"] .hp-nav-dots > a.is-hover::before,
html[data-bs-theme="dark"] .hp-nav-dots > a:focus-visible::before { background: #7B6DFF; }
html[data-bs-theme="dark"] .hp-nav-dots > a::after { border-color: #7B6DFF; }
html[data-bs-theme="dark"] .hp-nav-tip { background: #7B6DFF; box-shadow: 0 10px 24px rgb(0 0 0 / .45); }
html[data-bs-theme="dark"] .hp-banner-copy h1 { color: #e6edf3 !important; }
html[data-bs-theme="dark"] .hp-banner-copy p { color: #9ca3af !important; }
html[data-bs-theme="dark"] .hp-slide > img {
  background: #0d1117;
  border-color: #30363d;
}
html[data-bs-theme="dark"] .hp-slide-tabs button,
html[data-bs-theme="dark"] .hp-slide-step {
  background: #161b22;
  border-color: #30363d;
  color: #e6edf3;
}
html[data-bs-theme="dark"] .hp-slide-tabs button.is-on {
  background: #7B6DFF;
  border-color: #7B6DFF;
  color: #fff;
}
html[data-bs-theme="dark"] .scene-sticky::after { display: none !important; }
html[data-bs-theme="dark"] .bg-plate .crm-lite {
  background: #161b22;
  box-shadow: 0 0 0 1px #30363d;
}
html[data-bs-theme="dark"] .crm-lite-side {
  background: #0d1117;
  border-right-color: #30363d;
}
html[data-bs-theme="dark"] .crm-lite-side .ghost-nav { background: #21262d; }
html[data-bs-theme="dark"] .crm-lite-side .ghost-nav.is-on { background: #1a2942; }
html[data-bs-theme="dark"] .ghost-top,
html[data-bs-theme="dark"] .ghost-row { background: #21262d; }
html[data-bs-theme="dark"] .ghost-row.is-on { background: #1a2942; }
html[data-bs-theme="dark"] .ghost-day { background: #21262d; }
html[data-bs-theme="dark"] .ghost-day.is-on { background: #1a2942; }
html[data-bs-theme="dark"] .hp-mini-cal {
  background: #161b22; border-color: #30363d;
}
html[data-bs-theme="dark"] .hp-mini-cal-h { color: #e6edf3; }
html[data-bs-theme="dark"] .hp-mini-cal-g .is-on { background: #7B6DFF; }
html[data-bs-theme="dark"] .hp-cal-tabs { border-bottom-color: #30363d; color: #8b949e; }
html[data-bs-theme="dark"] .hp-cal-tabs .is-on { color: #e6edf3; box-shadow: 0 2px 0 #7B6DFF; }
html[data-bs-theme="dark"] .hp-cal-bar { color: #e6edf3; }
html[data-bs-theme="dark"] .hp-cal-chip { background: #161b22; border-color: #30363d; color: #e6edf3; }
html[data-bs-theme="dark"] .hp-cal-chip.is-on { background: #7B6DFF; border-color: #7B6DFF; color: #fff; }
html[data-bs-theme="dark"] .hp-cal-nav { background: #21262d; }
html[data-bs-theme="dark"] .hp-cal-cell { background: #21262d; }
html[data-bs-theme="dark"] .hp-cal-cell > span { color: #9ca3af; }
html[data-bs-theme="dark"] .hp-cal-cell.is-today { background: #1a2942; border-color: #7B6DFF; }
html[data-bs-theme="dark"] .hp-cal-cell.is-today > span { color: #e6edf3; }
html[data-bs-theme="dark"] .copy {
  background: #161b22;
  border-color: rgb(48 54 61 / .8);
  box-shadow: 0 10px 36px rgb(0 0 0 / .28);
}
html[data-bs-theme="dark"] .copy--hero {
  background: rgb(22 27 34 / .42);
  border-color: rgb(48 54 61 / .55);
}
html[data-bs-theme="dark"] .copy .k { color: #9ca3af; }
html[data-bs-theme="dark"] .copy h2 { color: #e6edf3 !important; }
html[data-bs-theme="dark"] .copy--hero h2 { color: #c9d1d9 !important; }
html[data-bs-theme="dark"] .copy p { color: #9ca3af !important; }
html[data-bs-theme="dark"] .modal-card {
  background: #161b22;
  border-color: #30363d;
}
html[data-bs-theme="dark"] .modal-card .modal-header,
html[data-bs-theme="dark"] .modal-card .modal-footer,
html[data-bs-theme="dark"] .modal-card .modal-body {
  background: #161b22 !important;
}
html[data-bs-theme="dark"] .plus-menu,
html[data-bs-theme="dark"] .theme-menu-card,
html[data-bs-theme="dark"] .close-card,
html[data-bs-theme="dark"] .fan-chip,
html[data-bs-theme="dark"] .theme-item.btn-crm-glow .fan-chip-face {
  background: #161b22;
  border-color: #30363d;
  color: #e6edf3;
}
html[data-bs-theme="dark"] .plus-menu button:hover,
html[data-bs-theme="dark"] .theme-item:hover {
  background: #1f2937;
}
html[data-bs-theme="dark"] .plus-menu i,
html[data-bs-theme="dark"] .theme-item i,
html[data-bs-theme="dark"] .fan-chip i { color: #7B6DFF; }
/* Aufgabe-Chip mit Glow: Fläche liegt auf .fan-chip-face, nicht auf dem Knopf */
html[data-bs-theme="dark"] .fan-chip.btn-crm-glow {
  --BG_color: #161b22;
  background: none;
  border: 0;
}
html[data-bs-theme="dark"] .fan-chip.btn-crm-glow .fan-chip-face {
  border: 1px solid #30363d;
  color: #e6edf3;
}
html[data-bs-theme="dark"] .fan-chip.is-press,
html[data-bs-theme="dark"] .fan-chip.is-hot,
html[data-bs-theme="dark"] .fan-chip.is-on.is-squash { outline-color: #7B6DFF; }
html[data-bs-theme="dark"] .hp-tour-btn.btn-crm-glow .fan-chip-face {
  background: #161b22;
  color: #e6edf3;
  border-color: #30363d;
  box-shadow: none;
}
html[data-bs-theme="dark"] .hp-tour-btn.btn-crm-glow:hover .fan-chip-face,
html[data-bs-theme="dark"] .hp-tour-btn.btn-crm-glow.is-on .fan-chip-face {
  background: #161b22;
  color: #e6edf3;
  border-color: transparent;
  box-shadow: none;
}
html[data-bs-theme="dark"] .hp-option-menu {
  background: #161b22;
  border-color: #30363d;
}
html[data-bs-theme="dark"] .hp-option-menu button:hover,
html[data-bs-theme="dark"] .hp-option-menu button.hp-tour-scan {
  background: #21262d;
}
html[data-bs-theme="dark"] #spot-projekt .nav-link.hp-tour-scan {
  background: #1a2942;
  box-shadow: inset 0 0 0 1px #7B6DFF;
  color: #e6edf3;
}
html[data-bs-theme="dark"] #hp-calendar .nav-link.hp-tour-scan,
html[data-bs-theme="dark"] #cin-calendar [data-appointment].hp-tour-scan,
html[data-bs-theme="dark"] #cin-calendar [data-view].hp-tour-scan,
html[data-bs-theme="dark"] #timeline-container .timeline-row.hp-tour-scan,
html[data-bs-theme="dark"] #vacation-overview-container .hp-tour-scan,
html[data-bs-theme="dark"] .contextmenu-item.hp-tour-scan {
  background: #1a2942;
  box-shadow: inset 0 0 0 1px #7B6DFF, 0 0 0 3px rgb(123 109 255 / .35);
  color: #e6edf3;
}
html[data-bs-theme="dark"] .hp-chip {
  background: #1f2937;
  border-color: #30363d;
  color: #e6edf3;
}
html[data-bs-theme="dark"] .ql-fake {
  background: #0d1117;
  border-color: #30363d;
  color: #e6edf3;
}

.ql-fake {
  min-height: 180px; background: #fff; border: 1px solid #dee2e6; border-radius: 8px;
  padding: .85rem 1rem; color: #333;
}

html[data-bs-theme="dark"] .hp-copy-close,
html[data-bs-theme="dark"] .hp-bezug-min {
  background: #21262d;
  color: #e6edf3;
}
html[data-bs-theme="dark"] .hp-copy-close:hover,
html[data-bs-theme="dark"] .hp-bezug-min:hover {
  background: #7B6DFF;
  color: #fff;
}
html[data-bs-theme="dark"] .hp-bezug-pop {
  background: #161b22;
  border-color: #30363d;
  color: #e6edf3;
}
html[data-bs-theme="dark"] .hp-bezug-pop.is-docked { background: transparent; border: 0; box-shadow: none; }
html[data-bs-theme="dark"] .hp-bezug-pop.is-docked .hp-bezug-panel,
html[data-bs-theme="dark"] .hp-bezug-pop.is-docked .hp-bezug-panel[hidden] {
  background: #1a2942;
  border-color: #30363d;
}
html[data-bs-theme="dark"] .hp-bezug-pop.is-docked .hp-bezug-panel:hover,
html[data-bs-theme="dark"] .hp-bezug-pop.is-docked .hp-bezug-panel:focus-within {
  background: #161b22;
  box-shadow: -8px 6px 18px rgb(0 0 0 / .28);
}
html[data-bs-theme="dark"] .hp-bezug-pop.is-docked .hp-bezug-spine {
  background: transparent;
  color: #e6edf3;
}
html[data-bs-theme="dark"] .hp-bezug-pop h3 { color: #e6edf3 !important; }
html[data-bs-theme="dark"] .hp-bezug-legend,
html[data-bs-theme="dark"] .hp-bezug-list { color: #c8d1dc; }
html[data-bs-theme="dark"] .hp-messe-card {
  background: linear-gradient(145deg, #161b22 0%, #1c2330 55%, #243049 100%);
  border-color: #30363d;
  color: #e6edf3;
}
html[data-bs-theme="dark"] .hp-messe-title { color: #9db0ff !important; }
html[data-bs-theme="dark"] .hp-messe-kicker { color: #8b949e; }
html[data-bs-theme="dark"] .hp-messe-pitch,
html[data-bs-theme="dark"] .hp-messe-meta { color: #9ca3af !important; }
html[data-bs-theme="dark"] .hp-messe-ghost {
  color: #e6edf3 !important;
  border-color: #7B6DFF;
}
html[data-bs-theme="dark"] .hp-tags-card {
  background: linear-gradient(145deg, #161b22 0%, #1c2330 55%, #243049 100%);
}
html[data-bs-theme="dark"] .hp-tags-card::before { color: rgb(123 109 255 / .12); }
html[data-bs-theme="dark"] .hp-tag-hash {
  background: #161b22;
  border-color: #30363d;
  color: #e6edf3;
}
html[data-bs-theme="dark"] .hp-tag-hash:hover,
html[data-bs-theme="dark"] .hp-tag-hash.is-on {
  background: #7B6DFF;
  border-color: #7B6DFF;
  color: #fff;
}
html[data-bs-theme="dark"] .hp-tag-board-copy h2,
html[data-bs-theme="dark"] .hp-tag-card h3 { color: #e6edf3 !important; }
html[data-bs-theme="dark"] .hp-tag-board-copy p,
html[data-bs-theme="dark"] .hp-tag-card p,
html[data-bs-theme="dark"] .hp-tag-types li { color: #9ca3af !important; }
html[data-bs-theme="dark"] .hp-tag-board-copy .k,
html[data-bs-theme="dark"] .hp-tag-types .k,
html[data-bs-theme="dark"] .hp-tag-card-k,
html[data-bs-theme="dark"] .hp-tag-pair-join span:last-child,
html[data-bs-theme="dark"] .hp-tag-toolbar-hint { color: #8b949e !important; }
html[data-bs-theme="dark"] .hp-tag-card,
html[data-bs-theme="dark"] .hp-tag-types {
  background: #161b22;
  border-color: #30363d;
  box-shadow: none;
}
html[data-bs-theme="dark"] .hp-tag-card.is-catalog {
  background: #1a2942;
  border-color: #30363d;
}
html[data-bs-theme="dark"] .hp-tag-style {
  background: #161b22;
  border-color: #30363d;
}
html[data-bs-theme="dark"] .hp-tag-style button { color: #e6edf3; }
html[data-bs-theme="dark"] .hp-tag-style button.is-on {
  background: #7B6DFF;
  color: #fff;
}
html[data-bs-theme="dark"] .hp-tag-pair-join span:last-child { background: #0d1117; }
html[data-bs-theme="dark"] .hp-tag-pair-join::before { background: #7B6DFF; }
html[data-bs-theme="dark"] .hp-tag-types strong { color: #9db0ff; }
html[data-bs-theme="dark"] .hp-tag-email {
  background: #1a2942;
  border-color: #30363d;
  color: #e6edf3;
}
html[data-bs-theme="dark"] .hp-tag-email h3 { color: #e6edf3 !important; }
html[data-bs-theme="dark"] .hp-tag-email p { color: #9ca3af !important; }
html[data-bs-theme="dark"] .hp-tag-email li { color: #e6edf3; }
html[data-bs-theme="dark"] .hp-tag-email i { color: #c9a227; }

@media (prefers-reduced-motion: reduce) {
  .hp-nav-tip { transition: opacity .12s ease; }
  .hp-nav-tip-face.is-swap,
  .hp-nav-dots > a.is-go::after { animation: none; }
  .btn-crm-glow:before, .btn-crm-glow:after { animation: none; }
  .copy--hero { transform: none; opacity: 1; }
  .fan-chip.is-on.is-squash { transform: none; }
  .hp-slide { transition: none; }
  .scene--pin, .scene--pin-long, .scene--hero { height: auto; }
  .scene-sticky { position: relative; height: auto; min-height: 100vh; }
  .spotlight, .fan-chip, .stack-card, .theme-stage, .hp-postfach, .hp-calendar, .hp-kontakte, .hp-teamchat, .hp-erweiterungen { opacity: 1 !important; transform: none !important; }
  .cal-deck-slot { transition: none; }
  .hp-cursor { display: none !important; }
  .hp-bezug-pop { opacity: 1; pointer-events: auto; transform: none; }
  .hp-bezug-pop.is-docked,
  .hp-bezug-pop.is-docked .hp-bezug-panel { transition: none; }
}
@media (max-width: 767.98px) {
  /* Handy: keine Pins, jede Rubrik ist so hoch wie Erklärkarte und Vorschau */
  #aufgabe.scene--hero { height: auto !important; }
  #ticket.scene--pin,
  #termin.scene--pin,
  #kontakte.scene--pin,
  #teamchat.scene--pin,
  #erweiterungen.scene--pin,
  #dark.scene--pin { height: auto !important; }
  #aufgabe .scene-sticky,
  #ticket .scene-sticky,
  #termin .scene-sticky,
  #kontakte .scene-sticky,
  #teamchat .scene-sticky,
  #erweiterungen .scene-sticky,
  #dark .scene-sticky {
    position: relative;
    height: auto;
    min-height: 0;
  }
  #aufgabe .hp-task-mobile {
    width: 100%;
    min-height: calc(100vh - 8.4rem);
    height: calc(100vh - 8.4rem);
  }
  #hp-postfach,
  #hp-calendar,
  #hp-kontakte,
  #hp-teamchat,
  #hp-erweiterungen {
    width: 100%;
    height: calc(100vh - 8.4rem);
    max-height: none;
    opacity: 1;
    transform: none;
    filter: none;
    pointer-events: auto;
    overflow: visible;
    box-shadow: none;
  }
  #hp-erweiterungen #hp-ext-shell {
    flex-direction: column;
  }
  /* Plugin-Navigation: oben die Plugins als Chips, darunter nur die Ansichten des aktiven Plugins */
  #hp-erweiterungen .hp-ext-nav {
    flex: 0 0 auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    padding: .6rem;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid var(--bs-border-color);
  }
  #hp-erweiterungen .hp-ext-nav::after {
    content: "";
    order: 2;
    flex-basis: 100%;
    height: 0;
  }
  #hp-erweiterungen .hp-ext-plugin { display: contents; }
  #hp-erweiterungen .hp-ext-plugin-head,
  #hp-erweiterungen .hp-ext-plugin[data-plugin="intro"] .hp-ext-view {
    order: 1;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    width: auto;
    padding: .34rem .75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    background: var(--bs-body-bg);
    box-shadow: none;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
  }
  #hp-erweiterungen .hp-ext-plugin-head img { width: 1rem; height: 1rem; }
  #hp-erweiterungen .hp-ext-plugin-name { font-size: .72rem; }
  #hp-erweiterungen .hp-ext-plugin-desc { display: none; }
  #hp-erweiterungen .hp-ext-plugin.is-on .hp-ext-plugin-head,
  #hp-erweiterungen .hp-ext-plugin.is-on[data-plugin="intro"] .hp-ext-view {
    background: #1b3661;
    border-color: #1b3661;
    color: #fff;
  }
  #hp-erweiterungen .hp-ext-plugin.is-on .hp-ext-plugin-name { color: #fff; }
  /* das navyfarbene CIN-Zeichen (JTL-Wawi, User-Report) bliebe auf dem aktiven Chip unsichtbar */
  #hp-erweiterungen .hp-ext-plugin.is-on .hp-ext-plugin-head img[src$="cin_ci.svg"] { filter: brightness(0) invert(1); }
  /* JTL-Tabellen: Zeilen einzeilig, die Tabelle scrollt waagerecht (table-responsive) statt hohe Zeilen zu bilden */
  #hp-erweiterungen .hp-jtl-stage .table :is(th, td) { white-space: nowrap; }
  #hp-erweiterungen .hp-ext-plugin:not([data-plugin="intro"]) .hp-ext-view {
    order: 3;
    display: none;
    width: auto;
    padding: .3rem .7rem;
    font-size: .84rem;
  }
  #hp-erweiterungen .hp-ext-plugin.is-on:not([data-plugin="intro"]) .hp-ext-view { display: inline-block; }
  #hp-erweiterungen .hp-ext-soon { display: none; }
  /* Xelion: „Kontakt“ zeigt das Kontaktblatt statt der Liste (wie ein geöffneter Kontakt im CRM),
     „Status“ die Benutzer-Statusleiste (im CRM erst ab md sichtbar) als Liste über den Kontakten */
  #hp-erweiterungen #hp-ext-xelion[data-feature="kontakt"] #contact-left-panel { display: none !important; }
  #hp-erweiterungen #hp-ext-xelion[data-feature="kontakt"] #hp-ext-kontakt {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
  }
  #hp-erweiterungen #hp-ext-xelion[data-feature="status"] #main-wrapper { flex-direction: column; }
  #hp-erweiterungen #hp-ext-xelion[data-feature="status"] #user-state-panel {
    display: block !important;
    flex: 0 0 auto;
  }
  #hp-erweiterungen #hp-ext-xelion[data-feature="status"] #user-state-list-wrapper {
    flex-direction: column;
    align-items: stretch !important;
  }
  #hp-erweiterungen #hp-ext-xelion[data-feature="status"] .user-state-list {
    flex-direction: column;
    overflow: visible !important;
  }
  .hp-postfach.is-split {
    width: 100% !important;
    max-width: none !important;
  }
  .hp-cursor { display: none !important; }
  /* Vollbild über allem, auch über der Kopfzeile, wie das CRM auf dem Handy */
  .live-modal {
    padding: 0;
    place-items: stretch;
  }
  .live-modal .modal-card {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
  }
}
@media (max-width: 900px) {
  .copy { position: relative; left: 0; top: 0; margin: 4.6rem 1rem 0; max-width: none; }
  .copy--hero { transform: none; max-width: none; }
  .hp-banner {
    grid-template-columns: 1fr;
    padding: 5.6rem 1.1rem 2rem;
  }
  .hp-slide > img { max-height: none; }
  .scene--board { padding: 5.2rem 1.1rem 2.4rem; }
  .hp-tag-board-head,
  .hp-tag-pair,
  .hp-tag-grid,
  .hp-tag-meta,
  .hp-tag-types li {
    grid-template-columns: 1fr;
  }
  .hp-tag-pair-join {
    flex-direction: row;
    min-width: 0;
    padding: .35rem 0;
  }
  .hp-tag-pair-join::before {
    top: auto;
    bottom: 50%;
    left: 8%;
    right: 8%;
  }
  .hp-tag-toolbar { justify-content: flex-start; }
  .spotlight { width: 94vw; height: auto; max-height: none; }
  .hp-postfach, .hp-calendar, .hp-kontakte, .hp-teamchat, .hp-erweiterungen { width: 94vw; }
  .theme-stage { width: 92vw; }
  .hp-nav-dots { display: none; }
  .hp-slide-bar { position: static; margin-top: .85rem; }
  .hp-bezug-pop:not(.is-docked) { position: relative; right: auto; top: auto; transform: none; width: 100%; margin-top: .75rem; }
}

/* Toasts wie im CRM (hp-toast.js) unter der Navigation */
.hp-toast-region {
  top: 4.5rem;
  z-index: 4100;
}

/* Handy: Rubrik als Erklärkarte plus zugeklappte Vorschau der echten Karte, ohne Pin und ohne
   eigenes Scrollfenster. Tippen öffnet das Formular als Vollbild-Popup (setLive). Selektoren
   immer mit #projekt, sonst greifen sie auch in der Kopie des Hero-Banners (gleiche ID). */
@media (max-width: 767.98px) {
  html { scroll-snap-type: y proximity; }
  html.is-gliding { scroll-snap-type: none; }
  main > section[data-dot] { scroll-snap-align: start; }

  #projekt.scene--pin { height: auto !important; }
  #projekt .scene-sticky {
    position: relative;
    height: auto;
    min-height: 0;
  }
  #projekt .bg-plate,
  #projekt .copy[data-copy-id="projekt"] { display: none !important; }
  #projekt .fg {
    --peek-h: min(23rem, 56svh);
    display: block;
    padding: 0 .75rem 1.6rem;
  }
  #projekt #spot-projekt {
    width: 100%;
    height: var(--peek-h);
    max-height: none;
    overflow: hidden;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    box-shadow: none;
    pointer-events: none !important;
    -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
  }
  #projekt #spot-projekt > .modal-card {
    height: 100%;
    max-height: none;
  }
  #projekt #spot-projekt .modal-body { overflow: hidden !important; }
  #projekt #spot-projekt .modal-footer { display: none !important; }
  .hp-peek-open {
    position: absolute;
    top: 0;
    left: .75rem;
    right: .75rem;
    height: var(--peek-h);
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 0 .9rem;
    border: 0;
    border-radius: 14px;
    background: transparent;
    cursor: pointer;
  }
  /* Glow wie die „i“-Knöpfe (btn-crm-glow), aber als navyfarbene Pille */
  .hp-peek-cta.btn-crm-glow {
    position: relative;
    display: inline-flex;
    --BG_color: #1b3661;
  }
  .hp-peek-cta .fan-chip-face {
    gap: .5rem;
    padding: .62rem 1.15rem;
    color: #fff;
    font-weight: 600;
    font-size: .95rem;
    box-shadow: 0 10px 24px rgb(27 54 97 / .25);
    animation: hp-tour-face-beat 2.8s cubic-bezier(.16,1,.3,1) infinite;
  }
  .hp-peek-cta.btn-crm-glow:after {
    left: -6px;
    top: -6px;
    width: calc(100% + 12px);
    height: calc(100% + 12px);
    filter: blur(9px);
  }
  .hp-peek-cta.btn-crm-glow.is-glow:after { opacity: .55; }
  .hp-peek-cta .hp-tour-pulse-ring {
    animation: hp-peek-pulse 3.6s cubic-bezier(.16,1,.3,1) infinite !important;
  }
  .hp-peek-open:active .fan-chip-face { transform: scale(.97); }

  .hp-explain {
    margin: 4.6rem calc(.75rem + 3px) .8rem;
    padding: .8rem .95rem .9rem;
    border-radius: 14px;
    background: #fff;
    border: 1px solid rgb(27 54 97 / .08);
    box-shadow: 0 8px 26px rgb(27 54 97 / .06);
  }
  .hp-explain .k {
    font-size: .64rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #7a7368;
    margin-bottom: .35rem;
  }
  .hp-explain h2 {
    font-size: 1.1rem !important;
    line-height: 1.2 !important;
    font-weight: 650 !important;
    margin: 0 !important;
    color: #141210 !important;
  }
  .hp-explain p {
    margin: .4rem 0 0;
    color: #5c564c;
    font-size: .82rem;
    line-height: 1.45;
  }
  .hp-explain ul {
    list-style: none;
    padding: 0;
    margin: .55rem 0 0;
    display: grid;
    gap: .25rem;
  }
  .hp-explain li {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    font-size: .8rem;
    line-height: 1.4;
    color: #2c2823;
  }
  .hp-explain li i { color: #1b3661; font-size: .8rem; }
}
html[data-bs-theme="dark"] .hp-explain {
  background: #161b22;
  border-color: rgb(48 54 61 / .8);
  box-shadow: 0 10px 36px rgb(0 0 0 / .28);
}
html[data-bs-theme="dark"] .hp-explain .k { color: #9ca3af; }
html[data-bs-theme="dark"] .hp-explain h2 { color: #e6edf3 !important; }
html[data-bs-theme="dark"] .hp-explain p { color: #9ca3af; }
html[data-bs-theme="dark"] .hp-explain li { color: #e6edf3; }
html[data-bs-theme="dark"] .hp-explain li i { color: #9db0ff; }
html[data-bs-theme="dark"] .hp-peek-cta.btn-crm-glow { --BG_color: #2a4875; }
html[data-bs-theme="dark"] .hp-peek-cta .fan-chip-face { box-shadow: 0 10px 24px rgb(0 0 0 / .35); }
@keyframes hp-peek-pulse {
  0% { transform: scale(1); opacity: .6; }
  55% { transform: scale(1.12, 1.6); opacity: 0; }
  100% { transform: scale(1.12, 1.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hp-peek-cta .fan-chip-face { animation: none; }
  .hp-peek-cta .hp-tour-pulse-ring { animation: none !important; opacity: 0; }
}

/* Projektmaske wie im CRM (crm.css: .modal:has(.project-form) .modal-body): der Modal-Body ist
   detailpanel-Container, damit die Zuweisungs-Regeln (@container detailpanel) bei schmaler Breite
   greifen. Projektname und CRM-Tags brechen dann ebenfalls untereinander um. */
#spot-projekt .modal-body,
.live-modal [data-hp-kind="projekt"] .modal-body {
  container-type: inline-size;
  container-name: detailpanel;
}
@container detailpanel (max-width: 640px) {
  .hp-proj-name-row { flex-wrap: wrap; }
  .hp-proj-name-row > .flex-fill { flex: 1 1 100%; }
  .hp-proj-name-row > .flex-shrink-0 {
    flex: 1 1 100%;
    text-align: start !important;
  }
  .hp-proj-name-row .project-crm-tags-slot { justify-content: flex-start !important; }
}

/* Handy: Modul-Rubriken wie Projekt. Die Vorschau zeigt den Kopf des echten Moduls, Tippen öffnet es
   im Vollbild-Blatt (#hp-sheet, homepage.js openSheet). Selektoren mit .hp-peek-fg als Vorfahr,
   damit die Kopien im Hero-Banner (gleiche IDs) unberührt bleiben. */
@media (max-width: 767.98px) {
  :is(#aufgabe, #termin, #ticket, #kontakte, #teamchat, #erweiterungen) .hp-peek-fg {
    --peek-h: min(23rem, 56svh);
    position: relative;
    display: block;
    padding: 0 .75rem 1.6rem;
  }
  /* Die Führung („i“) gehört ins geöffnete Modul, nicht in die Vorschau */
  .hp-peek-fg > #hp-task-mobile .hp-tour-btn { display: none !important; }
  .hp-peek-fg > :is(#hp-task-mobile, #hp-calendar, #hp-postfach, #hp-kontakte, #hp-teamchat, #hp-erweiterungen) {
    height: var(--peek-h) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    border-radius: 14px;
    -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
  }
  /* Kalender: der aktive Reiter bekommt die volle Höhe, sonst rechnet das Monatsraster mit 224 px
     und schneidet ab Woche 3 ab */
  #hp-calendar .tab-content > .tab-pane.active {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  #hp-calendar #cin-calendar {
    flex: 1 1 auto;
    min-height: 0;
  }
  /* Monatsansicht: Termine als Icon-Pillen, für Uhrzeit und Titel ist die Spalte zu schmal */
  #hp-calendar [data-month-appointment-date] > div { justify-content: center; }
  #hp-calendar [data-month-appointment-date] > div > :not(i) { display: none !important; }
  #hp-calendar [data-month-appointment-date] > div > i { margin: 0 !important; }
  /* Aufgabenliste: Titel auf volle Breite, die festen Meta-Spalten (268 px) rutschen in Zeile 2 */
  #hp-task-mobile .task-row {
    flex-wrap: wrap;
    row-gap: .15rem;
  }
  #hp-task-mobile .task-row-title { flex: 1 1 60%; }
  #hp-task-mobile .task-row-meta { margin-left: auto; }
  /* Darkmode-Rubrik: Erklärkarte statt Hinweiskarte, Menü direkt darunter, ohne Wellen-Grafik
     (sie ist über die volle Breite gezeichnet und läuft auf dem Handy über den Rand) */
  #dark .copy[data-copy-id="dark"],
  #dark .theme-waves { display: none !important; }
  #dark .fg {
    display: block;
    padding: 0 .75rem 1.6rem;
  }
  #dark .theme-stage {
    width: 100%;
    margin: 0;
  }
  /* Mail- und Kontaktdetail wie alle Popups auf dem Handy im Vollbild */
  .live-modal.is-comm-detail,
  .live-modal.is-contact-detail { place-items: stretch; }
  .live-modal.is-comm-detail .mail-detail-shell,
  .live-modal.is-contact-detail .contact-detail-shell {
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
  }
}
.hp-sheet {
  position: fixed;
  inset: 0;
  z-index: 65;
  display: flex;
  flex-direction: column;
  background: var(--bs-body-bg, #fff);
  transform: translate3d(0, 100%, 0);
  visibility: hidden;
  transition: transform .34s cubic-bezier(.16,1,.3,1), visibility 0s linear .34s;
}
.hp-sheet.is-on {
  transform: none;
  visibility: visible;
  transition: transform .34s cubic-bezier(.16,1,.3,1), visibility 0s;
}
.hp-sheet-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .75rem 1rem .75rem 1.15rem;
  border-bottom: 1px solid var(--bs-border-color);
}
.hp-sheet-title {
  font-weight: 650;
  font-size: 1.05rem;
  color: var(--bs-emphasis-color);
}
.hp-sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: .6rem .6rem calc(.6rem + env(safe-area-inset-bottom));
  overflow: hidden;
}
.hp-sheet-body > * {
  flex: 1 1 auto;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  opacity: 1 !important;
  transform: none !important;
}
body.is-sheet { overflow: hidden !important; }
/* Handy, Popup oder Blatt offen: Seite fixiert (homepage.js syncPageLock) */
html.is-page-locked { scroll-snap-type: none; }
html.is-page-locked body {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
}
/* Der „i“-Knopf in der Aufgaben-Werkzeugleiste braucht einen eigenen Ursprung, sonst legt sich
   sein Glow (absolute Pseudo-Elemente) über die ganze Werkzeugleiste */
.hp-tour-btn--toolbar.btn-crm-glow { position: relative; }
html[data-bs-theme="dark"] #hp-erweiterungen .hp-ext-plugin.is-on .hp-ext-plugin-head,
html[data-bs-theme="dark"] #hp-erweiterungen .hp-ext-plugin.is-on[data-plugin="intro"] .hp-ext-view {
  background: #2a4875;
  border-color: #2a4875;
}
@media (prefers-reduced-motion: reduce) {
  .hp-sheet,
  .hp-sheet.is-on { transition: none; }
}