/* Dombrowski – Tropfen-Navigation. Ergänzt das Plugin „Liquid Glass Navigation“, ändert dessen Stylesheet nicht. */

/* Das UIkit-Dropdown wird durch die Tropfen-Box ersetzt (nur wenn das Skript läuft) */
@media (min-width: 960px) {
  .dm-nd-ready .tm-header .uk-navbar-dropdown { display: none !important; }
}

.dm-nd { position: absolute; z-index: 3; pointer-events: none; visibility: hidden; contain: layout; }
.dm-nd.is-on { visibility: visible; }
.dm-nd-shadow, .dm-nd-edge { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.dm-nd-glass {
  position: absolute; inset: 0;
  /* Tint wie die Leiste (folgt „Tint-Stärke“ und „Tint-Farbe“ im Regler-Panel) plus dünner Lesefilm, der beim Aufweiten dazukommt */
  background:
    linear-gradient(color-mix(in srgb, var(--dm-veil, rgba(255, 244, 228, .08)) calc(var(--dm-k, 0) * 100%), transparent), color-mix(in srgb, var(--dm-veil, rgba(255, 244, 228, .08)) calc(var(--dm-k, 0) * 100%), transparent)),
    var(--dm-tint, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
          backdrop-filter: blur(14px) saturate(180%);
}
.dm-nd.is-hit .dm-nd-glass { pointer-events: auto; cursor: pointer; }
.dm-nd.is-open .dm-nd-glass { cursor: default; }

/* Menü in der Box */
.dm-nd-menus { position: absolute; inset: 0; pointer-events: none; }
.dm-nd-menu {
  position: absolute; display: none; box-sizing: border-box; padding: 10px;
  color: var(--lg-text); text-shadow: var(--lg-text-shadow);
}
.dm-nd-menu.is-cur { display: block; }
.dm-nd-item {
  display: flex; align-items: center; height: 48px; padding: 0 18px; border-radius: 16px; white-space: nowrap;
  color: var(--lg-text) !important; text-decoration: none !important;
  font-family: 'Atkinson Hyperlegible Next', system-ui, sans-serif; font-size: 1.02rem; font-weight: 500; letter-spacing: .01em;
  opacity: 0; transform: translateY(6px); filter: blur(3px);
  transition: opacity .34s ease, transform .34s cubic-bezier(.2, .8, .2, 1), filter .34s ease, background .2s ease, box-shadow .2s ease;
  transition-delay: calc(var(--i, 0) * 45ms), calc(var(--i, 0) * 45ms), calc(var(--i, 0) * 45ms), 0s, 0s;
}
.dm-nd-menu.is-in .dm-nd-item { opacity: 1; transform: none; filter: none; }
.dm-nd.is-open .dm-nd-menu.is-in { pointer-events: auto; }
.dm-nd-item:hover, .dm-nd-item:focus-visible {
  background: color-mix(in srgb, var(--lg-text) 9%, transparent);
  box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--lg-text) 12%, transparent), inset 0 1px 1px rgba(255, 240, 218, .5);
}
.dm-nd-item:focus-visible { outline: 2px solid var(--lg-text); outline-offset: -2px; }

/* Menüpunkt bleibt als Glas-Pille markiert, solange seine Box offen ist */
.tm-header .uk-navbar-nav > li.dm-open > a {
  background: color-mix(in srgb, var(--lg-text) 9%, transparent);
  box-shadow: 0 4px 12px rgba(56, 26, 12, .10), inset 0 0 0 .5px color-mix(in srgb, var(--lg-text) 12%, transparent), inset 0 1px 1px rgba(255, 240, 218, .55);
}

@media (prefers-reduced-motion: reduce) { .dm-nd-item { transition: none; transition-delay: 0s; filter: none; transform: none; } }

/* ---------- Union-Modus (Chromium): die Leiste selbst trägt die Wölbung ---------- */
.dm-ug { display: none; position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.dm-ug-on > .dm-ug { display: block; }
.dm-ug svg { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; max-width: none; }
.dm-ug-shadow { z-index: -2; }
.dm-ug-glass { position: absolute; left: 0; top: 0; z-index: -1; pointer-events: none; }
.dm-ug-rim { z-index: -1; }
/* Solange die Leiste ihren Filter abgegeben hat, würden die Menü-Pillen und Buttons direkt das Foto abtasten (Sättigung 1,8 → orange).
   In der Ruhe sehen sie nur die Leiste und bleiben klar: dasselbe hier. */
.tm-header .uk-navbar-container.dm-ug-on :is(.uk-navbar-nav > li > a, .uk-button, .uk-navbar-toggle) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
/* Eigener Rand/Schatten statt der CSS-Schatten der Leiste, damit sie der gemeinsamen Kontur folgen */
.tm-header .uk-navbar-container.dm-ug-on { box-shadow: none !important; }
/* Während die Wölbung an der Leiste hängt, ist die separate Glasfläche nur noch Klickfläche */
.dm-nd.is-ug .dm-nd-glass { opacity: 0; }

/* Safari/Firefox: die angehängte Wölbung hat dieselbe Farbe wie die Leiste und läuft nahtlos in sie über */
.dm-nd.is-att .dm-nd-glass { background: var(--dm-att-tint); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Ausblenden der Box (Kopie): halb so lang wie vorher, kein Zurückfließen in den Tropfen */
.dm-nd-ghost, .dm-nd-ghost * { pointer-events: none !important; }
.dm-nd-ghost.is-out > .dm-nd-glass, .dm-nd-ghost.is-out > .dm-nd-shadow, .dm-nd-ghost.is-out > .dm-nd-edge, .dm-nd-ghost.is-out > .dm-nd-menus {
  opacity: 0 !important; transform: translateY(-5px); transition: opacity .13s cubic-bezier(.4, 0, 1, 1), transform .13s cubic-bezier(.4, 0, 1, 1);
}

/* ---------- Leichtes CSS-Glas (Safari/Firefox, Engine „css“ des Plugins) ----------
   Safari kann keinen SVG-Filter auf dem Backdrop. Statt die Seite zu kopieren (Engine „clone“) gibt es hier nur Browser-Mittel:
   backdrop-filter (Blur, Sättigung, Helligkeit), Glanzverlauf und Lichtkanten als Insets. Kein JS pro Scroll, keine zweite Seite im DOM.
   Leiste, Tropfen und Box teilen sich dieselbe Rezeptur (Union: dombrowski-nav.js baut die Wölbung als Teil der Leistenfläche). */
:root { --dm-glass-blur: blur(20px) saturate(170%); }
.tm-header .uk-navbar-container.lgn-flat,
.tm-header-mobile .uk-navbar-container.lgn-flat {
  -webkit-backdrop-filter: var(--dm-glass-blur);
          backdrop-filter: var(--dm-glass-blur);
  box-shadow:
    0 10px 30px rgba(var(--lg-shadow-rgb), .20),
    0 2px 6px rgba(var(--lg-shadow-rgb), .12),
    inset 0 0 0 .5px rgba(var(--lg-hi-rgb), .35),
    inset 0 1px 1px rgba(var(--lg-hi-rgb), .35),
    inset 0 -8px 16px -8px rgba(var(--lg-hi-rgb), .18) !important;
}
/* Hängt der Tropfen an der Leiste, liefern .dm-ug-shadow und .dm-ug-rim Schatten und Lichtkante entlang der gemeinsamen Kontur.
   Die Inset-Kanten der Leiste (Regel oben, spätere Reihenfolge und gleiche Spezifität wie .dm-ug-on) müssen dann weg, sonst läuft
   ihre Unterkante als gerade Linie quer über den Tropfen. */
.tm-header .uk-navbar-container.lgn-flat.dm-ug-on { box-shadow: none !important; }
/* Glanz: Licht fällt von links oben, unten rechts sammelt sich ein warmer Schein (Maße in Leistenhöhe/-breite) */
.lgn-flat::before { content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(var(--lg-hi-rgb), .04) 0%, rgba(var(--lg-hi-rgb), 0) 55%); }
.lgn-flat > .uk-container { position: relative; z-index: 2; }
/* Hängt der Tropfen an der Leiste, trägt die gemeinsame Glasfläche (.dm-ug-glass) denselben Glanz, die Leiste selbst gibt ihn ab */
.tm-header .uk-navbar-container.lgn-flat.dm-ug-on::before { display: none; }
.dm-ug-glass.is-css { width: var(--ug-w); -webkit-backdrop-filter: var(--dm-glass-blur); backdrop-filter: var(--dm-glass-blur);
  background:
    linear-gradient(180deg, rgba(var(--lg-hi-rgb), .04) 0, rgba(var(--lg-hi-rgb), 0) calc(var(--ug-h) * .55)); }
/* Freier Tropfen und Box im CSS-Glas: gleicher Blur, gleicher Glanz wie die Leiste */
.dm-nd.dm-css .dm-nd-glass {
  -webkit-backdrop-filter: var(--dm-glass-blur); backdrop-filter: var(--dm-glass-blur);
  background:
    linear-gradient(180deg, rgba(var(--lg-hi-rgb), .04) 0%, rgba(var(--lg-hi-rgb), 0) 55%),
    linear-gradient(color-mix(in srgb, var(--dm-veil, rgba(255, 244, 228, .08)) calc(var(--dm-k, 0) * 100%), transparent), color-mix(in srgb, var(--dm-veil, rgba(255, 244, 228, .08)) calc(var(--dm-k, 0) * 100%), transparent)),
    var(--dm-tint, transparent); }
@media (prefers-reduced-transparency: reduce) { .lgn-flat, .dm-ug-glass.is-css, .dm-nd.dm-css .dm-nd-glass { -webkit-backdrop-filter: none; backdrop-filter: none; } }
/* Ohne backdrop-filter (sehr alte Browser, Energiesparmodus): etwas dichter tönen, damit die Schrift lesbar bleibt */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lgn-flat::before { background: rgba(var(--lg-shadow-rgb), .42); }
}

/* ---------- Gleiche Sättigung in Ruhe und beim Hover ----------
   Beim Hover liegt die Leiste auf der gemeinsamen Glasfläche (.dm-ug-glass, Kind der Leiste). Deren Hintergrundbild enthält auch die Tönung
   der Leiste, und der Filter sättigt sie mit. In Ruhe sättigt der Filter nur die Seite dahinter, die Tönung kommt danach darüber, wirkt also blasser.
   Die Sättigung ist eine lineare Farbmatrix, deshalb ist „Tönung sättigen, dann darüberlegen“ dasselbe wie „darüberlegen, dann sättigen“:
   in Ruhe wird die Tönung mit derselben Matrix vorgesättigt (--dm-sat = Sättigung des Glasfilters), beim Hover bleibt sie unverändert. */
@supports (color: color(from red srgb r g b)) {
  :root { --dm-sat: 2.15; }
  .tm-header .uk-navbar-container.lgn-flat, .tm-header-mobile .uk-navbar-container.lgn-flat { --dm-sat: 1.7; }
  .tm-header .uk-navbar-container, .tm-header-mobile .uk-navbar-container {
    --dm-k1: calc(.213 + .787 * var(--dm-sat)); --dm-k2: calc(.715 - .715 * var(--dm-sat)); --dm-k3: calc(.072 - .072 * var(--dm-sat));
    --dm-k4: calc(.213 - .213 * var(--dm-sat)); --dm-k5: calc(.715 + .285 * var(--dm-sat)); --dm-k7: calc(.072 + .928 * var(--dm-sat));
  --dm-s0: color(from var(--lg-c0) srgb calc(r * var(--dm-k1) + g * var(--dm-k2) + b * var(--dm-k3)) calc(r * var(--dm-k4) + g * var(--dm-k5) + b * var(--dm-k3)) calc(r * var(--dm-k4) + g * var(--dm-k2) + b * var(--dm-k7)));
  --dm-s1: color(from var(--lg-c1) srgb calc(r * var(--dm-k1) + g * var(--dm-k2) + b * var(--dm-k3)) calc(r * var(--dm-k4) + g * var(--dm-k5) + b * var(--dm-k3)) calc(r * var(--dm-k4) + g * var(--dm-k2) + b * var(--dm-k7)));
  --dm-s2: color(from var(--lg-c2) srgb calc(r * var(--dm-k1) + g * var(--dm-k2) + b * var(--dm-k3)) calc(r * var(--dm-k4) + g * var(--dm-k5) + b * var(--dm-k3)) calc(r * var(--dm-k4) + g * var(--dm-k2) + b * var(--dm-k7)));
  --dm-s3: color(from var(--lg-c3) srgb calc(r * var(--dm-k1) + g * var(--dm-k2) + b * var(--dm-k3)) calc(r * var(--dm-k4) + g * var(--dm-k5) + b * var(--dm-k3)) calc(r * var(--dm-k4) + g * var(--dm-k2) + b * var(--dm-k7)));
  --dm-s4: color(from var(--lg-c4) srgb calc(r * var(--dm-k1) + g * var(--dm-k2) + b * var(--dm-k3)) calc(r * var(--dm-k4) + g * var(--dm-k5) + b * var(--dm-k3)) calc(r * var(--dm-k4) + g * var(--dm-k2) + b * var(--dm-k7)));
  --dm-s5: color(from var(--lg-c5) srgb calc(r * var(--dm-k1) + g * var(--dm-k2) + b * var(--dm-k3)) calc(r * var(--dm-k4) + g * var(--dm-k5) + b * var(--dm-k3)) calc(r * var(--dm-k4) + g * var(--dm-k2) + b * var(--dm-k7)));
  --dm-s6: color(from var(--lg-c6) srgb calc(r * var(--dm-k1) + g * var(--dm-k2) + b * var(--dm-k3)) calc(r * var(--dm-k4) + g * var(--dm-k5) + b * var(--dm-k3)) calc(r * var(--dm-k4) + g * var(--dm-k2) + b * var(--dm-k7)));
  --dm-s7: color(from var(--lg-c7) srgb calc(r * var(--dm-k1) + g * var(--dm-k2) + b * var(--dm-k3)) calc(r * var(--dm-k4) + g * var(--dm-k5) + b * var(--dm-k3)) calc(r * var(--dm-k4) + g * var(--dm-k2) + b * var(--dm-k7)));
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--dm-s0) var(--lg-a0, calc(var(--lg-tint) * 100%)), transparent),
      color-mix(in srgb, var(--dm-s1) var(--lg-a1, calc(var(--lg-tint) * 100%)), transparent),
      color-mix(in srgb, var(--dm-s2) var(--lg-a2, calc(var(--lg-tint) * 100%)), transparent),
      color-mix(in srgb, var(--dm-s3) var(--lg-a3, calc(var(--lg-tint) * 100%)), transparent),
      color-mix(in srgb, var(--dm-s4) var(--lg-a4, calc(var(--lg-tint) * 100%)), transparent),
      color-mix(in srgb, var(--dm-s5) var(--lg-a5, calc(var(--lg-tint) * 100%)), transparent),
      color-mix(in srgb, var(--dm-s6) var(--lg-a6, calc(var(--lg-tint) * 100%)), transparent),
      color-mix(in srgb, var(--dm-s7) var(--lg-a7, calc(var(--lg-tint) * 100%)), transparent)) !important;
  }
  .tm-header .uk-navbar-container.dm-ug-on, .tm-header-mobile .uk-navbar-container.dm-ug-on {
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--lg-c0) var(--lg-a0, calc(var(--lg-tint) * 100%)), transparent),
      color-mix(in srgb, var(--lg-c1) var(--lg-a1, calc(var(--lg-tint) * 100%)), transparent),
      color-mix(in srgb, var(--lg-c2) var(--lg-a2, calc(var(--lg-tint) * 100%)), transparent),
      color-mix(in srgb, var(--lg-c3) var(--lg-a3, calc(var(--lg-tint) * 100%)), transparent),
      color-mix(in srgb, var(--lg-c4) var(--lg-a4, calc(var(--lg-tint) * 100%)), transparent),
      color-mix(in srgb, var(--lg-c5) var(--lg-a5, calc(var(--lg-tint) * 100%)), transparent),
      color-mix(in srgb, var(--lg-c6) var(--lg-a6, calc(var(--lg-tint) * 100%)), transparent),
      color-mix(in srgb, var(--lg-c7) var(--lg-a7, calc(var(--lg-tint) * 100%)), transparent)) !important;
  }
}

/* Vor dem Aufbau des Glasfilters (Skript) gilt derselbe Blur und dieselbe Sättigung wie danach. Der feste Rückfall des Plugins (blur 14, saturate 1,8) ließ die Leiste
   in den ersten Millisekunden dunkler und anders gesättigt erscheinen als nach dem Aufbau. Das Skript überschreibt dies inline durch den echten Filter. */
.tm-header .uk-navbar-container, .tm-header-mobile .uk-navbar-container {
  -webkit-backdrop-filter: blur(var(--dm-blur, 8.5px)) saturate(var(--dm-sat, 2.15));
          backdrop-filter: blur(var(--dm-blur, 8.5px)) saturate(var(--dm-sat, 2.15));
}

/* Nummern-Leiste + Hals: gleiche Glasfläche wie die Hauptleiste (JS: phoneGlass in dombrowski-nav.js) */
.dm-pg { position: absolute; z-index: 2; pointer-events: none; }
.dm-pg > * { position: absolute; left: 0; top: 0; }
.dm-pg-glass, .dm-pg-tint { width: 100%; height: 100%; }
.dm-pg-shadow, .dm-pg-rim { overflow: visible; }
@media (max-width: 1199px) { .dm-pg { display: none; } }
.dm-pg-on .dm-phonebar { background: none !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.dm-pg-on .dm-bridge { display: none !important; }

/* Leiste + Hals + Nummern-Leiste als eine Glasfläche (Chromium): die Tönung der Verlängerung liegt über dem Glas, wie die der Leiste */
.dm-ug-tint { position: absolute; left: 0; top: 0; pointer-events: none; }
.dm-ug-ext .dm-phonebar { background: none !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.dm-ug-ext .dm-bridge { display: none !important; }
/* Tönung der Verlängerung liegt UNTER dem Glas (wie die der Leiste im Backdrop), damit sie mitgesättigt wird */
.dm-ug-tint { z-index: -2; }