/* =========================================================
 * 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-display);
	color: var(--tgt-steel);
	line-height: var(--tgt-lh-heading);
	letter-spacing: var(--tgt-ls-tight);
	font-weight: var(--tgt-fw-display);
	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); }
h4 { font-size: var(--tgt-fs-h4); }

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-medium);
	letter-spacing: var(--tgt-ls-kicker);
	text-transform: uppercase;
	color: var(--tgt-teal-deep);
	margin: 0 0 var(--tgt-space-3);
}

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

.tgt-display {
	font-size: var(--tgt-fs-display);
	line-height: var(--tgt-lh-display);
	font-weight: var(--tgt-fw-display);
	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 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-Karten, Tier-Kacheln und Kontaktlisten:
   als Block-Komponenten in blocks.css umgesetzt. */

/* ---------- 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: Blocksy-Theme-Layout (Archiv & Einzelbeitrag) ---------- */
/* Detaillierte Overrides stehen in blocksy-overrides.css.                  */
/* Hier nur allgemeine Selektoren, die themenuebergreifend gelten.          */

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

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

/* ---------- FORMULARE (generisch, gilt auch fuer Contact Form 7) ---------- */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="password"],
input[type="search"],
textarea,
select {
	background: var(--tgt-paper);
	border: 1px solid var(--tgt-line-strong);
	border-radius: var(--tgt-radius-md);
	color: var(--tgt-slate);
	font-family: var(--tgt-font);
	font-size: var(--tgt-fs-body-sm);
	padding: 12px 14px;
	max-width: 100%;
	transition: border-color var(--tgt-dur-base) var(--tgt-ease-out),
	            box-shadow var(--tgt-dur-base) var(--tgt-ease-out);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
	border-color: var(--tgt-steel);
	box-shadow: 0 0 0 3px var(--tgt-steel-tint);
	outline: none;
}

form label {
	font-size: var(--tgt-fs-caption);
	font-weight: var(--tgt-fw-medium);
	color: var(--tgt-slate);
	letter-spacing: 0.02em;
}

::placeholder {
	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;
	}
}