/* ==========================================================================
   TABLET.CSS – Cascade Responsive Fixes (Phase 2)
   Ziel: 768px – 1024px optimieren
   Einbindung: NACH premium.css UND responsive.css
   ========================================================================== */

@media (max-width: 1024px) and (min-width: 769px) {

    /* ------------------------------------------------------------------
       FOOTER-LOGO auf Tablet verkleinern
       ------------------------------------------------------------------ */
    .footer-logo-image {
        height: 80px;
        max-width: 360px;
        min-height: 60px;
    }

    /* ------------------------------------------------------------------
       FOOTER-CONTENT – Flex statt Grid für besseren Umbruch
       ------------------------------------------------------------------ */
    .footer-content {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 24px;
    }

    .footer-center {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
    }

    /* ------------------------------------------------------------------
       PRICING – Erst bei 768px auf 1 Spalte, nicht schon bei 1024px
       Überschreibt premium.css Zeile 1366–1369
       ------------------------------------------------------------------ */
    .pricing-grid {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    /* ------------------------------------------------------------------
       HERO-KPI auf 3 Spalten belassen, aber kleiner
       ------------------------------------------------------------------ */
    .hero-kpi {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .kpi-card {
        padding: 16px;
    }

    .kpi-value {
        font-size: 20px;
    }

    .kpi-label {
        font-size: 12px;
    }

    /* ------------------------------------------------------------------
       LEGAL-CONTENT Padding auf Tablet
       ------------------------------------------------------------------ */
    .legal-content {
        padding: 0 20px;
    }

    .legal-body {
        padding: 32px;
    }

    /* ------------------------------------------------------------------
       CONTACT-GRID auf Tablet etwas enger
       ------------------------------------------------------------------ */
    .contact-grid {
        gap: 40px;
    }

    /* ------------------------------------------------------------------
       HERO-GRID auf Tablet etwas enger
       ------------------------------------------------------------------ */
    .hero-grid {
        gap: 40px;
    }

    .hero-image-main {
        height: 320px;
    }

    /* ------------------------------------------------------------------
       GALERIE-GRID auf Tablet 2 Spalten belassen
       ------------------------------------------------------------------ */
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    /* ------------------------------------------------------------------
       CONCEPT-GRID auf Tablet 2 Spalten belassen
       ------------------------------------------------------------------ */
    .concept-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    /* ------------------------------------------------------------------
       FORM-CARD Padding auf Tablet
       ------------------------------------------------------------------ */
    .form-card {
        padding: 32px;
    }

    /* ------------------------------------------------------------------
       QR-CARD Padding auf Tablet
       ------------------------------------------------------------------ */
    .qr-card {
        padding: 32px;
    }

    /* ------------------------------------------------------------------
       HEADER-CONTENT auf Tablet
       ------------------------------------------------------------------ */
    .header-content {
        height: 70px;
    }

    .logo-image {
        height: 50px;
        max-width: 240px;
    }

    .nav {
        gap: 20px;
    }

    .nav-link {
        font-size: 14px;
    }
}