/* =====================================================================
   Blöcke im Look der Elementor-Seiten                    (14.10.2026)

   Redakteure schreiben neue Seiten im Block-Editor. Akkordeon und Buttons
   sollen dort aussehen wie die Elementor-Widgets auf den übrigen Seiten.
   Werte auf develop gemessen (Berufsschule, Elementor-Akkordeon und
   -Buttons). Geladen im Frontend und im Editor (enqueue_block_assets) –
   im Editor fehlt Elementors Website-Stil, deshalb hier vollständig.

   Fokus: kein eigener Stil – der zweifarbige Rahmen aus upmate-customs.css
   (:focus-visible für Links und Buttons) gilt auch hier.
   ===================================================================== */

/* --- Abstände ----------------------------------------------------------
   Elementor setzt jedes Widget mit 32 px vom nächsten ab; Text unter sich
   (Absatz, Liste) 16 px, Überschriften 32 px. Im Beitragsinhalt hatten
   Bild, Tabelle, Galerie, Akkordeon, Buttons nur 14–16 px (gemessen
   14.10.2026, „Test 123“ gegen Berufskolleg I+II und Berufsschule).
   Hier 32 px oben und unten; die Ränder fallen mit den 16 px der Absätze
   zusammen, es bleiben 32 px. Gilt für alle Beiträge und Seiten im
   Beitragsinhalt. Datei-Blöcke bewusst nicht: In Meldungen stehen oft
   mehrere Downloads untereinander, die sollen als Liste zusammenbleiben. */

.elementor-widget-theme-post-content :is(
	.wp-block-image,
	.wp-block-gallery,
	.wp-block-table,
	.wp-block-buttons,
	.wp-block-accordion,
	.wp-block-quote,
	.wp-block-separator,
	.wp-block-embed,
	.wp-block-video,
	.wp-block-audio,
	.wp-block-cover,
	.wp-block-columns,
	.wp-block-media-text
) {
	margin-top: 32px;
	margin-bottom: 32px;
}

/* --- Akkordeon ---------------------------------------------------------
   Elementor: weiße Zeilen auf hellgrauem Grund, Titel dunkel und fett,
   blauer Pfeil rechts, 16 px Innenabstand und Abstand zwischen den Zeilen.
   Gegner: Elementors Website-Stil `.elementor-kit-33 button` (0,1,1) und
   `…button:hover` (0,2,1) macht den Titel-Knopf sonst blau, groß und
   magenta beim Darüberfahren. Die Selektoren unten haben (0,3,0)/(0,4,0). */

.wp-block-accordion .wp-block-accordion-item {
	margin: 0 0 16px;
	background: #fff;
}

.wp-block-accordion .wp-block-accordion-heading {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
}

.wp-block-accordion .wp-block-accordion-heading .wp-block-accordion-heading__toggle,
.wp-block-accordion .wp-block-accordion-heading .wp-block-accordion-heading__toggle:hover,
.wp-block-accordion .wp-block-accordion-heading .wp-block-accordion-heading__toggle:focus {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	margin: 0;
	padding: 16px;
	border: 0;
	border-radius: 0;
	background: #fff;
	color: #2b2b2b;                 /* 14,2:1 auf Weiß */
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1.9;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	cursor: pointer;
}

/* Pfeil statt „+“: wie Elementor (Chevron #0071b3, 5,2:1 auf Weiß).
   Das „+“ ist aria-hidden und wird nur optisch ersetzt. */
.wp-block-accordion .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon,
.wp-block-accordion .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon {
	position: relative;
	flex: none;
	width: 12px;
	height: 12px;
	font-size: 0;
	transform: none;
}

.wp-block-accordion .wp-block-accordion-heading__toggle-icon::before {
	content: "";
	position: absolute;
	top: 1px;
	left: 2px;
	width: 7px;
	height: 7px;
	border-right: 2px solid #0071b3;
	border-bottom: 2px solid #0071b3;
	transform: rotate(45deg);
}

.wp-block-accordion .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon::before {
	top: 4px;
	transform: rotate(-135deg);
}

.wp-block-accordion .wp-block-accordion-panel {
	padding: 0 16px 16px;
}

/* --- Buttons -----------------------------------------------------------
   Elementor: Blau #007cc2 mit weißer Schrift (4,5:1), 900, Großbuchstaben,
   10/20 px; beim Darüberfahren und bei Fokus Magenta #cc006f (5,5:1).
   (0,4,0) schlägt die Unterstreichung für Links im Beitragsinhalt aus
   upmate-customs.css (0,3,1) – ein Button ist kein Fließtextlink. */

.wp-block-buttons .wp-block-button .wp-block-button__link.wp-element-button {
	display: inline-block;
	padding: 10px 20px;
	border: 0;
	border-radius: 0;
	background: #007cc2;
	color: #fff;
	font-family: inherit;
	font-size: 0.85rem;
	font-weight: 900;
	line-height: 1.9;
	letter-spacing: normal;
	text-decoration: none;
	text-transform: uppercase;
}

.wp-block-buttons .wp-block-button .wp-block-button__link.wp-element-button:hover,
.wp-block-buttons .wp-block-button .wp-block-button__link.wp-element-button:focus {
	background: #cc006f;
	color: #fff;
}

/* --- Tabelle -----------------------------------------------------------
   Wie die Stundentafeln (TablePress, z. B. Berufskolleg I+II): weiße
   Zellen, zwischen den Zeilen 1 px Abstand, durch den der hellgraue
   Seitengrund als Linie scheint; keine senkrechten Linien; 10 px Innen-
   abstand, 0,8 rem, Kopfzeile fett. Text #2b2b2b auf Weiß: 14,2:1.
   Gegner: WordPress-Grundstil (Rahmen 1 px, Kopfzeile 3 px) und Elementors
   `table tbody>tr:nth-child(odd)>td` (0,1,4) mit grauen Streifen – die
   Selektoren unten haben (0,1,5). Waagerechtes Scrollen bei schmalen
   Bildschirmen bringt WordPress mit (figure overflow-x:auto). */

figure.wp-block-table table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: separate;
	border-spacing: 0 1px;
	color: #2b2b2b;
	font-size: 0.8rem;
	line-height: 1.875;
}

figure.wp-block-table table thead tr th,
figure.wp-block-table table thead tr td,
figure.wp-block-table table tbody tr th,
figure.wp-block-table table tbody tr td,
figure.wp-block-table table tfoot tr th,
figure.wp-block-table table tfoot tr td {
	padding: 10px;
	border: 0;
	background: #fff;
	text-align: left;
	vertical-align: top;
}

figure.wp-block-table table thead,
figure.wp-block-table table tfoot {
	border: 0;
}

figure.wp-block-table table thead tr th,
figure.wp-block-table table thead tr td,
figure.wp-block-table table tfoot tr th,
figure.wp-block-table table tfoot tr td {
	font-weight: 700;
	vertical-align: middle;
}

figure.wp-block-table figcaption {
	margin-top: 8px;
	color: #2b2b2b;
	font-size: 0.8rem;
	text-align: left;
}