/* ============================================================
   News by ManniMindset: das App-Eigene

   Die gemeinsame Basis (/app/basis.css) liefert Raster, Kopfzeile,
   Umschalter, Liste, Karten, Blatt, Toast und Werbestreifen. Hier steht nur,
   was diese App von den anderen unterscheidet: das Zeilenraster, die
   Regionszeile, die zwei Kartenformen und die Rubrikfarben.

   FARBEN: eigene Namen mit dem Praefix --nw-, damit sie nie mit den Token der
   Basis kollidieren. Jeder Wert steht PAARWEISE, hell und dunkel. Wer nur den
   Hellwert setzt, hat den Dunkelmodus kaputtgemacht und merkt es abends.
   ============================================================ */

:root {
  --nw-blaulicht: #d1453b;
  --nw-bauen:     #b57900;
  --nw-sport:     #17864a;
  --nw-gutes:     #0f8a80;
  --nw-sonstiges: #6b7480;
}

@media (prefers-color-scheme: dark) {
  :root {
    --nw-blaulicht: #ff6b5e;
    --nw-bauen:     #f0b429;
    --nw-sport:     #3ddc84;
    --nw-gutes:     #2ad4c4;
    --nw-sonstiges: #8a93a1;
  }
}

/* Das Zeilenraster dieser App: Kopf, Rubriken, Region, Liste, Werbung.
   Nur die Liste bekommt Platz zum Wachsen, alles andere bleibt so hoch, wie
   es sein muss. Die Zahl der Zeilen muss zur Zahl der Kinder passen, sonst
   entsteht eine Zusatzzeile (b#ver ist hidden und damit kein Rasterkind). */
.app {
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
}

/* DER LISTENRAUM MUSS DIE LISTE FESTHALTEN, SONST SCROLLT SIE NICHT.
   Gemessen am 02.08.2026 in der oertlichen Vorschau: ohne diese vier Zeilen
   war die Liste 2613 px hoch in einem 507 px hohen Raum. Sichtbar waren vier
   Karten, alles darunter war unerreichbar, denn body steht auf
   overflow:hidden und die Liste hatte gar keine Hoehe, an der ihr eigenes
   overflow-y:auto haette greifen koennen.
   Flexbox statt des Rasters aus der Tank-App, weil hier ZWEI Baender ueber
   der Liste liegen (neue Meldungen, kein Netz) und die Anzeige fuers Ziehen
   sich als drittes dazwischenschiebt. Mit festen Rasterzeilen muesste jede
   davon ihre Zeile kennen. */
.listenraum {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.liste {
  flex: 1 1 auto;
  min-height: 0;
}

/* ---------- Die Musterdaten-Pille ----------

   Gross und ueber der Liste, nicht als schmaler Streifen am Bildschirmrand.
   Sie kostet Platz, und das ist hier ausdruecklich richtig: solange in der
   App ein fester Beispielstand liegt, ist diese Information wichtiger als
   eine Karte mehr.

   Orange, nicht rot: Rot heisst in dieser Familie "etwas ist kaputt oder
   veraltet" (der Frischehinweis wird rot). Hier ist nichts kaputt, hier
   fehlt nur noch etwas. */
.probe-pille {
  margin-bottom: 6px;
  padding: 10px 14px;
  border-radius: 16px;
  background: linear-gradient(120deg, #FF7D0F 0%, #e8a800 100%);
  color: #10131a;
  text-align: center;
}
.probe-pille[hidden], .probe-pille.hidden { display: none; }
.probe-pille b {
  display: block;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
}
.probe-pille span {
  display: block;
  margin-top: 2px;
  font-size: 13.5px;
  line-height: 1.3;
  font-weight: 600;
}

/* ---------- Rubrikleiste ---------- */

/* Zeichen ueber dem Wort. Es traegt die Auswahl auch dann noch, wenn jemand
   die Systemschrift so weit vergroessert, dass "Blaulicht" nicht mehr passt. */
.umschalter.gross .segment {
  flex-direction: column;
  gap: 0;
  line-height: 1.05;
  padding: 0 2px;
  font-size: 15px;
}
.seg-zeichen {
  font-size: 11px;
  opacity: .75;
  line-height: 1;
}
.segment[aria-pressed="true"] .seg-zeichen { opacity: 1; }

/* ---------- Regionszeile ---------- */

/* Drei Bedienelemente in einer Zeile: Land waehlen, Merkzettel, ganz
   Deutschland. Zusammen 48 px, das ist eine Zeile weniger als bei Tanken und
   damit eine sichtbare Karte mehr. */
.regionzeile {
  display: flex;
  align-items: stretch;
  gap: 6px;
  min-height: 48px;
}

.rz-land {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  padding: 4px 12px;
  border: 1px solid var(--linie);
  border-radius: 14px;
  background: var(--karte);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.rz-titel {
  font-size: 17px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rz-pfeil { font-size: 13px; color: var(--leise); }
.rz-unter {
  font-size: 13px;
  color: var(--leise);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Ehrlich bleiben: ein alter Stand wird als alter Stand gekennzeichnet.
   Ab wann rot, entscheidet app.js (60 Minuten, Begruendung dort). */
.rz-unter.warn { color: var(--warn); font-weight: 700; }

/* Der Merkzettel kostet NULL Pixel, solange nichts gemerkt ist: der Knopf ist
   dann schlicht nicht da. */
.rz-merk {
  flex: none;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 10px;
  border: 1px solid var(--linie);
  border-radius: 14px;
  background: var(--karte);
  color: var(--text);
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
}
.rz-merk[hidden] { display: none; }

.rz-alle {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0 10px;
  border: 1px solid var(--linie);
  border-radius: 14px;
  background: var(--karte);
  color: var(--leise);
  cursor: pointer;
}
.rz-alle-text { font-size: 11px; font-weight: 700; letter-spacing: .2px; }
.rz-alle[aria-checked="true"] { border-color: var(--blau); color: var(--blau); }
.rz-alle[aria-checked="true"] .kippe { background: var(--blau); }
.rz-alle[aria-checked="true"] .kippe-knopf { transform: translateX(26px); }

/* ---------- Baender ueber der Liste ---------- */

.tipp-band, .netz-band {
  margin-bottom: 5px;
  padding: 7px 12px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.3;
}
.tipp-band {
  background: color-mix(in srgb, var(--blau) 16%, var(--karte));
  color: var(--text);
  cursor: pointer;
}
.netz-band {
  background: color-mix(in srgb, var(--warn) 18%, var(--karte));
  color: var(--text);
}
.tipp-band[hidden], .netz-band[hidden] { display: none; }

/* ---------- Die Meldungskarte ---------- */

/* Der Farbstreifen links ist die EINZIGE Farbflaeche. Kein blinkendes
   Blaulicht, keine roten Vollflaechen: eine seriöse App laesst sich als
   Werbeflaeche verkaufen, ein Boulevard-Ticker nicht. */
/* HOEHE IST HIER DIE WICHTIGSTE GROESSE, nicht die Schoenheit.
   Gemessen am 02.08.2026 auf 375x812: mit 127 px Kartenhoehe standen drei
   Karten im Bild, mit 95 px sind es fuenf. Eine Nachrichtenliste, die nach
   drei Zeilen aufhoert, sieht leer aus, egal wie viel darunter liegt.
   Erreicht wird das durch einen einzeiligen Anriss und knappe Innenabstaende,
   NICHT durch kleinere Schrift: die Ueberschrift muss lesbar bleiben. */
.karte.mld {
  padding: 8px 11px 7px;
  border-left-color: var(--nw-sonstiges);
}
.karte.r-blaulicht { border-left-color: var(--nw-blaulicht); }
.karte.r-bauen     { border-left-color: var(--nw-bauen); }
.karte.r-sport     { border-left-color: var(--nw-sport); }
.karte.r-gutes     { border-left-color: var(--nw-gutes); }

/* Gelesenes tritt zurueck, verschwindet aber nicht. */
.karte.mld.gelesen .mld-titel { color: var(--leise); font-weight: 700; }

.mld-titel {
  font-size: 16.5px;
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 2px;
  /* Hoechstens zwei Zeilen. Ohne diese Grenze reisst eine einzige lange
     Ueberschrift die halbe Liste an sich. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* EINE Zeile. Zwei waren der Entwurf, gemessen kosten sie 19 px und damit
   eine ganze Karte im ersten Bild. Der Anriss ist hier nur der Hinweis
   "worum geht es", die ganze Meldung steht im Blatt. */
.mld-anriss {
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--leise);
  margin: 0 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mld-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--leise);
  min-width: 0;
}
/* Ort und Zeit stehen IMMER an derselben Stelle. Man scannt nach dem eigenen
   Ort, nicht nach dem Thema. */
.mld-zeit { flex: none; font-weight: 700; }
.mld-ort  { flex: none; font-weight: 700; color: var(--text); }
.mld-quelle {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mld-pille {
  flex: none;
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: color-mix(in srgb, var(--blau) 15%, transparent);
  color: var(--blau);
  white-space: nowrap;
}

.liste-mehr {
  margin: 4px 0 2px;
  min-height: 46px;
  border: 2px solid var(--linie);
  border-radius: 14px;
  background: var(--karte);
  color: var(--text);
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
}

/* ---------- Inhalt im Blatt ---------- */

.bl-meta {
  font-size: 13px;
  color: var(--leise);
  margin: 0 0 10px;
}
.bl-text {
  font-size: 16px;
  line-height: 1.5;
  white-space: pre-line;   /* Absaetze aus dem Behoerdentext bleiben erhalten */
  margin: 0 0 12px;
}
.bl-hinweis {
  font-size: 14px;
  color: var(--leise);
  border-left: 3px solid var(--linie);
  padding-left: 10px;
  margin: 0 0 12px;
}
.bl-quelle { font-size: 12.5px; color: var(--gedimmt); margin: 14px 0 0; }
.bl-fuss-knoepfe { display: flex; gap: 8px; }
.bl-fuss-knoepfe .knopf { flex: 1; min-height: 48px; font-size: 17px; }
.bl-fuss-knoepfe .knopf.schmal { flex: none; width: 58px; }

/* Die Laenderliste im Blatt: zwei Spalten, damit alle 16 ohne Scrollen sitzen. */
.land-raster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.land-knopf {
  min-height: 44px;
  padding: 0 10px;
  border: 2px solid var(--linie);
  border-radius: 12px;
  background: var(--karte);
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.land-knopf.aktiv { border-color: var(--blau); color: var(--blau); }

/* ---------- Kleine Bildschirme ----------
   Kumulativ, in dieser Reihenfolge. Der letzte Block MUSS am Dateiende
   bleiben: bei gleicher Spezifitaet gewinnt der spaetere. */

@media (max-height: 700px) {
  .kopf-was { display: none; }
  .mld-titel { font-size: 16px; }
  .regionzeile { min-height: 44px; }
}

@media (max-width: 380px) {
  .umschalter.gross .segment { font-size: 13.5px; }
  .rz-alle-text { display: none; }
}

@media (max-width: 559px) and (max-height: 640px) {
  /* Auf 360x640 zaehlt jede Zeile. Hier faellt der Anriss ganz weg: lieber
     eine Karte mehr mit Ueberschrift, Ort und Zeit als eine weniger mit
     halbem Satz. */
  .mld-anriss { display: none; }
  .karte.mld { padding: 7px 10px 6px; }
  .liste { gap: 4px; }
  .kopf-was { display: none; }
}