/**
 * @file
 * Community-Topbar: Komponenten-CSS mit CNS-Platzhaltern `.CNS-*` (Orchestrate → Map → dist).
 * Logische Klassen-Keys entsprechen den `cns('community.topbar.…')`-Aufrufen in cns-community-topbar.html.twig.
 * `data-cns-region` / `cns_region()` bleiben für Obfuscator und JS; kein Hardcoding von cns-r-* in CSS.
 *
 * Farben: nur `var(--cns-surface|…, Canvas)` / `var(--cns-text|…, CanvasText)` und `color-mix` ohne Hex/RGBA.
 * Layout-Utilities (display, width, sticky, z-index, …) primär in Twig per `cns()`; hier nur Topbar-spezifisches.
 *
 * Key-Katalog (Auszug):
 * - community.topbar.root
 * - community.topbar.inner
 * - community.topbar.cluster.primary
 * - community.topbar.brand.link | .brand.media | .brand.fallback
 * - community.topbar.search.form | .search.icon | .search.field
 * - community.topbar.nav.main | .nav.list | .nav.link
 * - community.topbar.actions | .action.trigger | .action.badge
 * - community.topbar.profile.link | .profile.media | .profile.fallback
 * - community.topbar.overlay.{menu,messages,notifications}.*
 *
 * - community.topbar.search.shell | .search.form.desktop | .search.toggle | .search.popover.*
 *
 * @version 3.8.0
 * @date 2026-05-21 (Europe/Berlin) — Dynamisches Slot-Layout: JS setzt --cns-topbar-side-width; Nav absolut zentriert.
 */

/* --- Root: Viewport-Leiste + Theme-Tokens (keine Hex-Literale). --- */

.cns-4771953 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  --cns-topbar-bg: color-mix(in srgb, var(--cns-text, CanvasText) 88%, var(--cns-surface, Canvas));
  --cns-topbar-fg: color-mix(in srgb, var(--cns-surface, Canvas) 93%, var(--cns-text, CanvasText));
  --cns-topbar-muted: color-mix(in srgb, var(--cns-topbar-fg) 68%, var(--cns-topbar-bg) 32%);
  --cns-topbar-search-bg: color-mix(in srgb, var(--cns-text, CanvasText) 72%, var(--cns-surface, Canvas));
  --cns-topbar-action-bg: color-mix(in srgb, var(--cns-text, CanvasText) 76%, var(--cns-surface, Canvas));
  /* Hinweis: kein zentrales „Danger“-Token im Theme; Kontrast-Badge ohne festes Rot. */
  --cns-topbar-badge: color-mix(in srgb, var(--cns-surface, Canvas) 88%, var(--cns-text, CanvasText) 12%);
  background: var(--cns-topbar-bg);
  color: var(--cns-topbar-fg);
}

/* Drupal-Admin-Toolbar (Core-Klassen nur als Selektor, keine Core-Datei-Änderung). */
body.toolbar-horizontal .cns-4771953 {
  top: 39px;
}

body.toolbar-horizontal.toolbar-tray-open .cns-4771953 {
  top: 79px;
}

.cns-4771953 .cns-88bbb38 {
  color: var(--cns-topbar-fg);
}

.cns-cc5bed4,
.cns-a7fe5c8 {
  box-sizing: border-box;
}

.cns-4771953 {
  --cns-topbar-side-width-left: 25%;
  --cns-topbar-side-width-right: 25%;
  --cns-topbar-slot-gap: 5px;
}

.cns-cc5bed4 {
  position: relative;
}

.cns-769e19c {
  width: auto;
  min-width: var(--cns-topbar-side-width-left);
  max-width: 50%;
  flex-shrink: 0;
  z-index: 3;
}

.cns-db32fcf {
  width: auto;
  min-width: var(--cns-topbar-side-width-right);
  max-width: 50%;
  flex-shrink: 0;
  z-index: 1;
}

.cns-5c67278 {
  /* Marker community.topbar.search.shell — Desktop: flexibel, Mobile: fest. */
}

@media (min-width: 1024px) {
  .cns-4771953 .cns-5c67278 {
    flex: 1 1 auto;
    min-width: 0;
  }
}

.cns-f44bb60 {
  z-index: 2;
}

.cns-0ac4279 {
  /* Marker für community.topbar.nav.list — Listen-Items ohne Umbruch. */
}

.cns-0ac4279 > li {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.cns-4771953 .cns-f44bb60 .cns-ec1cb3a,
.cns-4771953 .cns-f44bb60 .cns-1ba759f {
  pointer-events: auto;
}

.cns-4771953 .cns-ca042ac,
.cns-4771953 .cns-ca042ac img {
  width: 34px;
  height: 34px;
  object-fit: cover;
}

.cns-4771953 .cns-8eb6750,
.cns-4771953 .cns-d9f4030 {
  background: var(--cns-topbar-search-bg);
}

.cns-4771953 .cns-6d5cfb5 {
  color: var(--cns-topbar-fg);
}

.cns-4771953 .cns-6d5cfb5::placeholder {
  color: var(--cns-topbar-muted);
}

.cns-4771953 .cns-6cf24a6 {
  background: var(--cns-topbar-action-bg);
  color: var(--cns-topbar-fg);
  display: none;
}

.cns-4771953 .cns-6cf24a6:hover,
.cns-4771953 .cns-6cf24a6:focus-visible {
  background: color-mix(in srgb, var(--cns-text, CanvasText) 78%, var(--cns-surface, Canvas));
  outline: 2px solid color-mix(in srgb, var(--cns-topbar-fg) 40%, transparent);
  outline-offset: 2px;
}

.cns-4771953 .cns-618cea2 {
  box-sizing: border-box;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--cns-text, CanvasText) 28%, transparent);
}

.cns-4771953 .cns-618cea2[hidden] {
  display: none;
}

@media (max-width: 1023px) {
  .cns-4771953 .cns-8eb6750 {
    display: none;
  }

  .cns-4771953 .cns-6cf24a6 {
    display: inline-flex;
    flex-shrink: 0;
  }

  .cns-4771953 .cns-5c67278 {
    flex: 0 0 auto;
    width: auto;
    min-width: 34px;
  }
}

@media (min-width: 1024px) {
  .cns-4771953 .cns-6cf24a6,
  .cns-4771953 .cns-618cea2 {
    display: none;
  }
}

.cns-4771953 .cns-ab12a4d {
  color: var(--cns-topbar-fg);
}

.cns-4771953 .cns-8eb9615 {
  color: var(--cns-topbar-fg);
}

.cns-4771953 .cns-8eb9615::placeholder {
  color: var(--cns-topbar-muted);
}

.cns-4771953 .cns-1ba759f,
.cns-4771953 .cns-ec1cb3a {
  background: var(--cns-topbar-action-bg);
  color: var(--cns-topbar-fg);
  font: inherit;
}

.cns-4771953 .cns-1ba759f:hover,
.cns-4771953 .cns-1ba759f:focus-visible,
.cns-4771953 .cns-ec1cb3a:hover,
.cns-4771953 .cns-ec1cb3a:focus-visible {
  background: color-mix(in srgb, var(--cns-text, CanvasText) 78%, var(--cns-surface, Canvas));
  outline: 2px solid color-mix(in srgb, var(--cns-topbar-fg) 40%, transparent);
  outline-offset: 2px;
}

.cns-4771953 .cns-2b68e15 {
  top: 0.15rem;
  right: 0.15rem;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.2rem;
  background: var(--cns-topbar-badge);
  color: var(--cns-topbar-bg);
}

.cns-4771953 .cns-ca042ac {
  background: color-mix(in srgb, var(--cns-text, CanvasText) 92%, var(--cns-surface, Canvas));
  color: var(--cns-topbar-muted);
  border: 1px solid color-mix(in srgb, var(--cns-topbar-fg) 22%, transparent);
}

.cns-4771953 .cns-a1893c4::backdrop,
.cns-4771953 .cns-2f3163e::backdrop,
.cns-4771953 .cns-2e6eeeb::backdrop {
  background: color-mix(in srgb, var(--cns-text, CanvasText) 45%, transparent);
}

.cns-4771953 .cns-664ad98,
.cns-4771953 .cns-8ebd62f,
.cns-4771953 .cns-5ebb556 {
  background: color-mix(in srgb, var(--cns-surface, Canvas) 96%, var(--cns-text, CanvasText) 4%);
  color: var(--cns-text, CanvasText);
}

.cns-4771953 .cns-19c3b54,
.cns-4771953 .cns-4c3752c,
.cns-4771953 .cns-14d9910 {
  border-bottom: 1px solid color-mix(in srgb, var(--cns-text, CanvasText) 12%, transparent);
}

.cns-4771953 .cns-80f7c63,
.cns-4771953 .cns-77d8636,
.cns-4771953 .cns-780c055 {
  color: var(--cns-text, CanvasText);
}

.cns-4771953 .cns-edce0bb,
.cns-4771953 .cns-3208713,
.cns-4771953 .cns-093fddd {
  color: color-mix(in srgb, var(--cns-text, CanvasText) 58%, transparent);
}

/* Overlay-Menü-Links: Basis per Map-Klassen in community_cns_topbar_overlay_menu_attach_cns(); nur Interaktionszustände hier. */
.cns-4771953 .cns-b76ebf1 .menu a:hover,
.cns-4771953 .cns-b76ebf1 .menu a:focus-visible {
  text-decoration: underline;
}