/*
 * =============================================
 * UNTERNEHMERMARKT - RESPONSIVE STYLES
 * Breakpoints und responsive Anpassungen
 * =============================================
 */

/* =============================================
   GLOBAL: prevent horizontal scroll on mobile
   ============================================= */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

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

/* =============================================
   GLOBAL MOBILE SAFEGUARDS (≤767px)
   defensive layer for inline-styled HTML
   ============================================= */
@media (max-width: 767px) {
    /* Long words/URLs/emails don't blow up containers */
    body {
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    a, p, h1, h2, h3, h4, span, li, td, th {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* Tables: enable horizontal scroll instead of overflow */
    table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Forms */
    input, select, textarea, button {
        max-width: 100%;
        font-size: 16px; /* prevents iOS zoom-on-focus */
        box-sizing: border-box;
    }

    /* Containers should not overflow viewport */
    .container, .container-wide, .container-narrow,
    main, section, header, footer {
        max-width: 100%;
    }

    /* Padding for sections */
    section, .section, .hero, .hero-enhanced {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }

    /* Pricing tables / cards grids → 1 column */
    .pricing-grid,
    .packages-grid,
    .pakete-grid,
    .feature-grid,
    .benefits-grid,
    .testimonials-grid,
    .partner-grid,
    .team-grid,
    .branchen-grid,
    .stats-grid,
    .stats-grid-detail,
    .process-steps,
    .faq-grid,
    .roi-grid,
    .addons-grid,
    .value-section,
    .valuation-content,
    .gallery-container,
    .category-grid,
    .blog-grid,
    .article-grid,
    .grid-2, .grid-3, .grid-4 {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* Collapsed single-column grid tracks must be allowed to shrink:
       without min-width:0 a non-wrapping flex child (e.g. tab bar)
       forces the track wider than the viewport (content clipped under
       the global overflow-x:hidden). */
    .grid-2 > *, .grid-3 > *, .grid-4 > *,
    .gallery-container > *, .stats-grid-detail > * {
        min-width: 0 !important;
    }

    /* Dashboard / onboarding sidebar layouts → stack */
    .onboarding-layout,
    .dashboard-layout,
    .account-layout,
    .profile-layout {
        grid-template-columns: 1fr !important;
    }

    /* Progress / wizard steps wrap instead of squish */
    .progress-steps,
    .wizard-steps,
    .stepper {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    /* Hero headings cap at mobile-readable size */
    .sell-hero h1,
    .hero h1,
    .hero-enhanced h1,
    .page-hero h1 {
        font-size: clamp(1.4rem, 6vw, 2rem) !important;
        line-height: 1.2 !important;
    }

    /* Hero-Buttons stack full-width */
    .hero-buttons, .hero-cta-group, .cta-buttons, .button-group {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
    }
    .hero-buttons > a, .hero-buttons > button,
    .hero-cta-group > a, .hero-cta-group > button,
    .cta-buttons > a, .cta-buttons > button {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    /* Search box: 4 horizontal fields → stack */
    .search-box, .hero-search, .search-form,
    .suche-felder, .filter-row {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    .search-box > *, .hero-search > *, .search-form > *,
    .suche-felder > *, .filter-row > * {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Detail-page sidebars → stack under content */
    .detail-layout, .listing-layout, .with-sidebar {
        grid-template-columns: 1fr !important;
        display: block !important;
    }

    /* Tab bars scroll horizontally instead of forcing the column wide */
    .detail-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .detail-tabs::-webkit-scrollbar { display: none; }
    .detail-tabs .detail-tab {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 0.75rem 1rem;
    }

    /* Listen-Toolbars (Suche + Sortierung) brechen auf Mobile um und die
       Steuerelemente werden voll breit, statt das Layout zu sprengen
       (meine-inserate, interessenten, meine-suchen, merkliste, …). */
    .toolbar, .toolbar-left, .toolbar-right {
        flex-wrap: wrap !important;
        width: 100%;
        gap: 0.5rem;
    }
    .toolbar-right { justify-content: flex-start; }
    .search-box, .search-input, .sort-select {
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Lade-Skeletons mit fester Pixelbreite (z.B. width:300px) duerfen den
       schmalen Viewport nicht ueberragen (meine-ndas, meine-lois, …).
       Die Flex-Spalte braucht min-width:0, sonst erzwingt der 300px-Balken
       die Kartenbreite (~412px). */
    .skeleton-text { max-width: 100% !important; }
    .loading-card, .loading-card > * { min-width: 0 !important; }

    /* Modals: full-width on mobile */
    .modal-content, .modal-dialog {
        max-width: calc(100vw - 32px) !important;
        margin: 16px auto !important;
    }
}

@media (max-width: 479px) {
    /* Even tighter padding on smallest screens */
    section, .section, .hero, .hero-enhanced,
    .container, .container-wide {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

/* iOS safe-area for bottom-fixed elements */
.scroll-top, .chatbot-toggle, .floating-cta {
    bottom: max(2rem, env(safe-area-inset-bottom) + 1rem) !important;
}

/* =============================================
   ENHANCED STATS BAR (3-up on index.html hero)
   - keep numbers on one line at every breakpoint
   - scale font down, never wrap "75 M+" / "10+ Jahre"
   ============================================= */
.stats-bar-enhanced {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.stats-grid-enhanced {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: end;
    gap: 0.5rem;
    padding: 0.5rem 0.5rem 0;
}

.stats-grid-enhanced .stat-enhanced {
    text-align: center;
    padding: 0.5rem 0.25rem;
    min-width: 0;
}

.stats-grid-enhanced .stat-number {
    white-space: nowrap;
    line-height: 1.1;
}

.stats-grid-enhanced .stat-label {
    white-space: normal;
    overflow-wrap: anywhere;
    hyphens: auto;
}

@media (max-width: 767px) {
    .stats-grid-enhanced .stat-number {
        font-size: 1.5rem;
    }

    .stats-grid-enhanced .stat-label {
        font-size: 0.75rem;
    }
}

@media (max-width: 479px) {
    .stats-grid-enhanced {
        gap: 0.25rem;
        padding: 0.5rem 0.25rem 0;
    }

    .stats-grid-enhanced .stat-enhanced {
        padding: 0.5rem 0.125rem;
    }

    .stats-grid-enhanced .stat-number {
        font-size: 1.25rem;
    }

    .stats-grid-enhanced .stat-label {
        font-size: 0.7rem;
    }
}

@media (max-width: 359px) {
    .stats-grid-enhanced .stat-number {
        font-size: 1.05rem;
    }
}

/* =============================================
   BREAKPOINTS
   - xs: < 480px (Mobile small)
   - sm: 480px - 639px (Mobile)
   - md: 640px - 767px (Tablet portrait)
   - lg: 768px - 1023px (Tablet landscape)
   - xl: 1024px - 1279px (Desktop)
   - 2xl: 1280px+ (Large desktop)
   ============================================= */

/* =============================================
   EXTRA LARGE (2xl: 1280px+)
   ============================================= */
@media (min-width: 1280px) {
    .container {
        max-width: 1200px;
    }

    .container-wide {
        max-width: 1400px;
    }
}

/* =============================================
   LARGE (xl: 1024px - 1279px)
   ============================================= */
@media (max-width: 1279px) {
    .container {
        max-width: 1000px;
    }

    .footer-grid {
        grid-template-columns: 1.5fr repeat(4, 1fr);
        gap: 30px;
    }
}

/* =============================================
   MEDIUM (lg: 768px - 1023px)
   ============================================= */
@media (max-width: 1023px) {
    /* Typography */
    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }
    h3 { font-size: 1.5rem; }
    h4 { font-size: 1.125rem; }

    /* Grid Adjustments */
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }

    /* Stats */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

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

    /* Footer */
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }

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

    /* Hero */
    .hero {
        min-height: 70vh;
    }

    .hero h1 {
        font-size: 2.5rem;
    }

    .hero-subtitle {
        font-size: 1.1rem;
    }

    /* Sections */
    .section {
        padding: 60px 24px;
    }
}

/* =============================================
   TABLET (md: 640px - 767px)
   ============================================= */
@media (max-width: 767px) {
    /* Navbar */
    .navbar {
        padding: 12px 16px;
    }

    /* Prevent logo/title from overlapping burger menu */
    .nav-container {
        gap: 8px;
    }

    .logo-container {
        min-width: 0;
        overflow: hidden;
    }

    .logo-text {
        min-width: 0;
    }

    .logo-title {
        font-size: 0.85rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .nav-toggle,
    .mobile-menu-toggle {
        display: flex;
        flex-shrink: 0;
    }

    .navbar-links {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: white;
        flex-direction: column;
        padding: 80px 24px 24px;
        z-index: 1001;
        gap: 0;
    }

    .navbar-links.active {
        display: flex;
    }

    .navbar-links a {
        padding: 16px 0;
        font-size: 1.1rem;
        border-bottom: 1px solid var(--color-border, #e2e8f0);
    }

    .navbar-cta {
        margin-top: 24px;
        text-align: center;
    }

    /* Logo */
    .logo-subtitle,
    .navbar-left span:last-child {
        display: none;
    }

    .navbar-left img {
        height: 50px;
    }

    /* Typography */
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }

    /* Grid */
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* Cards */
    .card-image {
        height: 180px;
    }

    /* Forms */
    .form-row {
        flex-direction: column;
    }

    .form-row > * {
        width: 100%;
    }

    /* Buttons */
    .btn-group {
        flex-direction: column;
        width: 100%;
    }

    .btn-group .btn {
        width: 100%;
    }

    .hero-buttons {
        flex-direction: column;
        gap: 12px;
    }

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

    /* Hero Search */
    .hero-search {
        flex-direction: column;
        padding: 16px;
    }

    .hero-search input,
    .hero-search select,
    .hero-search button {
        width: 100%;
    }

    /* Footer */
    .footer {
        padding: 48px 16px 24px;
    }

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

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

    .footer-logo {
        justify-content: center;
    }

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

    .footer-links {
        align-items: center;
    }

    /* Sections */
    .section {
        padding: 48px 16px;
    }

    .section-title h2 {
        font-size: 1.75rem;
    }

    /* Stats */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .stat {
        padding: 16px 8px;
    }

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

    .stat-label {
        font-size: 0.85rem;
    }

    /* Dashboard Sidebar */
    .dashboard-sidebar {
        width: 100%;
        position: fixed;
        left: -100%;
        top: 0;
        bottom: 0;
        z-index: 1000;
        transition: left 0.3s ease;
    }

    .dashboard-sidebar.active {
        left: 0;
    }

    .dashboard-content {
        margin-left: 0;
        padding: 16px;
    }

    /* Tables */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Modals */
    .modal-content {
        margin: 16px;
        max-height: calc(100vh - 32px);
    }
}

/* =============================================
   MOBILE (sm: 480px - 639px)
   ============================================= */
@media (max-width: 639px) {
    /* Base */
    body {
        font-size: 14px;
    }

    /* Typography */
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }

    /* Hero */
    .hero {
        min-height: 60vh;
        padding: 32px 16px;
    }

    .hero h1 {
        font-size: 1.75rem;
    }

    .hero-badge,
    .hero-badge-new {
        font-size: 0.8rem;
        padding: 8px 16px;
    }

    /* Stats */
    .stats-bar {
        padding: 24px 16px;
    }

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

    /* Cards */
    .card-content {
        padding: 16px;
    }

    .card-title {
        font-size: 1.1rem;
    }

    /* Buttons */
    .btn {
        padding: 12px 20px;
        font-size: 0.9rem;
    }

    .btn-lg {
        padding: 14px 24px;
    }

    /* Tables */
    .table th,
    .table td {
        padding: 12px 8px;
        font-size: 0.85rem;
    }
}

/* =============================================
   EXTRA SMALL (xs: < 480px)
   ============================================= */
@media (max-width: 479px) {
    /* Navbar - very small screens */
    .logo-title {
        font-size: 0.75rem;
    }

    .logo-image {
        height: 32px;
    }

    /* Stats */
    .stats-grid {
        grid-template-columns: 1fr;
    }

    /* Hero */
    .hero h1 {
        font-size: 1.5rem;
    }

    .hero-subtitle {
        font-size: 0.95rem;
    }

    /* Cards */
    .card-image {
        height: 150px;
    }

    /* Tabs */
    .tabs {
        flex-direction: column;
    }

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

/* =============================================
   UTILITY CLASSES - HIDE/SHOW BY BREAKPOINT
   ============================================= */

/* Hide on mobile */
@media (max-width: 767px) {
    .hide-mobile { display: none !important; }
}

/* Hide on tablet */
@media (min-width: 768px) and (max-width: 1023px) {
    .hide-tablet { display: none !important; }
}

/* Hide on desktop */
@media (min-width: 1024px) {
    .hide-desktop { display: none !important; }
}

/* Show only on mobile */
@media (min-width: 768px) {
    .show-mobile-only { display: none !important; }
}

/* Show only on tablet+ */
@media (max-width: 767px) {
    .show-tablet-up { display: none !important; }
}

/* Show only on desktop+ */
@media (max-width: 1023px) {
    .show-desktop-up { display: none !important; }
}

/* =============================================
   PRINT STYLES
   ============================================= */
@media print {
    .navbar,
    .footer,
    .sidebar,
    .no-print {
        display: none !important;
    }

    body {
        font-size: 12pt;
        line-height: 1.5;
    }

    a[href]::after {
        content: " (" attr(href) ")";
    }

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