/* ============================================================
   DarkBot — Kopfzeile, Ausbaustufe 2
   Liegt ueber dark-base.css und dark-storm.css und erweitert die
   bestehende Kopfzeile: lebendiges Logo, Blutspur unter der
   Navigation, Live-Status, Schubladenmenue fuers Handy.
   Farben und Kurven kommen aus dark-storm.css (--ds-*).
   ============================================================ */

/* ---------- Grundgeruest ---------- */
.db-header{
  --dbh-hoehe: 76px;
  --dbh-logo: 48px;
  overflow: visible;
}
/* Die Kopfzeile darf breiter sein als der Textkoerper (980px), sonst
   passen acht Punkte und die Status-Pille nicht nebeneinander. */
.db-header-inner{
  max-width: 1180px;
  min-height: var(--dbh-hoehe);
  padding-top: 0; padding-bottom: 0;
  flex-wrap: nowrap;
  gap: .75rem;
  transition: min-height .45s var(--ds-ease);
}

/* Beim Scrollen zieht sich die Zeile zusammen — die Seite wirkt wach. */
.db-header.ds-scrolled{ --dbh-hoehe: 60px; --dbh-logo: 38px; }
.db-header.ds-scrolled::after{
  box-shadow: 0 0 22px rgba(255,43,61,.6);
}
.db-header.ds-scrolled .db-brand-sub{
  opacity: 0; transform: translateY(-4px); height: 0;
}

/* ---------- Logo: rund, mit umlaufendem Blutring ---------- */
.db-brand-logo{
  position: relative;
  width: var(--dbh-logo); height: var(--dbh-logo);
  flex: 0 0 var(--dbh-logo);
  overflow: visible;
  border-radius: 50%;
  transition: width .45s var(--ds-ease), height .45s var(--ds-ease),
              flex-basis .45s var(--ds-ease), box-shadow .4s var(--ds-ease);
}
.db-brand-logo .db-logo-img{
  border-radius: 50%;
  object-fit: cover;
  position: relative; z-index: 2;
}
/* Der Ring dreht sich langsam — ein Lebenszeichen, kein Karussell. */
.db-brand-logo::before{
  content: '';
  position: absolute; inset: -3px;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0deg, var(--ds-blood) 45deg, var(--ds-violet) 110deg,
    transparent 190deg, transparent 360deg);
  animation: dbhRing 4.5s linear infinite;
  z-index: 0;
  opacity: .95;
}
/* Innenmaske, damit nur der Rand leuchtet */
.db-brand-logo::after{
  content: '';
  position: absolute; inset: -1px;
  border-radius: 50%;
  background: var(--ds-bg);
  z-index: 1;
}

/* ---------- Chat-Nachbau: echtes Logo statt 🌌 ----------
   Das Bild liegt IN der Huelle, nicht an ihrer Stelle: der gruene
   Online-Punkt haengt als ::after an .ds-phone-av, und ein <img>
   kann keine ::after-Elemente darstellen. */
.ds-phone-av{ overflow: visible; }
.ds-phone-av img{
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
@keyframes dbhRing{ to{ transform: rotate(360deg); } }

.db-brand:hover .db-brand-logo{
  box-shadow: 0 0 0 1px rgba(255,43,61,.6), 0 0 40px -4px rgba(255,43,61,.95);
}

/* ---------- Wortmarke ---------- */
.db-brand{ align-items: center; }
.db-brand-text{
  font-size: 1.18rem; letter-spacing: .05em; text-transform: uppercase;
  white-space: nowrap;
}
/* "BOT" brennt, "DARK" bleibt Knochen — Kontrast statt Farbbrei. */
.db-brand-text .dbh-hot{
  background: linear-gradient(96deg, var(--ds-blood) 10%, var(--ds-violet) 130%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 12px rgba(255,43,61,.55));
}
.db-brand-sub{
  transition: opacity .35s var(--ds-ease), transform .35s var(--ds-ease);
  white-space: nowrap;
}

/* ---------- Navigation mit Blutspur ---------- */
.db-nav{
  position: relative;
  gap: .1rem;
  align-items: center;
  flex-wrap: nowrap;      /* nie umbrechen — sonst waechst die Kopfzeile */
  white-space: nowrap;
}
.db-nav-link{
  z-index: 1;
  font-size: .84rem; font-weight: 600;
  letter-spacing: .02em;
  padding: .48rem .62rem;
}
/* Die aktive Pille bleibt, verliert aber den harten Farbklotz. */
.db-nav-link.db-nav-active{
  background: linear-gradient(120deg, rgba(193,18,31,.9), rgba(255,43,61,.75) 55%, rgba(168,85,247,.6));
  box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset, 0 10px 26px -10px rgba(255,43,61,.9);
}

/* Der Strich, der dem Mauszeiger folgt */
.dbh-spur{
  position: absolute; bottom: 2px; left: 0;
  height: 2px; width: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--ds-blood), var(--ds-violet));
  box-shadow: 0 0 12px var(--ds-blood);
  opacity: 0;
  transform: translateX(0);
  transition: transform .38s var(--ds-ease), width .38s var(--ds-ease), opacity .25s;
  pointer-events: none;
  z-index: 0;
}
.db-nav:hover .dbh-spur{ opacity: 1; }

/* ---------- Live-Status ---------- */
.dbh-status{
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .38rem .75rem .38rem .6rem;
  border-radius: 100px;
  border: 1px solid var(--ds-line-2);
  background: rgba(255,43,61,.06);
  font-family: var(--ds-mono);
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ds-muted);
  white-space: nowrap;
  transition: opacity .35s var(--ds-ease), border-color .35s var(--ds-ease);
}
.dbh-status .dbh-punkt{
  width: 7px; height: 7px; border-radius: 50%;
  background: #64748b;
  box-shadow: 0 0 0 0 rgba(100,116,139,.6);
  flex: 0 0 7px;
}
.dbh-status.ist-online{ border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.07); }
.dbh-status.ist-online .dbh-punkt{
  background: #22c55e;
  animation: dbhPuls 2.2s ease-out infinite;
}
.dbh-status.ist-weg{ border-color: rgba(255,43,61,.4); background: rgba(255,43,61,.08); }
.dbh-status.ist-weg .dbh-punkt{ background: var(--ds-blood); }
.dbh-status .dbh-zeit{ color: var(--ds-text); opacity: .75; }
@keyframes dbhPuls{
  0%{ box-shadow: 0 0 0 0 rgba(34,197,94,.65); }
  70%{ box-shadow: 0 0 0 7px rgba(34,197,94,0); }
  100%{ box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

/* ---------- Blutstropfen an der Unterkante ---------- */
.dbh-tropfen{
  position: absolute; left: 0; right: 0; bottom: 0; height: 0;
  pointer-events: none; z-index: 3;
}
.dbh-tropfen i{
  position: absolute; top: 0;
  width: 2px; height: 6px;
  border-radius: 0 0 2px 2px;
  background: linear-gradient(180deg, var(--ds-blood), rgba(193,18,31,0));
  opacity: 0;
  animation: dbhTropf 9s var(--ds-ease) infinite;
}
.dbh-tropfen i:nth-child(1){ left: 18%; animation-delay: .4s; }
.dbh-tropfen i:nth-child(2){ left: 47%; animation-delay: 3.6s; height: 9px; }
.dbh-tropfen i:nth-child(3){ left: 76%; animation-delay: 6.4s; }
@keyframes dbhTropf{
  0%, 62%   { opacity: 0; transform: translateY(0) scaleY(.4); }
  70%       { opacity: .95; transform: translateY(0) scaleY(1); }
  92%, 100% { opacity: 0; transform: translateY(16px) scaleY(1.5); }
}

/* ---------- Schubladenmenue (Handy) ---------- */
.dbh-burger{
  display: none;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  border-radius: 12px;
  border: 1px solid var(--ds-line-2);
  background: rgba(255,43,61,.06);
  cursor: pointer;
  flex: 0 0 42px;
}
.dbh-burger span{
  display: block; position: relative;
  width: 18px; height: 2px; border-radius: 2px;
  background: var(--ds-text);
  transition: transform .35s var(--ds-ease), background .2s;
}
.dbh-burger span::before,
.dbh-burger span::after{
  content: ''; position: absolute; left: 0;
  width: 18px; height: 2px; border-radius: 2px; background: var(--ds-text);
  transition: transform .35s var(--ds-ease), opacity .2s;
}
.dbh-burger span::before{ top: -6px; }
.dbh-burger span::after{ top: 6px; }
.dbh-burger[aria-expanded="true"] span{ background: transparent; }
.dbh-burger[aria-expanded="true"] span::before{ transform: translateY(6px) rotate(45deg); }
.dbh-burger[aria-expanded="true"] span::after{ transform: translateY(-6px) rotate(-45deg); }

.dbh-schublade{
  position: fixed; inset: 0;
  z-index: 199;
  display: flex; flex-direction: column; justify-content: center;
  gap: .25rem;
  padding: 5rem 1.5rem 2rem;
  background: rgba(6,5,9,.94);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ds-ease), visibility .35s;
}
.dbh-schublade.ist-offen{ opacity: 1; visibility: visible; }
.dbh-schublade a{
  font-family: var(--ds-display);
  font-size: 1.6rem; font-weight: 800; letter-spacing: -.01em;
  color: var(--ds-muted); text-decoration: none;
  padding: .55rem .2rem;
  border-bottom: 1px solid rgba(255,255,255,.05);
  opacity: 0; transform: translateY(14px);
  transition: color .25s, opacity .4s var(--ds-ease), transform .4s var(--ds-ease);
}
.dbh-schublade.ist-offen a{ opacity: 1; transform: none; }
.dbh-schublade a:hover,
.dbh-schublade a.db-nav-active{
  color: var(--ds-text);
  text-shadow: 0 0 22px rgba(255,43,61,.55);
}
.dbh-schublade a.db-nav-active::before{
  content: '▸ '; color: var(--ds-blood);
}
body.dbh-fixiert{ overflow: hidden; }

@media (max-width: 900px){
  .db-nav{ display: none; }
  .dbh-burger{ display: flex; }
  .dbh-status{ display: none; }
  .db-header{ --dbh-hoehe: 66px; }
}
/* Dazwischen wird es eng: erst faellt das Wort "Online" weg,
   dann die ganze Pille — die Punkte selbst bleiben am laengsten. */
@media (max-width: 1240px) and (min-width: 901px){
  .dbh-status .dbh-wort{ display: none; }
  .db-nav-link{ padding: .45rem .5rem; font-size: .8rem; }
}
@media (max-width: 1040px) and (min-width: 901px){
  .dbh-status{ display: none; }
}

/* ---------- Barrierefreiheit ---------- */
@media (prefers-reduced-motion: reduce){
  .db-brand-logo::before,
  .dbh-tropfen i,
  .dbh-status .dbh-punkt{ animation: none !important; }
  .dbh-spur{ transition: none; }
}