.elementor-2220 .elementor-element.elementor-element-e7402c0{--display:flex;--min-height:100vh;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--overlay-opacity:0.5;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2220 .elementor-element.elementor-element-e7402c0:not(.elementor-motion-effects-element-type-background), .elementor-2220 .elementor-element.elementor-element-e7402c0 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://dh.wshdev.de/wp-content/uploads/2026/10/rosengart-205.webp");background-position:center center;background-size:cover;}.elementor-2220 .elementor-element.elementor-element-e7402c0::before, .elementor-2220 .elementor-element.elementor-element-e7402c0 > .elementor-background-video-container::before, .elementor-2220 .elementor-element.elementor-element-e7402c0 > .e-con-inner > .elementor-background-video-container::before, .elementor-2220 .elementor-element.elementor-element-e7402c0 > .elementor-background-slideshow::before, .elementor-2220 .elementor-element.elementor-element-e7402c0 > .e-con-inner > .elementor-background-slideshow::before, .elementor-2220 .elementor-element.elementor-element-e7402c0 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#000000;--background-overlay:'';}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );text-transform:var( --e-global-typography-primary-text-transform );color:var( --e-global-color-primary );}.elementor-2220 .elementor-element.elementor-element-27eed74e{text-align:center;}.elementor-2220 .elementor-element.elementor-element-27eed74e .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );text-transform:var( --e-global-typography-primary-text-transform );color:var( --e-global-color-secondary );}.elementor-2220 .elementor-element.elementor-element-4700c491{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:center;--padding-top:70px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-2220 .elementor-element.elementor-element-589c888 .elementor-heading-title{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );text-transform:var( --e-global-typography-secondary-text-transform );color:var( --e-global-color-text );}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}@media(max-width:1024px){.elementor-2220 .elementor-element.elementor-element-e7402c0{--min-height:50vh;--padding-top:40px;--padding-bottom:40px;--padding-left:40px;--padding-right:40px;}.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );}.elementor-2220 .elementor-element.elementor-element-27eed74e .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );}.elementor-2220 .elementor-element.elementor-element-4700c491{--padding-top:40px;--padding-bottom:40px;--padding-left:40px;--padding-right:40px;}.elementor-2220 .elementor-element.elementor-element-589c888 .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}}@media(max-width:767px){.elementor-2220 .elementor-element.elementor-element-e7402c0{--min-height:40vh;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );}.elementor-2220 .elementor-element.elementor-element-27eed74e .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );}.elementor-2220 .elementor-element.elementor-element-4700c491{--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-2220 .elementor-element.elementor-element-589c888 .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}}/* Start custom CSS for heading, class: .elementor-element-7c4e0c96 */.elementor-2220 .elementor-element.elementor-element-7c4e0c96{
    display: none;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e7402c0 *//* Elementor-Inhalt über Overlay */

.elementor-2220 .elementor-element.elementor-element-e7402c0 > .elementor-element {
    position: relative;

    z-index: 10;
}


/* Plus noch darüber */

.elementor-2220 .elementor-element.elementor-element-e7402c0 .diana-plus-button {
    z-index: 30 !important;
}


/* Scroll ebenfalls sicher sichtbar */

.elementor-2220 .elementor-element.elementor-element-e7402c0 .scroll-indicator {
    z-index: 25 !important;
}
/* ==========================================================
   HOTEL DIANA – IMAGE TEASER
   Nesslerhof Style
   ========================================================== */

.elementor-2220 .elementor-element.elementor-element-e7402c0 {
    --diana-panel-width: min(38vw, 720px);
    --diana-duration: .65s;
    --diana-ease: cubic-bezier(.65, 0, .35, 1);

    position: relative;

    width: 100%;
    min-height: 100vh;

    overflow: hidden;

    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;

    isolation: isolate;
}


/* ==========================================================
   FULLSCREEN OPEN STATE
   ========================================================== */

.elementor-2220 .elementor-element.elementor-element-e7402c0.diana-open {
    position: fixed !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    z-index: 2147483000 !important;

    background-image: none !important;

    cursor: none !important;
}

/* ==========================================================
   CURSOR IM SLIDEPANEL
   ========================================================== */

/* Im Panel normalen Cursor wiederherstellen */
.elementor-2220 .elementor-element.elementor-element-e7402c0.diana-open .diana-teaser-panel {
    cursor: default !important;
}

/* Text / normale Elemente */
.elementor-2220 .elementor-element.elementor-element-e7402c0.diana-open .diana-teaser-panel p,
.elementor-2220 .elementor-element.elementor-element-e7402c0.diana-open .diana-teaser-panel h1,
.elementor-2220 .elementor-element.elementor-element-e7402c0.diana-open .diana-teaser-panel h2,
.elementor-2220 .elementor-element.elementor-element-e7402c0.diana-open .diana-teaser-panel h3,
.elementor-2220 .elementor-element.elementor-element-e7402c0.diana-open .diana-teaser-panel h4,
.elementor-2220 .elementor-element.elementor-element-e7402c0.diana-open .diana-teaser-panel span,
.elementor-2220 .elementor-element.elementor-element-e7402c0.diana-open .diana-teaser-panel div {
    cursor: default;
}

/* ALLE klickbaren Elemente bekommen Hand-Cursor */
.elementor-2220 .elementor-element.elementor-element-e7402c0.diana-open .diana-teaser-panel a,
.elementor-2220 .elementor-element.elementor-element-e7402c0.diana-open .diana-teaser-panel button,
.elementor-2220 .elementor-element.elementor-element-e7402c0.diana-open .diana-teaser-panel [role="button"],
.elementor-2220 .elementor-element.elementor-element-e7402c0.diana-open .diana-teaser-panel .elementor-button,
.elementor-2220 .elementor-element.elementor-element-e7402c0.diana-open .diana-teaser-panel .diana-panel-close {
    cursor: pointer !important;
}
/* ==========================================================
   IMAGE STAGE
   ========================================================== */

.elementor-2220 .elementor-element.elementor-element-e7402c0 .diana-image-stage {
    position: absolute;

    inset: 0;

    z-index: 1;

    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;

    pointer-events: none;

    transform: translateX(0) scale(1);

    transform-origin: center center;

    transition:
        right var(--diana-duration) var(--diana-ease),
        transform var(--diana-duration) var(--diana-ease);
}


/* leichte Abdunklung */

.elementor-2220 .elementor-element.elementor-element-e7402c0 .diana-image-stage::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(18,26,29,.28) 0%,
            rgba(18,26,29,.18) 45%,
            rgba(18,26,29,.30) 100%
        );

    pointer-events: none;

    transition:
        background var(--diana-duration) ease;
}

/* ==========================================================
   BILD BEIM ÖFFNEN

   WICHTIG:
   kein calc(100vw - Panel) mehr.

   Das Bild bekommt exakt denselben rechten Abstand,
   den das Panel breit ist.

   Dadurch KEIN Spalt mehr.
   ========================================================== */

.elementor-2220 .elementor-element.elementor-element-e7402c0.diana-open .diana-image-stage {
    right: var(--diana-panel-width);

    transform:
        translateX(-2.5%)
        scale(1.055);
}


.elementor-2220 .elementor-element.elementor-element-e7402c0.diana-open .diana-image-stage::after {
    background: rgba(20,20,18,.14);
}


/* ==========================================================
   PLUS BUTTON
   ========================================================== */

.elementor-2220 .elementor-element.elementor-element-e7402c0 .diana-plus-button {
    position: absolute !important;

    top: 50%;
    left: 50%;

    width: 70px !important;
    height: 70px !important;

    min-width: 70px !important;
    min-height: 70px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    transform:
        translate(-50%, -50%)
        scale(1);

    border: 1px solid rgba(255,255,255,.92);
    border-radius: 50%;

    background: rgba(35,35,30,.30);

    color: #fff;

    z-index: 30;

    cursor: pointer;

    transition:
        transform .35s ease,
        opacity .25s ease,
        background .35s ease;
}


.elementor-2220 .elementor-element.elementor-element-e7402c0 .diana-plus-button:hover {
    transform:
        translate(-50%, -50%)
        scale(1.12);

    background: rgba(35,35,30,.46);
}


/* Elementor Icon */

.elementor-2220 .elementor-element.elementor-element-e7402c0 .diana-plus-button .elementor-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff !important;

    font-size: 25px;
}


/* geöffnet */

.elementor-2220 .elementor-element.elementor-element-e7402c0.diana-open .diana-plus-button {
    opacity: 0 !important;

    pointer-events: none !important;

    transform:
        translate(-50%, -50%)
        scale(.7);
}


/* ==========================================================
   SLIDE PANEL
   ========================================================== */

.elementor-2220 .elementor-element.elementor-element-e7402c0 .diana-teaser-panel {
    position: absolute !important;

    top: 0;
    right: 0;
    bottom: 0;

    width: var(--diana-panel-width) !important;
    max-width: none !important;

    height: 100dvh !important;
    min-height: 100dvh !important;

    margin: 0 !important;

    padding:
        clamp(105px, 8vw, 150px)
        clamp(42px, 4vw, 80px)
        70px !important;

    background: #fff !important;

    overflow-x: hidden;
    overflow-y: auto;

    overscroll-behavior: contain;

    z-index: 100;

    visibility: hidden;

    transform: translateX(100%);

    transition:
        transform var(--diana-duration) var(--diana-ease),
        visibility 0s linear var(--diana-duration);
}


/* geöffnet */

.elementor-2220 .elementor-element.elementor-element-e7402c0.diana-open .diana-teaser-panel {
    visibility: visible;

    transform: translateX(0);

    transition:
        transform var(--diana-duration) var(--diana-ease),
        visibility 0s;
}


/* ==========================================================
   PANEL CONTENT
   ========================================================== */

.elementor-2220 .elementor-element.elementor-element-e7402c0 .diana-teaser-panel > *:not(.diana-panel-close) {
    opacity: 0;

    transform: translateY(20px);

    transition:
        opacity .45s ease,
        transform .55s var(--diana-ease);
}


.elementor-2220 .elementor-element.elementor-element-e7402c0.diana-open
.diana-teaser-panel > *:not(.diana-panel-close) {
    opacity: 1;

    transform: translateY(0);

    transition-delay: .28s;
}


/* ==========================================================
   X BUTTON IM PANEL
   ========================================================== */

.elementor-2220 .elementor-element.elementor-element-e7402c0 .diana-panel-close {
    position: absolute !important;

    top: 22px;
    right: 22px;

    width: 42px;
    height: 42px;

    margin: 0;
    padding: 0;

    border: 1px solid #c6a45f;
    border-radius: 50%;

    background: #fff;

    cursor: pointer !important;

    z-index: 500;

    opacity: 1 !important;

    transform: none;

    transition:
        transform .4s cubic-bezier(.25,1,.5,1),
        background .3s ease;
}


.elementor-2220 .elementor-element.elementor-element-e7402c0 .diana-panel-close:hover {
    transform: rotate(90deg);

    background: rgba(198,164,95,.08);
}


.elementor-2220 .elementor-element.elementor-element-e7402c0 .diana-panel-close::before,
.elementor-2220 .elementor-element.elementor-element-e7402c0 .diana-panel-close::after {
    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    width: 17px;
    height: 1px;

    background: #b99754;
}


.elementor-2220 .elementor-element.elementor-element-e7402c0 .diana-panel-close::before {
    transform:
        translate(-50%, -50%)
        rotate(45deg);
}


.elementor-2220 .elementor-element.elementor-element-e7402c0 .diana-panel-close::after {
    transform:
        translate(-50%, -50%)
        rotate(-45deg);
}


/* ==========================================================
   PANEL HAT NORMALEN CURSOR
   ========================================================== */

.elementor-2220 .elementor-element.elementor-element-e7402c0.diana-open .diana-teaser-panel,
.elementor-2220 .elementor-element.elementor-element-e7402c0.diana-open .diana-teaser-panel * {
    cursor: auto;
}


.elementor-2220 .elementor-element.elementor-element-e7402c0.diana-open .diana-panel-close {
    cursor: pointer !important;
}


/* ==========================================================
   ANDERE ELEMENTOR-INHALTE IM HERO WEG

   Das Bild kommt aus .diana-image-stage.
   Panel bleibt erhalten.
   Plus wird separat behandelt.
   ========================================================== */

.elementor-2220 .elementor-element.elementor-element-e7402c0.diana-open
> .elementor-element:not(.diana-teaser-panel):not(.diana-plus-button) {
    opacity: 0 !important;

    pointer-events: none !important;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1024px) {

    .elementor-2220 .elementor-element.elementor-element-e7402c0 {
        --diana-panel-width: 46%;
    }

}


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

@media (max-width: 767px) {

    .elementor-2220 .elementor-element.elementor-element-e7402c0 {
        --diana-panel-width: 100%;
    }


    .elementor-2220 .elementor-element.elementor-element-e7402c0.diana-open .diana-image-stage {
        right: 0;

        transform:
            translateX(-7%)
            scale(1.08);
    }


    .elementor-2220 .elementor-element.elementor-element-e7402c0 .diana-teaser-panel {
        width: 100% !important;

        padding:
            90px
            28px
            50px !important;
    }


    .elementor-2220 .elementor-element.elementor-element-e7402c0 .diana-panel-close {
        top: 20px;
        right: 20px;
    }


    .elementor-2220 .elementor-element.elementor-element-e7402c0.diana-open {
        cursor: auto !important;
    }

}


/* ==========================================================
   HERO COLOR / DARK OVERLAY
   ========================================================== */

.elementor-2220 .elementor-element.elementor-element-e7402c0 .diana-hero-overlay {
    position: absolute;

    inset: 0;

    z-index: 5;

    pointer-events: none;

    /*
     Hier steuerst du die Abdunklung.
    */
    background:
        linear-gradient(
            to bottom,
            rgba(18,26,29,.38) 0%,
            rgba(18,26,29,.28) 45%,
            rgba(18,26,29,.36) 100%
        );

    opacity: 1;

    transition:
        opacity .5s ease,
        background .5s ease;
}/* End custom CSS */