/* ============================================
   MOBILE ENHANCED STYLES
   Optimierungen für Handy & Tablet
   ============================================ */

/* Bessere Touch-Bereiche */
@media screen and (max-width: 768px) {
    /* Vergrößerte interaktive Elemente */
    button,
    input[type="text"],
    input[type="number"],
    select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border-radius: var(--radius-md);
        font-family: 'JetBrains Mono', monospace;
        min-height: 48px;
    }

    /* Bessere Focus-States für Touch */
    input:focus,
    select:focus,
    button:focus {
        outline: 2px solid var(--primary-color);
        outline-offset: 2px;
    }

    /* Größere Checkboxen/Radio-Buttons */
    input[type="checkbox"],
    input[type="radio"] {
        width: 24px;
        height: 24px;
        cursor: pointer;
    }

    /* Bessere Select-Dropdowns */
    select {
        background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%234ade80" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 20px;
        padding-right: 40px;
    }

    /* Normale Tool-Card */
    .tool-card {
        box-shadow: var(--shadow-md);
    }

    .tool-card:active {
        box-shadow: var(--shadow-sm);
        transform: scale(0.98);
    }

    /* Bessere Result-Box Lesbarkeit */
    .result-box {
        line-height: 1.7;
        font-size: 0.85rem;
    }

    .result-box h4 {
        font-size: 1rem;
        margin-bottom: 0.75rem;
        color: var(--primary-color);
    }

    /* Bessere Code-Darstellung */
    .result-box pre,
    .result-box code {
        font-size: 0.8rem;
        line-height: 1.6;
        word-wrap: break-word;
        white-space: pre-wrap;
    }

    /* Normale Badges */
    .record-badge,
    .status-badge {
        font-weight: 600;
        border-radius: var(--radius-sm);
        box-shadow: var(--shadow-sm);
    }

    /* Loading-Indikatoren */
    button.loading {
        position: relative;
        color: transparent !important;
    }

    button.loading::after {
        content: '⏳';
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        font-size: 1.5em;
        animation: spin 1s linear infinite;
    }

    /* Bessere Error/Success Messages */
    .error-message,
    .success-message {
        padding: 14px;
        border-radius: 10px;
        margin-top: 12px;
        font-weight: 600;
        border-width: 2px;
        font-size: 0.9em;
    }

    .error-message {
        background: rgba(255, 59, 48, 0.2);
        border-color: #ff3b30;
        color: #ff6b6b;
    }

    .success-message {
        background: rgba(0, 255, 65, 0.2);
        border-color: var(--primary-color);
        color: var(--primary-color);
    }
}

/* Portrait-Mode Spezifische Verbesserungen */
@media screen and (max-width: 480px) {
    /* Bessere Header-Darstellung */
    header {
        background: linear-gradient(135deg, 
            rgba(15, 20, 25, 0.95) 0%, 
            rgba(10, 14, 39, 0.95) 100%);
        box-shadow: 
            0 4px 20px rgba(0, 0, 0, 0.5),
            0 0 30px rgba(0, 255, 65, 0.15);
    }

    header h1 {
        text-shadow: 
            0 0 20px rgba(0, 255, 65, 0.8),
            0 0 40px rgba(0, 255, 65, 0.4),
            0 2px 4px rgba(0, 0, 0, 0.5);
    }

    /* Bessere Spacing zwischen Elementen */
    .tool-card + .tool-card {
        margin-top: 18px;
    }

    .form-group + .form-group {
        margin-top: 18px;
    }

    /* Bessere Button-Styles */
    button {
        background: linear-gradient(135deg, 
            rgba(0, 255, 65, 0.2) 0%, 
            rgba(0, 212, 255, 0.15) 100%);
        border: 2px solid var(--primary-color);
        box-shadow: 
            0 4px 12px rgba(0, 0, 0, 0.4),
            0 0 20px rgba(0, 255, 65, 0.3);
        text-transform: uppercase;
        letter-spacing: 1.5px;
    }

    button:active {
        transform: scale(0.98);
        box-shadow: 
            0 2px 8px rgba(0, 0, 0, 0.4),
            0 0 15px rgba(0, 255, 65, 0.4);
    }

    /* Bessere Input-Styles */
    input[type="text"],
    input[type="number"],
    select {
        background: rgba(0, 0, 0, 0.4);
        border: 2px solid rgba(0, 255, 65, 0.3);
        box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3);
    }

    input:focus,
    select:focus {
        border-color: var(--primary-color);
        box-shadow: 
            inset 0 2px 8px rgba(0, 0, 0, 0.3),
            0 0 20px rgba(0, 255, 65, 0.4);
    }

    /* Bessere Copy-Button */
    .copy-btn {
        background: linear-gradient(135deg, 
            rgba(0, 212, 255, 0.2) 0%, 
            rgba(0, 255, 65, 0.15) 100%);
        border: 2px solid var(--secondary-color);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .copy-btn:active {
        background: rgba(0, 212, 255, 0.3);
    }

    /* Bessere Footer */
    footer {
        background: linear-gradient(135deg, 
            rgba(15, 20, 25, 0.95) 0%, 
            rgba(10, 14, 39, 0.95) 100%);
        box-shadow: 
            0 -4px 20px rgba(0, 0, 0, 0.5),
            0 0 30px rgba(0, 255, 65, 0.15);
        text-align: center;
    }

    /* Bessere Hint-Darstellung */
    .hint {
        background: rgba(0, 255, 65, 0.1);
        border: 2px solid rgba(0, 255, 65, 0.3);
        border-left-width: 4px;
    }

    /* Scroll-Indicator für Result-Boxes */
    .result-box::after {
        content: '↓ Scroll für mehr ↓';
        position: sticky;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 8px;
        background: linear-gradient(
            to top,
            rgba(10, 14, 39, 0.95) 0%,
            transparent 100%
        );
        text-align: center;
        font-size: 0.7em;
        color: var(--primary-color);
        opacity: 0.6;
        pointer-events: none;
    }

    /* Bessere Tab-Indikatoren */
    .tab-content.active {
        animation: slideInUp 0.3s ease;
    }

    @keyframes slideInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/* Landscape-Mode auf Mobile */
@media screen and (max-width: 768px) and (orientation: landscape) {
    /* Kompakterer Header */
    header {
        padding: 12px 16px;
        margin-bottom: 12px;
    }

    header h1 {
        font-size: 1.5em;
    }

    .subtitle {
        font-size: 0.7em;
    }

    /* Kompaktere Navigation */
    .nav-wrapper {
        padding: 8px;
        gap: 6px;
    }

    .nav-tab {
        padding: 10px 8px;
    }

    .nav-icon {
        font-size: 1.4em;
    }

    .nav-text {
        font-size: 0.6em;
    }

    /* Kompaktere Tool-Cards */
    .tool-card {
        padding: 14px;
        margin-bottom: 14px;
    }

    /* Kleinere Result-Boxes */
    .result-box {
        max-height: 300px;
        font-size: 0.75em;
    }
}

/* Sehr kleine Handys (iPhone SE, etc.) */
@media screen and (max-width: 375px) {
    /* Noch größere Touch-Targets */
    button {
        min-height: 52px;
        font-size: 1em;
    }

    input[type="text"],
    input[type="number"],
    select {
        min-height: 50px;
        font-size: 15px;
    }

    /* Kompaktere aber lesbare Fonts */
    body {
        font-size: 14.5px;
    }

    /* Optimierte Navigation */
    .nav-tab {
        padding: 12px 6px;
    }

    .nav-icon {
        font-size: 1.5em;
    }

    .nav-text {
        font-size: 0.6em;
    }
}

/* Dark Mode Support (wenn vom System aktiviert) */
@media (prefers-color-scheme: dark) {
    /* Bereits dark, aber wir können es noch intensivieren */
    @media screen and (max-width: 768px) {
        body {
            background: #000000;
        }

        .container {
            background: rgba(5, 7, 15, 0.95);
        }

        .tool-card {
            background: rgba(0, 0, 0, 0.6);
        }

        input[type="text"],
        input[type="number"],
        select {
            background: rgba(0, 0, 0, 0.6);
        }
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    @media screen and (max-width: 768px) {
        button,
        input,
        select,
        .tool-card {
            border-width: 3px;
        }

        .nav-tab.active {
            border-width: 4px;
        }
    }
}