/* obs-mk-nav.css -- Mehrstufige Marketingnavigation. 05.09.2026, ueberarbeitet 06.09.2026, Gruppe und Stoerer 28.09.2026.
   Die Huelle rendert <navbar data-levels="3">; das CMS liefert dafuer die
   Bootstrap-Form li.dropdown > a.dropdown-toggle + ul.dropdown-menu. Bootstrap
   selbst laedt die Marketingseite NICHT -- deshalb Aufklappen hier und in
   obs-mk-nav.js, statt eine 60-KB-Bibliothek fuer ein Menue zu holen.

   FARBEN: diese Huelle laedt openbi-studio.css + obs-marke.css, NICHT obs.css.
   Es gibt hier also kein --color-border und kein --color-surface-muted; die
   Leiste hat bis zum 06.09.2026 unbemerkt auf ihre Ersatzwerte zurueckgegriffen
   (#e6e6ea statt #e3e9ee). Was es hier wirklich gibt: --color-line,
   --color-neutral-200, --mk2-ton, --mk2-ton-weich, --mk2-ton-tief.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   DIE LEISTE BLEIBT STEHEN, 06.09.2026 (Kai: "mach die navigation noch huebsch").
   Die Marketingseiten sind lang -- /produkte/crm hat 14 Baender. Wer unten
   ankommt und weiterschauen will, musste bisher erst wieder ganz nach oben.

   :has(.mk2-nav) haelt das auf die Marketing-Huelle begrenzt: dieselbe Klasse
   .obs-header traegt auch die Studio-Huelle, und die soll das nicht erben.
   Ein Browser ohne :has laesst die Leiste einfach mitscrollen wie bisher --
   kein kaputter Zustand, nur der alte.

   Nur ab 900px: darunter steht die Navigation in drei Zeilen, und eine Leiste,
   die ein Fuenftel des Handyschirms dauerhaft belegt, ist keine Hilfe.
   -------------------------------------------------------------------------- */
@media (min-width: 901px) {
  .obs-header:has(.mk2-nav) {
    position: sticky;
    top: 0;
    z-index: 40;
    /* Leicht durchscheinend mit Weichzeichner: der Inhalt schiebt sich sichtbar
       darunter durch, statt an einer weissen Kante zu verschwinden. */
    background: rgba(255, 255, 255, .82);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
  }
  /* Wo der Weichzeichner fehlt, waere durchscheinend nur unleserlich. */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .obs-header:has(.mk2-nav) { background: var(--color-surface, #fff); }
  }
}

.mk2-nav .nav-item { position: relative; }

/* --------------------------------------------------------------------------
   DAS KLAPPMENUE.
   -------------------------------------------------------------------------- */
.mk2-nav .dropdown-menu {
  position: absolute; top: calc(100% + .55rem); left: -.35rem; z-index: 60;
  /* .obs-nav ul setzt display:flex -- das legt die Eintraege nebeneinander.
     Hier wieder auf block, sonst wird das Klappmenue eine Zeile. 05.09.2026. */
  display: block;
  min-width: 16rem; margin: 0; padding: .45rem; list-style: none;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-line, #e3e9ee); border-radius: .85rem;
  /* Zwei Schatten: ein enger dunkler direkt an der Kante gibt die Kontur, ein
     weiter weicher das Schweben. Ein einzelner Schatten kann nur eins davon. */
  box-shadow: 0 1px 2px rgba(22, 33, 43, .06), 0 18px 40px -12px rgba(22, 33, 43, .22);
  opacity: 0; visibility: hidden; transform: translateY(-.35rem) scale(.985);
  transform-origin: top left;
  /* visibility NICHT mit ueberblenden: ein Uebergang auf visibility haelt den
     Wert die ganze Dauer auf dem Startwert, und in Chrome blieb das Menue damit
     dauerhaft unsichtbar -- gemessen am 05.09.2026. Nur opacity und transform. */
  transition: opacity .14s ease, transform .14s ease;
}
/* Die Bruecke ueber die Luecke: ohne sie faellt das Menue zu, sobald die Maus
   die 0,55rem zwischen Link und Kasten quert. obs-mk-nav.js hat dafuer zwar
   180ms Nachlauf, aber ein Weg ohne Loch ist besser als ein Wartezimmer. */
.mk2-nav .nav-item > .dropdown-menu::before {
  content: ""; position: absolute; left: 0; right: 0; top: -.6rem; height: .6rem;
}
.mk2-nav .nav-item.ist-offen > .dropdown-menu,
.mk2-nav .dropdown-menu li.ist-offen > .dropdown-menu { opacity: 1; visibility: visible; transform: none; }
.mk2-nav .dropdown-menu li { position: relative; }
.mk2-nav .dropdown-item {
  display: block; padding: .5rem .65rem; border-radius: .5rem;
  text-decoration: none; white-space: nowrap; font-size: .95rem;
  color: var(--color-text, #16212b);
  transition: background .12s ease, color .12s ease;
}
.mk2-nav .dropdown-item:hover, .mk2-nav .dropdown-item:focus-visible {
  background: var(--mk2-ton-weich, #dcedf7);
  color: var(--mk2-ton-tief, #0e5f8f);
}
.mk2-nav .dropdown-menu .dropdown-menu {
  top: -.5rem;
  /* 100% ist die Breite des li, nicht des Kastens: der Kasten hat noch .45rem
     Polster darum. Ohne die dazu klebt die dritte Stufe an der Kante der
     zweiten, und man sieht eine Naht statt zweier Kaesten. */
  left: calc(100% + .9rem);
  transform-origin: top left;
}

/* --------------------------------------------------------------------------
   DAS AUFKLAPPZEICHEN, 06.09.2026 (Kai: "das Symbol zum Aufklappen wirkt
   verkrueppelt"). Vorher war es ein gefuelltes Dreieck aus vier Rahmen -- bei
   14px Schrift also ganze 4 Pixel hoch. Neben einem Wort gelesen sah das aus
   wie ein verrutschter Strich, nicht wie ein Pfeil.

   Jetzt ist es ein Winkel aus zwei Strichen, um 45 Grad gedreht: gleiche
   Strichstaerke wie die Schrift daneben, waechst mit der Schriftgroesse mit,
   und beim Oeffnen dreht er sich nach oben statt stumm liegen zu bleiben.
   -------------------------------------------------------------------------- */
.mk2-nav .dropdown-toggle::after {
  content: ""; display: inline-block;
  width: .36em; height: .36em;
  margin-left: .45em;
  /* Erst alle vier Rahmen raeumen -- sonst bleibt vom Dreieck ein Rest stehen. */
  border: 0;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-.16em) rotate(45deg);
  transition: transform .18s cubic-bezier(.2, .8, .3, 1), opacity .18s ease;
  opacity: .5;
}
.mk2-nav .nav-item.ist-offen > .dropdown-toggle::after {
  transform: translateY(.06em) rotate(-135deg);
  opacity: 1;
}
/* Im Klappmenue zeigt derselbe Winkel nach rechts, weil die naechste Stufe
   dort aufgeht -- und beim Oeffnen nach unten. */
.mk2-nav .dropdown-menu .dropdown-toggle::after {
  float: right; margin-top: .34em; margin-left: .6rem;
  border: 0;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
}
.mk2-nav .dropdown-menu li.ist-offen > .dropdown-toggle::after {
  transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   DIE PUNKTE SELBST, 06.09.2026 (Kai: "die Navigation sieht nicht so schoen
   aus"). Drei Sachen waren es:

   1. .obs-nav .nav-link war display:inline und ohne Polster. Ein Link ohne
      Flaeche hat keine Trefferzone -- man muss die Buchstaben treffen -- und
      das Aufklappzeichen hat nichts, woran es sich ausrichten koennte.
   2. Zwischen dem letzten Menuepunkt und "admin/Abmelden" lagen dieselben
      28px wie zwischen zwei Menuepunkten. Zwei verschiedene Dinge sahen aus
      wie eine Reihe.
   3. Die aktive Seite war nur farbig und fett. Ein Strich darunter sagt es
      auf einen Blick.
   -------------------------------------------------------------------------- */
.mk2-nav ul.navbar-nav { gap: .15rem; align-items: center; }
.mk2-nav .nav-item { display: flex; }
.mk2-nav .nav-link {
  display: inline-flex; align-items: center;
  padding: .45rem .65rem; border-radius: .6rem;
  text-decoration: none; white-space: nowrap; line-height: 1.2;
  transition: background .14s ease, color .14s ease;
}
.mk2-nav .nav-link:hover,
.mk2-nav .nav-item.ist-offen > .nav-link {
  background: var(--mk2-ton-weich, #dcedf7);
  color: var(--mk2-ton-tief, #0e5f8f);
}
.mk2-nav .nav-link:focus-visible {
  outline: 2px solid var(--mk2-ton, #1f8fce); outline-offset: 2px;
}
/* Der Strich haengt am nav-item, nicht am Link: das nav-item ist schon
   position:relative, der Link ist es nicht -- und soll es auch nicht werden,
   sonst wandert das Klappmenue mit. */
.mk2-nav .nav-item > .nav-link.is-active::before {
  content: ""; position: absolute; left: .65rem; right: .65rem; bottom: -.1rem;
  height: 2px; border-radius: 2px; background: var(--mk2-ton, #1f8fce);
}
/* Trennt die Seitenpunkte vom Konto-Bereich rechts daneben. */
.mk2-nav { padding-right: 1.35rem; border-right: 1px solid var(--color-line, #e3e9ee); }

@media (prefers-reduced-motion: reduce) {
  .mk2-nav .dropdown-menu,
  .mk2-nav .nav-link,
  .mk2-nav .dropdown-item,
  .mk2-nav .dropdown-toggle::after { transition: none; }
}

@media (max-width: 900px) {
  /* In der Spalte trennt der Strich nichts mehr, er steht nur im Weg. */
  .mk2-nav { padding-right: 0; border-right: 0; }
  /* Die Punkte stehen hier in mehreren Zeilen. Etwas enger gesetzt, damit die
     Leiste nicht ein Fuenftel des Schirms belegt, bevor Inhalt kommt. */
  .mk2-nav ul.navbar-nav { gap: .1rem .15rem; }
  .mk2-nav .nav-link { padding: .35rem .5rem; }
  .mk2-nav .nav-item > .nav-link.is-active::before { left: .5rem; right: .5rem; }
  .mk2-nav .dropdown-menu { position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; padding: 0 0 .3rem .8rem; min-width: 0; display: none;
    background: transparent; }
  .mk2-nav .nav-item > .dropdown-menu::before { content: none; }
  .mk2-nav .nav-item.ist-offen > .dropdown-menu,
  .mk2-nav .dropdown-menu li.ist-offen > .dropdown-menu { display: block; }
  .mk2-nav .dropdown-menu .dropdown-menu { left: 0; }
}

/* --------------------------------------------------------------------------
   WENIGER PUNKTE OBEN, 28.09.2026 (Kai: "das sieht bisschen gequetscht aus").
   Der Baum hat neun Hauptpunkte, dazu Anmelden und Kostenlos starten - und ein
   Blog kommt noch. obs-mk-nav.js fasst deshalb Gesamtsystem, So funktioniert es,
   Von null auf live, Technologie, Sicherheit und Marktplatz unter "Plattform"
   zusammen und traegt "Angebot" als Knopf nach rechts. Der Seitenbaum und die
   Adressen bleiben, wie sie sind: nur das DOM wird umgehaengt. Die Regeln hier
   geben der Gruppe und dem Knopf ihr Aussehen; die Klappmechanik von oben gilt
   fuer die Gruppe unveraendert, weil sie dieselben Klassen traegt.
   -------------------------------------------------------------------------- */
/* Etwas mehr Luft zwischen den verbliebenen Punkten - fuenf statt neun. */
.mk2-nav ul.navbar-nav { gap: .3rem; }
.mk2-nav .nav-link { padding: .45rem .8rem; }
.mk2-nav .nav-item > .nav-link.is-active::before { left: .8rem; right: .8rem; }

/* Der Angebots-Knopf: eigene Familie neben Anmelden (ghost) und Kostenlos
   starten (primary). Umrandet in Akzent, gefuellt beim Zeigen - und mit der
   Bernstein-Marke der Beta-Pille, damit er als Stoerer gelesen wird, nicht als
   dritter blauer Knopf. */
.mk-cta-angebot {
  position: relative;
  border-color: var(--color-accent-300, #8fc7e5);
  background: var(--color-accent-100, #dcedf7);
  color: var(--color-accent-700, #0e5f8f);
  font-weight: 600;
  white-space: nowrap;
}
.mk-cta-angebot:hover, .mk-cta-angebot:focus-visible {
  background: var(--color-accent-700, #0e5f8f);
  border-color: var(--color-accent-700, #0e5f8f);
  color: #fff;
  text-decoration: none;
}
.mk-cta-angebot:focus-visible { outline: 2px solid var(--color-accent, #1f8fce); outline-offset: 2px; }
.mk-cta-marke {
  display: inline-block;
  padding: .1rem .4rem;
  border-radius: 999px;
  background: #f2b632;
  color: #1a1a1a;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.4;
}
/* Ein leiser Ring um den Knopf, dreimal nach dem Laden - Blickfang ohne Dauerblinken. */
.mk-cta-angebot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 10px;
  border: 2px solid #f2b632; opacity: 0; pointer-events: none;
  animation: mk-cta-ring 1.6s ease-out .6s 3;
}
@keyframes mk-cta-ring {
  0%   { opacity: .9; transform: scale(1); }
  100% { opacity: 0;  transform: scale(1.18); }
}
@media (prefers-reduced-motion: reduce) {
  .mk-cta-angebot::after { animation: none; }
}
/* Der Gruppenpunkt "Plattform" hat keine eigene Seite; der Link fuehrt auf
   Gesamtsystem. Im Klappmenue steht die erste Zeile deshalb nochmal - das ist
   gewollt, so bleibt jede Seite mit einem Klick erreichbar. */
.mk2-nav .mk-gruppe > .nav-link.is-active { color: var(--mk2-ton-tief, #0e5f8f); }

@media (max-width: 900px) {
  .mk2-nav ul.navbar-nav { gap: .1rem .15rem; }
  .mk2-nav .nav-link { padding: .35rem .5rem; }
  .mk2-nav .nav-item > .nav-link.is-active::before { left: .5rem; right: .5rem; }
  .mk-cta-angebot::after { animation: none; }
}

/* Kein Flackern beim Umhaengen: die Punktreihe bleibt 300 ms unsichtbar, bis
   obs-mk-nav.js sie umgebaut und data-umgehaengt gesetzt hat. Die Zeit laeuft
   ueber eine Animation ab, nicht ueber das Skript - faellt das Skript aus,
   erscheint die Reihe nach 300 ms trotzdem, mit allen neun Punkten. */
.mk2-nav ul.navbar-nav:not([data-umgehaengt]) { animation: mk-nav-ein 0s linear .3s both; }
@keyframes mk-nav-ein { from { opacity: 0; } to { opacity: 1; } }
.obs-header-right .btn { white-space: nowrap; }