/*
 * Ampere Blocks – shared styles (front end and editor).
 *
 * Colour context: blocks read their colours from --ampere-c-* variables.
 * A styled "Bereich" (or the hero) sets them, so everything inside adapts,
 * e.g. white headings in the dark panel. Without a context the fallbacks
 * after the comma apply.
 */

:root {
	--ampere-navy: #1F3864;
	--ampere-navy-dunkel: #172A4C;
	--ampere-orange: #E85A2C;
	--ampere-orange-dunkel: #D14E23;
	--ampere-orange-hell: #FDEEE8;
	--ampere-tinte: #0F172A;
	--ampere-text: #334155;
	--ampere-grau: #64748B;
	--ampere-linie: #E2E8F0;
	--ampere-flaeche: #F8FAFC;
	--ampere-gruen: #16A34A;

	--ampere-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	--ampere-icon-pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
	--ampere-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* ---------- Paragraph ---------- */

p.is-style-dachzeile {
	margin: 0;
	font-size: 12px;
	line-height: 1.4;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ampere-c-dachzeile, var(--ampere-grau));
}

p.is-style-einleitung {
	font-size: 20px;
	line-height: 1.65;
	color: var(--ampere-c-ueberschrift, var(--ampere-tinte));
}

p.is-style-quellenangabe {
	font-size: 12px;
	line-height: 1.6;
	color: var(--ampere-c-gedaempft, var(--ampere-grau));
}

p.is-style-rechenzeichen {
	margin: 0;
	font-size: 26px;
	line-height: 1;
	color: var(--ampere-c-gedaempft, var(--ampere-grau));
}

/* In a row, sit on the value line of the neighbouring Kennzahl blocks. */
.is-anordnung-reihe > p.is-style-rechenzeichen {
	align-self: flex-end;
	padding-bottom: 4px;
}

/* ---------- List ----------
 * #main / .editor-styles-wrapper: the theme gives "#main ul li" a bullet image. */

:is(#main, .editor-styles-wrapper, body) ul:is(.is-style-haekchen, .is-style-pfeil-links) {
	margin-left: 0;
	padding-left: 0;
	list-style: none;
}

/* Icon colour (list block option "Icon-Farbe", src/bereich/liste-icon-farbe.js).
 * Without a choice the icons take the text colour. */
ul.is-icon-farbe-gruen { --ampere-listen-icon: var(--ampere-gruen); }
ul.is-icon-farbe-blau { --ampere-listen-icon: var(--ampere-navy); }
ul.is-icon-farbe-orange { --ampere-listen-icon: var(--ampere-orange); }

:is(#main, .editor-styles-wrapper, body) ul.is-style-haekchen {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

:is(#main, .editor-styles-wrapper, body) ul.is-style-haekchen > li {
	position: relative;
	margin: 0;
	padding-left: 32px;
	background: none;
	list-style: none;
}

:is(#main, .editor-styles-wrapper, body) ul.is-style-haekchen > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.2em;
	width: 20px;
	height: 20px;
	background-color: var(--ampere-listen-icon, currentColor);
	-webkit-mask: var(--ampere-icon-check) center / contain no-repeat;
	mask: var(--ampere-icon-check) center / contain no-repeat;
}

:is(#main, .editor-styles-wrapper, body) ul.is-style-pfeil-links > li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding: 12px 0;
	background: none;
	list-style: none;
	border-bottom: 1px solid var(--ampere-c-linie, var(--ampere-linie));
	font-size: 15px;
	font-weight: 500;
}

:is(#main, .editor-styles-wrapper, body) ul.is-style-pfeil-links > li:last-child {
	border-bottom: 0;
}

:is(#main, .editor-styles-wrapper, body) ul.is-style-pfeil-links > li::after {
	content: "";
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	background-color: var(--ampere-listen-icon, currentColor);
	-webkit-mask: var(--ampere-icon-pfeil) center / contain no-repeat;
	mask: var(--ampere-icon-pfeil) center / contain no-repeat;
}

:is(#main, .editor-styles-wrapper, body) ul.is-style-pfeil-links > li a {
	color: var(--ampere-c-ueberschrift, var(--ampere-tinte));
	text-decoration: none;
}

:is(#main, .editor-styles-wrapper, body) ul.is-style-pfeil-links > li a:hover {
	color: var(--ampere-orange);
}

/* ---------- Table ---------- */

.wp-block-table:is(.is-style-ampere, .is-style-wertliste) {
	margin: 0;
	border: 1px solid var(--ampere-c-linie, var(--ampere-linie));
	border-radius: 12px;
	overflow-x: auto;
	background: #FFFFFF;
}

.wp-block-table:is(.is-style-ampere, .is-style-wertliste) table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: inherit;
}

.wp-block-table.is-style-ampere table {
	min-width: 520px;
}

.wp-block-table:is(.is-style-ampere, .is-style-wertliste) :is(th, td) {
	padding: 15px 20px;
	border: 0;
	text-align: left;
	vertical-align: top;
}

.wp-block-table:is(.is-style-ampere, .is-style-wertliste) thead {
	border: 0;
}

.wp-block-table.is-style-ampere thead th {
	padding-top: 16px;
	padding-bottom: 16px;
	background: var(--ampere-navy);
	color: #FFFFFF;
	font-weight: 600;
}

.wp-block-table:is(.is-style-ampere, .is-style-wertliste) tbody tr {
	background: #FFFFFF;
}

.wp-block-table:is(.is-style-ampere, .is-style-wertliste) tbody tr:nth-child(even) {
	background: var(--ampere-flaeche);
}

.wp-block-table:is(.is-style-ampere, .is-style-wertliste) tbody td:first-child {
	color: var(--ampere-tinte);
	font-weight: 500;
}

.wp-block-table:is(.is-style-ampere, .is-style-wertliste) td {
	color: var(--ampere-text);
	font-variant-numeric: tabular-nums;
}



.wp-block-table.is-style-wertliste tbody td:first-child {
	font-weight: 400;
}

.wp-block-table.is-style-wertliste tbody td:last-child {
	text-align: right;
	font-weight: 600;
	color: var(--ampere-navy);
}

.wp-block-table:is(.is-style-ampere, .is-style-wertliste) figcaption {
	margin: 0;
	padding: 10px 20px;
	font-size: 12px;
	color: var(--ampere-grau);
}

/* ---------- Button ---------- */

.wp-block-button:is(.is-style-primaer, .is-style-sekundaer) .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 50px;
	padding: 12px 24px;
	border: 0;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	color: #FFFFFF;
}

.wp-block-button.is-style-primaer .wp-block-button__link {
	background: var(--ampere-orange);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.wp-block-button.is-style-primaer .wp-block-button__link::after {
	content: "";
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: var(--ampere-icon-pfeil) center / contain no-repeat;
	mask: var(--ampere-icon-pfeil) center / contain no-repeat;
}

.wp-block-button.is-style-sekundaer .wp-block-button__link {
	background: var(--ampere-navy);
}

.wp-block-button.is-style-primaer .wp-block-button__link:is(:hover, :focus) {
	background: var(--ampere-orange-dunkel);
	color: #FFFFFF;
	text-decoration: none;
}

.wp-block-button.is-style-sekundaer .wp-block-button__link:is(:hover, :focus) {
	background: var(--ampere-navy-dunkel);
	color: #FFFFFF;
	text-decoration: none;
}

.wp-block-button:is(.is-style-primaer, .is-style-sekundaer).has-custom-width .wp-block-button__link {
	width: 100%;
}

/* ---------- Separator ----------
 * All separator blocks: a thin line in the "Linie" colour, as in the layout.
 * Overrides the theme's 3px orange <hr> and core's 2px border. A colour
 * picked in the editor (has-background) still wins; "Punkte" is untouched. */

/* Explicit width: in a flex container (Bereich, sidebar layout) an <hr> with
 * auto side margins does not stretch and would collapse to 0px. */
hr.wp-block-separator:not(.is-style-dots) {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	height: 0;
	margin-top: 32px;
	margin-bottom: 32px;
	border: 0;
	border-top: 1px solid var(--ampere-c-linie, var(--ampere-linie));
	background: none;
	color: var(--ampere-c-linie, var(--ampere-linie));
	opacity: 1;
}

hr.wp-block-separator.has-background:not(.is-style-dots) {
	height: 1px;
	border-top: 0;
}

/* Style "Volle Fensterbreite": the line runs from window edge to window edge.
 * Only directly on the page or inside a full-width Bereich, where the parent
 * is centred in the window; elsewhere (e.g. next to a sidebar) it stays a
 * normal full-width line. Needs a template that clips horizontal overflow
 * ("Ampere – Blöcke"). Not widened in the editor. */
:is(.ampere-bloecke__inhalt, .wp-block-ampere-bereich.is-volle-breite) > hr.wp-block-separator.is-style-fensterbreite {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.editor-styles-wrapper hr.wp-block-separator.is-style-fensterbreite {
	width: 100%;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* ---------- Typography on "Ampere – Blöcke" pages ----------
 * Base text 17px and headings like the KwK landing page (ampere-kwk):
 * bold, #003a5a, KwK sizes and spacing. Front end: .ampere-bloecke__inhalt
 * (template). Editor: .ampere-bloecke-editor, set by the Bereich editor
 * script while a page with that template is edited.
 * Heading colours go through --ampere-c-ueberschrift, so the hero and the
 * dark panel keep their white headings; card and hero heading sizes win
 * through higher specificity in their own stylesheets. */

.ampere-bloecke-seite,
.ampere-bloecke-editor {
	--ampere-ueberschrift: #003a5a;
}

.ampere-bloecke__inhalt,
.ampere-bloecke-editor .editor-styles-wrapper,
.editor-styles-wrapper.ampere-bloecke-editor {
	font-size: 1.0625rem;
	line-height: 1.65;
}

.ampere-bloecke__inhalt :is(h1, h2, h3, h4),
.ampere-bloecke-editor .editor-styles-wrapper :is(h1, h2, h3, h4),
.editor-styles-wrapper.ampere-bloecke-editor :is(h1, h2, h3, h4) {
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: normal;
	color: var(--ampere-c-ueberschrift, var(--ampere-ueberschrift));
}

.ampere-bloecke__inhalt h1,
.ampere-bloecke-editor .editor-styles-wrapper h1,
.editor-styles-wrapper.ampere-bloecke-editor h1 {
	font-size: 2.875rem;
	letter-spacing: -0.01em;
}

.ampere-bloecke__inhalt h2,
.ampere-bloecke-editor .editor-styles-wrapper h2,
.editor-styles-wrapper.ampere-bloecke-editor h2 {
	font-size: 2rem;
}

.ampere-bloecke__inhalt h3,
.ampere-bloecke-editor .editor-styles-wrapper h3,
.editor-styles-wrapper.ampere-bloecke-editor h3 {
	font-size: 1.25rem;
}

.ampere-bloecke__inhalt h4,
.ampere-bloecke-editor .editor-styles-wrapper h4,
.editor-styles-wrapper.ampere-bloecke-editor h4 {
	font-size: 1.0625rem;
}

/* KwK spacing below headings placed directly on the page. Inside a Bereich
 * its "Abstand" (block gap) applies instead. */
.ampere-bloecke__inhalt > :is(h1, h2),
.ampere-bloecke-editor .editor-styles-wrapper .is-root-container > :is(h1, h2),
.editor-styles-wrapper.ampere-bloecke-editor .is-root-container > :is(h1, h2) {
	margin-top: 0;
	margin-bottom: 1.25em;
}

.ampere-bloecke__inhalt > :is(h3, h4),
.ampere-bloecke-editor .editor-styles-wrapper .is-root-container > :is(h3, h4),
.editor-styles-wrapper.ampere-bloecke-editor .is-root-container > :is(h3, h4) {
	margin-top: 0;
	margin-bottom: 0.5em;
}

/* 1.2em space above headings in the running text: directly on the page and
 * in plain (unstyled) stack Bereiche, not as the first block of a container
 * and not inside cards/tiles/panels, whose own padding applies. Outranks the
 * Bereich's margin reset for its children. */
.ampere-bloecke__inhalt :is(.ampere-bloecke__inhalt, .wp-block-ampere-bereich.is-anordnung-stapel:not([class*="is-style-"]), .wp-block-ampere-bereich.is-anordnung-stapel.is-style-standard) > :is(h1, h2, h3, h4):not(:first-child),
.ampere-bloecke__inhalt > :is(h1, h2, h3, h4):not(:first-child),
.ampere-bloecke-editor .editor-styles-wrapper :is(.is-root-container, .wp-block-ampere-bereich.is-anordnung-stapel:not([class*="is-style-"]), .wp-block-ampere-bereich.is-anordnung-stapel.is-style-standard) > :is(h1, h2, h3, h4):not(:first-child),
.editor-styles-wrapper.ampere-bloecke-editor :is(.is-root-container, .wp-block-ampere-bereich.is-anordnung-stapel:not([class*="is-style-"]), .wp-block-ampere-bereich.is-anordnung-stapel.is-style-standard) > :is(h1, h2, h3, h4):not(:first-child),
/* A plain stack Bereich that follows other blocks starts a new section:
 * its first heading gets the space too. */
.ampere-bloecke__inhalt :is(.wp-block-ampere-bereich.is-anordnung-stapel:not([class*="is-style-"]), .wp-block-ampere-bereich.is-anordnung-stapel.is-style-standard):not(:first-child) > :is(h1, h2, h3, h4):first-child,
.ampere-bloecke-editor .editor-styles-wrapper :is(.wp-block-ampere-bereich.is-anordnung-stapel:not([class*="is-style-"]), .wp-block-ampere-bereich.is-anordnung-stapel.is-style-standard):not(:first-child) > :is(h1, h2, h3, h4):first-child,
.editor-styles-wrapper.ampere-bloecke-editor :is(.wp-block-ampere-bereich.is-anordnung-stapel:not([class*="is-style-"]), .wp-block-ampere-bereich.is-anordnung-stapel.is-style-standard):not(:first-child) > :is(h1, h2, h3, h4):first-child {
	margin-top: 1.2em;
}

@media (max-width: 900px) {
	.ampere-bloecke__inhalt h1 { font-size: 2.25rem; }
	.ampere-bloecke__inhalt h2 { font-size: 1.625rem; }
}

/* ---------- Page template "Ampere – Blöcke" ---------- */

/* The hero sits directly under the navigation. */
.ampere-bloecke-seite .header {
	margin-bottom: 0;
}

/* Full-width blocks break out with 100vw, which includes the scrollbar.
 * clip (unlike hidden) keeps position: sticky working. */
.ampere-bloecke {
	overflow-x: clip;
}

.ampere-bloecke__inhalt {
	padding: 0 16px 64px;
}

@media (min-width: 1232px) {
	.ampere-bloecke__inhalt {
		padding-left: 0;
		padding-right: 0;
	}
}

.ampere-bloecke__inhalt > .wp-block-ampere-hero:first-child {
	margin-top: 0;
}

/* Full-width hero: text lines up with the content column below, which
 * follows the theme's .wrap widths plus the padding above. */
.ampere-bloecke-seite .wp-block-ampere-hero.is-volle-breite .wp-block-ampere-hero__inhalt {
	width: 100%;
	max-width: none;
	padding-left: 16px;
	padding-right: 16px;
}

@media (min-width: 768px) {
	.ampere-bloecke-seite .wp-block-ampere-hero.is-volle-breite .wp-block-ampere-hero__inhalt { width: 768px; }
}

@media (min-width: 960px) {
	.ampere-bloecke-seite .wp-block-ampere-hero.is-volle-breite .wp-block-ampere-hero__inhalt { width: 960px; }
}

@media (min-width: 1200px) {
	.ampere-bloecke-seite .wp-block-ampere-hero.is-volle-breite .wp-block-ampere-hero__inhalt { width: 1200px; }
}

@media (min-width: 1232px) {
	.ampere-bloecke-seite .wp-block-ampere-hero.is-volle-breite .wp-block-ampere-hero__inhalt {
		padding-left: 0;
		padding-right: 0;
	}
}