/* Gemeinsame Kopfzeile für alle BLUN Seiten.
   Papa 09.08.: "1 menue headder und nicht 10 mal das selbe gebaut."
   Diese Datei ist die eine Stelle für das Aussehen der Kopfzeile.
   Wer hier etwas ändert, ändert es auf allen Seiten. */

:root {
  --blun-marke: #0163ff;
  --blun-marke-hover: #0152d6;
  --kopf-text: #f5f7fb;
  --kopf-flaeche: rgba(5, 5, 6, 0.94);
}

/* Flaeche */
html body .nav,
html body header.nav,
html body .site-header {
  background: var(--kopf-flaeche);
}

/* Menuetext: auf allen Seiten gleich hell */
html body .nav a,
html body .nav .nav-link,
html body .nav .nav-drop-trigger,
html body header.nav a {
  color: var(--kopf-text);
}

/* Knoepfe: gleiche Größe, gleiche Form, gleiches Blau.
   Papa: "buttonform mehr quadratisch" - 8px statt 999px. */
html body .nav .btn,
html body .nav a.btn,
html body .nav button.btn,
html body .nav .nav-drop-trigger.btn {
  min-height: 48px;
  font-size: 15px;
  border-radius: 8px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

html body .nav .btn.primary,
html body .nav a.btn.primary {
  background: var(--blun-marke);
  border-color: var(--blun-marke);
  color: #fff;
}

html body .nav .btn.primary:hover,
html body .nav a.btn.primary:hover {
  background: var(--blun-marke-hover);
  border-color: var(--blun-marke-hover);
}


/* Papa 09.08.: "mach den headder sticky". Bleibt beim Scrollen oben. */
html body .nav,
html body header.nav,
html body .site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: none;
}

/* Papa: "buttonform mehr quadratisch". Der 11px-Wert aus den
   Seitenbloecken gewinnt sonst über diese Datei. */
html body .nav .btn,
html body .nav a.btn,
html body .nav button.btn,
html body .nav .nav-drop-trigger.btn,
html body .nav .btn.primary,
html body .nav .btn.secondary,
html body .nav .btn.ghost {
  border-radius: 8px;
  font-size: 15px;
}


/* Papa 09.08.: "1 headder musst ja nix nachziehen."
   Die Knopfregeln standen bis eben in 211 Seitenkopien. Sie stehen
   jetzt hier - EINMAL, für Kopfzeile UND Seiteninhalt. Wer sie
   ändert, ändert sie überall. */
html body .btn,
html body a.btn,
html body button.btn,
html body .btn.primary,
html body .btn.secondary,
html body .btn.ghost,
html body .btn.primary.lg,
html body .btn.ghost.lg,
html body .nav-drop-trigger.btn {
  min-height: 48px;
  font-size: 15px;
  border-radius: 8px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Flaechenfarben, ebenfalls aus den Seitenkopien hierher gezogen. */
html[data-v4-public],
html body { background: #050506; }
html body .mp-hero, html body .hero { background: #050506; }


/* Die Flaechenfarbe kommt aus der Variable --blun-bg, die eine
   !important-Regel einsetzt. Also wird die VARIABLE gesetzt, nicht
   dagegen angeschrieben - sonst gewinnt immer das !important.
   Wert ist der der Startseite: #050506. */
html[data-v4-public] { --blun-bg: #050506; --bg: #050506; }


/* Papa 09.08. mit Bild: "der trennstrich muss weg".
   Gemeint ist die Linie UNTER dem Hero, über dem Block "Mehr BLUN".
   Die Striche zwischen den Textabschnitten bleiben - die sollten
   ausdruecklich bleiben, nur mit gleichem Abstand. */
html body .mp-hero,
html body .mp-hero.landing-feature-hero,
html body .hero { border-bottom: 0; }
html body .mp-section.feature-other-strip { border-top: 0; }


/* Papa 09.08.: "mach den headder sticky" - der Wert stand richtig da
   und wirkte trotzdem nicht. Gemessen: html UND body tragen
   overflow-x: hidden, und das setzt position:sticky ausser Kraft.
   clip schneidet genauso ab, blockiert sticky aber nicht. */
html, body { overflow-x: clip; }


/* 10.08.: Der Chat-Knopf hatte auf der Startseite Groesse 0x0 und lag
   links oben. Grund: seine Regeln stehen in components.css, und die
   Startseite laedt sie nicht. Diese Datei kommt ueber den Baustein auf
   jede Seite - der Knopf kommt von dort, seine Gestaltung gehoert also
   auch hierher. Woertlich uebernommen, damit er ueberall so aussieht wie
   auf den Unterseiten, wo er richtig war. */
/* BLUN Chat Bubble — floating launcher (hidden on /chat itself via data-nobubble on body) */
body[data-nobubble="true"] .blun-chat-bubble{display:none}
.blun-chat-bubble{position:fixed;bottom:20px;right:20px;z-index:90;display:inline-flex;align-items:center;gap:10px;padding:12px 20px 12px 16px;background:var(--bg-inv);color:#fff !important;border-radius:var(--r-pill);box-shadow:0 14px 40px oklch(0.18 0.02 280 / 0.22),0 2px 6px oklch(0.18 0.02 280 / 0.12);text-decoration:none;font-family:var(--font-body);font-size:.92rem;font-weight:600;letter-spacing:.005em;transition:transform .18s ease, box-shadow .18s}
.blun-chat-bubble:hover{transform:translateY(-3px);box-shadow:0 20px 54px oklch(0.18 0.02 280 / 0.30)}
.blun-chat-bubble .bb-dot{width:8px;height:8px;border-radius:50%;background:var(--p-voice);box-shadow:0 0 0 3px oklch(0.9 0.08 150 / .5);flex-shrink:0;animation:bbPulse 2s ease-in-out infinite}
.blun-chat-bubble svg{opacity:.85}
@keyframes bbPulse{0%,100%{box-shadow:0 0 0 3px oklch(0.9 0.08 150 / .5)}50%{box-shadow:0 0 0 6px oklch(0.9 0.08 150 / .1)}}
@media(max-width:480px){
  .blun-chat-bubble{padding:10px 14px;font-size:.82rem}
  .blun-chat-bubble .bb-label{display:none}
}


/* 10.08., Papa: "die menue teile schrift ist immer noch farblich
   unterschiedlich". Gemessen ueber sieben Seiten: 20 Menuepunkte in
   zwei Farben - grau auf den Unterseiten, fast weiss auf Startseite,
   Kontakt und Impressum. Grund ist derselbe wie beim Chat-Knopf: die
   Regel steht in einer Datei, die diese drei Seiten nicht laden.
   Hier steht sie auf dem Weg, den jede Seite nimmt. */
html body .nav .nav-links a,
html body .nav .nav-link,
html body .nav .nav-drop-trigger,
html body .nav .mega-menu a,
html body .nav .api-menu a,
html body header.nav .nav-links a,
html body header.nav .nav-drop-trigger {
  color: rgb(168, 176, 189);
}
html body .nav .nav-links a:hover,
html body .nav .nav-link:hover,
html body .nav .nav-drop-trigger:hover,
html body .nav .mega-menu a:hover,
html body .nav .api-menu a:hover {
  color: rgb(245, 247, 251);
}


/* 10.08., Papa: "die sind ueberall rund passt nicht zum stil".
   Die Chips am Seitenende trugen 999px aus .feature-other-links a,
   waehrend Knoepfe und Karten auf 8px stehen. */
html body .feature-other-links a,
html body .mp-chip,
html body .feature-other-links .chip {
  border-radius: 8px;
}

/* 10.08.: Auf /datenschutz und /agb standen die Untermenue-Eintraege
   in rgb(90,100,128) - dunkelgrau auf dunklem Grund. Meine Regel von
   vorhin waehlte nach Klassen aus, und genau diese Links tragen
   keine. Deshalb hier ueber die Lage im Menue statt ueber die Klasse. */
html body .nav a:not(.btn),
html body header.nav a:not(.btn),
html body .nav .mega-menu a:not(.btn),
html body .nav .nav-drop a:not(.btn) {
  color: rgb(168, 176, 189);
}
html body .nav a:not(.btn):hover,
html body header.nav a:not(.btn):hover {
  color: rgb(245, 247, 251);
}
/* Das Logo behaelt seine eigene Farbe. */
html body .nav a.nav-logo,
html body .nav a.nav-logo:hover {
  color: inherit;
}


/* 10.08.: Auf /datenschutz und /agb setzt ein Inline-Stil mit
   !important die Menuefarbe auf var(--text-secondary), und der Wert
   stammt aus einer hellen Gestaltung: rgb(90,100,128) auf dunklem
   Grund, praktisch unlesbar.

   Statt mit einem weiteren !important dagegenzuhalten, wird hier die
   Variable gesetzt, die jene Regel ohnehin liest - beschraenkt auf
   die Kopfzeile, damit sie anderswo unveraendert bleibt. */
html body .nav,
html body header.nav,
html body nav.top,
html body .site-nav {
  --text-secondary: rgb(168, 176, 189);
  --ink-2: rgb(168, 176, 189);
  --kopf-text: rgb(168, 176, 189);
}


/* 10.08., Papa: "jetzt ist die farbe okay aber weight nicht".
   Gemessen war nicht die Staerke unterschiedlich, sondern die
   Schriftart: Geist Sans auf den Produktseiten, Hanken Grotesk auf
   Startseite und Kontakt, Inter auf den Rechtstexten - und dort
   ausserdem 13.8px statt 14.72px.

   Von Google geladen werden nur Bricolage Grotesque und Hanken
   Grotesk. Geist Sans und Inter bekommen deshalb eine Systemschrift,
   und dieselbe Staerke wirkt in einer anderen Schrift anders stark.

   Festgelegt: Hanken Grotesk, die geladene Marken-Schrift, die auch
   auf der Startseite steht. */
html body .nav,
html body .nav a,
html body .nav .nav-link,
html body .nav .nav-links a,
html body .nav .nav-drop-trigger,
html body .nav .mega-menu a,
html body .nav .api-menu a,
html body header.nav,
html body header.nav a,
html body header.nav .nav-drop-trigger {
  font-family: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
html body .nav .nav-links a,
html body .nav .nav-link,
html body .nav .nav-drop-trigger,
html body .nav .mega-menu a,
html body .nav .api-menu a {
  font-size: 14.72px;
  font-weight: 500;
}


/* 10.08.: Nach der ersten Schriftregel blieben vier Elemente je
   Produktseite bei Geist Sans - Klassen, die nicht in meiner Liste
   standen. Statt die Liste zu verlaengern und beim naechsten Element
   wieder danebenzuliegen: alles in der Kopfzeile bekommt die Schrift,
   Ausnahmen werden benannt. */
html body .nav,
html body .nav *,
html body header.nav,
html body header.nav * {
  font-family: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
/* Ausnahmen: Markenzeichen und Zeichensymbole behalten ihre eigene
   Schrift, Code-Schnipsel ihre feste Breite. */
html body .nav .nav-logo,
html body .nav .nav-logo *,
html body .nav svg,
html body .nav code,
html body .nav kbd {
  font-family: revert;
}
/* Die Rechtstexte setzten die Groesse des aktiven Punktes auf 12.9px
   statt 13.76px. */
html body .nav .nav-links a,
html body .nav .nav-link,
html body .nav .nav-drop-trigger,
html body .nav .mega-menu a,
html body .nav .api-menu a {
  font-size: 14.72px;
}


/* 10.08.: Die vier verbliebenen Elemente sind <button>, keine Links -
   "Modelle", "Produkte", "Plattform" und "Login" sind Aufklapper.
   Auf sie wirkt eine Inline-Regel mit !important:

     html[data-v4-public] :where(...,button,...) {
       font-family: "Geist Sans", Inter, system-ui !important }

   Gegen !important hilft keine laengere Selektorliste. Deshalb hier
   ebenfalls !important - aber nur innerhalb der Kopfzeile, damit die
   Regel nicht ueber ihren Anlass hinauswirkt. */
html body .nav button,
html body .nav .nav-drop-trigger,
html body header.nav button,
html body header.nav .nav-drop-trigger,
html body .nav a,
html body header.nav a {
  font-family: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}
html body .nav .nav-logo,
html body .nav .nav-logo * {
  font-family: revert !important;
}