/* Look wie die Panoptes-App (vormals SurfMate): Ozean, Aqua, Limette; Sora + Manrope.
   Schriften liegen auf diesem Server (vendor/fonts, SIL Open Font License) - kein Google Fonts. */
@font-face{font-family:'Sora';font-weight:400;font-display:swap;src:url(vendor/fonts/sora-400.woff2) format('woff2')}
@font-face{font-family:'Sora';font-weight:600;font-display:swap;src:url(vendor/fonts/sora-600.woff2) format('woff2')}
@font-face{font-family:'Sora';font-weight:700;font-display:swap;src:url(vendor/fonts/sora-700.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-weight:400;font-display:swap;src:url(vendor/fonts/manrope-400.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-weight:500;font-display:swap;src:url(vendor/fonts/manrope-500.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-weight:600;font-display:swap;src:url(vendor/fonts/manrope-600.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-weight:700;font-display:swap;src:url(vendor/fonts/manrope-700.woff2) format('woff2')}

:root{
  --deep:#071a2b; --ocean:#0A2238; --teal:#0B5C66; --aqua:#5FD6E6; --foam:#E8FBFD;
  --lime:#B5F23D; --lime-ink:#1d2a00; --coral:#FF8A6B; --amber:#FFC266;
  --ink:#EAF6F8; --ink-2:#A9C7CE; --ink-3:#6E8E97;
  --f-head:'Sora',system-ui,sans-serif; --f-body:'Manrope',system-ui,sans-serif;
  /* Planer-Variablen auf die Panoptes-Farben */
  --bg:var(--deep); --panel:var(--ocean); --panel2:#0f2c40; --linie:rgba(160,230,240,.14);
  --text:var(--ink); --grau:var(--ink-2); --akzent:var(--lime); --akzent2:var(--aqua);
  --warn:var(--amber); --rot:var(--coral); --radius:20px;
}
body{font-family:var(--f-body);
  background:radial-gradient(1200px 700px at 85% -10%,rgba(11,92,102,.55),transparent 60%),
             linear-gradient(160deg,var(--ocean),var(--deep) 70%)}
#karte{background:var(--deep)}
#panel{background:rgba(7,26,43,.84); border-color:var(--linie); border-radius:var(--radius);
  box-shadow:0 18px 50px rgba(0,0,0,.45)}
h1,h2,h3,.titel,.kachel .v,.stopp .nam,.reiter button,.knopf,.sek,.alt b{font-family:var(--f-head)}
.reiter{border-radius:999px; padding:4px}
.reiter button{border-radius:999px}
.reiter button.an{background:linear-gradient(180deg,rgba(95,214,230,.95),rgba(95,214,230,.78)); color:var(--deep)}
.chip{border-radius:999px; background:rgba(255,255,255,.045)}
.chip.an{background:rgba(95,214,230,.14); border-color:var(--aqua); color:var(--aqua)}
.knopf{background:var(--lime); color:var(--lime-ink); border-radius:14px; font-weight:700; letter-spacing:.01em}
.sek,.alt,.fav button,.autoknopf{border-radius:14px}
.kachel,.station,.stopp,.punkt,.energie,.verkehr,.erw{border-radius:16px}
.suchfeld input,select,input[type=number],input[type=text],input[type=url],.erw select,.erw input[type=datetime-local]{border-radius:12px}
.kachel .k,.feld label{color:var(--ink-3); letter-spacing:.08em}
.leaflet-container{font-family:var(--f-body); background:var(--deep)}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:var(--ocean); color:var(--ink);
  border:1px solid var(--linie)}
.leaflet-popup-content b{color:var(--aqua)}
.leaflet-bar a{background:rgba(10,34,56,.9)!important; color:var(--ink)!important; border-color:var(--linie)!important}
.leaflet-control-attribution{background:rgba(10,34,56,.75)!important; color:var(--ink-3)!important}
.leaflet-control-attribution a{color:var(--ink-2)!important}
.stopp-marker{background:var(--lime)!important; color:var(--lime-ink)!important; border-color:var(--deep)!important;
  font-family:var(--f-head)}
.kopf{padding-right:76px}
.autoknopf{top:16px; right:14px}