/* =========================================================
 * Tierisch gut therapiert – Block-Komponenten
 * Stile fuer Core-Bloecke und die TGT-Patterns.
 * Ersetzt die fruehere elementor.css.
 * ========================================================= */

/* ---------- BUTTONS (Core-Button-Block) ---------- */

.wp-block-button__link {
	font-family: var(--tgt-font-display);
	font-weight: var(--tgt-fw-display);
	font-size: 16px;
	letter-spacing: 0.01em;
	border-radius: var(--tgt-radius-pill);
	/* Eine Quelle fuer die Buttonhoehe — siehe :root in blocksy-overrides.css.
	   Der Fallback greift nur, falls die Datei mal nicht geladen wird. */
	padding: var(--theme-button-padding, 8px 24px);
	background-color: var(--tgt-steel);
	color: #fff;
	border: 2px solid transparent;
	box-shadow: var(--tgt-elev-1);
	transition: background-color var(--tgt-dur-base) var(--tgt-ease-out),
	            box-shadow var(--tgt-dur-base) var(--tgt-ease-out),
	            color var(--tgt-dur-base) var(--tgt-ease-out),
	            border-color var(--tgt-dur-base) var(--tgt-ease-out),
	            transform var(--tgt-dur-base) var(--tgt-ease-out);
}

.wp-block-button__link:hover,
.wp-block-button__link:focus {
	background-color: var(--tgt-steel-deep);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: var(--tgt-elev-2);
	text-decoration: none;
}

.wp-block-button__link:active {
	background-color: var(--tgt-steel-deep);
	transform: none;
	box-shadow: none;
}

/* Outline-Variante (Core-Stil "Outline") – !important gegen
   Core-/Blocksy-Button-Styles mit hoeherer Prioritaet */
.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: transparent !important;
	color: var(--tgt-steel) !important;
	border: 2px solid var(--tgt-steel) !important;
	box-shadow: none;
}

.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: var(--tgt-steel-soft) !important;
	color: var(--tgt-steel-deep) !important;
	border-color: var(--tgt-steel) !important;
	transform: none;
	box-shadow: none;
}

/* Text-Variante: Zusatzklasse "tgt-btn-text" am Button-Block – !important
   gegen Core-/Blocksy-Button-Styles (auch im Editor), wie beim Outline-Stil */
.tgt-btn-text .wp-block-button__link,
.wp-block-button.tgt-btn-text > .wp-block-button__link {
	background-color: transparent !important;
	color: var(--tgt-steel) !important;
	border-color: transparent !important;
	box-shadow: none;
	padding-left: 0;
	padding-right: 0;
}

.tgt-btn-text .wp-block-button__link:hover,
.wp-block-button.tgt-btn-text > .wp-block-button__link:hover {
	color: var(--tgt-steel-deep) !important;
	background-color: transparent !important;
	transform: none;
	box-shadow: none;
}

/* Pfeil-Variante des Textlinks: Zusatzklasse "tgt-btn-arrow" */
.tgt-btn-arrow .wp-block-button__link::after {
	content: "\2192";
	display: inline-block;
	margin-left: var(--tgt-space-2);
	transition: transform var(--tgt-dur-base) var(--tgt-ease-out);
}

.tgt-btn-arrow .wp-block-button__link:hover::after,
.tgt-btn-arrow .wp-block-button__link:focus::after {
	transform: translateX(4px);
}

/* ---------- HERO ---------- */

.tgt-hero {
	background: var(--tgt-gradient-hero);
	border-bottom: 1px solid var(--tgt-line);
	padding: clamp(28px, 4.5vw, 56px) var(--tgt-space-5) clamp(36px, 6vw, 72px);
}

.tgt-hero__grid {
	gap: clamp(28px, 5vw, 72px);
}

/* Kompakter Textrhythmus: globale Heading-/Absatz-Margins und den
   Editor-Block-Gap im Hero neutralisieren, Abstaende explizit setzen */
.tgt-hero .wp-block-column > * {
	margin-block-start: 0;
}

.tgt-hero .tgt-kicker {
	margin: 0 0 10px;
}

.tgt-hero .tgt-display {
	margin: 0 0 14px;
}

.tgt-hero .tgt-lead {
	margin: 0;
	max-width: 46ch;
}

/* Mehr Luft zwischen Einleitungstext und Aufruf — der Button draengt sich
   dadurch weniger auf und der Absatz darueber bekommt Raum zum Atmen.
   ⚠️ Der Reset weiter oben (`.tgt-hero .wp-block-column > *`) setzt
   margin-block-start: 0 und ist mit (0,2,0) spezifischer als eine blosse
   `.tgt-hero__actions`-Regel — deshalb hat der Abstand hier frueher NIE
   gegriffen, der Button klebte am Text. Selektor entsprechend hochziehen
   und die logische Eigenschaft direkt setzen. */
.tgt-hero__actions {
	gap: var(--tgt-space-2) var(--tgt-space-5);
	align-items: center;
}

.tgt-hero .wp-block-column > .tgt-hero__actions {
	margin-block-start: 44px;
	margin-bottom: 0;
}

/* Rotierendes Tierwort in der Headline (JS in hero-slider.js).
   "Reel"-Bewegung: altes Wort faehrt nach oben raus, neues von unten rein. */
.tgt-rotate-word {
	display: inline-block;
	color: var(--tgt-teal-deep);
	transition: opacity 0.28s var(--tgt-ease-out), transform 0.28s var(--tgt-ease-out);
}

.tgt-rotate-word.is-out {
	opacity: 0;
	transform: translateY(-0.32em);
}

.tgt-rotate-word.is-in {
	opacity: 0;
	transform: translateY(0.32em);
}

.tgt-rotate-word.no-anim {
	transition: none;
}

/* Tierarten-Zeile: Wortquelle fuer die Headline-Rotation (im Editor pflegbar).
   Laeuft die Rotation (JS setzt tgt-rotate-on am Hero), wird sie ausgeblendet;
   ohne JS erscheint sie als dezente Textzeile statt als Pill-Reihe. */
.tgt-hero__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tgt-space-1) var(--tgt-space-4);
	margin: 18px 0 0;
}

.tgt-rotate-on .tgt-hero__chips {
	display: none;
}

/* Bei aktivierter Bewegungsreduzierung (iOS/macOS: Bedienungshilfen →
   Bewegung reduzieren) rotiert das Wort bewusst nicht. Dann auch die
   Wortquelle ausblenden — sonst haengt eine lose Tierarten-Zeile unter
   den Buttons. Die Tierarten stehen ohnehin im Lead-Absatz. */
@media (prefers-reduced-motion: reduce) {
	.tgt-hero__chips {
		display: none;
	}
}

.tgt-hero__chips .tgt-badge {
	background: transparent;
	padding: 0;
	border-radius: 0;
	color: var(--tgt-slate-soft);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.tgt-hero__chips .tgt-badge:not(:last-child)::after {
	content: "·";
	margin-left: var(--tgt-space-4);
	color: var(--tgt-line-strong);
}

/* Hero-Foto: grosszuegiger Radius, Tiefe, dezente Akzentflaeche */
.tgt-hero__photo {
	position: relative;
	margin: 0;
	isolation: isolate; /* eigener Stacking-Context, damit ::after hinter dem Bild, aber vor dem Sektions-Hintergrund liegt */
}

.tgt-hero__photo img {
	width: 100%;
	border-radius: var(--tgt-radius-2xl);
	box-shadow: var(--tgt-elev-3);
	object-fit: cover;
	aspect-ratio: 4 / 3;
}

.tgt-hero__photo::after {
	content: "";
	position: absolute;
	inset: 20px -20px -20px 20px;
	background: var(--tgt-steel-soft);
	opacity: 0.35;
	border-radius: var(--tgt-radius-2xl);
	z-index: -1;
}

@media (max-width: 781px) {
	.tgt-hero {
		text-align: left;
	}
	.tgt-hero .tgt-lead {
		font-size: 17px;
	}
	/* Selektor wie oben hochgezogen — sonst gewinnt der Spalten-Reset */
	.tgt-hero .wp-block-column > .tgt-hero__actions {
		margin-block-start: 34px;
	}
	.tgt-hero__photo::after {
		display: none;
	}
	.tgt-hero__photo img {
		aspect-ratio: 4 / 3.4;
	}
}

/* ---------- HERO-SLIDER (Eigenbau, Crossfade) ---------- */

.tgt-hero-slider {
	position: relative;
	isolation: isolate;
}

.tgt-hero-slider .wp-block-image {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transition: opacity 0.9s var(--tgt-ease-in-out);
	z-index: 0;
}

.tgt-hero-slider .wp-block-image:first-child {
	position: relative; /* bestimmt die Hoehe; bleibt als Basisebene sichtbar */
	opacity: 1;
}

.tgt-hero-slider .wp-block-image.is-active {
	opacity: 1;
	z-index: 1;
}

/* Kreisfoto mit weissem Ring — das Kreis-Motiv des Schaufensters */
.tgt-hero-slider img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 50%;
	border: 8px solid #fff;
	box-shadow: var(--tgt-elev-2);
}

/* Himmelblaue Scheibe hinter dem Kreisfoto (oben rechts) */
.tgt-hero-slider::after {
	content: "";
	position: absolute;
	right: -5%;
	top: -6%;
	width: 56%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: var(--tgt-teal);
	z-index: -1;
}

/* kleiner Ring unten links */
.tgt-hero-slider::before {
	content: "";
	position: absolute;
	left: -6%;
	bottom: 3%;
	width: 24%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	border: 4px solid var(--tgt-steel-soft);
	z-index: -1;
}

.tgt-hero-slider__dots {
	position: absolute;
	z-index: 2;
	bottom: 14px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 8px;
}

.tgt-hero-slider__dots button {
	width: 9px;
	height: 9px;
	border-radius: var(--tgt-radius-pill);
	border: 0;
	padding: 0;
	background: rgba(248, 250, 252, 0.65);
	cursor: pointer;
	transition: background var(--tgt-dur-base) var(--tgt-ease-out),
	            width var(--tgt-dur-base) var(--tgt-ease-out);
}

.tgt-hero-slider__dots button.is-active {
	background: #ffffff;
	width: 22px;
}

@media (max-width: 767px) {
	/* Smartphone: nur erstes Bild, kein Autoplay (auch per JS deaktiviert) */
	.tgt-hero-slider .wp-block-image:not(:first-child) {
		display: none;
	}
	.tgt-hero-slider__dots {
		display: none;
	}
	.tgt-hero-slider {
		width: min(80vw, 400px);
		margin-inline: auto;
	}
}

/* ---------- SERVICE-KARTE (Group-Block mit Klasse tgt-service-card) ---------- */

.tgt-service-card {
	background: var(--tgt-paper);
	border: 1px solid var(--tgt-line);
	border-radius: var(--tgt-radius-xl);
	box-shadow: var(--tgt-elev-1);
	overflow: hidden;
	height: 100%;
	transition: transform var(--tgt-dur-slow) var(--tgt-ease-out),
	            box-shadow var(--tgt-dur-slow) var(--tgt-ease-out);
}

.tgt-service-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--tgt-elev-2);
}

.tgt-service-card figure,
.tgt-service-card .wp-block-image {
	margin: 0;
	overflow: hidden;
}

.tgt-service-card img {
	width: 100%;
	display: block;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	transition: transform var(--tgt-dur-photo) var(--tgt-ease-out);
}

.tgt-service-card:hover img {
	transform: scale(1.03);
}

.tgt-service-card__body {
	padding: var(--tgt-space-5);
	text-align: left;
}

.tgt-service-card__body h3,
.tgt-service-card__body h4 {
	font-size: var(--tgt-fs-h4);
	font-weight: var(--tgt-fw-medium);
	margin-bottom: var(--tgt-space-2);
}

.tgt-service-card__body p {
	color: var(--tgt-slate-soft);
	font-size: var(--tgt-fs-body-sm);
	margin-bottom: 0;
}

/* ---------- TIER-PATIENTEN: runde Fotokacheln ---------- */

.tgt-species img {
	border-radius: var(--tgt-radius-pill);
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.tgt-species h3,
.tgt-species h4 {
	font-size: var(--tgt-fs-h4);
	margin-top: var(--tgt-space-4);
	margin-bottom: var(--tgt-space-1);
}

.tgt-species p {
	color: var(--tgt-slate-soft);
	font-size: var(--tgt-fs-body-sm);
}

/* Smartphone: 2x2-Raster statt vier gestapelter Riesenkreise */
@media (max-width: 781px) {
	.wp-block-columns.tgt-species {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: var(--tgt-space-5) var(--tgt-space-4);
	}

	.tgt-species .wp-block-column {
		margin: 0 !important;
	}

	.tgt-species figure {
		display: flex;
		justify-content: center;
		margin: 0;
	}

	.tgt-species img {
		max-width: 150px;
	}

	.tgt-species h3 {
		font-size: 16px;
		margin-top: var(--tgt-space-3);
	}

	.tgt-species p {
		font-size: 13px;
	}
}

/* ---------- KONTAKT-LISTE (List-Block mit Icons) ---------- */

.tgt-contact-block li {
	margin-bottom: var(--tgt-space-3);
	list-style: none;
}

.tgt-contact-block i {
	color: var(--tgt-steel);
	margin-right: var(--tgt-space-2);
}

/* ---------- SEKTIONS-RHYTHMUS ---------- */

.tgt-pad {
	/* kompakter Sektionsrhythmus: 44px mobil bis 72px Desktop */
	padding-top: clamp(44px, 6.5vw, 72px);
	padding-bottom: clamp(44px, 6.5vw, 72px);
}

/* Heller Wechsel-Hintergrund fuer jede zweite Sektion */
.tgt-band-paper {
	background: var(--tgt-paper);
	border-top: 1px solid var(--tgt-line);
	border-bottom: 1px solid var(--tgt-line);
}

/* Zentrierter Sektionskopf: Kicker + H2 (+ optionaler Lead) */
.tgt-section-head {
	text-align: center;
	max-width: 640px;
	margin: 0 auto var(--tgt-space-6);
}

.tgt-section-head > * {
	margin-block: 0;
}

.tgt-section-head .tgt-kicker {
	margin-bottom: 10px;
}
/* Auf Seiten ohne Blocksy-Titelbereich traegt die Einstiegsueberschrift die
   H1. Sie soll aber wie die uebrigen Sektionstitel wirken, nicht groesser. */
.tgt-section-head h1 {
	font-size: var(--tgt-fs-h2);
}

.tgt-section-head p:not(.tgt-kicker) {
	margin-top: 12px;
	color: var(--tgt-slate-soft);
}

/* Titel-Links in Service-Karten */
.tgt-service-card__body h3 a,
.tgt-service-card__body h4 a {
	color: inherit;
	text-decoration: none;
	transition: color var(--tgt-dur-base) var(--tgt-ease-out);
}

.tgt-service-card__body h3 a:hover,
.tgt-service-card__body h4 a:hover {
	color: var(--tgt-steel);
}

/* ---------- CTA-BAND (dunkle Abschluss-Sektion) ---------- */

.tgt-cta-band {
	background: var(--tgt-gradient-steel);
	border-radius: var(--tgt-radius-2xl);
	padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 64px);
	color: #fff;
}

.tgt-cta-band h2,
.tgt-cta-band h3,
.tgt-cta-band p {
	color: #fff;
}

.tgt-cta-band .tgt-kicker {
	color: var(--tgt-steel-soft);
}

.tgt-cta-band .wp-block-button__link {
	background-color: #fff;
	color: var(--tgt-steel-deep);
}

.tgt-cta-band .wp-block-button__link:hover {
	background-color: var(--tgt-paper);
	color: var(--tgt-steel-deep);
}

/* Outline-Button auf dem Navy-Band: weisse Geister-Variante */
.tgt-cta-band .is-style-outline .wp-block-button__link,
.tgt-cta-band .wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: transparent !important;
	color: #fff !important;
	border-color: rgba(255, 255, 255, 0.75) !important;
}

.tgt-cta-band .is-style-outline .wp-block-button__link:hover,
.tgt-cta-band .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: rgba(255, 255, 255, 0.14) !important;
	color: #fff !important;
	border-color: #fff !important;
}

/* ---------- SCROLL-REVEAL (dezent) ---------- */

.tgt-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.55s var(--tgt-ease-out),
	            transform 0.55s var(--tgt-ease-out);
}

.tgt-reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.tgt-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ---------- ZERTIFIKATS-GALERIE (/ueber-mich/) ---------- */

.tgt-cert-gallery.wp-block-gallery {
	gap: var(--tgt-space-4);
	margin-top: var(--tgt-space-5);
}

.tgt-cert-gallery .wp-block-image {
	background: #fff;
	border: 1px solid var(--tgt-line);
	border-radius: 12px;
	padding: 10px;
	box-shadow: var(--tgt-elev-1);
	transition: box-shadow var(--tgt-dur-base) var(--tgt-ease-out),
	            transform var(--tgt-dur-base) var(--tgt-ease-out);
}

.tgt-cert-gallery .wp-block-image:hover {
	transform: translateY(-2px);
	box-shadow: var(--tgt-elev-2);
}

.tgt-cert-gallery .wp-block-image img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: contain;
}

/* ---------- PREISLISTE (/preise/) — ALTBESTAND ----------
   Seit dem Preisseiten-Umbau (Tabellen je Tierart, Abschnitt PREISSEITE
   am Dateiende) nicht mehr im Inhalt verwendet. Bleibt vorerst als
   Rollback-Netz fuer dev/tmp-restore/8-preise.txt; kann danach weg. */

.tgt-price-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--tgt-space-4);
	align-items: start;
	margin: var(--tgt-space-5) 0 var(--tgt-space-7);
}

@media (max-width: 781px) {
	.tgt-price-grid {
		grid-template-columns: 1fr;
	}
}

.tgt-price-item {
	background: var(--tgt-paper);
	border: 1px solid var(--tgt-line);
	border-radius: 12px;
	padding: 18px 20px;
	box-shadow: var(--tgt-elev-1);
}

.tgt-price-item__head {
	margin: 0;
	font-size: var(--tgt-fs-body);
	line-height: 1.55;
}

.tgt-price-item__head strong {
	color: var(--tgt-steel-deep);
}

.tgt-price-item__meta {
	margin: 8px 0 0;
	font-size: var(--tgt-fs-body-sm);
	color: var(--tgt-slate-soft);
	line-height: 1.55;
}

/* ---------- KONTAKTFORMULAR (CF7, /kontakt/) ---------- */

.tgt-form {
	max-width: 640px;
}

.tgt-form input[type="text"],
.tgt-form input[type="email"],
.tgt-form input[type="tel"],
.tgt-form textarea {
	width: 100%;
	font: inherit;
	font-size: var(--tgt-fs-body-sm);
	color: var(--tgt-slate);
	background: #fff;
	border: 1px solid var(--tgt-line-strong);
	border-radius: 12px;
	padding: 12px 14px;
	transition: border-color var(--tgt-dur-base) var(--tgt-ease-out),
	            box-shadow var(--tgt-dur-base) var(--tgt-ease-out);
}

.tgt-form input:focus,
.tgt-form textarea:focus {
	outline: none;
	border-color: var(--tgt-steel);
	box-shadow: 0 0 0 3px var(--tgt-steel-soft);
}

.tgt-form textarea {
	min-height: 150px;
	resize: vertical;
}

/* CF7 wickelt jedes Feld in ein <p> — Abstaende darueber steuern */
.tgt-form p {
	margin: 0 0 14px;
}

.tgt-form .wpcf7-acceptance {
	font-size: var(--tgt-fs-caption);
	color: var(--tgt-slate-soft);
}

.tgt-form .wpcf7-acceptance input[type="checkbox"] {
	width: 17px;
	height: 17px;
	margin-right: 8px;
	accent-color: var(--tgt-steel);
	vertical-align: -3px;
}

.tgt-form input[type="submit"] {
	font-family: var(--tgt-font);
	font-weight: var(--tgt-fw-medium);
	font-size: var(--tgt-fs-body-sm);
	letter-spacing: 0.01em;
	border-radius: var(--tgt-radius-pill);
	padding: 12px 24px;
	background: var(--tgt-steel);
	color: #fff;
	border: 2px solid transparent;
	cursor: pointer;
	box-shadow: var(--tgt-elev-1);
	transition: background-color var(--tgt-dur-base) var(--tgt-ease-out),
	            box-shadow var(--tgt-dur-base) var(--tgt-ease-out);
}

.tgt-form input[type="submit"]:hover {
	background: var(--tgt-steel-deep);
	box-shadow: var(--tgt-elev-2);
}

.tgt-form .wpcf7-spinner {
	margin-left: 10px;
}

.tgt-form .wpcf7-not-valid-tip {
	font-size: var(--tgt-fs-caption);
	color: #b3261e;
	margin-top: 4px;
}

.wpcf7 form .wpcf7-response-output {
	margin: 18px 0 0;
	padding: 12px 16px;
	border-radius: 12px;
	border: 1px solid var(--tgt-line-strong);
	font-size: var(--tgt-fs-body-sm);
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: #2e7d32;
	color: #2e7d32;
	background: #eef7ee;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
	border-color: #b3261e;
	color: #b3261e;
	background: #fdf1f0;
}

/* =========================================================
 * HIMMELBLAU-KOMPONENTEN (Schaufenster-CI, Juli 2026)
 * ========================================================= */

/* ---------- SEKTIONS-HINTERGRUND: Himmelblau-Wash ---------- */

.tgt-band-sky {
	background: var(--tgt-steel-tint);
}

/* ---------- KNOCHEN-LISTE (Core-List-Block mit Klasse) ----------
   Knochen als Maske → Farbe folgt der Palette (Customizer). */

ul.tgt-knochen-liste {
	list-style: none;
	margin: 0;
	padding: 0;
}

ul.tgt-knochen-liste li {
	position: relative;
	padding-left: 30px;
	margin-bottom: 9px;
}

ul.tgt-knochen-liste li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.42em;
	width: 19px;
	height: 10px;
	background-color: var(--tgt-teal);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 24'%3E%3Cg fill='%23000'%3E%3Ccircle cx='9' cy='8' r='5.5'/%3E%3Ccircle cx='9' cy='16' r='5.5'/%3E%3Ccircle cx='39' cy='8' r='5.5'/%3E%3Ccircle cx='39' cy='16' r='5.5'/%3E%3Crect x='9' y='8' width='30' height='8' rx='4'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 24'%3E%3Cg fill='%23000'%3E%3Ccircle cx='9' cy='8' r='5.5'/%3E%3Ccircle cx='9' cy='16' r='5.5'/%3E%3Ccircle cx='39' cy='8' r='5.5'/%3E%3Ccircle cx='39' cy='16' r='5.5'/%3E%3Crect x='9' y='8' width='30' height='8' rx='4'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---------- TIERARTEN: Kreis-Badges wie im Schaufenster ---------- */

.tgt-tier-badge {
	/* bewusst NICHT position:relative — sonst faengt das Badge die
	   Stretched-Link-Flaeche der Kachel ab (siehe .tgt-tier-badge p a::after).
	   Aus demselben Grund KEIN transform am Badge, auch nicht beim Hover: ein
	   transformiertes Element wird zum Bezugsrahmen fuer absolut positionierte
	   Nachfahren. Die Link-Flaeche schrumpfte dann im Hover-Zustand auf den
	   Kreis, und ein Klick auf Text oder "Mehr erfahren" traf keinen Link
	   (auf dem Handy loest schon das Antippen den Hover aus).
	   Der weisse Innenring kommt daher per inset box-shadow statt ::before:
	   6px Teal-Ring (unsichtbarer Abstand) + 2,5px weisser Ring. */
	width: clamp(116px, 26vw, 148px);
	aspect-ratio: 1 / 1;
	margin: 0 auto var(--tgt-space-4);
	border-radius: 50%;
	background: var(--tgt-teal);
	box-shadow: inset 0 0 0 6px var(--tgt-teal),
	            inset 0 0 0 8.5px rgba(255, 255, 255, 0.85);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	transition: margin var(--tgt-dur-base) var(--tgt-ease-out);
}

/* Hebt den Kreis beim Hover um 3 px an, ohne die Gesamthoehe der Kachel zu aendern.
   Nur fuer Mauszeiger: Auf dem Handy gibt es keinen Hover, dort darf das Antippen
   nicht erst eine Layout-Aenderung ausloesen (iOS wertet das als "erster Tipp"). */
@media (hover: hover) {
	.tgt-tiere .wp-block-column:hover .tgt-tier-badge {
		margin-top: -3px;
		margin-bottom: calc(var(--tgt-space-4) + 3px);
	}
}

.tgt-tier-badge .wp-block-image,
.tgt-tier-badge figure {
	margin: 0;
}

.tgt-tier-badge img {
	width: clamp(52px, 12vw, 68px);
	height: auto;
	display: block;
}

.tgt-tier-badge p {
	font-family: var(--tgt-font-display);
	font-weight: var(--tgt-fw-display);
	font-size: clamp(12px, 1.9vw, 15px);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff;
	margin: 0;
}

.tgt-tiere .wp-block-column > p {
	text-align: center;
	color: var(--tgt-slate-soft);
	font-size: var(--tgt-fs-body-sm);
	margin-bottom: 0;
}

/* Jede Kachel fuehrt auf ihre Tierart-Seite: Den Link traegt der Tiername
   im Badge, seine ::after-Flaeche legt sich unsichtbar ueber die ganze
   Spalte ("stretched link") — so bleibt genau EIN Link im Markup, die
   Klickflaeche ist aber die komplette Kachel. */
.tgt-tiere .wp-block-column {
	position: relative;
	display: flex;
	flex-direction: column;
}

.tgt-tier-badge p a {
	color: inherit;
	text-decoration: none;
}

.tgt-tier-badge p a::after {
	content: "";
	position: absolute;
	inset: -12px;
	border-radius: var(--tgt-radius-xl);
}

.tgt-tier-badge p a:focus-visible::after {
	outline: 3px solid var(--tgt-teal);
	outline-offset: 0;
}

/* Sichtbares Signal, dass dahinter eine eigene Seite steckt */
.tgt-tiere .wp-block-column::after {
	content: "Mehr erfahren →";
	display: block;
	/* auto schiebt den Hinweis in allen vier Kacheln auf dieselbe Linie,
	   auch wenn die Beschreibungen unterschiedlich viele Zeilen haben */
	margin-top: auto;
	padding-top: 10px;
	text-align: center;
	font-family: var(--tgt-font-display);
	font-weight: var(--tgt-fw-display);
	font-size: 14px;
	color: var(--tgt-teal);
	transition: color var(--tgt-dur-base) var(--tgt-ease-out);
}

.tgt-tiere .wp-block-column:hover::after {
	color: var(--tgt-teal-deep);
}

/* Smartphone: 2x2-Raster */
@media (max-width: 781px) {
	.wp-block-columns.tgt-tiere {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: var(--tgt-space-5) var(--tgt-space-4);
	}

	.tgt-tiere .wp-block-column {
		margin: 0 !important;
	}

	.tgt-tiere .wp-block-column > p {
		font-size: 13px;
	}
}

/* ---------- ICON-SCHEIBE (kleine Kreisscheibe in Karten) ---------- */

.tgt-icon-disc {
	position: relative;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--tgt-teal);
	display: grid;
	place-items: center;
	margin-bottom: var(--tgt-space-4);
}

.tgt-icon-disc::before {
	content: "";
	position: absolute;
	inset: 4px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.85);
	pointer-events: none;
}

.tgt-icon-disc .wp-block-image,
.tgt-icon-disc figure {
	margin: 0;
}

.tgt-icon-disc img {
	width: 34px;
	height: auto;
	display: block;
}

/* ---------- KATEGORIE-KARTE (Leistungen im Ueberblick) ---------- */

.tgt-karte {
	background: #fff;
	border-radius: var(--tgt-radius-xl);
	padding: clamp(24px, 4vw, 32px);
	box-shadow: var(--tgt-elev-1);
	height: 100%;
	transition: transform var(--tgt-dur-base) var(--tgt-ease-out),
	            box-shadow var(--tgt-dur-base) var(--tgt-ease-out);
}

.tgt-karte:hover {
	transform: translateY(-3px);
	box-shadow: var(--tgt-elev-2);
}

.tgt-karte h3 {
	margin-bottom: var(--tgt-space-2);
}

.tgt-karte > p {
	color: var(--tgt-slate-soft);
	font-size: var(--tgt-fs-body-sm);
}

.tgt-karte ul.tgt-knochen-liste {
	margin-top: var(--tgt-space-4);
}

.tgt-karte ul.tgt-knochen-liste li {
	font-size: var(--tgt-fs-body-sm);
}

/* ---------- HUNDEFITNESS-BAND (Submarke) ---------- */

.tgt-hf-band {
	background: linear-gradient(135deg, var(--tgt-steel-tint) 0%, #fff 70%);
	border: 2px solid var(--tgt-steel-soft);
	border-radius: var(--tgt-radius-2xl);
	padding: clamp(28px, 5vw, 48px);
}

.tgt-hf-lockup {
	text-align: center;
}

.tgt-hf-lockup .wp-block-image,
.tgt-hf-lockup figure {
	margin: 0 auto;
	display: flex;
	justify-content: center;
}

.tgt-hf-lockup img {
	width: clamp(104px, 14vw, 132px);
	height: auto;
}

.tgt-hf-wort,
.tgt-hf-wort p {
	font-family: var(--tgt-font-display);
	font-weight: var(--tgt-fw-display);
	font-size: clamp(28px, 5vw, 36px);
	letter-spacing: 0.06em;
	line-height: 1.1;
	color: var(--tgt-teal);
	margin: 6px 0 0;
}

.tgt-hf-by,
.tgt-hf-by p {
	font-size: 14px;
	font-weight: var(--tgt-fw-medium);
	letter-spacing: 0.04em;
	color: var(--tgt-steel);
	margin: 2px 0 0;
}

.tgt-hf-neu {
	display: inline-block;
	margin-top: var(--tgt-space-4);
	background: var(--tgt-steel);
	color: #fff;
	font-family: var(--tgt-font-display);
	font-weight: var(--tgt-fw-display);
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 6px 16px;
	border-radius: var(--tgt-radius-pill);
}

.tgt-hf-band h2 {
	margin-bottom: var(--tgt-space-2);
}

.tgt-hf-band ul.tgt-knochen-liste {
	margin: var(--tgt-space-4) 0 var(--tgt-space-5);
}

/* ---------- CTA-STREIFEN (Zitat des Fensterstreifens) ---------- */

.tgt-cta-streifen,
.tgt-cta-streifen p {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--tgt-space-2) var(--tgt-space-5);
	margin: clamp(28px, 5vw, 44px) 0 0;
	padding-top: var(--tgt-space-5);
	border-top: 1px solid rgba(255, 255, 255, 0.25);
	font-family: var(--tgt-font-display);
	font-weight: var(--tgt-fw-display);
	font-size: 15px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #fff;
}

.tgt-cta-streifen a {
	color: #fff;
	text-decoration: none;
}

.tgt-cta-streifen a:hover {
	color: var(--tgt-steel-soft);
	text-decoration: none;
}

@media (max-width: 600px) {
	.tgt-cta-streifen,
	.tgt-cta-streifen p {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
}

/* ---------- LEISTUNGS-KACHEL (Group-Block mit Klasse tgt-leistung) ----------
   Sitzt im Grid-Layout-Block von Gutenberg: Kacheln lassen sich im Editor
   per Drag & Drop umsortieren, ergaenzen oder loeschen, ohne dass sich am
   Umbruch etwas von Hand nachziehen laesst. */

/* Doppelte Klasse: schlaegt die vom Grid-Layout erzeugte Container-Regel */
.wp-block-group.tgt-leistung-grid {
	margin-top: var(--tgt-space-5);
	gap: 20px;
}

.tgt-leistung {
	position: relative;
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	column-gap: var(--tgt-space-4);
	row-gap: 4px;
	align-content: start;
	height: 100%;
	background: #fff;
	border: 1px solid var(--tgt-line);
	border-radius: var(--tgt-radius-lg);
	padding: var(--tgt-space-5);
	padding-right: calc(var(--tgt-space-5) + 20px);
	transition: transform var(--tgt-dur-base) var(--tgt-ease-out),
	            box-shadow var(--tgt-dur-base) var(--tgt-ease-out),
	            border-color var(--tgt-dur-base) var(--tgt-ease-out);
}

/* Erste Spalte: rundes Foto — oder, wo noch keins existiert, die
   Icon-Scheibe. Beide 64 px, damit die Kacheln buendig bleiben. */
.tgt-leistung > .tgt-leistung__foto,
.tgt-leistung > .tgt-icon-disc {
	grid-column: 1;
	grid-row: 1 / span 2;
	align-self: start;
	margin: 0;
}

/* In der Kachel tritt die Scheibe bewusst zurueck: helle Flaeche statt
   Vollcyan, Icon in Cyan. Sonst uebertoenen die sechs Platzhalter die
   Fotos daneben — und genau die sollen die Seite tragen. */
.tgt-leistung > .tgt-icon-disc {
	margin-bottom: 0;
	background: var(--tgt-steel-tint);
}

.tgt-leistung > .tgt-icon-disc::before {
	border-color: rgba(12, 110, 159, 0.16);
}

.tgt-leistung h3,
.tgt-leistung p {
	grid-column: 2;
}

/* Kreisanschnitt mit hellem Ring — greift das Schaufenster-Motiv auf.
   Der Ring liegt als box-shadow aussen an und kostet keinen Platz im Raster. */
.tgt-leistung__foto img {
	display: block;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 0 3px var(--tgt-steel-tint);
	transition: transform var(--tgt-dur-base) var(--tgt-ease-out),
	            box-shadow var(--tgt-dur-base) var(--tgt-ease-out);
}

.tgt-leistung:hover .tgt-leistung__foto img {
	transform: scale(1.04);
	box-shadow: 0 0 0 3px var(--tgt-steel-soft);
}

@media (max-width: 400px) {
	.tgt-leistung {
		grid-template-columns: 54px minmax(0, 1fr);
		column-gap: var(--tgt-space-3);
	}
	.tgt-leistung__foto img {
		width: 54px;
		height: 54px;
	}
	.tgt-leistung > .tgt-icon-disc {
		width: 54px;
		height: 54px;
	}
	.tgt-leistung > .tgt-icon-disc img {
		width: 28px;
	}
}

.tgt-leistung h3 {
	margin: 0;
	font-size: var(--tgt-fs-h4);
	line-height: var(--tgt-lh-heading);
}

.tgt-leistung h3 a {
	color: var(--tgt-slate);
	text-decoration: none;
	transition: color var(--tgt-dur-base) var(--tgt-ease-out);
}

/* Ganze Kachel klickbar. Der Anker bleibt das einzige Linkziel, damit
   Tastatur und Screenreader genau einen Treffer je Kachel bekommen. */
.tgt-leistung h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.tgt-leistung p {
	margin: 0;
	color: var(--tgt-slate-soft);
	font-size: var(--tgt-fs-body-sm);
	line-height: 1.5;
}

/* Cyan-Winkel rechts oben: zwei Rahmenkanten, kein zusaetzliches Asset */
.tgt-leistung::after {
	content: "";
	position: absolute;
	top: calc(var(--tgt-space-5) + 0.5em);
	right: var(--tgt-space-5);
	width: 8px;
	height: 8px;
	border-top: 2px solid var(--tgt-teal);
	border-right: 2px solid var(--tgt-teal);
	transform: rotate(45deg);
	transition: transform var(--tgt-dur-base) var(--tgt-ease-out);
}

.tgt-leistung:hover {
	transform: translateY(-3px);
	border-color: var(--tgt-teal);
	box-shadow: var(--tgt-elev-2);
}

.tgt-leistung:hover h3 a {
	color: var(--tgt-steel);
}

.tgt-leistung:hover::after {
	transform: rotate(45deg) translate(2px, -2px);
}

/* Fokusring umfasst die ganze Kachel, nicht nur den Text */
.tgt-leistung:has(a:focus-visible) {
	outline: 3px solid var(--tgt-steel);
	outline-offset: 3px;
}

/* Kategorie-Kopf: Icon-Scheibe neben der Ueberschrift statt darueber */
.tgt-kat-head .tgt-icon-disc {
	width: 56px;
	height: 56px;
	margin-bottom: 0;
	flex: 0 0 auto;
}

.tgt-kat-head .tgt-icon-disc img {
	width: 30px;
}

.tgt-kat-head h2 {
	margin: 0;
}

.tgt-kat-head + p {
	margin-top: var(--tgt-space-2);
	color: var(--tgt-slate-soft);
	max-width: 62ch;
}

@media (max-width: 480px) {
	.tgt-kat-head .tgt-icon-disc {
		width: 46px;
		height: 46px;
	}
	.tgt-kat-head .tgt-icon-disc img {
		width: 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tgt-leistung,
	.tgt-leistung::after,
	.tgt-leistung h3 a,
	.tgt-leistung__foto img {
		transition: none;
	}
	.tgt-leistung:hover,
	.tgt-leistung:hover .tgt-leistung__foto img {
		transform: none;
	}
	.tgt-leistung:hover::after {
		transform: rotate(45deg);
	}
}

/* =========================================================
 * LEISTUNGS-DETAILSEITEN (Body-Klasse tgt-leistung-detail)
 * Textwuesten auflockern: Lesespalte, Lead, Info-Karten mit
 * Knochen-Listen, kompakte Bilder, Termin-CTA als Abschluss.
 * ========================================================= */

/* Lesespalte: vorher lief der Text ueber die volle Containerbreite
   (>1200px Zeilenlaenge). Floats (seitliche Bilder) funktionieren nur,
   wenn der CONTAINER schmal ist, nicht die einzelnen Kinder.
   .tgt-ueber-mich (Ueber-mich-Seite) nutzt dieselben Grundstile —
   siehe Abschnitt UEBER-MICH am Dateiende fuer die Eigenheiten. */
.tgt-leistung-detail .entry-content,
.tgt-ueber-mich .entry-content,
.tgt-tierseite .entry-content {
	max-width: 840px;
	margin-left: auto;
	margin-right: auto;
}

/* Auch den Blocksy-Titelbereich auf die Lesespalte ausrichten */
.tgt-leistung-detail .hero-section .entry-header,
.tgt-ueber-mich .hero-section .entry-header,
.tgt-tierseite .hero-section .entry-header {
	max-width: 840px;
	margin-left: auto;
	margin-right: auto;
}

/* Lead-Absatz: groesserer Einstieg statt Textmauer ab Zeile 1 */
.tgt-leistung-detail .entry-content > p.tgt-lead,
.tgt-ueber-mich .entry-content > p.tgt-lead,
.tgt-tierseite .entry-content > p.tgt-lead {
	font-size: clamp(18px, 2.4vw, 20px);
	line-height: 1.6;
	color: var(--tgt-slate);
}

/* Kicker direkt im Seiteninhalt (Ueber mich: "Immer auf dem aktuellen Stand"):
   theme.css setzt inline-block, dabei greifen die automatischen Seitenraender
   des Layouts nicht. Mobil klebte die Zeile am linken Bildschirmrand, waehrend
   alle anderen Absaetze eingerueckt standen. */
.tgt-ueber-mich .entry-content > p.tgt-kicker {
	display: block;
}

/* Zwischenueberschriften mit Cyan-Akzent strukturieren die Seite */
.tgt-leistung-detail .entry-content > h2,
.tgt-ueber-mich .entry-content > h2,
.tgt-tierseite .entry-content > h2 {
	margin-top: var(--tgt-space-7);
}

.tgt-leistung-detail .entry-content > h2::after,
.tgt-ueber-mich .entry-content > h2::after,
.tgt-tierseite .entry-content > h2::after {
	content: "";
	display: block;
	width: 52px;
	height: 4px;
	border-radius: 2px;
	background: var(--tgt-teal);
	margin-top: 10px;
}

.tgt-leistung-detail .entry-content > h3,
.tgt-ueber-mich .entry-content > h3,
.tgt-tierseite .entry-content > h3 {
	margin-top: var(--tgt-space-6);
}

.tgt-leistung-detail .entry-content > h3::before,
.tgt-ueber-mich .entry-content > h3::before,
.tgt-tierseite .entry-content > h3::before {
	content: "";
	display: inline-block;
	width: 22px;
	height: 11px;
	margin-right: 10px;
	background-color: var(--tgt-teal);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 24'%3E%3Cg fill='%23000'%3E%3Ccircle cx='9' cy='8' r='5.5'/%3E%3Ccircle cx='9' cy='16' r='5.5'/%3E%3Ccircle cx='39' cy='8' r='5.5'/%3E%3Ccircle cx='39' cy='16' r='5.5'/%3E%3Crect x='9' y='8' width='30' height='8' rx='4'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 24'%3E%3Cg fill='%23000'%3E%3Ccircle cx='9' cy='8' r='5.5'/%3E%3Ccircle cx='9' cy='16' r='5.5'/%3E%3Ccircle cx='39' cy='8' r='5.5'/%3E%3Ccircle cx='39' cy='16' r='5.5'/%3E%3Crect x='9' y='8' width='30' height='8' rx='4'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---------- INFO-KARTE (Doppelpunkt-Absatz + Liste als Karte) ---------- */

.tgt-info-karte {
	background: var(--tgt-steel-tint);
	border: 1px solid var(--tgt-steel-soft);
	border-radius: var(--tgt-radius-xl);
	padding: clamp(20px, 3.2vw, 28px);
}

.tgt-info-karte > :first-child {
	margin-top: 0;
}

.tgt-info-karte > :last-child {
	margin-bottom: 0;
}

/* Kartenkopf: der fruehere "Fett-Absatz mit Doppelpunkt" wird zur
   Fredoka-Zeile — semantisch bleibt es ein Absatz (Bestandstext) */
.tgt-info-karte .tgt-karte-kopf,
.tgt-info-karte .tgt-karte-kopf strong {
	font-family: var(--tgt-font-display);
	font-weight: var(--tgt-fw-display);
	font-size: 17px;
	line-height: var(--tgt-lh-tight);
	color: var(--tgt-steel);
	margin-bottom: var(--tgt-space-3);
}

.tgt-info-karte > h3,
.tgt-info-karte > h4 {
	font-size: var(--tgt-fs-h4);
	color: var(--tgt-steel);
	margin: 0 0 var(--tgt-space-3);
}

.tgt-info-karte ul.tgt-knochen-liste li {
	font-size: var(--tgt-fs-body-sm);
	margin-bottom: 8px;
}

.tgt-info-karte ul.tgt-knochen-liste li:last-child {
	margin-bottom: 0;
}

/* Nummerierte Listen: Cyan-Zahlenscheiben statt nackter Ziffern */
.tgt-info-karte ol {
	list-style: none;
	counter-reset: tgt-zaehler;
	margin: 0;
	padding: 0;
}

.tgt-info-karte ol li {
	counter-increment: tgt-zaehler;
	position: relative;
	padding-left: 38px;
	margin-bottom: 10px;
	font-size: var(--tgt-fs-body-sm);
}

.tgt-info-karte ol li:last-child {
	margin-bottom: 0;
}

.tgt-info-karte ol li::before {
	content: counter(tgt-zaehler);
	position: absolute;
	left: 0;
	top: 0.05em;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--tgt-teal);
	color: #fff;
	font-family: var(--tgt-font-display);
	font-weight: var(--tgt-fw-display);
	font-size: 13px;
	display: grid;
	place-items: center;
}

/* Nachklapp-Zeile ("... eingesetzt werden.") dezent ans Kartenende */
.tgt-info-karte .tgt-karte-fuss {
	font-size: var(--tgt-fs-caption);
	color: var(--tgt-slate-soft);
	margin-top: var(--tgt-space-3);
}

/* Lange Listen: ab Tablet zweispaltig statt endloser Einzelspalte */
@media (min-width: 660px) {
	.tgt-liste-2sp {
		columns: 2;
		column-gap: 40px;
	}
	.tgt-liste-2sp li {
		break-inside: avoid;
	}
}

/* Mehrere Karten hintereinander: nebeneinander statt gestapelt */
.wp-block-group.tgt-karten-reihe {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 18px;
	margin-top: var(--tgt-space-5);
}

.tgt-karten-reihe .tgt-info-karte {
	height: 100%;
	margin: 0;
}

/* In der Reihe waere eine zweispaltige Liste zu eng */
.tgt-karten-reihe .tgt-liste-2sp {
	columns: 1;
}

/* ---------- BILDER: kompakt und gerundet statt Vollbreite ---------- */

.tgt-leistung-detail .entry-content .wp-block-image.tgt-detail-bild img,
.tgt-ueber-mich .entry-content .wp-block-image.tgt-detail-bild img,
.tgt-tierseite .entry-content .wp-block-image.tgt-detail-bild img {
	border-radius: var(--tgt-radius-xl);
	box-shadow: var(--tgt-elev-2);
	width: 100%;
	height: auto;
}

/* Seitlich vom Text (Float) — nur ab Tablet, mobil normale Bildbreite */
.tgt-leistung-detail .entry-content > .wp-block-image.tgt-bild-seitlich,
.tgt-ueber-mich .entry-content > .wp-block-image.tgt-bild-seitlich,
.tgt-tierseite .entry-content > .wp-block-image.tgt-bild-seitlich {
	max-width: min(420px, 100%);
	margin: var(--tgt-space-4) auto;
}

@media (min-width: 782px) {
	.tgt-leistung-detail .entry-content > .wp-block-image.tgt-bild-seitlich,
	.tgt-ueber-mich .entry-content > .wp-block-image.tgt-bild-seitlich,
	.tgt-tierseite .entry-content > .wp-block-image.tgt-bild-seitlich {
		float: right;
		width: clamp(240px, 38%, 330px);
		margin: 6px 0 var(--tgt-space-4) var(--tgt-space-6);
		/* WordPress setzt bei Inhalten im Layout "constrained" links und rechts
		   `margin: auto !important`. Ohne !important blieb der Abstand zum Text
		   bei 0, und die Zeilen liefen direkt am Bild entlang. */
		margin-left: var(--tgt-space-6) !important;
	}
	/* Ueberschriften und Karten brechen den Umfluss — sonst quetscht
	   sich eine neue Sektion neben ein auslaufendes Bild bzw. eine
	   Karte rutscht mit ihrem Hintergrund UNTER das Bild */
	.tgt-leistung-detail .entry-content > h2,
	.tgt-leistung-detail .entry-content > .tgt-info-karte,
	.tgt-leistung-detail .entry-content > .tgt-karten-reihe,
	.tgt-leistung-detail .entry-content > .tgt-bild-reihe,
	.tgt-ueber-mich .entry-content > h2,
	.tgt-ueber-mich .entry-content > .tgt-info-karte,
	.tgt-ueber-mich .entry-content > .tgt-karten-reihe,
	.tgt-tierseite .entry-content > h2,
	.tgt-tierseite .entry-content > .tgt-info-karte,
	.tgt-tierseite .entry-content > .tgt-karten-reihe,
	.tgt-tierseite .entry-content > .tgt-bild-reihe,
	.tgt-tierseite .entry-content > .tgt-tier-nav-kopf {
		clear: both;
	}
}

/* Abschlussbild (letztes Bild vor dem CTA): mittig, moderat gross */
.tgt-leistung-detail .entry-content > .wp-block-image.tgt-bild-abschluss,
.tgt-tierseite .entry-content > .wp-block-image.tgt-bild-abschluss {
	max-width: 560px;
	margin: var(--tgt-space-6) auto 0;
	clear: both;
}

/* Hochformate nicht turmhoch werden lassen */
.tgt-leistung-detail .entry-content > .wp-block-image.tgt-bild-abschluss img,
.tgt-tierseite .entry-content > .wp-block-image.tgt-bild-abschluss img {
	max-height: 480px;
	width: auto;
	margin-inline: auto;
	display: block;
}

/* Bildreihe: 2-3 Bilder als Galerie-Raster gleicher Hoehe */
.wp-block-group.tgt-bild-reihe {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 14px;
	margin: var(--tgt-space-5) 0;
}

.tgt-bild-reihe .wp-block-image {
	margin: 0;
}

.tgt-bild-reihe .wp-block-image img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
	height: auto;
	border-radius: var(--tgt-radius-lg);
	box-shadow: var(--tgt-elev-1);
}

@media (max-width: 500px) {
	.wp-block-group.tgt-bild-reihe {
		grid-template-columns: 1fr 1fr;
	}
}

/* Partner-/Firmenlogos: kein Foto-Rahmen, begrenzte Hoehe */
.tgt-leistung-detail .entry-content .wp-block-image.tgt-bild-logo {
	max-width: 240px;
	margin: var(--tgt-space-5) auto var(--tgt-space-3);
	clear: both;
}

.tgt-leistung-detail .entry-content .wp-block-image.tgt-bild-logo img {
	border-radius: 0;
	box-shadow: none;
	max-height: 120px;
	width: auto;
}

/* ---------- REZEPT-HINWEIS: Infokasten "nur mit Rezept vom Tierarzt" ----------
   Steht vor der Termin-CTA (Blutegel, Neuraltherapie). Native Gruppe aus
   Ueberschrift + Absatz — das Cyan-Icon kommt per ::before, bleibt also
   im Editor unberuehrt und der Text frei aenderbar. */

.wp-block-group.tgt-rezept-hinweis {
	clear: both;
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: clamp(14px, 3vw, 22px);
	align-items: start;
	background: var(--tgt-steel-tint);
	/* kraeftiger als die Info-Karten: ein Pflichthinweis darf auffallen */
	border: 2px solid var(--tgt-teal);
	border-radius: var(--tgt-radius-xl);
	padding: clamp(18px, 3.2vw, 28px);
	margin-top: clamp(32px, 5vw, 48px);
}

.tgt-rezept-hinweis::before {
	content: "";
	grid-column: 1;
	grid-row: 1 / span 8;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	/* Cyan-Scheibe mit weissem Innenring (wie .tgt-disc) + Klemmbrett-Haken */
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='m9 14 2 2 4-4'/%3E%3C/svg%3E") center / 50% no-repeat,
		var(--tgt-teal);
	box-shadow:
		inset 0 0 0 4px var(--tgt-teal),
		inset 0 0 0 6px rgba(255, 255, 255, 0.85);
}

.tgt-rezept-hinweis > * {
	grid-column: 2;
	margin: 0;
}

.tgt-rezept-hinweis > h3,
.tgt-rezept-hinweis > h2 {
	font-family: var(--tgt-font-display);
	font-weight: var(--tgt-fw-display);
	font-size: clamp(18px, 2.4vw, 21px);
	line-height: var(--tgt-lh-tight);
	color: var(--tgt-steel);
	margin-bottom: 6px;
}

.tgt-rezept-hinweis > p {
	font-size: var(--tgt-fs-body-sm);
	line-height: 1.6;
	color: var(--tgt-slate);
}

@media (max-width: 480px) {
	.tgt-rezept-hinweis::before {
		width: 44px;
		height: 44px;
		box-shadow:
			inset 0 0 0 3px var(--tgt-teal),
			inset 0 0 0 5px rgba(255, 255, 255, 0.85);
	}
}

/* ---------- TERMIN-CTA: Navy-Karte als Seitenabschluss ---------- */

.wp-block-group.tgt-detail-cta {
	clear: both;
	background: var(--tgt-gradient-steel);
	border-radius: var(--tgt-radius-2xl);
	padding: clamp(28px, 5vw, 44px);
	margin-top: clamp(36px, 6vw, 56px);
	text-align: center;
}

.tgt-detail-cta h2 {
	color: #fff;
	font-size: clamp(23px, 3vw, 28px);
	margin: 0 0 var(--tgt-space-2);
}

.tgt-detail-cta p {
	color: var(--tgt-steel-soft);
	margin: 0 0 var(--tgt-space-5);
}

.tgt-detail-cta .wp-block-buttons {
	justify-content: center;
	gap: var(--tgt-space-3);
}

/* Heller Primaerbutton auf Navy — !important wie bei allen
   Button-Varianten noetig (Core-/Blocksy-Styles) */
.tgt-detail-cta .tgt-cta-hell .wp-block-button__link {
	background: #fff !important;
	color: var(--tgt-steel) !important;
}

.tgt-detail-cta .tgt-cta-hell .wp-block-button__link:hover,
.tgt-detail-cta .tgt-cta-hell .wp-block-button__link:focus {
	background: var(--tgt-steel-soft) !important;
	color: var(--tgt-steel-deep) !important;
}

/* Outline-Variante auf Navy: weisse Kontur */
.tgt-detail-cta .is-style-outline .wp-block-button__link {
	color: #fff !important;
	border-color: rgba(255, 255, 255, 0.65) !important;
	background: transparent !important;
}

.tgt-detail-cta .is-style-outline .wp-block-button__link:hover,
.tgt-detail-cta .is-style-outline .wp-block-button__link:focus {
	background: rgba(255, 255, 255, 0.14) !important;
	color: #fff !important;
	border-color: #fff !important;
}

/* Textlink (Preise) auf Navy */
.tgt-detail-cta .tgt-btn-text .wp-block-button__link {
	color: #fff !important;
}

.tgt-detail-cta .tgt-btn-text .wp-block-button__link:hover,
.tgt-detail-cta .tgt-btn-text .wp-block-button__link:focus {
	color: var(--tgt-steel-soft) !important;
}

@media (max-width: 500px) {
	.tgt-detail-cta .wp-block-buttons {
		flex-direction: column;
		align-items: center;
	}
}

/* =========================================================
 * PREISSEITE (Body-Klasse tgt-preise)
 * Kompakte Preistabelle je Tierart statt vieler Einzelkarten:
 * Sektion mit Navy-Kopf, Zeile = Leistung links, Preis rechts.
 * Body-Klasse kommt aus functions.php (Slug preise).
 * ========================================================= */

/* Lesespalte — etwas breiter als auf den Detailseiten,
   damit die Tabellen Luft haben */
.tgt-preise .entry-content {
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

.tgt-preise .hero-section .entry-header {
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

.tgt-preise .entry-content > p.tgt-lead {
	font-size: clamp(18px, 2.4vw, 20px);
	line-height: 1.6;
	color: var(--tgt-slate);
	text-align: center;
}

/* Schnellnav: Pill-Buttons springen zu den Tierarten-Ankern */
.tgt-preis-nav {
	margin: var(--tgt-space-5) 0 var(--tgt-space-4);
}

.tgt-preis-nav .wp-block-button__link {
	padding: 8px 20px;
	font-size: var(--tgt-fs-body-sm);
	border-radius: var(--tgt-radius-pill);
}

/* Inklusiv-Hinweis: ersetzt den frueher 5x wiederholten Absatz */
.tgt-preise .tgt-preis-hinweis {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: var(--tgt-steel-tint);
	border: 1px solid var(--tgt-steel-soft);
	border-radius: var(--tgt-radius-md);
	padding: 12px 18px;
	font-size: var(--tgt-fs-body-sm);
	line-height: 1.55;
	color: var(--tgt-slate);
}

.tgt-preise .tgt-preis-hinweis::before {
	content: "";
	flex: 0 0 22px;
	height: 11px;
	margin-top: 6px;
	background-color: var(--tgt-teal);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 24'%3E%3Cg fill='%23000'%3E%3Ccircle cx='9' cy='8' r='5.5'/%3E%3Ccircle cx='9' cy='16' r='5.5'/%3E%3Ccircle cx='39' cy='8' r='5.5'/%3E%3Ccircle cx='39' cy='16' r='5.5'/%3E%3Crect x='9' y='8' width='30' height='8' rx='4'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 24'%3E%3Cg fill='%23000'%3E%3Ccircle cx='9' cy='8' r='5.5'/%3E%3Ccircle cx='9' cy='16' r='5.5'/%3E%3Ccircle cx='39' cy='8' r='5.5'/%3E%3Ccircle cx='39' cy='16' r='5.5'/%3E%3Crect x='9' y='8' width='30' height='8' rx='4'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}

/* "Gut zu wissen" bekommt den Cyan-Balken der Detailseiten */
.tgt-preise .entry-content > h2 {
	margin-top: var(--tgt-space-7);
}

.tgt-preise .entry-content > h2::after {
	content: "";
	display: block;
	width: 52px;
	height: 4px;
	border-radius: 2px;
	background: var(--tgt-teal);
	margin-top: 10px;
}

/* ---------- SEKTION: Karte mit Navy-Kopf + Tabelle ---------- */

.tgt-preis-sektion {
	background: #FFFFFF;
	border: 1px solid var(--tgt-line);
	border-radius: var(--tgt-radius-xl);
	box-shadow: var(--tgt-elev-1);
	overflow: hidden;
	margin: var(--tgt-space-5) 0 var(--tgt-space-6);
}

.tgt-preise .entry-content h2.tgt-preis-titel {
	margin: 0;
	padding: 15px 24px;
	background: var(--tgt-gradient-steel);
	color: #FFFFFF;
	font-size: clamp(20px, 2.4vw, 24px);
	scroll-margin-top: 110px; /* Anker landen nicht unterm Sticky-Header */
}

.tgt-preise .entry-content h2.tgt-preis-titel::after {
	content: none; /* kein Cyan-Balken im Navy-Kopf */
}

.tgt-preise .entry-content h2.tgt-preis-titel::before {
	content: "";
	display: inline-block;
	width: 26px;
	height: 13px;
	margin-right: 12px;
	background-color: var(--tgt-teal);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 24'%3E%3Cg fill='%23000'%3E%3Ccircle cx='9' cy='8' r='5.5'/%3E%3Ccircle cx='9' cy='16' r='5.5'/%3E%3Ccircle cx='39' cy='8' r='5.5'/%3E%3Ccircle cx='39' cy='16' r='5.5'/%3E%3Crect x='9' y='8' width='30' height='8' rx='4'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 24'%3E%3Cg fill='%23000'%3E%3Ccircle cx='9' cy='8' r='5.5'/%3E%3Ccircle cx='9' cy='16' r='5.5'/%3E%3Ccircle cx='39' cy='8' r='5.5'/%3E%3Ccircle cx='39' cy='16' r='5.5'/%3E%3Crect x='9' y='8' width='30' height='8' rx='4'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---------- PREISTABELLE ---------- */

.tgt-preis-tabelle {
	margin: 0;
}

.tgt-preis-tabelle table {
	width: 100%;
	border-collapse: collapse;
	border: none;
}

.tgt-preis-tabelle td {
	border: none;
	border-top: 1px solid var(--tgt-line);
	padding: 13px 24px;
	vertical-align: top;
	font-size: var(--tgt-fs-body-sm);
	line-height: 1.55;
	color: var(--tgt-slate-soft);
}

.tgt-preis-tabelle tr:first-child td {
	border-top: none;
}

/* Zebrastreifen erleichtern das zeilenweise Scannen */
.tgt-preis-tabelle tr:nth-child(even) td {
	background: var(--tgt-paper);
}

/* Leistungsname in Fredoka/Navy, Beschreibung dahinter gedaempft */
.tgt-preis-tabelle td:first-child strong {
	font-family: var(--tgt-font-display);
	font-weight: var(--tgt-fw-display);
	font-size: 16px;
	letter-spacing: var(--tgt-ls-tight);
	color: var(--tgt-slate);
}

/* Preisspalte: rechtsbuendig, kraeftig, so schmal wie moeglich */
.tgt-preis-tabelle td:last-child {
	width: 1%;
	text-align: right;
	white-space: nowrap;
	font-family: var(--tgt-font-display);
	font-weight: var(--tgt-fw-display);
	font-size: 17px;
	color: var(--tgt-steel);
}

@media (max-width: 599px) {
	.tgt-preis-tabelle td {
		padding: 11px 14px;
	}

	/* lange Preisangaben (Taping, Blutegel) duerfen umbrechen */
	.tgt-preis-tabelle td:last-child {
		white-space: normal;
		min-width: 84px;
	}

	.tgt-preise .entry-content h2.tgt-preis-titel {
		padding: 13px 14px;
	}
}

/* =========================================================
 * UEBER-MICH (Body-Klasse tgt-ueber-mich)
 * Persoenliche Geschichte im Lesefluss (nutzt die Grundstile
 * der Detailseiten per Selektor-Erweiterung weiter oben),
 * dazu: Pull-Quote, Herzsatz, Weiterbildungs-Kartenraster,
 * Ausbildung/Zertifikate dezent im Akkordeon.
 * ========================================================= */

/* Eingangs-Zitat als Pull-Quote statt nackter H2 */
.tgt-ueber-mich .entry-content > .tgt-zitat {
	border: none;
	margin: 0 auto var(--tgt-space-6);
	padding: 0;
	max-width: 620px;
	text-align: center;
}

.tgt-ueber-mich .tgt-zitat::before {
	content: "\201C";
	display: block;
	font-family: var(--tgt-font-display);
	font-weight: var(--tgt-fw-display);
	font-size: 64px;
	line-height: 0.55; /* Glyph-Tinte sitzt oben im Kasten — Leerraum kappen */
	margin-bottom: 2px;
	color: var(--tgt-teal);
}

.tgt-ueber-mich .tgt-zitat p {
	font-family: var(--tgt-font-display);
	font-weight: var(--tgt-fw-display);
	font-size: clamp(19px, 2.6vw, 23px);
	line-height: 1.45;
	color: var(--tgt-steel);
	margin: 0;
}

/* Herzsatz: die eine Zeile, um die sich die Seite dreht */
.tgt-ueber-mich .tgt-herzsatz {
	font-family: var(--tgt-font-display);
	font-weight: var(--tgt-fw-display);
	font-size: clamp(18px, 2.4vw, 22px);
	color: var(--tgt-teal-deep);
	margin: var(--tgt-space-5) 0 var(--tgt-space-3);
}

/* Verlinkte Kartenkoepfe (Weiterbildungs-Raster) */
.tgt-karte-kopf a {
	color: inherit;
	text-decoration: none;
}

.tgt-karte-kopf a:hover,
.tgt-karte-kopf a:focus {
	color: var(--tgt-teal-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Akkordeon (Core-Details-Block): Ausbildungsinhalte und
   Zertifikate bleiben komplett auf der Seite, draengen sich
   aber nicht auf — erst ein Klick oeffnet sie */
.tgt-akkordeon {
	background: var(--tgt-paper);
	border: 1px solid var(--tgt-line);
	border-radius: var(--tgt-radius-lg);
	margin-top: var(--tgt-space-4);
	padding: 0;
	overflow: hidden;
}

.tgt-akkordeon summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	padding: 16px 22px;
	font-family: var(--tgt-font-display);
	font-weight: var(--tgt-fw-display);
	font-size: 17px;
	color: var(--tgt-steel);
	transition: color var(--tgt-dur-base) var(--tgt-ease-out);
}

.tgt-akkordeon summary::-webkit-details-marker {
	display: none;
}

.tgt-akkordeon summary:hover,
.tgt-akkordeon summary:focus-visible {
	color: var(--tgt-teal-deep);
}

/* Chevron rechts, dreht sich beim Oeffnen */
.tgt-akkordeon summary::after {
	content: "";
	flex: 0 0 auto;
	margin-left: auto;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--tgt-teal-deep);
	border-bottom: 2px solid var(--tgt-teal-deep);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform var(--tgt-dur-base) var(--tgt-ease-out);
}

.tgt-akkordeon[open] > summary::after {
	transform: rotate(225deg);
}

.tgt-akkordeon > :not(summary) {
	margin: 0 22px var(--tgt-space-5);
}

/* Zertifikats-Galerie im Akkordeon braucht oben etwas Abstand */
.tgt-akkordeon .tgt-cert-gallery {
	margin-top: var(--tgt-space-2);
}

/* =========================================================
 * TIERART-SEITEN (Body-Klasse tgt-tierseite)
 * /hunde/, /pferde/, /katzen/, /kaninchen/ — Einstieg von den
 * Kacheln der Startseite. Grundlayout (Lesespalte, H2/H3,
 * Karten, Bilder, CTA) teilen sie sich mit den Leistungs-
 * Detailseiten; hier stehen nur die Eigenheiten.
 * ========================================================= */

/* Ueberleitung zu den anderen drei Tierarten, kurz vor dem CTA */
.tgt-tierseite .entry-content > p.tgt-tier-nav-kopf {
	margin-top: var(--tgt-space-7);
	margin-bottom: var(--tgt-space-3);
	text-align: center;
	font-family: var(--tgt-font-display);
	font-weight: var(--tgt-fw-display);
	font-size: 15px;
	letter-spacing: 0.04em;
	color: var(--tgt-slate-soft);
}

.tgt-tierseite .tgt-tier-nav {
	margin-bottom: var(--tgt-space-6);
	clear: both;
}

.tgt-tierseite .tgt-tier-nav .wp-block-button__link {
	padding: 8px 22px;
	font-size: var(--tgt-fs-body-sm);
	border-radius: var(--tgt-radius-pill);
}

/* Nummerierte Ablauf-Karte: die Schritt-Ziffern der Info-Karte sind schon
   gestylt — hier nur der Abstand, weil die Karte ohne Kopfzeile startet */
.tgt-tierseite .entry-content > .tgt-info-karte > ol:first-child {
	margin-top: 0;
}

/* =========================================================
 * KONTAKT & ANFAHRT (/kontakt/) — Himmelblau (NEU)
 * ========================================================= */

/* Maskierte Linien-Icons (Farbe folgt currentColor) */
.tgt-glyph{display:inline-block;width:1em;height:1em;flex:none;background-color:currentColor;
  -webkit-mask:var(--g) center/contain no-repeat;mask:var(--g) center/contain no-repeat;}
.tgt-glyph--phone{--g:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M22%2016.92v3a2%202%200%200%201-2.18%202%2019.79%2019.79%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6%2019.79%2019.79%200%200%201-3.07-8.67A2%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72c.13.96.36%201.9.7%202.81a2%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45c.91.34%201.85.57%202.81.7A2%202%200%200%201%2022%2016.92z%27%2F%3E%3C%2Fsvg%3E");}
.tgt-glyph--whatsapp{--g:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27%23000%27%3E%3Cpath%20d%3D%27M17.472%2014.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94%201.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198%200-.52.074-.792.372-.272.297-1.04%201.016-1.04%202.479%200%201.462%201.065%202.875%201.213%203.074.149.198%202.096%203.2%205.077%204.487.709.306%201.262.489%201.694.625.712.227%201.36.195%201.871.118.571-.085%201.758-.719%202.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421%207.403h-.004a9.87%209.87%200%2001-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86%209.86%200%2001-1.51-5.26c.001-5.45%204.436-9.884%209.888-9.884%202.64%200%205.122%201.03%206.988%202.898a9.825%209.825%200%20012.893%206.994c-.003%205.45-4.437%209.885-9.885%209.885M20.52%203.449C18.24%201.245%2015.24%200%2012.045%200%205.463%200%20.104%205.359.101%2011.892c0%202.096.546%204.142%201.588%205.945L0%2024l6.335-1.652a11.943%2011.943%200%20005.71%201.454h.006c6.585%200%2011.946-5.359%2011.949-11.893a11.821%2011.821%200%2000-3.481-8.463z%27%2F%3E%3C%2Fsvg%3E");}
.tgt-glyph--mail{--g:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20width%3D%2720%27%20height%3D%2716%27%20x%3D%272%27%20y%3D%274%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27m22%207-8.97%205.7a1.94%201.94%200%200%201-2.06%200L2%207%27%2F%3E%3C%2Fsvg%3E");}
.tgt-glyph--pin{--g:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20%2010c0%204.993-5.539%2010.193-7.399%2011.799a1%201%200%200%201-1.202%200C9.539%2020.193%204%2014.993%204%2010a8%208%200%200%201%2016%200%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2710%27%20r%3D%273%27%2F%3E%3C%2Fsvg%3E");}
.tgt-glyph--clock{--g:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%2F%3E%3Cpath%20d%3D%27M12%207v5l3%202%27%2F%3E%3C%2Fsvg%3E");}
.tgt-glyph--car{--g:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M19%2017h2c.6%200%201-.4%201-1v-3c0-.9-.7-1.7-1.5-1.9C18.7%2010.6%2016%2010%2016%2010s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6%200-1.1.4-1.4.9l-1.4%202.9A3.7%203.7%200%200%200%202%2012v4c0%20.6.4%201%201%201h2%27%2F%3E%3Ccircle%20cx%3D%277%27%20cy%3D%2717%27%20r%3D%272%27%2F%3E%3Cpath%20d%3D%27M9%2017h6%27%2F%3E%3Ccircle%20cx%3D%2717%27%20cy%3D%2717%27%20r%3D%272%27%2F%3E%3C%2Fsvg%3E");}
.tgt-glyph--train{--g:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20width%3D%2716%27%20height%3D%2716%27%20x%3D%274%27%20y%3D%273%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M4%2011h16%27%2F%3E%3Cpath%20d%3D%27M12%203v8%27%2F%3E%3Cpath%20d%3D%27m8%2019-2%203%27%2F%3E%3Cpath%20d%3D%27m18%2022-2-3%27%2F%3E%3Cpath%20d%3D%27M8%2015h.01%27%2F%3E%3Cpath%20d%3D%27M16%2015h.01%27%2F%3E%3C%2Fsvg%3E");}
.tgt-glyph--chat{--g:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M7.9%2020A9%209%200%201%200%204%2016.1L2%2022Z%27%2F%3E%3C%2Fsvg%3E");}
.tgt-glyph--parking{--g:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%2F%3E%3Cpath%20d%3D%27M9%2017V7h4a3%203%200%200%201%200%206H9%27%2F%3E%3C%2Fsvg%3E");}
.tgt-glyph--route{--g:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%276%27%20cy%3D%2719%27%20r%3D%273%27%2F%3E%3Cpath%20d%3D%27M9%2019h8.5a3.5%203.5%200%200%200%200-7h-11a3.5%203.5%200%200%201%200-7H15%27%2F%3E%3Ccircle%20cx%3D%2718%27%20cy%3D%275%27%20r%3D%273%27%2F%3E%3C%2Fsvg%3E");}
.tgt-glyph--bone{--g:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2048%2024%27%3E%3Cg%20fill%3D%27%23000%27%3E%3Ccircle%20cx%3D%279%27%20cy%3D%278%27%20r%3D%275.5%27%2F%3E%3Ccircle%20cx%3D%279%27%20cy%3D%2716%27%20r%3D%275.5%27%2F%3E%3Ccircle%20cx%3D%2739%27%20cy%3D%278%27%20r%3D%275.5%27%2F%3E%3Ccircle%20cx%3D%2739%27%20cy%3D%2716%27%20r%3D%275.5%27%2F%3E%3Crect%20x%3D%279%27%20y%3D%278%27%20width%3D%2730%27%20height%3D%278%27%20rx%3D%274%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");}
.tgt-glyph--walk{--g:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2713%27%20cy%3D%274%27%20r%3D%271.6%27%2F%3E%3Cpath%20d%3D%27M11%2021l1.5-6L9.5%2012%208%2015%27%2F%3E%3Cpath%20d%3D%27m12.5%2015%202.5%202%201.5%204%27%2F%3E%3Cpath%20d%3D%27M9.5%2012%208%208.5%2011%207l2.2%202.2L16%2010%27%2F%3E%3C%2Fsvg%3E");}

/* Icon-Scheibe (Cyan-Kreis mit weißem Innenring) */
.tgt-disc{position:relative;flex:none;width:var(--disc,64px);height:var(--disc,64px);border-radius:50%;
  background:var(--tgt-teal);display:grid;place-items:center;color:#fff;}
.tgt-disc::before{content:"";position:absolute;inset:4px;border-radius:50%;
  border:2px solid rgba(255,255,255,.85);pointer-events:none;}
.tgt-disc .tgt-glyph{width:50%;height:50%;}

/* Kontaktkanäle: klickbare Karten */
.tgt-kontakt-cards{display:grid;gap:var(--tgt-space-4);
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));}
.tgt-kontakt-card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:5px;padding:clamp(24px,3.4vw,32px) 20px;background:#fff;border:1px solid var(--tgt-line);
  border-radius:var(--tgt-radius-xl);box-shadow:var(--tgt-elev-1);color:var(--tgt-slate);text-decoration:none;
  transition:transform var(--tgt-dur-base) var(--tgt-ease-out),box-shadow var(--tgt-dur-base) var(--tgt-ease-out),border-color var(--tgt-dur-base) var(--tgt-ease-out);}
.tgt-kontakt-card:hover{transform:translateY(-3px);box-shadow:var(--tgt-elev-2);border-color:var(--tgt-teal-soft);text-decoration:none;color:var(--tgt-slate);}
.tgt-kontakt-card:focus-visible{outline:3px solid var(--tgt-teal);outline-offset:3px;}
.tgt-kontakt-card .tgt-disc{margin-bottom:10px;}
.tgt-kontakt-card__label{font-family:var(--tgt-font-display);font-weight:var(--tgt-fw-display);font-size:19px;color:var(--tgt-steel);line-height:1.2;}
.tgt-kontakt-card__value{font-size:16px;font-weight:500;color:var(--tgt-slate);}
.tgt-kontakt-card__hint{font-size:var(--tgt-fs-caption);color:var(--tgt-slate-soft);}
.tgt-kontakt-card__cta{margin-top:8px;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--tgt-font-display);font-weight:600;font-size:14px;color:var(--tgt-teal-deep);}
.tgt-kontakt-card__arrow{transition:transform var(--tgt-dur-base) var(--tgt-ease-out);}
.tgt-kontakt-card:hover .tgt-kontakt-card__cta{color:var(--tgt-steel);}
.tgt-kontakt-card:hover .tgt-kontakt-card__arrow{transform:translateX(4px);}
.tgt-kontakt-cta-row{text-align:center;margin-top:var(--tgt-space-5);}

/* Visitenkarte: Adresse + Praxiszeiten */
.tgt-visit{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(20px,3vw,40px);background:#fff;
  border:1px solid var(--tgt-line);border-radius:var(--tgt-radius-2xl);box-shadow:var(--tgt-elev-1);
  padding:clamp(24px,3.6vw,40px);}
.tgt-visit__col{display:flex;gap:16px;}
.tgt-visit__col--hours{border-left:1px solid var(--tgt-line);padding-left:clamp(20px,3vw,40px);}
.tgt-visit .tgt-disc{--disc:52px;}
.tgt-visit h3{font-size:var(--tgt-fs-h3);margin:0 0 6px;}
.tgt-visit address{font-style:normal;line-height:1.6;color:var(--tgt-slate);}
.tgt-visit address strong{font-weight:500;}
.tgt-visit__near{margin:12px 0 0;font-size:var(--tgt-fs-body-sm);color:var(--tgt-slate-soft);display:flex;gap:8px;align-items:flex-start;}
.tgt-visit__near .tgt-glyph{width:17px;height:17px;color:var(--tgt-teal-deep);margin-top:2px;flex:none;}
.tgt-visit dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:7px 18px;font-size:var(--tgt-fs-body-sm);}
.tgt-visit dt{color:var(--tgt-slate-soft);white-space:nowrap;}
.tgt-visit dd{margin:0;color:var(--tgt-slate);font-weight:500;}

/* Formular-Panel (deutlich abgesetzt) */
.tgt-form-section{background:var(--tgt-steel-tint);}
.tgt-form-panel{background:#fff;border-radius:var(--tgt-radius-2xl);box-shadow:var(--tgt-elev-3);
  overflow:hidden;display:grid;grid-template-columns:0.82fr 1.18fr;max-width:1040px;margin:0 auto;}
.tgt-form-panel__aside{background:var(--tgt-gradient-steel);color:#fff;padding:clamp(28px,4vw,44px);
  display:flex;flex-direction:column;gap:14px;}
.tgt-form-panel__aside .tgt-disc{background:rgba(255,255,255,.16);--disc:56px;}
.tgt-form-panel__aside .tgt-disc::before{border-color:rgba(255,255,255,.5);}
.tgt-form-panel__aside h2{color:#fff;font-size:var(--tgt-fs-h2);margin:6px 0 0;}
.tgt-form-panel__aside > p{color:rgba(255,255,255,.86);margin:0;}
.tgt-form-assur{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:13px;}
.tgt-form-assur li{position:relative;padding-left:30px;color:#fff;font-size:var(--tgt-fs-body-sm);line-height:1.45;}
.tgt-form-assur li .tgt-glyph{position:absolute;left:0;top:1px;width:19px;height:11px;color:var(--tgt-teal-soft);}
.tgt-form-panel__aside__foot{margin-top:auto;padding-top:20px;display:flex;align-items:center;gap:11px;
  font-size:var(--tgt-fs-body-sm);color:rgba(255,255,255,.86);border-top:1px solid rgba(255,255,255,.18);}
.tgt-form-panel__aside__foot .tgt-glyph{width:18px;height:18px;color:var(--tgt-teal-soft);flex:none;}
.tgt-form-panel__aside__foot a{color:#fff;font-weight:500;}
.tgt-form-panel__aside__foot a:hover{color:var(--tgt-teal-soft);text-decoration:underline;}
.tgt-form-panel__body{padding:clamp(28px,4vw,44px);}
.tgt-form-panel__body h3{font-size:var(--tgt-fs-h3);margin:0 0 4px;}
.tgt-form-panel__intro{margin:0 0 20px;color:var(--tgt-slate-soft);font-size:var(--tgt-fs-body-sm);}
/* Sternchen hinter Pflichtfeldern; der Stern ist fuer Screenreader ausgeblendet (aria-hidden),
   die Pflicht meldet CF7 ueber aria-required */
.tgt-form-panel__body .tgt-pflicht{color:var(--tgt-teal-deep);font-weight:600;margin-left:2px;}

/* Anfahrt */
.tgt-locator{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--tgt-line);
  border-radius:var(--tgt-radius-pill);box-shadow:var(--tgt-elev-1);padding:10px 24px 10px 10px;
  margin:0 auto var(--tgt-space-6);max-width:720px;}
.tgt-locator .tgt-disc{--disc:44px;}
.tgt-locator p{margin:0;font-size:var(--tgt-fs-body-sm);color:var(--tgt-slate-soft);}
.tgt-locator strong{color:var(--tgt-steel);font-weight:600;font-family:var(--tgt-font-display);letter-spacing:0;}

/* Karte – Klick zum Laden (DSGVO) */
.tgt-map{position:relative;border-radius:var(--tgt-radius-2xl);overflow:hidden;box-shadow:var(--tgt-elev-2);
  border:1px solid var(--tgt-line);margin-bottom:var(--tgt-space-5);background:var(--tgt-steel-tint);}
.tgt-map__frame{display:block;width:100%;height:clamp(300px,44vw,460px);border:0;}
.tgt-map__ph{position:relative;height:clamp(300px,44vw,460px);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;text-align:center;padding:28px;
  background:
    linear-gradient(150deg,rgba(211,237,249,.7),rgba(255,255,255,.7)),
    repeating-linear-gradient(38deg,transparent 0 26px,rgba(22,65,140,.05) 26px 28px),
    repeating-linear-gradient(-52deg,transparent 0 34px,rgba(22,65,140,.05) 34px 36px);}
.tgt-map__ph .tgt-disc{--disc:66px;box-shadow:var(--tgt-elev-2);}
.tgt-map__ph h3{margin:0;font-size:var(--tgt-fs-h3);}
.tgt-map__note{margin:0;font-size:var(--tgt-fs-caption);color:var(--tgt-slate-soft);max-width:360px;line-height:1.5;}
.tgt-map__btn{cursor:pointer;font-family:var(--tgt-font-display);font-weight:600;font-size:15px;
  border:0;border-radius:var(--tgt-radius-pill);padding:11px 24px;background:var(--tgt-steel);color:#fff;
  box-shadow:var(--tgt-elev-1);display:inline-flex;align-items:center;gap:9px;transition:background-color .18s;}
.tgt-map__btn:hover{background:var(--tgt-steel-deep);}
.tgt-map__btn .tgt-glyph{width:18px;height:18px;}

/* Instagram-Beitrag – Klick zum Laden (DSGVO), Baustein [tgt_instagram] */
.tgt-insta{margin:var(--tgt-space-6) 0;}
.tgt-insta__ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  text-align:center;padding:clamp(28px,5vw,40px) 24px;border:1px solid var(--tgt-line);
  border-radius:var(--tgt-radius-2xl);box-shadow:var(--tgt-elev-1);
  background:
    linear-gradient(150deg,rgba(211,237,249,.7),rgba(255,255,255,.7)),
    repeating-linear-gradient(38deg,transparent 0 26px,rgba(22,65,140,.05) 26px 28px),
    repeating-linear-gradient(-52deg,transparent 0 34px,rgba(22,65,140,.05) 34px 36px);}
.tgt-insta__ph .tgt-disc{--disc:62px;box-shadow:var(--tgt-elev-2);}
.tgt-insta__ph .tgt-disc .fab{font-size:26px;line-height:1;}
.tgt-insta__ph h3{margin:0;font-size:var(--tgt-fs-h3);}
.tgt-insta__note{margin:0;font-size:var(--tgt-fs-caption);color:var(--tgt-slate-soft);max-width:380px;line-height:1.5;}
.tgt-insta__btn{cursor:pointer;font-family:var(--tgt-font-display);font-weight:600;font-size:15px;
  border:0;border-radius:var(--tgt-radius-pill);padding:11px 24px;background:var(--tgt-steel);color:#fff;
  box-shadow:var(--tgt-elev-1);display:inline-flex;align-items:center;gap:9px;transition:background-color .18s;}
.tgt-insta__btn:hover{background:var(--tgt-steel-deep);}
.tgt-insta__link{font-size:var(--tgt-fs-caption);}
/* Nach dem Klick: Beitrag mittig (Breite und Rahmen setzt instagram-embed.js per Inline-Style) */
.tgt-insta.is-geladen{display:flex;justify-content:center;}

/* Anreise-Karten */
.tgt-anreise{display:grid;grid-template-columns:1fr 1fr;gap:var(--tgt-space-4);margin-bottom:var(--tgt-space-5);}
.tgt-anreise-card{background:#fff;border:1px solid var(--tgt-line);border-radius:var(--tgt-radius-xl);
  box-shadow:var(--tgt-elev-1);padding:clamp(22px,3vw,30px);}
.tgt-anreise-card__head{display:flex;align-items:center;gap:14px;margin-bottom:18px;flex-wrap:wrap;}
.tgt-anreise-card__head .tgt-disc{--disc:48px;}
.tgt-anreise-card__head h3{margin:0;font-size:var(--tgt-fs-h3);flex:1 1 auto;}
.tgt-anreise-card__badge{margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  background:var(--tgt-steel-soft);color:var(--tgt-steel-deep);font-size:var(--tgt-fs-caption);font-weight:500;
  padding:5px 13px;border-radius:var(--tgt-radius-pill);white-space:nowrap;}
.tgt-anreise-card__badge .tgt-glyph{width:14px;height:14px;}
.tgt-anreise-card .tgt-knochen-liste li{font-size:var(--tgt-fs-body-sm);color:var(--tgt-slate);}

/* Hinweis-Box (Parken) */
.tgt-tip{display:flex;gap:13px;align-items:flex-start;margin-top:18px;
  background:var(--tgt-steel-tint);border:1px solid var(--tgt-steel-soft);border-radius:var(--tgt-radius-md);
  padding:14px 16px;font-size:var(--tgt-fs-body-sm);color:var(--tgt-slate);line-height:1.5;}
.tgt-tip .tgt-glyph{flex:none;width:21px;height:21px;color:var(--tgt-teal-deep);margin-top:1px;}

/* Routen-Buttons */
.tgt-route-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:var(--tgt-space-2);}
.tgt-route-btns .wp-block-button__link{display:inline-flex;align-items:center;gap:9px;}
.tgt-route-btns .tgt-glyph{width:17px;height:17px;}

/* Responsive */
@media (max-width:860px){
  .tgt-visit{grid-template-columns:1fr;}
  .tgt-visit__col--hours{border-left:0;padding-left:0;border-top:1px solid var(--tgt-line);padding-top:24px;}
  .tgt-form-panel{grid-template-columns:1fr;}
  .tgt-anreise{grid-template-columns:1fr;}
}

/* Sektions-Abstand, wenn die Kontakt/Anfahrt-Bausteine im Seiteninhalt stapeln */
.tgt-ksec{margin-top:clamp(44px,6.5vw,72px);}
.tgt-ksec--intro{max-width:760px;}

/* =========================================================
 * LEISTUNGSSEITEN V2 (Body-Klasse tgt-lp2, Pilot Oktober 2026)
 * Wechselnde Bausteine statt gleichfoermigem Kartenstapel:
 * Seitenkopf mit Kreisfoto, Flaechen, Chips, Ablauf-Schritte,
 * Vorteil-Kacheln, Weiterbildungs-Karte, "Passt dazu"-Kacheln.
 * Die Klasse setzt inc/leistungsseiten.php, sobald der Inhalt den
 * Baustein tgt-kopf enthaelt. Grundstile der Detailseiten
 * (Lesespalte, Lead, Info-Karte, CTA) gelten weiter.
 * ========================================================= */

/* ---------- BROTKRUMEN ---------- */

.tgt-krumen {
	margin: 0 0 var(--tgt-space-5);
	font-size: var(--tgt-fs-caption);
	line-height: 1.4;
}

.tgt-krumen ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 10px;
	list-style: none;
	margin: 0;
	padding: 0;
	color: var(--tgt-slate-soft);
}

.tgt-krumen li + li::before {
	content: "\203A";
	margin-right: 10px;
	color: var(--tgt-slate-soft);
}

.tgt-krumen a {
	display: inline-block;
	padding-block: 5px; /* Zielgroesse mindestens 24 px hoch */
	color: var(--tgt-teal-deep);
	text-decoration: none;
}

.tgt-krumen a:hover,
.tgt-krumen a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- SEITENKOPF ---------- */

.tgt-lp2 .wp-block-group.tgt-kopf {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: clamp(24px, 5vw, 56px);
	align-items: center;
	margin: 0 0 clamp(36px, 6vw, 60px);
}

.tgt-lp2 .tgt-kopf__text > * {
	margin-block: 0;
}

.tgt-lp2 .tgt-kopf__text > * + * {
	margin-block-start: 14px;
}

.tgt-lp2 .tgt-kopf h1.tgt-kopf__titel {
	font-family: var(--tgt-font-display);
	font-weight: var(--tgt-fw-display);
	font-size: clamp(32px, 5vw, 46px);
	line-height: var(--tgt-lh-display);
	color: var(--tgt-steel);
	margin-block-start: 16px;
}

/* Unterzeile: der bisherige zweite Titel — jetzt dezent unter der H1 */
.tgt-lp2 .tgt-kopf h2.tgt-unterzeile {
	font-family: var(--tgt-font);
	font-weight: var(--tgt-fw-medium);
	font-size: clamp(18px, 2.3vw, 21px);
	line-height: 1.35;
	color: var(--tgt-teal-deep);
	margin-block-start: 8px;
}

.tgt-lp2 .tgt-kopf p.tgt-lead {
	font-size: clamp(17px, 2.1vw, 19px);
	line-height: 1.6;
	color: var(--tgt-slate);
	margin-block-start: 18px;
}

.tgt-lp2 .tgt-kopf .wp-block-buttons {
	margin-block-start: 26px;
	gap: 12px 22px;
	align-items: center;
}

/* Tierarten-Pillen (Links zu den Tierseiten) */
ul.tgt-pillen {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

ul.tgt-pillen li {
	margin: 0;
	padding: 0;
}

ul.tgt-pillen a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 4px 16px;
	border-radius: var(--tgt-radius-pill);
	background: var(--tgt-steel-soft);
	color: var(--tgt-steel);
	font-size: 14px;
	font-weight: var(--tgt-fw-medium);
	text-decoration: none;
	transition: background var(--tgt-dur-base) var(--tgt-ease-out),
	            color var(--tgt-dur-base) var(--tgt-ease-out);
}

ul.tgt-pillen a:hover,
ul.tgt-pillen a:focus-visible {
	background: var(--tgt-steel);
	color: #fff;
}

/* Submarken-Logo (Hundefitness) ersetzt die Pillen */
.tgt-lp2 .tgt-kopf__marke {
	margin: 0;
}

.tgt-lp2 .tgt-kopf__marke img {
	width: clamp(104px, 14vw, 132px);
	height: auto;
	display: block;
}

/* Kreisfoto rechts: heller Ring + Cyan-Ring wie im Schaufenster */
.tgt-lp2 .tgt-kopf figure.tgt-kopf__foto {
	margin: 0;
	width: clamp(200px, 29vw, 272px);
}

.tgt-lp2 .tgt-kopf__foto img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 50%;
	box-shadow: 0 0 0 5px #fff,
	            0 0 0 8px var(--tgt-teal),
	            var(--tgt-elev-2);
}

/* Wo kein Foto passt: grosse Cyan-Scheibe mit Tier-Icon */
.tgt-lp2 .wp-block-group.tgt-kopf__scheibe {
	position: relative;
	display: grid;
	place-items: center;
	width: clamp(168px, 24vw, 220px);
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: var(--tgt-teal);
	box-shadow: 0 0 0 5px #fff,
	            0 0 0 8px var(--tgt-steel-soft),
	            var(--tgt-elev-2);
}

.tgt-lp2 .tgt-kopf__scheibe::before {
	content: "";
	position: absolute;
	inset: 9px;
	border-radius: 50%;
	border: 3px solid rgba(255, 255, 255, 0.85);
	pointer-events: none;
}

.tgt-lp2 .tgt-kopf__scheibe .wp-block-image {
	margin: 0;
}

.tgt-lp2 .tgt-kopf__scheibe img {
	display: block;
	width: clamp(78px, 11vw, 100px);
	height: auto;
}

@media (max-width: 700px) {
	.tgt-lp2 .wp-block-group.tgt-kopf {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 22px;
	}
	/* Foto zuerst: das Tier ist sofort zu sehen, der Termin-Button
	   sitzt in der festen Handy-Leiste unten ohnehin im Blick */
	.tgt-lp2 .tgt-kopf > figure.tgt-kopf__foto,
	.tgt-lp2 .tgt-kopf > .tgt-kopf__scheibe {
		order: -1;
		width: 132px;
	}
	.tgt-lp2 .tgt-kopf > .tgt-kopf__scheibe {
		width: 120px;
	}
	/* Der Ring des Kreisfotos hat 8 px Hof — Foto buendig zum Textrand setzen */
	.tgt-lp2 .tgt-kopf > figure.tgt-kopf__foto,
	.tgt-lp2 .tgt-kopf > .tgt-kopf__scheibe {
		margin-left: 8px;
	}
	/* Mit Submarken-Logo (Hundefitness) steht das Logo oben; das Foto
	   folgt dann nach dem Text, sonst sitzen zwei Kreise vor der H1 */
	.tgt-lp2 .tgt-kopf:has(.tgt-kopf__marke) > figure.tgt-kopf__foto {
		order: 0;
		width: min(240px, 70%);
	}
}

/* ---------- FLAECHE: Himmelblau-Band ueber die volle Seitenbreite ----------
   Der Inhalt bleibt in der Lesespalte, nur der Hintergrund laeuft bis zum
   Rand (Pseudo-Element 100vw; #main-container schneidet horizontal ab). */

.tgt-lp2 .entry-content > .wp-block-group.tgt-flaeche {
	position: relative;
	isolation: isolate;
	padding-block: clamp(32px, 5vw, 56px);
	margin-block: clamp(36px, 6vw, 64px);
	clear: both;
}

.tgt-lp2 .tgt-flaeche::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset-block: 0;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	background: var(--tgt-steel-tint);
	border-block: 1px solid var(--tgt-steel-soft);
}

.tgt-lp2 .tgt-flaeche > :first-child {
	margin-top: 0;
}

.tgt-lp2 .tgt-flaeche > :last-child {
	margin-bottom: 0;
}

/* H2-Balken auch in Flaechen und im Block "Passt dazu" */
.tgt-lp2 .tgt-flaeche > h2,
.tgt-lp2 .tgt-passt-dazu > h2 {
	margin-top: 0;
}

.tgt-lp2 .tgt-flaeche > h2::after,
.tgt-lp2 .tgt-passt-dazu > h2::after {
	content: "";
	display: block;
	width: 52px;
	height: 4px;
	border-radius: 2px;
	background: var(--tgt-teal);
	margin-top: 10px;
}

/* ---------- CHIPS: kurze Begriffe statt Kartenliste ---------- */

ul.tgt-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

ul.tgt-chips li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	padding: 7px 16px 7px 13px;
	background: #fff;
	border: 1px solid var(--tgt-steel-soft);
	border-radius: 20px;
	font-size: var(--tgt-fs-body-sm);
	line-height: 1.4;
	color: var(--tgt-slate);
}

ul.tgt-chips li::before {
	content: "";
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	margin-top: 0.5em;
	border-radius: 50%;
	background: var(--tgt-teal);
}

/* Folgt auf Chips ein Absatz, braucht er Abstand (Chips selbst haben keinen Aussenabstand) */
.tgt-lp2 .entry-content ul.tgt-chips + p {
	margin-top: 18px;
}

/* Chip-Gruppen mit Beschriftung (Verdauungssystem, Atmungssystem ...) */
.tgt-lp2 .tgt-chips-gruppe + .tgt-chips-gruppe {
	margin-top: var(--tgt-space-5);
}

.tgt-lp2 .tgt-chips-gruppe > h3 {
	font-size: 17px;
	color: var(--tgt-steel);
	margin: 0 0 10px;
}

/* ---------- ABLAUF: nummerierte Schritte statt 12-Punkte-Liste ---------- */

.tgt-lp2 .wp-block-group.tgt-schritte {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	counter-reset: tgt-schritt;
	margin-top: var(--tgt-space-5);
}

.tgt-lp2 .tgt-schritt {
	counter-increment: tgt-schritt;
	position: relative;
	padding: 0 0 28px 62px;
}

.tgt-lp2 .tgt-schritt:last-child {
	padding-bottom: 0;
}

/* Zahlenscheibe in Navy: weisse Ziffer mit vollem Kontrast */
.tgt-lp2 .tgt-schritt::before {
	content: counter(tgt-schritt);
	position: absolute;
	top: 0;
	left: 0;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--tgt-steel);
	color: #fff;
	font-family: var(--tgt-font-display);
	font-weight: var(--tgt-fw-display);
	font-size: 19px;
	display: grid;
	place-items: center;
	box-shadow: 0 0 0 4px var(--tgt-steel-soft);
}

/* Verbindungslinie zum naechsten Schritt */
.tgt-lp2 .tgt-schritt::after {
	content: "";
	position: absolute;
	top: 50px;
	bottom: 6px;
	left: 20px;
	width: 2px;
	background: var(--tgt-steel-soft);
}

.tgt-lp2 .tgt-schritt:last-child::after {
	display: none;
}

.tgt-lp2 .tgt-schritt > h3 {
	font-size: 19px;
	color: var(--tgt-steel);
	margin: 8px 0 8px;
}

.tgt-lp2 .tgt-schritt ul.tgt-knochen-liste li {
	font-size: var(--tgt-fs-body-sm);
	margin-bottom: 6px;
	/* lange Fachwoerter (Verhaltensempfehlungen) in schmalen Spalten sauber trennen */
	-webkit-hyphens: auto;
	hyphens: auto;
	overflow-wrap: break-word;
}

@media (min-width: 780px) {
	.tgt-lp2 .wp-block-group.tgt-schritte:not(.tgt-schritte--liste) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: 22px;
	}
	.tgt-lp2 .wp-block-group.tgt-schritte.tgt-schritte--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.tgt-lp2 .tgt-schritte:not(.tgt-schritte--liste) .tgt-schritt {
		padding: 58px 0 0;
	}
	.tgt-lp2 .tgt-schritte:not(.tgt-schritte--liste) .tgt-schritt::after {
		top: 20px;
		bottom: auto;
		left: 54px;
		right: -22px;
		width: auto;
		height: 2px;
	}
	.tgt-lp2 .tgt-schritte:not(.tgt-schritte--liste) .tgt-schritt > h3,
	.tgt-lp2 .tgt-schritte:not(.tgt-schritte--liste) .tgt-schritt > .tgt-schritt__titel {
		margin-top: 0;
	}
}

/* Titel eines Schritts als Absatz (wo keine Ueberschrift davor steht, damit die
   Ebenen nicht springen); gleiche Optik wie die h3 */
.tgt-lp2 .tgt-schritt > .tgt-schritt__titel {
	font-family: var(--tgt-font-display);
	font-weight: var(--tgt-fw-display);
	font-size: 19px;
	line-height: 1.25;
	color: var(--tgt-steel);
	margin: 8px 0 8px;
}

.tgt-lp2 .tgt-schritt > p:not(.tgt-schritt__titel) {
	margin: 0;
	font-size: var(--tgt-fs-body-sm);
	line-height: 1.55;
}

/* Senkrechte Liste (Hilfsmittel, Pflege-Tipps): auch am Desktop untereinander.
   Steht nur ein Satz im Schritt, sitzt er mittig neben der Zahlenscheibe. */
.tgt-lp2 .tgt-schritte--liste .tgt-schritt > p:only-child {
	min-height: 42px;
	display: flex;
	align-items: center;
	font-size: var(--tgt-fs-body);
}

/* ---------- VORTEIL-KACHELN (Icon-Scheibe, Titel, Text) ---------- */

.tgt-lp2 .wp-block-group.tgt-vorteile {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 18px;
	margin-top: var(--tgt-space-5);
}

@media (min-width: 760px) {
	.tgt-lp2 .wp-block-group.tgt-vorteile {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Vier Kacheln: zwei mal zwei statt 3 + 1 */
@media (min-width: 760px) {
	.tgt-lp2 .wp-block-group.tgt-vorteile--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.tgt-lp2 .tgt-vorteil {
	background: #fff;
	border: 1px solid var(--tgt-steel-soft);
	border-radius: var(--tgt-radius-xl);
	padding: clamp(20px, 3vw, 26px);
}

.tgt-lp2 .tgt-vorteil > .tgt-icon-disc {
	margin-bottom: var(--tgt-space-3);
}

.tgt-lp2 .tgt-vorteil > h3 {
	font-size: 18px;
	color: var(--tgt-steel);
	margin: 0 0 8px;
}

.tgt-lp2 .tgt-vorteil > p {
	margin: 0;
	font-size: var(--tgt-fs-body-sm);
	line-height: 1.55;
	color: var(--tgt-slate);
}

/* ---------- WEITERBILDUNG: kleine Vertrauenskarte ---------- */

.tgt-lp2 .wp-block-group.tgt-quali {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 18px;
	background: #fff;
	border: 1px solid var(--tgt-line);
	border-radius: var(--tgt-radius-xl);
	padding: 16px 22px 16px 16px;
	margin-top: clamp(32px, 5vw, 48px);
	clear: both;
}

.tgt-lp2 .tgt-quali figure.tgt-quali__bild {
	margin: 0;
	width: 76px;
}

.tgt-lp2 .tgt-quali__bild img {
	display: block;
	width: 76px;
	height: 100px;
	object-fit: cover;
	object-position: top;
	border-radius: var(--tgt-radius-sm);
	box-shadow: var(--tgt-elev-1);
}

/* Querformat-Zertifikat (z. B. Bindegewebsmassage): breiter, dafuer flacher
   als das Hochformat, damit der Titel nicht angeschnitten wird */
.tgt-lp2 .tgt-quali--quer figure.tgt-quali__bild {
	width: 124px;
}

.tgt-lp2 .tgt-quali--quer .tgt-quali__bild img {
	width: 124px;
	height: 88px;
	object-position: center;
}

.tgt-lp2 .tgt-quali__text > * {
	margin: 0;
}

.tgt-lp2 .tgt-quali__text > * + * {
	margin-top: 4px;
}

.tgt-lp2 .tgt-quali__label {
	font-family: var(--tgt-font-display);
	font-weight: var(--tgt-fw-display);
	font-size: 14px;
	letter-spacing: 0.04em;
	color: var(--tgt-teal-deep);
}

.tgt-lp2 .tgt-quali__titel {
	font-size: 17px;
	font-weight: var(--tgt-fw-medium);
	line-height: 1.35;
	color: var(--tgt-steel);
}

.tgt-lp2 .tgt-quali__text a {
	display: inline-block;
	padding-block: 4px;
	font-size: var(--tgt-fs-body-sm);
	color: var(--tgt-teal-deep);
}

/* ---------- PASST DAZU: drei Kacheln wie auf /leistungen/ ---------- */

.tgt-lp2 .wp-block-group.tgt-passt-dazu {
	margin-top: clamp(40px, 6vw, 64px);
	clear: both;
}

.tgt-lp2 .tgt-passt-dazu .wp-block-group.tgt-leistung-grid {
	margin-top: var(--tgt-space-5);
}

/* ---------- HERZSATZ vor dem Abschluss ---------- */

.tgt-lp2 .entry-content > p.tgt-herzsatz {
	font-family: var(--tgt-font-display);
	font-weight: var(--tgt-fw-display);
	font-size: clamp(19px, 2.6vw, 24px);
	line-height: 1.4;
	color: var(--tgt-teal-deep);
	text-align: center;
	max-width: 620px;
	margin: clamp(32px, 5vw, 48px) auto 0;
}

/* Ab Tablet steht das Foto/Icon ueber dem Text statt daneben: drei Spalten
   in der Lesespalte lassen sonst nur ~120 px Textbreite. Auf dem Handy
   bleibt die Kachel wie auf /leistungen/ (Foto links, Text rechts), weil
   sie dort einspaltig laeuft und so deutlich weniger Hoehe braucht. */
@media (min-width: 601px) {
	.tgt-lp2 .tgt-passt-dazu .tgt-leistung {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 6px;
		padding: var(--tgt-space-5);
		padding-right: calc(var(--tgt-space-5) + 14px);
	}

	.tgt-lp2 .tgt-passt-dazu .tgt-leistung > .tgt-leistung__foto,
	.tgt-lp2 .tgt-passt-dazu .tgt-leistung > .tgt-icon-disc {
		grid-column: 1;
		grid-row: auto;
		margin-bottom: 6px;
	}

	.tgt-lp2 .tgt-passt-dazu .tgt-leistung h3,
	.tgt-lp2 .tgt-passt-dazu .tgt-leistung p {
		grid-column: 1;
		-webkit-hyphens: auto;
		hyphens: auto;
	}
}

/* Handy: weniger Leerraum um und in den Bausteinen, kleinere Chips */
@media (max-width: 600px) {
	.tgt-lp2 .entry-content > .wp-block-group.tgt-flaeche {
		padding-block: 26px;
		margin-block: 28px;
	}
	ul.tgt-chips {
		gap: 6px;
	}
	ul.tgt-chips li {
		padding: 5px 12px 5px 10px;
		font-size: 14px;
	}
	.tgt-lp2 .tgt-chips-gruppe + .tgt-chips-gruppe {
		margin-top: 16px;
	}
	.tgt-lp2 .tgt-schritt {
		padding-bottom: 20px;
	}
	.tgt-lp2 .tgt-schritt::after {
		bottom: 2px;
	}
	.tgt-lp2 .wp-block-group.tgt-quali {
		padding: 14px 16px 14px 14px;
		gap: 14px;
		margin-top: 28px;
	}
	.tgt-lp2 .wp-block-group.tgt-passt-dazu {
		margin-top: 32px;
	}
	.tgt-lp2 .entry-content > h2 {
		margin-top: 36px;
	}
	/* "Das passt dazu": auf dem Handy nur Foto/Icon und Titel (der Kurztext
	   steht auf /leistungen/ und auf der Zielseite) */
	.tgt-lp2 .tgt-passt-dazu .tgt-leistung {
		grid-template-columns: 48px minmax(0, 1fr);
		column-gap: 14px;
		align-items: center;
		padding: 12px 34px 12px 14px;
	}
	.tgt-lp2 .tgt-passt-dazu .tgt-leistung > .tgt-leistung__foto,
	.tgt-lp2 .tgt-passt-dazu .tgt-leistung > .tgt-icon-disc {
		grid-row: 1;
		width: 48px;
		height: 48px;
		align-self: center;
	}
	.tgt-lp2 .tgt-passt-dazu .tgt-leistung__foto img {
		width: 48px;
		height: 48px;
	}
	.tgt-lp2 .tgt-passt-dazu .tgt-leistung > .tgt-icon-disc img {
		width: 26px;
	}
	.tgt-lp2 .tgt-passt-dazu .tgt-leistung p {
		display: none;
	}
	/* Vorteil-Kacheln: Icon links, Text rechts */
	.tgt-lp2 .tgt-vorteil {
		display: grid;
		grid-template-columns: 48px minmax(0, 1fr);
		column-gap: 14px;
		align-items: start;
		padding: 16px;
	}
	.tgt-lp2 .tgt-vorteil > .tgt-icon-disc {
		grid-row: 1 / span 2;
		width: 48px;
		height: 48px;
		margin: 0;
	}
	.tgt-lp2 .tgt-vorteil > .tgt-icon-disc img {
		width: 26px;
	}
	.tgt-lp2 .tgt-vorteil > h3,
	.tgt-lp2 .tgt-vorteil > p {
		grid-column: 2;
	}
}

/* Bildreihe mit drei Fotos: auf dem Handy drei kleine Quadrate in einer Zeile
   statt 2 + 1 (ein einzelnes Foto hing sonst allein darunter) */
@media (max-width: 500px) {
	.tgt-lp2 .wp-block-group.tgt-bild-reihe:has(> .wp-block-image:nth-child(3):last-child) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
	}
	.tgt-lp2 .tgt-bild-reihe:has(> .wp-block-image:nth-child(3):last-child) .wp-block-image img {
		aspect-ratio: 1;
		border-radius: var(--tgt-radius-md);
	}
}

/* ---------- FOTO-MOSAIK: drei Fotos als Collage mit Strahlen-Scheibe ----------
   Reihenfolge im HTML: 1 Querformat, 2 Querformat, 3 Hochformat.
   Desktop: Hochformat rechts ueber zwei Zeilen, die Querformate links gestapelt.
   Handy: erstes Foto gross oben, die beiden anderen als Quadrate darunter.
   Die Scheibe sitzt per ::after auf dem Schnittpunkt der drei Fotos (nur
   Dekoration). Die Bilder liegen absolut in der Kachel, damit ihr eigenes
   Seitenverhaeltnis die Zeilenhoehe nicht beeinflusst. */

.tgt-lp2 .entry-content > .wp-block-group.tgt-foto-mosaik {
	--mosaik-gap: 12px;
	--mosaik-scheibe: 56px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-areas:
		"quer-a hoch"
		"quer-b hoch";
	gap: var(--mosaik-gap);
	margin-block: clamp(28px, 5vw, 48px);
	clear: both;
}

.tgt-lp2 .tgt-foto-mosaik > * {
	margin-block: 0;
}

.tgt-lp2 .tgt-foto-mosaik > .wp-block-image {
	position: relative;
	min-width: 0;
	margin: 0;
}

.tgt-lp2 .tgt-foto-mosaik > .wp-block-image:nth-child(1) {
	grid-area: quer-a;
	aspect-ratio: 4 / 3;
}

.tgt-lp2 .tgt-foto-mosaik > .wp-block-image:nth-child(2) {
	grid-area: quer-b;
	aspect-ratio: 4 / 3;
}

.tgt-lp2 .tgt-foto-mosaik > .wp-block-image:nth-child(3) {
	grid-area: hoch;
}

.tgt-lp2 .tgt-foto-mosaik > .wp-block-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--tgt-radius-xl);
	box-shadow: var(--tgt-elev-2);
}

/* Ohren und Gesichter liegen im oberen bis mittleren Bilddrittel */
.tgt-lp2 .tgt-foto-mosaik > .wp-block-image:nth-child(2) img {
	object-position: 50% 30%;
}

.tgt-lp2 .tgt-foto-mosaik > .wp-block-image:nth-child(3) img {
	object-position: 50% 40%;
}

.tgt-lp2 .tgt-foto-mosaik::after {
	content: "";
	grid-column: 1 / -1;
	grid-row: 2;
	justify-self: center;
	align-self: start;
	position: relative;
	z-index: 2;
	width: var(--mosaik-scheibe);
	height: var(--mosaik-scheibe);
	margin-top: calc(var(--mosaik-scheibe) / -2 - var(--mosaik-gap) / 2);
	border-radius: 50%;
	background: var(--tgt-teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23fff' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='24' cy='24' r='7.5'/%3E%3Ccircle cx='24' cy='24' r='1.7' fill='%23fff' stroke='none'/%3E%3Cpath d='M24 7v4.5M24 36.5V41M7 24h4.5M36.5 24H41M12 12l3.2 3.2M32.8 15.2 36 12M12 36l3.2-3.2m17.6 0L36 36'/%3E%3C/svg%3E") center / 64% no-repeat;
	box-shadow: 0 0 0 4px #fff, var(--tgt-elev-2);
	pointer-events: none;
}

@media (min-width: 701px) {
	.tgt-lp2 .entry-content > .wp-block-group.tgt-foto-mosaik {
		--mosaik-gap: 16px;
		--mosaik-scheibe: 72px;
	}
}

@media (max-width: 700px) {
	.tgt-lp2 .entry-content > .wp-block-group.tgt-foto-mosaik {
		grid-template-areas:
			"quer-a quer-a"
			"quer-b hoch";
	}
	.tgt-lp2 .tgt-foto-mosaik > .wp-block-image:nth-child(2),
	.tgt-lp2 .tgt-foto-mosaik > .wp-block-image:nth-child(3) {
		aspect-ratio: 1;
	}
	.tgt-lp2 .tgt-foto-mosaik > .wp-block-image img {
		border-radius: var(--tgt-radius-lg);
	}
}

/* Variante "Reihe" (Blutegel): drei Hochformate (3:4). Desktop: drei Spalten, die
   mittlere Kachel etwas nach unten versetzt. Handy: wie das Standard-Mosaik, die
   Fotos werden zugeschnitten (Egel liegen mittig bis im oberen Drittel), ohne Scheibe. */
.tgt-lp2 .tgt-foto-mosaik--reihe::after {
	display: none;
}

.tgt-lp2 .tgt-foto-mosaik--reihe > .wp-block-image:nth-child(1) img {
	object-position: 50% 48%;
}

.tgt-lp2 .tgt-foto-mosaik--reihe > .wp-block-image:nth-child(2) img {
	object-position: 50% 58%;
}

.tgt-lp2 .tgt-foto-mosaik--reihe > .wp-block-image:nth-child(3) img {
	object-position: 50% 40%;
}

/* Zusatz "oben" (Hundefitness): Die Hunde stehen im oberen bis mittleren Bilddrittel.
   Auf dem Handy wird das erste Foto auf Querformat zugeschnitten, dort sonst Kopf angeschnitten. */
.tgt-lp2 .tgt-foto-mosaik--oben > .wp-block-image:nth-child(n) img {
	object-position: 50% 28%;
}

/* Zusatz "ganz-oben" (Massage): Gesichter ganz oben im Bild, Handy-Ausschnitt ab dem oberen Rand */
.tgt-lp2 .tgt-foto-mosaik--ganz-oben > .wp-block-image:nth-child(n) img {
	object-position: 50% 6%;
}

@media (min-width: 701px) {
	.tgt-lp2 .entry-content > .wp-block-group.tgt-foto-mosaik--reihe {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-template-areas: none;
		align-items: start;
	}
	.tgt-lp2 .tgt-foto-mosaik--reihe > .wp-block-image:nth-child(n) {
		grid-area: auto;
		aspect-ratio: 3 / 4;
	}
	.tgt-lp2 .tgt-foto-mosaik--reihe > .wp-block-image:nth-child(2) {
		margin-top: clamp(16px, 3.4vw, 32px);
	}
}

/* Blocksy gibt Kindern im Fliesslayout einen Aussenabstand unten (1,5 em).
   In Raster-Bausteinen verkuerzt er gestreckte Kacheln und reisst die
   Verbindungslinien der Schritte auf. */
.tgt-lp2 .tgt-kopf > *,
.tgt-lp2 .tgt-vorteile > *,
.tgt-lp2 .tgt-schritte > *,
.tgt-lp2 .tgt-quali > *,
.tgt-lp2 .tgt-passt-dazu .tgt-leistung-grid > * {
	margin-block: 0;
}

/* ---------- AKKORDEON: Tastaturfokus sichtbar ---------- */

/* Geschlossen darf der Inhalt keinen Aussenabstand mehr beitragen
   (sonst wirkt die zugeklappte Zeile unten zu hoch) */
.tgt-lp2 .tgt-akkordeon:not([open]) > :not(summary) {
	margin: 0;
}

.tgt-lp2 .tgt-akkordeon summary:focus-visible {
	outline: 3px solid var(--tgt-teal-deep);
	outline-offset: -3px;
}

@media (prefers-reduced-motion: reduce) {
	.tgt-lp2 .tgt-akkordeon summary::after,
	ul.tgt-pillen a {
		transition: none;
	}
}