/* ==========================================================================
   TEAM „N” – RESPONSIVE LAYER
   Desktop · Laptop · Tablet · Smartphone (iPhone, Samsung Galaxy, Pixel, Fold)

   Loaded LAST (after teamn.css and page-level styles) so it can normalise
   layout across all resolutions without touching the brand design.

   Breakpoints (Bootstrap 5.3 + ultra-wide):
     xs  <  576px   Smartphones portrait (Galaxy Fold 280 → iPhone Pro Max 430)
     sm  ≥  576px   Large phones / phones landscape
     md  ≥  768px   Tablets portrait (iPad mini, iPad Air, Galaxy Tab)
     lg  ≥  992px   Tablets landscape / small laptops
     xl  ≥ 1200px   Laptops (1280, 1366, 1440)
     xxl ≥ 1400px   Desktop
     3xl ≥ 1600px   Large desktop (1680, 1920)
     4xl ≥ 1920px   Full HD / QHD / 4K
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FOUNDATIONS
   -------------------------------------------------------------------------- */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Prevent horizontal scrolling on every device without breaking the sticky
   header (overflow: clip does not create a scroll container). */
html,
body {
    max-width: 100%;
}

@supports (overflow: clip) {
    html,
    body {
        overflow-x: clip;
    }
}

body {
    overflow-wrap: break-word;
    -webkit-tap-highlight-color: rgba(2, 132, 199, 0.12);
}

img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
}

/* E-mail addresses / URLs have no natural break points – let them wrap */
a[href^="mailto:"],
a[href^="http"] {
    overflow-wrap: anywhere;
}

.d-flex > div:has(a[href^="mailto:"]),
.d-flex > .flex-grow-1 {
    min-width: 0;
}

/* Minimum readable size for micro-badges on phones (≈ 11px) */
@media (max-width: 767.98px) {
    .badge[style*="font-size: 0.6"],
    .badge[style*="font-size:0.6"],
    .small > .badge {
        font-size: 0.7rem !important;
    }
}

/* "Hover zum Pausieren" hints make no sense on touch screens */
@media (hover: none) {
    .badge:has(> .bi-pause-circle) {
        display: none !important;
    }
}

h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    overflow-wrap: break-word;
    text-wrap: balance;
}

p,
li {
    text-wrap: pretty;
}

/* Fluid headline scale – smooth between 320px and 1920px */
.display-5 {
    font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3rem);
    line-height: 1.18;
}

.display-6 {
    font-size: clamp(1.6rem, 1.15rem + 1.7vw, 2.5rem);
    line-height: 1.2;
}

/* Very long German compound words in small labels may hyphenate on phones */
@media (max-width: 575.98px) {
    .calc-stat-label,
    .pg-result-title,
    .dropdown-item-title,
    .badge {
        -webkit-hyphens: auto;
        hyphens: auto;
    }
}

/* Modal header titles inherit the dark heading colour from teamn.css –
   on the dark gradient header they must be white. */
.modal-header.text-white h1,
.modal-header.text-white h2,
.modal-header.text-white h3,
.modal-header.text-white h4,
.modal-header.text-white h5,
.modal-header.text-white .modal-title {
    color: #ffffff;
}

/* Honeypot-Feld gegen Spam-Bots (für Menschen unsichtbar) */
.hp-field {
    position: absolute !important;
    left: -10000px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Eigene Sicherheitsprüfung „Ich bin kein Roboter“ (wwwroot/js/formular.js) */
.tn-captcha {
    max-width: 420px;
}

.tn-captcha-box {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-height: 60px;
    padding: 0.7rem 1rem;
    background: #f8fafc;
    border: 1.5px solid #cbd5e1;
    border-radius: 12px;
    color: #1e293b;
    font-weight: 600;
    font-size: 0.98rem;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.tn-captcha-box:hover { border-color: #0284c7; background: #fff; }
.tn-captcha-box:focus-visible { outline: 3px solid rgba(2, 132, 199, 0.4); outline-offset: 2px; }

.tn-captcha-check {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 7px;
    border: 2px solid #94a3b8;
    background: #fff;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 1.2rem;
    position: relative;
    transition: all 0.2s ease;
}

.tn-captcha-check .bi { opacity: 0; transform: scale(0.5); transition: all 0.25s ease; }

.tn-captcha-label { flex: 1; min-width: 0; line-height: 1.3; }

.tn-captcha-shield { color: #0284c7; font-size: 1.35rem; opacity: 0.85; }

.tn-captcha-foot {
    font-size: 0.72rem;
    color: #64748b;
    margin-top: 0.35rem;
    padding-left: 0.2rem;
}

.tn-captcha.is-verifying .tn-captcha-check {
    border-color: #bae6fd;
    border-top-color: #0284c7;
    border-radius: 50%;
    animation: tnCaptchaSpin 0.8s linear infinite;
}

.tn-captcha.is-verified .tn-captcha-box {
    border-color: #10b981;
    background: #ecfdf5;
    cursor: default;
}

.tn-captcha.is-verified .tn-captcha-check {
    background: #10b981;
    border-color: #10b981;
}

.tn-captcha.is-verified .tn-captcha-check .bi { opacity: 1; transform: scale(1); }
.tn-captcha.is-verified .tn-captcha-label { color: #047857; }
.tn-captcha.is-verified .tn-captcha-shield { color: #10b981; }

.tn-captcha.is-error .tn-captcha-box { border-color: #f87171; background: #fef2f2; }
.tn-captcha.is-error .tn-captcha-label { color: #b91c1c; font-size: 0.9rem; }

@keyframes tnCaptchaSpin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .tn-captcha.is-verifying .tn-captcha-check { animation-duration: 2.5s; }
}

/* --------------------------------------------------------------------------
   2. UTILITIES USED IN VIEWS (were missing → spacing silently ignored)
   -------------------------------------------------------------------------- */
.gap-1\.5 { gap: 0.375rem !important; }
.gap-2\.5 { gap: 0.75rem !important; }
.gap-3\.5 { gap: 1.25rem !important; }
.p-2\.5 { padding: 0.75rem !important; }
.px-2\.5 { padding-left: 0.625rem !important; padding-right: 0.625rem !important; }
.px-3\.5 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
.py-0\.5 { padding-top: 0.125rem !important; padding-bottom: 0.125rem !important; }
.py-1\.5 { padding-top: 0.375rem !important; padding-bottom: 0.375rem !important; }
.py-2\.5 { padding-top: 0.625rem !important; padding-bottom: 0.625rem !important; }
.pt-2\.5 { padding-top: 0.625rem !important; }
.mt-0\.5 { margin-top: 0.125rem !important; }
.me-0\.5 { margin-right: 0.125rem !important; }
.me-1\.5 { margin-right: 0.375rem !important; }
.ms-n2 { margin-left: -0.5rem !important; }
.inset-0 { inset: 0 !important; }
.tracking-wider { letter-spacing: 0.06em; }
.shadow-xs { box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important; }
.shadow-md { box-shadow: 0 8px 24px rgba(15, 23, 42, 0.07) !important; }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(6, 56, 93, 0.35) !important; }
.backdrop-blur {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.hover-opacity-100:hover { opacity: 1 !important; }

/* --------------------------------------------------------------------------
   3. CONTAINERS & GRID GUTTERS
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    /* 16px side margins = native iOS / Android content inset */
    .container,
    .container-fluid,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* g-5 (3rem) gutters create negative margins wider than the container
       padding → horizontal overflow on every phone. */
    .row.g-5,
    .row.gx-5 {
        --bs-gutter-x: 1.5rem;
    }

    .row.g-5,
    .row.gy-5 {
        --bs-gutter-y: 1.75rem;
    }

    .row.g-4 {
        --bs-gutter-y: 1.25rem;
    }
}

/* Respect iPhone notch / Dynamic Island in landscape (viewport-fit=cover) */
@supports (padding: max(0px)) {
    @media (max-width: 991.98px) {
        .container,
        .container-fluid,
        .container-xl {
            padding-left: max(1rem, env(safe-area-inset-left));
            padding-right: max(1rem, env(safe-area-inset-right));
        }
    }
}

/* --------------------------------------------------------------------------
   4. BADGES, PILLS & CHIPS – never push the layout wider than the screen
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .badge {
        white-space: normal;
        max-width: 100%;
        line-height: 1.35;
    }

    .pill-tag {
        font-size: 0.72rem;
        letter-spacing: 0.03em;
        max-width: 100%;
        flex-wrap: wrap;
    }

    .btn {
        white-space: normal;
    }

    .btn-lg {
        max-width: 100%;
    }
}

/* --------------------------------------------------------------------------
   5. TOPBAR & MAIN NAVIGATION
   -------------------------------------------------------------------------- */
.teamn-navbar .nav-link,
.teamn-navbar .nav-link:hover,
.teamn-navbar .nav-link:focus,
.teamn-navbar .nav-link.active {
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.nav-label-short { display: none; }

/* Karriere dropdown (desktop panel) */
@media (min-width: 1200px) {
    .teamn-dropdown-karriere {
        min-width: 360px;
        padding: 0.85rem;
        border-radius: 18px;
        border: 1px solid rgba(15, 23, 42, 0.08) !important;
        box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.22), 0 0 1px 1px rgba(15, 23, 42, 0.05) !important;
        animation: fadeInSlide 0.22s ease-out;
        margin-top: 0.4rem !important;
    }
}

/* Large desktop ≥ 1600px: full navigation with icons */
@media (min-width: 1600px) {
    .teamn-navbar .nav-link {
        padding-left: 0.65rem !important;
        padding-right: 0.65rem !important;
        font-size: 0.95rem !important;
    }
}

/* Laptop & desktop 1200–1599px: compact navigation that always fits */
@media (min-width: 1200px) and (max-width: 1599.98px) {
    .teamn-navbar .navbar-brand {
        margin-right: 1rem;
    }

    .teamn-navbar .navbar-brand img {
        height: 62px;
    }

    .teamn-navbar .navbar-nav {
        gap: 0 !important;
    }

    .teamn-navbar .nav-link {
        font-size: 0.9rem !important;
        padding-left: 0.55rem !important;
        padding-right: 0.55rem !important;
    }

    .teamn-navbar .nav-link > i.bi:not(.bi-chevron-down) {
        display: none !important;
    }

    .teamn-navbar .nav-link.active::after {
        left: 0.55rem;
        right: 0.55rem;
    }

    .teamn-navbar .nav-actions {
        gap: 0.4rem !important;
    }

    .btn-nav-notruf,
    .btn-nav-inquiry {
        font-size: 0.8rem;
        padding: 0.45rem 0.8rem;
    }
}

/* Laptop 1200–1399px (1280 / 1366): short labels so the full menu fits */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .nav-label-long { display: none; }
    .nav-label-short { display: inline; }
}

/* Topbar on small laptops / tablets landscape */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .ihc-topbar {
        font-size: 0.78rem;
    }

    .ihc-topbar .gap-4 {
        gap: 1rem !important;
    }
}

/* Mobile & tablet navigation (< 1200px) – clean app-style menu */
@media (max-width: 1199.98px) {
    .teamn-navbar {
        padding: 0.4rem 0;
    }

    .teamn-navbar .navbar-brand {
        margin-right: 0.5rem;
    }

    .teamn-navbar .navbar-toggler {
        width: 48px;
        height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        margin-right: -0.4rem;
    }

    .teamn-navbar .navbar-toggler:focus-visible {
        outline: 2px solid #0284c7;
        outline-offset: 2px;
    }

    .teamn-navbar .navbar-collapse {
        max-height: calc(100vh - 76px);
        max-height: calc(100dvh - 76px);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        border-top: 1px solid #e2e8f0;
        margin-top: 0.4rem;
        padding: 0.6rem 0 1rem;
    }

    .teamn-navbar .navbar-nav {
        align-items: stretch !important;
        gap: 2px !important;
        margin: 0 !important;
        width: 100%;
    }

    .teamn-navbar .nav-item {
        display: block;
        width: 100%;
    }

    .teamn-navbar .nav-link {
        display: flex !important;
        width: 100%;
        justify-content: flex-start;
        align-items: center;
        min-height: 48px;
        padding: 0.7rem 0.85rem !important;
        font-size: 1.02rem !important;
        border-radius: 12px;
        color: #1e293b !important;
    }

    .teamn-navbar .nav-link:hover,
    .teamn-navbar .nav-link:focus-visible {
        background-color: #f1f5f9 !important;
    }

    .teamn-navbar .nav-link.active {
        background-color: #f0f9ff !important;
        color: #0284c7 !important;
    }

    .teamn-navbar .nav-link.active::after {
        left: 0;
        right: auto;
        top: 0.7rem;
        bottom: 0.7rem;
        width: 3px;
        height: auto;
    }

    .teamn-navbar .nav-link > i.bi:not(.bi-chevron-down) {
        width: 1.35rem;
        text-align: center;
        margin-right: 0.35rem !important;
    }

    .teamn-navbar .dropdown-toggle .bi-chevron-down {
        margin-left: auto !important;
        font-size: 0.85rem !important;
        transition: transform 0.2s ease;
    }

    .teamn-navbar .dropdown-toggle.show .bi-chevron-down {
        transform: rotate(180deg);
    }

    /* Mega menu & Karriere menu rendered inline inside the mobile menu */
    .teamn-navbar .teamn-dropdown-karriere {
        position: static !important;
        inset: auto !important;
        transform: none !important;
        min-width: 0 !important;
        width: 100%;
        margin: 0.25rem 0 0.5rem !important;
        padding: 0.85rem;
        border: 1px solid #e2e8f0 !important;
        border-radius: 14px;
        box-shadow: none !important;
    }

    .teamn-dropdown-karriere .mega-category-header .badge {
        white-space: nowrap;
        flex-shrink: 0;
    }

    .teamn-navbar .teamn-dropdown-mega-menu {
        position: static !important;
        inset: auto !important;
        transform: none !important;
        min-width: 0 !important;
        width: 100%;
        margin: 0.25rem 0 0.5rem !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 14px;
        box-shadow: none !important;
        animation: none;
    }

    .teamn-dropdown-mega-menu .mega-col {
        padding: 0.85rem !important;
    }

    .teamn-dropdown-mega-menu .mega-category-header {
        gap: 0.5rem;
    }

    .teamn-dropdown-mega-menu .mega-category-header .badge {
        white-space: nowrap;
        -webkit-hyphens: manual;
        hyphens: manual;
        flex-shrink: 0;
    }

    .dropdown-item-custom {
        padding: 0.6rem 0.5rem;
        min-height: 48px;
    }

    .dropdown-item-custom:hover {
        transform: none;
    }

    .teamn-dropdown-mega-menu .mega-menu-footer {
        flex-direction: column;
        align-items: stretch !important;
    }

    .teamn-dropdown-mega-menu .mega-menu-footer > div {
        flex-wrap: wrap;
        row-gap: 0.5rem !important;
    }

    .teamn-dropdown-mega-menu .mega-menu-footer .btn {
        justify-content: center;
        padding-top: 0.6rem;
        padding-bottom: 0.6rem;
    }

    /* Action buttons → 2 equal buttons, emergency call first */
    .teamn-navbar .nav-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem !important;
        margin-top: 0.85rem !important;
        padding-top: 0.85rem;
        border-top: 1px solid #f1f5f9;
    }

    .teamn-navbar .nav-actions > * {
        justify-content: center;
        min-height: 48px;
        padding: 0.7rem 1rem;
        font-size: 0.92rem;
        border-radius: 12px;
    }

    .teamn-navbar .nav-actions .btn-nav-notruf {
        order: -1;
    }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    /* Tablets: both mega-menu columns side by side */
    .teamn-dropdown-mega-menu .mega-col {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .teamn-dropdown-mega-menu .mega-col:first-child {
        border-right: 1px solid rgba(15, 23, 42, 0.08);
    }

}

@media (max-width: 575.98px) {
    .teamn-navbar .navbar-brand img {
        height: 52px;
    }

    .teamn-navbar .navbar-collapse {
        max-height: calc(100vh - 66px);
        max-height: calc(100dvh - 66px);
    }
}

@media (max-width: 359.98px) {
    .teamn-navbar .navbar-brand img {
        height: 46px;
    }

    .teamn-navbar .nav-actions {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   6. HOME HERO
   -------------------------------------------------------------------------- */
.ihc-hero-title {
    font-size: clamp(2rem, 1.3rem + 2.9vw, 3.25rem);
}

.ihc-hero-title-sub {
    font-size: clamp(1.08rem, 0.95rem + 0.7vw, 1.45rem);
}

@media (min-width: 1600px) {
    .ihc-hero-section {
        min-height: 620px;
    }
}

@media (max-width: 991.98px) {
    .ihc-hero-section {
        min-height: 0;
        align-items: stretch;
    }

    .ihc-hero-bg {
        object-position: 72% center;
    }

    .ihc-hero-overlay {
        background: linear-gradient(180deg, rgba(6, 40, 70, 0.80) 0%, rgba(6, 40, 70, 0.62) 42%, rgba(6, 40, 70, 0.84) 100%);
    }

    .ihc-hero-content {
        padding-top: 2.25rem;
        padding-bottom: 2rem;
    }

    .ihc-hero-subtitle {
        max-width: none;
    }
}

/* Laptops / tablets landscape: both hero CTAs stay on one line */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .btn-ihc-hero-primary {
        font-size: 0.96rem;
        padding: 0.8rem 1.4rem;
    }

    .btn-ihc-hero-phone {
        font-size: 0.96rem;
        padding: 0.8rem 1.3rem;
    }
}

/* Trust badges: icon above text when the card gets narrow */
@media (min-width: 576px) and (max-width: 1399.98px) {
    .ihc-hero-badge-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 0.9rem 1rem;
    }
}

@media (max-width: 767.98px) {
    .ihc-hero-badges-row .col-6 {
        width: 50%;
    }
}

@media (max-width: 575.98px) {
    .ihc-hero-content {
        padding-top: 1.75rem;
        padding-bottom: 1.75rem;
    }

    .ihc-hero-kicker-pill {
        padding: 0.4rem 0.85rem;
        margin-bottom: 0.9rem;
        max-width: 100%;
    }

    .ihc-hero-kicker-text {
        font-size: 0.7rem;
        letter-spacing: 0.05em;
        line-height: 1.45;
    }

    .ihc-hero-title {
        margin-bottom: 0.85rem;
    }

    .ihc-hero-subtitle {
        font-size: 0.97rem;
        line-height: 1.6;
        margin-bottom: 1.25rem;
    }

    .ihc-hero-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 0.6rem;
    }

    .btn-ihc-hero-primary,
    .btn-ihc-hero-phone {
        width: 100%;
        justify-content: center;
        padding: 0.8rem 1.1rem;
        font-size: 0.98rem;
    }

    .ihc-hero-trust-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
        font-size: 0.8rem;
        margin-bottom: 0.25rem;
    }

    .ihc-hero-badges-row {
        margin-top: 1.25rem;
    }

    .ihc-hero-badge-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
        padding: 0.8rem 0.85rem;
    }

    .ihc-hero-badge-icon {
        font-size: 1.35rem;
    }

    .ihc-hero-badge-title {
        font-size: 0.88rem;
    }

    .ihc-hero-badge-sub {
        font-size: 0.74rem;
    }
}

/* --------------------------------------------------------------------------
   7. SECTIONS, CARDS & CONTENT BLOCKS
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .pathway-section,
    .guarantee-section {
        padding: 3rem 0 !important;
    }

    .testimonials-section,
    .google-reviews-section,
    .ihc-faq-section,
    .region-section {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .pathway-step-card,
    .guarantee-card,
    .testimonial-card,
    .care-card,
    .step-card {
        padding: 1.5rem 1.25rem;
        border-radius: 18px;
    }

    .pathway-step-title,
    .guarantee-card-title {
        font-size: 1.15rem;
    }

    .calc-container {
        padding: 1.25rem;
        border-radius: 20px;
    }

    .region-box {
        padding: 2rem 1.25rem;
        border-radius: 20px;
    }

    .ihc-about-banner {
        padding: 2rem 1.35rem;
        min-height: 0;
    }

    .ihc-about-content [style*="nowrap"] {
        white-space: normal !important;
    }

    .ihc-about-content h2 > span[style*="1.35rem"] {
        font-size: 1.05rem !important;
    }

    .btn-ihc-banner {
        display: flex;
        justify-content: center;
        text-align: center;
        width: 100%;
        font-size: 0.9rem;
        padding: 0.75rem 1.1rem;
    }

    .ihc-values-block {
        padding: 1.75rem 1.25rem;
        gap: 1.25rem 1.5rem;
    }

    .ihc-value-item {
        font-size: 1.35rem;
    }

    .ihc-callout-content {
        padding: 3rem 0;
    }

    .ihc-callout-overlay {
        background: linear-gradient(180deg, rgba(6, 56, 93, 0.92) 0%, rgba(11, 100, 155, 0.86) 100%);
    }

    .teamn-accordion .accordion-button,
    .ihc-accordion .accordion-button {
        font-size: 0.98rem;
        padding: 1rem 1.1rem;
    }

    .teamn-accordion .accordion-body,
    .ihc-accordion .accordion-body {
        padding: 1rem 1.1rem;
    }

    .ihc-service-card-top {
        height: 190px;
    }
}

/* Stat cards next to the "Über TEAM N" banner */
@media (min-width: 576px) and (max-width: 991.98px) {
    .ihc-stat-stack {
        flex-direction: row !important;
        height: auto !important;
    }

    .ihc-stat-stack > .ihc-stat-card {
        flex: 1 1 0;
        padding: 1.35rem 1rem;
    }
}

@media (max-width: 575.98px) {
    .ihc-stat-stack > .ihc-stat-card {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        text-align: left;
        column-gap: 0.85rem;
        padding: 1rem 1.15rem;
    }

    .ihc-stat-stack .ihc-stat-icon {
        font-size: 1.75rem;
        margin-bottom: 0;
    }

    .ihc-stat-stack .ihc-stat-val {
        font-size: 1.45rem;
        margin-bottom: 0;
    }

    .ihc-stat-stack .ihc-stat-label {
        flex: 1 0 100%;
        font-size: 0.86rem;
        padding-left: calc(1.75rem + 0.85rem);
    }
}

/* Google trust bar (home) */
@media (max-width: 767.98px) {
    .google-trust-bar-full {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.75rem;
        padding: 1rem 1.1rem !important;
    }

    .google-trust-bar-full > div:last-child {
        margin-left: 0 !important;
        padding-left: calc(44px + 1.25rem);
    }

    .google-trust-bar-full > div:first-child {
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        max-width: 100%;
    }

    .google-trust-bar-full > div:first-child > div:last-child {
        min-width: 0;
    }
}

@media (max-width: 359.98px) {
    .google-trust-bar-full > div:last-child {
        padding-left: 0;
    }

    .google-trust-bar-full > div:first-child > .rounded-circle {
        display: none !important;
    }
}

/* Button groups: wrap instead of overflowing on narrow phones */
@media (max-width: 575.98px) {
    .d-flex:has(> .btn + .btn),
    .d-flex:has(> .btn-lg) {
        flex-wrap: wrap;
    }

    .btn.px-5,
    .btn-lg.px-5 {
        padding-left: 1.4rem !important;
        padding-right: 1.4rem !important;
    }

    /* Primary form submit buttons span the full width */
    form .btn-lg[type="submit"],
    form .btn-care-primary[type="submit"],
    form button[type="submit"].btn-lg {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

/* Leadership / video card */
@media (max-width: 575.98px) {
    .leadership-bio-panel {
        padding: 1.25rem !important;
    }

    .leadership-video-screen .video-play-btn-pulse {
        width: 60px;
        height: 60px;
        font-size: 1.75rem;
    }

    .leadership-video-screen .badge {
        font-size: 0.7rem;
    }
}

@media (max-width: 359.98px) {
    /* Galaxy Fold cover screen / iPhone SE 1st gen: keep the video clean */
    .leadership-video-screen > .position-absolute.top-0,
    .leadership-video-screen > .position-absolute.bottom-0,
    .podcast-video-preview > .position-absolute.bottom-0 {
        display: none !important;
    }
}

/* --------------------------------------------------------------------------
   8. SERVICE FILTER – horizontal swipe chips on phones
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .service-filter-wrapper {
        justify-content: flex-start;
        margin: 0 -1rem 1.5rem;
    }

    .service-filter-nav {
        flex-wrap: nowrap;
        width: 100%;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        scroll-padding-inline: 1rem;
        scrollbar-width: none;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 0.25rem 1rem;
        gap: 0.5rem;
    }

    .service-filter-nav::-webkit-scrollbar {
        display: none;
    }

    .service-filter-btn {
        flex: 0 0 auto;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        scroll-snap-align: start;
        min-height: 44px;
        padding: 0.55rem 1rem;
        font-size: 0.86rem;
    }
}

/* --------------------------------------------------------------------------
   9. PFLEGEGRAD-RECHNER (home widget & dedicated page)
   -------------------------------------------------------------------------- */
.calc-stat-box {
    height: 100%;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.25rem 1.25rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.calc-stat-box:hover {
    border-color: #7dd3fc;
    box-shadow: 0 8px 22px rgba(6, 56, 93, 0.08);
}

.calc-stat-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.3;
}

.calc-stat-number {
    font-family: var(--font-heading);
    font-size: clamp(1.45rem, 1.15rem + 1vw, 2rem);
    font-weight: 800;
    color: var(--care-blue-dark);
    line-height: 1.1;
}

.calc-stat-desc {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.4;
}

@media (max-width: 575.98px) {
    .calc-selector {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 0.4rem;
        margin-bottom: 1.25rem;
    }

    .pg-btn {
        padding: 0.7rem 0.25rem;
        border-radius: 12px;
    }

    .pg-btn-label {
        display: none;
    }

    .calc-result-card > .row > [class*="col-sm-6"] {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .calc-result-card > .row {
        --bs-gutter-x: 0.65rem;
        --bs-gutter-y: 0.65rem;
    }

    .calc-stat-box {
        padding: 0.9rem 0.85rem;
        border-radius: 14px;
    }

    .calc-stat-label {
        font-size: 0.72rem;
        letter-spacing: 0.01em;
    }

    .calc-stat-number {
        font-size: 1.3rem;
    }

    .calc-stat-desc {
        font-size: 0.74rem;
    }

    .calc-action-bar {
        align-items: stretch !important;
        text-align: left;
    }

    .calc-action-bar .btn {
        width: 100%;
    }

    /* Pflegebedarf-Check teaser inside the calculator */
    .calc-container > .rounded-4.border.bg-white {
        padding: 1.25rem !important;
        align-items: stretch !important;
    }

    .calc-container > .rounded-4.border.bg-white > .d-flex:first-child {
        flex-direction: column;
        align-items: flex-start !important;
    }

    .calc-container > .rounded-4.border.bg-white .btn {
        width: 100%;
        justify-content: center;
    }

    .calc-container > .rounded-4.border.bg-white > .d-flex:last-child {
        white-space: normal !important;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .pg-btn-label {
        font-size: 0.68rem;
        display: block;
        line-height: 1.25;
    }
}

/* Pflegebedarf-Check wizard */
@media (max-width: 575.98px) {
    .wizard-btn-opt {
        padding: 0.85rem !important;
        gap: 0.75rem !important;
    }

    .wizard-btn-opt .fs-5 {
        font-size: 1.02rem !important;
        line-height: 1.3;
    }

    .wizard-btn-opt > .rounded-circle {
        width: 42px !important;
        height: 42px !important;
    }

    .wizard-btn-opt > .rounded-circle .fs-4 {
        font-size: 1.2rem !important;
    }
}

/* --------------------------------------------------------------------------
   10. GOOGLE REVIEWS MARQUEE
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .google-review-card {
        width: min(84vw, 330px);
        min-width: min(84vw, 330px);
        max-width: min(84vw, 330px);
        padding: 1.35rem 1.2rem;
    }

    .reviews-marquee-track {
        gap: 1rem;
    }

    .google-trust-badge-header {
        flex-wrap: wrap;
        gap: 0.75rem;
        padding: 0.85rem 1rem;
        width: 100%;
    }

    .marquee-controls-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.6rem;
    }

    .marquee-control-btn {
        justify-content: center;
        min-height: 44px;
    }
}

/* --------------------------------------------------------------------------
   11. PODCAST & MEDIATHEK
   -------------------------------------------------------------------------- */
.podcast-playlist-card > .flex-grow-1 {
    min-width: 0;
}

.podcast-playlist-card .d-flex.justify-content-between {
    flex-wrap: wrap;
    row-gap: 0.25rem;
}

.podcast-featured-card .btn {
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .podcast-video-preview {
        height: auto !important;
        aspect-ratio: 16 / 10;
    }

    .podcast-featured-card > .p-4 {
        padding: 1.25rem !important;
    }

    .podcast-featured-card .border-top.mt-auto {
        flex-wrap: wrap;
        gap: 0.6rem;
    }

    .podcast-featured-card .border-top.mt-auto > .btn {
        flex: 1 1 auto;
        justify-content: center;
    }

    .podcast-featured-card .d-flex.align-items-center.gap-2.mb-2 {
        flex-wrap: wrap;
    }
}

@media (max-width: 575.98px) {
    .podcast-playlist-card {
        padding: 0.75rem !important;
        gap: 0.75rem !important;
    }

    .podcast-playlist-card > .position-relative.flex-shrink-0 {
        width: 92px !important;
        height: 76px !important;
    }

    .podcast-playlist-card h6 {
        font-size: 0.88rem !important;
    }

    .podcast-vertical-marquee-wrapper {
        height: 420px;
    }
}

/* --------------------------------------------------------------------------
   12. FLOATING ACTIONS (KI-Chat, Scroll-to-top) & CHAT WINDOW
   -------------------------------------------------------------------------- */
.floating-chat-trigger {
    bottom: calc(25px + env(safe-area-inset-bottom));
    right: calc(76px + env(safe-area-inset-right));
}

.btn-scroll-top {
    bottom: calc(25px + env(safe-area-inset-bottom));
    right: calc(22px + env(safe-area-inset-right));
}

@media (max-width: 767.98px) {
    /* Compact round FAB – does not cover content on phones */
    .floating-chat-trigger {
        right: calc(16px + env(safe-area-inset-right));
        bottom: calc(16px + env(safe-area-inset-bottom));
        width: 56px;
        height: 56px;
        padding: 0;
        gap: 0;
        justify-content: center;
        border-radius: 50%;
    }

    .floating-chat-trigger > span:not(.chat-sunflower) {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .floating-chat-trigger .chat-sunflower {
        font-size: 1.55rem;
    }

    .btn-scroll-top {
        right: calc(24px + env(safe-area-inset-right));
        bottom: calc(84px + env(safe-area-inset-bottom));
        width: 42px;
        height: 42px;
    }
}

/* Chat window becomes a full-screen sheet on phones */
@media (max-width: 575.98px) {
    #teamn-ai-chat-window {
        inset: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        border-radius: 0 !important;
        border: 0 !important;
        padding-bottom: env(safe-area-inset-bottom);
    }

    #teamn-ai-chat-window > div:first-child {
        padding-top: calc(1rem + env(safe-area-inset-top)) !important;
    }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    #teamn-ai-chat-window {
        right: 16px !important;
        bottom: 16px !important;
    }
}

/* iOS zooms into inputs below 16px – keep all form fields at ≥ 16px on touch */
@media (pointer: coarse) {
    #teamn-chat-input,
    .form-control,
    .form-select,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    textarea,
    select {
        font-size: max(16px, 1rem) !important;
    }
}

/* --------------------------------------------------------------------------
   13. MODALS – full-screen sheet on phones
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    #inquiryModal .modal-dialog {
        margin: 0;
        max-width: none;
        width: 100%;
        min-height: 100%;
        align-items: stretch;
    }

    #inquiryModal .modal-content {
        min-height: 100vh;
        min-height: 100dvh;
        border-radius: 0 !important;
    }

    #inquiryModal .modal-header {
        padding: 1.1rem 1.25rem !important;
        padding-top: calc(1.1rem + env(safe-area-inset-top)) !important;
        align-items: flex-start;
    }

    #inquiryModal .modal-title {
        font-size: 1.25rem;
    }

    #inquiryModal .modal-body {
        padding: 1.25rem !important;
        padding-bottom: calc(1.25rem + env(safe-area-inset-bottom)) !important;
    }

    #inquiryModal .modal-body .text-end {
        display: flex;
        flex-direction: column-reverse;
        gap: 0.6rem;
    }

    #inquiryModal .modal-body .text-end .btn {
        width: 100%;
        margin: 0 !important;
        justify-content: center;
    }

    .modal-xl .modal-content {
        border-radius: 14px !important;
    }
}

/* --------------------------------------------------------------------------
   14. FOOTER
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .ihc-footer {
        padding-top: 3rem;
    }

    .ihc-footer-heading {
        margin-bottom: 1rem;
    }

    .ihc-footer-list li {
        margin-bottom: 0.55rem;
    }

    .ihc-footer-list a {
        font-size: 0.9rem;
        min-height: 32px;
    }

    .ihc-footer-contact-card {
        padding: 1.25rem;
    }

    .ihc-footer-contact-card > .d-flex:first-child {
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .ihc-footer-emergency-pill {
        font-size: 0.92rem;
        padding: 0.8rem 1rem;
    }

    .ihc-footer-bottom {
        margin-top: 2.5rem;
        padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
        text-align: center;
    }

    .ihc-footer-bottom .d-flex.align-items-center.gap-3 {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 0.4rem !important;
    }
}

@media (max-width: 575.98px) {
    /* Room for the floating chat button so it never covers footer links */
    .ihc-footer-bottom {
        padding-bottom: calc(5.5rem + env(safe-area-inset-bottom));
    }
}

/* --------------------------------------------------------------------------
   15. TABLES & FORMS
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .table-responsive,
    .table-scroll {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    /* Comparison tables: swipe horizontally, first column stays visible */
    .table-responsive > .table {
        min-width: 620px;
        font-size: 0.86rem;
    }

    .table-responsive > .table > :not(caption) > tr > :first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        min-width: 150px;
        max-width: 170px;
        box-shadow: inset -1px 0 0 #e2e8f0, inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));
    }

    .form-control-lg,
    .form-select-lg {
        padding-top: 0.6rem;
        padding-bottom: 0.6rem;
        border-radius: 0.6rem;
    }
}

/* --------------------------------------------------------------------------
   16. TABLETS (768–1199px) – use the space instead of long single columns
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991.98px) {
    .pathway-step-card,
    .guarantee-card {
        padding: 1.75rem 1.5rem;
    }

    .ihc-about-banner {
        min-height: 320px;
    }
}

/* --------------------------------------------------------------------------
   17. TOUCH DEVICES – no sticky hover lifts after a tap
   -------------------------------------------------------------------------- */
@media (hover: none) {
    .care-card:hover,
    .ihc-service-card:hover,
    .pathway-step-card:hover,
    .guarantee-card:hover,
    .testimonial-card:hover,
    .google-review-card:hover,
    .executive-video-card:hover,
    .leadership-showcase-card:hover,
    .ihc-stat-card:hover,
    .podcast-playlist-card:hover,
    .step-card:hover,
    .btn-care-primary:hover,
    .btn-care-secondary:hover {
        transform: none !important;
    }

    .ihc-service-card:hover .ihc-service-top-img,
    .leadership-video-screen:hover .leadership-video-img,
    .executive-video-card:hover .executive-video-img {
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   18. LARGE & ULTRA-WIDE DESKTOP
   -------------------------------------------------------------------------- */
@media (min-width: 1920px) {
    .ihc-hero-subtitle {
        font-size: 1.18rem;
        max-width: 660px;
    }
}

@media (min-width: 2400px) {
    .container,
    .container-xl,
    .container-xxl {
        max-width: 1920px !important;
    }

    html {
        font-size: 17px;
    }
}

/* --------------------------------------------------------------------------
   19. ACCESSIBILITY – reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .reviews-marquee-track {
        animation-duration: 160s;
    }

    .floating-chat-trigger .chat-sunflower,
    .kicker-pulse-dot,
    .phone-pulse-dot,
    .ripple-ring {
        animation: none !important;
    }
}