/* ===========================================================================
   Artikel-Tool - pf_nav.css
   Hamburger-Navigation mit Fade-Effekt fuer alle Artikel-Tool-Seiten
   (login.php, admin/*, artikel.php). Eigene Datei, unabhaengig von
   theme.css/site.css - fasst Zurueck-Link, Abmelden, Hell/Dunkel- und
   Sprachwahl in einem einzigen Menue zusammen statt in mehreren einzelnen
   Elementen, damit es auf schmalen Bildschirmen nicht mehr umbricht/kollidiert.
   =========================================================================== */

.pf-nav { position: fixed; top: 18px; left: 18px; z-index: 200; }

/* Dezenter Zurueck-Pfeil, oben zentriert, auf jeder Seite ausser der
   Startseite - im Unterschied zum Zurueck-Eintrag im Hamburger-Menue ist
   dieser sofort sichtbar, ohne das Menue erst zu oeffnen. Bewusst zurueck-
   haltend gestaltet (kein Rahmen, gedaempfte Deckkraft) - ein staendig
   sichtbares, aber nicht aufdringliches Element. */
.pf-back-top {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 199;
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  color: rgba(var(--text-rgb), .5); text-decoration: none;
  background: rgba(var(--panel-rgb), .4); backdrop-filter: blur(6px);
  transition: color .2s, background .2s, opacity .2s;
}
.pf-back-top:hover { color: var(--accent); background: rgba(var(--panel-rgb), .72); }
.pf-back-top svg { width: 18px; height: 18px; }
@media (max-width: 480px) { .pf-back-top { top: 14px; width: 32px; height: 32px; } .pf-back-top svg { width: 16px; height: 16px; } }

.pf-burger {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  background: rgba(var(--panel-rgb), .72); color: var(--text);
  border: 1px solid rgba(var(--accent-2-rgb), .35); border-radius: 10px;
  cursor: pointer; backdrop-filter: blur(6px);
  transition: border-color .2s, box-shadow .2s;
}
.pf-burger:hover { border-color: var(--accent); box-shadow: 0 0 14px rgba(var(--accent-rgb), .25); }

/* Drei Striche -> X, wenn das Menue offen ist. */
.pf-burger .pf-burger-lines { position: relative; width: 20px; height: 14px; }
.pf-burger .pf-burger-lines span {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
  background: currentColor; transition: transform .25s ease, opacity .2s ease, top .25s ease;
}
.pf-burger .pf-burger-lines span:nth-child(1) { top: 0; }
.pf-burger .pf-burger-lines span:nth-child(2) { top: 6px; }
.pf-burger .pf-burger-lines span:nth-child(3) { top: 12px; }
.pf-nav.open .pf-burger .pf-burger-lines span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.pf-nav.open .pf-burger .pf-burger-lines span:nth-child(2) { opacity: 0; }
.pf-nav.open .pf-burger .pf-burger-lines span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

/* Fade-in/-out: opacity + leichte Verschiebung, kein hartes display:none/block -
   sonst gaebe es keinen Uebergang zu animieren. visibility mit Verzoegerung
   verhindert, dass das unsichtbare Panel bei geschlossenem Menue anklickbar
   bleibt (Tab-Fokus, Screenreader). */
.pf-nav-panel {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 240px;
  max-width: min(320px, 92vw); max-height: min(70vh, 520px); overflow-y: auto;
  background: rgba(var(--bg-rgb), .97); border: 1px solid rgba(var(--accent-2-rgb), .35);
  border-radius: 12px; padding: 8px; box-shadow: 0 16px 40px rgba(var(--shadow-rgb), .55);
  backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.pf-nav.open .pf-nav-panel {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity .2s ease, transform .2s ease;
}

.pf-nav-link {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px;
  color: var(--text); text-decoration: none; font-size: 13.5px;
}
.pf-nav-link:hover { background: rgba(var(--accent-2-rgb), .14); }
.pf-nav-link[aria-current="true"] { color: var(--accent); font-weight: 600; }
.pf-nav-link .flag, .pf-nav-link .th-ico { flex: 0 0 auto; }
.pf-nav-link .th-ico { width: 16px; height: 16px; }
.pf-nav-link .flag { width: 20px; height: 14px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(var(--shadow-rgb), .35) inset; display: block; }

.pf-nav-divider { height: 1px; background: rgba(var(--accent-2-rgb), .2); margin: 6px 4px; }
.pf-nav-label {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  padding: 8px 12px 4px;
}
.pf-nav-user { font-size: 12px; color: rgba(var(--text-rgb), .6); padding: 6px 12px 2px; word-break: break-all; }

/* Mobil: Panel ueber die volle Breite, damit auf schmalen Bildschirmen nichts
   abgeschnitten wird oder unter den Rand des Viewports rutscht. */
@media (max-width: 480px) {
  .pf-nav { top: 14px; left: 14px; right: 14px; }
  .pf-nav-panel { left: 0; right: 0; max-width: none; min-width: 0; }
}

/* Copyright-Footer - auf JEDER Seite gleich, siehe pf_copyright_footer()
   in lib/pf_content.php. Bewusst hier (nicht in site.css/theme.css), weil
   pf_nav.css bereits auf jeder Seite eingebunden ist - kein zusaetzliches
   <link> noetig, damit der Footer ueberall erscheint.

   position:fixed statt normalem Textfluss - genau wie das bestehende
   .h-copy-Muster in site.css (docmind.php & Co.): so klebt die Zeile immer
   am unteren Bildschirmrand, unabhaengig davon, wie lang der Seiteninhalt
   ist, statt einfach nach dem letzten Absatz aufzuhoeren. Auf dem Telefon
   (< 760px) wieder in den normalen Textfluss zurueck, aus demselben Grund
   wie bei .h-copy dort dokumentiert: sonst legt sich die Zeile dauerhaft
   ueber den Inhalt, weil auf schmalen Bildschirmen weniger Hoehe frei ist. */
.pf-copyright-footer {
  position: fixed; left: 0; right: 0; bottom: 14px; width: 100%; text-align: center;
  padding: 0 16px;
  font-family: 'JetBrains Mono', monospace; font-size: 11.5px;
  color: rgba(var(--text-rgb, 230, 233, 239), .5);
  pointer-events: none;   /* darf keine Klicks vor dahinterliegenden Inhalten abfangen */
}
@media (max-width: 760px) {
  .pf-copyright-footer { position: static; margin-top: 32px; padding: 0 16px 24px; }
}