/* =========================================================
 * Tierisch gut therapiert – Blocksy-Overrides
 *
 * 1. Blocksy-Palette-Variablen auf TGT-Design-Tokens mappen
 * 2. Header- & Footer-Feinanpassungen
 * 3. Blog/Archiv-Layout fuer Blocksy-Klassen
 * 4. Mobiler Bottom-CTA-Bar
 * ========================================================= */

/* ---------- 1. BLOCKSY-PALETTE ↔ TGT-TOKENS ---------- */
/*
 * Die Blocksy-Palette (Customizer → Allgemein → Farben) ist die
 * Quelle der 8 Kernfarben. design-tokens.css liest sie ueber
 * var(--theme-palette-color-N) ein – Farbaenderungen im Customizer
 * wirken damit auf das gesamte Designsystem. Hier werden nur noch
 * Blocksys Link-/Button-Variablen auf die Tokens gemappt.
 */
/* `html:root` statt `:root`: Blocksy setzt dieselben Variablen noch einmal
   in seinem dynamischen Inline-CSS (`ct-main-styles-inline-css`), das NACH
   dieser Datei im Dokument steht. Bei gleicher Spezifitaet gewinnt dort das
   spaetere — mit dem Element davor liegen wir eine Stufe hoeher und die
   Werte halten. */
html:root {
	/* Blocksy-Link-Farben */
	--theme-link-initial-color: var(--tgt-steel);
	--theme-link-hover-color:   var(--tgt-steel-deep);

	/* Blocksy-Button */
	--theme-button-background-initial-color: var(--tgt-steel);
	--theme-button-background-hover-color:   var(--tgt-steel-deep);
	--theme-button-text-initial-color:       #ffffff;
	--theme-button-text-hover-color:         #ffffff;
	--theme-button-border-radius:            999px;
	/* EINE Buttonhoehe fuer die ganze Seite: 8+26+8 + 2×2px Rand = 46px.
	   Ueber 44px, also auch mobil bequem zu treffen, aber deutlich ruhiger
	   als die frueheren 56px.
	   ⚠️ Muss die Blocksy-VARIABLE sein, nicht `padding` in blocks.css:
	   Blocksys Outline-Regel ist spezifischer und hat unsere 13px/26px
	   ueberstimmt — gefuellte Buttons waren 56px hoch, Outline-Buttons nur
	   40px. Ueber die Variable greifen beide Varianten denselben Wert. */
	--theme-button-padding:                  8px 24px;
}

/* ---------- 2. BLOCKSY HEADER ---------- */

/* Utility-Bar: obere Zeile (Navy – zitiert den Fensterstreifen) */
.ct-header-top-bar {
	background: var(--tgt-steel) !important;
	color: #fff;
	font-size: 13px;
}

.ct-header-top-bar a {
	color: var(--tgt-paper);
}

.ct-header-top-bar a:hover {
	color: var(--tgt-steel-soft);
	text-decoration: none;
}

/* Haupt-Header: klare weiße Leiste mit Haarlinie (wie im Mockup) */
header.ct-header {
	background: rgba(255, 255, 255, 0.97) !important;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--tgt-line);
}

/* Blocksy-Header-Rows (auch die mobile Zeile) ohne eigenen Hintergrund,
   damit ueberall die weisse Leiste durchscheint. --height steuert Blocksys
   Zeilenhoehe (Standard 120px) — kompakter auf 84px. */
header.ct-header [data-row] {
	background: transparent !important;
	--height: 84px !important; /* Blocksy setzt die Variable inline */
}

@media (max-width: 767px) {
	header.ct-header [data-row] {
		--height: 72px !important;
	}
}

/* Sticky-Header ab Tablet: bleibt beim Scrollen oben (die Kontaktzeile
   darunter scrollt weg). Auf Smartphones nicht sticky – dort gibt es die
   Bottom-CTA-Bar.
   WICHTIG: Blocksys #main-container hat overflow:clip (bricht sticky) und
   setzt position:relative auf den Header — beides wird hier neutralisiert;
   overflow-x bleibt geclippt (alignfull), nur vertikal wieder visible. */
#main-container {
	overflow-x: clip;
	overflow-y: visible;
}

@media (min-width: 768px) {
	header.ct-header {
		position: sticky !important;
		top: 0;
		z-index: 99;
	}

	body.admin-bar header.ct-header {
		top: 32px;
	}
}

/* Wort-Bild-Marke: Bildmarke links, daneben zweizeiliger Schriftzug
   (Name + Tagline). Ueberschreibt Blocksys data-logo="top"-Stapelung. */
.site-branding {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 14px;
}

.site-branding .site-logo-container {
	flex-shrink: 0;
	display: block;
}

.site-branding .site-logo-container img {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	transition: transform var(--tgt-dur-slow) var(--tgt-ease-out);
}

.site-branding:hover .site-logo-container img {
	transform: rotate(-4deg) scale(1.04);
}

.site-branding .site-title-container {
	min-width: 0;
}

.site-branding .site-title {
	display: block;
	line-height: 1;
}

.site-branding .site-title a {
	display: inline-block;
	font-family: var(--tgt-font-display);
	font-weight: var(--tgt-fw-display);
	font-size: 19px;
	letter-spacing: var(--tgt-ls-tight);
	line-height: 1.1;
	color: var(--tgt-steel);
	text-decoration: none;
	transition: color var(--tgt-dur-base) var(--tgt-ease-out);
}

.site-branding .site-title a:hover {
	color: var(--tgt-teal-deep);
}

/* Tagline als zweite Zeile der Marke (wie im Mockup: normal gesetzt) */
.site-branding .site-title a::after {
	content: var(--tgt-brand-tagline, "Tierphysiotherapie & Osteopathie");
	display: block;
	font-family: var(--tgt-font);
	font-size: 12px;
	font-weight: var(--tgt-fw-regular);
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--tgt-slate-soft);
	margin-top: 3px;
}

@media (max-width: 767px) {
	.site-branding {
		gap: 12px;
	}

	.site-branding .site-logo-container img {
		width: 48px;
		height: 48px;
	}

	.site-branding .site-title a {
		font-size: 18px;
	}

	.site-branding .site-title a::after {
		font-size: 10px;
		letter-spacing: 0.12em;
		margin-top: 3px;
	}
}

/* Startseite: kein Blocksy-Leerraum zwischen Header und Hero */
body.home .site-main {
	row-gap: 0;
	--content-vertical-spacing: 0px;
}

body.home .site-main > article {
	margin-block: 0;
}

/* Blocksys Content-Innenabstand (60px) entfaellt auf der Startseite —
   der Hero bringt seinen eigenen Abstand mit. Gleiches gilt fuer Seiten,
   auf denen der Titelbereich abgeschaltet ist (siehe functions.php,
   tgt_seiten_ohne_titelbereich): dort beginnt der Inhalt mit einer eigenen
   Sektion, die ihren Abstand selbst mitbringt. */
body.home .ct-container-full,
body.tgt-ohne-titelbereich .ct-container-full {
	padding-top: 0;
}

/* Ausnahme: Beginnt der Inhalt einer solchen Seite mit einer schlichten H1
   statt mit einer Sektion (zum Beispiel die Buchungsseite), fehlt der
   Abstand, den sonst die Sektion mitbringt — die Ueberschrift klebte unter
   der Kontaktzeile. Dann gelten dieselben Abstaende wie auf den uebrigen
   Seiten: Blocksys Innenabstand oben (60px, mobil 50px) und 40px zwischen
   Titel und Inhalt. */
body.tgt-ohne-titelbereich .ct-container-full:has(.entry-content > h1.wp-block-heading:first-child) {
	padding-top: var(--theme-content-vertical-spacing, 60px);
}

body.tgt-ohne-titelbereich .entry-content > h1.wp-block-heading:first-child {
	margin-bottom: 40px;
}

/* Navigations-Links (Blocksy-Markup: nav.header-menu-N > ul.menu).
   Wie im Mockup: normale Groß-/Kleinschreibung, ruhige Hover-Fläche.
   Kompakt genug, damit alle 8 Top-Level-Punkte bei 1280px passen. */
nav[class*="header-menu"] > ul > li > a {
	/* !important gegen Blocksys dynamisches Typografie-CSS (Projektmuster) */
	font-family: var(--tgt-font) !important;
	font-weight: var(--tgt-fw-medium) !important;
	font-size: 14.5px !important;
	letter-spacing: 0.01em;
	text-transform: none !important;
	color: var(--tgt-slate);
	/* Blocksy zieht die Anker auf volle Zeilenhoehe (height: var(--height))
	   — der Hover-Kasten wirkte dadurch wie ein riesiger Block. Kompakte,
	   vertikal zentrierte Pille stattdessen: */
	height: auto !important;
	padding-block: 8px !important;
	padding-inline: 10px !important;
	border-radius: var(--tgt-radius-sm);
	transition: color var(--tgt-dur-base) var(--tgt-ease-out),
	            background-color var(--tgt-dur-base) var(--tgt-ease-out);
}

/* Volle Zeilenhoehe bleibt Hover-Zone (Dropdown klappt ohne Luecke) */
nav[class*="header-menu"] > ul > li {
	height: var(--height);
	align-items: center;
}

nav[class*="header-menu"] > ul > li > a:hover {
	color: var(--tgt-steel);
	background: var(--tgt-steel-tint);
}

/* Pfeil bei Punkten mit Untermenue (z. B. "Leistungen"): Blocksy gibt dem
   Pfeil-Span 24 x 24 px (--toggle-button-size). Das machte den Anker 40 statt
   34,8 px hoch, und die Hover-Pille von "Leistungen" ragte ueber die der
   uebrigen Punkte hinaus. Negative Aussenabstaende oben und unten nehmen dem
   Anker die Mehrhoehe, der Pfeil bleibt mittig und die Treffflaeche gleich. */
nav[class*="header-menu"] a .ct-toggle-dropdown-desktop {
	margin-block: -6px;
}

nav[class*="header-menu"] > ul > li.current-menu-item > a {
	color: var(--tgt-steel);
}

/* KONTRAST (09.10.2026): Blocksys Variable --theme-text-color zeigt hier auf
   Palettenfarbe 3 (Cyan, nur 2,7:1 auf Weiss). Die Slate-Vorgabe oben verliert
   gegen Blocksys spezifischere Regel `nav[class*="menu"] .ct-menu-link`, die
   var(--theme-link-initial-color) liest — also die Variable direkt setzen
   (html:root schlaegt das Inline-CSS von Blocksy). Gewaehlt (User, 09.10.2026):
   dunkles Cyan #0C6E9F, 5,6:1 auf Weiss; die Cyan-Anmutung bleibt. Alternative
   waere Slate (var(--tgt-slate)) wie im Mockup, 11,9:1. Der aktive Punkt
   bekommt die Schleier-Pille wie im Mobilmenue. */
html:root .ct-header [data-id="menu"] > ul > li:not(.tgt-menu-cta) > a {
	--theme-link-initial-color: var(--tgt-teal-deep);
	--theme-link-hover-color: var(--tgt-steel);
}

/* Der Termin-Button (tgt-menu-cta) bleibt Navy, auch auf seiner eigenen Seite */
html:root nav[class*="header-menu"] > ul > li.current-menu-item:not(.tgt-menu-cta) > a,
html:root nav[class*="header-menu"] > ul > li.current-menu-ancestor:not(.tgt-menu-cta) > a {
	background: var(--tgt-steel-tint);
}

/* Suche im Header ausblenden (Mockup-Header: Logo + Navigation + Button;
   wieder aktivierbar über Customizer → Header) */
.ct-header [data-id="search"] {
	display: none;
}

/* Dropdown-Menü: heller Stil. Zwei Spalten NUR auf der zweiten Ebene
   (viele Behandlungen); die dritte Ebene ("Für Pferde") ist ein schmales
   einspaltiges Flyout — deshalb `> li >` statt Nachfahren-Selektor. */
nav[class*="header-menu"] .sub-menu {
	background: var(--tgt-paper) !important;
	border: 1px solid var(--tgt-line);
	border-radius: var(--tgt-radius-lg);
	box-shadow: var(--tgt-elev-3);
	padding: var(--tgt-space-3);
}

nav[class*="header-menu"] > ul > li > .sub-menu {
	/* 620 px: "Triggerpunkttherapie mit Dry Needling" (254 px Text + 28 px
	   Innenabstand) bricht bei 560 px in zwei Zeilen um und ist dann 23 px
	   hoeher als jede andere Zeile. */
	min-width: 620px;
	column-count: 2;
	column-gap: var(--tgt-space-2);
}

/* Dritte Ebene: schmales Flyout, einspaltig */
nav[class*="header-menu"] .sub-menu .sub-menu {
	min-width: 250px;
	column-count: 1;
	/* FLACKERN BEI "FUER PFERDE" (12.10.2026): Blocksy setzt beim INAKTIVEN
	   Flyout `overflow: hidden; max-height`, beim aktiven `overflow: visible`.
	   Das Flyout liegt absolut im zweispaltigen Dropdown; mit `visible` rechnet
	   der Browser seine Hoehe in die Spaltenverteilung ein und schiebt einen
	   Punkt von Spalte 2 nach Spalte 1. "Fuer Pferde" sprang dadurch beim Hover
	   eine Zeile nach oben, der Zeiger lag daneben, die Aktivierung fiel weg,
	   die Zeile sprang zurueck — im Takt von rund 100 ms. In beiden Zustaenden
	   gleich sichtbar gesetzt bleibt die Verteilung stabil. Das Flyout selbst
	   ist unsichtbar und nicht klickbar, solange es inaktiv ist. */
	overflow: visible !important;
	max-height: none !important;
}

nav[class*="header-menu"] .sub-menu li {
	break-inside: avoid;
}

nav[class*="header-menu"] .sub-menu a {
	font-size: 14px;
	color: var(--tgt-slate) !important;
	padding: 9px 14px;
	border-radius: var(--tgt-radius-sm);
}

nav[class*="header-menu"] .sub-menu a:hover {
	background: var(--tgt-steel-tint);
	color: var(--tgt-steel) !important;
}

/* "Für Pferde" im Dropdown: Cyan-Schrift + Trennlinie, hebt die
   Pferde-Gruppe von den uebrigen Behandlungen ab (Klasse tgt-menu-pferde) */
nav[class*="header-menu"] .sub-menu li.tgt-menu-pferde {
	border-top: 1px solid var(--tgt-line);
	margin-top: 6px;
	padding-top: 6px;
}

nav[class*="header-menu"] .sub-menu li.tgt-menu-pferde > a,
nav[class*="header-menu"] .sub-menu li.tgt-menu-pferde > .ct-sub-menu-parent > a {
	color: var(--tgt-teal-deep) !important;
	font-weight: var(--tgt-fw-medium);
}

/* "Preise" im Leistungen-Dropdown farblich abgesetzt (Menuepunkt traegt
   unter Design → Menues die CSS-Klasse tgt-menu-preise) */
nav[class*="header-menu"] .sub-menu li.tgt-menu-preise {
	border-top: 1px solid var(--tgt-line);
	margin-top: 6px;
	padding-top: 6px;
}

nav[class*="header-menu"] .sub-menu li.tgt-menu-preise > a {
	color: var(--tgt-teal-deep) !important;
	font-weight: var(--tgt-fw-medium);
}

nav[class*="header-menu"] .sub-menu li.tgt-menu-preise > a:hover {
	color: var(--tgt-steel) !important;
}

/* "Preise" auch im mobilen Menue abgesetzt: Cyan-Schrift auf hellem
   Schleier mit Trennlinie darueber — analog zum Desktop-Dropdown */
#offcanvas nav.mobile-menu li.tgt-menu-preise {
	border-top: 1px solid var(--tgt-line);
	margin-top: 8px;
	padding-top: 8px;
}

#offcanvas nav.mobile-menu li.tgt-menu-preise > a {
	color: var(--tgt-teal-deep) !important;
	background: var(--tgt-steel-tint);
	border-radius: var(--tgt-radius-sm);
	padding: 8px 12px !important;
	margin-inline: -12px;
	display: inline-block;
}

/* Dritte Ebene "Für Pferde": im Offcanvas als eingerueckte Gruppe mit
   Cyan-Fuehrungslinie, damit die Pferde-Leistungen sichtbar zusammengehoeren.
   ACHTUNG: Blocksy wickelt Punkte MIT Untermenue in
   <span class="ct-sub-menu-parent"> — daher kein `> a`, sondern der
   Nachfahren-Selektor auf den ersten Anker. */
#offcanvas nav.mobile-menu li.tgt-menu-pferde > a,
#offcanvas nav.mobile-menu li.tgt-menu-pferde > .ct-sub-menu-parent > a {
	color: var(--tgt-teal-deep) !important;
	font-weight: var(--tgt-fw-medium);
}

#offcanvas nav.mobile-menu li.tgt-menu-pferde {
	border-top: 1px solid var(--tgt-line);
	margin-top: 8px;
	padding-top: 8px;
}

#offcanvas nav.mobile-menu li.tgt-menu-pferde .sub-menu {
	margin-left: 10px;
	padding-left: 12px;
	border-left: 2px solid var(--tgt-steel-soft);
}

/* CTA-Button "Termin buchen" im Header */
.ct-header .ct-header-button a,
.ct-header .wp-block-button__link {
	background: var(--tgt-steel) !important;
	color: #fff !important;
	border-radius: var(--tgt-radius-pill);
	font-weight: var(--tgt-fw-bold);
	font-size: 14px;
	padding: 10px 20px;
	border: none;
	transition: background var(--tgt-dur-base) var(--tgt-ease-out);
}

.ct-header .ct-header-button a:hover {
	background: var(--tgt-steel-deep) !important;
}

/* Mobiles Hamburger-Menü */
.ct-toggle-dropdown-menu-trigger,
.ct-toggle-dropdown-menu-trigger:hover {
	color: var(--tgt-slate);
}

/* Offcanvas-/Drawer-Menü mobil (Blocksy-Markup: #offcanvas, nav.mobile-menu).
   Helles Panel im Himmelblau-Look statt Blocksys dunklem Standard —
   !important gegen Blocksys Panel-Farbvariablen. */
#offcanvas .ct-panel-inner {
	background: #fff !important;
}

/* Schliessen-X. Zwei Blocksy-Eigenheiten auf einmal:
   1. Das SVG haengt an --theme-icon-color (Standard 70 % Weiss) — reines
      `color` erreicht das Icon NICHT.
   2. Groesse, Radius und Flaeche kommen aus --toggle-button-*. Setzt man
      stattdessen `background`/`border-radius` direkt, gewinnt trotz hoeherer
      Spezifitaet Blocksys Variablen-Regel und der Button bleibt eckig. */
#offcanvas .ct-toggle-close {
	--theme-icon-color: var(--tgt-steel);
	--theme-icon-hover-color: var(--tgt-steel-deep);
	--toggle-button-size: 42px;
	--toggle-button-radius: 50%;
	--toggle-button-background: var(--tgt-steel-tint);
	color: var(--tgt-steel) !important;
}

#offcanvas .ct-toggle-close svg,
#offcanvas .ct-toggle-close .ct-icon {
	fill: var(--tgt-steel) !important;
	width: 15px;
	height: 15px;
}

#offcanvas .ct-toggle-close:hover {
	--toggle-button-background: var(--tgt-steel-soft);
}

#offcanvas .ct-toggle-close:hover svg,
#offcanvas .ct-toggle-close:hover .ct-icon {
	fill: var(--tgt-steel-deep) !important;
}

/* Aufklapp-Pfeil bei Punkten mit Untermenue (z. B. "Leistungen").
   Gleicher Blocksy-Fallstrick wie beim Schliessen-X: das SVG haengt an
   --theme-icon-color (70 % Weiss) und war auf dem hellen Panel unsichtbar.
   Der Pfeil ist die EINZIGE Anzeige, dass ein Punkt Unterpunkte hat — er
   braucht daher sichtbaren Kontrast und ein Tap-Ziel von mindestens 40 px. */
#offcanvas nav.mobile-menu .ct-toggle-dropdown-mobile {
	--theme-icon-color: var(--tgt-steel);
	--theme-icon-hover-color: var(--tgt-steel-deep);
	--toggle-button-size: 40px;
	--toggle-button-radius: 50%;
	--toggle-button-background: var(--tgt-steel-tint);
	--toggle-button-margin-start: auto;
	--toggle-button-margin-end: 0;
}

#offcanvas nav.mobile-menu .ct-toggle-dropdown-mobile svg,
#offcanvas nav.mobile-menu .ct-toggle-dropdown-mobile .ct-icon {
	fill: var(--tgt-steel) !important;
	width: 14px;
	height: 14px;
	transition: transform var(--tgt-dur-base) var(--tgt-ease-out);
}

/* Aufgeklappt: Flaeche kraeftiger, Pfeil zeigt nach oben */
#offcanvas nav.mobile-menu .ct-toggle-dropdown-mobile[aria-expanded="true"] {
	--toggle-button-background: var(--tgt-steel-soft);
}

#offcanvas nav.mobile-menu .ct-toggle-dropdown-mobile[aria-expanded="true"] svg,
#offcanvas nav.mobile-menu .ct-toggle-dropdown-mobile[aria-expanded="true"] .ct-icon {
	transform: rotate(180deg);
}

/* Zeile mit Pfeil: Text links, Pfeil rechts am Rand */
#offcanvas nav.mobile-menu .ct-sub-menu-parent {
	display: flex;
	align-items: center;
	gap: var(--tgt-space-2);
	width: 100%;
}

/* Gleiche Zeilenhoehe pro Ebene, ob aktiv oder nicht. Vorher war der aktive
   Punkt (Pille mit 8 px Innenabstand) 6 px hoeher als die uebrigen (5 px) und
   "Leistungen" mit dem 40-px-Pfeil 2 px: die Liste sprang. Hauptebene: 44 px
   (bequemes Tippziel). Unterebene: aktiver Punkt wieder 5 px, also 38 px wie
   die uebrigen; "Preise" bleibt als abgesetzte Pille bewusst hoeher. */
#offcanvas nav.mobile-menu > ul > li:not(.tgt-menu-cta) > a,
#offcanvas nav.mobile-menu > ul > li:not(.tgt-menu-cta) > .ct-sub-menu-parent {
	min-height: 44px;
	align-items: center;
}

#offcanvas nav.mobile-menu .sub-menu li.current-menu-item:not(.tgt-menu-preise) > a,
#offcanvas nav.mobile-menu .sub-menu li.current_page_item:not(.tgt-menu-preise) > a,
#offcanvas nav.mobile-menu .sub-menu li.current-menu-ancestor:not(.tgt-menu-preise) > a,
#offcanvas nav.mobile-menu .sub-menu li.current-menu-item:not(.tgt-menu-preise) > .ct-sub-menu-parent > a,
#offcanvas nav.mobile-menu .sub-menu li.current-menu-ancestor:not(.tgt-menu-preise) > .ct-sub-menu-parent > a {
	padding-block: 5px !important;
}

@media (prefers-reduced-motion: reduce) {
	#offcanvas nav.mobile-menu .ct-toggle-dropdown-mobile,
	#offcanvas nav.mobile-menu .ct-toggle-dropdown-mobile svg,
	#offcanvas nav.mobile-menu .ct-toggle-dropdown-mobile .ct-icon {
		transition: none;
	}
}

#offcanvas nav.mobile-menu a {
	font-family: var(--tgt-font);
	font-weight: var(--tgt-fw-medium);
	color: var(--tgt-slate) !important;
	font-size: 17px;
}

#offcanvas nav.mobile-menu a:hover {
	color: var(--tgt-steel) !important;
}

/* Aktiver Menüpunkt: Navy auf heller Cyan-Fläche — klar abgesetzt.
   Punkte MIT Untermenü tragen ihren Anker in <span class="ct-sub-menu-parent">,
   brauchen also die zusaetzliche Kind-Ebene im Selektor. */
#offcanvas nav.mobile-menu li.current-menu-item > a,
#offcanvas nav.mobile-menu li.current_page_item > a,
#offcanvas nav.mobile-menu li.current-menu-ancestor > a,
#offcanvas nav.mobile-menu li.current-menu-item > .ct-sub-menu-parent > a,
#offcanvas nav.mobile-menu li.current_page_item > .ct-sub-menu-parent > a,
#offcanvas nav.mobile-menu li.current-menu-ancestor > .ct-sub-menu-parent > a {
	color: var(--tgt-steel) !important;
	background: var(--tgt-steel-tint);
	border-radius: var(--tgt-radius-sm);
	padding: 8px 12px !important;
	margin-inline: -12px;
}

/* ---------- 3. TGT-FOOTER (aus functions.php, Widgets Area 1–3) ---------- */

/* Blocksy-Standard-Footer ausblenden – der TGT-Footer wird per Hook gerendert */
footer.ct-footer {
	display: none;
}

.tgt-footer {
	background: var(--tgt-steel-tint);
	color: var(--tgt-slate);
	border-top: 1px solid var(--tgt-line);
	margin-top: 0;
}

.tgt-footer__columns {
	max-width: var(--tgt-content-max);
	margin: 0 auto;
	padding: 44px var(--tgt-space-5) 40px;
	display: grid;
	grid-template-columns: 1.25fr 1fr 1fr 0.85fr;
	gap: var(--tgt-space-6);
}

@media (max-width: 1000px) {
	.tgt-footer__columns {
		grid-template-columns: 1fr 1fr;
		gap: var(--tgt-space-5) var(--tgt-space-6);
	}
}

@media (max-width: 600px) {
	.tgt-footer__columns {
		grid-template-columns: 1fr;
		padding: 32px var(--tgt-space-5) 28px;
		gap: var(--tgt-space-5);
	}
}

.tgt-footer__col .widget-title,
.tgt-footer__col h2,
.tgt-footer__col h3 {
	font-family: var(--tgt-font-display);
	font-weight: var(--tgt-fw-display);
	font-size: 17px;
	color: var(--tgt-steel);
	margin: 0 0 var(--tgt-space-3);
}

.tgt-footer__col p,
.tgt-footer__col address,
.tgt-footer__col li {
	color: var(--tgt-slate);
	font-size: 14px;
	line-height: 1.6;
}

/* Absatz-Abstaende im Footer eng halten (globale p-Margins aufheben) */
.tgt-footer__col p {
	margin: 0 0 10px;
}

.tgt-footer__col p:last-child {
	margin-bottom: 0;
}

/* Behandlungszeiten: eine Zeile je Eintrag – Tag links, Zeit rechts */
.tgt-footer__hours {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--tgt-space-3);
	max-width: 300px;
	margin: 0 0 6px;
}

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

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

.tgt-footer__col li {
	margin-bottom: var(--tgt-space-2);
}

.tgt-footer__col i {
	margin-right: 6px;
	opacity: 0.75;
}

.tgt-footer a {
	color: var(--tgt-slate);
	text-decoration: none;
}

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

/* Telefon und E-Mail im Footer: Tippflaeche mindestens 24 px hoch
   (WCAG 2.5.8; die Zeilen waren nur 17 px hoch). Die Zeilenhoehe waechst
   dadurch um etwa 7 px je Eintrag, die <br> bleiben. */
.tgt-footer__col p:not(.tgt-footer__routen) > a {
	display: inline-block;
	min-height: 24px;
	padding-block: 2px;
	line-height: 20px;
}

/* Icons in den Kontaktzeilen: Cyan-Akzent */
.tgt-footer__col i {
	color: var(--tgt-teal-deep);
}

/* Routen-Links (Google/Apple Maps — Daten fliessen erst beim Klick) */
.tgt-footer__routen {
	font-size: 13px;
	color: var(--tgt-slate-soft);
}

.tgt-footer__routen a {
	color: var(--tgt-teal-deep);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

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

/* Social-Zeilen in der "Folge mir"-Spalte */
.tgt-footer__social-row {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 10px;
}

.tgt-footer__social-row i {
	width: 18px;
	text-align: center;
	font-size: 15px;
}

/* Copyright-Zeile */
.tgt-footer__bottom-bar {
	background: transparent;
	border-top: 1px solid var(--tgt-line);
}

.tgt-footer__bottom {
	max-width: var(--tgt-content-max);
	margin: 0 auto;
	padding: 14px var(--tgt-space-5);
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--tgt-space-2);
	font-size: 12px;
	color: var(--tgt-slate-soft);
}

.tgt-footer__bottom a {
	color: var(--tgt-slate-soft);
}

/* ---------- 4. BLOCKSY BLOG/ARCHIV ---------- */

/* Archiv-Container */
.ct-container.ct-blog {
	max-width: var(--tgt-content-max);
	margin: 0 auto;
	padding: var(--tgt-space-9) var(--tgt-space-5);
}

/* Einzelne Beitrags-Karte */
.ct-blog article.type-post,
.ct-post-card {
	background: var(--tgt-paper);
	border: 1px solid var(--tgt-line);
	border-radius: var(--tgt-radius-lg);
	box-shadow: var(--tgt-elev-1);
	overflow: hidden;
	transition: transform var(--tgt-dur-slow) var(--tgt-ease-out),
	            box-shadow var(--tgt-dur-slow) var(--tgt-ease-out);
}

.ct-blog article.type-post:hover,
.ct-post-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--tgt-elev-2);
}

/* Beitragstitel im Archiv */
.ct-blog .entry-title a,
.ct-post-card .entry-title a {
	font-family: var(--tgt-font);
	font-weight: var(--tgt-fw-medium);
	font-size: var(--tgt-fs-h3);
	color: var(--tgt-slate);
	text-decoration: none;
}

.ct-blog .entry-title a:hover,
.ct-post-card .entry-title a:hover {
	color: var(--tgt-steel);
}

/* Meta (Datum, Kategorie) */
.ct-blog .ct-meta,
.ct-post-card .ct-meta,
.entry-meta {
	font-size: var(--tgt-fs-meta);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tgt-slate-mute);
}

/* Auszug */
.ct-blog .entry-summary,
.ct-post-card .entry-summary {
	font-size: var(--tgt-fs-body-sm);
	color: var(--tgt-slate-soft);
	line-height: var(--tgt-lh-body);
}

/* Weiterlesen-Link */
.ct-blog .more-link,
.ct-blog .ct-more-link {
	color: var(--tgt-steel);
	font-weight: var(--tgt-fw-medium);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.ct-blog .more-link:hover,
.ct-blog .ct-more-link:hover {
	color: var(--tgt-steel-deep);
}

/* Paginierung */
.ct-blog .pagination .page-numbers,
.ct-pagination .page-numbers {
	background: var(--tgt-paper);
	border: 1px solid var(--tgt-line);
	border-radius: var(--tgt-radius-md);
	color: var(--tgt-slate);
	padding: 8px 14px;
	transition: background var(--tgt-dur-base) var(--tgt-ease-out);
}

.ct-blog .pagination .page-numbers:hover,
.ct-blog .pagination .page-numbers.current {
	background: var(--tgt-steel);
	color: #fff;
	border-color: var(--tgt-steel);
}

/* Einzelbeitrag: Lesespalte wie auf den Detailseiten (840px) statt Blocksys
   750px. Die Variable steuert nur den Beitragsinhalt (Titelbereich und
   Text). Frueher stand hier `.single .ct-container { max-width: 760px }` —
   die Regel traf auch die Container von Header und Footer und quetschte
   Logo und Menue auf 760px zusammen. */
body.single-post {
	--theme-narrow-container-max-width: 840px;
}

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

/* ---------- 5. TGT-BLOG-GRID (Shortcode-Ausgabe) ---------- */

.tgt-blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	width: 100%;
}

.tgt-blog-card {
	background: #fff;
	border-top: 4px solid var(--tgt-teal);
	border-radius: var(--tgt-radius-lg);
	box-shadow: var(--tgt-elev-1);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform var(--tgt-dur-slow) var(--tgt-ease-out),
	            box-shadow var(--tgt-dur-slow) var(--tgt-ease-out);
}

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

.tgt-blog-card__img {
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 9;
}

.tgt-blog-card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--tgt-dur-photo) var(--tgt-ease-out);
}

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

.tgt-blog-card__body {
	padding: 20px 22px 24px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.tgt-blog-card__meta {
	align-self: flex-start;
	font-size: var(--tgt-fs-caption);
	font-weight: var(--tgt-fw-medium);
	background: var(--tgt-steel-soft);
	color: var(--tgt-teal-deep);
	padding: 3px 12px;
	border-radius: var(--tgt-radius-pill);
	margin-bottom: 10px;
}

.tgt-blog-card__title {
	font-family: var(--tgt-font-display);
	font-size: var(--tgt-fs-h3);
	font-weight: var(--tgt-fw-display);
	margin: 0 0 10px;
	line-height: var(--tgt-lh-tight);
}

.tgt-blog-card__title a {
	color: var(--tgt-steel);
	text-decoration: none;
}

.tgt-blog-card__title a:hover {
	color: var(--tgt-teal-deep);
}

.tgt-blog-card__excerpt {
	font-size: var(--tgt-fs-body-sm);
	color: var(--tgt-slate-soft);
	line-height: var(--tgt-lh-body);
	margin: 0 0 14px;
	flex: 1;
}

.tgt-blog-card__read {
	color: var(--tgt-steel);
	font-weight: var(--tgt-fw-medium);
	font-size: 14px;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	align-self: flex-start;
}

.tgt-blog-card__read:hover {
	color: var(--tgt-steel-deep);
}

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

/* ---------- 6. MOBILER BOTTOM-CTA-BAR ---------- */

.tgt-mobile-cta {
	display: none; /* standardmaessig versteckt */
}

@media (max-width: 767px) {
	.tgt-mobile-cta {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 9999;
		background: var(--tgt-paper);
		border-top: 1px solid var(--tgt-line);
		box-shadow: 0 -4px 16px rgba(46, 58, 68, 0.10);
		height: 60px;
	}

	.tgt-mobile-cta__btn {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		text-decoration: none;
		font-family: var(--tgt-font);
		font-size: 11px;
		font-weight: var(--tgt-fw-medium);
		color: var(--tgt-slate);
		transition: background var(--tgt-dur-fast) var(--tgt-ease-out),
		            color var(--tgt-dur-fast) var(--tgt-ease-out);
	}

	.tgt-mobile-cta__btn i {
		font-size: 20px;
		line-height: 1;
	}

	.tgt-mobile-cta__btn:hover,
	.tgt-mobile-cta__btn:active {
		background: var(--tgt-steel-tint);
		color: var(--tgt-steel);
	}

	.tgt-mobile-cta__btn--phone  i { color: var(--tgt-steel); }
	.tgt-mobile-cta__btn--whatsapp i { color: #25D366; }
	.tgt-mobile-cta__btn--booking  i { color: var(--tgt-teal); }

	/* Seiteninhalt nach oben schieben, damit CTA-Bar nichts ueberdeckt */
	body {
		padding-bottom: 60px;
	}

	/* Admin-Bar-Versatz */
	body.admin-bar .tgt-mobile-cta {
		bottom: 46px;
	}
}

/* ---------- 7. UTILITY-BAR (oberhalb des Headers, ab Tablet) ---------- */

.tgt-utility-bar {
	display: none;
}

@media (min-width: 768px) {
	.tgt-utility-bar {
		display: block;
		background: var(--tgt-slate);
		color: var(--tgt-paper);
		font-size: 13px;
	}

	.tgt-utility-bar__inner {
		max-width: var(--tgt-content-max);
		margin: 0 auto;
		padding: 9px var(--tgt-space-5);
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: var(--tgt-space-4);
	}

	.tgt-utility-bar a {
		color: var(--tgt-paper);
		text-decoration: none;
		transition: color var(--tgt-dur-base) var(--tgt-ease-out);
	}

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

	.tgt-utility-bar__contact {
		display: flex;
		gap: var(--tgt-space-5);
	}

	.tgt-utility-bar__contact i {
		margin-right: 6px;
		font-size: 12px;
		opacity: 0.75;
	}

	.tgt-utility-bar__social {
		display: flex;
		gap: var(--tgt-space-4);
		font-size: 15px;
	}
}

/* ---------- 8. SEITENTITEL ---------- */

/* Blocksy-Titelbereich auf der Startseite ausblenden – sie hat einen
   eigenen Hero. Innenseiten behalten den Blocksy-Seitentitel. */
body.home .hero-section {
	display: none;
}

/* ---------- 9. TERMIN-BUTTON IM MENUE (Klasse tgt-menu-cta) ---------- */

/* Der Menuepunkt "Terminbuchung" traegt unter Design → Menues die
   CSS-Klasse tgt-menu-cta und wird dadurch zur Navy-Pille. */

.header-menu-1 li.tgt-menu-cta > a {
	background: var(--tgt-steel);
	color: #fff !important;
	border-radius: var(--tgt-radius-pill);
	padding: 9px 18px !important;
	align-self: center;
	font-family: var(--tgt-font-display) !important;
	font-weight: var(--tgt-fw-display) !important;
	font-size: 14.5px !important;
	line-height: 1.35;
	text-transform: none !important;
	transition: background-color var(--tgt-dur-base) var(--tgt-ease-out);
}

/* Kalender-Icon in der Termin-Pille — Linienstil wie im Mockup, als CSS-Maske
   eingebunden (gleiche Technik wie die Knochen-Bullets). Gegenueber dem
   frueheren Font-Awesome-Glyph (\f274, gefuellter Kalender mit Haekchen):
   passt zur Linien-Icon-Sprache der CI, und die Farbe folgt ueber
   currentColor automatisch der Schriftfarbe des Buttons. */
.header-menu-1 li.tgt-menu-cta > a::before,
nav.mobile-menu li.tgt-menu-cta > a::before {
	content: "" !important;
	/* ⚠️ Blocksy verwendet ::before/::after der Menueanker als Hover-Indikator
	   (main.min.css: `[data-menu] > ul > li > a::before { position: absolute;
	   left: 0; right: 0; ... }`). Ohne diesen Reset erbt unser Icon die
	   absolute Positionierung, faellt aus dem Textfluss und ist unsichtbar —
	   im Desktop-Header war exakt das der Fall, waehrend es im Offcanvas
	   (anderes Markup, Regel greift dort nicht) korrekt erschien. */
	position: static !important;
	inset: auto !important;
	/* Der Indikator ist bei Blocksy standardmaessig unsichtbar und blendet
	   erst beim Hover ein — ohne diesen Reset bleibt das Icon transparent. */
	opacity: 1 !important;
	transition: none !important;
	display: inline-block;
	/* 1.45em ≈ 21px: bei 17px liefen die Linien ineinander und der Kalender
	   wurde zum Klotz (pixelgenau gegengeprueft). */
	width: 1.45em;
	height: 1.45em;
	margin: 0 8px 0 0 !important;
	vertical-align: -0.28em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='3'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%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 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='3'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Auf der eigenen Seite des Buttons (/terminbuchung/) faerbt Blocksy das ::before
   jedes aktuellen Menuepunkts per `li[class*="current-menu-"] > a::before`
   in Palettenfarbe 2 (Hover-Indikator). Das ist spezifischer als unser
   `background-color: currentColor` und machte das Kalender-Icon dunkelblau auf
   dunkelblau (unsichtbar). Hoeher gezogen, Farbe folgt wieder der Schrift. */
html:root .header-menu-1 li.tgt-menu-cta > a::before {
	background-color: currentColor !important;
}

.header-menu-1 li.tgt-menu-cta > a:hover {
	background: var(--tgt-steel-deep);
	color: #fff !important;
}

/* Offcanvas (mobiles Menue): gleiche Pille, mit Abstand nach oben */
#offcanvas nav.mobile-menu li.tgt-menu-cta > a {
	background: var(--tgt-steel);
	color: #fff !important;
	border-radius: var(--tgt-radius-pill);
	padding: 10px 20px !important;
	margin-top: 10px;
	display: inline-block;
	font-family: var(--tgt-font-display);
	font-weight: var(--tgt-fw-display);
}

/* ---------- 10. KONTAKTZEILE UNTER DEM HEADER + OFFCANVAS-SOCIAL ---------- */

/* Schlanke helle Zeile direkt unter dem Sticky-Header: Telefon links,
   Social rechts. Scrollt mit weg. Auf Smartphones ausgeblendet — dort
   uebernehmen Bottom-CTA-Bar, Offcanvas-Menue und Footer. */

.tgt-kontakt-strip {
	display: none;
	background: var(--tgt-steel-tint);
	border-bottom: 1px solid var(--tgt-line);
}

@media (min-width: 768px) {
	.tgt-kontakt-strip {
		display: block;
	}
}

.tgt-kontakt-strip__inner {
	max-width: var(--tgt-content-max);
	margin: 0 auto;
	padding: 7px var(--tgt-space-5);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--tgt-space-4);
	font-size: 13px;
}

.tgt-kontakt-strip__phones {
	display: flex;
	gap: var(--tgt-space-5);
}

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

.tgt-kontakt-strip__phones a:hover {
	color: var(--tgt-steel);
}

.tgt-kontakt-strip__phones i {
	color: var(--tgt-teal-deep);
	margin-right: 5px;
	font-size: 12px;
}

.tgt-kontakt-strip__social {
	display: flex;
	align-items: center;
	gap: 4px;
}

.tgt-kontakt-strip__label {
	color: var(--tgt-slate-soft);
	margin-right: 6px;
}

.tgt-kontakt-strip__social a {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	color: var(--tgt-teal-deep);
	font-size: 14px;
	text-decoration: none;
	transition: color var(--tgt-dur-base) var(--tgt-ease-out),
	            background-color var(--tgt-dur-base) var(--tgt-ease-out);
}

.tgt-kontakt-strip__social a:hover {
	background: #fff;
	color: var(--tgt-steel);
}

/* Social-Icons unten im mobilen Offcanvas-Menue */
.tgt-offcanvas-social {
	display: flex;
	gap: 10px;
	padding: 18px 0 6px;
}

.tgt-offcanvas-social a {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--tgt-steel-tint);
	color: var(--tgt-steel);
	font-size: 17px;
	text-decoration: none;
	transition: background-color var(--tgt-dur-base) var(--tgt-ease-out),
	            color var(--tgt-dur-base) var(--tgt-ease-out);
}

.tgt-offcanvas-social a:hover {
	background: var(--tgt-steel);
	color: #fff;
}

/* ---------- 11. KOPFZEILE: BURGER-MENUE BIS 1179 PX ----------
   Die Desktop-Kopfzeile braucht mit sechs Hauptpunkten (inkl. „Seminare“)
   ca. 1020 px (Logo 254 + Menue 743 bei 90 % Containerbreite) und passt erst
   ab etwa 1130 px. Darunter schob sich der Termin-Button aus dem Bild (iPad
   quer, kleine Laptops). Blocksy schaltet erst bei 1000 px auf die Mobil-
   Kopfzeile um — fuer den Bereich dazwischen nehmen wir dieselbe (Burger +
   Offcanvas wie auf dem Handy). Blocksy kennt nur [data-device=desktop|mobile]. */
@media (min-width: 1000px) and (max-width: 1179.98px) {
	#header [data-device="desktop"],
	#offcanvas [data-device="desktop"] {
		display: none;
	}

	#header [data-device="mobile"],
	#offcanvas [data-device="mobile"] {
		display: block;
	}
}

/* Aktuelles-Karten (09.10.2026): Auszug war Cyan (2,1:1), Datum und Rubrik
   Hellgrau (2,0:1) auf der blauen Kartenflaeche. Slate bzw. Slate-weich
   erreichen 11 bzw. 4,6:1. */
.entry-card .entry-excerpt,
.entry-card .entry-excerpt p {
	color: var(--tgt-slate);
}

.entry-card .entry-meta,
.entry-card .entry-meta li,
.entry-card .entry-meta a,
.entry-card .entry-meta time {
	color: var(--tgt-slate-soft);
}