:root {
    /* Colors - Hasler Branding (Blue & Lime Green) */
    --primary-color: #0099DA;
    /* Hasler Cyan Blue */
    --secondary-color: #97C03E;
    /* Hasler Lime Green */
    --accent-color: #97C03E;
    /* Usage as accent */

    --brand-dark: #333333;
    /* For text */
    --dark-bg: #0f172a;
    --light-bg: #F8FAFC;
    --white: #FFFFFF;
    --text-main: #475569;
    --text-light: #64748B;
    --border-color: #E2E8F0;
    --card-bg: #FFFFFF;

    /* Spacing */
    --container-width: 1200px;
    --section-padding: 5rem 0;

    /* Effects */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --radius-md: 8px;
    --radius-lg: 16px;

    /* Transitions */
    --transition: all 0.3s ease;
}

/* Preloader wurde am 30.01.2026 entfernt (First Paint sofort) - Regeln gelöscht 04.09.2026 */

/* .loader-content / .loader-logo / .spinner entfernt am 06.09.2026 -
   seit dem Ausbau des Preloaders am 30.01.2026 ohne Verwendung im Markup
   (projektweit geprueft). @keyframes pulse bleibt, wird weiter genutzt. */

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Dark Mode Variables */
body.dark-mode {
    --light-bg: #0f172a;
    --white: #1e293b;
    --text-main: #e2e8f0;
    --text-light: #94a3b8;
    --border-color: #334155;
    --card-bg: #1e293b;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
}

body.dark-mode .section-title,
body.dark-mode .hero-title,
body.dark-mode h3,
body.dark-mode h4 {
    color: #e2e8f0;
}

body.dark-mode .service-card,
body.dark-mode .testimonial-card,
body.dark-mode .faq-item details,
body.dark-mode .process-section,
body.dark-mode .process-step .step-icon {
    background-color: var(--card-bg);
    color: var(--text-main);
}

body.dark-mode .process-section {
    background-color: var(--light-bg);
}

body.dark-mode .nav-list {
    background-color: var(--card-bg);
}

/* =========================================
   INTERACTIVE ENHANCEMENTS
   ========================================= */

/* Scroll Progress Bar */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    z-index: 10001;
    width: 0;
    transition: width 0.1s ease-out;
}

/* Active Nav Link */
.nav-link.active {
    color: var(--secondary-color) !important;
}

.nav-link.active::after {
    width: 100% !important;
}

/* Improved Card Hover with Glow */
.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(0, 153, 218, 0.1), rgba(151, 192, 62, 0.1));
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.service-card:hover::before {
    opacity: 1;
}

/* Testimonial Card Shine Effect */
.testimonial-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
    pointer-events: none;
}

.testimonial-card:hover::before {
    left: 100%;
}

/* Button Ripple Effect Enhancement */
.btn {
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.btn:active::before {
    width: 300px;
    height: 300px;
}

/* Smooth Hover Transitions */
.info-item,
.faq-item details,
.process-step {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* FAQ Improved Animation */
.faq-item details[open] {
    box-shadow: var(--shadow-md);
}

.faq-item details[open] summary {
    border-bottom: 1px solid var(--border-color);
}

/* Stat Number Glow */
.stat-number {
    text-shadow: 0 0 20px rgba(151, 192, 62, 0.5);
}

/* Improved Focus States for Accessibility */
.btn:focus,
.nav-link:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 2px solid var(--secondary-color);
    outline-offset: 2px;
}

/* Smooth Image Reveal */
.about-image {
    transition: transform 0.5s ease, filter 0.5s ease;
}

.about-image:hover {
    transform: scale(1.02);
    filter: saturate(1.2) brightness(1.08);
}

/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Skip Link (Accessibility) */
.skip-link {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--primary-color);
    color: var(--white);
    padding: 1rem 2rem;
    z-index: 100000;
    border-radius: var(--radius-md);
    font-weight: 600;
    transition: top 0.3s ease;
}

.skip-link:focus {
    top: 10px;
}

html {
    scroll-behavior: smooth;
}

/* Scroll-Snapping auf Handy und Tablet (Kundenentscheid 07.10.2026): beim
   Wischen rastet die Seite sanft am Anfang eines Abschnitts ein, aber nur in
   dessen Naehe ("proximity") - dazwischen scrollt man frei. Bei reduzierter
   Bewegung aus. */
@media (max-width: 1024px) and (prefers-reduced-motion: no-preference) {
    html {
        scroll-snap-type: y proximity;
    }

    .hero,
    .page-header,
    .page-header-simple,
    .section {
        scroll-snap-align: start;
    }

    /* Beim Hochscrollen kein Einrasten - es wirkte dort zu hart
       (Kundenentscheid 08.10.2026). script.js setzt html.scroll-up,
       solange nach oben gewischt wird. */
    html.scroll-up {
        scroll-snap-type: none;
    }
}

/* Abstand fuer die fixierte Kopfleiste beim Einrasten. Bis 768px blendet
   script.js die Leiste beim Herunterscrollen aus, dort bewusst ohne Abstand.
   Werte = gemessene Hoehe der Leiste im gescrollten Zustand (07.10.2026);
   aendert sich die Kopfleiste, muessen sie mit. */
@media (min-width: 769px) and (max-width: 1024px) and (prefers-reduced-motion: no-preference) {
    html {
        scroll-padding-top: 56px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) and (max-height: 500px) and (prefers-reduced-motion: no-preference) {
    html {
        scroll-padding-top: 82px;
    }
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--text-main);
    background-color: var(--light-bg);
    line-height: 1.6;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
    font-family: Georgia, "Times New Roman", serif;
    color: var(--primary-color);
    line-height: 1.2;
    margin-bottom: 1rem;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

/* Utilities */
.container {
    width: 90%;
    max-width: var(--container-width);
    margin: 0 auto;
}

.text-center {
    text-align: center;
}

.hidden {
    display: none;
}

.section {
    padding: var(--section-padding);
}

.section-header {
    margin-bottom: 3rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.section-tag {
    display: inline-block;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 2px;
    color: var(--secondary-color);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.section-title {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.section-desc {
    color: var(--text-light);
    font-size: 1.1rem;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 0.8rem 1.8rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: var(--transition);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.btn-primary {
    background-color: var(--secondary-color);
    color: var(--white);
}

.btn-primary:hover {
    /* Vorher #2563EB - ein Blau, das in der Markenpalette gar nicht vorkommt
       (Hasler-Blau ist #0099DA). Jetzt ein dunkleres Gruen der eigenen Farbe. */
    background-color: #7BA832;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Bis 06.09.2026 hatte btn-secondary denselben gruenen Hintergrund und
   dieselbe weisse Schrift wie btn-primary - zwei gleich laute Buttons
   nebeneinander, zwischen denen sich niemand entscheidet. Jetzt eine echte
   zweite Stufe: umrandet statt gefuellt, in der zweiten Markenfarbe.
   Auf dunklem Grund (Hero) gehoert btn-outline-white hin, nicht diese Klasse. */
.btn-secondary {
    background-color: transparent;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
}

.btn-secondary:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-outline-white {
    background-color: transparent;
    border: 2px solid var(--white);
    color: var(--white);
}

.btn-outline-white:hover {
    background-color: var(--white);
    color: var(--primary-color);
}

.btn-white {
    background-color: var(--white);
    color: var(--primary-color);
}

.btn-white:hover {
    background-color: #f1f5f9;
}

.btn-outline-white {
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--white);
}

.btn-full {
    width: 100%;
    text-align: center;
}

/* Header */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    z-index: 1000;
    box-shadow: var(--shadow-sm);
    padding: 0.75rem 0;
    transition: all 0.3s ease;
}

/* Sticky Header - Scrolled State */
.header-scrolled {
    padding: 0.5rem 0;
    box-shadow: var(--shadow-md);
}

.header-scrolled .header-logo-img {
    height: 40px;
}

/* Header Hidden on Mobile Scroll */
.header-hidden {
    transform: translateY(-100%);
}

/* =========================================
   FLOATING CTA BUTTON
   ========================================= */
.floating-cta {
    position: fixed;
    bottom: 100px;
    left: 20px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, var(--secondary-color) 0%, #7ba832 100%);
    color: white;
    padding: 0.875rem 1.25rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.95rem;
    box-shadow: 0 4px 20px rgba(151, 192, 62, 0.4);
    z-index: 998;
    opacity: 0;
    transform: translateX(-100px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
}

.floating-cta.show {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.floating-cta:hover {
    background: linear-gradient(135deg, #7ba832 0%, var(--secondary-color) 100%);
    transform: translateX(0) scale(1.05);
    box-shadow: 0 6px 25px rgba(151, 192, 62, 0.5);
}

.floating-cta i {
    font-size: 1.1rem;
}

/* Auf allen Geraeten ausgeblendet (Kundenentscheid 07.10.2026: auf Handy und
   Tablet stoerend, auf dem Desktop war er schon vorher aus). Markup, ID und
   Script bleiben, damit der Button bei Bedarf hier wieder eingeschaltet
   werden kann. */
.floating-cta {
    display: none !important;
}

/* Mobile: nur Icon zeigen */
@media (max-width: 480px) {
    .floating-cta {
        bottom: 90px;
        left: 15px;
        padding: 1rem;
        border-radius: 50%;
        width: 56px;
        height: 56px;
        justify-content: center;
    }

    .floating-cta span {
        display: none;
    }

    .floating-cta i {
        font-size: 1.3rem;
    }
}

/* Einsatzgebiet-Seiten und zustimmungspflichtige Karten */
.location-guide-grid,
.location-region-grid {
    display: grid;
    gap: 1.5rem;
}

.location-guide-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 2rem;
}

.location-guide-card,
.location-region-card,
.map-consent-placeholder,
.location-service-note {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.location-guide-card {
    padding: 1.75rem;
}

.location-guide-card > i {
    color: var(--secondary-color);
    font-size: 1.5rem;
    margin-bottom: 0.85rem;
}

.location-guide-card h3 {
    margin-bottom: 0.75rem;
}

.location-guide-card p,
.location-guide-card a {
    color: var(--text-main);
}

.location-service-note {
    border-left: 4px solid var(--secondary-color);
    margin-top: 1.5rem;
    padding: 1.15rem 1.35rem;
    color: var(--text-main);
}

.location-region-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.location-region-card {
    padding: 1.5rem;
}

.location-region-card h2 {
    margin-bottom: 0.9rem;
    color: var(--brand-dark);
    font-size: 1.25rem;
}

.location-region-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.location-region-card li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    border-top: 1px solid var(--border-color);
    padding: 0.65rem 0;
}

.location-region-card li:first-child {
    border-top: 0;
}

.location-region-card a {
    color: var(--primary-color);
    font-weight: 600;
}

.location-region-card span {
    color: var(--text-light);
    font-size: 0.9rem;
}

.map-consent-placeholder {
    min-height: 220px;
    padding: 2rem;
    text-align: center;
    display: grid;
    place-items: center;
    gap: 1rem;
}

.map-consent-placeholder p {
    max-width: 650px;
    margin: 0;
    color: var(--text-main);
}

.map-consent-placeholder iframe {
    width: 100%;
    margin-top: 0.5rem;
}

.map-consent-placeholder.is-loaded {
    display: block;
    padding: 0;
    min-height: 0;
    overflow: hidden;
}

.map-consent-placeholder.is-loaded > p,
.map-consent-placeholder.is-loaded > button {
    display: none;
}

.footer-text-button {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    padding: 0;
    text-align: left;
}

.footer-text-button:hover,
.footer-text-button:focus-visible {
    color: var(--secondary-color);
    text-decoration: underline;
}

@media (max-width: 720px) {
    .location-guide-grid,
    .location-region-grid {
        grid-template-columns: 1fr;
    }

    .location-guide-card,
    .location-region-card,
    .map-consent-placeholder {
        padding: 1.25rem;
    }
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    font-family: Georgia, "Times New Roman", serif;
    display: flex;
    /* Fix alignment */
    align-items: center;
}

.header-logo-img {
    height: 42px;
    width: auto;
    /* Prevent stretching */
    aspect-ratio: 250 / 68;
    /* ESTIMATED ratio. Browser reserves space based on height */
    object-fit: contain;
}

.logo .highlight {
    color: var(--secondary-color);
}

.nav-list {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.nav-link {
    font-weight: 500;
    font-size: 1rem;
    position: relative;
}

.nav-link:not(.btn)::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 0;
    background-color: var(--secondary-color);
    transition: width 0.3s;
}

.nav-link:not(.btn):hover::after {
    width: 100%;
}

.hamburger {
    display: none;
    cursor: pointer;
}

/* Hero Section */
.hero {
    position: relative;
    /* Oben Platz fuer die feste Navigation (wie mobil), sonst rutschte die
       Ueberschrift auf niedrigen Bildschirmen (1280x720, 1024x600) darunter.
       Mindestens 90vh wie bisher; reicht das nicht, waechst der Bereich nach
       unten statt den Inhalt abzuschneiden. */
    min-height: 90vh;
    padding: 100px 0 2rem;
    display: flex;
    align-items: center;
    color: var(--white);
    background-color: var(--primary-color);
    /* Fallback */
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Image wird per JS lazy nachgeladen */
    background-image: none;
    background-color: #0f172a;
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.hero-bg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 45%;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Classic dark overlay - clean and professional */
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.85) 0%, rgba(30, 41, 59, 0.75) 100%);
    z-index: 2;
}

/* ... existing code ... */

/* About Section Image */
.about-image {
    flex: 1;
    height: 500px;
    background-color: #e2e8f0;
    border-radius: var(--radius-lg);
    /* Image wird per JS lazy nachgeladen */
    background-image: none;
    background-size: cover;
    background-position: center;
    position: relative;
    /* Subtle filter for brand cohesion */
    filter: saturate(1.1) brightness(1.05);
}

.about-image picture,
.about-image img {
    display: block;
    width: 100%;
    height: 100%;
}

.about-image img {
    object-fit: cover;
}

/* Subtle brand overlay on about image */
.about-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 153, 218, 0.1) 0%, rgba(151, 192, 62, 0.1) 100%);
    border-radius: var(--radius-lg);
    pointer-events: none;
}

/* ... existing code ... */

/* --- Toast Notification --- */
.toast-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background-color: var(--white);
    color: var(--text-main);
    padding: 1rem 1.5rem;
    border-radius: var(--radius-md);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border-left: 5px solid var(--secondary-color);
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 1rem;
    transform: translateX(120%);
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    font-weight: 500;
}

.toast-notification.show {
    transform: translateX(0);
}

.toast-notification i {
    font-size: 1.2rem;
}

.toast-success {
    border-left-color: #22c55e;
}

.toast-success i {
    color: #22c55e;
}

.toast-error {
    border-left-color: #ef4444;
}

.toast-error i {
    color: #ef4444;
}

/* =========================================
   FAQ SECTION (Table Style)
   ========================================= */
.faq-grid {
    max-width: 900px;
    margin: 2rem auto 0;
    border-top: 1px solid var(--border-color);
}

/* FAQ - seit 06.09.2026 native details/summary statt div + h4 mit
   Klick-Handler. Der alte Aufbau war per Tastatur nicht bedienbar und
   funktionierte ohne JavaScript gar nicht. Der Plus/Minus-Look bleibt. */
.faq-item {
    background: #f8fafc;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.3s ease;
}

.faq-item:hover {
    background-color: white;
}

.faq-item > summary {
    margin: 0;
    padding: 1.5rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    color: var(--primary-color);
    font-weight: 600;
    font-size: 1.15rem;
    list-style: none;
    transition: var(--transition);
}

/* Standard-Dreieck in allen Engines abschalten */
.faq-item > summary::-webkit-details-marker {
    display: none;
}

.faq-item > summary::marker {
    content: '';
}

.faq-item > summary:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: -4px;
}

.faq-item > summary::after {
    content: '\f067';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.9rem;
    color: var(--secondary-color);
    transition: all 0.3s ease;
    background: #f1f5f9;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}

.faq-item[open] > summary::after {
    content: '\f068';
    background: var(--secondary-color);
    color: white;
}

.faq-item .faq-answer {
    padding: 0 1.5rem 2rem;
    animation: faqAnswerIn 0.25s ease;
}

.faq-item .faq-answer p {
    margin: 0;
    color: var(--text-light);
    line-height: 1.8;
}

@keyframes faqAnswerIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .faq-item .faq-answer {
        animation: none;
    }
}



.hero-content {
    position: relative;
    z-index: 3;
    max-width: 800px;
}

.hero-title {
    font-size: 4rem;
    color: var(--white);
    margin-bottom: 1.5rem;
}

.hero-subtitle {
    font-size: 1.25rem;
    color: #cbd5e1;
    margin-bottom: 2.5rem;
    max-width: 600px;
}

.highlight-text {
    color: var(--accent-color);
    font-style: italic;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    margin-bottom: 4rem;
}

.hero-stats {
    display: flex;
    gap: 3rem;
}

.stat-item {
    display: flex;
    flex-direction: column;
}

.stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent-color);
}

.stat-label {
    font-size: 0.9rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Services */
.services {
    background-color: var(--light-bg);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.services-grid--2col {
    grid-template-columns: repeat(2, 1fr);
}

.service-card {
    background: var(--white);
    padding: 2.5rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    border: 1px solid var(--border-color);
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--secondary-color);
}

/* Reine Info-Karten ohne Link reagieren nicht auf Maus oder Antippen: Heben,
   gruener Rand, Farbtoenung und 3D-Neigung versprachen einen Klick, der nichts
   tut (Kundenentscheid 12.10.2026). Nur Karten mit .text-link behalten den
   Effekt. !important, weil script.js die Neigung als Inline-Stil setzt. */
.service-card:not(:has(.text-link)):hover {
    transform: none !important;
    box-shadow: var(--shadow-sm);
    border-color: var(--border-color);
}

.service-card:not(:has(.text-link)):hover::before {
    opacity: 0;
}

.icon-box {
    width: 60px;
    height: 60px;
    background-color: #EFF6FF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    color: var(--secondary-color);
    font-size: 1.5rem;
}

.service-card h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

/* Karten sind immer linksbuendig wie auf der Startseite, auch wenn der
   Abschnitt zentriert ist (Lagerung, Einpackservice). Seit 12.10.2026 nutzen
   alle Karten .icon-box statt eines grossen Symbols mit Inline-Stil. */
.text-center .service-card {
    text-align: left;
}

/* Blauer Hinweis-Kasten: hellblau mit blauem Strich links. Einziger Baustein
   fuer erklaerende Kaesten (Umzug, Messi: Ansatz, Fragen, Versprechen). Vorher
   drei Inline-Varianten (Kundenentscheid 12.10.2026). Die gruenen Hinweis-
   Kaesten sind davon ausgenommen und bleiben wie sie sind (DESIGN-RICHTLINIEN 2). */
.text-block {
    background: rgba(224, 242, 254, 0.5);
    border-left: 4px solid var(--primary-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.5rem;
    margin-top: 1.25rem;
}

.text-block:first-child {
    margin-top: 0;
}

.service-card p {
    color: var(--text-light);
    margin-bottom: 1.5rem;
}

/* Karten mit Fusszeile (Preis oder Link, z. B. Lageroptionen): die Fusszeile
   sitzt am unteren Rand, damit sie in Karten derselben Reihe auf gleicher
   Hoehe steht, auch wenn der Text darueber unterschiedlich lang ist. */
.service-card:has(> .card-fuss) {
    display: flex;
    flex-direction: column;
}

.card-fuss {
    margin-top: auto;
}

.service-card .card-fuss p {
    margin-bottom: 0;
}

/* Haekchen-Liste in Karten: Schrift wie der Kartentext, Haken in Hasler-Gruen */
.service-card .check-list {
    margin: 0 0 1.5rem;
}

.service-card .check-list li {
    font-size: 0.95rem;
    color: var(--text-light);
    margin-bottom: 0.5rem;
}

.service-card .check-list li i {
    color: var(--secondary-color);
}

.text-link {
    color: var(--secondary-color);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.text-link:hover {
    gap: 0.8rem;
}

/* Calculator Section */
.calculator-section {
    background-color: var(--primary-color);
    color: var(--white);
    position: relative;
}

.calculator-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4rem;
}

.calculator-content {
    flex: 1;
    min-width: 300px;
}

.calculator-content .section-title {
    color: var(--white);
}

.calculator-content .section-desc {
    color: #cbd5e1;
}

.calculator-benefits {
    margin-top: 2rem;
}

.calculator-benefits li {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.calculator-benefits i {
    color: var(--accent-color);
}

.calculator-form-box {
    flex: 1;
    min-width: 320px;
    background-color: var(--white);
    padding: 2.5rem;
    border-radius: var(--radius-lg);
    color: var(--text-main);
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    font-size: 0.95rem;
}

.form-group input[type="number"],
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="date"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #cbd5e1;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 1rem;
    transition: border-color 0.3s;
    background-color: var(--white);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--secondary-color);
}

/* Google Places Autocomplete Dropdown Styling */
.pac-container {
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    z-index: 10000;
}

.pac-item {
    padding: 0.75rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
}

.pac-item:hover {
    background-color: #f0f9ff;
}

.pac-item-query {
    font-weight: 600;
    color: var(--brand-dark);
}

.pac-matched {
    color: var(--primary-color);
    font-weight: 600;
}

.checkbox-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.checkbox-group label {
    margin-bottom: 0;
    font-weight: 400;
}

.result-box {
    margin-top: 2rem;
    background-color: #F8FAFC;
    padding: 1.5rem;
    border-radius: var(--radius-md);
    text-align: center;
    border: 1px dashed var(--secondary-color);
    animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.price-tag {
    display: block;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-color);
    margin: 0.5rem 0;
}

.price-range {
    display: inline-block;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-color);
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.price-animated {
    animation: pricePopIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes pricePopIn {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.disclaimer {
    font-size: 0.8rem;
    color: var(--text-light);
}

/* About Section */
.about-grid {
    display: flex;
    gap: 4rem;
    align-items: center;
}

.about-image {
    flex: 1;
    height: 500px;
    background-color: #e2e8f0;
    border-radius: var(--radius-lg);
    /* Das sichtbare Bild kommt aus dem <picture>-Element in index.php.
       Kein zweites CSS-Hintergrundbild dahinter anzeigen. */
    background-image: none;
    background-size: cover;
    background-position: center;
    position: relative;
}

.about-image::before {
    content: '';
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 200px;
    height: 200px;
    background-color: var(--secondary-color);
    z-index: -1;
    border-radius: var(--radius-lg);
    opacity: 0.1;
}

.about-content {
    flex: 1;
}

/* Contact Form Section */
.contact-section {
    background-color: #F8FAFC;
    position: relative;
    padding: 6rem 0;
}

.contact-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 4rem;
    margin-top: 3rem;
    justify-content: center;
}

.contact-info {
    flex: 1;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: var(--white);
    padding: 1.5rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.info-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.info-item i {
    font-size: 1.5rem;
    color: var(--secondary-color);
    width: 50px;
    height: 50px;
    background: #EFF6FF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-form-box {
    flex: 1.5;
    min-width: 350px;
    background: var(--white);
    padding: 2.5rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border-top: 5px solid var(--secondary-color);
}

.form-row {
    display: flex;
    gap: 1rem;
}

.form-row .form-group {
    flex: 1;
}

textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #cbd5e1;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 1rem;
    resize: vertical;
}

textarea:focus {
    outline: none;
    border-color: var(--secondary-color);
}

@media (max-width: 768px) {
    .contact-wrapper {
        flex-direction: column;
    }

    .form-row {
        flex-direction: column;
        gap: 0;
    }
}

/* Footer */
.footer {
    position: relative;
    background: radial-gradient(circle at 20% 20%, rgba(151, 192, 62, 0.08), transparent 35%), radial-gradient(circle at 80% 0%, rgba(0, 153, 218, 0.12), transparent 40%), #0b1224;
    color: #94a3b8;
    padding: 3.5rem 0 2rem;
    overflow: hidden;
}

.footer-content {
    display: grid;
    grid-template-columns: 1.3fr 0.9fr 0.9fr 1fr;
    gap: 2rem;
    margin-bottom: 2.5rem;
}

.footer-col h4 {
    color: var(--white);
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
}

.footer-col ul li {
    margin-bottom: 0.8rem;
}

.footer-col ul li a:hover {
    color: var(--secondary-color);
}

.footer-col p {
    margin-bottom: 0.8rem;
}

.footer-col i {
    width: 20px;
    color: var(--secondary-color);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 2rem;
    font-size: 0.9rem;
}

/* New footer layout */
.footer-cta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    padding: 1.25rem 1.5rem;
    margin-bottom: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(0, 153, 218, 0.15) 0%, rgba(15, 23, 42, 0.75) 100%);
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.6);
}

.footer-kicker {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.8rem;
    color: var(--secondary-color);
    margin-bottom: 0.25rem;
}

.footer-cta h3 {
    color: var(--white);
    margin: 0 0 0.35rem 0;
}

.footer-sub {
    margin: 0;
    color: #cbd5e1;
}

.footer-cta-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.footer-brand p {
    color: #cbd5e1;
}

.footer-logo-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.footer-logo-img {
    height: 48px;
    width: auto;
    object-fit: contain;
}

.footer-pill {
    background: rgba(151, 192, 62, 0.15);
    color: var(--secondary-color);
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.85rem;
}

.footer-badges {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: #e2e8f0;
    font-size: 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-contact ul li i {
    width: 18px;
    margin-right: 8px;
    color: var(--secondary-color);
}

.footer-region-list,
.footer-legal-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem 0;
}

.footer-region-list {
    column-count: 2;
    column-gap: 1.5rem;
}

.footer-region-list li,
.footer-legal-list li {
    margin-bottom: 0.6rem;
}

.footer-region-list a,
.footer-legal-list a {
    color: #e2e8f0;
}

.footer-region-list a:hover,
.footer-legal-list a:hover {
    color: var(--secondary-color);
}

/* --- WOW Factor & Animations --- */

/* Scroll Reveal Base State */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered delays for grids */
.reveal-delay-1 {
    transition-delay: 0.1s;
}

.reveal-delay-2 {
    transition-delay: 0.2s;
}

.reveal-delay-3 {
    transition-delay: 0.3s;
}

/* 3D Tilt Effect on Cards */
.service-card {
    /* Keep existing styles but add perspective */
    transform-style: preserve-3d;
    perspective: 1000px;
}

/* Disable hover tilt on touch devices to avoid jank */
@media (max-width: 1024px) {
    .service-card {
        position: relative;
        transform: none !important;
        perspective: none;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .service-card:hover {
        transform: none;
        box-shadow: var(--shadow-md);
    }

    /* Ganze Karte antippbar (Kundenentscheid 07.10.2026): der Link
       "Mehr erfahren" spannt seine Klickflaeche ueber die ganze Karte.
       Es bleibt ein Link pro Karte - Tastatur und Screenreader sehen
       weiterhin genau diesen. position: relative oben haelt die Flaeche
       (und den Glow in ::before) in der Karte. */
    .service-card .text-link::after {
        content: '';
        position: absolute;
        inset: 0;
    }
}

/* Floating Animation */
@keyframes float {
    0% {
        transform: translateY(0px);
    }

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

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

.floating {
    animation: float 6s ease-in-out infinite;
}


/* Button Pulse - .btn traegt position/overflow bereits (siehe oben),
   die Wiederholung hier war ueberfluessig. */
.btn-primary::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.btn-primary:active::after {
    width: 300px;
    height: 300px;
}

/* Calculator Highlight */
.calculator-form-box {
    border: 1px solid rgba(0, 153, 218, 0.2);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.calculator-form-box:focus-within {
    border-color: var(--secondary-color);
    box-shadow: 0 25px 50px -12px rgba(0, 153, 218, 0.25);
}

/* --- Print Styles --- */
@media print {

    .header,
    .hero-bg,
    .hero-overlay,
    .hero-buttons,
    .hamburger,
    .whatsapp-widget,
    .back-to-top,
    .mobile-sticky-bar,
    #cookie-banner,
    .toast-notification,
    .reveal {
        display: none !important;
    }

    .hero {
        height: auto;
        min-height: auto;
        padding-top: 2cm;
        background: none;
        color: #000;
    }

    .hero-title,
    .hero-subtitle,
    .stat-number,
    .stat-label,
    .section-title,
    .service-card h3,
    .service-card p,
    body {
        color: #000 !important;
        text-shadow: none !important;
    }

    .section {
        padding: 1cm 0;
        page-break-inside: avoid;
    }

    a {
        text-decoration: none;
        color: #000;
    }

    /* Expand containers */
    .container {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
    }
}

::-webkit-scrollbar-track {
    background: var(--light-bg);
}

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

::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-color);
}

/* Responsive */
@media (max-width: 768px) {
    .header .nav {
        display: flex;
        align-items: center;
    }

    .nav-list {
        position: fixed;
        right: 0;
        top: 0;
        height: 100vh;
        /* dvh: 100vh entspricht auf iOS/Android dem Viewport mit eingeklappter
           Adressleiste - der unterste Menüpunkt läge sonst dahinter */
        height: 100dvh;
        width: 80%;
        max-width: 320px;
        background-color: #ffffff;
        display: flex;
        flex-direction: column;
        align-items: center;
        transform: translateX(100%);
        /* visibility: das geschlossene Menue steht rechts ausserhalb des
           Viewports und erzeugte dort horizontalen Ueberlauf - position:fixed
           wird von overflow-x auf body nicht geclippt. Nebeneffekt und A11y-
           Gewinn: die Links sind geschlossen nicht mehr fokussierbar. */
        visibility: hidden;
        transition: transform 0.3s ease-in-out, visibility 0.3s;
        padding-top: 4rem;
        padding-bottom: 2rem;
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
        z-index: 1000;
        overflow-y: auto;
    }

    .nav-list.nav-active {
        transform: translateX(0%);
        visibility: visible;
    }

    .nav-list li {
        opacity: 1;
        margin-bottom: 0;
        width: 100%;
    }

    /* Override btn-white for mobile nav */
    .nav-list .btn-white {
        background: transparent !important;
        color: #1e293b !important;
        border: none !important;
    }

    .nav-list .btn-white:hover {
        background: var(--light-bg) !important;
        color: var(--primary-color) !important;
    }

    .hamburger {
        display: block;
        width: 28px;
        height: 20px;
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1001;
        cursor: pointer;
    }

    .hamburger span {
        display: block;
        width: 100%;
        height: 3px;
        background-color: var(--primary-color);
        border-radius: 2px;
        position: absolute;
        left: 0;
        transition: all 0.3s ease;
    }

    .hamburger span:nth-child(1) {
        top: 0;
    }

    .hamburger span:nth-child(2) {
        top: 50%;
        transform: translateY(-50%);
    }

    .hamburger span:nth-child(3) {
        bottom: 0;
    }

    /* Burger Animation to X */
    .hamburger.toggle span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 6px);
    }

    .hamburger.toggle span:nth-child(2) {
        opacity: 0;
    }

    .hamburger.toggle span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -6px);
    }

    /* ========================================
       MOBILE RESPONSIVE FIXES - CLEAN VERSION
       ======================================== */

    /* Prevent horizontal scroll.
       overflow-x bleibt auf <html>, weil das geschlossene Mobilmenue als
       position:fixed rechts ausserhalb des Viewports steht und nur von einem
       Clipping auf Wurzelebene erfasst wird. Der Standard-Einwand dagegen
       (bricht position:sticky) trifft hier nicht zu - die Seite nutzt nirgends
       sticky, der Header ist position:fixed.
       Entfernt wurde dagegen max-width:100vw: 100vw zaehlt die Scrollbar mit
       und war damit selbst eine Ueberlaufquelle. width:100% begrenzt korrekt.
       !important entfaellt, es wird nirgends dagegen angeschrieben.
       clip statt hidden (07.10.2026): schneidet genauso ab, macht body aber
       nicht zum eigenen Scroll-Container - sonst greift das Scroll-Snapping
       (siehe html-Regeln oben) auf dem Handy nicht. Browser ohne clip
       ignorieren die Zeile und fallen auf den Basiswert von body zurueck. */
    html,
    body {
        overflow-x: clip;
        width: 100%;
    }

    /* Hero Section Mobile */
    .hero {
        padding-top: 80px;
        height: auto;
        min-height: auto;
        padding-bottom: 3rem;
    }

    .hero-content {
        padding: 1.25rem 1rem 2rem;
        text-align: center;
        max-width: 100%;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .hero-title,
    .hero-subtitle {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .hero-title {
        font-size: clamp(1.55rem, 7vw, 1.75rem);
        line-height: 1.3;
        margin-bottom: 1rem;
    }

    .hero-title .highlight-text {
        display: block;
    }

    .hero-subtitle {
        font-size: 0.9rem;
        margin-bottom: 1.25rem;
    }

    .hero-buttons {
        flex-direction: column;
        gap: 0.75rem;
        width: 100%;
        margin-bottom: 1.5rem;
    }

    .hero-buttons .btn {
        width: 100%;
        padding: 1rem;
    }

    .hero-stats {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        gap: 0.5rem;
        margin-top: 0;
    }

    .stat-item {
        flex: 1 1 0;
        min-width: 0;
        text-align: center;
    }

    .stat-number {
        font-size: 1.65rem;
    }

    .stat-label {
        font-size: 0.68rem;
        line-height: 1.35;
        letter-spacing: 0.45px;
    }

    /* Container Mobile */
    .container {
        width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
        box-sizing: border-box;
    }

    .section {
        padding: 2.5rem 0;
    }

    .section-header {
        padding: 0 0.5rem;
    }

    .section-title {
        font-size: 1.5rem;
    }

    /* Process Timeline Mobile: siehe eigener Block nach den Grundregeln
       der Zeitleiste ("Process Timeline Mobile") */

    /* Services Grid Mobile */
    .services-grid {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .service-card {
        width: 100%;
        margin: 0;
    }

    /* Testimonials Mobile */
    .testimonials-grid {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .testimonial-card {
        width: 100%;
        margin: 0;
        padding: 1.5rem;
    }

    .review-text {
        font-size: 0.95rem;
        line-height: 1.6;
    }

    .rating-badge {
        margin-top: 0.75rem;
    }

    .stars {
        font-size: 1rem;
    }

    /* Calculator Mobile */
    .calculator-wrapper {
        flex-direction: column;
        gap: 2rem;
    }

    .calculator-content,
    .calculator-form-box {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .calculator-form-box {
        padding: 1.5rem;
    }

    .calculator-benefits li {
        justify-content: flex-start;
    }

    /* About Mobile */
    .about-grid {
        flex-direction: column;
        gap: 2rem;
    }

    .about-image {
        width: 100%;
        height: 200px;
    }

    .about-content {
        width: 100%;
    }

    /* Contact Mobile */
    .contact-wrapper {
        flex-direction: column;
        gap: 2rem;
    }

    .contact-info,
    .contact-form-box {
        width: 100%;
        min-width: 0;
    }

    .contact-form-box {
        padding: 1.5rem;
    }

    .form-row {
        flex-direction: column;
        gap: 0;
    }

    /* Footer Mobile */
    .footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }

    .footer-col {
        text-align: center;
    }

    .footer-region-list {
        column-count: 1;
    }

    .footer-cta {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-cta-actions {
        width: 100%;
    }

    /* Footer Logo + Pill auf Mobile zentriert und gestapelt */
    .footer-logo-wrap {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    .footer-logo-img {
        height: 52px;
    }

    .footer-pill {
        font-size: 0.75rem;
        padding: 0.25rem 0.6rem;
    }

    /* Footer Badges auf Mobile gestapelt und zentriert */
    .footer-badges {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    .badge {
        font-size: 0.85rem;
        padding: 0.5rem 1rem;
        width: auto;
        justify-content: center;
    }

    .footer-cta .btn {
        width: 100%;
        text-align: center;
    }

    /* Page headers on subpages */
    .page-header,
    .page-header-simple {
        padding: 5rem 1rem 2.5rem;
        text-align: center;
    }

    .page-title {
        font-size: 1.8rem;
    }

    .page-subtitle {
        font-size: 1rem;
    }

    /* Map iframe height tweak */
    .map-section iframe {
        min-height: 280px;
    }

    /* Button tap targets */
    .btn {
        min-height: 48px;
        font-size: 1rem;
    }

    /* Form spacing */
    input,
    select,
    textarea {
        font-size: 1rem;
    }

    /* Sticky Bar & Widgets */
    .mobile-sticky-bar {
        visibility: visible;
        opacity: 1;
    }

    .back-to-top {
        bottom: 6rem;
        right: 1rem;
    }


    /* Toast Mobile */
    .toast-notification {
        width: 90%;
        left: 5%;
        right: 5%;
    }

    /* Cookie Banner Mobile */
    .cookie-content {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

}

/* --- Process Timeline --- */
.process-section {
    background-color: var(--white);
    position: relative;
}

/* ... existing process styles ... */

/* --- Testimonials --- */
.testimonials-section {
    background-color: var(--light-bg);
}

.rating-badge {
    margin-top: 1rem;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.stars {
    color: #F59E0B;
    /* Amber/Gold */
    font-size: 1.2rem;
    letter-spacing: 2px;
}

.rating-text {
    font-weight: 600;
    color: var(--text-main);
    font-size: 0.9rem;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.testimonial-card {
    background-color: var(--white);
    padding: 2.5rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    position: relative;
    transition: var(--transition);
    border: 1px solid transparent;
}

.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--secondary-color);
}

.quote-icon {
    font-size: 2rem;
    color: rgba(151, 192, 62, 0.2);
    /* Low opacity secondary */
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
}

.review-text {
    font-style: italic;
    color: var(--text-main);
    margin-bottom: 1.5rem;
    line-height: 1.8;
    position: relative;
    z-index: 1;
}

.review-author {
    font-weight: 700;
    color: var(--primary-color);
    font-family: Georgia, "Times New Roman", serif;
}

/* --- Map Section --- */
.map-section {
    padding: 0 !important;
    /* Full width/height, no padding */
}

.container-fluid {
    width: 100%;
}


.process-timeline {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 4rem;
    position: relative;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

/* Connecting Line */
.process-timeline::before {
    content: '';
    position: absolute;
    top: 30px;
    left: 40px;
    right: 40px;
    height: 2px;
    background-color: #e2e8f0;
    z-index: 1;
}

.process-step {
    flex: 1;
    text-align: center;
    position: relative;
    z-index: 2;
    padding: 0 1rem;
}

.step-icon,
.step-callout {
    width: 60px;
    height: 60px;
    background-color: var(--white);
    border: 2px solid var(--secondary-color);
    border-radius: 50%;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--secondary-color);
    transition: var(--transition);
}

.step-callout {
    background-color: var(--secondary-color);
    color: var(--white);
    border-color: var(--secondary-color);
}

.process-step h3 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.process-step p {
    font-size: 0.95rem;
    color: var(--text-light);
}

/* Die Ablauf-Schritte sind keine Links und haben deshalb keinen Hover-Effekt.
   Vorher sprang der Schritt hoch und der Kreis wurde gruen und groesser, als
   waere er ein Knopf. Auf Handy und Tablet seit 07.10.2026 abgeschaltet, auf
   dem Desktop seit 12.10.2026 (Kundenentscheide). */

/* Naechster Schritt direkt nach dem Ablauf (Startseite, Kundenentscheid
   07.10.2026) - Klasse statt style-Attribut, siehe DESIGN-RICHTLINIEN.md */
.process-cta {
    margin-top: 2.5rem;
}

/* Process Timeline Mobile: senkrechte Zeitleiste - Kreis links, Text rechts,
   Schritte durch eine Linie verbunden (Kundenentscheid 07.10.2026). Vorher
   stand jeder Schritt zentriert und unverbunden untereinander.
   Steht bewusst nach den Grundregeln: im grossen 768px-Block weiter oben
   wurden die Mobilregeln von diesen Grundregeln wieder ueberschrieben. */
@media (max-width: 768px) {
    .process-timeline {
        flex-direction: column;
        gap: 0;
        padding: 0;
        max-width: 480px;
        margin-top: 2.5rem;
    }

    .process-timeline::before {
        display: none;
    }

    .process-step {
        width: 100%;
        display: grid;
        grid-template-columns: 60px 1fr;
        column-gap: 1rem;
        align-content: start;
        text-align: left;
        padding: 0 0 1.75rem;
    }

    .process-step:last-child {
        padding-bottom: 0;
    }

    /* Linie je Schritt statt einer durchgehenden: reicht so immer genau bis
       zum naechsten Kreis, egal wie lang die Texte auf der jeweiligen Seite sind */
    .process-step:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 60px;
        bottom: 0;
        left: 29px;
        width: 2px;
        background-color: var(--border-color);
    }

    .step-icon,
    .step-callout {
        grid-row: 1 / span 2;
        margin: 0;
    }

    .process-step h3 {
        margin: 0.65rem 0 0.25rem;
    }

    .process-step p {
        margin: 0;
    }
}


/* --- FAQ Section --- */
.faq-section {
    background-color: #F8FAFC;
}

.faq-grid {
    max-width: 800px;
    margin: 0 auto;
    display: grid;
    gap: 1rem;
}

.faq-item details {
    background-color: var(--white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: var(--transition);
}

.faq-item summary {
    padding: 1.5rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 1.1rem;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--primary-color);
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary .icon {
    color: var(--secondary-color);
    transition: transform 0.3s ease;
}

.faq-item details[open] summary .icon {
    transform: rotate(45deg);
}

.faq-content {
    padding: 0 1.5rem 1.5rem;
    color: var(--text-main);
    line-height: 1.7;
    animation: fadeIn 0.4s ease;
}


/* --- Sticky Mobile Bar --- */
.mobile-sticky-bar {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    padding: 0.75rem 1rem;
    border-radius: 50px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.5);
    visibility: hidden;
    opacity: 0;
    transition: all 0.5s ease;
}

@media (max-width: 768px) {
    .mobile-sticky-bar {
        visibility: visible;
        opacity: 1;
        width: 90%;
        bottom: 1.5rem;
        justify-content: space-between;
    }

    /* Rest of mobile styles */
}

/* ... existing mobile styles ... */


/* --- WhatsApp Widget ---
   Auf dem Desktop bewusst ausgeblendet: wer am Rechner sitzt, nutzt Telefon
   oder Formular. Grenze 1025px wie beim Offerten-Button, damit Tablets im
   Hochformat (iPad 820px, Tab S8 800px) den Chat behalten.
   Position hier abschliessend gesetzt - fruher standen dieselben Werte noch
   ein zweites Mal weiter unten und haben diesen Block ueberschrieben. */
.whatsapp-widget {
    position: fixed;
    bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
    right: 2rem;
    z-index: 1002;
    background-color: #25D366;
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: var(--transition);
    animation: bounceIn 1s 2s both;
    /* Delay appearance - gilt nur noch ohne JavaScript */
}

/* Mit JavaScript erscheint der Button erst, wenn Hero bzw. Seitenkopf ganz
   aus dem Bild gescrollt ist (script.js), damit er nie ueber einem Hero
   liegt. visibility statt nur opacity, damit der unsichtbare Button auch
   per Tastatur nicht erreichbar ist. */
.whatsapp-widget.is-scroll-gated {
    animation: none;
}

.whatsapp-widget.is-scroll-gated:not(.show) {
    opacity: 0;
    visibility: hidden;
}

.whatsapp-widget:hover {
    transform: scale(1.1);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

@media (min-width: 1025px) {
    .whatsapp-widget {
        display: none;
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }

    50% {
        opacity: 1;
        transform: scale(1.05);
    }

    70% {
        transform: scale(0.9);
    }

    100% {
        transform: scale(1);
    }
}




/* --- Cookie Banner --- */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--dark-bg);
    color: var(--white);
    padding: 1rem 0;
    z-index: 10000;
    transform: translateY(100%);
    transition: transform 0.5s ease-out;
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1);
}

.cookie-banner.show {
    transform: translateY(0);
}

.cookie-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: var(--container-width);
    margin: 0 auto;
    width: 90%;
    gap: 2rem;
}

@media (max-width: 768px) {
    .cookie-content {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
}


.sticky-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.8rem 1.5rem;
    border-radius: 30px;
    font-weight: 600;
    text-decoration: none;
    font-size: 1rem;
}

.btn-call {
    background-color: var(--white);
    color: var(--text-main);
    border: 1px solid #e2e8f0;
}

.btn-offer {
    background-color: var(--secondary-color);
    color: var(--white);
    box-shadow: 0 4px 6px -1px rgba(151, 192, 62, 0.4);
}

/* --- Back to Top Button --- */
.back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 45px;
    height: 45px;
    background-color: var(--primary-color);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    background-color: var(--secondary-color);
    transform: translateY(-3px);
}

@media (max-width: 768px) {
    .back-to-top {
        display: none !important;
    }

    .whatsapp-widget {
        bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
        right: 1rem;
    }
}

/* =========================================
   EXIT INTENT MODAL (Premium Glassmorphism)
   ========================================= */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}

.modal-overlay.show {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: rgba(255, 255, 255, 0.95);
    padding: 2.5rem;
    border-radius: 20px;
    max-width: 450px;
    width: 90%;
    text-align: center;
    position: relative;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    transform: scale(0.9) translateY(20px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Bouncy feel */
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.modal-overlay.show .modal-content {
    transform: scale(1) translateY(0);
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    font-size: 2rem;
    color: #94a3b8;
    cursor: pointer;
    transition: color 0.3s;
    line-height: 1;
}

.modal-close:hover {
    color: var(--primary-color);
}

.modal-icon {
    font-size: 3rem;
    color: var(--secondary-color);
    margin-bottom: 1rem;
    animation: float 3s ease-in-out infinite;
}

.modal-body h2 {
    font-family: Georgia, "Times New Roman", serif;
    color: var(--primary-color);
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.modal-body p {
    color: var(--text-color);
    margin-bottom: 0.5rem;
}

.modal-subtext {
    font-size: 0.95rem;
    color: #64748b;
    margin-bottom: 2rem !important;
}

.modal-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.shadow-pulse {
    box-shadow: 0 0 0 0 rgba(0, 153, 218, 0.7);
    animation: pulse-blue 2s infinite;
}

@keyframes pulse-blue {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 153, 218, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(0, 153, 218, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 153, 218, 0);
    }
}

.btn-text {
    background: none;
    border: none;
    color: #94a3b8;
    text-decoration: underline;
    cursor: pointer;
    font-size: 0.9rem;
}

.btn-text:hover {
    color: var(--text-color);
}

/* =========================================
   EXIT INTENT MODAL (Premium Glassmorphism)
   ========================================= */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}

.modal-overlay.show {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: rgba(255, 255, 255, 0.95);
    padding: 2.5rem;
    border-radius: 20px;
    max-width: 450px;
    width: 90%;
    text-align: center;
    position: relative;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    transform: scale(0.9) translateY(20px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Bouncy feel */
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.modal-overlay.show .modal-content {
    transform: scale(1) translateY(0);
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    font-size: 2rem;
    color: #94a3b8;
    cursor: pointer;
    transition: color 0.3s;
    line-height: 1;
}

.modal-close:hover {
    color: var(--primary-color);
}

.modal-icon {
    font-size: 3rem;
    color: var(--secondary-color);
    margin-bottom: 1rem;
    animation: float 3s ease-in-out infinite;
}

.modal-body h2 {
    font-family: Georgia, "Times New Roman", serif;
    color: var(--primary-color);
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.modal-body p {
    color: var(--text-color);
    margin-bottom: 0.5rem;
}

.modal-subtext {
    font-size: 0.95rem;
    color: #64748b;
    margin-bottom: 2rem !important;
}

.modal-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.shadow-pulse {
    box-shadow: 0 0 0 0 rgba(0, 153, 218, 0.7);
    animation: pulse-blue 2s infinite;
}

@keyframes pulse-blue {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 153, 218, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(0, 153, 218, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 153, 218, 0);
    }
}

.btn-text {
    background: none;
    border: none;
    color: #94a3b8;
    text-decoration: underline;
    cursor: pointer;
    font-size: 0.9rem;
}

.btn-text:hover {
    color: var(--text-color);
}

/* =========================================
   TRUST BADGES (SEO Safe)
   ========================================= */
.trust-badges {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
}

.badge-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 500;
}

.badge-item i {
    color: var(--secondary-color);
    /* Green for trust */
    font-size: 0.9rem;
}

/* =========================================
   SUBPAGE STYLES
   ========================================= */

/* Active Link State */
.nav-link.active {
    color: var(--secondary-color);
}

.nav-link.active::after {
    width: 100%;
}

/* Page Header (Hero for Subpages) */
.page-header {
    height: 60vh;
    min-height: 400px;
    background-size: cover;
    background-position: center;
    background-color: var(--brand-dark);
    /* Fallback */
    background-attachment: scroll;
    /* Fixed causes issues on some mobiles, scroll is safer */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: var(--white);
    margin-bottom: 0;
}

/* Kopfbild: Die Seite setzt --hero-gross und --hero-handy (hasler_hero_stil
   in includes/assets.php), hier wird je nach Breite eines gewaehlt. Gleiche
   Grenze wie die Preloads in includes/header.php. */
.page-header {
    --hero-bild: var(--hero-gross);
}

@media (max-width: 768px) {
    .page-header {
        --hero-bild: var(--hero-handy);
    }
}

.page-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.5);
    /* Dark overlay */
    z-index: 1;
}

.page-header .container {
    position: relative;
    z-index: 2;
}

.page-title {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    color: var(--white);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.page-subtitle {
    font-size: 1.5rem;
    color: #cbd5e1;
    font-weight: 300;
}

/* Buttons im Seitenkopf der Leistungsseiten: dasselbe .hero-buttons-Muster
   wie auf der Startseite, hier nur mittig und mit Abstand zum Untertitel
   statt 4rem nach unten (Freigabe 08.10.2026). */
.page-header .hero-buttons {
    justify-content: center;
    margin: 2rem 0 0;
}

@media (max-width: 768px) {
    .page-title {
        font-size: 2.5rem;
    }
}

/* Simple Header (Kontakt/Offerte) */
.page-header-simple h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    color: white;
}

/* Check Lists */
.check-list {
    list-style: none;
    margin: 1.5rem 0;
}

.check-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
}

.check-list li i {
    margin-top: 5px;
    /* Align icon */
}

/* Image Column Styling */
.col-img img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.col-img img:hover {
    transform: scale(1.02);
}

/* =========================================
   ENHANCED MOBILE NAVIGATION
   ========================================= */

/* Larger Touch Targets */
@media (max-width: 768px) {
    .nav-list li {
        width: 100%;
    }

    .nav-link {
        display: block;
        padding: 1.25rem 2rem !important;
        font-size: 1.1rem;
        min-height: 60px;
        display: flex;
        align-items: center;
        color: #1e293b !important;
    }

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

    /* Swipe indicator */
    .nav-list::before {
        content: '';
        position: absolute;
        top: 1rem;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        background: #cbd5e1;
        border-radius: 2px;
        opacity: 0.5;
    }

    /* Menu backdrop overlay - handled via body.menu-open */
    body.menu-open::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        /* 100% statt 100vw: 100vw zählt die Scrollbar mit und war damit
           eine Quelle des horizontalen Überlaufs */
        width: 100%;
        height: 100vh;
        height: 100dvh;
        background: rgba(0, 0, 0, 0.4);
        z-index: 999;
    }

    /* Prevent body scroll when menu open */
    body.menu-open {
        overflow: hidden;
    }

}

/* =========================================
   BEFORE/AFTER SLIDER
   ========================================= */

.ba-section {
    background: var(--light-bg);
}

.ba-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.ba-slider {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    cursor: ew-resize;
    user-select: none;
}

.ba-before,
.ba-after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.ba-before img,
.ba-after img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ba-after {
    clip-path: inset(0 50% 0 0);
}

.ba-handle {
    position: absolute;
    top: 0;
    left: 50%;
    width: 4px;
    height: 100%;
    background: white;
    transform: translateX(-50%);
    cursor: ew-resize;
    z-index: 10;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.ba-handle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.ba-handle::after {
    content: '\f337';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--primary-color);
    font-size: 1rem;
}

/* Labels */
.ba-label {
    position: absolute;
    bottom: 1rem;
    padding: 0.5rem 1rem;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ba-label-before {
    left: 1rem;
}

.ba-label-after {
    right: 1rem;
}

.ba-caption {
    text-align: center;
    margin-top: 1rem;
    color: var(--text-light);
    font-size: 0.95rem;
}

@media (max-width: 768px) {
    .ba-grid {
        grid-template-columns: 1fr;
    }

    .ba-slider {
        aspect-ratio: 4 / 3;
    }
}

/* =========================================
   MOBILE IMAGE OPTIMIZATIONS
   ========================================= */

/* Responsive Images - ensure proper scaling */
.col-img img,
.service-card img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* On very small screens (< 480px), hide decorative side images */
@media (max-width: 480px) {
    /* Hide decorative images in two-column layouts on tiny screens.
       .about-image hängt hier mit drin - vorher lief sie über eine eigene
       Portrait-Regel, gleiche Absicht mit anderer Bedingung. */
    .col-img.hide-mobile,
    .about-image {
        display: none;
    }

    /* Ensure text sections take full width when image hidden */
    .col-text,
    .about-content {
        flex: 1 1 100% !important;
        min-width: 100% !important;
    }

    /* Reduce hero image sizes on mobile */
    .page-header {
        min-height: 200px;
        background-size: cover;
    }

    /* Compact cards */
    .service-card,
    .testimonial-card {
        padding: 1.25rem;
    }

    .section-title {
        font-size: 1.4rem;
    }

    .map-section iframe {
        min-height: 240px;
    }

    /* Smaller section padding on mobile */
    .section {
        padding: 2.5rem 0;
    }
}

/* Handy: Der Seitenkopf hat sonst eine feste Höhe (60vh). Mit Buttons ragte
   der Inhalt bei langen Titeln oben unters Menü und unten in die Brotkrume.
   Er wächst jetzt mit, wird aber nie kürzer als bisher. Steht nach dem
   480px-Block, damit dessen min-height hier nicht greift, und vor dem
   Querformat-Block, der weiter unten eigene Werte setzt. */
@media (max-width: 768px) {
    .page-header {
        height: auto;
        min-height: 60vh;
    }
}

/* .about-image / .about-content sind in den 480px-Block oberhalb gewandert
   (04.09.2026) - die Portrait-Sonderbedingung war nicht nötig. */

/* ===== Sozialrabatt Hinweis Box ===== */
.sozial-hinweis:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(134, 239, 172, 0.4);
}

/* ===== Brockenhaus-Hinweis (entsorgung.php) =====
   Vorher Inline-Stile mit fester Spaltenbreite von mindestens 300px: auf dem
   Handy war im Kasten weniger Platz, Text und Logo rutschten über den
   rechten Rand. Jetzt ordnet sich der Kasten nach verfügbarem Platz (gleiches
   Prinzip wie .split-grid). Farben unverändert übernommen, damit er zur
   Sozialrabatt-Box passt (Kundenentscheid 08.10.2026, Variante B). */
.brockenhaus-hinweis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 2rem;
    align-items: center;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 1px solid #86efac;
    border-radius: var(--radius-lg);
    padding: 2.5rem;
    margin-bottom: 4rem;
}

.brockenhaus-hinweis > * {
    min-width: 0;
}

.brockenhaus-hinweis h3 {
    color: #166534;
    margin-bottom: 1rem;
}

.brockenhaus-hinweis p {
    margin-bottom: 1rem;
}

.brockenhaus-logo {
    text-align: center;
}

.brockenhaus-logo-karte {
    display: inline-block;
    background: var(--white);
    padding: 1.5rem 2rem;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.brockenhaus-logo-karte img {
    max-width: 200px;
    width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    .brockenhaus-hinweis {
        padding: 1.5rem;
        gap: 1.5rem;
    }
}


/* =========================================================================
   BREAKPOINT-ERGÄNZUNGEN 04.09.2026
   Zwei Gerätelücken geschlossen. Bewusst ans Dateiende, damit die Kaskade
   sie zuletzt anwendet und die bestehenden Blöcke unangetastet bleiben.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1) TABLET HOCHFORMAT (769-1024px)
   Fiel bisher komplett auf das Desktop-Layout zurück: 4-spaltiger Footer und
   6-teilige Navileiste auf ~738px Containerbreite.
   Betrifft iPad Air 820, iPad Pro 11" 834, Galaxy Tab S8 800, iPad Pro 12.9" 1024.
   ------------------------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1024px) {

    /* Footer: 4 Spalten -> 2x2. Die Spalte "Regionen & Service" trägt
       15 Links inkl. "Illnau-Effretikon" und bekommt so ~340px statt ~141px. */
    .footer-content {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
    }

    /* Die 10 Ortslinks zweispaltig setzen, damit die Spalte nicht in die Höhe läuft */
    .footer-region-list {
        columns: 2;
        column-gap: 1.5rem;
    }

    .footer-region-list li {
        break-inside: avoid;
    }

    /* Navigation mitskalierend statt mit festem Platzbudget: clamp() zieht den
       Abstand bei Bedarf zusammen, flex-wrap fängt den Rest ab. Trägt damit
       auch einen 7. oder 8. Menüpunkt, ohne dass hier nachgebessert werden muss. */
    .nav-list {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: clamp(0.75rem, 1.8vw, 2rem);
        row-gap: 0.5rem;
    }

    .nav-link {
        font-size: 0.95rem;
        white-space: nowrap;
    }
}

/* -------------------------------------------------------------------------
   2) QUERFORMAT AUF FLACHEN BILDSCHIRMEN
   Handys im Querformat sind breiter als 768px (iPhone 15 = 852, S22 = 780) und
   bekamen deshalb die Desktop-Regeln - inklusive min-height, die höher war als
   der Bildschirm selbst (600px Hero in 390px Fenster).
   Bewusst höhenbasiert statt breitenbasiert, damit die Regel geräteunabhängig greift.
   ------------------------------------------------------------------------- */
@media (orientation: landscape) and (max-height: 500px) {

    .hero {
        height: auto;
        min-height: 0;
        /* Die Navigation ist hier bis 90px hoch (932x430) */
        padding: 6.5rem 0 3rem;
    }

    .page-header {
        height: auto;
        min-height: 0;
        padding: 4.5rem 0 2.5rem;
    }

    /* Kernaussage plus CTA sollen in eine Bildschirmhöhe passen */
    .hero-content h1 {
        font-size: clamp(1.5rem, 4vw, 2.2rem);
        margin-bottom: 0.75rem;
    }

    .hero-content p {
        font-size: 0.95rem;
        margin-bottom: 1rem;
    }

    .page-header h1 {
        font-size: clamp(1.4rem, 3.5vw, 2rem);
    }

    /* Abschnittsabstände zusammenziehen - vertikaler Platz ist hier das knappe Gut */
    .section {
        padding: 2.5rem 0;
    }

    /* Mobilmenue: bei wenig Hoehe kompakter, damit alle 6 Eintraege ohne
       Scrollen im Menue passen. Tap-Target bleibt mit ~48px ueber dem Minimum. */
    .nav-list {
        padding-top: 2.5rem;
    }

    .nav-list a {
        padding-top: 0.65rem;
        padding-bottom: 0.65rem;
    }

    /* WhatsApp-Button im Handy-Querformat ganz ausblenden - er nimmt bei
       der geringen Hoehe zu viel Platz weg (Kundenentscheid 07.10.2026) */
    .whatsapp-widget {
        display: none;
    }
}

/* -------------------------------------------------------------------------
   3) .split-grid - ersetzt ein Inline-Grid auf seniorenumzug.php.
   Als Inline-Style war der Block bis hinunter auf 360px zweispaltig und für
   keine Media Query erreichbar (inline schlägt jede Regel ausser !important).
   ------------------------------------------------------------------------- */
.split-grid {
    display: grid;
    /* auto-fit statt festem 1fr 1fr: der Block steht in einer Spalte, die je nach
       Viewport nur ~327px breit ist. Ein hartes Zweispalten-Raster sprengte sie,
       weil Grid-Kinder ohne min-width:0 nicht unter ihre Inhaltsbreite schrumpfen.
       So entscheidet der verfuegbare Platz - unabhaengig vom Breakpoint. */
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
    /* Kacheln einer Reihe gleich hoch, auch bei unterschiedlich langem Text
       (vorher start: wirkte am Computer unruhig). Eine Spalte: keine Wirkung. */
    align-items: stretch;
}

/* Ab zwei Spalten alle Reihen gleich hoch. Gemessen am umgebenden Block, nicht
   am Bildschirm: dieselben Kacheln stehen mal in einer halben Spalte, mal
   zentriert. Unter 496px (eine Spalte) bleibt jede Kachel so hoch wie ihr Text. */
:has(> .split-grid) {
    container-type: inline-size;
}

@container (min-width: 496px) {
    .split-grid {
        grid-auto-rows: 1fr;
    }
}

.split-grid > * {
    min-width: 0;
}

/* Info-Kachel: Symbol links, fetter Titel, kurze Erklaerung darunter. Gleicher
   Aufbau wie die Leistungs-Kacheln auf privatumzug.php, hier als Klasse statt
   Inline-Stil. Eingesetzt beim Moebellift (umzug.php, im .split-grid 2 x 2)
   und bei den weiteren Reinigungsdiensten (reinigung.php, .info-kacheln in
   einer Spalte). Kundenentscheid 12.10.2026. */
.info-kacheln {
    display: grid;
    gap: 1rem;
    margin: 1.5rem 0;
}

.info-kachel {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1rem;
}

.info-kachel > i {
    color: var(--primary-color);
    font-size: 1.3rem;
    margin-top: 2px;
    flex-shrink: 0;
    width: 1.6rem;
    text-align: center;
}

.info-kachel strong {
    display: block;
    color: var(--brand-dark);
}

.info-kachel small {
    display: block;
    color: var(--text-light);
    font-size: 0.9rem;
    line-height: 1.4;
    margin-top: 0.15rem;
}

/* Moebellift-Foto (umzug.php): zeigt, was ein Moebellift ist, und bleibt
   deshalb auch auf dem Handy sichtbar, dort niedriger. Das Foto fuellt die
   Bildspalte (480px hoch, Handy 220px). Querformat-Foto, damit der ganze Lift
   trotz Zuschnitt im Bild bleibt (Kundenentscheid 12.10.2026; ein schmal
   gestelltes Hochformat-Foto wurde verworfen). */
.col-img .moebellift-bild {
    width: 100%;
    height: 480px;
    object-fit: cover;
    object-position: center;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

@media (max-width: 768px) {
    .col-img .moebellift-bild {
        height: 220px;
    }
}

/* -------------------------------------------------------------------------
   4) Cookie-Banner mit Ablehnen-Option (06.09.2026)
   Vorher gab es nur "Alles klar!" - keine Moeglichkeit abzulehnen.
   ------------------------------------------------------------------------- */
.cookie-actions {
    display: flex;
    gap: 0.75rem;
    flex-shrink: 0;
}

/* Sekundaerer Button auf dunklem Bannergrund */
.btn-ghost {
    background: transparent;
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.45);
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.75);
    color: var(--white);
}

@media (max-width: 640px) {
    .cookie-content {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        text-align: center;
    }

    .cookie-actions {
        flex-direction: column;
    }

    /* Volle Breite und 48px Tap-Target, wie die uebrigen Buttons auf Mobile */
    .cookie-actions .btn {
        width: 100%;
        min-height: 48px;
    }
}

/* =========================================
   BEWERTUNGEN - Leerzustand & Quellenangabe
   Ergaenzt 06.09.2026 zusammen mit dem Entfernen der erfundenen
   Fallback-Rezensionen. Ohne echte Daten zeigt die Seite diesen
   Zustand statt einer Platzhalter-Bewertung.
   ========================================= */
.reviews-empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 1.5rem;
    background: var(--light-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.reviews-empty-state p {
    margin-bottom: 1.25rem;
    color: var(--text-light);
}

.reviews-source-note {
    text-align: center;
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: var(--text-light);
}

.reviews-source-note a {
    color: var(--primary-color);
    text-decoration: underline;
}

/* Quellenzugang je Rezension - die Places-Richtlinien verlangen, dass
   eine Bewertung zu ihrem Ursprung zurueckverfolgbar bleibt. */
.review-source {
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--text-light);
    text-decoration: underline;
    white-space: nowrap;
}

.review-source:hover {
    color: var(--primary-color);
}

/* Das Badge wird ausgeblendet, solange keine belegten Daten vorliegen.
   [hidden] allein reicht nicht, weil .rating-badge display:flex setzt. */
.rating-badge[hidden],
.hero-stats .stat-item[hidden],
.footer-badges .badge[hidden] {
    display: none !important;
}

/* =========================================
   KONTAKTFORMULAR - dienstleistungsabhaengige Felder
   Ergaenzt 06.09.2026.
   ========================================= */
.service-fields {
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--secondary-color);
    border-radius: var(--radius-md);
    padding: 1.25rem 1.25rem 0.5rem;
    margin-bottom: 1.25rem;
    background: var(--light-bg);
    animation: serviceFieldsIn 0.25s ease;
}

/* [hidden] muss den Fieldset-Default schlagen */
.service-fields[hidden] {
    display: none !important;
}

.service-fields legend {
    font-weight: 600;
    color: var(--primary-color);
    font-size: 0.95rem;
    padding: 0 0.5rem;
}

/* Umzug: Auszug und Einzug als zwei gleich aufgebaute Karten, damit
   Adresse, Stockwerk und Lift sichtbar zum selben Ort gehoeren. */
.move-location {
    flex: 1;
    min-width: 0;
    margin: 0 0 1.25rem;
    padding: 0.75rem 1rem 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.move-location legend {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-light);
    padding: 0 0.4rem;
}

.move-location legend i {
    color: var(--secondary-color);
    margin-right: 0.25rem;
}

.move-location .form-group {
    margin-bottom: 1rem;
}

.move-location .checkbox-group[hidden] {
    display: none;
}

/* Kontaktformular: Weiter-Knopf am Ende eines Umzugsschritts. .btn setzt
   display, darum braucht [hidden] eine eigene Regel. */
.move-step-next {
    margin-bottom: 1rem;
}

.move-step-next[hidden] {
    display: none;
}

/* Tablet: Die Formularspalte ist schmal, Auszug und Einzug stehen wie auf
   dem Handy untereinander statt in zwei gequetschten Karten. */
@media (min-width: 769px) and (max-width: 1024px) {
    .contact-form-box .move-locations {
        flex-direction: column;
        gap: 0;
    }
}

/* Der Rechner zeigt seine vorhandenen Feldgruppen nach Eingabe nacheinander. */
.calculator-progress {
    margin-bottom: 1.25rem;
}

.calculator-progress[hidden] {
    display: none;
}

.calculator-progress ol {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.calculator-progress li {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    background: var(--white);
    color: var(--text-light);
    font-size: 0.85rem;
    font-weight: 700;
}

.calculator-progress li[aria-current="step"] {
    border-color: var(--secondary-color);
    background: var(--secondary-color);
    color: var(--brand-dark);
}

#move-calculator .move-step.is-revealed,
#move-calculator .calculator-step-details.is-revealed,
#general-contact-form .move-step.is-revealed {
    animation: serviceFieldsIn 0.25s ease;
}

#move-calculator .move-step[hidden],
#move-calculator .calculator-step-details[hidden],
#general-contact-form .move-step[hidden] {
    display: none;
}

@keyframes serviceFieldsIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .service-fields,
    #move-calculator .move-step.is-revealed,
    #move-calculator .calculator-step-details.is-revealed,
    #general-contact-form .move-step.is-revealed {
        animation: none;
    }
}

/* Erfolgszustand nach Post/Redirect/Get (kontakt.php?sent=1).
   Ohne JavaScript sah der Besucher vorher rohes JSON. */
.form-success {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: var(--radius-md);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.form-success i {
    color: #16a34a;
    font-size: 1.5rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.form-success h3 {
    font-size: 1.1rem;
    margin-bottom: 0.35rem;
    color: #15803d;
}

.form-success p {
    margin-bottom: 0.35rem;
    font-size: 0.95rem;
}

.form-success-call a {
    color: var(--primary-color);
    font-weight: 600;
}

.form-privacy-note {
    font-size: 0.8rem;
    color: var(--text-light);
    margin-top: 0.85rem;
    line-height: 1.5;
}

.form-privacy-note a {
    color: var(--primary-color);
    text-decoration: underline;
}

@media (max-width: 480px) {
    .service-fields {
        padding: 1rem 0.85rem 0.35rem;
    }
}

/* Fehlerzustand nach Post/Redirect/Get (kontakt.php?error=...) */
.form-error {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.form-error i {
    color: #dc2626;
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.form-error p {
    margin: 0;
    font-size: 0.95rem;
    color: #991b1b;
}

/* Datumsfelder gleichen sich sonst nicht der Feldhoehe an (Safari/Chrome
   rendern den nativen Picker mit eigener Zeilenhoehe). */
.form-group input[type="date"] {
    min-height: 48px;
    appearance: none;
    -webkit-appearance: none;
    background: var(--white);
}

/* Sternzeile in den Hero-Vertrauenssignalen */
.hero-stats .hero-stars {
    display: block;
    color: #FFC107;
    font-size: 1rem;
    letter-spacing: 1px;
    margin-bottom: 0.15rem;
}

.hero-stats .stat-number i {
    font-size: 2rem;
}

/* Oeffnungszeiten unter dem Haupt-CTA */
.cta-hours {
    margin-top: 1.25rem;
    font-size: 0.9rem;
    color: var(--text-light);
}


/* =========================================
   BEWEGUNG REDUZIEREN
   Respektiert die Systemeinstellung. Betrifft die Scroll-Reveals, die
   schwebenden Hero-Kacheln und alle Hover-Transitions. Ergaenzt 06.09.2026.
   ========================================= */
@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;
    }

    /* Reveal-Elemente muessen trotzdem sichtbar werden, sonst bleibt die
       Seite bei abgeschalteter Animation leer. */
    .reveal {
        opacity: 1 !important;
        transform: none !important;
    }

    .floating,
    .stat-item.floating {
        animation: none !important;
    }
}

/* =========================================
   BROTKRUMENNAVIGATION
   Sichtbar, weil Google verlangt, dass strukturierte Daten dem
   entsprechen, was auf der Seite steht. Ergaenzt 06.09.2026.
   ========================================= */
.breadcrumb {
    background: var(--light-bg);
    border-bottom: 1px solid var(--border-color);
    font-size: 0.875rem;
}

.breadcrumb ol {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0.75rem 20px;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.breadcrumb li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-light);
}

.breadcrumb li + li::before {
    content: '/';
    color: #cbd5e1;
}

.breadcrumb a {
    color: var(--primary-color);
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.breadcrumb [aria-current="page"] {
    color: var(--brand-dark);
    font-weight: 600;
}

@media (max-width: 480px) {
    .breadcrumb ol {
        padding: 0.6rem 15px;
    }

    .breadcrumb {
        font-size: 0.8rem;
    }
}

/* =========================================
   KUNDENSTIMMEN-KARUSSELL
   Ergaenzt am 15.09.2026 auf Kundenwunsch. Ersetzt das vorherige
   .testimonials-grid an dieser Stelle.

   Warum Scroll-Snap statt einer Karussell-Bibliothek: Das Verhalten steckt
   vollstaendig im Browser - Wischen, Tastatur, Mausrad und Trackpad
   funktionieren ohne eigenes Skript, und es kommt keine Abhaengigkeit dazu
   (Manifest 8). script.js steuert nur Pfeile und Punkte.

   Farben, Radien, Schatten und Uebergaenge stammen unveraendert aus den
   Tokens in :root - es kommt kein neuer Wert dazu.
   ========================================= */
.reviews-carousel {
    position: relative;
    margin-top: 3rem;
}

.reviews-track {
    display: grid;
    grid-auto-flow: column;
    /* Drei Karten je Ansicht; die Luecken werden herausgerechnet, damit die
       dritte Karte buendig mit dem Containerrand abschliesst. */
    grid-auto-columns: calc((100% - 2 * 2rem) / 3);
    gap: 2rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* Platz fuer den Hover-Versatz der Karten, sonst schneidet der
       Scrollcontainer ihn ab. Seitlich bewusst 0: Ein horizontaler
       Innenabstand verschiebt die Einrastposition, dann steht die Bahn
       ganz links nicht auf scrollLeft 0 und der Zurueck-Pfeil liesse
       sich am Anfang nicht als inaktiv erkennen. */
    padding: 0.5rem 0 1rem;
    scrollbar-width: none;
}

.reviews-track::-webkit-scrollbar {
    display: none;
}

.reviews-track:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 4px;
    border-radius: var(--radius-lg);
}

.reviews-track>* {
    scroll-snap-align: start;
}

/* Lade- und Leerzustand sind keine Karussellkarten, sondern fuellen die
   ganze Breite. */
.reviews-track__full,
.reviews-track>.reviews-empty-state {
    grid-column: 1 / -1;
    grid-auto-columns: 100%;
    width: 100%;
    scroll-snap-align: none;
}

.reviews-loading-state {
    text-align: center;
    padding: 4rem 2rem;
}

.reviews-loading-state i {
    font-size: 3rem;
    color: var(--secondary-color);
    margin-bottom: 1.5rem;
}

.reviews-loading-state p {
    font-size: 1.2rem;
    color: var(--text-light);
}

/* Karten im Karussell: gleiche Hoehe, Fusszeile unten buendig.
   Vorher richteten sich die Karten nach ihrer Textlaenge, was die Reihe
   unruhig aussehen liess. */
.reviews-track .testimonial-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
}

.reviews-track .review-text {
    flex: 1 1 auto;
}

/* --- Fusszeile der Karte ---
   Zuvor standen Avatar, Name, Datum und Quellenlink in einer einzigen Zeile
   mit margin-left:auto auf dem Link. Bei laengeren Namen brach das um
   ("Pasquale / Cioce") und der Link rutschte in den Namen hinein. Jetzt:
   Avatar und Person in einer Zeile, die Quelle in einer eigenen darunter. */
.reviews-track .review-meta {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 0.75rem;
    row-gap: 0.75rem;
    border-top: 1px solid var(--border-color);
    padding-top: 1rem;
    margin-top: 1.5rem;
}

.reviews-track .review-meta .review-source {
    grid-column: 1 / -1;
    margin-left: 0;
    justify-self: start;
    white-space: normal;
}

.reviews-track .review-author {
    font-size: 1rem;
    line-height: 1.3;
    /* Lange Namen duerfen umbrechen, ohne die Spalte zu sprengen. */
    overflow-wrap: anywhere;
}

/* --- Blaettern --- */
.reviews-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--white);
    color: var(--primary-color);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: var(--transition);
}

.reviews-nav:hover:not(:disabled) {
    background: var(--primary-color);
    color: var(--white);
    border-color: var(--primary-color);
}

.reviews-nav:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 3px;
}

.reviews-nav:disabled {
    opacity: 0.35;
    cursor: default;
    box-shadow: var(--shadow-sm);
}

.reviews-nav--prev {
    left: -22px;
}

.reviews-nav--next {
    right: -22px;
}

.reviews-nav[hidden] {
    display: none !important;
}

/* --- Positionspunkte --- */
.reviews-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.reviews-dots[hidden] {
    display: none !important;
}

.reviews-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--white);
    cursor: pointer;
    transition: var(--transition);
}

.reviews-dot[aria-current="true"] {
    background: var(--primary-color);
    border-color: var(--primary-color);
    /* Der aktive Punkt wird breiter statt nur farbig - so bleibt die
       Position auch ohne Farbwahrnehmung erkennbar (WCAG 1.4.1). */
    width: 26px;
    border-radius: 5px;
}

/* Tablet: zwei Karten je Ansicht. */
@media (max-width: 1024px) {
    .reviews-track {
        grid-auto-columns: calc((100% - 1.5rem) / 2);
        gap: 1.5rem;
    }

    .reviews-nav--prev {
        left: -12px;
    }

    .reviews-nav--next {
        right: -12px;
    }
}

/* Mobil: eine Karte, die naechste blitzt am Rand durch - das zeigt ohne
   Worte, dass es weitergeht. Die Pfeile entfallen zugunsten des Wischens,
   die Punkte bleiben als Positionsanzeige. */
@media (max-width: 768px) {
    .reviews-carousel {
        margin-top: 2rem;
    }

    .reviews-track {
        grid-auto-columns: 86%;
        gap: 1rem;
        padding: 0.5rem 0 1rem;
        /* Bis zum Containerrand scrollen und dort einrasten. */
        scroll-padding-left: 0;
    }

    .reviews-nav {
        display: none;
    }

    .reviews-track .testimonial-card {
        padding: 1.5rem;
    }
}

@media (max-width: 480px) {
    .reviews-track {
        grid-auto-columns: 90%;
    }

    .reviews-track .testimonial-card {
        padding: 1.25rem;
    }
}

/* Wer reduzierte Bewegung eingestellt hat, bekommt harte Spruenge statt
   gleitendem Scrollen. */
@media (prefers-reduced-motion: reduce) {

    .reviews-track {
        scroll-behavior: auto;
    }
}

/* --- Bestandteile einer Rezensionskarte ---
   Diese Regeln standen bis 15.09.2026 als Inline-Styles in renderReviews().
   Dort waren sie doppelt problematisch: Sie umgingen die Design-Tokens
   (feste Hexwerte #fbbf24, #64748b, #f1f5f9) und schlugen als Inline-Angabe
   jede Stylesheet-Regel, wodurch sich das Kartenlayout nicht mehr steuern
   liess. Farben kommen jetzt aus :root. */
.review-stars {
    /* Dieselbe Amber-Stufe wie .stars im Bewertungs-Badge darueber. */
    color: #F59E0B;
    font-size: 1.1rem;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}

.review-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-color);
    color: var(--white);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}

.review-person {
    min-width: 0;
}

.review-person .review-author {
    margin: 0;
}

/* .review-date am 15.09.2026 entfernt - das Datum wird auf Kundenwunsch
   nicht mehr angezeigt. */