/*
 Theme Name:   Astra Child – Taxi Stern Heilbronn
 Theme URI:    https://taxistern-heilbronn.de/
 Description:  Child-Theme für Astra. Alle projektspezifischen Anpassungen (SEO, JSON-LD, Template-Overrides, CSS) gehören hierher, damit Astra-Updates nichts überschreiben.
 Author:       Taxi Stern Heilbronn
 Author URI:   https://taxistern-heilbronn.de/
 Template:     astra
 Version:      1.7.0
 Text Domain:  astra-child
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/

/* ==========================================================================
   Eigene Styles ab hier. Astra-CSS wird vorher geladen (siehe functions.php),
   dieses Stylesheet gewinnt also bei gleicher Spezifität.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Mobile Kontaktleiste (siehe inc/sticky-call-bar.php)
   Nur bis 921 px sichtbar — das ist Astras Umbruchpunkt für die Mobilansicht.
   -------------------------------------------------------------------------- */

.asc-callbar {
	display: none;
}

@media (max-width: 921px) {

	.asc-callbar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 9990;
		display: flex;
		gap: 1px;
		background: #1f2430;
		padding-bottom: env(safe-area-inset-bottom, 0);
		box-shadow: 0 -2px 12px rgba(0, 0, 0, .25);
	}

	.asc-callbar__btn {
		flex: 1 1 50%;
		/* 56 px Höhe — deutlich über den geforderten 48 px Mindestgröße. */
		min-height: 56px;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: .5em;
		padding: .75em .5em;
		font-size: 1rem;
		font-weight: 600;
		line-height: 1.2;
		text-align: center;
		text-decoration: none;
		color: #fff;
	}

	.asc-callbar__btn:hover,
	.asc-callbar__btn:focus {
		color: #fff;
		text-decoration: none;
	}

	.asc-callbar__btn:focus-visible {
		outline: 3px solid #fff;
		outline-offset: -3px;
	}

	.asc-callbar__btn--tel {
		background: #facc15;
		color: #1f2430;
	}

	.asc-callbar__btn--tel:hover,
	.asc-callbar__btn--tel:focus {
		background: #eab308;
		color: #1f2430;
	}

	.asc-callbar__btn--wa {
		background: #25d366;
		color: #06331a;
	}

	.asc-callbar__btn--wa:hover,
	.asc-callbar__btn--wa:focus {
		background: #1eb955;
		color: #06331a;
	}

	.asc-callbar__icon {
		width: 22px;
		height: 22px;
		flex: 0 0 22px;
		fill: currentColor;
	}

	/* Verhindert, dass die Leiste den Seitenfuß überdeckt. */
	body {
		padding-bottom: 56px;
	}

	/* Chaty-Bubble nach oben schieben, damit sie nicht auf der Leiste sitzt. */
	.chaty-widget,
	#chaty-widget-0 {
		bottom: 68px !important;
	}
}


/* ==========================================================================
   STARTSEITE
   ==========================================================================
   Gehört zum Inhalt aus content/startseite.html. Alle Klassen sind mit "ts-"
   vorangestellt und zusätzlich in .ts-home gekapselt, damit nichts in Astra,
   in Gutenberg-Blöcke oder in das Buchungsformular hineinwirkt.

   Bewusst kein zweites Stylesheet: Der Server liefert HTTP/1.1 aus, und die
   Startseite zieht bereits 30 Stylesheets. Eine weitere render-blockierende
   Datei kostet dort mehr Zeit (DNS entfällt zwar, aber Anfrage, Warteschlange
   und Round-Trip nicht) als die rund 14 KB, die hier an die ohnehin geladene
   style.css angehängt werden — komprimiert per mod_deflate etwa 3 KB.

   Kein JavaScript. Keine Webfonts über die von Astra geladenen hinaus.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Freiraum für den transparenten Header — für einfache Inhaltsseiten
   ==========================================================================
   Astra setzt .ast-theme-transparent-header #masthead auf position:absolute.
   Der Header liegt damit ÜBER dem Inhalt und beansprucht keine Höhe. Seiten,
   die als Spectra-Container gebaut sind, lösen das über ihre eigene
   Obermarge (z. B. das Impressum mit topMarginDesktop: 200). Eine Seite aus
   einem schlichten „Benutzerdefiniertes HTML"-Block hat das nicht — ihr erster
   Absatz läuft dann unter Logo und Menü.

   Diese Klasse an das äußerste <div> einer solchen Seite hängen.
   Höhe des Headers gemessen: obere Leiste 50px + Hauptleiste ~110px
   (min-height 80px, aufgedrückt vom 150px breiten Transparenz-Logo) ≈ 180px
   Desktop, mobil ≈ 160px. Die Untergrenze von 11rem = 176px deckt den mobilen
   Fall ab, der vw-Anteil wächst mit dem Desktop-Header mit.
   -------------------------------------------------------------------------- */

/* .ts-svc tragen die vier Leistungsseiten Personen-, Kurier-, Pauschal- und
   Fernfahrten. Sie sind wie .ts-seite reine HTML-Blöcke ohne Spectra-Container
   und hatten deshalb denselben Fehler: die H1 lief unter das Menü.

   Der Kindkombinator ist hier wichtig. Auf /leistungen/, /ueber-uns/,
   /kontakt/ und /taxi-heilbronn-aktuelles/ stecken die ts-Rahmen INNERHALB
   eines Spectra-Containers, der bereits 200 px Freiraum mitbringt. Als
   Nachfahren-Selektor geschrieben bekämen die den Abstand ein zweites Mal.

   Beiträge sind nicht betroffen: dort ist der transparente Header
   abgeschaltet, der Header beansprucht also normal Platz (geprüft an
   /schuelerfahrten-heilbronn/ und /zuzahlung-krankenfahrt/). */
.entry-content .ts-seite,
.entry-content > .ts-svc {
	padding-top: clamp(11rem, 6rem + 8vw, 15rem);
}

/* Dieselben Farbtoken wie .ts-home, damit die Schaltflächen-Regeln weiter
   unten für beide Kontexte gelten und nicht doppelt gepflegt werden müssen. */
.ts-seite {
	--ts-gelb:   var(--ast-global-color-0, #f1bc1e);
	--ts-dunkel: var(--ast-global-color-2, #010712);
}

/* --------------------------------------------------------------------------
   Lesbarkeit der Hauptnavigation
   ==========================================================================
   Astra faerbt die Menuelinks gelb und laesst die Menuezeile auf dem Desktop
   voellig transparent:
       .ast-theme-transparent-header .main-header-bar { background: none }
   Der Balken rgba(0,0,0,.48) greift nur unterhalb des Mobil-Umbruchpunkts.
   Damit stand das Menue je nach Seite auf voellig verschiedenem Grund: auf
   der Startseite ueber dem dunklen Hero (Gelb lesbar), auf allen anderen
   Seiten ueber hellem, beigem Seitengrund (Gelb praktisch unsichtbar).

   Eine Textfarbe allein kann das nicht loesen. Deshalb bekommt die Zeile
   einen halbtransparenten dunklen Untergrund — das Hero-Bild bleibt sichtbar,
   die Schrift wird aber auf JEDER Seite lesbar. Weiss auf rgba(1,7,18,.55)
   ueber hellem Grund ergibt gut 12:1, ueber dem Hero noch mehr.

   Gelb bleibt als Akzent fuer Hover und die aktive Seite.
   Das Mobilmenue liegt in .ast-builder-menu-mobile und ist nicht betroffen.
   -------------------------------------------------------------------------- */

.ast-theme-transparent-header .ast-primary-header-bar.main-header-bar {
	background-color: rgba(1, 7, 18, .55);
}

/* Nur wo der Browser es kann – sonst bleibt es bei der reinen Deckung. */
@supports (backdrop-filter: blur(6px)) {

	.ast-theme-transparent-header .ast-primary-header-bar.main-header-bar {
		backdrop-filter: blur(6px);
	}
}

/* 0,4,0 – schlaegt Astras .ast-builder-menu-1 .menu-item > .menu-link (0,3,0). */
.ast-builder-menu-1 .main-header-menu .menu-item > .menu-link,
.ast-builder-menu-1 .main-header-menu .menu-item > .ast-menu-toggle {
	color: #fff;
}

.ast-builder-menu-1 .main-header-menu .menu-item:hover > .menu-link,
.ast-builder-menu-1 .main-header-menu .menu-item:hover > .ast-menu-toggle,
.ast-builder-menu-1 .main-header-menu .current-menu-item > .menu-link,
.ast-builder-menu-1 .main-header-menu .current-menu-ancestor > .menu-link {
	color: var(--ast-global-color-0, #f1bc1e);
}

/* --------------------------------------------------------------------------
   Lesbarkeit im Aufklappmenü
   ==========================================================================
   Astra faerbt alle Menuelinks gelb:
       .ast-builder-menu-1 .menu-item > .menu-link { color: --ast-global-color-0 }
   Ueber dem dunklen Hero ist das richtig. Das Untermenue hat aber einen
   weissen Grund — dort ergibt Gelb (#f1bc1e) auf Weiss nur rund 1,9:1
   Kontrast. Die WCAG-Untergrenze fuer normalen Text liegt bei 4,5:1; die
   Eintraege waren also fuer viele Menschen kaum zu entziffern.

   Die gelbe Regel liegt bei Spezifitaet 0,3,0 und gewinnt bislang nur, weil
   sie spaeter im Stylesheet steht. Mit .sub-menu als viertem Klassenglied
   kommen wir auf 0,4,0 und damit sauber darueber — ohne !important.

   Betroffen ist ausschliesslich das Untermenue. Die oberste Menuezeile
   bleibt gelb, denn sie steht auf dem dunklen Bild.
   -------------------------------------------------------------------------- */

.ast-builder-menu-1 .main-header-menu .sub-menu .menu-item > .menu-link,
.ast-theme-transparent-header .ast-builder-menu-1 .main-header-menu .sub-menu .menu-item > .menu-link {
	color: var(--ast-global-color-2, #010712);
}

/* Beim Überfahren bleibt der Text dunkel und der Grund tönt sich sanft ein.
   Bewusst kein Farbwechsel des Textes: Jede hellere Farbe auf Weiss brächte
   das Kontrastproblem zurück, nur an anderer Stelle. */
.ast-builder-menu-1 .main-header-menu .sub-menu .menu-item:hover > .menu-link,
.ast-builder-menu-1 .main-header-menu .sub-menu .menu-item.current-menu-item > .menu-link,
.ast-theme-transparent-header .ast-builder-menu-1 .main-header-menu .sub-menu .menu-item:hover > .menu-link,
.ast-theme-transparent-header .ast-builder-menu-1 .main-header-menu .sub-menu .menu-item.current-menu-item > .menu-link {
	color: var(--ast-global-color-2, #010712);
	background-color: #fdf6dd;
}

/* Tastaturbedienung sichtbar machen – Astra setzt hier nichts Eigenes. */
.ast-builder-menu-1 .main-header-menu .sub-menu .menu-item > .menu-link:focus-visible {
	outline: 3px solid var(--ast-global-color-0, #f1bc1e);
	outline-offset: -3px;
}

/* --------------------------------------------------------------------------
   Symbolbehälter im Buchungsformular (siehe inc/ecab-ueberschriften.php)
   ==========================================================================
   Das E-cab-Plugin verpackt zwei dekorative Symbole in <h1>. Der Filter im
   Child-Theme macht daraus <div>; damit die Symbole ihre Größe behalten, wird
   hier die Typografie übernommen, die Astra für h1 vergibt.
   Werte am 10.08.2026 aus dem ausgelieferten CSS abgelesen:
   50px, ab 921px 38px, ab 544px 28px. Der Außenabstand stammt aus Astras
   Regel h1..h6 { margin-bottom: 20px }.
   -------------------------------------------------------------------------- */

.ts-ecab-icon {
	margin: 0 0 20px;
	font-size: 50px;
	font-weight: 500;
	line-height: 1.2em;
}

@media (max-width: 921px) {

	.ts-ecab-icon {
		font-size: 38px;
	}
}

@media (max-width: 544px) {

	.ts-ecab-icon {
		font-size: 28px;
	}
}

/* --------------------------------------------------------------------------
   Sprungmarken
   scroll-margin-top ist bei dieser Site Pflicht: Der transparente Header
   schwebt über dem Inhalt (#masthead ist position:absolute). Ohne diesen Wert
   landet jedes Sprungziel unter Logo und Menü — derselbe Effekt, der schon den
   Seitenanfang betroffen hat.
   -------------------------------------------------------------------------- */

.entry-content .ts-seite :where(h2, h3)[id] {
	scroll-margin-top: clamp(11rem, 6rem + 6vw, 14rem);
}

.entry-content .ts-seite .ts-seite__aktion {
	margin: 1.5rem 0 0;
}

@media (prefers-reduced-motion: no-preference) {

	html {
		scroll-behavior: smooth;
	}
}

/* --------------------------------------------------------------------------
   Tabellen auf Inhaltsseiten
   Astra bringt für Tabellen im Inhalt praktisch keine Gestaltung mit — sie
   stehen sonst rahmenlos auf dem Seitenhintergrund, ohne Zeilentrennung.
   Diese Regeln geben ihnen dieselbe Sprache wie die Karten der Startseite:
   weiße Fläche, Rand in der Sandfarbe der Palette, 18px Radius.
   Die Hülle scrollt waagerecht, damit breite Tabellen nie die ganze Seite
   verschieben.
   -------------------------------------------------------------------------- */

.entry-content .ts-seite .wp-block-table {
	margin: 1.75rem 0;
	overflow-x: auto;
	border: 1px solid var(--ast-global-color-6, #f0e6c5);
	border-radius: 18px;
	background: #fff;
}

.entry-content .ts-seite .wp-block-table table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: .96875rem;
}

.entry-content .ts-seite .wp-block-table caption {
	caption-side: top;
	padding: .9rem 1.15rem;
	border-bottom: 1px solid var(--ast-global-color-6, #f0e6c5);
	font-size: .8125rem;
	font-weight: 600;
	text-align: left;
	color: #5c6373;
}

.entry-content .ts-seite .wp-block-table :where(th, td) {
	padding: .85rem 1.15rem;
	border: 0;
	border-bottom: 1px solid var(--ast-global-color-6, #f0e6c5);
	text-align: left;
	vertical-align: top;
}

.entry-content .ts-seite .wp-block-table thead th {
	background: #fdf6dd;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: #5c6373;
}

.entry-content .ts-seite .wp-block-table tbody th {
	font-weight: 600;
	color: var(--ast-global-color-2, #010712);
}

/* Ziffern auf gleicher Breite – Beträge stehen dadurch sauber untereinander. */
.entry-content .ts-seite .wp-block-table tbody td {
	font-variant-numeric: tabular-nums;
}

.entry-content .ts-seite .wp-block-table tbody tr:last-child :where(th, td) {
	border-bottom: 0;
}

.entry-content .ts-seite .wp-block-table tbody tr:hover :where(th, td) {
	background: #fffdf5;
}

/* Fahrzeugarten, die nicht angeboten werden: sichtbar zurückgenommen.
   Der amtliche Tarif bleibt vollständig abgebildet — er ist Teil der
   behördlichen Festsetzung — aber niemand liest daraus ein Angebot heraus.
   Siehe § 5 UWG und die Bestätigung vom 29.07.2026 (kein Großraum-, kein
   Rollstuhltaxi). Der erklärende Text steht zusätzlich im Markup, nicht nur
   in dieser CSS-Regel. */
.entry-content .ts-seite tr.ts-nicht-im-angebot :where(th, td) {
	color: #8f949e;
}

.entry-content .ts-seite .ts-randnotiz {
	display: block;
	margin-top: .15rem;
	font-size: .8125rem;
	font-weight: 400;
	color: #a8adb6;
}

/* --------------------------------------------------------------------------
   Ausbruch aus Astras Inhaltsbreite
   Astra klemmt jeden direkten Kindblock des Inhalts ab:
       .entry-content[data-ast-blocks-layout] > * { max-width: 750px }
   Die Gutenberg-Container der alten Startseite sind über die Klasse
   "alignfull" da herausgesprungen — der Trustindex-Block tut das bis heute.
   Ohne diese Regel entstünde genau der Wechsel schmal → randlos → schmal.
   Die Technik ist dieselbe, die Astra selbst für .alignfull verwendet.
   -------------------------------------------------------------------------- */

.entry-content[data-ast-blocks-layout] > .ts-home,
.ast-plain-container.ast-no-sidebar .entry-content > .ts-home {
	max-width: none;
	width: auto;
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
}

/* Der Inhalt wird innen wieder auf Containerbreite geführt. 1200 px ist Astras
   --ast-container-width, damit stehen die Abschnitte bündig zum Rest der Site.
   max() sorgt dafür, dass auf schmalen Bildschirmen der Seitenabstand gewinnt. */
.ts-home > * {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 1.25rem;
}

/* Der Hero läuft bewusst randlos durch. Sein Textblock wird über das
   Innenabstands-max() auf dieselbe 1200-px-Spur gesetzt wie alles andere,
   damit die Überschrift bündig zu den Abschnitten darunter steht. */
.ts-home > .ts-hero {
	max-width: none;
	border-radius: 0;
	padding-inline: max(1.25rem, calc(50vw - 600px));
	/* Die Site nutzt einen transparenten Header: Astra setzt
	   .ast-theme-transparent-header #masthead auf position:absolute, der
	   Header liegt also ÜBER dem Hero statt darüber zu stehen. Ohne diesen
	   Freiraum läuft die H1 unter Logo und Menü.
	   Zusammensetzung: obere Leiste min-height 50px + Hauptleiste
	   min-height 80px + Innenabstände + das 150px breite Transparenz-Logo.
	   Bewusst grosszügig: zu viel Luft im Hero sieht ruhig aus, zu wenig
	   verdeckt die Überschrift. */
	padding-top: clamp(11rem, 6rem + 10vw, 19rem);
}

.ts-home {
	/* Farben aus Astras globaler Palette, mit festem Rückfallwert, falls die
	   Variablen einmal nicht gesetzt sind. */
	--ts-gelb:    var(--ast-global-color-0, #f1bc1e);
	--ts-dunkel:  var(--ast-global-color-2, #010712);
	--ts-hell:    var(--ast-global-color-5, #fff8f9);
	--ts-rand:    var(--ast-global-color-6, #f0e6c5);
	--ts-text:    #2b3140;
	--ts-gedimmt: #5c6373;
	--ts-radius:  18px;

	color: var(--ts-text);
}

/* Astra setzt großzügige Blockabstände. Innerhalb der Startseite steuern die
   Abschnitte ihren Abstand selbst. */
.ts-home > * {
	margin-block: 0;
}

.ts-home :where(h1, h2, h3) {
	color: var(--ts-dunkel);
	text-wrap: balance;
}

/* Schaltflächen sind hier ausgenommen. Sie färben sich selbst und würden von
   einer allgemeinen Linkfarbe übersteuert – im Abschluss-Block hat genau das
   gelben Text auf gelben Grund erzeugt. */
.ts-home a:not(.ts-btn) {
	color: #b8860b;
	text-underline-offset: .18em;
}

.ts-home a:not(.ts-btn):hover,
.ts-home a:not(.ts-btn):focus-visible {
	color: var(--ts-dunkel);
}

.ts-home :where(a, .ts-btn):focus-visible {
	outline: 3px solid var(--ts-dunkel);
	outline-offset: 3px;
	border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Hero
   Das Bild liegt als echtes <img> im Markup, nicht als CSS-Hintergrund: nur so
   findet der Preload-Scanner des Browsers es sofort beim Parsen des HTML und
   kann srcset auswerten. Ein background-image wird erst nach dem CSS entdeckt.
   width/height am <img> plus aspect-ratio hier verhindern Layout-Sprünge (CLS).
   -------------------------------------------------------------------------- */

.ts-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-radius: var(--ts-radius);
	background: var(--ts-dunkel);
	display: flex;
	align-items: flex-end;
	min-height: min(62vh, 520px);
	/* Nur Block-Richtung. Der seitliche Abstand kommt aus der Ausbruchs-Regel
	   weiter oben (padding-inline mit max()) und darf hier nicht von einer
	   Kurzform überschrieben werden. */
	padding-block: clamp(1.5rem, 4vw, 3.5rem);
}

.ts-hero__bild {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 60%;
}

/* Abdunklung für lesbaren Text. Von links unten nach rechts oben auslaufend,
   damit das Fahrzeug auf der rechten Bildhälfte sichtbar bleibt. */
.ts-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(to top, rgba(1, 7, 18, .92) 0%, rgba(1, 7, 18, .72) 38%, rgba(1, 7, 18, .25) 72%, rgba(1, 7, 18, .1) 100%),
		linear-gradient(to right, rgba(1, 7, 18, .65) 0%, rgba(1, 7, 18, 0) 65%);
}

.ts-hero__inhalt {
	max-width: 42rem;
}

.ts-hero__kicker {
	margin: 0 0 .6rem;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ts-gelb);
}

.ts-home .ts-hero h1 {
	margin: 0 0 .7rem;
	color: #fff;
	font-size: clamp(1.9rem, 1.15rem + 2.6vw, 3.1rem);
	line-height: 1.12;
}

.ts-hero__text {
	margin: 0 0 1.6rem;
	max-width: 34rem;
	font-size: clamp(1rem, .96rem + .25vw, 1.125rem);
	line-height: 1.6;
	color: rgba(255, 255, 255, .9);
}

.ts-hero__aktionen {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
}

.ts-hero__merkmale {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.4rem;
	margin: 1.6rem 0 0;
	padding: 0;
	list-style: none;
	font-size: .875rem;
	color: rgba(255, 255, 255, .85);
}

.ts-hero__merkmale li {
	margin: 0;
	padding-left: 1.4rem;
	position: relative;
}

/* Häkchen als CSS-Form statt als Icon-Font oder SVG – spart eine Anfrage. */
.ts-hero__merkmale li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .34em;
	width: .42em;
	height: .72em;
	border: solid var(--ts-gelb);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   Schaltflächen
   -------------------------------------------------------------------------- */

.entry-content :is(.ts-home, .ts-seite) .ts-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55em;
	/* 52 px Mindesthöhe – komfortabel über den 48 px für Touch-Ziele. */
	min-height: 52px;
	padding: .8em 1.5em;
	border: 2px solid transparent;
	border-radius: 999px;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.entry-content :is(.ts-home, .ts-seite) .ts-btn--primaer {
	background: var(--ts-gelb);
	color: var(--ts-dunkel);
}

.entry-content :is(.ts-home, .ts-seite) .ts-btn--primaer:hover,
.entry-content :is(.ts-home, .ts-seite) .ts-btn--primaer:focus-visible {
	background: #d9a712;
	color: var(--ts-dunkel);
}

.entry-content :is(.ts-home, .ts-seite) .ts-btn--sekundaer {
	border-color: rgba(255, 255, 255, .55);
	color: #fff;
}

.entry-content :is(.ts-home, .ts-seite) .ts-btn--sekundaer:hover,
.entry-content :is(.ts-home, .ts-seite) .ts-btn--sekundaer:focus-visible {
	background: #fff;
	border-color: #fff;
	color: var(--ts-dunkel);
}

.entry-content :is(.ts-home, .ts-seite) .ts-btn--hell {
	border-color: rgba(255, 255, 255, .5);
	color: #fff;
}

.entry-content :is(.ts-home, .ts-seite) .ts-btn--hell:hover,
.entry-content :is(.ts-home, .ts-seite) .ts-btn--hell:focus-visible {
	background: #fff;
	border-color: #fff;
	color: var(--ts-dunkel);
}

.ts-ico,
.ts-btn__ico {
	width: 1.15em;
	height: 1.15em;
	flex: 0 0 auto;
	fill: currentColor;
}

/* --------------------------------------------------------------------------
   Abschnitte
   content-visibility überspringt das Layout der noch nicht sichtbaren
   Abschnitte beim ersten Rendern. contain-intrinsic-size gibt eine geschätzte
   Höhe vor, damit die Bildlaufleiste dabei nicht springt.
   -------------------------------------------------------------------------- */

.ts-abschnitt {
	padding-block: clamp(2.5rem, 1.6rem + 3vw, 4.5rem);
	content-visibility: auto;
	contain-intrinsic-size: auto 600px;
}

.ts-abschnitt--getoent {
	margin-top: clamp(2rem, 1.4rem + 2vw, 3.5rem);
	padding-inline: clamp(1.25rem, .5rem + 2.5vw, 3rem);
	border-radius: var(--ts-radius);
	background: var(--ts-hell);
	border: 1px solid var(--ts-rand);
}

.ts-home .ts-abschnitt > h2,
.ts-home .ts-cta > h2 {
	margin: 0 0 .8rem;
	font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.35rem);
	line-height: 1.2;
}

.ts-abschnitt__intro {
	max-width: 46rem;
	margin: 0 0 2rem;
	font-size: clamp(1rem, .97rem + .18vw, 1.0625rem);
	line-height: 1.65;
	color: var(--ts-gedimmt);
}

/* --------------------------------------------------------------------------
   Leistungskarten
   -------------------------------------------------------------------------- */

.ts-karten {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.ts-karte {
	padding: 1.6rem;
	border: 1px solid var(--ts-rand);
	border-radius: var(--ts-radius);
	background: #fff;
	transition: border-color .15s ease, transform .15s ease;
}

.ts-karten:not(.ts-karten--kompakt) .ts-karte:hover {
	border-color: var(--ts-gelb);
	transform: translateY(-2px);
}

.ts-karte__ico {
	width: 30px;
	height: 30px;
	margin-bottom: .9rem;
	fill: var(--ts-gelb);
}

.ts-home .ts-karte h3 {
	margin: 0 0 .55rem;
	font-size: 1.1875rem;
	line-height: 1.3;
}

.ts-home .ts-karte h3 a {
	color: inherit;
	text-decoration: none;
}

.ts-home .ts-karte h3 a:hover,
.ts-home .ts-karte h3 a:focus-visible {
	text-decoration: underline;
}

.ts-karte p {
	margin: 0;
	font-size: .96875rem;
	line-height: 1.62;
	color: var(--ts-gedimmt);
}

.ts-karten--kompakt .ts-karte {
	background: var(--ts-hell);
}

/* Weiterführende Leistungen */

.ts-weitere {
	display: grid;
	gap: .5rem 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	margin: 1.75rem 0 0;
	padding: 1.25rem 0 0;
	border-top: 1px solid var(--ts-rand);
	list-style: none;
	font-size: .9375rem;
	color: var(--ts-gedimmt);
}

.ts-weitere li {
	margin: 0;
}

/* --------------------------------------------------------------------------
   Servicegebiet
   -------------------------------------------------------------------------- */

.ts-orte {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ts-orte li {
	margin: 0;
	padding: .38em .9em;
	border: 1px solid var(--ts-rand);
	border-radius: 999px;
	background: #fff;
	font-size: .875rem;
	white-space: nowrap;
}

.ts-orte li a {
	text-decoration: none;
	color: inherit;
}

.ts-hinweis {
	margin: 1.5rem 0 0;
	font-size: .9375rem;
	color: var(--ts-gedimmt);
}

/* --------------------------------------------------------------------------
   Tarif-Tabelle
   Die Hülle scrollt waagerecht, falls der Platz nicht reicht – die Seite
   selbst bekommt dadurch nie einen waagerechten Bildlauf.
   -------------------------------------------------------------------------- */

.ts-tabelle-huelle {
	overflow-x: auto;
	margin-bottom: 1.5rem;
	border: 1px solid var(--ts-rand);
	border-radius: var(--ts-radius);
	background: #fff;
}

.ts-home .ts-tabelle {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: .96875rem;
}

.ts-home .ts-tabelle caption {
	padding: .9rem 1.1rem;
	border-bottom: 1px solid var(--ts-rand);
	font-size: .8125rem;
	font-weight: 600;
	text-align: left;
	color: var(--ts-gedimmt);
}

.ts-home .ts-tabelle :where(th, td) {
	padding: .8rem 1.1rem;
	border: 0;
	border-bottom: 1px solid var(--ts-rand);
	text-align: left;
	vertical-align: top;
}

.ts-home .ts-tabelle thead th {
	background: var(--ts-hell);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--ts-gedimmt);
	white-space: nowrap;
}

.ts-home .ts-tabelle tbody th {
	font-weight: 600;
	color: var(--ts-dunkel);
}

.ts-home .ts-tabelle tbody td {
	font-variant-numeric: tabular-nums;
}

.ts-home .ts-tabelle tbody tr:last-child :where(th, td) {
	border-bottom: 0;
}

/* --------------------------------------------------------------------------
   Buchungsschritte
   Die Nummerierung kommt aus einem CSS-Zähler statt aus dem Markup – so steht
   im HTML kein bedeutungsloses „Step-01" mehr, das Screenreader vorlesen.
   -------------------------------------------------------------------------- */

.ts-schritte {
	counter-reset: ts-schritt;
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.ts-schritt {
	counter-increment: ts-schritt;
	margin: 0;
	padding-top: 3.4rem;
	position: relative;
}

.ts-schritt::before {
	content: counter(ts-schritt, decimal-leading-zero);
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--ts-gelb);
	color: var(--ts-dunkel);
	font-size: .875rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.ts-home .ts-schritt h3 {
	margin: 0 0 .45rem;
	font-size: 1.125rem;
}

.ts-schritt p {
	margin: 0;
	font-size: .96875rem;
	line-height: 1.62;
	color: var(--ts-gedimmt);
}

.ts-home .ts-tel {
	font-weight: 700;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Häufige Fragen
   Bewusst flache <h3>/<p>-Paare ohne Umschließung: Genau dieses Muster liest
   inc/schema-gemeinden.php aus, um daraus FAQPage-Markup zu erzeugen. Ein
   <details>-Element oder ein zwischengeschobenes <div> würde die Erkennung
   aushebeln, und das Markup wiche dann vom sichtbaren Text ab.
   -------------------------------------------------------------------------- */

.ts-home .ts-faq h3 {
	margin: 1.75rem 0 .5rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--ts-rand);
	font-size: 1.0625rem;
	line-height: 1.4;
}

.ts-home .ts-faq h3:first-of-type {
	margin-top: .5rem;
}

.ts-home .ts-faq p {
	max-width: 46rem;
	margin: 0;
	font-size: .96875rem;
	line-height: 1.65;
	color: var(--ts-gedimmt);
}

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

.ts-cta {
	margin-top: clamp(2rem, 1.4rem + 2vw, 3.5rem);
	padding: clamp(2rem, 1.2rem + 3vw, 3.5rem);
	border-radius: var(--ts-radius);
	background: var(--ts-dunkel);
	color: rgba(255, 255, 255, .88);
	content-visibility: auto;
	contain-intrinsic-size: auto 420px;
}

.ts-home .ts-cta h2 {
	color: #fff;
}

.ts-cta > p {
	max-width: 40rem;
	margin: 0 0 1.75rem;
	font-size: 1.0625rem;
	line-height: 1.6;
}

.ts-cta__aktionen {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-bottom: 2rem;
}

.ts-nap {
	margin: 0;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, .16);
	font-size: .9375rem;
	font-style: normal;
	line-height: 1.7;
}

.ts-nap strong {
	color: #fff;
}

/* Gilt nur für Textlinks im Abschluss-Block (Telefonnummer, „Kontakt und
   Anfahrt"), nicht für die Schaltflächen darüber. */
.ts-home .ts-cta a:not(.ts-btn) {
	color: var(--ts-gelb);
}

.ts-home .ts-cta a:not(.ts-btn):hover,
.ts-home .ts-cta a:not(.ts-btn):focus-visible {
	color: #fff;
}

.ts-home .ts-cta :where(a, .ts-btn):focus-visible {
	outline-color: #fff;
}

/* --------------------------------------------------------------------------
   Schmale Bildschirme
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {

	/* Muss auf .ts-home > .ts-hero zielen, sonst gewinnt die Regel oben:
	   .ts-hero allein hat die geringere Spezifität und käme nicht durch.
	   Der mobile Header ist niedriger als der Desktop-Header, deshalb hier
	   weniger Freiraum. */
	/* Muss auf .ts-home > .ts-hero zielen, sonst gewinnt die Regel oben:
	   .ts-hero allein hat die geringere Spezifität und käme nicht durch.
	   Gemessen an der Mobilansicht ist der Header rund 160 px hoch
	   (gelbe Leiste mit den zwei Rufnummern ~85 px, darunter Logo,
	   „Jetzt Buchen" und Menüknopf ~75 px). 12rem = 192px lässt Luft. */
	.ts-home > .ts-hero {
		min-height: 0;
		padding-top: 12rem;
	}

	.ts-hero__merkmale {
		flex-direction: column;
		gap: .35rem;
	}

	.entry-content :is(.ts-home, .ts-seite) .ts-btn {
		width: 100%;
	}

	.ts-orte li {
		font-size: .8125rem;
	}
}

/* --------------------------------------------------------------------------
   Bewegung reduzieren
   -------------------------------------------------------------------------- */

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

	.ts-home * {
		transition: none !important;
	}

	.ts-karten:not(.ts-karten--kompakt) .ts-karte:hover {
		transform: none;
	}
}