/* ── Runde 3 (19.10.2026): Startseite & Footer, finale Abnahme 17.10.2026 (Claus), Dropdown und Suche ──
   Nur die dort ausdrücklich genannten Korrekturen. Wird nach den übrigen Teilen geladen. */

/* §12 Footer: Spalte „Deine Vorteile …“ breiter (Überschrift möglichst einzeilig); Social-Symbole statt Wörter;
   Schlusszeile: Copyright links, „Deine gesetzlichen Gewährleistungsrechte“ rechtsbündig auf einer Höhe;
   Mitteilung klappt beim ersten Klick darunter auf. Keine leere Fläche unter der Schlusszeile. */
@media (min-width: 1000px) {
	.temana-fuss__spalten { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.45fr) minmax(0, .95fr) minmax(0, .95fr); grid-auto-flow: row; }
	.temana-fuss .temana-fuss__spalte--vorteile .temana-fuss__titel { white-space: nowrap; }
}
.temana-fuss .temana-fuss__social { gap: 6px 10px; }
.temana-fuss__social-link.mit-ikon { min-width: 40px; min-height: 40px; border-radius: 50%; }
.temana-fuss__social-link.mit-ikon:hover,
.temana-fuss__social-link.mit-ikon:focus-visible { background: rgba(255, 255, 255, .12); }
.temana-fuss__ikon { width: 22px; height: 22px; }
.temana-fuss__abschluss { margin-bottom: 0; padding-bottom: 20px; }
.temana-fuss__abschluss .temana-fuss__gewaehrleistung { padding: 0; margin-left: auto; text-align: right; }
.temana-fuss__abschluss .temana-fuss__gewaehrleistung[open] { flex: 1 0 100%; }
.temana-fuss__abschluss .temana-fuss__gewaehrleistung[open] > summary { text-align: right; }
.temana-fuss__abschluss .temana-fuss__gewaehrleistung-inhalt { margin-left: auto; margin-bottom: 4px; text-align: left; }
@media (max-width: 599px) {
	.temana-fuss__abschluss .temana-fuss__gewaehrleistung { margin-left: 0; text-align: left; }
	.temana-fuss__abschluss .temana-fuss__gewaehrleistung[open] > summary { text-align: left; }
	.temana-fuss__abschluss .temana-fuss__gewaehrleistung-inhalt { margin-left: 0; }
}
/* Die große Gewährleistungsgrafik (Germanized-Label) gehört nicht in den Fuß; die Mitteilung steht im Link darüber. */
.wc-gzd-legal-guarantee-label { display: none !important; }

/* §1.1 Desktop-Untermenü „Produkte“: 280–300 px breit, kompakter, Produktübersicht leicht betont, heller Hover. */
@media (min-width: 1025px) {
	.header-navigation .header-menu-container ul ul.sub-menu { width: 290px; min-width: 290px; padding: 4px 0; box-shadow: 0 14px 34px rgba(24, 54, 31, .12); }
	.header-navigation .header-menu-container ul ul.sub-menu li.menu-item > a {
		padding: 11px 16px; font-size: 15px; line-height: 1.35; white-space: normal;
		border-bottom: 1px solid #F3F1EC; transition: background-color .18s ease, color .18s ease;
	}
	.header-navigation .header-menu-container ul ul.sub-menu li.menu-item:last-child > a { border-bottom: 0; }
	.header-navigation .header-menu-container ul ul.sub-menu li.menu-item:first-child > a { font-weight: 600; }
	.header-navigation .header-menu-container ul ul.sub-menu li.menu-item > a:hover,
	.header-navigation .header-menu-container ul ul.sub-menu li.menu-item > a:focus-visible,
	.header-navigation .header-menu-container ul ul.sub-menu li.menu-item.current-menu-item > a:hover {
		background: #EEF6EE; color: #2B723D; outline: none;
	}
}

/* §1.3 Live-Suche: mehr Luft zwischen PRODUKTE / WISSEN / SEITEN, Trennlinie bleibt; Artikelnummer klein im Treffer. */
.temana-suche__gruppe { margin-top: 24px; }
.temana-suche__gruppe:first-child { margin-top: 16px; }
.temana-suche__sku { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-sek); }

/* §8 Marken-Statement: vertikaler Innenabstand oben und unten um etwa 17 % kleiner (vorher 42–62 px). */
.temana-haltung { padding-block: clamp(35px, 3.7vw, 51px); }

/* §10 Wissen & Anwendung: die zwei Karten der zweiten Reihe mittig unter der Dreierreihe. */
@media (min-width: 900px) {
	.home .temana-wissenbereiche { display: flex; flex-wrap: wrap; justify-content: center; }
	.home .temana-wissenbereiche > .temana-karte { flex: 0 0 calc((100% - 32px) / 3); max-width: calc((100% - 32px) / 3); }
}

/* §13.3 Mobile Shopvorteile: fast volle Breite (16 px Rand), Innenabstände etwas kleiner. */
@media (max-width: 599px) {
	.home .temana-vorteile-band { padding-inline: 16px; }
	.home .temana-vorteile { padding-block: 8px; }
	.home .temana-vorteile li { padding: 10px 10px; }
}

/* §13.4 Mobile Produktkarten: Knöpfe gleich hoch, Text mittig, mindestens 12–14 px zum MwSt.-Hinweis. */
@media (max-width: 599px) {
	.home .temana-startprodukte ul.products li.product .product-action-wrap .button {
		display: flex; align-items: center; justify-content: center; text-align: center; min-height: 56px; margin: 0 0 14px;
	}
}

/* §13.1 Mobiler Kopf: Lupe ganz links statt Suchfeld; Reihenfolge Lupe | Kontakt & Beratung | Konto | Warenkorb.
   Das (schreibgeschützte) Eingabefeld bleibt als unsichtbare Fläche über dem Symbol – es öffnet die Live-Suche. */
@media (max-width: 1024px) {
	.temana-servicebar__wege { justify-content: flex-start; }
	.temana-servicebar__wege .temana-kopfsuche {
		position: relative; flex: 0 0 44px; width: 44px; min-width: 44px; min-height: 44px; margin-right: auto; padding: 0;
		justify-content: center; background: none; border: 0; color: #fff; border-radius: 8px;
	}
	.temana-servicebar__wege .temana-kopfsuche:focus-within { background: rgba(255, 255, 255, .16); outline: 2px solid #fff; outline-offset: 0; }
	.temana-servicebar__wege .temana-kopfsuche .temana-ikon { width: 22px; height: 22px; opacity: 1; color: #fff; }
	.temana-servicebar__wege .temana-kopfsuche input {
		position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; min-height: 44px; opacity: 0; cursor: pointer;
	}
	.temana-servicebar__wege .temana-kopfsymbol { min-width: 44px; justify-content: center; }
	.temana-servicebar__wege .temana-kopfsymbol .temana-ikon { width: 22px; height: 22px; }
}

/* §13.2 Hamburger-Menü: Pfeile an „Produkte“ und „Wissen & Anwendung“ immer sichtbar (dunkelgrün, nie hell auf
   Creme); sie ändern nur die Richtung (offen/geschlossen). Der Text bleibt ein eigener Link, der Pfeil öffnet. */
#mobile-drawer .drawer-sub-toggle {
	opacity: 1 !important; visibility: visible !important; color: #2B723D; min-width: 44px; min-height: 44px;
	display: inline-flex; align-items: center; justify-content: center;
}
#mobile-drawer .drawer-sub-toggle .kadence-svg-iconset,
#mobile-drawer .drawer-sub-toggle svg { opacity: 1 !important; width: 20px; height: 20px; fill: currentColor; }
/* Die Drehung (offen/geschlossen) übernimmt Kadence am Symbol selbst – hier nicht doppelt drehen. */

/* ── §2 Hero (Abnahme 17.10.): Naturmotiv hinter dem Text, innerhalb des Seitencontainers, nicht beschnitten; „Naturprodukte.“ grün ── */
.temana-hero__gruen { color: #2B723D; }
.temana-hero--neu { padding-block: 0; }
.temana-hero--neu > .wp-block-group__inner-container { display: block; max-width: var(--global-content-width, 1180px); padding-inline: clamp(20px, 4vw, 40px); position: relative; }
.temana-hero--neu .temana-heldbild--breit { position: static; width: 100%; max-width: none; aspect-ratio: auto; margin: 0; }
.temana-hero--neu .temana-heldbild--breit img { display: block; width: 100%; height: auto; max-height: none; object-fit: contain; -webkit-mask-image: none; mask-image: none; border-radius: 0; }
.temana-hero--neu .temana-heldbild--breit::after { content: none; }
@media (min-width: 900px) {
	.temana-hero--neu > .wp-block-group__inner-container { padding-inline: 0; }
	.temana-hero--neu .temana-heldtext { position: absolute; z-index: 2; top: 50%; left: 0; transform: translateY(-50%); width: 44%; padding-left: clamp(24px, 3vw, 38px); padding-right: 18px; }
	.temana-hero--neu .temana-heldtext h1 { font-size: clamp(38px, 4.2vw, 60px); line-height: 1.04; letter-spacing: -.04em; max-width: 620px; }
	.temana-hero--neu .temana-heldtext .lead { max-width: 500px; font-size: clamp(15px, 1.22vw, 18px); line-height: 1.6; margin-top: 22px; }
	.temana-hero--neu .temana-heldtext .wp-block-buttons { margin: 26px 0 0; }
}
@media (max-width: 899px) {
	.temana-hero--neu { padding-top: clamp(28px, 6vw, 44px); }
	.temana-hero--neu .temana-heldbild--breit { margin-top: 12px; margin-inline: 0; }
	.temana-hero--neu .temana-heldbild--breit img { aspect-ratio: 1659 / 948; object-fit: cover; object-position: 62% center; }
}