/* meteo365 v4 — News-Page Erbt von tokens.css + base.css. Keine Hardcodes ausser Tokens. Bildquellen je Slot: 1=500x590, 2=300x196, 3=170x170, 4=360x360, 5=700x467. */ .news-page { padding-block: 24px 56px; } .news-shell { background: var(--bg); color: var(--text); } /* ===== KEINE HOVER-UNTERSTREICHUNG ===== base.css setzte global eine Unterstreichung beim Ueberfahren (seit 11.08.2026 nicht mehr). Das war fuer Fliesstext richtig, hier aber falsch: die Verweise sind Kacheln, Karten und Schaltflaechen — beim Ueberfahren wurde jeweils der komplette Karteninhalt unterstrichen. Die `text-decoration: none` der Einzelregeln greift nicht dagegen, weil `a:hover` (0,1,1) spezifischer ist als eine Klasse (0,1,0). Bewusst NICHT global in base.css entfernt: auf Impressum, Datenschutz und AGB stehen 10-13 Fliesstext-Links, und da `a { color: inherit }` gilt, sind die ALLEIN an dieser Unterstreichung erkennbar. */ .news-hero__main:hover, .news-hero__list-link:hover, .news-card__link:hover, .news-live-strip__item:hover, .news-premium-card:hover, .news-load-more:hover, .news-pager__btn:hover, .news-pager__num:hover, .news-back:hover { text-decoration: none; } /* ===== HERO ===== Bild 500x590 mit Text-Overlay, daneben Mini-Liste mit 3 Schlagzeilen. */ .news-hero { position: relative; margin: 8px 0 36px; border-radius: var(--radius); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-soft); display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(380px, 480px); min-height: 460px; } .news-hero__main { position: relative; display: block; text-decoration: none; color: inherit; } .news-hero__media { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--brand-deep), var(--brand-deep-dark)); height: 100%; max-height: 590px; } .news-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform 600ms var(--ease); } .news-hero__main:hover .news-hero__media img { transform: scale(1.04); } .news-hero__overlay { position: absolute; inset: auto 0 0 0; padding: 32px 36px 28px; display: flex; flex-direction: column; gap: 12px; color: #fff; z-index: 1; background: radial-gradient(120% 90% at 10% 100%, rgba(225, 29, 116, .34), transparent 60%), linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.92) 100%); } .news-hero__title { font-family: var(--font-display); font-size: clamp(24px, 2.8vw, 36px); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; margin: 0; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,.6), 0 4px 18px rgba(0,0,0,.55); } .news-hero__cta { align-self: flex-start; font-weight: 600; font-size: 14px; color: #fff; border-bottom: 1px solid rgba(255,255,255,.5); padding-bottom: 2px; transition: color var(--t) var(--ease), border-color var(--t) var(--ease); } .news-hero__main:hover .news-hero__cta { color: var(--accent); border-color: var(--accent); } .news-hero__overlay .news-chip--brand { background: var(--accent); color: var(--accent-ink); box-shadow: 0 4px 12px rgba(0,0,0,.18); } .news-hero--empty { padding: 64px 24px; text-align: center; min-height: 0; } /* ===== LIVE-STRIP ===== */ /* Ohne diese beiden Zeilen bleibt das hidden-Attribut wirkungslos: die Browser-Grundregel [hidden]{display:none} verliert gegen jede eigene Klassenregel, die display setzt. Betraf die Warnungen-Kachel (dauerhaft sichtbar mit „—") und den Streifen selbst, der schon vor dem Laden der Werte erschien. Gleiches Muster wie in model-select.css und legend.css. */ .news-live-strip[hidden], .news-live-strip__item[hidden] { display: none; } .news-live-strip { display: grid; /* 280 statt 220: die Kacheln tragen jetzt drei Zeilen. Bei drei Themen ergibt das auf dem Desktop eine saubere Dreierreihe. */ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; margin: 0 0 28px; } .news-live-strip__item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--text); transition: transform var(--t) var(--ease), border-color var(--t) var(--ease); } .news-live-strip__item:hover { transform: translateY(-1px); border-color: var(--brand-sun-deep); } /* Runder, getoenter Kreis hinter jedem Symbol. Die Toenung wird per color-mix aus der Symbolfarbe abgeleitet — ein Regelsatz fuer alle drei Kacheln, ohne feste Farbwerte (Hausregel im Dateikopf). */ .news-live-strip__icon { flex: 0 0 auto; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: color-mix(in srgb, currentColor 15%, transparent); border: 1px solid color-mix(in srgb, currentColor 32%, transparent); } .news-live-strip__icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } /* Der Sturm nutzt die GEFUELLTE Ebenen-Marke aus der Layerliste der Startseite (Wunsch Maren, 14.08.). Sie bringt fill/stroke inline mit und gewinnt damit gegen die Konturregel oben — hier ist deshalb nichts weiter zu setzen. */ .news-live-strip__icon--eq { color: var(--accent); } .news-live-strip__icon--warn { color: var(--accent-alt); } /* Tuerkis traegt auf weissem Grund zu wenig — im Light-Modus das tiefe Lagune- Blau, im Blue-Modus der Tuerkis-Funke. Gleiches Muster wie in pages/info.css. */ .news-live-strip__icon--storm { color: var(--brand-deep); } html[data-theme="dark"] .news-live-strip__icon--storm { color: var(--brand-cyan); } /* ===== LESBARKEIT IM BLUE-MODUS ===== `--brand-deep` (#0e6288) ist die Textfarbe FUER DEN LIGHT-MODUS — auf weissem Grund traegt sie 7:1. Im Blue-Modus liegt dieselbe Farbe auf `--bg` #0a415d und kommt auf **1,62:1**; verlangt sind 4,5:1, bei grosser Schrift 3:1. Es fehlte einfach der Dark-Gegenpart, deshalb stand u. a. die Artikel-H1 dunkelblau auf blauem Grund. Gemessen 2026-08-08 an sieben Stellen. `--text` bringt hier rund 11:1. */ html[data-theme="dark"] .news-article__title, html[data-theme="dark"] .news-archive__title, html[data-theme="dark"] .news-section-title, html[data-theme="dark"] .news-live-strip__value, html[data-theme="dark"] .news-hero__list-ort, html[data-theme="dark"] .news-card__notice--banner, html[data-theme="dark"] .news-chip { color: var(--text); } /* Der Wirbel dreht sich, aber traege: 12s statt der 4s auf der Sturm-Seite — hier ist er Beiwerk und soll den Blick nicht vom Wert wegziehen. */ .news-live-strip__arms { transform-origin: 50% 50%; animation: news-strip-spin 12s linear infinite; } @keyframes news-strip-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .news-live-strip__arms { animation: none; } } /* Frueher lagen Beschriftung und Wert NEBENEINANDER, der Wert ganz rechts — ueber die volle Breite sah das aus wie eine Tabelle, nicht wie „live". Jetzt stehen sie uebereinander: kleine Beschriftung, grosser Wert, darunter die Einzelheit (Ort/Zeit bzw. Sturmnamen). Das fuellt die Kachel und macht aus einer Zahl eine Meldung. */ .news-live-strip__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .news-live-strip__label { font-size: 12px; letter-spacing: .02em; color: var(--muted); } .news-live-strip__value { font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.15; font-variant-numeric: tabular-nums; } .news-live-strip__detail { font-size: 12px; color: var(--muted); /* Sturmnamen und Ortsangaben koennen lang werden — eine Zeile, dann Punkte. */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ===== VIDEO-NEWS ===== Eigene Reihe fuer Beitraege mit `video = 1` (Kennzeichen in der Datenbank, gesetzt im neuen Admin). Sie sollen sich absetzen, ohne dass die Seite auseinanderfaellt — deshalb dasselbe Kartenformat, aber breitere Kacheln, dunklerer Bildgrund und ein Abspielzeichen. NICHT die Zeitraffer der Webcams — die leben unter /livecams/timelapse/. */ .news-grid--video { /* FESTE Spaltenzahl statt auto-fill: mit `minmax(300px, 1fr)` entschied die Fensterbreite, ob drei, vier oder fuenf Karten nebeneinander stehen — und bei drei wurden die Kacheln so gross wie die Aufmacher darunter. Die Rubrik ist die kleinere, sie soll auch kleiner aussehen. */ grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 36px; } @media (max-width: 1180px) { .news-grid--video { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 900px) { .news-grid--video { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 680px) { .news-grid--video { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Schmalere Kacheln vertragen die grosse Kartenschrift nicht — bei fuenf in einer Reihe braeuchte ein Titel sonst sechs Zeilen. */ .news-grid--video .news-card__title { font-size: 15px; line-height: 1.3; } .news-grid--video .news-card__body { padding: 12px 14px 14px; gap: 6px; } .news-grid--video .news-card__date { font-size: 12px; } /* Das Standbild darf ruhig etwas zuruecktreten, das Abspielzeichen traegt. */ .news-card--video .news-card__media { aspect-ratio: 16 / 9; } .news-card--video .news-card__media img { filter: brightness(.88); transition: filter var(--t) var(--ease); } .news-card--video:hover .news-card__media img { filter: brightness(1); } .news-card__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: color-mix(in srgb, var(--accent) 92%, transparent); color: var(--accent-ink); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); transition: transform var(--t) var(--ease); z-index: 2; pointer-events: none; } .news-card__play svg { width: 26px; height: 26px; fill: currentColor; stroke: none; } .news-card--video:hover .news-card__play { transform: translate(-50%, -50%) scale(1.08); } /* ===== GRID + CARDS ===== */ .news-grid { display: grid; gap: 18px; } /* ===== TOP-GRID: Mosaik, das die letzte Reihe selbst auffaengt ===== Sechs Spalten als Raster, damit sich Drittel (span 2) UND Haelften (span 3) abbilden lassen. So bleibt nie eine Karte allein neben leeren Feldern — was vorher zwangslaeufig passierte: 8 Aufmacher = 1 Hero + 3 Nebenliste + 4 im Dreierraster, also eine Waise in Reihe 2. Der Rest entscheidet ueber die Form der letzten Reihe: 1 uebrig -> volle Breite, quer gelegt (Bild links, Text rechts) 2 uebrig -> je halbe Breite Das bringt zugleich die Abwechslung ins Raster, die vorher fehlte. */ .news-grid--top { grid-template-columns: repeat(6, 1fr); margin-bottom: 36px; } .news-grid--top > .news-card { grid-column: span 2; } /* Letzte Reihe haette nur EINE Karte -> volle Breite und Querformat. */ .news-grid--top > .news-card:last-child:nth-child(3n + 1) { grid-column: span 6; } .news-grid--top > .news-card:last-child:nth-child(3n + 1) .news-card__link { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); height: 100%; } .news-grid--top > .news-card:last-child:nth-child(3n + 1) .news-card__media { aspect-ratio: auto; height: 100%; min-height: 240px; } .news-grid--top > .news-card:last-child:nth-child(3n + 1) .news-card__body { justify-content: center; padding: 24px 28px; gap: 10px; } .news-grid--top > .news-card:last-child:nth-child(3n + 1) .news-card__title { font-size: 22px; line-height: 1.25; } /* Letzte Reihe haette ZWEI Karten -> je halbe Breite. */ .news-grid--top > .news-card:nth-last-child(2):nth-child(3n + 1), .news-grid--top > .news-card:nth-last-child(2):nth-child(3n + 1) ~ .news-card { grid-column: span 3; } .news-grid--list { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } /* ===== FARBE ÜBER DAS THEMA ===== Die Karten-JSONs kennen kein Thema — es wird serverseitig aus den `label__.json` abgeleitet (siehe themen_karte() in index.php) und als data-thema gesetzt. Hier bekommt jedes Thema eine Farbe. Soweit moeglich aus vorhandenen Marken-Tokens; nur EIN Wert ist neu (Violett fuer Unwetter), Waldbrand nimmt den Rot-Orange-Ton, der im Projekt schon in der Temperatur-Rampe steckt. Die Farbe ist SCHMUCK, keine Information: das Thema steht nirgends sonst auf der Karte, es wird also nichts allein ueber Farbe vermittelt. */ .news-card { --thema: transparent; position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; transition: transform var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); } .news-card:hover { transform: translateY(-2px); /* Ohne Thema das tiefe Logo-Orange — siehe Anmerkung bei den Filterpillen. MIT Thema gewinnt die Themenfarbe, die bleibt unberuehrt (bei "warnung" also weiterhin Magenta, denn dort ist die Farbe eine Aussage). */ border-color: var(--thema, var(--brand-sun-deep)); box-shadow: var(--shadow-soft); } .news-card[data-thema=""]:hover { border-color: var(--brand-sun-deep); } /* Farbmarke: Balken an der Oberkante der Karte. 4px statt 3 — bei dunklen Wetterkarten als Motiv geht eine feinere Linie unter. */ .news-card[data-thema]:not([data-thema=""])::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--thema); z-index: 2; } /* Leichter Schimmer in derselben Farbe an der Kartenkante — bindet den Balken an die Karte, ohne dass die Flaeche bunt wird. */ .news-card[data-thema]:not([data-thema=""]) { border-color: color-mix(in srgb, var(--thema) 28%, var(--line)); } /* prognose/temperatur/warnung kommen aus den Marken-Tokens, waldbrand nutzt den Rot-Orange-Ton der Temperatur-Rampe, sigmet ein helles Lagune-Blau (aus Tokens gemischt). Neu ist allein das Violett fuer Unwetter. */ .news-card[data-thema="prognose"] { --thema: var(--brand-cyan); } .news-card[data-thema="temperatur"] { --thema: var(--accent); } .news-card[data-thema="warnung"] { --thema: var(--accent-alt); } .news-card[data-thema="waldbrand"] { --thema: #f0714f; } .news-card[data-thema="unwetter"] { --thema: #7c6cf0; } .news-card[data-thema="sigmet"] { --thema: color-mix(in srgb, var(--text) 50%, var(--brand-cyan)); } .news-card__link { display: block; text-decoration: none; color: inherit; height: 100%; } .news-card__media { /* Bezugspunkt fuer das Abspielzeichen der Video-Karten. */ position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg); } .news-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 400ms var(--ease); } .news-card:hover .news-card__media img { transform: scale(1.04); } .news-card__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; } .news-card__title { font-family: var(--font-display); font-size: 16px; line-height: 1.3; letter-spacing: -.005em; margin: 2px 0 0; color: var(--text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .news-card__date { font-size: 12px; color: var(--muted); } .news-card__notice { font-size: 11px; color: var(--accent-alt); font-style: italic; } .news-card__notice--banner { background: var(--accent-alt-soft-bg); border-left: 3px solid var(--accent-alt); padding: 10px 14px; margin-bottom: 16px; border-radius: 4px; font-size: 13px; font-style: normal; color: var(--brand-deep); } /* Feature-Card (1. Item im Top-Grid) — 2x2, Bild dominant, Titel Overlay */ .news-card--feature { grid-column: span 2; grid-row: span 2; } .news-card--feature .news-card__link { position: relative; height: 100%; display: block; } .news-card--feature .news-card__media { aspect-ratio: auto; height: 100%; } .news-card--feature .news-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.72) 100%); pointer-events: none; } .news-card--feature .news-card__body { position: absolute; inset: auto 0 0 0; padding: 22px 22px 20px; color: #fff; z-index: 1; } .news-card--feature .news-card__title { font-size: clamp(18px, 1.6vw, 22px); color: #fff; -webkit-line-clamp: 3; } .news-card--feature .news-card__date { color: rgba(255,255,255,.78); } .news-card--feature .news-chip { background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.28); backdrop-filter: blur(4px); } /* ===== CHIPS ===== */ .news-chip { display: inline-block; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--bg); color: var(--brand-deep); border: 1px solid var(--line); align-self: flex-start; } .news-chip--brand { background: var(--brand-sun); color: #fff; border-color: transparent; } .news-chip--filter { cursor: pointer; font-size: 13px; text-transform: none; letter-spacing: 0; padding: 8px 14px; background: var(--surface); transition: all var(--t) var(--ease); } /* ===== HOVER-RAHMEN: tiefes Logo-Orange ===== Alle Hover-Rahmen der Rubrik nutzen `--brand-sun-deep` (#dc661e). Er ist der EINZIGE Orangeton, der auf beiden Untergraenden ueber der 3:1-Marke bleibt, die fuer Rahmen und andere nicht-textliche Elemente gilt: auf Lagune rgb(10,65,93) 3,09:1 (Filterpillen, Live-Kacheln) auf Weiss 3,52:1 (Karten, Blaetter-Pillen) `--brand-sun` (#f4a932) waere auf dem hellen Grund mit 1,99:1 unsichtbar, `--brand-sun-2` mit 2,33:1 ebenso. Das vorherige Magenta war auf der Lagune uebrigens mit 2,40:1 SCHWAECHER als das Orange jetzt — die Umstellung verbessert hier auch die Sichtbarkeit. ACHTUNG: Magenta bleibt, wo es BEDEUTUNG traegt (Warnungen, Hinweise). */ .news-chip--filter:hover { border-color: var(--brand-sun-deep); } /* Fuehrendes `html` ist PFLICHT: `html[data-theme="dark"] .news-chip` weiter oben wiegt (0,2,1) und wuerde `.news-chip--filter.is-active` (0,2,0) sonst ueberstimmen — die Schrift bliebe fast weiss auf Orange (2,0:1). Mit dem `html` wiegen beide gleich, und die spaetere Regel gewinnt. */ html .news-chip--filter.is-active { background: var(--brand-sun-deep); color: var(--brand-sun-ink); border-color: var(--brand-sun-deep); } /* ===== FILTER + LAYOUT ===== */ .news-layout { display: grid; grid-template-columns: 1fr 300px; gap: 32px; align-items: start; } .news-layout__main { min-width: 0; } .news-layout__sidebar { position: sticky; top: calc(var(--header-height) + 16px); } .news-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; } /* ===== LOAD MORE ===== */ .news-load-more { display: block; margin: 28px auto 0; padding: 12px 28px; font: inherit; font-weight: 600; background: var(--brand-deep); color: #fff; border: 0; border-radius: var(--radius-pill); cursor: pointer; transition: transform var(--t) var(--ease), background var(--t) var(--ease); } .news-load-more:hover { background: var(--brand-deep-dark); transform: translateY(-1px); } /* ===== ARTICLE DETAIL ===== */ .news-article { padding-block: 24px 56px; max-width: 820px; margin-inline: auto; } /* Pille wie auf den /info/-Seiten (.info-pill: 9/16 Innenabstand, Pillenradius, 13px, 600). Die Farben dort sind Weiss auf dunklem Hero — hier liegt die Pille auf dem normalen Seitengrund, deshalb aus currentColor gemischt: traegt in Light und Blue gleichermassen und faerbt sich beim Ueberfahren komplett mit. Gleiche Technik wie bei den Live-Streifen-Symbolen. */ .news-back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 9px 16px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 600; line-height: 1.3; white-space: nowrap; /* eine umgebrochene Pille sieht kaputt aus */ color: var(--text); background: color-mix(in srgb, currentColor 8%, transparent); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); text-decoration: none; transition: color var(--t) var(--ease), transform var(--t) var(--ease); } .news-back__arrow { font-size: 15px; line-height: 1; } .news-back:hover { color: var(--accent); transform: translateY(-1px); text-decoration: none; } .news-article__title { font-family: var(--font-display); font-size: clamp(26px, 3.6vw, 40px); line-height: 1.15; margin: 10px 0 8px; color: var(--brand-deep); } .news-article__lede { font-size: 18px; line-height: 1.5; color: var(--muted); margin: 0 0 12px; } .news-article__date { display: block; font-size: 13px; color: var(--muted); margin-bottom: 22px; } .news-article__hero { margin: 0 0 24px; border-radius: var(--radius); overflow: hidden; } .news-article__hero img { width: 100%; display: block; } /* Bildunterschrift (Feld foto_de, in 124 von 471 Artikeln). Sitzt als Leiste unter dem Bild, in derselben Ecke wie das Bild — deshalb kein eigener Radius. Farbe folgt dem Lesemodus, damit sie auf der hellen Lesefläche mitkommt. */ .news-article__bildtext { padding: 9px 14px; font-size: 13px; line-height: 1.45; color: var(--lese-ink); background: color-mix(in srgb, var(--lese-ink) 10%, transparent); border-top: 1px solid color-mix(in srgb, var(--lese-ink) 14%, transparent); } /* Groesse, Zeilenabstand und Farbe kommen aus den Lesemodus-Tokens oben. Die helle Lesefläche legt sich als eigene Karte unter den Text. */ .news-article__text { font-size: var(--lese-schrift); line-height: var(--lese-zeile); color: var(--lese-ink); background: var(--lese-flaeche); transition: background var(--t) var(--ease), color var(--t) var(--ease); } .news-article[data-lese-hell="1"] .news-article__text { padding: 22px 26px; border-radius: var(--radius); border: 1px solid var(--lese-rand); box-shadow: var(--shadow-soft); } /* Titel und Vorspann liegen AUSSERHALB der hellen Fläche, also weiter auf dem blauen Seitengrund — sie behalten bewusst die helle Schrift des Themas. Sie dunkelblau zu faerben haette sie unlesbar gemacht. */ .news-article__text p { margin: 0 0 1em; } .news-article__text img { max-width: 100%; height: auto; border-radius: var(--radius-sm); margin: 8px 0; } .news-article__text video { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; background: #05161f; border-radius: var(--radius-sm); margin: 12px 0; } /* Die Texte gliedern NICHT mit

, sondern mit 13.839
— meist paarweise als Absatzersatz. Ein blosser Umbruch klebt zu eng, deshalb bekommt jeder etwas Luft; zwei hintereinander ergeben so einen sichtbaren Absatz. */ .news-article__text br { content: ""; display: block; margin-top: .55em; } /* ===== LESEMODUS — Bedienung ===== Auslöser sieht aus wie die „Alle Nachrichten"-Pille (er traegt dieselbe Klasse), das Feld haengt darunter. */ .news-article__leiste { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; } .news-article__leiste .news-back { margin-bottom: 0; } .news-lesemodus { position: relative; } .news-lesemodus__schalter { cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; } /* Weicht etwas vom Standard ab -> Markenfarbe, damit man es sieht. */ .news-lesemodus__schalter.is-active { color: var(--accent); } .news-lesemodus__feld[hidden] { display: none; } .news-lesemodus__feld { position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; width: min(300px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--text) 22%, transparent); background: var(--surface); box-shadow: var(--shadow-soft); color: var(--text); } /* Der Blue-Modus hat --surface == --bg; ohne eigenen Grund schwebte das Feld unsichtbar ueber dem Text. Gleiche Technik wie bei der Hinweis-Kachel. */ html[data-theme="dark"] .news-lesemodus__feld { background: color-mix(in srgb, var(--text) 14%, var(--bg)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .news-lesemodus__zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid color-mix(in srgb, var(--text) 18%, transparent); background: transparent; color: inherit; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } /* Schieber als reines CSS — zeigt an/aus ohne zusaetzliche Auszeichnung. */ .news-lesemodus__schieber { flex: 0 0 auto; width: 34px; height: 18px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--text) 22%, transparent); position: relative; transition: background var(--t) var(--ease); } .news-lesemodus__schieber::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--text); transition: transform var(--t) var(--ease); } .news-lesemodus__zeile[aria-pressed="true"] .news-lesemodus__schieber { background: var(--accent); } .news-lesemodus__zeile[aria-pressed="true"] .news-lesemodus__schieber::after { transform: translateX(16px); background: var(--accent-ink); } .news-lesemodus__gruppe { display: flex; flex-direction: column; gap: 6px; } .news-lesemodus__titel { font-size: 12px; color: var(--muted); } .news-lesemodus__knoepfe { display: flex; gap: 6px; } .news-lesemodus__knoepfe button { flex: 1; padding: 7px 4px; border-radius: var(--radius-sm); border: 1px solid color-mix(in srgb, var(--text) 18%, transparent); background: transparent; color: inherit; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: background var(--t) var(--ease), border-color var(--t) var(--ease); } .news-lesemodus__knoepfe button.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .news-lesemodus__zurueck { align-self: flex-start; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; } .news-lesemodus__zurueck:hover { color: var(--accent); } /* ===== LESEMODUS — Stellschrauben ===== Der Artikelbereich stellt seine Farben und Masse als eigene Tokens bereit. Alle Regeln darunter greifen NUR auf diese zu — dadurch laesst sich der Lesemodus umschalten, ohne jede Regel zu doppeln. Vorgabe = Werte des jeweils aktiven Themas. */ .news-article { --lese-ink: var(--text); --lese-link: var(--brand-deep); --lese-flaeche: transparent; /* kein eigener Grund, Seite scheint durch */ --lese-rand: var(--line); --lese-fett: 700; --lese-fett-farbe: inherit; /* Light: Fett braucht keine eigene Farbe */ --lese-schrift: 16px; --lese-zeile: 1.7; } html[data-theme="dark"] .news-article { --lese-link: var(--brand-cyan); --lese-fett: 800; /* Begruendung unten bei "FETT IM BLUE-MODUS" */ /* Helles Blau statt reinem Weiss: Weiss unterscheidet sich vom Fliesstext nur um den Faktor 1,09 und bringt deshalb praktisch nichts. Die Mischung aus Lagune 50 (--text) und Lagune 300 (--brand-cyan) landet bei #a9ddf0 und haelt Abstand nach BEIDEN Seiten: 1,34 zum Fliesstext und 1,37 zur Linkfarbe — Fett wird also weder uebersehen noch fuer einen Link gehalten. Kontrast zum Seitengrund 7,41:1. Aus Tokens gemischt, kein fester Wert. */ --lese-fett-farbe: color-mix(in srgb, var(--text) 50%, var(--brand-cyan)); } /* Helle Lesefläche: die sechs Werte spiegeln den `:root`-Block aus tokens.css (dort ist :root = LIGHT, html[data-theme="dark"] = BLUE — einen verschachtelten Hell-Bereich gibt es dort nicht, deshalb hier lokal). ⚠️ Bei Aenderungen an der Hell-Palette in tokens.css hier mitziehen. */ /* ⚠️ Das fuehrende `html` ist KEIN Schmuck: ohne es hat dieser Block (0,2,0) weniger Gewicht als `html[data-theme="dark"] .news-article` (0,2,1), und die Blue-Werte fuer --lese-link/--lese-fett wuerden gewinnen. Die Folge war ein tuerkisfarbener Link auf weisser Flaeche mit Kontrast 2,02:1. Mit `html` steht es 0,2,1 zu 0,2,1 — und dieser Block kommt spaeter, gewinnt also. */ html .news-article[data-lese-hell="1"] { --lese-ink: #083145; /* = --text (Lagune 900) */ --lese-link: #0e6288; /* = --brand-deep (Lagune 700) */ --lese-flaeche: #ffffff; /* = --surface */ --lese-rand: rgba(14, 98, 136, .16);/* = --line */ --lese-fett: 700; /* auf Hell traegt 700 wieder */ --lese-fett-farbe: inherit; /* und braucht dort keine eigene Farbe */ } /* Schriftgroesse + Zeilenabstand, je drei Stufen. */ .news-article[data-lese-groesse="1"] { --lese-schrift: 18px; } .news-article[data-lese-groesse="2"] { --lese-schrift: 21px; } .news-article[data-lese-abstand="1"] { --lese-zeile: 1.95; } .news-article[data-lese-abstand="2"] { --lese-zeile: 2.25; } /* ===== FETT IM BLUE-MODUS ===== Helle Schrift auf dunklem Grund "blueht" optisch auf: der gefuehlte Abstand zwischen 400 und 700 schrumpft, im Light-Modus ist derselbe Sprung deutlich. Das uebliche Gegenmittel (-webkit-font-smoothing: antialiased) steht bereits global in base.css, und die Textfarbe #eaf7fc ist praktisch weiss — heller geht nicht. Bleibt echtes Gewicht: der System-Stack hat einen realen 800er-Schnitt (gemessen an derselben Zeile: 400=263,7px · 700=280,9px · 800=286,6px — waere 800 nur hochgerechnet, waere die Breite gleich). */ .news-article__text b, .news-article__text strong { font-weight: var(--lese-fett); letter-spacing: .008em; color: var(--lese-fett-farbe); } /* 3.307 Links stecken in den Texten. Ohne eigene Regel greift base.css mit `a { color: inherit }` — die Verweise waeren im Fliesstext unsichtbar und erst beim Ueberfahren zu erkennen. Unterstreichung bleibt hier bewusst. */ .news-article__text a { color: var(--lese-link); text-decoration: underline; text-underline-offset: 2px; } .news-article__text a:hover { color: var(--accent); } /* Die Texte bringen 629 eigene

mit (Reste alter Einbettungen). Sie duerfen die Spalte nicht sprengen. */ .news-article__text div { max-width: 100%; } /* ===== HINWEIS-KACHEL ===== Kurze Absaetze, die auf eine eigene Seite verweisen ("Das aktuelle Flughafenwetter fuer Mallorca gibt es hier."), setzt news_html() in ein