/* ===================================================
   VIRON – RESPONSIVE DESIGN SYSTEM  v5
   Breakpoints:
     ≤ 1280px  → Large Tablet / Small Desktop
     ≤ 1024px  → Tablet (handled in style.css, extended here)
     ≤  768px  → Mobile / Smartphone
     ≤  430px  → Small Phone (iPhone SE, Galaxy A)
   Gilt für: index.html + alle Unterseiten
   =================================================== */

/* =============================================
   1. LARGE TABLET – ≤ 1280px
   ============================================= */
@media (max-width: 1280px) {

    /* Nav – etwas enger */
    .nav-link { padding: 10px 14px; font-size: 13px; }
    .nav-cta  { padding: 10px 18px; font-size: 13px; }

    /* Produkt Showcase */
    .product-showcase-content { padding: 36px 36px; }
    .product-showcase-title   { font-size: 32px; }

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

    /* Brand Cards */
    .brand-card-new { width: calc(33.333% - 14px); }
}

/* =============================================
   2. TABLET – ≤ 1024px (erweitert style.css)
   ============================================= */
@media (max-width: 1024px) {

    /* Navigation */
    .nav-pill  { display: none; }
    .nav-cta   { display: none; }
    .nav-toggle { display: flex; }

    /* Hero */
    .hero-title { font-size: clamp(28px, 5vw, 44px) !important; letter-spacing: -1px; }
    .hero-content { padding: 0 20px; }

    /* Preis-Ticker: vertikal auf Tablet */
    #price-ticker {
        flex-direction: column !important;
        border-radius: 20px !important;
        width: calc(100% - 40px);
        max-width: 420px;
    }
    #price-ticker > div {
        border-right: none !important;
        border-bottom: 1px solid rgba(255,255,255,0.08) !important;
        padding: 20px 28px !important;
        justify-content: center !important;
    }
    #price-ticker > div:last-child { border-bottom: none !important; }

    /* Sticky Banner */
    #foerder-sticky {
        flex-wrap: wrap;
        padding: 10px 20px;
        gap: 10px;
    }

    /* Sektion Slogans / 2-Spalten Grids */
    div[style*="grid-template-columns:1fr 1fr"],
    div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
    div[style*="display:grid;grid-template-columns:1fr 1fr"],
    div[style*="display: grid; grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

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

    /* Trust Badges – umbrechen */
    .hero div[style*="position:absolute;bottom:24px"],
    .hero div[style*="position: absolute; bottom: 24px"] {
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px 16px 12px;
        bottom: 8px !important;
    }

    /* Produkte */
    .product-showcase {
        grid-template-columns: 1fr !important;
        min-height: auto;
    }
    .product-showcase.reverse { direction: ltr; }
    .product-showcase-image   { height: 280px; }
    .product-showcase-content { padding: 28px 24px; }
    .product-showcase-title   { font-size: 26px; }
    .speicher-card { grid-template-columns: 1fr !important; }
    .speicher-content { padding: 32px; }

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

    /* Brands */
    .brands-grid       { flex-wrap: wrap; }
    .brand-card-new    { width: calc(50% - 10px); }

    /* Lifestyle */
    .lifestyle-grid { grid-template-columns: 1fr; gap: 36px; }
    .lifestyle-image img { height: 360px; }

    /* Contact */
    .contact-layout { grid-template-columns: 1fr; gap: 40px; }

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

    /* Before/After */
    .ba-project { grid-template-columns: 1fr !important; }
    .ba-img-container { min-height: 240px; order: -1; }

    /* Marken */
    .mk-card { min-width: 180px; }

    /* CTA Card */
    .cta-card { padding: 60px 32px; }

    /* Section Padding reduzieren */
    .how-section, .brands-section, .lifestyle-section,
    .benefits-section, .contact-section { padding: 72px 0; }
}

/* =============================================
   3. MOBILE SMARTPHONE – ≤ 768px
   ============================================= */
@media (max-width: 768px) {

    /* ---- Navigation ---- */
    .nav-pill   { display: none; }
    .nav-cta    { display: none !important; }
    .nav-toggle { display: flex; }
    .nav-pill.active {
        display: block;
        position: absolute;
        top: 100%;
        left: 12px;
        right: 12px;
        border-radius: var(--radius-lg, 20px);
        padding: 12px;
        z-index: 500;
    }
    .nav-pill.active .nav-links  { flex-direction: column; }
    .nav-pill.active .nav-link   { width: 100%; text-align: center; padding: 14px 20px; font-size: 15px; }
    .nav-pill.active .has-dropdown .nav-dropdown { display: none; } /* Dropdown im Mobile-Menu deaktiviert */

    /* ---- Typografie ---- */
    h1 { font-size: clamp(22px, 6.5vw, 32px) !important; letter-spacing: -0.5px !important; }
    h2 { font-size: clamp(20px, 6vw, 28px) !important; letter-spacing: -0.5px !important; }
    h3 { font-size: clamp(17px, 5vw, 22px) !important; }

    h2[style*="clamp"] { font-size: clamp(22px, 6vw, 32px) !important; letter-spacing: -1px !important; }

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

    /* ---- Hero ---- */
    .hero { min-height: 90vh; }
    .hero-title {
        font-size: clamp(24px, 7vw, 34px) !important;
        letter-spacing: -1px !important;
        margin-bottom: 16px !important;
        line-height: 1.2 !important;
    }
    .hero-title-accent { display: block; }
    .hero-content > p { font-size: 14px !important; margin-top: 6px !important; }
    .hero-content     { padding: 0 16px !important; }

    /* CTA Buttons – volle Breite */
    .hero-actions {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    .hero-actions .btn { width: 100% !important; justify-content: center !important; font-size: 15px !important; }

    /* Preis-Ticker ausblenden (zu groß auf Mobile) */
    [style*="margin-top:36px;display:flex;flex-direction:column;align-items:center;gap:16px"],
    [style*="margin-top: 36px; display: flex; flex-direction: column"] {
        display: none !important;
    }

    /* Trust-Badges ausblenden */
    .hero div[style*="position:absolute;bottom:24px"],
    .hero div[style*="position: absolute; bottom: 24px"] { display: none !important; }
    .hero-trust-bar { display: none !important; }

    /* Sticky Banner – kompakt */
    #foerder-sticky {
        flex-wrap: wrap !important;
        padding: 10px 14px !important;
        gap: 8px !important;
    }
    #foerder-sticky > div:first-child > div[style*="28px"] {
        font-size: 13px !important;
        line-height: 1.4 !important;
    }
    #foerder-sticky > div:first-child > div[style*="11px"] { display: none !important; }
    #foerder-sticky > div:first-child > span[style*="28px"] { font-size: 20px !important; }
    #foerder-sticky a { padding: 8px 16px !important; font-size: 12px !important; }
    #foerder-sticky button { padding: 4px !important; }

    /* ---- Sections allgemein ---- */
    section[style*="padding:100px"],
    section[style*="padding: 100px"] {
        padding-top: 56px !important;
        padding-bottom: 56px !important;
    }
    section[style*="padding:80px"],
    section[style*="padding: 80px"] {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }
    section[style*="padding:48px"],
    section[style*="padding: 48px"] {
        padding-top: 36px !important;
        padding-bottom: 36px !important;
    }
    .how-section, .brands-section, .lifestyle-section,
    .benefits-section, .contact-section { padding: 56px 0; }

    /* ---- Trust Section ---- */
    /* Testimonials → 1 Spalte */
    div[style*="grid-template-columns:repeat(3,1fr)"],
    div[style*="grid-template-columns: repeat(3, 1fr)"] {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    /* Counter Bar – umbrechen */
    .v-counter-box { min-width: 70px; }
    div[style*="width:1px;height:48px"],
    div[style*="width: 1px; height: 48px"] { display: none !important; }
    div[style*="display:flex;justify-content:center;align-items:center;flex-wrap:wrap"] {
        flex-wrap: wrap !important;
        gap: 12px !important;
        padding: 20px 14px !important;
    }

    /* ---- Vor/Nachher Projekte ---- */
    .ba-project { grid-template-columns: 1fr !important; }
    .ba-img-container { min-height: 200px !important; order: -1; }
    .ba-info { padding: 24px 20px !important; }
    .ba-info h3 { font-size: 18px !important; }
    .ba-stats { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
    .ba-stat  { padding: 12px 6px !important; }
    .ba-stat-value { font-size: 16px !important; }
    .ba-stat-label { font-size: 9px !important; }

    /* ---- Förder-CTA Inline Sektionen ---- */
    div[style*="display:flex;justify-content:center;gap:12px;flex-wrap:wrap"] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    div[style*="display:flex;justify-content:center;gap:24px;margin-top:20px"] {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    /* ---- Slogan Sektionen (2-col → 1-col) ---- */
    div[style*="grid-template-columns:1fr 1fr"],
    div[style*="grid-template-columns: 1fr 1fr"],
    div[style*="display:grid;grid-template-columns:1fr 1fr"],
    div[style*="display: grid; grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }

    /* 3-Spalten → 1 */
    [style*="grid-template-columns:repeat(3"],
    [style*="grid-template-columns: repeat(3"] {
        grid-template-columns: 1fr !important;
    }
    /* 2-Spalten → 1 */
    [style*="grid-template-columns:repeat(2"],
    [style*="grid-template-columns: repeat(2,"] {
        grid-template-columns: 1fr !important;
    }

    /* ---- Produkt Showcase ---- */
    .product-showcase {
        grid-template-columns: 1fr !important;
        min-height: auto !important;
    }
    .product-showcase.reverse { direction: ltr !important; }
    .product-showcase > * { direction: ltr !important; }
    .product-showcase-image { min-height: 220px !important; }
    .product-showcase-content { padding: 24px 18px !important; }
    .product-showcase-title { font-size: 22px !important; }
    .product-showcase .btn-dark { width: 100% !important; justify-content: center !important; }

    .speicher-card { grid-template-columns: 1fr !important; }
    .speicher-content { padding: 24px 20px; }

    /* ---- Produkt Selector ---- */
    .selector-grid { flex-direction: column !important; }
    .selector-card {
        border-right: none !important;
        border-bottom: 1px solid var(--gray-200, #D1D1CC) !important;
        padding: 20px 16px !important;
    }
    .selector-card:last-child { border-bottom: none !important; }

    /* ---- Steps ---- */
    .steps-grid { grid-template-columns: 1fr !important; }

    /* ---- Brands ---- */
    .brands-grid    { grid-template-columns: repeat(2, 1fr) !important; }
    .brand-card-new { width: 100%; }

    /* ---- Marken Karten (Horizontal Scroll Row) ---- */
    .mk-row {
        flex-wrap: wrap !important;
        gap: 12px !important;
        padding: 0 16px !important;
        overflow-x: hidden !important;
    }
    .mk-card {
        width: calc(50% - 6px) !important;
        min-width: calc(50% - 6px) !important;
        flex: none !important;
    }

    /* ---- Press Logos ---- */
    .press-logos { gap: 20px !important; flex-wrap: wrap !important; }
    .press-logo-item svg { transform: scale(0.85); }

    /* ---- Lifestyle ---- */
    .lifestyle-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
    .lifestyle-image img { height: 280px; }
    .lifestyle-title { font-size: 26px !important; }
    .lifestyle-stats { flex-direction: column !important; gap: 16px !important; }
    .lifestyle-stat-number { font-size: 34px !important; }

    /* ---- Benefits Accordion ---- */
    .benefit-header { padding: 16px 18px; }
    .benefit-header h3 { font-size: 14px; }
    .benefit-body { padding: 0 18px 16px; font-size: 14px; }

    /* ---- CTA Section ---- */
    .cta-card { padding: 44px 20px; border-radius: 16px; }
    .cta-card h2 { font-size: clamp(22px, 6vw, 32px) !important; }
    .cta-card p { font-size: 15px; }

    /* ---- Kontaktformular ---- */
    .contact-layout { grid-template-columns: 1fr !important; gap: 32px !important; }
    .contact-title  { font-size: 26px !important; }
    .form-row       { grid-template-columns: 1fr !important; }
    .contact-form   { padding: 20px !important; border-radius: 16px; }

    /* ---- Schnellcheck ---- */
    .option-grid { grid-template-columns: repeat(2, 1fr) !important; }

    /* ---- Footer ---- */
    .footer { padding: 48px 0 0; }
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
        padding-bottom: 32px;
    }
    .footer-bottom {
        flex-direction: column !important;
        text-align: center !important;
        gap: 12px !important;
    }
    .footer-links ul { gap: 10px; }

    /* ---- Allgemeine Buttons ---- */
    .btn-lg { padding: 14px 28px !important; font-size: 15px !important; }
    .btn    { white-space: normal; text-align: center; }

    /* ---- Karriere / Unterseiten ---- */
    .karriere-hero h1,
    .hero-section h1,
    .hero h1 { font-size: clamp(24px, 6.5vw, 32px) !important; }

    /* ---- Unterseiten Hero Sektionen ---- */
    section h1[style*="clamp"],
    div h1[style*="100px"] { font-size: clamp(24px, 6.5vw, 34px) !important; }

    /* ---- Aiko / Sigenergy Produkt-Sektionen ---- */
    div[style*="display:grid;grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

/* =============================================
   4. EXTRA KLEIN – ≤ 430px (iPhone SE etc.)
   ============================================= */
@media (max-width: 430px) {

    /* Typografie */
    h1 { font-size: 22px !important; letter-spacing: -0.3px !important; }
    h2 { font-size: 19px !important; }
    h3 { font-size: 16px !important; }
    .hero-title { font-size: 22px !important; letter-spacing: -0.8px !important; }

    /* Container */
    .container { padding: 0 12px !important; }

    /* Marken Karten → volle Breite */
    .mk-card {
        width: 100% !important;
        min-width: 100% !important;
    }

    /* Before/After Stats → 2 Spalten */
    .ba-stats { grid-template-columns: 1fr 1fr !important; }

    /* Produkt Showcase */
    .product-showcase-title { font-size: 20px !important; }
    .product-showcase-content { padding: 20px 14px !important; }

    /* Buttons */
    .btn    { padding: 12px 18px !important; font-size: 14px !important; }
    .btn-lg { padding: 13px 22px !important; font-size: 14px !important; }

    /* Brands → 1 Spalte */
    .brands-grid { grid-template-columns: 1fr !important; }

    /* Schnellcheck */
    .option-grid { grid-template-columns: 1fr !important; }

    /* Kontaktformular */
    .contact-form { padding: 16px !important; }

    /* Sticky Banner */
    #foerder-sticky { padding: 8px 12px !important; }
    #foerder-sticky a { width: 100% !important; justify-content: center !important; }

    /* Lifestyle Stats */
    .lifestyle-stat-number { font-size: 28px !important; }
    .lifestyle-stat-plus   { font-size: 22px !important; }

    /* Footer */
    .footer { padding: 36px 0 0; }
    .footer-grid { gap: 24px !important; }

    /* Step Cards */
    .step-number { font-size: 40px; }
    .step-title  { font-size: 16px; }

    /* CTA Card */
    .cta-card { padding: 36px 16px; }
    .cta-card h2 { font-size: 20px !important; }
}

/* =============================================
   5. KARRIERE-SEITE – Alle Breakpoints
   Deckt alle Inline-Grid-Layouts in karriere.html ab
   ============================================= */

/* --- Karriere ≤ 1024px (Tablet) --- */
@media (max-width: 1024px) {

    /* Hero */
    .hero-karriere { padding: 140px 20px 80px; }
    .hero-karriere h1 { font-size: clamp(28px, 5vw, 48px) !important; letter-spacing: -1px; }

    /* Vergleich-Row */
    .comparison-row {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .vs-badge { margin: 0 auto; }

    /* Prozess-Steps */
    .process-steps { flex-direction: column; align-items: center; }
    .process-step { flex: 0 0 auto; width: 100%; max-width: 400px; }
    .process-connector { transform: rotate(90deg); }

    /* Benefits Grid */
    .benefits-grid { grid-template-columns: 1fr 1fr !important; }
    .benefit-card.large { grid-column: 1 / -1; }

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

    /* CTA Card */
    .cta-card { grid-template-columns: 1fr !important; gap: 32px !important; }

    /* Bilder-Grid (2-spaltig) */
    div[style*="grid-template-columns:1fr 1fr"]:has(img),
    .karriere-img-grid { grid-template-columns: 1fr !important; }
}

/* --- Karriere ≤ 768px (Mobile) --- */
@media (max-width: 768px) {

    /* Hero */
    .hero-karriere { padding: 120px 16px 64px; }
    .hero-karriere h1 { font-size: clamp(26px, 7vw, 36px) !important; letter-spacing: -1.5px; }
    .hero-sub { font-size: 15px !important; margin-bottom: 28px !important; }
    .hero-stats-row { gap: 16px; flex-wrap: wrap; }
    .hero-stat-divider { display: none; }
    .hero-stat-value { font-size: 26px; }
    .btn-hero { padding: 14px 28px !important; font-size: 15px !important; width: 100%; justify-content: center; }

    /* Benefits Grid → 1 Spalte */
    .benefits-grid { grid-template-columns: 1fr !important; }
    .bc-list { flex-direction: column; gap: 8px !important; }

    /* Bilder-Grid: beide Bilder (Beratung + Dienstwagen) */
    div[style*="display:grid;grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* Zahlen-Banner: 4-Spalten → 2x2 */
    div[style*="grid-template-columns:repeat(4,1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }

    /* Karrierestufen: 4-Spalten → 2x2 */
    div[style*="grid-template-columns:repeat(4,1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* "Wen suchen wir" Karten: 2-spaltig → 1-spaltig */
    div[style*="display:grid;grid-template-columns:1fr 1fr;gap:16px"] {
        grid-template-columns: 1fr !important;
    }

    /* Cross-Selling iSFP: 2-spaltig → 1-spaltig */
    div[style*="display:grid;grid-template-columns:1fr 1fr;gap:32px"] {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* Karrierestufen-Connector-Line ausblenden */
    div[style*="position:absolute;top:56px"] { display: none !important; }

    /* Team-Bild Höhe */
    div[style*="height:400px"] img { height: 260px !important; object-fit: cover; }
    div[style*="height:420px"] img { height: 260px !important; object-fit: cover; }
    div[style*="height:320px"] img { height: 220px !important; object-fit: cover; }

    /* Section Padding reduzieren */
    .section { padding: 56px 16px !important; }
    .cta-section { padding: 56px 16px !important; }

    /* CTA Card */
    .cta-card { gap: 24px !important; }
    .cta-left h2 { font-size: 26px !important; }
    .cta-checks { gap: 8px !important; }

    /* FAQ Akkordeon */
    #faqList > div { font-size: 14px !important; }

    /* =============================================
       VORHER / NACHHER Bilder – besser auf Mobile
       ============================================= */

    /* Jede Projekt-Karte: volle Breite, keine feste Höhe */
    .ba-project {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        border-radius: 20px;
        overflow: hidden;
    }

    /* Bild-Container: großes Vollbild-Feeling */
    .ba-img-container {
        min-height: 260px !important;
        max-height: 320px;
        border-radius: 0 !important;
        order: -1 !important; /* Immer oben */
    }

    .ba-img-container img {
        width: 100% !important;
        height: 280px !important;
        object-fit: cover !important;
        object-position: center !important;
        display: block;
    }

    /* Info-Bereich: kompakter, besser lesbar */
    .ba-info {
        padding: 20px 16px 24px !important;
        background: #fff;
    }
    .ba-info h3 { font-size: 17px !important; margin-bottom: 6px !important; }
    .ba-sub { font-size: 13px !important; line-height: 1.5 !important; }

    /* Stats: 3 Spalten bleiben, aber kleiner */
    .ba-stats {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        margin-top: 12px !important;
    }
    .ba-stat { padding: 10px 6px !important; }
    .ba-stat-value { font-size: 16px !important; }
    .ba-stat-label { font-size: 10px !important; }

    /* Tags-Reihe */
    .ba-tags { flex-wrap: wrap !important; gap: 6px !important; margin-top: 12px !important; }
    .ba-tag { font-size: 12px !important; padding: 5px 10px !important; }

    /* CTA unter den Projekten */
    .ba-cta { padding: 24px 16px !important; }
    .ba-cta a { font-size: 14px !important; padding: 12px 20px !important; }

    /* Projekttag Badge */
    .ba-project-tag { font-size: 11px !important; padding: 4px 10px !important; margin-bottom: 8px !important; }
}

/* --- Karriere ≤ 430px (klein) --- */
@media (max-width: 430px) {

    /* Hero */
    .hero-karriere { padding: 100px 12px 52px; }
    .hero-karriere h1 { font-size: 22px !important; letter-spacing: -1px !important; }
    .hero-sub { font-size: 14px !important; }
    .hiring-badge { font-size: 11px !important; padding: 6px 14px !important; }

    /* Zahlen-Banner */
    div[style*="grid-template-columns:repeat(4,1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    /* Karrierestufen → alle untereinander */
    div[style*="grid-template-columns:repeat(4,1fr)"] {
        grid-template-columns: 1fr 1fr !important;
    }

    /* Inanspruchnahme Karten */
    div[style*="display:grid;grid-template-columns:1fr 1fr;gap:16px"] {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    /* Vorher/Nachher klein */
    .ba-img-container img { height: 230px !important; }
    .ba-stats { grid-template-columns: 1fr 1fr !important; }

    /* Benefits */
    .benefits-grid { grid-template-columns: 1fr !important; }
    .bc-list { flex-direction: column !important; }

    /* Sections */
    .section { padding: 44px 12px !important; }

    /* Footer Karriere */
    div[style*="grid-template-columns:2fr 1fr 1fr 1fr"] {
        grid-template-columns: 1fr 1fr !important;
        gap: 24px !important;
    }
}