/* =================================================================
   taki mundo: Design-System
   Farben und Schriften kommen aus dem Elementor-Kit (Website-Einstellungen).
   Hier nur Variablen, Gutter, Helper und Komponenten, die Elementor nicht
   nativ abbildet. Keine festen Farbwerte ausser Fallbacks.
   ================================================================= */

:root,
body {
	--tm-orange: var(--e-global-color-accent, #F29400);          /* Fläche, Buttons, Bogen */
	--tm-orange-text: var(--e-global-color-tmorangetext, #9A5700); /* Orange als Text auf Hell */
	--tm-grau: var(--e-global-color-primary, #58585A);            /* Logo-Grau: Titel, Kopf, Fuss */
	--tm-flaeche: var(--e-global-color-secondary, #EEEEEC);       /* ruhige Grauflächen */
	--tm-text: var(--e-global-color-text, #2B2B2B);               /* Fliesstext */
	--tm-linie: var(--e-global-color-tmlinie, #CFCFCB);           /* Haarlinien */
	--tm-weiss: var(--e-global-color-tmweiss, #FFFFFF);

	--tm-f-titel: 'Sora', system-ui, sans-serif;
	--tm-f-text: 'Atkinson Hyperlegible', system-ui, sans-serif;

	--tm-radius: 6px;
	--tm-schatten: 0 12px 30px color-mix(in srgb, var(--tm-text) 8%, transparent);
	--tm-kopfhoehe: 96px;
}

/* -----------------------------------------------------------------
   Seiten-Gutter zentral
   ----------------------------------------------------------------- */
@media (min-width: 1025px) and (max-width: 1319px) {
	body.tm-site .e-con.e-con-boxed.e-parent { padding-left: 40px; padding-right: 40px; }
}
@media (max-width: 1024px) {
	body.tm-site .e-con.e-con-boxed.e-parent { padding-left: 30px; padding-right: 30px; }
}
@media (max-width: 767px) {
	body.tm-site .e-con.e-con-boxed.e-parent { padding-left: 20px; padding-right: 20px; }
}

/* -----------------------------------------------------------------
   Helper-Klassen (im Feld «CSS-Klassen» eines Elements eintragen)
   ----------------------------------------------------------------- */
.e-con.tm-grow { --width: auto !important; flex: 1 1 0 !important; min-width: 0; }
.e-con.tm-auto { --width: auto !important; }
.elementor-button { white-space: nowrap; }
body.tm-site.tm-site .e-con > .tm-narrow { max-width: 640px; width: 100%; }

/* Anker unter dem Sticky-Header */
body.tm-site .e-con[id] { scroll-margin-top: calc(var(--tm-kopfhoehe) + 16px); }

/* Fokus gut sichtbar (Barrierefreiheit) */
body.tm-site :focus-visible { outline: 3px solid var(--tm-orange); outline-offset: 3px; }

/* -----------------------------------------------------------------
   Bogen-Paar (Widget «Bogen-Paar», Kategorie taki mundo)
   ----------------------------------------------------------------- */
body.tm-site .tm-paar {
	display: inline-flex;
	align-items: flex-end;
	margin: 0;
	font-family: var(--tm-f-titel);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1;
	color: var(--tm-grau);
}
body.tm-site .tm-paar__wort--links { color: var(--tm-orange-text); }
body.tm-site .tm-paar__bogen {
	width: 58px;
	height: 26px;
	flex: none;
	margin: 0 6px;
	overflow: visible;
	fill: none;
	stroke: var(--tm-orange);
	stroke-width: 3;
	stroke-linecap: round;
}
body.tm-site .tm-paar--gross { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; }
body.tm-site .tm-paar--gross .tm-paar__bogen { width: 110px; height: 46px; stroke-width: 3.4; }

/* auf Orange: Text und Bogen dunkel */
body.tm-site .tm-paar--auf-orange,
body.tm-site .tm-paar--auf-orange .tm-paar__wort--links { color: var(--tm-text); }
body.tm-site .tm-paar--auf-orange .tm-paar__bogen { stroke: var(--tm-text); }

/* auf Grau: Text weiss, Bogen orange */
body.tm-site .tm-paar--auf-dunkel { color: var(--tm-weiss); }
body.tm-site .tm-paar--auf-dunkel .tm-paar__wort--links { color: var(--tm-orange); }

/* -----------------------------------------------------------------
   Gerahmtes Bild mit Legende (Image-Widget, Klasse tm-rahmen)
   ----------------------------------------------------------------- */
body.tm-site .tm-rahmen .elementor-widget-container,
body.tm-site .tm-rahmen figure.wp-caption {
	background: var(--tm-weiss);
	border: 1px solid var(--tm-linie);
	border-radius: var(--tm-radius);
	padding: 10px;
}
body.tm-site .tm-rahmen figure.wp-caption { display: block; width: 100%; margin: 0; }
body.tm-site .tm-rahmen img { border-radius: 3px; width: 100%; height: auto; }
body.tm-site .tm-rahmen .widget-image-caption {
	font-size: .92rem;
	color: color-mix(in srgb, var(--tm-text) 75%, transparent);
	padding: 10px 4px 2px;
	margin: 0;
	text-align: left;
}

/* -----------------------------------------------------------------
   Liste mit Haarlinien (Container, Klasse tm-linien; Kinder = Zeilen)
   ----------------------------------------------------------------- */
body.tm-site .e-con.tm-linien { border-top: 1px solid var(--tm-linie); }
body.tm-site .e-con.tm-linien > .e-con { border-bottom: 1px solid var(--tm-linie); }

/* -----------------------------------------------------------------
   Kopfzeile (Theme Builder «Kopfzeile»)
   ----------------------------------------------------------------- */
/* Untermenü: weisse Box, oranger Strich links bei Hover/Fokus, aktive Seite hellgrau */
body.tm-site .tm-mainnav .elementor-nav-menu--main .sub-menu {
	border: 1px solid var(--tm-linie);
	border-radius: 0 0 var(--tm-radius) var(--tm-radius);
	box-shadow: var(--tm-schatten);
	min-width: 280px;
	padding: 8px 0;
}
body.tm-site .tm-mainnav .sub-menu .elementor-sub-item {
	border-left: 4px solid transparent;
	transition: border-color .15s, background-color .15s;
}
body.tm-site .tm-mainnav .sub-menu .elementor-sub-item:hover,
body.tm-site .tm-mainnav .sub-menu .elementor-sub-item:focus-visible {
	border-left-color: var(--tm-orange);
}
body.tm-site .tm-mainnav .sub-menu .elementor-sub-item.elementor-item-active {
	border-left-color: var(--tm-grau);
}

/* Mobil-Dropdown: Hauptpunkte fett, Unterpunkte eingerückt */
body.tm-site .tm-mainnav .elementor-nav-menu--dropdown .elementor-item { font-family: var(--tm-f-titel); font-weight: 600; }
body.tm-site .tm-mainnav .elementor-nav-menu--dropdown .sub-menu .elementor-sub-item { padding-left: 36px !important; font-family: var(--tm-f-text); font-weight: 400; }

/* Burger schon unter 1180 px (Navigation hat sonst zwischen 1025 und 1180 px keinen Platz) */
@media (min-width: 1025px) and (max-width: 1180px) {
	body.tm-site .tm-mainnav .elementor-nav-menu--main { display: none !important; }
	body.tm-site .tm-mainnav .elementor-menu-toggle { display: flex !important; margin-left: auto; }
	body.tm-site .tm-mainnav .elementor-nav-menu--dropdown.elementor-nav-menu__container { display: block !important; }
	body.tm-site .tm-mainnav .elementor-menu-toggle:not(.elementor-active) + .elementor-nav-menu__container { transform: scaleY(0); max-height: 0; overflow: hidden; }
	body.tm-site .tm-mainbar .elementor-widget-button.elementor-hidden-laptop { display: block !important; }
}

/* Burger rechts neben dem Spenden-Button */
@media (max-width: 1180px) {
	body.tm-site .tm-mainnav .elementor-menu-toggle { margin-left: auto !important; margin-right: 0 !important; }
}

/* Spenden-Lasche fix am rechten Rand (nur ab 1181 px) */
body.tm-site .tm-lasche {
	position: fixed !important;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 99;
	width: auto !important;
	margin: 0 !important;
}
body.tm-site .tm-lasche .elementor-button {
	writing-mode: vertical-rl;
	padding: 22px 13px;
	border-radius: var(--tm-radius) 0 0 var(--tm-radius);
	box-shadow: -4px 0 18px color-mix(in srgb, var(--tm-text) 12%, transparent);
	font-weight: 700;
	letter-spacing: .02em;
}
@media (max-width: 1180px) {
	body.tm-site .tm-lasche { display: none !important; }
}

/* Quicklink-Zeile */
body.tm-site .tm-quicknav .elementor-item { text-decoration: none; }
body.tm-site .tm-quicknav .elementor-item:hover { text-decoration: underline; }

/* -----------------------------------------------------------------
   Kennzahlen-Zeile (Container tm-fakten, Kinder tm-fakt)
   ----------------------------------------------------------------- */
body.tm-site .e-con.tm-fakten {
	border-top: 1px solid var(--tm-linie);
	border-bottom: 1px solid var(--tm-linie);
}
body.tm-site .e-con.tm-fakten > .tm-fakt { --width: 25%; width: 25%; }
body.tm-site .e-con.tm-fakten > .tm-fakt + .tm-fakt { padding-left: 24px; border-left: 1px solid var(--tm-linie); }
@media (max-width: 1024px) {
	body.tm-site .e-con.tm-fakten > .tm-fakt { --width: 50%; width: 50%; }
	body.tm-site .e-con.tm-fakten > .tm-fakt:nth-child(3) { padding-left: 0; border-left: 0; }
	body.tm-site .e-con.tm-fakten > .tm-fakt:nth-child(n+3) { border-top: 1px solid var(--tm-linie); }
}
@media (max-width: 400px) {
	body.tm-site .e-con.tm-fakten > .tm-fakt { --width: 100%; width: 100%; padding-left: 0 !important; border-left: 0 !important; }
	body.tm-site .e-con.tm-fakten > .tm-fakt + .tm-fakt { border-top: 1px solid var(--tm-linie); }
}

/* Textlink (Button-Widget, Klasse tm-textlink) */
body.tm-site .tm-textlink .elementor-button { background: transparent; padding: 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
body.tm-site .tm-textlink .elementor-button:hover { text-decoration-thickness: 2px; }

/* Galerie: runde Ecken auch beim Hover */
body.tm-site .tm-galerie .e-gallery-item { border-radius: var(--tm-radius); overflow: hidden; }

/* Musterseite: Hinweisbalken nur für Redaktion */
body.tm-site .tm-vorlagen-hinweis { position: relative; }

/* -----------------------------------------------------------------
   Loop-Karten (Team, Stimmen)
   ----------------------------------------------------------------- */
/* Kontaktlinks ohne Inhalt (leeres ACF-Feld) ausblenden */
body.tm-site .tm-kontaktlinks .elementor-icon-list-item:not(:has(a)) { display: none; }
body.tm-site .tm-kontaktlinks .elementor-icon-list-text { font-size: .92rem; }
body.tm-site .tm-teamkarte .elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* Stimme: Anführungszeichen vor dem Zitat, Karten gleich hoch */
body.tm-site .tm-stimme { height: 100%; }
body.tm-site .tm-stimme__zitat p { margin: 0; }
body.tm-site .tm-stimme__zitat::before {
	content: "«";
	display: block;
	font-family: var(--tm-f-titel);
	font-size: 3rem;
	line-height: .8;
	color: var(--tm-orange);
	margin-bottom: 6px;
}
body.tm-site .tm-stimme__bild img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; }

/* Kontaktformular */
body.tm-site .tm-formular .elementor-field-type-acceptance label { font-family: var(--tm-f-text); font-weight: 400; }
body.tm-site .tm-formular .elementor-field-type-acceptance a { color: var(--tm-orange-text); }

/* -----------------------------------------------------------------
   Fusszeile
   ----------------------------------------------------------------- */
body.tm-site .tm-zewo-chip img {
	background: var(--tm-weiss);
	border-radius: var(--tm-radius);
	padding: 10px 14px;
	box-sizing: content-box;
	max-width: 210px;
}