/* ==========================================================================
   MOBILE.CSS – Cascade Responsive Fixes (Phase 2)
   Ziel: ≤768px und speziell ≤480px / ≤360px optimieren
   Einbindung: NACH premium.css, responsive.css UND tablet.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ALLGEMEINES ≤768px
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {

    /* Hero-Bild Mindesthöhe anpassen */
    .hero-image-main {
        height: 260px;
    }

    /* Image-Card-Small auf Mobile sinnvoll skalieren */
    .image-card-small {
        min-height: 140px;
        padding: 16px;
    }

    /* Hero-Bilder kleiner */
    .small-image-1,
    .small-image-2 {
        max-height: 140px;
    }

    /* Footer-Logo auf Mobile deutlich kleiner */
    .footer-logo-image {
        height: 80px;
        max-width: 320px;
        min-height: 60px;
    }

    /* Top-Right Contract Button auf Mobile verschieben */
    .top-right-contract-btn {
        position: relative;
        top: auto;
        right: auto;
        display: block;
        text-align: center;
        margin: 16px 0;
        z-index: auto;
    }

    /* WhatsApp Float Button stabilisieren */
    .whatsapp-float {
        bottom: 16px;
        right: 16px;
        z-index: 999;
    }

    .whatsapp-button {
        padding: 10px 16px;
        gap: 8px;
    }

    .whatsapp-icon {
        width: 20px;
        height: 20px;
    }

    .whatsapp-text span {
        font-size: 13px;
    }

    .whatsapp-text small {
        font-size: 10px;
    }

    /* Hero-Buttons kein doppeltes Padding */
    .hero-buttons {
        padding: 0;
    }

    /* Pricing-Grid auf 1 Spalte bei ≤768px */
    .pricing-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* Footer-Content zentriert und gestapelt */
    .footer-content {
        grid-template-columns: 1fr;
        gap: 20px;
        text-align: center;
        padding: 0 16px;
    }

    .footer-left,
    .footer-right {
        justify-content: center;
    }

    .footer-right {
        flex-wrap: wrap;
        gap: 12px;
    }

    /* Formular-Felder gut bedienbar */
    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 16px;
        /* Verhindert iOS-Zoom bei Fokus */
    }

    /* Legal-Content auf Mobile */
    .legal-content {
        padding: 0 16px;
    }

    .legal-body {
        padding: 24px 20px;
    }

    /* Info-Grid auf Mobile */
    .info-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .contact-methods {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Contact-Method auf Mobile */
    .contact-method {
        padding: 16px;
        gap: 12px;
    }

    .contact-method-icon {
        width: 40px;
        height: 40px;
    }

    /* Tiles-Grid auf Mobile */
    .tiles-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Danke-Seite Buttons */
    .thank-you-buttons {
        flex-direction: column;
        gap: 12px;
        align-items: center;
    }

    .thank-you-buttons .btn {
        width: 100%;
        max-width: 300px;
    }

    /* Cookie-Banner auf Mobile */
    .cookie-consent-content {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    .cookie-consent-buttons {
        flex-direction: column;
        width: 100%;
    }

    .cookie-consent-buttons .btn {
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   2. KLEINES MOBILE ≤480px
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {

    /* Hero-Bild: kein negativer Margin, volle Breite im Container */
    .hero-image-main {
        height: 220px;
        margin: 16px 0 0;
        width: 100%;
    }

    .hero-main-image {
        object-position: center;
    }

    /* Hero-Titel und Untertitel */
    .hero-title {
        font-size: clamp(20px, 7vw, 28px);
        line-height: 1.2;
        padding: 0 4px;
    }

    .hero-subtitle {
        font-size: 15px;
        line-height: 1.4;
        padding: 0 4px;
    }

    .hero-description {
        font-size: 14px;
        line-height: 1.5;
        padding: 0 4px;
    }

    /* Sections kompakter */
    .concept,
    .gallery,
    .pricing,
    .contact {
        padding: 40px 0;
    }

    .section-title {
        font-size: 22px;
        line-height: 1.3;
        padding: 0 4px;
    }

    .section-description {
        font-size: 14px;
        line-height: 1.5;
    }

    /* Cards kompakter */
    .concept-card,
    .gallery-card,
    .pricing-main,
    .pricing-extras,
    .form-card {
        padding: 20px 16px;
    }

    .concept-title {
        font-size: 17px;
    }

    .concept-text {
        font-size: 14px;
        line-height: 1.5;
    }

    /* Galerie */
    .gallery-grid,
    .concept-grid {
        gap: 12px;
    }

    .gallery-card .image-placeholder {
        min-height: 200px;
    }

    /* Pricing */
    .pricing-price {
        font-size: 36px;
    }

    .pricing-title {
        font-size: 20px;
    }

    /* Kontakt */
    .contact-item {
        padding: 14px;
        min-height: 56px;
        gap: 12px;
    }

    .contact-item span {
        font-size: 14px;
    }

    .contact-icon {
        width: 36px;
        height: 36px;
    }

    .contact-icon svg {
        width: 18px;
        height: 18px;
    }

    /* Formular */
    .form-title {
        font-size: 18px;
    }

    .form-subtitle {
        font-size: 14px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 14px;
        font-size: 16px;
        /* iOS-Zoom-Prävention */
        min-height: 44px;
    }

    /* Buttons */
    .btn {
        padding: 14px 20px;
        font-size: 14px;
        min-height: 44px;
    }

    .hero-buttons .btn {
        min-height: 48px;
        font-size: 15px;
    }

    /* QR-Form */
    .qr-simple-form {
        max-width: 100%;
        padding: 20px;
        margin: 0;
    }

    .qr-simple-title {
        font-size: 17px;
    }

    .qr-simple-subtitle {
        font-size: 14px;
    }

    .qr-simple-input {
        font-size: 15px;
        padding: 14px 16px;
    }

    .qr-simple-submit {
        font-size: 15px;
        padding: 14px 20px;
    }

    /* Legal-Page */
    .legal-page {
        padding: 40px 0 20px;
    }

    .legal-header h1 {
        font-size: 24px;
    }

    .legal-subtitle {
        font-size: 15px;
    }

    .legal-section h2 {
        font-size: 17px;
    }

    .legal-section p {
        font-size: 13px;
        line-height: 1.6;
    }

    .back-link {
        font-size: 13px;
    }

    /* Danke-Seite */
    .thank-you {
        padding: 40px 0 20px;
    }

    .thank-you-title {
        font-size: 22px;
    }

    .thank-you-description {
        font-size: 14px;
    }

    /* Info-Card */
    .info-card {
        padding: 24px 20px;
    }

    .info-card h3 {
        font-size: 17px;
    }

    .info-card p {
        font-size: 14px;
    }

    /* Footer */
    .footer-content {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 0 12px;
    }

    .footer-left p {
        font-size: 12px;
    }

    .footer-logo-image {
        height: 60px;
        max-width: 240px;
        min-height: 45px;
    }

    .footer-right {
        gap: 12px;
    }

    .footer-link {
        font-size: 12px;
    }

    /* Vertrag-Seite spezifisch */
    .vertrag-container {
        padding: 12px;
    }

    .vertrag-header {
        padding: 24px 16px;
        margin-bottom: 24px;
    }

    .vertrag-section {
        padding: 20px 16px;
    }

    /* WhatsApp klein */
    .whatsapp-float {
        bottom: 12px;
        right: 12px;
    }

    .whatsapp-button {
        padding: 8px 14px;
    }

    .whatsapp-icon {
        width: 18px;
        height: 18px;
    }

    .whatsapp-text span {
        font-size: 12px;
    }

    .whatsapp-text small {
        font-size: 9px;
    }

    /* Notification */
    .notification {
        max-width: 90vw !important;
        right: 5vw !important;
        left: 5vw !important;
        top: 10px !important;
    }

    /* Lightbox auf Mobile */
    .lightbox {
        padding: 16px;
    }

    .lightbox img {
        max-width: 100%;
        max-height: 70vh;
    }
}

/* --------------------------------------------------------------------------
   3. EXTRA-KLEIN ≤360px (iPhone SE, alte Android)
   -------------------------------------------------------------------------- */
@media (max-width: 360px) {

    .container {
        padding: 0 10px;
    }

    .hero-title {
        font-size: clamp(18px, 6.5vw, 24px);
        line-height: 1.15;
    }

    .hero-subtitle {
        font-size: 14px;
    }

    .hero-description {
        font-size: 13px;
    }

    .section-title {
        font-size: 19px;
    }

    .section-description {
        font-size: 13px;
    }

    .concept-card,
    .gallery-card,
    .pricing-main,
    .pricing-extras,
    .form-card {
        padding: 16px 12px;
    }

    .concept-title {
        font-size: 15px;
    }

    .concept-text {
        font-size: 13px;
    }

    .btn {
        padding: 12px 16px;
        font-size: 13px;
        min-height: 44px;
    }

    .hero-buttons .btn {
        min-height: 44px;
        font-size: 14px;
    }

    .pricing-price {
        font-size: 32px;
    }

    .feature-item {
        padding: 12px 14px;
        gap: 12px;
    }

    .feature-item span {
        font-size: 13px;
    }

    .extra-item {
        padding: 12px 14px;
        font-size: 13px;
    }

    .contact-item {
        padding: 12px;
        min-height: 48px;
        gap: 10px;
    }

    .contact-item span {
        font-size: 12px;
    }

    .contact-icon {
        width: 32px;
        height: 32px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 12px;
        font-size: 16px;
        min-height: 44px;
    }

    .qr-simple-form {
        padding: 16px;
    }

    .qr-simple-title {
        font-size: 15px;
    }

    .qr-simple-input {
        padding: 12px 14px;
    }

    .qr-simple-submit {
        padding: 12px 16px;
    }

    .footer-left p {
        font-size: 11px;
    }

    .footer-link {
        font-size: 11px;
    }

    .legal-page {
        padding: 32px 0 16px;
    }

    .legal-body {
        padding: 16px 12px;
    }

    .legal-header h1 {
        font-size: 20px;
    }

    .legal-subtitle {
        font-size: 13px;
    }

    .legal-section h2 {
        font-size: 15px;
    }

    .legal-section p {
        font-size: 12px;
    }

    .vertrag-container {
        padding: 8px;
    }

    .vertrag-section {
        padding: 16px 12px;
    }

    .vertrag-header {
        padding: 20px 12px;
    }

    .vertrag-section h3 {
        font-size: 16px;
    }

    .vertrag-section p {
        font-size: 13px;
    }

    .info-card {
        padding: 20px 16px;
    }

    .info-card h3 {
        font-size: 15px;
    }

    .info-card p {
        font-size: 13px;
    }

    .info-card .info-icon {
        width: 48px;
        height: 48px;
    }
}

/* --------------------------------------------------------------------------
   4. FOTOVERTRAG – Formular spezifisch auf Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .vertrag-container {
        max-width: 100%;
        padding: 16px;
    }

    .vertrag-header {
        padding: 24px 16px;
        margin-bottom: 24px;
    }

    .vertrag-section {
        padding: 20px 16px;
        margin-bottom: 16px;
    }

    .vertrag-section h3 {
        font-size: 18px;
    }

    .vertrag-section p,
    .vertrag-section li,
    .vertrag-section label {
        font-size: 14px;
        line-height: 1.5;
    }

    /* Canvas für Unterschrift auf Mobile */
    canvas[id*="signature"] {
        width: 100% !important;
        max-width: 100%;
        height: 150px;
        touch-action: none;
    }

    /* Vertrag Formularfelder */
    .vertrag-section input[type="text"],
    .vertrag-section input[type="email"],
    .vertrag-section input[type="tel"],
    .vertrag-section input[type="date"],
    .vertrag-section textarea,
    .vertrag-section select {
        width: 100%;
        padding: 14px;
        font-size: 16px;
        min-height: 44px;
        border-radius: var(--radius-medium);
        margin-bottom: 12px;
    }

    .vertrag-section button,
    .vertrag-section input[type="submit"] {
        width: 100%;
        min-height: 48px;
        font-size: 16px;
        margin-top: 8px;
    }

    /* Success-Seite */
    .success-container {
        padding: 32px 24px;
        margin: 16px;
    }

    .success-container h2 {
        font-size: 22px;
    }

    .success-container p {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .vertrag-container {
        padding: 12px;
    }

    .vertrag-header {
        padding: 20px 12px;
    }

    .vertrag-section {
        padding: 16px 12px;
    }

    canvas[id*="signature"] {
        height: 120px;
    }

    .success-container {
        padding: 24px 16px;
    }
}