/* GPTGenie · Navigationsleiste als Liquid Glass (gehört zu js/navbar-glass.js).
   Wirkt nur mit html.nav-glass (Chromium). Durchsichtiger Hintergrund, damit man die Brechung am Rand sieht.
   Der Brechungsfilter kommt als Variable aus dem JS: --nav-glass-bf (Navbar), --nav-panel-bf (Handy-Menü). */
html.nav-glass .navbar {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.04) 48%, rgba(255,255,255,0.02) 100%),
    rgba(var(--a-160e2a,22,14,42),0.30) !important;
  backdrop-filter: var(--nav-glass-bf, blur(22px) saturate(180%)) !important;
  -webkit-backdrop-filter: var(--nav-glass-bf, blur(22px) saturate(180%)) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-top-color: rgba(255,255,255,0.34) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.35),
    inset 0 -1px 1px rgba(255,255,255,0.08),
    inset 0 0 18px rgba(255,255,255,0.04),
    0 16px 40px -14px rgba(0,0,0,0.7),
    0 0 0 0.5px rgba(var(--a-a855f7,168,85,247),0.25) !important;
}

/* ═══ Handy: Menü senkrecht, gleiches Glas und gleiche ziehbare Glas-Blase wie am PC ═══
   Ein Element mit backdrop-filter lässt seine Kinder nur noch sich selbst sehen. Deshalb liegt das Glas der Navbar
   am Handy auf einer eigenen Ebene (::after), sonst könnte das aufgeklappte Menü die Seite dahinter nicht brechen.
   Nur auf der Startseite (nur dort gibt es #nav-links), die Ratgeber-Seiten haben eine einfache Navbar. */
@media (max-width: 768px) {
  html:not(.gg-perf) .navbar#gg-tabnav {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow:
      0 12px 36px -12px rgba(0,0,0,0.65),
      0 0 0 0.5px rgba(var(--a-a855f7,168,85,247),0.2) !important;
  }
  html:not(.gg-perf) .navbar#gg-tabnav::after {
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.03) 45%, rgba(255,255,255,0.02) 100%),
      rgba(var(--a-140e26,20,14,38),0.42);
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.20), inset 0 -1px 1px rgba(255,255,255,0.04);
  }
  html.nav-glass .navbar#gg-tabnav::after {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.04) 48%, rgba(255,255,255,0.02) 100%),
      rgba(var(--a-160e2a,22,14,42),0.30);
    backdrop-filter: var(--nav-glass-bf, blur(22px) saturate(180%));
    -webkit-backdrop-filter: var(--nav-glass-bf, blur(22px) saturate(180%));
    box-shadow:
      inset 0 1px 1px rgba(255,255,255,0.35),
      inset 0 -1px 1px rgba(255,255,255,0.08),
      inset 0 0 18px rgba(255,255,255,0.04);
  }
  html.nav-glass .navbar#gg-tabnav { box-shadow: 0 16px 40px -14px rgba(0,0,0,0.7), 0 0 0 0.5px rgba(var(--a-a855f7,168,85,247),0.25) !important; }

  /* Aufgeklapptes Menü: eigenes Glas über der Seite */
  html:not(.gg-perf) .nav-links {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.03) 40%, rgba(255,255,255,0.02) 100%),
      rgba(var(--a-160e2a,22,14,42),0.66) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    border-top-color: rgba(255,255,255,0.34) !important;
    box-shadow:
      inset 0 1px 1px rgba(255,255,255,0.35),
      inset 0 -1px 1px rgba(255,255,255,0.08),
      inset 0 0 18px rgba(255,255,255,0.04),
      0 24px 50px -16px rgba(0,0,0,0.75),
      0 0 0 0.5px rgba(var(--a-a855f7,168,85,247),0.25) !important;
  }
  html.nav-glass .nav-links {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.03) 45%, rgba(255,255,255,0.02) 100%),
      rgba(var(--a-160e2a,22,14,42),0.5) !important;
    backdrop-filter: var(--nav-panel-bf, blur(24px) saturate(180%)) !important;
    -webkit-backdrop-filter: var(--nav-panel-bf, blur(24px) saturate(180%)) !important;
  }
  .nav-links {
    border-radius: 28px !important;
    padding: 6px;
    gap: 2px;
    touch-action: none;           /* Ziehen bewegt sofort die Blase, nicht die Seite */
    transform-origin: top right;  /* wächst aus dem Menü-Knopf heraus */
  }
  .nav-links.active { animation: ggNavPanelIn .42s var(--gl-spring) both; }
  .nav-links.active.gl-closing { animation: ggNavPanelOut .17s var(--gl-out) both; }
  .nav-links .nav-link {
    border-radius: 100px;
    padding: 12px 18px;
    border: 1px solid transparent;
  }
  .nav-links .nav-link.active { background: none; border-color: transparent; }
  .nav-links.active .nav-link { animation: ggNavItemIn .4s var(--gl-spring) both; }
  .nav-links.active .nav-link:nth-child(3) { animation-delay: .025s; }
  .nav-links.active .nav-link:nth-child(4) { animation-delay: .05s; }
  .nav-links.active .nav-link:nth-child(5) { animation-delay: .075s; }
  .nav-links.active .nav-link:nth-child(6) { animation-delay: .1s; }
  /* die Glas-Blase gibt es jetzt auch am Handy (senkrecht, js/glass-slider.js) */
  .nav-links .nav-indicator { display: block; border-radius: 100px; }
  /* der Glanz-Streifen (obere Hälfte) zeichnet sich in der breiten Blase sonst als Kante durchs Glas */
  .nav-links .nav-indicator.gl-lifted::after { opacity: 0; }
}
@keyframes ggNavPanelIn {
  from { opacity: 0; transform: translateY(-8px) scale(.9); }
  to { opacity: 1; transform: none; }
}
@keyframes ggNavPanelOut { to { opacity: 0; transform: translateY(-6px) scale(.95); } }
@keyframes ggNavItemIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .nav-links.active, .nav-links.active .nav-link { animation-duration: .01s !important; }
}
@media (max-width: 768px) and (prefers-reduced-transparency: reduce) {
  html .navbar#gg-tabnav::after { background: rgba(var(--a-140e26,20,14,38),0.96) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  html .nav-links { background: rgb(var(--a-18102c,24,16,44)) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}

/* ═══ PC: Navbar wie die Tab-Leiste in iOS 26 / Apple Music ═══
   Eine durchgehende Glas-Pille: die Links liegen direkt darin (kein eigener Kasten mehr), der aktive Link sitzt in
   einer ruhigen, hellen Glas-Blase und ist in der Akzentfarbe geschrieben. Die ziehbare Glas-Blase
   (js/glass-slider.js, .gl-lifted) bleibt genau wie bisher. */
@media (min-width: 769px) {
  .navbar .nav-links {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    padding: 4px !important;
    gap: 2px;
  }
  .navbar .nav-link {
    font-size: 15px;
    font-weight: 550;
    padding: 8px 17px;
    color: rgba(245,245,247,0.86);
  }
  .navbar .nav-link:hover { color: #fff; }
  .navbar .nav-link.active {
    color: rgb(var(--a-d8b4fe,216,180,254));
    font-weight: 650;
    text-shadow: none;
  }
  /* Blase in Ruhe: helles, ruhiges Glas statt lila Fläche */
  .navbar .nav-links .nav-indicator:not(.gl-lifted) {
    top: 4px;
    height: calc(100% - 8px);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.08) 55%, rgba(255,255,255,0.11) 100%) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    border-top-color: rgba(255,255,255,0.20) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.22),
      inset 0 -1px 0 rgba(255,255,255,0.06) !important;
  }
  .navbar .nav-links .nav-indicator:not(.gl-lifted)::before { opacity: 0; }
  .navbar .nav-links .nav-indicator:not(.gl-lifted)::after { opacity: .4; }
}

/* Symbole der Navbar-Links: nur in der Tab-Leiste am Handy */
.navbar .nav-ico { display: none; }

/* ═══ Handy: Navbar als Tab-Leiste unten (wie iOS 26 / Apple Music) ═══
   Links als Glas-Pille unten am Bildschirm (Symbol über Text), rechts daneben ein runder Glas-Knopf
   (Einstellungen, als Gast Anmelden). Die ziehbare Glas-Blase (js/glass-slider.js) gleitet waagerecht.
   Hamburger-Menü und Logo gibt es am Handy nicht mehr. Nur Startseite (#nav-links); Ratgeber-Seiten bleiben wie sie sind.
   Die Startseite erkennt man an #gg-tabnav (Navbar) und #gg-tabnav-page (body) in index.html, nicht an :has(#nav-links):
   :has kennt Safari erst ab iOS 15.4, auf älteren iPhones stand die Navbar sonst oben, halb alt, halb neu. */
@media (max-width: 768px) {
  :root:root body .navbar#gg-tabnav {
    position: fixed !important;
    top: auto !important;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    left: 12px !important; right: 12px !important;
    width: auto !important; height: auto !important; max-width: none !important;
    margin: 0 !important; padding: 0 !important;
    transform: none !important;
    background: transparent !important;
    border: 0 !important; border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    overflow: visible !important;
  }
  :root:root body .navbar#gg-tabnav::after, :root:root body .navbar#gg-tabnav::before { display: none !important; }
  .navbar#gg-tabnav .nav-content {
    display: flex !important; align-items: center !important; gap: 10px !important;
    padding: 0 !important; margin: 0 !important; height: auto !important; max-width: none !important; width: 100% !important;
  }
  .navbar#gg-tabnav .nav-logo,
  .navbar#gg-tabnav .hamburger-menu { display: none !important; }

  /* die Tab-Pille */
  .navbar #nav-links {
    display: flex !important; flex-direction: row !important; align-items: stretch !important;
    position: relative !important; inset: auto !important;
    flex: 1 1 auto; min-width: 0; width: auto !important; max-height: none !important;
    height: 62px; padding: 4px !important; gap: 0 !important;
    border-radius: 999px !important;
    animation: none !important; opacity: 1 !important; transform: none !important; visibility: visible !important;
    overflow: visible !important;           /* die angehobene Glas-Blase darf über die Leiste hinausragen */
  }
  html:not(.gg-perf) .navbar #nav-links {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.05) 48%, rgba(255,255,255,0.07) 100%),
      rgba(var(--a-160e2a,22,14,42),0.5) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    border-top-color: rgba(255,255,255,0.34) !important;
    box-shadow:
      inset 0 1px 1px rgba(255,255,255,0.35),
      inset 0 -1px 1px rgba(255,255,255,0.10),
      inset 0 0 18px rgba(255,255,255,0.04),
      0 12px 30px -10px rgba(0,0,0,0.7) !important;
  }
  /* mit Lichtbrechung (js/navbar-glass.js) etwas klarer, damit man die Brechung am Rand sieht */
  html.nav-glass .navbar #nav-links {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.04) 48%, rgba(255,255,255,0.06) 100%),
      rgba(var(--a-160e2a,22,14,42),0.34) !important;
  }
  /* Safari (iPhone) und Firefox: keine Lichtbrechung, sonst dasselbe Glas wie in Chrome (gleiche Unschärfe, Farbe und
     Durchsicht wie die Filter in js/navbar-glass.js und js/button-glass.js). Vorher: Leiste viel milchiger,
     runder Knopf ganz ohne Unschärfe (.navbar .nav-button in css/glass26.css schaltet sie ab). */
  html:not(.nav-glass):not(.gg-perf) .navbar #nav-links {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.04) 48%, rgba(255,255,255,0.06) 100%),
      rgba(var(--a-160e2a,22,14,42),0.34) !important;
    -webkit-backdrop-filter: blur(3px) saturate(1.9) !important;
    backdrop-filter: blur(3px) saturate(1.9) !important;
  }
  html:not(.nav-glass):not(.gg-perf) #gg-tabnav :is(.settings-btn-mobile, .login-btn) {
    -webkit-backdrop-filter: blur(2.5px) saturate(1.9) !important;
    backdrop-filter: blur(2.5px) saturate(1.9) !important;
  }
  .navbar #nav-links .nav-link {
    flex: 1 1 0; min-width: 0;
    display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
    gap: 3px !important; width: auto !important;
    padding: 4px 2px !important; margin: 0 !important;
    font-size: 10.5px !important; font-weight: 600 !important; line-height: 1.1 !important; letter-spacing: 0 !important;
    text-align: center !important; white-space: nowrap;
    color: rgba(245,245,247,0.85) !important;
    border: 0 !important; border-radius: 999px !important; background: none !important;
    animation: none !important;
  }
  .navbar #nav-links .nav-link > span { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .navbar #nav-links .nav-link.active { color: rgb(var(--a-d8b4fe,216,180,254)) !important; text-shadow: none !important; }
  .navbar #nav-links .nav-ico, .navbar #nav-links .gg-star-i { display: block; width: 22px; height: 22px; flex: none; }
  .navbar #nav-links .nav-link-fb .gg-star-i { color: #fbbf24; }
  /* Blase in Ruhe: helles, ruhiges Glas wie am PC */
  .navbar #nav-links .nav-indicator { display: block !important; border-radius: 999px !important; }
  .navbar #nav-links .nav-indicator:not(.gl-lifted) {
    background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.08) 55%, rgba(255,255,255,0.11) 100%) !important;
    border: 1px solid rgba(255,255,255,0.10) !important; border-top-color: rgba(255,255,255,0.20) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(255,255,255,0.06) !important;
  }
  .navbar #nav-links .nav-indicator:not(.gl-lifted)::before { opacity: 0; }

  /* rechts: runder Glas-Knopf (Einstellungen bzw. Anmelden) */
  .navbar#gg-tabnav .nav-auth { flex: none !important; gap: 0 !important; margin: 0 !important; order: 0 !important; }
  .navbar#gg-tabnav .user-nav-info, .navbar#gg-tabnav .auth-buttons { gap: 0 !important; }
  .navbar#gg-tabnav .email-display,
  .navbar#gg-tabnav .register-btn,
  .navbar#gg-tabnav .settings-btn { display: none !important; }
  .navbar#gg-tabnav :is(.settings-btn-mobile, .login-btn) {
    display: flex !important; align-items: center; justify-content: center;
    width: 62px !important; height: 62px !important; min-width: 62px; padding: 0 !important; border-radius: 50% !important;
    font-size: 0 !important;
  }
  .navbar#gg-tabnav :is(.settings-btn-mobile, .login-btn) > span { display: none; }
  .navbar#gg-tabnav :is(.settings-btn-mobile, .login-btn) > svg { display: block; width: 24px !important; height: 24px !important; }

  /* Platz unten, damit die Leiste nichts verdeckt; oben braucht es keinen Platz mehr für die Navbar */
  body#gg-tabnav-page { padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* Reiter über dem Buchstaben-Raster und „Papier / Eigene“ im Hintergrund-Fenster: die Blase sieht in Ruhe genauso aus
   wie in der Navbar (helles, ruhiges Glas), der gewählte Reiter steht in der Akzentfarbe. Gezogen: wie überall
   (js/glass-slider.js, .gl-lifted). */
.lp-tabs .lp-tab-indicator:not(.gl-lifted),
.bgs-tabs .bgs-tabs-lens:not(.gl-lifted) {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.08) 55%, rgba(255,255,255,0.11) 100%) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-top-color: rgba(255,255,255,0.20) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -1px 0 rgba(255,255,255,0.06) !important;
}
.lp-tabs .lp-tab-indicator:not(.gl-lifted)::before { opacity: 0; }
.lp-tabs .lp-tab.lp-tab-active, .bgs-tabs button.on { color: rgb(var(--a-d8b4fe,216,180,254)) !important; }
.bgs-tabs { border-radius: 100px; }
.bgs-tabs button, .bgs-tabs .bgs-tabs-lens { border-radius: 100px; }

/* Tarif am Logo: „PRO“ (gold) / „PLUS“ (silber), etwas kubisch. html.gg-plan-pro / gg-plan-plus setzt app/pro.js
   (ganz oben in jeder Seite aus dem letzten Besuch gemerkt). */
html.gg-plan-pro .nav-logo > span::after, html.gg-plan-plus .nav-logo > span::after {
  content: 'PRO'; display: inline-block; margin-left: 7px; padding: 3px 6px 2px; border-radius: 6px; vertical-align: 2px;
  font-size: 10px; font-weight: 800; letter-spacing: .07em; line-height: 1; color: #2a1d02; /* accent-keep */
  background: linear-gradient(160deg, #fdeeb6 0%, #f2c75c 48%, #cf9424 100%); /* accent-keep */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), inset 0 -1.5px 0 rgba(120,78,0,.32); /* accent-keep */
}
html.gg-plan-plus .nav-logo > span::after {
  content: 'PLUS'; color: #1c2430; /* accent-keep */
  background: linear-gradient(160deg, #ffffff 0%, #d9dfe8 48%, #a3aebd 100%); /* accent-keep */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 0 -1.5px 0 rgba(40,52,70,.28); /* accent-keep */
}