/**
Theme Name: die Kennste
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: die-kennste
Template: astra
*/

/* =============================================================================
   Elementor Loop — Background Image Zoom-on-Hover
   Usage: add CSS class "expo_hover_effect" to any Elementor container.
   The background image zooms in 10% inside the container on hover.
   ============================================================================= */

/*
 * The container itself clips the zoom — overflow hidden keeps the scaled
 * image from bleeding outside the box.
 */
.expo_hover_effect {
    overflow: hidden !important;
    position: relative;
	/* Keep the pseudo-element and content in a local stacking context. */
    isolation: isolate;
}

.expo_hover_effect::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: inherit;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
	z-index: 0;
    transition: transform 0.5s ease;
    will-change: transform;
}

/* Keep content and Elementor overlays above the zoomed image layer. */
.expo_hover_effect > * {
	position: relative;
	z-index: 1;
}

/* Elementor loop often duplicates the same background on the first inner container. */
.expo_hover_effect > .e-con:first-child {
	background-image: none !important;
}

.expo_hover_effect:hover::before,
.expo_hover_effect.is-tap-active::before {
    transform: scale(1.1);
}

/* Heading starts lower; body text stays hidden until hover/focus. */
.expo_hover_effect .elementor-widget-heading {
	--expo-text-reveal-height: 64px;
	opacity: 1;
	transform: translate3d(0, calc(var(--expo-text-reveal-height) - 12px), 0);
	transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}

.expo_text_effect {
	opacity: 0;
	transform: translateY(28px);
	max-height: 64px;
	overflow: hidden;
	transition: opacity 0.35s ease, transform 0.45s ease, max-height 0.45s ease;
}

.expo_hover_effect:hover .elementor-widget-heading,
.expo_hover_effect:focus-within .elementor-widget-heading,
.expo_hover_effect.is-tap-active .elementor-widget-heading {
	transform: translate3d(0, 0, 0);
}

.expo_hover_effect:hover .expo_text_effect,
.expo_hover_effect:focus-within .expo_text_effect,
.expo_hover_effect.is-tap-active .expo_text_effect {
	opacity: 1;
	transform: translateY(0);
	max-height: var(--expo-text-reveal-height);
}

/* Touch devices: js/hover-effect-tap.js toggles .is-tap-active on tap
   instead of relying on :hover, since the box height above never
   changes between states - no layout shift on tablet/phone. */


/* --- Trigger button --- */
	.expoxr-video-trigger {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: transparent;
		border: none;
		padding: 0;
		cursor: pointer;
	}

	/* Cover mode: sits over the entire card */
	.expoxr-video-trigger--cover {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		z-index: 10;
	}

	/* Play icon — pure CSS circle + triangle, no icon font needed */
	.expoxr-play-icon {
		width: calc(300px + 5vw);
		height: 500px;
		background: rgba(255, 255, 255, 0.02);
		display: flex;
		align-items: center;
		justify-content: center;
		transition: transform 0.25s ease, background 0.25s ease;
		flex-shrink: 0;
	}

	/* Triangle drawn with border trick */
	.expoxr-play-icon:hover:after {
		content: '';
		display: block;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 24px 0 24px 40px;
		border-color: transparent transparent transparent var(--ast-global-color-0);
		margin-left: 4px; /* optical centering */
	}

	.expoxr-video-trigger:hover .expoxr-play-icon,
	.expoxr-video-trigger:focus-visible .expoxr-play-icon {
		transform: scale(1.12);
		background: rgba(255, 255, 255, 0.5);
	}

	/* --- Lightbox overlay --- */
	#expoxr-lightbox {
		position: fixed;
		inset: 0;
		z-index: 99999;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	#expoxr-lightbox[hidden] {
		display: none;
	}

	.expoxr-lb-backdrop {
		position: absolute;
		inset: 0;
		background: rgba(0, 0, 0, 0.6);
		cursor: pointer;
	}

	/* Full-screen wrap — video fills the viewport, letterboxed on wide screens */
	.expoxr-lb-wrap {
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1;
		pointer-events: none; /* backdrop click still works through this layer */
	}

	.expoxr-lb-close {
		position: fixed;
		top: 16px;
		right: 20px;
		background: rgba(0, 0, 0, 0.5);
		border: none;
		border-radius: 50%;
		color: #ffffff;
		font-size: 22px;
		line-height: 1;
		width: 44px;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		pointer-events: all;
		transition: background 0.2s ease, transform 0.2s ease;
		z-index: 2;
	}

	.expoxr-lb-close:hover {
		background: rgba(255, 255, 255, 0.15);
		transform: scale(1.1);
	}

	/* Video fills the screen width, capped at 16:9 height */
	.expoxr-lb-video-wrap {
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.8);
		overflow: hidden;
		pointer-events: all;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.expoxr-lb-video-wrap iframe {
		/* Fills the full viewport while keeping 16:9.
		   The larger dimension drives the size so the video always fills edge-to-edge
		   on the dominant axis and is letterboxed on the other. */
		width: 80vw;
		height: 45vw; /* 16:9 at 80vw */
		min-height: 45vw;
		min-width: 80vw;
		border: none;
	}


    /* --- End of custom styles --- */

    /* --- Blur Effect --- */
    .expoxr_blur {
        
        transition: filter 0.3s ease;
        backdrop-filter: blur(10px);
    }

/* =============================================================================
   Scroll-Effect — Desktop only
   Desktop rule scoped inside min-width:1025px, matching
   js/scroll-effect-stop.js's DESKTOP_MIN_WIDTH (1024) + 1 — that JS treats
   >1024 as desktop.

   Tablet/smartphone (≤1024px) get an EXPLICIT full reset of every property
   this file sets on desktop. This isn't redundant: Elementor's own
   per-widget "Position" control cascades from the desktop tab down to
   tablet/mobile unless explicitly overridden per breakpoint in the
   Elementor editor — if this element's Position was only ever set to
   Fixed on the desktop tab, Elementor's OWN generated CSS keeps applying
   `position:fixed` (and whatever top/right/width go with it) at every
   width unless something here forces it back to plain document flow.
   Just removing our own desktop-only rule is NOT enough to guarantee
   "Elementor's default" renders on tablet/mobile — this reset is what
   actually guarantees it, regardless of what's configured (or not
   configured) in Elementor's per-breakpoint Position control.

   !important is required to override Elementor's generated CSS.
   ============================================================================= */

@media (min-width: 1025px) {
    #scroll_effect {
        position: fixed !important;
        right: 5%;
        top: 60%;
        transform: translateY(-50%);
        width: 25%;
        transition: top 0.2s ease, transform 0.2s ease;
    }
}

@media (max-width: 1024px) {
    #scroll_effect {
        position: static !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: auto !important;
    }
}

/* =============================================================================
   Termin Scroll — floating CTA
   Shown with a fade-in-from-bottom animation once .expo_hero has left
   the viewport. Hidden again when .expo_hero scrolls back into view.
   display:none / display:block is toggled by JS; the CSS handles the
   smooth transition between the two visible states.
   ============================================================================= */
#termin_scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
}

#termin_scroll.termin-scroll--visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto;
}

/* =============================================================================
   Job bullet icons — fallback styling
   js/job-bullet-icons.js injects Elementor's check-circle icon-list markup
   into .expo_job_text content. Elementor only ships the icon-list widget's
   own CSS on pages that actually place that widget, so this is a safety net
   ensuring the injected icon always renders at a sane size/spacing even if
   that CSS isn't loaded.
   ============================================================================= */
.expo_job_text .elementor-icon-list-icon {
	display: inline-flex !important;
	align-items: center;
	margin-right: 8px;
}

.expo_job_text .elementor-icon-list-icon svg {
	padding: 2px 0;
	width: 1em;
	height: 0.6em;
	fill: var(--e-global-color-primary);
}

.expo_job_text p span{
	padding: 4px;
}

@media (max-width: 767px) {
	.elementor-widget-n-menu .e-n-menu-heading {
	background-color: #fff !important;
}
}

/**
 * Policy page heading styles
 */


.policy-style h2 {
	font-size: 20px !important;
	padding: 10px 0 !important;
}

.policy-style h3 {
	font-size: 18px !important;
	padding: 10px 0 !important;
}

.policy-style h4, .policy-style h5, .policy-style h6 {
	font-size: 16px !important;
	padding: 8px 0 !important;
}