:root {
  --bg: #0E1512;
  --bg-card: #16241D;
  --bg-table: #121C16;
  --border: #2A3B2E;
  --text: #F1ECDF;
  --text-muted: #93A296;
  --green: #9AC36E;
  --green-dark: #D0B96A;
  --green-dim: rgba(154,195,110,0.12);
  --status-green: #22c55e;
  --yellow: #eab308;
  --red: #ef4444;
  --grey: #475569;
  --white-dim: #334155;
}

/* WICHTIG: html/body bewusst OHNE festes height:100% - das bricht position:sticky sobald der
   Seiteninhalt laenger als der Viewport ist (Browser berechnet den Sticky-Bereich dann relativ
   zur zu kurzen Box statt zum tatsaechlich gescrollten Inhalt - Header UND Tabellen-th verlieren
   ihr Sticky-Verhalten komplett, sobald man weit genug scrollt). min-height:100vh auf body
   reicht fuer "mindestens Viewport-hoch", ohne dieses Problem zu verursachen. */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* HEADER */
header {
  background: linear-gradient(180deg, #16241D 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
  position: sticky; top: 0; z-index: 100;
}
.header-inner {
  max-width: 900px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  height: 64px; gap: 16px;
}
.logo-area { display: flex; align-items: center; gap: 12px; }
.logo-icon { font-size: 28px; }
.logo-icon img { width: 44px; height: 44px; object-fit: cover; border-radius: 10px; display: block; }
h1 { font-size: 20px; font-weight: 700; color: var(--green); letter-spacing: 0.02em; }
.subtitle { font-size: 11px; color: var(--text-muted); letter-spacing: 0.08em; text-transform: uppercase; }
.subtitle #fetchTime { font-size: 0.82em; letter-spacing: normal; opacity: .75; }
.header-actions { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; }

/* Am Desktop gleiche Groesse/Gewicht wie btn-changelog/btn-feedback, aber voll blau gefuellt
   mit weisser Schrift statt outlined - bleibt so der klar sichtbare Haupt-CTA-Button, ohne
   durch groessere Masse zu dominieren. */
.btn-newsletter {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--green); border: 1px solid var(--green); color: #ffffff;
  padding: 7px 12px; border-radius: 8px;
  font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: all .15s;
}
.btn-newsletter:hover { opacity: .85; }

/* MAIN */
main { max-width: 900px; margin: 0 auto; padding: 24px; }

/* APP INFO BANNER */
.app-info-banner {
  display: flex; align-items: flex-start; gap: 14px;
  background: rgba(154,195,110,0.07); border: 1px solid rgba(154,195,110,0.2);
  border-radius: 14px; padding: 14px 18px; margin-bottom: 20px;
}
.app-info-icon { font-size: 22px; flex-shrink: 0; margin-top: 1px; }
.app-info-text { font-size: 13px; color: var(--text-muted); line-height: 1.6; }
.app-info-text strong { color: var(--text); font-weight: 600; }
.app-info-text em { color: var(--green); font-style: normal; }

/* REPORT BLOCK */
.report-block {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  margin-bottom: 24px;
  overflow: hidden;
}
.report-header {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: rgba(77,122,58,0.12);
}
.report-icon { font-size: 20px; }
.report-header h2 { font-size: 15px; font-weight: 600; color: var(--green); }
.report-time { margin-left: auto; font-size: 11px; color: var(--text-muted); }
.report-body { padding: 20px; line-height: 1.7; font-size: 14px; color: var(--text); }
.report-loading { color: var(--text-muted); font-style: italic; }
.report-picks { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.report-pick {
  background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.3);
  border-radius: 8px; padding: 8px 14px; font-size: 13px;
}
.report-pick.warn {
  background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.3);
}

/* LEGEND */
.legend {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-bottom: 16px; font-size: 12px;
}
.badge { padding: 4px 10px; border-radius: 20px; background: var(--bg-card); border: 1px solid var(--border); }

/* TABLE */
.table-section { margin-bottom: 32px; }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
thead { background: var(--bg-card); }
th {
  position: sticky; top: 64px; z-index: 10;
  background: var(--bg-card);
  padding: 12px 7px; text-align: left; white-space: nowrap;
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--green); }
th.sorted { color: var(--green); }
.sort-icon { opacity: .4; font-size: 10px; }
th.sorted .sort-icon { opacity: 1; }

/* Immer untereinander/volle Breite, auch am Desktop - passt zum App-Charakter der Seite. */
.table-toolbar { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 12px; }
.river-search {
  max-width: none; width: 100%; background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text); padding: 10px 12px; border-radius: 10px; font-size: 13px;
}
.river-search:focus { outline: none; border-color: var(--green); }
.btn-nearby { width: 100%; text-align: center; }

.bl-filter-th.filter-active { color: var(--green); }
.col-filter-icon { opacity: .55; font-size: 10px; margin-left: 3px; cursor: pointer; padding: 2px; }
.col-filter-icon:hover { opacity: 1; color: var(--green); }
.bl-filter-dropdown {
  position: absolute; top: 100%; left: 0; margin-top: 4px; z-index: 20;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
  padding: 8px; min-width: 160px; box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  text-transform: none; letter-spacing: normal; font-weight: 400;
}
.bl-filter-dropdown.hidden { display: none; }
.bl-filter-item {
  display: flex; align-items: center; gap: 8px; padding: 6px 4px;
  font-size: 13px; color: var(--text); cursor: pointer; white-space: nowrap;
}
.bl-filter-item input { accent-color: var(--green); cursor: pointer; }
.bl-filter-clear {
  width: 100%; margin-top: 6px; padding: 6px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--bg); color: var(--text-muted); font-size: 12px; cursor: pointer;
}
.bl-filter-clear:hover { color: var(--green); border-color: var(--green); }

/* Status-Filter: dieselben farbigen Pills wie in der Tabelle selbst, als klickbare Toggle-Buttons
   statt Checkboxen - Auswahl per Ring in der jeweiligen Statusfarbe sichtbar gemacht. */
.status-filter-dropdown { display: flex; flex-direction: column; gap: 6px; min-width: 150px; }
.sf-toggle {
  border: 1px solid transparent; font: inherit; cursor: pointer; text-align: left;
  opacity: .55;
}
.sf-toggle.sf-active { opacity: 1; box-shadow: 0 0 0 1.5px currentColor; }

/* Spalten ein-/ausblenden: ganz vorne in der Tabelle (Vorbild: TradingDashboard). Panel liegt
   bewusst ausserhalb der Tabelle im DOM mit position:fixed, sonst wuerde es vom horizontalen
   Scroll-Container der Tabelle (overflow-x:auto am Handy) abgeschnitten. */
.column-settings-th {
  cursor: pointer; color: var(--text-muted); transition: color .15s ease, opacity .15s ease;
  font-size: 19px; text-align: center; opacity: .72;
}
.column-settings-th:hover { color: var(--green); opacity: 1; }
.column-settings-divider { height: 1px; background: var(--border); margin: 4px -14px 0; }
.column-settings-panel {
  position: fixed; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 14px; box-shadow: 0 8px 24px rgba(0,0,0,0.4); z-index: 30;
  min-width: 190px; max-height: min(70vh, 480px); overflow-y: auto;
}
.column-settings-panel.hidden { display: none; }
.column-toggle-row {
  display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 5px 0;
  cursor: pointer; color: var(--text); white-space: nowrap;
}
.column-toggle-row input { accent-color: var(--green); cursor: pointer; }
.column-reset-btn {
  width: calc(100% + 28px); margin: 8px -14px 0;
  padding: 10px 14px; border: none; border-top: 1px solid var(--border);
  background: var(--bg-card); color: var(--text-muted); font-size: 12px; text-align: left; cursor: pointer;
}
.column-reset-btn:hover { color: var(--red); }
.column-action-btn {
  display: block; width: calc(100% + 28px); margin: 0 -14px;
  padding: 10px 14px; border: none; background: var(--bg-card);
  color: var(--text-muted); font-size: 12px; text-align: left; cursor: pointer; transition: color .15s;
}
.column-action-btn:hover { color: var(--green); }
.column-action-btn:last-child { border-radius: 0 0 11px 11px; padding-bottom: 11px; }

td {
  padding: 12px 7px;
  border-bottom: 1px solid rgba(30,58,95,0.5);
  vertical-align: middle;
}
tr:hover td { background: rgba(56,189,248,0.04); }
tr:last-child td { border-bottom: none; }

.river-name { font-weight: 600; color: var(--text); }
.river-section { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.difficulty { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--green); }
.val { font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 500; }
.val-unit { font-size: 11px; color: var(--text-muted); margin-left: 3px; }
.val-cm { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-muted); margin-left: 5px; }
.optimal-range { font-size: 11px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }
.time-cell { font-size: 11px; color: var(--text-muted); }
.loading { text-align: center; color: var(--text-muted); padding: 40px; }

.hidden { display: none !important; }
.col-expand { width: 34px; }
/* Schmale Icon-Spalten (Einstellungsrad, Aufklapp-Pfeil) brauchen nicht das volle Zellen-Padding -
   sonst drueckt jede zusaetzliche schmale Spalte die Tabelle insgesamt ueber die Container-Breite
   hinaus (siehe Desktop-Overflow-Fix vom 2026-08-31, gleiches Muster). */
th.col-expand, td.col-expand { padding-left: 6px; padding-right: 6px; }
.expand-arrow { color: var(--text-muted); font-size: 12px; display: inline-block; width: 14px; }
/* Dezenter Hinweis, dass die Zeile zum Chart aufklappbar ist - bewusst ausgegraut/klein,
   soll nicht ablenken, nur beim ersten Mal die Klick-Affordanz zeigen. */
.expand-hint { opacity: .3; font-size: 10px; margin-right: 1px; }
.river-row { cursor: pointer; }
.chart-row td { padding: 0; border-bottom: none; }
.chart-row:not(.hidden) td { padding: 14px 14px 18px; background: rgba(154,195,110,0.03); }
.table-hint { font-size: 11px; color: var(--text-muted); margin-top: 10px; }

/* STATUS PILLS */
.status-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 20px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.status-wenig      { background: rgba(71,85,105,.2);   color: #94a3b8; }
.status-niedrig    { background: rgba(34,197,94,.15);  color: #22c55e; }
.status-mittel     { background: rgba(234,179,8,.15);  color: #eab308; }
.status-hochwasser { background: rgba(239,68,68,.15);  color: #ef4444; }
.status-unknown    { background: rgba(51,65,85,.3);    color: #93A296; }

/* CHART SECTION */
.section-title { font-size: 15px; font-weight: 600; color: var(--text-muted); margin-bottom: 16px; }
.bars-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }

.chart-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px;
}
.chart-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
/* Zeitraum-Auswahl pro Chart (1h/12h/24h/2 Tage) - eine eigene Zeile aus schmalen Pill-Buttons
   direkt ueber dem Canvas, jede Chart-Karte (m³/s UND cm) hat ihre eigene unabhaengige Auswahl. */
.chart-range { display: flex; gap: 4px; margin-bottom: 8px; }
.range-btn {
  flex: 1; padding: 4px 0; border-radius: 6px; border: 1px solid var(--border);
  background: none; color: var(--text-muted); font-size: 10px; font-family: 'JetBrains Mono', monospace;
  cursor: pointer; transition: all .15s;
}
.range-btn:hover { border-color: var(--green); color: var(--green); }
.range-btn.active { background: var(--green-dim); border-color: var(--green); color: var(--green); font-weight: 600; }
.bar-river-name { font-size: 13px; font-weight: 500; }
.bar-section { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.bar-val { font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 500; }
.chart-wrap { position: relative; height: 180px; overflow: hidden; }
/* Zwei komplett eigenstaendige Chart-Cards (m³/s + cm) nebeneinander - Grid statt Flex,
   siehe Fix vom 2026-08-31 (Chart.js + Flexbox ohne feste Breite = unendliches Wachstum). */
.chart-cards-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; min-width: 0; }
.chart-cards-row .chart-card { min-width: 0; }
@media (max-width: 560px) {
  .chart-cards-row { grid-template-columns: 1fr; gap: 16px; }
}
.chart-zones {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 6px; font-size: 10px; font-family: 'JetBrains Mono', monospace;
  color: var(--text-muted);
}

/* ALERT BELL on chart cards */
.chart-header-left { flex: 1; min-width: 0; }
.chart-header-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.btn-bell {
  background: none; border: 1px solid var(--border); color: var(--text-muted);
  width: 28px; height: 28px; border-radius: 7px; cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.btn-bell:hover { border-color: var(--green); color: var(--green); background: var(--green-dim); }
.btn-bell.active { border-color: #eab308; color: #eab308; background: rgba(234,179,8,0.1); }

/* COMMUNITY RATING MODAL */
.rt-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.75); z-index: 2000;
  align-items: center; justify-content: center; padding: 16px;
}
.rt-overlay.open { display: flex; }
.rt-modal {
  background: #16241D; border: 1px solid var(--border);
  border-radius: 20px; width: 100%; max-width: 480px;
  box-shadow: 0 30px 70px rgba(0,0,0,.7);
}
.rt-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 20px 24px 14px; border-bottom: 1px solid var(--border);
}
.rt-title { font-size: 16px; font-weight: 700; color: var(--green); }
.rt-sub   { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.rt-body  { padding: 20px 24px 24px; }
.rt-flow-info { font-size: 13px; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; margin-bottom: 16px; font-family: 'JetBrains Mono', monospace; }
.rt-question  { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 14px; }

.rt-threshold-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.rt-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 12px;
  background: var(--bg); border: 1px solid var(--border);
  transition: border-color .15s, background .15s;
  cursor: pointer;
}
.rt-row:hover { border-color: rgba(154,195,110,0.4); }
/* Zone-specific active colors */
#rtRowWenig.rt-row--active      { border-color: rgba(154,195,110,0.8);  background: rgba(154,195,110,0.10); }
#rtRowOptimal.rt-row--active    { border-color: rgba(34,197,94,0.8);   background: rgba(34,197,94,0.10); }
#rtRowViel.rt-row--active       { border-color: rgba(234,179,8,0.8);   background: rgba(234,179,8,0.10); }
#rtRowHochwasser.rt-row--active { border-color: rgba(239,68,68,0.8);   background: rgba(239,68,68,0.10); }
.rt-row-ico  { font-size: 22px; flex-shrink: 0; }
.rt-row-lbl  { flex: 1; font-size: 13px; color: var(--text); line-height: 1.3; min-width: 0; }
.rt-row-lbl small { display: block; font-size: 10px; color: var(--text-muted); }
.rt-input {
  width: 76px; text-align: right; flex-shrink: 0;
  background: rgba(30,58,95,0.6); border: 1px solid var(--border); border-radius: 8px;
  color: var(--green); font-family: 'JetBrains Mono', monospace; font-size: 15px; font-weight: 700;
  padding: 7px 10px; cursor: text;
  /* hide number spinners */
  -moz-appearance: textfield;
}
.rt-input::-webkit-outer-spin-button,
.rt-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rt-input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 2px rgba(154,195,110,0.2); }
.rt-row-unit { font-size: 12px; color: var(--text-muted); flex-shrink: 0; }

.rt-stats  { font-size: 12px; color: var(--text-muted); text-align: center; margin-bottom: 12px; min-height: 18px; }
.rt-status { font-size: 13px; text-align: center; margin-bottom: 12px; min-height: 20px; }
.rt-status.ok  { color: #22c55e; }
.rt-status.err { color: #ef4444; }
.rt-submit {
  width: 100%;
  background: linear-gradient(135deg, rgba(154,195,110,0.18), rgba(154,195,110,0.1));
  border: 1px solid rgba(154,195,110,0.4); color: var(--green);
  padding: 13px; border-radius: 12px; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: all .15s;
}
.rt-submit:hover:not(:disabled) { background: rgba(154,195,110,0.22); }
.rt-submit:disabled { opacity: .4; cursor: not-allowed; }
.rt-privacy { font-size: 10px; color: var(--text-muted); text-align: center; margin-top: 10px; }

/* Community badge on chart cards */
.community-badge { font-size: 10px; color: var(--green); font-family: 'JetBrains Mono', monospace; }

/* FEEDBACK BUTTON */
.btn-feedback {
  background: none; border: 1px solid rgba(34,197,94,0.4); color: #22c55e;
  padding: 7px 12px; border-radius: 8px; cursor: pointer; font-size: 12px;
  font-weight: 500; white-space: nowrap; transition: all .15s;
}
.btn-feedback:hover { background: rgba(34,197,94,0.1); border-color: #22c55e; }

/* FEEDBACK MODAL */
.fb-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.75); z-index: 2000;
  align-items: center; justify-content: center; padding: 16px;
}
.fb-overlay.open { display: flex; }
.fb-modal {
  background: #16241D; border: 1px solid var(--border);
  border-radius: 20px; width: 100%; max-width: 500px;
  box-shadow: 0 30px 70px rgba(0,0,0,.7);
}
.fb-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 22px 24px 16px; border-bottom: 1px solid var(--border);
}
.fb-title { font-size: 16px; font-weight: 700; color: #22c55e; }
.fb-sub   { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.fb-body  { padding: 20px 24px 24px; }
.fb-field { margin-bottom: 16px; }
.fb-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); display: flex; justify-content: space-between; margin-bottom: 8px; }
.fb-cats  { display: flex; flex-wrap: wrap; gap: 8px; }
.fb-cat   { cursor: pointer; }
.fb-cat input { display: none; }
.fb-cat span  {
  display: inline-block; padding: 6px 12px; border-radius: 100px; font-size: 12px;
  border: 1px solid var(--border); color: var(--text-muted); transition: all .12s;
}
.fb-cat input:checked + span { border-color: #22c55e; color: #22c55e; background: rgba(34,197,94,0.1); }
.fb-cat:hover span { border-color: var(--text-muted); color: var(--text); }
.fb-textarea {
  width: 100%; min-height: 130px; background: var(--bg); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px 14px; color: var(--text); font-size: 14px;
  font-family: 'Inter', sans-serif; resize: vertical; line-height: 1.6;
  transition: border-color .15s;
}
.fb-textarea:focus { outline: none; border-color: rgba(34,197,94,0.5); }
.fb-count   { font-weight: 400; font-family: 'JetBrains Mono', monospace; }
.fb-privacy { font-size: 11px; color: var(--text-muted); margin-bottom: 14px; }
.fb-status  { font-size: 13px; margin-bottom: 10px; min-height: 20px; }
.fb-status.ok  { color: #22c55e; }
.fb-status.err { color: #ef4444; }
.fb-submit {
  width: 100%; background: linear-gradient(135deg, rgba(34,197,94,0.2), rgba(34,197,94,0.1));
  border: 1px solid rgba(34,197,94,0.4); color: #22c55e;
  padding: 13px; border-radius: 12px; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: all .15s;
}
.fb-submit:hover:not(:disabled) { background: rgba(34,197,94,0.2); }
.fb-submit:disabled { opacity: .45; cursor: not-allowed; }

/* UMKREISSUCHE */
.btn-nearby {
  background: var(--green-dim); border: 1px solid var(--green); color: var(--green);
  padding: 10px 18px; border-radius: 10px; cursor: pointer;
  font-size: 14px; font-weight: 600; transition: all .15s;
}
.btn-nearby:hover { background: rgba(154,195,110,0.2); }
.btn-nearby:disabled { opacity: .6; cursor: default; }
.nb-select {
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  padding: 10px 12px; border-radius: 10px; font-size: 13px; cursor: pointer;
}
.nb-range-label { font-size: 12px; color: var(--text-muted); margin-left: 4px; }
.nb-range-sep { color: var(--text-muted); }
.nb-form-label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 12px; }
.nb-range-row { display: flex; align-items: center; gap: 10px; }
.nb-range-row .nb-select { flex: 1; padding: 12px; font-size: 14px; }
.nb-form-hint { font-size: 11px; color: var(--text-muted); margin-top: 8px; }
.nb-form-submit { width: 100%; margin-top: 20px; }
.nb-diff-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.nb-diff-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 20px; border: 1px solid var(--border);
  background: var(--bg); font-size: 13px; cursor: pointer; user-select: none;
}
.nb-diff-chip input { accent-color: var(--green); cursor: pointer; }
.nb-diff-chip:has(input:checked) { border-color: var(--green); color: var(--green); }
.nb-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid rgba(30,58,95,0.5);
}
.nb-item:last-child { border-bottom: none; }
.nb-dist {
  font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; color: var(--green);
  min-width: 54px; text-align: right; flex-shrink: 0;
}
.nb-item-main { flex: 1; min-width: 0; }
.nb-item-name { font-weight: 600; font-size: 14px; }
.nb-item-section { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.nb-item-right { text-align: right; flex-shrink: 0; }
.nb-empty { color: var(--text-muted); text-align: center; padding: 30px 10px; }
.nb-fallback-title {
  font-size: 12px; color: var(--text-muted); font-weight: 600;
  margin: 16px 0 4px; padding-top: 12px; border-top: 1px dashed var(--border);
}
.nb-error { color: #ef4444; text-align: center; padding: 20px 10px; font-size: 13px; }
.btn-nb-telegram {
  display: block; width: 100%; margin-top: 18px;
  background: rgba(56,189,248,0.12); border: 1px solid var(--green); color: var(--green);
  padding: 12px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.btn-nb-telegram:hover { background: rgba(56,189,248,0.2); }
.btn-nb-telegram:disabled { opacity: .6; cursor: default; }

/* CHANGELOG BUTTON */
.btn-changelog {
  background: none; border: 1px solid var(--border); color: var(--text-muted);
  padding: 7px 12px; border-radius: 8px; cursor: pointer; font-size: 12px;
  font-weight: 500; white-space: nowrap; transition: all .15s;
}
.btn-changelog:hover { border-color: var(--green); color: var(--green); }

/* CHANGELOG MODAL */
.cl-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.75); z-index: 2000;
  align-items: center; justify-content: center; padding: 16px;
}
.cl-overlay.open { display: flex; }
.cl-modal {
  background: #16241D; border: 1px solid var(--border);
  border-radius: 20px; width: 100%; max-width: 520px;
  max-height: 88vh; overflow-y: auto;
  box-shadow: 0 30px 70px rgba(0,0,0,.7);
}
.cl-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 22px 24px 16px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: #16241D; z-index: 5;
}
.cl-title { font-size: 18px; font-weight: 700; color: var(--green); }
.cl-version { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.cl-close { background: none; border: none; color: var(--text-muted); font-size: 20px; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.cl-close:hover { background: rgba(255,255,255,.08); color: var(--text); }
.cl-body { padding: 20px 24px 24px; }
.cl-entry { margin-bottom: 24px; }
.cl-entry-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cl-badge {
  font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 20px;
  background: rgba(77,122,58,0.3); color: var(--green); border: 1px solid rgba(77,122,58,0.5);
}
.cl-badge.new    { background: rgba(34,197,94,0.2);  color: #22c55e; border-color: rgba(34,197,94,0.4); }
.cl-badge.launch { background: rgba(234,179,8,0.18); color: #eab308; border-color: rgba(234,179,8,0.4); }
.cl-entry-version { font-size: 13px; font-weight: 700; color: var(--text); }
.cl-entry-date { font-size: 12px; color: var(--text-muted); margin-left: auto; }
.cl-list { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.cl-list li { font-size: 13px; color: var(--text); line-height: 1.5; padding-left: 4px; }
.cl-list code { font-family: 'JetBrains Mono', monospace; font-size: 11px; background: rgba(30,58,95,0.8); padding: 2px 5px; border-radius: 4px; color: var(--green); }
.cl-info { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-top: 8px; }
.cl-info-row { display: flex; justify-content: space-between; font-size: 12px; padding: 5px 0; border-bottom: 1px solid rgba(30,58,95,0.4); }
.cl-info-row:last-child { border-bottom: none; }
.cl-info-row span:first-child { color: var(--text-muted); }
.cl-info-row span:last-child  { color: var(--text); font-weight: 500; }

/* ALERT MODAL */
.al-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.75); z-index: 2000;
  align-items: center; justify-content: center; padding: 16px;
}
.al-overlay.open { display: flex; }
.al-modal {
  background: #16241D; border: 1px solid var(--border);
  border-radius: 16px; width: 100%; max-width: 380px;
  box-shadow: 0 25px 60px rgba(0,0,0,.6);
}
.al-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  font-size: 15px; font-weight: 700; color: #eab308;
}
.al-header button { background: none; border: none; color: var(--text-muted); font-size: 18px; cursor: pointer; }
.al-body { padding: 20px; }
.al-river-name { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 16px; }
.al-row label { font-size: 12px; color: var(--text-muted); display: block; margin-bottom: 8px; }
.al-inputs { display: flex; align-items: center; gap: 8px; }
.al-inputs select, .al-inputs input {
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 8px 10px; font-size: 13px;
}
.al-inputs select { flex: 0 0 auto; }
.al-inputs input  { flex: 1; min-width: 0; }
.al-inputs input:focus, .al-inputs select:focus { outline: none; border-color: var(--green); }
.al-unit { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.al-range { font-size: 11px; color: var(--text-muted); margin-top: 8px; font-family: 'JetBrains Mono', monospace; }
.al-command-box { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 12px; margin-top: 16px; }
.al-cmd-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; }
.al-cmd { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--green); word-break: break-all; }
.al-copy { background: var(--green-dim); border: 1px solid var(--green); color: var(--green); padding: 5px 12px; border-radius: 7px; cursor: pointer; font-size: 12px; margin-top: 10px; width: 100%; }
.al-copy:hover { background: rgba(154,195,110,0.2); }
.al-open-bot {
  display: block; text-align: center; margin-top: 12px;
  background: linear-gradient(135deg, #4d7a3a, #D0B96A); color: #F1ECDF;
  padding: 11px; border-radius: 10px; font-size: 13px; font-weight: 700;
  text-decoration: none; transition: opacity .15s;
}
.al-open-bot:hover { opacity: .88; }
.al-hint { font-size: 11px; color: var(--text-muted); text-align: center; margin-top: 8px; }

/* FOOTER */
footer {
  text-align: center; padding: 24px;
  font-size: 11px; color: var(--text-muted);
  border-top: 1px solid var(--border); margin-top: 16px;
}
footer a { color: var(--text-muted); }
footer a:hover { color: var(--green); }

/* RESPONSIVE */

/* Luecke zwischen Desktop-Vollbreite und dem 700px-Handy-Umbruch: schmales Browserfenster
   (z.B. Fenster manuell verkleinert), noch nicht schmal genug fuer den Handy-Hero, aber die 3
   Header-Buttons + Logo/Titel passen dann nicht mehr nebeneinander in einer Zeile (flex-wrap:
   nowrap oben) - das Ergebnis war horizontales Ueberlaufen der ganzen Seite statt eines simplen
   Zeilenumbruchs. Header/th-Sticky ist auf die feste 64px-Zeile kalibriert (siehe CLAUDE.md),
   daher hier wie im Handy-Bereich abgeschaltet, sobald der Header zweizeilig wird. */
@media (max-width: 900px) and (min-width: 701px) {
  .header-inner { flex-wrap: wrap; height: auto; padding: 12px 0; row-gap: 10px; }
  .header-actions { flex-wrap: wrap; }
  header { position: static; }
  th { position: static; top: auto; }
  .bl-filter-th { position: relative; }
  /* Gleicher Effekt bei der Tabelle: die 8 Spalten sind zusammen ~793px breit - passt bei
     voller Desktop-Breite (max-width:900px, siehe main) locker, aber sobald das Fenster in
     diesen Zwischenbereich schrumpft, ist main schmaler als 793px. Ohne eigenes overflow-x
     haette DAS wiederum die ganze Seite horizontal ueberlaufen lassen (main hat naemlich
     kein overflow:hidden). */
  .table-section { overflow-x: auto; }
}

@media (max-width: 700px) {
  header { padding: 0 16px; position: static; }
  main { padding: 16px; }
  .header-inner { height: auto; padding: 20px 0 12px; flex-wrap: wrap; }
  .header-actions { flex-wrap: wrap; justify-content: center; }
  /* Mobiler Hero: grosses Logo MIT Schriftzug quer oben (per <picture> wird hier automatisch
     das Vollformat-Logo statt des kleinen Icon-Crops geladen, siehe index.html) - seit den neuen,
     vom User gelieferten Logos (2026-09-02) hat das Bild wieder den KORREKTEN Namen eingebrannt,
     das vorherige Icon+h1-Text-Behelf (noetig als das alte Logo noch "RiverReport" zeigte) ist
     damit wieder obsolet. h1 bleibt ausgeblendet - der Schriftzug steckt im Logo selbst, doppelt
     waere redundant. header ist hier bewusst nicht mehr sticky (siehe oben), sonst wuerde dieser
     groessere Header beim Scrollen dauerhaft viel zu viel Flaeche blockieren. */
  .logo-area { flex-direction: column; width: 100%; align-items: center; text-align: center; gap: 10px; }
  .logo-icon { display: flex; justify-content: center; width: 100%; }
  .logo-icon img { width: 100%; max-width: 380px; height: auto; border-radius: 20px; }
  h1 { display: none; }
  .subtitle #fetchTime { display: block; margin-top: 2px; }
  /* Morning-Report-Button zuerst und auf eigener Zeile - direkt sichtbar statt unten in der
     Reihe. Etwas groesser/praesenter als am Desktop, bleibt aber die gleiche volle-blau-Optik
     wie die Desktop-Basis-Regel oben (kein eigener Farbstil mehr noetig). */
  .btn-newsletter { order: -1; flex: 1 1 100%; justify-content: center; margin-bottom: 4px; padding: 9px 16px; font-size: 13px; }
  .btn-changelog, .btn-feedback { order: 1; flex: 1 1 0; justify-content: center; }
  /* Sticky-th ist auf die feste 64px-Desktop-Headerhoehe kalibriert (siehe CLAUDE.md) - am
     Handy ist der Header jetzt mehrzeilig/hoeher, dadurch klaffte eine leere Luecke ueber der
     Tabelle auf. Am Handy kombiniert mit horizontalem Scroll ohnehin fragil - einfach abschalten. */
  th { position: static; top: auto; }
  /* Nur hier noetig: ohne th selbst als Sticky-Anker (siehe oben) braucht das Filter-Dropdown
     einen eigenen Positionierungs-Kontext. Bewusst NUR in dieser Media Query (nicht global) -
     am Desktop wuerde das per Spezifitaet th's position:sticky ausser Kraft setzen und die
     Kopfzeile kaputt machen (siehe Vorfall 2026-08-31). */
  .bl-filter-th { position: relative; }
  /* Horizontaler Scroll nur mobil noetig (schmaler Viewport) - am Desktop bricht
     overflow-x:auto sonst die Sticky-Positionierung vom thead (siehe CLAUDE.md). */
  .table-section { overflow-x: auto; }

  /* Charts am Handy kompakter: weniger Innenabstand, kleinere Schrift, damit mehr vom
     eigentlichen Verlauf sichtbar ist statt Chrome drumherum. Etwas mehr Hoehe als vorher,
     da jetzt auch die volle Breite zur Verfuegung steht (siehe Breakout unten). */
  .chart-card { padding: 10px; }
  .chart-wrap { height: 200px; }
  .bar-river-name { font-size: 12px; }
  .bar-section { font-size: 10px; }
  .bar-val { font-size: 13px; }
  .btn-bell { width: 26px; height: 26px; font-size: 13px; }
  .chart-zones { font-size: 9px; }

  /* Breakout aus der horizontal scrollenden Tabelle: die Chart-Zeile ist strukturell weiterhin
     eine <tr> mit colspan="8" (liegt am linken Rand der Tabelle, wie alle anderen Zellen auch).
     position:sticky auf einer <td> war hier unzuverlaessig (Browser rendern Sticky in
     Tabellenzellen uneinheitlich) - stattdessen wird beim Aufklappen der Scroll-Stand der
     Tabelle per JS auf 0 zurueckgesetzt (toggleRiverChart in app.js), dadurch liegt die Karte
     einfach an ihrer natuerlichen Position ganz links, buendig mit dem restlichen Seiteninhalt. */
  .chart-row:not(.hidden) td { padding: 14px 0 18px; }
  .chart-row td > .chart-card,
  .chart-row td > .chart-cards-row {
    width: calc(100vw - 32px);
    box-sizing: border-box;
  }
}