/* ==========================================
   FONTS
   ========================================== */
@font-face {
    font-display: swap;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/open-sans-v44-latin-300.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/open-sans-v44-latin-500.woff2') format('woff2');
}

:root {
    --icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17.104 17.107'%3E%3Cpath d='M0,9.694q0,2.824,0,5.648a1.708,1.708,0,0,0,1.766,1.764q5.648,0,11.295,0a1.93,1.93,0,0,0,.492-.061,1.694,1.694,0,0,0,1.268-1.689q0-3.358,0-6.718c0-.041,0-.083,0-.124a.578.578,0,0,0-.5-.525.56.56,0,0,0-.611.408.987.987,0,0,0-.026.264q0,3.306,0,6.611c0,.489-.206.7-.689.7H1.824c-.471,0-.683-.213-.683-.686V4.108c0-.473.212-.686.681-.686H8.058c.166,0,.333,0,.5,0A.57.57,0,1,0,8.5,2.282H1.821A1.715,1.715,0,0,0,0,4.1q0,2.8,0,5.6M15.15,1.141c-.074.078-.121.129-.169.178L7.11,9.191c-.046.046-.095.091-.136.141a.568.568,0,0,0,.795.8,2.057,2.057,0,0,0,.154-.148l7.871-7.872c.047-.047.1-.091.169-.16v.238c0,1.146,0,2.292,0,3.438a.823.823,0,0,0,.1.386.534.534,0,0,0,.619.231.564.564,0,0,0,.415-.574q0-2.539,0-5.077a.569.569,0,0,0-.61-.6q-1.255,0-2.511,0H11.973a.56.56,0,0,0-.554.345.567.567,0,0,0,.552.8c1.164,0,1.789,0,2.952,0Z'/%3E%3C/svg%3E");
}




body {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
}

/* ==========================================
   TESTFARBEN
   ========================================== */
.color_test {
    color: var(--main-tint-10);
    background-color: var(--main-color);
}

/* ==========================================
   CSS für das Sticky-Logo (sichtbar nach Scroll)
   ========================================== */
#sticky-logo {
    /* top: -50px;
  position: absolute;
  width: 100%; */
}

#sticky-logo {
    opacity: 0;
    pointer-events: none; /* sicherheitshalber */
    transition: opacity 0.3s ease;
}

.sticky-invisible {
    opacity: 0;

}

/* Wenn sticky aktiv wird → sichtbar */
#sticky-logo.sticky-visible {
    opacity: 1;

    pointer-events: auto;
}




#iventure_logo_sticky {
    height: 50px;
    padding: 10px;
    color: white;
    background: var(--main-color);
    width: 100%;
}

/* ==========================================
   HERO-BEREICH
   ========================================== */
.hero {
    position: relative;
    height: 70vh;
    min-height: 700px;
    color: white;
    font-size: 32px;
    line-height: 36px;
    top: -50px;
}

.hero-fadeshow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.75) 100%);
    z-index: 2;
    pointer-events: none;
}

.hero-content {
    position: relative;
    height: 100%;
    z-index: 3;
}

.hero-container {
    max-width: 1920px;
    /* height: 100%; */
    margin: 0 auto;
}

/* Logo Bereich */
.hero-logo-wrapper {
    /* height: 45%; */
    display: flex;
    /* align-items: flex-end; */
    justify-content: center;
    /* padding-bottom: 1em; */
    margin-top: 80px;
}

.hero-logo-inner {
    width: 95%;
}

.hero-logo-inner svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Text Bereich */
.hero-text-wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-top: 30px;
}

.hero-text-inner {
    max-width: 1000px;
    width: 90%;
    padding: 0 1em;
    /* color: yellow; */
}

.hero-text-inner p {
    text-align: left;
    margin: 0;
    font-size: 32px;
    line-height: 1.2;
}

/* ==========================================
   RESPONSIVE BREAKPOINTS
   ========================================== */

@media (min-width: 961px) {
    .hero-logo-wrapper {
        margin-top: 200px;
    }

    .hero-text-wrapper {
        margin-top: 80px;
    }
}

/* --- 1200px --- */
@media (max-width: 1200px) {
    .hero-text-inner {
        /* color: red; */
    }

    .hero-text-inner p {
        font-size: 28px;
    }
}

/* --- 960px --- (Tablets + große Phones Portrait) */
@media (max-width: 960px) {
    .hero {
        height: 50vh;
        min-height: 550px;
    }

    .hero-text-inner {
        /* color: lime; */
    }

    .hero-text-inner p {
        font-size: 24px;
        /* padding: 0 0.5em; */
    }

    .hero-logo-inner {
        width: 85%;
    }
}

/* --- iPhone Landscape --- */
/* Gilt für ALLE iPhones – bis 960px Landscape */
@media (max-width: 960px) and (orientation: landscape) {
    .hero {
        height: 50vh;
        min-height: 550px;
    }

    .hero-logo-wrapper {
        /* height: 30%; */
        /* padding-bottom: 0.2em; */
    }

    .hero-logo-inner {
        width: 70%;
    }

    .hero-text-wrapper {
        /* padding-top: 0.5em; */
    }

    .hero-text-inner {
        /* color: hotpink; */
        font-size: 22px;
        line-height: 25px;
    }

    .hero-text-inner p {}
}

/* Tablet Landscape */
@media (min-width: 768px) and (max-width: 1080px) and (orientation: landscape) {
    .hero {
        height: 65vh;
        min-height: 700px;
    }

    .hero-text-inner {
        /* color: purple; */
    }

    .hero-logo-wrapper {
        margin-top: 125px;
    }

    .hero-text-wrapper {
        margin-top: 50px;
    }

}


/* --- 640px --- (Phones Portrait) */
@media (max-width: 640px) {
    .hero {
        height: 55vh;
        min-height: 50vh;
    }

    .hero-text-inner {
        font-size: 22px;
        line-height: 30px;
        /* color: orange; */
    }

    .hero-text-inner p {
        font-size: 18px;
        line-height: 1.3;
        padding: 0;
    }

    .hero-logo-inner {
        width: 90%;
    }

    .hero-logo-wrapper {}

    .hero-text-wrapper {}
}

/* --- 400px --- (kleinste Phones) */
@media (max-width: 400px) {
    .hero {
        height: 50vh;
        min-height: 50vh;
    }

    .hero-text-inner {
        /* color: lightskyblue; */
        font-size: 20px;
        line-height: 25px;
    }

    .lang-menu {
        margin-top: 10px !important;
    }

    /* Logo Bereich */
    .hero-logo-wrapper {
        margin-top: 65px;
    }

    /* Text Bereich */
    .hero-text-wrapper {
        margin-top: 30px;
    }
}

@media (max-width: 375px) {
    .hero {
        height: 60vh;
        min-height: 60vh;
    }
}

@media (max-width: 320px) {

    .hero {
        height: 65vh;
        min-height: 65vh;
    }

    .hero-text-inner {
        /* color: fuchsia; */
        font-size: 15px;
        line-height: 19px;
    }
}

@media (max-width: 480px) and (min-width: 321px) and (orientation: landscape) {

    /* Styles wirken nur auf Geräten zwischen 321px und 480px Breite im Landscape-Modus */
    .hero {
        height: 100vh;
        min-height: 400px;
    }

    .hero-text-inner {
        /* color: darkcyan; */
        font-size: 17px;
        line-height: 20px;
    }

}

/* ==========================================
   UI SECTIONS
   ========================================== */
.uk-section.logos {
    font-size: 14px;
    line-height: 20px;
    margin-top: -50px;
}

.uk-section.logos .uk-container {
    padding-left: 2px;
    padding-right: 2px;
}

/* get in touch */
.uk-section.getintouch {
    text-align: center;
    font-size: 22px;
    font-weight: 500;
    color: var(--main-tint-50);
}

.uk-section.getintouch:hover {
    color: var(--main-color);
}

.getintouch a {
    display: inline-block;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.getintouch svg {
    transition: transform 0.25s ease;
}

.getintouch a:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.getintouch a:hover svg {
    transform: scale(1.05);
}

/* get in touch  // */

.uk-section.footer {
    font-size: 12px;
}

.footer-menu a {
    color: var(--main-color) !important;
}

.footer-menu a:hover {
    color: var(--main-tint-50) !important;
}

.uk-modal-close.uk-button.iv {
    background-color: var(--main-color);
    color: var(--main-tint-10);
}

.uk-modal-dialog>p {
    text-align: left;
}

/* ==========================================
   SCREENREADER
   ========================================== */
.sr-only {
    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;
    white-space: nowrap !important;
    border: 0 !important;
}

/* filter navigation */
.filter-nav-wrapper {
    background-color: white;
    position: sticky;
    top: 50px;
    z-index: 100;
    padding: 1rem 0;
    /* horizontal scroll bei Bedarf */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    /* padding-bottom: 4px; */
    /* verhindert abgeschnittene Scrollbar */
    text-align: center;
    /* Zentriert den inneren Container */
}

/* Innerer Container, der zentriert bleibt */
.filter-nav {
    display: inline-flex;
    /* inline-flex damit es zentriert wird */
    gap: 1.3em;
    /* Abstand zwischen den Buttons */
    list-style: none;
    padding: 0;
    margin: 0;
    white-space: nowrap;
    /* keine Umbrüche */
}

.filter-nav li {
    cursor: pointer;
    font-weight: 500;
    color: var(--main-color) !important;
    background-color: var(--main-tint-10);
    flex: 0 0 auto;
    /* verhindert Umbrechen */
}

.filter-nav li:hover {
    background-color: var(--main-color);
    color: white !important;
    text-decoration: none;
}

.filter-nav li:hover a {
    color: white;
    text-decoration: none;
}

.filter-nav li.uk-active, .filter-nav li.active {
    background-color: var(--main-color) !important;
    color: white !important;
}

.filter-nav li a {
    color: var(--main-color);
    padding: 5px 15px;
    display: inline-block;
    white-space: nowrap;
    /* verhindert Zeilenumbruch */
}

.filter-nav li.uk-active a {
    color: white;
}

/* Dezente Scrollbar */
.filter-nav-wrapper::-webkit-scrollbar {
    height: 6px;
}

.filter-nav-wrapper::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 4px;
}

/* Fade-Effekt links/rechts für die horizontale Scrollleiste */
/* ==========================================
   Filter Fade für die horizontale Navigation
   ========================================== */
/* Fade Overlay */

.filter-nav-wrapper {
    z-index: 10;
    /* Sticky Layer */
}

.filter-nav-fade {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* Buttons klickbar */
    z-index: 2;

    background: linear-gradient(to right,
            white 0px,
            rgba(255, 0, 255, 0) 30px,
            rgba(255, 0, 255, 0) calc(100% - 30px),
            white 100%);
}

@media (max-width: 767px) {
    .filter-nav-fade {
        display: none;
    }
}


/* MOBILE */
@media (max-width: 768px) {

    .filter-nav {
        display: block;
        width: 93%;
        margin: 0 auto;
        padding: 0;
        position: relative;
        text-align: center;
    }

    /* Alle Items ausblenden */
    .filter-nav li {
        display: none;
        /* padding: 11px 0; */
        margin: 0;
    }

    ul.filter-nav li:first-child {
        margin-top: 5px;
        margin-bottom: 5px;
    }

    ul.filter-nav li {
        margin-top: 7px;
    }

    ul.filter-nav.open li.uk-active {
        margin-top: 7px;
    }

    ul.filter-nav.open li:first-child.uk-active {
        margin-top: 5px;
    }

    ul.filter-nav li.uk-active {
        margin-top: 5px;
    }

    .filter-nav li a {
        padding: 11px 0;
    }

    /* Nur das aktive Item anzeigen */
    .filter-nav li.uk-active {
        display: block;
        cursor: pointer;
    }

    /* Wenn das Menü geöffnet ist → alles anzeigen */
    .filter-nav.open li {
        display: block;
    }
}


/* ==========================================
   LOGO-CARD (modern)
   ========================================== */
.logo-grid {
    margin-top: 1px;
}

.logo-card {
    position: relative;
    background-color: #fff;
    transition: background-color 0.5s ease, box-shadow 0.3s ease;
    color: var(--main-color) !important;

    /* komplette Umrandung mit Box-sizing */
    box-sizing: border-box;
    border: 1px solid var(--main-tint-10);

    margin-top: -1px;
    margin-left: -1px;
}

/* Hover */
.logo-card:hover {
    background-color: var(--main-color);
    color: #fff !important;
}

@media screen and (max-width: 640px) {
    .logo-card:hover {
        color: var(--main-color);
        background-color: #fff !important;
    }

    .logo-card:hover svg {
        color: var(--main-color) !important;
    }
}



/* ==========================================
   SVG & ICON COLORS
   ========================================== */
.logo-card svg {
    color: var(--main-color);
    transition: color 0.5s ease;
}

.logo-card:hover svg {
    color: var(--main-tint-10);
}

/* Alle Pfade, Kreise, Rechtecke etc. in der SVG folgen currentColor */
.logo-card svg path,
.logo-card svg circle,
.logo-card svg rect {
    fill: currentColor !important;
}

span.link-icon svg {
    color: var(--main-tint-10) !important;
    transition: color 0.5s ease;
    stroke-width: 1.5px;
    width: 20px;
    height: 20px;
}

/* ==========================================
   LOGO IMAGE
   ========================================== */
.logo-image svg {
    width: 90%;
    max-height: 168px;
    color: var(--main-color);
    transition: color 0.5s ease, transform 1s ease;
}

.logo-card:hover .logo-image svg {
    transform: scale(1.1);
}

/* Mobile Overrides Logo Image */
@media screen and (max-width: 640px) {
    .logo-image {
        margin-top: 2em;
    }

    .logo-image svg {
        width: 100%;
    }
}

/* ==========================================
   CATEGORY & EXTERNAL LINK
   ========================================== */
.logo-card p.category,
.logo-card p.linkexternal {
    position: absolute;
    top: 0;
    display: none;
    z-index: 2;
    font-weight: 500;
    font-size: 0.9rem;
    transition: color 0.3s ease, background-color 0.3s ease;
    text-transform: uppercase;
}

.logo-card p.category {
    left: 3vw;
}

.logo-card p.linkexternal {
    right: 2em;
}

.logo-card:hover p.category,
.logo-card:hover p.linkexternal {
    display: block;
}

/* Mobile Overrides Category & Link */
@media screen and (max-width: 640px) {

    .logo-card p.category,
    .logo-card p.linkexternal {
        display: block !important;
        padding: 0;
        margin: 0;
        margin-top: 5px;
        font-size: 0.85rem;
        color: var(--main-color);
    }

    .logo-card p.category {
        text-transform: none;
        margin-top: 15px;
    }

    .logo-card:hover p.category {
        color: var(--main-color);
    }

    .logo-card p.linkexternal {
        right: 1em;
        margin-top: 24px;
    }

    .logo-card:hover p.linkexternal {
        color: var(--main-color);
    }
}

/* ==========================================
   DESCRIPTION
   ========================================== */
.description {
    margin: 0 3vw 1.5vw 3vw;
    font-size: 0.9rem;
    text-align: left;
}

@media screen and (max-width: 640px) {
    .description {
        margin-bottom: 35px;
    }

    .logo-card:hover p.description {
        color: var(--main-color);
    }
}

/* ==========================================
   EXTERNAL LINK ICON
   ========================================== */
.linkexternal a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    position: relative;
}

.linkexternal a::after {
    content: '';
    position: absolute;
    right: 0;
    transform: translateY(-50%) scale(1);
    transform-origin: bottom left;
    width: 17px;
    height: 17px;
    transition: transform 0.12s ease;
    
    mask-image: var(--icon-external);

    mask-size: contain;
    mask-repeat: no-repeat;
    background-color: white;
}

.linkexternal a:hover::after {
    transform: translateY(-50%) scale(1.25);
}

/* Mobile Overrides External Link Icon */
@media screen and (max-width: 640px) {
    .linkexternal a::after {
        content: '';
        position: relative;
        width: 17px;
        height: 17px;
        
        mask-image: var(--icon-external);
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        
        background-color: var(--main-color); /* gewünschte Farbe */
        -webkit-mask-image: var(--icon-external);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        -webkit-mask-position: center;
    }

    .linkexternal a:hover::after {
        transform: scale(1.25);
        background-color: var(--main-tint-10); /* Hover-Farbe */
    }
}


/* langauge menu */
/* langauge menu */
/* langauge menu */

.lang-menu {
    z-index: 4;
    margin-top: 18px;
    margin-right: 1em;
}

.language-toggle-ui {
    margin: 0;
    padding: 0;
    border: 0px solid rgba(255, 255, 255, 1) !important;
    color: #fff !important;
    font-weight: 500;
    font-size: 21px;
    background: transparent;
    cursor: pointer;
}

.language-toggle-ui:hover {
    text-decoration: none;
}

/* Optional: Dropdown Hintergrund anpassen */
[uk-dropdown] {
    padding: 0px;
    margin: 0px;
    border: 0 important;
    font-weight: 500;
    box-shadow: 0 0 0 black;
    min-width: auto;
    background: transparent;
    
}

.uk-drop {
    padding: 0px;
    margin: 0px;
    position: initial;

}

.uk-dropdown-nav>li>a {
    margin: 0;
    padding: 0;
    color: white;
    font-size: 21px;

}

.uk-dropdown-nav>li.uk-active>a, .uk-dropdown-nav>li>a:hover {
    margin: 0;
    padding: 0;
    color: white;
    font-size: 21px;

}