/* =====================================
   GLOBAL
===================================== */

body {
   font-family: Arial, Helvetica, sans-serif;
   margin: 0;
   background: #f4f6f8;
   color: #333;
   line-height: 1.3;
   overflow-x: hidden;
}

.container {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 20px;
}



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

.navbar {
   background: #fff;
   border-bottom: 1px solid #edf1f5;
   padding: 12px 0;
}

.navbar .container {

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

   /* gleiche Breite wie Content */
   max-width: 1200px;
   margin: 0 auto;

   /* Abstand zum Rand */
   padding: 0 24px;

}


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

.hero {
   background:
      linear-gradient(90deg,
         rgba(43, 95, 158, 1) 5%,
         rgba(43, 95, 158, 1) 20%,
         rgba(43, 95, 158, 0.85) 40%,
         rgba(43, 95, 158, 0.4) 65%,
         rgba(43, 95, 158, 0) 80%),
      url("../images/unfallpiloten_anwaelte.webp");

   background-size: cover;
   background-position: right 65%;
   background-repeat: no-repeat;

   color: #fff;

   padding: 60px 0;
   min-height: 400px;

   display: flex;
   align-items: center;
}

.hero .container {
   max-width: 1200px;
   margin: 0 auto;
   width: 100%;
}

.hero-grid {
   display: flex;
   justify-content: flex-start;
}

.hero-text {
   max-width: 520px;
   margin-top: -40px;
   margin-left: 15px;
}



.proof-icon {
   width: 18px;
   height: 18px;
   color: #7ed321;
}

.hero h1 {
   font-size: 52px;
   font-weight: 700;
   margin-bottom: 1px;
   line-height: 1.0;
}

.hero h2 {
   font-size: 22px;
   font-weight: 500;
   margin-bottom: 12px;
   line-height: 1.1;
   opacity: .95;
}



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

.hero-benefits {
   margin-top: 24px;
   margin-left: 6px;
   padding: 0;
   list-style: none;

   display: flex;
   flex-direction: column;
   gap: 6px;
}

.hero-benefits li {
   display: flex;
   align-items: flex-start;

   font-size: 15px;
   line-height: 1.5;
   font-weight: 500;

   opacity: 0;
   transform: translateY(10px);
   transition: all .5s ease;
}

.hero-benefits li.visible {
   opacity: 1;
   transform: translateY(0);
}

.benefit-icon {
   width: 22px;
   height: 22px;
   margin-right: 10px;
   color: #7ed321;
   flex-shrink: 0;
   transform: scale(.8);
   transition: transform .4s ease;
}

.hero-benefits strong {
   color: #e6f1ff;
   font-weight: 700;
   letter-spacing: .2px;
}

.hero-buttons {
   margin-top: 26px;
   display: flex;
   gap: 15px;
}



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

.cta-primary {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 10px;

   background: #ff7a00;
   border: none;
   color: #fff;

   padding: 16px 32px;
   font-size: 16px;

   border-radius: 8px;
   cursor: pointer;

   transition: .25s ease;
   box-shadow: 0 8px 18px rgba(0, 0, 0, .15);
}

.cta-primary svg {
   width: 20px;
   height: 20px;
   flex-shrink: 0;
}

.cta-primary:hover {
   transform: translateY(-3px);
   box-shadow: 0 15px 35px rgba(0, 0, 0, .25);
}

.cta-primary.big {
   padding: 18px 40px;
   font-size: 17px;
   box-shadow: 0 12px 25px rgba(0, 0, 0, .25);
}

.cta-secondary {
   background: #fff;
   color: #2b5f9e;

   border: none;
   padding: 16px 28px;

   border-radius: 8px;
   margin-left: 12px;

   font-weight: 500;
   cursor: pointer;
   transition: .25s ease;
}

.cta-secondary:hover {
   transform: translateY(-2px);
}



/* =====================================
   CHECK SECTION
===================================== */

.check {
   padding: 60px 0;
}

.check-box {
   background: #fff;
   padding: 40px;

   border-radius: 14px;
   box-shadow: 0 18px 45px rgba(0, 0, 0, .15);

   margin-top: -60px;

   max-width: 900px;
   margin-left: auto;
   margin-right: auto;
}

.check-box h3 {
   margin-top: 0;
   margin-bottom: 25px;
   font-size: 20px;
}

.options {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;

   margin: 12px 0 25px;
}

.options button {
   padding: 10px 16px;
   border: 1px solid #ccc;
   background: #fff;

   border-radius: 6px;
   cursor: pointer;

   transition: .15s ease;
}

.options button:hover {
   background: #f0f4f8;
}



/* =====================================
   PROZESS / ABLAUF
===================================== */

.prozess {
   background: #f7f9fc;
   padding: 40px 0;
}

.prozess h3 {
   text-align: center;
   font-size: 26px;
   margin-bottom: 40px;
   line-height: 1.1;
}

.section-title {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 12px;

   font-size: 26px;
   margin-bottom: 40px;
}

.section-title svg {
   width: 28px;
   height: 28px;
   color: #2b5f9e;
}

.steps {
   position: relative;

   display: grid;
   grid-template-columns: repeat(4, 1fr);

   gap: 40px;
   margin-top: 60px;
}

/* Verbindungslinie */

.steps::before {
   content: "";
   position: absolute;

   top: 45px;
   left: 10%;

   width: 0%;
   height: 2px;

   background: #2b5f9e;
   transition: width 1s ease;
   z-index: 0;
}

.steps.animate::before {
   width: 80%;
}



/* STEP CARDS */

.step {
   background: #fff;

   padding: 40px 30px;
   text-align: center;

   border-radius: 14px;
   border: 1px solid #e6edf5;

   box-shadow: 0 8px 20px rgba(0, 0, 0, .04);
   transition: .4s ease;

   z-index: 1;

   opacity: 0;
   transform: translateY(40px);
}

.step.visible {
   opacity: 1;
   transform: translateY(0);
}

.step:hover {
   transform: translateY(-6px);
   box-shadow: 0 18px 40px rgba(0, 0, 0, .12);
}



/* =====================================
   STEP ICONS
===================================== */

.step-icon {
   width: 64px;
   height: 64px;

   margin: 0 auto 20px;

   background: #eef4ff;
   border-radius: 50%;

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

   color: #2b5f9e;

   transition: .3s ease;
}

.step:hover .step-icon {
   background: #2b5f9e;
   color: #fff;
   transform: scale(1.08);
}

.step-icon svg {
   width: 32px;
   height: 32px;
}

.step h4 {
   font-size: 16px;
   margin-bottom: 6px;
}

.step p {
   font-size: 14px;
   color: #6b7280;
}



/* =====================================
   CTA SECTION
===================================== */

.cta-section {

   background:
      linear-gradient(90deg,
         rgba(43, 95, 158, .92) 5%,
         rgba(43, 95, 158, .85) 15%,
         rgba(43, 95, 158, .55) 35%,
         rgba(43, 95, 158, .25) 55%,
         rgba(43, 95, 158, 0) 95%),
      url("../images/unfallpiloten_kanzlei.webp");

   background-size: cover;
   background-position: left 45%;
   background-repeat: no-repeat;
   padding: 60px 0;
   color: #fff;
   margin: 30px 0;
}

.cta-logo {
   margin-bottom: 2px;
}

.cta-logo img {
   height: 60px;
   width: auto;
   opacity: 0.95;
}

/* CTA CARD (GLASS EFFECT) */

.cta-content {

   max-width: 650px;
   margin: 0 auto;

   text-align: center;

   padding: 35px 40px;

   background: rgba(255, 255, 255, .08);
   backdrop-filter: blur(8px);

   border-radius: 14px;
   box-shadow: 0 25px 60px rgba(0, 0, 0, .25);

   opacity: 0;
   transform: translateY(30px);
   transition: .7s ease;
}

.cta-section.visible .cta-content {
   opacity: 1;
   transform: translateY(0);
}



/* CTA TEXT */

.cta-content h3 {
   font-size: 36px;
   margin-top: 0;
   margin-bottom: 12px;
   line-height: 1.1;
}

.cta-content p {
   font-size: 18px;
   margin-bottom: 16px;
   opacity: .95;
}



/* CTA BENEFITS */

.cta-benefits {
   margin-top: 18px;
   padding: 0;
   list-style: none;

   display: flex;
   flex-direction: column;
   gap: 8px;

   align-items: center;
   margin-bottom: 40px;
}

.cta-benefits li {
   display: flex;
   align-items: center;

   font-size: 15px;
   font-weight: 500;

   opacity: .95;
}

.cta-benefits .benefit-icon {
   width: 20px;
   height: 20px;
   margin-right: 10px;
   color: #7ed321;
}



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

.faq {
   background: linear-gradient(180deg,
         #f9fafc 0%,
         #FFF 100%);
   padding: 40px 0 80px;
}

.faq h3 {
   text-align: center;
   font-size: 28px;
   margin-bottom: 50px;
}

.faq-list {
   max-width: 850px;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
   gap: 16px;
}


/* CARD */

.faq-item {

   background: #ffffff;

   border: 1px solid #e6edf5;
   border-radius: 12px;

   padding: 20px 24px;

   box-shadow: 0 6px 18px rgba(0, 0, 0, .04);

   transition: .25s ease;
   cursor: pointer;
}


/* HOVER */

.faq-item:hover {
   border-color: #2b5f9e;
   box-shadow: 0 12px 30px rgba(0, 0, 0, .08);
   transform: translateY(-2px);
}


/* QUESTION */

.faq-question {

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

   font-size: 16px;
   font-weight: 600;
}

.faq-question svg {
   width: 20px;
   height: 20px;
   transition: .25s ease;
}


/* ANSWER */

.faq-answer {

   max-height: 0;
   overflow: hidden;

   font-size: 15px;
   color: #6b7280;

   transition: max-height .35s ease;

   margin-top: 0;
}


/* OPEN */

.faq-item.active .faq-answer {
   max-height: 800px !important;
   margin-top: 12px;
}

.faq-item.active .faq-question svg {
   transform: rotate(180deg);
}


.faq-title {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
}

.faq-title svg {
   width: 26px;
   height: 26px;
   color: #2b5f9e;
   opacity: .85;
}



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

.footer {
   background: #1f2937;
   color: #cbd5e1;
   padding: 50px 0 25px;
   border-top: 1px solid rgba(255, 255, 255, 0.08);
}


/* GRID */

.footer-grid {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   gap: 40px;
}


/* BRAND */

.footer-brand img {

   height: 55px;
   width: auto;
   margin-bottom: 3px;
   opacity: .95;
}

.footer-brand p {
   font-size: 14px;
   color: #e5e7eb;
   max-width: 320px;
}


/* LINKS */

.footer-links {
   display: flex;
   flex-direction: column;
   gap: 10px;
   line-height: 1.0;
}

.footer-links a {
   color: #cbd5e1;
   text-decoration: none;
   font-size: 14px;
   transition: .2s;
}

.footer-links a:hover {
   color: white;
}

/* BOTTOM */
.footer-bottom {
   text-align: center;
   margin-top: 25px;
   font-size: 13px;
   opacity: .6;
}


/* =====================================
   BURGER MENU BUTTON
===================================== */

.menu-toggle {

   background: #ff7a00;

   border: none;

   width: 42px;
   height: 42px;

   border-radius: 8px;

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

   cursor: pointer;


}

.menu-toggle svg {

   width: 22px;
   height: 22px;

   color: white;

}

/* =====================================
   SIDE MENU
===================================== */

.side-menu {

   position: fixed;
   top: 0;
   right: 0;

   width: 300px;
   height: 100vh;

   background: white;

   box-shadow: -20px 0 60px rgba(0, 0, 0, 0.15);

   padding: 30px;

   display: flex;
   flex-direction: column;

   transform: translateX(100%);
   transition: transform .35s ease;

   z-index: 999;

}

/* Menü geöffnet */

.side-menu.active {

   transform: translateX(0);

}


/* Menu Header */

.menu-header {

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

   margin-bottom: 40px;

}


/* Close Button */

.menu-close {

   background: none;
   border: none;
   cursor: pointer;

}

.menu-close svg {
   width: 26px;
   height: 26px;
   color: #ff7a00;
   transition: .2s;
}

.menu-close:hover svg {
   opacity: .7;
}

/* Menu Links */

.menu-links {
   display: flex;
   flex-direction: column;
   gap: 20px;
}

.menu-links a {

   text-decoration: none;
   font-size: 18px;
   font-weight: 500;

   color: #333;

   transition: .2s;

}

.menu-links a:hover {
   color: #2b5f9e;
}


/* =====================================
   MENU OVERLAY
===================================== */

.menu-overlay {

   position: fixed;
   top: 0;
   left: 0;

   width: 100%;
   height: 100vh;

   background: rgba(0, 0, 0, 0.35);

   opacity: 0;
   visibility: hidden;

   transition: 0.3s ease;

   z-index: 998;

}

.menu-overlay.active {
   opacity: 1;
   visibility: visible;
}