/* ==========================================================
   theme-dragonfall.css — „Survivor's Terminal“ (18.09.2026)

   Gestaltungsschicht ÜBER style.css. Ändert Farben, Schrift,
   Texturen, Kopf/Fuss, Hero und Panels — nicht die Struktur
   der Module. Wird als letztes Stylesheet geladen.

   Bausteine
     • Schrift:  Bebas Neue (Schlagzeilen, wie das PZ-Logo),
                 Share Tech Mono (PDA-/Datenzeilen), Rubik (Text)
     • Bild:     img/bg.jpg (brennende Stadt) sichtbar im Hero,
                 gedämpft hinter der Seite; Filmkorn + Vignette
     • Emblem:   img/logo.png (Drachenschädel) statt Emoji
     • Zeichen:  Quarantäne-Band (gelb/schwarz) als Trennlinie,
                 Ecken-Klammern an Panels (Militär-HUD)
   ========================================================== */

:root{
  --bg:#070605; --bg2:#0f0c09; --panel:#14100c; --panel2:#1c1611;
  --line:#3a2a1e; --line2:#5a3f2b;
  --txt:#efe6d6; --muted:#a58b70;
  --acc:#f07a1e; --acc-d:#b8451a;
  --gold:#f2c14e; --warn:#f0a030; --bad:#d8281e; --ok:#66b23c; --blood:#8e1a1a;
  --tape:repeating-linear-gradient(-45deg,#d9a400 0 14px,#141210 14px 28px);
  --display:'Bebas Neue','Oswald',Impact,sans-serif;
  --mono:'Share Tech Mono',ui-monospace,'Consolas',monospace;
  --r:4px; --r-s:3px;
  --sh:0 10px 30px rgba(0,0,0,.65);
  /* Draco-Gold, nur für Verweise auf Draco-Gaming (wie auf der Nordstreitmacht-Seite) */
  --draco:#f2a23a; --draco-hell:#ffd48f;
}

/* ---------- Grundfläche: Stadt dezent, Korn, Vignette ---------- */
body{
  background:
    linear-gradient(180deg, rgba(7,6,5,.55) 0%, rgba(7,6,5,.86) 55%, rgba(7,6,5,.97) 100%),
    url('../img/bg.jpg') center 30% / cover no-repeat fixed,
    var(--bg);
  font-family:'Rubik',system-ui,sans-serif;
}
body::before{                       /* Filmkorn */
  content:""; position:fixed; inset:0; z-index:8000; pointer-events:none; opacity:.07;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode:overlay;
}
body::after{                        /* Vignette */
  content:""; position:fixed; inset:0; z-index:7999; pointer-events:none;
  background:radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(0,0,0,.55) 100%);
}

h1,h2,h3,h4{font-family:var(--display); font-weight:400; letter-spacing:1.5px}
h1{font-size:2.4rem} h2{font-size:1.5rem} h3{font-size:1.2rem}
code,.pre,.mono{font-family:var(--mono)}
a{color:var(--gold)} a:hover{color:#fff}

/* ---------- Bootscreen ---------- */
.boot{background:radial-gradient(circle at 50% 45%, #1a120b, #070605 70%)}
.boot-in{border:1px solid #5a3f2b; border-radius:3px; background:rgba(12,9,7,.96)}
.boot-in::before{background:var(--tape); height:5px; opacity:.85}
.boot-logo{animation:none; filter:none; margin-bottom:6px}
.boot-logo img{width:96px; height:96px; filter:drop-shadow(0 0 18px rgba(240,122,30,.55)); animation:logoPulse 2.4s infinite ease-in-out}
.boot-title{font-family:var(--display); font-size:1.8rem; letter-spacing:5px; color:var(--gold); text-shadow:0 0 14px rgba(242,193,78,.35)}
.boot-terminal{color:#8ec07c; border-color:#3a2a1e}
.boot-bar i{background:linear-gradient(90deg,var(--acc-d),var(--acc),var(--gold))}

/* ---------- Beta-Banner: deckend, sonst scrollen Panels sichtbar darunter durch ---------- */
.beta-global-banner{
  font-family:var(--mono) !important; letter-spacing:.8px; animation:none !important;
  background:linear-gradient(90deg, rgba(20,34,44,.98), rgba(10,14,18,.98)) !important;
  border-bottom:1px solid rgba(90,169,209,.45) !important; color:#8fc6e6;
}

/* ---------- Kopfzeile ---------- */
.topbar{
  height:66px !important; gap:18px; background:rgba(8,6,5,.9); backdrop-filter:blur(10px);
  border-bottom:0 !important; box-shadow:0 4px 24px rgba(0,0,0,.6) !important;
}
.brand .mark{animation:none !important}
.topbar::after{                     /* Quarantäne-Band */
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:4px;
  background:var(--tape); opacity:.75;
}
.brand{gap:12px}
.brand .mark{font-size:0; width:44px; height:44px; flex:0 0 44px;
  background:url('../img/logo.png') center/contain no-repeat;
  filter:drop-shadow(0 0 10px rgba(240,122,30,.55)); text-shadow:none}
.brand-txt{font-family:var(--display); font-size:1.55rem; letter-spacing:2.5px; line-height:.95; color:#fff}
.brand-txt b{color:var(--acc); text-shadow:0 0 12px rgba(240,122,30,.45)}
.brand-txt small{font-family:var(--mono); font-size:.62rem; letter-spacing:3px; color:var(--muted); margin-top:3px}

.nav-item,.nav-dropdown>button{
  font-family:var(--display) !important; font-size:1.08rem !important; font-weight:400 !important;
  letter-spacing:2px !important; padding:8px 13px !important; color:#cdbba3 !important;
  border:0 !important; border-radius:2px !important; position:relative;
}
.nav-item:hover,.nav-dropdown:hover>button,.nav-dropdown.open>button{
  color:#fff !important; background:rgba(240,122,30,.08) !important; text-shadow:none;
}
.nav-item.active{color:var(--acc) !important; background:transparent !important}
.nav-item.active::after{content:""; position:absolute; left:12px; right:12px; bottom:3px; height:2px; background:var(--acc); box-shadow:0 0 8px var(--acc)}
.nav-menu{border:1px solid var(--line2) !important; border-radius:3px !important; background:rgba(14,11,8,.98) !important; padding:6px !important; box-shadow:var(--sh) !important}
.nav-menu a{font-family:var(--display) !important; font-size:1rem !important; letter-spacing:1.5px !important; border-radius:2px !important}
.ubtn{border-radius:2px; font-family:var(--display); letter-spacing:1.5px; font-size:1rem; font-weight:400}

/* Zurück zur Hauptseite draco-gaming.de (15.10.2026): links vor dem Emblem, im Stil der
   kleinen ghost-Knöpfe (wie Discord unten), gleicher Tab. z-index über dem Feuerschein
   (.topbar::before). Gemessen: Die Kopfleiste ist schon ohne den Knopf ~950 px breit
   (Gäste; mit Admin und Benutzernamen mehr). Daher drei Stufen:
     ab 1280 px    „← Draco-Gaming“
     861–1279 px   nur „←“, Reiter etwas enger – sonst rutscht das Konto-Menü rechts raus
     bis 560 px    kein Platz neben Emblem und Menüknopf → erster Eintrag im Handy-Menü
                   (.nav-zurueck-handy, erzeugt renderNav() in app.js)
   Seit 27.10.2026 genau wie auf der Nordstreitmacht-Seite (wardogs\seite\assets\stil.css,
   .zurueck): Draco-Gold mit animiertem Drachenkopf; 861–1279 px nur der Kopf statt „←“. */
.zurueck-draco{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:.45rem; position:relative; z-index:1;
  font-family:var(--display); font-size:1rem; letter-spacing:1.6px; line-height:1; white-space:nowrap;
  padding:.28rem .55rem .28rem .3rem; border:1px solid color-mix(in srgb,var(--draco) 50%,transparent); border-radius:3px;
  background:color-mix(in srgb,var(--draco) 10%,transparent); box-shadow:0 0 16px -6px color-mix(in srgb,var(--draco) 70%,transparent);
  color:var(--draco-hell) !important; text-decoration:none !important; transition:border-color .2s,color .2s,background-color .2s,box-shadow .2s;
}
.zurueck-draco:hover{border-color:var(--draco); color:#fff !important; background:color-mix(in srgb,var(--draco) 18%,transparent); box-shadow:0 0 22px -4px color-mix(in srgb,var(--draco) 80%,transparent)}
.zurueck-draco picture,.fuss-herkunft picture{display:flex}   /* nicht contents: leere <source> brächten je einen Abstand mit */
.zurueck-draco img{width:28px; height:28px; object-fit:contain; border-radius:3px; filter:drop-shadow(0 0 6px rgba(255,90,40,.45))}
.nav-zurueck-handy{display:none !important}
@media(min-width:861px) and (max-width:1279px){
  .zurueck-draco{padding:.28rem}
  .zurueck-draco .zd-text{display:none}
  .topbar{gap:10px}
  .nav-item,.nav-dropdown>button{padding:8px 9px !important}
}
@media(max-width:560px){
  .zurueck-draco{display:none}
  .nav-zurueck-handy{display:block !important; border-bottom:1px solid #3a2a1e !important; margin-bottom:4px}
}

/* ---------- Statuszeile ---------- */
.status-strip{
  font-family:var(--mono); font-size:.8rem; letter-spacing:.6px; text-transform:uppercase;
  background:rgba(6,5,4,.82); border-bottom:1px solid #2c2118; padding:8px 20px; margin-top:4px;
}
.status-strip b{color:var(--gold)}
.dot.on{background:#7ad14a; box-shadow:0 0 10px #7ad14a}

/* ---------- Inhalt ---------- */
.view{padding:26px 18px 90px}

/* Panels: leicht durchscheinend, Ecken-Klammern wie ein HUD */
.panel,.pda-sub-panel,.clan-pda,.pda-hero-banner{
  background:
    linear-gradient(var(--acc),var(--acc)) top left/16px 2px,
    linear-gradient(var(--acc),var(--acc)) top left/2px 16px,
    linear-gradient(var(--acc),var(--acc)) top right/16px 2px,
    linear-gradient(var(--acc),var(--acc)) top right/2px 16px,
    linear-gradient(var(--acc),var(--acc)) bottom left/16px 2px,
    linear-gradient(var(--acc),var(--acc)) bottom left/2px 16px,
    linear-gradient(var(--acc),var(--acc)) bottom right/16px 2px,
    linear-gradient(var(--acc),var(--acc)) bottom right/2px 16px,
    linear-gradient(165deg, rgba(22,17,12,.94) 0%, rgba(11,9,7,.96) 100%);
  background-repeat:no-repeat;
  border:1px solid #4a3625 !important; border-radius:3px !important;
  box-shadow:0 12px 34px rgba(0,0,0,.55), inset 0 0 40px rgba(0,0,0,.35) !important;
}
.pda-sub-panel h2,.panel > h2:first-child{
  font-family:var(--display); font-size:1.35rem; letter-spacing:2.5px; color:var(--gold);
  border-bottom:1px solid #3a2a1e; padding-bottom:8px; margin-bottom:16px;
  display:flex; align-items:center; gap:10px;
}
.pda-sub-panel h2::before,.panel > h2:first-child::before{
  content:""; width:6px; height:18px; background:var(--acc); box-shadow:0 0 10px var(--acc); flex:0 0 6px;
}
.clan-pda-top-bar{
  font-family:var(--mono) !important; font-size:.72rem !important; letter-spacing:1.5px;
  background:rgba(0,0,0,.45) !important; border-bottom:1px solid #3a2a1e !important; color:#a58b70;
}
.clan-pda-brand{color:var(--gold) !important}
.clan-pda-header-left h1,.clan-pda h1{font-family:var(--display); letter-spacing:3px; font-size:2.6rem; color:#fff; text-shadow:0 4px 14px rgba(0,0,0,.8)}
.clan-pda-subtitle{color:#cdbba3}

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--display); font-weight:400; letter-spacing:1.8px; font-size:1.02rem; text-transform:uppercase;
  border-radius:2px; padding:9px 18px; border:1px solid #ff9a3c;
  background:linear-gradient(180deg,#ff8a2a 0%,#e0651a 55%,#b8451a 100%); color:#fff !important;
  text-shadow:0 1px 0 rgba(0,0,0,.45);
  box-shadow:0 2px 0 #7a2a0e, inset 0 1px 0 rgba(255,255,255,.3);
}
.btn:hover{filter:brightness(1.1); box-shadow:0 3px 0 #7a2a0e, 0 0 22px rgba(240,122,30,.45)}
.btn.ghost{background:rgba(0,0,0,.35); border:1px solid #6a4a30; color:#efe6d6 !important; box-shadow:none}
.btn.ghost:hover{border-color:var(--acc); color:var(--acc) !important; background:rgba(240,122,30,.08)}
.btn.danger{border-color:#ff5a4a; background:linear-gradient(180deg,#e03a2a,#8e1a1a); color:#fff !important}
.btn.warn{border-color:#ffd070; background:linear-gradient(180deg,#f2c14e,#c08010)}
.btn.sm{font-size:.86rem; padding:5px 12px; letter-spacing:1.2px}
.btn.big{font-size:1.3rem; padding:13px 28px; letter-spacing:2.2px}
.icon-btn{border-radius:2px !important}

/* ---------- Formulare ---------- */
input,select,textarea{border-radius:2px !important; font-family:'Rubik',sans-serif}
input:focus,select:focus,textarea:focus{border-color:var(--acc) !important; box-shadow:0 0 0 2px rgba(240,122,30,.18) !important}
.form label{font-family:var(--mono); text-transform:uppercase; letter-spacing:1px; font-size:.78rem; color:var(--gold)}

/* ---------- Tabellen, Badges, Listen ---------- */
.table th{font-family:var(--mono); font-size:.72rem; letter-spacing:1.5px; color:var(--gold); border-bottom:1px solid #4a3625}
.table tbody tr:hover{background:rgba(240,122,30,.07)}
.badge{border-radius:2px; font-family:var(--mono); letter-spacing:1px}
.list-item{border-radius:2px; background:rgba(0,0,0,.28); border:1px solid #2f2218; border-left:3px solid var(--acc)}
.list-item:hover{border-color:#4a3625; border-left-color:var(--gold)}
.notice{border-radius:2px}
.stat{border-radius:2px; background:rgba(0,0,0,.3)}
.stat b{font-family:var(--display); font-size:1.7rem; letter-spacing:1px}
.kv{border-bottom:1px dashed #3a2a1e}
.bar{border-radius:0; height:7px; background:#0a0705}
.bar i{background:linear-gradient(90deg,var(--acc-d),var(--acc),var(--gold))}

/* ---------- Toasts & Dialoge ---------- */
.toasts > *{border-radius:2px !important; font-family:'Rubik',sans-serif}
.modal{border-radius:3px; border:1px solid #6a4a30; box-shadow:0 30px 80px rgba(0,0,0,.8)}
.modal-head{background:rgba(0,0,0,.35); border-bottom:1px solid #3a2a1e}
.modal-head h3{font-family:var(--display); letter-spacing:2px; font-size:1.35rem; color:var(--gold)}
.modal-bg{background:rgba(3,2,2,.82)}

/* ==========================================================
   STARTSEITE — Hero mit sichtbarer Stadt, Emblem, Tape
   ========================================================== */
.pda-hero-banner{
  min-height:440px; display:flex; flex-direction:column; border:1px solid #5a3f2b !important;
  background:
    linear-gradient(180deg, rgba(7,6,5,.25) 0%, rgba(7,6,5,.55) 55%, rgba(7,6,5,.95) 100%),
    url('../img/bg.jpg') center 42% / cover no-repeat !important;
}
.pda-hero-banner::before{background:linear-gradient(90deg,var(--acc-d),var(--acc),var(--gold),var(--acc),var(--acc-d)); height:3px; opacity:.9}
.hero-embers{opacity:.9}
.pda-hero-content{
  flex:1 1 auto; display:flex; align-items:center; justify-content:center; gap:34px; flex-wrap:wrap;
  padding:44px 40px 30px; text-align:left; background:none;
}
.hero-emblem{
  width:190px; height:190px; flex:0 0 190px; background:url('../img/logo.png') center/contain no-repeat;
  filter:drop-shadow(0 0 28px rgba(240,122,30,.5)) drop-shadow(0 8px 12px rgba(0,0,0,.8));
  animation:emblemPulse 5s ease-in-out infinite;
}
@keyframes emblemPulse{0%,100%{transform:scale(1)} 50%{transform:scale(1.03)}}
.hero-text{flex:1 1 420px; max-width:720px}
.hero-logo{
  font-family:var(--mono); font-size:.78rem; letter-spacing:4px; color:var(--gold); margin-bottom:10px;
  text-shadow:none; display:flex; align-items:center; gap:10px;
}
.hero-logo::before{content:""; width:28px; height:1px; background:var(--gold)}
.hero-logo .logo-icon{display:none}
.hero-title{
  font-family:var(--display); font-size:clamp(3rem, 7vw, 5.4rem); line-height:.92; letter-spacing:3px;
  margin:0 0 14px; color:#fff; text-shadow:0 6px 30px rgba(0,0,0,.9), 0 0 2px #000;
}
.hero-title .hl{
  color:var(--acc);
  text-shadow:0 0 30px rgba(240,122,30,.75), 0 6px 30px rgba(0,0,0,.9);
}
.hero-tagline{
  color:#d9c9b0; font-size:1.02rem; line-height:1.55; max-width:560px; margin:0 0 22px;
  text-shadow:0 2px 8px rgba(0,0,0,.9);
}
.hero-tagline b{color:var(--gold)}
.hero-btns{justify-content:flex-start; gap:12px}
.hero-btns .btn.glow{animation:glow 2.2s infinite alternate}
.pda-hero-stats{
  background:rgba(4,3,2,.72); border-top:1px solid #4a3625; padding:14px 22px; gap:14px 28px;
  backdrop-filter:blur(6px);
}
.hero-stat-item{min-width:96px; padding:6px 0; position:relative}
.hero-stat-item .hs-ico{font-size:1.15rem; filter:drop-shadow(0 0 6px rgba(0,0,0,.8))}
.hero-stat-item b{font-family:var(--display); font-size:1.7rem; letter-spacing:1.5px; color:#fff; font-weight:400}
.hero-stat-item small{font-family:var(--mono); font-size:.62rem; letter-spacing:2px; color:var(--gold)}
.hero-stat-ip{border-radius:2px; border:1px solid #6a4a30; background:rgba(0,0,0,.55)}
.hero-stat-ip code{color:var(--gold); font-size:1.15rem}

/* Startseiten-Boxen */
.pda-sub-panel .ann{border-radius:2px !important; border-left:3px solid var(--line2) !important}
.pda-sub-panel .ann.pin{border-left-color:var(--gold) !important}
.pda-sub-panel .ann h3{font-family:var(--display) !important; letter-spacing:2px !important; font-size:1.25rem !important}

/* ---------- Clan-Karten & Listen ---------- */
.clan-banner-card{border-radius:3px !important}
.clan-pda-search,.clan-pda-select{border-radius:2px !important; font-family:var(--mono) !important}
.clan-pda-add-btn{font-family:var(--display) !important; letter-spacing:2px !important; font-size:1.05rem !important; border-radius:2px !important}

/* ---------- Fusszeile ---------- */
.footer{position:relative; background:rgba(5,4,3,.92); border-top:1px solid #4a3625; margin-top:40px}
.footer::before{content:""; position:absolute; left:0; right:0; top:-5px; height:5px; background:var(--tape); opacity:.7}
.foot-in{padding:28px 18px 34px; gap:24px; align-items:flex-start}
.foot-brand{display:flex; align-items:center; gap:12px}
.foot-brand .foot-logo{width:46px; height:46px; background:url('../img/logo.png') center/contain no-repeat; filter:drop-shadow(0 0 8px rgba(240,122,30,.45))}
.foot-brand b{font-family:var(--display); font-size:1.4rem; letter-spacing:2.5px; color:#fff; display:block; line-height:1}
.foot-brand .muted{font-family:var(--mono); font-size:.7rem; letter-spacing:1.5px; text-transform:uppercase; margin-top:4px}
.foot-links{display:flex; gap:6px 18px; flex-wrap:wrap; font-family:var(--display); letter-spacing:1.8px; font-size:1.02rem}
.foot-links a{color:#cdbba3} .foot-links a:hover{color:var(--acc); text-decoration:none}
.foot-note{font-family:var(--mono); font-size:.7rem; letter-spacing:1px; color:var(--muted); text-align:right; max-width:280px}
.foot-note a.btn{margin-top:10px}
/* Herkunft der Webseite, eigener Block ganz unten wie auf der Nordstreitmacht-Seite (27.10.2026).
   z-index über der Zombie-Horde (fixed, z-index 1), die sonst über Logo und Knopf läuft. */
.fuss-herkunft{position:relative; z-index:2; max-width:1240px; margin:0 auto; padding:2rem 18px 2.4rem; border-top:1px solid var(--line); text-align:center; color:#cdbba3}
.fuss-herkunft a{display:inline-flex; flex-direction:column; align-items:center; gap:.8rem; color:inherit; text-decoration:none}
.fuss-herkunft a:hover{color:var(--txt); text-decoration:none}
.fuss-herkunft img{width:171px; height:179px; object-fit:contain; filter:drop-shadow(0 6px 18px rgba(255,90,40,.3))}
.fuss-herkunft span{font-size:1.12rem}
.fuss-herkunft b{color:var(--draco-hell); font-weight:600; white-space:nowrap}
.fuss-herkunft .fuss-adresse{
  padding:.5rem 1.1rem; border:1px solid color-mix(in srgb,var(--draco) 50%,transparent); border-radius:3px;
  color:var(--draco-hell); font:400 1.3rem/1 var(--display); letter-spacing:1.8px;
  background:color-mix(in srgb,var(--draco) 10%,transparent); transition:border-color .2s,color .2s,background-color .2s;
}
.fuss-herkunft a:hover .fuss-adresse{border-color:var(--draco); color:#fff; background:color-mix(in srgb,var(--draco) 18%,transparent)}
/* Unter 800 px läge am Seitenende das Radio (fest unten links, 206 px hoch, am Handy 137 px) über Satz und Knopf */
@media (max-width:800px){ .fuss-herkunft{padding-bottom:220px} }
@media (max-width:640px){ .fuss-herkunft{padding-bottom:150px} }

/* ---------- Zombies am unteren Rand: etwas kräftiger ---------- */
.zombie-horde{opacity:.9}

/* ---------- Radio: Rahmen an das Theme anpassen ---------- */
.pz-radio{border-radius:4px !important; box-shadow:0 12px 34px rgba(0,0,0,.75), 0 0 0 1px #3a2a1e !important}

/* ---------- Mobil ---------- */
@media (max-width:900px){
  .pda-hero-content{padding:30px 20px 18px; text-align:center; justify-content:center}
  .hero-emblem{width:120px; height:120px; flex-basis:120px}
  .hero-logo{justify-content:center}
  .hero-kicker-sub{display:none}
  .hero-btns{justify-content:center}
  .hero-tagline{margin-left:auto; margin-right:auto}
  .foot-in{flex-direction:column; align-items:stretch}
  .foot-note{text-align:left; max-width:none}
}
@media (max-width:640px){
  /* Banner einzeilig halten — eine zweite Zeile verschwand hinter der Kopfzeile */
  .beta-global-banner{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:.68rem}
  .hero-title{font-size:2.9rem}
  /* Radio auf dem Handy kleiner, sonst verdeckt es den Text */
  .pz-radio{transform:scale(.7) !important; transform-origin:bottom left; left:8px !important; bottom:8px !important}
}