/* Baseline: Stil angelehnt an klare, blaue Palette (in Anlehnung an eti-net.de) */
:root{
  /* Background and card */
  --bg:#f7f7f6;
  --card:#ffffff;
  --muted:#6b7280;
  /* Orange-oriented palette (tuned to logo.webp) */
  /* Darker/dominant orange */
  --primary: #ae7013; /* dunkleres orange (buttons, key accents) */
  /* Lighter/golden orange */
  --accent: #f9b243; /* golden/orange (counters, highlights) */
  --success:#16a34a; /* grün */
  --danger:#dc2626; /* rot */
  --warn:#f59e0b; /* gelb/orange */
  --max-width:980px;
}

*{box-sizing:border-box}
.html,body{height:100%}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  /* normaler Text: golden / accent color */
  color: var(--accent);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* Use banner.jpg as full-page background with a subtle dark overlay for legibility */
  background-color:var(--bg);
  background-image: linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.12)), url('banner.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.container{max-width:var(--max-width);margin:0 auto;padding:20px}
.site-header{
  /* transparent header: the page background shows through; add a subtle semi-transparent overlay to increase contrast */
  background: linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.18));
  color:#fff; padding:28px 0; margin-bottom:20px;
}
.header-inner{display:flex;align-items:center}
.brand-wrap{display:flex;align-items:center;gap:12px}
.brand-logo{width:64px;height:auto;display:block;border-radius:6px;background:rgba(255,255,255,0.08);padding:4px}
.brand-text{display:flex;flex-direction:column}
.site-header .brand{margin:0;font-size:1.6rem;letter-spacing:0.6px;color:var(--primary)}
.site-header .tag{margin:6px 0 0;opacity:0.95;color:var(--primary)}

.controls{display:flex;gap:12px;align-items:center;margin-bottom:18px}
.btn{
  /* make button neutral — keep colors for text elements instead */
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.95);
  border: 1px solid rgba(255,255,255,0.08);
  padding:10px 14px;border-radius:8px;cursor:pointer;font-weight:600
}
.btn:hover{background: rgba(255,255,255,0.12)}

.auto-refresh input[type="checkbox"]{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 2px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.03);
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  cursor: pointer;
  position: relative;
  transition: background .14s ease, border-color .12s ease, box-shadow .12s ease, transform .08s ease;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.12);
}
.auto-refresh input[type="checkbox"]::after{
  content: '';
  position: absolute;
  left: 6px;
  top: 3px;
  width: 6px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  opacity: 0;
  transition: transform .12s ease, opacity .12s ease;
}
.auto-refresh input[type="checkbox"]:checked{
  background: linear-gradient(180deg, var(--primary), var(--accent));
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(174,112,19,0.12);
}
.auto-refresh input[type="checkbox"]:checked::after{
  transform: rotate(45deg) scale(1);
  opacity: 1;
  border-color: #fff;
}
.auto-refresh input[type="checkbox"]:hover{
  transform: translateY(-1px);
}
.auto-refresh input[type="checkbox"]:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(249,178,67,0.18);
  border-color: var(--accent);
}

.auto-refresh select#intervalSelect{
  background: rgba(255,255,255,0.04);
  color: #ffffff;
  border:1px solid rgba(255,255,255,0.12);
  padding:6px 10px;
  border-radius:6px;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  padding-right:28px;
}

/* small caret for select (keeps it lightweight) */
.auto-refresh select#intervalSelect{background-image: linear-gradient(45deg, transparent 50%, rgba(0,0,0,0.25) 50%), linear-gradient(135deg, rgba(0,0,0,0.25) 50%, transparent 50%);background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 12px) calc(50% - 3px);background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.auto-refresh{display:flex;gap:8px;align-items:center;color:rgba(255,255,255,0.96)}
.last-run{margin-left:auto;color:rgba(255,255,255,0.85);font-size:0.9rem}

/* Status cards (dark translucent boxes) */
.status-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:12px}
.status-card{
  background: rgba(6,8,10,0.45); /* dark frosted base */
  border-radius:10px;
  padding:14px;
  border:1px solid rgba(255,255,255,0.06);
  box-shadow: 0 6px 18px rgba(2,6,23,0.28);
  color:var(--accent);
  /* glass/frosted effect; browsers that support backdrop-filter will show blur */
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  backdrop-filter: blur(6px) saturate(120%);
  /* slightly stronger background for browsers without backdrop-filter */
  background-clip: padding-box;
}
.card-head{display:flex;align-items:center;justify-content:space-between}
.card-head h2{margin:0;font-size:1rem;color:var(--primary)}
.card-body{margin-top:10px;color:var(--accent);font-size:0.95rem}
.desc{margin:0 0 8px;color:var(--accent);font-weight:600}

/* Subtler status pill (muted tint, smaller, less contrast) */
.status-pill{
   display:inline-block;
   min-width:56px;
   text-align:center;
   padding:3px 8px;
   border-radius:999px;
   font-weight:700;
   font-size:0.78rem;
   text-transform:capitalize;
   letter-spacing:0.2px;
   transition: background .14s ease, border-color .12s ease, color .12s ease, transform .06s ease;
   border: 1px solid rgba(0,0,0,0.12);
   box-shadow: 0 1px 0 rgba(0,0,0,0.06) inset;
}
/* use soft tints instead of bright gradients */
.status-pill.status-up{
   background: rgba(34,197,94,0.36);
   color: #ffffff;
   border-color: rgba(34,197,94,0.36);
}
.status-pill.status-down{
   background: rgba(239,68,68,0.34);
   color: #ffffff;
   border-color: rgba(239,68,68,0.32);
}
.status-pill.status-degraded{
   background: rgba(245,158,11,0.34);
   color: #1f1200;
   border-color: rgba(245,158,11,0.30);
}
.status-pill.status-unknown{
   background: rgba(255,255,255,0.12);
   color: rgba(0,0,0,0.85);
   border-color: rgba(255,255,255,0.14);
}

.notes{margin-top:18px;color:rgba(255,255,255,0.9);font-size:0.9rem}

/* Counter / info boxes: dark transparent background and orange counters */
.counter-container{
  display:inline-block;
  background-color: rgba(8,10,12,0.48);
  padding:18px;
  border-radius:10px;
  margin:10px;
  width:180px;
  color:var(--accent);
  -webkit-backdrop-filter: blur(6px) saturate(115%);
  backdrop-filter: blur(6px) saturate(115%);
  box-shadow: 0 6px 14px rgba(2,6,23,0.18);
}
.counter{
  font-size:2em;
  font-weight:700;
  color:var(--accent); /* golden/orange */
  margin:10px 0;
}
.counters_head{
  color:var(--primary); /* darker orange */
  font-weight:600;
}

/* Map styling */
.map-container{height:360px;border-radius:8px;overflow:hidden}
.location-section{margin-top:18px}

@media (max-width:480px){
  .site-header .brand{font-size:1.25rem}
}