/*
 * ════════════════════════════════════════════════════════════════════════════
 *  AKQUIX — GEMEINSAME NAVIGATION (Ausschnitt aus `akquix-ui.css`)
 * ════════════════════════════════════════════════════════════════════════════
 *
 *  ZWECK
 *  -----
 *  Eine einzige Navigationsschicht fuer alle Ansichten: einklappbare globale
 *  Navigation, blaue Kopfzeile, Datensatz-Navigation der Kontaktakte und das
 *  Aktionsrad.
 *
 *  HERKUNFT
 *  --------
 *  Die Regeln sind UNVERAENDERT aus `frontend/static/css/akquix-ui.css` des
 *  ausgelieferten Staging-Stands uebernommen (Abschnitte 1-4, 7 und 8).
 *  Abschnitte, die das Layout der Kontaktakte umbauen (Kachelraster,
 *  Kontaktkopf, Aktionsreihen, Listen, Cockpit, Formulare), sind hier bewusst
 *  NICHT enthalten — die Produktions-Vorlage hat dafuer ein abweichendes
 *  Markup. Ein spaeterer vollstaendiger Port ersetzt diese Datei.
 *
 *  REGELN
 *  ------
 *  * Nur Tokens und Klassen dieser Datei ergaenzen — keine neuen Farben in
 *    Templates.
 *  * Keine Geschaeftslogik; bestehende Klassennamen bleiben unveraendert.
 * ════════════════════════════════════════════════════════════════════════════
 */

/* ══════════════════════════════════════════════════════════════════════════
   1. TOKENS — verbindliche Farbwelt „Entwurf 2“
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Marke: kräftiges, klares Akquix-Blau ── */
  --akq-blue:        #2563EB;
  --akq-blue-600:    #1D4ED8;
  --akq-blue-700:    #1E40AF;
  --akq-blue-soft:   #EFF4FF;
  --akq-blue-ring:   rgba(37, 99, 235, 0.28);

  /* ── Marineblau (globale Navigation) ── */
  --akq-navy:        #0B1B33;
  --akq-navy-2:      #0E2240;
  --akq-navy-3:      #142B4D;
  --akq-navy-item:   #93A4BF;
  --akq-navy-active: rgba(37, 99, 235, 0.22);

  /* ── Violett: gezielter Akzent für KI & besondere Aktionen ── */
  --akq-violet:      #7C3AED;
  --akq-violet-soft: #F3EEFF;

  /* ── Zustände ── */
  --akq-green:       #0E9F6E;
  --akq-green-soft:  #E8F8F1;
  --akq-orange:      #EA580C;
  --akq-orange-soft: #FFF4EC;
  --akq-red:         #DC2626;
  --akq-red-soft:    #FDECEC;

  /* ── Akzentfarben der Datensatz-Navigation ──
     Acht eigenständige, aufeinander abgestimmte Farbtöne für die acht
     Bereiche der Kontaktakte. Sie liegen bewusst hier (nicht im Template),
     damit es EINE Quelle gibt. Alle Töne erreichen auf Weiß mindestens
     3,2:1 Kontrast — ausreichend für grafische Symbole (WCAG 1.4.11). */
  --akq-turquoise:   #0D9488;   /* Kontaktdaten */
  --akq-gold:        #CA8A04;   /* Notizen       */
  --akq-bluegreen:   #0891B2;   /* Vertriebsinfo */
  --akq-indigo:      #4F46E5;   /* Dateien       */

  /* ── Arbeitsflächen ── */
  --akq-page:        #F1F4F9;
  --akq-card:        #FFFFFF;
  --akq-ink:         #0E1726;
  --akq-ink-2:       #3A4A5F;
  --akq-ink-3:       #6C7A8D;
  --akq-line:        #E4E9F2;
  --akq-line-2:      #EDF1F7;

  /* ── Radius / Schatten ── */
  --akq-r-sm: 8px;
  --akq-r:    12px;
  --akq-r-lg: 16px;
  --akq-sh-1: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.06);
  --akq-sh-2: 0 2px 6px rgba(16, 24, 40, 0.06), 0 10px 24px rgba(16, 24, 40, 0.07);
  --akq-sh-3: 0 10px 32px rgba(16, 24, 40, 0.14), 0 3px 10px rgba(16, 24, 40, 0.08);

  /* ── Chrome-Maße ── */
  --akq-nav-expanded:  236px;
  --akq-nav-collapsed: 68px;
  --akq-topbar-h:      56px;
  --akq-rnav-h:        52px;

  /* Einzige Wahrheit für die Navigationsbreite. `akq-ui.js` setzt je nach
     Zustand die Klasse `akq-nav-collapsed` auf <html>/<body>; dadurch folgen
     Startseite (SPA) UND Shell-Seiten derselben Breite. */
  --akq-nav-w: var(--akq-nav-expanded);

  /* ── Einheitliche Schrift-Hierarchie (überschreibt die fluid-Skala) ── */
  --akq-fs-page:  22px;
  --akq-fs-card:  14.5px;
  --akq-fs-body:  13.5px;
  --akq-fs-small: 12.5px;
  --akq-fs-mini:  11.5px;

  /* ── Einheitliche Abstände ── */
  --akq-gap:  16px;
  --akq-gap2: 12px;
  --akq-pad:  18px;

  /* ── Schärfung vorhandener Marken-Tokens auf dieselbe Wahrheit ── */
  --brand:          var(--akq-blue);
  --brand-hover:    var(--akq-blue-600);
  --brand-light:    #5B8DEF;
  --brand-dim:      rgba(37, 99, 235, 0.08);
  --brand-ring:     var(--akq-blue-ring);
  --brand2:         var(--akq-violet);
  --brand-gradient: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%);

  --rd-primary:     var(--akq-blue);
  --rd-primary-h:   var(--akq-blue-600);
  --rd-violet:      var(--akq-violet);
  --rd-success:     var(--akq-green);
  --rd-warn:        var(--akq-orange);
  --rd-danger:      var(--akq-red);
  --rd-bg:          var(--akq-page);
  --rd-card:        var(--akq-card);
  --rd-border:      var(--akq-line);
  --rd-text:        var(--akq-ink);
  --rd-text2:       var(--akq-ink-2);
  --rd-text3:       var(--akq-ink-3);
}

/* ══════════════════════════════════════════════════════════════════════════
   2. BASIS & HIERARCHIE — einheitliche Arbeitsfläche
   ══════════════════════════════════════════════════════════════════════════ */
.v3-body {
  background: var(--akq-page);
  color: var(--akq-ink);
  -webkit-font-smoothing: antialiased;
}

/* Überschriften brechen nicht unschön um (Kritik „Zeilenumbrüche“). */
.v3-body h1, .v3-body h2, .v3-body h3,
.app-page-title, .v3-ch-name, .akq-card-title {
  text-wrap: balance;
}

/* Arbeitsbereich: EINE begrenzte, mittige Gesamtbreite für die gesamte
   Kontaktmaske (Kontaktkopf, Kachelübersicht, Vertriebsassistent,
   KI-Kurzprofil, Pipeline und Gesprächsdokumentation). Auf sehr breiten
   Bildschirmen blieb die Maske vorher fast über die volle Fensterbreite
   stehen und ließ rechts eine große, ungenutzte Fläche entstehen. Die
   Begrenzung wirkt auf den gemeinsamen Container, dadurch stehen alle
   Bereiche automatisch bündig auf derselben Breite.

   `min(1440px, 100%)` sorgt dafür, dass auf kleineren Fenstern weiterhin
   ausschließlich die verfügbare Breite genutzt wird — kein Überlauf.
   `margin-inline: auto` richtet die Maske im Inhaltsbereich mittig aus,
   sodass links und rechts der gleiche Außenabstand entsteht. */
.v3-body .v3-main.col-c {
  max-width: min(1440px, 100%) !important;
  margin-inline: auto !important;
  padding: 18px clamp(16px, 2.2vw, 32px) 44px !important;
  gap: var(--akq-gap) !important;
}

/* Die Kopfzeile der Shell-Seiten bleibt kompakt und trägt die Hierarchie. */
.app-page { padding: 22px clamp(16px, 2.4vw, 36px) 44px; }
.app-page-title {
  font-size: var(--akq-fs-page);
  font-weight: 750;
  letter-spacing: -0.015em;
  color: var(--akq-ink);
  line-height: 1.25;
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   3. GLOBALE NAVIGATION — einklappbar (zwei klar definierte Zustände)
   ══════════════════════════════════════════════════════════════════════════
   Ausgeklappt : Marineblau, Icon + Bezeichnung nebeneinander (breit).
   Eingeklappt : schmale Icon-Leiste; die Bezeichnung erscheint beim
                 Überfahren/Fokussieren als schwebende Beschriftung.
   Der Zustand wird von `akq-ui.js` in `localStorage` gehalten und auf dem
   Element als `data-collapsed="true|false"` gespiegelt.
   ══════════════════════════════════════════════════════════════════════════ */
html.akq-nav-collapsed,
body.akq-nav-collapsed {
  --akq-nav-w: var(--akq-nav-collapsed);
}

.v3-appnav {
  width: var(--akq-nav-w);
  min-width: var(--akq-nav-w);
  padding: 14px 10px 12px;
  gap: 3px;
  background: linear-gradient(180deg, var(--akq-navy-2) 0%, var(--akq-navy) 100%);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 1px 0 0 rgba(0, 0, 0, 0.18);
  transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              min-width 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              padding 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Kopfzeile mit Umschalter */
.akq-nav-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px 8px;
  flex-shrink: 0;
}
.akq-nav-head .v3-appnav-logo {
  margin: 0;
  width: 40px;
  height: 40px;
  font-size: 19px;
  border-radius: 12px;
}
.akq-nav-brand {
  flex: 1;
  min-width: 0;
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
}
.akq-nav-toggle {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.07);
  color: #C9D6EC;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.akq-nav-toggle:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.akq-nav-toggle:focus-visible {
  outline: 2px solid #8FB6FF;
  outline-offset: 2px;
}
.akq-nav-toggle svg { width: 16px; height: 16px; display: block; }
.akq-nav-toggle .akq-i-collapse { display: block; }
.akq-nav-toggle .akq-i-expand { display: none; }

/* Nav-Einträge: ausgeklappt nebeneinander */
.v3-appnav-items { padding: 2px 0; gap: 2px; }
.v3-appnav-item {
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: 10px;
  font-size: var(--akq-fs-small);
  font-weight: 600;
  color: var(--akq-navy-item);
}
.v3-appnav-item .v3-appnav-ic { width: 20px; height: 20px; }
.v3-appnav-item .v3-appnav-ic svg { width: 20px; height: 20px; stroke-width: 1.9; }
.v3-appnav-item .v3-appnav-lbl {
  font-size: var(--akq-fs-small);
  font-weight: 600;
  max-width: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v3-appnav-item:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
.v3-appnav-item.is-active,
.v3-appnav-item[aria-current="page"] {
  color: #fff;
  background: var(--akq-navy-active);
}
.v3-appnav-item.is-active::before,
.v3-appnav-item[aria-current="page"]::before {
  left: -10px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #60A5FA, #A78BFA);
  box-shadow: 0 0 10px rgba(96, 165, 250, 0.55);
}
.v3-appnav-badge { top: 5px; right: 9px; border-color: var(--akq-navy); }

/* Nutzerkachel unten */
.v3-appnav-user {
  flex-direction: row;
  justify-content: flex-start;
  gap: 9px;
  margin: 6px 0 0;
  padding: 8px 8px;
  border-radius: 10px;
}
.v3-appnav-user-av { width: 30px; height: 30px; font-size: 12px; flex-shrink: 0; }
.v3-appnav-user-name { font-size: var(--akq-fs-small); font-weight: 600; }

/* ── EINGEKLAPPT ─────────────────────────────────────────── */
.v3-appnav[data-collapsed="true"] {
  padding-left: 8px;
  padding-right: 8px;
}
.v3-appnav[data-collapsed="true"] .akq-nav-brand { display: none; }
.v3-appnav[data-collapsed="true"] .akq-nav-head { justify-content: center; }
.v3-appnav[data-collapsed="true"] .akq-nav-toggle {
  position: absolute;
  top: 56px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 26px;
  background: var(--akq-navy-3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.v3-appnav[data-collapsed="true"] .akq-nav-toggle .akq-i-collapse { display: none; }
.v3-appnav[data-collapsed="true"] .akq-nav-toggle .akq-i-expand { display: block; }
.v3-appnav[data-collapsed="true"] .v3-appnav-logo {
  width: 36px;
  height: 36px;
  font-size: 17px;
  margin-bottom: 26px;
}
.v3-appnav[data-collapsed="true"] .v3-appnav-item {
  justify-content: center;
  padding: 10px 0;
  position: relative;
}
.v3-appnav[data-collapsed="true"] .v3-appnav-lbl { display: none; }
.v3-appnav[data-collapsed="true"] .v3-appnav-ic { width: 22px; height: 22px; }
.v3-appnav[data-collapsed="true"] .v3-appnav-ic svg { width: 22px; height: 22px; }
.v3-appnav[data-collapsed="true"] .v3-appnav-user { justify-content: center; padding: 8px 0; }
.v3-appnav[data-collapsed="true"] .v3-appnav-user-name { display: none; }
.v3-appnav[data-collapsed="true"] .v3-appnav-badge {
  top: 2px;
  right: 50%;
  margin-right: -20px;
}

/* Beschriftung als schwebender Hinweis im eingeklappten Zustand */
.v3-appnav[data-collapsed="true"] .v3-appnav-item::after {
  content: attr(title);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) scale(0.96);
  background: var(--akq-navy-3);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 8px;
  white-space: nowrap;
  box-shadow: var(--akq-sh-3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease;
  z-index: 700;
}
.v3-appnav[data-collapsed="true"] .v3-appnav-item:hover::after,
.v3-appnav[data-collapsed="true"] .v3-appnav-item:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

/* ══════════════════════════════════════════════════════════════════════════
   4. GLOBALE KOPFZEILE — kräftig blau (Referenz)
   ══════════════════════════════════════════════════════════════════════════
   Die Referenz zeigt über dem Arbeitsbereich eine **kräftig blaue** Kopfzeile
   mit weißer Schrift, Suchfeld und Aktionszone. Sie ist das verbindende
   Element aller Ansichten.

   Betroffen sind zwei getrennte Markups:
     * Shell-Seiten (`app-shell.html`) → `.v3-topbar`
     * Startseite/SPA (`index.html`)    → `#topNav`
   Beide werden hier auf dieselbe Farbe und Höhe gebracht.
   ══════════════════════════════════════════════════════════════════════════ */
.v3-body .v3-topbar {
  height: var(--akq-topbar-h);
  background: linear-gradient(180deg, #2E6BE6 0%, var(--akq-blue-600) 100%);
  border-bottom: none;
  color: #fff;
  box-shadow: 0 2px 10px rgba(16, 24, 40, 0.14);
}

/* Startseite: dieselbe Farbe wie die Shell-Kopfzeile. */
#topNav {
  background: linear-gradient(180deg, #2E6BE6 0%, var(--akq-blue-600) 100%) !important;
  border-bottom: none !important;
  box-shadow: 0 2px 10px rgba(16, 24, 40, 0.18) !important;
}

/* ── Text und Symbole auf der blauen Fläche: weiß ── */
.v3-body .v3-breadcrumb,
.v3-body .v3-bc-link,
.v3-body .v3-bc-sep,
.v3-body .v3-bc-cur,
.v3-body .v3-bc-ic {
  color: rgba(255, 255, 255, 0.88);
}
.v3-body .v3-bc-cur { color: #fff; font-weight: 700; }
.v3-body .v3-bc-link:hover { color: #fff; }

/* ── Kopfzeilen-Buttons: zurückhaltend auf Blau ── */
.v3-body .v3-tb-btn {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.26);
  color: #fff;
}
.v3-body .v3-tb-btn:hover {
  background: rgba(255, 255, 255, 0.24);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}
.v3-body .v3-tb-btn--primary {
  background: #fff;
  border-color: #fff;
  color: var(--akq-blue-700);
}
.v3-body .v3-tb-btn--primary:hover { background: #EAF1FF; border-color: #EAF1FF; color: var(--akq-blue-700); }

.v3-body .v3-tb-icon-btn {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.v3-body .v3-tb-icon-btn:hover { background: rgba(255, 255, 255, 0.26); color: #fff; }

/* Nutzerkachel */
.v3-body .v3-topbar-user { color: #fff; }
.v3-body .v3-topbar-user-name { color: #fff; font-weight: 650; }
.v3-body .v3-topbar-user-av {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Blättern zwischen Datensätzen */
.v3-body .v3-tb-nav { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.2); }
.v3-body .v3-tb-nav-btn { color: #fff; }
.v3-body .v3-tb-nav-btn:disabled { color: rgba(255, 255, 255, 0.45); }
.v3-body .v3-tb-nav-pos { color: rgba(255, 255, 255, 0.9); }

/* Kontakt-Kontext im Kopf der Akte */
.v3-body .v3-contact-context,
.v3-body .v3-context-name,
.v3-body .v3-context-company,
.v3-body .v3-context-meta,
.v3-body .v3-context-link { color: #fff; }
.v3-body .v3-context-company { color: rgba(255, 255, 255, 0.82); }
.v3-body .v3-context-link:hover { color: #fff; text-decoration: underline; }
.v3-body .v3-context-site-icon { background: rgba(255, 255, 255, 0.18); }

/* Fokus auf blauer Fläche sichtbar halten */
.v3-body .v3-topbar a:focus-visible,
.v3-body .v3-topbar button:focus-visible,
#topNav a:focus-visible,
#topNav button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════════════════
   7. DATENSATZ-NAVIGATION — nur in der geöffneten Kontaktakte
   ══════════════════════════════════════════════════════════════════════════
   Horizontale Leiste zwischen Topbar und Arbeitsbereich. Sie navigiert
   ausschließlich INNERHALB des offenen Datensatzes.

   FIXIERTE POSITION
   -----------------
   Der tatsächliche Scroll-Container der Akte ist `.v3-page-shell`
   (`overflow-y:auto`); `.v3-workspace` hat bewusst `overflow:visible` und
   scrollt NICHT. Die Leiste ist ein direkter Kindknoten des Scroll-Containers
   — `position: sticky` wirkt dadurch zuverlässig (kein `overflow` eines
   Zwischen-Containers hebt sie auf).

   Die Topbar der Akte ist `position: static` und scrollt mit dem Inhalt nach
   oben weg. Die Leiste haftet deshalb an der Oberkante des Inhaltsbereichs
   (`top: 0`) und überdeckt die Topbar nicht — beide können sich nicht
   gegenseitig verdecken. `z-index` liegt bewusst unter Dialogen/Overlays
   (400) und dem Aktionsrad (480), sodass Bedienelemente unbeeinträchtigt
   bleiben.
   ══════════════════════════════════════════════════════════════════════════ */
.akq-rnav {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 6px;
  height: var(--akq-rnav-h);
  padding: 0 clamp(12px, 2vw, 26px);
  /* Eigene, helle Fläche: hebt die Leiste eindeutig vom weißen Seiteninhalt
     ab und bleibt bewusst ruhiger als der blaue Firmenbanner darüber.
     Deckend — sonst scheint beim Scrollen der Inhalt durch die Leiste. */
  background: #EAF0FC;
  border-bottom: 1px solid #D5E1F7;
  box-shadow: none;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  flex-shrink: 0;
  /* Eigenständige Schicht, damit die Leiste nicht unter Text rutscht. */
  isolation: isolate;
}
.akq-rnav::-webkit-scrollbar { display: none; }

/* Sprungziele: der Anker darf beim Anklicken NICHT unter der fixierten
   Leiste landen, deshalb ein Vorhalteabstand in Höhe der Leiste. */
.v3-body [data-akq-section] {
  scroll-margin-top: calc(var(--akq-rnav-h) + 14px);
}

.akq-rnav-item {
  display: inline-flex;
  align-items: center;
  /* Einheitlicher Abstand zwischen Symbol und Beschriftung. */
  gap: 8px;
  height: 34px;
  padding: 0 12px;
  border: none;
  background: none;
  border-radius: 9px;
  /* Dunkelblau-graue Schrift; die kräftige Farbe trägt ausschließlich das
     Symbol, damit die Bereiche unterscheidbar bleiben. */
  color: #34445F;
  font-size: var(--akq-fs-small);
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease,
              box-shadow 0.14s ease;
}

/* Symbol: IMMER farbig (auch inaktiv) über die bereichsspezifische Variable. */
.akq-rnav-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--akq-rnav-ic, var(--akq-ink-3));
  stroke: currentColor;
}

/* ── Farbzuordnung der acht Bereiche ──
   Jede Farbe hat eine Funktion und ist über Tokens zentral definiert. */
.akq-rnav-item[data-section="overview"] { --akq-rnav-ic: var(--akq-blue); }
.akq-rnav-item[data-section="data"]     { --akq-rnav-ic: var(--akq-turquoise); }
.akq-rnav-item[data-section="ai"]       { --akq-rnav-ic: var(--akq-violet); }
.akq-rnav-item[data-section="approach"] { --akq-rnav-ic: var(--akq-green); }
.akq-rnav-item[data-section="history"]  { --akq-rnav-ic: var(--akq-orange); }
.akq-rnav-item[data-section="note"]     { --akq-rnav-ic: var(--akq-gold); }
.akq-rnav-item[data-section="side"]     { --akq-rnav-ic: var(--akq-bluegreen); }
.akq-rnav-item[data-section="files"]    { --akq-rnav-ic: var(--akq-indigo); }

.akq-rnav-item:hover {
  background: rgba(255, 255, 255, 0.72);
  color: #1E293B;
}

/* Aktiver Bereich: weiße Fläche mit feiner blauer Kontur. Der Zustand kommt
   aus der echten Navigationslogik (`setRecordNavActive` setzt `is-active`
   anhand von Klick und Scrollposition) und wird hier nur dargestellt.
   Das Symbol behält seine Bereichsfarbe und bleibt dadurch wiedererkennbar. */
.akq-rnav-item.is-active {
  background: #fff;
  color: var(--akq-blue-700);
  box-shadow: inset 0 0 0 1px #C6D7FF;
}
.akq-rnav-item:focus-visible {
  outline: 2px solid var(--akq-blue);
  outline-offset: 2px;
}
.akq-rnav-count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--akq-orange-soft);
  color: #9A3412;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.akq-rnav-item.is-active .akq-rnav-count { background: #DCE7FD; color: var(--akq-blue-700); }

/* Tablet: Abstände und Innenpolster etwas enger, damit alle sechs Bereiche
   ohne seitliches Scrollen sichtbar bleiben. */
@media (max-width: 1000px) {
  .akq-rnav { gap: 4px; }
  .akq-rnav-item { padding: 0 10px; gap: 6px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   8. AKTIONSRAD — kreisförmiges Schnellaktionsmenü für den Datensatz
   ══════════════════════════════════════════════════════════════════════════ */
.akq-wheel-fab {
  position: fixed;
  right: clamp(16px, 2.4vw, 30px);
  bottom: clamp(16px, 2.6vw, 30px);
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%);
  color: #fff;
  box-shadow: 0 10px 26px rgba(37, 99, 235, 0.42), 0 2px 6px rgba(0, 0, 0, 0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 480;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.akq-wheel-fab:hover { transform: translateY(-2px) scale(1.04); }
.akq-wheel-fab:focus-visible { outline: 3px solid #8FB6FF; outline-offset: 3px; }
.akq-wheel-fab svg { width: 26px; height: 26px; }
.akq-wheel-fab.is-open { transform: rotate(45deg); }

.akq-wheel-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(11, 27, 51, 0.42);
  backdrop-filter: blur(2px);
  z-index: 490;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.akq-wheel-backdrop.is-open { opacity: 1; pointer-events: auto; }

.akq-wheel {
  position: fixed;
  z-index: 500;
  width: 300px;
  height: 300px;
  right: clamp(16px, 2.4vw, 30px);
  bottom: clamp(16px, 2.6vw, 30px);
  border-radius: 50%;
  transform: scale(0.7);
  transform-origin: bottom right;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.24s cubic-bezier(0.34, 1.4, 0.5, 1);
}
.akq-wheel.is-open { opacity: 1; pointer-events: auto; transform: scale(1); }

.akq-wheel-hub {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--akq-line);
  box-shadow: var(--akq-sh-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
  padding: 6px;
}
.akq-wheel-hub-av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2563EB, #7C3AED);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.akq-wheel-hub-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--akq-ink);
  max-width: 84px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.akq-wheel-hub-sub {
  font-size: 10px;
  color: var(--akq-ink-3);
  max-width: 84px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Die Segmente werden per JS auf einem Kreis positioniert. */
.akq-wheel-act {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 84px;
  height: 62px;
  margin: -31px 0 0 -42px;
  border-radius: 14px;
  border: 1px solid var(--akq-line);
  background: #fff;
  box-shadow: var(--akq-sh-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
  color: var(--akq-ink-2);
  font-size: 11px;
  font-weight: 650;
  text-align: center;
  padding: 4px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.akq-wheel-act:hover {
  transform: translateY(-2px);
  border-color: #C9D8F7;
  box-shadow: var(--akq-sh-3);
  color: var(--akq-blue-700);
}
.akq-wheel-act:focus-visible { outline: 2px solid var(--akq-blue); outline-offset: 2px; }
.akq-wheel-act-ic {
  width: 26px;
  height: 26px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
}
.akq-wheel-act-ic svg { width: 16px; height: 16px; }
.akq-wheel-act-lbl { line-height: 1.15; }

/* Funktionsfarben der Segmente */
.akq-wheel-act[data-tone="blue"]   .akq-wheel-act-ic { background: var(--akq-blue-soft);   color: var(--akq-blue-700); }
.akq-wheel-act[data-tone="violet"] .akq-wheel-act-ic { background: var(--akq-violet-soft); color: #5B21B6; }
.akq-wheel-act[data-tone="green"]  .akq-wheel-act-ic { background: var(--akq-green-soft);  color: #04674A; }
.akq-wheel-act[data-tone="orange"] .akq-wheel-act-ic { background: var(--akq-orange-soft); color: #9A3412; }
.akq-wheel-act[data-tone="gray"]   .akq-wheel-act-ic { background: #F4F6FA;                color: var(--akq-ink-3); }

/* „Mehr“-Menü des Rads */
.akq-wheel-more {
  position: fixed;
  z-index: 505;
  right: clamp(16px, 2.4vw, 30px);
  bottom: calc(clamp(16px, 2.6vw, 30px) + 300px);
  min-width: 216px;
  background: #fff;
  border: 1px solid var(--akq-line);
  border-radius: var(--akq-r);
  box-shadow: var(--akq-sh-3);
  padding: 6px;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.akq-wheel-more.is-open { opacity: 1; transform: none; pointer-events: auto; }
.akq-wheel-more button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  background: none;
  border-radius: var(--akq-r-sm);
  color: var(--akq-ink-2);
  font-size: var(--akq-fs-small);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.akq-wheel-more button:hover { background: var(--akq-page); color: var(--akq-ink); }
.akq-wheel-more button:focus-visible { outline: 2px solid var(--akq-blue); outline-offset: -2px; }

@media (prefers-reduced-motion: reduce) {
  .akq-wheel, .akq-wheel-fab, .akq-wheel-more { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════


/* ══════════════════════════════════════════════════════════════════════════
   SCHMALE BILDSCHIRME — Navigation bleibt erreichbar
   ══════════════════════════════════════════════════════════════════════════
   Produktions-Bestand: `crm-contact-redesign.css` blendet `.v3-appnav` bei
   ≤640 px ersatzlos aus (`display: none`). Damit wäre auf dem Smartphone
   KEINE Hauptnavigation mehr erreichbar. Staging hat diese Regel entfernt und
   hält die Leiste als schmale Icon-Leiste (52 px). Da die Bestandsregel hier
   nicht angefasst wird, wird sie an dieser Stelle sichtbar gehalten
   (gleiche Spezifität, spätere Schicht → gewinnt).
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  /* Fallback, falls `design-system.css` dieses Token nicht bereitstellt. */
  --akq-nav-w-xs: 52px;
}

@media (max-width: 640px) {
  :root {
    --akq-nav-w: var(--akq-nav-w-xs);
  }
  .v3-body .v3-appnav {
    display: flex;
    padding: 8px 0;
  }
  .v3-appnav-logo {
    width: 36px;
    height: 36px;
    font-size: 16px;
    border-radius: 11px;
  }
  .v3-appnav-items { padding: 2px 3px; }
  .v3-appnav-item { padding: 8px 2px 7px; }
  .v3-appnav-item .v3-appnav-ic,
  .v3-appnav-item .v3-appnav-ic svg { width: 20px; height: 20px; }
}