@charset "UTF-8";
/* ============================================================================
   PaulDark – Modern Dark Card Theme für FreshRSS 1.29.x
   ----------------------------------------------------------------------------
   Lädt NACH _frss.css (unveränderte Kopie von base-theme/frss.css).
   Überschreibt gezielt: Farben (Dark), Icon-Färbung, Header, Sidebar,
   Artikel-Karten-Grid und die aufgeklappte Lese-Ansicht.

   Geschrieben gegen das ECHTE DOM (verifiziert in app/views & base-theme):
     .flux  >  ul.flux_header.horizontal-list  +  article.flux_content
     flux_header-Items:  li.item.manage | .website | .thumbnail
                         | .titleAuthorSummaryDate (.title/.summary/.date)
                         | .labels | .share | .link
     Aufklappen: .flux.active zeigt .flux_content (in .hide_posts-Modus)
   ============================================================================ */

:root {
	/* ---- Eigene Design-Tokens (hier zentral anpassen) ---- */
	--pd-bg:          #0f1115;   /* App-Hintergrund            */
	--pd-elev:        #171a21;   /* Karten / Panels            */
	--pd-elev-2:      #1f2430;   /* Hover / aktive Karte / Strip */
	--pd-border:      #262c3a;   /* Trennlinien / Rahmen       */
	--pd-text:        #e7eaf0;   /* Haupttext                  */
	--pd-muted:       #9aa3b2;   /* Sekundärtext / Meta        */
	--pd-accent:      #3ddc97;   /* Akzent (Mint-Grün, DEZENT) */
	--pd-accent-ink:  #06231a;   /* Text auf Akzentflächen     */
	--pd-accent-soft: rgba(61, 220, 151, 0.14);
	--pd-radius:      14px;
	--pd-radius-sm:   10px;
	--pd-shadow:      0 4px 18px rgba(0, 0, 0, 0.45);
	--pd-thumb-h:     180px;     /* Höhe der Karten-Vorschaubilder */

	/* SVG-Icons sind schwarze Bitmaps -> per filter einfärben.
	   muted = neutrales Grau, hover = fast weiß, accent = Mint (Favorit/aktiv). */
	--pd-icon-muted:  brightness(0) saturate(100%) invert(70%) sepia(8%) saturate(560%) hue-rotate(184deg) brightness(92%) contrast(86%);
	--pd-icon-hover:  brightness(0) invert(0.95);
	--pd-icon-accent: brightness(0) saturate(100%) invert(73%) sepia(42%) saturate(560%) hue-rotate(101deg) brightness(92%) contrast(87%);

	/* ---- Base-Theme-Variablen auf Dark umbiegen ---- */
	--frss-font-color-dark:        var(--pd-text);
	--frss-font-color-grey-dark:   var(--pd-muted);
	--frss-font-color-grey-light:  var(--pd-muted);
	--frss-font-color-light:       var(--pd-text);
	--frss-background-color:             var(--pd-bg);
	--frss-background-color-transparent: rgba(15, 17, 21, 0.85);
	--frss-background-color-middle:      var(--pd-elev-2);
	--frss-background-color-dark:        var(--pd-elev);
	--frss-border-color:                 var(--pd-border);
	--frss-noThumbnailImage-background-color: var(--pd-elev-2);
	--frss-darken-background-hover-transparent: rgba(255, 255, 255, 0.04);
	--frss-box-shadow-color-transparent: rgba(0, 0, 0, 0.5);
	--frss-modal-background-color-transparent: rgba(0, 0, 0, 0.6);
	--frss-scrollbar-handle:        var(--pd-border);
	--frss-scrollbar-handle-hover:  #36405a;
	--frss-scrollbar-track:         transparent;
	--frss-scrollbar-track-hover:   transparent;
}

/* ============================================================
   1) GRUNDGERÜST
   ============================================================ */
html, body {
	background: var(--pd-bg);
	color: var(--pd-text);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "OpenSans", sans-serif;
	font-size: 15px;
	line-height: 1.55;
}

a { color: var(--pd-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

hr { border-color: var(--pd-border); }

/* ---- Icons global dezent einfärben (waren auf Dark unsichtbar) ---- */
.icon,
img.icon {
	filter: var(--pd-icon-muted);
	transition: filter .15s ease;
}
a:hover > .icon,
button:hover > .icon,
.btn:hover > .icon,
.item:hover .item-element > .icon {
	filter: var(--pd-icon-hover);
}
/* Favoriten-Stern in Akzent-Mint */
.flux.favorite .bookmark > .icon,
.item.feed .bookmark > .icon:hover { filter: var(--pd-icon-accent); }

/* Favicons nicht einfärben (sind farbige Bilder) */
img.favicon { filter: none; }

/* ============================================================
   2) HEADER / TOP-NAVIGATION
   ============================================================ */
.header {
	background: var(--pd-elev);
	border-bottom: 1px solid var(--pd-border);
	box-shadow: var(--pd-shadow);
}
.header .logo,
.header .item.title a { color: var(--pd-text); }

#search,
.header .item.search input {
	background: var(--pd-bg);
	color: var(--pd-text);
	border: 1px solid var(--pd-border);
	border-radius: var(--pd-radius-sm);
}

/* ============================================================
   3) SIDEBAR / KATEGORIEN ("Tabs")
   ============================================================ */
.aside.aside_feed,
#aside_feed {
	background: var(--pd-elev);
	border-right: 1px solid var(--pd-border);
	padding: 10px 0;
}

/* ---- Abstände & Einrückung (vorher: alles am linken Rand + zu dicht) ---- */
/* Kopf "Abonnementverwaltung + Plus": gleicher Randabstand, füllt die Breite */
#aside_feed .stick.configure-feeds {
	display: flex;
	padding: 0 14px;
	margin: 0 0 8px;
}
#aside_feed .stick.configure-feeds #btn-subscription { flex: 1 1 auto; }
#aside_feed .about { display: block; padding: 0 16px; margin-bottom: 6px; color: var(--pd-muted); }

#aside_feed .tree { margin: 4px 0 40px; }

/* Kategorie-Zeile: links eingerückt, luftige Höhe, vertikal zentriert */
#aside_feed .tree-folder-title {
	padding: 3px 14px 3px 16px;
	line-height: 2.1;
}
#aside_feed .tree-folder-title > * { vertical-align: middle; }
#aside_feed .tree-folder-title button.dropdown-toggle { margin-right: 5px; }
#aside_feed .tree-folder.category:not(.active) > .tree-folder-title:hover { background: var(--pd-elev-2); }

/* Feed-Zeile: weiter eingerückt unter der Kategorie, etwas mehr Höhe */
#aside_feed .tree-folder-items > .item.feed { padding-left: 24px; }
#aside_feed .tree-folder-items > .item > .item-title { line-height: 2.0; }

.tree-folder-title,
.tree-folder-items > .item > .item-title {
	color: var(--pd-text);
}
.tree-folder-title .title { font-weight: 600; letter-spacing: .2px; }

/* aktive Kategorie / aktiver Feed -> nur Akzent-Text + zarter Strich */
.aside_feed .tree-folder.category.active > .tree-folder-title,
.aside_feed .tree-folder.category.active > .tree-folder-title .title,
.aside_feed .tree-folder-items .item.feed.active > .item-title,
.aside_feed .tree-folder-items .item.feed.active > .item-title .title {
	color: var(--pd-accent);
}
.aside_feed .tree-folder-items .item.feed.active {
	background: var(--pd-accent-soft);
	box-shadow: inset 3px 0 0 var(--pd-accent);
}
.aside_feed .tree-folder-items .item.feed:hover { background: var(--pd-elev-2); }

/* Ungelesen-Zähler als Akzent-Pille (::after mit data-unread).
   #aside_feed (ID) erzwingt Mint über jede klassenbasierte Basis-Regel hinweg,
   damit ALLE Pillen einheitlich sind (Kategorien UND Feeds). */
#aside_feed .tree-folder-title .title:not([data-unread="0"])::after,
#aside_feed .category .title:not([data-unread="0"])::after,
#aside_feed .feed .item-title:not([data-unread="0"])::after,
.aside .category .tree-folder-title .title:not([data-unread="0"])::after,
.aside .feed .item-title:not([data-unread="0"])::after {
	background: var(--pd-accent);
	color: var(--pd-accent-ink);
	border: none;
	font-weight: 700;
	font-size: .78rem;
	border-radius: 999px;
}

/* ------------------------------------------------------------
   Kategorie-Icons statt roter Error-Dreiecke
   ------------------------------------------------------------
   Das ::before des Titels wird hier mit einem Icon belegt (Maske +
   currentColor-Tint). Da dieser Selektor eine ID enthält, gewinnt er
   über die Basis-Regel `.title.error::before { content:" ⚠ " }` ->
   das rote Dreieck wird ersetzt. Spezial-Kategorien (Alle/Wichtig/
   Favoriten/Tags) haben ihr eigenes Icon und werden ausgenommen.
   Default = Ordner; pro Kategorie via #c_<id> die Variable --cat-icon setzen. */
#aside_feed .tree-folder.category:not(.all):not(.important):not(.favorites):not(.tags)
	> .tree-folder-title .title::before {
	content: "";
	display: inline-block;
	width: 18px;
	height: 18px;
	margin-right: 9px;
	vertical-align: -4px;
	background-color: var(--pd-muted);
	-webkit-mask: var(--cat-icon, var(--cat-icon-default)) center / contain no-repeat;
	mask: var(--cat-icon, var(--cat-icon-default)) center / contain no-repeat;
}
/* aktive Kategorie -> Icon in Mint */
#aside_feed .tree-folder.category.active > .tree-folder-title .title::before {
	background-color: var(--pd-accent);
}

/* Icon-Bibliothek (Tabler-Outline als Maske). --cat-icon-default = Ordner. */
:root {
	--cat-icon-default: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2'/%3E%3C/svg%3E");
	--ic-football: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7l4.755 3.455l-1.755 5.545h-6l-1.755 -5.545z'/%3E%3C/svg%3E");
	--ic-camera: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7h1a2 2 0 0 0 2 -2a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1a2 2 0 0 0 2 2h1a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2'/%3E%3Ccircle cx='12' cy='13' r='3'/%3E%3C/svg%3E");
	--ic-cpu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='5' width='14' height='14' rx='1'/%3E%3Crect x='9' y='9' width='6' height='6'/%3E%3Cpath d='M3 10h2M3 14h2M10 3v2M14 3v2M21 10h-2M21 14h-2M10 21v-2M14 21v-2'/%3E%3C/svg%3E");
	--ic-news: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 6h3a1 1 0 0 1 1 1v11a2 2 0 0 1 -4 0v-13a1 1 0 0 0 -1 -1h-10a1 1 0 0 0 -1 1v12a3 3 0 0 0 3 3h11'/%3E%3Cpath d='M8 8h4M8 12h4M8 16h4'/%3E%3C/svg%3E");
	--ic-gamepad: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='20' height='12' rx='2'/%3E%3Cpath d='M6 12h4M8 10v4M15 11v.01M18 13v.01'/%3E%3C/svg%3E");
	--ic-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l-2 0l9 -9l9 9l-2 0'/%3E%3Cpath d='M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7'/%3E%3Cpath d='M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6'/%3E%3C/svg%3E");
}

/* Zuweisung pro Kategorie – VON HINTEN gezählt, damit Spezial-Einträge am
   Anfang (Alle/Wichtig/Favoriten/Meine Labels) die Zählung NICHT verschieben.
   Reihenfolge von unten: [tree-bottom]=1, Unkategorisiert=2, dann aufwärts.
   (Unkategorisiert behält das Ordner-Default-Icon.) */
#sidebar > .tree-folder.category:nth-last-of-type(8) > .tree-folder-title .title::before { --cat-icon: var(--ic-football); }  /* BVB / Fussball */
#sidebar > .tree-folder.category:nth-last-of-type(7) > .tree-folder-title .title::before { --cat-icon: var(--ic-camera); }    /* Fotografie     */
#sidebar > .tree-folder.category:nth-last-of-type(6) > .tree-folder-title .title::before { --cat-icon: var(--ic-cpu); }       /* KI & Tech      */
#sidebar > .tree-folder.category:nth-last-of-type(5) > .tree-folder-title .title::before { --cat-icon: var(--ic-news); }      /* Nachrichten    */
#sidebar > .tree-folder.category:nth-last-of-type(4) > .tree-folder-title .title::before { --cat-icon: var(--ic-gamepad); }   /* Pokémon        */
#sidebar > .tree-folder.category:nth-last-of-type(3) > .tree-folder-title .title::before { --cat-icon: var(--ic-home); }      /* Smart Home     */

/* ============================================================
   4) ARTIKEL-KARTEN-GRID  (kompakte Listenansicht = #stream.normal)
   Hinweis: Für den Karten-Look bitte in den FreshRSS-Einstellungen
   "Artikel standardmäßig einklappen" aktivieren (display_posts = aus).
   ============================================================ */
#stream.normal {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));   /* 3 Spalten am Desktop */
	gap: 20px;
	padding: 20px;
	align-items: start;          /* Karten nicht auf Zeilenhöhe strecken */
	background: var(--pd-bg);
}

/* Volle-Breite-Elemente im Grid (Datums-/Kategorie-Trenner, Footer) */
#stream.normal > .transition,
#stream.normal > #new-article,
#stream.normal > #stream-footer {
	grid-column: 1 / -1;
}
#stream.normal > .transition {
	color: var(--pd-muted);
	border-bottom: 1px solid var(--pd-border);
	padding: 4px 2px;
	margin-top: 6px;
}
#stream.normal > .transition a { color: var(--pd-muted); }

/* ---- Die Karte ---- */
#stream.normal .flux {
	display: flex;
	flex-direction: column;
	align-self: start;               /* Karte auf Inhaltshöhe, nicht auf Zeilenhöhe strecken */
	background: var(--pd-elev);
	border: 1px solid var(--pd-border);
	border-radius: var(--pd-radius);
	overflow: hidden;
	box-shadow: var(--pd-shadow);
	transition: transform .15s ease, border-color .15s ease;
}
#stream.normal .flux:hover {
	transform: translateY(-3px);
	border-color: #39414f;
}
/* gelesene Artikel dezent zurücknehmen */
#stream.normal .flux.read { opacity: .58; }
#stream.normal .flux.read:hover { opacity: 1; }
/* aktuell ausgewählter Artikel (Tastatur-Navigation) -> Akzent-Ring */
#stream.normal .flux.current {
	border-color: var(--pd-accent);
	box-shadow: 0 0 0 1px var(--pd-accent), var(--pd-shadow);
}

/* ---- flux_header von Tabellen-Zeile zu vertikaler Karte umbauen ---- */
#stream.normal .flux .flux_header {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	background: transparent;
}
#stream.normal .flux .flux_header > .item {
	display: block;
	white-space: normal;
	width: auto;
	vertical-align: top;
}

/* Vorschaubild: ganz oben, volle Breite, fixe Höhe (alle Aspekt-Varianten) */
#stream.normal .flux .flux_header .item.thumbnail,
#stream.normal .flux .flux_header .item.thumbnail.small,
#stream.normal .flux .flux_header .item.thumbnail.portrait,
#stream.normal .flux .flux_header .item.thumbnail.square,
#stream.normal .flux .flux_header .item.thumbnail.landscape,
#stream.normal .flux .flux_header .item.thumbnail.portrait.small,
#stream.normal .flux .flux_header .item.thumbnail.square.small,
#stream.normal .flux .flux_header .item.thumbnail.landscape.small {
	order: 1;
	flex: 0 0 100%;
	width: 100%;
	height: var(--pd-thumb-h);
	padding: 0;
	line-height: 0;
}
#stream.normal .flux .flux_header .item.thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}
/* Kein Vorschaubild vom Feed? -> Platzhalter-Banner mit Quell-Name (aus
   data-website-name am flux_header), GLEICHE Höhe wie echte Bilder. So bleiben
   alle Karten gleich aufgebaut und das Grid bricht nicht. */
#stream.normal .flux .flux_header .item.thumbnail:empty { display: none; }
#stream.normal .flux .flux_header:has(.item.thumbnail:empty)::before {
	content: attr(data-website-name);
	order: 0;
	flex: 0 0 100%;
	height: var(--pd-thumb-h);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 0 18px;
	box-sizing: border-box;
	background:
		radial-gradient(130% 90% at 50% 0%, rgba(61, 220, 151, 0.10), transparent 70%),
		linear-gradient(135deg, var(--pd-elev-2), var(--pd-bg));
	color: var(--pd-muted);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .3px;
	border-bottom: 1px solid var(--pd-border);
}

/* Titelblock: Titel + Summary + Datum als normaler Fluss (nicht absolut) */
#stream.normal .flux .flux_header .item.titleAuthorSummaryDate {
	order: 2;
	flex: 0 0 100%;                  /* volle Breite, aber NICHT vertikal wachsen (sonst Leerlücke) */
	position: static;
	overflow: visible;
	padding: 14px 16px 10px;
}
#stream.normal .flux .flux_header .item .title,
#stream.normal .flux .flux_header.has-date .item .title {
	position: static;
	display: block;
	min-width: 0;
	max-width: 100%;
	padding: 0;
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	color: var(--pd-text);
	font-size: 16px;
	font-weight: 650;
	line-height: 1.32;
}
#stream.normal .flux.not_read .flux_header .item .title { color: #fff; }
#stream.normal .flux .flux_header .item .title .author {
	display: block;
	padding-left: 0;
	margin-top: 4px;
	color: var(--pd-muted);
	font-weight: 400;
	font-size: 12px;
}
#stream.normal .flux .flux_header .item .summary {
	margin: 8px 0 0;
	max-width: 100%;
	color: var(--pd-muted);
	font-size: 13px;
	-webkit-line-clamp: 3;
}
#stream.normal .flux .flux_header .item .date {
	position: static;
	display: block;
	width: auto;
	margin-top: 8px;
	text-align: left;
	color: var(--pd-muted);
	font-size: 11px;
}

/* Karten-Footerleiste: Feedname links, Aktions-Icons rechts.
   Gleiche bg + border-top + Padding => nahtloser Streifen über die Items. */
#stream.normal .flux .flux_header > .item.website { order: 3; flex: 1 1 auto; min-width: 0; }
#stream.normal .flux .flux_header > .item.manage,
#stream.normal .flux .flux_header > .item.labels,
#stream.normal .flux .flux_header > .item.share,
#stream.normal .flux .flux_header > .item.link { order: 4; flex: 0 0 auto; width: auto; }

#stream.normal .flux .flux_header > .item.website,
#stream.normal .flux .flux_header > .item.manage,
#stream.normal .flux .flux_header > .item.labels,
#stream.normal .flux .flux_header > .item.share,
#stream.normal .flux .flux_header > .item.link {
	border-top: 1px solid var(--pd-border);   /* durchgehender Fuß-Streifen direkt unter dem Inhalt */
	background: var(--pd-elev-2);
}
#stream.normal .flux .flux_header > .item.website .item-element {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 14px;
	color: var(--pd-muted);
	font-size: 12.5px;
	overflow: hidden;
	text-overflow: ellipsis;
}
#stream.normal .flux .flux_header > .item.website .websiteName {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
/* Aktions-Icons (lesen/favorit/teilen/link): gleich hohe, klare Klickflächen */
#stream.normal .flux .flux_header > .item.manage .item-element,
#stream.normal .flux .flux_header > .item.labels .item-element,
#stream.normal .flux .flux_header > .item.share .dropdown-toggle,
#stream.normal .flux .flux_header > .item.link .item-element {
	display: flex;
	align-items: center;
	height: 100%;
	min-height: 43px;
	padding: 0 11px;
}
#stream.normal .flux .flux_header > .item.link .item-element { padding-right: 14px; }
#stream.normal .flux .flux_header > .item.manage .icon,
#stream.normal .flux .flux_header > .item.labels .icon,
#stream.normal .flux .flux_header > .item.share .icon,
#stream.normal .flux .flux_header > .item.link .icon {
	width: 18px;
	height: 18px;
}
/* Hover: dezente Fläche + Mint-Icon -> liest sich klar als Button */
#stream.normal .flux .flux_header > .item.manage:hover,
#stream.normal .flux .flux_header > .item.labels:hover,
#stream.normal .flux .flux_header > .item.share:hover,
#stream.normal .flux .flux_header > .item.link:hover { background: var(--pd-bg); }
#stream.normal .flux .flux_header > .item.manage:hover .icon,
#stream.normal .flux .flux_header > .item.labels:hover .icon,
#stream.normal .flux .flux_header > .item.share:hover .icon,
#stream.normal .flux .flux_header > .item.link:hover .icon { filter: var(--pd-icon-accent); }

/* ============================================================
   5) AUFGEKLAPPTER ARTIKEL  (.flux.active zeigt .flux_content)
   Aktive/aufgeklappte Karte über die volle Breite legen, damit das
   Grid nicht zerbricht. Gilt auch für display_posts=an (alle offen).
   ============================================================ */
#stream.normal.hide_posts .flux.active,
#stream.normal:not(.hide_posts) .flux {
	grid-column: 1 / -1;
}

/* Im aufgeklappten Zustand das doppelte Header-Bild/Summary ausblenden */
#stream.normal .flux.active .flux_header .item.thumbnail,
#stream.normal .flux.active .flux_header .item .summary { display: none; }
#stream.normal .flux.active .flux_header .item.titleAuthorSummaryDate { padding-bottom: 14px; }

/* Artikel-Inhalt: min-height killen (war Quelle der "leeren" Höhe) */
#stream.normal .flux_content { background: var(--pd-elev); }
#stream.normal .flux_content .content {
	min-height: 0;
	margin: 0 auto;
	padding: 6px 20px 16px;
	color: var(--pd-text);
}
#stream.normal .flux_content .content .text {
	max-width: 72ch;
	margin: 0 auto;
}
#stream.normal .flux_content .content header h1.title a,
#stream.normal .flux_content .content header h1.title a.go_website { color: var(--pd-text); }
#stream.normal .flux_content .content .subtitle,
#stream.normal .flux_content .content .subtitle .date { color: var(--pd-muted); font-size: 12px; }

/* Lesetypografie im Artikelkörper */
#stream.normal .flux_content .text { line-height: 1.65; }
#stream.normal .flux_content .text a { color: var(--pd-accent); }
#stream.normal .flux_content .text h1,
#stream.normal .flux_content .text h2,
#stream.normal .flux_content .text h3 { color: var(--pd-text); line-height: 1.3; }
#stream.normal .flux_content .text img {
	max-width: 100%;
	height: auto;
	border-radius: var(--pd-radius-sm);
}
#stream.normal .flux_content .text blockquote {
	border-left: 3px solid var(--pd-accent);
	background: var(--pd-accent-soft);
	margin: 12px 0;
	padding: 8px 14px;
	border-radius: 0 8px 8px 0;
	color: var(--pd-text);
}
#stream.normal .flux_content .text pre,
#stream.normal .flux_content .text code {
	background: var(--pd-bg);
	border: 1px solid var(--pd-border);
	border-radius: 8px;
}
#stream.normal .flux_content .text pre { padding: 12px; overflow-x: auto; }
#stream.normal .flux_content .text code { padding: 1px 5px; }

/* Untere Aktionsleiste des offenen Artikels (ul.horizontal-list.bottom) */
#stream.normal .flux_content > footer .bottom,
#stream.normal .flux_content .horizontal-list.bottom {
	border-top: 1px solid var(--pd-border);
	background: var(--pd-elev-2);
	padding: 4px 10px;
}
#stream.normal .flux_content .bottom .item .item-element { color: var(--pd-muted); }

/* ============================================================
   6) BUTTONS & TOOLBAR
   FreshRSS rendert die Toolbar als SEGMENTIERTE Gruppen (.group/.stick):
   verbundene Buttons -> Radius nur außen, geteilte Ränder, Abstand
   nur ZWISCHEN den Gruppen (Vorbild: Alternative-Dark).
   ============================================================ */
.btn,
input[type="submit"].btn {
	display: inline-flex;            /* Inhalt vertikal zentrieren -> keine "Luft unten" */
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	background: var(--pd-elev-2);
	color: var(--pd-text);
	border: 1px solid var(--pd-border);
	border-radius: var(--pd-radius-sm);
	padding: 6px 12px;
	min-height: 36px;
	line-height: 1.3;
	vertical-align: middle;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.btn:hover {
	background: var(--pd-elev);
	border-color: var(--pd-accent);
	color: var(--pd-accent);
	z-index: 1;                 /* geteilten Rand beim Hover nicht verdecken lassen */
}
/* .as-link bleibt linkartig (kein Kästchen) */
button.as-link,
.as-link { background: none; border: none; min-height: 0; color: var(--pd-accent); }

/* --- Segmentierte Gruppen: Radius nur an den Enden, Ränder teilen --- */
.group .btn,
.stick .btn,
.stick input { border-radius: 0; }
.group > .btn:first-child,
.stick > .btn:first-child,
.group .btn:first-child,
.stick .btn:first-child { border-radius: var(--pd-radius-sm) 0 0 var(--pd-radius-sm); }
.group > .btn:last-child,
.stick > .btn:last-child,
.group .btn:last-child,
.stick .btn:last-child,
.group > .dropdown:last-child > .btn,
.stick > .dropdown:last-child > .btn { border-radius: 0 var(--pd-radius-sm) var(--pd-radius-sm) 0; }
.group > .btn:only-child,
.group > .dropdown:only-child > .btn,
.stick > .btn:only-child { border-radius: var(--pd-radius-sm); }
.group .btn + .btn:not(:hover):not(.active),
.stick .btn + .btn:not(:hover):not(.active),
.group .btn + .dropdown > .btn:not(:hover):not(.active),
.stick .btn + .dropdown > .btn:not(:hover):not(.active),
.group .dropdown + .btn:not(:hover):not(.active),
.stick .dropdown + .btn:not(:hover):not(.active) { border-left: none; }

/* Abstand NUR zwischen den Gruppen, nicht zwischen einzelnen Buttons */
.nav_menu .group,
.nav_menu .stick { margin: 0 6px; }

/* aktive Zustände + "wichtige" Buttons: Akzent dezent (Outline + soft bg), NICHT flächig */
.btn.active,
.active > .btn,
.btn-important,
#btn-add.btn-important,
button.btn-important,
input[type="submit"].btn-important {
	background: var(--pd-accent-soft);
	color: var(--pd-accent);
	border-color: var(--pd-accent);
	z-index: 1;
}
.btn.active:hover,
.btn-important:hover,
#btn-add.btn-important:hover { background: rgba(61, 220, 151, 0.22); color: var(--pd-accent); }
/* aktiver Toolbar-Icon-Filter in Mint statt knallig */
.btn.active .icon { filter: var(--pd-icon-accent); }

input[type="text"],
input[type="search"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="number"],
select,
textarea {
	background: var(--pd-bg);
	color: var(--pd-text);
	border: 1px solid var(--pd-border);
	border-radius: var(--pd-radius-sm);
}
input:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--pd-accent);
	box-shadow: 0 0 0 2px var(--pd-accent-soft);
}

/* Dropdown-Menüs dunkel */
.dropdown-menu {
	background: var(--pd-elev);
	border: 1px solid var(--pd-border);
	border-radius: var(--pd-radius-sm);
	box-shadow: var(--pd-shadow);
}
.dropdown-menu .item a:hover { background: var(--pd-elev-2); color: var(--pd-accent); }

/* ============================================================
   7) SCROLLBARS
   ============================================================ */
* { scrollbar-color: var(--pd-border) transparent; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--pd-border); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: #36405a; }
*::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   8) RESPONSIVE  (3 Spalten -> 2 -> 1)
   ============================================================ */
@media (max-width: 1250px) {
	#stream.normal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
	#stream.normal {
		grid-template-columns: 1fr;
		gap: 12px;
		padding: 12px;
	}
	#stream.normal .flux .flux_header .item .title { font-size: 15px; }
	:root { --pd-thumb-h: 160px; }
}