/*
 * Standard-Design C „Dynamisch & modern“ (seit 09.10.2026 fester Teil des Themes, auch live).
 * Geladen von inc/setup.php (traydon_enqueue_design_c) nach theme.css, komponenten.css,
 * bloecke-basis.css und partner.css; wirkt über die Body-Klasse „stil-c“, die inc/setup.php
 * standardmäßig setzt. Nur lokal schaltet inc/varianten.php zum Vergleich auf ?stil=0/a/b um.
 *
 * Pill-Schaltflächen mit Füll-Animation, Einblenden beim Scrollen (IntersectionObserver in
 * assets/js/varianten.js), Hero mit Verlauf Schwarz → transparent über dem Bild, Karten mit 16 px
 * Radius und farbiger Oberkante beim Zeigen, animierte Unterstreichung in der Navigation,
 * schmale Titelspalte auf Inhaltsseiten, Navigation ab 1280 px einzeilig.
 * Bewegung nur über transform/opacity; bei prefers-reduced-motion: reduce abgeschaltet.
 */
body.stil-c {
	--tr-radius: 12px;
	--tr-radius-m: 16px;
	--wp--custom--radius--klein: 12px;
	--wp--custom--radius--mittel: 16px;
	--c-radius-karte: 16px;
	--c-fuellung: 360ms;
	--c-kurve: cubic-bezier(0.65, 0, 0.35, 1);
}

body.stil-c .tr-anfrage {
	--tr-a-radius: 12px;
}

/* ---------- Schaltflächen: Pill mit Füll-Animation von links ---------- */
body.stil-c .wp-block-button__link,
body.stil-c .wp-element-button {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	/* overflow:hidden verschiebt die Grundlinie ans untere Ende → ohne das entsteht Unterlänge (Kopf +8 px) */
	vertical-align: top;
	border-radius: 999px;
	padding-inline: 1.625rem;
	/* Textfarbe springt erst, wenn die Füllung zur Hälfte eingelaufen ist (diskret, keine Farbanimation) */
	transition: color 0s linear calc(var(--c-fuellung) / 2), border-color 0s linear calc(var(--c-fuellung) / 2);
}

body.stil-c .wp-block-button__link::before,
body.stil-c .wp-element-button::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--wp--preset--color--text);
	border-radius: inherit;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--c-fuellung) var(--c-kurve);
}

body.stil-c .wp-block-button__link:is(:hover, :focus-visible)::before,
body.stil-c .wp-element-button:is(:hover, :focus-visible)::before {
	transform: scaleX(1);
}

/* Primär: Rot bleibt Grundfläche, Schwarz läuft ein */
body.stil-c .wp-block-button:not(.tr-button-sekundaer, .is-style-outline) .wp-block-button__link:is(:hover, :focus-visible) {
	color: var(--wp--preset--color--flaeche);
	background-color: var(--wp--preset--color--primaer);
	border-color: var(--wp--preset--color--text);
}

/* Sekundär: Umriss, Textfarbe läuft als Fläche ein */
body.stil-c .wp-block-button.tr-button-sekundaer .wp-block-button__link,
body.stil-c .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
}

body.stil-c .wp-block-button.tr-button-sekundaer .wp-block-button__link:is(:hover, :focus-visible),
body.stil-c .wp-block-button.is-style-outline .wp-block-button__link:is(:hover, :focus-visible) {
	color: var(--wp--preset--color--flaeche);
	background: transparent;
}

/* Auf dunklen/roten Flächen läuft Weiß ein */
body.stil-c :where(.tr-section--dunkel, .tr-cta, .tr-kontaktband) .wp-block-button.tr-button-sekundaer .wp-block-button__link::before,
body.stil-c .tr-kontaktband .wp-block-button:not(.tr-button-sekundaer) .wp-block-button__link::before {
	background: var(--wp--preset--color--flaeche);
}

body.stil-c :where(.tr-section--dunkel, .tr-cta, .tr-kontaktband) .wp-block-button.tr-button-sekundaer .wp-block-button__link:is(:hover, :focus-visible) {
	color: var(--wp--preset--color--text);
	background: transparent;
}

body.stil-c .tr-kontaktband .wp-block-button:not(.tr-button-sekundaer) .wp-block-button__link::before {
	background: var(--wp--preset--color--flaeche-alt);
}

body.stil-c .tr-kontaktband .wp-block-button:not(.tr-button-sekundaer) .wp-block-button__link:is(:hover, :focus-visible) {
	color: var(--wp--preset--color--text);
	background-color: var(--wp--preset--color--flaeche);
	border-color: var(--wp--preset--color--flaeche);
}

body.stil-c .tr-kopf__aktion .wp-block-button__link {
	padding-inline: 1.125rem;
}

/* ---------- Kopf: gleiche Höhe wie das Basis-Theme, Werkzeuge mittig ausgerichtet ---------- */
/* Vorher: oben 12 px mehr Innenabstand (Kopf 84 statt 66 px, „Anfrage“ 4 px höher als Suche/Sprache) */
body.stil-c .tr-kopf__werkzeuge.tr-kopf__werkzeuge {
	align-items: center;
}

body.stil-c .tr-sprachwahl__link,
body.stil-c .tr-sprachwahl__knopf,
body.stil-c .tr-schnellsuche__ausloeser,
body.stil-c .tr-nav .tr-nav__toggle {
	border-radius: 999px;
}

/* Navigation: Unterstreichung wächst aus der Mitte, auch bei Tastaturfokus */
body.stil-c .tr-nav__link {
	white-space: nowrap;
}

body.stil-c .tr-nav__link::after {
	bottom: 0.375rem;
	height: 3px;
	border-radius: 3px;
	transform-origin: center;
	transition: transform 280ms var(--c-kurve);
}

body.stil-c .tr-nav__link:focus-visible::after,
body.stil-c .tr-nav__item:hover > .tr-nav__link::after {
	transform: scaleX(1);
}

body.stil-c .tr-nav__link[aria-current]::after {
	background: var(--tr-rot);
}

body.stil-c .tr-nav li > ul {
	border-top: 3px solid var(--tr-rot);
	border-radius: 0 0 var(--c-radius-karte) var(--c-radius-karte);
	overflow: hidden;
}

/* ---------- Hero: Bild als Bühne, Verlauf Schwarz → transparent ---------- */
body.stil-c .tr-hero__bild::before {
	inset: 0;
	width: auto;
	height: auto;
	border: 0;
	background: linear-gradient(to top, rgb(35 31 32 / 0.7) 0%, rgb(35 31 32 / 0) 55%);
}

@media (min-width: 60rem) {
	body.stil-c .tr-hero__raster {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	}

	body.stil-c .tr-hero__bild {
		grid-column: 1 / -1;
		grid-row: 1;
		margin: 0 calc(-1 * var(--tr-ueberstand));
	}

	body.stil-c .tr-hero__bild::before {
		background: linear-gradient(to right, rgb(35 31 32 / 0.94) 0%, rgb(35 31 32 / 0.9) 42%, rgb(35 31 32 / 0.45) 68%, rgb(35 31 32 / 0) 92%);
	}

	body.stil-c .tr-hero__bild::after {
		inset-inline-start: auto;
		inset-inline-end: 1.25rem;
		bottom: 2.75rem;
		border-width: 0 2px 2px 0;
	}

	body.stil-c .tr-hero__inhalt {
		position: relative;
		z-index: 2;
		grid-column: 1;
		grid-row: 1;
		padding-block: var(--wp--preset--spacing--80);
		--tr-text: #FFFFFF;
		--tr-leise: #E4E0DC;
		--tr-weiss: var(--wp--preset--color--flaeche-dunkel);
		--tr-fokus: #FFFFFF;
		--tr-fokus-innen: var(--wp--preset--color--flaeche-dunkel);
		color: #FFFFFF;
	}

	body.stil-c .tr-hero__inhalt h1 {
		color: #FFFFFF;
	}

	body.stil-c .tr-hero__inhalt a:where(:not(.wp-element-button)) {
		color: var(--wp--preset--color--akzent-hell);
	}

	/* Auf der dunklen Bühne läuft bei beiden Schaltflächen Weiß ein (Schwarz wäre unsichtbar) */
	body.stil-c .tr-hero__inhalt .wp-block-button__link::before {
		background: var(--wp--preset--color--flaeche);
	}

	body.stil-c .tr-hero__inhalt .wp-block-button .wp-block-button__link:is(:hover, :focus-visible) {
		color: var(--wp--preset--color--text);
		border-color: var(--wp--preset--color--flaeche);
	}

	body.stil-c .tr-hero__fakten {
		grid-row: 2;
	}
}

/* ---------- Karten: 16 px Radius, farbige Oberkante beim Zeigen ---------- */
body.stil-c .tr-produktfinder__liste {
	gap: 1.25rem;
	border: 0;
}

body.stil-c .tr-produktfinder__eintrag {
	overflow: hidden;
	border: 1px solid var(--tr-linie);
	border-radius: var(--c-radius-karte);
}

body.stil-c .tr-produktfinder__eintrag::before {
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 1;
	height: 5px;
	transform-origin: center;
	transition-duration: 320ms;
}

body.stil-c .tr-produktfinder__bildrahmen {
	border-radius: 10px;
}

body.stil-c .tr-produktfinder__bildrahmen::after {
	inset-inline-end: 0.5rem;
	bottom: 0.5rem;
	border-radius: 999px;
}

body.stil-c .tr-produktfinder__titel {
	font-size: clamp(1rem, 0.85rem + 0.4vw, 1.25rem);
	overflow-wrap: normal;
	hyphens: auto;
}

body.stil-c .tr-produktfinder__feld,
body.stil-c .tr-produktfinder input {
	border-radius: 999px;
	padding-inline: 1.25rem;
}

body.stil-c .tr-assistent__karte {
	overflow: hidden;
	border: 1px solid var(--tr-linie);
	border-block-start: 5px solid var(--tr-linie);
	border-radius: var(--c-radius-karte);
}

body.stil-c .tr-assistent__karte:is(:hover, :focus-within) {
	background: var(--wp--preset--color--flaeche);
	border-block-start-color: var(--tr-rot);
}

body.stil-c .tr-kachel.tr-karte,
body.stil-c .tr-shop.tr-karte {
	overflow: hidden;
	border-radius: var(--c-radius-karte);
}

body.stil-c .tr-shop.tr-karte {
	border: 1px solid var(--tr-linie);
	border-top: 1px solid var(--tr-linie);
}

body.stil-c .tr-shop.tr-karte::after {
	inset: 0 0 auto;
	height: 5px;
	transform-origin: center;
}

body.stil-c .tr-karte:not(.tr-kachel, .tr-shop) img {
	border-radius: 12px;
}

body.stil-c .tr-fakten > li::before {
	width: 2.25rem;
	height: 4px;
	top: -3px;
	border-radius: 0 0 4px 4px;
}

/* Inhaltsseiten */
body.stil-c .tr-faq details {
	border-radius: var(--c-radius-karte);
}

body.stil-c :is(.tr-grenzen, .tr-section > .tr-pruefen, .tr-anfrage__zusammenfassung) {
	border-radius: var(--c-radius-karte);
}

body.stil-c .tr-cta {
	border-radius: 24px;
	overflow: hidden;
}

/* ---------- Einblenden beim Scrollen (nur mit JS + Bewegungswunsch) ---------- */
/* Die Scroll-Zeitleisten-Animation des Basis-Themes wird hier durch das Einblenden ersetzt */
body.stil-c :is(.tr-section__kopf, .tr-produktfinder__eintrag, .tr-assistent__karte, .tr-schritte > li, .tr-kachel, .tr-shop, .tr-kontaktband__daten) {
	animation: none;
}

@media (prefers-reduced-motion: no-preference) {
	html.tr-v-js body.stil-c .tr-v-ziel {
		opacity: 0;
		transform: translateY(1.5rem);
		/* Kurz halten: bei schnellem Scrollen darf Inhalt nicht blass wirken (max. 300 ms + 120 ms Staffel) */
		transition: opacity 300ms var(--c-kurve), transform 300ms var(--c-kurve);
		transition-delay: var(--tr-v-verzug, 0ms);
	}

	html.tr-v-js body.stil-c .tr-v-ziel.tr-v-sichtbar {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.stil-c .wp-block-button__link,
	body.stil-c .wp-element-button,
	body.stil-c .wp-block-button__link::before,
	body.stil-c .wp-element-button::before {
		transition: none !important;
	}
}

/* ---------- Inhaltsseiten: schmale Titelspalte, volle Breite ohne Titel ---------- */
/*
 * Wunsch 09.10.2026: Die linke Spalte trägt nur kurze Abschnittstitel und war mit 4/12 zu breit.
 * Jetzt mit der Fensterbreite mitwachsend: rund 12,4 rem bei 1024 px, 15 rem bei 1440 px, höchstens
 * 17 rem; der Inhalt bekommt den Rest. Abschnitte ohne Titel links (Einleitung,
 * Hinweis „Was wir nicht pauschal zusagen“, Partnerlogo, Quellen, FAQ-Gruppe) nutzen die volle
 * Breite statt in die rechte Spalte zu rutschen. Fließtext bleibt bei var(--tr-lese) (~68ch).
 * Ohne :has()-Unterstützung fällt die Seite auf eine Spalte zurück (Titel über dem Inhalt).
 */
@media (min-width: 64rem) {
	body.stil-c {
		--c-titelspalte: clamp(11rem, 6rem + 10vw, 17rem);
		--c-spaltenabstand: clamp(2rem, 4vw, 4.5rem);
		--c-titelgroesse: clamp(1.375rem, 1rem + 0.8vw, 1.875rem);
	}

	body.stil-c.stil-c .tr-inhalt--seite .tr-seiteninhalt > .tr-section,
	body.stil-c.stil-c .tr-inhalt--seite .tr-seiteninhalt > .tr-section > .tr-faq:has(> h2:first-child) {
		grid-template-columns: var(--c-titelspalte) minmax(0, 1fr);
		column-gap: var(--c-spaltenabstand);
	}

	/* Titel in der schmalen Spalte: kleiner, lange Komposita umbrechen statt überstehen */
	body.stil-c.stil-c .tr-inhalt--seite .tr-seiteninhalt > .tr-section > h2:first-child,
	body.stil-c.stil-c .tr-inhalt--seite .tr-section > .tr-faq > h2:first-child {
		font-size: var(--c-titelgroesse);
		line-height: 1.2;
		hyphens: auto;
		overflow-wrap: break-word;
	}

	/* Steht der Titel als Kopf über einem breiten Modul, bleibt er in normaler Größe */
	body.stil-c.stil-c .tr-inhalt--seite .tr-seiteninhalt > .tr-section > h2:first-child:has(+ :is(.tr-raster, .tr-schritte, .tr-kennzahlen, .tr-produktfinder, .tr-assistent, .wp-block-columns)),
	body.stil-c.stil-c .tr-inhalt--seite .tr-seiteninhalt > .tr-section:has(> :is(.tr-fluss--3d, .tr-teile)) > h2:first-child {
		font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem);
		hyphens: manual;
	}

	/*
	 * Kein Titel links → alle Teile über die volle Breite, nichts rutscht nach rechts. Gilt auch, wenn
	 * der Titel als Kopf über einem breiten Modul steht (z. B. „Ablauf“ mit Schritte-Liste): Dann ist
	 * die linke Spalte leer, und der Absatz unter dem Modul beginnt sonst eingerückt.
	 * Der Produktionsfluss in 3D braucht die ganze Breite (Wunsch 12.10.2026): Titel und Text stehen darüber.
	 */
	body.stil-c.stil-c .tr-inhalt--seite .tr-seiteninhalt > .tr-section:not(:has(> h2:first-child)) > *,
	body.stil-c.stil-c .tr-inhalt--seite .tr-seiteninhalt > .tr-section:has(> h2:first-child + :is(.tr-raster, .tr-schritte, .tr-kennzahlen, .tr-produktfinder, .tr-assistent, .wp-block-columns)) > *,
	body.stil-c.stil-c .tr-inhalt--seite .tr-seiteninhalt > .tr-section:has(> :is(.tr-fluss--3d, .tr-teile)) > * {
		grid-column: 1 / -1;
	}
}

/* Rückfall ohne :has(): eine Spalte, Titel normal über dem Inhalt (kein Leerraum links) */
@supports not selector(:has(> *)) {
	@media (min-width: 64rem) {
		body.stil-c .tr-inhalt--seite .tr-seiteninhalt > .tr-section,
		body.stil-c .tr-inhalt--seite .tr-seiteninhalt > .tr-section > .tr-faq {
			display: block;
		}

		body.stil-c .tr-inhalt--seite .tr-seiteninhalt > .tr-section > h2:first-child,
		body.stil-c .tr-inhalt--seite .tr-section > .tr-faq > h2:first-child {
			position: static;
			margin-block-end: var(--wp--preset--spacing--40);
		}
	}
}

/* ---------- Navigation: ab 1280 px einzeilig ---------- */
/* Jeder Menüpunkt bleibt auf einer Zeile; unter 60 em gilt das vorhandene Mobilmenü */
@media (min-width: 60.0625em) {
	body.stil-c .tr-nav__link,
	body.stil-c .tr-nav__sub-toggle {
		white-space: nowrap;
	}
}

@media (min-width: 80rem) {
	body.stil-c .tr-kopf__leiste > .tr-nav {
		min-width: 0;
	}

	body.stil-c .tr-nav > .tr-nav__liste {
		flex-wrap: nowrap;
	}
}

/* ---------- Startseite: Abschnittskopf ohne Silbentrennung mitten im Wort ---------- */
/* Bei 1024 px brach „Produktgruppen“ als „Produktgruppe / n“ um; die Titelspalte wächst bis zum längsten Wort */
@media (min-width: 64rem) {
	body.stil-c .tr-section__kopf {
		grid-template-columns: minmax(min-content, 5fr) minmax(0, 7fr);
	}

	body.stil-c .tr-section__kopf > h2 {
		overflow-wrap: normal;
		hyphens: manual;
	}
}