/* obs-mk-nav.css -- Mehrstufige Marketingnavigation. 05.09.2026, ueberarbeitet 06.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; }
}