/* =====================================================
   ElektroWerk MODERNIZATION LAYER v9
   v9: Karriere .erwartet-icon → matches unified check style.
   Karriere markup uses <span class="erwartet-icon"><i class="fa-check-circle"/></span>
   which is different from .feature-list / .check-item / .hero-list.
   Now FORCED to look identical.
   ===================================================== */

:root {
    --qi-radius-sm: 8px;
    --qi-radius-md: 14px;
    --qi-radius-lg: 22px;
    --qi-radius-full: 999px;
    --qi-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --qi-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --qi-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --qi-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.10);
    --qi-shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.15);
    --qi-shadow-xl: 0 28px 60px rgba(0, 0, 0, 0.22);
    --qi-orange-glow: 0 6px 18px rgba(255, 135, 59, 0.35);
    --qi-orange-glow-strong: 0 10px 26px rgba(255, 135, 59, 0.55);
    --qi-check-size: 26px;
}

.skip-link {
    position: absolute; top: -100px; left: 1rem;
    background: var(--orange, #FF873B); color: var(--white, #ffffff);
    padding: 0.85rem 1.5rem; z-index: 10000; font-weight: 700;
    border-radius: var(--qi-radius-md); text-decoration: none;
    box-shadow: var(--qi-shadow-lg); transition: top 0.2s var(--qi-ease);
}
.skip-link:focus, .skip-link:focus-visible { top: 1rem; outline: 3px solid #ffffff; outline-offset: 2px; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible,
[role="button"]:focus-visible {
    outline: 3px solid var(--orange, #FF873B) !important;
    outline-offset: 3px !important; border-radius: 4px;
}

@media (pointer: coarse) {
    .bottom-nav-item, .nav-toggle, .nav-cta, .btn { min-height: 44px; min-width: 44px; }
    .quiz-option { min-height: 56px; }
}

body { letter-spacing: -0.005em; }
h1, h2, h3 { letter-spacing: -0.015em; }
.section-label {
    display: inline-block; text-transform: uppercase; letter-spacing: 0.12em;
    font-weight: 700; font-size: 0.78rem; color: var(--orange, #FF873B);
    padding: 0.4rem 0.95rem; border-radius: var(--qi-radius-full);
    background: rgba(255, 135, 59, 0.10); border: 1px solid rgba(255, 135, 59, 0.22);
    margin-bottom: 0.85rem;
}
.section-header h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; line-height: 1.15; margin-bottom: 0.75rem; }
.section-header p { color: var(--dark-gray, #494949); opacity: 0.78; max-width: 640px; margin-left: auto; margin-right: auto; font-size: 1rem; }

.hero-bg::after {
    background: linear-gradient(135deg, rgba(20, 20, 20, 0.78) 0%, rgba(0, 0, 0, 0.55) 60%, rgba(255, 135, 59, 0.25) 100%) !important;
}
.hero h1 {
    font-size: clamp(2rem, 5vw, 3.1rem) !important; line-height: 1.12 !important;
    letter-spacing: -0.02em; font-weight: 800 !important; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}
.hero h1 .highlight {
    background: linear-gradient(120deg, #FF873B 0%, #F9A75B 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.hero-subtitle { font-size: 1rem !important; opacity: 0.92; letter-spacing: 0.01em; }

/* =================================================================
   UNIFIED CHECKMARK STYLE — gilt site-wide
   Alle vier Pattern (hero-list, feature-list, check-item, erwartet-icon)
   sehen identisch aus.
   ================================================================= */
.hero-list { list-style: none; padding: 0; margin: 1.5rem 0 2rem; }
.hero-list li {
    display: flex !important; align-items: center !important; gap: 0.85rem !important;
    padding: 0.45rem 0 !important; font-size: 1.02rem !important;
    color: var(--white, #ffffff) !important; font-weight: 500;
}
.feature-list { list-style: none; padding: 0; }
.feature-list li {
    display: flex !important; align-items: center !important;
    gap: 0.85rem !important; margin-bottom: 0.85rem;
    font-size: 0.98rem; line-height: 1.5;
}
/* Karriere erwartet-list */
.erwartet-list { list-style: none; padding: 0; margin: 0; }
.erwartet-list li {
    display: flex !important; align-items: center !important;
    gap: 0.95rem !important; margin-bottom: 1rem !important;
    font-size: 1rem; line-height: 1.5;
}

/* Common orange circle (FA-content based) */
.hero-list li::before,
.feature-list li::before {
    content: "\f00c" !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: var(--qi-check-size) !important;
    min-width: var(--qi-check-size) !important;
    height: var(--qi-check-size) !important;
    background: linear-gradient(135deg, var(--orange, #FF873B) 0%, var(--orange-light, #F9A75B) 100%) !important;
    color: var(--white, #ffffff) !important;
    border-radius: 50% !important;
    font-size: 0.7rem !important;
    box-shadow: var(--qi-orange-glow) !important;
    flex-shrink: 0 !important;
    background-image: linear-gradient(135deg, var(--orange, #FF873B) 0%, var(--orange-light, #F9A75B) 100%) !important;
    transition: transform 0.3s var(--qi-ease), box-shadow 0.3s var(--qi-ease) !important;
    margin-top: 0 !important;
}

/* Check-Item: <i class="fa-check"> innerhalb .check-item */
.check-item i,
.check-item .fas.fa-check,
.check-grid .check-item i {
    width: var(--qi-check-size) !important;
    min-width: var(--qi-check-size) !important;
    height: var(--qi-check-size) !important;
    background: linear-gradient(135deg, var(--orange, #FF873B) 0%, var(--orange-light, #F9A75B) 100%) !important;
    color: var(--white, #ffffff) !important;
    border-radius: 50% !important;
    font-size: 0.7rem !important;
    box-shadow: var(--qi-orange-glow) !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.3s var(--qi-ease), box-shadow 0.3s var(--qi-ease) !important;
}

/* Karriere erwartet-icon: <span class="erwartet-icon"><i class="fa-check-circle"/></span>
   Wrapper-Span wird zum orangen Kreis, inneres <i> zeigt nur den Check. */
.erwartet-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: var(--qi-check-size) !important;
    min-width: var(--qi-check-size) !important;
    height: var(--qi-check-size) !important;
    background: linear-gradient(135deg, var(--orange, #FF873B) 0%, var(--orange-light, #F9A75B) 100%) !important;
    border-radius: 50% !important;
    box-shadow: var(--qi-orange-glow) !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    transition: transform 0.3s var(--qi-ease), box-shadow 0.3s var(--qi-ease) !important;
    line-height: 1 !important;
}
/* Hide original fa-check-circle glyph, draw fa-check instead */
.erwartet-icon i,
.erwartet-icon .fas,
.erwartet-icon .fa-check-circle {
    font-size: 0 !important;
    color: var(--white, #ffffff) !important;
    background: transparent !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.erwartet-icon i::before,
.erwartet-icon .fas::before,
.erwartet-icon .fa-check-circle::before {
    content: "\f00c" !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-size: 0.72rem !important;
    color: var(--white, #ffffff) !important;
    display: inline-block !important;
}

/* Unified hover for ALL checkmark variants */
.hero-list li:hover::before,
.feature-list li:hover::before,
.check-item:hover i,
.erwartet-list li:hover .erwartet-icon {
    transform: scale(1.10) !important;
    box-shadow: var(--qi-orange-glow-strong) !important;
}

/* ---------- Google Badge ---------- */
.google-badge {
    display: flex !important; width: fit-content; max-width: 100%; align-items: center;
    gap: 0.85rem; margin-top: 1.5rem !important; margin-bottom: 0;
    padding: 0.55rem 1.15rem 0.55rem 0.55rem !important;
    background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--qi-radius-full); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
    transition: transform 0.3s var(--qi-ease), box-shadow 0.3s var(--qi-ease), background 0.3s ease, border-color 0.3s ease; clear: both;
}
.hero .google-badge, .hero-content .google-badge {
    display: flex !important; margin-top: 2rem !important; margin-left: 0; margin-right: auto;
}
.google-badge:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.32); background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.32); }
.google-badge > span:first-child, .google-badge .google-badge-icon {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    width: 42px !important; height: 42px !important; background: var(--white, #ffffff) !important;
    border-radius: 50% !important; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
    flex-shrink: 0; line-height: 0; overflow: hidden;
}
.google-badge > span:first-child i, .google-badge .google-badge-icon i { font-size: 1.25rem !important; line-height: 1 !important; }
.google-badge > div { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: 0.18rem !important; line-height: 1.2 !important; }
.google-stars { color: var(--orange, #FF873B); font-size: 0.95rem; letter-spacing: 2px; line-height: 1; }
.google-stars i { color: var(--orange, #FF873B); }
.google-text { font-size: 0.88rem; line-height: 1.25; white-space: nowrap; margin: 0; font-weight: 500; }
.section-beige .google-badge, .section-white .google-badge { background: var(--white, #ffffff); border: 1px solid var(--light-border, #f2f2f2); box-shadow: var(--qi-shadow-md); backdrop-filter: none; -webkit-backdrop-filter: none; }
.section-beige .google-badge:hover, .section-white .google-badge:hover { box-shadow: var(--qi-shadow-lg); background: var(--white, #ffffff); }
.section-beige .google-badge .google-text, .section-white .google-badge .google-text { color: var(--dark-gray, #494949); opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
    .hero .google-badge { animation: qiBadgeFloat 4.5s ease-in-out 2.2s infinite; }
    .hero .google-badge:hover { animation-play-state: paused; }
}
@keyframes qiBadgeFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* ---------- Buttons ---------- */
.btn-primary { box-shadow: var(--qi-orange-glow); }
.btn-primary:hover { box-shadow: var(--qi-orange-glow-strong); }
.btn-outline-dark { border-width: 2px; transition: all 0.28s var(--qi-ease); }
.btn-outline-dark:hover { background: var(--dark-gray, #494949); color: var(--white, #ffffff) !important; border-color: var(--dark-gray, #494949) !important; box-shadow: var(--qi-shadow-md); }
@media (prefers-reduced-motion: no-preference) {
    .hero .btn-primary { position: relative; }
    .hero .btn-primary::after {
        content: ""; position: absolute; inset: 0; border-radius: inherit;
        box-shadow: 0 0 0 0 rgba(255, 135, 59, 0.45);
        animation: qiPulse 2.4s ease-out 2s infinite; pointer-events: none;
    }
}
@keyframes qiPulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 135, 59, 0.45); }
    70% { box-shadow: 0 0 0 16px rgba(255, 135, 59, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 135, 59, 0); }
}

.section-white { background: linear-gradient(180deg, #ffffff 0%, #fbfaf7 100%); }
.section-beige { background: linear-gradient(180deg, #f8f4ed 0%, #f2ece1 100%); position: relative; }

.services-grid { gap: 1.75rem !important; }
.service-card {
    border-radius: var(--qi-radius-lg) !important; overflow: hidden; position: relative;
    transition: transform 0.45s var(--qi-ease), box-shadow 0.45s var(--qi-ease);
    will-change: transform; box-shadow: var(--qi-shadow-sm); min-height: 340px;
    padding: 2rem !important; display: flex !important; flex-direction: column !important;
    justify-content: flex-end !important; background-size: cover; background-position: center;
    isolation: isolate;
}
.service-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.55) 50%, rgba(15, 15, 15, 0.95) 100%); transition: background 0.45s ease; z-index: 1; }
.service-card:hover::before { background: linear-gradient(180deg, rgba(0, 0, 0, 0.20) 0%, rgba(255, 135, 59, 0.20) 50%, rgba(15, 15, 15, 0.97) 100%); }
.service-card::after {
    content: ""; position: absolute; top: 1.4rem; right: 1.4rem; width: 44px; height: 44px; border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='7' y1='17' x2='17' y2='7'/><polyline points='7 7 17 7 17 17'/></svg>");
    background-position: center; background-repeat: no-repeat; background-size: 50% 50%; z-index: 2;
    transition: transform 0.4s var(--qi-ease), background-color 0.4s ease, border-color 0.4s ease;
}
.service-card:hover::after { transform: rotate(-45deg); background-color: var(--orange, #FF873B); border-color: var(--orange, #FF873B); }
.service-card > * { position: relative; z-index: 2; }
.service-card h3 { color: var(--white, #ffffff); font-size: 1.35rem !important; font-weight: 800 !important; line-height: 1.2; margin-bottom: 0.7rem !important; letter-spacing: -0.01em; }
.service-card p { color: rgba(255, 255, 255, 0.85); font-size: 0.92rem; line-height: 1.55; margin: 0 0 0.55rem 0; }
.service-card p + p { display: none; }
.service-card .card-link {
    display: inline-flex !important; align-items: center; gap: 0.45rem;
    color: var(--orange, #FF873B) !important; font-weight: 700 !important; font-size: 0.92rem;
    margin-top: 1rem !important; padding: 0.55rem 1rem !important;
    background: rgba(255, 135, 59, 0.12); border: 1px solid rgba(255, 135, 59, 0.32);
    border-radius: var(--qi-radius-full); width: fit-content; transition: all 0.3s var(--qi-ease);
}
.service-card .card-link::after {
    content: ""; width: 14px; height: 14px; background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'/><polyline points='12 5 19 12 12 19'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'/><polyline points='12 5 19 12 12 19'/></svg>") center/contain no-repeat;
    transition: transform 0.3s var(--qi-ease);
}
.service-card:hover .card-link { background: var(--orange, #FF873B); color: var(--white, #ffffff) !important; border-color: var(--orange, #FF873B); box-shadow: var(--qi-orange-glow); }
.service-card:hover .card-link::after { transform: translateX(3px); }
.service-card:hover { transform: translateY(-10px); box-shadow: var(--qi-shadow-xl); }
.service-card-wide { grid-column: span 2; min-height: 280px; }
@media (max-width: 768px) {
    .service-card-wide { grid-column: span 1; }
    .service-card { min-height: 280px; padding: 1.5rem !important; }
    .service-card::after { width: 38px; height: 38px; top: 1rem; right: 1rem; }
}

.city-card { border-radius: var(--qi-radius-md) !important; overflow: hidden; transition: transform 0.4s var(--qi-ease), box-shadow 0.4s var(--qi-ease); box-shadow: var(--qi-shadow-sm); }
.city-card:hover { transform: translateY(-6px); box-shadow: var(--qi-shadow-lg); }
.city-card-img { transition: transform 0.6s var(--qi-ease); }
.city-card:hover .city-card-img { transform: scale(1.06); }
.city-badge { background: rgba(255, 135, 59, 0.12); color: var(--orange, #FF873B); border: 1px solid rgba(255, 135, 59, 0.25); }
.city-badge-time { background: rgba(73, 73, 73, 0.08); color: var(--dark-gray, #494949); border-color: rgba(73, 73, 73, 0.15); }

.feature-item { transition: transform 0.3s var(--qi-ease); }
.feature-item:hover { transform: translateX(4px); }
.feature-icon { background: linear-gradient(135deg, #FF873B 0%, #F9A75B 100%) !important; color: var(--white, #ffffff) !important; box-shadow: var(--qi-orange-glow); transition: transform 0.35s var(--qi-ease); }
.feature-item:hover .feature-icon { transform: scale(1.08) rotate(-4deg); box-shadow: var(--qi-orange-glow-strong); }

.quote-card, .stat-card { border-radius: var(--qi-radius-lg) !important; transition: transform 0.4s var(--qi-ease), box-shadow 0.4s var(--qi-ease); }
.quote-card:hover, .stat-card:hover { transform: translateY(-4px); box-shadow: var(--qi-shadow-lg); }
.stat-number { background: linear-gradient(120deg, #FF873B 0%, #F9A75B 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; font-weight: 800; }

.review-card { border-radius: var(--qi-radius-lg) !important; transition: transform 0.4s var(--qi-ease), box-shadow 0.4s var(--qi-ease); border: 1px solid rgba(0, 0, 0, 0.04); }
.review-card:hover { transform: translateY(-5px); box-shadow: var(--qi-shadow-lg); }
.review-stars { background: linear-gradient(120deg, #FF873B 0%, #F9A75B 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; letter-spacing: 3px; }

.quiz-option { border-radius: var(--qi-radius-md) !important; border: 2px solid #ececec !important; transition: all 0.25s var(--qi-ease); cursor: pointer; background: var(--white, #ffffff); }
.quiz-option:hover { transform: translateY(-2px); border-color: var(--orange, #FF873B) !important; box-shadow: 0 8px 22px rgba(255, 135, 59, 0.18); }
.quiz-option i { color: var(--orange, #FF873B); transition: transform 0.25s var(--qi-ease); }
.quiz-option:hover i { transform: scale(1.15); }
.quiz-option:has(input:checked) { border-color: var(--orange, #FF873B) !important; background: rgba(255, 135, 59, 0.06) !important; }
#quiz-container { border-radius: var(--qi-radius-lg) !important; box-shadow: var(--qi-shadow-lg) !important; border: 1px solid rgba(0, 0, 0, 0.04); }

.faq-item { border-radius: var(--qi-radius-md) !important; transition: box-shadow 0.3s ease, border-color 0.3s ease; border: 1px solid transparent; }
.faq-item[open] { box-shadow: var(--qi-shadow-md); border-color: rgba(255, 135, 59, 0.15); }
.faq-question { transition: color 0.25s ease; }
.faq-item:hover .faq-question { color: var(--orange, #FF873B); }

.blog-teaser-card { border-radius: var(--qi-radius-lg) !important; overflow: hidden; transition: transform 0.4s var(--qi-ease), box-shadow 0.4s var(--qi-ease); box-shadow: var(--qi-shadow-sm); }
.blog-teaser-card:hover { transform: translateY(-6px); box-shadow: var(--qi-shadow-lg); }
.blog-teaser-image { transition: transform 0.6s var(--qi-ease); }
.blog-teaser-card:hover .blog-teaser-image { transform: scale(1.06); }
.blog-teaser-readmore { color: var(--orange, #FF873B); font-weight: 700; transition: gap 0.3s var(--qi-ease); }

.site-header.scrolled { background: rgba(255, 255, 255, 0.85) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--qi-shadow-md); border-bottom-width: 1px; }
.nav-cta { box-shadow: var(--qi-orange-glow); transition: transform 0.25s var(--qi-ease), box-shadow 0.25s var(--qi-ease); }
.nav-cta:hover { transform: translateY(-1px); box-shadow: var(--qi-orange-glow-strong); }

.back-to-top { box-shadow: var(--qi-shadow-lg) !important; transition: transform 0.3s var(--qi-ease), box-shadow 0.3s var(--qi-ease) !important; }
.back-to-top:hover { transform: translateY(-3px); box-shadow: var(--qi-shadow-xl) !important; }

/* ---------- FOOTER ---------- */
.footer-contact-card { border-radius: var(--qi-radius-lg) !important; box-shadow: var(--qi-shadow-md); }
.footer-contact-btn { box-shadow: var(--qi-orange-glow); transition: transform 0.25s var(--qi-ease), box-shadow 0.25s var(--qi-ease) !important; }
.footer-contact-btn:hover { transform: translateY(-2px); box-shadow: var(--qi-orange-glow-strong) !important; }
@media (min-width: 1100px) {
    .footer-grid { display: grid !important; grid-template-columns: 1.4fr 1fr 1.05fr 1.3fr 1.5fr !important; gap: 1.75rem !important; align-items: start !important; }
}
@media (min-width: 768px) and (max-width: 1099px) {
    .footer-grid { display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; gap: 1.5rem !important; }
    .footer-contact-card { grid-column: span 3; max-width: 480px; margin-top: 1rem; }
}
@media (max-width: 767px) {
    .footer-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 1.25rem !important; }
    .footer-brand, .footer-contact-card { grid-column: span 2; }
}
.footer-cities { display: flex; flex-direction: column; gap: 0.45rem; }
.footer-cities a { color: var(--dark-gray, #494949) !important; font-size: 0.88rem; text-decoration: none; transition: color 0.2s ease, padding-left 0.2s ease; opacity: 0.88; line-height: 1.4; }
.footer-cities a:hover { color: var(--orange, #FF873B) !important; padding-left: 4px; opacity: 1; }

/* ---------- QUICK-CTA-BOX ---------- */
.quick-cta-box { border-radius: var(--qi-radius-lg) !important; box-shadow: var(--qi-shadow-md); }
.quick-cta-box h3, .quick-cta-text h3, .quick-cta-box .quick-cta-text h3 { color: var(--white, #ffffff) !important; font-weight: 800; margin-bottom: 0.4rem; }
.quick-cta-box p, .quick-cta-text p, .quick-cta-box .quick-cta-text p { color: var(--white, #ffffff) !important; opacity: 0.92; margin: 0; }
.quick-cta-box h3 i, .quick-cta-text h3 i { color: var(--white, #ffffff) !important; margin-right: 0.4rem; }
.quick-cta-box[style*="#fff"] h3, .quick-cta-box[style*="#ffffff"] h3,
.quick-cta-box[style*="rgb(255"] h3,
.quick-cta-box[style*="#fff"] .quick-cta-text h3, .quick-cta-box[style*="#ffffff"] .quick-cta-text h3,
.quick-cta-box[style*="rgb(255"] .quick-cta-text h3 { color: var(--dark-gray, #494949) !important; }
.quick-cta-box[style*="#fff"] p, .quick-cta-box[style*="#ffffff"] p,
.quick-cta-box[style*="rgb(255"] p,
.quick-cta-box[style*="#fff"] .quick-cta-text p, .quick-cta-box[style*="#ffffff"] .quick-cta-text p,
.quick-cta-box[style*="rgb(255"] .quick-cta-text p { color: var(--dark-gray, #494949) !important; opacity: 0.78; }
.quick-cta-box[style*="#fff"] h3 i, .quick-cta-box[style*="#ffffff"] h3 i, .quick-cta-box[style*="rgb(255"] h3 i { color: var(--orange, #FF873B) !important; }
.quick-cta-box .btn-primary { background: var(--white, #ffffff) !important; color: var(--orange, #FF873B) !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); }
.quick-cta-box .btn-primary:hover { background: var(--white, #ffffff) !important; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28); }
.quick-cta-box .btn-secondary, .quick-cta-box .btn-outline-dark { background: transparent !important; color: var(--white, #ffffff) !important; border: 2px solid var(--white, #ffffff) !important; }
.quick-cta-box .btn-secondary:hover, .quick-cta-box .btn-outline-dark:hover { background: rgba(255, 255, 255, 0.15) !important; color: var(--white, #ffffff) !important; }
.quick-cta-box[style*="#fff"] .btn-primary, .quick-cta-box[style*="#ffffff"] .btn-primary { background: var(--orange, #FF873B) !important; color: var(--white, #ffffff) !important; box-shadow: var(--qi-orange-glow); }
.quick-cta-box[style*="#fff"] .btn-primary:hover, .quick-cta-box[style*="#ffffff"] .btn-primary:hover { box-shadow: var(--qi-orange-glow-strong); }

/* ---------- FORMS ---------- */
.form-control,
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="number"], input[type="date"], select, textarea {
    border-radius: var(--qi-radius-md) !important;
    border: 2px solid #e5e7eb !important;
    transition: border-color 0.25s var(--qi-ease), box-shadow 0.25s var(--qi-ease), background 0.25s ease !important;
    background: var(--white, #ffffff);
    font-family: inherit;
}
.form-control:hover, input:hover, select:hover, textarea:hover { border-color: #d1d5db !important; }
.form-control:focus, input:focus, select:focus, textarea:focus {
    border-color: var(--orange, #FF873B) !important;
    box-shadow: 0 0 0 4px rgba(255, 135, 59, 0.15) !important;
    outline: none !important;
}
.form-control.input-validation-error, input.input-validation-error, select.input-validation-error, textarea.input-validation-error, .form-control[aria-invalid="true"] {
    border-color: #ef4444 !important; background: #fef2f2 !important;
}
.form-error, .field-validation-error, .text-danger {
    color: #b91c1c !important; font-size: 0.82rem !important; margin-top: 0.35rem !important;
    display: block; font-weight: 500;
}
.btn[disabled], .btn:disabled { opacity: 0.7; cursor: progress !important; position: relative; }
.contact-form label, .form-group label {
    display: block; font-weight: 600; margin-bottom: 0.4rem;
    color: var(--dark-gray, #494949); font-size: 0.92rem;
}
.contact-form .form-group, .form-group { margin-bottom: 1.25rem; }

/* ---------- ERROR / 404 / SUCCESS ---------- */
.section .container > div[style*="font-size: 8rem"] {
    background: linear-gradient(120deg, #FF873B 0%, #F9A75B 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent !important; -webkit-text-fill-color: transparent;
    text-shadow: none;
}
.section [class*="fa-check-circle"] {
    filter: drop-shadow(0 6px 22px rgba(255, 135, 59, 0.35));
}

.map-consent-box { border-radius: var(--qi-radius-lg) !important; box-shadow: var(--qi-shadow-md); overflow: hidden; }
.map-consent-box iframe { border-radius: var(--qi-radius-lg); }
.cta-banner .cta-bg::after, .cta-banner::before { background: linear-gradient(135deg, rgba(20, 20, 20, 0.82) 0%, rgba(0, 0, 0, 0.6) 60%, rgba(255, 135, 59, 0.3) 100%); }
.reviews-slider { gap: 1.5rem; }
.fade-in, .fade-in-left, .fade-in-right, .fade-in-scale { transition-duration: 0.85s !important; transition-timing-function: var(--qi-ease-out) !important; }
::selection { background: rgba(255, 135, 59, 0.3); color: var(--dark-gray, #494949); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- LEGAL ---------- */
.legal-container { max-width: 800px; }
.legal-h2 { margin-top: 2.5rem; font-style: italic; color: var(--dark-gray, #494949); }
.legal-h3 { margin-top: 2rem; color: var(--dark-gray, #494949); }
.legal-info-box { background: var(--beige, #F8F4ED); border-radius: var(--qi-radius-lg); padding: 1.5rem 2rem; margin-top: 1rem; box-shadow: var(--qi-shadow-sm); }
.legal-info-row { display: flex; gap: 0.75rem; align-items: center; margin-bottom: 1rem; }
.legal-info-row:last-child { margin-bottom: 0; }
.legal-info-icon { color: var(--orange, #FF873B); font-size: 1.1rem; width: 1.5rem; text-align: center; flex-shrink: 0; }
.legal-info-sub { font-size: 0.9rem; opacity: 0.75; }
.legal-cta { text-align: center; margin-top: 3rem; }
.legal-container ul.feature-list { margin-top: 1rem; padding-left: 0; }
.legal-container code { background: rgba(255, 135, 59, 0.10); border: 1px solid rgba(255, 135, 59, 0.22); padding: 0.1em 0.4em; border-radius: 4px; font-size: 0.92em; color: var(--orange, #FF873B); }

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    .section { padding: clamp(2rem, 6vw, 3.5rem) 0; }
    .section-header h2 { font-size: clamp(1.4rem, 5vw, 2rem); }
    .legal-container { padding: 0 1rem; }
    .legal-info-box { padding: 1.25rem; }
    .quick-cta-box { flex-direction: column !important; gap: 1rem !important; text-align: center; }
}
@media (max-width: 640px) {
    .hero-list { text-align: left; padding-left: 0; display: inline-block; margin-left: auto; margin-right: auto; }
    .hero-list li { justify-content: flex-start !important; font-size: 0.95rem !important; gap: 0.7rem !important; }
    .hero-list li::before, .feature-list li::before, .check-item i, .erwartet-icon {
        width: 24px !important; min-width: 24px !important; height: 24px !important;
        font-size: 0.62rem !important;
    }
    .erwartet-icon i::before { font-size: 0.65rem !important; }
    .hero .google-badge, .hero-content .google-badge, .google-badge {
        display: flex !important; margin-top: 1.75rem !important; margin-left: auto; margin-right: auto;
        padding: 0.45rem 1rem 0.45rem 0.45rem !important; gap: 0.7rem;
    }
    .google-badge > span:first-child, .google-badge .google-badge-icon { width: 36px !important; height: 36px !important; }
    .google-badge > span:first-child i, .google-badge .google-badge-icon i { font-size: 1.05rem !important; }
    .google-text { white-space: normal; line-height: 1.3; font-size: 0.82rem; }
    .section-label { font-size: 0.72rem; padding: 0.35rem 0.8rem; }
    .service-card:hover, .city-card:hover, .review-card:hover,
    .blog-teaser-card:hover, .quote-card:hover, .stat-card:hover { transform: translateY(-3px); }
}
@media (max-width: 480px) {
    .hero h1 { font-size: clamp(1.5rem, 7vw, 1.95rem) !important; }
    .hero-list li { font-size: 0.9rem !important; }
    .btn-lg { padding: 0.75rem 1.5rem !important; font-size: 0.95rem !important; }
    .service-card { min-height: 240px; padding: 1.25rem !important; }
    .service-card h3 { font-size: 1.15rem !important; }
    .legal-info-box { padding: 1rem; border-radius: var(--qi-radius-md); }
    .legal-info-row { gap: 0.5rem; }
}
@media (max-width: 360px) {
    .hero h1 { font-size: 1.4rem !important; }
    .hero-list li { font-size: 0.85rem !important; }
    .google-text { font-size: 0.75rem; }
    .section-label { font-size: 0.68rem; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
    .hero .google-badge, .hero .btn-primary::after { animation: none !important; }
    .service-card:hover, .city-card:hover, .review-card:hover,
    .blog-teaser-card:hover, .quote-card:hover, .stat-card:hover,
    .feature-item:hover, .hero-list li:hover::before,
    .google-badge:hover, .quiz-option:hover,
    .nav-cta:hover, .back-to-top:hover, .footer-contact-btn:hover,
    .service-card:hover::after, .erwartet-list li:hover .erwartet-icon { transform: none !important; }
    .city-card:hover .city-card-img, .blog-teaser-card:hover .blog-teaser-image { transform: none !important; }
}
@media (forced-colors: active) {
    .btn-primary, .btn-outline-dark, .nav-cta { border: 2px solid currentColor; }
    .hero-list li::before, .feature-list li::before, .check-item i, .erwartet-icon { forced-color-adjust: none; }
}