/* ==========================================
   EL-CONCEPT LANDINGPAGE
   ========================================== */

:root{
    --primary:#ff6b00;
    --primary-light:#ff9500;
    --primary-dark:#ff4d00;

    --dark:#080808;
    --dark-light:#101010;
    --dark-card:#171717;

    --text:#ffffff;
    --text-muted:#bcbcbc;

    --border:#262626;

    --gradient:
        linear-gradient(
            135deg,
            #ff9500 0%,
            #ff6b00 50%,
            #ff3d00 100%
        );
}

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Sofia Sans Extra Condensed',sans-serif;
	font-size:1.4rem;
    background:var(--dark);
    color:var(--text);
    overflow-x:hidden;
}

section{
    padding:100px 0;
}

a{
    text-decoration:none;
}

img{
    max-width:100%;
}

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

h1,h2,h3,h4,h5{
    font-weight:700;
}

.section-header{
    text-align:center;
    margin-bottom:60px;
}

.section-header h2{
    font-size:3rem;
    margin-top:15px;
}

.section-badge{
    display:inline-block;

    color:var(--primary);

    text-transform:uppercase;

    letter-spacing:2px;

    font-weight:700;
}

/* ==========================================
   NAVBAR
   ========================================== */

.custom-navbar{
    background:rgba(10,10,10,.85);
    backdrop-filter:blur(15px);
    transition:.4s;
    border-bottom:1px solid rgba(255,255,255,.05);
}

.navbar-brand img{
    transition:.3s;
}

.nav-link{
    color:#fff !important;
    font-weight:500;
    margin:0 10px;
}

.nav-link:hover{
    color:var(--primary) !important;
}

.phone-box{
    color:#fff;
    font-weight:600;
}

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

.btn-orange{
    background:var(--gradient);
    color:white;
    border:none;
    padding:14px 28px;
    border-radius:12px;
    font-weight:600;

    transition:.3s;
}

.btn-orange:hover{
    transform:translateY(-3px);

    color:white;

    box-shadow:
    0 15px 35px rgba(255,107,0,.35);
}

.btn-outline-light{
    border-radius:12px;
	padding: 14px 28px;
}

/* ==========================================
   HERO
   ========================================== */

.hero-section{
    min-height:100vh;
    display:flex;
    align-items:center;
    position:relative;
	background-image: url(/img/header-bg.jpg); background-repeat: no-repeat; background-position: right;background-color: black;background-size:cover;
}

.hero-overlay{
    position:absolute;
    inset:0;

    background:
    radial-gradient(
        circle at 80% 20%,
        rgba(255,107,0,.15),
        transparent 35%
    ),

    radial-gradient(
        circle at 20% 80%,
        rgba(255,107,0,.08),
        transparent 30%
    );
}

.hero-title{
    font-size:4.5rem;
    line-height:1.1;
    font-weight:800;
    margin-bottom:25px;
}

.hero-title span{
    color:var(--primary);
}

.hero-text{
    font-size:1.6rem;
    color:var(--text-muted);
    margin-bottom:30px;
}

.hero-list{
    list-style:none;
    padding:0;
    margin-bottom:35px;
}

.hero-list li{
    margin-bottom:12px;
    color:#e0e0e0;
}

.hero-list i{
    color:var(--primary);
    margin-right:10px;
}

.hero-buttons{
    display:flex;
    gap:15px;
    flex-wrap:wrap;
}

.hero-logo{
    max-width:500px;
    filter:
        drop-shadow(
            0 0 35px rgba(255,107,0,.35)
        );

    animation:
        float 5s ease-in-out infinite;
}

@keyframes float{

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

    50%{
        transform:translateY(-15px);
    }

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

}

/* ==========================================
   STATS
   ========================================== */

.stats-section{
    background:var(--dark-light);
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
}

.stats-section h3{
    color:var(--primary);
    font-size:3rem;
    font-weight:800;
}

.stats-section p{
    color:var(--text-muted);
}

/* ==========================================
   SERVICE CARDS
   ========================================== */

.service-card{

    background:var(--dark-card);

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

    border-radius:20px;

    padding:35px;

    height:100%;

    transition:.35s;
}

.service-card:hover{

    transform:
        translateY(-10px);

    border-color:var(--primary);

    box-shadow:
        0 20px 50px rgba(255,107,0,.15);
}

.service-card i{

	text-align: center;
    font-size:3rem;

    color:var(--primary);

    margin-bottom:20px;

    display:block;
}

.service-card h4{
    margin-bottom:15px;
}

.service-card p{
    color:var(--text-muted);
}

/* ==========================================
   SERVICE CARDS 2
   ========================================== */

.service-card-2{

    background:var(--dark-card);

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

    border-radius:20px;

    padding:35px;

    height:100%;

    transition:.35s;
}


.service-card-2 i{

	text-align: center;
    font-size:3rem;

    color:var(--primary);

    margin-bottom:20px;

    display:block;
}

.service-card-2 h4{
    margin-bottom:15px;
}

.service-card-2 p{
    color:var(--text-muted);
}

/* ==========================================
   FAQ
   ========================================== */

.faq-section{
    background:#0f0f0f;
}

.accordion-item{
    background:var(--dark-card);
    border:1px solid var(--border);
    margin-bottom:15px;
    border-radius:15px !important;
    overflow:hidden;
}

.accordion-button{
    background:var(--dark-card);
    color:white;
    font-weight:600;
}

.accordion-button:not(.collapsed){
    background:var(--dark-card);
    color:var(--primary);
    box-shadow:none;
}

.accordion-button:focus{
    box-shadow:none;
}

.accordion-body{
    color:var(--text-muted);
    background:var(--dark-card);
}

/* ==========================================
   CONTACT
   ========================================== */

.contact-section{
    background:var(--dark);
}

.contact-form{

    background:var(--dark-card);

    padding:40px;

    border-radius:20px;

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

.form-control{

    background:#0f0f0f;

    border:1px solid #2c2c2c;

    color:white;

    padding:15px;
}

.form-control:focus{

    background:#0f0f0f;

    color:white;

    border-color:var(--primary);

    box-shadow:
        0 0 0 .25rem rgba(255,107,0,.15);
}

.form-control::placeholder{
    color:#888;
}

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

.footer{

    background:#050505;

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

    padding:50px 0;
}

.footer p{
    color:#999;
}

/* ==========================================
   SCROLLBAR
   ========================================== */

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#0d0d0d;
}

::-webkit-scrollbar-thumb{
    background:var(--primary);
    border-radius:20px;
}

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

@media(max-width:991px){

    .hero-title{
        font-size:3rem;
    }

    .hero-logo{
        margin-top:50px;
        max-width:300px;
    }

    .section-header h2{
        font-size:2rem;
    }

    section{
        padding:70px 0;
    }

    .hero-buttons{
        flex-direction:column;
    }

    .hero-buttons .btn{
        width:100%;
    }
	
	.introtext {background-color: rgba(0, 0, 0, .75) !important;margin-top:0 !important}

}

@media(max-width:576px){

    .hero-title{
        font-size:2.4rem;
    }

    .stats-section h3{
        font-size:2rem;
    }

    .contact-form{
        padding:25px;
    }

}

.nav-link.active{
    color:#ff6b00 !important;
}

.scroll-top-btn:hover{
    transform:translateY(-5px);
    box-shadow:0 10px 30px rgba(255,107,0,.4);
}

.text-gradient{
	background: linear-gradient(45deg, #ff9500, #ff4d00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.milchglas-element {
  /* Hintergrund: Halbtransparentes Weiß */
  background: rgba(0, 0, 0, 0.2);
  
  /* Der eigentliche Milchglas-Effekt: Weichzeichner im Hintergrund */
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px); /* Für Safari-Kompatibilität */
  
  /* Glasscheiben-Kante simulieren */
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  
  /* Optional: Weicher Schatten für mehr Tiefe */
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}

.milchglas-element-hell {
  /* Hintergrund: Halbtransparentes Weiß */
  background: rgba(255, 255, 255, 0.2);
  
  /* Der eigentliche Milchglas-Effekt: Weichzeichner im Hintergrund */
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px); /* Für Safari-Kompatibilität */
  
  /* Glasscheiben-Kante simulieren */
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  
  /* Optional: Weicher Schatten für mehr Tiefe */
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}

.orange-link{
	    color: #ff6b00 !important;
}

.orange-link:hover {
	-webkit-transition: 500ms linear 0s;
    -moz-transition: 500ms linear 0s;
    -o-transition: 500ms linear 0s;
    transition: 500ms linear 0s;
    outline: 0 none;
    text-shadow: -1px 1px 8px #ff6b00, 1px -1px 8px #ff6b00;
	
}

.orange-verlauf{
	background: linear-gradient(45deg, #ff9500, #ff4d00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}