/**
 * Kinky Circle - Responsive Design CSS
 * Version: 2.0.0
 * Date: 2026-02-04
 *
 * Umfassende Responsive Breakpoints für ALLE Geräte:
 * - Foldable Phones (Samsung Z Fold, Pixel Fold, Honor Magic V2)
 * - iOS Devices (Safe Area Support für Notch/Dynamic Island)
 * - Tablets (iPad, Android Tablets)
 * - Wide Screens / Ultrawide Monitors
 * - Mobile Phones (alle Größen)
 *
 * IN ALLEN NEUEN HTML-DATEIEN EINBINDEN:
 * <link rel="stylesheet" href="css/responsive.css">
 */

/* =====================================================
* ROOT VARIABLES & BASE SETUP
* =====================================================*/

:root {
    /* Safe Area Insets für iOS */
    --safe-area-inset-top: env(safe-area-inset-top, 0px);
    --safe-area-inset-right: env(safe-area-inset-right, 0px);
    --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-inset-left: env(safe-area-inset-left, 0px);

    /* Responsive Container Widths */
    --container-xs: 100%;
    --container-sm: 540px;
    --container-md: 720px;
    --container-lg: 960px;
    --container-xl: 1140px;
    --container-xxl: 1320px;

    /* Responsive Font Sizes */
    --font-size-base: 16px;
    --font-size-sm: 0.875rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;

    /* Responsive Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
}

/* =====================================================
* IOS SAFE AREA SUPPORT
* =====================================================*/

/* Safe Area Padding für iOS Geräte mit Notch/Dynamic Island */
.ios-safe-top {
    padding-top: var(--safe-area-inset-top);
}

.ios-safe-bottom {
    padding-bottom: var(--safe-area-inset-bottom);
}

.ios-safe-left {
    padding-left: var(--safe-area-inset-left);
}

.ios-safe-right {
    padding-right: var(--safe-area-inset-right);
}

.ios-safe-all {
    padding-top: var(--safe-area-inset-top);
    padding-right: var(--safe-area-inset-right);
    padding-bottom: var(--safe-area-inset-bottom);
    padding-left: var(--safe-area-inset-left);
}

/* Fixed Header mit Safe Area Support */
header.fixed,
nav.fixed,
.navigationBar.fixed {
    top: var(--safe-area-inset-top);
}

/* Fixed Footer mit Safe Area Support */
footer.fixed,
.bottomNav.fixed {
    bottom: var(--safe-area-inset-bottom);
}

/* =====================================================
* WIDE-SCREEN & ULTRAWIDE MONITORS
* 1920px+, 2560px+, 3440px+
* =====================================================*/

@media (min-width: 1920px) {
    :root {
        --font-size-base: 17px;
        --font-size-lg: 1.2rem;
        --font-size-xl: 1.35rem;
        --font-size-2xl: 1.6rem;
        --font-size-3xl: 2rem;
    }

    html {
        font-size: 17px;
    }

    /* Container Max-Widths für große Screens */
    .container,
    .container-fluid {
        max-width: var(--container-xl);
        margin-left: auto;
        margin-right: auto;
        padding-left: 2rem;
        padding-right: 2rem;
    }

    /* Grid System für große Screens */
    .grid-lg {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
    }

    /* Navigation wird breiter */
    .main-nav,
    .navigationBar {
        max-width: 1400px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Cards werden größer - aber nicht im Dashboard */
    .card {
        max-width: 400px;
    }

    /* Dashboard cards fill full width */
    .dashboard-page .card,
    .main-content .card,
    .security-section .card {
        max-width: none;
        width: 100%;
    }
}

@media (min-width: 2560px) {
    :root {
        --font-size-base: 18px;
        --font-size-lg: 1.25rem;
        --font-size-xl: 1.4rem;
        --font-size-2xl: 1.75rem;
        --font-size-3xl: 2.25rem;
    }

    html {
        font-size: 18px;
    }

    /* Container Max-Widths für Ultrawide */
    .container {
        max-width: 1600px;
    }

    /* Grid System für Ultrawide */
    .grid-xl {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 2.5rem;
    }

    /* Navigation optimiert für Ultrawide */
    .main-nav {
        max-width: 1800px;
    }

    /* Content wird zentriert mit max-width */
    /* Exclude dashboard main-content - it has its own layout */
    .content-wrapper {
        max-width: 1800px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Only apply to non-dashboard pages */
    body:not(.dashboard-page) .main-content {
        max-width: 1800px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (min-width: 3440px) {
    :root {
        --font-size-base: 19px;
        --font-size-lg: 1.3rem;
        --font-size-xl: 1.5rem;
        --font-size-2xl: 1.9rem;
        --font-size-3xl: 2.5rem;
    }

    html {
        font-size: 19px;
    }

    /* Super Ultrawide Optimierung */
    .container {
        max-width: 2000px;
    }

    /* Content bleibt lesbar durch max-width */
    /* Exclude dashboard main-content - it has its own layout */
    .content-wrapper,
    article {
        max-width: 2200px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Only apply to non-dashboard pages */
    body:not(.dashboard-page) .main-content {
        max-width: 2200px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Grid System für Super Ultrawide */
    .grid-xxl {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        gap: 3rem;
    }
}

/* =====================================================
* FOLDABLE PHONES (Alle Folds)
* =====================================================*/

/* Samsung Galaxy Z Fold 6 (unfolded) */
@media (min-width: 1800px) and (max-width: 1920px) and (min-height: 1300px) {
    .container {
        max-width: 85%;
    }

    /* Content vom Scharnier fernhalten */
    .content-wrapper {
        padding-left: 3%;
        padding-right: 3%;
    }

    /* Zweispaltig auf Fold */
    .foldable-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }
}

/* Google Pixel 9 Pro Fold (8" display) */
@media (min-width: 2800px) and (max-width: 3000px) and (min-height: 1400px) {
    html {
        font-size: 17.5px;
    }

    .container {
        max-width: 90%;
    }

    /* Optimiert für großes Display */
    .card {
        max-width: 450px;
    }

    /* Dashboard cards fill full width */
    .dashboard-page .card,
    .main-content .card,
    .security-section .card {
        max-width: none;
        width: 100%;
    }

    .event-card,
    .user-card {
        min-height: 200px;
    }
}

/* Honor Magic V2 (duennstes Foldable) */
@media (min-width: 2100px) and (max-width: 2400px) and (min-height: 1344px) {
    .container {
        max-width: 92%;
    }

    /* Vollständige Breite nutzen */
    .hero,
    .banner {
        width: 100%;
        max-width: none;
    }
}

/* Generische Fold-Geräte */
@media (min-width: 1400px) and (max-width: 1600px) and (min-aspect-ratio: 1.7) {
    .container {
        max-width: 90%;
    }

    /* Avoid hinge area */
    .container {
        padding-left: 5%;
        padding-right: 5%;
    }
}

/* =====================================================
* TABLET SUPPORT (iPad, Android Tablets)
* =====================================================*/

/* iPad Pro 12.9" (1024px - 1366px) */
@media (min-width: 1024px) and (max-width: 1366px) {
    html {
        font-size: 16.5px;
    }

    .container {
        max-width: 960px;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    /* Touch-friendly sizing */
    .btn,
    button,
    a.button {
        min-height: 48px;
        min-width: 48px;
        padding: 12px 24px;
    }

    /* Tablet Grid */
    .grid-tablet {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }

    /* Navigation optimiert für Tablet */
    .main-nav .nav-link {
        padding: 0.75rem 1rem;
        font-size: 1rem;
    }
}

/* iPad Mini / Small Tablets (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .container {
        max-width: 720px;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Landscape Optimierung */
    @media (orientation: landscape) {
        .container {
            max-width: 960px;
        }

        header,
        nav {
            padding: 0.5rem 1rem;
        }
    }

    /* Portrait Optimierung */
    @media (orientation: portrait) {
        .container {
            max-width: 600px;
        }
    }

    /* Touch Targets */
    .btn,
    button {
        min-height: 44px;
    }

    /* Tablet Grid */
    .grid-tablet-sm {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

/* Android Tablets (Samsung, Xiaomi, etc.) */
@media (min-width: 800px) and (max-width: 1280px) {
    /* Bessere Font Rendering */
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .container {
        max-width: 768px;
    }
}

/* Tablet Landscape allgemein */
@media (min-width: 768px) and (orientation: landscape) {
    /* Headers werden kompakter */
    header {
        padding: 0.5rem 1rem;
    }

    /* Hero wird kleiner im Landscape */
    .hero {
        min-height: auto;
    }

    /* Navigation horizontal */
    .main-nav {
        flex-direction: row;
    }
}

/* Tablet Portrait allgemein */
@media (max-width: 1024px) and (orientation: portrait) {
    /* Navigation vertikal */
    .main-nav {
        flex-direction: column;
    }

    /* Cards werden vollbreit */
    .card {
        width: 100%;
        max-width: none;
    }
}

/* =====================================================
* LAPTOPS & SMALL DESKTOPS (1024px - 1919px)
* =====================================================*/

@media (min-width: 1024px) and (max-width: 1439px) {
    .container {
        max-width: 960px;
    }

    /* Grid System */
    .grid-desktop {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
}

@media (min-width: 1440px) and (max-width: 1919px) {
    .container {
        max-width: 1140px;
    }

    /* Grid System */
    .grid-desktop-lg {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
    }
}

/* =====================================================
* MOBILE PHONES
* =====================================================*/

/* Large Phones / Small Tablets (600px - 767px) */
@media (max-width: 767px) {
    html {
        font-size: 15px;
    }

    .container {
        max-width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Content wird vollbreit */
    .container-fluid {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Navigation wird mobil */
    .main-nav {
        flex-direction: column;
        padding: 1rem;
    }

    /* Cards werden vollbreit */
    .card,
    .event-card,
    .user-card {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    /* Single Column Layout */
    .grid-mobile {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    /* Buttons werden vollbreit */
    .btn-group {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .btn-group .btn {
        width: 100%;
    }

    /* Typography Skalierung */
    h1 {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.25rem;
    }

    h4 {
        font-size: 1.1rem;
    }

    /* Forms werden single-column */
    .form-row {
        grid-template-columns: 1fr !important;
        gap: 0.75rem;
    }

    /* Tables responsive */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        font-size: 0.9rem;
    }

    /* Images responsive */
    img {
        max-width: 100%;
        height: auto;
    }
}

/* Medium Mobile Phones (480px - 599px) */
@media (max-width: 599px) {
    html {
        font-size: 14px;
    }

    .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* Kompaktere Headers */
    header {
        padding: 0.75rem;
    }

    header .logo {
        max-width: 150px;
    }

    /* Navigation Icon-Only */
    .main-nav .nav-link {
        padding: 0.75rem;
    }

    .main-nav .nav-link span {
        display: none;
    }

    .main-nav .nav-link i {
        display: inline;
    }

    /* Buttons kompakt */
    .btn {
        padding: 10px 16px;
        font-size: 0.9rem;
    }

    /* Typography */
    h1 {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 1.3rem;
    }

    h3 {
        font-size: 1.15rem;
    }

    /* Cards kompakt */
    .card {
        border-radius: 12px;
    }

    .card-body {
        padding: 1rem;
    }

    /* Input Fields */
    input,
    select,
    textarea {
        padding: 10px 12px;
        font-size: 16px; /* Prevents zoom on iOS */
    }
}

/* Small Mobile Phones (< 480px) */
@media (max-width: 479px) {
    html {
        font-size: 13px;
    }

    .container {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    /* Minimal Padding */
    header,
    footer,
    .section {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* Extra kompakte Navigation */
    .main-nav {
        gap: 0.25rem;
    }

    .main-nav .nav-item {
        padding: 0.5rem;
    }

    /* Stack Buttons */
    .btn-group {
        flex-direction: column;
        gap: 0.5rem;
    }

    .btn {
        width: 100%;
    }

    /* Typography */
    h1 {
        font-size: 1.4rem;
        line-height: 1.2;
    }

    h2 {
        font-size: 1.25rem;
    }

    h3 {
        font-size: 1.1rem;
    }

    /* Compact Cards */
    .card {
        border-radius: 10px;
    }

    .card-body {
        padding: 0.875rem;
    }

    /* Hide less important elements */
    .hide-on-mobile,
    .desktop-only {
        display: none !important;
    }
}

/* iPhone SE / Very Small Screens (< 375px) */
@media (max-width: 374px) {
    /* Ultra-kompaktes Layout */
    .container {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    /* Logo skalieren */
    .logo img {
        max-height: 30px;
    }

    /* Ultra- kompakte Buttons */
    .btn {
        padding: 8px 12px;
        font-size: 0.85rem;
        min-height: 40px;
    }

    /* Typography */
    h1 {
        font-size: 1.25rem;
    }

    h2 {
        font-size: 1.15rem;
    }

    h3 {
        font-size: 1.05rem;
    }

    p,
    span,
    div {
        font-size: 0.85rem;
    }

    /* Card minimal */
    .card {
        border-radius: 8px;
    }

    .card-body {
        padding: 0.75rem;
    }
}

/* =====================================================
* IPHONE-SPECIFIC (Notch, Dynamic Island)
* =====================================================*/

/* iPhone mit Dynamic Island (iPhone 14 Pro/15 Pro/16 Pro) */
@media (max-width: 430px) and (min-height: 800px) {
    /* Safe Area für Dynamic Island */
    header,
    .fixed-header {
        padding-top: calc(0.75rem + var(--safe-area-inset-top));
    }

    /* Home Indicator unten */
    footer,
    .bottom-nav,
    .fixed-footer {
        padding-bottom: calc(0.75rem + var(--safe-area-inset-bottom));
    }
}

/* iPhone X bis iPhone 13 (Notch) */
@media (max-width: 428px) and (min-height: 800px) {
    .notch-aware {
        padding-top: calc(44px + var(--safe-area-inset-top));
    }
}

/* =====================================================
* ORIENTATION-SPECIFIC
* =====================================================*/

/* Landscape auf allen Mobile Geräten */
@media (max-width: 1024px) and (orientation: landscape) {
    /* Header wird kompakt */
    header {
        min-height: auto;
    }

    .hero {
        min-height: auto;
        padding: 1rem;
    }

    /* Content Grid */
    .landscape-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }
}

/* Portrait auf Mobile Geräten */
@media (max-width: 1024px) and (orientation: portrait) {
    /* Vollständige Höhe nutzen */
    .hero {
        min-height: 60vh;
    }

    /* Single Column */
    .portrait-stack {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
}

/* =====================================================
* UTILITY CLASSES
* =====================================================*/

/* Responsive Container */
.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Responsive Grid */
.responsive-grid {
    display: grid;
    gap: 1rem;
}

/* Mobile First - 1 Column */
.responsive-grid {
    grid-template-columns: 1fr;
}

/* Small Tablets - 2 Columns */
@media (min-width: 600px) {
    .responsive-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Tablets - 3 Columns */
@media (min-width: 900px) {
    .responsive-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Desktop - 4 Columns */
@media (min-width: 1200px) {
    .responsive-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Wide Desktop - 6 Columns */
@media (min-width: 1600px) {
    .responsive-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* Hide/Show Classes */
.show-on-mobile {
    display: none;
}

@media (max-width: 767px) {
    .show-on-mobile {
        display: block !important;
    }

    .hide-on-mobile {
        display: none !important;
    }
}

.show-on-tablet {
    display: none;
}

@media (min-width: 768px) and (max-width: 1024px) {
    .show-on-tablet {
        display: block !important;
    }

    .hide-on-tablet {
        display: none !important;
    }
}

.show-on-desktop {
    display: none;
}

@media (min-width: 1025px) {
    .show-on-desktop {
        display: block !important;
    }

    .hide-on-desktop {
        display: none !important;
    }
}

/* Text Responsive */
.text-responsive {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
}

/* =====================================================
* ACCESSIBILITY & REDUCED MOTION
* =====================================================*/

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

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .card,
    .btn {
        border-width: 2px;
    }

    a,
    .btn {
        text-decoration: underline;
    }
}

/* =====================================================
* PRINT STYLES
* =====================================================*/

@media print {
    /* Hide non-essential elements */
    .no-print,
    nav,
    footer,
    .btn {
        display: none !important;
    }

    /* Ensure readable text */
    body {
        font-size: 12pt;
        line-height: 1.5;
        color: #000;
        background: #fff;
    }

    /* Reset modal overlays */
    .modal-overlay {
        display: none !important;
    }
}