/* ── 07 Wissen & Anwendung – Welle 2 (12.10.2026) ─────────────────────────────────────────────────
   Claus 06.10.: Übersicht §4/§8 (Vorlage temana-naehrstofflexikon-vorschau.html, Werte auf die
   Theme-Variablen abgebildet), Wissenskarten-Master §6, Hauptseite §3.2 (Knöpfe auf einer Grundlinie).
   Lädt nach temana.css und überschreibt dort nur, was nötig ist. */

/* Hauptseite „Fünf Bereiche“ (§3.2): „Bereich entdecken“ unten auf einer Grundlinie. Nur Kartenreihen,
   deren Knöpfe in den Wissensbereich führen – Kontakt- und Produktkarten bleiben, wie sie sind. */
.temana-spalten:has(> .temana-karte > .temana-karte__knopf[href^="/wissen/"]) > .temana-karte{display:flex; flex-direction:column}
.temana-spalten:has(> .temana-karte > .temana-karte__knopf[href^="/wissen/"]) > .temana-karte > p{margin-bottom:14px}
.temana-spalten:has(> .temana-karte > .temana-karte__knopf[href^="/wissen/"]) > .temana-karte > .temana-karte__knopf{margin-top:auto}

/* ── Bereichsübersicht ── */
.temana-uebersicht{margin-top:clamp(8px,1.6vw,16px)}
.temana-uebersicht__werkzeuge{margin:0 0 24px; padding:22px; background:var(--weiss); border:1px solid var(--linie); border-radius:18px; box-shadow:0 8px 24px rgba(30,60,35,.06)}
.temana-uebersicht__suchzeile{display:grid; grid-template-columns:1fr auto; gap:14px; align-items:center}
.temana-uebersicht__suchfeld{display:flex; align-items:center; gap:10px; height:50px; padding:0 14px; background:var(--weiss); border:1px solid #CFD8CD; border-radius:12px; cursor:text}
.temana-uebersicht__suchfeld:focus-within{border-color:var(--gruen); box-shadow:0 0 0 3px rgba(43,114,61,.15)}
.temana-uebersicht__suchfeld svg{flex:none; opacity:.6; color:var(--text)}
.temana-uebersicht__suchfeld input{flex:1; min-width:0; width:100%; height:100%; padding:0; border:0; outline:0; background:transparent; box-shadow:none; font:inherit; font-size:16px; color:var(--text)}
.temana-uebersicht__zaehler{margin:0; padding:0 4px; white-space:nowrap; font-size:14px; color:var(--text-sek)}
.temana-uebersicht__zaehler strong{color:var(--text)}
.temana-uebersicht__label{margin:18px 0 0; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-sek)}
.temana-uebersicht__filter{display:flex; flex-wrap:wrap; gap:9px; margin-top:10px}
.temana-uebersicht__pille{display:inline-flex; align-items:center; gap:4px; min-height:38px; padding:8px 13px; border:1px solid #CFD8CD; border-radius:999px; background:var(--weiss); color:var(--text); font-size:13.5px; line-height:1.25; text-decoration:none; transition:border-color .15s ease, background .15s ease}
.temana-uebersicht__pille span{opacity:.7}
.temana-uebersicht__pille:hover, .temana-uebersicht__pille:focus-visible{border-color:var(--gruen); color:var(--text)}
.temana-uebersicht__pille[aria-current="true"]{background:var(--gruen); border-color:var(--gruen); color:#fff; font-weight:600}
.temana-uebersicht__az{display:flex; flex-wrap:wrap; gap:5px; margin-top:12px}
.temana-uebersicht__az a{display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:30px; padding:0 6px; border-radius:7px; color:var(--text); font-size:13.5px; text-decoration:none}
.temana-uebersicht__az a[href]:hover, .temana-uebersicht__az a[href]:focus-visible{background:#EAF2E4; color:var(--gruen-dunkel)}
.temana-uebersicht__az a[aria-current="true"]{background:#EAF2E4; color:var(--gruen-dunkel); font-weight:700}
.temana-uebersicht__az a[aria-disabled="true"]{color:var(--text-sek); opacity:.4; cursor:default}
.temana-uebersicht__kopf{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:28px 0 14px}
.temana-uebersicht__kopf h2{margin:0; font-size:22px}
.temana-uebersicht__kopf p{margin:0; font-size:13.5px; color:var(--text-sek)}
.temana-uebersicht__raster{grid-template-columns:repeat(4,minmax(0,1fr))}
.temana-uebersicht__leer{padding:42px 24px; background:var(--weiss); border:1px dashed #CBD5C9; border-radius:14px; text-align:center; color:var(--text-sek)}
.temana-uebersicht__leer p{margin:0}
.temana-uebersicht__leer strong{color:var(--text)}
.temana-uebersicht__leer[hidden], .temana-wissenskarte[hidden]{display:none}

/* Karten gleich hoch, „Im Lexikon lesen →“ unten bündig (§4, §6.6): das Raster streckt die Karten,
   der Link sitzt mit margin-top:auto (temana.css) am Boden – dafür ist hier nichts weiter nötig.
   Ganze Karten und Pillen sind Links: die globale Hover-Unterstreichung (temana.css „Links“) würde
   jede Zeile unterstreichen – Rückmeldung gibt hier der grüne Rahmen. */
.temana-wissenskarte:hover, .temana-wissenskarte:focus-visible,
.temana-wissen__produkt:hover, .temana-wissen__produkt:focus-visible,
.temana-uebersicht__pille:hover, .temana-uebersicht__pille:focus-visible,
.temana-uebersicht__az a:hover, .temana-uebersicht__az a:focus-visible{text-decoration:none}
.temana-wissenskarte:focus-visible, .temana-wissen__produkt:focus-visible{border-color:var(--gruen); outline:2px solid var(--gruen); outline-offset:2px}

@media (min-width:900px){
	/* Werkzeugleiste bleibt beim Blättern sichtbar – nur am Desktop (Vorschau: sticky). */
	.temana-uebersicht__werkzeuge{position:sticky; top:12px; z-index:5}
	.admin-bar .temana-uebersicht__werkzeuge{top:44px}
}
@media (max-width:899px){
	.temana-uebersicht__raster{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
	.temana-uebersicht__werkzeuge{padding:16px; border-radius:14px}
	.temana-uebersicht__suchzeile{grid-template-columns:1fr; gap:8px}
	.temana-uebersicht__raster{grid-template-columns:1fr}
	.temana-uebersicht__kopf{flex-wrap:wrap; align-items:baseline; gap:4px 12px}
	.temana-uebersicht__az a{min-width:34px; height:34px}   /* Trefferfläche für den Finger */
}

/* ── Detailseite (Wissenskarten-Master §6) ── */
.temana-wissen__titel{margin:0 0 18px}
.single-temana_wissen .temana-brotkrume{margin-bottom:10px}
/* untere Blöcke kompakt und gleichmäßig (§6.6, §8). Ursache der großen Leerräume: die generische Regel
   `section{padding-block:clamp(48px,5.5vw,76px)}` (temana.css, Abschnitte der Landingseiten) traf auch
   diese <section> – je Block bis 152 px zusätzlich. Gleiche Lösung wie `section.temana-pblock` (0.7.7). */
section.temana-wissen__block, section.temana-uebersicht{padding-block:0}
.temana-wissen__block{margin:24px 0 0}
.temana-wissen__block h2{margin-bottom:10px}
.temana-wissen__unterzeile{margin:-4px 0 12px; font-size:15px; line-height:1.5; color:var(--text-sek)}
/* Produktkarten gleich hoch, Bild in fester Proportion, Name zweizeilig reserviert, Preis unten (§6.4) */
.temana-wissen__produkte{align-items:stretch}
.temana-wissen__produktbild{display:block; aspect-ratio:1/1; overflow:hidden; border-radius:8px; background:var(--warmweiss)}
.temana-wissen__produktbild img{width:100%; height:100%; object-fit:contain; border-radius:8px}
.temana-wissen__produkt .name{min-height:2.7em; line-height:1.35}
.temana-wissen__produkt .preis{margin-top:auto}
/* Fachliche Grundlage und Rücklink (§6.7) */
.temana-wissen__fuss{margin:28px 0 0; padding-top:14px; border-top:1px solid var(--linie)}
.temana-wissen__fuss .temana-geprueft{margin:0; padding:0; border:0}
.temana-wissen__zurueck{margin:10px 0 0; font-size:15px}
.temana-wissen__zurueck a{font-weight:600; color:var(--gruen); text-decoration:none}
.temana-wissen__zurueck a:hover, .temana-wissen__zurueck a:focus-visible{text-decoration:underline}
@media (max-width:600px){
	.temana-wissen__block{margin-top:20px}
	.temana-wissen__produkte{grid-template-columns:repeat(2,minmax(0,1fr))}
}