/* ==========================================================================
   RESPONSIVE.CSS — Rohrreinigung 24 Theme
   Complete responsive overrides for all components at all breakpoints.
   Load order: after rohr24-style (priority 20 in functions.php).
   ========================================================================== */

/* ==========================================================================
   CSS CUSTOM PROPERTIES — FLUID TYPOGRAPHY OVERRIDES
   ========================================================================== */

:root {
    --font-size-h1: clamp(26px, 5vw, 48px);
    --font-size-h2: clamp(20px, 3.5vw, 32px);
    --font-size-h3: clamp(17px, 2.5vw, 22px);
}

/* ==========================================================================
   SCROLL PADDING — account for sticky header
   ========================================================================== */

html {
    scroll-padding-top: calc(var(--topbar-height, 40px) + var(--header-height, 80px) + 16px);
}

@media (max-width: 768px) {
    html {
        scroll-padding-top: 80px;
    }
}

/* ==========================================================================
   IMAGES — global safe defaults
   ========================================================================== */

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

.hero-bg {
    background-size: cover;
    background-position: center center;
}

/* ==========================================================================
   BREAKPOINT: min-width 1400px — wide desktop boost
   ========================================================================== */

@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }

    .hero-section h1 {
        font-size: 56px;
    }

    .trust-stat-number {
        font-size: 40px;
    }

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

    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr 1.5fr;
        gap: 48px;
    }
}

/* ==========================================================================
   BREAKPOINT: max-width 1200px — standard desktop narrowing
   ========================================================================== */

@media (max-width: 1200px) {
    .container {
        padding: 0 24px;
    }

    .hero-section h1 {
        font-size: clamp(30px, 4vw, 46px);
    }

    .footer-grid {
        grid-template-columns: 1.5fr 1fr 1fr;
        gap: 32px;
    }

    .content-with-sidebar {
        grid-template-columns: 1fr 300px;
        gap: 40px;
    }

    .content-sidebar-layout,
    .content-sidebar-layout--b2b {
        grid-template-columns: 1fr 280px;
        gap: 32px;
    }
}

/* ==========================================================================
   BREAKPOINT: max-width 1100px — existing breakpoint reinforcement
   ========================================================================== */

@media (max-width: 1100px) {
    .content-with-sidebar {
        grid-template-columns: 1fr 280px;
    }

    .content-sidebar-layout,
    .content-sidebar-layout--b2b {
        grid-template-columns: 1fr 260px;
    }

    .mega-dropdown__list {
        grid-template-columns: 1fr;
    }

    .mega-dropdown__inner {
        grid-template-columns: 1fr 220px;
    }
}

/* ==========================================================================
   BREAKPOINT: max-width 1024px — tablet landscape
   ========================================================================== */

@media (max-width: 1024px) {
    /* Container */
    .container {
        padding: 0 20px;
    }

    /* Header */
    .site-header .container {
        gap: 16px;
    }

    .main-nav-list {
        gap: 4px;
    }

    .main-nav-list > li > a {
        font-size: 13px;
        padding: 0 10px;
    }

    /* Hero */
    .hero-section {
        min-height: 600px;
    }

    .hero-section h1 {
        font-size: clamp(28px, 4.5vw, 40px);
    }

    /* Trust bar */
    .trust-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .trust-stat + .trust-stat {
        border-left: none;
    }

    .trust-stat:nth-child(odd) {
        border-right: 1px solid var(--color-border);
    }

    .trust-stat:nth-child(1),
    .trust-stat:nth-child(2) {
        border-bottom: 1px solid var(--color-border);
    }

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

    /* Testimonials */
    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* B2B reasons */
    .b2b-reasons-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Content + sidebar */
    .content-with-sidebar {
        grid-template-columns: 1fr 260px;
        gap: 32px;
    }

    .content-sidebar-layout,
    .content-sidebar-layout--b2b {
        grid-template-columns: 1fr 240px;
        gap: 28px;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }

    .footer-grid .footer-col--brand {
        grid-column: 1 / -1;
    }

    /* Mega nav — single column service list */
    .mega-dropdown__list {
        grid-template-columns: 1fr;
    }

    .mega-dropdown__inner {
        grid-template-columns: 1fr 220px;
    }
}

/* ==========================================================================
   BREAKPOINT: max-width 768px — tablet portrait / mobile landscape
   ========================================================================== */

@media (max-width: 768px) {

    /* ── Root / Spacing overrides ──────────────────────────────────────────── */
    :root {
        --font-size-h1: 32px;
        --font-size-h2: 26px;
        --font-size-h3: 20px;
        --spacing-4xl: 48px;
        --spacing-3xl: 40px;
    }

    /* ── Top Bar ───────────────────────────────────────────────────────────── */
    .top-bar {
        height: auto;
        padding: 6px 0;
        font-size: 11px;
    }

    .top-bar .container {
        flex-direction: column;
        gap: 4px;
        text-align: center;
    }

    .top-bar-left {
        font-size: 11px;
        gap: 6px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .topbar-city,
    .topbar-hours {
        display: none; /* hide on mobile, keep phone + emergency */
    }

    .topbar-emergency {
        font-weight: 600;
        color: #fff;
    }

    .top-bar-right .btn-emergency {
        font-size: 11px;
        padding: 5px 12px;
    }

    /* ── Header ────────────────────────────────────────────────────────────── */
    .site-header {
        height: 64px;
        position: sticky;
        top: 0;
        z-index: 900;
    }

    .site-header .container {
        height: 64px;
    }

    .site-logo-text {
        font-size: 18px;
    }

    .site-logo-tagline {
        font-size: 10px;
    }

    .main-navigation {
        display: none !important;
    }

    .header-cta .header-phone {
        display: none;
    }

    .header-cta .btn:not(.hamburger-btn) {
        display: none;
    }

    .hamburger-btn {
        display: flex !important;
    }

    /* ── Mobile Menu ───────────────────────────────────────────────────────── */
    .mobile-menu {
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        max-height: 100vh;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .mobile-accordion-trigger.is-active .accordion-arrow {
        transform: rotate(180deg);
    }

    /* ── Mega Dropdown — disabled on mobile ────────────────────────────────── */
    .mega-dropdown {
        display: none !important;
    }

    /* ── Hero ──────────────────────────────────────────────────────────────── */
    .hero-section {
        min-height: 100svh;
        min-height: 100vh; /* fallback */
        min-height: max(480px, 100svh);
    }

    .hero-content {
        padding-top: 80px; /* accounts for sticky header */
        padding-bottom: 40px;
    }

    .hero-section h1 {
        font-size: clamp(28px, 6vw, 40px);
        line-height: 1.25;
    }

    .hero-subtext {
        font-size: 16px;
    }

    .hero-badge {
        font-size: 12px;
        padding: 6px 12px;
    }

    .hero-cta-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .hero-cta-group .btn {
        width: 100%;
        justify-content: center;
        min-height: 48px;
    }

    .hero-features {
        flex-wrap: wrap;
        gap: 10px;
    }

    .hero-feature-item {
        flex: 0 0 calc(50% - 5px);
        font-size: 13px;
    }

    /* ── Trust Bar ─────────────────────────────────────────────────────────── */
    .trust-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .trust-stat-number,
    .stat-number {
        font-size: clamp(22px, 3vw, 32px);
    }

    .trust-stat + .trust-stat {
        border-left: none;
    }

    .trust-stat:nth-child(odd) {
        border-right: 1px solid var(--color-border);
    }

    .trust-stat:nth-child(1),
    .trust-stat:nth-child(2) {
        border-bottom: 1px solid var(--color-border);
    }

    /* ── Service Cards (GIF section) ───────────────────────────────────────── */
    .services-grid {
        grid-template-columns: 1fr;
    }

    .service-card {
        padding: 20px;
    }

    .service-gif-placeholder,
    .gif-rohrreinigung,
    .gif-kuechenabfluss,
    .gif-kanalreinigung,
    .gif-dichtheitspruefung,
    .gif-hochdruck,
    .gif-notdienst {
        width: 64px;
        height: 64px;
    }

    /* ── Process Steps ─────────────────────────────────────────────────────── */
    .process-steps {
        grid-template-columns: 1fr;
    }

    .process-arrow {
        transform: rotate(90deg);
        margin: 8px auto;
    }

    .process-step-number {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    /* ── Testimonials ──────────────────────────────────────────────────────── */
    .testimonials-grid {
        grid-template-columns: 1fr;
    }

    /* ── B2B Reasons Grid ──────────────────────────────────────────────────── */
    .b2b-reasons-grid {
        grid-template-columns: 1fr;
    }

    /* ── Content + Sidebar Layout ──────────────────────────────────────────── */
    .content-with-sidebar {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .sidebar-area {
        position: static !important;
    }

    .expert-sidebar-wrapper {
        position: static;
    }

    .content-sidebar-layout,
    .content-sidebar-layout--b2b {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .expert-sidebar--b2b {
        position: static;
    }

    /* ── Expert Sidebar ────────────────────────────────────────────────────── */
    .expert-photo-placeholder,
    .expert-card__photo-wrap .expert-photo-placeholder {
        width: 80px;
        height: 80px;
    }

    .expert-call-btn,
    .expert-card__cta {
        width: 100%;
        text-align: center;
        display: flex;
        justify-content: center;
    }

    .expert-credentials li,
    .expert-card__credentials li {
        font-size: 13px;
    }

    /* ── FAQ Accordion ─────────────────────────────────────────────────────── */
    .faq-question {
        min-height: 56px;
        padding: 16px 20px;
        font-size: 15px;
        align-items: flex-start;
    }

    .faq-answer-inner {
        padding: 12px 20px;
    }

    /* ── Emergency CTA section ─────────────────────────────────────────────── */
    .emergency-cta-section .emergency-phone-number {
        font-size: clamp(28px, 6vw, 44px);
    }

    .emergency-cta-section .btn {
        width: 100%;
        justify-content: center;
    }

    /* ── Footer ────────────────────────────────────────────────────────────── */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .footer-grid .footer-col--brand {
        grid-column: auto;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }

    .footer-legal-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    .footer-legal-links a {
        font-size: 13px;
    }

    .social-icon {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }

    /* ── Breadcrumb ────────────────────────────────────────────────────────── */
    .breadcrumb {
        font-size: 13px;
    }

    .breadcrumb span[aria-current="page"],
    .breadcrumb li[aria-current="page"] {
        max-width: 180px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
        vertical-align: bottom;
    }

    /* ── Emergency float button ────────────────────────────────────────────── */
    .emergency-float-btn {
        display: block;
    }

    /* ── Contact grid ──────────────────────────────────────────────────────── */
    .contact-grid {
        grid-template-columns: 1fr;
    }

    /* ── Page Hero (B2B compact) ───────────────────────────────────────────── */
    .page-hero__title {
        font-size: clamp(22px, 5vw, 36px);
    }

    .page-hero__eyebrow {
        font-size: 13px;
    }

    .page-title-bar__title {
        font-size: clamp(22px, 5vw, 36px);
    }

    /* ── Buttons (general) ─────────────────────────────────────────────────── */
    .btn {
        min-height: 44px;
    }

    .btn-block {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    /* ── Forms ─────────────────────────────────────────────────────────────── */
    .form-group {
        width: 100%;
    }

    .form-control {
        width: 100%;
        box-sizing: border-box;
        min-height: 44px;
        font-size: 16px; /* prevents iOS zoom */
    }

    input[type="text"],
    input[type="tel"],
    input[type="email"],
    input[type="search"],
    select,
    textarea {
        width: 100%;
        box-sizing: border-box;
        font-size: 16px !important; /* iOS zoom prevention */
        min-height: 44px;
    }

    textarea {
        min-height: 80px;
    }

    /* ── B2B Breadcrumb bar ────────────────────────────────────────────────── */
    .breadcrumb-bar .container {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }

    .b2b-page-badge {
        font-size: 12px;
    }
}

/* ==========================================================================
   BREAKPOINT: max-width 480px — mobile portrait
   ========================================================================== */

@media (max-width: 480px) {
    .container {
        padding: 0 16px;
    }

    /* Typography */
    h1, .hero-section h1, .page-hero__title, .page-title-bar__title {
        font-size: clamp(24px, 7vw, 36px);
    }

    h2 {
        font-size: clamp(20px, 5.5vw, 28px);
    }

    h3 {
        font-size: clamp(17px, 4.5vw, 20px);
    }

    /* Top Bar */
    .top-bar .container {
        flex-direction: row;
        justify-content: space-between;
        gap: 0;
    }

    /* Hero */
    .hero-section h1 {
        font-size: clamp(24px, 7vw, 34px);
    }

    .hero-subtext {
        font-size: 15px;
    }

    .hero-cta-group {
        flex-direction: column;
        width: 100%;
    }

    .hero-cta-group .btn {
        width: 100%;
        font-size: 16px;
    }

    .hero-features {
        flex-direction: column;
        gap: 8px;
    }

    .hero-feature-item {
        flex: 0 0 100%;
        font-size: 13px;
    }

    /* Trust bar */
    .trust-stats {
        grid-template-columns: 1fr 1fr;
    }

    .trust-stat {
        padding: 12px 8px;
    }

    .trust-stat-number {
        font-size: 22px;
    }

    /* Service GIF */
    .service-gif-placeholder,
    .gif-rohrreinigung,
    .gif-kuechenabfluss,
    .gif-kanalreinigung,
    .gif-dichtheitspruefung,
    .gif-hochdruck,
    .gif-notdienst {
        width: 56px;
        height: 56px;
    }

    /* Buttons */
    .btn {
        min-height: 48px;
        font-size: 15px;
    }

    .btn-lg {
        min-height: 52px;
        font-size: 16px;
    }

    /* Emergency CTA */
    .emergency-cta-section .emergency-phone-number {
        font-size: 32px;
    }

    /* Footer */
    .footer-logo-text {
        font-size: 18px;
    }

    .footer-col h4 {
        font-size: 14px;
    }

    .footer-contact-item {
        font-size: 13px;
    }

    /* FAQ */
    .faq-question {
        font-size: 14px;
        padding: 14px 16px;
    }

    .faq-answer-inner {
        padding: 10px 16px;
        font-size: 14px;
    }

    /* Breadcrumb */
    .breadcrumb {
        font-size: 12px;
    }

    /* Sidebar form */
    .sidebar-mini-form h4 {
        font-size: 15px;
    }

    /* B2B */
    .b2b-reasons-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   BREAKPOINT: max-width 360px — small mobile (Samsung Galaxy S series)
   ========================================================================== */

@media (max-width: 360px) {
    .container {
        padding: 0 12px;
    }

    .site-logo-text {
        font-size: 16px;
    }

    .site-logo-tagline {
        display: none;
    }

    .hero-section h1 {
        font-size: 22px;
    }

    .hero-subtext {
        font-size: 14px;
    }

    .hero-badge {
        font-size: 11px;
        padding: 5px 10px;
    }

    .hero-cta-group .btn {
        font-size: 14px;
        padding: 12px 16px;
    }

    .trust-stat-number {
        font-size: 20px;
    }

    .trust-stat-label {
        font-size: 11px;
    }

    .trust-stat-sublabel {
        font-size: 10px;
    }

    .btn {
        min-height: 44px;
        font-size: 14px;
    }

    .emergency-cta-section .emergency-phone-number {
        font-size: 26px;
    }

    .footer-logo-text {
        font-size: 16px;
    }

    /* Top bar: show only phone */
    .top-bar-left {
        display: none;
    }

    .top-bar .container {
        justify-content: center;
    }
}

/* ==========================================================================
   TOUCH DEVICE OVERRIDES
   ========================================================================== */

@media (hover: none) and (pointer: coarse) {
    /* Disable hover-only transforms — prevents sticky hover on iOS */
    .service-card:hover {
        transform: none;
        box-shadow: var(--box-shadow-card);
    }

    .mega-dropdown__item:hover {
        transform: none;
    }

    .footer-services-list li a:hover {
        padding-left: 0;
    }

    /* Increase tap targets */
    .btn {
        min-height: 48px;
    }

    .faq-question {
        min-height: 52px;
    }

    .social-icon {
        min-width: 44px;
        min-height: 44px;
    }

    .main-nav-list > li > a {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    /* Form controls — bigger touch targets */
    .form-control,
    input[type="text"],
    input[type="tel"],
    input[type="email"],
    select {
        min-height: 48px;
    }
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
    .top-bar,
    .site-header,
    .mobile-menu,
    .mobile-menu-overlay,
    .emergency-float-btn,
    .hero-section,
    .mega-dropdown,
    .hamburger-btn,
    .footer-social,
    footer {
        display: none !important;
    }

    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }

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

    a[href^="tel"]::after {
        content: " (" attr(href) ")";
        font-size: 10pt;
        color: #555;
    }

    .container {
        max-width: 100%;
        padding: 0;
    }

    h1, h2, h3 {
        page-break-after: avoid;
    }

    .content-with-sidebar,
    .content-sidebar-layout {
        grid-template-columns: 1fr;
    }

    .trust-stats {
        grid-template-columns: repeat(4, 1fr);
    }

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

/* ==========================================================================
   ACCESSIBILITY — Focus states (keyboard navigation)
   ========================================================================== */

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

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ── Skip link ─────────────────────────────────────────────────────────── */
.skip-link:focus {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 9999;
    padding: 8px 16px;
    background: var(--color-primary);
    color: #fff;
    border-radius: var(--border-radius);
    font-weight: 600;
    text-decoration: none;
    clip: auto;
    width: auto;
    height: auto;
}

/* ==========================================================================
   FLUID TYPOGRAPHY UTILITY CLASSES
   ========================================================================== */

.text-fluid-h1 {
    font-size: clamp(26px, 5vw, 48px);
}

.text-fluid-h2 {
    font-size: clamp(20px, 3.5vw, 32px);
}

.text-fluid-h3 {
    font-size: clamp(17px, 2.5vw, 22px);
}

.emergency-phone-number {
    font-size: clamp(28px, 6vw, 52px);
}

/* ==========================================================================
   FOOTER — RESPONSIVE OVERRIDES (complete)
   ========================================================================== */

/* Desktop: 4 columns */
@media (min-width: 1201px) {
    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr 1.5fr;
    }
}

/* Tablet 1024px: 2-col, brand row spans full */
@media (min-width: 769px) and (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
    }

    .footer-grid .footer-col--brand {
        grid-column: 1 / -1;
        display: flex;
        flex-direction: row;
        gap: 32px;
        align-items: flex-start;
    }

    .footer-logo-area {
        flex: 1;
    }

    .footer-contact-info {
        flex: 1;
    }

    .footer-social {
        margin-top: 0;
    }
}

/* Mobile 768px: 1 column */
@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .footer-col--brand {
        grid-column: auto;
    }

    .footer-main {
        padding: 40px 0;
    }

    .footer-bottom-bar {
        padding: 16px 0;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    .footer-copyright {
        font-size: 13px;
    }

    .footer-legal-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px 12px;
    }

    .footer-legal-links a {
        font-size: 13px;
    }
}

/* ==========================================================================
   B2B PAGE LAYOUT — RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
    .content-sidebar-layout--b2b {
        display: block;
    }

    .content-sidebar-layout--b2b .content-main {
        margin-bottom: 32px;
    }

    .page-wrapper--b2b {
        padding-bottom: 0;
    }

    .breadcrumb-bar--b2b .container {
        flex-direction: column;
        gap: 6px;
    }

    .page-hero--compact {
        min-height: 200px;
    }

    .page-hero__content {
        padding: 20px 0;
    }
}

/* ==========================================================================
   SIDEBAR EXPERT — RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
    .expert-sidebar-wrapper,
    .expert-sidebar--b2b {
        width: 100%;
        max-width: 100%;
        position: static !important;
        top: auto !important;
    }

    .expert-card__photo-wrap,
    .expert-photo-wrap {
        text-align: center;
    }

    .expert-photo-placeholder {
        width: 80px;
        height: 80px;
        margin: 0 auto;
    }

    .expert-card {
        padding: 20px;
    }
}

/* ==========================================================================
   FORMS — iOS and mobile safe
   ========================================================================== */

/* Prevent iOS input zoom — font-size must be >= 16px */
input,
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="search"],
input[type="number"],
input[type="password"],
select,
textarea {
    font-size: 16px !important;
}

@media (max-width: 768px) {
    .sidebar-contact-form .form-group {
        margin-bottom: 12px;
    }

    .sidebar-contact-form label {
        font-size: 13px;
        margin-bottom: 4px;
        display: block;
    }

    .sidebar-contact-form .form-control {
        width: 100%;
        box-sizing: border-box;
    }

    .sidebar-contact-form button[type="submit"] {
        width: 100%;
        min-height: 48px;
        font-size: 15px;
    }

    .b2b-contact-form .form-group {
        width: 100%;
    }

    .b2b-contact-form input,
    .b2b-contact-form select,
    .b2b-contact-form textarea {
        width: 100%;
        box-sizing: border-box;
    }
}

/* ==========================================================================
   PAGE HEADER — RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
    .page-header {
        padding: 24px 0 20px;
    }

    .page-header h1 {
        font-size: clamp(22px, 6vw, 34px);
        margin-bottom: 8px;
    }

    .page-header .breadcrumb {
        font-size: 12px;
    }
}

/* ==========================================================================
   SERVICE GIF SECTION — ACCESSIBILITY + RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
    .service-section {
        padding: 40px 0;
    }

    .service-section .section-header {
        margin-bottom: 28px;
    }

    .service-card {
        display: flex;
        flex-direction: column;
    }

    .service-card-link {
        margin-top: auto;
    }
}

/* GIF placeholder aspect ratio preservation */
.service-gif-placeholder {
    aspect-ratio: 1;
    max-width: 80px;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .service-gif-placeholder {
        max-width: 64px;
    }
}

@media (max-width: 480px) {
    .service-gif-placeholder {
        max-width: 56px;
    }
}

/* ==========================================================================
   PROCESS STEPS — RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
    .process-section {
        padding: 40px 0;
    }

    .process-steps {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .process-step {
        width: 100%;
        max-width: 360px;
        text-align: center;
    }

    .process-arrow {
        transform: rotate(90deg);
        margin: 4px auto;
        display: block;
    }

    .process-step-icon {
        margin: 0 auto 12px;
    }
}

/* ==========================================================================
   TESTIMONIALS — RESPONSIVE
   ========================================================================== */

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

    .testimonial-card {
        padding: 20px;
    }

    .testimonial-quote {
        font-size: 14px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .testimonials-grid .testimonial-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        max-width: 480px;
        margin: 0 auto;
    }
}

/* ==========================================================================
   EMERGENCY CTA SECTION — RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
    .emergency-cta-section {
        padding: 40px 0;
        text-align: center;
    }

    .emergency-cta-section h2 {
        font-size: clamp(22px, 5vw, 30px);
        margin-bottom: 12px;
    }

    .emergency-cta-section .emergency-phone-number {
        font-size: clamp(28px, 8vw, 44px);
        display: block;
        margin: 12px 0;
    }

    .emergency-cta-section .btn {
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
        justify-content: center;
    }

    .emergency-cta-section .emergency-subtext {
        font-size: 14px;
    }
}

/* ==========================================================================
   AUTHOR BOX — RESPONSIVE
   ========================================================================== */

@media (max-width: 480px) {
    .author-box {
        flex-direction: column;
        gap: 16px;
    }

    .author-avatar {
        width: 56px;
        height: 56px;
    }
}

/* ==========================================================================
   TRUST BADGES SIDEBAR — RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
    .trust-badges-sidebar {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .trust-badge-item {
        flex: 0 0 calc(50% - 4px);
    }
}

/* ==========================================================================
   MISSING COMPONENT STYLES — Expert Sidebar, B2B, Mobile Accordion
   ========================================================================== */

/* ── Expert Card (BEM) ───────────────────────────────────────────────────── */

.expert-sidebar {
    position: sticky;
    top: calc(var(--topbar-height, 40px) + var(--header-height, 80px) + 16px);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.expert-card {
    background: var(--color-cream, #fafafa);
    border: 1px solid var(--color-border, #e0e0e0);
    border-top: 3px solid var(--color-primary, #28ABE1);
    border-radius: var(--border-radius-lg, 8px);
    padding: 24px;
    text-align: center;
}

.expert-card__photo-wrap {
    position: relative;
    display: inline-block;
    margin-bottom: 14px;
}

.expert-photo-placeholder {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--color-primary-light, #e8f4fc);
    border: 3px solid var(--color-primary, #28ABE1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    overflow: hidden;
}

.expert-badge {
    display: inline-block;
    position: absolute;
    bottom: -4px;
    right: -4px;
    background: var(--color-primary, #28ABE1);
    color: var(--color-white, #fff);
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 10px;
    white-space: nowrap;
    letter-spacing: 0.03em;
}

.expert-badge--b2b {
    background: var(--color-dark, #41423F);
}

.expert-card__name {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-dark, #41423F);
    margin-bottom: 4px;
}

.expert-card__title {
    font-size: 13px;
    color: var(--color-text-muted, #666);
    margin-bottom: 14px;
}

.expert-card__credentials {
    list-style: none;
    text-align: left;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.expert-card__credentials li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: var(--color-body, #333);
    line-height: 1.4;
}

.expert-card__credentials li svg {
    flex-shrink: 0;
    margin-top: 1px;
}

.expert-card__availability {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-success, #27ae60);
    background: rgba(39,174,96,0.08);
    padding: 5px 12px;
    border-radius: 20px;
    margin-bottom: 16px;
}

.expert-card__availability--b2b {
    color: var(--color-primary, #28ABE1);
    background: var(--color-primary-light, #e8f4fc);
}

.availability-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    animation: pulse-availability 2s infinite;
}

.availability-dot--green {
    background: var(--color-success, #27ae60);
}

@keyframes pulse-availability {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.6; transform: scale(0.85); }
}

.expert-card__cta {
    width: 100%;
    justify-content: center;
    margin-top: 4px;
}

/* ── Expert Sidebar Container (B2B) ──────────────────────────────────────── */

.expert-sidebar--b2b .expert-card {
    border-top-color: var(--color-dark, #41423F);
}

/* ── Content + Sidebar Layout ─────────────────────────────────────────────
   .content-sidebar-layout: parent grid
   .content-main: left column
   .content-sidebar: right column
   ─────────────────────────────────────────────────────────────────────── */

.content-sidebar-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 40px;
    align-items: start;
}

.content-sidebar-layout--b2b {
    grid-template-columns: 1fr 300px;
}

.content-main {
    min-width: 0; /* prevent grid blowout */
}

.content-sidebar {
    min-width: 0;
}

@media (max-width: 1024px) {
    .content-sidebar-layout,
    .content-sidebar-layout--b2b {
        grid-template-columns: 1fr 280px;
        gap: 28px;
    }
}

@media (max-width: 768px) {
    .content-sidebar-layout,
    .content-sidebar-layout--b2b {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .expert-sidebar {
        position: static;
    }
}

/* ── Breadcrumb Bar ───────────────────────────────────────────────────────── */

.breadcrumb-bar {
    background: var(--color-light-bg, #f5f5f5);
    border-bottom: 1px solid var(--color-border, #e0e0e0);
    padding: 10px 0;
}

.breadcrumb-bar--b2b {
    background: #f0f7fc;
    border-bottom-color: var(--color-primary, #28ABE1);
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
}

.breadcrumb-bar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.breadcrumb ol {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    flex-wrap: wrap;
}

.breadcrumb ol li {
    font-size: 13px;
    color: var(--color-text-muted, #666);
}

.breadcrumb ol li a {
    color: var(--color-primary, #28ABE1);
    text-decoration: none;
}

.breadcrumb ol li[aria-current="page"] {
    color: var(--color-body, #333);
    font-weight: 600;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.b2b-page-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-primary, #28ABE1);
    background: var(--color-primary-light, #e8f4fc);
    padding: 4px 10px;
    border-radius: 12px;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .breadcrumb-bar .container {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .breadcrumb ol li[aria-current="page"] {
        max-width: 140px;
    }
}

/* ── B2B Reasons Grid ────────────────────────────────────────────────────── */

.b2b-trust-section {
    /* Uses .section--light */
}

.b2b-reasons-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 16px;
}

.b2b-reason-card {
    background: var(--color-white, #fff);
    border: 1px solid var(--color-border, #e0e0e0);
    border-top: 3px solid var(--color-primary, #28ABE1);
    border-radius: var(--border-radius-lg, 8px);
    padding: 24px 20px;
    transition: var(--transition);
    animation-delay: var(--delay, 0ms);
}

.b2b-reason-card:hover {
    box-shadow: var(--box-shadow-hover, 0 8px 24px rgba(40,171,225,0.15));
    transform: translateY(-3px);
}

.b2b-reason-icon {
    width: 56px;
    height: 56px;
    background: var(--color-primary-light, #e8f4fc);
    border-radius: var(--border-radius, 4px);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.b2b-reason-card h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--color-dark, #41423F);
}

.b2b-reason-card p {
    font-size: 14px;
    color: var(--color-text-muted, #666);
    line-height: 1.6;
    margin: 0;
}

.b2b-faq-section {
    /* Uses .section */
}

@media (max-width: 1024px) {
    .b2b-reasons-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .b2b-reasons-grid {
        grid-template-columns: 1fr;
    }
    .b2b-reason-card:hover {
        transform: none;
    }
}

/* ── Footer Columns (semantic) ───────────────────────────────────────────── */

.footer-col--services .footer-services-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-col--services .footer-services-list a {
    color: rgba(255,255,255,0.75);
    font-size: 14px;
    text-decoration: none;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.footer-col--services .footer-services-list a::before {
    content: '›';
    color: var(--color-primary, #28ABE1);
    font-weight: bold;
    font-size: 16px;
    line-height: 1;
}

.footer-col--services .footer-services-list a:hover {
    color: var(--color-white, #fff);
}

.footer-col--b2b .footer-services-list a {
    color: rgba(255,255,255,0.75);
    font-size: 14px;
    text-decoration: none;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.footer-col--b2b .footer-services-list a::before {
    content: '›';
    color: var(--color-primary, #28ABE1);
    font-weight: bold;
}

.footer-col--b2b .footer-services-list a:hover {
    color: var(--color-white, #fff);
}

.footer-col--contact address {
    font-style: normal;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-col--contact address a {
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-col--contact address a:hover {
    color: var(--color-white, #fff);
}

.footer-widget,
.footer-widget-title {
    /* Widget areas in footer */
    color: rgba(255,255,255,0.85);
}

.footer-widget-title {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 12px;
    color: var(--color-white, #fff);
}

/* ── Mobile Menu Accordion ───────────────────────────────────────────────── */

.mobile-has-accordion > button.mobile-accordion-trigger {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-dark, #41423F);
    background: none;
    border: none;
    border-bottom: 1px solid var(--color-border, #e0e0e0);
    cursor: pointer;
    text-align: left;
    min-height: 48px;
}

.mobile-accordion-trigger--b2b {
    color: var(--color-primary, #28ABE1) !important;
}

.mobile-accordion-trigger .accordion-arrow {
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.mobile-accordion-trigger.is-active .accordion-arrow {
    transform: rotate(180deg);
}

.mobile-b2b-item .mobile-accordion-trigger::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    background: var(--color-primary, #28ABE1);
    border-radius: 50%;
    margin-right: 8px;
    flex-shrink: 0;
}

.mobile-mega-accordion {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    background: var(--color-cream, #fafafa);
}

.mobile-mega-accordion.is-open {
    /* max-height set via JS to scrollHeight */
}

.mobile-mega-accordion a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    font-size: 15px;
    color: var(--color-body, #333);
    text-decoration: none;
    border-bottom: 1px solid var(--color-border, #e0e0e0);
    min-height: 44px;
}

.mobile-mega-accordion a:hover,
.mobile-mega-accordion a:focus {
    background: var(--color-primary-light, #e8f4fc);
    color: var(--color-dark, #41423F);
}

.mobile-mega-accordion .section-label {
    display: block;
    padding: 10px 24px 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-text-muted, #666);
}

.mobile-mega-accordion .b2b-divider {
    border: none;
    border-top: 1px solid var(--color-border, #e0e0e0);
    margin: 4px 24px;
}

/* ── Mega dropdown --leistungen vs --b2b visual differentiation ──────────── */

.mega-dropdown--leistungen {
    /* default blue top border — already handled in mega-nav.css */
}

/* ── Author box in blog posts ─────────────────────────────────────────────── */

.author-info {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background: var(--color-cream, #fafafa);
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: var(--border-radius-lg, 8px);
    padding: 24px;
    margin-top: 40px;
}

.author-info img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.author-info h4 {
    font-size: 16px;
    margin-bottom: 4px;
}

.author-info p {
    font-size: 14px;
    color: var(--color-text-muted, #666);
    margin: 0;
}

@media (max-width: 480px) {
    .author-info {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 12px;
    }
}

/* ==========================================================================
   REMAINING COMPONENT STYLES — Nav, Sidebar Forms, Footer Cols, Mobile Menu
   ========================================================================== */

/* ── Nav item classes ────────────────────────────────────────────────────── */

.nav-leistungen > a { /* already styled via main-nav-list li a */ }
.nav-b2b > a {
    color: var(--color-primary, #28ABE1);
    font-weight: 600;
}

/* ── Mobile nav list ─────────────────────────────────────────────────────── */

.mobile-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-nav-list > li {
    border-bottom: 1px solid var(--color-border, #e0e0e0);
}

.mobile-nav-list > li > a {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-dark, #41423F);
    text-decoration: none;
    min-height: 48px;
    transition: background 0.15s ease;
}

.mobile-nav-list > li > a:hover {
    background: var(--color-primary-light, #e8f4fc);
    color: var(--color-primary, #28ABE1);
}

.mobile-menu-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-dark, #41423F);
}

.mobile-has-accordion {
    /* Container for accordion items */
}

.mobile-b2b-item > .mobile-accordion-trigger {
    color: var(--color-primary, #28ABE1);
}

/* ── Footer column semantic classes ──────────────────────────────────────── */

.footer-col--services {
    /* inherits from .footer-col */
}

.footer-col--b2b {
    /* inherits from .footer-col */
}

.footer-col--contact {
    /* inherits from .footer-col */
}

.footer-services-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ── Sidebar Contact Form ────────────────────────────────────────────────── */

.sidebar-form {
    background: var(--color-white, #fff);
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: var(--border-radius-lg, 8px);
    padding: 20px;
}

.sidebar-form--b2b {
    border-top: 3px solid var(--color-dark, #41423F);
}

.sidebar-form__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-dark, #41423F);
    margin-bottom: 4px;
}

.sidebar-form__sub {
    font-size: 12px;
    color: var(--color-text-muted, #666);
    margin-bottom: 14px;
}

.sidebar-form__form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sidebar-form__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sidebar-form__field label {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-body, #333);
}

.sidebar-form__field input,
.sidebar-form__field select,
.sidebar-form__field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: var(--border-radius, 4px);
    font-size: 14px;
    color: var(--color-body, #333);
    background: var(--color-white, #fff);
    transition: border-color 0.2s ease;
    min-height: 40px;
    box-sizing: border-box;
}

.sidebar-form__field input:focus,
.sidebar-form__field select:focus,
.sidebar-form__field textarea:focus {
    outline: none;
    border-color: var(--color-primary, #28ABE1);
    box-shadow: 0 0 0 3px rgba(40,171,225,0.12);
}

/* iOS: prevent zoom on focus */
@media (max-width: 768px) {
    .sidebar-form__field input,
    .sidebar-form__field select,
    .sidebar-form__field textarea {
        font-size: 16px !important;
    }
}

.sidebar-contact-form {
    /* Alias for .sidebar-form — same styles */
    background: var(--color-white, #fff);
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: var(--border-radius-lg, 8px);
    padding: 20px;
}

.sidebar-form__submit {
    margin-top: 4px;
}

/* ── Sidebar References Block ────────────────────────────────────────────── */

.sidebar-references {
    background: var(--color-light-bg, #f5f5f5);
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: var(--border-radius-lg, 8px);
    padding: 16px 20px;
}

.sidebar-references__title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted, #666);
    margin-bottom: 10px;
}

.sidebar-references__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sidebar-references__list li {
    font-size: 13px;
    color: var(--color-body, #333);
    padding-left: 14px;
    position: relative;
}

.sidebar-references__list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-primary, #28ABE1);
    font-weight: 700;
    font-size: 11px;
}

/* ── Sidebar Download Link ───────────────────────────────────────────────── */

.sidebar-download {
    border-top: 1px solid var(--color-border, #e0e0e0);
    padding-top: 14px;
}

.sidebar-download__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-primary, #28ABE1);
    text-decoration: none;
    transition: color 0.2s ease;
}

.sidebar-download__link:hover {
    color: var(--color-primary-dark, #1a8fc7);
    text-decoration: underline;
}

/* ── Site main wrapper ───────────────────────────────────────────────────── */

.site-main {
    flex: 1;
    min-height: 400px;
}

/* ── Widget title (WP sidebar widget) ───────────────────────────────────── */

.widget-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-dark, #41423F);
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--color-primary, #28ABE1);
}

/* ==========================================================================
   NEW COMPONENT BREAKPOINTS
   Added for: front-page.php sections, seo-text, blog single expert sidebar
   ========================================================================== */

/* ── SEO Text Layout ───────────────────────────────────────────────────── */

@media (max-width: 1100px) {
    .seo-text-layout {
        grid-template-columns: 1fr 200px;
        gap: 32px;
    }
}

@media (max-width: 1024px) {
    .seo-text-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .seo-bezirk-sidebar {
        position: static;
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 24px;
        align-items: start;
    }

    .seo-bezirk-sidebar h4 {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .seo-bezirk-sidebar {
        display: block;
    }
}

/* ── USP / Why-us section ──────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .usp-layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .usp-image-placeholder {
        min-height: 180px;
        aspect-ratio: 16/6;
        order: -1;
    }
}

@media (max-width: 768px) {
    .usp-item {
        padding: 12px;
        gap: 12px;
    }

    .usp-item-icon {
        font-size: 20px;
    }
}

/* ── CEO Quote section ─────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .ceo-quote-layout {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 24px;
    }

    .ceo-photo-placeholder {
        margin: 0 auto;
        width: 120px;
        height: 120px;
    }
}

/* ── Process steps — 4 steps ───────────────────────────────────────────── */

@media (max-width: 1024px) {
    .process-steps {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .process-arrow {
        display: none;
    }
}

@media (max-width: 640px) {
    .process-steps {
        grid-template-columns: 1fr;
    }
}

/* ── Post navigation ───────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .post-navigation {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .nav-next {
        text-align: left;
    }
}

/* ── Expert sidebar — stacks below content on tablet and below ─────────── */

@media (max-width: 1024px) {
    .content-with-sidebar {
        grid-template-columns: 1fr 240px;
    }
}

@media (max-width: 900px) {
    .content-with-sidebar {
        grid-template-columns: 1fr;
    }

    .expert-sidebar-wrapper {
        position: static;
    }
}

/* ── Author box ─────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .author-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
}

/* ── Post meta wrapping ─────────────────────────────────────────────────── */

@media (max-width: 480px) {
    .post-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* ── Tables in blog content ─────────────────────────────────────────────── */

@media (max-width: 768px) {
    .post-content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        font-size: 14px;
    }

    .post-content table th,
    .post-content table td {
        padding: 8px 10px;
        min-width: 100px;
    }
}

/* ── Notfall box mobile ─────────────────────────────────────────────────── */

@media (max-width: 480px) {
    .notfall-box a.notfall-phone {
        font-size: 18px;
    }
}

/* ── Footer trust row ───────────────────────────────────────────────────── */

@media (max-width: 480px) {
    .footer-trust-row {
        justify-content: center;
    }

    .footer-trust-badge {
        font-size: 11px;
    }
}

/* ── Service grid 4-column on wide screens ──────────────────────────────── */

@media (min-width: 1440px) {
    .services-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ── Emergency float button safe zone for mobile nav ───────────────────── */

@media (max-width: 768px) {
    .emergency-float-btn {
        bottom: 20px;
        right: 16px;
    }

    .emergency-float-btn a {
        padding: 12px 16px;
        font-size: 14px;
    }
}

/* ==========================================================================
   FRONT-PAGE & LANDING PAGE FALLBACK — Responsive Overrides
   ========================================================================== */

/* ── front-page hero: stack on mobile ───────────────────────────────────── */

@media (max-width: 900px) {
    /* Front-page hero grid → single column */
    .hero-section .container.hero-content {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
        padding-top: 64px !important;
        padding-bottom: 48px !important;
    }

    /* service-landing hero inner grid → single column */
    .hero-section .container > div[style*="grid-template-columns:1fr auto"] {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }

    /* Hide the quick-info card on mobile — not enough space */
    .hero-section .container > div > div[style*="min-width:220px"] {
        display: none !important;
    }
}

/* ── Services grid: 2-col on tablet, 1-col on mobile ───────────────────── */

@media (max-width: 900px) {
    /* front-page services grid */
    .services-grid,
    div[style*="grid-template-columns:repeat(3,1fr)"].services-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* testimonials/reviews grid */
    .testimonials-grid,
    div[style*="grid-template-columns:repeat(3,1fr)"].testimonials-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* process steps grid */
    div[style*="grid-template-columns:repeat(3,1fr)"][style*="position:relative"] {
        grid-template-columns: 1fr !important;
    }

    /* hide process connector line on mobile */
    div[style*="grid-template-columns:repeat(3,1fr)"][style*="position:relative"] > div[aria-hidden="true"] {
        display: none !important;
    }
}

@media (max-width: 600px) {
    /* services → 1 column on small mobile */
    .services-grid {
        grid-template-columns: 1fr !important;
    }

    .testimonials-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── Trust bar: 2-col on mobile ─────────────────────────────────────────── */

@media (max-width: 768px) {
    /* front-page trust bar */
    .trust-bar-section .trust-stats,
    .trust-bar-section div[style*="grid-template-columns:repeat(4,1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* landing page trust bar inline grid */
    div[style*="grid-template-columns:repeat(4,1fr)"][style*="border-bottom"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    /* trust bar → single column on very small screens */
    .trust-bar-section .trust-stats {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* ── Landing page problem/solution: single col on tablet ───────────────── */

@media (max-width: 768px) {
    /* problem/solution two-col */
    section div[style*="grid-template-columns:1fr 1fr"][style*="gap:64px"] {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }

    /* CTA strip flex → column */
    section[style*="background:#071220"] .container[style*="justify-content:space-between"] {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
}

/* ── footer: 2-col on tablet, 1-col on mobile ───────────────────────────── */

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 36px !important;
    }

    .footer-col--brand {
        grid-column: auto !important;
    }
}

/* ── Mega dropdown: ensure full-width clickable area on touch ───────────── */

@media (max-width: 1024px) {
    .mega-dropdown {
        width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
    }
}

/* ── Pulse animation for hero badge ────────────────────────────────────── */

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .4; }
}

/* ==========================================================================
   LANDING PAGE — RESPONSIVE OVERRIDES
   ========================================================================== */

/* Tablet: trust bar 2-column, cards stack */
@media (max-width: 900px) {
    .trust-inner { grid-template-columns: repeat(2, 1fr) !important; gap: 16px; }
    .cards-3 { grid-template-columns: 1fr 1fr !important; }
    .reviews-grid { grid-template-columns: 1fr 1fr !important; }
    .gif-layout { grid-template-columns: 1fr !important; text-align: center; }
    .gif-text-col h3 { text-align: center; }
    .gif-text-col .gif-sub { text-align: center; }
    .process-steps { flex-wrap: wrap; gap: 24px; }
    .process-step { flex: 0 0 calc(50% - 12px); }
    .process-step::after { display: none; }

    /* Einsatzgebiet-Karte: Map + Info-Karten untereinander */
    #einsatzgebiet .container > div[style*="grid-template-columns:1fr 340px"] {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    #fr24-map { height: 320px !important; }

    /* Kontakt: Telefon-Block + Formular untereinander */
    #kontakt .container > div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
}

/* Mobile: everything single column */
@media (max-width: 640px) {
    /* Hero */
    .hero-full { min-height: 420px; }
    .hero-img-bg { width: 100%; opacity: .35; }
    .hero-img-bg::after { background: linear-gradient(to right, #071220 0%, #071220 40%, rgba(7,18,32,.92) 70%, rgba(7,18,32,.85) 100%); }
    .hero-wrap { padding: 56px 20px 48px; }
    .hero-text-col { max-width: 100%; }
    .hero-btns { flex-direction: column; align-items: flex-start; }
    .hero-btns .btn-primary, .hero-btns .btn-secondary { width: 100%; justify-content: center; }

    /* Trust bar */
    .trust-inner { grid-template-columns: 1fr 1fr !important; gap: 12px; padding: 0 16px; }
    .trust-num { font-size: 22px; }

    /* Sections */
    .section, .section--gray, .section--dark, .faq-section { padding: 48px 0; }
    .cards-3, .cards-4 { grid-template-columns: 1fr !important; }
    .reviews-grid { grid-template-columns: 1fr !important; }
    .photo-strip { grid-template-columns: 1fr !important; }

    /* Einsatzgebiet-Karte */
    #fr24-map { height: 260px !important; }

    /* Process */
    .process-steps { flex-direction: column; }
    .process-step { flex: 1 1 100%; }
    .process-step::before { width: 36px; height: 36px; font-size: 14px; }

    /* GIF */
    .gif-frame { overflow-x: auto; max-width: 100%; }
    .gif-frame svg { max-width: 100%; height: auto; }

    /* CTA */
    .cta-inner { flex-direction: column; text-align: center; }
    .cta-inner .btn-primary { width: 100%; justify-content: center; font-size: 16px; padding: 16px; }

    /* FAQ */
    .faq { margin: 20px 16px 0; }
    .faq-q { font-size: 14px; padding: 16px 18px; }

    /* Related services */
    .section .cards-3 a { display: block; }

    /* Section title */
    .section-title { font-size: clamp(22px, 5vw, 36px) !important; }

    /* Container padding */
    .container { padding: 0 16px; }
}

/* Mobile: header adjustments */
@media (max-width: 640px) {
    .site-header .container { padding: 0 16px; }
    .header-cta { gap: 8px; }
    .header-phone { font-size: 13px; }
    .header-cta .btn-primary, .header-cta .btn.btn-primary {
        font-size: 13px;
        padding: 8px 14px;
    }
}

/* Mobile: breadcrumb */
@media (max-width: 640px) {
    .lp-breadcrumb { display: none; } /* Hide breadcrumb on mobile to save space */
}

/* Ensure gif-section doesn't overflow on mobile */
@media (max-width: 768px) {
    .gif-layout { gap: 28px; }
    .gif-anim-col { max-width: 100%; overflow-x: auto; }
}