/* ⚠ ERZEUGTE DATEI - NICHT HIER BEARBEITEN.
   Quelle: fraia-de/n8n → design-system/kopf/kopf.css
   Aendern und danach `python3 design-system/kopf/verteilen.py` laufen lassen.
   Wer hier editiert, verliert die Aenderung beim naechsten Verteilen - und
   genau daraus sind die drei verschiedenen Koepfe entstanden, die diese
   Vorlage abgeloest hat. */

/* ============================================================
   FrΛIraum - Marken-Kopfleiste
   Die EINE Quelle für den Kopf unserer Frontends:
   Atlas (KI-Arbeitsplatz · Admin-Cockpit) · Aurora (Wissens-Chat ·
   Admin-Cockpit) · Intranet.

   ⚠ Diese Datei ist die Quelle. In den Repos liegen Kopien,
   die das Skript design-system/kopf/verteilen.py erzeugt - dort
   NICHT bearbeiten, sondern hier ändern und neu verteilen.

   Maße stammen aus dem KI-Arbeitsplatz (Beschluss 21.07.2026,
   Thorsten): er hatte die Höhe, die richtig aussah, die anderen
   beiden waren 14px bzw. 20px flacher. Zusätzlich gab es zwei
   verschiedene Farben, weil das Cockpit seine Leiste zu 8 %
   durchlässig gesetzt hatte und der cremefarbene Hintergrund
   durchschien. Die Leiste ist ab jetzt überall deckend.

   Aufbau der Marken-Zelle (links, überall gleich):

     Fr∧Ia Atlas  │  ◆  KI-ARBEITSPLATZ
                        Build beab11a

   Wortmarke - Haarlinie - Diamant-Signet mit zweizeiligem Block:
   Produktname oben, Build-Kennung darunter. Der Diamant ist genau
   so hoch wie die beiden Zeilen zusammen, dadurch stehen sie ohne
   Nachjustieren auf einer Achse.

   Rechts unterscheiden sie sich zwangsläufig (Modus-Umschalter,
   Aufklapp-Menüs, Linkliste) - das regelt jede App für sich in
   .kopfleiste__rechts.

   Klassenpräfix bewusst `kopfleiste`, nicht `nav`: im Intranet
   liegen noch rund 2.700 Zeilen Alt-CSS, die `.nav__*` an mehreren
   Stellen übersteuern. Ein eigener Name kann davon nichts erben
   und nichts abbekommen.
   ============================================================ */

.kopfleiste {
  background: var(--ink, #111315);          /* deckend - nie durchlässig */
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  position: sticky;
  top: 0;
  z-index: 300;
  /* Statusleiste aussparen. Wo die App als eigenes Fenster auf dem
     Startbildschirm liegt (installierte PWA, `viewport-fit=cover`), beginnt die
     Seite ganz oben am Geräterand - die Uhrzeit des iPhones stand dann MITTEN in
     der Wortmarke. Im Browser und auf dem Desktop ist der Inset 0, dort ändert
     sich nichts. Ohne `viewport-fit=cover` in der app.html ist er ebenfalls 0 -
     die Zeile schadet dort also nicht, sie wirkt nur nicht.

     Bewusst am ÄUSSEREN Rahmen und nicht an .kopfleiste__innen: an deren 16px
     oben/unten hängt die gemeinsame Höhe von 80px, auf die die Gesprächsspalte
     des KI-Arbeitsplatzes festgesetzt ist. So wächst nur der Balken, der Inhalt
     bleibt unberührt - und die Seitenleiste rechnet denselben Inset bereits ein
     (Seitenleiste.svelte), beide fangen also auf derselben Linie an.

     Gefunden 16.08.2026 am installierten Arbeitsplatz, in die Quelle
     zurückgegeben am 20.08.2026 - bis dahin stand die Zeile NUR in der Kopie des
     KI-Arbeitsplatzes und wäre beim nächsten Verteilen kommentarlos verschwunden. */
  padding-top: env(safe-area-inset-top, 0px);
}

/* Die Innenbreite legt jede App selbst fest (der Arbeitsplatz nutzt
   1600px, Cockpit und Intranet 1320px) - nur die Höhe ist gemeinsam.

   ⚠ Die Höhe ist 80px und daran hängt etwas: 16px oben + 16px unten plus
   die Zeilenbox der Wortmarke (30px × 1.6 = 48px). Die Gesprächsspalte des
   KI-Arbeitsplatzes (.leiste__kopf in Seitenleiste.svelte) ist auf genau
   diese 80px festgesetzt, damit ihr Trennstrich auf einer Linie mit der
   Unterkante der Kopfleiste sitzt. Wer hier padding oder line-height
   ändert, muss dort mitziehen - sonst versetzen sich die beiden
   waagerechten Linien sichtbar gegeneinander. */
/* Seitliches Padding per max(): Wo die App `viewport-fit=cover` setzt, reicht
   die Seite bis an den Geraeterand - im Querformat liegt beim iPhone dann links
   oder rechts der Notch (env(safe-area-inset-*) rund 59px) genau ueber der
   Wortmarke bzw. den Knoepfen rechts. Im Hochformat und auf dem Desktop sind
   die Insets 0, dann gelten schlicht die 24px.
   Die 16px oben/unten bleiben unberuehrt - daran haengt die 80px-Hoehe. */
.kopfleiste__innen {
  margin: 0 auto;
  padding: 16px max(24px, env(safe-area-inset-right)) 16px max(24px, env(safe-area-inset-left));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

/* ── Marken-Zelle ──────────────────────────────────────────── */
.kopfleiste__marke {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

/* Wortmarke: Gewicht 300 in jeder Größe, das grüne ΛI einen Tick
   schwerer auf 400. Kein Unterstrich unter dem Λ - CI 2.0. */
.kopfleiste__wortmarke {
  font-size: 1.875rem;
  font-weight: 300;
  letter-spacing: 0.02em;
  line-height: 1.6;
  color: var(--d-heading, #f0f0f0);
  white-space: nowrap;
}
.kopfleiste__wortmarke .accent {
  color: var(--teal, #34b6aa);
  font-weight: 400;
}
/* Die Wortmarke ist ein Link auf die Startseite. text-decoration hier
   ausdrücklich abschalten und nicht dem Reset der App überlassen: der
   KI-Arbeitsplatz hat keinen globalen a-Reset, dort stand die Wortmarke
   sonst unterstrichen da - eine Marke mit Unterstreichung ist keine Marke
   mehr. Die Vorlage darf sich auf nichts verlassen, was ausserhalb von ihr
   liegt. */
a.kopfleiste__wortmarke,
a.kopfleiste__wortmarke:hover,
a.kopfleiste__wortmarke:focus {
  text-decoration: none;
}
a.kopfleiste__wortmarke:hover { color: var(--d-heading, #f0f0f0); }

.kopfleiste__trenner {
  width: 1px;
  height: 34px;
  background: rgba(255, 255, 255, 0.16);
  flex-shrink: 0;
}

/* ── Produkt-Signet ────────────────────────────────────────── */
/* Die Diamantform trägt nur, was von FrΛIraum kommt (CI 1b). Auf
   der dunklen Leiste sind die Farben gegenüber der Website
   invertiert: Teal-Fläche, dunkles Icon. Silhouette per clip-path,
   Schatten deshalb als drop-shadow - ein box-shadow würde vom
   clip-path abgeschnitten. Das Icon per place-items:start und
   padding-top nach oben, weil die Diagonalen unten Fläche
   wegnehmen. */
.kopfleiste__signet {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}
.kopfleiste__diamant {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: start center;
  padding-top: 6px;
  background: var(--teal, #34b6aa);
  color: var(--ink, #111315);
  clip-path: polygon(25% 0%, 75% 0%, 100% 34.4%, 50% 100%, 0% 34.4%);
  filter: drop-shadow(0 0 9px rgba(52, 182, 170, 0.45));
  flex-shrink: 0;
}
.kopfleiste__diamant svg {
  width: 14px;
  height: 14px;
  display: block;
}

/* Zweizeiliger Block: Produktname oben, Build-Kennung darunter. */
.kopfleiste__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.kopfleiste__titel {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--d-text, #c7ccd1);
  white-space: nowrap;
}
.kopfleiste__build {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: rgba(199, 204, 209, 0.6);
  white-space: nowrap;
}

/* ── Rechte Seite ──────────────────────────────────────────── */
/* Nur die gemeinsame Ausrichtung; der Inhalt gehört jeder App
   selbst (Modus-Umschalter, Aufklapp-Menü, Linkliste). */
.kopfleiste__rechts {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* ── Schmale Viewports ─────────────────────────────────────── */
@media (max-width: 900px) {
  .kopfleiste__innen { padding: 12px max(20px, env(safe-area-inset-right)) 12px max(20px, env(safe-area-inset-left)); gap: 14px; }
  .kopfleiste__wortmarke { font-size: 1.375rem; line-height: 1.4; }
  .kopfleiste__trenner { height: 28px; }
  .kopfleiste__diamant { width: 28px; height: 28px; padding-top: 5px; }
  .kopfleiste__diamant svg { width: 12px; height: 12px; }
  /* Die Build-Kennung ist Diagnose, kein Inhalt - auf dem Handy weg. */
  .kopfleiste__build { display: none; }
}
@media (max-width: 560px) {
  .kopfleiste__titel, .kopfleiste__trenner { display: none; }
}