/* =========================================================
   EDV Notdienst — High-End Minimal Tech Design System
   - Minimal palette, thin lines, strong typography
   - No rounded corners (square geometry)
   ========================================================= */

/* Fonts: Inter + Space Grotesk (fallback to system) */
:root{
  /* Color tokens */
  --c-bg: #0b0f14;
  --c-bg2:#070a0f;
  --c-fg: #f3f6fb;
  --c-muted:#a3adbd;
  --c-muted2:#7e8899;
  --c-line: rgba(243,246,251,.10);
  --c-line2: rgba(243,246,251,.16);

  /* Accents */
  --c-accent: #00d1ff;   /* cyber-cyan */
  --c-accent2:#b8ff2c;   /* controlled neon */
  --c-danger:#ff3b3b;    /* alert */
  --c-warn:  #ffb020;

  /* Layout */
  --max: 1180px;
  --g: 16px;             /* grid gap */
  --pad: 18px;           /* panel padding */
  --radius: 0px;         /* keep square */
  --shadow: 0 18px 55px rgba(0,0,0,.55);

  /* Type */
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  --font-head: "Space Grotesk", "Inter", ui-sans-serif, system-ui;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;

  /* Scale */
  --h1: clamp(34px, 4vw, 56px);
  --h2: clamp(22px, 2.6vw, 34px);
  --h3: 18px;
  --body: 16px;
  --lh: 1.7;
}

/* Base */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  font-size:var(--body);
  line-height:var(--lh);
  color:var(--c-fg);
  background:
    linear-gradient(90deg, rgba(243,246,251,.06) 1px, transparent 1px) 0 0/64px 64px,
    linear-gradient(180deg, rgba(0,209,255,.05), transparent 18%),
    radial-gradient(800px 400px at 15% 10%, rgba(0,209,255,.10), transparent 60%),
    radial-gradient(700px 360px at 95% -10%, rgba(184,255,44,.08), transparent 55%),
    linear-gradient(180deg, var(--c-bg), var(--c-bg2) 70%);
}

a{color:inherit; text-decoration:none}
a:hover{opacity:.92}

.container{max-width:var(--max); margin:0 auto; padding:0 22px}
.hr{height:1px; background:var(--c-line); margin:18px 0}
.sep{height:1px; background:var(--c-line); margin:28px 0}

/* Micro-typography */
.kicker{
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:12px;
  color:var(--c-muted2);
}
.muted{color:var(--c-muted)}
.muted2{color:var(--c-muted2)}
.mono{font-family:var(--mono)}
.u{ text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Header */
header{
  position:sticky; top:0; z-index:50;
  background: rgba(11,15,20,.86);
  border-bottom:1px solid var(--c-line);
  backdrop-filter: blur(10px);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0; gap:14px;
}
.brand{display:flex; gap:12px; align-items:center}
.mark{
  width:42px; height:42px;
  border:1px solid var(--c-line2);
  background:
    linear-gradient(135deg, rgba(0,209,255,.10), rgba(184,255,44,.06));
  display:grid; place-items:center;
}
.brand b{
  font-family:var(--font-head);
  font-size:14px; letter-spacing:.02em;
  display:block;
}
.brand span{display:block; font-size:12px; color:var(--c-muted2); margin-top:2px}

.menu{display:flex; gap:10px; flex-wrap:wrap}
.menu a{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.10em;
  text-transform:uppercase;
  padding:10px 10px;
  color:var(--c-muted2);
  border:1px solid transparent;
}
.menu a.active,
.menu a:hover{
  border-color: var(--c-line);
  color: var(--c-fg);
  background: rgba(243,246,251,.03);
}

.actions{display:flex; gap:10px; align-items:center}
.pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 12px;
  border:1px solid var(--c-line);
  background: rgba(243,246,251,.02);
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--c-muted2);
  white-space:nowrap;
}
.pill strong{color:var(--c-fg); letter-spacing:.02em}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:10px 14px;
  border:1px solid var(--c-line2);
  background: rgba(243,246,251,.02);
  color:var(--c-fg);
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.10em;
  text-transform:uppercase;
}
.btn:hover{transform: translateY(-1px)}
.btn:active{transform: translateY(0px)}
.btn.primary{
  border-color: rgba(0,209,255,.55);
  background: linear-gradient(135deg, rgba(0,209,255,.20), rgba(0,209,255,.06));
  box-shadow: 0 0 0 1px rgba(0,209,255,.10) inset;
}
.btn.neon{
  border-color: rgba(184,255,44,.55);
  background: linear-gradient(135deg, rgba(184,255,44,.16), rgba(184,255,44,.04));
  box-shadow: 0 0 0 1px rgba(184,255,44,.10) inset;
}
.btn.danger{
  border-color: rgba(255,59,59,.55);
  background: linear-gradient(135deg, rgba(255,59,59,.18), rgba(255,59,59,.05));
}

/* Grid system */
.grid{display:grid; grid-template-columns: repeat(12, 1fr); gap:var(--g)}
.col-4{grid-column: span 4}
.col-5{grid-column: span 5}
.col-6{grid-column: span 6}
.col-7{grid-column: span 7}
.col-8{grid-column: span 8}
.col-12{grid-column: span 12}

/* Panels (thin-line, no rounded) */
.panel{
  border:1px solid var(--c-line);
  background: rgba(243,246,251,.02);
  box-shadow: var(--shadow);
}
.panel.pad{padding:var(--pad)}
.panel.edge{border-left: 3px solid var(--c-accent)}
.panel.edge2{border-left: 3px solid var(--c-accent2)}
.panel.alert{border-left: 3px solid var(--c-danger)}
.panel.flat{box-shadow:none}

.section{padding:26px 0}
h1{font-family:var(--font-head); font-size:var(--h1); line-height:1.05; margin:10px 0 10px; letter-spacing:-.03em}
h2{font-family:var(--font-head); font-size:var(--h2); line-height:1.15; margin:0 0 10px; letter-spacing:-.02em}
h3{font-family:var(--font-head); font-size:var(--h3); margin:0 0 8px}
.lead{color:var(--c-muted); margin:0 0 14px; max-width:78ch}

/* Hero */
.hero{padding:42px 0 18px}
.hero p{max-width:74ch}
.hero .meta{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.tag{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.10em;
  text-transform:uppercase;
  padding:8px 10px;
  border:1px solid var(--c-line);
  color:var(--c-muted2);
  background: rgba(243,246,251,.02);
}
.tag.accent{border-color: rgba(0,209,255,.35); color: rgba(0,209,255,.95)}
.tag.neon{border-color: rgba(184,255,44,.35); color: rgba(184,255,44,.95)}
.tag.danger{border-color: rgba(255,59,59,.35); color: rgba(255,59,59,.95)}

/* Protocol list */
.protocol{
  display:grid; gap:10px; margin-top:10px;
}
.protocol .row{
  display:flex; align-items:flex-start; gap:12px;
  padding:12px 0;
  border-bottom:1px solid rgba(243,246,251,.08);
}
.protocol .row:last-child{border-bottom:none}
.stepno{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.18em;
  color:var(--c-muted2);
  min-width:52px;
}
.protocol strong{font-family:var(--font-head)}

/* Feature blocks */
.feature{
  display:flex; gap:12px; align-items:flex-start;
}
.icon{
  width:44px; height:44px;
  border:1px solid var(--c-line2);
  background: rgba(243,246,251,.02);
  display:grid; place-items:center;
}
.icon.accent{border-color: rgba(0,209,255,.35); background: rgba(0,209,255,.06)}
.icon.neon{border-color: rgba(184,255,44,.35); background: rgba(184,255,44,.06)}
.icon.alert{border-color: rgba(255,59,59,.35); background: rgba(255,59,59,.06)}

/* Tables */
.table{
  width:100%;
  border-collapse:collapse;
  border:1px solid var(--c-line);
  background: rgba(243,246,251,.01);
}
.table th,.table td{
  padding:12px;
  border-bottom:1px solid rgba(243,246,251,.08);
  text-align:left;
}
.table th{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--c-muted2);
}
.table tr:last-child td{border-bottom:none}

/* Forms */
label{
  display:block;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--c-muted2);
  margin:14px 0 6px;
}
input, select, textarea{
  width:100%;
  padding:12px;
  border:1px solid var(--c-line2);
  background: rgba(243,246,251,.02);
  color:var(--c-fg);
  outline:none;
  font-family:var(--font);
}
textarea{min-height:150px; resize:vertical}
input:focus, select:focus, textarea:focus{
  border-color: rgba(0,209,255,.55);
  box-shadow: 0 0 0 4px rgba(0,209,255,.10);
}

.notice{
  border:1px solid rgba(0,209,255,.30);
  background: rgba(0,209,255,.07);
  padding:14px;
  color: #d9fbff;
}
.notice.warn{
  border-color: rgba(255,59,59,.30);
  background: rgba(255,59,59,.07);
  color:#ffe1e6;
}

/* Footer + mobile bar */
footer{
  margin-top:28px;
  border-top:1px solid var(--c-line);
  background: rgba(7,10,15,.78);
  padding:26px 0 62px;
}
.footer-grid{display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:16px}
.footer-grid a{color:var(--c-muted)}
.footer-grid a:hover{color:var(--c-fg)}

.mobilebar{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  display:none;
  background: rgba(11,15,20,.92);
  border-top:1px solid var(--c-line);
  padding:10px 0;
  backdrop-filter: blur(10px);
}
.mobilebar .container{display:flex; gap:10px}
.mobilebar .btn{flex:1}

#cookie-banner{
  display:none;
  position:fixed;
  left:16px; right:16px; bottom:74px;
  max-width:820px;
  margin:0 auto;
  z-index:90;
}

/* Responsive */
@media (max-width: 980px){
  .menu{display:none}
  .footer-grid{grid-template-columns: 1fr 1fr}
}
@media (max-width: 760px){
  .col-4,.col-5,.col-6,.col-7,.col-8{grid-column: span 12}
  .footer-grid{grid-template-columns:1fr}
  .mobilebar{display:block}
  h1{letter-spacing:-.02em}
}


/* === STICKY_FOOTER_PATCH === */
html, body { height: 100%; }
body { display:flex; flex-direction:column; }
main { flex:1 0 auto; }
footer { margin-top:auto; }
/* =========================== */


/* === COOKIE_SOLID_PATCH === */
#cookie-banner{
  background: var(--c-bg);
  border-color: rgba(243,246,251,.18);
  box-shadow: 0 18px 55px rgba(0,0,0,.65);
}
#cookie-banner .muted{ color: var(--c-muted); }
/* ========================== */


/* === CARD_READABILITY_PATCH === */
.panel{
  background: #11161d; /* darker solid panel */
  border: 1px solid rgba(243,246,251,.18);
}

.panel.pad{
  padding: 22px;
}

.panel.edge{
  border-left: 3px solid var(--c-accent);
}

.panel.edge2{
  border-left: 3px solid var(--c-accent2);
}

.panel.alert{
  border-left: 3px solid var(--c-danger);
}

/* Improve text contrast inside panels */
.panel .muted{
  color: #b8c2d3;
}

.panel .muted2{
  color: #9aa6b8;
}

/* Tables inside panels more readable */
.table{
  background: #0f141a;
  border-color: rgba(243,246,251,.18);
}

.table th{
  color: #cfd8e6;
}

.table td{
  color: #e6edf7;
}
/* ============================== */

/* === CONTINUOUS_BG_PATCH === */
body{
  background: linear-gradient(180deg, #0b0f14 0%, #0c1118 100%);
}
/* ================================= */

/* === NAV_ENHANCE_PATCH === */
header{
  background:#0b0f14;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.nav{
  height:64px;
}

.menu a{
  padding:14px 12px;
}

.menu a.active{
  border-bottom:2px solid var(--c-accent);
}
/* ================================= */

/* === INFO_BUTTON_PATCH === */
.info-btn{
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.15);
  background:#121821;
  position:fixed;
  right:16px;
  bottom:90px;
  z-index:100;
}

.info-btn:hover{
  background:#1a2230;
}
/* ================================= */

/* ===== ENTERPRISE_SHARPEN ===== */
body{
  background: linear-gradient(180deg,#0a0e13 0%, #0d1218 100%);
}

header.scrolled{
  height:52px;
  transition:all .25s ease;
}

header.scrolled .nav{
  height:52px;
}

.nav{
  transition:all .25s ease;
}

/* Mobile Slide Panel */
.mobile-toggle{
  display:none;
  width:44px;
  height:44px;
  border:1px solid rgba(255,255,255,.15);
  background:#11161d;
  align-items:center;
  justify-content:center;
}

@media(max-width:980px){
  .mobile-toggle{display:flex}
}

.slide-panel{
  position:fixed;
  top:0;
  right:-320px;
  width:300px;
  height:100%;
  background:#0f141a;
  border-left:1px solid rgba(255,255,255,.1);
  transition:right .3s ease;
  z-index:200;
  padding:30px 20px;
}

.slide-panel.open{
  right:0;
}

.slide-panel a{
  display:block;
  margin-bottom:18px;
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--c-muted);
}

.overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  display:none;
  z-index:150;
}

.overlay.active{display:block}

/* Expandable Info Panel */
.info-panel{
  position:fixed;
  right:16px;
  bottom:90px;
  width:320px;
  background:#11161d;
  border:1px solid rgba(255,255,255,.15);
  padding:20px;
  display:none;
  z-index:120;
}

.info-panel.open{display:block}

/* ================================= */

/* ===== HERO GRID OVERLAY ===== */
.hero{
  position:relative;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:40px 40px;
  pointer-events:none;
}

/* ===== CYBER STATUS INDICATOR ===== */
.status-indicator{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#8cffb0;
}
.status-dot{
  width:8px;
  height:8px;
  background:#00ff88;
  box-shadow:0 0 8px #00ff88;
}

/* ===== ANIMATED NAV ACCENT ===== */
.menu a{
  position:relative;
}
.menu a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-4px;
  height:2px;
  width:0;
  background:var(--c-accent);
  transition:width .3s ease;
}
.menu a.active::after,
.menu a:hover::after{
  width:100%;
}

/* ===== LIGHT MODE VARIANT ===== */
body.light-mode{
  background:#f4f7fb;
  color:#111;
}
body.light-mode .panel{
  background:#ffffff;
  border:1px solid #ddd;
}
body.light-mode header{
  background:#ffffff;
  border-bottom:1px solid #ddd;
}

/* ===== SECURITY DASHBOARD STATS ===== */
.dashboard{
  display:flex;
  gap:20px;
  margin-top:20px;
}
.stat-box{
  flex:1;
  padding:20px;
  border:1px solid rgba(255,255,255,.1);
  background:#11161d;
}
.stat-value{
  font-size:28px;
  font-family:var(--mono);
  color:#00d1ff;
}
.stat-label{
  font-size:12px;
  color:var(--c-muted);
  text-transform:uppercase;
  letter-spacing:.12em;
}

/* ===== STICKY DESKTOP FOOTER BAR ===== */
.desktop-bar{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  background:#0f141a;
  border-top:1px solid rgba(255,255,255,.1);
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 40px;
  z-index:120;
}

.desktop-bar .left{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.12em;
  color:#8cffb0;
}

.desktop-bar .right a{
  margin-left:20px;
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:.12em;
}

@media(max-width:980px){
  .desktop-bar{display:none;}
}

/* ===== STICKY MOBILE BAR ===== */
.mobile-bar{
  display:none;
}

@media(max-width:980px){
  .mobile-bar{
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    background:#0f141a;
    border-top:1px solid rgba(255,255,255,.1);
    display:flex;
    justify-content:space-around;
    padding:10px 0;
    z-index:120;
  }
}

/* ===== INFO POPUP PANEL ===== */

.info-popup h4{
  margin-top:0;
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:12px;
}

.info-popup p{
  font-size:14px;
  color:var(--c-muted);
}

.info-popup a{
  display:inline-block;
  margin-top:10px;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.12em;
}

/* ===== SOC COMMAND STRIP ===== */
.desktop-bar{
  font-family:var(--mono);
}

.pulse-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#00ff88;
  animation:pulse 1.5s infinite;
  display:inline-block;
  margin-right:8px;
}

@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(0,255,136,.7)}
  70%{box-shadow:0 0 0 10px rgba(0,255,136,0)}
  100%{box-shadow:0 0 0 0 rgba(0,255,136,0)}
}

.command-indicators{
  display:flex;
  gap:30px;
  align-items:center;
}

.command-indicators span{
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

/* ===== SLIDE-IN INFO POPUP ===== */

/* ===== PREMIUM RETAINER BANNER ===== */
.retainer-banner{
  position:fixed;
  top:64px;
  left:0;
  right:0;
  background:#10161d;
  border-bottom:1px solid rgba(255,255,255,.1);
  text-align:center;
  padding:6px 0;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.14em;
  z-index:110;
}

/* ===== INCIDENT_MODE_PATCH_V9 ===== */
body.incident-mode{
  background: linear-gradient(180deg,#14080b 0%, #0d1218 55%, #0b0f14 100%);
}
body.incident-mode .panel{
  border-color: rgba(255,59,59,.30);
  box-shadow: 0 18px 55px rgba(0,0,0,.55), 0 0 0 1px rgba(255,59,59,.08) inset;
}
body.incident-mode .btn.primary{
  border-color: rgba(255,59,59,.55);
  background: linear-gradient(135deg, rgba(255,59,59,.18), rgba(255,59,59,.05));
  box-shadow: 0 0 0 1px rgba(255,59,59,.10) inset;
}
/* Header scroll-state: avoid height jump bugs */
header{transition: padding .25s ease, background .25s ease, border-color .25s ease;}
header.scrolled .nav{padding:10px 0;}
/* Animated accent line: ensure consistent alignment */
.menu a::after{bottom:4px;}
/* ================================== */

/* ===== TRAFFIC_GRAPH_PATCH_V9 ===== */
.traffic-card{
  position:relative;
  overflow:hidden;
}
.graph-wrap{
  margin-top:12px;
  border:1px solid rgba(255,255,255,.10);
  background:#0f141a;
  padding:10px;
}
canvas#trafficGraph{
  width:100%;
  height:120px;
  display:block;
}
.legend{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:10px;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--c-muted2);
}
.legend .dot{
  width:8px;height:8px;display:inline-block; margin-right:8px;
  background: var(--c-accent);
}
.legend .dot.warn{background: var(--c-warn);}
/* ================================== */

/* ===== INFO_POPUP_SLIDE_V9 ===== */
.info-popup{
  position:fixed;
  right:16px;
  bottom:100px;
  width:360px;
  background:#11161d;
  border:1px solid rgba(255,255,255,.15);
  padding:20px;
  z-index:150;
  transform: translateX(120%);
  opacity:0;
  pointer-events:none;
  transition: transform .28s ease, opacity .28s ease;
}
.info-popup.open{
  transform: translateX(0);
  opacity:1;
  pointer-events:auto;
}
/* ================================== */

/* ===== BOTTOM_SAFEAREA_V9 ===== */
main{ padding-bottom: 90px; } /* avoid overlap with desktop/mobile bars */
@media(max-width:980px){
  main{ padding-bottom: 120px; }
}
/* ============================ */

/* ===== HEADER_FIX_V12 ===== */
header{
  position:sticky;
  top:0;
  z-index:999;
  background:#0b0f14;
}
header.scrolled{
  transform:none !important;
}
/* remove conflicting transitions */
header, header *{
  transition:none !important;
}
/* ================================= */