/* =========================================================
 * Tierisch gut therapiert – Basis- & Komponentenstile
 * Setzt das Designsystem auf Element- und Hilfsklassen-Ebene um.
 * ========================================================= */

/* ---------- BASIS ---------- */

html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	background: var(--tgt-mist);
	color: var(--tgt-slate);
	font-family: var(--tgt-font);
	font-size: var(--tgt-fs-body);
	font-weight: var(--tgt-fw-regular);
	line-height: var(--tgt-lh-body);
}

::selection {
	background: var(--tgt-selection-bg);
	color: var(--tgt-selection-fg);
}

a {
	color: var(--tgt-steel);
	text-decoration: none;
	text-underline-offset: 3px;
	text-decoration-thickness: 2px;
	transition: color var(--tgt-dur-base) var(--tgt-ease-out);
}

a:hover {
	color: var(--tgt-steel-deep);
	text-decoration: underline;
}

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

/* ---------- TYPOGRAFIE ---------- */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--tgt-font);
	color: var(--tgt-slate);
	line-height: var(--tgt-lh-heading);
	letter-spacing: var(--tgt-ls-tight);
	font-weight: var(--tgt-fw-light);
	margin: 0 0 var(--tgt-space-4);
	text-wrap: balance;
}

h1 { font-size: var(--tgt-fs-h1); }
h2 { font-size: var(--tgt-fs-h2); }
h3 { font-size: var(--tgt-fs-h3); font-weight: var(--tgt-fw-regular); }
h4 { font-size: var(--tgt-fs-h4); font-weight: var(--tgt-fw-medium); }

p {
	margin: 0 0 var(--tgt-space-4);
	text-wrap: pretty;
}

strong, b { font-weight: var(--tgt-fw-medium); color: var(--tgt-slate); }

small, .tgt-caption {
	font-size: var(--tgt-fs-caption);
	color: var(--tgt-slate-soft);
}

/* ---------- KICKER (kleines Label ueber Ueberschriften) ---------- */

.tgt-kicker,
.tgt-kicker p {
	display: inline-block;
	font-family: var(--tgt-font);
	font-size: var(--tgt-fs-kicker);
	font-weight: var(--tgt-fw-bold);
	letter-spacing: var(--tgt-ls-kicker);
	text-transform: uppercase;
	color: var(--tgt-steel);
	margin: 0 0 var(--tgt-space-3);
}

/* ---------- DISPLAY (nur Hero) ---------- */

.tgt-display,
.tgt-display .elementor-heading-title {
	font-size: var(--tgt-fs-display);
	line-height: var(--tgt-lh-display);
	font-weight: var(--tgt-fw-light);
	letter-spacing: var(--tgt-ls-tight);
}

/* ---------- LEAD-ABSATZ ---------- */

.tgt-lead,
.tgt-lead p {
	font-size: 19px;
	color: var(--tgt-slate-soft);
}

/* ---------- ZITAT ---------- */

.tgt-quote {
	font-style: italic;
	font-weight: var(--tgt-fw-light);
	font-size: 22px;
	line-height: var(--tgt-lh-tight);
	color: var(--tgt-slate);
	border-left: 3px solid var(--tgt-steel);
	padding: var(--tgt-space-2) var(--tgt-space-5);
	max-width: var(--tgt-content-prose);
}

.tgt-quote cite {
	display: block;
	margin-top: var(--tgt-space-3);
	font-style: normal;
	font-size: var(--tgt-fs-caption);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tgt-slate-soft);
}

/* ---------- SEKTIONS-HINTERGRUENDE ---------- */

.tgt-section--tint { background: var(--tgt-steel-tint); }
.tgt-section--paper { background: var(--tgt-paper); }

.tgt-section--dark,
.tgt-section--dark .elementor-heading-title,
.tgt-section--dark h1,
.tgt-section--dark h2,
.tgt-section--dark h3,
.tgt-section--dark p {
	color: var(--tgt-paper);
}
.tgt-section--dark { background: var(--tgt-slate); }
.tgt-section--dark .tgt-kicker { color: var(--tgt-steel-soft); }
.tgt-section--dark a { color: var(--tgt-steel-soft); }

/* ---------- KARTEN ---------- */

.tgt-card {
	background: var(--tgt-paper);
	border: 1px solid var(--tgt-line);
	border-radius: var(--tgt-radius-lg);
	box-shadow: var(--tgt-elev-1);
	transition: transform var(--tgt-dur-slow) var(--tgt-ease-out),
	            box-shadow var(--tgt-dur-slow) var(--tgt-ease-out);
}

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

/* Service-/Bildkarte (Bild + Titel + ein Versprechen) */
.tgt-service-card .elementor-widget-container {
	height: 100%;
}

.tgt-service-card.elementor-widget-image-box .elementor-image-box-wrapper,
.tgt-service-card .elementor-image-box-wrapper {
	background: var(--tgt-paper);
	border: 1px solid var(--tgt-line);
	border-radius: var(--tgt-radius-xl);
	overflow: hidden;
	box-shadow: var(--tgt-elev-1);
	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 .elementor-image-box-wrapper:hover {
	transform: translateY(-2px);
	box-shadow: var(--tgt-elev-2);
}

.tgt-service-card .elementor-image-box-img {
	margin: 0 !important;
	width: 100% !important;
	overflow: hidden;
}

.tgt-service-card .elementor-image-box-img img {
	width: 100%;
	display: block;
	transition: transform var(--tgt-dur-photo) var(--tgt-ease-out);
}

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

.tgt-service-card .elementor-image-box-content {
	padding: var(--tgt-space-5);
	text-align: left;
}

.tgt-service-card .elementor-image-box-title {
	font-size: var(--tgt-fs-h4);
	font-weight: var(--tgt-fw-medium);
	margin-bottom: var(--tgt-space-2);
}

.tgt-service-card .elementor-image-box-description {
	color: var(--tgt-slate-soft);
	font-size: var(--tgt-fs-body-sm);
}

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

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

.tgt-species .elementor-image-box-title {
	font-size: var(--tgt-fs-h4);
	margin-top: var(--tgt-space-4);
	margin-bottom: var(--tgt-space-1);
}

.tgt-species .elementor-image-box-description {
	color: var(--tgt-slate-soft);
	font-size: var(--tgt-fs-body-sm);
}

/* ---------- KONTAKTBLOCK ---------- */

.tgt-contact-block .elementor-icon-list-item {
	margin-bottom: var(--tgt-space-3);
}

.tgt-contact-block .elementor-icon-list-icon i {
	color: var(--tgt-steel);
}

/* ---------- BADGE / PILL ---------- */

.tgt-badge {
	display: inline-block;
	background: var(--tgt-steel-soft);
	color: var(--tgt-steel-deep);
	font-size: var(--tgt-fs-caption);
	font-weight: var(--tgt-fw-medium);
	letter-spacing: 0.02em;
	padding: var(--tgt-space-1) var(--tgt-space-3);
	border-radius: var(--tgt-radius-pill);
}

/* ---------- TRENNLINIE ---------- */

hr,
.tgt-divider {
	border: 0;
	border-top: 1px solid var(--tgt-line);
	margin: var(--tgt-space-7) 0;
}

/* ---------- BLOG: natives Theme-Layout (Archiv & Einzelbeitrag) ---------- */
/* Blog-Archiv und Beitraege werden vom Theme gerendert (ohne Elementor).  */

.archive .site-main,
.blog .site-main,
.single .site-main,
.search .site-main {
	max-width: var(--tgt-content-max);
	margin: 0 auto;
	padding: var(--tgt-space-9) var(--tgt-space-5);
}

.archive .site-main article,
.blog .site-main article,
.search .site-main article {
	background: var(--tgt-paper);
	border: 1px solid var(--tgt-line);
	border-radius: var(--tgt-radius-lg);
	box-shadow: var(--tgt-elev-1);
	padding: var(--tgt-space-6);
	margin-bottom: var(--tgt-space-6);
	transition: transform var(--tgt-dur-slow) var(--tgt-ease-out),
	            box-shadow var(--tgt-dur-slow) var(--tgt-ease-out);
}

.archive .site-main article:hover,
.blog .site-main article:hover {
	transform: translateY(-2px);
	box-shadow: var(--tgt-elev-2);
}

.entry-title a {
	color: var(--tgt-slate);
}
.entry-title a:hover {
	color: var(--tgt-steel);
}

.single .site-main {
	max-width: 760px;
}

.single .entry-content {
	font-size: var(--tgt-fs-body);
	line-height: var(--tgt-lh-body);
}

.entry-meta,
.posted-on,
.byline {
	font-size: var(--tgt-fs-meta);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tgt-slate-mute);
}

/* ---------- BARRIEREFREIHEIT: Fokus ---------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid var(--tgt-steel);
	outline-offset: 2px;
}

/* ---------- REDUZIERTE BEWEGUNG ---------- */

@media (prefers-reduced-motion: reduce) {
	* {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}