/*!
 * Mawimbi Bausteine: jetzt.css (Widget "Jambiani now")
 * Nur --mw-* Variablen aus core/mw-core.css. Layout folgt der Breite des Bausteins (Container Query).
 */
.mw-jetzt {
  container-type: inline-size;
  container-name: mwj;
  display: grid;
  gap: var(--mw-gap);
  width: 100%;
}

.mw-jetzt__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--mw-s2) var(--mw-s4);
}
.mw-jetzt__clockwrap { text-align: right; }
.mw-jetzt__time { font-family: var(--mw-font-display); font-size: var(--mw-fs-l); font-weight: var(--mw-fw-strong); line-height: 1.2; }
.mw-jetzt__h3 { font-family: var(--mw-font-display); font-size: var(--mw-fs-l); font-weight: var(--mw-fw-strong); margin-bottom: var(--mw-s3); }

/* Status */
.mw-jetzt__status {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--mw-s3) var(--mw-s4);
  align-items: start;
  padding: var(--mw-pad);
  border: var(--mw-border) solid var(--mw-line);
  border-radius: var(--mw-radius-l);
  background: var(--mw-surface-2);
  box-shadow: var(--mw-shadow-s);
}
.mw-jetzt__status--good { background: var(--mw-good-soft); border-color: var(--mw-good); }
.mw-jetzt__status--fair { background: var(--mw-warn-soft); border-color: var(--mw-warn); }
.mw-jetzt__dot {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: .55rem;
  border-radius: 50%;
  background: var(--mw-ink-2);
  box-shadow: 0 0 0 5px var(--mw-line);
}
.mw-jetzt__status--good .mw-jetzt__dot { background: var(--mw-good); box-shadow: 0 0 0 5px var(--mw-good-soft), 0 0 0 6px var(--mw-good); }
.mw-jetzt__status--fair .mw-jetzt__dot { background: var(--mw-warn); box-shadow: 0 0 0 5px var(--mw-warn-soft), 0 0 0 6px var(--mw-warn); }
.mw-jetzt__statusbody { min-width: 0; display: grid; gap: .1rem; }
.mw-jetzt__statustext { font-family: var(--mw-font-display); font-size: var(--mw-fs-xl); font-weight: var(--mw-fw-strong); line-height: 1.1; }
.mw-jetzt__reason { color: var(--mw-ink); }
.mw-jetzt__next { color: var(--mw-ink-2); font-size: var(--mw-fs-s); }
.mw-jetzt__rulebtn {
  display: inline-flex;
  align-items: center;
  gap: var(--mw-s2);
  min-height: 36px;
  padding: .25rem .8rem;
  border: var(--mw-border) solid var(--mw-line-strong);
  border-radius: var(--mw-radius-pill);
  background: var(--mw-surface);
  color: var(--mw-ink-2);
  font-size: var(--mw-fs-xs);
  cursor: pointer;
}
.mw-jetzt__rulebtn:hover { color: var(--mw-ink); border-color: var(--mw-accent); }
.mw-jetzt__guide { font-style: italic; }
.mw-jetzt__rulelabel { font-weight: var(--mw-fw-strong); color: var(--mw-ink); }
.mw-jetzt__rulelabel::before { content: "|"; margin-right: var(--mw-s2); color: var(--mw-line-strong); font-weight: var(--mw-fw); }

/* Regel */
.mw-jetzt__rule {
  padding: var(--mw-pad);
  border: var(--mw-border) solid var(--mw-line);
  border-radius: var(--mw-radius-l);
  background: var(--mw-surface);
}
.mw-jetzt__rule[hidden] { display: none; }
.mw-jetzt__ruletext { max-width: 70ch; margin-bottom: var(--mw-s4); color: var(--mw-ink-2); }
.mw-jetzt__rgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: var(--mw-s3); }
.mw-jetzt__rfield { display: grid; gap: var(--mw-s1); }
.mw-jetzt__rfield label { font-size: var(--mw-fs-s); color: var(--mw-ink-2); }
.mw-jetzt__rin {
  width: 100%;
  min-height: 44px;
  padding: .45rem .7rem;
  border: var(--mw-border) solid var(--mw-line-strong);
  border-radius: var(--mw-radius-s);
  background: var(--mw-surface);
  color: var(--mw-ink);
}
.mw-jetzt__ractions { display: flex; flex-wrap: wrap; gap: var(--mw-s2); margin-top: var(--mw-s4); }

/* Karten */
.mw-jetzt__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--mw-gap); }
.mw-jetzt__card {
  display: grid;
  gap: var(--mw-s2);
  align-content: start;
  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);
  min-width: 0;
}
.mw-jetzt__big { font-family: var(--mw-font-display); font-size: var(--mw-fs-xxl); font-weight: var(--mw-fw-strong); line-height: 1.05; }
.mw-jetzt__trendline { display: flex; align-items: center; gap: .15rem; font-weight: var(--mw-fw-strong); }
.mw-jetzt__trend { flex: none; }
.mw-jetzt__trendline--up .mw-jetzt__trend { color: var(--mw-good); }
.mw-jetzt__trendline--down .mw-jetzt__trend { color: var(--mw-accent); }
.mw-jetzt__trendline--flat .mw-jetzt__trend { color: var(--mw-ink-2); }
.mw-jetzt__windsub { display: flex; align-items: center; flex-wrap: wrap; gap: .1rem; font-weight: var(--mw-fw-strong); }
.mw-jetzt__arrow { flex: none; color: var(--mw-wind); }
.mw-jetzt__srcwarn { color: var(--mw-warn); font-weight: var(--mw-fw-strong); }

.mw-jetzt__tidelist { display: grid; gap: 0; }
.mw-jetzt__tide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: .1rem var(--mw-s3);
  align-items: baseline;
  padding: var(--mw-s2) 0;
  border-top: var(--mw-border) solid var(--mw-line);
}
.mw-jetzt__tide:first-child { border-top: 0; padding-top: 0; }
.mw-jetzt__tide .mw-note { grid-column: 1 / -1; }
.mw-jetzt__tidename { display: inline-flex; align-items: center; gap: .3rem; color: var(--mw-ink-2); }
.mw-jetzt__tidetime { font-family: var(--mw-font-display); font-size: var(--mw-fs-xl); font-weight: var(--mw-fw-strong); line-height: 1.1; }
.mw-jetzt__tideh { color: var(--mw-ink-2); font-weight: var(--mw-fw-strong); }
.mw-jetzt__ti--high { color: var(--mw-accent); }
.mw-jetzt__ti--low { color: var(--mw-accent-2); }

/* Diagramm */
.mw-jetzt__chartwrap,
.mw-jetzt__weekwrap {
  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);
  min-width: 0;
}
.mw-jetzt__chart { min-height: 12rem; }
.mw-jetzt__svg { display: block; max-width: 100%; height: auto; overflow: visible; }
.mw-jetzt__grid { stroke: var(--mw-line); stroke-width: 1; }
.mw-jetzt__axis { fill: var(--mw-ink-2); font-size: 11px; font-family: var(--mw-font); font-variant-numeric: tabular-nums; }
.mw-jetzt__tick { stroke: var(--mw-line-strong); stroke-width: 1; }
.mw-jetzt__night { fill: var(--mw-ink); opacity: .07; }
.mw-jetzt__tidewin { fill: var(--mw-water); opacity: .2; }
.mw-jetzt__goodwin { fill: var(--mw-good); opacity: .13; stroke: var(--mw-good); stroke-width: 1.5; stroke-opacity: .7; }
.mw-jetzt__curve { stroke: var(--mw-accent); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.mw-jetzt__pt { fill: var(--mw-surface); stroke: var(--mw-accent); stroke-width: 2; }
.mw-jetzt__pt--low { stroke: var(--mw-accent-2); }
.mw-jetzt__ext { fill: var(--mw-ink); font-size: 11px; font-weight: 650; font-family: var(--mw-font); font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--mw-surface); stroke-width: 3px; stroke-linejoin: round; }
.mw-jetzt__thr { stroke: var(--mw-line-strong); stroke-width: 1; stroke-dasharray: 3 3; }
.mw-jetzt__bar--ok { fill: var(--mw-good); }
.mw-jetzt__bar--low { fill: var(--mw-line-strong); }
.mw-jetzt__bar--high { fill: var(--mw-warn); }
.mw-jetzt__gust { stroke: var(--mw-ink-2); stroke-width: 1.5; }
.mw-jetzt__nowline { stroke: var(--mw-ink); stroke-width: 1.5; stroke-dasharray: 4 3; }
.mw-jetzt__nowdot { fill: var(--mw-ink); stroke: var(--mw-surface); stroke-width: 2; }
.mw-jetzt__nowpill { fill: var(--mw-ink); }
.mw-jetzt__nowtext { fill: var(--mw-surface); font-size: 11px; font-weight: 650; font-family: var(--mw-font); font-variant-numeric: tabular-nums; }

.mw-jetzt__legend { display: flex; flex-wrap: wrap; gap: var(--mw-s1) var(--mw-s4); margin-top: var(--mw-s3); font-size: var(--mw-fs-xs); color: var(--mw-ink-2); }
.mw-jetzt__legend li { display: inline-flex; align-items: center; gap: .4rem; }
.mw-jetzt__sw { display: inline-block; width: .9rem; height: .9rem; border-radius: 3px; }
.mw-jetzt__sw--tide { background: var(--mw-water); opacity: .35; }
.mw-jetzt__sw--good { background: var(--mw-good); opacity: .35; box-shadow: inset 0 0 0 1.5px var(--mw-good); }
.mw-jetzt__sw--wind { background: var(--mw-good); }
.mw-jetzt__sw--windoff { background: var(--mw-line-strong); }
.mw-jetzt__sw--night { background: var(--mw-ink); opacity: .1; }

/* Woche */
.mw-jetzt__week { width: 100%; border-collapse: collapse; }
.mw-jetzt__week th,
.mw-jetzt__week td { padding: var(--mw-s3) var(--mw-s2); text-align: left; vertical-align: top; }
.mw-jetzt__week thead th { 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); border-bottom: var(--mw-border) solid var(--mw-line-strong); }
.mw-jetzt__row > * { border-bottom: var(--mw-border) solid var(--mw-line); }
.mw-jetzt__row:last-child > * { border-bottom: 0; }
.mw-jetzt__row.is-today { background: var(--mw-surface-2); }
.mw-jetzt__row--good > .mw-jetzt__wday { box-shadow: inset 4px 0 0 var(--mw-good); }
.mw-jetzt__row--fair > .mw-jetzt__wday { box-shadow: inset 4px 0 0 var(--mw-warn); }
.mw-jetzt__row--no > .mw-jetzt__wday,
.mw-jetzt__row--nodata > .mw-jetzt__wday { box-shadow: inset 4px 0 0 var(--mw-line-strong); }
.mw-jetzt__wday { display: table-cell; padding-left: var(--mw-s3); white-space: nowrap; }
.mw-jetzt__wdayname { display: block; font-family: var(--mw-font-display); font-weight: var(--mw-fw-strong); font-size: var(--mw-fs-m); }
.mw-jetzt__today { display: inline-block; margin-top: .15rem; padding: 0 .5rem; border-radius: var(--mw-radius-pill); background: var(--mw-accent); color: var(--mw-accent-ink); font-size: var(--mw-fs-xs); font-weight: var(--mw-fw-strong); }
.mw-jetzt__wtides { display: grid; grid-template-columns: repeat(2, minmax(0, auto)); gap: .2rem var(--mw-s4); justify-content: start; }
.mw-jetzt__wtide { display: inline-flex; align-items: baseline; gap: .35rem; white-space: nowrap; }
.mw-jetzt__wtide svg { align-self: center; }
.mw-jetzt__wtide--high svg { color: var(--mw-accent); }
.mw-jetzt__wtide--low svg { color: var(--mw-accent-2); }
.mw-jetzt__wtime { font-weight: var(--mw-fw-strong); }
.mw-jetzt__wh { color: var(--mw-ink-2); font-size: var(--mw-fs-s); }
.mw-jetzt__wwind { display: flex; align-items: center; gap: var(--mw-s2); }
.mw-jetzt__wwindtxt { display: grid; line-height: 1.25; }
.mw-jetzt__wbest { display: grid; gap: .2rem; justify-items: start; }

.mw-jetzt__notes { display: grid; gap: var(--mw-s1); }
.mw-jetzt__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); }

/* Schmale Darstellung: Woche als Karten, Status ohne Platz fuer Regelknopf neben dem Text */
@container mwj (max-width: 639px) {
  .mw-jetzt__clockwrap { text-align: left; }
  .mw-jetzt__status { grid-template-columns: auto minmax(0, 1fr); padding: var(--mw-s4); }
  .mw-jetzt__rulebtn { grid-column: 1 / -1; justify-self: start; }
  .mw-jetzt__chartwrap, .mw-jetzt__weekwrap, .mw-jetzt__card, .mw-jetzt__rule { padding: var(--mw-s4); }
  .mw-jetzt__week, .mw-jetzt__week tbody, .mw-jetzt__week tr, .mw-jetzt__week th, .mw-jetzt__week td { display: block; }
  .mw-jetzt__week thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .mw-jetzt__row { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 var(--mw-s3); padding: var(--mw-s3) 0; border-bottom: var(--mw-border) solid var(--mw-line); }
  .mw-jetzt__row:last-child { border-bottom: 0; }
  .mw-jetzt__row > * { border-bottom: 0 !important; padding: var(--mw-s1) var(--mw-s3); }
  .mw-jetzt__wday { grid-column: 1 / -1; display: flex !important; align-items: baseline; gap: var(--mw-s2); }
  .mw-jetzt__wdayname { display: inline; }
  .mw-jetzt__row > td:nth-child(2) { grid-column: 1 / -1; }
  .mw-jetzt__week td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: .15rem;
    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);
  }
  .mw-jetzt__wtides { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container mwj (max-width: 420px) {
  .mw-jetzt__big { font-size: var(--mw-fs-xl); }
  .mw-jetzt__tidetime { font-size: var(--mw-fs-l); }
}