/* ============================================================
   DW360 Responsive Styles
   Breakpoints: <992px (tablet), <768px (mobile)
   ============================================================ */

/* ---- Topbar: auf kleinen Screens ausblenden ---- */
@media (max-width: 991px) {
    #topbar { display: none !important; }
}

/* ---- Header Logo ---- */
@media (max-width: 991px) {
    /* Ein einziges Logo-Tag – Theme-Hide für Mobile überschreiben */
    header .logo-main { display: block !important; max-width: 160px !important; }
    header .logo-mobile { display: none !important; }
    #logo, #logo a { overflow: visible !important; }
    .de-flex-col:first-child { overflow: visible !important; }
}

/* ---- Mobile Navbar ---- */
@media (max-width: 991px) {
    /* Kontakt-Button im Header immer verstecken */
    header a.btn-main {
        display: none !important;
    }
    /* Mobile-Kontakt-Button nur im offenen Menü zeigen */
    header.menu-open li.mobile-kontakt-btn {
        display: block !important;
    }
    header.menu-open li.mobile-kontakt-btn a {
        display: block !important;
    }

    /* Hamburger: FA-Icon entfernen, 3 Balken per CSS-Gradient */
    #menu-btn:before {
        content: "" !important;
        display: none !important;
    }
    #menu-btn {
        width: 26px !important;
        height: 20px !important;
        color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        background:
            linear-gradient(#111, #111) 0 0   / 100% 2px no-repeat,
            linear-gradient(#111, #111) 0 50% / 100% 2px no-repeat,
            linear-gradient(#111, #111) 0 100%/ 100% 2px no-repeat
            !important;
        margin-top: 4px !important;
        flex-shrink: 0 !important;
        cursor: pointer !important;
    }
    /* Offener Zustand: X */
    #menu-btn.menu-open {
        background: none !important;
        position: relative !important;
    }
    #menu-btn.menu-open:after {
        content: "✕" !important;
        display: block !important;
        font-size: 20px !important;
        color: #111 !important;
        line-height: 1 !important;
        position: absolute !important;
        top: -2px !important;
        left: 0 !important;
    }

    /* Header über Hero-Content legen, Logo nicht abschneiden */
    header.header-light {
        position: relative !important;
        z-index: 1000 !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
        overflow: visible !important;
        /* JS setzt height:innerHeight wenn Menü offen – hier überschreiben */
        height: auto !important;
    }

    /* Menü nur anzeigen wenn header.menu-open (JS-gesetzt) */
    header:not(.menu-open) #mainmenu {
        display: none !important;
    }
    header.menu-open #mainmenu {
        display: block !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: auto !important;
        z-index: 998 !important;
        margin-top: 0 !important;
        background: #fff !important;
        box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
        border-top: 1px solid #eee !important;
        padding: 0 20px 12px 20px !important;
    }

    /* Mobile-Menü Hintergrund & Einträge */
    header.header-light.header-mobile #mainmenu {
        background: #fff !important;
        box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
        border-top: 1px solid #eee !important;
    }
    header.header-light.header-mobile #mainmenu a.menu-item {
        color: #111 !important;
    }
    header.header-light.header-mobile #mainmenu a.menu-item:hover {
        color: var(--primary-color) !important;
    }
    header.header-light.header-mobile #mainmenu li {
        border-color: #eee !important;
    }
}

/* ---- Content-Wrapper Abstand oben entfernen ---- */
@media (max-width: 991px) {
    #content { margin-top: 0 !important; padding-top: 0 !important; }
    body, #wrapper { margin: 0 !important; padding: 0 !important; width: 100% !important; }
    #dw360-hero { margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; width: 100% !important; }
    #dw360-hero .dw360-hero-bg { margin: 0 !important; border-radius: 0 !important; width: 100% !important; }
}

/* ---- Trust-Zeile untereinander ---- */
@media (max-width: 575px) {
    .dw360-trust-sep { display: none; }
    .dw360-trust-br { display: block; }
}
@media (min-width: 576px) {
    .dw360-trust-br { display: none; }
}

/* ---- Hero Section ---- */
@media (max-width: 991px) {
    #dw360-hero .col-lg-7 {
        padding-right: 15px !important;
    }
    #dw360-hero h1.slider-title {
        font-size: 36px !important;
    }
    #dw360-hero .col-lg-5 {
        margin-top: 32px !important;
    }
}
@media (max-width: 767px) {
    #dw360-hero h1.slider-title {
        font-size: 28px !important;
    }
    #dw360-hero .col-lg-7 p[style*="font-size: 20px"] {
        font-size: 16px !important;
    }
    .dw360-hero-bg {
        min-height: auto !important;
    }
}

/* ---- Managed Services Cards – Tablet & größer: normales Wrap-Grid ---- */
@media (min-width: 576px) {
    .dw360-cards-row {
        flex-wrap: wrap !important;
        overflow-x: hidden !important;
        scroll-snap-type: none !important;
    }
    .dw360-card, .dw360-card-core {
        scroll-snap-align: none !important;
    }
}
@media (max-width: 991px) and (min-width: 576px) {
    .dw360-cards-row {
        justify-content: center !important;
    }
    .dw360-card, .dw360-card-core {
        flex: 0 0 calc(50% - 10px) !important;
        min-width: 0 !important;
    }
}
/* Section nicht seitlich überlaufen lassen */
#managed-services { overflow-x: clip !important; overflow-y: visible !important; }

/* ---- Managed Services Pagination Dots – überall ausblenden ---- */
#ms-dots { display: none !important; }

/* ---- Managed Services Cards – Mobile Slider ---- */
@media (max-width: 575px) {
    .dw360-cards-row {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        gap: 14px !important;
        padding: 0 20px 12px !important;
        margin: 0 -16px !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }
    .dw360-cards-row::-webkit-scrollbar {
        display: none !important;
    }
    .dw360-card,
    .dw360-card-core {
        flex: 0 0 82% !important;
        min-width: 0 !important;
        scroll-snap-align: start !important;
    }
    /* Erste Karte (Core) etwas breiter da mehr Inhalt */
    .dw360-card-core {
        flex: 0 0 86% !important;
    }
}

/* ---- IT-Service & Projekte Cards ---- */
@media (max-width: 767px) {
    #it-service .col-lg-4 {
        margin-bottom: 16px;
    }
}
@media (max-width: 991px) {
    .it-service-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ---- So arbeiten wir – Step Cards ---- */
@media (max-width: 991px) {
    .dw360-steps-row {
        flex-direction: column !important;
        gap: 16px !important;
    }
    /* Pfeile zwischen Schritten ausblenden */
    .dw360-steps-row > div[style*="padding:0 8px"] {
        display: none !important;
    }
}

/* ---- IT-Check Button volle Breite & Textumbruch ---- */
@media (max-width: 575px) {
    #it-check .btn-main span {
        white-space: normal !important;
        word-break: break-word !important;
    }
    #it-check .btn-main {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ---- IT-Check CTA Box ---- */
@media (max-width: 991px) {
    #it-check .row.align-items-center > .col-lg-7,
    #it-check .row.align-items-center > .col-lg-5 {
        padding-bottom: 16px;
    }
}
@media (max-width: 767px) {
    #it-check div[style*="padding:44px 48px"] {
        padding: 28px 20px !important;
    }
}

/* ---- Nach dem IT-Check Grid ---- */
@media (max-width: 991px) {
    .dw360-itcheck-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 575px) {
    .dw360-itcheck-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ---- Warum DW360 ---- */
@media (max-width: 767px) {
    #warum-dw360 h2 {
        font-size: 28px !important;
    }
}

/* ---- Kontakt.html – Hero ---- */
@media (max-width: 767px) {
    section h1[style*="font-size:48px"] {
        font-size: 32px !important;
    }
}

/* ---- Kontakt.html – Kontaktinfo + Formular ---- */
@media (max-width: 991px) {
    #kontaktformular,
    .col-lg-4[style*="flex-direction:column"],
    .col-lg-8[style*="flex-direction:column"] {
        margin-bottom: 24px;
    }
}

/* ---- Kontakt.html – Direkt sprechen Grid ---- */
@media (max-width: 991px) {
    .dw360-contact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 575px) {
    .dw360-contact-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ---- Footer ---- */
@media (max-width: 991px) {
    /* Altes 3-Spalten-Layout */
    .dw360-footer-cols {
        flex-direction: column !important;
        gap: 28px !important;
    }
    .dw360-footer-cols > div {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .logo-footer { max-width: 180px !important; }

    /* Neues Footer-Layout – responsiv */
    .dw360-footer .container > div {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    footer { margin-top: 0 !important; }
    .dw360-footer { padding-top: 44px !important; }

    /* Logo-Spalte zuerst, zentriert */
    .dw360-ft-logo {
        order: 1 !important;
        width: 100% !important;
        padding: 68px 0 20px !important;
        text-align: center !important;
        align-items: center !important;
        border-bottom: 1px solid #e8e8e8 !important;
    }
    /* Unternehmen */
    .dw360-ft-nav {
        order: 2 !important;
        padding: 24px 0 0 !important;
        width: 100% !important;
        border-bottom: 1px solid #e8e8e8 !important;
        padding-bottom: 24px !important;
    }
    /* Kontakt */
    .dw360-ft-kontakt {
        order: 3 !important;
        padding: 24px 0 16px !important;
        width: 100% !important;
    }
    /* Vertikale Trennlinien ausblenden */
    .dw360-footer [style*="width:1px"] {
        display: none !important;
    }
}

/* ---- Subfooter ---- */
@media (max-width: 767px) {
    .subfooter .de-flex {
        flex-direction: column !important;
        gap: 8px !important;
        text-align: center;
    }
    .subfooter .menu-simple {
        justify-content: center !important;
    }
}

/* ---- Textumbruch & Overflow global ---- */
@media (max-width: 991px) {
    /* Textumbruch für alle Textelemente */
    p, li, h1, h2, h3, h4, h5, td, th {
        overflow-wrap: break-word !important;
        word-break: break-word !important;
        white-space: normal !important;
        min-width: 0 !important;
    }
    /* Flex-Kinder dürfen schrumpfen, außer sie verbieten es selbst (z.B. runde Nummern-Badges) */
    .d-flex > *, [style*="display:flex"] > *, [style*="display: flex"] > * {
        min-width: 0 !important;
    }
    .d-flex > *:not([style*="flex-shrink:0"]):not([style*="flex-shrink: 0"]),
    [style*="display:flex"] > *:not([style*="flex-shrink:0"]):not([style*="flex-shrink: 0"]),
    [style*="display: flex"] > *:not([style*="flex-shrink:0"]):not([style*="flex-shrink: 0"]) {
        flex-shrink: 1 !important;
    }
    /* Sections nicht seitlich abschneiden */
    section {
        overflow-x: clip !important;
    }
}

/* ---- Allgemeine Abstände auf Mobile ---- */
@media (max-width: 767px) {
    section {
        padding-left: 16px;
        padding-right: 16px;
    }
    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    /* Überschriften allgemein */
    h2[style*="font-size:42px"] { font-size: 28px !important; }
    h2[style*="font-size:38px"] { font-size: 26px !important; }
    h3[style*="font-size:30px"] { font-size: 22px !important; }
}


/* ============================================================
   KONTAKT.HTML
   ============================================================ */

/* Hero H1 skalieren */
@media (max-width: 767px) {
    h1[style*="font-size:48px"] {
        font-size: 30px !important;
        line-height: 1.2 !important;
    }
    /* Zeilenumbruch im Hero-Text auf Mobile ausblenden */
    h1[style*="font-size:48px"] ~ p br {
        display: none;
    }
}

/* Formular-Card Innenabstand auf Mobile reduzieren */
@media (max-width: 575px) {
    div[style*="padding:36px"] {
        padding: 20px 16px !important;
    }
    /* Submit-Button volle Breite */
    #kontakt-submit-btn {
        width: 100% !important;
        justify-content: center !important;
    }
    /* Datenschutz + Captcha untereinander */
    #kontakt-formular div[style*="flex-wrap:wrap"][style*="gap:16px"] {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
}

/* Turnstile auf sehr kleinen Screens skalieren */
@media (max-width: 380px) {
    .cf-turnstile {
        transform: scale(0.85);
        transform-origin: left top;
    }
}

/* Kontakt-Info-Box Innenabstand */
@media (max-width: 767px) {
    div[style*="background:#15300f"][style*="border-radius:16px"] {
        padding: 20px 16px !important;
    }
}

/* Kontakt-Karten-Grid: Hero-Section-Padding */
@media (max-width: 767px) {
    section[style*="padding:70px 0"] {
        padding: 40px 0 !important;
    }
    section[style*="padding:60px 0"] {
        padding: 36px 0 !important;
    }
}

/* ============================================================
   GROSSE BILDSCHIRME (≥ 1400px)
   ============================================================ */
@media (min-width: 1400px) {
    #dw360-hero h1.slider-title {
        font-size: 60px !important;
    }
}

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

/* ============================================================
   IMPRESSUM / DATENSCHUTZ – Legal Pages
   ============================================================ */
@media (max-width: 767px) {
    .legal-content h2 {
        font-size: 17px !important;
        margin: 24px 0 10px !important;
    }
    .legal-content p,
    .legal-content li {
        font-size: 14px !important;
    }
}

/* ---- Burger-Button vertikal mittig im Header ---- */
@media (max-width: 993px) {
    #menu-btn { margin-top: -12px !important; }
}

/* ---- Scroll-Deko (Striche/Laufschrift) nur am Desktop ---- */
@media (max-width: 993px) {
    .scrollbar-v, .float-text { display: none !important; }
}

/* ---- WOW-Einblendungen nur am Desktop: mobil sofort sichtbar ---- */
@media (max-width: 993px) {
    .wow { visibility: visible !important; -webkit-animation: none !important; animation: none !important; }
}

/* ---- Rendering-Diaet fuers Handy: Glas-, Glow- und Masken-Effekte kosten beim schnellen Scrollen ---- */
@media (max-width: 993px) {
    header, header.smaller, .dw360-advice-card, .ic-assessment {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
    .dw360-hero-glow { display: none !important; }
    .dw-packages-section { background: #fbfcf9 !important; }
    .dw-packages-section::before { display: none !important; }
    .dw-m365-teaser { background: var(--dark-section-bg) !important; }
    .dw-package-card, .dw360-advice-card { box-shadow: 0 8px 22px rgba(23,49,17,.10) !important; }
    .ic-assessment { box-shadow: 0 10px 26px rgba(0,0,0,.14) !important; }
}

/* Laufband pausiert, wenn es nicht im Bild ist (alle Geraete) */
.tp-marquee-track.dw-paused { animation-play-state: paused !important; }

/* ---- Radiale Verlaufs-Akzente nur am Desktop: mobil zaehlt fluessiges Rastern, besonders beim Overscroll am Seitenende ---- */
@media (max-width: 993px) {
    .bl-hero, .ic-cta, .ic-hero, .kt-band, .kt-final, .kt-hero,
    .m365-hero, .nf-hero, .ou-disc-panel, .ou-hero, .pv-cta, .pv-hero,
    .svc-cta, .svc-hero, .svc-steps, .tp-cta, .tp-hero {
        background: var(--dark-section-bg) !important;
    }
    .ic-result { background: #fff !important; }
    .ou-founder { background: #f4f7f2 !important; }
    .tp-approach { background: #fbfdf9 !important; }
    .dw360-check-panel { background: linear-gradient(135deg,#f9fcf8,#eef7ec) !important; }
    .dw360-hero-bg { background: linear-gradient(118deg, #082b18 0%, #0b3b20 48%, #0b311c 100%) !important; }
    .dw-server-panel::before, .svc-hero-orb { display: none !important; }
}