/*
  Project Doomsday — Steel UI v4.2
  Fixes:
  - Kein Doppel-Blech: nur EINE sichtbare Platte pro Bereich
  - Startseite zeigt keinen WP-"Hallo Welt" Content mehr (Template-seitig entfernt)
  - News/Karte nutzen nur die Main-Platte; Innenbereich transparent/neutral
  - News-Karten in gleicher Stahl-Farbwelt wie Header
*/

:root{
  --steel-bg-1:#2a2f36; --steel-bg-2:#1c2026; --steel-stroke:#2b2f36;
  --steel-hair:rgba(255,255,255,.06);
  --steel-shadow:rgba(0,0,0,.55); --steel-shadow-soft:rgba(0,0,0,.35);

  --txt-1:#e9edf3; --txt-2:#a9b1bf; --txt-3:#828c9c;
  --accent:#ff5a26; --accent-soft:rgba(255,90,38,.18);

  --font-ui:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-tech:"Orbitron","Manrope",system-ui,Arial,sans-serif;

  --wrap:1400px;                 /* Max. Gesamtbreite */
  --plate-w: 1320px;             /* EINHEITLICHE PLATTENBREITE */
  --plate-radius:20px;
  --gap-xl:36px; --gap-lg:24px; --gap-md:16px; --gap-sm:10px;

  --btn-minw:150px; --btn-pad-y:12px; --btn-pad-x:20px;

  --gap-plates: 18px;            /* Abstand Header—Main und Main—Footer identisch */
}

/* Basis */
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{
  margin:0; color:var(--txt-1); font-family:var(--font-ui); font-size:18px; line-height:1.7;
  background:
    repeating-linear-gradient(180deg,rgba(255,255,255,.025) 0px,rgba(255,255,255,.025) 1px,transparent 2px,transparent 3px),
    radial-gradient(1200px 600px at 10% 0%, #262b33 0%, rgba(38,43,51,0) 60%),
    radial-gradient(1200px 600px at 90% 100%, #1a1d22 0%, rgba(26,29,34,0) 60%),
    linear-gradient(160deg,#1e2126,#14171b);
  background-attachment: fixed, fixed, fixed, fixed;
}
h1,h2,h3,h4{font-family:var(--font-tech); color:#fff; margin:0 0 .5em; letter-spacing:.25px}
h1{font-weight:800; font-size:clamp(30px,4.5vw,46px); line-height:1.15}
h2{font-weight:800; font-size:clamp(22px,3.2vw,30px)}
h3{font-weight:700; font-size:clamp(18px,2.4vw,22px)}
p{margin:0 0 1em; color:var(--txt-2)}
a{color:var(--accent); text-decoration:none; transition:color .18s ease}
a:hover{color:#fff}

.dd-wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--gap-lg)}
.container-plate{max-width:var(--plate-w); margin:0 auto}

/* EINHEITLICHE PLATTE (nur Hülle — der Innenbereich wird nicht nochmal „geplattet“) */
.plate{
  position:relative; border-radius:var(--plate-radius);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 16px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0, rgba(255,255,255,.03) 1px, transparent 2px, transparent 3px),
    linear-gradient(160deg, var(--steel-bg-1), var(--steel-bg-2));
  border:1px solid var(--steel-stroke);
  box-shadow: 0 20px 45px var(--steel-shadow), inset 0 1px 0 var(--steel-hair), inset 0 -1px 0 rgba(0,0,0,.35);
}

/* ——— Header-Platte ——— */
.site-header{ margin: var(--gap-plates) auto; }
.site-header .container-plate{ padding: 12px var(--gap-lg); }
.site-header-inner{
  display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap:16px;
}

/* Logo AUF DER PLATTE */
.custom-logo-link{position:relative; left:0; display:inline-flex; align-items:center}
.custom-logo-link img{height:140px; width:auto; display:block}

/* Menü: eingefräst, Buttons als Taster */
.main-navigation{justify-self:center}
.main-navigation .menu.menu-main{
  list-style:none; margin:0; padding:0; display:flex; gap:12px; flex-wrap:wrap; justify-content:center
}
.main-navigation .menu.menu-main > li { position:relative }
.main-navigation .menu.menu-main > li > a{
  min-width:var(--btn-minw);
  padding:var(--btn-pad-y) var(--btn-pad-x);
  border-radius:12px;
  font-family:var(--font-tech); font-weight:800; letter-spacing:.34px;
  color:#dfe4ec;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.03) 0, rgba(255,255,255,.03) 1px, transparent 2px, transparent 3px),
    linear-gradient(160deg,#363c45,#282e36);
  text-shadow: 0.6px 0.6px 0 rgba(0,0,0,.9), -0.6px -0.6px 0 rgba(255,255,255,.12);
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.06), inset -3px -3px 8px rgba(0,0,0,.55), inset 3px 3px 8px rgba(0,0,0,.35);
  border:1px solid #606772; transform:translateY(0);
  transition: transform .14s, box-shadow .14s, border-color .14s, color .14s, text-shadow .14s;
}
.main-navigation .menu.menu-main > li > a:hover,
.main-navigation .menu.menu-main > li.current-menu-item > a,
.main-navigation .menu.menu-main > li.current-menu-ancestor > a{
  color:var(--accent); border-color:var(--accent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset -1px -1px 4px rgba(0,0,0,.35),
    0 10px 18px var(--steel-shadow-soft),
    0 0 22px var(--accent-soft);
  text-shadow: 0 0 10px var(--accent), 0 0 18px rgba(255,90,38,.45);
  transform:translateY(-1px);
}

/* Social: gleicher Taster-Look */
.header-social{justify-self:end; display:flex; gap:12px}
.header-social .social-link{
  width:58px; height:58px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center;
  color:#dfe4ec; border:1px solid #606772;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.03) 0, rgba(255,255,255,.03) 1px, transparent 2px, transparent 3px),
    linear-gradient(160deg,#363c45,#282e36);
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.06), inset -3px -3px 8px rgba(0,0,0,.55), inset 3px 3px 8px rgba(0,0,0,.35);
  transition:all .14s ease
}
.header-social .social-link .ico{width:26px; height:26px; display:block}
.header-social .social-link:hover{
  color:var(--accent); border-color:var(--accent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset -1px -1px 4px rgba(0,0,0,.35), 0 10px 18px var(--steel-shadow-soft), 0 0 20px var(--accent-soft);
  transform: translateY(-1px);
}

/* ——— Hero (Loop) ——— */
/* exakt Breite der Header-Platte (+ 10px Überstand) */
.hero-loop{ margin: var(--gap-plates) auto; }
.hero-loop .container-plate{ padding: 14px var(--gap-lg) 24px; }
.hero-monitor{
  border-radius: var(--plate-radius);
  border:1px solid var(--steel-stroke);
  box-shadow: 0 14px 34px var(--steel-shadow);
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.03) 0, rgba(255,255,255,.03) 1px, transparent 2px, transparent 3px),
    linear-gradient(160deg, #242930, #14181d);
  padding:14px;
}
.hero-monitor-bezel{ background:linear-gradient(180deg,#1a1d22,#121417); border:1px solid #2b2f36; border-radius:14px; box-shadow:inset 0 1px 0 rgba(255,255,255,.05); padding:10px }
.hero-monitor-screen{ border-radius:12px; overflow:hidden; border:1px solid #2b2d2f; box-shadow:inset 0 0 0 2px rgba(255,255,255,.03) }
.hero-video{ display:block; width: calc(100% + 10px); max-width: calc(100% + 10px); margin-left:-5px; max-height:62vh; object-fit:cover; background:#000 }

/* ——— Main-Platte ——— */
.site-main-plate{ margin: var(--gap-plates) auto; }
.site-main-plate .container-plate{ padding: 24px var(--gap-lg); }

/* WICHTIG: Innenbereich neutral → KEIN zweites Blech! */
.steel-page-inner{
  border:0; background:transparent; box-shadow:none; padding: 0;
}

/* News Karten in Stahl-Look (wie Header) */
.dd-news-stack{ display:flex; flex-direction:column; gap:14px }
.news-card{
  display:grid; grid-template-columns: 280px 1fr; gap:16px; align-items:stretch;
  padding:14px; border-radius:14px; border:1px solid #606772;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.03) 0, rgba(255,255,255,.03) 1px, transparent 2px, transparent 3px),
    linear-gradient(160deg, #363c45, #282e36);
  text-decoration:none;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.06), inset -3px -3px 8px rgba(0,0,0,.55), inset 3px 3px 8px rgba(0,0,0,.35);
  transition: transform .14s, box-shadow .14s, border-color .14s;
}
.news-card:hover{
  transform: translateY(-1px);
  border-color: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 18px var(--steel-shadow-soft), 0 0 22px var(--accent-soft);
}
.news-media{ border-radius:10px; overflow:hidden; border:1px solid #2b2f36; background:#0a0c0f }
.news-media img{ width:100%; height:100%; object-fit:cover; display:block }
.news-body{ display:flex; flex-direction:column; gap:10px }
.news-meta{ font-size:14px; color:var(--txt-3) }
.news-title{ font-family:var(--font-tech); font-weight:800; color:#fff; margin:0 }
.news-excerpt{ color:var(--txt-2) }
.news-src{ font-family:var(--font-tech); color:var(--accent); font-weight:700 }

/* Ranking (passt zum Stahl) */
.dd-ranking{display:block}
.bar-row{
  display:grid; grid-template-columns:56px 1fr 360px 70px; align-items:center;
  gap:12px; padding:12px 14px; border-radius:12px;
  background: linear-gradient(160deg, #1b1f25, #13171c);
  border:1px solid #252a31;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.04), inset -2px -2px 6px rgba(0,0,0,.45);
  transition: transform .14s, box-shadow .14s, border-color .14s;
  margin-bottom:10px;
}
.bar-row:hover{ transform:translateY(-1px); border-color:var(--accent); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 18px var(--accent-soft) }
.bar-rank{font-family:var(--font-tech); font-weight:800; color:var(--txt-3)}
.bar-label{color:#e6ebf2; font-weight:700}
.bar-track{height:12px; border-radius:999px; background:#0e1013; border:1px solid #262a31; overflow:hidden}
.bar-fill{height:100%; display:block; background:linear-gradient(90deg, rgba(255,90,38,.9), rgba(255,90,38,.55)); border-right:1px solid rgba(255,255,255,.25); box-shadow: inset 0 0 6px rgba(0,0,0,.35); transition:width .7s cubic-bezier(.2,.7,.2,1)}
.bar-score{font-family:var(--font-tech); font-weight:800; color:#fff}
.bar-hint{grid-column:2 / span 3; font-size:14px; color:var(--txt-3)}

/* Fixed News-Ticker */
.ticker-fixed{ position:fixed; left:5vw; right:5vw; bottom:5mm; z-index:160; height:72px; border-radius:14px;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.03) 0, rgba(255,255,255,.03) 1px, transparent 2px, transparent 3px),
    linear-gradient(160deg, var(--steel-bg-1), var(--steel-bg-2));
  border:1px solid var(--steel-stroke); box-shadow: inset 0 1px 0 var(--steel-hair), 0 -12px 30px rgba(0,0,0,.4);
}
.ticker-fixed .ticker-inner{height:100%; display:flex; align-items:center; gap:14px; padding:0 18px; overflow:hidden}
.ticker-fixed .label{font-family:var(--font-tech); font-weight:800; color:var(--accent)}
.ticker-fixed .stream{flex:1; overflow:hidden; white-space:nowrap}
.ticker-fixed .stream ul{display:inline-flex; gap:28px; list-style:none; margin:0; padding:0; will-change:transform}
.ticker-fixed.is-ready .stream ul{animation:dd-marquee 900s linear infinite}
.ticker-fixed .stream li{display:inline-flex; gap:10px}
.ticker-fixed .stream a{color:#e8edf6}
.ticker-fixed .stream .src{font-family:var(--font-tech); font-weight:700; color:var(--accent)}
.ticker-fixed .stream .ttl{ font-weight:700}
.ticker-fixed .stream .sum{opacity:.92}
@keyframes dd-marquee{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* Footer/Back-to-top */
.dd-footer{background:transparent; border:none}
.dd-footer-grid{display:grid; grid-template-columns: 1fr 1fr 1fr; gap:12px}
.dd-logo-mini{font-family:var(--font-tech); font-weight:800}
#dd-backtotop{
  position:fixed; right:18px; bottom: calc(5mm + 72px + 10px); width:46px; height:46px; border-radius:999px;
  color:#fff; border:1px solid #606772;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.03) 0, rgba(255,255,255,.03) 1px, transparent 2px, transparent 3px),
    linear-gradient(160deg,#363c45,#282e36);
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.06), inset -3px -3px 8px rgba(0,0,0,.55), inset 3px 3px 8px rgba(0,0,0,.35);
}
#dd-backtotop:hover{
  color:var(--accent); border-color:var(--accent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset -1px -1px 4px rgba(0,0,0,.35), 0 10px 18px var(--steel-shadow-soft), 0 0 20px var(--accent-soft);
  transform: translateY(-1px);
}

/* Responsive */
@media (max-width:980px){
  .site-header-inner{grid-template-columns:1fr 44px; gap:10px}
  .main-navigation{grid-column:1 / -1}
  .news-card{ grid-template-columns: 1fr; }
  .custom-logo-link img{height:90px}
  .hero-video{max-height:42vh}
}

/* Leaflet kurz (dunkel) */
.leaflet-container{background:#0a0c0f}
.leaflet-popup-content-wrapper{background:#14171b; color:#e9edf3; border:1px solid #2b2f36; border-radius:10px}
.leaflet-popup-tip{background:#14171b}