/* =====================================================================
   PegelAlert – Theme: default
   Visuelles Design auf Basis von PicoCSS. Austauschbar per ?theme=X.
   ===================================================================== */

/* ====== 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; }

/* ====== Station-Popover ====== */
.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; }

#stationFilter {
  width:100%; box-sizing:border-box; padding:.6rem .8rem;
  border:1px solid #d0d7de; border-radius:8px; margin-bottom:.5rem; font:inherit;
}
#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 { padding:1rem; }
#station-panel section { margin-bottom:1rem; }

/* Stationsname + Koordinaten */
.station-name { margin-bottom:0.25rem; }
.station-coords { margin-top:0.25rem; color:#555; font-size:0.9rem; }

/* Abschnitts-Label */
.section-label { margin-bottom:0.5rem; }

/* Kein-Plot-Hinweis */
.no-plot-notice { color:#666; font-size:0.85rem; }

/* Abbildungen */
.figure-caption { margin-top:.4rem; color:#666; font-size:0.7rem; width:100%; text-align:center; }

/* ====== Formular ====== */
.alert-form { max-width:1100px; }
.form-intro { /* kein extra Stil nötig */ }

.two-col-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.6rem; }
.two-col-grid .fullwidth { grid-column:1 / -1; }

.widgets-row { display:flex; justify-content:space-evenly; align-items:flex-start; flex-wrap:wrap; gap:1rem; }

/* Alle drei Widget-Sections: flex-column, gleiche Struktur */
.pegel-section,
.wind-section {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* Abstands-Spacer: einzeln justierbar */
.widget-spacer { flex-shrink: 0; }
.wind-spacer { height: 22px; }
.ice-spacer  { height: 14px; }

/* Einheitliches Label über jedem Control */
.widget-header {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.95rem;
}

form.alert-form label { font-size:0.95rem; }
form.alert-form button[type="submit"] { margin-top:0.5rem; }

.wind-readout { font-size:0.8rem; font-weight:700; color:#0d2940; font-variant-numeric:tabular-nums; min-height:1.2em; letter-spacing:0.01em; }
.consent-label { /* kein extra Stil */ }
.csv-link-wrap { margin-top:0.4rem; }
.submit-wrap { /* kein extra Stil */ }

@media (max-width:600px) {
  .two-col-grid { grid-template-columns:1fr; }
}

/* ====== Pegel-Slider (Pegelmessmarke) ====== */
.pegel-sliders-wrap {
  display: flex;
  gap: 2.5rem;
  align-items: flex-start;
}

.pegel-slider {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  touch-action: none;
  user-select: none;
}

.ps-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #2c5f82;
  text-align: center;
}

/* Scale column: tick marks + labels to the left of the track */
.ps-body {
  display: flex;
  align-items: stretch;
}

.ps-scale {
  position: relative;
  width: 40px;
  height: 200px;
  flex-shrink: 0;
}

.ps-scale-mark {
  position: absolute;
  right: 0;
  width: 5px;
  height: 1px;
  background: rgba(0, 30, 80, 0.25);
  transform: translateY(-50%);
}

.ps-scale-mark.major {
  width: 9px;
  background: rgba(0, 30, 80, 0.5);
}

.ps-scale-label {
  position: absolute;
  right: 12px;
  font-size: 0.58rem;
  color: #2c5f82;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transform: translateY(-50%);
  text-align: right;
}

/* The gauge track */
.ps-track {
  position: relative;
  width: 52px;
  height: 200px;
  border: 2px solid #4a7fa8;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  box-sizing: border-box;
  background: repeating-linear-gradient(
    to bottom,
    #d5e8f5 0px,
    #d5e8f5 var(--ps-band-h, 20px),
    #aecde6 var(--ps-band-h, 20px),
    #aecde6 calc(var(--ps-band-h, 20px) * 2)
  );
}

/* Zero reference line */
.ps-zero-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(10, 35, 90, 0.55);
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 3;
}

/* Water fill */
.ps-water {
  position: absolute;
  left: 0;
  right: 0;
  background: rgba(20, 95, 170, 0.38);
  pointer-events: none;
  z-index: 2;
}

/* Draggable thumb */
.ps-thumb {
  position: absolute;
  left: 0;
  right: 0;
  height: 18px;
  cursor: grab;
  z-index: 10;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ps-thumb:active { cursor: grabbing; }

.ps-thumb-line {
  height: 3px;
  background: #1a5c8c;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  border-radius: 1px;
  flex-shrink: 0;
}

/* Value display below the gauge */
.ps-current-value {
  font-size: 0.8rem;
  font-weight: 700;
  color: #0d2940;
  font-variant-numeric: tabular-nums;
  text-align: center;
  min-height: 1.2em;
  letter-spacing: 0.01em;
}

/* ====== Eis-Slider ====== */
.eis-slider {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  touch-action: none;
  user-select: none;
}

.es-body {
  display: flex;
  align-items: stretch;
}

/* Main gauge track – wider than pegel to suggest a flat ice sheet */
.es-track {
  position: relative;
  width: 150px;
  height: 200px;
  border: 2px solid #4a7fa8;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  box-sizing: border-box;
}

/* Sky zone (top, variable) */
.es-sky {
  position: absolute;
  left: 0; right: 0; top: 0;
  background: linear-gradient(to bottom, #cfeaff 0%, #f0f9ff 100%);
  pointer-events: none;
}

/* Ice layer (variable height, between thumb and water surface) */
.es-ice {
  position: absolute;
  left: 0; right: 0;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0)    0px,
      rgba(255,255,255,0.22) 2px,
      rgba(255,255,255,0)    4px,
      rgba(255,255,255,0)    14px
    ),
    linear-gradient(to bottom, rgba(34, 142, 189, 0.97), rgba(185,228,252,0.99));
  pointer-events: none;
  z-index: 2;
}

/* Fixed water zone (bottom 30%) */
.es-water {
  position: absolute;
  left: 0; right: 0;
  top: 70%;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    rgb(80, 112, 145) 0%,
    rgb(28, 40, 51) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Fixed water surface line */
.es-surface {
  position: absolute;
  left: 0; right: 0;
  top: 70%;
  height: 2px;
  background: rgba(35, 110, 210, 0.75);
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 4;
}

/* Draggable thumb (ice surface) */
.es-thumb {
  position: absolute;
  left: 0; right: 0;
  height: 18px;
  cursor: grab;
  z-index: 10;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.es-thumb:active { cursor: grabbing; }

.es-thumb-line {
  height: 3px;
  background: rgba(110, 210, 245, 0.95);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
  border-radius: 1px;
  flex-shrink: 0;
}

/* Scale on the right */
.es-scale {
  position: relative;
  width: 40px;
  height: 200px;
  flex-shrink: 0;
}

.es-scale-mark {
  position: absolute;
  left: 0;
  width: 5px;
  height: 1px;
  background: rgba(0, 30, 80, 0.3);
  transform: translateY(-50%);
}

.es-scale-mark.major {
  width: 9px;
  background: rgba(0, 30, 80, 0.55);
}

.es-scale-label {
  position: absolute;
  left: 12px;
  font-size: 0.58rem;
  color: #2c5f82;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transform: translateY(-50%);
}

/* Value display below the gauge */
.es-current-value {
  font-size: 0.8rem;
  font-weight: 700;
  color: #0d2940;
  font-variant-numeric: tabular-nums;
  min-height: 1.2em;
  letter-spacing: 0.01em;
}

/* Disabled state (ice warning unchecked) */
.eis-slider.es-disabled .es-body,
.eis-slider.es-disabled .es-current-value {
  opacity: 0.4;
  filter: grayscale(0.35);
  pointer-events: none;
}

/* ====== Abschnitt "Über Pegel Alert" ====== */
#about-pegelalert {
  display:block; width:100vw; position:relative;
  left:50%; right:50%; margin-left:-50vw; margin-right:-50vw;
  background:#f8f9fa; border-top:1px solid #ddd;
  padding:2rem 1.5rem; box-sizing:border-box;
  margin-top:2rem; margin-bottom:0; text-align:center;
}
#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; }