/* ===================================================================
   OMC LIVE FEED - Stilblatt
   NEWS-FEED-05 (19.09.2026) · 05B Layoutkorrektur (19.09.2026)

   Eigenes CSS. Das Spaltenprinzip ist die Anleihe, die Umsetzung ist OMC.

   05B: Der Feed sass im normalen Artikelcontainer (max-width 1280px,
   40px Rand) - gemessen 1200px nutzbar fuer acht Spalten, also 140px je
   Spalte und 110px je Karte. Eine Ueberschrift brauchte 12 Zeilen. Der
   Feed bricht jetzt aus diesem Container aus und jede Spalte hat eine
   Mindestbreite, unter die sie nicht faellt; passen nicht alle nebeneinander,
   wird waagerecht geblaettert. Lesbarkeit vor Spaltenzahl.
   =================================================================== */

.omc-newspage {
  --nf-rand: #22303f; --nf-tafel: #0d141c; --nf-karte: #131c26;
  --nf-karte-hover: #17222e; --nf-text: #d6e0ea; --nf-mut: #8698a9;
  --nf-akzent: #4ea1e0; --nf-gruen: #46b26a; --nf-gelb: #d8a33c; --nf-rot: #d9544d;
  /* Mindestbreite einer Feed-Spalte. Darunter wird eine Meldung unlesbar:
     bei 140px brauchte eine Ueberschrift zwoelf Zeilen. */
  --nf-spalte-min: 336px;
  --nf-luecke: 14px;
}

/* ---------- Reiter NEWS | LIVE-FEED (bleiben im normalen Container) ---- */
.omc-nf-reiter { display: flex; gap: 6px; margin: 14px 0 18px;
  border-bottom: 1px solid var(--nf-rand); flex-wrap: wrap; }
.omc-nf-reiter-knopf { appearance: none; background: transparent; cursor: pointer;
  border: 1px solid transparent; border-bottom: none; color: var(--nf-mut);
  font: 600 14px/1 inherit; letter-spacing: .09em; padding: 11px 20px;
  border-radius: 7px 7px 0 0; margin-bottom: -1px; transition: color .15s, background .15s; }
.omc-nf-reiter-knopf:hover { color: var(--nf-text); background: rgba(78,161,224,.07); }
.omc-nf-reiter-knopf.is-aktiv { color: var(--nf-text); background: var(--nf-tafel);
  border-color: var(--nf-rand); border-bottom: 1px solid var(--nf-tafel); }
.omc-nf-reiter-knopf:focus-visible { outline: 2px solid var(--nf-akzent); outline-offset: 2px; }
.omc-nf-bereich[hidden] { display: none; }

/* ===================================================================
   DER AUSBRUCH AUS DEM ARTIKELCONTAINER
   -------------------------------------------------------------------
   Kopf und Reiter bleiben im zentrierten OMC-Container. Der Feed selbst
   nimmt nahezu die ganze Fensterbreite. Gemessen: alle Vorfahren haben
   overflow-x: visible, der Ausbruch geht also sauber.

   96vw statt 100vw laesst rund 2 % Rand je Seite - das deckt zugleich die
   senkrechte Bildlaufleiste ab, die vw mitzaehlt, ohne dass dafuer ein
   overflow-x: hidden auf body noetig waere (das wuerde anderswo klemmen).
   =================================================================== */
@media (min-width: 861px) {
  .omc-nf-vollbreite {
    width: 96vw;
    max-width: 96vw;
    margin-left: calc(50% - 48vw);
    margin-right: calc(50% - 48vw);
  }
}

/* ---------- Werkzeugleiste ---------- */
.omc-nf-leiste { display: flex; gap: 14px 22px; align-items: flex-end; flex-wrap: wrap;
  margin: 0 0 12px; padding: 11px 14px; background: var(--nf-tafel);
  border: 1px solid var(--nf-rand); border-radius: 9px; }
.omc-nf-feld { display: flex; flex-direction: column; gap: 5px; font-size: 11px;
  color: var(--nf-mut); letter-spacing: .07em; text-transform: uppercase; }
.omc-nf-feld select { background: var(--nf-karte); color: var(--nf-text);
  border: 1px solid var(--nf-rand); border-radius: 6px; padding: 7px 12px;
  font: inherit; font-size: 14px; text-transform: none; letter-spacing: 0; min-width: 158px; }
.omc-nf-lead { margin: 0 0 12px; color: var(--nf-mut); font-size: 14px; }
.omc-nf-stand { color: var(--nf-mut); font-size: 13px; }
.omc-nf-chips { display: none; }

/* ===================================================================
   DIE TAFEL
   -------------------------------------------------------------------
   Acht Spalten mit fester Mindestbreite. Ist Platz fuer alle, teilen sie
   sich die Breite gleichmaessig (1fr). Ist er es nicht, bleibt jede bei
   ihrer Mindestbreite und die Tafel wird waagerecht blaetterbar - das ist
   allemal besser als acht unlesbare Streifen.
   =================================================================== */
.omc-nf-tafel {
  display: grid;
  grid-template-columns: repeat(8, minmax(var(--nf-spalte-min), 1fr));
  gap: var(--nf-luecke);
  align-items: start;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 12px;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.omc-nf-tafel::-webkit-scrollbar { height: 11px; }
.omc-nf-tafel::-webkit-scrollbar-track { background: #0a1017; border-radius: 6px; }
.omc-nf-tafel::-webkit-scrollbar-thumb { background: #2a3a49; border-radius: 6px; }
.omc-nf-tafel::-webkit-scrollbar-thumb:hover { background: #35485a; }

.omc-nf-spalte {
  background: var(--nf-tafel); border: 1px solid var(--nf-rand); border-radius: 10px;
  display: flex; flex-direction: column; overflow: hidden; min-width: 0;
  scroll-snap-align: start;
  /* Die Spalte nutzt die Fensterhoehe und blaettert selbst. Man soll nicht
     zwanzig Meter scrollen muessen, um eine Spalte zu lesen. */
  height: calc(100vh - 210px);
  min-height: 460px;
}

/* ---------- Spaltenkopf: bleibt stehen, wird NIE abgeschnitten -------- */
.omc-nf-kopf { padding: 11px 13px; border-bottom: 1px solid var(--nf-rand);
  background: linear-gradient(180deg, #16222e, #111a24); flex: 0 0 auto;
  position: sticky; top: 0; z-index: 2; }
.omc-nf-kopf-zeile { display: flex; align-items: center; gap: 8px; }
.omc-nf-punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--nf-mut);
  flex: 0 0 auto; }
.omc-nf-punkt.ist-frisch { background: var(--nf-gruen); box-shadow: 0 0 7px rgba(70,178,106,.65); }
.omc-nf-punkt.ist-alt    { background: var(--nf-gelb); }
.omc-nf-punkt.ist-leer   { background: var(--nf-rot); }

/* Die Hauptueberschrift bekommt, was sie braucht. Kein Abschneiden, keine
   drei Puenktchen - das war der Hauptmangel der ersten Fassung. */
.omc-nf-titel {
  font-size: 13px; font-weight: 700; letter-spacing: .07em; color: var(--nf-text);
  margin: 0; flex: 1 1 auto; min-width: 0;
  white-space: nowrap; overflow: visible; text-overflow: clip;
}
.omc-nf-zahl { font-size: 12px; color: var(--nf-text); font-variant-numeric: tabular-nums;
  background: #1c2937; border: 1px solid #2a3a49; border-radius: 99px;
  padding: 2px 9px; flex: 0 0 auto; font-weight: 600; }
.omc-nf-neu { background: var(--nf-akzent); color: #06111c; border-radius: 99px;
  padding: 1px 7px; font-size: 11px; font-weight: 700; margin-left: 5px; }
.omc-nf-kopf-fuss { margin-top: 5px; font-size: 11px; color: var(--nf-mut); }

/* ---------- Die Liste blaettert senkrecht ---------- */
.omc-nf-liste { overflow-y: auto; overflow-x: hidden; padding: 11px; display: flex;
  flex-direction: column; gap: 11px; flex: 1 1 auto; scrollbar-width: thin;
  overscroll-behavior-y: contain; }
.omc-nf-liste::-webkit-scrollbar { width: 9px; }
.omc-nf-liste::-webkit-scrollbar-thumb { background: #24333f; border-radius: 5px; }
.omc-nf-liste::-webkit-scrollbar-thumb:hover { background: #2f4152; }

/* ---------- Feed-Karten ---------- */
.omc-nf-karte { background: var(--nf-karte); border: 1px solid var(--nf-rand);
  border-radius: 8px; padding: 11px 12px; transition: background .12s, border-color .12s; }
.omc-nf-karte:hover { background: var(--nf-karte-hover); border-color: #2f4356; }

.omc-nf-marke { display: inline-block; font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 3px;
  background: #1d2a36; color: var(--nf-akzent); margin-bottom: 7px;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  vertical-align: bottom; }
.omc-nf-marke.ist-cig { background: #1d3348; color: #7cc0f0; }
.omc-nf-marke.ist-status { background: #3a2222; color: #f0a0a0; }
.omc-nf-marke.ist-patch { background: #332b16; color: #e6bc68; }
.omc-nf-marke.ist-youtube { background: #33191b; color: #f08a8a; }

/* Der Kartentitel bekommt Platz. Bei 336px Spaltenbreite sind das rund
   300px Textbreite - zwei bis vier Zeilen statt zwoelf. */
.omc-nf-karte h4 { margin: 0 0 7px; font-size: 15px; line-height: 1.38;
  font-weight: 600; color: var(--nf-text); overflow-wrap: break-word; hyphens: auto; }
.omc-nf-karte h4 a { color: inherit; text-decoration: none; }
.omc-nf-karte h4 a:hover { color: var(--nf-akzent); text-decoration: underline; }

.omc-nf-kurz { margin: 0 0 8px; font-size: 13px; line-height: 1.5; color: #a9b8c6;
  overflow-wrap: break-word; }

/* ---------- Bild / Vorschau ---------- */
.omc-nf-bild-rahmen { display: block; margin: 0 0 9px; border-radius: 6px;
  overflow: hidden; background: #0a1017; position: relative; aspect-ratio: 16 / 9; }
.omc-nf-bild { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; }
.omc-nf-spielknopf { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; pointer-events: none; }
.omc-nf-spielknopf::after { content: ''; width: 46px; height: 46px; border-radius: 50%;
  background: rgba(8,14,20,.72); border: 2px solid rgba(214,224,234,.85);
  box-shadow: 0 2px 10px rgba(0,0,0,.45);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.omc-nf-spielknopf::before { content: ''; position: absolute; z-index: 1;
  border-style: solid; border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #eaf2f9; margin-left: 4px; }

/* ---------- Fusszeile der Karte ---------- */
.omc-nf-fuss { display: flex; flex-wrap: wrap; gap: 6px 11px; align-items: center;
  font-size: 11.5px; color: var(--nf-mut); }
.omc-nf-fuss a { color: var(--nf-akzent); text-decoration: none; }
.omc-nf-fuss a:hover { text-decoration: underline; }
.omc-nf-typ { border: 1px solid #2c3f52; border-radius: 3px; padding: 1px 6px;
  font-size: 10.5px; letter-spacing: .05em; }
.omc-nf-rel { color: var(--nf-gruen); font-variant-numeric: tabular-nums; font-weight: 600; }
.omc-nf-weitere { display: block; margin-top: 8px; font-size: 12px; color: var(--nf-akzent);
  border-top: 1px dashed #253544; padding-top: 7px; }
.omc-nf-quellen { color: var(--nf-mut); font-size: 11px; margin-top: 2px; }

.omc-nf-hinweis { padding: 18px 14px; text-align: center; color: var(--nf-mut);
  font-size: 13px; line-height: 1.55; }
.omc-nf-hinweis.ist-fehler { color: #e39b96; }
.omc-nf-mehr { appearance: none; width: 100%; background: #16212c; color: var(--nf-text);
  border: 1px solid var(--nf-rand); border-radius: 6px; padding: 9px; cursor: pointer;
  font: 600 12.5px/1 inherit; letter-spacing: .05em; }
.omc-nf-mehr:hover { background: #1c2a37; border-color: #2f4356; }
.omc-nf-mehr[disabled] { opacity: .45; cursor: default; }

/* ===================================================================
   BREITEN
   Richtwerte, nicht in Stein: entscheidend ist die Mindestbreite je
   Spalte. Wie viele gleichzeitig zu sehen sind, ergibt sich daraus.
   =================================================================== */

/* Sehr breit (ab ~2700px): alle acht nebeneinander, etwas mehr Luft. */
@media (min-width: 2700px) {
  .omc-newspage { --nf-spalte-min: 360px; }
}

/* Schmaler Desktop und Tablet: Mindestbreite etwas herunter, damit mehr
   als zwei Spalten gleichzeitig zu sehen sind - aber nie so weit, dass
   eine Ueberschrift bricht. */
@media (min-width: 861px) and (max-width: 1500px) {
  .omc-newspage { --nf-spalte-min: 320px; }
  .omc-nf-spalte { height: calc(100vh - 190px); }
}

/* ---------- Mobil: eine breite Spalte, Auswahl als Chips ---------- */
@media (max-width: 860px) {
  .omc-nf-tafel { grid-template-columns: 1fr; overflow-x: visible; gap: 0; }
  .omc-nf-spalte { height: auto; min-height: 0; }
  /* Standardzustand OHNE Zutun des Skripts: nur die erste Spalte. Damit
   * steht die Seite auch dann richtig, wenn das Skript spaeter dran ist als
   * das Layout - genau das passierte bei der ersten Messung, da waren alle
   * acht Spalten untereinander sichtbar. Sobald das Skript die Auswahl
   * gesetzt hat, entscheidet sie. */
  .omc-nf-spalte:nth-child(n+2) { display: none; }
  .omc-nf-spalte[data-schmal-aus="0"] { display: flex; }
  .omc-nf-spalte[data-schmal-aus="1"] { display: none; }
  .omc-nf-liste { overflow: visible; }
  .omc-nf-kopf { position: static; }
  .omc-nf-reiter-knopf { flex: 1 1 auto; text-align: center; padding: 12px 10px; }
  .omc-nf-leiste { gap: 10px; padding: 10px 11px; }
  .omc-nf-feld { flex: 1 1 100%; }
  .omc-nf-feld select { width: 100%; min-width: 0; }
  .omc-nf-nur-breit { display: none; }

  /* Die Kategorien als Chips - schneller erreichbar als ein Klappmenue. */
  .omc-nf-chips { display: flex; gap: 7px; overflow-x: auto; padding: 2px 0 9px;
    margin: 0 0 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .omc-nf-chips::-webkit-scrollbar { display: none; }
  .omc-nf-chip { appearance: none; flex: 0 0 auto; cursor: pointer;
    background: var(--nf-karte); color: var(--nf-mut); border: 1px solid var(--nf-rand);
    border-radius: 99px; padding: 8px 14px; font: 600 12.5px/1 inherit;
    letter-spacing: .05em; white-space: nowrap; }
  .omc-nf-chip.is-aktiv { background: var(--nf-akzent); color: #06111c;
    border-color: var(--nf-akzent); }
  .omc-nf-chip-zahl { opacity: .75; margin-left: 5px; font-variant-numeric: tabular-nums; }
  .omc-nf-karte h4 { font-size: 16px; }
  .omc-nf-kurz { font-size: 14px; }
}