/* =========================================================================== Newsroom — Zeitungssatz (#548), das neue Portal-Layout. Ein GEWAND auf dem einen Seitengerüst (base.html), kein zweites Gerüst: base.html setzt `nr-v5` an den und lädt diese Datei hinter nr-theme.css. Die Portal-Komponenten (.nr-panel, .nr-btn, .nr-notice …) bleiben im Markup der Unterseiten und werden hier nur umgefärbt und umgeschriftet; Dunkelmodus, PWA, Fußzeile, AGB-Hinweis, Toast kommen vom Gerüst. Die Ausgabe selbst steht in Bändern mit fluchtenden Kanten, aber ohne feste Höhen: Ein Band ist so hoch wie seine längste Kachel, alle Kacheln des Bandes sind gleich hoch (Breitenrechnung: web/zeitungssatz/layout.py). Vorgaben von Joerg (19.08.2026): Satzspiegel zentriert, Schrift größer, keine leeren weißen Flächen; Kopfzeile mit Datum, Meldungen, Lesezeit; Bilder klein halten — ein Vorschaubild ist ein Zitat, kein Nachdruck. Blattkritik des Art Directors (19.08. und 23.08.2026) eingearbeitet. =========================================================================== */ /* Der Zeitungssatz ist für 16px Grundschrift gesetzt und so abgenommen; das Portal läuft auf 19px (nr-theme.css). Ein Regler, kein Umrechnen jeder Größe. */ html:has(body.nr-v5) { font-size: 16px; } .nr-v5 { /* --- Raster ----------------------------------------------------------- */ --v5-spalten: 8; /* muss zu SPALTEN in web/zeitungssatz/layout.py passen */ --v5-spalte: clamp(112px, 11.6vw, 210px); --v5-luecke: 22px; --v5-rand: 28px; /* --- Portal-Tokens im Zeitungsgewand: Grund cremig, Fläche weiß, keine Rundungen. Akzent ist Bordeaux (Joerg 30.08.2026, „alles Schwarz in Schwarz" auf der Konto-Seite): Der Akzent lag seit dem 23.08. auf Tinte („die Zeitung kennt nur Tinte und Ressortfarben") — damit kollabierte alles Hervorgehobene (Bestellknopf, gewählter Betrag, Guthaben-Warnung, Abbuchung vs. Gutschrift) zu Schwarz. Bordeaux ist seit dem 26.08. ohnehin die eine Hover-Farbe (--v5-akzent). -------- */ --nr-paper: #FAF9F6; --nr-paper-2: #FFFFFF; --nr-line: #E2DFD8; --nr-line-strong: #C9C4BA; --nr-ink: #16130E; --nr-ink-soft: #46413B; --nr-ink-mute: #837D75; --nr-accent: #8E2F4A; /* = --f-bordeaux (Wert doppelt: Token-Block steht vor den Ressortfarben) */ /* accent-soft bleibt NEUTRAL hell, kein Rose-Ton (Joerg 30.08.2026: Bordeaux als Akzent ja, aber nicht als Flaeche hinter Paket-/Betragswahl). */ --nr-accent-soft: #EFEDE8; --nr-warn: #C2610A; --nr-warn-bg: #FBF1E6; --nr-error: #C0392B; --nr-input-bg: #FAF9F6; --nr-radius: 0px; --nr-masthead: #16130E; --nr-masthead-fg: #F7F5F0; --nr-font-display: Georgia, "Times New Roman", serif; --nr-breite: 49.875rem; /* 798px — dieselbe Lesespalte wie bei 19px × 42rem */ /* Die Bänder lesen ihre Farben aus denselben Tokens — so folgt der Satz dem Dunkelmodus von selbst. */ --v5-grund: var(--nr-paper); --v5-kachel: var(--nr-paper-2); --v5-linie: var(--nr-line); --v5-text: var(--nr-ink); --v5-text-weich: var(--nr-ink-soft); --v5-text-leise: var(--nr-ink-mute); --v5-bild-grund: #EFEDE8; --v5-serif: var(--nr-font-display); --v5-sans: var(--nr-font-body); /* --- Schriftgrößen: klarer Sprung vom Aufmacher zur Kurzmeldung -------- */ --v5-text-groesse: 1rem; --v5-titel-klein: 1.1rem; --v5-titel-mittel: 1.42rem; --v5-titel-gross: 2rem; /* Bildmaße. Die Breite ist ein Deckel, keine feste Größe: In hohen Kacheln wächst das Bild bis dorthin mit und füllt den Raum, den der kurze Text übrig lässt (Joerg 19.08.2026). */ --v5-bild-deckel: 38%; --v5-bild-hoehe: 132px; /* nur für Bild-über-Text (schmale Kacheln) */ /* Ressortfarben, gewählt für Kontrast auf Weiß. */ --f-rot: #C0392B; --f-bordeaux: #8E2F4A; --f-petrol: #0F6E78; --f-blau: #1F5FA8; --f-indigo: #4A46A8; --f-violett: #7A3E9D; --f-orange: #C2610A; --f-gruen: #2E7D4F; --f-ocker: #9A7B1F; --f-tuerkis: #12796B; /* EINE Hover-Farbe fuer alles Anfassbare (Joerg 26.08.2026: kein reines Schwarz): Ressortfarbe, wo eine gesetzt ist, sonst dieser warme Ton. Bordeaux statt Rot, damit Hover nie wie --nr-error aussieht; der Dunkelmodus erbt die Aufhellung von --f-bordeaux automatisch. */ --v5-akzent: var(--f-bordeaux); /* Stern-Gold fuer "bevorzugte Quelle" (Joerg 28.08.2026): die Werte leben in nr-theme.css (--nr-stern, beide Themes), hier nur der V5-Alias. */ --v5-stern: var(--nr-stern); --v5-stern-tinte: var(--nr-stern-tinte); font-family: var(--v5-sans); font-size: var(--v5-text-groesse); } /* Dunkelmodus — zweimal derselbe Wertesatz wie in nr-theme.css (Browser- Präferenz ohne Wahl, explizite Wahl), damit der Schalter in beide Richtungen gewinnt. Ressortfarben um zwei Stufen aufgehellt, Sättigung gehalten: die hellen Töne fallen auf #1D1A16 als 0,7rem-Kicker unter 3:1. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nr-v5 { --nr-paper: #141210; --nr-paper-2: #1D1A16; --nr-line: #34302A; --nr-line-strong: #4A4540; --nr-ink: #EDE9E1; --nr-ink-soft: #B8B2A8; --nr-ink-mute: #7E7870; --nr-accent: #D4688A; --nr-accent-soft: #26221D; --nr-warn: #EE9447; --nr-warn-bg: rgba(238, 148, 71, 0.14); --nr-error: #E8665A; --nr-input-bg: #141210; --nr-masthead: #0C0B09; --nr-masthead-fg: #EDE9E1; --v5-bild-grund: #26221D; --f-rot: #E8665A; --f-bordeaux: #D4688A; --f-petrol: #4FB3BD; --f-blau: #6FA3E0; --f-indigo: #9490E0; --f-violett: #B583D3; --f-orange: #EE9447; --f-gruen: #67B98A; --f-ocker: #D1B24E; --f-tuerkis: #4FBBAB; } } :root[data-theme="dark"] .nr-v5 { --nr-paper: #141210; --nr-paper-2: #1D1A16; --nr-line: #34302A; --nr-line-strong: #4A4540; --nr-ink: #EDE9E1; --nr-ink-soft: #B8B2A8; --nr-ink-mute: #7E7870; --nr-accent: #D4688A; --nr-accent-soft: #26221D; --nr-warn: #EE9447; --nr-warn-bg: rgba(238, 148, 71, 0.14); --nr-error: #E8665A; --nr-input-bg: #141210; --nr-masthead: #0C0B09; --nr-masthead-fg: #EDE9E1; --v5-bild-grund: #26221D; --f-rot: #E8665A; --f-bordeaux: #D4688A; --f-petrol: #4FB3BD; --f-blau: #6FA3E0; --f-indigo: #9490E0; --f-violett: #B583D3; --f-orange: #EE9447; --f-gruen: #67B98A; --f-ocker: #D1B24E; --f-tuerkis: #4FBBAB; } /* html/body tragen den Grund in nr-theme.css über :root-Tokens; der Body im Gewand setzt ihn aus seinen eigenen. */ body.nr-v5 { background: var(--nr-paper); color: var(--nr-ink); } /* Satzspiegel so breit wie das Raster, mittig gestellt — nur die Startseite (block main_klasse); die Unterseiten bleiben in der Lesespalte. */ .nr-v5 main.v5-rahmen { max-width: calc(var(--v5-spalten) * var(--v5-spalte) + (var(--v5-spalten) - 1) * var(--v5-luecke) + 2 * var(--nr-rand)); } /* ============================================ Wortmarke oben links + Menü Beide in derselben Bauart: weisser Kasten, Haarlinie, leichter Schatten — dezent, vom Zeitungskopf abgesetzt (Joerg 23.08.2026). */ .v5-marke { position: absolute; top: 14px; left: 16px; z-index: 60; height: 44px; padding: 0 12px 0 14px; display: flex; align-items: center; gap: 8px; background: var(--v5-kachel); border: 1px solid var(--v5-linie); border-radius: 4px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07); } .v5-marke .nr-wordmark { color: var(--v5-text-weich); text-decoration: none; font-size: 1.05rem; font-weight: 600; /* dezent (23.08.); das fette 700 gilt nur dem Kompakt-Kopf */ opacity: 1; } /* Der Teilen-Knopf bringt seine Kopfleisten-Farbe als Inline-Stil mit (_teilen_knopf.html, eine Komponente fuer Portal und Landing) — hier steht er auf Weiss, also Tinte statt Leisten-Hellton. */ .v5-marke #nr-empfehlen-btn { color: var(--v5-text-weich) !important; } .v5-burger { position: absolute; top: 14px; right: 16px; z-index: 60; width: 44px; height: 44px; background: var(--v5-kachel); border: 1px solid var(--v5-linie); color: var(--v5-text); cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 4px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07); } .v5-burger:hover { border-color: var(--v5-akzent); color: var(--v5-akzent); } .v5-menue { position: fixed; top: 0; right: 0; height: 100%; width: min(330px, 86vw); background: var(--v5-kachel); border-left: 1px solid var(--v5-linie); box-shadow: -8px 0 32px rgba(0, 0, 0, 0.10); transform: translateX(105%); transition: transform 180ms ease; z-index: 55; padding: 76px 0 18px; overflow-y: auto; } .v5-menue.offen { transform: translateX(0); } .v5-menue a, .v5-menue button { display: block; width: 100%; text-align: left; padding: 13px 26px; color: var(--v5-text); text-decoration: none; font-size: 1rem; font-weight: 400; background: none; border: none; border-radius: 0; font-family: var(--v5-sans); cursor: pointer; } .v5-menue a:hover, .v5-menue button:hover { background: var(--v5-grund); color: var(--v5-akzent); } .v5-menue-titel { padding: 15px 26px 6px; font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--v5-text-leise); } .v5-menue-trenner { height: 1px; background: var(--v5-linie); margin: 10px 0; } /* Lautsprecher (Vorlesen) links neben dem Burger, Bauart wie der Burger. Die Kaesten oben sind absolut, nicht fixiert: sie scrollen mit, damit sie spaeter nichts verdecken. */ /* Vorlesen + Optionen in EINEM Kaestchen, Play links (Joerg 28.08.2026); Bauart wie der Burger daneben, innen eine Haarlinie als Trenner. */ .v5-hoerbox { position: absolute; top: 14px; right: 70px; z-index: 60; display: flex; background: var(--v5-kachel); border: 1px solid var(--v5-linie); border-radius: 4px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07); } .v5-vorlesen, .v5-optionen, .v5-glocke { width: 44px; height: 42px; background: none; border: none; color: var(--v5-text); cursor: pointer; display: flex; align-items: center; justify-content: center; } .v5-optionen, .v5-glocke { border-left: 1px solid var(--v5-linie); } .v5-vorlesen:hover, .v5-optionen:hover, .v5-glocke:not(.stumm):hover { color: var(--v5-akzent); } /* Glocke: Schraegstrich = Push aus; abonniert (Klasse "an") ohne Strich in Akzentfarbe; stumm = Geraet kann kein Push, nur der Tooltip erklaert das. */ .v5-glocke .v5-glocke-aus { color: var(--v5-text-leise); } .v5-glocke.an .v5-glocke-aus { display: none; } .v5-glocke.an { color: var(--v5-akzent); } .v5-glocke.stumm { opacity: 0.4; cursor: default; } .v5-optionen-karte { position: absolute; top: 66px; right: 70px; z-index: 70; width: min(320px, calc(100vw - 90px)); box-sizing: border-box; background: var(--v5-kachel); border: 1px solid var(--v5-linie); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07); padding: 14px 16px; } .v5-optionen-karte[hidden] { display: none; } /* Leiste in der Karte gestapelt: Beschriftung ueber dem Steuerelement, beide volle Breite, damit nichts ueber die Karte hinausragt (Joerg 28.08.2026); Schrift wie die uebrigen V5-Beschriftungen statt Folio-Mono. */ .v5-optionen-karte .nr-tts-settings { flex-direction: column; align-items: stretch; margin-top: 0; font-family: var(--nr-font-body); gap: 12px; } .v5-optionen-karte .nr-tts-settings label { flex-direction: column; align-items: stretch; gap: 5px; } .v5-optionen-karte .nr-tts-settings select, .v5-optionen-karte .nr-tts-settings input[type="range"] { width: 100%; max-width: 100%; box-sizing: border-box; } .v5-vorlesen.liest { color: var(--v5-akzent); } .v5-vorlesen.liest .v5-welle { animation: v5-wellen 1s ease-in-out infinite alternate; } .v5-vorlesen.stumm { opacity: 0.4; cursor: default; } @keyframes v5-wellen { from { opacity: 0.35; } to { opacity: 1; } } .v5-versteckt { display: none; } /* Daumen + Feedback-Dialog (.nr-daumen*, .nr-feedback-dialog) leben in nr-theme.css: Der Baustein gilt fuer beide Layouts, CSS nur hier waere im Kompakt-Layout lautlos wirkungslos (Falle 23.08.2026); --v5-akzent greift dort ueber den var()-Fallback. Hier nur die V5-Schaerfung: Bewertungs- Daumen im Dialog kantig. (Der Bordeaux-Hover ist seit dem Akzent-Flip vom 30.08.2026 redundant zu --nr-accent, bleibt aber als expliziter Wille.) */ .nr-v5 .nr-daumen-wahl { border-radius: 4px; border-color: var(--v5-linie); } .nr-v5 .nr-daumen-wahl:hover { border-color: var(--v5-akzent); color: var(--v5-akzent); } .nr-v5 .nr-daumen-wahl:has(input:focus-visible) { outline-color: var(--v5-akzent); } /* ============================================================ Zeitungskopf NUR Startseite: große Nameplate mit Datum, Meldungen, Lesezeit. Unterseiten tragen keinen Zeitungskopf (Joerg 29.08.2026); dort stehen wie im Kompakt-Layout nur Marke/Menue und die _zurueck-Zeile. */ .v5-kopf { padding: 64px var(--v5-rand) 18px; /* oben Platz fuer Wortmarke und Burger */ border-bottom: 3px double var(--v5-text); text-align: center; margin: 0 auto 26px; max-width: calc(var(--v5-spalten) * var(--v5-spalte) + (var(--v5-spalten) - 1) * var(--v5-luecke) + 2 * var(--v5-rand)); } .nr-v5 .v5-kopf h1 { font-family: var(--v5-serif); font-weight: 400; font-size: clamp(2.2rem, 4.6vw, 3.9rem); line-height: 1.02; margin: 0 0 12px; letter-spacing: -0.015em; color: var(--v5-text); } .v5-kopf-zeile { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 26px; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--v5-text-leise); } .v5-kopf-link { display: block; color: inherit; text-decoration: none; } /* Platz für den schwebenden Burger, damit er den Titel nicht überdeckt. */ @media (max-width: 700px) { .nr-v5 .v5-kopf { padding-top: 76px; } .v5-marke { padding: 0 8px 0 10px; } } /* Unterseiten tragen keinen Zeitungskopf (29.08.2026) — dort schafft der Seiteninhalt selbst den Abstand zur schwebenden Marke/Burger-Zeile. */ .nr-v5:not(:has(> .v5-kopf)) main { padding-top: 72px; } /* Landingpage im Magazin-Gewand (Joerg 29.08.2026): dieselbe Seite wie landing.html im Kompakt-Gewand, mit dem Kopf-Chrome der Portal-Startseite (schwebende Marke, Hoerbox, Burger — _landing_magazin_kopf.html); der v5-kopf behaelt sein Standard-Polster fuer die schwebende Zeile. */ /* !important: die Titel tragen Inline-Gewichte aus dem Kompakt-Gewand. Doppelklasse: muss die Sans-Regel ".nr-v5 .nr-metric" (Bedienflaechen ohne Serife) schlagen — die Landing-Abschnitte sind Blatt, keine Bedienflaeche. */ .nr-v5.nr-landing-v5 main h2 { font-family: var(--v5-serif); font-weight: 400 !important; letter-spacing: 0 !important; } .nr-landing-v5 main { padding-top: 0 !important; } /* ================================================================== Bänder */ .band { display: grid; grid-template-columns: repeat(var(--v5-spalten), 1fr); gap: var(--v5-luecke); align-items: stretch; /* alle Kacheln des Bandes gleich hoch */ margin-bottom: var(--v5-luecke); } /* Kein Kästchen: Ein gedrucktes Blatt trennt mit Weißraum und Haarlinien, nicht mit Rahmen. Die Ordnung tragen die Bandlinien. */ .kachel { grid-column: span var(--cs); background: var(--v5-kachel); /* Ressortfarbe jetzt an JEDER Kachel (Joerg 23.08.2026: fehlte bei manchen) — frueher nur ab b-3, schmale zeigten die Farbe nur im Kicker. Das "Konfetti"-Risiko aus dem urspruenglichen Verzicht bestand aus vielen verschiedenfarbigen SCHMALEN Kacheln nebeneinander; geprueft per Screenshot, nicht mehr aufgetreten. */ border-top: 2px solid var(--ressort-farbe, var(--v5-linie)); display: flex; min-width: 0; overflow: hidden; } .kachel.f-breit { flex-direction: row; } /* Bild links, Text rechts */ .kachel.f-schmal { flex-direction: column; } /* Bild oben, Text darunter */ .kachel-text { display: flex; flex-direction: column; padding: 14px 16px 12px; min-width: 0; flex: 1; } /* --- Bilder ------------------------------------------------------------- */ /* Wrapper traegt jetzt die Groesse (frueher direkt am ) — der Pflichthinweis "Symbolbild, KI-erzeugt" (#552) braucht eine Bezugsflaeche zum Positionieren. */ .kachel-bild-wrap { position: relative; background: var(--v5-bild-grund); flex: none; overflow: hidden; } .kachel-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* Kleines Abzeichen statt Fliesstext (Joerg 23.08.2026): grauer Kreis, 50% durchsichtig, weisse Schrift, unten rechts. */ .kachel-bild-hinweis { position: absolute; right: 6px; bottom: 6px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(90, 90, 90, 0.5); color: #FFFFFF; font-size: 9px; font-weight: 700; letter-spacing: 0.02em; pointer-events: none; } /* Bild links: über die volle Kachelhöhe, Breite folgt dem Seitenverhältnis und ist bei --v5-bild-deckel gedeckelt. In einer hohen Kachel füllt es so den Platz, den der kurze Text lässt — statt weißer Fläche. */ /* Bild links (viel Text): feste Breite, volle Kachelhöhe. Es spart Höhe, weil der Text neben ihm läuft. Beschnitten wird über object-fit, nicht verzerrt. */ .kachel.f-breit .kachel-bild-wrap { align-self: stretch; width: var(--v5-bild-deckel); height: auto; min-width: 130px; } /* Bild oben (wenig Text): nimmt die Höhe, die der Text übrig lässt — deshalb `flex: 1` statt einer festen Höhe. So bleibt kein weißer Rest. Gedeckelt (Joerg 23.08.2026, "Kachel für das Bild ist viel zu groß"): seit der Bildpool-Auffuellung (#552) hat fast jede Kachel ein Bild statt vorher knapp 60% — das treibt die Breitenrechnung (BILD_GEWICHT in layout.py) nach oben, kuerzere Texte lassen mehr Leerraum, den `flex: 1` bisher ungebremst fuellte. */ .kachel.f-schmal .kachel-bild-wrap { width: 100%; flex: 1 1 var(--v5-bild-hoehe); min-height: var(--v5-bild-hoehe); max-height: calc(var(--v5-bild-hoehe) * 1.4); height: auto; } /* --- Schrift ------------------------------------------------------------ */ .kachel-kicker { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ressort-farbe); margin-bottom: 7px; } .kachel h2 { font-family: var(--v5-serif); font-weight: 400; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 10px; font-size: var(--v5-titel-klein); /* Begrenzt, damit der Titel dem Text nicht den Platz nimmt. */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .kachel.b-2 h2 { font-size: 1.16rem; } .kachel.b-3 h2 { font-size: 1.28rem; } .kachel.b-4 h2 { font-size: var(--v5-titel-mittel); } .kachel.b-5 h2, .kachel.b-6 h2, .kachel.b-7 h2, .kachel.b-8 h2 { font-size: 1.75rem; } /* Der Aufmacher des ersten Bandes ist die lauteste Stimme der Seite. */ .band:first-of-type .kachel:first-child h2 { font-size: var(--v5-titel-gross); -webkit-line-clamp: 4; } .kachel p { margin: 0 0 12px; font-size: var(--v5-text-groesse); line-height: 1.55; color: var(--v5-text-weich); /* Kein Deckel und keine feste Zeilenzahl mehr: Die Höhe stimmt jetzt über die Breite (web/zeitungssatz/layout.py verteilt sie nach Textmenge). */ flex: 0 0 auto; /* Zeilenlänge deckeln: Ab etwa 80 Zeichen findet das Auge den Zeilenanfang nicht mehr. */ max-width: 68ch; overflow: hidden; } /* Breite Kacheln setzen den Text zweispaltig — Zeitschriftensatz statt einer sehr langen Zeile. */ .kachel.b-5 p, .kachel.b-6 p, .kachel.b-7 p, .kachel.b-8 p { column-count: 2; column-gap: 28px; max-width: none; } .kachel-fuss { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 0.78rem; } /* Bezahlschranken-Punkt im Quellen-Abzeichen — dieselben Farben wie in Ausgabe und Mail (pipeline/newsdispatcher/html_builder.py: pw-hard / pw-soft). */ .kachel-pw { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-left: 6px; } .kachel-pw.ist-hart { background: #C98A8A; } .kachel-pw.ist-quelle { background: #C89B6B; } .kachel-pw.ist-weich { background: #CDBE8A; } /* Bezahlschranken-Legende (#489) — ganz unten in der Ausgabe, derselbe Punkt wie am Quellen-Abzeichen, nur jetzt mit sichtbarem Text statt nur Tooltip. */ .zs-paywall-legende { font-size: 0.78rem; color: var(--v5-text-leise); line-height: 1.9; margin: 24px 0 0 0; } .zs-paywall-legende .kachel-pw { margin-left: 0; margin-right: 6px; } /* KI-Kennzeichnung (#436/#584) — letzter Block der Ausgabe, gesetzt wie die Legende darueber (in der Mail: .ki-hinweis in html_builder.py). */ .zs-ki-hinweis { font-size: 0.78rem; color: var(--v5-text-leise); line-height: 1.9; margin: 12px 0 0 0; } /* ===================================================== Bild- und Quellen-Links Das Bild führt zur ersten Quelle, die Quellen am Fuß sind die Links der Kachel (Joerg 23.08.2026) — deshalb sichtbar: Tinte, unterstrichen in der Ressortfarbe, beim Überfahren Ressortfarbe. */ /* Bild verlinkt, aber ohne Hover-Effekt (Joerg 23.08.2026: erst einmal ohne). */ a.kachel-bild-wrap { display: block; cursor: pointer; } .kachel-quelle { display: inline-flex; align-items: center; height: 24px; padding: 0 7px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1; color: var(--v5-text); border: 1px solid var(--v5-text-leise); text-decoration: none; background: var(--v5-kachel); transition: border-color 120ms, color 120ms; } .kachel-quelle:hover { border-color: var(--ressort-farbe, var(--v5-akzent)); color: var(--ressort-farbe, var(--v5-akzent)); } .kachel-quelle:focus-visible { outline: 2px solid var(--ressort-farbe, var(--v5-akzent)); outline-offset: 2px; } /* ============================ Mitteilungen und Quellenliste als Kacheln "In eigener Sache" und "Quellen dieser Ausgabe" tragen fertiges HTML statt Fliesstext (Joerg 23.08.2026: wie die anderen Artikel setzen). Die Quellenliste groesser, sie ist Bedienelement (bevorzugen/ausschliessen), kein Kleingedrucktes. */ .kachel-html { font-size: var(--v5-text-groesse); line-height: 1.55; color: var(--v5-text-weich); max-width: none; } .kachel-html p { margin: 0 0 10px; } .kachel-html ul { margin: 0 0 10px; padding-left: 1.2em; } .kachel-html li { margin-bottom: 4px; } .kachel-html a { color: var(--v5-text); } .kachel-html h3 { font-family: var(--v5-serif); font-weight: 400; font-size: 1.15rem; margin: 12px 0 6px; color: var(--v5-text); } .kachel.ist-mitteilung .kachel-html, .kachel.ist-quellen .kachel-html { column-count: 1; } .kachel.b-5.ist-mitteilung .kachel-html, .kachel.b-6.ist-mitteilung .kachel-html, .kachel.b-7.ist-mitteilung .kachel-html, .kachel.b-8.ist-mitteilung .kachel-html { column-count: 2; column-gap: 28px; } /* Quellen als Abzeichen wie das Beta-Label (Joerg 23.08.2026): Rahmen, Versalien, gesperrt — in der Quellenliste und am Fuss jeder Kachel. Die "·"-Trenner zwischen den Quellen sind Textknoten und verschwinden ueber font-size 0 am Absatz; die Abzeichen bekommen ihre Groesse zurueck. */ .kachel.ist-quellen .kachel-html.edition-content .quellen-summary { font-size: 0; line-height: 1; column-count: 1; max-width: none; display: flex; flex-wrap: wrap; gap: 8px 8px; } .v5-abzeichen, .kachel.ist-quellen .edition-content .quellen-summary [data-feed-id] { display: inline-flex; align-items: center; height: 24px; padding: 0 7px; font-family: var(--v5-sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1; color: var(--v5-text); border: 1px solid var(--v5-text-leise); cursor: pointer; text-decoration: none; background: var(--v5-kachel); transition: background 120ms, border-color 120ms, color 120ms; } /* !important gegen nr-theme.css Z. 895 (.edition-content .read-more ist dort !important mute-grau) — sonst bleibt die Abzeichen-Schrift in jedem Zustand grau, auch auf der Bordeaux-Flaeche (Joerg 28.08.2026). */ .kachel.ist-quellen .edition-content .quellen-summary .read-more { color: inherit !important; text-decoration: none; border: none; padding: 0; } .v5-abzeichen:hover, .kachel.ist-quellen .edition-content .quellen-summary [data-feed-id]:hover, .kachel.ist-quellen .edition-content .quellen-summary [data-feed-id].nr-src-active { border-color: var(--ressort-farbe, var(--v5-akzent)); color: var(--ressort-farbe, var(--v5-akzent)); } /* Bevorzugt = Auszeichnung, nicht Invertierung (Joerg 28.08.2026): Fuellung im Stern-Gold wie die ueblichen Sternchen-Markierungen im Web (Joergs Wahl statt Bordeaux; bewusst NICHT Ressortfarbe, damit dieselbe Quelle ueberall gleich aussieht) plus Stern als zweites Merkmal neben der Farbe. Hover darauf dunkelt die Flaeche Richtung Tinte ab. */ .kachel.ist-quellen .edition-content .quellen-summary [data-feed-id].nr-src-preferred { border-color: var(--v5-stern); background: var(--v5-stern); color: var(--v5-stern-tinte); } .kachel.ist-quellen .edition-content .quellen-summary [data-feed-id].nr-src-preferred::before { content: "\2605"; margin-right: 5px; font-size: 0.85em; } .kachel.ist-quellen .edition-content .quellen-summary [data-feed-id].nr-src-preferred:hover, .kachel.ist-quellen .edition-content .quellen-summary [data-feed-id].nr-src-preferred.nr-src-active { border-color: color-mix(in srgb, var(--v5-stern) 85%, var(--v5-stern-tinte)); background: color-mix(in srgb, var(--v5-stern) 85%, var(--v5-stern-tinte)); color: var(--v5-stern-tinte); } .kachel.ist-quellen .edition-content .quellen-summary [data-feed-id].nr-src-removed { opacity: 0.55; border-color: var(--v5-linie); } .kachel.ist-quellen .edition-content .quellen-summary [data-feed-id].nr-src-removed .read-more { text-decoration: line-through; } .kachel.ist-quellen .edition-content .nr-src-hint { font-size: 0.95rem; line-height: 1.5; color: var(--v5-text-weich); margin: 0 0 12px; } /* Alle Absaetze der Quellen-Kachel einspaltig — .kachel.b-8 p setzt sonst zwei Spalten, und der Hinweistext bricht mitten im Satz (Joerg 23.08.2026). */ .kachel.ist-quellen p, .kachel.b-8.ist-quellen p, .kachel.b-7.ist-quellen p, .kachel.b-6.ist-quellen p, .kachel.b-5.ist-quellen p { column-count: 1; max-width: none; } /* Dieselbe Falle bei Mitteilungs-Kacheln (Magazin-Landing 29.08.2026): die Spalten setzt dort .kachel-html — .kachel.b-5 p spaltete jede Spalte nochmals, der Text stand in vier unlesbaren Schmalsaeulen. */ .kachel.ist-mitteilung p, .kachel.b-8.ist-mitteilung p, .kachel.b-7.ist-mitteilung p, .kachel.b-6.ist-mitteilung p, .kachel.b-5.ist-mitteilung p { column-count: 1; max-width: none; } /* Anmelde-Kachel der Magazin-Landing: fuellt die Aufmacher-Hoehe (UI/UX-Review 29.08.2026: ~200px Leere unter der Karte) — hoeheres Bild, Formularblock unten buendig. Als Abo-Kasten gerahmt (Joerg 29.08.: "Login faellt kaum noch auf"): Tinte-Rahmen + getoente Flaeche heben ihn aus den Artikeln. */ .kachel.ist-anmelden { /* Bordeaux statt Tinte (Joerg 29.08.: der Tinte-Rahmen mit schwarzem Knopf "sieht aus wie eine Todesanzeige") — die warme Magazin-Akzentfarbe hebt die Kachel, ohne nach Anzeige auszusehen; Flaeche leicht mitgetoent. */ border: 2px solid var(--v5-akzent); background: color-mix(in srgb, var(--v5-akzent) 6%, var(--nr-paper)); } .nr-v5 .kachel.ist-anmelden .nr-btn.accent { background: var(--v5-akzent); border-color: var(--v5-akzent); color: var(--nr-paper); } .nr-v5 .kachel.ist-anmelden .nr-btn.accent:hover { background: color-mix(in srgb, var(--v5-akzent) 80%, var(--nr-ink)); border-color: color-mix(in srgb, var(--v5-akzent) 80%, var(--nr-ink)); } /* Bildfenster hoch statt quer (Joerg 29.08.: die Rakete ist Hochformat, im 210px-Querstreifen war nur Rauch zu sehen) und Ausschnitt auf die Rakete. */ .kachel.ist-anmelden.f-schmal .kachel-bild-wrap { height: 340px; } .kachel.ist-anmelden .kachel-bild { object-position: 50% 18%; } .kachel.ist-anmelden .kachel-html, .kachel.ist-anmelden #anmelden { flex: 1; display: flex; flex-direction: column; } .kachel.ist-anmelden #anmelden form { margin-top: auto; } /* Aufmacher der Magazin-Landing: das Motiv (Smartphone + Tasse) sitzt unten links im Querbild — den Hochkant-Ausschnitt dorthin legen statt auf die leere Holzflaeche darueber (UI/UX-Review 29.08.2026). */ .nr-landing-v5 .band[data-band="0"] .kachel.f-breit .kachel-bild { object-position: 25% 78%; } /* Landing-Artikel IMMER einspaltig (Joerg 29.08.: bei schmalem Fenster brach der Aufmacher zweispaltig, "vielleicht auch generell" — generell). Steht nach den b-5/b-6-Zweispaltenregeln und gewinnt ueber die Reihenfolge. */ .nr-landing-v5 .kachel.ist-mitteilung .kachel-html { column-count: 1; } @media (max-width: 1150px) { .kachel.ist-mitteilung .kachel-html { column-count: 1; } } @media (max-width: 700px) { .kachel-html { order: 4; padding: 0 16px; } } /* ==================================== Fremde Bilder: gleichmaessig unscharf Ein Herausgeber-Bild ist ein Zitat, kein Nachdruck (Joerg 23.08.2026): leichter Blur gleichmaessig uebers ganze Bild (Joerg 29.08.2026); das leichte Vergroessern versteckt den ausgefransten Blur-Rand. Eigene Bildpool-Bilder (ohne .ist-fremd) bleiben ganz scharf. Gemessen wird am Bild-Rahmen selbst (Container-Abfrage), nicht an der Kachelbreite: kleine Rahmen sind schon Vorschaubild-Format und bleiben scharf. */ .kachel-bild-wrap.ist-fremd { container-type: size; } @container (min-width: 200px) { .kachel-bild-wrap.ist-fremd .kachel-bild { filter: blur(1px); transform: scale(1.03); } } /* ================================================ Unter den Bändern Mitteilungen, Quellenliste, Vorlese-Player, Feedback, Türen — in der Lesespalte, mit Abstand zum letzten Band. */ .v5-unter-den-baendern { margin-top: 2.5rem; } /* ============================================ Unterseiten im Zeitungsgewand Die Komponenten aus nr-theme.css bleiben im Markup; hier bekommen sie Haarlinie, Tintenkante und Serif, sonst nichts. Serif nur oben in der Leiter (Seitentitel, Abschnittsüberschrift, Kennzahl) — Zwischentitel und Beschriftungen bleiben Sans in Versalien, wie der Kachel-Kicker. Das Mono der Folio-Beschriftungen ist das zweite Folio-Merkmal und geht raus. */ /* Bedienflaechen ohne Serife (Joerg 28.08.2026, loest die Blattkritik-Regel "Serif oben in der Leiter" vom 23.08. ab): Die Serife gehoert dem Blatt, also Zeitungskopf (.v5-kopf h1, eigene Regel oben) und Ausgabe-Kacheln. Seitentitel, Kennzahlen (Guthaben), Optionsschalter, Dialoge sind Sans. */ .nr-v5 h1, .nr-v5 h2, .nr-v5 .nr-display-title, .nr-v5 .nr-heading, .nr-v5 .nr-metric { font-family: var(--nr-font-body); font-weight: 600; letter-spacing: 0; } .nr-v5 h1 { font-size: 1.75rem; } .nr-v5 .nr-section, .nr-v5 .nr-label, .nr-v5 .nr-source, .nr-v5 .nr-status, .nr-v5 .nr-badge, .nr-v5 .nr-chip, .nr-v5 .nr-btn-label-mono, .nr-v5 .nr-mono { font-family: var(--nr-font-body); } .nr-v5 .nr-section { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; color: var(--nr-ink); } .nr-v5 .nr-label { font-size: 0.7rem; letter-spacing: 0.1em; } .nr-v5 .v5-kopf .nr-beta-zeile { margin-top: 10px; } .nr-v5 .nr-beta-zeile .nr-badge { display: inline-flex; align-items: center; height: 24px; padding: 0 7px; margin: 0; box-sizing: border-box; line-height: 1; } .nr-v5 .nr-badge-schalter:hover { background: transparent; border-color: var(--v5-akzent); color: var(--v5-akzent); } .nr-v5 .nr-badge-schalter.ist-aktiv, .nr-v5 .nr-badge-schalter.ist-aktiv:hover { background: var(--v5-akzent); border-color: var(--v5-akzent); color: var(--nr-paper); } /* Panel = Kachel: weiß, Haarlinie, Tintenkante oben. Ressortfarbe nur, wo eine existiert (--ressort-farbe), Profil und Konto haben keine. */ .nr-v5 .nr-panel { background: var(--nr-paper-2); border: 1px solid var(--nr-line); /* Ressortkasten-Kante; ohne Ressortfarbe Bordeaux statt Tinte (Joerg 30.08.2026: keine schwarze Akzentfarbe). */ border-top: 2px solid var(--ressort-farbe, var(--nr-accent)); border-radius: 0; } .nr-v5 .nr-panel-inner { background: var(--nr-paper); border: 1px solid var(--nr-line); border-radius: 0; } .nr-v5 .nr-card { background: var(--nr-paper-2); border-radius: 0; } /* Knöpfe leicht gerundet (Joerg 26.08.2026: nicht extrem eckig); kein Anheben. primary/accent kommen seit dem 30.08.2026 schon aus nr-theme.css in Akzentfarbe (Bordeaux) — hier nur noch: kein Transform, Hover dunkelt ab (Joerg 30.08.: nirgendwo komplett schwarze oder weisse Knoepfe). */ .nr-v5 .nr-btn { /* Hellgrau statt reinem Weiss (Joerg 30.08.2026: keine weissen Schalter) — dieselbe Mischtechnik wie im Kompakt-Layout, etwas kraeftiger, weil die Knoepfe hier oft auf weissen Panels stehen. Traegt beide Themes. */ border-radius: 4px; background: color-mix(in srgb, var(--nr-ink) 9%, var(--nr-paper-2)); border-color: var(--nr-line-strong); font-weight: 600; letter-spacing: 0.02em; transition: background 120ms, border-color 120ms, color 120ms; } .nr-v5 .nr-btn:hover { background: var(--nr-paper); border-color: var(--v5-akzent); color: var(--v5-akzent); } /* Wiederholung der nr-theme-Werte noetig: .nr-v5 .nr-btn (Zeile darueber) hat dieselbe Spezifitaet wie .nr-btn.primary und gewinnt sonst per Reihenfolge — der Knopf wuerde weiss auf weiss (Sichtpruefung 30.08.2026). */ .nr-v5 .nr-btn.primary, .nr-v5 .nr-btn.accent { background: var(--nr-accent); border-color: var(--nr-accent); color: var(--nr-paper); } .nr-v5 .nr-btn.primary:hover, .nr-v5 .nr-btn.accent:hover { transform: none; --v5-knopf-hover: color-mix(in srgb, var(--nr-accent) 82%, var(--nr-ink)); background: var(--v5-knopf-hover); border-color: var(--v5-knopf-hover); color: var(--nr-paper); } /* App-Knopf der Landing-Kachel: Display-Blau statt Tinte (Joerg 29.08., "welche Akzentfarbe haette ein Handy?") — festes Paar fuer beide Themes, weil der Knopf seine eigene Flaeche mitbringt. */ .nr-v5 .nr-btn.accent.nr-btn-app { background: #3E6B8C; border-color: #3E6B8C; color: #fff; } .nr-v5 .nr-btn.accent.nr-btn-app:hover { background: #2F5570; border-color: #2F5570; color: #fff; } .nr-v5 .nr-btn.danger { background: transparent; color: var(--nr-error); border-color: var(--nr-error); } .nr-v5 .nr-btn.ghost { border-color: transparent; background: transparent; } /* Hinweise, Chips, Badges */ .nr-v5 .nr-notice { background: var(--nr-paper-2); border: 1px solid var(--nr-line); border-left: 3px solid var(--nr-line); border-radius: 0; } /* Kante ausdruecklich wiederholen: .nr-v5 .nr-notice (Zeile darueber) schlaegt .nr-notice.accent aus nr-theme.css per Reihenfolge. Bordeaux statt der frueheren Tinte-Kante (30.08.2026, „keine schwarze Akzentfarbe"). */ .nr-v5 .nr-notice.accent { border-left-color: var(--nr-accent); } .nr-v5 .nr-notice.warn { border-left-color: var(--nr-warn); } .nr-v5 .nr-alert { border-radius: 0; } .nr-v5 .nr-chip, .nr-v5 .nr-badge { border-radius: 4px; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; border-color: var(--nr-line-strong); color: var(--nr-ink-soft); } .nr-v5 .nr-chip.accent { background: transparent; border: 1px solid var(--nr-accent); color: var(--nr-accent); } .nr-v5 .nr-chip.solid { background: var(--nr-ink); color: var(--nr-paper); } .nr-v5 .nr-status.is-ok, .nr-v5 .nr-message.is-ok { color: var(--f-gruen); } /* Felder: Haarlinie, Fokus als Bordeaux-Ring (bis 30.08.2026 Tintenring — gefallen mit „keine schwarze Akzentfarbe"). */ .nr-v5 .nr-input, .nr-v5 .nr-select, .nr-v5 .nr-textarea, .nr-v5 .nr-wert, .nr-v5 textarea { border: 1px solid var(--nr-line-strong); border-radius: 0; background: var(--nr-input-bg); } .nr-v5 .nr-input:focus, .nr-v5 .nr-select:focus, .nr-v5 .nr-textarea:focus, .nr-v5 textarea:focus { border-color: var(--nr-accent); box-shadow: 0 0 0 1px var(--nr-accent); outline: none; } .nr-v5 .nr-toast, .nr-v5 dialog, .nr-v5 .nr-lang-menu, .nr-v5 .nr-audio-player { border-radius: 0; } /* Fusszeile im Zeitungsgewand (Joerg 29.08.2026): Papier und Tinte statt der dunklen Masthead-Leiste des Kompakt-Layouts — die Trennung der beiden Designs endet nicht ueber dem Fuss. Links in leiser Tinte, Hover im Akzent. Das py-4 der Komponente ist eine Tailwind-Utility und traegt hier, weil base.html Tailwind laedt. */ .nr-v5 footer.nr-masthead-bar { background: var(--nr-paper); border-top: 1px solid var(--nr-line); } .nr-v5 .nr-masthead-footer-item { color: var(--v5-text-leise); opacity: 1; } .nr-v5 a.nr-masthead-footer-item:hover { color: var(--v5-akzent); opacity: 1; } .nr-v5 .nr-footer-marke > * { opacity: 1; } .nr-v5 .nr-footer-marke a { color: var(--v5-text-leise); } .nr-v5 .nr-footer-marke a:hover { color: var(--v5-akzent); opacity: 1; } /* =============================================================== Responsiv Die Bandaufteilungen aus layout.py sind für acht Spalten gerechnet. Statt sie auf mittleren Breiten umzurechnen (dabei brachen Zeilen auf und ließen halb leere Reihen stehen), schrumpft das Achterraster über --v5-spalte mit. Erst wenn eine Spalte zu schmal für Text wird, gehen alle Kacheln auf dieselbe Breite — dann fluchtet wieder alles. =========================================================================== */ @media (max-width: 1150px) { .nr-v5 { --v5-spalten: 4; --v5-spalte: 1fr; --v5-luecke: 18px; } .kachel { grid-column: span 2; } /* zwei je Zeile, immer aufgehend */ .kachel.b-6, .kachel.b-7, .kachel.b-8 { grid-column: span 4; } /* Steht die letzte Kachel eines Bandes allein in ihrer Zeile, füllt sie die Breite — statt eine halbe Zeile Papier stehen zu lassen. */ .band > .kachel:last-child:nth-child(odd) { grid-column: span 4; } /* Media Queries erhöhen die Spezifität nicht — der Rücksetzer muss die Breiten-Klassen selbst nennen, sonst bleibt der Zweispaltensatz stehen. */ .kachel p, .kachel.b-5 p, .kachel.b-6 p, .kachel.b-7 p, .kachel.b-8 p { column-count: 1; max-width: 68ch; } /* Bild über den Text: neben einer 9 Zeichen breiten Textsäule ist kein Satz. */ .kachel.f-breit { flex-direction: column; } .kachel.f-breit .kachel-bild-wrap { width: 100%; height: var(--v5-bild-hoehe); aspect-ratio: auto; align-self: stretch; } .band:first-of-type .kachel:first-child h2 { font-size: 1.8rem; -webkit-line-clamp: 4; } } /* Handy (Joerg 23.08.2026): eine Spalte, Kacheln untereinander, und das Bild steht NICHT über dem Ressort, sondern unter der Überschrift — Ressort, Titel, Bild, Text, Quelle. Gemessen am 23.08. bei 390 px: Vorher lief die Seite rechts über den Rand, weil der Alleinsteher-Rücksetzer aus dem 1150er-Block (span 4, höhere Spezifität) im Einspaltenraster vier implizite Spalten aufmachte. */ @media (max-width: 700px) { .nr-v5 { --v5-spalten: 1; --v5-rand: 16px; --v5-luecke: 14px; } .band { grid-template-columns: minmax(0, 1fr); } .kachel, .kachel.b-2, .kachel.b-3, .kachel.b-4, .kachel.b-5, .kachel.b-6, .kachel.b-7, .kachel.b-8, .band > .kachel:last-child:nth-child(odd) { grid-column: span 1; } .kachel, .kachel.f-breit, .kachel.f-schmal { flex-direction: column; } /* Die Textgruppe löst sich auf, damit das Bild zwischen Ressort und Titel rücken kann (Joerg 23.08.2026: Bild über dem Titel, wie am Schreibtisch; das Ressort bleibt die erste Zeile — Joerg 23.08.: Bild nicht über dem Ressort); die Innenabstände wandern auf die Kinder. */ .kachel-text { display: contents; } .kachel-kicker { order: 1; padding: 14px 16px 0; margin-bottom: 6px; } .kachel h2, .kachel.b-2 h2, .kachel.b-3 h2, .kachel.b-4 h2, .kachel.b-5 h2, .kachel.b-6 h2, .kachel.b-7 h2, .kachel.b-8 h2, .band:first-of-type .kachel:first-child h2 { order: 3; padding: 0 16px; margin-bottom: 8px; font-size: 1.22rem; -webkit-line-clamp: 4; } /* Joerg 23.08.2026, "Kachel für das Bild ist viel zu groß": bei 390px Breite ergab aspect-ratio 16:9 auf volle Breite ~219px Höhe — optisch gleich groß wie der Textblock. 140px lässt das Bild ein Blickfang bleiben, nicht das halbe Handydisplay einnehmen. */ .kachel-bild-wrap, .kachel.f-breit .kachel-bild-wrap, .kachel.f-schmal .kachel-bild-wrap { order: 2; width: 100%; height: auto; min-width: 0; min-height: 0; flex: none; align-self: auto; aspect-ratio: 16 / 9; max-height: 140px; margin: 8px 0 10px; } .kachel p, .kachel.b-5 p, .kachel.b-6 p, .kachel.b-7 p, .kachel.b-8 p { order: 4; padding: 0 16px; column-count: 1; max-width: none; } .kachel-fuss { order: 5; padding: 0 16px 14px; margin-top: 6px; } } /* ============================ Dialoge und Teilen im Zeitungsgewand Bordeaux-Oberkante und Bordeaux-Bestaetigen-Knopf der Dialoge kommen seit dem 30.08.2026 direkt aus nr-theme.css (Akzent-Token, gilt fuer beide Layouts) — hier bleibt nur, was das Magazin allein betrifft: der Schleier. */ /* Schleier Variante B (Joerg 30.08.2026, Vergleich in docs/review/): warme Tinte statt Schwarz, leichter Weichzeichner — das Magazin schimmert durch. */ .nr-v5 dialog.nr-confirm::backdrop, .nr-v5 .nr-feedback-dialog::backdrop { background: rgba(22, 19, 14, 0.30); backdrop-filter: blur(2px); } /* Teilen je Meldung (#203) sitzt im Magazin in der Quellenzeile der Kachel, rechtsbuendig in der Groesse der Quell-Abzeichen (portal-home.js haengt den Knopf dort ein). Farben nach der einen Hover-Regel: leise Tinte, unter der Maus die Ressortfarbe der Kachel. */ .nr-v5 .nr-share-btn { color: var(--v5-text-leise); } .nr-v5 .nr-share-btn:hover { color: var(--ressort-farbe, var(--v5-akzent)); opacity: 1; } .kachel-fuss .nr-share-btn { float: none; margin: 0 0 0 auto; padding: 2px; } .kachel-fuss .nr-share-btn svg { width: 16px; height: 16px; }