/*
Theme Name: SEKER Welding Coordination
Theme URI: https://schweissaufsicht-rheinmain.de/
Author: Seker Ingenieur- und Sachverstaendigenbuero
Author URI: https://schweissaufsicht-rheinmain.de/
Description: Child Theme fuer den Fachbereich Schweisstechnik des Seker Ingenieur- und Sachverstaendigenbueros. Gleiche Markenfamilie wie ingenieurbuero-metallbau.de, eigenstaendige fachliche Anmutung. Systemschriften, keine externen Fonts.
Template: twentytwentyfive
Version: 1.5.3
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: seker-swc
*/

/* ---------------------------------------------------------------
   Fokus – sichtbar und kontrastreich
   --------------------------------------------------------------- */
:where(a, button, input, select, textarea, .wp-block-button__link):focus-visible {
	outline: 2px solid var(--wp--preset--color--akzent);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ---------------------------------------------------------------
   Eyebrow – kleine Vorzeile ueber der Ueberschrift
   --------------------------------------------------------------- */
.ta-eyebrow {
	font-size: var(--wp--preset--font-size--klein);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--akzent);
	font-weight: 600;
	margin: 0 0 var(--wp--preset--spacing--20) 0;
}

/* ---------------------------------------------------------------
   Karte – Grundbaustein des Rasters
   --------------------------------------------------------------- */
.ta-card {
	background: var(--wp--preset--color--grund);
	border: var(--wp--custom--linie--staerke) solid var(--wp--preset--color--linie);
	border-left: 3px solid var(--wp--preset--color--akzent);
	border-radius: 2px;
	padding: var(--wp--preset--spacing--40);
	height: 100%;
	box-sizing: border-box;
}

.ta-card > *:first-child { margin-top: 0; }
.ta-card > *:last-child { margin-bottom: 0; }

.ta-card h3 { margin-bottom: var(--wp--preset--spacing--20); }

/* ---------------------------------------------------------------
   Nummerierung in Prozessketten
   --------------------------------------------------------------- */
.ta-num {
	font-size: var(--wp--preset--font-size--klein);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.06em;
	font-weight: 700;
	color: var(--wp--preset--color--akzent);
	margin: 0 0 var(--wp--preset--spacing--10) 0;
}

/* ---------------------------------------------------------------
   Prozesskette – gleichmaessiges Raster, umbruchfaehig
   --------------------------------------------------------------- */
.ta-kette {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--wp--preset--spacing--30);
}

.ta-kette > .wp-block-group { margin: 0; }

/* ---------------------------------------------------------------
   Hinweis-/Abgrenzungskasten
   --------------------------------------------------------------- */
.ta-hinweis {
	background: var(--wp--preset--color--flaeche-tief);
	border-left: 3px solid var(--wp--preset--color--status-hinweis);
	border-radius: 2px;
	padding: var(--wp--preset--spacing--40);
}

.ta-hinweis > *:first-child { margin-top: 0; }
.ta-hinweis > *:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------
   Normbezug – kleine, zurueckhaltende Fusszeile in Karten
   --------------------------------------------------------------- */
.ta-norm {
	font-size: var(--wp--preset--font-size--klein);
	color: var(--wp--preset--color--text-sekundaer);
	border-top: 1px solid var(--wp--preset--color--linie);
	padding-top: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--20);
}

/* ---------------------------------------------------------------
   Listen – etwas Luft zwischen den Punkten
   --------------------------------------------------------------- */
.wp-block-group li + li { margin-top: 0.4em; }

/* Auftrag 10C - Navigationsreiter von der Listenregel ausnehmen */
.wp-block-navigation li + li,
.wp-block-navigation__container li + li { margin-top: 0; }

/* ---------------------------------------------------------------
   Spalten – auf schmalen Viewports gestapelt
   --------------------------------------------------------------- */
@media (max-width: 781px) {
	.wp-block-columns { gap: var(--wp--preset--spacing--30); }
}

/* ---------------------------------------------------------------
   Tabellen – horizontal scrollbar statt Layoutbruch
   --------------------------------------------------------------- */
.wp-block-table { overflow-x: auto; }
.wp-block-table table { border-collapse: collapse; }
.wp-block-table td,
.wp-block-table th {
	border: 1px solid var(--wp--preset--color--linie);
	padding: 0.6em 0.8em;
}

/* ---------------------------------------------------------------
   Bilder – Bildunterschrift klar als solche erkennbar
   --------------------------------------------------------------- */
.wp-block-image figcaption {
	font-size: var(--wp--preset--font-size--klein);
	color: var(--wp--preset--color--text-sekundaer);
	text-align: left;
	margin-top: var(--wp--preset--spacing--20);
}

/* ---------------------------------------------------------------
   Navigation – Burger bis einschliesslich 1023 px (Auftrag 08: Navigation verschlankt)
   Hoehere Spezifitaet als der Core-Selektor, damit die Regel greift.
   --------------------------------------------------------------- */
@media (max-width: 1023px) {
	.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* ---------------------------------------------------------------
   Entwicklungshinweis im Footer
   --------------------------------------------------------------- */
.ta-entwicklung {
	font-size: var(--wp--preset--font-size--klein);
	color: var(--wp--preset--color--text-sekundaer);
}


/* ---------------------------------------------------------------
   Tabellen - Spaltenbreiten (Auftrag 09)
   --------------------------------------------------------------- */
.wp-block-table table { width: 100%; }
.wp-block-table th { text-align: left; font-weight: 650; background: var(--wp--preset--color--flaeche-tief); }
.wp-block-table td:first-child,
.wp-block-table th:first-child { white-space: nowrap; }
.wp-block-table td:nth-child(2),
.wp-block-table th:nth-child(2) { white-space: nowrap; width: 1%; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------
   Prozesslinie - Karten gleich hoch und mit ruhigem Innenabstand
   --------------------------------------------------------------- */
.ta-kette .ta-card { display: flex; flex-direction: column; }
.ta-kette .ta-card ul { margin-bottom: 0; }

/* ---------------------------------------------------------------
   Bilder in Textspalten - Bildunterschrift dezent
   --------------------------------------------------------------- */
.wp-block-column > .wp-block-image { margin-bottom: 0; }

/* ---------------------------------------------------------------
   Inverses Statementband
   --------------------------------------------------------------- */
.has-invers-background-color p { text-wrap: balance; }

/* Auftrag 09 - Nachtrag: Luft vor Zwischenueberschriften */
.wp-block-column > h3:not(:first-child),
.wp-block-group > h3:not(:first-child) { margin-top: var(--wp--preset--spacing--30); }
.wp-block-column > .wp-block-list + h3,
.wp-block-group > .wp-block-list + h3 { margin-top: var(--wp--preset--spacing--40); }

/* Auftrag 09 - Statementband (eigene Klasse, weil .has-text-color global mit !important gesetzt wird) */
.ta-statement h2 { color: #FFFFFF !important; font-size: var(--wp--preset--font-size--heading-lg) !important; line-height: 1.4; }
.ta-statement p { color: #C9CFD4 !important; }

/* ---------------------------------------------------------------
   Auftrag 10 - Typografie-Tokens

   Die Schriftgroessen-Presets heissen seit Auftrag 10 heading-md,
   heading-lg und heading-xl. Damit ist die fruehere Slug-Kollision in
   theme.json aufgeloest; der in Auftrag 09 ergaenzte CSS-Workaround
   wurde entfernt und ist nicht mehr erforderlich.
   --------------------------------------------------------------- */

/* Auftrag 09 - lange URLs und Woerter umbrechen statt ueberlaufen */
main a, main p, main li, main td { overflow-wrap: anywhere; }

/* Auftrag 09, geaendert in TA-64g - lange deutsche Komposita in Ueberschriften.
   break-word statt anywhere: Notbruch nur, wenn keine regulaere Trennstelle
   existiert; vorhandene Silbentrennung behaelt Vorrang. hyphens:auto bleibt. */
main h1, main h2, main h3, main h4 { overflow-wrap: break-word; hyphens: auto; }
main p, main li { hyphens: auto; }

/* Auftrag TA-64f - H1 auf schmalen Viewports begrenzen.
   Grund: die Regel oben (Auftrag 09) setzt overflow-wrap:anywhere als
   Ueberlaufschutz; dadurch bricht "Schweisskoordination" unter ca. 400 px
   mitten im Wort. Die Begrenzung greift nur dort, wo das Preset zu gross
   waere - min() laesst kleinere Werte unveraendert. Desktop unberuehrt. */
@media (max-width: 600px) {
  main h1.has-hero-font-size { font-size: min(var(--wp--preset--font-size--hero), 8.2vw) !important; }
}