/*
 * TeMana Natura – Designsystem
 * Quelle: „Designkonzept & UX-Leitfaden" (Claus Wolkerstorfer, 09/2026), §3 und §11.
 * Flächen: ca. 70–75 % Warmweiß/Weiß, 10–15 % Creme, ca. 10 % Dunkelgrün, 3–5 % Hellgrün.
 * Grün führt, dominiert nicht. Hellgrün nie für Text auf Weiß (2,97:1 – fällt durch WCAG AA).
 * Die Kadence-Palette selbst wird in functions.php gesetzt (Filter kadence_palette_option).
 */

:root {
	/* Farbwelt §3.1 */
	--temana-gruen: #2B723D;
	--temana-gruen-dunkel: #245f33;   /* nur Hover/aktiv von Flächen, Kontrast zu Weiß 7,4:1 */
	--temana-akzent: #79A039;         /* Labels, Häkchen, Unterstreichungen, Diagramme – nie Text auf Weiß */
	--temana-creme: #FFF5E1;
	--temana-warmweiss: #FFFCF7;
	--temana-weiss: #FFFFFF;
	--temana-text: #222722;
	--temana-text-sekundaer: #646B64;
	--temana-linie: #E7E3DB;

	/* Formen §3.3 */
	--temana-radius-karte: 12px;
	--temana-radius-button: 8px;
	--temana-sektion: clamp(44px, 5vw, 72px);

	/* Kadence-Buttons und Hervorhebung: Hover dunkelgrün statt Hellgrün */
	--global-palette-btn-bg: var(--temana-gruen);
	--global-palette-btn-bg-hover: var(--temana-gruen-dunkel);
	--global-palette-btn: var(--temana-weiss);
	--global-palette-btn-hover: var(--temana-weiss);
	--global-palette-highlight: var(--temana-gruen);
	--global-palette-highlight-alt: var(--temana-gruen-dunkel);

	/* Typografie §3.2: durchgehend Poppins, keine zweite Display-Schrift */
	--global-body-font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--global-heading-font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--global-primary-nav-font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

body {
	background: var(--temana-warmweiss);
	color: var(--temana-text);
	font-family: var(--global-body-font-family);
	font-size: 17px;          /* 17–18 px, für 45+ bewusst großzügig (§3.2, §11) */
	font-weight: 400;
	line-height: 1.65;
}

@media (min-width: 1024px) {
	body { font-size: 18px; }
}

h1, h2, h3, h4, .product_title {
	font-family: var(--global-heading-font-family);
	font-weight: 600;          /* klar, ruhig, nicht überfettet */
	color: var(--temana-text);
	letter-spacing: -0.01em;
	line-height: 1.2;
}

h1, .entry-header h1.entry-title, .product_title { font-size: clamp(34px, 5vw, 50px); }  /* H1 46–52 px */
h2 { font-size: clamp(28px, 3.8vw, 38px); }                                              /* H2 34–40 px */
h3 { font-size: clamp(22px, 2.6vw, 26px); }                                              /* H3 24–28 px */

/* Karten-Titel in H3-Größe, nicht in H1 (Wissens- und Produktkarten) */
.loop-entry .entry-title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: clamp(20px, 2.2vw, 24px);
	font-weight: 600;
	line-height: 1.3;
}

/* Navigation 16–17 px · 500 – Hauptmenü, Dropdowns, mobiles Menü */
.main-navigation a,
.header-navigation a,
.header-navigation .header-menu-container ul ul li.menu-item > a {
	font-size: 16.5px;
	font-weight: 500;
}
.header-navigation .header-menu-container ul ul li.menu-item > a { color: var(--temana-text); }
.header-navigation .header-menu-container ul ul.sub-menu {
	background: var(--temana-weiss);
	border: 1px solid var(--temana-linie);
	border-radius: var(--temana-radius-karte);
}
.mobile-navigation ul li,
.mobile-navigation ul li a {
	font-size: 17px;
	font-weight: 500;
}
#mobile-drawer .drawer-inner {
	background: var(--temana-warmweiss);
	color: var(--temana-text);
}
#mobile-drawer .drawer-inner a { color: var(--temana-text); }

/* Kleine Hinweise mind. 14 px, keine schwer lesbaren Grautöne (§3.2) */
small,
.temana-hinweis,
.entry-meta,
.entry-taxonomies,
.wc-gzd-additional-info,
.wc-gzd-additional-info-loop,
.product-units,
.price-unit {
	font-size: max(14px, 0.85em);
	color: var(--temana-text-sekundaer);
	text-transform: none;
}

/* Links: Text bleibt dunkelgrün, Akzent nur als Unterstreichung */
a { color: var(--temana-gruen); }
a:hover,
a:focus-visible {
	color: var(--temana-gruen);
	text-decoration: underline;
	text-decoration-color: var(--temana-akzent);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* Buttons §3.2/§11: 16 px · 600, mindestens 48 px hoch, Radius 8 px */
/* Bewusst kein nacktes `button`: Kadence nutzt <button> auch für Menü, Suche und Schließen. */
.button,
button.button,
.single_add_to_cart_button,
input[type="submit"],
.wp-block-button__link,
.wp-element-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce ul.products li.product .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 24px;
	border-radius: var(--temana-radius-button);
	font-family: var(--global-body-font-family);
	font-size: 16px;
	font-weight: 600;
	text-transform: none;
	background: var(--temana-gruen);
	color: var(--temana-weiss);
	border: 1px solid var(--temana-gruen);
}

.button:hover, .button:focus-visible, .button:active,
.single_add_to_cart_button:hover, .single_add_to_cart_button:focus-visible,
input[type="submit"]:hover, input[type="submit"]:focus-visible,
.wp-block-button__link:hover, .wp-block-button__link:focus-visible,
.wp-element-button:hover, .wp-element-button:focus-visible,
.woocommerce a.button:hover, .woocommerce a.button:focus-visible,
.woocommerce button.button:hover, .woocommerce button.button:focus-visible,
.woocommerce ul.products li.product .button:hover {
	background: var(--temana-gruen-dunkel);
	border-color: var(--temana-gruen-dunkel);
	color: var(--temana-weiss);
	text-decoration: none;
}

.woocommerce ul.products li.product .button.added { min-height: 0; }

/* Zweiter CTA als Outline (§5 Hero) */
.is-style-outline .wp-block-button__link,
.button.temana-outline {
	background: transparent;
	color: var(--temana-gruen);
	border: 1.5px solid var(--temana-gruen);
}

/* Karten §3.3: weiße Karte, 1-px-Rahmen, Radius 10–14 px, kaum Schatten */
.temana-karte,
.woocommerce ul.products li.product {
	background: var(--temana-weiss);
	border: 1px solid var(--temana-linie);
	border-radius: var(--temana-radius-karte);
	box-shadow: none;
}

/* Vertrauens- und Beratungsflächen */
.temana-creme { background: var(--temana-creme); }

/* Große Sektionen mit 80–110 px vertikalem Abstand */
.temana-sektion { padding-block: var(--temana-sektion); }

/* Footer dunkelgrün (§5 Nr. 9) – alles darin hell, sonst unlesbar */
.site-footer,
#colophon {
	background: var(--temana-gruen);
	color: var(--temana-weiss);
}
.site-footer a,
.site-footer :is(h1, h2, h3, h4, h5, h6, .widget-title),
#colophon .footer-navigation .footer-menu-container > ul li a,
#colophon .footer-navigation .footer-menu-container > ul li a:hover,
#colophon .footer-navigation .footer-menu-container > ul li.current-menu-item > a {
	color: var(--temana-weiss);
}
#colophon .footer-navigation .footer-menu-container > ul li a:hover,
.site-footer a:hover {
	text-decoration: underline;
	text-decoration-color: var(--temana-creme);
}
.site-footer :is(small, .temana-hinweis) { color: var(--temana-creme); } /* 5,4:1 auf Grün */
.site-footer .button,
.site-footer .wp-element-button {
	background: var(--temana-creme);
	color: var(--temana-gruen);
	border-color: var(--temana-creme);
}

/* Keine hektischen Animationen (§11) */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ==================================================================
   Gestaltung aus dem abgestimmten Entwurf (entwurf/startseite.html,
   Fassung 2 vom 11.09.2026). Dort wird gestaltet, hier wird eingebaut.
   Bei Aenderungen: erst den Entwurf anfassen, dann uebertragen.
   ================================================================== */

:root{
  --gruen:#2B723D;
  --gruen-dunkel:#1C4B29;
  --gruen-tief:#153A20;
  --akzent:#79A039;
  --creme:#FFF5E1;
  --warmweiss:#FFFCF7;
  --weiss:#FFFFFF;
  --text:#222722;
  --text-sek:#646B64;
  --linie:#E7E3DB;
  --radius:12px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--warmweiss); color:var(--text);
  font:400 17px/1.62 "Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{line-height:1.12; letter-spacing:-.02em; margin:0; font-weight:600}
/* height:auto ist Pflicht, sonst schlaegt das HTML-Attribut height durch */
img{max-width:100%; display:block; height:auto}
a{color:var(--gruen)}

/* Flaechen laufen randlos, der Inhalt darin ist auf die Kadence-Breite begrenzt. */
.temana-hero,
.temana-sektion,
.temana-haltung,
.temana-abschluss,
.temana-tafel{
	width:100vw; max-width:100vw; margin-inline:calc(50% - 50vw);
}
.temana-hero > .wp-block-group__inner-container,
.temana-sektion > .wp-block-group__inner-container,
.temana-haltung > .wp-block-group__inner-container,
.temana-abschluss > .wp-block-group__inner-container,
.temana-tafel > .wp-block-group__inner-container{
	max-width:var(--global-content-width,1180px);
	margin-inline:auto;
	padding-inline:clamp(20px,4vw,40px);
}
.temana-hero > .wp-block-group__inner-container{
	display:grid; gap:clamp(28px,4vw,54px); align-items:center;
}
@media(min-width:900px){
	.temana-hero > .wp-block-group__inner-container{
		grid-template-columns:1fr minmax(0,486px); align-items:stretch;
	}
}
.temana-claus{display:grid; gap:clamp(24px,3.5vw,42px); align-items:start}
@media(min-width:860px){.temana-claus{grid-template-columns:.76fr 1.24fr}}

/* ---------- Abschnitte ---------- */
section{padding-block:clamp(48px,5.5vw,76px)}
.temana-creme{background:var(--creme)}
.temana-weiss{background:var(--weiss)}
h2{font-size:clamp(1.7rem,3vw,2.35rem); margin:0 0 14px}
.temana-vorspann{font-size:1.06rem; color:var(--text-sek); max-width:47rem; margin:0 0 30px}

/* ---------- Knoepfe ---------- */
.wp-block-buttons{display:flex; gap:12px; flex-wrap:wrap}
.wp-element-button{display:inline-block; padding:13px 25px; border-radius:8px; text-decoration:none; font-weight:600; font-size:15.5px; border:2px solid var(--gruen); background:var(--gruen); color:#fff; transition:background .15s ease,border-color .15s ease}
.wp-element-button:hover{background:var(--gruen-dunkel); border-color:var(--gruen-dunkel)}
.is-style-outline .wp-block-button__link{background:transparent; color:var(--gruen)}
.is-style-outline .wp-block-button__link:hover{background:var(--gruen); color:#fff}
.temana-cta .wp-block-button__link{background:#fff; border-color:#fff; color:var(--gruen)}
.temana-cta .wp-block-button__link:hover{background:var(--creme); border-color:var(--creme)}

/* ---------- Hero ---------- */
.temana-hero{background:var(--creme); padding-block:clamp(44px,5vw,68px); overflow:hidden}
.temana-hero__in{display:grid; gap:clamp(28px,4vw,54px); align-items:center}
@media(min-width:900px){.temana-hero__in{grid-template-columns:1fr minmax(0,486px)}}
.temana-hero h1{font-size:clamp(2.2rem,4.2vw,3.15rem); margin:0 0 20px; max-width:15ch}
.temana-hero h1 em{font-style:normal; color:var(--gruen)}
.temana-hero__lead{font-size:clamp(1.06rem,1.6vw,1.22rem); color:var(--text-sek); max-width:31rem; margin:0 0 28px}
.temana-hero .wp-block-buttons{margin-bottom:32px}
.temana-kennzahlen{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2.4vw,34px); padding-top:24px; border-top:1px solid rgba(34,39,34,.14);
}
.temana-kennzahlen div{display:flex; flex-direction:column; gap:3px; min-width:0}
.temana-kennzahlen b{font-size:clamp(1.5rem,2.2vw,1.9rem); font-weight:600; color:var(--gruen); line-height:1; font-variant-numeric:tabular-nums}
.temana-kennzahlen span{font-size:13.5px; color:var(--text-sek); line-height:1.35}
/* Auf schmalen Geraeten sind drei Spalten zu eng — dort untereinander. */
@media(max-width:520px){
  .temana-kennzahlen{grid-template-columns:1fr; gap:14px}
  .temana-kennzahlen div{flex-direction:row; align-items:baseline; gap:10px}
  .temana-kennzahlen b{min-width:4.2rem}
}
.temana-hero__bild{margin:0; position:relative}
.temana-hero__bild img{width:100%; aspect-ratio:4/3; object-fit:cover; object-position:62% 58%; border-radius:var(--radius)}
@media(min-width:900px){
  /* Der Text bestimmt die Hoehe; das Bild zieht mit, sonst bleibt oben Creme-Flaeche leer. */
  .temana-hero__in{align-items:stretch}
  .temana-hero__bild{display:flex}
  .temana-hero__bild img{aspect-ratio:auto; height:100%; min-height:430px}
}
.temana-herkunft{
  position:absolute; left:14px; bottom:14px; display:flex; align-items:center; gap:8px;
  background:rgba(255,252,247,.93); border-radius:100px; padding:7px 15px 7px 11px;
  font-size:13px; color:var(--text); box-shadow:0 6px 20px -12px rgba(0,0,0,.5);
}
.temana-herkunft::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--akzent); flex:0 0 auto}
.temana-herkunft i{font-style:italic; color:var(--text-sek)}

/* ---------- Haltungs-Band ---------- */
.temana-haltung{background:var(--gruen); color:#fff; text-align:center; padding-block:clamp(42px,4.5vw,62px)}
.temana-haltung p{margin:0 auto; max-width:24ch; font-size:clamp(1.6rem,3.4vw,2.6rem); font-weight:600; line-height:1.22; letter-spacing:-.02em}
.temana-haltung b{display:block; color:#CFE3B8; font-weight:600}
.temana-haltung small{display:block; margin-top:16px; font-size:15px; font-weight:400; color:rgba(255,255,255,.85)}

/* ---------- Themenkacheln ---------- */
.temana-kacheln{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr)); gap:14px}
.temana-kachel{
  display:flex; flex-direction:column; gap:10px;
  background:var(--creme); border:1px solid transparent; border-radius:12px;
  padding:20px 20px 18px; text-decoration:none; color:inherit;
  transition:border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.temana-creme .temana-kachel{background:var(--weiss); border-color:var(--linie)}
.temana-kachel:hover,.temana-kachel:focus-visible{
  border-color:var(--gruen); transform:translateY(-2px);
  box-shadow:0 12px 26px -20px rgba(34,39,34,.55);
}
.temana-kachel svg{width:26px; height:26px; stroke:var(--gruen); fill:none; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round; opacity:.9; transition:opacity .16s ease}
.temana-kachel:hover svg{opacity:1}
.temana-kachel b{display:block; color:var(--text); font-size:17px; font-weight:700; line-height:1.25} /* 0.7.9: wie .titel auf /thema-uebersicht/, GF 16.09. */
.temana-kachel span{display:block; font-size:14.5px; color:var(--text-sek); line-height:1.42}
.temana-kachel .start{
  margin-top:auto; padding-top:12px; border-top:1px solid rgba(34,39,34,.09);
  font-size:13.5px; color:var(--text-sek);
}
.temana-kachel .start em{font-style:normal; font-weight:600; color:var(--gruen)}

/* Die NONI-Kachel trägt den Kern des Sortiments und bekommt deshalb mehr Platz */
.temana-kachel--breit{
  background:var(--gruen-tief); border-color:transparent; color:#fff;
  grid-column:span 1; position:relative; overflow:hidden; padding:22px 22px 20px;
}
@media(min-width:700px){.temana-kachel--breit{grid-column:span 2}}
.temana-kachel--breit svg{stroke:#CFE3B8}
.temana-kachel--breit b{color:#fff; font-size:18px}
.temana-kachel--breit span{color:rgba(255,255,255,.85)}
.temana-kachel--breit .start{border-top-color:rgba(255,255,255,.2); color:rgba(255,255,255,.78)}
.temana-kachel--breit .start em{color:#CFE3B8}
.temana-kachel--breit:hover{border-color:transparent; box-shadow:0 14px 30px -20px rgba(0,0,0,.7)}
.temana-kachel__bild{
  position:absolute; right:0; top:0; height:100%; width:46%;
  object-fit:cover; object-position:52% 50%; pointer-events:none;
  /* Kein Kreis mit harter Kante — die Flaeche laeuft nach links weich ins Gruen aus. */
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.85) 46%,#000 78%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.85) 46%,#000 78%);
}
@media(max-width:699px){.temana-kachel__bild{display:none}}
.temana-kachel--breit b,.temana-kachel--breit span,.temana-kachel--breit .start{max-width:calc(100% - 150px); position:relative; z-index:1}

/* ---------- Produkte ---------- */
.temana-produkte{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,214px),1fr)); gap:16px; margin-bottom:22px}
.temana-produkt{display:block; text-decoration:none; color:inherit; background:var(--weiss); border:1px solid var(--linie); border-radius:var(--radius); overflow:hidden; transition:border-color .15s ease,box-shadow .15s ease}
.temana-produkt:hover,.temana-produkt:focus-visible{border-color:var(--gruen); box-shadow:0 10px 26px -18px rgba(34,39,34,.5)}
.temana-produkt img{aspect-ratio:1; object-fit:cover; width:100%}
.temana-produkt .name{display:block; padding:13px 16px 15px; font-weight:500; font-size:15.5px; line-height:1.35}
.gridnote{font-size:13.5px; color:var(--text-sek); margin:0 0 24px}

/* ---------- Claim-Tafel ---------- */
/* Claus 13.09.: „einen Tick zu mächtig" — weniger Fläche, Grün heller und weniger satt.
   #274931 statt #153A20; Weiß darauf 10:1, die gedämpften Texte bleiben über 4,5:1. */
.temana-tafel{--gruen-tafel:#274931; background:var(--gruen-tafel); color:#fff; padding-block:clamp(36px,4vw,56px)}
.temana-tafel h2{color:#fff; max-width:22ch; margin-block:0 12px}
.tafel__lead,.temana-tafel__lead{color:rgba(255,255,255,.82); max-width:46rem; margin:0 0 22px; font-size:1.05rem}
.temana-naehr{display:grid; gap:2px; border-radius:var(--radius); overflow:hidden; background:rgba(255,255,255,.1)}
.temana-naehr__zeile{display:grid; gap:6px 20px; padding:14px 20px; background:var(--gruen-tafel); align-items:center}
@media(min-width:820px){.temana-naehr__zeile{grid-template-columns:168px 180px 1fr}}
.temana-naehr__stoff{font-weight:600; font-size:16px}
.temana-naehr__stoff em{display:block; font-style:normal; font-weight:400; font-size:13px; color:rgba(255,255,255,.62); margin-top:2px; font-variant-numeric:tabular-nums}
.temana-balken{position:relative; height:8px; border-radius:100px; background:rgba(255,255,255,.16); overflow:hidden}
.temana-balken i{position:absolute; inset:0 auto 0 0; border-radius:100px; background:linear-gradient(90deg,var(--akzent),#A8CC6E)}
.temana-balken--leer i{background:rgba(255,255,255,.24)}
.temana-naehr__satz{font-size:15px; line-height:1.5; color:rgba(255,255,255,.94); margin:0}
.temana-naehr__satz.stumm{color:rgba(255,255,255,.6); font-style:italic}  /* .52 läge auf dem helleren Grün unter 4,5:1 */
.tafel__fuss{margin:18px 0 0; font-size:14px; color:rgba(255,255,255,.62); max-width:52rem}
.temana-tafel .temana-tafel__lead{margin:0 0 22px}
.temana-tafel .temana-tafel__fuss{margin:18px 0 0; font-size:14px}

/* ---------- Claus ---------- */
.temana-claus{display:grid; gap:clamp(24px,3.5vw,42px); align-items:start}
@media(min-width:860px){.temana-claus{grid-template-columns:.76fr 1.24fr}}
.temana-claus__karte{background:var(--weiss); border-radius:var(--radius); padding:26px 28px; border:1px solid var(--linie)}
.temana-claus__karte h3{font-size:1.32rem; color:var(--gruen); margin-bottom:3px}
.temana-claus__rolle{margin:0 0 18px; font-size:14.5px; color:var(--text-sek)}
.temana-claus__fakten{list-style:none; margin:0; padding:0}
.temana-claus__fakten li{padding:9px 0 9px 19px; border-top:1px solid var(--linie); font-size:15px; position:relative}
.temana-claus__fakten li::before{content:""; position:absolute; left:0; top:1.1em; width:6px; height:6px; border-radius:50%; background:var(--akzent)}
.temana-claus__zitat{font-size:clamp(1.15rem,1.8vw,1.34rem); line-height:1.48; border-left:3px solid var(--akzent); padding-left:19px; margin:0 0 18px; font-weight:500}
.temana-claus p{margin:0 0 15px; color:var(--text-sek)}
.temana-claus__bild{display:block; width:clamp(128px,14vw,168px); height:auto; aspect-ratio:1; object-fit:cover; border-radius:50%; margin:0 0 18px}

/* ---------- Karten ---------- */
.temana-spalten{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,218px),1fr)); gap:14px}
.temana-karte{background:var(--creme); border-radius:10px; padding:19px 21px}
.temana-creme .temana-karte{background:var(--weiss); border:1px solid var(--linie)}
.temana-karte h3{font-size:1.06rem; color:var(--gruen); margin-bottom:5px}
.temana-karte p{margin:0; font-size:14.5px; color:var(--text-sek); line-height:1.5}

/* ---------- Abschluss ---------- */
.temana-cta{background:var(--gruen); color:#fff; text-align:center}
.temana-cta h2{color:#fff; max-width:32rem; margin-inline:auto}
.temana-cta p{color:rgba(255,255,255,.92); max-width:38rem; margin:14px auto 26px}
.temana-cta .wp-block-buttons{justify-content:center}


/* ---------- eine Bewegung, nur beim Laden ---------- */
@media(prefers-reduced-motion:no-preference){
  .auf{opacity:0; transform:translateY(14px); animation:auf .7s cubic-bezier(.22,.61,.36,1) forwards}
  .temana-hero__bild{opacity:0; animation:auf .9s cubic-bezier(.22,.61,.36,1) .12s forwards}
  @keyframes auf{to{opacity:1; transform:none}}
}

/* Der Name steht bereits im Logo — Kadence blendet ihn sonst zusaetzlich daneben ein. */
.site-header .site-title,
.site-header .site-branding .site-title-wrap .site-title{
	display:none;
}

/* Kadence blendet ueber jeder Seite einen Titelbereich ein ("Startseite" auf grauer
   Flaeche). Unsere Seiten bringen ihre eigene Ueberschrift mit, deshalb weg.
   Archive (Themen, Kategorien) behalten ihn — dort traegt er den Namen.
   Die Regel war in 0.3.1 schon einmal da und ging beim Neuschreiben des
   Stylesheets verloren. */
/* 13.09.: nur noch auf Seiten mit eigenem Hero. Rechtstexte, Warenkorb, Kasse und Konto
   haben keinen Hero und brauchen den Titel — sonst stand z. B. „Impressum" nirgends.
   Hero-Seiten schalten den Titel zusätzlich per Seiteneinstellung ab (_kad_post_title). */
body.page:has(.temana-hero) .entry-hero,
body.page:has(.temana-hero) .page-hero-section,
body.page:has(.temana-hero) .entry-header.page-title,
body.home .entry-hero,
body.home .page-hero-section{
	display:none;
}

/* Widerrufsknopf (eu_owb) und EU-Gewährleistungshinweis (Germanized) hängen per wp_footer
   hinter der Fußzeile. Optisch an den grünen Fußbereich anschließen statt lose darunter. */
.eu-owb-order-withdraw-from-contract-button,
.wc-gzd-legal-guarantee-footer{
	background:var(--gruen-tief); margin:0; padding:0 20px 20px; text-align:center;
}
.eu-owb-order-withdraw-from-contract-button .button{
	display:inline-block; padding:9px 18px; border-radius:8px; border:1.5px solid rgba(255,255,255,.75);
	background:transparent; color:#fff; font-weight:600; font-size:14.5px; text-decoration:none;
}
.eu-owb-order-withdraw-from-contract-button .button:hover{background:rgba(255,255,255,.12); color:#fff}
/* Das Gewährleistungslabel bleibt bewusst in Germanized-Größe: Der EU-Hinweis muss gut sichtbar
   sein (DVO 2025/1960); ein Klick öffnet die volle Fassung. */
body.page .content-area,
body.page .site-main,
body.home .content-area,
body.home .site-main,
/* Kadence setzt hier 32 px Innenabstand — dadurch bleibt ein heller Spalt
   zwischen Kopfzeile und der ersten Farbflaeche. */
body.page .entry-content-wrap,
body.home .entry-content-wrap{
	padding-block-start:0;
	margin-block-start:0;
	/* 32 px Polster unten liessen einen hellen Streifen ueber dem Fussbereich stehen. */
	padding-block-end:0;
	margin-block-end:0;
}
body.page .entry-content > .wp-block-group:first-child,
body.home .entry-content > .wp-block-group:first-child{
	margin-block-start:0;
}

/* WordPress setzt zwischen Blöcken 32 px Abstand. Zwischen zwei Farbflächen
   scheint dort der Seitenhintergrund als heller Streifen durch. */
.entry-content > .wp-block-group.temana-hero,
.entry-content > .wp-block-group.temana-haltung,
.entry-content > .wp-block-group.temana-sektion,
.entry-content > .wp-block-group.temana-abschluss,
.entry-content > .wp-block-group.temana-tafel{
	margin-block:0;
}
/* Flächen, die weiß sein sollen — der Seitengrund ist warmweiß. */
.temana-weiss{background:var(--temana-weiss)}

/* ---------- Beratungs-Abschluss ---------- */
/* Randlose Flaeche wie im Entwurf. Als eingerueckter Kasten stand die Schrift
   ohne Innenabstand am Rand und der Knopf klebte an der Unterkante. */
.temana-abschluss{
	background:var(--gruen); color:#fff; text-align:center;
	padding-block:clamp(52px,6vw,80px);
}
.temana-abschluss h2{color:#fff; max-width:32rem; margin:0 auto 14px}
.temana-abschluss p{color:rgba(255,255,255,.92); max-width:38rem; margin:0 auto 28px}
.temana-abschluss .wp-block-buttons{justify-content:center}
.temana-abschluss .wp-block-button__link{
	background:#fff; border-color:#fff; color:var(--gruen);
}
.temana-abschluss .wp-block-button__link:hover{background:var(--creme); border-color:var(--creme)}

/* Knopf unter einem Kartenraster braucht Luft — sonst klebt er an den Kacheln. */
.temana-spalten + .wp-block-buttons{margin-block-start:clamp(24px,2.6vw,34px)}

/* Zeilenlaenge begrenzen. Ohne das liefen die Vorspann-Absaetze ueber 1180 px,
   also rund 110 Zeichen je Zeile — deutlich ueber der Lesbarkeitsgrenze. */
.temana-sektion > .wp-block-group__inner-container > p,
.temana-tafel > .wp-block-group__inner-container > p{
	max-width:47rem;
}
.temana-sektion > .wp-block-group__inner-container > p:not(.temana-vorspann),
.temana-tafel > .wp-block-group__inner-container > p{
	color:var(--text-sek);
}
.temana-tafel > .wp-block-group__inner-container > p{color:rgba(255,255,255,.88)}
/* Der Vorspann steht ueber dem Inhalt, nicht direkt daran. */
.temana-sektion > .wp-block-group__inner-container > h2 + p{margin-block:0 28px}

/* ---------- Produktfinder ---------- */
/* Einspaltig blieb die rechte Haelfte leer. Die sechs Fragen zeigen, was
   den Kunden erwartet — Nummern sind hier richtig, es ist eine Folge. */
.temana-finder{display:grid; gap:clamp(30px,4vw,58px); align-items:start}
@media(min-width:900px){.temana-finder{grid-template-columns:1fr .95fr}}
.temana-finder .temana-vorspann{margin-block-end:26px}
/* 0.7.50 – Claus 26.09., Kap. 7: rechte Box nennt den Nutzen der sechs Fragen, nicht die Fragen. */
.temana-finder__nutzen > h3{margin:0 0 14px; font-size:1.06rem; font-weight:600; color:var(--gruen)}
.temana-fragen{
	list-style:none; margin:0; padding:0; counter-reset:frage;
	border:1px solid var(--linie); border-radius:var(--radius); background:var(--creme);
	overflow:hidden;
}
.temana-fragen li{
	counter-increment:frage; display:flex; gap:14px; align-items:baseline;
	padding:14px clamp(16px,2vw,22px); font-size:15.5px; line-height:1.45;
}
.temana-fragen li + li{border-block-start:1px solid var(--linie)}
.temana-fragen li::before{
	content:counter(frage); flex:0 0 auto; width:25px; height:25px; border-radius:50%;
	background:var(--gruen); color:#fff; font-size:13px; font-weight:600;
	display:grid; place-items:center; transform:translateY(3px);
}

/* Der Fussbereich trug dasselbe Gruen wie der Beratungs-Abschluss darueber.
   Beide Flaechen verschmolzen zu einem Block; der Aufruf verlor seine Kante. */
.site-footer,
#colophon{ background:var(--gruen-tief); }

/* ---------- Rechtstexte (Entwürfe zur Freigabe durch Claus) ---------- */
.temana-entwurf{background:var(--temana-creme); border-left:4px solid var(--temana-akzent);
  padding:12px 16px; border-radius:8px; font-size:15px; color:var(--temana-text)}
/* Offene Punkte gelb markiert, damit sie beim Durchlesen auffallen. #5A4500 auf #FFF1B8 ≈ 8:1 */
mark.temana-offen{background:#FFF1B8; color:#5A4500; padding:0 .25em; border-radius:3px}
.temana-ecg svg{max-width:100%; height:auto; display:block}

/* Heroes ohne Bild (Kontakt, Über, Nach Thema, Unterseiten) bleiben einspaltig. Das Raster
   darüber ist für Text + Bild der Startseite gebaut; ohne Bild verteilte es Überzeile, Titel
   und Vorspann auf zwei Spalten (Screenshot Kontakt, 13.09.). */
.temana-hero > .wp-block-group__inner-container:not(:has(.temana-heldbild)){gap:0}
@media(min-width:900px){
	.temana-hero > .wp-block-group__inner-container:not(:has(.temana-heldbild)){
		grid-template-columns:1fr; align-items:start;
	}
}
/* Satz direkt unter einem Kartenraster klebte an den Karten. */
.temana-spalten + p{margin-block-start:18px}

/* ---------- Produktfinder (Shortcode [temana_finder], Plugin temana-core) ---------- */
.temana-finder-app{display:grid; gap:24px}
.temana-finder__form{display:grid; gap:16px}
.temana-finder__frage{border:1px solid var(--linie); border-radius:var(--radius); background:var(--weiss);
  padding:16px 20px 20px; margin:0; min-width:0}
.temana-finder__frage legend{font-weight:600; font-size:1.06rem; padding:0 6px; color:var(--temana-text)}
.temana-finder__nr{display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%;
  background:var(--gruen); color:#fff; font-size:14px; margin-right:6px}
.temana-finder__frage legend small{font-weight:400; color:var(--text-sek); font-size:14px; margin-left:6px}
.temana-finder__optionen{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px}
.temana-finder__option{position:relative; display:inline-flex; align-items:center; min-height:48px; padding:0 18px;
  border:1.5px solid #8E8B82; border-radius:999px; background:var(--temana-warmweiss); cursor:pointer; font-size:15.5px}
.temana-finder__option input{position:absolute; inset:0; opacity:0; margin:0; cursor:pointer}
.temana-finder__option:has(input:checked){border-color:var(--gruen); background:#EAF2E4; font-weight:600}
.temana-finder__option:has(input:focus-visible){outline:3px solid var(--gruen); outline-offset:2px}
.temana-finder__fehler{color:#8A1C1C; font-weight:600; margin:0}
.temana-finder__ergebnis{background:var(--weiss); border:1px solid var(--linie); border-radius:var(--radius);
  padding:clamp(20px,3vw,32px)}
.temana-finder__ergebnis:focus{outline:none}
.temana-finder__ergebnis h2{margin-top:0}
.temana-finder__karten{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); margin:18px 0}
.temana-finder__karte{display:flex; flex-direction:column; gap:6px; padding:16px; border:1px solid var(--linie);
  border-radius:10px; background:var(--temana-warmweiss)}
.temana-finder__karte[hidden]{display:none}
.temana-finder__karte img{width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:8px}
.temana-finder__stufe{margin:0; font-size:13px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--gruen)}
.temana-finder__karte h3{font-size:1.06rem; margin:4px 0 0}
.temana-finder__karte h3 a{color:var(--temana-text); text-decoration:none}
.temana-finder__art, .temana-finder__preis small, .temana-finder__pflicht{font-size:14px; color:var(--text-sek); margin:0}
.temana-finder__hinweis{font-size:14px; color:var(--text-sek); margin:0; border-left:3px solid var(--akzent); padding-left:8px}
.temana-finder__karte .wp-element-button{margin-top:auto; text-align:center}
.temana-finder__neu{background:none; border:0; padding:8px 0; color:var(--gruen); font-weight:600; font-size:15px;
  text-decoration:underline; cursor:pointer}

/* ---------- Produktseite: Blöcke nach Shopkonzept §8 (Plugin temana-core) ---------- */
/* clear: Bild und Kaufbereich floaten — ohne clear umfloss der erste Block die Bildspalte. */
.temana-pblock{clear:both; margin-block:clamp(28px,3.5vw,44px); max-width:52rem}
.temana-pblock h2{font-size:clamp(1.35rem,2.2vw,1.7rem); margin:0 0 12px}
.temana-pblock--unsicher{max-width:none; background:var(--creme); border-radius:var(--radius); padding:clamp(20px,3vw,32px)}
.temana-auswahl{margin:0; padding:0 0 0 16px; border-left:4px solid var(--akzent); font-size:1.08rem}
.temana-auswahl__von{color:var(--text-sek); font-size:14px; margin-top:8px}
.temana-wichtigste{margin-top:14px}
.temana-wichtigste h2{font-size:1.06rem; margin:0 0 6px}
.temana-chips__titel{margin:10px 0 4px; font-size:14px; color:var(--text-sek)}
.temana-chips{display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:0}
.temana-chips a{display:inline-block; padding:6px 14px; border-radius:999px; background:#EAF2E4; color:var(--gruen);
  text-decoration:none; font-size:14px; font-weight:600}
.temana-frage-link{margin:12px 0 0; font-size:15px}

/* Pflichtangaben (Block 6) als Begriffsliste: Bezeichnung links, Wert rechts. */
.temana-pflicht{display:grid; grid-template-columns:minmax(0,1fr); gap:2px 24px; margin:0}
.temana-pflicht dt{font-weight:600; color:var(--temana-text); margin-top:12px}
.temana-pflicht dd{margin:0; color:var(--temana-text); line-height:1.55}
@media(min-width:720px){
	.temana-pflicht{grid-template-columns:220px minmax(0,1fr)}
	.temana-pflicht dt, .temana-pflicht dd{margin:0; padding:10px 0; border-top:1px solid var(--linie)}
}
.temana-pflicht__quelle{font-size:13px; color:var(--text-sek)}
.temana-pflicht__offen{margin:14px 0 0; padding-left:18px; font-size:14px}
.temana-pflicht__stand{font-size:13px; color:var(--text-sek); margin-top:14px}
/* Verzehrempfehlung auf der Finder-Karte; hervorgehoben beim Wochen-/Mehrtagesschema. */
.temana-finder__verzehr{font-size:14px; margin:0}
.temana-finder__verzehr--hervor{background:#FFF1B8; color:#5A4500; padding:4px 8px; border-radius:6px}
.temana-finder__aussage{margin:10px 0 0; font-size:15px; line-height:1.5}
.temana-finder__fussnote{margin:6px 0 0; font-size:13px; line-height:1.45; color:var(--text-sek)}

/* ---------- Produktseite: Abstaende und Outline-Knopf (0.7.7) ---------- */
/* Gemessen 16.09.2026 im Browser: Die generische Regel `section{padding-block:
   clamp(48px,5.5vw,76px)}` (Abschnitt „Abschnitte") trifft auch die <section>
   der Produktseite. Zusammen mit deren eigener Marge standen zwischen zwei
   Bloecken 44+76+76+44 = 240 px Leerraum. Die Regel ist fuer die Abschnitte der
   Landing-Seiten gedacht; auf der Produktseite tragen die Bloecke nur Marge. */
section.temana-pblock { padding-block: 0; }
.temana-pblock { margin-block: clamp(20px, 2vw, 28px); }
/* Der Kasten „Noch unsicher?" hat eine Flaeche und behaelt sein Innenpolster;
   Element-Selektor, weil die Regel oben sonst spezifischer waere. */
section.temana-pblock--unsicher { padding: clamp(20px, 3vw, 32px); }

/* „Beratung vereinbaren" ist ein Outline-Knopf. Kadence setzt fuer
   `.wp-block-button.is-style-outline .wp-block-button__link` ein eigenes Polster
   (0.4em = 6,2 px) mit hoeherer Spezifitaet als die Knopf-Regel des Themes; deren
   min-height von 48 px blieb aber stehen. Ergebnis: 37 px Textkasten in 48 px
   Knopf, bei display:inline-block oben ausgerichtet — die Schrift sass zu hoch. */
.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button.is-style-outline > .wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
}

/* ---------- Themen-Übersicht: Kacheltitel als Überschrift (0.7.8) ---------- */
/* GF 16.09.: „Die Themen sollten eine dicke Überschrift haben." Die Kacheln auf /thema-uebersicht/
   kommen aus entwurf/texte/thema-uebersicht.html mit <span class="titel"> / <span class="unter">,
   die Startseite baut dieselbe Kachel mit <b> / <span>. Der Titel fiel dadurch unter die
   Unterzeilen-Regel `.temana-kachel span` (14,5 px, Sekundärfarbe) — gleicher Schnitt wie der Text. */
.temana-kachel .titel{display:block; color:var(--text); font-size:17px; font-weight:700; line-height:1.25; margin-bottom:6px}
.temana-kachel .unter{display:block; font-size:14.5px; color:var(--text-sek); line-height:1.42}
/* Die ganze Kachel ist ein Link: beim Überfahren keine Unterstreichung über Titel und Text. */
.temana-kachel, .temana-kachel:hover, .temana-kachel:focus-visible{text-decoration:none}

/* ---------- Shop-Raster: gleiche Knopflinie in jeder Reihe (0.7.10) ---------- */
/* GF 16.09. (Screenshot /shop/): „Die Kacheln sollten alle gleich hoch sein." Gemessen: die Karten SIND
   gleich hoch (Grid streckt, 558 px), aber der Inhalt ist ein Block — bei einzeiligen Titeln sitzt der Knopf
   31 px höher und darunter bleiben 56 statt 25 px Leerraum. Zwei Zeilen Titelhöhe reservieren (24 px ×
   1,3 = 31,2 px je Zeile + 8/8 px Polster) und den Aktionsblock an die Unterkante binden. */
.woocommerce ul.products li.product{display:flex; flex-direction:column}
.woocommerce ul.products li.product .product-details{display:flex; flex-direction:column; flex:1 1 auto}
/* 0.7.11: Titel im Raster 24 → 21 px. Gemessen im Browser (16 Karten, 230 px Textbreite): bei 24 px brauchen
   „NUI NONI Citrus/Orange Edition" und „NUI NONI Microbiom Balance Spray" drei Zeilen und heben ihre Reihe um
   31 px; ab 21 px passen alle Namen in zwei Zeilen. Kein Abschneiden von Produktnamen, keine dritte Leerzeile. */
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:21px; line-height:1.3; min-height:calc(2 * 1.3em + 16px)}
.woocommerce ul.products li.product .product-action-wrap{margin-top:auto}

/* ---------- Shop-Karte: Hierarchie wie nui-vital.com (0.7.12) ---------- */
/* GF 16.09.: „die wichtigen Sachen bei den Kacheln hervorheben — der Preis ist nur schwer sichtbar."
   Gemessen vorher: Preis 14,6 px / 400 / Textfarbe, Titel 600 / Textfarbe, Kurztext von Kadence ausgeblendet.
   Kopfzeilen (Marke, Produktart · Packung) kommen aus temana-core 0.2.6. */
.temana-karte__marke{margin:0 0 2px; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--gruen)}
.temana-karte__meta{margin:0 0 6px; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-sek)}
.woocommerce ul.products li.product .woocommerce-loop-product__title{color:var(--gruen-dunkel); font-weight:700; padding-top:0}
.woocommerce ul.products li.product .woocommerce-loop-product__title a{color:inherit}
.woocommerce ul.products li.product .product-excerpt{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  margin:0 0 14px; min-height:calc(3 * 1.45 * 14px); font-size:14px; line-height:1.45; color:var(--text-sek)}
.woocommerce ul.products li.product .product-excerpt p{margin:0}
.woocommerce ul.products li.product .product-excerpt strong{font-weight:500; color:var(--text)}
.woocommerce ul.products li.product .price{display:block; margin:0 0 10px; font-size:22px; font-weight:700; color:var(--gruen-dunkel)}
.woocommerce ul.products li.product .price .amount{font-weight:700}
/* Knopf zuerst, darunter „inkl. MwSt. · zzgl. Versandkosten" in einer kleinen Zeile (Germanized gibt zwei <p> aus). */
.woocommerce ul.products li.product .product-action-wrap{display:grid; grid-template-columns:max-content max-content; column-gap:5px; align-items:baseline; margin-top:auto}
.woocommerce ul.products li.product .product-action-wrap .button{grid-column:1 / -1; grid-row:1; width:100%; margin:0 0 8px}
.woocommerce ul.products li.product .product-action-wrap p{grid-row:2; margin:0; font-size:12.5px; line-height:1.4; color:var(--text-sek)}
.woocommerce ul.products li.product .product-action-wrap p + p::before{content:"· "}

/* 0.7.13 — nachgemessen nach 0.7.12: Der Hook `woocommerce_shop_loop_item_title` (Prio 5) gibt die Kopfzeilen aus,
   bevor Kadence den Textblock `.product-details` öffnet; sie standen daher ohne Innenpolster am Kartenrand.
   Gleiches Polster wie der Textblock (16 px), der Textblock rückt oben enger. */
.woocommerce ul.products li.product .temana-karte__marke{padding:14px 16px 0}
.woocommerce ul.products li.product .temana-karte__meta{padding:0 16px}
.woocommerce ul.products li.product .product-details{padding-top:6px}
/* Zweizeilen-Rahmen des Titels bleibt (Preise fluchten), aber einzeilige Titel sitzen unten im Rahmen:
   die Luft steht unter der Kopfzeile, nicht als Loch zwischen Titel und Preis. */
.woocommerce ul.products li.product .woocommerce-loop-product__title{display:flex; align-items:flex-end}

/* 0.7.14 — Kopfzeilen kommen jetzt aus dem Hook nach dem Titel (temana-core 0.2.7) und liegen damit IM Textblock;
   per Flex-Reihenfolge wieder über den Titel, ohne eigenes Polster (0.7.13 aufgehoben). */
.woocommerce ul.products li.product .temana-karte__marke{order:-2; padding:0}
.woocommerce ul.products li.product .temana-karte__meta{order:-1; padding:0; min-height:calc(2 * 1.4em); line-height:1.4}
.woocommerce ul.products li.product .product-details{padding-top:14px}

/* ── Sortiment (17.09., Theme 0.7.15 + temana-core 0.2.8): Kopf statt grauem Titelbalken, Abschnitte je Produktart ── */
.woocommerce-shop .product-archive-hero-section,
.tax-product_cat .product-archive-hero-section,
.tax-product_brand .product-archive-hero-section,
.woocommerce-shop .kadence-shop-top-row,
.tax-product_cat .kadence-shop-top-row,
.tax-product_brand .kadence-shop-top-row { display: none; }

.temana-sortiment-kopf { padding: clamp(8px, 2vw, 20px) 0 0; margin: 0 0 clamp(28px, 3vw, 40px); }
.temana-sortiment-kopf__ueber { margin: 0 0 6px; font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--temana-gruen); }
.temana-sortiment-kopf h1 { margin: 0 0 8px; font-size: clamp(30px, 4vw, 44px); line-height: 1.15; font-weight: 700; color: var(--temana-text); }
.temana-sortiment-kopf__text { margin: 0 0 22px; max-width: 62ch; font-size: 16px; color: var(--temana-text-sekundaer); }
.temana-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.temana-chips li { margin: 0; }
.temana-chips a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border: 1px solid var(--temana-linie); border-radius: 999px; background: var(--temana-weiss); color: var(--temana-text); font-size: 14.5px; font-weight: 500; line-height: 1.3; text-decoration: none; transition: border-color .15s, color .15s; }
.temana-chips a:hover, .temana-chips a:focus-visible { border-color: var(--temana-gruen); color: var(--temana-gruen); }
.temana-chips a span { font-size: 12.5px; color: var(--temana-text-sekundaer); }
.temana-chips a[aria-current="page"] { background: var(--temana-gruen); border-color: var(--temana-gruen); color: var(--temana-weiss); }
.temana-chips a[aria-current="page"] span { color: rgba(255, 255, 255, .8); }

.woocommerce ul.products li.temana-abschnitt,
.woocommerce ul.products li.temana-marke-zeile { grid-column: 1 / -1; width: auto; margin: 0; padding: 0; float: none; list-style: none; background: none; border: 0; box-shadow: none; }
.woocommerce ul.products li.temana-abschnitt { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; margin-top: clamp(24px, 3vw, 40px); padding-bottom: 12px; border-bottom: 2px solid var(--temana-akzent); scroll-margin-top: 110px; }
.woocommerce ul.products li.temana-abschnitt:first-child { margin-top: 0; }
.temana-abschnitt h2 { margin: 0; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; font-weight: 700; color: var(--temana-gruen); }
.temana-abschnitt__meta { margin: 0; font-size: 14px; color: var(--temana-text-sekundaer); }
.temana-abschnitt__meta a { margin-left: 16px; font-weight: 600; color: var(--temana-gruen); text-decoration: none; }
.temana-abschnitt__meta a::after { content: " →"; }
.woocommerce ul.products li.temana-marke-zeile { display: flex; align-items: center; gap: 14px; margin-bottom: -8px; font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--temana-text-sekundaer); }
.woocommerce ul.products li.temana-marke-zeile::after { content: ""; flex: 1; height: 1px; background: var(--temana-linie); }
/* 0.7.16: weniger Luft über dem Kopf; Sprungleiste am Handy einzeilig wischbar statt vier Zeilen */
.woocommerce-shop .content-area, .tax-product_cat .content-area, .tax-product_brand .content-area { margin-top: clamp(28px, 3vw, 44px); }
@media (max-width: 767px) {
	.temana-chips { flex-wrap: nowrap; overflow-x: auto; margin-right: -16px; padding: 0 16px 4px 0; scrollbar-width: none; }
	.temana-chips::-webkit-scrollbar { display: none; }
	.temana-chips a { white-space: nowrap; }
}

/* ── Designleitfaden v1 (Claus 17.09., Theme 0.7.17): Shopvorteile, Vertrauensanker, Wissenskarten, Kontaktwege ── */
.temana-vorteile-band{background:var(--weiss); border-block:1px solid var(--linie); padding-block:clamp(24px,2.8vw,34px)}
.temana-vorteile{list-style:none; margin:0 auto; padding:0; max-width:var(--global-content-width,1180px); display:grid; gap:20px 30px; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
/* 0.7.50 – Claus 26.09., Kap. 4: Symbol oberhalb des Textes, vier gleichwertige Spalten. */
.temana-vorteile li{display:flex; flex-direction:column; gap:10px; align-items:flex-start; margin:0}
.temana-vorteile .temana-symbol{flex:0 0 auto; width:24px; height:24px; padding:12px; box-sizing:content-box; border-radius:50%; background:var(--creme); color:var(--gruen)}
.temana-vorteile b{display:block; margin:2px 0 4px; font-size:16px; font-weight:600; line-height:1.3; color:var(--text)}
.temana-vorteile span{display:block; font-size:14px; line-height:1.5; color:var(--text-sek)}

.temana-anker{background:var(--creme); padding-block:clamp(26px,3vw,38px)}
.temana-anker__in{display:flex; align-items:center; gap:20px; max-width:780px; margin-inline:auto}
/* 0.7.50 – Claus 26.09., Kap. 4: Portrait „etwas größer und präsenter", Richtwert 88 × 88 px,
   weiterhin kreisrund und am Zitatblock ausgerichtet – ohne den Streifen höher zu machen. */
.temana-anker__in img{flex:0 0 auto; width:88px; height:88px; border-radius:50%; object-fit:cover}
.temana-anker__in p{margin:0; font-size:clamp(17px,1.7vw,20px); line-height:1.5; color:var(--text)}
.temana-anker__in cite{display:block; margin-top:6px; font-style:normal; font-size:14.5px; font-weight:600; color:var(--gruen)}

.temana-mehr-link{margin:22px 0 0}
.temana-mehr-link a{font-weight:600; color:var(--gruen); text-decoration:none}
.temana-mehr-link a::after{content:" →"}

a.temana-karte--link{display:flex; flex-direction:column; background:var(--weiss); border:1px solid var(--linie); border-radius:12px; text-decoration:none; color:inherit; transition:border-color .15s ease}
a.temana-karte--link:hover, a.temana-karte--link:focus-visible{border-color:var(--gruen)}
.temana-karte__mehr{margin-top:auto; padding-top:12px; font-size:14.5px; font-weight:600; color:var(--gruen)}

.temana-kontaktwege .wp-block-buttons{margin-top:8px}
/* 0.7.18: Vorteile-Leiste und Anker volle Breite wie Hero; Markenkarte ohne Shop-Link im selben Kartenstil */
.temana-vorteile-band, .temana-anker{width:100vw; max-width:100vw; margin-inline:calc(50% - 50vw); padding-inline:clamp(20px,4vw,40px); box-sizing:border-box}
.temana-karte--ohne-link{background:var(--weiss); border:1px solid var(--linie); border-radius:12px}
/* 0.7.19: kein Warmweiß-Streifen zwischen Vorteile-Leiste und Anker (Block-Abstand von WordPress) */
.temana-vorteile-band, .temana-anker{margin-block:0 !important}
/* 0.7.20: Kartentitel nie mitten im Wort umbrechen („Nahrungsergänzunge/n“); sechs Karten in zwei Dreierreihen statt 5 + 1 */
.temana-karte h3{overflow-wrap:normal; word-break:normal; hyphens:manual}
@media(min-width:900px){.temana-spalten:has(> :nth-child(6):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ── Produktfinder Schritt für Schritt (GF 17.09. „bau das schöner“, Theme 0.7.21 + temana-core 0.2.11) ── */
.temana-finder-app{max-width:780px}
.temana-finder__form--schritte{gap:24px; background:var(--weiss); border:1px solid var(--linie); border-radius:16px; padding:clamp(22px,3.6vw,42px); box-shadow:0 22px 44px -36px rgba(34,39,34,.4)}
.temana-finder__fortschritt{display:flex; align-items:center; gap:16px}
.temana-finder__zaehler{flex:0 0 auto; font-size:14px; font-weight:600; letter-spacing:.04em; color:var(--gruen)}
.temana-finder__balken{flex:1; height:6px; border-radius:99px; background:var(--creme); overflow:hidden}
.temana-finder__balken i{display:block; width:0; height:100%; border-radius:inherit; background:var(--akzent); transition:width .3s ease}
.temana-finder__form--schritte .temana-finder__frage{border:0; border-radius:0; background:none; padding:0; margin:0}
.temana-finder__form--schritte .temana-finder__frage[hidden]{display:none}
.temana-finder__form--schritte .temana-finder__frage legend{float:left; width:100%; margin:0 0 22px; padding:0; font-size:clamp(22px,2.6vw,28px); line-height:1.3; font-weight:600; color:var(--temana-text)}
.temana-finder__form--schritte .temana-finder__frage legend small{display:block; margin:8px 0 0; font-size:15px; font-weight:400}
.temana-finder__form--schritte .temana-finder__nr{display:none}
.temana-finder__form--schritte .temana-finder__optionen{clear:both; display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr)); gap:12px; margin:0}
.temana-finder__form--schritte .temana-finder__option{min-height:58px; padding:12px 16px 12px 50px; border:1.5px solid var(--linie); border-radius:12px; background:var(--warmweiss); font-size:16.5px; line-height:1.35; cursor:pointer; transition:border-color .15s ease, background .15s ease}
.temana-finder__form--schritte .temana-finder__option::before{content:""; position:absolute; left:17px; top:50%; width:20px; height:20px; margin-top:-10px; box-sizing:border-box; border:1.5px solid #B9B4AA; border-radius:50%; background:var(--weiss)}
.temana-finder__form--schritte .temana-finder__option:has(input[type="checkbox"])::before{border-radius:5px}
.temana-finder__form--schritte .temana-finder__option:hover{border-color:var(--akzent)}
.temana-finder__form--schritte .temana-finder__option:has(input:checked){border-color:var(--gruen); background:#EEF5E8; font-weight:600}
.temana-finder__form--schritte .temana-finder__option:has(input:checked)::before{border-color:var(--gruen); background:var(--gruen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3 5 8.6l4.4-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.temana-finder__nav{display:flex; align-items:center; gap:12px; padding-top:22px; border-top:1px solid var(--linie)}
.temana-finder__nav .temana-finder__weiter, .temana-finder__nav .wp-block-buttons{margin-left:auto}
.temana-finder__nav .wp-block-buttons{margin-block:0}
.temana-finder__weiter, .temana-finder__nav button[type="submit"]{min-height:52px; padding:0 32px; cursor:pointer}
.temana-finder__weiter:disabled{opacity:.4; cursor:not-allowed}
.temana-finder__zurueck{min-height:52px; padding:0 14px 0 0; border:0; background:none; font:inherit; font-size:16px; font-weight:600; color:var(--text-sek); cursor:pointer}
.temana-finder__zurueck::before{content:"← "}
.temana-finder__zurueck:hover{color:var(--gruen)}
.temana-finder__nav [hidden]{display:none !important}
/* 0.7.22 (GF: „Nahrungsergänzung kannst du nicht so trennen“): Antworten in zwei breiten Spalten, nie im Wort umbrechen */
.temana-finder__form--schritte .temana-finder__optionen{grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
.temana-finder__option, .temana-finder__option span, .temana-finder__frage legend{overflow-wrap:normal; word-break:normal; hyphens:manual}
/* 0.7.23: Finder-Ergebnis – Karten behalten ihre Spaltenbreite (eine Karte zog das 300-px-Vorschaubild auf volle Breite = unscharf) */
.temana-finder__karten{grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}
/* 0.7.24: Claus' Symbole (22.09.) sind zweifarbige Flächen-Icons, kein Strich-Set – ohne Kreisfläche, dafür etwas größer */
/* 0.7.50 – Claus 26.09., Kap. 4: „Icons deutlich größer; Richtwert ca. 36–42 px." */
.temana-vorteile .temana-symbol{width:40px; height:40px; padding:0; background:none; border-radius:0}
/* 0.7.25: Themen-Symbole von Claus (22.09.) – Flächen-Icons, etwas größer als die früheren Linien-Icons */
.temana-kachel__symbol{width:56px; height:56px; margin-bottom:2px}
/* 0.7.26: „Nach Thema" nach Claus' Übergabe (22.09.) – Symbol oben links ohne Fläche, 32 px, vier Spalten, Produktwelt-Kennzeichnung */
.temana-kacheln--uebersicht{grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr)); gap:16px}
.temana-kacheln--uebersicht .temana-kachel{position:relative; gap:0; padding:20px 20px 22px; text-align:left}
.temana-kacheln--uebersicht .temana-kachel__symbol{width:32px; height:32px; margin:0 0 14px}
.temana-kacheln--uebersicht .titel{display:block; margin-bottom:6px; font-size:17px; font-weight:600; color:var(--gruen)}
.temana-kacheln--uebersicht .unter{display:block; font-size:14.5px; line-height:1.5; color:var(--text-sek)}
.temana-kachel__typ{display:inline-block; margin-top:12px; padding:3px 10px; border:1px solid var(--linie); border-radius:999px; background:var(--weiss); font-size:11.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--text-sek)}
@media(min-width:900px){.temana-kacheln--uebersicht{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:600px) and (max-width:899px){.temana-kacheln--uebersicht{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 0.7.27: Produktwelt-Kennzeichnung nur so breit wie ihr Text */
.temana-kachel__typ{align-self:flex-start; margin-top:auto}
.temana-kacheln--uebersicht .temana-kachel{display:flex; flex-direction:column}
.temana-kacheln--uebersicht .unter{margin-bottom:12px}
/* 0.7.28: Begründung je Finder-Empfehlung („Warum passt das zu deiner Auswahl?", Shopkonzept 22.09.) */
.temana-finder__grund{margin:2px 0 0; font-size:13.5px; line-height:1.45; color:var(--text-sek)}
.temana-finder__grund[hidden]{display:none}

/* ── Wissen & Anwendung (Designleitfaden v2, Abschnitt 8): Artikelseite und Wissenskarten ── */
.single-temana_wissen .entry-content{max-width:46rem}
.temana-brotkrume{margin:0 0 14px; font-size:14px; color:var(--text-sek)}
.temana-brotkrume a{color:var(--gruen); text-decoration:none}
.temana-kurz{margin:0 0 26px; padding:18px 20px; background:var(--creme); border-radius:12px}
.temana-kurz b{display:block; margin-bottom:6px; font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--gruen)}
.temana-kurz p{margin:0; font-size:17px; line-height:1.55}
.temana-sicherheit{margin:28px 0; padding:18px 20px; background:var(--weiss); border:1px solid var(--linie); border-left:4px solid var(--gruen); border-radius:10px}
.temana-sicherheit b{display:block; margin-bottom:6px; color:var(--gruen)}
.temana-sicherheit p{margin:0; font-size:16px; line-height:1.55}
.temana-wissensmodul{margin:28px 0}
.temana-wissen__block{margin:36px 0 0}
.temana-wissen__block h2{font-size:clamp(1.3rem,2vw,1.6rem); margin-bottom:14px}
.temana-wissenskarten{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr)); gap:14px}
.temana-wissenskarte{display:flex; flex-direction:column; gap:6px; padding:16px 18px; background:var(--weiss); border:1px solid var(--linie); border-radius:12px; text-decoration:none; color:inherit; transition:border-color .15s ease}
.temana-wissenskarte:hover{border-color:var(--gruen)}
.temana-wissenskarte__label{font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--akzent)}
.temana-wissenskarte__titel{font-size:16px; font-weight:600; color:var(--gruen); line-height:1.35}
.temana-wissenskarte__text{font-size:14px; line-height:1.5; color:var(--text-sek)}
.temana-wissenskarte__mehr{margin-top:auto; padding-top:8px; font-size:14px; font-weight:600; color:var(--gruen)}
.temana-wissenskarte__mehr::after{content:" →"}
.temana-wissen__produkte{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr)); gap:14px}
.temana-wissen__produkt{display:flex; flex-direction:column; gap:6px; padding:14px; background:var(--weiss); border:1px solid var(--linie); border-radius:12px; text-decoration:none; color:inherit}
.temana-wissen__produkt:hover{border-color:var(--gruen)}
.temana-wissen__produkt img{width:100%; height:auto; border-radius:8px}
.temana-wissen__produkt .name{font-size:15px; font-weight:600; color:var(--gruen)}
.temana-wissen__produkt .preis{font-size:14.5px; color:var(--text)}
.temana-geprueft{margin:32px 0 0; padding-top:14px; border-top:1px solid var(--linie); font-size:13.5px; color:var(--text-sek)}
/* 0.7.30: Bereichsseite unter /wissen/<bereich>/ */
.temana-wissen-archiv{padding-block:clamp(28px,3.4vw,48px)}
.temana-wissen-archiv h1{font-size:clamp(2rem,3.4vw,2.7rem); margin:0 0 10px}
.temana-wissen-archiv__lead{max-width:60ch; margin:0 0 6px; font-size:17px; color:var(--text-sek)}
.temana-wissen-archiv__anzahl{margin:0 0 24px; font-size:14px; color:var(--text-sek)}
/* 0.7.31: Nährstofflexikon – zugelassene EU-Aussagen als eigener Block, ohne Wertung oder Ampel */
.temana-claims{margin:28px 0; padding:20px 22px; background:var(--creme); border-radius:12px}
.temana-claims b{display:block; margin-bottom:10px; font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--gruen)}
.temana-claims ul{margin:0; padding-left:20px}
.temana-claims li{margin:0 0 6px; font-size:16.5px; line-height:1.5}
.temana-claims__fuss{margin:12px 0 0; font-size:14px; line-height:1.5; color:var(--text-sek)}

/* ── Produktseite Etappe 2 (Designleitfaden v2, Abschnitt 6) ── */
.temana-varianten{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 6px}
.temana-variante{min-height:52px; padding:10px 18px; border:1.5px solid var(--linie); border-radius:12px; background:var(--warmweiss); font:inherit; font-size:16px; font-weight:500; color:var(--text); cursor:pointer; transition:border-color .15s ease, background .15s ease}
.temana-variante:hover{border-color:var(--akzent)}
.temana-variante.is-aktiv{border-color:var(--gruen); background:#EEF5E8; font-weight:600}
/* WooCommerce setzt das Dropdown mit höherer Spezifität wieder sichtbar – daher dieser Selektor */
.woocommerce div.product form.cart.temana-form--kacheln .variations select,
.temana-form--kacheln .variations select{display:none !important}
.temana-form--kacheln .variations label{font-weight:600}
.temana-form--kacheln .variations tr, .temana-form--kacheln .variations td, .temana-form--kacheln .variations th{display:block; width:auto; padding:0}
.temana-kaufvertrauen{list-style:none; margin:18px 0 6px; padding:16px 0 0; border-top:1px solid var(--linie); display:grid; gap:14px 22px; grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.temana-kaufvertrauen li{display:flex; gap:11px; align-items:flex-start; margin:0}
.temana-kaufvertrauen .temana-symbol{flex:0 0 auto; width:30px; height:30px}
.temana-kaufvertrauen b{display:block; font-size:14.5px; font-weight:600; color:var(--text); line-height:1.3}
.temana-kaufvertrauen span{display:block; font-size:13.5px; line-height:1.45; color:var(--text-sek)}
.temana-frage-link{margin:12px 0 0; font-size:14.5px}
.temana-frage-link a{color:var(--gruen); font-weight:600; text-decoration:none}
.temana-frage-link a:hover{text-decoration:underline}
.temana-pblock--wissen{margin-top:clamp(28px,3vw,42px)}
/* 0.7.34: Produkt mit nur einer Packungsgröße – Auswahlzeile ausblenden */
.woocommerce div.product form.cart.temana-form--eine-packung .variations,
.temana-form--eine-packung .variations, .temana-form--eine-packung .reset_variations{display:none !important}

/* ── Etappe 3: Serviceleiste und Versandfortschritt ── */
.temana-servicebar{background:var(--gruen-dunkel,#1C4B29); color:#fff; font-size:13.5px}
.temana-servicebar__in{display:flex; flex-wrap:wrap; gap:8px 20px; align-items:center; justify-content:space-between; max-width:var(--global-content-width,1180px); margin-inline:auto; padding:8px clamp(16px,4vw,40px)}
.temana-servicebar__zusagen{margin:0; color:rgba(255,255,255,.88)}
.temana-servicebar__wege{display:flex; align-items:center; gap:16px}
.temana-servicebar__wege a, .temana-suche-auf{color:#fff; text-decoration:none; font:inherit; font-weight:600; background:none; border:0; padding:0; cursor:pointer}
.temana-servicebar__wege a:hover, .temana-suche-auf:hover{text-decoration:underline}
/* 0.7.50 – Claus 26.09., Kap. 2: sichtbare Suchleiste im Kopf, Konto und Warenkorb als Symbole. */
.temana-kopfsuche{display:inline-flex; align-items:center; gap:8px; min-height:34px; padding:0 10px;
	background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.22); border-radius:8px}
.temana-kopfsuche:focus-within{background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.5)}
.temana-kopfsuche .temana-ikon{flex:0 0 auto; opacity:.85}
.temana-kopfsuche input{min-width:min(44vw,240px); min-height:34px; padding:0; border:0; background:none;
	color:#fff; font:inherit; cursor:pointer}
.temana-kopfsuche input::placeholder{color:rgba(255,255,255,.72)}
.temana-kopfsuche input::-webkit-search-decoration,
.temana-kopfsuche input::-webkit-search-cancel-button{display:none}
.temana-kopfsymbol{position:relative}
.temana-kopfsymbol .temana-ikon{display:block}
/* Beschriftung bleibt für Screenreader und Tastatur erhalten, auch wenn nur das Symbol zu sehen ist. */
.temana-nur-sr{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
	clip-path:inset(50%); white-space:nowrap; border:0}
.temana-warenkorb__zahl[hidden]{display:none}
.temana-warenkorb__zahl{display:inline-grid; place-items:center; min-width:20px; height:20px; margin-left:7px; padding:0 5px; border-radius:99px; background:var(--akzent); color:#14351f; font-size:12px; font-weight:700}
@media(max-width:720px){.temana-servicebar__zusagen{display:none} .temana-servicebar__in{justify-content:flex-end}}

.temana-versandfrei{margin:0 0 18px; padding:14px 16px; background:var(--creme); border-radius:10px}
.temana-versandfrei p{margin:0 0 8px; font-size:14.5px; font-weight:600; color:var(--text)}
.temana-versandfrei__balken{height:6px; border-radius:99px; background:rgba(34,39,34,.10); overflow:hidden}
.temana-versandfrei__balken i{display:block; height:100%; background:var(--akzent); border-radius:inherit; transition:width .3s ease}
.temana-versandfrei.ist-erreicht p{color:var(--gruen)}
.temana-versandfrei.ist-erreicht .temana-versandfrei__balken i{background:var(--gruen)}
/* Live-Suche (Shopkonzept 22.09.): Schicht über der Seite, Treffer nach Gruppen */
.temana-suche{position:fixed; inset:0; z-index:9999; background:rgba(34,39,34,.45); padding:clamp(12px,6vh,80px) 16px; overflow-y:auto}
.temana-suche[hidden]{display:none}
body.temana-suche-offen{overflow:hidden}
.temana-suche__fenster{max-width:760px; margin-inline:auto; background:var(--weiss); border-radius:16px; box-shadow:0 30px 70px -40px rgba(0,0,0,.6); padding:clamp(18px,2.4vw,28px)}
.temana-suche__kopf{display:flex; gap:12px; align-items:center}
.temana-suche__kopf input{flex:1; min-height:52px; padding:0 16px; border:1.5px solid var(--linie); border-radius:12px; font:inherit; font-size:17px}
.temana-suche__kopf input:focus{outline:2px solid var(--gruen); outline-offset:1px; border-color:var(--gruen)}
.temana-suche__zu{min-height:52px; padding:0 14px; border:0; background:none; font:inherit; font-weight:600; color:var(--text-sek); cursor:pointer}
.temana-suche__gruppe{margin-top:22px}
.temana-suche__gruppe h3{margin:0 0 8px; font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--gruen)}
.temana-suche__gruppe ul{list-style:none; margin:0; padding:0}
/* 0.7.50 – Claus 26.09., Kap. 2: Produkte mit Bild, Name, Highlight und Preis; die ganze Karte
   ist die Klickfläche. Deshalb Bild links, Text als Spalte daneben – mittig statt an der
   Schriftgrundlinie, sonst hinge das Bild schief. */
.temana-suche__gruppe a{display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px; text-decoration:none; color:inherit}
.temana-suche__gruppe a:hover{background:var(--creme)}
.temana-suche__bild{flex:0 0 auto; width:56px; height:56px; border-radius:8px; object-fit:cover; background:var(--creme)}
.temana-suche__text{display:flex; flex-direction:column; gap:2px; min-width:0}
.temana-suche__label{font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--akzent)}
.temana-suche__titel{font-size:16.5px; font-weight:600; color:var(--text)}
.temana-suche__highlight{font-size:13.5px; line-height:1.4; color:var(--text-sek)}
.temana-suche__zusatz{font-size:14.5px; color:var(--text-sek)}
.temana-suche__alle{display:inline-block; margin-top:20px; font-weight:600; color:var(--gruen); text-decoration:none}
.temana-suche__alle::after{content:" →"}
.temana-suche__leer{margin:22px 0 0; color:var(--text-sek)}
/* Zubereitungsbox für Tee (Designkonzept §12): Menge, Temperatur, Ziehzeit auf einen Blick */
.temana-zubereitung{margin:18px 0 0; padding:16px 18px; background:var(--creme); border-radius:12px}
.temana-zubereitung h2{margin:0 0 10px; font-size:16px; letter-spacing:.02em}
.temana-zubereitung p{margin:0; font-size:15px; color:var(--text-sek)}
.temana-zubereitung__werte{display:flex; flex-wrap:wrap; gap:8px 22px; margin:0 0 10px}
.temana-zubereitung__werte div{min-width:84px}
.temana-zubereitung__werte dt{margin:0; font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--gruen)}
.temana-zubereitung__werte dd{margin:2px 0 0; font-size:17px; font-weight:600; color:var(--text)}
/* Steckbrief der Einzelöle (Designkonzept §11): Kennwerte als Raster, Duftnoten als Chips */
.temana-steckbrief{margin:0 0 26px; padding:18px 20px; border:1px solid var(--linie); border-radius:12px; background:var(--weiss)}
.temana-steckbrief h2{margin:0 0 14px; font-size:16px; letter-spacing:.02em}
.temana-steckbrief dl{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px 26px; margin:0}
.temana-steckbrief dt{margin:0; font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--gruen)}
.temana-steckbrief dd{margin:3px 0 0; font-size:16px; color:var(--text)}
.temana-duftchips{display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:0; padding:0}
.temana-duftchips li{padding:3px 11px; border-radius:99px; background:var(--creme); font-size:14px; color:var(--text)}
/* Referenzwert-Box im Nährstofflexikon (Designkonzept §9) */
.temana-nrv{margin:0 0 26px; padding:16px 18px; border-left:3px solid var(--akzent); background:var(--creme); border-radius:0 10px 10px 0}
.temana-nrv dl{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; margin:0 0 8px}
.temana-nrv dt{margin:0; font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--gruen)}
.temana-nrv dd{margin:0; font-size:22px; font-weight:700; color:var(--text)}
.temana-nrv p{margin:0; font-size:14px; line-height:1.55; color:var(--text-sek)}
/* Nährwerte als Tabelle statt Fließzeile (Designkonzept §6, zugleich Art. 34 LMIV) */
.temana-naehrwerte{width:100%; max-width:440px; margin:6px 0 0; border-collapse:collapse; font-size:15.5px}
.temana-naehrwerte th,.temana-naehrwerte td{padding:7px 0; text-align:left; border-bottom:1px solid var(--linie); vertical-align:baseline}
.temana-naehrwerte th{font-weight:500; color:var(--text-sek); padding-right:18px}
.temana-naehrwerte td{font-weight:600; color:var(--text); white-space:nowrap}
.temana-naehrwerte tr:last-child th,.temana-naehrwerte tr:last-child td{border-bottom:0}
.temana-naehrwerte .temana-offen{white-space:normal}
.temana-naehrwerte__bezug{margin:6px 0 0; font-size:13.5px; color:var(--text-sek)}
@media (max-width:480px){.temana-naehrwerte td{white-space:normal}}
/* „Auf dieser Seite" bei langen Wissensartikeln (Designkonzept §8/§14), mobil eingeklappt */
.temana-inhalt{margin:0 0 26px; padding:14px 18px; background:var(--creme); border-radius:10px}
.temana-inhalt summary{font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--gruen); cursor:pointer; list-style:none}
.temana-inhalt summary::-webkit-details-marker{display:none}
.temana-inhalt summary::after{content:" ▾"; font-size:11px}
.temana-inhalt[open] summary::after{content:" ▴"}
.temana-inhalt ol{margin:10px 0 0; padding-left:20px; columns:2; column-gap:26px}
.temana-inhalt li{margin:0 0 5px; break-inside:avoid}
.temana-inhalt a{color:var(--text); text-decoration:none; font-size:15px}
.temana-inhalt a:hover{text-decoration:underline}
@media (max-width:640px){.temana-inhalt ol{columns:1}}
/* Themenseite: Wissensartikel und Weg zum Finder (Shopkonzept §3) */
.temana-themenwissen{margin:42px 0 0; padding-top:30px; border-top:1px solid var(--linie)}
.temana-themenwissen h2{margin:0 0 6px; font-size:clamp(21px,2.2vw,26px)}
.temana-themenwissen__vor{margin:0 0 18px; color:var(--text-sek); font-size:16.5px}
.temana-finderhinweis{margin:30px 0 0; padding:20px 22px; background:var(--creme); border-radius:12px}
.temana-finderhinweis p{margin:0 0 12px; font-size:16.5px; color:var(--text)}
.temana-finderhinweis p:last-child{margin:0}
/* Themen-Chips im Wissensartikel (Shopkonzept §8: zurück zum Thema) */
.temana-wissen__block .temana-chips{margin:0}
/* „Mehr verstehen" im Finder-Ergebnis (Shopkonzept §4) */
.temana-finder__wissen{margin:26px 0 0; padding-top:22px; border-top:1px solid var(--linie)}
.temana-finder__wissen h3{margin:0 0 14px; font-size:18px}
/* Marke über dem Produktnamen (Designkonzept §6) */
.temana-produktmarke{margin:0 0 4px; font-size:12.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase}
.temana-produktmarke a{color:var(--gruen); text-decoration:none}
.temana-produktmarke a:hover{text-decoration:underline}
/* Serviceleiste: Trefferflächen für den Finger (Designkonzept §14/§15) */
.temana-servicebar__wege a,.temana-servicebar__wege button{display:inline-flex; align-items:center; min-height:44px; padding:0 10px}
@media (max-width:782px){
  .temana-servicebar__wege{gap:0}
  .temana-servicebar__wege a,.temana-servicebar__wege button{min-height:48px; padding:0 12px}
}
/* Lieferzeit nach Lagerstatus (Claus 24.09.2026): gut sichtbar beim Produkt, nicht technisch formuliert */
.woocommerce div.product p.stock.temana-lieferzeit{margin:0 0 14px; font-size:15px; font-weight:600; color:var(--temana-gruen)}
.woocommerce div.product p.stock.temana-lieferzeit.is-bestellt{color:var(--temana-text)}
/* ── Bilder der redaktionellen Seiten (25.09.2026, temana-core 0.7.1 bilder.php). Achtung: .temana-kachel__bild
   ist oben schon vergeben (Startseiten-Kachel mit Verlaufsmaske) – deshalb __foto. ── */
.temana-heldbild{margin:0; min-width:0}
.temana-heldbild__img{display:block; width:100%; height:100%; min-height:260px; max-height:440px; object-fit:cover; border-radius:12px}
.temana-heldtext{min-width:0}
.temana-zwischenbild{margin:0 0 clamp(26px,3vw,38px)}
.temana-zwischenbild__img{display:block; width:100%; aspect-ratio:21/8; object-fit:cover; border-radius:12px}
.temana-kopfbild{margin:0 0 clamp(22px,3vw,32px)}
.temana-kopfbild__img{display:block; width:100%; aspect-ratio:21/7; object-fit:cover; border-radius:12px}
.temana-karte--bild{padding:0; overflow:hidden; display:flex; flex-direction:column}
.temana-karte__bild{display:block; width:100%; aspect-ratio:16/10; object-fit:cover}
.temana-karte--bild h3{padding:16px 21px 0}
.temana-karte--bild p{padding:0 21px 19px}
.temana-kachel--bild{overflow:hidden}
.temana-kachel__foto{display:block; width:calc(100% + 40px); max-width:none; margin:-20px -20px 16px; aspect-ratio:16/10; object-fit:cover}
@media(max-width:899px){.temana-zwischenbild__img{aspect-ratio:16/9}.temana-kopfbild__img{aspect-ratio:16/8}}
.temana-zwischenbild--produkt{clear:both; max-width:52rem; margin-block:clamp(28px,3.5vw,44px) 0}

/* 29.09.2026 – Claus' Startseiten-Korrektur 26.09. Punkt 2: Logo 15–20 % größer (200 → 236 px), nur ab
   Desktop; am Handy bleibt 200 px, sonst bricht die Kopfzeile neben Suche/Konto/Warenkorb um. */
@media (min-width:1025px){
	.site-branding a.brand img{max-width:236px}
	.site-branding a.brand img.svg-logo-image{width:236px}
}
/* Kontaktseite: Knöpfe „E-Mail senden“ / „Auf WhatsApp schreiben“ in den Karten (Designleitfaden 17.09.) */
.temana-karte .temana-karte__knopf{margin-top:12px; align-self:flex-start}
/* 29.09.2026 – Unterschrift im Vertrauensstreifen (Claus 26.09. Punkt 4): transparente WebP in TeMana-Grün,
   Desktop ca. 150 px, mobil kleiner; darunter der Name klein in Dunkelgrau. Die allgemeine Regel
   `.temana-anker__in img` (rundes 88-px-Porträt) darf hier nicht greifen. */
.temana-anker__in cite img.temana-anker__signatur{width:150px; height:auto; border-radius:0; object-fit:contain; display:block; margin:6px 0 2px}
.temana-anker__in cite .temana-anker__name{display:block; font-size:14.5px; font-weight:500; color:var(--temana-text)}
@media (max-width:767px){ .temana-anker__in cite img.temana-anker__signatur{width:120px} }