/* Responsive Design – Mobile First
   Die Basis-Styles (style.css) gelten für Mobile.
   Ab 601px Breite wird die Desktop-Ansicht aktiviert.
   Hinweis: Die Umstellung von Desktop-First auf Mobile First wurde
   mit Hilfe von Claude Code erarbeitet (siehe Quellenverzeichnis Nr. 8). */

@media (min-width: 601px) {

    body {
        padding: 40px 20px;
    }

    .container {
        padding: 50px 60px;
        border-radius: 24px;
    }

    /* Strukturelle Änderung 1:
       Auf dem Desktop steht das Logo rechts neben dem Titel
       statt darüber (Mobile: gestapelt). */
    .form-header {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        gap: 0;
        padding-bottom: 28px;
    }

    .form-header > img {
        height: 130px;
    }

    /* Strukturelle Änderung 2:
       Persönliche Angaben stehen nebeneinander und die Felder erhalten
       unterschiedliche, zum Inhalt passende Breiten. */
    .field-vorname,
    .field-nachname { width: 200px; }
    .field-email    { width: 320px; }
    .field-telefon  { width: 180px; }

    /* Matcha-Optionen: 1 Spalte wird zu 2×2 Grid */
    .matcha-opts-pair {
        grid-template-columns: 1fr 1fr;
        gap: 18px 28px;
    }

    /* Datum und Zeit: feste, kompakte Breiten */
    #datum { width: 175px; }
    #zeit  { width: 130px; }

    /* Footer: nebeneinander statt untereinander */
    .site-footer {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
    }

    .confirmation-box {
        padding: 40px;
    }
}