/**
 * TTH Hamburg — Stylesheet
 *
 * Folgt dem Designsystem "Authentic Sporty": scharfe Kanten, keine Schatten,
 * Tiefe über Flächen und Rahmen, All-Caps-Überschriften, 1170er Container.
 * Farben und Schriften kommen als CSS-Variablen aus dem Customizer.
 */

/* ---------------------------------------------------------------- Tokens */

:root {
	--tth-white: #ffffff;
	--tth-border: var(--tth-light-bg, #ededed);

	--tth-section-gap: 80px;
	--tth-gutter: 30px;
	--tth-page-margin: 20px;
	--tth-stack-sm: 8px;
	--tth-stack-md: 16px;
	--tth-stack-lg: 32px;
}

@media (max-width: 782px) {
	:root {
		--tth-section-gap: 48px;
	}
}

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

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

body {
	background: var(--tth-white);
	color: var(--tth-text, #393939);
	font-family: var(--tth-ff-body);
	font-size: 16px;
	line-height: 24px;
	margin: 0;
	-webkit-font-smoothing: antialiased;
}

img {
	height: auto;
	max-width: 100%;
}

a {
	color: var(--tth-primary);
	text-decoration: none;
}

a:hover,
a:focus {
	color: var(--tth-primary-dark);
	text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--tth-dark);
	font-family: var(--tth-ff-heading);
	margin: 0 0 var(--tth-stack-md);
}

p {
	margin: 0 0 var(--tth-stack-md);
}

:focus-visible {
	outline: 3px solid var(--tth-primary);
	outline-offset: 2px;
}

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link {
	background: var(--tth-dark);
	color: #fff;
	left: 0;
	padding: 12px 20px;
	position: absolute;
	top: -100px;
	z-index: 999;
}

.skip-link:focus {
	top: 0;
}

.tth-container {
	margin: 0 auto;
	max-width: var(--tth-container, 1170px);
	padding: 0 var(--tth-page-margin);
	width: 100%;
}

.tth-icon {
	height: 1em;
	width: 1em;
}

/* --------------------------------------------------------------- Buttons */

.tth-button {
	border: 2px solid transparent;
	border-radius: var(--tth-radius, 0);
	cursor: pointer;
	display: inline-block;
	font-family: var(--tth-ff-heading);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1;
	padding: 16px 28px;
	text-transform: uppercase;
	transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.tth-button:hover,
.tth-button:focus {
	text-decoration: none;
	transform: translateX(3px);
}

.tth-button-primary {
	background: var(--tth-primary);
	color: #fff;
}

.tth-button-primary:hover,
.tth-button-primary:focus {
	background: var(--tth-primary-dark);
	color: #fff;
}

.tth-button-ghost {
	background: transparent;
	border-color: var(--tth-dark);
	color: var(--tth-dark);
}

.tth-button-ghost:hover,
.tth-button-ghost:focus {
	background: var(--tth-dark);
	color: #fff;
}

/* ---------------------------------------------------------------- Header */

.tth-header {
	background: var(--tth-white);
	border-bottom: 1px solid var(--tth-border);
	position: relative;
	z-index: 100;
}

.has-sticky-header .tth-header {
	position: sticky;
	top: 0;
}

/* Über dem Hero liegend — nur auf der Startseite. */
.has-transparent-header .tth-header {
	background: transparent;
	border-bottom-color: transparent;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
}

.has-transparent-header.has-sticky-header .tth-header {
	position: fixed;
}

.has-transparent-header .tth-header.is-stuck {
	background: var(--tth-white);
	border-bottom-color: var(--tth-border);
}

.tth-header-inner {
	align-items: center;
	display: flex;
	gap: var(--tth-stack-lg);
	justify-content: space-between;
	min-height: 84px;
}

.tth-branding {
	flex-shrink: 0;
}

/* Das Logo hat eine feste Höhe und ist damit auch mobil immer sichtbar. */
.tth-branding img,
.custom-logo {
	display: block;
	height: var(--tth-logo-h, 64px);
	object-fit: contain;
	width: auto;
}

.tth-site-title {
	color: var(--tth-dark);
	font-family: var(--tth-ff-heading);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.has-transparent-header .tth-header:not(.is-stuck) .tth-site-title,
.has-transparent-header .tth-header:not(.is-stuck) .tth-icon-button {
	color: #fff;
}

.tth-menu {
	display: flex;
	gap: var(--tth-stack-lg);
	list-style: none;
	margin: 0;
	padding: 0;
}

.tth-menu a {
	color: var(--tth-dark);
	font-family: var(--tth-ff-heading);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	padding: 8px 0;
	position: relative;
	text-transform: uppercase;
}

.has-transparent-header .tth-header:not(.is-stuck) .tth-menu a {
	color: #fff;
}


.tth-menu a:hover,
.tth-menu a:focus {
	text-decoration: none;
}

.tth-header-actions {
	align-items: center;
	display: flex;
	gap: var(--tth-stack-sm);
}

.tth-icon-button {
	background: none;
	border: 0;
	color: var(--tth-dark);
	cursor: pointer;
	display: inline-flex;
	font-size: 22px;
	padding: 10px;
}

.tth-menu-toggle {
	display: none;
}

.tth-search-panel {
	background: var(--tth-white);
	border-bottom: 1px solid var(--tth-border);
	padding: var(--tth-stack-md) 0;
}

.tth-mobile-nav {
	background: var(--tth-white);
	border-bottom: 1px solid var(--tth-border);
	padding: var(--tth-stack-md) 0;
}

.tth-mobile-menu {
	list-style: none;
	margin: 0;
	padding: 0 var(--tth-page-margin);
}

.tth-mobile-menu a {
	border-bottom: 1px solid var(--tth-border);
	color: var(--tth-dark);
	display: block;
	font-family: var(--tth-ff-heading);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.05em;
	padding: 14px 0;
	text-transform: uppercase;
}

@media (max-width: 900px) {
	.tth-nav {
		display: none;
	}

	.tth-menu-toggle {
		display: inline-flex;
	}

	.tth-header-inner {
		min-height: 68px;
	}
}

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

.tth-hero {
	align-items: center;
	background-color: var(--tth-dark);
	background-position: var(--tth-hero-pos, center center);
	/* cover statt contain — dadurch keine Ränder neben dem Motiv. */
	background-repeat: no-repeat;
	background-size: cover;
	display: flex;
	min-height: var(--tth-hero-h, 70vh);
	position: relative;
	text-align: center;
}

.tth-hero.no-image {
	background-image: linear-gradient(135deg, var(--tth-dark) 0%, var(--tth-primary-dark) 100%);
}

.tth-hero-overlay {
	background: #000;
	inset: 0;
	opacity: var(--tth-hero-overlay, 0.35);
	position: absolute;
}

.tth-hero-inner {
	position: relative;
	padding: 120px var(--tth-page-margin) 80px;
	z-index: 1;
}

.tth-hero-title {
	color: #fff;
	font-size: 64px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 72px;
	margin: 0 0 var(--tth-stack-md);
	text-transform: uppercase;
}

.tth-hero-subtitle {
	color: #fff;
	font-size: 18px;
	line-height: 28px;
	margin: 0 0 var(--tth-stack-lg);
}

@media (max-width: 782px) {
	.tth-hero-title {
		font-size: 40px;
		line-height: 44px;
	}

	.tth-hero-inner {
		padding: 100px var(--tth-page-margin) 60px;
	}
}

/* -------------------------------------------------------------- Sektionen */

.tth-section {
	padding: var(--tth-section-gap) 0;
}

.tth-section.is-dark {
	background: var(--tth-dark);
	color: #fff;
}

.tth-section.is-dark h1,
.tth-section.is-dark h2,
.tth-section.is-dark h3 {
	color: #fff;
}

.tth-section-head {
	margin-bottom: var(--tth-stack-lg);
	text-align: center;
}

.tth-section-title {
	font-size: 32px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 40px;
	margin: 0;
	text-transform: uppercase;
}

.tth-section-foot {
	margin-top: var(--tth-stack-lg);
	text-align: center;
}

.tth-prose {
	font-size: 18px;
	line-height: 28px;
}

.tth-prose h2 {
	font-size: 24px;
	line-height: 32px;
	margin-top: var(--tth-stack-lg);
}

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

.tth-news-grid,
.tth-archive-grid {
	display: grid;
	gap: var(--tth-gutter);
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.tth-news-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.tth-news-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.tth-card {
	background: var(--tth-white);
	/* Rahmen statt Schatten — Designsystem "Flat Depth". */
	border: 1px solid var(--tth-border);
	border-radius: var(--tth-radius, 0);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: border-color 0.18s ease;
}

.tth-card:hover {
	border-color: var(--tth-primary);
}

.tth-card-media {
	display: block;
	line-height: 0;
}

.tth-card-media img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
}

.tth-card-placeholder {
	background: var(--tth-light-bg);
	display: block;
	aspect-ratio: 4 / 3;
	width: 100%;
}

.tth-card-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: var(--tth-stack-md);
}

.tth-card-title {
	font-size: 18px;
	font-weight: 600;
	line-height: 26px;
	margin: 0 0 var(--tth-stack-sm);
}

.tth-card-title a {
	color: var(--tth-dark);
}

.tth-card-title a:hover,
.tth-card-title a:focus {
	color: var(--tth-primary);
	text-decoration: none;
}

.tth-card-excerpt {
	flex: 1;
	font-size: 14px;
	line-height: 22px;
}

.tth-card-link {
	align-items: center;
	display: inline-flex;
	font-family: var(--tth-ff-heading);
	font-size: 12px;
	font-weight: 700;
	gap: 6px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.tth-card-link:hover,
.tth-card-link:focus {
	text-decoration: none;
}

.tth-card-link .tth-icon {
	transition: transform 0.18s ease;
}

.tth-card-link:hover .tth-icon {
	transform: translateX(4px);
}

.tth-post-meta {
	align-items: center;
	color: var(--tth-text);
	display: flex;
	flex-wrap: wrap;
	font-size: 14px;
	gap: 6px;
	margin-bottom: var(--tth-stack-sm);
	opacity: 0.75;
}

.tth-post-meta .tth-icon {
	flex-shrink: 0;
}

.tth-post-meta .tth-meta-author {
	margin-right: var(--tth-stack-sm);
}

/* --------------------------------------------------------------- Vorstand */

/* auto-fit sorgt dafür, dass 4, 5, 6 oder mehr Personen sauber umbrechen. */
.tth-board-grid {
	display: grid;
	gap: var(--tth-gutter);
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.tth-member {
	border: 1px solid var(--tth-border);
	border-radius: var(--tth-radius, 0);
	padding: var(--tth-stack-lg) var(--tth-stack-md);
	text-align: center;
}

.tth-member-photo {
	margin: 0 auto var(--tth-stack-md);
	width: 120px;
}

.tth-member-photo img {
	aspect-ratio: 1;
	border-radius: 50%;
	object-fit: cover;
	width: 100%;
}

.tth-member-initials {
	align-items: center;
	background: var(--tth-primary-soft);
	border-radius: 50%;
	color: var(--tth-primary-dark);
	display: flex;
	font-family: var(--tth-ff-heading);
	font-size: 36px;
	font-weight: 700;
	height: 120px;
	justify-content: center;
	width: 120px;
}

.tth-member-name {
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 2px;
}

.tth-member-role {
	color: var(--tth-primary);
	font-family: var(--tth-ff-heading);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	margin-bottom: var(--tth-stack-sm);
	text-transform: uppercase;
}

.tth-member-desc {
	font-size: 14px;
	line-height: 22px;
	margin: 0;
}

/* --------------------------------------------------------------- Training */

.tth-training-grid {
	display: grid;
	gap: var(--tth-gutter);
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.tth-training-card {
	border: 2px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--tth-radius, 0);
	padding: var(--tth-stack-lg);
}

.tth-training-icon {
	display: block;
	font-size: 40px;
	margin-bottom: var(--tth-stack-md);
}

.tth-training-card.tth-accent-1 .tth-training-icon {
	color: var(--tth-accent-1);
}

.tth-training-card.tth-accent-2 .tth-training-icon {
	color: var(--tth-accent-2);
}

.tth-training-card.tth-accent-3 .tth-training-icon {
	color: var(--tth-primary);
}

.tth-training-title {
	font-size: 24px;
	font-weight: 600;
	letter-spacing: 0.02em;
	margin-bottom: var(--tth-stack-sm);
	text-transform: uppercase;
}

.tth-training-text {
	color: rgba(255, 255, 255, 0.82);
	font-size: 16px;
	line-height: 26px;
	margin: 0;
}

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

.tth-facts {
	border-block: 2px solid var(--tth-border);
	display: grid;
	gap: var(--tth-gutter);
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	margin-bottom: var(--tth-stack-lg);
	padding: var(--tth-stack-lg) 0;
	text-align: center;
}

.tth-fact-value {
	color: var(--tth-primary);
	display: block;
	font-family: var(--tth-ff-heading);
	font-size: 48px;
	font-weight: 700;
	line-height: 56px;
}

.tth-fact-label {
	font-family: var(--tth-ff-heading);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.tth-about-columns.is-bilingual {
	display: grid;
	gap: var(--tth-gutter);
}

@media (min-width: 900px) {
	.tth-about-columns.is-bilingual {
		grid-template-columns: repeat(2, 1fr);
	}
}

.tth-about-text[lang="en"] {
	border-left: 2px solid var(--tth-border);
	padding-left: var(--tth-gutter);
}

@media (max-width: 899px) {
	.tth-about-text[lang="en"] {
		border-left: 0;
		border-top: 2px solid var(--tth-border);
		padding: var(--tth-stack-lg) 0 0;
	}
}

/* ------------------------------------------------------------- Newsletter */

.tth-section-newsletter {
	background: var(--tth-light-bg);
}

.tth-newsletter-inner {
	display: grid;
	gap: var(--tth-gutter);
}

@media (min-width: 900px) {
	.tth-newsletter-inner {
		align-items: center;
		grid-template-columns: 1fr 1fr;
	}
}

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

.tth-contact-grid {
	display: grid;
	gap: var(--tth-gutter);
}

@media (min-width: 900px) {
	.tth-contact-grid {
		grid-template-columns: 1fr 1.2fr;
	}
}

.tth-contact-mail {
	align-items: center;
	display: inline-flex;
	font-family: var(--tth-ff-heading);
	font-size: 16px;
	font-weight: 600;
	gap: var(--tth-stack-sm);
}

.tth-notice {
	background: var(--tth-light-bg);
	border-left: 4px solid var(--tth-primary);
	font-size: 14px;
	padding: var(--tth-stack-md);
}

/* --------------------------------------------------------- Formularfelder */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select {
	background: var(--tth-white);
	/* 2px Rahmen, Fokus in Primärfarbe — Designsystem. */
	border: 2px solid var(--tth-border);
	border-radius: var(--tth-radius, 0);
	color: var(--tth-text);
	font-family: inherit;
	font-size: 16px;
	padding: 12px 14px;
	width: 100%;
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--tth-primary);
	outline: none;
}

label {
	display: block;
	font-family: var(--tth-ff-heading);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	margin-bottom: 6px;
	text-transform: uppercase;
}

input[type="submit"],
button[type="submit"],
.wpcf7 input[type="submit"] {
	background: var(--tth-primary);
	border: 0;
	border-radius: var(--tth-radius, 0);
	color: #fff;
	cursor: pointer;
	font-family: var(--tth-ff-heading);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.05em;
	padding: 16px 28px;
	text-transform: uppercase;
	width: auto;
}

input[type="submit"]:hover,
button[type="submit"]:hover {
	background: var(--tth-primary-dark);
}

.tth-search-form {
	display: flex;
	gap: var(--tth-stack-sm);
}

.tth-search-submit {
	background: var(--tth-dark);
	border: 0;
	border-radius: var(--tth-radius, 0);
	color: #fff;
	cursor: pointer;
	flex-shrink: 0;
	font-size: 20px;
	padding: 0 18px;
}

/* ------------------------------------------------------- Seiten & Beiträge */

.tth-page-head {
	background: var(--tth-light-bg);
	padding: var(--tth-stack-lg) 0;
}

.has-transparent-header .tth-page-head {
	padding-top: 120px;
}

.tth-page-title {
	font-size: 48px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 56px;
	margin: 0;
	text-transform: uppercase;
}

@media (max-width: 782px) {
	.tth-page-title {
		font-size: 32px;
		line-height: 40px;
	}
}

.tth-single-cover {
	position: relative;
}

.tth-single-cover img {
	aspect-ratio: 21 / 9;
	object-fit: cover;
	width: 100%;
}

.tth-single-cover-overlay {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.7) 100%);
	inset: 0;
	position: absolute;
}

.tth-single-cover-inner {
	bottom: 0;
	left: 50%;
	padding-bottom: var(--tth-stack-lg);
	position: absolute;
	transform: translateX(-50%);
}

.tth-single-title {
	color: #fff;
	font-size: 48px;
	font-weight: 700;
	line-height: 56px;
	margin-bottom: var(--tth-stack-sm);
	text-transform: uppercase;
}

.tth-single-cover-inner .tth-post-meta {
	color: #fff;
	opacity: 0.9;
}

@media (max-width: 782px) {
	.tth-single-title {
		font-size: 28px;
		line-height: 34px;
	}

	.tth-single-cover img {
		aspect-ratio: 4 / 3;
	}
}

.tth-single-layout {
	display: grid;
	gap: calc(var(--tth-gutter) * 2);
}

@media (min-width: 1024px) {
	.tth-single-layout.has-sidebar {
		grid-template-columns: 70% 1fr;
	}
}

.tth-tags {
	border-top: 1px solid var(--tth-border);
	margin-top: var(--tth-stack-lg);
	padding-top: var(--tth-stack-md);
}

.tth-tags a {
	background: var(--tth-light-bg);
	border-radius: var(--tth-radius, 0);
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	margin: 0 6px 6px 0;
	padding: 6px 12px;
	text-transform: uppercase;
}

.tth-post-nav {
	border-top: 1px solid var(--tth-border);
	display: flex;
	gap: var(--tth-gutter);
	justify-content: space-between;
	margin-top: var(--tth-section-gap);
	padding-top: var(--tth-stack-lg);
}

.tth-post-nav-next {
	margin-left: auto;
	text-align: right;
}

/* -------------------------------------------------------------- Sidebar */

.tth-sidebar .widget {
	border: 1px solid var(--tth-border);
	border-radius: var(--tth-radius, 0);
	margin-bottom: var(--tth-stack-md);
	padding: var(--tth-stack-md);
}

.widget-title {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.tth-sidebar ul,
.tth-footer-column ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tth-sidebar li,
.tth-footer-column li {
	border-bottom: 1px solid var(--tth-border);
	padding: 8px 0;
}

.tth-sidebar li:last-child,
.tth-footer-column li:last-child {
	border-bottom: 0;
}

/* ------------------------------------------------------------ Pagination */

.navigation.pagination {
	margin-top: var(--tth-section-gap);
	text-align: center;
}

.page-numbers {
	border: 2px solid var(--tth-border);
	display: inline-block;
	font-family: var(--tth-ff-heading);
	font-weight: 700;
	margin: 0 4px;
	padding: 10px 16px;
}

.page-numbers.current,
.page-numbers:hover {
	background: var(--tth-primary);
	border-color: var(--tth-primary);
	color: #fff;
	text-decoration: none;
}

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

.tth-footer {
	background: var(--tth-dark);
	color: rgba(255, 255, 255, 0.8);
	padding: var(--tth-section-gap) 0 var(--tth-stack-lg);
}

.tth-footer a {
	color: rgba(255, 255, 255, 0.85);
}

.tth-footer a:hover,
.tth-footer a:focus {
	color: #fff;
}

.tth-footer .widget-title {
	color: #fff;
}

.tth-footer-widgets {
	display: grid;
	gap: var(--tth-gutter);
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	margin-bottom: var(--tth-stack-lg);
}

.tth-footer-column li {
	border-bottom-color: rgba(255, 255, 255, 0.12);
}

.tth-footer-bottom {
	align-items: center;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	display: flex;
	flex-wrap: wrap;
	gap: var(--tth-stack-md);
	justify-content: space-between;
	padding-top: var(--tth-stack-lg);
}

.tth-copyright {
	font-size: 14px;
	margin: 0;
}

.tth-footer-menu {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tth-stack-md);
	list-style: none;
	margin: 0;
	padding: 0;
}

.tth-footer-menu a {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.tth-socials {
	display: flex;
	gap: var(--tth-stack-sm);
	list-style: none;
	margin: 0;
	padding: 0;
}

.tth-socials a {
	align-items: center;
	border: 2px solid rgba(255, 255, 255, 0.2);
	display: flex;
	font-size: 20px;
	height: 44px;
	justify-content: center;
	width: 44px;
}

.tth-socials a:hover {
	background: var(--tth-primary);
	border-color: var(--tth-primary);
}

/* ------------------------------------------------ Fremd-Plugins einpassen */

/* Passwortformular — vier Seiten der Website sind geschützt. */
.post-password-form {
	background: var(--tth-light-bg);
	border-left: 4px solid var(--tth-primary);
	padding: var(--tth-stack-lg);
}

.post-password-form input[type="password"] {
	background: #fff;
	border: 2px solid var(--tth-border);
	max-width: 320px;
	padding: 12px 14px;
}

/* Contact Form 7 */
.wpcf7-form p {
	margin-bottom: var(--tth-stack-md);
}

.wpcf7 .wpcf7-not-valid-tip {
	color: #ba1a1a;
	font-size: 14px;
}

.wpcf7 .wpcf7-response-output {
	border: 2px solid var(--tth-border);
	margin: var(--tth-stack-md) 0 0;
	padding: var(--tth-stack-md);
}

/* Instagram-Feed nicht über den Container hinauslaufen lassen. */
.tth-instagram-feed #sb_instagram {
	padding-bottom: 0 !important;
}

/* MailPoet */
.mailpoet_form {
	padding: 0 !important;
}

.tth-404 {
	text-align: center;
}

/* ------------------------------------------------------------ Animationen */

/* Sichtbar-werden beim Scrollen. Ohne JS bleibt alles sichtbar, weil die
   Startwerte erst über .tth-animate gesetzt werden. */
.tth-anim .tth-animate {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
	            transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}

.tth-anim .tth-animate.is-visible {
	opacity: 1;
	transform: none;
}

/* Karten in einer Reihe leicht versetzt einblenden. */
.tth-anim .tth-animate[data-delay="1"] { transition-delay: 0.08s; }
.tth-anim .tth-animate[data-delay="2"] { transition-delay: 0.16s; }
.tth-anim .tth-animate[data-delay="3"] { transition-delay: 0.24s; }
.tth-anim .tth-animate[data-delay="4"] { transition-delay: 0.32s; }
.tth-anim .tth-animate[data-delay="5"] { transition-delay: 0.40s; }

/* Hero: Titel und Untertitel fahren beim Laden ein. */
.tth-anim .tth-hero-title,
.tth-anim .tth-hero-subtitle,
.tth-anim .tth-hero-inner .tth-button {
	animation: tth-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.tth-anim .tth-hero-subtitle {
	animation-delay: 0.15s;
}

.tth-anim .tth-hero-inner .tth-button {
	animation-delay: 0.3s;
}

@keyframes tth-rise {
	from {
		opacity: 0;
		transform: translateY(28px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* Sehr langsamer Zoom auf dem Hero-Bild — erzeugt Bewegung ohne Ablenkung. */
.tth-anim .tth-hero.has-image {
	animation: tth-kenburns 24s ease-out both;
}

@keyframes tth-kenburns {
	from {
		background-size: 100% auto;
		background-size: cover;
		transform: scale(1);
	}
	to {
		transform: scale(1.06);
	}
}

/* Der Zoom darf das Bild nicht über die Sektion hinausschieben. */
.tth-hero {
	overflow: hidden;
}

/* Karten heben sich beim Überfahren minimal an — flach, kein Schatten. */
.tth-card,
.tth-member,
.tth-training-card {
	transition: border-color 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

.tth-card:hover,
.tth-member:hover {
	transform: translateY(-4px);
}

.tth-training-card:hover {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.32);
	transform: translateY(-4px);
}

.tth-member:hover {
	border-color: var(--tth-primary);
}

/* Bild in der Karte zieht beim Überfahren leicht an. */
.tth-card-media {
	overflow: hidden;
}

.tth-card-media img {
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.tth-card:hover .tth-card-media img {
	transform: scale(1.05);
}

/* Zahlen zählen hoch — der Startwert wird von JS gesetzt. */
.tth-fact-value {
	font-variant-numeric: tabular-nums;
}

/* Symbole im Training reagieren auf den Mauszeiger. */
.tth-training-icon {
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.tth-training-card:hover .tth-training-icon {
	transform: translateY(-4px) scale(1.08);
}

/* Social-Icons im Footer. */
.tth-socials a {
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.tth-socials a:hover {
	transform: translateY(-3px);
}

/* Wer im Betriebssystem weniger Bewegung wünscht, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
	.tth-anim .tth-animate,
	.tth-anim .tth-hero-title,
	.tth-anim .tth-hero-subtitle,
	.tth-anim .tth-hero-inner .tth-button,
	.tth-anim .tth-hero.has-image {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.tth-card:hover,
	.tth-member:hover,
	.tth-training-card:hover,
	.tth-socials a:hover,
	.tth-card:hover .tth-card-media img {
		transform: none;
	}

	* {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* ------------------------------------------------------------- Untermenüs */

/* Das Menü darf beliebig viele Punkte tragen und bricht bei Bedarf um. */
.tth-menu {
	flex-wrap: wrap;
	justify-content: flex-end;
}

.tth-menu li {
	position: relative;
}

/* Ebene 2 und 3 als Klapplisten. */
.tth-menu .sub-menu {
	background: var(--tth-white);
	border: 1px solid var(--tth-border);
	border-radius: var(--tth-radius, 0);
	left: 0;
	list-style: none;
	margin: 0;
	min-width: 220px;
	opacity: 0;
	padding: 8px 0;
	pointer-events: none;
	position: absolute;
	top: 100%;
	transform: translateY(6px);
	transition: opacity 0.18s ease, transform 0.18s ease;
	z-index: 120;
}

.tth-menu li:hover > .sub-menu,
.tth-menu li:focus-within > .sub-menu {
	opacity: 1;
	pointer-events: auto;
	transform: none;
}

/* Dritte Ebene klappt zur Seite auf. */
.tth-menu .sub-menu .sub-menu {
	left: 100%;
	top: -9px;
	transform: translateX(6px);
}

.tth-menu .sub-menu li:hover > .sub-menu,
.tth-menu .sub-menu li:focus-within > .sub-menu {
	transform: none;
}

/* Untermenü-Einträge sind immer dunkel, auch bei transparentem Header. */
.tth-menu .sub-menu a,
.has-transparent-header .tth-header:not(.is-stuck) .tth-menu .sub-menu a {
	color: var(--tth-dark);
	display: block;
	padding: 10px 16px;
	white-space: nowrap;
}

.tth-menu .sub-menu a::after {
	display: none;
}

.tth-menu .sub-menu a:hover,
.tth-menu .sub-menu a:focus {
	background: var(--tth-light-bg);
	color: var(--tth-primary);
}


/* Untermenüs am rechten Rand nach innen klappen. */
.tth-menu > li:last-child .sub-menu,
.tth-menu > li:nth-last-child(2) .sub-menu {
	left: auto;
	right: 0;
}

.tth-menu > li:last-child .sub-menu .sub-menu,
.tth-menu > li:nth-last-child(2) .sub-menu .sub-menu {
	left: auto;
	right: 100%;
}

/* -------------------------------------------------- Untermenüs auf Mobile */

.tth-mobile-menu .sub-menu {
	display: none;
	list-style: none;
	margin: 0;
	padding: 0 0 0 var(--tth-stack-md);
}

.tth-mobile-menu li.is-open > .sub-menu {
	display: block;
}

.tth-mobile-menu .menu-item-has-children > a {
	padding-right: 48px;
}

.tth-mobile-menu li {
	position: relative;
}

/* Aufklapp-Schalter, den das JS einhängt. */
.tth-submenu-toggle {
	background: none;
	border: 0;
	color: var(--tth-dark);
	cursor: pointer;
	height: 46px;
	padding: 0;
	position: absolute;
	right: 0;
	top: 0;
	width: 46px;
}

.tth-submenu-toggle::before {
	border-bottom: 2px solid currentColor;
	border-right: 2px solid currentColor;
	content: "";
	display: block;
	height: 8px;
	margin: 0 auto;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.2s ease;
	width: 8px;
}

.tth-mobile-menu li.is-open > .tth-submenu-toggle::before {
	transform: translateY(2px) rotate(-135deg);
}

/* Das mobile Menü darf lang werden, ohne die Seite zu sprengen. */
.tth-mobile-nav {
	max-height: calc(100vh - 68px);
	overflow-y: auto;
}

/* Footer-Menü ebenfalls mehrstufig nutzbar. */
.tth-footer-menu .sub-menu {
	display: flex;
	gap: var(--tth-stack-md);
	list-style: none;
	margin: 0 0 0 var(--tth-stack-md);
	padding: 0;
}

/* ------------------------------------------------- Sektions-Hintergründe */

/* Wechselnde Flächen trennen die Abschnitte — im Customizer je Sektion
   einstellbar. */

.tth-section.is-bg-white {
	background: var(--tth-white);
}

.tth-section.is-bg-light {
	background: var(--tth-light-bg);
}

/* Sehr zarte Tönung in der Primärfarbe. */
.tth-section.is-bg-tinted {
	background: var(--tth-primary-soft);
}

.tth-section.is-bg-dark,
.tth-section.is-dark {
	background: var(--tth-dark);
	color: #fff;
}

.tth-section.is-bg-accent {
	background: var(--tth-primary);
	color: #fff;
}

.tth-section.is-bg-dark h1,
.tth-section.is-bg-dark h2,
.tth-section.is-bg-dark h3,
.tth-section.is-bg-accent h1,
.tth-section.is-bg-accent h2,
.tth-section.is-bg-accent h3 {
	color: #fff;
}

/* Karten auf dunklem oder farbigem Grund brauchen helle Rahmen. */
.tth-section.is-bg-dark .tth-card,
.tth-section.is-bg-accent .tth-card,
.tth-section.is-bg-dark .tth-member,
.tth-section.is-bg-accent .tth-member {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.24);
}

.tth-section.is-bg-dark .tth-card-title a,
.tth-section.is-bg-accent .tth-card-title a,
.tth-section.is-bg-dark .tth-card-excerpt,
.tth-section.is-bg-accent .tth-card-excerpt,
.tth-section.is-bg-dark .tth-post-meta,
.tth-section.is-bg-accent .tth-post-meta,
.tth-section.is-bg-dark .tth-member-desc,
.tth-section.is-bg-accent .tth-member-desc {
	color: #fff;
}

.tth-section.is-bg-accent .tth-member-role,
.tth-section.is-bg-accent .tth-card-link,
.tth-section.is-bg-dark .tth-card-link {
	color: #fff;
}

.tth-section.is-bg-dark .tth-member-role {
	color: var(--tth-primary);
}

/* Initialen-Platzhalter auf farbigem Grund. */
.tth-section.is-bg-dark .tth-member-initials,
.tth-section.is-bg-accent .tth-member-initials {
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
}

/* Zahlenzeile und Trennlinien anpassen. */
.tth-section.is-bg-dark .tth-facts,
.tth-section.is-bg-accent .tth-facts {
	border-color: rgba(255, 255, 255, 0.24);
}

.tth-section.is-bg-accent .tth-fact-value {
	color: #fff;
}

.tth-section.is-bg-dark .tth-about-text[lang="en"],
.tth-section.is-bg-accent .tth-about-text[lang="en"] {
	border-color: rgba(255, 255, 255, 0.24);
}

/* Buttons auf farbigem Grund invertieren. */
.tth-section.is-bg-accent .tth-button-ghost {
	border-color: #fff;
	color: #fff;
}

.tth-section.is-bg-accent .tth-button-ghost:hover {
	background: #fff;
	color: var(--tth-primary);
}

/* Trainingskarten auf hellem Grund bekommen dunkle Rahmen. */
.tth-section-training.is-bg-white .tth-training-card,
.tth-section-training.is-bg-light .tth-training-card,
.tth-section-training.is-bg-tinted .tth-training-card {
	border-color: var(--tth-border);
}

.tth-section-training.is-bg-white .tth-training-text,
.tth-section-training.is-bg-light .tth-training-text,
.tth-section-training.is-bg-tinted .tth-training-text {
	color: var(--tth-text);
}

.tth-section-training.is-bg-white .tth-training-card:hover,
.tth-section-training.is-bg-light .tth-training-card:hover,
.tth-section-training.is-bg-tinted .tth-training-card:hover {
	background: rgba(0, 0, 0, 0.02);
	border-color: var(--tth-primary);
}

/* Newsletter erbt jetzt die Auswahl statt einer festen Fläche. */
.tth-section-newsletter {
	background: none;
}

/* ------------------------------------------------------- Mitmachen & FAQ */

.tth-section-lead {
	font-size: 18px;
	line-height: 28px;
	margin: var(--tth-stack-md) auto 0;
	max-width: 62ch;
}

/* Nummerierte Schritte — der Einstiegspfad für Interessenten. */
.tth-steps {
	counter-reset: tth-step;
	display: grid;
	gap: var(--tth-gutter);
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.tth-step {
	background: var(--tth-white);
	border: 1px solid var(--tth-border);
	border-radius: var(--tth-radius, 0);
	padding: var(--tth-stack-lg);
	position: relative;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.tth-step:hover {
	border-color: var(--tth-primary);
	transform: translateY(-4px);
}

.tth-step-number {
	color: var(--tth-primary);
	display: block;
	font-family: var(--tth-ff-heading);
	font-size: 48px;
	font-weight: 700;
	line-height: 1;
	margin-bottom: var(--tth-stack-md);
	opacity: 0.35;
}

.tth-step-title {
	font-size: 20px;
	font-weight: 600;
	letter-spacing: 0.02em;
	margin-bottom: var(--tth-stack-sm);
	text-transform: uppercase;
}

.tth-step-text {
	font-size: 16px;
	line-height: 26px;
	margin: 0;
}

.tth-join-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tth-stack-md);
	justify-content: center;
	margin-top: var(--tth-stack-lg);
}

/* Fragen als aufklappbare Zeilen — ohne JavaScript. */
.tth-faq-list {
	margin: 0 auto;
	max-width: 800px;
}

.tth-faq-item {
	border-bottom: 1px solid var(--tth-border);
}

.tth-faq-item:first-child {
	border-top: 1px solid var(--tth-border);
}

.tth-faq-question {
	cursor: pointer;
	display: flex;
	font-family: var(--tth-ff-heading);
	font-size: 18px;
	font-weight: 600;
	gap: var(--tth-stack-md);
	justify-content: space-between;
	list-style: none;
	padding: 20px 0;
	transition: color 0.18s ease;
}

.tth-faq-question::-webkit-details-marker {
	display: none;
}

.tth-faq-question::after {
	border-bottom: 2px solid currentColor;
	border-right: 2px solid currentColor;
	content: "";
	flex-shrink: 0;
	height: 10px;
	margin-top: 6px;
	transform: rotate(45deg);
	transition: transform 0.25s ease;
	width: 10px;
}

.tth-faq-item[open] .tth-faq-question {
	color: var(--tth-primary);
}

.tth-faq-item[open] .tth-faq-question::after {
	transform: rotate(-135deg);
}

.tth-faq-answer {
	font-size: 16px;
	line-height: 26px;
	padding-bottom: 20px;
}

.tth-faq-answer p:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------- Optik: einladender machen */

/* Größere Display-Typo im Hero, mit weichem Farbschleier statt flachem
   Schwarz — das Bild bleibt lesbar und wirkt lebendiger. */
.tth-hero-overlay {
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.55) 0%,
		rgba(0, 0, 0, 0.25) 45%,
		rgba(23, 23, 23, 0.85) 100%
	);
}

.tth-hero-title {
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

.tth-hero-subtitle {
	font-size: 20px;
	letter-spacing: 0.04em;
	opacity: 0.95;
}

/* Roter Strich unter der Sektionsüberschrift — Wiedererkennung. */
.tth-section-title::after {
	background: var(--tth-primary);
	content: "";
	display: block;
	height: 4px;
	margin: var(--tth-stack-md) auto 0;
	width: 56px;
}

.tth-section.is-bg-accent .tth-section-title::after {
	background: #fff;
}

/* Vorstandsfotos größer und mit farbigem Ring beim Überfahren. */
.tth-member-photo {
	width: 148px;
}

.tth-member-initials {
	height: 148px;
	width: 148px;
}

.tth-member-photo img {
	border: 3px solid transparent;
	transition: border-color 0.25s ease, transform 0.25s ease;
}

.tth-member:hover .tth-member-photo img {
	border-color: var(--tth-primary);
	transform: scale(1.04);
}

/* Trainingskarten bekommen einen Farbstreifen der Disziplin. */
.tth-training-card {
	border-top-width: 4px;
	position: relative;
}

.tth-training-card.tth-accent-1 {
	border-top-color: var(--tth-accent-1);
}

.tth-training-card.tth-accent-2 {
	border-top-color: var(--tth-accent-2);
}

.tth-training-card.tth-accent-3 {
	border-top-color: var(--tth-primary);
}

/* Zahlenzeile prominenter. */
.tth-fact-value {
	font-size: 56px;
	line-height: 64px;
}

/* Beitragskarten: Titel darf zwei Zeilen atmen, Bild etwas höher. */
.tth-card-media img,
.tth-card-placeholder {
	aspect-ratio: 3 / 2;
}

.tth-card-body {
	padding: var(--tth-stack-md) var(--tth-stack-md) var(--tth-stack-lg);
}

/* Kontaktbereich einladender: Mailadresse als kräftiger Block. */
.tth-contact-mail {
	background: var(--tth-primary);
	color: #fff;
	font-size: 18px;
	margin-top: var(--tth-stack-md);
	padding: 16px 20px;
}

.tth-contact-mail:hover,
.tth-contact-mail:focus {
	background: var(--tth-primary-dark);
	color: #fff;
	text-decoration: none;
}

.tth-section.is-bg-accent .tth-contact-mail {
	background: #fff;
	color: var(--tth-primary);
}

@media (max-width: 782px) {
	.tth-fact-value {
		font-size: 40px;
		line-height: 48px;
	}

	.tth-step-number {
		font-size: 36px;
	}

	.tth-hero-subtitle {
		font-size: 17px;
	}
}

/* ------------------------------------------------------------- Verdichtung */

/* Die Abstände kommen aus dem Dichte-Regler im Customizer. Die Werte hier
   sind die Rückfallebene, falls kein Inline-CSS geladen wird. */
:root {
	--tth-card-pad: 28px;
}

.tth-section-head {
	margin-bottom: var(--tth-stack-lg);
}

.tth-section-title::after {
	margin-top: 12px;
}

.tth-section-lead {
	margin-top: 12px;
}

/* Karten flacher: Bild im 16:9-Schnitt statt 3:2. */
.tth-card-media img,
.tth-card-placeholder {
	aspect-ratio: 16 / 9;
}

.tth-card-body {
	gap: 6px;
	padding: 18px 18px 20px;
}

.tth-card-title {
	font-size: 17px;
	line-height: 24px;
	margin-bottom: 4px;
}

.tth-post-meta {
	margin-bottom: 6px;
}

.tth-card-excerpt {
	margin-bottom: 12px;
}

/* Vorstand: kleinere Portraits, weniger Innenabstand. */
.tth-member {
	padding: var(--tth-card-pad) 18px;
}

.tth-member-photo,
.tth-member-initials {
	height: 104px;
	width: 104px;
}

.tth-member-initials {
	font-size: 28px;
}

.tth-member-photo {
	margin-bottom: 14px;
}

.tth-member-desc {
	font-size: 14px;
	line-height: 21px;
}

/* Training und Schritte kompakter. */
.tth-training-card,
.tth-step {
	padding: var(--tth-card-pad) 22px;
}

.tth-training-icon {
	font-size: 32px;
	margin-bottom: 12px;
}

.tth-training-title {
	font-size: 20px;
	margin-bottom: 6px;
}

.tth-training-text {
	font-size: 15px;
	line-height: 24px;
}

.tth-step-number {
	font-size: 34px;
	margin-bottom: 10px;
}

.tth-step-text {
	font-size: 15px;
	line-height: 24px;
}

/* Zahlenzeile kleiner. */
.tth-facts {
	margin-bottom: var(--tth-stack-lg);
	padding: var(--tth-stack-lg) 0;
}

.tth-fact-value {
	font-size: 42px;
	line-height: 48px;
}

/* Über uns: engere Zeilen, damit die Textblöcke nicht so lang werden. */
.tth-prose {
	font-size: 17px;
	line-height: 26px;
}

.tth-about-text p:last-child {
	margin-bottom: 0;
}

/* Hero: weniger Polsterung, Titel etwas kleiner. */
.tth-hero-inner {
	padding: 96px var(--tth-page-margin) 64px;
}

.tth-hero-title {
	font-size: 56px;
	line-height: 62px;
}

.tth-hero-subtitle {
	margin-bottom: 24px;
}

/* FAQ-Zeilen enger. */
.tth-faq-question {
	font-size: 17px;
	padding: 16px 0;
}

.tth-faq-answer {
	font-size: 15px;
	line-height: 24px;
	padding-bottom: 16px;
}

/* Seitenkopf und Footer. */
.tth-page-head {
	padding: var(--tth-stack-lg) 0;
}

.tth-footer {
	padding: var(--tth-stack-lg) 0 20px;
}

.tth-footer-widgets {
	margin-bottom: var(--tth-stack-lg);
}

@media (max-width: 782px) {
	.tth-hero-title {
		font-size: 34px;
		line-height: 40px;
	}

	.tth-hero-inner {
		padding: 84px var(--tth-page-margin) 48px;
	}

	.tth-fact-value {
		font-size: 34px;
		line-height: 40px;
	}

	.tth-member-photo,
	.tth-member-initials {
		height: 88px;
		width: 88px;
	}
}

/* ------------------------------------------- Korrekturen an den Untermenüs */


.tth-menu > li > a::before {
	background: var(--tth-primary);
	bottom: 0;
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	transition: width 0.2s ease;
	width: 0;
}

.tth-menu > li > a {
	position: relative;
}

.tth-menu > li > a:hover::before,
.tth-menu > li > a:focus::before,
.tth-menu > li.current-menu-item > a::before {
	width: 100%;
}

/* Pfeil rechts vom Text. */

.tth-menu .menu-item-has-children > a::after {
	border-bottom: 2px solid currentColor;
	border-right: 2px solid currentColor;
	content: "";
	display: inline-block;
	height: 6px;
	margin-left: 8px;
	position: static;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.2s ease;
	vertical-align: middle;
	width: 6px;
}

.tth-menu .menu-item-has-children:hover > a::after,
.tth-menu .menu-item-has-children:focus-within > a::after {
	transform: translateY(1px) rotate(-135deg);
}

/* Pfeil in tieferen Ebenen zeigt zur Seite. */
.tth-menu .sub-menu .menu-item-has-children > a::after {
	transform: rotate(-45deg);
}

.tth-menu .sub-menu .menu-item-has-children:hover > a::after {
	transform: rotate(-45deg);
}

/* Die Lücke zwischen Link und Untermenü überbrücken, damit das Menü beim
   Hinüberfahren nicht zuklappt. */
.tth-menu > li {
	padding-bottom: 4px;
}

.tth-menu .sub-menu {
	margin-top: 0;
	padding-top: 10px;
	top: 100%;
}

.tth-menu .sub-menu::before {
	content: "";
	height: 14px;
	left: 0;
	position: absolute;
	right: 0;
	top: -10px;
}

/* Untermenü optisch vom Header abheben. */
.tth-menu .sub-menu {
	border-top: 3px solid var(--tth-primary);
	padding-bottom: 8px;
}

/* Dritte Ebene sitzt seitlich, ohne Überbrückung nach oben. */
.tth-menu .sub-menu .sub-menu {
	border-top: 0;
	border-left: 3px solid var(--tth-primary);
	padding-top: 8px;
	top: -11px;
}

.tth-menu .sub-menu .sub-menu::before {
	bottom: 0;
	height: auto;
	left: -12px;
	right: auto;
	top: 0;
	width: 12px;
}

/* ------------------------------------------------ Raster enger stellen */

/* 5 Vorstandsmitglieder passen bei 1170 px Container in eine Reihe:
   5 x 180 + 4 x 30 = 1020 px. Vorher brach die fünfte Karte um und die
   Sektion wurde doppelt so hoch. */
.tth-board-grid {
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 20px;
}

.tth-training-grid {
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px;
}

.tth-steps {
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 20px;
}

.tth-news-grid {
	gap: 20px;
}

/* Bei sehr schmalen Fenstern zwei Vorstandskarten nebeneinander statt
   einer — spart auf dem Handy viel Scrollweg. */
@media (max-width: 600px) {
	.tth-board-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	.tth-member {
		padding: 20px 12px;
	}

	.tth-member-photo,
	.tth-member-initials {
		height: 72px;
		width: 72px;
	}

	.tth-member-name {
		font-size: 15px;
	}

	.tth-member-desc {
		font-size: 13px;
		line-height: 19px;
	}
}

/* Über uns: Faktenzeile schlanker, Texte enger. */
.tth-facts {
	padding: 20px 0;
	margin-bottom: 24px;
}

.tth-about-columns.is-bilingual {
	gap: 40px;
}

.tth-about-text {
	font-size: 16px;
	line-height: 25px;
}

/* Instagram- und Newsletter-Sektion brauchen weniger Luft. */
.tth-section-instagram .tth-section-head,
.tth-section-newsletter .tth-section-head {
	margin-bottom: 20px;
}

/* --------------------------------------------- Angebrochene Reihen zentriert */

/* Grid füllt eine angebrochene letzte Reihe linksbündig auf — bei 7 Personen
   stünden unten 2 Karten am linken Rand. Flexbox mit justify-content
   zentriert stattdessen jede Reihe. */
.tth-board-grid,
.tth-training-grid,
.tth-steps,
.tth-news-grid,
.tth-facts {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.tth-member {
	flex: 1 1 180px;
	max-width: 230px;
}

.tth-training-card {
	flex: 1 1 280px;
	max-width: 400px;
}

.tth-step {
	flex: 1 1 240px;
	max-width: 380px;
}

.tth-news-grid .tth-card {
	flex: 1 1 260px;
	max-width: 340px;
}

.tth-fact {
	flex: 1 1 140px;
	max-width: 260px;
}

/* Auf schmalen Bildschirmen zwei Vorstandskarten je Reihe. */
@media (max-width: 600px) {
	.tth-board-grid {
		gap: 12px;
	}

	.tth-member {
		flex: 1 1 calc(50% - 12px);
		max-width: calc(50% - 6px);
	}

	.tth-news-grid .tth-card,
	.tth-training-card,
	.tth-step {
		flex: 1 1 100%;
		max-width: 100%;
	}
}

/* Das Archiv behält feste Spalten aus dem Customizer. */
.tth-archive-grid {
	display: grid;
}

/* -------------------------------------------- Newsletter-Sektion ausrichten */

/* Die Sektion ist zweispaltig: Text links, Formular rechts. Der zentrierte
   Strich unter der Überschrift passte dazu nicht. */
.tth-section-newsletter .tth-section-head {
	text-align: left;
}

.tth-section-newsletter .tth-section-title::after {
	margin-left: 0;
	margin-right: 0;
}

.tth-newsletter-text .tth-section-title {
	margin-bottom: 0;
}

.tth-newsletter-inner {
	align-items: center;
}

.tth-newsletter-form {
	width: 100%;
}

/* Auf schmalen Bildschirmen wieder zentriert, weil dort untereinander. */
@media (max-width: 899px) {
	.tth-section-newsletter .tth-section-head {
		text-align: center;
	}

	.tth-section-newsletter .tth-section-title::after {
		margin-left: auto;
		margin-right: auto;
	}
}

/* Kontakt: Überschrift zentriert, Inhalt zweispaltig — der Fließtext darunter
   bleibt linksbündig, das ist gewollt. */
.tth-contact-info .tth-prose {
	text-align: left;
}

/* ==========================================================================
   Menü — abschließende, maßgebliche Regeln
   Die Unterlinie liegt auf ::before (absolut positioniert), der Pfeil auf
   ::after (im Textfluss). Vorher lagen beide auf ::before und überlagerten
   sich zu einem roten Kasten.
   ========================================================================== */

.tth-menu > li > a {
	position: relative;
}

/* Wachsende Unterlinie */
.tth-menu > li > a::before {
	background: var(--tth-primary);
	bottom: 0;
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	transition: width 0.2s ease;
	width: 0;
}

.tth-menu > li > a:hover::before,
.tth-menu > li > a:focus::before,
.tth-menu > li.current-menu-item > a::before {
	width: 100%;
}

/* Untermenü-Links tragen weder Linie noch Kasten. */
.tth-menu .sub-menu a::before {
	content: none;
}

/* Pfeil — ausschließlich auf ::after, rechts vom Text. */
.tth-menu .menu-item-has-children > a::after {
	border-bottom: 2px solid currentColor;
	border-right: 2px solid currentColor;
	content: "";
	display: inline-block;
	height: 6px;
	margin-left: 8px;
	position: static;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.2s ease;
	vertical-align: middle;
	width: 6px;
}

.tth-menu > li.menu-item-has-children:hover > a::after,
.tth-menu > li.menu-item-has-children:focus-within > a::after {
	transform: translateY(1px) rotate(-135deg);
}

/* In tieferen Ebenen zeigt der Pfeil nach rechts und dreht sich nicht. */
.tth-menu .sub-menu .menu-item-has-children > a::after {
	margin-left: auto;
	transform: rotate(-45deg);
}

.tth-menu .sub-menu .menu-item-has-children:hover > a::after {
	transform: rotate(-45deg);
}

/* Untermenü-Einträge: Text links, Pfeil rechts. */
.tth-menu .sub-menu a {
	align-items: center;
	display: flex;
	gap: var(--tth-stack-md);
	justify-content: space-between;
}

/* ================================================== Zahlenzeile hervorheben */

/* Die drei Kennzahlen sind das stärkste Argument der Seite — sie bekommen
   einen eigenen dunklen Block statt nur zweier Trennlinien. */
.tth-facts {
	background: var(--tth-dark);
	border: 0;
	border-radius: var(--tth-radius, 0);
	gap: 0;
	margin-bottom: var(--tth-stack-lg);
	overflow: hidden;
	padding: 0;
}

.tth-fact {
	flex: 1 1 160px;
	max-width: none;
	padding: 32px 20px;
	position: relative;
}

/* Trennstriche zwischen den Zahlen, nicht am Rand. */
.tth-fact + .tth-fact::before {
	background: rgba(255, 255, 255, 0.16);
	bottom: 24px;
	content: "";
	left: 0;
	position: absolute;
	top: 24px;
	width: 1px;
}

.tth-fact-value {
	color: var(--tth-primary);
	font-size: 60px;
	line-height: 64px;
	margin-bottom: 4px;
}

.tth-fact-label {
	color: #fff;
	font-size: 13px;
	letter-spacing: 0.08em;
	opacity: 0.85;
}

/* Auf hellen Sektionen bleibt der Block dunkel — das ist der Kontrast. */
.tth-section.is-bg-dark .tth-facts {
	background: rgba(255, 255, 255, 0.06);
}

.tth-section.is-bg-accent .tth-facts {
	background: rgba(0, 0, 0, 0.22);
}

.tth-section.is-bg-accent .tth-fact-value {
	color: #fff;
}

@media (max-width: 600px) {
	/* Zwei Zahlen nebeneinander, damit der Block nicht zur Säule wird. */
	.tth-fact {
		flex: 1 1 calc(50% - 1px);
		padding: 22px 12px;
	}

	.tth-fact-value {
		font-size: 40px;
		line-height: 44px;
	}

	.tth-fact-label {
		font-size: 12px;
	}

	/* Trennstrich nur zwischen Spalten, nicht über den Umbruch hinweg. */
	.tth-fact + .tth-fact::before {
		bottom: 14px;
		top: 14px;
	}
}

/* ------------------------------------------------ Kein seitliches Wischen */

/* Nur auf body, nie auf html: overflow-x auf dem Wurzelelement macht die
   Seite unscrollbar und bricht damit auch jeden Ankersprung. Auf body
   verhindert clip weiterhin, dass ein zu breites Kind die Seite verschiebt,
   und anders als hidden bricht es position:sticky nicht. */
body {
	max-width: 100%;
	overflow-x: clip;
}

/* Breite Inhalte scrollen in sich selbst statt die Seite zu verschieben. */
.tth-prose table,
.tth-prose pre,
.tth-page-content table,
.tth-page-content pre {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

.tth-prose img,
.tth-page-content img,
.tth-single-main img {
	height: auto;
	max-width: 100%;
}

/* Die Admin-Leiste gehört WordPress — sie darf den Header nicht verdecken. */
.admin-bar .tth-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .tth-header {
		top: 46px;
	}
}

.admin-bar.has-transparent-header .tth-header {
	top: 32px;
}

@media (max-width: 600px) {
	/* Unterhalb 600px klebt die WordPress-Leiste nicht mehr oben. */
	.admin-bar.has-transparent-header .tth-header,
	.admin-bar .tth-header {
		top: 0;
	}
}

/* ============================================== Sprungmarken im Hauptmenü */

/* Menüpunkte dürfen auf #vorstand, #training, #kontakt usw. zeigen. Damit
   die Überschrift nicht hinter dem fixierten Header landet, bekommt jedes
   Sprungziel oben Luft. */
:root {
	--tth-anchor-offset: 100px;
}

[id],
.tth-section[id],
.tth-hero[id] {
	scroll-margin-top: var(--tth-anchor-offset);
}

@media (max-width: 900px) {
	:root {
		--tth-anchor-offset: 80px;
	}
}

/* Mit eingeblendeter WordPress-Leiste zusätzlich Platz. */
.admin-bar {
	--tth-anchor-offset: 132px;
}

@media (max-width: 900px) {
	.admin-bar {
		--tth-anchor-offset: 126px;
	}
}

/* Sanft springen, außer bei reduzierter Bewegung. */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* Menüpunkt, dessen Sektion gerade sichtbar ist. */
.tth-menu > li > a.is-current-section::before {
	width: 100%;
}

.tth-mobile-menu a.is-current-section {
	color: var(--tth-primary);
}