/* ── Sortiment, Welle 2 (12.10.2026) – gehört zu temana-core module/sortiment-*.php ──────────────────────
   1 „Alle Produkte“ mit Registerkarten (Claus' Arbeitsgrundlage v4, GF E8)
   2 Themenseiten mit Kachelblock (Nach Thema, Ergänzte Gesamtfassung GF S.2–S.3)
   3 „NUI NONI entdecken“ (NONI-Abnahme 06.10., S.8)
   Breiten wie Kadence: Desktop ≥ 1025 px, Tablet 768–1024 px, Handy ≤ 767 px; kleine Handys ≤ 600 px. */

/* ── 1 Registerleiste: kompakt sticky (RK S.1). Steht außerhalb des Archiv-Kopfes, damit sie über das ganze
   Raster mitläuft. Klebt direkt unter dem klebenden Seitenkopf: dessen Gesamthöhe (Admin-Leiste + Serviceleiste
   + Kopf) misst assets/startseite/kopf-fuss.js als --temana-kopf-h (Bereich Startseite, 01-startseite.css). ── */
.temana-register {
	position: sticky;
	top: var(--temana-kopf-h, var(--wp-admin--admin-bar--height, 0px));
	z-index: 20;
	margin: 0 0 clamp(16px, 2.2vw, 26px);
	padding: 10px 0;
	background: var(--temana-warmweiss);
	border-bottom: 1px solid var(--temana-linie);
}
.temana-register__liste { position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.temana-register__liste li { margin: 0; }
.temana-register__liste a {
	display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px;
	border: 1px solid var(--temana-linie); border-radius: 999px; background: var(--temana-weiss);
	color: var(--temana-text); font-size: 15px; font-weight: 500; line-height: 1.3; text-decoration: none; white-space: nowrap;
	transition: border-color .15s, color .15s;
}
.temana-register__liste a span { font-size: 12.5px; color: var(--temana-text-sekundaer); }
.temana-register__liste a:hover, .temana-register__liste a:focus-visible { border-color: var(--temana-gruen); color: var(--temana-gruen); }
/* aktiv: die gezeigte Kategorie (page) oder ihre Eltern bei einer Unterkategorie (true) */
.temana-register__liste a[aria-current] { background: var(--temana-gruen); border-color: var(--temana-gruen); color: var(--temana-weiss); font-weight: 600; }
.temana-register__liste a[aria-current] span { color: rgba(255, 255, 255, .85); }
@media (max-width: 1024px) {
	/* einzeilig und wischbar statt zwei Zeilen sticky; register.js schiebt das aktive Register in die Mitte */
	.temana-register__liste { flex-wrap: nowrap; overflow-x: auto; margin-right: -16px; padding-right: 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
	.temana-register__liste::-webkit-scrollbar { display: none; }
}
@media (max-width: 600px) {
	.temana-register { padding: 8px 0; }
	.temana-register__liste a { min-height: 40px; padding: 7px 14px; font-size: 14.5px; }
}

/* ── 1 Orientierung: Unterkategorien als Filter (nur Ätherische Öle & Düfte, RK S.5) ── */
.temana-unterregister { margin: 0 0 clamp(26px, 3vw, 36px); }
.temana-unterregister ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.temana-unterregister li { margin: 0; }
.temana-unterregister a {
	display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 16px 18px;
	background: var(--temana-weiss); border: 1px solid var(--temana-linie); border-radius: var(--temana-radius-karte);
	color: var(--temana-text); text-decoration: none; transition: border-color .15s;
}
.temana-unterregister a:hover, .temana-unterregister a:focus-visible { border-color: var(--temana-gruen); }
.temana-unterregister a[aria-current] { border-color: var(--temana-gruen); box-shadow: inset 0 0 0 1px var(--temana-gruen); background: #F1F6EC; }
.temana-unterregister__name { font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--temana-gruen); }
.temana-unterregister__anzahl { font-size: 13.5px; color: var(--temana-text-sekundaer); }

/* ── 1 Orientierung: ruhige Info-Kacheln ohne Link (RK S.2: größer als Chips, deutlich kleiner als ein Hero) ── */
.temana-orientierung { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; margin: 0 0 clamp(26px, 3vw, 36px); padding: 0; list-style: none; }
.temana-orientierung__kachel { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 16px 18px; background: var(--temana-creme); border-radius: var(--temana-radius-karte); }
.temana-orientierung__kachel b { font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--temana-gruen); }
.temana-orientierung__kachel span { font-size: 14.5px; line-height: 1.5; color: var(--temana-text); }

@media (max-width: 600px) {
	.temana-unterregister ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.temana-unterregister a, .temana-orientierung__kachel { padding: 12px 14px; }
	.temana-unterregister__name { font-size: 15px; }
}

/* ── 1 „Zur schnellen Orientierung“ und Trenner zum vollständigen Raster ── */
.temana-auswahl { margin: 0 0 clamp(30px, 3.4vw, 44px); }
.temana-auswahl h2, .temana-katalog-kopf h2 { margin: 0 0 14px; font-size: clamp(21px, 2.2vw, 26px); line-height: 1.25; font-weight: 700; color: var(--temana-text); }
.temana-auswahl ul.products { margin-bottom: 0; }
@media (min-width: 768px) { .temana-auswahl ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.temana-auswahl__hinweis { margin: 12px 0 0; max-width: 70ch; font-size: 14px; line-height: 1.5; color: var(--temana-text-sekundaer); }
.temana-katalog-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 24px; margin: 0 0 18px; padding-bottom: 12px; border-bottom: 2px solid var(--temana-akzent); }
.temana-katalog-kopf h2 { margin: 0; color: var(--temana-gruen); }
.temana-katalog-kopf p { margin: 0; font-size: 14px; color: var(--temana-text-sekundaer); }

/* ── 1 Wissen und kleiner Abschluss (Bausteine .temana-themenwissen / .temana-finderhinweis aus temana.css) ── */
.temana-register__knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
.temana-register__knoepfe a.temana-register__zweitknopf { background: transparent; color: var(--temana-gruen); border: 1.5px solid var(--temana-gruen); }
.temana-register__knoepfe a.temana-register__zweitknopf:hover,
.temana-register__knoepfe a.temana-register__zweitknopf:focus-visible { background: var(--temana-gruen); color: var(--temana-weiss); }
.temana-register__andere { margin: clamp(22px, 2.6vw, 32px) 0 0; }
.temana-register__andere a { font-weight: 600; text-decoration: none; }

/* ── 2 Themenseiten (body.temana-themenseite) und NUI NONI entdecken (body.temana-noni-entdecken) ── */
.temana-themenseite .product-archive-hero-section,
.temana-noni-entdecken .product-archive-hero-section { display: none; } /* Rückfall, falls kadence_post_layout nicht greift */
.temana-themenseite .woocommerce-result-count { display: none; }     /* G11: Ergebniszeile weg, Sortierung bleibt */
.temana-themenseite mark.temana-offen,
.temana-noni-entdecken mark.temana-offen { display: none; }          /* G9: gelbe Vermerke nie öffentlich */

.temana-thema { margin: 0 0 clamp(26px, 3vw, 40px); }
.temana-thema .temana-brotkrume { margin: 0 0 12px; }
.temana-thema__kopf { position: relative; margin: 0 0 clamp(22px, 2.8vw, 34px); }
.temana-thema__kopf h1 { margin: 0 0 10px; font-size: clamp(30px, 4vw, 44px); line-height: 1.15; font-weight: 700; color: var(--temana-text); }
.temana-thema__einstieg { margin: 0; max-width: 60ch; font-size: 17px; line-height: 1.55; color: var(--temana-text); }
.temana-thema__einstieg::after { content: ""; display: block; width: 42px; height: 3px; margin-top: 16px; border-radius: 2px; background: var(--temana-gruen); }
/* G3: Symbol groß, frei auf der Fläche – kein Kreis, keine Box. 130 / 100 / 72 px. */
.temana-thema__kopf--symbol { padding-right: 160px; min-height: 140px; }
.temana-thema__symbol { position: absolute; top: 0; right: 0; width: 130px; height: 130px; object-fit: contain; }
@media (max-width: 1024px) {
	.temana-thema__kopf--symbol { padding-right: 124px; min-height: 104px; }
	.temana-thema__symbol { width: 100px; height: 100px; }
}
@media (max-width: 767px) {
	.temana-thema__kopf--symbol { padding-right: 86px; min-height: 76px; }
	.temana-thema__symbol { width: 72px; height: 72px; }
	.temana-thema__kopf h1 { font-size: clamp(27px, 7.4vw, 32px); }
}

/* G4: zwei Hauptkacheln – Produktbild auf getönter Fläche (multiply statt Freistellen), Name, Pfeil; ganz klickbar */
.temana-thema__haupt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0 0 clamp(26px, 3vw, 38px); }
.temana-thema__haupt--1 { grid-template-columns: minmax(0, 1fr); }
.temana-thema__tipp { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.temana-tipp {
	display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 16px;
	min-height: 132px; padding: 18px 20px 18px 24px; background: #EEF4E8; border: 1px solid #DCE7D2; border-radius: var(--temana-radius-karte);
	color: var(--temana-text); text-decoration: none; transition: border-color .15s, box-shadow .15s;
}
.temana-tipp:hover, .temana-tipp:focus-visible { border-color: var(--temana-gruen); box-shadow: 0 12px 26px -20px rgba(34, 39, 34, .55); color: var(--temana-text); }
.temana-tipp__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.temana-tipp__label { font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--temana-gruen); }
.temana-tipp__name { font-size: clamp(19px, 1.9vw, 23px); font-weight: 700; line-height: 1.25; color: var(--temana-text); overflow-wrap: anywhere; }
/* Claus' kurze Zeile unter dem Namen (Beispielbild GF S.2) */
.temana-tipp__zeile { font-size: 15.5px; line-height: 1.45; color: var(--temana-text); }
.temana-tipp__bild { display: block; width: 110px; height: 110px; }
.temana-tipp__bild img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.temana-tipp__pfeil { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--temana-weiss); color: var(--temana-gruen); }
/* Angabe-Zeile unter dem ersten Tipp – seit CLAUS-1-ZU-1 aus (sortiment-themen.json schalter.angabe_zeile) */
.temana-thema__angabe { margin: 0; padding: 0 4px; font-size: 13px; line-height: 1.5; color: var(--temana-text-sekundaer); }
.temana-thema__angabe-hinweis { display: block; margin-top: 4px; font-size: 12.5px; }
@media (max-width: 767px) { .temana-thema__haupt { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
	.temana-tipp { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; min-height: 0; padding: 14px 14px 14px 16px; }
	.temana-tipp__bild { width: 80px; height: 80px; }
	.temana-tipp__pfeil { display: none; } /* die ganze Kachel bleibt Link */
}

/* G5: „Optional – je nach Bedarf“, 1 Gruppe volle Breite, 2 halbe, 3 Drittel; mobil untereinander */
.temana-thema__optional { margin: 0 0 16px; padding-top: clamp(22px, 2.6vw, 30px); border-top: 1px solid var(--temana-linie); }
.temana-thema__optional h2 { margin: 0 0 16px; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; font-weight: 700; color: var(--temana-gruen); }
/* Satz unter „Optional – je nach Bedarf“ und Gruppen-Unterzeile (Beispielbild GF S.2) */
.temana-thema__optional-text { margin: -6px 0 16px; font-size: 16px; line-height: 1.5; color: var(--temana-text); }
.temana-thema__gruppe-text { position: relative; z-index: 1; margin: -4px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--temana-text-sekundaer); }
.temana-thema__gruppen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 768px) { .temana-thema__gruppen--2, .temana-thema__gruppen--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1025px) { .temana-thema__gruppen--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.temana-thema__gruppe { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 20px 22px; background: var(--temana-weiss); border: 1px solid var(--temana-linie); border-radius: var(--temana-radius-karte); }
.temana-thema__gruppe--bild { padding-bottom: 130px; }
.temana-thema__gruppe-icon { width: 48px; height: 48px; }
.temana-thema__gruppe h3 { margin: 0; font-size: 18px; line-height: 1.3; font-weight: 700; color: var(--temana-text); }
.temana-thema__gruppe ul { position: relative; z-index: 1; margin: 0; padding: 0; list-style: none; }
.temana-thema__gruppe li { margin: 0; }
.temana-thema__gruppe li a { position: relative; display: block; padding: 6px 24px 6px 0; font-size: 15px; line-height: 1.4; color: var(--temana-gruen); text-decoration: underline; text-decoration-color: rgba(43, 114, 61, .35); text-underline-offset: 3px; }
.temana-thema__gruppe li a:hover, .temana-thema__gruppe li a:focus-visible { text-decoration-color: currentColor; }
.temana-thema__gruppe li a::after { content: "›"; position: absolute; right: 6px; top: 50%; transform: translateY(-52%); font-size: 19px; line-height: 1; color: var(--temana-text-sekundaer); }
.temana-thema__gruppe-bild { position: absolute; right: 0; bottom: 0; width: 55%; max-width: 220px; height: auto; pointer-events: none; }
@media (max-width: 600px) { .temana-thema__gruppe { padding: 16px; } }

/* G7: „nicht alle kombinieren“ unter dem Kachelblock */
.temana-thema__hinweis { margin: 14px 0 0; max-width: 70ch; font-size: 15px; line-height: 1.5; color: var(--temana-text-sekundaer); }

/* G10/G12: Produktbereich – Überschrift, Desktop vier Karten je Reihe. G13 (Kurzbeschreibung fett) ist durch Claus'
   finale Übergabe 22.10. ersetzt: Regular 400 (20-nach-thema.css). */
.temana-thema__produkte { margin: clamp(6px, 1.4vw, 14px) 0 14px; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; font-weight: 700; color: var(--temana-text); }
@media (min-width: 1025px) { body.temana-themenseite ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
body.temana-themenseite ul.products li.product .product-excerpt,
body.temana-themenseite ul.products li.product .product-excerpt p,
body.temana-themenseite ul.products li.product .product-excerpt strong { font-weight: 400; color: var(--temana-text); }

/* G14: dezenter Rückweg zwischen Raster und Wissen */
.temana-thema__zurueck { margin: clamp(22px, 2.6vw, 32px) 0 0; }
.temana-thema__zurueck a { font-size: 15px; font-weight: 600; color: var(--temana-gruen); text-decoration: none; }
.temana-thema__zurueck a:hover, .temana-thema__zurueck a:focus-visible { text-decoration: underline; }

/* ── 3 NUI NONI entdecken: Einstieg, Gruppen (li.temana-abschnitt aus temana.css), eingeklappter Rest ── */
.temana-noni__einstieg { margin: 0 0 clamp(26px, 3vw, 38px); padding: clamp(18px, 2.4vw, 26px); background: var(--temana-creme); border-radius: var(--temana-radius-karte); }
.temana-noni__einstieg h2 { margin: 0 0 6px; font-size: clamp(21px, 2.2vw, 26px); line-height: 1.25; color: var(--temana-gruen); }
.temana-noni__einstieg > p { margin: 0 0 14px; max-width: 62ch; font-size: 16.5px; line-height: 1.5; }
.temana-noni__einstieg .temana-thema__haupt { margin: 0; max-width: 640px; }
.temana-noni__einstieg .temana-tipp { background: var(--temana-weiss); border-color: var(--temana-linie); }
.temana-noni__einstieg .temana-tipp__bild img { mix-blend-mode: normal; }
.temana-noni__alt-titel { margin: 16px 0 6px; font-size: 14px; font-weight: 600; color: var(--temana-text); }
.temana-noni__alt { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; }
.temana-noni__weitere { margin: clamp(28px, 3.2vw, 40px) 0 0; border-top: 1px solid var(--temana-linie); }
/* Sprungziele für die Familien-Kacheln auf Seite 393: Den Abstand unter dem klebenden Kopf setzt 01-startseite.css
   global (scroll-padding-top); die alten 110 px aus temana.css gelten nur noch, solange es den Wert nicht gibt. */
.temana-noni-entdecken ul.products li.temana-abschnitt,
.temana-noni__einstieg,
.temana-noni__weitere { scroll-margin-top: max(0px, calc(110px - var(--temana-kopf-h, 0px))); }
.temana-noni__weitere > summary { cursor: pointer; padding: 18px 0; font-size: clamp(19px, 2vw, 23px); font-weight: 700; color: var(--temana-gruen); list-style: none; }
.temana-noni__weitere > summary::-webkit-details-marker { display: none; }
.temana-noni__weitere > summary::after { content: " ▾"; font-size: .8em; }
.temana-noni__weitere[open] > summary::after { content: " ▴"; }
.temana-noni__untergruppe { margin: 0 0 26px; }
.temana-noni__untergruppe h3 { margin: 0 0 12px; font-size: 18px; line-height: 1.3; color: var(--temana-text); }
.temana-noni__alle { margin: 4px 0 0; }
.temana-noni__alle a { font-weight: 600; text-decoration: none; }
.temana-noni__alle a::after { content: " →"; }

@media (prefers-reduced-motion: reduce) {
	.temana-register__liste a, .temana-unterregister a, .temana-tipp { transition: none; }
}