/* ==========================================================
   VACATIONTESTER 2026
   Modern Travel Editorial Design
   TYPO3 11 / migration-friendly
   ========================================================== */


/* ==========================================================
   DESIGN TOKENS
   ========================================================== */

:root {

    --vt-navy-950: #071426;
    --vt-navy-900: #0b1f3a;
    --vt-navy-800: #122f55;
    --vt-navy-700: #1d477a;

    --vt-blue-500: #2d75b6;
    --vt-blue-100: #eaf4fb;

    --vt-gold-500: #d6ad5c;
    --vt-gold-400: #e8c878;
    --vt-gold-100: #faf3e4;

    --vt-white: #ffffff;
    --vt-surface: #ffffff;
    --vt-surface-soft: #f6f8fb;
    --vt-surface-warm: #faf9f6;

    --vt-text: #12223c;
    --vt-text-soft: #526176;
    --vt-border: #dfe5ec;

    --vt-success: #26775a;
    --vt-warning: #b7791f;
    --vt-danger: #a82f3d;

    --vt-radius-sm: 10px;
    --vt-radius-md: 16px;
    --vt-radius-lg: 24px;
    --vt-radius-xl: 32px;

    --vt-shadow-xs:
        0 1px 2px rgba(7, 20, 38, 0.04);

    --vt-shadow-sm:
        0 6px 22px rgba(7, 20, 38, 0.07);

    --vt-shadow-md:
        0 14px 42px rgba(7, 20, 38, 0.11);

    --vt-shadow-lg:
        0 30px 80px rgba(7, 20, 38, 0.16);

    --vt-container: 1280px;

    --vt-transition:
        180ms cubic-bezier(.2, .7, .3, 1);
}


/* ==========================================================
   BASE
   ========================================================== */

html {
    scroll-behavior: smooth;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    padding: 0;

    color: var(--vt-text);

    background:
        radial-gradient(
            circle at 90% 0%,
            rgba(45, 117, 182, 0.08),
            transparent 28rem
        ),
        var(--vt-surface-soft);

    font-family:
        "Open Sans",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif !important;

    font-size: 16px;
    line-height: 1.68;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    text-rendering: optimizeLegibility;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

::selection {
    color: var(--vt-navy-950);
    background: var(--vt-gold-400);
}


/* ==========================================================
   ACCESSIBILITY
   ========================================================== */

a,
button,
input,
select,
textarea,
summary {
    -webkit-tap-highlight-color: transparent;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: 3px solid var(--vt-gold-400);
    outline-offset: 3px;
}


/* ==========================================================
   TYPOGRAPHY
   ========================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;

    color: var(--vt-navy-950);

    font-family:
        "Open Sans",
        system-ui,
        sans-serif;

    font-weight: 700;

    line-height: 1.18;

    letter-spacing: -0.025em;
}

h1,
.csc-header h1,
.h1grey {
    font-size: clamp(2rem, 4.3vw, 4rem);
}

h2 {
    font-size: clamp(1.65rem, 3vw, 2.7rem);
}

h3 {
    font-size: clamp(1.3rem, 2vw, 1.8rem);
}

h4 {
    font-size: 1.2rem;
}

h5,
h6 {
    font-size: 1rem;
}

.h1grey {
    color: var(--vt-navy-900);
}

p {
    margin-top: 0;
    margin-bottom: 1.25rem;
}

strong {
    color: var(--vt-navy-950);
}


/* ==========================================================
   LINKS
   ========================================================== */

a {
    color: #9a7130;

    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;

    transition:
        color var(--vt-transition),
        opacity var(--vt-transition);
}

a:hover {
    color: var(--vt-navy-700);
}


/* ==========================================================
   HEADER
   ========================================================== */

.fixedheader {

    position: sticky !important;

    top: 0;

    z-index: 1000;

    width: 100%;

    min-height: 76px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin: 0;

    padding:
        env(safe-area-inset-top)
        max(20px, calc((100vw - var(--vt-container)) / 2));

    background:
        rgba(7, 20, 38, 0.92);

    border-bottom:
        1px solid rgba(255, 255, 255, 0.11);

    box-shadow:
        0 6px 24px rgba(0, 0, 0, 0.10);

    backdrop-filter:
        blur(18px)
        saturate(135%);

    -webkit-backdrop-filter:
        blur(18px)
        saturate(135%);
}


/* ==========================================================
   LOGO
   ========================================================== */

.logo {
    padding: 0;

    display: flex;

    align-items: center;

    min-height: 72px;
}

.logo a {
    color: var(--vt-white);

    font-size:
        clamp(1.15rem, 1.8vw, 1.7rem);

    font-weight: 700;

    letter-spacing: -0.035em;

    text-decoration: none;
}

.logo a:hover {
    color: var(--vt-gold-400);
}

.logo img {
    max-height: 48px;

    width: auto;

    padding-right: 16px;
}

.logo .secondtitle {
    margin-top: -5px;

    color:
        rgba(255, 255, 255, 0.68);

    font-size: 0.69rem;

    font-weight: 500;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


/* ==========================================================
   DESKTOP NAVIGATION
   ========================================================== */

.nav {
    padding: 0;
}

.menu2 {
    margin-left: auto;
}

.menu2 ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

.menu2 .level1 {
    display: flex;

    align-items: center;

    gap: 4px;
}

.menu2 ul.level1 > li {
    position: static;

    cursor: pointer;
}

.menu2 ul.level1 > li > a,
.menu2 ul.level1 > li > .inner > a,
.menu2 ul.level1 > li > .inner_a > a {

    min-height: 46px;

    display: flex;

    align-items: center;

    padding: 0 14px;

    color: rgba(255, 255, 255, 0.88);

    border-radius: 12px;

    font-size: 0.91rem;

    font-weight: 600;

    text-decoration: none;

    transition:
        background var(--vt-transition),
        color var(--vt-transition);
}

.menu2 ul.level1 > li > a:hover,
.menu2 ul.level1 > li > a:focus-visible,
.menu2 .inner_a:hover > a {

    color: var(--vt-white);

    background:
        rgba(255, 255, 255, 0.09);

    text-decoration: none !important;
}

.menu2 .inner_a .fa-sort-down {
    margin-left: 6px;

    color: var(--vt-gold-400);
}


/* ==========================================================
   MEGA MENU
   ========================================================== */

.menu2 div.megadd {

    position: absolute;

    top: 100%;

    left: 50%;

    width:
        min(calc(100% - 32px), var(--vt-container));

    transform:
        translateX(-50%);

    display: none;

    padding: 26px;

    background:
        rgba(255, 255, 255, 0.98);

    border:
        1px solid var(--vt-border);

    border-radius:
        0 0 var(--vt-radius-lg) var(--vt-radius-lg);

    box-shadow:
        var(--vt-shadow-lg);

    backdrop-filter: blur(18px);
}

.menu2 ul.level1 li:hover > div.megadd,
.menu2 ul.level1 li:focus-within > div.megadd {
    display: block;
}

.menu2 ul.level1 li li a {
    color: var(--vt-text);

    font-weight: 500;

    text-decoration: none;
}

.menu2 ul.level1 li li a:hover {
    color: #966f31;

    text-decoration: none !important;
}

.menu2 ul.level2 li.inner2,
.menu2 ul.level2 li.inner2_cur,
.menu2 ul.level2 li.inner2_sub,
.menu2 ul.level2 li.inner2_cur_sub,
.menu2 ul.level2 > li.inner {

    min-width: 170px;

    padding: 14px 20px;
}

.menu2 ul.level3 {
    margin-top: 10px;

    padding-top: 10px;

    border-top:
        1px solid var(--vt-border);
}


/* ==========================================================
   PAGE
   ========================================================== */

.mediafuturert {
    min-height: 100svh;
}

.mediafuturert #content {

    position: relative;

    width: 100%;

    max-width: var(--vt-container);

    min-height: 60vh;

    margin: 0 auto;

    padding:
        clamp(30px, 4vw, 64px)
        clamp(16px, 3vw, 32px);

    text-align: left;

    z-index: 1;
}

.mediafuturert #maincontent {

    width: 100%;

    padding:
        0 0 clamp(40px, 6vw, 80px);
}


/* ==========================================================
   CONTENT FRAMES
   ========================================================== */

.frame {

    position: relative;

    padding:
        clamp(22px, 3vw, 42px) 0;
}

.frame-container {
    margin: 0;
}

.frame-container-default {
    max-width: none;
}


/* ==========================================================
   GREY / FEATURE BOX
   ========================================================== */

.frame-greybox {
    padding:
        clamp(18px, 3vw, 32px) 0;

    margin: 0;

    overflow: visible;
}

.frame-greybox .frame-container {

    width: 100%;

    padding:
        clamp(22px, 4vw, 42px) !important;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f3f6fa
        );

    border:
        1px solid var(--vt-border);

    border-radius:
        var(--vt-radius-lg);

    box-shadow:
        var(--vt-shadow-sm);
}


/* ==========================================================
   IMAGES
   ========================================================== */

.mediafuturert img {
    max-width: 100%;

    height: auto;
}

.img-responsive,
.imagewrap img,
.gallery-item img,
.gallery-item picture {

    max-width: 100%;

    height: auto !important;

    border-radius:
        var(--vt-radius-md);

    object-fit: cover;
}

.gallery-item {

    overflow: hidden;

    padding: 6px;
}

.gallery-item img {

    transition:
        transform 350ms cubic-bezier(.2, .7, .3, 1),
        box-shadow 350ms cubic-bezier(.2, .7, .3, 1);
}

.gallery-item img:hover {

    transform:
        translateY(-2px);

    box-shadow:
        var(--vt-shadow-md);
}

.textmedia-item,
.textpic-item,
.textpic-text,
.textpic-below,
.textpic-above {

    padding:
        8px 0;
}


/* ==========================================================
   FLEXSLIDER
   ========================================================== */

.frame-type-ws_slider {

    padding: 0;

    margin-bottom:
        clamp(32px, 5vw, 64px);

    overflow: hidden;

    border-radius:
        var(--vt-radius-xl);

    box-shadow:
        var(--vt-shadow-md);
}

.flexslider {

    margin: 0;

    border: none;

    background: var(--vt-navy-950);
}

.flexslider .slides img {

    width: 100%;

    display: block;

    object-fit: cover;
}

.slidercontent .caption-wrapper {

    left:
        clamp(14px, 4vw, 48px);

    bottom:
        clamp(14px, 4vw, 44px);

    max-width: min(620px, calc(100% - 28px));

    margin: 0;

    padding:
        clamp(16px, 3vw, 28px);

    color: #ffffff;

    background:
        rgba(7, 20, 38, 0.76);

    border:
        1px solid rgba(255, 255, 255, 0.18);

    border-radius:
        var(--vt-radius-md);

    box-shadow:
        var(--vt-shadow-md);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);
}

.caption-text {
    text-align: left;
}

.slidercontent .caption-wrapper .caption-link {
    text-align: left;
}

.caption-link a {

    display: inline-flex;

    align-items: center;

    min-height: 44px;

    margin-top: 10px;

    padding:
        9px 16px;

    color:
        var(--vt-navy-950) !important;

    background:
        var(--vt-gold-400);

    border-radius:
        999px;

    text-decoration: none;
}


/* ==========================================================
   BUTTONS
   ========================================================== */

.btn {

    min-height: 44px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding:
        9px 18px;

    border-radius:
        999px;

    font-weight: 650;

    transition:
        transform var(--vt-transition),
        box-shadow var(--vt-transition),
        background var(--vt-transition);
}

.btn:hover {

    transform:
        translateY(-1px);
}

.btn-primary {

    color: #ffffff;

    background:
        var(--vt-navy-800);

    border-color:
        var(--vt-navy-800);
}

.btn-primary:hover {

    color: #ffffff;

    background:
        var(--vt-navy-950);

    border-color:
        var(--vt-navy-950);

    box-shadow:
        var(--vt-shadow-sm);
}


/* ==========================================================
   NEWS
   ========================================================== */

.news-list-view .article {

    margin-bottom:
        26px;

    padding:
        clamp(18px, 3vw, 28px);

    background:
        var(--vt-white);

    border:
        1px solid var(--vt-border);

    border-radius:
        var(--vt-radius-lg);

    box-shadow:
        var(--vt-shadow-xs);

    transition:
        transform var(--vt-transition),
        box-shadow var(--vt-transition);
}

.news-list-view .article:hover {

    transform:
        translateY(-3px);

    box-shadow:
        var(--vt-shadow-md);
}

.news-list-view img {
    border-radius:
        var(--vt-radius-md);
}


/* ==========================================================
   TABLES
   ========================================================== */

table {

    width: 100%;

    overflow: hidden;

    border-collapse: separate;

    border-spacing: 0;

    background:
        var(--vt-white);

    border:
        1px solid var(--vt-border);

    border-radius:
        var(--vt-radius-md);

    box-shadow:
        var(--vt-shadow-xs);
}

th {

    color:
        var(--vt-white);

    background:
        var(--vt-navy-900);

    font-weight: 650;
}

th,
td {

    padding:
        12px 14px;

    border-bottom:
        1px solid var(--vt-border);

    word-break:
        normal;
}

tbody tr:last-child td {
    border-bottom: none;
}

tbody tr:nth-child(even) {
    background:
        #f8fafc;
}


/* ==========================================================
   ACCORDION
   ========================================================== */

.accordion-item {

    overflow: hidden;

    margin-bottom:
        10px;

    border:
        1px solid var(--vt-border) !important;

    border-radius:
        var(--vt-radius-md) !important;

    background:
        var(--vt-white);
}

.accordion-button {

    min-height:
        54px;

    padding:
        14px 18px;

    color:
        var(--vt-navy-900);

    background:
        var(--vt-white);

    font-weight:
        650;
}

.accordion-button:not(.collapsed) {

    color:
        var(--vt-navy-950);

    background:
        var(--vt-gold-100);
}


/* ==========================================================
   FOOTER
   ========================================================== */

.mediafuturert .footer {

    width: 100%;

    margin: 0;

    padding:
        clamp(38px, 5vw, 64px)
        clamp(18px, 4vw, 32px);

    color:
        rgba(255, 255, 255, 0.78);

    background:
        var(--vt-navy-950);

    border-top:
        1px solid rgba(255, 255, 255, 0.10);
}

.mediafuturert .foot_copy {

    padding-top:
        12px;

    color:
        rgba(255, 255, 255, 0.58);

    font-size:
        0.82rem;
}

.mediafuturert .footer li {

    margin: 0;

    padding: 2px;

    line-height: 1.5;

    list-style: none;

    display: inline-block;
}

.mediafuturert .footer a {

    min-height:
        42px;

    display:
        inline-flex;

    align-items:
        center;

    padding:
        7px 12px;

    color:
        rgba(255, 255, 255, 0.78);

    border-radius:
        10px;

    text-decoration:
        none;
}

.mediafuturert .footer a:hover {

    color:
        var(--vt-white);

    background:
        rgba(255, 255, 255, 0.08);

    text-decoration:
        none;
}

.mediafuturert .footer .fab {
    font-size:
        1.4rem;
}


/* ==========================================================
   BACK TO TOP
   ========================================================== */

#topButton,
.back-to-top {

    border:
        1px solid rgba(255, 255, 255, 0.2);

    color:
        #ffffff;

    background:
        rgba(7, 20, 38, 0.90);

    box-shadow:
        var(--vt-shadow-md);

    backdrop-filter:
        blur(12px);

    transition:
        transform var(--vt-transition),
        opacity var(--vt-transition);
}

#topButton:hover,
.back-to-top:hover {

    transform:
        translateY(-2px);

    background:
        var(--vt-navy-800);
}


/* ==========================================================
   AI TRANSPARENCY
   ========================================================== */

.frame-ai-generated,
.frame-ai-manipulated,
.frame-ai-deepfake {
    position: relative;
}

.ai-disclosure {

    position:
        relative;

    z-index:
        5;

    width:
        fit-content;

    max-width:
        100%;

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    margin:
        0 0 10px auto;

    padding:
        6px 11px;

    color:
        var(--vt-navy-950);

    background:
        rgba(255, 255, 255, 0.94);

    border:
        1px solid var(--vt-border);

    border-radius:
        999px;

    box-shadow:
        var(--vt-shadow-xs);

    font-size:
        0.73rem;

    font-weight:
        650;

    line-height:
        1.2;

    letter-spacing:
        0.015em;

    backdrop-filter:
        blur(10px);
}

.ai-disclosure__icon {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        20px;

    height:
        20px;

    color:
        var(--vt-navy-950);

    background:
        var(--vt-gold-400);

    border-radius:
        50%;

    font-size:
        0.63rem;

    font-weight:
        800;
}

.ai-disclosure--manipulated {

    background:
        #fffaf1;

    border-color:
        #ead09d;
}

.ai-disclosure--deepfake {

    color:
        #721c28;

    background:
        #fff3f5;

    border-color:
        #e6b4bc;
}

.ai-disclosure--deepfake .ai-disclosure__icon {

    color:
        #ffffff;

    background:
        var(--vt-danger);
}


/* ==========================================================
   COOKIE / PRIVACY
   ========================================================== */

.cc-window {

    border-radius:
        var(--vt-radius-md) !important;

    box-shadow:
        var(--vt-shadow-lg) !important;
}

.cc-color-override--1471537634.cc-window {

    color:
        #ffffff !important;

    background:
        rgba(7, 20, 38, 0.96) !important;

    padding:
        20px !important;
}


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

@media screen and (max-width: 991px) {

    .fixedheader {

        position:
            sticky !important;

        min-height:
            70px;

        padding:
            env(safe-area-inset-top)
            16px;

        flex-wrap:
            wrap;
    }


    .logo {

        min-height:
            68px;

        max-width:
            calc(100% - 72px);
    }


    .logo a {

        font-size:
            clamp(1.05rem, 5vw, 1.4rem);
    }


    label.responsive-nav-label {

        position:
            absolute;

        top:
            10px;

        right:
            14px;

        width:
            48px;

        height:
            48px;

        display:
            block;

        padding:
            5px;

        cursor:
            pointer;

        border:
            1px solid rgba(255, 255, 255, 0.15);

        border-radius:
            14px;

        background:
            rgba(255, 255, 255, 0.06);
    }


    .line {

        position:
            absolute;

        right:
            9px;

        width:
            28px;

        height:
            2px;

        display:
            block;

        background:
            #ffffff;

        border-radius:
            10px;

        transform-origin:
            center;

        transition:
            transform var(--vt-transition),
            opacity var(--vt-transition);
    }


    .line:nth-child(1) {
        top: 13px;
    }

    .line:nth-child(2) {
        top: 23px;
    }

    .line:nth-child(3) {
        top: 33px;
    }


    #responsive-nav:checked
    + .responsive-nav-label
    .line:nth-child(1) {

        transform:
            translateY(10px)
            rotate(45deg);
    }


    #responsive-nav:checked
    + .responsive-nav-label
    .line:nth-child(2) {

        opacity:
            0;
    }


    #responsive-nav:checked
    + .responsive-nav-label
    .line:nth-child(3) {

        transform:
            translateY(-10px)
            rotate(-45deg);
    }


    .nav_text {
        display: none !important;
    }


    .menu2 {

        position:
            absolute;

        top:
            -9999px;

        left:
            0;

        width:
            100%;

        margin:
            0;

        background:
            var(--vt-navy-950);
    }


    input#responsive-nav[type="checkbox"]:checked ~ .menu2 {

        position:
            relative;

        top:
            auto;

        width:
            100%;

        margin:
            0 -16px;

        width:
            calc(100% + 32px);

        padding:
            8px 16px 18px;
    }


    .menu2 .level1 {

        display:
            block;

        width:
            100%;
    }


    .menu2 ul.level1 > li {

        width:
            100%;

        border-top:
            1px solid rgba(255, 255, 255, 0.08) !important;
    }


    .menu2 ul.level1 > li > a {

        width:
            100%;

        min-height:
            50px;

        padding:
            0 12px;

        border-radius:
            10px;
    }


    .menu2 div.megadd {

        position:
            static;

        width:
            100%;

        display:
            block;

        transform:
            none;

        padding:
            4px 0 10px;

        background:
            transparent;

        border:
            none;

        border-radius:
            0;

        box-shadow:
            none;

        backdrop-filter:
            none;
    }


    .menu2 ul.level1 li li a {

        min-height:
            44px;

        display:
            flex;

        align-items:
            center;

        padding:
            5px 14px;

        color:
            rgba(255, 255, 255, 0.72);

        border-radius:
            10px;
    }


    .menu2 ul.level1 li li a:hover {

        color:
            #ffffff;

        background:
            rgba(255, 255, 255, 0.08);
    }


    .menu2 ul.level3 {

        border-top:
            1px solid rgba(255, 255, 255, 0.08);
    }


    .mediafuturert #content {

        padding:
            28px 16px;
    }


    .frame {

        padding:
            22px 0;
    }


    .frame-type-ws_slider {

        border-radius:
            var(--vt-radius-lg);
    }


    .slidercontent .caption-wrapper {

        left:
            10px;

        right:
            10px;

        bottom:
            10px;

        max-width:
            none;

        padding:
            14px;
    }


    .mediafuturert .foot_copy,
    .mediafuturert .footNav,
    .mediafuturert .footSocialMedia {

        text-align:
            center;
    }


    .ai-disclosure {

        margin-left:
            0;

        margin-right:
            auto;
    }
}


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

@media screen and (max-width: 575px) {

    body {
        font-size:
            15px;
    }


    h1,
    .csc-header h1,
    .h1grey {

        font-size:
            clamp(1.8rem, 9vw, 2.6rem);
    }


    h2 {

        font-size:
            clamp(1.5rem, 7vw, 2rem);
    }


    .frame-greybox .frame-container {

        padding:
            20px 16px !important;

        border-radius:
            var(--vt-radius-md);
    }


    table {

        font-size:
            0.86rem;
    }


    th,
    td {

        padding:
            9px 10px;
    }
}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior:
            auto;
    }

    *,
    *::before,
    *::after {

        scroll-behavior:
            auto !important;

        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;
    }
}
/* ==========================================================
   VACATIONTESTER 2026 – DESIGN FIXES V2
   Ganz ans ENDE von vacationtester-2026.css
   ========================================================== */


/* ==========================================================
   1. GLOBALER CONTENT-CONTAINER
   Hero, Content und Karten bekommen dieselbe optische Achse
   ========================================================== */

:root {
    --vt-container: 1360px;
    --vt-content-padding: clamp(18px, 3vw, 36px);
}

.mediafuturert #content {
    width: 100%;
    max-width: var(--vt-container);

    margin: 0 auto;

    padding:
        clamp(32px, 4vw, 64px)
        var(--vt-content-padding)
        0;
}

.mediafuturert #maincontent {
    width: 100%;
    max-width: 100%;

    margin: 0;

    padding-bottom: 40px;
}


/* Bootstrap / TYPO3 Container nicht wieder auf 1140px begrenzen */

.mediafuturert #maincontent .frame-container,
.mediafuturert #maincontent .container {
    width: 100%;
    max-width: 100%;
}


/* ==========================================================
   2. HEADER
   ========================================================== */

.fixedheader {
    min-height: 72px;

    padding-left:
        max(22px, calc((100vw - var(--vt-container)) / 2));

    padding-right:
        max(22px, calc((100vw - var(--vt-container)) / 2));

    gap: 24px;
}


/* Logo darf nicht zusammengedrückt werden */

.logo {
    flex: 0 0 auto;

    min-width: max-content;
}


/* Navigation bekommt den verbleibenden Raum */

.headernavi,
.nav {
    flex: 1 1 auto;

    min-width: 0;
}


/* Navigation immer sauber rechts */

.menu2 {
    width: 100%;

    display: flex;

    justify-content: flex-end;
}

.menu2 .level1 {
    width: auto;

    justify-content: flex-end;

    gap: 3px;
}


/* kompaktere Navigation */

.menu2 ul.level1 > li > a,
.menu2 ul.level1 > li > .inner > a,
.menu2 ul.level1 > li > .inner_a > a {
    min-height: 44px;

    padding-left: 11px;
    padding-right: 11px;

    white-space: nowrap;

    font-size: 0.87rem;
}


/* ==========================================================
   3. LOGO / CLAIM
   ========================================================== */

.logo a {
    display: flex;

    align-items: center;

    gap: 10px;
}

.logo img {
    flex: 0 0 auto;

    max-width: 46px;
    max-height: 46px;

    padding-right: 0;
}

.logo .secondtitle {
    margin: 0 0 0 18px;

    text-indent: 0;

    white-space: nowrap;

    font-size: 0.63rem;

    letter-spacing: 0.11em;
}


/* Claim bei kleineren Desktop-Breiten ausblenden.
   Sonst kollidiert er mit der Navigation. */

@media screen and (max-width: 1320px) {

    .logo .secondtitle {
        display: none;
    }

}


/* ==========================================================
   4. HEADER – ZWISCHENGRÖSSEN
   verhindert abgeschnittene Navigation
   ========================================================== */

@media screen and (min-width: 992px) and (max-width: 1180px) {

    .fixedheader {
        padding-left: 14px;
        padding-right: 14px;

        gap: 12px;
    }

    .logo a {
        font-size: 1.2rem;
    }

    .logo img {
        max-width: 40px;
        max-height: 40px;
    }

    .menu2 ul.level1 > li > a,
    .menu2 ul.level1 > li > .inner > a,
    .menu2 ul.level1 > li > .inner_a > a {
        padding-left: 7px;
        padding-right: 7px;

        font-size: 0.79rem;
    }

}


/* ==========================================================
   5. HERO / SLIDER
   ========================================================== */

.frame-type-ws_slider {
    width: 100%;

    margin-top: 0;
    margin-bottom: clamp(44px, 5vw, 70px);

    border-radius: 26px;

    overflow: hidden;
}

.slidercontent.wsflexslider-style1 {
    width: 100%;

    overflow: hidden;

    border-radius: 26px;
}

.flexslider {
    overflow: hidden;

    border-radius: 26px;
}


/* Bild erhält stabilere Hero-Proportion */

.flexslider .slides > li {
    overflow: hidden;
}

.flexslider .slides img {
    width: 100%;

    min-height: clamp(330px, 34vw, 480px);
    max-height: 520px;

    object-fit: cover;
}


/* Caption deutlich hochwertiger */

.slidercontent .caption-wrapper {
    left: clamp(18px, 4vw, 48px);
    bottom: clamp(18px, 4vw, 42px);

    width: min(420px, calc(100% - 36px));
    max-width: 420px;

    margin: 0;

    padding: clamp(20px, 2.5vw, 30px);

    background:
        linear-gradient(
            145deg,
            rgba(8, 22, 40, 0.94),
            rgba(20, 39, 65, 0.91)
        );

    border:
        1px solid rgba(255, 255, 255, 0.13);

    border-radius: 18px;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.20);

    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.slidercontent .caption-wrapper h1,
.slidercontent .caption-wrapper h2,
.slidercontent .caption-wrapper h3,
.slidercontent .caption-wrapper h4 {
    color: #ffffff;
}

.slidercontent .caption-wrapper p {
    margin-bottom: 18px;

    color: rgba(255, 255, 255, 0.9);
}


/* Slider Button */

.caption-link a {
    min-height: 46px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 10px 18px;

    color: #0b1f3a !important;

    background:
        linear-gradient(
            135deg,
            #f0cd7d,
            #d9ad58
        );

    border-radius: 999px;

    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.16);

    font-weight: 700;
}

.caption-link a:hover {
    color: #071426 !important;

    transform: translateY(-1px);

    background:
        linear-gradient(
            135deg,
            #f6da96,
            #e3bb6a
        );
}


/* ==========================================================
   6. TYPO3 CONTENT-FRAMES
   Zu große vertikale Abstände reduzieren
   ========================================================== */

.frame {
    padding:
        clamp(20px, 2.5vw, 34px) 0;
}


/* letztes Element soll keinen riesigen Abstand zum Footer erzeugen */

.mediafuturert #maincontent > .frame:last-child {
    padding-bottom: 0;
}

.mediafuturert #maincontent > :last-child {
    margin-bottom: 0;
}


/* ==========================================================
   7. CARDS
   ========================================================== */

.mediafuturert .card {
    height: 100%;

    overflow: hidden;

    background: #ffffff;

    border:
        1px solid rgba(16, 39, 67, 0.12);

    border-radius: 18px;

    box-shadow:
        0 5px 18px rgba(7, 20, 38, 0.055);

    transition:
        transform 220ms ease,
        box-shadow 220ms ease,
        border-color 220ms ease;
}

.mediafuturert .card:hover {
    transform: translateY(-5px);

    border-color:
        rgba(193, 157, 92, 0.38);

    box-shadow:
        0 18px 42px rgba(7, 20, 38, 0.12);
}


/* Card Bilder */

.mediafuturert .card img,
.mediafuturert .card-img-top {
    width: 100%;

    height: 210px !important;

    display: block;

    object-fit: cover;

    border-radius: 0;
}


/* Card Inhalt */

.mediafuturert .card-body {
    padding: 22px 23px 24px;
}

.mediafuturert .card-title,
.mediafuturert .card h2,
.mediafuturert .card h3 {
    margin-bottom: 14px;

    color: var(--vt-navy-900);

    font-size: clamp(1.15rem, 1.45vw, 1.35rem);

    line-height: 1.25;
}

.mediafuturert .card p {
    margin-bottom: 0;

    color: #41516a;

    line-height: 1.62;
}


/* ==========================================================
   8. TYPO3 SPALTEN / BOOTSTRAP ROW
   bessere Abstände
   ========================================================== */

.mediafuturert #maincontent .row {
    --bs-gutter-x: 24px;
    --bs-gutter-y: 24px;
}


/* Karten innerhalb von Columns auf gleiche Höhe */

.mediafuturert #maincontent .row > [class*="col-"] {
    display: flex;

    align-items: stretch;
}

.mediafuturert #maincontent .row > [class*="col-"] > .frame,
.mediafuturert #maincontent .row > [class*="col-"] > .card {
    width: 100%;
}


/* ==========================================================
   9. BILDER INNERHALB NORMALER CONTENT-ELEMENTE
   ========================================================== */

.mediafuturert .gallery-item {
    overflow: hidden;

    border-radius: 16px;
}

.mediafuturert .gallery-item img {
    width: 100% !important;

    border-radius: 16px;

    box-shadow:
        0 4px 14px rgba(7, 20, 38, 0.07);
}


/* ==========================================================
   10. FOOTER
   aktuell deutlich zu hoch
   ========================================================== */

.mediafuturert .footer {
    padding:
        28px
        max(22px, calc((100vw - var(--vt-container)) / 2));

    min-height: 105px;

    display: flex;

    align-items: center;

    background:
        linear-gradient(
            135deg,
            #061427,
            #091a30
        );
}

.mediafuturert .footer .row {
    width: 100%;

    margin: 0;

    align-items: center;
}

.mediafuturert .foot_copy {
    padding-top: 0;

    margin: 0;
}

.mediafuturert .footNav {
    margin: 0;
}

.mediafuturert .footNav ul {
    margin: 0;
    padding: 0;

    text-align: center;
}

.mediafuturert .footer a {
    min-height: 38px;

    padding: 6px 10px;

    font-size: 0.82rem;
}


/* ==========================================================
   11. DESKTOP CONTENT
   Karten dürfen auf großen Displays breiter werden
   ========================================================== */

@media screen and (min-width: 1400px) {

    .mediafuturert #content {
        max-width: 1440px;
    }

}


/* ==========================================================
   12. MOBILE
   ========================================================== */

@media screen and (max-width: 991px) {

    .mediafuturert #content {
        padding:
            24px
            15px
            0;
    }

    .frame-type-ws_slider,
    .slidercontent.wsflexslider-style1,
    .flexslider {
        border-radius: 18px;
    }

    .flexslider .slides img {
        min-height: 420px;
        max-height: 520px;
    }

    .slidercontent .caption-wrapper {
        left: 12px;
        right: 12px;
        bottom: 12px;

        width: auto;
        max-width: none;

        padding: 18px;

        border-radius: 14px;
    }

    .mediafuturert .card img,
    .mediafuturert .card-img-top {
        height: 220px !important;
    }

    .mediafuturert .footer {
        min-height: auto;

        padding: 30px 18px;
    }

}


/* ==========================================================
   13. SMALL MOBILE
   ========================================================== */

@media screen and (max-width: 575px) {

    .mediafuturert #maincontent .row {
        --bs-gutter-y: 18px;
    }

    .mediafuturert .card {
        border-radius: 15px;
    }

    .mediafuturert .card-body {
        padding: 19px;
    }

    .mediafuturert .card img,
    .mediafuturert .card-img-top {
        height: 200px !important;
    }

    .flexslider .slides img {
        min-height: 450px;
    }

}
/* ==========================================================
   VACATIONTESTER 2026
   PREMIUM FOOTER V3
   ========================================================== */

.mediafuturert .vt-footer {

    width: 100%;

    margin: clamp(42px, 5vw, 70px) 0 0;

    color: rgba(255, 255, 255, 0.76);

    background:
        radial-gradient(
            circle at 10% 0%,
            rgba(45, 117, 182, 0.13),
            transparent 28rem
        ),
        linear-gradient(
            135deg,
            #061325 0%,
            #08182c 55%,
            #071426 100%
        );

    border-top:
        1px solid rgba(255, 255, 255, 0.09);
}


/* ==========================================================
   FOOTER MAIN AREA
   ========================================================== */

.mediafuturert .vt-footer__main {

    width: 100%;

    max-width: 1360px;

    margin: 0 auto;

    padding:
        34px clamp(20px, 3vw, 38px)
        27px;

    display: grid;

    grid-template-columns:
        minmax(250px, 1fr)
        auto
        minmax(90px, 1fr);

    align-items: center;

    gap: 32px;
}


/* ==========================================================
   BRAND
   ========================================================== */

.mediafuturert .vt-footer__brand {

    min-width: 0;
}


.mediafuturert .vt-footer__brand-link {

    width: fit-content;

    display: inline-flex;

    align-items: center;

    gap: 13px;

    color: #ffffff;

    text-decoration: none;

    font-weight: normal;
}


.mediafuturert .vt-footer__brand-link:hover {

    color: #ffffff;

    text-decoration: none;
}


.mediafuturert .vt-footer__brand img {

    flex: 0 0 auto;

    width: 46px;

    height: auto;

    max-height: 42px;

    object-fit: contain;

    border-radius: 0;
}


.mediafuturert .vt-footer__brand-text {

    display: flex;

    flex-direction: column;

    gap: 1px;

    min-width: 0;
}


.mediafuturert .vt-footer__brand-text strong {

    color: #ffffff;

    font-size: 1rem;

    line-height: 1.3;

    letter-spacing: -0.02em;
}


.mediafuturert .vt-footer__brand-text small {

    color: rgba(255, 255, 255, 0.49);

    font-size: 0.64rem;

    line-height: 1.4;

    letter-spacing: 0.085em;

    text-transform: uppercase;

    white-space: nowrap;
}


/* ==========================================================
   FOOTER NAVIGATION
   ========================================================== */

.mediafuturert .vt-footer__navigation {

    display: flex;

    justify-content: center;
}


.mediafuturert .vt-footer__navigation ul {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 3px;

    margin: 0;

    padding: 0;

    list-style: none;
}


.mediafuturert .vt-footer__navigation li {

    display: block;

    margin: 0;

    padding: 0;

    list-style: none;
}


.mediafuturert .vt-footer__navigation a,
.mediafuturert .vt-footer__cookie {

    min-height: 40px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    padding: 7px 11px;

    color: rgba(255, 255, 255, 0.72);

    background: transparent;

    border: 0;

    border-radius: 10px;

    font-family: inherit;

    font-size: 0.79rem;

    font-weight: 600;

    line-height: 1;

    text-decoration: none;

    cursor: pointer;

    transition:
        color 180ms ease,
        background 180ms ease,
        transform 180ms ease;
}


.mediafuturert .vt-footer__navigation a:hover,
.mediafuturert .vt-footer__cookie:hover {

    color: #ffffff;

    background:
        rgba(255, 255, 255, 0.075);

    text-decoration: none;

    transform: translateY(-1px);
}


.mediafuturert .vt-footer__navigation a:focus-visible,
.mediafuturert .vt-footer__cookie:focus-visible {

    outline: 2px solid var(--vt-gold-400);

    outline-offset: 2px;
}


/* Cookie Icon */

.mediafuturert .vt-footer__cookie i {

    color: var(--vt-gold-400);

    font-size: 0.82rem;
}


/* ==========================================================
   SOCIAL MEDIA
   ========================================================== */

.mediafuturert .vt-footer__social {

    display: flex;

    justify-content: flex-end;

    align-items: center;
}


.mediafuturert .vt-footer__social a {

    width: 42px;

    height: 42px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0;

    color: rgba(255, 255, 255, 0.68);

    background:
        rgba(255, 255, 255, 0.055);

    border:
        1px solid rgba(255, 255, 255, 0.09);

    border-radius: 50%;

    text-decoration: none;

    transition:
        color 180ms ease,
        background 180ms ease,
        border-color 180ms ease,
        transform 180ms ease;
}


.mediafuturert .vt-footer__social a:hover {

    color: #ffffff;

    background: #ff0000;

    border-color: #ff0000;

    transform: translateY(-2px);
}


/*
 * Wichtig:
 * überschreibt Deine alte globale
 * .fa-youtube { color:#212121; }
 */

.mediafuturert .vt-footer__social .fa-youtube,
.mediafuturert .vt-footer__social .fab {

    color: currentColor !important;

    font-size: 1.05rem;
}


/* ==========================================================
   FOOTER BOTTOM
   ========================================================== */

.mediafuturert .vt-footer__bottom {

    width: calc(100% - 40px);

    max-width: 1284px;

    margin: 0 auto;

    padding:
        15px 0 18px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 24px;

    border-top:
        1px solid rgba(255, 255, 255, 0.075);

    color:
        rgba(255, 255, 255, 0.38);

    font-size: 0.69rem;

    line-height: 1.5;
}


.mediafuturert .vt-footer__claim {

    text-align: right;

    letter-spacing: 0.025em;
}


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

@media screen and (max-width: 991px) {

    .mediafuturert .vt-footer {

        margin-top: 42px;
    }


    .mediafuturert .vt-footer__main {

        grid-template-columns: 1fr;

        justify-items: center;

        gap: 22px;

        padding:
            32px 20px 24px;

        text-align: center;
    }


    .mediafuturert .vt-footer__brand-link {

        justify-content: center;
    }


    .mediafuturert .vt-footer__social {

        justify-content: center;
    }


    .mediafuturert .vt-footer__bottom {

        flex-direction: column;

        justify-content: center;

        gap: 4px;

        padding-bottom: 20px;

        text-align: center;
    }


    .mediafuturert .vt-footer__claim {

        text-align: center;
    }

}


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

@media screen and (max-width: 575px) {

    .mediafuturert .vt-footer__main {

        padding:
            28px 16px 22px;
    }


    .mediafuturert .vt-footer__brand-text small {

        white-space: normal;
    }


    .mediafuturert .vt-footer__navigation ul {

        gap: 1px 3px;
    }


    .mediafuturert .vt-footer__navigation a,
    .mediafuturert .vt-footer__cookie {

        min-height: 42px;

        padding:
            8px 9px;

        font-size:
            0.76rem;
    }


    .mediafuturert .vt-footer__bottom {

        width:
            calc(100% - 32px);
    }

}
/* ==========================================================
   UNIVERSAL AI DISCLOSURE
   FSC + Bootstrap Package
   ========================================================== */

.vt-ai-disclosure {

    width: fit-content;

    max-width: 100%;

    display: flex;

    align-items: center;

    gap: 7px;

    margin:
        0 0 10px auto;

    padding:
        6px 11px;

    color:
        var(--vt-navy-950);

    background:
        rgba(255, 255, 255, 0.96);

    border:
        1px solid var(--vt-border);

    border-radius:
        999px;

    box-shadow:
        0 3px 12px rgba(7, 20, 38, 0.07);

    font-size:
        0.72rem;

    font-weight:
        650;

    line-height:
        1.2;

    letter-spacing:
        0.01em;
}


.vt-ai-disclosure__icon {

    width: 21px;

    height: 21px;

    flex: 0 0 21px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    color:
        #071426;

    background:
        var(--vt-gold-400);

    border-radius:
        50%;

    font-size:
        0.55rem;

    font-weight:
        800;

    letter-spacing:
        -0.02em;
}


/* KI bearbeitet */

.vt-ai-disclosure--manipulated {

    background:
        #fffaf0;

    border-color:
        #e7cf9f;
}


/* Deepfake / besonders relevante Manipulation */

.vt-ai-disclosure--deepfake {

    color:
        #721c28;

    background:
        #fff3f5;

    border-color:
        #e2b0b9;
}


.vt-ai-disclosure--deepfake
.vt-ai-disclosure__icon {

    color:
        #ffffff;

    background:
        #a82f3d;
}


/* Mobile */

@media screen and (max-width: 575px) {

    .vt-ai-disclosure {

        margin-left: 0;

        margin-right: auto;

        font-size:
            0.69rem;
    }

}
/* ==========================================================
   VACATIONTESTER
   SHORT PAGE / STICKY FOOTER FIX
   ========================================================== */

html,
body {
    min-height: 100%;
}

body {
    min-height: 100svh;
}


/*
 * Header befindet sich außerhalb von .mediafuturert.
 * Desktop-Header ca. 72px.
 */
.mediafuturert {
    min-height: calc(100svh - 72px);

    display: flex;
    flex-direction: column;
}


/*
 * Content nimmt den freien Platz ein.
 */
.mediafuturert #content {
    flex: 1 0 auto;

    width: 100%;
}


/*
 * Footer wird bei kurzen Seiten nach unten gedrückt.
 */
.mediafuturert .vt-footer {
    flex: 0 0 auto;

    margin-top: auto;
}


/* Mobile Header etwas niedriger */

@media screen and (max-width: 991px) {

    .mediafuturert {
        min-height: calc(100svh - 70px);
    }

}


/* ==========================================================
   BACK TO TOP FIX
   verhindert linke / falsche Positionierung durch Alt-CSS
   ========================================================== */

#topButton {
    position: fixed !important;

    right: 18px !important;
    left: auto !important;

    bottom: 18px !important;
    top: auto !important;

    width: 42px !important;
    height: 42px !important;

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

    display: none;

    align-items: center;
    justify-content: center;

    color: #ffffff;

    background: rgba(8, 24, 44, 0.94) !important;

    border:
        1px solid rgba(255, 255, 255, 0.18) !important;

    border-radius: 50% !important;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.20);

    z-index: 9999;

    cursor: pointer;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}


#topButton:hover {
    background: #122f55 !important;

    transform: translateY(-2px);
}


#topButton svg {
    width: 22px;
    height: 22px;

    display: block;
}

/* ==========================================================
   AI IMAGE DISCLOSURE
   Bootstrap Package CardGroup
   ========================================================== */

.vt-card-media {
    position: relative;

    overflow: hidden;
}


/* Badge */

.vt-ai-badge {
    position: absolute;

    top: 12px;
    right: 12px;

    z-index: 10;

    display: inline-flex;

    align-items: center;

    gap: 6px;

    min-height: 30px;

    padding: 5px 10px 5px 6px;

    color: #071426;

    background: rgba(255, 255, 255, 0.94);

    border:
        1px solid rgba(255, 255, 255, 0.72);

    border-radius: 999px;

    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.17);

    font-size: 0.69rem;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.01em;

    pointer-events: none;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


.vt-ai-badge__icon {
    width: 20px;
    height: 20px;

    flex: 0 0 20px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    color: #071426;

    background:
        linear-gradient(
            135deg,
            #f2d58e,
            #d6ad5c
        );

    border-radius: 50%;

    font-size: 0.54rem;

    font-weight: 800;
}


.vt-ai-badge__label {
    white-space: nowrap;
}


/* Manipuliert */

.vt-ai-badge--manipulated {
    background:
        rgba(255, 249, 236, 0.96);
}


/* Deepfake */

.vt-ai-badge--deepfake {
    color: #ffffff;

    background:
        rgba(105, 23, 36, 0.94);

    border-color:
        rgba(255, 255, 255, 0.25);
}


.vt-ai-badge--deepfake
.vt-ai-badge__icon {
    color: #ffffff;

    background: #b42e42;
}


/* Mobile */

@media screen and (max-width: 575px) {

    .vt-ai-badge {
        top: 9px;
        right: 9px;

        min-height: 28px;

        padding:
            4px 9px 4px 5px;

        font-size:
            0.65rem;
    }

}
/* ==========================================================
   MOBILE NAV CHECKBOX
   Darf niemals sichtbar sein
   ========================================================== */

#responsive-nav {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;

    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;

    white-space: nowrap !important;

    border: 0 !important;

    opacity: 0 !important;

    pointer-events: none !important;
}

/* ==========================================================
   VACATIONTESTER HEADER V4
   ========================================================== */

.fixedheader {
    width: 100%;

    min-height: 74px;

    padding: 0 !important;

    background:
        rgba(8, 24, 44, 0.97);

    border-top: 0 !important;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.08);

    box-shadow:
        0 5px 24px rgba(4, 14, 28, 0.14);
}


.fixedheader > .container-fluid {
    width: 100%;

    max-width: 1440px;

    min-height: 74px;

    margin: 0 auto;

    padding:
        0 clamp(18px, 2.5vw, 34px);

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: clamp(24px, 4vw, 60px);
}


/* ==========================================================
   LOGO
   ========================================================== */

.fixedheader .logo {
    flex: 0 0 auto;

    min-height: 74px;

    display: flex;

    align-items: center;

    gap: 17px;

    padding: 0;
}


.fixedheader .logo > a {
    display: inline-flex;

    align-items: center;

    gap: 11px;

    color: #ffffff;

    font-size:
        clamp(1.25rem, 1.6vw, 1.7rem);

    font-weight: 700;

    line-height: 1;

    letter-spacing: -0.035em;

    text-decoration: none;

    white-space: nowrap;
}


.fixedheader .logo > a:hover {
    color: #ffffff;
}


.fixedheader .logo img {
    width: 44px;
    height: 44px;

    max-width: 44px;
    max-height: 44px;

    padding: 0;

    object-fit: contain;
}


/* Claim */

.fixedheader .secondtitle {
    margin: 1px 0 0;

    padding-left: 17px;

    border-left:
        1px solid rgba(255, 255, 255, 0.15);

    color:
        rgba(255, 255, 255, 0.58);

    font-size:
        0.61rem;

    font-weight:
        600;

    line-height:
        1.4;

    letter-spacing:
        0.11em;

    text-indent: 0;

    text-transform: uppercase;

    white-space: nowrap;
}


/* ==========================================================
   NAVIGATION
   ========================================================== */

.fixedheader .nav {
    flex: 1 1 auto;

    min-width: 0;

    padding: 0;
}


.fixedheader .menu2 {
    width: 100%;

    display: flex;

    justify-content: flex-end;

    margin: 0;
}


.fixedheader .menu2 > .level1 {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 6px;

    margin: 0;

    padding: 0;
}


.fixedheader .menu2 ul.level1 > li > a,
.fixedheader .menu2 ul.level1 > li > .inner > a,
.fixedheader .menu2 ul.level1 > li > .inner_a > a {
    min-height: 44px;

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 0 13px;

    color:
        rgba(255, 255, 255, 0.84);

    border-radius: 10px;

    font-family:
        "Open Sans",
        system-ui,
        sans-serif;

    font-size:
        0.85rem;

    font-weight:
        600;

    line-height: 1;

    text-decoration: none;

    white-space: nowrap;
}


.fixedheader .menu2 ul.level1 > li > a:hover,
.fixedheader .menu2 ul.level1 > li > a:focus-visible {
    color: #ffffff;

    background:
        rgba(255, 255, 255, 0.075);

    text-decoration: none !important;
}


.fixedheader .menu2 i {
    margin: 0;

    line-height: 1;
}


.fixedheader .menu2 .fa-sort-down {
    position: relative;

    top: -2px;

    margin-left: 1px;

    color: var(--vt-gold-400);
}


/* Zwischen Desktop und Tablet Claim ausblenden */

@media screen and (max-width: 1280px) {

    .fixedheader .secondtitle {
        display: none;
    }

}


/* Mobile */

@media screen and (max-width: 991px) {

    .fixedheader > .container-fluid {
        min-height: 70px;

        padding:
            0 15px;

        display: block;
    }


    .fixedheader .logo {
        min-height: 70px;
    }


    .fixedheader .logo img {
        width: 40px;
        height: 40px;
    }

}/* ==========================================================
   VACATIONTESTER 2026
   WS SLIDER / HERO FINAL DESIGN
   ========================================================== */


/* ----------------------------------------------------------
   1. TYPO3 FRAME KOMPLETT ENTSCHÄRFEN
   ---------------------------------------------------------- */

.mediafuturert .frame-type-ws_slider {
    width: 100%;

    margin:
        clamp(22px, 3vw, 40px)
        0
        clamp(48px, 5vw, 72px);

    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;

    overflow: visible !important;
}


.mediafuturert .frame-type-ws_slider > .frame-container {
    width: 100%;

    max-width: none !important;

    margin: 0 !important;

    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;
}


/* Falls Bootstrap Package einen inneren Container erzeugt */

.mediafuturert .frame-type-ws_slider .container,
.mediafuturert .frame-type-ws_slider .container-fluid {
    max-width: none !important;

    margin: 0 !important;

    padding: 0 !important;
}


/* ----------------------------------------------------------
   2. FLEXSLIDER
   ---------------------------------------------------------- */

.mediafuturert .frame-type-ws_slider .flexslider {
    position: relative;

    width: 100%;

    margin: 0;

    padding: 0;

    overflow: hidden;

    background: #071426;

    border: 0 !important;

    border-radius: 24px;

    box-shadow:
        0 18px 55px rgba(7, 20, 38, 0.13);
}


/* ----------------------------------------------------------
   3. SLIDE
   ---------------------------------------------------------- */

.mediafuturert .frame-type-ws_slider .slides,
.mediafuturert .frame-type-ws_slider .slides > li {
    margin: 0;

    padding: 0;
}


.mediafuturert .frame-type-ws_slider .slidercontent {
    position: relative;

    width: 100%;

    margin: 0;

    padding: 0;

    overflow: hidden;

    background: #071426;
}


/* ----------------------------------------------------------
   4. HERO-BILD
   ---------------------------------------------------------- */

.mediafuturert .frame-type-ws_slider .slides img {
    width: 100%;

    height: clamp(390px, 34vw, 520px) !important;

    display: block;

    object-fit: cover;

    object-position: center;

    border-radius: 0 !important;

    transform: scale(1.001);

    transition:
        transform 8s ease;
}


/* ganz dezenter Premium-Zoom */

.mediafuturert
.frame-type-ws_slider
.flex-active-slide img {
    transform: scale(1.025);
}


/* ----------------------------------------------------------
   5. LEICHTER BILDVERLAUF
   verbessert Textlesbarkeit
   ---------------------------------------------------------- */

.mediafuturert
.frame-type-ws_slider
.slidercontent::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(5, 16, 30, 0.24) 0%,
            rgba(5, 16, 30, 0.06) 40%,
            rgba(5, 16, 30, 0) 68%
        );
}


/* ----------------------------------------------------------
   6. CAPTION
   ---------------------------------------------------------- */

.mediafuturert
.frame-type-ws_slider
.caption-wrapper {
    position: absolute;

    left: clamp(22px, 4vw, 48px);

    bottom: clamp(22px, 4vw, 42px);

    z-index: 5;

    width: min(390px, calc(100% - 44px));

    max-width: 390px;

    margin: 0;

    padding:
        clamp(20px, 2.5vw, 28px);

    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            rgba(7, 20, 38, 0.91),
            rgba(15, 34, 58, 0.88)
        );

    border:
        1px solid rgba(255, 255, 255, 0.13);

    border-radius: 18px;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.20);

    backdrop-filter:
        blur(14px) saturate(120%);

    -webkit-backdrop-filter:
        blur(14px) saturate(120%);
}


/* ----------------------------------------------------------
   7. CAPTION TEXT
   ---------------------------------------------------------- */

.mediafuturert
.frame-type-ws_slider
.caption-text {
    text-align: left;
}


.mediafuturert
.frame-type-ws_slider
.caption-title {
    margin:
        0 0 14px;

    color: #ffffff;

    font-size:
        clamp(1.05rem, 1.5vw, 1.35rem);

    font-weight: 700;

    line-height: 1.35;

    letter-spacing: -0.015em;
}


.mediafuturert
.frame-type-ws_slider
.caption-body {
    color:
        rgba(255, 255, 255, 0.82);

    font-size:
        0.97rem;

    line-height:
        1.65;
}


.mediafuturert
.frame-type-ws_slider
.caption-body p:last-child {
    margin-bottom: 0;
}


/* ----------------------------------------------------------
   8. BUTTON
   ---------------------------------------------------------- */

.mediafuturert
.frame-type-ws_slider
.caption-link {
    margin-top: 20px;

    text-align: left;
}


.mediafuturert
.frame-type-ws_slider
.caption-link a {
    min-height: 44px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding:
        9px 18px;

    color: #071426 !important;

    background:
        linear-gradient(
            135deg,
            #f2d486 0%,
            #deb45e 100%
        );

    border: 0;

    border-radius: 999px;

    box-shadow:
        0 7px 20px rgba(0, 0, 0, 0.16);

    font-size:
        0.88rem;

    font-weight:
        700;

    line-height: 1;

    text-decoration: none !important;

    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        background 180ms ease;
}


.mediafuturert
.frame-type-ws_slider
.caption-link a:hover {
    color: #071426 !important;

    background:
        linear-gradient(
            135deg,
            #f7dda0 0%,
            #e7c170 100%
        );

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.21);

    transform:
        translateY(-2px);
}


/* ----------------------------------------------------------
   9. SLIDER-NAVIGATION
   ---------------------------------------------------------- */

.mediafuturert
.frame-type-ws_slider
.flex-direction-nav a {
    width: 44px;

    height: 44px;

    margin-top: -22px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #ffffff !important;

    background:
        rgba(7, 20, 38, 0.62);

    border:
        1px solid rgba(255, 255, 255, 0.16);

    border-radius: 50%;

    opacity: 0;

    text-shadow: none;

    backdrop-filter:
        blur(10px);

    transition:
        opacity 180ms ease,
        transform 180ms ease,
        background 180ms ease;
}


.mediafuturert
.frame-type-ws_slider:hover
.flex-direction-nav a {
    opacity: 1;
}


.mediafuturert
.frame-type-ws_slider
.flex-direction-nav a:hover {
    background:
        rgba(7, 20, 38, 0.88);

    transform:
        scale(1.04);
}


.mediafuturert
.frame-type-ws_slider
.flex-direction-nav .flex-prev {
    left: 16px !important;
}


.mediafuturert
.frame-type-ws_slider
.flex-direction-nav .flex-next {
    right: 16px !important;
}


/* ----------------------------------------------------------
   10. PUNKTE / CONTROL NAV
   ---------------------------------------------------------- */

.mediafuturert
.frame-type-ws_slider
.flex-control-nav {
    bottom: 14px;

    z-index: 8;
}


.mediafuturert
.frame-type-ws_slider
.flex-control-paging li a {
    width: 7px;

    height: 7px;

    background:
        rgba(255, 255, 255, 0.52);

    box-shadow: none;
}


.mediafuturert
.frame-type-ws_slider
.flex-control-paging li a.flex-active {
    width: 20px;

    border-radius: 999px;

    background: #ffffff;
}


/* ----------------------------------------------------------
   11. TABLET
   ---------------------------------------------------------- */

@media screen and (max-width: 991px) {

    .mediafuturert .frame-type-ws_slider {
        margin-top: 18px;

        margin-bottom: 42px;
    }


    .mediafuturert
    .frame-type-ws_slider
    .flexslider {
        border-radius: 20px;
    }


    .mediafuturert
    .frame-type-ws_slider
    .slides img {
        height: 470px !important;
    }


    .mediafuturert
    .frame-type-ws_slider
    .caption-wrapper {
        left: 16px;

        bottom: 16px;

        width:
            min(390px, calc(100% - 32px));

        padding: 20px;
    }

}


/* ----------------------------------------------------------
   12. MOBILE
   ---------------------------------------------------------- */

@media screen and (max-width: 575px) {

    .mediafuturert .frame-type-ws_slider {
        margin-top: 12px;

        margin-bottom: 32px;
    }


    .mediafuturert
    .frame-type-ws_slider
    .flexslider {
        border-radius: 16px;
    }


    .mediafuturert
    .frame-type-ws_slider
    .slides img {
        height: 480px !important;
    }


    .mediafuturert
    .frame-type-ws_slider
    .slidercontent::after {
        background:
            linear-gradient(
                0deg,
                rgba(5, 16, 30, 0.48) 0%,
                rgba(5, 16, 30, 0.04) 65%
            );
    }


    .mediafuturert
    .frame-type-ws_slider
    .caption-wrapper {
        left: 10px;

        right: 10px;

        bottom: 10px;

        width: auto;

        max-width: none;

        padding:
            17px 18px;

        border-radius: 14px;
    }


    .mediafuturert
    .frame-type-ws_slider
    .caption-title {
        font-size: 1.05rem;
    }


    .mediafuturert
    .frame-type-ws_slider
    .caption-body {
        font-size: 0.88rem;

        line-height: 1.55;
    }


    .mediafuturert
    .frame-type-ws_slider
    .caption-link {
        margin-top: 14px;
    }


    .mediafuturert
    .frame-type-ws_slider
    .flex-direction-nav {
        display: none;
    }

}


/* ----------------------------------------------------------
   13. REDUCED MOTION
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .mediafuturert
    .frame-type-ws_slider
    .slides img {
        transform: none !important;

        transition: none !important;
    }

}
/* ==========================================================
   FLEXSLIDER NAVIGATION FIX
   Versteckt Previous / Next Text und zeichnet eigene Pfeile
   ========================================================== */

.mediafuturert
.frame-type-ws_slider
.flex-direction-nav a {

    font-size: 0 !important;

    text-indent: -9999px !important;

    overflow: hidden !important;

    color: transparent !important;

    position: absolute;
}


/* alte FlexSlider-Icons komplett neutralisieren */

.mediafuturert
.frame-type-ws_slider
.flex-direction-nav a::before {

    content: "" !important;

    position: absolute;

    top: 50%;
    left: 50%;

    width: 10px;
    height: 10px;

    border-top: 2px solid #ffffff;
    border-right: 2px solid #ffffff;

    font-family: initial !important;

    font-size: 0 !important;

    transform-origin: center;
}


/* Links */

.mediafuturert
.frame-type-ws_slider
.flex-direction-nav .flex-prev::before {

    transform:
        translate(-35%, -50%)
        rotate(-135deg);
}


/* Rechts */

.mediafuturert
.frame-type-ws_slider
.flex-direction-nav .flex-next::before {

    transform:
        translate(-65%, -50%)
        rotate(45deg);
}