/* ── FALLBACK-SCHRIFT OHNE SPRUNG ────────────────────────────────────
   Arial wird so gestaucht/gedehnt, dass sie exakt so viel Platz braucht
   wie Nunito Sans. Dadurch verschiebt sich beim Nachladen nichts mehr —
   die Zeilen sitzen von der ersten Millisekunde an richtig.
   size-adjust ist der Startwert: nachmessen und ggf. um 1 % nachziehen,
   bis eine lange Schlagzeile in beiden Schriften gleich breit endet. */
@font-face {
    font-family: 'Nunito Fallback';
    src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
    size-adjust: 103%;
    ascent-override: 101%;
    descent-override: 35%;
    line-gap-override: 0%;
}

/* Newsoida — Feed-Stile. Ausgelagert aus newsoida-engine.php am 27.08.2026.
   Unveraendert uebernommen. Eingebunden von newsoida-engine.php, nur auf
   Seiten mit dem Shortcode [rss_ranker] - genau wie vorher. */

        /* ── MARKEN-TOKENS: NICHT HIER ────────────────────────────────────
           --nso-mark-mein, --nso-mark-all, --nso-logo-mein und
           --nso-wordmark-mein werden ausschliesslich in newsoida-engine.php
           gesetzt (Block „MARKEN-TOKENS — EINZIGE QUELLE", wp_head Prioritaet
           0). Dort steht auch, welche Fassung auf welchem Untergrund gilt.

           Bis 29.08.2026 standen dieselben Dateinamen zusaetzlich hier, in
           „Mein Settings" und in „Mein Darkmode". Welche Kopie gewann, hing
           an der Ladereihenfolge — zweimal sind dadurch nach einem verlorenen
           Snippet still die falschen Zeichen erschienen. Hier bitte nichts
           mehr deklarieren; var(--nso-mark-*) benutzen genuegt. */

        /* ── CONTROL TOKENS — resting + hover for every header control ──────
           Day keeps the outlined look; dark follows the main feed header:
           filled darker green at rest, brighter on hover, plus the glow.
           Change a value here and every pill, link and toggle follows. */
        :root {
            --nso-dur: .3s;
            --nso-ease: ease-in-out;
            --nso-glow: 0 0 8px rgba(0,138,94,0.15);
            --nso-ctl-bg: transparent;
            --nso-ctl-border: #008a5e;
            --nso-ctl-fg: #008a5e;
            --nso-ctl-bg-hover: #EAF2EE;
            --nso-ctl-border-hover: #008a5e;
            --nso-ctl-fg-hover: #008a5e;
            /* Two weights: pills keep 2px everywhere; the fields (dropdowns,
               search, sliding bars) go heavier in dark, where they sit on a
               near-identical green and the line is all that separates them. */
            --nso-ctl-bw: 1px;
            --nso-field-bw: 1px;
            /* Mobile: no hover exists, so state is carried by the fill — the
               same chips the main feed header already uses. */
            --nso-chip-bg: #D5E5DD;
            --nso-chip-fg: #0A1F14;
            --nso-chip-bg-onpage: #EAF2EE;
        }
        /* Dark: outlined controls keep their background and only brighten, like
           the search field and the sliding bar. Resting sits on the darker
           green so the hover has somewhere to brighten TO — with the bright
           green at rest there was nothing left to react with. */
        body.dark-mode {
            --nso-glow: 0 0 6px rgba(0,150,103,0.4);
            --nso-ctl-bg: transparent;
            --nso-ctl-border: #007550;
            /* Label colour matches the sliding bar: light at rest, brighter on
               hover. Green-on-dark was the visibility problem. */
            --nso-ctl-fg: #D5E5DD;
            --nso-ctl-bg-hover: transparent;
            --nso-ctl-border-hover: #008a5e;
            --nso-ctl-fg-hover: #EAF2EE;
            --nso-ctl-bw: 2px;
            --nso-field-bw: 2px;
            --nso-chip-bg: #005A3F;
            --nso-chip-fg: #D5E5DD;
            --nso-chip-bg-onpage: #005A3F;
        }

		/* Begrüßungskarte mit Testangebot. Der obere Teil ist wegklickbar,
           der untere bleibt: das Angebot soll auch beim vierten Besuch noch
           dastehen, wenn jemand sich entschieden hat. */
        .nso-intro { position: relative; max-width: 670px; margin: 14px auto 0;
            padding: 9px 14px; border-radius: 8px; border: 1px solid #008a5e; }
        .nso-intro.nso-intro-full { padding: 14px 16px 12px; background: #D5E5DD; }
        body.dark-mode .nso-intro { border-color: #007550; }
        body.dark-mode .nso-intro.nso-intro-full { background: #004731; }
        .nso-intro-top { position: relative; text-align: center;
            padding: 0 26px; }
        .nso-intro-head { font-size: 14px; font-weight: 800; color: #008a5e;
            margin: 0 0 6px; }
        .nso-intro-body { font-size: 12px; line-height: 1.6; color: #455E51; }
        body.dark-mode .nso-intro-body { color: #D5E5DD; }
        .nso-intro-link { display: inline-block; margin-top: 8px; font-size: 12px;
            font-weight: 700; color: #008a5e; text-decoration: underline; }
        @media (hover: hover) { .nso-intro-link:hover { color: #007550; } }
        body.dark-mode .nso-intro-link { color: #D5E5DD; }
        .nso-intro-x { position: absolute; top: -4px; right: -18px;
            background: transparent; border: none; cursor: pointer;
            line-height: 0; color: #008a5e; padding: 6px;
            transition: color var(--nso-dur) var(--nso-ease); }
        @media (hover: hover) { .nso-intro-x:hover { color: #007550; } }
        body.dark-mode .nso-intro-x { color: #D5E5DD; }
        @media (max-width: 768px) {
            .nso-intro-head { font-size: 15px; }
            .nso-intro-body { font-size: 13px; }
        }

		
        /* ── FEED COUNTER ── */
        #feed-counter-text { transition: opacity 0.2s ease; }
        #feed-counter { position: relative; z-index: 1; }

        /* ── WEITERE QUELLEN BADGE ── */
        .rss-weitere-badge {
            display: inline-block;
            font-size: 10px;
            font-weight: 700;
            color: #597868;
            background: transparent;
            border: 1px solid #597868;
            border-radius: 4px;
            padding: 1px 6px;
            letter-spacing: 0.3px;
        }
        body.dark-mode .rss-weitere-badge {
            background: transparent;
            color: #87A696;
            border: 1px solid #87A696;
        }

     /* ── SOURCE-NAME FREQUENCY LABEL ("Aktualisiert ca. …") ── */
        .rss-src-freq { display: inline-block; font-size: 10px; font-weight: 700; color: #EAF2EE; background: #597868; border-radius: 4px; padding: 1px 6px; letter-spacing: 0.3px; white-space: nowrap; }
       body.dark-mode .rss-src-freq { background: #87A696; color: #143325 !important; -webkit-text-fill-color: #143325 !important; border: none !important; }
		/* Frequenz ist Kontext, keine Auszeichnung: gleiche Schrift und Farbe
           wie die Zeitangabe daneben, keine Blase. Blasen bleiben den Zahlen
           vorbehalten, nach denen sortiert werden kann. */
        .rss-freq-inline { display: inline-flex; align-items: center; gap: 4px;
            font-size: 11px; font-weight: bold; color: #597868;
            white-space: nowrap; }
        .rss-freq-inline svg { display: block; flex: 0 0 auto; }
        body.dark-mode .rss-freq-inline { color: #87A696; }
		.rss-sender { font-size: 11px; font-weight: bold; color: #597868; }
        body.dark-mode .rss-sender { color: #87A696; }
        /* ── OTSESSEAUSSENDUNGEN ── */
        .rss-card[data-cat*="ots"] { border-left-color: #508796 !important; background-color: #D5E5DD !important; }
        body:not(.dark-mode) .rss-card[data-cat*="ots"] { background-color: #D5E5DD !important; }
        body.dark-mode .rss-card[data-cat*="ots"] { background-color: #004731 !important; border-left-color: #508796 !important; }
        body.dark-mode .rss-card[data-cat*="ots"]:active { background-color: #005A3F !important; }
        .dropdown-item[onclick*="'behoerden'"] { border-left: 4px solid #7A7A72; background-color: transparent; color: #636346 !important; font-weight: bold; }
        .dropdown-item[onclick*="'behoerden'"]:hover { background-color: #D5E5DD; color: #007550 !important; }
        body:not(.dark-mode) .dropdown-item[onclick*="'behoerden'"] { color: #636346 !important; font-weight: bold !important; }
        .dropdown-item[onclick*="'ots'"] { border-left: 4px solid #508796; background-color: transparent; color: #2F6A7A !important; font-weight: bold; }
        .dropdown-item[onclick*="'ots'"]:hover { background-color: #D5E5DD; color: #007550 !important; }
        body:not(.dark-mode) .dropdown-item[onclick*="'ots'"] { color: #2F6A7A !important; font-weight: bold !important; }
        .rss-ots-badge {
            font-size: 11px;
            font-weight: bold;
            color: #143325;
            background: none !important;
            border: none !important;
            padding: 0 !important;
        }
        body.dark-mode .rss-ots-badge {
            color: #D5E5DD !important;
            -webkit-text-fill-color: #D5E5DD !important;
            background: none !important;
            border: none !important;
        }

        html { scroll-behavior: smooth; }
        body { margin-top: 0 !important; padding-top: 0 !important; }
        .wp-site-blocks { padding-top: 0 !important; margin-top: 0 !important; }
        body.admin-bar { margin-top: 0 !important; }
        html, body, #page, #wrapper, .site, .site-content, .entry-content, header, .site-header, #masthead { margin-top: 0 !important; padding-top: 0 !important; overflow: visible !important; height: auto !important; }
        header.site-header, #masthead, .site-header, #site-header, #header, .header, #branding,
        .wp-block-template-part[class*='header'],
        header.wp-block-template-part,
        .wp-site-blocks > header,
        .wp-site-blocks > .wp-block-template-part:first-child { height: 0 !important; min-height: 0 !important; max-height: 0 !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; border: none !important; display: block !important; }
        /* Several elements are full-bleed via `width: 100vw` — the mobile header,
           the footer divider. `vw` counts the scrollbar but the visible viewport
           does not, so each of them overhangs by the scrollbar width and the page
           drifts sideways. `clip` removes the overhang WITHOUT creating a scroll
           container, so position:sticky keeps working (hidden/auto would break
           it). Applies at every width: the footer divider does this on desktop
           too, which is the "half a centimetre" of side-to-side movement. */
        html, body { overflow-x: clip !important; overflow-y: visible !important; }
        .entry-content, .site-content, #content, #primary, main, .wp-block-group, article { padding-top: 0 !important; margin-top: 0 !important; }
        .entry-content > p:first-child, .entry-content > div:first-child { margin-top: 0 !important; padding-top: 0 !important; }
        .entry-content > p:empty, .entry-content > p:first-child:not(:has(*)) { display: none !important; }
        @media (max-width: 768px) {
            .entry-content, .site-content, #content, #primary, main, .wp-block-group, article { padding-top: 0 !important; margin-top: 0 !important; }
            .entry-content > p:first-child, .entry-content > div:first-child { margin-top: 0 !important; padding-top: 0 !important; }
            .entry-content > p:empty, .entry-content > p:first-child:not(:has(*)) { display: none !important; }
        }
        * { -webkit-tap-highlight-color: transparent; }
        .rss-main-wrapper { width: 100%; font-family: 'Nunito Sans', 'Nunito Fallback', Arial, sans-serif; position: relative; -webkit-tap-highlight-color: transparent; }
        @media (min-width: 769px) {
            /* Exactly the header height, so the first card sits right beneath it.
               The two views have different header heights. */
            .rss-main-wrapper { padding-top: 98px; }
            .rss-main-wrapper.nso-mein-wrap { padding-top: 82px; }
        }
        @media (max-width: 768px) {
            /* Ensure sticky works on mobile header */
            /* Deliberately a NARROW list. It was once widened to the block-theme
               wrappers to rescue sticky on the Mein page — but that removed an
               overflow-x guard the theme relies on, which let the page scroll
               sideways. The Mein mobile header uses position:fixed now and needs
               no ancestor cooperation, so this stays minimal. */
            #page, #content, #primary, .site, .site-content, .entry-content,
            .rss-main-wrapper { overflow: visible !important; }
            body:not(.dark-mode) .rss-content-center,
            body.dark-mode .rss-content-center,
            .rss-content-center { max-width: 100% !important; margin: 8px 0 !important; }
        }

        /* WordPress block themes cap every direct child of a constrained
           container (.is-layout-constrained) at the theme's content width.
           Our header and wrapper are meant to be full-bleed, so that cap has to
           be lifted — otherwise the bar stays content-width and looks cramped
           no matter what width it asks for. The Mein page uses such a template;
           the front page does not, which is why only Mein showed it.
           Margins are deliberately left alone: the existing rules below use
           calc(50% - 50vw) to break out, and must keep winning.
           The block-direction margin, though, must be zeroed: the theme applies
           margin-block-start (its block gap, 32px) to children of the content
           container, and on a fixed element that offsets it away from top:0 —
           which showed as a strip above the header with cards scrolling through. */
        .rss-main-wrapper,
        .rss-sticky-bar,
        .rss-mobile-header { max-width: none !important; }
        .rss-main-wrapper,
        .rss-sticky-bar,
        .rss-mobile-header {
            margin-block-start: 0 !important;
            margin-block-end: 0 !important;
            margin-top: 0 !important;
        }
        /* The counter sits between the header and the first card with the same
           breathing room on both sides. The block theme also applies its block
           gap as margin-block-start to these elements, which is a *logical*
           property — setting the `margin` shorthand alone did not always beat
           it, so both are pinned explicitly. */
        #feed-counter {
            margin: 10px auto 0 !important;
            margin-block-start: 10px !important;
            margin-block-end: 0 !important;
        }
        body .rss-content-center#rss-list,
        body.dark-mode .rss-content-center#rss-list {
            margin-top: 12px !important;
            margin-block-start: 12px !important;
        }
        /* --- STICKY BAR --- */
        .rss-sticky-bar {
            position: sticky !important;
            top: 0 !important;
            z-index: 999999;
            background: #EAF2EE !important;
            border-bottom: none !important;
            padding: 12px 0 !important;
            width: var(--nso-vw, 100vw) !important;
            margin-left: calc(50% - var(--nso-vw, 100vw) / 2) !important;
            box-shadow: 0 4px 15px rgba(0,71,49,0.15) !important;
        }
        body.dark-mode .rss-sticky-bar { box-shadow: 0 4px 15px rgba(0,0,0,0.6) !important; }
        #rss-header-shadow { display: none; }
        .admin-bar .rss-sticky-bar { top: 32px !important; }
        @media screen and (max-width: 782px) {
            .admin-bar .rss-sticky-bar { top: 46px !important; }
        }
        /* Desktop: fixed, so the bar is pinned to the window and immune to any
           padding/margin the page template puts above it. Sticky was tried and
           put the bar back in flow, which reintroduced that gap.
           The spacer below is a STATIC value on purpose: measuring the bar and
           applying it from JS made the content jump, because the logo image
           loads after DOMContentLoaded and changes the measured height. */
        @media (min-width: 769px) {
            .rss-sticky-bar {
                position: fixed !important;
                top: var(--nso-top, 0px) !important;
                left: 0 !important;
                right: 0 !important;
                width: auto !important;
                margin-left: 0 !important;
            }
                /* Die Kopfzeile ist so breit wie ihr Inhalt und steht per margin auto
               in der Mitte. Keine Verschiebung von Hand mehr (17.10.2026). */
            .rss-header-inner { width: max-content; max-width: 100% !important; }
            .admin-bar .rss-sticky-bar { top: var(--nso-top, 0px) !important; }
        }
		/* Die Mein-Feedseite hat eine andere Kopfzeile als der Hauptfeed
               (Logo-Lockup statt Wortmarke, andere Knopfanzahl) und braucht
               darum ihren eigenen Wert. */

        /* Dark needs a heavier outline: control and bar are near-identical
           greens there. The slider grows by the same amount its border does,
           or the pill inside it would be clipped.
           Day keeps a 1px border and gets its resting weight from an inset ring
           (below), so the hover hairline causes no reflow. */
        @media (min-width: 769px) {
            .dropdown-trigger, #s-search { border-width: var(--nso-field-bw) !important; }
            /* 24px pill + 4px padding + the border on both sides. */
            body.dark-mode .slider-container { border-width: var(--nso-field-bw) !important; height: 32px; }
        }

        /* --- HEADER LAYOUT --- */
        .rss-header-inner { max-width: 700px; margin: 0 auto; padding: 0 15px; display: flex; gap: 12px; align-items: center; box-sizing: border-box; }
        .rss-brand-box { flex-shrink: 0; padding-right: 8px; }
        .rss-slogan-text { font-size: 8px; color: #597868; font-weight: bold; text-transform: uppercase; }
        .rss-controls-column { display: flex; flex-direction: column; gap: 6px; flex-grow: 1; }

        /* --- SORT SLIDER --- */
        .slider-container {
            position: relative;
            background: #D5E5DD;
            border-radius: 50px !important;
            display: flex;
            height: 28px;
            padding: 2px;
            align-items: center;
            box-sizing: border-box;
            overflow: hidden;
        }
        .slider-bg {
            position: absolute;
            height: 24px;
            background: #008a5e;
            border-radius: 50px !important;
            z-index: 1;
            top: 50%;
            transform: translateY(-50%);
            transition: left 0.3s cubic-bezier(0.25, 1, 0.5, 1), width 0.3s ease, background-color 0.3s ease !important;
        }
        .slider-opt {
            flex: 1;
            text-align: center;
            font-weight: 600;
            cursor: pointer;
            line-height: 24px;
            white-space: nowrap;
            font-size: 11px !important;
            padding: 0 18px;            
			z-index: 2;
            position: relative;
            border-radius: 50px !important;
            transition: color 0.3s ease, -webkit-text-fill-color 0.3s ease !important;
        }
        .slider-container, .slider-opt { border-radius: 50px !important; }

        /* Day Mode slider text */
        body:not(.dark-mode) .slider-opt { color: #455E51 !important; }
        /* Dark Mode slider text */
        body.dark-mode .slider-opt { color: #D5E5DD !important; }
        /* Active / hover: day mode uses F0F6F3, dark mode uses EAF2EE */
        body:not(.dark-mode) .slider-opt.active { color: #EAF2EE !important; -webkit-text-fill-color: #EAF2EE !important; }
        body:not(.dark-mode) .slider-opt:not(.active):hover { color: #008a5e !important; -webkit-text-fill-color: #008a5e !important; }
        body:not(.dark-mode) .slider-container:hover .slider-bg { background-color: #007550 !important; }
        body.dark-mode .slider-opt.active,
        body.dark-mode .slider-opt:hover { color: #EAF2EE !important; -webkit-text-fill-color: #EAF2EE !important; }
        body.dark-mode .slider-container .slider-opt.active { color: #EAF2EE !important; -webkit-text-fill-color: #EAF2EE !important; transition: none !important; }

        /* Day mode: pill stays #007550 on hover, no brighten needed */

        /* --- BOTTOM ROW --- */
        .rss-bottom-row { display: flex; gap: 8px; width: 100%; align-items: center; }
        .custom-dropdown, #s-search { min-width: 0; }
        .custom-dropdown { position: relative !important; }
                /* Mindestbreite gehört auf den Container, nicht auf den Auslöser darin:
           der Flex-Anteil wird hier verteilt, und flex-basis 0 verteilte gleich
           viel an beide — obwohl „Presseaussendung" deutlich länger ist als
           „Alle Themen". Der Auslöser schnitt dann ab statt zu wachsen. */
        #dd-type  { flex: 1 1 auto !important; min-width: 130px; }
        #dd-topic { flex: 1 1 auto !important; min-width: 116px; }
        #s-search { flex: 0 1 auto !important; width: 120px !important; }
        .dark-toggle-wrapper { flex: 0 0 40px; }

        /* --- FORMAT SLIDER (row 1, right of sort) --- */
        .rss-row1 { display: flex; gap: 8px; align-items: center; width: 100%; }
        #rss-slider { flex: 1 1 auto; min-width: 200px; }
#format-slider { flex: 0 0 auto; }
        .fmt-opt { flex: 0 0 44px !important; padding: 9px !important; font-size: 11px !important; height: 24px; display: flex; align-items: center; justify-content: center; }
        .fmt-opt svg { display: block; }
        /* --- MOBILE FORMAT TOGGLES (round, on the sort row) --- */
/* Die vier Format-Knöpfe als sichtbare Einheit: gemeinsamer Rahmen,
           enger Abstand. Ein Symbol allein sagt wenig — als Gruppe neben
           „Alle" ist erkennbar, dass hier ein Format gewählt wird. */
        .mob-fmt-group { display: inline-flex; align-items: center; gap: 3px;
            margin-left: 0; padding: 3px; border-radius: 50px;
           background: #D5E5DD; width: 100%; box-sizing: border-box;
            position: relative; }
        body.dark-mode .mob-fmt-group { background: #005A3F; }   
		/* Der grüne Balken wandert zwischen den Knöpfen, statt dass jeder
           einzeln umschaltet: die Reihe liest sich dadurch als EIN Regler,
           nicht als vier Schalter. Gleiche Mechanik wie die Desktop-Slider. */
        .mob-tray-bg { position: absolute; top: 3px; bottom: 3px; left: 3px;
            width: 0; background: #008a5e; border-radius: 50px; z-index: 0; }
        /* Die Bewegung wird erst freigeschaltet, nachdem der Balken einmal
           gesetzt wurde — sonst animiert er beim Laden von Breite 0 herüber,
           was als Flackern sichtbar ist. */
        .mob-tray-bg.nso-thumb-ready {
            transition: left .3s cubic-bezier(.25,1,.5,1), width .3s ease; }
		
        .mob-fmt-btn, .mob-sort-tray .mob-sort-chip { position: relative; z-index: 1; }
        /* Füllung übernimmt allein der Balken. Die alten Aktiv-Regeln der Knöpfe
           stehen weiter unten im Stylesheet und gewinnen sonst bei gleicher
           Spezifität — dann leuchtet der Knopf sofort grün, während der Balken
           noch fährt. Textfarben bleiben bei den ursprünglichen Regeln. */
        html body .mob-fmt-btn,
        html body .mob-fmt-btn.active,
        html body .mob-sort-tray .mob-sort-chip,
        html body .mob-sort-tray .mob-sort-chip.active {
            background: transparent !important; border-color: transparent !important; }
		/* Gleiche Bauform wie die Sortier-Chips: derselbe Rahmen in Ruhefarbe,
           dieselbe Schriftgröße. Ohne den Rahmen wirkten sie wie ein fremdes
           Bauteil in derselben Zeile. */
        .mob-fmt-btn { min-width: 0; flex: 1 1 0; height: 30px; border-radius: 50px;
            border: 1.5px solid #D5E5DD; background: #D5E5DD; color: #0A1F14;
            font-size: 12px; font-weight: 700; display: inline-flex;
            align-items: center; justify-content: center; cursor: pointer;
            padding: 0 8px; }
.mob-fmt-btn.active { background: #008a5e; border-color: #008a5e; color: #EAF2EE !important; }
        body.dark-mode .mob-fmt-btn { background: #005A3F; border-color: #005A3F; color: #EAF2EE !important; }
        body.dark-mode .mob-fmt-btn.active { background: #008a5e; border-color: #008a5e; color: #EAF2EE !important; }
        /* Chrome zeichnet sonst seinen zweifarbigen Fokusring — hell außen,
           dunkel innen, was wie eine Fase aussieht. Für die Tastatur bleibt
           ein eigener Ring. */
        .mob-fmt-btn:focus, .mob-sort-chip:focus { outline: none; }
        .mob-fmt-btn:focus-visible, .mob-sort-chip:focus-visible {
            outline: 2px solid #4EE2A4; outline-offset: 2px; }

        /* Anheben beim Überfahren, Eindrücken beim Antippen — dieselbe Geste
           in beiden Trays. */
        .mob-fmt-btn, .mob-sort-chip {
            transition: transform var(--nso-dur) var(--nso-ease),
                        box-shadow var(--nso-dur) var(--nso-ease),
                        background var(--nso-dur) var(--nso-ease); }
        @media (hover: hover) {
            .mob-fmt-btn:hover:not(.active), .mob-sort-chip:hover:not(.active) {
                transform: translateY(-1px);
                box-shadow: 0 2px 6px rgba(0,71,49,0.20); }
            body.dark-mode .mob-fmt-btn:hover:not(.active),
            body.dark-mode .mob-sort-chip:hover:not(.active) {
                box-shadow: 0 2px 6px rgba(0,0,0,0.45); }
        }
        .mob-fmt-btn:active, .mob-sort-chip:active {
            transform: translateY(1px); box-shadow: none; }

        /* --- EMPTY STATE (no results for filter combo) --- */
        .rss-empty { display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 48px 20px; gap: 14px; }
        .rss-empty-msg { font-size: 14px; font-weight: 700; color: #597868; }
        body.dark-mode .rss-empty-msg { color: #87A696 !important; }

        .rss-reset-btn {
            background: var(--nso-ctl-bg);
            color: var(--nso-ctl-border);
            border: var(--nso-ctl-bw) solid var(--nso-ctl-border);
            border-radius: 50px;
            padding: 4px 12px;
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            cursor: pointer;
            white-space: nowrap;
            transition: all 0.3s ease-in-out;
        }
        /* X icon light in dark mode; label = border green. */
        body.dark-mode .rss-reset-btn { background: var(--nso-ctl-bg) !important; border: var(--nso-ctl-bw) solid var(--nso-ctl-border) !important; color: var(--nso-ctl-border) !important; }
        body:not(.dark-mode) .rss-reset-btn .nso-icon-x { color: var(--nso-ctl-border) !important; -webkit-text-fill-color: var(--nso-ctl-border) !important; }
        body.dark-mode .rss-reset-btn .nso-icon-x { color: #EAF2EE !important; -webkit-text-fill-color: #EAF2EE !important; }
        @media (min-width: 769px) and (hover: hover) {
            body:not(.dark-mode) .rss-reset-btn { border-width: 1px; }
        }
        /* Icon buttons in the controls row: icon + label on desktop */
        .nso-icon-btn { display: inline-flex; align-items: center; text-decoration: none; }
        .nso-icon-btn .nso-icon { font-size: 13px; line-height: 1; }
        /* Margin-based gap (flex gap was reading as no space in the theme) */
        .nso-icon-btn .nso-lbl { margin-left: 6px; }
        a.nso-icon-btn { color: #008a5e; }
        body.dark-mode a.nso-icon-btn { color: #008a5e; border-color: #008a5e; }
        body.dark-mode .nso-icon-btn { color: #008a5e; border-color: #008a5e; }
        /* View links: "Alles", "Mein", and the Mein-Newsoida settings button.
           All share the pill treatment; marks swap for day/dark. */
        .nso-viewlink { display: inline-flex; align-items: center; gap: 6px;
            height: 24px; box-sizing: border-box; padding: 0 12px;
            background: var(--nso-ctl-bg);
            border: var(--nso-ctl-bw) solid var(--nso-ctl-border); border-radius: 50px;
            color: var(--nso-ctl-fg);
            font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
            text-decoration: none; white-space: nowrap;
            transition: all var(--nso-dur) var(--nso-ease);
            line-height: 1; }
        .nso-viewlink .nso-lbl { line-height: 1; display: inline-flex; align-items: center; }
        .nso-viewlink .nso-gear { font-size: 14px; line-height: 1; }
        .nso-viewmark { display: inline-block; height: 18px; width: 18px; vertical-align: middle; }
        .nso-mark-all  { content: var(--nso-mark-all); }
        .nso-mark-mein { content: var(--nso-mark-mein); }
        @media (hover: hover) {
            /* Border and label brighten together — they share one green — and
               the round marks get a matching lift so the whole pill reacts. */
            .nso-viewlink:hover:not(.nso-active) { background: var(--nso-ctl-bg-hover);
                border-color: var(--nso-ctl-border-hover);
                color: var(--nso-ctl-fg-hover); box-shadow: var(--nso-glow); }
            .nso-viewlink:hover:not(.nso-active) .nso-viewmark { filter: brightness(1.12); }
            /* Inside the mein-bar the pill shares the bar's background, so the
               normal hover would be invisible — give it the lighter day tint. */
            body:not(.dark-mode) .nso-mein-bar .nso-viewlink:hover:not(.nso-active) { background: #f5f8f6; }
        }
        /* Press feedback: navigation takes a moment, so the click has to show. */
        .nso-viewlink:active {
            background: #008a5e !important; border-color: #008a5e !important;
            color: #EAF2EE !important; box-shadow: var(--nso-glow); }
        /* Desktop day mode: these pills carry a 2px outline (dark already does).
           Scoped to hover-capable wide screens so mobile chips stay flat. */
        @media (min-width: 769px) and (hover: hover) {
            body:not(.dark-mode) .nso-viewlink { border-width: 2px; }
        }
        /* ── Mein-Feedseite header: everything on ONE line ── */
        .nso-mein-bar .rss-header-inner { flex-direction: row; align-items: center;
            gap: 10px; flex-wrap: nowrap; justify-content: center; }
        .nso-mein-bar .rss-brand-row { display: flex; align-items: center; flex: 0 0 auto; }
        .nso-mein-bar .rss-brand-box { display: flex; align-items: center; }
        .nso-mein-bar .rss-controls-column { display: flex; flex-direction: row;
            align-items: center; gap: 6px; flex: 0 0 auto; min-width: 0; flex-wrap: nowrap; }
        /* The base layout gives these width:100%, which forces a line each. */
        .nso-mein-bar .rss-row1,
        .nso-mein-bar .rss-bottom-row { width: auto; flex: 0 0 auto;
            display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
        /* Toggle is simply the last item in the centered group. */
        .nso-mein-bar .rss-bottom-row { margin-left: 0; }
        .nso-mein-bar .nso-mein-toprow-toggle { margin-left: 0; flex: 0 0 auto; }
        /* Compact so the whole row fits inside the 700px column */
        .nso-mein-bar { padding: 18px 0 !important; }
        .nso-mein-bar .nso-viewlink { height: 30px; padding: 0 10px; gap: 5px; }
        .nso-mein-bar .nso-viewmark { width: 20px; height: 20px; }
        .nso-mein-bar .nso-viewlink .nso-gear { height: 20px; width: 20px; display: flex; align-items: center; justify-content: center; }
        .rss-sticky-bar .nso-mn-logo { height: 34px; }
        .rss-sticky-bar .nso-mn-wordmark { max-height: 20px; }
        /* Marks and gear share one size so buttons look balanced */
        .nso-viewlink { height: 30px; align-items: center; }
        /* Wordmark image comes from the shared token; only sizes vary per view. */
        .nso-mn-wordmark { content: var(--nso-wordmark-mein); width: auto;
            min-width: 0; display: block; object-fit: contain; height: auto; }
        .rss-sticky-bar .nso-mn-logo {
            content: var(--nso-logo-mein);
            height: 46px; width: auto; display: inline-block; flex-shrink: 0; }
        .rss-sticky-bar .nso-mn-wordmark { max-height: 30px; }
        /* ── Mobile Mein-Feedseite header ── */
        /* Sticky kept failing here: it needs every ancestor to leave overflow
           alone, and this template's wrapper chain does not. Fixed does not care
           about ancestors at all, so the header is pinned outright and the
           wrapper reserves its height below. */
        @media (max-width: 768px) {
            .rss-mobile-header.nso-mein-mob {
                position: fixed !important;
                top: 0 !important; left: 0 !important; right: 0 !important;
                width: 100% !important; margin-left: 0 !important;
                z-index: 999999 !important;
            }
            .admin-bar .rss-mobile-header.nso-mein-mob { top: 46px !important; }
            /* Zwei Knopfzeilen statt einer: die feste Kopfzeile ist höher. */
            .rss-main-wrapper.nso-mein-wrap { padding-top: 128px; }
        }
        .rss-mobile-header.nso-mein-mob .mob-topbar { display: flex; align-items: center; gap: 8px; }
        .rss-mobile-header.nso-mein-mob .nso-mn-logo {
            content: var(--nso-logo-mein);
            height: 30px; width: auto; display: inline-block; flex-shrink: 0; }
        .rss-mobile-header.nso-mein-mob .nso-mn-wordmark { max-height: 18px; }
                /* Umbrechen statt seitlich scrollen: als Scroller lagen die äußeren
           Knöpfe halb außerhalb des Bildschirms und sahen abgeschnitten aus —
           auf dem Telefon sieht man nicht, dass sich die Zeile schieben lässt. */
        .mob-mein-row { display: flex; align-items: center; gap: 5px;
            padding: 0 12px 8px; box-sizing: border-box; max-width: 100%;
            flex-wrap: wrap; row-gap: 6px; overflow-x: visible; }
        .mob-mein-row::-webkit-scrollbar { display: none; }
        .mob-mein-row .nso-viewlink { height: 30px; padding: 0 8px; gap: 4px; flex: 0 0 auto; }
        .mob-mein-row .mob-dark-btn { flex: 0 0 auto; }
        .mob-mein-row .nso-viewmark { width: 19px; height: 19px; }
        .mob-mein-row .nso-viewlink .nso-gear { height: 19px; width: 19px; display: flex; align-items: center; justify-content: center; }
        /* The Mein lockup behaves like the main feed logo: it links to its own
           view (so a click reloads the page) and glows on hover, day and dark. */
        .nso-mein-bar .rss-brand-box a { display: flex; transition: filter 0.28s ease; cursor: pointer; }
        @media (hover: hover) {
            body:not(.dark-mode) .nso-mein-bar .rss-brand-box a:hover {
                filter: drop-shadow(0 0 5px rgba(0,138,94,0.20)) drop-shadow(0 0 9px rgba(0,138,94,0.15)); }
            body.dark-mode .nso-mein-bar .rss-brand-box a:hover {
                filter: drop-shadow(0 0 1px rgba(0,138,94,0.40)) drop-shadow(0 0 9px rgba(78,226,164,0.4)) brightness(1.1); }
        }
        /* Save button: sits at the end of a card's metadata row. Outline when
           unsaved, filled when saved — the same green-means-on language the
           filters use. */
		/* Die Blase trennt sich durch ihren Hintergrund selbst, braucht aber
           trotzdem Luft zur Zeitangabe — 2px Flex-Abstand sind zu wenig. */
        .rss-metadata .click-bubble--inline { margin-right: 8px; }
		.rss-meta-break { flex-basis: 100%; height: 0; }
        .rss-cats-group { flex: 0 1 auto; min-width: 0; }
       /* Symmetrisches Polster und runde Form, damit der Knopf beim Überfahren
           dieselbe Fläche aufhellen kann wie die Pillen in der Kopfzeile —
           ohne Hintergrund bliebe nur ein Glühen, also die halbe Geste. */
        .nso-save-btn { margin-left: auto; background: transparent; border: none;
            padding: 4px; border-radius: 50%; cursor: pointer; line-height: 0;
            color: #008a5e; transition: all var(--nso-dur) var(--nso-ease); }
        .nso-save-btn svg { fill: none; stroke: currentColor; stroke-width: 2;
            stroke-linejoin: round; display: block; }
        .nso-save-btn.nso-saved svg { fill: currentColor; }
        .nso-save-btn .nso-icon-x { font-size: 13px; line-height: 1; }
       
       /* Farben aus denselben Steuer-Tokens wie die Pillen, damit eine Änderung
           dort auch hier ankommt. Das Glühen ersetzt den Hintergrundwechsel,
           den ein reines Symbol nicht leisten kann. */
       @media (hover: hover) {
            /* Der Umriss füllt sich beim Überfahren mit dem hellen Ton der
               Pillen — die Fläche liegt IM Zeichen, nicht dahinter.
               Ein bereits gespeichertes Lesezeichen ist ausgenommen: sonst
               liefe es beim Klick weiß an und bliebe es, solange die Maus
               darauf steht — der Klick sähe aus, als hätte er nichts getan. */
            body:not(.dark-mode) .nso-save-btn:hover { color: #007550; }
            body:not(.dark-mode) .nso-save-btn:hover:not(.nso-saved) svg { fill: #EAF2EE; }
        }

        .nso-save-btn:active { color: #007550; }
        body.dark-mode .nso-save-btn { color: #007550; } 
        @media (hover: hover) {
            body.dark-mode .nso-save-btn:hover { color: #008a5e;
                filter: drop-shadow(0 0 7px rgba(78,226,164,0.45)); }
        }
        body.dark-mode .nso-save-btn:active { color: #008a5e; }
		        /* Ab Tablet/Desktop folgt das Lesezeichen im Dunkelmodus der Karte
           statt dem Grün: Ruhe im Ton des Quellennamens, Überfahren und
           Gespeichert im Ton der Kartenschrift, gespeichert zusätzlich
           gefüllt. Kein Schein — der bleibt den grünen Elementen vorbehalten.
           Am Telefon gilt weiter die grüne Fassung darüber. */
        @media (min-width: 769px) {
            body.dark-mode .nso-save-btn { color: var(--nso-meta, #87A696); }
            body.dark-mode .nso-save-btn:hover { color: #D5E5DD; filter: none; }
            body.dark-mode .nso-save-btn:active { color: #D5E5DD; }
            body.dark-mode .nso-save-btn.nso-saved { color: #D5E5DD; }
        }
        /* Saved view: cards are hidden until the pill turns it on. */
        .nso-saved-card { display: none; }
        /* Note shown on a saved card whose source link no longer resolves. */
        .nso-dead-note { margin-top: 8px; padding: 6px 10px; border-radius: 6px;
            font-size: 12px; font-weight: 600; color: #C8102E;
            background: transparent; border: 1px solid #C8102E; }
        body.dark-mode .nso-dead-note { color: #E8998F; border-color: #E8998F; }
        .nso-link-dead a.rss-head-link { opacity: .6; }
        .nso-savedpill .nso-bm { fill: none; stroke: currentColor; stroke-width: 2;
            stroke-linejoin: round; display: block; }
        .nso-savedpill.nso-active .nso-bm { fill: currentColor; }
        .nso-savedpill.nso-active { background: #008a5e; border-color: #008a5e; color: #EAF2EE; }
        /* Profile pills use exactly the Alles/settings pill styling. */
        .nso-profpill { cursor: pointer; font-family: inherit; }
        .nso-profpill.nso-active { background: #008a5e; color: #EAF2EE; border-color: #008a5e; }
        body.dark-mode .nso-profpill.nso-active { background: #008a5e; color: #EAF2EE; }
		        /* Feste Breite, der Name schrumpft hinein — die Kopfzeile darf mit
           längeren Profilnamen nicht mitwachsen. Basis ist „MEIN 1" bei 10px;
           bei Klemmen nur diese eine Zahl ändern. */
        :root { --nso-profpill-w: 64px; }
        .nso-profpill { width: var(--nso-profpill-w);
            padding-left: 0 !important; padding-right: 0 !important;
            justify-content: center; overflow: hidden; }
        .nso-profpill .nso-lbl { overflow: hidden; white-space: nowrap;
            text-overflow: clip; }
        .nso-profpill[data-len="7"]  { font-size: 9px; }
        .nso-profpill[data-len="8"]  { font-size: 8px; letter-spacing: .3px; }
        .nso-profpill[data-len="9"],
        .nso-profpill[data-len="10"] { font-size: 7px; letter-spacing: 0; }
        .nso-profpill.nso-locked { opacity: .5; }
        /* Die kompakte Fassung in der Mein-Leiste ist ohnehin schmaler. */
        .nso-mein-bar .nso-profpill { width: calc(var(--nso-profpill-w) - 4px); }
        /* Both marks render at exactly the same box, vertically centred. The
           two PNGs have different internal padding, so size the box, not the
           image, and let object-fit normalise them. */
        .nso-viewmark { display: block; width: 22px; height: 22px; flex: 0 0 auto;
            object-fit: contain; align-self: center;
            transition: filter var(--nso-dur) var(--nso-ease); }
        .nso-viewlink .nso-gear { font-size: 26px; line-height: 1; height: 22px; width: 22px;
            display: flex; align-items: center; justify-content: center; }
        /* The gear now holds an outlined SVG cog (not the ⚙ glyph): size the SVG
           to match the round marks, and no baseline nudge is needed. */
        .nso-viewlink .nso-gear svg { width: 18px; height: 18px; display: block; }
        .nso-mein-bar .nso-viewlink .nso-gear svg { width: 18px; height: 18px; }
        .mob-mein-row .nso-viewlink .nso-gear svg { width: 17px; height: 17px; }
        /* Same height for all three row buttons, whether their content is an
           icon (⚙/✕) or text+arrow (whose triangle glyph is otherwise taller). */
        #feed-counter .rss-reset-btn {
            height: 24px; box-sizing: border-box; justify-content: center;
        }
        #feed-counter .rss-reset-btn .nso-lbl { line-height: 1; }
		
		        /* ── DE-Schalter ───────────────────────────────────────────────
           Muss AUSSERHALB jeder Media Query stehen: der Block enthält
           selbst eine, und verschachtelte Media Queries sind ungültig —
           der Browser verwirft dann den ganzen Rest des Stylesheets. */
                /* Der Schalter zeigt seinen Zustand über die Position und die Sättigung
           der Flagge: links und blass = aus, rechts und farbig = ein. */
              /* Der Schalter zeigt seinen Zustand über die Position der Flagge:
           links = aus, rechts = ein. Die Farben bleiben in beiden Zuständen
           gleich — entsättigt ist die Flagge bei dieser Größe nicht mehr als
           Flagge erkennbar. */
                #nso-de-toggle {
            position: relative;
            width: 46px;
            padding: 0;
        }
        /* Ab 769px sind die Pillen 32px hoch — der Schalter braucht dann etwas
           mehr Breite, damit er nicht gedrungen wirkt. */
        @media (min-width: 769px) {
            #nso-de-toggle { width: 54px; }
        }
        #nso-de-toggle .nso-de-knob {
            position: absolute;
            top: 50%;
            left: 3px;
            width: 22px;
            height: 22px;
            transform: translateY(-50%);
            transition: left var(--nso-dur) var(--nso-ease);
        }
                #nso-de-toggle.nso-active .nso-de-knob { left: calc(100% - 22px - 3px); }
       

		        /* Tagesmodus: der Schalter folgt der Bauform der Schieber — ein Element
           ohne sichtbaren Rand, ruhend im Schiebergrau, beim Darüberfahren der
           innere Schein, aktiv das Pillengrün mit dem dunkleren Hover. */
                        body:not(.dark-mode) #nso-de-toggle:not(.nso-de-mein) {
            background: #D5E5DD !important;
            border: 0 !important;
            box-shadow: none !important;
        }
        body:not(.dark-mode) #nso-de-toggle.nso-active {
            background: #008a5e !important;
            box-shadow: none !important;
        }
        body:not(.dark-mode) #nso-de-toggle.nso-active:not(.nso-de-mein) {
            border: 0 !important;
        }
        @media (hover: hover) {
            body:not(.dark-mode) #nso-de-toggle:not(.nso-de-mein):hover {
                background: #D5E5DD !important;
                border: 0 !important;
                box-shadow: inset 0 0 10px rgba(0, 117, 80, 0.2) !important;
            }
            body:not(.dark-mode) #nso-de-toggle.nso-active:not(.nso-de-mein):hover {
                background: #007550 !important;
                border: 0 !important;
                box-shadow: inset 0 0 10px rgba(0, 117, 80, 0.2) !important;
            }
        }
		        /* ── DE-Schalter auf den Mein-Seiten: Endstand ────────────────── */
        body:not(.dark-mode) #nso-de-toggle.nso-de-mein {
            background: transparent !important;
            border: 2px solid #008a5e !important;
            box-shadow: none !important; }
        body:not(.dark-mode) #nso-de-toggle.nso-de-mein.nso-active {
            background: #008a5e !important;
            border: 2px solid #008a5e !important;
            box-shadow: none !important; }
        @media (hover: hover) {
            body:not(.dark-mode) #nso-de-toggle.nso-de-mein:hover {
                background: #f5f8f6 !important;
                border: 2px solid #008a5e !important;
                box-shadow: 0 0 6px rgba(0,138,94,0.25) !important; }
            body:not(.dark-mode) #nso-de-toggle.nso-de-mein.nso-active:hover {
                background: #007550 !important;
                border: 2px solid #007550 !important;
                box-shadow: 0 0 6px rgba(0,138,94,0.25) !important; }
        }
		
		        /* Im Dunkelmodus bleibt der Rahmen stehen, die Innenfläche ist also
           schmaler. Ohne kleineren Abstand säße die Flagge weiter innen als
           im Tagesmodus. */
        body.dark-mode #nso-de-toggle .nso-de-knob { left: 2px; }
          body.dark-mode #nso-de-toggle.nso-active .nso-de-knob { left: calc(100% - 22px - 2px); }
		
        @media (hover: hover) {
            #nso-de-toggle:hover:not(.nso-active) {
                background: var(--nso-ctl-bg-hover);
                border-color: #008a5e;
                box-shadow: var(--nso-glow);
            }
            body.dark-mode #nso-de-toggle:hover:not(.nso-active) {
                background: transparent;
                border-color: #009667;
                color: #EAF2EE;
                box-shadow: 0 0 8px rgba(0,150,103,0.55);
            }
            #nso-de-toggle.nso-active:hover {
                background: #007550 !important;
                border-color: #007550 !important;
                box-shadow: var(--nso-glow) !important;
            }
        }
		
	        #nso-de-toggle-mob { display: inline-flex; align-items: center; justify-content: center; }
        #nso-de-toggle-mob .nso-flag { width: 15px; height: 15px; }
        #nso-de-toggle-mob.nso-active {
            background: #008a5e !important;
            border-color: #008a5e !important;
        }	
		
		 .rss-card[data-land="de"] { display: none; }
        html.nso-de-on .rss-card[data-land="de"] { display: flex; }
		
		        /* Dunkelmodus: gefüllte Pillen ruhen dort auf #007550 und hellen beim
           Hover auf #008a5e auf — umgekehrt zum Tagesmodus. */
        body.dark-mode #nso-de-toggle.nso-active {
            background: #007550 !important;
            border-color: #007550 !important;
            color: #EAF2EE !important;
            box-shadow: none !important;
        }
		                      @media (hover: hover) {
            html body.dark-mode #nso-de-toggle.nso-active:hover {
                background: #008a5e !important;
                border-color: #008a5e !important;
                box-shadow: 0 0 6px rgba(0,150,103,0.4) !important; }
        }
        .nso-flag { width: 13px; height: 13px; display: block; flex: 0 0 auto; }
        .nso-de-sign { font-size: 13px; font-weight: 700; line-height: 1; }
        #nso-de-toggle { gap: 5px; padding: 0 10px; }
		
        /* ── Mobile: view controls become filled chips ──────────────────
           Touch has no hover, so the background does the talking: neutral fill
           when inactive, brand green when active or pressed. Mirrors the main
           feed header's sort chips and format toggles. */
        @media (max-width: 768px) {
            .nso-viewlink {
                background: var(--nso-chip-bg);
                border-color: var(--nso-chip-bg);
                color: var(--nso-chip-fg);
            }
	
			
            /* The counter row is a non-wrapping flex row. These buttons used to
               be .nso-icon-btn, whose label is hidden on small screens; as
               .nso-viewlink they kept their labels and pushed the row past the
               viewport, which showed up as the page swaying sideways. */
            #feed-counter { flex-wrap: wrap; }
            #feed-counter .nso-viewlink .nso-lbl { display: none; }
            #feed-counter .nso-viewlink { padding: 0 10px; }
            /* The extra pill pushed the Mein row past the screen — on mobile the
               bookmark speaks for itself. */
            .nso-savedpill .nso-lbl { display: none; }
            .nso-savedpill { padding: 0 12px; }
            /* The counter-row buttons sit on the PAGE background, not inside
               the header, so they take the header colour — otherwise in day
               mode chip and page were the same #D5E5DD and disappeared. */
            #feed-counter .nso-viewlink {
                background: var(--nso-chip-bg-onpage);
                border-color: var(--nso-chip-bg-onpage);
            }
            .nso-viewlink.nso-active,
            .nso-profpill.nso-active,
            .nso-viewlink:active,
            #feed-counter .nso-viewlink:active {
                background: #008a5e; border-color: #008a5e; color: #EAF2EE;
            }
        }
		
		    

        /* ── Flaggenrahmen ─────────────────────────────────────────────────
           Vier Fälle: Kopfzeile und Karte, je hell und dunkel. Die Flagge ist
           ein Kreis, deshalb border-radius 50%. */
        .nso-flag { border-radius: 50%; box-sizing: border-box; }

                      /* Die Flagge ist ein Kreis, der Rahmen folgt ihr. */
        .nso-flag {
            border-radius: 50%;
            box-sizing: border-box;
            border: 1px solid #143325;
        }
        body.dark-mode .nso-flag { border-color: #EAF2EE; }

        /* Der Flaggenrahmen folgt dem Grund, nicht einem festen Wert: dunkel
           auf dem grauen Ruhezustand, hell auf dem grünen Aktivzustand — so
           wie Zahnrad und Mond auf ihrem grünen Grund hell sind. */
        body:not(.dark-mode) #nso-de-toggle .nso-flag { border-color: #008a5e; }
        body:not(.dark-mode) #nso-de-toggle.nso-active .nso-flag { border-color: #EAF2EE; }
        body:not(.dark-mode) #nso-de-toggle-mob.nso-active .nso-flag { border-color: #EAF2EE; }
        body.dark-mode #nso-de-toggle .nso-flag { border-color: #EAF2EE; }

        /* Auf der Karte richtet sich der Rahmen nach der Kartenschrift. */
        .nso-flag-src { border-color: #597868 !important; }
        body.dark-mode .nso-flag-src { border-color: #D5E5DD !important; }
		
        /* On narrow screens: show the icon only, hide the label to save space */
        @media (max-width: 640px) {
            .nso-icon-btn .nso-lbl { display: none; }
            .nso-icon-btn .nso-lbl { margin-left: 0; }
            .nso-icon-btn .nso-icon { font-size: 16px; }
            /* Filter Reset: round icon-only button on narrow screens */
            #feed-counter .rss-reset-btn {
                width: 34px; height: 34px; padding: 0; justify-content: center;
            }
        }
        @media (hover: hover) {
            body:not(.dark-mode) .rss-reset-btn:hover,
            body.dark-mode .rss-reset-btn:hover {
                background: var(--nso-ctl-bg-hover) !important;
                border-color: var(--nso-ctl-border-hover) !important;
                color: var(--nso-ctl-border-hover) !important;
                box-shadow: var(--nso-glow) !important;
            }
        }
        .rss-reset-btn:active {
            background: #008a5e !important; border-color: #008a5e !important; color: #EAF2EE !important;
            box-shadow: var(--nso-glow) !important;
        }
        .rss-reset-btn:active .nso-icon-x { color: #EAF2EE !important; -webkit-text-fill-color: #EAF2EE !important; }
        #feed-counter .cnt-part { white-space: nowrap; }

        /* --- DROPDOWNS --- */
        .dropdown-trigger {
            background: #f5f8f6;
            border: 1px solid #D5E5DD;
            border-radius: 8px;
            height: 30px;
            line-height: 30px;
            padding: 0 15px 0 8px;
            font-size: 11px;
            color: #008a5e;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            position: relative;
            box-sizing: border-box;
            cursor: pointer;
            font-weight: 600 !important;
            letter-spacing: -0.3px;
            transition: all 0.3s ease-in-out !important;
        }
        .dropdown-trigger::after { content: '▼'; position: absolute; right: 8px; font-size: 7px; color: #008a5e; }
                #txt-type, #txt-topic { min-width: 0; }
        .dropdown-menu {
            position: absolute !important;
            top: 34px !important;
            left: 0 !important;
            width: 100% !important;
            min-width: max-content !important;
            background: #EAF2EE;
            border: 1px solid #D5E5DD;
            border-radius: 8px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
            display: none;
            z-index: 1000 !important;
            overflow: hidden;
            transform-origin: top;
        }
        .dropdown-menu.open { display: block; animation: slideDown 0.15s ease-out; }
        @keyframes slideDown { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
        .dropdown-item {
            padding: 6px 10px;
            font-size: 11px;
            line-height: 1.2;
            transition: background-color 0.3s ease, color 0.3s ease !important;
        }
        .dropdown-item:hover { background: #D5E5DD; color: #007550; }
        .dropdown-header { background: #008a5e !important; color: #EAF2EE !important; padding: 4px 10px !important; font-size: 11px !important; font-weight: bold !important; text-transform: uppercase !important; letter-spacing: 1px !important; }
        .mob-dd-header, .mob-dropdown-panel .mob-dd-header, div.mob-dd-header, #mob-dd-type .mob-dd-header, #mob-dd-topic .mob-dd-header { font-size: 14px !important; font-weight: 900 !important; letter-spacing: 0.5px !important; }

        /* Day Mode dropdown colors */
        body:not(.dark-mode) .dropdown-trigger,
        body:not(.dark-mode) input#s-search,
        body:not(.dark-mode) input#s-search:hover,
        body:not(.dark-mode) input#s-search:focus,
        body:not(.dark-mode) input#s-search:active,
        body:not(.dark-mode) input#s-search:not(:placeholder-shown) {
            background-color: #EAF2EE !important; color: #455E51 !important; -webkit-text-fill-color: #455E51 !important;
            border-color: #D5E5DD !important; font-size: 11px !important; }
        body:not(.dark-mode) input#s-search::placeholder { color: #455E51 !important; }
        body:not(.dark-mode) input#s-search:hover,
        body:not(.dark-mode) input#s-search:focus { border-color: #008a5e !important; box-shadow: 0 0 8px rgba(0,138,94,0.15) !important; }
        body:not(.dark-mode) .dropdown-trigger { color: #008a5e !important; }
        body:not(.dark-mode) .dropdown-item { color: #455E51 !important; font-weight: 500; }
        body:not(.dark-mode) .dropdown-item:hover { color: #007550 !important; background-color: #D5E5DD !important; }
        body:not(.dark-mode) .dropdown-item[onclick*="'behoerden'"]:hover,
        body:not(.dark-mode) .dropdown-item[onclick*="'medien'"]:hover,
        body:not(.dark-mode) .dropdown-item[onclick*="'neue medien'"]:hover,
        body:not(.dark-mode) .dropdown-item[onclick*="'bewegung'"]:hover,
        body:not(.dark-mode) .dropdown-item[onclick*="'parteikanal'"]:hover,
        body:not(.dark-mode) .dropdown-item[onclick*="'creator'"]:hover,
        body:not(.dark-mode) .dropdown-item[onclick*="'ots'"]:hover { color: #007550 !important; background-color: #D5E5DD !important; }
        body:not(.dark-mode) .dropdown-item[onclick*="'all'"] { color: #455E51 !important; }
        body:not(.dark-mode) .dropdown-item[onclick*="'all'"]:hover { color: #007550 !important; background-color: #D5E5DD !important; }
        body:not(.dark-mode) .dropdown-header { background-color: #008a5e !important; color: #EAF2EE !important; border-bottom: 1px solid rgba(0,0,0,0.05) !important; }
        /* Desktop day mode active item */
        body:not(.dark-mode) .dropdown-item.active { color: #007550 !important; background-color: #D5E5DD !important; }
        body:not(.dark-mode) .dropdown-item[onclick*="'behoerden'"].active,
        body:not(.dark-mode) .dropdown-item[onclick*="'ots'"].active,
        body:not(.dark-mode) .dropdown-item[onclick*="'medien'"].active,
        body:not(.dark-mode) .dropdown-item[onclick*="'neue medien'"].active,
        body:not(.dark-mode) .dropdown-item[onclick*="'bewegung'"].active,
        body:not(.dark-mode) .dropdown-item[onclick*="'parteikanal'"].active,
        body:not(.dark-mode) .dropdown-item[onclick*="'creator'"].active,
        body:not(.dark-mode) .dropdown-item[onclick*="'video'"].active,
        body:not(.dark-mode) .dropdown-item[onclick*="'audio'"].active,
        body:not(.dark-mode) .dropdown-item[onclick*="'text'"].active { color: #007550 !important; background-color: #D5E5DD !important; }

        /* Category coloring in dropdowns */
        .dropdown-item[onclick*="'medien'"] { border-left: 4px solid #7A72A8; background-color: transparent; color: #443E65 !important; font-weight: bold; }
        .dropdown-item[onclick*="'medien'"]:hover { background-color: #D5E5DD; }
        .dropdown-item[onclick*="'bewegung'"], .dropdown-item[data-filter='bewegung'] { border-left: 4px solid #BB7C46; background-color: transparent; color: #895324 !important; font-weight: bold; }
        body:not(.dark-mode) .dropdown-item[onclick*="'bewegung'"], body:not(.dark-mode) .dropdown-item[data-filter='bewegung'] { color: #895324 !important; }
        html body:not(.dark-mode) .dropdown-item[data-filter='bewegung'] { color: #895324 !important; }
        html body:not(.dark-mode) .mob-dd-item[data-filter='bewegung'] { color: #0A1F14 !important; }
        html body:not(.dark-mode) .mob-dd-item { color: #0A1F14 !important; }
        html body:not(.dark-mode) .mob-sort-chip { color: #0A1F14 !important; }
        html body:not(.dark-mode) .mob-sort-arrow { color: #0A1F14 !important; }
        html body:not(.dark-mode) .mob-search-btn { color: #0A1F14 !important; }
        html body:not(.dark-mode) .mob-icon-btn { color: #0A1F14 !important; }
        /* Active states always EAF2EE */
        html body .mob-sort-chip.active { color: #EAF2EE !important; }
        html body .mob-search-btn.active { color: #EAF2EE !important; }
        html body:not(.dark-mode) .mob-sort-chip.active { color: #EAF2EE !important; }
        html body:not(.dark-mode) .mob-search-btn.active { color: #EAF2EE !important; }
        html body:not(.dark-mode) .mob-sort-arrow.active { color: #EAF2EE !important; }
        /* Dark mode all EAF2EE */
        html body.dark-mode .mob-dd-item { color: #EAF2EE !important; }
        html body.dark-mode .mob-sort-chip { color: #EAF2EE !important; }
        html body.dark-mode .mob-sort-arrow { color: #EAF2EE !important; }
        html body.dark-mode .mob-search-btn { color: #EAF2EE !important; }
        html body.dark-mode .mob-icon-btn { color: #EAF2EE !important; }
        html body.dark-mode .mob-dark-btn { color: #EAF2EE !important; }
		
        .dropdown-item[onclick*="'bewegung'"]:hover { background-color: #D5E5DD; color: #007550 !important; }
        .dropdown-item[onclick*="'parteikanal'"] { border-left: 4px solid #97AB54; background-color: transparent; color: #576623 !important; font-weight: bold; }
        .dropdown-item[onclick*="'parteikanal'"]:hover { background-color: #D5E5DD; color: #007550 !important; }
        .dropdown-item[onclick*="'creator'"] { border-left: 4px solid #A85757; background-color: transparent; color: #7E2F2F !important; font-weight: bold; }
        .dropdown-item[onclick*="'creator'"]:hover { background-color: #D5E5DD; color: #007550 !important; }
        .dropdown-item[onclick*="'neue medien'"] { border-left: 4px solid #7C5D77; background-color: transparent; color: #6F3E67 !important; font-weight: bold; }
        .dropdown-item[onclick*="'neue medien'"]:hover { background-color: #D5E5DD; color: #007550 !important; }
        body:not(.dark-mode) .dropdown-item[onclick*="'medien'"] { color: #443E65 !important; font-weight: bold !important; }
        body:not(.dark-mode) .dropdown-item[onclick*="'neue medien'"] { color: #6F3E67 !important; font-weight: bold !important; }
        body:not(.dark-mode) .dropdown-item[onclick*="'bewegung'"] { color: #895324 !important; font-weight: bold !important; }
        body:not(.dark-mode) .dropdown-item[onclick*="'parteikanal'"] { color: #576623 !important; font-weight: bold !important; }
        body:not(.dark-mode) .dropdown-item[onclick*="'creator'"] { color: #7E2F2F !important; font-weight: bold !important; }

        /* --- SEARCH --- */
        .search-input { flex: 1; border-radius: 8px; border: 1px solid #D5E5DD; font-size: 11px; font-family: 'Nunito Sans', 'Nunito Fallback', Arial, sans-serif; height: 30px; padding: 0 8px; outline: none; box-sizing: border-box; background: #f5f8f6; }
        .rss-search-input { transition: border-color 0.3s ease, box-shadow 0.3s ease !important; }
        /* Dark: lock fill/text/font-size in all states; only the border shines. */
        body.dark-mode input#s-search,
        body.dark-mode input#s-search:hover,
        body.dark-mode input#s-search:focus,
        body.dark-mode input#s-search:active,
        body.dark-mode input#s-search:not(:placeholder-shown) {
            background-color: #004731 !important; color: #D5E5DD !important; -webkit-text-fill-color: #D5E5DD !important; font-size: 11px !important; }
        body.dark-mode input#s-search::placeholder { color: #D5E5DD !important; }
        body.dark-mode input#s-search:hover,
        body.dark-mode input#s-search:focus { outline: none; border-color: #008a5e !important; box-shadow: 0 0 6px rgba(0,150,103,0.4) !important; }
        #s-search { border-radius: 8px !important; border: 1px solid #D5E5DD; padding: 6px 12px; height: 30px; outline: none; box-sizing: border-box; transition: all 0.3s ease-in-out !important; }

        /* --- DARK MODE TOGGLE --- */
        #dark-mode-toggle {
            width: 30px; height: 30px; border-radius: 50%;
            border: 1px solid #008a5e; background-color: #008a5e;
            color: #EAF2EE; cursor: pointer; display: flex;
            align-items: center; justify-content: center;
            padding: 0; overflow: hidden !important;
            font-size: 0 !important; line-height: 0 !important;
            transition: all 0.3s ease-in-out !important;
        }
        #dark-mode-toggle svg { display: block; pointer-events: none; }
        body:not(.dark-mode) #dark-mode-toggle:hover { background-color: #007550 !important; border-color: #007550 !important; color: #EAF2EE !important; }

        /* --- UNTERSTÜTZEN (rund, wie Hell/Dunkel, 17.10.2026) --- */
        #nso-support-btn {
            width: 30px; height: 30px; border-radius: 50%; box-sizing: border-box;
            border: 1px solid #008a5e; background-color: #008a5e;
            color: #EAF2EE; cursor: pointer; display: flex;
            align-items: center; justify-content: center;
            padding: 0; text-decoration: none;
            transition: all 0.3s ease-in-out !important;
        }
        #nso-support-btn svg { display: block; pointer-events: none; }
        body:not(.dark-mode) #nso-support-btn:hover { background-color: #007550 !important; border-color: #007550 !important; color: #EAF2EE !important; }
        body.dark-mode #nso-support-btn { background-color: #007550 !important; border: 1px solid #007550 !important; color: #EAF2EE !important; }
        body.dark-mode #nso-support-btn:hover { background-color: #008a5e !important; border-color: #008a5e !important; box-shadow: 0 0 6px rgba(0,150,103,0.4) !important; }
        body.dark-mode #nso-support-btn:focus:not(:hover) { outline: none !important; box-shadow: none !important; }

        /* --- CARDS --- */
        body:not(.dark-mode) .rss-content-center { max-width: 700px; margin: 15px auto !important; background: #B8CFC6; }
        body.dark-mode .rss-content-center { max-width: 700px; margin: 15px auto !important; }

        @media (min-width: 769px) {
            body:not(.dark-mode) .rss-main-wrapper::before,
            body:not(.dark-mode) .rss-main-wrapper::after,
            body.dark-mode .rss-main-wrapper::before,
            body.dark-mode .rss-main-wrapper::after {
                content: '';
                position: fixed;
                top: 0;
                bottom: 0;
                width: calc(var(--nso-vw, 100vw) / 2 - 370px);
                z-index: 0;
                pointer-events: none;
                -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
                mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
            }
            body:not(.dark-mode) .rss-main-wrapper::before {
                left: 0;
                background: linear-gradient(to right, #A6BEB4, #B8CFC6);
            }
            body:not(.dark-mode) .rss-main-wrapper::after {
                right: 0;
                background: linear-gradient(to left, #A6BEB4, #B8CFC6);
            }
            body.dark-mode .rss-main-wrapper::before {
                left: 0;
                background: linear-gradient(to right, #0A1F14, #143325);
            }
            body.dark-mode .rss-main-wrapper::after {
                right: 0;
                background: linear-gradient(to left, #0A1F14, #143325);
            }
        }

        .rss-card { padding: 16px; padding-left: 20px; margin-bottom: 12px; border-radius: 4px 12px 12px 4px; display: flex; flex-direction: column; gap: 10px; border-left: 6px solid #D5E5DD; background: #D5E5DD; box-shadow: 0 2px 5px rgba(0,71,49,0.08); cursor: pointer; }
        .rss-card:hover { transform: translateY(-4px); box-shadow: 0 8px 15px rgba(0,71,49,0.15); transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, filter 0.3s ease; }
		/* Der Browser legt beim Antippen eine eigene helle Fläche über die Karte. */
        .rss-card, .nso-save-btn { -webkit-tap-highlight-color: transparent; }
        .rss-card:active { transform: translateY(-2px) !important; box-shadow: 0 4px 8px rgba(0,0,0,0.12) !important; transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.1s ease, filter 0.1s ease !important; }
        /* Day hover/active: brighten the card's OWN category background by 3%.
           One rule replaces the 8 near-identical per-category tints. */
        body:not(.dark-mode) .rss-card:hover  { filter: brightness(1.03); }
        body:not(.dark-mode) .rss-card:active { filter: brightness(1.03); }

        /* Category cards */
        .rss-card[data-cat*="behoerden"] { border-left-color: #7A7A72 !important; background-color: #D5E5DD !important; }
        .rss-card[data-cat*="medien"] { border-left-color: #7A72A8 !important; background-color: #D5E5DD !important; }
        .rss-card[data-cat*="neue medien"] { border-left-color: #7C5D77 !important; background-color: #D5E5DD !important; }
        .rss-card[data-cat*="creator"] { border-left-color: #A85757 !important; background-color: #D5E5DD !important; }
        .rss-card[data-cat*="parteikanal"] { border-left-color: #97AB54 !important; background-color: #D5E5DD !important; }
        .rss-card[data-cat*="bewegung"] { border-left-color: #BB7C46 !important; background-color: #D5E5DD !important; }
        /* card hover: lift + shadow only, no background change */

        .rss-flex { display: flex; gap: 16px; align-items: flex-start; position: relative; padding-top: 5px; }
        .rss-head-link { text-decoration: none; color: #007550; font-size: 17px; font-weight: bold; line-height: 1.3; }
        /* A single long word (a URL, a German compound) can otherwise stretch the
           card past the column and take the whole page sideways with it. */
        .rss-card, .rss-head-link, .rss-excerpt, .rss-source-name, .rss-metadata,
        .rss-weitere-badge { overflow-wrap: anywhere; word-break: break-word; }
        .rss-card { max-width: 100%; box-sizing: border-box; }
        a.rss-excerpt { text-decoration: none !important; color: #455E51 !important; }
        a.rss-excerpt:hover { text-decoration: none !important; color: #455E51 !important; }
        .rss-thumb-wrap { position: relative; width: 90px; height: 90px; flex-shrink: 0; border-radius: 8px; overflow: hidden; background: #D5E5DD; }
        .rss-thumb { width: 100%; height: 100%; object-fit: cover; }
        .video-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 32px; height: 32px; background: rgba(0, 71, 49, 0.75); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
        .video-overlay::after { content: ''; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid #EAF2EE; margin-left: 2px; }

        /* --- DAY MODE BACKGROUNDS --- */
        body:not(.dark-mode),
        body:not(.dark-mode) .rss-main-wrapper,
        body:not(.dark-mode) .rss-content-center,
        body:not(.dark-mode) #rss-list { background-color: #B8CFC6 !important; }
        body:not(.dark-mode) .rss-sticky-bar { background-color: #EAF2EE !important; }
        body:not(.dark-mode) .rss-card[data-cat*="medien"] { background-color: #D5E5DD !important; }
        body:not(.dark-mode) .rss-card[data-cat*="neue medien"] { background-color: #D5E5DD !important; }
        body:not(.dark-mode) .rss-card[data-cat*="creator"] { background-color: #D5E5DD !important; }
        body:not(.dark-mode) .rss-card[data-cat*="parteikanal"] { background-color: #D5E5DD !important; }
        body:not(.dark-mode) .rss-card:not([data-cat*="behoerden"]):not([data-cat*="medien"]):not([data-cat*="creator"]):not([data-cat*="parteikanal"]):not([data-cat*="bewegung"]):not([data-cat*="ots"]) { background-color: #D5E5DD !important; }

        /* Day Mode hover glows */
        /* Resting weight comes from an inset ring, not a thicker border, so the
           hover hairline replaces it without the element changing size. */
        body:not(.dark-mode) .dropdown-trigger { box-shadow: inset 0 0 0 1px #D5E5DD;
            background: #f5f8f6 !important; background-color: #f5f8f6 !important; }
        body:not(.dark-mode) .dropdown-trigger:hover { border-color: #008a5e !important; box-shadow: 0 0 8px rgba(0, 138, 94, 0.15) !important; transition: all var(--nso-dur) var(--nso-ease) !important; }
        body:not(.dark-mode) .slider-container:hover { box-shadow: inset 0 0 10px rgba(0, 117, 80, 0.2) !important; transition: all var(--nso-dur) var(--nso-ease) !important; }

        /* --- SCROLL BUTTON --- */
        #rss-scroll-btn {
            position: fixed !important; bottom: 135px; z-index: 2147483647; left: calc(50% + 355px);
            width: 45px; height: 45px; border-radius: 50%;
            background: #007550; color: #EAF2EE;
            display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1;
            cursor: pointer; border: 1px solid #455E51;
            
            opacity: 0; visibility: hidden;
            transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.2s ease, background-color 0.2s ease;
        }
        #rss-scroll-btn.show { opacity: 1; visibility: visible; }
        #rss-scroll-btn:hover { background-color: #004731; }
        body:not(.dark-mode) #rss-scroll-btn { background-color: #008a5e !important; border: 1px solid #008a5e !important; box-shadow: none !important; }
        body:not(.dark-mode) #rss-scroll-btn:hover { background-color: #007550 !important; border-color: #007550 !important; color: #EAF2EE !important; box-shadow: 0 4px 15px rgba(0,71,49,0.35) !important; }

        #rss-transparenz-btn {
            position: fixed !important; bottom: 80px; z-index: 2147483647;
            left: calc(50% + 355px);
            width: 45px; height: 45px; border-radius: 50%;
            background: #007550; color: #EAF2EE;
            display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1;
            cursor: pointer; border: 1px solid #455E51;
            
            opacity: 0; visibility: hidden;
            transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.2s ease, background-color 0.2s ease;
        }
        #rss-transparenz-btn.show { opacity: 1; visibility: visible; }
        body:not(.dark-mode) #rss-transparenz-btn { background-color: #008a5e !important; border: 1px solid #008a5e !important; box-shadow: none !important; }
        body:not(.dark-mode) #rss-transparenz-btn:hover { background-color: #007550 !important; border-color: #007550 !important; color: #EAF2EE !important; box-shadow: 0 4px 15px rgba(0,71,49,0.35) !important; }

        /* Desktop: buttons a quarter smaller than the 45px mobile size. */
        @media (min-width: 769px) {
            #rss-scroll-btn, #rss-transparenz-btn {
                width: 34px; height: 34px; font-size: 15px;
            }
        }
        /* 24px clear of the card column, matching the Worum-gehts button.
           Only on WIDE desktop (≥870px) where there's room beside the 700px
           column. Below that, the buttons move to the bottom-right corner (same
           as mobile) rather than disappearing — one clean handoff, never over cards. */
        @media (min-width: 870px) {
            #rss-scroll-btn, #rss-transparenz-btn {
                left: min(calc(50% + 374px), calc(100% - 50px));
                bottom: auto;
            }
            #rss-scroll-btn      { top: calc(50% - 39px); }
            #rss-transparenz-btn { top: calc(50% + 5px); }
        }
        /* Narrow desktop (769–869px): no room beside the column → bottom-right
           corner, identical to the mobile placement. Consistent, never overlaps. */
        @media (min-width: 769px) and (max-width: 869px) {
            #rss-scroll-btn, #rss-transparenz-btn {
                left: auto !important; right: 16px !important; top: auto !important;
            }
            #rss-scroll-btn      { bottom: 85px !important; }
            #rss-transparenz-btn { bottom: 30px !important; }
        }

        /* --- AUDIO PLAYER --- */
        /* --- AUDIO PLAYER --- */
        audio { border-radius: 20px; outline: none; }
        body:not(.dark-mode) audio { accent-color: #007550; }
        body.dark-mode audio { accent-color: #008a5e; }

        /* =============================================
           CLICK BUBBLE SYSTEM — UNIFIED (Day + Dark)
           data-heat: low | mid | high | max
           ============================================= */

        /* Base shape — shared by both bubble types */
        .click-bubble {
            display: inline-flex;
            align-items: center;
            font-size: 10px;
            font-weight: 800;
            padding: 2px 7px;
            border-radius: 4px;
            line-height: 1;
            transition: background-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
        }
        /* Article clicks variant: slightly tighter, sits inline in metadata row */
        .click-bubble--inline {
            font-size: 10px;
            padding: 2px 6px;
            border-radius: 3px;
        }

        /* Farben: siehe Block "KLICK-BLASEN IN KATEGORIEFARBE" am Dateiende. */

        /* --- DARK MODE: GLOBAL SURFACES --- */
        html.dark-mode,
        html.dark-mode,
        body.dark-mode,
        html body.dark-mode,
        body.dark-mode .rss-main-wrapper,
        body.dark-mode .rss-content-center,
        body.dark-mode #rss-list,
        body.dark-mode #page,
        body.dark-mode #content,
        body.dark-mode #primary,
        body.dark-mode .site,
        body.dark-mode .site-content,
        body.dark-mode .entry-content { background-color: #143325 !important; }
        html { background-color: #B8CFC6; }
        html.dark-mode { background-color: #143325 !important; }

        body.dark-mode .rss-sticky-bar { background-color: #004731 !important; border-top: none !important; border-bottom: none !important; box-shadow: 0 4px 15px rgba(0,0,0,0.6) !important; }
        body.dark-mode .rss-card,
        body.dark-mode .dropdown-menu,
        body.dark-mode .dropdown-item,
        body.dark-mode .dropdown-header,
        body.dark-mode .slider-container,
        body.dark-mode #s-search { background-color: #004731 !important; }
        body.dark-mode .dropdown-trigger { background-color: #007550 !important; border-color: #007550 !important; color: #EAF2EE !important; }
        body.dark-mode .rss-card { border-top: 1px solid #005A3F !important; border-right: 1px solid #005A3F !important; border-bottom: 1px solid #005A3F !important; }
        body.dark-mode .rss-card[data-cat*="bewegung"] { border-left-color: #BB7C46 !important; background-color: #004731 !important; }

        body.dark-mode .slider-container,
        body.dark-mode #s-search { border: var(--nso-field-bw) solid #007550 !important; box-shadow: none !important; }
        body.dark-mode .dropdown-menu { border: 1px solid #007550 !important; box-shadow: none !important; }
        /* ── DESKTOP HEADER: Mein + Settings as filled green pills ─────────
           The gear/label ride on currentColor, so #EAF2EE gives the light gear
           outline on green. */
        .nso-viewlink.nso-fill { background: #008a5e; border-color: #008a5e; color: #EAF2EE; }
        @media (min-width: 769px) and (hover: hover) {
            body:not(.dark-mode) .nso-viewlink.nso-fill { border-width: 1px; }
        }
        @media (hover: hover) {
            body:not(.dark-mode) .nso-viewlink.nso-fill:hover:not(.nso-active) { background: #007550; border-color: #007550; color: #EAF2EE; box-shadow: none; }
            body:not(.dark-mode) .nso-viewlink.nso-fill:hover:not(.nso-active) .nso-viewmark { filter: none; }
        }
        body:not(.dark-mode) .nso-viewlink.nso-fill:active { background: #007550 !important; border-color: #007550 !important; color: #EAF2EE !important; box-shadow: none !important; }
        body.dark-mode .nso-viewlink.nso-fill { background: #007550; border-color: #007550; color: #EAF2EE; }
        @media (hover: hover) {
            body.dark-mode .nso-viewlink.nso-fill:hover:not(.nso-active) { background: #008a5e; border-color: #008a5e; color: #EAF2EE; box-shadow: 0 0 6px rgba(0,150,103,0.4); }
        }
        body.dark-mode .nso-viewlink.nso-fill:active { background: #008a5e !important; border-color: #008a5e !important; color: #EAF2EE !important; box-shadow: 0 0 6px rgba(0,150,103,0.4) !important; }

        /* Filter Reset, day hover: one step darker than the resting chip. */
        @media (hover: hover) {
            body:not(.dark-mode) .rss-reset-btn:hover { background: #D5E5DD !important; }
        }

        body.dark-mode .rss-brand-box { border-right: none !important; }
        /* both modes use same logo — dark mode logo has #EAF2EE fill matching both headers */
        .rss-logo-img { margin-right: -8px; transition: filter 0.28s ease; cursor: pointer; }
        .mob-logo, .mob-logo-dark { transition: opacity 0.15s ease; }
        /* Day: soft green glow only. Dark: slight brighten + same soft glow. No darkening. */
        body:not(.dark-mode) .rss-logo-img:hover { filter: drop-shadow(0 0 5px rgba(0,138,94,0.20)) drop-shadow(0 0 9px rgba(0,138,94,0.15)); }
      body.dark-mode .rss-logo-img:hover { filter: drop-shadow(0 0 1px rgba(0,138,94,0.40)) drop-shadow(0 0 9px rgba(78,226,164,0.4)) brightness(1.1); }

        body.dark-mode .dropdown-item,
        body.dark-mode .dropdown-header { border-bottom: 1px solid rgba(0,150,103,0.1) !important; }
        body.dark-mode .dropdown-item { color: #008a5e !important; }
        body.dark-mode .dropdown-item[onclick*="'behoerden'"]   { border-left: 3px solid #7A7A72 !important; }
        body.dark-mode .dropdown-item[onclick*="'medien'"]      { border-left: 3px solid #7A72A8 !important; }
        body.dark-mode .dropdown-item[onclick*="'neue medien'"] { border-left: 3px solid #7C5D77 !important; }
        body.dark-mode .dropdown-item[onclick*="'ots'"]         { border-left: 3px solid #508796 !important; }
        body.dark-mode .dropdown-item[onclick*="'bewegung'"]    { border-left: 3px solid #BB7C46 !important; }
        body.dark-mode .dropdown-item[onclick*="'parteikanal'"] { border-left: 3px solid #97AB54 !important; }
        body.dark-mode .dropdown-item[onclick*="'creator'"]     { border-left: 3px solid #A85757 !important; }

        body.dark-mode .rss-card:hover { background-color: #005A3F !important; }
        body.dark-mode .dropdown-item:hover { background-color: #005A3F !important; color: #EAF2EE !important; }
        body.dark-mode .rss-card[data-cat*="behoerden"] { border-left-color: #7A7A72 !important; }
        body.dark-mode .rss-card[data-cat*="parteikanal"] { border-left-color: #97AB54 !important; }
        body.dark-mode .rss-card[data-cat*="creator"] { border-left-color: #A85757 !important; }
        body.dark-mode .rss-card[data-cat*="creator"]:hover { background-color: #005A3F !important; }
        body.dark-mode .rss-card:active { background-color: #005A3F !important; transform: translateY(-2px) !important; transition: transform 0.1s ease, background-color 0.1s ease !important; }
        /* Prevent hover sticking on touch — active states handled via JS touchflash */
        @media (hover: none) {
            .rss-card:hover { transform: none !important; box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important; background-color: inherit !important; }
            body.dark-mode .rss-card:hover { background-color: #004731 !important; }
        }
        /* JS touch flash class */
        .rss-card.touch-flash { transition: background-color 0.1s ease !important; }
        body.dark-mode .rss-card.touch-flash { background-color: #005A3F !important; }

        body.dark-mode #s-search::placeholder { color: #D5E5DD !important; opacity: 1; }

        /* Dark Mode slider */
        body.dark-mode .slider-container { background-color: #004731 !important; padding: 2px !important; display: flex !important; align-items: center !important; }
        body.dark-mode .slider-bg { top: 50% !important; transform: translateY(-50%) !important; height: 24px !important; background-color: #007550 !important; transition: left 0.3s ease, width 0.3s ease, background-color 0.3s ease !important; }
        body.dark-mode .slider-container:not(:hover) .slider-bg { background-color: #007550 !important; }
        body.dark-mode .slider-container:hover .slider-bg { background-color: #008a5e !important; }
        body.dark-mode .slider-opt:hover { color: #EAF2EE !important; -webkit-text-fill-color: #EAF2EE !important; }

        /* Dark Mode text colors */
        body.dark-mode .rss-head-link,
        body.dark-mode .slider-opt,
        body.dark-mode .dropdown-item,
        body.dark-mode #s-search { color: #D5E5DD !important; }
        body.dark-mode .dropdown-trigger { color: #EAF2EE !important; }
        body.dark-mode .rss-head-link,
        body.dark-mode .rss-excerpt { color: #D5E5DD !important; -webkit-text-fill-color: #D5E5DD !important; transition: color 0.6s ease-in-out, -webkit-text-fill-color 0.6s ease-in-out !important; }
        body.dark-mode .rss-source-name { color: var(--nso-meta, #87A696) !important; -webkit-text-fill-color: var(--nso-meta, #87A696) !important; }
		
		        .rss-flag-src-wrap { display: inline-flex; align-items: center; gap: 5px; }
        .nso-flag-src {
            width: 12px; height: 12px;
            display: inline-block;
            vertical-align: -2px;
            margin-left: 5px;
            flex: 0 0 auto;
        }
        /* ── CATEGORY BADGE COLORS ── */
        .rss-cat-ots      { font-weight: bold; color: #2F6A7A; }
        .rss-cat-medien   { font-weight: bold; color: #443E65; }
        .rss-cat-neuem    { font-weight: bold; color: #6F3E67; }
        .rss-cat-bewegung { font-weight: bold; color: #895324; background: transparent; }
        .rss-cat-parteikanal { font-weight: bold; color: #576623; background: transparent; }
        .rss-cat-behoerden { font-weight: bold; color: #636346; background: transparent; }
        .rss-cat-creator  { font-weight: bold; color: #7E2F2F; }
		                
        body.dark-mode .rss-cat-ots,
        body.dark-mode .rss-cat-medien,
        body.dark-mode .rss-cat-neuem,
        body.dark-mode .rss-cat-parteikanal,
        body.dark-mode .rss-cat-behoerden,
        body.dark-mode .rss-cat-creator  { color: #D5E5DD !important; -webkit-text-fill-color: #D5E5DD !important; }
        body.dark-mode .rss-cat-bewegung { color: #D5E5DD !important; -webkit-text-fill-color: #D5E5DD !important; }
        html body.dark-mode span.rss-cat-special { color: #D5E5DD !important; -webkit-text-fill-color: #D5E5DD !important; border: 1px solid #D5E5DD !important; border-radius: 3px; padding: 1px 5px; }
        html body:not(.dark-mode) span.rss-cat-special { color: #143325 !important; border: 1px solid #143325 !important; border-radius: 3px; padding: 1px 5px; }
        body.dark-mode .rss-metadata,
        body.dark-mode .rss-metadata span:not([id^="art-clicks-"]):not([id^="src-clicks-"]):not(.rss-cat-special):not(.rss-ots-badge):not(.rss-cat-ots):not(.rss-cat-medien):not(.rss-cat-neuem):not(.rss-cat-bewegung):not(.rss-cat-parteikanal):not(.rss-cat-behoerden):not(.rss-cat-creator):not(.rss-cat-aktivistisch) { color: var(--nso-meta, #87A696) !important; -webkit-text-fill-color: var(--nso-meta, #87A696) !important; }
        body.dark-mode .rss-cat-ots      { color: #D5E5DD !important; -webkit-text-fill-color: #D5E5DD !important; }
        body.dark-mode .rss-cat-medien   { color: #D5E5DD !important; -webkit-text-fill-color: #D5E5DD !important; }
        body.dark-mode .rss-cat-neuem    { color: #D5E5DD !important; -webkit-text-fill-color: #D5E5DD !important; }
        body.dark-mode .rss-cat-bewegung { color: #D5E5DD !important; -webkit-text-fill-color: #D5E5DD !important; }
        body.dark-mode .rss-cat-parteikanal { color: #D5E5DD !important; -webkit-text-fill-color: #D5E5DD !important; }
        body.dark-mode .rss-cat-creator  { color: #D5E5DD !important; -webkit-text-fill-color: #D5E5DD !important; }

        /* Dark Mode dropdown headers */
        body.dark-mode .dropdown-header { background-color: #008a5e !important; color: #143325 !important; font-weight: 900 !important; text-transform: uppercase; letter-spacing: 1px; padding: 4px 10px !important; }
        /* Dark mode active selected item — brand green text */
        body.dark-mode .dropdown-item.active { color: #EAF2EE !important; background-color: #005A3F !important; }
        body.dark-mode .dropdown-trigger::after { color: #D5E5DD !important; opacity: 1 !important; font-size: 9px !important; }

        /* Dark Mode hover glows on UI controls */
        body.dark-mode .dropdown-trigger:hover { box-shadow: var(--nso-glow) !important; transition: all var(--nso-dur) var(--nso-ease) !important; }
        body.dark-mode .dropdown-trigger:hover { background-color: #008a5e !important; border-color: #008a5e !important; }
        /* Dark: sliding bars get the same border + shine as the search field. */
        body.dark-mode .slider-container:hover { border-color: #008a5e !important; box-shadow: 0 0 6px rgba(0,150,103,0.4) !important; transition: all 0.3s ease-in-out !important; }
        body.dark-mode .dropdown-trigger:hover,
        body.dark-mode .dropdown-item:hover,
        body.dark-mode .slider-opt:hover { color: #EAF2EE !important; }
        body.dark-mode .dropdown-trigger:hover::after { color: #EAF2EE !important; }

        /* Dark Mode image hover */
        body.dark-mode .rss-card:hover img { filter: brightness(1.1) !important; transition: filter 0.3s ease !important; }
        body.dark-mode .rss-card:hover .rss-img-container { border-color: #008a5e !important; transition: border-color 0.3s ease !important; }

        /* Dark Mode toggle button */
        body.dark-mode #dark-mode-toggle { background-color: #007550 !important; border: 1px solid #007550 !important; color: #EAF2EE !important; outline: none !important; display: flex !important; align-items: center !important; justify-content: center !important; -webkit-appearance: none; transition: all 0.3s ease-in-out !important; }
        body.dark-mode #dark-mode-toggle:hover { background-color: #008a5e !important; border-color: #008a5e !important; color: #EAF2EE !important; outline: none !important; box-shadow: 0 0 6px rgba(0,150,103,0.4) !important; }
        body.dark-mode #dark-mode-toggle:active { background-color: #007550 !important; outline: none !important; }
        body.dark-mode #dark-mode-toggle:focus:not(:hover) { outline: none !important; box-shadow: none !important; }

        @media (max-width: 768px) {
            #rss-scroll-btn, #rss-transparenz-btn {
                left: auto !important;
                right: 16px !important;
                position: fixed !important;
            }
            #rss-transparenz-btn { bottom: 30px !important; }
            #rss-scroll-btn { bottom: 85px !important; }
            .rss-footer { padding-bottom: 110px !important; }
            .rss-footer::before { width: 100% !important; }
            body.dark-mode { background-color: #0A1F14 !important; }
            html.dark-mode { background-color: #0A1F14 !important; }
            body.dark-mode .rss-main-wrapper,
            body.dark-mode .rss-content-center,
            body.dark-mode #rss-list,
            body.dark-mode #page,
            body.dark-mode #content,
            body.dark-mode #primary,
            body.dark-mode .site,
            body.dark-mode .site-content,
            body.dark-mode .entry-content { background-color: #0A1F14 !important; }
                        body.dark-mode .rss-card[data-cat*="bewegung"] { background-color: #004731 !important; }

                        /* Variablen kennen keinen Spezifitätskampf: die Regel auf Zeile 2318
               bleibt, nur ihr Farbwert kommt mobil anders herein. */
            body.dark-mode { --nso-meta: #D5E5DD; }
            html body.dark-mode .rss-weitere-badge {
                color: #D5E5DD !important;
                -webkit-text-fill-color: #D5E5DD !important;
            }
            /* Der Modus-Knopf zeigt den aktuell aktiven Zustand an, ist also
               immer aktiv — nie in der Ruhefarbe der Filterknöpfe. */
            html body #mob-dark-btn,
            html body.dark-mode #mob-dark-btn {
                background: #008a5e !important;
                border-color: #008a5e !important;
                color: #EAF2EE !important;
            }
			
			            html body.dark-mode .nso-save-btn { color: #D5E5DD !important; }
            html body.dark-mode .nso-save-btn.nso-saved { color: #D5E5DD !important; }
			
			            /* Tagesmodus: das Grau auf den Karten liest sich schlecht, und die
               grüne Schlagzeile wirkt neben den grünen Bedienelementen wie ein
               Zustand statt wie Text. Alles auf den Ton der Kopfzeilenschrift. */
            html body:not(.dark-mode) .rss-source-name,
            html body:not(.dark-mode) .rss-sender,
            html body:not(.dark-mode) .rss-weitere-badge,
            html body:not(.dark-mode) .rss-head-link,
            html body:not(.dark-mode) .rss-excerpt,
            html body:not(.dark-mode) .nso-save-btn,
            html body:not(.dark-mode) .rss-cats-group,
            html body:not(.dark-mode) .rss-metadata span:not(.rss-cat-medien):not(.rss-cat-neuem):not(.rss-cat-creator):not(.rss-cat-bewegung):not(.rss-cat-parteikanal):not(.rss-cat-behoerden):not(.rss-cat-ots):not(.rss-cat-special):not(.rss-ots-badge):not(.rss-src-freq):not(.click-bubble):not([id^="art-clicks-"]):not([id^="src-clicks-"]) {
                color: #0A1F14 !important;
                -webkit-text-fill-color: #0A1F14 !important;
            }
            html body:not(.dark-mode) .nso-flag-src { border-color: #0A1F14 !important; }
			
			        
			
            .rss-main-wrapper::before,
            .rss-main-wrapper::after { display: none !important; }
        }

        @media (display-mode: standalone) {
            #rss-scroll-btn, #rss-transparenz-btn {
                left: auto !important;
                right: 16px !important;
            }
            #rss-transparenz-btn { bottom: 30px !important; }
            #rss-scroll-btn { bottom: 85px !important; }
            .rss-footer { padding-bottom: 110px !important; }
            .rss-mobile-header {
                padding-top: env(safe-area-inset-top, 0px) !important;
            }
            body { background-color: #D5E5DD !important; }
            body.dark-mode { background-color: #0A1F14 !important; }
            body.dark-mode .rss-mobile-header { background: #143325 !important; }
            body:not(.dark-mode) .rss-mobile-header { background: #EAF2EE !important; }
        }
        body.dark-mode #rss-scroll-btn { background-color: #007550 !important; border: 1px solid #008a5e !important; color: #EAF2EE !important; transition: all 0.3s ease !important; }
        body.dark-mode #rss-scroll-btn:hover { background-color: #008a5e !important; border-color: #008a5e !important; box-shadow: 0 0 6px rgba(0,150,103,0.4) !important; color: #EAF2EE !important; }
        body.dark-mode #rss-transparenz-btn { background-color: #007550 !important; border: 1px solid #008a5e !important; color: #EAF2EE !important; transition: all 0.3s ease !important; }
        body.dark-mode #rss-transparenz-btn:hover { background-color: #008a5e !important; border-color: #008a5e !important; box-shadow: 0 0 6px rgba(0,150,103,0.4) !important; color: #EAF2EE !important; }

        /* --- FOOTER --- */
        .rss-footer { max-width: 700px; margin: 40px auto; padding: 20px; text-align: center; position: relative; border: none !important; border-top: none !important; color: #008a5e; font-size: 12px; overflow: visible; }
        .rss-footer::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: var(--nso-vw, 100vw); height: 0; border-top: 2px dotted #597868; z-index: 1; }
        .rss-footer::before { border-color: #008a5e !important; }

        .rss-footer a { color: #008a5e !important; text-decoration: none !important; display: inline; padding-bottom: 2px; margin: 0 10px; transition: color 0.3s ease !important; outline: none !important; white-space: nowrap; }
        /* Remove focus outlines globally */
        a:focus, button:focus, div:focus, span:focus { outline: none !important; box-shadow: none !important; }
        .rss-footer a:hover { color: #007550 !important; }
        .rss-footer a:focus { outline: none !important; box-shadow: none !important; }
        body.dark-mode .rss-footer,
        body.dark-mode .rss-footer div,
        body.dark-mode .rss-footer .disclaimer,
        body.dark-mode .rss-copyright { color: #008a5e !important; background-color: transparent; }
        body.dark-mode .rss-footer { background-color: #143325 !important; }
        body.dark-mode #feed-counter-text { color: #008a5e !important; }
        body.dark-mode .rss-copyright { color: #008a5e !important; }
        body.dark-mode .disclaimer { color: #008a5e !important; }
        body.dark-mode .rss-footer p,
        body.dark-mode .rss-footer span:not(.rss-footer a) { color: #87A696 !important; }
        @media (max-width: 768px) {
            body.dark-mode .rss-footer { background-color: #0A1F14 !important; }
        }
        body.dark-mode .rss-footer a { color: #008a5e !important; transition: color 0.2s ease; }
        body.dark-mode .rss-footer a:hover { color: #30956C !important; }

                /* Fußnoten-Links halbfett: besser lesbar bei geringem Kontrast. */
        .rss-footer a { font-weight: 600; }

        body.dark-mode .disclaimer { color: #597868 !important; }
        .disclaimer { font-size: 10px; line-height: 1.4; margin-top: 15px; color: #008a5e; font-style: italic; }

        /* --- MOBILE --- */
        /* ── MOBILE HEADER (≤768px only) ─────────────────────────── */
        .rss-mobile-header { display: none; }
        @media (max-width: 768px) {
            /* Hide entire desktop sticky bar */
            .rss-sticky-bar { display: none !important; }

            /* Show mobile header */
            .rss-mobile-header {
                display: block;
                position: sticky;
                top: 0;
                z-index: 999999;
                background: #EAF2EE;
                box-shadow: 0 4px 15px rgba(0,71,49,0.15);
                width: var(--nso-vw, 100vw);
                margin-left: calc(50% - var(--nso-vw, 100vw) / 2);
                box-sizing: border-box;
                overflow: visible;
            }
            .admin-bar .rss-mobile-header { top: 46px; }
            .mob-sort-wrapper {
                width: 100%;
                overflow-x: hidden;
            }

            /* Top bar: logo + icons */
            .mob-topbar {
                display: flex;
                align-items: center;
                justify-content: flex-start;
                gap: 16px;
                padding: 8px 16px;
                border-bottom: none;
                box-sizing: border-box;
            }
            .mob-logo { height: 40px; width: auto; display: block; flex-shrink: 0; }
            .mob-logo-dark { display: none; height: 40px; width: auto; flex-shrink: 0; }
            body.dark-mode .mob-logo { display: none; }
            body.dark-mode .mob-logo-dark { display: block; }
            .mob-brand-text { display: flex; align-items: center; flex: 1; min-width: 0; }
            .mob-mein-settings { display: inline-flex; align-items: center; gap: 4px;
                height: 34px; padding: 0 8px; border-radius: 8px;
                background: #D5E5DD; border: none; cursor: pointer;
                color: #0A1F14; text-decoration: none; flex: 0 0 auto; }
            .mob-mein-settings .nso-viewmark { width: 18px; height: 18px; display: block; object-fit: contain; }
            .mob-mein-settings .nso-gear svg { display: block; width: 15px; height: 15px; }
            body.dark-mode .mob-mein-settings { background: #005A3F; color: #EAF2EE; }
            .mob-brand-name { font-size: 15px; font-weight: 800; line-height: 1.2; }
            .mob-news { color: #008a5e; }
            .mob-oida { color: #C8102E; }
            .mob-brand-slogan { font-size: 9px; color: #597868; font-weight: 600; letter-spacing: 0.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
            body.dark-mode .mob-brand-slogan { color: #87A696; }
            .mob-icons { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
            .mob-icon-btn {
                width: 34px; height: 34px; border-radius: 8px;
                background: #D5E5DD; border: none; cursor: pointer;
                display: flex; align-items: center; justify-content: center;
                font-size: 16px; color: #0A1F14 !important; font-weight: 700;
                line-height: 1; flex-shrink: 0;
            }

            /* Sort chips row */
            .mob-sort-row {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                gap: 6px 5px;
                padding: 5px 16px;
                box-sizing: border-box;
                width: 100%;
            }
            .mob-sort-chip {
                flex: 0 0 auto;
                padding: 0 14px;
                height: 36px;
                border-radius: 50px;
                font-size: 12px;
                font-weight: 700;
                white-space: nowrap;
                border: 1.5px solid #D5E5DD;
                background: #D5E5DD;
                color: #0A1F14 !important;
                cursor: pointer;
                display: flex;
                align-items: center;
            }
            .mob-sort-chip.active {
                background: #008a5e;
                color: #EAF2EE;
                border-color: #008a5e;
            }
			/* Drei Sortierungen, eine Entscheidung — gleiche Bauform wie die
               Formatgruppe daneben, damit beide als Gruppe lesbar sind. */
           .mob-sort-tray { display: inline-flex; align-items: center; gap: 3px;
              padding: 3px; border-radius: 50px; background: #D5E5DD;
                width: 100%; box-sizing: border-box; position: relative; }
            body.dark-mode .mob-sort-tray { background: #005A3F; }
            /* Auf Höhe der Format-Knöpfe: beide Gruppen stehen nebeneinander. */
            .mob-sort-tray .mob-sort-chip { height: 30px; padding: 0 8px;
                border: none; flex: 1 1 0; min-width: 0;
                justify-content: center; font-size: clamp(10px, 3vw, 12px); }
            .mob-sort-group {
                display: inline-flex;
                align-items: center;
                gap: 0;
                border: 1.5px solid #D5E5DD;
                border-radius: 50px;
                overflow: hidden;
                flex: 0 0 auto;
                background: #D5E5DD;
            }
            .mob-sort-label {
                font-size: 12px;
                font-weight: 700;
                color: #143325;
                padding: 0 6px 0 10px;
                white-space: nowrap;
            }
            .mob-sort-arrow {
                font-size: 11px;
                font-weight: 700;
                color: #0A1F14 !important;
                background: #D5E5DD;
                border: none;
                padding: 0;
                cursor: pointer;
                min-width: 34px;
                min-height: 36px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .mob-sort-arrow-up {
                padding: 0 10px 0 12px;
                gap: 4px;
                font-size: 11px;
                border-right: 1px solid #B8CFC6; /* day mode — overridden in dark */
                min-width: auto;
            }
            .mob-sort-arrow.active { background: #008a5e; color: #EAF2EE !important; }
            .mob-filter-btn {
                flex: 1;
                padding: 7px 4px;
                border-radius: 8px;
                font-size: 11px;
                font-weight: 600;
                text-align: center;
                background: #008a5e;
                color: #EAF2EE;
                border: none;
                cursor: pointer;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                min-width: 0;
            }
            body.dark-mode .mob-sort-arrow-up { border-right-color: #007550 !important; }
            body.dark-mode .mob-sort-group { border: none !important; background: #005A3F; }
            body.dark-mode .mob-sort-label { color: #D5E5DD; }
            body.dark-mode .mob-sort-arrow { color: #D5E5DD; border-left: none; background: #005A3F; }
            body.dark-mode .mob-sort-arrow.active { background: #008a5e; color: #EAF2EE; }
            body.dark-mode .mob-sort-arrow.active:hover { background: #008a5e; color: #EAF2EE; }
            body.dark-mode .mob-search-btn { background: #005A3F; color: #D5E5DD; border: none !important; }
            body.dark-mode .mob-search-btn.active { background: #008a5e; border: none !important; color: #EAF2EE; }

            /* Filter row — only border separating menu from content */
            .mob-filter-row {
                display: flex;
                gap: 6px;
                padding: 5px 16px 7px;
                box-sizing: border-box;
                position: relative;
            }
            .mob-search-btn {
                flex: 0 0 34px;
                height: 34px;
                border-radius: 8px;
                background: #D5E5DD;
                border: 1.5px solid transparent;
                cursor: pointer;
                font-size: 16px;
                color: #0A1F14 !important;
                display: flex; align-items: center; justify-content: center;
                transition: border-color 0.2s ease;
            }
            .mob-search-btn.active { background: #008a5e; color: #EAF2EE; border: none; }
            .mob-dark-btn {
                flex: 0 0 34px;
                height: 34px;
                border-radius: 8px;
                background: #D5E5DD;
                border: none;
                cursor: pointer;
                font-size: 16px;
                color: #0A1F14 !important;
                display: flex; align-items: center; justify-content: center;
                font-weight: 700;
            }
/* Ruhefläche wie die Nachbarn — Grün heißt hier überall „eingeschaltet",
   ein dauerhaft grüner Knopf las sich als Zustand statt als Link. Der
   grüne Rahmen hebt ihn trotzdem heraus, ohne diese Sprache zu borgen. */
.mob-support-btn {
    flex: 0 0 34px;
    height: 34px;
    border-radius: 8px;
    background: #D5E5DD;
    border: 1.5px solid #008a5e;
    box-sizing: border-box;
    cursor: pointer;
    color: #008a5e !important;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none;
}
body.dark-mode .mob-support-btn { background: #005A3F; border-color: #008a5e; color: #D5E5DD !important; }
.mob-support-btn:active { background: #008a5e; border-color: #008a5e; color: #EAF2EE !important; }
            /* #3 mobile: menu lives in the header. Unterstützen + search +
               toggle ride the logo line's right edge (aligned with the filter
               row below). The Mein + Settings chips take the row below. */
            .mob-topbar-actions { display: flex; align-items: center; gap: 8px;
                margin-left: auto; flex-shrink: 0; }
            .mob-mein-chip {
                flex: 0 0 34px; height: 34px; border-radius: 8px;
                background: #D5E5DD; border: none; cursor: pointer;
                color: #0A1F14; text-decoration: none;
                display: flex; align-items: center; justify-content: center; }
            .mob-mein-chip svg { display: block; }
            .mob-mein-chip .nso-viewmark { width: 18px; height: 18px; display: block; object-fit: contain; }
            body.dark-mode .mob-mein-chip { background: #005A3F; color: #EAF2EE; }
            /* Mobile search bar (hidden until tapped) */
            .mob-search-bar {
                display: none;
                padding: 0 10px 6px;
                box-sizing: border-box;
                gap: 6px;
            }
            .mob-search-bar.open { display: flex; }
            .mob-search-bar input {
                flex: 1;
                padding: 7px 12px;
                border-radius: 0 0 8px 8px;
                border: none;
                font-size: 13px;
                background: #D5E5DD;
                color: #143325;
                outline: none;
            }
            .mob-search-bar input::placeholder { color: #597868; opacity: 1; }
            .mob-search-close {
                flex: 0 0 auto;
                background: transparent;
                border: none;
                color: #597868;
                font-size: 18px;
                cursor: pointer;
                padding: 0 4px;
                align-self: center;
                line-height: 1;
            }

            /* Mobile dropdowns */
            .mob-dropdown-panel {
                display: none;
                position: absolute;
                top: 100%;
                left: 8px; right: 8px;
                background: #EAF2EE;
                border-radius: 10px;
                border: 1px solid #008a5e;
                border-top: none;
                box-shadow: 0 8px 16px rgba(0,0,0,0.12);
                z-index: 9999999;
                overflow: hidden;
            }
            .mob-dropdown-panel.open { display: block; }
            .mob-dd-item {
                padding: 13px 16px;
                font-size: 15px;
                font-weight: 600;
                color: #0A1F14 !important;
                border-bottom: 1px solid #D5E5DD;
                cursor: pointer;
            }
            .mob-dd-item:last-child { border-bottom: none; }
            .mob-dd-item.active { color: #008a5e; }
            .mob-dd-item[onclick*="'behoerden'"].active   { color: #008a5e !important; }
            .mob-dd-item[onclick*="'ots'"].active        { color: #008a5e !important; }
            .mob-dd-item[onclick*="'medien'"].active      { color: #008a5e !important; }
            .mob-dd-item[onclick*="'neue medien'"].active { color: #008a5e !important; }
            .mob-dd-item[onclick*="'bewegung'"].active    { color: #008a5e !important; }
            .mob-dd-item[onclick*="'parteikanal'"].active { color: #008a5e !important; }
            .mob-dd-item[onclick*="'creator'"].active     { color: #008a5e !important; }

            /* Category colours in mobile dropdown — mirrors desktop */
            .mob-dd-item[onclick*="'behoerden'"]   { border-left: 4px solid #7A7A72; background-color: #F0F6F3; color: #636346 !important; font-weight: bold; }
            .mob-dd-item[onclick*="'ots'"]        { border-left: 4px solid #508796; background-color: #F0F6F3; color: #2F6A7A !important; font-weight: bold; }
            .mob-dd-item[onclick*="'medien'"]      { border-left: 4px solid #7A72A8; background-color: #F0F6F3; color: #443E65 !important; font-weight: bold; }
            .mob-dd-item[onclick*="'neue medien'"] { border-left: 4px solid #7C5D77; background-color: #F0F6F3; color: #6F3E67 !important; font-weight: bold; }
            .mob-dd-item[onclick*="'bewegung'"], .mob-dd-item[data-filter='bewegung'] { border-left: 4px solid #BB7C46; background-color: #F0F6F3; color: #895324 !important; font-weight: bold; }
            .mob-dd-item[onclick*="'parteikanal'"] { border-left: 4px solid #97AB54; background-color: #F0F6F3; color: #576623 !important; font-weight: bold; }
            .mob-dd-item[onclick*="'creator'"]     { border-left: 4px solid #A85757; background-color: #F0F6F3; color: #7E2F2F !important; font-weight: bold; }
            .mob-dd-item[onclick*="'behoerden'"]:hover,
            .mob-dd-item[onclick*="'ots'"]:hover,
            .mob-dd-item[onclick*="'medien'"]:hover,
            .mob-dd-item[onclick*="'neue medien'"]:hover,
            .mob-dd-item[onclick*="'bewegung'"]:hover,
            .mob-dd-item[onclick*="'parteikanal'"]:hover,
            .mob-dd-item[onclick*="'creator'"]:hover { background-color: transparent; }

            /* Dark mode: keep border-left colour, match brightness of other items */
            body.dark-mode .mob-dd-item[onclick*="'behoerden'"]   { background-color: #004731; color: #D5E5DD !important; border-left-color: #7A7A72; }
            body.dark-mode .mob-dd-item[onclick*="'ots'"]        { background-color: #004731; color: #D5E5DD !important; border-left-color: #508796; }
            body.dark-mode .mob-dd-item[onclick*="'medien'"]      { background-color: #004731; color: #D5E5DD !important; border-left-color: #7A72A8; }
            body.dark-mode .mob-dd-item[onclick*="'neue medien'"] { background-color: #004731; color: #D5E5DD !important; border-left-color: #7C5D77; }
            body.dark-mode .mob-dd-item[onclick*="'bewegung'"]    { background-color: #004731; color: #D5E5DD !important; border-left-color: #BB7C46; }
            body.dark-mode .mob-dd-item[onclick*="'parteikanal'"] { background-color: #004731; color: #D5E5DD !important; border-left-color: #97AB54; }
            body.dark-mode .mob-dd-item[onclick*="'creator'"]     { background-color: #004731; color: #D5E5DD !important; border-left-color: #A85757; }
            /* Active: brighter left border only */
            body.dark-mode .mob-dd-item[onclick*="'medien'"].active      { border-left-color: #7A72A8 !important; }
            body.dark-mode .mob-dd-item[onclick*="'neue medien'"].active { border-left-color: #7C5D77 !important; }
            body.dark-mode .mob-dd-item[onclick*="'behoerden'"].active    { border-left-color: #7A7A72 !important; }
            body.dark-mode .mob-dd-item[onclick*="'ots'"].active         { border-left-color: #508796 !important; }
            body.dark-mode .mob-dd-item[onclick*="'bewegung'"].active    { border-left-color: #BB7C46 !important; }
            body.dark-mode .mob-dd-item[onclick*="'parteikanal'"].active { border-left-color: #97AB54 !important; }
            body.dark-mode .mob-dd-item[onclick*="'creator'"].active     { border-left-color: #A85757 !important; }
            .mob-dd-header {
                padding: 8px 16px;
                font-size: 14px !important;
                font-weight: 900 !important;
                text-transform: uppercase;
                letter-spacing: 0.5px;
                color: #597868;
                background: #EAF2EE;
            }

            /* Dark mode mobile — matches desktop dark exactly */
            body.dark-mode .rss-mobile-header { background: #143325; box-shadow: 0 4px 15px rgba(0,0,0,0.6); }
            body.dark-mode .mob-topbar { border-bottom-color: #004731; }
            body.dark-mode .mob-icon-btn { background: #143325; color: #D5E5DD; border: 1px solid #143325; }
            body.dark-mode .mob-dark-btn { background: #005A3F; color: #EAF2EE; border: none !important; }
            body.dark-mode .mob-dark-btn:hover { background: #005A3F; border: none !important; }
            body.dark-mode .mob-sort-chip { border: none !important; color: #D5E5DD; background: #005A3F; }
            body.dark-mode .mob-sort-chip:hover { color: #EAF2EE; border: none !important; }
            body.dark-mode .mob-sort-chip.active { background: #008a5e; color: #EAF2EE; border: none !important; }
            body.dark-mode .mob-sort-chip.active:hover { background: #008a5e; border: none !important; }
            body.dark-mode .mob-sort-row { border-bottom-color: #004731; }
            body.dark-mode .mob-filter-btn { background: #008a5e; color: #EAF2EE; border-color: #008a5e; }
            body.dark-mode .mob-filter-btn:hover { background: #008a5e; border-color: #008a5e; }
            body.dark-mode .mob-filter-btn.active { background: #008a5e; border-color: #008a5e; color: #EAF2EE; }
            body.dark-mode .mob-search-btn:hover { color: #EAF2EE; background: #008a5e; border: none !important; }
            body.dark-mode .mob-search-bar input { background: #004731; color: #D5E5DD; border: none; }
            body.dark-mode .mob-search-bar input::placeholder { color: #87A696; opacity: 1; }
            body.dark-mode .mob-search-bar input:focus { border-color: #008a5e; box-shadow: 0 0 6px rgba(0,150,103,0.4); color: #EAF2EE; }
            body.dark-mode .mob-search-close { color: #87A696; }
            body.dark-mode .mob-dropdown-panel { background: #004731; border-color: #007550; }
            body.dark-mode .mob-dd-item { color: #D5E5DD; border-bottom-color: rgba(0,150,103,0.1); }
            body.dark-mode .mob-dd-item:hover { color: #D5E5DD; background: #005A3F; }
            body.dark-mode .mob-dd-item.active { color: #EAF2EE !important; background: #005A3F !important; border-left: 3px solid #008a5e; }
            body.dark-mode .mob-dd-header { background: #008a5e !important; color: #0A1F14 !important; font-weight: 900 !important; font-size: 14px !important; }

            /* Full width content on mobile */
            .rss-content-center { max-width: 100% !important; margin: 8px 0 !important; }
            .rss-card { padding: 12px 12px 12px 16px !important; }
        }

        /* ── KLICK-BLASEN IN KATEGORIEFARBE ──────────────────────────────
           Eine Palette für alle vier Zustände. --cbb ist NICHT die Kanten-
           farbe der Karte, sondern deren abgedunkelte Verwandte: je Farbe so
           weit heruntergezogen, dass die helle Schrift überall gleich gut
           sitzt (Kontrast 4,3–5,0). Die Kanten selbst bleiben unangetastet —
           die Blase ist eine dunklere Verwandte ihrer Kante, keine Kopie.
           REIHENFOLGE: "neue medien" MUSS nach "medien" stehen —
           data-cat*="medien" trifft sonst auch die Neue-Medien-Karten.
                              Kante      Blase --cbb
           OTS                #508796 -> #416E7A
           Medien             #7A72A8 -> #68609B
           Neue Medien        #7C5D77 -> #7C5D77  (sitzt schon richtig)
           Creator            #A85757 -> #9D5151
           Parteikanal        #97AB54 -> #606D36
           Bewegung           #BB7C46 -> #8C5D34
           Behörden           #7A7A72 -> #676761                          */
        .rss-card                          { --cbb: #4E6659; }
        .rss-card[data-cat*="ots"]         { --cbb: #416E7A; }
        .rss-card[data-cat*="medien"]      { --cbb: #68609B; }
        .rss-card[data-cat*="neue medien"] { --cbb: #7C5D77; }
        .rss-card[data-cat*="creator"]     { --cbb: #9D5151; }
        .rss-card[data-cat*="parteikanal"] { --cbb: #606D36; }
        .rss-card[data-cat*="bewegung"]    { --cbb: #8C5D34; }
        .rss-card[data-cat*="behoerden"]   { --cbb: #676761; }

        /* Form/Größe = UNGEFILTERT. Der 1px-Rahmen in Flächenfarbe hält die
           Außenmaße identisch, ohne sichtbar zu sein. Schrift immer hell —
           dadurch braucht kein Zustand eine eigene Farbe. */
        html body .rss-card .click-bubble,
        html body .rss-card .click-bubble--inline {
            background-color: var(--cbb) !important;
            border: 1px solid var(--cbb) !important;
            border-radius: 3px !important;
            padding: 1px 5px !important;
            font-size: 11px !important;
            font-weight: 800 !important;
            letter-spacing: 0.2px !important;
            /* Muss sein: die Grundregel .click-bubble setzt line-height 1,
               das UNGEFILTERT-Abzeichen läuft auf "normal" (~1,36em). Bei
               gleichem Polster und Rahmen war die Blase dadurch 4px flacher,
               und die Ziffern saßen zu hoch — ein Zeilenkasten von 1em ist
               kleiner als die Schrift selbst (Ober- plus Unterlänge 1,364em),
               der Überhang verteilt sich nach oben und unten und schiebt die
               Grundlinie nach oben. Beides erledigt derselbe Wert. */
            line-height: normal !important;
            color: #D5E5DD !important;
            -webkit-text-fill-color: #D5E5DD !important;
        }
        /* Einzige Ausnahme: mobil im Tagmodus nimmt die Schrift den Ton der
           mobilen Kopfzeile. */
        @media (max-width: 768px) {
            html body:not(.dark-mode) .rss-card .click-bubble {
                color: #EAF2EE !important;
                -webkit-text-fill-color: #EAF2EE !important;
            }
        }