/* ====== global / header ====== */
.site-header { display:flex; align-items:center; gap:1rem; }
.site-logo { height:32px; }
.site-title { margin:0; }
.site-title-link { color: inherit; text-decoration:none; }
.site-spacer { margin-left:auto; }
.site-imprint {}

/* ====== Leaflet marker cleanup (aus base.html) ====== */
.leaflet-marker-pane > img.leaflet-marker-icon,
.leaflet-marker-pane > img.leaflet-marker-shadow {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* Einheitlich blaue PegelAlert-Cluster */
.pegel-cluster {
  background: rgba(25, 118, 210, 0.85); /* äußere 'Aura' */
  border-radius: 50%;
  border: 2px solid #ffffff;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}

.pegel-cluster div {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #1976d2;        /* deine Marker-Farbe */
  color: #ffffff;
  font-weight: 600;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
}
/* Äußerer Container */
.pegel-cluster {
  background: transparent !important; /* Basis-Hintergrund verhindern */
  border: none !important;
}

/* Der eigentliche Cluster-Kreis */
.pegel-cluster-inner {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #1976d2;                 /* PegelAlert-Blau */
  color: white;
  font-weight: 600;
  font-size: 15px;
  line-height: 40px;
  text-align: center;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}

/* ====== Station header / popover (vereinheitlicht: base.html + index.html) ====== */
.station-header { position: relative; display: inline-block; }
.station-title { display: flex; align-items: baseline; gap: .6rem; margin: 0; }
.ghost-trigger { all: unset; font: inherit; font-weight: inherit; color: inherit; cursor: pointer; }
.ghost-trigger:focus-visible { outline:2px solid #4c9aff; outline-offset:2px; border-radius:4px; }
.station-popover {
  position: absolute; top:100%; left:0; margin-top:.4rem;
  min-width: min(38rem, 90vw); max-height:50vh; overflow:auto;
  background:#fff; border:1px solid rgba(0,0,0,.1); box-shadow:0 8px 24px rgba(0,0,0,.12);
  border-radius:10px; padding:.5rem; z-index:1000; display:block;
}
.station-popover[hidden]{ display:none; }
#stationFilter {
  width:100%; box-sizing:border-box; padding:.6rem .8rem; border:1px solid #d0d7de;
  border-radius:8px; margin-bottom:.5rem; font:inherit;
}
#stationList { list-style:none; margin:0; padding:0; }
#stationList li + li { margin-top:.25rem; }
.station-option {
  width:100%; text-align:left; padding:.55rem .7rem; border:none; background:transparent;
  border-radius:8px; font:inherit; cursor:pointer; color: black;
}
.station-option:hover, .station-option:focus { background:#f2f4f7; outline:none; }

/* ====== station panel/card minor helpers (aus index.html inline) ====== */
.card { padding:1rem; }
.figure-reset { margin:0; }
.figure-caption { margin-top:.4rem; color:#666; font-size: 0.7rem; width:100%; text-align:center;}
.hidden { display:none !important; }

/* ============================================================
   Formular-Layout für PegelAlert E-Mail-Abos
   ============================================================ */

/* Zwei-Spalten-Layout für Niedrig-/Hochwasser */
.two-col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

/* Label oder Feld, das über beide Spalten laufen soll */
.two-col-grid .fullwidth {
  grid-column: 1 / -1;
}

/* Einheitliche Abstände für Formulare */
form[id^="alert-form-"] {
  display: block;
  width: 100%;
}

form[id^="alert-form-"] label {
  font-size: 0.95rem;
}

/* Buttons leicht absetzen */
form[id^="alert-form-"] button[type="submit"] {
  margin-top: 0.5rem;
}

/* Optisch etwas Luft zwischen den Abschnitten */
#station-panel section {
  margin-bottom: 1rem;
}

/* Responsiv: auf schmalen Displays nur eine Spalte */
@media (max-width: 600px) {
  .two-col-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Abschnitt "Über Pegel Alert" – volle Breite unter der Karte
   ============================================================ */

#about-pegelalert {
  display: block;
  width: 100vw;                 /* volle Viewport-Breite */
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;           /* gleicht evtl. Containerbegrenzung aus */
  margin-right: -50vw;
  background: #f8f9fa;          /* leicht grauer Hintergrund für Kontrast */
  border-top: 1px solid #ddd;
  padding: 2rem 1rem;
  box-sizing: border-box;
}

#about-pegelalert h2 {
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
  text-align: center;
  color: #222;
}

#about-pegelalert p {
  max-width: 900px;
  margin: 0 auto;
  line-height: 1.6;
  color: #333;
  font-size: 1rem;
  text-align: center;
}

#about-pegelalert a {
  color: #004a99;
  text-decoration: underline;
}

#about-pegelalert a:hover {
  text-decoration: none;
}

/* Attribution-Overlay links unten (halbtransparent & kompakt) */
.leaflet-control-attribution {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: saturate(120%) blur(2px);
  padding: 4px 8px;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  font-size: 12px;
  line-height: 1.2;
  color: #222;
}

.leaflet-control-attribution a {
  color: inherit;
  text-decoration: underline;
}

.leaflet-control-attribution a:hover {
  text-decoration: none;
}

/* Korrigiert Leaflet Zoom-Buttons bei PicoCSS */
.leaflet-control-zoom a {
  background: #fff;
  color: #000;
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;

  width: 28px;
  height: 28px;

  text-align: center;

  border: 1px solid rgba(0,0,0,0.25);
  border-radius: 4px;

  padding: 0;    /* verhindert verschobene Icons */
  margin: 0;     /* Leaflet kümmert sich um den Abstand */
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);

  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hover */
.leaflet-control-zoom a:hover {
  background: #f0f0f0;
}

/* Entfernt PicoCSS-Effekte */
.leaflet-control-zoom a:where(button) {
  all: unset;
}