/*
 * KTS Raumgewinn — Theme-Styles.
 * Ergänzt theme.json. Farben und Abstände kommen als CSS-Variablen von dort,
 * hier steht nur, was sich über theme.json nicht ausdrücken lässt.
 */

:root {
	--kts-blau: var(--wp--preset--color--blau, #083c62);
	--kts-blau-tief: var(--wp--preset--color--blau-tief, #052b47);
	--kts-orange: var(--wp--preset--color--orange, #e49838);
	--kts-orange-dunkel: var(--wp--preset--color--orange-dunkel, #c97f26);
	--kts-anthrazit: var(--wp--preset--color--anthrazit, #414141);
	--kts-grau: var(--wp--preset--color--grau, #666);
	--kts-linie: var(--wp--preset--color--linie, #dde3ea);
	--kts-flaeche: var(--wp--preset--color--flaeche, #f4f7fa);
	--kts-radius: 8px;
}

html {
	scroll-behavior: smooth;
}

/* Anker landen nicht unter dem klebenden Kopf. */
[id] {
	scroll-margin-top: 6rem;
}

body {
	-webkit-font-smoothing: antialiased;
	text-wrap: pretty;
}

h1, h2, h3 {
	text-wrap: balance;
}

:where(a, button, summary, input, select, textarea):focus-visible {
	outline: 3px solid var(--kts-orange);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ---------------------------------------------------------------- Kopfbereich */

/* Ohne Trennlinie unter dem Logo — auf Kundenwunsch. Der Farbwechsel zum Hero
   trennt genug; auf hellen Unterseiten hält ein leiser Schatten die Kante. */
.kts-kopf {
	position: sticky;
	top: 0;
	z-index: 20;
	padding-block: 0.75rem;
	box-shadow: 0 1px 0 rgba(8, 60, 98, 0.04);
}

.kts-kopf__reihe {
	gap: clamp(1rem, 3vw, 2.5rem);
}

.kts-kopf__rechts {
	gap: clamp(1rem, 2.5vw, 2rem);
}

.kts-kopf .wp-block-site-logo img {
	display: block;
	height: auto;
}

.kts-nav {
	font-family: var(--wp--preset--font-family--outfit);
	font-weight: 600;
	gap: clamp(1rem, 2vw, 1.75rem);
}

.kts-nav a {
	color: var(--kts-blau);
	text-decoration: none;
	padding-block: 0.35rem;
	border-block-end: 2px solid transparent;
	transition: border-color 180ms ease, color 180ms ease;
}

.kts-nav a:hover {
	color: var(--kts-orange-dunkel);
	border-block-end-color: var(--kts-orange);
}

.kts-kopf__tel p {
	margin: 0;
	font-family: var(--wp--preset--font-family--outfit);
	font-weight: 800;
	font-size: 1.25rem;
	white-space: nowrap;
}

.kts-kopf__tel a {
	color: var(--kts-blau);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.kts-kopf__tel a::before {
	content: "";
	inline-size: 1.15em;
	block-size: 1.15em;
	background: var(--kts-orange);
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .3 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.kts-kopf__tel a:hover {
	color: var(--kts-orange-dunkel);
}

/* ------------------------------------------------------------------ Bausteine */

.kts-augenbraue {
	font-family: var(--wp--preset--font-family--outfit);
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--kts-orange);
	margin-block-end: 0.75rem;
}

/* Im Hero als Plakette, damit der Einstieg nicht mit Kleinschrift beginnt. */
.kts-hero .kts-augenbraue {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.45rem 0.9rem;
	border: 1px solid rgba(228, 152, 56, 0.45);
	border-radius: 100px;
	background: rgba(228, 152, 56, 0.1);
	margin-block-end: 1.5rem;
}

.kts-hero .kts-augenbraue::before {
	content: "";
	inline-size: 0.5rem;
	block-size: 0.5rem;
	border-radius: 50%;
	background: var(--kts-orange);
}

.kts-augenbraue--dunkel {
	color: var(--kts-orange-dunkel);
}

.kts-abschnitt__kopf {
	max-inline-size: 42rem;
	margin-block-end: clamp(2rem, 4vw, 3rem);
}

.kts-abschnitt__kopf p:last-child {
	color: var(--kts-grau);
	font-size: 1.0625rem;
	line-height: 1.6;
}

.kts-abschnitt--dunkel .kts-abschnitt__kopf p:last-child {
	color: rgba(255, 255, 255, 0.82);
}

.kts-akzent {
	color: var(--kts-orange);
}

.kts-karte {
	background: #fff;
	border-radius: var(--kts-radius);
	padding: clamp(1.5rem, 2.5vw, 2rem);
	box-shadow: var(--wp--preset--shadow--karte, 0 1px 2px rgba(8, 60, 98, 0.06), 0 8px 24px -12px rgba(8, 60, 98, 0.18));
	block-size: 100%;
}

.kts-karte--rand {
	box-shadow: none;
	border: 1px solid var(--kts-linie);
}

.kts-karte h2,
.kts-karte h3 {
	margin-block-start: 0;
}

.kts-karte p:last-child {
	margin-block-end: 0;
}

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

.kts-hero {
	position: relative;
	overflow: hidden;
	background-image: linear-gradient(160deg, var(--kts-blau) 0%, var(--kts-blau-tief) 100%);
}

/* Die Bildmarke als Wasserzeichen — der Bruch aus dem Logo, groß und angeschnitten. */
.kts-hero::before {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: -4%;
	inline-size: min(46vw, 620px);
	aspect-ratio: 1;
	translate: 0 -50%;
	background: url("../img/marke-wasserzeichen.svg") center / contain no-repeat;
	pointer-events: none;
}

/* Der schräge Keil legt Tiefe darunter. */
.kts-hero::after {
	content: "";
	position: absolute;
	inset-block: -20%;
	inset-inline-end: -12%;
	inline-size: 45%;
	background: linear-gradient(105deg, rgba(228, 152, 56, 0.14), rgba(228, 152, 56, 0) 62%);
	transform: skewX(-12deg);
	pointer-events: none;
}

@media (max-width: 900px) {
	.kts-hero::before {
		inline-size: 105vw;
		inset-block-start: auto;
		inset-block-end: -18%;
		inset-inline-end: -40%;
		translate: none;
		opacity: 0.55;
	}
}

.kts-hero__raster {
	position: relative;
	z-index: 1;
	gap: clamp(2rem, 5vw, 4rem);
}

.kts-hero__titel {
	margin-block: 0 1.25rem;
}

.kts-hero__text {
	color: rgba(255, 255, 255, 0.88);
	max-inline-size: 38rem;
	font-size: 1.0625rem;
	line-height: 1.65;
}

.kts-hero__aktionen {
	margin-block: 2rem 2.25rem;
	gap: 0.9rem;
}

.kts-telefon-cta .wp-block-button__link {
	border: 2px solid rgba(255, 255, 255, 0.55);
	color: #fff;
	background: transparent;
}

.kts-telefon-cta .wp-block-button__link:hover,
.kts-telefon-cta .wp-block-button__link:focus {
	background: #fff;
	color: var(--kts-blau);
	border-color: #fff;
}

.kts-merkmale {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.5rem;
	font-size: 0.9375rem;
	color: rgba(255, 255, 255, 0.85);
}

.kts-merkmale li {
	display: flex;
	align-items: center;
	gap: 0.45rem;
}

.kts-merkmale li::before {
	content: "";
	inline-size: 1.1em;
	block-size: 1.1em;
	flex: none;
	background: var(--kts-orange);
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

.kts-karte--hell .kts-karte__hinweis {
	margin-block-start: 1.25rem;
	padding-block-start: 1.25rem;
	border-block-start: 1px solid var(--kts-linie);
	color: var(--kts-grau);
	font-size: 0.9375rem;
}

/* ----------------------------------------------------------------- Leistungen */

.kts-raster {
	gap: clamp(1rem, 2vw, 1.5rem);
}

.kts-raster .kts-karte {
	position: relative;
	overflow: hidden;
	border-block-start: 3px solid var(--kts-orange);
	transition: transform 220ms ease, box-shadow 220ms ease;
}

/* Angeschnittene Ecke — die Diagonale aus dem Logo, klein wiederholt. */
.kts-raster .kts-karte::after {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: 0;
	inline-size: 3.5rem;
	block-size: 3.5rem;
	background: linear-gradient(225deg, rgba(228, 152, 56, 0.16) 0 50%, transparent 50%);
	transition: opacity 220ms ease;
	opacity: 0;
}

.kts-raster .kts-karte:hover {
	transform: translateY(-4px);
	box-shadow: var(--wp--preset--shadow--hoch, 0 2px 4px rgba(8, 60, 98, 0.08), 0 18px 40px -16px rgba(8, 60, 98, 0.28));
}

.kts-raster .kts-karte:hover::after {
	opacity: 1;
}

.kts-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 3.25rem;
	block-size: 3.25rem;
	border-radius: var(--kts-radius);
	background: var(--kts-flaeche);
	color: var(--kts-blau);
	margin-block-end: 1.1rem;
	transition: background 220ms ease, color 220ms ease;
}

.kts-raster .kts-karte:hover .kts-icon {
	background: var(--kts-blau);
	color: #fff;
}

.kts-icon svg {
	inline-size: 1.6rem;
	block-size: 1.6rem;
}

/* Deutsche Komposita sprengen sonst die Kartenbreite ("Gewerbeauflösung").
   Automatische Trennung liegt bei Wörtern wie "Problementrümpelung" daneben,
   deshalb nur manuelle Trennstellen (­) im Text. */
.kts-karte h3 {
	margin-block-end: 0.6rem;
	font-size: 1.375rem;
	line-height: 1.2;
	hyphens: manual;
	overflow-wrap: break-word;
}

.kts-karte p {
	color: var(--kts-grau);
	font-size: 1rem;
	line-height: 1.6;
}

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

.kts-schritte {
	gap: clamp(1.25rem, 2.5vw, 2rem);
}

.kts-schritt {
	position: relative;
	padding-block-start: 1.75rem;
	border-block-start: 2px solid var(--kts-linie);
}

/* Punkt auf der Linie: die vier Schritte lesen sich als Zeitstrahl. */
.kts-schritt::before {
	content: "";
	position: absolute;
	inset-block-start: -0.4375rem;
	inset-inline-start: 0;
	inline-size: 0.75rem;
	block-size: 0.75rem;
	border-radius: 50%;
	background: var(--kts-orange);
	box-shadow: 0 0 0 4px var(--kts-flaeche);
}

.kts-schritt__nummer {
	font-family: var(--wp--preset--font-family--outfit);
	font-weight: 800;
	font-size: clamp(3rem, 6vw, 4.25rem);
	line-height: 0.9;
	color: transparent;
	-webkit-text-stroke: 2px rgba(228, 152, 56, 0.75);
	margin: 0 0 0.35rem;
}

.kts-schritt h3 {
	margin-block: 0 0.5rem;
}

.kts-schritt p {
	color: var(--kts-grau);
	margin-block-end: 0;
}

/* ---------------------------------------------------------------------- Warum */

.kts-warum {
	gap: clamp(2rem, 5vw, 4rem);
}

.kts-haken {
	list-style: none;
	padding: 0;
	margin: 1.25rem 0 0;
	display: grid;
	gap: 1rem;
}

.kts-haken li {
	position: relative;
	padding-inline-start: 2rem;
	color: var(--kts-grau);
}

.kts-haken li strong {
	color: var(--kts-anthrazit);
	display: block;
}

.kts-haken li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.2em;
	inline-size: 1.2em;
	block-size: 1.2em;
	background: var(--kts-orange);
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------------------------------------------------------------- Einsatzgebiet */

.kts-orte {
	gap: 0.6rem;
}

.kts-orte p {
	margin: 0;
	padding: 0.5rem 1rem;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 100px;
	font-size: 0.9375rem;
	color: rgba(255, 255, 255, 0.92);
}

/* --------------------------------------------------------------------- Fragen */

.kts-fragen {
	max-inline-size: 48rem;
	border-block-start: 1px solid var(--kts-linie);
}

.wp-block-details {
	border-block-end: 1px solid var(--kts-linie);
	padding-block: 1.15rem;
}

.wp-block-details summary {
	font-family: var(--wp--preset--font-family--outfit);
	font-weight: 700;
	font-size: 1.125rem;
	color: var(--kts-blau);
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::after {
	content: "";
	flex: none;
	inline-size: 1.1rem;
	block-size: 1.1rem;
	background: var(--kts-orange);
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 200ms ease;
}

.wp-block-details[open] summary::after {
	transform: rotate(45deg);
}

.wp-block-details p {
	color: var(--kts-grau);
	margin-block-end: 0;
	padding-block-start: 0.75rem;
	max-inline-size: 42rem;
}

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

.kts-kontakt {
	gap: clamp(2rem, 4vw, 3.5rem);
}

.kts-kontakt__daten {
	margin-block-start: 2rem;
	padding-block-start: 1.5rem;
	border-block-start: 1px solid var(--kts-linie);
}

.kts-kontakt__tel {
	font-family: var(--wp--preset--font-family--outfit);
	font-weight: 800;
	font-size: clamp(1.5rem, 3vw, 1.875rem);
}

.kts-kontakt__tel a {
	color: var(--kts-blau);
	text-decoration: none;
}

.kts-kontakt__tel a:hover {
	color: var(--kts-orange-dunkel);
}

.kts-kontakt__daten p {
	color: var(--kts-grau);
}

/* ----------------------------------------------------------------- Formular */

/* Ohne border-box wird ein Feld mit inline-size:100% um Innenabstand und Rahmen
   breiter als seine Rasterspalte und schiebt sich in die Spaltenlücke — die
   Felder sahen dadurch aus, als würden sie sich berühren. */
.kts-form input,
.kts-form select,
.kts-form textarea {
	box-sizing: border-box;
}

.kts-form__reihe {
	display: grid;
	/* 14rem statt 13rem: in der 58 %-Spalte reichte der Platz für zwei Felder
	   gerade so: sie brachen erst spät um und standen bis dahin gequetscht. */
	gap: 0 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.kts-form__feld {
	margin-block: 0 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.kts-form label {
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--kts-anthrazit);
}

.kts-form input[type="text"],
.kts-form input[type="tel"],
.kts-form input[type="email"],
.kts-form select,
.kts-form textarea {
	font: inherit;
	font-size: 1rem;
	color: var(--kts-anthrazit);
	background: #fff;
	border: 1px solid var(--kts-linie);
	border-radius: 6px;
	padding: 0.7rem 0.85rem;
	inline-size: 100%;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

.kts-form input:focus,
.kts-form select:focus,
.kts-form textarea:focus {
	border-color: var(--kts-blau);
	box-shadow: 0 0 0 3px rgba(8, 60, 98, 0.12);
	outline: none;
}

.kts-form textarea {
	resize: vertical;
	min-block-size: 7rem;
}

.kts-form__feld--check {
	flex-direction: row;
	align-items: start;
	gap: 0.65rem;
	margin-block-start: 0.5rem;
}

.kts-form__feld--check input {
	margin-block-start: 0.25rem;
	inline-size: 1.1rem;
	block-size: 1.1rem;
	accent-color: var(--kts-blau);
	flex: none;
}

.kts-form__feld--check label {
	font-size: 0.875rem;
	color: var(--kts-grau);
	line-height: 1.55;
}

.kts-form__aktion {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-block: 1.5rem 0;
}

.kts-form__aktion button {
	font-family: var(--wp--preset--font-family--outfit);
	font-weight: 700;
	font-size: 1.0625rem;
	background: var(--kts-orange);
	color: var(--kts-blau);
	border: none;
	border-radius: 6px;
	padding: 0.9rem 1.6rem;
	cursor: pointer;
	transition: background 180ms ease, color 180ms ease;
}

.kts-form__aktion button:hover {
	background: var(--kts-orange-dunkel);
	color: #fff;
}

.kts-form__pflicht {
	font-size: 0.8125rem;
	color: var(--kts-grau);
}

/* Honeypot: für Menschen unsichtbar, für Bots ausfüllbar. */
.kts-form__falle {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.kts-form__hinweis {
	margin-block: 0 1.5rem;
	padding: 0.9rem 1.1rem;
	border-radius: 6px;
	border-inline-start: 4px solid var(--kts-orange);
	background: var(--kts-flaeche);
	font-size: 0.9375rem;
	color: var(--kts-anthrazit);
}

.kts-form__hinweis--ok {
	border-inline-start-color: #2e7d4f;
}

.kts-form__hinweis--fehler {
	border-inline-start-color: #b3261e;
}

/* ------------------------------------------------------------------- Seitenkopf */

.kts-seitenkopf h1 {
	margin: 0;
}

/* --------------------------------------------------------------------- Fußzeile */

.kts-fuss__spalten {
	gap: clamp(2rem, 4vw, 3.5rem);
}

.kts-fuss a {
	color: #fff;
	text-decoration: none;
	border-block-end: 1px solid rgba(255, 255, 255, 0.35);
}

.kts-fuss a:hover {
	color: var(--kts-orange);
	border-block-end-color: var(--kts-orange);
}

.kts-fuss__marke {
	font-family: var(--wp--preset--font-family--outfit);
	font-size: 1.375rem;
}

.kts-fuss p,
.kts-fuss li {
	color: rgba(255, 255, 255, 0.85);
}

.kts-fuss__titel {
	margin-block: 0 0.75rem;
}

.kts-fuss__liste {
	list-style: none;
	padding: 0;
	display: grid;
	gap: 0.4rem;
}

.kts-fuss__unten {
	margin-block-start: clamp(2rem, 4vw, 3rem);
	padding-block-start: 1.5rem;
	border-block-start: 1px solid rgba(255, 255, 255, 0.2);
	gap: 1rem;
}

.kts-fuss__unten p {
	margin: 0;
	color: rgba(255, 255, 255, 0.7);
}

/* -------------------------------------------------------------------- Mobil */

@media (max-width: 781px) {
	.kts-kopf__tel p {
		font-size: 1.125rem;
	}

	.kts-hero__aktionen .wp-block-button {
		inline-size: 100%;
	}

	.kts-hero__aktionen .wp-block-button__link {
		display: block;
		text-align: center;
	}
}

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

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

.kts-fuss__logo {
	margin-block: 0 1.25rem;
}

.kts-fuss__logo img {
	max-inline-size: 210px;
	block-size: auto;
}

@media (max-width: 600px) {
	.kts-kopf .wp-block-site-logo img {
		max-inline-size: 155px;
	}
}

/* ------------------------------------------------------------ Einblenden */

/* Abschnitte steigen beim Scrollen leicht ein. Ohne JS bleibt alles sichtbar,
   und wer Bewegung abbestellt hat, sieht sie ebenfalls sofort. */
.js .kts-reveal {
	opacity: 0;
	translate: 0 1.25rem;
	transition: opacity 600ms ease, translate 600ms ease;
}

.js .kts-reveal.ist-sichtbar {
	opacity: 1;
	translate: none;
}

.js .kts-reveal--gestaffelt > * {
	opacity: 0;
	translate: 0 1.25rem;
	transition: opacity 500ms ease, translate 500ms ease;
	transition-delay: calc(var(--i, 0) * 70ms);
}

.js .kts-reveal--gestaffelt.ist-sichtbar > * {
	opacity: 1;
	translate: none;
}

/* -------------------------------------------------------- Ortsliste */

.kts-orte p {
	transition: background 180ms ease, border-color 180ms ease;
}

.kts-orte p:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(228, 152, 56, 0.7);
}

/* --------------------------------------------- Anrufleiste auf dem Handy */

.kts-anrufleiste {
	display: none;
}

@media (max-width: 781px) {
	.kts-anrufleiste {
		position: fixed;
		inset-inline: 0;
		inset-block-end: 0;
		z-index: 30;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 1px;
		background: var(--kts-linie);
		box-shadow: 0 -6px 20px -10px rgba(8, 60, 98, 0.4);
	}

	.kts-anrufleiste a {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		padding: 0.9rem 0.5rem;
		font-family: var(--wp--preset--font-family--outfit);
		font-weight: 700;
		font-size: 0.9375rem;
		text-decoration: none;
	}

	.kts-anrufleiste__tel {
		background: var(--kts-blau);
		color: #fff;
	}

	.kts-anrufleiste__whatsapp {
		background: var(--kts-blau-tief);
		color: #fff;
	}

	.kts-anrufleiste__mail {
		background: var(--kts-orange);
		color: var(--kts-blau);
	}

	.kts-anrufleiste a {
		font-size: 0.875rem;
	}

	/* Platz, damit die Leiste den Fuß nicht überdeckt. */
	body {
		padding-block-end: 3.5rem;
	}
}

/* ------------------------------------------------- Pfeil aus der Bildmarke */

/* Der Pfeil im Logo zeigt nach schräg oben — die Hauptaktionen greifen ihn auf. */
.kts-hero__aktionen .wp-block-button:first-child .wp-block-button__link::after,
.kts-form__aktion button::after {
	content: "";
	display: inline-block;
	inline-size: 0.85em;
	block-size: 0.85em;
	margin-inline-start: 0.6em;
	vertical-align: -0.05em;
	background: currentColor;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: translate 220ms ease;
}

.kts-hero__aktionen .wp-block-button:first-child .wp-block-button__link:hover::after,
.kts-form__aktion button:hover::after {
	translate: 0.2em -0.2em;
}

/* --------------------------------------------------- Kante unter dem Hero */

.kts-hero {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 2.5rem));
	padding-block-end: calc(var(--wp--preset--spacing--50) + 2.5rem) !important;
}

/* ------------------------------------- Bildmarke auch im Einsatzgebiet */

.kts-abschnitt--dunkel {
	position: relative;
	overflow: hidden;
}

.kts-abschnitt--dunkel::before {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: -6%;
	inline-size: min(34vw, 420px);
	aspect-ratio: 1;
	translate: 0 -50%;
	scale: -1 1;
	opacity: 0.5;
	background: url("../img/marke-wasserzeichen.svg") center / contain no-repeat;
	pointer-events: none;
}

.kts-abschnitt--dunkel > * {
	position: relative;
	z-index: 1;
}

@media (max-width: 900px) {
	.kts-abschnitt--dunkel::before {
		display: none;
	}
}

/* --------------------------------------------------------------- WhatsApp */

/* Eigene Farbe bekommt nur das Zeichen — die Flächen bleiben in der CI,
   sonst konkurriert das Grün mit dem Orange der Hauptaktion. */
.kts-whatsapp-cta .wp-block-button__link::before,
.kts-kopf__wa a::before,
.kts-kontakt__wa a::before,
.kts-anrufleiste__whatsapp::before {
	content: "";
	display: inline-block;
	inline-size: 1.15em;
	block-size: 1.15em;
	margin-inline-end: 0.5em;
	vertical-align: -0.2em;
	background: #25d366;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.5 14.4c-.3-.1-1.7-.9-2-1-.3-.1-.5-.1-.7.1-.2.3-.7 1-.9 1.2-.2.2-.3.2-.6.1-1.8-.9-3-1.6-4.2-3.6-.3-.5.3-.5.9-1.6.1-.2 0-.4 0-.5s-.7-1.6-.9-2.2c-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.1.2 2.1 3.2 5.1 4.5 1.9.8 2.6.9 3.5.8.6-.1 1.7-.7 1.9-1.4.2-.7.2-1.2.2-1.4-.1-.1-.3-.2-.6-.3zM12 2a10 10 0 0 0-8.6 15L2 22l5.1-1.3A10 10 0 1 0 12 2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.kts-whatsapp-cta .wp-block-button__link {
	background: rgba(255, 255, 255, 0.12);
	border: 2px solid rgba(255, 255, 255, 0.4);
	color: #fff;
}

.kts-whatsapp-cta .wp-block-button__link:hover,
.kts-whatsapp-cta .wp-block-button__link:focus {
	background: #fff;
	border-color: #fff;
	color: var(--kts-blau);
}

/* Im hellen Kontaktabschnitt dreht sich das Verhältnis um. */
.kts-kontakt__wege .wp-block-button__link {
	background: #fff;
	border: 1px solid var(--kts-linie);
	color: var(--kts-blau);
}

.kts-kontakt__wege .wp-block-button__link:hover,
.kts-kontakt__wege .wp-block-button__link:focus {
	background: var(--kts-blau);
	border-color: var(--kts-blau);
	color: #fff;
}

.kts-kontakt__wege {
	margin-block-start: 1.5rem;
}

.kts-kopf__wa {
	margin: 0;
	font-family: var(--wp--preset--font-family--outfit);
	font-weight: 700;
	font-size: 0.9375rem;
}

.kts-kopf__wa a {
	color: var(--kts-blau);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
}

.kts-kopf__wa a:hover {
	color: var(--kts-orange-dunkel);
}

.kts-kontakt__wa a {
	display: inline-flex;
	align-items: center;
	color: var(--kts-blau);
}

/* ------------------------------------------------------------ Ortsliste */

.kts-orte__hinweis {
	margin-block-start: 1.75rem;
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.9375rem;
}

.kts-orte__hinweis a {
	color: var(--kts-orange);
}

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

/* Die Bildmarke steht jetzt frei rechts, der Text hält Abstand davon. */
.kts-hero__inhalt {
	position: relative;
	z-index: 1;
	max-inline-size: 40rem;
}

@media (min-width: 901px) {
	.kts-hero::before {
		inline-size: min(42vw, 560px);
		inset-inline-end: 0;
	}
}

@media (max-width: 900px) {
	.kts-hero__inhalt {
		max-inline-size: none;
	}
}

/* ------------------------------------------- Rechtstexte der IT-Recht Kanzlei */

/* Impressum und Datenschutz kommen als rohes HTML aus dem Kanzlei-Plugin
   (div/h2/p/ul/b/a, keine Klassen). Block-Themes setzen Abstände über den
   Block-Gap — der greift bei Fremd-HTML nicht, deshalb hier eigene Typografie.
   Farben und Schriften erbt der Text aus theme.json. */

.kts-rechtstext {
	max-inline-size: 46rem;
}

.kts-rechtstext p,
.kts-rechtstext ul,
.kts-rechtstext ol {
	margin-block: 0 1.1em;
}

.kts-rechtstext h2 {
	/* Kleiner als die Abschnittstitel der Startseite: hier stehen zehn davon
	   untereinander, in xx-large würde die Seite zerfallen. */
	font-size: var(--wp--preset--font-size--large, 1.25rem);
	margin-block: 2.25em 0.6em;
}

.kts-rechtstext h2:first-child {
	margin-block-start: 0;
}

.kts-rechtstext ul,
.kts-rechtstext ol {
	padding-inline-start: 1.25rem;
}

.kts-rechtstext li {
	margin-block-end: 0.4em;
}

.kts-rechtstext b,
.kts-rechtstext strong {
	color: var(--kts-blau);
}

/* Das Kanzlei-Siegel kommt als img ohne Maßangaben mit. */
.kts-rechtstext img {
	max-inline-size: 100%;
	block-size: auto;
}

/* Lange Rechtsbegriffe und URLs sollen auf dem Handy nicht überlaufen. */
.kts-rechtstext {
	overflow-wrap: break-word;
}

/* ------------------------------------------------- Cookie-Einwilligung */

.kts-consent {
	position: fixed;
	inset-block-end: 0;
	inset-inline: 0;
	z-index: 60;
	padding: 1rem;
	/* Über der Handy-Anrufleiste, damit die beim Banner nicht im Weg steht. */
	padding-block-end: calc(1rem + env(safe-area-inset-bottom, 0px));
}

.kts-consent[hidden] {
	display: none;
}

/* Unter 781px sitzt die Anrufleiste am unteren Rand (3,5rem hoch). Der Banner
   liegt zwar darüber, soll sie aber nicht halb verdecken. */
@media (max-width: 781px) {
	.kts-consent {
		padding-block-end: calc(3.5rem + 0.75rem + env(safe-area-inset-bottom, 0px));
	}
}

.kts-consent__karte {
	max-inline-size: 44rem;
	margin-inline: auto;
	background: #fff;
	color: var(--kts-anthrazit);
	border: 1px solid var(--kts-linie);
	border-radius: var(--kts-radius);
	box-shadow: 0 12px 32px rgba(8, 60, 98, 0.18);
	padding: clamp(1.1rem, 3vw, 1.6rem);
}

.kts-consent__titel {
	font-family: var(--wp--preset--font-family--outfit);
	font-size: 1.125rem;
	font-weight: 800;
	color: var(--kts-blau);
	margin: 0 0 0.5rem;
}

.kts-consent__text {
	font-size: 0.9375rem;
	line-height: 1.55;
	margin: 0 0 1.1rem;
}

.kts-consent__knoepfe {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* Beide Schaltflächen sind gleich groß und gleich auffällig. Eine
   hervorgehobene Zustimmung neben einem blassen "Ablehnen" gilt als
   unwirksame Einwilligung — deshalb hier bewusst kein Orange für nur eine
   der beiden. */
.kts-consent__knopf {
	flex: 1 1 12rem;
	font: inherit;
	font-family: var(--wp--preset--font-family--outfit);
	font-size: 1rem;
	font-weight: 700;
	color: var(--kts-blau);
	background: #fff;
	border: 2px solid var(--kts-blau);
	border-radius: 6px;
	padding: 0.7rem 1.1rem;
	cursor: pointer;
	transition: background-color 150ms ease, color 150ms ease;
}

.kts-consent__knopf:hover {
	background: var(--kts-blau);
	color: #fff;
}

.kts-consent__knopf:focus-visible {
	outline: 3px solid var(--kts-orange);
	outline-offset: 2px;
}

/* Der Widerrufs-Link im Fußbereich ist ein Button, soll aber wie die
   Nachbarlinks aussehen. Sichtbar nur, wenn es etwas zu widerrufen gibt —
   die Klasse setzt inc/consent.php. */
.kts-consent__oeffnen {
	display: none;
}

.kts-hat-consent .kts-consent__oeffnen {
	display: inline;
	font: inherit;
	color: #fff;
	background: none;
	border: 0;
	border-block-end: 1px solid rgba(255, 255, 255, 0.35);
	padding: 0;
	cursor: pointer;
}

/* Trenner am Button statt im Markup — sonst bliebe im Fußbereich ein
   einsames „·" stehen, solange es nichts zu widerrufen gibt. Er sitzt
   außerhalb der Unterstreichung. */
.kts-hat-consent .kts-consent__oeffnen::before {
	content: "·";
	display: inline-block;
	margin-inline: 0.4em;
	border-block-end: 0;
}

.kts-hat-consent .kts-consent__oeffnen:hover {
	color: var(--kts-orange);
	border-block-end-color: var(--kts-orange);
}

/* ================================================================
   Unterseiten
   Leistungen, Kosten, Einsatzgebiet und Stadtseiten. Alles darunter
   baut auf denselben Tokens auf wie die Startseite; neu sind nur die
   Bausteine, die es auf der Startseite nicht gibt.
   ================================================================ */

/* ------------------------------------------------------- Seitenkopf */

/* Auf Unterseiten trägt die Grafik die rechte Seite. Das Wasserzeichen
   der Startseite säße genau darunter und würde sie zumatschen. */
.kts-hero--seite:has(.kts-kopf__raster)::before {
	display: none;
}

.kts-kopf__raster {
	align-items: center;
	gap: clamp(2rem, 5vw, 4rem);
}

.kts-kopfbild {
	margin: 0;
}

.kts-kopfbild img {
	inline-size: 100%;
	block-size: auto;
	display: block;
}

@media (max-width: 781px) {
	/* Unter dem Text ist die Grafik Beiwerk, nicht Hauptsache. */
	.kts-kopfbild {
		max-inline-size: 26rem;
		margin-block-start: 1rem;
		opacity: 0.9;
	}
}

/* --------------------------------------------------- Wann Sie uns brauchen */

.kts-situationen {
	gap: clamp(1.5rem, 4vw, 3.5rem);
}

.kts-situationen h2 {
	margin-block-start: 0;
}

@media (min-width: 782px) {
	/* Die Überschrift läuft mit, solange die Fälle scrollen. */
	.kts-situationen > .wp-block-column:first-child {
		position: sticky;
		inset-block-start: 7rem;
		align-self: start;
	}
}

.kts-fall + .kts-fall {
	margin-block-start: clamp(1.5rem, 3vw, 2.25rem);
	padding-block-start: clamp(1.5rem, 3vw, 2.25rem);
	border-block-start: 1px solid var(--kts-linie);
}

.kts-fall h3 {
	margin-block: 0 0.5rem;
}

.kts-fall p {
	margin-block-end: 0;
	color: var(--kts-grau);
}

/* ---------------------------------------------------- Leistungsumfang */

.kts-tafeln {
	gap: clamp(1.25rem, 2.5vw, 2rem);
}

.kts-tafel {
	block-size: 100%;
	border-radius: var(--kts-radius);
	padding: clamp(1.5rem, 3vw, 2.25rem);
}

.kts-tafel h3 {
	margin-block: 0 1.25rem;
	padding-block-end: 0.9rem;
	border-block-end: 2px solid var(--kts-orange);
	display: inline-block;
}

.kts-tafel--gefuellt {
	background: #fff;
	box-shadow: var(--wp--preset--shadow--karte, 0 1px 2px rgba(8, 60, 98, 0.06), 0 8px 24px -12px rgba(8, 60, 98, 0.18));
}

.kts-tafel--rand {
	border: 1px solid var(--kts-linie);
}

.kts-tafel .kts-haken {
	margin-block-start: 0;
}

/* Gegenstück zur Hakenliste: was nicht dazugehört oder Geld kostet. */
.kts-punkte {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 1rem;
}

.kts-punkte li {
	position: relative;
	padding-inline-start: 2rem;
	color: var(--kts-grau);
}

.kts-punkte li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.62em;
	inline-size: 0.85em;
	block-size: 2px;
	background: var(--kts-grau);
	opacity: 0.6;
}

/* -------------------------------------------------------- Merksätze */

/* Auf dunklem Grund, als Stapel statt als Kartenreihe: die Startseite
   hat bereits ein Kartenraster, ein zweites würde sie kopieren. */
.kts-merksaetze {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	max-inline-size: 52rem;
}

.kts-merksatz {
	padding-inline-start: clamp(1.25rem, 3vw, 2rem);
	border-inline-start: 3px solid var(--kts-orange);
}

.kts-merksatz h3 {
	margin-block: 0 0.5rem;
}

.kts-merksatz p {
	margin-block-end: 0;
	color: rgba(255, 255, 255, 0.82);
	max-inline-size: 44rem;
}

/* ------------------------------------------------------ Preisfaktoren */

.kts-faktoren {
	gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 3rem);
}

.kts-faktor {
	padding-block-start: 1.1rem;
	border-block-start: 2px solid var(--kts-linie);
}

.kts-faktor h3 {
	margin-block: 0 0.45rem;
	color: var(--kts-blau);
}

.kts-faktor p {
	margin-block-end: 0;
	color: var(--kts-grau);
}

.kts-nachsatz {
	margin-block-start: clamp(2rem, 4vw, 3rem);
	color: var(--kts-grau);
	max-inline-size: 46rem;
}

.kts-abschnitt--dunkel .kts-nachsatz {
	color: rgba(255, 255, 255, 0.82);
}

/* ------------------------------------------ Kacheln mit Grafik (Hub, Querverweise) */

.kts-hubraster,
.kts-querverweise,
.kts-staedte {
	gap: clamp(1rem, 2vw, 1.5rem);
}

.kts-hubkachel,
.kts-quer,
.kts-stadtkachel {
	display: flex;
	flex-direction: column;
	block-size: 100%;
	background: #fff;
	border: 1px solid var(--kts-linie);
	border-radius: var(--kts-radius);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.kts-hubkachel:hover,
.kts-quer:hover,
.kts-stadtkachel:hover {
	transform: translateY(-4px);
	border-color: transparent;
	box-shadow: var(--wp--preset--shadow--hoch, 0 2px 4px rgba(8, 60, 98, 0.08), 0 18px 40px -16px rgba(8, 60, 98, 0.28));
}

/* Die Grafiken sind für dunklen Grund gezeichnet, also bekommen sie ihn. */
.kts-hubkachel img,
.kts-quer img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 480 / 340;
	background: linear-gradient(160deg, var(--kts-blau) 0%, var(--kts-blau-tief) 100%);
	border-block-end: 3px solid var(--kts-orange);
}

.kts-hubkachel__titel,
.kts-quer__titel,
.kts-stadtkachel__ort {
	font-family: var(--wp--preset--font-family--outfit);
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1.2;
	color: var(--kts-blau);
	padding: clamp(1.1rem, 2vw, 1.4rem) clamp(1.1rem, 2vw, 1.4rem) 0;
	hyphens: manual;
	overflow-wrap: break-word;
}

.kts-hubkachel__text,
.kts-quer__text,
.kts-stadtkachel__text {
	/* 0.85rem statt 0.5: Name und Text klebten sonst aneinander. */
	padding: 0.85rem clamp(1.1rem, 2vw, 1.4rem) clamp(1.1rem, 2vw, 1.4rem);
	color: var(--kts-grau);
	font-size: 0.9375rem;
	line-height: 1.6;
	flex: 1;
}

.kts-hubkachel__mehr {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0 clamp(1.1rem, 2vw, 1.4rem) clamp(1.1rem, 2vw, 1.4rem);
	font-family: var(--wp--preset--font-family--outfit);
	font-weight: 700;
	font-size: 0.9375rem;
	color: var(--kts-orange-dunkel);
}

.kts-hubkachel__mehr::after {
	content: "";
	inline-size: 0.85em;
	block-size: 0.85em;
	background: currentColor;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: translate 220ms ease;
}

.kts-hubkachel:hover .kts-hubkachel__mehr::after {
	translate: 0.2em -0.2em;
}

/* Stadtkacheln tragen keine Grafik, deshalb hält die orange Kante oben
   den Bezug zur Kachelreihe der Leistungen. */
.kts-stadtkachel {
	border-block-start: 3px solid var(--kts-orange);
}

/* Die Stadtkacheln tragen keine Grafik. Der Ortsname ist dort die einzige
   Überschrift und darf deshalb kräftiger stehen, mit einer echten Leerzeile
   zum Text darunter statt eines halben Zeilenabstands. */
.kts-stadtkachel__ort {
	font-size: 1.5rem;
	font-weight: 800;
	padding-block-start: clamp(1.3rem, 2.5vw, 1.7rem);
}

.kts-stadtkachel__text {
	padding-block-start: 1.15rem;
}

/* -------------------------------------------------- Orte auf hellem Grund */

.kts-orte--hell p {
	border-color: var(--kts-linie);
	color: var(--kts-anthrazit);
}

.kts-orte--hell p:hover {
	background: #fff;
	border-color: var(--kts-orange);
}

/* --------------------------------------------------- Lücken im Entwurf */

/* Nur auf der noch nicht veröffentlichten Über-uns-Seite. Sichtbar
   auffällig, damit kein Platzhalter versehentlich online geht. */
.kts-luecke {
	padding: 1rem 1.15rem;
	border: 2px dashed var(--kts-orange);
	border-radius: 6px;
	background: rgba(228, 152, 56, 0.07);
	color: var(--kts-anthrazit);
}

/* ------------------------------- Leistungskarten auf der Startseite */

/* Die Karten führen jetzt auf die Leistungsseiten. Verlinkt ist die
   Überschrift, klickbar ist die ganze Karte: ein unsichtbares Feld über
   der Karte fängt den Klick ab, ohne dass das Markup zu einem Link-Block
   umgebaut werden muss (der wäre im Editor schlechter zu pflegen). */
.kts-raster .kts-karte h3 a {
	color: inherit;
	text-decoration: none;
	transition: color 180ms ease;
}

.kts-raster .kts-karte h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--kts-radius);
}

.kts-raster .kts-karte:hover h3 a,
.kts-raster .kts-karte h3 a:focus-visible {
	color: var(--kts-orange-dunkel);
}

/* Die angeschnittene Ecke ist Dekoration und darf den Klick nicht schlucken. */
.kts-raster .kts-karte::after {
	pointer-events: none;
}

/* ------------------------------------------------ Untermenü im Kopf */

.kts-nav .wp-block-navigation__submenu-container {
	border: 1px solid var(--kts-linie);
	border-radius: var(--kts-radius);
	box-shadow: var(--wp--preset--shadow--karte, 0 1px 2px rgba(8, 60, 98, 0.06), 0 8px 24px -12px rgba(8, 60, 98, 0.18));
	padding-block: 0.4rem;
	min-inline-size: 15rem;
}

.kts-nav .wp-block-navigation__submenu-container a {
	padding: 0.5rem 1rem;
	border-block-end: 0;
	font-weight: 500;
}

.kts-nav .wp-block-navigation__submenu-container a:hover {
	background: var(--kts-flaeche);
	color: var(--kts-orange-dunkel);
}

/* ------------------------------------------ Verlinkte Orte in der Pillenliste */

/* Städte mit eigener Seite sind anklickbar. Kenntlich macht sie allein der
   orange Rand — sonst rät man, welche der siebzehn Pillen irgendwohin führt.
   Die Schrift bleibt weiß wie bei allen anderen. */
.kts-orte p:has(a) {
	padding: 0;
	border-color: rgba(228, 152, 56, 0.7);
}

.kts-orte p a {
	display: block;
	padding: 0.5rem 1rem;
	border-radius: inherit;
	text-decoration: none;
}

/* Die Zustände einzeln aufführen ist hier kein Zierrat: theme.json erzeugt
   `:root :where(a…):hover { color: orange-dunkel }`, und diese Regel ist
   spezifischer als eine einzelne Klasse. Ohne die Aufzählung wird der Ort
   beim Überfahren dunkelorange und ist auf dem Dunkelblau nicht mehr zu
   lesen. */
.kts-orte p a,
.kts-orte p a:link,
.kts-orte p a:visited,
.kts-orte p a:hover,
.kts-orte p a:focus,
.kts-orte p a:active {
	color: #fff;
}

/* Rückmeldung übernimmt der Rand, nicht die Schriftfarbe. */
.kts-orte p:has(a):hover {
	border-color: var(--kts-orange);
}

.kts-orte p a:focus-visible {
	outline-offset: 3px;
}

/* Derselbe Fall im Hinweis unter der Ortsliste. */
.kts-orte__hinweis a:hover,
.kts-orte__hinweis a:focus {
	color: #fff;
	text-decoration: underline;
}

/* ------------------------------------------------- Signatur im Fußbereich */

/* Bewusst nur rel="noopener" und nicht zusätzlich "noreferrer": Der Verweis
   führt auf die eigene Agenturseite, und dort soll ankommen, woher der Besuch
   kommt. Der Schutz vor window.opener bleibt davon unberührt. */
/* Steht in derselben Zeile wie das Copyright, nur leiser und kleiner: Es ist
   eine Randnotiz, keine zweite Aussage. Der Trenner sitzt am Element, damit auf
   dem Handy beim Umbruch kein einsames Zeichen am Zeilenende hängenbleibt. */
.kts-fuss__signatur {
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.55);
}

.kts-fuss__signatur::before {
	content: "·";
	margin-inline: 0.45em;
}

@media (max-width: 600px) {
	.kts-fuss__signatur {
		display: block;
		margin-block-start: 0.4rem;
	}

	.kts-fuss__signatur::before {
		content: none;
	}
}

.kts-fuss__signatur a {
	color: rgba(255, 255, 255, 0.7);
	border-block-end-color: rgba(255, 255, 255, 0.25);
}

.kts-fuss__signatur a:hover,
.kts-fuss__signatur a:focus {
	color: var(--kts-orange);
	border-block-end-color: var(--kts-orange);
}

/* ------------------------------- Verlinkte Faktoren auf der Kostenseite */

/* Im Überblick "Was bei welcher Leistung den Ausschlag gibt" führt jede
   Überschrift auf die zugehörige Leistungsseite, wo derselbe Punkt ausführlich
   steht. Wie bei den Karten der Startseite fängt ein unsichtbares Feld über
   dem Kasten den Klick ab. */
.kts-faktor {
	position: relative;
}

.kts-faktor h3 a {
	color: inherit;
	text-decoration: none;
	transition: color 180ms ease;
}

.kts-faktor h3 a::after {
	content: "";
	position: absolute;
	inset: -0.5rem;
	border-radius: var(--kts-radius);
}

.kts-faktor:hover h3 a,
.kts-faktor h3 a:focus-visible {
	color: var(--kts-orange-dunkel);
}

.kts-faktor:hover {
	border-block-start-color: var(--kts-orange);
}

/* ------------------------------- Fußzeile unten: Links und Knopf auf einer Linie */

/* „Cookie-Einstellungen" ist ein <button>, seine Nachbarn sind <a>. Der
   Unterstrich kommt bisher aus `border-block-end`, und der sitzt beim Knopf am
   Boden seiner eigenen Box statt an der Schriftlinie — gemessen drei Pixel
   tiefer als bei den Links. Für diese Zeile deshalb alle drei über
   text-decoration unterstreichen: Die wird an der Schrift ausgerichtet und
   sitzt damit überall gleich, egal welches Element darunterliegt. */
.kts-fuss__unten a,
.kts-hat-consent .kts-fuss__unten .kts-consent__oeffnen {
	border-block-end: 0;
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.35);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.kts-fuss__unten a:hover,
.kts-fuss__unten a:focus,
.kts-hat-consent .kts-fuss__unten .kts-consent__oeffnen:hover,
.kts-hat-consent .kts-fuss__unten .kts-consent__oeffnen:focus {
	text-decoration-color: var(--kts-orange);
}

/* Die Signatur bleibt eine Spur leiser als die Rechtslinks. */
.kts-fuss__signatur a {
	text-decoration-color: rgba(255, 255, 255, 0.25);
}