/* ============================================
   SCHWIMM-EVENT - Responsive Styles
   Mobile First Approach
   ============================================ */

/* ============================================
   MOBILE (Default - bis 767px)
   ============================================ */

/* Header kompakter auf Mobile */
.app-header {
    padding: var(--spacing-md);
}

.app-header h1 {
    font-size: var(--font-size-xl);
}

/* Container volle Breite auf Mobile */
.container {
    padding: var(--spacing-sm);
}

/* Kategorie-Grid: 2 Spalten auf Mobile */
.category-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
}

.category-btn {
    min-height: 80px;
    padding: var(--spacing-sm);
}

.category-btn .icon {
    font-size: 1.5rem;
}

.category-btn .label {
    font-size: var(--font-size-sm);
}

/* Radio-Gruppe untereinander auf Mobile */
.radio-group {
    flex-direction: column;
}

.radio-item {
    width: 100%;
}

/* Buttons volle Breite auf Mobile */
.btn-mobile-block {
    width: 100%;
}

/* Form Sections */
.form-section {
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--color-gray-200);
}

.form-section:last-child {
    border-bottom: none;
}

.form-section-title {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-md);
    color: var(--color-gray-700);
}

/* ============================================
   TABLET (768px - 1023px)
   ============================================ */
@media screen and (min-width: 768px) {
    .app-header {
        padding: var(--spacing-lg) var(--spacing-xl);
    }
    
    .app-header h1 {
        font-size: var(--font-size-2xl);
    }
    
    .container {
        padding: var(--spacing-md);
    }
    
    /* Kategorie-Grid: 3 Spalten auf Tablet */
    .category-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-md);
    }
    
    .category-btn {
        min-height: 100px;
    }
    
    .category-btn .icon {
        font-size: 2rem;
    }
    
    .category-btn .label {
        font-size: var(--font-size-base);
    }
    
    /* Radio-Gruppe nebeneinander auf Tablet */
    .radio-group {
        flex-direction: row;
    }
    
    .radio-item {
        width: auto;
        flex: 1;
    }
    
    /* Zwei-Spalten Layout für Formulare */
    .form-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }
    
    .form-row .form-group {
        margin-bottom: 0;
    }
    
    /* Card nebeneinander */
    .card-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-lg);
    }
}

/* ============================================
   DESKTOP (1024px+)
   ============================================ */
@media screen and (min-width: 1024px) {
    :root {
        /* Etwas größere Basis-Schrift auf Desktop */
        --font-size-base: 18px;
    }
    
    .app-header h1 {
        font-size: var(--font-size-3xl);
    }
    
    .container {
        padding: var(--spacing-lg);
    }
    
    /* Kategorie-Grid: alle 6 in einer Reihe auf großen Bildschirmen */
    .category-grid {
        grid-template-columns: repeat(6, 1fr);
    }
    
    .category-btn {
        min-height: 120px;
        padding: var(--spacing-md);
    }
    
    /* Hover-Effekte nur auf Desktop */
    .btn:hover:not(:disabled) {
        transform: translateY(-2px);
    }
    
    .category-btn:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-lg);
    }
}

/* ============================================
   LARGE DESKTOP (1440px+)
   ============================================ */
@media screen and (min-width: 1440px) {
    .container {
        max-width: 900px;
    }
    
    .container-wide {
        max-width: 1400px;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .app-header,
    .app-footer,
    .btn,
    .no-print {
        display: none !important;
    }
    
    body {
        background: white;
        font-size: 12pt;
    }
    
    .container {
        max-width: none;
        padding: 0;
    }
    
    .card {
        box-shadow: none;
        border: 1px solid #ccc;
    }
}

/* ============================================
   ACCESSIBILITY - Reduced Motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   ACCESSIBILITY - High Contrast Mode
   ============================================ */
@media (prefers-contrast: high) {
    :root {
        --color-primary: #0055A4;
        --color-gray-300: #666666;
        --color-gray-500: #444444;
    }
    
    .form-input,
    .form-select {
        border-width: 3px;
    }
    
    .btn {
        border-width: 3px;
    }
}

/* ============================================
   DARK MODE (optional, für später)
   ============================================ */
@media (prefers-color-scheme: dark) {
    /* Kann später implementiert werden */
}

/* ============================================
   TOUCH DEVICE OPTIMIERUNGEN
   ============================================ */
@media (hover: none) and (pointer: coarse) {
    /* Touch-Geräte: Keine Hover-Effekte */
    .btn:hover:not(:disabled) {
        transform: none;
    }
    
    .category-btn:hover {
        transform: none;
        box-shadow: var(--shadow-md);
    }
    
    /* Größere Touch-Targets */
    .form-input,
    .form-select {
        min-height: 52px;
    }
    
    .btn {
        min-height: 52px;
    }
}

/* ============================================
   LANDSCAPE MODE AUF MOBILE
   ============================================ */
@media screen and (max-width: 767px) and (orientation: landscape) {
    .app-header {
        padding: var(--spacing-sm);
    }
    
    .app-header h1 {
        font-size: var(--font-size-lg);
    }
    
    .category-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .category-btn {
        min-height: 70px;
    }
}