/* =========================================================================
   Kaschuba – Grundlayout und Blockstile
   Werte aus 01-design-system.md und 02-interaktion-animation.md.
   ====================================================================== */

/* ---------- Schrift (lokal, kein Google-Aufruf) ---------- */

@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 300 500;
	font-display: swap;
	src: url("../fonts/jost-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 300 500;
	font-display: swap;
	src: url("../fonts/jost-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
		U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
		U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Marken-Werte ---------- */

:root {
	--k-weiss: #ffffff;
	--k-text-hell: #efe7d9;
	--k-text-hell-leise: #cfc6b6;
	--k-creme: #fbf8f3;
	--k-sand: #f3eadb;
	--k-linie-hell: #ede3d0;
	--k-linie-sand: #e2d5bc;
	--k-gold: #a5762c;
	--k-gold-dunkel: #8a6120;
	--k-gold-hell: #e8c689;
	--k-sand-hell: #f1e4cb;
	--k-anthrazit: #3c3c3b;
	--k-text: #4a4744;
	--k-text-leise: #6e6a63;

	--k-radius-klein: 12px;
	--k-radius-karte: 24px;
	--k-radius-gross: 48px;
	--k-radius-pille: 999px;

	--k-breite: 1440px;
	--k-rand: 32px;
	--k-abschnitt: 72px;
	--k-kopfhoehe: 132.6px;

	--k-schatten-header: 0 2px 18px rgba(60, 60, 59, 0.1);
	--k-schatten-platte: 0 2px 14px rgba(60, 60, 59, 0.16);
	--k-schatten-acc: 0 8px 22px rgba(60, 60, 59, 0.1);
	--k-schatten-btn: 0 10px 24px rgba(60, 60, 59, 0.2);

	--k-uebergang: color 0.22s ease, background-color 0.25s ease,
		transform 0.25s cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 0.3s ease,
		opacity 0.25s ease;

	interpolate-size: allow-keywords;
}

@media (max-width: 900px) {
	:root {
		--k-rand: 24px;
	}
}

/* ---------- Grundlagen ---------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--k-weiss);
	color: var(--k-text);
	font-family: Jost, system-ui, -apple-system, "Segoe UI", sans-serif;
	font-weight: 300;
	font-size: 19px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Formularelemente erben die Schrift – sonst rutschen sie auf Schnitt 400. */
button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

/* Es gibt nur 300 und 500 – kein Bold. */
strong,
b {
	font-weight: 500;
}

h1,
h2,
h3,
h4 {
	color: var(--k-anthrazit);
	font-weight: 500;
	text-wrap: pretty;
	max-width: none;
}

/* Feste Außenabstände wie im Entwurf – keine em-Werte, die je Schriftgrad wandern. */
h1 {
	margin: 0 0 22px;
}

h2 {
	margin: 0 0 28px;
}

h3,
h4 {
	margin: 0 0 8px;
}

h1 {
	font-size: 52px;
	line-height: 1.12;
	max-width: 20ch;
}

h2 {
	font-size: 42px;
	line-height: 1.18;
}

/* Schriftgrade als Klassen – dieselben Stufen wie in theme.json.
   Bewusst hier ausgeschrieben: WordPress gibt die Preset-Variablen bei
   diesem klassischen Theme nicht aus. */
.has-kicker-font-size { font-size: 15px; line-height: 1; }
.has-mini-font-size { font-size: 17px; line-height: 1.65; }
.has-klein-font-size { font-size: 18px; line-height: 1.7; }
.has-standard-font-size { font-size: 19px; line-height: 1.7; }
.has-gross-font-size { font-size: 20px; line-height: 1.7; }

h2.has-h2-gross-font-size { font-size: 56px; line-height: 1.12; }
h2.has-h2-mittel-font-size { font-size: 34px; line-height: 1.2; }
h2.has-h2-klein-font-size { font-size: 28px; line-height: 1.25; }
h2.has-h2-mini-font-size { font-size: 24px; line-height: 1.3; }
h2.has-h2-26-font-size { font-size: 26px; line-height: 1.25; }
h2.has-h2-22-font-size { font-size: 22px; line-height: 1.3; }
h3.has-h3-gross-font-size { font-size: 24px; line-height: 1.25; }
h3.has-h3-mittel-font-size { font-size: 21px; line-height: 1.3; }
h3.has-h3-font-size { font-size: 20px; line-height: 1.3; }

.k-raster__titel.has-h2-mittel-font-size { font-size: 34px; line-height: 1.2; }
.k-raster__titel.has-h2-klein-font-size { font-size: 28px; line-height: 1.25; }
.k-raster__titel.has-h2-mini-font-size { font-size: 24px; line-height: 1.3; }

h3 {
	font-size: 20px;
	line-height: 1.3;
}


p {
	margin: 0 0 20px;
	max-width: 64ch;
}

p:last-child {
	margin-bottom: 0;
}

/* In einer Textspalte behalten auch letzte Absätze ihren Abstand. */
.k-split__spalte:not(.k-split__spalte--kasten) > p {
	margin-bottom: 20px;
}

ul,
ol {
	max-width: 64ch;
}

/* Nur Fließtextlisten – die globale Fassung traf auch Navigation,
   Sprechzeiten und Linklisten und schob die Navigation 7 px nach oben. */
.k-fliesstext li,
.k-split__spalte li,
.k-karte li,
.k-kasten li,
.k-leistung__karte li {
	font-size: 18px;
	line-height: 1.7;
	padding-bottom: 14px;
}

a {
	color: var(--k-gold-dunkel);
	text-decoration: none;
	transition: var(--k-uebergang);
}

a:hover {
	color: var(--k-anthrazit);
}

:where(a, button, summary, input, select, textarea, details):focus-visible {
	outline: 3px solid var(--k-gold-dunkel);
	outline-offset: 3px;
	border-radius: 4px;
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.k-kicker {
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--k-gold-dunkel);
	margin: 0 0 12px;
	max-width: none;
}

.k-kicker--hell {
	color: var(--k-weiss);
}

/* Zweite Kicker-Art aus den Entwürfen: goldene Zeile, keine Versalien. */
.k-kicker--zeile {
	font-size: 18px;
	line-height: 1.4;
	font-weight: 500;
	letter-spacing: normal;
	text-transform: none;
	color: var(--k-gold-dunkel);
	margin: 0 0 10px;
	max-width: none;
}

/* Abgesetzte Fläche innerhalb einer Spalte. */
.k-kasten {
	border-radius: 32px;
	padding: 40px 36px;
	margin-bottom: 28px;
}

.k-kasten h2,
.k-split__spalte--kasten > h2 {
	font-size: 24px;
	line-height: 1.3;
	margin-bottom: 14px;
}

.k-kasten p {
	font-size: 19px;
	line-height: 1.65;
	margin-bottom: 24px;
}

/* Die Terminkarte der Unterseiten bleibt bei 18 px / 1,7 — so steht sie im
   Entwurf. Die Klasse wird auf 21 Unterseiten ausgegeben; eine gemeinsame
   Regel wuerde dort die Zeilenhoehe auf 1,65 druecken. */
.k-split__spalte--kasten > p {
	font-size: 18px;
	line-height: 1.7;
	margin-bottom: 24px;
}


/* Die erste Zeile im Kasten ist im Entwurf die Auszeichnung: 21 px,
   halbfett, Anthrazit, 8 px Abstand. Der Schriftgrad braucht !important,
   weil WordPress die Preset-Klasse .has-gross-font-size selbst mit
   !important ausliefert und der Absatz genau diese Klasse trägt. */
.k-kasten > p:first-child {
	font-size: 21px !important;
	line-height: 1.35;
	font-weight: 500;
	color: var(--k-anthrazit);
	margin-bottom: 8px;
}

.k-kasten > *:last-child {
	margin-bottom: 0;
}

.k-kasten:last-child {
	margin-bottom: 0;
}

.k-kasten--sand {
	background: var(--k-sand);
}

.k-kasten--weiss {
	background: var(--k-weiss);
}

.k-kasten--gross {
	border-radius: var(--k-radius-gross);
	padding: 40px 36px;
}

.k-split__spalte--kasten {
	border-radius: 32px;
}

.k-text--gross {
	font-size: 20px;
	line-height: 1.7;
}

/* ---------- Sprunglink ---------- */

.k-sprunglink {
	position: fixed;
	top: 0;
	left: 50%;
	transform: translate(-50%, -140%);
	z-index: 10050;
	background: var(--k-weiss);
	color: var(--k-gold-dunkel);
	font-weight: 500;
	padding: 14px 26px;
	border-radius: 0 0 var(--k-radius-klein) var(--k-radius-klein);
	box-shadow: var(--k-schatten-header);
	transition: transform 0.2s ease;
}

.k-sprunglink:focus {
	transform: translate(-50%, 0);
}

/* =========================================================================
   Kopfbereich
   ====================================================================== */

.k-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 9999;
	background: transparent;
	transition: background-color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}

.k-header[data-scrolled] {
	background: var(--k-weiss);
	box-shadow: var(--k-schatten-header);
}

.k-header__innen {
	position: relative;
	max-width: var(--k-breite);
	margin: 0 auto;
	padding: 10px var(--k-rand);
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: var(--k-kopfhoehe);
}

.k-header__logo {
	flex: 0 0 auto;
	display: inline-flex;
}

.k-header__platte {
	display: inline-flex;
	background: var(--k-creme);
	padding: 10px 18px;
	border-radius: 0;
	box-shadow: var(--k-schatten-platte);
	transition: background-color 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease;
}

.k-header[data-scrolled] .k-header__platte {
	background: transparent;
	padding: 0;
	box-shadow: none;
}

.k-header img {
	/* Ausgangsgröße im Entwurf 264 px, im gescrollten Zustand 200 px. */
	width: 264px;
	height: auto;
	transition: width 0.4s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.k-header[data-scrolled] img {
	width: 200px;
}

/* ---------- Hauptnavigation ---------- */

.k-nav {
	margin-left: auto;
}

.k-nav__liste {
	display: flex;
	align-items: center;
	gap: 30px;
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: none;
}

.k-nav__punkt {
	position: static;
	display: flex;
	align-items: center;
}

.k-nav__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 44px;
	padding: 10px 2px;
	color: var(--k-weiss);
	font-size: 17px;
	line-height: 1.4;
	font-weight: 300;
}

.k-header[data-scrolled] .k-nav__link {
	color: var(--k-anthrazit);
}

/* Im Entwurf liegt die Linie 6 px unter der Klickflaeche (bottom: -6px),
   nicht innerhalb. */
.k-nav__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: -6px;
	height: 1px;
	background: currentColor;
	transition: right 0.28s cubic-bezier(0.2, 0.8, 0.3, 1);
}

/* 02-interaktion-animation.md, Abschnitt 6: "Navigationslink | Farbe -> #8A6120,
   Unterstreichung laeuft von links ein (.28 s)". Der Entwurf kann das nicht
   zeigen, weil die Hauptmenuepunkte kein style-hover tragen — fuer Hover gilt
   die Interaktionsdoku. */
.k-nav__link:hover,
.k-nav__link:focus-visible,
.k-header[data-scrolled] .k-nav__link:hover,
.k-header[data-scrolled] .k-nav__link:focus-visible {
	color: var(--k-gold-dunkel);
}

.k-nav__link:hover::after,
.k-nav__link:focus-visible::after {
	right: 0;
}

/* Aktiver Menüpunkt: der Entwurf hebt ihn optisch nicht hervor — weder
   Linie noch Schriftschnitt. Die Kennzeichnung trägt allein
   aria-current="page" aus inc/nav.php (Zeilen 86 und 130); das bleibt
   unverändert. content: none erzeugt das Pseudoelement gar nicht erst,
   die übrigen Angaben bleiben stehen, damit sich die Linie mit einer
   einzigen Zeile zurückholen lässt.
   Der Schriftschnitt 500 gilt laut 02 ausschließlich im Mega-Menü. */
.k-nav__link.is-aktiv {
	font-weight: 300;
}

.k-nav__link.is-aktiv::before {
	content: none;
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 2px;
	background: var(--k-gold-dunkel);
}

.k-header:not([data-scrolled]) .k-nav__link.is-aktiv::before {
	background: var(--k-weiss);
}

.k-nav__pfeil {
	width: 8px;
	height: 8px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 0.25s ease;
}

.k-nav__punkt[data-klapp][data-open] .k-nav__pfeil {
	transform: rotate(225deg) translate(-2px, -2px);
}

/* ---------- Klapp-Panels ---------- */

.k-panel {
	position: absolute;
	top: calc(100% - 42px);
	right: var(--k-rand);
	left: auto;
	width: 760px;
	max-width: calc(100% - 2 * var(--k-rand));
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.18s ease, visibility 0.18s ease;
}

.k-panel--unter {
	width: 320px;
}

.k-nav__punkt[data-klapp]:hover .k-panel,
.k-nav__punkt[data-klapp]:focus-within .k-panel,
.k-nav__punkt[data-klapp][data-open] .k-panel {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.k-panel__innen {
	background: var(--k-weiss);
	border-radius: 0 0 var(--k-radius-karte) var(--k-radius-karte);
	box-shadow: 0 14px 40px rgba(60, 60, 59, 0.16);
	padding: 22px 18px;
	margin-left: auto;
	max-width: 760px;
}

.k-panel--unter .k-panel__innen {
	border-radius: var(--k-radius-karte);
	padding: 18px 24px;
}

.k-panel__spalten {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0 26px;
}

.k-panel__spalte + .k-panel__spalte {
	margin-top: 0;
}

.k-panel__gruppe + .k-panel__gruppe {
	margin-top: 22px;
}

.k-panel__titel {
	margin: 0;
	max-width: none;
}

.k-panel__oberlink {
	color: var(--k-gold-dunkel);
}

.k-panel__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: none;
}

/* Maße exakt aus dem Entwurf: Gruppentitel 38 px, Unterpunkt 35 px hoch.
   Die Klickfläche ist dadurch niedriger als die Hausregel von 44 px, liegt
   mit 35 px aber deutlich über den 24 px, die WCAG 2.5.8 verlangt. */
.k-panel__oberlink {
	display: block;
	padding: 10px 14px 6px;
	border-radius: var(--k-radius-klein);
	font-size: 17px;
	line-height: 1.3;
	font-weight: 500;
	color: var(--k-anthrazit);
}

.k-panel__link {
	display: block;
	padding: 7px 14px 7px 26px;
	border-radius: var(--k-radius-klein);
	font-size: 16px;
	line-height: 1.3;
	font-weight: 300;
	color: var(--k-text-leise);
}

/* Der Entwurf legt beim Hover eine sandfarbene Fläche unter den Link –
   die Textfarbe bleibt unverändert. Die globale Regel a:hover (0,1,1) würde
   die Farbe der Klassenregel (0,1,0) überschreiben, deshalb wird sie hier
   je Linkart erneut gesetzt. */
.k-panel__link:hover,
.k-panel__oberlink:hover,
.k-panel__link:focus-visible,
.k-panel__oberlink:focus-visible {
	background: var(--k-sand);
}

.k-panel__link:hover,
.k-panel__link:focus-visible {
	color: var(--k-text-leise);
}

.k-panel__oberlink:hover,
.k-panel__oberlink:focus-visible {
	color: var(--k-anthrazit);
}

.k-panel__link.is-aktiv,
.k-panel__oberlink.is-aktiv,
.k-panel__link.is-aktiv:hover,
.k-panel__oberlink.is-aktiv:hover {
	color: var(--k-gold-dunkel);
}

.k-panel__link.is-aktiv {
	font-weight: 500;
}

/* Die dritte Spalte trägt die Punkte ohne eigene Untergruppe.
   Im Entwurf sind sie wie Gruppentitel gesetzt, nicht wie Unterpunkte. */
.k-panel__spalte--einzeln .k-panel__link,
.k-panel__spalte--einzeln .k-panel__link:hover,
.k-panel__spalte--einzeln .k-panel__link:focus-visible {
	padding: 10px 14px 6px;
	border-radius: var(--k-radius-klein);
	font-size: 17px;
	line-height: 1.3;
	font-weight: 500;
	color: var(--k-anthrazit);
}

/* Die Seite, auf der man steht, bleibt auch in der dritten Spalte golden. */
.k-panel__spalte--einzeln .k-panel__link.is-aktiv,
.k-panel__spalte--einzeln .k-panel__link.is-aktiv:hover,
.k-panel__spalte--einzeln .k-panel__link.is-aktiv:focus-visible {
	color: var(--k-gold-dunkel);
}

/* ---------- Telefon und Burger ---------- */

/* Im Kopfbereich sitzt die Schaltfläche eine Stufe kleiner als im Inhalt. */
.k-header__rechts .k-btn {
	padding: 15px 26px;
	font-size: 17px;
}

.k-header__rechts {
	display: flex;
	align-items: center;
	gap: 18px;
	flex: 0 0 auto;
}

.k-header__tel {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 44px;
	padding: 10px 2px;
	color: var(--k-weiss);
	font-size: 17px;
	line-height: 1.4;
}

.k-header[data-scrolled] .k-header__tel {
	color: var(--k-anthrazit);
}

.k-header__tel:hover {
	color: var(--k-gold-dunkel);
}

.k-header__tel svg {
	transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.k-header__tel:hover svg {
	transform: rotate(-12deg) scale(1.1);
}

.k-burger {
	display: none;
	width: 48px;
	height: 48px;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--k-weiss);
	padding: 0;
}

.k-header[data-scrolled] .k-burger {
	color: var(--k-gold-dunkel);
}

.k-burger__striche,
.k-burger__striche::before,
.k-burger__striche::after {
	display: block;
	width: 26px;
	height: 2px;
	background: currentColor;
	transition: transform 0.25s ease;
}

.k-burger__striche {
	position: relative;
}

.k-burger__striche::before,
.k-burger__striche::after {
	content: "";
	position: absolute;
	left: 0;
}

.k-burger__striche::before {
	top: -8px;
}

.k-burger__striche::after {
	top: 8px;
}

/* =========================================================================
   Mobilmenue
   ====================================================================== */

.k-mobil {
	position: fixed;
	inset: 0;
	z-index: 10001;
	background: var(--k-creme);
	display: none;
	flex-direction: column;
	opacity: 0;
	transition: opacity 0.3s ease;
	overflow-y: auto;
	padding: 20px var(--k-rand) 40px;
}

.k-mobil[data-open] {
	display: flex;
	opacity: 0;
}

.k-mobil[data-sichtbar] {
	opacity: 1;
}

.k-mobil__kopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
}

.k-mobil__logo img {
	width: 190px;
	height: auto;
}

.k-mobil__schliessen {
	width: 48px;
	height: 48px;
	border: 0;
	background: none;
	cursor: pointer;
	font-size: 34px;
	line-height: 1;
	color: var(--k-gold-dunkel);
}

.k-mobil__liste,
.k-mobil__unterliste {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: none;
}

.k-mobil__link,
.k-mobil__summary,
.k-mobil__unterlink {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 52px;
	padding: 12px 0;
	border-bottom: 1px solid var(--k-linie-hell);
	color: var(--k-anthrazit);
	font-size: 28px;
	line-height: 1.3;
	font-weight: 300;
}

.k-mobil__summary {
	cursor: pointer;
	list-style: none;
}

.k-mobil__summary::-webkit-details-marker {
	display: none;
}

.k-mobil__unterliste {
	padding-left: 14px;
}

.k-mobil__unterlink {
	font-size: 19px;
	min-height: 44px;
}

.k-mobil__acc--tief > .k-mobil__summary {
	font-size: 19px;
	line-height: 1.5;
	min-height: 44px;
}

.k-mobil__link.is-aktiv,
.k-mobil__unterlink.is-aktiv {
	color: var(--k-gold-dunkel);
	font-weight: 500;
}

.k-mobil__icon {
	position: relative;
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}

.k-mobil__icon::before,
.k-mobil__icon::after {
	content: "";
	position: absolute;
	background: var(--k-gold-dunkel);
	transition: transform 0.3s ease;
}

.k-mobil__icon::before {
	inset: 8px 0 auto 0;
	height: 2px;
}

.k-mobil__icon::after {
	inset: 0 8px 0 auto;
	width: 2px;
}

details[open] > .k-mobil__summary .k-mobil__icon::after {
	transform: rotate(90deg);
}

.k-mobil__fuss {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 32px;
}

/* =========================================================================
   Schaltflaechen
   ====================================================================== */

.k-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 28px;
	align-items: center;
}

.k-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 19px 32px;
	border-radius: var(--k-radius-pille);
	font-size: 18px;
	line-height: 1.4;
	/* Der Entwurf führt alle Schaltflächen im leichten Schnitt. */
	font-weight: 300;
	/* Kein Rahmen bei gefüllten Flächen – er machte sie 4 px höher als im Entwurf. */
	border: 0;
	transition: var(--k-uebergang), filter 0.25s ease;
}

.k-btn--gefuellt {
	background: var(--k-gold-dunkel);
	color: var(--k-weiss);
}

.k-btn--gefuellt:hover {
	filter: brightness(0.9);
	color: var(--k-weiss);
}

.k-btn--gefuellt:active {
	transform: translateY(0);
}

.k-btn__icon {
	max-width: 0;
	opacity: 0;
	margin-left: 0;
	overflow: hidden;
	flex: 0 0 auto;
	transition: max-width 0.25s ease, opacity 0.25s ease, margin-left 0.25s ease;
}

.k-btn:hover .k-btn__icon {
	max-width: 24px;
	opacity: 1;
	margin-left: 9px;
}

.k-btn--umriss {
	padding: 17px 30px;
	border: 2px solid var(--k-gold);
	color: var(--k-anthrazit);
	background: transparent;
}

.k-btn--umriss:hover {
	background: var(--k-gold-dunkel);
	border-color: var(--k-gold-dunkel);
	color: var(--k-weiss);
	transform: translateY(-2px);
	box-shadow: var(--k-schatten-btn);
}

/* Gefüllte Schaltfläche auf dunklem Grund: helles Gold, dunkler Text. */
.k-btn--gefuellt-hell {
	background: var(--k-gold-hell);
	color: var(--k-anthrazit);
	border-color: var(--k-gold-hell);
}

.k-btn--gefuellt-hell:hover {
	filter: brightness(0.94);
	color: var(--k-anthrazit);
}

.k-btn--gefuellt-hell:hover .k-btn__icon {
	max-width: 24px;
	opacity: 1;
	margin-left: 9px;
}

.k-btn--umriss-hell {
	border: 2px solid rgba(255, 255, 255, 0.55);
	color: var(--k-weiss);
	background: transparent;
}

.k-btn--umriss-hell:hover {
	background: var(--k-weiss);
	border-color: var(--k-weiss);
	color: var(--k-anthrazit);
	transform: translateY(-2px);
	box-shadow: var(--k-schatten-btn);
}

.k-btn--pfeil {
	padding: 10px 0;
	min-height: 44px;
	border: 0;
	background: none;
	color: var(--k-gold-dunkel);
	font-size: 17px;
	font-weight: 500;
}

.k-btn--pfeil:hover {
	color: var(--k-anthrazit);
}

/* Wie im Entwurf: der Pfeil steht dauerhaft und wandert beim Hover.
   Doppelt war er nur, weil zusätzlich ein „→" im Text stand – das ist raus. */
.k-btn__pfeil {
	margin-left: 10px;
	flex: 0 0 auto;
	transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.k-btn--pfeil:hover .k-btn__pfeil,
.k-btn--pfeil:focus-visible .k-btn__pfeil,
.k-karte--link:hover .k-btn__pfeil,
.k-kachel--link:hover .k-btn__pfeil {
	transform: translateX(8px);
}

/* =========================================================================
   Kontaktflaggen
   ====================================================================== */

.k-flaggen {
	position: fixed;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 60;
	display: flex;
	flex-direction: column;
	gap: 6px;
	/* Entscheidend: jedes Fähnchen ist nur so breit wie sein Inhalt.
	   Ohne das werden alle auf dieselbe Breite gestreckt und öffnen gemeinsam. */
	align-items: flex-end;
}

.k-flagge {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	min-height: 48px;
	padding: 15px 16px 15px 18px;
	border-radius: var(--k-radius-pille) 0 0 var(--k-radius-pille);
	background: var(--k-anthrazit);
	color: var(--k-sand-hell);
	font-size: 17px;
	font-weight: 300;
	transition: var(--k-uebergang), filter 0.25s ease;
}

.k-flagge--termin {
	background: var(--k-gold-dunkel);
	color: var(--k-weiss);
}

.k-flagge:hover {
	filter: brightness(1.08);
}

/* Die Textfarbe muss beim Hover bleiben – „inherit" holte sonst die
   Fließtextfarbe herein und der Text stand mit 1,67:1 auf dem Gold. */
.k-flagge--termin,
.k-flagge--termin:hover {
	color: var(--k-weiss);
}

.k-flagge--telefon,
.k-flagge--telefon:hover,
.k-flagge--anfahrt,
.k-flagge--anfahrt:hover {
	color: var(--k-sand-hell);
}

.k-flagge__label {
	display: block;
	max-width: 0;
	opacity: 0;
	overflow: hidden;
	white-space: nowrap;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	transition: max-width 0.55s cubic-bezier(0.16, 0.84, 0.3, 1),
		opacity 0.55s ease, margin-left 0.55s ease;
}

.k-flagge:hover .k-flagge__label,
.k-flagge:focus-visible .k-flagge__label {
	max-width: 150px;
	opacity: 1;
	margin-left: 11px;
}

/* =========================================================================
   Grundraster der Abschnitte
   ====================================================================== */

.k-main {
	display: block;
}

.k-section {
	position: relative;
	max-width: var(--k-breite);
	margin: 0 auto;
	/* Wert aus dem Entwurf, sonst 72 px oben und unten. */
	padding: var(--k-abschnitt-polsterung, var(--k-abschnitt) var(--k-rand));
}

.k-section--sand,
.k-section--anthrazit {
	padding: var(--k-abschnitt-polsterung, var(--k-abschnitt) var(--k-rand));
}

.k-section > * {
	padding-left: 0;
	padding-right: 0;
}

.k-section--sand {
	max-width: none;
	background: var(--k-sand);
}

/* Anthrazitfläche: heller Text, helle Schaltflächen. */
.k-section--anthrazit {
	max-width: none;
	background: var(--k-anthrazit);
	color: var(--k-sand-hell);
}

.k-section--anthrazit > * {
	/* Die Innenspalte ist so breit wie die Inhaltsspalte der übrigen
	   Abschnitte: --k-breite abzüglich der beiden Seitenränder. Mit vollen
	   1440 px säße ihr Inhalt über 1440 px Fensterbreite 32 px zu weit links. */
	max-width: calc(var(--k-breite) - 2 * var(--k-rand));
	margin-left: auto;
	margin-right: auto;
}

.k-section--anthrazit h1,
.k-section--anthrazit h2,
.k-section--anthrazit h3,
.k-section--anthrazit h4 {
	color: var(--k-weiss);
}

.k-section--anthrazit
.k-section--anthrazit p,
.k-section--anthrazit li,
.k-section--anthrazit blockquote {
	color: var(--k-text-hell);
}

.k-section--anthrazit .k-text--leise,
.k-section--anthrazit .k-split__spalte p {
	color: var(--k-text-hell-leise);
}

.k-section--anthrazit .k-kicker {
	color: var(--k-gold-hell);
}

/* Goldene Vorzeile im hellen Goldton. Der Konverter erkennt als Goldzeile
   nur #8A6120, deshalb kommt „Schwerpunkt" ueber der Wurzelbehandlung als
   kleiner Absatz an statt als Kicker und wird von der Regel weiter oben
   auf #CFC6B6 gesetzt. Entwurf: 500 18px/1.4 in #E8C689, 10 px Abstand.
   Kontrast #E8C689 auf #3C3C3B: 6,77:1. */
.k-section--anthrazit .k-split__spalte > p.has-klein-font-size:first-child {
	color: var(--k-gold-hell);
	font-weight: 500;
	line-height: 1.4;
	margin-bottom: 10px;
	max-width: none;
}

.k-section--anthrazit .k-zitat__quelle {
	color: var(--k-gold-hell);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
}

.k-section--anthrazit .k-text--leise {
	color: var(--k-text-hell-leise);
}

.k-section--anthrazit .k-btn--pfeil {
	color: var(--k-gold-hell);
}

.k-section--anthrazit .k-btn--pfeil:hover {
	color: var(--k-weiss);
}

.k-section--anthrazit .k-faq__eintrag {
	background: rgba(255, 255, 255, 0.06);
}

.k-section--sand > * {
	/* Wie bei den Anthrazitflächen: --k-breite abzüglich der beiden
	   Seitenränder, sonst beginnt der Inhalt über 1440 px Fensterbreite
	   32 px links neben dem der übrigen Abschnitte. */
	max-width: calc(var(--k-breite) - 2 * var(--k-rand));
	margin-left: auto;
	margin-right: auto;
}

/* =========================================================================
   B1 Kopfbild
   ====================================================================== */

.k-kopfbild {
	position: relative;
	overflow: hidden;
	padding: 0;
	max-width: none;
}

.k-kopfbild--70 {
	/* Der Kopfbereich ist auf Unterseiten deckend – das Bild beginnt darunter,
	   sonst verschwindet sein oberes Drittel hinter der weißen Leiste. */
	/* Der Entwurf deckelt das Kopfbild bei 720 px – ohne den Deckel wächst es
	   auf hohen Bildschirmen ins Absurde. */
	height: calc(min(70vh, 720px) + var(--k-kopfhoehe));
	min-height: calc(420px + var(--k-kopfhoehe));
	padding-top: var(--k-kopfhoehe);
}

.k-kopfbild--70 .k-kopfbild__bild {
	top: var(--k-kopfhoehe);
}

.k-kopfbild--100 {
	height: 100vh;
	min-height: 520px;
	/* Deckel und dunkler Grund wie im Entwurf. */
	max-height: 1000px;
	background: var(--k-anthrazit);
}

.k-kopfbild__bild {
	position: absolute;
	inset: 0;
	height: 116%;
	will-change: transform;
}

.k-kopfbild--100 .k-kopfbild__bild {
	top: -12%;
	bottom: auto;
	height: 124%;
}

.k-kopfbild__bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
}

.k-kopfbild__abdunklung {
	position: absolute;
	inset: 0;
	/* Deckkraft im Textbereich mindestens 0,70 – erst dann erreicht weißer Text
	   auch über einer hellen Bildstelle 4,5:1 (gerechnet, nicht geschätzt). */
	background: linear-gradient(
		180deg,
		rgba(60, 60, 59, 0.55) 0%,
		rgba(60, 60, 59, 0.34) 32%,
		rgba(60, 60, 59, 0.72) 62%,
		rgba(60, 60, 59, 0.8) 100%
	);
}

.k-kopfbild__inhalt {
	position: relative;
	z-index: 2;
	max-width: var(--k-breite);
	margin: 0 auto;
	padding: var(--k-kopfhoehe) var(--k-rand) 88px;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	color: var(--k-weiss);
}

.k-kopfbild__titel {
	color: var(--k-weiss);
	font-size: 78px;
	line-height: 1.03;
	margin-bottom: 28px;
}

.k-kopfbild__text {
	color: var(--k-weiss);
	font-size: 20px;
	max-width: 56ch;
}

/* =========================================================================
   B2 Inhaltskarte
   ====================================================================== */

.k-intro {
	position: relative;
	z-index: 2;
	max-width: var(--k-breite);
	margin: -140px auto 0;
	padding: 64px var(--k-rand) 48px;
	background: var(--k-weiss);
	border-radius: var(--k-radius-gross) var(--k-radius-gross) 0 0;
	overflow: hidden;
}

.k-intro__titel {
	margin-bottom: 22px;
}

.k-intro__text {
	font-size: 20px;
	line-height: 1.7;
}

.k-wasserzeichen {
	position: absolute;
	width: 309px;
	height: auto;
	opacity: 0.07;
	pointer-events: none;
	user-select: none;
}

.k-wasserzeichen--rechts {
	right: -60px;
	bottom: -90px;
}

.k-wasserzeichen--links {
	left: -90px;
	top: 50%;
	transform: translateY(-50%);
	width: 340px;
}

/* =========================================================================
   Standardseite
   ====================================================================== */

.k-standard__kopf {
	max-width: var(--k-breite);
	margin: 0 auto;
	/* Entwurf: 230px 32px 48px – bei Praxis & Team 200px 32px 40px. */
	padding: 230px var(--k-rand) 48px;
}

.k-standard__innen {
	max-width: 64ch;
}

/* =========================================================================
   B3 Zwei Spalten
   ====================================================================== */

.k-split {
	display: grid;
	gap: 72px;
	align-items: start;
}

.k-split--text-inhalt {
	grid-template-columns: 0.95fr 1.05fr;
}

.k-split--text-bild {
	grid-template-columns: 1.15fr 0.85fr;
}

.k-split--gleich {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 64px;
}

/* Auf Anthrazit verlangt der Entwurf 72 px Spalte und mittige Ausrichtung
   (Startseite: Wurzelbehandlung, Leistungen: Schwerpunkt). Der sandfarbene
   Fall auf Praxis & Team bleibt bei 64 px und oberer Ausrichtung.
   Erst ab 1201 px: darunter faellt .k-split ohnehin auf eine Spalte
   mit gap:48px (theme.css:2425) - diese Regel wuerde das sonst per
   Spezifitaet ueberstimmen. */
@media (min-width: 1201px) {
	.k-section--anthrazit .k-split--gleich {
		gap: 72px;
		align-items: center;
	}
}

/* Eine Spalte kann als abgesetzter Kasten laufen (z. B. „Termin vereinbaren"). */
.k-split__spalte--kasten {
	background: var(--k-sand);
	padding: 40px 36px;
	border-radius: var(--k-radius-karte);
	align-self: start;
}

.k-section--sand .k-split__spalte--kasten {
	background: var(--k-weiss);
}

/* =========================================================================
   B4/B5 Raster und Karten
   ====================================================================== */

.k-raster {
	display: grid;
	gap: 20px 20px;
}

.k-raster--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.k-raster--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.k-karte {
	display: flex;
	flex-direction: column;
	background: var(--k-sand);
	padding: 30px 28px 32px;
	border-radius: 0;
	color: inherit;
	height: 100%;
}

/* Auf sandfarbenem Grund kehrt sich die Karte um. */
.k-section--sand .k-karte {
	background: var(--k-weiss);
}

.k-karte .k-btn--pfeil {
	margin-top: auto;
	padding-top: 14px;
	padding-bottom: 0;
	font-size: 16px;
	min-height: 0;
}

.k-karte h3 {
	margin-bottom: 0.5em;
}

.k-karte p {
	font-size: 17px;
	line-height: 1.65;
	margin-bottom: 0;
}

.k-karte h3 {
	margin-bottom: 8px;
}

.k-karte--link:hover {
	color: inherit;
}

.k-karte--link:hover h3 {
	color: var(--k-gold-dunkel);
}

/* =========================================================================
   B6 FAQ
   ====================================================================== */

.k-section--faq {
	overflow: hidden;
}

.k-faq {
	display: grid;
	grid-template-columns: 0.95fr 1.05fr;
	gap: 72px;
	align-items: start;
	position: relative;
	z-index: 1;
}

/* Die Einleitung im FAQ-Kopf ist eine Stufe kleiner als eine Seiteneinleitung. */
.k-faq__kopf .k-text--gross {
	font-size: 19px;
	margin-bottom: 0;
}

.k-faq__kopf h2 {
	margin-bottom: 22px;
}

.k-faq__kopf .k-kicker {
	margin-bottom: 10px;
}

.k-faq__liste {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.k-faq__eintrag {
	background: var(--k-weiss);
	border: 0;
	border-radius: var(--k-radius-karte);
	padding: 0;
	transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

.k-faq__eintrag:hover {
	box-shadow: var(--k-schatten-acc);
}

.k-faq__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	/* Polsterung hier, damit die Klickfläche der sichtbaren Zeile entspricht. */
	padding: 20px 26px;
	cursor: pointer;
	list-style: none;
}

.k-faq__summary::-webkit-details-marker {
	display: none;
}

.k-faq__frage {
	font-size: 17px;
	line-height: 1.5;
	font-weight: 500;
	color: var(--k-anthrazit);
}

.k-faq__icon {
	flex: 0 0 auto;
	color: var(--k-gold-dunkel);
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
	display: inline-flex;
}

.k-faq__eintrag[open] .k-faq__icon {
	transform: rotate(45deg);
}

/* Waehrend der JS-Schliessanimation steht [open] noch – Icon trotzdem zurueckdrehen. */
.k-faq__eintrag[data-schliesst] .k-faq__icon {
	transform: none;
}

.k-faq__antwort {
	padding: 0 26px 20px;
}

.k-faq__antwort p {
	margin: 0 0 4px;
	font-size: 18px;
	line-height: 1.7;
}

@supports selector(::details-content) and (interpolate-size: allow-keywords) {
	.k-faq__eintrag::details-content {
		block-size: 0;
		overflow: hidden;
		opacity: 0;
		transition: block-size 1.05s cubic-bezier(0.22, 1, 0.36, 1),
			opacity 0.45s ease, content-visibility 1.05s allow-discrete;
	}

	.k-faq__eintrag[open]::details-content {
		block-size: auto;
		opacity: 1;
		transition: block-size 1.05s cubic-bezier(0.22, 1, 0.36, 1),
			opacity 0.55s ease 0.35s, content-visibility 1.05s allow-discrete;
	}
}

/* Rueckfall fuer Safari: Hoehe wird per JS animiert. */
.k-faq__huelle {
	overflow: hidden;
	transition: height 1.05s cubic-bezier(0.22, 1, 0.36, 1);
}

/* =========================================================================
   B7 Leistungsblock
   ====================================================================== */

.k-section--leistung {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
	overflow: hidden;
}

.k-leistung {
	max-width: var(--k-breite);
	margin: 0 auto;
	padding: 72px var(--k-rand);
	display: flex;
	align-items: center;
	gap: 0;
}

/* „links" und „rechts" beziehen sich auf die Lage der TEXTKARTE.
   Die Karte zieht sich immer auf die Seite des Bildes hin, nie nach außen. */
.k-leistung--links {
	flex-direction: row-reverse;
	/* row-reverse legt den Anfang der Hauptachse nach rechts. Der Rest der
	   Zeile (bei 1440 px sind es 15 px) landete dadurch links und schob die
	   Karte vom Inhaltsrand weg. flex-end packt die Zeile wieder linksbündig. */
	justify-content: flex-end;
}

.k-leistung__bild {
	flex: 0 0 56%;
	width: 92%;
	height: 620px;
	border-radius: var(--k-radius-gross);
	overflow: hidden;
	transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.3, 1);
	will-change: transform;
}

.k-leistung__bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.k-leistung:hover .k-leistung__bild {
	transform: scale(1.015);
}

.k-leistung__karte {
	flex: 0 0 58%;
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid var(--k-linie-sand);
	border-radius: var(--k-radius-gross);
	padding: 3.2rem 3.4rem;
	position: relative;
	z-index: 2;
	will-change: transform;
}

.k-leistung--links .k-leistung__karte {
	margin-right: -208px;
}

.k-leistung--rechts .k-leistung__karte {
	margin-left: -208px;
}

/* Nichts darf über den Inhaltsrand hinauslaufen. */
.k-leistung__karte {
	min-width: 0;
}

/* Die Überschrift der Leistungskarte ist im Entwurf 40 px. */
.k-leistung__karte h2,
.k-leistung__karte h3 {
	font-size: 40px;
	line-height: 1.15;
	margin-bottom: 16px;
}

.k-leistung__karte p {
	font-size: 19px;
	line-height: 1.7;
	margin-bottom: 22px;
}

/* =========================================================================
   B8 Abschluss-CTA
   ====================================================================== */

.k-section--cta {
	max-width: none;
	padding: 0;
	overflow: hidden;
	position: relative;
	isolation: isolate;
}

.k-cta__bild {
	position: absolute;
	inset: 0;
	/* Das Bild ist die randlose Flaeche des Abschnitts. Ohne die beiden
	   folgenden Angaben greift .k-section--anthrazit > * und klemmt es auf
	   --k-breite, zentriert per auto-Rand: ab 1441 px Fensterbreite bleiben
	   links und rechts anthrazitfarbene Streifen stehen (1512 px: je 36 px). */
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	background-size: cover;
	background-position: center 35%;
	z-index: -1;
	will-change: transform;
}


.k-section--cta::after {
	content: "";
	position: absolute;
	inset: 0;
	/* wie beim Kopfbild: 0,72 sichert 4,77:1 für weißen Text auf jedem Motiv */
	background: rgba(60, 60, 59, 0.72);
	z-index: -1;
}

.k-cta__inhalt {
	max-width: var(--k-breite);
	margin: 0 auto;
	padding: 300px var(--k-rand);
	color: var(--k-weiss);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.k-cta__inhalt h2,
.k-cta__inhalt h3 {
	color: var(--k-weiss);
	max-width: none;
}

.k-cta__inhalt p {
	color: var(--k-text-hell);
	max-width: 72ch;
	margin-bottom: 34px;
}

.k-cta__inhalt h2 {
	font-size: 44px;
	line-height: 1.18;
	margin-bottom: 16px;
}

.k-cta__inhalt .k-buttons {
	justify-content: center;
}

/* =========================================================================
   B9 Kacheln
   ====================================================================== */

.k-kacheln {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 48px;
}

.k-kachel {
	display: block;
	color: inherit;
}

.k-kachel__bild {
	border-radius: var(--k-radius-karte);
	overflow: hidden;
	aspect-ratio: 3 / 2;
	margin-bottom: 20px;
}

.k-kachel__bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.k-kachel:hover .k-kachel__bild img,
[data-zoom]:hover img {
	transform: scale(1.06);
}

.k-kachel p {
	font-size: 18px;
	line-height: 1.65;
}

.k-kachel--link:hover h3 {
	color: var(--k-gold-dunkel);
}

/* =========================================================================
   B10 Galerie
   ====================================================================== */

.k-galerie {
	display: grid;
	gap: 8px;
	grid-auto-rows: 620px;
	/* Der Entwurf zieht den folgenden Abschnitt 140 px darüber. */
	margin: 56px 0 -140px;
	position: relative;
	z-index: 1;
}

/* Ohne das frisst die Polsterung des Abschnitts die Überlappung wieder auf. */
.k-section--galerie {
	padding-bottom: 0;
}

/* Die Galerie zieht den folgenden Abschnitt 140 px über sich. Der Entwurf
   lässt unter der Bildunterkante 84 px Luft bis zum Kicker
   ("Behandlungsspektrum"), also 140 + 84 = 224 px Polsterung oben. */
.k-section--galerie + .k-section--fliesstext {
	padding-top: 224px;
}

.k-galerie--gross-klein {
	grid-template-columns: 1.5fr 1fr;
}

.k-galerie--gleich {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.k-galerie figure,
.k-galerie .wp-block-image {
	margin: 0;
	height: 100%;
	overflow: hidden;
	border-radius: 0;
}

.k-galerie img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.k-galerie figure:hover img,
.k-galerie .wp-block-image:hover img {
	transform: scale(1.06);
}

/* =========================================================================
   B11 Team
   ====================================================================== */

.k-team {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 48px;
	align-items: start;
}

/* Grundversatz der Startseite wie im Entwurf: 0 / 56 / 112 px.
   Erst dieser Sockel macht den Geschwindigkeitsunterschied ablesbar.
   Die Seite "Praxis & Team" hat im Entwurf keinen Versatz, daher .home. */
.home .k-team > .k-person:nth-child(2) {
	margin-top: 56px;
}

.home .k-team > .k-person:nth-child(3) {
	margin-top: 112px;
}

@media (max-width: 1200px) {
	.home .k-team > .k-person:nth-child(2),
	.home .k-team > .k-person:nth-child(3) {
		margin-top: 0;
	}
}

.k-person__bild {
	border-radius: 0;
	overflow: hidden;
	height: 400px;
	margin-bottom: 0;
	will-change: transform;
}

.k-person__bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.k-person__text {
	display: flex;
	flex-direction: column;
}

/* Der Entwurf zeigt erst den Namen, dann die Funktion. */
.k-person__text > h3 {
	order: 1;
}

.k-person__text > .k-kicker {
	order: 2;
}

.k-person__text > p:not(.k-kicker) {
	order: 3;
}

.k-person__text > .k-buttons,
.k-person__text > .k-btn {
	order: 4;
}

.k-person__text h3 {
	margin: 24px 0 4px;
	font-size: 25px;
	line-height: 1.25;
}

.k-person__text .k-kicker {
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: normal;
	text-transform: none;
	margin: 0 0 12px;
}

.k-person__text p:not(.k-kicker) {
	font-size: 17px;
	line-height: 1.65;
	padding-top: 12px;
	border-top: 1px solid var(--k-linie-sand);
}

.k-person__text .k-btn--pfeil {
	margin-top: 20px;
	font-size: 17px;
}

/* =========================================================================
   B12 Schritte
   ====================================================================== */

/* Im Entwurf stehen Kopf und Schritte in EINEM Abschnitt: zwischen der
   Ueberschrift „Ihr erster Besuch" und den drei Karten liegen genau die
   44 px Aussenabstand der Ueberschrift. Der Konverter trennt beides in zwei
   Abschnitte, deren Polsterung sich zu 28 + 88 + 72 = 188 px summiert.
   Gleiche Bauart wie .k-fliesstext--kopf weiter unten: Polsterung statt
   Aussenabstand, damit nichts aus dem Abschnitt herausklappt. */
.k-section--fliesstext:has(+ .k-section--schritte) {
	padding-bottom: 44px;
}

.k-section--fliesstext:has(+ .k-section--schritte) h2 {
	margin-bottom: 0;
}

.k-section--fliesstext + .k-section--schritte {
	padding-top: 0;
}

/* Unter den drei Schrittkarten liegen im Entwurf 161 px bis zur Ueberschrift des
   Karrierebands. Aus 72 px Polsterung unten und 72 px oben ergeben sich nur 144 px. */
.k-section--schritte + .k-section--band {
	padding-top: 89px;
}

.k-schritte {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 48px;
}

.k-schritt__ziffer {
	font-size: 46px;
	line-height: 1;
	font-weight: 300;
	color: var(--k-gold-dunkel);
	margin: 0 0 14px;
	max-width: none;
}

.k-schritt__text h3 {
	font-size: 22px;
	line-height: 1.3;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--k-linie-sand);
	margin-bottom: 10px;
}

.k-schritt__text p {
	font-size: 17px;
	line-height: 1.7;
	margin-bottom: 0;
}

/* =========================================================================
   B13 Zitate
   ====================================================================== */

/* Im Entwurf steckt der Seitenrand dieses Abschnitts im inneren Rahmen,
   im Theme trägt ihn der Abschnitt selbst. Ohne diese zwei Zeilen bleibt
   der Inhaltswert "88px 0" stehen und der Kopf klebt am Fensterrand. */
.k-section--zitate {
	padding-left: var(--k-rand);
	padding-right: var(--k-rand);
}

.k-zitate__kopf {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
	margin-bottom: 40px;
}

.k-zitate__kopf h2 {
	margin-bottom: 0;
}

.k-zitate {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 48px;
}

.k-zitat__sterne {
	display: flex;
	gap: 5px;
	color: var(--k-gold-hell);
	margin: 0 0 14px;
	max-width: none;
}

.k-section:not(.k-section--anthrazit) .k-zitat__sterne {
	color: var(--k-gold-dunkel);
}

.k-zitat {
	margin: 0;
}

.k-zitat blockquote {
	margin: 0 0 14px;
	font-size: 19px;
	line-height: 1.65;
}

.k-zitate__kopf h2 {
	margin-bottom: 0;
}

.k-zitat blockquote p {
	max-width: none;
}

.k-zitat__quelle {
	color: var(--k-text-leise);
	font-size: 17px;
}

/* =========================================================================
   B14 Vertrauensleiste
   ====================================================================== */

.k-vertrauen {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
}

.k-vertrauen__punkt {
	border-left: 1px solid var(--k-linie-sand);
	padding: 4px 0 4px 24px;
}

.k-vertrauen__punkt h3 {
	font-size: 20px;
	margin-bottom: 0.3em;
}

.k-vertrauen__punkt p {
	font-size: 17px;
	line-height: 1.6;
	color: var(--k-text-leise);
}

/* =========================================================================
   B15 Sprechzeiten
   ====================================================================== */

.k-zeiten {
	background: var(--k-sand);
	border-radius: var(--k-radius-gross);
	padding: 48px;
	max-width: 620px;
}

.k-section--sand .k-zeiten {
	background: var(--k-weiss);
}

.k-zeiten__titel {
	font-size: 44px;
	line-height: 1.18;
	margin-bottom: 24px;
}

.k-zeiten__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: none;
}

.k-zeiten__zeile {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	/* Wie im Fussbereich: gerader Balken statt abgerundeter Flaeche.
	   2 px Balken + 12 px Polsterung ergeben dieselben 14 px wie zuvor. */
	border-left: 2px solid transparent;
	padding: 10px 14px 10px 12px;
	border-radius: 0;
	min-height: 44px;
}

.k-zeiten__zeile.is-heute {
	border-left-color: var(--k-gold);
}

.k-zeiten__tag {
	font-weight: 500;
	color: var(--k-anthrazit);
}

.k-zeiten__zeit {
	display: flex;
	flex-direction: column;
	text-align: right;
}

.k-zeiten__hinweis {
	margin: 16px 12px 0;
	color: var(--k-text-leise);
	font-size: 17px;
	line-height: 1.6;
}

/* =========================================================================
   B16 Kontakt
   ====================================================================== */

.k-kontakt {
	display: grid;
	grid-template-columns: 0.95fr 1.05fr;
	gap: 72px;
	align-items: start;
}

.k-kontakt--ohne-karte {
	grid-template-columns: 1fr;
}

.k-kontakt__adresse {
	font-style: normal;
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 24px;
}

.k-kontakt__name {
	font-weight: 500;
	color: var(--k-anthrazit);
}

.k-kontakt__tel {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 44px;
	margin-top: 8px;
}

.k-kontakt__mail {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

.k-kontakt__karte {
	border-radius: var(--k-radius-karte);
	overflow: hidden;
	position: relative;
}

.k-kontakt__karte img {
	width: 100%;
	height: auto;
}

.k-kontakt__kartenhinweis {
	position: absolute;
	left: 16px;
	bottom: 16px;
	background: var(--k-weiss);
	color: var(--k-gold-dunkel);
	font-size: 17px;
	font-weight: 500;
	padding: 12px 20px;
	border-radius: var(--k-radius-pille);
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	box-shadow: var(--k-schatten-platte);
}

/* =========================================================================
   B17 Fliesstext
   ====================================================================== */

.k-fliesstext {
	max-width: 64ch;
}

/* Ganzflächige Sand- und Anthrazitabschnitte geben jedem direkten Kind
   automatische Seitenabstände. Der schmale Fließtext säße dadurch mittig
   statt an der Inhaltskante. Er bekommt darum die volle Inhaltsspalte;
   die Zeilenlänge begrenzen weiterhin die Absätze selbst (p, ul, ol: 64ch). */
.k-section--sand > .k-fliesstext,
.k-section--anthrazit > .k-fliesstext {
	max-width: calc(var(--k-breite) - 2 * var(--k-rand));
}

.k-fliesstext h2 {
	margin-top: 1.6em;
}

/* Steht ein Kicker davor, gehören die beiden zusammen – kein Abstand dazwischen. */
.k-fliesstext .k-kicker + h2,
.k-fliesstext > h2:first-child {
	margin-top: 0;
}

/* Abschnittskopf über Team und Galerie: 44 px bis zum Inhalt.
   Als Polsterung, nicht als Außenabstand – der fiele durch Margin-Kollaps
   aus dem Abschnitt heraus. */
.k-fliesstext--kopf {
	padding-bottom: 44px;
}

.k-fliesstext--kopf h2 {
	margin-bottom: 0;
}

.k-fliesstext h3 {
	margin-top: 1.4em;
}

.k-fliesstext li {
	margin-bottom: 0.4em;
}

/* =========================================================================
   B18 Hinweisband
   ====================================================================== */

.k-band {
	border-radius: var(--k-radius-karte);
	padding: 40px 48px;
}

.k-band--sand {
	background: var(--k-sand);
}

/* Der Entwurf setzt das Hinweisband zweispaltig: Text links, Schaltfläche
   rechts, senkrecht mittig zum ganzen Textblock. Die Schaltfläche steht in
   Spalte 2 und spannt über alle Textreihen. „1 / -1“ reicht dafür nicht:
   ohne grid-template-rows gibt es kein explizites Reihenraster, -1 zeigt
   dann auf Linie 1 und die Schaltfläche belegt nur die erste Reihe. */
.k-section--band .k-band {
	display: grid;
	grid-template-columns: minmax(0, max-content) auto;
	align-items: center;
	column-gap: 40px;
}

.k-section--band .k-band > * {
	grid-column: 1;
}

.k-section--band .k-band > .k-buttons {
	grid-column: 2;
	grid-row: 1 / span 99;
	justify-content: flex-end;
	margin-top: 0;
}

/* Sandband auf Sandfläche: die Fläche kommt im Entwurf vom Abschnitt, das
   Band selbst hat weder Radius noch eigene Polsterung. Die Kartenform
   bleibt für .k-band--gold erhalten. */
.k-section--sand > .k-band--sand {
	background: transparent;
	border-radius: 0;
	padding: 0;
}

/* Schriftgrade des Bandes aus dem Entwurf: 40 px statt 42 px, 12 px Abstand
   zum Absatz, Absatzbreite 56ch statt der globalen 64ch. */
.k-section--band .k-band > h2 {
	font-size: 40px;
	line-height: 1.15;
	margin-bottom: 12px;
}

.k-section--band .k-band > p {
	max-width: 56ch;
	margin-bottom: 0;
}

.k-band--gold {
	background: var(--k-gold-dunkel);
	color: var(--k-weiss);
}

.k-band--gold h2,
.k-band--gold h3,
.k-band--gold p {
	color: var(--k-weiss);
}

.k-band--gold .k-btn--umriss {
	border-color: rgba(255, 255, 255, 0.55);
	color: var(--k-weiss);
}

.k-band--gold .k-btn--umriss:hover {
	background: var(--k-weiss);
	color: var(--k-anthrazit);
	border-color: var(--k-weiss);
}

/* =========================================================================
   Fussbereich
   ====================================================================== */

.k-fuss {
	background: var(--k-sand);
	color: var(--k-text);
}

.k-fuss__innen {
	max-width: var(--k-breite);
	margin: 0 auto;
	padding: 0 var(--k-rand);
}

.k-fuss__raster {
	display: grid;
	grid-template-columns: 1.2fr 1fr 1fr 1fr;
	gap: 40px;
	padding: 72px 0 40px;
}

.k-fuss__titel {
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--k-gold-dunkel);
	margin-bottom: 18px;
}

/* Aufbau der Kontaktspalte: drei enge Anschriftzeilen, eine Leerzeile,
   Telefonnummer, Schaltflaeche. Kein gap — der Takt ist die Zeilenhoehe. */
.k-fuss__adresse {
	font-style: normal;
	display: flex;
	flex-direction: column;
	gap: 0;
	font-size: 18px;
	line-height: 1.7;
}

/* Die Leerzeile vor der Telefonnummer: genau eine Zeilenhoehe. */
.k-fuss__adresse .k-fuss__link--tel {
	margin-top: 1.7em;
}


.k-fuss__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: none;
}

.k-fuss__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 8px 0;
	color: var(--k-text);
	font-size: 18px;
}

/* In Kontakt- und Navigationsspalte laufen die Zeilen im Texttakt (30,6 px),
   nicht in Klickflaechen-Hoehe. Damit stehen beide Spalten gleich und die
   Telefonzeile ist wieder einzeilig. Bewusste Abweichung vom Hausstandard:
   die Klickflaeche sinkt dort von 44 px auf 30,6 px — weiterhin ueber den
   24 px aus WCAG 2.5.8, aber unter der Hausregel. Die volle Spaltenbreite
   von 299 px bleibt anklickbar. */
.k-fuss__adresse .k-fuss__link,
.k-fuss__liste .k-fuss__link {
	display: flex;
	min-height: 0;
	padding: 0;
	line-height: 1.7;
}

/* Telefonzeile im Fuss: Hoerer in Gold, 17 px, 9 px vor der Nummer. */
.k-fuss__link--tel {
	gap: 9px;
}

.k-fuss__link--tel svg {
	width: 17px;
	height: 17px;
	flex: 0 0 auto;
	color: var(--k-gold-dunkel);
}

/* Schaltflaeche im Fuss – im Entwurf kleiner als die Standardschaltflaeche. */
.k-fuss__btn {
	margin-top: 1.7em;
	padding: 16px 26px;
	font-size: 17px;
	line-height: 1;
}

.k-fuss a:not(.k-btn):hover {
	color: var(--k-gold-dunkel);
}

.k-fuss a.k-btn:hover {
	color: var(--k-weiss);
}

.k-fuss a.k-btn--umriss:hover {
	color: var(--k-weiss);
}

.k-fuss__zeiten {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: none;
	font-size: 18px;
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* Der Entwurf trennt die Zeilen ohne Linien, nur ueber den Abstand.
   Die seitliche Polsterung mit Gegenmarge gibt der Heute-Flaeche Luft,
   ohne den Textanfang zu verschieben. */
.k-fuss__zeiten li {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	/* Alle Zeilen tragen den Balken unsichtbar mit, damit der heutige Tag
	   keinen Sprung im Textanfang erzeugt. 2 px Balken + 8 px Polsterung
	   ergeben dieselben 10 px wie zuvor. */
	border-left: 2px solid transparent;
	padding: 3px 10px 3px 8px;
	margin: 0 -10px;
	border-radius: 0;
}

/* Heutiger Tag – dieselbe Auszeichnung wie in der Sprechzeiten-Karte oben.
   Klasse und aria-current setzt bereits site.js, Abschnitt 7, ueber [data-tag]. */
/* Mittleres Gold statt dunklem: leichter im Bild, mit 3,37:1 auf der
   Sandflaeche weiterhin ueber den 3:1, die WCAG 1.4.11 fuer bedeutungs-
   tragende Nicht-Text-Elemente verlangt. */
.k-fuss__zeiten li.is-heute {
	border-left-color: var(--k-gold);
}

.k-fuss__tag {
	font-weight: 500;
	color: var(--k-anthrazit);
}

.k-fuss__zeit {
	display: flex;
	flex-direction: column;
	text-align: right;
}

.k-fuss__hinweis {
	margin-top: 14px;
	font-size: 17px;
	color: var(--k-text-leise);
}

.k-fuss__unten {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	border-top: 1px solid var(--k-linie-sand);
	padding: 16px 0 40px;
}

.k-fuss__rechtliches {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: none;
}

.k-fuss__jahr {
	margin: 0;
	font-size: 17px;
	color: var(--k-text-leise);
	max-width: none;
}

/* Der Anker traegt Keyword und Praxisnamen und zeigt auf die Startseite.
   Im Entwurf in derselben Farbe wie der umgebende Text, ohne Unterstreichung. */
.k-fuss__jahr a {
	color: inherit;
}

/* =========================================================================
   Suche
   ====================================================================== */

.k-suche__label {
	display: block;
	font-weight: 500;
	margin-bottom: 8px;
	color: var(--k-anthrazit);
}

.k-suche__zeile {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.k-suche__feld {
	flex: 1 1 240px;
	min-height: 44px;
	padding: 12px 18px;
	border: 1px solid var(--k-linie-sand);
	border-radius: var(--k-radius-pille);
	font: inherit;
	color: var(--k-text);
	background: var(--k-weiss);
}

/* =========================================================================
   Bewegung
   ====================================================================== */

/* Ohne JavaScript bleibt alles sichtbar. Nur wenn das Skript läuft, wird
   überhaupt versteckt – sonst wäre die halbe Seite unsichtbar, sobald
   site.js blockiert wird oder einen Fehler wirft. */
.hat-js [data-reveal]:not(.is-in) {
	opacity: 0;
}

[data-reveal].is-in {
	opacity: 1;
	transition: opacity 0.8s ease;
}

.hat-js [data-reveal]:not(.is-in) [data-reveal-child] {
	opacity: 0;
	transform: translateY(34px);
}

[data-reveal].is-in [data-reveal-child] {
	opacity: 1;
	transform: none;
	transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.16, 0.84, 0.3, 1);
}

[data-reveal] .k-wasserzeichen {
	opacity: 0.07;
	transform: none;
	transition: none;
}

.k-wasserzeichen--links {
	transform: translateY(-50%);
}

.hat-js [data-hero-in] {
	opacity: 0;
	transform: translateY(26px);
	animation: k-hero-in 0.9s cubic-bezier(0.16, 0.84, 0.3, 1) 0.25s forwards;
}

[data-hero-in] + [data-hero-in] {
	animation-delay: 0.42s;
}

@keyframes k-hero-in {
	to {
		opacity: 1;
		transform: none;
	}
}

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

	[data-reveal],
	[data-reveal].is-in,
	[data-reveal-child],
	[data-hero-in] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
		animation: none !important;
	}

	[data-parallax],
	[data-parallax-text],
	[data-hero-img],
	[data-team-col],
	[data-cta-img] {
		transform: none !important;
	}

	.k-wasserzeichen--links {
		transform: translateY(-50%) !important;
	}
}

/* =========================================================================
   Breakpoints
   ====================================================================== */

@media (max-width: 1340px) {
	.k-panel {
		right: -20px;
		min-width: 520px;
	}
}

@media (max-width: 1200px) {
	.k-split,
	.k-faq,
	.k-kontakt {
		grid-template-columns: 1fr;
		gap: 48px;
	}

	.k-raster--3,
	.k-kacheln,
	.k-team,
	.k-zitate {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.k-vertrauen {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.k-leistung__bild {
		height: 520px;
		flex-basis: 50%;
	}

	.k-leistung__karte {
		flex-basis: 58%;
	}

	.k-leistung--links .k-leistung__karte {
		margin-right: -110px;
	}

	.k-leistung--rechts .k-leistung__karte {
		margin-left: -110px;
	}

	.k-leistung__bild {
		flex-basis: 50%;
	}

	.k-leistung__karte {
		flex-basis: 58%;
	}

	.k-fuss__raster {
		grid-template-columns: 1fr 1fr;
		gap: 40px 48px;
	}

	.k-fuss__spalte--logo {
		grid-column: 1 / -1;
		padding-bottom: 24px;
	}
}

@media (max-width: 1100px) {
	.k-nav {
		display: none;
	}

	.k-burger {
		display: inline-flex;
	}

	.k-header__tel span {
		display: none;
	}

	.k-header__rechts .k-btn {
		padding: 13px 20px;
	}

	.k-header__rechts .k-btn {
		font-size: 17px;
	}

	/* Ab hier passen Text und Schaltfläche nicht mehr nebeneinander:
	   695 px Text + 40 px Abstand + 259 px Schaltfläche = 994 px Inhalt,
	   das braucht 1058 px Fensterbreite. Im Entwurf rutscht die
	   Schaltfläche dann mit 40 px Abstand unter den Text. */
	.k-section--band .k-band {
		grid-template-columns: minmax(0, 1fr);
	}

	.k-section--band .k-band > .k-buttons {
		grid-column: 1;
		grid-row: auto;
		justify-content: flex-start;
		margin-top: 40px;
	}
}

@media (max-width: 900px) {
	/* Schriftstufen mobil – Werte aus den Entwürfen. */
	h1 {
		font-size: 38px;
		line-height: 1.12;
	}

	h2,
	h2.has-h2-mittel-font-size,
	h2.has-h2-klein-font-size,
	h2.has-h2-mini-font-size,
	h2.has-h2-26-font-size,
	h2.has-h2-22-font-size,
	h2.has-h2-gross-font-size,
	.k-section--band .k-band > h2,
	.k-raster__titel[class*="has-h2"] {
		font-size: 30px;
		line-height: 1.2;
	}

	h3,
	h3.has-h3-gross-font-size,
	h3.has-h3-font-size {
		font-size: 23px;
		line-height: 1.3;
	}

	/* Alle Textstellen mobil auf 17 px – die Auswahl ist absichtlich
	   spezifisch genug, um die Block-Regeln zu überstimmen. */
	body p,
	body li,
	body .k-text--gross,
	body .k-intro__text,
	body .k-kopfbild__text,
	body .k-karte p,
	body .k-kasten p,
	body .k-split__spalte--kasten > p,
	body .k-schritt__text p,
	body .k-person__text p,
	body .k-faq__antwort p,
	body .k-faq__kopf .k-text--gross,
	body .k-leistung__karte p,
	body .k-cta__inhalt p,
	body .k-zitat blockquote,
	body .has-mini-font-size,
	body .has-klein-font-size,
	body .has-standard-font-size,
	body .has-gross-font-size {
		font-size: 17px;
		line-height: 1.65;
	}

	/* Ausnahme mit !important, weil die WordPress-Preset-Klasse selbst mit
	   !important kommt. Die Zeilenhoehe wird bewusst NICHT gesetzt: die 1,35
	   aus .k-kasten > p:first-child gewinnt und ist der Entwurfswert. */
	.k-kasten > p:first-child {
		font-size: 17px !important;
	}

	.k-kicker {
		font-size: 13px;
	}

	.k-kopfbild__titel {
		font-size: 38px;
		line-height: 1.12;
	}

	.k-faq__frage {
		font-size: 16px;
		line-height: 1.5;
	}

	.k-kopfbild--70 {
		padding-top: 0;
	}

	.k-kopfbild--70 .k-kopfbild__bild {
		top: 0;
	}

	.k-header__innen {
		padding-left: 20px;
		padding-right: 12px;
		min-height: 96px;
	}

	.k-header img {
		width: 190px;
	}

	.k-header[data-scrolled] img {
		width: 160px;
	}

	.k-header__rechts .k-btn--gefuellt {
		display: none;
	}

	.k-kopfbild--70,
	.k-kopfbild--100 {
		height: 78vh;
		min-height: 420px;
	}

	.k-kopfbild__inhalt {
		padding-top: 120px;
		padding-bottom: 56px;
	}

	.k-intro {
		margin-top: 0;
		border-radius: 0;
		padding: 40px var(--k-rand) 32px;
	}

	.k-wasserzeichen {
		width: 225px;
		right: -45px;
		bottom: -60px;
	}

	.k-wasserzeichen--links {
		width: 230px;
		left: -70px;
	}

	.k-standard__kopf {
		padding-top: 150px;
	}

	.k-section {
		padding-top: 56px;
		padding-bottom: 56px;
	}

	.k-raster--3,
	.k-raster--2,
	.k-team,
	.k-schritte,
	.k-zitate,
	.k-vertrauen {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.k-vertrauen__punkt {
		border-left: 0;
		border-top: 1px solid var(--k-linie-hell);
		padding: 18px 0;
	}

	.k-leistung {
		flex-direction: column;
		padding-left: 0;
		padding-right: 0;
	}

	.k-leistung__bild {
		width: 100vw;
		margin-left: calc(-50vw + 50%);
		height: 62vh;
		border-radius: 0;
		flex-basis: auto;
	}

	.k-leistung__karte {
		order: 2;
		margin: -56px 18px 0;
		width: auto;
		flex-basis: auto;
		border-radius: 0;
		padding: 2.2rem 1.8rem;
	}

	/* Mobil trägt der Galerieabschnitt wieder 56 px Polsterung unten, von der
	   Überlappung landen also nur 84 px. 84 + 56 = 140 px halten unter den
	   Bildern denselben 56-px-Rhythmus wie zwischen den übrigen Abschnitten. */
	.k-section--galerie + .k-section--fliesstext {
		padding-top: 140px;
	}

	.k-galerie {
		grid-template-columns: 1fr;
		grid-auto-rows: 360px;
	}

	.k-zeiten {
		padding: 28px 22px;
		max-width: none;
	}

	.k-band {
		padding: 28px 22px;
	}

	.k-cta__inhalt {
		padding: 120px var(--k-rand);
	}

	.k-fuss__raster {
		grid-template-columns: 1fr;
		gap: 44px;
		padding-top: 56px;
		padding-bottom: 32px;
		text-align: center;
	}

	.k-fuss__spalte--logo {
		padding-bottom: 0;
	}

	.k-fuss__spalte--logo img {
		margin: 0 auto;
	}

	.k-fuss__adresse {
		align-items: center;
	}

	.k-fuss__spalte--zeiten {
		text-align: left;
	}

	.k-fuss__zeiten {
		max-width: 320px;
		margin: 0 auto;
	}

	.k-fuss__hinweis,
	.k-fuss__spalte--zeiten .k-fuss__titel {
		text-align: center;
	}

	.k-fuss__unten {
		justify-content: center;
		text-align: center;
	}

	.k-fuss__rechtliches {
		justify-content: center;
	}

	/* Kontaktflaggen: klebende Leiste unten */
	.k-flaggen {
		position: fixed;
		inset: auto 0 0 0;
		top: auto;
		transform: none;
		flex-direction: row;
	}

	.k-flagge {
		flex: 1 1 0;
		justify-content: center;
		gap: 10px;
		border-radius: 0;
		min-height: 56px;
	}

	.k-flagge--nur-desktop {
		display: none;
	}

	.k-flagge__label {
		max-width: 150px;
		opacity: 1;
		margin-left: 0;
	}

	body {
		padding-bottom: 56px;
	}
}

@media (max-width: 700px) {
	h1 {
		font-size: 40px;
	}

	h2,
	h2.has-h2-mittel-font-size,
	h2.has-h2-klein-font-size,
	h2.has-h2-mini-font-size,
	h2.has-h2-26-font-size,
	h2.has-h2-22-font-size,
	h2.has-h2-gross-font-size,
	.k-raster__titel[class*="has-h2"] {
		font-size: 31px;
	}

	h3,
	h3.has-h3-gross-font-size,
	h3.has-h3-font-size {
		font-size: 21px;
	}

	.k-kopfbild__titel {
		font-size: 40px;
		line-height: 1.12;
	}

	.k-kacheln,
	.k-galerie--gross-klein,
	.k-galerie--gleich {
		grid-template-columns: 1fr;
	}
}

.k-raster__titel {
	margin-bottom: 28px;
}

/* Startseite: die Zeile über der H1 ist eine Vorzeile, kein Versalien-Kicker. */
.k-kopfbild--100 .k-kicker {
	font-size: clamp(19px, 1.8vw, 25px);
	line-height: 1.35;
	font-weight: 300;
	letter-spacing: 0.03em;
	text-transform: none;
	color: var(--k-sand-hell);
	margin-bottom: 14px;
}

/* Linklisten in Karten */
.k-linkliste {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
}

.k-linkliste li {
	margin: 0;
}

.k-linkliste a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 8px 0;
	font-size: 18px;
}

.k-linkliste a::after {
	content: "";
	width: 8px;
	height: 8px;
	margin-left: 10px;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.k-linkliste a:hover::after,
.k-linkliste a:focus-visible::after {
	transform: rotate(45deg) translate(3px, -3px);
}