/**
 * Spaete CSS-Schicht - nur Frontend (wp_head, Prioritaet 101).
 *
 * Laedt NACH dem Kadence-Block-CSS und gewinnt daher ohne !important.
 * Erste Wahl fuer neue Regeln.
 *
 * Konvention: Klassen mit dem Praefix gk- benennen, ein Praefix konsequent.
 * Migrationssicher scopen - nie .page-id-N, sondern .home, die Kadence-
 * Body-Klasse aus der Seiten-Sidebar oder eine sprechende Klasse am Block.
 */

/* ---------------------------------------------------------------------------
   Shop-Buttons: deutsche Beschriftung nicht zerlegen
   Kadence setzt auf Buttons text-transform:capitalize. Im Englischen fällt das
   nicht auf, im Deutschen wird daraus "In Den Warenkorb". Der gespeicherte Text
   ist korrekt - nur die Darstellung wird hier zurückgenommen.
   --------------------------------------------------------------------------- */
.fluent-cart-add-to-cart-button,
.fluent-cart-add-to-cart-button .fct-button-text,
.fct-product-view-button,
.fct-product-view-button .fct-button-text,
.fct-buy-now-button,
.fct-buy-now-button .fct-button-text {
	text-transform: none;
}

/* ---------------------------------------------------------------------------
   Zustimmungs-Checkbox in Kadence-Formularen
   Kadence rendert den Text als <legend> ÜBER der Box. Ein <legend> nimmt am
   Flex- und Grid-Layout seines <fieldset> nicht teil - beide Varianten wurden
   gemessen und scheitern. Ein gefloatetes <legend> verliert diese
   Sonderbehandlung, das ist der Weg, der trägt.
   Nativ ist hier nichts möglich: weder der Block advanced-form-accept (kennt
   nur label/required/helpText) noch die Formular-Einstellungen in
   _kad_form_style bieten eine Option für Anordnung oder Hakenfarbe.
   --------------------------------------------------------------------------- */
.wp-block-kadence-advanced-form-accept fieldset.kb-radio-check-item-wrap {
	display: block;
	overflow: hidden;
}
.wp-block-kadence-advanced-form-accept fieldset.kb-radio-check-item-wrap > legend {
	float: right;
	/* Fester Platz statt em: 1.9em rechnet gegen die Schriftgroesse der <legend>.
	   Im Newsletter-Formular (12px) blieben davon 23px, die Box braucht 24px - sie
	   rutschte dadurch um 1px unter den Text. Pixel sind hier die stabile Groesse. */
	width: calc(100% - 32px);
	margin: 0;
}
.wp-block-kadence-advanced-form-accept .kb-radio-check-item {
	float: left;
	width: 32px;
	/* Box etwas tiefer, damit sie auf der Textzeile sitzt statt darüber */
	margin-top: 4px;
}

/* Angehakte Box in der grünen Hauptfarbe statt im Kadence-Blau (#0c5aff).
   Kadence stellt dafür eine eigene Variable bereit - die wird hier gesetzt,
   nicht mit !important bekämpft. */
.wp-block-kadence-advanced-form {
	--kb-form-check-highlight-color: var(--global-palette2, #6a8b6f);
}

/* ---------------------------------------------------------------------------
   Runde Ecken an der Methoden-Tabelle (kadence/table)
   Nicht nativ loesbar: der Block hat in ALLEN 56 Attributen keinen Radius,
   und die Pro-Erweiterung steuert nur Sticky-Zeile/-Spalte bei. Geprueft am
   Schema und an beiden Renderern - das ist die eine Stelle dieser Seite, an
   der CSS noetig ist. Alles andere an der Tabelle (Zellenabstand, Zeilenhoehe,
   Trennlinien) kommt aus nativen Attributen.
   Kein overflow:hidden noetig: Kadence setzt am Wrapper bereits
   overflow-x:auto, sobald maxWidthUnit gefuellt ist. Der Wrapper ist damit
   Scroll-Container und beschneidet an den runden Ecken von selbst. Ein
   zusaetzliches overflow:hidden wuerde das horizontale Scrollen auf schmalen
   Schirmen wegnehmen.
   --------------------------------------------------------------------------- */
.gk-tabelle.kb-table-container {
	border-radius: 16px;
}

/* Die letzte Zeile braucht keine Trennlinie zum Nichts. */
.gk-tabelle.kb-table-container .kb-table tr:last-child {
	border-bottom: 0;
}

/* ---------------------------------------------------------------------------
   404-Seite: das Suchfeld mittig setzen
   .kb-search ist ein Flex-Container; das textAlign:center der Spalte greift
   deshalb nicht. Der Kadence-Suchblock bietet dafuer keine eigene Einstellung.
   --------------------------------------------------------------------------- */
.gk-404-suche.kb-search {
	justify-content: center;
}

/* ---------------------------------------------------------------------------
   FluentCart-Farben: NICHT mehr hier.
   Seit FluentCart 1.6.5 gibt es dafuer eigene Einstellungen unter
   Settings -> Store Settings -> Appearance. Die schreiben dieselben
   --fct-*-Variablen an :root (wp_head, Prioritaet 100) und versorgen
   zusaetzlich die Stripe-Elements im iframe, die kein CSS von hier
   erreicht. Aenderungen gehoeren dorthin, nicht in diese Datei.
   Stand 24.09.2026: Quelle 'customize', 7 Farben gesetzt.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   FluentCart: der Lade-Spinner am "In den Warenkorb"-Knopf
   Die einzige Stelle, die die Appearance-Einstellungen nicht erreichen:
   Ueberlagerung und Spinner stehen hartkodiert in style3.css bzw.
   product-card.css (rgb(234 236 240) und fill:#0171db), ohne var(--fct-…).

   Warum ueberall ein 'body' davor: die Ladereihenfolge ist NICHT verlaesslich.
   Auf der Produktseite laedt design-late.css nach style3.css, auf der
   Shop-Seite aber DAVOR (Index 16 gegen 21/27) - bei gleicher Spezifitaet
   verliert die Regel dort also. Das 'body' hebt sie auf (0,2,3) und macht
   sie von der Reihenfolge unabhaengig.

   Die Flaeche der Produktkacheln bleibt bewusst unberuehrt: product-card.css
   setzt sie mit (0,3,2) ueber var(--fct-card-btn-bg-color) (= #6a8b6f) und
   gewinnt damit gegen unsere (0,2,3) - mehr Klassen schlagen mehr Elemente.
   --------------------------------------------------------------------------- */
body button.fluent-cart-add-to-cart-button .fluent-cart-loader {
	background-color: #edf1ec;
}

/* fill = der drehende Bogen (path fill="currentFill"),
   color = die ruhende Kreisbahn (path fill="currentColor") */
body button.fluent-cart-add-to-cart-button .fluent-cart-loader svg {
	fill: #6a8b6f;
	color: #cacdc7;
}

/* Auf den Shop-Kacheln liegt die Ueberlagerung auf GRUEN (product-card.css
   faerbt sie ueber var(--fct-card-btn-bg-color)). Ein gruener Bogen waere dort
   unsichtbar - also weiss, mit blasser weisser Kreisbahn. (0,3,3) schlaegt die
   allgemeine Regel oben mit (0,2,3). */
body .fct-product-card button.fluent-cart-add-to-cart-button .fluent-cart-loader svg {
	fill: #ffffff;
	color: rgba(255, 255, 255, 0.45);
}

/* ---------------------------------------------------------------------------
   LifterLMS-Anmeldeformular auf /account/
   Die Seite traegt zwei Portale: den FluentCart-Kundenbereich und darunter
   [lifterlms_my_account]. Das Formular kommt also von LifterLMS und kennt die
   Seitengestaltung nicht.

   Warum einspaltig: LifterLMS stellt die Felder in ein Float-Raster, Mail und
   Passwort je .llms-cols-6 (50 %). Bei 20 px Grundschrift sind das 300 px - und
   im Passwortfeld legt LifterLMS Label und "Passwort anzeigen" per
   grid-template-columns: 1fr auto NEBENEINANDER. Der deutsche Umschalter ist
   207 px breit, fuers Label blieben 61 px, das Wort brach zu "Passw / ort".
   Im Englischen ("Show password") faellt das nicht auf. Volle Breite loest
   beides, ohne LifterLMS' Raster anzufassen.
   --------------------------------------------------------------------------- */
.llms-person-login-form-wrapper .llms-form-fields .llms-form-field {
	float: none;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}

/* Rechtsbuendig war fuer eine 150-px-Spalte gedacht - auf voller Breite wandert
   "Passwort vergessen?" sonst allein an den rechten Rand. */
.llms-person-login-form-wrapper .llms-form-fields .llms-form-field.align-right {
	text-align: left;
}

/* Nicht bei Ankreuzfeldern - dort gehoert das Label NEBEN das Kaestchen. */
.llms-person-login-form-wrapper .llms-form-fields .llms-form-field:not(.type-checkbox):not(.type-radio) label {
	display: block;
	margin-bottom: 6px;
	font-size: 16px;
	color: #52564c;
}

.llms-person-login-form-wrapper .llms-form-fields .llms-form-field.type-checkbox {
	display: flex;
	align-items: center;
	gap: 10px;
}

.llms-person-login-form-wrapper .llms-form-fields .llms-form-field.type-checkbox label {
	margin: 0;
	font-size: 16px;
	color: #52564c;
}

/* Eingabefelder wie in der Kasse: /account/ ist der Kundenbereich des Shops,
   nicht eines der Kadence-Formulare mit Unterstrich-Optik. */
.llms-person-login-form-wrapper .llms-form-field input[type="text"],
.llms-person-login-form-wrapper .llms-form-field input[type="email"],
.llms-person-login-form-wrapper .llms-form-field input[type="password"] {
	background-color: #ffffff;
	border: 1px solid #cacdc7;
	border-radius: 8px;
	color: #52564c;
	font-size: 16px;
	padding: 12px 16px;
}

.llms-person-login-form-wrapper .llms-form-field input[type="text"]:focus,
.llms-person-login-form-wrapper .llms-form-field input[type="email"]:focus,
.llms-person-login-form-wrapper .llms-form-field input[type="password"]:focus {
	border-color: #6a8b6f;
	outline: none;
}

.llms-person-login-form-wrapper .llms-form-field .llms-visibility-toggle button {
	color: #6a8b6f;
	font-size: 15px;
}

/* Der Knopf traegt .wp-element-button und erbt darum Kadence' Buttonfarbe -
   aber nicht die Schrift der Seitenbuttons (Nunito 18 px statt Jost 13 px).
   Die 4 Klassen schlagen LifterLMS' width:100%-Regel (0,3,1). */
.llms-person-login-form-wrapper .llms-form-fields .llms-form-field.type-submit button {
	width: auto;
	background-color: #6a8b6f;
	color: #ffffff;
	border: 0;
	border-radius: 3px;
	font-family: Jost, sans-serif;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 16px 28px;
}

.llms-person-login-form-wrapper .llms-form-fields .llms-form-field.type-submit button:hover,
.llms-person-login-form-wrapper .llms-form-fields .llms-form-field.type-submit button:focus {
	background-color: #4e6b52;
	color: #ffffff;
}

.llms-person-login-form-wrapper .llms-form-heading {
	font-size: 30px;
	margin-bottom: 24px;
}

/* ---------------------------------------------------------------------------
   Terminseiten (The Events Calendar)
   Die Karte ersetzt den Inhalt von .tribe-events-schedule - der Wrapper bleibt
   also stehen und wird hier nur entkleidet.
   --------------------------------------------------------------------------- */
.gk-event-eckdaten {
	margin: 32px 0 36px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 28px;
	background: #ffffff;
	border: 1px solid rgba(123, 129, 114, 0.4);
	border-radius: 16px;
	padding: 24px 28px;
}

.gk-event-eckdaten__liste {
	flex: 1 1 320px;
	display: grid;
	/* 150px ergaben vier schmale Spalten, in denen "Samstag, 17. Oktober 2026"
	   und der Treffpunkt umbrachen. 190px laesst zwei Spalten entstehen. */
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 16px 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gk-event-eckdaten__punkt {
	margin: 0;
	padding: 0;
}

.gk-event-eckdaten__label {
	display: block;
	font-family: Jost, sans-serif;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #6a8b6f;
	margin-bottom: 4px;
}

.gk-event-eckdaten__wert {
	display: block;
	font-size: 17px;
	line-height: 1.4;
	color: #3d2b1f;
}

.gk-event-eckdaten__aktion {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
}

/* Knopf in der Optik der uebrigen Seitenbuttons (vgl. gk_btn). */
/* body davor: das Theme faerbt Links im Inhaltsbereich, und die
   Ladereihenfolge von design-late.css ist je nach Seite verschieden. */
body .gk-event-knopf,
body a.gk-event-knopf {
	display: inline-block;
	background-color: #6a8b6f;
	color: #ffffff;
	border-radius: 3px;
	padding: 16px 28px;
	font-family: Jost, sans-serif;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
}

body a.gk-event-knopf:hover,
body a.gk-event-knopf:focus {
	background-color: #4e6b52;
	color: #ffffff;
}

body a.gk-event-knopf--gross {
	padding: 20px 40px;
	font-size: 15px;
}

body a.gk-event-infolink {
	font-size: 14px;
	color: #52564c;
	text-align: center;
}

.gk-event-abschluss {
	margin: 36px 0 8px;
	text-align: center;
}

@media (max-width: 767px) {
	.gk-event-eckdaten {
		padding: 20px;
		gap: 18px;
	}
	.gk-event-eckdaten__aktion {
		flex: 1 1 100%;
	}
	.gk-event-knopf {
		white-space: normal;
	}
}


/* Blog /wissen/: aktive Kategorie in der Knopfleiste (Element "Blog: Archivinhalt").
   Die Knöpfe sind statische Links auf die Kategoriearchive; welcher aktiv ist,
   weiß nur die Body-Klasse des Archivs. */
body.category-wissen .gk-kat-wissen.kb-button,
body.category-do-it-yourself .gk-kat-do-it-yourself.kb-button,
body.category-hausapotheke .gk-kat-hausapotheke.kb-button,
body.category-jahreskreis .gk-kat-jahreskreis.kb-button,
body.category-lebensenergie .gk-kat-lebensenergie.kb-button,
body.category-raeuchern .gk-kat-raeuchern.kb-button,
body.category-rezepte .gk-kat-rezepte.kb-button,
body.category-wald .gk-kat-wald.kb-button,
body.category-wildkraeuter .gk-kat-wildkraeuter.kb-button {
	background: #6a8b6f;
	color: #ffffff;
}

/* Blog-Karten: Titel-Link ohne Dauer-Unterstreichung (kommt von link-style-standard
   des Themes; der Überschrift-Block hat für verlinkte Überschriften keinen Schalter). */
.wp-block-kadence-query-card .kb-advanced-heading-link {
	text-decoration: none;
}
.wp-block-kadence-query-card .kb-advanced-heading-link:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* LifterLMS-Lektionen mobil (LifterLMS bietet dafür keine Einstellungen):
   - Vor/Zurück stehen im zweispaltigen Grid zwingend nebeneinander; bei 375 px blieben je
     ~130 px und die Wörter brachen mitten durch → untereinander stellen.
   - „Als abgeschlossen markieren“ ist nowrap (LifterLMS) mit 38 px Seitenabstand
     (Kadence-Knopf global) → Text lief aus dem Knopf. */
@media (max-width: 767px) {
	body .llms-course-navigation {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.llms-course-navigation .llms-prev-lesson,
	.llms-course-navigation .llms-next-lesson,
	.llms-course-navigation .llms-back-to-course {
		flex: none;
		width: 100%;
		margin: 0;
		padding-left: 0;
		padding-right: 0;
	}
	.llms-course-navigation .llms-prev-lesson::after,
	.llms-course-navigation .llms-next-lesson::after {
		display: none;
	}
	body .llms-complete-lesson-form .llms-button-primary,
	body .llms-incomplete-lesson-form .llms-button-secondary {
		white-space: normal;
		padding-left: 24px;
		padding-right: 24px;
	}
}

/* LifterLMS: Lektionskästen (Kurs-Inhaltsverzeichnis + Vor/Zurück in Lektionen) weiß
   hinterlegen (Michael, 01.10.2026). */
.llms-lesson-preview .course-information {
	background-color: #fff;
	transition: background-color 0.2s ease;
}
/* Hover/Fokus: Palette 8 (#edf1ec) — dieselbe Farbe, die LifterLMS vorher am Link zeigte. */
.llms-lesson-preview .llms-lesson-link:hover .course-information,
.llms-lesson-preview .llms-lesson-link:focus-visible .course-information {
	background-color: var(--global-palette8, #edf1ec);
}
/* LifterLMS hinterlegt den Titelbereich darin mit #fefefe — sonst bleibt beim Hover ein weißer Streifen. */
.llms-lesson-preview .course-information section {
	background-color: transparent;
}