/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* === Mitlaufende (sticky) Spalte =========================================
   Anwendung: der Spalte (bzw. dem Container) mit dem Bild unter
   Erweitert > CSS-Klassen die Klasse  sticky-spalte  geben.
   Der Abstand zum oberen Rand wird über --sticky-top gesteuert.
   ========================================================================= */

:root {
	--sticky-top: 100px; /* Höhe eines fixierten Headers + Wunschabstand */
	--sticky-bottom-gap: 10vh; /* Puffer: Element löst sich hier vor dem tatsächlichen Ende (10% = frueher loslassen) */
}

@media (min-width: 1025px) {

	/* Klassische Sections / Spalten */
	.elementor-column.sticky-spalte {
		align-self: flex-start;
		position: -webkit-sticky;
		position: sticky;
		top: var(--sticky-top);
		margin-bottom: var(--sticky-bottom-gap);
	}

	/* Flexbox-Container (Elementor Container-Layout) */
	.e-con.sticky-spalte,
	.e-child.sticky-spalte {
		align-self: flex-start;
		position: -webkit-sticky;
		position: sticky;
		top: var(--sticky-top);
	}

	/* Variante fuer hohe Inhalte: klebt an der Unterkante des Viewports,
	   damit auch bei zwei langen Textfeldern nichts abgeschnitten wird.
	   Klasse:  sticky-spalte sticky-hoch  */
	.sticky-spalte.sticky-hoch {
		top: auto;
		bottom: 20px;
	}

	/* Nur einzelne Widgets innerhalb einer normalen Spalte kleben lassen.
	   Klasse  sticky-block  an eine innere Section (Inner Section) geben. */
	.elementor-widget-wrap > .elementor-element.sticky-block {
		position: -webkit-sticky;
		position: sticky;
		top: var(--sticky-top);
	}

	/* Sticky funktioniert nicht, wenn ein Elternelement overflow versteckt.
	   Section/Container mit der Klasse sticky-parent absichern. */
	.sticky-parent,
	.sticky-parent > .elementor-container,
	.sticky-parent > .e-con-inner {
		overflow: visible;
	}
}