/*
==========================================================================
  custom.css – Grow & Glow (grow-and-glow.de)
  Speicherort: /wp-content/themes/molti-lms/css/custom.css
==========================================================================

  WICHTIG FÜR DIE BETREUUNG
  - Dies ist die EINZIGE Stelle für eigenes CSS dieser Seite.
  - Geladen wird sie über die functions.php (Funktion bh_custom_css,
    Priorität 999, Version = Änderungsdatum der Datei → kein Cache-Problem).
  - Die style.css im Theme-Ordner enthält nur noch den Theme-Kopf.
  - Divi → Theme-Optionen → Benutzerdefiniertes CSS ist leer und soll leer
    bleiben. Customizer → Zusätzliches CSS ebenfalls.

  HERKUNFT (zusammengeführt und bereinigt im November 2026,
  Online-Olm Webdesign)
  Diese Datei ersetzt drei frühere Orte:
    1. style.css des gekauften Child-Themes „Molti LMS“ (SamarJ)
    2. Divi → Theme-Optionen → Benutzerdefiniertes CSS
    3. Farb-CSS, das die functions.php per PHP in den <head> geschrieben hat
       (Customizer-Panel „LMS → Accent Colors“, dort war #00c86f gesetzt).
       Diese Farben sind jetzt direkt in die Regeln eingearbeitet.

  Alle Regeln wurden live geprüft (41 Seiten, nicht eingeloggt). Entfernt
  wurden die Molti-Demo-Bausteine, die auf der Seite nicht vorkommen
  (Testimonial-Slider, Karussell, Hamburger v3, Sidebar, Showcase usw.),
  inklusive des Molti-Orange (#ff6d6f).
  Bereiche, die nur eingeloggt sichtbar sind (Profil, Login-Popup), sind
  mit „nur eingeloggt“ markiert und konnten nicht live geprüft werden.
  Fokus-Modus und Tabellen in Lektionen sind laut Betreuerin in Nutzung.

  DIVI-VERSION: Die Seite läuft vorerst bewusst weiter mit Divi 4.
  Hinweise zu Divi 5 in dieser Datei gelten erst für einen späteren Wechsel.

  INHALT
   1. Farben (Variablen)
   2. Grundlagen: Listen, Tabellen, Formulare, Hilfsklassen
   3. Header & Navigation
   4. Divi-Module & Layout
   5. FAQ-Tabs (Support, Growthcode Cycle)
   6. LearnDash: Kursübersicht (Course Grid)
   7. LearnDash: Kursseiten, Lektionen, Profil
   8. LearnDash: Login-Popup
   9. Temporärer Fix: Divi-Animationen aus
  10. Farben über Divi-4-Nummerierung (bei Wechsel zu Divi 5 umstellen)
  11. Animationen (Keyframes)
  12. Deaktiviert: Regeln, die nie gewirkt haben
==========================================================================
*/


/* ==========================================================================
   1. FARBEN (VARIABLEN)
   Markenfarben hier ändern, nicht in den einzelnen Regeln.
   In Divi 5 können diese Werte später als globale Farben angelegt werden.
   ========================================================================== */

:root {
	--gg-gruen:        #00c86f;  /* Hauptgrün: Buttons, Linien, Icons, Hover */
	--gg-gruen-dunkel: #164731;  /* Dunkelgrün: Kurs-Buttons, Preise */
	--gg-gelb:         #edff00;  /* Gelb: „Nach oben“-Button */
	--gg-grau-hell:    #e6ebee;  /* Hellgrau: Rahmen, Flächen */
}


/* ==========================================================================
   2. GRUNDLAGEN: LISTEN, TABELLEN, FORMULARE, HILFSKLASSEN
   ========================================================================== */

/* Hilfsklasse .centered – in Divi bei der SPALTE eintragen:
   richtet Elemente vertikal mittig aus. */
.centered {
	display: flex;
	align-items: center;
	flex-direction: row;
	flex-wrap: wrap;
}

/* Hilfsklasse .text-wrap – lange Wörter umbrechen, nur in Modulen,
   die diese Klasse tragen. */
.text-wrap {
	word-break: break-word;
	overflow-wrap: break-word;
	hyphens: auto;
}

/* Aufzählungszeichen und Nummern wieder anzeigen (v. a. in den Lektionen).
   Achtung: gilt seitenweit für ALLE Listen. */
ul {
	list-style: disc;
	padding-left: 20px !important;
}

ol {
	list-style: decimal;
	padding-left: 20px !important;
}

/* Tabellen seitenweit – werden in mehreren Lektionen gebraucht, auch Warenkorb */
table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 20px;
	margin-bottom: 20px;
}

table th,
table td {
	border: 1px solid var(--gg-grau-hell);
	padding: 8px 12px;
	text-align: left;
}

table th {
	background-color: #f7f7f7;
	font-weight: bold;
}

/* Tabellen auf dem Handy: jede Zeile als Block, Spaltentitel aus dem
   Attribut data-label vor dem Wert (data-label muss im HTML stehen). */
@media (max-width: 600px) {
	table thead {
		display: none;
	}

	table tr {
		display: block;
		margin-bottom: 12px;
	}

	table td {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
		gap: 10px;
		padding: 8px 12px;
		border: 1px solid var(--gg-grau-hell);
		font-size: 1em;
		text-align: left;
		min-height: 40px;
	}

	table td::before {
		content: attr(data-label);
		font-weight: 700;
		color: #000;
		text-transform: uppercase;
		font-size: 0.85em;
		flex: 0 0 45%;
		line-height: 1.4;
		word-break: break-word;
	}
}

/* Divi-Kontaktformular: Text der Erfolgsmeldung wird AUSGEBLENDET
   (Formulare auf Startseite und Support). */
.et-pb-contact-message p {
	display: none;
}

/* Checkboxen seitenweit: runde Kästchen mit Häkchen-Icon (Divi-Iconfont).
   Zu sehen z. B. im Filter der Learning Journeys und unter Mein Konto. */
input[type=checkbox] {
	appearance: none !important;
	display: inline-block !important;
	position: relative;
	background-color: #f3efec;
	color: #19191a;
	top: 0;
	vertical-align: middle;
	height: 15px;
	width: 15px;
	box-shadow: 0 0 1px #19191a;
	border-radius: 50px;
	cursor: pointer;
	margin: -3px 7px 0 5px;
	outline: none;
	transition: all .2s ease-in-out;
}

input[type=checkbox]:hover {
	transform: scale(1.15) !important;
}

input[type=checkbox]:checked:before {
	content: '\4e' !important;
	position: absolute;
	font-size: 10px !important;
	font-family: 'ETmodules';
	font-weight: 700;
	left: 2px;
	top: 3px;
}


/* ==========================================================================
   3. HEADER & NAVIGATION
   ========================================================================== */

/* „Nach oben“-Button: gelber Halbkreis am rechten Rand */
.et_pb_scroll_top.et-pb-icon {
	text-align: center;
	background: var(--gg-gelb);
	text-decoration: none;
	position: fixed;
	z-index: 99999;
	bottom: 125px;
	right: 0;
	border-top-left-radius: 50px;
	border-bottom-left-radius: 50px;
	display: none;
	cursor: pointer;
	font-size: 35px;
	padding: 5px;
	color: var(--gg-gruen-dunkel) !important;
}

.et_pb_scroll_top:before {
	content: '6'; /* Pfeil-Icon aus dem Divi-Iconfont */
}

/* --- Hauptmenü ----------------------------------------------------------- */

/* Aktiver Menüpunkt grün */
.et_pb_menu ul li.current-menu-item a {
	color: var(--gg-gruen) !important;
}

/* --- Dropdown-Menü (Desktop, z. B. „Learning Journeys“) ----------------- */

.et-menu-nav .nav li li {
	padding: 0 !important;
}

/* Breite des Untermenüs */
.et-menu-nav .nav li ul {
	width: 250px !important;
}

/* Kein grauer Hover-Hintergrund bei Untermenü-Links */
.et-menu-nav .nav ul li a:hover {
	background-color: transparent;
}

/* Untermenü-Links: grüne Schrift bei Hover */
.et_pb_menu .nav li ul.sub-menu a:hover {
	color: var(--gg-gruen) !important;
}

/* Abstände und Zeilenhöhe der Untermenü-Links
   - padding oben/unten = Abstand zwischen den Menüpunkten
   - line-height = Zeilenabstand innerhalb eines Punkts, wenn er umbricht
     (z. B. „Growth Code Cycle & All-Access-Membership“).
   Das Menü-Modul im Theme-Builder-Header setzt für alle Menü-Links eine
   Zeilenhöhe von 0.95em. Fürs Hauptmenü passt das, im Dropdown wurden
   zweizeilige Punkte dadurch zu eng. Deshalb hier mit !important nur
   fürs Dropdown überschrieben. */
.et-menu-nav .et-menu li li a {
	padding: 8px 20px;
	margin: 0;
	line-height: 1.35 !important;
}

.et-menu li li a {
	width: 230px;
}

/* Grüner Strich links am aktiven Untermenü-Link */
.et-menu-nav .et_pb_menu .nav li ul.sub-menu li.current-menu-item a:before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	transition: all .2s ease-in-out;
	background: var(--gg-gruen);
	width: 4px;
	border-radius: 0 3px 3px 0;
}

/* Grüner Strich links beim Hover über Untermenü-Links */
.et-menu-nav .et-menu li li a:before {
	content: '';
	display: block;
	position: absolute;
	width: 0;
	top: 0;
	bottom: 0;
	left: 0;
	transition: all .2s ease-in-out;
	border-radius: 0 3px 3px 0;
}

.et-menu-nav .et-menu li li a:hover:before {
	background: var(--gg-gruen) !important;
	width: 4px;
}

/* Untermenü: Einblenden von unten */
.et-menu-nav .et-show-dropdown .sub-menu {
	animation: fade-in-bottom 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

/* Untermenü: Schatten, runde Ecken, Ausblend-Animation */
.et-menu-nav .sub-menu {
	box-shadow: 0 5px 40px #0000002b !important;
	border-radius: 8px;
	animation: fade-out-bottom 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/* Kleiner weißer Pfeil oben am Untermenü */
.et-menu-nav .sub-menu:after {
	content: '';
	display: block;
	position: absolute;
	left: 11%;
	top: -22px;
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 10px solid #fff;
	border-left: 10px solid transparent;
	z-index: 1;
}

/* --- Mobiles Menü -------------------------------------------------------- */

/* Höhe des mobilen Menüs an den Bildschirm anpassen, Inhalt scrollbar */
.et_pb_menu .et_mobile_menu {
	max-height: calc(100vh - 80px);
	height: auto !important;
	overflow-y: auto;
	padding-bottom: 20px;
}

/* Hamburger-Icon grün */
.mobile_menu_bar:before {
	color: var(--gg-gruen) !important;
}

/* Hamburger-Icon wird beim Öffnen zum X */
.mobile_nav.opened .mobile_menu_bar:before {
	content: '\4d';
}

/* Login-Blurb im Header: etwas Abstand zum mobilen Hamburger-Menü */
.login-blurb {
	margin-right: 8px;
	position: relative;
	z-index: 998;
}


/* ==========================================================================
   4. DIVI-MODULE & LAYOUT
   ========================================================================== */

/* Behebt ruckelige Animation beim Button-Modul */
.et_pb_button_module_wrapper {
	transition: all .3s ease !important;
}

/* Button-Schatten dezent – seitenweit.
   Die Divi-Buttons hatten aus dem Molti-Demo-Layout in JEDEM Modul einen
   großen schwarzen Schatten (Design → Box-Schatten), beim Hover noch
   größer. Unter dem gelben Hover-Hintergrund wirkte das bräunlich-orange.
   Hier zentral überschrieben, damit nicht jedes Modul einzeln angepasst
   werden muss. Ganz ohne Schatten: beide Werte auf „none“ setzen. */
.et_pb_button {
	box-shadow: 0 4px 10px -6px rgb(0 0 0 / 20%) !important;
}

.et_pb_button:hover {
	box-shadow: 0 6px 12px -8px rgb(0 0 0 / 25%) !important;
}

/* Spalten vertikal mittig – in der Zeile „Gleiche Spaltenhöhe“ aktivieren */
.et_pb_equal_columns > .et_pb_column {
	margin-top: auto;
	margin-bottom: auto;
}

/* Buttons nebeneinander: Klasse „inline-buttons-row“ an die ZEILE */
.inline-buttons-row .et_pb_button_module_wrapper {
	display: inline-block;
}

/* Startseite, „Fünf Wachstumsfelder“ (Klasse „molti-course-categories“):
   grüner Rahmen und grüne Überschrift bei Hover */
.molti-course-categories .et_pb_blurb:hover {
	border-color: var(--gg-gruen) !important;
}

.molti-course-categories .et_pb_blurb:hover h4 {
	color: var(--gg-gruen) !important;
}


/* Persönlicher Bereich (nur eingeloggt), Karten mit Klasse „service-card-2“:
   Kreis mit Pfeil oben rechts grün statt Molti-Orange – auch bei Hover.
   Das Orange kommt aus dem Molti-Demo-Layout (Divi-Einstellungen) und wird
   hier überschrieben. */
.service-card-2:before,
.service-card-2:hover:before {
	background-color: var(--gg-gruen) !important;
}


/* ==========================================================================
   5. FAQ-TABS (SUPPORT, GROWTHCODE CYCLE)
   Klassen „faq-tab“ (Reiter) und „faq-content“ (Inhalte) in Divi.
   Das Umschalten macht ein kleines Skript in der functions.php
   (Abschnitt 5 dort).
   ========================================================================== */

/* Inhalte standardmäßig versteckt … */
.faq-content {
	display: none;
}

/* … der aktive Inhalt wird eingeblendet */
.active-faq-content {
	display: block;
	animation: fade-in-bottom 0.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.faq-tab {
	cursor: pointer !important;
	transition: .2s ease;
}

.faq-tab .et-pb-icon {
	color: var(--gg-gruen) !important;
}

.active-faq-tab {
	box-shadow: 0 5px 30px #0000001a;
	color: #08415c;
}

/* Plus/Minus-Icon der Toggles in den FAQ-Inhalten grün */
.faq-content .et_pb_toggle_title:before {
	color: var(--gg-gruen) !important;
}


/* ==========================================================================
   6. LEARNDASH: KURSÜBERSICHT (COURSE GRID)
   ========================================================================== */

/* --- Startseite, „Unsere beliebtesten Learning Journeys“
       (älteres Course Grid, Klasse .ld-course-list-items) --------------- */

.ld-course-list-items .ld_course_grid .thumbnail.course img {
	border-radius: 7px 7px 0 0;
}

/* Preis-Ribbon oben links: grün, kostenlose Kurse dunkelgrün */
.ld-course-list-items .ld_course_grid .thumbnail.course .ribbon:before {
	display: none;
}

.ld-course-list-items .ld_course_grid .thumbnail.course .ribbon {
	background: var(--gg-gruen) !important;
	left: 0;
	top: 0;
	border-radius: 7px 0;
	box-shadow: 0 5px 10px #00000036;
	text-shadow: none !important;
	font-size: 12px !important;
	text-transform: uppercase !important;
	font-weight: 400 !important;
	padding: 8px 12px;
}

.ld-course-list-items .ld_course_grid .thumbnail.course .ribbon.enrolled:after {
	display: none;
}

.ld-course-list-items .ld_course_grid .thumbnail.course .ribbon.free {
	background: var(--gg-gruen-dunkel) !important;
}

.ld-course-list-items .ld_course_grid .entry-title {
	margin-bottom: -13px !important;
	font-weight: 700;
	margin-top: 15px !important;
	line-height: 1.4em;
}

.ld-course-list-items .ld_course_grid .thumbnail .caption p {
	font-size: 13px !important;
	line-height: 1.8em;
}

/* Button „Jetzt einschreiben“ */
.ld-course-list-items .ld_course_grid .thumbnail.course a.btn-primary {
	border-radius: 5px;
	font-size: 14px;
	font-weight: 400 !important;
	text-transform: uppercase !important;
	background: var(--gg-gruen-dunkel) !important;
	border: none;
	padding: 13px;
	box-shadow: 0 4px 10px -6px rgb(0 0 0 / 20%);
	transition: .2s ease;
	margin-top: 20px;
	margin-bottom: 10px;
}

.ld-course-list-items .ld_course_grid .thumbnail.course a.btn-primary:hover {
	transform: translate(0%, -5%);
	box-shadow: 0 6px 12px -8px rgb(0 0 0 / 25%);
}

/* Kurs-Karte */
.ld-course-list-items .ld_course_grid .thumbnail.course {
	border: none;
	box-shadow: 0 5px 30px rgb(0 0 0 / 10%);
	border-radius: 8px !important;
}

.ld-course-list-items .ld_course_grid .thumbnail.course:hover {
	transform: translate(0%, -2%);
	box-shadow: 0 15px 50px rgb(0 0 0 / 15%);
}

.ld-course-list-items .ld_course_grid .thumbnail .caption {
	padding: 15px 25px;
	color: var(--gg-gruen);
}

/* Tablet: zwei Karten nebeneinander */
@media (max-width: 768px) and (min-width: 575px) {
	.ld-course-list-items .col-md-4 {
		flex: 0 0 50% !important;
		max-width: 50% !important;
	}
}

/* --- Seite „Learning Journeys“
       (aktuelles Course Grid, Klasse „molti-course-grid“ am Modul) ------ */

.molti-course-grid .et_pb_widget {
	width: 100% !important;
}

.molti-course-grid .entry-title a {
	line-height: 1.3em !important;
}

.molti-course-grid .post {
	border-radius: 6px !important;
}

.molti-course-grid .thumbnail img {
	border-radius: 5px 5px 0 0;
}

/* Preis-Ribbon */
.molti-course-grid .ribbon {
	background: var(--gg-gruen) !important;
	text-transform: uppercase !important;
	font-size: 10px !important;
	font-weight: 400 !important;
	padding: 6px 8px !important;
	top: 5px !important;
	right: 6px !important;
	border-radius: 4px !important;
	box-shadow: 0 5px 20px #0000005e !important;
	text-shadow: none !important;
}

.molti-course-grid .ribbon.enrolled:after {
	display: none;
}

/* Filter-Button und Filter-Box */
.molti-course-grid .toggle-filter,
.molti-course-grid .learndash-course-grid-filter .buttons .button.grey {
	color: #333;
	background-color: #eee;
	border-color: #eee;
	border-radius: 6px;
	text-transform: uppercase;
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 30px;
}

.molti-course-grid .toggle-filter:hover,
.molti-course-grid .learndash-course-grid-filter .buttons .button.grey:hover {
	background-color: var(--gg-grau-hell);
	border-color: var(--gg-grau-hell);
}

.molti-course-grid .learndash-course-grid-filter .buttons .button.grey {
	margin-bottom: 0 !important;
}

.molti-course-grid .learndash-course-grid-filter {
	right: -30px;
	position: absolute;
	top: 50px;
	box-shadow: 0 25px 50px #00000036;
	animation: fade-in-bottom 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

/* Filter-Button „Anwenden“: dunkelgrün, bei Hover grün */
.molti-course-grid .buttons .button.blue {
	color: #fff;
	background-color: var(--gg-gruen-dunkel) !important;
	border-color: var(--gg-gruen) !important;
	text-transform: uppercase !important;
	font-size: 13px;
	font-weight: 400;
}

.molti-course-grid .buttons .button.blue:hover {
	background-color: var(--gg-gruen) !important;
	border-color: var(--gg-gruen) !important;
}

.molti-course-grid .toggle-filter.opened::before {
	content: "\f158";
	font-family: 'Dashicons';
	padding-right: 6px;
	top: 0;
	position: relative;
}

.molti-course-grid input[type="text"],
.molti-course-grid .filter.price .number-wrapper input {
	padding: 8px;
	border-radius: 5px;
	border: solid 2px var(--gg-grau-hell);
}

.molti-course-grid input[type="text"]:focus {
	border: solid 2px var(--gg-grau-hell);
}

/* Preis-Schieberegler im Filter */
.molti-course-grid form input[type=range]::-webkit-slider-runnable-track {
	background: #eee;
}

.molti-course-grid form input[type=range]:focus::-webkit-slider-runnable-track {
	background: #eee;
}

.learndash-course-grid-filter form input[type=range]::-moz-range-track {
	background: #eee;
	box-shadow: none !important;
	border: none !important;
}

.learndash-course-grid-filter form input[type=range]::-webkit-slider-thumb {
	border: none;
	transition: .2s ease;
	transform: scale(1.1);
	box-shadow: 0 0 0 2px var(--gg-gruen);
}

.learndash-course-grid-filter form input[type=range]::-webkit-slider-thumb:hover {
	box-shadow: 0 0 0 5px var(--gg-gruen);
}

.learndash-course-grid-filter form input[type=range]::-moz-range-thumb {
	border: none;
	transition: .2s ease;
	transform: scale(1.1);
	box-shadow: 0 0 0 2px var(--gg-gruen);
}

.learndash-course-grid-filter form input[type=range]::-moz-range-thumb:hover {
	box-shadow: 0 0 0 5px var(--gg-gruen);
}

/* Kurs-Button (wird von der grid-2-Regel weiter unten dunkelgrün überschrieben,
   wo beide passen) */
.molti-course-grid .button a {
	background: var(--gg-gruen) !important;
	border-color: var(--gg-gruen) !important;
	padding: 13px !important;
	max-width: 100% !important;
	margin-top: 15px;
}

.molti-course-grid .button a:hover {
	transform: translate(0%, -5%);
	box-shadow: 0 6px 12px -8px rgb(0 0 0 / 25%);
}

/* Pfeile auf den Kursbildern */
.learndash-course-grid .items-wrapper .grid-2 .thumbnail .arrow * {
	padding: 10px !important;
}

.learndash-course-grid .items-wrapper .grid-2 .thumbnail .arrow a {
	padding: 0 !important;
}

.molti-course-grid .arrow .dashicons {
	background: #fff !important;
	color: var(--gg-gruen) !important;
	box-shadow: 0 5px 10px #0000001c;
	transition: .2s ease !important;
}

.molti-course-grid .price-wrapper {
	background: #eee;
	padding: 10px 20px;
	margin-top: 15px;
	border-radius: 9px;
}

.molti-course-grid .price-wrapper .price {
	font-weight: 700;
}

.molti-course-grid .author img {
	border: none !important;
}

/* „Mehr laden“-Button */
.learndash-course-grid .pagination .load-more {
	font-size: 14px;
	text-transform: uppercase;
	font-weight: bold;
	border-radius: 5px;
	background: var(--gg-gruen) !important;
	border-color: var(--gg-gruen) !important;
	transition: .2s ease;
}

.learndash-course-grid .pagination .load-more:hover {
	transform: translate(0%, -5%);
	box-shadow: 0 6px 12px -8px rgb(0 0 0 / 25%);
	background: var(--gg-gruen) !important;
}

/* Anzahl der Spalten: Desktop 3, Tablet 2, Handy 1 – Zahl in repeat() ändern */
.learndash-course-grid .items-wrapper.grid {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

@media only screen and (min-width: 579px) and (max-width: 980px) {
	.learndash-course-grid .items-wrapper.grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media only screen and (max-width: 579px) {
	.learndash-course-grid .items-wrapper.grid {
		grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
	}
}

/* Kurs-Button im Grid (Skin „grid-2“): dunkelgrün */
.learndash-course-grid .items-wrapper .grid-2 .content .button a {
	background-color: var(--gg-gruen-dunkel) !important;
	font-weight: 400;
	font-size: 13px !important;
	text-transform: uppercase !important;
}

/* Freebie (Beitrag 102747) in der Kursübersicht ausblenden.
   Live derzeit nicht im Grid – kann über „Mehr laden“ nachkommen,
   daher drin gelassen. */
.post-102747 {
	display: none !important;
}

/* Lade-Kreisel von LearnDash */
.ld-loading:before {
	border: 4px solid #000;
	border-top-color: var(--gg-gruen) !important;
	height: 30px;
	left: -16%;
	top: 55%;
	width: 30px;
	box-shadow: 0 5px 30px #0003;
}


/* ==========================================================================
   7. LEARNDASH: KURSSEITEN, LEKTIONEN, PROFIL
   ========================================================================== */

/* --- Kursseite: Kasten „Diesen Kurs belegen“ --------------------------- */
.learndash-wrapper:not(.ld-registration__outer-wrapper) #btn-join,
.learndash-wrapper:not(.ld-registration__outer-wrapper) .btn-join {
	background-color: var(--gg-gruen) !important;
	color: #fff !important;
}

.learndash-wrapper .ld-course-status.ld-course-status-not-enrolled {
	background: var(--gg-grau-hell) !important;
}

.learndash-wrapper .ld-course-status.ld-course-status-not-enrolled .ld-course-status-price {
	color: var(--gg-gruen-dunkel) !important;
}

.learndash-wrapper .ld-course-status.ld-course-status-not-enrolled .ld-course-status-label {
	color: #000 !important;
}

/* Abstand unter den Karteireitern „Materialien“ */
.et-db .learndash-wrapper .ld-tabs .ld-tabs-navigation {
	margin-bottom: 1.2em;
}

/* --- Lektionen ----------------------------------------------------------- */

/* H4-Überschriften nur innerhalb von LearnDash grün */
.learndash h4 {
	color: var(--gg-gruen) !important;
}

/* Abstand zwischen Lektionsinhalt und Navigations-Buttons */
.learndash-wrapper:not(.ld-registration__outer-wrapper) .ld-content-actions {
	margin-top: 1.2em !important;
}

/* Fokus-Modus (in Nutzung): auf Tablet und Handy untereinander statt nebeneinander */
@media (max-width: 1024px) {
	.ld-focus {
		display: flex !important;
		flex-direction: column !important;
		height: auto !important;
		margin-top: 0 !important;
		padding-top: 0 !important;
	}
}

/* nur eingeloggt: Kurstitel in der Seitenleiste des Fokus-Modus */
.ld-course-title {
	margin-top: 4px;
}

/* nur eingeloggt: Icon „Schließen“ (Divi-Iconfont) */
.ld-icon-delete:before {
	content: "\4d";
	font-family: ETModules;
	font-size: 30px;
	position: absolute;
	top: 0;
	right: 0;
}

/* --- Profilseite (nur eingeloggt) -------------------------------------- */

@media (min-width: 1220px) {
	#ld-profile {
		width: 1100px !important;
	}
}

/* Ab 930px: Profilkarte links, Kursliste rechts */
@media (min-width: 930px) {
	#ld-profile {
		display: flex !important;
	}

	.learndash-wrapper .ld-profile-summary {
		width: 35% !important;
		margin-right: 60px !important;
	}
}

.learndash-wrapper .ld-profile-summary {
	box-shadow: 0 5px 30px #0000001a !important;
	padding: 25px !important;
	border-radius: 7px !important;
	height: max-content;
}

/* Kursliste immer volle Breite des verfügbaren Platzes */
.learndash-wrapper .ld-item-list {
	width: 100% !important;
}

/* Statistik-Kacheln: ab 640px zweispaltig */
@media (min-width: 640px) {
	.learndash-wrapper .ld-profile-summary .ld-profile-stats {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
	}
}

.learndash-wrapper .ld-profile-summary .ld-profile-stats .ld-profile-stat {
	padding: 22px 0;
}

#ld-profile > div.ld-profile-summary > div.ld-profile-stats > div.ld-profile-stat.ld-profile-stat-completed {
	border-right: none !important;
}

#ld-profile > div.ld-profile-summary > div.ld-profile-stats > div.ld-profile-stat.ld-profile-stat-courses,
#ld-profile > div.ld-profile-summary > div.ld-profile-stats > div.ld-profile-stat.ld-profile-stat-completed {
	border-bottom: 1px solid #e2e7ed;
}

@media (max-width: 640px) and (min-width: 438px) {
	#ld-profile > div.ld-profile-summary > div.ld-profile-stats > div.ld-profile-stat.ld-profile-stat-courses,
	#ld-profile > div.ld-profile-summary > div.ld-profile-stats > div.ld-profile-stat.ld-profile-stat-completed {
		border-bottom: none !important;
	}
}

@media (max-width: 479px) {
	#ld-profile > div.ld-profile-summary > div.ld-profile-stats > div.ld-profile-stat.ld-profile-stat-courses {
		padding-bottom: 20px !important;
	}
}

.learndash-wrapper .ld-profile-summary .ld-profile-card .ld-profile-heading {
	font-size: 20px;
	font-weight: 700;
	margin: 15px 0 3px 0;
}

.learndash-wrapper .ld-profile-summary .ld-profile-card .ld-profile-avatar {
	height: 120px;
	width: 120px;
}

/* Suche in der Kursliste */
.learndash-wrapper #ld-profile button.ld-icon-search.ld-icon {
	background: #eee;
	padding: 10px;
	margin-right: 2px;
	border-radius: 100px;
	font-size: 15px;
}

.learndash-wrapper .ld-item-list .ld-item-search .ld-item-search-wrapper {
	background: #eee !important;
	padding: 30px;
}

.learndash-wrapper .ld-item-list .ld-item-search .ld-item-search-wrapper:before {
	right: 133px;
	background: #eee !important;
}

.learndash-wrapper .ld-item-list .ld-item-search .ld-item-search-fields .ld-item-search-name input[type=text] {
	font-size: 13px;
	border-radius: 100px;
	padding: 15px !important;
}

.learndash-wrapper .ld-item-list .ld-item-search .ld-closer {
	font-size: 12px;
	font-weight: 700;
	text-transform: capitalize;
}

.learndash-wrapper .ld-item-list .ld-item-search .ld-closer:before {
	content: "\4d";
	font-family: 'ETMODULES';
	font-weight: 900;
}

.learndash-wrapper .ld-item-list .ld-item-list-item .ld-item-list-item-expanded .ld-item-contents {
	padding: 0 20px;
}


/* ==========================================================================
   8. LEARNDASH: LOGIN-POPUP (nur sichtbar, wenn LearnDash es öffnet)
   ========================================================================== */

.learndash-wrapper .ld-login-modal {
	width: 70% !important;
	box-shadow: 0 25px 100px #00000030;
	top: 90px;
	border-radius: 10px;
}

@media (max-width: 479px) {
	.learndash-wrapper .ld-login-modal {
		width: 90% !important;
	}
}

/* Eingabefelder */
.learndash-wrapper .ld-login-modal .ld-login-field,
.learndash-wrapper .ld-login-modal .ld-password-field,
.learndash-wrapper .ld-login-modal input[type=email],
.learndash-wrapper .ld-login-modal input[type=password],
.learndash-wrapper .ld-login-modal input[type=text] {
	padding: 12px 30px !important;
	border-radius: 6px;
	background: transparent !important;
	border: 2px solid #eee !important;
	font-size: 15px;
	color: #000;
}

.learndash-wrapper .ld-login-modal .ld-login-field:focus,
.learndash-wrapper .ld-login-modal .ld-password-field:focus,
.learndash-wrapper .ld-login-modal input[type=email]:focus,
.learndash-wrapper .ld-login-modal input[type=password]:focus,
.learndash-wrapper .ld-login-modal input[type=text]:focus {
	border: 2px solid #eee;
}

/* Registrierung (dunkler Hintergrund): weiße Schrift */
#ld-user-register .ld-login-field,
#ld-user-register .ld-password-field,
#ld-user-register input[type=email],
#ld-user-register input[type=password],
#ld-user-register input[type=text] {
	color: #fff !important;
}

/* Icons in den Feldern Benutzername/Passwort */
.learndash-wrapper .ld-login-modal .ld-login-modal-form .login-username:before,
.learndash-wrapper .ld-login-modal .ld-login-modal-form .login-password:before {
	top: 45px;
	left: 13px;
	font-weight: bold;
}

.learndash-wrapper .ld-login-modal .ld-login-modal-form label,
.learndash-wrapper .ld-login-modal .ld-login-modal-register label {
	text-align: left;
	font-size: 11px;
	text-transform: uppercase;
}

/* Buttons */
.learndash-wrapper .ld-login-modal input[type=submit] {
	border-radius: 6px;
	text-transform: uppercase;
}

.learndash-wrapper .ld-login-modal input[type=submit]:hover {
	transform: translate(0, -5%);
	box-shadow: 0 6px 17px #0003 !important;
}

.learndash-wrapper .ld-button.ld-button-reverse,
.learndash-wrapper .ld-login-modal .ld-login-modal-register #wp-submit {
	border-radius: 6px;
	text-transform: uppercase;
	transition: .2s ease;
	border: 2px solid #fff !important;
}

.learndash-wrapper.learndash-wrapper-login-modal.ld-modal-open > div > div.ld-login-modal-register > div > div.ld-content > a:hover,
.learndash-wrapper .ld-login-modal .ld-login-modal-register #wp-submit:hover {
	transform: translate(0, -5%) !important;
	box-shadow: none !important;
	border: 2px solid #fff !important;
}

.learndash-wrapper .ld-login-modal .ld-login-modal-form .ld-login-modal-branding img {
	width: 150px;
}

.learndash-wrapper .ld-login-modal .ld-modal-heading {
	font-weight: 600;
}

/* Hinweis- und Fehlermeldungen im Popup */
.ld-login-modal .ld-tertiary-color-hover:hover,
.ld-login-modal .ld-tertiary-color,
.ld-login-modal .ld-alert-warning {
	color: #fff !important;
	box-shadow: 0 0 0 1px #fff;
	background: var(--gg-gruen) !important;
	text-align: left;
}


/* ==========================================================================
   9. TEMPORÄRER FIX: DIVI-ANIMATIONEN AUS
   Ursprünglich für Stabilität in Firefox eingebaut. Schaltet ALLE
   Einblend-Animationen von Divi-Abschnitten, -Zeilen, -Spalten und -Modulen
   ab (inkl. transform). Bei Gelegenheit prüfen, ob noch nötig.
   ========================================================================== */

.et_pb_section,
.et_pb_row,
.et_pb_column,
.et_pb_module {
	animation: none !important;
	opacity: 1 !important;
	transform: none !important;
	visibility: visible !important;
}

/* Gleiches für LearnDash-Profil- und Kurslisten */
.learndash-wrapper .ld-item-list .ld-item-list-item,
.learndash-course-grid .ld_course_grid,
.ld-course-list-items .ld_course_grid {
	animation: none !important;
	opacity: 1 !important;
	transform: none !important;
	visibility: visible !important;
}

/* Kein horizontales Scrollen der Seite */
#page-container {
	overflow: hidden;
}


/* ==========================================================================
   10. FARBEN ÜBER DIVI-4-NUMMERIERUNG (BEI WECHSEL ZU DIVI 5 UMSTELLEN)
   Diese Regeln stammen aus den Molti-Demo-Seiten und hängen an der
   automatischen Nummerierung von Divi 4 (et_pb_blurb_2, et_pb_text_0 …).
   Live passen sie derzeit auf die genannten Seiten und funktionieren unter
   Divi 4 zuverlässig. Achtung: Wird auf diesen Seiten ein Modul eingefügt
   oder gelöscht, verschieben sich die Nummern. In Divi 5 gibt es
   diese Nummern nicht mehr: Die Farben dann direkt im Modul (bzw. als
   globale Farbe) setzen und diesen Abschnitt löschen.
   ========================================================================== */

/* Blurb-Icons grün: Startseite, Über uns, Support, Learning Journeys,
   Growthcode Cycle */
.et_pb_blurb_0 .et-pb-icon,
.et_pb_blurb_1 .et-pb-icon,
.et_pb_blurb_2 .et-pb-icon,
.et_pb_blurb_4 .et-pb-icon,
.et_pb_blurb_5 .et-pb-icon,
.et_pb_blurb_9 .et-pb-icon,
.et_pb_blurb_11 .et-pb-icon,
.et_pb_blurb_12 .et-pb-icon {
	color: var(--gg-gruen) !important;
}

/* Hervorgehobene Wörter in Überschriften grün:
   Startseite (Hero-H1) und Über uns (H3 im ersten Abschnitt) */
div > div > div > div.et_pb_section.et_pb_section_0.et_pb_with_background.et_section_regular > div.et_pb_row.et_pb_row_0 > div > div.et_pb_module.et_pb_text.et_pb_text_0.et_pb_text_align_left.et_pb_bg_layout_light > div > h1 > span,
div > div > div > div.et_pb_section.et_pb_section_0.et_pb_with_background.et_section_regular > div.et_pb_row.et_pb_row_0.inline-buttons-row > div.et_pb_column.et_pb_column_1_2.et_pb_column_0.et_pb_css_mix_blend_mode_passthrough > div.et_pb_module.et_pb_text.et_pb_text_0.et_pb_text_align_left.et_pb_bg_layout_light > div > h1 > span,
div > div > div > div.et_pb_section.et_pb_section_1.et_section_regular > div.et_pb_row.et_pb_row_1.et_pb_equal_columns > div.et_pb_column.et_pb_column_1_2.et_pb_column_3.et_pb_css_mix_blend_mode_passthrough.et-last-child > div > div > h3 > span {
	color: var(--gg-gruen) !important;
}

/* Hervorgehobene Wörter in H5-Überschriften seitenweit grün
   (live z. B. in der Lektion „Lies dir folgende Aussagen durch …“) */
h5 > span {
	color: var(--gg-gruen) !important;
}

/* Events: Beitragstitel im Blog-Modul bei Hover grün */
.et_pb_blog_0 .et_pb_post:hover .entry-title a {
	color: var(--gg-gruen) !important;
}


/* ==========================================================================
   11. ANIMATIONEN (KEYFRAMES)
   ========================================================================== */

/* Einblenden von unten (Dropdown, FAQ-Tabs, Kursfilter) */
@keyframes fade-in-bottom {
	0%   { transform: translateY(20px); opacity: 0; }
	100% { transform: translateY(0);    opacity: 1; }
}

/* Ausblenden nach unten (Dropdown) */
@keyframes fade-out-bottom {
	0%   { transform: translateY(0);    opacity: 1; }
	100% { transform: translateY(20px); opacity: 0; }
}


/* ==========================================================================
   12. DEAKTIVIERT: REGELN, DIE NIE GEWIRKT HABEN
   Standen im Divi-Feld „Benutzerdefiniertes CSS“, waren aber durch eine
   nicht geschlossene Klammer (fehlender Wert bei padding-bottom) außer
   Kraft. Bewusst als Kommentar aufgehoben: Wer sie aktiviert, verändert
   das Aussehen der Seite. Erst testen, dann den Kommentar entfernen.

   Mehr Abstand nach der Zwischensumme im Warenkorb (Handy) – Wert fehlte:
   @media (max-width: 600px) {
       .cart_totals tr.cart-subtotal td { padding-bottom: 20px; }
   }

   Weniger Abstand zwischen einem Absatz und der direkt folgenden Liste:
   p:not(.has-background):has(+ ul) {
       padding-bottom: 0;
       margin-bottom: 0.3em;
   }
   ========================================================================== */