/* ===========================================================
   Landing-Page-Styles für Service-Seiten Gießen
   Erweitert das bestehende Design-System (style.css), ohne
   Homepage-Stile zu überschreiben.
   =========================================================== */

/* --- Page Hero (kürzer als Homepage-Hero) --- */
.page-hero {
   position: relative;
   background: linear-gradient(rgba(15, 57, 76, 0.75), rgba(15, 57, 76, 0.85)),
               url('../img/laptop-unsplash.webp') no-repeat center center;
   background-size: cover;
   color: #fff;
   min-height: 60vh;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   padding: 130px 20px 80px;
}

.page-hero .hero-inner {
   max-width: 820px;
   z-index: 2;
}

.page-hero h1 {
   font-size: clamp(28px, 4.4vw, 52px);
   font-weight: 800;
   line-height: 1.15;
   margin-bottom: 18px;
   color: #fff;
}

.page-hero .lead {
   font-size: clamp(16px, 1.8vw, 20px);
   color: rgba(255,255,255,0.92);
   line-height: 1.55;
   margin-bottom: 28px;
}

.page-hero .hero-pills {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 10px;
   margin-bottom: 8px;
}

.page-hero .hero-pills a {
   display: inline-block;
   padding: 7px 16px;
   border: 1px solid rgba(255,255,255,0.45);
   border-radius: 999px;
   color: #fff;
   text-decoration: none;
   font-size: 14px;
   transition: all 0.25s ease;
   backdrop-filter: blur(4px);
   background: rgba(255,255,255,0.06);
}

.page-hero .hero-pills a:hover {
   background: #49b5e7;
   border-color: #49b5e7;
   transform: translateY(-2px);
}

.page-hero .hero-cta {
   margin-top: 22px;
   display: flex;
   gap: 12px;
   justify-content: center;
   flex-wrap: wrap;
}

.page-hero .hero-cta .btn {
   padding: 12px 26px;
   font-weight: 600;
   border-radius: 999px;
   font-size: 16px;
}

.page-hero .hero-cta .btn-primary {
   background: #49b5e7;
   border-color: #49b5e7;
}
.page-hero .hero-cta .btn-primary:hover {
   background: #2da4dc;
   border-color: #2da4dc;
}
.page-hero .hero-cta .btn-outline-light:hover {
   color: #0f394c;
}

/* --- Breadcrumbs --- */
.page-breadcrumb {
   background: #f4fbfe;
   padding: 14px 0;
   font-size: 14px;
}
.page-breadcrumb .breadcrumb {
   margin: 0;
}
.page-breadcrumb a {
   color: #0f394c;
   text-decoration: none;
}
.page-breadcrumb a:hover {
   color: #49b5e7;
}
.page-breadcrumb .breadcrumb-item.active {
   color: #6c757d;
}

/* --- Generic section --- */
section.lp-section {
   padding: 80px 0;
}
section.lp-section.section-bg {
   background-color: #f4fbfe;
}

/* --- Problem cards (Probleme/Leistungen) — basiert auf .benefits .icon-box --- */
.problem-grid .icon-box {
   padding: 30px;
   position: relative;
   overflow: hidden;
   border-radius: 12px;
   margin: 0 10px 30px 10px;
   background: #fff;
   box-shadow: 0 10px 29px 0 rgba(68, 88, 144, 0.1);
   transition: all 0.3s ease-in-out;
   height: 100%;
}
.problem-grid .icon-box:hover {
   transform: translateY(-5px);
   border: 1px solid #4680ff;
}
.problem-grid .icon {
   position: absolute;
   left: -20px;
   top: calc(50% - 30px);
}
.problem-grid .icon i {
   font-size: 64px;
   line-height: 1;
   transition: 0.5s;
   opacity: 0.85;
}
.problem-grid .title {
   margin-left: 56px;
   font-weight: 700;
   margin-bottom: 12px;
   font-size: 18px;
   color: #0f394c;
}
.problem-grid .description {
   font-size: 14px;
   margin-left: 56px;
   line-height: 1.7;
   margin-bottom: 0;
   color: #4a5b66;
}

/* --- Steps (So läuft das ab) --- */
.step-grid {
   counter-reset: step;
}
.step-card {
   background: #fff;
   border-radius: 12px;
   padding: 28px 26px 26px;
   box-shadow: 0 10px 29px 0 rgba(68, 88, 144, 0.08);
   position: relative;
   height: 100%;
   transition: transform 0.25s ease;
}
.step-card:hover {
   transform: translateY(-4px);
}
.step-card::before {
   counter-increment: step;
   content: counter(step);
   position: absolute;
   top: -22px;
   left: 24px;
   width: 44px;
   height: 44px;
   border-radius: 50%;
   background: #49b5e7;
   color: #fff;
   font-weight: 700;
   font-size: 18px;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 6px 16px rgba(73, 181, 231, 0.4);
}
.step-card h3 {
   font-size: 17px;
   font-weight: 700;
   color: #0f394c;
   margin: 14px 0 10px;
}
.step-card p {
   font-size: 14px;
   line-height: 1.6;
   color: #4a5b66;
   margin: 0;
}

/* --- USP / Trust list --- */
.usp-list {
   list-style: none;
   padding: 0;
   margin: 0;
}
.usp-list li {
   padding: 12px 0 12px 38px;
   position: relative;
   font-size: 16px;
   line-height: 1.5;
   border-bottom: 1px solid #e7eef2;
   color: #2a3942;
}
.usp-list li:last-child {
   border-bottom: 0;
}
.usp-list li::before {
   content: "\F26B";
   font-family: "bootstrap-icons";
   position: absolute;
   left: 0;
   top: 12px;
   color: #49b5e7;
   font-size: 22px;
   line-height: 1;
}

/* --- FAQ Accordion --- */
.faq-accordion {
   max-width: 880px;
   margin: 0 auto;
}
.faq-accordion .accordion-item {
   border: 1px solid #e0eaef;
   border-radius: 10px !important;
   margin-bottom: 12px;
   overflow: hidden;
}
.faq-accordion .accordion-button {
   font-weight: 600;
   font-size: 16px;
   color: #0f394c;
   padding: 18px 22px;
   background: #fff;
}
.faq-accordion .accordion-button:not(.collapsed) {
   background: #eaf6fc;
   color: #0f394c;
   box-shadow: none;
}
.faq-accordion .accordion-button:focus {
   box-shadow: 0 0 0 0.2rem rgba(73,181,231,0.18);
}
.faq-accordion .accordion-body {
   padding: 18px 22px 22px;
   color: #4a5b66;
   font-size: 15px;
   line-height: 1.65;
   background: #fff;
}

/* --- CTA banner --- */
.cta-banner {
   background: linear-gradient(135deg, #0f394c 0%, #1d6f8e 100%);
   color: #fff;
   border-radius: 14px;
   padding: 56px 36px;
   text-align: center;
   box-shadow: 0 14px 40px rgba(15, 57, 76, 0.18);
}
.cta-banner h2 {
   color: #fff !important;
   font-size: 28px;
   margin-bottom: 12px;
}
.cta-banner p {
   color: rgba(255,255,255,0.92);
   font-size: 17px;
   margin-bottom: 26px;
}
.cta-banner .btn {
   padding: 12px 28px;
   font-weight: 600;
   border-radius: 999px;
   margin: 4px;
}
.cta-banner .btn-light {
   background: #fff;
   color: #0f394c;
   border-color: #fff;
}
.cta-banner .btn-light:hover {
   background: #49b5e7;
   color: #fff;
}
.cta-banner .btn-outline-light:hover {
   color: #0f394c;
}

/* --- Related links pills --- */
.related-links {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
   justify-content: center;
}
.related-links a {
   display: inline-block;
   padding: 10px 20px;
   border-radius: 999px;
   border: 1.5px solid #d3e3eb;
   color: #0f394c;
   text-decoration: none;
   font-weight: 500;
   font-size: 15px;
   transition: all 0.25s ease;
   background: #fff;
}
.related-links a:hover {
   background: #49b5e7;
   color: #fff;
   border-color: #49b5e7;
   transform: translateY(-2px);
}

/* --- Section title (übernimmt vorhandenen Stil, ergänzt Untertitel) --- */
.lp-section .section-title h2 {
   font-size: 32px;
   font-weight: bold;
   text-transform: uppercase;
   margin-bottom: 14px;
   color: #0f394c;
}
.lp-section .section-title .subtitle {
   max-width: 720px;
   margin: 0 auto;
   color: #4a5b66;
   font-size: 16px;
   line-height: 1.6;
}

/* --- Mobile tweaks --- */
@media (max-width: 768px) {
   .page-hero { min-height: 50vh; padding: 110px 16px 60px; }
   section.lp-section { padding: 56px 0; }
   .cta-banner { padding: 40px 22px; }
   .step-card::before { top: -18px; width: 38px; height: 38px; font-size: 16px; }
}