/* ==========================================================================
   Trail-Talente – Design-System für Astra + Beaver Builder
   Klassen mit tt- Präfix. Für BB-Zeilen/-Module: Feld „Klasse" im Tab „Erweitert".
   ========================================================================== */

:root {
	--tt-ink: #1b2a31;
	--tt-slate: #2b4049;
	--tt-moss: #7c9a4b;
	--tt-moss-deep: #55702c;
	--tt-paper: #edeee8;
	--tt-stone: #d7d9cf;
	--tt-white: #ffffff;

	--tt-font-display: 'Anton', Impact, 'Arial Narrow', sans-serif;
	--tt-font-label: 'Barlow Condensed', 'Arial Narrow', sans-serif;
	--tt-font-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;

	--tt-radius: 3px;
	--tt-measure: 68ch;
	--tt-section-y: clamp(3.5rem, 8vw, 7rem);
}

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

body.tt {
	font-family: var(--tt-font-body);
	color: var(--tt-slate);
	-webkit-font-smoothing: antialiased;
}

.tt :is(h1, h2, h3, .entry-title) {
	font-family: var(--tt-font-display);
	font-weight: 400;
	color: var(--tt-ink);
	line-height: 1.02;
	letter-spacing: .01em;
	text-transform: uppercase;
	text-wrap: balance;
}
.tt h1 { font-size: clamp(2.6rem, 7vw, 5.5rem); }
.tt h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); }
.tt h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.tt :is(h4, h5, h6) {
	font-family: var(--tt-font-label);
	font-weight: 700;
	color: var(--tt-ink);
	letter-spacing: .02em;
}

.tt :is(p, li) { max-width: var(--tt-measure); }
.tt .tt-lead { font-size: clamp(1.125rem, 1.6vw, 1.3rem); line-height: 1.55; }

/* Kleine Überzeile: bewusst normale Schreibweise, Barlow Condensed in Moos */
.tt .tt-kicker, .tt .tt-kicker :is(p, h1, h2, h3, h4, h5, h6) {
	font-family: var(--tt-font-label);
	font-weight: 600;
	font-size: 1.05rem;
	text-transform: none;
	letter-spacing: .02em;
	color: var(--tt-moss-deep);
	margin-bottom: .4em;
}

.tt a { text-underline-offset: .18em; text-decoration-thickness: 1px; }

/* --- Abschnitte (Klassen auf BB-Zeilen) -------------------------------- */

.tt-section-paper > .fl-row-content-wrap { background-color: var(--tt-paper); }
.tt-section-white > .fl-row-content-wrap { background-color: var(--tt-white); }
.tt-section-ink   > .fl-row-content-wrap { background-color: var(--tt-ink); }
.tt-section-slate > .fl-row-content-wrap { background-color: var(--tt-slate); }
.tt-section-moss  > .fl-row-content-wrap { background-color: var(--tt-moss); }

.tt :is(.tt-section-ink, .tt-section-slate, .tt-on-dark) { color: rgba(237, 238, 232, .86); }
.tt :is(.tt-section-ink, .tt-section-slate, .tt-on-dark) :is(h1, h2, h3, h4, h5, h6, strong) { color: var(--tt-paper); }
.tt :is(.tt-section-ink, .tt-section-slate, .tt-on-dark) .tt-kicker,
.tt :is(.tt-section-ink, .tt-section-slate, .tt-on-dark) .tt-kicker :is(p, h1, h2, h3, h4, h5, h6) { color: var(--tt-moss); }
.tt :is(.tt-section-ink, .tt-section-slate, .tt-on-dark) a:not(.fl-button):not(.tt-btn) { color: var(--tt-paper); }
.tt .tt-section-moss, .tt .tt-section-moss :is(h1, h2, h3, h4, h5, h6) { color: var(--tt-ink); }

/* Abschnitt ohne Innenabstand unten, damit die Trail-Linie bündig anschließt */
.tt-flush-bottom > .fl-row-content-wrap { padding-bottom: 0 !important; }
.tt-flush-top > .fl-row-content-wrap { padding-top: 0 !important; }

/* --- Hero (Klasse tt-hero auf die BB-Zeile, Hintergrundbild + Overlay in BB setzen) */

.tt-hero > .fl-row-content-wrap {
	min-height: min(86vh, 820px);
	display: flex;
	align-items: flex-end;
	padding-bottom: clamp(3rem, 8vw, 6rem);
}
.tt-hero > .fl-row-content-wrap > .fl-row-content { width: 100%; }
.tt .tt-hero :is(h1, h2) { color: var(--tt-white); max-width: 14ch; }
.tt .tt-hero :is(p, li) { color: rgba(255, 255, 255, .9); }
.tt .tt-hero .tt-kicker, .tt .tt-hero .tt-kicker :is(p, h1, h2, h3, h4, h5, h6) { color: var(--tt-moss); }

/* --- Buttons ------------------------------------------------------------
   a) Shortcode/HTML: <a class="tt-btn tt-btn--moss">
   b) BB-Button-Modul: Klasse tt-btn-moss | tt-btn-ink | tt-btn-outline-ink | tt-btn-outline-paper | tt-btn-white
   c) Astra-/Gutenberg-Buttons übernehmen die Palette automatisch.            */

.tt .tt-btn,
.tt .fl-builder-content :is(.tt-btn-moss, .tt-btn-ink, .tt-btn-outline-ink, .tt-btn-outline-paper, .tt-btn-white) a.fl-button {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	font-family: var(--tt-font-label);
	font-weight: 700;
	font-size: 1.125rem;
	letter-spacing: .03em;
	line-height: 1.1;
	padding: .85em 1.5em;
	border: 2px solid transparent;
	border-radius: var(--tt-radius);
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.tt .fl-builder-content :is(.tt-btn-moss, .tt-btn-ink, .tt-btn-outline-ink, .tt-btn-outline-paper, .tt-btn-white) a.fl-button :is(span, i) { color: inherit; }
.tt .tt-btn { margin: 0 .5rem .5rem 0; }

/* Moos: Ink-Text auf Moos (Kontrast 4,6:1) */
.tt .tt-btn--moss, .tt .fl-builder-content .tt-btn-moss a.fl-button { background: var(--tt-moss); border-color: var(--tt-moss); color: var(--tt-ink); }
.tt .tt-btn--moss:is(:hover, :focus-visible), .tt .fl-builder-content .tt-btn-moss a.fl-button:is(:hover, :focus-visible) { background: var(--tt-ink); border-color: var(--tt-ink); color: var(--tt-paper); }

.tt .tt-btn--ink, .tt .fl-builder-content .tt-btn-ink a.fl-button { background: var(--tt-ink); border-color: var(--tt-ink); color: var(--tt-paper); }
.tt .tt-btn--ink:is(:hover, :focus-visible), .tt .fl-builder-content .tt-btn-ink a.fl-button:is(:hover, :focus-visible) { background: var(--tt-moss-deep); border-color: var(--tt-moss-deep); color: var(--tt-white); }

.tt .fl-builder-content .tt-btn-outline-ink a.fl-button { background: transparent; border-color: var(--tt-ink); color: var(--tt-ink); }
.tt .fl-builder-content .tt-btn-outline-ink a.fl-button:is(:hover, :focus-visible) { background: var(--tt-ink); color: var(--tt-paper); }

.tt .tt-btn--paper, .tt .fl-builder-content .tt-btn-outline-paper a.fl-button { background: transparent; border-color: rgba(237, 238, 232, .7); color: var(--tt-paper); }
.tt .tt-btn--paper:is(:hover, :focus-visible), .tt .fl-builder-content .tt-btn-outline-paper a.fl-button:is(:hover, :focus-visible) { background: var(--tt-paper); border-color: var(--tt-paper); color: var(--tt-ink); }

.tt .tt-btn--white, .tt .fl-builder-content .tt-btn-white a.fl-button { background: var(--tt-white); border-color: var(--tt-white); color: var(--tt-ink); }
.tt .tt-btn--white:is(:hover, :focus-visible), .tt .fl-builder-content .tt-btn-white a.fl-button:is(:hover, :focus-visible) { background: var(--tt-ink); border-color: var(--tt-ink); color: var(--tt-paper); }

/* --- Trail-Linie -------------------------------------------------------- */

.tt-trail {
	--tt-trail-fill: transparent;
	--tt-trail-line: var(--tt-moss);
	--tt-trail-h: 72px;
	display: block;
	width: 100%;
	height: clamp(24px, calc(var(--tt-trail-h) * .6 + 1vw), var(--tt-trail-h));
	line-height: 0;
	margin: 0 0 -1px;
	position: relative;
	pointer-events: none;
}
.tt-trail svg { display: block; width: 100%; height: 100%; overflow: visible; }
.tt-trail__fill { fill: var(--tt-trail-fill); }
.tt-trail__line { fill: none; stroke: var(--tt-trail-line); stroke-width: 3; stroke-linecap: round; }
.tt-trail--flip svg { transform: scaleX(-1); }
.tt-trail--footer { margin-bottom: -1px; }

/* Trail-Modul in BB: ohne Modul-Ränder, bündig an Zeilenkanten */
.fl-module-tt-trail, .fl-module-tt-trail > .fl-module-content { margin: 0 !important; }

/* --- Scroll-Fortschritt -------------------------------------------------- */

.tt-progress {
	position: fixed;
	inset: 0 0 auto 0;
	height: 3px;
	z-index: 100000;
	pointer-events: none;
}
.tt-progress__bar {
	display: block;
	height: 100%;
	background: var(--tt-moss);
	transform-origin: 0 50%;
	transform: scaleX(var(--tt-progress, 0));
}
.admin-bar .tt-progress { top: 32px; }
@media (max-width: 782px) { .admin-bar .tt-progress { top: 46px; } }

/* --- Level-Skala ---------------------------------------------------------- */

.tt-level { display: inline-flex; align-items: center; gap: .7rem; }
.tt-level__bars { display: inline-flex; align-items: flex-end; gap: 3px; height: 18px; }
.tt-level__bar { width: 7px; background: var(--tt-stone); border-radius: 1px; }
.tt-level__bar:nth-child(1) { height: 30%; }
.tt-level__bar:nth-child(2) { height: 55%; }
.tt-level__bar:nth-child(3) { height: 78%; }
.tt-level__bar:nth-child(4) { height: 100%; }
.tt-level__bar.is-on { background: var(--tt-moss); }
.tt-level__label { font-family: var(--tt-font-label); font-weight: 600; font-size: 1rem; color: var(--tt-ink); }
.tt :is(.tt-section-ink, .tt-section-slate, .tt-on-dark) .tt-level__bar:not(.is-on) { background: rgba(237, 238, 232, .22); }
.tt :is(.tt-section-ink, .tt-section-slate, .tt-on-dark) .tt-level__label { color: var(--tt-paper); }

/* --- Fakten-Band ---------------------------------------------------------- */

.tt-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
	gap: 1.5rem 2rem;
	margin: 0;
}
.tt-facts__item { border-top: 2px solid var(--tt-moss); padding-top: .8rem; }
.tt-facts__value {
	font-family: var(--tt-font-display);
	font-size: clamp(1.8rem, 3.2vw, 2.4rem);
	line-height: 1;
	color: var(--tt-ink);
	margin: 0 0 .35rem;
}
.tt-facts__label { margin: 0; font-family: var(--tt-font-label); font-weight: 500; font-size: 1.05rem; color: var(--tt-slate); }
.tt :is(.tt-facts-wrap--dark, .tt-section-ink, .tt-section-slate, .tt-on-dark) .tt-facts__value { color: var(--tt-paper); }
.tt :is(.tt-facts-wrap--dark, .tt-section-ink, .tt-section-slate, .tt-on-dark) .tt-facts__label { color: rgba(237, 238, 232, .78); }
.tt .tt-facts-wrap--light .tt-facts__value { color: var(--tt-ink); }
.tt .tt-facts-wrap--light .tt-facts__label { color: var(--tt-slate); }

/* --- Beaver Builder: Akkordeon (FAQ) -------------------------------------- */

.tt .fl-accordion-item { border: 0; border-top: 1px solid var(--tt-stone); border-radius: 0; margin: 0; }
.tt .fl-accordion-item:last-child { border-bottom: 1px solid var(--tt-stone); }
.tt .fl-accordion-button { padding: 1.1rem 0; background: transparent; }
.tt .fl-accordion-button-label { font-family: var(--tt-font-label); font-weight: 700; font-size: 1.25rem; color: var(--tt-ink); }
.tt .fl-accordion-button-icon { color: var(--tt-moss-deep); }
.tt .fl-accordion-content { padding: 0 0 1.25rem; }

/* --- Tabellen (Termine & Preise) ----------------------------------------- */

.tt .tt-table table { width: 100%; border-collapse: collapse; border: 0; }
.tt .tt-table :is(th, td) { padding: .85rem .75rem; border: 0; border-bottom: 1px solid var(--tt-stone); text-align: left; vertical-align: top; }
.tt .tt-table th { font-family: var(--tt-font-label); font-weight: 700; font-size: 1rem; color: var(--tt-ink); background: transparent; border-bottom: 2px solid var(--tt-ink); }
.tt .tt-table tbody tr:hover { background: rgba(124, 154, 75, .08); }
@media (max-width: 640px) {
	.tt .tt-table thead { display: none; }
	.tt .tt-table :is(table, tbody, tr, td) { display: block; width: 100%; }
	.tt .tt-table tr { padding: .9rem 0; border-bottom: 1px solid var(--tt-stone); }
	.tt .tt-table td { border: 0; padding: .15rem 0; }
	.tt .tt-table td[data-label]::before { content: attr(data-label) ": "; font-family: var(--tt-font-label); font-weight: 600; color: var(--tt-ink); }
}

/* --- Astra-Feinschliff --------------------------------------------------- */

.tt .site-header .main-header-menu .menu-link { font-family: var(--tt-font-label); font-weight: 600; font-size: 1.1rem; letter-spacing: .02em; }
.tt .ast-builder-layout-element .site-title { font-family: var(--tt-font-display); text-transform: uppercase; }

/* --- Zugänglichkeit ------------------------------------------------------- */

.tt :focus-visible { outline: 3px solid var(--tt-moss); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
	.tt * { transition-duration: 0s !important; }
	.tt-progress { display: none; }
}