/* ==========================================================
   VACATION TESTER DESIGN SYSTEM
   ========================================================== */

:root {
    --vt-navy-950: #061325;
    --vt-navy-900: #0b1f36;
    --vt-navy-800: #142e4d;

    --vt-gold-500: #d8ad56;
    --vt-gold-400: #eccb82;

    --vt-white: #ffffff;

    --vt-bg: #f5f7fa;
    --vt-surface: #ffffff;
    --vt-surface-soft: #f6f8fa;

    --vt-text: #10223d;
    --vt-text-muted: #627187;

    --vt-border: #e2e7ec;

    --vt-container: 1380px;
    --vt-content: 1180px;

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

    --vt-shadow-sm:
        0 6px 24px rgba(7, 20, 38, .07);

    --vt-shadow-md:
        0 18px 48px rgba(7, 20, 38, .11);

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


/* ==========================================================
   SITE
   ========================================================== */

.vt-site {
    min-height: 100svh;

    display: flex;
    flex-direction: column;

    color: var(--vt-text);

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


.vt-main {
    flex: 1 0 auto;

    width: 100%;
}


.vt-main__container {
    width: min(
        calc(100% - 40px),
        var(--vt-container)
    );

    margin-inline: auto;
}


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

.vt-header {
    position: sticky;

    top: 0;

    z-index: 1000;

    width: 100%;

    color: var(--vt-white);

    background:
        rgba(6, 19, 37, .96);

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

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

    backdrop-filter:
        blur(16px);

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


.vt-header__inner {
    width: min(
        calc(100% - 40px),
        var(--vt-container)
    );

    min-height: 76px;

    margin-inline: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 42px;
}


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

.vt-brand {
    flex: 0 0 auto;

    display: inline-flex;

    align-items: center;

    gap: 12px;

    color: #fff;

    text-decoration: none;
}


.vt-brand:hover {
    color: #fff;

    text-decoration: none;
}


.vt-brand__logo {
    width: 46px;

    height: 46px;

    object-fit: contain;
}


.vt-brand__text {
    display: flex;

    flex-direction: column;

    gap: 3px;
}


.vt-brand__name {
    color: #fff;

    font-size:
        clamp(1.2rem, 1.5vw, 1.55rem);

    line-height: 1;

    font-weight: 750;

    letter-spacing: -.035em;
}


.vt-brand__claim {
    color:
        rgba(255,255,255,.52);

    font-size: .61rem;

    font-weight: 650;

    line-height: 1.3;

    letter-spacing: .1em;

    text-transform: uppercase;
}


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

.vt-nav {
    flex: 1 1 auto;

    min-width: 0;
}


.vt-nav__toggle {
    display: none;
}


.vt-nav__panel {
    display: flex;

    justify-content: flex-end;
}


.vt-nav__level {
    margin: 0;

    padding: 0;

    list-style: none;
}


.vt-nav__level--1 {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 4px;
}


.vt-nav__item {
    position: relative;
}


.vt-nav__link {
    min-height: 46px;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding:
        0 14px;

    color:
        rgba(255,255,255,.84);

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

    font-size:
        .88rem;

    font-weight:
        650;

    line-height:
        1;

    text-decoration:
        none;

    white-space:
        nowrap;

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


.vt-nav__link:hover,
.vt-nav__item.is-current > .vt-nav__link,
.vt-nav__item.is-active > .vt-nav__link {
    color: #fff;

    background:
        rgba(255,255,255,.075);

    text-decoration:
        none;
}


.vt-nav__item.is-current > .vt-nav__link {
    box-shadow:
        inset 0 -2px 0
        var(--vt-gold-400);
}


.vt-nav__icon {
    width: 21px;

    height: 21px;

    object-fit:
        contain;
}


.vt-nav__chevron {
    width: 7px;

    height: 7px;

    margin-top: -4px;

    border-right:
        1.5px solid
        var(--vt-gold-400);

    border-bottom:
        1.5px solid
        var(--vt-gold-400);

    transform:
        rotate(45deg);
}


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

.vt-mega {
    position: absolute;

    top:
        calc(100% + 10px);

    right: 0;

    z-index: 100;

    width:
        min(760px, 80vw);

    padding-top: 8px;

    visibility: hidden;

    opacity: 0;

    transform:
        translateY(-6px);

    pointer-events: none;

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


.vt-nav__item:hover > .vt-mega,
.vt-nav__item:focus-within > .vt-mega {
    visibility: visible;

    opacity: 1;

    transform:
        translateY(0);

    pointer-events: auto;
}


.vt-mega__inner {
    padding: 22px;

    background:
        rgba(255,255,255,.985);

    border:
        1px solid
        rgba(7,20,38,.08);

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

    box-shadow:
        0 24px 70px
        rgba(5,18,35,.20);
}


.vt-nav__level--2 {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0,1fr));

    gap: 20px;
}


.vt-nav__link-level2 {
    display: flex;

    align-items: center;

    gap: 8px;

    padding-bottom: 7px;

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

    font-size:
        .89rem;

    font-weight:
        750;

    line-height:
        1.3;

    text-decoration:
        none;
}


.vt-nav__link-level2:hover {
    color:
        var(--vt-navy-800);
}


.vt-nav__level--3 {
    display: grid;

    gap: 3px;
}


.vt-nav__link-level3 {
    display: block;

    padding:
        6px 8px;

    color:
        var(--vt-text-muted);

    border-radius:
        8px;

    font-size:
        .79rem;

    line-height:
        1.35;

    text-decoration:
        none;

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


.vt-nav__link-level3:hover {
    color:
        var(--vt-navy-950);

    background:
        var(--vt-surface-soft);
}


/* ==========================================================
   GRID
   ========================================================== */

.vt-grid-section {
    margin-block:
        clamp(28px,4vw,58px);
}


.vt-grid {
    display: grid;

    width: 100%;

    gap:
        clamp(18px,2vw,28px);
}


.vt-grid--4 {
    grid-template-columns:
        repeat(4,minmax(0,1fr));
}


.vt-grid__item {
    min-width: 0;
}


/* ==========================================================
   AI BADGE
   ========================================================== */

.vt-ai-badge {
    position: absolute;

    top: 12px;

    right: 12px;

    z-index: 20;

    display: inline-flex;

    align-items: center;

    gap: 6px;

    min-height: 30px;

    padding:
        5px 10px 5px 6px;

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

    background:
        rgba(255,255,255,.94);

    border:
        1px solid
        rgba(255,255,255,.75);

    border-radius:
        999px;

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

    font-size:
        .69rem;

    font-weight:
        750;

    line-height:
        1;

    backdrop-filter:
        blur(10px);

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

    pointer-events:
        none;
}


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

    height: 20px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 20px;

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

    background:
        linear-gradient(
            135deg,
            #f1d28a,
            #d7ad56
        );

    border-radius: 50%;

    font-size: .53rem;

    font-weight: 850;
}


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

    background:
        rgba(112,28,42,.95);
}


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

.vt-footer {
    flex: 0 0 auto;

    width: 100%;

    margin-top:
        clamp(48px,6vw,84px);

    color:
        rgba(255,255,255,.72);

    background:
        radial-gradient(
            circle at 10% 0,
            rgba(44,113,180,.13),
            transparent 30rem
        ),
        var(--vt-navy-950);

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


.vt-footer__main {
    width: min(
        calc(100% - 40px),
        var(--vt-container)
    );

    margin-inline: auto;

    padding:
        34px 0 28px;

    display: grid;

    grid-template-columns:
        minmax(260px,1fr)
        auto
        minmax(100px,1fr);

    align-items: center;

    gap: 32px;
}


.vt-footer__brand-link {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    color: #fff;

    text-decoration: none;
}


.vt-footer__brand-link:hover {
    color: #fff;

    text-decoration: none;
}


.vt-footer__brand-link img {
    width: 44px;

    height: 44px;

    object-fit: contain;
}


.vt-footer__brand-text {
    display: flex;

    flex-direction: column;
}


.vt-footer__brand-text strong {
    color: #fff;

    font-size: 1rem;

    line-height: 1.3;
}


.vt-footer__brand-text small {
    color:
        rgba(255,255,255,.45);

    font-size: .61rem;

    letter-spacing: .08em;

    text-transform: uppercase;
}


.vt-footer__navigation ul {
    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 2px;

    margin: 0;

    padding: 0;

    list-style: none;
}


.vt-footer__navigation li {
    margin: 0;

    padding: 0;

    list-style: none;
}


.vt-footer__navigation a,
.vt-footer__cookie {
    min-height: 40px;

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding:
        7px 11px;

    color:
        rgba(255,255,255,.7);

    background:
        transparent;

    border: 0;

    border-radius: 9px;

    font-family: inherit;

    font-size: .78rem;

    font-weight: 650;

    text-decoration: none;

    cursor: pointer;

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


.vt-footer__navigation a:hover,
.vt-footer__cookie:hover {
    color: #fff;

    background:
        rgba(255,255,255,.07);

    text-decoration: none;
}


.vt-footer__social {
    display: flex;

    justify-content: flex-end;
}


.vt-footer__social a {
    width: 42px;

    height: 42px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    color:
        rgba(255,255,255,.7);

    background:
        rgba(255,255,255,.055);

    border:
        1px solid
        rgba(255,255,255,.09);

    border-radius: 50%;

    text-decoration: none;

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


.vt-footer__social a:hover {
    color: #fff;

    background: #e62117;

    transform:
        translateY(-2px);
}


.vt-footer__bottom {
    width: min(
        calc(100% - 40px),
        var(--vt-container)
    );

    margin-inline: auto;

    padding:
        16px 0 20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    color:
        rgba(255,255,255,.36);

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

    font-size:
        .69rem;
}


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

.vt-back-to-top {
    position: fixed;

    right: 20px;

    bottom: 20px;

    z-index: 900;

    width: 44px;

    height: 44px;

    padding: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    background:
        rgba(6,19,37,.92);

    border:
        1px solid
        rgba(255,255,255,.16);

    border-radius: 50%;

    box-shadow:
        0 9px 28px
        rgba(0,0,0,.18);

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(10px);

    cursor: pointer;

    transition:
        opacity var(--vt-transition),
        visibility var(--vt-transition),
        transform var(--vt-transition),
        background var(--vt-transition);

    backdrop-filter:
        blur(10px);
}


.vt-back-to-top.is-visible {
    opacity: 1;

    visibility: visible;

    transform:
        translateY(0);
}


.vt-back-to-top:hover {
    background:
        var(--vt-navy-800);
}


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

@media (max-width: 1100px) {

    .vt-grid--4 {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}


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

@media (max-width: 991px) {

    .vt-header__inner {
        min-height: 70px;
    }


    .vt-brand__claim {
        display: none;
    }


    .vt-nav {
        flex: 0 0 auto;
    }


    .vt-nav__toggle {
        width: 44px;

        height: 44px;

        display: inline-flex;

        align-items: center;

        justify-content: center;

        padding: 0;

        color: #fff;

        background:
            rgba(255,255,255,.06);

        border:
            1px solid
            rgba(255,255,255,.10);

        border-radius:
            11px;

        cursor: pointer;
    }


    .vt-nav__toggle-lines {
        width: 20px;

        display: grid;

        gap: 4px;
    }


    .vt-nav__toggle-lines span {
        width: 100%;

        height: 2px;

        display: block;

        background: #fff;

        border-radius: 999px;

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


    .vt-nav.is-open
    .vt-nav__toggle-lines span:nth-child(1) {
        transform:
            translateY(6px)
            rotate(45deg);
    }


    .vt-nav.is-open
    .vt-nav__toggle-lines span:nth-child(2) {
        opacity: 0;
    }


    .vt-nav.is-open
    .vt-nav__toggle-lines span:nth-child(3) {
        transform:
            translateY(-6px)
            rotate(-45deg);
    }


    .vt-nav__panel {
        position: fixed;

        top: 70px;

        right: 0;

        bottom: 0;

        left: 0;

        display: block;

        padding:
            18px 20px 32px;

        overflow-y: auto;

        color:
            var(--vt-text);

        background:
            rgba(255,255,255,.99);

        opacity: 0;

        visibility: hidden;

        transform:
            translateY(-8px);

        pointer-events: none;

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


    .vt-nav.is-open
    .vt-nav__panel {
        opacity: 1;

        visibility: visible;

        transform:
            translateY(0);

        pointer-events: auto;
    }


    .vt-nav__level--1 {
        display: grid;

        gap: 6px;
    }


    .vt-nav__link {
        width: 100%;

        min-height: 48px;

        justify-content:
            flex-start;

        color:
            var(--vt-text);

        background:
            var(--vt-surface-soft);
    }


    .vt-nav__link:hover {
        color:
            var(--vt-navy-950);

        background:
            #edf1f5;
    }


    .vt-mega {
        position: static;

        width: 100%;

        padding-top: 7px;

        visibility: visible;

        opacity: 1;

        transform: none;

        pointer-events: auto;
    }


    .vt-mega__inner {
        padding: 14px;

        background:
            var(--vt-surface-soft);

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

        box-shadow: none;
    }


    .vt-nav__level--2 {
        grid-template-columns: 1fr;
    }


    .vt-footer__main {
        grid-template-columns: 1fr;

        justify-items: center;

        text-align: center;
    }


    .vt-footer__social {
        justify-content: center;
    }

}


/* ==========================================================
   PHONE
   ========================================================== */

@media (max-width: 640px) {

    .vt-main__container,
    .vt-header__inner,
    .vt-footer__main,
    .vt-footer__bottom {
        width:
            calc(100% - 28px);
    }


    .vt-brand__logo {
        width: 40px;

        height: 40px;
    }


    .vt-brand__name {
        font-size: 1.2rem;
    }


    .vt-grid--4 {
        grid-template-columns: 1fr;
    }


    .vt-footer__bottom {
        flex-direction: column;

        gap: 5px;

        text-align: center;
    }


    .vt-footer__bottom-claim {
        text-align: center;
    }

}


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

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

    .vt-site *,
    .vt-site *::before,
    .vt-site *::after {
        scroll-behavior: auto !important;

        transition-duration: .01ms !important;

        animation-duration: .01ms !important;
    }

}


/* ==========================================================
   LEGACY DESIGN COMPATIBILITY
   ========================================================== */

/*
 * Bestehende VacationTester-2026 Content-Styles verwenden
 * .mediafuturert, #content und #maincontent.
 *
 * Der neue komponentenbasierte Aufbau behält diese Hooks,
 * damit bestehende Content-Elemente nicht auf Bootstrap-
 * Standarddarstellung zurückfallen.
 */

.vt-site__body {
    flex: 1 0 auto;

    width: 100%;

    display: flex;
    flex-direction: column;
}


.vt-site__body > #content {
    flex: 1 0 auto;

    width: 100%;
}


/*
 * Keine zusätzliche Layoutbreite erzwingen.
 * Bestehendes VacationTester-2026 CSS darf #maincontent
 * weiterhin kontrollieren.
 */

.mediafuturert .vt-main__container {
    max-width: none;
}


/*
 * Bilder niemals über ihren verfügbaren Bereich hinaus.
 */

.mediafuturert img {
    max-width: 100%;
    height: auto;
}


/* VT NAVIGATION FIX START */

/* ==========================================================
   VACATION TESTER - DESKTOP MEGA NAVIGATION
   ========================================================== */

@media (min-width: 992px) {

    /*
     * Die komplette Hauptnavigation nutzt die volle
     * Header-Höhe. Dadurch entsteht KEINE Hover-Lücke
     * zwischen Hauptmenü und Dropdown.
     */

    .vt-site .vt-nav {
        align-self: stretch;

        display: flex;

        align-items: stretch;

        justify-content: flex-end;
    }


    .vt-site .vt-nav__panel {
        align-self: stretch;

        display: flex;

        align-items: stretch;

        justify-content: flex-end;
    }


    .vt-site .vt-nav__level--1 {
        align-items: stretch;

        height: 100%;
    }


    .vt-site .vt-nav__item {
        position: relative;

        display: flex;

        align-items: stretch;
    }


    .vt-site .vt-nav__link {
        min-height: 76px;

        display: flex;

        align-items: center;

        gap: 8px;

        padding:
            0 17px;

        border-radius: 0;

        position: relative;
    }


    /*
     * Dezenter Hover-/Aktivzustand
     */

    .vt-site .vt-nav__link::after {
        content: "";

        position: absolute;

        right: 17px;
        bottom: 0;
        left: 17px;

        height: 2px;

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

        opacity: 0;

        transform:
            scaleX(.4);

        transform-origin:
            center;

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


    .vt-site .vt-nav__item:hover > .vt-nav__link::after,
    .vt-site .vt-nav__item:focus-within > .vt-nav__link::after {
        opacity: 1;

        transform:
            scaleX(1);
    }


    /*
     * Wichtig:
     *
     * top:100% statt calc(100% + ...).
     * Das Dropdown beginnt direkt am Ende des LI.
     *
     * Der Abstand wird INNERHALB des Mega-Menüs
     * über padding-top erzeugt. Damit bleibt die
     * komplette Fläche hoverbar.
     */

    .vt-site .vt-mega {
        position: absolute;

        top: 100%;
        right: 0;

        z-index: 2000;

        width:
            min(860px, calc(100vw - 40px));

        margin: 0;

        padding-top: 10px;

        visibility: hidden;

        opacity: 0;

        transform:
            translateY(-4px);

        pointer-events: none;

        transition:
            opacity 150ms ease,
            transform 150ms ease,
            visibility 150ms ease;
    }


    /*
     * Zusätzliche unsichtbare Hover-Brücke.
     */

    .vt-site .vt-mega::before {
        content: "";

        position: absolute;

        top: 0;
        right: 0;
        left: 0;

        height: 12px;
    }


    .vt-site .vt-nav__item:hover > .vt-mega,
    .vt-site .vt-nav__item:focus-within > .vt-mega,
    .vt-site .vt-mega:hover {
        visibility: visible;

        opacity: 1;

        transform:
            translateY(0);

        pointer-events: auto;
    }


    /*
     * Premium Mega Menu Oberfläche
     */

    .vt-site .vt-mega__inner {
        padding:
            26px 28px 28px;

        background:
            rgba(255,255,255,.985);

        border:
            1px solid
            rgba(7,20,38,.08);

        border-radius:
            0 0 18px 18px;

        box-shadow:
            0 24px 65px
            rgba(5,18,35,.20);

        backdrop-filter:
            blur(18px);

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


    /*
     * Drei Hauptspalten wie bei der alten Navigation.
     * Weitere Kontinente umbrechen automatisch in
     * die nächste Zeile.
     */

    .vt-site .vt-nav__level--2 {
        display: grid;

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        align-items: start;

        gap:
            28px 36px;
    }


    .vt-site .vt-nav__item-level2 {
        min-width: 0;
    }


    /*
     * Kategorie / Kontinent
     */

    .vt-site .vt-nav__link-level2 {
        min-height: 34px;

        display: flex;

        align-items: center;

        gap: 9px;

        padding:
            0 0 8px;

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

        border-bottom:
            1px solid
            rgba(7,20,38,.08);

        font-size:
            .86rem;

        font-weight:
            750;

        line-height:
            1.25;

        text-decoration: none;
    }


    .vt-site .vt-nav__link-level2:hover {
        color:
            #b78a34;

        text-decoration: none;
    }


    .vt-site .vt-nav__level2-icon:empty,
    .vt-site .vt-nav__level3-icon:empty {
        display: none;
    }


    /*
     * Flaggen / Navigation Icons
     */

    .vt-site .vt-nav__icon {
        flex:
            0 0 auto;

        display: block;

        object-fit: contain;
    }


    .vt-site .vt-nav__flag {
        width: 28px;

        max-width: 28px;

        height: 19px;

        object-fit: cover;

        border:
            1px solid
            rgba(7,20,38,.10);

        border-radius: 3px;

        box-shadow:
            0 2px 5px
            rgba(7,20,38,.08);
    }


    .vt-site .vt-nav__flag--small {
        width: 22px;

        max-width: 22px;

        height: 15px;
    }


    /*
     * Länder / Level 3
     */

    .vt-site .vt-nav__level--3 {
        display: grid;

        gap: 2px;

        margin-top: 7px;
    }


    .vt-site .vt-nav__link-level3 {
        min-height: 30px;

        display: flex;

        align-items: center;

        gap: 8px;

        padding:
            6px 8px;

        margin-left: -8px;

        color:
            #596b84;

        border-radius: 7px;

        font-size:
            .78rem;

        font-weight:
            500;

        line-height:
            1.3;

        text-decoration: none;

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


    .vt-site .vt-nav__link-level3:hover {
        color:
            var(--vt-navy-950);

        background:
            #f3f6f9;

        transform:
            translateX(2px);

        text-decoration: none;
    }


    /*
     * FontAwesome Icons
     */

    .vt-site .vt-nav__fa-icon {
        flex:
            0 0 auto;

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

        font-size:
            .82rem;
    }


    /*
     * Pfeil im Hauptmenü
     */

    .vt-site .vt-nav__chevron {
        width: 7px;

        height: 7px;

        margin:
            -4px 0 0 2px;

        border-right:
            1.5px solid
            var(--vt-gold-400);

        border-bottom:
            1.5px solid
            var(--vt-gold-400);

        transform:
            rotate(45deg);

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


    .vt-site .vt-nav__item:hover
    > .vt-nav__link
    .vt-nav__chevron,

    .vt-site .vt-nav__item:focus-within
    > .vt-nav__link
    .vt-nav__chevron {

        margin-top: 3px;

        transform:
            rotate(225deg);
    }

}


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

@media (max-width: 991px) {

    /*
     * Auf Mobile bleiben die Unterebenen sichtbar.
     * Die Navigation ist dort ohnehin ein eigenes Panel.
     */

    .vt-site .vt-mega {
        position: static;

        width: 100%;

        margin: 6px 0 0;

        padding: 0;

        visibility: visible;

        opacity: 1;

        transform: none;

        pointer-events: auto;
    }


    .vt-site .vt-mega__inner {
        padding:
            13px;

        border-radius:
            12px;

        box-shadow: none;
    }


    .vt-site .vt-nav__level--2 {
        grid-template-columns:
            1fr;

        gap: 16px;
    }


    .vt-site .vt-nav__link-level2 {
        display: flex;

        align-items: center;

        gap: 8px;
    }


    .vt-site .vt-nav__link-level3 {
        display: flex;

        align-items: center;

        gap: 8px;
    }


    .vt-site .vt-nav__flag {
        width: 25px;

        height: 17px;

        object-fit: cover;

        border-radius: 3px;
    }

}

/* VT NAVIGATION FIX END */



/* VT DETAIL PAGE START */

/* ==========================================================
   VACATION TESTER
   GENERIC DETAIL PAGE SYSTEM

   Muss für Kontinente, Länder, Reiseziele usw. funktionieren.
   Keine inhaltsspezifischen nth-child-Annahmen.
   ========================================================== */

.vt-site .vt-page--detail {
    width: 100%;
    padding:
        clamp(32px, 4vw, 64px)
        0
        clamp(64px, 7vw, 110px);
}


/* ==========================================================
   EDITORIAL CONTENT
   ========================================================== */

.vt-site .vt-editorial {
    width: 100%;
}


.vt-site .vt-editorial > .frame {
    width: 100%;
    margin:
        0 0
        clamp(34px, 4.5vw, 64px);
}


/*
 * Normale Textinhalte nicht über die komplette
 * Bildschirmbreite ziehen.
 */

.vt-site .vt-editorial
.frame-type-text,
.vt-site .vt-editorial
.frame-type-header {
    max-width: 1120px;
    margin-right: auto;
    margin-left: auto;
}


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

.vt-site .vt-page--detail h1 {
    margin:
        0 0
        clamp(18px, 2vw, 28px);

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

    font-size:
        clamp(2.25rem, 4.4vw, 4.15rem);

    font-weight: 740;

    line-height: 1.02;

    letter-spacing: -.045em;
}


.vt-site .vt-page--detail h2 {
    margin:
        clamp(42px, 5vw, 72px)
        0 22px;

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

    font-size:
        clamp(1.75rem, 3vw, 2.65rem);

    font-weight: 730;

    line-height: 1.1;

    letter-spacing: -.035em;
}


.vt-site .vt-page--detail h3 {
    margin:
        30px 0 14px;

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

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

    font-weight: 720;

    line-height: 1.18;
}


.vt-site .vt-editorial p,
.vt-site .vt-editorial li {
    color:
        #40546d;

    font-size:
        clamp(.97rem, 1.05vw, 1.07rem);

    line-height:
        1.72;
}


.vt-site .vt-editorial p {
    max-width: 92ch;
    margin-bottom: 1.2em;
}


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


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

.vt-site .vt-page--detail a {
    color:
        #ad7c27;

    text-underline-offset:
        3px;
}


.vt-site .vt-page--detail a:hover {
    color:
        var(--vt-navy-950);
}


/* ==========================================================
   LISTS
   ========================================================== */

.vt-site .vt-editorial ol,
.vt-site .vt-editorial ul {
    max-width: 1050px;

    margin:
        22px 0 32px;

    padding-left:
        1.5rem;
}


.vt-site .vt-editorial li {
    margin-bottom:
        10px;
}


.vt-site .vt-editorial li::marker {
    color:
        var(--vt-gold-500);

    font-weight:
        750;
}


/* ==========================================================
   TEXT + IMAGE ELEMENTS
   ========================================================== */

/*
 * Keine Annahme, dass das erste Element ein Hero ist.
 * Jedes klassische Text/Bild-Element bekommt dieselbe
 * hochwertige Oberfläche.
 */

.vt-site .vt-editorial
.frame-type-textpic {

    padding:
        clamp(24px, 3vw, 42px);

    background:
        rgba(255,255,255,.94);

    border:
        1px solid
        rgba(7,20,38,.065);

    border-radius:
        24px;

    box-shadow:
        0 14px 44px
        rgba(7,20,38,.065);
}


/*
 * Bilder begrenzen – wichtig für Karten, Flaggen,
 * Länderabbildungen usw.
 */

.vt-site .vt-editorial
.frame-type-textpic img,
.vt-site .vt-editorial
.frame-type-image img {

    display: block;

    width: auto;

    max-width: 100%;

    max-height: 620px;

    margin-inline: auto;

    object-fit:
        contain;

    border-radius:
        18px;
}


/*
 * Einzelbilder erhalten nicht automatisch eine riesige Höhe.
 */

.vt-site .vt-editorial
.frame-type-image {

    text-align: center;
}


/* ==========================================================
   SLIDER
   ========================================================== */

/*
 * Slider dürfen die breite Präsentationsfläche nutzen.
 */

.vt-site .vt-editorial
.frame-type-ws_slider {

    width: 100%;

    max-width: none;

    margin:
        0 auto
        clamp(55px, 6vw, 88px);
}


/* ==========================================================
   DETAIL SECTIONS
   ========================================================== */

.vt-site .vt-detail-section {

    width: 100%;

    margin-top:
        clamp(52px, 6vw, 90px);
}


/* ==========================================================
   GENERIC INFORMATION GRID
   ========================================================== */

/*
 * Keine fest kodierten 3/3/4/2-Spalten mehr.
 *
 * Browser verteilt die vorhandenen Cards selbst.
 * Funktioniert damit für:
 *
 * Europa:
 * Highlights / Geschichte / Länder / Weitere Infos
 *
 * Qatar:
 * Lage / Einreise / Mobilität / Weitere Infos
 *
 * sowie weitere bestehende Seiten.
 */

.vt-site .vt-info-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                min(100%, 255px),
                1fr
            )
        );

    align-items: start;

    gap:
        clamp(16px, 2vw, 24px);
}


/* ==========================================================
   GENERIC INFORMATION CARD
   ========================================================== */

.vt-site .vt-info-card {

    position: relative;

    min-width: 0;

    height: auto;

    overflow: hidden;

    background:
        rgba(255,255,255,.98);

    border:
        1px solid
        rgba(7,20,38,.075);

    border-radius:
        18px;

    box-shadow:
        0 8px 26px
        rgba(7,20,38,.055);

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


.vt-site .vt-info-card::before {

    content: "";

    position: absolute;

    top: 0;
    right: 0;
    left: 0;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            var(--vt-gold-500),
            var(--vt-gold-400)
        );
}


.vt-site .vt-info-card:hover {

    transform:
        translateY(-3px);

    border-color:
        rgba(216,173,86,.32);

    box-shadow:
        0 16px 40px
        rgba(7,20,38,.09);
}


.vt-site .vt-info-card__inner {

    height: auto;

    padding:
        clamp(22px, 2.2vw, 30px);
}


/* ==========================================================
   TYPO3 FRAMES INSIDE INFO CARDS
   ========================================================== */

.vt-site .vt-info-card .frame {

    width: 100% !important;

    height: auto !important;

    min-height: 0 !important;

    margin: 0 !important;

    padding: 0 !important;

    background:
        transparent !important;

    border:
        0 !important;

    box-shadow:
        none !important;
}


.vt-site .vt-info-card
.frame-container {

    width: 100% !important;

    max-width: none !important;

    margin: 0 !important;

    padding: 0 !important;
}


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

.vt-site .vt-info-card h1,
.vt-site .vt-info-card h2,
.vt-site .vt-info-card h3,
.vt-site .vt-info-card h4,
.vt-site .vt-info-card h5 {

    margin:
        0 0 18px;

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

    font-size:
        clamp(1.1rem, 1.4vw, 1.38rem);

    font-weight:
        740;

    line-height:
        1.18;

    letter-spacing:
        -.025em;
}


.vt-site .vt-info-card p,
.vt-site .vt-info-card li {

    color:
        #536780;

    font-size:
        .9rem;

    line-height:
        1.58;
}


.vt-site .vt-info-card p {

    margin-bottom:
        10px;
}


.vt-site .vt-info-card p:last-child {

    margin-bottom: 0;
}


.vt-site .vt-info-card strong {

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

    font-weight:
        720;
}


/* ==========================================================
   LONG LIST CARD
   ========================================================== */

/*
 * Generische Erkennung langer Listen.
 *
 * Keine Annahme mehr, dass "Länder" immer Card 3 ist.
 *
 * Hat eine Card mindestens 12 Listeneinträge,
 * wird die Liste auf breiten Displays automatisch zweispaltig.
 */

@media (min-width: 900px) {

    .vt-site
    .vt-info-card:has(li:nth-child(12))
    ul {

        columns: 2;

        column-gap:
            24px;
    }


    .vt-site
    .vt-info-card:has(li:nth-child(12))
    li {

        break-inside:
            avoid;
    }

}


/* ==========================================================
   SECTION HEADINGS
   ========================================================== */

.vt-site .vt-section-heading {

    position: relative;

    margin:
        clamp(64px, 7vw, 105px)
        0
        clamp(24px, 3vw, 36px);

    padding-top:
        17px;
}


.vt-site .vt-section-heading::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width:
        52px;

    height:
        3px;

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

    border-radius:
        999px;
}


.vt-site .vt-section-heading
.frame,
.vt-site .vt-section-heading
.frame-container {

    width: 100% !important;

    max-width: none !important;

    margin: 0 !important;

    padding: 0 !important;

    background:
        transparent !important;

    border: 0 !important;

    box-shadow:
        none !important;
}


.vt-site .vt-section-heading h1,
.vt-site .vt-section-heading h2,
.vt-site .vt-section-heading h3 {

    margin: 0;

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

    font-size:
        clamp(1.75rem, 3.3vw, 2.9rem);

    font-weight:
        740;

    line-height:
        1.08;

    letter-spacing:
        -.035em;
}


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

@media (max-width: 900px) {

    .vt-site .vt-info-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }

}


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

@media (max-width: 640px) {

    .vt-site .vt-page--detail {

        padding-top:
            24px;
    }


    .vt-site .vt-info-grid {

        grid-template-columns:
            1fr;

        gap:
            14px;
    }


    .vt-site .vt-info-card__inner {

        padding:
            22px 20px;
    }


    .vt-site .vt-editorial
    .frame-type-textpic {

        padding:
            20px 18px;

        border-radius:
            18px;
    }


    .vt-site .vt-section-heading {

        margin-top:
            55px;
    }

}

/* VT DETAIL PAGE END */



/* ==========================================================
   VT HEADING TYPOGRAPHY FIX
   Saubere Lesbarkeit auf allen Detailseiten
   ========================================================== */

.vt-site .vt-page--detail h1,
.vt-site .vt-page--detail h2,
.vt-site .vt-page--detail h3,
.vt-site .vt-page--detail h4,
.vt-site .vt-page--detail h5,
.vt-site .vt-page--detail h6,
.vt-site .vt-page--detail .frame-header,
.vt-site .vt-page--detail .ce-headline-left,
.vt-site .vt-page--detail .ce-headline-center,
.vt-site .vt-page--detail .ce-headline-right {

    font-family:
        "Open Sans",
        Arial,
        Helvetica,
        sans-serif;

    font-stretch: normal;

    font-kerning: normal;

    font-variant-ligatures:
        common-ligatures;

    text-rendering:
        optimizeLegibility;

    white-space:
        normal;

    word-break:
        normal;

    overflow-wrap:
        normal;

    hyphens:
        auto;
}


/* H1 */

.vt-site .vt-page--detail h1 {

    line-height:
        1.08 !important;

    letter-spacing:
        -0.018em !important;

    font-weight:
        700 !important;
}


/* H2 */

.vt-site .vt-page--detail h2 {

    line-height:
        1.12 !important;

    letter-spacing:
        -0.012em !important;

    font-weight:
        700 !important;
}


/* H3 */

.vt-site .vt-page--detail h3 {

    line-height:
        1.18 !important;

    letter-spacing:
        -0.006em !important;

    font-weight:
        700 !important;
}


/* H4–H6 */

.vt-site .vt-page--detail h4,
.vt-site .vt-page--detail h5,
.vt-site .vt-page--detail h6 {

    line-height:
        1.22 !important;

    letter-spacing:
        0 !important;

    font-weight:
        700 !important;
}


/* ==========================================================
   TYPO3 FRAME HEADINGS
   ========================================================== */

.vt-site .vt-page--detail .frame-header {

    margin-bottom:
        18px;
}


.vt-site .vt-page--detail .frame-header h1,
.vt-site .vt-page--detail .frame-header h2,
.vt-site .vt-page--detail .frame-header h3,
.vt-site .vt-page--detail .frame-header h4 {

    margin-top:
        0;

    margin-bottom:
        0;
}


/* ==========================================================
   KURZE ÜBERSCHRIFTEN
   z.B. Katar, Europa, Deutschland
   ========================================================== */

.vt-site .vt-page--detail .frame-header h1,
.vt-site .vt-page--detail .frame-header h2 {

    min-height:
        1.2em;
}


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

@media (max-width: 640px) {

    .vt-site .vt-page--detail h1 {

        line-height:
            1.1 !important;

        letter-spacing:
            -0.012em !important;
    }


    .vt-site .vt-page--detail h2 {

        line-height:
            1.15 !important;

        letter-spacing:
            -0.006em !important;
    }


    .vt-site .vt-page--detail h3 {

        line-height:
            1.2 !important;

        letter-spacing:
            0 !important;
    }

}



/* ==========================================================
   FLAGGEN NICHT HOCHSKALIEREN
   ========================================================== */

.vt-site .vt-page--detail img[src*="/fileadmin/flaggen/"] {
    width: auto !important;
    max-width: 220px !important;
    height: auto !important;

    margin-left: auto !important;
    margin-right: auto !important;

    object-fit: contain !important;
}


/* Flaggen-Container kompakter halten */

.vt-site .vt-page--detail
.frame-type-textpic:has(img[src*="/fileadmin/flaggen/"]),
.vt-site .vt-page--detail
.frame-type-image:has(img[src*="/fileadmin/flaggen/"]) {

    padding:
        clamp(24px, 3vw, 38px) !important;
}


/* Keine unnötig riesige Galerie um kleine Flaggen */

.vt-site .vt-page--detail
.frame-type-textpic:has(img[src*="/fileadmin/flaggen/"])
.ce-gallery,
.vt-site .vt-page--detail
.frame-type-image:has(img[src*="/fileadmin/flaggen/"])
.ce-gallery {

    width: auto !important;
    max-width: 320px !important;

    margin-left: auto !important;
    margin-right: auto !important;
}



/* VT COUNTRY FLAG START */

/* ==========================================================
   COUNTRY FLAG / LÄNDERKOPF
   ========================================================== */

/*
 * Nur Content-Elemente mit Bildern aus /fileadmin/flaggen/.
 * Normale Bilder, Karten, Slider etc. bleiben unberührt.
 */

.vt-site .vt-page--detail
.frame-type-textpic:has(img[src*="/fileadmin/flaggen/"]) {

    padding:
        clamp(28px, 3vw, 42px) !important;

    border-radius:
        24px;

    background:
        rgba(255,255,255,.97);

    border:
        1px solid rgba(7,20,38,.065);

    box-shadow:
        0 14px 44px rgba(7,20,38,.06);
}


/* Keine riesigen inneren Abstände */

.vt-site .vt-page--detail
.frame-type-textpic:has(img[src*="/fileadmin/flaggen/"])
.frame-container {

    width: 100% !important;
    max-width: none !important;

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


/* Flagge */

.vt-site .vt-page--detail
.frame-type-textpic:has(img[src*="/fileadmin/flaggen/"])
img[src*="/fileadmin/flaggen/"] {

    display: block !important;

    width: auto !important;
    max-width: 190px !important;

    height: auto !important;
    max-height: 120px !important;

    margin:
        0 auto !important;

    object-fit:
        contain !important;

    border-radius:
        14px !important;

    box-shadow:
        0 8px 22px rgba(7,20,38,.10);
}


/* Galerie deutlich kompakter */

.vt-site .vt-page--detail
.frame-type-textpic:has(img[src*="/fileadmin/flaggen/"])
.ce-gallery {

    width: 100% !important;

    margin:
        0 0 28px !important;

    padding: 0 !important;
}


.vt-site .vt-page--detail
.frame-type-textpic:has(img[src*="/fileadmin/flaggen/"])
.gallery-row,

.vt-site .vt-page--detail
.frame-type-textpic:has(img[src*="/fileadmin/flaggen/"])
.gallery-item,

.vt-site .vt-page--detail
.frame-type-textpic:has(img[src*="/fileadmin/flaggen/"])
figure {

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


/* Überschrift enger an die Flagge */

.vt-site .vt-page--detail
.frame-type-textpic:has(img[src*="/fileadmin/flaggen/"])
.frame-header {

    margin:
        0 0 22px !important;

    padding: 0 !important;
}


.vt-site .vt-page--detail
.frame-type-textpic:has(img[src*="/fileadmin/flaggen/"])
.frame-header h1,

.vt-site .vt-page--detail
.frame-type-textpic:has(img[src*="/fileadmin/flaggen/"])
.frame-header h2,

.vt-site .vt-page--detail
.frame-type-textpic:has(img[src*="/fileadmin/flaggen/"])
.frame-header h3 {

    margin: 0 !important;

    line-height: 1.15 !important;

    letter-spacing: -.01em !important;
}


/* Fließtext */

.vt-site .vt-page--detail
.frame-type-textpic:has(img[src*="/fileadmin/flaggen/"])
.ce-bodytext {

    max-width: 920px;

    margin:
        0 auto !important;
}


.vt-site .vt-page--detail
.frame-type-textpic:has(img[src*="/fileadmin/flaggen/"])
.ce-bodytext p {

    max-width: 82ch;

    margin-bottom:
        1.15em;
}


/* ==========================================================
   DESKTOP: etwas elegantere Komposition
   ========================================================== */

@media (min-width: 900px) {

    .vt-site .vt-page--detail
    .frame-type-textpic:has(img[src*="/fileadmin/flaggen/"]) {

        padding:
            36px 48px 42px !important;
    }


    .vt-site .vt-page--detail
    .frame-type-textpic:has(img[src*="/fileadmin/flaggen/"])
    .ce-gallery {

        margin-bottom:
            24px !important;
    }

}


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

@media (max-width: 640px) {

    .vt-site .vt-page--detail
    .frame-type-textpic:has(img[src*="/fileadmin/flaggen/"]) {

        padding:
            24px 20px 28px !important;
    }


    .vt-site .vt-page--detail
    .frame-type-textpic:has(img[src*="/fileadmin/flaggen/"])
    img[src*="/fileadmin/flaggen/"] {

        max-width:
            150px !important;

        max-height:
            95px !important;
    }


    .vt-site .vt-page--detail
    .frame-type-textpic:has(img[src*="/fileadmin/flaggen/"])
    .ce-gallery {

        margin-bottom:
            20px !important;
    }

}

/* VT COUNTRY FLAG END */

/* ==========================================================
   VACATION TESTER - MOBILE TYPOGRAPHY FINAL
   ========================================================== */

@media (max-width: 640px) {

    .vt-site #maincontent h1 {

        font-size:
            clamp(2.15rem, 9vw, 2.75rem) !important;

        line-height:
            1.08 !important;

        letter-spacing:
            -0.015em !important;

        font-weight:
            700 !important;

        overflow-wrap:
            normal !important;

        word-break:
            normal !important;
    }


    .vt-site #maincontent h2 {

        font-size:
            clamp(1.65rem, 7vw, 2.15rem) !important;

        line-height:
            1.12 !important;

        letter-spacing:
            -0.01em !important;

        font-weight:
            700 !important;
    }


    .vt-site #maincontent h3 {

        font-size:
            clamp(1.3rem, 5.5vw, 1.65rem) !important;

        line-height:
            1.18 !important;

        letter-spacing:
            0 !important;
    }


    .vt-site #maincontent {

        overflow-wrap:
            normal;

        word-break:
            normal;
    }

}


/* AI Badge auch bei normalen FSC-Bildern */

.vt-site .vt-media-image {
    position: relative;
}


.vt-site .vt-media-image .vt-ai-badge {
    top: 10px;
    right: 10px;
}
/* ==========================================================
   VT MOBILE NAVIGATION FINAL
   ========================================================== */

@media (max-width: 991px) {

    html.vt-navigation-open,
    html.vt-navigation-open body {
        overflow: hidden !important;
    }


    /*
     * Das Menü wird ein echtes Fullscreen-Panel
     * unterhalb des Headers.
     */

    .vt-site .vt-nav__panel {

        position: fixed !important;

        top: 70px !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;

        width: 100% !important;

        height:
            calc(100dvh - 70px) !important;

        padding:
            18px 18px 40px !important;

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

        overscroll-behavior:
            contain;

        background:
            #ffffff !important;

        z-index:
            9998 !important;

        display:
            block !important;

        opacity: 0 !important;

        visibility:
            hidden !important;

        pointer-events:
            none !important;

        transform:
            translateY(-6px) !important;

        transition:
            opacity 180ms ease,
            transform 180ms ease,
            visibility 180ms ease !important;
    }


    .vt-site .vt-nav.is-open
    .vt-nav__panel {

        opacity:
            1 !important;

        visibility:
            visible !important;

        pointer-events:
            auto !important;

        transform:
            translateY(0) !important;
    }


    /*
     * Level 1 vollständig untereinander.
     *
     * Dadurch verschwinden Reisetipps usw.
     * nicht mehr.
     */

    .vt-site .vt-nav__level--1 {

        display:
            block !important;

        width:
            100% !important;

        height:
            auto !important;

        margin:
            0 !important;

        padding:
            0 !important;
    }


    .vt-site .vt-nav__item {

        position:
            relative !important;

        display:
            block !important;

        width:
            100% !important;

        margin:
            0 0 8px !important;
    }


    /*
     * Hauptmenüeintrag
     */

    .vt-site .vt-nav__link {

        width:
            100% !important;

        min-height:
            56px !important;

        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            flex-start !important;

        gap:
            10px !important;

        padding:
            0 58px 0 18px !important;

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

        background:
            #f5f7fa !important;

        border:
            1px solid
            #e5e9ee !important;

        border-radius:
            14px !important;

        font-size:
            1rem !important;

        font-weight:
            700 !important;

        text-decoration:
            none !important;
    }


    .vt-site .vt-nav__link:hover {

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

        background:
            #eef2f6 !important;
    }


    /*
     * Desktop-Chevron mobil verstecken.
     * Mobil gibt es einen eigenen Button.
     */

    .vt-site
    .vt-nav__link
    .vt-nav__chevron {

        display:
            none !important;
    }


    /*
     * Eigener Accordion-Button
     */

    .vt-site .vt-nav__submenu-toggle {

        position:
            absolute;

        top:
            0;

        right:
            0;

        z-index:
            5;

        width:
            56px;

        height:
            56px;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        padding:
            0;

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

        background:
            transparent;

        border:
            0;

        cursor:
            pointer;
    }


    .vt-site .vt-nav__submenu-chevron {

        width:
            10px;

        height:
            10px;

        display:
            block;

        border-right:
            2px solid
            var(--vt-gold-500);

        border-bottom:
            2px solid
            var(--vt-gold-500);

        transform:
            rotate(45deg);

        transition:
            transform 180ms ease;
    }


    .vt-site
    .vt-nav__item.is-submenu-open
    > .vt-nav__submenu-toggle
    .vt-nav__submenu-chevron {

        transform:
            rotate(225deg);
    }


    /*
     * Untermenü standardmäßig geschlossen
     */

    .vt-site .vt-mega {

        position:
            static !important;

        width:
            100% !important;

        margin:
            0 !important;

        padding:
            0 !important;

        display:
            none !important;

        visibility:
            visible !important;

        opacity:
            1 !important;

        transform:
            none !important;

        pointer-events:
            auto !important;
    }


    /*
     * Nur das angeklickte Untermenü öffnen
     */

    .vt-site
    .vt-nav__item.is-submenu-open
    > .vt-mega {

        display:
            block !important;
    }


    /*
     * Mega-Menü Oberfläche
     */

    .vt-site .vt-mega__inner {

        width:
            100% !important;

        margin:
            8px 0 12px !important;

        padding:
            16px !important;

        background:
            #f7f8fa !important;

        border:
            1px solid
            #e5e9ee !important;

        border-radius:
            14px !important;

        box-shadow:
            none !important;
    }


    /*
     * Kontinente untereinander
     */

    .vt-site .vt-nav__level--2 {

        display:
            grid !important;

        grid-template-columns:
            1fr !important;

        gap:
            18px !important;

        margin:
            0 !important;

        padding:
            0 !important;
    }


    .vt-site .vt-nav__item-level2 {

        min-width:
            0;
    }


    /*
     * Kontinent / Kategorie
     */

    .vt-site .vt-nav__link-level2 {

        display:
            flex !important;

        align-items:
            center !important;

        gap:
            9px !important;

        min-height:
            36px;

        padding:
            0 0 8px !important;

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

        border-bottom:
            1px solid
            #dde3e9;

        font-size:
            .95rem !important;

        font-weight:
            750 !important;

        text-decoration:
            none !important;
    }


    /*
     * Länder
     */

    .vt-site .vt-nav__level--3 {

        display:
            grid !important;

        grid-template-columns:
            repeat(2, minmax(0,1fr)) !important;

        gap:
            3px 10px !important;

        margin:
            8px 0 0 !important;

        padding:
            0 !important;
    }


    .vt-site .vt-nav__link-level3 {

        display:
            flex !important;

        align-items:
            center !important;

        gap:
            7px !important;

        min-height:
            34px;

        padding:
            6px 7px !important;

        color:
            #50647d !important;

        background:
            transparent !important;

        border-radius:
            8px !important;

        font-size:
            .84rem !important;

        line-height:
            1.25 !important;

        text-decoration:
            none !important;
    }


    .vt-site
    .vt-nav__link-level3:hover {

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

        background:
            #ffffff !important;
    }


    /*
     * Flaggen
     */

    .vt-site .vt-nav__flag {

        width:
            25px !important;

        max-width:
            25px !important;

        height:
            17px !important;

        flex:
            0 0 25px;

        object-fit:
            cover !important;

        border:
            1px solid
            rgba(7,20,38,.12);

        border-radius:
            3px;
    }


    .vt-site .vt-nav__flag--small {

        width:
            21px !important;

        max-width:
            21px !important;

        height:
            14px !important;

        flex:
            0 0 21px;
    }

}


/*
 * Auf sehr schmalen Geräten Länder nur einspaltig.
 */

@media (max-width: 420px) {

    .vt-site .vt-nav__level--3 {

        grid-template-columns:
            1fr !important;
    }

}


/*
 * Submenu-Button auf Desktop nicht anzeigen.
 */

@media (min-width: 992px) {

    .vt-site .vt-nav__submenu-toggle {

        display:
            none !important;
    }

}