/* Shared design for all Tankstellenpreise pages: nav bar, typography,
   tables, legends. Loaded by every page (hand-written + generated). */
:root{
  --navy:#1c2541; --amber:#f4a300; --amber-d:#9c5b00;
  --ink:#2b2b2b; --muted:#777; --line:#e3e3e6;
  --nav-h:52px;
  --green:#1a9850; --red:#d73027; --orange:#f46d43; --blue:#4575b4;
}
*{box-sizing:border-box}

/* ---------- fixed top navigation (floats over maps, sticky on docs) ---------- */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:3000;
  display:flex; align-items:center; gap:6px 14px; flex-wrap:wrap;
  padding:8px 16px; background:rgba(255,255,255,.96);
  box-shadow:0 1px 10px rgba(0,0,0,.20);
  font:600 13px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
.site-nav .brand{color:var(--navy);font-size:15px;font-weight:800;
  text-decoration:none;margin-right:4px;white-space:nowrap}
.site-nav .nav-links{display:flex;flex-wrap:wrap;gap:3px;align-items:center}
.site-nav a{color:var(--navy);text-decoration:none;padding:5px 9px;border-radius:6px;white-space:nowrap}
.site-nav a:hover{background:#eef0f4}
.site-nav a.active{background:var(--navy);color:#fff}
.site-nav .sep{width:1px;height:18px;background:var(--line);margin:0 3px}
@media(max-width:720px){.site-nav .brand span{display:none}}

/* keep Leaflet/folium map controls clear of the fixed nav */
.leaflet-top{margin-top:var(--nav-h)}

/* ---------- document pages (chart/stats) ---------- */
body.doc{font:15px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--ink);margin:0;padding:calc(var(--nav-h) + 22px) 24px 48px;max-width:980px}
body.doc.wide{max-width:1220px}
.page-header{margin:0 0 10px}
.page-header h1{font-size:24px;color:var(--navy);margin:0 0 6px}
.lead{color:#3a3a3a;font-size:15px;margin:0 0 2px;max-width:74ch}
h2{color:var(--navy);font-size:19px;margin:26px 0 6px}
.muted{color:var(--muted);font-size:13px}
a{color:#1b5fa8}

/* tables */
table{border-collapse:collapse;margin:16px 0;width:100%}
th,td{border:1px solid var(--line);padding:7px 10px;text-align:right}
th{background:#f6f7f9;color:var(--navy)}
td:first-child,th:first-child{text-align:left}
.pos{color:var(--red);font-weight:600}
.neg{color:var(--green);font-weight:600}

.canvas{max-width:840px;margin:20px 0}
details{margin:10px 0}summary{cursor:pointer;color:var(--navy)}

/* ---------- legends / floating info cards (maps) ---------- */
.legend i{display:inline-block;width:14px;height:14px;margin-right:5px;
  border-radius:50%;vertical-align:-2px}
.info-card{
  background:#fff;border-radius:10px;box-shadow:0 1px 10px rgba(0,0,0,.22);
  padding:12px 14px;font:13px/1.45 system-ui,sans-serif;color:var(--ink);
}
.info-card h1{font-size:15px;color:var(--navy);margin:0 0 6px}
.info-card .lead{font-size:12px;color:#555;margin:0 0 8px}

/* frosted floating legend/panel shared by all maps (Leaflet + folium).
   backdrop-filter blurs the busy map behind the card. */
.map-legend,.frosted{
  background:rgba(255,255,255,.80);
  backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
}
.map-legend{
  position:fixed; bottom:36px; left:36px; z-index:1500; max-width:300px;
  padding:13px 16px; border-radius:10px; box-shadow:0 2px 14px rgba(0,0,0,.22);
  border-left:4px solid var(--navy);
  font:13px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--ink);
}
.map-legend b{color:var(--navy)}
.map-legend .sub{color:#666;font-size:11px}
.map-legend .foot{color:#999;font-size:11px}
.map-legend hr{margin:7px 0;border:none;border-top:1px solid #e6e6e6}

/* title on the folium layer-toggle box ("tickbox field") */
.leaflet-control-layers-list::before{
  content:"Ebenen ein-/ausblenden";
  display:block; font-weight:700; color:var(--navy);
  font-size:12px; margin:1px 0 7px;
}