/* ⚠ 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 ────────────────────────────────────────── */
/* Seit 09.10.2026 (Marke 2.0, Thorsten: „Rautenfeld statt Diamant,
   App-Icon entfällt") steht hier das Rautenfeld aus dem verteilten
   Bauteil design-system/rautenfeld (<Rautenfeld /> im Markup): weiße
   Kacheln, Akzent-Kachel Teal, 32 px. Die Zeile daneben (Produktname)
   sagt, welche App es ist - das frühere App-Icon im Diamanten war
   doppelt. Größe hier statt im Bauteil, damit der schmale Viewport
   unten mitziehen kann. */
.kopfleiste__signet {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}
.kopfleiste__signet .rf {
  width: 32px;
  height: 32px;
  color: #fff;
  --rf-akzent: var(--teal, #34b6aa);
  filter: drop-shadow(0 0 9px rgba(52, 182, 170, 0.35));
}

/* 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;
}

/* ── Mandantenzustand ──────────────────────────────────────── */
/* Kennzeichen hinter dem Signet, wenn die Instanz nicht im
   Normalbetrieb ist: `Lab` als neutrales Etikett, `Trial` mit
   Enddatum. Ab 14 Tagen vor Ablauf hervorgehoben - über Wort UND
   Farbe (der Text wechselt auf „endet in n Tagen"), nie nur Farbe.
   Active zeigt nichts; Suspended und Canceled kommen nie bis zur
   Kopfleiste, dort steht die Sperrseite. Bauplan „Atlas
   Mandantenzustand" (14.09.2026), dieselbe Optik in Arbeitsplatz
   und Cockpit. Die Wörter liefert jede App (sie kennt Datum und
   Resttage), die Form kommt von hier. */
.kopfleiste__zustand {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: var(--d-text, #c7ccd1);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
  flex-shrink: 0;
}
/* Bernstein, kein Rot: eine ablaufende Testphase ist ein Termin,
   kein Fehler. Auf der dunklen Leiste hell genug für 4,5:1. */
.kopfleiste__zustand--dringend {
  border-color: rgba(240, 180, 41, 0.7);
  background: rgba(240, 180, 41, 0.14);
  color: #f6d47a;
}

/* ── 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__signet .rf { width: 28px; height: 28px; }
  /* 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; }
  /* Das Kennzeichen bleibt - eine ablaufende Testphase gehört auch
     aufs Handy. Neben Wortmarke und Diamant ist bei 390px aber kein
     Platz (gemessen 14.09.2026: 374px Bedarf auf 347px Breite, das
     Kennzeichen schob sich über den Diamanten), also darf die
     Marken-Zelle umbrechen: das Kennzeichen rückt in eine zweite
     Zeile. Ohne Kennzeichen bricht nichts um - Wortmarke und Diamant
     brauchen zusammen 152px. */
  .kopfleiste__marke { flex-wrap: wrap; row-gap: 6px; }
  .kopfleiste__zustand { padding: 4px 8px; letter-spacing: 0.04em; }
}