/* ==========================================================================
   Trustclips – Stylesheet
   Farben aus dem Logo (Cyan → Blau → Violett), Akzent Apricot.
   Schriften: Outfit (Grundschrift), Fraunces kursiv (Akzent). Beide selbst gehostet, SIL OFL.
   ========================================================================== */

/* --- Schriften ----------------------------------------------------------- */

@font-face {
	font-family: "Outfit";
	src: url("fonts/outfit-variabel.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Fraunces";
	src: url("fonts/fraunces-kursiv-variabel.woff2") format("woff2");
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}

/* --- Variablen ----------------------------------------------------------- */

:root {
	--tc-tinte: #0b0e26;
	--tc-tinte-2: #151a42;
	--tc-nacht: #070a1c;
	--tc-text: #363a54;
	--tc-text-leise: #62667f;
	--tc-papier: #f6f4ef;
	--tc-papier-2: #eeebe3;
	--tc-weiss: #ffffff;
	--tc-blau: #2f43ff;
	--tc-blau-dunkel: #1f30d6;
	--tc-blau-hell: #eceeff;
	--tc-cyan: #5fd6f7;
	--tc-violett: #8b5cf6;
	--tc-akzent: #ff8a5c;
	--tc-akzent-hell: #ffdccb;
	--tc-verlauf: linear-gradient(120deg, #5fd6f7 0%, #2f43ff 48%, #8b5cf6 100%);
	--tc-linie: rgba(11, 14, 38, .1);
	--tc-linie-hell: rgba(255, 255, 255, .12);

	--tc-schrift: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--tc-akzentschrift: "Fraunces", Georgia, "Times New Roman", serif;

	--tc-radius: 22px;
	--tc-radius-gross: 32px;
	--tc-schatten: 0 1px 2px rgba(11, 14, 38, .04), 0 14px 36px -16px rgba(11, 14, 38, .22);
	--tc-schatten-gross: 0 2px 6px rgba(11, 14, 38, .05), 0 40px 80px -32px rgba(11, 14, 38, .35);
	--tc-rand: clamp(20px, 4vw, 40px);
	--tc-abstand: clamp(76px, 10vw, 136px);
	--tc-kopfhoehe: 76px;
	--tc-weich: cubic-bezier(.22, .9, .3, 1);
	--tc-sanft: cubic-bezier(.4, 0, .2, 1);
}

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

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--tc-kopfhoehe) + 20px);
	-webkit-text-size-adjust: 100%;
}

body.tc-seite {
	margin: 0;
	background: var(--tc-papier);
	color: var(--tc-text);
	font-family: var(--tc-schrift);
	font-size: 1.0625rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

.tc-seite *,
.tc-seite *::before,
.tc-seite *::after { box-sizing: border-box; }

.tc-seite img,
.tc-seite video,
.tc-seite svg { max-width: 100%; }

.tc-seite img { height: auto; display: block; }

:where(.tc-seite) a { color: inherit; }

:where(.tc-seite) p { margin: 0 0 1em; }
:where(.tc-seite) p:last-child { margin-bottom: 0; }

:where(.tc-seite) :is(ul, ol) { margin: 0; padding: 0; list-style: none; }

:where(.tc-seite) button { font: inherit; color: inherit; }

.tc-seite :focus-visible {
	outline: 3px solid var(--tc-blau);
	outline-offset: 3px;
	border-radius: 6px;
}

.tc-flaeche--dunkel :focus-visible { outline-color: var(--tc-cyan); }

.tc-sprung {
	position: absolute;
	left: 16px;
	top: -100px;
	z-index: 1000;
	background: var(--tc-tinte);
	color: #fff !important;
	padding: 12px 18px;
	border-radius: 12px;
	text-decoration: none;
}
.tc-sprung:focus { top: 16px; }

.tc-unsichtbar {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.tc-rahmen {
	width: min(1200px, 100% - 2 * var(--tc-rand));
	margin-inline: auto;
}
.tc-rahmen--mittel { width: min(1000px, 100% - 2 * var(--tc-rand)); }
.tc-rahmen--schmal { width: min(760px, 100% - 2 * var(--tc-rand)); }

.tc-abschnitt { padding-block: var(--tc-abstand); position: relative; }

.tc-flaeche--weiss { background: var(--tc-weiss); }

.tc-flaeche--dunkel {
	background:
		radial-gradient(60% 50% at 0% 0%, rgba(47, 67, 255, .35), transparent 70%),
		radial-gradient(50% 60% at 100% 100%, rgba(139, 92, 246, .28), transparent 70%),
		var(--tc-tinte);
	color: rgba(255, 255, 255, .74);
}

/* --- Typografie ---------------------------------------------------------- */

.tc-h1,
.tc-h2,
.tc-h3 {
	color: var(--tc-tinte);
	font-family: var(--tc-schrift);
	margin: 0;
	hyphens: auto;
	-webkit-hyphens: auto;
	overflow-wrap: break-word;
}

.tc-h1 {
	font-size: clamp(2.35rem, 4.6vw + 1rem, 4.5rem);
	font-weight: 700;
	line-height: 1.03;
	letter-spacing: -.035em;
}

.tc-h2 {
	font-size: clamp(2rem, 2.6vw + 1rem, 3.2rem);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -.03em;
}

.tc-h3 {
	font-size: 1.22rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.01em;
}

.tc-flaeche--dunkel .tc-h1,
.tc-flaeche--dunkel .tc-h2,
.tc-flaeche--dunkel .tc-h3 { color: #fff; }

/* Akzentwort: *Wort* im Text */
.tc-akzent {
	font-family: var(--tc-akzentschrift);
	font-style: italic;
	font-weight: 500;
	letter-spacing: -.01em;
	color: var(--tc-blau);
	padding-inline: .04em;
	background: linear-gradient(transparent 64%, var(--tc-akzent-hell) 64%, var(--tc-akzent-hell) 90%, transparent 90%);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.tc-flaeche--dunkel .tc-akzent,
.tc-kontakt__karte .tc-akzent,
.tc-uebergang .tc-akzent,
.tc-seitenkopf .tc-akzent {
	color: var(--tc-cyan);
	background: none;
}

.tc-kicker {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 18px;
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--tc-blau);
}
.tc-kicker::before {
	content: "";
	width: 22px;
	height: 8px;
	border-radius: 8px;
	background: var(--tc-verlauf);
}
.tc-kicker a { text-decoration: none; }
.tc-flaeche--dunkel .tc-kicker,
.tc-kontakt__karte .tc-kicker,
.tc-seitenkopf .tc-kicker { color: var(--tc-cyan); }

.tc-kopf { max-width: 720px; margin-bottom: clamp(40px, 5vw, 64px); }
.tc-kopf__text { margin-top: 20px; font-size: 1.14rem; }
.tc-kopf--mittig { margin-inline: auto; text-align: center; }
.tc-kopf--mittig .tc-kicker { justify-content: center; }

/* --- Knöpfe -------------------------------------------------------------- */

.tc-knopfreihe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.tc-knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	max-width: 100%;
	padding: 15px 26px;
	border: 1.5px solid transparent;
	border-radius: 999px;
	background: var(--tc-blau);
	color: #fff !important;
	font-family: var(--tc-schrift);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: transform .6s var(--tc-weich), box-shadow .6s var(--tc-weich), background-color .6s var(--tc-sanft), color .6s var(--tc-sanft), border-color .6s var(--tc-sanft);
}
.tc-knopf .tc-symbol { width: 18px; height: 18px; flex: none; transition: transform .6s var(--tc-weich); }
.tc-knopf:hover {
	background: var(--tc-blau-dunkel);
	transform: translateY(-2px);
	box-shadow: 0 14px 28px -12px rgba(47, 67, 255, .6);
}
.tc-knopf:hover .tc-symbol--pfeil { transform: translateX(3px); }
.tc-knopf:active { transform: translateY(0); }

.tc-knopf--rand {
	background: transparent;
	border-color: rgba(11, 14, 38, .22);
	color: var(--tc-tinte) !important;
}
.tc-knopf--rand:hover {
	background: var(--tc-tinte);
	border-color: var(--tc-tinte);
	color: #fff !important;
	box-shadow: 0 14px 28px -14px rgba(11, 14, 38, .5);
}

.tc-knopf--hell {
	background: #fff;
	color: var(--tc-tinte) !important;
}
.tc-knopf--hell:hover {
	background: var(--tc-akzent-hell);
	box-shadow: 0 14px 28px -12px rgba(0, 0, 0, .45);
}

.tc-knopf--klein { padding: 11px 20px; font-size: .95rem; }

.tc-textlink {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--tc-blau);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1.5px solid currentColor;
	padding-bottom: 2px;
	transition: color .5s var(--tc-sanft);
}
.tc-textlink .tc-symbol { width: 18px; height: 18px; }
.tc-textlink:hover { color: var(--tc-tinte); }

/* --- Symbole ------------------------------------------------------------- */

.tc-symbol { width: 24px; height: 24px; display: inline-block; vertical-align: middle; flex: none; }

/* --- Logo ---------------------------------------------------------------- */

.tc-logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--tc-tinte);
	text-decoration: none;
	line-height: 1;
}
.tc-logo__zeichen { width: 40px; height: auto; flex: none; transition: transform .75s var(--tc-weich); }
.tc-logo:hover .tc-logo__zeichen { transform: rotate(-4deg) scale(1.04); }
.tc-logo__schrift {
	font-size: 1.62rem;
	font-weight: 300;
	letter-spacing: -.035em;
	padding-bottom: 3px;
}
.tc-logo__schrift b { font-weight: 800; letter-spacing: -.04em; }
.tc-logo__bild { max-height: 40px; width: auto; }
.tc-logo--dunkel { color: #fff; }

/* --- Kopfleiste ---------------------------------------------------------- */

.tc-kopfleiste {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
	border-bottom: 1px solid transparent;
	transition: border-color .6s var(--tc-sanft), box-shadow .6s var(--tc-sanft);
}
/* Unschärfe auf eigener Ebene – sonst wäre das mobile Menü (position: fixed) an die Kopfleiste gebunden */
.tc-kopfleiste::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(246, 244, 239, .86);
	-webkit-backdrop-filter: saturate(1.4) blur(14px);
	backdrop-filter: saturate(1.4) blur(14px);
}
.tc-menue-offen .tc-kopfleiste::before { background: var(--tc-papier); }
.tc-kopfleiste.ist-gescrollt {
	border-bottom-color: var(--tc-linie);
	box-shadow: 0 10px 30px -24px rgba(11, 14, 38, .5);
}
.tc-kopfleiste__innen {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: var(--tc-kopfhoehe);
}

.tc-navigation { display: flex; align-items: center; gap: 28px; }
.tc-navigation__liste { display: flex; align-items: center; gap: 6px; }
.tc-navigation__liste a {
	position: relative;
	display: block;
	padding: 8px 12px;
	font-size: .97rem;
	font-weight: 500;
	color: var(--tc-text);
	text-decoration: none;
	border-radius: 999px;
	transition: color .5s var(--tc-sanft), background-color .5s var(--tc-sanft);
}
.tc-navigation__liste a:hover { color: var(--tc-tinte); background: rgba(11, 14, 38, .05); }

.tc-menueknopf {
	display: none;
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 50%;
	background: var(--tc-tinte);
	cursor: pointer;
	place-items: center;
	transition: background-color .5s var(--tc-sanft);
}
.tc-menueknopf__striche { display: grid; gap: 6px; width: 20px; }
.tc-menueknopf__striche span {
	display: block;
	height: 2px;
	border-radius: 2px;
	background: #fff;
	transition: transform .6s var(--tc-weich);
}
.tc-menueknopf[aria-expanded="true"] .tc-menueknopf__striche span:first-child { transform: translateY(4px) rotate(45deg); }
.tc-menueknopf[aria-expanded="true"] .tc-menueknopf__striche span:last-child { transform: translateY(-4px) rotate(-45deg); }

@media (max-width: 1100px) {
	.tc-menueknopf { display: grid; }

	.tc-navigation {
		position: fixed;
		inset: calc(var(--tc-kopfhoehe) + var(--wp-admin--admin-bar--height, 0px)) 0 0 0;
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
		padding: 24px var(--tc-rand) 40px;
		background: var(--tc-papier);
		overflow-y: auto;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity .6s var(--tc-sanft), transform .6s var(--tc-weich), visibility 0s linear .6s;
	}
	.tc-menue-offen .tc-navigation {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: opacity .6s var(--tc-sanft), transform .6s var(--tc-weich), visibility 0s;
	}
	.tc-menue-offen { overflow: hidden; }

	.tc-navigation__liste { flex-direction: column; align-items: stretch; gap: 0; }
	.tc-navigation__liste a {
		padding: 16px 4px;
		font-size: 1.45rem;
		font-weight: 600;
		color: var(--tc-tinte);
		border-radius: 0;
		border-bottom: 1px solid var(--tc-linie);
	}
	.tc-navigation__liste a:hover { background: transparent; color: var(--tc-blau); }
	.tc-navigation .tc-knopf { align-self: flex-start; padding: 15px 26px; font-size: 1rem; }
}

/* --- Platzhalter --------------------------------------------------------- */

.tc-platzhalter {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 20px;
	border: 2px dashed rgba(47, 67, 255, .35);
	border-radius: var(--tc-radius);
	background:
		repeating-linear-gradient(135deg, rgba(47, 67, 255, .045) 0 12px, transparent 12px 24px),
		rgba(255, 255, 255, .6);
	color: var(--tc-blau);
	text-align: center;
}
.tc-platzhalter__symbol .tc-symbol { width: 34px; height: 34px; }
.tc-platzhalter__text { font-weight: 600; font-size: 1rem; color: var(--tc-tinte); }
.tc-platzhalter__info { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.tc-platzhalter--text { min-height: 220px; }
.tc-flaeche--dunkel .tc-platzhalter { background: rgba(255, 255, 255, .04); border-color: rgba(95, 214, 247, .4); color: var(--tc-cyan); }
.tc-flaeche--dunkel .tc-platzhalter__text { color: #fff; }

/* Seitenverhältnisse */
.tc-format--hochkant { aspect-ratio: 4 / 5; }
.tc-format--quer { aspect-ratio: 16 / 9; }
.tc-format--quadrat { aspect-ratio: 1 / 1; }
.tc-platzhalter.tc-format--logo { aspect-ratio: auto; height: 64px; width: 150px; padding: 8px; border-radius: 12px; }
.tc-platzhalter.tc-format--logo .tc-platzhalter__symbol,
.tc-platzhalter.tc-format--logo .tc-platzhalter__info { display: none; }
.tc-platzhalter.tc-format--logo .tc-platzhalter__text { font-size: .8rem; }

img.tc-bild { width: 100%; object-fit: cover; border-radius: var(--tc-radius); }

/* --- Video-Clips --------------------------------------------------------- */

.tc-clip { margin: 0; }
.tc-clip__rahmen {
	position: relative;
	overflow: hidden;
	border-radius: var(--tc-radius);
	background: var(--tc-tinte);
	isolation: isolate;
}
.tc-clip.tc-format--hochkant,
.tc-clip.tc-format--quer,
.tc-clip.tc-format--quadrat { aspect-ratio: auto; }
.tc-format--hochkant .tc-clip__rahmen { aspect-ratio: 4 / 5; }
.tc-format--quer .tc-clip__rahmen { aspect-ratio: 16 / 9; }
.tc-format--quadrat .tc-clip__rahmen { aspect-ratio: 1 / 1; }

.tc-clip__poster,
.tc-clip__verlauf,
.tc-clip__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s var(--tc-weich);
}
.tc-clip__verlauf { background: var(--tc-verlauf); opacity: .9; }
.tc-clip__video { object-fit: contain; background: #000; z-index: 2; }

.tc-clip__rahmen::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 55%, rgba(7, 10, 28, .55));
	pointer-events: none;
	z-index: 1;
}
.tc-clip__rahmen.ist-aktiv::after { display: none; }

.tc-clip__start {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: grid;
	place-items: center;
	border: 0;
	background: transparent;
	cursor: pointer;
}
.tc-clip__play {
	display: grid;
	place-items: center;
	width: 78px;
	height: 78px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .94);
	color: var(--tc-blau);
	box-shadow: 0 16px 40px -12px rgba(7, 10, 28, .6);
	transition: transform .7s var(--tc-weich), background-color .6s var(--tc-sanft), color .6s var(--tc-sanft);
}
.tc-clip__play .tc-symbol { width: 30px; height: 30px; margin-left: 4px; }
.tc-clip__start:hover .tc-clip__play { transform: scale(1.08); background: var(--tc-blau); color: #fff; }
.tc-clip__rahmen:hover .tc-clip__poster { transform: scale(1.03); }

.tc-clip__titel {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
	font-size: .92rem;
	color: var(--tc-text-leise);
}
.tc-clip__titel::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--tc-akzent);
	box-shadow: 0 0 0 4px var(--tc-akzent-hell);
	flex: none;
}

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

.tc-hero {
	padding-block: clamp(40px, 6vw, 80px) clamp(72px, 9vw, 120px);
	background:
		radial-gradient(42% 46% at 92% 8%, rgba(95, 214, 247, .2), transparent 70%),
		radial-gradient(34% 40% at 72% 92%, rgba(139, 92, 246, .14), transparent 70%),
		var(--tc-papier);
	overflow: hidden;
}
.tc-hero__raster {
	display: grid;
	grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
	gap: clamp(40px, 6vw, 88px);
	align-items: center;
}
.tc-marke-chip {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 26px;
	padding: 8px 16px 8px 10px;
	border: 1px solid var(--tc-linie);
	border-radius: 999px;
	background: rgba(255, 255, 255, .8);
	font-size: .9rem;
	font-weight: 500;
	color: var(--tc-tinte);
}
.tc-marke-chip__punkt {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--tc-verlauf);
	box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .55);
	flex: none;
}
.tc-hero__einleitung { margin-top: 26px; max-width: 36em; font-size: clamp(1.08rem, .4vw + 1rem, 1.24rem); }
.tc-hero__hinweis {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 26px
}
.tc-hero__hinweis .tc-symbol { width: 20px; height: 20px; color: var(--tc-blau); margin-top: 2px; }

.tc-hero__medien { position: relative; width: min(100%, 460px); margin-left: auto; }
.tc-hero__video,
.tc-hero__ohne-video { position: relative; z-index: 2; }
.tc-hero__video .tc-clip__rahmen { border-radius: 30px; box-shadow: var(--tc-schatten-gross); }
.tc-hero__video .tc-platzhalter { border-radius: 30px; background-color: rgba(255, 255, 255, .85); }

.tc-hero__ohne-video {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 5;
	border-radius: 30px;
	background:
		radial-gradient(60% 50% at 10% 0%, rgba(47, 67, 255, .55), transparent 70%),
		radial-gradient(60% 50% at 100% 100%, rgba(139, 92, 246, .45), transparent 70%),
		var(--tc-tinte);
	box-shadow: var(--tc-schatten-gross);
}
.tc-hero__zeichen { width: 58%; height: auto; filter: drop-shadow(0 20px 40px rgba(47, 67, 255, .45)); }

/* Formen aus dem Logo hinter dem Video */
.tc-hero__formen { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.tc-form { position: absolute; display: block; }
.tc-form--balken {
	top: -22px;
	left: -16%;
	width: 62%;
	height: 64px;
	border-radius: 64px;
	background: linear-gradient(110deg, #5fd6f7, #3a4bff 60%, #8b5cf6);
	opacity: .95;
}
.tc-form--stiel {
	bottom: -36px;
	right: -26px;
	width: 70px;
	height: 190px;
	border-radius: 20px 20px 70px 70px;
	background: linear-gradient(180deg, #4fc3f7, #2f43ff 55%, #a26bf5);
	opacity: .9;
}
.tc-form--dreieck {
	top: 22%;
	right: -46px;
	width: 92px;
	height: 106px;
	background: linear-gradient(135deg, #2f6bff, #8b5cf6);
	clip-path: polygon(8% 0, 100% 50%, 8% 100%);
	border-radius: 14px;
	opacity: .85;
}

.tc-hero__sticker {
	position: absolute;
	z-index: 3;
	left: -14%;
	bottom: 12%;
	display: grid;
	gap: 0;
	margin: 0;
	padding: 14px 22px 16px;
	border-radius: 18px;
	background: #fff;
	box-shadow: var(--tc-schatten);
	transform: rotate(-4deg);
	color: var(--tc-tinte);
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1.2;
	transition: transform .85s var(--tc-weich);
}
.tc-hero__sticker em {
	font-family: var(--tc-akzentschrift);
	font-weight: 500;
	color: var(--tc-akzent);
	font-size: 1.22rem;
}
.tc-hero__medien:hover .tc-hero__sticker { transform: rotate(-2deg) translateY(-4px); }

/* --- Vertrauen ----------------------------------------------------------- */

.tc-vertrauen__raster {
	display: grid;
	grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
	gap: clamp(40px, 6vw, 88px);
	align-items: start;
}
.tc-vertrauen__ehrlich { position: sticky; top: calc(var(--tc-kopfhoehe) + 40px); }
.tc-vertrauen__ehrlich .tc-kopf { margin-bottom: 32px; }
.tc-vertrauen__zahl {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin: 0;
	font-size: 1rem;
	color: var(--tc-text-leise);
}
.tc-vertrauen__zahl span {
	font-family: var(--tc-akzentschrift);
	font-style: italic;
	font-size: clamp(3.6rem, 6vw, 5rem);
	font-weight: 500;
	line-height: 1;
	color: var(--tc-tinte);
	background: linear-gradient(transparent 62%, var(--tc-akzent-hell) 62%, var(--tc-akzent-hell) 88%, transparent 88%);
}

.tc-vorteile { display: grid; gap: 16px; }
.tc-vorteil {
	display: flex;
	gap: 22px;
	padding: 30px;
	border: 1px solid var(--tc-linie);
	border-radius: var(--tc-radius);
	background: var(--tc-papier);
	transition: transform .75s var(--tc-weich), box-shadow .75s var(--tc-weich), border-color .6s var(--tc-sanft), background-color .6s var(--tc-sanft);
}
.tc-vorteil:hover {
	transform: translateY(-4px);
	background: #fff;
	border-color: rgba(47, 67, 255, .25);
	box-shadow: var(--tc-schatten);
}
.tc-vorteil__symbol {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 16px;
	background: var(--tc-blau-hell);
	color: var(--tc-blau);
	flex: none;
	transition: background .6s var(--tc-sanft), color .6s var(--tc-sanft);
}
.tc-vorteil:hover .tc-vorteil__symbol { background: var(--tc-blau); color: #fff; }
.tc-vorteil p { margin-top: 8px; }

/* --- Logos --------------------------------------------------------------- */

.tc-logos { padding-block: clamp(40px, 6vw, 64px); border-bottom: 1px solid var(--tc-linie); }
.tc-logos__titel {
	margin-bottom: 26px;
	text-align: center;
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--tc-text-leise);
}
.tc-logos__liste {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: clamp(24px, 4vw, 56px);
}
.tc-logos__eintrag img {
	max-height: 46px;
	max-width: 150px;
	width: auto;
	filter: grayscale(1);
	opacity: .65;
	transition: filter .6s var(--tc-sanft), opacity .6s var(--tc-sanft);
}
.tc-logos__eintrag img:hover { filter: none; opacity: 1; }

/* --- Referenzen ---------------------------------------------------------- */

.tc-referenzen__kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: clamp(40px, 5vw, 56px);
}
.tc-referenzen__kopf .tc-kopf { margin-bottom: 0; }

.tc-filter {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 5px;
	border: 1px solid var(--tc-linie);
	border-radius: 999px;
	background: #fff;
}
.tc-filter__knopf {
	padding: 9px 18px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	font-size: .93rem;
	font-weight: 500;
	cursor: pointer;
	transition: background-color .55s var(--tc-sanft), color .55s var(--tc-sanft);
}
.tc-filter__knopf:hover { background: rgba(11, 14, 38, .05); }
.tc-filter__knopf.ist-aktiv { background: var(--tc-tinte); color: #fff; }

.tc-referenzen__raster {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
	gap: 28px;
	align-items: start;
}
.tc-referenz {
	padding: 12px;
	border-radius: 28px;
	background: #fff;
	box-shadow: var(--tc-schatten);
	transition: transform .75s var(--tc-weich), box-shadow .75s var(--tc-weich);
}
.tc-referenz:hover { transform: translateY(-5px); box-shadow: var(--tc-schatten-gross); }
.tc-referenz[hidden] { display: none; }
.tc-referenz .tc-clip__rahmen,
.tc-referenz .tc-platzhalter { border-radius: 18px; }
@media (min-width: 900px) {
	.tc-referenz--quer { grid-column: span 2; }
}
.tc-referenz__text { padding: 20px 12px 10px; }
.tc-referenz__ergebnis {
	display: inline-block;
	margin-bottom: 14px;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--tc-akzent-hell);
	color: var(--tc-tinte);
	font-size: .84rem;
	font-weight: 600;
}
.tc-referenz__zitat { margin: 0 0 18px; position: relative; padding-left: 22px; }
.tc-referenz__zitat::before {
	content: "„";
	position: absolute;
	left: 0;
	top: -14px;
	font-family: var(--tc-akzentschrift);
	font-style: italic;
	font-size: 2.6rem;
	color: var(--tc-blau);
	line-height: 1;
}
.tc-referenz__zitat p { font-size: 1.04rem; color: var(--tc-tinte); }
.tc-referenz__wer { display: flex; align-items: center; gap: 12px; font-size: .9rem; line-height: 1.35; }
.tc-referenz__wer > span { display: grid; }
.tc-referenz__wer strong { color: var(--tc-tinte); }
.tc-referenz__wer span span { color: var(--tc-text-leise); }
.tc-referenz__logo { width: 44px; height: 44px; object-fit: contain; border-radius: 12px; border: 1px solid var(--tc-linie); padding: 4px; background: #fff; }

/* --- Herausforderungen --------------------------------------------------- */

.tc-probleme {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: 18px;
}
.tc-problem {
	padding: 30px 28px;
	border: 1px solid var(--tc-linie-hell);
	border-radius: var(--tc-radius);
	background: rgba(255, 255, 255, .035);
	transition: transform .75s var(--tc-weich), border-color .6s var(--tc-sanft), background-color .6s var(--tc-sanft);
}
.tc-problem:hover {
	transform: translateY(-4px);
	border-color: rgba(95, 214, 247, .45);
	background: rgba(255, 255, 255, .06);
}
.tc-problem__nummer {
	display: block;
	margin-bottom: 26px;
	font-family: var(--tc-akzentschrift);
	font-style: italic;
	font-size: 2rem;
	line-height: 1;
	color: var(--tc-akzent);
}
.tc-problem p { margin-top: 12px; font-size: .99rem; }

/* --- Überzeugung --------------------------------------------------------- */

.tc-ueberzeugung__raster {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	grid-template-areas:
		"text bild"
		"einsatz bild";
	gap: 40px clamp(40px, 6vw, 88px);
	align-items: start;
}
.tc-ueberzeugung__raster--ohne-bild {
	grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
	grid-template-areas: "text einsatz";
	align-items: center;
}
.tc-ueberzeugung__text { grid-area: text; }
.tc-ueberzeugung__text .tc-kopf { margin-bottom: 32px; }
.tc-ueberzeugung__bild { grid-area: bild; position: relative; }
.tc-ueberzeugung__bild::before {
	content: "";
	position: absolute;
	inset: 28px -18px -18px 28px;
	border-radius: var(--tc-radius-gross);
	background: var(--tc-verlauf);
	opacity: .9;
	z-index: 0;
}
.tc-ueberzeugung__bild > * { position: relative; z-index: 1; }
.tc-ueberzeugung__bild img { border-radius: var(--tc-radius-gross); }

.tc-merksatz {
	padding: 6px 0 6px 24px;
	border-left: 4px solid var(--tc-akzent);
	font-size: clamp(1.25rem, 1vw + 1rem, 1.55rem);
	font-weight: 500;
	line-height: 1.4;
	color: var(--tc-tinte);
}

.tc-einsatz {
	grid-area: einsatz;
	padding: clamp(26px, 3vw, 36px);
	border-radius: var(--tc-radius);
	background: #fff;
	box-shadow: var(--tc-schatten);
}
.tc-einsatz__liste { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; }
.tc-einsatz__liste li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px 9px 12px;
	border: 1px solid var(--tc-linie);
	border-radius: 999px;
	background: var(--tc-papier);
	font-size: .95rem;
	font-weight: 500;
	color: var(--tc-tinte);
	transition: border-color .55s var(--tc-sanft), background-color .55s var(--tc-sanft);
}
.tc-einsatz__liste li:hover { border-color: rgba(47, 67, 255, .35); background: var(--tc-blau-hell); }
.tc-einsatz__liste .tc-symbol { width: 18px; height: 18px; color: var(--tc-blau); }
.tc-einsatz__text { font-size: .95rem; color: var(--tc-text-leise); }

/* --- Strategie ----------------------------------------------------------- */

.tc-weg {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	margin-bottom: clamp(48px, 6vw, 72px);
	counter-reset: weg;
}
.tc-weg::before {
	content: "";
	position: absolute;
	top: 46px;
	left: 12%;
	right: 12%;
	border-top: 2px dashed rgba(47, 67, 255, .25);
}
.tc-weg__schritt {
	position: relative;
	display: grid;
	justify-items: center;
	align-content: start;
	gap: 8px;
	padding: 18px 16px 24px;
	border-radius: var(--tc-radius);
	text-align: center;
	font-size: .95rem;
	transition: transform .75s var(--tc-weich);
}
.tc-weg__schritt strong { margin-top: 8px; font-size: 1.08rem; color: var(--tc-tinte); }
.tc-weg__schritt > span:last-child { color: var(--tc-text-leise); }
.tc-weg__symbol {
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	border: 1px solid var(--tc-linie);
	background: #fff;
	color: var(--tc-tinte);
	box-shadow: 0 0 0 8px #fff;
}
.tc-weg__schritt--clip {
	background: var(--tc-blau-hell);
	transform: translateY(-6px);
}
.tc-weg__schritt--clip .tc-weg__symbol {
	border: 0;
	background: var(--tc-verlauf);
	color: #fff;
	box-shadow: 0 0 0 8px var(--tc-blau-hell), 0 12px 28px -10px rgba(47, 67, 255, .6);
}
.tc-weg__schritt--clip strong { color: var(--tc-blau); }

.tc-punkte-raster {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}
.tc-punkt {
	position: relative;
	padding: clamp(26px, 3vw, 38px);
	padding-left: clamp(80px, 8vw, 100px);
	border-radius: var(--tc-radius);
	background: var(--tc-papier);
	transition: transform .75s var(--tc-weich), box-shadow .75s var(--tc-weich), background-color .6s var(--tc-sanft);
}
.tc-punkt:hover { transform: translateY(-4px); background: #fff; box-shadow: var(--tc-schatten); }
.tc-punkt__nummer {
	position: absolute;
	left: clamp(24px, 3vw, 36px);
	top: clamp(22px, 3vw, 32px);
	font-family: var(--tc-akzentschrift);
	font-style: italic;
	font-size: 2.4rem;
	line-height: 1;
	color: var(--tc-blau);
}
.tc-punkt p { margin-top: 10px; }

/* --- Zielgruppen / Reiter ------------------------------------------------ */

.tc-reiter__leiste {
	display: none;
	width: fit-content;
	max-width: 100%;
	margin: 0 auto 32px;
	padding: 6px;
	border: 1px solid var(--tc-linie);
	border-radius: 999px;
	background: #fff;
}
.tc-reiter.ist-bereit .tc-reiter__leiste { display: flex; gap: 4px; }
.tc-reiter__knopf {
	padding: 13px 24px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	font-size: 1rem;
	font-weight: 600;
	color: var(--tc-text);
	cursor: pointer;
	transition: background-color .6s var(--tc-sanft), color .6s var(--tc-sanft);
}
.tc-reiter__knopf:hover { color: var(--tc-tinte); background: rgba(11, 14, 38, .05); }
.tc-reiter__knopf.ist-aktiv { background: var(--tc-tinte); color: #fff; }

.tc-reiter__tafel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 300px);
	gap: clamp(28px, 4vw, 48px);
	padding: clamp(28px, 4.5vw, 56px);
	border-radius: var(--tc-radius-gross);
	background: #fff;
	box-shadow: var(--tc-schatten);
	animation: tc-einblenden .85s var(--tc-weich);
}
.tc-reiter__tafel + .tc-reiter__tafel { margin-top: 24px; }
.tc-reiter.ist-bereit .tc-reiter__tafel + .tc-reiter__tafel { margin-top: 0; }
.tc-reiter__tafel--ohne-video { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tc-reiter__tafel[hidden] { display: none; }
.tc-reiter__tafeltitel { grid-column: 1 / -1; margin: 0; font-size: 1rem; color: var(--tc-blau); }
.tc-reiter.ist-bereit .tc-reiter__tafeltitel { display: none; }
.tc-reiter__spalte .tc-h3 { margin-bottom: 12px; font-size: 1.35rem; }
.tc-reiter__video { align-self: center; }

.tc-hakenliste { display: grid; gap: 12px; margin-top: 22px; }
.tc-hakenliste li { display: flex; gap: 12px; align-items: flex-start; color: var(--tc-tinte); }
.tc-hakenliste .tc-symbol {
	width: 26px;
	height: 26px;
	padding: 5px;
	border-radius: 50%;
	background: var(--tc-blau-hell);
	color: var(--tc-blau);
	stroke-width: 2.6;
}

@keyframes tc-einblenden {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}

/* --- Funnel -------------------------------------------------------------- */

.tc-funnel__raster {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 22px;
}
.tc-funnelkarte {
	padding: clamp(26px, 3vw, 36px);
	border-radius: var(--tc-radius);
	background: var(--tc-papier);
	border: 1px solid transparent;
	transition: transform .75s var(--tc-weich), box-shadow .75s var(--tc-weich), border-color .6s var(--tc-sanft), background-color .6s var(--tc-sanft);
}
.tc-funnelkarte:hover { transform: translateY(-4px); background: #fff; border-color: var(--tc-linie); box-shadow: var(--tc-schatten); }
.tc-funnelkarte__nutzen { margin-top: 10px; color: var(--tc-text-leise); }
.tc-funnelkarte__schritte { position: relative; display: grid; gap: 14px; margin-top: 26px; }
.tc-funnelkarte__schritte::before {
	content: "";
	position: absolute;
	left: 15px;
	top: 16px;
	bottom: 16px;
	border-left: 2px dotted rgba(11, 14, 38, .2);
}
.tc-funnelkarte__schritte li {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	font-weight: 500;
	color: var(--tc-tinte);
	line-height: 1.35;
}
.tc-funnelkarte__punkt {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--tc-linie);
	font-size: .85rem;
	font-weight: 700;
	flex: none;
}
.tc-funnelkarte__schritte li.ist-clip { color: var(--tc-blau); font-weight: 600; }
.tc-funnelkarte__schritte li.ist-clip .tc-funnelkarte__punkt { background: var(--tc-verlauf); color: #fff; border: 0; }
.tc-funnel__hinweis { margin-top: 40px; text-align: center; }
.tc-funnel__hinweis a { color: var(--tc-blau); font-weight: 600; text-underline-offset: 4px; }

/* --- Ablauf -------------------------------------------------------------- */

.tc-ablauf__raster {
	display: grid;
	grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
	gap: clamp(40px, 7vw, 100px);
	align-items: start;
}
.tc-ablauf__kopf { position: sticky; top: calc(var(--tc-kopfhoehe) + 40px); }
.tc-ablauf__kopf .tc-kopf { margin-bottom: 32px; }
.tc-schritte { border-top: 1px solid var(--tc-linie-hell); }
.tc-schritt {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	gap: 24px;
	padding: 32px 0;
	border-bottom: 1px solid var(--tc-linie-hell);
}
.tc-schritt__nummer {
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .25);
	font-family: var(--tc-akzentschrift);
	font-style: italic;
	font-size: 1.7rem;
	color: var(--tc-cyan);
	transition: background .75s var(--tc-sanft), color .6s var(--tc-sanft), border-color .6s var(--tc-sanft), transform .75s var(--tc-weich);
}
.tc-schritt:hover .tc-schritt__nummer { background: var(--tc-verlauf); border-color: transparent; color: #fff; transform: rotate(-6deg); }
.tc-schritt p { margin-top: 10px; }

/* --- Einblicke ----------------------------------------------------------- */

.tc-einblicke__raster {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
	gap: 18px;
}
.tc-einblicke__video { grid-column: 1 / -1; }
@media (min-width: 900px) {
	.tc-einblicke__video { grid-column: span 2; grid-row: span 2; align-self: center; }
}
.tc-einblicke__bild { margin: 0; overflow: hidden; border-radius: var(--tc-radius); }
.tc-einblicke__bild img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	transition: transform 1.2s var(--tc-weich);
}
.tc-einblicke__bild:hover img { transform: scale(1.04); }

/* --- Über uns ------------------------------------------------------------ */

.tc-ueber__raster {
	display: grid;
	grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
	gap: clamp(40px, 7vw, 100px);
	align-items: center;
}
.tc-ueber__raster--ohne-bild { grid-template-columns: minmax(0, 1fr); max-width: 820px; }
.tc-ueber__bild { position: relative; margin: 0; }
.tc-ueber__bild::before {
	content: "";
	position: absolute;
	top: -22px;
	left: -22px;
	width: 58%;
	height: 60px;
	border-radius: 60px;
	background: var(--tc-verlauf);
	z-index: 0;
}
.tc-ueber__bild > * { position: relative; z-index: 1; }
.tc-ueber__bild img { border-radius: var(--tc-radius-gross); }
.tc-ueber__bild figcaption {
	position: absolute;
	left: 18px;
	bottom: 18px;
	z-index: 2;
	padding: 8px 16px;
	border-radius: 999px;
	background: #fff;
	box-shadow: var(--tc-schatten);
	font-size: .88rem;
	font-weight: 600;
	color: var(--tc-tinte);
}
.tc-ueber__text .tc-kopf { margin-bottom: 36px; }

.tc-fakten {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
	gap: 14px;
	margin: 0;
}
.tc-fakt { padding: 22px 22px 20px; border-radius: 20px; background: var(--tc-papier); }
.tc-fakt dt {
	font-size: clamp(1.8rem, 2vw + 1rem, 2.4rem);
	font-weight: 700;
	letter-spacing: -.04em;
	line-height: 1.05;
	color: var(--tc-tinte);
}
.tc-fakt dd { margin: 6px 0 0; font-size: .92rem; line-height: 1.4; color: var(--tc-text-leise); }

/* --- Vergleich ----------------------------------------------------------- */

.tc-vergleich__tabelle {
	overflow: hidden;
	border-radius: var(--tc-radius-gross);
	background: #fff;
	box-shadow: var(--tc-schatten);
}
.tc-vergleich table { width: 100%; border-collapse: collapse; }
.tc-vergleich th,
.tc-vergleich td { padding: 20px 24px; text-align: left; vertical-align: top; }
.tc-vergleich thead th { font-size: 1rem; font-weight: 600; color: var(--tc-tinte); padding-block: 26px; }
.tc-vergleich thead th.tc-vergleich__wir { background: var(--tc-tinte); color: #fff; }
.tc-vergleich__marke { display: inline-flex; align-items: center; gap: 10px; }
.tc-vergleich__zeichen { width: 28px; height: auto; }
.tc-vergleich tbody th { width: 22%; font-weight: 600; color: var(--tc-tinte); }
.tc-vergleich tbody tr { border-top: 1px solid var(--tc-linie); transition: background-color .5s var(--tc-sanft); }
.tc-vergleich tbody tr:hover { background: rgba(246, 244, 239, .6); }
.tc-vergleich td { color: var(--tc-text-leise); }
.tc-vergleich td.tc-vergleich__wir { background: rgba(47, 67, 255, .045); color: var(--tc-tinte); font-weight: 500; }
.tc-vergleich td .tc-symbol { width: 20px; height: 20px; margin: 2px 10px 0 0; float: left; }
.tc-vergleich td span { display: block; overflow: hidden; }
.tc-vergleich td.tc-vergleich__andere .tc-symbol { color: #b4b7c8; }
.tc-vergleich td.tc-vergleich__wir .tc-symbol { color: var(--tc-blau); stroke-width: 2.4; }

@media (max-width: 760px) {
	.tc-vergleich__tabelle { background: transparent; box-shadow: none; border-radius: 0; overflow: visible; }
	.tc-vergleich table,
	.tc-vergleich tbody,
	.tc-vergleich tr,
	.tc-vergleich th,
	.tc-vergleich td { display: block; width: 100%; }
	.tc-vergleich thead { display: none; }
	.tc-vergleich tbody { display: grid; gap: 14px; }
	.tc-vergleich tbody tr { border: 0; border-radius: var(--tc-radius); background: #fff; box-shadow: var(--tc-schatten); overflow: hidden; }
	.tc-vergleich tbody th { width: 100%; padding: 18px 20px 6px; font-size: 1.08rem; }
	.tc-vergleich td { padding: 10px 20px; }
	.tc-vergleich td::before {
		content: attr(data-tc-spalte);
		display: block;
		margin-bottom: 4px;
		font-size: .72rem;
		font-weight: 600;
		letter-spacing: .1em;
		text-transform: uppercase;
		color: var(--tc-text-leise);
	}
	.tc-vergleich td.tc-vergleich__wir { padding-bottom: 18px; }
	.tc-vergleich td.tc-vergleich__wir::before { color: var(--tc-blau); }
}

/* --- FAQ ----------------------------------------------------------------- */

.tc-faq__raster {
	display: grid;
	grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
	gap: clamp(40px, 7vw, 100px);
	align-items: start;
}
.tc-faq__kopf { position: sticky; top: calc(var(--tc-kopfhoehe) + 40px); }
.tc-faq__kopf .tc-kopf { margin-bottom: 28px; }
.tc-faq__liste { border-top: 1px solid var(--tc-linie); }
.tc-frage { border-bottom: 1px solid var(--tc-linie); }
.tc-frage summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 24px 0;
	cursor: pointer;
	list-style: none;
	font-size: 1.14rem;
	font-weight: 600;
	color: var(--tc-tinte);
	transition: color .5s var(--tc-sanft);
}
.tc-frage summary::-webkit-details-marker { display: none; }
.tc-frage summary:hover { color: var(--tc-blau); }
.tc-frage__plus {
	position: relative;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--tc-linie);
	flex: none;
	transition: transform .7s var(--tc-weich), background-color .6s var(--tc-sanft), border-color .6s var(--tc-sanft);
}
.tc-frage__plus::before,
.tc-frage__plus::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 12px;
	height: 2px;
	margin: -1px 0 0 -6px;
	border-radius: 2px;
	background: var(--tc-tinte);
	transition: background-color .6s var(--tc-sanft);
}
.tc-frage__plus::after { transform: rotate(90deg); }
.tc-frage[open] .tc-frage__plus { transform: rotate(45deg); background: var(--tc-blau); border-color: var(--tc-blau); }
.tc-frage[open] .tc-frage__plus::before,
.tc-frage[open] .tc-frage__plus::after { background: #fff; }
.tc-frage__antwort { padding: 0 56px 26px 0; animation: tc-einblenden .75s var(--tc-weich); }

/* --- Kontakt ------------------------------------------------------------- */

.tc-kontakt__karte {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
	gap: clamp(32px, 5vw, 64px);
	align-items: center;
	padding: clamp(32px, 6vw, 80px);
	border-radius: clamp(28px, 4vw, 40px);
	background:
		radial-gradient(55% 60% at 0% 0%, rgba(47, 67, 255, .5), transparent 70%),
		radial-gradient(45% 55% at 100% 100%, rgba(139, 92, 246, .4), transparent 70%),
		var(--tc-tinte);
	color: rgba(255, 255, 255, .78);
	overflow: hidden;
}
.tc-kontakt__karte--ohne-bild { grid-template-columns: minmax(0, 1fr); }
.tc-kontakt__karte--ohne-bild .tc-kontakt__text { max-width: 760px; }
.tc-kontakt__karte .tc-h2 { color: #fff; }
.tc-kontakt__karte .tc-kopf { margin-bottom: 0; }
.tc-kontakt__wege { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 30px; }
.tc-kontakt__wege a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, .25);
	padding-bottom: 3px;
	transition: border-color .5s var(--tc-sanft), color .5s var(--tc-sanft);
}
.tc-kontakt__wege a:hover { color: var(--tc-cyan); border-color: var(--tc-cyan); }
.tc-kontakt__wege .tc-symbol { width: 20px; height: 20px; }
.tc-kontakt__hinweis {
	margin-top: 28px;
	padding: 14px 18px;
	border: 1.5px dashed rgba(95, 214, 247, .5);
	border-radius: 14px;
	font-size: .88rem;
	color: var(--tc-cyan);
}
.tc-kontakt__bild img,
.tc-kontakt__bild .tc-platzhalter { border-radius: 24px; }
.tc-kontakt__bild .tc-platzhalter { background-color: rgba(255, 255, 255, .06); border-color: rgba(95, 214, 247, .45); color: var(--tc-cyan); }
.tc-kontakt__bild .tc-platzhalter__text { color: #fff; }
.tc-kontakt__name { display: grid; margin-top: 14px; line-height: 1.35; }
.tc-kontakt__name strong { color: #fff; }
.tc-kontakt__name span { font-size: .9rem; }

/* --- Unterseiten --------------------------------------------------------- */

.tc-seitenkopf {
	position: relative;
	overflow: hidden;
	padding-block: clamp(64px, 9vw, 120px) clamp(48px, 6vw, 72px);
	background:
		radial-gradient(50% 70% at 0% 0%, rgba(47, 67, 255, .4), transparent 70%),
		var(--tc-tinte);
}
.tc-seitenkopf .tc-h1 { color: #fff; position: relative; z-index: 1; }
.tc-seitenkopf__zeichen {
	position: absolute;
	right: -40px;
	bottom: -70px;
	width: min(380px, 60vw);
	opacity: .22;
}
.tc-textseite { padding-block: clamp(48px, 7vw, 96px); }

.tc-fliesstext { overflow-wrap: break-word; }
.tc-fliesstext h2 { margin: 1.8em 0 .6em; font-size: 1.6rem; line-height: 1.2; letter-spacing: -.02em; color: var(--tc-tinte); }
.tc-fliesstext h3 { margin: 1.5em 0 .5em; font-size: 1.2rem; color: var(--tc-tinte); }
.tc-fliesstext h2:first-child,
.tc-fliesstext h3:first-child { margin-top: 0; }
.tc-fliesstext ul { list-style: disc; padding-left: 1.3em; margin: 0 0 1em; }
.tc-fliesstext ol { list-style: decimal; padding-left: 1.3em; margin: 0 0 1em; }
.tc-fliesstext li { margin-bottom: .4em; }
.tc-fliesstext a { color: var(--tc-blau); text-underline-offset: 3px; }

.tc-abschluss { padding-block: clamp(56px, 7vw, 88px); background: var(--tc-verlauf); }
.tc-abschluss__innen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.tc-abschluss .tc-h2 { color: #fff; }
.tc-abschluss .tc-akzent { color: #fff; background: linear-gradient(transparent 66%, rgba(255, 255, 255, .28) 66%, rgba(255, 255, 255, .28) 90%, transparent 90%); }

/* --- Fußbereich ---------------------------------------------------------- */

.tc-fuss {
	padding: clamp(56px, 7vw, 88px) 0 32px;
	background: var(--tc-nacht);
	color: rgba(255, 255, 255, .66);
	font-size: .97rem;
}
.tc-fuss__raster {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: 48px;
}
.tc-fuss__claim { margin-top: 22px; font-size: 1.1rem; color: #fff; }
.tc-fuss__region { margin-top: 6px; }
.tc-fuss__titel {
	margin: 4px 0 18px;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .45);
}
.tc-fuss__liste { display: grid; gap: 8px; }
.tc-fuss a { text-decoration: none; transition: color .5s var(--tc-sanft); }
.tc-fuss a:hover { color: var(--tc-cyan); }
.tc-social { display: flex; gap: 10px; margin-top: 24px; }
.tc-social a {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 50%;
	transition: border-color .5s var(--tc-sanft), color .5s var(--tc-sanft), transform .6s var(--tc-weich);
}
.tc-social a:hover { border-color: var(--tc-cyan); transform: translateY(-2px); }
.tc-social .tc-symbol { width: 20px; height: 20px; }
.tc-fuss__unten {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 24px;
	margin-top: 56px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, .1);
	font-size: .86rem;
	color: rgba(255, 255, 255, .45);
}
.tc-fuss__unten p { margin: 0; }

/* --- Übergangsseite ------------------------------------------------------ */

body.tc-uebergang { background: var(--tc-tinte); }
.tc-uebergang__buehne {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 100vh;
	min-height: 100svh;
	padding: 64px var(--tc-rand) 96px;
	overflow: hidden;
	background:
		radial-gradient(50% 50% at 0% 0%, rgba(47, 67, 255, .5), transparent 70%),
		radial-gradient(50% 50% at 100% 100%, rgba(139, 92, 246, .4), transparent 70%),
		var(--tc-tinte);
	color: rgba(255, 255, 255, .78);
}
.tc-uebergang__inhalt { position: relative; z-index: 1; max-width: 720px; text-align: center; }
.tc-uebergang__logo { justify-content: center; margin-bottom: 48px; }
.tc-uebergang__logo .tc-logo__zeichen { width: 52px; }
.tc-uebergang__logo .tc-logo__schrift { font-size: 2.1rem; }
.tc-uebergang .tc-h1 { color: #fff; font-size: clamp(2.1rem, 4vw + 1rem, 3.8rem); }
.tc-uebergang__text { margin: 28px auto 36px; max-width: 34em; font-size: 1.15rem; }
.tc-uebergang__zeichen { position: absolute; right: -60px; bottom: -80px; width: min(420px, 70vw); opacity: .12; }
.tc-uebergang__recht {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 28px;
	display: flex;
	justify-content: center;
	gap: 24px;
	font-size: .9rem;
}
.tc-uebergang__recht a { color: rgba(255, 255, 255, .6); text-decoration: none; }
.tc-uebergang__recht a:hover { color: #fff; }

/* --- Einblenden beim Scrollen -------------------------------------------- */

.tc-js .tc-erscheinen {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 1.4s var(--tc-sanft), transform 1.6s var(--tc-weich);
	will-change: opacity, transform;
}
.tc-js .tc-erscheinen.ist-sichtbar { opacity: 1; transform: none; will-change: auto; }
.tc-js .tc-erscheinen:nth-child(2) { transition-delay: .15s; }
.tc-js .tc-erscheinen:nth-child(3) { transition-delay: .3s; }
.tc-js .tc-erscheinen:nth-child(4) { transition-delay: .45s; }
.tc-js .tc-erscheinen:nth-child(n+5) { transition-delay: .6s; }
/* Nach dem Einblenden entfernt das Skript die Klasse, damit die eigenen Hover-Übergänge der Karten wieder greifen. */

/* Admin-Leiste: Hinweis auf Übergangsmodus */
#wpadminbar .tc-modus-hinweis > .ab-item { background: #2f43ff !important; color: #fff !important; }

/* --- Responsiv ----------------------------------------------------------- */

@media (max-width: 1000px) {
	.tc-hero__raster,
	.tc-vertrauen__raster,
	.tc-ablauf__raster,
	.tc-faq__raster,
	.tc-ueber__raster,
	.tc-kontakt__karte { grid-template-columns: minmax(0, 1fr); }

	.tc-vertrauen__ehrlich,
	.tc-ablauf__kopf,
	.tc-faq__kopf { position: static; }

	.tc-hero__medien { margin: 24px auto 0; width: min(100%, 420px); }
	.tc-hero__sticker { left: -4%; }

	.tc-ueberzeugung__raster,
	.tc-ueberzeugung__raster--ohne-bild {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "text" "bild" "einsatz";
	}
	.tc-ueberzeugung__bild { max-width: 460px; }

	.tc-reiter__tafel,
	.tc-reiter__tafel--ohne-video { grid-template-columns: minmax(0, 1fr); }
	.tc-reiter__video { max-width: 360px; }

	.tc-ueber__bild { max-width: 420px; }
	.tc-kontakt__bild { max-width: 320px; }

	.tc-fuss__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.tc-fuss__marke { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
	.tc-weg { grid-template-columns: minmax(0, 1fr); gap: 6px; }
	.tc-weg::before { top: 40px; bottom: 40px; left: 44px; right: auto; border-top: 0; border-left: 2px dashed rgba(47, 67, 255, .25); }
	.tc-weg__schritt {
		grid-template-columns: 58px minmax(0, 1fr);
		justify-items: start;
		align-items: center;
		column-gap: 18px;
		row-gap: 2px;
		padding: 14px;
		text-align: left;
	}
	.tc-weg__symbol { grid-row: span 2; }
	.tc-weg__schritt strong { margin-top: 0; }
	.tc-weg__schritt--clip { transform: none; }

	.tc-punkte-raster { grid-template-columns: minmax(0, 1fr); }

	.tc-reiter.ist-bereit .tc-reiter__leiste { flex-direction: column; width: 100%; border-radius: 24px; }
	.tc-reiter__knopf { width: 100%; }

	.tc-schritt { grid-template-columns: 48px minmax(0, 1fr); gap: 18px; padding: 26px 0; }
	.tc-schritt__nummer { width: 48px; height: 48px; font-size: 1.35rem; }

	.tc-frage__antwort { padding-right: 0; }

	.tc-hero__sticker { font-size: 1rem; padding: 12px 18px; left: -2%; bottom: 8%; }
	.tc-form--dreieck { right: -12px; width: 60px; height: 70px; }
	.tc-form--balken { left: -6%; height: 52px; }
	.tc-form--stiel { right: -14px; width: 54px; height: 150px; }
}

@media (max-width: 560px) {
	body.tc-seite { font-size: 1rem; }
	.tc-knopfreihe .tc-knopf { width: 100%; }
	.tc-logo__zeichen { width: 34px; }
	.tc-logo__schrift { font-size: 1.4rem; }
	.tc-vorteil { flex-direction: column; gap: 16px; padding: 24px; }
	.tc-fuss__raster { grid-template-columns: minmax(0, 1fr); gap: 36px; }
	.tc-abschluss .tc-knopf { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.tc-seite *,
	.tc-seite *::before,
	.tc-seite *::after {
		animation: none !important;
		transition: none !important;
	}
	.tc-js .tc-erscheinen { opacity: 1; transform: none; }
}