:root{
  --bg:#3B3838;
  --fg:#ffffff;
  --muted:#cfcfcf;

  --header-w:min(576px,72vw);   /* Headerbreite */
  --particle-size:1.5;          /* Desktop-Partikelgröße */
}

/* Light/Dark per BODY-CLASS (passt zu deinem JS) */
body.dark{
  --bg:#3B3838;
  --fg:#ffffff;
  --muted:#cfcfcf;
}
body.light{
  --bg:#f5f5f5;   /* helles Grau */
  --fg:#222222;   /* dunkler Text */
  --muted:#555555;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:'Manrope',system-ui,sans-serif;
  font-weight:200;
  line-height:1.45;
  text-align:center;
  transition:background-color .35s ease,color .35s ease;
}

.wrap{max-width:1100px;margin:0 auto;padding:32px 16px 64px}

/* Header */
.header-svg{
  display:block;
  width:var(--header-w);
  height:auto;
  margin:20px auto 0;
}

/* Map: Desktop = Header * 1.3, Mobile = Header */
.map-wrap{
  position:relative;
  display:block;
  width:min(calc(var(--header-w) * 1.3),95vw);
  margin:30px auto 10px; /* auto = perfekt zentriert */
}
.map-fallback,.map-live{display:block;width:100%;height:auto}
.map-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* Toggle unter Map – klein & zentriert */
.theme-toggle{
  display:block;
  margin:12px auto 8px;
  width:32px;height:32px;
  padding:0;border:none;background:transparent;cursor:pointer;
  transition:transform .15s ease, opacity .15s ease;
}
.theme-toggle:hover{transform:scale(1.08);opacity:.9}
.theme-toggle img{display:block;width:30px;height:30px}

/* Footer */
.footer{margin-top:36px;color:var(--muted);font-size:12px}
.footer .sep{
  height:1px;
  width:min(calc(var(--header-w) * 1.3),95vw); /* gleiche Breite wie Map */
  margin:0 auto 16px;
  background:rgba(255,255,255,0.25);
}
body.light .footer .sep{background:rgba(0,0,0,0.25)}

.contactbar{
  display:flex;flex-direction:column;gap:12px;align-items:center;width:100%;
}
.contactbar .item{
  display:inline-flex;align-items:center;gap:12px;
  color:var(--fg);text-decoration:none;font-size:16px;font-weight:200;
}
.contactbar img{width:24px;height:24px}

.copy{margin-top:20px;opacity:.85;font-size:12px}

/* Mobile-Anpassungen */
@media (max-width:767px){

  /* Mobile-Partikelgröße (dein Wert) */
  :root{
    --particle-size:0.7;
  }

  .header-svg{margin-top:10px}
  .map-wrap{width:var(--header-w);margin:25px auto 6px} /* exakt Headerbreite */

  /* Kontakt: Icon links, Text rechts, ~30% kleiner, Block mittig */
  .contactbar{gap:10px}
  .contactbar .item{
    flex-direction:row;justify-content:center;gap:8px;
    font-size:12px; /* ~30% kleiner als 16px */
    width:fit-content;
  }
  .contactbar img{width:18px;height:18px}
  .contactbar .item span{white-space:nowrap;text-align:left}

  .theme-toggle{width:28px;height:28px;margin:10px auto 2px}
  .theme-toggle img{width:25px;height:25px}

  .footer{margin-top:28px}
  .copy{font-size:8px}
}