:root {
    --dpi-lime:         #CBE836;
    --dpi-blau:         #054CF9;
    --dpi-dark-blau:    #0A1855;
    --dpi-orange:       #FB6502;
    --dpi-schwarz:      #121212;
    --dpi-weiss:        #EEEEED;
}

/* Button */
div.elementor-widget-button .elementor-button .elementor-button-icon i::before {
	font-size: 0.7em;
    font-weight: 700;
    display: block;
}

/* Header */
body .dpi-header .dpi-header-logo {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

body .dpi-header.dpi-header-page .dpi-header-logo {
	opacity: 1;
}

body.dpi-scrolled .dpi-header {
    background-color: var( --e-global-color-83cd356 );
}

body.dpi-scrolled .dpi-header.dpi-header-page {
    background-color: #FFF;
	box-shadow: 0 4px 29px 5px #000;
}

body.dpi-scrolled .dpi-header .dpi-header-logo {
    opacity: 1;
}

/* Header - Menu
   `a` keeps the same display/position/gap regardless of hover — changing layout-affecting
   properties only inside :hover risks a flicker loop if the cursor sits right at the edge of
   the box that would shift size. Only opacity/visual properties toggle on hover instead. */
.dpi-header-menu li.menu-item a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dpi-header-menu li.menu-item:hover a {
    font-weight: 700 !important;
    text-decoration: underline;
}

.dpi-header-menu li.menu-item a::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -40px;
    transform: translateY( -50% );
    display: inline-block;
    width: 29px;
    height: 22px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    background-color: transparent !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg width='29' height='22' viewBox='0 0 29 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.8633 21.8836C18.1039 20.8279 18.4619 19.7112 18.9371 18.5336C19.4124 17.356 20.0327 16.2505 20.798 15.2172C21.5634 14.1839 22.4852 13.3781 23.5633 12.8V12.6L0 13.0336V8.83359L23.5633 9.26641V9.06641C22.4299 8.32214 21.4779 7.44727 20.707 6.4418C19.9362 5.43633 19.3186 4.37253 18.8543 3.25039C18.39 2.12826 18.0154 1.04479 17.7305 0H22.4305C22.6492 1.28906 22.9962 2.52813 23.4715 3.71719C23.9467 4.90625 24.5613 5.99818 25.3152 6.99297C26.0691 7.98776 26.974 8.84688 28.0297 9.57031V12.2805C26.4964 13.3711 25.2672 14.7082 24.3422 16.2918C23.4172 17.8754 22.7799 19.7393 22.4305 21.8836H17.8633Z' fill='%230A1855'/%3E%3C/svg%3E");
}

.dpi-header-menu li.menu-item:hover a::after {
    opacity: 1 !important; 
}

/* Header - Menu: bookmark item — icon always shown to the left, not just on hover */
li.dpi-menu--bookmark {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    width: 100%;
}

li.dpi-menu--bookmark::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 21px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='21' viewBox='0 0 16 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 21V2.33331C0 1.69165 0.223806 1.14237 0.671425 0.685425C1.11904 0.22848 1.65714 0 2.28571 0H13.7143C14.3429 0 14.881 0.22848 15.3286 0.685425C15.7762 1.14237 16 1.69165 16 2.33331V21L8 17.5L0 21ZM2.28571 17.4417L8 14.9333L13.7143 17.4417V2.33331H2.28571V17.4417Z' fill='%230A1855'/%3E%3C/svg%3E");
}

.elementor-heading-title .stat-label {
    display: block;
    margin-top: -0.6em;
}

div.elementor-element.elementor-widget.elementor-widget-heading
.elementor-heading-title b {
    font-weight: 700;
}

/* =========================================================
   HERO
   ========================================================= */

/* Default hero
   !important on content/position/background: .dpi-hero-slide is now rendered as an Elementor
   Container (e-con) — its own generated per-element CSS otherwise wins this pseudo-element
   (same reason other rules in this file already need !important against Elementor's CSS). */
.dpi-hero-slide::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;

    background: linear-gradient(
        to right,
        rgb(0 0 0 / 85%) 0%,
        rgba(0, 0, 0, 0.5) 25%,
        transparent 50%,
        rgba(0, 0, 0, 0.5) 75%,
        rgb(0 0 0 / 85%) 100%
    ) !important;
}


/* =========================================================
   HERO COLOR VARIANTS
   ========================================================= */

/* BLAU */
.dpi-hero-slide--blau .dpi-hero-content::before,
.dpi-hero-slide--blau .dpi-hero-content::after {
    border-color: var(--dpi-blau) !important;
}

.dpi-hero-slide--blau .dpi-hero-content--inner::before,
.dpi-hero-slide--blau .dpi-hero-content--inner::after {
    border-color: var(--dpi-blau) !important;
}

.dpi-hero-slide--blau div.elementor-element.elementor-widget.elementor-widget-heading
.elementor-heading-title {
	color: var(--dpi-blau) !important;
}

.dpi-hero-slide--blau .dpi-hero-button div.elementor-widget-button a.elementor-button {
	background-color: var(--dpi-blau) !important;
	color: var(--dpi-weiss) !important;
}


/* LIME */
.dpi-hero-slide--lime .dpi-hero-content::before,
.dpi-hero-slide--lime .dpi-hero-content::after {
    border-color: var(--dpi-lime) !important;
}

.dpi-hero-slide--lime .dpi-hero-content--inner::before,
.dpi-hero-slide--lime .dpi-hero-content--inner::after {
    border-color: var(--dpi-lime) !important;
}

.dpi-hero-slide--lime div.elementor-element.elementor-widget.elementor-widget-heading
.elementor-heading-title {
	color: var(--dpi-lime) !important;
}

.dpi-hero-slide--lime .dpi-hero-button div.elementor-widget-button a.elementor-button {
	background-color: var(--dpi-lime) !important;
}


/* =========================================================
   HERO CORNERS
   ========================================================= */

/* !important throughout: .dpi-hero-content is also an Elementor Container (e-con) — see the
   note above .dpi-hero-slide::before for why that requires it here too. */
.dpi-hero-content::before {
    content: '' !important;
    position: absolute !important;
    top: -87px !important;
    left: -100px !important;
    width: 230px !important;
    height: 270px !important;

    border-top: 40px !important;
    border-left: 40px !important;
    border-bottom: 0 !important;
    border-right: 0 !important;
    border-style: solid !important;

    pointer-events: none !important;
    z-index: 5 !important;
}

.dpi-hero-content::after {
    content: '' !important;
    position: absolute !important;
    bottom: -87px !important;
    right: -100px !important;
    width: 230px !important;
    height: 270px !important;

    border-top: 0 !important;
    border-left: 0 !important;
    border-bottom: 40px !important;
    border-right: 40px !important;
    border-style: solid !important;

    pointer-events: none !important;
    z-index: 5 !important;
}


/* =========================================================
   HERO BUTTON
   ========================================================= */

.dpi-hero-button div.elementor-widget-button a.elementor-button {
    min-width: 372px;
}

.dpi-hero-button div.elementor-widget-button a.elementor-button b,
.dpi-hero-button div.elementor-widget-button a.elementor-button strong {
    font-weight: 700;
}

.dpi-hero-button div.elementor-widget-button a.elementor-button
span.elementor-button-content-wrapper {
    justify-content: space-between;
}

.dpi-hero-button div.elementor-widget-button a.elementor-button
.elementor-button-icon svg {
    width: 0.6em;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 1024px) {
	.dpi-hero-content::before {
		content: '' !important;
		position: absolute !important;
		top: -50px !important;
        left: -50px !important;
        width: 150px !important;
        height: 180px !important;

        border-top: 20px !important;
        border-left: 20px !important;
		border-bottom: 0 !important;
		border-right: 0 !important;
		border-style: solid !important;

		pointer-events: none !important;
		z-index: 5 !important;
	}

	.dpi-hero-content::after {
		content: '' !important;
		position: absolute !important;
		bottom: -50px !important;
		right: -50px !important;
		width: 150px !important;
		height: 180px !important;

		border-top: 0 !important;
		border-left: 0 !important;
		border-bottom: 20px !important;
		border-right: 20px !important;
		border-style: solid !important;

		pointer-events: none !important;
		z-index: 5 !important;
	}
}

@media (max-width: 767px) {

    .dpi-hero-slide::before {
        background: linear-gradient(
            155deg,
            rgb(0 0 0 / 80%) 0%,
            rgba(0, 0, 0, 0.5) 10%,
            transparent 20%,
            rgba(0, 0, 0, 0.5) 65%,
            rgb(0 0 0 / 85%) 100%
        ) !important;
    }

    .dpi-hero-button div.elementor-widget-button,
    .dpi-hero-button div.elementor-widget-button a.elementor-button {
        min-width: unset;
        width: 100%;
    }

    .dpi-hero-content::before,
    .dpi-hero-content::after {
        display: none !important;
    }


    /* Mobile corners */
    .dpi-hero-content--inner::before {
        content: '' !important;
        position: absolute !important;
        top: -30px !important;
        left: -5px !important;
        width: 70px !important;
        height: 70px !important;

        border-top: 10px !important;
        border-left: 10px !important;
        border-bottom: 0 !important;
        border-right: 0 !important;
        border-style: solid !important;

        pointer-events: none !important;
        z-index: 5 !important;
    }

    .dpi-hero-content--inner::after {
        content: '' !important;
        position: absolute !important;
        bottom: -30px !important;
        right: -5px !important;
        width: 70px !important;
        height: 70px !important;

        border-top: 0 !important;
        border-left: 0 !important;
        border-bottom: 10px !important;
        border-right: 10px !important;
        border-style: solid !important;

        pointer-events: none !important;
        z-index: 5 !important;
    }


    /* Mobile color variants */
    .dpi-hero-slide--blau .dpi-hero-content--inner::before,
    .dpi-hero-slide--blau .dpi-hero-content--inner::after {
        border-color: var(--dpi-blau);
    }

    .dpi-hero-slide--lime .dpi-hero-content--inner::before,
    .dpi-hero-slide--lime .dpi-hero-content--inner::after {
        border-color: var(--dpi-lime);
    }

}


/* =========================================================
   DPI CORNER
   Reusable top-left / bottom-right bracket, same idea as dasformat but simpler — just add
   .dpi-corner (+ a color modifier) to any element. !important throughout for the same reason
   the hero corners above needed it: on an Elementor Container (e-con), Elementor's own
   generated CSS otherwise wins ::before/::after.
   ========================================================= */

.dpi-corner {
    --dpi-corner-breite:  48px;
    --dpi-corner-hoehe:   48px;
    --dpi-corner-staerke: 8px;
    --dpi-corner-x:       -22px;
    --dpi-corner-y:       -18px;

    position: relative !important;
}

.dpi-corner::before,
.dpi-corner::after {
    content: '' !important;
    position: absolute !important;
    display: block !important;

    width: var(--dpi-corner-breite) !important;
    height: var(--dpi-corner-hoehe) !important;

    border-style: solid !important;
    border-color: var(--dpi-corner-farbe, var(--dpi-blau)) !important;

    pointer-events: none !important;
    z-index: 5 !important;
}

/* Oben links */
.dpi-corner::before {
    top: var(--dpi-corner-y) !important;
    left: var(--dpi-corner-x) !important;
    border-width: var(--dpi-corner-staerke) 0 0 var(--dpi-corner-staerke) !important;
}

/* Unten rechts */
.dpi-corner::after {
    bottom: var(--dpi-corner-y) !important;
    right: var(--dpi-corner-x) !important;
    border-width: 0 var(--dpi-corner-staerke) var(--dpi-corner-staerke) 0 !important;
}


/* --- Farben (aus :root oben) -------------------------------------------- */

.dpi-corner--blau    { --dpi-corner-farbe: var(--dpi-blau); }
.dpi-corner--orange  { --dpi-corner-farbe: var(--dpi-orange); }
.dpi-corner--lime    { --dpi-corner-farbe: var(--dpi-lime); }
.dpi-corner--weiss   { --dpi-corner-farbe: var(--dpi-weiss); }
.dpi-corner--schwarz { --dpi-corner-farbe: var(--dpi-schwarz); }
.dpi-corner--dark-blau { --dpi-corner-farbe: var(--dpi-dark-blau); }


@media (max-width: 767px) {
    .dpi-corner {
        --dpi-corner-breite:  37px;
        --dpi-corner-hoehe:   37px;
        --dpi-corner-staerke: 6px;
        --dpi-corner-x:       -17.5px;
        --dpi-corner-y:       -13.5px;
    }
}


/* --- Footer: own fixed size, same at every width (no mobile shrink) ----- */

.dpi-corner--footer {
    --dpi-corner-breite:  44px;
    --dpi-corner-hoehe:   34px;
    --dpi-corner-staerke: 8px;
    --dpi-corner-x:       -23px;
    --dpi-corner-y:       -16px;
}


/* =========================================================
   ENTDECKE MEHR (discover-more)
   Boxes are laid out with `display: grid` (Elementor container setting) —
   keep this in sync if that layout setting ever changes.
   ========================================================= */

/* Alternate boxes (Nur für Erwachsene / Dein Bereich): hidden unless JS
   activates them as a replacement for a default box (see script.js). */
#discover-more .discover-box-replacement {
    display: none !important;
}

#discover-more .discover-box-replacement.js-show {
    display: flex !important;
}

/* Default box being replaced. */
#discover-more .discover-box.js-hide {
    display: none !important;
}

/* Elementor editor: always show all 5 boxes regardless of swap state, so
   every teaser stays reachable for editing (script.js skips the hide/swap
   logic and only adds .js-show to alternates in this mode). */
body.elementor-editor-active #discover-more .discover-box-replacement,
body.elementor-editor-active #discover-more .discover-box.js-hide {
    display: flex !important;
}

/* =========================================================
   ELEMENTOR FORM
   ========================================================= */

div.dpi-form .elementor-form-fields-wrapper {
    flex-direction: column;
}

div.dpi-form input[type=date], 
div.dpi-form input[type=email], 
div.dpi-form input[type=number], 
div.dpi-form input[type=password], 
div.dpi-form input[type=search], 
div.dpi-form input[type=tel], 
div.dpi-form input[type=text], 
div.dpi-form input[type=time], 
div.dpi-form input[type=url], 
div.dpi-form select, 
div.dpi-form textarea {
    padding: 0.5em 1em 0.5em 0;
}