.google-review-box{
    display:inline-flex;
    align-items:center;
    gap:14px;

    padding:8px 18px;

    background:rgba(255,255,255,.10);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.18);
    border-radius:999px;

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

    width:fit-content;
    min-width:420px;
    height:52px;

    transition:.35s ease;
}

.google-review-box:hover{
    background:rgba(255,255,255,.15);
    transform:translateY(-2px);
}

.google-logo{
    width:28px;
    height:28px;
}

.google-stars{
    display:flex;
    align-items:center;
    gap:8px;
}

.stars{
    color:#FFC107;
    font-size:15px;
    letter-spacing:1px;
}

.score{
    color:#fff;
    font-size:16px;
    font-weight:700;
}

.google-text{
    display:flex;
    align-items:center;
    gap:10px;
}

.google-text strong{
    color:#fff;
    font-size:14px;
    font-weight:600;
}

.google-text small{
    color:rgba(255,255,255,.75);
    font-size:13px;
}

@media(max-width:768px){

.google-review-box{
    min-width:100%;
    height:auto;
    padding:10px 15px;
}

.google-text{
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
}

}

@media(max-width:768px){

.google-review-box{

    width:100%;
    justify-content:center;
    text-align:center;
    flex-direction:column;

}

.google-stars{
    justify-content:center;
}
#customCarousel1 {
    position: relative;
}
#customCarousel1 {
    position: relative;
}

.carousel-fixed-buttons {
    position: absolute;
    left: 50%;
    bottom: 100px;
    transform: translateX(-50%);
    z-index: 20;

    display: flex;
    gap: 12px;

    width: 100%;
    max-width: 1140px;
    padding: 0 15px;
}



}  
:root{--primary:#0d6efd;--dark:#07111f;--dark2:#0b1b2d;--text:#25364a;--light:#f5f8fc;--accent:#f6b51b}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Roboto,Arial,sans-serif;color:var(--text);background:#fff}a{text-decoration:none}
.header_top{background:#06101d;color:#fff;padding:9px 0;font-size:14px}.contact_nav{display:flex;justify-content:flex-end;gap:28px;padding:0 5%;flex-wrap:wrap}.contact_nav a,.contact_nav span{color:#fff}.contact_nav i{color:var(--accent);margin-right:7px}
.header_bottom{background:rgba(7,17,31,.98)}.navbar{padding:18px 5%}.navbar-brand{color:#fff!important;font-weight:900;letter-spacing:1px;font-size:22px}.navbar-nav{margin-left:auto;align-items:center;gap:8px}.nav-link{color:#fff!important;font-weight:500;padding:10px 15px!important;border-radius:5px}.nav-link:hover,.nav-link.active{background:var(--primary)}
.navbar-toggler{border-color:#fff}.navbar-toggler-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='white' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}
.hero{position:relative;min-height:580px;display:flex;align-items:center;background:var(--dark);overflow:hidden}.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42}.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,13,25,.93),rgba(4,13,25,.6),rgba(4,13,25,.2))}.hero_content{position:relative;z-index:2;color:#fff;max-width:760px;padding:90px 0}.badge{display:inline-block;background:rgba(246,181,27,.15);border:1px solid rgba(246,181,27,.55);color:var(--accent);padding:8px 14px;border-radius:30px;font-weight:700;margin-bottom:18px}
.hero h1 span{color:var(--accent)}.hero p{font-size:19px;line-height:1.7;color:#e4ebf4}
.btn1,.btn2{display:inline-flex;align-items:center;gap:9px;padding:14px 25px;border-radius:5px;font-weight:700;transition:.2s}.btn1{background:var(--primary);color:#fff}.btn1:hover{background:#0959c7;color:#fff;transform:translateY(-2px)}.btn2{border:1px solid #fff;color:#fff;margin-left:10px}.btn2:hover{background:#fff;color:var(--dark)}
.section{padding:80px 0}.light{background:var(--light)}.heading{margin-bottom:40px}.heading h2{font-size:40px;font-weight:800;color:var(--dark);margin-bottom:12px}.heading h2 span{color:var(--primary)}.heading p{max-width:760px;color:#65758a;line-height:1.7}
.card{height:100%;background:#fff;border:1px solid #e7edf5;border-radius:10px;padding:30px;box-shadow:0 8px 28px rgba(20,40,70,.07);transition:.2s}.card:hover{transform:translateY(-5px)}.icon{width:65px;height:65px;border-radius:10px;background:#eaf2ff;color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:27px;margin-bottom:20px}.card h3,.card h4{color:var(--dark);font-weight:800}.card p,.content p{line-height:1.8;color:#637489}
.page_hero{background:linear-gradient(100deg,var(--dark),#12345a);color:#fff;padding:85px 0}.page_hero h1{font-size:52px;font-weight:900}.page_hero p{font-size:18px;color:#d9e4f0;max-width:760px}
.about_img{min-height:400px;border-radius:12px;overflow:hidden}.about_img img{width:100%;height:100%;object-fit:cover}.checklist{list-style:none;padding:0}.checklist li{margin:14px 0;font-weight:500}.checklist i{color:#22a06b;margin-right:9px}
.stats{background:var(--dark);color:#fff;padding:55px 0}.stat{text-align:center}.stat strong{display:block;font-size:42px;color:var(--accent);font-weight:900}.stat span{color:#d8e2ee}
.cta{background:linear-gradient(100deg,#0b1b2d,#12345a);color:#fff;padding:65px 0}.cta h2{font-weight:800}.cta p{color:#d9e4f0}
.contact_box{background:var(--dark);color:#fff;padding:35px;border-radius:10px;height:100%}.contact_item{display:flex;gap:15px;margin:22px 0}.contact_item i{color:var(--accent);font-size:21px;width:24px}.contact_item a{color:#fff}.form-control{min-height:54px}.map{min-height:350px;background:#eef3f8;border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center;padding:25px}.map iframe{width:100%;height:350px;border:0}
.footer{background:#06101d;color:#b9c7d7;padding:60px 0 25px}.footer h4{color:#fff;font-weight:800}.footer a{color:#b9c7d7;display:block;margin:10px 0}.footer a:hover{color:#fff}.bottom{background:#030a12;color:#8493a4;text-align:center;padding:17px;font-size:14px}
@media(max-width:991px){.contact_nav{justify-content:center}.navbar-nav{margin-top:15px}.btn2{margin-left:0;margin-top:10px}.page_hero h1{font-size:42px}}
@media(max-width:575px){.hero{min-height:550px}.hero_content{padding:70px 15px}.hero h1{font-size:43px}.section{padding:60px 0}.heading h2{font-size:32px}.contact_nav{gap:10px 18px;font-size:12px}}

.slider_section{position:relative;min-height:580px;overflow:hidden}
.slider_bg_box{position:absolute;inset:0}
.slider_bg_box img{width:100%;height:100%;object-fit:cover;opacity:.42}
.slider_section:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,13,25,.93),rgba(4,13,25,.6),rgba(4,13,25,.2));z-index:1}
#customCarousel1,#customCarousel1 .carousel-inner,#customCarousel1 .carousel-item{min-height:580px}
#customCarousel1 .carousel-item{align-items:center}
.carousel-item.active,.carousel-item-next,.carousel-item-prev{display:flex}
.carousel-indicators{bottom:25px}
.carousel-indicators button{width:12px;height:12px;border-radius:50%}


/* Responsive Hero */
@media (max-width:991px){
.header_top .contact_nav{justify-content:center;text-align:center;gap:12px}
.navbar{padding:12px 4%}
.slider_section,
#customCarousel1,
#customCarousel1 .carousel-inner,
#customCarousel1 .carousel-item{min-height:520px}
.hero_content{max-width:100%;padding:80px 20px;text-align:center}
.hero_content h1{font-size:46px}
.hero_content p{font-size:17px}
.btn1,.btn2{display:block;width:100%;max-width:320px;margin:12px auto 0}
}

@media (max-width:767px){
.slider_section,
#customCarousel1,
#customCarousel1 .carousel-inner,
#customCarousel1 .carousel-item{min-height:470px}
.hero_content{padding:70px 18px}
.hero_content h1{font-size:36px;line-height:1.15}
.hero_content p{font-size:16px;line-height:1.7}
.badge{font-size:13px}
.heading h2{font-size:30px}
.section{padding:60px 0}
.card{padding:22px}
.about_img{min-height:260px}
.stat strong{font-size:34px}
}

@media (max-width:480px){
.slider_section,
#customCarousel1,
#customCarousel1 .carousel-inner,
#customCarousel1 .carousel-item{min-height:430px}
.hero_content{padding:60px 15px}
.hero_content h1{font-size:30px}
.hero_content p{font-size:15px}
.carousel-indicators{bottom:12px}
}
.navbar-brand {
    display: flex;
    align-items: center;
    gap: -10px;
}

.logo {
    width: 180px;
    height: 65px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}

.navbar-brand span {
    display: flex;
    align-items: center;
    white-space: nowrap;
    margin-left: -5px;
}
/* =====================================================
   MOBILE NAVBAR – LOGO + HAMBURGER IN EINER ZEILE
   ===================================================== */

@media (max-width: 991px) {

    .navbar {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        padding: 12px 15px;
    }

    .navbar-brand {
        display: flex;
        align-items: center;
        flex: 1 1 auto;
        min-width: 0;
        margin-right: 10px;
    }

    .navbar-brand .logo {
        width: 120px;
        height: 50px;
        object-fit: contain;
        flex-shrink: 0;
    }

    .navbar-brand span {
        font-size: 14px;
        white-space: nowrap;
        margin-left: 0;
    }

    .navbar-toggler {
        flex: 0 0 auto;
        margin-left: auto;
    }

    .navbar-collapse {
        width: 100%;
    }
}
/* =========================================
   MOBILE NAVBAR
   LOGO GANZ LINKS / MENÜ RECHTS
   ========================================= */

@media (max-width: 991px) {

    .navbar {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 10px 15px !important;
        width: 100%;
    }

    /* Logo + Schrift ganz links */
    .navbar-brand {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

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

        margin-right: auto !important;

        text-align: left !important;
    }

    .navbar-brand .logo {
        width: 120px;
        height: 50px;
        object-fit: contain;
    }

    .navbar-brand span {
        margin-left: 0 !important;
        text-align: left !important;
        white-space: nowrap;
    }

    /* Hamburger / X ganz rechts */
    .navbar-toggler {
        margin-left: auto !important;
        margin-right: 0 !important;
        flex-shrink: 0;
    }

    /* Wenn Menü geöffnet → Logo verschwindet */
    .navbar:has(.navbar-collapse.show) .navbar-brand {
        opacity: 0;
        visibility: hidden;
        transform: translateX(-20px);
        pointer-events: none;
    }
}


/* Kleine Handys */
@media (max-width: 480px) {

    .navbar {
        padding: 8px 12px !important;
    }

    .navbar-brand .logo {
        width: 105px;
        height: 43px;
    }

    .navbar-brand span {
        font-size: 11px;
    }
}
/* =========================================
   MOBILE NAVBAR – LOGO VERSTECKEN BEIM ÖFFNEN
   ========================================= */

@media (max-width: 991px) {

    .navbar {
        position: relative;
    }

    /* Logo + Schrift */
    .navbar-brand {
        display: flex;
        align-items: center;
        gap: 0;
        transition: opacity .25s ease, transform .25s ease;
    }

    /* Wenn Menü geöffnet ist */
    .navbar:has(.navbar-collapse.show) .navbar-brand {
        opacity: 0;
        visibility: hidden;
        transform: translateX(-20px);
        pointer-events: none;
    }

    /* Hamburger */
    .navbar-toggler {
        position: relative;
        z-index: 1051;
        border: 0;
        padding: 8px;
    }

    .navbar-toggler:focus {
        box-shadow: none;
    }

    /* Hamburger-Symbol entfernen */
    .navbar-toggler-icon {
        background-image: none !important;
        width: 28px;
        height: 22px;
        position: relative;
        display: block;
    }

    /* Drei Linien */
    .navbar-toggler-icon::before,
    .navbar-toggler-icon::after {
        content: "";
        position: absolute;
        left: 0;
        width: 28px;
        height: 2px;
        background: #fff;
        transition: .3s ease;
    }

    .navbar-toggler-icon::before {
        top: 4px;
        box-shadow: 0 8px 0 #fff;
    }

    .navbar-toggler-icon::after {
        top: 20px;
    }

    /* =====================================
       HAMBURGER → X
       ===================================== */

    .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
        top: 11px;
        box-shadow: none;
        transform: rotate(45deg);
    }

    .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
        top: 11px;
        transform: rotate(-45deg);
    }

    /* Menü */
    .navbar-collapse {
        text-align: center;
    }

    .navbar-nav {
        align-items: center;
    }
}
/* =====================================================
   HOMEPAGE CAROUSEL – KOMPAKTER / WEITER NACH OBEN
   ===================================================== */

/* HERO-BEREICH */
.slider_section {
    position: relative;
    min-height: 540px;
    height: 540px;
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* HINTERGRUNDBILD */
.slider_section .slider_bg_box {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.slider_section .slider_bg_box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.42;
}

/* DUNKLE ÜBERLAGERUNG */
.slider_section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background: linear-gradient(
        90deg,
        rgba(4, 13, 25, 0.93),
        rgba(4, 13, 25, 0.65),
        rgba(4, 13, 25, 0.35)
    );
}

/* CAROUSEL */
.slider_section #customCarousel1 {
    position: relative !important;
    z-index: 10 !important;
    width: 100%;
    min-height: 540px;
    height: 540px;
    display: flex;
    align-items: center;
}

/* CAROUSEL-INHALT */
.slider_section #customCarousel1 .carousel-inner {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.slider_section #customCarousel1 .carousel-item,
.slider_section #customCarousel1 .carousel-item.active {
    position: relative !important;
    z-index: 10 !important;
    width: 100%;
    min-height: 540px;
    height: 540px;

    display: flex !important;
    align-items: center;
}

/* HERO-INHALT ETWAS NACH OBEN */
.slider_section .hero_content {
    padding: 40px 0 !important;
    transform: translateY(-30px);
}

/* CAROUSEL-PUNKTE */
.slider_section .carousel-indicators {
    bottom: 20px !important;
}

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

@media (max-width: 991px) {

    .slider_section,
    .slider_section #customCarousel1,
    .slider_section #customCarousel1 .carousel-item,
    .slider_section #customCarousel1 .carousel-item.active {
        min-height: 520px;
        height: 520px;
    }

    .slider_section .hero_content {
        padding: 30px 20px !important;
        transform: translateY(-20px);
    }

}

/* =====================================================
   HANDY
   ===================================================== */

@media (max-width: 767px) {

    .slider_section,
    .slider_section #customCarousel1,
    .slider_section #customCarousel1 .carousel-item,
    .slider_section #customCarousel1 .carousel-item.active {
        min-height: 480px;
        height: 480px;
    }

    .slider_section .hero_content {
        padding: 25px 18px !important;
        transform: translateY(-15px);
    }

    .slider_section .carousel-indicators {
        bottom: 15px !important;
    }

}

/* KLEINE HANDYS */
@media (max-width: 480px) {

    .slider_section,
    .slider_section #customCarousel1,
    .slider_section #customCarousel1 .carousel-item,
    .slider_section #customCarousel1 .carousel-item.active {
        min-height: 450px;
        height: 450px;
    }

    .slider_section .hero_content {
        transform: translateY(-10px);
    }

}

/* =====================================================
   BUTTONS – IMMER IM VORDERGRUND
   ===================================================== */

.slider_section .hero-action-box .hero-btn-offer,
.slider_section .hero-action-box .hero-btn-call {
    position: relative !important;

    z-index: 10000 !important;

    display: flex !important;

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

    width: 100% !important;

    min-height: 58px;

    padding: 15px 20px !important;

    margin: 0 0 15px 0 !important;

    border-radius: 5px !important;

    font-size: 17px;
    font-weight: 700;

    text-align: center;
    text-decoration: none;

    cursor: pointer;

    transform: none !important;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

/* =========================================
   KOSTENLOSES ANGEBOT – BLAU
   ========================================= */

.slider_section .hero-action-box .hero-btn-offer {
    background: #0d6efd !important;
    color: #ffffff !important;

    border: 1px solid #0d6efd !important;
}

.slider_section .hero-action-box .hero-btn-offer:hover {
    background: #0959c7 !important;
    border-color: #0959c7 !important;

    color: #ffffff !important;

    transform: translateY(-2px) !important;
}

/* =========================================
   JETZT ANRUFEN – BLAU
   ========================================= */

.slider_section .hero-action-box .hero-btn-call {
    background: #0d6efd !important;
    color: #ffffff !important;

    border: 1px solid #0d6efd !important;
}

.slider_section .hero-action-box .hero-btn-call:hover {
    background: #0959c7 !important;
    border-color: #0959c7 !important;

    color: #ffffff !important;

    transform: translateY(-2px) !important;
}

/* =====================================================
   GOOGLE-BEWERTUNG
   ===================================================== */

.slider_section .hero-action-box .google-review-box {
    position: relative !important;
    z-index: 10000 !important;

    display: flex !important;

    align-items: center;
    gap: 14px;

    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;

    margin-top: 20px;
    padding: 14px 16px;

    background: #f5f8fc;

    border: 1px solid #e7edf5;
    border-radius: 10px;

    box-shadow: none;

    transform: none !important;
}

.slider_section .hero-action-box .google-review-box:hover {
    background: #f5f8fc;
    transform: none !important;
}

.slider_section .hero-action-box .google-logo {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.slider_section .hero-action-box .google-stars {
    display: flex;
    align-items: center;
    gap: 8px;
}

.slider_section .hero-action-box .stars {
    color: #ffc107;
}

.slider_section .hero-action-box .score {
    color: #07111f;
    font-weight: 700;
}

.slider_section .hero-action-box .google-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.slider_section .hero-action-box .google-text strong {
    color: #07111f;
}

.slider_section .hero-action-box .google-text small {
    color: #637489;
}

/* =====================================================
   ALTE FIXED BUTTONS SICHER ENTFERNEN
   ===================================================== */

.carousel-fixed-buttons {
    display: none !important;
}

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

@media (max-width: 991px) {

    .slider_section {
        min-height: auto;
        display: block;
        padding: 50px 0;
    }

    .slider_section #customCarousel1,
    .slider_section #customCarousel1 .carousel-item,
    .slider_section #customCarousel1 .carousel-item.active {
        min-height: auto;
    }

    .slider_section .hero-row {
        min-height: auto;
    }

    .slider_section .hero_content {
        text-align: left;
        padding: 20px 0;
    }

    .slider_section .hero-action-box {
        margin-top: 30px;
    }

}

@media (max-width: 767px) {

    .slider_section {
        padding: 35px 0;
    }

    .slider_section .hero_content h1 {
        font-size: 36px;
    }

    .slider_section .hero_content p {
        font-size: 16px;
    }

    .slider_section .hero-action-box {
        padding: 25px 20px;
    }

    .slider_section .hero-action-box h3 {
        font-size: 22px;
    }

    .slider_section .hero-action-box .hero-btn-offer,
    .slider_section .hero-action-box .hero-btn-call {
        min-height: 55px;
        font-size: 16px;
    }

}

@media (max-width: 480px) {

    .slider_section .hero_content h1 {
        font-size: 30px;
    }

    .slider_section .hero-action-box {
        padding: 22px 15px;
    }

}
/* =========================================
   RECHTE HERO-BOX
   ========================================= */

.hero_action_box {
    color: #ffffff;
}


/* =========================================
   ÜBERSCHRIFT UND TEXT WEISS
   ========================================= */

.hero_action_box h3 {
    color: #ffffff !important;
}

.hero_action_box p {
    color: #ffffff !important;
}


/* =========================================
   BUTTONS GLEICHE GRÖSSE + ABSTAND
   ========================================= */

.hero_action_box .btn1,
.hero_action_box .btn2 {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 58px !important;

    padding: 0 20px !important;

    box-sizing: border-box !important;

    margin: 0 0 18px 0 !important;

    text-align: center !important;

    position: relative !important;
    z-index: 100 !important;
}


/* =========================================
   LETZTER BUTTON – ABSTAND NACH UNTEN
   ========================================= */

.hero_action_box .btn2 {
    margin-bottom: 24px !important;
}
/* LOGO GANZ LINKS OBEN */

.header_bottom {
    position: relative;
}

.header_bottom .container-fluid {
    padding-left: 0 !important;
}

.navbar {
    padding-left: 0 !important;
}

.navbar-brand {
    margin-left: 0 !important;
    padding-left: 10px !important;
}
/* =========================================
   LOGO HÖHER POSITIONIEREN
   ========================================= */

.header_bottom {
    position: relative;
}

.navbar-brand {
    position: relative;
    top: -35px; /* Logo weiter nach oben */
    z-index: 1000;
    margin-bottom: -35px;
}
/* =========================================
   ÜBER UNS CAROUSEL
========================================= */

.hero-row {
    min-height: 500px;
}

.hero_content {
    padding: 60px 0;
}

.hero_content p {
    max-width: 650px;
    margin-bottom: 0;
}

.hero_action_box {
    max-width: 430px;
    margin-left: auto;
}

.hero_action_box .btn1,
.hero_action_box .btn2 {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 12px;
}

@media (max-width: 991px) {

    .hero-row {
        min-height: auto;
    }

    .hero_content {
        padding: 60px 0 30px;
    }

    .hero_action_box {
        max-width: 100%;
        margin: 0 0 60px;
    }

}
.review-carousel-card {
    background: #ffffff;
    padding: 40px 60px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10);
    min-height: 240px;
}

.review-stars {
    font-size: 28px;
    color: #fbbc04;
    margin-bottom: 20px;
}

.review-text {
    font-size: 18px;
    line-height: 1.7;
    margin-bottom: 20px;
}

.review-carousel-card h5 {
    font-weight: 700;
    margin-bottom: 0;
}

#contactReviewCarousel .carousel-control-prev,
#contactReviewCarousel .carousel-control-next {
    width: 8%;
}

#contactReviewCarousel .carousel-control-prev-icon,
#contactReviewCarousel .carousel-control-next-icon {
    filter: invert(1);
}

#contactReviewCarousel .carousel-indicators button {
    background-color: #000;
}

@media (max-width: 768px) {

    .review-carousel-card {
        padding: 30px 25px;
        min-height: 260px;
    }

    .review-text {
        font-size: 16px;
    }

}
/* =========================================
   UMZUGSANFRAGE – MODERN / KOMPAKT
========================================= */

.request-section {
    position: relative;
    padding: 55px 0;
    background: linear-gradient(
        180deg,
        #0c1722 0%,
        #101e2b 100%
    );
}


/* =========================
   ÜBERSCHRIFT
========================= */

.request-heading {
    max-width: 720px;
    margin: 0 auto 35px;
}


.request-badge {
    display: inline-block;

    margin-bottom: 14px;
    padding: 7px 15px;

    border-radius: 50px;

    color: #9fc9f4;

    background: rgba(67, 125, 180, 0.16);

    border: 1px solid rgba(126, 178, 227, 0.2);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 1.5px;
}


.request-heading h1 {
    margin-bottom: 10px;

    color: #ffffff;

    font-size: 38px;
    font-weight: 800;
}


.request-heading p {
    margin: 0;

    color: #9eafc1;

    font-size: 16px;
}


/* =========================
   GROSSE FORMULAR BOX
========================= */

.request-form-box {
    position: relative;

    padding: 26px;

    border-radius: 28px;

    background: rgba(18, 33, 47, 0.88);

    border: 1px solid rgba(106, 142, 175, 0.24);

    box-shadow:
        0 20px 55px rgba(0, 0, 0, 0.25);

    overflow: hidden;
}


/* GLAS EFFEKT */

.request-form-box::before {
    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.025),
        rgba(255, 255, 255, 0)
    );

    pointer-events: none;
}


.request-form-box form {
    position: relative;
    z-index: 1;
}


/* =========================
   FORMULAR SEKTION
========================= */

.form-section {
    margin-bottom: 16px;

    padding: 24px;

    border-radius: 22px;

    background: rgba(24, 43, 59, 0.72);

    border: 1px solid rgba(106, 142, 175, 0.2);
}


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

.form-section-header {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 20px;
}


.form-section-header h2 {
    margin: 0 0 3px;

    color: #d4e0ec;

    font-size: 19px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 1.8px;
}


.form-section-header p {
    margin: 0;

    color: #8497aa;

    font-size: 13px;
}


/* ICON */

.form-section-icon {
    display: flex;

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

    width: 42px;
    height: 42px;

    flex-shrink: 0;

    border-radius: 14px;

    color: #7dbdff;

    background: rgba(71, 143, 212, 0.13);

    border: 1px solid rgba(99, 162, 223, 0.18);

    font-size: 17px;
}


.form-section-icon.icon-red {
    color: #ff8585;

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


.form-section-icon.icon-green {
    color: #45d9b0;

    background: rgba(69, 217, 176, 0.08);
}


/* =========================
   LABELS
========================= */

.request-form-box .form-label {
    display: block;

    margin-bottom: 7px;

    color: #aebfd1;

    font-size: 15px;

    font-weight: 600;
}


/* =========================
   INPUTS
========================= */

.request-form-box .form-control {
    width: 100%;

    min-height: 52px;

    padding: 11px 17px;

    color: #edf3f8;

    background: rgba(39, 59, 78, 0.88);

    border: 1px solid rgba(108, 143, 175, 0.28);

    border-radius: 17px;

    font-size: 16px;

    box-shadow: none;

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}


/* PLACEHOLDER */

.request-form-box .form-control::placeholder {
    color: #8fa1b4;
    opacity: 1;
}


/* FOCUS */

.request-form-box .form-control:focus {
    color: #ffffff;

    background: rgba(44, 66, 88, 0.98);

    border-color: rgba(93, 171, 255, 0.7);

    outline: none;

    box-shadow:
        0 0 0 3px rgba(54, 142, 235, 0.1);
}


/* SELECT */

.request-form-box select.form-control {
    cursor: pointer;

    color: #edf3f8;
}


/* DATUM */

.request-form-box input[type="date"] {
    color-scheme: dark;
}


/* =========================
   TEXTAREA
========================= */

.request-form-box textarea.form-control {
    min-height: 130px;

    padding-top: 14px;

    resize: vertical;
}


/* =========================
   ZUSATZLEISTUNGEN
========================= */

.services-grid {
    display: grid;

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

    gap: 10px;
}


/* CHECKBOX KARTE */

.service-check {
    position: relative;

    display: flex;

    align-items: center;

    gap: 10px;

    min-height: 50px;

    padding: 11px 14px;

    color: #c6d3df;

    background: rgba(39, 59, 78, 0.52);

    border: 1px solid rgba(108, 143, 175, 0.18);

    border-radius: 15px;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}


.service-check:hover {
    background: rgba(47, 70, 93, 0.72);

    border-color: rgba(109, 174, 239, 0.45);
}


/* CHECKBOX VERSTECKEN */

.service-check input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}


/* CUSTOM CHECKBOX */

.service-check span {
    display: flex;

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

    width: 21px;
    height: 21px;

    flex-shrink: 0;

    border-radius: 7px;

    color: transparent;

    background: rgba(25, 40, 55, 0.9);

    border: 1px solid rgba(126, 157, 186, 0.35);

    transition: all 0.2s ease;
}


.service-check span i {
    font-size: 11px;
}


/* CHECKED */

.service-check input:checked + span {
    color: #ffffff;

    background: #2f8de4;

    border-color: #2f8de4;
}


/* =========================
   DATENSCHUTZ
========================= */

.form-privacy {
    padding: 8px 5px 16px;

    color: #aebfd1;

    font-size: 14px;
}


.form-privacy label {
    display: flex;

    align-items: center;

    gap: 8px;

    cursor: pointer;
}


.form-privacy input[type="checkbox"] {
    width: 17px;
    height: 17px;

    flex-shrink: 0;

    accent-color: #2d8cff;

    cursor: pointer;
}


.form-privacy a {
    color: #7fc0ff;

    font-weight: 600;

    text-decoration: none;
}


.form-privacy a:hover {
    color: #ffffff;

    text-decoration: underline;
}


/* =========================
   ABSENDEN
========================= */

.form-submit {
    text-align: center;

    margin-top: 3px;
}


.request-form-box button.btn1 {
    min-width: 240px;

    padding: 14px 28px;

    border-radius: 15px;

    font-size: 16px;

    font-weight: 700;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.request-form-box button.btn1:hover {
    transform: translateY(-2px);

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


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

@media (max-width: 991px) {

    .request-section {
        padding: 40px 0;
    }


    .request-form-box {
        padding: 20px;
    }


    .form-section {
        padding: 20px;
    }

}


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

@media (max-width: 768px) {

    .request-section {
        padding: 30px 0;
    }


    .request-heading {
        margin-bottom: 25px;
    }


    .request-heading h1 {
        font-size: 30px;
    }


    .request-heading p {
        font-size: 14px;
    }


    .request-form-box {
        padding: 12px;

        border-radius: 20px;
    }


    .form-section {
        padding: 18px 14px;

        margin-bottom: 12px;

        border-radius: 18px;
    }


    .form-section-header {
        gap: 10px;

        margin-bottom: 16px;
    }


    .form-section-icon {
        width: 36px;
        height: 36px;

        border-radius: 11px;

        font-size: 15px;
    }


    .form-section-header h2 {
        font-size: 16px;

        letter-spacing: 1.2px;
    }


    .form-section-header p {
        font-size: 12px;
    }


    .request-form-box .form-label {
        font-size: 14px;
    }


    .request-form-box .form-control {
        min-height: 48px;

        padding: 10px 14px;

        border-radius: 14px;

        font-size: 15px;
    }


    .request-form-box textarea.form-control {
        min-height: 115px;
    }


    .services-grid {
        grid-template-columns: 1fr;
    }


    .service-check {
        min-height: 46px;

        font-size: 14px;
    }


    .request-form-box button.btn1 {
        width: 100%;

        min-width: 0;

        padding: 14px 18px;
    }

}
/* =========================================
   UMZUGSANFRAGE – MODERN / KOMPAKT
   GELB & WEISS STYLE
========================================= */

.request-section {
    position: relative;
    padding: 55px 0;
    background: linear-gradient(
        180deg,
        #0c1722 0%,
        #101e2b 100%
    );
}


/* =========================
   ÜBERSCHRIFT
========================= */

.request-heading {
    max-width: 720px;
    margin: 0 auto 35px;
}


.request-badge {
    display: inline-block;

    margin-bottom: 14px;
    padding: 7px 15px;

    border-radius: 50px;

    color: #fbbc04;

    background: rgba(251, 188, 4, 0.10);

    border: 1px solid rgba(251, 188, 4, 0.35);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 1.5px;
}


.request-heading h1 {
    margin-bottom: 10px;

    color: #ffffff;

    font-size: 38px;
    font-weight: 800;
}


.request-heading p {
    margin: 0;

    color: #d6dde5;

    font-size: 16px;
}


/* =========================
   GROSSE FORMULAR BOX
========================= */

.request-form-box {
    position: relative;

    padding: 26px;

    border-radius: 28px;

    background: rgba(18, 33, 47, 0.88);

    border: 1px solid rgba(106, 142, 175, 0.24);

    box-shadow:
        0 20px 55px rgba(0, 0, 0, 0.25);

    overflow: hidden;
}


/* GLAS EFFEKT */

.request-form-box::before {
    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.025),
        rgba(255, 255, 255, 0)
    );

    pointer-events: none;
}


.request-form-box form {
    position: relative;
    z-index: 1;
}


/* =========================
   FORMULAR SEKTION
========================= */

.form-section {
    margin-bottom: 16px;

    padding: 24px;

    border-radius: 22px;

    background: rgba(24, 43, 59, 0.72);

    border: 1px solid rgba(106, 142, 175, 0.2);
}


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

.form-section-header {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 20px;
}


.form-section-header h2 {
    margin: 0 0 3px;

    color: #fbbc04;

    font-size: 19px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 1.8px;
}


.form-section-header p {
    margin: 0;

    color: #d6dde5;

    font-size: 13px;
}


/* =========================
   ICONS – GELB
========================= */

.form-section-icon,
.form-section-icon.icon-red,
.form-section-icon.icon-green {
    display: flex;

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

    width: 42px;
    height: 42px;

    flex-shrink: 0;

    border-radius: 14px;

    color: #fbbc04;

    background: rgba(251, 188, 4, 0.10);

    border: 1px solid rgba(251, 188, 4, 0.28);

    font-size: 17px;
}


/* =========================
   LABELS – WEISS
========================= */

.request-form-box .form-label {
    display: block;

    margin-bottom: 7px;

    color: #ffffff;

    font-size: 15px;

    font-weight: 600;
}


/* =========================
   INPUTS
========================= */

.request-form-box .form-control {
    width: 100%;

    min-height: 52px;

    padding: 11px 17px;

    color: #edf3f8;

    background: rgba(39, 59, 78, 0.88);

    border: 1px solid rgba(108, 143, 175, 0.28);

    border-radius: 17px;

    font-size: 16px;

    box-shadow: none;

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}


/* PLACEHOLDER */

.request-form-box .form-control::placeholder {
    color: #aeb9c5;
    opacity: 1;
}


/* FOCUS – GELB */

.request-form-box .form-control:focus {
    color: #ffffff;

    background: rgba(44, 66, 88, 0.98);

    border-color: rgba(251, 188, 4, 0.75);

    outline: none;

    box-shadow:
        0 0 0 3px rgba(251, 188, 4, 0.10);
}


/* SELECT */

.request-form-box select.form-control {
    cursor: pointer;

    color: #edf3f8;
}


/* DATUM */

.request-form-box input[type="date"] {
    color-scheme: dark;
}


/* =========================
   TEXTAREA
========================= */

.request-form-box textarea.form-control {
    min-height: 130px;

    padding-top: 14px;

    resize: vertical;
}


/* =========================
   ZUSATZLEISTUNGEN
========================= */

.services-grid {
    display: grid;

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

    gap: 10px;
}


/* CHECKBOX KARTE */

.service-check {
    position: relative;

    display: flex;

    align-items: center;

    gap: 10px;

    min-height: 50px;

    padding: 11px 14px;

    color: #ffffff;

    background: rgba(39, 59, 78, 0.52);

    border: 1px solid rgba(108, 143, 175, 0.18);

    border-radius: 15px;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}


.service-check:hover {
    background: rgba(47, 70, 93, 0.72);

    border-color: rgba(251, 188, 4, 0.55);
}


/* CHECKBOX VERSTECKEN */

.service-check input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}


/* CUSTOM CHECKBOX */

.service-check span {
    display: flex;

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

    width: 21px;
    height: 21px;

    flex-shrink: 0;

    border-radius: 7px;

    color: transparent;

    background: rgba(25, 40, 55, 0.9);

    border: 1px solid rgba(251, 188, 4, 0.45);

    transition: all 0.2s ease;
}


.service-check span i {
    font-size: 11px;
}


/* CHECKED – GELB */

.service-check input:checked + span {
    color: #111111;

    background: #fbbc04;

    border-color: #fbbc04;
}


/* =========================
   DATENSCHUTZ
========================= */

.form-privacy {
    padding: 8px 5px 16px;

    color: #ffffff;

    font-size: 14px;
}


.form-privacy label {
    display: flex;

    align-items: center;

    gap: 8px;

    cursor: pointer;
}


.form-privacy input[type="checkbox"] {
    width: 17px;
    height: 17px;

    flex-shrink: 0;

    accent-color: #fbbc04;

    cursor: pointer;
}


.form-privacy a {
    color: #fbbc04;

    font-weight: 600;

    text-decoration: none;
}


.form-privacy a:hover {
    color: #ffffff;

    text-decoration: underline;
}


/* =========================
   ABSENDEN
========================= */

.form-submit {
    text-align: center;

    margin-top: 3px;
}


.request-form-box button.btn1 {
    min-width: 240px;

    padding: 14px 28px;

    border-radius: 15px;

    font-size: 16px;

    font-weight: 700;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.request-form-box button.btn1:hover {
    transform: translateY(-2px);

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


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

@media (max-width: 991px) {

    .request-section {
        padding: 40px 0;
    }


    .request-form-box {
        padding: 20px;
    }


    .form-section {
        padding: 20px;
    }

}


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

@media (max-width: 768px) {

    .request-section {
        padding: 30px 0;
    }


    .request-heading {
        margin-bottom: 25px;
    }


    .request-heading h1 {
        font-size: 30px;
    }


    .request-heading p {
        font-size: 14px;
    }


    .request-form-box {
        padding: 12px;

        border-radius: 20px;
    }


    .form-section {
        padding: 18px 14px;

        margin-bottom: 12px;

        border-radius: 18px;
    }


    .form-section-header {
        gap: 10px;

        margin-bottom: 16px;
    }


    .form-section-icon,
    .form-section-icon.icon-red,
    .form-section-icon.icon-green {
        width: 36px;
        height: 36px;

        border-radius: 11px;

        font-size: 15px;
    }


    .form-section-header h2 {
        font-size: 16px;

        letter-spacing: 1.2px;
    }


    .form-section-header p {
        font-size: 12px;
    }


    .request-form-box .form-label {
        font-size: 14px;
    }


    .request-form-box .form-control {
        min-height: 48px;

        padding: 10px 14px;

        border-radius: 14px;

        font-size: 15px;
    }


    .request-form-box textarea.form-control {
        min-height: 115px;
    }


    .services-grid {
        grid-template-columns: 1fr;
    }


    .service-check {
        min-height: 46px;

        font-size: 14px;
    }


    .request-form-box button.btn1 {
        width: 100%;

        min-width: 0;

        padding: 14px 18px;
    }

}
/* =========================================
   D.C. UMZÜGE – TEXT UND BILD GLEICH HOCH
========================================= */

.about-section .about-row {
    align-items: stretch !important;
}

.about-section .content-column,
.about-section .image-column {
    display: flex;
}

/* Textbereich */
.about-section .content {
    width: 100%;
    height: 100%;
}

/* Bildcontainer */
.about-section .about_img {
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    border-radius: 18px;
}

/* Bild füllt die gesamte Höhe */
.about-section .about_img img {
    width: 100%;
    height: 100%;
    min-height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    border-radius: 18px;
}


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

@media (max-width: 991px) {

    .about-section .about-row {
        align-items: center !important;
    }

    .about-section .content-column,
    .about-section .image-column {
        display: block;
    }

    .about-section .content {
        height: auto;
    }

    .about-section .about_img {
        height: 350px;
        min-height: 0;
    }

    .about-section .about_img img {
        width: 100%;
        height: 100%;
        min-height: 0;
        object-fit: cover;
    }
}


@media (max-width: 576px) {

    .about-section .about_img {
        height: 260px;
        border-radius: 14px;
    }

    .about-section .about_img img {
        border-radius: 14px;
    }
}
/* =========================================
   HERO / CAROUSEL – BESSERE ABSTÄNDE
========================================= */

.hero_content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Abstand unter dem Badge */
.hero_content .badge {
    margin-bottom: 20px;
}

/* Überschrift */
.hero_content h1 {
    margin: 0 0 25px 0;
}

/* Text */
.hero_content p {
    margin: 0 0 30px 0;
    max-width: 650px;
}

/* Buttons */
.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 30px;
}

/* Google Bewertung */
.google-review-box {
    margin-top: 10px;
}
/* =====================================================
   FINAL HERO / CAROUSEL RESPONSIVE FIX
   Desktop, Tablet und kleine Handys
   ===================================================== */

/* -----------------------------------------------------
   GRUNDEINSTELLUNG
   ----------------------------------------------------- */

.slider_section {
    position: relative !important;
    min-height: 540px !important;
    height: 540px !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.slider_section #customCarousel1,
.slider_section #customCarousel1 .carousel-inner,
.slider_section #customCarousel1 .carousel-item,
.slider_section #customCarousel1 .carousel-item.active {
    width: 100%;
    min-height: 540px !important;
    height: 540px !important;
}

/* Jeder Slide bleibt korrekt ausgerichtet */

.slider_section #customCarousel1 .carousel-item,
.slider_section #customCarousel1 .carousel-item.active {
    display: flex !important;
    align-items: center !important;
}

/* Container */

.slider_section .container {
    position: relative;
    z-index: 10;
}

/* Hero-Zeile */

.slider_section .hero-row {
    width: 100%;
    min-height: 500px !important;
    align-items: center !important;
}

/* -----------------------------------------------------
   LINKE SEITE
   Dein bestehender Text bleibt gleich
   ----------------------------------------------------- */

.slider_section .hero_content {
    position: relative;
    z-index: 20;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    padding: 0 !important;
    transform: translateY(-20px) !important;
}

/* Überschrift */

.slider_section .hero_content h1 {
    margin-top: 0;
}

/* -----------------------------------------------------
   RECHTE SEITE
   TRANSPARENTE UMZUGS-ANIMATION
   ----------------------------------------------------- */

.hero-animation-side {
    position: relative;
    z-index: 5;

    width: 100%;
    min-height: 420px;

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

    pointer-events: none;
}

/* Die transparente Animation */

.umzugs-animation {
    display: block;

    width: 100%;
    max-width: 500px;
    height: auto;

    max-height: 420px;

    object-fit: contain;

    background: transparent;

    animation: movingAnimation 3.5s ease-in-out infinite;
}

/* Kleine, professionelle Bewegung */

@keyframes movingAnimation {

    0% {
        transform: translateY(0) translateX(0);
    }

    50% {
        transform: translateY(-8px) translateX(5px);
    }

    100% {
        transform: translateY(0) translateX(0);
    }

}

/* -----------------------------------------------------
   CAROUSEL PUNKTE
   ----------------------------------------------------- */

.slider_section .carousel-indicators {
    z-index: 30;
    bottom: 20px !important;
}

/* =====================================================
   TABLET
   768px bis 991px
   ===================================================== */

@media (max-width: 991px) {

    .slider_section {
        min-height: 520px !important;
        height: 520px !important;
        padding: 0 !important;
    }

    .slider_section #customCarousel1,
    .slider_section #customCarousel1 .carousel-inner,
    .slider_section #customCarousel1 .carousel-item,
    .slider_section #customCarousel1 .carousel-item.active {
        min-height: 520px !important;
        height: 520px !important;
    }

    .slider_section .hero-row {
        min-height: 480px !important;
    }

    /* Linke Seite bleibt links */

    .slider_section .hero_content {
        padding: 0 !important;
        transform: translateY(-10px) !important;
        text-align: left !important;
        align-items: flex-start !important;
    }

    /* Animation etwas kleiner */

    .hero-animation-side {
        min-height: 350px;
    }

    .umzugs-animation {
        max-width: 390px;
        max-height: 350px;
    }

    /* Buttons nicht verändern */

    .slider_section .hero-buttons {
        justify-content: flex-start;
    }

}


/* =====================================================
   HANDY
   bis 767px
   ===================================================== */

@media (max-width: 767px) {

    .slider_section {
        min-height: 500px !important;
        height: auto !important;
        padding: 40px 0 55px !important;
    }

    .slider_section #customCarousel1,
    .slider_section #customCarousel1 .carousel-inner,
    .slider_section #customCarousel1 .carousel-item,
    .slider_section #customCarousel1 .carousel-item.active {
        min-height: auto !important;
        height: auto !important;
    }

    .slider_section #customCarousel1 .carousel-item,
    .slider_section #customCarousel1 .carousel-item.active {
        align-items: flex-start !important;
    }

    /* Reihenfolge auf Handy */

    .slider_section .hero-row {
        min-height: auto !important;
    }

    /* Text oben */

    .slider_section .hero_content {
        transform: none !important;

        padding: 15px 0 25px !important;

        text-align: center !important;
        align-items: center !important;
    }

    .slider_section .hero_content h1 {
        font-size: 36px !important;
    }

    .slider_section .hero_content p {
        font-size: 16px !important;
    }

    /* Buttons zentriert */

    .slider_section .hero-buttons {
        width: 100%;
        justify-content: center;
    }

    /* Animation unter dem Text */

    .hero-animation-side {
        min-height: 280px;

        margin-top: -10px;
    }

    .umzugs-animation {
        width: 85%;
        max-width: 360px;
        max-height: 280px;
    }

    /* Google Box */

    .google-review-box {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 420px;
    }

}


/* =====================================================
   KLEINE HANDYS
   bis 480px
   ===================================================== */

@media (max-width: 480px) {

    .slider_section {
        padding: 25px 0 45px !important;
    }

    /* Badge */

    .slider_section .hero_content .badge {
        font-size: 12px;
        padding: 7px 12px;
        margin-bottom: 14px;
    }

    /* Überschrift */

    .slider_section .hero_content h1 {
        font-size: 30px !important;
        line-height: 1.15;
        margin-bottom: 18px;
    }

    /* Beschreibung */

    .slider_section .hero_content p {
        font-size: 15px !important;
        line-height: 1.6;
        margin-bottom: 22px;
    }

    /* Buttons */

    .slider_section .hero-buttons {
        gap: 10px;
        margin-bottom: 20px;
    }

    .slider_section .hero-buttons .btn1,
    .slider_section .hero-buttons .btn2 {
        width: 100%;
        margin-left: 0 !important;
    }

    /* Animation kleiner */

    .hero-animation-side {
        min-height: 220px;
    }

    .umzugs-animation {
        width: 90%;
        max-width: 280px;
        max-height: 220px;
    }

    /* Google Bewertung */

    .google-review-box {
        padding: 10px 12px !important;
        flex-direction: column !important;
        gap: 6px !important;

        text-align: center;
    }

    .google-text {
        align-items: center !important;
    }

    .google-stars {
        justify-content: center;
    }

    /* Carousel Punkte */

    .slider_section .carousel-indicators {
        bottom: 10px !important;
    }

}


/* =====================================================
   SEHR KLEINE HANDYS
   bis 360px
   ===================================================== */

@media (max-width: 360px) {

    .slider_section .hero_content h1 {
        font-size: 27px !important;
    }

    .slider_section .hero_content p {
        font-size: 14px !important;
    }

    .umzugs-animation {
        max-width: 240px;
        max-height: 190px;
    }

    .hero-animation-side {
        min-height: 190px;
    }

}
/* =========================================
   RESPONSIVE – ALLE SEITEN
   GLEICHES VERHALTEN WIE HOME
========================================= */

/* Bilder dürfen niemals aus dem Bildschirm */
img {
    max-width: 100%;
    height: auto;
}


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

@media (max-width: 991px) {

    /* Allgemeine Bereiche */
    .section {
        padding: 60px 0;
    }

    /* Überschriften */
    .heading h2 {
        font-size: 36px;
    }

    /* Leistungen Karten */
    .card {
        height: 100%;
    }

    /* Hero */
    .slider_section {
        height: auto !important;
        min-height: auto !important;
        padding: 60px 0 !important;
    }

    .slider_section .carousel-item {
        height: auto !important;
        min-height: auto !important;
    }

    .slider_section .hero-row {
        row-gap: 30px;
    }

    /* Action Box */
    .hero_action_box {
        margin: 0 !important;
        width: 100%;
    }

}


/* =========================================
   HANDY
========================================= */

@media (max-width: 767px) {

    /* Seiten */
    .section {
        padding: 50px 0;
    }

    /* Überschrift */
    .heading {
        margin-bottom: 30px;
    }

    .heading h2 {
        font-size: 30px;
    }

    /* Karten */
    .card {
        padding: 25px 20px;
    }

    /* Hero */
    .slider_section {
        padding: 45px 0 60px !important;
    }

    .slider_section .hero_content {
        text-align: center;
    }

    .slider_section .hero_content h1 {
        font-size: 36px;
        line-height: 1.15;
    }

    /* Checkliste bleibt ordentlich */
    .slider_section .checklist {
        text-align: left;
        display: inline-block;
    }

    /* Rechte Box */
    .hero_action_box {
        text-align: center;
    }

    /* Google Bewertung */
    .google-review-box {
        width: 100%;
        min-width: 0;
    }

}


/* =========================================
   KLEINE HANDYS
========================================= */

@media (max-width: 480px) {

    .section {
        padding: 40px 0;
    }

    .heading h2 {
        font-size: 27px;
    }

    .heading p {
        font-size: 15px;
    }

    /* Karten */
    .card {
        padding: 20px;
    }

    .card h3 {
        font-size: 20px;
    }

    /* Hero */
    .slider_section .hero_content h1 {
        font-size: 30px;
    }

    .slider_section .hero_content p {
        font-size: 15px;
    }

    /* Buttons */
    .hero_action_box .btn1,
    .hero_action_box .btn2 {
        width: 100% !important;
    }

}
/* =========================================
   ACTION BOX – TABLET & HANDY MITTIG
========================================= */

@media (max-width: 991px) {

    /* Ganze rechte Bootstrap-Spalte */
    .slider_section .col-lg-5 {
        display: flex;
        justify-content: center;
    }

    /* Action Box mittig */
    .slider_section .hero_action_box {
        width: 100%;
        max-width: 500px;
        margin: 0 auto !important;
        text-align: center;
    }

    /* Buttons sauber untereinander */
    .slider_section .hero_action_box .btn1,
    .slider_section .hero_action_box .btn2 {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 100% !important;

        min-height: 58px;

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

    /* Abstand zwischen den Buttons */
    .slider_section .hero_action_box .btn1 {
        margin-bottom: 12px;
    }

    /* Google Bewertung mittig */
    .slider_section .google-review-box {
        margin-left: auto !important;
        margin-right: auto !important;
        justify-content: center;
    }

}


/* =========================================
   NUR HANDY
========================================= */

@media (max-width: 767px) {

    .slider_section .hero_action_box {
        max-width: 460px;
    }

}


/* =========================================
   KLEINE HANDYS
========================================= */

@media (max-width: 480px) {

    .slider_section .hero_action_box {
        width: 100%;
        max-width: 100%;
    }

    .slider_section .hero_action_box .btn1,
    .slider_section .hero_action_box .btn2 {
        width: 100% !important;
        min-height: 54px;
        font-size: 15px;
        text-align: center;
    }

}
/* =========================================
   HERO – RECHTES TRANSPARENTES ANGEBOTSFORMULAR
========================================= */

.hero-row {
    min-height: 500px;
}


/* FORMULAR BOX */

.hero-request-box {
    width: 100%;
    max-width: 470px;
    margin-left: auto;

    padding: 32px;

    border-radius: 24px;

    /* TRANSPARENTER GLAS-EFFEKT */
    background: rgba(18, 33, 47, 0.55);

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

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

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.30);
}


/* ÜBERSCHRIFT */

.hero-request-box h2 {
    margin: 0 0 8px;

    color: #ffffff;

    font-size: 34px;
    font-weight: 900;
}


.hero-request-box > p {
    margin-bottom: 28px;

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

    font-size: 16px;
}


/* FORMULAR FELDER */

.hero-form-field {
    position: relative;

    display: flex;
    align-items: center;

    margin-bottom: 16px;

    height: 68px;

    padding: 0 18px;

    border-radius: 16px;

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

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

    transition: 0.25s ease;
}


.hero-form-field:focus-within {
    background: rgba(255, 255, 255, 0.12);

    border-color: rgba(246, 181, 27, 0.75);

    box-shadow:
        0 0 0 3px rgba(246, 181, 27, 0.10);
}


/* ICONS */

.hero-form-field i {
    width: 35px;

    color: #f6b51b;

    font-size: 19px;
}


/* INPUT */

.hero-form-field input {
    width: 100%;
    height: 100%;

    padding: 0;

    color: #ffffff;

    background: transparent;

    border: 0;
    outline: none;

    font-size: 16px;
}


.hero-form-field input::placeholder {
    color: rgba(255, 255, 255, 0.65);
}


/* DATUM ICON */

.hero-form-field input[type="date"] {
    color-scheme: dark;
}


/* BUTTON */

.hero-request-box button {
    width: 100%;

    min-height: 64px;

    margin-top: 10px;

    padding: 15px 20px;

    background: #f6b51b;

    color: #07111f;

    border: 0;

    border-radius: 16px;

    font-size: 18px;
    font-weight: 900;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}


.hero-request-box button span {
    margin-left: 8px;

    font-size: 23px;
}


.hero-request-box button:hover {
    background: #ffc229;

    transform: translateY(-3px);

    box-shadow:
        0 10px 30px rgba(246, 181, 27, 0.22);
}


/* SICHER TEXT */

.hero-secure {
    margin-top: 22px;

    text-align: center;

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

    font-size: 15px;
}


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

@media (max-width: 991px) {

    .slider_section {
        height: auto !important;

        padding: 70px 0 !important;
    }


    .hero-row {
        min-height: auto;
    }


    .hero-request-box {
        margin: 40px auto 0;
        max-width: 600px;
    }

}


/* =========================================
   HANDY
========================================= */

@media (max-width: 767px) {

    .hero-request-box {
        padding: 25px 18px;

        border-radius: 20px;
    }


    .hero-request-box h2 {
        font-size: 28px;
    }


    .hero-request-box > p {
        font-size: 14px;
    }


    .hero-form-field {
        height: 60px;

        margin-bottom: 12px;
    }


    .hero-request-box button {
        min-height: 58px;

        font-size: 16px;
    }

}
/* =========================================
   KOMPAKTE TRANSPARENTE HERO-FORMULAR BOX
========================================= */

.hero-request-box {
    width: 100%;
    max-width: 400px;
    margin-left: auto;

    padding: 24px;

    border-radius: 20px;

    /* transparenter Hintergrund */
    background: rgba(18, 33, 47, 0.45);

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

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

    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
}


/* ÜBERSCHRIFT */

.hero-request-box h2 {
    margin: 0 0 5px;

    color: #ffffff;

    font-size: 26px;
    font-weight: 800;
}


.hero-request-box > p {
    margin: 0 0 18px;

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

    font-size: 14px;
}


/* FORMULAR FELDER */

.hero-form-field {
    display: flex;
    align-items: center;

    height: 54px;

    margin-bottom: 10px;

    padding: 0 14px;

    border-radius: 14px;

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

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


.hero-form-field i {
    width: 30px;

    color: #f6b51b;

    font-size: 17px;
}


.hero-form-field input {
    width: 100%;
    height: 100%;

    border: 0;
    outline: none;

    background: transparent;

    color: #ffffff;

    font-size: 15px;
}


.hero-form-field input::placeholder {
    color: rgba(255, 255, 255, 0.65);
}


/* GELBER BUTTON */

.hero-request-box button {
    width: 100%;

    height: 58px;

    margin-top: 5px;

    border: 0;

    border-radius: 14px;

    background: #f6b51b;

    color: #07111f;

    font-size: 17px;
    font-weight: 800;

    cursor: pointer;

    transition: 0.2s ease;
}


.hero-request-box button:hover {
    transform: translateY(-2px);

    background: #ffc229;
}


/* SICHER & UNVERBINDLICH */

.hero-secure {
    margin-top: 14px;

    text-align: center;

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

    font-size: 13px;
}


/* HANDY */

@media (max-width: 991px) {

    .hero-request-box {
        max-width: 430px;
        margin: 30px auto 0;
    }

}

@media (max-width: 767px) {

    .hero-request-box {
        padding: 20px;
        max-width: 100%;
    }

}
.hero_content h1 span {
    color: #ffc107;
}
/* =========================================
   ÜBER UNS – BILD GLEICHE HÖHE WIE TEXT
========================================= */

.section .row.align-items-center {
    align-items: stretch !important;
}

.image-column {
    display: flex;
}

.about_img {
    width: 100%;
    height: 100%;
}

.about_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 15px;
}
/* =========================================
   HERO / CAROUSEL – BEIDE SEITEN GLEICH HOCH
========================================= */

.hero-row {
    min-height: 600px;
    align-items: stretch !important;
}

/* Linke und rechte Spalte */
.hero-row > [class*="col-"] {
    display: flex;
}

/* Linker Inhalt */
.hero_content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Rechte Box */
.hero_action_box {
    width: 100%;
    height: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
@media (max-width: 991px) {

    .hero-row {
        min-height: auto;
    }

    .hero-row > [class*="col-"] {
        display: block;
    }

    .hero_content,
    .hero_action_box {
        height: auto;
        min-height: auto;
    }

}
/* =========================================
   CAROUSEL / HERO – DESKTOP AUSRICHTUNG
========================================= */

.hero-row {
    min-height: 720px;
    align-items: stretch !important;
}


/* Beide Spalten */
.hero-row > [class*="col-"] {
    display: flex;
}


/* Linke Seite */
.hero_content {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;

    /* Abstand von der oberen Navigation */
    padding-top: 55px;
    padding-bottom: 55px;
}


/* Rechte Seite */
.hero_action_box {
    width: 100%;
    align-self: center;

    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* =========================================
   HERO / CAROUSEL – EINHEITLICHE DESKTOP-AUSRICHTUNG
========================================= */

@media (min-width: 992px) {

    .slider_section {
        position: relative;
    }

    .hero-row {
        min-height: 700px;
        align-items: stretch !important;
    }

    .hero-row > [class*="col-"] {
        display: flex;
    }

    /* LINKE SEITE */
    .hero_content {
        width: 100%;
        height: 100%;

        display: flex;
        flex-direction: column;
        justify-content: center;

        padding-top: 90px;
        padding-bottom: 40px;
    }

    /* RECHTE SEITE */
    .hero_action_box {
        width: 100%;

        align-self: center;

        transform: translateY(35px);
    }

}
/* =====================================================
   FINAL DESKTOP HERO – ALLE SEITEN GLEICH AUSGERICHTET
   ===================================================== */

@media (min-width: 992px) {

    /* Gesamte Carousel-Höhe */
    .slider_section,
    .slider_section #customCarousel1,
    .slider_section #customCarousel1 .carousel-inner,
    .slider_section #customCarousel1 .carousel-item,
    .slider_section #customCarousel1 .carousel-item.active {
        height: 680px !important;
        min-height: 680px !important;
    }

    /* Beide Seiten vertikal mittig */
    .slider_section .hero-row {
        min-height: 680px !important;
        height: 680px !important;

        align-items: center !important;
    }

    .slider_section .hero-row > .col-lg-7,
    .slider_section .hero-row > .col-lg-5 {
        display: flex !important;
        align-items: center !important;
    }

    /* LINKE SEITE */
    .slider_section .hero_content {
        width: 100%;
        height: auto !important;

        padding: 0 !important;

        transform: translateY(35px) !important;
    }

    /* RECHTE SEITE */
    .slider_section .hero_action_box {
        width: 100%;
        max-width: 100%;

        margin: 0 !important;

        transform: translateY(35px) !important;
    }

}