/*
Theme Name:   Mobilglanz24 SKRY Design
Theme URI:    https://mobilglanz24.de/
Author:       Erdal Sakarya, SKRY Design
Author URI:   https://mobilglanz24.de/
Description:  Ein maßgeschneidertes Theme für die Webseite von Mobilglanz24.
Version:      1.2.9
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  mobilglanz24-skry-design
*/

/*--------------------------------------------------------------
>>> INHALTSVERZEICHNIS:
----------------------------------------------------------------
1.0 GRUNDEINSTELLUNGEN & VARIABLEN
2.0 ALLGEMEINE ELEMENTE (Body, H1, P, A etc.)
3.0 BARRIEREFREIHEIT (Skip-Link)
4.0 HEADER & NAVIGATION
5.0 FOOTER
6.0 STARTSEITEN-SEKTIONEN (About, Services, Pricing etc.)
7.0 DIENSTLEISTUNGS-SEITEN (Service Pages)
8.0 WELLNESS-PAKET SEITEN (Package Pages)
9.0 RECHTLICHE SEITEN (Legal Pages)
10.0 RESPONSIVE DESIGN (Media Queries)
11.0 ABHOL- & BRINGSERVICE (Statisch)
12.0 AUTO-SCROLL-EFFEKT (V.1.2.7 - Layout Fix)
13.0 AUTO-SCROLL ANNOTATIONEN (KORRIGIERT V.1.2.7)
--------------------------------------------------------------*/

/*--------------------------------------------------------------
1.0 GRUNDEINSTELLUNGEN & VARIABLEN
--------------------------------------------------------------*/
:root {
    --primary-color: #00bcd4;
    --dark-bg: #1c1c1e;
    --light-bg: #2c2c2e;
    --text-light: #f5f5f5;
    --text-medium: #a9a9a9;
    --border-color: rgba(255, 255, 255, 0.1);
    --accent-gradient: linear-gradient(135deg, #00bcd4 0%, #00acc1 100%);
}

/*--------------------------------------------------------------
2.0 ALLGEMEINE ELEMENTE
--------------------------------------------------------------*/
* { margin: 0; padding: 0; box-sizing: border-box; }
html { 
    scroll-behavior: smooth; 
    overflow-x: hidden;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: var(--text-light);
    background-color: var(--dark-bg);
    overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 { color: var(--text-light); }
p, li { color: var(--text-medium); margin-bottom: 1rem; }
a { color: var(--primary-color); text-decoration: none; }
img { max-width: 100%; height: auto; }
img[width][height] {
    height: auto;
}
/* KORREKTUR V.1.2.1: Abstand oben an Header-Höhe (ca. 96px) angepasst */
main { padding-top: 96px; } 
body.home main { padding-top: 0; }

/*--------------------------------------------------------------
3.0 BARRIEREFREIHEIT
--------------------------------------------------------------*/
.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: -9999;
    background: var(--primary-color);
    color: white;
    padding: 8px 12px;
    transition: all 0.3s ease;
}
.skip-link:focus {
    position: fixed;
    top: 10px;
    left: 10px;
    width: auto;
    height: auto;
    overflow: visible;
    z-index: 99999;
}

/*--------------------------------------------------------------
4.0 HEADER & NAVIGATION
--------------------------------------------------------------*/
header { position: fixed; width: 100%; top: 0; z-index: 1000; background: rgba(28, 28, 30, 0.8); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border-bottom: 1px solid var(--border-color); }
nav { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 5%; max-width: 1400px; margin: 0 auto; }

/* KORREKTUR V.1.2.1: Desktop-Logo auf 80px gesetzt (final) */
.logo-img { 
    height: 80px !important; 
    width: auto; 
    transition: height 0.3s ease; 
}

.nav-controls { 
    display: flex; 
    align-items: center; 
    gap: 1.5rem;
    flex-shrink: 0; 
    flex-wrap: nowrap;
}

.nav-menu { 
    list-style: none; 
    display: flex; 
    gap: 2rem; 
    align-items: center; 
    padding: 0; 
    visibility: visible;
}
.nav-menu a { color: var(--text-light); text-decoration: none; font-weight: 500; position: relative; }
.nav-menu a::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background: var(--primary-color); transition: width 0.3s ease; }
.nav-menu a:hover::after,
.nav-menu .current-menu-item a::after { 
    width: 100%; 
}
.header-buttons { 
    display: flex; 
    align-items: center; 
    gap: 1rem; 
    visibility: visible;
}
.social-btn { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; text-decoration: none; transition: all 0.3s ease; background: transparent; border: 1px solid var(--border-color); }
.social-btn svg { width: 20px; height: 20px; fill: white; }
.social-btn:hover { transform: scale(1.1); border-color: var(--primary-color); background-color: rgba(255,255,255,0.1); }
.book-btn { background: var(--accent-gradient); color: white; padding: 0.6rem 1.2rem; border-radius: 5px; text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 0.5rem; transition: all 0.3s ease; }
.book-btn:hover {
    filter: brightness(1.2);
    transform: translateY(-2px);
}
.mobile-menu-btn { 
    display: none; 
    visibility: visible;
}

/*--------------------------------------------------------------
5.0 FOOTER
--------------------------------------------------------------*/
footer { background: #000; color: white; padding: 4rem 5%; text-align: center; border-top: 1px solid var(--border-color); margin-top: 4rem; }
.footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; text-align: left; max-width: 1200px; margin: 0 auto 3rem; }
.footer-column h4 { color: var(--primary-color); margin-bottom: 1.5rem; font-size: 1.2rem; }
.footer-column p, .footer-column a { color: var(--text-medium); text-decoration: none; display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1rem; }
.footer-column a:hover { color: var(--text-light); }
.footer-column svg { width: 20px; height: 20px; fill: var(--text-light); flex-shrink: 0; }
.footer-bottom { border-top: 1px solid var(--border-color); padding-top: 2rem; margin-top: 2rem; text-align: center; }
.footer-bottom p { color: var(--text-medium); }

/*--------------------------------------------------------------
6.0 STARTSEITEN-SEKTIONEN
--------------------------------------------------------------*/
.about { padding: 5rem 5%; background: var(--light-bg); }
.about-content { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.about-text h1 { font-size: 2.5rem; margin-bottom: 1rem; }
.about-text h1 span { color: var(--primary-color); }
.services { padding: 5rem 5%; background: var(--dark-bg); }
.section-header { text-align: center; max-width: 800px; margin: 0 auto 3rem; }
.section-header h2 { font-size: 2.5rem; margin-bottom: 1rem; color: var(--text-light); }
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; max-width: 1200px; margin: 0 auto; }
.service-card { border: 1px solid var(--border-color); padding: 2rem; border-radius: 15px; text-align: center; text-decoration: none; color: var(--text-light); display: flex; flex-direction: column; position: relative; overflow: hidden; background-size: cover; background-position: center; z-index: 1; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.service-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.6); z-index: -1; border-radius: 15px; transition: background-color 0.3s ease; }
.service-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.2); }
.service-card:hover::before { background-color: rgba(0, 0, 0, 0.4); }
.service-card h3 { margin-bottom: 0.5rem; }
.service-card p { flex-grow: 1; }
.service-details-btn { margin-top: 1.5rem; color: var(--primary-color); font-weight: 600; text-decoration: none; }
.vehicle-types { background: var(--dark-bg); padding: 3rem 5%; }
.vehicle-types-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; max-width: 1200px; margin: 3rem auto 0; }
.vehicle-type-item { text-align: center; }
.vehicle-icon { width: 100%; height: auto; aspect-ratio: 1 / 1; margin: 0 auto 1rem; background: var(--light-bg); border: 1px solid var(--border-color); border-radius: 15px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.vehicle-icon img { width: 100%; height: 100%; object-fit: cover; }
.vehicle-type-item h4 { font-size: 0.9rem; font-weight: 600; color: var(--text-light); }
.pricing { padding: 5rem 5%; background: var(--light-bg); }
.pricing-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; max-width: 1400px; margin: 0 auto; }
.pricing-card { background: var(--dark-bg); border: 1px solid var(--border-color); border-radius: 20px; padding: 2rem 1.5rem; text-align: center; display: flex; flex-direction: column; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.pricing-card:hover { transform: translateY(-5px); }
.pricing-card.featured { background: var(--primary-color); color: white; transform: scale(1.05); }
.pricing-card.featured:hover { transform: scale(1.08) translateY(-5px); }
.pricing-card.featured * { color: white !important; }
.package-name { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem; }
.package-price { font-size: 2.5rem; font-weight: 800; color: var(--primary-color); margin-bottom: 1.5rem; }
.package-price .vat-text { font-size: 0.9rem; font-weight: 400; vertical-align: text-top; margin-left: 4px; color: var(--text-medium); }
.package-features { list-style: none; margin-bottom: 2rem; text-align: left; font-size: 0.9rem; flex-grow: 1; padding: 0; }
.package-features li { padding: 0.6rem 0; border-bottom: 1px solid var(--border-color); color: var(--text-medium);}
.package-features li::before { content: '✓'; color: var(--primary-color); font-weight: bold; font-size: 1.2rem; margin-right: 0.5rem; }
.pricing-card.featured .package-features li::before { color: white; }
.package-details-link { display: block; margin: 0 auto 1.5rem; font-weight: 600; color: var(--primary-color); text-decoration: none; transition: color 0.3s ease; }
.package-details-link:hover { color: var(--text-light); }
.pricing-card.featured .package-details-link { color: white !important; }
.pricing-card.featured .package-details-link:hover { opacity: 0.8; }
.additional-package-features { margin: -1rem 0 2rem; text-align: left; }
.additional-package-features summary { color: var(--primary-color); cursor: pointer; font-size: 0.9rem; font-weight: 600; }
.additional-package-features summary:focus-visible { border-radius: 2px; outline: 2px solid currentColor; outline-offset: 3px; }
.additional-package-features ul { list-style: none; margin: 1rem 0 0; padding: 0; }
.additional-package-features li { border-bottom: 1px solid var(--border-color); color: var(--text-medium); font-size: 0.9rem; padding: 0.6rem 0; }
.additional-package-features li::before { color: var(--primary-color); content: '✓'; font-size: 1.2rem; font-weight: bold; margin-right: 0.5rem; }
.pricing-card.featured .additional-package-features li::before { color: white; }
.pricing-card .book-btn { width: 100%; justify-content: center; }

.ceo-section { 
    background: var(--dark-bg); 
    padding: 5rem 5%; 
}
.ceo-container { max-width: 1200px; margin: 0 auto; }
.ceo-content { display: grid; grid-template-columns: 1fr 2fr; gap: 4rem; align-items: center; }
.ceo-image {
    max-width: 350px;
    aspect-ratio: 1 / 1; 
}
.ceo-image img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover;
    border-radius: 20px; 
    box-shadow: 0 20px 40px rgba(0,0,0,0.15); 
}
.ceo-text blockquote { color: var(--text-medium); border-left-color: var(--primary-color); }
.testimonials { padding: 5rem 5%; background: var(--light-bg); }
.testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem; max-width: 1200px; margin: 0 auto; }
.testimonial-card { background: var(--dark-bg); border: 1px solid var(--border-color); padding: 2rem; border-radius: 15px; position: relative; }
.testimonial-card::before { content: '"'; position: absolute; top: -10px; left: 20px; font-size: 4rem; color: var(--primary-color); opacity: 0.1; }
.testimonial-author { display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.author-avatar { width: 50px; height: 50px; border-radius: 50%; background: var(--accent-gradient); display: flex; align-items: center; justify-content: center; color: var(--dark-bg); font-weight: bold; }
.rating { color: #ffc107; margin-top: 0.5rem; }
.rating .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.contact { padding: 5rem 5%; background: var(--dark-bg); }
.contact .section-header { margin-bottom: 3rem; }
.contact-content { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.contact-details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.contact-info h3 { color: var(--primary-color); margin-bottom: 1.5rem; }
.contact-info p, .contact-info a { color: var(--text-medium); text-decoration: none; }
.contact-info .contact-list { list-style: none; padding-left: 0; }
.contact-info .contact-list li, .contact-info .contact-list a { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1rem; }
.hours-table { margin-top: 0; }
.hours-table div { display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid var(--border-color); }
.hours-table div span:first-child { font-weight: 600; color: var(--text-light); }
.contact-socials { margin-top: 2.5rem; }
.contact-socials a { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem; color: var(--text-medium); text-decoration: none; font-weight: 600; }
.contact-socials a svg { width: 28px; height: 28px; fill: white; }
.wpcf7-form p { color: var(--text-light); }
.wpcf7-form input, .wpcf7-form textarea { width: 100%; padding: 1rem; border: 1px solid var(--border-color); border-radius: 5px; background: var(--light-bg); color: white; margin-top: 0.5rem; }
.wpcf7-submit { background: var(--accent-gradient); color: white; padding: 1rem 2.5rem; border: none; border-radius: 50px; cursor: pointer; width: auto; float: left; }
.map-container-full { margin-top: 3rem; grid-column: 1 / -1; }
.map-container-full h3 { text-align: center; margin-bottom: 1.5rem; font-size: 1.8rem;}
.map-container-full iframe { width: 100%; height: 400px; border-radius: 15px; border: 0; filter: invert(90%); }
.fade-in { opacity: 0; transform: translateY(30px); transition: all 0.6s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }
.whatsapp-float { position: fixed; bottom: 20px; right: 20px; width: 60px; height: 60px; background: #25D366; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 5px 20px rgba(0,0,0,0.3); z-index: 100; transition: transform 0.3s ease; }
.whatsapp-float:hover { transform: scale(1.1); }
.whatsapp-float svg { width: 30px; height: 30px; fill: white; }

/*--------------------------------------------------------------
7.0 DIENSTLEISTUNGS-SEITEN
--------------------------------------------------------------*/
.service-page-content .service-hero { padding: 4rem 5%; background: var(--accent-gradient); color: white; text-align: center; }
.service-page-content .service-hero h1 { font-size: 3rem; margin-bottom: 1rem; color: white; }
.service-page-content .service-hero p { color: white; font-size: 1.1rem; }
.service-page-content .service-content { padding: 5rem 5%; max-width: 1200px; margin: 0 auto; }
.service-page-content .service-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; margin-bottom: 4rem;}
.service-page-content .service-intro-image img { width: 100%; border-radius: 15px; }
.service-page-content .process-section { background: var(--light-bg); padding: 3rem; border-radius: 20px; margin: 3rem 0; }
.service-page-content .process-section h2, .service-page-content .before-after h2 { text-align: center; font-size: 2rem; margin-bottom: 3rem; }
.service-page-content .process-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; }
.service-page-content .process-step { background: var(--dark-bg); padding: 2rem; border-radius: 15px; text-align: center; border: 1px solid var(--border-color); }
.service-page-content .step-number { width: 50px; height: 50px; background: var(--accent-gradient); color: var(--dark-bg); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: bold; margin: 0 auto 1rem; }
.service-page-content .pricing-info { background: var(--accent-gradient); color: white; padding: 3rem; border-radius: 20px; text-align: center; margin: 3rem 0; }
.service-page-content .price { font-size: 3rem; font-weight: bold; margin: 1rem 0; }
.service-page-content .cta-section { text-align: center; padding: 3rem; background: var(--light-bg); border-radius: 20px; margin-top: 3rem; }
.service-page-content .cta-buttons { display: flex; gap: 1rem; justify-content: center; margin-top: 2rem; flex-wrap: wrap; }
.service-page-content .primary-btn { background: var(--accent-gradient); color: white; padding: 1rem 2.5rem; border-radius: 5px; text-decoration: none; font-weight: 600; }
.service-page-content .secondary-btn { background: transparent; color: var(--primary-color); padding: 1rem 2.5rem; border-radius: 5px; text-decoration: none; font-weight: 600; border: 2px solid var(--primary-color); }
.service-page-content .phone-bubble { text-align: center; background: var(--accent-gradient); padding: 1.5rem; border-radius: 15px; margin: 3rem auto 0; max-width: 500px; }
.service-page-content .phone-bubble h4 { font-size: 1.2rem; color: white; margin-bottom: 0.5rem; }
.service-page-content .phone-bubble a { font-size: 1.5rem; color: white; font-weight: 600; }
.service-page-content .package-nav { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 4rem auto 0; padding: 2rem 0; border-top: 1px solid var(--border-color); }
.service-page-content .package-nav a { padding: 0.8rem 1.5rem; border: 1px solid var(--border-color); border-radius: 8px; transition: background 0.3s; }
.service-page-content .package-nav a:hover { background: var(--dark-bg); color: var(--text-light); }
.service-page-content .product-item { margin-top: 3rem; padding: 1.5rem; background: var(--dark-bg); border-radius: 10px; border: 1px solid var(--border-color); text-align: left; }
.service-page-content .product-item ul { list-style: none; padding-left: 0; margin-top: 1rem; }
.service-page-content .product-item ul li { padding-left: 1.5rem; position: relative; margin-bottom: 0.5rem; }
.service-page-content .product-item ul li::before { content: '✓'; color: var(--primary-color); position: absolute; left: 0; }
.service-page-content .product-price { display: block; font-size: 1.3rem; font-weight: 600; color: var(--primary-color); margin-top: 1rem; }
.service-page-content .comparison-table { margin: 4rem 0; }
.service-page-content .comparison-table h2 { text-align: center; font-size: 2rem; margin-bottom: 2rem; }
.service-page-content .comparison-table table { width: 100%; border-collapse: collapse; background: var(--light-bg); border-radius: 15px; overflow: hidden; border: 1px solid var(--border-color); }
.service-page-content .comparison-table th, .service-page-content .comparison-table td { padding: 1rem; text-align: center; }
.service-page-content .comparison-table th { background: var(--dark-bg); }
.service-page-content .comparison-table td { border-top: 1px solid var(--border-color); }
.service-page-content .comparison-table td:first-child { text-align: left; font-weight: 600; color: var(--text-light); }
.service-page-content .comparison-table small { font-size: 0.8em; color: var(--text-medium); display: block; margin-top: 4px; }
.service-page-content .check { color: var(--primary-color); font-weight: bold; }
.service-page-content .before-after-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.service-page-content .before-after-item { position: relative; border-radius: 15px; overflow: hidden; }
.service-page-content .before-after-item img { width: 100%; height: 300px; object-fit: cover; }
.service-page-content .before-after-label { position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,0.7); color: white; padding: 0.5rem 1rem; border-radius: 25px; font-weight: 600; }
.service-page-content .wax-types { margin: 3rem 0; }
.service-page-content .wax-types h2 { text-align: center; font-size: 2rem; margin-bottom: 3rem; }
.service-page-content .wax-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }
.service-page-content .wax-card { background: var(--light-bg); padding: 2rem; border-radius: 15px; text-align: center; border: 1px solid var(--border-color); }

/* Osmose-Reinigung */
.osmose-page-eyebrow { color: var(--primary-color); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; margin-bottom: 0.5rem; text-transform: uppercase; }
.osmose-icon { color: var(--primary-color); }
.osmose-icon svg { display: block; height: auto; width: 100%; }
.osmose-icon-ring { fill: rgba(0, 188, 212, 0.08); stroke: currentColor; stroke-width: 2; }
.osmose-icon-drop { fill: currentColor; }
.osmose-icon-highlight { fill: none; stroke: var(--dark-bg); stroke-linecap: round; stroke-width: 6; }
.osmose-page-content .service-hero { background: var(--light-bg); }
.osmose-page-content .service-hero > p:last-child { margin: 0 auto; max-width: 800px; }
.osmose-page-content .service-intro h2 { color: var(--primary-color); font-size: 2.2rem; margin-bottom: 1.25rem; }
.osmose-page-content .service-intro p + p { margin-top: 1rem; }
.osmose-page-content .product-item { margin-top: 0; }
.osmose-stat-grid { display: grid; gap: 1rem; grid-template-columns: repeat(4, 1fr); margin: 3rem 0; }
.osmose-stat { background: var(--light-bg); border: 1px solid var(--border-color); border-radius: 12px; padding: 1.25rem; text-align: center; }
.osmose-stat strong { color: var(--primary-color); display: block; font-size: 1.6rem; }
.osmose-stat span { color: var(--text-medium); display: block; font-size: 0.85rem; margin-top: 0.3rem; }
.osmose-table-wrapper { overflow-x: auto; }
.osmose-faq { margin: 4rem 0; }
.osmose-faq h2 { font-size: 2rem; margin-bottom: 2rem; text-align: center; }
.osmose-faq details { background: var(--light-bg); border: 1px solid var(--border-color); border-radius: 10px; margin-bottom: 1rem; padding: 1.25rem 1.5rem; }
.osmose-faq summary { color: var(--text-light); cursor: pointer; font-weight: 600; }
.osmose-faq summary:focus-visible { border-radius: 2px; outline: 2px solid var(--primary-color); outline-offset: 3px; }
.osmose-faq details p { margin: 1rem 0 0; }

@media (max-width: 768px) {
    .osmose-stat-grid { grid-template-columns: repeat(2, 1fr); }
}

/*--------------------------------------------------------------
8.0 WELLNESS-PAKET SEITEN
--------------------------------------------------------------*/
.package-page-content .subpage-hero { padding: 4rem 5%; text-align: center; background: var(--light-bg); }
.package-page-content .package-details { padding: 4rem 5%; }
.package-page-content .package-details-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr; gap: 4rem; align-items: flex-start; }
.package-page-content .included-services h2, .package-page-content .addons h2 { font-size: 2.2rem; margin-bottom: 2rem; color: var(--primary-color); border-bottom: 1px solid var(--border-color); padding-bottom: 1rem; }
.package-page-content .service-item { margin-bottom: 2rem; }
.package-page-content .service-item h4 { font-size: 1.2rem; margin-bottom: 0.5rem; }
/* KORREKTUR V.1.2.1: 'top' an neue Header-Höhe (80px) + Puffer (16px) angepasst */
.package-page-content .pricing-info { background: var(--dark-bg); padding: 2rem; border-radius: 15px; border: 1px solid var(--border-color); text-align: center; position: sticky; top: 96px; }
body.admin-bar .package-page-content .pricing-info {
    top: 128px; /* 96px + 32px Admin Bar */
}
.package-page-content .pricing-info h3 { font-size: 1.5rem; margin-bottom: 1rem; }
.package-page-content .pricing-info .price { font-size: 2.8rem; font-weight: 700; color: var(--primary-color); margin-bottom: 0.5rem; }
.package-page-content .pricing-info .price span { font-size: 1rem; font-weight: 400; color: var(--text-medium); display: block; }
.package-page-content .pricing-info .disclaimer { font-size: 0.8rem; color: var(--text-medium); margin-bottom: 1.5rem; }
.package-page-content .product-item { margin-bottom: 2rem; padding: 1.5rem; background: var(--light-bg); border-radius: 10px; border: 1px solid var(--border-color); }
.package-page-content .product-item h4 { font-size: 1.2rem; margin-bottom: 0.5rem; }
.package-page-content .product-item ul { list-style: none; padding-left: 0; margin-top: 1rem; }
.package-page-content .product-item ul li { padding-left: 1.5rem; position: relative; margin-bottom: 0.5rem; }
.package-page-content .product-item ul li::before { content: '✓'; color: var(--primary-color); position: absolute; left: 0; }
.package-page-content .product-price { display: block; font-size: 1.3rem; font-weight: 600; color: var(--primary-color); margin-top: 1rem; }

/*--------------------------------------------------------------
9.0 RECHTLICHE SEITEN
--------------------------------------------------------------*/
.legal-content-wrapper { padding: 120px 5% 5rem; }
.legal-content { max-width: 900px; margin: 0 auto; line-height: 1.8; }
.legal-content h1, .legal-content h2, .legal-content h3 { margin-bottom: 1rem; }
.legal-content ul, .legal-content ol { padding-left: 20px; margin-bottom: 1rem; }

/*--------------------------------------------------------------
10.0 RESPONSIVE DESIGN
--------------------------------------------------------------*/
@media (max-width: 968px) {
    /* KORREKTUR V.1.1.9: 'main' Abstand oben an neue Header-Höhe (ca. 70px) angepasst */
    main { margin-top: 70px; } 
    
    /* KORREKTUR V.1.1.9 (MOBIL): Logo vergrößert für besseres Verhältnis */
    .logo-img { 
        height: 55px !important; 
    }
    
    .nav-menu { display: none; }
    .nav-controls .nav-menu { display: flex; position: fixed; top: 0; right: -100%; width: 100%; height: 100vh; background: var(--dark-bg); flex-direction: column; justify-content: center; align-items: center; transition: right 0.3s ease-in-out; z-index: 1000; padding:0; gap: 0; }
    .nav-controls .nav-menu.active { right: 0; }
    .nav-menu li { margin: 1.5rem 0; }
    .nav-menu a { font-size: 1.5rem; }
    .header-buttons .social-btn { display: none; }
    
    /* KORREKTUR V.1.1.9 (MOBIL): Button-Padding reduziert für besseres Verhältnis */
    .book-btn { 
        padding: 0.4rem 0.8rem; 
        font-size: 0.8rem; 
        border-radius: 5px; 
        white-space: nowrap; 
    }
    
    .mobile-menu-btn { 
        display: flex; 
        flex-direction: column; 
        gap: 5px; 
        cursor: pointer; 
        background: none; 
        border: none; 
        z-index: 1001; 
        padding: 10px; 
        visibility: visible;
    }
    .mobile-menu-btn span { width: 25px; height: 3px; background: var(--text-light); border-radius: 2px; transition: all 0.3s ease; }
    .mobile-menu-btn.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
    .mobile-menu-btn.active span:nth-child(2) { opacity: 0; }
    .mobile-menu-btn.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -7px); }

    .about-content, .contact-content, .ceo-content, .footer-grid, .contact-details-grid { grid-template-columns: 1fr; }
    .ceo-content { text-align: left; }
    .ceo-image { margin: 0 auto; }
    
    .footer-grid, .contact-details-grid { text-align: center; }
    .footer-column p, .footer-column a { justify-content: center; }
    .pricing-cards { grid-template-columns: 1fr; max-width: 500px; }
    .pricing-card.featured { transform: scale(1); }
    
    .service-page-content .service-hero h1, .package-page-content .subpage-hero h1 { font-size: 2.2rem; }
    .service-page-content .service-intro, .package-page-content .package-details-grid { grid-template-columns: 1fr; }
    .package-page-content .pricing-info { position: static; margin-bottom: 3rem; }

    .service-page-content .comparison-table thead { display: none; }
    .service-page-content .comparison-table tr { display: block; margin-bottom: 2rem; border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden; }
    .service-page-content .comparison-table td { display: block; text-align: right; border-top: none; padding: 0.8rem 1rem; }
    .service-page-content .comparison-table td:first-child { background: var(--dark-bg); text-align: center; font-size: 1.2rem; padding: 1rem; }
    .service-page-content .comparison-table td::before { content: attr(data-label); float: left; font-weight: 600; color: var(--text-light); }
    
    /* KORREKTUR V.1.1.9: !important hinzugefügt, um "abgeschnittenes" Layout zu erzwingen */
    .pickup-service-promo-icon-content {
        grid-template-columns: 1fr !important;
        text-align: center;
        gap: 2rem;
    }
    .large-icon {
        max-width: 150px;
    }
    .pickup-promo-text h2 {
        font-size: 1.8rem;
    }
    
    /* KORREKTUR V.1.2.6: Sektionshöhe mobil verkürzen, um Lücke zu entfernen */
    .car-scroll-trigger-section {
        height: 120vh !important;
    }
    
    /* KORREKTUR V.1.2.4: Mobile Anpassung (KEIN Fullscreen) */
    .car-scroll-header {
        padding: 0 5%;
    }
    .car-scroll-header h2 {
        font-size: 2rem; /* Etwas kleiner auf Mobilgeräten */
    }

    /* KORREKTUR V.1.2.6: Mobile Textposition (Overlay unten) */
    .car-annotations {
        position: absolute;
        width: 100%;
        padding: 0 1rem;
        margin-top: 0;
        bottom: 5%; /* Positioniert am unteren Rand des Containers */
        left: 0; /* V.1.2.7: Zurückgesetzt */
        z-index: 15;
    }
    .annotation {
        position: relative !important; /* V.1.2.7: Geändert von absolute */
        top: auto !important;
        left: auto !important; /* V.1.2.7: Geändert von 1rem */
        right: auto !important; /* V.1.2.7: Geändert von 1rem */
        bottom: auto !important; /* V.1.2.7: Geändert von 0 */
        transform: none !important;
        width: 100% !important; /* V.1.2.7: Geändert von auto */
        max-width: 100% !important;
        text-align: center !important;
        margin-bottom: 1rem; /* V.1.2.7: Fügt Abstand zwischen gestapelten Texten hinzu */
    }
    .annotation-line {
        display: none; /* Linien auf Mobilgeräten ausblenden */
    }
    .annotation-text {
        text-align: center;
        margin: 0;
        padding: 1rem;
        background: rgba(0,0,0,0.3);
        border-radius: 10px;
    }
    .annotation-text h4 { color: var(--primary-color); }
    .annotation-text p { color: var(--text-light); margin: 0; }
    
    /* NEU V.1.2.2: Versteckt den zweiten Außen-Text, um Überlappung zu verhindern */
    #anno-versiegelung {
        display: none !important;
    }
}

@media (min-width: 969px) {
    .nav-menu { display: flex; }
}

@media (max-width: 768px) {
    .vehicle-types-grid { grid-template-columns: repeat(2, 1fr); }
    .service-page-content .before-after-grid { grid-template-columns: 1fr; }

    .pickup-service-page .pickup-process-grid {
        grid-template-columns: 1fr !important;
    }
}

/*--------------------------------------------------------------
11.0 ABHOL- & BRINGSERVICE (Statisch)
--------------------------------------------------------------*/

.pickup-service-promo-icon-section {
    padding: 4rem 5%;
    background: var(--dark-bg); 
    border-bottom: 1px solid var(--border-color);
}
.pickup-service-promo-icon-content {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 3rem;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}
.pickup-promo-icon {
    display: block;
    margin: 0 auto;
    height: auto;
}
.large-icon {
    width: 100%;
    max-width: 200px;
}
.pickup-promo-text h2 {
    font-size: 2.2rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}
.pickup-promo-text p {
    font-size: 1.1rem;
    color: var(--text-medium);
    margin-bottom: 2rem;
}


.pickup-service-cta {
    background: var(--light-bg);
    padding: 4rem 5%;
    text-align: center;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}
.pickup-cta-content {
    max-width: 800px;
    margin: 0 auto;
}
.pickup-service-cta h2 {
    font-size: 2.2rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}
.pickup-service-cta p {
    font-size: 1.1rem;
    color: var(--text-light);
    margin-bottom: 2rem;
}
.small-icon {
    width: 100%;
    max-width: 120px;
    margin-bottom: 1.5rem; 
}
.pickup-service-cta .pickup-promo-icon {
    margin-left: auto;
    margin-right: auto;
}

/* Detailseite: /abhol-und-bringservice/ */
.pickup-service-page {
    padding: 4rem 5% 5rem;
    max-width: 1200px;
    margin: 0 auto;
}
.pickup-service-hero {
    padding-top: 5rem;
    padding-bottom: 3rem;
    text-align: center;
}
.pickup-service-hero h1 {
    font-size: 2.8rem;
    color: var(--primary-color);
}
.pickup-service-hero p {
    font-size: 1.2rem;
    color: var(--text-medium);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.page-hero-icon {
    width: 100%;
    max-width: 250px;
    margin-bottom: 1.5rem;
    margin-left: auto;
    margin-right: auto;
}
.pickup-service-content {
    padding: 3rem;
    background: var(--light-bg);
    border-radius: 20px;
    margin-bottom: 3rem;
}
.pickup-service-content h2 {
    text-align: center;
    font-size: 2.2rem;
    margin-bottom: 3rem;
    color: var(--text-light);
}

.pickup-service-page .pickup-process-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem !important;
    grid-template-columns: repeat(2, 1fr) !important;
}

.pickup-process-step {
    background: var(--dark-bg);
    padding: 2.5rem 2rem;
    border-radius: 15px;
    border: 1px solid var(--border-color);
    text-align: center;
}
.pickup-process-step .step-number {
    width: 50px;
    height: 50px;
    background: var(--accent-gradient);
    color: var(--dark-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0 auto 1.5rem;
}
.pickup-process-step h3 {
    font-size: 1.3rem;
    color: var(--text-light);
    margin-bottom: 1rem;
}
.pickup-price-section {
    background: var(--dark-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 3rem;
    text-align: center;
}
.pickup-price {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--primary-color);
    margin: 1rem 0 0.5rem;
}
.pickup-price-details {
    font-size: 1rem;
    color: var(--text-medium);
    max-width: 500px;
    margin: 0 auto;
}
.pickup-price-section .book-btn {
    margin-top: 2rem;
}

/*--------------------------------------------------------------
12.0 AUTO-SCROLL-EFFEKT (V.1.2.7 - Layout Fix)
--------------------------------------------------------------*/
.car-scroll-trigger-section {
    /* KORREKTUR V.1.2.7: Höhe auf 140vh für lange Desktop-Scroll-Dauer */
    height: 140vh; 
    position: relative;
    background: var(--dark-bg);
    z-index: 10; 
    overflow: clip;
    padding-top: 5rem;
}

.car-scroll-header {
    /* KORREKTUR V.1.2.4: Zurück zum normalen Block-Flow */
    margin-bottom: 2rem;
    position: relative;
    z-index: 15; /* Stellt sicher, dass es über dem Sticky-Container ist */
}
.car-scroll-header h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}
.car-scroll-header p {
    font-size: 1.1rem;
    color: var(--text-medium);
    max-width: 600px;
    margin: 0 auto;
}

/* KORREKTUR V.1.2.1: 'top' an neue Header-Höhe angepasst */
.car-scroll-sticky-container {
    position: -webkit-sticky;
    position: sticky;
    top: 96px; 
    height: 80vh;
    width: 100%;
    overflow: hidden;
}
body.admin-bar .car-scroll-sticky-container {
    top: 128px; /* 96px + 32px Admin Bar */
}

/* KORREKTUR V.1.2.1: Flexbox-Zentrierung */
.car-image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* KORREKTUR V.1.2.7: Zurück zu 'contain' für volles Bild */
.car-scroll-image {
    position: absolute;
    width: 100%; 
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain !important; /* Stellt sicher, dass das GANZE Auto sichtbar ist */
    object-position: center center !important; /* Zentriert das Bild */
}
.car-interior {
    z-index: 11;
}
.car-exterior {
    z-index: 12; 
    opacity: 1; 
}

/*--------------------------------------------------------------
13.0 AUTO-SCROLL ANNOTATIONEN (KORRIGIERT V.1.2.7)
--------------------------------------------------------------*/
.car-annotations {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none; 
    z-index: 15;
}
.annotation {
    position: absolute;
    width: 250px;
    max-width: 30%;
    display: flex;
    align-items: center;
    opacity: 0; 
    pointer-events: auto;
}
.annotation-line {
    width: 100px;
    height: 1px;
    background: var(--text-medium);
    flex-shrink: 0;
}
.annotation-text {
    padding-left: 1rem;
    text-align: left;
}
.annotation-text h4 {
    color: var(--primary-color);
    font-size: 1.1rem;
    margin: 0 0 0.25rem;
}
.annotation-text p {
    color: var(--text-light);
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.4;
}

/* Positionierung der Texte */
#anno-lack {
    top: 30%;
    left: 15%;
}
#anno-versiegelung {
    top: 50%;
    right: 15%;
    flex-direction: row-reverse; 
}
#anno-versiegelung .annotation-line {
    width: 80px;
}
#anno-versiegelung .annotation-text {
    padding-left: 0;
    padding-right: 1rem;
    text-align: right;
}
#anno-interior {
    top: 60%;
    left: 20%;
}
#anno-interior .annotation-line {
    width: 50px;
}

/*--------------------------------------------------------------
14.0 PHASE 1 TEASER (Gutschein) (KORRIGIERT V.1.3.3)
--------------------------------------------------------------*/
.teaser-promo {
    padding: 4rem 5%;
    background: var(--dark-bg);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}
.teaser-content {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 3rem;
    align-items: center;
    background: var(--light-bg);
    padding: 3rem;
    border-radius: 15px;
}
.teaser-text h2 {
    font-size: 2.2rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}
.teaser-text p {
    font-size: 1.1rem;
    color: var(--text-medium);
    margin-bottom: 2rem;
}
.teaser-image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid var(--border-color);
}