/* =========================================================
   abscheider-vollservice.de – Mobile (max-width: Breakpoint)
   ========================================================= */

body { font-size: 16px; }

.header-inner { padding-top: 4px; padding-bottom: 4px; }
.site-logo img { width: 130px; }
.site-claim { font-size: 0.62rem; }

.header-phone { margin-left: auto; margin-right: 0.4rem; }
.header-phone-label { display: none; }
.header-phone-number { font-size: 1rem; }

/* Burger sichtbar */
.burger { display: block; }
body.nav-open .burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
body.nav-open .burger span:nth-child(2) { opacity: 0; }
body.nav-open .burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Slide-in-Navigation von rechts */
.main-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(84vw, 340px);
    background: var(--petrol-dark);
    padding: 5rem 1.4rem 2rem;
    transform: translateX(100%);
    transition: transform 0.28s ease;
    overflow-y: auto;
    z-index: 90;
    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.35);
}
.main-nav.open { transform: translateX(0); }

.nav-level-1 > li { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.nav-level-1 > li > a {
    display: block;
    padding: 0.85rem 0.2rem;
    color: #fff;
    font-size: 1.05rem;
}
.nav-level-1 > li.active > a { color: var(--accent); }
.nav-level-2 { padding: 0 0 0.6rem 0.9rem; }
.nav-level-2 a {
    display: block;
    padding: 0.45rem 0.2rem;
    color: var(--mint);
    font-size: 0.95rem;
}
.nav-level-2 .active a { color: var(--accent); }
.nav-cta {
    display: block;
    margin-top: 1.4rem;
    text-align: center;
}

/* Abdunkelung hinter dem Menue */
body.nav-open::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 80;
}

/* Hero */
.hero-panel { padding: 2.6rem 0; }
.hero-title { font-size: 1.5rem; }
.hero-subtitle { font-size: 1rem; }
.hero-scrim {
    background: linear-gradient(180deg,
        rgba(9, 43, 39, 0.82) 0%,
        rgba(9, 43, 39, 0.65) 60%,
        rgba(9, 43, 39, 0.4) 100%);
}
.btn { width: 100%; }
.hero-cta { flex-direction: column; }

/* Trustbar unter dem Hero, einspaltig */
.trustbar { margin-top: 12px; }
.trustbar-inner { grid-template-columns: 1fr; }

/* Bilder im Text: volle Breite gestapelt */
.ce-intext .ce-gallery { float: none !important; max-width: 100%; margin: 0 0 1rem 0; }

/* Footer & CTA-Band einspaltig */
.footer-grid { grid-template-columns: 1fr; gap: 1.4rem; }
.cta-band-inner { flex-direction: column; align-items: flex-start; }
.cta-band-actions { width: 100%; }
.cta-band-actions .btn { width: 100%; }