/**
 * Rennsteig AKTD — Basis-Styling
 *
 * Grobe Ausrichtung von Topbar, Header, Hero und Footer an das
 * Webdesign (Schwarzatal_Webdesign_20260813). Der WPBakery-
 * Contentbereich wird hier bewusst nicht gestylt.
 *
 * Struktur:
 * 1. Design-Tokens
 * 2. Topbar (Above Header, Widget 1 + 2)
 * 3. Hauptheader (Menü links/rechts, Logo mittig, Button)
 * 4. Transparenter Header (Landingpages mit Hero)
 * 5. Hero
 * 6. Footer (3 Widget-Spalten + Copyright-Zeile)
 * 7. Responsive
 */

/* -------------------------------------------------------------------------
 * 1. Design-Tokens
 * ---------------------------------------------------------------------- */

/* Script-Schrift „Sisterhood" (dinstudio), lokal gehostet.
   Seit 2026-10-20 die offiziell lizenzierte Fassung (Kunde, Ordner
   zuarbeiten201026/Sisterhood.otf), vorher die Personal-Use-Datei.
   Auf westeuropäischen Zeichensatz reduziert (Latin-1, €, typografische
   Anführungszeichen/Striche), alle OpenType-Features erhalten.
   ?v= im Dateinamen: neue Datei unter gleichem Namen → Browser-Cache umgehen.
   ascent-/descent-override: Die lizenzierte Datei hat größere vertikale
   Maße (1873/348 statt 1283/166 Einheiten) bei identischen Glyphen. Ohne
   Ausgleich säßen alle Script-Überschriften ≈ 0,2 em tiefer. Die Overrides
   stellen die bisherigen (abgenommenen) Maße her, ohne die Datei zu ändern.
   (Safari ignoriert die Overrides — dort ggf. minimal tiefer.) */
@font-face {
	font-family: 'Sisterhood';
	src: url('../fonts/sisterhood.woff2?v=20261020') format('woff2'),
		url('../fonts/sisterhood.woff?v=20261020') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	ascent-override: 128.3%;
	descent-override: 16.6%;
	line-gap-override: 0%;
}

:root {
	/* Markenfarben (CD-Guide) */
	--aktd-color-green: #70bd9c;
	--aktd-color-green-dark: #65a688;
	--aktd-color-blue: #466fb5;
	--aktd-color-blue-dark: #3062a6;
	--aktd-color-orange: #ef7b47;
	--aktd-color-red: #e40653;

	/* Web-Arbeitsfarben (Screendesign) */
	--aktd-color-petrol: #008f7d;
	--aktd-color-petrol-dark: #00745f;
	/* Grün für Text/Flächen mit Schrift: gegenüber dem CD-Wert #2b957e
	   minimal abgedunkelt, damit 4,5:1 (WCAG AA) erreicht wird. */
	--aktd-color-script-heading: #26836f;
	--aktd-color-surface: #f1f5f4;
	--aktd-color-mint: #ddfcf2;
	--aktd-color-font: #1b1b1b;
	--aktd-color-font-muted: #3a3f3e;
	--aktd-color-white: #ffffff;
	--aktd-color-cta: #f46a40; /* Header-Button = Design-Orange (2026-10-09 auf Kundenwunsch; weiße Schrift erreicht nur 3,0:1, s. README) */

	/* Verläufe (Screendesign) */
	--aktd-gradient-green: linear-gradient(135deg, #69fa85 0%, #38b067 100%);
	--aktd-gradient-red: linear-gradient(90deg, #ff1f29 0%, #ff6142 100%);
	--aktd-gradient-blue: linear-gradient(135deg, #5e94ff 0%, #1c78fa 100%);

	/* Typografie */
	--aktd-font-base: 'Open Sans', sans-serif;
	--aktd-font-accent: 'Bebas Neue', sans-serif;
	--aktd-font-script: 'Sisterhood', cursive;

	/* Layout
	   Inhaltsspalte 1100 — Astra `site-content-width` = 1100 (Astra rechnet
	   selbst 2×20 Innenabstand drauf → .ast-container 1140). Bis 2026-10-09
	   940 nach Design; auf Kundenwunsch verbreitert („Inhalte zu schmal“).
	   --aktd-max-width = 1100 + 2×20 für eigene Container (Hero, Footer).
	   Header/Topbar bleiben in Designbreite 1000 (Rand 100). */
	--aktd-max-width: 1140px;
	--aktd-header-width: 1040px; /* 1000 + 2×20 */
}

/* Header und Topbar in eigener Designbreite (1000) — unabhängig von der
   Inhaltsbreite (1100). */
@media (min-width: 922px) {

	.site-header .ast-container {
		max-width: var(--aktd-header-width);
	}
}

/* -------------------------------------------------------------------------
 * 2. Topbar (Above Header)
 * ---------------------------------------------------------------------- */
.ast-above-header {
	font-size: 13px;
	line-height: 1.4;
}

.ast-above-header .widget {
	margin-bottom: 0;
}

.ast-above-header .widget p {
	margin-bottom: 0;
}

.ast-above-header a {
	color: inherit;
	text-decoration: none;
}

.ast-above-header a:hover {
	color: var(--aktd-color-petrol);
}

/* -------------------------------------------------------------------------
 * 3. Hauptheader
 * ---------------------------------------------------------------------- */

/* Navigation in der Akzentschrift, Versalien */
.main-header-menu {
	flex-wrap: nowrap;
}

.main-header-menu .menu-item > .menu-link {
	font-family: var(--aktd-font-accent);
	font-size: 16px; /* Design */
	letter-spacing: 0.1em; /* Design-Tracking 100 */
	text-transform: uppercase;
	font-weight: 400;
	white-space: nowrap;
}

/* CTA-Button „Urlaub buchen": Aussehen kommt vollstaendig aus den
   Astra-Customizer-Optionen (header-button1-*, section-hb-button-1-padding),
   damit Astras Inline-CSS nicht mit eigenen Regeln kollidiert.
   Hier nur, was Astra nicht anbietet: */
.ast-header-button-1 .ast-custom-button {
	white-space: nowrap;
}

/* Menü und CTA stehen im Design am unteren Rand der Headerzeile, auf Höhe
   des unteren Logo-Bereichs. Astra Free bietet dafür keine Option. */
@media (min-width: 922px) {

	/* Menü und CTA liegen auf EINER Linie (mittig), die per Innenabstand auf
	   die Design-Höhe geschoben wird (Menü-/Button-Mitte ~150px).
	   Wichtig: nicht `flex-end` — sonst stehen unterschiedlich hohe Elemente
	   (Menü 96px, CTA 30px) unten bündig und der Button sitzt zu tief. */
	.main-header-bar .site-header-section {
		align-items: center;
		padding-top: 55px;
	}

	/* Das Logo bleibt oben und überragt die Menülinie nach unten (wie im Design)
	   und steht waagerecht in der Mitte seiner Spalte. */
	.main-header-bar .site-header-primary-section-center {
		align-items: flex-start;
		justify-content: center;
		padding-top: 0;
	}

	/* Logo immer exakt mittig, Menüs bündig zur Mitte:
	   Astra legt die Zeile als `1fr auto 1fr` an — ist ein Menü breiter als
	   seine Spalte, wächst die Spalte und schiebt das Logo aus der Mitte
	   (bei längeren Menüs auch horizontales Scrollen). `minmax(0, 1fr)` hält
	   beide Seiten gleich breit; das linke Menü endet am Logo, das rechte
	   Menü (+ CTA) beginnt am Logo. Längere Menüs wachsen nach außen. */
	#ast-desktop-header .main-header-bar .ast-builder-grid-row {
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	}

	.main-header-bar .site-header-primary-section-left {
		justify-content: flex-end;
	}

	.main-header-bar .site-header-primary-section-right {
		justify-content: flex-start;
	}

	/* Astra gibt dem Logo rechts 16px Innenabstand mit — das Logo stünde
	   sonst 8px links der Mitte. */
	.main-header-bar .site-header-primary-section-center .site-logo-img {
		padding-left: 0;
		padding-right: 0;
	}

	/* Leere Astra-Slots (links-/rechts-mittig) nehmen sonst Platz weg und
	   rücken die Menüs unterschiedlich weit vom Logo ab. */
	.main-header-bar .site-header-primary-section-left-center:not(:has(*)),
	.main-header-bar .site-header-primary-section-right-center:not(:has(*)) {
		display: none;
	}

	/* Horizontale Abstände nach Design (px bei 1200, Headerzeile 100–1100):
	   linkes Menü ab 101, Abstände 34 · rechtes Menü 729–961, Abstände 21 ·
	   CTA 991–1104. Astra-Standard (Links je 16px + 10px an jedem
	   Header-Element) war 87px zu breit — der CTA ragte aus der Zeile und
	   wurde unter ~1100px Fensterbreite abgeschnitten. */
	.main-header-bar .site-header-section > * {
		padding-left: 0;
		padding-right: 0;
	}

	.ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link {
		padding-left: 17px;
		padding-right: 17px;
	}

	.ast-builder-menu-1 .main-header-menu > .menu-item:first-child > .menu-link {
		padding-left: 0;
	}

	.ast-builder-menu-1 .main-header-menu > .menu-item:last-child > .menu-link {
		padding-right: 0;
	}

	.ast-builder-menu-2 .main-header-menu > .menu-item > .menu-link {
		padding-left: 10px;
		padding-right: 10px;
	}

	/* Symmetrisch zum linken Menü (dessen letzter Punkt hat rechts 0):
	   beide Menüs halten denselben Abstand zum Logo. */
	.ast-builder-menu-2 .main-header-menu > .menu-item:first-child > .menu-link {
		padding-left: 0;
	}

	.main-header-bar .ast-header-button-1 {
		margin-left: 20px;
	}
}

/* Schmale Desktops (922–1100px): Das volle Menü passt nicht in die Zeile —
   Abstände und Schrift leicht verdichten, sonst wird der CTA abgeschnitten. */
@media (min-width: 922px) and (max-width: 1100px) {

	.main-header-menu .menu-item > .menu-link {
		font-size: 15px;
		letter-spacing: 0.06em;
	}

	.ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link {
		padding-left: 10px;
		padding-right: 10px;
	}

	.ast-builder-menu-2 .main-header-menu > .menu-item > .menu-link {
		padding-left: 7px;
		padding-right: 7px;
	}

	.main-header-bar .ast-header-button-1 {
		margin-left: 12px;
	}
}

/* Zu lange Menüs (mehr/längere Menüpunkte als im Design): Weil das Logo fest
   in der Mitte steht, hat jede Seite nur die halbe Zeile. Passt ein Menü
   nicht mehr in den Bildschirm, setzt assets/js/header-fit.js stufenweise
   eine dieser Klassen am Desktop-Header — die Punkte rücken zusammen. */
@media (min-width: 922px) {

	#ast-desktop-header.aktd-header-compact-1 .main-header-menu .menu-item > .menu-link {
		font-size: 15px;
		letter-spacing: 0.06em;
	}

	#ast-desktop-header.aktd-header-compact-1 .ast-builder-menu-1 .main-header-menu > .menu-item:not(:first-child) > .menu-link {
		padding-left: 10px;
	}

	#ast-desktop-header.aktd-header-compact-1 .ast-builder-menu-1 .main-header-menu > .menu-item:not(:last-child) > .menu-link {
		padding-right: 10px;
	}

	#ast-desktop-header.aktd-header-compact-1 .ast-builder-menu-2 .main-header-menu > .menu-item:not(:first-child) > .menu-link {
		padding-left: 7px;
	}

	#ast-desktop-header.aktd-header-compact-1 .ast-builder-menu-2 .main-header-menu > .menu-item:not(:last-child) > .menu-link {
		padding-right: 7px;
	}

	#ast-desktop-header.aktd-header-compact-1 .ast-header-button-1 {
		margin-left: 12px;
	}

	#ast-desktop-header.aktd-header-compact-2 .main-header-menu .menu-item > .menu-link {
		font-size: 14px;
		letter-spacing: 0.04em;
	}

	#ast-desktop-header.aktd-header-compact-2 .ast-builder-menu-1 .main-header-menu > .menu-item:not(:first-child) > .menu-link,
	#ast-desktop-header.aktd-header-compact-2 .ast-builder-menu-2 .main-header-menu > .menu-item:not(:first-child) > .menu-link {
		padding-left: 5px;
	}

	#ast-desktop-header.aktd-header-compact-2 .ast-builder-menu-1 .main-header-menu > .menu-item:not(:last-child) > .menu-link,
	#ast-desktop-header.aktd-header-compact-2 .ast-builder-menu-2 .main-header-menu > .menu-item:not(:last-child) > .menu-link {
		padding-right: 5px;
	}

	#ast-desktop-header.aktd-header-compact-2 .ast-header-button-1 {
		margin-left: 8px;
	}

	#ast-desktop-header.aktd-header-compact-3 .main-header-menu .menu-item > .menu-link {
		font-size: 13px;
		letter-spacing: 0.03em;
	}

	#ast-desktop-header.aktd-header-compact-3 .ast-builder-menu-1 .main-header-menu > .menu-item:not(:first-child) > .menu-link,
	#ast-desktop-header.aktd-header-compact-3 .ast-builder-menu-2 .main-header-menu > .menu-item:not(:first-child) > .menu-link {
		padding-left: 5px;
	}

	#ast-desktop-header.aktd-header-compact-3 .ast-builder-menu-1 .main-header-menu > .menu-item:not(:last-child) > .menu-link,
	#ast-desktop-header.aktd-header-compact-3 .ast-builder-menu-2 .main-header-menu > .menu-item:not(:last-child) > .menu-link {
		padding-right: 5px;
	}

	/* Astra animiert Menülinks mit `transition: all` — dann misst
	   header-fit.js Zwischenwerte von Schrift/Abstand und schaukelt sich
	   auf. Animiert werden nur noch Farben. */
	#ast-desktop-header .main-header-menu > .menu-item > .menu-link {
		transition-property: color, background-color, border-color, opacity;
	}
}

/* -------------------------------------------------------------------------
 * 4. Transparenter Header (Landingpages)
 * ---------------------------------------------------------------------- */
/* Nur die oberste Menüebene liegt auf dem Bild — Untermenüs haben eine
   eigene weiße Fläche und brauchen dunkle Schrift (s. Abschnitt 12). */
.ast-theme-transparent-header .main-header-menu > .menu-item > .menu-link {
	color: var(--aktd-color-white);
	/* Lesbarkeit auch auf hellen Hero-Bildern */
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

.ast-theme-transparent-header .main-header-menu > .menu-item > .menu-link:hover,
.ast-theme-transparent-header .main-header-menu > .menu-item:hover > .menu-link,
.ast-theme-transparent-header .main-header-menu > .current-menu-item > .menu-link,
.ast-theme-transparent-header .main-header-menu > .current-menu-ancestor > .menu-link {
	/* `!important`: Astra färbt aktive Punkte und Elternpunkte der aktuellen
	   Seite petrolgrün (spezifischeres Inline-CSS) — auf dem Hero unlesbar. */
	color: var(--aktd-color-mint) !important;
}

/* Die Topbar bleibt auch über dem Hero weiß (Hintergrund kommt aus der
   Astra-Option hba-transparent-header-bg-color-responsive) */
.ast-theme-transparent-header .ast-above-header,
.ast-theme-transparent-header .ast-above-header a {
	color: var(--aktd-color-font-muted);
}

.ast-theme-transparent-header .ast-above-header a:hover {
	color: var(--aktd-color-petrol);
}

.ast-theme-transparent-header .main-header-bar {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0) 100%);
}

.ast-theme-transparent-header [data-section="section-header-mobile-trigger"] .ast-button-wrap .ast-mobile-menu-trigger-minimal,
.ast-theme-transparent-header .ast-mobile-menu-trigger-minimal,
.ast-theme-transparent-header .menu-toggle {
	color: var(--aktd-color-white);
}

/* Astra färbt das Burger-SVG per Inline-CSS mit
   [data-section="…"] .ast-button-wrap .mobile-menu-toggle-icon .ast-mobile-svg
   ein — der Selektor muss hier gespiegelt werden, um zu gewinnen. */
.ast-theme-transparent-header [data-section="section-header-mobile-trigger"] .ast-button-wrap .mobile-menu-toggle-icon .ast-mobile-svg,
.ast-theme-transparent-header .ast-mobile-menu-trigger-minimal svg,
.ast-theme-transparent-header .menu-toggle svg {
	fill: currentColor;
}

/* -------------------------------------------------------------------------
 * 5. Hero
 * ---------------------------------------------------------------------- */
.aktd-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	width: 100%;
	/* Design: Hero 632px bei 1200px Artboardbreite (Verhältnis ~0,53) */
	min-height: clamp(420px, 53vw, 760px);
	overflow: hidden;
	background-color: var(--aktd-color-petrol-dark);
}

.aktd-hero__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.aktd-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

/* Farbverlauf-Varianten (redaktionell wählbar) */
.aktd-hero--gradient-gruen .aktd-hero__overlay {
	background: linear-gradient(100deg, rgba(0, 143, 125, 0.85) 0%, rgba(112, 189, 156, 0.5) 40%, rgba(112, 189, 156, 0) 72%);
}

.aktd-hero--gradient-blau .aktd-hero__overlay {
	background: linear-gradient(100deg, rgba(48, 98, 166, 0.85) 0%, rgba(70, 111, 181, 0.5) 40%, rgba(70, 111, 181, 0) 72%);
}

.aktd-hero--gradient-rot .aktd-hero__overlay {
	background: linear-gradient(100deg, rgba(228, 6, 83, 0.8) 0%, rgba(239, 123, 71, 0.5) 40%, rgba(239, 123, 71, 0) 72%);
}

.aktd-hero--gradient-kein .aktd-hero__overlay {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.45) 100%);
}

/* Stärke des Verlaufs */
.aktd-hero--strength-leicht .aktd-hero__overlay {
	opacity: 0.6;
}

.aktd-hero--strength-standard .aktd-hero__overlay {
	opacity: 0.8;
}

.aktd-hero--strength-stark .aktd-hero__overlay {
	opacity: 1;
}

.aktd-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--aktd-max-width);
	margin: 0 auto;
	padding: 140px 20px 64px;
}

.aktd-hero__title {
	margin: 0;
	font-family: var(--aktd-font-script);
	font-weight: 400;
	font-size: clamp(28px, 3.6vw, 48px); /* Design 43px @1200 */
	line-height: 1.35;
	color: var(--aktd-color-white);
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
	max-width: 18em;
}

.aktd-hero--no-image {
	min-height: 320px;
}

/* Hintergrundvideo (Metabox „Art des Hintergrunds: Video").
   Liegt über dem Ersatzbild und wird erst eingeblendet, wenn es läuft —
   bis dahin (oder wenn es nie startet) sieht man das Bild. */
.aktd-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	opacity: 0;
	transition: opacity 0.6s ease;
}

.aktd-hero.is-video-playing .aktd-hero__video {
	opacity: 1;
}

/* Pause-Knopf unten rechts, bündig mit der Inhaltsspalte */
.aktd-hero__video-toggle {
	position: absolute;
	z-index: 3;
	right: max(20px, calc((100% - var(--aktd-max-width)) / 2 + 20px));
	bottom: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px; /* Touch-Ziel */
	height: 44px;
	padding: 0;
	border: 2px solid var(--aktd-color-white);
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.45);
	color: var(--aktd-color-white);
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.aktd-hero__video-toggle[hidden] {
	display: none;
}

.aktd-hero__video-toggle:hover,
.aktd-hero__video-toggle:focus {
	background: rgba(0, 0, 0, 0.7);
	color: var(--aktd-color-white);
}

.aktd-hero__video-icon--play,
.aktd-hero.is-video-paused .aktd-hero__video-icon--pause {
	display: none;
}

.aktd-hero.is-video-paused .aktd-hero__video-icon--play {
	display: block;
}

/* -------------------------------------------------------------------------
 * 6. Footer
 * ---------------------------------------------------------------------- */
.site-footer {
	font-size: 14px;
}

.site-footer a {
	color: var(--aktd-color-font-muted);
}

.site-footer a:hover {
	color: var(--aktd-color-petrol);
}

.site-footer .widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer .widget ul li {
	margin-bottom: 0.4em;
}

/* Copyright-Zeile */
.site-below-footer-wrap {
	font-size: 13px;
}

/* -------------------------------------------------------------------------
 * 7. Responsive
 * ---------------------------------------------------------------------- */
@media (max-width: 921px) {

	.aktd-hero {
		min-height: clamp(340px, 48vh, 520px);
	}

	.aktd-hero__inner {
		padding: 110px 20px 42px;
	}
}

@media (max-width: 544px) {

	.aktd-hero {
		min-height: 300px;
	}

	.aktd-hero__inner {
		padding: 96px 20px 32px;
	}

	.aktd-hero__title {
		font-size: 1.9rem;
	}
}

@media (prefers-reduced-motion: reduce) {

	/* Das Hero-Video lädt dann gar nicht erst (hero-video.js) */
	.aktd-hero__video,
	.aktd-hero__video-toggle {
		transition: none;
	}

	.ast-header-button-1 .ast-custom-button {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
 * 8. WPBakery-Korrekturen
 * ---------------------------------------------------------------------- */

/* Rows in Flex-Sektionen: WPBakery-Spaltenausgleich wiederherstellen.
   Astra setzt `.js_active .vc_row { margin: auto }` und hebt damit den
   WPBakery-Standard `.vc_row { margin: 0 -15px }` auf. Folgen in
   Flex-Sektionen (Spalten-Layout, sobald eine Inhaltsausrichtung gesetzt ist):
   1. Auto-Margins verhindern das Dehnen des Flex-Items → Rows mit schmalem
      Inhalt (z. B. ein einzelner Button) schrumpfen und wirken zentriert.
   2. Der -15px-Ausgleich fehlt → Inhalt ist 30px schmaler als in normalen
      Sektionen (910 statt 940).
   Gestreckte Sektionen ([data-vc-full-width]) regelt WPBakery selbst. */
.vc_section.vc_section-flex:not([data-vc-full-width]) > .vc_row {
	margin-left: -15px;
	margin-right: -15px;
}

/* -------------------------------------------------------------------------
 * 9. Topbar-Elemente (Design: Icons in grünen Kreisen, Sprachumschalter)
 * ---------------------------------------------------------------------- */
.aktd-topbar {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.aktd-topbar--right {
	justify-content: flex-end;
}

.aktd-topbar-icon,
.aktd-topbar-icon--static {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--aktd-color-script-heading);
	color: var(--aktd-color-white);
	flex: 0 0 auto;
}

.ast-above-header a.aktd-topbar-icon:hover {
	background: var(--aktd-color-petrol);
	color: var(--aktd-color-white);
}

.aktd-topbar-lang {
	white-space: nowrap;
}

/* Suche und Sprachumschalter sind Textlinks, keine Kreise */
.aktd-topbar-lang a {
	color: var(--aktd-color-font-muted);
}

/* -------------------------------------------------------------------------
 * 10. Footer nach Design
 * ---------------------------------------------------------------------- */

/* Footer-Inhalt ins Seitenraster bringen — Astras Footer-Container hat
   weder max-width noch Padding, dadurch klebt der Inhalt am Rand.
   WICHTIG: Die Breite darf NICHT auf `.ast-builder-grid-row-container`
   liegen — dieses Element trägt zugleich die Hintergrundfarbe der Zeile
   (Klasse steckt am `.site-*-footer-wrap`). Sonst endet die farbige Fläche
   bei 1200px und auf breiten Bildschirmen entstehen Ränder in anderer Farbe.
   Deshalb nur die innere Grid-Row begrenzen: */
.site-footer .ast-builder-grid-row {
	max-width: var(--aktd-max-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
}

/* Spaltenüberschriften im Design in der Grundschrift, nicht in Versalien */
.site-footer .widget-title {
	font-family: var(--aktd-font-base);
	font-size: 16px; /* Design */
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--aktd-color-font-muted);
}

.site-footer .aktd-footer-lead {
	margin-bottom: 0.5em;
}

.site-footer .widget ul.aktd-footer-links {
	margin-top: 1.4em;
}

/* Partner-Logoflächen (im Design leere weiße Kästen) */
.aktd-footer-partner {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 130px));
	gap: 10px;
	margin-top: 0.8em;
}

.aktd-footer-partner__slot {
	display: block;
	aspect-ratio: 5 / 3;
	background: var(--aktd-color-white);
}

/* Feld mit Partnerlogo (seit 2026-10-28): Logo vollständig sichtbar, mittig, mit Innenabstand.
   Bilddateien liegen in doppelter Größe vor (scharf auf hochauflösenden Displays). */
.aktd-footer-partner__slot--logo {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px 12px;
	line-height: 0;
	overflow: hidden;
}

.aktd-footer-partner__slot--logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.aktd-footer-partner__slot--logo:hover img,
.aktd-footer-partner__slot--logo:focus img {
	opacity: 0.85;
}

/* Social-Icons im Footer (Design: dunkle Kreise) */
.aktd-footer-social {
	display: flex;
	gap: 12px;
	margin-bottom: 26px;
}

.site-footer .aktd-footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--aktd-color-font);
	color: var(--aktd-color-white);
}

.site-footer .aktd-footer-social a:hover {
	background: var(--aktd-color-script-heading);
	color: var(--aktd-color-white);
}

/* Weiße Kästen für Förder- und Partnerlogos */
.aktd-footer-box {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 96px;
	margin-bottom: 14px;
	padding: 14px;
	background: var(--aktd-color-white);
}

.aktd-footer-box--placeholder {
	min-height: 140px;
	color: #3d6fd8;
}

.aktd-footer-box--plain {
	background: none;
	padding: 0;
	justify-content: flex-start;
}

.aktd-footer-box img {
	max-width: 100%;
	height: auto;
}

/* Copyright-Zeile (Design: grüne Fläche, weiße Schrift) */
.site-below-footer-wrap,
.site-below-footer-wrap a,
.aktd-footer-legal a {
	color: var(--aktd-color-white);
}

.site-below-footer-wrap a:hover,
.aktd-footer-legal a:hover {
	color: var(--aktd-color-mint);
}

.aktd-footer-legal {
	text-align: right;
}

@media (max-width: 921px) {

	.aktd-footer-legal {
		text-align: left;
	}
}

/* -------------------------------------------------------------------------
 * 11. Barrierefreiheit: sichtbarer Tastaturfokus
 *
 * Astra setzt nur `a:focus { outline: dotted thin }` (1px, kaum sichtbar).
 * WCAG 2.4.7/2.4.11 verlangen einen deutlich erkennbaren Fokus. `currentColor`
 * sorgt automatisch für Kontrast: Auf farbigen Flächen ist die Schrift (und
 * damit der Ring) weiß, auf hellem Grund dunkel.
 * ---------------------------------------------------------------------- */
/* `!important`, weil Astra an mehreren Stellen `outline: 0` bei :focus setzt
   (u. a. `.ast-button:focus`, `a:hover`) — ein unterdrückter Tastaturfokus
   ist ein Zugänglichkeitshindernis und darf nicht überschrieben werden. */
body a:focus,
body button:focus,
body input:focus,
body select:focus,
body textarea:focus,
body summary:focus,
body [tabindex]:focus {
	/* Doppelt abgesichert: Astra setzt an einigen Stellen `outline: 0`,
	   das per box-shadow gezeichnete Ringpaar bleibt davon unberührt. */
	outline: 3px solid currentColor !important;
	outline-offset: 3px !important;
	box-shadow: 0 0 0 3px var(--aktd-color-white), 0 0 0 6px currentColor !important;
	/* KEIN border-radius hier: Er überschrieb die Rundung der Buttons, die
	   beim Anklicken eckig wurden (2026-10-09). Der Ring folgt der Form. */
}

/* Maus-/Touch-Bedienung bleibt ohne Ring */
body a:focus:not(:focus-visible),
body button:focus:not(:focus-visible),
body input:focus:not(:focus-visible),
body [tabindex]:focus:not(:focus-visible) {
	outline: none !important;
	box-shadow: none !important;
}

/* Über Bildern (transparenter Header, Hero) zusätzlich absetzen */
.ast-theme-transparent-header .main-header-menu .menu-link:focus-visible,
.aktd-hero a:focus-visible,
.aktd-hero button:focus-visible {
	outline-color: var(--aktd-color-white);
	box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.35);
}

/* Manche Links sind `display: inline` und umschließen ein Block-Element
   (Astras CTA, Logo-Link). Dort zeichnet der Browser den Ring unzuverlässig
   — deshalb zusätzlich das innere Element markieren. */
body a:focus .ast-custom-button,
body a:focus .custom-logo,
body a:focus img {
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

body a:focus:not(:focus-visible) .ast-custom-button,
body a:focus:not(:focus-visible) .custom-logo,
body a:focus:not(:focus-visible) img {
	outline: none;
}

/* -------------------------------------------------------------------------
 * 12. Untermenüs (Dropdown)
 *
 * Eigene weiße Fläche unter der Hauptnavigation. Schrift dunkel, damit sie
 * auch unter dem transparenten Header lesbar bleibt.
 * ---------------------------------------------------------------------- */
.main-header-menu .sub-menu {
	min-width: 260px;
	padding: 8px 0;
	background: var(--aktd-color-white);
	border-top: 3px solid var(--aktd-color-script-heading);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
}

/* Schrift im Dropdown: dunkel und ohne Schatten, auch im transparenten Header */
.main-header-menu .sub-menu .menu-link,
.ast-theme-transparent-header .main-header-menu .sub-menu .menu-link {
	color: var(--aktd-color-font);
	text-shadow: none;
	font-size: 16px;
	letter-spacing: 0.06em;
	padding: 10px 20px;
	line-height: 1.3;
	border-bottom: 1px solid #edf1f0;
}

.main-header-menu .sub-menu > .menu-item:last-child > .menu-link {
	border-bottom: 0;
}

/* Aktuelle Seite (und deren Elternpunkte) im Untermenü: grüne Schrift auf
   weißer Fläche. `!important`: Astras Inline-CSS für den transparenten Header
   färbt aktive Punkte weiß (Option transparent-submenu-h-color), ist
   spezifischer und kennt dort keine Hover-Fläche — auf Weiß unlesbar. */
.main-header-menu .sub-menu .current-menu-item > .menu-link,
.main-header-menu .sub-menu .current-menu-ancestor > .menu-link {
	color: var(--aktd-color-script-heading) !important;
	background: var(--aktd-color-white) !important;
}

/* Hover/Fokus: grüne Fläche, weiße Schrift — auch für den aktiven Punkt und
   für Elternpunkte, deren Unter-Untermenü gerade offen ist. Steht nach der
   Aktiv-Regel, damit Hover gewinnt; `!important` aus demselben Grund. */
.main-header-menu .sub-menu .menu-item:hover > .menu-link,
.main-header-menu .sub-menu .menu-item.focus > .menu-link,
.main-header-menu .sub-menu .menu-link:hover,
.main-header-menu .sub-menu .menu-link:focus {
	color: var(--aktd-color-white) !important;
	background: var(--aktd-color-script-heading) !important;
}

/* Pfeil des Elternpunkts mittig ausrichten */
.main-header-menu .menu-item-has-children > .menu-link .ast-icon {
	margin-left: 6px;
}

/* -------------------------------------------------------------------------
 * 13. Sektions-Abstände (statt Empty-Space-Elementen)
 *
 * Die Abstände zwischen den Inhaltsblöcken kommen automatisch aus der
 * Sektion — Redakteure müssen nichts einstellen und können keine Werte
 * zerschießen. Grundlage ist das Design-Raster (Ebene 2, 1200px-Artboard).
 * Vollflächige Banner bringen ihre Fläche selbst mit und bekommen daher
 * keinen Abstand.
 * ---------------------------------------------------------------------- */
.entry-content .vc_section {
	padding-top: 58px;
	padding-bottom: 58px;
}

/* Erste Sektion unter dem Hero: im Design 100px Luft bis zur Überschrift */
.entry-content .wpb-content-wrapper > .vc_section:first-child {
	padding-top: 100px;
}

/* Letzte Sektion vor dem Footer */
.entry-content .wpb-content-wrapper > .vc_section:last-child {
	padding-bottom: 88px;
}

/* Die Sektion VOR dem Muster-Banner (Gästekarte) schließt direkt an — sein
   Bild ragt nach oben heraus und bringt den Abstand selbst mit.
   Vor Zitat-, Bild- und Zwei-Spalten-Banner bleibt der normale Abstand
   (2026-10-15: vorher 0 → Kachel-Grid und Text-Bänder klebten auf der
   Startseite am Banner; Design Startseite 56–71 px, Ebene 1 94 px). */
.entry-content .vc_section:has(+ .vc_section .akt-pattern-banner) {
	padding-bottom: 0;
}

/* Nach einer Bannerfläche folgt im Design deutlich mehr Luft (~130px). */
.entry-content .vc_section:has(.akt-pattern-banner) + .vc_section,
.entry-content .vc_section:has(.akt-split-banner) + .vc_section,
.entry-content .vc_section:has(.akt-quote-banner) + .vc_section,
.entry-content .vc_section:has(.akt-image-banner) + .vc_section {
	padding-top: 130px;
}

/* Nach dem Zitat-Banner weniger Luft (Design Startseite 70 px, Ebene 1 mehr) */
.entry-content .vc_section:has(.akt-quote-banner) + .vc_section {
	padding-top: 90px;
}

/* Banner-Sektionen selbst bringen ihre Fläche mit — kein Abstand.
   Steht bewusst NACH der Regel oben, damit direkt aneinandergrenzende
   Banner (Wald-Card → Wanderstempel) bündig bleiben. */
.entry-content .vc_section:has(.akt-pattern-banner):has(.akt-pattern-banner),
.entry-content .vc_section:has(.akt-split-banner):has(.akt-split-banner),
.entry-content .vc_section:has(.akt-quote-banner):has(.akt-quote-banner),
.entry-content .vc_section:has(.akt-image-banner):has(.akt-image-banner) {
	/* doppeltes :has() nur zur Spezifität — schlägt die 130px-Regel oben,
	   damit zwei aufeinanderfolgende Banner bündig bleiben */
	padding-top: 0;
	padding-bottom: 0;
}

@media (max-width: 921px) {

	.entry-content .vc_section {
		padding-top: 40px;
		padding-bottom: 40px;
	}

	.entry-content .wpb-content-wrapper > .vc_section:first-child {
		padding-top: 56px;
	}

	.entry-content .wpb-content-wrapper > .vc_section:last-child {
		padding-bottom: 56px;
	}
}

/* -------------------------------------------------------------------------
 * 14. Silbentrennung (2026-10-09)
 *
 * Die Seite ist als Deutsch ausgezeichnet (`<html lang="de">`), daher trennt
 * der Browser nach deutschen Regeln. Fließtext überall; Überschriften erst
 * auf schmalen Bildschirmen, wo lange Komposita („Umweltinformations- …“)
 * sonst überstehen oder sehr ungleichmäßig umbrechen. Script-Überschriften
 * (Sisterhood) und Bebas-Versalien werden nie getrennt.
 * `overflow-wrap` als Rückfall für Browser ohne deutsches Trennwörterbuch.
 * ---------------------------------------------------------------------- */
.entry-content p,
.entry-content li,
.entry-content td,
.entry-content blockquote,
.site-footer p,
.site-footer li {
	-webkit-hyphens: auto;
	hyphens: auto;
	hyphenate-limit-chars: 8 4 4; /* erst ab 8 Zeichen, je Teil mind. 4 */
	overflow-wrap: break-word;
}

@media (max-width: 544px) {

	.entry-content h2,
	.entry-content h3,
	.entry-content h4 {
		-webkit-hyphens: auto;
		hyphens: auto;
		hyphenate-limit-chars: 8 4 4;
		overflow-wrap: break-word;
	}
}

.akt-heading__title,
.aktd-hero__title,
.akt-quote-banner__text,
.akt-button,
.akt-grid__button {
	-webkit-hyphens: manual;
	hyphens: manual;
}

/* -------------------------------------------------------------------------
 * 15. Bildergalerie (WPBakery „Bildergalerie“, Typ Slider) — 2026-10-12
 *
 * Kundenwunsch: keine Vor-/Zurück-Pfeile. Bedienung über die Punkte unter
 * dem Bild (Maus, Tastatur) und Wischen (Touch).
 * ---------------------------------------------------------------------- */
.wpb_gallery .flex-direction-nav {
	display: none !important; /* WPBakery/FlexSlider blenden die Pfeile per Inline-Logik ein */
}

.wpb_gallery .flex-control-nav {
	position: static;
	margin-top: 12px;
}

.wpb_gallery .flex-control-paging li a {
	background: rgba(0, 0, 0, 0.3);
}

.wpb_gallery .flex-control-paging li a.flex-active {
	background: var(--aktd-color-script-heading);
}

/* Galerien laufen seit 2026-10-20 über die volle Inhaltsbreite (Kundenwunsch);
   Bildformat 2:1 (1140×570) hält die Höhe bei ≈ 550 px. */

/* Footer-Logos Thüringen entdecken / Thüringer Wald verlinkt (2026-10-20) */
.aktd-footer-box .aktd-footer-logo-link {
	display: inline-block;
	line-height: 0;
}

.aktd-footer-box .aktd-footer-logo-link:hover img,
.aktd-footer-box .aktd-footer-logo-link:focus img {
	opacity: 0.85;
}

/* ==========================================================================
 * 16. Prospektbestellung (Contact Form 7, Formular „Prospektbestellung“) — 2026-11-09
 *     Markup aus inc/prospekt-bestellung.php (ohne CF7-Autop). Prospekte als
 *     Liste mit Stückzahl, Adresse im Raster; flache Flächen wie Kontaktbox.
 * ========================================================================== */
.aktd-bestellung__block {
	margin: 0 0 28px;
	padding: 24px 26px 26px;
	border: 0;
	border-top: 4px solid var(--aktd-color-script-heading);
	background: var(--aktd-color-white);
}

.aktd-bestellung__block legend {
	float: left;
	width: 100%;
	margin: 0 0 6px;
	padding: 0;
	font-family: var(--aktd-font-accent);
	font-size: 22px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--aktd-color-script-heading);
}

.aktd-bestellung__block legend + * {
	clear: left;
}

.aktd-bestellung__hinweis {
	margin: 0 0 16px;
	font-size: 14px;
	color: var(--aktd-color-font-muted);
}

.aktd-bestellung__liste {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 36px;
}

.aktd-bestellung__item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid #dfe7e4;
}

/* Vorschaubild (Titelblatt des Flyers), wie auf der bisherigen Website */
.aktd-bestellung__vorschau {
	flex: 0 0 64px;
	line-height: 0;
}

.aktd-bestellung__vorschau img {
	width: 64px;
	height: auto;
	max-height: 96px;
	object-fit: contain;
	object-position: left top;
	box-shadow: 0 1px 4px rgba(27, 27, 27, 0.25);
	transition: transform 0.2s ease;
}

.aktd-bestellung__vorschau:hover img {
	transform: scale(1.05);
}

.aktd-bestellung__info {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 14px;
	min-width: 0;
}

@media (prefers-reduced-motion: reduce) {

	.aktd-bestellung__vorschau img {
		transition: none;
	}
}

.aktd-bestellung__titel {
	flex: 1 1 200px;
	font-weight: 600;
	line-height: 1.35;
}

.aktd-bestellung .aktd-bestellung__pdf {
	font-size: 13px;
	white-space: nowrap;
	color: var(--aktd-color-script-heading); /* #26836f: 4,5:1 auf Weiß (Astra-Linkfarbe ist heller) */
}

.aktd-bestellung__anzahl {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	color: var(--aktd-color-font-muted);
}

.aktd-bestellung select {
	min-width: 72px;
	min-height: 40px;
	padding: 6px 10px;
	border: 1px solid #b9c6c2;
	border-radius: 0;
	background-color: var(--aktd-color-white);
	font-size: 15px;
}

.aktd-bestellung__felder {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 24px;
}

.aktd-bestellung__feld {
	display: block;
	font-weight: 600;
	font-size: 15px;
}

.aktd-bestellung__feld--breit {
	grid-column: 1 / -1;
}

.aktd-bestellung__feld input,
.aktd-bestellung__feld textarea {
	display: block;
	width: 100%;
	margin-top: 4px;
	padding: 10px 12px;
	border: 1px solid #b9c6c2;
	border-radius: 0;
	background: var(--aktd-color-white);
	font-weight: 400;
}

.aktd-bestellung__pflicht {
	color: #b3262e;
}

.aktd-bestellung .aktd-bestellung__abschluss a {
	color: #1f6e5d; /* 5,4:1 auf der grauen Sektion (#f1f5f4) */
}

.aktd-bestellung__abschluss .wpcf7-acceptance {
	display: block;
	margin-bottom: 18px;
}

.aktd-bestellung__abschluss .wpcf7-list-item {
	margin: 0;
}

.aktd-bestellung__abschluss input[type="submit"] {
	min-height: 48px;
	padding: 12px 32px;
	border: 0;
	cursor: pointer;
}

/* Prospektauswahl: Fehler nur über rote Umrandung + Meldung unter dem Formular (sonst wird die Auswahl breit) */
.aktd-bestellung .aktd-bestellung__anzahl .wpcf7-not-valid-tip {
	display: none;
}

.aktd-bestellung select[aria-invalid="true"] {
	border: 2px solid #b3262e;
}

.aktd-bestellung__abschluss input[type="submit"] {
	border-radius: 999px;
	font-family: var(--aktd-font-base);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.aktd-bestellung .wpcf7-not-valid-tip {
	flex-basis: 100%;
	margin-top: 4px;
	font-size: 13px;
	color: #b3262e;
}

@media (max-width: 921px) {

	.aktd-bestellung__liste,
	.aktd-bestellung__felder {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 544px) {

	.aktd-bestellung__block {
		padding: 18px 16px 20px;
	}
}

/* ==========================================================================
 * 17. Etappen-Kacheln Panoramaweg (Row-Klasse „aktd-etappen“) — 2026-11-09
 *     Alle Etappen in einer umbrechenden Zeile (Desktop 3, Tablet 2, Handy 1);
 *     Überschriften gleich hoch, damit die Outdooractive-Kacheln auf einer Linie starten.
 * ========================================================================== */
.aktd-etappen.vc_row-flex {
	flex-wrap: wrap;
}

.aktd-etappen .wpb_text_column h3 {
	margin-bottom: 12px;
}

@media (min-width: 768px) {

	.aktd-etappen .wpb_text_column h3 {
		min-height: 3.9em; /* 3 Zeilen */
	}
}