/* Navbar */
.xennics-navbar {
    background-color: #0078bc !important;
}

    .xennics-navbar .nav-link {
        color: #fff !important;
        opacity: .9;
    }

        .xennics-navbar .nav-link:hover {
            opacity: 1;
            text-decoration: underline;
        }

        .xennics-navbar .nav-link.active,
        .xennics-navbar .nav-link[aria-current="page"] {
            color: rgba(255, 255, 255, .55) !important;
            opacity: 1;
            text-decoration: none;
        }

/* Body Offset (fixed navbar) */
body {
    padding-top: var(--nav-h, 56px);
}

/* Carousel */
.hero-carousel {
    position: relative;
    margin: 0;
}

.carousel-img {
    height: 340px; /* anpassen */
    object-fit: cover;
}

/* sanfter Übergang vom Navbar-Blau ins Bild */
.hero-carousel::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 80px; /* ggf. 60–120px */
    background: linear-gradient( to bottom, rgba(0, 120, 188, 1) 0%, rgba(0, 120, 188, .65) 45%, rgba(0, 120, 188, 0) 100% );
    z-index: 2;
    pointer-events: none;
}

/* Controls/Indicators über dem Overlay */
.hero-carousel .carousel-indicators,
.hero-carousel .carousel-control-prev,
.hero-carousel .carousel-control-next {
    z-index: 3;
}

/* Scroll-Reveal Animation */
.reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .6s ease, transform .6s ease;
}

    .reveal.reveal-visible {
        opacity: 1;
        transform: none;
    }

/* Optional: reduzierte Motion respektieren */
@media (prefers-reduced-motion: reduce) {
    .reveal {
        transition: none;
        transform: none;
        opacity: 1;
    }
}

/* Go Top */
.go-top {
    position: fixed;
    right: 18px;
    bottom: 50px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 999px;
    background: #666666;
    color: #fff;
    font-size: 20px;
    line-height: 44px;
    text-align: center;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .25);
    display: none;
    z-index: 1050;
}

    .go-top:hover {
        filter: brightness(1.08);
    }

/* Voraussetzungen Section */
.voraussetzungen-section {
    background: linear-gradient(180deg, #fff7cc 0%, #fffdf2 100%);
    border-top: 1px solid rgba(0, 0, 0, .06);
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}

/* Cards */
.req-card {
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 16px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .06);
    transition: transform .2s ease, box-shadow .2s ease;
}

    .req-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 28px rgba(0, 0, 0, .10);
    }

/* Icon Badge */
.req-icon {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    background: rgba(0, 120, 188, .12);
    color: #0078bc;
    font-weight: 700;
    font-size: .9rem;
}

/* Performance Section (weiches Blau) */
.performance-section {
    background: linear-gradient(180deg, #eaf4ff 0%, #f7fbff 100%);
    border-top: 1px solid rgba(0,0,0,.06);
    border-bottom: 1px solid rgba(0,0,0,.06);
}

/* Performance Bild: KEIN Abschneiden der Ecken, Original bleibt scharf */
.performance-img-wrap {
    position: relative;
    border-radius: 0; /* <-- wichtig: keine runden Ecken */
    overflow: visible; /* <-- wichtig: nichts wird abgeschnitten */
    box-shadow: 0 8px 22px rgba(0,0,0,.08);
    background: transparent;
}

.performance-img {
    display: block;
    width: 100%;
    height: auto;
    filter: none; /* <-- wichtig: keine Verfälschung */
}

/* Abo-Preis Section (full-width grau) */
.abo-section {
    background: #f2f4f7; /* grau, sehr weich */
    border-top: 1px solid rgba(0,0,0,.06);
    border-bottom: 1px solid rgba(0,0,0,.06);
}

/* Preis-Box bleibt leicht blau */
.price-box {
    background: rgba(0,120,188,.06);
    border: 1px solid rgba(0,120,188,.12);
}

.abo-section .card {
    border: 1px solid rgba(0,0,0,.06);
}

/* Risikohinweis Section */
.risk-section {
    background: #fff;
    border-top: 1px solid rgba(0,0,0,.06);
    border-bottom: 1px solid rgba(0,0,0,.06);
}

/* =========================================================
   Contact Form Card im Navbar-Blau
   ========================================================= */
.contact-card {
    background-color: #0078bc;
    border: none;
    border-radius: 16px;
    position: relative;
}

    /* Texte/Labels auf Blau */
    .contact-card,
    .contact-card .form-label,
    .contact-card .form-check-label {
        color: #fff;
    }

        /* Inputs/Textarea auf Blau gut lesbar */
        .contact-card .form-control {
            background: rgba(255, 255, 255, .95);
            border: 1px solid rgba(255, 255, 255, .55);
        }

            .contact-card .form-control:focus {
                border-color: rgba(255, 255, 255, .9);
                box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .25);
            }

        /* Validation-Text lesbar */
        .contact-card .text-danger {
            color: #ffd1d1 !important;
        }

        /* Checkbox: sichtbar + Cursor */
        .contact-card .form-check-input {
            border-color: rgba(255,255,255,.7);
            background-color: rgba(255,255,255,.95);
            cursor: pointer;
        }

        .contact-card .form-check-label {
            cursor: pointer;
        }

        /* Checked: weißer Kasten + blaues Häkchen (sonst ist Haken auf Weiß unsichtbar) */
        .contact-card .form-check-input:checked {
            background-color: #fff;
            border-color: #fff;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230078bc' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3 6-6'/%3e%3c/svg%3e");
        }

        /* Focus */
        .contact-card .form-check-input:focus {
            box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .25);
            border-color: rgba(255,255,255,.9);
        }

        /* Button besser passend */
        .contact-card .btn-primary {
            background: #fff;
            border-color: #fff;
            color: #0078bc;
        }

            .contact-card .btn-primary:hover {
                filter: brightness(.95);
            }

/* =========================================================
   LOGIN (Navbar-Blau, Button weiss)
   ========================================================= */
.login-card {
    background-color: #0078bc; /* wie .xennics-navbar */
    border: none;
    border-radius: 16px;
}

    .login-card .card-body {
        background: transparent;
    }

    /* Texte/Labels auf Blau */
    .login-card,
    .login-card .form-label,
    .login-card .form-check-label,
    .login-card .text-muted,
    .login-card .small {
        color: #fff !important;
    }

        /* Inputs auf Blau gut lesbar */
        .login-card .form-control {
            background: rgba(255, 255, 255, .95);
            border: 1px solid rgba(255, 255, 255, .55);
        }

            .login-card .form-control:focus {
                border-color: rgba(255, 255, 255, .9);
                box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .25);
            }

        /* Validation-Text lesbar */
        .login-card .text-danger {
            color: #ffd1d1 !important;
        }

        /* Links im Login (nur echte Links, keine Buttons) */
        .login-card .login-link,
        .login-card a.login-link,
        .login-card a.login-link:visited {
            color: rgba(255,255,255,.95) !important;
            text-decoration: underline;
        }

            .login-card a.login-link:hover,
            .login-card a.login-link:focus {
                color: #fff !important;
                opacity: 1;
            }

        /* Checkbox sichtbar */
        .login-card .form-check-input {
            border-color: rgba(255,255,255,.7);
            background-color: rgba(255,255,255,.95);
        }

            /* Checkbox checked: blaues Häkchen */
            .login-card .form-check-input:checked {
                background-color: #fff;
                border-color: #fff;
                background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230078bc' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3 6-6'/%3e%3c/svg%3e");
            }

        /* Button: weiss */
        .login-card .btn-primary,
        .login-card button.btn-primary,
        .login-card a.btn.btn-primary {
            background: #fff !important;
            border-color: #fff !important;
            color: #0078bc !important;
        }

            .login-card .btn-primary:hover,
            .login-card button.btn-primary:hover,
            .login-card a.btn.btn-primary:hover {
                filter: brightness(.95);
            }


/* =========================================================
   REGISTER (wie Login: Navbar-Blau, Button weiss)
   ========================================================= */
.register-card {
    background-color: #0078bc;
    border: none;
    border-radius: 16px;
}

    .register-card .card-body {
        background: transparent;
    }

    .register-card,
    .register-card .form-label,
    .register-card .form-check-label,
    .register-card .text-muted,
    .register-card .small,
    .register-card .form-text {
        color: #fff !important;
    }

        .register-card .form-control {
            background: rgba(255, 255, 255, .95);
            border: 1px solid rgba(255, 255, 255, .55);
        }

            .register-card .form-control:focus {
                border-color: rgba(255, 255, 255, .9);
                box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .25);
            }

        .register-card .text-danger {
            color: #ffd1d1 !important;
        }

        /* Links (nur echte Links, keine Buttons) */
        .register-card .register-link,
        .register-card a.register-link,
        .register-card a.register-link:visited {
            color: rgba(255,255,255,.95) !important;
            text-decoration: underline;
        }

            .register-card a.register-link:hover,
            .register-card a.register-link:focus {
                color: #fff !important;
                opacity: 1;
            }

        /* Checkbox sichtbar + blaues Häkchen */
        .register-card .form-check-input {
            border-color: rgba(255,255,255,.7);
            background-color: rgba(255,255,255,.95);
        }

            .register-card .form-check-input:checked {
                background-color: #fff;
                border-color: #fff;
                background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230078bc' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3 6-6'/%3e%3c/svg%3e");
            }

        /* Button weiss */
        .register-card .btn-primary,
        .register-card button.btn-primary,
        .register-card a.btn.btn-primary {
            background: #fff !important;
            border-color: #fff !important;
            color: #0078bc !important;
        }

            .register-card .btn-primary:hover,
            .register-card button.btn-primary:hover,
            .register-card a.btn.btn-primary:hover {
                filter: brightness(.95);
            }

.howitworks-section {
    background-color: #eaf4ff; /* hellblau */
}

.minimum-anforderungen-section {
    background: #fff7cc; /* schönes hellblau */
}


/* ✅ Mobile-Fix: fixed-top -> sticky (Android Bug: Toggler erst nach Scroll sichtbar) */
@media (max-width: 991.98px) {
    nav.navbar.fixed-top.xennics-navbar {
        position: sticky !important; /* statt fixed */
        top: 0;
    }

    /* fixed-navbar Offset auf Mobile deaktivieren */
    body {
        padding-top: 0 !important;
    }
}

/* Default: fi zeigen, Emoji verstecken */
.lang-flag-emoji {
    display: none !important;
}

.lang-flag-fi {
    display: inline-block !important;
}

    /* fi Größe */
    .lang-flag-fi.fi {
        width: 18px;
        height: 12px;
        border-radius: 2px;
        display: inline-block;
        vertical-align: -2px;
    }

/* Nur wenn JS Mobile erkannt hat: Emoji zeigen, fi verstecken */
html.use-emoji-flags .lang-flag-fi {
    display: none !important;
}

html.use-emoji-flags .lang-flag-emoji {
    display: inline !important;
}

/* NUR Mobile (<= 991.98px) */
@media (max-width: 991.98px) {

    /* Standard-Carousels auf Mobile (optional: Höhe anpassen) */
    .carousel-img {
        height: 200px; /* bei Bedarf ändern */
        object-fit: cover;
        object-position: center center;
    }

    /* Slide2: rechte Seite bevorzugen (kein Balken, Zuschnitt links) */
    .carousel-img--right {
        object-position: 100% 50%;
    }

    /* Alternative (wenn du 100% vom Bild sehen willst -> evtl. Balken):
  .carousel-img--right{
    object-fit: contain;
    background: #000;
    object-position: right center;
  }
  */
}



/* Seite kann nicht mehr nach links gewischt werden  */
@media (max-width: 991.98px) {
    html, body {
        overscroll-behavior-x: none;
    }

    /* nur Content-Bereich blocken, Carousel bleibt frei */
    main {
        touch-action: pan-y;
    }
}