/*!
 * Mawimbi Bausteine: ebbe-flut.css (Ebbe-Flut-Regler)
 * Nur --mw-* Variablen aus core/mw-core.css. Layout folgt der Breite des Bausteins (Container Query).
 */
.mw-ef {
  container-type: inline-size;
  container-name: mwef;
  display: block;
  width: 100%;
}

.mw-ef__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--mw-s3) var(--mw-s5);
  margin-bottom: var(--mw-s4);
}
.mw-ef__intro { max-width: 56ch; margin-top: var(--mw-s1); }

.mw-ef__tabs { display: inline-flex; padding: 3px; border: var(--mw-border) solid var(--mw-line-strong); border-radius: var(--mw-radius-pill); background: var(--mw-surface); }
.mw-ef__tab {
  min-height: 40px;
  padding: .4rem 1rem;
  border: 0;
  border-radius: var(--mw-radius-pill);
  background: transparent;
  color: var(--mw-ink);
  font-weight: var(--mw-fw-strong);
  cursor: pointer;
}
.mw-ef__tab.is-on { background: var(--mw-accent); color: var(--mw-accent-ink); }

.mw-ef__card {
  padding: var(--mw-pad);
  border: var(--mw-border) solid var(--mw-line);
  border-radius: var(--mw-radius-l);
  background: var(--mw-surface);
  box-shadow: var(--mw-shadow);
}

/* Szene */
.mw-ef__stage {
  position: relative;
  overflow: hidden;
  border-radius: var(--mw-radius);
  border: var(--mw-border) solid var(--mw-line);
  background: var(--mw-sky);
}
.mw-ef__stage[hidden] { display: none; }
.mw-ef__scene { display: block; line-height: 0; }
.mw-ef__svg { display: block; width: 100%; height: auto; }
.mw-ef__overlay { position: absolute; inset: 0; pointer-events: none; }

.mw-ef__pill {
  position: absolute;
  left: .75rem;
  top: .75rem;
  max-width: calc(100% - 1.5rem);
  margin: 0;
  padding: .3rem .8rem;
  border: var(--mw-border) solid var(--mw-line-strong);
  border-radius: var(--mw-radius-pill);
  background: var(--mw-surface);
  color: var(--mw-ink);
  font-size: var(--mw-fs-s);
  font-weight: var(--mw-fw-strong);
  line-height: 1.3;
  box-shadow: var(--mw-shadow-s);
}
.mw-ef__pill--ok { background: var(--mw-good-soft); border-color: var(--mw-good); color: var(--mw-good); }
.mw-ef__pill--off { background: var(--mw-warn-soft); border-color: var(--mw-warn); color: var(--mw-warn); }

.mw-ef__levelpill {
  position: absolute;
  right: .5rem;
  margin: 0;
  transform: translateY(-135%);
  padding: .1rem .6rem;
  border-radius: var(--mw-radius-pill);
  background: var(--mw-ink);
  color: var(--mw-surface);
  font-size: var(--mw-fs-xs);
  font-weight: var(--mw-fw-strong);
  white-space: nowrap;
}
.mw-ef__walk,
.mw-ef__reeflabel {
  position: absolute;
  margin: 0;
  padding: .1rem .55rem;
  border-radius: var(--mw-radius-pill);
  background: var(--mw-surface);
  color: var(--mw-ink);
  font-size: var(--mw-fs-xs);
  font-weight: var(--mw-fw-strong);
  line-height: 1.3;
  white-space: nowrap;
  transform: translateX(-50%);
  opacity: .92;
  box-shadow: var(--mw-shadow-s);
}
.mw-ef__walk[hidden], .mw-ef__reeflabel[hidden] { display: none; }

/* Zonen unter der Szene */
.mw-ef__zones {
  display: grid;
  grid-template-columns: 30fr 36fr 10fr 24fr;
  margin-top: var(--mw-s2);
  font-size: var(--mw-fs-xs);
  font-weight: var(--mw-fw-strong);
  letter-spacing: var(--mw-ls-label);
  text-transform: var(--mw-tt-label);
  color: var(--mw-ink-2);
  text-align: center;
}
.mw-ef__zones li { white-space: nowrap; }
.mw-ef__zones[hidden] { display: none; }

/* Anzeige */
.mw-ef__readout { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--mw-s1) var(--mw-s4); margin-top: var(--mw-s4); }
.mw-ef__time { font-family: var(--mw-font-display); font-size: var(--mw-fs-xxl); font-weight: var(--mw-fw-strong); line-height: 1.05; }
.mw-ef__state { font-weight: var(--mw-fw-strong); }
.mw-ef__state--ok { color: var(--mw-good); }
.mw-ef__state--off { color: var(--mw-warn); }

/* Regler ueber der Tageskurve */
.mw-ef__chartwrap { position: relative; margin-top: var(--mw-s3); padding-bottom: 6px; }
.mw-ef__chart { line-height: 0; }
.mw-ef__csvg { display: block; max-width: 100%; height: auto; }
.mw-ef__cwin { fill: var(--mw-water); opacity: .22; }
.mw-ef__carea { fill: var(--mw-water); opacity: .3; }
.mw-ef__ccurve { stroke: var(--mw-accent); stroke-width: 2.2; stroke-linejoin: round; }
.mw-ef__cpt { fill: var(--mw-surface); stroke: var(--mw-accent); stroke-width: 2; }
.mw-ef__cpt--low { stroke: var(--mw-accent-2); }
.mw-ef__ctick { fill: var(--mw-ink-2); font-size: 10.5px; font-family: var(--mw-font); font-variant-numeric: tabular-nums; }
.mw-ef__ccursor { stroke: var(--mw-ink); stroke-width: 1.5; stroke-dasharray: 3 3; }
.mw-ef__cdot { fill: var(--mw-ink); stroke: var(--mw-surface); stroke-width: 2; }

.mw-ef__range {
  position: absolute;
  left: 0;
  top: 38px;
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  touch-action: pan-y;
}
.mw-ef__range::-webkit-slider-runnable-track { height: 44px; background: transparent; border: 0; }
.mw-ef__range::-moz-range-track { height: 44px; background: transparent; border: 0; }
.mw-ef__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  margin-top: 8px;
  border-radius: 50%;
  border: 3px solid var(--mw-accent);
  background: var(--mw-surface);
  box-shadow: var(--mw-shadow-s);
}
.mw-ef__range::-moz-range-thumb {
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid var(--mw-accent);
  background: var(--mw-surface);
  box-shadow: var(--mw-shadow-s);
}
.mw-ef__range:focus-visible { outline: none; }
.mw-ef__range:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--mw-focus); outline-offset: 2px; }
.mw-ef__range:focus-visible::-moz-range-thumb { outline: 3px solid var(--mw-focus); outline-offset: 2px; }

/* Knoepfe */
.mw-ef__controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mw-s3) var(--mw-s4); margin-top: var(--mw-s3); }
.mw-ef__daynav, .mw-ef__jumps { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mw-s2); }
.mw-ef__daylabel { min-width: 8.5rem; text-align: center; font-weight: var(--mw-fw-strong); }
.mw-ef__lines, .mw-ef__schem { margin-top: var(--mw-s3); }

/* Zeichnung */
.mw-ef__ref { stroke: var(--mw-ink); stroke-opacity: .32; stroke-width: 1.5; stroke-dasharray: 6 8; }
.mw-ef__surface { stroke: var(--mw-water-soft); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.mw-ef__ground { stroke: var(--mw-sand-deep); stroke-width: 3; stroke-linejoin: round; }
.mw-ef__reefbody { fill: var(--mw-reef); opacity: .92; }
.mw-ef__crest { stroke: var(--mw-reef); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.mw-ef__stake { stroke: var(--mw-reef); stroke-width: 2.2; stroke-linecap: round; }
.mw-ef__stakeline { stroke: var(--mw-reef); stroke-width: 1.3; stroke-opacity: .75; }
.mw-ef__trunk { stroke: var(--mw-sand-deep); stroke-width: 10; stroke-linecap: round; }
.mw-ef__frond { stroke: var(--mw-palm); stroke-width: 7; stroke-linecap: round; }
.mw-ef__hull { fill: var(--mw-reef); }
.mw-ef__mast { stroke: var(--mw-reef); stroke-width: 3; stroke-linecap: round; }
.mw-ef__sail { fill: var(--mw-surface); stroke: var(--mw-ink); stroke-opacity: .5; stroke-width: 1.5; stroke-linejoin: round; }
.mw-ef__foamline { stroke: var(--mw-foam); stroke-width: 4; stroke-linecap: round; }
.mw-ef__kline { stroke: var(--mw-ink); stroke-opacity: .55; stroke-width: 1.3; }
.mw-ef__kite { fill: var(--mw-accent-2); }
.mw-ef__board { fill: var(--mw-ink); }
.mw-ef__body { stroke: var(--mw-ink); stroke-width: 5; stroke-linecap: round; }
.mw-ef__head { fill: var(--mw-ink); }

/* Foto-Modus */
.mw-ef__photos { position: relative; overflow: hidden; border-radius: var(--mw-radius); background: var(--mw-surface-2); aspect-ratio: 16 / 9; }
.mw-ef__photos[hidden] { display: none; }
.mw-ef__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.mw-ef__photo--high { clip-path: inset(0 100% 0 0); }
.mw-ef__wipe { position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: var(--mw-surface); transform: translateX(-50%); box-shadow: 0 0 0 1px var(--mw-line-strong); }
.mw-ef__knob { position: absolute; top: 50%; left: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px; border-radius: 50%; background: var(--mw-surface); border: 3px solid var(--mw-accent); }
.mw-ef__phtag { position: absolute; bottom: .6rem; padding: .1rem .6rem; border-radius: var(--mw-radius-pill); background: var(--mw-surface); font-size: var(--mw-fs-xs); font-weight: var(--mw-fw-strong); }
.mw-ef__phtag--low { right: .6rem; }   /* 06.10.2026: getauscht, das Hochwasser-Foto wird von LINKS aufgedeckt */
.mw-ef__phtag--high { left: .6rem; }

.mw-ef__error { padding: var(--mw-s4); border: var(--mw-border) solid var(--mw-bad); border-radius: var(--mw-radius); color: var(--mw-bad); background: var(--mw-bad-soft); }

@container mwef (max-width: 560px) {
  .mw-ef__card { padding: var(--mw-s4); }
  .mw-ef__pill { font-size: var(--mw-fs-xs); left: .5rem; top: .5rem; }
  .mw-ef__reeflabel { display: none; }
  .mw-ef__zones { font-size: 10px; letter-spacing: 0; }
  .mw-ef__time { font-size: var(--mw-fs-xl); }
  .mw-ef__daylabel { min-width: 7rem; }
}