/* ==============================================================
   ☕ Kaffeekränzchen — Mobile & Tablet Responsive Layer
   ==============================================================
   Globaler Mobile-/Tablet-Fix-Layer für alle Seiten.
   Wird NACH allen anderen CSS-Dateien geladen,
   damit es bestehende Styles gezielt überschreiben kann.
   Breakpoints:
     - Tablet groß  : ≤ 1024px
     - Tablet klein : ≤ 900px
     - Mobile groß  : ≤ 768px
     - Mobile mitte : ≤ 600px
     - Mobile klein : ≤ 480px
     - Mini phone   : ≤ 380px
   ============================================================== */

/* ====== Globale Basics ====== */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

img, video, iframe {
    max-width: 100%;
}

/* Touch-Geräte: Hover-Feinschliff */
@media (hover: none) and (pointer: coarse) {
    /* Reduce hover transforms which feel awkward on touch */
    a:hover, button:hover { transform: none !important; }
}

/* ===== Body / Container ===== */
@media (max-width: 1024px) {
    body { line-height: 1.55; }
}
@media (max-width: 768px) {
    .container { padding: 0 14px !important; max-width: 100% !important; }
}
@media (max-width: 480px) {
    .container { padding: 0 12px !important; }
}

/* ============================================================
   HEADER — Erweiterte Mobile-Optimierungen
   ============================================================ */

/* Logo + Title weniger Platz */
@media (max-width: 1024px) {
    .kk-header { padding: 0 18px; gap: 12px; }
    .kk-header__title { font-size: 0.92rem; }
}
@media (max-width: 900px) {
    .kk-header__center { display: none; }
}
@media (max-width: 760px) {
    .kk-header { padding: 0 12px; gap: 8px; }
    .kk-header__title { display: none; }
    .kk-header__menu-btn { padding: 6px 10px; font-size: 0.78rem; }
    .kk-header__menu-btn span:not(.kk-header__chevron) { display: none; }
    .kk-header__login { padding: 6px 12px; font-size: 0.78rem; }
    .kk-header__avatar { width: 28px; height: 28px; }
    .kk-header__name { max-width: 80px; font-size: 0.78rem; }
    .kk-header__avatar-btn { padding: 4px 10px 4px 4px; gap: 6px; }
    .kk-header__dropdown {
        right: 8px !important;
        left: 8px !important;
        min-width: 0 !important;
        max-height: calc(100vh - 80px);
        overflow-y: auto;
    }
    .kk-header__dd-item { padding: 11px 12px; }
    .kk-header__dd-item-label { font-size: 0.92rem; }
    .kk-header__dd-item-sub { font-size: 0.72rem; }
}
@media (max-width: 420px) {
    .kk-header { padding: 0 10px; gap: 6px; }
    .kk-header__name { display: none; }
    .kk-header__login span { display: none; }
    .kk-header__login { padding: 7px 10px; }
    .kk-header__menu-btn { padding: 7px 9px; }
}
@media (max-width: 360px) {
    .kk-header__brand { gap: 0; }
    .kk-header__logo { width: 28px; height: 28px; }
}

/* Login-Modal */
@media (max-width: 480px) {
    .kk-login-modal { padding: 14px; }
    .kk-login-modal__card { padding: 28px 20px 22px; border-radius: 18px; }
    .kk-login-modal__icon { width: 54px; height: 54px; font-size: 26px; }
    .kk-login-modal__title { font-size: 20px; }
    .kk-login-modal__text { font-size: 13px; margin-bottom: 18px; }
    .kk-login-modal__actions { flex-direction: column; }
    .kk-login-modal__btn { width: 100%; justify-content: center; padding: 12px 18px; }
}

/* ============================================================
   DROPDOWN-MENÜ — Mobile Sheet-Style mit Backdrop
   ============================================================
   Auf Mobile wird das Dropdown zu einem vollwertigen, vom Header
   abgesetzten Panel mit Backdrop-Overlay. Großzügige Touch-Targets,
   smooth slide-down Animation, Safe-Area Support.
   ============================================================ */
@media (max-width: 760px) {
    /* Stacking-Context aufbrechen, damit fixed Position funktioniert */
    .kk-header__right { position: static !important; }

    /* Dropdown wird zum viewport-fixed Panel */
    .kk-header__dropdown {
        position: fixed !important;
        top: calc(var(--kkh-height) + 6px) !important;
        left: 10px !important;
        right: 10px !important;
        bottom: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        width: auto !important;
        max-height: calc(100vh - var(--kkh-height) - 20px) !important;
        max-height: calc(100dvh - var(--kkh-height) - 20px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding: 8px !important;
        border-radius: 18px !important;
        background: rgba(22, 14, 10, 0.96) !important;
        border-color: rgba(212, 160, 83, 0.18) !important;
        box-shadow:
            0 30px 80px rgba(0, 0, 0, 0.6),
            0 12px 36px rgba(0, 0, 0, 0.45),
            inset 0 1px 0 rgba(244, 232, 212, 0.08) !important;
        transform: translateY(-12px) scale(0.96) !important;
        transition:
            opacity 0.22s cubic-bezier(.4,0,.2,1),
            transform 0.28s cubic-bezier(.34,1.56,.64,1) !important;
        /* Padding-bottom für iOS Home-Indicator */
        padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
    }
    .kk-header__dropdown.open {
        transform: translateY(0) scale(1) !important;
    }

    /* === Backdrop-Overlay hinter dem Dropdown === */
    .kk-header__dropdown::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(8, 5, 3, 0);
        backdrop-filter: blur(0);
        -webkit-backdrop-filter: blur(0);
        pointer-events: none;
        transition:
            background 0.25s ease,
            backdrop-filter 0.25s ease,
            -webkit-backdrop-filter 0.25s ease;
        z-index: -1;
    }
    .kk-header__dropdown.open::before {
        background: rgba(8, 5, 3, 0.55);
        backdrop-filter: blur(6px) saturate(120%);
        -webkit-backdrop-filter: blur(6px) saturate(120%);
        pointer-events: auto;
    }

    /* === Body-Scroll sperren wenn Dropdown offen === */
    body:has(.kk-header__dropdown.open) {
        overflow: hidden;
        touch-action: none;
    }

    /* === Größere Touch-Targets im Dropdown === */
    .kk-header__dd-head {
        padding: 14px 12px 16px !important;
        gap: 14px !important;
        margin-bottom: 8px !important;
    }
    .kk-header__dd-head--guest {
        padding: 12px 12px 14px !important;
    }
    .kk-header__dd-avatar {
        width: 48px !important;
        height: 48px !important;
    }
    .kk-header__dd-head-name {
        font-size: 1.02rem !important;
    }
    .kk-header__dd-head-sub {
        font-size: 0.78rem !important;
        margin-top: 3px !important;
    }

    /* Group-Label klarer */
    .kk-header__dd-group {
        padding: 12px 12px 6px !important;
        font-size: 0.7rem !important;
        letter-spacing: 0.14em !important;
    }

    /* Items mit großzügigem Touch-Bereich */
    .kk-header__dd-item {
        padding: 12px !important;
        gap: 14px !important;
        font-size: 0.95rem !important;
        border-radius: 12px !important;
        min-height: 56px;
    }
    .kk-header__dd-item-ico {
        width: 40px !important;
        height: 40px !important;
        font-size: 1.2rem !important;
        border-radius: 10px !important;
    }
    .kk-header__dd-item-label {
        font-size: 0.96rem !important;
    }
    .kk-header__dd-item-sub {
        font-size: 0.78rem !important;
        margin-top: 2px !important;
    }
    .kk-header__dd-lock {
        font-size: 1rem !important;
    }

    /* Stärkerer Active-Indikator */
    .kk-header__dd-item.is-active::after {
        width: 8px !important;
        height: 8px !important;
    }

    /* Separator etwas Luft */
    .kk-header__dd-sep {
        margin: 10px 6px !important;
    }

    /* Hover-Effekte auf Touch deaktivieren — :active nutzen */
    .kk-header__dd-item:hover {
        background: transparent;
        color: var(--kkh-cream);
    }
    .kk-header__dd-item:active {
        background: rgba(212, 160, 83, 0.20) !important;
        color: var(--kkh-gold-light) !important;
        transform: scale(0.98);
        transition: transform 0.1s ease, background 0.1s ease;
    }
}

/* Sehr kleine Phones — Dropdown noch enger */
@media (max-width: 420px) {
    .kk-header__dropdown {
        left: 8px !important;
        right: 8px !important;
        top: calc(var(--kkh-height) + 4px) !important;
        border-radius: 16px !important;
    }
    .kk-header__dd-item {
        padding: 11px !important;
        min-height: 52px;
    }
    .kk-header__dd-item-ico {
        width: 36px !important;
        height: 36px !important;
        font-size: 1.1rem !important;
    }
    .kk-header__dd-head {
        padding: 12px 10px 14px !important;
    }
    .kk-header__dd-avatar {
        width: 44px !important;
        height: 44px !important;
    }
}

/* Reduced-Motion Variante */
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
    .kk-header__dropdown,
    .kk-header__dropdown::before {
        transition: opacity 0.15s ease !important;
        transform: none !important;
    }
}

/* ============================================================
   INDEX / HOME — style.css Erweiterungen
   ============================================================ */

/* Tablet 1024-769px */
@media (max-width: 1024px) {
    .hero { padding: 70px 18px 50px; }
    .hero-logo { width: 130px; height: 130px; }
    .hero-tagline { font-size: 1.25rem; }
    .hero-desc { font-size: 0.95rem; }
    .section { padding: 70px 0; }
    .vibe-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .apps-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile 768px */
@media (max-width: 768px) {
    /* Navbar (alte) */
    .navbar { height: 56px; padding: 0 12px; }

    /* Hero - bessere Werte */
    .hero {
        padding: 60px 18px 50px;
        min-height: auto;
    }
    .hero-content { max-width: 100%; }
    .hero-logo { width: 120px; height: 120px; }
    .hero-logo-wrap { margin-bottom: 18px; }
    .hero-tagline {
        font-size: 1.05rem;
        line-height: 1.4;
        margin-bottom: 12px;
    }
    .hero-desc {
        font-size: 0.9rem;
        line-height: 1.7;
        margin-bottom: 22px;
        padding: 0 4px;
    }
    .hero-actions {
        flex-direction: column;
        width: 100%;
        gap: 10px;
        align-items: stretch;
    }
    .hero-actions .btn,
    .btn {
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
        padding: 12px 20px;
        font-size: 0.88rem;
        justify-content: center;
        min-height: 44px;
    }

    /* Sections */
    .section { padding: 50px 0; }
    .section + .section { padding-top: 36px; }

    /* Cozy headings */
    .cozy-heading { font-size: clamp(1.1rem, 5vw, 1.5rem) !important; padding: 0 8px; }
    .cozy-sub { font-size: 0.85rem; padding: 0 12px; margin-bottom: 22px; }

    /* Coffee Machine - kleinere mobile Größe & Position */
    .coffee-machine {
        right: 4px !important;
        bottom: 4px !important;
        transform: scale(0.45) !important;
        transform-origin: bottom right !important;
    }
    .coffee-machine:hover {
        transform: scale(0.45) !important;
    }
    .bean-clear-btn {
        right: 60px !important;
        bottom: 12px !important;
        transform: scale(0.65) !important;
    }

    /* Update / Kino Banner */
    .update-banner { padding: 24px 0 36px; }
    .update-card { padding: 16px 14px; border-radius: 14px; }
    .update-title { font-size: 1rem; }
    .update-desc { font-size: 0.8rem; line-height: 1.5; }

    /* Kino theatre mode */
    .kino-wrapper.playing {
        width: 96vw;
        max-width: 96vw;
        padding: 10px;
        flex-direction: column;
        gap: 10px;
    }
    .kino-wrapper.playing .kino-info {
        max-height: 35vh;
        overflow-y: auto;
        padding: 6px 4px;
    }
    .kino-info h3 { font-size: 1rem; margin-bottom: 8px; }
    .kino-info li { font-size: 0.78rem; padding-left: 14px; }
    .kino-info ul { gap: 8px; }

    /* IP-Block */
    .ip-block {
        flex-direction: column;
        text-align: center;
        gap: 10px;
        padding: 14px;
    }
    .ip-addr { font-size: 0.95rem; word-break: break-all; }
    .ip-btn { padding: 8px 14px; font-size: 0.78rem; min-height: 38px; }

    /* Whitelist-Karten */
    .whitelist-card { padding: 18px 14px; }
    .wl-step { padding: 12px; }
    .wl-step strong { font-size: 0.88rem; }
    .wl-step p { font-size: 0.8rem; }
    .trust-box { padding: 10px 12px; }
    .trust-box code { font-size: 0.75rem; word-break: break-all; }

    /* Map / mc-block-frame */
    .mc-block-frame {
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        border-width: 4px;
    }
    .mc-block-label { font-size: 0.75rem; padding: 6px 10px; }
    .mc-block-top { padding: 6px 10px; }
    .map-fullscreen-link { padding: 11px 18px; font-size: 0.85rem; }

    /* Modpack */
    .modpack-box {
        flex-direction: column !important;
    }
    .modpack-icon-area {
        width: 100% !important;
        min-height: 70px !important;
        border-right: none !important;
        border-bottom: 1px solid var(--cream-08, rgba(244,232,212,0.08)) !important;
    }
    .modpack-details { padding: 16px 14px !important; }
    .modpack-details h3 { font-size: 1rem !important; }
    .modpack-details > p { font-size: 0.82rem !important; }

    /* Vibe / Community */
    .vibe-grid {
        grid-template-columns: 1fr !important;
        max-width: 360px !important;
        margin-left: auto;
        margin-right: auto;
        gap: 10px !important;
    }
    .vibe-card { padding: 18px 16px; }
    .vibe-emoji { font-size: 1.7rem; }

    /* Discord-Invite */
    .discord-invite-inner { padding: 22px 16px !important; }
    .discord-invite h3 { font-size: 1.05rem !important; line-height: 1.35; }
    .discord-invite p { font-size: 0.82rem !important; }

    /* Apps Showcase */
    .apps-showcase { padding-top: 40px; padding-bottom: 60px; }
    .apps-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
    .app-tile { padding: 18px 16px 20px !important; }
    .app-tile h3 { font-size: 17px !important; }
    .app-tile p { font-size: 13px !important; }

    /* Footer */
    .footer-inner { flex-direction: column; gap: 8px; text-align: center; }
    .footer-love { font-size: 0.7rem; }

    /* Easter eggs auf mobile aus */
    .creeper-egg { display: none !important; }

    /* DSGVO Banner */
    #kkConsent {
        left: 8px !important;
        right: 8px !important;
        bottom: 8px !important;
        border-radius: 14px !important;
    }
    #kkConsent .kk-consent-inner {
        padding: 14px 14px !important;
        gap: 12px !important;
        flex-direction: column;
    }
    #kkConsent .kk-consent-text strong { font-size: 1rem !important; }
    #kkConsent .kk-consent-text p { font-size: 0.82rem !important; }
    #kkConsent .kk-consent-actions {
        width: 100% !important;
        flex-direction: row;
    }
    #kkConsent .kk-consent-actions button {
        flex: 1 1 auto;
        padding: 10px 14px !important;
        font-size: 0.85rem !important;
    }
}

/* Sehr kleine Phones */
@media (max-width: 400px) {
    .hero { padding: 50px 14px 40px; }
    .hero-logo { width: 100px; height: 100px; border-radius: 18px; }
    .hero-tagline { font-size: 0.95rem; }
    .hero-desc { font-size: 0.82rem; }
    .cozy-heading { font-size: 1.1rem !important; }
    .ip-addr { font-size: 0.82rem; }
    .ip-btn { padding: 7px 11px; font-size: 0.72rem; }

    .coffee-machine {
        transform: scale(0.4) !important;
    }
}

/* ============================================================
   PANEL.CSS Erweiterungen
   ============================================================ */
@media (max-width: 1024px) {
    .panel-dashboard,
    .panel-dashboard .container {
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .panel-grid,
    .panel-grid-2,
    .panel-grid-3 {
        grid-template-columns: 1fr 1fr !important;
        gap: 14px !important;
    }
}

@media (max-width: 768px) {
    .panel-dashboard {
        padding-top: 78px !important;
    }
    .panel-section,
    .panel-card {
        padding: 16px 14px !important;
        border-radius: 14px !important;
    }
    .panel-grid,
    .panel-grid-2,
    .panel-grid-3,
    .panel-grid-4 {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .panel-title,
    .panel-section h2 { font-size: 1.1rem !important; }
    .panel-stat { padding: 14px !important; }
    .panel-stat-value { font-size: 1.5rem !important; }
    .panel-stat-label { font-size: 0.72rem !important; }

    /* Tab-Nav horizontal scrollen */
    .panel-tabs,
    .panel-nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 6px;
        padding-bottom: 6px;
    }
    .panel-tabs::-webkit-scrollbar,
    .panel-nav-tabs::-webkit-scrollbar { display: none; }
    .panel-tab,
    .panel-nav-tab {
        flex: 0 0 auto;
        white-space: nowrap;
        font-size: 0.82rem !important;
        padding: 8px 14px !important;
    }

    /* Tabellen werden zu scrollbaren Containern */
    .panel-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -14px;
        padding: 0 14px;
    }
    .panel-table {
        font-size: 0.82rem;
        min-width: 520px;
    }
    .panel-table th,
    .panel-table td { padding: 8px 10px !important; }

    /* Form-Eingaben Touch-tauglich */
    .panel-input,
    .panel-select,
    .panel-textarea,
    input.panel-input,
    textarea.panel-input,
    select.panel-input {
        font-size: 16px !important; /* verhindert iOS-Zoom */
        padding: 10px 12px !important;
        min-height: 44px;
    }
    .panel-btn {
        min-height: 42px;
        padding: 10px 16px !important;
        font-size: 0.88rem !important;
    }
}

@media (max-width: 480px) {
    .panel-dashboard { padding-top: 72px !important; }
    .panel-section,
    .panel-card { padding: 14px 12px !important; border-radius: 12px !important; }
    .panel-stat-value { font-size: 1.3rem !important; }
}

/* ============================================================
   ADMIN.CSS Erweiterungen
   ============================================================ */
@media (max-width: 1200px) {
    .admin-grid,
    .admin-grid-3 {
        grid-template-columns: 1fr 1fr !important;
    }
}
@media (max-width: 900px) {
    .admin-sidebar {
        width: 100% !important;
        position: static !important;
        height: auto !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(244, 232, 212, 0.08);
    }
    .admin-main {
        margin-left: 0 !important;
        padding: 18px 14px !important;
    }
    .admin-grid,
    .admin-grid-2,
    .admin-grid-3,
    .admin-grid-4 {
        grid-template-columns: 1fr !important;
    }
    .admin-nav,
    .admin-nav-list {
        flex-direction: row !important;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 6px;
        padding: 8px 12px;
    }
    .admin-nav::-webkit-scrollbar { display: none; }
    .admin-nav-item,
    .admin-nav-link {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}
@media (max-width: 768px) {
    .admin-dashboard,
    body.admin-body { padding-top: 70px !important; }
    .admin-section,
    .admin-card { padding: 14px !important; border-radius: 12px !important; }
    .admin-title,
    .admin-section h2 { font-size: 1.1rem !important; }
    .admin-stat-value { font-size: 1.4rem !important; }
    .admin-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -14px;
        padding: 0 14px;
    }
    .admin-table {
        font-size: 0.8rem;
        min-width: 540px;
    }
    .admin-table th,
    .admin-table td { padding: 8px 10px !important; }
    .admin-input,
    .admin-select,
    .admin-textarea,
    input.admin-input,
    textarea.admin-input,
    select.admin-input {
        font-size: 16px !important;
        padding: 10px 12px !important;
        min-height: 44px;
    }
    .admin-btn,
    button.admin-btn {
        min-height: 42px;
        padding: 10px 16px !important;
        font-size: 0.88rem !important;
    }
    .admin-actions { flex-wrap: wrap !important; gap: 8px !important; }
    .admin-actions .admin-btn { flex: 1 1 calc(50% - 4px); }
}

/* ============================================================
   RADIO.CSS / WATCH.CSS Erweiterungen
   ============================================================ */
@media (max-width: 1024px) {
    .w2g-body,
    .radio-body { padding-top: 76px !important; }
    .w2g-grid,
    .radio-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}
@media (max-width: 768px) {
    .w2g-body,
    .radio-body {
        padding: 70px 12px 30px !important;
    }
    .w2g-section,
    .radio-section {
        padding: 14px !important;
        border-radius: 14px !important;
    }
    .w2g-player-wrap,
    .video-player {
        border-radius: 12px !important;
    }
    .w2g-controls,
    .radio-controls {
        flex-wrap: wrap;
        gap: 8px;
    }
    .radio-now-playing { padding: 14px !important; }
    .radio-np-content {
        flex-direction: column;
        align-items: stretch;
    }
    .radio-np-thumb-wrap {
        width: 100% !important;
        max-width: 240px !important;
        margin: 0 auto;
    }
    .radio-np-info { text-align: center; }
    .radio-volume-row { flex-wrap: wrap; }
    .radio-add-row {
        flex-direction: column;
        gap: 8px;
    }
    .radio-add-row input[type="text"] {
        font-size: 16px !important;
        padding: 10px 12px !important;
    }
    .radio-add-row .radio-btn,
    .radio-btn {
        min-height: 42px;
        font-size: 0.85rem !important;
    }
    .radio-search-wrap input[type="text"] {
        font-size: 16px !important;
        padding: 10px 12px !important;
    }
    .radio-suggestions {
        max-height: 60vh !important;
    }

    /* Watch — Chat */
    .w2g-chat,
    .chat-panel {
        max-height: 50vh;
        min-height: 240px;
    }
    .w2g-chat-input,
    .chat-input {
        font-size: 16px !important;
        padding: 10px 12px !important;
    }
    .w2g-queue-item,
    .radio-queue-item {
        padding: 10px !important;
    }
}

@media (max-width: 480px) {
    .w2g-body,
    .radio-body { padding: 66px 10px 24px !important; }
    .w2g-section,
    .radio-section { padding: 12px !important; }
}

/* ============================================================
   PROFILE-EDITOR.CSS Erweiterungen
   ============================================================ */
@media (max-width: 1024px) {
    .pe-shell,
    .editor-shell {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        padding: 80px 14px 40px !important;
    }
    .pe-sidebar,
    .editor-sidebar {
        position: static !important;
        max-height: none !important;
        width: 100% !important;
    }
    .pe-preview,
    .editor-preview {
        position: static !important;
        height: 60vh !important;
        min-height: 400px !important;
    }
}
@media (max-width: 768px) {
    .pe-shell,
    .editor-shell { padding: 76px 10px 30px !important; }
    .pe-section,
    .editor-section {
        padding: 14px !important;
        border-radius: 12px !important;
    }
    .pe-tab-list,
    .editor-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .pe-tab-list::-webkit-scrollbar,
    .editor-tabs::-webkit-scrollbar { display: none; }
    .pe-tab,
    .editor-tab {
        flex: 0 0 auto;
        white-space: nowrap;
        font-size: 0.82rem !important;
        padding: 8px 12px !important;
    }
    .pe-input,
    .pe-select,
    .pe-textarea,
    .editor-input {
        font-size: 16px !important;
        padding: 10px 12px !important;
        min-height: 42px;
    }
    .pe-grid,
    .editor-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .pe-color-swatches,
    .editor-color-swatches {
        flex-wrap: wrap;
        gap: 8px;
    }
    .pe-preview {
        height: 70vh !important;
        min-height: 420px !important;
    }
}

@media (max-width: 480px) {
    .pe-shell,
    .editor-shell { padding: 72px 8px 24px !important; }
    .pe-section,
    .editor-section { padding: 12px !important; }
}

/* ============================================================
   PROFILE.CSS — Public Profile Page Erweiterungen
   ============================================================ */
@media (max-width: 768px) {
    .pf-shell { padding: 30px 14px 90px !important; }
    .pf-card { padding: 28px 18px 22px !important; border-radius: 22px !important; }
    .pf-name { font-size: 24px !important; }
    .pf-bio { font-size: 14px !important; line-height: 1.55; }
    .pf-avatar-wrap {
        width: 110px !important;
        height: 110px !important;
    }
    .pf-link {
        padding: 13px 14px !important;
        min-height: 50px;
    }
    .pf-link-label { font-size: 14px !important; }
    .pf-socials {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }
    .pf-social-btn {
        width: 42px !important;
        height: 42px !important;
    }
    .pf-player {
        right: 10px !important;
        left: 10px !important;
        bottom: 10px !important;
        max-width: none !important;
        width: auto !important;
    }
    .pf-player-vol { width: 42px !important; }
    .pf-share {
        right: 12px !important;
        top: 12px !important;
        width: 40px !important;
        height: 40px !important;
        font-size: 16px !important;
    }
}

@media (max-width: 480px) {
    .pf-shell { padding: 26px 12px 100px !important; }
    .pf-card { padding: 24px 14px 20px !important; }
    .pf-name { font-size: 22px !important; }
    .pf-bio { font-size: 13px !important; }
    .pf-link { padding: 12px !important; }
    .pf-link-label { font-size: 13.5px !important; }
}

/* ============================================================
   ALLGEMEINE FORMS — Touch-Targets & iOS Zoom-Fix
   ============================================================ */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="url"],
    input[type="tel"],
    textarea,
    select {
        font-size: 16px !important; /* verhindert iOS Auto-Zoom beim Fokus */
    }

    /* Buttons mindestens 40px hoch für Touch */
    button:not(.kk-header__menu-btn):not(.kk-header__avatar-btn):not(.announcement-close):not(.kk-header__dd-item):not(.pf-player-btn):not(.pf-player-close):not(.pe-tab):not(.editor-tab) {
        min-height: 40px;
    }
}

/* ============================================================
   LANDSCAPE PHONES — kleine spezielle Anpassungen
   ============================================================ */
@media (max-height: 480px) and (orientation: landscape) {
    .hero {
        min-height: auto !important;
        padding: 70px 18px 30px !important;
    }
    .hero-logo {
        width: 80px !important;
        height: 80px !important;
        margin-bottom: 8px !important;
    }
    .hero-tagline { margin-bottom: 8px; }
    .hero-desc { margin-bottom: 14px; }
    .pf-shell { padding: 70px 14px 40px !important; }
    .pf-avatar-wrap { width: 90px !important; height: 90px !important; }
}

/* ============================================================
   PANEL.CSS — TATSÄCHLICHE Klassen (.hub-*)
   ============================================================ */
@media (max-width: 1024px) {
    .hub-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 14px !important;
    }
    .hub-status-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }
    .hub-rooms-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }
    .hub-w2g-actions {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
}
@media (max-width: 768px) {
    .hub-body { padding-top: 76px !important; }
    .hub-hero {
        flex-direction: column !important;
        text-align: center;
        padding: 18px 16px !important;
        gap: 12px !important;
    }
    .hub-hero-icon {
        width: 56px !important;
        height: 56px !important;
        font-size: 1.6rem !important;
    }
    .hub-hero-text h1 { font-size: 1.3rem !important; }
    .hub-hero-text p { font-size: 0.85rem !important; }

    .hub-grid,
    .hub-status-grid,
    .hub-rooms-grid,
    .hub-w2g-actions {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .hub-card,
    .hub-status-card,
    .hub-action-card {
        padding: 16px 14px !important;
    }
    .hub-card-body h3,
    .hub-action-title { font-size: 1rem !important; }
    .hub-card-body p,
    .hub-action-sub { font-size: 0.82rem !important; }

    .hub-section { margin-bottom: 28px; }
    .hub-section-title h2 { font-size: 1.1rem !important; }
    .hub-section-title p { font-size: 0.82rem !important; }
    .hub-welcome { font-size: 0.92rem !important; padding: 14px !important; }

    .hub-action-card {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .hub-action-input {
        font-size: 16px !important;
        width: 100% !important;
    }
    .hub-action-go,
    .hub-action-arrow {
        align-self: flex-end;
    }

    .hub-rooms-head {
        flex-direction: column;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .panel-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    .panel-tabs::-webkit-scrollbar { display: none; }
    .panel-tab {
        flex: 0 0 auto !important;
        white-space: nowrap;
        font-size: 0.82rem !important;
        padding: 8px 14px !important;
    }

    .panel-content { padding: 14px !important; }
    .panel-section-header h2 { font-size: 1.1rem !important; }
    .panel-section-header p { font-size: 0.82rem !important; }
}
@media (max-width: 480px) {
    .hub-card,
    .hub-status-card,
    .hub-action-card { padding: 14px 12px !important; }
    .hub-hero { padding: 16px 12px !important; }
    .hub-card-icon,
    .hub-status-icon { width: 38px !important; height: 38px !important; font-size: 1.1rem !important; }
}

/* ============================================================
   ADMIN.CSS — TATSÄCHLICHE Klassen
   ============================================================ */
@media (max-width: 768px) {
    body.admin-body { padding-top: 70px !important; }
    .admin-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    .admin-tabs::-webkit-scrollbar { display: none; }
    .admin-tab {
        flex: 0 0 auto !important;
        white-space: nowrap;
        font-size: 0.82rem !important;
        padding: 8px 14px !important;
    }
    .admin-content { padding: 14px !important; }
    .admin-section-header h2 { font-size: 1.1rem !important; }
    .admin-section-header p { font-size: 0.82rem !important; }

    .admin-overview-grid,
    .admin-quickaccess-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .admin-overview-tile,
    .admin-app-card { padding: 16px 14px !important; }
    .admin-overview-header { flex-direction: column; align-items: stretch !important; gap: 10px !important; }
}
@media (max-width: 1100px) {
    .admin-overview-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* ============================================================
   RADIO.CSS — TATSÄCHLICHE Klassen
   ============================================================ */
@media (max-width: 1024px) {
    .radio-page,
    .radio-body { padding: 76px 14px 30px !important; }
    .radio-hero { flex-direction: column; text-align: center; padding: 18px 16px !important; gap: 12px !important; }
}
@media (max-width: 768px) {
    .radio-page { padding: 70px 12px 30px !important; }
    .radio-hero-icon {
        width: 56px !important;
        height: 56px !important;
        font-size: 1.6rem !important;
    }
    .radio-hero-text h1 { font-size: 1.3rem !important; }
    .radio-hero-text p { font-size: 0.85rem !important; }
}

/* ============================================================
   WATCH.CSS — TATSÄCHLICHE Klassen
   ============================================================ */
@media (max-width: 1024px) {
    .w2g-layout {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    .w2g-side-col {
        max-height: none !important;
        height: auto !important;
    }
}
@media (max-width: 768px) {
    .w2g-body { padding-top: 76px !important; }
    .w2g-subheader {
        flex-wrap: wrap;
        gap: 8px !important;
        padding: 10px 12px !important;
    }
    .w2g-room-chip { flex-wrap: wrap; }
    .w2g-page-hero { padding: 18px 14px !important; }
    .w2g-lobby { padding: 24px 14px !important; }
    .w2g-lobby-card { padding: 20px 16px !important; }
    .w2g-lobby-logo { width: 64px; height: 64px; }
    .w2g-lobby-actions { gap: 12px !important; }
    .w2g-big-btn {
        width: 100% !important;
        font-size: 0.95rem !important;
        padding: 12px 14px !important;
        min-height: 48px;
    }
    .w2g-lobby-join-row {
        flex-direction: column;
        gap: 8px !important;
    }
    .w2g-lobby-join-row input {
        width: 100% !important;
        font-size: 16px !important;
    }
    .w2g-side-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .w2g-side-tabs::-webkit-scrollbar { display: none; }
    .w2g-side-tab {
        flex: 0 0 auto !important;
        white-space: nowrap;
        font-size: 0.82rem !important;
        padding: 8px 12px !important;
    }
    .w2g-player-bar {
        flex-direction: column;
        align-items: stretch !important;
        gap: 8px !important;
    }
    .w2g-player-actions {
        justify-content: space-between;
    }
    .w2g-add-card { padding: 14px !important; }
    .w2g-side-col { gap: 12px; }
}

/* ============================================================
   PROFILE.CSS — pf-* tatsächliche Klassen
   ============================================================ */
@media (max-width: 1024px) {
    .pf-shell { padding: 36px 18px 100px !important; }
}

/* ============================================================
   PROFILE-EDITOR.CSS — pfe-* tatsächliche Klassen
   ============================================================ */
@media (max-width: 1024px) {
    .pfe-shell,
    .pfe-layout {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    .pfe-sidebar,
    .pfe-preview-col {
        position: static !important;
        max-height: none !important;
        width: 100% !important;
    }
    .pfe-preview {
        height: auto !important;
        min-height: 480px !important;
    }
}
@media (max-width: 768px) {
    body.pfe-body { padding-top: 70px !important; }
    .pfe-shell,
    .pfe-layout { padding: 76px 12px 30px !important; }
    .pfe-section,
    .pfe-card { padding: 14px !important; border-radius: 12px !important; }
    .pfe-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .pfe-tabs::-webkit-scrollbar { display: none; }
    .pfe-tab {
        flex: 0 0 auto !important;
        white-space: nowrap;
        font-size: 0.82rem !important;
        padding: 8px 12px !important;
    }
    .pfe-input,
    .pfe-textarea,
    .pfe-select,
    input.pfe-input,
    textarea.pfe-input {
        font-size: 16px !important;
        padding: 10px 12px !important;
        min-height: 42px;
    }
    .pfe-grid { grid-template-columns: 1fr !important; }
    .pfe-color-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 8px !important; }
    .pfe-btn { min-height: 42px; padding: 10px 16px !important; font-size: 0.88rem !important; }
    .pfe-actions { flex-wrap: wrap; gap: 8px !important; }
    .pfe-preview {
        min-height: 420px !important;
    }
}

/* ============================================================
   ARCADE / GAME ZONE — arcade-* Klassen
   ============================================================ */
@media (max-width: 1024px) {
    .arcade-subheader {
        padding: 8px 14px !important;
    }
    .arcade-games-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
}
@media (max-width: 768px) {
    body:not(.kk-no-offset) .view {
        padding-top: 24px !important;
        padding-bottom: 50px !important;
    }
    .arcade-subheader {
        padding: 6px 12px !important;
        justify-content: flex-end;
    }
    .arcade-hero {
        flex-direction: column !important;
        text-align: center;
        gap: 14px !important;
        padding: 18px 14px !important;
    }
    .arcade-hero-icon {
        width: 64px !important;
        height: 64px !important;
        font-size: 1.8rem !important;
        margin: 0 auto;
    }
    .arcade-hero-title {
        font-size: 1.5rem !important;
        line-height: 1.2;
    }
    .arcade-hero-tagline {
        font-size: 0.95rem !important;
    }
    .arcade-hero-desc {
        font-size: 0.85rem !important;
        line-height: 1.55;
    }
    .arcade-card-inner {
        padding: 18px 14px !important;
    }
    .arcade-card-title {
        font-size: 1rem !important;
    }
    .arcade-card-sub {
        font-size: 0.82rem !important;
    }
    .arcade-section-title {
        font-size: 1.15rem !important;
        text-align: center;
        margin-top: 24px;
    }
    .arcade-games-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .game-tile {
        padding: 16px 12px !important;
    }
    .game-tile-icon {
        font-size: 1.6rem !important;
    }
    .game-tile-name {
        font-size: 0.95rem !important;
    }
    .game-tile-desc {
        font-size: 0.78rem !important;
    }

    /* Profile-Pill */
    .profile-pill-row { padding: 0 4px; }
    .profile-pill {
        padding: 8px 14px 8px 8px !important;
        font-size: 0.88rem !important;
        max-width: 100%;
    }
    .profile-name {
        max-width: 160px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Quick-Join */
    .quick-join-form {
        flex-direction: column !important;
        gap: 10px !important;
    }
    .quick-join-input {
        width: 100% !important;
        font-size: 16px !important;
        text-align: center;
        letter-spacing: 0.4em;
        padding: 12px !important;
    }
    .quick-join-form .btn {
        width: 100% !important;
        min-height: 46px;
    }

    /* How-To */
    .arcade-howto {
        flex-direction: column !important;
        gap: 12px !important;
    }
    .howto-step {
        flex-direction: row !important;
        text-align: left !important;
        align-items: flex-start;
        gap: 12px !important;
    }
    .howto-num {
        flex: 0 0 auto;
        width: 36px !important;
        height: 36px !important;
        font-size: 1rem !important;
    }

    /* Lobby */
    .lobby-head {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    .lobby-card {
        padding: 0 !important;
    }
    .lobby-card .arcade-card-inner {
        padding: 18px 14px !important;
    }
    .lobby-title {
        font-size: 1.15rem !important;
    }
    .lobby-sub {
        font-size: 0.85rem !important;
    }
    .invite-box {
        padding: 12px !important;
    }
    .invite-link-row {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .invite-link-input {
        width: 100% !important;
        font-size: 16px !important;
    }
    .invite-link-row .btn,
    .invite-code-row .btn {
        min-height: 42px;
    }
    .invite-code-row {
        flex-wrap: wrap;
        gap: 8px;
    }
    .invite-code {
        font-size: 1.1rem;
    }
    .lobby-actions {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    .lobby-actions .btn {
        width: 100%;
        min-height: 46px;
    }
    .lobby-hint {
        text-align: center;
    }

    /* Game-View */
    .game-head {
        flex-wrap: wrap;
        gap: 8px !important;
        padding: 8px 12px !important;
    }
    .game-title {
        font-size: 1rem !important;
    }
    .game-meta {
        font-size: 0.78rem !important;
    }
    .game-stage {
        padding: 8px !important;
    }
    .game-statusbar {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Name-Modal */
    .name-modal-backdrop {
        padding: 14px !important;
    }
    .name-modal {
        padding: 24px 18px !important;
        border-radius: 18px !important;
        max-width: 100% !important;
    }
    .name-modal-icon {
        font-size: 2rem !important;
    }
    .name-modal-title {
        font-size: 1.2rem !important;
    }
    .name-modal-sub {
        font-size: 0.85rem !important;
    }
    .name-modal-input {
        font-size: 16px !important;
        padding: 11px 14px !important;
    }
    .name-modal-actions {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .name-modal-actions .btn {
        width: 100% !important;
        min-height: 44px;
    }
    .discord-btn {
        width: 100% !important;
        justify-content: center;
        min-height: 46px;
    }

    /* Toast */
    .toast-stack {
        left: 12px !important;
        right: 12px !important;
        bottom: 12px !important;
    }
}

@media (max-width: 480px) {
    .arcade-games-grid {
        grid-template-columns: 1fr !important;
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }
    .game-tile {
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 12px;
        padding: 14px !important;
    }
    .game-tile-icon {
        font-size: 1.5rem !important;
        flex: 0 0 auto;
    }
    .arcade-hero-icon {
        width: 56px !important;
        height: 56px !important;
        font-size: 1.6rem !important;
    }
    .arcade-hero-title {
        font-size: 1.3rem !important;
    }
}

/* ============================================================
   LOGIN-OVERLAYS (mehrere Seiten)
   ============================================================ */
@media (max-width: 600px) {
    .login-overlay { padding: 16px !important; }
    .login-card {
        padding: 26px 18px !important;
        max-width: 100% !important;
        border-radius: 18px !important;
    }
    .login-logo { width: 64px !important; height: 64px !important; }
    .login-card h1 { font-size: 1.3rem !important; }
    .login-card p { font-size: 0.88rem !important; }
    .login-method-btn {
        width: 100% !important;
        padding: 12px 16px !important;
        font-size: 0.9rem !important;
        min-height: 46px;
    }
    .login-methods { flex-direction: column !important; gap: 10px !important; }
}

/* ============================================================
   PRINT — saubere Druckansicht
   ============================================================ */
@media print {
    .kk-header,
    .navbar,
    .coffee-machine,
    .bean-clear-btn,
    .creeper-egg,
    .ambient-orbs,
    #beanCanvas,
    #particleCanvas,
    .grain,
    #kkConsent { display: none !important; }
    body { background: white !important; color: black !important; }
}