/* 1025DEX Community v0.31.35 · css/ds-header-nav.css · ausgelagert aus index.html */
/* --- 5 · Kopfzeile -------------------------------------------------------- */

header.neo-header{
  min-height:56px;
  padding:calc(10px + env(safe-area-inset-top)) max(14px,calc((100% - var(--maxw))/2)) 10px;
  gap:10px;
  border:0;
  border-bottom:1px solid var(--glass-line);
  background:var(--glass);
  -webkit-backdrop-filter:var(--blur);
  backdrop-filter:var(--blur);
  box-shadow:none;
}
/* Der rote Balken ueber dem Kopf war ein Rest des alten Geraetelooks. */
header.neo-header::after{display:none}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  header.neo-header{background:var(--bg)}
}

.neo-logo{gap:10px}
.neo-ball{
  width:32px;height:32px;flex-basis:32px;
  border:0;
  background:
    linear-gradient(180deg,#f4382c 0 46%,#1a1a1f 46% 54%,#fafafa 54% 100%);
  box-shadow:0 1px 2px rgba(0,0,0,.18),0 0 0 .5px rgba(0,0,0,.14),inset 0 1px 1px rgba(255,255,255,.35);
}
.neo-ball::before{height:2.5px;background:#1a1a1f}
.neo-ball i{
  width:11px;height:11px;border:2.5px solid #1a1a1f;background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.08);
}
html[data-theme="dark"] .neo-ball{box-shadow:0 1px 3px rgba(0,0,0,.6),0 0 0 .5px rgba(255,255,255,.14)}

.neo-wordmark b{
  font-size:19px!important;
  line-height:1!important;
  letter-spacing:.005em!important;
  text-shadow:none!important;
}
.neo-1025{color:var(--ink)!important}
.neo-dex{color:var(--accent)!important}
.neo-sub{
  margin-top:4px;
  font-size:9.5px!important;
  font-weight:500;
  letter-spacing:.14em!important;
  color:var(--ink-faint)!important;
}
.neo-sub em{border-left:1px solid var(--line);padding-left:8px;opacity:1;color:var(--ink-faint)}

/* Kopfknoepfe: flach, rund, ohne Rahmen - wie die Leisten eines Systems */
.neo-header .hbtn{
  min-height:34px;
  border:0;
  border-radius:var(--r-full);
  background:color-mix(in srgb,var(--ink) 7%,transparent);
  color:var(--ink);
  padding:8px 14px;
  font-size:13.5px;font-weight:560;letter-spacing:-.008em;
  box-shadow:none;
}
html[data-theme="dark"] .neo-header .hbtn{background:color-mix(in srgb,var(--ink) 12%,transparent)}
.neo-header .hbtn:active{transform:scale(.94);background:color-mix(in srgb,var(--ink) 12%,transparent)}
.neo-header #themeBtn{width:34px;height:34px;padding:0;display:grid;place-items:center;font-size:15px;line-height:1}
.neo-header #whoBtn{font-weight:600}
.neo-header .install-head{color:var(--accent)}

/* Nach oben */
.topbtn{
  width:40px;height:40px;
  right:14px;bottom:calc(104px + env(safe-area-inset-bottom));
  border:1px solid var(--glass-line);
  border-radius:var(--r-full);
  background:var(--glass);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  color:var(--ink-soft);
  font-size:13px;
  box-shadow:var(--sh-2);
}

/* --- 6 · Navigationsleiste ------------------------------------------------ */

nav.neo-nav{
  left:50%;right:auto;transform:translateX(-50%);
  bottom:calc(8px + env(safe-area-inset-bottom));
  width:min(var(--maxw),calc(100% - 20px));
  min-height:60px;
  gap:2px;
  padding:6px 6px;
  border:1px solid var(--glass-line);
  border-radius:var(--r-2xl);
  background:var(--glass);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:var(--sh-3);
  overflow:visible;
}
html[data-theme="light"] nav.neo-nav{background:var(--glass);border-color:var(--glass-line)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  nav.neo-nav{background:var(--panel)}
}

nav.neo-nav button{
  min-height:48px;
  gap:4px;
  padding:6px 2px 5px;
  border-radius:var(--r-md);
  color:var(--ink-faint);
  font-size:10.5px;font-weight:550;letter-spacing:-.002em;text-transform:none;
  transition:color var(--t-fast) ease;
}
html[data-theme="light"] nav.neo-nav button{color:var(--ink-faint)}
nav.neo-nav button svg{
  width:24px;height:24px;stroke-width:1.9;
  transition:transform var(--t-base) var(--ease-spring);
}
nav.neo-nav button.on:not(.nav-ball),
html[data-theme="light"] nav.neo-nav button.on:not(.nav-ball){color:var(--accent)}
nav.neo-nav button.on:not(.nav-ball) svg{transform:translateY(-1px) scale(1.06)}
nav.neo-nav button:active svg{transform:scale(.9)}

/* Der Pokeball bleibt das Wahrzeichen, sitzt jetzt aber IN der Leiste
   statt daraus hervorzuragen. */
nav.neo-nav .nav-ball{min-height:48px}
.pokeball{
  position:relative;left:auto;top:auto;transform:none;
  width:42px;height:42px;
  border:0;
  background:linear-gradient(180deg,#f4382c 0 46%,#1a1a1f 46% 54%,#fafafa 54% 100%);
  box-shadow:0 1px 3px rgba(0,0,0,.24),0 0 0 .5px rgba(0,0,0,.16),inset 0 1px 2px rgba(255,255,255,.4);
  transition:transform var(--t-base) var(--ease-spring),box-shadow var(--t-base) ease;
}
.pokeball::before{height:3px;background:#1a1a1f}
.pokeball i{width:14px;height:14px;border:3px solid #1a1a1f;background:#fff}
.pokeball::after{left:8px;top:7px;width:14px;height:5px;background:rgba(255,255,255,.62)}
nav.neo-nav .nav-ball.on .pokeball{
  transform:none;
  box-shadow:0 0 0 3px var(--accent-soft),0 2px 8px rgba(0,0,0,.26),0 0 0 .5px rgba(0,0,0,.16);
}
nav.neo-nav .nav-ball:active .pokeball{transform:scale(.9)}
html[data-theme="dark"] .pokeball{box-shadow:0 1px 4px rgba(0,0,0,.6),0 0 0 .5px rgba(255,255,255,.16)}
html[data-theme="dark"] nav.neo-nav .nav-ball.on .pokeball{box-shadow:0 0 0 3px var(--accent-soft),0 1px 4px rgba(0,0,0,.6)}

/* Die wandernde Markierung wird nicht mehr gebraucht. */
nav.neo-nav .navpille{display:none!important}