/* ============================================================
   3angular — Designsystem (WordPress-Block-Theme)
   Palette aus dem Logo: Weinrot #800020 (Akzent, Links, Buttons),
   Schwarz #111111 (Text), Weiß (Hintergrund), Grau #555555
   (Fließtext in Prosa), Hell #f4f4f4 (Flächen), Linie #e2e2e2
   (Rahmen). Überschriften in Space Grotesk, Fließtext in Inter.
   Schriften lädt WordPress aus der theme.json (fontFace).
   ============================================================ */

:root {
	--ta-rot: #800020;
	--ta-rot-dunkel: #5c0017;
	--ta-tinte: #111111;
	--ta-grau: #555555;
	--ta-weiss: #ffffff;
	--ta-hell: #f4f4f4;
	--ta-linie: #e2e2e2;
	--ta-display: 'Space Grotesk', system-ui, sans-serif;
	--ta-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---------- Grundlagen ---------- */

body.ta {
	-webkit-font-smoothing: antialiased;
	/* clip statt hidden: erzeugt keinen Scroll-Container, position:sticky
	   der Navigation bleibt intakt */
	overflow-x: clip;
}

.ta ::selection { background: var(--ta-rot); color: var(--ta-weiss); }

.ta a { text-decoration-thickness: 1px; text-underline-offset: 3px; }

.ta :focus-visible {
	outline: 3px solid var(--ta-rot);
	outline-offset: 2px;
}

/* Lange deutsche Komposita brechen an Silbengrenzen statt mitten im Wort
   (WordPress liefert lang="de-DE", der Browser trennt nach Wörterbuch);
   Umbrüche erst ab acht Buchstaben, mindestens vier je Seite */
.ta h1,
.ta h2,
.ta h3,
.ta p,
.ta li {
	-webkit-hyphens: auto;
	hyphens: auto;
	-webkit-hyphenate-limit-before: 4;
	-webkit-hyphenate-limit-after: 4;
	hyphenate-limit-chars: 8 4 4;
}

/* Navigation, Buttons und Marke bleiben ungetrennt */
.ta-nav a,
.ta .wp-block-button__link,
.ta-marke,
.ta-eyebrow {
	-webkit-hyphens: manual;
	hyphens: manual;
}

.ta-section { padding: 5.5rem 2rem; margin-top: 0 !important; }

/* Anker-Sprünge landen unterhalb der klebenden Navigationsleiste */
.ta-section[id] { scroll-margin-top: 4rem; }
.ta-section--hell { background: var(--ta-hell); }
.ta-section--dunkel { background: var(--ta-tinte); color: #d9d4d4; }
.ta-section--dunkel a:not(.wp-block-button__link) { color: #d98f8f; }

/* Kaum getönte Abschluss-Sektion (Kontakt-CTA): warmes Grau mit einem Hauch Weinrot,
   dunkler Text, Buttons wie im Rest der Seite */
.ta-section--rot { background: #f6eeee; }
.ta-section--rot .ta-h2 { color: var(--ta-tinte); }
.ta-section--rot p:not(.ta-eyebrow) { color: var(--ta-grau); }

@media (max-width: 767px) {
	.ta-section { padding: 3.5rem 1.25rem; }
}

/* Eyebrow: kurze Auszeichnungszeile in Weinrot über Sektionsüberschriften */
.ta-eyebrow {
	font-family: var(--ta-display);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ta-rot);
	margin-bottom: 1rem;
}

.ta-section--dunkel .ta-eyebrow { color: #d98f8f; }

/* H2 mit kurzem Strich in Weinrot darunter */
.ta-h2 {
	font-size: clamp(1.75rem, 3.4vw, 2.5rem);
	margin-top: 0;
	margin-bottom: 1rem;
}

.ta-h2::after {
	content: "";
	display: block;
	width: 3.25rem;
	height: 4px;
	background: var(--ta-rot);
	margin-top: 0.9rem;
}

.ta-h2.has-text-align-center::after { margin-left: auto; margin-right: auto; }

.ta-section--dunkel .ta-h2 { color: #fff; }

.ta-lead {
	color: var(--ta-grau);
	font-size: 1.125rem;
	max-width: 44rem;
	/* Linksbündig an der Inhaltsspalte ausrichten: das Constrained-Layout
	   zentriert schmale Kinder mit margin:auto !important — dieses Margin
	   setzt die Box stattdessen an die linke Kante der Inhaltsspalte
	   (auf schmalen Viewports ergibt der calc-Ausdruck 0) */
	margin-left: calc((100% - min(100%, var(--wp--style--global--content-size, 1200px))) / 2) !important;
	margin-right: auto !important;
}

.ta-lead.has-text-align-center { margin-left: auto !important; margin-right: auto !important; }

.ta-section--dunkel .ta-lead { color: #d9d4d4; }

/* Abstand zwischen dem Kartenraster und dem folgenden Block (Buttons) */
.ta-karten { margin-bottom: 3rem !important; }

/* Folgt direkt eine weitere Kartenreihe, gilt nur der Blockabstand, damit
   die Reihen so eng stehen wie die Karten innerhalb einer Reihe */
.ta-karten:has(+ .ta-karten) { margin-bottom: 0 !important; }

/* ---------- Navigation ---------- */

/* Sticky liegt auf dem Template-Part-Wrapper: position:sticky haftet nur
   innerhalb des Elternelements, und der Wrapper ist genau so hoch wie die
   Nav selbst — auf .ta-nav wäre der Effekt wirkungslos */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

.ta-nav {
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--ta-linie);
}

.ta-nav-innen {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0.75rem 2rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.ta-marke {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	font-family: var(--ta-display);
	font-weight: 600;
	font-size: 1.3rem;
	color: var(--ta-tinte);
	text-decoration: none;
}

.ta-marke img { height: 2rem; width: auto; }

.ta-nav-liste {
	display: flex;
	align-items: center;
	gap: 0.2rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ta-nav-liste a {
	color: var(--ta-tinte);
	font-size: 0.95rem;
	font-weight: 500;
	padding: 0.5rem 0.9rem;
	text-decoration: none;
	white-space: nowrap;
	display: inline-block;
}

.ta-nav-liste a:hover { color: var(--ta-rot); }

/* Aktiver Menüpunkt: functions.php setzt die Body-Klasse page-<slug> */
body.page-leistungen .ta-nav-liste a[data-seite="leistungen"],
body.page-produkte   .ta-nav-liste a[data-seite="produkte"],
body.page-projekte   .ta-nav-liste a[data-seite="projekte"],
body.page-ueber-uns  .ta-nav-liste a[data-seite="ueber-uns"] {
	color: var(--ta-rot);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

/* Luft zwischen letztem Menüpunkt und dem Kontakt-Button */
@media (min-width: 992px) {
	.ta-nav-liste li.wp-block-button { margin-left: 1.25rem; }
}

.ta-nav-toggle {
	display: none;
	background: none;
	border: 1px solid var(--ta-linie);
	border-radius: 0.375rem;
	padding: 0.45rem 0.6rem;
	cursor: pointer;
}

.ta-nav-toggle span {
	display: block;
	width: 1.4rem;
	height: 2px;
	background: var(--ta-tinte);
	margin: 0.3rem 0;
}

@media (max-width: 991px) {
	.ta-nav-toggle { display: block; }

	.ta-nav-liste {
		display: none;
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		padding-bottom: 0.75rem;
	}

	.ta-nav-liste.offen { display: flex; }

	.ta-nav-liste a { padding: 0.6rem 0.25rem; }

	.ta-nav-liste li.wp-block-button { margin-left: 0; }
}

/* ---------- Buttons (Core-Button-Block) ---------- */

.ta .wp-block-button__link {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--ta-body);
	font-weight: 600;
	font-size: 1rem;
	padding: 0.75rem 1.4rem;
	border-radius: 8px;
	border: 1.5px solid transparent;
	background: var(--ta-rot);
	color: #fff;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ta .wp-block-button__link:hover { background: var(--ta-rot-dunkel); color: #fff; }

.ta .is-style-outline .wp-block-button__link {
	border-color: var(--ta-tinte);
	color: var(--ta-tinte);
	background: transparent;
}

.ta .is-style-outline .wp-block-button__link:hover {
	border-color: var(--ta-rot);
	color: var(--ta-rot);
	background: transparent;
}

.ta-section--dunkel .is-style-outline .wp-block-button__link { border-color: #fff; color: #fff; }

.ta-section--dunkel .is-style-outline .wp-block-button__link:hover { border-color: #d98f8f; color: #d98f8f; }

.ta-nav .wp-block-button__link { font-size: 0.9rem; padding: 0.5rem 1rem; }

@media (max-width: 575px) {
	.ta .wp-block-buttons { width: 100%; }

	.ta .wp-block-button { width: 100%; }

	.ta .wp-block-button__link {
		width: 100%;
		justify-content: center;
		text-align: center;
	}
}

/* ---------- Hero ---------- */

.ta-hero { padding: 5rem 2rem 5.5rem; }

@media (max-width: 767px) {
	.ta-hero { padding: 2rem 1.25rem 3.5rem; }
}

.ta-hero h1 {
	font-size: clamp(2.2rem, 4vw, 3.2rem);
	margin: 0 0 1.25rem;
	-webkit-hyphens: manual;
	hyphens: manual;
}

/* Hero-Spalten: Text links, Bild rechts; unter 782px stapelt Core die Spalten */
.ta-hero-spalten { gap: 3rem; }

.ta-hero-spalten .ta-lead {
	margin-left: 0 !important;
	max-width: none;
}

.ta-hero-bild { margin: 0; }

.ta-hero-bild img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 16px;
}

@media (max-width: 781px) {
	.ta-hero-spalten { gap: 1.5rem; }

	.ta-hero-bild img { aspect-ratio: 16 / 9; }
}

/* ---------- Karten ---------- */

/* Karten einer Reihe sind gleich hoch: die Spalten strecken sich, die
   Karte selbst ist die Spalte */
.ta-karten { align-items: stretch !important; }

.ta-karte {
	border-radius: 12px;
	padding: 1.5rem 1.6rem;
	background: var(--ta-hell);
	display: flex;
	flex-direction: column;
}

.ta-karte .ta-eyebrow { font-size: 0.7rem; margin-bottom: 0.6rem; }

/* Kartentitel trennen nur an weichen Trennstellen (U+00AD im Inhalt) */
.ta-karte h3 {
	-webkit-hyphens: manual;
	hyphens: manual;
}

.ta-karte h3 { font-size: 1.2rem; margin: 0 0 0.6rem; }

.ta-karte p { color: var(--ta-grau); font-size: 0.95rem; margin: 0; }

.ta-karte p + p,
.ta-karte p + ul { margin-top: 0.75rem; }

.ta-section--hell .ta-karte { background: var(--ta-weiss); }

.ta-section--dunkel .ta-karte { background: #1f1c1c; }
.ta-section--dunkel .ta-karte h3 { color: #fff; }
.ta-section--dunkel .ta-karte p { color: #b9b1b1; }

/* ---------- Zweispaltige Sektionen (Text links, Panel rechts) ---------- */

/* Spalten oben ausrichten: das Panel umschließt nur seine Liste und wird
   nicht auf Textspaltenhöhe gestreckt */
.ta-spalten { gap: 3rem; align-items: flex-start !important; }

.ta-spalten .ta-h2 { margin-bottom: 1.25rem; }

/* Textspalte mit Zwischenüberschriften (Projekte: Aufgabe, Im Betrieb) */
.ta-spalten h3 { font-size: 1.1rem; margin: 0 0 0.5rem; }

.ta-spalten p + h3 { margin-top: 1.6rem; }

.ta-spalten .wp-block-column:not(.ta-panel) p:not(.ta-eyebrow) { color: var(--ta-grau); }

/* Beginnt die Textspalte mit einem Eyebrow, rückt das Panel auf die Höhe
   der Überschrift (Eyebrow-Zeile plus deren Abstand); gestapelt entfällt das */
.ta-spalten:has(.wp-block-column:first-child > .ta-eyebrow:first-child) .ta-panel {
	margin-top: calc(0.78rem * 1.6 + 1rem);
}

@media (max-width: 781px) {
	.ta-spalten:has(.wp-block-column:first-child > .ta-eyebrow:first-child) .ta-panel { margin-top: 0; }
}

/* Panel: Liste in einem Kasten; auf hellem Sektionsgrund weiß, sonst hell */
/* Flächen statt Rahmen: auf weißem Grund hellgrau, auf grauem Grund weiß */
.ta-panel {
	background: var(--ta-hell);
	border-radius: 12px;
	padding: 1.6rem 1.8rem;
}

.ta-section--hell .ta-panel { background: var(--ta-weiss); }

.ta-panel h3 { margin: 0 0 0.6rem; font-size: 1.05rem; }

.ta-panel h3 + ul { margin-top: 0; }

.ta-panel ul:last-child { margin-bottom: 0; }

/* Nachfolgende Unterabschnitte im Panel (z. B. „Wo Standardlösungen nicht reichen") */
.ta-panel ul + h3 { margin-top: 1.6rem; }

@media (max-width: 781px) {
	.ta-spalten { gap: 1.25rem; }
}

/* Freistehende Absätze in Sektionen bleiben lesbar schmal (linksbündig
   an der Inhaltsspalte, siehe .ta-lead) */
.ta-section > p:not(.ta-eyebrow),
.ta-section > .wp-block-list {
	max-width: 46rem;
	margin-left: calc((100% - min(100%, var(--wp--style--global--content-size, 1200px))) / 2) !important;
	margin-right: auto !important;
}

/* Karten mit Unterüberschrift (Referenzen: Aufgabe / Technik / Ergebnis) */
.ta-karte h3:first-child { margin-top: 0; }

.ta-karte ul { padding-left: 1.1rem; margin: 0; }

.ta-karte li { font-size: 0.95rem; margin-bottom: 0.35rem; }

/* ---------- Listen innerhalb von Sektionen ---------- */

.ta-section ul,
.ta-section ol {
	color: var(--ta-grau);
	padding-left: 1.2rem;
}

.ta-section ul li,
.ta-section ol li { margin-bottom: 0.4rem; }

.ta-section--dunkel ul,
.ta-section--dunkel ol { color: #d9d4d4; }

/* ---------- Einblende-Animation beim Scrollen ---------- */

@media (prefers-reduced-motion: no-preference) {
	/* Nur im Frontend (body.ta): im Block-Editor läuft das Reveal-Skript
	   nicht — ohne Scoping blieben die Elemente dort unsichtbar */
	.ta .ta-reveal {
		opacity: 0;
		transform: translateY(16px);
		transition: opacity 0.5s ease, transform 0.5s ease;
	}

	.ta .ta-reveal.ta-sichtbar { opacity: 1; transform: none; }
}

/* ---------- Footer ---------- */

/* Core gibt dem Template-Part einen Blockabstand nach oben; die letzte
   Sektion schließt direkt an den Footer an */
footer.wp-block-template-part { margin-top: 0 !important; }

.ta-footer {
	background: var(--ta-tinte);
	color: #b9b1b1;
	padding: 2.5rem 2rem;
	font-size: 0.9rem;
}

.ta-footer-innen {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.ta-footer a { color: #fff; }
.ta-footer a:hover { color: #d98f8f; }

.ta-footer-marke {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--ta-display);
	font-weight: 600;
	color: #fff;
	font-size: 1.1rem;
}

/* Das transparente SVG lässt sich für den dunklen Grund weiß invertieren */
.ta-footer-marke img {
	height: 1.7rem;
	width: auto;
	filter: brightness(0) invert(1);
}

/* ---------- Unterseiten (Über uns / Impressum / Datenschutz) ---------- */

.ta-prosa { padding: 4rem 2rem; }

/* Linksbündig an der Inhaltsspalte, siehe .ta-lead */
.ta-prosa-innen {
	max-width: 46rem;
	margin-left: calc((100% - min(100%, var(--wp--style--global--content-size, 1200px))) / 2) !important;
	margin-right: auto !important;
}

@media (max-width: 767px) {
	.ta-prosa { padding: 3rem 1.25rem; }
}

.ta-prosa h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin: 0 0 2rem; }

.ta-prosa h1::after {
	content: "";
	display: block;
	width: 3.25rem;
	height: 4px;
	background: var(--ta-rot);
	margin-top: 1rem;
}

.ta-prosa h2 { font-size: 1.35rem; margin: 2.2rem 0 0.7rem; }

.ta-prosa h3 { font-size: 1.1rem; margin: 1.6rem 0 0.5rem; }

.ta-prosa p, .ta-prosa li { color: var(--ta-grau); }

.ta-prosa li { margin-bottom: 0.5rem; }

.ta-prosa strong { color: var(--ta-tinte); }

/* Schlichte Dokumenttabellen (z. B. Anlagen im Impressum) */
.ta-prosa .wp-block-table { margin: 1rem 0; }

.ta-prosa .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}

.ta-prosa .wp-block-table thead { border-bottom: none; }

.ta-prosa .wp-block-table th,
.ta-prosa .wp-block-table td {
	border: 1px solid var(--ta-linie);
	padding: 0.6rem 0.8rem;
	text-align: left;
	vertical-align: top;
	overflow-wrap: break-word;
}

.ta-prosa .wp-block-table th {
	background: var(--ta-hell);
	color: var(--ta-tinte);
}

.ta-prosa .wp-block-table td { color: var(--ta-grau); }