/* =========================================================================
   TeambuildingFilm - Marke und Startseite

   Alle Werte stammen aus der bestehenden Website: #b1281e ist die dominante
   Farbe des Logos, #c1443d die Markenfarbe des Themes, DM Sans laedt Astra
   bereits.

   Zwei wiederkehrende Stolpersteine, die die Selektoren hier erklaeren:
   - Astra setzt per Inline-CSS ".entry-content > .wp-block-group{padding:...}"
     und "margin-bottom:0" auf Spaltenbloecke. Gleiche Spezifitaet und
     spaeteres Laden ziehen das zurueck, ohne !important.
   - WordPress zentriert direkte Kinder eines "constrained" Blocks mit
     "margin-left:auto !important". Absaetze mit begrenzter Breite liegen
     deshalb in einer Huelle mit normalem Fluss-Layout (.tbf-notewrap).
   ========================================================================= */

:root {
	--tbf-brand: #b1281e;          /* Logo-Rot, 6,6:1 auf Weiss */
	--tbf-cta: #c1443d;            /* Hauptaktion, Markenfarbe des Themes */
	--tbf-cta-hover: #a5352f;
	--tbf-brand-soft: #ffb0a2;     /* heller Akzent auf dunklem Grund, 9,2:1 */
	--tbf-ink: #161f1d;            /* dunkler Grund, filmisch statt hart schwarz */
	--tbf-on-dark: #e7ede8;
	--tbf-on-dark-muted: #b3c1ba;
	--tbf-hairline: #303c38;
	--tbf-paper: #f6f3ec;
	--tbf-surface: #fffdf8;
	--tbf-muted: #57645e;
	--tbf-line: #dce0d7;
	--tbf-wrap: 1240px;
}

html {
	scroll-padding-top: 110px;
}

.tbf-anchor {
	display: block;
	height: 0;
	overflow: hidden;
}

/* ------------------------------------------------------ Grundbausteine -- */

.entry-content > .tbf-section {
	padding: 96px 24px 100px;
	margin: 0;
	background: var(--tbf-surface);
}

.tbf-section > .wp-block-group__inner-container {
	width: min(var(--tbf-wrap), 100%);
	margin-inline: auto;
}

.tbf-eyebrow {
	font-size: .75rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--tbf-brand);
	margin: 0 0 20px;
}

.tbf-h2 {
	font-size: clamp(2rem, 4vw, 3.4rem);
	line-height: 1.08;
	letter-spacing: -.04em;
	font-weight: 700;
	color: var(--tbf-ink);
	margin: 0;
}

.tbf-section .tbf-sectionhead {
	gap: 70px;
	margin-bottom: 56px;
}

.tbf-sectionhead__text {
	color: var(--tbf-muted);
	font-size: .98rem;
	line-height: 1.7;
	max-width: 460px;
	margin: 0;
}

.tbf-notewrap {
	margin-top: 36px;
}

.tbf-note {
	margin: 0;
	padding-top: 22px;
	border-top: 1px solid var(--tbf-line);
	font-size: .82rem;
	line-height: 1.65;
	color: var(--tbf-muted);
	max-width: 780px;
}

.tbf-note strong {
	color: var(--tbf-ink);
	font-weight: 700;
}

/* Buttons: eine Hauptaktion, eine ruhige Zweitaktion */
.tbf-hero__actions .wp-block-button__link,
.tbf-actions .wp-block-button__link {
	min-height: 52px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 24px;
	border-radius: 8px;
	font-size: .92rem;
	font-weight: 700;
	line-height: 1.3;
	border: 1px solid transparent;
	text-transform: none;
	letter-spacing: 0;
}

.tbf-btn--primary .wp-block-button__link {
	background: var(--tbf-cta);
	color: #fff;
}

.tbf-btn--primary .wp-block-button__link:hover,
.tbf-btn--primary .wp-block-button__link:focus {
	background: var(--tbf-cta-hover);
	color: #fff;
}

.tbf-btn--ghost .wp-block-button__link {
	background: transparent;
	border-color: #5d6c66;
	color: var(--tbf-on-dark);
}

.tbf-btn--ghost .wp-block-button__link:hover,
.tbf-btn--ghost .wp-block-button__link:focus {
	background: transparent;
	border-color: var(--tbf-on-dark);
	color: #fff;
}

.tbf-section .tbf-actions {
	margin-top: 48px;
}

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

.entry-content > .tbf-hero {
	background: var(--tbf-ink);
	color: var(--tbf-on-dark);
	/* Der Header liegt transparent ueber dem Hero. Der obere Abstand haelt
	   Kategorie und Ueberschrift darunter frei. */
	padding: 190px 24px 76px;
	margin: 0;
}

.tbf-hero > .wp-block-group__inner-container {
	width: min(var(--tbf-wrap), 100%);
	margin-inline: auto;
}

.tbf-hero__grid {
	gap: 60px;
	align-items: center;
}

.tbf-hero .tbf-eyebrow {
	color: var(--tbf-brand-soft);
	margin-bottom: 22px;
}

.tbf-hero__title {
	font-size: clamp(2.6rem, 5.4vw, 5rem);
	line-height: 1.02;
	letter-spacing: -.045em;
	font-weight: 700;
	color: var(--tbf-on-dark);
	margin: 0;
}

.tbf-hero__title em {
	font-style: normal;
	color: var(--tbf-brand-soft);
}

.tbf-hero__lead {
	margin: 26px 0 0;
	max-width: 480px;
	font-size: 1.03rem;
	line-height: 1.68;
	color: #cdd8d1;
}

.tbf-hero__actions {
	margin-top: 32px;
	gap: 14px;
}

.tbf-hero__note {
	margin: 20px 0 0;
	max-width: 460px;
	font-size: .81rem;
	line-height: 1.55;
	color: var(--tbf-on-dark-muted);
}

.tbf-hero__shot {
	margin: 0;
	position: relative;
}

.tbf-hero__shot img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: 50% 45%;
	border-radius: 20px;
	display: block;
}

.tbf-hero__shot figcaption {
	background: var(--tbf-surface);
	border-radius: 12px;
	padding: 18px 22px;
	margin: -34px 18px 0;
	position: relative;
	font-size: .75rem;
	line-height: 1.55;
	color: var(--tbf-muted);
	box-shadow: 0 16px 40px rgba(8, 14, 12, .28);
	text-align: left;
}

.tbf-hero__shot figcaption strong {
	display: block;
	font-size: 1.12rem;
	line-height: 1.3;
	letter-spacing: -.02em;
	font-weight: 700;
	color: var(--tbf-ink);
	margin-bottom: 6px;
}

.tbf-hero__meta {
	width: min(var(--tbf-wrap), 100%);
	margin: 52px auto 0;
	padding-top: 24px;
	border-top: 1px solid var(--tbf-hairline);
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	font-size: .75rem;
	letter-spacing: .03em;
	color: var(--tbf-on-dark-muted);
}

.tbf-hero__meta span::before {
	content: '\2022';
	color: var(--tbf-brand-soft);
	margin-right: 10px;
}

/* ------------------------------------------- Kundenstimme unter dem Hero */

.entry-content > .tbf-voice {
	background: var(--tbf-surface);
	border-bottom: 1px solid var(--tbf-line);
	padding: 30px 24px 32px;
	margin: 0;
	font-style: normal;
	border-left: 0;
}

.tbf-voice p {
	width: min(var(--tbf-wrap), 100%);
	margin: 0 auto;
	font-size: clamp(1.15rem, 2.1vw, 1.6rem);
	line-height: 1.35;
	letter-spacing: -.025em;
	font-weight: 500;
	color: var(--tbf-ink);
	font-style: normal;
}

.tbf-voice cite {
	display: block;
	width: min(var(--tbf-wrap), 100%);
	margin: 10px auto 0;
	font-style: normal;
	font-size: .82rem;
	color: var(--tbf-muted);
	text-align: left;
}

/* ----------------------------------------------- Das Erlebnis: Bausteine */

.tbf-section .tbf-cards {
	gap: 44px;
	margin-bottom: 0;
}

.tbf-card {
	border-top: 1px solid #c3cdc2;
	padding-top: 24px;
}

.tbf-card__num {
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--tbf-brand);
	margin: 0 0 20px;
}

.tbf-card__title {
	font-size: 1.3rem;
	line-height: 1.25;
	letter-spacing: -.025em;
	font-weight: 700;
	margin: 0 0 14px;
	max-width: 260px;
}

.tbf-card p {
	margin: 0;
	font-size: .93rem;
	line-height: 1.68;
	color: var(--tbf-muted);
}

/* -------------------------------------------------- Einblicke vom Dreh -- */

.entry-content > .tbf-einblicke {
	background: var(--tbf-paper);
}

.tbf-film {
	margin: 0;
}

/* Kein Autoplay, kein Ton ohne Zutun: erst das Startbild, dann der Film. */
.tbf-film video {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	display: block;
	border-radius: 20px;
	background: #111a18;
}

.tbf-film figcaption,
.tbf-shot figcaption {
	margin-top: 16px;
	font-size: .78rem;
	line-height: 1.6;
	color: var(--tbf-muted);
	text-align: left;
}

.tbf-film figcaption strong {
	display: block;
	font-size: 1rem;
	color: var(--tbf-ink);
	font-weight: 700;
	letter-spacing: -.015em;
	margin-bottom: 5px;
}

.tbf-einblicke .tbf-transkript {
	margin: 22px 0 0;
	border-top: 1px solid var(--tbf-line);
	padding-top: 18px;
}

.tbf-transkript summary {
	cursor: pointer;
	font-size: .84rem;
	font-weight: 700;
	color: var(--tbf-brand);
	list-style: none;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 4px 0;
}

.tbf-transkript summary::-webkit-details-marker {
	display: none;
}

.tbf-transkript summary::before {
	content: '+';
	font-size: 1.15rem;
	font-weight: 400;
	line-height: 1;
}

.tbf-transkript[open] summary::before {
	content: '\2212';
}

.tbf-transkript p {
	margin: 14px 0 0;
	max-width: 780px;
	font-size: .9rem;
	line-height: 1.72;
	color: var(--tbf-muted);
}

.tbf-einblicke .tbf-gallery {
	gap: 22px;
	margin-top: 40px;
	margin-bottom: 0;
}

.tbf-shot {
	margin: 0;
}

.tbf-shot img {
	width: 100%;
	height: 340px;
	object-fit: cover;
	border-radius: 16px;
	display: block;
}

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

.tbf-section .tbf-steps {
	gap: 50px;
	margin-bottom: 0;
}

.tbf-step {
	border-top: 1px solid #c3cdc2;
	padding-top: 22px;
}

.tbf-step__num {
	font-size: 3.4rem;
	line-height: 1;
	letter-spacing: -.06em;
	color: #a9b7a9;
	font-weight: 500;
	margin: 0 0 26px;
}

.tbf-step__title {
	font-size: 1.45rem;
	line-height: 1.2;
	letter-spacing: -.03em;
	font-weight: 700;
	margin: 0 0 16px;
}

.tbf-step p {
	margin: 0;
	font-size: .94rem;
	line-height: 1.68;
	color: var(--tbf-muted);
}

/* ---------------------------------------------------- Format erklaeren -- */

.entry-content > .tbf-format {
	background: var(--tbf-ink);
	color: var(--tbf-on-dark);
}

.tbf-format .tbf-eyebrow {
	color: var(--tbf-brand-soft);
}

.tbf-format .tbf-h2 {
	color: var(--tbf-on-dark);
}

.tbf-format .tbf-explain {
	gap: 80px;
	margin-bottom: 0;
	align-items: center;
}

.tbf-format p {
	color: #cdd8d1;
	font-size: .99rem;
	line-height: 1.72;
}

.tbf-distinction {
	border-left: 3px solid var(--tbf-brand-soft);
	padding: 4px 0 4px 20px;
	margin-top: 28px;
	font-weight: 600;
	color: var(--tbf-on-dark);
}

.tbf-format .tbf-note {
	border-top-color: var(--tbf-hairline);
	color: var(--tbf-on-dark-muted);
}

.tbf-format .tbf-note strong {
	color: var(--tbf-on-dark);
}

/* -------------------------------------------------- Rahmen und Kosten -- */

.entry-content > .tbf-rahmen {
	background: var(--tbf-paper);
}

.tbf-section .tbf-facts {
	gap: 26px;
	margin-bottom: 0;
}

.tbf-fact {
	border-top: 1px solid #c3cdc2;
	padding-top: 22px;
}

.tbf-fact__title {
	font-size: 1.1rem;
	line-height: 1.25;
	letter-spacing: -.02em;
	font-weight: 700;
	margin: 0 0 12px;
}

.tbf-fact p {
	margin: 0;
	font-size: .9rem;
	line-height: 1.65;
	color: var(--tbf-muted);
}

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

.tbf-section .tbf-faq {
	gap: 80px;
	margin-bottom: 0;
}

.tbf-faq__list {
	border-top: 1px solid #c3cdc2;
}

.tbf-faq__item {
	border-bottom: 1px solid #c3cdc2;
	padding: 20px 0;
}

.tbf-faq__item summary {
	cursor: pointer;
	list-style: none;
	position: relative;
	padding-right: 40px;
	font-size: 1.04rem;
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.45;
	color: var(--tbf-ink);
}

.tbf-faq__item summary::-webkit-details-marker {
	display: none;
}

.tbf-faq__item summary::after {
	content: '+';
	position: absolute;
	right: 4px;
	top: -2px;
	font-size: 1.4rem;
	font-weight: 400;
	color: var(--tbf-brand);
	line-height: 1.2;
}

.tbf-faq__item[open] summary::after {
	content: '\2212';
}

.tbf-faq__item p {
	margin: 16px 0 0;
	max-width: 620px;
	padding-right: 30px;
	font-size: .94rem;
	line-height: 1.7;
	color: var(--tbf-muted);
}

/* -------------------------------------------------------- Kundenstimmen */

.entry-content > .tbf-stimmen {
	background: var(--tbf-paper);
}

.tbf-stimmen .tbf-h2 {
	margin-bottom: 48px;
}

.tbf-section .tbf-quotes {
	gap: 44px;
	margin-bottom: 0;
}

.tbf-quote {
	margin: 0;
	border-left: 3px solid var(--tbf-brand);
	padding: 4px 0 4px 22px;
	font-style: normal;
}

.tbf-quote p {
	margin: 0;
	font-size: 1.12rem;
	line-height: 1.5;
	letter-spacing: -.02em;
	font-weight: 500;
	color: var(--tbf-ink);
	font-style: normal;
}

.tbf-quote cite {
	display: block;
	margin-top: 14px;
	font-style: normal;
	font-size: .82rem;
	color: var(--tbf-muted);
}

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

/* Astra setzt Buttons per Inline-CSS auf Grossbuchstaben. Derselbe Selektor
   mit spaeterem Laden zieht das zurueck, damit Header- und Hero-Button
   dieselbe Aktion auch gleich schreiben. */
.ast-header-button-1[data-section*="section-hb-button-"] .ast-builder-button-wrap .ast-custom-button {
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}

/* --------------------------------------------------------- Responsive -- */

@media (max-width: 1000px) {
	.tbf-hero__grid {
		gap: 44px;
	}

	/* Mobil zuerst die Aussage, dann das Bild */
	.tbf-hero__grid .wp-block-column:first-child {
		order: 1;
	}

	.tbf-hero__grid .wp-block-column:last-child {
		order: 2;
	}

	.tbf-section .tbf-sectionhead,
	.tbf-section .tbf-faq,
	.tbf-format .tbf-explain {
		gap: 28px;
		margin-bottom: 36px;
	}

	.tbf-section .tbf-cards,
	.tbf-section .tbf-steps,
	.tbf-section .tbf-facts,
	.tbf-section .tbf-quotes {
		gap: 34px;
	}
}

@media (max-width: 820px) {
	.entry-content > .tbf-hero {
		padding: 150px 20px 60px;
	}

	.entry-content > .tbf-section {
		padding: 64px 20px 68px;
	}

	.tbf-hero__actions .wp-block-button,
	.tbf-actions .wp-block-button {
		flex: 1 1 auto;
	}

	.tbf-hero__actions .wp-block-button__link,
	.tbf-actions .wp-block-button__link {
		width: 100%;
	}

	.tbf-hero__shot figcaption {
		margin: -28px 12px 0;
	}

	.tbf-shot img {
		height: 240px;
	}

	.tbf-einblicke .tbf-gallery {
		margin-top: 28px;
	}

	.tbf-step__num {
		font-size: 2.6rem;
		margin-bottom: 18px;
	}
}

@media (max-width: 400px) {
	.tbf-hero__title {
		font-size: 2.35rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* ----------------------------------------------------------- Abschluss -- */

.entry-content > .tbf-final {
	background: var(--tbf-ink);
	color: var(--tbf-on-dark);
	padding: 84px 24px 88px;
}

.tbf-final .tbf-eyebrow {
	color: var(--tbf-brand-soft);
}

.tbf-final .tbf-h2 {
	color: var(--tbf-on-dark);
}

.tbf-final .tbf-final__grid {
	gap: 60px;
	margin-bottom: 0;
	align-items: center;
}

.tbf-final__text {
	margin: 22px 0 0;
	max-width: 560px;
	font-size: 1rem;
	line-height: 1.7;
	color: #cdd8d1;
}

.tbf-final .tbf-actions {
	margin-top: 0;
}

.tbf-final__phone {
	margin: 20px 0 0;
	font-size: .84rem;
	line-height: 1.7;
	color: var(--tbf-on-dark-muted);
}

.tbf-final__phone a {
	color: var(--tbf-brand-soft);
	font-weight: 700;
	text-decoration: none;
	font-size: 1.05rem;
	text-underline-offset: 4px;
}

.tbf-final__phone a:hover,
.tbf-final__phone a:focus {
	text-decoration: underline;
}

@media (max-width: 820px) {
	.entry-content > .tbf-final {
		padding: 60px 20px 64px;
	}
}

/* ------------------------------------------------------- Kontaktseite -- */

.entry-content > .tbf-hero--klein {
	padding: 180px 24px 64px;
}

.tbf-hero--klein .tbf-hero__title {
	font-size: clamp(2.3rem, 4.4vw, 3.8rem);
}

.tbf-hero--klein .tbf-hero__lead {
	max-width: 620px;
}

.entry-content > .tbf-kontakt {
	background: var(--tbf-surface);
	padding: 72px 24px 88px;
}

.tbf-kontakt .tbf-kontakt__grid {
	gap: 70px;
	margin-bottom: 0;
}

.tbf-h3 {
	font-size: 1.35rem;
	line-height: 1.25;
	letter-spacing: -.03em;
	font-weight: 700;
	color: var(--tbf-ink);
	margin: 0 0 22px;
}

.tbf-kontakt__direkt {
	margin-top: 44px;
}

.tbf-checklist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tbf-checklist li {
	position: relative;
	padding-left: 26px;
	margin-bottom: 14px;
	font-size: .95rem;
	line-height: 1.6;
	color: var(--tbf-muted);
}

.tbf-checklist li::before {
	content: '';
	position: absolute;
	left: 0;
	top: .55em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--tbf-brand);
}

.tbf-kontakt .tbf-note {
	margin-top: 24px;
}

.tbf-formnote {
	margin: 18px 0 0;
	font-size: .8rem;
	line-height: 1.6;
	color: var(--tbf-muted);
}

.tbf-kontakt__daten {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.9;
}

.tbf-kontakt__daten a {
	color: var(--tbf-brand);
	font-weight: 700;
	text-decoration: none;
	text-underline-offset: 4px;
}

.tbf-kontakt__daten a:hover,
.tbf-kontakt__daten a:focus {
	text-decoration: underline;
}

@media (max-width: 820px) {
	.entry-content > .tbf-hero--klein {
		padding: 140px 20px 48px;
	}

	.entry-content > .tbf-kontakt {
		padding: 52px 20px 60px;
	}

	.tbf-kontakt .tbf-kontakt__grid {
		gap: 44px;
	}
}

/* ==========================================================================
   Uebernommen aus "Zusaetzliches CSS" des Customizers (Stand 09.09.2026)

   Diese Regeln lagen bisher unter Design > Customizer > Zusaetzliches CSS.
   Dort haengen sie am aktiven Theme: WordPress sucht den zugehoerigen
   Eintrag unter dem Namen des Themes und findet unter "astra-child" keinen.
   Beim Wechsel auf das Child-Theme waeren sie ersatzlos ausgefallen -
   im Staging nachgestellt und bestaetigt.

   Sie stehen deshalb ab jetzt hier, in einer Datei, die zum Theme gehoert
   und bei jedem weiteren Wechsel mitkommt. Der alte Customizer-Eintrag
   bleibt unter "astra" unangetastet erhalten.
   ========================================================================== */

.entry-content blockquote.wp-block-quote {
  margin-bottom: 2px;
}

.entry-content blockquote.wp-block-quote p {
  margin-bottom: 0;
}

/* Footer-Text darf wirklich umbrechen */
.site-footer .footer-fit {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Wichtig bei Flex-Layout: Elemente duerfen schrumpfen */
.site-footer .ast-footer-row,
.site-footer .ast-footer-row-inner {
  flex-wrap: wrap;
}

.site-footer .ast-footer-widget-area,
.site-footer .widget,
.site-footer .ast-builder-layout-element {
  min-width: 0;
}

/* Wenn has-fit-text auf dem Telefon zu stark skaliert */
@media (max-width: 480px) {
  .site-footer .footer-fit.has-fit-text {
    font-size: clamp(18px, 4.8vw, 26px);
    line-height: 1.15;
  }
}