/*
 * Pester Lloyd – Wirtschaftswoche
 * Farbrollen der Grafiken sind geprüft (validate_palette.js: alle Checks
 * bestanden). Die Werte stehen zusätzlich als Rückfall im SVG selbst, damit
 * der Zeitungssatz ohne Stylesheet dieselben Farben zeichnet.
 */

.plww-chart,
.plww-boerse,
.plww-tiles,
.plww-notes-wrap,
.plww-archive,
.plww-hero,
.plww-teasers,
.plww-weekposts {
	--plww-pos: #2a78d6;
	--plww-neg: #d03b3b;
	--plww-s1: #2a78d6;
	--plww-s2: #eb6834;
	--plww-s3: #1baf7a;
	--plww-ink: #0b0b0b;
	--plww-ink-2: #52514e;
	--plww-muted: #898781;
	--plww-grid: #e1e0d9;
	--plww-axis: #c3c2b7;
	--plww-surface: #fcfcfb;
	--plww-rule: rgba(11, 11, 11, 0.12);
	--plww-accent: #9a1c20;
}

@media (prefers-color-scheme: dark) {
	:root:where(:not([data-theme="light"])) .plww-chart,
	:root:where(:not([data-theme="light"])) .plww-boerse,
	:root:where(:not([data-theme="light"])) .plww-tiles,
	:root:where(:not([data-theme="light"])) .plww-notes-wrap,
	:root:where(:not([data-theme="light"])) .plww-archive,
	:root:where(:not([data-theme="light"])) .plww-hero,
	:root:where(:not([data-theme="light"])) .plww-teasers,
	:root:where(:not([data-theme="light"])) .plww-weekposts {
		--plww-pos: #3987e5;
		--plww-neg: #e66767;
		--plww-s1: #3987e5;
		--plww-s2: #d95926;
		--plww-s3: #199e70;
		--plww-ink: #ffffff;
		--plww-ink-2: #c3c2b7;
		--plww-muted: #898781;
		--plww-grid: #2c2c2a;
		--plww-axis: #383835;
		--plww-surface: #1a1a19;
		--plww-rule: rgba(255, 255, 255, 0.14);
	}
}

:root[data-theme="dark"] .plww-chart,
:root[data-theme="dark"] .plww-boerse,
:root[data-theme="dark"] .plww-tiles,
:root[data-theme="dark"] .plww-notes-wrap,
:root[data-theme="dark"] .plww-archive,
:root[data-theme="dark"] .plww-hero,
:root[data-theme="dark"] .plww-teasers,
:root[data-theme="dark"] .plww-weekposts {
	--plww-pos: #3987e5;
	--plww-neg: #e66767;
	--plww-s1: #3987e5;
	--plww-s2: #d95926;
	--plww-s3: #199e70;
	--plww-ink: #ffffff;
	--plww-ink-2: #c3c2b7;
	--plww-muted: #898781;
	--plww-grid: #2c2c2a;
	--plww-axis: #383835;
	--plww-surface: #1a1a19;
	--plww-rule: rgba(255, 255, 255, 0.14);
}

/* ---------------------------------------------------------- Grafiken */

.plww-chart {
	margin: 2.2em 0;
	padding: 0;
	border-top: 2px solid var(--plww-ink);
	border-bottom: 1px solid var(--plww-rule);
}

.plww-chart-title {
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
	font-weight: 700;
	font-size: 1.02rem;
	line-height: 1.3;
	color: var(--plww-ink);
	margin: 0.7em 0 0.2em;
}

.plww-chart .plww-svg {
	display: block;
	width: 100%;
	height: auto;
	margin: 0.4em 0 0.2em;
	overflow: visible;
}

.plww-chart figcaption {
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 0.86rem;
	line-height: 1.45;
	color: var(--plww-ink-2);
	margin: 0.2em 0 0.9em;
}

.plww-chart-source {
	color: var(--plww-muted);
	white-space: nowrap;
}

/*
 * Dunkelmodus der Grafiken: die Hex-Werte stehen im SVG selbst (damit sie im
 * Zeitungssatz stimmen), eine CSS-Regel schlägt das Präsentationsattribut.
 * Deshalb wird hier nur der Dunkelmodus überschrieben.
 */
.plww-chart .plww-bar.plww-pos { fill: var(--plww-pos); }
.plww-chart .plww-bar.plww-neg { fill: var(--plww-neg); }
.plww-chart .plww-label,
.plww-chart .plww-value { fill: var(--plww-ink); }
.plww-chart .plww-endlabel { fill: var(--plww-ink-2); }
.plww-chart .plww-tick { fill: var(--plww-muted); }
.plww-chart .plww-grid { stroke: var(--plww-grid); }
.plww-chart .plww-axis { stroke: var(--plww-axis); }
.plww-chart .plww-line-1 { stroke: var(--plww-s1); }
.plww-chart .plww-line-2 { stroke: var(--plww-s2); }
.plww-chart .plww-line-3 { stroke: var(--plww-s3); }
.plww-chart .plww-area-1 { fill: var(--plww-s1); }
.plww-chart .plww-area-2 { fill: var(--plww-s2); }
.plww-chart .plww-area-3 { fill: var(--plww-s3); }
.plww-chart .plww-dot-1 { fill: var(--plww-s1); }
.plww-chart .plww-dot-2 { fill: var(--plww-s2); }
.plww-chart .plww-dot-3 { fill: var(--plww-s3); }
.plww-chart .plww-dot { stroke: var(--plww-surface); }

.plww-chart-data {
	margin: 0 0 0.9em;
	font-size: 0.84rem;
}

.plww-chart-data summary {
	cursor: pointer;
	color: var(--plww-muted);
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.plww-data-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 0.6em;
	font-variant-numeric: tabular-nums;
}

.plww-data-table th,
.plww-data-table td {
	border-bottom: 1px solid var(--plww-grid);
	padding: 0.25em 0.4em;
	text-align: right;
	font-weight: 400;
}

.plww-data-table th[scope="row"],
.plww-data-table thead th:first-child {
	text-align: left;
}

/* ------------------------------------------------------- Börsentabelle */

.plww-boerse {
	margin: 2em 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1.6em 2.4em;
}

.plww-boerse .plww-mkt-block {
	flex: 1 1 300px;
	min-width: 0;
	/* Breite Tabellen scrollen in sich selbst, statt die Seite zu sprengen. */
	overflow-x: auto;
}

.plww-mkt-head {
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--plww-ink);
	margin: 0 0 0.4em;
	padding-bottom: 0.3em;
	border-bottom: 2px solid var(--plww-ink);
}

/*
 * Der Zeitungs-Theme setzt Rahmen um jede Zelle. Für eine Kurstabelle ist das
 * falsch: hier trennen Haarlinien die Zeilen, sonst nichts. Die doppelte
 * Klasse hebt die Spezifität über die Theme-Regeln, egal in welcher
 * Reihenfolge die Stilvorlagen geladen werden.
 */
.plww-boerse table.plww-mkt.plww-mkt,
.plww-chart table.plww-data-table.plww-data-table {
	width: 100%;
	max-width: none;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	background: none;
	font-size: 0.9rem;
	font-variant-numeric: tabular-nums;
	table-layout: auto;
}

.plww-boerse table.plww-mkt.plww-mkt th,
.plww-boerse table.plww-mkt.plww-mkt td,
.plww-chart table.plww-data-table.plww-data-table th,
.plww-chart table.plww-data-table.plww-data-table td {
	border: 0;
	border-bottom: 1px solid var(--plww-grid);
	background: none;
	vertical-align: baseline;
	line-height: 1.35;
}

.plww-boerse table.plww-mkt.plww-mkt tr:hover td,
.plww-boerse table.plww-mkt.plww-mkt tr:hover th {
	background: none;
}

table.plww-mkt {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
	font-variant-numeric: tabular-nums;
}

table.plww-mkt thead th {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--plww-muted);
	font-weight: 500;
	padding: 0.2em 0.3em;
	text-align: left;
}

table.plww-mkt th[scope="row"] {
	font-weight: 500;
	text-align: left;
	color: var(--plww-ink);
	padding: 0.32em 0.3em;
	border-bottom: 1px solid var(--plww-grid);
}

table.plww-mkt td {
	padding: 0.32em 0.3em;
	border-bottom: 1px solid var(--plww-grid);
	color: var(--plww-ink);
}

table.plww-mkt .num {
	text-align: right;
	white-space: nowrap;
}

table.plww-mkt .up {
	color: var(--plww-pos);
}

table.plww-mkt .down {
	color: var(--plww-neg);
}

table.plww-mkt .flat,
.plww-tile-change.flat {
	color: var(--plww-muted);
}

.plww-mkt-unit {
	color: var(--plww-muted);
	font-size: 0.78rem;
	font-weight: 400;
	white-space: nowrap;
}

.plww-mkt-foot,
.plww-tiles-foot {
	flex: 1 1 100%;
	font-size: 0.78rem;
	line-height: 1.45;
	color: var(--plww-muted);
	margin: 0.2em 0 0;
}

/* ------------------------------------------------------------- Kacheln */

.plww-tiles {
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
	background: var(--plww-grid);
	border: 1px solid var(--plww-grid);
	margin: 1.4em 0 0.4em;
}

.plww-tile {
	flex: 1 1 150px;
	background: var(--plww-surface);
	padding: 0.7em 0.8em;
	display: flex;
	flex-direction: column;
	gap: 0.12em;
}

.plww-tile-label {
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 0.74rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--plww-muted);
}

.plww-tile-value {
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 1.42rem;
	font-weight: 600;
	line-height: 1.1;
	color: var(--plww-ink);
}

.plww-tile-change {
	font-size: 0.86rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.plww-tile-change.up {
	color: var(--plww-pos);
}

.plww-tile-change.down {
	color: var(--plww-neg);
}

.plww-tile-unit {
	font-size: 0.74rem;
	color: var(--plww-muted);
}

/* ----------------------------------------------------------- Notizen */

.plww-notes-region {
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--plww-accent);
	margin: 1.6em 0 0.5em;
}

ul.plww-notes {
	list-style: none;
	margin: 0;
	padding: 0;
}

li.plww-note {
	padding: 0.65em 0;
	border-bottom: 1px solid var(--plww-grid);
	line-height: 1.55;
}

.plww-note-date {
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 0.74rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--plww-muted);
	margin-right: 0.3em;
}

.plww-note-headline {
	color: var(--plww-ink);
}

.plww-note-figures {
	display: inline;
	font-variant-numeric: tabular-nums;
	color: var(--plww-ink-2);
}

.plww-note-source {
	font-size: 0.8rem;
	color: var(--plww-muted);
	white-space: nowrap;
}

.plww-note-source a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* --------------------------------------------------- Wochenlinkliste */

ul.plww-weekposts {
	list-style: none;
	margin: 1em 0;
	padding: 0;
	columns: 2;
	column-gap: 2.2em;
}

ul.plww-weekposts li {
	break-inside: avoid;
	padding: 0.32em 0;
	border-bottom: 1px solid var(--plww-grid);
	line-height: 1.4;
}

.plww-weekpost-date {
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 0.74rem;
	text-transform: uppercase;
	color: var(--plww-muted);
	margin-right: 0.3em;
	white-space: nowrap;
}

@media (max-width: 640px) {
	ul.plww-weekposts {
		columns: 1;
	}
}

/* ------------------------------------------------------------ Archiv */

ol.plww-archive {
	list-style: none;
	margin: 1em 0 2em;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
	background: var(--plww-grid);
	border: 1px solid var(--plww-grid);
}

li.plww-archive-item {
	flex: 1 1 240px;
	background: var(--plww-surface);
	padding: 0.9em 1em;
	display: flex;
	flex-direction: column;
	gap: 0.3em;
}

.plww-archive-kw {
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--plww-accent);
	font-weight: 600;
}

a.plww-archive-title {
	font-weight: 700;
	line-height: 1.3;
	color: var(--plww-ink);
	text-decoration: none;
}

a.plww-archive-title:hover {
	text-decoration: underline;
}

.plww-archive-teaser {
	font-size: 0.88rem;
	line-height: 1.45;
	color: var(--plww-ink-2);
}

.plww-archive-date {
	font-size: 0.76rem;
	color: var(--plww-muted);
	margin-top: auto;
}

/* ----------------------------------------------------------- Aufmacher */

.plww-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: 1.4em;
	align-items: start;
	margin: 1em 0 2em;
	padding-top: 0.8em;
	border-top: 3px solid var(--plww-ink);
}

.plww-hero-media img {
	width: 100%;
	height: auto;
	display: block;
}

.plww-hero-kicker {
	display: block;
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 0.74rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--plww-accent);
	font-weight: 600;
	margin-bottom: 0.35em;
}

.plww-hero-title {
	margin: 0 0 0.35em;
	line-height: 1.2;
	font-size: 1.6rem;
}

.plww-hero-title a {
	color: var(--plww-ink);
	text-decoration: none;
}

.plww-hero-title a:hover {
	text-decoration: underline;
}

.plww-hero-standfirst {
	margin: 0 0 0.6em;
	font-style: italic;
	line-height: 1.5;
	color: var(--plww-ink-2);
}

.plww-hero-more {
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 0.86rem;
	font-weight: 600;
	color: var(--plww-accent);
	text-decoration: none;
}

.plww-hero-more::after {
	content: " →";
}

@media (max-width: 720px) {
	.plww-hero {
		grid-template-columns: 1fr;
	}

	.plww-hero-title {
		font-size: 1.35rem;
	}
}

/* --------------------------------------------------------- Ressorts */

ul.plww-teasers {
	list-style: none;
	margin: 0.6em 0 1.6em;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1.2em;
}

li.plww-teaser {
	flex: 1 1 230px;
	display: flex;
	flex-direction: column;
	gap: 0.25em;
	border-top: 1px solid var(--plww-rule);
	padding-top: 0.5em;
}

a.plww-teaser-title {
	font-weight: 700;
	line-height: 1.3;
	color: var(--plww-ink);
	text-decoration: none;
}

a.plww-teaser-title:hover {
	text-decoration: underline;
}

.plww-teaser-meta {
	font-size: 0.74rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--plww-muted);
}

.plww-teaser-excerpt {
	font-size: 0.88rem;
	line-height: 1.45;
	color: var(--plww-ink-2);
}

.plww-empty {
	color: var(--plww-muted);
	font-style: italic;
}

@media print {
	.plww-chart-data {
		display: none;
	}

	.plww-chart {
		break-inside: avoid;
	}
}