/*
 * Startseite, Kopf und Fuß – Welle 2 (12.10.2026)
 * Quelle: Claus' Abnahme 03.–04.10. („TeMana_Natura_Startseite_01_Header_final" … „12_Footer_final"),
 * Teilplan planung/2026-10-09/01-startseite-footer.md. Lädt nach temana.css und überschreibt nur hier.
 * Startseiten-Eigenes ist an .home bzw. an die neuen Klassen aus Seite 313 gebunden
 * (temana-hero--start, temana-startprodukte, temana-marken, temana-wissenbereiche); Kopf, Suche und
 * Fuß gelten auf allen Seiten.
 */

/* ===================== 01 Kopf ===================== */

/* §1.1 Kopf klebt beim Scrollen. Die Serviceleiste kommt per wp_body_open vor Kadences #masthead –
   beide kleben einzeln, der Kadence-Kopf direkt unter der Leiste. Ihre Höhe misst kopf-fuss.js
   (--temana-leiste-h); ohne Skript gilt der Richtwert. Kadences eigene Sticky-Option muss aus sein. */
body { --temana-adminbar-h: 0px; }
body.admin-bar { --temana-adminbar-h: 32px; }
@media (max-width: 782px) { body.admin-bar { --temana-adminbar-h: 46px; } }
@media (max-width: 600px) { body.admin-bar { --temana-adminbar-h: 0px; } } /* dort scrollt die Admin-Leiste mit */

.temana-servicebar { position: sticky; top: var(--temana-adminbar-h); z-index: 1001; }
#masthead { position: sticky; top: calc(var(--temana-adminbar-h) + var(--temana-leiste-h, 60px)); z-index: 1000; }
/* Sprungziele (#anker) nicht unter dem Kopf verstecken */
html { scroll-padding-top: calc(var(--temana-kopf-h, 0px) + 12px); }
/* Mobil die Leiste flacher halten: zusammen mit dem Kadence-Kopf sonst über 130 px */
@media (max-width: 782px) {
	.temana-servicebar__in { padding-block: 0; }
}
/* Schmale Handys: Suchfeld (min-width 240 px aus temana.css) schob „Kontakt & Beratung" in drei Zeilen und die
   Leiste links aus dem Bild (Vorschau 390 px). Jetzt teilt sich das Feld den Rest der Zeile. */
@media (max-width: 600px) {
	.temana-servicebar__wege { width: 100%; justify-content: flex-end; }
	.temana-kopfsuche { flex: 1 1 auto; min-width: 0; }
	.temana-kopfsuche input { min-width: 0; width: 100%; text-overflow: ellipsis; }
	.temana-servicebar__wege > a { white-space: nowrap; padding-inline: 8px; }
}

/* §1.3 Suchfeld hebt sich von der dunkelgrünen Leiste ab: Creme, dunkle Schrift; Lage und Größe bleiben. */
.temana-kopfsuche { background: var(--creme); border-color: var(--linie); color: var(--gruen); }
.temana-kopfsuche:focus-within { background: var(--weiss); border-color: var(--weiss); outline: 2px solid var(--akzent); outline-offset: 1px; }
.temana-kopfsuche .temana-ikon { opacity: 1; }
.temana-kopfsuche input { color: var(--text); }
.temana-kopfsuche input::placeholder { color: var(--text-sek); opacity: 1; } /* #646B64 auf #FFF5E1 ≈ 5,2 : 1 */

/* §1.5 Suchfenster: Gruppen kompakter, aber klar getrennt (feine Linie statt großer Leerfläche). Die großen
   Lücken kamen von der allgemeinen Regel `section{padding-block:clamp(48px,5.5vw,76px)}` in temana.css –
   suche.js baut jede Gruppe als <section>. */
.temana-suche__gruppe { margin-top: 10px; padding-block: 8px 0; border-top: 1px solid var(--linie); }
.temana-suche__gruppe:first-child { margin-top: 16px; padding-top: 0; border-top: 0; }
.temana-suche__gruppe h3 { margin: 0 0 4px; }
.temana-suche__gruppe a { padding: 7px 10px; }
/* §1.4 „Weitere … zu deiner Suche" (kopf-fuss.js), im Stil von „Alle Ergebnisse anzeigen" */
.temana-suche__gruppe a.temana-suche__mehr {
	display: inline-block; margin: 2px 0 0; padding: 4px 10px;
	font-size: 14.5px; font-weight: 600; color: var(--gruen); text-decoration: none;
}
.temana-suche__gruppe a.temana-suche__mehr::after { content: " →"; }
.temana-suche__gruppe a.temana-suche__mehr:hover { background: none; text-decoration: underline; text-decoration-color: var(--akzent); }

/* ===================== 02 Hero (nur Startseite) ===================== */

/* §2.7/§2.8: Bild rechts, läuft nach links weich in die Creme-Fläche aus (Maske), zusätzlich ein
   Creme-Verlauf darüber als Absicherung; Text und Knöpfe liegen darüber. Mobil: Bild unter dem Text,
   Verlauf nach oben. Die übrigen Seiten mit .temana-hero (Kontakt, Wissen …) bleiben unberührt. */
.temana-hero--start { position: relative; }
.temana-hero--start .temana-heldtext { position: relative; z-index: 1; }
.temana-hero--start .temana-heldbild { position: relative; margin: 0; }
.temana-hero--start .temana-heldbild img {
	display: block; width: 100%; height: auto; max-height: none; min-height: 0; border-radius: 0; object-fit: cover;
}

@media (max-width: 899px) {
	.temana-hero--start:has(.temana-heldbild) { padding-bottom: 0; }
	.temana-hero--start .temana-heldbild { margin-inline: calc(-1 * clamp(20px, 4vw, 40px)); }
	.temana-hero--start .temana-heldbild img {
		max-height: min(80vw, 440px); object-position: center;
		-webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .6) 14%, #000 30%);
		mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .6) 14%, #000 30%);
	}
}

@media (min-width: 900px) {
	.temana-hero--start:has(.temana-heldbild) > .wp-block-group__inner-container {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: center;
		min-height: clamp(420px, 36vw, 540px);
	}
	/* Breites Stimmungsbild (Claus §2.10, 2,5 : 1): rechte 62 % der vollen Hero-Breite bis zum Rand */
	.temana-hero--start .temana-heldbild {
		position: absolute; top: 0; right: 0; height: 100%; width: 62%; z-index: 0; pointer-events: none;
	}
	.temana-hero--start .temana-heldbild img {
		width: 100%; height: 100%; object-fit: cover; object-position: right center;
		-webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .55) 22%, #000 42%);
		mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .55) 22%, #000 42%);
	}
	.temana-hero--start .temana-heldbild::after {
		content: ""; position: absolute; inset: 0;
		background: linear-gradient(90deg, var(--creme) 0, rgba(255, 245, 225, 0) 34%);
	}
	/* Quadratisches Packshot-Bild (heute live): so hoch wie der Hero, rechts bündig mit dem Inhalt,
	   damit es nicht abgeschnitten wird; weicher Rand auch rechts, weil es dort an Creme stößt. */
	.temana-hero--start .temana-heldbild--quadrat {
		width: auto; aspect-ratio: 1 / 1; max-width: 58%;
		right: max(0px, calc((100% - var(--global-content-width, 1180px)) / 2));
	}
	.temana-hero--start .temana-heldbild--quadrat img {
		object-position: center;
		-webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .6) 10%, #000 24%, #000 90%, transparent 100%);
		mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .6) 10%, #000 24%, #000 90%, transparent 100%);
	}
	.temana-hero--start .temana-heldbild--quadrat::after {
		background: linear-gradient(90deg, var(--creme) 0, rgba(255, 245, 225, 0) 16%);
	}
}

/* ===================== 03 Shopvorteile (nur Startseite) ===================== */

/* §3.1 gleiche Inhaltsbreite wie der Hero (nicht mehr randlos): weiße Fläche mit feiner Kontur.
   §3.2–3.5 vier gleich breite Spalten, großes Symbol links, Text rechts, mittig, dezente Trennlinien.
   §3.6 mobil 2 × 2. */
.home .temana-vorteile-band {
	width: auto; max-width: var(--global-content-width, 1180px); margin-inline: auto;
	padding: clamp(18px, 2.4vw, 30px) clamp(20px, 4vw, 40px);
	background: none; border: 0;
}
.home .temana-vorteile {
	max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0;
	background: var(--weiss); border: 1px solid var(--linie); border-radius: 12px;
	padding: clamp(14px, 2vw, 24px) 0;
}
.home .temana-vorteile li {
	flex-direction: row; align-items: center; gap: 14px; min-width: 0;
	padding: 12px clamp(14px, 1.6vw, 18px);
}
.home .temana-vorteile li:nth-child(even) { border-left: 1px solid var(--linie); }
.home .temana-vorteile li:nth-child(n + 3) { border-top: 1px solid var(--linie); }
.home .temana-vorteile .temana-symbol { width: 52px; height: 52px; }
.home .temana-vorteile b { margin: 0 0 3px; font-size: 15px; overflow-wrap: normal; word-break: normal; hyphens: manual; text-wrap: balance; }
.home .temana-vorteile span { font-size: 14px; line-height: 1.45; }

@media (min-width: 1100px) {
	.home .temana-vorteile { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.home .temana-vorteile li { padding-block: 4px; }
	.home .temana-vorteile li:nth-child(n + 3) { border-top: 0; }
	.home .temana-vorteile li + li { border-left: 1px solid var(--linie); }
}
@media (max-width: 599px) {
	/* Mobil 2 × 2: Symbol über dem Text, damit die Titel Platz haben */
	.home .temana-vorteile li { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 12px; }
	.home .temana-vorteile .temana-symbol { width: 44px; height: 44px; }
	.home .temana-vorteile b { font-size: 15px; }
	.home .temana-vorteile span { font-size: 13.5px; }
}

/* ===================== 04 Persönlicher Hinweis (nur Startseite) ===================== */

/* §4.2–4.5 Foto etwas größer, Zitat präsenter, Signatur nicht höher als eine Zitatzeile, Gruppe leicht größer. */
.home .temana-anker__in { max-width: 860px; gap: 24px; }
.home .temana-anker__in img.temana-claus__bild { width: 112px; height: 112px; margin: 0; }
.home .temana-anker__in p { font-size: clamp(19px, 2vw, 24px); line-height: 1.45; }
.home .temana-anker__in cite img.temana-anker__signatur { width: 140px; }
@media (max-width: 599px) {
	.home .temana-anker__in { gap: 16px; }
	.home .temana-anker__in img.temana-claus__bild { width: 84px; height: 84px; }
	.home .temana-anker__in cite img.temana-anker__signatur { width: 120px; }
}

/* ===================== 05 Produktblock (neu, nur Startseite) ===================== */

/* §5.3/§5.9 Desktop 2 Reihen × 4, mobil 2 je Zeile. §5.7 weiße Karten mit feiner Kontur.
   §5.5 Einordnung höchstens einzeilig. §5.6 Knopf immer sichtbar (auch wenn Kadence auf „bei Hover" stünde). */
.home .temana-startprodukte ul.products.products {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px);
	margin: 8px 0 clamp(26px, 3vw, 36px); padding: 0;
}
.home .temana-startprodukte ul.products.products::before,
.home .temana-startprodukte ul.products.products::after { content: none; display: none; }
@media (min-width: 900px) {
	.home .temana-startprodukte ul.products.products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.home .temana-startprodukte ul.products li.product {
	width: auto; margin: 0; float: none; min-width: 0;
	background: var(--weiss); border: 1px solid var(--linie); border-radius: 12px; overflow: hidden;
}
.home .temana-startprodukte ul.products li.product .product-excerpt {
	-webkit-line-clamp: 1; line-clamp: 1; min-height: calc(1.45 * 14px);
}
.home .temana-startprodukte ul.products li.product .product-action-wrap {
	opacity: 1; visibility: visible; transform: none;
}
@media (max-width: 599px) {
	.home .temana-startprodukte ul.products li.product .product-details { padding-inline: 10px; }
	.home .temana-startprodukte ul.products li.product .woocommerce-loop-product__title { font-size: 16px; }
	.home .temana-startprodukte ul.products li.product .price { font-size: 18px; }
	.home .temana-startprodukte ul.products li.product .product-excerpt { display: none; } /* Einordnung ist „optional" (§5.5) */
	/* Zwei Karten je Zeile: Knopf über die ganze Breite, MwSt.-Zeile darf umbrechen (max-content war breiter als die Karte) */
	.home .temana-startprodukte ul.products li.product .product-action-wrap { display: flex; flex-wrap: wrap; column-gap: 4px; }
	.home .temana-startprodukte ul.products li.product .product-action-wrap .button {
		flex: 1 1 100%; width: 100%; padding: 10px 6px; font-size: 14px; min-height: 44px; white-space: normal;
	}
}

/* ===================== 06 Themen (nur Startseite) ===================== */

/* §6.1 zwei Reihen à vier; §6.8 „Alle Themen entdecken" mit deutlich mehr Abstand, linksbündig. */
@media (min-width: 600px) and (max-width: 999px) {
	.home .temana-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
	.home .temana-kacheln { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.home .temana-kacheln + .wp-block-buttons { margin-block-start: clamp(36px, 4.5vw, 56px); justify-content: flex-start; }

/* ===================== 08 NUI NONI (nur Startseite) ===================== */

/* §8.6 Preishinweis entfällt; §8.7 mehr Luft vor den beiden Knöpfen. */
.home .temana-produkte { margin-bottom: 0; }
.home .temana-produkte + .wp-block-buttons { margin-block-start: clamp(28px, 3.5vw, 44px); }

/* ===================== 09 Marken (nur Startseite) ===================== */

/* §9.1 beide Zeilen als Einheit (gleiche Farbe), Erklärsatz nicht kleiner. */
.home .temana-haltung p { max-width: 22ch; line-height: 1.16; text-wrap: balance; }
.home .temana-haltung b { color: inherit; }
.home .temana-haltung small { font-size: 16px; color: rgba(255, 255, 255, .9); }
/* §9.3–9.6 Namen größer und einzeilig, Karten größer und gleich hoch, „Produkte ansehen" auf einer Höhe;
   2 × 2 ergibt bei den Texten vom 04.10. rund 6–7 Zeilen je Karte (gemessen mit Poppins 16 px). */
.home .temana-marken { gap: 16px; grid-auto-rows: 1fr; }
@media (min-width: 700px) {
	.home .temana-marken { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.home .temana-marken .temana-karte { padding: clamp(22px, 2.6vw, 32px); }
.home .temana-marken h3 { margin-bottom: 10px; font-size: clamp(1.45rem, 2.2vw, 1.7rem); white-space: nowrap; }
.home .temana-marken p { font-size: 16px; line-height: 1.6; }

/* ===================== 10 Wissen & Anwendung (nur Startseite) ===================== */

/* §10.4 fünf Karten als 3 + 2, alle gleich hoch, „Mehr erfahren" auf einer Höhe; Abstand zum Knopf bleibt. */
.home .temana-wissenbereiche { gap: 16px; grid-auto-rows: 1fr; }
@media (min-width: 600px) {
	.home .temana-wissenbereiche { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
	.home .temana-wissenbereiche { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.home .temana-wissenbereiche .temana-karte { padding: clamp(20px, 2.2vw, 26px); }
.home .temana-wissenbereiche p { font-size: 15px; line-height: 1.55; }

/* ===================== 12 Fuß (alle Seiten) ===================== */

/* §12.1 dunkelgrüne Fläche, Spalten in Inhaltsbreite; die Spaltenzahl folgt den vorhandenen Spalten
   (heute vier, mit „Kategorien" fünf). Bleibt der Kadence-Fuß stehen, wird er hier ausgeblendet. */
body:has(.temana-fuss) .site-footer:not(.temana-fuss) { display: none; }

.temana-fuss { background: var(--gruen-tief); color: var(--creme); font-size: 15px; line-height: 1.55; }
.temana-fuss__in {
	max-width: var(--global-content-width, 1180px); margin-inline: auto;
	padding: clamp(40px, 5vw, 64px) clamp(20px, 4vw, 40px) 0;
}
.temana-fuss__spalten { display: grid; gap: 32px 28px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) {
	.temana-fuss__spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
	.temana-fuss__spalten {
		grid-template-columns: minmax(0, 1.3fr); grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column;
	}
}
.temana-fuss .temana-fuss__titel {
	margin: 0 0 12px; font-size: 15px; font-weight: 600; letter-spacing: .02em; line-height: 1.35; color: var(--weiss);
}
.temana-fuss ul { list-style: none; margin: 0; padding: 0; }
.temana-fuss li { margin: 0 0 8px; }
.temana-fuss a { color: var(--creme); text-decoration: none; }
.temana-fuss a:hover,
.temana-fuss a:focus-visible { color: var(--weiss); text-decoration: underline; text-decoration-color: var(--akzent); text-underline-offset: 3px; }
.temana-fuss a[aria-current="page"] { color: var(--weiss); font-weight: 600; }

/* §12.2 Logo hell auf Grün (Notbehelf ohne helle Logodatei), Anschrift, Social-Links einfarbig Creme */
.temana-fuss__logo { display: inline-block; margin-bottom: 18px; }
.temana-fuss__logo-bild { width: 180px; max-width: 100%; height: auto; }
.temana-fuss__logo-bild:not(.ist-hell) { filter: brightness(0) invert(1); }
.temana-fuss__anschrift { margin: 0 0 18px; font-style: normal; }
.temana-fuss__social-titel { margin: 0 0 8px; font-weight: 600; color: var(--weiss); }
.temana-fuss .temana-fuss__social { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.temana-fuss .temana-fuss__social li { margin: 0; }
.temana-fuss__social-link { display: inline-flex; align-items: center; min-height: 44px; }
.temana-fuss__social-link.mit-ikon { justify-content: center; min-width: 44px; }
.temana-fuss__ikon {
	display: block; width: 24px; height: 24px; background: currentColor;
	-webkit-mask: var(--temana-ikon) center / contain no-repeat; mask: var(--temana-ikon) center / contain no-repeat;
}

/* §12.3 Vorteile mit Häkchen (Hellgrün auf Dunkelgrün, Akzentgrün hätte zu wenig Kontrast) */
.temana-fuss__vorteile li { position: relative; padding-left: 26px; }
.temana-fuss__vorteile li::before {
	content: ""; position: absolute; left: 0; top: .3em; width: 16px; height: 16px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.4 6.4 11.6 13 4.6' fill='none' stroke='%23CFE3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}

.temana-fuss__vorteile .temana-fuss__bonus a { color: inherit; font-weight: 600; text-underline-offset: 3px; }

/* §12.7 Knopf „Vertrag widerrufen" nach den Spalten (Germanized-Knopf, von kopf-fuss.js hierher gesetzt) */
.temana-fuss__widerruf { padding-top: 28px; }
.temana-fuss__widerruf:empty { display: none; }
.temana-fuss .eu-owb-order-withdraw-from-contract-button { background: none; padding: 0; text-align: left; }
.temana-fuss .temana-fuss__widerruf-ersatz {
	display: inline-flex; min-height: 44px; padding: 9px 18px; border-radius: 8px;
	border: 1.5px solid rgba(255, 255, 255, .75); background: transparent; color: var(--weiss);
	font-size: 14.5px; font-weight: 600; text-decoration: none;
}
.temana-fuss .temana-fuss__widerruf-ersatz:hover { background: rgba(255, 255, 255, .12); color: var(--weiss); }

/* §12.9/§12.10 Abschlusszone auf einer Höhe: Copyright links, „Sicher zahlen mit:" + Logos rechts */
.temana-fuss__abschluss {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
	margin-top: 28px; padding: 18px 0 22px; border-top: 1px solid rgba(255, 245, 225, .18); font-size: 14px;
}
.temana-fuss__copyright { margin: 0; }
.temana-fuss__zahlen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.temana-fuss__zahlen-titel { margin: 0; font-weight: 600; color: var(--weiss); }
.temana-zahlungslogos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 0; }
.temana-zahlungslogos li { margin: 0; }
.temana-zahlungslogos img { display: block; width: auto; height: 24px; }
/* Originalfarben bleiben (§12.10); auf Dunkelgrün je Logo eine helle Fläche, damit sie erkennbar sind */
.temana-fuss .temana-zahlungslogos li { padding: 4px 6px; background: var(--weiss); border-radius: 4px; }
@media (max-width: 599px) {
	.temana-fuss__abschluss { flex-direction: column; align-items: flex-start; }
}

/* Gesamtübergabe 11.10. §8.3: offizielle EU-Mitteilung unverändert – nur auf die Breite begrenzen, nie beschneiden */
.temana-fuss__gewaehrleistung { padding: 0 0 24px; font-size: 14px; }
.temana-fuss__gewaehrleistung > summary { cursor: pointer; color: var(--creme); text-decoration: underline; text-underline-offset: 3px; }
.temana-fuss__gewaehrleistung > summary:hover,
.temana-fuss__gewaehrleistung > summary:focus-visible { color: var(--weiss); }
.temana-fuss__gewaehrleistung-inhalt { margin-top: 14px; max-width: 720px; }
.temana-fuss__gewaehrleistung-bild { display: block; width: 100%; max-width: 100%; height: auto; }
.temana-fuss__gewaehrleistung-link { margin: 8px 0 0; }