/*
 * SLZ-Maschinenbau: Inhalte aus dem Block-Editor. Gilt auf der Website (Inhalt in .inhaltstext) und gleich im Editor
 * (.editor-styles-wrapper = <body> des Editor-Rahmens), damit die Redaktion sieht, was die Besucher sehen.
 * Werte gemessen an der alten Website (analyse/DESIGN-IST.md, analyse/messwerte/inhalt/*.json); Blöcke, die es live
 * noch nicht gibt, sind aus diesen Werten abgeleitet (analyse/bloecke.md).
 *
 * Das Block-CSS von WordPress lädt nur für die Blöcke einer Seite (Aufbau: Spalten, Cover, Galerie, Einbettung); die
 * Gestaltung hier hat Vorrang (eine Klasse mehr).
 *
 * Breiten: ab 1440 | 1280–1439 | 1024–1279 | 768–1023 | 480–767 | bis 479
 */

/* ---------- Schriften (lokal, aus Google Fonts, SIL OFL 1.1; Lizenzen in assets/fonts/) ---------- */

@font-face {
	font-family: "Bebas Neue";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/bebas-neue-latin-400.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Bebas Neue";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/bebas-neue-latin-ext-400.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/roboto-latin-wght.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/roboto-latin-ext-wght.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Kursiv (<em>, <i> im Inhalt): echter Schnitt wie live statt künstlich geneigt, lädt nur bei Bedarf */
@font-face {
	font-family: "Roboto";
	font-style: italic;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/roboto-italic-latin-wght.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Roboto";
	font-style: italic;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/roboto-italic-latin-ext-wght.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Grundwerte ---------- */

:root {
	--schrift-text: Roboto, Arial, sans-serif;
	--schrift-titel: "Bebas Neue", Impact, sans-serif;
	--farbe-text: #656565;
	--farbe-ueberschrift: #1E2831;
	--farbe-hell: #FDFDFD;
	--farbe-fuss-text: #D4D4D4;
	--farbe-akzent: #EC3D08;
	--farbe-akzent-hover: #DC3300;
	--farbe-meta: #909090;
	--farbe-linie: #D8D8D2;
	--flaeche-dunkel: #22242B;
	--flaeche-hell: #F7F7F7;
	--flaeche-menue: #000912;
	--rand: 75px;
}
@media (max-width: 1279px) { :root { --rand: 30px; } }
@media (max-width: 479px) { :root { --rand: 20px; } }

/* Nur Website und Editor-Rahmen, nicht die Oberfläche des Adminbereichs */
body:not(.wp-admin) {
	margin: 0;
	background: #fff;
	color: var(--farbe-text);
	font: 400 17px/1.70037 var(--schrift-text); /* ergibt wie live 28,90625 px (1.7 rundet Chrome auf 28,890625 ab) */
	-webkit-font-smoothing: antialiased;
	overflow-wrap: break-word; /* live überall: überlange Wörter brechen statt überzustehen */
}
@media (max-width: 1023px) { body:not(.wp-admin) { line-height: 1.58; } }
@media (max-width: 767px) { body:not(.wp-admin) { font-size: 16px; } } /* Zeilenhöhe 1,58 wie bis 1023 (16/25,3) */
@media (max-width: 479px) { body:not(.wp-admin) { font-size: 15px; line-height: 1.5303; } } /* 22,953125 px wie live */

.has-text-align-left { text-align: left; }
.has-text-align-center { text-align: center; }
.has-text-align-right { text-align: right; }
.has-text-align-justify { text-align: justify; }

:is(.inhaltstext, .editor-styles-wrapper) {

	/* ---------- Text (Absatz, Überschrift, Liste, Links) ---------- */

	& > :first-child { margin-top: 0; }
	& p { margin: 0 0 1.8em; }
	& strong, & b { font-weight: 700; }
	/* Hoch- und tiefgestellt ohne größere Zeile, 75 % (live gemessen: „e³-series“ auf /services/elektrotechnik/) */
	& :is(sup, sub) { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; }
	& sup { top: -0.5em; }
	& sub { bottom: -0.25em; }
	& a { color: var(--farbe-akzent); text-decoration: none; transition: color 0.3s ease; }
	& a:hover { color: var(--farbe-akzent-hover); }

	/* Überschriften: Bebas Neue, dunkel, Großbuchstaben. Größen wie live je Ebene (DESIGN-IST 3); H4 gemessen auf
	   /maschinenpark/, H3/H5 auf /portrait/. H1 gibt es im Inhalt nur in alten klassischen Beiträgen (abweichungen 1.1). */
	& :is(h1, h2, h3, h4, h5, h6) {
		margin: 1.45em 0 0.58em;
		color: var(--farbe-ueberschrift);
		font-weight: 400;
		font-family: var(--schrift-titel);
		text-transform: uppercase;
	}
	& h1 { font-size: 51px; line-height: 1; }
	& h2 { font-size: 47px; line-height: 1; letter-spacing: 0.75px; }
	& h3 { margin-bottom: 0.55em; font-size: 35px; line-height: 1.0857; letter-spacing: 0.5px; }
	& h4 { font-size: 27.999px; line-height: 1.214; letter-spacing: 0.55px; } /* live 27,999 px (gerundete rem-Angabe) */
	& h5 { margin: 1.5703em 0 0.7501em; font-size: 24px; line-height: 29px; letter-spacing: 0.58px; }
	& h6 { font-size: 19px; line-height: 1.4737; letter-spacing: 0.35px; }
	/* Farb-Preset der Überschrift (Block-Beiträge: has-text-dark-color) bleibt Vorrang über die Grundfarbe */

	/* Listen ohne Außenabstand, Einzug 1,5 em (gemessen /maschinenpark/, /portrait/, Beitrag 35845) */
	& :is(ul, ol) { margin: 0; padding-left: 1.5em; }

	/* ---------- Zitat (live nicht vorhanden; abgeleitet: Akzentlinie links, Text dunkel, Quelle wie Meta) ---------- */

	& .wp-block-quote {
		margin: 0 0 1.8em;
		padding: 0.2em 0 0.2em 30px;
		border-left: 3px solid var(--farbe-akzent);
		color: var(--farbe-ueberschrift);
		font-style: italic;
	}
	& .wp-block-quote > :last-child { margin-bottom: 0; }
	& .wp-block-quote p { margin-bottom: 0.8em; }
	& .wp-block-quote cite {
		display: block;
		margin-top: 0.6em;
		color: var(--farbe-meta);
		font: 400 15px/18px var(--schrift-titel);
		font-style: normal;
		letter-spacing: 0.7px;
		text-transform: uppercase;
	}
	& .wp-block-quote.has-text-align-center { padding: 0.2em 30px; border-left: 0; }

	/* ---------- Trenner (wie <hr> in klassischen Beiträgen: Linie 1 px #D8D8D2, oben und unten 6,79 em, bis 1279: 4 em,
	   bis 1023: 3 em;
	   gemessen beitrag-klassisch--technisches-schreiben-nach-din-82079-1) ---------- */

	& hr, & .wp-block-separator {
		height: 0;
		margin: 6.7857em 0;
		border: 0;
		border-top: 1px solid var(--farbe-linie);
		color: var(--farbe-linie);
		opacity: 1;
	}
	& .wp-block-separator.has-text-color { border-top-color: currentColor; }

	/* ---------- Abstandshalter ---------- */

	& .wp-block-spacer { margin: 0; }

	/* ---------- Bild (Block) ----------
	   Mittig, darunter 1,8 em (bis 1279: 1 em). Bilder mit fester Höhe („height: 500px“, Breite automatisch) bekommen
	   die passende Breite (inc/inhaltsbilder.php) und schrumpfen in schmalen Spalten mit ihrem Seitenverhältnis
	   (Korrektur, offene-fragen.md O, analyse/abweichungen.md 1.22). */
	& .wp-block-image { display: flex; flex-direction: column; align-items: center; margin: 0 0 1.8em; }
	& .wp-block-image img { max-width: 100%; height: auto; }
	& .wp-block-image > a { display: block; max-width: 100%; }
	/* Umflossen links/rechts: Breite wie das Bild, Unterschrift darunter (Tabellen-Darstellung), Abstände wie klassisch */
	& .wp-block-image.aligncenter { display: flex; margin-inline: auto; } /* WordPress setzt display: table */
	& .wp-block-image:is(.alignleft, .alignright) { display: table; }
	& .wp-block-image.alignleft { float: left; margin: 0.5em 1.7em 1em 0; }
	& .wp-block-image.alignright { float: right; margin: 0.5em 0 1em 1.7em; }
	& .wp-block-image:is(.alignleft, .alignright) figcaption { display: table-caption; caption-side: bottom; }
	& .wp-block-image.alignleft + *, & .wp-block-image.alignright + * { margin-top: 0; }

	/* Bildunterschrift (Bild, Galerie, Tabelle, Einbettung, Datei-Vorschau): wie [caption] in klassischen Beiträgen */
	& :is(.wp-block-image, .wp-block-gallery, .wp-block-table, .wp-block-embed, .wp-block-video) figcaption,
	& .wp-element-caption,
	& .wp-caption-text {
		margin: 0;
		padding: 14px 0 5px;
		color: var(--farbe-text);
		font: 400 14px/18px var(--schrift-text);
		text-align: center;
	}

	/* Große Blöcke stehen unter umflossenen Bildern, nicht daneben (alte Inhalte haben keine solchen Blöcke) */
	& :is(.wp-block-image:not(.alignleft, .alignright), .wp-block-gallery, .wp-block-columns, .wp-block-table, .wp-block-cover, .wp-block-group, .wp-block-embed, .wp-block-file, .wp-block-details) { clear: both; }

	/* KI-Kennzeichnung (EU-Icon) oben rechts auf dem Bild (inc/medien.php); der Rahmen ist so groß wie das Bild */
	& .ki-rahmen { position: relative; display: inline-block; max-width: 100%; line-height: 0; }
	& :is(.alignwide, .alignfull) .ki-rahmen { display: block; }
	& .wp-block-gallery .ki-rahmen { display: contents; }
	& :is(.ki-rahmen, .wp-block-cover) > .ki-hinweis { top: 12px; right: 12px; bottom: auto; z-index: 2; }
	& :is(.ki-rahmen, .wp-block-cover) .ki-hinweis__icon { width: auto; max-width: none; height: 24px; }

	/* ---------- Galerie (Aufbau von WordPress: Spalten 1–8, Zuschnitt) ---------- */

	& .wp-block-gallery { margin: 0 0 1.8em; }
	& .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
		padding: 30px 10px 8px;
		background: linear-gradient(0deg, rgba(5, 8, 13, 0.7) 0, rgba(5, 8, 13, 0) 100%);
		color: #fff;
		font-size: 13px;
		line-height: 17px;
	}
	& .wp-block-gallery > .wp-element-caption { width: 100%; }
	& .wp-block-gallery .wp-block-image { margin: 0; }

	/* ---------- Spalten: 30 px Abstand, bis 781 px untereinander mit 1 em Abstand (Umbruch wie live) ---------- */

	& .wp-block-columns { display: flex; flex-wrap: nowrap; gap: 30px; margin: 0 0 1.8em; }
	& .wp-block-column { flex: 1 1 0; min-width: 0; }
	& .wp-block-column[style*="flex-basis"] { flex-grow: 0; }
	& .wp-block-column > :last-child { margin-bottom: 0; }
	& .wp-block-columns.are-vertically-aligned-center, & .wp-block-column.is-vertically-aligned-center { align-items: center; align-self: center; }
	& .wp-block-columns.are-vertically-aligned-bottom, & .wp-block-column.is-vertically-aligned-bottom { align-items: flex-end; align-self: flex-end; }
	& .wp-block-spacer + .wp-block-columns, & .wp-block-columns:has(+ .wp-block-spacer) { margin-bottom: 0; }

	/* ---------- Gruppe: mit Hintergrund innen 50 px (bis 1023: 40, bis 767: 30, bis 479: 20) ---------- */

	& .wp-block-group { margin: 0 0 1.8em; }
	& .wp-block-group.has-background { padding: 50px; }
	& .wp-block-group > :last-child { margin-bottom: 0; }
	& .wp-block-group:is(.has-flaeche-dunkel-background-color, .has-text-dark-background-color) {
		color: var(--farbe-fuss-text);
		& :is(h1, h2, h3, h4, h5, h6) { color: var(--farbe-hell); }
	}

	/* ---------- Cover (Bild oder Farbe mit Text darüber; Aufbau und Abdunklung von WordPress) ---------- */

	& .wp-block-cover {
		margin: 0 0 1.8em;
		padding: 50px var(--rand);
		color: var(--farbe-hell);
	}
	& .wp-block-cover .wp-block-cover__inner-container { color: inherit; }
	& .wp-block-cover :is(h1, h2, h3, h4, h5, h6) { color: var(--farbe-hell); }
	& .wp-block-cover p:last-child { margin-bottom: 0; }

	/* ---------- Knöpfe ----------
	   Grundform wie „Homepage“ (404) und „Senden“ (Kontakt): Bebas Neue 18/22, Fläche Akzent #EC3D08 → #DC3300.
	   Stil „Dunkel“ wie „Kontakt“ im Inhalt der Startseite (#1E2831 → #28333D), Stil „Hell“ wie der Kopf-Knopf
	   (#FDFDFD, Schrift #171A21; für dunkle Flächen). Ohne Rundung. */
	& .wp-block-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin: 0 0 1.8em; }
	& .wp-block-buttons.is-content-justification-center { justify-content: center; }
	& .wp-block-buttons.is-content-justification-right { justify-content: flex-end; }
	& .wp-block-buttons.is-content-justification-space-between { justify-content: space-between; }
	& .wp-block-buttons.is-vertical { flex-direction: column; align-items: flex-start; }
	& .wp-block-button { margin: 0; }
	& .wp-block-button__link {
		display: inline-block;
		padding: 18px 37px 16px;
		border: 0;
		border-radius: 0;
		background: var(--farbe-akzent);
		color: #fff;
		font: 400 18px/22px var(--schrift-titel);
		letter-spacing: 0;
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
		cursor: pointer;
		transition: background-color 0.3s ease, color 0.3s ease;
	}
	& .wp-block-button__link:hover,
	& .wp-block-button__link:focus-visible { background: var(--farbe-akzent-hover); color: #fff; }
	& .wp-block-button.is-style-dunkel .wp-block-button__link { background: var(--farbe-ueberschrift); }
	& .wp-block-button.is-style-dunkel .wp-block-button__link:is(:hover, :focus-visible) { background: #28333D; }
	& .wp-block-button.is-style-hell .wp-block-button__link { background: var(--farbe-hell); color: #171A21; }
	& .wp-block-button.is-style-hell .wp-block-button__link:is(:hover, :focus-visible) { background: #fff; color: var(--farbe-ueberschrift); }
	/* eigene Farbe aus der Palette (Fläche/Text) bleibt, Hover dunkelt nur leicht ab */
	& .wp-block-button__link:is(.has-background, .has-text-color):is(:hover, :focus-visible) { filter: brightness(0.93); }
	& .wp-block-button.has-custom-width .wp-block-button__link { width: 100%; }
	& .wp-block-button.wp-block-button__width-25 { width: calc(25% - 15px); }
	& .wp-block-button.wp-block-button__width-50 { width: calc(50% - 10px); }
	& .wp-block-button.wp-block-button__width-75 { width: calc(75% - 5px); }
	& .wp-block-button.wp-block-button__width-100 { width: 100%; }

	/* ---------- Datei (PDF zum Herunterladen, wahlweise mit eingebetteter Vorschau) ----------
	   Wie live auf /download/ (analyse/messwerte/inhalt/download--download.json): fließend in der Zeile, Vorschau
	   100 % breit (Höhe aus dem Block), darunter Dateiname und „Herunterladen“ als Links in Akzentfarbe ohne Abstand
	   dazwischen; „Herunterladen“ mit Innenabstand 0,667 em + 2 px / 1,333 em + 2 px (17 px: 13,339 / 24,661). */
	& .wp-block-file:not(.wp-element-button) { display: block; margin: 0 0 1.8em; font-size: inherit; } /* WordPress: 0,8 em */
	& .wp-block-file.aligncenter { text-align: center; }
	& .wp-block-file.alignright { text-align: right; }
	& .wp-block-column > .wp-block-file:last-child { margin-bottom: 0; }
	& .wp-block-file .wp-block-file__embed { display: inline; margin: 0; border: 0; vertical-align: baseline; }
	& .wp-block-file .wp-block-file__button {
		display: inline;
		margin: 0;
		padding: calc(0.667em + 2px) calc(1.333em + 2px);
		border: 0;
		border-radius: 0;
		background: none;
		color: var(--farbe-akzent);
		font: inherit;
		text-transform: none;
	}
	& .wp-block-file .wp-block-file__button:is(:hover, :focus-visible) { color: var(--farbe-akzent-hover); }

	/* Überschrift „Abschnitt“ (Elementor-Seiten Download, ISO 9001, Grundsatzerklärung): ohne Abstand darunter, davor
	   90,4 px (bis 1023: 102,75, bis 767: 85,3) Abstand zum vorigen Abschnitt, gemessen live */
	& :is(h2, h3, h4, h5, h6).is-style-abschnitt { margin-bottom: 0; }
	& :is(h2, h3, h4, h5, h6).is-style-abschnitt:not(:first-child) { margin-top: 90.4px; }
	/* Spalten „Dateien“: nebeneinander ab 768 px (Abstand 30), darunter ohne Abstand untereinander, ohne Abstand unten */
	& .wp-block-columns.is-style-dateien { margin-bottom: 0; }
	& .wp-block-columns.is-style-dateien + * { margin-top: 0; }
	/* Seiten aus Abschnitten (ehemals Elementor): letzter Block ohne Abstand unten, zentriertes Bild ohne Abstände */
	&:has(> .is-style-abschnitt) > :last-child { margin-bottom: 0; }
	&:has(> .is-style-abschnitt) > .wp-block-image.aligncenter { margin-bottom: 0; }
	&:has(> .is-style-abschnitt) > .wp-block-image.aligncenter > img { margin-bottom: 0; }

	/* ---------- Tabelle (Leistung „Software“) ----------
	   Rahmen 1 px, Zeilen im Wechsel weiß/#F5F5F1 (gerade Zeilen), Zeilenhöhe fest wie live (28,90625 px, bis 1023:
	   26,86 px, bis 767: 25,28 px, bis 479: 15/20 px). Kopf und Fuß der Tabelle auf #F5F5F1, Kopf in Bebas Neue. */
	& .wp-block-table { display: flex; flex-direction: column; margin: 0 0 1em; overflow-x: auto; }
	& .wp-block-table table { width: 100%; border-collapse: collapse; }
	& .wp-block-table .has-fixed-layout { table-layout: fixed; }
	& .wp-block-table :is(th, td) {
		padding: 8px;
		border: 1px solid var(--farbe-text);
		background: #fff;
		font: 400 16px/28.90625px var(--schrift-text);
		vertical-align: middle;
		overflow-wrap: break-word; /* lange Wörter brechen wie live in der Zelle um (z. B. „Bearbeitungsprogramm-e“ bei 390 px) */
	}
	& .wp-block-table tbody tr:nth-child(even) :is(th, td) { background: #F5F5F1; }
	& .wp-block-table :is(thead, tfoot) :is(th, td) {
		background: #F5F5F1;
		color: var(--farbe-ueberschrift);
		font: 400 18px/28.90625px var(--schrift-titel);
		letter-spacing: 0.35px;
		text-transform: uppercase;
	}
	& .wp-block-table thead { border-bottom: 0; }
	& .wp-block-table tfoot { border-top: 0; }

	/* ---------- Akkordeon (Details): Titel wie live (Bebas Neue 19, fett), Plus/Minus rechts, Linien dazwischen ---------- */

	& .wp-block-details {
		margin: 0;
		border-bottom: 1px solid #DADADA;
	}
	& .wp-block-details + :not(.wp-block-details) { margin-top: 1.8em; }
	& :not(.wp-block-details) + .wp-block-details { border-top: 1px solid #DADADA; }
	& .wp-block-details summary {
		position: relative;
		display: block;
		padding: 21px 40px 21px 0;
		color: var(--farbe-ueberschrift);
		font: 700 19px/19px var(--schrift-titel); /* live 700: synthetisches Fett wie bei Bebas Neue gemessen */
		letter-spacing: 0.35px;
		text-transform: uppercase;
		list-style: none;
		cursor: pointer;
	}
	& .wp-block-details summary::-webkit-details-marker { display: none; }
	/* Plus aus zwei Linien; offen bleibt nur die waagerechte (Minus) */
	& .wp-block-details summary::before,
	& .wp-block-details summary::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 2px;
		width: 15px;
		height: 2px;
		margin-top: -1px;
		background: currentColor;
		transition: transform 0.3s ease;
	}
	& .wp-block-details summary::after { transform: rotate(90deg); }
	& .wp-block-details[open] summary::after { transform: rotate(0deg); }
	& .wp-block-details > :not(summary) { margin-top: 0; }
	& .wp-block-details > :last-child:not(summary) { margin-bottom: 21px; }

	/* ---------- Einbettung (YouTube, Vimeo): erst nach Klick (inc/einbettungen.php, analyse/abweichungen.md 2.5) ---------- */

	& .wp-block-embed { margin: 0 0 1.8em; }
	& .wp-block-embed__wrapper { position: relative; }
	& .wp-block-embed iframe { display: block; width: 100%; max-width: 100%; border: 0; }

	/* ---------- Klassischer Inhalt (391 alte Beiträge, Block „Klassisch“) ---------- */

	& img.aligncenter, & .aligncenter > img { display: block; margin: 0 auto 1em; }
	& img.alignleft { float: left; margin: 0.5em 1.7em 1em 0; }
	& img.alignright { float: right; margin: 0.5em 0 1em 1.7em; }
	& img.alignnone { margin: 0 0 1em; }
	/* Bild mit Bildunterschrift ([caption], HTML5-Ausgabe von WordPress): Bild in Spaltenbreite, Unterschrift mittig */
	& .wp-caption { display: flex; flex-direction: column; max-width: 100%; margin: 0 0 1em; }
	& .wp-caption > a { display: block; }
	& .wp-caption-text { align-self: center; text-align: left; }
}

/* ---------- Zwei-Klick-Platzhalter (YouTube, Vimeo; inc/einbettungen.php) ----------
   Vorschaubild abgedunkelt wie das Titelbild (#232321, 0,7), darauf Titel, Knopf wie „Homepage“ und Hinweis. Die Fläche
   hat das Seitenverhältnis des Videos und wächst, wenn der Text auf schmalen Bildschirmen mehr Platz braucht. */
.wp-embed-responsive .wp-has-aspect-ratio .wp-block-embed__wrapper:has(> .zweiklick)::before { display: none; } /* Seitenverhältnis kommt vom Platzhalter */
.zweiklick {
	position: relative;
	display: grid;
	place-items: center;
	overflow: hidden;
	background: var(--flaeche-dunkel);
	color: var(--farbe-fuss-text);
}
.zweiklick__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.zweiklick__bild + .zweiklick__feld::before { /* Abdunklung über dem ganzen Bild (Bezug: .zweiklick) */
	content: "";
	position: absolute;
	inset: 0;
	background: #232321;
	opacity: 0.7;
	pointer-events: none;
}
.zweiklick__feld {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	max-width: 620px;
	padding: 30px;
	text-align: center;
}
.zweiklick__feld > * { position: relative; }
.zweiklick__titel {
	margin: 0;
	color: var(--farbe-hell);
	font: 400 24px/29px var(--schrift-titel);
	letter-spacing: 0.58px;
	text-transform: uppercase;
}
.zweiklick__knopf {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 18px 37px 16px;
	border: 0;
	background: var(--farbe-akzent);
	color: #fff;
	font: 400 18px/22px var(--schrift-titel);
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.3s ease;
}
.zweiklick__knopf:hover, .zweiklick__knopf:focus-visible { background: var(--farbe-akzent-hover); }
.zweiklick__symbol { width: 12px; height: 14px; margin-top: -2px; }
:is(.inhaltstext, .editor-styles-wrapper) .zweiklick__hinweis { margin: 0; font: 400 14px/20px var(--schrift-text); }
:is(.inhaltstext, .editor-styles-wrapper) .zweiklick__hinweis a { color: var(--farbe-hell); text-decoration: underline; text-underline-offset: 2px; }
:is(.inhaltstext, .editor-styles-wrapper) .zweiklick__hinweis a:hover { color: #fff; }
.zweiklick.ist-geladen { display: block; }
.zweiklick iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 479px) {
	.zweiklick__feld { gap: 10px; padding: 20px 15px; }
	.zweiklick__titel { display: none; } /* bei 350 px Breite wäre die Fläche sonst deutlich höher als das Video */
	.zweiklick__knopf { padding: 14px 30px 12px; font-size: 17px; }
	:is(.inhaltstext, .editor-styles-wrapper) .zweiklick__hinweis { font-size: 12px; line-height: 16px; }
}

/* ---------- Ausrichtung weit und volle Breite (nur Website; im Editor regelt WordPress das über theme.json) ----------
   main.inhalt ist der Bezugsrahmen (100cqi = Fensterbreite ohne Bildlaufleiste). Weit: so breit wie der Inhalt der
   Seiten (höchstens 1290 px), also in Beiträgen breiter als die Textspalte; volle Breite: von Rand zu Rand. */
.inhalt { container-type: inline-size; }
.inhaltstext .alignwide {
	margin-inline: min(0px, calc((100% - min(100cqi - 2 * var(--rand), 1290px)) / 2));
	max-width: none;
}
.inhaltstext .alignfull {
	margin-inline: calc((100% - 100cqi) / 2);
	max-width: none;
}
.inhaltstext .wp-block-image:is(.alignwide, .alignfull) img { width: 100%; }

/* ---------- Umbrüche ---------- */

@media (max-width: 1279px) {
	:is(.inhaltstext, .editor-styles-wrapper) {
		& p { margin-bottom: 1em; }
		& h1 { font-size: 46px; }
		& h2 { font-size: 36px; }
		& h3 { font-size: 28px; line-height: 30.4px; }
		& hr, & .wp-block-separator { margin: 4em 0; }
		& h4 { font-size: 23px; }
		& h5 { font-size: 20px; line-height: 24.2px; }
		& h6 { font-size: 18px; }
		& .wp-block-image { margin-bottom: 1em; }
	}
}
@media (max-width: 1023px) {
	:is(.inhaltstext, .editor-styles-wrapper) {
		& h1 { font-size: 38px; }
		& h2 { font-size: 31px; }
		& h3 { margin-bottom: 16px; font-size: 26px; line-height: 30px; }
		& h4 { margin: 24px 0 15px; line-height: 27px; }
		& h5 { margin: 20px 0 12px; line-height: 25px; }
		& hr, & .wp-block-separator { margin: 3em 0; }
		& .wp-block-table :is(th, td) { line-height: 26.86px; }
		& .wp-block-group.has-background { padding: 40px; }
	}
}
@media (max-width: 781px) {
	:is(.inhaltstext, .editor-styles-wrapper) .wp-block-columns { flex-direction: column; gap: 1em; }
	:is(.inhaltstext, .editor-styles-wrapper) .wp-block-column { flex-basis: auto !important; } /* feste Spaltenbreite gilt nicht untereinander */
}
@media (max-width: 767px) {
	:is(.inhaltstext, .editor-styles-wrapper) {
		& h1 { font-size: 30px; }
		& h2 { font-size: 24px; }
		& h3 { margin-bottom: 13px; font-size: 21px; line-height: 26px; }
		& h5 { margin-bottom: 10px; font-size: 18px; line-height: 21px; }
		& h4 { margin: 21px 0 12px; font-size: 19px; line-height: 23px; }
		& h6 { font-size: 17px; line-height: 20px; }
		& .wp-block-table :is(th, td) { line-height: 25.28px; }
		& .wp-block-group.has-background { padding: 30px; }
		& .wp-block-cover { padding-block: 30px; }
		/* umflossene Bilder stehen ab hier als Block (Breite wie das Bild, höchstens Spaltenbreite) */
		& img.alignleft, & img.alignright { float: none; display: block; margin: 1em 0; }
		& .wp-block-image:is(.alignleft, .alignright) { float: none; margin: 1em auto; }
		& .wp-block-quote { padding-left: 20px; }
		& :is(.ki-rahmen, .wp-block-cover) > .ki-hinweis { top: 10px; right: 10px; }
		& :is(.ki-rahmen, .wp-block-cover) .ki-hinweis__icon { height: 18px; }
	}
}
@media (max-width: 479px) {
	:is(.inhaltstext, .editor-styles-wrapper) {
		& h1 { font-size: 26px; line-height: 30px; }
		& h3 { line-height: 24px; }
		& h4 { margin-top: 20px; }
		/* Überschriften mit Silbentrennung wie live (nur bis 479 px) */
		& :is(h1, h2, h3, h4, h5, h6) { hyphens: auto; }
		& .wp-block-table :is(th, td) { padding: 7.5px; font-size: 15px; line-height: 20px; }
		& .wp-caption-text { padding: 11px 0 2px; }
		& .wp-block-group.has-background { padding: 20px; }
		& .wp-block-button__link { padding: 14px 35px 12px; font-size: 17px; }
	}
}

/* Abschnitt und Dateien (siehe oben, Datei-Block) */
@media (max-width: 1023px) {
	:is(.inhaltstext, .editor-styles-wrapper) :is(h2, h3, h4, h5, h6).is-style-abschnitt:not(:first-child) { margin-top: 102.75px; }
}
@media (min-width: 768px) and (max-width: 781px) {
	/* WordPress stapelt Spalten schon unter 782 px (flex-wrap und flex-basis mit !important), live erst unter 768 */
	:is(.inhaltstext, .editor-styles-wrapper) .wp-block-columns.is-style-dateien { flex-direction: row; flex-wrap: nowrap !important; gap: 30px; }
	:is(.inhaltstext, .editor-styles-wrapper) .wp-block-columns.is-style-dateien > .wp-block-column { flex: 1 1 0 !important; }
}
@media (max-width: 767px) {
	:is(.inhaltstext, .editor-styles-wrapper) :is(h2, h3, h4, h5, h6).is-style-abschnitt:not(:first-child) { margin-top: 85.3px; }
	:is(.inhaltstext, .editor-styles-wrapper) :is(h2, h3, h4, h5, h6).is-style-abschnitt { letter-spacing: normal; }
	:is(.inhaltstext, .editor-styles-wrapper) .wp-block-columns.is-style-dateien { gap: 0; }
}

/* Seiten (nicht Leistungen): ein Absatz am Ende ohne Abstand unten (live gemessen: Geschichte, Stellenangebote,
   Datenschutz; Leistungen behalten ihn, gemessen: Allgemeiner Maschinenbau, Elektrotechnik) */
.seite:not(.leistung) > .seite__inhalt > p:last-child { margin-bottom: 0; }