/* =====================================================================
   Stammtisch – Navigation (Kopfzeile, Sandwichmenue, Desktop-Leiste)
   =====================================================================

   Gehoert zu `nav.js`. Frueher steckte dieses CSS als Zeichenkette IN der
   JavaScript-Datei und wurde beim Mounten als <style> in den Kopf gehaengt.

   WARUM EINE EIGENE DATEI UND NICHT design.css
   Diese Regeln muessen die der Seite ueberschreiben duerfen: `.wrap` kommt
   in allen zehn Seiten vor, `header.top` in acht, `footer` in dreien.
   Frueher gewann die Navigation, weil ihr <style> beim Mounten ans Ende des
   Kopfes kam. Damit das so bleibt, wird diese Datei NACH dem eigenen
   <style>-Block der Seite eingebunden:

       <style> … seiteneigene Regeln … </style>
       <link rel="stylesheet" href="nav.css?v=3">

   design.css dagegen steht VOR dem Seiten-<style>, damit eine Seite ihre
   Grundgestaltung ueberschreiben kann. Die beiden Dateien haben also
   bewusst unterschiedliche Plaetze.

   Der Versionsanhang ist Pflicht: Android-Chrome kennt kein Strg+F5, und
   eine im Cache haengende Fassung betrifft die Navigation ALLER Seiten.
   ===================================================================== */
/* Das Startseiten-Artwork gilt auf jeder Seite, die diese gemeinsame
     Navigation einbindet. Die Inhaltsflaechen bleiben durch ihre Paneele
     gut lesbar, auch wenn das Bild darunter sichtbar ist. */
  body{background:
      radial-gradient(1200px 600px at 50% -10%, rgba(255,154,60,.12), transparent 60%),
      radial-gradient(900px 500px at 15% 20%, rgba(255,154,60,.06), transparent 55%),
      linear-gradient(180deg, rgba(15,11,7,.60), rgba(15,11,7,.74)),
      url('https://static.tibia.com/images/mmorpg/version_10/backdrop_artwork_bg_landscape.webp') center top / cover no-repeat fixed,
      #17110c;overflow-x:clip}
  body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
    background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.06) 0 2px,transparent 2px 4px),
      repeating-linear-gradient(0deg,rgba(0,0,0,.06) 0 2px,transparent 2px 4px)}
  header.top,.wrap,main,footer{position:relative;z-index:1}
  header.top{display:flex;align-items:center;gap:12px;padding:12px 18px;
    border-bottom:1px solid var(--stone-hi);position:sticky;top:0;z-index:30;
    background:rgba(18,13,8,.94);backdrop-filter:blur(4px)}
  .nav-brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;flex:0 0 auto}
  .nav-brand img{width:40px;height:40px}
  /* Rueckfall, wenn die Seite kein <img> im Kopf hat (Startseite nutzt die
     CSS-Variable --logo als Hintergrundbild). */
  .nav-logo{width:40px;height:40px;border-radius:6px;flex:none;
    background:var(--logo) center/contain no-repeat}
  .nav-brand b{font-family:var(--font-display);font-size:1.4rem;color:var(--gold);font-weight:400;
    letter-spacing:.02em;display:block;line-height:1.05}
  .nav-brand small{display:block;font-family:var(--font-ui);font-size:.62rem;letter-spacing:.16em;
    text-transform:uppercase;color:var(--parchment-dim)}
  /* Abschnitte der aktuellen Seite */
  .nav-sec{flex:1 1 auto;display:flex;align-items:center;gap:2px;justify-content:center;
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .nav-sec::-webkit-scrollbar{display:none}
  .nav-sec a{font-family:var(--font-ui);font-size:.78rem;text-decoration:none;color:var(--parchment-dim);
    padding:6px 10px;border-radius:8px;white-space:nowrap;border:1px solid transparent;transition:color .12s,border-color .12s}
  .nav-sec a:hover{color:var(--gold);border-color:var(--stone-hi)}
  /* Direkte Mitglieder-Aktionen und Sandwichmenü */
  .nav-quick{display:flex;align-items:center;gap:6px;flex:0 0 auto;margin-left:auto}
  .nav-loot{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 11px;
    color:var(--parchment);text-decoration:none;background:var(--ink-2);border:1px solid var(--stone-hi);
    border-radius:9px;font:700 .76rem var(--font-ui);letter-spacing:.03em}
  .nav-loot:hover,.nav-loot.on{border-color:var(--gold);color:var(--gold)}
  .nav-loot[hidden]{display:none}
  .nav-menu-wrap{position:relative;flex:0 0 auto}
  .nav-notifications{position:relative;display:inline-flex;align-items:center;justify-content:center;
    width:38px;height:36px;color:var(--parchment);text-decoration:none;
    background:var(--ink-2);border:1px solid var(--stone-hi);border-radius:9px;font-size:1.05rem}
  .nav-notifications:hover{border-color:var(--gold);color:var(--gold)}
  .nav-notifications[hidden]{display:none}
  .nav-notification-count{position:absolute;right:-6px;top:-7px;min-width:17px;height:17px;padding:0 4px;
    border-radius:10px;background:#b52b24;color:white;border:1px solid #ffd38a;font:700 .62rem/16px var(--font-ui);text-align:center}
  .nav-notification-count[hidden]{display:none}
  .nav-burger{background:var(--ink-2);color:var(--parchment);border:1px solid var(--stone-hi);
    border-radius:9px;padding:8px 12px;cursor:pointer;font-size:1rem;line-height:1}
  .nav-burger:hover{border-color:var(--gold);color:var(--gold)}
  .nav-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:230px;z-index:40;
    background:linear-gradient(180deg,#241a10,#181109);border:1px solid var(--gold-deep);
    border-radius:11px;box-shadow:0 14px 34px rgba(0,0,0,.55);padding:7px}
  .nav-menu[hidden]{display:none}
  .nav-menu a,.nav-menu button{display:block;width:100%;text-align:left;font-family:var(--font-ui);
    font-size:.86rem;text-decoration:none;color:var(--parchment);background:none;border:0;
    padding:9px 11px;border-radius:8px;cursor:pointer}
  .nav-menu a:hover,.nav-menu button:hover{background:rgba(255,214,150,.09);color:var(--gold)}
  .nav-menu a.on,.nav-menu button.on{color:var(--gold);background:rgba(255,214,150,.07)}
  .nav-menu .nav-head{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
    color:var(--parchment-dim);padding:9px 11px 4px}
  .nav-menu hr{border:0;border-top:1px solid var(--stone-hi);margin:5px 4px}
  .nav-menu .nav-who{padding:2px 11px 8px;font-size:.74rem;color:var(--parchment-dim)}
  /* Desktop: Die bisherigen Sandwich-Links stehen dauerhaft als rechte Leiste.
     Auf kleinen Schirmen wird sie komplett ausgeblendet; dort bleibt das
     bekannte Sandwichmenue die platzsparende Bedienung. */
  .nav-desktop-rail{display:none}
  @media (min-width:980px){
    body{padding-right:220px}
    .nav-menu-wrap{display:none}
    .nav-desktop-rail{display:block;position:fixed;z-index:35;right:14px;top:76px;bottom:16px;width:190px;
      overflow:auto;padding:10px;background:linear-gradient(180deg,rgba(36,26,16,.97),rgba(24,17,9,.97));
      border:1px solid var(--gold-deep);border-radius:12px;box-shadow:0 14px 34px rgba(0,0,0,.55)}
    .nav-desktop-rail .nav-rail-head{padding:4px 8px 8px;font:700 .62rem var(--font-ui);letter-spacing:.14em;
      text-transform:uppercase;color:var(--parchment-dim)}
    .nav-desktop-rail a,.nav-desktop-rail button{display:block;width:100%;text-align:left;padding:8px 9px;
      border:0;border-radius:7px;background:transparent;color:var(--parchment);cursor:pointer;text-decoration:none;
      font:.84rem var(--font-ui)}
    .nav-desktop-rail a:hover,.nav-desktop-rail button:hover,.nav-desktop-rail a.on,.nav-desktop-rail button.on{
      background:rgba(255,214,150,.09);color:var(--gold)}
    .nav-desktop-rail hr{border:0;border-top:1px solid var(--stone-hi);margin:7px 3px}
    .nav-desktop-rail .nav-rail-who{padding:3px 8px 9px;font:.74rem var(--font-ui);color:var(--parchment-dim)}
  }
  @media (max-width:720px){
    header.top{gap:9px;padding:10px 12px}
    .nav-brand img{width:32px;height:32px}
    .nav-brand b{font-size:1.15rem}
    .nav-sec{justify-content:flex-start}
    .nav-sec a{font-size:.74rem;padding:5px 8px}
  }
  @media (max-width:520px){
    header.top{flex-wrap:wrap}
    /* Reihenfolge fest vorgeben: Marke links, Aktionen rechts, Abschnitte darunter. */
    .nav-brand{order:1;flex:1 1 auto;min-width:0}
    .nav-quick{order:2;margin-left:auto}
    .nav-sec{order:3;flex:0 0 100%;margin-top:2px}
  }
  /* Einklappbare Abschnitte – gilt fuer alle Seiten, weil ueberall .panel + .panel__bar */
  .panel__bar{cursor:pointer;user-select:none}
  .panel__bar::after{content:"▾";margin-left:8px;padding-left:0;color:var(--parchment-dim);
    font-size:.9rem;line-height:1;transition:transform .15s ease;flex:0 0 auto}
  .panel.collapsed > .panel__bar::after{transform:rotate(-90deg)}
  .panel.collapsed > *:not(.panel__bar){display:none !important}
  .panel__bar:hover::after{color:var(--gold)}
  .panel__actions{display:flex;align-items:center;gap:7px;margin-left:auto;flex:0 0 auto}
  .context-help{display:inline-grid;place-items:center;width:24px;height:24px;margin:0;padding:0;border:1px solid var(--gold-deep);border-radius:50%;background:rgba(255,214,150,.06);color:var(--gold);font:800 .78rem/1 var(--font-ui);cursor:pointer;flex:0 0 auto}
  .context-help:hover{background:rgba(255,214,150,.16);border-color:var(--gold)}
  .context-help-dialog{position:fixed;z-index:100;inset:0;display:grid;place-items:center;padding:18px;background:rgba(0,0,0,.65)}
  .context-help-dialog[hidden]{display:none}.context-help-box{position:relative;max-width:520px;width:min(100%,520px);padding:22px;border:1px solid var(--gold-deep);border-radius:12px;background:linear-gradient(180deg,#2a1d11,#181109);box-shadow:0 18px 48px rgba(0,0,0,.65)}
  .context-help-box h2{margin:0 112px 10px 0;color:var(--gold);font:700 1.1rem var(--font-ui)}.context-help-box p{margin:0;color:var(--parchment);font:.9rem/1.5 var(--font-ui);white-space:pre-line}.context-help-close{position:absolute;right:12px;top:12px;border:0;background:transparent;color:var(--parchment);font-size:1.2rem;cursor:pointer}.context-help-edit{position:absolute;right:42px;top:13px;padding:3px 7px;border:1px solid var(--gold-deep);border-radius:5px;background:transparent;color:var(--gold);font:700 .68rem var(--font-ui);cursor:pointer}.context-help-editor{margin-top:16px;padding-top:14px;border-top:1px solid var(--stone-hi)}.context-help-editor label{display:block;margin:9px 0;color:var(--parchment);font:.78rem var(--font-ui)}.context-help-editor input,.context-help-editor textarea{box-sizing:border-box;display:block;width:100%;margin-top:4px;padding:7px;border:1px solid var(--gold-deep);border-radius:5px;background:rgba(0,0,0,.2);color:var(--parchment);font:.85rem var(--font-ui)}.context-help-editor textarea{resize:vertical}.context-help-save{margin-top:4px}.context-help-status{margin-left:8px;font:.75rem var(--font-ui);color:var(--parchment-dim)}
  /* `.native-picker-trigger` ist am 8. August ersatzlos entfallen. Die
     zusaetzliche Schaltflaeche neben jedem Datumsfeld tat dasselbe wie das
     eingebaute Symbol im Feld – sobald dieses sichtbar gestaltet war, standen
     zwei Knoepfe nebeneinander. Die Gestaltung des verbliebenen Symbols steht
     in design.css. */